/* FuNi 儀表板樣式 — 2026-06-21 從 index.html 抽出為外部檔(快取友善、好維護)。改樣式改這裡。*/

/* ===== 區塊 1(原 index.html 內嵌 <style>)===== */
    /* ───── Base Font Size ───── */
    html { font-size: 15px; }
    @media (max-width: 900px) { html { font-size: 15px; } }

    /* ───── CSS Variables ───── */
    :root {
      --bg:        #121214;
      --bg2:       #18181b;
      --surface:   #1e1e22;
      --surface2:  #28282d;
      --border:    #3a3a40;
      --border2:   #4a4a52;
      --text:      #ffffff;
      --text2:     #e4e4ea;
      --text3:     #c0c0ca;
      --accent:    #5285c4;
      --accent2:   #3a6aa8;
      --green:     #8fe7c0;
      --yellow:    #f5ca5e;
      --cyan:      #66e0fa;
      --purple:    #b8a6ec;
      --orange:    #f5a868;
      --red:       #f79b80;
      --usd:       #ffd35c;
      --cardline:  transparent;
    }
    html[data-theme="light"] {
      --bg:        #faf9f7;
      --bg2:       #f5f3ee;
      --surface:   #ffffff;
      --surface2:  #f3f1ec;
      --border:    #e3e0d8;
      --border2:   #d4cfc3;
      --text:      #1c1c1a;
      --text2:     #5a564e;
      --text3:     #8a857b;
      --accent:    #3b7fd4;
      --accent2:   #2d63ab;
      --green:     #16a472;
      --yellow:    #e0a51e;
      --cyan:      #14a8cc;
      --purple:    #8a63d9;
      --orange:    #e88439;
      --red:       #d65f47;
      --usd:       #c79016;
      --cardline:  #e3e0d8;
    }

    * { box-sizing: border-box; transition: background-color .2s, border-color .2s, color .2s; }

    body {
      background: var(--bg);
      color: var(--text);
      font-family: 'Segoe UI', 'Microsoft JhengHei UI', 'Microsoft JhengHei', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility;
      min-height: 100vh;
    }

    /* ───── Scrollbar ───── */
    ::-webkit-scrollbar { width: 5px; }
    ::-webkit-scrollbar-track { background: var(--bg2); }
    ::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }

    /* ───── Header ───── */
    .header {
      background: var(--surface);
      border-bottom: 1px solid var(--border);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      position: sticky; top: 0; z-index: 20;
    }
    html[data-theme="dark"] .header {
      background: rgba(30, 30, 34,0.92);
    }

    /* ───── Card ───── */
    .card {
      background: var(--surface);
      border: 0.5px solid var(--cardline);
      border-radius: 13px;
      transition: border-color .2s;
    }
    html[data-theme="dark"] .card:hover {
      border-color: var(--border);
      box-shadow: none;
    }
    html[data-theme="light"] .card:hover {
      box-shadow: 0 2px 10px rgba(0,0,0,.05);
    }

    /* ───── Stat Cards ───── */
    .stat-card {
      background: var(--surface);
      border: 0.5px solid var(--cardline);
      border-radius: 13px;
      padding: 18px;
      position: relative;
      overflow: hidden;
    }
    .stat-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 2px;
      border-radius: 14px 14px 0 0;
    }
    /* 2026-06-12 暖黑換皮:KPI 彩條移除(對齊 _dashprev 純平面) */
    /* 2026-05-29 #4 六卡自動撐(不靠 Tailwind 斷點)— 卡最小 140px、能塞幾張塞幾張 */
    .stats-row-7 {
      display: grid !important;
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      gap: 8px;
    }
    .stats-row-7 .stat-card { padding: 10px 12px; }
    .stats-row-7 .stat-card p.text-xs { font-size: 10.5px; line-height: 1.3; color: var(--text2) !important; }
    .stats-row-7 .stat-card p.text-xl { font-size: 17px; }
    /* APEX 預測卡:大箭頭 + 區間 */
    .apex-forecast-value {
      margin-top: 4px;
      display: flex; align-items: center; gap: 6px;
      font-weight: 500; line-height: 1;
    }
    .apex-forecast-value .apex-arrow {
      font-size: 24px; font-weight: 900;
      text-shadow: 0 0 8px currentColor;
      letter-spacing: -1px;
    }
    .apex-forecast-value .apex-range { font-size: 15px; }
    .apex-arrow.up   { color: #8fe7c0 !important; }  /* 看漲綠 */
    .apex-arrow.down { color: #f79b80 !important; }  /* 看跌紅 */
    .apex-arrow.flat { color: #94a3b8 !important; }  /* 持平灰 */
    /* 手機 (<480px) 字體略大、padding 寬 */
    @media (max-width: 479px) {
      .stats-row-7 { grid-template-columns: repeat(2, 1fr); }
      .stats-row-7 .stat-card { padding: 14px; }
      .stats-row-7 .stat-card p.text-xs { font-size: 11px; }
      .stats-row-7 .stat-card p.text-xl { font-size: 19px; }
    }

    /* ───── 2026-06-11 終端批3+4:segmented control + 表格專業化 ───── */
    .seg-ctl {
      background: var(--bg2);
      border: 1px solid var(--border);
      border-radius: 9px;
      padding: 2px;
      gap: 1px !important;
    }
    .seg-ctl .tab-btn { border-radius: 7px; }
    .seg-ctl .tab-btn.active {
      background: rgba(82, 133, 196,.16);
      color: var(--accent);
      box-shadow: inset 0 0 0 1px rgba(82, 133, 196,.35);
    }
    .data-table { font-variant-numeric: tabular-nums; }
    .data-table th { text-transform: uppercase; letter-spacing: .08em; }
    .data-table tbody tr { transition: background .12s; }
    .data-table tbody tr:nth-child(even) { background: rgba(148,163,184,.035); }

    /* ───── 2026-06-11 終端批5:跑馬燈 + 對比拉高 + 大號等寬數字 ───── */
    #term-ticker { color: var(--text2); font-size: 12px; }
    #term-ticker b { font-size: 13px; }
    .tk-marquee { overflow: hidden; flex: 1; min-width: 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
    .tk-track { display: inline-flex; white-space: nowrap; animation: tkscroll 36s linear infinite; will-change: transform; }
    .tk-track:hover { animation-play-state: paused; }
    .tk-half { display: inline-flex; align-items: center; gap: 20px; padding-right: 20px; }
    @keyframes tkscroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
    @media (prefers-reduced-motion: reduce) { .tk-track { animation: none; } }
    .tk-cur { font-weight: 500; font-size: 10.5px; padding: 1px 8px; border-radius: 5px; letter-spacing: .08em; flex-shrink: 0; }
    .tk-cur-usd { background: rgba(255,211,92,.14); color: var(--usd); }
    .tk-cur-ust { background: rgba(102, 224, 250,.16); color: #66e0fa; }
    .stat-card::before { height: 3px; }
    .stats-row-7 .stat-card p.text-xl {
      font-size: 19px;
      font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
      letter-spacing: -0.3px;
    }
    .apex-forecast-value .apex-range { font-size: 19px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
    @media (max-width: 479px) {
      .stats-row-7 .stat-card p.text-xl { font-size: 22px; }
    }

    /* ───── 2026-06-11 跑馬燈分組框:幣別歸屬一眼分明 ───── */
    .tk-grp { display: inline-flex; align-items: center; gap: 13px; padding: 2px 12px 2px 3px; border-radius: 7px; border: 1px solid transparent; }
    .tk-grp-usd { background: rgba(255,211,92,.05); border-color: rgba(255,211,92,.14); }
    .tk-grp-ust { background: rgba(102, 224, 250,.06); border-color: rgba(102, 224, 250,.16); }
    .tk-half { gap: 28px; padding-right: 28px; }

    /* ───── 2026-06-11 終端批7:報表 KPI 等寬數字 + 預設鈕 active 底色 ───── */
    #rpt-kpi-total, #rpt-kpi-apy, #rpt-kpi-avg, #rpt-kpi-cmp {
      font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
      letter-spacing: -0.5px;
    }
    .report-preset-btn.active { background: rgba(82, 133, 196,.16); }

    /* ───── 2026-06-11 設定列開關防擠(EN 長文案) ───── */
    .toggle-switch { flex-shrink: 0; }

    /* ───── 2026-06-11 終端批1:方向閃色 + 行情條 + 細滾動條 ───── */
    @keyframes tickup {
      0%   { color: #8fe7c0; text-shadow: 0 0 14px rgba(143, 231, 192,.75); transform: scale(1.045); }
      100% { text-shadow: 0 0 0 transparent; transform: scale(1); }
    }
    @keyframes tickdown {
      0%   { color: #f79b80; text-shadow: 0 0 14px rgba(247, 155, 128,.75); transform: scale(1.045); }
      100% { text-shadow: 0 0 0 transparent; transform: scale(1); }
    }
    .tick-up   { animation: tickup .65s ease-out; transform-origin: left center; }
    .tick-down { animation: tickdown .65s ease-out; transform-origin: left center; }
    #term-ticker {
      display: flex; align-items: center; gap: 16px;
      font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
      font-size: 11.5px; color: var(--text3);
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 10px; padding: 7px 14px; margin-bottom: 14px;
      overflow-x: auto; white-space: nowrap;
      font-variant-numeric: tabular-nums;
    }
    #term-ticker::-webkit-scrollbar { display: none; }
    #term-ticker b { color: var(--text); font-weight: 500; margin-left: 5px; }
    #term-ticker .tk-unit { font-size: 9.5px; opacity: .65; margin-left: 2px; }
    #term-ticker .tk-sep { width: 1px; height: 14px; background: var(--border); flex-shrink: 0; }
    #term-ticker .tk-live { color: #8fe7c0; font-weight: 500; letter-spacing: .12em; font-size: 10px; }
    ::-webkit-scrollbar { width: 9px; height: 9px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 5px; }
    ::-webkit-scrollbar-thumb:hover { background: var(--text3); }

    /* ───── 2026-06-11 數字卡質感升級 stage1:hover懸浮+同色光暈+數值更新脈衝 ───── */
    .stat-card {
      transition: transform .18s ease, box-shadow .25s ease, border-color .25s ease;
    }
    .stat-card:hover {
      transform: translateY(-2px);
      border-color: var(--border2);
      box-shadow: 0 8px 24px rgba(0,0,0,.45);
    }
    html[data-theme="light"] .stat-card:hover { box-shadow: 0 2px 10px rgba(0,0,0,.05); }
    .stat-card::after {
      content: '';
      position: absolute;
      top: -35%; right: -25%;
      width: 75%; height: 95%;
      border-radius: 50%;
      filter: blur(26px);
      opacity: .10;
      pointer-events: none;
      transition: opacity .25s;
    }
    .stat-card:hover::after { opacity: .2; }
    html[data-theme="light"] .stat-card::after { opacity: .06; }
    html[data-theme="light"] .stat-card:hover::after { opacity: .12; }
    /* 2026-06-12 暖黑換皮:KPI 模糊光暈移除 */
    .stats-row-7 .stat-card p.text-xl, .apex-forecast-value { font-variant-numeric: tabular-nums; }
    @keyframes valpulse {
      0%   { text-shadow: 0 0 14px currentColor; transform: scale(1.045); }
      100% { text-shadow: 0 0 0 transparent; transform: scale(1); }
    }
    .val-pulse { animation: valpulse .55s ease-out; transform-origin: left center; }

    /* ───── Glow Dot:呼吸燈 (2026-06-08) ───── */
    .dot-pulse {
      width: 9px; height: 9px; border-radius: 50%;
      background: var(--green);
      animation: dbreathe 2.6s ease-in-out infinite;
    }
    .dot-red {
      width: 9px; height: 9px; border-radius: 50%;
      background: var(--red);
      box-shadow: 0 0 3px var(--red);
      opacity: .85;
    }
    @keyframes dbreathe {
      0%,100% { box-shadow: 0 0 3px var(--green), 0 0 6px var(--green); opacity:.7; transform:scale(.9); }
      50%     { box-shadow: 0 0 10px var(--green), 0 0 18px var(--green); opacity:1; transform:scale(1.08); }
    }
    /* 快速成交模式的呼吸燈點:藍色 + 更快(1.7s vs 2.6s),跟綠色「運行中」區分(2026-07-07) */
    .dot-pulse-fast {
      width: 9px; height: 9px; border-radius: 50%;
      background: #38bdf8;
      animation: dbreathe-fast 1.7s ease-in-out infinite;
    }
    @keyframes dbreathe-fast {
      0%,100% { box-shadow: 0 0 3px #38bdf8, 0 0 6px #38bdf8; opacity:.7; transform:scale(.9); }
      50%     { box-shadow: 0 0 11px #38bdf8, 0 0 20px #38bdf8; opacity:1; transform:scale(1.1); }
    }
    /* 機器人鈕:運行時呼吸光暈 + 游標移上去浮出提示(點此暫停/啟動) */
    #bot-toggle-btn { position: relative; }
    #bot-toggle-btn.btn-green { animation: botbreathe 2.6s ease-in-out infinite; }
    @keyframes botbreathe { 0%,100%{box-shadow:0 0 2px transparent} 50%{box-shadow:0 0 11px var(--green)} }
    /* 快速成交模式:藍色、更快的呼吸燈(跟「運行中」的綠色區分) */
    #bot-toggle-btn.btn-fast { animation: botbreathe-fast 1.7s ease-in-out infinite; }
    @keyframes botbreathe-fast { 0%,100%{box-shadow:0 0 3px transparent} 50%{box-shadow:0 0 13px #38bdf8} }
    #bot-toggle-btn[data-tip]:hover::after {
      content: attr(data-tip);
      position: absolute; top: calc(100% + 9px); left: 50%; transform: translateX(-50%);
      background: var(--surface2,#1f2937); color: var(--text2,#cbd5e1);
      font-size: 11px; font-weight: 500; white-space: nowrap;
      padding: 5px 9px; border-radius: 6px; border: 1px solid rgba(255,255,255,.08);
      box-shadow: 0 6px 16px rgba(0,0,0,.4); pointer-events: none; z-index: 200;
    }
    #bot-toggle-btn[data-tip]:hover::before {
      content: ''; position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%);
      border: 5px solid transparent; border-bottom-color: var(--surface2,#1f2937);
      pointer-events: none; z-index: 200;
    }
    /* ⓘ 提示(.info-tip[data-tip]):改用 JS 浮層 #funi-tip-box 顯示(見頁尾 script):
       會自動夾在視窗內、永不被切到;桌機 hover、手機/平板 tap 都支援。 */
    .info-tip[data-tip] { cursor: help; }

    /* ───── Buttons ───── */
    .btn {
      display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
      padding: 6px 14px; border-radius: 8px; font-size: 12px;
      font-weight: 500; cursor: pointer; border: none;
      transition: all .18s;
    }
    .btn-primary { background: var(--accent); color: #fff; }
    .btn-primary:hover { background: var(--accent2); }
    .settings-label { display:block;font-size:12px;font-weight:500;color:var(--text2);margin-bottom:6px }
    .settings-input { width:100%;background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:9px 12px;font-size:13px;outline:none;transition:border-color .15s }
    .settings-input:focus { border-color:var(--accent) }
    .settings-input::placeholder { color:var(--text3) }
    .btn-surface { background: var(--surface2); color: var(--text2); border: 1px solid var(--border2); }
    .btn-surface:hover { color: var(--text); border-color: var(--accent); }
    .btn-green { background: rgba(143, 231, 192,.15); color: var(--green); border: 1px solid rgba(143, 231, 192,.3); }
    .btn-green:hover { background: rgba(143, 231, 192,.25); }
    .btn-fast { background: rgba(56,189,248,.15); color:#38bdf8; border:1px solid rgba(56,189,248,.35); }
    .btn-fast:hover { background: rgba(56,189,248,.28); }
    .btn-red { background: rgba(247, 155, 128,.15); color: var(--red); border: 1px solid rgba(247, 155, 128,.3); }
    .btn-red:hover { background: rgba(247, 155, 128,.25); }

    /* ───── Tab Buttons ───── */
    .tab-btn {
      padding: 4px 12px; border-radius: 7px;
      font-size: 11px; font-weight: 500;
      cursor: pointer; border: 1px solid transparent;
      transition: all .18s; color: var(--text3);
    }
    .tab-btn.active {
      background: var(--accent);
      color: #fff;
      box-shadow: 0 2px 8px rgba(82, 133, 196,.4);
    }
    .tab-btn:not(.active):hover { color: var(--text2); border-color: var(--border2); }

    /* ───── Table ───── */
    .data-table { width: 100%; font-size: 12px; border-collapse: collapse; }
    .data-table th {
      text-align: left; padding: 8px 10px;
      color: var(--text3); font-weight: 500;
      border-bottom: 1px solid var(--border);
      font-size: 11px; letter-spacing: .03em;
    }
    .data-table td {
      padding: 10px 10px;
      border-bottom: 1px solid var(--border);
    }
    .data-table tbody tr:last-child td { border-bottom: none; }
    .data-table tbody tr:hover { background: var(--surface2); }

    /* ───── Badge ───── */
    .badge {
      display: inline-block; padding: 2px 8px;
      border-radius: 99px; font-size: 11px; font-weight: 500;
    }
    .badge-yellow { background: rgba(245, 202, 94,.15); color: var(--yellow); }
    .badge-cyan   { background: rgba(102, 224, 250,.15);  color: var(--cyan); }
    .badge-purple { background: rgba(184, 166, 236,.15); color: var(--purple); }
    .badge-green  { background: rgba(143, 231, 192,.15); color: var(--green); }

    /* ───── Modal ───── */
    .modal {
      display: none; position: fixed; inset: 0;
      background: rgba(0,0,0,.65);
      backdrop-filter: blur(4px);
      z-index: 300;
      align-items: center; justify-content: center;
    }
    .modal.open { display: flex; }
    .modal-box {
      background: var(--surface);
      border: 1px solid var(--border2);
      border-radius: 18px;
      padding: 24px;
      width: 100%; max-width: 520px;
      max-height: 90vh; overflow-y: auto;
      box-shadow: 0 25px 60px rgba(0,0,0,.5);
    }

    /* ───── Form Inputs ───── */
    .field-input {
      width: 100%;
      background: var(--bg2);
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--text);
      padding: 6px 10px;
      font-size: 13px;
      text-align: right;
      outline: none;
      transition: border-color .18s;
    }
    .field-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(82, 133, 196,.12); }

    /* ───── Section Header ───── */
    .section-box {
      background: var(--bg2);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 14px 16px;
    }
    .section-title {
      font-size: 11px; font-weight: 500;
      color: var(--text2);
      text-transform: uppercase; letter-spacing: .06em;
      margin-bottom: 12px;
    }

    /* ───── Theme Toggle ───── */
    .theme-toggle {
      width: 36px; height: 20px;
      background: var(--border2);
      border-radius: 10px;
      position: relative; cursor: pointer;
      transition: background .25s;
      border: none; padding: 0;
    }
    html[data-theme="light"] .theme-toggle { background: var(--accent); }
    .theme-toggle::after {
      content: '';
      position: absolute;
      top: 2px; left: 2px;
      width: 16px; height: 16px;
      border-radius: 50%;
      background: #fff;
      transition: transform .25s;
    }
    html[data-theme="light"] .theme-toggle::after { transform: translateX(16px); }

    /* ───── Divider ───── */
    .divider { height: 1px; background: var(--border); margin: 16px 0; }

    /* ───── Info Modal Steps ───── */
    .info-step {
      display: flex; align-items: flex-start; gap: 10px;
      font-size: 12px; color: var(--text2); line-height: 1.6;
    }
    .step-num {
      flex-shrink: 0;
      width: 20px; height: 20px; border-radius: 50%;
      background: var(--accent); color: #fff;
      font-size: 10px; font-weight: 500;
      display: flex; align-items: center; justify-content: center;
      margin-top: 1px;
    }

    /* ───── Strategy Cards ───── */
    .strategy-card {
      border: 1px solid var(--border);
      border-radius: 12px;
      overflow: hidden;
      transition: border-color .2s;
    }
    .strategy-card.active { border-color: var(--purple); }
    /* 方案鎖定 */
    .strategy-card.plan-locked { opacity: .6; }
    .strategy-card.plan-locked .strategy-header { pointer-events: none; cursor: not-allowed; }
    .strategy-card.plan-locked .strategy-body { display: none !important; }
    .strategy-card.plan-locked input,
    .strategy-card.plan-locked .toggle-switch { pointer-events: none; cursor: not-allowed; }
    .plan-lock-banner {
      display: flex; align-items: center; gap: 10px;
      padding: 9px 16px;
      background: rgba(245, 202, 94,.13);
      border-bottom: 1px solid rgba(245, 202, 94,.28);
    }
    .plan-lock-banner .lock-icon { font-size: 16px; flex-shrink: 0; }
    .plan-lock-banner .lock-text {
      font-size: 12px; font-weight: 500; color: #f5ca5e;
    }
    .plan-lock-badge {
      font-size: 10px; font-weight: 500; padding: 2px 8px; border-radius: 99px;
      background: rgba(245, 202, 94,.12); color: #f5ca5e;
    }
    .strategy-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 14px 16px; cursor: pointer;
      background: var(--surface2);
      transition: background .15s;
    }
    .strategy-header:hover { background: var(--bg2); }
    .strategy-icon { font-size: 20px; flex-shrink: 0; }
    .strategy-body {
      padding: 16px; display: none;
      background: var(--bg2);
      border-top: 1px solid var(--border);
    }
    .strategy-body.open { display: block; }

    /* Badge on strategy cards */
    .strat-badge {
      font-size: 10px; font-weight: 500;
      padding: 2px 8px; border-radius: 99px;
      background: rgba(100,116,139,.15);
      color: var(--text3);
      transition: all .2s;
    }
    .strat-badge.on {
      background: rgba(184, 166, 236,.15);
      color: var(--purple);
    }

    /* Toggle switch */
    .toggle-switch { position: relative; display: inline-block; width: 40px; height: 22px; cursor: pointer; }
    .toggle-switch input { opacity: 0; width: 0; height: 0; }
    .toggle-slider {
      position: absolute; inset: 0;
      background: var(--border2); border-radius: 22px;
      transition: background .25s;
    }
    .toggle-slider::before {
      content: ''; position: absolute;
      width: 16px; height: 16px; border-radius: 50%;
      left: 3px; top: 3px; background: #fff;
      transition: transform .25s;
    }
    .toggle-switch input:checked + .toggle-slider { background: var(--purple); }
    .toggle-switch input:checked + .toggle-slider::before { transform: translateX(18px); }

    /* Description box */
    .desc-box {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 12px 14px;
    }
    .desc-title { font-size: 11px; font-weight: 500; color: var(--text2); margin-bottom: 6px; }
    .desc-text { font-size: 12px; color: var(--text2); line-height: 1.7; }
    .desc-tags { display: flex; flex-wrap: wrap; gap: 6px; }
    .tag {
      font-size: 10px; padding: 2px 8px;
      border-radius: 99px; font-weight: 500;
    }
    .tag-green { background: rgba(143, 231, 192,.1); color: var(--green); }
    .tag-yellow { background: rgba(245, 202, 94,.1); color: var(--yellow); }

    /* Params */
    .params-grid { display: flex; flex-direction: column; gap: 0; }
    .param-row {
      display: flex; align-items: center; justify-content: space-between;
      padding: 8px 0; gap: 12px;
    }
    .param-label { font-size: 12px; color: var(--text); font-weight: 500; }
    .param-hint { font-size: 10px; color: var(--text3); margin-top: 2px; }

    /* ───── Page Nav Tabs ───── */
    .nav-tab {
      padding: 7px 20px; border-radius: 8px; font-size: 14px; font-weight: 500;
      cursor: pointer; border: 1px solid transparent;
      transition: all .18s; color: var(--text3);
      white-space: nowrap;   /* 2026-06-01 英文較長、避免 nav 標籤折行擠版 */
    }
    /* 2026-06-01 header 不折行(英文標籤較長):副標、更新時間 */
    header [data-i18n="m8"], #last-updated { white-space: nowrap; }
    .nav-tab.active {
      background: var(--accent); color: #fff;
      box-shadow: 0 2px 8px rgba(82, 133, 196,.4);
    }
    .nav-tab:not(.active):hover { color: var(--text2); border-color: var(--border2); }

    /* ───── Dropdown Menu ───── */
    .menu-wrapper { position: relative; }
    .menu-list {
      position: absolute; right: 0; top: calc(100% + 6px);
      background: var(--surface); border: 1px solid var(--border2);
      border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.35);
      min-width: 168px; z-index: 200; overflow: hidden;
      display: none;
    }
    .menu-list.open { display: block; }
    .menu-item {
      display: flex; align-items: center; gap: 10px;
      width: 100%; padding: 11px 16px; font-size: 12px; font-weight: 500;
      color: var(--text2); cursor: pointer; border: none;
      background: transparent; text-align: left; transition: background .15s;
    }
    .menu-item:hover { background: var(--surface2); color: var(--text); }
    .menu-divider { height: 1px; background: var(--border); margin: 4px 0; }

    /* ───── Notification Item ───── */
    .notif-item {
      padding: 12px 16px; border-bottom: 1px solid var(--border);
      cursor: pointer; transition: background .15s;
    }
    .notif-item:last-child { border-bottom: none; }
    .notif-item:hover { background: var(--surface2); }
    .notif-item.unread { background: rgba(82, 133, 196,.06); }
    .notif-item.unread:hover { background: rgba(82, 133, 196,.12); }

    /* ───── Compact Toggle ───── */
    .compact-btn {
      display: inline-flex; align-items: center; gap: 5px;
      font-size: 11px; font-weight: 500; color: var(--text3);
      background: var(--surface2); border: 1px solid var(--border);
      border-radius: 7px; padding: 4px 10px; cursor: pointer;
      transition: all .18s;
    }
    .compact-btn:hover { color: var(--text); border-color: var(--border2); }

    /* ───── Currency Toggle ───── */
    .currency-toggle {
      display: flex; background: var(--bg2);
      border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
    }
    .currency-btn {
      padding: 4px 12px; font-size: 11px; font-weight: 500;
      cursor: pointer; border: none; background: transparent;
      color: var(--text3); transition: all .18s;
    }
    .currency-btn.active {
      background: var(--accent); color: #fff;
    }

    /* ───── Report Page ───── */
    .report-preset-btn {
      padding: 5px 12px; border-radius: 7px; font-size: 11px; font-weight: 500;
      cursor: pointer; border: 1px solid var(--border); background: var(--surface2);
      color: var(--text2); transition: all .18s;
    }
    .report-preset-btn.active, .report-preset-btn:hover {
      border-color: var(--accent); color: var(--accent);
    }
    .summary-card {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 12px; padding: 14px 16px; text-align: center;
    }
    .summary-card .sc-val { font-size: 20px; font-weight: 500; margin: 4px 0 2px; }
    .summary-card .sc-lbl { font-size: 11px; color: var(--text3); }

    /* ───── 手機版底部導覽列 ───── */
    .mobile-bottom-nav {
      display: none;
      position: fixed; top: 56px; left: 0; right: 0; z-index: 20;
      background: var(--bg2); border-bottom: 1px solid var(--border);
      padding: 6px 0;
      /* 2026-05-24 釘在 FuNi header 正下方(top:52=header高);GPU 圖層防 iOS 飄移 */
      transform: translateZ(0); -webkit-transform: translateZ(0);
      -webkit-backface-visibility: hidden; backface-visibility: hidden;
      will-change: transform;
    }
    .mob-nav-btn {
      flex: 1; display: flex; flex-direction: column; align-items: center;
      gap: 2px; padding: 6px 0; background: transparent; border: none;
      color: var(--text3); cursor: pointer; transition: color .15s;
    }
    .mob-nav-btn.active { color: var(--accent); }
    .mob-nav-icon { font-size: 20px; line-height: 1; }
    .mob-nav-label { font-size: 10px; font-weight: 500; }

    /* ───── Mobile Responsive ───── */
    @media (max-width: 900px) {
      /* 顯示底部導覽列 */
      .mobile-bottom-nav { display: flex; }

      /* FuNi header 釘最上、導覽列釘其下:內容讓出兩條(約104px) */
      body { padding-top: 104px !important; }
      main { padding-bottom: 24px !important; }

      /* Header(FuNi)固定在最頂、蓋過導覽列 */
      .header { padding: 10px 14px !important; position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; z-index: 30 !important; }

      /* 隱藏桌面版 nav tabs */
      #header-center-nav { display: none !important; }

      /* 2026-06-05 手機隱藏 logo 標語(避免 FuNi+標語擠兩行、撐高 header 壓到導覽列) */
      header [data-i18n="m8"] { display: none !important; }

      /* 隱藏用戶資訊區塊 */
      #header-user-info { display: none !important; }

      /* 隱藏最後更新時間 */
      #last-updated { display: none !important; }

      /* 幣種切換移到選單，桌面版隱藏 */
      .currency-toggle { display: none !important; }

      /* Bot 按鈕縮短 */
      #bot-toggle-btn { font-size: 11px !important; padding: 5px 8px !important; }

      /* 顯示選單裡的手機版用戶資訊 */
      #menu-mobile-user { display: block !important; }

      /* 卡片內距縮小 */
      .card { padding: 14px !important; }
      main { padding-left: 14px !important; padding-right: 14px !important; }

      /* 利率資訊卡手機版排成一列 */
      #rate-cards-row { flex-direction: column !important; gap: 8px !important; }
    }

    /* ── F5 頁面還原：data-page 設在 <html> 上，靜態 CSS 立即生效 ── */
    html[data-page] #page-dashboard { display: none !important; }
    html[data-page] #nav-dashboard  { background: none !important; color: var(--text3) !important; box-shadow: none !important; }
    html[data-page] #mob-nav-dashboard { color: var(--text3) !important; }
    html[data-page="report"]   #page-report   { display: block !important; }
    html[data-page="report"]   #nav-report    { background: var(--accent) !important; color: #fff !important; box-shadow: 0 2px 8px rgba(82, 133, 196,.4) !important; }
    html[data-page="report"]   #mob-nav-report { color: var(--accent) !important; }
    html[data-page="apikey"]   #page-apikey   { display: block !important; }
    html[data-page="guide"]    #page-guide    { display: block !important; }
    html[data-page="settings"] #page-settings { display: block !important; }
    html[data-page="plans"]    #page-plans    { display: block !important; }
    html[data-page="legal"]    #page-legal    { display: block !important; }
    html[data-page="admin"]    #page-admin    { display: block !important; }
  
    /* 2026-05-15 settings tabs */
    .settings-tab.active { color: var(--text) !important; border-bottom-color: var(--accent) !important; }
    .settings-tab:hover { color: var(--text2); }
  

/* ===== 區塊 2(原 index.html 內嵌 <style>)===== */
    /* ════════ 互動式 onboarding(2026-05-30、spotlight + 浮動 popover)════════ */
    /* Spotlight 機制:target element 上 outline + 全屏遮罩(用大 box-shadow 模擬) */
    .ft-spotlight {
      position: relative !important;
      z-index: 99998 !important;
      outline: 3px solid var(--accent, #5285c4) !important;
      outline-offset: 4px;
      box-shadow: 0 0 14px 2px rgba(82,133,196,.45) !important;
      border-radius: 8px;
      transition: outline-color .25s, box-shadow .25s;
      pointer-events: auto;
      /* 不用 9999px shadow trick(會被 parent overflow:hidden 切),
         改靠 dim 一直開 + spotlight z-index 浮過 dim 露出 */
    }
    /* 全屏 dim(沒 target 時用、像歡迎頁)*/
    #funi-tour-dim {
      position: fixed; inset: 0;
      background: rgba(0, 0, 0, 0.55);
      z-index: 99997;
      display: none;
    }
    #funi-tour-dim.open { display: block; }
    /* 浮動 popover */
    #funi-tour-popover {
      display: none;
      position: fixed;
      background: var(--surface, #1e1e22);
      color: var(--text, #e8e5dd);
      border: 1px solid var(--accent, #5285c4);
      border-radius: 14px;
      width: 400px;
      max-width: 92vw;
      padding: 22px 24px 18px;
      box-shadow: 0 16px 56px rgba(0, 0, 0, 0.55);
      z-index: 99999;
      /* 不要 top/left transition,避免動畫中被截圖看起來「亂滑」
         opacity transition 保留,fade in/out 比較順 */
      transition: opacity .15s ease;
    }
    #funi-tour-popover.open { display: block; }
    #funi-tour-popover.centered {
      top: 50% !important;
      left: 50% !important;
      transform: translate(-50%, -50%);
    }
    #funi-tour-popover .ft-close {
      position: absolute; top: 10px; right: 12px;
      background: transparent; border: none;
      color: var(--text3, #7989a0);
      font-size: 22px; cursor: pointer;
      padding: 4px 10px; line-height: 1;
      border-radius: 6px;
      transition: background .12s, color .12s;
    }
    #funi-tour-popover .ft-close:hover { background: var(--surface2, #28282d); color: var(--text, #e8e5dd); }
    #funi-tour-popover #ft-title {
      margin: 0 0 14px;
      font-size: 18px; font-weight: 500;
      color: var(--accent, #5285c4);
      padding-right: 30px;
      letter-spacing: .01em;
    }
    #funi-tour-popover #ft-body { font-size: 13.5px; line-height: 1.7; color: var(--text, #e8e5dd); }
    #funi-tour-popover #ft-body p { margin: 6px 0 12px; color: var(--text, #e8e5dd); }
    #funi-tour-popover #ft-body p:last-child { margin-bottom: 0; }
    #funi-tour-popover #ft-body strong { color: var(--text, #e8e5dd); font-weight: 500; }
    #funi-tour-popover #ft-body .ft-steps {
      background: rgba(82, 133, 196, 0.10);
      border-radius: 10px;
      padding: 12px 14px;
      margin: 10px 0 12px;
      color: var(--text, #e8e5dd);
    }
    #funi-tour-popover #ft-body .ft-steps div { padding: 4px 0; line-height: 1.85; font-size: 13px; }
    #funi-tour-popover #ft-body .ft-hint {
      font-size: 11.5px;
      color: var(--text3, #7989a0);
      margin-top: 12px;
      line-height: 1.65;
    }
    #funi-tour-popover #ft-body .ft-link {
      color: var(--accent, #5285c4);
      font-weight: 500;
      text-decoration: underline;
    }
    #funi-tour-popover .ft-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 18px;
      gap: 12px;
      padding-top: 14px;
      border-top: 1px solid var(--surface2, #28282d);
    }
    #funi-tour-popover #ft-progress { font-size: 12px; color: var(--text3, #7989a0); }
    #funi-tour-popover .ft-btns { display: flex; gap: 8px; }
    #funi-tour-popover .ft-btns button {
      border-radius: 7px;
      font-weight: 500;
      font-size: 13px;
      padding: 8px 18px;
      cursor: pointer;
      transition: background .12s, border-color .12s, opacity .12s;
    }
    #funi-tour-popover #ft-prev {
      background: var(--surface2, #28282d);
      color: var(--text, #e8e5dd);
      border: 1px solid var(--text3, #7989a0);
    }
    #funi-tour-popover #ft-prev:hover:not(:disabled) {
      background: var(--surface, #1e1e22);
      border-color: var(--text, #e8e5dd);
    }
    #funi-tour-popover #ft-prev:disabled { opacity: 0.4; cursor: not-allowed; }
    #funi-tour-popover #ft-next {
      background: var(--accent, #5285c4);
      color: #ffffff;
      border: 1px solid var(--accent, #5285c4);
    }
    #funi-tour-popover #ft-next:hover { background: #5458e0; border-color: #5458e0; }

    #tour-replay-btn { position: fixed; bottom: 20px; right: 20px; z-index: 9999;
      background: var(--accent, #5285c4); color: white; border: none; border-radius: 50%;
      width: 44px; height: 44px; font-size: 20px; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.3);
      opacity: .7; transition: opacity .2s; }
    #tour-replay-btn:hover { opacity: 1; }
  

/* ===== 區塊 3(原 index.html 內嵌 <style>)===== */
    /* 2026-06-13 變奏:背景純黑、卡片=金屬髮絲面(深色限定) */
    html:not([data-theme="light"]) .card,
    html:not([data-theme="light"]) .stat-card {
      background:
        repeating-linear-gradient(112deg, rgba(255,255,255,.035) 0 1px, rgba(0,0,0,.04) 1px 2px, transparent 2px 4px),
        linear-gradient(155deg, #232328 0%, #1e1e22 60%, #1a1a1e 100%);
    }
    /* 2026-06-13 階段C-2:期限結構與圖表並排 + 表格內橫條 */
    @media (min-width: 1101px) {
      #chart-term-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 16px; align-items: stretch; }
      #chart-term-grid > .card { margin-bottom: 20px; }
    }
    .stat-card > p.text-xs:first-child { letter-spacing: .02em; }
    .stat-card > p.text-xs:first-child { margin-bottom: 7px; }
    .stat-card > p.text-xs.mt-1 { margin-top: 8px; font-size: 10.5px; }
    .stat-card span[title] { opacity: .5; transition: opacity .15s; }
    .stat-card span[title]:hover { opacity: 1; }
    .apex-mode-pill { display: inline-block; font-size: 10px; line-height: 1.5; padding: 0 8px; border-radius: 99px; border: 0.5px solid var(--text3); color: var(--text2); margin: 0 4px; vertical-align: 1px; }
    .apex-mode-pill.amp { border-color: var(--green); color: var(--green); }
    .apex-mode-pill.cons { border-color: var(--yellow); color: var(--yellow); }
    #ts-tbody td.ts-rate-cell { position: relative; }
    #ts-tbody .ts-bar { position: absolute; left: 8px; right: 8px; bottom: 3px; height: 3px; border-radius: 2px; background: var(--surface2); pointer-events: none; }
    #ts-tbody .ts-bar > i { display: block; height: 100%; border-radius: 2px; background: var(--accent); opacity: .85; }