/* 太空職涯學習地圖 — 依 dataviz 參考調色盤（已通過驗證器檢查）。
   2026-08 配色刷新：中性色由暖灰紙感改為「淺色宇宙」冷藍調，呼應
   App icon「軌道極簡」版（淺宇宙藍底＋品牌藍雙層星）；八個層級色
   （--c-l1…l8）為圖譜語意色、已通過對比驗證，不動。 */
:root {
  --fs-scale: 1;    /* 使用者字級倍率（由右上「字級」控制，存於 localStorage） */
  --surface-1: #ffffff;
  --page: #f2f6fd;
  --page-grad: linear-gradient(180deg, #e8f0fd 0px, #ece8f8 320px, #f2f6fd 640px);
  --text-primary: #101426;
  --text-secondary: #4a5570;
  --text-muted: #7c88a6;
  --gridline: #dbe4f5;
  --baseline: #b9c8e4;
  --border: rgba(16, 20, 38, 0.10);
  --accent: #2a78d6;
  --c-l1: #2a78d6; /* 高中學科 blue */
  --c-l2: #1baf7a; /* 大學基本 aqua */
  --c-l3: #eda100; /* 大學進階 yellow */
  --c-l4: #008300; /* 研究所   green */
  --c-l5: #4a3aa7; /* 專業技術 violet */
  --c-l6: #e34948; /* 專業工具 red */
  --c-l7: #e87ba4; /* 太空職業技術 magenta */
  --c-l8: #eb6834; /* 太空職稱 orange */
  --cmap-hl: #0e7490; /* 概念圖上下游高亮 cyan——刻意避開八層與三色分級的色相 */
}
/* 預設一律白底：不再依作業系統的深色偏好自動切換。深色僅在使用者
   透過右上「主題」按鈕手動選擇時套用（見下方 :root[data-theme="dark"]）。 */
:root[data-theme="light"] {
  --surface-1: #ffffff;
  --page: #f2f6fd;
  --page-grad: linear-gradient(180deg, #e8f0fd 0px, #ece8f8 320px, #f2f6fd 640px);
  --text-primary: #101426;
  --text-secondary: #4a5570;
  --text-muted: #7c88a6;
  --gridline: #dbe4f5;
  --baseline: #b9c8e4;
  --border: rgba(16, 20, 38, 0.10);
  --accent: #2a78d6;
  --c-l1: #2a78d6; --c-l2: #1baf7a; --c-l3: #eda100; --c-l4: #008300;
  --c-l5: #4a3aa7; --c-l6: #e34948; --c-l7: #e87ba4; --c-l8: #eb6834;
  --cmap-hl: #0e7490;
}
:root[data-theme="dark"] {
  --surface-1: #171a26;
  --page: #0c0e18;
  --page-grad: linear-gradient(180deg, #0a0d19 0px, #110f1e 320px, #0c0e18 640px);
  --text-primary: #ffffff;
  --text-secondary: #bcc5de;
  --text-muted: #8791ad;
  --gridline: #272c40;
  --baseline: #3c445f;
  --border: rgba(255, 255, 255, 0.10);
  --accent: #3987e5;
  --c-l1: #3987e5; --c-l2: #199e70; --c-l3: #c98500; --c-l4: #008300;
  --c-l5: #9085e9; --c-l6: #e66767; --c-l7: #d55181; --c-l8: #d95926;
  --cmap-hl: #38cbe0;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }  /* hidden 屬性永遠優先於任何 display 樣式 */
/* 無障礙字級：以使用者的瀏覽器預設字級為基準（114.3% ≈ 18.3px）再乘上使用者
   倍率，全站字級改用 rem，因此同時尊重瀏覽器字級設定與本站的字級控制
   （WCAG 2.1 §1.4.4 文字可縮放至 200%）。標準倍率 1 時本文（0.875rem）約 16px，
   即預設也是最小字級；字級控制只往上放大：大約 19px（≈1.2rem）、特大約 22px。 */
html { font-size: calc(114.3% * var(--fs-scale)); }
body {
  margin: 0;
  /* 淺色宇宙底：頂端藍→淡薰衣草紫→640px 內收斂回 --page（呼應 App icon
     的粉彩漸層底），配色活潑但不干擾圖譜閱讀；深色主題同結構、深紫調。 */
  background: var(--page-grad, var(--page));
  color: var(--text-primary);
  /* Noto Sans TC 為主；未載入時依序退到系統中文字體 */
  font-family: "Noto Sans TC", "Noto Sans CJK TC", "Microsoft JhengHei",
    "PingFang TC", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 0.875rem;
  line-height: 1.7;            /* 中文閱讀性：行高加大 */
  letter-spacing: 0.012em;     /* 中文閱讀性：字距微調 */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── Footer 永遠深色（內含白色 NSL 標誌）：以作用域覆蓋整組設計代幣，
      內部控制項自動採用深色樣式 ── */
.app-footer {
  --surface-1: #171a26;
  --page: #0e1120;
  --text-primary: #ffffff;
  --text-secondary: #bcc5de;
  --text-muted: #8791ad;
  --gridline: #272c40;
  --baseline: #454e6b;
  --border: rgba(255, 255, 255, 0.10);
  --accent: #3987e5;
  background: #0e1120;
  color: var(--text-primary);
}

/* ── 頂部工具列（固定；底色隨主題淺／深切換，內部控制項循設計代幣自動對應） ── */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 10px 24px;
  background: var(--page);
  border-bottom: 1px solid var(--gridline);
}
/* 頁首左段（品牌＋搜尋工具）。預設 display: contents——品牌與工具列直接參與
   .topbar 的排列，維持窄幅的分列版面；只有單列的桌機寬度才成為真正的一段
   （見底下「頁首三段」那組規則）。 */
.topbar-left { display: contents; }
.brand { display: flex; align-items: center; gap: 10px; flex: none; }
/* 本站頁首標誌高 25px，寬依標誌實際比例 119:84 換算＝35.42px（等比不變形）。
   高度為各 App 自訂、比例規則共用，詳見 docs/brand.md。 */
.brand-mark {
  height: 25px; width: 35.42px;
  display: grid; place-items: center; flex: none;
}
img.brand-mark { object-fit: contain; }   /* SVG 標誌不因方框變形 */
/* 後台功能頁以 emoji 當標記（非品牌標誌）：方形框 */
span.brand-mark { width: 25px; font-size: 1.1rem; line-height: 1; }
/* 標誌雙版本隨主題切換：淺底＝墨線＋品牌藍；深色主題＝白線＋品牌藍 */
.brand-mark--dark { display: none; }
:root[data-theme="dark"] .brand-mark--light { display: none; }
:root[data-theme="dark"] .brand-mark--dark { display: grid; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
/* 品牌英文字型＝TASA Explorer（臺灣國家太空中心識別字體，OFL；本地自載
   latin 子集 30KB，不外連 CDN——比照 Rocketry Toolchain 的品牌設計）。 */
@font-face {
  font-family: "TASA Explorer";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/TASAExplorer-latin.woff2") format("woff2");
}
.brand-name {
  font-family: "TASA Explorer", system-ui, sans-serif;
  font-weight: 800; font-size: 1rem; letter-spacing: 0.005em; white-space: nowrap;
}
.brand-sub {
  font-size: 0.66rem; color: var(--text-muted); letter-spacing: 0.04em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.topbar-actions { display: flex; gap: 8px; align-items: center; margin-left: auto; flex: none; }

.search-bar input[type="search"] {
  flex: 0 1 240px; min-width: 160px;
  padding: 6px 10px; border: 1px solid var(--baseline); border-radius: 8px;
  background: var(--surface-1); color: var(--text-primary); font: inherit; font-size: 0.8125rem;
}
/* :not(.nsl-acct-btn)：帳號鈕的外觀由跨站共用的 nsl-auth.css 決定（藥丸形），
   本站的通用按鈕樣式不能把它壓成一般方角鈕，否則四個站又長得不一樣。 */
.topbar-actions button:not(.nsl-acct-btn):not(.nsl-acct-item), .btn-row button {
  padding: 6px 10px; border: 1px solid var(--baseline); border-radius: 8px;
  background: var(--surface-1); color: var(--text-primary); font: inherit; font-size: 0.8125rem;
  cursor: pointer;
}
/* 目標職稱下拉：限制寬度，避免自動撐到最長職稱名（過長選項顯示時自動截斷） */
#career-select { flex: 0 1 190px; min-width: 130px; }
.topbar-actions button:hover, .btn-row button:hover { border-color: var(--text-muted); }
.topbar-actions button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
#btn-theme { min-width: 34px; }
/* 字級調整：A− / A+，觸控目標夠大、鍵盤可操作、聚焦可見（見全域 :focus-visible） */
.fontsize-ctrl { display: inline-flex; gap: 4px; }
.fontsize-ctrl button {
  min-width: 34px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.fontsize-ctrl button:disabled { opacity: 0.4; cursor: default; }
/* 螢幕報讀器專用（視覺隱藏但仍可被輔助技術讀取） */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Apple 登入按鈕（依 Apple 樣式規範：黑底白字、圓角、置中） */
.apple-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; max-width: 320px; margin: 10px auto 0;
  padding: 10px 14px; border: none; border-radius: 8px;
  background: #000; color: #fff; font: inherit; font-size: 0.875rem; font-weight: 600;
  cursor: pointer;
}
.apple-btn:hover { background: #1a1a1a; }
:root[data-theme="light"] .apple-btn { border: 1px solid #000; }
/* Discord 登入按鈕（品牌 Blurple；佈局同 .apple-btn） */
.discord-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; max-width: 320px; margin: 10px auto 0;
  padding: 10px 14px; border: none; border-radius: 8px;
  background: #5865F2; color: #fff; font: inherit; font-size: 0.875rem; font-weight: 600;
  cursor: pointer;
}
.discord-btn:hover { background: #4752c4; }
/* 卡片內版本：吃滿卡片寬度、不置中縮限，間距一律交給 .mymap-login 的 grid gap。
   以父層選擇器指定（而非只靠一個 .apple-btn-card 類別）——同權重時後定義者勝，
   單類別寫法會被後面的 .discord-btn 蓋掉，Discord 就會多吃 10px 上邊距，
   三顆按鈕間距因此不一致。 */
.mymap-login .apple-btn,
.mymap-login .discord-btn { max-width: none; margin: 0; }

/* ── 「我的學習地圖」卡片內的登入區（第一層一鍵 Google 登入） ── */
.mymap-login {
  display: grid; gap: 10px; justify-items: stretch; min-width: 0;
  padding: 14px; margin-bottom: 4px;
  border: 1px solid var(--baseline); border-radius: 10px; background: var(--surface-1);
}
.mymap-login.mymap-login-warn { border-color: var(--c-l3); background: rgba(237, 161, 0, 0.08); }
.mymap-login-text { margin: 0; font-size: 0.8125rem; line-height: 1.6; color: var(--text-secondary); }
.mymap-login.mymap-login-warn .mymap-login-text { color: var(--text-primary); font-weight: 700; }
/* Google 按鈕容器：置中並夾住溢出，任何情況都不撐破卡片版面 */
.mymap-google { min-height: 40px; display: flex; justify-content: center; max-width: 100%; overflow: hidden; }
.mymap-login-alt { justify-self: center; font-size: 0.75rem; color: var(--text-muted); }

/* ── 中等寬度（手機橫放／小平板／窄視窗）：頁首整理成乾淨的兩列 ──
   預設版面在 641px～約 1180px 之間會擠成凌亂的三列（品牌、工具列、動作各自換行）。
   這裡明確編排：第一列＝品牌＋右側動作，第二列＝搜尋／目標職稱／類別切換整列。 */
@media (min-width: 641px) and (max-width: 1299px) {
  .topbar { gap: 8px 12px; padding: 8px 18px; }
  .brand { order: 1; flex: 1 1 auto; min-width: 0; }
  .topbar-actions { order: 2; flex: none; }
  .search-bar input[type="search"] { flex: 1 1 240px; }
  #career-select { flex: 0 1 200px; }
  /* 自成一列（flex-basis: 100% 才會斷行）但凹槽只包住三顆按鈕：max-content 收邊、
     左右 auto 邊距置中，外觀與桌機的膠囊一致。 */
  .track-group { order: 4; flex: 1 1 100%; max-width: max-content; margin-inline: auto; }
}
/* 900～1299px：第二列還放得下「搜尋＋職稱下拉」與置中的類別篩選，改用格線排版
   ——flex 換行時無法同時要求「工具列自成一列」與「篩選落在列中央」（前者需要
   flex-basis: 100%，後者需要 0 基準的左右填充，兩者互斥）。格線的兩側欄位寫成
   minmax(0, 1fr) 保證等寬，中欄因此正好落在版面中線上。 */
@media (min-width: 900px) and (max-width: 1299px) {
  .topbar-map {
    display: grid; align-items: center;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-areas: "brand brand actions" ". seg .";
  }
  .topbar-map .brand { grid-area: brand; }
  .topbar-map .topbar-actions { grid-area: actions; justify-self: end; min-width: 0; }
  .topbar-map .track-group { grid-area: seg; }
  /* 這個區間左右欄各只有 (視窗寬 − 中欄) / 2，右欄放不下「搜尋」兩個字
     （實測 1100px 時整列溢出 22px）。搜尋鈕收成純圖示即可讓出空間，
     圖示本身已有 aria-label 與 title，不會因此變得難懂。 */
  .topbar-actions .icon-btn-label { display: none; }
  .topbar-actions .icon-btn { padding: 7px 10px; }
}

/* ── 手機版頁首：整理成乾淨的三列，控制項精簡 ── */
@media (max-width: 640px) {
  .topbar { gap: 8px 10px; padding: 8px 14px; }
  .brand { order: 1; flex: 1 1 auto; min-width: 0; }
  .brand-name { font-size: 0.9375rem; overflow: hidden; text-overflow: ellipsis; }
  .brand-sub { font-size: 0.6rem; }   /* 手機副標更小以維持頁首清爽 */
  /* 右上：字級與主題控制縮小、靠右。允許換行與壓縮，帳號功能已收進帳號選單，
     頁首只剩 A−／A+／◐／帳號鈕，清爽不溢出。 */
  .topbar-actions { order: 2; margin-left: auto; gap: 6px; flex: 1 1 auto; min-width: 0; flex-wrap: wrap; justify-content: flex-end; }
  .fontsize-ctrl button, #btn-theme { padding: 5px 8px; min-width: 30px; font-size: 0.8125rem; }
  .header-login { display: none; }   /* 登出狀態的頁首登入鈕在手機隱藏，改用卡片內 Google 登入 */
  .account-area { min-width: 0; gap: 4px; }
  /* 手機：方案標籤更緊湊，帳號名縮短讓出空間，整列不擠不斷行 */
  .header-plan { padding: 2px 8px; font-size: 0.625rem; }
  .account-area .nsl-acct-label { max-width: 72px; }
  /* 工具列：搜尋＋目標職稱同一列，類別切換獨立一列 → 頁首壓到 3 列 */
  .search-bar input[type="search"] { flex: 1 1 150px; min-width: 120px; }
  .track-group { order: 4; flex: 1 1 100%; max-width: max-content; margin-inline: auto; }
  .track-seg button { white-space: nowrap; padding: 6px 10px; }

  /* 地圖狀態列：檢視文字一列，操作鈕整齊換行（不再擠成圓圈） */
  .map-statusbar { flex-wrap: wrap; }
  .status-left { flex-direction: column; align-items: stretch; gap: 8px; width: 100%; }
  .map-actions { width: 100%; }
  .map-actions .statusbar-btn { flex: 1 1 auto; text-align: center; padding: 7px 10px; }
}

/* 類別切換：凹槽容器 + 藥丸選項，選項間留空隙 */
.track-seg {
  display: inline-flex; gap: 4px; padding: 3px;
  background: var(--gridline); border-radius: 10px;
}
/* 類別按鈕＋「幫我挑目標」同一群組：想換方向的人視線本來就在這一區，
   引導的再入口放這裡比藏在下拉選單裡好找。窄幅時整組一起換行。 */
.track-group { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* 頂欄的搜尋改成圖示鈕；窄幅只留圖示，寬幅才顯示「搜尋」兩字 */
.icon-btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--baseline); background: var(--surface-1); color: var(--text-secondary);
  border-radius: 10px; padding: 7px 12px; font: inherit; font-size: 0.82rem; cursor: pointer;
  min-height: 38px;
}
.icon-btn:hover { border-color: var(--accent); color: var(--accent); }
.icon-btn-label { white-space: nowrap; }
@media (max-width: 520px) { .icon-btn-label { display: none; } .icon-btn { padding: 7px 10px; } }
.btn-guide {
  border: 1px solid var(--accent); background: transparent; color: var(--accent);
  border-radius: 10px; padding: 6px 12px; font: inherit; font-size: 0.8rem;
  font-weight: 600; cursor: pointer; white-space: nowrap; min-height: 34px;
}
.btn-guide:hover { background: var(--accent); color: #fff; }
/* 頁首三段（單列的桌機寬度）：類別篩選置中。
   左段（品牌＋搜尋工具）與右段（字級／主題／帳號）都吃 flex: 1 1 0，剩餘空間
   對半分，中段自然落在版面中線——不必絕對定位，也就不會蓋到任何東西。
   斷點取 1300px：再窄的話左段壓到最小寬度（品牌＋搜尋 160＋職稱下拉 130）
   仍超過可用的一半，中段就會被推歪，因此窄幅改走上面的兩列版面。 */
@media (min-width: 1300px) {
  .topbar-left { display: flex; align-items: center; gap: 16px; min-width: 0; flex: 1 1 0; }
  /* 左段吃緊時（字級放到特大、中欄跟著變寬）讓搜尋與下拉一路縮到 0，
     寧可窄也不要溢出左段而蓋到置中的類別篩選。 */
  .topbar-map .track-group { flex: none; }
  .topbar-map .topbar-actions { flex: 1 1 0; min-width: 0; justify-content: flex-end; margin-left: 0; }
  /* 右段整組靠右：帳號區原本用 margin-left: auto 推到底，在這裡會把字級／主題鈕
     留在右段最左邊、與帳號鈕拉開一大段空白。 */
  .topbar-map .topbar-actions .account-area { margin-left: 0; }
}
.track-seg button {
  padding: 5px 14px; border: none; border-radius: 8px;
  background: transparent; color: var(--text-secondary);
  font: inherit; font-size: 0.8125rem; cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.track-seg button:hover { color: var(--text-primary); }
.track-seg button[aria-pressed="true"] {
  background: var(--accent); color: #fff; font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
@media (prefers-reduced-motion: reduce) { .track-seg button { transition: none; } }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* 主要動作按鈕（每個畫面最多一個視覺主角） */
.btn-primary {
  background: var(--accent); border-color: var(--accent);
  color: #fff; font-weight: 600;
}
.btn-primary:hover { border-color: var(--accent); opacity: 0.92; }

main {
  padding: 16px 24px 24px;
  display: grid; grid-template-columns: minmax(0, 1fr) 360px;
  gap: 16px; align-items: start;
}
main.side-collapsed { grid-template-columns: minmax(0, 1fr) 46px; }
.content-col { min-width: 0; }
.content-col > .card, .content-col > section { margin-bottom: 16px; }
.below-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px; align-items: start;
}
.below-grid .wide { grid-column: 1 / -1; }

/* ── 右側「我的學習地圖」面板（可收合） ── */
.side-panel {
  position: sticky; top: 62px; min-width: 0;
  display: flex; flex-direction: column; gap: 16px;
  max-height: calc(100vh - 78px); overflow-y: auto; scrollbar-width: thin;
}
.side-extra { flex: none; }   /* 圖譜統計／地圖更新紀錄：置於「我的學習地圖」下方 */
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.panel-head h2 { margin: 0; }
#btn-side-toggle {
  border: 1px solid var(--baseline); border-radius: 6px; background: var(--surface-1);
  color: var(--text-muted); cursor: pointer; font-size: 0.8125rem; padding: 2px 8px;
}
#btn-side-toggle:hover { color: var(--text-primary); border-color: var(--text-muted); }
.side-rail {
  display: none; width: 100%; padding: 12px 6px;
  flex-direction: column; align-items: center; gap: 10px;
  cursor: pointer; font: inherit; color: var(--text-secondary);
}
.side-rail:hover { border-color: var(--text-muted); }
.rail-label {
  writing-mode: vertical-rl; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em;
}
.rail-count {
  background: var(--accent); color: #fff; border-radius: 999px;
  font-size: 0.6875rem; padding: 1px 6px; font-variant-numeric: tabular-nums;
}
main.side-collapsed .side-panel > *:not(.side-rail) { display: none; }
main.side-collapsed .side-rail { display: flex; }

@media (max-width: 980px) {
  main { grid-template-columns: 1fr; }
  main.side-collapsed { grid-template-columns: 1fr; }
  .side-panel { position: static; order: -1; max-height: none; overflow: visible; }  /* 手機：面板置頂 */
  .side-rail { flex-direction: row; justify-content: center; padding: 8px; }
  .rail-label { writing-mode: horizontal-tb; }
}

.card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
}
.card h2 { margin: 0 0 10px; font-size: 0.9375rem; font-weight: 700; }

/* 地圖狀態列：目前檢視 + 操作提示 */
.map-statusbar {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  flex-wrap: wrap; margin-bottom: 10px;
  font-size: 0.75rem; color: var(--text-secondary);
}
.status-left { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; min-width: 0; }
#view-status { font-weight: 600; }
.map-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#btn-reset, .statusbar-btn {
  padding: 3px 12px; border: 1px solid var(--baseline); border-radius: 999px;
  background: var(--surface-1); color: var(--text-secondary);
  font: inherit; font-size: 0.75rem; cursor: pointer; white-space: nowrap;
}
#btn-reset:hover, .statusbar-btn:hover { color: var(--text-primary); border-color: var(--text-muted); }
#btn-reset:disabled { opacity: 0.4; cursor: default; }
#btn-reset:disabled:hover { color: var(--text-secondary); border-color: var(--baseline); }
/* 快速加入鈕：以主色標示為主要動作；未選節點時停用 */
.statusbar-add { color: var(--accent); border-color: var(--accent); font-weight: 600; }
.statusbar-add:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.statusbar-add:disabled { opacity: 0.4; cursor: default; }
.statusbar-add:disabled:hover { background: var(--surface-1); color: var(--accent); border-color: var(--accent); }
.hints { color: var(--text-muted); }
kbd {
  font: 11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  border: 1px solid var(--baseline); border-bottom-width: 2px; border-radius: 4px;
  padding: 0 4px; background: var(--surface-1);
}
@media (max-width: 900px) { .hints { display: none; } }

/* 地圖主體：左側「學習階層」總覽 ＋ 右側可橫向捲動的圖譜 */
.map-body { display: flex; gap: 12px; align-items: flex-start; }
.chart-scroll { position: relative; overflow-x: auto; scrollbar-width: thin; flex: 1 1 auto; min-width: 0; cursor: grab; }
/* 平移進行中：整區顯示「抓取中」游標（覆蓋節點等子元素的游標），並停用文字圈選
   （左鍵拖拉不 preventDefault 以保留點擊，會掃選到欄名等文字，這裡壓掉） */
.chart-scroll.panning, .chart-scroll.panning * {
  cursor: grabbing !important;
  -webkit-user-select: none; user-select: none;
}

/* 左側階層總覽面板 */
.layer-index {
  flex: 0 0 auto; width: max-content; max-width: 40vw; box-sizing: border-box;
  border: 1px solid var(--gridline); border-radius: 10px;
  background: var(--surface-1); padding: 8px;
}
.li-head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; flex-wrap: nowrap; }
.li-title { font-weight: 700; font-size: 0.75rem; white-space: nowrap; }
.li-total { font-size: 0.6875rem; color: var(--text-muted); white-space: nowrap; }
/* 收合本面板的箭頭：不要外框、放大加粗更明顯 */
.li-collapse {
  margin-left: auto; padding: 0 2px; line-height: 1;
  border: none; background: transparent; cursor: pointer;
  color: var(--text-secondary); font: inherit; font-size: 1.25rem; font-weight: 700;
}
.li-collapse:hover { color: var(--accent); }
.li-list { display: flex; flex-direction: column; gap: 3px; }
.li-row {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 6px 8px; border: 1px solid transparent; border-radius: 8px;
  background: transparent; color: var(--text-primary); font: inherit; font-size: 0.75rem;
  text-align: left; cursor: pointer;
}
.li-row:hover { background: var(--gridline); }
.li-row.is-collapsed { opacity: 0.5; }
.li-num {
  flex: none; width: 1.4em; text-align: center; font-size: 0.6875rem;
  color: var(--text-muted); font-variant-numeric: tabular-nums;
}
.li-chip { flex: none; width: 10px; height: 10px; border-radius: 3px; }
/* 層名不截斷：預設完整顯示 */
.li-name { flex: 1 1 auto; white-space: nowrap; }
.li-count { flex: none; font-size: 0.6875rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
/* 每層的收合／展開箭頭：放大加粗、非灰階更明顯 */
.li-eye { flex: none; color: var(--text-secondary); font-size: 0.9375rem; font-weight: 700; line-height: 1; }
.li-row:hover .li-eye { color: var(--accent); }
.li-expand { display: none; }
/* 收合後縮成細窄軌，只留可展開的直書標籤 */
.layer-index.collapsed { width: 30px; padding: 6px 2px; }
.layer-index.collapsed .li-head, .layer-index.collapsed .li-list { display: none; }
.layer-index.collapsed .li-expand {
  display: block; width: 100%; padding: 6px 0; writing-mode: vertical-rl;
  border: none; background: transparent; cursor: pointer;
  color: var(--text-secondary); font: inherit; font-size: 0.75rem; font-weight: 600;
}
.layer-index.collapsed .li-expand:hover { color: var(--accent); }
.chart-scroll::-webkit-scrollbar { height: 8px; }
.chart-scroll::-webkit-scrollbar-thumb { background: var(--baseline); border-radius: 999px; }
.caption { margin: 10px 0 0; color: var(--text-muted); font-size: 0.75rem; }

/* 可收合的次要面板（統計、資料來源） */
details.panel summary {
  cursor: pointer; font-weight: 700; font-size: 0.875rem;
  list-style: none; display: flex; align-items: center; gap: 8px;
}
details.panel summary::-webkit-details-marker { display: none; }
details.panel summary::before {
  content: "▸"; color: var(--text-muted); font-size: 0.75rem; transition: transform 0.15s;
}
details.panel[open] summary::before { transform: rotate(90deg); }
details.panel[open] summary { margin-bottom: 10px; }
@media (prefers-reduced-motion: reduce) { details.panel summary::before { transition: none; } }

/* 空狀態提示 */
.empty-tips { margin: 8px 0 0; padding: 0; list-style: none; color: var(--text-secondary); }
.empty-tips li { margin: 5px 0; }
.empty-tips li::before { content: "·"; margin-right: 8px; color: var(--text-muted); }

.details-empty { color: var(--text-muted); }

/* ── SVG 圖譜 ── */
/* 圖譜有上百個 <text>（節點標籤＋狀態符號）。全域的 optimizeLegibility 會逐一做
   連字／字距塑形，在 iOS Safari 上是已知的效能／記憶體負擔；對這些短標籤幾乎無視覺
   差異，故此處改回 optimizeSpeed，降低登入後重繪的主執行緒尖峰。 */
#graph-svg { display: block; text-rendering: optimizeSpeed; }
.layer-header text { font-weight: 700; font-size: 0.8125rem; fill: var(--text-primary); }
.layer-header text.vtitle {
  font-size: 0.75rem;
  paint-order: stroke; stroke: var(--surface-1); stroke-width: 4px; stroke-linejoin: round;
}
.layer-header .layer-count { font-weight: 400; font-size: 0.6875rem; fill: var(--text-muted); }
/* 欄名與色塊也可點擊收合／展開（放大點擊範圍） */
.layer-title, .layer-chip { cursor: pointer; }
.layer-title:hover { fill: var(--accent); }
/* 欄內分組小標題（高中類組／大學學群…），淡色小字當作欄內分組 */
.group-label {
  font-size: 0.6875rem; font-weight: 700; fill: var(--text-muted);
  letter-spacing: 0.02em; cursor: pointer; user-select: none;
}
.group-label:hover { fill: var(--accent); }
.group-label:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.layer-rule { stroke: var(--gridline); stroke-width: 1; }

.edge {
  fill: none;
  stroke: var(--baseline);
  opacity: 0.5;
  transition: opacity 0.15s, stroke 0.15s;
}
.node { cursor: pointer; }
.node .box {
  fill: var(--surface-1);
  stroke: var(--border);
  rx: 6;
  transition: opacity 0.15s;
}
.node text { font-size: 0.75rem; fill: var(--text-primary); pointer-events: none; }
.node:hover .box, .node:focus-visible .box {
  stroke: var(--text-muted); stroke-width: 1.5;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.18));
}
.node.selected .box { stroke: var(--accent); stroke-width: 2; }
/* 圖上的學習狀態符號：形狀表狀態（○想學 ●學習中 ★已完成），顏色沿用階層色（inline） */
.mymap-status { display: none; font-size: 0.8125rem; font-weight: 700; pointer-events: none; }
.node.in-mymap .mymap-status { display: block; }

/* 焦點模式：非相關元素淡出（保持可見以維持整體脈絡）。 */
svg.has-focus .node:not(.in-focus) { opacity: 0.18; }
svg.has-focus .edge:not(.in-focus) { opacity: 0.08; }
svg.has-focus .edge.in-focus { opacity: 0.9; stroke: var(--edge-c, var(--baseline)); }
svg.has-search .node:not(.search-hit) { opacity: 0.25; }
.node.search-hit .box { stroke: var(--accent); stroke-width: 2; }

/* 火箭／衛星類別篩選：另一類別淡出，共同基礎保留（優先於焦點模式的透明度） */
#graph-svg .node.track-out { opacity: 0.1; }
#graph-svg .edge.track-out { opacity: 0.04; }

@media (prefers-reduced-motion: reduce) {
  .edge, .node .box { transition: none; }
}

/* 欄位控制：收合鈕與寬度把手 */
/* 收合／展開箭頭：放大並提高對比，較好辨識與點擊 */
.layer-toggle { cursor: pointer; font-size: 1.4rem; font-weight: 700; fill: var(--text-secondary); }
/* 收合欄整條可點展開的透明命中區（墊在節點刻度下） */
.col-expand-hit { fill: transparent; cursor: pointer; }
.col-expand-hit:hover { fill: color-mix(in srgb, var(--accent) 6%, transparent); }
.layer-toggle:hover { fill: var(--accent); }
.col-handle { fill: transparent; cursor: col-resize; touch-action: none; }
/* 分隔線平時隱藏（美觀）；仍保留調寬功能——滑過／拖曳把手時才顯示強調色線作為回饋，
   把手本身（透明、col-resize 游標＋提示）永遠可拖曳。 */
.col-handle-line {
  stroke: var(--accent); stroke-width: 3; opacity: 0; pointer-events: none;
  transition: opacity 0.15s;
}
.col-handle:hover + .col-handle-line, .col-handle.dragging + .col-handle-line { opacity: 1; }

/* ── 提示框 ── */
.tooltip {
  position: absolute; z-index: 10; max-width: 280px;
  background: var(--surface-1); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  padding: 10px 12px; pointer-events: none; font-size: 0.75rem;
}
.tooltip .tt-name { font-weight: 700; font-size: 0.8125rem; }
.tooltip .tt-layer { color: var(--text-secondary); margin: 2px 0 6px; display: flex; align-items: center; gap: 6px; }
.tooltip .tt-desc { color: var(--text-secondary); }
.tooltip .tt-degree { color: var(--text-muted); margin-top: 6px; }

.chip {
  display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: none;
}

/* ── 關聯資料（地圖下方） ── */
.detail-grid {
  display: grid; grid-template-columns: minmax(260px, 1.4fr) minmax(220px, 1fr) minmax(220px, 1fr);
  gap: 20px; align-items: start;
}
@media (max-width: 1100px) { .detail-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }
.src-type {
  flex: none; font-size: 0.6875rem; color: var(--text-secondary);
  border: 1px solid var(--baseline); border-radius: 999px; padding: 0 8px; white-space: nowrap;
}

/* ── 職缺（市場資料，與職稱分開） ── */
.job-badge { font-size: 0.625rem; fill: var(--text-muted); }
.jobs-block { margin-top: 16px; border-top: 1px solid var(--gridline); padding-top: 4px; }
.job-list { list-style: none; margin: 0; padding: 0; }
.job-list li { margin: 6px 0; }
.job-title { color: var(--accent); text-decoration: none; font-weight: 600; }
.job-title:hover { text-decoration: underline; }
.job-meta { display: block; color: var(--text-muted); font-size: 0.75rem; }
/* ── 側欄內容 ── */
.detail-name { font-weight: 700; font-size: 1rem; margin: 0; }
.detail-en { color: var(--text-muted); font-size: 0.75rem; margin: 0 0 6px; }
.detail-layer { display: flex; align-items: center; gap: 6px; color: var(--text-secondary); margin-bottom: 8px; }
.detail-desc { margin: 0 0 10px; color: var(--text-secondary); }
.rel-title { font-weight: 700; font-size: 0.75rem; color: var(--text-muted); margin: 10px 0 4px; }
.rel-list { list-style: none; margin: 0; padding: 0; }
.rel-list li { margin: 2px 0; }
.rel-list button {
  background: none; border: none; padding: 2px 0; font: inherit; font-size: 0.8125rem;
  color: var(--accent); cursor: pointer; text-align: left;
}
.rel-list button:hover { text-decoration: underline; }
.btn-row { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }

.mymap-layer-title { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 0.75rem; margin: 10px 0 2px; }
.mymap-item { display: flex; align-items: center; gap: 8px; padding: 2px 0; }
.mymap-item .mymap-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 清單列的狀態符號（與圖上一致）：形狀表狀態，顏色沿用階層色（inline） */
.mymap-glyph { flex: none; width: 1.1em; text-align: center; font-weight: 700; }
.mymap-item button.remove {
  background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 0.875rem; padding: 0 4px;
}
.mymap-item button.remove:hover { color: var(--text-primary); }
.status-select {
  padding: 2px 4px; border: 1px solid var(--baseline); border-radius: 6px;
  background: var(--surface-1); color: var(--text-secondary); font-size: 0.75rem;
}
.status-select.st-done { color: #006300; border-color: #006300; }
:root[data-theme="dark"] .status-select.st-done { color: #0ca30c; border-color: #0ca30c; }

/* 我的學習地圖：登入狀態提示 */
.callout { border-radius: 10px; padding: 10px 12px; font-size: 0.8125rem; margin: 4px 0 10px; }
.callout-warn {
  background: rgba(250, 178, 25, 0.14);
  border: 1px solid rgba(250, 178, 25, 0.55);
  color: var(--text-primary);
}
.callout-warn strong { display: block; margin-bottom: 2px; }
.callout-warn .warn-body { color: var(--text-secondary); }
.callout-info {
  border: 1px dashed var(--baseline); color: var(--text-secondary); background: transparent;
}
.btn-block {
  display: block; width: 100%; margin-top: 10px; padding: 8px 12px;
  border-radius: 8px; border: 1px solid var(--accent); font: inherit; font-size: 0.8125rem;
  cursor: pointer; text-align: center;
}
.sync-ok { color: var(--text-secondary); font-size: 0.75rem; margin: 2px 0 8px; }
.sync-ok::before { content: "✓ "; color: #0ca30c; font-weight: 700; }

/* 進度條（對目標職稱路徑的完成度） */
#map-progress { margin: 6px 0 8px; }
.progress-label { font-size: 0.75rem; color: var(--text-secondary); margin-bottom: 4px; }
.progress-track {
  height: 6px; border-radius: 999px; background: var(--gridline); overflow: hidden;
}
.progress-fill { height: 100%; border-radius: 999px; background: var(--accent); }

/* ── 帳號 ── */
.account-area { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
/* 同樣排除帳號鈕：它的外觀由 nsl-auth.css 決定（四站一致的藥丸形） */
.account-area button:not(.nsl-acct-btn):not(.nsl-acct-item) {
  padding: 7px 12px; border: 1px solid var(--baseline); border-radius: 8px;
  background: var(--surface-1); color: var(--text-primary); font: inherit; cursor: pointer;
}
.account-name { color: var(--text-secondary); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 名字旁的設定齒輪（編輯個人資料） */
.account-area button.account-gear {
  padding: 6px 9px; font-size: 0.9375rem; line-height: 1; color: var(--text-secondary);
}
.account-area button.account-gear:hover { color: var(--text-primary); border-color: var(--text-muted); }

/* ── 帳號選單：頁首右上只放一顆帳號鈕，其餘功能收進下拉，避免登入後一整排小按鈕擠版 ── */
.account-area { position: relative; display: flex; align-items: center; gap: 6px; }
/* 帳號右側的方案標籤（免費版／Pro）：與帳號鈕同高垂直置中；免費版可點開升級說明 */
.header-plan {
  border: none; cursor: pointer; flex: none;
  font: inherit; font-size: 0.6875rem; font-weight: 700;
  padding: 3px 10px; line-height: 1.4;
}
.header-plan.plan-free:hover { color: var(--text-primary); box-shadow: inset 0 0 0 1px var(--text-muted); }
.header-plan.plan-pro { cursor: default; }
.header-plan.plan-pro:hover { filter: brightness(1.08); cursor: pointer; }
/* 帳號區塊的外觀來自跨站共用的 nsl-auth.css；這裡只把它的主題變數接到本站
   既有的設計代幣（本站有深淺兩色主題，主站是深色專用）。 */
.account-area .nsl-acct {
  --nsl-acct-fg: var(--text-primary);
  --nsl-acct-fg-muted: var(--text-muted);
  --nsl-acct-line: var(--baseline);
  --nsl-acct-line-strong: var(--text-muted);
  --nsl-acct-panel-bg: var(--surface-1);
  --nsl-acct-hover: var(--gridline);
}
.account-area .nsl-acct-label { color: var(--text-secondary); max-width: 130px; }

/* ── 方案標記（免費/Pro）與付費鎖 ── */
.plan-pill {
  font-size: 0.6875rem; font-weight: 700; border-radius: 999px; padding: 1px 8px; white-space: nowrap;
}
.plan-free { background: var(--gridline); color: var(--text-secondary); }
.plan-pro {
  background: linear-gradient(90deg, #eda100, #eb6834); color: #fff;
}
.lock-badge {
  font-size: 0.625rem; font-weight: 700; border-radius: 999px; padding: 0 6px; margin-left: 4px;
  background: linear-gradient(90deg, #eda100, #eb6834); color: #fff; vertical-align: middle;
}
button.is-locked { color: var(--text-muted); }

/* 升級 Pro 說明 */
.upgrade-head { display: flex; align-items: center; gap: 10px; }
.upgrade-head h2 { margin: 0; font-size: 1.0625rem; }
.upgrade-list { list-style: none; margin: 12px 0; padding: 0; }
.upgrade-list li { display: flex; gap: 10px; padding: 8px 0; border-top: 1px solid var(--gridline); }
.upgrade-list li:first-child { border-top: none; }
.up-ic { font-size: 1.25rem; flex: none; }
.upgrade-list strong { display: block; font-size: 0.875rem; }
.upgrade-list span { color: var(--text-secondary); font-size: 0.75rem; }
.upgrade-soon {
  background: rgba(41, 120, 214, 0.10); border: 1px solid rgba(41, 120, 214, 0.4);
  border-radius: 8px; padding: 8px 10px; font-size: 0.75rem; color: var(--text-secondary);
}
.upgrade-terms { font-size: 0.6875rem; color: var(--text-muted); margin: 8px 0 0; }
.upgrade-terms a { color: var(--accent); }

/* 電子發票選項（升級視窗內） */
.invoice-box {
  margin: 12px 0 0; padding: 12px; border: 1px solid var(--gridline);
  border-radius: 10px; background: var(--surface-1);
}
.invoice-box[hidden] { display: none; }
.invoice-head { font-size: 0.8125rem; font-weight: 700; margin-bottom: 8px; }
.invoice-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.invoice-seg label {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  border: 1px solid var(--baseline); border-radius: 999px; padding: 5px 11px;
  font-size: 0.75rem; color: var(--text-secondary); user-select: none;
}
.invoice-seg label:has(input:checked) {
  border-color: var(--accent); color: var(--text-primary);
  background: rgba(41, 120, 214, 0.10);
}
.invoice-seg input { accent-color: var(--accent); margin: 0; }
.invoice-input {
  display: block; width: 100%; margin-top: 8px; padding: 8px 10px;
  border: 1px solid var(--baseline); border-radius: 8px; font: inherit;
  background: var(--surface-1); color: var(--text-primary);
}
.invoice-input[hidden] { display: none; }
#invoice-error:empty { min-height: 0; }

.modal-backdrop {
  position: fixed; inset: 0; z-index: 100; background: rgba(0, 0, 0, 0.45);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.modal-backdrop[hidden] { display: none; }
.modal { width: 100%; max-width: 360px; }
.modal h2 { margin-top: 0; }
.modal form { display: grid; gap: 10px; }
.modal input, .modal select {
  padding: 8px 10px; border: 1px solid var(--baseline); border-radius: 8px;
  background: var(--surface-1); color: var(--text-primary); font: inherit;
  width: 100%; min-width: 0; box-sizing: border-box;
  /* 統一欄位高度：iOS 關掉 date 原生外觀後其預設行高較小，會比其他輸入框矮；
     以 min-height 讓所有欄位一致（用 rem，字級放大時同步變高）。 */
  min-height: 2.5rem;
}
/* 表單欄位：欄名永遠顯示於輸入框上方（不靠 placeholder），易讀且方便日後擴充。
   min-width:0 讓 grid 子項可縮小，避免寬 intrinsic 的元件（如日期）撐破版面。 */
.pf-field { display: grid; gap: 4px; min-width: 0; }
.pf-field > label {
  font-size: 0.75rem; font-weight: 600; color: var(--text-secondary);
}
/* 日期欄位的日曆圖示在深色主題下維持可見 */
.modal input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0.7; cursor: pointer; }
/* iOS Safari 的 date 輸入預設把值置中，與其他欄位靠左不一致（看起來跑版）。
   強制靠左，讓「出生年月日」與姓名／暱稱等欄位對齊。 */
.modal input[type="date"] { text-align: left; }
.modal input[type="date"]::-webkit-date-and-time-value { text-align: left; }
/* iOS 的原生 date 元件會用自身 intrinsic 寬度、無視 width:100%，在窄視窗會超出版面。
   手機上關掉原生外觀讓它遵守容器寬度（點擊仍會開 iOS 原生日期選單）；桌機保留原生
   外觀與日曆圖示不受影響。 */
/* 只有 iOS Safari 需要特別處理：其原生 date 元件會用自身寬度、無視 width:100% 而
   超出版面。只在 iOS 關掉原生外觀（改遵守容器寬度、以 flex 垂直置中），其他瀏覽器
   （Android Chrome／桌機）維持原生 date 元件與其自帶的 mm/dd/yyyy placeholder，
   以免自訂提示與原生欄位重疊。 */
html.is-ios .modal input[type="date"] {
  -webkit-appearance: none; appearance: none; width: 100%;
  display: flex; align-items: center;
}
/* 關掉原生外觀後，iOS 的空值 date 沒有預設 placeholder（會變成空框，看起來很奇怪）。
   以自訂提示補上：iOS 且未填時顯示「年 / 月 / 日（點選選擇）」，填了值就隱藏。 */
.date-wrap { position: relative; min-width: 0; }
.date-ph {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); font: inherit; pointer-events: none; display: none;
}
html.is-ios #pf-birth.is-empty + .date-ph { display: block; }
/* 自繪的 Google 按鈕永遠可見；官方元件以透明層疊在上面接收點擊 */
.google-btn-wrap { position: relative; height: 40px; margin-bottom: 12px; }
.google-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; height: 40px; border-radius: 8px;
  border: 1px solid #747775; background: #ffffff; color: #1f1f1f;
  font: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer;
}
.google-overlay {
  position: absolute; inset: 0; opacity: 0.0001; overflow: hidden;
  display: flex; justify-content: center; cursor: pointer;
}
.auth-divider {
  display: flex; align-items: center; gap: 10px;
  color: var(--text-muted); font-size: 0.75rem; margin-bottom: 12px;
}
.auth-divider::before, .auth-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--gridline);
}
.modal .btn-row button {
  padding: 7px 14px; border: 1px solid var(--baseline); border-radius: 8px;
  background: var(--surface-1); color: var(--text-primary); font: inherit; cursor: pointer;
}
.modal button[type="submit"] {
  background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600;
}
.auth-error { color: #d03b3b; font-size: 0.8125rem; min-height: 1em; }
.pf-optin {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.8125rem; color: var(--text-secondary); cursor: pointer;
}
.pf-optin input { accent-color: var(--accent); width: auto; flex: none; }
.auth-switch { margin: 0; font-size: 0.8125rem; color: var(--text-secondary); }
.auth-legal { margin-top: 12px; }
.auth-legal a { color: var(--text-secondary); }
.linklike {
  background: none; border: none; padding: 0; font: inherit; color: var(--accent);
  cursor: pointer; text-decoration: underline;
}
/* 刪除帳號：與主要操作明顯區隔的危險區塊 */
.pf-danger { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--gridline); }
.linklike-danger {
  background: none; border: none; padding: 0; font: inherit; font-weight: 600;
  color: #d03b3b; cursor: pointer; text-decoration: underline;
}
.pf-danger-note { margin: 0; font-size: 0.75rem; color: var(--text-muted); }
/* 刪除鈕靠右擺放，遠離左下角的「儲存」，避免誤觸 */
.pf-danger-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pf-danger-row .pf-danger-note { flex: 1 1 150px; }
.pf-danger-row .linklike-danger { flex: none; margin-left: auto; white-space: nowrap; }
/* 輸入確認字串才可執行的防呆區 */
.pf-delete-confirm {
  margin-top: 12px; padding: 12px; border-radius: 8px;
  border: 1px solid rgba(208, 59, 59, 0.5); background: rgba(208, 59, 59, 0.06);
}
.pf-delete-warn { margin: 0 0 8px; font-size: 0.8125rem; color: var(--text-secondary); }
.pf-delete-confirm code {
  background: var(--gridline); color: var(--text-primary); padding: 1px 6px;
  border-radius: 4px; font-weight: 700; letter-spacing: 0.03em;
}
.pf-delete-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }
.pf-delete-actions button:not(.btn-danger) {
  background: var(--surface-1); color: var(--text-primary); border: 1px solid var(--baseline);
  border-radius: 8px; padding: 8px 14px; font: inherit; cursor: pointer;
}
.btn-danger {
  background: #d03b3b; color: #fff; border: 1px solid #d03b3b; border-radius: 8px;
  padding: 8px 14px; font: inherit; font-weight: 600; cursor: pointer;
}
.btn-danger:hover { background: #b83030; }
.btn-danger:disabled { opacity: 0.45; cursor: not-allowed; }
#pf-delete-error:empty { display: none; }
#pf-delete-error { margin-top: 8px; }

.stat-total { display: flex; gap: 18px; margin-bottom: 10px; }
.stat-total .num { font-size: 1.5rem; font-weight: 700; }
.stat-total .lbl { color: var(--text-muted); font-size: 0.75rem; }
.stat-layer { display: flex; align-items: center; gap: 6px; padding: 2px 0; }
.stat-layer .cnt { margin-left: auto; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.stat-hub { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; color: var(--text-secondary); }
.stat-hub .deg { color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* ── 資料來源 ── */
.source-status { color: var(--text-secondary); margin-bottom: 4px; }
.source-item { color: var(--text-secondary); padding: 1px 0; }
.source-origin { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0 0; }
.source-origin .deg { color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.source-meta { color: var(--text-muted); font-size: 0.6875rem; padding-bottom: 2px; }

/* 地圖更新紀錄 */
.update-item { border-top: 1px solid var(--gridline); padding: 10px 0; }
.update-item:first-child { border-top: none; padding-top: 4px; }
.update-head { display: flex; align-items: baseline; gap: 10px; }
.update-date {
  flex: none; font-size: 0.6875rem; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.update-head strong { font-size: 0.8125rem; }
.update-body { color: var(--text-secondary); font-size: 0.8125rem; margin-top: 3px; }
.updates-more { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--gridline); }
.updates-more .linklike { font-size: 0.8125rem; }

/* ── 頁腳（永遠深色，代幣覆蓋見檔案上方） ── */
/* 頁尾：兩排 —— 第一排 logo + 連結，第二排著作權小字 */
.app-footer {
  margin-top: 8px;
  border-top: 1px solid var(--gridline);
  padding: 22px 32px 26px;
}
.footer-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; margin-bottom: 18px;
}
/* 兩個品牌各自成一組：外層 24px、內層 10px（docs/brand.md 的 lockup 間距）。
   外 > 內，才會被讀成「兩組品牌」而不是「一排四個東西」。
   min-width:0 是必要的——flex 子項預設不可縮，窄幅會把整份文件撐寬。 */
.footer-brandcol {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap; min-width: 0;
}
.footer-logo-link { display: inline-flex; }
/* 兩個標誌等高 55.68px。SC 標誌比例 119:84 → 寬 78.88px，等比不變形。 */
.footer-logo { height: 55.68px; width: auto; opacity: 0.95; display: block; }
.footer-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.footer-brand-mark { height: 55.68px; width: 78.88px; object-fit: contain; flex: none; display: block; }
.footer-brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
/* 字級跟著標誌走：標誌 55.68px 時文字塊約 47px，兩者才像一組 lockup
   （文字略小於標誌＝標誌主、文字從；文字若停在原本的 0.9375rem 會顯得過小）。 */
.footer-brand-name {
  font-family: "TASA Explorer", var(--font-sans, system-ui), sans-serif;
  font-weight: 800; font-size: 1.375rem; letter-spacing: 0.01em; color: var(--text-primary);
}
.footer-brand-sub { font-size: 0.875rem; color: var(--text-muted); letter-spacing: .04em; }
.footer-links { display: flex; gap: 22px; flex-wrap: wrap; }
.footer-links a { color: var(--text-secondary); text-decoration: none; font-size: 0.8125rem; }
.footer-links a:hover { color: var(--accent); text-decoration: underline; }
/* 旗下服務：與其他頁尾連結同排、前面帶一個小標籤 */
.footer-sisters { align-items: baseline; margin-top: 10px; }
.footer-sisters-label { color: var(--text-muted); font-size: 0.75rem; font-weight: 700; }
.footer-copy { color: var(--text-muted); font-size: 0.75rem; line-height: 1.75; max-width: 900px; }
@media (max-width: 600px) {
  .footer-top { flex-direction: column; align-items: flex-start; gap: 16px; }
  .footer-brandcol { gap: 16px; }
}

/* ── 跨裝置同步提示（另一部裝置更新了學習地圖）── */
#sync-toast {
  position: fixed;
  left: 50%; bottom: max(18px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 1200;                 /* 高於面板，低於開機畫面(9999) */
  display: flex; align-items: center; gap: 10px;
  max-width: min(92vw, 480px);
  padding: 10px 12px 10px 16px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
  font-size: 0.875rem; color: var(--text-primary);
}
#sync-toast[hidden] { display: none; }
#sync-toast .btn-primary {
  border: 1px solid var(--accent); border-radius: 999px;
  padding: 5px 14px; font-size: 0.8125rem; cursor: pointer;
  white-space: nowrap;
}
#sync-toast #sync-toast-close {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 0.875rem; line-height: 1;
  padding: 6px;
}
#sync-toast #sync-toast-close:hover { color: var(--text-primary); }

/* ── 品牌合作專區（覆蓋層） ── */
:root { --partner-accent: var(--accent); }
.partner-banner {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 24px;
  background: color-mix(in srgb, var(--partner-accent) 12%, var(--surface-1));
  border-bottom: 2px solid var(--partner-accent);
}
.partner-badge { font-size: 1.4rem; flex: none; }
.partner-banner-text { flex: 1 1 240px; min-width: 0; line-height: 1.4; }
.partner-banner-name { font-weight: 700; font-size: 0.9375rem; }
.partner-kind {
  margin-left: 8px; font-size: 0.6875rem; font-weight: 700; color: #fff;
  background: var(--partner-accent); border-radius: 999px; padding: 1px 9px;
  vertical-align: 2px;
}
.partner-banner-tagline { font-size: 0.8125rem; color: var(--text-secondary); }
.partner-site {
  flex: none; font-size: 0.8125rem; font-weight: 600; text-decoration: none;
  color: var(--partner-accent);
}
.partner-site:hover { text-decoration: underline; }
.partner-exit {
  flex: none; padding: 6px 14px; border: 1px solid var(--baseline); border-radius: 8px;
  background: var(--surface-1); color: var(--text-secondary); font: inherit;
  font-size: 0.8125rem; cursor: pointer;
}
.partner-exit:hover { border-color: var(--text-muted); color: var(--text-primary); }

/* 地圖覆蓋層：被合作方內容覆蓋的節點以品牌色框標示，其餘淡出（沿用軌別濾鏡語言）。
   有搜尋/焦點時交由既有樣式主導，覆蓋層只補標示不搶戲。 */
#graph-svg.partner-filtered .node:not(.partner-hit):not(.selected) { opacity: 0.28; }
#graph-svg.partner-filtered .edge { opacity: 0.25; }
#graph-svg .node.partner-hit .box {
  stroke: var(--partner-accent); stroke-width: 2;
}

/* 側欄「合作專區」清單 */
.partner-row {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 8px 10px; margin: 2px 0; border: 1px solid var(--gridline); border-radius: 10px;
  background: var(--surface-1); color: var(--text-primary); font: inherit; cursor: pointer;
}
.partner-row:hover { border-color: var(--partner-accent); }
.partner-row-badge { flex: none; font-size: 1.15rem; }
.partner-row-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.partner-row-name { font-weight: 600; font-size: 0.8125rem; }
.partner-row-meta { font-size: 0.71875rem; color: var(--text-muted); }

/* 節點詳情：合作方課程對映（「在○○怎麼修」） */
.offering-block, .coverage-block, .concepts-block, .curriculum-block { margin-top: 14px; }
/* 108 課綱對應：一列一個學習階段，代碼是連往伺服器渲染反查頁的連結。
   密集但可掃——這一段的用途是「找到自己現在在上的那一課」。 */
.cur-intro { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 6px; }
.cur-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; margin-bottom: 6px; }
.cur-stage {
  flex: none; font-size: 0.6875rem; font-weight: 700; color: var(--text-secondary);
  border: 1px solid var(--baseline); border-radius: 999px; padding: 1px 8px;
}
.cur-code {
  font-size: 0.75rem; color: var(--text-secondary); text-decoration: none;
  border-bottom: 1px dotted var(--baseline); white-space: nowrap;
}
.cur-code:hover { color: var(--accent); border-bottom-color: var(--accent); }
.cur-more { font-size: 0.6875rem; color: var(--accent); text-decoration: none; }
.offering-list { list-style: none; margin: 6px 0 0; padding: 0; }
.offering-item {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 6px 10px; margin: 4px 0; border: 1px solid var(--gridline); border-radius: 8px;
  background: var(--surface-1); font-size: 0.8125rem;
}
.offering-code {
  flex: none; font-weight: 700; font-size: 0.75rem; color: var(--partner-accent);
  border: 1px solid var(--partner-accent); border-radius: 6px; padding: 0 7px;
}
.offering-title { min-width: 0; }
a.offering-title { color: var(--text-primary); }
.offering-level {
  flex: none; font-size: 0.6875rem; color: var(--text-muted);
  border: 1px solid var(--gridline); border-radius: 999px; padding: 0 8px;
}
.offering-note { flex-basis: 100%; font-size: 0.75rem; color: var(--text-muted); }
.offering-disclaimer { margin-top: 6px; font-size: 0.71875rem; color: var(--text-muted); }
.coverage-stats { display: flex; gap: 16px; flex-wrap: wrap; font-size: 0.8125rem; margin: 4px 0 6px; }
.coverage-fill { background: var(--partner-accent); }

/* 連結註解：先備清單的「為什麼需要它」 */
/* 相關證照／標準（技職路線的關鍵資訊；節點屬性而非節點） */
.cred-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; }
.cred-label { font-size: 0.75rem; color: var(--text-muted); margin-right: 2px; }
.cred-chip {
  font-size: 0.75rem; border: 1px solid var(--c-l4); color: var(--c-l4);
  border-radius: 999px; padding: 2px 9px;
}
.cred-issuer { font-style: normal; color: var(--text-muted); margin-left: 5px; font-size: 0.6875rem; }
/* 職稱節點的「完整職稱頁」出口（地圖 → 伺服器渲染內容頁） */
.detail-page-link {
  display: inline-block; margin-top: 10px; font-size: 0.8125rem; font-weight: 600;
  color: var(--accent); text-decoration: none;
}
.detail-page-link:hover { text-decoration: underline; }
.rel-why {
  margin: 1px 0 6px 22px; font-size: 0.75rem; color: var(--text-muted); line-height: 1.55;
  border-left: 2px solid var(--gridline); padding-left: 8px;
}

/* 概念地圖（節點內細部概念與跨節點細關聯） */
.concepts-hint { font-size: 0.75rem; color: var(--text-muted); margin: 2px 0 8px; }
.concept-list { display: grid; gap: 8px; }
.concept-item {
  border: 1px solid var(--gridline); border-radius: 10px; padding: 8px 12px;
  background: var(--surface-1); font-size: 0.8125rem;
}
.concept-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.concept-en { font-size: 0.72rem; color: var(--text-muted); }
.concept-desc { font-size: 0.75rem; color: var(--text-muted); }
.concept-rel { margin-top: 3px; font-size: 0.75rem; color: var(--text-secondary); }
.concept-arrow { color: var(--text-muted); margin-right: 4px; }
.concept-jump {
  border: none; background: transparent; padding: 0; font: inherit; font-size: 0.75rem;
  color: var(--accent); cursor: pointer;
}
.concept-jump:hover { text-decoration: underline; }
.concept-note { color: var(--text-muted); margin-left: 4px; }

/* ── 冒險模式（多鄰國式關卡路徑） ── */
.adventure-btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  width: 100%; margin: 4px 0 8px; padding: 9px 14px; cursor: pointer;
  border: none; border-radius: 10px; font: inherit; font-weight: 700; color: #fff;
  background: linear-gradient(90deg, #58cc02, #2fb45c);
}
.adventure-btn:hover { filter: brightness(1.06); }
.adventure-btn-sub { font-size: 0.71875rem; font-weight: 400; opacity: 0.9; }
.adventure-modal { max-width: 560px; max-height: 86vh; display: flex; flex-direction: column; }
/* 專區課程與科系總覽（重用 offering-* 樣式；標頭沿用 adventure-head） */
.catalog-modal { max-width: 560px; max-height: 86vh; display: flex; flex-direction: column; }
.catalog-body { overflow-y: auto; min-height: 0; }
.catalog-body .rel-title { margin-top: 12px; }
.adventure-head { display: flex; align-items: center; gap: 12px; }
.adventure-head h2 { margin: 0; font-size: 1rem; flex: 1 1 auto; min-width: 0; }
.adventure-xp {
  flex: none; font-weight: 700; font-size: 0.8125rem; color: #b8860b;
  background: rgba(237, 161, 0, 0.14); border-radius: 999px; padding: 3px 12px;
}
#adventure-close, #cmap-close {
  flex: none; border: none; background: transparent; color: var(--text-muted);
  font: inherit; font-size: 1rem; cursor: pointer; padding: 4px 8px; border-radius: 8px;
}
#adventure-close:hover, #cmap-close:hover { background: var(--gridline); color: var(--text-primary); }
.adventure-hint { font-size: 0.75rem; color: var(--text-muted); margin: 6px 0 10px; }
.adventure-path { overflow-y: auto; display: grid; gap: 14px; padding: 2px 2px 8px; }
.adv-unit { border: 1px solid var(--gridline); border-radius: 12px; padding: 10px 12px; }
.adv-unit.unit-done { border-color: #58cc02; background: rgba(88, 204, 2, 0.07); }
.adv-unit-head { display: flex; align-items: center; gap: 8px; font-size: 0.8125rem; }
.adv-unit-name { font-weight: 700; }
.adv-unit-count { margin-left: auto; font-size: 0.75rem; color: var(--text-muted); }
.adv-unit.unit-done .adv-unit-count { color: #3fae00; font-weight: 700; }
.adv-bubbles { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.adv-bubble {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: 96px; padding: 8px 4px 6px; cursor: pointer;
  border: 1px solid var(--gridline); border-radius: 12px;
  background: var(--surface-1); color: var(--text-primary); font: inherit;
}
.adv-bubble:hover { border-color: var(--accent); }
.adv-face {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  font-size: 1.1rem; border: 3px solid var(--gridline); background: var(--page);
}
.adv-bubble.st-none { opacity: 0.72; }
.adv-bubble.st-want .adv-face { border-color: var(--baseline); }
.adv-bubble.st-learning .adv-face { border-color: #eda100; background: rgba(237, 161, 0, 0.12); }
.adv-bubble.st-done .adv-face { border-color: #58cc02; background: rgba(88, 204, 2, 0.16); }
.adv-bubble.st-done { border-color: #58cc02; }
.adv-bubble.adv-covered { box-shadow: 0 0 0 2px var(--partner-accent); }
.adv-name {
  font-size: 0.6875rem; line-height: 1.3; text-align: center;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.adv-boss {
  display: flex; align-items: center; gap: 12px; justify-content: center;
  border: 2px dashed var(--baseline); border-radius: 14px; padding: 14px;
  font-weight: 700; font-size: 0.9375rem;
}
.adv-boss.boss-done { border-style: solid; border-color: #eda100; background: rgba(237, 161, 0, 0.10); }
.adv-boss-icon { font-size: 1.6rem; }

/* ── 徽章（成就）── */
.badge-strip { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 4px; }
.badge-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 999px; font-size: 0.71875rem; font-weight: 600;
  border: 1px solid var(--gridline); color: var(--text-muted); background: var(--surface-1);
  opacity: 0.75;
}
.badge-chip.earned {
  opacity: 1; color: var(--text-primary);
  border-color: #eda100; background: rgba(237, 161, 0, 0.10);
}
.badge-icon { font-size: 0.875rem; }
.badge-progress { color: var(--text-muted); font-weight: 400; font-variant-numeric: tabular-nums; }

#badge-toast {
  position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%);
  z-index: 220;   /* 蓋過對話框（冒險模式中拿到徽章也看得到） */
  display: flex; align-items: center; gap: 10px;
  padding: 12px 22px; border-radius: 999px; font-weight: 700; font-size: 0.9375rem;
  color: #fff; background: linear-gradient(90deg, #eda100, #eb6834);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}
#badge-toast .toast-icon, #badge-toast-icon { font-size: 1.25rem; }
#badge-toast.pop { animation: badge-pop 0.45s cubic-bezier(0.2, 1.6, 0.4, 1); }
@keyframes badge-pop {
  from { transform: translateX(-50%) scale(0.6); opacity: 0; }
  to   { transform: translateX(-50%) scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { #badge-toast.pop { animation: none; } }

/* ── 加入專區（邀請制／分層同意） ── */
.partner-member {
  flex: none; font-size: 0.75rem; font-weight: 700; color: var(--partner-accent);
  border: 1px solid var(--partner-accent); border-radius: 999px; padding: 3px 12px;
  background: color-mix(in srgb, var(--partner-accent) 8%, transparent);
}
.partner-join {
  flex: none; padding: 7px 18px; border: none; border-radius: 8px; cursor: pointer;
  font: inherit; font-weight: 700; font-size: 0.8125rem; color: #fff;
  background: var(--partner-accent);
}
.partner-join:hover { filter: brightness(1.08); }
.join-modal { max-width: 460px; max-height: 88vh; overflow-y: auto; }
.join-head { display: flex; align-items: center; gap: 12px; }
.join-badge { font-size: 2rem; flex: none; }
.join-head-text h2 { margin: 0; font-size: 1.0625rem; }
.join-desc { font-size: 0.8125rem; color: var(--text-secondary); line-height: 1.7; margin: 10px 0; }
.join-perks { list-style: none; margin: 0 0 10px; padding: 0; font-size: 0.8125rem; }
.join-perks li { margin: 4px 0; }
.join-remaining {
  font-size: 0.8125rem; font-weight: 700; color: var(--partner-accent);
  margin: 6px 0;
}
.join-code-row { display: flex; align-items: center; gap: 10px; margin: 10px 0; }
.join-code-row label { font-size: 0.8125rem; font-weight: 600; flex: none; }
.join-code-row input {
  flex: 1 1 auto; min-width: 0; padding: 8px 12px; border: 1px solid var(--baseline);
  border-radius: 8px; background: var(--surface-1); color: var(--text-primary);
  font: inherit; font-size: 0.9375rem; letter-spacing: 0.12em; text-transform: uppercase;
}
.join-consent {
  border: 1px solid var(--gridline); border-radius: 10px; padding: 10px 14px;
  background: var(--surface-1); margin: 10px 0; font-size: 0.78125rem;
}
.join-consent-title { font-weight: 700; margin-bottom: 4px; }
.join-consent-base { margin: 0 0 6px; padding-left: 18px; line-height: 1.8; }
.join-consent-extra {
  margin: 6px 0; padding: 6px 10px; border-left: 3px solid var(--partner-accent);
  color: var(--text-secondary); background: var(--page); border-radius: 0 6px 6px 0;
}
.join-share { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0 2px; cursor: pointer; }
.join-share input { margin-top: 3px; flex: none; }
.join-consent-note { margin: 8px 0 0; color: var(--text-muted); font-size: 0.71875rem; }
.partner-row-joined {
  flex: none; font-size: 0.6875rem; font-weight: 700; color: #2c9440;
  border: 1px solid #2c944055; border-radius: 999px; padding: 1px 8px;
}

/* ── 學習競賽（賽道資格＋作品投稿＋得獎名單） ── */
.comp-modal { max-width: 560px; max-height: 88vh; overflow-y: auto; }
.comp-head { display: flex; align-items: flex-start; gap: 12px; }
.comp-head-badge { font-size: 1.75rem; line-height: 1; }
.comp-head-text { flex: 1 1 auto; min-width: 0; }
.comp-head-text h2 { margin: 0; font-size: 1.0625rem; }
.comp-head #comp-close {
  flex: none; border: none; background: transparent; cursor: pointer;
  color: var(--text-muted); font-size: 1rem; line-height: 1; padding: 4px 8px; border-radius: 8px;
}
.comp-head #comp-close:hover { color: var(--text-primary); background: var(--surface-1); }
.comp-desc { margin: 10px 0 6px; font-size: 0.8125rem; color: var(--text-secondary); }
.comp-prize {
  font-size: 0.8125rem; font-weight: 700; color: var(--accent);
  border: 1px dashed var(--accent); border-radius: 10px; padding: 8px 12px; margin: 8px 0;
}
.comp-rules { margin: 8px 0; font-size: 0.78125rem; }
.comp-rules summary { cursor: pointer; font-weight: 600; color: var(--text-secondary); }
.comp-rules p { margin: 6px 0 0; white-space: pre-wrap; color: var(--text-secondary); }
.comp-section-title { font-size: 0.8125rem; font-weight: 700; margin: 14px 0 6px; }
.comp-track {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  border: 1px solid var(--gridline); border-radius: 10px; padding: 8px 12px; margin: 6px 0;
  background: var(--surface-1); font-size: 0.8125rem;
}
.comp-track-name { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; font-weight: 600; }
.comp-track-kind { font-size: 0.71875rem; font-weight: 400; color: var(--text-muted); }
.comp-track-state { flex: none; font-size: 0.75rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.comp-track-state.ok { color: #2c9440; font-weight: 700; }
.comp-track-go {
  flex: none; padding: 5px 12px; border: 1px solid var(--baseline); border-radius: 999px;
  background: transparent; color: var(--text-primary); font: inherit; font-size: 0.75rem;
  font-weight: 600; cursor: pointer;
}
.comp-track-go:hover { border-color: var(--accent); color: var(--accent); }
.comp-awards { margin: 6px 0; }
.comp-award {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 6px 10px; border-bottom: 1px solid var(--gridline); font-size: 0.8125rem;
}
.comp-award:last-child { border-bottom: none; }
.comp-award-prize { flex: none; font-weight: 700; color: var(--accent); }
.comp-award-who { flex: none; font-weight: 600; }
.comp-award-work { min-width: 0; color: var(--text-secondary); }
.comp-entry { margin-top: 6px; }
.comp-entry-mine {
  border: 1px solid var(--gridline); border-radius: 10px; padding: 10px 14px; margin: 6px 0;
  background: var(--surface-1); font-size: 0.8125rem;
}
.comp-mine-head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-weight: 600; }
.comp-mine-link { display: block; margin: 4px 0; font-size: 0.75rem; word-break: break-all; }
.comp-mine-meta { font-size: 0.71875rem; color: var(--text-muted); }
.comp-entry-hint {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  font-size: 0.78125rem; color: var(--text-secondary); margin: 6px 0;
}
.comp-field { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; font-size: 0.78125rem; font-weight: 600; }
.comp-field input, .comp-field select, .comp-field textarea {
  padding: 8px 12px; border: 1px solid var(--baseline); border-radius: 8px;
  background: var(--surface-1); color: var(--text-primary); font: inherit; font-size: 0.875rem;
  font-weight: 400; min-width: 0; width: 100%; box-sizing: border-box;
}
.comp-field textarea { resize: vertical; line-height: 1.6; }
.comp-agree {
  display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 4px;
  font-size: 0.78125rem; cursor: pointer;
}
/* 勾選框不吃 .modal input 的 width:100%／min-height（否則整排變成一顆大空框，
   說明文字被擠到看不見）；join 視窗的進階分享勾選同病同醫 */
.comp-agree input, .join-share input {
  width: 16px; height: 16px; min-height: 0; margin-top: 3px; flex: none; padding: 0;
}

/* ── 概念全圖（教材可行性視圖）──
   三色分級沿用圖層調色盤：hs＝--c-l1（高中藍）、bridge＝--c-l3（進階黃）、
   uni＝--c-l5（技術紫），深淺主題都由變數自動對應。 */
.cmap-modal { max-width: min(96vw, 1480px); height: 92vh; display: flex; flex-direction: column; }
/* 單列功能區：標題＋分級籤＋視角＋計數靠左，搜尋／篩選／縮放／關閉靠右 */
.cmap-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding-bottom: 8px; padding-right: 36px;   /* 讓出固定右上的 ✕ */
  position: relative; font-size: 0.74rem; color: var(--text-muted);
}
#cmap-close { position: absolute; top: -6px; right: -6px; }   /* 換行時也固定右上（實測踩到） */
.cmap-head h2 { margin: 0; font-size: 0.95rem; flex: none; }
.cmap-filter select {
  min-height: 0; padding: 2px 6px; font-size: 0.74rem;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface-1); color: var(--text-primary);
}
/* 主體雙欄：畫布吃滿剩餘空間，右側為關聯資料欄 */
.cmap-body { flex: 1; display: flex; gap: 10px; min-height: 0; }
.cmap-side {
  flex: none; width: 296px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface-1);
  padding: 12px; font-size: 0.8rem; color: var(--text-secondary);
}
.cmap-key, .cmap-chip { padding: 2px 8px; border-radius: 6px; border: 2px solid; font-weight: 600; }
.cmap-chip { padding: 1px 7px; border-width: 1.5px; font-size: 0.68rem; }
.cmap-key.tier-hs, .cmap-chip.tier-hs { border-color: var(--c-l1); color: var(--c-l1); background: rgba(42, 120, 214, 0.08); }
.cmap-key.tier-bridge, .cmap-chip.tier-bridge { border-color: var(--c-l3); color: #8a6200; background: rgba(237, 161, 0, 0.10); }
.cmap-key.tier-uni, .cmap-chip.tier-uni { border-color: var(--c-l5); color: var(--c-l5); background: rgba(74, 58, 167, 0.08); }
:root[data-theme="dark"] .cmap-key.tier-bridge,
:root[data-theme="dark"] .cmap-chip.tier-bridge { color: var(--c-l3); }
/* 未分級（後台新增未設分級時才出現）＝中性灰，避免與三色分級混淆 */
.cmap-key.tier-none, .cmap-chip.tier-none {
  border-color: var(--baseline); color: var(--text-muted); background: transparent;
}
.cmap-count { color: var(--text-muted); margin-left: 4px; }
/* 視角籤（從節點卡／職稱卡進來時顯示）＝主色 pill，✕ 一鍵回全圖 */
.cmap-focus {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 4px 2px 10px; border-radius: 999px; font-weight: 600;
  color: var(--accent); border: 1.5px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.cmap-focus button {
  border: none; background: none; color: inherit; cursor: pointer;
  padding: 0 4px; font-size: inherit; min-height: 0;
}
.cmap-zoom {
  border: 1px solid var(--border); background: var(--surface-1); border-radius: 6px;
  padding: 2px 8px; cursor: pointer; color: var(--text-secondary);
  font-size: 0.72rem; min-height: 0;
}
.cmap-sizer { overflow: hidden; }
.cmap-filter { display: flex; align-items: center; gap: 6px; color: var(--text-secondary); cursor: pointer; }
.cmap-filter { flex: none; white-space: nowrap; } /* 標籤（軌道/檢視/鏈）不被壓成直排 */
.cmap-canvas {
  flex: 1; overflow: auto; position: relative;
  border: 1px solid var(--border); border-radius: 10px; background: var(--page);
  cursor: grab; user-select: none;   /* 手掌游標＝可按住拖曳平移 */
}
.cmap-canvas.is-panning { cursor: grabbing; }
.cmap-canvas.is-panning .cmap-node { cursor: grabbing; }
.cmap-inner { position: relative; }
.cmap-empty { padding: 32px; color: var(--text-muted); }
.cmap-edges { position: absolute; inset: 0; pointer-events: none; z-index: 0; }   /* 連線永遠墊在卡片後 */
/* pointer-events: stroke → 滑過連線可看 <title> 註解（這條依賴具體用到什麼） */
.cmap-edge { fill: none; stroke: var(--baseline); stroke-width: 1.5; opacity: 0.8; pointer-events: stroke; }
.cmap-edge.lit-up { stroke: var(--cmap-hl); stroke-width: 2.75; opacity: 1; }
.cmap-edge.lit-down { stroke: var(--cmap-hl); stroke-width: 2.75; opacity: 1; stroke-dasharray: 7 4; }
.cmap-edge.dim { opacity: 0.18; }
.cmap-col-label {
  position: absolute; top: 4px; text-align: center; font-size: 0.66rem;
  color: var(--text-muted); letter-spacing: 0.02em; pointer-events: none;
}
.cmap-node {   /* 尺寸與 app.js 的 CMAP_BOX 同步（200×72） */
  position: absolute; width: 200px; height: 72px; z-index: 1;
  border-radius: 10px; border: 2px solid; padding: 6px 10px;
  cursor: pointer; background: var(--surface-1); text-align: left; font: inherit;
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  transition: opacity 0.15s ease, box-shadow 0.15s ease;
}
.cmap-node .cmap-name {
  font-weight: 700; font-size: 0.78rem; color: var(--text-primary); line-height: 1.25;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  padding-right: 56px;   /* 讓出右上角分級標籤：四字標籤在 A+ 字級下實寬約 54px */
}
.cmap-node .cmap-node-sub {
  font-size: 0.64rem; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;   /* 長節點名不溢出盒外 */
}
/* 分級文字標籤：分級不只靠顏色（色覺障礙也讀得到），未分級標灰 */
.cmap-node .cmap-tier-tag {
  position: absolute; top: 3px; right: 4px; font-size: 0.58rem; line-height: 1.2;
  padding: 1px 4px; border-radius: 5px; font-weight: 600;
}
.cmap-tier-tag.tier-hs { color: var(--c-l1); }
.cmap-tier-tag.tier-bridge { color: #8a6200; }
:root[data-theme="dark"] .cmap-tier-tag.tier-bridge { color: var(--c-l3); }
.cmap-tier-tag.tier-uni { color: var(--c-l5); }
.cmap-tier-tag.tier-none { color: var(--text-muted); }
/* 底色用不透光的 color-mix（半透明 rgba 會讓背後的連線透出來，看起來像線壓在卡上） */
.cmap-node.tier-hs { border-color: var(--c-l1); background: color-mix(in srgb, var(--c-l1) 7%, var(--surface-1)); }
.cmap-node.tier-bridge { border-color: var(--c-l3); background: color-mix(in srgb, var(--c-l3) 9%, var(--surface-1)); }
.cmap-node.tier-uni { border-color: var(--c-l5); background: color-mix(in srgb, var(--c-l5) 7%, var(--surface-1)); }
.cmap-node.tier-none { border-color: var(--baseline); }
.cmap-node.dim { opacity: 0.28; }
/* 選取＝主文字色實線外框（與任何分級色都不撞）；上游＝實線環、下游＝虛線環，
   高亮色同連線的 --cmap-hl */
.cmap-node.sel { outline: 3px solid var(--text-primary); outline-offset: 1px; }
.cmap-node.lit-up { outline: 2.5px solid var(--cmap-hl); outline-offset: 1px; }
.cmap-node.lit-down { outline: 2.5px dashed var(--cmap-hl); outline-offset: 1px; }
.modal .cmap-search {   /* 蓋過 .modal input 的 width:100%，讓功能列保持單行 */
  min-height: 0; padding: 3px 8px; font-size: 0.74rem; width: 200px; flex: none;
  margin-left: auto;   /* 搜尋起算＝功能列右半（搜尋／篩選／縮放／關閉） */
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface-1); color: var(--text-primary);
}
/* 標準數學排版：行內公式不得中途換行——斷行只落在中文與公式的邊界。
   超寬公式由 renderMath 的 fit 程序升級為獨立置中一行（教科書 display
   樣式），仍放不下則等比縮字貼合格寬；縮到下限才容許水平捲動。 */
.katex {
  white-space: nowrap;
  /* 容器的斷詞設定（overflow-wrap/word-break 會繼承）不得滲入公式內部 */
  overflow-wrap: normal; word-break: normal;
}
.katex-fit-block {
  display: block; margin: 4px auto; text-align: center;
  max-width: 100%; overflow-x: auto; overflow-y: hidden; padding: 1px 0;
}
/* 作者手寫的 display math（$$…$$／\[…\]）：完整區塊、窄容器內水平捲動 */
.katex-display { max-width: 100%; overflow-x: auto; overflow-y: hidden; margin: 8px 0; }

/* 課綱直連 chip：主色、可點（有底線暗示） */
.cmap-code-chip { text-decoration: none; border-color: var(--accent); color: var(--accent); background: transparent; }
.cmap-code-chip:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
/* 入門徽章與學習狀態（節點盒 sub 行） */
.cmap-start { color: var(--accent); font-size: 0.62rem; font-weight: 800; }
.cmap-status.st-want { color: #7c3aed; }
.cmap-status.st-learning { color: #b45309; }
.cmap-status.st-done { color: #047857; }
/* 直接前置/解鎖列與工具列 */
.cmap-hint-rels { margin-top: 5px; font-size: 0.75rem; color: var(--text-secondary); }
.cmap-hint-rel { margin-top: 2px; }
.cmap-rel-jump {
  border: none; background: none; padding: 0 2px; cursor: pointer;
  color: var(--accent); font-weight: 600; font-size: inherit;
}
.cmap-hint-tools {   /* 右側欄內直排：只看這條路／延伸學習／試一題 各自成行 */
  margin-top: 10px; display: flex; flex-direction: column;
  align-items: flex-start; gap: 8px; font-size: 0.75rem;
}
/* flex-start 讓子項 shrink-to-fit：試一題區塊須改為撐滿欄寬，
   否則 nowrap 公式會把整個 details 撐出側欄（公式適配也會量到假寬度） */
.cmap-hint-tools > .cmap-example { align-self: stretch; min-width: 0; }
/* 長英文術語（Rate-Monotonic 之類）不得撐破格子：允許在詞內斷行 */
.cmap-example, .try-one-q, .cmap-hint-desc { overflow-wrap: break-word; }
.cmap-tool-btn {
  border: 1px solid var(--accent); background: transparent; color: var(--accent);
  border-radius: 6px; padding: 2px 10px; cursor: pointer; font-size: 0.72rem; font-weight: 600; min-height: 0;
}
.cmap-learn { color: var(--text-muted); }
.cmap-learn a { color: var(--accent); text-decoration: none; }
.cmap-learn a:hover { text-decoration: underline; }
.cmap-example { flex-basis: 100%; margin-top: 2px; }
.cmap-example > summary { cursor: pointer; color: var(--accent); font-weight: 600; }
.cmap-example-q { margin: 5px 0 3px; color: var(--text-secondary); }
.cmap-example-ans { margin-left: 12px; }
.cmap-example-ans > summary { cursor: pointer; color: var(--text-muted); }
.cmap-hint-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cmap-hint-head strong { color: var(--text-primary); }
.cmap-hint-en { color: var(--text-muted); font-size: 0.72rem; }
.cmap-hint-node { color: var(--text-muted); }
.cmap-hint-desc { margin-top: 3px; }
.cmap-hint-sub { color: var(--text-muted); }
.cmap-demo {
  border: none; background: none; color: var(--accent); font-weight: 600;
  cursor: pointer; padding: 0 4px; font-size: inherit;
}
.cmap-demo-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
/* 科目目標鏈（🎯）：側欄的「學這科要去哪」 */
.cmap-goal-title { margin-top: 12px; font-weight: 700; color: var(--text-primary); }
.cmap-goal-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 6px; }
/* 主圖節點卡的「通往你的目標」一行（v45） */
.detail-goal {
  margin: 8px 0 2px; font-size: 0.8rem; color: var(--text-secondary);
  padding: 6px 10px; border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 5%, transparent);
  border-radius: 0 8px 8px 0;
}
.detail-goal b { color: var(--accent); }
/* 試一題的概念連結筆記（v45 效用價值介入） */
.try-one-note { margin-top: 8px; padding-top: 7px; border-top: 1px dashed var(--border); }
.try-one-note-label { font-size: 0.72rem; color: var(--text-muted); }
.try-one-note-row { display: flex; align-items: center; gap: 6px; margin-top: 5px; }
.try-one-note-input {
  flex: 1 1 auto; min-width: 0; min-height: 0; padding: 4px 8px; font-size: 0.74rem;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface-1); color: var(--text-primary);
}
.try-one-note-save {
  flex: none; border: 1px solid var(--accent); background: transparent; color: var(--accent);
  border-radius: 6px; padding: 3px 10px; cursor: pointer; font-size: 0.72rem; font-weight: 600; min-height: 0;
}
.try-one-note-done { flex: none; font-size: 0.7rem; color: var(--text-muted); }
/* 免費版試一題卡底部的升級一行（示範學科體驗） */
.try-one-upsell {
  margin-top: 8px; padding-top: 7px; border-top: 1px dashed var(--border);
  font-size: 0.72rem; color: var(--text-muted);
}
.try-one-upsell .linklike { font-size: 0.72rem; }
/* 概念全圖示範模式的升級入口（功能列） */
.cmap-demo-cta {
  flex: none; min-height: 0; border: 1px solid var(--accent); background: transparent;
  color: var(--accent); border-radius: 999px; padding: 2px 10px; cursor: pointer;
  font-size: 0.72rem; font-weight: 700;
}
.cmap-demo-cta:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
/* 升級視窗：規劃中標籤與示範入口 */
.up-planned {
  font-style: normal; font-weight: 600; font-size: 0.68rem; color: var(--text-muted);
  border: 1px solid var(--border); border-radius: 999px; padding: 1px 7px; margin-left: 6px;
  vertical-align: 1px;
}
.upgrade-demo-row { margin: 4px 0 0; font-size: 0.8rem; color: var(--text-secondary); }
.upgrade-demo-row .linklike { font-size: 0.8rem; }
/* 首訪三步引導卡（固定於地圖上緣中央；不擋工具列） */
/* ── 首訪引導：選一條路 → 選一個職位 ─────────────────────────────
   舊版是一張「三步教學卡」；與其教人怎麼點，不如直接幫他點第一下。
   桌機置中對話框、手機從底部推起（單手可及），兩步都能略過。 */
.onboard-modal { max-width: 880px; width: min(94vw, 880px); padding: 0; overflow: hidden; }
.onboard-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 20px 22px 12px;
}
.onboard-head h2 { margin: 0 0 4px; font-size: 1.15rem; }
.onboard-sub { margin: 0; font-size: 0.85rem; color: var(--text-secondary); }
.onboard-step {
  flex: none; font-size: 0.72rem; color: var(--text-muted);
  font-variant-numeric: tabular-nums; padding-top: 4px;
}
/* 內容區自己捲動——職位多的時候（衛星軌道有 21 個）不能讓整頁跟著長 */
.onboard-body { padding: 0 22px; max-height: min(66vh, 560px); overflow-y: auto; }
.onboard-foot {
  display: flex; gap: 10px; align-items: center; justify-content: space-between;
  padding: 14px 22px 18px; border-top: 1px solid var(--gridline); margin-top: 14px;
}
.btn-quiet {
  border: 1px solid var(--baseline); background: transparent; color: var(--text-secondary);
  border-radius: 8px; padding: 8px 14px; font: inherit; font-size: 0.82rem;
  cursor: pointer; min-height: 40px;
}
.btn-quiet:hover { border-color: var(--text-muted); color: var(--text-primary); }
.onboard-foot .btn-quiet:only-child { margin-left: auto; }

/* 第一步：三張軌道卡 */
.onboard-tracks { display: grid; gap: 10px; padding-bottom: 4px; }
.track-choice {
  display: grid; grid-template-columns: 44px 1fr; gap: 2px 14px; align-items: center;
  text-align: left; padding: 14px 16px; border: 1px solid var(--baseline);
  border-radius: 12px; background: var(--surface-1); color: inherit; font: inherit;
  cursor: pointer; min-height: 64px;
}
.track-choice:hover, .track-choice:focus-visible {
  border-color: var(--accent); background: var(--surface-2, rgba(127,127,127,0.05));
}
.track-choice-ic { grid-row: 1 / span 2; font-size: 30px; text-align: center; }
.track-choice strong { font-size: 0.98rem; }
.track-choice span:not(.track-choice-ic) { font-size: 0.8rem; color: var(--text-secondary); }
.track-choice-both .track-choice-ic { font-size: 24px; }

/* 第二步：職位卡格線。auto-fill＋minmax 讓欄數隨寬度自己長，
   窄螢幕 2 欄、桌機 4 欄，不必為每個斷點寫一組規則。 */
/* 一列三張、卡片放大：職位描述要完整顯示（沒看完就要選，等於逼人瞎猜），
   而完整描述有兩到四行，欄位太窄會變成一長條細字。 */
.onboard-jobs { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 12px; padding-bottom: 4px; }
.onboard-jobs .job-group {
  grid-column: 1 / -1; font-size: 0.75rem; color: var(--text-muted);
  margin: 6px 0 -2px; display: flex; align-items: center; gap: 8px;
}
.onboard-jobs .job-group::after {
  content: ""; flex: 1; height: 1px; background: var(--gridline);
}
.job-choice {
  display: flex; flex-direction: column; gap: 0; padding: 0; overflow: hidden;
  border: 1px solid var(--baseline); border-radius: 12px; background: var(--surface-1);
  color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.job-choice:hover, .job-choice:focus-visible {
  border-color: var(--accent); box-shadow: 0 4px 14px rgba(20, 30, 60, 0.10);
}
/* 固定比例＝卡片高度一致，圖片載入前後版面不跳動 */
.job-art { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; display: block; background: var(--gridline); }
.job-art-fallback {
  aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center;
  font-size: 30px; background: var(--gridline);
}
.job-choice-text { padding: 10px 12px 12px; display: grid; gap: 4px; align-content: start; }
.job-choice-text strong { font-size: 0.92rem; line-height: 1.35; }
/* 描述**完整顯示、不截斷**：這是「選目標」的畫面，資訊不足就做不了決定。
   同一列的卡片會被格線拉成等高，短描述的下方留白即可，不需要硬塞滿。 */
.job-choice-text span { font-size: 0.78rem; color: var(--text-secondary); line-height: 1.55; }

@media (max-width: 640px) {
  /* 手機：從底部推起的整頁式面板，拇指構得到底部按鈕 */
  .modal-backdrop:has(.onboard-modal) { align-items: flex-end; padding: 0; }
  .onboard-modal {
    width: 100%; max-width: none; border-radius: 16px 16px 0 0;
    max-height: 92vh; display: flex; flex-direction: column;
  }
  .onboard-head { padding: 16px 16px 10px; }
  .onboard-body { padding: 0 16px; max-height: none; flex: 1 1 auto; }
  .onboard-foot { padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); }
  /* 手機不是把格線縮小，而是換成橫向列表：職位有 21 個，方形卡一屏只看得到
     兩列（要選的東西看不到就選不下去）。縮圖在左、名稱在右，一屏約 5–6 個，
     名稱也不必再被壓成兩行。 */
  .onboard-jobs { grid-template-columns: 1fr; gap: 8px; }
  .job-choice { flex-direction: row; align-items: stretch; }
  .job-art, .job-art-fallback {
    aspect-ratio: 1 / 1; width: 68px; flex: none; font-size: 26px;
  }
  .job-choice-text { padding: 10px 12px; align-content: center; }
  .job-choice-text strong { font-size: 0.9rem; }
  .track-choice { min-height: 60px; }
}
}
.cmap-demo-chip {
  border: 1px solid var(--accent); background: transparent; color: var(--accent);
  border-radius: 999px; padding: 1px 9px; cursor: pointer;
  font-size: 0.7rem; font-weight: 600; min-height: 0;
}
.cmap-demo-chip:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.concepts-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cmap-open {
  border: 1px solid var(--border); background: var(--surface-1); border-radius: 8px;
  padding: 2px 10px; cursor: pointer; color: var(--accent); font-weight: 600; font-size: 0.72rem;
}
.cmap-open:hover { border-color: var(--accent); }
@media (max-width: 900px) {
  /* 窄螢幕：資料欄改落到畫布下方，地圖仍佔大頭 */
  .cmap-body { flex-direction: column; }
  .cmap-side { width: auto; max-height: 38%; }
}
@media (max-width: 640px) {
  .cmap-modal { max-width: 100vw; height: 96dvh; }
}

/* ── 試一題卡（側欄「我的學習地圖」上方）──
   底色刻意與白卡區隔：主色淡染＋主色描邊，一眼看出這是可互動的練習區 */
.try-one-card {
  background: color-mix(in srgb, var(--accent) 9%, var(--surface-1));
  border: 1.5px solid color-mix(in srgb, var(--accent) 35%, transparent);
}
.try-one-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.try-one-head h2 { margin: 0; }
#try-one-reroll {
  border: 1px solid var(--accent); background: var(--surface-1); color: var(--accent);
  border-radius: 999px; padding: 3px 12px; cursor: pointer;
  font-size: 0.74rem; font-weight: 600; min-height: 0; flex: none;
}
#try-one-reroll:hover { background: color-mix(in srgb, var(--accent) 12%, var(--surface-1)); }
.try-one-concept { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; margin-top: 6px; }
.try-one-concept .cmap-rel-jump { font-size: 0.86rem; }
.try-one-node { font-size: 0.72rem; color: var(--text-muted); }
.try-one-q { margin: 7px 0 5px; font-size: 0.82rem; line-height: 1.55; color: var(--text-primary); }
.try-one-teaser { margin: 6px 0 9px; font-size: 0.8rem; color: var(--text-secondary); }
.try-one-cta { width: 100%; }

/* ── 關聯資料的「往下讀」引導 ──
   滑入動畫＝「下面有東西更新了」的訊號；提示籤浮在畫面底部、點了才捲動。
   動畫皆包在 no-preference 內，尊重減少動態偏好。 */
@media (prefers-reduced-motion: no-preference) {
  .details-enter { animation: details-in 0.4s ease; }
  @keyframes details-in {
    from { opacity: 0.3; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .details-peek { animation: peek-in 0.3s ease; }
  @keyframes peek-in {
    from { opacity: 0; transform: translate(-50%, 10px); }
    to { opacity: 1; transform: translate(-50%, 0); }
  }
}
.details-peek {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  z-index: 60; border: 1.5px solid var(--accent); border-radius: 999px;
  background: var(--surface-1); color: var(--accent);
  padding: 7px 16px; font-size: 0.8rem; font-weight: 600; cursor: pointer;
  box-shadow: 0 4px 16px rgba(16, 20, 38, 0.18);
}
.details-peek:hover { background: color-mix(in srgb, var(--accent) 10%, var(--surface-1)); }
.details-peek b { font-weight: 700; }

/* 狀態列：選擇項目色塊（依節點層級著色）＋學科學習細節地圖入口（Pro） */
.focus-chip {
  display: inline-flex; align-items: center; max-width: 180px;
  padding: 2px 10px; border-radius: 999px; font-weight: 700; font-size: 0.74rem;
  color: var(--chip-c, var(--accent));
  background: color-mix(in srgb, var(--chip-c, var(--accent)) 15%, transparent);
  border: 1.5px solid var(--chip-c, var(--accent));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.statusbar-cmap { color: var(--accent); border-color: var(--accent); font-weight: 600; }
.statusbar-cmap.is-locked { color: var(--text-muted); border-color: var(--border); }
.statusbar-cmap.is-locked::before { content: "🔒 "; }

/* ── 公開分享連結（選擇加入；預設匿名） ── */
.share-box {
  margin-top: 10px; padding: 12px; border: 1px solid var(--baseline);
  border-radius: 10px; background: var(--surface-1);
}
.share-row { display: flex; gap: 6px; }
.share-row input {
  flex: 1 1 auto; min-width: 0; padding: 6px 9px; font-size: 0.8125rem;
  border: 1px solid var(--baseline); border-radius: 8px;
  background: var(--page); color: var(--text-secondary);
}
.share-row button {
  flex: none; padding: 6px 12px; font: inherit; font-size: 0.8125rem;
  border: 1px solid var(--baseline); border-radius: 8px;
  background: var(--surface-1); color: var(--text-primary); cursor: pointer;
}
.share-opt {
  display: flex; align-items: flex-start; gap: 6px; margin-top: 10px;
  font-size: 0.75rem; color: var(--text-secondary); line-height: 1.6; cursor: pointer;
}
.share-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.share-actions .linklike { font-size: 0.75rem; }
.share-note { margin: 8px 0 0; font-size: 0.6875rem; color: var(--text-muted); line-height: 1.7; }


/* ── 全螢幕搜尋器 ──────────────────────────────────────────────
   從畫面上方覆蓋整片：搜尋當下就只做這件事，不必和地圖搶注意力。
   桌機把面板往上放（視線落點較高、也讓結果列表有空間往下長）。 */
.search-overlay {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(16, 22, 40, 0.45); backdrop-filter: blur(2px);
  display: flex; justify-content: center; align-items: flex-start;
  padding: max(6vh, 24px) 16px 24px;
}
.search-overlay[hidden] { display: none; }
.search-panel {
  width: min(720px, 100%); max-height: 84vh; display: flex; flex-direction: column;
  background: var(--surface-1); border: 1px solid var(--baseline); border-radius: 16px;
  box-shadow: 0 24px 60px rgba(16, 22, 40, 0.28); overflow: hidden;
}
.search-bar {
  display: flex; align-items: center; gap: 10px; padding: 14px 16px;
  border-bottom: 1px solid var(--gridline); color: var(--text-muted);
}
.search-bar input {
  flex: 1 1 auto; min-width: 0; border: 0; background: none; color: var(--text-primary);
  font: inherit; font-size: 1.05rem; padding: 4px 0;
}
.search-bar input:focus { outline: none; }
.search-bar input::placeholder { color: var(--text-muted); }
.search-results { overflow-y: auto; padding: 8px; display: grid; gap: 2px; }
.search-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; text-align: left; border: 0; background: none; color: inherit; font: inherit;
  border-radius: 10px; padding: 10px 12px; cursor: pointer; min-height: 44px;
}
.search-row:hover, .search-row.is-active { background: var(--gridline); }
.search-row-main { display: grid; gap: 1px; min-width: 0; }
.search-row-main strong { font-size: 0.92rem; }
.search-row-en { font-size: 0.72rem; color: var(--text-muted); }
.search-row-meta { display: flex; gap: 6px; flex: none; }
.search-chip {
  font-size: 0.7rem; color: var(--text-muted); border: 1px solid var(--baseline);
  border-radius: 999px; padding: 2px 8px; white-space: nowrap;
}
.search-empty { padding: 20px 14px; color: var(--text-secondary); font-size: 0.85rem; margin: 0; }
.search-suggest { padding: 10px 12px 14px; display: grid; gap: 6px; }
.search-suggest-title {
  margin: 6px 0 0; font-size: 0.72rem; color: var(--text-muted); letter-spacing: 0.04em;
}
.search-hints { margin: 0; padding-left: 18px; display: grid; gap: 3px;
  font-size: 0.82rem; color: var(--text-secondary); }
.search-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.search-quick-chip {
  border: 1px solid var(--baseline); background: transparent; color: var(--text-primary);
  border-radius: 999px; padding: 7px 14px; font: inherit; font-size: 0.8rem; cursor: pointer;
  min-height: 36px;
}
.search-quick-chip:hover { border-color: var(--accent); color: var(--accent); }
.search-quick-guide { justify-self: start; margin-top: 4px; border-color: var(--accent); color: var(--accent); }

@media (max-width: 640px) {
  /* 手機：真正的全螢幕——鍵盤一叫出來，可用高度本來就只剩一半 */
  .search-overlay { padding: 0; align-items: stretch; }
  .search-panel { max-height: none; height: 100%; border-radius: 0; border: 0; }
  .search-bar { padding: 12px 14px calc(12px); }
  .search-bar input { font-size: 1rem; }
  .search-results { padding: 6px 6px calc(12px + env(safe-area-inset-bottom)); }
}