/* ==========================================================================
   UI Template v2  —  玻璃風樣式模板
   淺色 / 深色 + 10 種配色 + 6 種特殊風格（共 18 個 data-theme）

   來源：水影片 dist-color、GitHub Star 儀表板 index.html、技術導覽站 shared.css
   原則：元件只讀 token（CSS 變數），不認得主題名稱。
         新增主題只要新增一個 [data-theme="xxx"] 區塊，不用改任何元件規則。

   目錄
     1. 預設 token（= 玻璃淺色）與 token 說明
     2. 玻璃深色（含「沒存過偏好、跟隨系統」）
     3. 經典家族的共用對應（classic-light / classic-dark / orbital / quantum / monolith / cyber）
     4. 經典與特殊風格的色彩 token
     5. 十種配色
     6. 配色的補充 token
     7. Base：reset、字體、捲軸、View Transitions
     8. Header 與主題切換器、配色面板
     9. Layout：側欄、主面板、手機抽屜
    10. 元件：按鈕、輸入、膠囊、徽章、卡片、表格、程式碼、提示框、Toast
    11. 首頁 Hero 與 Footer
    12. 樣式專屬效果（orbital / quantum / monolith / cyber）
    13. 擴充元件（v1.2、muse）：tag、chip、marquee、list-row、qitem、player-wrap、mini-switch、tip、dialog
    14. RWD、降級、減少動態
   ========================================================================== */


/* ==========================================================================
   1. 預設 token（= 玻璃淺色）
   用 :where() 讓特異度為 0。這樣各主題區塊（特異度 0,1,0）一定可以覆蓋預設值，
   不受檔案順序影響。

   token 分組：
   色彩      --bg --bg2 --bg3 --text --text2 --text3 --border --brand --brand-hover --brand-bg
             --code-bg --code-text --ok --warn --danger --on-brand
   玻璃材質  --g-blobs --g-panel --g-article --g-drawer --g-strong --g-inset --g-edge --g-filter
   形狀      --radius（基準）--r-panel --r-side --r-card --r-ctl --r-code --r-pill
   版面      --float --panel-shadow --side-bg --side-edge --main-bg --pop-bg --nav-edge-w
   切換器    --sw-*
   裝飾      --accent-grad --title-grad --head-grad --nav-grad --active-bg --active-ring
             --line --line-w --glow --th-bg --icon-bg --icon-fg（配色主題會覆蓋這些）
   ========================================================================== */
:where(:root) {
  --bg: #eef1f8; --bg2: rgba(120, 120, 128, 0.08); --bg3: rgba(120, 120, 128, 0.14);
  --text: #1d1d1f; --text2: #5f5f66; --text3: #86868b;
  --border: rgba(0, 0, 0, 0.08); --brand: #0071e3; --brand-hover: #0077ed; --brand-bg: rgba(0, 113, 227, 0.12);
  --code-bg: #f4f6fb; --code-text: #1d1d1f;
  --shadow: 0 8px 32px rgba(31, 45, 90, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 0 0 1px rgba(255, 255, 255, 0.45);
  --radius: 10px;
  /* 玻璃材質 token（玻璃與配色主題使用；經典主題在第 3 節改成平面色） */
  --g-blobs: radial-gradient(60vmax 50vmax at 8% -8%, rgba(0, 113, 227, 0.3), transparent 62%), radial-gradient(55vmax 45vmax at 98% 8%, rgba(160, 90, 255, 0.26), transparent 62%), radial-gradient(65vmax 50vmax at 65% 112%, rgba(255, 130, 170, 0.24), transparent 62%);
  --g-panel: rgba(255, 255, 255, 0.55); --g-article: rgba(255, 255, 255, 0.76);
  --g-drawer: rgba(255, 255, 255, 0.86); --g-strong: rgba(255, 255, 255, 0.9);
  --g-inset: rgba(120, 120, 128, 0.12); --g-edge: rgba(255, 255, 255, 0.4);
  --g-filter: saturate(180%) blur(28px);
  color-scheme: light;
  /* 字體：系統字體堆疊，不依賴 Google Fonts */
  --font-main: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro TC", "PingFang TC", "Helvetica Neue", "Microsoft JhengHei", "Segoe UI", sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro TC", "PingFang TC", "Helvetica Neue", "Microsoft JhengHei", "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --ls: -0.01em;

  /* 尺寸 */
  --header-h: 60px; --max-w: 1400px; --side-w: 270px;

  /* 狀態色（淺色版；深色主題在第 2、6 節覆蓋） */
  --ok: #1a7f37; --warn: #bf8700; --danger: #cf222e;
  --toast-bg: rgba(29, 29, 31, 0.84);
  --hover: color-mix(in srgb, var(--text) 9%, transparent);

  /* 形狀：玻璃風用大圓角與膠囊 */
  --r-panel: 20px; --r-side: 16px; --r-card: 14px; --r-ctl: 10px; --r-code: 12px; --r-pill: 980px;

  /* 版面：玻璃風的側欄與主面板是浮動面板 */
  --float: 18px;
  --panel-shadow: var(--shadow);
  --side-bg: var(--g-panel); --side-edge: none; --main-bg: var(--g-article);
  --pop-bg: var(--g-strong); --nav-edge-w: 0px;
  --g-blobs-size: auto;

  /* 主題切換器 */
  --sw-bg: var(--g-inset); --sw-gap: 2px; --sw-pad: 3px; --sw-line: transparent; --sw-hover-line: transparent;
  --sw-active-bg: var(--g-strong); --sw-active-fg: var(--brand); --sw-active-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);

  /* 裝飾：預設值讓元件在一般主題看起來是單色；配色主題覆蓋成漸層 */
  --on-brand: #ffffff; --on-grad: var(--on-brand);
  --accent-grad: var(--brand);
  --title-grad: linear-gradient(var(--brand), var(--brand));
  --head-grad: linear-gradient(var(--text), var(--text));
  --nav-grad: var(--g-panel);
  --active-bg: var(--brand-bg); --active-ring: 0 0 0 0 transparent;
  --line: linear-gradient(var(--border), var(--border)); --line-w: 1px;
  --glow: 0 0 0 0 transparent;
  --th-bg: var(--bg2); --icon-bg: var(--brand-bg); --icon-fg: var(--brand);
}


/* ==========================================================================
   2. 玻璃深色
   沒存過偏好時不設定 data-theme，由 prefers-color-scheme 決定。
   同一組 token 寫兩次：一次給「跟隨系統」，一次給明確選 dark（玻璃深色）。
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #07080d; --bg2: rgba(255, 255, 255, 0.06); --bg3: rgba(255, 255, 255, 0.1);
    --text: #f5f5f7; --text2: #9a9aa1; --text3: #85858d;
    --border: rgba(255, 255, 255, 0.12); --brand: #2997ff; --brand-hover: #4aa8ff; --brand-bg: rgba(41, 151, 255, 0.18);
    --code-bg: #0f1219; --code-text: #f5f5f7;
    --shadow: 0 8px 32px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    --radius: 10px;
    --g-blobs: radial-gradient(60vmax 50vmax at 8% -8%, rgba(41, 151, 255, 0.32), transparent 62%), radial-gradient(55vmax 45vmax at 98% 8%, rgba(150, 90, 255, 0.34), transparent 62%), radial-gradient(65vmax 50vmax at 65% 112%, rgba(255, 69, 120, 0.2), transparent 62%);
    --g-panel: rgba(38, 40, 50, 0.5); --g-article: rgba(30, 32, 42, 0.74);
    --g-drawer: rgba(28, 30, 40, 0.88); --g-strong: rgba(66, 68, 80, 0.88);
    --g-inset: rgba(255, 255, 255, 0.08); --g-edge: rgba(255, 255, 255, 0.1);
    --g-filter: saturate(180%) blur(28px);
    color-scheme: dark;
    --ok: #3fb950; --warn: #d4a72c; --danger: #f85149;
  }
}
[data-theme="light"] { color-scheme: light; }
[data-theme="dark"] {
  --bg: #07080d; --bg2: rgba(255, 255, 255, 0.06); --bg3: rgba(255, 255, 255, 0.1);
  --text: #f5f5f7; --text2: #9a9aa1; --text3: #85858d;
  --border: rgba(255, 255, 255, 0.12); --brand: #2997ff; --brand-hover: #4aa8ff; --brand-bg: rgba(41, 151, 255, 0.18);
  --code-bg: #0f1219; --code-text: #f5f5f7;
  --shadow: 0 8px 32px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  --radius: 10px;
  --g-blobs: radial-gradient(60vmax 50vmax at 8% -8%, rgba(41, 151, 255, 0.32), transparent 62%), radial-gradient(55vmax 45vmax at 98% 8%, rgba(150, 90, 255, 0.34), transparent 62%), radial-gradient(65vmax 50vmax at 65% 112%, rgba(255, 69, 120, 0.2), transparent 62%);
  --g-panel: rgba(38, 40, 50, 0.5); --g-article: rgba(30, 32, 42, 0.74);
  --g-drawer: rgba(28, 30, 40, 0.88); --g-strong: rgba(66, 68, 80, 0.88);
  --g-inset: rgba(255, 255, 255, 0.08); --g-edge: rgba(255, 255, 255, 0.1);
  --g-filter: saturate(180%) blur(28px);
  color-scheme: dark;
  --ok: #3fb950; --warn: #d4a72c; --danger: #f85149;
}


/* ==========================================================================
   3. 經典家族的共用對應
   經典樣式沒有玻璃材質。這一組把「玻璃 token」對應到平面色，
   元件規則因此不用分辨主題。新增經典樣式時，只要把 id 加進這個清單一次。
   ========================================================================== */
:where([data-theme="classic-light"], [data-theme="classic-dark"], [data-theme="orbital"], [data-theme="quantum"], [data-theme="monolith"], [data-theme="cyber"]) {
  --r-panel: var(--radius); --r-side: var(--radius); --r-card: var(--radius);
  --r-ctl: var(--radius); --r-code: var(--radius); --r-pill: var(--radius);
  --float: 0px; --panel-shadow: none;
  --side-bg: var(--bg); --side-edge: 1px solid var(--border); --main-bg: transparent;
  --pop-bg: var(--bg); --nav-edge-w: 2px; --ls: 0em;
  --g-blobs: none; --g-panel: var(--bg2); --g-article: transparent; --g-drawer: var(--bg);
  --g-strong: var(--bg3); --g-inset: var(--bg3); --g-edge: transparent; --g-filter: none;
  --on-brand: var(--bg);
  --sw-bg: transparent; --sw-gap: 6px; --sw-pad: 0px; --sw-line: var(--border); --sw-hover-line: var(--brand);
  --sw-active-bg: var(--brand); --sw-active-fg: var(--on-brand); --sw-active-shadow: none;
}


/* ==========================================================================
   4. 經典與特殊風格的色彩 token
   [1] light（玻璃淺色）、[2] dark（玻璃深色）：見第 1、2 節
   [3] classic-light、[4] classic-dark、[5] orbital、[6] quantum、[7] monolith、[8] cyber
   ========================================================================== */
/* [3] 經典淺色 Classic Light */
[data-theme="classic-light"] {
--bg: #ffffff; --bg2: #f6f8fa; --bg3: #eef1f5;
--text: #1f2328; --text2: #59636e; --text3: #8b949e;
--border: #d0d7de; --brand: #0969da; --brand-hover: #0550ae; --brand-bg: #ddf4ff;
--code-bg: #f6f8fa; --code-text: #1f2328; --shadow: 0 1px 3px rgba(0,0,0,0.05);
--radius: 6px; color-scheme: light;
}
/* [4] 經典深色 Classic Dark */
[data-theme="classic-dark"] {
--bg: #0d1117; --bg2: #161b22; --bg3: #21262d;
--text: #e6edf3; --text2: #8b949e; --text3: #6e7681;
--border: #30363d; --brand: #2f81f7; --brand-hover: #58a6ff; --brand-bg: #1c2b3f;
--code-bg: #161b22; --code-text: #e6edf3; --shadow: 0 1px 3px rgba(0,0,0,0.3);
--radius: 6px; color-scheme: dark;
}
/* [5] Orbital 深空終端 */
[data-theme="orbital"] {
--bg: #030508; --bg2: #0a0f1a; --bg3: #111827;
--text: #e2e8f0; --text2: #94a3b8; --text3: #64748b;
--border: #1e293b; --brand: #38bdf8; --brand-hover: #7dd3fc; --brand-bg: rgba(56, 189, 248, 0.1);
--code-bg: #0f172a; --code-text: #38bdf8;
--shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5); --radius: 4px;
}
/* [6] Quantum 量子全息 */
[data-theme="quantum"] {
--bg: #090514; --bg2: rgba(255, 255, 255, 0.03); --bg3: rgba(255, 255, 255, 0.08);
--text: #f8fafc; --text2: #cbd5e1; --text3: #94a3b8;
--border: rgba(255, 255, 255, 0.08); --brand: #a855f7; --brand-hover: #c084fc; --brand-bg: rgba(168, 85, 247, 0.15);
--code-bg: rgba(0, 0, 0, 0.3); --code-text: #e879f9;
--shadow: 0 8px 32px rgba(168, 85, 247, 0.15); --radius: 16px;
}
/* [7] Monolith 巨物檔案 */
[data-theme="monolith"] {
--bg: #121212; --bg2: #1a1a1a; --bg3: #242424;
--text: #ffffff; --text2: #a3a3a3; --text3: #737373;
--border: #333333; --brand: #ef4444; --brand-hover: #f87171; --brand-bg: rgba(239, 68, 68, 0.1);
--code-bg: #0a0a0a; --code-text: #facc15;
--shadow: none; --radius: 0px;
}
/* [8] Cyber 賽博科技 */
[data-theme="cyber"] {
--bg: #050811; --bg2: #0b1122; --bg3: #121b34;
--text: #c5d6e6; --text2: #708aa4; --text3: #42556a;
--border: #1a2f4c; --brand: #00f0ff; --brand-hover: #66f5ff; --brand-bg: rgba(0, 240, 255, 0.12);
--code-bg: #02050c; --code-text: #00f0ff;
--shadow: 0 0 15px rgba(0, 240, 255, 0.3); --radius: 2px;
}


/* ==========================================================================
   5. 十種配色
   配色主題用玻璃樣式的形狀，只換色彩與漸層。
   新增配色：複製一個區塊、改 token，再到 JS / TS 的 PALETTES 加一筆。
   --on-brand：放在 --brand 底色上的文字色
   --on-grad ：放在 --accent-grad 漸層上的文字色
   ========================================================================== */
[data-theme="candy"] {
--bg: #f6ffe6;
--bg2: rgba(59, 42, 42, 0.06);
--bg3: rgba(59, 42, 42, 0.11);
--text: #3b2a2a;
--text2: #6d645c;
--text3: #7f776e;
--border: rgba(59, 42, 42, 0.13);
--brand: #a05555;
--brand-hover: #8a4949;
--brand-bg: rgba(243, 129, 129, 0.24);
--code-bg: #fffef8;
--code-text: #3b2a2a;
--shadow: 0 8px 32px rgba(160, 85, 85, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.88), inset 0 0 0 1px rgba(255, 255, 255, 0.45);
--radius: 10px;
--g-blobs: radial-gradient(60vmax 50vmax at 8% -8%, rgba(243, 129, 129, 0.55), transparent 62%), radial-gradient(55vmax 45vmax at 98% 8%, rgba(252, 227, 138, 0.7), transparent 62%), radial-gradient(65vmax 50vmax at 65% 112%, rgba(149, 225, 211, 0.7), transparent 62%), radial-gradient(50vmax 45vmax at -6% 92%, rgba(243, 129, 129, 0.35), transparent 62%), linear-gradient(160deg, #f6ffe6, #fff6d6);
--g-panel: rgba(255, 253, 242, 0.55);
--g-article: rgba(255, 253, 242, 0.8);
--g-drawer: rgba(255, 253, 242, 0.9);
--g-strong: rgba(255, 253, 242, 0.92);
--g-inset: rgba(59, 42, 42, 0.09);
--g-edge: rgba(255, 255, 255, 0.45);
--g-filter: saturate(180%) blur(28px);
--on-brand: #ffffff;
--on-grad: #3b2a2a;
--accent-grad: linear-gradient(135deg, #F38181, #FCE38A);
--title-grad: linear-gradient(90deg, #d16f6f, #9c8d56);
--nav-grad: linear-gradient(90deg, rgba(243, 129, 129, 0.28), rgba(255, 253, 242, 0.6) 38%, rgba(255, 253, 242, 0.6) 62%, rgba(252, 227, 138, 0.28));
--active-bg: linear-gradient(90deg, rgba(243, 129, 129, 0.32), rgba(252, 227, 138, 0.2));
--line: linear-gradient(90deg, transparent, #F38181, #FCE38A, transparent);
--glow: 0 0 24px -4px rgba(243, 129, 129, 0.7);
color-scheme: light;
}
[data-theme="ocean"] {
--bg: #e4e9f3;
--bg2: rgba(17, 45, 78, 0.06);
--bg3: rgba(17, 45, 78, 0.11);
--text: #112D4E;
--text2: #4a5f7a;
--text3: #5e728a;
--border: rgba(17, 45, 78, 0.13);
--brand: #39679e;
--brand-hover: #315988;
--brand-bg: rgba(63, 114, 175, 0.24);
--code-bg: #fcfbfb;
--code-text: #112D4E;
--shadow: 0 8px 32px rgba(57, 103, 158, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.88), inset 0 0 0 1px rgba(255, 255, 255, 0.45);
--radius: 10px;
--g-blobs: radial-gradient(60vmax 50vmax at 8% -8%, rgba(63, 114, 175, 0.45), transparent 62%), radial-gradient(55vmax 45vmax at 98% 8%, rgba(17, 45, 78, 0.22), transparent 62%), radial-gradient(65vmax 50vmax at 65% 112%, rgba(219, 226, 239, 1), transparent 62%), radial-gradient(50vmax 45vmax at -6% 92%, rgba(63, 114, 175, 0.3), transparent 62%), linear-gradient(160deg, #e4e9f3, #f9f7f7);
--g-panel: rgba(249, 247, 247, 0.55);
--g-article: rgba(249, 247, 247, 0.8);
--g-drawer: rgba(249, 247, 247, 0.9);
--g-strong: rgba(249, 247, 247, 0.92);
--g-inset: rgba(17, 45, 78, 0.09);
--g-edge: rgba(255, 255, 255, 0.45);
--g-filter: saturate(180%) blur(28px);
--on-brand: #ffffff;
--on-grad: #ffffff;
--accent-grad: linear-gradient(135deg, #3F72AF, #112D4E);
--title-grad: linear-gradient(90deg, #3F72AF, #112D4E);
--nav-grad: linear-gradient(90deg, rgba(63, 114, 175, 0.28), rgba(249, 247, 247, 0.6) 38%, rgba(249, 247, 247, 0.6) 62%, rgba(17, 45, 78, 0.28));
--active-bg: linear-gradient(90deg, rgba(63, 114, 175, 0.32), rgba(17, 45, 78, 0.2));
--line: linear-gradient(90deg, transparent, #3F72AF, #112D4E, transparent);
--glow: 0 0 24px -4px rgba(63, 114, 175, 0.7);
color-scheme: light;
}
[data-theme="navy"] {
--bg: #121e2a;
--bg2: rgba(234, 224, 207, 0.06);
--bg3: rgba(234, 224, 207, 0.1);
--text: #EAE0CF;
--text2: #a9a69d;
--text3: #93928c;
--border: rgba(234, 224, 207, 0.16);
--brand: #94B4C1;
--brand-hover: #a9c3cd;
--brand-bg: rgba(148, 180, 193, 0.22);
--code-bg: #0c141b;
--code-text: #EAE0CF;
--shadow: 0 8px 32px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(234, 224, 207, 0.16), inset 0 0 0 1px rgba(234, 224, 207, 0.07);
--radius: 10px;
--g-blobs: radial-gradient(60vmax 50vmax at 8% -8%, rgba(84, 119, 146, 0.65), transparent 62%), radial-gradient(55vmax 45vmax at 98% 8%, rgba(148, 180, 193, 0.32), transparent 62%), radial-gradient(65vmax 50vmax at 65% 112%, rgba(234, 224, 207, 0.18), transparent 62%), radial-gradient(50vmax 45vmax at -6% 92%, rgba(84, 119, 146, 0.4), transparent 62%), linear-gradient(160deg, #121e2a, #1b2d3e);
--g-panel: rgba(33, 52, 72, 0.5);
--g-article: rgba(27, 43, 60, 0.76);
--g-drawer: rgba(28, 45, 63, 0.9);
--g-strong: rgba(57, 73, 88, 0.9);
--g-inset: rgba(234, 224, 207, 0.08);
--g-edge: rgba(234, 224, 207, 0.1);
--g-filter: saturate(180%) blur(28px);
--on-brand: #121e2a;
--on-grad: #121e2a;
--accent-grad: linear-gradient(135deg, #94B4C1, #EAE0CF);
--title-grad: linear-gradient(90deg, #94B4C1, #EAE0CF);
--nav-grad: linear-gradient(90deg, rgba(148, 180, 193, 0.22), rgba(18, 30, 42, 0.6) 38%, rgba(18, 30, 42, 0.6) 62%, rgba(234, 224, 207, 0.22));
--active-bg: linear-gradient(90deg, rgba(148, 180, 193, 0.34), rgba(234, 224, 207, 0.2));
--line: linear-gradient(90deg, transparent, #94B4C1, #EAE0CF, transparent);
--glow: 0 0 26px -4px rgba(148, 180, 193, 0.6);
color-scheme: dark;
}
[data-theme="tropic"] {
--bg: #fff6d6;
--bg2: rgba(27, 47, 59, 0.06);
--bg3: rgba(27, 47, 59, 0.11);
--text: #1b2f3b;
--text2: #586565;
--text3: #6f7773;
--border: rgba(27, 47, 59, 0.13);
--brand: #945e21;
--brand-hover: #7f511c;
--brand-bg: rgba(255, 162, 57, 0.24);
--code-bg: #fffef8;
--code-text: #1b2f3b;
--shadow: 0 8px 32px rgba(148, 94, 33, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.88), inset 0 0 0 1px rgba(255, 255, 255, 0.45);
--radius: 10px;
--g-blobs: radial-gradient(60vmax 50vmax at 8% -8%, rgba(140, 228, 255, 0.6), transparent 62%), radial-gradient(55vmax 45vmax at 98% 8%, rgba(255, 162, 57, 0.5), transparent 62%), radial-gradient(65vmax 50vmax at 65% 112%, rgba(254, 238, 145, 0.9), transparent 62%), radial-gradient(50vmax 45vmax at -6% 92%, rgba(255, 86, 86, 0.35), transparent 62%), linear-gradient(160deg, #fff6d6, #e0f6ff);
--g-panel: rgba(255, 253, 240, 0.55);
--g-article: rgba(255, 253, 240, 0.8);
--g-drawer: rgba(255, 253, 240, 0.9);
--g-strong: rgba(255, 253, 240, 0.92);
--g-inset: rgba(27, 47, 59, 0.09);
--g-edge: rgba(255, 255, 255, 0.45);
--g-filter: saturate(180%) blur(28px);
--on-brand: #ffffff;
--on-grad: #1b2f3b;
--accent-grad: linear-gradient(135deg, #FFA239, #FF5656);
--title-grad: linear-gradient(90deg, #bd782a, #f05151);
--nav-grad: linear-gradient(90deg, rgba(255, 162, 57, 0.28), rgba(255, 253, 240, 0.6) 38%, rgba(255, 253, 240, 0.6) 62%, rgba(255, 86, 86, 0.28));
--active-bg: linear-gradient(90deg, rgba(255, 162, 57, 0.32), rgba(255, 86, 86, 0.2));
--line: linear-gradient(90deg, transparent, #FFA239, #FF5656, transparent);
--glow: 0 0 24px -4px rgba(255, 162, 57, 0.7);
color-scheme: light;
}
[data-theme="bubble"] {
--bg: #fcfbe8;
--bg2: rgba(31, 42, 68, 0.06);
--bg3: rgba(31, 42, 68, 0.11);
--text: #1f2a44;
--text2: #5a6370;
--text3: #707680;
--border: rgba(31, 42, 68, 0.13);
--brand: #2d72a8;
--brand-hover: #276290;
--brand-bg: rgba(254, 158, 199, 0.24);
--code-bg: #fffefa;
--code-text: #1f2a44;
--shadow: 0 8px 32px rgba(45, 114, 168, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.88), inset 0 0 0 1px rgba(255, 255, 255, 0.45);
--radius: 10px;
--g-blobs: radial-gradient(60vmax 50vmax at 8% -8%, rgba(254, 158, 199, 0.6), transparent 62%), radial-gradient(55vmax 45vmax at 98% 8%, rgba(68, 172, 255, 0.5), transparent 62%), radial-gradient(65vmax 50vmax at 65% 112%, rgba(137, 212, 255, 0.65), transparent 62%), radial-gradient(50vmax 45vmax at -6% 92%, rgba(254, 158, 199, 0.35), transparent 62%), linear-gradient(160deg, #fcfbe8, #e3f3ff);
--g-panel: rgba(255, 254, 245, 0.55);
--g-article: rgba(255, 254, 245, 0.8);
--g-drawer: rgba(255, 254, 245, 0.9);
--g-strong: rgba(255, 254, 245, 0.92);
--g-inset: rgba(31, 42, 68, 0.09);
--g-edge: rgba(255, 255, 255, 0.45);
--g-filter: saturate(180%) blur(28px);
--on-brand: #ffffff;
--on-grad: #1f2a44;
--accent-grad: linear-gradient(135deg, #FE9EC7, #44ACFF);
--title-grad: linear-gradient(90deg, #bc7593, #3990d6);
--nav-grad: linear-gradient(90deg, rgba(254, 158, 199, 0.28), rgba(255, 254, 245, 0.6) 38%, rgba(255, 254, 245, 0.6) 62%, rgba(68, 172, 255, 0.28));
--active-bg: linear-gradient(90deg, rgba(254, 158, 199, 0.32), rgba(68, 172, 255, 0.2));
--line: linear-gradient(90deg, transparent, #FE9EC7, #44ACFF, transparent);
--glow: 0 0 24px -4px rgba(254, 158, 199, 0.7);
color-scheme: light;
}
[data-theme="dream"] {
--bg: #fff7ea;
--bg2: rgba(53, 38, 74, 0.06);
--bg3: rgba(53, 38, 74, 0.11);
--text: #35264a;
--text2: #6c5f75;
--text3: #7f7284;
--border: rgba(53, 38, 74, 0.13);
--brand: #71658d;
--brand-hover: #615779;
--brand-bg: rgba(255, 143, 143, 0.24);
--code-bg: #fffcf8;
--code-text: #35264a;
--shadow: 0 8px 32px rgba(113, 101, 141, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.88), inset 0 0 0 1px rgba(255, 255, 255, 0.45);
--radius: 10px;
--g-blobs: radial-gradient(60vmax 50vmax at 8% -8%, rgba(255, 143, 143, 0.5), transparent 62%), radial-gradient(55vmax 45vmax at 98% 8%, rgba(183, 163, 227, 0.6), transparent 62%), radial-gradient(65vmax 50vmax at 65% 112%, rgba(194, 226, 250, 0.8), transparent 62%), radial-gradient(50vmax 45vmax at -6% 92%, rgba(255, 143, 143, 0.3), transparent 62%), linear-gradient(160deg, #fff7ea, #eef5fd);
--g-panel: rgba(255, 250, 240, 0.55);
--g-article: rgba(255, 250, 240, 0.8);
--g-drawer: rgba(255, 250, 240, 0.9);
--g-strong: rgba(255, 250, 240, 0.92);
--g-inset: rgba(53, 38, 74, 0.09);
--g-edge: rgba(255, 255, 255, 0.45);
--g-filter: saturate(180%) blur(28px);
--on-brand: #ffffff;
--on-grad: #35264a;
--accent-grad: linear-gradient(135deg, #FF8F8F, #B7A3E3);
--title-grad: linear-gradient(90deg, #c77070, #9282b6);
--nav-grad: linear-gradient(90deg, rgba(255, 143, 143, 0.28), rgba(255, 250, 240, 0.6) 38%, rgba(255, 250, 240, 0.6) 62%, rgba(183, 163, 227, 0.28));
--active-bg: linear-gradient(90deg, rgba(255, 143, 143, 0.32), rgba(183, 163, 227, 0.2));
--line: linear-gradient(90deg, transparent, #FF8F8F, #B7A3E3, transparent);
--glow: 0 0 24px -4px rgba(255, 143, 143, 0.7);
color-scheme: light;
}
[data-theme="sorbet"] {
--bg: #e4f7ea;
--bg2: rgba(58, 42, 56, 0.06);
--bg3: rgba(58, 42, 56, 0.11);
--text: #3a2a38;
--text2: #686268;
--text3: #787579;
--border: rgba(58, 42, 56, 0.13);
--brand: #866074;
--brand-hover: #735364;
--brand-bg: rgba(249, 178, 215, 0.24);
--code-bg: #fdfff8;
--code-text: #3a2a38;
--shadow: 0 8px 32px rgba(134, 96, 116, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.88), inset 0 0 0 1px rgba(255, 255, 255, 0.45);
--radius: 10px;
--g-blobs: radial-gradient(60vmax 50vmax at 8% -8%, rgba(249, 178, 215, 0.7), transparent 62%), radial-gradient(55vmax 45vmax at 98% 8%, rgba(207, 236, 243, 1), transparent 62%), radial-gradient(65vmax 50vmax at 65% 112%, rgba(246, 255, 220, 1), transparent 62%), radial-gradient(50vmax 45vmax at -6% 92%, rgba(249, 178, 215, 0.4), transparent 62%), linear-gradient(160deg, #e4f7ea, #fdfff0);
--g-panel: rgba(251, 255, 242, 0.55);
--g-article: rgba(251, 255, 242, 0.8);
--g-drawer: rgba(251, 255, 242, 0.9);
--g-strong: rgba(251, 255, 242, 0.92);
--g-inset: rgba(58, 42, 56, 0.09);
--g-edge: rgba(255, 255, 255, 0.45);
--g-filter: saturate(180%) blur(28px);
--on-brand: #ffffff;
--on-grad: #3a2a38;
--accent-grad: linear-gradient(135deg, #F9B2D7, #CFECF3);
--title-grad: linear-gradient(90deg, #a97992, #78898d);
--nav-grad: linear-gradient(90deg, rgba(249, 178, 215, 0.28), rgba(251, 255, 242, 0.6) 38%, rgba(251, 255, 242, 0.6) 62%, rgba(207, 236, 243, 0.28));
--active-bg: linear-gradient(90deg, rgba(249, 178, 215, 0.32), rgba(207, 236, 243, 0.2));
--line: linear-gradient(90deg, transparent, #F9B2D7, #CFECF3, transparent);
--glow: 0 0 24px -4px rgba(249, 178, 215, 0.7);
color-scheme: light;
}
[data-theme="blush"] {
--bg: #fbe9ea;
--bg2: rgba(61, 44, 62, 0.06);
--bg3: rgba(61, 44, 62, 0.11);
--text: #3d2c3e;
--text2: #705f6d;
--text3: #82717c;
--border: rgba(61, 44, 62, 0.13);
--brand: #6e6476;
--brand-hover: #5f5665;
--brand-bg: rgba(245, 203, 203, 0.24);
--code-bg: #fffafa;
--code-text: #3d2c3e;
--shadow: 0 8px 32px rgba(110, 100, 118, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.88), inset 0 0 0 1px rgba(255, 255, 255, 0.45);
--radius: 10px;
--g-blobs: radial-gradient(60vmax 50vmax at 8% -8%, rgba(245, 203, 203, 0.95), transparent 62%), radial-gradient(55vmax 45vmax at 98% 8%, rgba(197, 179, 211, 0.75), transparent 62%), radial-gradient(65vmax 50vmax at 65% 112%, rgba(255, 226, 226, 1), transparent 62%), radial-gradient(50vmax 45vmax at -6% 92%, rgba(197, 179, 211, 0.45), transparent 62%), linear-gradient(160deg, #fbe9ea, #efe8f5);
--g-panel: rgba(255, 246, 246, 0.55);
--g-article: rgba(255, 246, 246, 0.8);
--g-drawer: rgba(255, 246, 246, 0.9);
--g-strong: rgba(255, 246, 246, 0.92);
--g-inset: rgba(61, 44, 62, 0.09);
--g-edge: rgba(255, 255, 255, 0.45);
--g-filter: saturate(180%) blur(28px);
--on-brand: #ffffff;
--on-grad: #3d2c3e;
--accent-grad: linear-gradient(135deg, #F5CBCB, #C5B3D3);
--title-grad: linear-gradient(90deg, #937a7a, #8a7d94);
--nav-grad: linear-gradient(90deg, rgba(245, 203, 203, 0.28), rgba(255, 246, 246, 0.6) 38%, rgba(255, 246, 246, 0.6) 62%, rgba(197, 179, 211, 0.28));
--active-bg: linear-gradient(90deg, rgba(245, 203, 203, 0.32), rgba(197, 179, 211, 0.2));
--line: linear-gradient(90deg, transparent, #F5CBCB, #C5B3D3, transparent);
--glow: 0 0 24px -4px rgba(245, 203, 203, 0.7);
color-scheme: light;
}
[data-theme="mocha"] {
--bg: #eee7df;
--bg2: rgba(47, 38, 29, 0.06);
--bg3: rgba(47, 38, 29, 0.11);
--text: #2f261d;
--text2: #686057;
--text3: #7c736b;
--border: rgba(47, 38, 29, 0.13);
--brand: #75695a;
--brand-hover: #655a4d;
--brand-bg: rgba(201, 181, 156, 0.24);
--code-bg: #fcfcfa;
--code-text: #2f261d;
--shadow: 0 8px 32px rgba(117, 105, 90, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.88), inset 0 0 0 1px rgba(255, 255, 255, 0.45);
--radius: 10px;
--g-blobs: radial-gradient(60vmax 50vmax at 8% -8%, rgba(201, 181, 156, 0.6), transparent 62%), radial-gradient(55vmax 45vmax at 98% 8%, rgba(217, 207, 199, 1), transparent 62%), radial-gradient(65vmax 50vmax at 65% 112%, rgba(249, 248, 246, 1), transparent 62%), radial-gradient(50vmax 45vmax at -6% 92%, rgba(201, 181, 156, 0.4), transparent 62%), linear-gradient(160deg, #eee7df, #f9f8f6);
--g-panel: rgba(250, 248, 245, 0.55);
--g-article: rgba(250, 248, 245, 0.8);
--g-drawer: rgba(250, 248, 245, 0.9);
--g-strong: rgba(250, 248, 245, 0.92);
--g-inset: rgba(47, 38, 29, 0.09);
--g-edge: rgba(255, 255, 255, 0.45);
--g-filter: saturate(180%) blur(28px);
--on-brand: #ffffff;
--on-grad: #2f261d;
--accent-grad: linear-gradient(135deg, #C9B59C, #927e67);
--title-grad: linear-gradient(90deg, #897b6a, #8f7b65);
--nav-grad: linear-gradient(90deg, rgba(201, 181, 156, 0.28), rgba(250, 248, 245, 0.6) 38%, rgba(250, 248, 245, 0.6) 62%, rgba(146, 126, 103, 0.28));
--active-bg: linear-gradient(90deg, rgba(201, 181, 156, 0.32), rgba(146, 126, 103, 0.2));
--line: linear-gradient(90deg, transparent, #C9B59C, #927e67, transparent);
--glow: 0 0 24px -4px rgba(201, 181, 156, 0.7);
color-scheme: light;
}
[data-theme="rose"] {
--bg: #fbeded;
--bg2: rgba(59, 38, 38, 0.06);
--bg3: rgba(59, 38, 38, 0.11);
--text: #3b2626;
--text2: #756262;
--text3: #806f6f;
--border: rgba(59, 38, 38, 0.13);
--brand: #896262;
--brand-hover: #765454;
--brand-bg: rgba(249, 223, 223, 0.24);
--code-bg: #fffcfc;
--code-text: #3b2626;
--shadow: 0 8px 32px rgba(137, 98, 98, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.88), inset 0 0 0 1px rgba(255, 255, 255, 0.45);
--radius: 10px;
--g-blobs: radial-gradient(60vmax 50vmax at 8% -8%, rgba(245, 175, 175, 0.75), transparent 62%), radial-gradient(55vmax 45vmax at 98% 8%, rgba(249, 223, 223, 1), transparent 62%), radial-gradient(65vmax 50vmax at 65% 112%, rgba(245, 175, 175, 0.45), transparent 62%), radial-gradient(50vmax 45vmax at -6% 92%, rgba(252, 248, 248, 1), transparent 62%), linear-gradient(160deg, #fbeded, #fdf6f6);
--g-panel: rgba(255, 250, 250, 0.55);
--g-article: rgba(255, 250, 250, 0.8);
--g-drawer: rgba(255, 250, 250, 0.9);
--g-strong: rgba(255, 250, 250, 0.92);
--g-inset: rgba(59, 38, 38, 0.09);
--g-edge: rgba(255, 255, 255, 0.45);
--g-filter: saturate(180%) blur(28px);
--on-brand: #ffffff;
--on-grad: #3b2626;
--accent-grad: linear-gradient(135deg, #F9DFDF, #F5AFAF);
--title-grad: linear-gradient(90deg, #908181, #a77777);
--nav-grad: linear-gradient(90deg, rgba(249, 223, 223, 0.28), rgba(255, 250, 250, 0.6) 38%, rgba(255, 250, 250, 0.6) 62%, rgba(245, 175, 175, 0.28));
--active-bg: linear-gradient(90deg, rgba(249, 223, 223, 0.32), rgba(245, 175, 175, 0.2));
--line: linear-gradient(90deg, transparent, #F9DFDF, #F5AFAF, transparent);
--glow: 0 0 24px -4px rgba(249, 223, 223, 0.7);
color-scheme: light;
}


/* ==========================================================================
   6. 配色的補充 token
   ========================================================================== */
/* 配色主題共用：粗框線、表頭、圖示底、目前項目外框、標題漸層 */
:is([data-theme="candy"], [data-theme="ocean"], [data-theme="navy"], [data-theme="tropic"], [data-theme="bubble"], [data-theme="dream"], [data-theme="sorbet"], [data-theme="blush"], [data-theme="mocha"], [data-theme="rose"]) {
  --line-w: 2px;
  --th-bg: var(--brand-bg);
  --icon-bg: var(--accent-grad); --icon-fg: var(--on-grad);
  --active-ring: inset 0 0 0 1.5px var(--brand);
  --head-grad: var(--title-grad);
}
/* 深色主題的狀態色（新增深色主題時，把 id 加進這個清單） */
:is([data-theme="classic-dark"], [data-theme="orbital"], [data-theme="quantum"], [data-theme="monolith"], [data-theme="cyber"], [data-theme="navy"]) {
  --ok: #3fb950; --warn: #d4a72c; --danger: #f85149;
}


/* ==========================================================================
   7. Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
  scrollbar-width: thin;
  scrollbar-color: rgba(128, 128, 138, 0.5) transparent;
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
html.nav-lock { overflow: hidden; }

body {
  margin: 0; min-height: 100vh;
  background: var(--bg); color: var(--text);
  font-family: var(--font-main); font-size: 15px; line-height: 1.6; letter-spacing: var(--ls);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
/* 背景光斑（玻璃與配色）、格線（orbital / cyber）都走這一層；經典主題 --g-blobs 是 none */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: var(--g-blobs); background-size: var(--g-blobs-size);
}

a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-hover); text-decoration: underline; }
::selection { background: var(--brand-bg); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4, h5, h6 { margin: 0; line-height: 1.3; font-family: var(--font-display); }
p { margin: 0 0 1em; }
img, svg { max-width: 100%; }
code, kbd, samp, pre { font-family: var(--font-mono); }
:not(pre) > code {
  background: var(--code-bg); color: var(--code-text);
  padding: 0.2em 0.4em; font-size: 0.9em;
  border: 1px solid var(--border); border-radius: calc(var(--r-ctl) * 0.6);
}
.ic { width: 1.15em; height: 1.15em; flex-shrink: 0; display: inline-block; vertical-align: middle; }
.spacer { flex: 1; }
.muted { color: var(--text2); font-size: 13px; }
.mono { font-family: var(--font-mono); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; }

/* 捲軸：細、半透明；側欄平常隱形，滑鼠移上去才出現 */
.side-nav { scrollbar-width: thin; scrollbar-color: rgba(128, 128, 138, 0.5) transparent; }
.side-nav:not(:hover) { scrollbar-color: transparent transparent; }
@supports not (scrollbar-color: auto) {
  ::-webkit-scrollbar { width: 8px; height: 8px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: rgba(128, 128, 138, 0.45); border-radius: 980px; border: 2px solid transparent; background-clip: padding-box; }
  ::-webkit-scrollbar-thumb:hover { background: rgba(128, 128, 138, 0.7); }
}

/* 主題切換：瀏覽器把切換前後各拍一張圖再淡入淡出，成本和頁面節點數無關。
   不支援或使用者要求減少動態時，JS 會直接瞬間切換。 */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.25s; }


/* ==========================================================================
   8. Header、主題切換器、配色面板
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 100;
  min-height: var(--header-h); display: flex; align-items: center;
  padding-top: env(safe-area-inset-top, 0px);
  background: var(--nav-grad);
  -webkit-backdrop-filter: var(--g-filter); backdrop-filter: var(--g-filter);
  border-bottom: var(--line-w) solid transparent; border-image: var(--line) 1;
  box-shadow: inset 0 1px 0 var(--g-edge);
}
.header-inner {
  width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; gap: 16px;
}
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; font-family: var(--font-display); font-size: 16px; font-weight: 600; letter-spacing: -0.02em; color: var(--text); }
.brand:hover { text-decoration: none; color: var(--text); }
.brand-icon { display: inline-flex; color: var(--brand); font-size: 22px; }
.brand-text {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background-image: var(--head-grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.header-meta { font-family: var(--font-mono); font-size: 12px; color: var(--text2); white-space: nowrap; }
.header-meta b { color: var(--text); }
.nav-toggle, .nav-close {
  display: none; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0; background: none; border: none;
  border-radius: var(--r-ctl); color: var(--text); font-size: 22px;
}
.nav-toggle:hover, .nav-close:hover { background: var(--hover); }

/* 切換器：.theme-switcher（主題）與 .seg（一般分段控制）共用同一組 token */
.theme-switcher, .seg {
  display: inline-flex; align-items: center; flex-shrink: 0;
  gap: var(--sw-gap); padding: var(--sw-pad);
  background: var(--sw-bg); border-radius: var(--r-pill);
}
.theme-btn, .seg button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 28px; padding: 0;
  background: transparent; color: var(--text3);
  border: 1px solid var(--sw-line); border-radius: var(--r-pill);
  font-size: 16px; line-height: 1;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.theme-btn .ic, .seg button .ic { width: 1em; height: 1em; }
.theme-btn:hover, .seg button:hover { color: var(--text); border-color: var(--sw-hover-line); }
.theme-btn.active, .seg button.active {
  background: var(--sw-active-bg); color: var(--sw-active-fg);
  border-color: var(--sw-active-bg); box-shadow: var(--sw-active-shadow);
}

/* 配色色票：四色圓餅 */
.tp-swatch { display: block; width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.22); flex-shrink: 0; }
.tp-swatch-lg { width: 24px; height: 24px; }

/* 配色面板：由 JS 放在 <body> 底下，避免被 header 的 backdrop-filter / overflow 影響定位與裁切 */
.tp-pop {
  position: fixed; z-index: 300; top: 60px; left: 12px; width: min(288px, calc(100vw - 24px));
  padding: 8px;
  background: var(--pop-bg); color: var(--text); border: 1px solid var(--border);
  border-radius: var(--r-panel); box-shadow: var(--shadow);
  -webkit-backdrop-filter: var(--g-filter); backdrop-filter: var(--g-filter);
  animation: tp-in 0.18s ease-out;
}
/* 捲動與格線放在內層。.tp-pop 本身不能有 overflow：它會裁掉下方 ::before 的透明橋（在面板外 10px） */
.tp-scroll {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px;
  max-height: calc(min(78vh, 560px) - 18px); overflow-y: auto; overscroll-behavior: contain;
}
.tp-opt {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; font-size: 13px;
  color: var(--text); background: transparent; border: 1px solid transparent;
  border-radius: var(--r-card); text-align: left;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.tp-opt:hover { background: var(--hover); }
.tp-opt.active { background: var(--brand-bg); border-color: var(--brand); }
.tp-group { grid-column: 1 / -1; padding: 6px 10px 2px; font-size: 12px; font-weight: 600; color: var(--text2); }
.tp-group:not(:first-child) { margin-top: 4px; border-top: 1px solid var(--border); padding-top: 10px; }
/* 面板與按鈕之間有 8px 空隙。這條透明橋把空隙算進面板，游標穿過時不會觸發「移開關閉」 */
.tp-pop::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
@keyframes tp-in { from { opacity: 0; transform: translateY(-6px) scale(0.98); } to { opacity: 1; transform: none; } }

/* 色票：每個主題四色圓餅。新增主題時在這裡加一筆 */
.swatch-light { background: conic-gradient(#eef1f8 0 25%, #ffffff 0 50%, #0071e3 0 75%, #a05aff 0); }
.swatch-dark { background: conic-gradient(#07080d 0 25%, #262832 0 50%, #2997ff 0 75%, #9a5aff 0); }
.swatch-candy { background: conic-gradient(#F38181 0 25%, #FCE38A 0 50%, #EAFFD0 0 75%, #95E1D3 0); }
.swatch-ocean { background: conic-gradient(#F9F7F7 0 25%, #DBE2EF 0 50%, #3F72AF 0 75%, #112D4E 0); }
.swatch-navy { background: conic-gradient(#213448 0 25%, #547792 0 50%, #94B4C1 0 75%, #EAE0CF 0); }
.swatch-tropic { background: conic-gradient(#8CE4FF 0 25%, #FEEE91 0 50%, #FFA239 0 75%, #FF5656 0); }
.swatch-bubble { background: conic-gradient(#FE9EC7 0 25%, #F9F6C4 0 50%, #89D4FF 0 75%, #44ACFF 0); }
.swatch-dream { background: conic-gradient(#FF8F8F 0 25%, #FFF1CB 0 50%, #C2E2FA 0 75%, #B7A3E3 0); }
.swatch-sorbet { background: conic-gradient(#F9B2D7 0 25%, #CFECF3 0 50%, #DAF9DE 0 75%, #F6FFDC 0); }
.swatch-blush { background: conic-gradient(#FBEFEF 0 25%, #FFE2E2 0 50%, #F5CBCB 0 75%, #C5B3D3 0); }
.swatch-mocha { background: conic-gradient(#F9F8F6 0 25%, #EFE9E3 0 50%, #D9CFC7 0 75%, #C9B59C 0); }
.swatch-rose { background: conic-gradient(#FCF8F8 0 25%, #FBEFEF 0 50%, #F9DFDF 0 75%, #F5AFAF 0); }
.swatch-classic-light { background: conic-gradient(#ffffff 0 25%, #f6f8fa 0 50%, #d0d7de 0 75%, #0969da 0); }
.swatch-classic-dark { background: conic-gradient(#0d1117 0 25%, #161b22 0 50%, #30363d 0 75%, #2f81f7 0); }
.swatch-orbital { background: conic-gradient(#030508 0 25%, #0a0f1a 0 50%, #1e293b 0 75%, #38bdf8 0); }
.swatch-quantum { background: conic-gradient(#090514 0 25%, #a855f7 0 50%, #ec4899 0 75%, #f8fafc 0); }
.swatch-monolith { background: conic-gradient(#121212 0 25%, #242424 0 50%, #ef4444 0 75%, #ffffff 0); }
.swatch-cyber { background: conic-gradient(#050811 0 25%, #121b34 0 50%, #1a2f4c 0 75%, #00f0ff 0); }


/* ==========================================================================
   9. Layout
   .layout--article ：左側目錄 + 右側長文面板；手機版目錄變抽屜
   .layout--dash    ：左側分類 + 右側卡片面板；手機版分類變橫向膠囊列
   ========================================================================== */
.layout {
  display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); gap: var(--float);
  max-width: var(--max-w); margin: 0 auto; padding: var(--float); align-items: start;
}
.side-nav {
  position: sticky; top: calc(var(--header-h) + var(--float));
  max-height: calc(100vh - var(--header-h) - var(--float) * 2); overflow-y: auto;
  padding: 12px; background: var(--side-bg);
  -webkit-backdrop-filter: var(--g-filter); backdrop-filter: var(--g-filter);
  border-radius: var(--r-side); border-right: var(--side-edge); box-shadow: var(--panel-shadow);
}
.nav-head { display: flex; align-items: center; justify-content: space-between; }
.nav-title { color: var(--text3); font-size: 12px; font-weight: 600; padding: 6px 10px; }
.nav-item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; margin: 2px 0;
  background: transparent; color: var(--text2); text-align: left; font-size: 14px;
  border: 0; border-left: var(--nav-edge-w) solid transparent; border-radius: var(--r-ctl);
  transition: background 0.15s ease, color 0.15s ease;
}
.nav-item .label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-item .num { font-family: var(--font-mono); font-size: 11px; color: var(--text2); background: var(--g-inset); border-radius: var(--r-pill); padding: 1px 8px; }
.nav-item:hover { background: var(--g-inset); color: var(--text); text-decoration: none; }
.nav-item.active { background: var(--active-bg); color: var(--brand); font-weight: 600; border-left-color: var(--brand); box-shadow: var(--active-ring); }
.nav-item.active .num { background: var(--g-strong); color: var(--brand); }
.nav-item.is-pending { border: 1px dashed var(--text3); }
.nav-item.is-pending.active { border: 1px solid var(--brand); }

.main-content {
  min-width: 0; background: var(--main-bg);
  border-radius: var(--r-panel); box-shadow: var(--panel-shadow);
}
/* 長文面板：不加模糊（後面只有固定光斑，模糊看不出差別，捲動也比較順） */
.layout--article .main-content { max-width: 1000px; padding: 32px 48px 64px; }
/* 儀表板面板：半透明 + 模糊 */
.layout--dash .main-content {
  padding: 22px; min-height: 60vh; background: var(--g-panel);
  -webkit-backdrop-filter: var(--g-filter); backdrop-filter: var(--g-filter);
}
.nav-overlay { display: none; }

/* 長文排版 */
.prose { line-height: 1.7; }
.prose > :first-child, .prose > section:first-child > :first-child { margin-top: 0; }
.prose :is(h1, h2, h3) { line-height: 1.3; margin: 2em 0 0.8em; font-weight: 600; }
.prose h1 { font-size: 2rem; }
.prose h2 { font-size: 1.5rem; }
.prose h3 { font-size: 1.2rem; }
.prose :is(h1, h2) { padding-bottom: 0.3em; border-bottom: var(--line-w) solid transparent; border-image: var(--line) 1; }
.prose ul, .prose ol { margin: 0 0 1em; padding-left: 1.5em; }
.prose li + li { margin-top: 0.25em; }
.prose hr { border: 0; height: 1px; background: var(--border); margin: 2em 0; }
.prose blockquote { margin: 1.2em 0; padding: 0.4em 1em; border-left: 3px solid var(--brand); color: var(--text2); background: var(--bg2); border-radius: 0 var(--r-ctl) var(--r-ctl) 0; }
.cross-link::after { content: " ↗"; font-size: 0.8em; vertical-align: super; }

/* 區塊標題（儀表板用） */
.sec-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 18px; }
.sec-head h2 { font-size: 24px; font-weight: 700; letter-spacing: -0.03em; }
.sec-head .count { color: var(--text2); font-size: 14px; }


/* ==========================================================================
   10. 元件
   ========================================================================== */
/* 按鈕 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 16px; background: var(--g-inset); color: var(--text);
  border: 1px solid transparent; border-radius: var(--r-pill);
  font-size: 14px; font-weight: 500; white-space: nowrap;
  transition: transform 0.12s ease, background 0.2s ease, color 0.2s ease, opacity 0.2s ease, filter 0.2s ease;
}
.btn:hover:not(:disabled) { background: var(--hover); text-decoration: none; color: var(--text); }
.btn:active:not(:disabled) { transform: scale(0.97); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-primary { background: var(--accent-grad); color: var(--on-grad); }
.btn-primary:hover:not(:disabled) { background: var(--accent-grad); color: var(--on-grad); filter: brightness(1.07) saturate(1.08); }
.btn-ghost { background: transparent; color: var(--brand); }
.btn-ghost:hover:not(:disabled) { background: var(--brand-bg); color: var(--brand); }
.btn-danger { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }
.btn-danger:hover:not(:disabled) { background: color-mix(in srgb, var(--danger) 20%, transparent); color: var(--danger); }
.btn-sm { padding: 5px 12px; font-size: 12px; }
.btn-lg { padding: 13px 24px; font-size: 16px; }
.btn-icon { width: 32px; height: 32px; padding: 0; }

/* 輸入 */
.input {
  width: 100%; padding: 10px 14px; background: var(--g-inset); color: var(--text);
  border: 1px solid transparent; border-radius: var(--r-ctl); outline: none; font-size: 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.input::placeholder { color: var(--text3); }
.input:focus { background: var(--g-strong); border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-bg); }
.input:disabled { opacity: 0.55; }
.search-box { position: relative; flex: 1; min-width: 180px; max-width: 420px; margin-left: auto; }
.search-box > .ic { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--text3); pointer-events: none; }
.search-box .input { padding-left: 38px; padding-right: 36px; border-radius: var(--r-pill); }
.search-clear {
  position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
  display: none; align-items: center; justify-content: center; width: 24px; height: 24px;
  border: none; border-radius: 50%; background: transparent; color: var(--text3);
}
.search-clear:hover { background: var(--hover); color: var(--text); }
.select { position: relative; flex-shrink: 0; }
.select > select {
  -webkit-appearance: none; appearance: none; outline: none; cursor: pointer;
  background: var(--g-inset); border: 1px solid transparent; border-radius: var(--r-pill);
  padding: 8px 32px 8px 14px; font-size: 13.5px; transition: background 0.2s ease;
}
.select > select:hover { background: var(--hover); }
.select > select option { color: #1d1d1f; background: #fff; }
.select > .ic { position: absolute; right: 11px; top: 50%; transform: translateY(-50%); color: var(--text3); pointer-events: none; width: 1em; height: 1em; }

/* 開關 */
.switch { position: relative; display: inline-block; width: 38px; height: 22px; flex-shrink: 0; }
.switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.switch .track { position: absolute; inset: 0; background: var(--g-inset); box-shadow: inset 0 0 0 1px var(--border); border-radius: var(--r-pill); transition: background 0.2s ease; }
.switch .knob { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--text3); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); transition: transform 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.1), background 0.2s ease; }
.switch input:checked ~ .track { background: var(--brand-bg); }
.switch input:checked ~ .knob { transform: translateX(16px); background: var(--brand); }
.switch input:focus-visible ~ .track { outline: 2px solid var(--brand); outline-offset: 2px; }

/* 徽章、標籤、LED */
.badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 1px 9px;
  background: var(--g-inset); color: var(--text2); border-radius: var(--r-pill);
  font-size: 11.5px; font-weight: 600; white-space: nowrap; letter-spacing: 0;
}
.badge-brand { background: var(--brand-bg); color: var(--brand); }
.badge-ok { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.badge-warn { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); }
.badge-danger { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.led { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; border: 1px solid var(--border); }
.led.ok { background: var(--ok); border-color: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent); }
.led.warn { background: var(--warn); border-color: var(--warn); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 22%, transparent); }
.led.danger { background: var(--danger); border-color: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 22%, transparent); }
.led.off { background: var(--text3); border-color: var(--text3); }
.led.none { background: transparent; border-color: var(--text3); border-style: dashed; }

/* 卡片格 */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.card {
  display: flex; flex-direction: column; gap: 8px; padding: 14px 15px; color: var(--text);
  background: var(--g-inset); border: 1px solid var(--border); border-radius: var(--r-card);
  transition: background 0.2s ease, transform 0.15s ease, border-color 0.2s ease;
}
a.card:hover, .card.is-hoverable:hover { background: var(--hover); transform: translateY(-1px); border-color: var(--brand); text-decoration: none; color: var(--text); }
.card > .badge { align-self: flex-start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.card-name { font-family: var(--font-mono); font-size: 13.5px; font-weight: 500; word-break: break-word; }
.card-name .owner { color: var(--text2); }
a.card:hover .card-name { color: var(--brand); }
.card-desc { font-size: 13.5px; line-height: 1.5; opacity: 0.88; min-height: 40px; margin: 0; }
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 6px; font-family: var(--font-mono); font-size: 11.5px; color: var(--text2); }

/* 首頁大卡片 */
.guide-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; padding: 2rem 3rem 6rem; max-width: 1200px; margin: 0 auto; }
.guide-card {
  display: flex; flex-direction: column; gap: 1rem; padding: 2rem; color: var(--text);
  background: var(--g-panel); border: 1px solid var(--border); border-radius: var(--r-panel); box-shadow: var(--panel-shadow);
  transition: all 0.3s;
}
.guide-card:hover { background: var(--g-strong); border-color: var(--brand); transform: translateY(-3px); box-shadow: var(--shadow), var(--glow); text-decoration: none; color: var(--text); }
.card-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px;
  border-radius: var(--r-card); background: var(--icon-bg); color: var(--icon-fg); font-size: 1.6rem;
}
.card-title { margin: 0; font-size: 1.5rem; font-weight: 600; border: none; }
.guide-card .card-desc { color: var(--text2); font-size: 0.95rem; flex: 1; opacity: 1; min-height: 0; }
.step-num {
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0;
  border-radius: 50%; background: var(--icon-bg); color: var(--icon-fg); font-size: 14px; font-weight: 700;
}

/* 表格 */
.table-wrap { overflow-x: auto; margin: 1.5em 0; }
.data-table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: 14px; border-radius: var(--r-code); overflow: hidden; }
.table-wrap > .data-table { margin: 0; }
.data-table th, .data-table td { border: 1px solid var(--border); padding: 12px 14px; text-align: left; }
.data-table th { background: var(--th-bg); font-weight: 600; }
.data-table tbody tr:nth-child(even) { background: var(--bg2); }

/* 程式碼 */
.code-block { position: relative; margin: 1.5em 0; overflow: hidden; background: var(--code-bg); border: 1px solid var(--border); border-radius: var(--r-code); }
.code-block pre { margin: 0; padding: 16px; overflow-x: auto; font-size: 14px; line-height: 1.5; color: var(--code-text); }
.code-block code { background: none; padding: 0; border: none; color: inherit; font-size: inherit; }
.copy-btn {
  position: absolute; top: 8px; right: 8px; padding: 4px 12px; font-size: 12px;
  background: var(--g-strong); color: var(--text2); border: 1px solid var(--border); border-radius: var(--r-pill);
  opacity: 0; transition: opacity 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.code-block:hover .copy-btn, .copy-btn:focus-visible { opacity: 1; }
.copy-btn:hover { background: var(--brand-bg); color: var(--brand); }
@media (hover: none) { .copy-btn { opacity: 1; } }
/* 沒包 .code-block 的裸 <pre><code> */
:not(.code-block) > pre { margin: 1.2em 0; }
:not(.code-block) > pre > code { display: block; padding: 16px; overflow-x: auto; line-height: 1.5; background: var(--code-bg); color: var(--code-text); border: 1px solid var(--border); border-radius: var(--r-code); }

/* 語法高亮（highlight.js）：全部用主題 token，換主題時顏色跟著換，不會有看不清楚的組合 */
.hljs { background: none; color: var(--code-text); }
.hljs-comment, .hljs-quote { color: var(--text3); font-style: italic; }
.hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-type, .hljs-built_in, .hljs-title.function_ { color: var(--brand); font-weight: 600; }
.hljs-string, .hljs-doctag, .hljs-regexp { color: var(--code-text); }
.hljs-number { color: var(--brand-hover); }
.hljs-title, .hljs-title.class_, .hljs-section, .hljs-name { color: var(--text); font-weight: 600; }
.hljs-variable, .hljs-template-variable, .hljs-attr, .hljs-property, .hljs-attribute { color: var(--text2); }
.hljs-symbol, .hljs-bullet, .hljs-link, .hljs-meta { color: var(--brand-hover); }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: bold; }
.hljs-deletion { background: color-mix(in srgb, var(--danger) 15%, transparent); }
.hljs-addition { background: color-mix(in srgb, var(--ok) 15%, transparent); }

/* 提示框 */
.alert { margin: 1.5em 0; padding: 12px 16px; font-size: 14px; background: var(--bg2); border-left: 4px solid var(--brand); border-radius: var(--r-code); }
.alert > :last-child { margin-bottom: 0; }
.alert-info { border-color: var(--brand); }
.alert-ok { border-color: var(--ok); }
.alert-warning { border-color: var(--warn); }
.alert-danger { border-color: var(--danger); }
.ti-inline { vertical-align: -0.125em; margin-right: 0.3em; }
.ti-inline.ok { color: var(--ok); }
.ti-inline.warn { color: var(--warn); }
.ti-inline.danger { color: var(--danger); }

/* 空狀態 */
.empty { color: var(--text2); font-size: 14px; padding: 70px 24px; text-align: center; line-height: 1.8; }
.empty code { color: var(--brand); background: var(--brand-bg); border: 0; }

/* Toast */
.toast-wrap { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 400; display: flex; flex-direction: column; align-items: center; gap: 8px; width: max-content; max-width: min(420px, calc(100vw - 36px)); pointer-events: none; }
.toast {
  padding: 11px 20px; font-size: 14px; color: #f5f5f7; background: var(--toast-bg);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-radius: var(--r-pill); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35);
  animation: toast-in 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.toast.leaving { opacity: 0; transform: translateY(8px); transition: opacity 0.25s ease, transform 0.25s ease; }
@keyframes toast-in { 0% { transform: translateY(12px) scale(0.96); opacity: 0; } to { transform: none; opacity: 1; } }


/* ==========================================================================
   11. 首頁 Hero 與 Footer
   ========================================================================== */
.hero-section { max-width: 1200px; margin: 0 auto; padding: 4rem 3rem 3rem; text-align: center; }
.hero-tag { display: inline-block; margin-bottom: 1.5rem; font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand); }
/* 大寫、等寬、極粗、發光。配色主題把 --title-grad 換成漸層，其餘主題是單色 */
.hero-title {
  width: fit-content; max-width: 100%; margin: 0 auto 1.5rem; border: none;
  font-family: var(--font-mono); font-weight: 800; font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 1.1; letter-spacing: -0.03em; text-transform: uppercase;
  background-image: var(--title-grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 0 18px var(--brand-bg));
}
.hero-desc { max-width: 700px; margin: 0 auto; font-size: 1.1rem; color: var(--text2); }

.page-footer { max-width: var(--max-w); margin: 0 auto; padding: 24px 48px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; font-size: 14px; color: var(--text3); }
.footer-nav { display: flex; flex-wrap: wrap; gap: 8px; }
.footer-link {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px;
  background: var(--g-inset); color: var(--text2); border-radius: var(--r-pill);
  transition: background 0.2s ease, color 0.2s ease;
}
.footer-link:hover { background: var(--brand-bg); color: var(--brand); text-decoration: none; }
.footer-meta { font-family: var(--font-mono); font-size: 12px; }


/* ==========================================================================
   12. 樣式專屬效果
   只放「單一主題才有」的裝飾，每個主題一小段，互不影響。
   ========================================================================== */
/* orbital 深空終端：40px 藍色格線 */
[data-theme="orbital"] {
  --g-blobs: linear-gradient(rgba(56, 189, 248, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(56, 189, 248, 0.03) 1px, transparent 1px);
  --g-blobs-size: 40px 40px;
}
/* quantum 量子全息：紫粉光暈 + 毛玻璃元件 */
[data-theme="quantum"] {
  --g-blobs: radial-gradient(circle at 10% 20%, rgba(168, 85, 247, 0.15), transparent 40%), radial-gradient(circle at 90% 80%, rgba(236, 72, 153, 0.1), transparent 40%);
  --g-filter: blur(12px);
}
[data-theme="quantum"] :is(.side-nav, .code-block, .data-table, .card, .guide-card) {
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.1);
}
/* monolith 巨物檔案：全大寫標題 */
[data-theme="monolith"] :is(.prose :is(h1, h2), .sec-head h2, .brand-text) { text-transform: uppercase; letter-spacing: 0.05em; }
/* cyber 賽博科技：20px 青色格線、等寬字、虛線標題、終端機標籤 */
[data-theme="cyber"] {
  --g-blobs: linear-gradient(rgba(0, 240, 255, 0.015) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 240, 255, 0.015) 1px, transparent 1px);
  --g-blobs-size: 20px 20px;
  --font-main: var(--font-mono); --font-display: var(--font-mono);
}
[data-theme="cyber"] :is(.prose :is(h1, h2, h3), .sec-head h2, .brand-text) { text-transform: uppercase; letter-spacing: 0.05em; }
[data-theme="cyber"] .prose :is(h1, h2, h3) { border-image: none; border-bottom: 2px dashed var(--border); }
[data-theme="cyber"] .code-block::before {
  content: "SYSTEM LOG // TERMINAL"; display: block; padding: 4px 16px;
  background: var(--bg3); border-bottom: 1px solid var(--border);
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em; color: var(--text3);
}

/* ==========================================================================
   13. 擴充元件（來自 v1.2 與 muse；token 已對應成 v1 的名稱）
   對照：--accent→--brand  --accent-soft→--brand-bg  --muted→--text2  --panel-2→--g-inset
         --panel-hover→--hover  --glass-strong→--g-strong  --radius-*→--r-*  --pill→--r-pill
   v1.2：dialog、popover、chip、tag、list-row、button 版開關（role="switch"）、spin、pulse
   muse：tip、breadcrumb、btn-top、btn-home、marquee、qitem、player-wrap、meta
   兩套並存（用途見 guide）：.qitem（muse）與 .list-row（v1.2）、.btn-top / .btn-home 與 .footer-link
   ========================================================================== */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@keyframes pop-in { from { opacity: 0; transform: translateY(6px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.spin { animation: spin 0.9s linear infinite; }
.pulse { animation: pulse 1.2s infinite; }

/* tag / chip */
.tag {
  display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; max-width: 100%;
  font-size: 12px; color: var(--text2); background: var(--g-inset); border-radius: var(--r-pill); padding: 1px 10px 1px 8px;
}
.tag span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip {
  display: inline-block; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--text); background: var(--g-strong); border-radius: var(--r-pill); padding: 2px 10px;
}
.chip.none { color: var(--text2); background: transparent; box-shadow: inset 0 0 0 1px var(--border); }

/* 跑馬燈：內容比容器寬時才需要。用法見展示頁 */
.marquee {
  width: 100%; container-type: inline-size; overflow: hidden; white-space: nowrap; font-size: 14px; font-weight: 500;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}
.marquee-track { display: flex; width: max-content; animation: marquee-scroll 20s linear infinite; }
.marquee-item { flex: 0 0 auto; min-width: 100cqw; padding-right: 48px; }
.marquee:hover .marquee-track { animation-play-state: paused; }

/* 隊列項目（muse）。功能與 .list-row 重複：.qitem 給用 muse 標記的網站，新網站建議用 .list-row */
.qitem {
  display: grid; grid-template-columns: 88px 1fr auto; gap: 8px; align-items: center;
  padding: 6px; border-radius: var(--r-ctl); background: transparent; cursor: pointer;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.qitem:hover { background: var(--g-inset); }
.qitem.active {
  background: var(--active-bg, var(--brand-bg));
  box-shadow: var(--active-ring, inset 0 0 0 1.5px var(--brand));
}
.qthumb {
  position: relative; width: 88px; aspect-ratio: 16 / 9; flex-shrink: 0;
  border-radius: calc(var(--r-ctl) * 0.7); overflow: hidden; background: var(--g-inset);
}
.qthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qthumb-fallback { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 600; color: var(--text2); }
.qindex {
  position: absolute; left: 5px; bottom: 5px; min-width: 18px; padding: 0 7px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.6); color: #fff; border-radius: 980px;
  font-size: 11px; font-weight: 600; line-height: 18px;
}
.qitem.active .qindex { background: var(--accent-grad, var(--brand)); color: var(--on-grad, #fff); }
.qinfo { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.qtitle {
  font-size: 13px; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.qmeta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.qmeta .meta { font-family: var(--font-mono); font-size: 12px; color: var(--text2); }
.qactions { align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; align-items: center; gap: 4px; }
.qicon-btn {
  width: 24px; height: 24px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none; border-radius: 50%; color: var(--text2); cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.qicon-btn:hover { color: var(--brand); background: var(--brand-bg); }
.qicon-btn .ic { width: 16px; height: 16px; }

/* 播放器外框（muse）：16:9，放 iframe 或 video */
.player-wrap {
  position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
  background: #000; border-radius: var(--r-card); box-shadow: var(--shadow);
}
.player-wrap > iframe, .player-wrap > video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* 小字說明（muse） */
.meta { font-family: var(--font-mono); font-size: 12px; color: var(--text2); }

/* 麵包屑、回頂部、回首頁 */
.breadcrumb { flex: 1; display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text2); }
.breadcrumb a { color: var(--text2); }
.breadcrumb a:hover { color: var(--brand); }
.btn-top, .btn-home {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px;
  color: var(--text2); background: var(--g-inset); border-radius: var(--r-pill); text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}
.btn-top:hover, .btn-home:hover { background: var(--brand-bg); color: var(--brand); text-decoration: none; }

/* 列表列（影片佇列、檔案列表等）。.is-active 目前項目；.is-error 失敗；.is-loading 載入中 */
.list-row {
  display: grid; grid-template-columns: 88px 1fr auto; gap: 8px; align-items: center;
  background: transparent; border-radius: var(--r-card); padding: 6px; cursor: pointer;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.list-row:hover { background: var(--hover); }
.list-row.is-active { background: var(--active-bg, var(--brand-bg)); box-shadow: var(--active-ring, inset 0 0 0 1.5px var(--brand)); }
.list-row.is-error { opacity: 0.7; cursor: default; }
.list-row.is-loading .list-title { color: var(--text2); animation: pulse 1.2s infinite; }
.list-thumb { position: relative; width: 88px; aspect-ratio: 16 / 9; border-radius: var(--r-ctl); overflow: hidden; background: var(--g-inset); }
.list-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.list-index {
  position: absolute; left: 4px; top: 4px; min-width: 18px; padding: 0 5px; border-radius: var(--r-pill);
  background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 10.5px; font-weight: 600; text-align: center;
}
.list-row.is-active .list-index { background: var(--accent-grad, var(--brand)); color: var(--on-grad, var(--on-brand)); }
.list-title { font-size: 13.5px; font-weight: 500; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.list-meta { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 11.5px; color: var(--text2); }
.list-actions { display: flex; gap: 2px; }

/* 迷你開關（button 版）。<button class="mini-switch" role="switch" aria-checked="false" data-toggle>
   狀態燈：data-status="ok | busy | error"（muse 的 .st-ok / .st-warn / .st-danger 也能用）
   和 v1 原有的 .switch（input checkbox 版）並存，用在不同標記 */
.mini-switch {
  display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
  border: 0; background: transparent; color: var(--text2);
  padding: 2px 0; font-size: 12px; font-weight: 500; letter-spacing: -0.01em; cursor: pointer;
  transition: color 0.2s ease;
}
.mini-switch .switch-label { min-width: 4em; text-align: right; white-space: nowrap; }
.mini-switch .switch-track {
  position: relative; width: 30px; height: 18px; flex-shrink: 0; border-radius: var(--r-pill);
  background: var(--g-inset); box-shadow: inset 0 0 0 1px var(--border); transition: background 0.2s ease;
}
.mini-switch:hover .switch-track { background: var(--hover); }
.mini-switch .switch-knob {
  position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--text3); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  transition: transform 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.1), background 0.2s ease;
}
.mini-switch[aria-checked="true"], .mini-switch.on { color: var(--text); }
.mini-switch[aria-checked="true"] .switch-track, .mini-switch.on .switch-track { background: var(--brand-bg); }
.mini-switch[aria-checked="true"] .switch-knob, .mini-switch.on .switch-knob { transform: translateX(12px); background: var(--brand); }
.mini-switch:is([data-status="ok"], .st-ok) .switch-track { background: color-mix(in srgb, var(--ok) 28%, transparent); }
.mini-switch:is([data-status="ok"], .st-ok) .switch-knob { transform: translateX(12px); background: var(--ok); animation: pulse 2.4s infinite; }
.mini-switch:is([data-status="busy"], .st-warn) .switch-track { background: color-mix(in srgb, var(--warn) 28%, transparent); }
.mini-switch:is([data-status="busy"], .st-warn) .switch-knob { transform: translateX(12px); background: var(--warn); animation: pulse 1s infinite; }
.mini-switch:is([data-status="error"], .st-danger) .switch-track { background: color-mix(in srgb, var(--danger) 28%, transparent); }
.mini-switch:is([data-status="error"], .st-danger) .switch-knob { background: var(--danger); }
.mini-switch:disabled { cursor: default; opacity: 0.6; }
.mini-switch:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: var(--r-pill); }

/* 浮出卡片：tip（muse）與 popover（v1.2）同一個外觀。位置由頁面的 JS 設定 top / left */
.tip, .popover {
  position: fixed; z-index: 390; width: 270px; padding: 10px 12px 12px;
  border-radius: var(--r-card); background: var(--g-strong); color: var(--text);
  -webkit-backdrop-filter: var(--g-filter); backdrop-filter: var(--g-filter);
  border: 1px solid var(--border); box-shadow: var(--shadow); font-size: 12px;
  animation: pop-in 0.18s ease-out;
}
.tip-title { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tip-hint { margin: 2px 0 8px; color: var(--text2); }
.tip-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.tip-row code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; -webkit-user-select: all; user-select: all; }

/* 對話框：<dialog class="dialog">；data-dialog-open="#id" 開啟，data-dialog-close 關閉，點背景也會關閉 */
.dialog {
  border: 0; padding: 0; color: var(--text); width: min(480px, calc(100vw - 32px));
  border-radius: var(--r-panel); background: var(--g-strong); box-shadow: var(--shadow);
  -webkit-backdrop-filter: var(--g-filter); backdrop-filter: var(--g-filter);
}
.dialog::backdrop { background: rgba(0, 0, 0, 0.35); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.dialog[open] { animation: pop-in 0.2s ease-out; }
.dialog-body { padding: 24px 24px 12px; }
.dialog-body h2 { margin: 0 0 8px; font-size: 20px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 24px 20px; }


/* ==========================================================================
   14. RWD、降級、減少動態
   ========================================================================== */
@media (max-width: 960px) {
  .layout { grid-template-columns: minmax(0, 1fr); padding: 10px; gap: 10px; }
  .page-footer { padding: 24px 20px; }
  .hero-section, .guide-cards { padding-left: 1.5rem; padding-right: 1.5rem; }

  /* Header 換行：選單鈕與品牌在第一列，搜尋與切換器各佔一列 */
  .header-inner { flex-wrap: wrap; gap: 8px; padding: 8px 16px; }
  .nav-toggle { display: inline-flex; }
  .brand { flex: 1 1 auto; }
  .header-meta { display: none; }
  .search-box { order: 4; flex: 1 1 100%; max-width: none; margin-left: 0; }
  .theme-switcher { order: 5; width: 100%; justify-content: flex-start; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .theme-btn { flex-shrink: 0; }
  .site-header { height: auto; }

  /* 長文版：目錄變成左側抽屜 */
  .layout--article .main-content { padding: 24px 20px 48px; border-radius: var(--r-side); }
  .layout--article .side-nav {
    position: fixed; top: 0; left: -300px; width: 280px; height: 100vh; max-height: none; z-index: 200;
    margin: 0; border-radius: 0 var(--r-side) var(--r-side) 0;
    background: var(--g-drawer); -webkit-backdrop-filter: var(--g-filter); backdrop-filter: var(--g-filter);
    box-shadow: var(--shadow); transition: left 0.3s ease;
  }
  .layout--article .side-nav.open { left: 0; }
  .layout--article .nav-close { display: inline-flex; }
  .nav-overlay { position: fixed; inset: 0; z-index: 150; background: rgba(0, 0, 0, 0.32); }
  .nav-overlay.open { display: block; }

  /* 儀表板版：分類變成可橫向滑動的膠囊列 */
  .layout--dash .side-nav {
    position: static; max-height: none; padding: 8px; display: flex; flex-direction: row; gap: 6px;
    overflow-x: auto; scrollbar-width: none;
  }
  .layout--dash .side-nav::-webkit-scrollbar { display: none; }
  .layout--dash .nav-title { display: none; }
  .layout--dash .nav-item { width: auto; flex-shrink: 0; margin: 0; padding: 7px 12px; white-space: nowrap; border-radius: var(--r-pill); background: var(--g-inset); }
  .layout--dash .nav-item .label { overflow: visible; }
  .layout--dash .main-content { padding: 16px; border-radius: var(--r-side); }
  .sec-head h2 { font-size: 21px; }
}

/* 表格卡片化：小螢幕隱藏表頭，用 td 的 data-label 當欄名 */
@media (max-width: 640px) {
  .data-table thead { display: none; }
  .data-table, .data-table tbody, .data-table tr, .data-table td { display: block; width: 100%; }
  .data-table tr { margin-bottom: 16px; padding: 12px; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r-code); }
  .data-table td { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border: none; }
  .data-table td::before { content: attr(data-label); flex-shrink: 0; font-weight: 600; color: var(--text2); }
}
@media (max-width: 480px) {
  .theme-btn { width: 28px; }
}

/* 不支援 backdrop-filter 時，改用較不透明的底 */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .site-header { background: var(--g-strong); }
  .layout--dash .main-content, .tp-pop, .tip, .popover, .dialog { background: var(--g-strong); }
  @media (max-width: 960px) { .layout--article .side-nav { background: var(--g-strong); } }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .marquee-track { animation: none; }
}