/* v09 數據台 databoard — 數據儀表板版型
   佈局 DNA：頂欄下方一排 KPI 卡，主體是資料表格＋純 CSS 迷你長條圖，白卡柔陰影浮在灰藍底。
   變體軸：KPI 指標組與長條圖精度可依「NBA 數據／賠率面板／彩池追蹤」切換整組儀表。 */

/* ================= 雙模式色彩架構（primitive 12 階 → semantic 雙層） =================
   primitive：H＝藍品牌色階、N＝藍灰中性階，light/dark 各一組（防指紋前綴 dash）。
   semantic：:root 為預設淺色（灰藍儀表板），[data-mode="dark"] 為深色儀表板；
   dashInk＝標題深墨（深色翻亮）、dashPanel＝深色裝飾底、dashBtnText＝主色底上的字。 */
:root {
  /* H 藍品牌色階 light */
  --dashHl1:#fafbfc; --dashHl2:#e2edfd; --dashHl3:#cfe1fb; --dashHl4:#d1e3fa; --dashHl5:#b9d7fb; --dashHl6:#9ac5f9;
  --dashHl7:#71acf4; --dashHl8:#3a8bed; --dashHl9:#0f6fec; --dashHl10:#0a55bb; --dashHl11:#0f5fce; --dashHl12:#1d3a5e;
  /* H 藍品牌色階 dark */
  --dashHd1:#162537; --dashHd2:#132132; --dashHd3:#182b41; --dashHd4:#153e6f; --dashHd5:#164886; --dashHd6:#1655a2;
  --dashHd7:#1a65c2; --dashHd8:#277be2; --dashHd9:#3b8bf0; --dashHd10:#2f74d0; --dashHd11:#8fbaf5; --dashHd12:#e6ecf5;
  /* N 藍灰中性階 light */
  --dashNl1:#eff2f6; --dashNl2:#f6f8fb; --dashNl3:#f0f1f2; --dashNl4:#e9ebed; --dashNl5:#e1e3e5; --dashNl6:#e3e8ee;
  --dashNl7:#c1c4c8; --dashNl8:#a4a8ad; --dashNl9:#878c92; --dashNl10:#71777e; --dashNl11:#616b76; --dashNl12:#232a31;
  /* N 藍灰中性階 dark */
  --dashNd1:#0e1420; --dashNd2:#17202e; --dashNd3:#1e293a; --dashNd4:#2c3137; --dashNd5:#353b42; --dashNd6:#303d52;
  --dashNd7:#545a64; --dashNd8:#6a717b; --dashNd9:#80868e; --dashNd10:#969aa1; --dashNd11:#93a0b2; --dashNd12:#e7edf4;

  /* semantic（light 預設） */
  --dashInk: #14191e;          /* 標題深墨（深色翻亮） */
  --dashInkSoft: #2a3138;
  --dashPrimary: var(--dashHl9);
  --dashPrimaryDeep: var(--dashHl10);
  --dashPrimarySoft: var(--dashHl2);
  --dashAccent: #0cbc87;
  --dashAccentSoft: #d7f5ea;
  --dashDown: #e14b5a;
  --dashDownSoft: #fbe3e5;
  --dashBg: var(--dashNl1);
  --dashSurface: #ffffff;
  --dashSurfaceAlt: var(--dashNl2);
  --dashText: var(--dashNl12);
  --dashTextMuted: var(--dashNl11);
  --dashLine: var(--dashNl6);
  --dashStar: #f5b823;
  --dashPanel: #14191e;        /* 深色裝飾底（頁尾／表頭／頭像）：兩模式都深 */
  --dashBtnText: #ffffff;
  --dashGreenText: #08795a;

  /* 圓角語言：6px 統一 */
  --dashRadius: 6px;
  --dashRadiusSm: 4px;

  /* 陰影語言：環境柔陰影浮層 */
  --dashShadow: 0 0 22px rgba(93, 103, 120, .12);
  --dashShadowHover: 0 4px 26px rgba(15, 111, 236, .18);

  --dashFont: "Inter", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --dashMono: "Roboto Mono", ui-monospace, "SFMono-Regular", "Menlo", monospace;
  --dashSizeBase: 14px;
}

/* semantic 深色覆蓋 */
[data-mode="dark"] {
  --dashInk: #eef2f7;
  --dashInkSoft: #c3cdd8;
  --dashPrimary: var(--dashHd9);
  --dashPrimaryDeep: var(--dashHd10);
  --dashPrimarySoft: var(--dashHd3);
  --dashAccent: #22c78e;
  --dashAccentSoft: #13312a;
  --dashDown: #f6707d;
  --dashDownSoft: #3a1e22;
  --dashBg: var(--dashNd1);
  --dashSurface: var(--dashNd2);
  --dashSurfaceAlt: var(--dashNd3);
  --dashText: var(--dashNd12);
  --dashTextMuted: var(--dashNd11);
  --dashLine: var(--dashNd6);
  --dashStar: #f5c542;
  --dashPanel: #10161f;
  --dashBtnText: #04101f;
  --dashGreenText: #34d399;
  --dashShadow: 0 0 22px rgba(0, 0, 0, .45);
  --dashShadowHover: 0 4px 26px rgba(59, 139, 240, .28);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]) {
    --dashInk: #eef2f7; --dashInkSoft: #c3cdd8; --dashPrimary: var(--dashHd9); --dashPrimaryDeep: var(--dashHd10);
    --dashPrimarySoft: var(--dashHd3); --dashAccent: #22c78e; --dashAccentSoft: #13312a; --dashDown: #f6707d; --dashDownSoft: #3a1e22;
    --dashBg: var(--dashNd1); --dashSurface: var(--dashNd2); --dashSurfaceAlt: var(--dashNd3);
    --dashText: var(--dashNd12); --dashTextMuted: var(--dashNd11); --dashLine: var(--dashNd6);
    --dashStar: #f5c542; --dashPanel: #10161f; --dashBtnText: #04101f; --dashGreenText: #34d399;
    --dashShadow: 0 0 22px rgba(0,0,0,.45); --dashShadowHover: 0 4px 26px rgba(59,139,240,.28);
  }
}
/* @check text=#232a31 bg=#eff2f6 muted=#616b76 primary=#0f6fec btntext=#ffffff mode=light */
/* @check text=#e7edf4 bg=#0e1420 muted=#93a0b2 primary=#3b8bf0 btntext=#04101f mode=dark */

/* 模式切換鈕 */
.dash-mode {
  width: 38px; height: 38px; flex: 0 0 auto; cursor: pointer;
  border: 1px solid var(--dashLine); border-radius: var(--dashRadius);
  background: var(--dashSurfaceAlt); color: var(--dashInk);
  font-size: 1rem; display: grid; place-items: center;
}
.dash-mode:hover { border-color: var(--dashPrimary); color: var(--dashPrimary); }
.dash-mode .dash-moon { display: none; }
[data-mode="dark"] .dash-mode .dash-sun { display: none; }
[data-mode="dark"] .dash-mode .dash-moon { display: inline; }
@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]) .dash-mode .dash-sun { display: none; }
  :root:not([data-mode="light"]) .dash-mode .dash-moon { display: inline; }
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; background: var(--dashBg); color: var(--dashText);
  font-family: var(--dashFont); font-size: var(--dashSizeBase); line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--dashPrimary); text-decoration: none; }
a:hover { color: var(--dashPrimaryDeep); }
h1, h2, h3, h4 { font-weight: 700; line-height: 1.3; color: var(--dashInk); margin: 0 0 .5em; }
h1 { font-size: 1.7rem; } h2 { font-size: 1.35rem; } h3 { font-size: 1.1rem; }
p { margin: 0 0 1em; }
.num { font-family: var(--dashMono); font-variant-numeric: tabular-nums; }
.gain { color: var(--dashAccent); }
.drop { color: var(--dashDown); }

.dash-wrap { max-width: 1200px; margin: 0 auto; padding: 0 16px 56px; }

/* 頂欄 */
.dash-top {
  display: flex; align-items: center; gap: 16px; padding: 12px 18px;
  background: var(--dashSurface); border-radius: var(--dashRadius); box-shadow: var(--dashShadow);
  position: sticky; top: 10px; z-index: 40; margin: 14px 0;
}
.dash-brand { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 1.15rem; color: var(--dashInk); }
.dash-brand span { width: 30px; height: 30px; border-radius: var(--dashRadiusSm); display: grid; place-items: center; color: #fff; background: var(--dashPanel); font-size: .92rem; }
.dash-search { flex: 1; min-width: 0; padding: 9px 14px; font: inherit; font-size: .88rem; border: 1px solid var(--dashLine); border-radius: var(--dashRadius); background: var(--dashSurfaceAlt); color: var(--dashText); }
.dash-top .dash-av { width: 38px; height: 38px; border-radius: var(--dashRadius); }

/* 導覽 */
.dash-nav { display: flex; gap: 6px; overflow-x: auto; padding: 6px; background: var(--dashSurface); border-radius: var(--dashRadius); box-shadow: var(--dashShadow); margin-bottom: 16px; }
.dash-link { flex: 0 0 auto; padding: 8px 16px; border-radius: var(--dashRadiusSm); color: var(--dashTextMuted); font-weight: 600; font-size: .87rem; white-space: nowrap; }
.dash-link.on { background: var(--dashPrimary); color: var(--dashBtnText); }

/* 麵包屑 */
.dash-crumb { font-size: .8rem; color: var(--dashTextMuted); margin: 0 4px 14px; }
.dash-crumb a { color: var(--dashTextMuted); }
.dash-crumb i { color: var(--dashPrimary); font-style: normal; margin: 0 6px; }

/* KPI 卡列 */
.dash-kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 16px; }
.dash-kpi {
  background: var(--dashSurface); border-radius: var(--dashRadius); box-shadow: var(--dashShadow);
  padding: 16px 18px; position: relative; overflow: hidden;
}
.dash-kpi::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--dashPrimary); }
.dash-kpi.acc::after { background: var(--dashAccent); }
.dash-kpi.ink::after { background: var(--dashInk); }
.dash-kpi.dn::after { background: var(--dashDown); }
.dash-kpi small { font-size: .74rem; color: var(--dashTextMuted); text-transform: uppercase; letter-spacing: .5px; }
.dash-kpi b { display: block; font-family: var(--dashMono); font-size: 1.7rem; font-weight: 700; color: var(--dashInk); margin: 4px 0 2px; font-variant-numeric: tabular-nums; }
.dash-kpi .delta { font-family: var(--dashMono); font-size: .78rem; font-weight: 600; }

/* 主佈局 */
.dash-cols { display: grid; grid-template-columns: 1fr 320px; gap: 18px; align-items: start; }
.dash-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.dash-side { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 84px; align-self: start; }

.dash-card { background: var(--dashSurface); border-radius: var(--dashRadius); box-shadow: var(--dashShadow); padding: 18px; }
.dash-ctitle { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--dashInk); margin-bottom: 14px; font-size: 1.02rem; }
.dash-ctitle::before { content: ""; width: 5px; height: 16px; border-radius: 2px; background: var(--dashPrimary); }

/* 迷你長條圖（純 CSS） */
.dash-bars { display: flex; align-items: flex-end; gap: 8px; height: 120px; padding-top: 8px; }
.dash-bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.dash-bar i { width: 100%; max-width: 34px; border-radius: var(--dashRadiusSm) var(--dashRadiusSm) 0 0; background: linear-gradient(var(--dashPrimary), #4d97f4); display: block; }
.dash-bar:nth-child(even) i { background: linear-gradient(var(--dashAccent), #3ed3a5); }
.dash-bar span { font-size: .68rem; color: var(--dashTextMuted); }
.dash-bar b { font-family: var(--dashMono); font-size: .7rem; color: var(--dashInk); }

/* 資料表格 */
.dash-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.dash-table th { background: var(--dashSurfaceAlt); color: var(--dashInkSoft); padding: 10px 12px; text-align: left; font-size: .76rem; text-transform: uppercase; letter-spacing: .4px; border-bottom: 2px solid var(--dashLine); }
.dash-table td { padding: 10px 12px; border-bottom: 1px solid var(--dashLine); }
.dash-table td.n { font-family: var(--dashMono); text-align: right; font-variant-numeric: tabular-nums; }
.dash-table tr:hover td { background: var(--dashSurfaceAlt); }

/* 工具表單卡 */
.dash-form .dash-fld { margin-bottom: 13px; }
.dash-lbl { display: block; font-weight: 600; font-size: .8rem; margin-bottom: 6px; color: var(--dashInkSoft); }
.dash-sel, .dash-inp { width: 100%; padding: 10px 13px; font: inherit; font-size: .88rem; border: 1px solid var(--dashLine); border-radius: var(--dashRadiusSm); background: var(--dashSurfaceAlt); color: var(--dashText); }
.dash-sel:focus, .dash-inp:focus { outline: none; border-color: var(--dashPrimary); box-shadow: 0 0 0 3px var(--dashPrimarySoft); }
.dash-radio { display: flex; gap: 9px; flex-wrap: wrap; }
.dash-radio label { display: flex; align-items: center; gap: 6px; padding: 7px 13px; border: 1px solid var(--dashLine); border-radius: var(--dashRadiusSm); font-size: .83rem; cursor: pointer; background: var(--dashSurfaceAlt); }
.dash-radio input { accent-color: var(--dashPrimary); }
.dash-fbtns { display: flex; gap: 9px; margin-top: 4px; }
.dash-btn { flex: 1; padding: 11px 16px; border: none; border-radius: var(--dashRadiusSm); background: var(--dashPrimary); color: var(--dashBtnText); font: inherit; font-weight: 700; cursor: pointer; }
.dash-btn:hover { background: var(--dashPrimaryDeep); }
.dash-btn2 { padding: 11px 16px; border: 1px solid var(--dashAccent); border-radius: var(--dashRadiusSm); background: var(--dashAccentSoft); color: var(--dashGreenText); font: inherit; font-weight: 700; cursor: pointer; }

/* 結果貼文卡 */
.dash-post { background: var(--dashSurface); border-radius: var(--dashRadius); box-shadow: var(--dashShadow); padding: 18px; }
.dash-phead { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.dash-av { width: 42px; height: 42px; border-radius: var(--dashRadius); flex: 0 0 auto; background: var(--dashPanel); color: #fff; display: grid; place-items: center; font-weight: 700; }
.dash-who { flex: 1; min-width: 0; }
.dash-name { font-weight: 700; color: var(--dashInk); }
.dash-meta { font-size: .76rem; color: var(--dashTextMuted); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.dash-tag { background: var(--dashPrimarySoft); color: var(--dashPrimaryDeep); padding: 2px 9px; border-radius: var(--dashRadiusSm); font-weight: 600; font-size: .72rem; }
.dash-rec { font-family: var(--dashMono); font-size: .7rem; color: var(--dashTextMuted); background: var(--dashSurfaceAlt); padding: 2px 8px; border-radius: 3px; border: 1px solid var(--dashLine); }
.dash-ptext { margin-bottom: 14px; }
.dash-res { background: var(--dashSurfaceAlt); border: 1px solid var(--dashLine); border-radius: var(--dashRadiusSm); padding: 13px 15px; margin-bottom: 14px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center; }
.dash-res .dash-rnum { font-family: var(--dashMono); font-size: 1.4rem; font-weight: 700; color: var(--dashPrimary); }
.dash-stars { color: var(--dashStar); letter-spacing: 3px; font-size: 1.02rem; margin-bottom: 12px; }
.dash-stars small { color: var(--dashTextMuted); letter-spacing: normal; margin-left: 6px; font-size: .76rem; }
.dash-react { display: flex; gap: 8px; border-top: 1px solid var(--dashLine); padding-top: 12px; }
.dash-react button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px; border: 1px solid var(--dashLine); border-radius: var(--dashRadiusSm); background: var(--dashSurfaceAlt); color: var(--dashTextMuted); font: inherit; font-weight: 600; font-size: .84rem; cursor: pointer; }
.dash-react button:hover { border-color: var(--dashPrimary); color: var(--dashPrimary); }

/* 平台數據統計（3 數字） */
.dash-stat-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.dash-stat { background: var(--dashSurfaceAlt); border: 1px solid var(--dashLine); border-radius: var(--dashRadiusSm); padding: 15px 12px; text-align: center; }
.dash-stat b { display: block; font-family: var(--dashMono); font-size: 1.6rem; font-weight: 700; color: var(--dashInk); font-variant-numeric: tabular-nums; }
.dash-stat small { font-size: .74rem; color: var(--dashTextMuted); }

/* 熱門排行 */
.dash-rank { display: flex; flex-direction: column; }
.dash-rrow { display: flex; align-items: center; gap: 10px; padding: 9px 6px; border-bottom: 1px solid var(--dashLine); }
.dash-rrow:last-child { border-bottom: none; }
.dash-rno { font-family: var(--dashMono); width: 22px; text-align: center; font-weight: 700; color: var(--dashPrimary); flex: 0 0 auto; }
.dash-rno.num { width: auto; min-width: 46px; text-align: left; }
.dash-rnm { flex: 1; min-width: 0; font-weight: 600; font-size: .87rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-rval { font-family: var(--dashMono); font-weight: 700; font-size: .82rem; font-variant-numeric: tabular-nums; }

/* 文章卡 */
.dash-art-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.dash-art { background: var(--dashSurface); border-radius: var(--dashRadius); box-shadow: var(--dashShadow); overflow: hidden; }
.dash-art:hover { box-shadow: var(--dashShadowHover); }
.dash-art-thumb { height: 120px; position: relative; background: linear-gradient(120deg, var(--dashPrimary), var(--dashPanel)); }
.dash-art-thumb.hue2 { background: linear-gradient(120deg, var(--dashAccent), var(--dashPrimary)); }
.dash-art-thumb.hue3 { background: linear-gradient(120deg, var(--dashPanel), var(--dashAccent)); }
.dash-art-thumb span { position: absolute; left: 10px; bottom: 10px; background: rgba(255,255,255,.92); color: var(--dashInk); font-weight: 700; font-size: .7rem; padding: 2px 9px; border-radius: var(--dashRadiusSm); }
.dash-art-info { padding: 13px 15px; }
.dash-art-info h3 { font-size: .96rem; margin-bottom: 5px; }
.dash-art-info p { font-size: .82rem; color: var(--dashTextMuted); margin: 0; }

/* 文章內文排版 */
.dash-body { background: var(--dashSurface); border-radius: var(--dashRadius); box-shadow: var(--dashShadow); padding: 24px; }
.dash-body h3 { color: var(--dashPrimaryDeep); }
.dash-body table { width: 100%; border-collapse: collapse; margin: 1em 0; font-size: .85rem; }
.dash-body th { background: var(--dashPanel); color: #fff; padding: 9px 11px; text-align: left; font-size: .78rem; }
.dash-body td { padding: 9px 11px; border-bottom: 1px solid var(--dashLine); }
.dash-body td.n { font-family: var(--dashMono); text-align: right; font-variant-numeric: tabular-nums; }
.dash-body tr:nth-child(even) td { background: var(--dashSurfaceAlt); }
.dash-body blockquote { margin: 1.1em 0; padding: 13px 17px; border-left: 4px solid var(--dashAccent); background: var(--dashAccentSoft); border-radius: 0 var(--dashRadiusSm) var(--dashRadiusSm) 0; color: var(--dashInkSoft); }
.dash-faq details { border: 1px solid var(--dashLine); border-radius: var(--dashRadiusSm); padding: 11px 15px; margin-bottom: 9px; background: var(--dashSurfaceAlt); }
.dash-faq summary { font-weight: 700; color: var(--dashInk); cursor: pointer; }
.dash-faq details[open] summary { color: var(--dashPrimary); margin-bottom: 7px; }

/* 工具牆 */
.dash-wall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.dash-tile { background: var(--dashSurface); border-radius: var(--dashRadius); box-shadow: var(--dashShadow); padding: 16px; }
.dash-tile:hover { box-shadow: var(--dashShadowHover); }
.dash-tile i { width: 42px; height: 42px; border-radius: var(--dashRadiusSm); margin-bottom: 9px; display: grid; place-items: center; font-style: normal; font-size: 1.2rem; color: #fff; background: linear-gradient(135deg, var(--dashPrimary), var(--dashAccent)); }
.dash-tile b { display: block; color: var(--dashInk); font-size: .9rem; }
.dash-tile small { color: var(--dashTextMuted); font-size: .74rem; }

/* 16:9 影片容器 */
.dash-vid { position: relative; aspect-ratio: 16 / 9; border-radius: var(--dashRadius); overflow: hidden; background: linear-gradient(120deg, var(--dashPanel), var(--dashPrimaryDeep)); }
.dash-vid .dash-play { position: absolute; inset: 0; margin: auto; width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,.94); display: grid; place-items: center; box-shadow: var(--dashShadow); }
.dash-vid .dash-play::before { content: ""; border-left: 17px solid var(--dashPrimary); border-top: 10px solid transparent; border-bottom: 10px solid transparent; margin-left: 4px; }
.dash-vid .dash-vlbl { position: absolute; left: 13px; bottom: 11px; color: #fff; font-weight: 600; font-size: .84rem; text-shadow: 0 1px 3px rgba(0,0,0,.5); }

/* 圖片網格 2×2 */
.dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dash-cell { aspect-ratio: 4 / 3; border-radius: var(--dashRadiusSm); }
.dash-cell:nth-child(1) { background: linear-gradient(120deg, var(--dashPrimary), var(--dashAccent)); }
.dash-cell:nth-child(2) { background: linear-gradient(120deg, var(--dashPanel), var(--dashPrimary)); }
.dash-cell:nth-child(3) { background: linear-gradient(120deg, var(--dashAccent), var(--dashPanel)); }
.dash-cell:nth-child(4) { background: linear-gradient(120deg, var(--dashPrimaryDeep), var(--dashAccent)); }

/* 分頁 */
.dash-page { display: flex; gap: 8px; justify-content: center; margin-top: 22px; }
.dash-page button { min-width: 38px; height: 38px; padding: 0 12px; border-radius: var(--dashRadiusSm); border: 1px solid var(--dashLine); background: var(--dashSurface); color: var(--dashTextMuted); font: inherit; font-weight: 600; font-family: var(--dashMono); cursor: pointer; }
.dash-page button.on, .dash-page button:hover { background: var(--dashPrimary); color: var(--dashBtnText); border-color: var(--dashPrimary); }

/* footer */
.dash-foot { margin-top: 36px; background: var(--dashPanel); color: rgba(255,255,255,.8); border-radius: var(--dashRadius); padding: 28px; }
.dash-foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 24px; }
.dash-foot-grid h4 { color: #fff; font-size: .95rem; }
.dash-foot-grid a { color: rgba(255,255,255,.7); display: block; font-size: .84rem; padding: 3px 0; }
.dash-foot-grid a:hover { color: var(--dashAccent); }
.dash-foot-grid p { color: rgba(255,255,255,.65); font-size: .84rem; }
.dash-foot-bottom { border-top: 1px solid rgba(255,255,255,.15); margin-top: 20px; padding-top: 16px; font-size: .78rem; text-align: center; }

/* 語意徽章（面板狀態） */
.dash-chip {
  display: inline-block; padding: 2px 9px; border-radius: var(--dashRadiusSm);
  font-size: .72rem; font-weight: 600; background: var(--dashPrimarySoft); color: var(--dashPrimaryDeep);
}
.dash-chip.ok { background: var(--dashAccentSoft); color: var(--dashGreenText); }
.dash-chip.warn { background: var(--dashDownSoft); color: var(--dashDown); }

/* 進度量條（同步率等） */
.dash-meter { height: 8px; border-radius: 4px; background: var(--dashLine); overflow: hidden; }
.dash-meter i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--dashPrimary), var(--dashAccent)); }

/* 焦點與選取 */
:focus-visible { outline: 2px solid var(--dashPrimary); outline-offset: 2px; }
::selection { background: var(--dashPrimarySoft); color: var(--dashPrimaryDeep); }

/* 表格橫向捲動容器 */
.dash-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* 動效偏好 */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* 響應式 */
@media (max-width: 960px) {
  .dash-kpi-row { grid-template-columns: 1fr 1fr; }
  .dash-cols { grid-template-columns: 1fr; }
  .dash-side { position: static; }
  .dash-art-grid { grid-template-columns: 1fr 1fr; }
  .dash-wall { grid-template-columns: 1fr 1fr; }
  .dash-foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .dash-search { display: none; }
  .dash-kpi-row, .dash-art-grid, .dash-wall, .dash-foot-grid, .dash-stat-strip { grid-template-columns: 1fr; }
  .dash-wrap { padding: 0 12px 40px; }
}

/* v2 visual direction: premium analytics console */
body { background-image:radial-gradient(circle at 78% 0%,color-mix(in srgb,var(--dashPrimary) 10%,transparent),transparent 32%); }
.dash-top { position:sticky; top:0; z-index:70; backdrop-filter:blur(16px); background:color-mix(in srgb,var(--dashSurface) 88%,transparent); box-shadow:0 10px 28px rgba(29,52,91,.07); }
.dash-wrap { max-width:1440px; }
.dash-card { border-color:color-mix(in srgb,var(--dashPrimary) 10%,var(--dashLine)); box-shadow:0 10px 28px rgba(28,52,98,.07); }
.dash-kpi { position:relative; overflow:hidden; border-top:3px solid var(--dashPrimary); }
.dash-chart { border-radius:12px; background:linear-gradient(180deg,color-mix(in srgb,var(--dashPrimary) 5%,var(--dashSurface)),var(--dashSurface)); }
.dash-btn-main { box-shadow:0 8px 20px color-mix(in srgb,var(--dashPrimary) 24%,transparent); }