:root{
  color-scheme:light;
  --navy-900:#1f2b44;
  --navy-800:#243a5e;
  --navy-700:#2c3b5c;
  --navy-500:#3d5279;
  --sky:#5b8def;
  --gold:#e8b84b;
  --gold-dark:#c99a2e;
  --mint:#3fbf8f;
  --mint-dark:#2e9873;
  --coral:#e8735f;
  --lilac:#8a7fd6;
  --bg:#eef2fa;
  --card:#ffffff;
  --ink:#1a2233;
  --warm-white:#f7f1e6;
  --warm-white-dim:#d9cfba;
  --muted:#697389;
  --line:#e2e7f0;
  --radius:14px;
  --shadow:0 6px 20px rgba(31,43,68,0.08);

  /* Warning/attention banner (class archived, time-limit exemptions, etc.)
     — a pink-to-gold gradient with dark-brown text. Kept as its own
     variable pair (rather than reusing --coral directly) so dark mode can
     swap in a muted equivalent instead of this glaring light-mode gradient. */
  --warn-banner-grad-start:#fde2e2;
  --warn-banner-grad-end:#fbd9b0;
  --warn-banner-text:#7a2f1f;
}

html{-webkit-text-size-adjust:100%;}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;touch-action:manipulation;}
body{
  color:var(--ink);
  font-family:"Segoe UI","Trebuchet MS",Verdana,sans-serif;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background-color:var(--bg);
  background-image:
    radial-gradient(circle at 6% 10%, rgba(91,141,239,0.10), transparent 40%),
    radial-gradient(circle at 96% 18%, rgba(232,184,75,0.14), transparent 40%),
    radial-gradient(circle at 90% 92%, rgba(63,191,143,0.10), transparent 40%);
  background-attachment:fixed;
}
.icon svg{width:100%;height:100%;display:block;}
h1,h2,h3,h4{
  font-family:"Trebuchet MS","Segoe UI",Verdana,sans-serif;
  font-weight:800;
  color:var(--navy-900);
  letter-spacing:-0.01em;
  margin:0 0 .4em 0;
}
a{color:var(--navy-700);}
p{color:var(--muted);line-height:1.5;}

.topbar{
  --navscale:1; /* set by fitTopbar() in icons.js after measuring real widths */
  background:linear-gradient(120deg,var(--navy-900) 0%,var(--navy-800) 55%,var(--navy-700) 100%);
  color:#fff;
  padding:12px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:calc(10px * var(--navscale));
  flex-wrap:nowrap;
  box-shadow:var(--shadow);
  position:sticky;
  top:0;
  z-index:50;
}
/* Nav sizing (brand text/icon, link text/icon, gaps, padding, logout button)
   is driven by the --navscale custom property instead of guessed
   breakpoints. Every size below is a base ("full size") value multiplied
   by var(--navscale) via calc(). fitTopbar() in icons.js measures the
   topbar's real available width against what the nav actually needs at
   scale 1, then sets --navscale to whatever value makes it fit exactly —
   recalculated on load, resize, and orientation change, so it responds to
   the genuine screen width rather than a fixed set of breakpoints. In
   portrait orientation, JS leaves --navscale at 1 and CSS instead switches
   to icon-only + allows wrapping (see the orientation:portrait block
   below), since shrinking text below a certain point stops being legible —
   dropping labels reads better than microscopic text. */
.brand{
  display:flex;
  align-items:center;
  gap:calc(6px * var(--navscale));
  font-weight:800;
  font-size:calc(1.15rem * var(--navscale));
  color:#fff;
  text-decoration:none;
  flex-shrink:0;
  white-space:nowrap;
}
.brand .coin, .brand .icon-slot{
  width:calc(24px * var(--navscale));
  height:calc(24px * var(--navscale));
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--gold);
  filter:drop-shadow(0 3px 6px rgba(232,184,75,0.35));
  flex-shrink:0;
}
.topbar nav{
  display:flex;
  flex-wrap:nowrap;
  gap:calc(6px * var(--navscale));
  align-items:center;
}
.topbar nav a{
  color:#cfd8ea;text-decoration:none;font-weight:600;
  font-size:calc(0.95rem * var(--navscale));
  display:inline-flex;align-items:center;
  gap:calc(6px * var(--navscale));
  padding:calc(8px * var(--navscale)) calc(10px * var(--navscale));
  border-radius:8px;
  min-height:calc(34px * var(--navscale));
  white-space:nowrap;
  flex-shrink:0;
}
.topbar nav a .icon{
  width:calc(17px * var(--navscale));
  height:calc(17px * var(--navscale));
  flex-shrink:0;
}
/* Applied by fitTopbar() one step BEFORE it gives up on labels: trims the
   padding and gaps around each link while leaving the text at a legible
   size, which is usually enough to keep a long nav labelled on a laptop
   screen instead of falling all the way back to icon-only. */
.topbar nav.nav-tight{gap:calc(3px * var(--navscale));}
.topbar nav.nav-tight a{
  padding:calc(7px * var(--navscale)) calc(6px * var(--navscale));
  gap:calc(4px * var(--navscale));
}

/* Applied by fitTopbar() when even the minimum legible text scale can't
   make the full-label row fit — drops to icon-only so the row still fits
   on one line rather than shrinking text past readability. */
.topbar nav.force-icons a .nav-label{display:none;}
.topbar nav.force-icons a{padding:calc(8px * var(--navscale));justify-content:center;}
.topbar nav a:hover{color:#fff;background:rgba(255,255,255,0.08);}
.topbar nav a.active{background:rgba(232,184,75,0.16);color:var(--gold);}
.topbar nav a.nav-locked{opacity:.4;cursor:not-allowed;}
.topbar nav a.nav-locked:hover{background:none;color:inherit;}

/* Quizzes/Reports are teacher-only nav items. Hidden by default (CSS,
   before any script runs) so a student never even sees them flash on
   screen while data.js is still figuring out who's logged in; JS only
   ever adds the "role-teacher" class to <html> once it confirms the
   user is a teacher, it never removes it, so students get no trace of
   these tabs at any point in the page load. */
.topbar nav a[href="quizzes.html"],
.topbar nav a[href="reports.html"]{display:none;}
html.role-teacher .topbar nav a[href="quizzes.html"],
html.role-teacher .topbar nav a[href="reports.html"]{display:inline-flex;}

/* Student profile modal */
#profileModal .card{max-width:680px;max-height:88vh;overflow:auto;}
#profileSubtitle{color:var(--muted);font-size:.9rem;margin:-6px 0 0;}
.profile-summary{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0 4px;}
.profile-chip{flex:1;min-width:140px;background:#f6f8fc;border:1.5px solid var(--line);border-radius:10px;padding:10px 14px;}
.profile-chip .label{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:800;margin-bottom:3px;}
.profile-chip .value{font-size:1.15rem;font-weight:800;color:var(--navy-900);line-height:1.25;}
.profile-chip .value .muted-small{font-weight:600;}
#profileBody h4{
  display:flex;align-items:center;gap:8px;
  margin:24px 0 10px;
  padding-top:20px;
  border-top:1.5px solid var(--line);
  font-size:.76rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:800;
}
#profileBody h4:first-of-type{margin-top:0;padding-top:0;border-top:none;}
#profileBody h4 .icon{color:var(--navy-700);flex-shrink:0;}
#profileBody .auto-row{margin-bottom:8px;}
#profileBody .auto-row:last-child{margin-bottom:0;}
.topbar .who{display:none;}

/* Wraps the settings icon + logout button so they scale and space
   themselves as one trailing block (see fitTopbar() in icons.js), and so
   the pair keeps the same left-margin the logout button used to carry on
   its own. */
.topbar-actions{
  display:flex;
  align-items:center;
  gap:calc(8px * var(--navscale));
  margin-left:calc(10px * var(--navscale));
  flex-shrink:0;
}
.btn-logout{
  background:rgba(255,255,255,0.08);color:#fff;border:none;border-radius:8px;
  padding:calc(8px * var(--navscale));
  font-weight:700;cursor:pointer;font-size:.85rem;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  flex-shrink:0;
  min-width:calc(34px * var(--navscale));
  min-height:calc(34px * var(--navscale));
}
.btn-logout .icon{
  width:calc(18px * var(--navscale));
  height:calc(18px * var(--navscale));
}
.btn-logout .nav-label{display:none;}
.btn-logout:hover{background:rgba(255,255,255,0.18);}

/* Settings icon button (topbar) — same footprint as the logout button so
   the pair scales together cleanly. */
.btn-icon-topbar{
  background:rgba(255,255,255,0.08);color:#fff;border:none;border-radius:8px;
  cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  flex-shrink:0;
  min-width:calc(34px * var(--navscale));
  min-height:calc(34px * var(--navscale));
  padding:calc(8px * var(--navscale));
  position:relative;
}
.btn-icon-topbar .icon{
  width:calc(18px * var(--navscale));
  height:calc(18px * var(--navscale));
}
.btn-icon-topbar:hover{background:rgba(255,255,255,0.18);}
.btn-icon-topbar.active{background:rgba(232,184,75,0.2);color:var(--gold);}

/* ---------------- Settings popover ---------------- */
.settings-popover{
  position:fixed;
  z-index:200;
  width:272px;
  max-width:calc(100vw - 24px);
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 18px 44px rgba(31,43,68,0.24);
  padding:16px 18px;
  animation:t29PopIn .16s ease;
}
.settings-popover.hidden{display:none;}
@keyframes t29PopIn{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:translateY(0);}}
.settings-popover-row{display:flex;align-items:center;justify-content:space-between;gap:14px;}
/* The label+description block beside each row's switch. settings-menu.js
   emits this class on every row but nothing ever styled it, so the block
   kept its default flex sizing and couldn't shrink below its content —
   enough to push the switch out of the popover's fixed 272px width on a
   long description. flex:1 lets it take the leftover space; min-width:0
   is what actually permits the text to wrap instead of overflowing. */
.settings-popover-text{flex:1;min-width:0;}
.settings-popover-row + .settings-popover-row{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);}
.settings-popover-title{font-weight:800;color:var(--navy-900);font-size:.92rem;line-height:1.3;}
.settings-popover-desc{color:var(--muted);font-size:.78rem;margin-top:3px;line-height:1.4;}
.settings-popover-heading{
  display:flex;align-items:center;gap:8px;
  font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;font-weight:800;
  color:var(--muted);margin-bottom:12px;
}
.settings-popover-heading .icon{color:var(--navy-700);width:15px;height:15px;}

.lg-switch{position:relative;display:inline-block;width:44px;height:26px;flex-shrink:0;}
.lg-switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;}
.lg-switch-track{
  position:absolute;inset:0;background:#d7dce6;border-radius:999px;
  transition:background .2s ease;pointer-events:none;
}
.lg-switch-thumb{
  position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
  background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.25);
  transition:transform .2s ease;
}
.lg-switch input:checked + .lg-switch-track{background:linear-gradient(135deg,var(--gold),var(--gold-dark));}
.lg-switch input:checked + .lg-switch-track .lg-switch-thumb{transform:translateX(18px);}
.lg-switch input:focus-visible + .lg-switch-track{outline:2px solid var(--gold);outline-offset:2px;}

main{
  flex:1;
  width:100%;
  max-width:1100px;
  margin:0 auto;
  padding:28px 20px 60px;
}

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:22px;
  margin-bottom:20px;
  transition:box-shadow .2s ease, transform .2s ease;
}
.card:hover{box-shadow:0 10px 28px rgba(31,43,68,0.12);}
.card h2{display:flex;align-items:center;gap:9px;}
.card h2 .icon{color:var(--navy-900);flex-shrink:0;}
.grid{display:grid;gap:20px;}
.grid-2{grid-template-columns:1fr 1fr;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
@media(max-width:800px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}}
@media(max-width:1000px) and (min-width:801px){.grid-4{grid-template-columns:repeat(2,1fr);}}

.stat{
  background:linear-gradient(135deg,var(--navy-900),var(--navy-700));
  color:#fff;
  border-radius:var(--radius);
  padding:20px;
  position:relative;
  overflow:hidden;
  box-shadow:0 8px 22px rgba(31,43,68,0.22);
}
.stat .icon{
  position:absolute;top:16px;right:16px;width:34px;height:34px;
  opacity:.9;color:rgba(255,255,255,0.85);
}
.stat.gold .icon, .stat.mint .icon{color:rgba(31,43,68,0.35);}
.stat .label{color:#a9b6d1;font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;font-weight:700;display:flex;align-items:center;gap:6px;}
.stat .value{font-size:2.1rem;font-weight:900;margin-top:6px;}
.stat.gold{background:linear-gradient(135deg,var(--gold),var(--gold-dark));color:var(--navy-900);box-shadow:0 8px 22px rgba(201,154,46,0.3);}
.stat.gold .label{color:#5a4415;}
.stat.mint{background:linear-gradient(135deg,var(--mint),var(--mint-dark));box-shadow:0 8px 22px rgba(46,152,115,0.3);}
.stat.sky{background:linear-gradient(135deg,var(--sky),#3a63c9);box-shadow:0 8px 22px rgba(91,141,239,0.3);}
.stat.lilac{background:linear-gradient(135deg,var(--lilac),#6a5fc0);box-shadow:0 8px 22px rgba(138,127,214,0.3);}

label{display:block;font-weight:700;font-size:.85rem;margin:12px 0 6px;color:var(--navy-900);}
input,select{
  width:100%;
  padding:12px 14px;
  border:1.5px solid var(--line);
  border-radius:8px;
  font-size:1rem;
  background:#fff;
  color:var(--ink);
  min-height:46px;
}
input:focus,select:focus{outline:2px solid var(--gold);border-color:var(--gold);}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  background:var(--navy-900);
  color:#fff;
  border:none;
  padding:12px 20px;
  min-height:44px;
  border-radius:9px;
  font-weight:700;
  font-size:.92rem;
  cursor:pointer;
  text-decoration:none;
  margin-top:14px;
  transition:transform .12s ease, background .15s ease, box-shadow .15s ease;
}
.btn .icon{width:16px;height:16px;flex-shrink:0;}
.btn:hover{background:var(--navy-700);transform:translateY(-1px);box-shadow:0 6px 14px rgba(31,43,68,0.25);}
.btn:active{transform:translateY(0);}
.btn.secondary{background:#fff;color:var(--navy-900);border:1.5px solid var(--navy-900);}
.btn.secondary:hover{background:var(--navy-900);color:#fff;}
.btn.gold{background:linear-gradient(135deg,var(--gold),var(--gold-dark));color:var(--navy-900);box-shadow:0 4px 12px rgba(201,154,46,0.3);}
.btn.gold:hover{box-shadow:0 8px 18px rgba(201,154,46,0.4);}
.btn.mint{background:linear-gradient(135deg,var(--mint),var(--mint-dark));color:#fff;box-shadow:0 4px 12px rgba(46,152,115,0.3);}
.btn.coral{background:linear-gradient(135deg,var(--coral),#c9503a);color:#fff;box-shadow:0 4px 12px rgba(232,115,95,0.3);}
.btn.small{padding:8px 14px;font-size:.8rem;margin-top:0;min-height:38px;}

table{width:100%;border-collapse:collapse;margin-top:10px;}
.table-scroll{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.table-scroll table{min-width:520px;}
th,td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--line);font-size:.9rem;}
th{color:var(--navy-700);text-transform:uppercase;font-size:.72rem;letter-spacing:.05em;}
tr:last-child td{border-bottom:none;}

.badge{
  display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:999px;
  font-size:.72rem;font-weight:800;letter-spacing:.02em;
}
.badge .icon{width:12px;height:12px;}
.badge.mint{background:#e3f8f0;color:#217a5a;}
.badge.coral{background:#fceae7;color:#b8402c;}
.badge.gold{background:#fbf1dd;color:#8a6112;}
.badge.navy{background:#e7ebf5;color:var(--navy-900);}
.badge.lilac{background:#efecfb;color:#5a4fb0;}

.ticker-up{color:#217a5a;font-weight:800;}
.ticker-down{color:#b8402c;font-weight:800;}

.auth-wrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 18% 22%, rgba(232,184,75,0.22), transparent 40%),
    radial-gradient(circle at 82% 15%, rgba(91,141,239,0.20), transparent 42%),
    radial-gradient(circle at 78% 85%, rgba(63,191,143,0.18), transparent 45%),
    linear-gradient(135deg,var(--navy-900) 0%,#233657 60%,var(--navy-700) 100%);
  padding:20px;
}
.auth-wrap::before, .auth-wrap::after{
  content:"$";
  position:absolute;
  font-family:"Trebuchet MS",sans-serif;
  font-weight:900;
  color:rgba(255,255,255,0.05);
  pointer-events:none;
}
.auth-wrap::before{font-size:22rem;top:-6rem;left:-4rem;transform:rotate(-12deg);}
.auth-wrap::after{font-size:16rem;bottom:-5rem;right:-3rem;transform:rotate(10deg);}
.auth-card{
  background:#fff;
  border-radius:20px;
  box-shadow:0 24px 70px rgba(0,0,0,0.4);
  padding:36px;
  width:100%;
  max-width:420px;
  position:relative;
  z-index:1;
  border-top:5px solid var(--gold);
}
.auth-logo{
  display:flex;align-items:center;gap:10px;justify-content:center;margin-bottom:6px;
}
.auth-logo .coin{
  width:48px;height:48px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  filter:drop-shadow(0 6px 12px rgba(201,154,46,0.45));
  color:var(--gold);
}
.auth-title{text-align:center;color:var(--muted);font-size:.95rem;margin-bottom:22px;}
.tabs{display:flex;gap:6px;background:var(--bg);border-radius:10px;padding:4px;margin-bottom:18px;}
.tabs button{
  flex:1;padding:9px;border:none;background:transparent;border-radius:8px;
  font-weight:700;color:var(--muted);cursor:pointer;font-size:.85rem;
}
.tabs button.active{background:var(--navy-900);color:#fff;box-shadow:0 4px 10px rgba(31,43,68,0.25);}
.tabs button{display:inline-flex;align-items:center;justify-content:center;gap:6px;}
.tabs.subtabs{background:#eef2fa;margin-top:2px;}
.icon-slot{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;}
label{display:flex;align-items:center;gap:6px;}
label .icon-slot{color:var(--navy-700);}
.error-msg{
  background:#fceae7;color:#b8402c;padding:10px 12px;border-radius:8px;
  font-size:.85rem;font-weight:600;margin-top:12px;
}
.success-msg{
  background:#e3f8f0;color:#217a5a;padding:10px 12px;border-radius:8px;
  font-size:.85rem;font-weight:600;margin-top:12px;
}
.hidden{display:none !important;}
.muted-small{color:var(--muted);font-size:.8rem;}

/* "Stroll down memory lane" read-only banner for archived classes — see
   applyArchivedReadOnlyLock() in data.js. */
.t29-archived-banner{
  position:sticky;top:0;z-index:60;text-align:center;
  background:linear-gradient(135deg,var(--warn-banner-grad-start),var(--warn-banner-grad-end));
  border-bottom:1.5px solid var(--coral);color:var(--warn-banner-text);
  padding:10px 18px;font-size:.85rem;font-weight:600;
}
.t29-archived-banner .icon{vertical-align:middle;margin-right:2px;}
.t29-archived-readonly main button:disabled,
.t29-archived-readonly main input:disabled,
.t29-archived-readonly main select:disabled,
.t29-archived-readonly main textarea:disabled{opacity:.45;cursor:not-allowed;}

/* Teacher Home — class picker rows (one class per line, full-width) */
.class-card-grid{display:flex;flex-direction:column;gap:14px;}
.class-card{
  border:1.5px solid var(--line);border-radius:14px;padding:26px 24px;
  background:#fff;cursor:pointer;transition:box-shadow .15s,transform .15s;
  display:flex;align-items:center;justify-content:space-between;
  gap:18px;flex-wrap:wrap;position:relative;
}
.class-card:hover{box-shadow:0 10px 24px rgba(31,43,68,0.12);transform:translateY(-2px);}
.class-card.archived{background:rgba(0,0,0,0.02);}
.class-card .class-card-main{display:flex;align-items:center;gap:22px;flex-wrap:wrap;flex:1;min-width:0;}
.class-card h3{margin:0;font-size:1.15rem;white-space:nowrap;display:flex;align-items:center;gap:8px;}
.class-card .class-card-meta{display:flex;flex-direction:row;gap:20px;color:var(--muted);font-size:.85rem;flex-wrap:wrap;}
.class-card .class-card-meta span{display:flex;align-items:center;gap:6px;white-space:nowrap;}
.class-card .class-card-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;}
.class-card .class-card-actions button{position:relative;z-index:2;}
.new-class-card{
  border:1.5px dashed var(--line);border-radius:14px;padding:26px 24px;
  display:flex;align-items:center;justify-content:center;
  gap:14px;flex-wrap:wrap;text-align:center;color:var(--muted);
  background:rgba(0,0,0,0.045);transition:box-shadow .15s,transform .15s;
}
.new-class-card:hover{box-shadow:0 10px 24px rgba(31,43,68,0.1);color:var(--navy-900);}
.flex-between{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;}
.student-avatar{
  width:38px;height:38px;border-radius:50%;
  background:linear-gradient(135deg,var(--navy-500),var(--navy-900));
  color:#fff;display:inline-flex;align-items:center;justify-content:center;
  font-weight:800;font-size:.85rem;margin-right:10px;flex-shrink:0;
  box-shadow:0 3px 8px rgba(31,43,68,0.25);
}
.student-avatar.c1{background:linear-gradient(135deg,var(--sky),#3a63c9);}
.student-avatar.c2{background:linear-gradient(135deg,var(--mint),var(--mint-dark));}
.student-avatar.c3{background:linear-gradient(135deg,var(--gold),var(--gold-dark));}
.student-avatar.c4{background:linear-gradient(135deg,var(--lilac),#6a5fc0);}
.student-avatar.c5{background:linear-gradient(135deg,var(--coral),#c9503a);}
.row-flex{display:flex;align-items:center;}
.footer-note{text-align:center;color:var(--muted);font-size:.78rem;padding:24px;display:flex;align-items:center;justify-content:center;gap:8px;}
.footer-note .icon{width:14px;height:14px;opacity:.6;}
.class-code-pill{
  display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(135deg,var(--navy-900),var(--navy-700));color:var(--gold);
  font-weight:900;letter-spacing:.12em;padding:9px 18px;border-radius:9px;font-size:1.1rem;
  box-shadow:0 6px 16px rgba(31,43,68,0.25);
}
.company-card{border:1.5px solid var(--line);border-radius:12px;padding:16px;position:relative;overflow:hidden;}
.company-card::before{
  content:"";position:absolute;top:-30px;right:-30px;width:100px;height:100px;border-radius:50%;
  background:radial-gradient(circle,rgba(232,184,75,0.14),transparent 70%);
}
.company-card h4{margin-bottom:2px;display:flex;align-items:center;gap:8px;}
.company-card h4 .icon{color:var(--navy-700);width:20px;height:20px;}
.progress-bar{height:7px;background:var(--line);border-radius:5px;overflow:hidden;margin-top:10px;}
.progress-bar > div{height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-dark));border-radius:5px;transition:width .3s ease;}

/* ---------------- Password visibility toggle ---------------- */
.pw-wrap{position:relative;}
.pw-wrap input{padding-right:46px;}
.pw-toggle{
  position:absolute;top:50%;right:6px;transform:translateY(-50%);
  background:none;border:none;cursor:pointer;
  width:36px;height:36px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  color:var(--muted);
}
.pw-toggle:hover{background:var(--bg);color:var(--navy-900);}
.pw-toggle .icon{width:18px;height:18px;}

/* ---------------- Remember-me row ---------------- */
.remember-row{display:flex;align-items:center;gap:8px;margin-top:14px;}
.remember-row input[type="checkbox"]{width:18px;height:18px;min-height:auto;flex-shrink:0;accent-color:var(--navy-900);}
.remember-row label{margin:0;font-weight:600;color:var(--muted);font-size:.85rem;}

/* ---------------- Leaderboard ---------------- */
.leaderboard-row{
  display:flex;align-items:center;gap:12px;
  padding:12px 10px;border-radius:10px;
  border-bottom:1px solid var(--line);
}
.leaderboard-row:last-child{border-bottom:none;}
.leaderboard-row.me{background:#fbf1dd;}
.rank-pill{
  width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:.85rem;color:#fff;background:var(--navy-500);flex-shrink:0;
}
.rank-pill.gold{background:linear-gradient(135deg,var(--gold),var(--gold-dark));color:var(--navy-900);}
.rank-pill.silver{background:linear-gradient(135deg,#cfd6e4,#9aa6bd);color:var(--navy-900);}
.rank-pill.bronze{background:linear-gradient(135deg,#d9a066,#a9713f);color:#fff;}
.leaderboard-name{flex:1;font-weight:700;}
.leaderboard-sub{font-size:.78rem;color:var(--muted);}
.leaderboard-net{font-weight:900;font-size:1.05rem;color:var(--navy-900);}

/* ---------------- Job listing cards ---------------- */
.job-card{border:1.5px solid var(--line);border-radius:12px;padding:16px;margin-bottom:14px;transition:box-shadow .15s ease;}
.job-card:hover{box-shadow:0 8px 20px rgba(31,43,68,0.1);}
.job-card h4{display:flex;align-items:center;gap:8px;margin-bottom:4px;}
.job-card h4 .icon{color:var(--navy-700);}
.status-pending{color:var(--gold-dark);font-weight:800;}
.status-approved{color:#217a5a;font-weight:800;}
.status-declined{color:#b8402c;font-weight:800;}

/* ---------------- Automations list ---------------- */
.auto-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px;border:1.5px solid var(--line);border-radius:10px;margin-bottom:10px;flex-wrap:wrap;
}
.auto-details{font-size:.88rem;}
.auto-details strong{color:var(--navy-900);}

/* ==================================================================
   Responsive breakpoints — tablet and phone
================================================================== */
@media (max-width: 900px){
  main{padding:22px 16px 50px;}
  .stat .value{font-size:1.7rem;}
  .auth-card{padding:28px 22px;}
}

/* Portrait orientation (phones and tablets held upright) — always show
   icon-only nav, regardless of width. The row is allowed to wrap onto a
   second line if it doesn't all fit, but must never overflow sideways:
   flex-wrap:wrap plus a hard max-width:100vw + overflow-x:hidden on the
   topbar keeps everything on-screen, just taller instead of wider. */
@media (orientation: portrait){
  .topbar{
    flex-wrap:wrap;
    max-width:100vw;
    overflow-x:hidden;
    row-gap:6px;
  }
  .topbar nav{
    flex-wrap:wrap;
    row-gap:6px;
    max-width:100%;
  }
  .topbar nav a .nav-label{display:none;}
  .topbar nav a{
    padding:9px;
    min-width:38px;
    justify-content:center;
    font-size:.85rem;
  }
  .topbar nav a .icon{width:17px;height:17px;}
}

@media (max-width: 640px){
  .topbar{padding:10px 14px;}
  .brand{font-size:1.19rem;}
  h1{font-size:1.4rem;}
  h2{font-size:1.1rem;}
  .card{padding:16px;}
  .grid{gap:14px;}
  .stat{padding:16px;}
  .stat .value{font-size:1.5rem;}
  .company-card .row-flex svg{width:90px;}
  .class-card{flex-direction:column;align-items:stretch;}
  .class-card .class-card-main{flex-direction:column;align-items:flex-start;gap:10px;}
  .class-card .class-card-actions{justify-content:flex-start;}
}

@media (max-width: 420px){
  .auth-card{padding:22px 16px;}
  .class-code-pill{font-size:.95rem;padding:8px 12px;}
}

/* Landscape phones/tablets specifically (short viewport height, regardless
   of width) — keep the topbar compact and NEVER let it scroll sideways.
   Now that the "who" name is gone for good and the logout button is
   icon-only for good, there's enough room that the row can just wrap onto
   a second line (flex-wrap:wrap) if a device is unusually narrow, instead
   of relying on horizontal scroll. Gated on orientation so this never
   fires for portrait mode or normal desktop/laptop screens. */
/* Landscape phones under 1000px wide — the clamp() above floors at its
   1000px-anchored minimum here, but that's still text+icon; below ~560px
   wide even the tiniest text nav won't hold 13 labels on one line without
   the row overflowing sideways, so fall back to icon-only so it reliably
   stays on one row without horizontal scroll. */
@media (orientation: landscape) and (max-width: 560px){
  .topbar nav a{padding:6px;min-width:30px;justify-content:center;}
  .topbar nav a .nav-label{display:none;}
  .topbar nav a .icon{width:15px;height:15px;}
}

/* ---------------- Random event popup ---------------- */
.anw-modal-overlay{
  position:fixed;inset:0;background:rgba(31,43,68,0.55);
  display:flex;align-items:center;justify-content:center;
  z-index:1000;padding:20px;
}
.anw-modal-card{
  background:#fff;border-radius:18px;padding:26px;max-width:420px;width:100%;
  box-shadow:0 24px 60px rgba(0,0,0,0.35);border-top:5px solid var(--gold);
  max-height:85vh;overflow-y:auto;
}
.anw-event-row{
  display:flex;align-items:center;gap:12px;
  padding:10px 4px;border-bottom:1px solid var(--line);
}
.anw-event-row:last-of-type{border-bottom:none;}
.anw-event-name{font-weight:800;color:var(--navy-900);}

/* ---------------- Roulette number grid ----------------
   Laid out horizontally like a real roulette table: 12 columns, 3 numbers
   stacked in each column (1,2,3 in column 1; 4,5,6 in column 2; etc).
   grid-auto-flow:column fills top-to-bottom then moves to the next column,
   which lines up exactly with rouletteRowCol/isValidStreet/isValidCorner/
   isValidSixLine in data.js (row = ceil(n/3) = column index here, col =
   (n-1)%3+1 = position within the column) — so visually-adjacent cells are
   always valid bets. */
.number-table-wrap{
  display:flex;gap:6px;align-items:stretch;justify-content:flex-start;
  overflow-x:auto;padding-bottom:6px;max-width:100%;
}
.number-zero{
  width:38px;flex-shrink:0;border:1.5px solid var(--line);border-radius:6px;
  background:#e3f8f0;font-weight:800;font-size:.85rem;cursor:pointer;
  color:var(--navy-900);display:flex;align-items:center;justify-content:center;
}
.number-zero.selected{background:var(--gold);border-color:var(--gold-dark);}
.number-grid{
  display:grid;grid-template-rows:repeat(3,1fr);grid-auto-flow:column;
  grid-auto-columns:38px;gap:4px;
}
.number-cell{
  width:38px;height:38px;border:1.5px solid var(--line);border-radius:6px;background:#fff;
  font-weight:800;font-size:.85rem;cursor:pointer;color:var(--navy-900);
  display:flex;align-items:center;justify-content:center;padding:0;min-height:0;flex-shrink:0;
}
.number-cell.zero{background:#e3f8f0;}
.number-cell.selected{background:var(--gold);border-color:var(--gold-dark);color:var(--navy-900);}
@media(max-width:640px){.number-zero,.number-cell{width:30px;height:30px;font-size:.75rem;}.number-grid{grid-auto-columns:30px;}}

/* ---------------- Roulette wheel spin animation ---------------- */
/* width and height are set with the same min() expression so the stage
   is always a perfect square on any screen — previously only width had
   max-width:100%, so on narrow phones the box got squashed into an oval
   (width shrunk, height stayed fixed at 392px) even though the spin
   animation itself (a plain rotation) still looked like a circle. */
.wheel-stage{position:relative;width:min(392px, 88vw);height:min(392px, 88vw);margin:24px auto 8px;}
.wheel-rim{
  position:absolute;inset:0;border-radius:50%;
  background:linear-gradient(135deg,var(--gold),var(--gold-dark));
  box-shadow:0 17px 44px rgba(31,43,68,0.4);padding:15px;
}
.wheel-disc{
  position:relative;width:100%;height:100%;border-radius:50%;overflow:hidden;
  box-shadow:inset 0 0 34px rgba(0,0,0,0.55), inset 0 0 4px rgba(255,255,255,0.4);
  transition:transform 15s cubic-bezier(0.11,0.68,0.24,1);
  transform:rotate(0deg);
}
.wheel-number{
  position:absolute;top:50%;left:50%;width:34px;height:34px;margin:-17px;
  border-radius:6px;display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:800;color:#fff;font-family:"Trebuchet MS",sans-serif;
  text-shadow:0 1px 2px rgba(0,0,0,0.5);
}
.wheel-hub{
  position:absolute;top:50%;left:50%;width:53px;height:53px;margin:-27px;
  border-radius:50%;z-index:5;
  background:radial-gradient(circle at 35% 32%, #fff, #cfd6e4 55%, #8a94ab 100%);
  box-shadow:0 6px 16px rgba(0,0,0,0.45);
}
.wheel-ball-track{
  position:absolute;inset:22px;border-radius:50%;pointer-events:none;
  transition:transform 15s cubic-bezier(0.08,0.72,0.2,1);
  transform:rotate(0deg);z-index:4;
}
.wheel-ball{
  position:absolute;top:3px;left:50%;width:15px;height:15px;margin-left:-7.5px;
  border-radius:50%;background:radial-gradient(circle at 35% 30%, #fff, #d8d8d8 70%, #999);
  box-shadow:0 3px 7px rgba(0,0,0,0.55);
}
#wheelStatus{text-align:center;margin-top:8px;}

@media (max-width: 445px){
  /* Everything below this width has the wheel itself shrinking via
     width:min(392px,88vw) — these fixed-px child elements (which don't
     scale with a percentage) get a proportional trim too, so numbers,
     the hub, and the ball stay sensibly sized on the smaller wheel
     instead of looking oversized relative to it. */
  .wheel-number{width:26px;height:26px;margin:-13px;font-size:10px;}
  .wheel-hub{width:40px;height:40px;margin:-20px;}
  .wheel-ball-track{inset:16px;}
  .wheel-ball{width:11px;height:11px;margin-left:-5.5px;}
}

/* ===================== Floating balance widget ===================== */
.anw-balance-widget{
  position:fixed;
  left:14px;
  top:80px;
  z-index:45;
  min-width:150px;
  background:linear-gradient(135deg,var(--gold),var(--gold-dark));
  color:var(--navy-900);
  border-radius:var(--radius);
  padding:14px 18px;
  box-shadow:0 8px 22px rgba(201,154,46,0.35);
}
.anw-balance-widget .anw-bw-label{
  color:#5a4415;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;font-weight:700;
  display:flex;align-items:center;gap:6px;
}
.anw-balance-widget .anw-bw-value{font-size:1.7rem;font-weight:900;margin-top:4px;line-height:1.1;}
@media (max-width:640px){
  .anw-balance-widget{left:10px;top:auto;bottom:14px;padding:10px 14px;min-width:130px;}
  .anw-balance-widget .anw-bw-value{font-size:1.4rem;}
}

/* ===================== Reports (report cards) ===================== */
.rpt-bar-row{display:flex;align-items:center;gap:10px;margin-bottom:7px;}
.rpt-bar-label{flex:0 0 150px;font-size:.85rem;color:var(--navy-900);font-weight:600;}
.rpt-bar-track{flex:1;height:14px;background:#eef1f7;border-radius:8px;overflow:hidden;}
.rpt-bar-fill{height:100%;border-radius:8px;min-width:3px;}
.rpt-bar-fill.gold{background:linear-gradient(90deg,var(--gold),var(--gold-dark));}
.rpt-bar-fill.mint{background:linear-gradient(90deg,var(--mint),var(--mint-dark));}
.rpt-bar-fill.coral{background:linear-gradient(90deg,var(--coral),#c9503a);}
.rpt-bar-amount{flex:0 0 auto;font-size:.85rem;font-weight:800;color:var(--navy-900);min-width:64px;text-align:right;}
@media (max-width:640px){
  .rpt-bar-label{flex-basis:100px;font-size:.78rem;}
  .rpt-bar-amount{min-width:54px;font-size:.78rem;}
}


/* ===================== Notifications (bell + activity panel) =====================
   The bell is a .btn-icon-topbar like the gear, so it inherits the top
   bar's --navscale sizing for free and fitTopbar() measures it as part of
   the trailing actions block — which is what keeps the nav on one line
   with the bell present. Everything below is just the unread dot and the
   dropdown panel it opens.
============================================================================== */
.notif-bell{position:relative;}
.notif-dot{
  position:absolute;top:-4px;right:-4px;
  min-width:17px;height:17px;padding:0 4px;
  border-radius:9px;
  background:linear-gradient(135deg,var(--coral),#c9503a);
  color:#fff;font-size:.63rem;font-weight:900;line-height:17px;text-align:center;
  box-shadow:0 2px 6px rgba(200,60,40,.5);
  border:1.5px solid var(--navy-900);
  pointer-events:none;
}

.notif-panel{
  position:fixed;
  /* Matches .settings-popover deliberately: in sidebar-nav mode the rail
     is z-index 90 on desktop and the mobile drawer runs 130-140, so
     anything lower than this gets covered by the very bar the bell lives
     in. Both popovers open from .topbar-actions, so both need to clear it. */
  z-index:200;
  width:min(380px, calc(100vw - 20px));
  background:var(--card);
  border:1.5px solid var(--line);
  border-radius:16px;
  box-shadow:0 20px 50px rgba(31,43,68,.28);
  overflow:hidden;
  display:flex;flex-direction:column;
  max-height:min(560px, calc(100vh - 90px));
}
.notif-panel.hidden{display:none;}
.notif-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:13px 16px;
  border-bottom:1.5px solid var(--line);
  background:linear-gradient(120deg,var(--navy-900),var(--navy-700));
  color:#fff;
}
.notif-head-title{
  display:flex;align-items:center;gap:8px;
  font-weight:800;font-size:.95rem;letter-spacing:.01em;
}
.notif-head-title .icon{color:var(--gold);}
.notif-markread{
  background:rgba(255,255,255,.12);color:#fff;border:none;
  border-radius:7px;padding:5px 10px;
  font:inherit;font-size:.72rem;font-weight:700;cursor:pointer;
}
.notif-markread:hover{background:rgba(255,255,255,.24);}

.notif-list{overflow-y:auto;-webkit-overflow-scrolling:touch;flex:1;}
.notif-row{
  display:flex;align-items:flex-start;gap:11px;
  padding:12px 16px;
  border-bottom:1px solid var(--line);
  text-decoration:none;color:inherit;
  position:relative;
}
.notif-row:last-child{border-bottom:none;}
a.notif-row:hover{background:#f6f8fc;}
.notif-row.unread{background:#fbfaf3;}
a.notif-row.unread:hover{background:#f7f3e6;}
/* A left rail marks the two things worth distinguishing at a glance:
   gold = unread, coral = something the student actually has to act on. */
.notif-row.unread::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--gold);
}
.notif-row.action::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--coral);
}
.notif-ic{
  width:30px;height:30px;flex-shrink:0;
  border-radius:9px;
  display:inline-flex;align-items:center;justify-content:center;
  margin-top:1px;
}
.notif-ic .icon{width:15px;height:15px;}
.notif-ic.mint{background:#e3f8f0;color:#217a5a;}
.notif-ic.coral{background:#fceae7;color:#b8402c;}
.notif-ic.gold{background:#fbf1dd;color:#8a6112;}
.notif-ic.navy{background:#e7ebf5;color:var(--navy-900);}
.notif-ic.lilac{background:#efecfb;color:#5a4fb0;}
.notif-body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;}
.notif-title{font-weight:800;font-size:.86rem;color:var(--navy-900);line-height:1.3;}
.notif-sub{font-size:.78rem;color:var(--muted);line-height:1.4;}
.notif-time{font-size:.69rem;color:#9aa4b8;font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-top:2px;}
.notif-row.action .notif-time{color:#b8402c;}
.notif-showmore{
  display:block;width:100%;
  padding:11px 16px;
  border:none;border-top:1px solid var(--line);
  background:#f6f8fc;color:var(--navy-700);
  font:inherit;font-size:.78rem;font-weight:700;
  text-align:center;cursor:pointer;
}
.notif-showmore:hover{background:#eef1f8;}
.notif-empty{padding:34px 22px;text-align:center;color:var(--muted);}
.notif-empty .icon{color:var(--line);margin-bottom:8px;}
.notif-empty p{margin:0 0 4px;}
.notif-foot{
  padding:10px 16px;border-top:1.5px solid var(--line);background:#f6f8fc;text-align:center;
}
.notif-foot a{font-size:.78rem;font-weight:700;color:var(--navy-700);text-decoration:none;}
.notif-foot a:hover{text-decoration:underline;}

@media (max-width:480px){
  .notif-panel{width:calc(100vw - 16px);max-height:calc(100vh - 76px);}
}

/* ===================== Quizzes ===================== */
.quiz-card{
  border:1.5px solid var(--line);border-radius:14px;padding:18px 20px;margin-bottom:16px;
  transition:box-shadow .15s ease;background:var(--card);
}
.quiz-card:hover{box-shadow:0 8px 20px rgba(31,43,68,.09);}
.quiz-card.passed{border-color:#9fdcc4;background:linear-gradient(180deg,#f4fcf8,var(--card) 60%);}
.quiz-card.locking{border-color:#f0c3b8;}
.quiz-card h3{display:flex;align-items:center;gap:9px;margin:0 0 4px;font-size:1.08rem;}
.quiz-card h3 .icon{color:var(--navy-700);flex-shrink:0;}
.quiz-meta{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 4px;}
.quiz-pill{
  display:inline-flex;align-items:center;gap:5px;
  background:#f2f5fb;border:1px solid var(--line);border-radius:999px;
  padding:4px 11px;font-size:.74rem;font-weight:700;color:var(--navy-700);
}
.quiz-pill .icon{width:12px;height:12px;}
.quiz-pill.mint{background:#e3f8f0;border-color:#bfe9d8;color:#217a5a;}
.quiz-pill.coral{background:#fceae7;border-color:#f3ccc3;color:#b8402c;}
.quiz-pill.gold{background:#fbf1dd;border-color:#eddcb4;color:#8a6112;}

.quiz-question{
  border:1.5px solid var(--line);border-radius:12px;padding:16px 18px;margin-bottom:14px;
  background:#fbfcfe;
}
.quiz-question .qtext{font-weight:800;color:var(--navy-900);margin:0 0 12px;line-height:1.4;}
.quiz-option{
  display:flex;align-items:flex-start;gap:10px;
  padding:10px 12px;border:1.5px solid var(--line);border-radius:10px;
  background:var(--card);margin-bottom:8px;cursor:pointer;
  transition:border-color .12s ease, background .12s ease;
}
.quiz-option:last-child{margin-bottom:0;}
.quiz-option:hover{border-color:var(--navy-500);}
.quiz-option input{width:18px;height:18px;min-height:auto;flex-shrink:0;margin:1px 0 0;accent-color:var(--navy-900);}
.quiz-option span{font-size:.92rem;line-height:1.4;}
.quiz-option.chosen{border-color:var(--navy-900);background:#f2f5fb;}
.quiz-option.right{border-color:var(--mint);background:#e9f9f2;}
.quiz-option.wrong{border-color:var(--coral);background:#fdeeeb;}
.quiz-explain{
  margin:10px 0 0;padding:10px 12px;border-radius:9px;
  background:#f2f5fb;border-left:3px solid var(--navy-500);
  font-size:.83rem;color:var(--navy-900);line-height:1.5;
}
.quiz-score{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:16px 20px;border-radius:14px;margin-bottom:18px;
}
.quiz-score.pass{background:linear-gradient(135deg,var(--mint),var(--mint-dark));color:#fff;box-shadow:0 8px 22px rgba(46,152,115,.28);}
.quiz-score.fail{background:linear-gradient(135deg,var(--coral),#c9503a);color:#fff;box-shadow:0 8px 22px rgba(232,115,95,.28);}
.quiz-score .big{font-size:2rem;font-weight:900;line-height:1;}
.quiz-score .txt{font-weight:700;line-height:1.4;}

/* Teacher-side question builder rows */
.qb-question{
  border:1.5px solid var(--line);border-radius:12px;padding:16px 18px;margin-bottom:14px;background:rgba(0,0,0,.012);
}
.qb-question .qb-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px;}
.qb-question .qb-num{font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);}
.qb-opt-row{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.qb-opt-row input[type="radio"]{width:18px;height:18px;min-height:auto;flex-shrink:0;accent-color:var(--mint-dark);}
.qb-opt-row input[type="text"]{margin:0;flex:1;}
.qb-opt-row .qb-del{flex-shrink:0;}
.qb-hint{font-size:.74rem;color:var(--muted);margin:0 0 10px;}

/* Student dashboard greeting + its report-card shortcut. Reports left the
   student nav (it's teacher-only chrome there now), so it lives here as a
   small button next to the student's own name instead. */
.greeting-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:.4em;}
.greeting-row h1{margin:0;}
.greeting-row .btn{margin-top:0;}

/* ---------------- Report card section headings ----------------
   The report is a stack of sections (net worth breakdown, income, spend,
   loans) that ran together visually because these headings only had the
   global 0.4em bottom margin and nothing above them — the last row of one
   table sat almost flush against the next heading. Give each one real
   breathing room above, plus a hairline rule, so the eye can find the
   start of a section at a glance. Matches the treatment #profileBody h4
   already uses in the teacher's student profile. */
.report-print-area h3,
.report-print-area h4{
  margin:34px 0 14px;
  padding-top:20px;
  border-top:1.5px solid var(--line);
  display:flex;align-items:center;gap:9px;
}
.report-print-area h3{font-size:1.05rem;}
.report-print-area h4{font-size:.95rem;}
.report-print-area h3 .icon,
.report-print-area h4 .icon{color:var(--navy-700);flex-shrink:0;}
/* The first heading in a report follows the summary chips, which already
   provide the separation — a rule there would just look like a stray line. */
.report-print-area > h3:first-child,
.report-print-area > h4:first-child{margin-top:6px;padding-top:0;border-top:none;}
/* Tables and bar charts get a little room under them too, so the gap above
   the next heading reads as deliberate rather than as a collapsed margin. */
.report-print-area .table-scroll,
.report-print-area .rpt-bar-row:last-of-type{margin-bottom:6px;}

/* ---------------- Quiz gate popup (quiz-gate.js) ----------------
   Reuses the .quiz-* question/option/score styling above inside the
   standard .anw-modal-overlay used by the event popups, so a gated module
   feels like the rest of the app rather than a separate page. Wider and
   taller than an event popup because it has to hold a whole quiz. */
.qg-card{max-width:600px;border-top-color:var(--navy-700);}
.qg-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:6px;}
.qg-kicker{
  display:flex;align-items:center;gap:6px;margin:0 0 4px;
  font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--coral);
}
.qg-kicker .icon{width:12px;height:12px;}
.qg-title{margin:0;font-size:1.2rem;color:var(--navy-900);}
.qg-desc{margin:4px 0 0;font-size:.86rem;color:var(--muted);line-height:1.45;}
.qg-meta{
  margin:10px 0 16px;padding:9px 12px;border-radius:9px;
  background:#f2f5fb;font-size:.79rem;font-weight:700;color:var(--navy-700);
}
.qg-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px;}

/* ===================== Peer-to-peer marketplace ===================== */
.mkt-toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:16px;}
.mkt-filter{
  border:1.5px solid var(--line);background:var(--card);border-radius:999px;
  padding:7px 15px;font:inherit;font-size:.82rem;font-weight:700;color:var(--navy-700);cursor:pointer;
}
.mkt-filter:hover{border-color:var(--navy-500);}
.mkt-filter.active{background:var(--navy-900);border-color:var(--navy-900);color:#fff;}

.mkt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:16px;}
.mkt-listing{
  border:1.5px solid var(--line);border-radius:14px;padding:16px 18px;background:var(--card);
  display:flex;flex-direction:column;gap:2px;position:relative;overflow:hidden;
  transition:box-shadow .15s ease;
}
.mkt-listing:hover{box-shadow:0 10px 24px rgba(31,43,68,.1);}
.mkt-listing.mine{border-color:#eddcb4;background:linear-gradient(180deg,#fffdf6,var(--card) 55%);}
.mkt-listing h4{display:flex;align-items:center;gap:8px;margin:0 0 4px;font-size:1.02rem;}
.mkt-listing h4 .icon{color:var(--navy-700);flex-shrink:0;}
.mkt-listing .mkt-desc{font-size:.83rem;color:var(--muted);margin:0 0 8px;line-height:1.45;}
.mkt-price{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin:4px 0 10px;}
.mkt-price .now{font-size:1.45rem;font-weight:900;color:var(--navy-900);line-height:1;}
.mkt-price .ref{font-size:.76rem;color:var(--muted);font-weight:700;}
.mkt-seller{
  display:flex;align-items:center;gap:8px;font-size:.78rem;color:var(--muted);font-weight:700;
  margin-bottom:10px;
}
.mkt-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;}
.mkt-offer-list{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line);}
.mkt-offer{
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding:8px 0;border-bottom:1px solid var(--line);
}
.mkt-offer:last-child{border-bottom:none;}
.mkt-offer-amt{font-weight:900;color:var(--navy-900);}
.mkt-offer-note{font-size:.78rem;color:var(--muted);width:100%;}
.mkt-sell-row{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  border:1.5px solid var(--line);border-radius:12px;padding:13px 16px;margin-bottom:10px;
}
.mkt-sell-row .grow{flex:1;min-width:170px;}
.mkt-sell-row .mkt-sell-name{font-weight:800;color:var(--navy-900);}
.mkt-sell-row input[type="number"],.mkt-sell-row input[type="text"]{margin:0;min-width:110px;}
.mkt-band{font-size:.74rem;color:var(--muted);font-weight:700;}
.mkt-status{
  display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:3px 10px;
  font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;
}
.mkt-status.active{background:#e3f8f0;color:#217a5a;}
.mkt-status.pending{background:#fbf1dd;color:#8a6112;}
.mkt-status.sold{background:#e7ebf5;color:var(--navy-900);}
.mkt-status.cancelled,.mkt-status.rejected{background:#fceae7;color:#b8402c;}

/* ---------------- Budgeting tool (bank.js) ----------------
   The planner is the one card on the Bank page a student is meant to
   stop and think at, so it gets a gold spine down the top edge to set it
   apart from the transactional cards below it. Everything else here is
   the same tokens the rest of the app uses. Extra top margin (on top of
   the standard .card gap) keeps it visually separate from whatever sits
   above it, since it's its own section rather than another card in the
   same flow. */
.budget-card{
  position:relative;overflow:hidden;
  border-color:#dfe5f1;
  margin-top:32px;
}
.budget-card::before{
  content:"";position:absolute;left:0;right:0;top:0;height:4px;
  background:linear-gradient(90deg,var(--coral),var(--gold) 45%,var(--mint));
}
.bud-week{
  font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;
  color:var(--muted);background:#f2f5fb;border:1px solid var(--line);
  border-radius:999px;padding:5px 12px;white-space:nowrap;
}

/* Planner on the left, the costs they can't avoid on the right — side by
   side on purpose, so the number they're planning against is never off
   screen while they type. */
/* Used by bigevents.html's "takes an asset" row and life.js's "give to
   student" row, both of which set align-items/gap/flex-wrap inline but
   relied on this class for the display mode itself — which was never
   defined anywhere, so those rows stacked vertically and their inline
   flex properties did nothing. */
.flex-row{display:flex;}

.bud-layout{display:grid;grid-template-columns:1.35fr 1fr;gap:22px;margin-top:16px;align-items:start;}
@media(max-width:900px){.bud-layout{grid-template-columns:1fr;}}

.bud-money-field{position:relative;}
.bud-money-field .bud-currency{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  font-weight:800;color:var(--muted);pointer-events:none;font-size:1rem;
}
.bud-money-field input{padding-left:30px;font-weight:800;}

/* One category (Needs / Wants / Savings). The tone colour lives on the
   left edge and the icon chip so the three read as a set at a glance. */
.bud-cat{
  border:1.5px solid var(--line);border-left:5px solid var(--line);
  border-radius:10px;padding:13px 14px;margin-top:12px;background:#fcfdff;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.bud-cat:focus-within{box-shadow:0 4px 16px rgba(31,43,68,0.10);}
.bud-cat.needs{border-left-color:var(--coral);}
.bud-cat.wants{border-left-color:var(--gold);}
.bud-cat.savings{border-left-color:var(--mint);}
.bud-cat-head{display:flex;align-items:flex-start;gap:11px;}
.bud-cat-icon{
  width:34px;height:34px;flex-shrink:0;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
}
.bud-cat-icon .icon{width:17px;height:17px;}
.bud-cat.needs .bud-cat-icon{background:#fceae7;color:#b8402c;}
.bud-cat.wants .bud-cat-icon{background:#fbf1dd;color:#8a6112;}
.bud-cat.savings .bud-cat-icon{background:#e3f8f0;color:#217a5a;}
.bud-cat-name{font-weight:800;color:var(--navy-900);font-size:.95rem;line-height:1.3;}
.bud-cat-blurb{color:var(--muted);font-size:.76rem;line-height:1.45;margin-top:2px;}
.bud-cat-text{min-width:0;flex:1;}

.bud-cat-input{display:flex;align-items:center;gap:10px;margin-top:11px;}
.bud-cat-input .bud-money-field{flex:1;}
.bud-cat-input input{min-height:42px;}
.bud-cat-pct{
  flex:0 0 auto;min-width:74px;text-align:right;
  font-size:.78rem;font-weight:800;color:var(--muted);
}
.bud-cat-hint{
  display:flex;align-items:flex-start;gap:6px;margin-top:8px;
  font-size:.74rem;line-height:1.4;color:var(--muted);font-style:italic;
}
.bud-cat-hint .icon{width:12px;height:12px;flex-shrink:0;margin-top:1px;}

/* The live split bar: one glance at how the three categories (plus
   whatever's still unallocated) divide up the week's money. Segments are
   sized against whichever is bigger, income or what's been typed in, so an
   over-allocated plan still shows honest relative proportions instead of
   silently clipping at 100% — the numbers in .bud-total right above it are
   what call out "over", the bar is purely about shape. */
.bud-split-wrap{margin-top:14px;}
.bud-split-bar{
  display:flex;height:15px;border-radius:8px;overflow:hidden;
  background:#eef1f7;border:1.5px solid var(--line);transition:border-color .18s ease;
}
.bud-split-bar.over{border-color:#f0c4bc;}
.bud-split-bar .seg{height:100%;transition:width .3s ease;min-width:0;}
.bud-split-bar .seg.needs{background:linear-gradient(90deg,var(--coral),#c9503a);}
.bud-split-bar .seg.wants{background:linear-gradient(90deg,var(--gold),var(--gold-dark));}
.bud-split-bar .seg.savings{background:linear-gradient(90deg,var(--mint),var(--mint-dark));}
.bud-split-bar .seg.leftover{background:repeating-linear-gradient(45deg,#dde2ee,#dde2ee 6px,#eef1f7 6px,#eef1f7 12px);}
.bud-split-legend{display:flex;flex-wrap:wrap;gap:5px 14px;margin-top:9px;}
.bud-split-legend span{display:inline-flex;align-items:center;gap:6px;font-size:.76rem;font-weight:700;color:var(--muted);}
.bud-split-legend .dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.bud-split-legend .dot.needs{background:var(--coral);}
.bud-split-legend .dot.wants{background:var(--gold);}
.bud-split-legend .dot.savings{background:var(--mint);}
.bud-split-legend .dot.leftover{background:#c7cede;}

/* Running total: allocated vs income, with the leftover called out. */
.bud-total{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin-top:14px;padding:12px 14px;border-radius:10px;
  background:#f2f5fb;border:1.5px solid var(--line);
  font-size:.85rem;font-weight:700;color:var(--navy-900);
}
.bud-total .bud-total-left{font-weight:900;font-size:1.05rem;}
.bud-total.over{background:#fceae7;border-color:#f0c4bc;color:#b8402c;}
.bud-total.exact{background:#e3f8f0;border-color:#b9e8d5;color:#217a5a;}
.bud-actions{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin-top:14px;}
.bud-actions .btn{margin-top:0;}

/* Fixed costs panel. */
.bud-fixed{
  border:1.5px solid var(--line);border-radius:12px;padding:16px;background:#fbfcff;
}
.bud-fixed h3{margin:0 0 4px;font-size:.98rem;display:flex;align-items:center;gap:8px;}
.bud-fixed h3 .icon{color:var(--navy-700);flex-shrink:0;}
.bud-fix-row{
  display:flex;align-items:flex-start;gap:10px;
  padding:10px 0;border-bottom:1px solid var(--line);
}
.bud-fix-row:last-of-type{border-bottom:none;}
.bud-fix-icon{
  width:28px;height:28px;flex-shrink:0;border-radius:8px;background:#eef2fa;
  color:var(--navy-700);display:flex;align-items:center;justify-content:center;
}
.bud-fix-icon .icon{width:14px;height:14px;}
.bud-fix-text{flex:1;min-width:0;}
.bud-fix-label{font-weight:700;font-size:.85rem;color:var(--navy-900);line-height:1.35;}
.bud-fix-note{color:var(--muted);font-size:.74rem;margin-top:2px;}
.bud-fix-amt{flex:0 0 auto;font-weight:800;font-size:.9rem;color:var(--navy-900);text-align:right;}
.bud-fix-row.settled .bud-fix-amt{color:var(--muted);text-decoration:line-through;}
.bud-fix-row.settled .bud-fix-icon{background:#e3f8f0;color:#217a5a;}
.bud-fix-row.overdue .bud-fix-icon{background:#fceae7;color:#b8402c;}
.bud-fix-row.overdue .bud-fix-amt{color:#b8402c;}
.bud-fixed-total{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:14px;padding-top:12px;border-top:2px solid var(--line);
  font-weight:900;color:var(--navy-900);font-size:.95rem;
}

/* The verdict strip — the one line a student reads if they read nothing
   else on this card. */
.bud-verdict{
  display:flex;align-items:flex-start;gap:11px;
  border-radius:11px;padding:13px 15px;margin-top:14px;
  font-size:.88rem;font-weight:700;line-height:1.5;border:1.5px solid transparent;
}
.bud-verdict .icon{width:19px;height:19px;flex-shrink:0;margin-top:1px;}
.bud-verdict.good{background:#e3f8f0;border-color:#b9e8d5;color:#1c6b4e;}
.bud-verdict.warn{background:#fbf1dd;border-color:#eddbb4;color:#7a5510;}
.bud-verdict.bad{background:#fceae7;border-color:#f0c4bc;color:#a8371f;}

/* Plan vs reality. */
.bud-track{margin-top:22px;padding-top:18px;border-top:1.5px solid var(--line);}
.bud-track h3{margin:0 0 12px;font-size:.98rem;display:flex;align-items:center;gap:8px;}
.bud-track h3 .icon{color:var(--navy-700);flex-shrink:0;}
.bud-track-row{margin-bottom:14px;}
.bud-track-row:last-of-type{margin-bottom:0;}
.bud-track-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:6px;}
.bud-track-name{font-weight:800;font-size:.86rem;color:var(--navy-900);}
.bud-track-nums{font-size:.8rem;font-weight:700;color:var(--muted);}
.bud-track-nums strong{color:var(--navy-900);}
.bud-track-nums.over strong,.bud-track-nums.over{color:#b8402c;}
.bud-track-nums.good strong,.bud-track-nums.good{color:#1c6b4e;}
.bud-track-bar{height:13px;border-radius:8px;background:#eef1f7;overflow:hidden;}
.bud-track-fill{height:100%;border-radius:8px;min-width:3px;transition:width .35s ease;}
.bud-track-fill.needs{background:linear-gradient(90deg,var(--coral),#c9503a);}
.bud-track-fill.wants{background:linear-gradient(90deg,var(--gold),var(--gold-dark));}
.bud-track-fill.savings{background:linear-gradient(90deg,var(--mint),var(--mint-dark));}
.bud-track-fill.over{background:repeating-linear-gradient(45deg,#c9503a,#c9503a 7px,#e8735f 7px,#e8735f 14px);}

/* Coaching notes. */
.bud-note{
  display:flex;align-items:flex-start;gap:10px;
  padding:11px 13px;border-radius:10px;margin-top:10px;
  font-size:.83rem;line-height:1.55;border-left:4px solid var(--line);background:#f7f9fd;
}
.bud-note .icon{width:16px;height:16px;flex-shrink:0;margin-top:2px;}
.bud-note.good{border-left-color:var(--mint);background:#f0fbf6;color:#1c6b4e;}
.bud-note.warn{border-left-color:var(--gold);background:#fdf8ee;color:#7a5510;}
.bud-note.bad{border-left-color:var(--coral);background:#fdf2f0;color:#a8371f;}
#budNotes{margin-top:18px;}
.bud-estimate-link{
  background:none;border:none;padding:0;margin-left:2px;
  color:var(--gold-dark,#8a6112);font-weight:700;font-size:inherit;
  text-decoration:underline;cursor:pointer;
}
.bud-estimate-link:hover{color:var(--navy-900);}

/* Teacher overview. */
.bud-flag{
  display:inline-flex;align-items:center;gap:5px;border-radius:999px;
  padding:3px 9px;font-size:.7rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;
}
.bud-flag.ok{background:#e3f8f0;color:#217a5a;}
.bud-flag.short{background:#fceae7;color:#b8402c;}
.bud-flag.none{background:#eef1f7;color:var(--muted);}
@media(max-width:560px){
  .bud-cat-pct{min-width:58px;font-size:.74rem;}
}

/* Printing a report card: hide navigation/buttons/every other on-page
   section and show just the report content full-width. Scoped with
   .report-print-area (rather than printing the whole <main>) so a page
   with several report blocks — e.g. the teacher's class table AND a
   detail modal — can print just the one the person actually opened
   Print from, instead of everything on screen at once. */
@media print{
  .topbar,.footer-note,.no-print,#settingsBtn,.settings-popover,.notif-panel,.notif-bell{display:none !important;}
  body{background:#fff;}
  main{max-width:none;padding:0;margin:0;}
  .card{box-shadow:none;border:none;padding:0;}
  #reportModal{position:static;background:none;padding:0;display:block;}
  #reportModal .card{max-width:none;}
  .rpt-bar-track{border:1px solid #ccc;}
  body.printing-modal-only main{display:none !important;}
}

/* =====================================================================
   Dark mode — togglable from Settings (see settings-menu.js).
   `dark-mode` class on <html>, set before paint by the inline snippet in
   each page's <head> (reads localStorage) so there's no flash of the
   light theme. Purely additive: every rule below targets an existing
   selector prefixed with `.dark-mode`, which always wins on specificity,
   so nothing above this block needs to change. Wrapped in @media screen
   so printing (which forces its own light styles) is never affected.
   The brand blue (--sky/--gold family) is intentionally left untouched —
   both already read as accent colours against a dark navy surface (see
   the topbar, which has always used them this way), so dark mode keeps
   the blue-and-gold identity front and centre instead of dimming it.
===================================================================== */
@media screen {

html.dark-mode{
  color-scheme:dark;
  --bg:#151515;
  --card:#1c2440;
  --ink:#e8ecf8;
  --muted:#94a1c2;
  --line:#2d3856;
  --shadow:0 6px 20px rgba(0,0,0,0.45);

  --surface-2:#212a4a;
  --heading-text:#f7f1e6;
  --accent-text:#8fb4ff;
  --muted-2:#8895b8;

  /* Dimmed stand-ins for the gold/mint/sky/lilac family, used only on
     large filled surfaces (dashboard stat cards, solid buttons, avatars,
     game tiles). Keeps the same hue/identity but knocks the lightness
     down so big saturated fills don't glare against the dark backdrop.
     Small accents (links, icons, thin borders, dots) still use the
     original full-brightness variables on purpose. */
  --gold-dim:#8a6a24;
  --gold-dark-dim:#6d5219;
  --mint-dim:#217a5c;
  --mint-dark-dim:#1a5f47;
  --sky-dim:#3d5fa6;
  --sky-dark-dim:#2c477f;
  --lilac-dim:#5c5497;
  --lilac-dark-dim:#463f79;
  --coral-dim:#8a4638;
  --coral-dark-dim:#6b352a;

  /* Muted equivalent of the light-mode warning-banner gradient (see
     :root) — same pink->gold identity, knocked down to dark-surface
     brightness, with light text instead of dark-brown. */
  --warn-banner-grad-start:var(--coral-dim);
  --warn-banner-grad-end:var(--gold-dim);
  --warn-banner-text:var(--heading-text);

  --pastel-mint-bg: rgba(63,191,143,0.16);
  --pastel-mint-border: rgba(63,191,143,0.4);
  --pastel-mint-text: #7be3b8;

  --pastel-coral-bg: rgba(232,115,95,0.16);
  --pastel-coral-border: rgba(232,115,95,0.45);
  --pastel-coral-text: #ff9d87;

  --pastel-gold-bg: rgba(232,184,75,0.18);
  --pastel-gold-border: rgba(232,184,75,0.45);
  --pastel-gold-text: #f6cf7e;

  --pastel-navy-bg: rgba(143,180,255,0.14);
  --pastel-lilac-bg: rgba(138,127,214,0.22);
  --pastel-lilac-text: #cabdf7;
}

/* Flat background — no gradient/glow behind the page in dark mode. */
html.dark-mode body{
  background-image:none;
}

/* ---------------- Generic text & surfaces ---------------- */
html.dark-mode a{color:var(--accent-text);}
html.dark-mode .topbar a{color:var(--warm-white);}
html.dark-mode .topbar nav a{color:var(--warm-white-dim);}
html.dark-mode .topbar nav a:hover{color:var(--warm-white);}
html.dark-mode .topbar nav a.active{color:var(--gold);}
html.dark-mode .btn-logout,
html.dark-mode .btn-icon-topbar{color:var(--warm-white);}
html.dark-mode th{color:var(--accent-text);}
html.dark-mode input,
html.dark-mode select{background:var(--card);color:var(--ink);border-color:var(--line);}
html.dark-mode ::placeholder{color:var(--muted);opacity:.8;}

/* ---------------- Headings / strong dark-navy text -> bright text ---------------- */
html.dark-mode h1, html.dark-mode h2, html.dark-mode h3, html.dark-mode h4,
html.dark-mode .profile-chip .value,
html.dark-mode .settings-popover-title,
html.dark-mode .card h2 .icon,
html.dark-mode label,
html.dark-mode .leaderboard-net,
html.dark-mode .auto-details strong,
html.dark-mode .anw-event-name,
html.dark-mode .number-cell,
html.dark-mode .rpt-bar-label,
html.dark-mode .rpt-bar-amount,
html.dark-mode .notif-title,
html.dark-mode .quiz-question .qtext,
html.dark-mode .quiz-explain,
html.dark-mode .qg-title,
html.dark-mode .mkt-price .now,
html.dark-mode .mkt-offer-amt,
html.dark-mode .mkt-sell-row .mkt-sell-name,
html.dark-mode .bud-cat-name,
html.dark-mode .bud-fix-label,
html.dark-mode .bud-fix-amt,
html.dark-mode .bud-fixed-total,
html.dark-mode .bud-track-name,
html.dark-mode .bud-track-nums strong,
html.dark-mode .badge.navy,
html.dark-mode .notif-ic.navy,
html.dark-mode .mkt-status.sold{
  color:var(--heading-text);
}
html.dark-mode .pw-toggle:hover{background:var(--surface-2);color:var(--heading-text);}
html.dark-mode .bud-estimate-link:hover{color:var(--heading-text);}
html.dark-mode .btn.secondary{background:var(--card);color:var(--heading-text);border-color:var(--heading-text);}
html.dark-mode .quiz-option.chosen{border-color:var(--heading-text);background:var(--surface-2);}

/* ---------------- Accent (navy-700) text/icons -> soft blue ---------------- */
html.dark-mode #profileBody h4 .icon,
html.dark-mode .settings-popover-heading .icon,
html.dark-mode label .icon-slot,
html.dark-mode .company-card h4 .icon,
html.dark-mode .job-card h4 .icon,
html.dark-mode .notif-showmore,
html.dark-mode .notif-foot a,
html.dark-mode .quiz-card h3 .icon,
html.dark-mode .quiz-pill,
html.dark-mode .report-print-area h3 .icon,
html.dark-mode .report-print-area h4 .icon,
html.dark-mode .qg-meta,
html.dark-mode .mkt-filter,
html.dark-mode .mkt-listing h4 .icon,
html.dark-mode .bud-fixed h3 .icon,
html.dark-mode .bud-fix-icon,
html.dark-mode .bud-track h3 .icon{
  color:var(--accent-text);
}
html.dark-mode .qg-card{border-top-color:var(--accent-text);}
html.dark-mode .quiz-option:hover{border-color:var(--accent-text);}
html.dark-mode .mkt-filter:hover{border-color:var(--accent-text);}

/* ---------------- Off-white panels -> dark raised surface ---------------- */
html.dark-mode .profile-chip,
html.dark-mode a.notif-row:hover,
html.dark-mode .notif-showmore,
html.dark-mode .notif-showmore:hover,
html.dark-mode .notif-foot,
html.dark-mode .quiz-pill,
html.dark-mode .quiz-question,
html.dark-mode .quiz-option.chosen,
html.dark-mode .quiz-explain,
html.dark-mode .qg-meta,
html.dark-mode .bud-week,
html.dark-mode .bud-cat,
html.dark-mode .bud-split-bar,
html.dark-mode .bud-total,
html.dark-mode .bud-fixed,
html.dark-mode .bud-track-bar,
html.dark-mode .bud-note,
html.dark-mode .bud-flag.none,
html.dark-mode .rpt-bar-track{
  background:var(--surface-2);
}
html.dark-mode .tabs.subtabs,
html.dark-mode .bud-fix-icon{
  background:var(--bg);
}

/* ---------------- Card-white surfaces -> dark card ---------------- */
html.dark-mode .settings-popover,
html.dark-mode .auth-card,
html.dark-mode .anw-modal-card,
html.dark-mode .number-cell,
html.dark-mode .settings-dropdown{
  background:var(--card);
}

/* ---------------- Notification unread highlight ---------------- */
html.dark-mode .notif-row.unread{background:rgba(232,184,75,0.08);}
html.dark-mode a.notif-row.unread:hover{background:rgba(232,184,75,0.14);}
html.dark-mode .notif-time{color:var(--muted-2);}

/* ---------------- Mint (success) pastel family ---------------- */
html.dark-mode .badge.mint,
html.dark-mode .success-msg,
html.dark-mode .number-zero,
html.dark-mode .number-cell.zero,
html.dark-mode .notif-ic.mint,
html.dark-mode .mkt-status.active,
html.dark-mode .bud-cat.savings .bud-cat-icon,
html.dark-mode .bud-fix-row.settled .bud-fix-icon,
html.dark-mode .bud-verdict.good,
html.dark-mode .bud-flag.ok,
html.dark-mode .bud-note.good,
html.dark-mode .quiz-option.right{
  background:var(--pastel-mint-bg);color:var(--pastel-mint-text);
}
html.dark-mode .quiz-pill.mint{background:var(--pastel-mint-bg);border-color:var(--pastel-mint-border);color:var(--pastel-mint-text);}
html.dark-mode .bud-total.exact{background:var(--pastel-mint-bg);border-color:var(--pastel-mint-border);color:var(--pastel-mint-text);}
html.dark-mode .bud-verdict.good{border-color:var(--pastel-mint-border);}
html.dark-mode .ticker-up,
html.dark-mode .status-approved,
html.dark-mode .bud-track-nums.good,
html.dark-mode .bud-track-nums.good strong{color:var(--pastel-mint-text);}

/* ---------------- Coral (danger) pastel family ---------------- */
html.dark-mode .badge.coral,
html.dark-mode .error-msg,
html.dark-mode .notif-ic.coral,
html.dark-mode .mkt-status.cancelled,
html.dark-mode .mkt-status.rejected,
html.dark-mode .bud-cat.needs .bud-cat-icon,
html.dark-mode .bud-fix-row.overdue .bud-fix-icon,
html.dark-mode .bud-verdict.bad,
html.dark-mode .bud-flag.short,
html.dark-mode .bud-note.bad,
html.dark-mode .quiz-option.wrong{
  background:var(--pastel-coral-bg);color:var(--pastel-coral-text);
}
html.dark-mode .quiz-pill.coral{background:var(--pastel-coral-bg);border-color:var(--pastel-coral-border);color:var(--pastel-coral-text);}
html.dark-mode .bud-total.over{background:var(--pastel-coral-bg);border-color:var(--pastel-coral-border);color:var(--pastel-coral-text);}
html.dark-mode .bud-verdict.bad{border-color:var(--pastel-coral-border);}
html.dark-mode .bud-split-bar.over{border-color:var(--pastel-coral-border);}
html.dark-mode .ticker-down,
html.dark-mode .status-declined,
html.dark-mode .notif-row.action .notif-time,
html.dark-mode .bud-fix-row.overdue .bud-fix-amt,
html.dark-mode .bud-track-nums.over,
html.dark-mode .bud-track-nums.over strong{color:var(--pastel-coral-text);}

/* ---------------- Gold (warning / highlight) pastel family ---------------- */
html.dark-mode .badge.gold,
html.dark-mode .notif-ic.gold,
html.dark-mode .mkt-status.pending,
html.dark-mode .bud-cat.wants .bud-cat-icon,
html.dark-mode .bud-verdict.warn,
html.dark-mode .leaderboard-row.me,
html.dark-mode .bud-note.warn{
  background:var(--pastel-gold-bg);color:var(--pastel-gold-text);
}
html.dark-mode .quiz-pill.gold{background:var(--pastel-gold-bg);border-color:var(--pastel-gold-border);color:var(--pastel-gold-text);}
html.dark-mode .bud-verdict.warn{border-color:var(--pastel-gold-border);}
html.dark-mode .mkt-listing.mine{border-color:var(--pastel-gold-border);}
html.dark-mode .bud-estimate-link{color:var(--pastel-gold-text);}

/* ---------------- Lilac pastel family ---------------- */
html.dark-mode .badge.lilac,
html.dark-mode .notif-ic.lilac{
  background:var(--pastel-lilac-bg);color:var(--pastel-lilac-text);
}

/* ---------------- Navy/neutral pastel family ---------------- */
html.dark-mode .badge.navy,
html.dark-mode .notif-ic.navy,
html.dark-mode .mkt-status.sold{
  background:var(--pastel-navy-bg);
}

/* ---------------- Misc borders & one-off tints ---------------- */
html.dark-mode .budget-card{border-color:var(--line);}
html.dark-mode .quiz-card.passed{
  border-color:var(--pastel-mint-border);
  background:linear-gradient(180deg,var(--pastel-mint-bg),var(--card) 60%);
}
html.dark-mode .quiz-card.locking{border-color:var(--pastel-coral-border);}
html.dark-mode .mkt-listing.mine{background:linear-gradient(180deg,var(--pastel-gold-bg),var(--card) 55%);}
html.dark-mode .bud-split-bar .seg.leftover{
  background:repeating-linear-gradient(45deg, rgba(255,255,255,.07), rgba(255,255,255,.07) 6px, transparent 6px, transparent 12px);
}
html.dark-mode .bud-split-legend .dot.leftover{background:rgba(255,255,255,.28);}
html.dark-mode .lg-switch-track{background:#3a4568;}
html.dark-mode .qb-question,
html.dark-mode .mortgage-toggle-row,
html.dark-mode .threshold-row{background:rgba(255,255,255,.03);}

/* Small accent controls pop in gold against the dark surface */
html.dark-mode .remember-row input[type="checkbox"],
html.dark-mode .quiz-option input{accent-color:var(--gold);}
html.dark-mode .qb-opt-row input[type="radio"]{accent-color:var(--mint);}

/* Legacy per-page dropdown (student.html) */
html.dark-mode .settings-dropdown{border-color:rgba(255,255,255,.12);}
html.dark-mode .settings-dropdown-item:hover{background:rgba(255,255,255,.08);}

/* Mortgage toggle switch (property.html) */
html.dark-mode .mortgage-toggle-track{background:#3a4568;}

/* ---------------- Dim the big saturated fills (dashboard stat cards
   and anything using the same bright gold/mint/sky/lilac gradients at
   a similar size) so they don't glare next to the dark background. ---------------- */
html.dark-mode .stat.gold{background:linear-gradient(135deg,var(--gold-dim),var(--gold-dark-dim));color:var(--heading-text);box-shadow:0 8px 20px rgba(0,0,0,0.45);}
html.dark-mode .stat.gold .label{color:rgba(244,247,255,0.75);}
html.dark-mode .stat.mint{background:linear-gradient(135deg,var(--mint-dim),var(--mint-dark-dim));box-shadow:0 8px 20px rgba(0,0,0,0.45);}
html.dark-mode .stat.sky{background:linear-gradient(135deg,var(--sky-dim),var(--sky-dark-dim));box-shadow:0 8px 20px rgba(0,0,0,0.45);}
html.dark-mode .stat.lilac{background:linear-gradient(135deg,var(--lilac-dim),var(--lilac-dark-dim));box-shadow:0 8px 20px rgba(0,0,0,0.45);}
html.dark-mode .stat.gold .icon, html.dark-mode .stat.mint .icon{color:rgba(255,255,255,0.55);}

html.dark-mode .btn.gold{background:linear-gradient(135deg,var(--gold-dim),var(--gold-dark-dim));color:var(--heading-text);box-shadow:0 4px 12px rgba(0,0,0,0.4);}
html.dark-mode .btn.mint{background:linear-gradient(135deg,var(--mint-dim),var(--mint-dark-dim));box-shadow:0 4px 12px rgba(0,0,0,0.4);}

html.dark-mode .student-avatar.c1{background:linear-gradient(135deg,var(--sky-dim),var(--sky-dark-dim));}
html.dark-mode .student-avatar.c2{background:linear-gradient(135deg,var(--mint-dim),var(--mint-dark-dim));}
html.dark-mode .student-avatar.c3{background:linear-gradient(135deg,var(--gold-dim),var(--gold-dark-dim));}
html.dark-mode .student-avatar.c4{background:linear-gradient(135deg,var(--lilac-dim),var(--lilac-dark-dim));}

html.dark-mode .quiz-score.pass{background:linear-gradient(135deg,var(--mint-dim),var(--mint-dark-dim));box-shadow:0 8px 20px rgba(0,0,0,0.4);}
html.dark-mode .rank-pill.gold{background:linear-gradient(135deg,var(--gold-dim),var(--gold-dark-dim));color:var(--heading-text);}
html.dark-mode .lg-switch input:checked + .lg-switch-track{background:linear-gradient(135deg,var(--gold-dim),var(--gold-dark-dim));}
html.dark-mode .number-zero.selected{background:var(--gold-dim);border-color:var(--gold-dark-dim);}
html.dark-mode .number-cell.selected{background:var(--gold-dim);border-color:var(--gold-dark-dim);color:var(--heading-text);}

html.dark-mode .progress-bar > div,
html.dark-mode .rpt-bar-fill.gold,
html.dark-mode .bud-split-bar .seg.wants,
html.dark-mode .bud-track-fill.wants{background:linear-gradient(90deg,var(--gold-dim),var(--gold-dark-dim));}
html.dark-mode .rpt-bar-fill.mint,
html.dark-mode .bud-split-bar .seg.savings,
html.dark-mode .bud-track-fill.savings{background:linear-gradient(90deg,var(--mint-dim),var(--mint-dark-dim));}

/* ---------------- Text sitting on those fills was inheriting the
   regular dark-mode muted colour (light blue-grey), which is very low
   contrast against gold/mint/sky/lilac. Match it to the label colour
   already used on each fill instead. ---------------- */
html.dark-mode .stat.gold .muted-small{color:rgba(244,247,255,0.8);}
html.dark-mode .stat.mint .muted-small,
html.dark-mode .stat.sky .muted-small,
html.dark-mode .stat.lilac .muted-small{color:rgba(244,247,255,0.8);}

/* ---------------- Remove the remaining glow/shine effects (colored
   drop-shadows, colored box-shadows, radial "shine" circles) so nothing
   throws a bright halo against the dark surface. ---------------- */
html.dark-mode .brand .coin, html.dark-mode .brand .icon-slot{filter:none;}
html.dark-mode .auth-logo .coin{filter:none;}
html.dark-mode .company-card::before{background:none;}

html.dark-mode .anw-balance-widget{
  background:linear-gradient(135deg,var(--gold-dim),var(--gold-dark-dim));
  color:var(--heading-text);
  box-shadow:0 8px 20px rgba(0,0,0,0.45);
}
html.dark-mode .anw-balance-widget .anw-bw-label{color:rgba(244,247,255,0.75);}

html.dark-mode .btn.coral{background:linear-gradient(135deg,var(--coral-dim),var(--coral-dark-dim));box-shadow:0 4px 12px rgba(0,0,0,0.4);}
html.dark-mode .quiz-score.fail{background:linear-gradient(135deg,var(--coral-dim),var(--coral-dark-dim));box-shadow:0 8px 20px rgba(0,0,0,0.4);}
html.dark-mode .student-avatar.c5{background:linear-gradient(135deg,var(--coral-dim),var(--coral-dark-dim));}
html.dark-mode .rpt-bar-fill.coral,
html.dark-mode .bud-split-bar .seg.needs,
html.dark-mode .bud-track-fill.needs{background:linear-gradient(90deg,var(--coral-dim),var(--coral-dark-dim));}

html.dark-mode .btn.gold:hover{box-shadow:0 8px 18px rgba(0,0,0,0.5);}
html.dark-mode .notif-dot{
  background:linear-gradient(135deg,var(--coral-dim),var(--coral-dark-dim));
  box-shadow:none;
}

/* ---------------- Remaining plain-white text -> same warm white as the
   topbar, so every bright/white bit of text in dark mode matches. ---------------- */
html.dark-mode .stat,
html.dark-mode .btn,
html.dark-mode .btn:hover,
html.dark-mode .btn.mint,
html.dark-mode .btn.coral,
html.dark-mode .btn.secondary:hover,
html.dark-mode .quiz-score.fail,
html.dark-mode .tabs button.active,
html.dark-mode .rank-pill,
html.dark-mode .student-avatar,
html.dark-mode .notif-dot{
  color:var(--heading-text);
}

}

/* ================================================================
   JOB TIERS — complete visual system
   ================================================================ */

/* ── Teacher jobs grid ──────────────────────────────────────────── */
.jobs-family-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 18px;
}

.job-family-card {
  border: 1.5px solid var(--line);
  border-radius: 16px;
  padding: 20px;
  background: var(--bg);
  transition: box-shadow .2s, border-color .2s;
}
.job-family-card:hover {
  box-shadow: 0 6px 24px rgba(14,27,55,.1);
  border-color: var(--navy-200, #c8d0e0);
}

.job-family-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 16px;
}
.job-family-title {
  font-size: 1.05rem;
  font-weight: 800;
  margin: 0 0 2px;
  color: var(--navy-900);
}
.job-family-auto { margin-top: 2px; }
.job-family-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* ── Tier ladder (teacher job card + student profile) ──────────── */
.tier-ladder {
  display: flex;
  flex-direction: column;
}

.tier-connector {
  width: 2px;
  height: 14px;
  background: var(--line);
  margin-left: 18px; /* centres under badge */
  flex-shrink: 0;
}

.tier-rung {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1.5px solid transparent;
  transition: background .18s, border-color .18s;
  position: relative;
}
.tier-rung.has-students {
  background: var(--pastel-mint-bg, #e8faf2);
  border-color: var(--mint);
}
.tier-rung.active {
  background: linear-gradient(135deg, rgba(201,154,46,.08), rgba(201,154,46,.16));
  border-color: var(--gold);
}
.tier-rung.completed {
  background: var(--pastel-mint-bg, #e8faf2);
  border-color: var(--mint);
}

.tier-rung-badge {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: .82rem;
  flex-shrink: 0;
  background: var(--line);
  color: var(--muted);
  border: 2px solid var(--line);
  position: relative;
  z-index: 1;
  transition: background .2s, border-color .2s, box-shadow .2s;
}
.tier-rung.active .tier-rung-badge {
  background: linear-gradient(135deg, var(--gold), #b8870a);
  color: #fff;
  border-color: #b8870a;
  box-shadow: 0 3px 10px rgba(201,154,46,.45);
}
.tier-rung.completed .tier-rung-badge {
  background: var(--mint);
  color: #fff;
  border-color: var(--mint);
}

.tier-rung-body { flex: 1; min-width: 0; }
.tier-rung-title {
  font-weight: 700;
  font-size: .9rem;
  color: var(--navy-900);
}
.tier-rung-wage {
  font-size: .88rem;
  font-weight: 600;
  color: var(--navy-700);
  margin-top: 1px;
}
.tier-rung-desc { margin-top: 2px; }

.tier-rung-students {
  display: flex;
  align-items: center;
  gap: -4px;
  flex-shrink: 0;
  margin-left: auto;
}
.tier-rung-students .student-avatar { width: 26px; height: 26px; font-size: .62rem; }
.tier-rung-count {
  font-size: .72rem;
  font-weight: 700;
  color: var(--muted);
  margin-left: 5px;
}

/* Profile modal tier ladder variant */
.profile-tier-ladder .tier-rung { padding: 8px 10px; }
.profile-tier-ladder .tier-rung-badge { width: 30px; height: 30px; font-size: .78rem; }

/* ── Tier form rows (add / edit) ────────────────────────────────── */
.tier-form-row {
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 10px;
  background: var(--bg);
}
.tier-form-row-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.tier-form-badge {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--navy-900);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  font-weight: 900;
  flex-shrink: 0;
}
.tier-form-label { font-weight: 700; font-size: .88rem; flex: 1; }
.tier-form-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.tier-form-fields .tier-desc-wrap { grid-column: 1 / -1; }
.tier-form-fields label { font-size: .8rem; margin-bottom: 4px; display: block; }
.tier-form-fields input {
  width: 100%;
  box-sizing: border-box;
}
.tier-form-remove { margin-left: auto; }

/* ── Tiny tier badge in teacher's student table ─────────────────── */
.tier-micro-badge {
  display: inline-block;
  background: rgba(201,154,46,.15);
  color: var(--navy-700);
  font-size: .68rem;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 20px;
  border: 1px solid rgba(201,154,46,.3);
  vertical-align: middle;
}

/* ── Student: my current job card ──────────────────────────────── */
.my-job-card {
  border-radius: 14px;
  padding: 0;
  overflow: hidden;
}
.my-job-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 20px 20px 16px;
  background: linear-gradient(135deg, var(--navy-900, #0e1b37) 0%, #1a3070 100%);
  color: #fff;
  flex-wrap: wrap;
  border-radius: 14px;
}
.my-job-family {
  font-size: .78rem;
  font-weight: 600;
  opacity: .72;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.my-job-tier-name {
  font-size: 1.5rem;
  font-weight: 900;
  margin: 4px 0 0;
  color: #fff;
}
.my-job-wage {
  text-align: right;
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--gold);
  line-height: 1;
}
.my-job-wage-label {
  display: block;
  font-size: .72rem;
  font-weight: 600;
  opacity: .8;
  color: #fff;
}
.my-job-desc {
  padding: 14px 20px 0;
  color: var(--muted);
  margin: 0;
}

/* ── Tier progress bar (student "my job" card) ──────────────────── */
.tier-progress-wrap {
  padding: 16px 20px 20px;
}
.tier-progress-bar-bg {
  height: 6px;
  border-radius: 3px;
  background: var(--line);
  margin-bottom: 8px;
  overflow: hidden;
}
.tier-progress-bar-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--gold), #e8aa18);
  transition: width .5s cubic-bezier(.4,0,.2,1);
}

.tier-progress-steps {
  display: flex;
  justify-content: space-between;
  gap: 4px;
  margin-top: 4px;
}
.tier-progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-width: 0;
  gap: 4px;
}
.tier-progress-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--line);
  flex-shrink: 0;
  transition: background .25s, box-shadow .25s;
}
.tier-progress-step.past .tier-progress-dot {
  background: var(--mint);
}
.tier-progress-step.current .tier-progress-dot {
  background: var(--gold);
  box-shadow: 0 0 0 3px rgba(201,154,46,.3);
  transform: scale(1.25);
}
.tier-progress-label {
  font-size: .65rem;
  font-weight: 600;
  color: var(--muted);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.tier-progress-step.current .tier-progress-label { color: var(--navy-900); font-weight: 800; }

.tier-auto-note {
  padding: 0 20px 16px;
  margin: 0;
}
.my-job-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 32px 20px;
  color: var(--muted);
  text-align: center;
}

/* ── Student: job board ─────────────────────────────────────────── */
.job-board-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

.job-board-card {
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 18px;
  background: var(--bg);
  transition: box-shadow .2s, border-color .2s;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.job-board-card:hover {
  box-shadow: 0 4px 18px rgba(14,27,55,.09);
  border-color: var(--navy-200, #c8d0e0);
}
.job-board-card.is-mine {
  border-color: var(--gold);
  background: linear-gradient(135deg, rgba(201,154,46,.04), rgba(201,154,46,.10));
}

.job-board-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 14px;
  gap: 8px;
}
.job-board-title {
  font-size: 1rem;
  font-weight: 800;
  margin: 0 0 4px;
}

.job-board-tiers {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.job-board-tier-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--bg);
  transition: background .15s, border-color .15s;
}
.job-board-tier-row.active {
  background: linear-gradient(135deg, rgba(201,154,46,.08), rgba(201,154,46,.18));
  border-color: var(--gold);
}
.job-board-tier-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .68rem;
  font-weight: 900;
  flex-shrink: 0;
  color: var(--muted);
}
.job-board-tier-row.active .job-board-tier-num {
  background: var(--gold);
  color: var(--navy-900);
}
.job-board-tier-info { flex: 1; min-width: 0; font-size: .84rem; }
.job-board-tier-wage {
  font-size: .82rem;
  font-weight: 700;
  color: var(--navy-700);
  white-space: nowrap;
  flex-shrink: 0;
}

.job-board-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

/* ── Promotion popup ────────────────────────────────────────────── */
.promo-popup-card {
  background: var(--card, #fff);
  border-radius: 22px;
  padding: 36px 32px 32px;
  max-width: 400px;
  width: 100%;
  text-align: center;
  box-shadow: 0 32px 80px rgba(0,0,0,.4);
  border-top: 5px solid var(--gold);
  animation: promoPop .35s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes promoPop {
  from { opacity:0; transform:scale(.88) translateY(24px); }
  to   { opacity:1; transform:scale(1)  translateY(0); }
}
.promo-popup-stars {
  font-size: 1rem;
  letter-spacing: .5em;
  color: var(--gold);
  margin-bottom: 8px;
}
.promo-popup-emoji { font-size: 3.4rem; margin-bottom: 10px; }
.promo-popup-title {
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--navy-900);
  margin: 0 0 6px;
}
.promo-popup-sub { color: var(--muted); margin: 0 0 18px; }
.promo-popup-tier {
  background: linear-gradient(135deg, #fdf3d4, #fce9a0);
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 22px;
  border: 2px solid var(--gold);
}
.promo-popup-tier-name {
  font-size: 1.45rem;
  font-weight: 900;
  color: var(--navy-900);
}
.promo-popup-tier-meta {
  font-size: .88rem;
  color: var(--navy-700);
  margin-top: 4px;
}
.promo-popup-btn { width: 100%; font-size: 1rem; padding: 14px; }
.promo-popup-actions { display: flex; gap: 10px; margin-top: 4px; }
.promo-popup-actions .btn { flex: 1; padding: 14px; font-size: 1rem; }

/* ── Dark mode overrides ────────────────────────────────────────── */
html.dark-mode .job-family-card,
html.dark-mode .job-board-card,
html.dark-mode .tier-form-row,
html.dark-mode .tier-rung {
  background: var(--card);
  border-color: var(--line);
}
html.dark-mode .tier-rung.active {
  background: rgba(201,154,46,.13);
  border-color: var(--gold);
}
html.dark-mode .tier-rung.has-students,
html.dark-mode .tier-rung.completed {
  background: rgba(46,201,120,.08);
}
html.dark-mode .job-board-card.is-mine {
  background: rgba(201,154,46,.08);
  border-color: var(--gold);
}
html.dark-mode .promo-popup-card { background: var(--card); }
html.dark-mode .promo-popup-tier {
  background: rgba(201,154,46,.12);
  border-color: var(--gold);
}
html.dark-mode .my-job-header {
  background: linear-gradient(135deg, #06091a 0%, #0d1a3a 100%);
}
html.dark-mode .job-board-tier-row { background: var(--card); }
html.dark-mode .job-board-tier-row.active {
  background: rgba(201,154,46,.12);
  border-color: var(--gold);
}
html.dark-mode .tier-micro-badge {
  background: rgba(201,154,46,.12);
  border-color: rgba(201,154,46,.25);
  color: var(--gold);
}

/* ── Responsive tweaks ──────────────────────────────────────────── */
@media (max-width: 600px) {
  .jobs-family-grid,
  .job-board-grid { grid-template-columns: 1fr; }
  .tier-form-fields { grid-template-columns: 1fr; }
  .tier-form-fields .tier-desc-wrap { grid-column: 1; }
  .my-job-wage { font-size: 1.4rem; }
}

/* ── Store: quantity stepper + buy control ─────────────────────── */
.qty-buy-block{display:flex;flex-direction:column;align-items:flex-end;gap:8px;}
.qty-stepper{
  display:inline-flex;align-items:center;gap:0;
  border:1.5px solid var(--line);border-radius:9px;overflow:hidden;background:#fff;
  position:relative;
}
.qty-stepper .qty-btn{
  appearance:none;border:none;background:#fff;color:var(--navy-900);
  width:36px;height:38px;font-size:1.15rem;font-weight:800;line-height:1;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .12s ease;flex-shrink:0;
  touch-action:manipulation;user-select:none;-webkit-tap-highlight-color:transparent;
  position:relative;z-index:1;
}
.qty-stepper .qty-btn:hover{background:rgba(201,154,46,0.14);color:var(--gold-dark);}
.qty-stepper .qty-btn:active{background:rgba(201,154,46,0.24);}
.qty-stepper .qty-input{
  width:48px;min-width:0;height:38px;min-height:38px;padding:0;margin:0;text-align:center;
  border:none;border-left:1.5px solid var(--line);border-right:1.5px solid var(--line);
  border-radius:0;font-weight:800;font-size:.92rem;-moz-appearance:textfield;
  touch-action:manipulation;position:relative;z-index:1;
}
.qty-stepper .qty-input::-webkit-outer-spin-button,
.qty-stepper .qty-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.qty-stepper .qty-input:focus{outline:none;background:rgba(201,154,46,0.08);}
.qty-buy-btn{white-space:nowrap;}

html.dark-mode .qty-stepper{background:var(--card);border-color:var(--line);}
html.dark-mode .qty-stepper .qty-btn{background:var(--card);color:var(--warm-white);}
html.dark-mode .qty-stepper .qty-btn:hover{background:rgba(201,154,46,0.18);}
html.dark-mode .qty-stepper .qty-input{background:var(--card);color:var(--ink);border-left-color:var(--line);border-right-color:var(--line);}

@media (max-width: 600px) {
  .qty-buy-block{align-items:stretch;width:100%;}
  .qty-stepper{align-self:flex-end;}
  .qty-buy-btn{width:100%;justify-content:center;}
}