/* dashkit —— 内部数据看板的共享外壳（设计令牌 + 组件皮）
   调色板取自 dataviz skill 的参考实例（validate_palette 全 PASS）：
   slot1 蓝 #2a78d6/#3987e5 · slot2 橙 #eb6834/#d95926 · slot3 青 #1baf7a/#199e70
   暗色是「选定值」不是自动反转。改品牌色只改这两个 :root 块，组件不用动。
   配 dashkit.js 使用；零外链，可直接发妙搭 / 内网。 */

/* ── 设计令牌：dataviz 参考调色板，暗色是选定值不是自动反转 ─────────────── */
:root{
  color-scheme:light;
  --plane:#f9f9f7; --surface:#fcfcfb; --surface2:#f3f3f0;
  --ink:#0b0b0b; --ink2:#52514e; --muted:#898781;
  --grid:#e1e0d9; --axis:#c3c2b7; --line:#e1e0d9; --border:rgba(11,11,11,.10);
  --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a;
  --up:#006300; --down:#d03b3b;
  --shadow:0 1px 2px rgba(11,11,11,.04),0 8px 24px -16px rgba(11,11,11,.18);
  --r:13px;
}
@media (prefers-color-scheme:dark){:root:where(:not([data-theme="light"])){
  color-scheme:dark;
  --plane:#0d0d0d; --surface:#1a1a19; --surface2:#222221;
  --ink:#fff; --ink2:#c3c2b7; --muted:#898781;
  --grid:#2c2c2a; --axis:#383835; --line:#2c2c2a; --border:rgba(255,255,255,.10);
  --s1:#3987e5; --s2:#d95926; --s3:#199e70; --up:#0ca30c; --down:#d03b3b;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px -16px rgba(0,0,0,.6);
}}
:root[data-theme="dark"]{
  color-scheme:dark;
  --plane:#0d0d0d; --surface:#1a1a19; --surface2:#222221;
  --ink:#fff; --ink2:#c3c2b7; --muted:#898781;
  --grid:#2c2c2a; --axis:#383835; --line:#2c2c2a; --border:rgba(255,255,255,.10);
  --s1:#3987e5; --s2:#d95926; --s3:#199e70; --up:#0ca30c; --down:#d03b3b;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px -16px rgba(0,0,0,.6);
}
*{box-sizing:border-box}
body{margin:0;background:var(--plane);color:var(--ink);
  font:14px/1.6 system-ui,-apple-system,"Segoe UI","PingFang SC",sans-serif;-webkit-font-smoothing:antialiased}
.wrap{max-width:1280px;margin:0 auto;padding:0 20px}
@media (max-width:640px){.wrap{padding:0 14px}}

/* ── 吸顶头部 ──────────────────────────────────────────────────────────── */
header.app{position:sticky;top:0;z-index:30;border-bottom:1px solid var(--line);
  background:color-mix(in srgb,var(--plane) 84%,transparent);
  backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px)}
.app-in{display:flex;align-items:center;gap:14px;height:58px}
.app-in h1{font-size:16px;font-weight:650;margin:0;letter-spacing:-.01em;white-space:nowrap}
.tag{font-size:11px;font-weight:600;color:var(--s2);border:1px solid var(--s2);
  border-radius:5px;padding:1px 5px;letter-spacing:.02em;flex:none;white-space:nowrap}
.meta{color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:820px){.meta{display:none}}
/* 分节导航：滚动高亮，给单页一点产品外壳 */
.snav{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--line);
  background:color-mix(in srgb,var(--plane) 84%,transparent);
  backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px)}
.snav::-webkit-scrollbar{display:none}
.snav a{padding:9px 12px 8px;font-size:13px;color:var(--muted);text-decoration:none;white-space:nowrap;
  border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
.snav a:hover{color:var(--ink2)}
.snav a.on{color:var(--ink);border-bottom-color:var(--s1);font-weight:550}
.grow{flex:1}
.btn{display:inline-flex;align-items:center;gap:6px;height:31px;padding:0 11px;flex:none;
  border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--ink2);
  font:13px/1 inherit;cursor:pointer;transition:color .15s,border-color .15s}
.btn:hover{color:var(--ink);border-color:var(--muted)}
.btn svg{width:15px;height:15px}
.i-moon{display:none}
@media (prefers-color-scheme:dark){:root:where(:not([data-theme="light"])) .i-sun{display:none}
  :root:where(:not([data-theme="light"])) .i-moon{display:block}}
:root[data-theme="dark"] .i-sun{display:none}:root[data-theme="dark"] .i-moon{display:block}
:root[data-theme="light"] .i-sun{display:block}:root[data-theme="light"] .i-moon{display:none}

/* ── KPI ───────────────────────────────────────────────────────────────── */
.kpis{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:12px;margin:20px 0 14px}
@media (max-width:900px){.kpis{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.kpis{grid-template-columns:1fr}}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:15px 17px;box-shadow:var(--shadow);min-width:0;cursor:pointer;
  display:flex;flex-direction:column;transition:border-color .15s,transform .15s}
.tile:hover{border-color:var(--muted)}
.tile[aria-current="true"]{border-color:var(--s1);box-shadow:0 0 0 3px color-mix(in srgb,var(--s1) 12%,transparent)}
.tile .lb{font-size:12.5px;color:var(--ink2);font-weight:500}
.tile .val{font-size:29px;font-weight:650;letter-spacing:-.02em;line-height:1.15;margin:3px 0 2px}
.tile.hero .val{font-size:44px}
.tile .dl{font-size:12px;color:var(--muted)}
.tile .dl b{font-weight:650}
.up{color:var(--up)}.down{color:var(--down)}
.spark{height:34px;margin-top:auto;padding-top:10px}
.tile.hero .spark{height:52px}

/* ── 筛选条 ────────────────────────────────────────────────────────────── */
.bar{position:relative;display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;
  padding:11px 74px 11px 14px;margin-bottom:14px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.bar .btn{position:absolute;top:11px;right:12px}
#tblwrap{overflow-x:auto}
.grp{display:flex;align-items:center;gap:7px;min-width:0;flex-wrap:wrap}
.grp{flex:1 0 100%}
.grp>span.k{font-size:12px;color:var(--muted);white-space:nowrap;width:104px;flex:none}
.chip{display:inline-flex;align-items:center;gap:5px;height:27px;padding:0 10px;border-radius:999px;
  border:1px solid var(--border);background:var(--surface);color:var(--ink2);font-size:12.5px;
  cursor:pointer;white-space:nowrap;transition:background .14s,color .14s,border-color .14s}
.chip:hover{color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--plane);border-color:var(--ink)}
.chip .sw{width:8px;height:8px;border-radius:2px;flex:none}
.chip.v[aria-pressed="true"]{background:var(--surface2);color:var(--ink);border-color:var(--muted)}
.sep{width:1px;height:20px;background:var(--line)}

/* ── 卡片 ──────────────────────────────────────────────────────────────── */
h2{font-size:16.5px;font-weight:650;margin:30px 0 10px;display:flex;align-items:baseline;gap:9px;
  letter-spacing:-.012em;scroll-margin-top:104px}
h2 small{font-weight:400;font-size:12px;color:var(--muted)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:15px 17px;box-shadow:var(--shadow)}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:1000px){.cols{grid-template-columns:1fr}}
.sm{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:4px 18px}
.smc .t{font-size:13px;font-weight:600;margin:6px 0 0}
.smc .d{font-size:11.5px;color:var(--muted)}
.ch{width:100%;height:168px}
.ch.tall{height:360px}
.note{color:var(--muted);font-size:12px;margin:9px 0 0}
.note code{font:11.5px ui-monospace,Menlo,monospace;background:var(--surface2);
  border:1px solid var(--line);border-radius:4px;padding:.5px 4px}
.lgd{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--ink2);margin-bottom:6px}
.lgd i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px}

/* ── 口径抽屉 ──────────────────────────────────────────────────────────── */
dialog{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);color:var(--ink);
  max-width:620px;width:calc(100% - 32px);padding:22px 24px;box-shadow:0 24px 64px -24px rgba(0,0,0,.45)}
dialog::backdrop{background:rgba(0,0,0,.4)}
dialog h3{margin:0 0 12px;font-size:15px}
dialog dt{font-weight:620;font-size:12.5px;margin-top:11px}
dialog dd{margin:2px 0 0;color:var(--ink2);font-size:12.5px;line-height:1.55}
footer{color:var(--muted);font-size:12px;margin:26px 0 44px;padding-top:16px;border-top:1px solid var(--line)}
.tabulator{background:transparent;border:0;font-size:12.5px}
.tabulator .tabulator-header{background:var(--surface2);border-bottom:1px solid var(--line)}
.tabulator .tabulator-row{background:transparent;border-bottom:1px solid var(--line)}
.tabulator .tabulator-row:hover{background:var(--surface2)}
.tabulator .tabulator-col,.tabulator .tabulator-cell{border-right:0!important;color:var(--ink2)}
.tabulator .tabulator-col-title{color:var(--ink);font-weight:600}
.tabulator .tabulator-cell{font-variant-numeric:tabular-nums;padding:6px 8px}
.tabulator .tabulator-col{padding:4px 2px}
.tabulator .tabulator-col.tabulator-sortable[aria-sort] .tabulator-col-title{color:var(--s1)}
.srch{height:31px;padding:0 11px;border:1px solid var(--border);border-radius:8px;
  background:var(--surface);color:var(--ink);font:13px inherit;min-width:190px}
.srch:focus{outline:none;border-color:var(--s1);box-shadow:0 0 0 3px color-mix(in srgb,var(--s1) 12%,transparent)}
/* ── 补充：横向滚动容器 / 分节导航（页面内锚点，全局导航自己接） ─────────── */
.dk-scroll{overflow-x:auto}
.dk-snav{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--line);
  background:color-mix(in srgb,var(--plane) 84%,transparent);
  backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px)}
.dk-snav::-webkit-scrollbar{display:none}
.dk-snav a{padding:9px 12px 8px;font-size:13px;color:var(--muted);text-decoration:none;
  white-space:nowrap;border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
.dk-snav a:hover{color:var(--ink2)}
.dk-snav a.on{color:var(--ink);border-bottom-color:var(--s1);font-weight:550}