:root {
  color-scheme: dark;
  --bg: #08111f;
  --surface: #0e1a2c;
  --surface-2: #14233a;
  --surface-3: #1b2d48;
  --text: #f7f9fd;
  --muted: #9aa9bc;
  --line: rgba(255,255,255,.1);
  --accent: #8cffb1;
  --accent-2: #69a9ff;
  --warning: #ffc46b;
  --danger: #ff8398;
  --shadow: 0 24px 60px rgba(0,0,0,.28);
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f2f5f9;
  --surface: #ffffff;
  --surface-2: #e9eff7;
  --surface-3: #dce6f2;
  --text: #0b1627;
  --muted: #607086;
  --line: rgba(11,22,39,.12);
  --accent: #087d43;
  --accent-2: #175fd4;
  --warning: #a85b00;
  --danger: #bd2446;
  --shadow: 0 22px 55px rgba(27,45,70,.12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.5; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
.skip-link { position: fixed; top: -5rem; left: 1rem; z-index: 100; padding: .65rem .9rem; border-radius: .6rem; background: var(--accent); color: #04150b; }
.skip-link:focus { top: 1rem; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 280px minmax(0, 1fr); grid-template-rows: 72px minmax(0, 1fr); }
.topbar { position: sticky; top: 0; z-index: 20; grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr minmax(360px, 560px) auto; align-items: center; gap: 1rem; height: 72px; padding: 0 1rem; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(18px); }
.portal-link { display: grid; place-items: center; width: 38px; height: 38px; border-radius: .7rem; background: var(--text); color: var(--bg); text-decoration: none; font-size: .76rem; font-weight: 950; transform: rotate(-3deg); }
.course-identity { display: flex; flex-direction: column; line-height: 1.15; }
.course-identity strong { letter-spacing: -.02em; }
.course-identity span { margin-top: .25rem; color: var(--muted); font-size: .68rem; font-weight: 800; letter-spacing: .12em; }
.top-stats { display: grid; grid-template-columns: auto auto minmax(150px, 1fr); align-items: center; justify-content: end; gap: .55rem; }
.top-stat { display: grid; grid-template-columns: auto auto; align-items: center; column-gap: .3rem; min-width: 82px; padding: .35rem .55rem; border: 1px solid var(--line); border-radius: .65rem; background: var(--surface); }
.top-stat b { grid-row: 1 / 3; font-size: .9rem; }
.top-stat strong { font-size: .8rem; line-height: 1; }
.top-stat small { color: var(--muted); font-size: .6rem; line-height: 1; }
.top-progress { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .65rem; color: var(--muted); font-size: .75rem; font-weight: 800; }
.progress-track { height: 7px; overflow: hidden; border-radius: 999px; background: var(--surface-2); }
.progress-track > span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .35s ease; }
.top-actions { display: flex; gap: .55rem; align-items: center; }
.icon-button, .pdf-link { min-height: 38px; border: 1px solid var(--line); border-radius: .65rem; background: var(--surface); color: var(--text); }
.icon-button { width: 38px; cursor: pointer; }
.pdf-link { display: inline-flex; align-items: center; padding: 0 .78rem; text-decoration: none; font-size: .78rem; font-weight: 750; }

.sidebar { position: sticky; top: 72px; height: calc(100vh - 72px); display: flex; flex-direction: column; gap: 1rem; overflow-y: auto; padding: 1rem; border-right: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 56%, var(--bg)); scrollbar-width: thin; }
.sidebar nav { display: grid; gap: .35rem; }
.nav-section-title { margin: .9rem .65rem .2rem; color: var(--muted); font-size: .62rem; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.nav-section-title:first-child { margin-top: .15rem; }
.nav-item { width: 100%; display: flex; align-items: center; gap: .7rem; padding: .72rem .78rem; border: 0; border-radius: .65rem; background: transparent; color: var(--muted); text-align: left; cursor: pointer; font-weight: 680; }
.nav-item span { width: 1.5rem; text-align: center; font-size: .72rem; font-weight: 850; }
.nav-item:hover { color: var(--text); background: var(--surface-2); }
.nav-item.active { color: var(--text); background: var(--surface-3); }
.sidebar-bottom { margin-top: .4rem; }
.sidebar-bottom > p { margin: 0 0 .6rem; color: var(--muted); font-size: .68rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.sidebar-bottom > a { display: flex; align-items: center; gap: .75rem; padding: .65rem; border: 1px solid var(--line); border-radius: .8rem; background: var(--surface); text-decoration: none; }
.sidebar-bottom img { width: 38px; height: 50px; border-radius: .25rem; object-fit: cover; object-position: top; background: white; }
.sidebar-bottom span { display: flex; min-width: 0; flex-direction: column; }
.sidebar-bottom strong { font-size: .8rem; }
.sidebar-bottom small { color: var(--muted); font-size: .68rem; }
.mobile-nav { display: none; }

main { min-width: 0; }
#app { width: min(1120px, calc(100% - 3rem)); margin: 0 auto; padding: 2.4rem 0 5rem; }
.view-enter { animation: view-in .28s ease both; }
@keyframes view-in { from { opacity: 0; transform: translateY(8px); } }
.eyebrow { margin: 0 0 .55rem; color: var(--accent); font-size: .72rem; font-weight: 850; letter-spacing: .15em; text-transform: uppercase; }
h1, h2, h3, p { overflow-wrap: anywhere; }
h1 { margin: 0; font-size: clamp(2.25rem, 5vw, 4.6rem); line-height: .94; letter-spacing: -.065em; }
h2 { margin: 0; font-size: clamp(1.55rem, 3vw, 2.2rem); line-height: 1.05; letter-spacing: -.04em; }
h3 { margin: 0; letter-spacing: -.025em; }
.muted { color: var(--muted); }

.home-hero { min-height: 300px; display: grid; grid-template-columns: 1.35fr .65fr; align-items: end; gap: 2.5rem; padding: 2rem; border: 1px solid var(--line); border-radius: 1.45rem; background: radial-gradient(circle at 90% 0, color-mix(in srgb, var(--accent-2) 22%, transparent), transparent 22rem), var(--surface); box-shadow: var(--shadow); }
.home-hero h1 span { color: var(--muted); }
.hero-side { display: grid; gap: .7rem; }
.hero-side > p { margin: 0 0 .6rem; color: var(--muted); }
.primary-button, .secondary-button, .text-button { border-radius: .72rem; padding: .74rem .95rem; cursor: pointer; font-weight: 780; }
.primary-button { border: 1px solid var(--accent); background: var(--accent); color: #05150b; }
.secondary-button { border: 1px solid var(--line); background: var(--surface-2); color: var(--text); }
.text-button { border: 0; background: transparent; color: var(--accent-2); padding-inline: .2rem; }
.primary-button:hover, .secondary-button:hover { filter: brightness(1.05); transform: translateY(-1px); }
.primary-button:focus-visible, .secondary-button:focus-visible, .text-button:focus-visible, .module-card:focus-visible, .answer:focus-visible, .flashcard:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 3px; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin: 2.3rem 0 1rem; }
.section-head p { margin: .35rem 0 0; color: var(--muted); }

.continue-card { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1.5rem; padding: 1.25rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--surface); }
.continue-card p { margin: .3rem 0 0; color: var(--muted); }
.continue-card .number { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: .9rem; background: var(--surface-2); color: var(--accent); font-weight: 900; }
.continue-main { display: flex; align-items: center; gap: 1rem; }

.module-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; }
.module-card { min-height: 210px; display: flex; flex-direction: column; justify-content: space-between; padding: 1.15rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--surface); color: var(--text); text-align: left; cursor: pointer; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.module-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent-2) 55%, var(--line)); box-shadow: var(--shadow); }
.module-card.completed { background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 10%, var(--surface)), var(--surface)); }
.module-top, .module-meta { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.module-number { display: grid; place-items: center; width: 2.65rem; height: 2.65rem; border-radius: .75rem; background: var(--surface-2); color: var(--accent); font-weight: 920; }
.complete-mark { color: var(--accent); font-weight: 850; font-size: .75rem; }
.module-card h3 { margin: 1.4rem 0 .35rem; font-size: 1.25rem; }
.module-card p { margin: 0; color: var(--muted); }
.module-meta { padding-top: 1rem; margin-top: 1rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .72rem; }

.quick-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.quick-card { min-height: 135px; display: flex; flex-direction: column; justify-content: space-between; padding: 1rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--surface); }
.quick-card strong { font-size: 1.05rem; }
.quick-card p { margin: .25rem 0 0; color: var(--muted); font-size: .82rem; }
.quick-card button { align-self: flex-start; }

.dashboard-hero { min-height: 290px; display: grid; grid-template-columns: 1.1fr .9fr; align-items: end; gap: 2rem; padding: 1.6rem; border: 1px solid var(--line); border-radius: 1.2rem; background: radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--accent-2) 25%, transparent), transparent 24rem), linear-gradient(145deg, var(--surface), color-mix(in srgb, var(--surface-2) 70%, var(--surface))); box-shadow: var(--shadow); }
.dashboard-hero h1 span { color: var(--muted); }
.dashboard-hero > div > p:last-child { max-width: 590px; margin: 1rem 0 0; color: var(--muted); }
.dashboard-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }
.dashboard-metrics article { padding: 1rem; border: 1px solid var(--line); border-radius: .9rem; background: color-mix(in srgb, var(--bg) 45%, transparent); backdrop-filter: blur(12px); }
.dashboard-metrics strong { display: block; font-size: 1.7rem; letter-spacing: -.045em; }
.dashboard-metrics span { color: var(--muted); font-size: .72rem; }
.next-action-panel { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin-top: .9rem; padding: 1.2rem; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); border-radius: 1rem; background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.next-action-panel h2 { font-size: 1.4rem; }
.next-action-panel p:not(.eyebrow) { margin: .35rem 0 0; color: var(--muted); }
.dashboard-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: .8rem; margin-top: .8rem; }
.dashboard-card { padding: 1.1rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--surface); }
.dashboard-card-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.dashboard-card-head h2, .course-state h2 { font-size: 1.15rem; }
.dashboard-card-head > strong { color: var(--muted); font-size: .7rem; }
.activity-grid { display: grid; grid-template-rows: repeat(7, 10px); grid-auto-flow: column; grid-auto-columns: 10px; gap: 4px; overflow-x: auto; padding-bottom: .35rem; }
.activity-cell, .activity-legend i { width: 10px; height: 10px; border-radius: 2px; background: var(--surface-2); }
.activity-cell.level-1, .activity-legend .level-1 { background: color-mix(in srgb, var(--accent) 30%, var(--surface-2)); }
.activity-cell.level-2, .activity-legend .level-2 { background: color-mix(in srgb, var(--accent) 55%, var(--surface-2)); }
.activity-cell.level-3, .activity-legend .level-3 { background: color-mix(in srgb, var(--accent) 78%, var(--surface-2)); }
.activity-cell.level-4, .activity-legend .level-4 { background: var(--accent); }
.activity-legend { display: flex; justify-content: flex-end; align-items: center; gap: .25rem; margin-top: .65rem; color: var(--muted); font-size: .62rem; }
.coverage-bars { display: grid; gap: .45rem; margin-top: 1.1rem; }
.coverage-bars label { display: flex; justify-content: space-between; color: var(--muted); font-size: .72rem; }
.tool-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; }
.tool-card { min-height: 130px; display: grid; grid-template-columns: auto 1fr; align-content: center; gap: .2rem .8rem; padding: 1rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--surface); color: var(--text); text-align: left; cursor: pointer; }
.tool-card:hover { border-color: var(--accent-2); transform: translateY(-2px); }
.tool-card > span { grid-row: 1 / 3; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: .7rem; background: var(--surface-2); color: var(--accent); font-weight: 900; }
.tool-card strong { align-self: end; }
.tool-card small { align-self: start; color: var(--muted); }

.lesson-header { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 1rem; margin-bottom: 1.5rem; }
.lesson-header h1 { font-size: clamp(2.4rem, 5vw, 4.5rem); }
.lesson-subtitle { max-width: 680px; margin: .8rem 0 0; color: var(--muted); font-size: 1.02rem; }
.lesson-meta { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.pill { padding: .35rem .62rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); font-size: .72rem; font-weight: 720; }
.lesson-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 1.2rem; align-items: start; }
.lesson-content { display: grid; gap: 1rem; }
.lesson-aside { position: sticky; top: 92px; display: grid; gap: .8rem; }
.content-card, .aside-card { padding: 1.25rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--surface); }
.content-card > h2 { margin-bottom: .9rem; font-size: 1.35rem; }
.content-card p { margin: .65rem 0; color: var(--muted); }
.objective-list { display: grid; gap: .65rem; padding: 0; list-style: none; }
.objective-list li { display: grid; grid-template-columns: 24px 1fr; gap: .65rem; }
.objective-list li::before { content: "✓"; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); font-size: .72rem; font-weight: 900; }
.concept-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.concept { padding: .95rem; border: 1px solid var(--line); border-radius: .8rem; background: var(--surface-2); }
.concept h3 { font-size: .98rem; }
.concept p { margin: .4rem 0 0; font-size: .88rem; }
.formula-list { display: grid; gap: .65rem; }
.formula { padding: 1rem; border-left: 3px solid var(--accent-2); border-radius: .25rem .75rem .75rem .25rem; background: var(--surface-2); }
.formula strong { display: block; margin-bottom: .35rem; font-size: .82rem; color: var(--muted); }
.formula code { display: block; overflow-x: auto; color: var(--text); font: 700 .95rem ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; }
.math-display { min-height: 2.5rem; overflow-x: auto; overflow-y: hidden; padding: .35rem 0; color: var(--text); text-align: left; scrollbar-width: thin; }
.math-display .katex-display { margin: 0; text-align: left; }
.math-display .katex-display > .katex { text-align: left; font-size: 1.08em; }
.formula small { display: block; margin-top: .4rem; color: var(--muted); }
.aside-card h3 { margin-bottom: .5rem; }
.aside-card p { margin: 0 0 .8rem; color: var(--muted); font-size: .84rem; }
.aside-card button { width: 100%; }

.workflow-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; margin-bottom: 1.2rem; }
.workflow-step { min-height: 180px; display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr auto; gap: .9rem; padding: 1rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--surface); color: var(--text); text-align: left; cursor: pointer; }
.workflow-step:hover:not(:disabled) { border-color: var(--accent-2); transform: translateY(-2px); }
.workflow-step.completed { background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 10%, var(--surface)), var(--surface)); }
.workflow-step.locked { opacity: .52; cursor: not-allowed; }
.workflow-index { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: .65rem; background: var(--surface-2); color: var(--accent); font-weight: 900; }
.workflow-step strong { display: block; margin: .25rem 0 .35rem; font-size: 1.08rem; }
.workflow-step small { display: block; color: var(--muted); line-height: 1.45; }
.workflow-status { grid-column: 1 / -1; padding-top: .65rem; border-top: 1px solid var(--line); color: var(--accent-2); font-size: .72rem; font-weight: 820; text-transform: uppercase; letter-spacing: .08em; }
.workflow-step.completed .workflow-status { color: var(--accent); }
.chapter-overview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .65fr); gap: 1rem; }
.chapter-next { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 1.3rem; border: 1px solid var(--line); border-radius: 1rem; background: radial-gradient(circle at 100% 0, color-mix(in srgb, var(--accent-2) 15%, transparent), transparent 14rem), var(--surface); }
.chapter-next h2 { font-size: 1.45rem; }
.chapter-next > p:not(.eyebrow) { margin: .7rem 0 1rem; color: var(--muted); }

.reading-view { width: min(900px, 100%); margin: 0 auto; }
.reading-header { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.reading-header h1 { font-size: clamp(2.5rem, 6vw, 5rem); }
.reading-count { flex: 0 0 auto; padding: .5rem .7rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: .75rem; font-weight: 750; }
.definition-list, .demo-list { display: grid; gap: .8rem; }
.definition-card { display: grid; grid-template-columns: 3rem 1fr; gap: .85rem; padding: 1.15rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--surface); }
.definition-card > span { color: var(--accent); font: 850 .75rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; }
.definition-card h2 { font-size: 1.12rem; }
.definition-card p { margin: .4rem 0 0; color: var(--muted); }
.formula-reference { margin-bottom: .8rem; }
.demo-card { padding: 1.35rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--surface); }
.demo-number { margin-bottom: .55rem; color: var(--accent); font-size: .68rem; font-weight: 900; letter-spacing: .14em; }
.demo-card h2 { font-size: 1.45rem; }
.demo-setup { margin: .55rem 0 1rem; color: var(--muted); }
.demo-equation { margin: .9rem 0; padding: .8rem 1rem; border-radius: .75rem; background: var(--surface-2); }
.demo-steps { display: grid; gap: .65rem; margin: 1rem 0; padding-left: 1.4rem; }
.demo-steps li { padding-left: .35rem; }
.demo-steps li::marker { color: var(--accent-2); font-weight: 850; }
.demo-conclusion { margin-top: 1rem; padding: .9rem 1rem; border-left: 3px solid var(--accent); border-radius: .25rem .7rem .7rem .25rem; background: color-mix(in srgb, var(--accent) 8%, var(--surface-2)); }
.demo-conclusion strong { color: var(--accent); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }
.demo-conclusion p { margin: .25rem 0 0; }
.chapter-actions { position: sticky; bottom: .7rem; z-index: 8; display: flex; justify-content: space-between; gap: .8rem; margin-top: 1.2rem; padding: .8rem; border: 1px solid var(--line); border-radius: .9rem; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(18px); box-shadow: var(--shadow); }
.locked-card { margin-top: 1.5rem; padding: 1.5rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--surface); }
.locked-card h2 { font-size: 1.45rem; }
.locked-card p { color: var(--muted); }
.test-flow { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.test-flow article { display: grid; grid-template-columns: auto 1fr; gap: .9rem; padding: 1.2rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--surface); }
.test-flow article > span { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: .7rem; background: var(--surface-2); color: var(--accent); font-weight: 900; }
.test-flow h2 { font-size: 1.3rem; }
.test-flow p { margin: .45rem 0 0; color: var(--muted); }
.test-launch { margin-top: .8rem; padding: 1.3rem; border-radius: 1rem; background: linear-gradient(135deg, color-mix(in srgb, var(--accent-2) 16%, var(--surface)), var(--surface)); text-align: center; }
.test-launch p { max-width: 620px; margin: 0 auto 1rem; color: var(--muted); }

.exercise-list { display: grid; gap: .9rem; }
.exercise-card { padding: 1.25rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--surface); }
.exercise-card.completed { background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 8%, var(--surface)), var(--surface)); }
.exercise-card.locked { opacity: .52; }
.exercise-card-head { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: .7rem; margin-bottom: .85rem; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .68rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.exercise-card-head span:first-child { color: var(--accent); }
.exercise-card h2 { font-size: 1.45rem; }
.exercise-statement { margin-top: .75rem; padding: .9rem 1rem; border-radius: .75rem; background: var(--surface-2); }
.exercise-statement p { margin: .25rem 0; }
.exercise-questions { display: grid; gap: .55rem; margin: 1rem 0; padding-left: 1.4rem; }
.exercise-questions li::marker { color: var(--accent-2); font-weight: 850; }
.exercise-actions { display: flex; justify-content: flex-end; gap: .65rem; }
.exercise-hint, .exercise-solution { margin-top: .8rem; padding: 1rem; border-radius: .8rem; }
.exercise-hint { border-left: 3px solid var(--warning); background: color-mix(in srgb, var(--warning) 8%, var(--surface-2)); }
.exercise-hint strong { color: var(--warning); }
.exercise-hint p { margin: .3rem 0 0; }
.exercise-solution { border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); background: color-mix(in srgb, var(--accent) 6%, var(--surface-2)); }
.exercise-solution[hidden], .exercise-hint[hidden] { display: none; }
.solution-label { color: var(--accent); font-size: .7rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.exercise-solution > ol { display: grid; gap: .55rem; padding-left: 1.4rem; }
.exercise-solution > button { display: block; margin: .9rem 0 0 auto; }
.exercise-footer-note { align-self: center; color: var(--muted); font-size: .78rem; }

.tool-page > h1 { max-width: 820px; }
.tool-intro { max-width: 720px; margin: 1rem 0 1.5rem; color: var(--muted); font-size: 1.02rem; }
.formula-chapters { display: grid; gap: 1rem; margin-top: 1.5rem; }
.formula-chapter { padding: 1.2rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--surface); }
.formula-chapter > header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.formula-chapter > header > div { display: flex; align-items: center; gap: .8rem; }
.formula-chapter > header > div > span { display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: .65rem; background: var(--surface-2); color: var(--accent); font-size: .7rem; font-weight: 850; }
.formula-chapter h2 { font-size: 1.3rem; }
.search-field { display: grid; gap: .4rem; max-width: 620px; margin: 1.4rem 0; color: var(--muted); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.search-field input { width: 100%; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: .8rem; outline: none; background: var(--surface); color: var(--text); font-size: 1rem; text-transform: none; letter-spacing: 0; }
.search-field input:focus { border-color: var(--accent-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-2) 18%, transparent); }
.glossary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.glossary-card { padding: 1rem; border: 1px solid var(--line); border-radius: .9rem; background: var(--surface); }
.glossary-card[hidden] { display: none; }
.glossary-card > div { display: flex; align-items: center; justify-content: space-between; gap: .7rem; }
.glossary-card > div > span { color: var(--accent); font-size: .68rem; font-weight: 850; text-transform: uppercase; }
.glossary-card h2 { margin-top: .8rem; font-size: 1.15rem; }
.glossary-card p { margin: .4rem 0 0; color: var(--muted); font-size: .88rem; }
.calculator-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.calculator-card { display: grid; gap: .7rem; padding: 1.1rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--surface); }
.calculator-title { display: flex; align-items: center; gap: .8rem; margin-bottom: .3rem; }
.calculator-title > span { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: .65rem; background: var(--surface-2); color: var(--accent); font-size: .7rem; font-weight: 900; }
.calculator-title h2 { font-size: 1.25rem; }
.calculator-title p { margin: .1rem 0 0; color: var(--muted); font-size: .75rem; }
.calculator-card > label { display: grid; grid-template-columns: 1fr 150px; align-items: center; gap: .8rem; color: var(--muted); font-size: .8rem; }
.calculator-card > label > div { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .3rem; }
.calculator-card input { width: 100%; padding: .6rem .7rem; border: 1px solid var(--line); border-radius: .6rem; background: var(--bg); color: var(--text); text-align: right; }
.calculator-card label small { min-width: 1.2rem; color: var(--muted); }
.calculator-card output { min-height: 3.4rem; display: grid; place-items: center; padding: .7rem; border-radius: .7rem; background: color-mix(in srgb, var(--accent) 8%, var(--surface-2)); color: var(--accent); font-weight: 800; text-align: center; }
.trap-list { display: grid; gap: .75rem; margin-top: 1.5rem; }
.trap-card { display: grid; grid-template-columns: 3rem 1fr; gap: .8rem; padding: 1.1rem; border: 1px solid var(--line); border-left: 3px solid var(--warning); border-radius: .3rem 1rem 1rem .3rem; background: var(--surface); }
.trap-card > span { color: var(--warning); font: 850 .72rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.trap-topic { margin: 0 0 .35rem; color: var(--warning); font-size: .7rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.trap-card h2 { font-size: 1.15rem; line-height: 1.3; }
.trap-card > div > div { margin-top: .8rem; padding: .8rem; border-radius: .7rem; background: var(--surface-2); }
.trap-card > div > div strong { color: var(--accent); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.trap-card > div > div p { margin: .25rem 0 0; color: var(--muted); }

.flash-session, .quiz-session { width: min(760px, 100%); margin: 0 auto; }
.session-head { display: flex; justify-content: space-between; gap: 1rem; align-items: start; margin-bottom: 1.4rem; }
.session-count { color: var(--muted); font-size: .8rem; font-weight: 750; }
.flashcard { width: 100%; min-height: 340px; display: grid; place-items: center; padding: 2rem; border: 1px solid var(--line); border-radius: 1.3rem; background: radial-gradient(circle at 100% 0, color-mix(in srgb, var(--accent-2) 16%, transparent), transparent 18rem), var(--surface); color: var(--text); text-align: center; cursor: pointer; box-shadow: var(--shadow); }
.flashcard .side-label { margin-bottom: 1rem; color: var(--accent); font-size: .7rem; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.flashcard .card-text { max-width: 620px; font-size: clamp(1.35rem, 3vw, 2rem); line-height: 1.3; letter-spacing: -.025em; }
.flashcard .tap-hint { margin-top: 1.2rem; color: var(--muted); font-size: .75rem; }
.rating-row { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-top: 1rem; }
.answer-list { display: grid; gap: .65rem; margin-top: 1rem; }
.answer { width: 100%; display: flex; gap: .8rem; align-items: flex-start; padding: .9rem; border: 1px solid var(--line); border-radius: .8rem; background: var(--surface); color: var(--text); text-align: left; cursor: pointer; }
.answer:hover { border-color: var(--accent-2); }
.answer.correct { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.answer.wrong { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 9%, var(--surface)); }
.answer-index { display: grid; flex: 0 0 auto; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: .45rem; background: var(--surface-2); color: var(--muted); font-size: .72rem; font-weight: 850; }
.feedback { margin-top: 1rem; padding: 1rem; border-radius: .8rem; background: var(--surface-2); }
.feedback strong { color: var(--accent); }
.feedback p { margin: .35rem 0 0; color: var(--muted); }
.session-actions { display: flex; justify-content: flex-end; margin-top: 1rem; }

.progress-summary { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .8rem; margin: 1.5rem 0; }
.metric { padding: 1.2rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--surface); }
.metric strong { display: block; font-size: 2rem; letter-spacing: -.05em; }
.metric span { color: var(--muted); font-size: .78rem; }
.progress-list { display: grid; gap: .6rem; }
.progress-row { display: grid; grid-template-columns: minmax(160px, 1fr) 1fr auto; align-items: center; gap: 1rem; padding: .85rem 1rem; border: 1px solid var(--line); border-radius: .8rem; background: var(--surface); }
.progress-row strong { font-size: .88rem; }
.progress-row small { color: var(--muted); }

.empty-state { padding: 2rem; border: 1px dashed var(--line); border-radius: 1rem; color: var(--muted); text-align: center; }

@media (max-width: 920px) {
  .app-shell { grid-template-columns: 1fr; grid-template-rows: 68px auto minmax(0,1fr); }
  .topbar { grid-template-columns: auto 1fr auto; height: 68px; }
  .top-stats { display: none; }
  .sidebar { display: none; }
  .mobile-nav { position: sticky; top: 68px; z-index: 18; display: flex; gap: .3rem; padding: .45rem .6rem; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(16px); }
  .mobile-tab { flex: 1; padding: .55rem .35rem; border: 0; border-radius: .55rem; background: transparent; color: var(--muted); font-size: .76rem; font-weight: 760; }
  .mobile-tab.active { background: var(--surface-2); color: var(--text); }
  #app { width: min(100% - 1.2rem, 800px); padding-top: 1rem; }
  .home-hero { grid-template-columns: 1fr; min-height: 0; gap: 1.8rem; padding: 1.3rem; }
  .dashboard-hero, .dashboard-grid { grid-template-columns: 1fr; }
  .lesson-layout { grid-template-columns: 1fr; }
  .lesson-aside { position: static; grid-template-columns: 1fr 1fr; }
  .workflow-grid { grid-template-columns: 1fr; }
  .workflow-step { min-height: 130px; }
  .chapter-overview { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .course-identity span { display: none; }
  .course-identity strong { max-width: 38vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pdf-link { padding-inline: .6rem; }
  .module-grid, .quick-grid, .concept-grid, .progress-summary, .tool-grid, .glossary-grid, .calculator-grid { grid-template-columns: 1fr; }
  .module-card { min-height: 190px; }
  .section-head, .lesson-header, .session-head { align-items: flex-start; flex-direction: column; }
  .lesson-aside { grid-template-columns: 1fr; }
  .reading-header { align-items: flex-start; flex-direction: column; }
  .test-flow { grid-template-columns: 1fr; }
  .chapter-actions { flex-direction: column; }
  .chapter-actions button { width: 100%; }
  .exercise-card-head, .exercise-actions { align-items: flex-start; flex-direction: column; }
  .exercise-actions button { width: 100%; }
  .continue-card { grid-template-columns: 1fr; }
  .continue-card > button { width: 100%; }
  .next-action-panel { align-items: flex-start; flex-direction: column; }
  .next-action-panel button { width: 100%; }
  .calculator-card > label { grid-template-columns: 1fr; gap: .3rem; }
  .progress-row { grid-template-columns: 1fr auto; }
  .progress-row .progress-track { grid-column: 1 / -1; grid-row: 2; }
  .flashcard { min-height: 300px; padding: 1.35rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Mastery, sources, numerical practice and cloud sync */
.learning-subsection { margin: 2rem 0 3rem; }
.learning-subsection > header { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; padding-bottom: .8rem; border-bottom: 1px solid var(--line); }
.learning-subsection > header h2, .learning-subsection > header p { margin: 0; }
.source-badge { display: inline-flex; align-items: center; width: max-content; padding: .34rem .62rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: var(--surface); font-size: .75rem; font-weight: 750; text-decoration: none; white-space: nowrap; }
.source-badge:hover { color: var(--accent); border-color: var(--accent); }
.definition-card.mastered, .demo-card.mastered { border-color: color-mix(in srgb, var(--accent) 46%, var(--line)); box-shadow: inset 3px 0 0 var(--accent); }
.mastery-button { margin-top: .8rem; padding: .48rem .72rem; border: 1px solid var(--line); border-radius: .65rem; background: transparent; color: var(--muted); font: inherit; font-size: .8rem; font-weight: 750; cursor: pointer; }
.mastered .mastery-button { color: var(--accent); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.numeric-answer { margin: 1.15rem 0; padding: 1rem; border: 1px solid var(--line); border-radius: 1rem; background: color-mix(in srgb, var(--accent-2) 5%, var(--surface)); }
.numeric-answer h3, .numeric-answer p { margin-top: 0; }
.numeric-answer p { color: var(--muted); font-size: .88rem; }
.numeric-answer > div { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .7rem; margin-bottom: .8rem; }
.numeric-answer label { display: grid; gap: .35rem; color: var(--muted); font-size: .78rem; font-weight: 700; }
.numeric-answer input, .cloud-panel input { min-width: 0; padding: .72rem .8rem; border: 1px solid var(--line); border-radius: .7rem; background: var(--bg); color: var(--text); font: inherit; }
.numeric-feedback { display: inline-block; margin-left: .7rem; color: var(--accent); font-weight: 750; font-size: .84rem; }
.cloud-panel { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(260px, 1.2fr); gap: 1rem 1.5rem; margin: 2rem 0; padding: 1.4rem; border: 1px solid color-mix(in srgb, var(--accent-2) 35%, var(--line)); border-radius: 1.2rem; background: linear-gradient(135deg, color-mix(in srgb, var(--accent-2) 9%, var(--surface)), var(--surface)); }
.cloud-panel h2 { margin: .2rem 0 .45rem; }
.cloud-panel p { margin: 0; color: var(--muted); }
.cloud-panel label { display: grid; gap: .4rem; align-content: start; color: var(--muted); font-size: .78rem; font-weight: 750; }
.cloud-panel input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .75rem; }
.cloud-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.cloud-panel details { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: .8rem; }
.cloud-panel summary { cursor: pointer; font-weight: 750; }
.cloud-panel details label { margin: .8rem 0; }
.exam-intro { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 2rem 0; }
.exam-intro > div { display: grid; gap: .25rem; padding: 1.2rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--surface); }
.exam-intro strong { font-size: 1.7rem; }
.exam-intro span { color: var(--muted); font-size: .82rem; }
.exam-timer { display: block; margin-bottom: .35rem; color: var(--accent); font: 800 1.15rem ui-monospace, SFMono-Regular, Menlo, monospace; text-align: right; }

@media (max-width: 760px) {
  .cloud-panel { grid-template-columns: 1fr; }
  .cloud-panel details { grid-column: auto; }
  .exam-intro { grid-template-columns: 1fr; }
  .learning-subsection > header { align-items: flex-start; }
  .numeric-feedback { display: block; margin: .7rem 0 0; }
}