:root { color-scheme: light dark; --bg:#f4f7fb; --surface:#fff; --surface-alt:#edf2f8; --ink:#17212f; --muted:#6d7a8d; --line:#dbe3ed; --accent:#246bce; --accent-soft:#e7f0ff; --positive:#138a59; --positive-soft:#e5f6ee; --negative:#c94848; --negative-soft:#ffebeb; --warning:#a66b06; --warning-soft:#fff4d9; --shadow:0 12px 30px rgba(25,51,84,.08); }
@media (prefers-color-scheme: dark) { :root { --bg:#111821; --surface:#18222f; --surface-alt:#202c3b; --ink:#edf3fa; --muted:#9caabd; --line:#334355; --accent:#75aafa; --accent-soft:#1e3555; --positive:#55d29c; --positive-soft:#173b2d; --negative:#ff8b8b; --negative-soft:#452427; --warning:#f0bc58; --warning-soft:#493a1d; --shadow:0 12px 30px rgba(0,0,0,.18); } }
* { box-sizing:border-box; } body { margin:0; background:var(--bg); color:var(--ink); font:14px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; }
.app-shell { max-width:1180px; margin:auto; padding:24px 18px 50px; }
.topbar { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding:8px 0 18px; }
.eyebrow,.section-kicker { color:var(--accent); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
h1,h2,h3,p { margin:0; } h1 { margin-top:2px; font-size:clamp(22px,4vw,32px); letter-spacing:0; } h2 { font-size:18px; } h3 { font-size:14px; }
.ticker { color:var(--muted); font-size:.55em; font-weight:600; vertical-align:middle; margin-left:5px; } .meta-line { color:var(--muted); margin-top:4px; font-size:12px; }
button { font:inherit; } .refresh-btn,.raw-toolbar button { border:1px solid var(--line); background:var(--surface); color:var(--ink); border-radius:8px; min-height:40px; padding:0 14px; cursor:pointer; box-shadow:0 2px 7px rgba(0,0,0,.04); } .refresh-btn:hover,.raw-toolbar button:hover { border-color:var(--accent); color:var(--accent); } .refresh-btn:disabled { opacity:.6; cursor:wait; }
.refresh-icon { display:inline-block; font-size:20px; line-height:0; vertical-align:-2px; margin-right:6px; }
.status-strip { display:flex; align-items:center; gap:8px; min-height:34px; padding:7px 11px; margin-bottom:14px; border:1px solid var(--line); border-radius:8px; color:var(--muted); background:var(--surface); font-size:12px; } .status-dot { width:7px; height:7px; border-radius:50%; background:var(--accent); } .status-strip.error { color:var(--negative); border-color:color-mix(in srgb,var(--negative) 35%,var(--line)); } .status-strip.error .status-dot { background:var(--negative); } .status-strip.loading .status-dot { animation:pulse 1s infinite; }
@keyframes pulse { 50% { opacity:.35; } }
.tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:18px; } .tab { border:0; border-bottom:2px solid transparent; background:none; color:var(--muted); padding:10px 14px; cursor:pointer; } .tab.is-active { color:var(--accent); border-bottom-color:var(--accent); font-weight:700; }
.tab-panel { display:none; } .tab-panel.is-active { display:block; }
.hero-card,.section-block { min-width:0; max-width:100%; background:var(--surface); border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow); } .hero-card { padding:20px; margin-bottom:18px; } .section-block { padding:18px; margin-bottom:18px; box-shadow:none; }
.decision-main { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-top:6px; } .decision-label { font-size:clamp(21px,4vw,30px); font-weight:750; } .decision-copy { color:var(--muted); margin-top:5px; max-width:710px; } .signal-badge { flex:none; padding:6px 11px; border-radius:999px; background:var(--accent-soft); color:var(--accent); font-weight:700; white-space:nowrap; } .signal-badge.positive { background:var(--positive-soft); color:var(--positive); } .signal-badge.negative { background:var(--negative-soft); color:var(--negative); } .signal-badge.warning { background:var(--warning-soft); color:var(--warning); }
.metric-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; margin-top:18px; } .metric-grid.four { grid-template-columns:repeat(4,minmax(0,1fr)); } .metric-grid.three { grid-template-columns:repeat(3,minmax(0,1fr)); } .metric { padding:11px 12px; background:var(--surface-alt); border-radius:8px; min-width:0; } .metric-label { color:var(--muted); font-size:12px; } .metric-value { margin-top:3px; font-size:18px; font-weight:700; letter-spacing:0; overflow-wrap:anywhere; } .metric-note { color:var(--muted); font-size:11px; margin-top:2px; }
.disclaimer,.footnote { color:var(--muted); font-size:12px; margin-top:14px; } .disclaimer { border-left:3px solid var(--accent); padding-left:10px; }
.section-heading { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:12px; } .muted { color:var(--muted); font-size:12px; }
.factor-columns { display:grid; grid-template-columns:1fr 1fr; gap:18px; } .factor-group h3 { margin-bottom:8px; } .factor-group.positive h3 { color:var(--positive); } .factor-group.negative h3 { color:var(--negative); } .factor-item { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; padding:9px 0; border-bottom:1px solid var(--line); } .factor-name { font-weight:650; } .factor-detail { color:var(--muted); font-size:11px; overflow-wrap:anywhere; } .factor-value { font-weight:700; white-space:nowrap; } .positive .factor-value { color:var(--positive); } .negative .factor-value { color:var(--negative); }
.risk-list { display:grid; gap:8px; min-width:0; max-width:100%; } .risk-item { display:block; min-width:0; width:100%; max-width:100%; max-height:8em; overflow-x:hidden; overflow-y:auto; border-radius:8px; padding:10px 11px; background:var(--warning-soft); color:var(--warning); white-space:normal; overflow-wrap:anywhere; word-break:break-word; } .risk-item > * { min-width:0; max-width:100%; overflow-wrap:anywhere; word-break:break-word; } .risk-item.info { background:var(--surface-alt); color:var(--muted); } .risk-item strong { color:inherit; }
.alert { min-width:0; max-width:100%; padding:11px 13px; margin-bottom:12px; border:1px solid #e4c16e; border-radius:8px; background:var(--warning-soft); color:var(--warning); white-space:normal; overflow-wrap:anywhere; word-break:break-word; } .alert > *, .alert li { min-width:0; max-width:100%; overflow-wrap:anywhere; word-break:break-word; } .alert.info { border-color:#9fc4f2; background:var(--accent-soft); color:var(--accent); } .alert.danger { border-color:#e49a9a; background:var(--negative-soft); color:var(--negative); } .alert strong { display:block; margin-bottom:2px; } .alert ul { margin:4px 0 0; padding-left:18px; }
.comparison { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:12px; } .comparison .metric-value { font-size:16px; } .empty { color:var(--muted); padding:12px 0; font-size:13px; }
.raw-file-tabs { display:flex; gap:5px; flex-wrap:wrap; margin-bottom:12px; } .raw-file-tab { border:1px solid var(--line); color:var(--muted); background:var(--surface); padding:7px 10px; border-radius:7px; cursor:pointer; font-size:12px; } .raw-file-tab.is-active { color:var(--accent); border-color:var(--accent); background:var(--accent-soft); } .raw-toolbar { display:flex; align-items:center; gap:10px; margin-bottom:10px; } #copyStatus { color:var(--positive); font-size:12px; } .json-view { margin:0; min-height:300px; max-height:620px; overflow:auto; padding:15px; border-radius:8px; background:#101722; color:#dce8f7; font:12px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace; white-space:pre-wrap; word-break:break-word; }
footer { text-align:center; color:var(--muted); font-size:12px; padding-top:8px; }
@media (max-width:760px) { .app-shell { padding:16px 12px 38px; } .topbar { align-items:stretch; flex-direction:column; gap:12px; } .refresh-btn { align-self:flex-start; } .metric-grid,.metric-grid.four,.metric-grid.three { grid-template-columns:repeat(2,minmax(0,1fr)); } .factor-columns { grid-template-columns:1fr; gap:18px; } .decision-main { flex-direction:column; gap:10px; } .signal-badge { align-self:flex-start; } .comparison { grid-template-columns:1fr; } .section-block,.hero-card { padding:15px; } }
@media (max-width:400px) { .metric-grid,.metric-grid.four,.metric-grid.three { grid-template-columns:1fr 1fr; gap:7px; } .metric { padding:9px; } .metric-value { font-size:16px; } .tab { padding:9px 9px; } }
.json-view.is-collapsed { min-height:0; max-height:72px; overflow:hidden; }
.history-toolbar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .history-toolbar button,.history-toolbar select { min-height:38px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--ink); padding:0 11px; } .history-toolbar button { cursor:pointer; } .history-toolbar button:hover { border-color:var(--accent); color:var(--accent); } .history-toolbar button:disabled { opacity:.45; cursor:not-allowed; } .history-toolbar select { min-width:130px; } .history-freeze-note { margin-top:12px; border-left:3px solid var(--accent); padding-left:10px; color:var(--accent); font-size:12px; } .history-snapshot-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin:0 0 14px; } .history-snapshot-head h2 { margin-top:3px; font-size:22px; } .history-snapshot .section-block,.history-snapshot .hero-card { box-shadow:none; } .history-snapshot .raw-section { margin-bottom:0; }
@media (max-width:760px) { .history-toolbar select { flex:1 1 140px; } .history-toolbar button { flex:1 1 auto; } .history-snapshot-head { flex-direction:column; gap:8px; } }