:root {
  --ink: #1c2f2a;
  --muted: #73807a;
  --paper: #f6f7f3;
  --surface: #ffffff;
  --line: #e4e9e2;
  --forest: #153e35;
  --forest-2: #204d42;
  --lime: #d7f26a;
  --mint: #e8f5eb;
  --blue: #e9f0ff;
  --lavender: #f0eaff;
  --peach: #fff0e4;
  --sage: #e5f0df;
  --warning: #fff4d9;
  --shadow: 0 14px 40px rgba(23, 56, 47, .07);
  --radius: 18px;
  --font-scale: 1;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: calc(16px * var(--font-scale)); }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: 'DM Sans', sans-serif; line-height: 1.55; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid #7db56b; outline-offset: 3px; }
a { color: inherit; }
.skip-link { position: fixed; z-index: 999; top: -50px; left: 15px; background: var(--lime); color: var(--ink); padding: 10px 14px; border-radius: 8px; }
.skip-link:focus { top: 10px; }
#app { min-height: 100vh; }
.shell { min-height: 100vh; display: grid; grid-template-columns: 252px minmax(0,1fr); }
.sidebar { background: var(--forest); color: #f4f8f3; padding: 26px 16px 18px; display:flex; flex-direction:column; gap: 30px; min-height:100vh; position: sticky; top:0; height:100vh; overflow-y:auto; }
.brand { display:flex; gap:12px; align-items:center; padding: 0 10px; }
.brand-mark { width:38px; height:38px; display:grid; place-items:center; background:var(--lime); color:var(--forest); border-radius:13px; font-size:calc(23px * var(--font-scale)); font-weight:800; font-family:Manrope,sans-serif; transform:rotate(-4deg); }
.brand-name { font:800 18px/1.1 Manrope,sans-serif; letter-spacing:-.6px; }
.brand-sub { color:#a9c0b4; font-size:calc(10px * var(--font-scale)); letter-spacing:1.2px; text-transform:uppercase; margin-top:5px; }
.nav-section { display:flex; flex-direction:column; gap:6px; }
.nav-label { color:#91ada1; text-transform:uppercase; font-weight:700; font-size:calc(10px * var(--font-scale)); letter-spacing:1.6px; padding:0 13px 7px; }
.nav-button { appearance:none; border:0; width:100%; padding:11px 13px; display:flex; align-items:center; gap:12px; text-align:left; color:#c6d6ce; background:transparent; border-radius:12px; font-weight:600; font-size:calc(13px * var(--font-scale)); transition:.16s ease; }
.nav-button:hover { background:rgba(255,255,255,.07); color:#fff; }
.nav-button.active { background:#254e43; color:#fff; box-shadow:inset 3px 0 var(--lime); }
.nav-icon { display:grid; place-items:center; width:21px; font-size:calc(17px * var(--font-scale)); }
.nav-count { margin-left:auto; color:#e3f4aa; font-size:calc(11px * var(--font-scale)); }
.sidebar-bottom { margin-top:auto; }
.help-card { padding:16px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.08); border-radius:16px; }
.help-icon { color:var(--lime); font-size:calc(20px * var(--font-scale)); }
.help-title { font:700 13px Manrope,sans-serif; margin:7px 0 5px; }
.help-copy { color:#b4c7bd; font-size:calc(11px * var(--font-scale)); line-height:1.55; }
.sidebar-disclaimer { color:#89a499; font-size:calc(10px * var(--font-scale)); padding:0 10px; line-height:1.5; }
.main-area { min-width:0; }
.topbar { height:78px; display:flex; justify-content:space-between; align-items:center; gap:18px; padding:0 42px; background:rgba(255,255,255,.75); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20; backdrop-filter:blur(14px); }
.top-context { display:flex; flex-direction:column; min-width:0; }
.crumb { font-size:calc(11px * var(--font-scale)); color:#8b9891; margin-bottom:2px; }
.top-heading { font:700 14px Manrope,sans-serif; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.top-actions { display:flex; gap:10px; align-items:center; }
.search-wrap { position:relative; width:min(300px, 32vw); }
.search-wrap .search-icon { position:absolute; top:50%; left:13px; transform:translateY(-50%); color:#8c9992; font-size:calc(15px * var(--font-scale)); }
.search-input { width:100%; background:#f8faf7; border:1px solid var(--line); border-radius:11px; padding:10px 13px 10px 36px; font-size:calc(12px * var(--font-scale)); color:var(--ink); }
.icon-button { border:1px solid var(--line); background:#fff; width:38px; height:38px; border-radius:11px; color:#52645b; display:grid; place-items:center; }
.icon-button:hover { background:#f1f6ec; }
.avatar { border:0; width:38px; height:38px; border-radius:50%; background:#d8ecbb; color:#31513d; font-size:calc(12px * var(--font-scale)); font-weight:800; }
.content { max-width:1500px; padding:32px 42px 56px; margin:0 auto; min-width:0; }
.eyebrow { display:inline-flex; align-items:center; gap:8px; text-transform:uppercase; letter-spacing:1.5px; font-size:calc(10px * var(--font-scale)); font-weight:800; color:#5a806b; }
.eyebrow-dot { width:6px;height:6px;border-radius:50%;background:#8bbc63; }
h1,h2,h3,h4,p { margin-top:0; }
h1,h2,h3,h4 { font-family:Manrope,sans-serif; letter-spacing:-.8px; }
h1 { font-size:clamp(27px, 3vw, 38px); line-height:1.16; margin:10px 0 13px; }
h2 { font-size:calc(23px * var(--font-scale)); line-height:1.25; margin-bottom:8px; }
h3 { font-size:calc(16px * var(--font-scale)); line-height:1.3; margin-bottom:8px; }
p { color:#66766e; }
.muted { color:var(--muted); }
.small { font-size:calc(12px * var(--font-scale)); }
.tiny { font-size:calc(10px * var(--font-scale)); }
.row { display:flex; align-items:center; gap:12px; }
.row-between { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.grid { display:grid; gap:18px; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 2px 5px rgba(28,47,42,.015); }
.card-pad { padding:22px; }
.section-block { margin-top:32px; }
.section-head { display:flex; align-items:end; justify-content:space-between; gap:15px; margin-bottom:17px; }
.section-head p { margin-bottom:0; font-size:calc(12px * var(--font-scale)); }
.btn { border:1px solid transparent; background:var(--forest); color:white; border-radius:11px; padding:11px 15px; display:inline-flex; align-items:center; justify-content:center; gap:9px; font-weight:700; font-size:calc(12px * var(--font-scale)); transition:.15s ease; text-decoration:none; }
.btn:hover { background:#285549; transform:translateY(-1px); }
.btn-lime { background:var(--lime); color:#263d2e; }
.btn-lime:hover { background:#cbe957; }
.btn-outline { border-color:var(--line); background:#fff; color:var(--ink); }
.btn-outline:hover { background:#f8faf5; }
.btn-ghost { color:#436455; background:transparent; padding-left:8px; padding-right:8px; }
.btn-ghost:hover { background:#eef4ed; transform:none; }
.btn-sm { padding:8px 11px; border-radius:9px; font-size:calc(11px * var(--font-scale)); }
.pill { display:inline-flex; align-items:center; gap:5px; background:#f0f4ee; border-radius:100px; padding:5px 9px; color:#5c7265; font-size:calc(10px * var(--font-scale)); font-weight:700; white-space:nowrap; }
.pill.green { background:#e8f4db; color:#4d7134; }
.pill.blue { background:#e8f0ff; color:#506b9d; }
.pill.gold { background:#fff1d4; color:#8b6a20; }
.pill.gray { background:#f0f1ef; color:#6f7974; }
.progress-track { width:100%; height:6px; background:#edf0eb; overflow:hidden; border-radius:100px; }
.progress-fill { background:#91bf6c; height:100%; border-radius:100px; transition:width .25s; }
.hero { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(240px,.8fr); min-height:278px; background:#e7f1e4; border-radius:24px; overflow:hidden; position:relative; border:1px solid #dce8d8; }
.hero-copy { padding:30px 34px; position:relative; z-index:2; }
.hero h1 { max-width:610px; font-size:clamp(29px,3vw,41px); }
.hero p { max-width:590px; font-size:calc(13px * var(--font-scale)); line-height:1.7; }
.hero-meta { display:flex; align-items:center; gap:18px; margin-top:23px; }
.meta-item { display:flex; align-items:center; gap:8px; color:#4a6958; font-size:calc(11px * var(--font-scale)); font-weight:700; }
.meta-symbol { display:grid; place-items:center; height:28px;width:28px;background:rgba(255,255,255,.78);border-radius:9px;font-size:calc(14px * var(--font-scale)); }
.hero-art { min-height:278px; position:relative; overflow:hidden; background:#dbead3; }
.art-sun { width:128px;height:128px;border-radius:50%;background:#d9f078;position:absolute;right:68px;top:27px; }
.art-book { width:205px;height:150px;position:absolute;right:68px;bottom:39px;transform:rotate(-9deg);filter:drop-shadow(0 15px 11px rgba(41,68,45,.13)); }
.book-left,.book-right { position:absolute;top:0;width:101px;height:150px;background:#fcfff7;border:1px solid #d3ddcc; }
.book-left { left:0;border-radius:7px 0 0 7px; transform:skewY(3deg); }
.book-right { right:0;border-radius:0 7px 7px 0;transform:skewY(-3deg);background:#f2f6e9; }
.book-spine { position:absolute;left:101px;top:0;width:4px;height:150px;background:#bad0af;z-index:2; }
.book-left:before,.book-right:before { content:'';position:absolute;left:15px;right:13px;top:28px;height:2px;background:#b1c5ab;box-shadow:0 11px #d1ddcc,0 22px #d1ddcc,0 33px #d1ddcc,0 44px #d1ddcc,0 55px #d1ddcc; }
.book-stamp { position:absolute;z-index:3;left:24px;top:68px;width:53px;height:53px;border:1px solid #c1d7b6;border-radius:50%;display:grid;place-items:center;color:#69925e;font-size:calc(23px * var(--font-scale)); }
.art-leaf { position:absolute;width:55px;height:110px;border:9px solid #86aa83;border-left:0;border-bottom:0;border-radius:0 100% 0 100%;transform:rotate(20deg);bottom:10px;left:35px;opacity:.9; }
.art-leaf:after { content:'';position:absolute;top:37px;left:-14px;width:45px;height:8px;background:#86aa83;transform:rotate(-30deg);border-radius:20px; }
.art-orbit { position:absolute;width:280px;height:145px;border:1px solid rgba(85,125,83,.22);border-radius:50%;right:20px;top:65px;transform:rotate(-23deg); }
.art-spark { position:absolute;color:#6e9865;font-size:calc(21px * var(--font-scale)); }
.art-spark.one { top:25px;left:42px; } .art-spark.two { top:58px;right:35px;font-size:calc(14px * var(--font-scale)); }
.stat-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:20px; }
.stat-card { padding:17px 18px;display:flex;align-items:center;gap:13px;min-width:0; }
.stat-icon { width:40px;height:40px;display:grid;place-items:center;border-radius:13px;background:#edf5e8;font-size:calc(19px * var(--font-scale));flex-shrink:0; }
.stat-label { font-size:calc(11px * var(--font-scale));color:#7b8980; }
.stat-value { font:800 23px/1.25 Manrope,sans-serif;letter-spacing:-.7px; }
.stat-note { color:#78917c;font-size:calc(10px * var(--font-scale));margin-top:2px; }
.quick-course-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px; }
.course-card { padding:18px; display:flex;flex-direction:column;gap:13px;min-height:204px;cursor:pointer;transition:.17s; }
.course-card:hover { transform:translateY(-3px);box-shadow:var(--shadow);border-color:#cbdcc8; }
.course-cover { height:88px;border-radius:13px;position:relative;overflow:hidden;padding:13px;display:flex;align-items:flex-end; }
.cover-math { background:#e7eeff; } .cover-science { background:#e5f2e5; } .cover-language { background:#f5eafa; } .cover-social { background:#fff0df; } .cover-general { background:#edf2ed; }
.cover-blob { position:absolute; width:112px;height:112px;border-radius:50%;right:11px;top:-37px;background:rgba(255,255,255,.6); }
.cover-icon { position:relative;z-index:1;font-size:calc(28px * var(--font-scale)); }
.cover-label { position:relative;z-index:1;margin-left:auto;font:800 10px Manrope,sans-serif;letter-spacing:1px;color:rgba(35,65,49,.65);text-transform:uppercase; }
.course-card h3 { margin:0;font-size:calc(14px * var(--font-scale)); }
.course-card p { margin:0;font-size:calc(11px * var(--font-scale));line-height:1.5; }
.course-card-bottom { margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px; }
.stage-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px; }
.stage-card { padding:20px;cursor:pointer;transition:.17s;position:relative;overflow:hidden; }
.stage-card:hover { transform:translateY(-3px);box-shadow:var(--shadow); }
.stage-no { color:#7e9a83;font:800 11px Manrope,sans-serif;letter-spacing:1.4px; }
.stage-card h3 { font-size:calc(17px * var(--font-scale));margin-top:12px; }
.stage-card p { font-size:calc(12px * var(--font-scale));min-height:54px; }
.stage-grade-list { display:flex;flex-wrap:wrap;gap:5px;margin-top:14px; }
.grade-chip { border:1px solid #dbe5d7;background:#f7faf5;padding:5px 8px;border-radius:7px;font-size:calc(10px * var(--font-scale));color:#55715c; }
.subject-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px; }
.subject-tile { display:flex;align-items:center;gap:11px;padding:14px;border:1px solid var(--line);border-radius:13px;background:#fff;text-align:left;min-width:0; }
.subject-tile:hover { border-color:#bfd3b8;background:#fbfdf8; }
.subject-symbol { width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:#edf5e9;flex-shrink:0;font-size:calc(16px * var(--font-scale)); }
.subject-title { font-size:calc(11px * var(--font-scale));font-weight:800;display:block;line-height:1.35; }
.subject-meta { color:#8a958d;font-size:calc(10px * var(--font-scale));display:block;margin-top:3px; }
.notice { display:flex;gap:12px;padding:14px 16px;background:var(--warning);border:1px solid #f2e3b7;color:#7b6025;border-radius:13px;font-size:calc(12px * var(--font-scale));line-height:1.55; }
.notice strong { color:#59471d; }
.notice-icon { font-size:calc(17px * var(--font-scale)); }
.filters { display:flex;flex-wrap:wrap;gap:9px;align-items:center; }
.field, .select-field { background:#fff;border:1px solid var(--line);border-radius:10px;color:#4b5c52;font-size:calc(12px * var(--font-scale));padding:10px 12px; }
.field { min-width:180px; }
.catalog-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;margin-top:20px; }
.catalog-card { padding:17px;display:flex;flex-direction:column;gap:11px;min-height:185px; }
.catalog-card h3 { font-size:calc(14px * var(--font-scale));margin:0; }
.catalog-card p { font-size:calc(11px * var(--font-scale));margin:0;line-height:1.5; }
.catalog-bottom { display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto; }
.course-banner { padding:28px;background:#e7f1e4;position:relative;overflow:hidden;border:1px solid #dbe8d7;border-radius:22px; }
.course-banner h1 { font-size:clamp(28px,3vw,39px);max-width:650px; }
.course-banner p { max-width:690px;font-size:calc(13px * var(--font-scale));line-height:1.7; }
.course-tags { display:flex;gap:8px;flex-wrap:wrap;margin-top:18px; }
.course-summary-grid { display:grid;grid-template-columns:minmax(0,1.4fr) minmax(260px,.8fr);gap:18px;margin-top:18px; }
.unit-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px; }
.unit-card { padding:18px;cursor:pointer;position:relative;overflow:hidden;transition:.16s; }
.unit-card:hover { transform:translateY(-2px);box-shadow:var(--shadow); }
.unit-letter { width:43px;height:43px;display:grid;place-items:center;border-radius:14px;font:800 16px Manrope,sans-serif; }
.unit-letter.mint { background:#dff1dc;color:#4c7a51; } .unit-letter.blue { background:#e1ebff;color:#5275ad; } .unit-letter.lavender { background:#ece4ff;color:#7862a8; } .unit-letter.peach { background:#ffead8;color:#b97849; } .unit-letter.sage { background:#dcebd4;color:#5a8052; }
.unit-card h3 { margin:13px 0 6px; }
.unit-card p { font-size:calc(11px * var(--font-scale));line-height:1.55;min-height:36px; }
.unit-footer { display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:calc(10px * var(--font-scale));color:#86948b;margin-top:15px; }
.lesson-list { display:flex;flex-direction:column;gap:0; }
.lesson-row { display:flex;align-items:center;gap:12px;text-align:left;border:0;border-bottom:1px solid #edf0ec;background:transparent;padding:13px 0;width:100%; }
.lesson-row:last-child { border-bottom:0; }
.lesson-row:hover .lesson-no { background:#d8edbf; }
.lesson-no { width:35px;height:35px;border-radius:11px;display:grid;place-items:center;background:#edf4e8;color:#53734d;font-size:calc(11px * var(--font-scale));font-weight:800;flex-shrink:0; }
.lesson-name { font-size:calc(12px * var(--font-scale));font-weight:700;display:block; }
.lesson-sub { display:block;font-size:calc(10px * var(--font-scale));color:#8b9790;margin-top:3px; }
.lesson-chevron { margin-left:auto;color:#96a49a;font-size:calc(18px * var(--font-scale)); }
.progress-ring { width:83px;height:83px;border-radius:50%;background:conic-gradient(#8cbf68 var(--progress,0%),#e6eee3 0);display:grid;place-items:center;flex-shrink:0; }
.progress-ring-inner { width:68px;height:68px;background:white;border-radius:50%;display:grid;place-items:center;font:800 18px Manrope,sans-serif; }
.side-list { display:flex;flex-direction:column;gap:14px; }
.side-list-item { display:flex;align-items:center;gap:11px; }
.side-list-icon { width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:#eff5eb;font-size:calc(15px * var(--font-scale)); }
.side-list-item strong { display:block;font-size:calc(11px * var(--font-scale)); }
.side-list-item span { display:block;font-size:calc(10px * var(--font-scale));color:#8b978f;margin-top:2px; }
.lesson-layout { display:grid;grid-template-columns:235px minmax(0,1fr) 220px;gap:18px;align-items:start; }
.lesson-nav-card { position:sticky;top:96px;max-height:calc(100vh - 120px);overflow:auto;padding:17px; }
.lesson-nav-unit { font-size:calc(10px * var(--font-scale));text-transform:uppercase;letter-spacing:1.2px;color:#86998d;font-weight:800;padding:6px 6px 10px; }
.lesson-nav-link { display:flex;gap:10px;align-items:flex-start;width:100%;text-align:left;border:0;background:transparent;border-radius:10px;padding:10px 9px;color:#697971;font-size:calc(11px * var(--font-scale));line-height:1.45; }
.lesson-nav-link:hover { background:#f4f8f1; }
.lesson-nav-link.active { background:#eaf4e2;color:#315b3c;font-weight:800; }
.lesson-nav-link.done .nav-lesson-indicator { background:#8dbd6c;color:#fff; }
.nav-lesson-indicator { display:grid;place-items:center;width:22px;height:22px;border-radius:7px;background:#f0f3ef;font-size:calc(9px * var(--font-scale));flex-shrink:0; }
.lesson-article { min-width:0; }
.lesson-head-card { padding:25px 27px 21px; }
.lesson-title { font-size:clamp(28px,3vw,37px);line-height:1.2;margin:10px 0 10px; }
.lesson-lead { font-size:calc(15px * var(--font-scale));color:#53685a;line-height:1.7;margin:0; }
.lesson-metadata { display:flex;align-items:center;gap:15px;flex-wrap:wrap;margin-top:17px;color:#839088;font-size:calc(10px * var(--font-scale)); }
.lesson-section { padding:22px 26px;border-bottom:1px solid #edf0ec; }
.lesson-section:last-child { border-bottom:0; }
.lesson-section h2 { font-size:calc(20px * var(--font-scale));margin-bottom:12px; }
.lesson-section p { font-size:calc(14px * var(--font-scale));line-height:1.85;color:#53675c;margin-bottom:0; }
.lesson-section .example-box { border-left:3px solid #9ecb7a;background:#f4f8ed;padding:13px 15px;border-radius:0 10px 10px 0;margin-top:16px;font-size:calc(12px * var(--font-scale));color:#506c51; }
.lesson-main-card { margin-top:16px;overflow:hidden; }
.lesson-action-bar { display:flex;justify-content:space-between;align-items:center;gap:12px;padding:17px 22px;background:#fbfcf9;border-top:1px solid var(--line); }
.term-list { display:flex;flex-direction:column;gap:14px; }
.term-item strong { display:block;font-size:calc(11px * var(--font-scale)); }
.term-item p { margin:3px 0 0;font-size:calc(10px * var(--font-scale));line-height:1.5; }
.goal-list { display:flex;flex-direction:column;gap:10px; }
.goal { display:flex;gap:8px;align-items:flex-start;font-size:calc(11px * var(--font-scale));color:#61746a; }
.goal i { font-style:normal;display:grid;place-items:center;width:18px;height:18px;border-radius:6px;background:#eaf4e1;color:#5a8646;font-size:calc(10px * var(--font-scale));flex-shrink:0; }
.lesson-footer-nav { display:flex;justify-content:space-between;gap:12px;margin-top:18px; }
.breadcrumb-line { display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:#839087;font-size:calc(11px * var(--font-scale));margin-bottom:20px; }
.breadcrumb-line button { border:0;background:none;padding:0;color:#66856c;font-size:calc(11px * var(--font-scale)); }
.quiz-shell { max-width:860px;margin:0 auto; }
.quiz-hero { padding:25px;background:#e8f2e4;border:1px solid #dbe7d5;border-radius:20px; }
.quiz-progress-top { display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:calc(11px * var(--font-scale));color:#6f8772;margin-bottom:9px; }
.quiz-question-card { padding:22px;margin-top:14px; }
.quiz-q-number { color:#83a66c;font-size:calc(10px * var(--font-scale));font-weight:800;letter-spacing:1px;text-transform:uppercase; }
.quiz-question-card h3 { font-size:calc(17px * var(--font-scale));margin:9px 0 16px; }
.answer-option { display:flex;align-items:flex-start;gap:10px;border:1px solid #e4eae1;border-radius:11px;padding:12px 13px;margin-top:8px;font-size:calc(12px * var(--font-scale));color:#52665a;cursor:pointer;transition:.14s; }
.answer-option:hover { background:#f8fbf6;border-color:#cbdcc4; }
.answer-option.selected { background:#edf6e6;border-color:#9bbc83;color:#31563a; }
.answer-option.correct { background:#e6f5e1;border-color:#7dbb73;color:#315f30; }
.answer-option.incorrect { background:#fff0ec;border-color:#e6a99c;color:#8b473c; }
.option-letter { display:grid;place-items:center;width:23px;height:23px;border-radius:7px;background:#f0f3ef;font-weight:800;font-size:calc(10px * var(--font-scale));flex-shrink:0; }
.answer-option.selected .option-letter { background:#d6eabe; }
.answer-feedback { margin-top:12px;border-radius:10px;padding:10px 12px;font-size:calc(11px * var(--font-scale));line-height:1.55; }
.answer-feedback.good { background:#edf7e8;color:#38633c; } .answer-feedback.bad { background:#fff1ec;color:#8a4d3f; }
.quiz-controls { margin-top:18px;display:flex;align-items:center;justify-content:space-between;gap:12px; }
.score-card { padding:24px;text-align:center;margin-top:17px; }
.score-circle { width:95px;height:95px;border-radius:50%;background:#e6f2df;color:#386341;display:grid;place-items:center;margin:5px auto 15px;font:800 24px Manrope,sans-serif; }
.empty-state { text-align:center;padding:38px 22px; }
.empty-illustration { font-size:calc(34px * var(--font-scale));margin-bottom:10px; }
.empty-state h2 { font-size:calc(22px * var(--font-scale)); }
.empty-state p { max-width:520px;margin:0 auto 17px;font-size:calc(12px * var(--font-scale));line-height:1.7; }
.coverage-kpis { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px; }
.coverage-table { width:100%;border-collapse:collapse;font-size:calc(11px * var(--font-scale)); }
.coverage-table th,.coverage-table td { padding:13px 12px;text-align:left;border-bottom:1px solid #edf0ec;vertical-align:middle; }
.coverage-table th { color:#829087;font-size:calc(10px * var(--font-scale));text-transform:uppercase;letter-spacing:.7px;font-weight:800; }
.coverage-table td { color:#52665a; }
.coverage-table tr:last-child td { border-bottom:0; }
.table-wrap { overflow:auto; }
.resource-links { display:flex;flex-direction:column;gap:9px; }
.resource-link { display:flex;gap:10px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:11px;text-decoration:none;font-size:calc(11px * var(--font-scale));background:#fff; }
.resource-link:hover { background:#f8fbf5;border-color:#cbdcc4; }
.resource-link span:last-child { margin-left:auto;color:#829087; }
.setting-row { display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 0;border-bottom:1px solid #edf0ec; }
.setting-row:last-child { border-bottom:0; }
.setting-row strong { display:block;font-size:calc(12px * var(--font-scale)); }
.setting-row p { margin:4px 0 0;font-size:calc(11px * var(--font-scale)); }
.segment-control { display:flex;gap:5px;padding:4px;background:#f0f4ee;border-radius:10px; }
.segment-control button { border:0;background:transparent;border-radius:7px;color:#6b7d70;padding:7px 10px;font-size:calc(11px * var(--font-scale)); }
.segment-control button.active { background:#fff;box-shadow:0 1px 4px #d8e1d5;color:#31523a;font-weight:800; }
.toast { position:fixed;bottom:24px;right:24px;z-index:999;background:#183f35;color:#fff;border-radius:12px;padding:13px 17px;font-size:calc(12px * var(--font-scale));box-shadow:0 10px 30px rgba(0,0,0,.16);animation:toast-in .2s ease; }
@keyframes toast-in { from { opacity:0;transform:translateY(7px) } to { opacity:1;transform:translateY(0) } }
.dark-mode { --ink:#e7eee7;--muted:#9bab9e;--paper:#111d18;--surface:#182920;--line:#2a3b30;--forest:#102f27;--forest-2:#1a4236;--shadow:0 14px 40px rgba(0,0,0,.2); }
.dark-mode .topbar { background:rgba(22,38,29,.93); }
.dark-mode .search-input,.dark-mode .field,.dark-mode .select-field,.dark-mode .icon-button,.dark-mode .subject-tile,.dark-mode .resource-link,.dark-mode .answer-option { background:#1b2c22;color:var(--ink);border-color:var(--line); }
.dark-mode .hero,.dark-mode .course-banner,.dark-mode .quiz-hero { background:#263c2d;border-color:#344b38; }
.dark-mode .hero-art { background:#243c2d; }
.dark-mode .card { background:var(--surface); }
.dark-mode .stat-icon,.dark-mode .subject-symbol,.dark-mode .side-list-icon,.dark-mode .lesson-no,.dark-mode .nav-lesson-indicator { background:#283e2d; }
.dark-mode .lesson-action-bar { background:#1b2c22; }
.dark-mode .lesson-section p,.dark-mode .lesson-lead,.dark-mode .course-card p,.dark-mode .catalog-card p,.dark-mode .unit-card p { color:#b5c4b8; }
.dark-mode .stage-card,.dark-mode .course-card,.dark-mode .catalog-card { background:var(--surface); }
.dark-mode .progress-ring-inner { background:#182920; }
@media (max-width: 1200px) {
  .content { padding:27px 27px 45px; }
  .topbar { padding:0 27px; }
  .lesson-layout { grid-template-columns:210px minmax(0,1fr); }
  .lesson-aside { grid-column:2;display:grid;grid-template-columns:1fr 1fr;gap:13px; }
  .lesson-nav-card { top:94px; }
  .quick-course-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .subject-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width: 900px) {
  .shell { grid-template-columns:1fr; }
  .sidebar { height:auto;min-height:0;position:sticky;top:0;z-index:30;padding:10px 13px;flex-direction:row;align-items:center;gap:12px;overflow:visible; }
  .brand { padding:0 5px; }
  .brand-mark { width:34px;height:34px;font-size:calc(20px * var(--font-scale)); }
  .brand-name { font-size:calc(15px * var(--font-scale)); }
  .brand-sub { display:none; }
  .sidebar .nav-section { flex-direction:row;gap:4px;overflow:auto;margin-left:auto; }
  .sidebar .nav-label,.sidebar-bottom,.sidebar-disclaimer { display:none; }
  .nav-button { width:auto;padding:9px 11px;white-space:nowrap;font-size:calc(11px * var(--font-scale)); }
  .nav-button .nav-icon { font-size:calc(15px * var(--font-scale)); }
  .nav-button.active { box-shadow:inset 0 -3px var(--lime); }
  .topbar { height:65px;position:relative;padding:0 22px; }
  .content { padding:23px 22px 42px; }
  .hero { grid-template-columns:1fr .55fr; }
  .hero-copy { padding:26px; }
  .hero-art { min-height:250px; }
  .art-book { right:20px;transform:scale(.8) rotate(-9deg);transform-origin:bottom right; }
  .art-sun { right:30px; }
  .stat-grid,.coverage-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .catalog-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .course-summary-grid { grid-template-columns:1fr; }
}
@media (max-width: 620px) {
  .sidebar { gap:6px;padding:8px 9px;flex-wrap:wrap; }
  .brand { gap:8px; }
  .brand-name { max-width:105px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
  .sidebar .nav-section { width:100%;order:2;justify-content:space-between;margin:0; }
  .nav-button { flex:1;justify-content:center;padding:8px 5px;gap:5px; }
  .nav-button span:last-child:not(.nav-count) { display:none; }
  .nav-count { display:none; }
  .topbar { padding:0 14px;gap:8px; }
  .crumb { display:none; }
  .top-heading { font-size:calc(12px * var(--font-scale)); }
  .search-wrap { width:38px; }
  .search-input { height:37px;color:transparent;padding-left:34px; }
  .search-input:focus { position:absolute;right:0;top:0;width:min(74vw,320px);z-index:5;color:var(--ink);background:#fff; }
  .top-actions { gap:6px; }
  .icon-button { width:34px;height:34px; }
  .avatar { width:34px;height:34px; }
  .content { padding:17px 13px 36px; }
  .hero { display:block; }
  .hero-copy { padding:23px 20px; }
  .hero h1 { font-size:calc(29px * var(--font-scale)); }
  .hero p { font-size:calc(12px * var(--font-scale)); }
  .hero-art { display:none; }
  .hero-meta { gap:10px;flex-wrap:wrap; }
  .meta-item { font-size:calc(10px * var(--font-scale)); }
  .stat-grid { gap:9px; }
  .stat-card { padding:12px;gap:9px; }
  .stat-icon { width:32px;height:32px;font-size:calc(15px * var(--font-scale)); }
  .stat-value { font-size:calc(20px * var(--font-scale)); }
  .quick-course-grid,.stage-grid,.subject-grid,.catalog-grid,.unit-grid { grid-template-columns:1fr; }
  .section-block { margin-top:25px; }
  .section-head { align-items:flex-start;flex-direction:column; }
  .stage-card p { min-height:0; }
  .course-cover { height:75px; }
  .filters { width:100%; }
  .field,.select-field { width:100%; }
  .course-banner { padding:22px 18px; }
  .course-banner h1 { font-size:calc(28px * var(--font-scale)); }
  .lesson-layout { grid-template-columns:1fr; }
  .lesson-nav-card { position:relative;top:auto;max-height:none; }
  .lesson-aside { grid-column:1;grid-template-columns:1fr; }
  .lesson-head-card { padding:21px 19px; }
  .lesson-section { padding:18px 19px; }
  .lesson-title { font-size:calc(28px * var(--font-scale)); }
  .lesson-section p { font-size:calc(13px * var(--font-scale)); }
  .lesson-action-bar { flex-direction:column;align-items:stretch; }
  .lesson-footer-nav { flex-direction:column; }
  .quiz-question-card { padding:17px; }
  .coverage-table { min-width:700px; }
  .setting-row { align-items:flex-start;flex-direction:column;gap:12px; }
}

/* Curriculum planning maps and outcome review workspace */
.planning-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.planning-card{padding:20px;min-height:190px;position:relative;overflow:hidden}
.planning-number{font-family:Manrope,sans-serif;font-size:calc(12px * var(--font-scale));font-weight:800;letter-spacing:.12em;color:#648c57;margin-bottom:18px}
.planning-card h3{font-size:calc(16px * var(--font-scale));line-height:1.35;margin:0 0 9px}
.planning-card p{font-size:calc(12px * var(--font-scale));line-height:1.7;color:var(--muted,#758078);margin:0}
.studio-import-grid{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:12px}
.field-label{display:block;font-size:calc(11px * var(--font-scale));font-weight:800;letter-spacing:.04em;margin:12px 0 6px;color:var(--text,#24352e)}
.outcome-table{min-width:1120px}
.outcome-table th{white-space:nowrap}
.outcome-table td{vertical-align:top;max-width:360px;white-space:normal;line-height:1.5}
.outcome-table td:first-child{min-width:300px}
.outcome-table td:nth-child(2){min-width:160px}
.outcome-table td:nth-child(3){min-width:170px}
.outcome-table td:nth-child(4){min-width:190px}
.outcome-table td:nth-child(5){min-width:210px}
.outcome-map-input,.outcome-review-input{width:100%;min-width:150px;font-size:calc(11px * var(--font-scale));padding:8px 9px}
.outcome-status-select{width:100%;min-width:155px;font-size:calc(11px * var(--font-scale))}
.source-inline{display:inline-block;margin-top:7px;color:#467b42;text-decoration:none;overflow-wrap:anywhere}
.source-inline:hover{text-decoration:underline}
code{font-size:.92em;background:rgba(100,125,105,.12);border-radius:4px;padding:2px 4px}
@media(max-width:1050px){.planning-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.planning-grid,.studio-import-grid{grid-template-columns:1fr}.planning-card{min-height:auto}.outcome-table td{max-width:270px}}

/* Official grade-snapshot panels: orientation, not outcome completion */
.scope-snapshot{border-color:rgba(83,125,82,.25);background:linear-gradient(140deg,rgba(232,242,225,.35),var(--surface,#fff) 55%)}
.snapshot-highlights{padding-left:21px;margin:14px 0 4px;display:grid;gap:9px;color:var(--text,#26342d);font-size:calc(13px * var(--font-scale));line-height:1.65}
.snapshot-highlights li::marker{color:#648b58}

.snapshot-browser{margin-top:14px;border-top:1px solid var(--line,#e2e8e1);padding-top:13px}
.snapshot-browser summary{cursor:pointer;font-weight:800;font-size:calc(12px * var(--font-scale));color:var(--text,#26342d);padding:4px 0;list-style-position:inside}
.snapshot-index-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:15px}
.snapshot-index-card{padding:16px;min-width:0}
.snapshot-index-card h3{margin:5px 0;font-size:calc(15px * var(--font-scale))}
.snapshot-index-card .snapshot-highlights{font-size:calc(11px * var(--font-scale));gap:7px;padding-left:18px}
@media(max-width:800px){.snapshot-index-grid{grid-template-columns:1fr}}

/* Curriculum evidence review queue */
.evidence-candidate { display:flex; flex-direction:column; gap:4px; padding:9px 0; border-bottom:1px solid var(--line, #e4e9e4); min-width:190px; }
.evidence-candidate:last-child { border-bottom:0; }
.evidence-candidate strong { font-size:calc(12px * var(--font-scale)); line-height:1.4; }
.evidence-candidate .btn { align-self:flex-start; margin-top:3px; }
.coverage-table td .evidence-candidate { white-space:normal; }

/* Source links in traceable Social Studies lessons */
.source-reading-list { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 9px; }
.source-reading-list li { line-height: 1.45; }
.source-reading-list a { color: var(--accent, #246c5a); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.source-reading-list a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 3px; }

/* Source-indexed program map in flagship courses */
.outcome-matrix{display:grid;gap:0;margin:16px 0;border-top:1px solid var(--border,#e6e9e4)}
.outcome-matrix-row{display:grid;grid-template-columns:100px 1fr auto;gap:14px;align-items:center;padding:13px 4px;border-bottom:1px solid var(--border,#e6e9e4)}
.outcome-matrix-row strong{font-size:calc(13px * var(--font-scale));line-height:1.45}.outcome-matrix-row p{margin:5px 0 0}
@media(max-width:680px){.outcome-matrix-row{grid-template-columns:1fr}.outcome-matrix-row .btn{justify-self:start}}

.study-stats{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:14px}.study-stats span{background:var(--card,#fff);padding:10px 14px;border-radius:12px}.study-topic-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:14px 0;border-bottom:1px solid #e5e9df}.study-topic-open{flex:1;min-width:180px;border:0;background:transparent;text-align:left;cursor:pointer;color:inherit}.study-topic-open span{display:block;margin-top:5px}.study-topic-open:focus-visible{outline:3px solid #668c39;outline-offset:4px}

/* Study materials preserve worked steps and offer accessible tables and reading passages. */
.lesson-section p,.reading-passage p,.example-box p{white-space:pre-line}
.study-figure{margin:20px 0;padding:16px;border:1px solid #cbd8ca;border-radius:12px}
.study-figure figcaption{font-weight:700;margin-bottom:10px}
.reading-passage{border-left:4px solid #4f7a43;padding-left:18px}
.study-rubric{padding:16px;background:#eef4ea;border-radius:10px;margin:18px 0}
.study-rubric summary{cursor:pointer;font-weight:700}
.study-prerequisites{padding:12px;border-bottom:1px solid #d6e1d0;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.lesson-section li{margin:8px 0;line-height:1.6}
.dark-mode .study-rubric{background:#233b30}
.diagram svg{display:block;max-width:100%;width:420px;margin:12px auto;background:#fff;border-radius:8px}
.concept-flow{display:flex;gap:25px;flex-wrap:wrap;padding:12px 0;list-style:none;counter-reset:flow}
.concept-flow li{position:relative;padding:12px;border:1px solid #a8bba1;border-radius:8px;flex:1;min-width:100px;text-align:center;counter-increment:flow}
.concept-flow li::before{content:counter(flow) ". ";font-weight:700}
.concept-flow li:not(:last-child)::after{content:"→";position:absolute;right:-22px;top:10px}

.source-details{margin:18px 0}.source-details summary{cursor:pointer;font-weight:700;padding:12px;border:1px solid #d5dfd0;border-radius:10px}.study-stats span{color:var(--ink,#153e35)}
.dark-mode .study-stats span{background:#233b30;color:#eff5ea}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.btn:focus-within{outline:3px solid #668c39;outline-offset:3px}

.chapter-browser summary{display:flex;justify-content:space-between;align-items:center;gap:12px;cursor:pointer;font-size:calc(12px * var(--font-scale));padding:4px 0}
.chapter-browser summary::before{content:"▸"}.chapter-browser[open] summary::before{content:"▾"}
@media(max-width:620px){.sidebar{flex-wrap:nowrap;gap:4px}.sidebar .brand-name{display:none}.sidebar .brand{flex-shrink:0;padding:0}.sidebar .nav-section{width:auto;order:initial;margin:0;flex:2;justify-content:space-around;overflow:visible}.sidebar .nav-section+.nav-section{flex:1}.sidebar .nav-button{min-width:30px;min-height:44px}.lesson-nav-card{padding:10px 16px}}

.grid>*{min-width:0}
@media(max-width:620px){.content .grid[style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr)!important}.setting-row{min-width:0}.setting-row .segment-control{flex-wrap:wrap}.study-figure{margin:16px 0;padding:12px}}

/* Keep text and interactive states legible in the optional dark theme. */
.dark-mode{--text:var(--ink);--accent:#b4dfbb;--border:var(--line);--card:var(--surface)}
.dark-mode p,.dark-mode .goal,.dark-mode .lesson-nav-link,.dark-mode .coverage-table td,.dark-mode .meta-item,.dark-mode .btn-ghost{color:#c2d0c6}
.dark-mode .btn-outline{background:#233b30;color:var(--ink)}
.dark-mode .btn-outline:hover,.dark-mode .btn-ghost:hover,.dark-mode .lesson-nav-link:hover{background:#304b3c}
.dark-mode .segment-control{background:#10231a}
.dark-mode .segment-control button{color:#c2d0c6}
.dark-mode .segment-control button.active{background:#365541;color:#fff;box-shadow:none}
.dark-mode .lesson-row{color:var(--ink)}
.dark-mode .lesson-nav-link.active{background:#365541;color:#fff}
.dark-mode .lesson-no,.dark-mode .nav-lesson-indicator{color:#d2e9c9}
.dark-mode .lesson-section .example-box{background:#233b30;color:#d2e9c9}
.dark-mode .answer-option.selected{background:#304e38;border-color:#9bbc83;color:#fff}
.dark-mode .answer-option.correct{background:#274b2c;border-color:#7dbb73;color:#e1f7dd}
.dark-mode .answer-option.incorrect{background:#55342d;border-color:#e6a99c;color:#ffe6df}
.dark-mode .option-letter{background:#365541;color:#fff}
.dark-mode .answer-option.selected .option-letter{background:#476a3a}
.dark-mode .notice p,.dark-mode .study-figure.diagram p{color:#53675c}

.readiness-note{font-size:calc(12px * var(--font-scale));line-height:1.6;border-left:3px solid #7b9b59;padding-left:12px}.dark-mode .readiness-note{color:#c2d0c6}

/* Search/revisit results are full-width actions with their own card spacing. */
.topic-result { padding:16px 20px;gap:20px;min-height:76px;color:var(--ink);border-color:var(--line); }
.topic-result-copy { flex:1;min-width:0;overflow-wrap:anywhere; }
.topic-result .lesson-name { font-size:calc(14px * var(--font-scale));line-height:1.5; }
.topic-result .lesson-sub { font-size:calc(12px * var(--font-scale));color:#53675c; }
.topic-result-action { margin-left:auto;flex-shrink:0;font-size:calc(12px * var(--font-scale));font-weight:700;color:var(--forest); }
.topic-result:hover { background:var(--mint); }
.topic-result:focus-visible { outline-offset:-3px;background:var(--mint); }
.topic-result:first-child { border-radius:var(--radius) var(--radius) 0 0; }
.topic-result:last-child { border-radius:0 0 var(--radius) var(--radius); }
.topic-result:only-child { border-radius:var(--radius); }
.dark-mode .topic-result:hover,.dark-mode .topic-result:focus-visible { background:#28463a; }
.dark-mode .topic-result-action { color:var(--lime); }
.dark-mode .topic-result .lesson-sub { color:var(--muted); }
@media(max-width:620px) {
  .topic-result { padding:14px;gap:12px; }
}


/* Jurisdiction choice remains available in desktop and compact navigation. */
.curriculum-picker{display:grid;gap:7px;padding:0 10px}
.curriculum-picker label{font-size:12px;font-weight:700;color:#c6d6ce}
.curriculum-picker select{width:100%;min-width:0;padding:10px 8px;border:1px solid #67887b;border-radius:9px;background:#254e43;color:#fff}
@media(max-width:760px){.curriculum-picker{grid-column:1/-1;max-width:100%;padding:0}.curriculum-picker select{max-width:100%}}

@media(max-width:900px){
 .sidebar{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(90px,.5fr);gap:7px 10px}
 .sidebar .brand{grid-row:1;grid-column:1}
 .curriculum-picker{grid-row:1;grid-column:2/4;display:flex;align-items:center;padding:0;gap:8px}
 .curriculum-picker label{flex-shrink:0}
 .sidebar .nav-section{grid-row:2;grid-column:1/3;margin:0;width:auto;justify-content:space-around}
 .sidebar .nav-section+.nav-section{grid-column:3}
}