/* 纸上交易监控台。层级靠字号/字重/墨色，不靠色块。 */
:root{
  color-scheme: light;
  --bg:#f6f6f4; --surface:#ffffff; --line:#e7e6e2; --grid:#efeeea; --axis:#b9b8b2;
  --text:#0b0b0b; --text-2:#52514e; --text-muted:#8a8984;
  --pos:#0f7b55; --neg:#c23a3a;
  /* 分类色：固定顺序，经 dataviz 校验器验证（前三槽两种模式全配对通过） */
  --series-1:#2a78d6; --series-2:#eb6834; --series-3:#1baf7a;
  --ink-line:#1f1f1d;       /* 实时权益总线：中性墨色，不占分类槽 */
  --hist:#9b9a94;           /* 长周期里的历史回放段 */
  --focus:#2a78d6;
  --radius:12px;
}
@media (prefers-color-scheme: dark){
  :root:where(:not([data-theme="light"])){
    color-scheme: dark;
    --bg:#111110; --surface:#1a1a19; --line:#2c2c2a; --grid:#242422; --axis:#55544f;
    --text:#f4f4f2; --text-2:#c3c2b7; --text-muted:#8d8c85;
    --pos:#3dbb87; --neg:#e66767;
    --series-1:#3987e5; --series-2:#d95926; --series-3:#199e70;
    --ink-line:#ecebe6; --hist:#6f6e69; --focus:#3987e5;
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --bg:#111110; --surface:#1a1a19; --line:#2c2c2a; --grid:#242422; --axis:#55544f;
  --text:#f4f4f2; --text-2:#c3c2b7; --text-muted:#8d8c85;
  --pos:#3dbb87; --neg:#e66767;
  --series-1:#3987e5; --series-2:#d95926; --series-3:#199e70;
  --ink-line:#ecebe6; --hist:#6f6e69; --focus:#3987e5;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang SC",
    "Hiragino Sans GB","Helvetica Neue",Arial,sans-serif;
  color:var(--text); background:var(--bg); font-size:14px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1{ font-size:15px; margin:0; font-weight:650; letter-spacing:-.2px; }
h2{ font-size:14px; margin:0; font-weight:650; letter-spacing:-.1px; }
h3{ font-size:12.5px; margin:0; font-weight:600; color:var(--text-2); }
p{ margin:0; }
b{ font-weight:600; }
button{ font:inherit; color:inherit; }
:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; border-radius:6px; }
.n{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.pos{ color:var(--pos); } .neg{ color:var(--neg); } .muted{ color:var(--text-muted); }
.cap{ color:var(--text-muted); font-size:12px; line-height:1.55; margin-top:10px; }

/* ---------------- 顶栏 ---------------- */
.bar{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:12px max(20px, calc((100vw - 1180px) / 2)); background:var(--surface);
  border-bottom:1px solid var(--line); position:sticky; top:0; z-index:10;
  flex-wrap:wrap;
}
.brand{ display:flex; align-items:center; gap:11px; }
.mark{ width:28px; height:28px; flex:0 0 auto; }
.mark rect{ fill:var(--text); }
.mark path{ fill:none; stroke:var(--surface); stroke-width:2.6;
            stroke-linecap:round; stroke-linejoin:round; }
.sub{ color:var(--text-muted); font-size:12px; }
.bar-right{ display:flex; gap:22px; flex-wrap:wrap; }
.kv{ display:flex; flex-direction:column; align-items:flex-end; }
.kv span{ color:var(--text-muted); font-size:11px; }
.kv b{ font-size:12.5px; font-variant-numeric:tabular-nums; font-weight:600; }
.conn::before{
  content:""; display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--text-muted); margin-right:6px; vertical-align:1px;
}
.conn.live::before{ background:var(--pos); }
.conn.poll::before{ background:var(--series-2); }
.conn.down::before{ background:var(--neg); }

main{ max-width:1180px; margin:0 auto; padding:18px 20px 48px; }

/* ---------------- 卡片 ---------------- */
.card{ background:var(--surface); border:1px solid var(--line);
       border-radius:var(--radius); padding:18px 20px; margin-bottom:14px; }
.card-head{ display:flex; justify-content:space-between; align-items:baseline;
            gap:12px; margin-bottom:12px; flex-wrap:wrap; }
.cols{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.cols2{ display:grid; grid-template-columns:1.1fr 1fr; gap:24px; }
@media (max-width:900px){ .cols,.cols2{ grid-template-columns:1fr; } }

/* ---------------- 实时收益 ---------------- */
.hero-card{ padding:20px 22px 16px; }
.hero-head{ display:flex; justify-content:space-between; align-items:flex-start;
            gap:16px; flex-wrap:wrap; margin-bottom:6px; }
.eyebrow{ font-size:12.5px; font-weight:500; color:var(--text-2); margin-top:14px; }
.hero-num{ display:flex; align-items:baseline; gap:12px; margin-top:2px; flex-wrap:wrap; }
.big{ font-size:48px; font-weight:650; letter-spacing:-1.6px; line-height:1.1; }
.big-sub{ font-size:17px; font-weight:550; color:var(--text-2); }
.hero-note{ color:var(--text-muted); font-size:12.5px; margin-top:4px;
            font-variant-numeric:tabular-nums; }

.seg{ display:inline-flex; gap:2px; padding:2px; border-radius:9px;
      border:1px solid var(--line); background:var(--bg); flex-wrap:wrap; }
.seg button{
  border:0; background:transparent; padding:5px 11px; border-radius:7px;
  font-size:12.5px; color:var(--text-2); cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.seg button:hover{ color:var(--text); }
.seg button[aria-selected="true"]{
  background:var(--surface); color:var(--text); font-weight:600;
  box-shadow:0 1px 2px rgba(0,0,0,.08), 0 0 0 1px var(--line);
}

/* 图表容器：高度必须由 CSS 固定。绘图时会把 canvas.height 设成
   clientHeight×dpr；若高度来自 height 属性，下一帧 clientHeight 就变成
   新值，每次刷新翻一倍（实测曾撑到几千像素）。 */
.tc{ position:relative; }
.tc canvas{ position:absolute; inset:0; width:100%; height:100%; display:block;
            cursor:crosshair; }
.tc canvas:focus-visible{ outline:2px solid var(--focus); outline-offset:3px; }
.chart-main{ height:300px; margin-top:8px; transition:opacity .2s ease; }
.chart-comp{ height:150px; transition:opacity .2s ease; }
.chart-long{ height:240px; }
.tc.loading{ opacity:.45; }
.tc-empty{ position:absolute; inset:0; display:flex; align-items:center;
           justify-content:center; color:var(--text-muted); font-size:13px;
           pointer-events:none; text-align:center; padding:0 24px; }
.tc-empty[hidden]{ display:none; }
.tc-tip{
  position:absolute; pointer-events:none; z-index:5; min-width:170px;
  background:var(--surface); border:1px solid var(--line); border-radius:9px;
  box-shadow:0 6px 24px rgba(0,0,0,.10); padding:8px 10px; font-size:12px;
}
.tc-tip-t{ color:var(--text-muted); font-size:11px; margin-bottom:4px;
           font-variant-numeric:tabular-nums; }
.tc-tip-r{ display:flex; align-items:center; gap:7px; line-height:1.75; }
.tc-tip-r i{ width:12px; height:2px; border-radius:1px; flex:0 0 auto; }
.tc-tip-r i.none{ background:transparent; }
.tc-tip-r b{ font-variant-numeric:tabular-nums; min-width:74px; text-align:right;
             color:var(--text); }
.tc-tip-r span{ color:var(--text-2); }

.comp-head{ display:flex; justify-content:space-between; align-items:baseline;
            gap:10px; margin:16px 0 2px; flex-wrap:wrap; }
.legend{ display:flex; gap:14px; color:var(--text-2); font-size:12px; flex-wrap:wrap; }
.legend span{ display:inline-flex; align-items:center; gap:6px; }
.legend i{ width:14px; height:2px; border-radius:1px; display:inline-block; }
.legend i.dash{ background:repeating-linear-gradient(90deg,var(--hist) 0 4px,transparent 4px 7px)!important; }

.stats{ display:grid; grid-template-columns:repeat(5,1fr); gap:0;
        border-top:1px solid var(--line); margin-top:14px; padding-top:12px; }
@media (max-width:820px){ .stats{ grid-template-columns:repeat(2,1fr); row-gap:12px; } }
.stat .l{ color:var(--text-muted); font-size:11.5px; }
.stat .v{ font-size:17px; font-weight:600; letter-spacing:-.3px; margin-top:1px; }
.stat .x{ color:var(--text-muted); font-size:11px; font-variant-numeric:tabular-nums; }

.explain{ margin-top:14px; border-top:1px solid var(--line); padding-top:10px;
          font-size:12.5px; color:var(--text-2); }
.explain summary{ cursor:pointer; color:var(--text-2); font-size:12.5px; }
.explain p, .explain ul{ margin:8px 0 0; }
.explain ul{ padding-left:18px; }
.explain li{ margin-bottom:4px; }

/* ---------------- 表格 ---------------- */
.table-wrap{ overflow-x:auto; margin:0 -4px; -webkit-overflow-scrolling:touch; }
#positions{ min-width:760px; } #gpositions{ min-width:620px; } #dryruns{ min-width:440px; }
.nowrap{ white-space:nowrap; }
table{ width:100%; border-collapse:collapse; font-size:12.5px; }
th{ text-align:left; font-weight:500; color:var(--text-muted); padding:6px 8px;
    border-bottom:1px solid var(--line); font-size:11.5px; white-space:nowrap; }
td{ padding:8px; border-bottom:1px solid var(--line);
    font-variant-numeric:tabular-nums; vertical-align:top; }
tr:last-child td{ border-bottom:none; }
.sym{ font-weight:600; }
.dim{ color:var(--text-muted); font-size:11px; }
.side{ font-weight:600; font-size:11.5px; }
.side.short{ color:var(--neg); } .side.long{ color:var(--pos); }
.flag{ color:var(--neg); font-size:11px; font-weight:600; }

/* ---------------- 前向验证 ---------------- */
.progress{ height:6px; background:var(--grid); border-radius:3px; overflow:hidden; }
.progress-fill{ height:100%; width:0; background:var(--text); border-radius:3px;
                transition:width .5s ease; }
.progress-label{ display:flex; justify-content:space-between; gap:12px;
                 color:var(--text-2); font-size:12px; margin-top:7px; flex-wrap:wrap; }
.checks{ margin-top:12px; }
.checks td:first-child{ color:var(--text-2); }
.ok{ color:var(--pos); font-weight:600; } .no{ color:var(--neg); font-weight:600; }

/* ---------------- 事件 ---------------- */
.events{ list-style:none; margin:0; padding:0; font-size:12.5px; max-height:260px;
         overflow:auto; }
.events li{ display:flex; gap:10px; padding:6px 0; border-bottom:1px solid var(--line); }
.events li:last-child{ border-bottom:none; }
.events time{ color:var(--text-muted); font-variant-numeric:tabular-nums;
              flex:0 0 auto; font-size:11.5px; padding-top:1px; }

.sub-h{ margin:16px 0 6px; }
.verdict ul{ margin:6px 0 0; padding-left:17px; }
.verdict li{ margin-bottom:5px; font-size:12.5px; color:var(--text-2); }
footer{ color:var(--text-muted); font-size:12px; text-align:center; padding:12px 0; }
footer.err{ color:var(--neg); }

@media (max-width:560px){
  main{ padding:12px 16px 40px; }
  .bar{ padding:10px 16px; position:static; }
  .bar-right{ gap:14px; }
  .big{ font-size:38px; }
  .card{ padding:15px 16px; }
  .chart-main{ height:240px; }
}
@media (prefers-reduced-motion: reduce){
  *{ transition:none!important; }
}