:root { --bg:#0f1115; --card:#181b22; --line:#262a33; --fg:#e8eaf0; --muted:#8b93a7; --up:#ff5b5b; --down:#2ecc71; --accent:#4c8dff; --warn:#f2b64b; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin:0; background:var(--bg); color:var(--fg); font-family: -apple-system, "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", sans-serif; font-size:16px; }
body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
header { position: sticky; top:0; z-index:10; background:rgba(15,17,21,.95); backdrop-filter: blur(8px); padding: calc(8px + env(safe-area-inset-top)) 14px 8px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; }
header h1 { font-size:17px; margin:0; font-weight:600; }
header .sub { color:var(--muted); font-size:12px; }
main { padding: 10px 12px; max-width: 1100px; margin: 0 auto; }
.page { display:none; }
.page.active { display:block; }
.grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap:10px; margin-bottom:12px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:12px 14px; }
.card .label { color:var(--muted); font-size:12px; }
.card .value { font-size:24px; font-weight:700; margin:2px 0; font-variant-numeric: tabular-nums; }
.card .delta { font-size:13px; }
.up { color:var(--up); } .down { color:var(--down); } .muted { color:var(--muted); }
.section { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:12px 14px; margin-bottom:12px; }
.section h2 { font-size:15px; margin:0 0 8px; }
.section h3 { font-size:14px; margin:12px 0 6px; color:var(--muted); font-weight:600; }
.big { font-size:20px; font-weight:700; }
.pill { display:inline-block; padding:3px 10px; border-radius:999px; font-size:13px; background:#22262f; margin:2px 4px 2px 0; }
.pill.buy { background:#4a1f1f; color:var(--up); } .pill.sell { background:#173d2a; color:var(--down); } .pill.warn { background:#3d3417; color:var(--warn); }
ul.list { list-style:none; padding:0; margin:0; }
ul.list li { padding:7px 0; border-bottom:1px solid var(--line); font-size:14px; line-height:1.45; }
ul.list li:last-child { border-bottom:none; }
.bar { display:flex; align-items:center; gap:8px; margin:6px 0; font-size:13px; }
.bar .name { flex: 0 0 150px; }
.bar .track { flex:1; height:10px; background:#22262f; border-radius:6px; position:relative; overflow:hidden; }
.bar .fill { position:absolute; top:0; bottom:0; }
.bar .num { flex:0 0 44px; text-align:right; font-variant-numeric: tabular-nums; }
table { width:100%; border-collapse: collapse; font-size:13px; }
th, td { padding:6px 4px; text-align:right; border-bottom:1px solid var(--line); white-space:nowrap; }
th:first-child, td:first-child { text-align:left; }
.scroll { overflow-x:auto; -webkit-overflow-scrolling: touch; }
nav.tabs { position:fixed; bottom:0; left:0; right:0; background:#14171d; border-top:1px solid var(--line); display:flex; padding-bottom: env(safe-area-inset-bottom); z-index:20; }
nav.tabs button { flex:1; background:none; border:none; color:var(--muted); padding:10px 4px 8px; font-size:12px; display:flex; flex-direction:column; align-items:center; gap:2px; }
nav.tabs button .ico { font-size:20px; }
nav.tabs button.active { color:var(--fg); }
canvas { width:100% !important; }
.chart { height:220px; }
.chart.tall { height:300px; }
.stock { margin-bottom:12px; }
.stock summary { cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; padding:4px 0; }
.stock summary::-webkit-details-marker { display:none; }
.gauge { font-size:36px; font-weight:800; }
.check { font-size:14px; padding:4px 0; }
.note { font-size:12px; color:var(--muted); }
.btn { background:var(--accent); color:white; border:none; border-radius:10px; padding:8px 14px; font-size:14px; }
@media (min-width: 900px) { header h1 { font-size:20px; } .card .value { font-size:28px; } .chart { height:300px; } .chart.tall { height:380px; } }