:root { --bg:#0b0d10; --fg:#e6e9ee; --dim:#8b94a3; --mute:#5b6472; --line:#262c36; --acc:#5dd3a8; --buy:#3fb27f; --sell:#d65a5a; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 13px/1.4 -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; }
header { display: flex; align-items: center; gap: 12px; padding: 6px 10px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.brand { color: var(--acc); }
.tab { background: none; border: 1px solid var(--line); color: var(--dim); padding: 3px 10px; cursor: pointer; font: inherit; }
.tab.on { color: var(--fg); border-color: var(--acc); }
.srch { position: relative; }
#q { width: 180px; background: #12161b; border: 1px solid var(--line); color: var(--fg); padding: 3px 6px; font: inherit; }
.sug { position: absolute; top: 26px; left: 0; z-index: 10; background: #12161b; border: 1px solid var(--line); min-width: 260px; max-height: 340px; overflow: auto; }
.sug div { padding: 3px 8px; cursor: pointer; white-space: nowrap; }
.sug div.on, .sug div:hover { background: #1d232b; }
.sug small { color: var(--mute); margin-left: 6px; }
.hidden { display: none !important; }
.dim { color: var(--dim); }
.note { margin: 4px 10px; color: var(--dim); font-size: 12px; }
.bar { display: flex; align-items: center; gap: 12px; padding: 4px 10px; flex-wrap: wrap; }
.bar select, .bar input[type=date], .bar button { background: #12161b; color: var(--fg); border: 1px solid var(--line); font: inherit; padding: 2px 4px; }
.bar button { cursor: pointer; }
.ttl { font-weight: 600; }
.ttl small { color: var(--dim); font-weight: 400; margin-left: 6px; }
#chart { height: calc(100vh - 128px); min-height: 420px; margin: 0 4px; }
#b-tab { border-collapse: collapse; margin: 0 10px 20px; font-variant-numeric: tabular-nums; }
#b-tab th, #b-tab td { padding: 2px 10px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
#b-tab th { color: var(--dim); font-weight: 400; position: sticky; top: 0; background: var(--bg); }
#b-tab td.n { text-align: right; }
#b-tab tbody tr { cursor: pointer; }
#b-tab tbody tr:hover { background: #151a20; }
#b-tab tr.lo td { color: var(--mute); }
.sw { display: inline-block; width: 9px; height: 9px; margin-right: 5px; border-radius: 2px; vertical-align: -1px; }
.up { color: var(--buy); } .dn { color: var(--sell); }