:root { --bg:#fff; --fg:#111827; --muted:#6b7280; --line:#e5e7eb; --accent:#0f766e; --neg:#b91c1c; --pos:#15803d; --bar:#f9fafb; }
@media (prefers-color-scheme: dark) { :root { --bg:#0b1220; --fg:#e5e7eb; --muted:#94a3b8; --line:#1f2937; --accent:#2dd4bf; --neg:#f87171; --pos:#4ade80; --bar:#111827; } }
* { box-sizing: border-box; }
body { margin:0; font:14px/1.4 system-ui,sans-serif; background:var(--bg); color:var(--fg); padding:0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.bar { display:flex; align-items:center; gap:12px; padding:10px 16px; background:var(--bar); border-bottom:1px solid var(--line); position:sticky; top:0; }
.bar h1 { font-size:16px; margin:0; flex:1; }
main { padding:12px 16px; max-width:1100px; margin:0 auto; }
.muted { color:var(--muted); font-size:12px; }
.filters { display:flex; gap:8px; flex-wrap:wrap; }
.filters input, .filters select { flex:1 1 180px; padding:10px; font:inherit; color:inherit; background:var(--bg); border:1px solid var(--line); border-radius:8px; }
.scroll { overflow-x:auto; }
table { width:100%; border-collapse:collapse; white-space:nowrap; }
th, td { padding:8px 6px; border-bottom:1px solid var(--line); text-align:left; }
th { font-size:12px; color:var(--muted); font-weight:600; }
.n { text-align:right; font-variant-numeric:tabular-nums; }
.neg { color:var(--neg); } .pos { color:var(--pos); }
.btn { display:inline-block; margin:16px 0; padding:10px 16px; background:var(--accent); color:#fff; border:0; border-radius:8px; font:inherit; text-decoration:none; cursor:pointer; }
.link { background:none; border:0; color:var(--accent); font:inherit; cursor:pointer; }
.error { color:var(--neg); }
.login { min-height:100vh; display:grid; place-content:center; gap:16px; text-align:center; }
@media (max-width: 640px) { body { font-size:13px; } main { padding:12px 8px; } table { white-space:normal; } .price, .value, .costs, .qty { display:none; } th, td { padding:10px 3px; } .date { white-space:nowrap; } }

.tabs { display:flex; gap:4px; padding:8px 16px 0; max-width:1100px; margin:0 auto; border-bottom:1px solid var(--line); }
.tab { background:none; border:0; border-bottom:2px solid transparent; padding:8px 12px; font:inherit; color:var(--muted); cursor:pointer; }
.tab.on { color:var(--fg); border-bottom-color:var(--accent); font-weight:600; }
.wrap { padding:12px 16px; max-width:1100px; margin:0 auto; }
.positions .name { white-space:nowrap; }
.positions tr.total td { font-weight:700; background:var(--bar); }
.positions tr.group td { font-weight:600; }
.positions tr.group .caret::before { content:'▸'; display:inline-block; width:1.2em; }
.positions tr.group.open .caret::before { content:'▾'; }
.positions tr.group .caret { color:var(--fg); font-weight:700; font-size:15px; padding:0; }
.positions tr.leg td { font-size:12px; color:var(--muted); padding-left:6px; }
.positions tr.leg td.name { padding-left:22px; }
.positions tr.leg td.neg { color:var(--neg); } .positions tr.leg td.pos { color:var(--pos); }
@media (max-width: 640px) { .wrap { padding:12px 8px; } .tabs { padding:8px 8px 0; } .positions th, .positions td { padding:10px 3px; } }
#pos-head th { cursor:pointer; user-select:none; }
#pos-head th::after { content:' ' attr(data-dir); color:var(--accent); font-size:10px; }