@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/PlusJakartaSans-latin.woff2") format("woff2");
}

:root {
  --ink: #17242c;
  --muted: #66757d;
  --line: #dce5e8;
  --paper: #fff;
  --canvas: #f4f7f8;
  --brand: #0b4f6c;
  --brand-dark: #073e55;
  --teal: #087e8b;
  --soft: #e8f4f6;
  --ok: #197447;
  --ok-soft: #eaf7ef;
  --bad: #b33a34;
  --bad-soft: #fff0ef;
  --amber: #a66a00;
  --amber-soft: #fff7df;
  --radius: 15px;
  --shadow: 0 13px 38px rgba(23, 36, 44, .09);
}

* { box-sizing: border-box; }
html {
  color: var(--ink);
  background: var(--canvas);
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  overflow-x: hidden;
  scroll-behavior: smooth;
}
body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background: var(--canvas);
  font-family: inherit;
}
button, input, select { font: inherit; }
button { touch-action: manipulation; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible {
  outline: 3px solid #f0a202 !important;
  outline-offset: 2px;
}
[hidden] { display: none !important; }
.noscript { padding: 14px; color: #fff; background: var(--bad); text-align: center; font-weight: 700; }

.topbar {
  position: sticky;
  z-index: 1040;
  top: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  height: 66px;
  padding: 0 22px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(12px);
}
.brand {
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 0;
  border: 0;
  color: var(--ink);
  background: transparent;
  text-align: left;
}
.brand-copy { display: flex; min-width: 0; flex-direction: column; line-height: 1.2; }
.brand-copy strong { overflow: hidden; font-size: 1rem; text-overflow: ellipsis; white-space: nowrap; }
.brand-copy small { color: var(--muted); font-size: .69rem; white-space: nowrap; }
.top-actions { display: flex; align-items: center; gap: 7px; margin-left: auto; }
.menu-button { display: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 9px; color: var(--ink); background: transparent; font-size: 1.4rem; }
.text-button { min-height: 44px; padding: 8px 11px; border: 0; color: var(--muted); background: transparent; font-weight: 750; }
.text-button:hover { color: var(--brand); }
.text-button.is-active { border-radius: 9px; color: var(--brand); background: var(--soft); box-shadow: inset 0 -2px var(--teal); }
.nav-button-icon { display: none; }
.compact-button, .primary, .secondary {
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 750;
}
.compact-button { border: 1px solid var(--line); color: var(--brand); background: #fff; }
.primary { border: 1px solid var(--brand); color: #fff; background: var(--brand); }
.primary:hover:not(:disabled) { border-color: var(--brand-dark); background: var(--brand-dark); }
.secondary { border: 1px solid #becdd2; color: var(--brand); background: #fff; }
.secondary:hover:not(:disabled) { background: var(--soft); }
.primary:disabled, .secondary:disabled { cursor: not-allowed; opacity: .45; }

.app-shell { display: grid; grid-template-columns: 292px minmax(0, 1fr); min-height: calc(100vh - 66px); }
.sidebar {
  position: sticky;
  top: 66px;
  z-index: 30;
  flex-direction: column;
  width: 292px;
  height: calc(100vh - 66px);
  padding: 18px 12px;
  overflow: auto;
  overscroll-behavior: contain;
  border-right: 1px solid var(--line);
  background: #fff;
}
.sidebar-head { display: flex; align-items: center; justify-content: space-between; padding: 1px 9px 13px; }
.sidebar-head > div { display: flex; flex-direction: column; }
.sidebar-head strong { font-size: .92rem; }
.sidebar-head span { color: var(--muted); font-size: .72rem; }
.topic-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 4px 14px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--muted);
  background: var(--canvas);
}
.topic-search:focus-within {
  border-color: var(--teal);
  box-shadow: 0 0 0 2px rgba(8, 126, 139, .14);
}
.topic-search input { width: 100%; min-width: 0; padding: 0; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: .82rem; }
.topic-search input:focus-visible { outline: 0 !important; }
.topic-list { display: flex; flex: 1 0 auto; flex-direction: column; gap: 14px; }
.topic-group h3 { margin: 0 10px 5px; color: #829097; font-size: .64rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.topic-button {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 9px 8px;
  border: 0;
  border-radius: 10px;
  color: #354850;
  background: transparent;
  text-align: left;
}
.topic-button:hover { background: var(--canvas); }
.topic-button.selected { color: var(--brand); background: var(--soft); box-shadow: inset 3px 0 var(--teal); }
.topic-check {
  display: grid;
  justify-self: end;
  place-items: center;
  width: 19px;
  height: 19px;
  border: 1px solid #c8d5d9;
  border-radius: 6px;
  color: transparent;
  background: #fff;
  font-size: .65rem;
  font-weight: 900;
  line-height: 1;
}
.topic-button.selected .topic-check {
  border-color: var(--teal);
  color: #fff;
  background: var(--teal);
}
.topic-number { color: var(--teal); font-weight: 800; text-align: center; }
.topic-copy { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.topic-copy strong { overflow: hidden; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.topic-copy small { color: var(--muted); font-size: .64rem; }
.sidebar-source {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  margin-top: auto;
  padding: 16px 8px 2px;
  border: 0;
  border-top: 1px solid var(--line);
  color: var(--ink);
  background: #fff;
  text-align: left;
}
.sidebar-source > span:first-child { display: grid; flex: 0 0 auto; place-items: center; width: 29px; height: 29px; border-radius: 9px; color: var(--ok); background: var(--ok-soft); font-weight: 800; }
.sidebar-source > span:last-child { display: flex; flex-direction: column; }
.sidebar-source strong { font-size: .72rem; }
.sidebar-source small { color: var(--muted); font-size: .61rem; }

.mobile-sidebar { width: min(88vw, 350px) !important; }
.mobile-sidebar .offcanvas-header { border-bottom: 1px solid var(--line); }
.mobile-sidebar .offcanvas-header > div { display: flex; flex-direction: column; }
.mobile-sidebar .offcanvas-title { margin: 0; font-size: 1rem; font-weight: 800; }
.mobile-sidebar .offcanvas-header span { color: var(--muted); font-size: .72rem; }
.mobile-sidebar .offcanvas-body { display: flex; flex-direction: column; padding: 14px 10px; overflow-y: auto; }

.main { width: 100%; max-width: 1180px; min-width: 0; margin: 0 auto; padding: 42px 36px 70px; }
.hero { display: grid; grid-template-columns: minmax(0, 1fr) 350px; align-items: end; gap: 38px; padding-bottom: 35px; border-bottom: 1px solid var(--line); }
.eyebrow { display: block; margin-bottom: 9px; color: var(--teal); font-size: .7rem; font-weight: 800; letter-spacing: .105em; text-transform: uppercase; }
.hero h1, .sources-view h1, .results-view h1 { max-width: 740px; margin: 0; font-size: clamp(2rem, 4.6vw, 3.65rem); line-height: 1.06; letter-spacing: -.045em; }
.hero h1 em { color: var(--brand); font-style: normal; }
.hero p, .lead { max-width: 680px; margin: 18px 0 0; color: var(--muted); font-size: 1rem; line-height: 1.7; }
.hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: 0 3px 12px rgba(23, 36, 44, .04); }
.hero-stats div { padding: 20px 10px; border-right: 1px solid var(--line); text-align: center; }
.hero-stats div:last-child { border-right: 0; }
.hero-stats strong { display: block; color: var(--brand); font-size: 1.4rem; }
.hero-stats span { display: block; margin-top: 3px; color: var(--muted); font-size: .62rem; }

.section-block { margin-top: 38px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 17px; }
.section-heading > div { display: flex; align-items: flex-start; gap: 12px; }
.step { display: grid; flex: 0 0 auto; place-items: center; width: 29px; height: 29px; border-radius: 9px; color: #fff; background: var(--brand); font-size: .75rem; font-weight: 800; }
.section-heading h2 { margin: 2px 0 3px; font-size: 1.15rem; font-weight: 800; }
.section-heading p { margin: 0; color: var(--muted); font-size: .78rem; }
.content-counter { padding: 7px 10px; border-radius: 999px; color: var(--teal); background: var(--soft); font-size: .68rem; font-weight: 750; white-space: nowrap; }
.mode-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mode-card {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: start;
  gap: 11px;
  min-height: 116px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  background: #fff;
  text-align: left;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.mode-card:hover:not(:disabled) { transform: translateY(-2px); border-color: #99c5ce; box-shadow: 0 8px 24px rgba(23, 36, 44, .07); }
.mode-card.selected { padding: 15px; border: 2px solid var(--teal); background: #fbffff; }
.mode-card:disabled { cursor: not-allowed; opacity: .42; }
.mode-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; color: var(--brand); background: var(--soft); font-weight: 800; }
.mode-card strong { display: block; margin: 1px 22px 5px 0; font-size: .87rem; }
.mode-card small { display: block; color: var(--muted); font-size: .7rem; line-height: 1.45; }
.mode-card b { display: block; margin-top: 8px; color: var(--teal); font-size: .61rem; }
.mode-card i { position: absolute; top: 9px; right: 10px; display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; color: #fff; background: var(--teal); font-size: .65rem; font-style: normal; }

.setup-card { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(210px, .7fr); gap: 18px; padding: 21px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); }
.setup-field { display: flex; min-width: 0; flex-direction: column; gap: 8px; }
.setup-field > label { font-size: .76rem; font-weight: 750; }
.setup-field .form-select { width: 100%; min-height: 49px; padding: 12px; border: 1px solid #bccbd1; border-radius: 10px; color: var(--ink); background-color: #fff; }
.topic-selection-panel { display: flex; align-items: center; gap: 10px; min-height: 49px; padding: 9px 12px; border: 1px solid #c7d8dc; border-radius: 10px; background: #fbffff; }
.topic-selection-icon { display: grid; flex: 0 0 auto; place-items: center; width: 29px; height: 29px; border-radius: 9px; color: var(--ok); background: var(--ok-soft); font-size: .8rem; font-weight: 850; }
.topic-selection-panel > div { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.topic-selection-panel strong { overflow-wrap: anywhere; color: var(--brand); font-size: .72rem; }
.topic-selection-panel small { color: var(--muted); font-size: .61rem; line-height: 1.4; }
.selected-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.selected-chip { overflow: hidden; max-width: 100%; padding: 7px 9px; border-radius: 999px; color: var(--brand); background: var(--soft); font-size: .67rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.more-chip { align-self: center; padding: 6px 3px; color: var(--muted); font-size: .66rem; font-weight: 750; }
.start-area { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-top: 17px; border-top: 1px solid var(--line); }
.practice-start-area { margin-top: 18px; }
.start-area > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 7px; }
.start-area strong { font-size: 1.25rem; }
.start-area span { color: var(--muted); font-size: .7rem; }
.start-button { min-width: 220px; }
.start-button span { margin-left: 8px; color: #fff; font-size: 1rem; }

.method-strip { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 42px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.method-strip > div { padding: 22px 20px; border-right: 1px solid var(--line); }
.method-strip > div:last-child { border-right: 0; }
.method-strip span { display: block; margin-bottom: 9px; color: var(--teal); font-size: .62rem; font-weight: 800; }
.method-strip strong { font-size: .82rem; }
.method-strip p { margin: 5px 0 0; color: var(--muted); font-size: .68rem; line-height: 1.5; }

.practice-view { max-width: 880px; margin: 0 auto; }
.practice-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.practice-head strong { font-size: 1rem; }
.practice-actions { display: flex; align-items: center; gap: 14px; }
.session-score { display: flex; gap: 14px; font-size: .72rem; font-weight: 750; }
.score-ok { color: var(--ok); }
.score-bad { color: var(--bad); }
.quit-button { min-height: 44px; padding: 8px; border: 0; color: var(--muted); background: transparent; font-size: .7rem; text-decoration: underline; }
.progress-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; margin-bottom: 12px; color: var(--muted); font-size: .67rem; }
.progress-row > div { height: 7px; overflow: hidden; border-radius: 99px; background: #dde6e9; }
.progress-row i { display: block; height: 100%; border-radius: 99px; background: var(--teal); transition: width .2s; }
.exercise-card { overflow: hidden; padding: clamp(22px, 5vw, 42px); border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: var(--shadow); }
.exercise-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 20px; }
.exercise-meta span { padding: 6px 9px; border-radius: 999px; color: var(--brand); background: var(--soft); font-size: .63rem; font-weight: 750; }
.exercise-meta span:last-child { color: var(--muted); background: var(--canvas); }
.exercise-card h2 { overflow-wrap: anywhere; margin: 0 0 26px; font-size: clamp(1.18rem, 2.5vw, 1.65rem); line-height: 1.42; letter-spacing: -.018em; }
.answer-list { display: grid; gap: 10px; }
.answer {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 58px;
  padding: 11px 13px;
  border: 1px solid #c9d6da;
  border-radius: 11px;
  color: var(--ink);
  background: #fff;
  text-align: left;
}
.answer:hover:not(:disabled) { border-color: var(--teal); background: #fbffff; }
.answer > span:last-child { overflow-wrap: anywhere; }
.answer > span:first-child { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: var(--brand); background: var(--canvas); font-size: .72rem; font-weight: 800; }
.answer.correct { border-color: var(--ok); background: var(--ok-soft); }
.answer.correct > span:first-child { color: #fff; background: var(--ok); }
.answer.wrong { border-color: var(--bad); background: var(--bad-soft); }
.answer.wrong > span:first-child { color: #fff; background: var(--bad); }
.binary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.binary-button { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 78px; border: 1px solid #c9d6da; border-radius: 12px; color: var(--ink); background: #fff; font-weight: 750; }
.binary-button span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; color: var(--brand); background: var(--canvas); }
.binary-button.correct { border-color: var(--ok); background: var(--ok-soft); }
.binary-button.correct span { color: #fff; background: var(--ok); }
.binary-button.wrong { border-color: var(--bad); background: var(--bad-soft); }
.binary-button.wrong span { color: #fff; background: var(--bad); }
.reveal-button { width: 100%; min-height: 50px; }
.reveal-panel { padding: 20px; border: 1px solid var(--line); border-radius: 13px; background: #f9fbfb; }
.big-answer { margin: 0; font-size: 1.05rem; line-height: 1.7; }
.mnemonic { margin: 0 0 12px; color: var(--brand); font-size: 1.4rem; font-weight: 800; }
.reveal-panel ul { padding-left: 22px; line-height: 1.8; }
.quoted { overflow-wrap: anywhere; padding-left: 13px; border-left: 3px solid var(--teal); font-size: 1.05rem; font-style: italic; }
.rating-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
.feedback { margin-top: 18px; padding: 17px; border-left: 4px solid; border-radius: 12px; }
.feedback.is-correct { border-color: var(--ok); background: var(--ok-soft); }
.feedback.is-wrong { border-color: #d39814; background: var(--amber-soft); }
.feedback > strong { font-size: .85rem; }
.feedback > p { margin: 6px 0 14px; font-size: .78rem; line-height: 1.6; }
.source-box { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-width: 0; padding: 11px 12px; border: 1px solid rgba(90, 120, 130, .2); border-radius: 10px; background: rgba(255, 255, 255, .72); }
.source-box > div { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.source-kicker { color: var(--teal); font-size: .52rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.source-box strong { overflow-wrap: anywhere; font-size: .66rem; }
.source-box small { overflow-wrap: anywhere; color: var(--muted); font-size: .59rem; }
.source-box a { color: var(--brand); font-size: .64rem; font-weight: 750; white-space: nowrap; }
.cloze-sentence { overflow-wrap: anywhere; padding: 18px; border-radius: 11px; background: var(--canvas); font-size: 1.08rem; line-height: 1.75; }
.cloze-entry { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; }
.cloze-entry input { min-width: 0; padding: 12px; border: 1px solid #bac9cf; border-radius: 10px; }
.correct-answer { color: var(--brand); font-size: .78rem; }
.exercise-help { color: var(--muted); font-size: .74rem; }
.match-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.match-column { display: grid; align-content: start; gap: 8px; }
.match-label { padding: 0 2px 2px; color: var(--muted); font-size: .63rem; font-weight: 750; }
.match-item { min-height: 50px; padding: 10px; border: 1px solid #c9d6da; border-radius: 10px; color: var(--ink); background: #fff; font-size: .72rem; text-align: left; overflow-wrap: anywhere; }
.match-item.selected { padding: 9px; border: 2px solid var(--teal); background: var(--soft); }
.match-item.matched { border-color: #7fbea0; color: var(--ok); background: var(--ok-soft); }
.nudge { color: var(--bad); font-size: .7rem; font-weight: 700; }
.order-list { display: grid; gap: 8px; }
.order-item { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 9px; border: 1px solid var(--line); border-radius: 10px; }
.order-item > span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: var(--brand); background: var(--soft); font-size: .7rem; font-weight: 800; }
.order-item p { overflow-wrap: anywhere; margin: 0; font-size: .72rem; line-height: 1.45; }
.order-controls { display: flex; gap: 4px; }
.order-controls button { width: 38px; height: 38px; padding: 0; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.check-order { width: 100%; margin-top: 14px; }
.solution-order { margin-top: 14px; padding: 15px; border-radius: 10px; background: var(--amber-soft); font-size: .74rem; }
.solution-order li { margin: 5px 0; }
.practice-nav { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 15px; }
.practice-nav > span { color: var(--muted); font-size: .67rem; }
.practice-nav button { min-width: 155px; }

.results-view { max-width: 760px; margin: 20px auto; text-align: center; }
.results-view h1 { margin: 8px auto 24px; font-size: clamp(2rem, 6vw, 3.4rem); }
.result-ring {
  --result: 0deg;
  display: grid;
  place-items: center;
  width: 172px;
  height: 172px;
  margin: 30px auto;
  border-radius: 50%;
  background: conic-gradient(var(--teal) var(--result), #dde7ea 0);
}
.result-ring > div { display: grid; place-items: center; width: 132px; height: 132px; border-radius: 50%; background: var(--canvas); }
.result-ring strong { color: var(--brand); font-size: 2.5rem; line-height: 1; }
.result-ring span { color: var(--muted); font-size: .75rem; }
.result-stats { display: grid; grid-template-columns: repeat(3, 1fr); overflow: hidden; margin: 0 auto 26px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.result-stats div { padding: 18px 12px; border-right: 1px solid var(--line); }
.result-stats div:last-child { border-right: 0; }
.result-stats strong { display: block; color: var(--brand); font-size: 1.25rem; }
.result-stats span { color: var(--muted); font-size: .68rem; }
.result-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

.sources-view { max-width: 900px; margin: 0 auto; }
.sources-view h1 { margin-bottom: 10px; }
.review-summary { display: grid; grid-template-columns: repeat(3, 1fr); overflow: hidden; margin-bottom: 25px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.review-summary div { padding: 18px 14px; border-right: 1px solid var(--line); text-align: center; }
.review-summary div:last-child { border-right: 0; }
.review-summary strong { display: block; color: var(--brand); font-size: 1.15rem; }
.review-summary span { color: var(--muted); font-size: .65rem; }
.source-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.source-list a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; min-height: 72px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 11px; color: var(--ink); background: #fff; text-decoration: none; }
.source-list a:hover { border-color: #95c4cc; }
.source-list a span { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.source-list strong { overflow-wrap: anywhere; font-size: .7rem; }
.source-list small { color: var(--muted); font-size: .6rem; }
.source-list b { color: var(--teal); }
.quality-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 25px; }
.quality-grid div { padding: 17px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.quality-grid strong { font-size: .78rem; }
.quality-grid p { margin: 6px 0 0; color: var(--muted); font-size: .68rem; line-height: 1.55; }
.source-actions { display: flex; justify-content: flex-end; margin-top: 20px; }
.summary-library { margin-top: 34px; }
.summary-library-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 14px; }
.summary-library-heading h2 { margin: 4px 0 5px; color: var(--brand); font-size: clamp(1.35rem, 3vw, 1.9rem); letter-spacing: -.035em; }
.summary-library-heading p { max-width: 680px; margin: 0; color: var(--muted); font-size: .72rem; line-height: 1.6; }
.summary-library-count { flex: 0 0 auto; padding: 7px 10px; border: 1px solid #b7dce1; border-radius: 999px; color: var(--teal); background: var(--soft); font-size: .63rem; font-weight: 800; }
.summary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.summary-card { display: flex; min-width: 0; flex-direction: column; justify-content: space-between; gap: 16px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.summary-card:hover { border-color: #95c4cc; }
.summary-card-main { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: start; gap: 12px; }
.summary-topic-number { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; color: var(--brand); background: var(--soft); font-size: .75rem; font-weight: 800; }
.summary-card strong { display: block; color: var(--muted); font-size: .62rem; letter-spacing: .07em; text-transform: uppercase; }
.summary-card h3 { margin: 3px 0 6px; color: var(--ink); font-size: .85rem; line-height: 1.3; }
.summary-card p { margin: 0; color: var(--muted); font-size: .66rem; line-height: 1.5; }
.summary-actions, .summary-toolbar-actions, .summary-detail-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.summary-action { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 35px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--brand); background: #fff; font-size: .64rem; font-weight: 800; text-decoration: none; }
.summary-action:hover { border-color: #95c4cc; color: var(--teal); }
.summary-action-primary { border-color: var(--brand); color: #fff; background: var(--brand); }
.summary-action-primary:hover { border-color: var(--teal); color: #fff; background: var(--teal); }
button.summary-action { cursor: pointer; font: inherit; }
.documentary-sources { margin-top: 38px; }
.documentary-sources-heading { margin-bottom: 14px; }
.documentary-sources-heading h2 { margin: 4px 0 5px; color: var(--brand); font-size: clamp(1.2rem, 2.6vw, 1.65rem); letter-spacing: -.03em; }
.documentary-sources-heading p { max-width: 690px; margin: 0; color: var(--muted); font-size: .72rem; line-height: 1.6; }
.summary-detail { max-width: 900px; margin: 0 auto; }
.summary-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 28px; }
.summary-back { min-height: 36px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--brand); background: #fff; font-size: .67rem; font-weight: 800; }
.summary-back:hover { border-color: #95c4cc; }
.summary-detail-header { padding: 22px 24px; border: 1px solid #c3e2e5; border-radius: 16px; background: linear-gradient(135deg, #f3fbfb, #fff); }
.summary-detail-header h1 { max-width: 820px; margin: 8px 0 12px; color: var(--brand); font-size: clamp(1.05rem, 1.8vw, 1.4rem); line-height: 1.28; letter-spacing: -.018em; text-wrap: balance; }
.summary-detail-header p { max-width: 700px; margin: 0; color: var(--muted); font-size: .74rem; line-height: 1.6; }
.summary-index { margin-top: 16px; padding: 15px 18px; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.summary-index summary { color: var(--brand); cursor: pointer; font-size: .78rem; font-weight: 800; }
.summary-index ol { display: grid; gap: 5px; margin: 13px 0 0; padding: 0; list-style: none; }
.summary-index li { color: var(--ink); font-size: .72rem; line-height: 1.52; }
.summary-index li a { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 8px; padding: 3px 5px; border-radius: 7px; color: inherit; text-decoration: none; }
.summary-index li a:hover { background: var(--soft); }
.summary-index li a > span:first-child { color: var(--teal); font-weight: 800; }
.summary-index li a > span:last-child { min-width: 0; }
.summary-index-level-2 { padding-left: 17px; }
.summary-document { margin-top: 18px; padding: clamp(20px, 4vw, 42px); border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 14px 34px rgba(11, 79, 108, .06); font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
.summary-document p { max-width: 74ch; margin: 0 0 16px; color: #263746; font-family: inherit; font-size: .93rem; line-height: 1.82; text-wrap: pretty; hyphens: auto; }
.summary-document p.summary-list-intro { margin-top: 7px; margin-bottom: 9px; color: var(--brand); font-weight: 700; line-height: 1.65; }
.summary-document strong { font-weight: 800; }
.summary-document .summary-citation { color: var(--teal); }
.summary-section-heading { scroll-margin-top: 82px; margin: 31px 0 12px; padding-top: 10px; border-top: 1px solid #dce8ea; color: var(--brand); font-size: 1.2rem; line-height: 1.3; letter-spacing: -.02em; }
.summary-section-heading:first-child { margin-top: 0; }
.summary-section-heading.level-2 { margin-top: 27px; color: var(--teal); font-size: 1.02rem; }
.summary-bullets { display: grid; gap: 9px; max-width: 74ch; margin: 4px 0 19px; padding-left: 24px; color: #263746; font-family: inherit; font-size: .9rem; line-height: 1.72; }
.summary-bullets li { padding-left: 3px; text-wrap: pretty; hyphens: auto; }
.summary-bullets li strong { color: #123f52; }
.summary-bullets li::marker { color: var(--teal); }
.summary-detail-footer { justify-content: space-between; margin-top: 18px; }
.danger-link { min-height: 44px; padding: 8px 10px; border: 0; color: var(--bad); background: transparent; font-size: .7rem; text-decoration: underline; }

.learning-area { max-width: 1020px; margin: 0 auto; }
.area-hero { display: grid; grid-template-columns: minmax(0, 1fr) 180px; align-items: end; gap: 28px; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.area-hero h1 { max-width: 760px; margin: 5px 0 10px; font-size: clamp(2rem, 5vw, 3.65rem); line-height: 1.06; letter-spacing: -.045em; }
.area-hero h1 em { color: var(--brand); font-style: normal; }
.area-hero p { max-width: 720px; margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.7; }
.area-stat { display: grid; place-items: center; min-height: 128px; padding: 18px; border: 1px solid #b9dce1; border-radius: 16px; background: linear-gradient(145deg, #f1fbfb, #fff); text-align: center; }
.area-stat strong { display: block; color: var(--brand); font-size: 2rem; line-height: 1; }
.area-stat span { display: block; max-width: 120px; margin-top: 7px; color: var(--muted); font-size: .65rem; line-height: 1.35; }
.area-tabs { display: flex; gap: 5px; overflow-x: auto; margin: 19px 0 24px; padding: 5px; border: 1px solid var(--line); border-radius: 12px; background: #fff; scrollbar-width: thin; }
.area-tabs button { flex: 0 0 auto; min-height: 38px; padding: 8px 12px; border: 0; border-radius: 8px; color: var(--muted); background: transparent; font-size: .7rem; font-weight: 800; }
.area-tabs button:hover { color: var(--brand); background: var(--canvas); }
.area-tabs button.is-active { color: #fff; background: var(--brand); }
.area-overview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.area-card { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: start; gap: 13px; min-height: 145px; padding: 20px; border: 1px solid var(--line); border-radius: 15px; color: var(--ink); background: #fff; text-align: left; }
.area-card:hover { border-color: #93c5cc; box-shadow: 0 12px 28px rgba(11, 79, 108, .08); transform: translateY(-1px); }
.area-card > span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; color: var(--brand); background: var(--soft); font-size: .72rem; font-weight: 800; }
.area-card strong { display: block; margin: 1px 0 6px; font-size: .88rem; }
.area-card p { margin: 0 0 10px; color: var(--muted); font-size: .69rem; line-height: 1.55; }
.area-card small { color: var(--teal); font-size: .61rem; font-weight: 750; }
.area-card > b { align-self: center; color: var(--teal); font-size: 1.15rem; }
.area-card-featured { border-color: #a7d3d8; background: linear-gradient(145deg, #f2fbfb, #fff); }
.area-card-wide { grid-column: 1 / -1; }
.programming-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.material-reader { max-width: 920px; margin: 0 auto; }
.material-reader > header { margin-bottom: 18px; padding: 22px 24px; border: 1px solid #c3e2e5; border-radius: 16px; background: linear-gradient(135deg, #f3fbfb, #fff); }
.material-reader > header h2 { margin: 5px 0 9px; color: var(--brand); font-size: clamp(1.35rem, 3vw, 2rem); line-height: 1.2; letter-spacing: -.03em; }
.material-reader > header p { max-width: 720px; margin: 0; color: var(--muted); font-size: .76rem; line-height: 1.65; }
.material-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px; }
.material-sections { display: grid; gap: 8px; }
.material-section, .condition-card { overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.material-section > summary, .condition-card > summary { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 54px; padding: 11px 15px; cursor: pointer; list-style: none; }
.material-section > summary::-webkit-details-marker, .condition-card > summary::-webkit-details-marker { display: none; }
.material-section > summary > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; color: var(--brand); background: var(--soft); font-size: .65rem; font-weight: 800; }
.material-section > summary strong, .condition-card > summary span { font-size: .76rem; line-height: 1.4; }
.material-section > summary i, .condition-card > summary i { color: var(--teal); font-size: 1.1rem; font-style: normal; }
.material-section[open] > summary, .condition-card[open] > summary { border-bottom: 1px solid var(--line); background: #fbfefe; }
.material-section[open] > summary i, .condition-card[open] > summary i { transform: rotate(45deg); }
.material-section-body, .condition-card > div { padding: 20px clamp(16px, 4vw, 30px); }
.material-section-body p, .condition-card > div p, .trainer-answer p { max-width: 76ch; margin: 0 0 14px; color: #263746; font-size: .86rem; line-height: 1.78; }
.material-label { margin: 22px 0 9px; color: var(--brand); font-size: .9rem; }
.oral-cue { margin: 12px 0; padding: 12px 14px; border-left: 4px solid #d39a12; border-radius: 8px; color: #6e5000; background: var(--amber-soft); font-size: .76rem; }
.oral-cue span { display: block; margin-bottom: 3px; font-size: .57rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.condition-grid { display: grid; gap: 8px; }
.condition-card > summary { grid-template-columns: minmax(0, 1fr) auto; }
.glossary-strip { margin-top: 30px; }
.glossary-strip h3 { margin: 4px 0 14px; color: var(--brand); }
.legislation-list { display: grid; gap: 8px; }
.legislation-list article { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.legislation-list article span { color: var(--teal); font-size: .57rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.legislation-list article h3 { margin: 4px 0 5px; font-size: .78rem; line-height: 1.4; }
.legislation-list article p { margin: 0; color: var(--muted); font-size: .66rem; line-height: 1.55; }
.law-status { display: flex; align-items: center; gap: 8px; }
.law-status small { max-width: 120px; color: var(--muted); font-size: .58rem; text-align: right; }
.law-status a { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; color: #fff; background: var(--brand); text-decoration: none; }
.annual-warning { margin-top: 18px; padding: 16px 18px; border-left: 4px solid #d39a12; border-radius: 10px; background: var(--amber-soft); }
.annual-warning strong { font-size: .78rem; }
.annual-warning p { margin: 5px 0 0; color: #674e14; font-size: .69rem; line-height: 1.55; }
.trainer-shell { max-width: 840px; margin: 0 auto; }
.trainer-controls { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 20px; align-items: end; margin-bottom: 14px; }
.trainer-controls h2 { margin: 4px 0 5px; color: var(--brand); font-size: 1.55rem; }
.trainer-controls p { margin: 0; color: var(--muted); font-size: .72rem; line-height: 1.55; }
.trainer-controls label { display: grid; gap: 6px; color: var(--ink); font-size: .67rem; font-weight: 750; }
.trainer-card { padding: clamp(22px, 5vw, 40px); border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: var(--shadow); }
.trainer-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.trainer-meta span { padding: 6px 8px; border-radius: 999px; color: var(--brand); background: var(--soft); font-size: .6rem; font-weight: 750; }
.trainer-card h3 { margin: 0 0 24px; font-size: clamp(1.15rem, 2.5vw, 1.6rem); line-height: 1.42; }
.trainer-instruction, .oral-prompt { margin: 0 0 16px; padding: 16px; border-radius: 11px; color: var(--muted); background: var(--canvas); font-size: .76rem; line-height: 1.6; }
.oral-prompt strong { color: var(--brand); }
.oral-prompt p { margin: 5px 0 0; }
.trainer-answer { max-height: 58vh; overflow: auto; margin-bottom: 14px; padding: 19px; border: 1px solid var(--line); border-radius: 12px; background: #fbfdfd; }
.legal-answer { display: flex; flex-direction: column; gap: 5px; }
.legal-answer span { color: var(--muted); font-size: .66rem; }
.empty-note { padding: 20px; color: var(--muted); text-align: center; }
.case-examples-intro { margin-bottom: 15px; padding: 20px 22px; border: 1px solid #c3e2e5; border-radius: 15px; background: linear-gradient(135deg, #f3fbfb, #fff); }
.case-examples-intro h2 { margin: 4px 0 7px; color: var(--brand); font-size: 1.45rem; }
.case-examples-intro p { max-width: 710px; margin: 0; color: var(--muted); font-size: .75rem; line-height: 1.6; }
.case-examples-grid { display: grid; gap: 10px; }
.case-example-card { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: start; gap: 14px; min-height: 140px; padding: 19px; border: 1px solid var(--line); border-radius: 15px; color: var(--ink); background: #fff; text-align: left; }
.case-example-card:hover { border-color: #8fc2ca; box-shadow: 0 11px 28px rgba(11, 79, 108, .08); }
.case-example-card.is-resolved { border-left: 4px solid var(--teal); }
.case-example-number { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 13px; color: var(--brand); background: var(--soft); font-size: .75rem; font-weight: 800; }
.case-example-card small { color: var(--teal); font-size: .58rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.case-example-card strong { display: block; margin: 4px 0 6px; font-size: .9rem; }
.case-example-card p { max-width: 680px; margin: 0 0 10px; color: var(--muted); font-size: .69rem; line-height: 1.55; }
.case-example-card > b { align-self: center; color: var(--teal); font-size: 1.2rem; }
.case-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.case-tags span { padding: 5px 8px; border-radius: 999px; color: var(--brand); background: var(--soft); font-size: .57rem; font-weight: 750; }
.case-example-reader { max-width: 900px; margin: 0 auto; }
.case-example-back { margin-bottom: 14px; }
.case-example-header { padding: 24px; border: 1px solid #b9dce1; border-radius: 16px; background: linear-gradient(135deg, #effafa, #fff); }
.case-example-header h1 { max-width: 780px; margin: 6px 0 9px; color: var(--brand); font-size: clamp(1.55rem, 4vw, 2.45rem); line-height: 1.15; letter-spacing: -.035em; }
.case-example-header p { max-width: 730px; margin: 0 0 13px; color: var(--muted); font-size: .78rem; line-height: 1.6; }
.case-example-notice { margin: 13px 0; padding: 14px 17px; border-left: 4px solid #d39a12; border-radius: 10px; background: var(--amber-soft); }
.case-example-notice strong { font-size: .75rem; }
.case-example-notice p { margin: 4px 0 0; color: #674e14; font-size: .69rem; line-height: 1.55; }
.case-prompt { margin: 13px 0; padding: clamp(20px, 4vw, 32px); border: 1px solid var(--line); border-radius: 15px; background: #fff; }
.case-prompt h2 { margin: 4px 0 14px; color: var(--brand); font-size: 1.25rem; }
.case-prompt p { max-width: 76ch; margin: 0 0 13px; color: #263746; font-size: .84rem; line-height: 1.75; }
.case-example-index { margin-bottom: 13px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.case-example-index > strong { color: var(--brand); font-size: .76rem; }
.case-example-index ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 14px; margin: 11px 0 0; padding: 0; list-style: none; }
.case-example-index a { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 7px; padding: 5px; border-radius: 7px; color: var(--ink); font-size: .64rem; line-height: 1.4; text-decoration: none; }
.case-example-index a:hover { background: var(--soft); }
.case-example-index a span { color: var(--teal); font-weight: 800; }
.case-example-document { padding: clamp(22px, 5vw, 42px); border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 14px 34px rgba(11, 79, 108, .06); }
.case-example-document section { scroll-margin-top: 82px; }
.case-example-document h2 { margin: 30px 0 12px; padding-top: 10px; border-top: 1px solid #dce8ea; color: var(--brand); font-size: 1.14rem; line-height: 1.3; }
.case-example-document section:first-child h2 { margin-top: 0; padding-top: 0; border-top: 0; }
.case-example-document p, .case-example-document li { color: #263746; font-size: .88rem; line-height: 1.78; text-wrap: pretty; }
.case-example-document p { max-width: 76ch; margin: 0 0 14px; }
.case-example-document ul, .case-example-document ol { display: grid; gap: 8px; max-width: 76ch; padding-left: 24px; }
.case-example-document li { padding-left: 3px; }
.case-example-document li::marker { color: var(--teal); font-weight: 800; }
.case-example-document .summary-citation { color: var(--teal); }
.case-example-footer { display: flex; justify-content: space-between; gap: 10px; margin-top: 15px; }

.empty-state { max-width: 620px; margin: 80px auto; text-align: center; }
.empty-state > span { display: block; color: var(--teal); font-size: 3rem; }
.empty-state h1 { margin: 12px 0; font-size: 1.8rem; }
.empty-state p { color: var(--muted); }

body[data-area="cases"] .app-shell,
body[data-area="programming"] .app-shell { grid-template-columns: minmax(0, 1fr); }
body[data-area="cases"] .sidebar,
body[data-area="programming"] .sidebar { display: none !important; }
body[data-area="cases"] .main,
body[data-area="programming"] .main { max-width: 1180px; }
.learning-area { width: 100%; max-width: 1060px; margin: 0 auto; }
.area-hero { display: grid; grid-template-columns: minmax(0, 1fr) 210px; align-items: end; gap: 34px; padding-bottom: 30px; border-bottom: 1px solid var(--line); }
.area-hero h1 { max-width: 780px; margin: 0; font-size: clamp(2rem, 4.7vw, 3.7rem); line-height: 1.06; letter-spacing: -.045em; }
.area-hero h1 em { color: var(--brand); font-style: normal; }
.area-hero p { max-width: 740px; margin: 17px 0 0; color: var(--muted); font-size: .96rem; line-height: 1.72; }
.area-stat { display: flex; flex-direction: column; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); }
.area-stat strong { color: var(--brand); font-size: 2rem; line-height: 1; }
.area-stat span { margin-top: 7px; color: var(--muted); font-size: .68rem; line-height: 1.4; }
.area-tabs { display: flex; gap: 7px; margin: 22px 0; padding: 6px; overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: #fff; scrollbar-width: thin; }
.area-tabs button { flex: 0 0 auto; min-height: 39px; padding: 8px 12px; border: 0; border-radius: 8px; color: var(--muted); background: transparent; font-size: .69rem; font-weight: 800; }
.area-tabs button:hover { color: var(--brand); background: var(--canvas); }
.area-tabs button.is-active { color: #fff; background: var(--brand); }
.area-overview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.area-card { display: grid; grid-template-columns: 45px minmax(0, 1fr) 25px; align-items: start; gap: 14px; min-height: 176px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); background: #fff; text-align: left; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.area-card:hover { transform: translateY(-2px); border-color: #8fc1c9; box-shadow: var(--shadow); }
.area-card > span { display: grid; place-items: center; width: 45px; height: 45px; border-radius: 12px; color: var(--brand); background: var(--soft); font-size: .72rem; font-weight: 850; }
.area-card strong { display: block; color: var(--brand); font-size: 1rem; }
.area-card p { margin: 8px 0 15px; color: var(--muted); font-size: .75rem; line-height: 1.6; }
.area-card small { color: var(--teal); font-size: .65rem; font-weight: 800; }
.area-card > b { align-self: center; color: var(--teal); font-size: 1.2rem; }
.area-card-featured { border-color: #abd7dc; background: linear-gradient(135deg, #f1fbfb, #fff); }
.area-card-wide { grid-column: 1 / -1; }
.material-reader > header { margin-bottom: 18px; padding: 24px; border: 1px solid #c4e2e5; border-radius: 16px; background: linear-gradient(135deg, #f3fbfb, #fff); }
.material-reader > header h2, .trainer-controls h2 { margin: 5px 0 9px; color: var(--brand); font-size: clamp(1.35rem, 3vw, 2rem); letter-spacing: -.03em; }
.material-reader > header p, .trainer-controls p { max-width: 760px; margin: 0; color: var(--muted); font-size: .77rem; line-height: 1.65; }
.material-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.material-sections { display: grid; gap: 9px; }
.material-section { overflow: clip; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.material-section summary, .condition-card summary { display: flex; align-items: center; gap: 11px; padding: 15px 17px; cursor: pointer; list-style: none; }
.material-section summary::-webkit-details-marker, .condition-card summary::-webkit-details-marker { display: none; }
.material-section summary > span { color: var(--teal); font-size: .66rem; font-weight: 850; }
.material-section summary strong { flex: 1; color: var(--ink); font-size: .8rem; line-height: 1.35; }
.material-section summary i, .condition-card summary i { margin-left: auto; color: var(--teal); font-size: 1rem; font-style: normal; transition: transform .15s ease; }
.material-section[open] summary i, .condition-card[open] summary i { transform: rotate(45deg); }
.material-section[open] summary { color: var(--brand); background: var(--soft); }
.material-section-body { padding: 20px 22px 22px; border-top: 1px solid var(--line); }
.material-section-body p, .condition-card > div p, .trainer-answer p { max-width: 78ch; margin: 0 0 13px; color: #263746; font-size: .88rem; line-height: 1.78; }
.material-label { margin: 22px 0 8px; color: var(--brand); font-size: .82rem; }
.oral-cue { display: flex; align-items: center; gap: 10px; margin: 10px 0; padding: 10px 12px; border-left: 3px solid var(--amber); border-radius: 7px; color: #614600; background: var(--amber-soft); font-size: .72rem; line-height: 1.5; }
.oral-cue span { flex: 0 0 auto; color: var(--amber); font-size: .58rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.condition-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.condition-card { overflow: clip; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.condition-card summary > span { flex: 1; color: var(--brand); font-size: .76rem; font-weight: 850; }
.condition-card > div { padding: 0 17px 17px; border-top: 1px solid var(--line); }
.condition-card > div p { margin: 11px 0 0; font-size: .76rem; line-height: 1.62; }
.glossary-strip { margin-top: 34px; padding-top: 25px; border-top: 1px solid var(--line); }
.glossary-strip h3 { margin: 4px 0 14px; color: var(--brand); font-size: 1.2rem; }
.legislation-list { display: grid; gap: 8px; }
.legislation-list article { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.legislation-list article > div:first-child { min-width: 0; }
.legislation-list article span { color: var(--teal); font-size: .58rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.legislation-list h3 { margin: 3px 0 5px; color: var(--ink); font-size: .82rem; line-height: 1.4; }
.legislation-list p { margin: 0; color: var(--muted); font-size: .68rem; line-height: 1.55; }
.law-status { display: flex; flex: 0 0 190px; align-items: center; justify-content: flex-end; gap: 10px; }
.law-status small { color: var(--muted); font-size: .6rem; line-height: 1.35; text-align: right; }
.law-status a { display: grid; flex: 0 0 auto; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 8px; color: var(--brand); text-decoration: none; }
.annual-warning { margin-top: 14px; padding: 16px 18px; border: 1px solid #ead08d; border-radius: 12px; color: #5c460f; background: var(--amber-soft); }
.annual-warning strong { font-size: .76rem; }
.annual-warning p { margin: 6px 0 0; font-size: .7rem; line-height: 1.6; }
.trainer-shell { display: grid; gap: 15px; }
.trainer-controls { display: flex; align-items: flex-end; justify-content: space-between; gap: 25px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.trainer-controls > div { min-width: 0; }
.trainer-controls label { display: flex; flex: 0 0 240px; flex-direction: column; gap: 7px; color: var(--muted); font-size: .65rem; font-weight: 800; }
.trainer-controls .form-select { min-height: 43px; border-color: #bdced2; color: var(--ink); font-size: .72rem; }
.trainer-controls-double { align-items: center; }
.trainer-selects { display: grid; flex: 0 0 min(420px, 46%); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.trainer-selects label { min-width: 0; }
.trainer-card { padding: clamp(22px, 4vw, 42px); border: 1px solid #add5da; border-radius: 18px; background: linear-gradient(145deg, #fff, #f4fbfb); box-shadow: var(--shadow); }
.trainer-meta { display: flex; flex-wrap: wrap; gap: 7px; }
.trainer-meta span { padding: 6px 9px; border-radius: 999px; color: var(--teal); background: var(--soft); font-size: .6rem; font-weight: 800; }
.trainer-card h3 { max-width: 780px; margin: 24px 0 16px; color: var(--brand); font-size: clamp(1.25rem, 3vw, 2rem); line-height: 1.3; letter-spacing: -.025em; }
.trainer-instruction, .oral-prompt p { margin: 0 0 19px; color: var(--muted); font-size: .78rem; line-height: 1.65; }
.trainer-answer { margin: 17px 0; padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.trainer-answer .material-label:first-child { margin-top: 0; }
.trainer-clue {
  margin: 0 0 18px;
  padding: 16px 18px;
  border: 0;
  border-left: 4px solid var(--teal);
  border-radius: 10px;
  color: #263746;
  background: #fff;
  font-size: .82rem;
  line-height: 1.7;
}
.trainer-options { display: grid; gap: 9px; }
.trainer-option {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 56px;
  padding: 10px 13px;
  border: 1px solid #c4d3d7;
  border-radius: 11px;
  color: var(--ink);
  background: #fff;
  text-align: left;
}
.trainer-option:hover:not(:disabled) { border-color: var(--teal); background: #fbffff; }
.trainer-option > span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; color: var(--brand); background: var(--soft); font-size: .7rem; font-weight: 850; }
.trainer-option.is-correct { border-color: var(--ok); background: var(--ok-soft); }
.trainer-option.is-correct > span { color: #fff; background: var(--ok); }
.trainer-option.is-wrong { border-color: var(--bad); background: var(--bad-soft); }
.trainer-option.is-wrong > span { color: #fff; background: var(--bad); }
.trainer-feedback { margin-top: 15px; padding: 16px 18px; border-left: 4px solid; border-radius: 11px; }
.trainer-feedback.is-correct { border-color: var(--ok); background: var(--ok-soft); }
.trainer-feedback.is-wrong { border-color: var(--amber); background: var(--amber-soft); }
.trainer-feedback > strong { display: block; margin-bottom: 8px; font-size: .78rem; }
.trainer-feedback p, .trainer-feedback li { font-size: .76rem; line-height: 1.65; }
.trainer-feedback p { margin: 0 0 9px; }
.trainer-next { width: 100%; margin-top: 12px; }
.case-context { margin-bottom: 16px; border: 1px solid var(--line); border-radius: 11px; background: #fff; }
.case-context summary { padding: 12px 15px; color: var(--brand); cursor: pointer; font-size: .72rem; font-weight: 800; }
.case-context > div { max-height: 300px; padding: 0 15px 15px; overflow: auto; }
.case-context p { margin: 0 0 10px; color: #33474f; font-size: .74rem; line-height: 1.65; }
.trainer-selects-single { grid-template-columns: 1fr; }
.case-workshop { display: grid; gap: 14px; }
.case-workshop-card { overflow: hidden; border: 1px solid #add5da; border-radius: 18px; background: #fff; box-shadow: var(--shadow); }
.case-workshop-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 24px 26px 18px; }
.case-workshop-card > header h3 { margin: 3px 0 7px; color: var(--brand); font-size: clamp(1.25rem, 3vw, 1.9rem); line-height: 1.25; }
.case-workshop-card > header p { max-width: 720px; margin: 0; color: var(--muted); font-size: .76rem; line-height: 1.6; }
.workshop-step { display: grid; flex: 0 0 auto; place-items: center; min-width: 54px; min-height: 38px; padding: 7px 10px; border-radius: 999px; color: var(--teal); background: var(--soft); font-size: .68rem; font-weight: 850; }
.workshop-progress { height: 6px; background: #e2ebed; }
.workshop-progress i { display: block; height: 100%; background: var(--teal); transition: width .2s ease; }
.case-workshop-card > .case-context { margin: 18px 26px 0; }
.workshop-phase { padding: 24px 26px; }
.workshop-phase > h3 { margin: 3px 0 8px; color: var(--brand); font-size: 1.2rem; }
.workshop-phase > p { margin: 0 0 17px; color: #33474f; font-size: .82rem; line-height: 1.68; }
.workshop-review { display: grid; gap: 10px; margin-top: 16px; }
.workshop-review section { padding: 16px 18px; border: 1px solid var(--line); border-radius: 11px; background: #f9fbfb; }
.workshop-review section > span { color: var(--teal); font-size: .62rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.workshop-review p, .workshop-review li { color: #33474f; font-size: .76rem; line-height: 1.65; }
.workshop-review p { margin: 9px 0 0; }
.workshop-review ul { margin: 9px 0 0; padding-left: 20px; }
.workshop-nav { display: flex; justify-content: space-between; gap: 10px; padding: 16px 26px 22px; border-top: 1px solid var(--line); }
.legal-answer { display: flex; flex-direction: column; gap: 8px; }
.legal-answer strong { color: var(--brand); font-size: 1rem; }
.legal-answer span { color: var(--muted); font-size: .7rem; }
.oral-prompt { margin: 17px 0; padding: 18px; border: 1px dashed #9fcbd1; border-radius: 12px; background: #fff; }
.oral-prompt strong { color: var(--teal); font-size: .78rem; }
.oral-prompt p { margin: 6px 0 0; }
.open-answer { display: flex; flex-direction: column; gap: 9px; margin-bottom: 12px; }
.open-answer > span { color: var(--muted); font-size: .7rem; }
.open-answer textarea { width: 100%; min-height: 190px; padding: 15px; resize: vertical; border: 1px solid #b8cbd0; border-radius: 11px; color: var(--ink); background: #fff; font: inherit; font-size: .84rem; line-height: 1.65; }
.model-answer { margin-bottom: 15px; }
.model-answer > span { display: block; margin-bottom: 8px; color: var(--teal); font-size: .62rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.model-answer p, .own-answer p { white-space: normal; }
.own-answer { margin: 12px 0; padding: 12px 15px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.own-answer summary { color: var(--brand); cursor: pointer; font-size: .72rem; font-weight: 800; }
.own-answer p { margin: 10px 0 0; color: var(--muted); font-size: .78rem; line-height: 1.65; }
.empty-note { padding: 20px; color: var(--muted); text-align: center; }

@media (max-width: 1199.98px) {
  .main { padding-inline: 28px; }
  .hero { grid-template-columns: minmax(0, 1fr) 300px; gap: 26px; }
  .mode-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 991.98px) {
  .menu-button { display: grid; place-items: center; }
  body[data-area="cases"] .menu-button,
  body[data-area="programming"] .menu-button { display: none; }
  .app-shell { display: block; }
  .main { max-width: 900px; padding-top: 32px; }
  .hero { grid-template-columns: 1fr; align-items: start; }
  .hero-stats { max-width: 470px; }
  .area-hero { grid-template-columns: 1fr; align-items: start; }
  .area-stat { max-width: 280px; }
}

@media (max-width: 767.98px) {
  html { font-size: 15px; }
  .topbar { height: 58px; padding: 0 10px; }
  .top-actions { gap: 3px; }
  .text-button.nav-button { display: grid; place-items: center; width: 40px; height: 40px; min-height: 40px; padding: 0; border-radius: 9px; }
  .nav-button-label { display: none; }
  .nav-button-icon { display: grid; place-items: center; width: 30px; height: 30px; font-size: 1.18rem; line-height: 1; }
  .compact-button { min-height: 40px; padding: 8px 10px; font-size: .75rem; }
  .main { padding: 24px 14px 46px; }
  .hero { gap: 24px; padding-bottom: 26px; }
  .hero h1 { font-size: clamp(1.85rem, 9vw, 2.75rem); }
  .hero p { margin-top: 13px; font-size: .9rem; line-height: 1.6; }
  .section-block { margin-top: 30px; }
  .section-heading { align-items: flex-start; }
  .content-counter { display: none; }
  .mode-grid { grid-template-columns: 1fr; }
  .mode-card { min-height: 104px; }
  .setup-card { grid-template-columns: 1fr; padding: 16px; }
  .start-area { align-items: stretch; flex-direction: column; }
  .start-button { width: 100%; min-width: 0; }
  .method-strip { grid-template-columns: repeat(2, 1fr); }
  .method-strip > div:nth-child(2) { border-right: 0; }
  .method-strip > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .practice-head { align-items: flex-start; flex-direction: column; gap: 10px; }
  .practice-actions { justify-content: space-between; width: 100%; }
  .exercise-card { padding: 22px 16px; }
  .exercise-card h2 { margin-bottom: 21px; }
  .match-grid { grid-template-columns: 1fr; }
  .match-column + .match-column { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--line); }
  .source-box { align-items: stretch; flex-direction: column; }
  .source-box a { min-height: 40px; padding: 10px; border-radius: 8px; background: #fff; text-align: center; }
  .cloze-entry { grid-template-columns: 1fr; }
  .cloze-entry button { width: 100%; }
  .practice-nav { align-items: stretch; flex-direction: column; }
  .practice-nav button { width: 100%; }
  .results-view { margin-top: 0; }
  .source-list { grid-template-columns: 1fr; }
  .summary-grid { grid-template-columns: 1fr; }
  .quality-grid { grid-template-columns: 1fr; }
  .summary-library-heading, .summary-toolbar { align-items: stretch; flex-direction: column; }
  .summary-library-count { align-self: flex-start; }
  .summary-toolbar-actions { width: 100%; }
  .summary-toolbar-actions .summary-action { flex: 1; }
  .summary-detail-header { padding: 20px 16px; }
  .summary-document { padding: 20px 16px; }
  .area-hero h1 { font-size: clamp(1.9rem, 9vw, 2.8rem); }
  .area-overview-grid, .condition-grid { grid-template-columns: 1fr; }
  .area-card-wide { grid-column: auto; }
  .trainer-controls { align-items: stretch; flex-direction: column; }
  .trainer-controls label { flex-basis: auto; width: 100%; }
  .trainer-selects { width: 100%; flex-basis: auto; }
  .legislation-list article { align-items: flex-start; flex-direction: column; }
  .law-status { flex-basis: auto; justify-content: space-between; width: 100%; }
  .law-status small { text-align: left; }
  .material-section-body { padding: 17px 15px 19px; }
  .oral-cue { align-items: flex-start; flex-direction: column; }
  .case-example-index ol { grid-template-columns: 1fr; }
  .case-example-footer { align-items: stretch; flex-direction: column; }
  .case-example-footer > * { width: 100%; }
  .case-workshop-card > header { padding: 20px 17px 15px; }
  .case-workshop-card > .case-context { margin: 15px 17px 0; }
  .workshop-phase { padding: 20px 17px; }
  .workshop-nav { align-items: stretch; flex-direction: column; padding: 15px 17px 19px; }
  .workshop-nav button { width: 100%; }
}

@media (max-width: 479.98px) {
  .brand-copy small { display: none; }
  .brand-copy strong { font-size: .92rem; }
  .hero-stats div { padding: 15px 6px; }
  .hero-stats strong { font-size: 1.2rem; }
  .hero-stats span { font-size: .56rem; }
  .section-heading p { max-width: 250px; }
  .selected-chip { width: 100%; }
  .method-strip { grid-template-columns: 1fr; }
  .method-strip > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .method-strip > div:last-child { border-bottom: 0; }
  .binary-grid, .rating-actions { grid-template-columns: 1fr; }
  .answer { grid-template-columns: 32px minmax(0, 1fr); padding: 10px; }
  .order-item { grid-template-columns: 28px minmax(0, 1fr); }
  .order-controls { grid-column: 2; justify-content: flex-end; }
  .result-stats, .review-summary { grid-template-columns: 1fr; }
  .result-stats div, .review-summary div { border-right: 0; border-bottom: 1px solid var(--line); }
  .result-stats div:last-child, .review-summary div:last-child { border-bottom: 0; }
  .result-actions { flex-direction: column; }
  .result-actions button { width: 100%; }
  .summary-actions { display: grid; grid-template-columns: 1fr; }
  .summary-actions .summary-action { width: 100%; }
  .summary-detail-footer { align-items: stretch; flex-direction: column; }
  .summary-detail-footer > * { width: 100%; }
  .brand-copy strong { max-width: 72px; }
  .text-button.nav-button { width: 36px; }
  .nav-button-icon { font-size: .95rem; }
  .area-card { grid-template-columns: 38px minmax(0, 1fr) 18px; padding: 17px; }
  .area-card > span { width: 38px; height: 38px; }
  .trainer-card { padding: 19px 15px; }
  .trainer-selects { grid-template-columns: 1fr; }
  .case-example-card { grid-template-columns: 42px minmax(0, 1fr); padding: 15px; }
  .case-example-card > b { display: none; }
  .case-example-number { width: 42px; height: 42px; }
}

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

@media print {
  body[data-area="cases"] .topbar,
  body[data-area="cases"] .sidebar,
  body[data-area="cases"] .mobile-sidebar,
  body[data-area="cases"] .area-hero,
  body[data-area="cases"] .area-tabs,
  body[data-area="cases"] .case-example-back,
  body[data-area="cases"] .case-example-footer {
    display: none !important;
  }
  body[data-area="cases"] .app-shell { display: block; }
  body[data-area="cases"] .main { max-width: none; padding: 0; }
  body[data-area="cases"] .case-example-document,
  body[data-area="cases"] .case-example-header,
  body[data-area="cases"] .case-prompt {
    border: 0;
    box-shadow: none;
  }
}