:root { --bg:#f7f8fa; --card:#fff; --ink:#1b2430; --mute:#6b7685; --line:#e3e7ec; --up:#0f8a5f; --down:#c8392b; --accent:#0f5e75; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:14px/1.45 -apple-system, "Segoe UI", Roboto, Arial, sans-serif; padding:16px; }
header { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; align-items:flex-end; margin-bottom:12px; }
h1 { margin:0; font-size:22px; } h2 { font-size:16px; margin:18px 0 8px; } h3 { font-size:14px; margin:0 0 8px; }
.sub,.meta,.note { color:var(--mute); font-size:12px; margin:2px 0; }
.toolbar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:8px 0; color:var(--mute); }
.seg { display:inline-flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.seg button { border:0; background:#fff; padding:5px 10px; cursor:pointer; font:inherit; color:var(--ink); }
.seg button.on { background:var(--accent); color:#fff; }
.btn, select { border:1px solid var(--line); background:#fff; border-radius:8px; padding:5px 10px; font:inherit; cursor:pointer; }
.cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:10px 12px; }
.card .lbl { color:var(--mute); font-size:12px; min-height:32px; }
.card .val { font-size:20px; font-weight:600; margin:2px 0; }
.card .chg { display:grid; grid-template-columns:repeat(4,1fr); font-size:11px; color:var(--mute); }
.card .chg b { display:block; font-size:12px; }
.up { color:var(--up); } .down { color:var(--down); }
.tag { font-size:10px; background:#fdecea; color:var(--down); border-radius:4px; padding:1px 5px; margin-left:4px; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,560px),1fr)); gap:14px; margin-top:12px; }
.panel { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:12px; min-width:0; }
.chartbox { position:relative; height:360px; width:100%; }
.tblwrap { max-height:360px; overflow:auto; background:#fff; border:1px solid var(--line); border-radius:10px; }
table { border-collapse:collapse; width:100%; font-size:12px; }
th,td { padding:5px 10px; border-bottom:1px solid var(--line); text-align:right; white-space:nowrap; }
th:first-child,td:first-child { text-align:left; }
th { position:sticky; top:0; background:#f0f3f6; }

.ptable { margin-top:8px; font-size:12px; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.ptable th, .ptable td { text-align:left; white-space:normal; padding:4px 8px; position:static; }
.ptable th { background:#f0f3f6; font-weight:600; width:32%; }
.ptable tr:first-child th:not(:first-child) { width:auto; }