:root {
  color-scheme: light;
  --ink: #0d1b2a;
  --ink-soft: #425469;
  --blue: #0057b8;
  --blue-dark: #003f88;
  --blue-wash: #e9f2fc;
  --green: #08734c;
  --green-wash: #e5f4eb;
  --red: #b53722;
  --paper: #f6f8fb;
  --white: #ffffff;
  --line: #d5dfe9;
  --line-dark: #aebdcd;
  --radius: 1rem;
  --shadow: 0 14px 30px rgba(13, 27, 42, 0.09);
  --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html { min-height: 100%; background: var(--paper); }

body {
  min-width: 320px;
  margin: 0;
  color: var(--ink);
  background: linear-gradient(180deg, #eaf2fc 0 12rem, var(--paper) 12rem 100%);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

button, select, a { font: inherit; }
button, a { -webkit-tap-highlight-color: rgba(0, 87, 184, 0.14); touch-action: manipulation; }
button { cursor: pointer; }
button:focus-visible, select:focus-visible, a:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

.app-shell { width: min(100%, 54rem); min-height: 100dvh; margin: 0 auto; padding: 1.25rem 1rem 6.75rem; }
.topbar, .section-heading, .status-strip, .bottom-nav { display: flex; align-items: center; }
.topbar { justify-content: space-between; gap: 1rem; }

.brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--ink); font-size: .94rem; font-weight: 500; line-height: .9; text-decoration: none; letter-spacing: -.025em; }
.brand strong { color: var(--blue); font-size: 1.14rem; font-weight: 800; }
.brand-mark { display: inline-grid; grid-template-columns: repeat(3, 5px); align-items: end; gap: 2px; width: 24px; height: 27px; padding: 4px; background: var(--ink); border-radius: 3px; }
.brand-mark i { display: block; background: #fff; }
.brand-mark i:nth-child(1) { height: 7px; }.brand-mark i:nth-child(2) { height: 13px; }.brand-mark i:nth-child(3) { height: 19px; background: #6cc5ff; }

.text-button { min-height: 2.75rem; padding: .5rem .25rem; border: 0; background: transparent; color: var(--blue-dark); font-size: .875rem; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.text-button:hover { color: var(--ink); }

.intro { max-width: 35rem; padding: 2.75rem 0 1.4rem; }
.eyebrow { margin: 0 0 .48rem; color: var(--blue-dark); font-size: .72rem; font-weight: 800; letter-spacing: .085em; line-height: 1.25; text-transform: uppercase; }
h1, h2, p { text-wrap: pretty; }
h1, h2 { margin: 0; letter-spacing: -.045em; line-height: 1.04; }
h1 { font-size: clamp(2.15rem, 10vw, 3.7rem); font-weight: 800; }
h2 { font-size: clamp(1.4rem, 6vw, 1.8rem); font-weight: 750; }
.intro > p:last-child { max-width: 35ch; margin: 1rem 0 0; color: var(--ink-soft); font-size: 1.03rem; }

.learning-controls { display: grid; grid-template-columns: 1fr; gap: .7rem; margin-bottom: .75rem; }
.learning-controls label { display: grid; gap: .3rem; color: var(--ink-soft); font-size: .74rem; font-weight: 800; letter-spacing: .035em; text-transform: uppercase; }
.learning-controls select { color: var(--ink); letter-spacing: normal; text-transform: none; }

.status-strip { gap: .8rem; padding: .88rem 1rem; border: 1px solid #c8d8e9; border-radius: .75rem; background: rgba(255, 255, 255, .78); }
.status-strip > div:first-child { flex: 0 0 7.25rem; }
.status-label, .status-total { display: block; color: var(--ink-soft); font-size: .7rem; font-weight: 650; line-height: 1.2; }
.status-strip strong { display: block; font-size: .93rem; }
.mini-progress { flex: 1; height: .48rem; overflow: hidden; border-radius: 100vw; background: #cbd8e7; }
.mini-progress span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--green); transition: width .22s ease; }
.status-total { width: 3.7rem; text-align: right; }

.view { padding-top: 2.3rem; }
.section-heading { justify-content: space-between; gap: 1rem; margin-bottom: 1.15rem; }
.heading-actions { display: flex; align-items: center; justify-content: flex-end; gap: .45rem; }
.heading-actions .text-button { min-height: 2rem; padding: .2rem 0; font-size: .72rem; white-space: nowrap; }
.lesson-progress { display: inline-block; flex: 0 0 auto; padding: .3rem .5rem; border: 1px solid var(--line); border-radius: .35rem; color: var(--ink-soft); background: rgba(255,255,255,.65); font-size: .72rem; font-weight: 750; text-align: right; }
.select-label { display: block; min-width: 8.4rem; }
select { width: 100%; min-height: 2.75rem; padding: .5rem 1.85rem .5rem .7rem; border: 1px solid var(--line-dark); border-radius: .5rem; color: var(--ink); background: var(--white); font-size: .84rem; font-weight: 700; }

.flashcard-wrap { min-height: 19.5rem; }
.flashcard { position: relative; display: flex; width: 100%; min-height: 19.5rem; padding: 1.3rem; overflow: hidden; border: 2px solid var(--ink); border-radius: var(--radius); color: var(--ink); background: var(--white); box-shadow: var(--shadow); text-align: left; }
.flashcard::after { position: absolute; right: 0; bottom: 0; width: 4.5rem; height: 4.5rem; background: linear-gradient(135deg, transparent 49%, var(--blue) 50%); content: ""; }
.flashcard:hover { border-color: var(--blue); }
.card-face { display: flex; flex: 1; flex-direction: column; justify-content: space-between; gap: 1.5rem; }
.card-index { color: var(--ink-soft); font-size: .78rem; font-weight: 750; }
.card-question { max-width: 21ch; font-size: clamp(1.55rem, 7vw, 2.25rem); font-weight: 750; letter-spacing: -.035em; line-height: 1.12; }
.card-tag { align-self: flex-start; padding: .25rem .5rem; border: 1px solid var(--line); border-radius: .3rem; color: var(--ink-soft); font-size: .72rem; font-weight: 750; }
.card-answer { max-width: 38ch; color: var(--ink); font-size: clamp(1.08rem, 4.8vw, 1.28rem); font-weight: 500; line-height: 1.46; }
.card-answer strong { color: var(--blue-dark); }
.reveal-line { display: flex; align-items: center; gap: .45rem; color: var(--blue-dark); font-size: .9rem; font-weight: 800; }
.reveal-line::before { width: 1.3rem; height: 2px; background: currentColor; content: ""; }
.flashcard.is-revealed { border-color: var(--blue); background: linear-gradient(145deg, #fff 0, #f4f8fd 100%); }
.card-hint { margin: .85rem 0 0; color: var(--ink-soft); font-size: .88rem; text-align: center; }

.rating-actions { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .55rem; margin-top: 1rem; }
.rating-button { min-height: 3.25rem; padding: .45rem; border: 1px solid var(--line-dark); border-radius: .62rem; color: var(--ink); background: var(--white); font-size: .79rem; font-weight: 800; line-height: 1.1; }
.rating-button small { display: block; margin-top: .2rem; color: var(--ink-soft); font-size: .67rem; font-weight: 550; }
.rating-button[data-rating="again"]:hover { border-color: var(--red); color: var(--red); }
.rating-button[data-rating="review"]:hover { border-color: var(--blue); color: var(--blue-dark); }
.rating-button[data-rating="know"] { border-color: var(--green); color: #075e40; background: var(--green-wash); }
.rating-button[data-rating="know"]:hover { color: var(--white); background: var(--green); }

.quiz-panel { padding: 1.2rem; border: 1px solid var(--line); border-top: 4px solid var(--blue); border-radius: .85rem; background: var(--white); }
.quiz-count { margin: 0 0 1rem; color: var(--ink-soft); font-size: .8rem; font-weight: 750; }
.quiz-question { margin: 0; font-size: 1.34rem; font-weight: 750; letter-spacing: -.025em; line-height: 1.2; }
.choices { display: grid; gap: .65rem; margin-top: 1.45rem; }
.choice { width: 100%; min-height: 3.35rem; padding: .75rem .9rem; border: 1px solid var(--line-dark); border-radius: .55rem; color: var(--ink); background: #fff; font-weight: 650; text-align: left; }
.choice:hover { border-color: var(--blue); background: var(--blue-wash); }
.choice.is-correct { border-color: var(--green); color: #075e40; background: var(--green-wash); }
.choice.is-wrong { border-color: var(--red); color: #902b1a; background: #fff0ed; }
.quiz-feedback { margin: 1rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: .93rem; }
.primary-button { min-height: 3.1rem; margin-top: 1rem; padding: .7rem 1rem; border: 1px solid var(--blue); border-radius: .55rem; color: #fff; background: var(--blue); font-weight: 800; }
.primary-button:hover { background: var(--blue-dark); }

.plan-intro { max-width: 48ch; margin: 0 0 1.2rem; color: var(--ink-soft); font-size: .95rem; }
.curriculum-list { border-top: 2px solid var(--ink); }
.curriculum-row { padding: 1rem 0 1.05rem; border-bottom: 1px solid var(--line); }
.curriculum-meta, .row-foot { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.curriculum-meta { color: var(--blue-dark); font-size: .72rem; font-weight: 800; letter-spacing: .055em; text-transform: uppercase; }
.curriculum-meta strong { color: var(--ink-soft); font-size: .72rem; letter-spacing: normal; white-space: nowrap; }
.curriculum-row h3 { max-width: 40ch; margin: .38rem 0 0; font-size: 1.06rem; letter-spacing: -.022em; line-height: 1.25; }
.curriculum-row p { max-width: 56ch; margin: .35rem 0 .35rem; color: var(--ink-soft); font-size: .9rem; }
.row-foot { min-height: 2.45rem; margin-top: .25rem; }
.row-foot > span { color: var(--ink-soft); font-size: .75rem; font-weight: 650; }
.row-foot .text-button { min-height: 2.45rem; padding: .35rem 0; font-size: .78rem; white-space: nowrap; }
.track-note { margin: 1.4rem 0 .2rem; padding: 1rem; border: 1px solid #b8d0e8; border-radius: .72rem; background: var(--blue-wash); }
.track-note .eyebrow { margin-bottom: .25rem; }.track-note strong { font-size: 1rem; }.track-note p:last-child { margin: .35rem 0 0; color: var(--ink-soft); font-size: .88rem; }

.module-progress { display: grid; gap: .85rem; }
.module-row { padding: 1rem 0; border-bottom: 1px solid var(--line); }
.module-row:first-child { border-top: 1px solid var(--line); }
.module-row-head { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
.module-row h3 { margin: 0; font-size: 1rem; letter-spacing: -.015em; }
.module-row span { color: var(--ink-soft); font-size: .8rem; font-weight: 650; white-space: nowrap; }
.progress-track { height: .45rem; margin-top: .6rem; overflow: hidden; border-radius: 100vw; background: #dbe4ed; }
.progress-track i { display: block; height: 100%; border-radius: inherit; background: var(--green); }
.privacy-note { margin-top: 2.25rem; padding: 1rem 0; border-top: 2px solid var(--ink); color: var(--ink-soft); }
.privacy-note strong { color: var(--ink); }.privacy-note p { margin: .25rem 0 .35rem; font-size: .92rem; }.danger-link { color: var(--red); }

.bottom-nav { position: fixed; z-index: 3; right: 0; bottom: 0; left: 0; justify-content: center; gap: .2rem; padding: .6rem max(.5rem, env(safe-area-inset-right)) calc(.6rem + env(safe-area-inset-bottom)) max(.5rem, env(safe-area-inset-left)); border-top: 1px solid var(--line); background: rgba(255, 255, 255, .94); box-shadow: 0 -8px 28px rgba(13, 27, 42, .08); backdrop-filter: blur(10px); }
.nav-item { display: grid; flex: 1 1 0; min-width: 0; min-height: 3.35rem; padding: .3rem .2rem; border: 0; border-radius: .5rem; color: var(--ink-soft); background: transparent; font-size: .65rem; font-weight: 750; line-height: 1.15; place-items: center; }
.nav-item span { font-size: 1.18rem; line-height: 1; }.nav-item.is-active { color: var(--blue-dark); background: var(--blue-wash); }

.info-dialog { width: min(calc(100% - 2rem), 34rem); max-height: min(42rem, calc(100dvh - 2rem)); padding: 0; border: 0; border-radius: .85rem; color: var(--ink); box-shadow: 0 18px 70px rgba(13, 27, 42, .3); }
.info-dialog::backdrop { background: rgba(13, 27, 42, .48); }.dialog-inner { position: relative; padding: 2rem 1.35rem 1.5rem; }.dialog-inner h2 { font-size: 1.85rem; }.dialog-inner p:not(.eyebrow) { color: var(--ink-soft); }.source { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: .86rem; }.source strong { color: var(--ink); }.source a { color: var(--blue-dark); }.icon-button { position: absolute; top: .55rem; right: .55rem; width: 2.75rem; height: 2.75rem; border: 0; border-radius: .4rem; color: var(--ink); background: transparent; font-size: 1.65rem; line-height: 1; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (min-width: 44rem) {
  body { background: linear-gradient(180deg, #eaf2fc 0 15rem, var(--paper) 15rem 100%); }
  .app-shell { padding: 1.65rem 1.5rem 3rem; }
  .learning-controls { grid-template-columns: minmax(12rem, 1fr) minmax(16rem, 1.4fr); max-width: 39rem; }
  .intro { padding-top: 3.9rem; }.flashcard-wrap, .flashcard { min-height: 22rem; }
  .bottom-nav { position: static; justify-content: flex-start; gap: .45rem; margin-top: 2.2rem; padding: 0; border: 0; background: transparent; box-shadow: none; backdrop-filter: none; }
  .nav-item { grid-auto-flow: column; gap: .4rem; min-width: auto; min-height: 2.8rem; }
}

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