:root{--navy:#1f3b63;--navy-d:#152a47;--amber:#f2a541;--amber-d:#d98c1f;--green:#2e7d32;--red:#c62828;--bg:#f4f6f9;--card:#fff;--ink:#1f2937;--muted:#6b7280;--line:#e5e7eb;--radius:14px;--shadow:0 1px 2px rgba(16,24,40,.06),0 4px 14px rgba(16,24,40,.06)}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
a{color:var(--navy)}h1,h2,h3{line-height:1.2;margin:.2em 0 .5em}h1{font-size:1.75rem}h2{font-size:1.25rem}
.container{max-width:1040px;margin:0 auto;padding:20px 16px 48px}
.muted{color:var(--muted)}.small{font-size:.875rem}.good{color:var(--green)}.bad{color:var(--red)}
.inline{display:inline}
/* top bar */
.topbar{background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:10px 16px;gap:12px;flex-wrap:wrap;position:sticky;top:0;z-index:5}
.topbar nav{display:flex;gap:4px;flex-wrap:wrap;align-items:center}
.topbar nav a,.topbar nav button{color:#fff;text-decoration:none;padding:8px 12px;border-radius:8px;font-weight:600;background:none;border:0;font:inherit;cursor:pointer}
.topbar nav a:hover,.topbar nav button:hover{background:rgba(255,255,255,.12)}
.brand{display:inline-flex;align-items:center;gap:10px;color:inherit;text-decoration:none;font-weight:800;font-size:1.1rem;letter-spacing:.2px}
.brand.big{font-size:1.5rem;color:var(--navy)}.brand.small{font-size:1rem;color:var(--navy)}
.brand-mark{width:26px;height:26px;border-radius:7px;background:linear-gradient(135deg,var(--amber),var(--amber-d));position:relative;flex:none}
.brand-mark::after{content:"";position:absolute;left:11px;top:4px;width:4px;height:18px;background:repeating-linear-gradient(var(--navy) 0 5px,transparent 5px 8px);border-radius:1px}
.linklike{background:none;border:0;color:var(--navy);text-decoration:underline;cursor:pointer;font:inherit;padding:0}
.foot{max-width:1040px;margin:0 auto;padding:0 16px 32px;color:var(--muted);font-size:.8rem}
/* buttons & forms */
.btn{display:inline-block;padding:10px 18px;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--ink);font:inherit;font-weight:600;cursor:pointer;text-decoration:none;box-shadow:0 1px 0 rgba(0,0,0,.03)}
.btn:hover{background:#f9fafb}.btn.primary{background:var(--navy);border-color:var(--navy);color:#fff}.btn.primary:hover{background:var(--navy-d)}
.btn.danger{background:var(--red);border-color:var(--red);color:#fff}.btn.wide{width:100%}.btn.big{font-size:1.1rem;padding:14px 26px}.btn.small{padding:6px 12px;font-size:.875rem}
label{display:block;font-weight:600;margin:12px 0 4px}label.check{display:flex;align-items:center;gap:8px;font-weight:500}
input[type=text],input[type=password],input:not([type]){width:100%;padding:11px 12px;border:1px solid #cfd4dc;border-radius:10px;font:inherit;background:#fff}
input:focus{outline:2px solid var(--amber);outline-offset:1px;border-color:var(--amber)}
.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;align-items:end;background:var(--card);padding:16px;border-radius:var(--radius);box-shadow:var(--shadow)}
.form-row label{margin:0}.form-row .btn{height:44px}
.auth-card{max-width:400px;margin:8vh auto 0;background:var(--card);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow);text-align:center}
.auth-card form{text-align:left}.auth-card .btn{margin-top:16px}
.error{background:#fdecec;color:#8a1f1f;border:1px solid #f5c2c2;padding:10px 12px;border-radius:10px;margin:12px 0}
.flash{background:#e8f5e9;color:#1b5e20;border:1px solid #c8e6c9;padding:10px 12px;border-radius:10px;margin:0 0 12px}
.banner{background:#fff8e6;border:1px solid #f6dfae;padding:12px 14px;border-radius:10px;margin:14px 0}.banner.good{background:#e8f5e9;border-color:#c8e6c9}
.badge{background:var(--red);color:#fff;border-radius:999px;padding:1px 8px;font-size:.8rem}
code.pw{font-size:1.15rem;background:#fff;padding:4px 8px;border-radius:6px;border:1px solid var(--line)}
/* progress strip */
.greet{margin-bottom:12px}
.progress-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 0 22px}
.pcard{background:var(--card);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow)}
.plabel{font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700}
.pbig{font-size:1.9rem;font-weight:800;line-height:1.15;margin:4px 0}.pof{font-size:1rem;color:var(--muted);font-weight:600;margin-left:2px}
.psub{font-size:.85rem;color:var(--muted)}
.bar{height:10px;background:#e9edf3;border-radius:999px;overflow:hidden;margin:6px 0}.bar.slim{height:6px;margin:8px 0 14px}
.fill{height:100%;background:linear-gradient(90deg,var(--green),#5cb860);border-radius:999px;transition:width .3s}.fill.warn{background:linear-gradient(90deg,var(--amber-d),var(--amber))}
/* dashboard tiles */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.tile{display:block;background:var(--card);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);text-decoration:none;color:var(--ink);border:2px solid transparent;transition:transform .12s,border-color .12s}
.tile:hover{transform:translateY(-2px);border-color:var(--amber)}.tile h2{margin:6px 0}.tile p{color:var(--muted);margin:0 0 10px}
.tile-icon{font-size:1.8rem}.tile-cta{font-weight:700;color:var(--navy)}.tile.locked{opacity:.75}.tile.locked .tile-cta{color:var(--muted)}
/* chapter list */
.chapter-list{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.chapter-link{display:grid;grid-template-columns:44px 1fr auto;gap:14px;align-items:center;background:var(--card);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow);text-decoration:none;color:var(--ink);border-left:5px solid var(--line)}
.chapter-row.done .chapter-link{border-left-color:var(--green)}
.chnum{width:40px;height:40px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800}
.chapter-row.done .chnum{background:var(--green)}
.chbody{display:flex;flex-direction:column}.chtitle{font-weight:700}.chsum{color:var(--muted);font-size:.92rem}.chmeta{color:var(--muted);font-size:.8rem;margin-top:2px}
.chstate{font-size:.85rem;font-weight:700;color:var(--muted);white-space:nowrap}.chapter-row.done .chstate{color:var(--green)}
/* chapter prose */
.crumbs{color:var(--muted);font-size:.9rem;margin-bottom:6px}
.chapter{background:var(--card);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}
.prose{max-width:72ch;font-size:1.04rem}.prose h2{margin-top:1.6em;padding-top:.4em;border-top:1px solid var(--line)}.prose h3{margin-top:1.2em}
.prose blockquote{margin:1em 0;padding:10px 14px;background:#fff8e6;border-left:4px solid var(--amber);border-radius:8px}
.prose table{border-collapse:collapse;width:100%;font-size:.95rem}.prose th,.prose td{border:1px solid var(--line);padding:6px 8px;text-align:left}
.prose img{max-width:100%}
figure.sign{display:inline-block;margin:6px 10px 6px 0;text-align:center;vertical-align:top;width:132px}
figure.sign img{width:120px;height:120px}figure.sign figcaption{font-size:.78rem;color:var(--muted);line-height:1.2}
a.cite{font-size:.72rem;color:var(--muted);text-decoration:none;border:1px solid var(--line);border-radius:6px;padding:0 5px;margin-left:3px;white-space:nowrap;vertical-align:middle}
a.cite:hover{border-color:var(--navy);color:var(--navy)}
.kc-box{background:var(--card);border-radius:var(--radius);padding:20px 24px;margin:18px 0;box-shadow:var(--shadow);border:2px solid var(--amber)}
.kc-box.done{border-color:var(--green)}.kc-box .btn{margin-right:8px}
.pager{display:flex;justify-content:space-between;gap:12px;margin:14px 0}
/* quiz */
.quiz{max-width:720px;margin:0 auto}
.quiz-head{display:flex;justify-content:space-between;color:var(--muted);font-size:.9rem;font-weight:600}
.qcard{background:var(--card);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}
.stem{font-size:1.15rem;font-weight:600;margin:0 0 14px}
figure.qsign{margin:0 0 12px;text-align:center}figure.qsign img{width:180px;height:180px}figure.qsign.small img{width:110px;height:110px}
.choices{display:grid;gap:8px}
.choice{display:flex;gap:12px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:10px;cursor:pointer;margin:0;font-weight:500}
.choice:hover{border-color:var(--navy)}.choice:has(input:checked){border-color:var(--navy);background:#eef3fa;box-shadow:inset 0 0 0 1px var(--navy)}
.choice input{position:absolute;opacity:0;width:0;height:0}
.cletter{flex:none;width:30px;height:30px;border-radius:50%;background:#e9edf3;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.9rem}
.choice:has(input:checked) .cletter{background:var(--navy);color:#fff}
.qnav{display:flex;justify-content:space-between;gap:10px;margin-top:18px}
/* results */
.results-head{background:var(--card);border-radius:var(--radius);padding:20px 24px;box-shadow:var(--shadow);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:6px solid var(--green);margin-bottom:18px}
.results-head.bad{border-top-color:var(--red)}.results-head h1{margin:4px 0}.results-head .actions{display:flex;gap:8px;align-items:flex-start;flex-wrap:wrap}
.section-scores{display:flex;gap:14px;flex-wrap:wrap;margin:8px 0}.secscore{padding:8px 14px;border-radius:10px;background:#f3f5f8;border-left:4px solid var(--green)}.secscore.bad{border-left-color:var(--red)}
.review-list{display:grid;gap:12px}
.review{background:var(--card);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow);border-left:5px solid var(--red)}.review.ok{border-left-color:var(--green)}
.review-head{display:flex;justify-content:space-between;margin-bottom:6px}
.pill{display:inline-block;padding:2px 10px;border-radius:999px;font-size:.8rem;font-weight:700;background:#e9edf3;color:var(--muted)}
.pill.good{background:#e8f5e9;color:var(--green)}.pill.bad{background:#fdecec;color:var(--red)}
.tag{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:1px 6px;border-radius:5px;margin-left:6px}.tag.good{background:#e8f5e9;color:var(--green)}.tag.bad{background:#fdecec;color:var(--red)}
ul.explain{list-style:none;padding:0;margin:0;display:grid;gap:6px}
ul.explain li{padding:8px 10px;border-radius:8px;border:1px solid var(--line)}
ul.explain li.is-correct{border-color:#a5d6a7;background:#f1f8f1}ul.explain li.is-chosen{border-color:#ef9a9a;background:#fdf4f4}
.ctext{font-weight:600}.cwhy{color:#374151;font-size:.93rem;margin-top:2px}
.cite-line{font-size:.8rem;color:var(--muted);margin:10px 0 0}
.toggle-row{margin:0 0 10px;font-weight:600}body.hide-ok .review.ok{display:none}
/* tables */
.table{width:100%;border-collapse:collapse;background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;font-size:.95rem;margin:0 0 20px}
.table th,.table td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}.table th{background:#f3f5f8;font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.table tr:last-child td{border-bottom:0}.table tr.unseen td{background:#fffbea}.actions-cell{white-space:nowrap}.actions-cell form{margin-left:8px}.actions-cell a{margin-right:4px}
.rules-card{background:var(--card);border-radius:var(--radius);padding:20px 24px;box-shadow:var(--shadow);margin-bottom:20px}.rules-card li{margin:6px 0}
/* exam mode */
body.exam-mode{background:#eef1f5}
#exam{max-width:760px;margin:0 auto}
.exam-top{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:4px 0}
#exam-pos{font-weight:700;color:var(--muted)}
.overlay{position:fixed;inset:0;background:rgba(15,23,42,.72);display:flex;align-items:center;justify-content:center;z-index:50;padding:16px}
.overlay.hidden{display:none}.modal{background:#fff;border-radius:var(--radius);padding:24px;max-width:460px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.modal h2{margin-top:0}
/* responsive */
@media (max-width:760px){.progress-strip,.tiles{grid-template-columns:1fr}.chapter-link{grid-template-columns:36px 1fr}.chstate{grid-column:2}.chnum{width:34px;height:34px}
 .chapter{padding:18px 16px}.pbig{font-size:1.6rem}.results-head{flex-direction:column}.table{display:block;overflow-x:auto}h1{font-size:1.5rem}.topbar nav a,.topbar nav button{padding:6px 9px;font-size:.92rem}}
/* polish from browser QA */
.quiz-head span:last-child{white-space:nowrap;margin-left:12px}
.scroll-hint{display:none}
@media (max-width:760px){
 a.cite{font-size:.8rem;padding:4px 7px;margin:2px 2px 2px 3px;display:inline-block;min-height:28px;line-height:20px}
 .scroll-hint{display:block;margin:-14px 0 16px}
 .actions-cell a,.actions-cell .linklike{display:inline-block;padding:6px 4px}
 .table a{display:inline-block;padding:4px 2px}
 label.check input{width:20px;height:20px}
}