/* ===== data-dashboard · 数据仪表盘 ===== */
:root{
  --bg:#0a1120;--panel:#111a2e;--panel2:#16203a;--line:rgba(56,189,248,.22);--line2:rgba(56,189,248,.44);
  --ink:#e8eef8;--sub:#9fb0cc;--dim:#647593;--green:#36d399;--blue:#38bdf8;--violet:#a78bfa;
  --mono:ui-monospace,"SF Mono","JetBrains Mono",Consolas,monospace;
  --sans:-apple-system,"SF Pro Display","PingFang SC","Microsoft YaHei",sans-serif;--maxw:1000px;color-scheme:dark;
}
@media (prefers-color-scheme:light){:root{--bg:#eef2f8;--panel:#ffffff;--panel2:#e6ecf5;--line:rgba(30,90,160,.18);--line2:rgba(30,90,160,.4);--ink:#16203a;--sub:#4a5a78;--dim:#94a2bc;--green:#0fa968;--blue:#1186c8;--violet:#7c5cf0;color-scheme:light;}}
*{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{font-family:var(--sans);background:var(--bg);color:var(--ink);line-height:1.62;min-height:100vh;padding:0 clamp(16px,4vw,36px) calc(42px + env(safe-area-inset-bottom));}
a{color:inherit;text-decoration:none;}::selection{background:var(--blue);color:var(--bg);}
kbd{font-family:var(--mono);font-size:11px;border:1px solid var(--line2);border-radius:4px;padding:1px 6px;color:var(--blue);}
.board{max-width:var(--maxw);margin:0 auto;}
.statusbar{display:flex;align-items:center;gap:14px;padding:calc(13px + env(safe-area-inset-top)) 18px 13px;margin-top:14px;background:var(--panel);border:1px solid var(--line);border-radius:12px;font-size:12.5px;font-family:var(--mono);}
.sb-live{flex:none;display:inline-flex;align-items:center;gap:7px;color:var(--green);font-weight:700;}
.sb-live i{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 9px var(--green);animation:pulse 2s infinite;}@keyframes pulse{50%{opacity:.35;}}
.statusbar p{flex:1;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--sans);}
.sb-clk{flex:none;color:var(--blue);font-variant-numeric:tabular-nums;}
.head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:22px 2px;}
.brand{display:flex;align-items:center;gap:12px;font-size:clamp(19px,3.4vw,25px);font-weight:800;letter-spacing:-.01em;}
.brand-mk{width:22px;height:22px;border-radius:6px;background:linear-gradient(135deg,var(--blue),var(--violet));box-shadow:0 0 16px -3px var(--blue);flex:none;}
.theme{font-family:var(--mono);font-size:12.5px;border:1px solid var(--line2);background:var(--panel);color:var(--blue);border-radius:9px;padding:8px 15px;cursor:pointer;transition:.18s;}
.theme:hover{background:var(--blue);color:var(--bg);}
.intro{margin-top:clamp(28px,5vw,52px);}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:var(--blue);}
.intro h1{font-size:clamp(38px,9vw,80px);font-weight:800;line-height:1.02;letter-spacing:-.03em;margin-top:14px;word-break:break-word;}
.lead{max-width:60ch;margin-top:18px;color:var(--sub);font-size:clamp(14.5px,2.5vw,17px);}
.hero-panel{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(24px,4vw,44px);margin-top:clamp(30px,5vw,50px);background:var(--panel);border:1px solid var(--line2);border-radius:18px;padding:clamp(26px,4vw,40px);}
.gauge{position:relative;flex:none;width:138px;height:138px;}
.gauge svg{width:100%;height:100%;transform:rotate(-90deg);}
.g-track{fill:none;stroke:var(--panel2);stroke-width:11;}
.g-arc{fill:none;stroke:var(--green);stroke-width:11;stroke-linecap:round;stroke-dasharray:314;stroke-dashoffset:0;filter:drop-shadow(0 0 6px var(--green));}
.g-val{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:26px;font-weight:700;color:var(--green);}
.hp-body{flex:1;min-width:220px;}
.hp-cap{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--blue);}
.hp-domain{font-size:clamp(22px,5.5vw,42px);font-weight:800;margin:12px 0 12px;word-break:break-all;}
.hp-stat{display:inline-flex;align-items:center;gap:9px;font-size:13px;color:var(--sub);}
.hp-stat i{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);}
.hp-act{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:22px;}
.ctl{font-family:var(--sans);font-size:13.5px;font-weight:600;padding:11px 26px;border-radius:9px;cursor:pointer;border:1px solid transparent;transition:.18s;}
.ctl-go{background:linear-gradient(120deg,var(--blue),var(--violet));color:#fff;}.ctl-go:hover{transform:translateY(-2px);box-shadow:0 12px 26px -12px var(--blue);}
.ctl-cp{background:var(--panel2);border-color:var(--line2);color:var(--ink);}.ctl-cp:hover{border-color:var(--blue);color:var(--blue);}
.ctl-save{font-size:12.5px;color:var(--dim);cursor:pointer;}.ctl-save:hover{color:var(--blue);}
.widget{margin-top:clamp(34px,6vw,58px);}
.wg-h{display:flex;align-items:center;gap:14px;font-size:clamp(18px,4vw,26px);font-weight:800;margin-bottom:22px;}
.wg-no{flex:none;font-family:var(--mono);font-size:13px;font-weight:700;color:#fff;background:linear-gradient(135deg,var(--blue),var(--violet));border-radius:8px;padding:4px 11px;}
.wg-meta{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--dim);font-weight:400;}
.table{display:grid;gap:8px;}
.tr{display:flex;align-items:center;gap:16px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:13px 20px;font-family:var(--mono);transition:.18s;}
.tr:hover{border-color:var(--line2);transform:translateX(4px);}
.td-no{flex:none;font-size:13px;color:var(--blue);width:26px;}
.td-host{flex:1;font-size:clamp(13px,3vw,15.5px);word-break:break-all;}
.td-ok{flex:none;display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:var(--green);}
.td-ok i{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 6px var(--green);}
.td-cp{flex:none;font-family:var(--mono);font-size:11.5px;background:var(--panel2);border:1px solid var(--line2);border-radius:7px;color:var(--ink);padding:6px 14px;cursor:pointer;transition:.18s;}
.td-cp:hover{background:var(--blue);border-color:var(--blue);color:var(--bg);}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px;transition:.18s;}
.kpi:hover{border-color:var(--line2);transform:translateY(-3px);}
.kpi-i{font-family:var(--mono);font-weight:700;font-size:14px;color:#fff;background:linear-gradient(135deg,var(--blue),var(--violet));width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:9px;margin-bottom:14px;}
.kpi b{display:block;font-size:15.5px;margin-bottom:7px;}
.kpi p{color:var(--sub);font-size:13px;}
.callout{margin-top:16px;background:var(--panel);border:1px solid var(--line2);border-left:4px solid var(--blue);border-radius:12px;padding:14px 20px;color:var(--sub);font-size:13.5px;}.callout strong{color:var(--blue);}
.chans{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.chan{display:flex;flex-direction:column;gap:9px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px;cursor:pointer;transition:.2s;}
.chan:hover{border-color:var(--blue);transform:translateY(-3px);box-shadow:0 14px 32px -20px var(--blue);}
.ch-k{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--blue);}
.ch-v{font-size:15px;font-weight:600;word-break:break-all;}
.foot{margin-top:clamp(42px,7vw,70px);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;padding:22px 2px calc(8px + env(safe-area-inset-bottom));border-top:1px solid var(--line);}
.foot-id{font-family:var(--mono);font-size:13px;color:var(--blue);}
.foot nav{display:flex;flex-wrap:wrap;gap:18px;}.foot nav a{color:var(--sub);font-size:13px;transition:.2s;}.foot nav a:hover{color:var(--blue);}
.foot small{color:var(--dim);font-size:12.5px;width:100%;}
.toast{position:fixed;left:50%;bottom:calc(26px + env(safe-area-inset-bottom));transform:translate(-50%,16px);z-index:60;opacity:0;pointer-events:none;font-family:var(--mono);background:var(--panel2);border:1px solid var(--blue);border-radius:11px;padding:12px 20px;font-size:13px;color:var(--ink);box-shadow:0 0 26px -6px var(--blue);transition:.26s cubic-bezier(.2,.8,.2,1);}
.toast span[aria-hidden]{color:var(--blue);}.toast.on{opacity:1;transform:translate(-50%,0);pointer-events:auto;}
.mount{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.8,.2,1);}.mount.on{opacity:1;transform:none;}
@media (max-width:780px){.kpis,.chans{grid-template-columns:1fr;}.gauge{margin:0 auto;}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important;}.mount{opacity:1;transform:none;}}
