/* ===== 大屏看板（Part 2，sci-fi 风格）=====
   移植自 docs/prototypes/dashboard-bigscreen.html（只读参考，不可改）。全部类名
   加 sx- 前缀并挂在 .sx 根节点下——本站已有 .tabs/.chip/.grid/.num/.tile/.box/
   .legend/.op 等全局类名，原型若原样搬运会直接撞车。字体：D1 决策——Orbitron
   自托管只覆盖数字（--sx-f-num），中文标题走系统粗体+字间距+青色辉光替代原型的
   ZCOOL QingKe HuangYou，等宽走系统 mono 栈，不接 Google Fonts（见 CLAUDE.md
   3.2 无 Gemini 通道旁的同类约束：本项目一律不外链 Google Fonts）。
   加载顺序：public/index.html 里排在其余样式表之后即可，本文件只认 --sx-* 自造
   token，不读全站 --brand/--ok 等 token（配色体系完全独立，深色大屏 vs 全站浅色）。 */
@font-face{font-family:"Orbitron";src:url("../vendor/fonts/orbitron-latin.woff2") format("woff2");font-weight:400 900;font-display:swap;unicode-range:U+0000-00FF}

/* ===== 根作用域 + token（唯一允许出现字面量颜色值的地方）===== */
.sx{
  --sx-ground:#030B22; --sx-panel:rgba(8,26,66,.66); --sx-panel-solid:#0B1D47; --sx-panel-hd:rgba(46,110,220,.30);
  --sx-line:rgba(80,150,255,.26); --sx-line-hi:rgba(110,205,255,.75);
  --sx-cyan:#3FE0F0; --sx-blue:#4C8DFF; --sx-gold:#F2C46D;
  --sx-ok:#34D399; --sx-warn:#FB923C; --sx-bad:#F87171;
  --sx-text:#E4EEFF; --sx-muted:#94ACD4; --sx-track:rgba(148,172,212,.16);
  --sx-cat-1:#3FE0F0; --sx-cat-2:#F2C46D; --sx-cat-3:#7C9BFF; --sx-cat-4:#D58BFF; --sx-cat-5:#9BE38A; --sx-cat-6:#94ACD4;
  --sx-f-num:"Orbitron","Bahnschrift","DIN Alternate",ui-monospace,monospace;
  --sx-f-title:"PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
  --sx-f-mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --sx-f-body:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
  --sx-gap:12px;
  display:block; padding:20px 16px; min-height:100%; position:relative;
  color:var(--sx-text); font:14px/1.5 var(--sx-f-body); background-color:var(--sx-ground);
  background-image:
    radial-gradient(90% 55% at 50% -8%,rgba(46,110,220,.38),transparent 62%),
    radial-gradient(60% 40% at 50% 105%,rgba(63,224,240,.10),transparent 70%),
    linear-gradient(rgba(80,150,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(80,150,255,.045) 1px,transparent 1px);
  background-size:auto,auto,40px 40px,40px 40px;
}
/* .sx 铺满 .content：直接去掉宿主内边距，不用负 margin 抵消——.content 的内边距
   在 mobile.css 里随断点变化（20/24px → 14px），写死的负 margin 在窄屏会多出横向滚动。 */
.content:has(> .sx){padding:0}
/* 全屏对象是整个页面（sxToggleFullscreen 用 document.documentElement），不是 #content：
   加载/同步失败遮罩 #loadingOverlay 等在 #content 之外，只全屏 #content 会把它们压在
   顶层之下看不见。全屏时只藏顶栏，Esc 退出后恢复。 */
:root:fullscreen .main-header{display:none}
.sx *{box-sizing:border-box}
/* :where() 把重置规则的特异性降到 (0,0,1)，否则 .sx button 会压过 .sx-fs-btn 等单类名按钮样式 */
:where(.sx) button{font:inherit;color:inherit;background:none;border:none}
.sx :focus-visible{outline:2px solid var(--sx-cyan);outline-offset:2px}
.sx .sx-num{font-family:var(--sx-f-num);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.sx .sx-mono{font-family:var(--sx-f-mono);font-variant-numeric:tabular-nums}
.sx .sx-gold{color:var(--sx-gold)} .sx .sx-cyan{color:var(--sx-cyan)}

/* ===== 顶栏 ===== */
.sx-hd{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding-block:0 16px;margin-bottom:4px}
.sx-hd::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:1px;opacity:.55;background:linear-gradient(90deg,transparent,var(--sx-line-hi) 18%,var(--sx-line-hi) 82%,transparent)}
.sx-hd-plate{position:relative;overflow:hidden;text-align:center;padding:12px 76px 16px;background:linear-gradient(180deg,rgba(76,141,255,.40),rgba(8,26,66,.25));clip-path:polygon(0 0,100% 0,calc(100% - 46px) 100%,46px 100%)}
.sx-hd-plate::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 40%,rgba(63,224,240,.22) 50%,transparent 60%);transform:translateX(-100%);animation:sx-sweep 7s ease-in-out infinite}
.sx-hd-plate::after{content:"";position:absolute;left:50%;bottom:0;width:200px;height:3px;transform:translateX(-50%);background:var(--sx-cyan);box-shadow:0 0 16px 2px var(--sx-cyan)}
.sx-hd-plate h1{margin:0;font:700 30px/1.2 var(--sx-f-title);letter-spacing:.12em;text-wrap:balance;text-shadow:0 0 18px rgba(63,224,240,.55)}
.sx-hd-plate p{margin:2px 0 0;font-size:12px;letter-spacing:.4em;color:var(--sx-muted)}
.sx-hd-side{display:flex;align-items:center;gap:16px;flex-wrap:wrap;min-width:0}
.sx-hd-right{justify-content:flex-end}
.sx-live{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--sx-ok)}
.sx-live i{width:8px;height:8px;border-radius:50%;background:var(--sx-ok);box-shadow:0 0 0 0 rgba(52,211,153,.6);animation:sx-pulse 2s infinite}
.sx-hd-meta{font-size:13px;color:var(--sx-muted)} .sx-hd-meta b{color:var(--sx-text);font-family:var(--sx-f-num);font-weight:600;margin-inline:2px}
.sx-clock{display:flex;flex-direction:column;align-items:flex-end;line-height:1.2}
.sx-clock .sx-num{font-size:20px;font-weight:600;color:var(--sx-cyan)} .sx-clock span{font-size:12px;color:var(--sx-muted)}
.sx-fs-btn{border:1px solid var(--sx-line-hi);padding:4px 12px;font-size:12px;color:var(--sx-cyan);cursor:pointer;min-height:28px}
.sx-fs-btn:hover{border-color:var(--sx-cyan);color:var(--sx-cyan)}

/* ===== 栅格 ===== */
.sx-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--sx-gap)}
.sx-panel-gauge{grid-column:span 3} .sx-panel-core{grid-column:span 5} .sx-panel-trend{grid-column:span 4}
.sx-panel-rank,.sx-panel-ops,.sx-panel-risk{grid-column:span 4} .sx-panel-feed{grid-column:span 4} .sx-panel-matrix{grid-column:span 8}
@media (min-width:1400px){ .sx-panel-rank,.sx-panel-ops,.sx-panel-risk{height:296px} .sx-panel-feed,.sx-panel-matrix{height:330px} }
@media (max-width:1399px){
  .sx-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .sx-panel-gauge,.sx-panel-core,.sx-panel-trend,.sx-panel-rank,.sx-panel-ops,.sx-panel-risk{grid-column:span 3}
  .sx-panel-feed,.sx-panel-matrix{grid-column:span 6}
  .sx-st-list{max-height:320px} .sx-feed-wrap{max-height:360px} .sx-mx-wrap{max-height:460px}
}
@media (max-width:899px){
  .sx-grid{grid-template-columns:minmax(0,1fr)}
  .sx-panel-gauge,.sx-panel-core,.sx-panel-trend,.sx-panel-rank,.sx-panel-ops,.sx-panel-risk,.sx-panel-feed,.sx-panel-matrix{grid-column:auto}
  .sx-hd{grid-template-columns:minmax(0,1fr)} .sx-hd-side,.sx-hd-right{justify-content:center} .sx-clock{align-items:center}
}

/* ===== 面板：直角描边 + 四角括弧（通用外壳，供 A/C/D/E/F/G/H 复用）===== */
.sx-pn,.sx-brk{position:relative;min-width:0}
.sx-pn{display:flex;flex-direction:column;background:var(--sx-panel);border:1px solid var(--sx-line);box-shadow:inset 0 0 32px rgba(46,110,220,.12)}
.sx-pn::before,.sx-brk::before{content:"";position:absolute;inset:-1px;pointer-events:none;--k:var(--sx-line-hi);--l:14px;
  background:linear-gradient(var(--k),var(--k)) top left/var(--l) 2px,linear-gradient(var(--k),var(--k)) top left/2px var(--l),
    linear-gradient(var(--k),var(--k)) top right/var(--l) 2px,linear-gradient(var(--k),var(--k)) top right/2px var(--l),
    linear-gradient(var(--k),var(--k)) bottom left/var(--l) 2px,linear-gradient(var(--k),var(--k)) bottom left/2px var(--l),
    linear-gradient(var(--k),var(--k)) bottom right/var(--l) 2px,linear-gradient(var(--k),var(--k)) bottom right/2px var(--l);
  background-repeat:no-repeat}
.sx-brk::before{--l:10px;--k:rgba(110,205,255,.6)}
.sx-pn-hd{position:relative;display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;min-height:38px;padding:6px 12px;background:linear-gradient(90deg,var(--sx-panel-hd),rgba(46,110,220,.06) 65%,transparent);border-bottom:1px solid var(--sx-line)}
.sx-pn-hd::before{content:"";width:16px;height:12px;flex:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M2 1l5 5-5 5M8 1l5 5-5 5' fill='none' stroke='%233FE0F0' stroke-width='2'/%3E%3C/svg%3E") no-repeat center/contain}
.sx-pn-hd::after{content:"";position:absolute;left:0;bottom:-1px;width:72px;height:2px;background:var(--sx-cyan);box-shadow:0 0 8px var(--sx-cyan)}
.sx-pn-hd h2{margin:0;font:700 17px/1.1 var(--sx-f-title);letter-spacing:.1em;text-shadow:0 0 10px rgba(63,224,240,.35)}
.sx-pn-meta{margin-left:auto;font-size:12px;color:var(--sx-muted);text-align:right}
.sx-pn-meta b{color:var(--sx-text);font-weight:600}
.sx-pn-bd{flex:1;min-height:0;padding:12px 14px}
.sx-pn-cap{padding-top:10px;text-align:center;font-size:13px;letter-spacing:.24em;color:var(--sx-muted)}
.sx-chip{display:inline-flex;align-items:center;height:20px;padding:0 6px;font-size:12px;line-height:1;white-space:nowrap;border:1px solid currentColor;background:color-mix(in srgb,currentColor 12%,transparent)}
.sx-chip-bad{color:var(--sx-bad)} .sx-chip-warn{color:var(--sx-warn)} .sx-chip-ok{color:var(--sx-ok)} .sx-chip-cyan{color:var(--sx-cyan)} .sx-chip-gold{color:var(--sx-gold)}

/* ===== A 整体完成率仪表 ===== */
.sx-panel-gauge .sx-pn-bd{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:12px;align-items:center}
.sx-gauge{position:relative;max-width:240px;justify-self:center;width:100%}
.sx-gauge svg{display:block;width:100%;height:auto}
.sx-gauge-c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-top:6px}
.sx-gauge-c b{font-size:38px;font-weight:800;line-height:1;text-shadow:0 0 18px rgba(63,224,240,.45)}
.sx-gauge-c small{font-size:18px;margin-left:2px}
.sx-gauge-c span{margin-top:8px;font-size:12px;color:var(--sx-muted)}
.sx-g-track{fill:none;stroke:var(--sx-track);stroke-width:14}
.sx-g-fg{fill:none;stroke:url(#sxGaugeGrad);stroke-width:14;animation:sx-draw 1.1s ease-out both}
.sx-g-tick{stroke:rgba(148,172,212,.45);stroke-width:1.5} .sx-g-tick-major{stroke:var(--sx-cyan);stroke-width:2}
.sx-g-lbl{fill:var(--sx-muted);font:12px var(--sx-f-mono)}
.sx-boxes{display:grid;gap:12px}
.sx-box{display:flex;flex-direction:column;align-items:center;padding:12px 8px;background:rgba(4,14,40,.55);border:1px solid var(--sx-line)}
.sx-box b{font-size:24px;font-weight:600;line-height:1.1;text-shadow:0 0 14px color-mix(in srgb,currentColor 45%,transparent)}
.sx-box span{font-size:12px;color:var(--sx-muted);letter-spacing:.1em;margin-top:4px}

/* ===== B 中枢：双环 + 数字砖 + 状态刻度条 ===== */
.sx-panel-core{display:flex;flex-direction:column;gap:var(--sx-gap)}
.sx-rings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sx-gap)}
.sx-ring-bd{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px 18px;padding:10px 14px 14px}
.sx-ring{position:relative;width:92px;flex:none}
.sx-ring svg{display:block;width:100%;height:auto}
.sx-ring-c{position:absolute;inset:0;display:grid;place-items:center;font-size:19px;font-weight:600}
.sx-r-dash{fill:none;stroke:var(--sx-line);stroke-width:1;stroke-dasharray:2 4}
.sx-r-track{fill:none;stroke:var(--sx-track);stroke-width:7}
.sx-r-fg{fill:none;stroke:url(#sxRingGrad);stroke-width:7;stroke-linecap:round;animation:sx-draw 1.1s ease-out both}
.sx-ring-legend{margin:0;display:grid;gap:2px}
.sx-ring-legend dt{font-size:12px;color:var(--sx-muted);display:flex;align-items:center;gap:6px}
.sx-ring-legend dt::before{content:"";width:6px;height:6px;background:currentColor}
.sx-ring-legend dd{margin:0 0 4px 12px;font-size:18px;font-weight:600;line-height:1.1}
.sx-ring-err{display:flex;flex-direction:column;align-items:flex-start;gap:6px;max-width:170px;font-size:12px;color:var(--sx-muted)}
.sx-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.sx-tile{display:flex;flex-direction:column;gap:2px;padding:12px 14px}
.sx-tile+.sx-tile{border-left:1px solid var(--sx-line)}
.sx-tile-lbl{font-size:12px;color:var(--sx-muted);letter-spacing:.06em;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.sx-tile .sx-num{font-size:22px;font-weight:600;line-height:1.2}
.sx-tile-unit{font:12px var(--sx-f-body);color:var(--sx-muted);margin-left:4px}
.sx-seg{padding:12px 14px;gap:8px}
.sx-seg-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:12px;color:var(--sx-muted);letter-spacing:.06em}
.sx-seg-top b{font-size:16px;color:var(--sx-cyan)}
.sx-ticks{display:flex;gap:3px;height:22px}
.sx-ticks i{flex:1;min-width:0;background:var(--sx-track);transform-origin:bottom;animation:sx-grow-y .5s ease-out both}
.sx-ticks i.sx-lk{background:linear-gradient(var(--sx-cyan),rgba(63,224,240,.4));box-shadow:0 0 6px rgba(63,224,240,.35)}
.sx-ticks i.sx-pd{background:linear-gradient(var(--sx-warn),rgba(251,146,60,.4))}
.sx-seg-legend{display:flex;flex-wrap:wrap;gap:4px 18px;font-size:12px;color:var(--sx-muted)}
.sx-seg-legend span{display:inline-flex;align-items:center;gap:6px}
.sx-seg-legend i{width:10px;height:10px;background:var(--sx-track)} .sx-seg-legend i.sx-lk{background:var(--sx-cyan)} .sx-seg-legend i.sx-pd{background:var(--sx-warn)}
.sx-seg-legend b{font-family:var(--sx-f-num);font-weight:600;color:var(--sx-text)}

/* ===== C 趋势折线 ===== */
.sx-legend{display:flex;flex-wrap:wrap;gap:4px 16px;margin:0 0 6px;padding:0;list-style:none;font-size:12px;color:var(--sx-muted)}
.sx-legend li{display:inline-flex;align-items:center;gap:6px}
.sx-legend b{font-family:var(--sx-f-num);color:var(--sx-text);font-weight:600}
.sx-sw-line{width:18px;height:0;border-top:2px solid var(--sx-cyan)} .sx-sw-dash{width:18px;height:0;border-top:2px dashed var(--sx-gold)}
.sx-trend svg{display:block;width:100%;height:auto;max-height:260px}
.sx-ax{fill:var(--sx-muted);font:12px var(--sx-f-mono)} .sx-grid-l{stroke:var(--sx-line);stroke-width:1}
.sx-s-lk{fill:none;stroke:var(--sx-cyan);stroke-width:2.5;filter:drop-shadow(0 0 4px rgba(63,224,240,.6))}
.sx-s-lg{fill:none;stroke:var(--sx-gold);stroke-width:2;stroke-dasharray:6 4}
.sx-m-lk{fill:var(--sx-ground);stroke:var(--sx-cyan);stroke-width:2} .sx-m-lg{fill:var(--sx-ground);stroke:var(--sx-gold);stroke-width:2}
.sx-end-lbl{font:600 14px var(--sx-f-num)}

/* ===== D 店铺进度排行 ===== */
.sx-st-list{list-style:none;margin:0;padding:0;height:100%;overflow:auto;display:grid;align-content:start;gap:2px}
.sx-st-row{width:100%;display:grid;grid-template-columns:22px minmax(0,1.5fr) minmax(56px,1fr) 42px;align-items:center;gap:8px;padding:5px 6px;background:transparent;border:1px solid transparent;text-align:left;cursor:pointer;transition:background .15s,border-color .15s}
.sx-st-row:hover{background:rgba(76,141,255,.10)}
.sx-st-row[aria-pressed="true"]{border-color:var(--sx-cyan);background:rgba(63,224,240,.10)}
.sx-st-rank{font:12px var(--sx-f-mono);color:var(--sx-muted)} .sx-st-rank-top{color:var(--sx-gold)}
.sx-st-name{display:flex;align-items:center;gap:6px;min-width:0;font-size:13px}
.sx-st-name span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sx-st-bar{height:8px;background:var(--sx-track)}
/* 条宽（width）由 JS 按百分比直接写进 inline style（不走 CSS 自定义属性）——
   check-css-tokens.js 只扫描 .css 文件里的 `--token:` 声明，扫不到 inline style
   里动态设置的自定义属性，会把它误报成"未定义引用"，见该脚本头部注释。 */
.sx-st-bar i{display:block;height:100%;transform-origin:left;animation:sx-grow-x .7s ease-out both}
.sx-st-pct{font-size:13px;font-weight:600;text-align:right}
.sx-is-expired .sx-st-name span{color:var(--sx-muted)}
.sx-lv-ok{background:var(--sx-ok)} .sx-lv-warn{background:var(--sx-warn)} .sx-lv-bad{background:var(--sx-bad)} .sx-lv-zero,.sx-lv-off{background:var(--sx-muted)}

/* ===== E 运营人员对比 ===== */
/* 单行横排、超出横向滚动：面板在宽屏是固定高度，折行会溢出压到下一行面板 */
.sx-ops{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(52px,1fr);gap:6px;height:100%;overflow-x:auto}
.sx-op{display:flex;flex-direction:column;align-items:center;min-width:0}
.sx-op-rate{font-size:12px;color:var(--sx-muted)} .sx-op-rate b{display:block;text-align:center;font:600 15px var(--sx-f-num);color:var(--sx-cyan)}
.sx-op-bars{flex:1;min-height:120px;width:100%;display:flex;align-items:flex-end;justify-content:center;gap:6px;padding-top:22px;border-bottom:1px solid var(--sx-line-hi);background:repeating-linear-gradient(to top,rgba(80,150,255,.14) 0 1px,transparent 1px 25%)}
.sx-op-bars i{position:relative;width:16px;transform-origin:bottom;animation:sx-grow-y .7s ease-out both} /* 条高同样由 JS 写 inline style，理由同上 */
.sx-op-bars i.sx-lk{background:linear-gradient(180deg,var(--sx-cyan),rgba(63,224,240,.12))}
.sx-op-bars i.sx-pd{background:linear-gradient(180deg,var(--sx-warn),rgba(251,146,60,.12))}
.sx-op-bars span{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);padding-bottom:2px;font:12px var(--sx-f-mono);color:var(--sx-text);white-space:nowrap}
.sx-op-name{margin-top:6px;font-size:13px;white-space:nowrap} .sx-op-sub{font-size:12px;color:var(--sx-muted)}
.sx-sw{display:inline-block;width:10px;height:10px;margin-right:4px;vertical-align:-1px}

/* ===== F 风险预警 ===== */
.sx-risk{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;height:100%;align-items:center}
.sx-alerts{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.sx-al{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;column-gap:6px;padding:6px 10px;background:rgba(4,14,40,.55);border-left:3px solid var(--sev)}
.sx-al-bad{--sev:var(--sx-bad)} .sx-al-warn{--sev:var(--sx-warn)} .sx-al-calm{--sev:var(--sx-ok)}
.sx-al-lbl{font-size:13px} .sx-al b{font-size:19px;font-weight:600;color:var(--sev)} .sx-al b small{font:12px var(--sx-f-body);color:var(--sx-muted);margin-left:3px}
.sx-al-sub{grid-column:1/-1;font-size:12px;color:var(--sx-muted)}
.sx-donut{display:flex;flex-direction:column;align-items:center;gap:8px}
.sx-donut-fig{position:relative;width:100px}
.sx-donut-fig svg{display:block;width:100%;height:auto;transform:rotate(-90deg)}
.sx-donut-c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1}
.sx-donut-c b{font-size:19px;font-weight:600} .sx-donut-c span{font-size:12px;color:var(--sx-muted)}
.sx-d-leg{list-style:none;margin:0;padding:0;display:grid;gap:1px;font-size:12px;width:100%}
.sx-d-leg li{display:grid;grid-template-columns:12px minmax(0,1fr) auto auto;align-items:center;gap:6px}
.sx-d-leg i{width:8px;height:8px} .sx-d-leg em{font-style:normal;color:var(--sx-muted);font-family:var(--sx-f-mono)}

/* ===== G 运营动态 ===== */
.sx-tabs{display:inline-flex;margin-left:auto;border:1px solid var(--sx-line)}
.sx-tabs button{padding:3px 10px;font-size:12px;color:var(--sx-muted);cursor:pointer}
.sx-tabs button+button{border-left:1px solid var(--sx-line)}
.sx-tabs button[aria-selected="true"]{background:rgba(63,224,240,.16);color:var(--sx-cyan)}
.sx-feed-wrap{height:100%;overflow:auto}
.sx-feed{list-style:none;margin:0;padding:0 0 0 4px}
.sx-fi{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;padding:0 0 12px 14px;border-left:1px solid var(--sx-line)}
.sx-fi::before{content:"";position:absolute;left:-4px;top:5px;width:7px;height:7px;background:var(--sx-ground);border:1px solid var(--dot,var(--sx-gold));transform:rotate(45deg)}
.sx-fi-task{--dot:var(--sx-cyan)}
.sx-fi time{font:12px/1.6 var(--sx-f-mono);color:var(--sx-cyan);white-space:nowrap}
.sx-fi-hd{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;font-size:13px}
.sx-fi-hd strong{font-weight:500}
.sx-fi p{margin:2px 0 0;font-size:12px;color:var(--sx-muted)}
.sx-fi .sx-proof{color:var(--sx-gold);margin-left:6px;white-space:nowrap}
.sx-empty-note{padding:32px 0;text-align:center;color:var(--sx-muted);font-size:13px}

/* ===== H 模块热力图（甘特式条形格） ===== */
.sx-panel-matrix .sx-pn-bd{display:flex;flex-direction:column;gap:8px}
.sx-mx-wrap{flex:1;min-height:0;overflow:auto}
.sx-mx{width:100%;min-width:860px;border-collapse:separate;border-spacing:0;font-size:12px}
.sx-mx th{position:sticky;top:0;z-index:2;background:var(--sx-panel-solid);font-weight:500;color:var(--sx-muted);padding:4px;border-bottom:1px solid var(--sx-line);white-space:nowrap}
.sx-mx thead tr:nth-child(2) th{top:29px}
.sx-grp{color:var(--sx-text);letter-spacing:.08em;border-bottom:1px solid var(--sx-line-hi)}
.sx-grp.sx-cad{color:var(--sx-gold)}
.sx-cnt{display:block;font:11px var(--sx-f-mono);color:var(--sx-muted)}
.sx-mx td{padding:3px 3px;border-bottom:1px solid rgba(80,150,255,.10);white-space:nowrap}
.sx-stick{position:sticky;left:0;z-index:1;background:var(--sx-panel-solid);text-align:left;padding-inline:8px}
.sx-mx th.sx-stick{z-index:3}
.sx-mx-op{color:var(--sx-cyan)}
.sx-mx tr.sx-is-sel td{background:rgba(63,224,240,.14)} .sx-mx tr.sx-is-sel td.sx-stick{box-shadow:inset 3px 0 0 var(--sx-cyan)}
.sx-mx tr.sx-is-expired td.sx-stick{color:var(--sx-muted)}
/* background-image（渐变的停止点百分比）由 JS 整串写 inline style，理由同上；
   --c 是色阶 token，由 .sx-hc-ok/warn/bad/zero 四个状态类定义，不受影响。 */
.sx-hc{display:block;height:22px;line-height:22px;text-align:center;font-family:var(--sx-f-mono)}
.sx-hc-ok{--c:rgba(52,211,153,.42)} .sx-hc-warn{--c:rgba(251,146,60,.42)} .sx-hc-bad{--c:rgba(248,113,113,.42)} .sx-hc-zero{--c:transparent;color:var(--sx-muted)}
.sx-hc-tot{font:600 13px/22px var(--sx-f-num)}
.sx-mx-legend{margin:0;display:flex;flex-wrap:wrap;gap:4px 16px;font-size:12px;color:var(--sx-muted)}
.sx-mx-legend span{display:inline-flex;align-items:center;gap:6px}
.sx-mx-legend i{width:18px;height:10px}

/* ===== 空状态 ===== */
.sx-empty{display:grid;place-items:center;padding-block:96px}
.sx-empty .sx-brk{max-width:520px;width:100%;padding:40px 28px;text-align:center;background:var(--sx-panel);border:1px solid var(--sx-line)}
.sx-empty svg{width:56px;height:56px;color:var(--sx-muted)}
.sx-empty h2{margin:12px 0 6px;font:700 22px var(--sx-f-title);letter-spacing:.08em}
.sx-empty p{margin:0;color:var(--sx-muted);font-size:13px}

/* ===== 窄屏细节 ===== */
@media (max-width:560px){
  .sx-panel-gauge .sx-pn-bd,.sx-risk{grid-template-columns:minmax(0,1fr)}
  .sx-boxes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sx-rings{grid-template-columns:minmax(0,1fr)}
  .sx-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sx-tile:nth-child(3){border-left:0} .sx-tile:nth-child(n+3){border-top:1px solid var(--sx-line)}
  .sx-hd-plate h1{font-size:22px;letter-spacing:.06em} .sx-hd-plate{padding-inline:52px}
}

/* ===== 动效（全部可被 reduced-motion 关闭，见 CLAUDE.md 无障碍要求） ===== */
@keyframes sx-sweep{0%,20%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}
@keyframes sx-pulse{0%{box-shadow:0 0 0 0 rgba(52,211,153,.6)}70%{box-shadow:0 0 0 8px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}}
@keyframes sx-draw{from{stroke-dasharray:0 1000}}
@keyframes sx-grow-y{from{transform:scaleY(0)}}
@keyframes sx-grow-x{from{transform:scaleX(0)}}
@media (prefers-reduced-motion:reduce){.sx *,.sx *::before,.sx *::after{animation:none!important;transition:none!important}}