:root { --ink:#17202a; --muted:#69737d; --line:#e4e8eb; --paper:#fff; --bg:#f4f6f7; --brand:#9d2d2d; --brand-dark:#702020; --gain:#c43a3a; --loss:#16805c; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--bg); font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif; letter-spacing:0; }
.topbar { height:58px; padding:0 max(20px,calc((100vw - 1180px)/2)); display:flex; align-items:center; justify-content:space-between; gap:20px; color:#fff; background:#20282e; border-bottom:3px solid var(--brand); }
.brand { display:flex; align-items:center; gap:10px; color:#fff; font-size:17px; font-weight:700; text-decoration:none; }
.brand-mark { display:grid; place-items:center; width:30px; height:30px; border:1px solid #d8a5a5; color:#fff; font-size:11px; }
nav { display:flex; height:100%; align-items:center; gap:20px; } nav a { display:flex; align-items:center; height:100%; color:#cdd3d7; text-decoration:none; font-size:14px; border-bottom:3px solid transparent; } nav a.active { color:#fff; border-color:#fff; }
.page { max-width:1180px; margin:0 auto; padding:32px 20px 48px; }
.page-head { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:24px; }
.eyebrow { display:flex; align-items:center; gap:8px; margin-bottom:8px; color:var(--muted); font-size:13px; }.live-dot { width:8px; height:8px; border-radius:50%; background:#35a778; }
h1 { margin:0 0 8px; font-size:30px; line-height:1.2; } .page-head p,.panel-head p { margin:0; color:var(--muted); font-size:13px; }
button { min-width:92px; height:36px; padding:0 14px; border:1px solid #b9c0c5; border-radius:4px; color:var(--ink); background:#fff; font:inherit; cursor:pointer; } button:hover { border-color:var(--brand); color:var(--brand); } button:disabled { opacity:.55; cursor:wait; }
.metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border:1px solid var(--line); border-radius:6px; background:#fff; overflow:hidden; }
.metric { min-height:126px; padding:22px; border-left:1px solid var(--line); }.metric:first-child { border-left:0; }.metric.primary { border-top:3px solid var(--brand); padding-top:19px; }
.metric span { display:block; margin-bottom:12px; color:var(--muted); font-size:13px; }.metric strong { display:block; font-size:25px; font-variant-numeric:tabular-nums; }.metric small { display:block; margin-top:8px; color:var(--muted); font-size:12px; }
.panel { margin-top:20px; padding:22px; border:1px solid var(--line); border-radius:6px; background:var(--paper); }.panel-head { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:18px; }.panel-head h2 { margin:0 0 5px; font-size:18px; }.panel-stat { color:var(--muted); font-size:13px; }
.chart { min-height:260px; }.chart svg { display:block; width:100%; height:auto; max-height:280px; overflow:visible; }.grid line { stroke:#e9edef; stroke-width:1; }.grid text,.date-label { fill:#7b858d; font-size:11px; }.date-label.end { text-anchor:end; }.area { fill:rgba(157,45,45,.08); }.line { fill:none; stroke:var(--brand); stroke-width:3; vector-effect:non-scaling-stroke; }.chart circle { fill:#fff; stroke:var(--brand); stroke-width:3; }
.table-wrap { overflow:auto; } table { width:100%; min-width:850px; border-collapse:collapse; } th { padding:10px 12px; color:var(--muted); background:#f7f8f8; border-bottom:1px solid var(--line); font-size:12px; font-weight:600; text-align:left; white-space:nowrap; } td { padding:13px 12px; border-bottom:1px solid var(--line); font-size:13px; white-space:nowrap; } tbody tr:last-child td { border-bottom:0; } td a,.mobile-card a { color:var(--ink); font-weight:700; text-decoration:none; } td a:hover,.mobile-card a:hover { color:var(--brand); } td small { display:block; margin-top:4px; color:var(--muted); }.num { text-align:right; font-variant-numeric:tabular-nums; }
.positive { color:var(--gain)!important; }.negative { color:var(--loss)!important; }.neutral { color:var(--muted)!important; }.count-badge { min-width:28px; padding:4px 8px; text-align:center; color:var(--brand-dark); background:#f5eaea; border-radius:999px; font-size:12px; font-weight:700; }
.empty-state { padding:22px; color:var(--muted); background:#f7f8f8; text-align:center; font-size:13px; }.pending-row { display:grid; grid-template-columns:90px 1fr auto; gap:16px; padding:12px; border-top:1px solid var(--line); font-size:13px; }.pending-row:first-child { border-top:0; }.pending-row small { color:var(--muted); }
.error-box { padding:18px; border:1px solid #dbb6b6; border-radius:6px; color:#842a2a; background:#fff3f3; }.mobile-list { display:none; }
footer { display:flex; justify-content:space-between; gap:32px; padding:20px 2px 0; color:var(--muted); font-size:11px; line-height:1.7; } footer p { max-width:650px; margin:0; }
@media (max-width:800px) { .topbar { height:auto; min-height:58px; padding:0 16px; }.brand span:last-child { display:none; } nav { gap:14px; }.page { padding:24px 14px 36px; }.page-head { align-items:flex-start; } h1 { font-size:25px; }.metrics { grid-template-columns:1fr 1fr; }.metric { min-height:112px; padding:17px; }.metric:nth-child(3) { border-left:0; border-top:1px solid var(--line); }.metric:nth-child(4) { border-top:1px solid var(--line); }.metric strong { font-size:20px; }.panel { padding:16px; }.chart { min-height:180px; }.table-wrap { display:none; }.mobile-list { display:grid; gap:10px; }.mobile-card { padding:14px; border:1px solid var(--line); border-radius:5px; }.mobile-card .row { display:flex; justify-content:space-between; gap:12px; }.mobile-card small { display:block; margin-top:4px; color:var(--muted); font-size:11px; }.mobile-card p { margin:10px 0 0; color:var(--muted); font-size:12px; }.mini-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px; }.mini-grid span { color:var(--muted); font-size:11px; }.mini-grid b { display:block; margin-top:3px; color:var(--ink); font-size:13px; }.pending-row { grid-template-columns:70px 1fr; }.pending-row small { grid-column:2; }.panel-head { align-items:flex-start; } footer { display:block; } footer p+p { margin-top:10px; } }
@media (max-width:440px) { .page-head { display:block; }.page-head button { margin-top:16px; }.metrics { grid-template-columns:1fr; }.metric,.metric:nth-child(n) { border-left:0; border-top:1px solid var(--line); }.metric:first-child { border-top:3px solid var(--brand); } nav a { font-size:12px; } }