/* ===========================================================================
   components.css — 元件。

   方向（規格第八節）：螢光筆的外皮，配儀表的骨架。
     儀表（領域頁／搜尋結果）：等寬數字、十格量表、髮絲線網格、密度高、對齊嚴格。
     螢光筆（課程頁／心得）  ：淺色紙、課名一道筆痕、藍色學期標記、留白多。
   兩者共用同一組領域色與同一套間距，切換時不會像兩個網站。

   顏色一律 var(--token)，這個檔案裡沒有任何色碼。
   =========================================================================== */

/* ------------------------------------------------------------------ 頁首 */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--ground);
  border-bottom: var(--hair) solid var(--line);
}

.site-header > .wrap {
  display: flex;
  align-items: center;
  /* 手機上要在一行塞下「品牌＋四個連結＋外觀按鈕」（實測共 285px），
     間距跟著螢幕寬度縮：360px 寬時約 10px，572px 以上回到 16px。
     固定 16px 時要 397px 寬才塞得下，360–390px 的手機連結會被擠成一字一行。 */
  gap: clamp(var(--s2), 2.8vw, var(--s4));
  min-height: 3.25rem;
}

.brand {
  font-weight: 700;
  font-size: var(--fs-base);
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
}
.brand span { color: var(--muted); font-weight: 500; }

/* 375px 以下（例如 360px 寬的 Android 手機），間距縮小了也放不下「v2」，
   先藏版本號，讓導覽列維持一行。 */
@media (max-width: 374.98px) {
  .brand span { display: none; }
}

.site-nav {
  margin-left: auto;
  display: flex;
  /* 真的塞不下時（320px 寬的舊手機）以整個連結為單位換行，
     不會再把「首頁」拆成「首／頁」。 */
  flex-wrap: wrap;
  justify-content: flex-end;
  column-gap: clamp(var(--s2), 2.8vw, var(--s4));
  font-size: var(--fs-sm);
}
.site-nav a {
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
  padding-block: var(--s2);   /* 可點範圍加高，頁首高度不變 */
}
.site-nav a:hover,
.site-nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; }

/* ------------------------------------------------------------ 搜尋（首頁） */

.hero { padding-block: var(--s7) var(--s6); }

.hero h1 {
  font-size: var(--fs-2xl);
  letter-spacing: -0.02em;
  margin-bottom: var(--s2);
}
/* 標語分成兩段，各自不斷行：窄螢幕只會在兩段之間換行，
   不會把「馬偕」拆到兩行。 */
.hero h1 span { white-space: nowrap; }

.hero p {
  color: var(--muted);
  max-width: 34rem;
  margin-bottom: var(--s5);
}

.searchbox { position: relative; }

.searchbox input {
  width: 100%;
  padding: var(--s3) var(--s5) var(--s3) var(--s4);
  background: var(--surface);
  border: var(--hair) solid var(--line-2);
  border-radius: var(--r-md);
  font-size: var(--fs-md);
}
.searchbox input::placeholder { color: var(--muted); }

.searchbox kbd {
  position: absolute;
  right: var(--s3);
  top: 50%;
  translate: 0 -50%;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  color: var(--muted);
  border: var(--hair) solid var(--line-2);
  border-radius: var(--r-sm);
  padding: 0 var(--s1);
  pointer-events: none;
}
.searchbox input:not(:placeholder-shown) ~ kbd { display: none; }

/* ------------------------------------------------------------- 區塊標題 */

.section-head {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  padding-block: var(--s6) var(--s3);
}
.section-head h2 { font-size: var(--fs-lg); }
.section-head .count { color: var(--muted); font-size: var(--fs-sm); }
.section-head .more { margin-left: auto; font-size: var(--fs-sm); color: var(--ink-2); }

/* --------------------------------------------------------- 領域標籤（文字） */
/*
   規格第八節：領域名稱永遠以文字直接標示，顏色只是輔助。
   色覺障礙者不會因為分不出兩個色而看錯領域 —— 不要拿掉文字標籤。
*/

.tag-domain {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  font-size: var(--fs-xs);
  font-weight: 600;
  /* 文字用 --d-ink（往文字色拉近的領域色），小圓點才用原色。
     原色直接當 12px 小字，在淺色底上只有 2.9–4.4:1（見 tokens.css）。 */
  color: var(--d-ink);
  white-space: nowrap;
}
.tag-domain::before {
  content: "";
  inline-size: 0.5em;
  block-size: 0.5em;
  border-radius: var(--r-pill);
  background: var(--d);
  flex: none;
}

/* ------------------------------------------------------------- 領域卡片 */

/* 固定 4 欄：八個領域剛好兩排，不會留下空格。
   auto-fill 會在寬螢幕排成 5 欄，剩下的 2 個空格會被網格底色填成灰塊。 */
.domain-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--hair);
  background: var(--line);
  border: var(--hair) solid var(--line);
}

/* 手機維持兩欄：八張卡片疊成一長條的話，「最新心得」會被推到很下面。 */
@media (max-width: 760px) { .domain-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 330px) { .domain-grid { grid-template-columns: 1fr; } }

.domain-card {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  padding: var(--s4);
  background: var(--surface);
  text-decoration: none;
  border-left: 3px solid var(--d);
  transition: background 120ms ease;
}
.domain-card:hover { background: var(--surface-2); }

.domain-card .name { font-weight: 600; font-size: var(--fs-md); }
.domain-card .meta { color: var(--muted); font-size: var(--fs-sm); }

/* --------------------------------------------------------------- 結果列 */
/* 掃描任務：一列就要看完代碼、課名、教師、領域、星等、則數。 */

.result-list {
  border-top: var(--hair) solid var(--line);
}

.result-row {
  display: grid;
  grid-template-columns: 6.5rem 1fr auto;
  align-items: baseline;
  gap: var(--s2) var(--s4);
  padding: var(--s3) var(--s2);
  border-bottom: var(--hair) solid var(--line);
  text-decoration: none;
}
.result-row:hover { background: var(--surface-2); }

.result-row .code {
  font-family: var(--mono);
  font-size: var(--fs-sm);
  color: var(--muted);
}
.result-row .code.is-none { font-style: italic; }

.result-row .title { font-weight: 600; }

.result-row .sub {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
  color: var(--muted);
  font-size: var(--fs-sm);
}

.result-row .right {
  grid-row: 1 / span 2;
  grid-column: 3;
  align-self: center;
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  font-size: var(--fs-sm);
}

@media (max-width: 560px) {
  .result-row { grid-template-columns: 1fr auto; }
  .result-row .code { grid-column: 1; }
  .result-row .title { grid-column: 1 / -1; }
  .result-row .sub { grid-column: 1 / -1; }
  .result-row .right { grid-row: auto; grid-column: 1 / -1; flex-direction: row; text-align: left; gap: var(--s3); }
}

/* ----------------------------------------------------------------- 星等 */

.stars {
  display: inline-flex;
  gap: 1px;
  color: var(--star);
  line-height: 1;
}
.stars .off { color: var(--line-2); }
.stars.is-none { color: var(--muted); font-size: var(--fs-sm); }

/* --------------------------------------------------------- 十格分段量表 */
/*
   規格第八節：甜度與涼度本來就是 0–10 的整數，不畫成連續長條。
   十個小格、格距 2px、填滿的用領域色、未填滿的用 --meter-track。
   缺項時整條全空，並在旁邊標「—」——「沒有資料」不會被誤讀成「0 分」。
   量表旁必須直接標數字，不能只靠顏色。
*/

.meter-row {
  display: flex;
  align-items: center;
  gap: var(--s2);
}

.meter {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 2px;
  inline-size: 6.5rem;
  block-size: 0.6rem;
  flex: none;
}

.meter i {
  display: block;
  background: var(--meter-track);
  border-radius: 1px;
}
.meter i.on { background: var(--d); }

/* 資料缺項：整條全空，外加降低存在感，避免看起來像「全 0」。 */
.meter.is-none { opacity: 0.55; }

.meter-value {
  font-family: var(--mono);
  font-size: var(--fs-sm);
  min-inline-size: 2.5ch;
}
.meter-value.is-none { color: var(--muted); }

.meter-label {
  font-size: var(--fs-sm);
  color: var(--muted);
  min-inline-size: 3em;
}

/* ------------------------------------------------------------- 學期徽章 */
/* 螢光筆外皮的一部分：學期代碼是藍色標記。 */

.badge-term {
  display: inline-block;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  padding: 0 var(--s1);
  border-radius: var(--r-sm);
  background: var(--mark-term);
  color: var(--ink);
}

/* --------------------------------------------------------- 螢光筆課名 */
/*
   規格第八節的招牌元件。box-decoration-break:clone 讓筆跡在換行時跟著斷 ——
   這是它的細節。八個領域各用自己的筆色（--m 由 .d-* 提供）。
*/

.course-name {
  background-image: linear-gradient(transparent 58%, var(--m) 58%,
                                    var(--m) 94%, transparent 94%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* --------------------------------------------------------------- 儀表面板 */
/* 領域頁與搜尋結果的骨架皮膚。深底、髮絲網格、嚴格對齊。 */

.panel {
  --meter-track: var(--meter-off);
  /* 面板在淺色主題裡也是深底。--muted 不換的話，表格裡的課程代碼只剩 3.6:1
     （Lighthouse 實測抓到）。--ink 不換：.badge-term 壓在亮色底上要靠它。 */
  --muted: var(--panel-muted);
  background: var(--panel);
  color: var(--panel-ink);
  border-radius: var(--r-md);
  overflow: hidden;
}
.panel a { color: inherit; }

/* ----------------------------------------------------------------- 提示 */

.notice {
  padding: var(--s3) var(--s4);
  background: var(--warn-bg);
  color: var(--warn-ink);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
}

.empty {
  padding: var(--s7) var(--s4);
  text-align: center;
  color: var(--muted);
}

.is-none { color: var(--muted); }

/* ------------------------------------------------------------- 最新心得 */

.latest-item {
  display: block;
  padding: var(--s4) var(--s2);
  border-bottom: var(--hair) solid var(--line);
  text-decoration: none;
}
.latest-item:hover { background: var(--surface-2); }

.latest-item .head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  margin-bottom: var(--s2);
}
.latest-item .head .name { font-weight: 600; }
.latest-item .head .teacher { color: var(--muted); font-size: var(--fs-sm); }

.latest-item .excerpt {
  color: var(--ink-2);
  font-size: var(--fs-sm);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ----------------------------------------------------------------- 頁尾 */

.site-footer {
  margin-top: var(--s8);
  border-top: var(--hair) solid var(--line);
  padding-block: var(--s5) var(--s7);
  color: var(--muted);
  font-size: var(--fs-sm);
}
.site-footer p { margin-bottom: var(--s1); }
.site-footer strong { color: var(--ink-2); font-weight: 600; }
.site-footer .disclaimer { margin-top: var(--s3); max-width: 42rem; }

/* ===========================================================================
   階段三：領域頁（儀表）與課程頁（螢光筆）
   =========================================================================== */

/* ------------------------------------------------------------- 頁面標頭 */

.page-head {
  padding-block: var(--s6) var(--s4);
  border-bottom: var(--hair) solid var(--line);
}
.page-head .crumb {
  font-size: var(--fs-sm);
  color: var(--muted);
  margin-bottom: var(--s2);
}
.page-head .crumb a { color: inherit; }
.page-head h1 { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; }
.page-head .sub { color: var(--muted); font-size: var(--fs-sm); font-weight: 400; }

/* 領域頁的標題左邊掛一道該領域的色條，取代舊站的粗黑框。 */
.page-head.is-domain h1 { border-left: 4px solid var(--d); padding-left: var(--s3); }

/* ----------------------------------------------------------- 排序與篩選 */

.controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  align-items: flex-end;
  padding-block: var(--s4);
}

.control { display: flex; flex-direction: column; gap: var(--s1); }
.control > span { font-size: var(--fs-xs); color: var(--muted); }

.control select,
.control input[type="number"] {
  padding: var(--s1) var(--s2);
  background: var(--surface);
  color: var(--ink);
  border: var(--hair) solid var(--line-2);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  min-inline-size: 7rem;
}

.control.is-check { flex-direction: row; align-items: center; gap: var(--s2); }
.control.is-check label { font-size: var(--fs-sm); }

.controls .reset {
  margin-left: auto;
  font-size: var(--fs-sm);
  color: var(--ink-2);
  background: none;
  border: 0;
  padding: var(--s2);
  cursor: pointer;
  text-decoration: underline;
}

.filter-note {
  font-size: var(--fs-sm);
  color: var(--muted);
  padding-bottom: var(--s3);
}

/* --------------------------------------------------------- 儀表：資料表格 */
/* 桌機 ≥900px 才出現。密度高、對齊嚴格，這是掃描任務的主場。 */

.table-wrap { overflow-x: auto; }

table.data {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  white-space: nowrap;
}

table.data caption { text-align: left; padding: var(--s3) var(--s4); color: var(--muted); }

table.data th,
table.data td {
  padding: var(--s2) var(--s3);
  border-bottom: var(--hair) solid var(--panel-line);
  text-align: left;
  vertical-align: middle;
}

table.data thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--panel-2);
  font-weight: 600;
  font-size: var(--fs-xs);
  color: var(--panel-ink);
  padding: 0;
}

/* 排序鈕是真的 <button>，鍵盤可以操作，螢幕閱讀器讀得出來。 */
table.data thead button {
  inline-size: 100%;
  display: flex;
  align-items: center;
  gap: var(--s1);
  padding: var(--s2) var(--s3);
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}
table.data thead button:hover { background: var(--panel); }
table.data thead button .arrow { opacity: 0; font-size: 0.8em; }
table.data th[aria-sort] button .arrow { opacity: 1; }

table.data tbody tr:hover { background: var(--panel-2); }
table.data tbody tr:last-child td { border-bottom: 0; }

table.data .c-code { font-family: var(--mono); color: var(--muted); }
table.data .c-name a { text-decoration: none; font-weight: 600; white-space: normal; }
table.data .c-name a:hover { text-decoration: underline; }
table.data .c-num { text-align: right; font-family: var(--mono); }
table.data .c-meter { inline-size: 8.5rem; }

/* 儀表面板內的次要文字要壓下來，不然每一格都一樣重。 */
.panel .is-none { color: var(--muted); }

.only-wide { display: none; }
.only-narrow { display: block; }
@media (min-width: 900px) {
  .only-wide { display: block; }
  .only-narrow { display: none; }
}

/* ----------------------------------------------------- 螢光筆：課程頁頁首 */

.course-page { background: var(--paper); }

.course-head {
  padding-block: var(--s7) var(--s5);
}

.course-head .code {
  font-family: var(--mono);
  font-size: var(--fs-sm);
  color: var(--muted);
  display: block;
  margin-bottom: var(--s2);
}

.course-head h1 {
  font-size: var(--fs-2xl);
  letter-spacing: -0.02em;
  margin-bottom: var(--s3);
  /* 螢光筆痕靠 .course-name（見上方招牌元件）。 */
  line-height: 1.35;
}

.course-head .meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
  color: var(--ink-2);
}

.course-head .actions { margin-left: auto; display: flex; gap: var(--s3); }

.linkbtn {
  background: none;
  border: 0;
  padding: var(--s1) 0;
  color: var(--ink-2);
  font-size: var(--fs-sm);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.linkbtn[aria-pressed="true"] { color: var(--ink); font-weight: 600; }

/* --------------------------------------------------------------- 統計摘要 */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: var(--s4) var(--s5);
  padding-block: var(--s5);
  border-block: var(--hair) solid var(--line);
}

.stat-label { font-size: var(--fs-xs); color: var(--muted); margin-bottom: var(--s1); }
.stat-value { font-size: var(--fs-lg); font-weight: 600; font-variant-numeric: tabular-nums; }
.stat-value.is-none { font-size: var(--fs-base); font-weight: 400; }
.stat-sample { font-size: var(--fs-xs); color: var(--muted); }

.stat-meters { padding-block: var(--s4); display: grid; gap: var(--s3); }

/* -------------------------------------------------------------- 心得列表 */
/* 沒有卡片，只有髮絲線。留白多、好讀。 */

.reviews { padding-block: var(--s4); }

.review {
  padding-block: var(--s5);
  border-bottom: var(--hair) solid var(--line);
}
.review:last-child { border-bottom: 0; }

.review-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
  margin-bottom: var(--s3);
  font-size: var(--fs-sm);
}

.review-body {
  font-size: var(--fs-md);
  line-height: 1.75;
  max-inline-size: var(--maxw-read);
  overflow-wrap: anywhere;
}

.review-foot {
  margin-top: var(--s3);
  font-size: var(--fs-xs);
  color: var(--muted);
  display: flex;
  gap: var(--s3);
  align-items: center;
}
.review-foot a { color: inherit; }

/* --- 閱讀模式 -------------------------------------------------------------
   規格第五節：襯線字、行高 1.95、字級放大、評分退到側欄。
   只換排版，不動內容，也不重新渲染 —— 切換不會讓讀到一半的位置跑掉。 */

[data-reading="on"] .review-body {
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: var(--lh-read);
}

@media (min-width: 860px) {
  [data-reading="on"] .review {
    display: grid;
    grid-template-columns: 1fr 11rem;
    gap: var(--s5);
    align-items: start;
  }
  [data-reading="on"] .review-body { grid-column: 1; grid-row: 1; }
  [data-reading="on"] .review-foot { grid-column: 1; grid-row: 2; }
  /* 評分退到側欄：縮小、去除橫向排列、不再是進入視線的第一個東西。 */
  [data-reading="on"] .review-meta {
    grid-column: 2;
    grid-row: 1 / span 2;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s2);
    margin-bottom: 0;
    padding-left: var(--s4);
    border-left: var(--hair) solid var(--line);
    font-size: var(--fs-xs);
    color: var(--muted);
  }
}

/* ------------------------------------------------------------- 相關課程 */

.related { padding-block: var(--s5); }
.related h2 { font-size: var(--fs-md); margin-bottom: var(--s3); }

/* --------------------------------------------------------------- 提示條 */

.low-sample {
  display: inline-block;
  font-size: var(--fs-xs);
  color: var(--warn-ink);
  background: var(--warn-bg);
  padding: 0 var(--s2);
  border-radius: var(--r-sm);
}

.copied { font-size: var(--fs-xs); color: var(--muted); }

/* ===========================================================================
   階段四：說明頁、關於頁、外觀切換
   =========================================================================== */

/* --------------------------------------------------------------- 外觀切換 */

.icon-btn {
  position: relative;
  flex: none;
  inline-size: 2rem;
  block-size: 2rem;
  display: grid;
  place-items: center;
  background: none;
  border: var(--hair) solid transparent;
  border-radius: var(--r-sm);
  color: var(--ink-2);
  font-size: var(--fs-md);
  line-height: 1;
  cursor: pointer;
}
.icon-btn:hover { background: var(--surface-2); border-color: var(--line); color: var(--ink); }

/* 觸控裝置把可點範圍撐到 44px，但不改變版面尺寸 ——
   手機頁首只剩 16px 餘裕，真的把按鈕變大會擠到導覽列。 */
.icon-btn::after {
  content: "";
  position: absolute;
  inset: -6px;
}

/* ----------------------------------------------------------------- 內文頁 */
/* 說明與關於用襯線字，行長收窄。這兩頁是拿來讀的，不是拿來掃的。 */

.prose {
  max-inline-size: var(--maxw-read);
  padding-block: var(--s6) var(--s7);
}

.prose h1 { margin-bottom: var(--s5); }

.prose h2 {
  font-size: var(--fs-lg);
  margin-top: var(--s7);
  margin-bottom: var(--s3);
  padding-bottom: var(--s2);
  border-bottom: var(--hair) solid var(--line);
}

.prose h3 { font-size: var(--fs-md); margin-top: var(--s5); margin-bottom: var(--s2); }

.prose p { margin-bottom: var(--s3); color: var(--ink-2); }
.prose p.lede { font-size: var(--fs-md); color: var(--ink); }

.prose ul { margin-bottom: var(--s3); padding-left: var(--s5); list-style: disc; }
.prose ul li { margin-bottom: var(--s2); color: var(--ink-2); }

.prose strong { color: var(--ink); }
.prose a { color: var(--ink); }

.prose code {
  font-family: var(--mono);
  font-size: 0.9em;
  background: var(--surface-2);
  padding: 0 var(--s1);
  border-radius: var(--r-sm);
}

/* --- 欄位說明的示範區塊 --------------------------------------------------
   每一項都拿站上真實的資料當範例，而不是編一個假的。 */

.field {
  padding: var(--s4) 0;
  border-bottom: var(--hair) solid var(--line);
}
.field:last-child { border-bottom: 0; }

.field-demo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  margin-bottom: var(--s3);
  background: var(--surface);
  border-left: 3px solid var(--d);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

.field-demo .from {
  font-size: var(--fs-xs);
  color: var(--muted);
  margin-left: auto;
}

.field dt { font-weight: 600; margin-bottom: var(--s1); }
.field dd { margin: 0; color: var(--ink-2); }

/* 兩欄對照：「—」與「尚無資料」的差別 */
.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--hair);
  background: var(--line);
  border: var(--hair) solid var(--line);
  margin-block: var(--s4);
}
@media (max-width: 560px) { .compare { grid-template-columns: 1fr; } }

.compare > div { background: var(--surface); padding: var(--s4); }
.compare h3 { font-size: var(--fs-sm); margin-top: 0; margin-bottom: var(--s2); }
.compare p { font-size: var(--fs-sm); margin-bottom: 0; }

/* --------------------------------------------------------------- 免責聲明 */

.disclaimer-box {
  margin-top: var(--s6);
  padding: var(--s4);
  background: var(--surface-2);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
}
.disclaimer-box h2 { margin-top: 0; border: 0; padding: 0; font-size: var(--fs-md); }
.disclaimer-box p { margin-bottom: var(--s2); }
.disclaimer-box p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------- 投稿呼籲 */

.cta {
  display: block;
  margin-block: var(--s5);
  padding: var(--s5);
  background: var(--surface);
  border: var(--hair) solid var(--line-2);
  border-radius: var(--r-md);
  text-decoration: none;
}
.cta:hover { background: var(--surface-2); }
.cta strong { display: block; font-size: var(--fs-md); margin-bottom: var(--s1); }
.cta span { color: var(--muted); font-size: var(--fs-sm); }

/* ===========================================================================
   階段六：後台
   =========================================================================== */

.admin { padding-bottom: var(--s8); }

/* ------------------------------------------------------------------ 上鎖畫面 */

.admin-lock {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--s3);
  padding-block: var(--s5);
}
.admin-lock label { font-size: var(--fs-sm); color: var(--muted); width: 100%; }
.admin-lock input {
  flex: 1;
  min-inline-size: 16rem;
  padding: var(--s2) var(--s3);
  background: var(--surface);
  color: var(--ink);
  border: var(--hair) solid var(--line-2);
  border-radius: var(--r-sm);
  font-family: var(--mono);
}

.admin-msg { font-size: var(--fs-sm); color: var(--muted); min-block-size: 1.5em; }
.admin-msg.is-error { color: var(--d-xin); }

.admin-note {
  margin-top: var(--s6);
  padding: var(--s5);
  background: var(--surface);
  border: var(--hair) solid var(--line);
  border-radius: var(--r-md);
  max-inline-size: var(--maxw-read);
}
.admin-note h2 { font-size: var(--fs-md); margin-bottom: var(--s3); }
.admin-note p { color: var(--ink-2); margin-bottom: var(--s3); }
.admin-note ul { padding-left: var(--s5); list-style: disc; }
.admin-note li { color: var(--ink-2); margin-bottom: var(--s2); font-size: var(--fs-sm); }

.admin-note-sm { font-size: var(--fs-sm); color: var(--muted); margin-bottom: var(--s3); }

/* --------------------------------------------------------------------- 按鈕 */

.btn {
  padding: var(--s2) var(--s4);
  background: var(--surface);
  color: var(--ink);
  border: var(--hair) solid var(--line-2);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  cursor: pointer;
}
.btn:hover { background: var(--surface-2); }
.btn:disabled { opacity: 0.55; cursor: default; }
.btn-sm { padding: var(--s1) var(--s3); font-size: var(--fs-xs); }
.btn-primary { background: var(--ink); color: var(--ground); border-color: var(--ink); }
.btn-primary:hover { opacity: 0.88; background: var(--ink); }
.btn-danger { color: var(--d-xin); border-color: var(--d-xin); }
.btn-danger:hover { background: var(--d-xin); color: var(--surface); }

/* ------------------------------------------------------------------- 工具列 */

.admin-bar {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding-block: var(--s3);
}
.admin-countdown { font-size: var(--fs-xs); color: var(--muted); margin-left: auto; }

.admin-toast { font-size: var(--fs-sm); min-block-size: 1.6em; color: var(--muted); }
.admin-toast.is-ok { color: var(--d-tian); }
.admin-toast.is-error { color: var(--d-xin); }

/* --------------------------------------------------------------------- 分頁 */

.admin-tabs {
  display: flex;
  gap: var(--s1);
  border-bottom: var(--hair) solid var(--line);
  margin-bottom: var(--s4);
}
.admin-tab {
  padding: var(--s2) var(--s4);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-size: var(--fs-sm);
  cursor: pointer;
}
.admin-tab:hover { color: var(--ink); }
.admin-tab[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); font-weight: 600; }

/* ------------------------------------------------------------------- 清單 */

.admin-search {
  inline-size: 100%;
  padding: var(--s2) var(--s3);
  margin-bottom: var(--s4);
  background: var(--surface);
  color: var(--ink);
  border: var(--hair) solid var(--line-2);
  border-radius: var(--r-sm);
}

.admin-course { border-bottom: var(--hair) solid var(--line); }
.admin-course > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s3);
  padding: var(--s3) var(--s2);
  cursor: pointer;
  font-size: var(--fs-sm);
}
.admin-course > summary:hover { background: var(--surface-2); }
.admin-course code { font-family: var(--mono); color: var(--muted); }
.admin-course .name { font-weight: 600; }
.admin-course .muted { color: var(--muted); }

.admin-review {
  padding: var(--s4) var(--s2) var(--s4) var(--s5);
  border-top: var(--hair) solid var(--line);
}
.admin-review.is-hidden { opacity: 0.55; }

.admin-review-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
  font-size: var(--fs-xs);
  color: var(--muted);
  margin-bottom: var(--s2);
}
.admin-review-meta code { font-family: var(--mono); }

.admin-flag {
  background: var(--warn-bg);
  color: var(--warn-ink);
  padding: 0 var(--s1);
  border-radius: var(--r-sm);
  font-weight: 600;
}

.admin-review-body {
  font-size: var(--fs-sm);
  color: var(--ink-2);
  max-inline-size: var(--maxw-read);
  margin-bottom: var(--s3);
  overflow-wrap: anywhere;
}

.admin-reasons {
  list-style: disc;
  padding-left: var(--s5);
  margin-bottom: var(--s3);
  font-size: var(--fs-xs);
  color: var(--warn-ink);
}

.admin-actions { display: flex; flex-wrap: wrap; gap: var(--s2); }

/* ------------------------------------------------------------------- 編輯 */

.admin-textarea {
  inline-size: 100%;
  padding: var(--s3);
  background: var(--surface);
  color: var(--ink);
  border: var(--hair) solid var(--line-2);
  border-radius: var(--r-sm);
  font-family: var(--mono);
  font-size: var(--fs-sm);
  line-height: 1.6;
  resize: vertical;
}
.admin-editor { margin-bottom: var(--s3); }

.admin-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--s3);
  margin-block: var(--s3);
}
.admin-field { display: flex; flex-direction: column; gap: var(--s1); }
.admin-field > span { font-size: var(--fs-xs); color: var(--muted); }
.admin-input {
  padding: var(--s2);
  background: var(--surface);
  color: var(--ink);
  border: var(--hair) solid var(--line-2);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
}

.admin-course-edit {
  padding: var(--s4) var(--s2);
  border-bottom: var(--hair) solid var(--line);
  border-left: 3px solid var(--d);
  padding-left: var(--s4);
}

/* ------------------------------------------------------------------- 確認框 */

.admin-confirm-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: var(--s4);
  background: color-mix(in srgb, var(--ink) 45%, transparent);
}

.admin-confirm {
  inline-size: min(32rem, 100%);
  padding: var(--s5);
  background: var(--surface);
  border-radius: var(--r-md);
  box-shadow: 0 12px 40px color-mix(in srgb, var(--ink) 25%, transparent);
}
.admin-confirm h2 { font-size: var(--fs-md); margin-bottom: var(--s3); }
.admin-confirm p { color: var(--ink-2); font-size: var(--fs-sm); margin-bottom: var(--s3); }

.admin-commit {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  padding: var(--s3);
  background: var(--surface-2);
  border-radius: var(--r-sm);
}
.admin-commit span { font-size: var(--fs-xs); color: var(--muted); }
.admin-commit code { font-family: var(--mono); font-size: var(--fs-sm); color: var(--ink); }

.admin-confirm .admin-actions { justify-content: flex-end; margin-top: var(--s4); }