/* ============================================================================
 * course.css — 整門課共用 Design System
 * ----------------------------------------------------------------------------
 * 1. Design Tokens（CSS Variables）：dark 為預設，[data-theme="light"] 覆寫
 * 2. Layout：sidebar + topbar + main
 * 3. Reusable UI：card / note / future-topic / diagram / flow / code / bars /
 *    table / progress / badge / chip / slider / btn / lab / quiz / summary /
 *    next-week / roadmap / yah（you-are-here）
 * 4. Week 內容不應該再自訂顏色或字體；只用這裡的 class 與 tokens。
 * ========================================================================== */

/* ---- 1. Tokens --------------------------------------------------------- */
/* Tokens 依 Radix Colors 12 階規則對應（dark: Slate / Indigo / Grass / Amber / Red 的 dark scale）
 *   step 1–2 背景、3–5 元件背景、6–8 邊框、9–10 實色、11 一般文字、12 高對比文字
 * 依 Material dark theme 指引：背景用深灰而非純黑、強調色去飽和提高明度。 */
:root {
  --bg-primary: #111113;        /* slate 1 */
  --bg-secondary: #18191b;      /* slate 2 */
  --bg-elevated: #212225;       /* slate 3 */
  --bg-hover: #272a2d;          /* slate 4 */
  --bg-code: #151618;
  --text-primary: #dfe1e4;      /* slate 11.5：介於 11 與 12 之間，避免長讀時對比衝到極限 */
  --text-strong: #edeef0;       /* slate 12：標題 / 強調 */
  --text-secondary: #b0b4ba;    /* slate 11 */
  --text-muted: #8b8f98;        /* slate 10.5 */
  --border: #363a3f;            /* slate 6 */
  --border-strong: #43484e;     /* slate 7 */
  --accent: #9eb1ff;            /* indigo 11：文字、連結、圖示 */
  --accent-strong: #d6e1ff;     /* indigo 12 */
  --accent-solid: #3e63dd;      /* indigo 9：按鈕實色 */
  --accent-solid-hover: #5472e4;/* indigo 10 */
  --accent-soft: #182449;       /* indigo 3：元件背景 */
  --accent-border: #3a4f97;     /* indigo 7 */
  --on-accent: #ffffff;
  --success: #71d083;           /* grass 11 */
  --success-soft: #1b2a1e;      /* grass 3 */
  --warning: #ffca16;           /* amber 11 */
  --warning-soft: #302008;      /* amber 3 */
  --danger: #ff9592;            /* red 11 */
  --danger-soft: #3b1219;       /* red 3 */
  --info: #4ccce6;              /* cyan 11 */
  --focus: #ffca16;

  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro TC", "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "SF Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --radius: 10px;
  --radius-sm: 6px;
  --sidebar-w: 292px;
  --topbar-h: 64px;
  --content-w: 900px;   /* 容器寬：demo / 表格 / 圖可用到 */
  --measure: 700px;     /* 純文字行寬：約 40 個中文字 */
  --shadow: 0 8px 28px rgba(0, 0, 0, 0.35);

  color-scheme: dark;
}

[data-theme="light"] {
  --bg-primary: #f9f9fb;        /* slate 2 */
  --bg-secondary: #ffffff;
  --bg-elevated: #f0f0f3;       /* slate 3 */
  --bg-hover: #e8e8ec;          /* slate 4 */
  --bg-code: #f4f4f7;
  --text-primary: #2b2f36;      /* slate 11.5 */
  --text-strong: #1c2024;       /* slate 12 */
  --text-secondary: #60646c;    /* slate 11 */
  --text-muted: #696d76;        /* slate 10.5：確保小字達 AA 4.5:1 */
  --border: #d9d9e0;            /* slate 6 */
  --border-strong: #cdced6;     /* slate 7 */
  --accent: #3a5bc7;            /* indigo 11 */
  --accent-strong: #1f2d5c;     /* indigo 12 */
  --accent-solid: #3e63dd;      /* indigo 9 */
  --accent-solid-hover: #3358d4;/* indigo 10 */
  --accent-soft: #e1e9ff;       /* indigo 3 */
  --accent-border: #8da4ef;     /* indigo 7 */
  --on-accent: #ffffff;
  --success: #2a7e3b;           /* grass 11 */
  --success-soft: #e9f6e9;      /* grass 3 */
  --warning: #8f5400;           /* amber 11 再加深，確保 4.5:1 */
  --warning-soft: #fff3d0;      /* amber 3 */
  --danger: #c62a2f;            /* red 11 */
  --danger-soft: #feebec;       /* red 3 */
  --info: #0c7792;              /* cyan 11 */
  --focus: #3e63dd;
  --shadow: 0 8px 28px rgba(20, 30, 50, 0.12);
  color-scheme: light;
}

/* ---- Base -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-strong); }
code, pre, kbd, .mono { font-family: var(--font-mono); font-size: 0.92em; }
p code, li code, td code, .card__body code:not(pre code), .note__body code {
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 4px; padding: 0.05em 0.35em;
}
h1, h2, h3, h4 { line-height: 1.3; margin: 0 0 0.6em; letter-spacing: -0.01em; color: var(--text-strong); }
h1 { font-size: 2rem; }
h2 { font-size: 1.45rem; margin-top: 2.2rem; }
h3 { font-size: 1.15rem; margin-top: 1.6rem; }
h4 { font-size: 1rem; margin-top: 1.2rem; }
p { margin: 0 0 1.1em; }
ul, ol { padding-left: 1.4em; margin: 0 0 1em; }
li { margin-bottom: 0.3em; }
small { color: var(--text-muted); }
hr { border: 0; border-top: 1px solid var(--border); margin: 2rem 0; }
strong { color: var(--text-strong); }
.text-muted { color: var(--text-muted); }
.text-accent { color: var(--accent); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-danger { color: var(--danger); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 純文字行寬限制：容器維持 --content-w 讓 demo / 表格可以寬，只有段落文字收到 --measure */
.section__content > p, .section__content > ul, .section__content > ol, .section__lead, .page__lead,
.card__body p, .card__body ul, .card__body ol, .note__body p, .note__body ul, .note__body ol,
.goals, .summary__list, .next-week__preview, .demo__hint, .checklist__desc, .quiz__prompt, .quiz__explain { max-width: var(--measure); }

/* ---- 2. Layout --------------------------------------------------------- */
.app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; }

.sidebar {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  background: var(--bg-secondary); border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
}
.sb-brand { padding: 18px 18px 12px; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.sb-brand__link { display: flex; flex-direction: column; color: var(--text-primary); }
.sb-brand__title { font-weight: 700; font-size: 1.02rem; letter-spacing: -0.01em; }
.sb-brand__tag { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; }
.sb-close { display: none; }
.sb-progress { padding: 8px 18px 14px; border-bottom: 1px solid var(--border); }
.sb-progress__row { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 6px; }
.sb-progress__row strong { color: var(--text-strong); }
.sb-progress__hint { font-size: 0.72rem; color: var(--text-muted); margin-top: 6px; }
.sb-nav { flex: 1; padding: 8px 10px 16px; }
.sb-weeks, .sb-sections { list-style: none; margin: 0; padding: 0; }
.sb-week { margin: 2px 0; }
.sb-week__link {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "num status" "title title";
  padding: 8px 10px; border-radius: var(--radius-sm); color: var(--text-secondary); line-height: 1.35;
}
.sb-week__num { grid-area: num; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); }
.sb-week__title { grid-area: title; font-size: 0.9rem; font-weight: 600; color: var(--text-primary); }
.sb-week__status { grid-area: status; font-size: 0.68rem; color: var(--text-muted); }
.sb-week--available .sb-week__link:hover { background: var(--bg-hover); }
.sb-week.is-active > .sb-week__link { background: var(--accent-soft); }
.sb-week.is-active .sb-week__num, .sb-week.is-active .sb-week__status { color: var(--accent); }
.sb-week.is-complete .sb-week__status { color: var(--success); }
.sb-week--soon .sb-week__link { opacity: 0.55; cursor: default; }
.sb-week--soon .sb-week__title { font-weight: 500; }
.sb-week--soon .sb-week__link:hover { background: transparent; }
.sb-sections { margin: 4px 0 8px 12px; border-left: 1px solid var(--border); padding-left: 6px; }
.sb-section {
  display: grid; grid-template-columns: 16px 1fr auto; align-items: center; gap: 6px;
  padding: 5px 8px; border-radius: var(--radius-sm); font-size: 0.82rem; color: var(--text-secondary);
}
.sb-section:hover { background: var(--bg-hover); color: var(--text-strong); }
.sb-section.is-current { background: var(--bg-elevated); color: var(--text-primary); font-weight: 600; }
.sb-section__mark { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--border-strong); font-size: 0.65rem; display: inline-flex; align-items: center; justify-content: center; color: var(--success); }
.sb-section.is-read .sb-section__mark { border-color: var(--success); background: var(--success-soft); }
.sb-section.is-done .sb-section__kind { color: var(--success); border-color: var(--success); }
.sb-section__kind { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.06em; border: 1px solid var(--border-strong); border-radius: 4px; padding: 0 5px; color: var(--text-muted); }
.sb-foot { padding: 12px 18px; border-top: 1px solid var(--border); }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 20; height: var(--topbar-h);
  display: flex; align-items: center; gap: 16px; padding: 0 24px;
  background: var(--bg-primary);
  background: color-mix(in srgb, var(--bg-primary) 88%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.topbar__menu { display: none; }
.topbar__course { font-weight: 700; color: var(--text-primary); white-space: nowrap; }
.topbar__week { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.topbar__weeknum { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); }
.topbar__title { font-size: 0.95rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar__right { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.topbar__progress { display: grid; grid-template-columns: auto auto; grid-template-areas: "label val" "bar bar"; column-gap: 8px; align-items: baseline; min-width: 150px; }
.topbar__progress-label { grid-area: label; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); }
.topbar__progress-val { grid-area: val; font-weight: 700; font-size: 0.9rem; text-align: right; }
.topbar__progress .progress { grid-area: bar; }
.topbar__nav { display: flex; gap: 6px; }

.content { padding: 28px 32px 80px; max-width: calc(var(--content-w) + 64px); width: 100%; margin: 0 auto; }

/* ---- Section page ------------------------------------------------------ */
.section__head { margin-bottom: 24px; }
.section__meta { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }
.section__title { font-size: 2rem; margin-bottom: 0.4em; }
.section__lead { font-size: 1.08rem; color: var(--text-secondary); margin-bottom: 1em; }
.section__content > h2:first-child { margin-top: 0.5rem; }
.section__end { height: 1px; }
.section__nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.section__nav-right { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }

.page__head { margin-bottom: 28px; }
.page__eyebrow { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); margin-bottom: 4px; }
.page__title { font-size: 2.2rem; }
.page__lead { font-size: 1.08rem; color: var(--text-secondary); max-width: 62ch; }

/* ---- 3. Components ----------------------------------------------------- */
/* Card / Concept Card */
.card { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; margin: 0 0 18px; }
.card__eyebrow { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); margin-bottom: 4px; }
.card__title { margin: 0 0 0.5em; font-size: 1.1rem; display: flex; align-items: center; gap: 8px; }
.card__icon { color: var(--accent); }
.card__body > :last-child { margin-bottom: 0; }
.concept--accent { border-color: var(--accent-border); background: var(--bg-secondary); }
.concept--success { border-color: var(--success); border-color: color-mix(in srgb, var(--success) 45%, var(--border)); }
.concept--danger { border-color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); }
.concept--warning { border-color: var(--warning); border-color: color-mix(in srgb, var(--warning) 45%, var(--border)); }
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-bottom: 18px; }
.card-grid > .card { margin: 0; }

/* Note: Engineering Note / Warning */
.note { border-left: 3px solid var(--accent); background: var(--bg-secondary); border-radius: 0 var(--radius) var(--radius) 0; padding: 14px 18px; margin: 18px 0; }
.note__label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.note--eng { border-left-color: var(--info); }
.note--eng .note__label { color: var(--info); }
.note--warn { border-left-color: var(--warning); background: var(--warning-soft); }
.note--warn .note__label { color: var(--warning); }
.note__body > :last-child { margin-bottom: 0; }
.conceptual-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 0.74rem; color: var(--text-muted); border: 1px dashed var(--border-strong); border-radius: 999px; padding: 2px 10px; margin: 4px 0 10px; }

/* Future Topic */
.future-topics { margin: 18px 0; }
.future-topics__label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); margin-bottom: 6px; }
.future-topics__list { display: flex; flex-wrap: wrap; gap: 8px; }
.future-topic {
  display: inline-grid; grid-template-columns: auto auto; grid-template-areas: "topic tag" "week week"; column-gap: 10px;
  padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-secondary); color: var(--text-primary); line-height: 1.3;
}
.future-topic:hover { border-color: var(--border-strong); color: var(--text-primary); }
.future-topic__topic { grid-area: topic; font-weight: 600; font-size: 0.9rem; }
.future-topic__week { grid-area: week; font-size: 0.72rem; color: var(--text-muted); }
.future-topic__tag { grid-area: tag; font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); border: 1px solid var(--border-strong); border-radius: 4px; padding: 0 5px; align-self: start; }
.future-topic--available { border-color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); }
.future-topic--available .future-topic__tag { color: var(--success); border-color: var(--success); }

/* Diagram / Flow / Stage strip */
.diagram { margin: 18px 0; padding: 18px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); }
.diagram__title { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); margin-bottom: 12px; }
.diagram__caption { font-size: 0.85rem; color: var(--text-secondary); margin-top: 12px; }
.diagram__body { overflow-x: auto; }
.diagram svg { max-width: 100%; height: auto; display: block; margin: 0 auto; }
.diagram-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }

.flow { display: flex; flex-direction: column; align-items: center; gap: 2px; position: relative; }
.flow__step { min-width: 220px; text-align: center; padding: 10px 16px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--bg-elevated); }
.flow__step small { display: block; color: var(--text-muted); font-size: 0.75rem; }
.flow__step--active { border-color: var(--accent-border); background: var(--accent-soft); }
.flow__step--input { border-style: dashed; }
.flow__step--output { border-color: var(--success); }
.flow__step--loop { border-color: var(--warning); background: var(--warning-soft); }
.flow__label { font-weight: 600; }
.flow__children { display: flex; gap: 8px; justify-content: center; margin-top: 8px; }
.flow__child { font-size: 0.8rem; padding: 4px 10px; border: 1px solid var(--border); border-radius: 4px; background: var(--bg-secondary); }
.flow__child small { display: block; font-size: 0.7rem; color: var(--text-muted); }
.flow__note { font-size: 0.75rem; color: var(--text-muted); margin-top: 6px; font-weight: 400; }
.flow__arrow { color: var(--text-muted); line-height: 1; padding: 2px 0; }
.flow--compact .flow__step { min-width: 160px; padding: 6px 12px; font-size: 0.9rem; }
.flow__loop { margin-top: 8px; font-size: 0.8rem; color: var(--warning); border: 1px dashed var(--warning); border-radius: 999px; padding: 2px 14px; }

.stage-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 0.72rem; margin: 10px 0 0; padding: 8px 12px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.stage-strip__label { color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-right: 6px; }
.stage-strip__item { color: var(--text-muted); padding: 1px 7px; border-radius: 4px; white-space: nowrap; }
.stage-strip__item.is-active { color: var(--accent); background: var(--accent-soft); font-weight: 700; }
.stage-strip__arrow { color: var(--border-strong); }

/* Code block */
.code { margin: 16px 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--bg-code); }
.code__bar { display: flex; justify-content: space-between; align-items: center; padding: 6px 12px; background: var(--bg-secondary); border-bottom: 1px solid var(--border); font-size: 0.72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.code__copy { font: inherit; background: transparent; border: 1px solid var(--border-strong); color: var(--text-secondary); border-radius: 4px; padding: 2px 10px; cursor: pointer; }
.code__copy:hover { color: var(--text-primary); border-color: var(--accent); }
.code__pre { margin: 0; padding: 14px 16px; overflow-x: auto; font-size: 0.85rem; line-height: 1.6; }
.code__pre code { font-size: inherit; }
.tok-special { color: var(--warning); font-weight: 700; }
.tok-role { color: var(--info); }
.tok-user { color: var(--success); }

/* Bars */
.bars { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; }
.bar { display: grid; grid-template-columns: 120px 1fr 72px; align-items: center; gap: 10px; font-size: 0.88rem; }
.bar__label { font-family: var(--font-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar__track { height: 14px; background: var(--bg-elevated); border-radius: 4px; overflow: hidden; border: 1px solid var(--border); }
.bar__fill { display: block; height: 100%; background: var(--accent-solid); transition: width 0.35s ease; }
.bar__text { font-family: var(--font-mono); font-size: 0.8rem; text-align: right; color: var(--text-secondary); }
.bar--muted { opacity: 0.4; }
.bar--muted .bar__fill { background: var(--text-muted); }
.bar--hi .bar__fill { background: var(--success); }
.bar--hi .bar__label { color: var(--success); font-weight: 700; }
.bars--compact .bar { grid-template-columns: 90px 1fr 60px; font-size: 0.8rem; }
.bars--compact .bar__track { height: 10px; }

/* Table */
.table-wrap { overflow-x: auto; margin: 14px 0; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.table th, .table td { padding: 8px 12px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.table th { background: var(--bg-secondary); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.table tr:last-child td { border-bottom: 0; }
.table--mono td { font-family: var(--font-mono); font-size: 0.82rem; }
.table tr.is-dropped td { opacity: 0.4; text-decoration: line-through; }
.table tr.is-selected td { background: var(--success-soft); color: var(--success); font-weight: 700; }

/* Progress bar / Badge / Chip */
.progress { height: 8px; background: var(--bg-elevated); border-radius: 999px; overflow: hidden; border: 1px solid var(--border); }
.progress__fill { display: block; height: 100%; background: var(--accent-solid); transition: width 0.4s ease; }
.progress--sm { height: 5px; }
.badge { display: inline-block; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border-strong); color: var(--text-secondary); line-height: 1.5; vertical-align: middle; }
.badge--accent { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.badge--success { color: var(--success); border-color: var(--success); background: var(--success-soft); }
.badge--warning { color: var(--warning); border-color: var(--warning); background: var(--warning-soft); }
.badge--danger { color: var(--danger); border-color: var(--danger); background: var(--danger-soft); }
.badge--muted { color: var(--text-muted); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.chip { display: inline-block; font-size: 0.8rem; padding: 3px 10px; border-radius: 999px; background: var(--bg-elevated); border: 1px solid var(--border); font-family: var(--font-mono); }
.chip--muted { color: var(--text-muted); }
.chip--accent { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.chip--success { color: var(--success); border-color: var(--success); background: var(--success-soft); }
.chip--warning { color: var(--warning); border-color: var(--warning); background: var(--warning-soft); }
.chip--danger { color: var(--danger); border-color: var(--danger); background: var(--danger-soft); }
.chip--prompt { background: var(--bg-elevated); }
.chip--gen { color: var(--accent-strong); border-color: var(--accent); background: var(--accent-soft); }
.chip--eos { color: var(--warning); border-color: var(--warning); border-style: dashed; }
.chip--clickable { cursor: pointer; }
.chip--clickable:hover, .chip.is-selected { border-color: var(--accent); color: var(--accent-strong); }
.chip.is-selected { background: var(--accent-soft); font-weight: 700; }
.chip.is-masked { opacity: 0.3; text-decoration: line-through; cursor: not-allowed; }

/* Buttons / Controls */
.btn { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 0.9rem; font-weight: 600; padding: 8px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--bg-elevated); color: var(--text-primary); cursor: pointer; line-height: 1.3; }
.btn:hover { border-color: var(--accent); color: var(--text-primary); }
.btn--primary { background: var(--accent-solid); border-color: var(--accent-solid); color: var(--on-accent); }
.btn--primary:hover { background: var(--accent-solid-hover); border-color: var(--accent-solid-hover); color: var(--on-accent); }
.btn--ghost { background: transparent; }
.btn--success { background: var(--success); border-color: var(--success); color: var(--bg-primary); }
.btn--sm { font-size: 0.78rem; padding: 5px 10px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.btn[aria-disabled="true"]:hover { border-color: var(--border-strong); }
.controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 18px; margin: 14px 0; align-items: end; }
.controls__actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 14px; align-items: center; }
.slider { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "label value" "input input"; gap: 2px 8px; font-size: 0.85rem; }
.slider__label { grid-area: label; color: var(--text-secondary); }
.slider__value { grid-area: value; font-family: var(--font-mono); color: var(--accent-strong); font-weight: 700; }
.slider input[type="range"] { grid-area: input; width: 100%; accent-color: var(--accent-solid); }
.field { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; color: var(--text-secondary); }
.field select, .field input[type="text"], .field textarea {
  font: inherit; font-size: 0.9rem; color: var(--text-primary); background: var(--bg-elevated); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 8px 10px;
}
.field textarea { font-family: var(--font-mono); font-size: 0.85rem; min-height: 72px; resize: vertical; }
.check { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--text-secondary); cursor: pointer; }
.check input { accent-color: var(--accent-solid); }

/* Demo box（interactive demo 容器） */
.demo { margin: 18px 0; padding: 16px 18px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--bg-secondary); }
.demo__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.demo__tag { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); font-weight: 700; border: 1px solid var(--accent); border-radius: 4px; padding: 1px 6px; }
.demo__title { margin: 0; font-size: 1rem; }
.demo__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.demo__stage { padding: 10px 12px; background: var(--bg-primary); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.demo__stage-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 6px; }
.demo__output { font-family: var(--font-mono); font-size: 0.85rem; white-space: pre-wrap; word-break: break-word; }
.demo__hint { font-size: 0.8rem; color: var(--text-muted); margin-top: 8px; }
.stat-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 10px 0; }
.stat { flex: 1; min-width: 120px; padding: 10px 12px; background: var(--bg-primary); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.stat__label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); }
.stat__value { font-family: var(--font-mono); font-size: 1.3rem; font-weight: 700; color: var(--accent-strong); }
.stat__value--success { color: var(--success); }
.stat__value--warning { color: var(--warning); }
.stage-list { display: flex; flex-direction: column; gap: 8px; }
.stage-list__item { display: grid; grid-template-columns: 150px 1fr; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-primary); }
.stage-list__name { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); font-weight: 700; }
.stage-list__name small { display: block; text-transform: none; letter-spacing: 0; color: var(--text-muted); font-weight: 400; }
.stage-list__arrow { text-align: center; color: var(--text-muted); font-size: 0.8rem; }

/* Token chips (tokenizer / attention demo) */
.tokens { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0; }
.token { display: inline-flex; flex-direction: column; align-items: center; font-family: var(--font-mono); font-size: 0.85rem; padding: 4px 8px; border-radius: 4px; border: 1px solid var(--border); background: var(--bg-elevated); }
.token small { font-size: 0.66rem; color: var(--text-muted); }
.token--byte { border-style: dashed; color: var(--warning); }
.token--space::before { content: "␣"; color: var(--text-muted); margin-right: 1px; }
.token--c0 { border-color: rgba(62,99,221,0.7); } .token--c1 { border-color: rgba(70,167,88,0.7); } .token--c2 { border-color: rgba(255,197,61,0.7); } .token--c3 { border-color: rgba(0,162,199,0.7); } .token--c4 { border-color: rgba(229,72,77,0.7); }

/* Attention heat */
.attn-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; align-items: flex-end; }
.attn-tok { position: relative; padding: 6px 10px; border-radius: 4px; border: 1px solid var(--border); font-family: var(--font-mono); background: var(--bg-elevated); cursor: pointer; transition: background 0.3s; }
.attn-tok.is-query { border-color: var(--warning); box-shadow: 0 0 0 2px var(--warning-soft); }
.attn-tok.is-future { opacity: 0.35; border-style: dashed; }
.attn-tok__w { display: block; font-size: 0.62rem; color: var(--text-muted); text-align: center; }

/* Embedding plot */
.embed-plot { width: 100%; height: auto; }
.embed-plot .pt { cursor: pointer; }
.embed-plot .pt circle { fill: var(--accent-solid); stroke: var(--bg-primary); stroke-width: 1.5; }
.embed-plot .pt.is-selected circle { fill: var(--warning); r: 7; }
.embed-plot .pt.is-near circle { fill: var(--success); }
.embed-plot .pt text { fill: var(--text-primary); font-size: 11px; font-family: var(--font-mono); pointer-events: none; }
.embed-plot .grid line { stroke: var(--border); stroke-dasharray: 3 3; }
.embed-plot .axis text { fill: var(--text-muted); font-size: 10px; }
.vec { display: flex; flex-wrap: wrap; gap: 4px; font-family: var(--font-mono); font-size: 0.8rem; }
.vec span { padding: 2px 6px; border-radius: 3px; background: var(--bg-elevated); border: 1px solid var(--border); }
.vec span.is-hi { color: var(--accent-strong); border-color: var(--accent); }

/* SVG diagrams共用 */
.svg-box { fill: var(--bg-elevated); stroke: var(--border-strong); }
.svg-box--accent { fill: var(--accent-soft); stroke: var(--accent); }
.svg-box--success { fill: var(--success-soft); stroke: var(--success); }
.svg-box--warn { fill: var(--warning-soft); stroke: var(--warning); }
.svg-text { fill: var(--text-primary); font-family: var(--font-sans); font-size: 13px; }
.svg-text--muted { fill: var(--text-muted); font-size: 11px; }
.svg-text--mono { font-family: var(--font-mono); }
.svg-line { stroke: var(--text-muted); stroke-width: 1.5; fill: none; }
.svg-line--accent { stroke: var(--accent); }
.svg-line--residual { stroke: var(--success); stroke-dasharray: 4 3; }

/* Lab */
.lab { margin: 20px 0; border: 1px solid var(--success); border-color: color-mix(in srgb, var(--success) 40%, var(--border)); border-radius: var(--radius); background: var(--bg-secondary); }
.lab__head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.lab__tag { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--success); font-weight: 700; border: 1px solid var(--success); border-radius: 4px; padding: 1px 6px; }
.lab__title { margin: 0; font-size: 1.1rem; flex: 1; }
.lab__status { font-size: 0.78rem; color: var(--text-muted); }
.lab__status.is-done { color: var(--success); font-weight: 700; }
.lab__intro { padding: 14px 18px 0; color: var(--text-secondary); }
.lab__body { padding: 14px 18px 18px; }

/* Quiz */
.quiz { margin: 20px 0; }
.quiz__head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.quiz__tag { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--warning); font-weight: 700; border: 1px solid var(--warning); border-radius: 4px; padding: 1px 6px; }
.quiz__title { margin: 0; font-size: 1.1rem; flex: 1; }
.quiz__count { font-size: 0.8rem; color: var(--text-muted); }
.quiz__q { border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 18px 16px; margin: 0 0 14px; background: var(--bg-secondary); min-width: 0; }
.quiz__q.is-correct { border-color: var(--success); }
.quiz__q.is-wrong { border-color: var(--danger); }
.quiz__legend { display: flex; gap: 8px; align-items: center; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); padding: 0 6px; }
.quiz__num { font-weight: 700; color: var(--accent); }
.quiz__type, .quiz__area { border: 1px solid var(--border-strong); border-radius: 4px; padding: 0 6px; }
.quiz__scenario { margin: 8px 0; padding: 10px 12px; background: var(--bg-code); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 0.85rem; white-space: pre-wrap; }
.quiz__prompt { margin: 6px 0 10px; font-weight: 600; }
.quiz__options { display: flex; flex-direction: column; gap: 6px; }
.quiz__opt { display: grid; grid-template-columns: auto auto 1fr; align-items: start; gap: 10px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; background: var(--bg-primary); }
.quiz__opt:hover { border-color: var(--border-strong); }
.quiz__opt input { margin-top: 5px; accent-color: var(--accent-solid); }
.quiz__letter { font-family: var(--font-mono); font-weight: 700; color: var(--text-muted); }
.quiz__opt.is-answer { border-color: var(--success); background: var(--success-soft); }
.quiz__opt.is-chosen-wrong { border-color: var(--danger); background: var(--danger-soft); }
.quiz__explain { margin-top: 12px; padding: 10px 12px; border-left: 3px solid var(--accent); background: var(--bg-primary); font-size: 0.9rem; }
.quiz__submit { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.quiz__unanswered { font-size: 0.82rem; color: var(--text-muted); }
.quiz__result { border: 1px solid var(--success); background: var(--success-soft); border-radius: var(--radius); padding: 18px; margin-bottom: 20px; }
.quiz__score { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.quiz__score-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); }
.quiz__score-value { font-size: 1.8rem; font-weight: 800; font-family: var(--font-mono); }
.quiz__score-pct { font-family: var(--font-mono); color: var(--success); font-weight: 700; }
.quiz__weak { margin-top: 14px; }
.quiz__weak-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); margin-bottom: 4px; }
.quiz__weak ul { margin: 0; } .quiz__weak-none { margin: 0; color: var(--text-secondary); }
.quiz__done { margin-top: 12px; font-size: 0.85rem; }
.quiz__actions { margin-top: 12px; }

/* Summary / Next week / Roadmap / YOU ARE HERE */
.summary { margin: 20px 0; padding: 20px 24px; border: 1px solid var(--accent-border); border-radius: var(--radius); background: var(--bg-secondary); }
.summary__title { margin: 0 0 12px; }
.summary__list { margin: 0; padding-left: 1.4em; }
.summary__list li { margin-bottom: 8px; }
.summary__list li strong { color: var(--accent-strong); }

.next-week { margin: 24px 0; padding: 22px 24px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--bg-secondary); }
.next-week__eyebrow { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); }
.next-week__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 10px; }
.next-week__title { margin: 0; font-size: 1.3rem; }
.next-week__preview { margin: 0 0 12px; padding: 12px 16px; border-left: 3px solid var(--accent); background: var(--bg-primary); color: var(--text-secondary); font-style: normal; }
.next-week__preview p:last-child { margin: 0; }
.next-week__actions { margin-top: 12px; }
.vs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; margin: 12px 0; }
.vs__side { padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-primary); text-align: center; }
.vs__side strong { display: block; font-size: 1.05rem; }
.vs__side small { color: var(--text-muted); }
.vs__mid { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.1em; }

.roadmap { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 12px 0 24px; }
.roadmap__item { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-secondary); color: var(--text-secondary); line-height: 1.3; }
.roadmap__week { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-muted); }
.roadmap__title { font-size: 0.82rem; font-weight: 600; color: var(--text-primary); }
.roadmap__state { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.roadmap__item--current { border-color: var(--accent-border); background: var(--accent-soft); }
.roadmap__item--current .roadmap__week, .roadmap__item--current .roadmap__state { color: var(--accent); }
.roadmap__item--available:hover { border-color: var(--accent); }
.roadmap__item--soon { opacity: 0.55; cursor: default; }
.roadmap__item.is-complete .roadmap__state { color: var(--success); }

.yah { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; margin: 18px 0; padding: 20px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); }
.yah__label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 800; margin-bottom: 10px; color: var(--text-muted); }
.yah__col--here .yah__label { color: var(--accent); }
.yah__chain { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.yah__node { padding: 6px 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--bg-elevated); font-size: 0.85rem; font-weight: 600; min-width: 150px; text-align: center; color: var(--text-secondary); }
.yah__node--here { border-color: var(--accent-border); background: var(--accent-soft); color: var(--text-strong); }
.yah__arrow { color: var(--text-muted); font-size: 0.8rem; line-height: 1; }
.yah__divider { width: 1px; background: var(--border); }

.goals { margin: 0 0 20px; padding: 12px 16px; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); font-size: 0.9rem; }
.goals__label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); margin-bottom: 4px; }
.goals ul { margin: 0; }

/* Overview page */
.week-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.week-card { display: block; padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-secondary); color: var(--text-secondary); }
.week-card:hover { border-color: var(--accent); color: var(--text-secondary); }
.week-card--soon { opacity: 0.6; }
.week-card--soon:hover { border-color: var(--border); }
.week-card__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.week-card__num { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); }
.week-card__title { margin: 0 0 6px; font-size: 1rem; color: var(--text-primary); }
.week-card__summary { font-size: 0.85rem; margin: 0 0 8px; }

/* Troubleshooting checklist */
.checklist { list-style: none; padding: 0; margin: 12px 0; counter-reset: step; }
.checklist li { position: relative; padding: 10px 14px 10px 46px; border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 6px; background: var(--bg-secondary); }
.checklist li::before { counter-increment: step; content: counter(step); position: absolute; left: 12px; top: 10px; width: 24px; height: 24px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: 0.8rem; display: flex; align-items: center; justify-content: center; }
.checklist li.is-future { border-style: dashed; }
.checklist li.is-future::before { background: var(--bg-elevated); color: var(--text-muted); }
.checklist__title { font-weight: 600; }
.checklist__desc { font-size: 0.88rem; color: var(--text-secondary); }

/* Toast */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; z-index: 100; padding: 10px 18px; border-radius: 999px; background: var(--bg-elevated); border: 1px solid var(--border-strong); color: var(--text-primary); font-size: 0.9rem; box-shadow: var(--shadow); transition: opacity 0.2s, transform 0.2s; max-width: calc(100vw - 32px); }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.toast--success { border-color: var(--success); }
.toast--warn { border-color: var(--warning); }

/* Sidebar backdrop */
#sidebar-backdrop { display: none; }

/* ---- Responsive -------------------------------------------------------- */
@media (max-width: 1100px) {
  .topbar__course { display: none; }
}
@media (max-width: 960px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: fixed; left: 0; top: 0; width: min(var(--sidebar-w), 86vw); z-index: 40; transform: translateX(-100%); transition: transform 0.25s ease; box-shadow: var(--shadow); }
  body.sidebar-open .sidebar { transform: translateX(0); }
  #sidebar-backdrop { display: block; position: fixed; inset: 0; z-index: 30; background: rgba(0, 0, 0, 0.5); opacity: 0; pointer-events: none; transition: opacity 0.25s; }
  body.sidebar-open #sidebar-backdrop { opacity: 1; pointer-events: auto; }
  .sb-close { display: inline-flex; font: inherit; font-size: 1.4rem; line-height: 1; background: transparent; border: 0; color: var(--text-muted); cursor: pointer; padding: 0 4px; }
  .topbar { padding: 0 16px; gap: 12px; }
  .topbar__menu { display: inline-flex; font: inherit; font-size: 1.2rem; background: transparent; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); color: var(--text-primary); padding: 4px 10px; cursor: pointer; }
  .topbar__nav { display: none; }
  .content { padding: 20px 16px 72px; }
  .section__title, .page__title { font-size: 1.6rem; }
  .diagram-cols, .demo__grid, .yah { grid-template-columns: 1fr; }
  .yah__divider { width: auto; height: 1px; }
  .vs { grid-template-columns: 1fr; }
  .bar { grid-template-columns: 90px 1fr 60px; }
  .stage-list__item { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .topbar__progress { min-width: 96px; }
  .topbar__title { max-width: 40vw; }
  .flow__step { min-width: 0; width: 100%; }
  .section__nav .btn { width: 100%; justify-content: center; }
  .section__nav-right { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}