:root{
  --bg:#F6F7F6; --surface:#FFFFFF; --ink:#1B2430; --muted:#5B6670;
  --teal:#0E6E66; --teal-dark:#0A5851; --gold:#C99A2E;
  --sage:#3F8F5F; --brick:#C1483F; --divider:#E3E6E4;
  --radius:14px;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  min-height:100vh; overscroll-behavior-y:none;
}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;}
#app{max-width:960px; margin:0 auto; min-height:100vh; display:flex; flex-direction:column; background:var(--bg);}

/* header */
header{padding:18px 20px 10px; display:flex; align-items:center; justify-content:space-between;}
.brand{display:flex; align-items:center; gap:8px;}
.brand-mark{width:9px;height:9px;border-radius:50%;background:var(--teal); box-shadow:0 0 0 4px rgba(14,110,102,0.12);}
.brand-mascot{width:108px;height:108px;border-radius:50%;object-fit:cover;flex:none;background:var(--surface);}
.brand-name{font-weight:700; font-size:24px; letter-spacing:-0.01em;}
.back-btn{background:none;border:none;color:var(--muted);font-size:15px;padding:6px 4px;cursor:pointer;}
.pulse-wrap{height:22px; margin:0 20px 6px; opacity:0.9;}
.pulse-wrap svg{width:100%; height:100%; display:block;}

main{flex:1; padding:0 20px 28px; display:flex; flex-direction:column; gap:14px;}

/* home grid */
.mode-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:6px;}
.mode-card{
  background:var(--surface); border:1px solid var(--divider); border-radius:var(--radius);
  padding:18px 14px; text-align:left; cursor:pointer; transition:transform .12s ease, box-shadow .12s ease;
}
.mode-card:active{transform:scale(0.97);}
.mode-card .glyph{font-size:22px; margin-bottom:8px; display:block;}
.mode-card .title{font-weight:700; font-size:15px; margin-bottom:3px;}
.mode-card .sub{font-size:12.5px; color:var(--muted); line-height:1.35;}
.study-link{
  background:var(--surface); border:1px solid var(--divider); border-radius:var(--radius);
  padding:14px 16px; display:flex; align-items:center; justify-content:space-between; cursor:pointer;
}
.study-link .title{font-weight:600; font-size:14.5px;}
.study-link .arrow{color:var(--muted);}

.section-label{font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin:8px 2px 0;}

/* quality filter segmented control */
.seg{display:flex; background:var(--surface); border:1px solid var(--divider); border-radius:999px; padding:3px; gap:2px;}
.seg button{
  flex:1; border:none; background:none; padding:9px 6px; border-radius:999px; font-size:12.5px; font-weight:600;
  color:var(--muted); cursor:pointer; transition:background .15s, color .15s;
}
.seg button.active{background:var(--teal); color:#fff;}

.stat-row{display:flex; gap:10px;}
.stat-box{flex:1; background:var(--surface); border:1px solid var(--divider); border-radius:12px; padding:12px; text-align:center;}
.stat-box .num{font-size:20px; font-weight:700;}
.stat-box .lbl{font-size:11px; color:var(--muted); margin-top:2px;}

/* topic list */
.topic-row{
  background:var(--surface); border:1px solid var(--divider); border-radius:12px;
  padding:14px 16px; display:flex; align-items:center; justify-content:space-between; cursor:pointer;
}
.topic-row .name{font-weight:600; font-size:14.5px;}
.topic-row .meta{font-size:12px; color:var(--muted); margin-top:2px;}
.acc-badge{font-size:13px; font-weight:700; padding:5px 10px; border-radius:999px;}
.acc-good{background:rgba(63,143,95,0.12); color:var(--sage);}
.acc-mid{background:rgba(201,154,46,0.14); color:#8a6d1f;}
.acc-low{background:rgba(193,72,63,0.12); color:var(--brick);}
.acc-none{background:var(--divider); color:var(--muted);}

/* quiz card */
.progress-bar{height:4px; background:var(--divider); border-radius:2px; overflow:hidden;}
.progress-fill{height:100%; background:var(--teal); transition:width .25s ease;}
.q-meta{display:flex; align-items:center; justify-content:space-between; margin-top:4px;}
.q-count{font-size:12.5px; color:var(--muted);}
.tier-badge{font-size:10.5px; font-weight:700; padding:3px 8px; border-radius:999px; letter-spacing:.02em;}
.tier-gold{background:rgba(201,154,46,0.16); color:#8a6d1f;}
.tier-high{background:rgba(14,110,102,0.13); color:var(--teal-dark);}
.tier-med{background:rgba(91,102,112,0.14); color:var(--muted);}
.tier-low{background:rgba(193,72,63,0.12); color:var(--brick);}
.tier-recon{background:rgba(124,77,196,0.14); color:#6B3FA0;}
.frca-badge{font-size:10.5px; font-weight:800; padding:3px 8px; border-radius:999px; letter-spacing:.03em; background:rgba(38,86,160,0.14); color:#2656A0;}

.q-card{background:var(--surface); border:1px solid var(--divider); border-radius:var(--radius); padding:20px; margin-top:6px;}
.q-stem{font-size:16.5px; font-weight:600; line-height:1.42; margin-bottom:16px;}
.option{
  display:block; width:100%; text-align:left; padding:13px 14px; margin-bottom:9px;
  border:1.5px solid var(--divider); border-radius:11px; background:#fff; font-size:14.5px;
  color:var(--ink); cursor:pointer; transition:border-color .12s, background .12s;
}
.option:active{background:#F0F2F1;}
.option.correct{border-color:var(--sage); background:rgba(63,143,95,0.09); font-weight:600;}
.option.incorrect{border-color:var(--brick); background:rgba(193,72,63,0.08);}
.option.disabled{pointer-events:none;}
.option.reveal-correct{border-color:var(--sage); background:rgba(63,143,95,0.09);}

.q-actions{display:flex; gap:10px; margin-top:16px;}
.btn{
  flex:1; padding:13px; border-radius:11px; border:none; font-weight:700; font-size:14.5px; cursor:pointer;
}
.btn-primary{background:var(--teal); color:#fff;}
.btn-ghost{background:none; border:1.5px solid var(--divider); color:var(--ink);}
.q-tools{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px; flex-wrap:wrap;}
.flag-btn{
  border:none; background:none; color:var(--muted); font-size:12.5px; cursor:pointer;
  display:flex; align-items:center; gap:5px; padding:6px 2px;
}
.flag-btn.flagged{color:var(--gold); font-weight:700;}
.report-btn{
  border:none; background:none; color:var(--muted); font-size:12.5px; cursor:pointer;
  display:flex; align-items:center; gap:5px; padding:6px 2px;
}
.report-btn:hover{color:var(--brick);}
.stat-box.clickable{cursor:pointer;}
.stat-box.clickable:hover{border-color:var(--gold);}
.explain-box{margin-top:12px; padding:12px 14px; background:#F0F2F1; border-radius:11px; font-size:13px; color:var(--muted); line-height:1.5;}
.explain-box b{color:var(--ink);}

/* results */
.score-hero{background:var(--surface); border:1px solid var(--divider); border-radius:var(--radius); padding:26px 20px; text-align:center;}
.score-num{font-size:40px; font-weight:800; color:var(--teal);}
.score-lbl{font-size:13px; color:var(--muted); margin-top:2px;}
.missed-item{background:var(--surface); border:1px solid var(--divider); border-radius:11px; padding:13px 15px;}
.missed-item .stem{font-size:13.5px; font-weight:600; margin-bottom:4px;}
.missed-item .ans{font-size:12.5px; color:var(--sage);}

/* study list */
.study-item{background:var(--surface); border:1px solid var(--divider); border-radius:12px; padding:14px 16px; cursor:pointer;}
.study-item .stem{font-size:14px; font-weight:600; margin-bottom:6px;}
.study-item .options-list{font-size:13px; color:var(--muted); line-height:1.6; display:none;}
.study-item.expanded .options-list{display:block;}
.study-item .opt-line{padding:2px 0;}
.study-item .opt-line.correct{color:var(--sage); font-weight:600;}
.study-item .tags{display:flex; gap:6px; margin-top:8px; flex-wrap:wrap;}

.empty-state{text-align:center; padding:40px 20px; color:var(--muted); font-size:14px;}

/* auth */
.auth-wrap{padding-top:7vh; display:flex; flex-direction:column; gap:14px; width:100%; max-width:400px; align-self:center;}
.auth-mascot{text-align:center;}
.auth-mascot img{width:450px; height:auto; max-width:100%;}
.auth-tagline{font-size:13.5px; color:var(--teal-dark); text-align:center; font-weight:600; line-height:1.4; margin:-4px auto 6px; max-width:300px;}
.auth-title{font-weight:700; font-size:20px; text-align:center; margin-bottom:2px;}
.auth-sub{font-size:13px; color:var(--muted); text-align:center; margin-bottom:8px;}
.field{display:flex; flex-direction:column; gap:5px;}
.field label{font-size:12.5px; font-weight:600; color:var(--muted);}
.field input{
  padding:12px 13px; border:1.5px solid var(--divider); border-radius:11px; font-size:14.5px;
  background:#fff; color:var(--ink);
}
.field input:focus{outline:none; border-color:var(--teal);}
.auth-error{background:rgba(193,72,63,0.09); color:var(--brick); border-radius:10px; padding:10px 13px; font-size:13px;}
.auth-notice{background:rgba(14,110,102,0.09); color:var(--teal-dark); border-radius:10px; padding:10px 13px; font-size:13px;}
.auth-switch{text-align:center; font-size:13px; color:var(--muted); margin-top:4px;}
.auth-switch a{color:var(--teal-dark); font-weight:600; cursor:pointer; text-decoration:none;}
.auth-back{text-align:center; font-size:12.5px; margin-top:22px;}
.auth-back a{color:var(--muted); text-decoration:none;}
.auth-back a:hover{color:var(--ink);}
.app-foot{text-align:center; font-size:12px; color:var(--muted); margin-top:26px; padding-bottom:6px;}
.app-foot a{color:var(--muted); text-decoration:none;}
.app-foot a:hover{color:var(--ink);}
.auth-forgot{text-align:right; font-size:12.5px; color:var(--muted); cursor:pointer; margin-top:8px;}

/* loading */
.loading-wrap{padding-top:35vh; text-align:center; color:var(--muted); font-size:14px;}

/* account row */
.account-row{display:flex; align-items:center; justify-content:space-between; padding:0 2px;}
.account-email{font-size:12px; color:var(--muted);}
.logout-link{font-size:12px; color:var(--muted); background:none; border:none; cursor:pointer; text-decoration:underline;}

/* paywall / upsell */
.upsell-card{
  background:linear-gradient(135deg, rgba(14,110,102,0.08), rgba(201,154,46,0.08));
  border:1.5px solid var(--teal); border-radius:var(--radius); padding:20px; text-align:center;
}
.upsell-card .headline{font-weight:700; font-size:16px; margin-bottom:4px;}
.upsell-card .sub{font-size:13px; color:var(--muted); margin-bottom:14px; line-height:1.4;}
.mode-card.locked{opacity:0.55; position:relative;}
.mode-card .lock-tag{font-size:10px; font-weight:700; color:var(--gold); letter-spacing:.03em; margin-top:4px;}

/* ===== public landing pages (index.html, about.html) ===== */
.landing{max-width:960px; margin:0 auto; padding:0 22px 72px; min-height:100vh;}
.landing-nav{display:flex; align-items:center; justify-content:space-between; padding:16px 0; position:sticky; top:0; background:var(--bg); z-index:5;}
.landing-nav .nav-links{display:flex; align-items:center; gap:18px;}
.landing-nav .nav-links a{color:var(--muted); text-decoration:none; font-size:14px; font-weight:600;}
.landing-nav .nav-links a:hover{color:var(--ink);}
.landing-nav .nav-cta{background:var(--teal); color:#fff !important; padding:8px 16px; border-radius:10px;}

/* hero — explicit vertical column (overrides the global header{display:flex}) */
.hero{display:flex; flex-direction:column; align-items:center; text-align:center; padding:24px 0 8px;}
.hero .hero-mascot{width:820px; max-width:100%; height:auto; margin-bottom:4px;}
.hero h1{font-size:44px; font-weight:800; letter-spacing:-0.02em; margin:0 0 12px;}
.hero .tagline{font-size:17px; color:var(--teal-dark); font-weight:600; max-width:440px; margin:0 0 28px; line-height:1.45;}
@media(max-width:600px){ .hero h1{font-size:34px;} }

.cta-row{display:flex; flex-direction:column; align-items:center; gap:14px;}
.btn-lg{padding:14px 32px; font-size:15px; border-radius:12px; font-weight:700; text-decoration:none; display:inline-block; cursor:pointer; border:none;}
.btn-lg.primary{background:var(--teal); color:#fff;}
.btn-lg.primary:hover{background:var(--teal-dark);}
.text-link{color:var(--teal-dark); font-weight:600; font-size:14px; text-decoration:none;}
.text-link:hover{text-decoration:underline;}

.section-title{font-size:20px; font-weight:800; letter-spacing:-0.01em; text-align:center; margin:56px 0 22px;}

/* simple "what you get" bullet list — no cards */
.get-list{list-style:none; padding:0; margin:0 auto; max-width:620px;}
.get-list li{position:relative; padding-left:30px; margin-bottom:16px; font-size:15px; line-height:1.5; color:var(--ink);}
.get-list li::before{content:"✓"; position:absolute; left:0; top:-1px; color:var(--teal); font-weight:800; font-size:16px;}

/* closing pricing note */
.pricing{text-align:center; margin-top:56px;}
.pricing .lead{font-size:17px; font-weight:800; margin-bottom:6px;}
.pricing .note{font-size:14.5px; color:var(--muted); max-width:400px; margin:0 auto 22px; line-height:1.55;}

.landing-prose{max-width:720px; margin:0 auto;}
.landing-prose h2{font-size:20px; margin:28px 0 8px;}
.landing-prose p, .landing-prose li{font-size:15px; color:var(--ink); line-height:1.6;}
.landing-prose li{margin-bottom:6px;}
.landing-footer{text-align:center; color:var(--muted); font-size:12.5px; padding:36px 0 10px;}
.landing-footer a{color:var(--muted);}

::-webkit-scrollbar{display:none;}