:root {
  color-scheme: dark;
  --bg: #060b14;
  --bg-elevated: #0a1220;
  --surface: #0f1a2b;
  --surface-2: #152238;
  --surface-3: #1c2d47;
  --border: rgba(148, 163, 184, .18);
  --border-strong: rgba(96, 165, 250, .4);
  --text: #f8fafc;
  --muted: #9caec5;
  --muted-2: #70829b;
  --primary: #4f8cff;
  --primary-strong: #2563eb;
  --primary-soft: rgba(59, 130, 246, .13);
  --cyan: #22d3ee;
  --green: #31d0aa;
  --green-soft: rgba(16, 185, 129, .12);
  --red: #fb7185;
  --red-soft: rgba(244, 63, 94, .12);
  --amber: #fbbf24;
  --amber-soft: rgba(245, 158, 11, .12);
  --violet: #a78bfa;
  --shadow: 0 24px 80px rgba(0, 0, 0, .25);
  --radius: 18px;
  --radius-sm: 12px;
  --max-width: 1240px;
  --topbar-height: 72px;
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #f5f8fc;
  --bg-elevated: #ffffff;
  --surface: #ffffff;
  --surface-2: #f1f5fb;
  --surface-3: #e8eff8;
  --border: rgba(15, 23, 42, .12);
  --border-strong: rgba(37, 99, 235, .35);
  --text: #0f172a;
  --muted: #50627a;
  --muted-2: #728198;
  --primary: #2563eb;
  --primary-strong: #1d4ed8;
  --primary-soft: rgba(37, 99, 235, .09);
  --shadow: 0 20px 60px rgba(15, 23, 42, .1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background:
    radial-gradient(circle at 85% -10%, rgba(37, 99, 235, .18), transparent 35%),
    radial-gradient(circle at 10% 35%, rgba(34, 211, 238, .08), transparent 24%),
    var(--bg);
  color: var(--text);
  font-family: "Segoe UI", Tahoma, Arial, sans-serif;
  line-height: 1.65;
}

button, input, select { font: inherit; }
button { color: inherit; }
a { color: var(--primary); }
img { max-width: 100%; }

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 8px;
  left: 8px;
  transform: translateY(-150%);
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--primary-strong);
  color: #fff;
  text-decoration: none;
}
.skip-link:focus { transform: translateY(0); }

button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid rgba(34, 211, 238, .55);
  outline-offset: 2px;
}

.topbar {
  position: sticky;
  z-index: 100;
  top: 0;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-elevated) 88%, transparent);
  backdrop-filter: blur(18px);
}

.topbar__inner {
  display: flex;
  align-items: center;
  gap: 14px;
  width: min(var(--max-width), calc(100% - 32px));
  min-height: var(--topbar-height);
  margin: auto;
}

.brand {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
  padding: 7px;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.brand__mark {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 13px;
  background: linear-gradient(135deg, var(--cyan), var(--primary-strong) 55%, var(--violet));
  color: #fff;
  font-size: 21px;
  font-weight: 900;
  box-shadow: 0 10px 28px rgba(37, 99, 235, .28);
}
.brand strong, .brand small { display: block; text-align: left; line-height: 1.1; }
.brand small { margin-top: 5px; color: var(--muted); font-size: 9px; letter-spacing: 1.7px; }

.primary-nav {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.primary-nav button {
  padding: 8px 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
  transition: .2s ease;
}
.primary-nav button:hover, .primary-nav button.active {
  background: var(--primary-soft);
  color: var(--text);
}
.primary-nav button.active { box-shadow: inset 0 0 0 1px rgba(59, 130, 246, .22); }
.primary-nav .nav-dump, .primary-nav .nav-important {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.primary-nav .nav-dump {
  color: #fbbf24;
}
.primary-nav .nav-important { color: #fb7185; }
.nav-dump span, .nav-important span {
  min-width: 24px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 10px;
  line-height: 1.5;
}
.nav-dump span { background: rgba(251, 191, 36, .12); }
.nav-important span { background: rgba(251, 113, 133, .12); }

.top-actions { display: flex; gap: 6px; }
.icon-button {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  cursor: pointer;
}
.icon-button:hover { border-color: var(--border-strong); background: var(--surface-2); }
.menu-toggle { display: none; }
.global-progress { height: 2px; background: transparent; }
.global-progress span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--cyan), var(--primary), var(--violet)); transition: width .35s ease; }

#app {
  width: min(var(--max-width), calc(100% - 32px));
  min-height: calc(100vh - 180px);
  margin: 0 auto;
  padding: 52px 0 72px;
}

.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: min(var(--max-width), calc(100% - 32px));
  margin: 0 auto;
  padding: 28px 0 42px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 13px;
}
.site-footer p { max-width: 760px; margin: 4px 0 0; }
.site-footer a { flex: none; text-decoration: none; }

.eyebrow {
  margin: 0 0 10px;
  color: var(--cyan);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.7px;
  text-transform: uppercase;
}
.page-title { margin: 0; font-size: clamp(30px, 5vw, 52px); line-height: 1.18; letter-spacing: -.8px; }
.page-subtitle { max-width: 760px; margin: 14px 0 0; color: var(--muted); font-size: clamp(15px, 2vw, 18px); }
.page-head { margin-bottom: 32px; }
.page-head--split { display: flex; align-items: end; justify-content: space-between; gap: 24px; }

.hero {
  display: grid;
  grid-template-columns: 1.18fr .82fr;
  align-items: center;
  gap: 34px;
  margin-bottom: 34px;
}
.hero h1 { margin: 8px 0 16px; font-size: clamp(38px, 6vw, 70px); line-height: 1.08; letter-spacing: -2px; }
.gradient-text { background: linear-gradient(100deg, var(--cyan), var(--primary) 50%, var(--violet)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p { max-width: 670px; margin: 0; color: var(--muted); font-size: 18px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero__badge { display: inline-flex; gap: 8px; align-items: center; padding: 8px 12px; border: 1px solid rgba(49, 208, 170, .25); border-radius: 999px; background: var(--green-soft); color: var(--green); font-size: 12px; font-weight: 700; }

.progress-orbit {
  position: relative;
  display: grid;
  width: min(100%, 330px);
  aspect-ratio: 1;
  margin: auto;
  place-items: center;
}
.progress-orbit::before, .progress-orbit::after { content: ""; position: absolute; border-radius: 50%; }
.progress-orbit::before { inset: 3%; border: 1px dashed rgba(96, 165, 250, .3); animation: spin 28s linear infinite; }
.progress-orbit::after { inset: 16%; background: radial-gradient(circle, rgba(37, 99, 235, .18), transparent 70%); }
.progress-ring { --progress: 0deg; position: relative; z-index: 2; display: grid; width: 70%; aspect-ratio: 1; place-items: center; border-radius: 50%; background: conic-gradient(var(--primary) var(--progress), var(--surface-3) 0); box-shadow: var(--shadow); }
.progress-ring::before { content: ""; position: absolute; inset: 12px; border-radius: inherit; background: var(--bg-elevated); }
.progress-ring__content { position: relative; z-index: 1; text-align: center; }
.progress-ring strong { display: block; font-size: 46px; line-height: 1; }
.progress-ring span { color: var(--muted); font-size: 12px; }
@keyframes spin { to { transform: rotate(360deg); } }

.btn {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: 12px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform .16s ease, background .16s ease, border .16s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: linear-gradient(135deg, var(--primary), var(--primary-strong)); color: #fff; box-shadow: 0 10px 25px rgba(37, 99, 235, .24); }
.btn--secondary { border-color: var(--border); background: var(--surface); color: var(--text); }
.btn--danger { border-color: rgba(251, 113, 133, .3); background: var(--red-soft); color: var(--red); }
.btn--success { background: var(--green); color: #052e25; }
.btn--small { min-height: 36px; padding: 7px 12px; font-size: 13px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }

.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 24px 0; }
.stat-card { position: relative; overflow: hidden; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius); background: linear-gradient(145deg, var(--surface), color-mix(in srgb, var(--surface-2) 80%, transparent)); }
.stat-card::after { content: ""; position: absolute; width: 90px; height: 90px; top: -45px; left: -35px; border-radius: 50%; background: var(--accent, var(--primary)); opacity: .08; }
.stat-card__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 13px; }
.stat-card__icon { font-size: 20px; }
.stat-card strong { display: block; margin-top: 12px; font-size: 28px; line-height: 1; }
.stat-card small { display: block; margin-top: 8px; color: var(--muted-2); }

.section-title { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin: 38px 0 16px; }
.section-title h2 { margin: 0; font-size: 25px; }
.section-title p { margin: 0; color: var(--muted); font-size: 14px; }

.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.feature-card, .lesson-card, .source-card, .setting-card {
  position: relative;
  overflow: hidden;
  padding: 21px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.feature-card { min-height: 170px; cursor: pointer; text-align: left; }
.feature-card:hover, .lesson-card:hover, .source-card:hover { transform: translateY(-3px); border-color: var(--card-accent, var(--border-strong)); box-shadow: var(--shadow); }
.feature-card__icon { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 13px; background: color-mix(in srgb, var(--card-accent, var(--primary)) 15%, transparent); color: var(--card-accent, var(--primary)); font-size: 20px; }
.feature-card h3 { margin: 18px 0 4px; font-size: 17px; }
.feature-card p { margin: 0; color: var(--muted); font-size: 13px; }
.feature-card__meta { position: absolute; left: 18px; top: 18px; color: var(--muted-2); font-size: 11px; }

.domain-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.domain-card { padding: 20px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.domain-card__head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.domain-card h3 { margin: 0; font-size: 16px; }
.domain-card span { color: var(--muted); font-size: 12px; }
.meter { overflow: hidden; height: 8px; border-radius: 999px; background: var(--surface-3); }
.meter > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cyan), var(--primary)); }

.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 18px 0 24px; }
.search-field { position: relative; flex: 1 1 280px; }
.search-field input, .select-field {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
}
.search-field input { padding: 9px 14px 9px 42px; }
.search-field span { position: absolute; left: 15px; top: 10px; color: var(--muted); }
.select-field { width: auto; min-width: 170px; padding: 8px 12px; }
.filter-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { padding: 7px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--muted); cursor: pointer; }
.pill.active { border-color: var(--border-strong); background: var(--primary-soft); color: var(--text); }

.lesson-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.lesson-card { cursor: pointer; }
.lesson-card__head { display: flex; align-items: start; justify-content: space-between; gap: 16px; }
.lesson-card__number { display: grid; width: 38px; height: 38px; place-items: center; flex: none; border-radius: 11px; background: var(--primary-soft); color: var(--primary); font-weight: 900; }
.lesson-card h3 { margin: 0; font-size: 18px; }
.lesson-card p { margin: 8px 0 0; color: var(--muted); font-size: 14px; }
.lesson-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 17px; color: var(--muted-2); font-size: 12px; }
.lesson-card.completed { border-color: rgba(49, 208, 170, .35); }

.lesson-detail, .quiz-shell, .panel {
  padding: clamp(20px, 4vw, 34px);
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.lesson-detail h2 { margin-top: 0; }
.lesson-detail h3 { margin: 26px 0 8px; }
.lesson-detail ul { margin: 0; padding-left: 22px; }
.lesson-callout { margin: 20px 0; padding: 16px 18px; border-left: 4px solid var(--amber); border-radius: 10px; background: var(--amber-soft); }
.lesson-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }

.setup-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 24px 0; }
.choice-card { padding: 19px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); cursor: pointer; }
.choice-card input { accent-color: var(--primary); }
.choice-card:has(input:checked) { border-color: var(--border-strong); background: var(--primary-soft); }
.choice-card strong, .choice-card small { display: block; }
.choice-card small { margin-top: 4px; color: var(--muted); }
.setup-note { padding: 16px 18px; border: 1px solid rgba(49, 208, 170, .22); border-radius: 13px; background: var(--green-soft); color: var(--muted); }

.quiz-top { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.quiz-top__meta { display: flex; align-items: center; gap: 12px; }
.question-number { color: var(--primary); font-weight: 800; }
.timer { padding: 7px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); font-variant-numeric: tabular-nums; }
.timer.warning { color: var(--amber); border-color: rgba(251,191,36,.3); }
.quiz-progress { height: 6px; margin-bottom: 25px; border-radius: 999px; background: var(--surface-3); }
.quiz-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cyan), var(--primary)); }
.question-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.tag { display: inline-flex; align-items: center; padding: 5px 9px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); font-size: 11px; }
.question-title { margin: 0 0 8px; color: var(--muted); font-size: 14px; }
.question-text { margin: 0 0 24px; font-size: clamp(19px, 3vw, 25px); line-height: 1.55; }
.options-list { display: grid; gap: 10px; }
.option {
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface-2);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border .15s ease, background .15s ease, transform .15s ease;
}
.option:hover { border-color: var(--border-strong); transform: translateX(2px); }
.option__letter { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 9px; background: var(--surface-3); color: var(--muted); font-weight: 800; }
.option.selected { border-color: var(--primary); background: var(--primary-soft); }
.option.correct { border-color: rgba(49, 208, 170, .6); background: var(--green-soft); }
.option.wrong { border-color: rgba(251, 113, 133, .6); background: var(--red-soft); }
.option[disabled] { cursor: default; transform: none; }
.explanation { margin-top: 20px; padding: 18px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-elevated); }
.explanation.correct { border-color: rgba(49, 208, 170, .35); }
.explanation.wrong { border-color: rgba(251, 113, 133, .35); }
.explanation h3 { margin: 0 0 8px; font-size: 17px; }
.explanation p { margin: 0; color: var(--muted); }
.source-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; }
.source-links a { padding: 5px 9px; border-radius: 8px; background: var(--primary-soft); font-size: 12px; text-decoration: none; }
.quiz-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; }
.quiz-actions__group { display: flex; flex-wrap: wrap; gap: 9px; }
.bookmark-button.active { color: var(--amber); border-color: rgba(251,191,36,.35); background: var(--amber-soft); }

.palette { display: grid; grid-template-columns: repeat(10, 1fr); gap: 7px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--border); }
.palette button { aspect-ratio: 1; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); color: var(--muted); cursor: pointer; }
.palette button.current { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft); color: var(--text); }
.palette button.answered { background: var(--primary-soft); color: var(--primary); }
.palette button.flagged { border-color: var(--amber); color: var(--amber); }

.result-hero { text-align: center; }
.score-circle { display: grid; width: 180px; aspect-ratio: 1; margin: 12px auto 20px; place-items: center; border-radius: 50%; background: conic-gradient(var(--score-color, var(--green)) var(--score-angle), var(--surface-3) 0); }
.score-circle::before { content: ""; position: absolute; width: 150px; aspect-ratio: 1; border-radius: 50%; background: var(--surface); }
.score-circle > div { position: relative; z-index: 1; }
.score-circle strong { display: block; font-size: 43px; line-height: 1; }
.score-circle span { color: var(--muted); }
.result-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 26px 0; }
.result-grid > div { padding: 16px; border-radius: 13px; background: var(--surface-2); }
.result-grid strong { display: block; font-size: 24px; }
.result-grid span { color: var(--muted); font-size: 12px; }
.review-list { display: grid; gap: 10px; margin-top: 22px; }
.review-item { padding: 15px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.review-item summary { cursor: pointer; font-weight: 700; }
.review-item p { color: var(--muted); }

.analytics-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 14px; }
.chart-card { padding: 22px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.chart-card h3 { margin-top: 0; }
.bar-list { display: grid; gap: 15px; }
.bar-row__top { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 7px; font-size: 13px; }
.activity-list { display: grid; gap: 11px; }
.activity-item { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-bottom: 11px; border-bottom: 1px solid var(--border); }
.activity-item:last-child { border: 0; }
.activity-item small { color: var(--muted); }

.flash-shell { max-width: 900px; margin: auto; text-align: center; }
.flashcard { position: relative; min-height: 460px; perspective: 1400px; cursor: pointer; }
.flashcard__inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .55s ease; }
.flashcard.flipped .flashcard__inner { transform: rotateY(180deg); }
.flashcard__face { position: absolute; inset: 0; display: grid; overflow: auto; padding: clamp(28px, 6vw, 58px); place-items: center; border: 1px solid var(--border); border-radius: 28px; background: radial-gradient(circle at 50% 0%, rgba(79, 140, 255, .12), transparent 42%), linear-gradient(145deg, var(--surface), var(--surface-2)); backface-visibility: hidden; box-shadow: var(--shadow); }
.flashcard__face--back { transform: rotateY(180deg); }
.flashcard h2 { max-width: 740px; margin: 18px auto; font-size: clamp(22px, 3.1vw, 32px); line-height: 1.48; text-wrap: balance; }
.flashcard p { max-width: 720px; margin-inline: auto; color: var(--muted); }
.flash-controls { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin-top: 22px; }
.flash-controls .btn:first-child { justify-self: end; }
.flash-controls .btn:last-child { justify-self: start; }

.cheat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.cheat-card { padding: 20px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.cheat-card h3 { margin: 0 0 12px; }
.cheat-card dl { margin: 0; }
.cheat-card dt { margin-top: 12px; color: var(--primary); font-weight: 800; }
.cheat-card dd { margin: 3px 0 0; color: var(--muted); }

.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.data-table { width: 100%; border-collapse: collapse; background: var(--surface); }
.data-table th, .data-table td { padding: 13px 14px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.data-table th { position: sticky; top: 0; background: var(--surface-2); color: var(--muted); font-size: 12px; }
.data-table tr:last-child td { border-bottom: 0; }

.source-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.source-card { display: flex; align-items: start; justify-content: space-between; gap: 16px; color: var(--text); text-decoration: none; }
.source-card small { display: block; color: var(--muted); }

.dump-hero {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 28px;
  padding: clamp(24px, 5vw, 42px);
  border: 1px solid rgba(251, 191, 36, .22);
  border-radius: 24px;
  background: radial-gradient(circle at 100% 0%, rgba(251, 191, 36, .11), transparent 38%), var(--surface);
  box-shadow: var(--shadow);
}
.dump-hero h1 { margin: 4px 0 10px; font-size: clamp(34px, 5vw, 58px); line-height: 1.05; }
.dump-hero p { max-width: 760px; margin: 0; color: var(--muted); }
.dump-score { display: grid; min-width: 140px; aspect-ratio: 1; place-items: center; border: 1px solid rgba(251,191,36,.28); border-radius: 50%; background: rgba(251,191,36,.08); text-align: center; }
.dump-score strong { display: block; color: var(--amber); font-size: 38px; line-height: 1; }
.dump-score span { color: var(--muted); font-size: 11px; }
.dump-list { display: grid; gap: 14px; }
.dump-card { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.dump-card__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 18px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.dump-card__head-group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dump-card__number { color: var(--amber); font-weight: 900; }
.status-badge { display: inline-flex; padding: 4px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; }
.status-badge.correct { background: var(--green-soft); color: var(--green); }
.status-badge.wrong { background: var(--red-soft); color: var(--red); }
.dump-card__body { padding: 20px; }
.dump-question { margin: 0; white-space: pre-wrap; font-size: 16px; line-height: 1.75; }
.dump-options { display: grid; gap: 8px; margin-top: 16px; }
.dump-option { display: grid; grid-template-columns: 30px 1fr; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.dump-option strong { color: var(--primary); }
.dump-validation { margin-top: 18px; padding: 18px; border: 1px solid rgba(79, 140, 255, .28); border-radius: 14px; background: var(--bg-elevated); }
.dump-validation[hidden] { display: none; }
.dump-validation h4 { margin: 18px 0 4px; color: var(--muted); font-size: 12px; letter-spacing: .8px; text-transform: uppercase; }
.dump-validation p { margin: 0; white-space: pre-wrap; }
.dump-note { margin-top: 14px; padding: 13px 15px; border-left: 4px solid var(--amber); border-radius: 9px; background: var(--amber-soft); }
.dump-card__actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 18px; }
.dump-card__actions > div { display: flex; flex-wrap: wrap; gap: 8px; }
.dump-progress.mastered { color: var(--green); border-color: rgba(49,208,170,.35); }
.dump-progress.review { color: var(--amber); border-color: rgba(251,191,36,.35); }
.dump-run-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.dump-run-card { display: flex; min-height: 260px; padding: 22px; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); background: linear-gradient(145deg, var(--surface), var(--surface-2)); box-shadow: var(--shadow); }
.dump-run-card__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dump-run-index { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 14px; background: linear-gradient(145deg, var(--primary), var(--cyan)); color: #fff; font-size: 20px; font-weight: 900; }
.dump-run-card h3 { margin: 20px 0 8px; font-size: 22px; }
.dump-run-card p { min-height: 42px; margin: 0 0 18px; color: var(--muted); font-size: 13px; line-height: 1.55; }
.dump-run-card small { margin: 9px 0 18px; color: var(--muted); }
.dump-run-card .btn { width: 100%; margin-top: auto; }
.pagination { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 24px; }
.pagination span { color: var(--muted); }

.settings-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.setting-card h3 { margin-top: 0; }
.setting-card p { color: var(--muted); }
.danger-zone { border-color: rgba(251, 113, 133, .28); }

.empty-state { padding: 54px 24px; border: 1px dashed var(--border); border-radius: var(--radius); text-align: center; }
.empty-state__icon { font-size: 48px; }
.empty-state h2 { margin: 8px 0; }
.empty-state p { max-width: 600px; margin: 0 auto 20px; color: var(--muted); }

.status-badge.invalid { background: var(--amber-soft); color: var(--amber); }
.dump-interaction {
  margin-top: 22px;
  padding: clamp(16px, 3vw, 24px);
  border: 1px solid rgba(79, 140, 255, .28);
  border-radius: 16px;
  background: linear-gradient(145deg, var(--bg-elevated), var(--surface-2));
}
.dump-interaction__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.dump-interaction__actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.dump-interaction-hint { margin: 8px 0 15px; color: var(--muted); font-size: 12px; }
.dump-choice-list { display: grid; gap: 10px; }
.dump-choice {
  display: grid;
  grid-template-columns: 38px 1fr;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.dump-choice > span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 9px; background: var(--surface-3); color: var(--primary); }
.dump-choice > strong { font-weight: 650; line-height: 1.5; }
.dump-choice:hover:not(:disabled), .dump-choice.selected { border-color: var(--primary); background: var(--primary-soft); }
.dump-choice.correct { border-color: rgba(49, 208, 170, .55); background: var(--green-soft); }
.dump-choice.wrong { border-color: rgba(251, 113, 133, .55); background: var(--red-soft); }
.dump-choice:disabled { cursor: default; }

.dump-chip-pool { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px; border: 1px dashed var(--border-strong); border-radius: 13px; background: var(--surface); }
.dump-chip { padding: 8px 11px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2); color: var(--text); cursor: grab; }
.dump-chip:hover, .dump-chip.armed { border-color: var(--amber); color: var(--amber); background: var(--amber-soft); }
.dump-slot-list { display: grid; gap: 10px; }
.dump-slot { padding: 12px; border: 1px dashed var(--border-strong); border-radius: 12px; background: var(--surface); }
.dump-slot.correct { border-style: solid; border-color: rgba(49, 208, 170, .55); background: var(--green-soft); }
.dump-slot.wrong { border-style: solid; border-color: rgba(251, 113, 133, .55); background: var(--red-soft); }
.dump-slot label { display: grid; grid-template-columns: minmax(130px, .45fr) minmax(220px, 1fr); align-items: center; gap: 14px; }
.dump-slot label > span { color: var(--muted); font-size: 13px; font-weight: 800; }
.dump-slot select { width: 100%; padding: 11px 38px 11px 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2); color: var(--text); }
.dump-slot small { display: block; margin-top: 8px; color: var(--muted); }

.dump-yn-list { display: grid; gap: 10px; }
.dump-yn-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px; padding: 13px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.dump-yn-row p { margin: 0; line-height: 1.55; }
.dump-yn-row > div { display: flex; gap: 7px; }
.dump-yn { min-width: 64px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2); color: var(--text); cursor: pointer; }
.dump-yn.selected { border-color: var(--primary); background: var(--primary-soft); }
.dump-yn.correct { border-color: rgba(49, 208, 170, .55); background: var(--green-soft); color: var(--green); }
.dump-yn.wrong { border-color: rgba(251, 113, 133, .55); background: var(--red-soft); color: var(--red); }

.dump-exhibits { margin: 0 0 16px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.dump-exhibits__title { margin-bottom: 12px; color: var(--primary); font-weight: 800; }
.dump-exhibit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.dump-exhibit-button { display: block; width: 100%; min-width: 0; min-height: 120px; padding: 8px; border: 1px solid var(--border); border-radius: 10px; background: #fff; cursor: zoom-in; overflow: hidden; }
.dump-exhibit-button img { display: block; width: 100%; height: auto; max-width: 100%; max-height: none; object-fit: contain; }
.dump-exhibit-label { display: block; margin: 0 0 6px; color: #475569; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-align: left; text-transform: uppercase; }
.dump-source-review { margin: 14px 0; padding: 14px 16px; border: 1px dashed rgba(251, 191, 36, .5); border-radius: 12px; background: rgba(251, 191, 36, .08); color: var(--muted); }
.dump-source-review p { margin: 0; line-height: 1.55; }
.dump-feedback { margin-top: 18px; padding: 16px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface); }
.dump-feedback.correct { border-color: rgba(49, 208, 170, .42); }
.dump-feedback.wrong { border-color: rgba(251, 113, 133, .42); }
.dump-feedback.unscored { border-color: rgba(251, 191, 36, .42); }
.dump-feedback h3 { margin: 0 0 9px; font-size: 17px; }
.dump-feedback p { margin: 7px 0; color: var(--muted); white-space: pre-wrap; }
.dump-feedback details { margin-top: 12px; color: var(--muted); }
.dump-palette { display: grid; grid-template-columns: repeat(10, minmax(34px, 1fr)); gap: 7px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--border); }
.dump-palette button { min-height: 38px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); color: var(--muted); cursor: pointer; }
.dump-palette button.current { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft); color: var(--text); }
.dump-palette button.answered { background: var(--primary-soft); color: var(--primary); }
.dump-palette button.correct { border-color: rgba(49,208,170,.6); color: var(--green); }
.dump-palette button.wrong { border-color: rgba(251,113,133,.6); color: var(--red); }

.important-shell { overflow: hidden; min-height: 840px; border: 1px solid var(--border); border-radius: 20px; background: #0a0d12; box-shadow: var(--shadow); }
.important-frame { display: block; width: 100%; min-height: 840px; border: 0; background: #0a0d12; }

/* Visual learning path */
.learn-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 34px;
  overflow: hidden;
  padding: clamp(28px, 5vw, 52px);
  border: 1px solid rgba(34, 211, 238, .22);
  border-radius: 26px;
  background:
    radial-gradient(circle at 88% 0%, rgba(34, 211, 238, .15), transparent 31%),
    radial-gradient(circle at 15% 120%, rgba(79, 140, 255, .16), transparent 36%),
    var(--surface);
  box-shadow: var(--shadow);
}
.learn-hero::after { content: ""; position: absolute; right: 11%; bottom: -70px; width: 230px; height: 230px; border: 1px dashed rgba(34,211,238,.2); border-radius: 50%; }
.learn-hero > * { position: relative; z-index: 1; }
.learn-hero h1 { max-width: 780px; margin: 6px 0 14px; font-size: clamp(36px, 5.4vw, 66px); line-height: 1.04; letter-spacing: -.045em; }
.learn-hero p:not(.eyebrow) { max-width: 760px; margin: 0; color: var(--muted); font-size: 16px; }
.learn-hero__score { display: grid; width: 160px; aspect-ratio: 1; place-items: center; align-content: center; border: 1px solid rgba(34,211,238,.28); border-radius: 50%; background: color-mix(in srgb, var(--surface-2) 82%, transparent); text-align: center; box-shadow: inset 0 0 40px rgba(34,211,238,.06); }
.learn-hero__score strong { color: var(--cyan); font-size: 54px; line-height: .9; }
.learn-hero__score span { color: var(--muted); font-size: 13px; }
.learn-hero__score small { margin-top: 6px; color: var(--muted-2); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }

.learn-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; overflow: hidden; margin: 16px 0 0; border: 1px solid var(--border); border-radius: 16px; background: var(--border); }
.learn-summary > div { display: flex; min-height: 76px; align-items: center; gap: 12px; padding: 16px 20px; background: var(--surface); }
.learn-summary strong { font-size: 25px; }
.learn-summary span { color: var(--muted); font-size: 12px; line-height: 1.35; }

.learn-domain-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.learn-domain { position: relative; overflow: hidden; padding: 21px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); color: var(--text); text-align: left; cursor: pointer; transition: .2s ease; }
.learn-domain::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--domain-color); }
.learn-domain:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--domain-color) 45%, var(--border)); box-shadow: var(--shadow); }
.learn-domain > span { color: var(--domain-color); font-size: 10px; font-weight: 900; letter-spacing: .14em; }
.learn-domain h3 { min-height: 48px; margin: 8px 0 4px; font-size: 19px; line-height: 1.25; }
.learn-domain p, .learn-domain small { color: var(--muted); font-size: 12px; }
.learn-domain .meter { margin: 14px 0 11px; }
.learn-domain .meter span { background: var(--domain-color); }
.learn-domain--manage, .lesson-hero--manage { --domain-color: var(--cyan); }
.learn-domain--ingest, .lesson-hero--ingest { --domain-color: var(--violet); }
.learn-domain--monitor, .lesson-hero--monitor { --domain-color: var(--green); }

.fabric-journey { margin: 18px 0 30px; padding: clamp(20px, 4vw, 30px); border: 1px solid var(--border); border-radius: 20px; background: linear-gradient(145deg, var(--surface), var(--surface-2)); }
.fabric-journey__title { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 22px; }
.fabric-journey__title span { color: var(--cyan); font-size: 10px; font-weight: 900; letter-spacing: .15em; }
.fabric-journey__title h2 { margin: 0; font-size: clamp(17px, 2.3vw, 24px); }
.fabric-journey__track { display: grid; grid-template-columns: repeat(9, auto); align-items: center; justify-content: space-between; gap: 8px; }
.fabric-journey__track > div { display: grid; min-width: 112px; justify-items: center; gap: 2px; text-align: center; }
.fabric-journey__track b { display: grid; width: 34px; height: 34px; margin-bottom: 5px; place-items: center; border-radius: 11px; background: var(--primary-soft); color: var(--primary); }
.fabric-journey__track strong { font-size: 13px; }
.fabric-journey__track small { color: var(--muted); font-size: 10px; }
.fabric-journey__track i { color: var(--muted-2); font-style: normal; }
.learn-progress { height: 10px; margin: -6px 0 18px; }

.lesson-grid--visual { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lesson-card--visual { display: flex; min-height: 310px; padding: 24px; flex-direction: column; text-align: left; }
.lesson-card__accent { position: absolute; inset: 0 0 auto; height: 4px; background: var(--primary); }
.lesson-card__accent--manage { background: var(--cyan); }
.lesson-card__accent--ingest { background: var(--violet); }
.lesson-card__accent--monitor { background: var(--green); }
.lesson-card__icon { display: grid; width: 46px; height: 46px; place-items: center; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-2); font-size: 22px; }
.lesson-card--visual h3 { margin-top: 20px; font-size: 19px; line-height: 1.3; }
.lesson-memory { margin-top: 17px; padding: 12px 13px; border-left: 3px solid var(--amber); border-radius: 9px; background: var(--amber-soft); color: var(--text); font-size: 12px; line-height: 1.45; }
.lesson-memory span { display: block; margin-bottom: 3px; color: var(--amber); font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.lesson-card--visual .lesson-card__foot { margin-top: auto; padding-top: 17px; }

.lesson-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 2px 0 14px; color: var(--muted); font-size: 12px; }
.lesson-breadcrumb button { padding: 0; border: 0; background: transparent; color: var(--primary); cursor: pointer; }
.lesson-breadcrumb strong { color: var(--text); }
.lesson-hero { position: relative; display: flex; align-items: end; justify-content: space-between; gap: 28px; overflow: hidden; padding: clamp(26px, 5vw, 48px); border: 1px solid color-mix(in srgb, var(--domain-color) 28%, var(--border)); border-radius: 24px 24px 0 0; background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--domain-color) 15%, transparent), transparent 40%), var(--surface-2); }
.lesson-hero::after { content: ""; position: absolute; right: -80px; top: -110px; width: 270px; height: 270px; border: 1px dashed color-mix(in srgb, var(--domain-color) 25%, transparent); border-radius: 50%; }
.lesson-hero > * { position: relative; z-index: 1; }
.lesson-hero__meta { display: flex; flex-wrap: wrap; gap: 8px; }
.lesson-hero__meta span { padding: 5px 9px; border: 1px solid var(--border); border-radius: 999px; background: color-mix(in srgb, var(--surface) 70%, transparent); color: var(--muted); font-size: 10px; }
.lesson-hero h1 { display: flex; align-items: center; gap: 13px; margin: 18px 0 8px; font-size: clamp(30px, 5vw, 52px); line-height: 1.08; }
.lesson-hero h1 > span { color: var(--domain-color); }
.lesson-hero p { max-width: 760px; margin: 0; color: var(--muted); }
.lesson-hero__status { flex: none; padding: 7px 10px; border: 1px solid color-mix(in srgb, var(--domain-color) 30%, var(--border)); border-radius: 999px; color: var(--domain-color); font-size: 10px; font-weight: 900; letter-spacing: .1em; }
.lesson-detail--visual { border-top: 0; border-radius: 0 0 24px 24px; }

.lesson-intro { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(260px, .55fr); gap: 22px; align-items: stretch; }
.lesson-intro .question-text { margin-bottom: 0; }
.lesson-intro aside { display: grid; align-content: center; padding: 20px; border: 1px solid rgba(251,191,36,.25); border-radius: 16px; background: var(--amber-soft); }
.lesson-intro aside span { color: var(--amber); font-size: 10px; font-weight: 900; letter-spacing: .12em; }
.lesson-intro aside strong { margin-top: 7px; font-size: 17px; line-height: 1.45; }

.memory-visual { margin: 30px 0; overflow: hidden; border: 1px solid var(--border); border-radius: 20px; background: var(--bg-elevated); }
.memory-visual__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 17px 20px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.memory-visual__head span { color: var(--cyan); font-size: 10px; font-weight: 900; letter-spacing: .14em; }
.memory-visual__head h2 { margin: 0; font-size: 18px; }
.memory-nodes { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; padding: clamp(18px, 4vw, 30px); }
.memory-node { position: relative; display: grid; min-height: 150px; align-content: start; justify-items: center; padding: 18px 14px; border: 1px solid var(--border); border-radius: 16px; background: linear-gradient(145deg, var(--surface), var(--surface-2)); text-align: center; }
.memory-node__icon { display: grid; width: 44px; height: 44px; margin-bottom: 12px; place-items: center; border-radius: 14px; background: var(--primary-soft); color: var(--primary); font-size: 20px; }
.memory-node strong { font-size: 14px; }
.memory-node small { margin-top: 6px; color: var(--muted); font-size: 11px; line-height: 1.4; }
.memory-visual--flow .memory-node:not(:last-child)::after,
.memory-visual--cycle .memory-node:not(:last-child)::after { content: "→"; position: absolute; z-index: 2; right: -20px; top: 50%; width: 24px; color: var(--cyan); font-weight: 900; transform: translateY(-50%); }
.memory-visual--stack .memory-nodes { grid-template-columns: 1fr; }
.memory-visual--stack .memory-node { min-height: auto; grid-template-columns: 52px minmax(0, 1fr); justify-items: start; align-items: center; text-align: left; }
.memory-visual--stack .memory-node__icon { margin: 0; }
.memory-visual--stack .memory-node small { grid-column: 2; }
.memory-visual--split .memory-nodes,
.memory-visual--compare .memory-nodes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.memory-visual--star .memory-nodes { background: radial-gradient(circle, rgba(79,140,255,.13), transparent 45%); }
.memory-visual--windows .memory-node { border-top: 3px solid var(--violet); }
.memory-visual--branch .memory-node:first-child { border-color: rgba(34,211,238,.4); }

.lesson-code { margin: 30px 0; overflow: hidden; border: 1px solid var(--border); border-radius: 18px; background: #050912; }
.lesson-code > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid rgba(148,163,184,.15); background: #0b1321; }
.lesson-code > div span { color: #22d3ee; font-size: 10px; font-weight: 900; letter-spacing: .13em; }
.lesson-code > div strong { color: #9caec5; font-size: 11px; }
.lesson-code pre { overflow-x: auto; margin: 0; padding: 20px; color: #dbeafe; font: 13px/1.75 Consolas, "Courier New", monospace; }
.lesson-code code { font: inherit; }

.lesson-points { display: grid; grid-template-columns: minmax(220px, .55fr) minmax(0, 1.45fr); gap: 30px; margin: 34px 0; }
.lesson-points h2 { font-size: 26px; }
.lesson-points ol { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.lesson-points li { display: grid; grid-template-columns: 42px 1fr; align-items: start; gap: 12px; padding: 13px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface-2); }
.lesson-points li > span { color: var(--primary); font-size: 11px; font-weight: 900; }
.lesson-points li p { margin: 0; color: var(--muted); font-size: 13px; }
.lesson-trap { display: grid; grid-template-columns: 46px 1fr; gap: 14px; margin: 26px 0; padding: 18px; border: 1px solid rgba(251,113,133,.28); border-radius: 16px; background: var(--red-soft); }
.lesson-trap > span { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 13px; background: rgba(251,113,133,.16); color: var(--red); font-size: 21px; font-weight: 900; }
.lesson-trap strong { color: var(--red); font-size: 10px; letter-spacing: .13em; }
.lesson-trap p { margin: 5px 0 0; color: var(--muted); }
.lesson-video { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 24px 0; padding: 17px; border: 1px solid rgba(34,211,238,.24); border-radius: 16px; background: linear-gradient(110deg, rgba(34,211,238,.08), transparent); }
.lesson-video > div { display: flex; align-items: center; gap: 14px; }
.lesson-video > div > span { display: grid; width: 44px; height: 44px; place-items: center; flex: none; border-radius: 50%; background: var(--cyan); color: #042f3a; }
.lesson-video p { margin: 2px 0 0; color: var(--muted); font-size: 12px; }

.lesson-check { margin: 34px 0; padding: clamp(19px, 4vw, 28px); border: 1px solid rgba(167,139,250,.3); border-radius: 20px; background: radial-gradient(circle at 100% 0%, rgba(167,139,250,.12), transparent 35%), var(--surface-2); }
.lesson-check__head { display: grid; gap: 8px; }
.lesson-check__badge { width: max-content; padding: 4px 8px; border-radius: 999px; background: rgba(167,139,250,.12); color: var(--violet); font-size: 9px; font-weight: 900; letter-spacing: .13em; }
.lesson-check__head h2 { max-width: 850px; margin: 0 0 17px; font-size: clamp(20px, 3vw, 28px); line-height: 1.35; }
.lesson-check__options { display: grid; gap: 9px; }
.lesson-check__option { display: grid; grid-template-columns: 36px 1fr; align-items: center; gap: 12px; width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); text-align: left; cursor: pointer; }
.lesson-check__option > span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 9px; background: var(--surface-3); color: var(--muted); }
.lesson-check__option strong { font-size: 13px; }
.lesson-check__option:hover:not(:disabled), .lesson-check__option.selected { border-color: var(--violet); background: rgba(167,139,250,.08); }
.lesson-check__option.correct { border-color: rgba(49,208,170,.55); background: var(--green-soft); }
.lesson-check__option.wrong { border-color: rgba(251,113,133,.55); background: var(--red-soft); }
.lesson-check__option:disabled { cursor: default; }
.lesson-check__actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 16px; }
.lesson-check__feedback { flex: 1; padding: 13px 15px; border: 1px solid var(--border); border-radius: 12px; }
.lesson-check__feedback.correct { border-color: rgba(49,208,170,.35); background: var(--green-soft); }
.lesson-check__feedback.wrong { border-color: rgba(251,113,133,.35); background: var(--red-soft); }
.lesson-check__feedback strong { color: var(--green); }
.lesson-check__feedback.wrong strong { color: var(--red); }
.lesson-check__feedback p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.lesson-sources { display: flex; align-items: start; justify-content: space-between; gap: 24px; margin: 30px 0 12px; padding-top: 28px; border-top: 1px solid var(--border); }
.lesson-sources h2 { font-size: 22px; }
.lesson-sources .lesson-links { justify-content: flex-end; margin-top: 0; }
.lesson-finish { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--border); }

.arabic-support { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 22px; margin: 20px 0 30px; padding: clamp(20px, 4vw, 30px); border: 1px solid rgba(49,208,170,.28); border-radius: 20px; background: radial-gradient(circle at 0 0, rgba(49,208,170,.12), transparent 32%), var(--surface); box-shadow: var(--shadow); }
.arabic-support__mark { display: grid; width: 66px; height: 66px; place-items: center; border: 1px solid rgba(49,208,170,.3); border-radius: 20px; background: var(--green-soft); color: var(--green); font-size: 34px; font-weight: 900; }
.arabic-kicker { margin: 0; color: var(--green); font-size: 11px; font-weight: 900; letter-spacing: .08em; }
.arabic-support h2 { margin: 3px 0 7px; font-size: clamp(23px, 3vw, 31px); line-height: 1.3; }
.arabic-support__content > p:not(.arabic-kicker) { margin: 0; color: var(--muted); }
.arabic-support__groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 20px; }
.arabic-support__groups > div { padding: 15px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-2); }
.arabic-support__groups > div > strong { display: block; margin-bottom: 10px; font-size: 13px; }
.arabic-resource-links { display: flex; flex-wrap: wrap; gap: 7px; }
.arabic-resource-links a { padding: 6px 9px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--text); font-size: 11px; text-decoration: none; }
.arabic-resource-links a:hover { border-color: rgba(49,208,170,.45); color: var(--green); }

.lesson-hero__actions { display: grid; flex: none; justify-items: end; gap: 10px; }
.btn--arabic { min-width: 132px; border-color: rgba(49,208,170,.35); background: var(--green-soft); color: var(--green); }
.btn--arabic span { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 8px; background: rgba(49,208,170,.16); font-size: 15px; }
.arabic-explanation { scroll-margin-top: 95px; margin: 28px 0; padding: clamp(20px, 4vw, 30px); border: 1px solid rgba(49,208,170,.32); border-radius: 20px; background: radial-gradient(circle at 0 0, rgba(49,208,170,.12), transparent 34%), var(--bg-elevated); font-family: Tahoma, "Segoe UI", Arial, sans-serif; }
.arabic-explanation__head { display: flex; align-items: start; justify-content: space-between; gap: 18px; padding-bottom: 17px; border-bottom: 1px solid var(--border); }
.arabic-explanation__head span { color: var(--green); font-size: 11px; font-weight: 900; letter-spacing: .06em; }
.arabic-explanation__head h2 { margin: 4px 0 0; font-size: clamp(25px, 4vw, 35px); line-height: 1.3; }
.arabic-explanation__summary { margin: 22px 0; color: var(--text); font-size: clamp(17px, 2.3vw, 21px); line-height: 1.9; }
.arabic-memory { display: grid; gap: 5px; padding: 16px 18px; border-right: 4px solid var(--amber); border-radius: 12px; background: var(--amber-soft); }
.arabic-memory span { color: var(--amber); font-size: 10px; font-weight: 900; letter-spacing: .06em; }
.arabic-memory strong { font-size: 16px; line-height: 1.7; }
.arabic-explanation__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(240px, .7fr); gap: 18px; margin-top: 20px; }
.arabic-explanation__grid > div, .arabic-explanation__grid aside { padding: 18px; border: 1px solid var(--border); border-radius: 15px; background: var(--surface); }
.arabic-explanation__grid h3 { margin: 0 0 12px; font-size: 17px; }
.arabic-explanation__grid ul { display: grid; gap: 11px; margin: 0; padding: 0 20px 0 0; }
.arabic-explanation__grid li { color: var(--muted); line-height: 1.75; }
.arabic-explanation__grid aside { border-color: rgba(251,113,133,.25); background: var(--red-soft); }
.arabic-explanation__grid aside span { color: var(--red); font-size: 10px; font-weight: 900; letter-spacing: .05em; }
.arabic-explanation__grid aside p { margin: 7px 0 0; color: var(--muted); line-height: 1.8; }
.arabic-explanation__note { margin: 16px 0 0; color: var(--muted-2); font-size: 11px; }

/* Professional course */
.course-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 34px; overflow: hidden; padding: clamp(30px, 5vw, 54px); border: 1px solid rgba(167,139,250,.25); border-radius: 26px; background: radial-gradient(circle at 88% 0%, rgba(167,139,250,.16), transparent 33%), radial-gradient(circle at 12% 110%, rgba(79,140,255,.13), transparent 38%), var(--surface); box-shadow: var(--shadow); }
.course-hero::after { content: ""; position: absolute; right: 8%; bottom: -110px; width: 260px; height: 260px; border: 1px dashed rgba(167,139,250,.2); border-radius: 50%; }
.course-hero > * { position: relative; z-index: 1; }
.course-hero h1 { max-width: 850px; margin: 7px 0 14px; font-size: clamp(38px, 5.5vw, 68px); line-height: 1.03; letter-spacing: -.045em; }
.course-hero p:not(.eyebrow) { max-width: 800px; margin: 0; color: var(--muted); }
.course-hero__meter { display: grid; width: 168px; aspect-ratio: 1; place-items: center; align-content: center; border: 1px solid rgba(167,139,250,.3); border-radius: 50%; background: rgba(167,139,250,.08); text-align: center; }
.course-hero__meter strong { color: var(--violet); font-size: 45px; line-height: 1; }
.course-hero__meter span { margin-top: 6px; color: var(--muted); font-size: 12px; }
.course-hero__meter small { color: var(--muted-2); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.course-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; overflow: hidden; margin-top: 16px; border: 1px solid var(--border); border-radius: 16px; background: var(--border); }
.course-stats > div { display: flex; min-height: 75px; align-items: center; gap: 11px; padding: 16px 18px; background: var(--surface); }
.course-stats strong { font-size: 24px; }
.course-stats span { color: var(--muted); font-size: 11px; line-height: 1.35; }
.course-method { display: grid; grid-template-columns: repeat(7, auto); align-items: center; justify-content: space-between; gap: 10px; margin: 28px 0 16px; padding: 22px; border: 1px solid var(--border); border-radius: 18px; background: linear-gradient(145deg, var(--surface), var(--surface-2)); }
.course-method > div { display: grid; justify-items: center; min-width: 130px; text-align: center; }
.course-method > div > span { display: grid; width: 34px; height: 34px; margin-bottom: 7px; place-items: center; border-radius: 11px; background: rgba(167,139,250,.12); color: var(--violet); font-size: 11px; font-weight: 900; }
.course-method strong { font-size: 13px; }
.course-method small { color: var(--muted); font-size: 10px; }
.course-method i { color: var(--muted-2); font-style: normal; }
.course-note { display: grid; grid-template-columns: 42px 1fr; gap: 13px; margin-bottom: 28px; padding: 16px 18px; border: 1px solid rgba(34,211,238,.22); border-radius: 14px; background: rgba(34,211,238,.06); }
.course-note > span { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 12px; background: rgba(34,211,238,.12); color: var(--cyan); }
.course-note p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.course-progress { height: 10px; margin: -5px 0 18px; }
.course-module-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.course-module-card { --module-color: var(--primary); position: relative; display: flex; min-height: 320px; overflow: hidden; padding: 23px; flex-direction: column; border: 1px solid var(--border); border-radius: 18px; background: linear-gradient(145deg, var(--surface), var(--surface-2)); color: var(--text); text-align: left; cursor: pointer; transition: .2s ease; }
.course-module-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--module-color); }
.course-module-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--module-color) 45%, var(--border)); box-shadow: var(--shadow); }
.course-module-card--manage, .course-module-hero--manage { --module-color: var(--cyan); }
.course-module-card--ingest, .course-module-hero--ingest { --module-color: var(--violet); }
.course-module-card--monitor, .course-module-hero--monitor { --module-color: var(--green); }
.course-module-card--foundation, .course-module-hero--foundation { --module-color: var(--amber); }
.course-module-card--mixed, .course-module-hero--mixed { --module-color: var(--red); }
.course-module-card__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--module-color); font-size: 10px; font-weight: 900; letter-spacing: .11em; }
.course-module-card__icon { display: grid; width: 46px; height: 46px; place-items: center; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); font-size: 18px; letter-spacing: 0; }
.course-module-card h3 { margin: 21px 0 7px; font-size: 21px; line-height: 1.28; }
.course-module-card > p { margin: 0; color: var(--muted); font-size: 13px; }
.course-module-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 17px 0; }
.course-module-card__tags span { padding: 4px 7px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); font-size: 9px; }
.course-module-card .meter { margin-top: auto; }
.course-module-card .meter span { background: var(--module-color); }
.course-module-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; color: var(--muted); font-size: 11px; }
.course-module-card__foot strong { color: var(--module-color); }

.course-module-hero { --module-color: var(--primary); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 28px; padding: clamp(27px, 5vw, 48px); border: 1px solid color-mix(in srgb, var(--module-color) 30%, var(--border)); border-radius: 24px 24px 0 0; background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--module-color) 14%, transparent), transparent 40%), var(--surface-2); }
.course-module-hero .eyebrow { margin-top: 24px; color: var(--module-color); }
.course-module-hero h1 { display: flex; align-items: center; gap: 14px; margin: 7px 0 8px; font-size: clamp(33px, 5vw, 54px); line-height: 1.08; }
.course-module-hero h1 > span { color: var(--module-color); font-size: .7em; }
.course-module-hero > div > p:last-child { max-width: 780px; margin: 0; color: var(--muted); }
.course-module-hero__score { display: grid; width: 118px; aspect-ratio: 1; place-items: center; align-content: center; flex: none; border: 1px solid color-mix(in srgb, var(--module-color) 35%, var(--border)); border-radius: 50%; background: color-mix(in srgb, var(--module-color) 8%, transparent); text-align: center; }
.course-module-hero__score strong { color: var(--module-color); font-size: 31px; line-height: 1; }
.course-module-hero__score span { margin-top: 5px; color: var(--muted); font-size: 11px; }
.course-module-detail { padding: clamp(20px, 4vw, 34px); border: 1px solid var(--border); border-top: 0; border-radius: 0 0 24px 24px; background: var(--surface); box-shadow: var(--shadow); }
.course-module-intro { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr); gap: 20px; }
.course-module-intro > div > p:last-child { margin: 0; font-size: clamp(18px, 2.5vw, 23px); line-height: 1.65; }
.course-module-intro aside { padding: 19px; border: 1px solid rgba(167,139,250,.22); border-radius: 15px; background: rgba(167,139,250,.07); }
.course-module-intro aside > span { color: var(--violet); font-size: 10px; font-weight: 900; letter-spacing: .11em; }
.course-module-intro ul { display: grid; gap: 8px; margin: 10px 0 0; padding-left: 20px; color: var(--muted); font-size: 12px; }
.course-concept-map { margin: 28px 0; padding: 22px; border: 1px solid var(--border); border-radius: 18px; background: var(--bg-elevated); }
.course-concept-map h2 { margin: 0; font-size: 22px; }
.course-concept-map__track { display: grid; grid-template-columns: repeat(11, auto); align-items: center; justify-content: space-between; gap: 6px; margin-top: 20px; }
.course-concept-map__track > div { display: grid; min-width: 90px; justify-items: center; padding: 11px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); text-align: center; }
.course-concept-map__track span { color: var(--primary); font-size: 9px; font-weight: 900; }
.course-concept-map__track strong { font-size: 11px; }
.course-concept-map__track i { color: var(--cyan); font-style: normal; }
.course-activity-section { margin: 32px 0; }
.course-section-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 15px; }
.course-section-head h2 { margin: 0; font-size: 27px; }
.course-section-head p:not(.eyebrow) { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.course-activity-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.course-activity { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 11px; min-height: 64px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); color: var(--text); text-align: left; cursor: pointer; }
.course-activity:hover { border-color: var(--border-strong); }
.course-activity.completed { border-color: rgba(49,208,170,.28); background: var(--green-soft); }
.course-activity__check { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; background: var(--surface-3); color: var(--muted); font-size: 10px; font-weight: 900; }
.course-activity.completed .course-activity__check { background: rgba(49,208,170,.16); color: var(--green); }
.course-activity strong { font-size: 12px; line-height: 1.35; }
.course-activity small { color: var(--muted-2); font-size: 9px; white-space: nowrap; }
.course-lab { margin: 30px 0; padding: 24px; border: 1px solid rgba(49,208,170,.25); border-radius: 19px; background: radial-gradient(circle at 0 0, rgba(49,208,170,.1), transparent 34%), var(--bg-elevated); }
.course-lab.completed { border-color: rgba(49,208,170,.48); }
.course-lab__head { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.course-lab__head span { color: var(--green); font-size: 10px; font-weight: 900; letter-spacing: .12em; }
.course-lab h2 { margin: 3px 0 0; font-size: 25px; }
.course-lab ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin: 20px 0 0; padding: 0; list-style: none; }
.course-lab li { display: grid; grid-template-columns: 34px 1fr; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.course-lab li span { color: var(--green); font-size: 10px; font-weight: 900; }
.course-lab li p { margin: 0; color: var(--muted); font-size: 12px; }
.course-exam { margin: 30px 0; padding: clamp(21px, 4vw, 30px); border: 1px solid rgba(251,191,36,.27); border-radius: 20px; background: radial-gradient(circle at 100% 0%, rgba(251,191,36,.1), transparent 35%), var(--surface-2); }
.course-exam h2 { margin: 0; font-size: 27px; }
.course-exam > div > p:not(.eyebrow) { max-width: 760px; margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.course-exam__patterns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin: 20px 0; }
.course-exam__patterns article { display: grid; align-content: start; gap: 8px; min-height: 112px; padding: 15px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface); }
.course-exam__patterns span { color: var(--amber); font-size: 10px; font-weight: 900; }
.course-exam__patterns strong { font-size: 12px; line-height: 1.5; }
.course-related { display: flex; align-items: center; justify-content: space-between; gap: 22px; margin: 28px 0; padding: 20px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface-2); }
.course-related h2 { margin: 0; font-size: 21px; }
.course-related > div:last-child { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }

@media (max-width: 980px) {
  .primary-nav { position: fixed; inset: 74px 16px auto; display: none; max-height: calc(100vh - 96px); overflow: auto; padding: 14px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); }
  .primary-nav.open { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .menu-toggle { display: inline-grid; }
  .hero, .dump-hero, .analytics-grid, .learn-hero, .course-hero, .course-module-hero { grid-template-columns: 1fr; }
  .dump-run-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero__visual { display: none; }
  .dump-score { min-width: 120px; width: 120px; }
  .stats-grid, .feature-grid, .domain-grid, .lesson-grid, .cheat-grid, .source-grid, .settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .learn-hero__score { display: none; }
  .learn-domain-grid, .lesson-grid--visual { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fabric-journey__track { grid-template-columns: repeat(5, 1fr); }
  .fabric-journey__track i { display: none; }
  .lesson-intro, .lesson-points { grid-template-columns: 1fr; }
  .arabic-support__groups, .arabic-explanation__grid { grid-template-columns: 1fr; }
  .course-hero__meter, .course-module-hero__score { display: none; }
  .course-module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .course-method { grid-template-columns: repeat(4, 1fr); }
  .course-method i { display: none; }
  .course-module-intro { grid-template-columns: 1fr; }
  .course-concept-map__track { grid-template-columns: repeat(3, 1fr); }
  .course-concept-map__track i { display: none; }
}

@media (max-width: 680px) {
  main { padding-inline: 14px; }
  .topbar__inner { padding-inline: 12px; }
  .stats-grid, .feature-grid, .domain-grid, .lesson-grid, .cheat-grid, .source-grid, .settings-grid, .result-grid { grid-template-columns: 1fr; }
  .learn-summary, .learn-domain-grid, .lesson-grid--visual { grid-template-columns: 1fr; }
  .course-stats, .course-module-grid, .course-activity-list, .course-lab ol, .course-exam__patterns { grid-template-columns: 1fr; }
  .course-stats { gap: 0; }
  .course-stats > div { min-height: 62px; border-bottom: 1px solid var(--border); }
  .course-stats > div:last-child { border-bottom: 0; }
  .course-method { grid-template-columns: repeat(2, 1fr); }
  .course-concept-map__track { grid-template-columns: repeat(2, 1fr); gap: 9px; }
  .course-section-head, .course-lab__head, .course-related { align-items: stretch; flex-direction: column; }
  .course-section-head .btn, .course-lab__head .btn { width: 100%; }
  .course-related > div:last-child { justify-content: flex-start; }
  .course-related .btn { width: 100%; }
  .course-activity { grid-template-columns: 38px minmax(0, 1fr); }
  .course-activity small { grid-column: 2; }
  .learn-summary { gap: 0; }
  .learn-summary > div { min-height: 62px; border-bottom: 1px solid var(--border); }
  .learn-summary > div:last-child { border-bottom: 0; }
  .fabric-journey__track { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .fabric-journey__track > div { min-width: 0; }
  .fabric-journey__track > div:last-child { grid-column: 1 / -1; }
  .lesson-hero { align-items: start; flex-direction: column; }
  .lesson-hero__actions { width: 100%; justify-items: stretch; }
  .lesson-hero__actions .btn { width: 100%; }
  .lesson-hero h1 { align-items: start; }
  .memory-visual--split .memory-nodes, .memory-visual--compare .memory-nodes { grid-template-columns: 1fr; }
  .memory-visual--flow .memory-node:not(:last-child)::after, .memory-visual--cycle .memory-node:not(:last-child)::after { display: none; }
  .lesson-video, .lesson-sources, .lesson-check__actions { align-items: stretch; flex-direction: column; }
  .lesson-video .btn { width: 100%; }
  .lesson-sources .lesson-links { justify-content: flex-start; }
  .arabic-support { grid-template-columns: 1fr; }
  .arabic-support__mark { width: 52px; height: 52px; border-radius: 15px; font-size: 27px; }
  .arabic-explanation__head { align-items: stretch; flex-direction: column; }
  .arabic-explanation__head .btn { width: 100%; }
  .primary-nav.open { grid-template-columns: 1fr; }
  .dump-card__head, .dump-card__actions, .quiz-top, .quiz-actions { align-items: stretch; flex-direction: column; }
  .dump-exhibit-grid { grid-template-columns: 1fr; gap: 12px; }
  .dump-exhibits { padding: 9px; }
  .dump-exhibit-button { padding: 6px; }
  .dump-exhibit-button img { width: 100%; }
  .dump-slot label, .dump-yn-row { grid-template-columns: 1fr; }
  .dump-yn-row > div { width: 100%; }
  .dump-yn { flex: 1; }
  .palette { grid-template-columns: repeat(5, 1fr); }
  .dump-run-grid { grid-template-columns: 1fr; }
  .dump-palette { grid-template-columns: repeat(5, minmax(34px, 1fr)); }
  .flashcard { min-height: 540px; }
  .flash-controls { grid-template-columns: 1fr; }
  .flash-controls .btn:first-child, .flash-controls .btn:last-child { justify-self: stretch; }
  .important-shell, .important-frame { min-height: 720px; }
}

@media print {
  .topbar, .site-footer, .top-actions, .hero__actions, .quiz-actions, .dump-interaction__actions { display: none !important; }
  body { background: #fff; color: #111; }
  main { max-width: none; }
}

/* Course v8 — full activity lesson experience */
.course-activity-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  gap: 7px;
  min-width: 0;
}
.course-activity-row .course-activity { width: 100%; }
.course-activity-row.completed .course-activity {
  border-color: rgba(49,208,170,.28);
  background: var(--green-soft);
}
.course-activity-row.completed .course-activity__check {
  background: rgba(49,208,170,.16);
  color: var(--green);
}
.course-activity__body { display: grid; min-width: 0; gap: 4px; }
.course-activity__body strong { overflow-wrap: anywhere; }
.course-activity__body small { color: var(--muted-2); font-size: 9px; white-space: normal; }
.course-activity__arrow { color: var(--primary); font-size: 18px; }
.course-activity-complete {
  display: grid;
  min-height: 64px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--muted);
  cursor: pointer;
}
.course-activity-complete:hover { border-color: var(--border-strong); color: var(--primary); }
.course-activity-complete.completed { border-color: rgba(49,208,170,.35); background: var(--green-soft); color: var(--green); }

.course-lesson-hero {
  --module-color: var(--primary);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 28px;
  padding: clamp(25px, 5vw, 46px);
  border: 1px solid color-mix(in srgb, var(--module-color) 30%, var(--border));
  border-radius: 24px;
  background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--module-color) 16%, transparent), transparent 42%), var(--surface-2);
  box-shadow: var(--shadow);
}
.course-lesson-hero .eyebrow { margin: 22px 0 5px; color: var(--module-color); }
.course-lesson-hero h1 { max-width: 900px; margin: 0 0 10px; font-size: clamp(31px, 5vw, 52px); line-height: 1.08; }
.course-lesson-hero > div > p:last-child { max-width: 800px; margin: 0; color: var(--muted); }
.course-lesson-hero__actions { display: grid; min-width: 190px; justify-items: stretch; gap: 10px; }
.course-lesson-hero__actions > span { color: var(--muted-2); font-size: 10px; text-align: center; }

.course-lesson-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  align-items: start;
  gap: 18px;
  margin-top: 18px;
}
.course-lesson-sidebar {
  position: sticky;
  top: calc(var(--topbar-height) + 16px);
  max-height: calc(100vh - var(--topbar-height) - 32px);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 17px;
  background: var(--surface);
}
.course-lesson-sidebar__head { display: grid; gap: 4px; padding: 18px; border-bottom: 1px solid var(--border); }
.course-lesson-sidebar__head span { color: var(--primary); font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.course-lesson-sidebar__head strong { font-size: 14px; line-height: 1.35; }
.course-lesson-sidebar__head small { color: var(--muted); font-size: 10px; }
.course-lesson-sidebar > .meter { margin: 12px 16px; }
.course-lesson-sidebar__list { display: grid; max-height: calc(100vh - var(--topbar-height) - 155px); overflow: auto; padding: 0 8px 12px; }
.course-lesson-sidebar__list button {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  width: 100%;
  padding: 9px 8px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  text-align: left;
  cursor: pointer;
}
.course-lesson-sidebar__list button:hover { background: var(--surface-2); color: var(--text); }
.course-lesson-sidebar__list button.active { background: var(--primary-soft); color: var(--primary); }
.course-lesson-sidebar__list button.completed span { color: var(--green); }
.course-lesson-sidebar__list button > span { font-size: 9px; font-weight: 900; }
.course-lesson-sidebar__list button > small { font-size: 10px; line-height: 1.35; }

.course-lesson-content { display: grid; gap: 16px; min-width: 0; }
.course-lesson-section {
  padding: clamp(20px, 4vw, 32px);
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 12px 35px rgba(0,0,0,.08);
}
.course-lesson-section h2 { margin: 3px 0 12px; font-size: clamp(22px, 3vw, 31px); line-height: 1.2; }
.course-lesson-section > p:last-child { margin-bottom: 0; }
.course-lesson-focus { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr); gap: 18px; }
.course-lesson-focus > div > p:last-child { color: var(--muted); font-size: 17px; line-height: 2; }
.course-lesson-focus aside { padding: 20px; border: 1px solid rgba(167,139,250,.25); border-radius: 14px; background: rgba(167,139,250,.08); }
.course-lesson-focus aside span { color: var(--violet); font-size: 10px; font-weight: 900; }
.course-lesson-focus aside p { margin-bottom: 0; line-height: 2; }
.course-objective-list { display: grid; gap: 9px; margin: 0; padding-left: 22px; color: var(--muted); }
.course-language-badge { align-self: center; padding: 6px 10px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); font-size: 10px; }
.course-arabic-study { background: linear-gradient(135deg, var(--surface), color-mix(in srgb, var(--primary-soft) 45%, var(--surface))); }
.course-arabic-study .eyebrow { text-align: right; }
.course-arabic-paragraph { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: start; gap: 13px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.course-arabic-paragraph:last-of-type { border-bottom: 0; }
.course-arabic-paragraph span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; background: var(--primary-soft); color: var(--primary); font-size: 10px; font-weight: 900; }
.course-arabic-paragraph p { margin: 0; font-size: 16px; line-height: 2.05; }
.course-topic-focus { margin-top: 18px; padding: 17px; border-right: 4px solid var(--cyan); border-radius: 12px; background: rgba(34,211,238,.07); }
.course-topic-focus strong { color: var(--cyan); }
.course-topic-focus p { margin: 7px 0 0; line-height: 2; }
.course-english-summary { border-color: rgba(34,211,238,.22); background: linear-gradient(135deg, var(--surface), rgba(34,211,238,.04)); }
.course-english-summary > p:last-child { color: var(--muted); font-size: 17px; }
.course-concept-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.course-concept-cards article { padding: 17px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface-2); }
.course-concept-cards article > span { display: block; margin-bottom: 11px; color: var(--primary); font-size: 15px; font-weight: 900; }
.course-concept-cards p { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 8px; margin: 7px 0; color: var(--muted); font-size: 11px; }
.course-concept-cards p strong { color: var(--text); }
.course-visual-study > p:last-child { color: var(--muted); }
.course-visual-flow { display: flex; align-items: stretch; gap: 8px; overflow-x: auto; padding: 8px 0 18px; }
.course-visual-flow > div { display: grid; min-width: 125px; min-height: 95px; align-content: center; gap: 6px; padding: 13px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface-2); text-align: center; }
.course-visual-flow > div span { color: var(--primary); font-size: 9px; font-weight: 900; }
.course-visual-flow > div strong { font-size: 12px; }
.course-visual-flow > i { align-self: center; color: var(--primary); font-style: normal; }
.table-wrap { overflow-x: auto; }
.course-decision-table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 12px; }
.course-decision-table th, .course-decision-table td { padding: 12px; border: 1px solid var(--border); text-align: left; vertical-align: top; }
.course-decision-table th { background: var(--surface-3); color: var(--text); }
.course-decision-table td { color: var(--muted); }
.course-code-study pre { overflow: auto; margin: 0; padding: 19px; border: 1px solid rgba(34,211,238,.2); border-radius: 13px; background: #050b13; color: #d8f7ff; direction: ltr; text-align: left; line-height: 1.7; }
html[data-theme="light"] .course-code-study pre { background: #0b1220; color: #e8f6ff; }
.course-code-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 12px; }
.course-code-notes p { display: grid; gap: 4px; margin: 0; padding: 13px; border: 1px solid var(--border); border-radius: 11px; color: var(--muted); font-size: 11px; }
.course-code-notes strong { color: var(--text); }
.course-guided-practice .course-section-head > span { color: var(--green); font-weight: 900; }
.course-practice-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(260px, .6fr); gap: 16px; }
.course-practice-grid ol { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.course-practice-grid li { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 10px; align-items: start; padding: 12px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface-2); }
.course-practice-grid li span { color: var(--green); font-size: 10px; font-weight: 900; }
.course-practice-grid li p { margin: 0; color: var(--muted); }
.course-practice-grid aside { padding: 18px; border: 1px solid rgba(49,208,170,.25); border-radius: 13px; background: var(--green-soft); }
.course-practice-grid aside strong { color: var(--green); }
.course-practice-grid aside small { display: block; color: var(--muted-2); }
.course-two-column { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.course-two-column > div { padding: 17px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface-2); }
.course-two-column ul { display: grid; gap: 8px; padding-left: 20px; color: var(--muted); }
.course-exam-focus { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(230px, .65fr); gap: 18px; border-color: rgba(251,191,36,.25); background: linear-gradient(135deg, var(--surface), rgba(251,191,36,.04)); }
.course-exam-focus > div > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.course-exam-focus article { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 8px; padding: 11px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.course-exam-focus article span { color: var(--amber); font-size: 9px; font-weight: 900; }
.course-exam-focus article strong { font-size: 11px; }
.course-exam-focus aside { display: grid; align-content: center; gap: 9px; padding: 21px; border: 1px solid rgba(251,191,36,.3); border-radius: 14px; background: var(--amber-soft); text-align: center; }
.course-exam-focus aside span { color: var(--amber); font-size: 10px; font-weight: 900; letter-spacing: .1em; }
.course-exam-focus aside strong { font-size: 18px; }
.course-related-practice { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: center; }
.course-related-practice__actions { display: flex; max-width: 520px; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.course-related-visuals { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 7px; padding-top: 14px; border-top: 1px solid var(--border); }
.course-sources { display: grid; grid-template-columns: minmax(0, .8fr) minmax(320px, 1.2fr); gap: 18px; }
.course-sources > div:last-child { display: grid; gap: 8px; }
.course-sources a { display: flex; justify-content: space-between; gap: 14px; padding: 13px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface-2); color: var(--text); text-decoration: none; }
.course-sources a:hover { border-color: var(--border-strong); }
.course-sources a span { color: var(--primary); font-size: 10px; white-space: nowrap; }

@media (max-width: 1020px) {
  .course-lesson-layout { grid-template-columns: 1fr; }
  .course-lesson-sidebar { position: static; max-height: none; }
  .course-lesson-sidebar__list { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 310px; }
  .course-lesson-focus, .course-practice-grid, .course-exam-focus, .course-related-practice, .course-sources { grid-template-columns: 1fr; }
  .course-related-practice__actions { max-width: none; justify-content: flex-start; }
}

@media (max-width: 720px) {
  .course-lesson-hero { grid-template-columns: 1fr; }
  .course-lesson-hero__actions { min-width: 0; }
  .course-lesson-sidebar__list, .course-concept-cards, .course-code-notes, .course-two-column, .course-exam-focus > div > div { grid-template-columns: 1fr; }
  .course-activity-row { grid-template-columns: minmax(0, 1fr) 42px; }
  .course-activity { grid-template-columns: 38px minmax(0, 1fr) auto; }
  .course-language-badge { display: none; }
  .course-lesson-section { padding: 18px; }
  .course-related-practice__actions .btn { flex: 1 1 180px; }
  .course-sources a { align-items: flex-start; flex-direction: column; }
}

@media print {
  .course-lesson-sidebar, .course-lesson-hero__actions, .course-related-practice__actions, .lesson-finish { display: none !important; }
  .course-lesson-layout { display: block; }
  .course-lesson-section { break-inside: avoid; box-shadow: none; }
}

/* DP-700 Professional Mastery v9 */
.course-v9-grid,
.pro-path-grid,
.bootcamp-grid,
.challenge-grid,
.trouble-grid,
.project-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 22px 0 32px;
}
.course-v9-grid button,
.pro-path-grid button,
.challenge-grid button,
.trouble-grid button,
.project-grid button {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 155px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--surface-2) 94%, var(--primary) 6%), var(--surface));
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.course-v9-grid button:hover,
.pro-path-grid button:hover,
.challenge-grid button:hover,
.trouble-grid button:hover,
.project-grid button:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--primary) 55%, var(--border)); }
.course-v9-grid button > span,
.pro-path-grid button > span,
.challenge-grid button > span,
.trouble-grid button > span,
.project-grid button > span { color: var(--primary); font-size: 10px; font-weight: 900; letter-spacing: .12em; }
.course-v9-grid button strong,
.pro-path-grid button strong,
.challenge-grid button strong,
.trouble-grid button strong,
.project-grid button strong { margin-top: auto; color: var(--primary); }
.course-v9-grid button small,
.pro-path-grid button small,
.challenge-grid button small,
.trouble-grid button small,
.project-grid button small,
.pro-path-grid button p,
.challenge-grid button p,
.trouble-grid button p,
.project-grid button p { margin: 0; color: var(--muted); }
.challenge-grid button.completed,
.trouble-grid button.completed,
.project-grid button.completed { border-color: rgba(49,208,170,.45); background: var(--green-soft); }

.pro-path-hero,
.diagnostic-panel,
.mastery-scale,
.challenge-hero,
.trouble-hero,
.project-hero,
.assessment-hero {
  margin: 0 0 24px;
  padding: clamp(22px, 4vw, 34px);
  border: 1px solid var(--border);
  border-radius: 24px;
  background: radial-gradient(circle at 100% 0%, rgba(167,139,250,.13), transparent 35%), var(--surface);
}
.pro-path-hero,
.challenge-hero,
.project-hero,
.assessment-hero { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.pro-path-hero h2,
.challenge-hero h1,
.trouble-hero h1,
.project-hero h1,
.assessment-hero h1 { margin: 4px 0 10px; }
.pro-path-hero p,
.challenge-hero p,
.trouble-hero p,
.project-hero p,
.assessment-hero p { color: var(--muted); }
.pro-path-score,
.project-hero > div:last-child,
.assessment-hero > div:last-child {
  display: grid;
  min-width: 150px;
  place-items: center;
  padding: 22px;
  border: 1px solid rgba(167,139,250,.25);
  border-radius: 20px;
  background: rgba(167,139,250,.08);
}
.pro-path-score strong,
.project-hero > div:last-child strong,
.assessment-hero > div:last-child strong { font-size: clamp(34px, 6vw, 58px); line-height: 1; }
.pro-path-score span,
.project-hero > div:last-child span,
.assessment-hero > div:last-child span { margin-top: 8px; color: var(--muted); font-size: 11px; }

.mastery-scale { display: grid; grid-template-columns: .45fr 1.55fr; gap: 24px; }
.mastery-scale > div:last-child { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.mastery-scale article { padding: 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-2); }
.mastery-scale article span { color: var(--primary); font-size: 10px; font-weight: 900; }
.mastery-scale article strong { display: block; margin: 8px 0 4px; }
.mastery-scale article p { margin: 0; color: var(--muted); font-size: 11px; }

.diagnostic-panel { background: var(--surface); }
.diagnostic-result,
.assessment-result {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 18px 0;
  padding: 18px;
  border: 1px solid rgba(49,208,170,.35);
  border-radius: 16px;
  background: var(--green-soft);
}
.diagnostic-result > strong { font-size: 42px; color: var(--green); }
.diagnostic-result > div { flex: 1; }
.diagnostic-result h3,
.diagnostic-result p { margin: 0; }
.diagnostic-result p { color: var(--muted); }
.diagnostic-questions,
.assessment-questions { display: grid; gap: 14px; margin: 22px 0; }
.diagnostic-questions fieldset,
.assessment-questions fieldset {
  margin: 0;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface-2);
}
.diagnostic-questions legend,
.assessment-questions legend { display: flex; align-items: start; gap: 10px; padding: 0 8px; color: var(--text); font-weight: 800; }
.diagnostic-questions legend span,
.assessment-questions legend span { color: var(--primary); font-size: 10px; }
.diagnostic-questions fieldset > div,
.assessment-questions fieldset > div { display: grid; gap: 8px; margin-top: 12px; }
.diagnostic-questions label,
.assessment-questions label,
.root-cause-panel label {
  display: grid;
  grid-template-columns: 18px 30px 1fr;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface);
  cursor: pointer;
}
.diagnostic-questions label > span,
.assessment-questions label > span,
.root-cause-panel label > span { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 8px; background: var(--surface-3); color: var(--muted); font-size: 11px; font-weight: 900; }
.diagnostic-questions label:has(input:checked),
.assessment-questions label:has(input:checked),
.root-cause-panel label:has(input:checked) { border-color: var(--primary); background: color-mix(in srgb, var(--surface) 88%, var(--primary) 12%); }
.diagnostic-explanation,
.assessment-questions fieldset > p { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; color: var(--muted); background: var(--surface); }
.diagnostic-explanation.correct,
.assessment-questions label.correct { border-color: rgba(49,208,170,.45); background: var(--green-soft); }
.diagnostic-explanation.wrong,
.assessment-questions label.wrong { border-color: rgba(251,113,133,.45); background: var(--red-soft); }

.bootcamp-grid article {
  display: grid;
  gap: 14px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
}
.bootcamp-grid article.completed { border-color: rgba(49,208,170,.45); box-shadow: inset 0 0 0 1px rgba(49,208,170,.12); }
.bootcamp-card__head { display: flex; align-items: center; gap: 12px; }
.bootcamp-card__head > span { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 13px; background: rgba(34,211,238,.1); color: var(--cyan); font-weight: 900; }
.bootcamp-card__head h3,
.bootcamp-card__head small { margin: 0; }
.bootcamp-card__head small { color: var(--muted); }
.bootcamp-grid article > p { margin: 0; color: var(--muted); }
.bootcamp-grid ul { margin: 0; padding-left: 18px; color: var(--muted); }
.bootcamp-challenge { padding: 13px; border: 1px solid rgba(251,191,36,.25); border-radius: 12px; background: var(--amber-soft); }
.bootcamp-challenge p { margin: 5px 0 0; color: var(--muted); }

.mastery-badge { display: inline-flex; width: max-content; align-items: center; justify-content: center; padding: 6px 10px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); font-size: 10px; font-weight: 900; letter-spacing: .08em; }
.mastery-badge--studied { border-color: rgba(34,211,238,.35); color: var(--cyan); background: rgba(34,211,238,.08); }
.mastery-badge--practiced { border-color: rgba(167,139,250,.35); color: var(--violet); background: rgba(167,139,250,.08); }
.mastery-badge--exam-ready { border-color: rgba(251,191,36,.35); color: var(--amber); background: var(--amber-soft); }
.mastery-badge--professional { border-color: rgba(49,208,170,.4); color: var(--green); background: var(--green-soft); }
.mastery-overview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 22px; }
.mastery-overview > div { display: grid; gap: 4px; padding: 18px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.mastery-overview strong { font-size: 30px; }
.mastery-overview span { color: var(--muted); font-size: 11px; }
.mastery-module-list { display: grid; gap: 14px; }
.mastery-module-list > article,
.module-mastery-strip,
.topic-mastery,
.learning-depth {
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
}
.mastery-module__head { display: flex; align-items: start; justify-content: space-between; gap: 14px; }
.mastery-module__head span { color: var(--primary); font-size: 10px; font-weight: 900; letter-spacing: .1em; }
.mastery-module__head h3 { margin: 5px 0 0; }
.mastery-evidence { display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 0; }
.mastery-evidence span { padding: 6px 9px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); font-size: 10px; }
.mastery-evidence span.done { border-color: rgba(49,208,170,.35); color: var(--green); background: var(--green-soft); }
.mastery-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.mastery-reflection,
.topic-rationale { display: grid; gap: 8px; margin-top: 14px; }
.mastery-reflection > span,
.topic-rationale > span { color: var(--muted); font-size: 11px; font-weight: 700; }
.mastery-reflection textarea,
.topic-rationale textarea { width: 100%; resize: vertical; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); color: var(--text); font: inherit; }
.mastery-reflection .btn,
.topic-rationale .btn { width: max-content; }
.module-mastery-strip { display: grid; grid-template-columns: 1fr 1.25fr auto; align-items: center; gap: 18px; margin-bottom: 24px; }
.module-mastery-strip h2 { margin: 4px 0; }
.module-mastery-strip p { margin: 0; color: var(--muted); }

.learning-depth__tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 16px 0; }
.learning-depth__tabs button { display: grid; gap: 4px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); color: var(--text); text-align: left; cursor: pointer; }
.learning-depth__tabs button.active { border-color: var(--primary); background: color-mix(in srgb, var(--surface-2) 84%, var(--primary) 16%); }
.learning-depth__tabs small { color: var(--muted); }
.learning-depth__body { display: grid; grid-template-columns: .8fr 1.2fr; gap: 18px; padding: 18px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-2); }
.learning-depth__body h3 { margin-top: 0; }
.learning-depth__body p,
.learning-depth__body li { color: var(--muted); }
.topic-mastery__evidence { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 16px 0; }
.topic-mastery__evidence article { display: grid; align-content: start; gap: 6px; padding: 14px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface-2); }
.topic-mastery__evidence article.done { border-color: rgba(49,208,170,.38); background: var(--green-soft); }
.topic-mastery__evidence article > span { color: var(--primary); font-size: 10px; font-weight: 900; }
.topic-mastery__evidence p { margin: 0; color: var(--muted); font-size: 11px; }
.topic-mastery__evidence .btn { margin-top: auto; }

.challenge-layout,
.trouble-evidence,
.project-detail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 20px 0; }
.challenge-layout > article,
.trouble-evidence > div,
.project-detail > article,
.project-detail > aside,
.challenge-assistance,
.root-cause-panel,
.decision-scenario {
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
}
.challenge-layout ul,
.trouble-evidence ul,
.project-detail ul { color: var(--muted); }
.challenge-checklist,
.project-milestones { display: grid; gap: 9px; }
.challenge-checklist label,
.project-milestones label { display: flex; align-items: start; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.project-milestones label span { display: flex; gap: 10px; }
.project-milestones label strong { color: var(--primary); font-size: 10px; }
.challenge-assistance { display: grid; gap: 14px; margin: 20px 0; }
.challenge-assistance aside { padding: 15px; border: 1px solid rgba(251,191,36,.28); border-radius: 13px; background: var(--amber-soft); }
.challenge-assistance aside.solution { border-color: rgba(49,208,170,.3); background: var(--green-soft); }

.trouble-evidence ol { display: grid; gap: 8px; padding: 0; list-style: none; }
.trouble-evidence ol li { display: grid; grid-template-columns: 34px 1fr; gap: 9px; align-items: center; color: var(--muted); }
.trouble-evidence ol span { color: var(--primary); font-size: 10px; font-weight: 900; }
.root-cause-panel { margin: 20px 0; }
.root-cause-panel > div { display: grid; gap: 8px; margin: 14px 0; }
.root-cause-panel label.correct { border-color: rgba(49,208,170,.45); background: var(--green-soft); }
.root-cause-panel label.wrong { border-color: rgba(251,113,133,.45); background: var(--red-soft); }
.root-cause-result { padding: 12px; border-radius: 10px; }
.root-cause-result.correct { color: var(--green); background: var(--green-soft); }
.root-cause-result.wrong { color: var(--red); background: var(--red-soft); }

.decision-progress { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 14px; margin-bottom: 16px; color: var(--muted); }
.decision-scenario h1 { max-width: 920px; font-size: clamp(26px, 4vw, 42px); }
.decision-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 20px 0; }
.decision-options button { display: grid; grid-template-columns: 40px 1fr; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface-2); color: var(--text); text-align: left; cursor: pointer; }
.decision-options button > span { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 10px; background: var(--surface-3); color: var(--muted); }
.decision-options button.selected { border-color: var(--primary); }
.decision-options button.correct { border-color: rgba(49,208,170,.45); background: var(--green-soft); }
.decision-options button.wrong { border-color: rgba(251,113,133,.45); background: var(--red-soft); }
.decision-explanation { margin-top: 16px; padding: 16px; border: 1px solid var(--border); border-radius: 13px; }
.decision-explanation.correct { background: var(--green-soft); }
.decision-explanation.wrong { background: var(--red-soft); }
.decision-explanation p,
.decision-explanation li { color: var(--muted); }

.project-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 22px; }
.project-tags span { padding: 6px 9px; border-radius: 999px; background: rgba(34,211,238,.09); color: var(--cyan); font-size: 10px; font-weight: 800; }
.assessment-result.correct { border-color: rgba(49,208,170,.4); background: var(--green-soft); }
.assessment-result.wrong { border-color: rgba(251,113,133,.4); background: var(--red-soft); }
.assessment-result p { margin: 0; color: var(--muted); }

@media (max-width: 1050px) {
  .course-v9-grid,
  .pro-path-grid,
  .bootcamp-grid,
  .challenge-grid,
  .trouble-grid,
  .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mastery-scale { grid-template-columns: 1fr; }
  .mastery-scale > div:last-child { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .module-mastery-strip { grid-template-columns: 1fr; }
  .topic-mastery__evidence { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .course-v9-grid,
  .pro-path-grid,
  .bootcamp-grid,
  .challenge-grid,
  .trouble-grid,
  .project-grid,
  .mastery-overview,
  .challenge-layout,
  .trouble-evidence,
  .project-detail,
  .decision-options,
  .learning-depth__body { grid-template-columns: 1fr; }
  .pro-path-hero,
  .challenge-hero,
  .project-hero,
  .assessment-hero { align-items: stretch; flex-direction: column; }
  .pro-path-score,
  .project-hero > div:last-child,
  .assessment-hero > div:last-child { min-width: 0; }
  .mastery-scale > div:last-child,
  .learning-depth__tabs,
  .topic-mastery__evidence { grid-template-columns: 1fr; }
  .mastery-module__head { align-items: start; flex-direction: column; }
  .diagnostic-result { align-items: stretch; flex-direction: column; }
  .diagnostic-questions label,
  .assessment-questions label,
  .root-cause-panel label { grid-template-columns: 18px 28px minmax(0, 1fr); }
}
.diagnostic-skills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.diagnostic-skills span { padding: 5px 8px; border: 1px solid var(--border); border-radius: 999px; font-size: 9px; font-weight: 900; }
.diagnostic-skills span.strong { border-color: rgba(49,208,170,.35); color: var(--green); background: var(--green-soft); }
.diagnostic-skills span.review { border-color: rgba(251,191,36,.35); color: var(--amber); background: var(--amber-soft); }
.diagnostic-skills span.weak { border-color: rgba(251,113,133,.35); color: var(--red); background: var(--red-soft); }
.professional-journey { margin: 22px 0; padding: 20px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); }
.professional-journey > div { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.professional-journey span { padding: 7px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); color: var(--text); font-size: 10px; font-weight: 800; }
.professional-journey i { color: var(--muted-2); font-style: normal; }