/* base.css — 設計 token、頂欄、頁面容器、底部導覽
   從 index.html 行 13–101 原樣搬出（2026-10-03 拆檔，未改內容）*/
  :root {
    --bg:    #0F141B;
    --card:  #171E27;
    --card2: #202936;
    --border:#2C3747;
    --dim:   #98A4B3;
    --bright:#E8EDF3;
    --mono:  'Microsoft JhengHei','微軟正黑體',sans-serif;   /* CP7 Visual Gate（PO）：全站數字字型統一為微軟正黑體；只換字型，各處 font-size 不變（token 名稱沿用） */
    --sans:  'Microsoft JhengHei','微軟正黑體',sans-serif;
    --cheap: #4FC59A;
    --fair:  #D6A84B;
    --dear:  #F06A6A;
    --up:    #F06A6A;
    --dn:    #4FC59A;
    --bond:  #4C8DFF;   /* 債券型標示。刻意避開紅漲綠跌與四態四色，
                          讀起來是「分類」不是「買賣判斷」；灰色在深色底太弱，
                          債券和股票是兩種商品，要讓人一眼看出來 */
    --sea:   #164c80;   /* 海外持股標示（藍底白字）。深色底的大色塊不能用亮藍，
                          #1f6feb 整片鋪下去會刺眼。這個配白字對比 8.8:1，
                          比原本的 4.63:1 還好讀。不沿用 --bond #58a6ff：
                          那是當文字色用的淺藍，鋪底配白字只有約 2:1 會糊。
                          兩個藍分屬排行頁與主動頁，不會同框出現。 */
  --gold:  #D6A84B;
    --nav-h: 62px;
    /* CP7 Visual Gate（PO 方案 B）：排名 1～3 金／銀／銅識別——首頁 TOP10（light）與排行 TOP100（兩主題）共用同一組色 */
    --rank1-bg:#D49A06; --rank1-fg:#FFFFFF;
    --rank2-bg:#CAD8EC; --rank2-fg:#0A42A4;
    --rank3-bg:#D07540; --rank3-fg:#FFFFFF;
    /* CP7 Visual Gate：全站 ETF 代碼／名稱 typography（Source of Truth＝首頁條列 .wait-code／.wait-name）；兩主題同邏輯，色彩走主題 token */
    --etf-code-font: var(--sans); --etf-code-size: 16px; --etf-code-weight: 700;
    --etf-name-size: 16px; --etf-name-weight: 400;
    /* ── Phase 5 V2：全站 visual tokens（PHASE5_PLAN §7.2）。CP7 Visual Gate：dark／light 依 PO 核准 palette（AI_HANDOFF 記錄），換主題只換這裡 ── */
    --hot:   #FB8A8A;   /* 過熱（標籤為 12% 淡底＋--card2，實際 rendered 對比需 ≥ 4.5；#ef4444 僅 4.27） */
    --warn:  #F59E0B;   /* 偏貴（橘）、現價 */
    --brand: #4C8DFF;   /* 品牌橘：面板標題、配息方式 */
    --link:  #4C8DFF;   /* ETF 名稱、連結、中性藍強調（選取框） */
    --silver:#C0C8D2;
    --bronze:#D08A4E;
    --violet:#A78BFA;   /* 排行欄位名稱 */
    --mood-cta:#4C8DFF;
    --src-official:#67C3E0;
    --err-text:#F87171;
    --err-soft:#FECACA;
    --on-strong:#ffffff;   /* 深色色塊（--sea）上的文字 */
    --fair-dim:#A8913F;    /* 殖利率未核實（原 #8b7020 對比 3.4～4.0:1，TH-6 調亮至 ≥ 5.2:1） */
    --hdr-bg: rgba(15,20,27,.92);
    --nav-bg: rgba(23,30,39,.96);
    --tm-border: rgba(15,20,27,.85);
    --shadow-pop:  0 10px 28px rgba(0,0,0,.45);
    --shadow-menu: 0 6px 18px rgba(0,0,0,.45);
    --shadow-lift: 0 10px 26px rgba(0,0,0,.6);
    --shadow-band: 0 -3px 8px rgba(0,0,0,.28);
    /* RGB 三元組：給 rgba(var(--rgb-x), α) 的淡底／框線／treemap 透明度使用 */
    --rgb-cheap: 79,197,154;
    --rgb-fair:  214,168,75;
    --rgb-up:    240,106,106;
    --rgb-dn:    79,197,154;
    --rgb-warn:  245,158,11;
    --rgb-hot:   251,138,138;
    --rgb-link:  76,141,255;
    --rgb-gold:  214,168,75;
    --rgb-violet:139,92,246;
    --rgb-neutral:152,164,179;
    --rgb-veil:  255,255,255;   /* 深底上的白色薄紗；light 換成黑色薄紗 */
    --tech:  #A78BFA;   /* 科技類視覺語言（紫） */
    --active:#F59E0B;   /* 主動式視覺語言（橘） */
    --rgb-tech:  139,92,246;
    --rgb-active:245,158,11;
    /* ── 五個估值／狀態色（PO Hard Constraint，CP7 Visual Gate）：取 CP7 改版前正式版本的原始色，
          dark 與 light 完全相同、不另做變體，也不為對比改色（Status 標籤兩主題皆透明底：text／border＝原色、底透出所在 surface） ── */
    --sig-hot:   #ef4444;   /* 過熱 */
    --sig-dear:  #fb923c;   /* 偏貴 */
    --sig-fair:  #F0B840;   /* 合理 */
    --sig-cheap: #00e5a0;   /* 便宜 */
    --sig-bond:  #58a6ff;   /* 債券 */
    --sig-backing: transparent; /* CP7 Visual Gate（PO）：Light＋Dark 狀態標籤都取消底襯，直接透出 card／row／panel 的 surface（對比 Known Blocker 見 AI_HANDOFF） */
    /* CP7 Visual Gate（PO：DO NOT OXIDIZE）：鮮明台股紅綠——排行報酬率／漲跌柱、Active Flow 加減碼與 treemap 共用同一組 */
    --vivid-up: #F46161;  --vivid-dn: #22C55E;           /* 文字（PO Visual Polish：排行改 --card2 底後 #F25555 只剩 4.33，微調到 4.7） */
    --vivid-up-fill: #EF4444; --vivid-dn-fill: #22C55E;  /* 柱狀／填色 */
    --rgb-vivid-up: 239,68,68; --rgb-vivid-dn: 34,197,94;
    --num-accent: #FACC15;   /* 配息頻率、殖利率、配息金額：dark 鮮黃 */
    color-scheme: dark;
  }
  /* Light（PHASE5_PLAN §7.1／§7.2）：台股漲紅跌綠、紅＝加碼／綠＝減碼語意不變，只換成淺底可讀的加深版。
     對比以 theme_test TH-6 量測（正文 ≥ 4.5:1、大字與圖形 ≥ 3:1） */
  :root[data-theme="light"] {
    --bg:    #FEF8E2;   /* CP7 Visual Gate（PO reference）：淡奶油／象牙 page 底；card 維持白，形成 暖 page → 白 card → 功能色 surface */
    --card:  #FFFFFF;
    --card2: #EEF2F8;
    --border:#DDE3EC;
    --dim:   #617187;   /* CP7：奶油 page 底 #FEF8E2 上 #64748B 只有 4.47，微調到 4.68（白 card 4.98） */
    --bright:#1F2937;
    --cheap: #065F46;
    --fair:  #A14A07;
    --dear:  #B91C1C;
    --up:    #DC2626;
    --dn:    #047857;
    --bond:  #1D4ED8;
    --sea:   #164c80;
    --gold:  #A14A07;
    --hot:   #B91C1C;
    --warn:  #9A3412;
    --brand: #2563EB;
    --link:  #2563EB;
    --silver:#536176;
    --bronze:#9A5B2E;
    --violet:#7C3AED;
    --mood-cta:#2563EB;
    --src-official:#0E7490;
    --err-text:#B91C1C;
    --err-soft:#7F1D1D;
    --fair-dim:#8A6A2B;
    --hdr-bg: rgba(254,248,226,.94);
    --nav-bg: rgba(255,255,255,.96);
    --tm-border: rgba(255,255,255,.9);
    --shadow-pop:  0 10px 28px rgba(31,35,40,.16);
    --shadow-menu: 0 6px 18px rgba(31,35,40,.16);
    --shadow-lift: 0 10px 26px rgba(31,35,40,.24);
    --shadow-band: 0 -3px 8px rgba(31,35,40,.10);
    --rgb-cheap: 5,150,105;
    --rgb-fair:  217,119,6;
    --rgb-up:    220,38,38;
    --rgb-dn:    5,150,105;
    --rgb-warn:  194,65,12;
    --rgb-hot:   185,28,28;
    --rgb-link:  37,99,235;
    --rgb-gold:  217,119,6;
    --rgb-violet:124,58,237;
    --rgb-neutral:100,116,139;
    --rgb-veil:  15,23,42;
    --tech:  #7C3AED;
    --active:#B45309;
    --rgb-tech:  124,58,237;
    --rgb-active:245,158,11;
    --vivid-up: #D02020;  --vivid-dn: #147A3A;   /* 同上：在 --card2 #EEF2F8 上 ≥ 4.5 */
    --vivid-up-fill: #EF4444; --vivid-dn-fill: #16A34A;
    --rgb-vivid-up: 239,68,68; --rgb-vivid-dn: 22,163,74;
    --num-accent: #D97706;   /* light 橘（PO 指定琥珀 #D97706） */
    --cheap-light: #059669;  /* light「便宜」綠（首頁與排行共用；PO reference 未入 repo，沿用核准 palette 便宜填色） */
    --sig-cheap: #059669;    /* CP7 Visual Gate（PO）：只有 Light 的「便宜」改綠（文字＋框、透明底）；Dark 維持 #00e5a0 */
    color-scheme: light;
  }
  /* CP7 Visual Gate 元件層最小處理（不改整體 palette）：
     ① 核准次要文字 #64748B 在柔和藍灰次要 surface（--card2）上只有約 4.2:1 → 只在這些次要 surface 元件內把 --dim 加深
     ② 文字型語意色（便宜／合理／偏貴／過熱／債券／金色）在 light 用同色相的加深版當字色；淡底、框線、treemap 等填色仍用核准色（--rgb-*）
     ③ 排行欄位名稱的紫色淡底降到 8%，紫字對比才達 4.5 */
  :root[data-theme="light"] :is(.gs-more, .cat-band, .cat-strip button, .cat-more, .cat-expand, .cat-more-in, .router-proc,
    .mood-card, .home-entry, .empty-state, .hot-item, .rank-row, .cal-item, .flow-tot, .cat-list, .tool-card, .home-row, .home-empty, .flow-note, .np-mkt, .wt-go, .calc-out, .num-input) { --dim: #536176; }
  :root[data-theme="light"] .rank-hdr { background: rgba(var(--rgb-violet), .08); }
  /* YouTube 橫向品牌 Logo（PO-Locked Brand Styling）：紅色 Play Mark＋wordmark（dark 白、light 近黑），不受 --dim 灰階影響；
     不是紅底按鈕。點擊區高 44px，寬度隨 wordmark */
  .hdr-btn.hdr-yt { width:auto; gap:4px; padding:0 6px; border-color:transparent; color:#FFFFFF; }
  :root[data-theme="light"] .hdr-btn.hdr-yt { color:#0F0F0F; }
  .hdr-yt .yt-play { flex-shrink:0; }
  .hdr-yt .yt-word { font-family:Arial,'Helvetica Neue',sans-serif; font-weight:700; font-size:16px; letter-spacing:-.6px; line-height:1; }
  /* 窄螢幕（360 portrait）：縮 wordmark 與內距，讓左側 LIVE 狀態徽章不被擠成兩行；點擊區高度仍 44 */
  @media (max-width:380px) {
    .hdr-btn.hdr-yt { gap:3px; padding:0 2px; }
    .hdr-yt .yt-play { width:24px; height:17px; }
    .hdr-yt .yt-word { font-size:14px; letter-spacing:-.5px; }
  }
  * { box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }

  html { overflow-x:hidden; }
  body {
    background:var(--bg); color:var(--bright);
    font-family:var(--sans); font-size:16px;
    max-width:430px; margin:0 auto;
    min-height:100vh; position:relative;
  }

  /* 用 hidden 屬性開關的元素（搜尋下拉、結果面板、錯誤橫幅…）一律吃這條，
     免得哪天有人給它加了 display 就把 hidden 蓋掉 */
  [hidden] { display:none !important; }

  /* ── Top bar ── */
  /* 2026-10-03：sticky／背景／邊框從 .topbar 移到外層 .app-hdr，
     讓「標題列 ＋ 搜尋列」整塊一起黏在頂部，只有一個 sticky 層，
     不會跟排行頁的 .rank-sticky 互相打架 */
  .app-hdr {
    position:sticky; top:0; z-index:50;
    background:var(--hdr-bg); backdrop-filter:blur(12px);
    border-bottom:1px solid var(--border);
  }
  .topbar {
    padding:12px 16px 10px;
    display:flex; align-items:center; justify-content:space-between;
  }

  /* ── 全站搜尋（Phase 1） ── */
  .gsearch-bar  { padding:0 14px 10px; position:relative; }
  .gsearch-wrap { position:relative; display:flex; align-items:center; }
  .gsearch-wrap .gs-ico { position:absolute; left:11px; font-size:14px; pointer-events:none; opacity:.75; }
  .gsearch-bar input {
    width:100%; box-sizing:border-box;
    background:var(--card); color:var(--bright);
    border:1px solid var(--border); border-radius:9px;
    /* 16px 是下限不是美感選擇：iOS Safari 對字級 < 16px 的輸入框，
       聚焦時會自動把頁面放大且不會縮回去（user-scalable=no 從 iOS 10 起無效）。
       站上其他輸入框本來就都是 16px，這裡對齊。 */
    padding:10px 34px 10px 32px; font-size:16px; font-family:var(--sans);
  }
  .gsearch-bar input::placeholder { color:var(--dim); }
  .gsearch-bar input:focus { outline:none; border-color:var(--link); }
  .gs-clear {
    position:absolute; right:6px; background:none; border:none;
    color:var(--dim); font-size:15px; cursor:pointer; padding:4px 7px; line-height:1;
  }
  /* 下拉掛在 .app-hdr（sticky 會建立包含區塊），所以 top:100% 就是表頭正下方 */
  .gsearch-list {
    position:absolute; left:14px; right:14px; top:100%; z-index:60;
    background:var(--card); border:1px solid var(--border);
    border-radius:10px; overflow:hidden auto;
    /* 最後防線。實際高度由 search.js 的 _gsSyncListMax() 依 visualViewport
       逐次量測後以行內樣式覆蓋——vh 量不到虛擬鍵盤佔掉的空間。 */
    max-height:46vh;
    box-shadow:var(--shadow-pop);
  }
  .gs-row {
    display:flex; align-items:center; gap:10px;
    padding:10px 12px; cursor:pointer; border-bottom:1px solid var(--border);
  }
  .gs-row:last-child { border-bottom:none; }
  .gs-row { min-height:44px; }                       /* V3：搜尋結果列觸控目標 ≥ 44px */
  body.gs-ckm .gs-row { min-height:0; }              /* 橫向＋鍵盤的緊湊模式維持原設計 */
  .gs-row:hover, .gs-row.on { background:var(--card2); }
  .gs-code { font-family:var(--mono); font-size:14px; font-weight:700; flex:0 0 62px; }
  .gs-name { flex:1 1 auto; min-width:0; font-size:14px; color:var(--dim);
             overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .gs-px   { font-family:var(--mono); font-size:13px; flex:0 0 auto; text-align:right; }
  .gs-chg  { margin-left:6px; }
  .gs-more { padding:9px 12px; font-size:12.5px; color:var(--dim); text-align:center;
             border-top:1px solid var(--border); background:var(--card2); }
  .gs-empty{ padding:16px 14px; font-size:14px; color:var(--dim); line-height:1.7; text-align:center; }
  .gs-empty span { font-size:13px; opacity:.8; }

  /* ETF 詳細頁容器：蓋在內容上，不動原本五個分頁的結構。內容由 js/detail.js 注入 */
  .gs-panel {
    position:fixed; left:50%; transform:translateX(-50%);
    top:var(--hdr-h, 104px); bottom:var(--nav-h);
    width:100%; max-width:430px;
    /* ⚠ 必須低於 .app-hdr 的 50。.app-hdr 是 sticky＋z-index，會建立堆疊脈絡，
       所以裡面的下拉寫 z-index:60 對外仍等同 50；面板只要 ≥50 就會蓋住下拉。
       面板本來就從表頭下緣開始，壓在表頭之下不影響外觀。 */
    z-index:40;
    background:var(--bg); overflow-y:auto;
    border-top:1px solid var(--border);
  }
  /* 詳細頁往下捲時收起頂部區域，回到頂部再出現（js/detail.js 的 _dtSyncCollapse） */
  /* 橫向＋鍵盤的精簡搜尋模式（js/search.js 的 _gsSyncCkm）：
     標題與次要元件讓位，搜尋框留在最上方，導覽與詳細頁暫時收起，鍵盤收起即恢復 */
  body.gs-ckm .topbar { display:none; }
  body.gs-ckm .app-hdr { position:static; }
  body.gs-ckm .bottom-nav { display:none; }
  body.gs-ckm #gsPanel { display:none; }
  body.gs-ckm .gsearch-bar { padding-top:0; padding-bottom:4px; }
  body.gs-ckm .gsearch-bar input { font-size:17px; height:28px; line-height:28px; padding-top:0; padding-bottom:0; }
  body.gs-ckm .gs-row { padding:6px 12px; }
  body.dt-collapsed .app-hdr { display:none; }
  body.dt-collapsed #gsPanel { top:0; }
  body.dt-collapsed #gsPanel .gs-panel-hd { display:none; }
  .gs-panel-hd {
    position:sticky; top:0; z-index:1; background:var(--bg);
    display:flex; align-items:center; justify-content:space-between;
    gap:10px; padding:12px 14px 10px; border-bottom:1px solid var(--border);
  }
  .gs-panel-hd .t { font-size:15px; min-width:0; overflow:hidden;
                    text-overflow:ellipsis; white-space:nowrap; }
  /* 全站 ETF 代碼／名稱：首頁、Detail 標題、分類清單、100 排行共用同一組 typography（只改字型／字級／字重／顏色，不動 layout） */
  .wait-code, .cr-code, .rank-code, .gs-panel-hd .t b {
    font-family:var(--etf-code-font); font-size:var(--etf-code-size); font-weight:var(--etf-code-weight); color:var(--bright); }
  .wait-name, .cr-name, .rank-name, .gs-panel-hd .t .etf-name {
    font-family:var(--sans); font-size:var(--etf-name-size); font-weight:var(--etf-name-weight); color:var(--link); }
  /* V3：Detail「✕ 關閉」與搜尋清除鈕外觀不變，用透明 ::after 把可點範圍擴到 ≥ 44px */
  #dtClose { position:relative; }                    /* .gs-clear 本身已是 position:absolute */
  #dtClose::after { content:''; position:absolute; inset:-9px -5px; }   /* 28px 高（含框線）→ 可點約 46px */
  .gs-clear::after { content:''; position:absolute; top:50%; left:50%; width:44px; height:44px; transform:translate(-50%,-50%); }
  .gs-panel-hd button {
    background:none; border:1px solid var(--border); border-radius:8px;
    color:var(--dim); font-size:15px; cursor:pointer; padding:4px 10px; line-height:1.2;
  }
  .gs-panel-body { padding:12px 14px 20px; }
  .gs-flow-btn {
    width:100%; margin-top:12px; padding:12px;
    background:var(--card); color:var(--bright);
    border:1px solid var(--border); border-radius:10px;
    font-size:15px; font-family:var(--sans); cursor:pointer;
  }
  .gs-flow-btn:hover { background:var(--card2); }
  .gs-note { margin-top:14px; font-size:13px; color:var(--dim); line-height:1.7; }
  /* 品牌標題「金流黑盒子 ETF存股雷達」一律單行，不縮字、不截字 */
  .topbar-title { font-size:16px; font-weight:700; letter-spacing:.02em; white-space:nowrap; }
  /* 手機（≤ 440px）：右側 YouTube＋主題＋重新整理約 190px，與標題放不進同一列。
     改成錯位兩列：第一列標題獨占整寬；第二列左邊狀態徽章、右邊按鈕群（靠右、比標題低）。
     左欄容器 display:contents，標題與徽章直接成為格線項目；按鈕仍是 44×44。 */
  @media (max-width: 440px) {
    .topbar { display:grid; grid-template-columns:minmax(0, 1fr) auto; grid-template-areas:"title title" "badge act";
              align-items:center; column-gap:8px; row-gap:0; padding-bottom:6px; }
    .topbar > div:first-child { display:contents; }
    .topbar-title { grid-area:title; }
    .topbar .status-badge { grid-area:badge; justify-self:start; margin-top:0; }
    .topbar .hdr-actions { grid-area:act; top:0; }   /* 選擇器加 .topbar：須蓋過後面桌面版的 top:8px */
  }
  .topbar-sub   { font-family:var(--mono); font-size:16px; color:var(--dim); margin-top:1px; }
  .status-badge { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; border-radius:6px; padding:2px 8px; margin-top:3px; }
  .status-live  { background:rgba(var(--rgb-cheap),.12); color:var(--cheap); border:1px solid rgba(var(--rgb-cheap),.3); }
  .status-live::before { content:''; display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--cheap); animation:pulse 1.2s ease-in-out infinite; }
  .status-closed  { background:rgba(var(--rgb-neutral),.10); color:var(--dim); border:1px solid var(--border); }
  .status-holiday { background:rgba(var(--rgb-neutral),.10); color:var(--dim); border:1px solid var(--border); }
  /* 資料載入失敗。刻意不加 animation——會閃的東西一律不要 */
  .status-error   { background:rgba(var(--rgb-up),.12); color:var(--err-text); border:1px solid rgba(var(--rgb-up),.35); }
  .data-error     { margin:0 14px 12px; padding:12px 14px; border-radius:8px; font-size:14px; line-height:1.7;
                    background:rgba(var(--rgb-up),.08); border:1px solid rgba(var(--rgb-up),.3); color:var(--err-soft); }
  .data-error b   { color:var(--bright); font-weight:600; }
  .data-error[hidden] { display:none; }
  @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }
  .refresh-btn  { background:none; border:1px solid var(--border); border-radius:8px; padding:6px 10px; color:var(--dim); font-size:16px; cursor:pointer; line-height:1; }
  /* Header 右側按鈕群（Phase 5 Y1）：YouTube 外部連結＋↻，各 44×44；標題與狀態徽章留在左側不動 */
  /* 2026-10-10 品牌 Header：右側按鈕群整排下移 8px（position:relative 不改變表頭高度與標題位置） */
  .hdr-actions { display:flex; align-items:center; gap:8px; flex-shrink:0; position:relative; top:8px; }
  .hdr-btn { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; padding:0;
             background:none; border:1px solid var(--border); border-radius:10px; color:var(--dim);
             font-size:18px; line-height:1; text-decoration:none; cursor:pointer; }
  .hdr-btn:active { background:var(--card2); }
  .refresh-btn.spinning { animation:spin .6s linear infinite; }
  @keyframes spin { to { transform:rotate(360deg); } }
  .disclaimer {
    background:rgba(var(--rgb-fair),.08); border-bottom:1px solid rgba(var(--rgb-fair),.2);
    padding:4px 12px; font-size:14px; color:var(--fair);
    text-align:center; letter-spacing:0; line-height:1.45;
  }
  .demo-badge {
    background:rgba(var(--rgb-fair),.12); color:var(--fair);
    border:1px solid rgba(var(--rgb-fair),.4); border-radius:4px;
    padding:2px 8px; font-size:16px; font-family:var(--mono);
  }

  /* ── Page container ── */
  .pages { padding-bottom:calc(var(--nav-h) + 8px); }
  .page  { display:none; padding:14px 14px 0; }
  .page.active { display:block; }

  /* ── Bottom nav ── */
  .bottom-nav {
    position:fixed; bottom:0; left:50%; transform:translateX(-50%);
    width:100%; max-width:430px;
    height:var(--nav-h);
    background:var(--nav-bg); backdrop-filter:blur(16px);
    border-top:1px solid var(--border);
    display:flex; z-index:100;
  }
  .nav-btn {
    flex:1; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:4px;
    cursor:pointer; border:none; background:none;
    color:var(--dim); transition:color .15s; padding:8px 0;
  }
  .nav-btn.active { color:var(--link); }
  .nav-btn svg { width:22px; height:22px; }
  .nav-btn span { font-size:14px; font-weight:500; }