:root { --bg:#fbfaf8; --panel:#fff; --fg:#24211d; --muted:#7a736a; --line:#e2ddd4; --buy:#2e7d4f; --sell:#b3403a; --warn:#b5642a; --accent:#2f6f8f; --warn-bg:rgba(181,100,42,.12); --sell-bg:rgba(179,64,58,.10); --glass:rgba(255,253,250,.66); --radius:12px; }
@media (prefers-color-scheme:dark) { :root { --bg:#15140f; --panel:#221f1a; --fg:#ece7df; --muted:#9b9389; --line:#3e392f; --buy:#63c48d; --sell:#e0736c; --warn:#e0975c; --accent:#6fb3d2; --glass:rgba(36,33,27,.70); --warn-bg:rgba(224,151,92,.14); --sell-bg:rgba(224,115,108,.12); } }
* { box-sizing:border-box; }
body { margin:0; color:var(--fg); background:var(--bg); font:14px/1.6 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; -webkit-font-smoothing:antialiased; }
body::before { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(1100px 560px at 10% -12%,rgba(47,111,143,.13),transparent 62%),radial-gradient(900px 460px at 98% -4%,rgba(181,100,42,.10),transparent 58%); }
.num { font-variant-numeric:tabular-nums; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
#topbar { position:sticky; top:0; z-index:10; background:var(--glass); border-bottom:2px solid var(--accent); backdrop-filter:blur(14px); padding:10px 18px; min-height:53px; }
.segmented { display:inline-flex; border:1px solid var(--line); border-radius:9px; overflow:hidden; }
.segmented span { padding:3px 13px; font-size:13px; }
.segmented .on { color:var(--accent); background:rgba(47,111,143,.10); font-weight:600; }
#shell { display:flex; align-items:flex-start; }
#sidebar { position:sticky; top:53px; width:196px; flex:0 0 196px; height:calc(100vh - 53px); border-right:1px solid var(--line); padding:12px 10px 24px; background:var(--glass); }
#sidebar .group { color:var(--muted); font-size:11px; letter-spacing:.08em; padding:14px 8px 6px; }
#sidebar a { display:block; padding:6px 10px; border-radius:6px; color:var(--fg); text-decoration:none; }
#sidebar a:hover,#sidebar a.on { color:var(--accent); background:rgba(47,111,143,.10); }
#sidebar a.on { font-weight:600; }
#main { flex:1; min-width:0; padding:22px 24px 72px; }
h2 { margin:0 0 6px; font-size:19px; }
h3 { margin:22px 0 10px; font-size:15px; }
.sub,.t-muted { color:var(--muted); font-size:13px; }
.toolbar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:10px 0 18px; }
button,input { font:inherit; color:var(--fg); background:var(--glass); border:1px solid var(--line); border-radius:var(--radius); padding:5px 11px; }
button { cursor:pointer; }
button:hover { border-color:var(--accent); color:var(--accent); }
input:focus-visible,button:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
input[type=text] { min-width:240px; }
.qrecent { display:flex; gap:5px; flex-wrap:wrap; }
.qrecent button { font-size:12px; padding:2px 8px; border-radius:8px; }
.banner { padding:10px 14px; border-radius:var(--radius); margin-bottom:14px; background:var(--warn-bg); color:var(--warn); border-left:3px solid currentColor; }
.banner.err { background:var(--sell-bg); color:var(--sell); }
.result-head { display:flex; align-items:baseline; flex-wrap:wrap; gap:9px; margin:14px 0 5px; font-size:16px; font-weight:600; }
.result-head .p { color:var(--accent); font-size:19px; }
.result-head .signal { color:var(--sell); }
.metrics { line-height:1.9; }
.chart-card { margin-top:14px; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:13px; }
.chart-tools { display:flex; justify-content:flex-end; gap:5px; margin-bottom:4px; }
.chart-tools button { font-size:12px; padding:2px 9px; }
.chart-tools button.on { color:var(--accent); border-color:var(--accent); }
.chart-wrap { overflow:hidden; touch-action:none; }
.chart-wrap svg { display:block; width:100%; height:auto; cursor:crosshair; }
.legend { display:flex; gap:15px; color:var(--muted); font-size:12px; margin:3px 0 0 5px; }
.legend .price { color:var(--accent); } .legend .p { color:var(--warn); }
.table-wrap { overflow:auto; margin-top:14px; }
table { border-collapse:collapse; width:100%; background:var(--panel); }
th,td { padding:8px 12px; border-bottom:1px solid var(--line); text-align:left; }
th { background:rgba(47,111,143,.06); }
@media(max-width:720px) { #sidebar{display:none;} #main{padding:18px 14px 60px;} #topbar{padding:8px 14px;} .toolbar input[type=text]{width:100%;} }