:root { color-scheme: dark; --bg:#080a0f; --panel:#0e131c; --panel2:#121925; --line:#252d3a; --text:#eef1f5; --muted:#7e899b; --amber:#efb75c; --blue:#58a8f7; --red:#ed6f6a; --green:#3ab5a7; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html,body { margin:0; min-height:100%; background:radial-gradient(circle at 50% -20%,#172031 0,#080a0f 42%); color:var(--text); font-family:Inter,"Microsoft YaHei",system-ui,sans-serif; }
button { color:inherit; font:inherit; }
.page-header { position:sticky; top:0; z-index:20; height:64px; display:flex; align-items:center; gap:28px; padding:0 max(20px,calc((100vw - 1420px)/2)); border-bottom:1px solid var(--line); background:rgba(9,12,18,.94); backdrop-filter:blur(14px); }
.brand { min-width:225px; display:flex; align-items:center; gap:11px; color:inherit; text-decoration:none; }.brand>span { display:grid; place-items:center; width:35px; height:35px; border:1px solid #8b6737; border-radius:9px; color:var(--amber); background:#211a12; font:20px serif; }.brand strong,.brand small { display:block; }.brand small { margin-top:2px; color:var(--muted); font-size:10px; }
nav { flex:1; display:flex; gap:7px; }nav a { padding:8px 12px; border-radius:6px; color:var(--muted); text-decoration:none; font-size:12px; }nav a:hover,nav a.active { color:#fff; background:#202838; }
#refresh { padding:8px 13px; border:1px solid #416d9b; border-radius:6px; background:#17324f; cursor:pointer; }#refresh:disabled { opacity:.55; cursor:wait; }
main { width:min(1420px,calc(100% - 36px)); margin:auto; padding-bottom:36px; }.hero { display:flex; align-items:flex-end; justify-content:space-between; padding:34px 2px 20px; }.hero p { margin:0 0 7px; color:#6e8bad; font-size:9px; letter-spacing:.18em; }.hero h1 { margin:0; font-size:clamp(24px,3vw,36px); font-weight:650; }.health { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:11px; }.health i { width:8px; height:8px; border-radius:50%; background:var(--amber); }.health.ready i { background:var(--green); box-shadow:0 0 9px rgba(58,181,167,.5); }.health.error i { background:var(--red); }
.toolbar { display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:14px; margin-bottom:16px; padding:10px; border:1px solid var(--line); border-radius:10px; background:rgba(14,19,28,.88); }.segmented { display:flex; gap:4px; }.segmented button { padding:8px 13px; border:1px solid transparent; border-radius:6px; color:var(--muted); background:#0a0e15; cursor:pointer; }.segmented button.active { border-color:#456e9b; color:#fff; background:#18304c; }.segmented button:disabled { opacity:.35; cursor:not-allowed; }.policy { min-width:0; text-align:center; }.policy strong,.policy span { display:block; }.policy strong { color:#cdd4df; font-size:11px; }.policy span { margin-top:3px; overflow:hidden; color:#697588; text-overflow:ellipsis; white-space:nowrap; font-size:9px; }
.batch-status { color:#dcb66f; font:9px ui-monospace,monospace; white-space:nowrap; }
.error { margin-bottom:15px; padding:13px; border:1px solid #733c3c; border-radius:7px; color:#efaaa6; background:#281516; }
.card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }.watch-card { min-width:0; overflow:hidden; border:1px solid var(--line); border-radius:11px; background:linear-gradient(145deg,#121925,#0c1119); cursor:pointer; content-visibility:auto; contain-intrinsic-size:450px; transition:transform .16s,border-color .16s,box-shadow .16s; }.watch-card:hover { transform:translateY(-2px); border-color:#4b647f; box-shadow:0 12px 28px rgba(0,0,0,.28); }.card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:14px 15px 8px; }.stock-title strong { font-size:14px; }.stock-title code { margin-left:6px; color:#768297; font:10px ui-monospace,monospace; }.stock-title small { display:block; margin-top:4px; color:#606c7f; font-size:9px; }.state-badge { padding:4px 7px; border:1px solid #49637e; border-radius:5px; color:#9bc9f5; background:#122337; font-size:9px; white-space:nowrap; }.state-badge.b2_confirmed,.state-badge.central_lower { border-color:#2e766d; color:#6fd0c2; background:#102923; }.state-badge.b2_candidate { border-color:#8a6a32; color:#f0c777; background:#29210f; }.state-badge.classification_conflict { border-color:#874949; color:#f08b87; background:#2b1718; }
.load-sentinel { height:52px; display:flex; align-items:center; justify-content:center; gap:8px; color:#697588; font-size:9px; }.load-sentinel i { width:7px; height:7px; border-radius:50%; background:#dcb66f; box-shadow:0 0 8px rgba(220,182,111,.45); }
.sketch-wrap { height:250px; padding:0 8px; }.sketch { display:block; width:100%; height:100%; }.sketch-bg { fill:#090d14; }.sketch-grid { stroke:#1c2430; stroke-width:1; vector-effect:non-scaling-stroke; }.sketch-central { fill:rgba(239,183,92,.08); stroke:#b48645; stroke-width:1; vector-effect:non-scaling-stroke; }.sketch-central.candidate { stroke-dasharray:5 4; opacity:.75; }.sketch-segment { stroke:#d3a254; stroke-width:2.1; fill:none; vector-effect:non-scaling-stroke; }.sketch-segment.candidate { stroke-dasharray:6 4; opacity:.75; }.sketch-endpoint { fill:#0c1118; stroke:#e5b862; stroke-width:1.3; vector-effect:non-scaling-stroke; }.sketch-label { fill:#f0cc84; font:9px ui-monospace,monospace; paint-order:stroke; stroke:#090d14; stroke-width:3px; stroke-linejoin:round; }.sketch-endpoint-time { fill:#a2adbd; font:8px ui-monospace,monospace; paint-order:stroke; stroke:#090d14; stroke-width:3px; }.sketch-time,.sketch-price { fill:#718096; font:8px ui-monospace,monospace; }.sketch-central-label { fill:#d3a85d; font:8px ui-monospace,monospace; paint-order:stroke; stroke:#090d14; stroke-width:3px; }.sketch-current { stroke:#39c2b2; stroke-dasharray:3 3; stroke-width:1.2; vector-effect:non-scaling-stroke; }.sketch-current-point { fill:#5ae0cf; stroke:#09201e; stroke-width:2; vector-effect:non-scaling-stroke; }.sketch-current-pill { fill:#178c80; }.sketch-current-text { fill:#f3fffd; font:bold 9px ui-monospace,monospace; }.sketch-signal.buy { fill:#e26e69; }.sketch-signal.sell { fill:#36aa9c; }.sketch-signal.candidate { opacity:.55; }.sketch-signal-text { fill:#fff; font:bold 8px ui-monospace,monospace; }.sketch-empty { fill:#667185; font:11px sans-serif; }
.card-foot { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; padding:10px 12px 12px; border-top:1px solid #1c2430; }.card-metric { min-width:0; padding:8px 9px; border:1px solid #242d3b; border-radius:7px; background:#0b1018; }.card-metric small,.card-metric strong,.card-metric time { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.card-metric small { color:#718096; font-size:8px; }.card-metric strong { margin-top:3px; color:#d9c08d; font:600 13px ui-monospace,monospace; }.card-metric time { margin-top:2px; color:#8f9bad; font:8px ui-monospace,monospace; }.card-metric.current { border-color:#24695f; background:#0d1d1b; }.card-metric.current strong { color:#64d7c8; }.card-metric.central strong { font-size:11px; }.card-state { grid-column:1/-1; display:flex; justify-content:space-between; gap:10px; color:#647185; font-size:8px; }.card-state small { color:#8995a7; }
.deck-view { position:relative; display:grid; grid-template-columns:70px minmax(0,1000px) 70px; justify-content:center; align-items:center; gap:20px; min-height:620px; }.deck-card { width:100%; overflow:hidden; border:1px solid #3a4657; border-radius:15px; background:linear-gradient(145deg,#141d2b,#0c1119); box-shadow:0 22px 60px rgba(0,0,0,.42); touch-action:pan-y; }.deck-card .card-head { padding:20px 22px 10px; }.deck-card .stock-title strong { font-size:20px; }.deck-card .sketch-wrap { height:480px; padding:0 15px; }.deck-card .card-foot { padding:14px 22px 18px; }.deck-arrow { display:flex; align-items:center; flex-direction:column; gap:5px; border:0; color:#aeb7c5; background:transparent; font-size:54px; cursor:pointer; }.deck-arrow:hover { color:#fff; }.deck-arrow small { color:#657184; font-size:9px; }.deck-footer { grid-column:1/-1; display:flex; justify-content:space-between; color:#667286; font-size:10px; }.thumbnail-strip { grid-column:1/-1; display:flex; justify-content:center; gap:6px; overflow-x:auto; padding:3px 0 8px; }.thumbnail { min-width:74px; padding:7px 9px; border:1px solid #252e3b; border-radius:6px; color:#778396; background:#0c1118; cursor:pointer; font-size:9px; }.thumbnail.active { border-color:#a47b3f; color:#edc47c; background:#211a11; }
.data-policy { display:flex; gap:14px; margin-top:17px; padding:14px 16px; border:1px solid #29313e; border-radius:8px; color:#778397; background:#0d121a; font-size:10px; line-height:1.6; }.data-policy strong { color:#c2cad5; white-space:nowrap; }
@media(max-width:1050px){.card-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.deck-view{grid-template-columns:50px minmax(0,1fr) 50px;}.deck-card .sketch-wrap{height:430px;}}
@media(max-width:700px){.page-header{padding:0 12px;gap:8px}.brand{min-width:0;flex:1}.brand small,nav{display:none}main{width:calc(100% - 20px)}.hero{align-items:flex-start;flex-direction:column;gap:12px}.toolbar{grid-template-columns:1fr}.policy{order:3;text-align:left}.card-grid{grid-template-columns:1fr}.sketch-wrap{height:280px}.deck-view{display:grid;grid-template-columns:42px minmax(0,1fr) 42px;gap:3px;min-height:520px}.deck-card .sketch-wrap{height:360px;padding:0 4px}.deck-arrow{font-size:38px}.deck-arrow small{display:none}.deck-footer{align-items:flex-start;flex-direction:column;gap:5px}.data-policy{align-items:flex-start;flex-direction:column}.card-head{padding-left:12px;padding-right:12px}}