/* ============================================================
   Felker Family Hub V2 — Dark Modern Theme
   iPad landscape-first, neon accents, glassmorphism
   ============================================================

   NOTE — Borders on gradient elements:
   Never use `border` with semi-transparent colors on elements
   that have a gradient background. The border blends with the
   gradient, producing visible colored lines at the edges
   (e.g. cyan on one side, purple on the other). Use
   `box-shadow: inset 0 0 0 1px <color>` instead — it renders
   on top of the background without blending.
   ============================================================ */

/* ---------- custom properties ---------- */
:root {
  --bg:           #0d1117;
  --bg-surface:   #161b22;
  --bg-card:      rgba(22, 27, 34, 0.85);
  --bg-card-hi:   rgba(30, 37, 48, 0.9);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-glow:   rgba(0, 212, 255, 0.12);

  /* accent — overridden per-user by Alpine */
  --accent:   #00d4ff;
  --accent-2: #8338ec;

  /* named accents for user themes */
  --cyan:    #00d4ff;
  --magenta: #ff006e;
  --purple:  #8338ec;
  --lime:    #06d6a0;
  --gold:    #ffd700;
  --red:     #ff4d6d;
  --blue:    #4361ee;

  --text:       #e6edf3;
  --text-dim:   #8b949e;
  --text-muted: #484f58;
  --danger:     #ff4d6d;

  --radius:    16px;
  --radius-sm: 10px;
  --blur:      12px;
  --nav-h:     64px;

  --day-col:     200px;
  --gap:         10px;
  --grid-width:  calc(7 * var(--day-col) + 6 * var(--gap));
}

/* per-user theme overrides — set via Alpine on body */
body.theme-cyan    { --accent: #00d4ff; --accent-2: #8338ec; }
body.theme-magenta { --accent: #ff006e; --accent-2: #ffd700; }
body.theme-purple  { --accent: #8338ec; --accent-2: #ff006e; }
body.theme-lime    { --accent: #06d6a0; --accent-2: #00d4ff; }
body.theme-gold    { --accent: #ffd700; --accent-2: #ff006e; }
body.theme-red     { --accent: #ff4d6d; --accent-2: #ffd700; }
body.theme-blue    { --accent: #4361ee; --accent-2: #00d4ff; }

/* ---------- reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'Poppins', sans-serif;
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: auto;
  -webkit-font-smoothing: antialiased;
}

/* subtle gradient mesh */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 80% 60% at 10% 20%, rgba(131, 56, 236, .06) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 90% 80%, rgba(0, 212, 255, .05) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 50% 50%, rgba(255, 0, 110, .04) 0%, transparent 60%);
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- page layout ---------- */
.page-content {
  padding: 20px 24px;
  padding-bottom: calc(var(--nav-h) + 20px);
  max-width: 1700px;
  margin: 0 auto;
}

/* ---------- bottom nav ---------- */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--nav-h);
  background: rgba(13, 17, 23, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--glass-border);
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 12px;
  z-index: 1000;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s;
  min-width: 56px;
  position: relative;
}
.nav-item:hover {
  color: var(--text);
  text-decoration: none;
  background: rgba(255, 255, 255, 0.04);
}
.nav-item.active {
  color: var(--accent);
}
.nav-item.active::after {
  content: '';
  position: absolute;
  top: -1px;
  left: 25%;
  right: 25%;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}

.nav-icon {
  font-size: 22px;
  line-height: 1;
}

/* nav user badge */
.nav-user {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-border);
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
}
.nav-user:hover {
  background: rgba(255, 255, 255, 0.08);
  text-decoration: none;
}

.nav-user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  position: relative;
  overflow: hidden;
}
.nav-user-avatar.has-char {
  background: none;
  overflow: visible;
}

.nav-level-badge {
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--accent);
  font-weight: 700;
}

/* interest ticker */
.nav-ticker {
  font-family: 'Courier New', monospace;
  font-size: 12px;
  color: var(--lime);
  white-space: nowrap;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(6, 214, 160, 0.08);
}

/* ---------- header ---------- */
.page-header {
  padding: 16px 0;
  margin-bottom: 20px;
}

.page-header h1 {
  font-size: 2rem;
  font-weight: 700;
  margin: 0;
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

/* ---------- glassmorphism cards ---------- */
.card, section {
  background: var(--bg-card);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.card h2, section h2 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--glass-border);
  position: relative;
}
.card h2::after, section h2::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 50px;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: 2px;
}

/* ---------- inputs / selects / buttons ---------- */
input, select, textarea {
  padding: 10px 14px;
  margin: 4px;
  font-size: 14px;
  font-family: 'Poppins', sans-serif;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border);
  background: var(--bg-surface);
  color: var(--text);
  transition: all 0.2s;
}
input::placeholder, textarea::placeholder { color: var(--text-muted); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.12);
}
select option { background: var(--bg-surface); color: var(--text); }

button {
  font-family: 'Poppins', sans-serif;
  cursor: pointer;
}

.btn {
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: none;
  transition: all 0.2s;
}

.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  box-shadow: 0 4px 16px rgba(0, 212, 255, 0.2);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(0, 212, 255, 0.3);
}

.btn-danger {
  background: rgba(255, 77, 109, 0.15);
  color: var(--danger);
  border: 1px solid rgba(255, 77, 109, 0.25);
}
.btn-danger:hover {
  background: rgba(255, 77, 109, 0.25);
}

.btn-ghost {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-dim);
  border: 1px solid var(--glass-border);
}
.btn-ghost:hover {
  color: var(--text);
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.08);
}

/* ---------- forms ---------- */
form { margin-bottom: 16px; }
form button[type="submit"] {
  padding: 10px 22px;
  margin: 4px;
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: none;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  transition: transform 0.15s, box-shadow 0.2s;
}
form button[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 212, 255, 0.3);
}

/* ---------- filter bar ---------- */
.filter-bar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  margin-bottom: 16px;
}
.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  width: 100%;
}

.filter-btn {
  background: var(--bg-surface);
  color: var(--text-dim);
  font-weight: 600;
  border: none;
  border-radius: 999px;
  padding: 8px 19px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: inset 0 0 0 1px var(--glass-border);
}
.filter-btn:hover {
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--accent), 0 0 10px rgba(0, 212, 255, 0.12);
  transform: translateY(-1px);
}
.filter-btn.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  box-shadow: 0 0 14px rgba(0, 212, 255, 0.25);
}

/* ---------- chore grid ---------- */
#chore-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

#chore-list section:last-of-type {
  min-width: calc(var(--grid-width) + 50px);
}

.user-section {
  background: var(--bg-card);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 14px 20px 20px;
  margin-bottom: 6px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  min-width: calc(var(--grid-width) + 40px);
  transition: box-shadow 0.3s;
  touch-action: pan-x pan-y;
}
.user-section:hover {
  box-shadow: 0 8px 40px rgba(0, 150, 200, 0.08);
}

/* user-color accents */
.user-section[data-user-index="0"] { border-left: 3px solid var(--cyan); }
.user-section[data-user-index="1"] { border-left: 3px solid var(--magenta); }
.user-section[data-user-index="2"] { border-left: 3px solid var(--lime); }
.user-section[data-user-index="3"] { border-left: 3px solid var(--purple); }
.user-section[data-user-index="4"] { border-left: 3px solid var(--gold); }

.user-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  padding: 4px 8px 0;
}

.user-name {
  font-size: 2rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  padding: 4px 0;
}
.user-section[data-user-index="1"] .user-name {
  background: linear-gradient(135deg, var(--magenta), var(--gold));
  background-clip: text;
  -webkit-background-clip: text;
}
.user-section[data-user-index="2"] .user-name {
  background: linear-gradient(135deg, var(--lime), var(--cyan));
  background-clip: text;
  -webkit-background-clip: text;
}
.user-section[data-user-index="3"] .user-name {
  background: linear-gradient(135deg, var(--purple), var(--magenta));
  background-clip: text;
  -webkit-background-clip: text;
}

/* progress bar */
.progress-wrapper { margin: 0 8px 10px; }
.progress-track {
  height: 8px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 99px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--accent), var(--lime));
  transition: width 0.5s ease;
}
.progress-label {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 3px;
  text-align: right;
}

.delete-user {
  padding: 5px 14px;
  font-size: 12px;
  background: rgba(255, 77, 109, 0.1);
  color: var(--danger);
  border: 1px solid rgba(255, 77, 109, 0.25);
  border-radius: 8px;
  transition: all 0.2s;
}
.delete-user:hover { background: rgba(255, 77, 109, 0.2); }

/* days header + row */
.days-header {
  display: grid;
  grid-template-columns: repeat(7, var(--day-col));
  gap: var(--gap);
  width: var(--grid-width);
  min-width: var(--grid-width);
  font-weight: 600;
  font-size: 13px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--glass-border);
  padding-bottom: 6px;
  text-align: center;
}
.user-row {
  display: grid;
  grid-template-columns: repeat(7, var(--day-col));
  gap: var(--gap);
  width: var(--grid-width);
  min-width: var(--grid-width);
  margin-top: 10px;
}

.day-col {
  min-height: 80px;
  border-left: 1px solid rgba(255, 255, 255, 0.04);
  padding: 6px;
  border-radius: 8px;
  transition: background 0.2s;
  touch-action: pan-x pan-y;
}
.day-col:hover { background: rgba(255, 255, 255, 0.02); }

/* ---------- chore cards ---------- */
.chore-item {
  width: 100%;
  padding: 12px 40px 12px 12px;
  margin-bottom: 8px;
  background: var(--bg-surface);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  font-size: 14px;
  transition: all 0.25s ease;
  cursor: default;
  position: relative;
}
.chore-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  border-color: rgba(0, 212, 255, 0.2);
}

.drag-handle {
  position: absolute;
  top: 0;
  right: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  border-radius: 0 12px 0 8px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-dim);
  font-size: 16px;
  letter-spacing: -3px;
  user-select: none;
  touch-action: none;
  transition: background 0.2s;
  z-index: 2;
}
.drag-handle:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--accent);
}
.drag-handle:active { cursor: grabbing; }

.sortable-ghost { opacity: 0.4; border: 2px dashed var(--accent); }
.sortable-chosen { box-shadow: 0 0 20px rgba(0, 212, 255, 0.2); }

.chore-title {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text);
}
.chore-status {
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.chore-rotation {
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 3px;
}

/* checkmark */
.check-icon {
  display: inline-flex;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex-shrink: 0;
}
.check-icon.done {
  background: var(--lime);
  color: #fff;
  animation: checkPop 0.3s ease;
}
.check-icon.pending { border: 2px solid var(--text-dim); }
@keyframes checkPop {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.3); }
  100% { transform: scale(1); }
}

.chore-buttons {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}
.chore-buttons .top-row {
  display: flex;
  justify-content: space-between;
  gap: 4px;
}
.chore-buttons .top-row button {
  flex: 1;
  padding: 4px 6px;
  font-size: 12px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-dim);
  transition: all 0.15s;
}
.chore-buttons .top-row button:hover {
  color: var(--text);
  border-color: var(--accent);
}

.delete-btn {
  background: rgba(255, 77, 109, 0.1) !important;
  color: var(--danger) !important;
  border-color: rgba(255, 77, 109, 0.25) !important;
}
.delete-btn:hover { background: rgba(255, 77, 109, 0.2) !important; }
.edit-btn:hover { background: rgba(0, 212, 255, 0.08) !important; }

.primary-btn {
  background: linear-gradient(135deg, var(--lime), #00b894);
  color: #fff;
  font-weight: 700;
  border: none;
  border-radius: var(--radius-sm);
  padding: 8px;
  width: 100%;
  height: 42px;
  font-size: 15px;
  box-shadow: 0 4px 14px rgba(6, 214, 160, 0.2);
  transition: all 0.2s;
}
.primary-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(6, 214, 160, 0.3);
}
.primary-btn:active {
  transform: translateY(1px);
  box-shadow: 0 2px 6px rgba(6, 214, 160, 0.15);
}

.primary-btn.undo-btn,
.chore-item.completed .primary-btn {
  background: linear-gradient(135deg, var(--danger), #c9184a);
  color: #fff;
  box-shadow: 0 4px 14px rgba(255, 77, 109, 0.2);
}
.primary-btn.undo-btn:hover,
.chore-item.completed .primary-btn:hover {
  box-shadow: 0 6px 20px rgba(255, 77, 109, 0.3);
}

.chore-item.completed {
  background: rgba(6, 214, 160, 0.08);
  border-color: rgba(6, 214, 160, 0.2);
}
.chore-item.rotating {
  background: rgba(255, 214, 10, 0.06);
  border-color: rgba(255, 214, 10, 0.15);
}

.rotation-display {
  background: rgba(200, 162, 0, 0.06);
  border: 1px solid rgba(200, 162, 0, 0.15);
  border-radius: 8px;
  padding: 8px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--gold);
  word-wrap: break-word;
}
.rotation-display div { margin-bottom: 2px; }

/* pop animations */
@keyframes popBig {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}
@keyframes popSmall {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.02); }
  100% { transform: scale(1); }
}
.pop-big   { animation: popBig   0.25s ease; }
.pop-small { animation: popSmall 0.25s ease; }

/* rotation setup */
.rotation-ui {
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 16px;
}
.rotation-user {
  background: rgba(0, 212, 255, 0.08);
  padding: 10px 18px;
  margin: 5px 0;
  border-radius: 999px;
  border: 1px solid rgba(0, 212, 255, 0.2);
  cursor: grab;
  user-select: none;
  transition: all 0.2s;
  display: inline-block;
  font-size: 15px;
  color: var(--text);
}
.rotation-user:hover {
  background: rgba(0, 212, 255, 0.15);
  transform: scale(1.02);
}
.rotation-user.pinned {
  background: rgba(255, 214, 10, 0.08);
  border: 1px solid rgba(255, 214, 10, 0.2);
  font-weight: bold;
  cursor: default;
  color: var(--gold);
}

#reset-week-btn {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-dim);
  padding: 6px 16px;
  font-size: 13px;
  width: auto;
  height: auto;
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  transition: all 0.2s;
}
#reset-week-btn:hover {
  color: var(--text);
  border-color: var(--accent);
  box-shadow: 0 0 10px rgba(0, 212, 255, 0.08);
}

/* ---------- today mode ---------- */
.today-mode .days-header,
.today-mode .user-row {
  grid-template-columns: var(--day-col);
  width: var(--day-col);
  min-width: var(--day-col);
}
.today-mode section:last-of-type { min-width: auto; }
.today-mode .user-section { min-width: calc(var(--day-col) + 40px); }

/* ---------- login page ---------- */
.login-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100dvh;
  padding: 20px 20px 14vh;
  overflow: hidden;
  box-sizing: border-box;
}

.login-brand {
  text-align: center;
  margin-bottom: 70px;
}
.login-brand h1 {
  font-size: 3.8rem;
  font-weight: 700;
  margin: 0;
  background: linear-gradient(120deg, var(--cyan), var(--magenta), var(--lime));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
.login-brand .subtitle {
  font-size: 14px;
  color: var(--text-dim);
  margin-top: 8px;
}

.user-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, 210px);
  gap: 32px;
  justify-content: center;
  max-width: 1100px;
  width: 100%;
}

.user-card-form {
  margin: 0;
  padding: 0;
}

.user-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 36px 28px;
  background: var(--bg-surface);
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.25s ease;
  text-decoration: none;
  color: var(--text);
  position: relative;
  /* reset button defaults */
  -webkit-appearance: none;
  appearance: none;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  width: 100%;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  box-shadow: inset 0 0 0 1px var(--glass-border);
}
.user-card:hover {
  transform: translateY(-4px);
  box-shadow: inset 0 0 0 1px var(--accent), 0 12px 40px rgba(0, 0, 0, 0.3);
  text-decoration: none;
}

.user-card-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 52px;
  color: #fff;
  border: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  overflow: visible;
  /* Float effect — lifted above the card surface */
  transform: translateY(-8px);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.4),
    0 0 8px rgba(0, 212, 255, 0.1);
}
/* Elliptical shadow on the card surface beneath the avatar */
.user-card::before {
  content: '';
  position: absolute;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.45) 0%, transparent 70%);
  z-index: 0;
  transition: all 0.3s ease;
  pointer-events: none;
}
.user-card:hover .user-card-avatar {
  transform: translateY(-14px);
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.35),
    0 0 16px rgba(0, 212, 255, 0.2);
}
.user-card:hover::before {
  top: 50px;
  width: 40px;
  height: 8px;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.3) 0%, transparent 70%);
}

/* level-based card effects are in the "Login cards by level" section below */

@keyframes cardGlow {
  0%, 100% { box-shadow: 0 0 24px rgba(255, 215, 0, 0.08); }
  50%      { box-shadow: 0 0 40px rgba(255, 215, 0, 0.16); }
}

.user-card-name {
  font-size: 24px;
  font-weight: 600;
}

.user-card-level {
  font-size: 15px;
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--accent);
  font-weight: 600;
}

.user-card-admin {
  font-size: 9px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 4px;
  text-align: center;
}

/* ---------- PIN page ---------- */
.pin-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 40px 20px;
}

.pin-card {
  background: var(--bg-card);
  backdrop-filter: blur(var(--blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 40px;
  text-align: center;
  max-width: 360px;
  width: 100%;
}

.pin-card h2 {
  font-size: 1.5rem;
  margin: 0 0 8px;
  color: var(--text);
  border: none;
  padding: 0;
}
.pin-card h2::after { display: none; }

.pin-card p {
  color: var(--text-dim);
  margin: 0 0 24px;
  font-size: 14px;
}

.pin-dots {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-bottom: 24px;
}
.pin-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--text-dim);
  transition: all 0.2s;
}
.pin-dot.filled {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 8px rgba(0, 212, 255, 0.3);
}

.pin-pad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  max-width: 240px;
  margin: 0 auto;
}
.pin-key {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 1px solid var(--glass-border);
  background: var(--bg-surface);
  color: var(--text);
  font-size: 22px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
  margin: 0 auto;
}
.pin-key:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--accent);
}
.pin-key:active {
  transform: scale(0.95);
}
.pin-key.backspace {
  font-size: 16px;
}

.pin-error {
  color: var(--danger);
  font-size: 13px;
  margin-top: 16px;
  min-height: 20px;
}

.pin-lockout {
  color: var(--danger);
  font-size: 14px;
  font-weight: 600;
  margin-top: 16px;
}

/* ---------- grocery list ---------- */
.grocery-panel {
  max-width: 600px;
  margin: 0 auto;
}

.grocery-input-row {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.grocery-input-row input { flex: 1; min-width: 180px; }
.grocery-input-row select { min-width: 120px; }
.grocery-input-row button {
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: none;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  transition: all 0.2s;
}
.grocery-input-row button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 212, 255, 0.3);
}

.grocery-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  max-height: 420px;
  overflow-y: auto;
}
.grocery-list::-webkit-scrollbar { width: 6px; }
.grocery-list::-webkit-scrollbar-track { background: transparent; }
.grocery-list::-webkit-scrollbar-thumb { background: var(--glass-border); border-radius: 3px; }

.grocery-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  margin-bottom: 6px;
  background: var(--bg-surface);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  transition: all 0.2s;
}
.grocery-item:hover {
  background: var(--bg-card-hi);
  border-color: rgba(0, 212, 255, 0.15);
}
.grocery-item-name { font-weight: 500; font-size: 15px; }
.grocery-item-by { font-size: 12px; color: var(--text-dim); margin-left: 8px; }
.grocery-item-delete {
  padding: 4px 12px;
  font-size: 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 77, 109, 0.25);
  background: rgba(255, 77, 109, 0.1);
  color: var(--danger);
  cursor: pointer;
  transition: all 0.15s;
}
.grocery-item-delete:hover { background: rgba(255, 77, 109, 0.2); }

.grocery-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.grocery-actions select { min-width: 120px; }
.grocery-send-btn {
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: none;
  background: linear-gradient(135deg, var(--magenta), var(--purple));
  color: #fff;
  transition: all 0.2s;
}
.grocery-send-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(255, 0, 110, 0.3);
}
.grocery-clear-btn {
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 77, 109, 0.25);
  background: rgba(255, 77, 109, 0.1);
  color: var(--danger);
  transition: all 0.15s;
}
.grocery-clear-btn:hover { background: rgba(255, 77, 109, 0.2); }

.grocery-empty {
  text-align: center;
  color: var(--text-dim);
  padding: 40px 0;
  font-size: 15px;
}

/* ---------- flash messages ---------- */
.flash-msg {
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
  font-size: 14px;
  font-weight: 500;
}
.flash-msg.error {
  background: rgba(255, 77, 109, 0.1);
  border: 1px solid rgba(255, 77, 109, 0.25);
  color: var(--danger);
}
.flash-msg.success {
  background: rgba(6, 214, 160, 0.1);
  border: 1px solid rgba(6, 214, 160, 0.25);
  color: var(--lime);
}

/* ---------- responsive ---------- */
@media (max-width: 1200px) {
  :root { --day-col: 180px; }
}

@media (max-width: 900px) {
  :root { --day-col: 160px; }
  .page-header h1 { font-size: 1.6rem; }
  .user-name { font-size: 1.6rem; }
  .login-brand h1 { font-size: 2.2rem; }

  .days-header,
  .user-row {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  section:last-of-type,
  .user-section {
    min-width: 0 !important;
  }
  .days-header > div { text-align: left; padding: 4px 8px; }
  .day-col { border-left: none; border-top: 1px solid var(--glass-border); }
}

@media (max-width: 600px) {
  body { padding: 0; }
  .page-content { padding: 12px; padding-bottom: calc(var(--nav-h) + 12px); }
  .page-header h1 { font-size: 1.3rem; }
  .user-name { font-size: 1.2rem; }
  section, .card { padding: 14px; }
  .login-brand h1 { font-size: 1.8rem; }
  .user-grid { grid-template-columns: repeat(3, 120px); gap: 12px; }
  .user-card { padding: 20px 12px; }
  .user-card-avatar { width: 52px; height: 52px; font-size: 24px; }
}

/* cursor helpers */
.cursor-grab    { cursor: grab; }
.cursor-grabbing { cursor: grabbing; }

/* ---------- calendar dashboard ---------- */
.calendar-header {
  text-align: center;
  margin-bottom: 24px;
}
.calendar-header .page-title {
  font-size: 2.2rem;
  font-weight: 700;
  margin: 0;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.calendar-date {
  color: var(--text-dim);
  font-size: 1rem;
  margin-top: 4px;
}

/* streak banner */
.streak-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  margin-bottom: 24px;
  background: var(--bg-surface);
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px var(--glass-border);
}
.streak-fire { font-size: 1.4rem; }
.streak-text {
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--text);
}
.streak-best {
  font-size: 0.8rem;
  color: var(--gold);
  font-weight: 600;
  padding: 2px 8px;
  background: rgba(255, 215, 0, 0.1);
  border-radius: 999px;
}

/* two-column layout */
.calendar-wrapper {
  max-width: 1200px;
  margin: 0 auto;
}
.calendar-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
}
@media (max-width: 768px) {
  .calendar-grid { grid-template-columns: 1fr; }
}

/* sections */
.calendar-section {
  background: var(--bg-surface);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: inset 0 0 0 1px var(--glass-border);
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.section-header h2 {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
  color: var(--text);
}
.progress-badge {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent);
  padding: 3px 10px;
  background: rgba(0, 212, 255, 0.1);
  border-radius: 999px;
}

/* chore items (calendar dashboard — scoped to avoid overriding chore grid cards) */
.calendar-section .chore-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 12px;
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--glass-border);
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: inherit;
  text-align: left;
  border-radius: 10px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease, opacity 0.2s ease;
}
.calendar-section .chore-item:last-child { border-bottom: none; }
.calendar-section .chore-item:active { background: rgba(255,255,255,0.06); }
.calendar-section .chore-item.chore-done { opacity: 0.55; }

.chore-check {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg-card);
  box-shadow: inset 0 0 0 2px var(--glass-border);
  color: var(--text-dim);
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
}
.calendar-section .chore-item:hover .chore-check {
  box-shadow: inset 0 0 0 2px var(--accent);
  color: var(--accent);
}
.chore-check.checked {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: none;
  color: #fff;
}

.chore-text { font-size: 0.95rem; color: var(--text); }
.chore-strikethrough { text-decoration: line-through; color: var(--text-dim); }

/* chore progress bar */
.chore-progress-bar {
  margin-top: 16px;
  height: 6px;
  background: var(--bg-card);
  border-radius: 3px;
  overflow: hidden;
}
.chore-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: 3px;
  transition: width 0.4s ease;
}

/* event items */
.event-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--glass-border);
}
.event-item:last-child { border-bottom: none; }

.event-time {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent);
  min-width: 70px;
  padding-top: 2px;
}
.event-details { flex: 1; }
.event-title { font-size: 0.95rem; color: var(--text); font-weight: 500; }
.event-desc { font-size: 0.8rem; color: var(--text-dim); margin-top: 2px; }
.event-source {
  font-size: 0.7rem;
  color: var(--text-muted);
  padding: 2px 6px;
  background: var(--bg-card);
  border-radius: 4px;
  flex-shrink: 0;
}
.event-delete {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  transition: color 0.2s;
  -webkit-appearance: none;
  appearance: none;
}
.event-delete:hover { color: var(--danger); }

/* add event form */
.event-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
  padding: 16px;
  background: var(--bg-card);
  border-radius: var(--radius-sm);
}
.event-form-row {
  display: flex;
  gap: 12px;
}
.event-form-row > * { flex: 1; }

.form-input {
  padding: 14px 16px;
  background: var(--bg);
  border: none;
  box-shadow: inset 0 0 0 1px var(--glass-border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  outline: none;
  transition: box-shadow 0.2s;
  -webkit-appearance: none;
  appearance: none;
  min-height: 52px;
  width: 100%;
  box-sizing: border-box;
}
.form-input:focus {
  box-shadow: inset 0 0 0 2px var(--accent);
}
.form-input::placeholder { color: var(--text-muted); }

/* color scheme for date/time inputs */
.form-input::-webkit-calendar-picker-indicator {
  filter: invert(0.7);
  width: 24px;
  height: 24px;
  cursor: pointer;
}

.btn-primary {
  padding: 8px 16px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border: none;
  border-radius: var(--radius-sm);
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: opacity 0.2s;
  -webkit-appearance: none;
  appearance: none;
}
.btn-primary:hover { opacity: 0.9; }

/* Full-width, taller submit button inside the event form */
.event-form .btn-primary {
  width: 100%;
  padding: 16px;
  font-size: 1rem;
  letter-spacing: 0.02em;
  min-height: 54px;
  border-radius: var(--radius);
  -webkit-tap-highlight-color: transparent;
}

.add-event-btn {
  padding: 10px 20px;
  background: none;
  border: none;
  box-shadow: inset 0 0 0 1px var(--glass-border);
  border-radius: 999px;
  color: var(--accent);
  font-family: 'Poppins', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  -webkit-appearance: none;
  appearance: none;
  min-height: 44px;
  -webkit-tap-highlight-color: transparent;
}
.add-event-btn:hover {
  box-shadow: inset 0 0 0 1px var(--accent);
  background: rgba(0, 212, 255, 0.08);
}
.add-event-btn:active {
  background: rgba(0, 212, 255, 0.15);
}

.empty-state {
  text-align: center;
  color: var(--text-muted);
  padding: 24px 0;
  font-size: 0.9rem;
}

[x-cloak] { display: none !important; }

/* ---------- tab navigation (V1 compat) ---------- */
.tab-bar {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-bottom: 24px;
}
.tab-btn {
  padding: 11px 33px;
  border-radius: 999px;
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  color: var(--text-dim);
  background: var(--bg-surface);
  border: none;
  transition: all 0.25s;
  box-shadow: inset 0 0 0 1px var(--glass-border);
}
.tab-btn:hover {
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--accent), 0 0 12px rgba(0, 212, 255, 0.15);
}
.tab-btn.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  box-shadow: 0 0 18px rgba(0, 212, 255, 0.25);
}
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ============================================================
   Bank & Savings
   ============================================================ */

/* -- tab bar -- */
.bank-tabs {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 20px;
}

/* -- cashout hero -- */
/* -- balance row (chequing + savings) -- */
.bank-balances-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}
.bank-balance-card {
  text-align: center;
  padding: 14px 12px;
  background: var(--bg-card);
  backdrop-filter: blur(var(--blur));
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px var(--glass-border);
}
.bank-balance-label {
  font-size: 0.75rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
}
.bank-balance-amount {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-main);
}
.bank-balance-sublabel {
  font-size: 0.72rem;
  color: var(--accent);
  margin-top: 2px;
}

/* -- cashout input row -- */
.bank-cashout-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  margin: 10px 0 0;
}
.bank-cashout-input {
  width: 110px;
  padding: 8px 10px;
  background: var(--bg-input, rgba(255,255,255,0.07));
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  color: var(--text-main);
  font-size: 1rem;
  text-align: center;
}
.bank-cashout-input:focus {
  outline: none;
  border-color: var(--accent);
}
/* hide number spinners */
.bank-cashout-input::-webkit-inner-spin-button,
.bank-cashout-input::-webkit-outer-spin-button { -webkit-appearance: none; }
.bank-cashout-input[type=number] { -moz-appearance: textfield; }

/* -- modal savings remaining note -- */
.modal-savings-remaining {
  font-size: 0.8rem;
  color: var(--accent);
  margin-top: 4px;
}

.bank-cashout-section {
  text-align: center;
  padding: 28px 20px;
  margin-bottom: 16px;
  background: var(--bg-card);
  backdrop-filter: blur(var(--blur));
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px var(--glass-border), 0 8px 32px rgba(0,0,0,0.2);
}
.bank-cashout-label {
  font-size: 0.85rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
}
.bank-cashout-amount {
  font-size: 2.8rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--accent), var(--lime));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.2;
}
.bank-cashout-btn {
  margin-top: 14px;
  padding: 12px 40px;
  font-size: 1.05rem;
}
.bank-cashout-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* -- overview row -- */
.bank-overview-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}
@media (max-width: 600px) {
  .bank-overview-row { grid-template-columns: 1fr; }
}

/* -- card -- */
.bank-card {
  background: var(--bg-card);
  backdrop-filter: blur(var(--blur));
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: inset 0 0 0 1px var(--glass-border), 0 8px 32px rgba(0,0,0,0.2);
  margin-bottom: 12px;
}
.bank-card-label {
  font-size: 0.8rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.bank-card-amount {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text);
}

/* -- interest ticker on bank page -- */
.bank-interest-ticker {
  font-family: 'Courier New', monospace;
  font-size: 0.85rem;
  color: var(--lime);
  background: rgba(6, 214, 160, 0.1);
  padding: 2px 8px;
  border-radius: 6px;
  margin-left: 8px;
}

/* -- projection -- */
.bank-projection {
  font-size: 0.8rem;
  color: var(--text-dim);
  margin-top: 6px;
}

/* -- deposit form -- */
.bank-deposit-form {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  align-items: center;
}
.bank-deposit-input {
  flex: 1;
  max-width: 140px;
}

/* -- savings cap bar -- */
.bank-savings-cap {
  margin-top: 10px;
  font-size: 0.78rem;
  color: var(--text-dim);
}
.bank-savings-cap .progress-track {
  margin-top: 4px;
}

/* -- section titles -- */
.section-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 12px;
}
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

/* -- vault grid (gold coins behind melting ice) -- */
.bank-deposits-section {
  margin-bottom: 16px;
}
.vault-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

/* -- individual vault item -- */
.vault-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(145deg, #1a1a2e, #16213e);
  box-shadow: inset 0 0 0 1px var(--glass-border), 0 8px 24px rgba(0,0,0,0.3);
  transition: transform 0.2s, box-shadow 0.2s;
}
.vault-sm  { width: 120px; height: 160px; }
.vault-md  { width: 150px; height: 190px; }
.vault-lg  { width: 180px; height: 220px; }

.vault-item:hover {
  transform: translateY(-3px);
  box-shadow: inset 0 0 0 1px var(--glass-border), 0 12px 32px rgba(0,0,0,0.4);
}

/* -- gold coins layer -- */
.vault-coins {
  position: absolute;
  inset: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 2rem;
  z-index: 1;
  background: radial-gradient(ellipse at 50% 60%,
    rgba(255, 215, 0, 0.12) 0%,
    transparent 70%
  );
}
.vault-sm .vault-coins { font-size: 1.6rem; }
.vault-lg .vault-coins { font-size: 2.4rem; }
.coin {
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
  animation: coin-float 3s ease-in-out infinite;
}
.coin-1 { animation-delay: 0s; }
.coin-2 { animation-delay: 0.5s; }
.coin-3 { animation-delay: 1s; }
.coin-4 { animation-delay: 1.5s; }
@keyframes coin-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

/* unlocked: coins glow warm */
.vault-unlocked .vault-coins {
  background: radial-gradient(ellipse at 50% 60%,
    rgba(255, 215, 0, 0.25) 0%,
    rgba(255, 165, 0, 0.08) 60%,
    transparent 80%
  );
}

/* -- ice overlay -- */
.vault-ice {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 16px;
  transition: opacity 0.5s;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* ice crystal container */
.ice-crystal-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* SVG ice crystal */
.ice-svg {
  width: 80%;
  height: 80%;
  filter: drop-shadow(0 0 8px rgba(160,210,240,0.85))
          drop-shadow(0 0 20px rgba(100,170,220,0.5));
  animation: ice-crystal-breathe 4s ease-in-out infinite;
}
@keyframes ice-crystal-breathe {
  0%, 100% { transform: scale(1);    opacity: 0.9; }
  50%       { transform: scale(1.06); opacity: 1; }
}

/* shimmer sweep across the crystal face */
.ice-shimmer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  border-radius: inherit;
}
.ice-shimmer::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -100%;
  width: 55%;
  height: 200%;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.45) 50%, transparent 70%);
  animation: ice-shimmer-travel 3.5s ease-in-out infinite;
}
@keyframes ice-shimmer-travel {
  0%   { transform: translateX(0)    skewX(-10deg); }
  100% { transform: translateX(360%) skewX(-10deg); }
}

/* melt drips */
.ice-drip {
  position: absolute;
  bottom: 0;
  width: 7px;
  height: 10px;
  background: radial-gradient(ellipse at 50% 30%, rgba(180,225,250,0.85) 0%, rgba(130,190,230,0.4) 100%);
  border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
  animation: drip-grow 2.5s ease-in-out infinite;
}
.ice-drip-1 {
  left: 32%;
  animation-delay: 0s;
  animation-duration: calc(1.5s + (1 - var(--melt, 0)) * 2s);
}
.ice-drip-2 {
  left: 56%;
  animation-delay: 1.2s;
  animation-duration: calc(1.5s + (1 - var(--melt, 0)) * 2s);
}
@keyframes drip-grow {
  0%   { transform: scaleY(0.5); opacity: 0.5; }
  55%  { transform: scaleY(1.5); opacity: 0.9; }
  80%  { transform: scaleY(1.5) translateY(10px); opacity: 0.5; }
  100% { transform: scaleY(0.5) translateY(18px); opacity: 0; }
}

/* fracture SVG overlay */
.ice-fractures {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* -- golden glow for unlocked -- */
.vault-glow {
  position: absolute;
  inset: -8px;
  z-index: 2;
  border-radius: 20px;
  background: radial-gradient(ellipse at center,
    rgba(255, 215, 0, 0.2) 0%,
    transparent 70%
  );
  animation: vault-pulse 2.5s ease-in-out infinite;
}
@keyframes vault-pulse {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}

/* unlocked warm border */
.vault-unlocked {
  box-shadow:
    inset 0 0 0 1px rgba(255, 215, 0, 0.3),
    0 0 20px rgba(255, 215, 0, 0.15),
    0 8px 24px rgba(0,0,0,0.3);
}

/* -- info overlay -- */
.vault-info {
  position: absolute;
  bottom: 36px;
  left: 0;
  right: 0;
  z-index: 3;
  padding: 0 8px;
}
.vault-amount {
  font-weight: 700;
  font-size: 1.1rem;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
.vault-md .vault-amount { font-size: 1.25rem; }
.vault-lg .vault-amount { font-size: 1.4rem; }
.vault-date {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.7);
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

/* -- melt progress bar -- */
.vault-progress {
  position: absolute;
  bottom: 24px;
  left: 12px;
  right: 12px;
  height: 5px;
  background: rgba(0,0,0,0.3);
  border-radius: 3px;
  z-index: 3;
  overflow: hidden;
}
.vault-progress-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #4fc3f7, #06d6a0, #ffd700);
  transition: width 0.5s ease;
}

/* -- timer badge -- */
.vault-timer {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  font-size: 0.68rem;
  font-weight: 600;
  color: #b8d4f0;
  background: rgba(0,0,0,0.5);
  padding: 1px 8px;
  border-radius: 6px;
  white-space: nowrap;
}

/* -- withdraw button (unlocked) -- */
.vault-withdraw-btn {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  padding: 6px 18px;
  font-size: 0.8rem;
  font-weight: 700;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  background: linear-gradient(135deg, var(--gold), #ff8c00);
  color: #111;
  transition: transform 0.15s, box-shadow 0.15s;
  white-space: nowrap;
}
.vault-withdraw-btn:hover {
  transform: translateX(-50%) scale(1.08);
  box-shadow: 0 0 16px rgba(255, 215, 0, 0.5);
}

/* -- goal display -- */
.bank-goal-display {
  margin-top: 8px;
}
.bank-goal-name {
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 6px;
}
.bank-goal-progress {
  font-size: 0.8rem;
  color: var(--text-dim);
  margin-top: 4px;
}
.bank-goal-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.bank-set-goal-btn {
  display: block;
  width: 100%;
  text-align: center;
  margin-bottom: 16px;
}

/* -- stats -- */
.bank-stats .section-title {
  margin-bottom: 8px;
}
.bank-stat-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid var(--glass-border);
}
.bank-stat-row:last-child { border-bottom: none; }
.bank-stat-label { color: var(--text-dim); font-size: 0.85rem; }
.bank-stat-value { font-weight: 600; color: var(--text); }

/* -- transaction ledger -- */
.bank-ledger {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ledger-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 8px;
  border-radius: var(--radius-sm);
  transition: background 0.15s;
}
.ledger-row:hover {
  background: var(--bg-card-hi);
}
.ledger-icon {
  font-size: 1.2rem;
  width: 28px;
  text-align: center;
  flex-shrink: 0;
}
.ledger-details {
  flex: 1;
  min-width: 0;
}
.ledger-desc {
  font-size: 0.85rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ledger-date {
  font-size: 0.72rem;
  color: var(--text-muted);
}
.ledger-amount {
  font-weight: 700;
  font-size: 0.9rem;
  white-space: nowrap;
}
.ledger-credit { color: var(--lime); }
.ledger-debit  { color: var(--danger); }

/* -- pagination -- */
.bank-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}
.bank-page-info {
  font-size: 0.8rem;
  color: var(--text-dim);
}

/* -- modal -- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}
.modal-card {
  background: var(--bg-surface);
  border-radius: var(--radius);
  padding: 28px;
  max-width: 400px;
  width: 100%;
  box-shadow: inset 0 0 0 1px var(--glass-border), 0 24px 64px rgba(0,0,0,0.5);
  text-align: center;
}
.modal-card h2 {
  margin-bottom: 8px;
  font-size: 1.2rem;
}
.modal-amount {
  font-size: 2rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--accent), var(--lime));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 12px 0;
}
.modal-breakdown {
  font-size: 0.85rem;
  color: var(--text-dim);
  margin-bottom: 12px;
}
.modal-note {
  font-size: 0.82rem;
  color: var(--text-dim);
  margin-bottom: 18px;
}
.modal-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

/* -- flash message -- */
.bank-flash {
  position: fixed;
  bottom: calc(var(--nav-h) + 16px);
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 24px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  z-index: 1001;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.bank-flash.success {
  background: rgba(6, 214, 160, 0.15);
  color: var(--lime);
  box-shadow: inset 0 0 0 1px rgba(6, 214, 160, 0.3), 0 8px 24px rgba(0,0,0,0.3);
}
.bank-flash.error {
  background: rgba(255, 77, 109, 0.15);
  color: var(--danger);
  box-shadow: inset 0 0 0 1px rgba(255, 77, 109, 0.3), 0 8px 24px rgba(0,0,0,0.3);
}

/* -- small ghost button -- */
.btn-sm {
  padding: 4px 12px;
  font-size: 0.78rem;
}


/* ============================================================
   Missions
   ============================================================ */

.missions-container { padding: 16px; max-width: 900px; margin: 0 auto; }
.missions-hub .page-title { text-align: center; margin-bottom: 24px; }

/* -- mission cards -- */
.missions-section { margin-bottom: 32px; }
.missions-section .section-title { font-size: 1.1rem; margin-bottom: 12px; color: var(--text-muted); }
.mission-cards { display: flex; flex-direction: column; gap: 12px; }
.mission-card {
  background: var(--bg-card);
  border-radius: 12px;
  padding: 16px 20px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06), 0 4px 16px rgba(0,0,0,0.3);
}
.mission-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.mission-title { font-weight: 600; font-size: 1.05rem; }
.mission-desc { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 12px; }

/* state badges */
.state-badge {
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 3px 10px; border-radius: 20px;
}
.badge-assigned  { background: var(--accent); color: #000; }
.badge-training  { background: #fbbf24; color: #000; }
.badge-testing   { background: #60a5fa; color: #000; }
.badge-failed    { background: #f87171; color: #000; }
.badge-pending_approval { background: #c084fc; color: #000; }
.badge-completed { background: #34d399; color: #000; }

/* level progress bar */
.level-progress { margin-bottom: 12px; }
.level-bar {
  height: 8px; border-radius: 4px; background: rgba(255,255,255,0.08); overflow: hidden;
}
.level-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 4px; transition: width 0.5s; }
.level-label { font-size: 0.75rem; color: var(--text-muted); margin-top: 4px; display: block; }

/* mission actions */
.mission-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.action-group { display: flex; gap: 8px; }
.pending-text { font-style: italic; color: #c084fc; font-size: 0.85rem; }

/* empty state */
.missions-hub .empty-state { text-align: center; padding: 60px 20px; }
.empty-state .empty-icon { font-size: 3rem; margin-bottom: 12px; }

/* -- training view -- */
.training-view, .test-view, .piano-view { padding: 0 8px; }
.training-header, .test-header, .piano-header {
  display: flex; align-items: center; gap: 12px; margin-bottom: 24px;
}
.btn-back { background: none; color: var(--text-muted); font-size: 1.1rem; padding: 4px 8px; cursor: pointer; }

.training-question-area, .test-question-area { text-align: center; }
.question-counter, .test-progress { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 16px; }
.test-progress { display: flex; justify-content: space-between; }
.correct-count { color: #34d399; font-weight: 600; }

.question-display {
  background: var(--bg-surface);
  border-radius: 16px;
  padding: 32px;
  margin-bottom: 20px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}
.question-text { font-size: 2.2rem; font-weight: 700; letter-spacing: 0.05em; }

/* feedback */
.feedback-area {
  padding: 10px 16px;
  border-radius: 8px;
  margin-bottom: 16px;
  font-weight: 600;
  font-size: 0.9rem;
}
.feedback-correct { background: rgba(52,211,153,0.15); color: #34d399; }
.feedback-retry   { background: rgba(251,191,36,0.15); color: #fbbf24; }
.feedback-hint    { background: rgba(96,165,250,0.15); color: #60a5fa; }

/* -- numpad -- */
.numpad-input { max-width: 280px; margin: 0 auto; }
.numpad-display {
  font-size: 2rem; font-weight: 700; text-align: center;
  padding: 12px; margin-bottom: 12px;
  background: var(--bg-surface);
  border-radius: 10px;
  min-height: 52px; line-height: 52px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
  color: var(--text);
}
.numpad-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.numpad-btn {
  font-size: 1.4rem; font-weight: 600;
  padding: 16px 0;
  border: none; border-radius: 10px;
  background: var(--bg-card);
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  min-height: 60px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}
.numpad-btn:active { transform: scale(0.95); }
.numpad-btn:hover  { background: var(--bg-card-hi); }
.numpad-clear  { color: #f87171; }
.numpad-submit { background: var(--accent); color: #000; font-weight: 700; }
.numpad-submit:hover { filter: brightness(1.15); }

/* -- test timer -- */
.test-timer {
  font-size: 1.3rem; font-weight: 700; font-variant-numeric: tabular-nums;
  margin-left: auto; padding: 4px 14px;
  background: var(--bg-surface); border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}
.timer-warning { color: #f87171; animation: timer-pulse 0.5s infinite alternate; }
@keyframes timer-pulse { to { opacity: 0.6; } }

/* -- training/test results -- */
.training-results, .test-results { text-align: center; padding: 40px 20px; }
.result-score { margin: 20px 0; }
.score-number { font-size: 3rem; font-weight: 800; color: var(--accent); }
.score-label  { font-size: 1.1rem; color: var(--text-muted); }
.result-stats { display: flex; justify-content: center; gap: 40px; margin: 20px 0; }
.stat-item { display: flex; flex-direction: column; align-items: center; }
.stat-value { font-size: 1.8rem; font-weight: 700; }
.stat-label { font-size: 0.75rem; color: var(--text-muted); }
.motivational-message { font-style: italic; color: #fbbf24; margin: 16px 0; }
.result-actions { display: flex; gap: 12px; justify-content: center; margin-top: 24px; }

.test-passed h2 { color: #34d399; }
.test-failed h2 { color: #f87171; }
.score-display { font-size: 1.3rem; font-weight: 600; margin: 12px 0; }

/* -- piano view -- */
.piano-content { text-align: center; padding: 40px 20px; }
.piece-name { font-size: 1.6rem; font-weight: 700; margin-bottom: 12px; color: #fbbf24; }
.piece-desc { color: var(--text-muted); margin-bottom: 32px; }
.btn-large { font-size: 1.2rem; padding: 16px 40px; }
.pending-status { margin-top: 20px; }
.pending-icon { font-size: 2rem; display: block; margin-bottom: 8px; }

/* -- celebration overlay -- */
.celebration-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.85);
  display: flex; align-items: center; justify-content: center;
}
.celebration-content {
  text-align: center; padding: 40px;
}
.celebration-title {
  font-size: 2.2rem; font-weight: 800;
  background: linear-gradient(135deg, #fbbf24, #f59e0b, #fbbf24);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 20px 0 12px;
}
.celebration-reward {
  font-size: 1.3rem; color: #34d399; font-weight: 600; margin-bottom: 24px;
}
.mission-icon-display { font-size: 5rem; display: block; }

/* lightning brain icon */
.icon-lightning_brain .mission-icon-display {
  animation: lightning-pulse 1.5s ease-in-out infinite;
  filter: drop-shadow(0 0 20px rgba(251,191,36,0.6));
}
@keyframes lightning-pulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 20px rgba(251,191,36,0.4)); }
  50% { transform: scale(1.08); filter: drop-shadow(0 0 40px rgba(251,191,36,0.8)); }
}

/* golden music note icon */
.icon-golden_music_note .mission-icon-display {
  animation: note-glow 2s ease-in-out infinite;
  filter: drop-shadow(0 0 20px rgba(251,191,36,0.5));
}
@keyframes note-glow {
  0%, 100% { transform: scale(1) rotate(-5deg); filter: drop-shadow(0 0 15px rgba(251,191,36,0.4)); }
  50% { transform: scale(1.05) rotate(5deg); filter: drop-shadow(0 0 35px rgba(251,191,36,0.7)); }
}

/* -- admin missions -- */
.admin-missions-container { padding: 16px; max-width: 800px; margin: 0 auto; }
.admin-missions-section { margin-bottom: 32px; }
.assign-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.form-select {
  padding: 8px 12px; border-radius: 8px; border: none;
  background: var(--bg-surface); color: var(--text);
  font-size: 0.9rem; min-width: 160px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}
.assign-message { font-size: 0.85rem; margin-top: 8px; }
.assign-message.success { color: #34d399; }
.assign-message.error { color: #f87171; }

/* Mission catalog reward editor */
.mission-catalog-list { display: flex; flex-direction: column; gap: 12px; }
.mission-catalog-card {
  background: var(--bg-card); border-radius: 12px; padding: 14px 16px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}
.mission-catalog-header {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.mission-catalog-title { flex: 1; display: flex; align-items: center; gap: 8px; }
.mission-type-badge {
  font-size: 0.7rem; padding: 2px 8px; border-radius: 20px;
  background: rgba(255,255,255,0.08); color: var(--text-muted); text-transform: capitalize;
}
.mission-catalog-summary { display: flex; gap: 6px; align-items: center; }
.mission-reward-edit-form {
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex; flex-direction: column; gap: 10px;
}
.reward-edit-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.reward-edit-label { font-size: 0.82rem; color: var(--text-muted); min-width: 140px; }
.reward-xp-input { max-width: 120px; }
.reward-edit-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.required-star { color: #f87171; }

/* Modal title/body helpers */
.modal-title { font-size: 1.15rem; font-weight: 700; margin-bottom: 10px; }
.modal-body { font-size: 0.9rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 18px; }

.approval-card {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--bg-card); border-radius: 10px; padding: 12px 16px;
  margin-bottom: 8px;
  box-shadow: inset 0 0 0 1px rgba(192,132,252,0.2);
}
.approval-actions { display: flex; gap: 8px; }

.assignment-row {
  display: flex; gap: 12px; align-items: center;
  padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 0.85rem;
}
.assignment-user { font-weight: 600; min-width: 100px; }
.assignment-mission { color: var(--text-muted); flex: 1; }
.assignment-level { font-weight: 600; color: var(--accent); }

/* -- mission reward pills -- */
.reward-cash-pill {
  display: inline-block;
  font-size: 0.75rem; font-weight: 700;
  padding: 2px 8px; border-radius: 20px;
  background: rgba(52,211,153,0.15); color: #34d399;
  border: 1px solid rgba(52,211,153,0.3);
}
.reward-xp-pill {
  display: inline-block;
  font-size: 0.75rem; font-weight: 700;
  padding: 2px 8px; border-radius: 20px;
  background: rgba(96,165,250,0.15); color: #60a5fa;
  border: 1px solid rgba(96,165,250,0.3);
}
.reward-gem-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.75rem; font-weight: 700;
  padding: 2px 8px; border-radius: 20px;
  background: rgba(168,85,247,0.15); color: #c084fc;
  border: 1px solid rgba(168,85,247,0.3);
}

/* -- lifestyle admin -- */
.lifestyle-new-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.lifestyle-privilege-list { display: flex; flex-direction: column; gap: 8px; }
.lifestyle-privilege-row {
  background: var(--bg-card); border-radius: 10px; padding: 12px 14px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}
.lifestyle-privilege-row.inactive { opacity: 0.5; }
.lifestyle-privilege-info { flex: 1; min-width: 160px; }
.lifestyle-privilege-name { font-weight: 600; display: block; }
.lifestyle-privilege-desc { font-size: 0.8rem; color: var(--text-muted); }
.lifestyle-privilege-cost { }
.point-badge {
  font-size: 0.78rem; padding: 3px 9px; border-radius: 20px;
  background: rgba(139,92,246,0.15); color: #a78bfa; font-weight: 600;
}
.lifestyle-privilege-actions { display: flex; gap: 6px; }
.lifestyle-inline-edit {
  width: 100%; display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.05);
}

/* -- mission notification modal -- */
.mission-notification-overlay {
  position: fixed; inset: 0; z-index: 9998;
  background: rgba(0,0,0,0.7);
  display: flex; align-items: center; justify-content: center;
}
.mission-notification-modal {
  background: var(--bg-surface);
  border-radius: 16px;
  padding: 32px 40px;
  text-align: center;
  max-width: 400px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), inset 0 0 0 1px rgba(255,255,255,0.08);
}
.notification-trophy { font-size: 3rem; margin-bottom: 12px; display: block; }
.notification-title { font-size: 1.2rem; font-weight: 700; margin-bottom: 8px; }
.notification-mission-name { color: var(--accent); font-weight: 600; margin-bottom: 16px; display: block; }
.notification-actions { display: flex; gap: 12px; justify-content: center; }

/* ═══════════════════════════════════════════════════════════════════════
   Achievement Notifications — 3 tiers
   ═══════════════════════════════════════════════════════════════════════ */

/* Bronze toast — bottom-right slide-in */
.achievement-toast {
  position: fixed; bottom: 90px; right: 20px; z-index: 9997;
  display: flex; align-items: center; gap: 12px;
  background: rgba(20,24,32,0.95);
  border-radius: 12px;
  padding: 14px 20px;
  max-width: 340px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(205,127,50,0.3);
  animation: toast-slide-in 0.4s ease-out;
  cursor: pointer;
}
.achievement-toast-icon { font-size: 2rem; }
.achievement-toast-title { font-weight: 700; color: #cd7f32; font-size: 0.95rem; }
.achievement-toast-desc { font-size: 0.8rem; color: rgba(255,255,255,0.7); margin-top: 2px; }
.achievement-toast-xp { font-size: 0.75rem; color: #cd7f32; font-weight: 600; margin-top: 4px; }

@keyframes toast-slide-in {
  from { transform: translateX(120%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* Silver banner — top full-width slide-down */
.achievement-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9997;
  display: flex; align-items: center; gap: 16px;
  background: rgba(20,24,32,0.97);
  padding: 16px 24px;
  box-shadow: 0 4px 32px rgba(0,0,0,0.6), inset 0 -2px 0 0 #c0c0c0;
  animation: banner-slide-down 0.5s ease-out;
  cursor: pointer;
}
.achievement-banner-icon { font-size: 2.5rem; }
.achievement-banner-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 2px; color: #c0c0c0; }
.achievement-banner-title { font-weight: 700; color: #c0c0c0; font-size: 1.1rem; }
.achievement-banner-desc { font-size: 0.85rem; color: rgba(255,255,255,0.7); margin-top: 2px; }
.achievement-banner-xp { font-size: 0.8rem; color: #c0c0c0; font-weight: 600; margin-top: 4px; }

@keyframes banner-slide-down {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}

/* Gold fullscreen — dark overlay + centered card */
.achievement-fullscreen {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.85);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  animation: fullscreen-fade-in 0.3s ease-out;
}
.achievement-fullscreen-card {
  text-align: center;
  position: relative;
  padding: 40px 48px;
  border-radius: 20px;
  background: rgba(20,24,32,0.95);
  box-shadow: 0 0 60px rgba(255,215,0,0.3), 0 0 120px rgba(255,215,0,0.1),
              inset 0 0 0 2px rgba(255,215,0,0.4);
  max-width: 400px;
}
.achievement-fullscreen-particles {
  position: absolute; inset: -20px; border-radius: 28px;
  background: radial-gradient(circle at 50% 50%, rgba(255,215,0,0.08) 0%, transparent 70%);
  animation: gold-pulse 2s ease-in-out infinite;
}
.achievement-fullscreen-label {
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 3px;
  color: #ffd700; margin-bottom: 16px;
}
.achievement-fullscreen-icon { font-size: 4rem; margin-bottom: 16px; }
.achievement-fullscreen-title { font-size: 1.5rem; font-weight: 700; color: #ffd700; margin-bottom: 8px; }
.achievement-fullscreen-desc { font-size: 1rem; color: rgba(255,255,255,0.8); margin-bottom: 12px; }
.achievement-fullscreen-xp { font-size: 1.1rem; color: #ffd700; font-weight: 600; }
.achievement-fullscreen-hint { font-size: 0.7rem; color: rgba(255,255,255,0.4); margin-top: 20px; }

@keyframes fullscreen-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes gold-pulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}

/* Level-up overlay */
.levelup-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,0.85);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  animation: fullscreen-fade-in 0.3s ease-out;
}
.levelup-card {
  text-align: center;
  padding: 48px 56px;
  border-radius: 20px;
  background: rgba(20,24,32,0.95);
  box-shadow: 0 0 80px rgba(var(--accent-rgb, 0,212,255),0.4),
              inset 0 0 0 2px rgba(var(--accent-rgb, 0,212,255),0.5);
}
.levelup-label {
  font-size: 1rem; text-transform: uppercase; letter-spacing: 4px;
  color: var(--accent); margin-bottom: 12px;
  animation: levelup-pulse 0.8s ease-in-out infinite;
}
.levelup-level { font-size: 3rem; font-weight: 700; color: #fff; }
.levelup-name { font-size: 1.3rem; color: var(--accent); margin-top: 8px; font-weight: 600; }
.levelup-hint { font-size: 0.7rem; color: rgba(255,255,255,0.4); margin-top: 24px; }

@keyframes levelup-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* Fire Mode activation overlay */
.fire-mode-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,0.85);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  animation: fullscreen-fade-in 0.3s ease-out;
}
.fire-mode-card {
  text-align: center;
  padding: 48px 56px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(40,10,0,0.95), rgba(60,15,0,0.95));
  box-shadow: 0 0 80px rgba(255,100,0,0.5), 0 0 160px rgba(255,50,0,0.2),
              inset 0 0 0 2px rgba(255,100,0,0.5);
  animation: fire-card-pulse 1.5s ease-in-out infinite;
}
.fire-mode-flames { font-size: 3rem; margin-bottom: 16px; animation: fire-bob 0.6s ease-in-out infinite alternate; }
.fire-mode-label {
  font-size: 1.3rem; font-weight: 700; text-transform: uppercase; letter-spacing: 3px;
  background: linear-gradient(90deg, #ff6600, #ff3300, #ff6600);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.fire-mode-desc { font-size: 1.1rem; color: #ff9944; margin-top: 12px; font-weight: 600; }
.fire-mode-streak { font-size: 0.9rem; color: rgba(255,153,68,0.8); margin-top: 8px; }
.fire-mode-hint { font-size: 0.7rem; color: rgba(255,255,255,0.3); margin-top: 24px; }

@keyframes fire-card-pulse {
  0%, 100% { box-shadow: 0 0 80px rgba(255,100,0,0.5), inset 0 0 0 2px rgba(255,100,0,0.5); }
  50% { box-shadow: 0 0 120px rgba(255,100,0,0.7), inset 0 0 0 2px rgba(255,100,0,0.7); }
}
@keyframes fire-bob {
  from { transform: translateY(0); }
  to { transform: translateY(-8px); }
}

/* ═══════════════════════════════════════════════════════════════════════
   Profile Page
   ═══════════════════════════════════════════════════════════════════════ */

.profile-header {
  display: flex; align-items: center; gap: 20px;
  padding: 24px 20px; margin-bottom: 8px;
}
.profile-avatar {
  font-size: 3.5rem; width: 80px; height: 80px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.05);
  box-shadow: inset 0 0 0 2px rgba(var(--accent-rgb, 0,212,255),0.3);
}
.profile-info { flex: 1; min-width: 0; }
.profile-username { font-size: 1.4rem; font-weight: 700; margin-bottom: 4px; }
.profile-level-badge { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.profile-level {
  font-size: 0.8rem; font-weight: 700; padding: 2px 8px;
  border-radius: 6px; background: rgba(var(--accent-rgb, 0,212,255),0.2);
  color: var(--accent);
}
.profile-level-name { font-size: 0.85rem; color: rgba(255,255,255,0.6); }

/* XP progress bar */
.xp-bar {
  height: 8px; border-radius: 4px;
  background: rgba(255,255,255,0.08);
  overflow: hidden; margin-bottom: 4px;
}
.xp-bar-fill {
  height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2, #8338ec));
  transition: width 0.6s ease;
}
.xp-bar-label { font-size: 0.7rem; color: rgba(255,255,255,0.45); }

/* Stats row */
.profile-stats-row {
  display: flex; gap: 12px; padding: 0 20px; margin-bottom: 16px;
}
.profile-stat {
  flex: 1; text-align: center;
  background: rgba(255,255,255,0.04);
  border-radius: 12px; padding: 12px 8px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}
.profile-stat-value { font-size: 1.3rem; font-weight: 700; color: var(--accent); }
.profile-stat-label { font-size: 0.7rem; color: rgba(255,255,255,0.5); margin-top: 2px; }
.fire-badge {
  font-size: 0.7rem; font-weight: 700;
  background: linear-gradient(90deg, #ff6600, #ff3300);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-left: 4px;
}

/* Profile sections */
.profile-section { padding: 0 20px; margin-bottom: 20px; }

/* Achievement grid & cards */
.achievement-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px; margin-top: 10px;
}
.achievement-card {
  text-align: center; padding: 14px 8px;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
  transition: transform 0.2s;
}
.achievement-card:hover { transform: translateY(-2px); }
.achievement-locked { opacity: 0.45; }
.achievement-card-icon { font-size: 1.8rem; margin-bottom: 6px; }
.achievement-icon-locked { filter: grayscale(1); }
.achievement-card-name { font-size: 0.8rem; font-weight: 600; margin-bottom: 4px; }
.achievement-card-xp { font-size: 0.7rem; color: var(--accent); font-weight: 600; }
.achievement-card-req { font-size: 0.65rem; color: rgba(255,255,255,0.4); }

/* Tier accent borders */
.achievement-bronze.achievement-unlocked { box-shadow: inset 0 0 0 1px rgba(205,127,50,0.4); }
.achievement-silver.achievement-unlocked { box-shadow: inset 0 0 0 1px rgba(192,192,192,0.4); }
.achievement-gold.achievement-unlocked { box-shadow: inset 0 0 0 1px rgba(255,215,0,0.4); }

.achievement-category { margin-bottom: 16px; }
.achievement-category-title {
  font-size: 0.85rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 1px; color: rgba(255,255,255,0.5); margin-bottom: 4px;
}

/* Icon grid */
.icon-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
  gap: 8px; margin-top: 10px;
}
.icon-btn {
  position: relative; width: 56px; height: 56px;
  font-size: 1.6rem; border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: none; cursor: pointer; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
  transition: all 0.2s;
}
.icon-btn:hover:not(:disabled) {
  background: rgba(255,255,255,0.08);
  transform: translateY(-2px);
}
.icon-selected {
  box-shadow: inset 0 0 0 2px var(--accent) !important;
  background: rgba(var(--accent-rgb, 0,212,255),0.15);
}
.icon-locked {
  opacity: 0.35; cursor: not-allowed;
}
.icon-lock {
  position: absolute; bottom: 2px; right: 2px;
  font-size: 0.55rem; font-weight: 700;
  background: rgba(0,0,0,0.7); padding: 1px 4px;
  border-radius: 4px; color: rgba(255,255,255,0.7);
}

/* ═══════════════════════════════════════════════════════════════════════
   Icon Level CSS Classes (L1-L10 + mission icons)
   ═══════════════════════════════════════════════════════════════════════ */

/* L1 — no decoration */
/* (no class applied) */

/* L2 — Apprentice: faint accent glow */
.icon-l2 {
  box-shadow: 0 0 8px rgba(var(--accent-rgb, 0,212,255), 0.25) !important;
}

/* L3 — Helper: visible accent outline + 16px glow */
.icon-l3 {
  outline: 2px solid rgba(var(--accent-rgb, 0,212,255), 0.6);
  outline-offset: 2px;
  box-shadow: 0 0 16px rgba(var(--accent-rgb, 0,212,255), 0.4) !important;
}

/* L4 — Star: spinning conic-gradient border */
.icon-l4 {
  position: relative;
  z-index: 0;
}
.icon-l4::before {
  content: '';
  position: absolute;
  inset: -3px;
  background: conic-gradient(from 0deg, #ffd700, #ff6600, #8338ec, #00d4ff, #ffd700);
  border-radius: inherit;
  z-index: -1;
  animation: icon-spin-border 3s linear infinite;
}
@keyframes icon-spin-border {
  to { transform: rotate(360deg); }
}

/* L5 — Champion: pulsing dual-layer glow + slower spinning ring */
.icon-l5 {
  position: relative;
  z-index: 0;
  animation: icon-l5-pulse 2s ease-in-out infinite;
}
.icon-l5::before {
  content: '';
  position: absolute;
  inset: -3px;
  background: conic-gradient(from 0deg, #ff006e, #8338ec, #00d4ff, #ff006e);
  border-radius: inherit;
  z-index: -1;
  animation: icon-spin-border 5s linear infinite;
}
@keyframes icon-l5-pulse {
  0%, 100% { box-shadow: 0 0 12px rgba(255,0,110,0.4), 0 0 24px rgba(131,56,236,0.3) !important; }
  50%       { box-shadow: 0 0 22px rgba(255,0,110,0.7), 0 0 44px rgba(131,56,236,0.5) !important; }
}

/* L6 — Hero: L5 glow + shimmer sweep */
.icon-l6 {
  position: relative;
  z-index: 0;
  overflow: hidden;
  animation: icon-l5-pulse 2s ease-in-out infinite;
}
.icon-l6::before {
  content: '';
  position: absolute;
  inset: -3px;
  background: conic-gradient(from 0deg, #ff006e, #8338ec, #00d4ff, #ff006e);
  border-radius: inherit;
  z-index: -1;
  animation: icon-spin-border 5s linear infinite;
}
.icon-l6::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -100%;
  width: 50%;
  height: 200%;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.4) 50%, transparent 70%);
  animation: icon-shimmer 2.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes icon-shimmer {
  0%   { transform: translateX(0)    skewX(-10deg); }
  100% { transform: translateX(400%) skewX(-10deg); }
}

/* L7 — Legend: spinning ring + 3 orbiting dots (dots injected by gamification.js) */
.icon-l7 {
  position: relative;
  z-index: 0;
  animation: icon-l5-pulse 1.8s ease-in-out infinite;
}
.icon-l7::before {
  content: '';
  position: absolute;
  inset: -4px;
  background: conic-gradient(from 0deg, #ffd700, #ff006e, #8338ec, #00d4ff, #ffd700);
  border-radius: inherit;
  z-index: -1;
  animation: icon-spin-border 3.5s linear infinite;
}
/* Orbiting dot — injected by JS, positioned in parent container */
.icon-orbit-dot {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent);
  pointer-events: none;
  z-index: 2;
  transform-origin: center;
}

/* L8 — Master: intense gold + accent pulsing glow */
.icon-l8 {
  position: relative;
  z-index: 0;
  animation: icon-l8-pulse 1.5s ease-in-out infinite;
}
@keyframes icon-l8-pulse {
  0%, 100% { box-shadow: 0 0 16px rgba(255,215,0,0.5), 0 0 32px rgba(var(--accent-rgb,0,212,255),0.4) !important; }
  50%       { box-shadow: 0 0 28px rgba(255,215,0,0.85), 0 0 56px rgba(var(--accent-rgb,0,212,255),0.65) !important; }
}

/* L9 — Titan: stronger multi-color triple glow */
.icon-l9 {
  position: relative;
  z-index: 0;
  animation: icon-l9-pulse 1.5s ease-in-out infinite;
}
@keyframes icon-l9-pulse {
  0%, 100% { box-shadow: 0 0 20px rgba(255,215,0,0.6), 0 0 40px rgba(var(--accent-rgb,0,212,255),0.5), 0 0 60px rgba(131,56,236,0.3) !important; }
  50%       { box-shadow: 0 0 32px rgba(255,215,0,0.9), 0 0 64px rgba(var(--accent-rgb,0,212,255),0.7), 0 0 96px rgba(131,56,236,0.5) !important; }
}

/* L10 — Ultimate: rainbow conic border + max glow */
.icon-l10 {
  position: relative;
  z-index: 0;
  animation: icon-l10-pulse 1.2s ease-in-out infinite;
}
.icon-l10::before {
  content: '';
  position: absolute;
  inset: -4px;
  background: conic-gradient(from 0deg, #ffd700, #ff006e, #ff4500, #39ff14, #00d4ff, #8338ec, #ffd700);
  border-radius: inherit;
  z-index: -1;
  animation: rainbow-hue 3s linear infinite;
}
@keyframes rainbow-hue {
  to { filter: hue-rotate(360deg); }
}
@keyframes icon-l10-pulse {
  0%, 100% { box-shadow: 0 0 24px rgba(255,215,0,0.7), 0 0 48px rgba(255,0,110,0.5), 0 0 72px rgba(0,212,255,0.3) !important; transform: scale(1); }
  50%       { box-shadow: 0 0 36px rgba(255,215,0,1.0), 0 0 72px rgba(255,0,110,0.7), 0 0 108px rgba(0,212,255,0.5) !important; transform: scale(1.05); }
}

/* Mission-earned icon styles (preserved) */
.icon-mission-lightning {
  background: linear-gradient(135deg, #ffd700, #ff6600) !important;
  outline: 2px solid rgba(255,255,255,0.7);
  outline-offset: 3px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4), 0 0 18px rgba(255,215,0,0.6), 0 0 36px rgba(255,100,0,0.3) !important;
}
.icon-mission-music {
  background: linear-gradient(135deg, #ffd700, #c0c0c0) !important;
  outline: 2px solid rgba(255,255,255,0.7);
  outline-offset: 3px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4), 0 0 18px rgba(255,215,0,0.6), 0 0 36px rgba(192,192,192,0.3) !important;
}

/* Icon particle host wrapper */
.icon-particle-host {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
}

/* ── Emoji + Lottie aura pattern ──────────────────────────────────────── *
 * The emoji sits ON TOP (z-index 2) so it is always clearly readable.    *
 * The Lottie animation plays BEHIND it (z-index 0) as an animated glow   *
 * / aura effect. Result: recognisable emoji + a living animated halo.    */
.avatar-emoji-base {
  position: relative;
  z-index: 2;
  pointer-events: none;
}
.user-card-avatar lottie-player,
.profile-avatar lottie-player {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
}
.icon-btn lottie-player {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* Theme swatch grid */
.theme-swatch-grid {
  display: flex; gap: 12px; flex-wrap: wrap; margin-top: 10px;
}
.theme-swatch {
  position: relative; width: 56px; text-align: center;
  background: none; border: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.swatch-fill {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--swatch-color);
  box-shadow: 0 0 12px color-mix(in srgb, var(--swatch-color) 40%, transparent);
  transition: all 0.2s;
}
.theme-swatch:hover:not(:disabled) .swatch-fill {
  transform: scale(1.15);
  box-shadow: 0 0 20px color-mix(in srgb, var(--swatch-color) 60%, transparent);
}
.swatch-selected .swatch-fill {
  box-shadow: 0 0 0 3px var(--bg-surface), 0 0 0 5px var(--swatch-color),
              0 0 20px color-mix(in srgb, var(--swatch-color) 50%, transparent);
}
.swatch-locked { opacity: 0.3; cursor: not-allowed; }
.swatch-lock {
  font-size: 0.6rem; font-weight: 700;
  color: rgba(255,255,255,0.6);
}
.swatch-name {
  font-size: 0.6rem; color: rgba(255,255,255,0.5);
  text-transform: capitalize;
}

/* ═══════════════════════════════════════════════════════════════════════
   Level Visual Effects — Progressive CSS on login cards & app-wide
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Login cards by level ────────────────────────────────────────────── */
/* L1-3: no card effect */

/* L4: Barely-there faint pulsing glow (4s) */
.user-card[data-level="4"] {
  animation: card-glow-4 4s ease-in-out infinite;
}
@keyframes card-glow-4 {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08), 0 8px 32px rgba(0,0,0,0.25), 0 0 10px rgba(var(--accent-rgb, 0,212,255),0.15); }
  50%       { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1),  0 8px 32px rgba(0,0,0,0.25), 0 0 22px rgba(var(--accent-rgb, 0,212,255),0.28); }
}

/* L5: Clearly visible dual-color glow (3s) */
.user-card[data-level="5"] {
  animation: card-glow-5 3s ease-in-out infinite;
}
@keyframes card-glow-5 {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1), 0 8px 32px rgba(0,0,0,0.25), 0 0 18px rgba(var(--accent-rgb, 0,212,255),0.3), 0 0 36px rgba(131,56,236,0.15); }
  50%       { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14), 0 8px 32px rgba(0,0,0,0.25), 0 0 30px rgba(var(--accent-rgb, 0,212,255),0.5), 0 0 56px rgba(131,56,236,0.28); }
}

/* L6: L5 glow + diagonal shimmer sweep via ::after */
.user-card[data-level="6"] {
  overflow: hidden;
  animation: card-glow-5 3s ease-in-out infinite;
}
.user-card[data-level="6"]::after {
  content: '';
  position: absolute;
  top: -50%; left: -100%;
  width: 50%; height: 200%;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.08) 50%, transparent 70%);
  animation: card-shimmer 4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes card-shimmer {
  0%   { transform: translateX(0) skewX(-10deg); }
  100% { transform: translateX(500%) skewX(-10deg); }
}

/* L7: Accent outline + strong pulsing glow (2s) */
.user-card[data-level="7"] {
  outline: 1px solid rgba(var(--accent-rgb, 0,212,255), 0.55);
  outline-offset: 2px;
  animation: card-glow-7 2s ease-in-out infinite;
}
@keyframes card-glow-7 {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1), 0 8px 32px rgba(0,0,0,0.25), 0 0 24px rgba(var(--accent-rgb, 0,212,255),0.4), 0 0 48px rgba(131,56,236,0.2); }
  50%       { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14), 0 8px 32px rgba(0,0,0,0.25), 0 0 40px rgba(var(--accent-rgb, 0,212,255),0.65), 0 0 80px rgba(131,56,236,0.35); }
}

/* L8: Gold outline + intense pulsing (particles added by JS) */
.user-card[data-level="8"] {
  outline: 2px solid rgba(255,215,0,0.5);
  outline-offset: 2px;
  animation: card-glow-8 2s ease-in-out infinite;
}
@keyframes card-glow-8 {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1), 0 8px 32px rgba(0,0,0,0.25), 0 0 22px rgba(255,215,0,0.35), 0 0 44px rgba(var(--accent-rgb,0,212,255),0.25); }
  50%       { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15), 0 8px 32px rgba(0,0,0,0.25), 0 0 38px rgba(255,215,0,0.6), 0 0 76px rgba(var(--accent-rgb,0,212,255),0.45); }
}

/* L9: Outer halo spread + gold outline */
.user-card[data-level="9"] {
  outline: 2px solid rgba(255,215,0,0.6);
  outline-offset: 3px;
  animation: card-glow-9 1.8s ease-in-out infinite;
}
@keyframes card-glow-9 {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12), 0 8px 32px rgba(0,0,0,0.25), 0 0 28px rgba(255,215,0,0.45), 0 0 60px rgba(var(--accent-rgb,0,212,255),0.3), 0 0 90px rgba(131,56,236,0.15); }
  50%       { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18), 0 8px 32px rgba(0,0,0,0.25), 0 0 48px rgba(255,215,0,0.7), 0 0 100px rgba(var(--accent-rgb,0,212,255),0.5), 0 0 140px rgba(131,56,236,0.28); }
}

/* L10: Multi-color glow + scale pulse (avatar circle has the rainbow ring) */
.user-card[data-level="10"] {
  animation: card-ultimate 1.5s ease-in-out infinite;
}
@keyframes card-ultimate {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12), 0 8px 32px rgba(0,0,0,0.25), 0 0 36px rgba(255,215,0,0.5), 0 0 72px rgba(255,0,110,0.3), 0 0 108px rgba(0,212,255,0.2); transform: scale(1); }
  50%       { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18), 0 8px 32px rgba(0,0,0,0.25), 0 0 56px rgba(255,215,0,0.75), 0 0 112px rgba(255,0,110,0.5), 0 0 168px rgba(0,212,255,0.35); transform: scale(1.02); }
}

/* ── Fire Mode login card ────────────────────────────────────────────── */
.user-card[data-fire-mode="true"] {
  outline: 2px solid #ff6600;
  outline-offset: 2px;
  animation: fire-card-glow 1.5s ease-in-out infinite;
}
@keyframes fire-card-glow {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08), 0 8px 32px rgba(0,0,0,0.25), 0 0 16px rgba(255,100,0,0.4), 0 0 32px rgba(255,50,0,0.2); }
  50% { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08), 0 8px 32px rgba(0,0,0,0.25), 0 0 28px rgba(255,100,0,0.7), 0 0 56px rgba(255,50,0,0.35); }
}

/* ── App-wide level effects ──────────────────────────────────────────── */

/* L1-3: no app-wide effect */

/* L4-5: Subtle radial ambient */
body[data-level="4"]::after,
body[data-level="5"]::after {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 30% 20%, rgba(var(--accent-rgb, 0,212,255),0.03) 0%, transparent 60%),
              radial-gradient(ellipse at 70% 80%, rgba(131,56,236,0.03) 0%, transparent 60%);
  animation: ambient-breathe 12s ease-in-out infinite;
}
body[data-level="5"]::after {
  animation-duration: 10s;
}
@keyframes ambient-breathe {
  0%, 100% { opacity: 0.4; }
  50%       { opacity: 1; }
}

/* L6-7: More visible dual-accent ambient + enhanced button glow + nav glow */
body[data-level="6"]::after,
body[data-level="7"]::after {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 25% 20%, rgba(var(--accent-rgb, 0,212,255),0.05) 0%, transparent 55%),
              radial-gradient(ellipse at 75% 80%, rgba(131,56,236,0.05) 0%, transparent 55%);
  animation: ambient-breathe 8s ease-in-out infinite;
}
body[data-level="6"] .btn-primary:hover,
body[data-level="7"] .btn-primary:hover {
  box-shadow: 0 0 20px rgba(var(--accent-rgb, 0,212,255),0.4);
}
body[data-level="6"] .bottom-nav,
body[data-level="7"] .bottom-nav {
  box-shadow: 0 -2px 10px rgba(var(--accent-rgb, 0,212,255),0.12);
}

/* L8-9: Strong ambient + gold nav glow + bank card accents */
body[data-level="8"]::after,
body[data-level="9"]::after {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 25% 20%, rgba(var(--accent-rgb, 0,212,255),0.06) 0%, transparent 50%),
              radial-gradient(ellipse at 75% 80%, rgba(131,56,236,0.06) 0%, transparent 50%),
              radial-gradient(ellipse at 50% 50%, rgba(255,215,0,0.03) 0%, transparent 60%);
  animation: ambient-breathe 7s ease-in-out infinite;
}
body[data-level="8"] .bottom-nav,
body[data-level="9"] .bottom-nav {
  box-shadow: 0 -2px 14px rgba(255,215,0,0.18);
}
body[data-level="8"] .bank-card,
body[data-level="9"] .bank-card {
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb, 0,212,255),0.15), 0 4px 16px rgba(0,0,0,0.3);
}

/* L10: Rich ambient + rainbow shimmer on headings (no scan-line) */
body[data-level="10"]::after {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 20% 15%, rgba(var(--accent-rgb, 0,212,255),0.09) 0%, transparent 45%),
              radial-gradient(ellipse at 80% 85%, rgba(131,56,236,0.09) 0%, transparent 45%),
              radial-gradient(ellipse at 50% 50%, rgba(255,215,0,0.05) 0%, transparent 55%);
  animation: ambient-breathe 5s ease-in-out infinite;
}
body[data-level="10"] .bottom-nav {
  box-shadow: 0 -2px 18px rgba(255,215,0,0.28);
}
body[data-level="10"] .section-title {
  background: linear-gradient(90deg, #fff 40%, var(--accent) 50%, #fff 60%);
  background-size: 200% 100%;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer-text 4s ease-in-out infinite;
}
@keyframes shimmer-text {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Fire Mode nav accent ────────────────────────────────────────────── */
body[data-fire-mode="true"] .nav-user {
  text-shadow: 0 0 8px rgba(255,100,0,0.5);
}
body[data-fire-mode="true"] .nav-level-badge {
  background: linear-gradient(90deg, #ff6600, #ff3300) !important;
  -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ── Fire Mode bank banner ───────────────────────────────────────────── */
.bank-fire-mode-banner {
  display: flex; align-items: center; gap: 12px;
  margin: 0 16px 16px; padding: 14px 18px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255,102,0,0.12), rgba(255,51,0,0.08));
  box-shadow: inset 0 0 0 1px rgba(255,102,0,0.3);
  animation: fire-pulse 2s ease-in-out infinite;
}
.bank-fire-mode-banner .fire-mode-icon { font-size: 1.8rem; }
.bank-fire-mode-banner .fire-mode-title {
  font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
  background: linear-gradient(90deg, #ff6600, #ff3300);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.bank-fire-mode-banner .fire-mode-bonus {
  font-size: 0.8rem; color: rgba(255,153,68,0.9); margin-top: 2px;
}
@keyframes fire-pulse {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(255,102,0,0.3), 0 0 12px rgba(255,102,0,0.1); }
  50% { box-shadow: inset 0 0 0 1px rgba(255,102,0,0.5), 0 0 24px rgba(255,102,0,0.2); }
}

/* ══════════════════════════════════════════════════════════════════
   Admin Dashboard — v2.4.8
   ══════════════════════════════════════════════════════════════════ */

/* ── Admin Panel button on Profile page ────────────────────────── */
.admin-entry {
  padding: 4px 0;
}
.btn-admin-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  width: 100%;
  border-radius: 14px;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.5px;
  background: linear-gradient(135deg, #f97316, #ea580c);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12), 0 4px 16px rgba(249,115,22,0.35);
  transition: opacity 0.2s, box-shadow 0.2s;
}
.btn-admin-panel:hover { opacity: 0.9; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18), 0 6px 24px rgba(249,115,22,0.5); }

/* ── Admin page layout ──────────────────────────────────────────── */
.admin-container {
  max-width: 960px;
  margin: 0 auto;
  padding: 16px 16px 100px;
}
.admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.admin-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text);
}
.btn-missions-link {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  padding: 6px 14px;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px var(--accent);
  transition: background 0.2s;
}
.btn-missions-link:hover { background: rgba(0,212,255,0.08); }

/* ── Tab bar ────────────────────────────────────────────────────── */
.admin-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  background: var(--bg-surface);
  border-radius: 12px;
  padding: 4px;
  overflow-x: auto;
}
.admin-tab {
  flex: 1;
  min-width: 80px;
  padding: 10px 14px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--text-dim);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}
.admin-tab.active {
  background: var(--bg-card-hi);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(0,212,255,0.2);
}

/* ── Flash ──────────────────────────────────────────────────────── */
.admin-flash {
  padding: 10px 16px;
  border-radius: 10px;
  margin-bottom: 12px;
  font-size: 0.9rem;
  font-weight: 600;
}
.admin-flash.success { background: rgba(0,212,100,0.12); color: #00d46a; box-shadow: inset 0 0 0 1px rgba(0,212,100,0.25); }
.admin-flash.error   { background: rgba(255,77,109,0.12); color: var(--danger); box-shadow: inset 0 0 0 1px rgba(255,77,109,0.25); }

.admin-tab-content { animation: fadeIn 0.2s ease; }

/* ── Overview grid ──────────────────────────────────────────────── */
.overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.overview-card {
  padding: 16px;
  border-radius: 14px;
}
.overview-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.overview-icon { font-size: 2rem; line-height: 1; }
.overview-name-block { flex: 1; min-width: 0; }
.overview-username { font-size: 1rem; font-weight: 700; color: var(--text); }
.overview-level-badge { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.level-pill {
  font-size: 0.7rem; font-weight: 700; padding: 2px 7px;
  border-radius: 6px; background: rgba(0,212,255,0.15); color: var(--accent);
}
.level-name-text { font-size: 0.72rem; color: var(--text-dim); }
.fire-badge-mini { font-size: 0.95rem; }
.admin-crown { font-size: 1.1rem; }
.overview-xp-bar {
  height: 4px; border-radius: 4px; background: rgba(255,255,255,0.06); overflow: hidden;
  margin-bottom: 3px;
}
.overview-xp-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 4px; }
.overview-xp-label { font-size: 0.7rem; color: var(--text-muted); margin-bottom: 10px; }
.overview-bank-row { display: flex; gap: 8px; }
.overview-stat { flex: 1; text-align: center; }
.overview-stat-val { display: block; font-size: 0.9rem; font-weight: 700; color: var(--text); }
.overview-stat-lbl { font-size: 0.68rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; }

/* ── Users tab ──────────────────────────────────────────────────── */
.admin-new-user { padding: 16px; border-radius: 14px; margin-bottom: 16px; }
.admin-new-user-form {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 10px;
}
.admin-input {
  background: rgba(255,255,255,0.05);
  box-shadow: inset 0 0 0 1px var(--glass-border);
  border: none; border-radius: 8px;
  color: var(--text); font-size: 0.9rem;
  padding: 9px 12px;
  outline: none; transition: box-shadow 0.2s;
}
.admin-input:focus { box-shadow: inset 0 0 0 1px var(--accent); }
.admin-check-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.85rem; color: var(--text-dim); cursor: pointer;
}

.user-accordion { display: flex; flex-direction: column; gap: 8px; }
.user-accordion-item { border-radius: 14px; overflow: hidden; }
.user-accordion-header {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; cursor: pointer;
  transition: background 0.15s;
}
.user-accordion-header:hover { background: rgba(255,255,255,0.03); }
.user-accordion-name { flex: 1; font-weight: 600; font-size: 0.95rem; color: var(--text); display: flex; align-items: center; gap: 6px; }
.admin-crown-sm { font-size: 0.85rem; }
.user-accordion-meta { display: flex; gap: 8px; align-items: center; }
.level-pill-sm {
  font-size: 0.68rem; font-weight: 700; padding: 2px 6px;
  border-radius: 5px; background: rgba(0,212,255,0.1); color: var(--accent);
}
.allowance-chip {
  font-size: 0.75rem; color: var(--text-dim);
  background: rgba(255,255,255,0.05); padding: 2px 8px; border-radius: 5px;
}
.accordion-chevron {
  font-size: 1.3rem; color: var(--text-muted); transition: transform 0.2s;
  display: inline-block;
}
.accordion-chevron.open { transform: rotate(90deg); }

.user-accordion-body { padding: 0 16px 16px; border-top: 1px solid var(--glass-border); margin-top: -1px; }
.user-edit-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px;
}
.user-edit-field { display: flex; flex-direction: column; gap: 5px; }
.user-edit-field .admin-input { width: 100%; box-sizing: border-box; }
.user-edit-check { justify-content: flex-end; }
.edit-label { font-size: 0.72rem; color: var(--text-dim); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.user-edit-actions { display: flex; gap: 10px; margin-top: 14px; }

/* ── Settings tab ───────────────────────────────────────────────── */
.settings-card { padding: 16px; border-radius: 14px; margin-bottom: 16px; }
.settings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 12px 0; }
.settings-field { display: flex; flex-direction: column; gap: 5px; }
.settings-input-row { display: flex; align-items: center; gap: 8px; }
.settings-input { width: 100px; }
.settings-unit { font-size: 0.8rem; color: var(--text-dim); font-weight: 600; }
.settings-save { margin-top: 4px; }
.settings-hint { font-size: 0.82rem; color: var(--text-dim); margin: 8px 0; }

.pin-change-section { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--glass-border); }
.pin-change-title { font-size: 0.9rem; font-weight: 700; color: var(--text-dim); margin-bottom: 10px; }

/* ── Trusted IPs tab ────────────────────────────────────────────── */
.ip-table-wrap { border-radius: 14px; padding: 16px; overflow-x: auto; }
.ip-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.ip-table th {
  text-align: left; padding: 8px 12px;
  font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text-dim); border-bottom: 1px solid var(--glass-border);
}
.ip-table td { padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,0.04); }
.ip-address-cell { font-family: monospace; color: var(--accent); }
.ip-date-cell { color: var(--text-dim); font-size: 0.82rem; }

/* ── Savings Goal card (left panel of overview row) ─────────────── */
.bank-goal-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 180px;
  position: relative;
  overflow: hidden;
}

/* Invite (no goal set) */
.bank-goal-invite {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 20px 8px;
  cursor: pointer;
  text-align: center;
  opacity: 0.75;
  transition: opacity 0.15s, transform 0.15s;
}
.bank-goal-invite:hover { opacity: 1; transform: scale(1.02); }
.bank-goal-invite-icon { font-size: 2.2rem; margin-bottom: 4px; }
.bank-goal-invite-text {
  font-weight: 700;
  font-size: 1rem;
  color: var(--accent);
}
.bank-goal-invite-sub { font-size: 0.78rem; color: var(--text-dim); }

/* Inline goal form */
.bank-goal-form-inline {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bank-goal-form-title {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-dim);
  margin-bottom: 2px;
}
.form-input-sm {
  font-size: 0.88rem;
  padding: 8px 10px;
}
.bank-goal-form-btns {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 2px;
}

/* Goal in-progress state */
.bank-goal-progress-state {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bank-goal-card-name {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bank-goal-track-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.bank-goal-track {
  flex: 1;
  height: 10px;
  background: rgba(255,255,255,0.08);
  border-radius: 10px;
  overflow: hidden;
}
.bank-goal-fill {
  height: 100%;
  border-radius: 10px;
  background: linear-gradient(90deg, var(--accent), var(--lime));
  transition: width 0.6s ease;
}
.bank-goal-pct {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-dim);
  min-width: 32px;
  text-align: right;
}
.bank-goal-amounts {
  display: flex;
  align-items: baseline;
  gap: 5px;
  font-size: 0.85rem;
}
.bank-goal-current {
  font-size: 1.2rem;
  font-weight: 800;
  background: linear-gradient(90deg, var(--accent), var(--lime));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.bank-goal-sep { color: var(--text-dim); }
.bank-goal-target { color: var(--text-dim); font-weight: 600; }
.bank-goal-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  margin-top: 4px;
}
.btn-danger-ghost { color: rgba(248,113,113,0.7) !important; }
.btn-danger-ghost:hover { color: #f87171 !important; background: rgba(248,113,113,0.08) !important; }

/* Goal COMPLETE celebration state */
.bank-goal-complete-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  padding: 8px 4px;
  animation: goalGlow 2s ease-in-out infinite alternate;
}
@keyframes goalGlow {
  from { box-shadow: inset 0 0 0 1px var(--glass-border); }
  to   { box-shadow: inset 0 0 0 1px rgba(250,204,21,0.5), 0 0 24px rgba(250,204,21,0.15); }
}
.bank-goal-trophy {
  font-size: 2.8rem;
  animation: trophyBounce 0.8s ease infinite alternate;
}
@keyframes trophyBounce {
  from { transform: translateY(0) scale(1); }
  to   { transform: translateY(-5px) scale(1.08); }
}
.bank-goal-complete-title {
  font-size: 1.1rem;
  font-weight: 900;
  letter-spacing: 1px;
  background: linear-gradient(135deg, #facc15, #fb923c);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.bank-goal-complete-name {
  font-size: 0.82rem;
  color: var(--text-dim);
  font-style: italic;
}
.bank-goal-complete-bar {
  width: 100%;
  height: 8px;
  border-radius: 8px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
  margin: 2px 0;
}
.bank-goal-complete-fill {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  background: linear-gradient(90deg, #facc15, #fb923c, #facc15);
  background-size: 200% 100%;
  animation: shimmerBar 1.5s linear infinite;
}
@keyframes shimmerBar {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}
.bank-goal-clear-btn { margin-top: 4px; }

/* ── Bank hero row (cash out + lifestyle side by side) ──────────── */
.bank-hero-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
@media (max-width: 520px) {
  .bank-hero-row { grid-template-columns: 1fr; }
}

/* Override default cashout-section margin when inside hero row */
.bank-hero-row .bank-cashout-section {
  margin-bottom: 0;
}

/* Lifestyle hero panel */
.bank-lifestyle-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 28px 20px;
  background: var(--bg-card);
  backdrop-filter: blur(var(--blur));
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px var(--glass-border), 0 8px 32px rgba(0,0,0,0.2);
  text-align: center;
}
.bank-lifestyle-hero-label {
  font-size: 0.85rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.bank-lifestyle-hero-points {
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1.2;
  background: linear-gradient(135deg, #a855f7, #ec4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.btn-lifestyle-rewards {
  margin-top: 4px;
  padding: 10px 24px;
  font-size: 0.95rem;
  font-weight: 700;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  background: linear-gradient(135deg, #a855f7, #ec4899);
  color: #fff;
  box-shadow: 0 4px 16px rgba(168,85,247,0.4);
  transition: opacity 0.15s, transform 0.1s;
}
.btn-lifestyle-rewards:hover { opacity: 0.9; transform: translateY(-1px); }
.btn-lifestyle-rewards:active { transform: translateY(0); }

/* Compact allowance note */
.bank-allowance-note {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  padding: 8px 14px;
  margin-bottom: 12px;
  background: rgba(255,255,255,0.04);
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px var(--glass-border);
  font-size: 0.82rem;
  color: var(--text-dim);
}
.allowance-note-icon { font-size: 1rem; flex-shrink: 0; }
.allowance-note-text strong { color: var(--text); }
.allowance-history-btn { margin-left: auto; flex-shrink: 0; }
.allowance-party-bonus-badge {
  background: rgba(var(--accent-rgb, 0,212,255), 0.15);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb, 0,212,255), 0.35);
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.bank-allowance-history-inline {
  width: 100%;
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bank-allowance-history-inline .ledger-row {
  padding: 8px 10px;
  background: rgba(255,255,255,0.03);
  border-radius: 8px;
}

/* ── Lifestyle Rewards modal ────────────────────────────────────── */
.modal-card-wide { max-width: 500px; width: 92vw; }
.modal-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.modal-header-row .modal-title { margin: 0; font-size: 1.15rem; }
.lifestyle-modal-balance {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.lifestyle-modal-pts {
  font-size: 1.8rem;
  font-weight: 800;
  background: linear-gradient(135deg, #a855f7, #ec4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}
.lifestyle-modal-pts-label {
  font-size: 0.8rem;
  color: var(--text-dim);
  font-weight: 600;
  text-transform: uppercase;
}
.lifestyle-rewards-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}
.lifestyle-reward-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  box-shadow: inset 0 0 0 1px var(--glass-border);
  transition: box-shadow 0.15s;
}
.lifestyle-reward-card.reward-affordable {
  box-shadow: inset 0 0 0 1px rgba(168,85,247,0.4);
  background: rgba(168,85,247,0.06);
}
.reward-info { flex: 1; min-width: 0; }
.reward-name { font-weight: 600; font-size: 0.92rem; color: var(--text); }
.reward-desc { font-size: 0.78rem; color: var(--text-dim); margin-top: 2px; }
.reward-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.reward-cost {
  font-size: 0.85rem;
  font-weight: 700;
  color: #a855f7;
  white-space: nowrap;
}
.lifestyle-pending-section {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--glass-border);
}
.lifestyle-pending-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}
.lifestyle-pending-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  font-size: 0.88rem;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.lifestyle-pending-row:last-child { border-bottom: none; }
.redemption-badge {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.redemption-badge.pending {
  background: rgba(251,191,36,0.15);
  color: #fbbf24;
}

/* ── Today page — Pending Rewards ────────────────────────────────── */
.today-rewards-section {
  margin: 0 0 16px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(168,85,247,0.12), rgba(236,72,153,0.10));
  box-shadow: inset 0 0 0 1px rgba(168,85,247,0.3), 0 4px 20px rgba(168,85,247,0.1);
  padding: 16px;
  animation: rewardsSectionPulse 3s ease-in-out infinite alternate;
}
@keyframes rewardsSectionPulse {
  from { box-shadow: inset 0 0 0 1px rgba(168,85,247,0.3), 0 4px 20px rgba(168,85,247,0.08); }
  to   { box-shadow: inset 0 0 0 1px rgba(236,72,153,0.5), 0 4px 28px rgba(236,72,153,0.18); }
}

.today-rewards-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.today-rewards-icon { font-size: 1.4rem; }
.today-rewards-title {
  flex: 1;
  font-size: 1rem;
  font-weight: 800;
  background: linear-gradient(90deg, #c084fc, #f472b6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0;
}
.today-rewards-count {
  background: linear-gradient(135deg, #a855f7, #ec4899);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 800;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.today-reward-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 8px;
  border-radius: 12px;
  background: rgba(20, 10, 35, 0.55);
  box-shadow: inset 0 0 0 1px rgba(168,85,247,0.25);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.today-reward-card:last-child { margin-bottom: 0; }

.today-reward-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.today-reward-emoji {
  font-size: 1.6rem;
  flex-shrink: 0;
  animation: rewardSpin 4s linear infinite;
}
@keyframes rewardSpin {
  0%   { transform: rotate(0deg) scale(1); }
  25%  { transform: rotate(-8deg) scale(1.1); }
  50%  { transform: rotate(0deg) scale(1); }
  75%  { transform: rotate(8deg) scale(1.1); }
  100% { transform: rotate(0deg) scale(1); }
}
.today-reward-info { min-width: 0; }
.today-reward-name {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.today-reward-pts {
  font-size: 0.75rem;
  color: #c084fc;
  font-weight: 600;
  margin-top: 1px;
}

.btn-got-reward {
  flex-shrink: 0;
  padding: 9px 16px;
  font-size: 0.82rem;
  font-weight: 800;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  background: linear-gradient(135deg, #a855f7, #ec4899);
  color: #fff;
  box-shadow: 0 3px 12px rgba(168,85,247,0.4);
  white-space: nowrap;
  transition: opacity 0.15s, transform 0.1s;
}
.btn-got-reward:hover  { opacity: 0.9; transform: translateY(-1px); }
.btn-got-reward:active { transform: scale(0.96); }

/* ═══════════════════════════════════════════════
   LIFESTYLE GOALS — Card Grid (Today page)
═══════════════════════════════════════════════ */
.lifestyle-section {
  padding: 0 16px 16px;
}
.lifestyle-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-top: 4px;
}
.lifestyle-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.lifestyle-header-icon {
  font-size: 1.4rem;
}
.lifestyle-header-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}
.lifestyle-week-badge {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 50px;
  background: rgba(99,102,241,0.25);
  box-shadow: inset 0 0 0 1px rgba(99,102,241,0.4);
  color: #a5b4fc;
}
.lifestyle-empty {
  text-align: center;
  padding: 24px;
  color: var(--text-dim);
  font-size: 0.9rem;
}
.lifestyle-goals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}

/* Individual goal card */
.lifestyle-goal-card {
  position: relative;
  border-radius: 16px;
  padding: 16px 14px 14px;
  background: rgba(99,102,241,0.08);
  box-shadow: inset 0 0 0 1px rgba(99,102,241,0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: box-shadow 0.25s, background 0.25s, transform 0.15s;
  overflow: hidden;
}
.lifestyle-goal-card:hover { transform: translateY(-2px); }

/* On-track state: green glow */
.lifestyle-goal-card.goal-complete {
  background: rgba(16,185,129,0.12);
  box-shadow: inset 0 0 0 1px rgba(16,185,129,0.4), 0 0 18px rgba(16,185,129,0.18);
}
/* Today logged (but not yet on track) */
.lifestyle-goal-card.goal-logged {
  background: rgba(99,102,241,0.14);
  box-shadow: inset 0 0 0 1px rgba(99,102,241,0.35);
}

/* Big checkmark badge */
.goal-complete-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #10b981, #34d399);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(16,185,129,0.5);
  animation: goalCheck 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes goalCheck {
  0%   { transform: scale(0) rotate(-20deg); opacity: 0; }
  100% { transform: scale(1) rotate(0deg);   opacity: 1; }
}

.goal-card-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text);
  text-align: center;
  line-height: 1.2;
  min-height: 2.1em;
  display: flex;
  align-items: center;
}

/* Tally: "3 / 5" with labels */
.goal-tally-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.goal-tally-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}
.goal-tally-num {
  font-size: 1.6rem;
  font-weight: 900;
  line-height: 1;
  color: var(--accent);
}
.goal-tally-num.goal-tally-target {
  color: var(--text-dim);
  font-size: 1.3rem;
}
.goal-tally-label {
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-dim);
}
.goal-tally-divider {
  font-size: 1.4rem;
  color: var(--text-dim);
  font-weight: 300;
  margin-bottom: 10px;
}

/* Progress dots */
.goal-dots-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center;
}
.goal-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15);
  transition: background 0.2s, box-shadow 0.2s;
}
.goal-dot-filled {
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent);
}
.goal-complete .goal-dot-filled {
  background: #10b981;
  box-shadow: 0 0 6px #10b981;
}

/* Log Today button */
.btn-log-goal {
  margin-top: 4px;
  padding: 7px 14px;
  font-size: 0.78rem;
  font-weight: 800;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  background: linear-gradient(135deg, var(--accent), var(--accent-2, #818cf8));
  color: #fff;
  box-shadow: 0 2px 10px rgba(var(--accent-rgb, 99,102,241),0.35);
  transition: opacity 0.15s, transform 0.1s;
  width: 100%;
}
.btn-log-goal:hover  { opacity: 0.88; transform: translateY(-1px); }
.btn-log-goal:active { transform: scale(0.95); }

.goal-logged-today {
  font-size: 0.78rem;
  font-weight: 700;
  color: #818cf8;
  text-align: center;
  margin-top: 4px;
}
.goal-on-track-msg {
  font-size: 0.78rem;
  font-weight: 700;
  color: #10b981;
  text-align: center;
  margin-top: 4px;
}

/* ═══════════════════════════════════════════════
   WEEKLY CALENDAR PAGE — 7-Day Grid
═══════════════════════════════════════════════ */
.week-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  padding: 0 12px 24px;
  min-height: 300px;
}

/* On narrower screens, show fewer columns and scroll */
@media (max-width: 900px) {
  .week-grid {
    grid-template-columns: repeat(4, minmax(140px, 1fr));
    overflow-x: auto;
  }
}
@media (max-width: 600px) {
  .week-grid {
    grid-template-columns: repeat(3, minmax(130px, 1fr));
  }
}

.week-day-col {
  background: rgba(255,255,255,0.04);
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  min-height: 200px;
  overflow: hidden;
  transition: box-shadow 0.2s;
}

/* Today's column gets accent border */
.week-day-col.week-today {
  box-shadow: inset 0 0 0 2px var(--accent), 0 0 20px rgba(var(--accent-rgb, 99,102,241),0.18);
  background: rgba(var(--accent-rgb, 99,102,241),0.07);
}

/* Day header */
.week-day-header {
  padding: 10px 10px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  text-align: center;
}
.week-day-name {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-dim);
}
.week-today .week-day-name {
  color: var(--accent);
}
.week-day-date {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1.1;
  margin-top: 2px;
}
.week-today .week-day-date {
  color: var(--accent);
}

/* Events list inside a day */
.week-events-list {
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.week-empty {
  font-size: 0.7rem;
  color: var(--text-dim);
  text-align: center;
  padding: 12px 0;
  opacity: 0.6;
}

/* Individual event card */
.week-event-card {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  background: rgba(255,255,255,0.05);
  border-radius: 8px;
  padding: 6px 7px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.07);
}
.week-event-color {
  width: 3px;
  min-width: 3px;
  height: 100%;
  min-height: 28px;
  border-radius: 3px;
  flex-shrink: 0;
  align-self: stretch;
}
.week-event-body {
  min-width: 0;
  flex: 1;
}
.week-event-title {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.2;
  word-break: break-word;
}
.week-event-time {
  font-size: 0.62rem;
  color: var(--text-dim);
  margin-top: 2px;
}

/* Week nav header */
.week-nav {
  display: flex;
  align-items: center;
  gap: 10px;
}
.week-label {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════
   GEM DISPLAY — CSS-rendered gems
═══════════════════════════════════════════════ */
.gem-shape {
  display: inline-block;
  position: relative;
  border-radius: 3px 3px 6px 6px;
}
/* Size variants */
.gem-shape.gem-small  { width: 22px; height: 20px; }
.gem-shape.gem-medium { width: 32px; height: 28px; }
.gem-shape.gem-large  { width: 44px; height: 38px; }
.gem-shape.gem-header { width: 28px; height: 25px; }

/* Colors by type */
.gem-ruby     { background: linear-gradient(145deg, #ff6b6b, #c0392b, #ff4040); box-shadow: 0 0 12px rgba(255,50,50,0.6),  inset 0 2px 4px rgba(255,200,200,0.5); }
.gem-emerald  { background: linear-gradient(145deg, #55efc4, #00b894, #27ae60); box-shadow: 0 0 12px rgba(0,200,100,0.6),  inset 0 2px 4px rgba(200,255,220,0.5); }
.gem-diamond  { background: linear-gradient(145deg, #dfe6e9, #b2bec3, #74b9ff); box-shadow: 0 0 14px rgba(130,200,255,0.7), inset 0 2px 4px rgba(255,255,255,0.8); }
.gem-sapphire { background: linear-gradient(145deg, #74b9ff, #0984e3, #2d3436); box-shadow: 0 0 12px rgba(50,100,255,0.6),  inset 0 2px 4px rgba(180,220,255,0.5); }
.gem-amethyst { background: linear-gradient(145deg, #d980fa, #9b59b6, #6c3483); box-shadow: 0 0 12px rgba(180,50,255,0.55), inset 0 2px 4px rgba(230,180,255,0.5); }
.gem-topaz    { background: linear-gradient(145deg, #ffeaa7, #f9ca24, #e17055); box-shadow: 0 0 12px rgba(250,200,30,0.6),  inset 0 2px 4px rgba(255,240,180,0.6); }

/* Shine facet */
.gem-shape::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 3px;
  width: 35%;
  height: 35%;
  background: rgba(255,255,255,0.55);
  border-radius: 50% 50% 0 50%;
  transform: rotate(-15deg);
}

/* Header gem row (Today page, below date) */
/* ═══════════════════════════════════════════════
   TREASURE BOX — Today page mission gems
═══════════════════════════════════════════════ */
@keyframes treasure-pulse {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(255,210,60,0.35),
                          0 0 28px rgba(220,160,0,0.15); }
  50%       { box-shadow: inset 0 0 0 1px rgba(255,220,80,0.65),
                          0 0 52px rgba(220,160,0,0.32); }
}
@keyframes treasure-shimmer {
  0%   { background-position: -250% center; }
  100% { background-position: 250% center; }
}
@keyframes gem-float {
  0%, 100% { transform: translateY(0px) scale(1); }
  50%       { transform: translateY(-6px) scale(1.04); }
}

.today-gems-section {
  margin-top: 20px;
  border-radius: var(--radius);
  background: linear-gradient(135deg,
    rgba(80,50,0,0.45) 0%,
    rgba(40,25,0,0.55) 50%,
    rgba(80,50,0,0.45) 100%);
  animation: treasure-pulse 2.8s ease-in-out infinite;
  padding: 22px 20px 20px;
}

.today-gems-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 18px;
}
.today-gems-icon { font-size: 1.4rem; line-height: 1; }
.today-gems-title {
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0;
  background: linear-gradient(135deg, #ffd700, #ffaa00, #ffe066, #ffaa00, #ffd700);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: treasure-shimmer 4s linear infinite;
}

.today-gems-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}
.today-gem-card {
  display: flex;
  align-items: center;
  justify-content: center;
  animation: gem-float 3s ease-in-out infinite;
  cursor: default;
}
.today-gem-card:nth-child(2) { animation-delay: 0.6s; }
.today-gem-card:nth-child(3) { animation-delay: 1.2s; }
.today-gem-card:nth-child(4) { animation-delay: 1.8s; }
.today-gem-card:nth-child(5) { animation-delay: 2.4s; }

/* Per-type ambient glow under each gem */
.gem-card-glow-ruby     { filter: drop-shadow(0 0 10px rgba(255,50,50,0.55)); }
.gem-card-glow-emerald  { filter: drop-shadow(0 0 10px rgba(0,200,100,0.55)); }
.gem-card-glow-diamond  { filter: drop-shadow(0 0 10px rgba(100,180,255,0.55)); }
.gem-card-glow-sapphire { filter: drop-shadow(0 0 10px rgba(50,100,255,0.55)); }
.gem-card-glow-amethyst { filter: drop-shadow(0 0 10px rgba(180,50,255,0.55)); }
.gem-card-glow-topaz    { filter: drop-shadow(0 0 10px rgba(250,180,0,0.55)); }

/* Tiny gem icons for login cards */
.gem-tiny {
  display: inline-block;
  width: 12px;
  height: 11px;
  border-radius: 2px 2px 4px 4px;
  vertical-align: middle;
  margin: 0 1px;
  position: relative;
}
.gem-tiny::before {
  content: '';
  position: absolute;
  top: 1px;
  left: 1px;
  width: 30%;
  height: 30%;
  background: rgba(255,255,255,0.5);
  border-radius: 50%;
}


/* ═══════════════════════════════════════════════
   GEM TROPHY CARDS — Profile page
═══════════════════════════════════════════════ */
.gem-trophy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 14px;
}

.gem-trophy-card {
  border-radius: 16px;
  padding: 18px 14px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  background: rgba(255,255,255,0.04);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1);
  transition: transform 0.2s, box-shadow 0.2s;
}
.gem-trophy-card:hover { transform: translateY(-3px); }

/* Type-specific glow colors */
.gem-card-ruby     { box-shadow: inset 0 0 0 1px rgba(255,80,80,0.3),  0 0 18px rgba(255,50,50,0.15); }
.gem-card-emerald  { box-shadow: inset 0 0 0 1px rgba(0,200,100,0.3),  0 0 18px rgba(0,185,100,0.15); }
.gem-card-diamond  { box-shadow: inset 0 0 0 1px rgba(130,200,255,0.3), 0 0 18px rgba(130,200,255,0.15); }
.gem-card-sapphire { box-shadow: inset 0 0 0 1px rgba(50,130,255,0.3),  0 0 18px rgba(50,130,255,0.15); }
.gem-card-amethyst { box-shadow: inset 0 0 0 1px rgba(180,80,255,0.3),  0 0 18px rgba(180,80,255,0.15); }
.gem-card-topaz    { box-shadow: inset 0 0 0 1px rgba(250,200,30,0.3),  0 0 18px rgba(250,200,30,0.15); }

.gem-visual-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
}

.gem-img {
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,0.5));
}
.gem-img-small  { width: 36px;  height: 36px; }
.gem-img-medium { width: 46px;  height: 46px; }
.gem-img-large  { width: 56px;  height: 56px; }
.gem-img-tiny {
  display: inline-block;
  width: 18px;
  height: 18px;
  object-fit: contain;
  vertical-align: middle;
  margin: 0 1px;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.4));
}

.gem-mission-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}
.gem-size-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: capitalize;
  color: var(--text-dim);
}
.gem-desc {
  font-size: 0.72rem;
  color: var(--text-dim);
  line-height: 1.35;
  font-style: italic;
}

/* Login card gems row */
.user-card-gems {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  justify-content: center;
  margin-top: 4px;
}

/* ═══════════════════════════════════════════════
   PROFILE — Lifestyle Goals form & manage actions
═══════════════════════════════════════════════ */
.lifestyle-new-goal-form {
  background: rgba(99,102,241,0.07);
  border-radius: 14px;
  padding: 16px;
  box-shadow: inset 0 0 0 1px rgba(99,102,241,0.2);
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lifestyle-form-row {
  display: flex;
  gap: 12px;
  align-items: flex-end;
}
.lifestyle-form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.lifestyle-form-field-narrow {
  flex: 0 0 140px;
  max-width: 140px;
}
.lifestyle-form-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-dim);
  letter-spacing: 0.02em;
}

/* Goal card manage actions */
.goal-manage-actions {
  display: flex;
  gap: 6px;
  width: 100%;
  margin-top: 2px;
}
.btn-goal-action {
  flex: 1;
  padding: 6px 0;
  font-size: 0.72rem;
  font-weight: 700;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
}
.btn-goal-action:hover  { opacity: 0.85; transform: translateY(-1px); }
.btn-goal-action:active { transform: scale(0.95); }
.btn-goal-edit {
  background: rgba(99,102,241,0.2);
  box-shadow: inset 0 0 0 1px rgba(99,102,241,0.4);
  color: #a5b4fc;
}
.btn-goal-save {
  background: rgba(16,185,129,0.2);
  box-shadow: inset 0 0 0 1px rgba(16,185,129,0.4);
  color: #6ee7b7;
}
.btn-goal-remove {
  background: rgba(239,68,68,0.12);
  box-shadow: inset 0 0 0 1px rgba(239,68,68,0.3);
  color: #fca5a5;
}

/* Inline edit inputs inside goal cards */
.goal-edit-name-input {
  font-size: 0.8rem;
  padding: 5px 8px;
  text-align: center;
  width: 100%;
}
.goal-edit-target-input {
  font-size: 1.1rem;
  padding: 2px 4px;
  text-align: center;
  width: 48px;
}

/* Undo log button — muted appearance to signal "already done" */
.btn-log-undo {
  background: rgba(99,102,241,0.15) !important;
  box-shadow: inset 0 0 0 1px rgba(99,102,241,0.3) !important;
  color: #a5b4fc !important;
  font-weight: 600 !important;
  font-size: 0.72rem !important;
  opacity: 0.85;
}
.btn-log-undo:hover { opacity: 1 !important; }

/* Test header info block */
.test-header-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.test-rules-badge {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 50px;
  background: rgba(99,102,241,0.18);
  box-shadow: inset 0 0 0 1px rgba(99,102,241,0.35);
  color: #a5b4fc;
  white-space: nowrap;
}
.score-errors {
  font-size: 0.9rem;
  color: #fbbf24;
  margin: 2px 0;
}

/* -- piano view (v1.1 redesign) -- */
.piano-accept, .piano-training { text-align: center; padding: 40px 20px; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.piano-prompt { font-size: 1.1rem; color: var(--text-muted); }
.piano-song-input { font-size: 1.1rem; padding: 14px 18px; width: 100%; max-width: 420px; text-align: center; }
.piano-song-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); }
.piano-song-name { font-size: 1.6rem; font-weight: 700; color: #fbbf24; }
.piano-hint { color: var(--text-muted); max-width: 360px; line-height: 1.5; }
.piano-error { color: #f87171; font-size: 0.9rem; }
.approval-song-name { display: block; font-size: 0.9rem; color: #fbbf24; margin-top: 4px; }

/* ── Character System ─────────────────────────────────────────────── */

/* Character avatar sizing */
.char-avatar-img   { height: 155px; width: auto; display: block; max-width: none; }
.char-avatar-nav   { width: 36px; height: 36px; object-fit: contain; display: block; }
.profile-char-img  { width: 320px; height: 320px; object-fit: contain; display: block; margin: 0 auto; }
.levelup-char-img  { width: 200px; height: 200px; object-fit: contain; margin-bottom: 12px; display: block; margin-left: auto; margin-right: auto; }

/* Login card avatar with character */
.user-card-avatar  { position: relative; width: 130px; height: 130px; }

/* Profile character stage */
.profile-character-stage   { text-align: center; padding: 24px 16px 16px; }
.profile-character-display { position: relative; display: inline-block; }
.profile-char-fx           { position: absolute; inset: 0; pointer-events: none; }
.profile-char-identity     { font-size: 1.1rem; font-weight: 700; color: var(--accent);
                              margin-top: 8px; letter-spacing: 0.05em; text-transform: uppercase; }

/* CSS level glow effects */
.char-level-3 .profile-char-img,
.char-level-4 .profile-char-img  { filter: drop-shadow(0 0 8px var(--accent)); }
.char-level-5 .profile-char-img  { filter: drop-shadow(0 0 14px var(--accent)); animation: char-pulse 2s ease-in-out infinite; }
.char-level-8 .profile-char-img,
.char-level-9 .profile-char-img  { filter: drop-shadow(0 0 24px var(--accent)) drop-shadow(0 0 8px var(--accent-2, var(--accent))); }
.char-level-10 .profile-char-img { filter: drop-shadow(0 0 32px #ffd700) drop-shadow(0 0 16px var(--accent)); animation: char-pulse-gold 1.5s ease-in-out infinite; }

@keyframes char-pulse      { 0%,100% { filter: drop-shadow(0 0 10px var(--accent)); } 50% { filter: drop-shadow(0 0 20px var(--accent)); } }
@keyframes char-pulse-gold { 0%,100% { filter: drop-shadow(0 0 24px #ffd700); } 50% { filter: drop-shadow(0 0 40px #ffd700); } }

/* Party row */
.party-row          { display: flex; gap: 16px; flex-wrap: wrap; }
.party-member-card  { display: flex; flex-direction: column; align-items: center; gap: 6px;
                       background: var(--bg-card); border-radius: var(--radius); padding: 12px; width: 100px; }
.party-member-img   { width: 64px; height: 64px; object-fit: contain; }
.party-member-name  { font-size: 0.75rem; font-weight: 600; text-align: center; }
.party-member-bonus { font-size: 0.65rem; color: var(--accent); text-align: center; }

/* Character setup / subclass pages */
.setup-page         { min-height: 100vh; display: flex; flex-direction: column; align-items: center;
                       justify-content: flex-start; padding: 40px 32px; background: var(--bg); overflow-y: auto; }
.setup-step-title   { font-size: 1.3rem; font-weight: 700; margin: 16px 0 8px; text-align: center; }
.setup-next-btn     { margin-top: 24px; min-width: 140px; }
.setup-nav-row      { display: flex; gap: 12px; justify-content: center; margin-top: 24px; }
.setup-error        { color: #f87171; margin-top: 12px; font-size: 0.9rem; text-align: center; }
.gender-icon        { font-size: 2rem; }

.gender-grid        { display: flex; gap: 24px; margin-top: 24px; justify-content: center; }
.gender-card        { width: 140px; height: 180px; background: var(--bg-card); border-radius: var(--radius);
                       border: 2px solid var(--glass-border); cursor: pointer; display: flex;
                       flex-direction: column; align-items: center; justify-content: center; gap: 12px;
                       font-size: 1.1rem; font-weight: 600; transition: border-color .2s; }
.gender-card:hover,
.gender-card.selected { border-color: var(--accent); box-shadow: 0 0 16px var(--glass-glow, rgba(0,212,255,.2)); }

.class-grid         { display: grid; grid-template-columns: repeat(3, 160px); gap: 16px; justify-content: center; margin-top: 24px; }
.class-card         { width: 160px; background: var(--bg-card); border-radius: var(--radius);
                       border: 2px solid var(--glass-border); cursor: pointer; padding: 16px;
                       display: flex; flex-direction: column; align-items: center; gap: 10px;
                       transition: border-color .2s; }
.class-card:hover,
.class-card.selected { border-color: var(--accent); }
.class-card-img     { width: 100px; height: 100px; object-fit: contain; }
.class-card-name    { font-weight: 700; font-size: 0.95rem;
                      background: linear-gradient(90deg, #ff4e50, #f9d423, #00c9a7, #a18cd1, #ff4e50);
                      background-size: 200% auto;
                      -webkit-background-clip: text;
                      -webkit-text-fill-color: transparent;
                      background-clip: text;
                      animation: rainbow-scroll 3s linear infinite; }
@keyframes rainbow-scroll { to { background-position: 200% center; } }

/* Subclass card variant */
.subclass-card      { width: 200px; padding: 20px; }
.subclass-name      { font-size: 1.1rem; font-weight: 700; }
.subclass-key       { font-size: 0.75rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 4px; }

/* Level-up overlay buttons */
.levelup-subclass-btn { margin-top: 16px; display: block; }
.levelup-party-btn    { margin-top: 16px; }

/* ── Character UX Polish ──────────────────────────────────────────── */

/* === Entrance animations === */
@keyframes char-img-appear {
  0%   { opacity: 0; transform: scale(0.88) translateY(10px); }
  100% { opacity: 1; transform: scale(1)    translateY(0); }
}
@keyframes levelup-card-enter {
  0%   { opacity: 0; transform: scale(0.82); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes setup-fade-in {
  0%   { opacity: 0; transform: translateY(16px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes hint-pulse {
  0%, 100% { opacity: 0.45; }
  50%       { opacity: 0.85; }
}
@keyframes gold-card-pulse {
  0%, 100% { box-shadow: 0 0 80px rgba(255,215,0,.5), inset 0 0 0 2px rgba(255,215,0,.5); }
  50%       { box-shadow: 0 0 130px rgba(255,215,0,.8), 0 0 220px rgba(255,215,0,.25), inset 0 0 0 2px rgba(255,215,0,.8); }
}
@keyframes bonus-icon-pop {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(1); }
}
@keyframes arrival-rise {
  0%   { opacity: 0; transform: translateY(24px) scale(0.95); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Apply entrance animation to level-up card */
.levelup-card {
  animation: levelup-card-enter 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* Character evolution cross-fade container */
.levelup-char-evolution {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 auto 12px;
}
.levelup-char-evolution .levelup-char-img {
  position: absolute;
  top: 0; left: 0;
  width: 200px;
  height: 200px;
  margin: 0;
  animation: none;
}
.levelup-char-old {
  /* Hold at full opacity for 1.5s, then fade out over 2s */
  animation: levelup-fade-out 3.5s ease-in-out forwards !important;
  z-index: 1;
}
.levelup-char-new {
  /* Start invisible, begin fading in at 1.5s, fully visible by 3.5s */
  animation: levelup-fade-in 2s ease-in-out 1.5s forwards !important;
  opacity: 0;
  z-index: 2;
}
@keyframes levelup-fade-out {
  0%   { opacity: 1; }
  43%  { opacity: 1; } /* hold for ~1.5s */
  100% { opacity: 0; }
}
@keyframes levelup-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* Profile character image entrance */
.profile-char-img {
  animation: char-img-appear 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* "Tap to continue" hint pulse */
.levelup-hint {
  animation: hint-pulse 1.6s ease-in-out infinite;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.5);
  margin-top: 24px;
}
.levelup-hint-required {
  animation: hint-pulse 1.2s ease-in-out infinite;
  font-size: 0.78rem;
  color: var(--accent);
  margin-top: 10px;
}

/* Level 6-7 glow (fills the gap between 5 and 8) */
.char-level-6 .profile-char-img,
.char-level-7 .profile-char-img {
  filter: drop-shadow(0 0 14px var(--accent)) drop-shadow(0 0 4px var(--accent));
  animation: char-pulse 2.5s ease-in-out infinite;
}

/* === Level-10 gold overlay === */
.levelup-card.levelup-gold {
  background: linear-gradient(135deg, rgba(40,35,0,.97), rgba(28,22,0,.97));
  box-shadow: 0 0 80px rgba(255,215,0,.5), inset 0 0 0 2px rgba(255,215,0,.5);
  animation: levelup-card-enter 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both,
             gold-card-pulse 2s ease-in-out 0.4s infinite;
}
.levelup-card.levelup-gold .levelup-label {
  color: #ffd700;
  animation: levelup-pulse 0.8s ease-in-out infinite;
}
.levelup-card.levelup-gold .levelup-level { color: #ffd700; }
.levelup-card.levelup-gold .levelup-name  { color: #ffed80; }

/* Gold button */
.btn-gold {
  background: linear-gradient(135deg, #c8960c, #ffd700, #c8960c);
  color: #1a1400;
  font-weight: 700;
  border: none;
  padding: 12px 28px;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 1rem;
  transition: filter .2s;
}
.btn-gold:hover { filter: brightness(1.12); }

/* Reborn — subtle muted text button for soft-destructive action */
.btn-reborn {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 0.78rem;
  cursor: pointer;
  padding: 4px 8px;
  opacity: 0.6;
  transition: opacity .2s, color .2s;
}
.btn-reborn:hover { opacity: 1; color: var(--danger); }

.btn-ghost-sm {
  background: transparent;
  border: 1px solid var(--glass-border);
  color: var(--text-dim);
  padding: 8px 16px;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 0.85rem;
}

/* === Level-up milestone text === */
.levelup-milestone-text {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.6);
  margin: 8px 0 16px;
  font-style: italic;
}

/* Subclass and party btn tweaks */
.levelup-subclass-btn { margin-top: 0; display: inline-block; }
.levelup-party-btn    { margin-top: 0; }

/* === Party retirement overlay === */
.retirement-overlay { cursor: default; }
.retirement-card    { max-width: 320px; }
.retirement-char-img {
  width: 160px; height: 160px; object-fit: contain;
  display: block; margin: 0 auto 16px;
  animation: char-img-appear 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.retirement-desc {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.7);
  margin: 8px 0 24px;
  line-height: 1.5;
}
.retirement-confirm-btn { display: block; width: 100%; margin-bottom: 10px; }
.retirement-cancel-btn  { display: block; width: 100%; }

/* Bonus reveal */
.bonus-reveal-card  { max-width: 300px; }
.bonus-reveal-icon  {
  font-size: 3.5rem;
  margin-bottom: 12px;
  display: block;
  animation: bonus-icon-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both;
}
.bonus-reveal-name  { font-size: 1.5rem; font-weight: 700; color: #ffd700; margin-bottom: 8px; }
.bonus-reveal-desc  { font-size: 0.85rem; color: rgba(255,255,255,0.65); }

/* === Character setup page === */
.setup-brand        { text-align: center; margin-bottom: 8px; }
.setup-brand-title  { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.2em;
                       color: var(--text-dim); margin-bottom: 8px; }
.setup-hero-title   { font-size: 2rem; font-weight: 700; margin: 0 0 8px;
                       background: linear-gradient(135deg, #fff 40%, var(--accent));
                       -webkit-background-clip: text; -webkit-text-fill-color: transparent;
                       background-clip: text; }
.setup-hero-sub     { font-size: 0.95rem; color: var(--text-dim); margin: 0 0 24px; }
.setup-step         { animation: setup-fade-in 0.35s ease-out both; width: 100%; max-width: 480px; }
/* Class picker: fixed 3-col grid, compact to fit all 6 on screen */
.setup-step--classes { max-width: 560px; }
.setup-step--classes .setup-hero-title { font-size: 1.6rem; margin-bottom: 4px; }
.setup-step--classes .class-grid       { margin-top: 16px; gap: 12px; grid-template-columns: repeat(3, 150px); }
.setup-step--classes .class-card       { padding: 10px; gap: 6px; width: 150px; }
.setup-step--classes .class-card-img   { width: 80px; height: 80px; }
.setup-step--classes .setup-nav-row    { margin-top: 16px; }
.setup-progress     { display: flex; gap: 10px; justify-content: center; margin-bottom: 24px; }
.setup-dot          { width: 10px; height: 10px; border-radius: 50%;
                       background: var(--glass-border); transition: background .3s; }
.setup-dot-active   { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.setup-dot-done     { background: var(--accent); opacity: 0.5; }
.setup-tap-hint     { font-size: 0.75rem; color: var(--text-dim); text-align: center;
                       margin-top: 16px; font-style: italic; }
.setup-confirm-btn  { min-width: 200px; padding: 14px 28px; font-size: 1rem; }

/* Gender card polish */
.gender-silhouette  { font-size: 2.5rem; margin-bottom: 4px; }
.gender-silhouette-m { color: #60a5fa; }
.gender-silhouette-f { color: #f472b6; }
.gender-label       { font-size: 1rem; font-weight: 600; }
.gender-card:has(.gender-silhouette-m) .gender-label {
  color: #00d4ff;
  text-shadow: 0 0 10px rgba(0, 212, 255, 0.8);
}
.gender-card:has(.gender-silhouette-f) .gender-label {
  color: #f472b6;
  text-shadow: 0 0 10px rgba(244, 114, 182, 0.8);
}

/* Class card description line */
.class-card-desc    { font-size: 0.75rem; color: var(--text-dim); text-align: center;
                       line-height: 1.4; margin-top: 4px; padding: 0 4px; }

/* Arrival screen */
.setup-arrival      {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 60vh; text-align: center;
  animation: arrival-rise 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.setup-arrival-icon  { font-size: 4rem; margin-bottom: 20px; animation: char-pulse 1.5s ease-in-out infinite; }
.setup-arrival-title {
  font-size: 2rem; font-weight: 700;
  background: linear-gradient(135deg, #fff 40%, var(--accent));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  margin-bottom: 12px;
}
.setup-arrival-sub  { font-size: 0.95rem; color: var(--text-dim); }

/* === Subclass page === */
.subclass-page      { justify-content: flex-start; padding-top: 48px; gap: 0; }
.subclass-header    { text-align: center; margin-bottom: 32px; }
.subclass-milestone {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.25em;
  color: var(--accent); margin-bottom: 12px; font-weight: 700;
}
.subclass-hero-title {
  font-size: 2.2rem; font-weight: 700; margin: 0 0 10px;
  background: linear-gradient(135deg, #fff 30%, var(--accent));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.subclass-hero-sub  { font-size: 0.95rem; color: var(--text-dim); line-height: 1.6; margin: 0; }

.subclass-grid      { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }
.subclass-card      {
  width: 200px; min-height: 180px;
  background: var(--bg-card); border-radius: var(--radius);
  border: 2px solid var(--glass-border); cursor: pointer; padding: 0;
  display: flex; flex-direction: column; transition: border-color .25s, box-shadow .25s;
  text-align: left; overflow: hidden;
}
.subclass-card:hover  { border-color: var(--accent); }
.subclass-card.selected {
  border-color: var(--accent);
  box-shadow: 0 0 24px rgba(var(--accent-rgb,0,212,255),.35);
}
.subclass-card-inner {
  position: relative; padding: 24px 20px; height: 100%;
  display: flex; flex-direction: column; gap: 10px;
}
.subclass-card-glow {
  position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(ellipse at top, rgba(var(--accent-rgb,0,212,255),.12), transparent 70%);
  transition: opacity .3s;
  pointer-events: none;
}
.subclass-card.selected .subclass-card-glow { opacity: 1; }
.subclass-card-name     { font-size: 1.15rem; font-weight: 700; color: var(--text); }
.subclass-card-divider  { height: 1px; background: var(--glass-border); }
.subclass-card-flavor   { font-size: 0.82rem; color: var(--text-dim); line-height: 1.5; flex: 1; }
.subclass-card-select-hint {
  font-size: 0.72rem; color: var(--text-dim); opacity: 0.6; font-style: italic;
}
.subclass-card-selected-badge {
  font-size: 0.78rem; color: var(--accent); font-weight: 700;
}
.subclass-mystery-hint  {
  margin-top: 24px; font-size: 0.8rem; color: var(--text-dim);
  text-align: center; font-style: italic; opacity: 0.7;
}
.subclass-confirm-btn   { min-width: 240px; padding: 14px 28px; font-size: 1rem; }

/* === Login card: character avatar === */
.user-card-avatar.has-char {
  width: 110px;
  height: 110px;
  background: transparent;
  border-radius: 0;
  overflow: visible;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  /* Keep the float effect */
  transform: translateY(-20px);
  box-shadow: none;
}
.user-card:hover .user-card-avatar.has-char {
  transform: translateY(-24px);
  box-shadow: none;
}
/* Adjust the elliptical shadow position for taller character avatars */
.user-card:has(.user-card-avatar.has-char)::before {
  top: 90px;
  width: 64px;
  height: 12px;
}

/* Login card: no-character placeholder (?) */
.user-card-avatar.no-char {
  background: rgba(255,255,255,0.06);
  border: 2px dashed rgba(255,255,255,0.18);
}
.no-char-glyph {
  font-size: 4rem;
  color: rgba(255,255,255,0.3);
  line-height: 1;
  user-select: none;
}

/* Party member card: show bonus icon + short name */
.party-member-bonus-row { display: flex; align-items: center; gap: 4px; justify-content: center; }
.party-member-bonus-icon { font-size: 0.9rem; }
.party-member-bonus-name { font-size: 0.68rem; color: var(--accent); font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════════════
   Number-picker flashcard training
   ═══════════════════════════════════════════════════════════════════════ */

.number-picker-view { padding: 0 8px; }

.picker-instructions {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-bottom: 20px;
}

.all-green-banner {
  margin-top: 12px;
  padding: 10px 20px;
  border-radius: 10px;
  background: rgba(52, 211, 153, 0.12);
  box-shadow: inset 0 0 0 1px rgba(52, 211, 153, 0.35);
  color: #34d399;
  font-weight: 600;
  font-size: 1rem;
  display: inline-block;
}

.number-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  max-width: 400px;
  margin: 0 auto;
}

.number-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-radius: 14px;
  padding: 18px 8px;
  border: none;
  cursor: pointer;
  transition: transform 0.12s, filter 0.12s;
  font-family: inherit;
}
.number-tile:active { transform: scale(0.93); }
.number-tile:hover  { filter: brightness(1.15); }

.number-tile-grey   { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.7); }
.number-tile-yellow { background: rgba(251,191,36,0.15); box-shadow: inset 0 0 0 1px rgba(251,191,36,0.5); color: #fbbf24; }
.number-tile-green  { background: rgba(52,211,153,0.15); box-shadow: inset 0 0 0 1px rgba(52,211,153,0.5); color: #34d399; }

.number-tile-value  { font-size: 1.7rem; font-weight: 800; line-height: 1; }
.number-tile-status { font-size: 0.85rem; font-weight: 600; min-height: 1em; }

/* Flashcard view */
.flashcard-view { padding: 0 8px; }

.flashcard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.fc-counter {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 600;
}
.fc-number-badge {
  background: var(--accent);
  color: #000;
  font-weight: 800;
  font-size: 1rem;
  padding: 4px 14px;
  border-radius: 999px;
}

.answer-reveal-card {
  background: rgba(96, 165, 250, 0.1);
  box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.3);
  border-radius: 12px;
  padding: 14px 20px;
  text-align: center;
  margin-bottom: 4px;
}
.answer-reveal-label {
  display: block;
  font-size: 0.75rem;
  color: #60a5fa;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 6px;
}
.answer-reveal-equation {
  font-size: 1.6rem;
  font-weight: 800;
  color: #60a5fa;
}

/* Compact overrides — keep everything visible without scrolling */
.flashcard-view .question-display {
  padding: 16px 24px;
  margin-bottom: 10px;
}
.flashcard-view .numpad-input { margin-top: 8px; }
.flashcard-view .numpad-display {
  padding: 8px;
  margin-bottom: 8px;
}
.flashcard-view .numpad-btn { padding: 10px 0; font-size: 1.3rem; }

/* Flashcard result screen */
.flashcard-result {
  text-align: center;
  padding: 48px 20px 32px;
}
.fc-result-icon {
  font-size: 4rem;
  font-weight: 900;
  line-height: 1;
  margin-bottom: 16px;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}
.fc-result-green {
  background: rgba(52, 211, 153, 0.15);
  box-shadow: inset 0 0 0 2px rgba(52, 211, 153, 0.5);
  color: #34d399;
}
.fc-result-yellow {
  background: rgba(251, 191, 36, 0.15);
  box-shadow: inset 0 0 0 2px rgba(251, 191, 36, 0.5);
  color: #fbbf24;
}
.party-subtitle { font-size: 0.8rem; color: var(--text-dim); margin: -8px 0 14px; font-style: italic; }

/* ── XP Float Animation ─────────────────────────────────────────── */
@keyframes xp-float-up {
    0%   { opacity: 1; transform: translateX(-50%) translateY(0); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-64px); }
}
.xp-float {
    position: fixed;
    pointer-events: none;
    font-size: 1rem;
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
    letter-spacing: 0.04em;
    text-shadow: 0 0 10px currentColor;
    animation: xp-float-up 1.2s ease-out forwards;
    z-index: 9999;
    white-space: nowrap;
}
.xp-float.xp-positive { color: #39ff14; }
.xp-float.xp-negative { color: #ff4466; }