:root {
  --bg: #f6f7f9; --card: #fff; --ink: #14171a; --muted: #6b7480;
  --line: #e4e7ec; --up: #1d6f47; --down: #a1484a; --accent: #1f5fd0;
}
:root[data-theme="dark"] { --bg:#14171a; --card:#1d2126; --ink:#e9edf1; --muted:#9aa4b0;
        --line:#2b3138; --up:#5fae82; --down:#cf8285; --accent:#7aa5f0; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
[hidden] { display:none !important; }
.muted { color:var(--muted); }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; }

.login-wrap { min-height:100dvh; display:grid; place-items:center; padding:20px; }
.login-card { width:100%; max-width:360px; padding:28px; display:flex; flex-direction:column; gap:6px; }
.login-card h1 { margin:0; font-size:20px; }
.login-card p { margin:0 0 12px; font-size:14px; }
label { font-size:13px; color:var(--muted); margin-top:10px; }
input { padding:10px 12px; font-size:16px; border:1px solid var(--line);
  border-radius:8px; background:var(--bg); color:var(--ink); }
input:focus { outline:2px solid var(--accent); outline-offset:1px; }
button { font:inherit; cursor:pointer; }
#login-btn { margin-top:18px; padding:11px; border:0; border-radius:8px;
  background:var(--accent); color:#fff; font-weight:600; }
#login-btn[disabled] { opacity:.6; cursor:default; }
.error { color:#b3261e; font-size:14px; margin:12px 0 0; }

.topbar { display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:14px 20px; border-bottom:1px solid var(--line); background:var(--card); }
.topbar-id { display:flex; align-items:center; gap:12px; }
.avatar { width:38px; height:38px; border-radius:50%; flex:0 0 auto;
  background:var(--accent); color:#fff; font-size:17px; font-weight:700;
  display:flex; align-items:center; justify-content:center; }
.topbar-id-text { display:flex; flex-direction:column; gap:3px; line-height:1.2; }
.topbar-name { font-size:16px; font-weight:650; }
.status-pill { display:inline-flex; align-items:center; gap:6px; font-size:12px;
  color:var(--muted); padding:1px 8px 1px 6px; border:1px solid var(--line);
  border-radius:999px; width:fit-content; }
.status-dot { width:7px; height:7px; border-radius:50%; background:var(--up);
  box-shadow:0 0 0 0 rgba(29,111,71,.4); animation:pulse 2.4s infinite; }
.status-pill[data-state="stale"] .status-dot { background:var(--down); animation:none; }
.status-pill[data-state="stale"] .status-label { font-style:italic; }
@keyframes pulse {
  0% { box-shadow:0 0 0 0 rgba(29,111,71,.45); }
  70% { box-shadow:0 0 0 7px rgba(29,111,71,0); }
  100% { box-shadow:0 0 0 0 rgba(29,111,71,0); }
}
@media (prefers-reduced-motion: reduce) { .status-dot { animation:none; } }
.linkish { background:none; border:0; color:var(--accent); font-size:14px; padding:4px; }
main { max-width:1100px; margin:0 auto; padding:20px; }

.tiles { display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); }
.tile { padding:16px; display:flex; flex-direction:column; gap:4px; }
.label { font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
.big { font-size:24px; font-weight:650; font-variant-numeric:tabular-nums; }
.sub { font-size:13px; font-variant-numeric:tabular-nums; }

.tabs { display:flex; gap:4px; margin:22px 0 12px; flex-wrap:wrap; }
.acct-tabs { display:flex; gap:6px; margin:6px 0 14px; flex-wrap:wrap; }
.acct-tab { padding:7px 14px; border:1px solid var(--line); border-radius:8px;
  background:var(--card); color:var(--muted); font-size:13px; cursor:pointer; }
.acct-tab:hover { border-color:var(--accent); color:var(--accent); }
.acct-tab.active { color:#fff; background:var(--accent); border-color:var(--accent); font-weight:600; }
.tab { padding:8px 14px; border:1px solid var(--line); border-radius:999px;
  background:var(--card); color:var(--muted); font-size:14px; }
.tab.active { color:#fff; background:var(--accent); border-color:var(--accent); }

.pane { padding:0; overflow:hidden; }
.scroll { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; }
th, td { padding:10px 14px; text-align:right; white-space:nowrap;
  border-bottom:1px solid var(--line); font-size:14px; }
th { font-size:12px; text-transform:uppercase; letter-spacing:.04em;
  color:var(--muted); font-weight:600; position:sticky; top:0; background:var(--card); }
th:first-child, td:first-child { text-align:left; }
tbody tr:last-child td { border-bottom:0; }
.sym { color:var(--muted); font-size:12px; margin-left:6px; }
.up { color:var(--up); } .down { color:var(--down); }
.tile .big.up { color:var(--up); }
.tile .big.down { color:var(--down); }
.stale { font-style:italic; }
.footnote { font-size:13px; margin-top:18px; }
a { color:var(--accent); }
@media (max-width:560px) { .big { font-size:20px; } main { padding:14px; } }

.topbar-actions { display:flex; gap:14px; align-items:center; }
.icon-btn { background:none; border:1px solid var(--line); border-radius:8px;
  width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center;
  color:var(--ink); font-size:18px; line-height:1; padding:0; cursor:pointer; }
.icon-btn:hover { border-color:var(--accent); color:var(--accent); }
.print-head, .print-only { display:none; }

/* Print / Save as PDF. Everything goes on the page, not just the open tab:
   a printed statement that silently omitted two thirds of the account would
   be worse than no statement. Forced to a light palette - the dark theme
   would otherwise burn a page of toner and read badly. */
@media print {
  :root {
    --bg:#fff; --card:#fff; --ink:#000; --muted:#444;
    --line:#bbb; --up:#0a7d3f; --down:#333; --accent:#000;
  }
  @page { margin: 14mm; }
  body { background:#fff; color:#000; font-size:10pt; }
  .topbar, .tabs, .footnote, .acct-tabs { display:none !important; }
  .print-head { display:block; margin-bottom:14px; }
  .print-head h1 { margin:0 0 2px; font-size:17pt; }
  .print-head p { margin:0; font-size:9pt; color:#444; }
  .print-only { display:block; margin:20px 0 6px; font-size:12pt; }
  main { max-width:none; padding:0; }

  /* every pane prints, whichever tab happens to be open on screen */
  .pane[hidden] { display:block !important; }
  .scroll { overflow:visible !important; }

  .tiles { grid-template-columns:repeat(4,1fr); gap:8px; }
  .tile { padding:8px 10px; break-inside:avoid; }
  .big { font-size:13pt; }
  .card { border:1px solid #bbb; border-radius:4px; }
  .pane { border:0; }
  table { border:1px solid #bbb; }
  th, td { padding:4px 7px; font-size:8.5pt; }
  th { background:#f0f0f0 !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  thead { display:table-header-group; }     /* repeat headers across pages */
  tr { break-inside:avoid; }
  a { color:#000; text-decoration:none; }
  a[href^="http"]::after { content:""; }    /* no URL spew after every link */
  .up, .down { color:#000 !important; }     /* a printed statement states, it does not editorialise */
}

/* ---- account value chart ---- */
.chart-card { margin-top:14px; padding:14px 16px 6px; }
.chart-head { display:flex; justify-content:space-between; align-items:baseline;
  gap:12px; flex-wrap:wrap; margin-bottom:6px; }
.chart-meta { font-size:12px; color:var(--muted); }
.chart-ranges { display:flex; gap:6px; margin:8px 0 4px; flex-wrap:wrap; }
.range-pill { padding:4px 10px; border:1px solid var(--line); border-radius:999px;
  background:var(--card); color:var(--muted); font-size:12px; cursor:pointer; }
.range-pill:hover { border-color:var(--accent); color:var(--accent); }
.range-pill.active { color:#fff; background:var(--accent); border-color:var(--accent); }
.chart-wrap { width:100%; position:relative; }
.chart-tooltip { position:absolute; z-index:5; pointer-events:none; padding:6px 9px;
  background:var(--card); border:1px solid var(--line); border-radius:6px;
  font-size:12px; line-height:1.35; box-shadow:0 2px 8px rgba(0,0,0,.12);
  transform:translate(-50%, -100%); margin-top:-10px; white-space:nowrap; }
.chart-tooltip .tt-date { color:var(--muted); }
.chart-tooltip .tt-val { font-weight:600; font-variant-numeric:tabular-nums; }
.chart { width:100%; height:240px; display:block; }
.chart .grid { stroke:var(--line); stroke-width:1; }
.chart .ax { fill:var(--muted); font-size:11px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; }
.chart .ln { fill:none; stroke:var(--up); stroke-width:2;
  stroke-linejoin:round; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.chart.down .ln { stroke:var(--down); }
.chart .area { fill:url(#chart-fill); }
.chart.down .area { fill:url(#chart-fill-down); }
.chart .dot { fill:var(--up); }
.chart.down .dot { fill:var(--down); }
.chart .cost { stroke:var(--muted); stroke-width:1; stroke-dasharray:4 4; opacity:.8; }
.chart .cost-lab { font-size:10px; opacity:.8; }
.chart .crosshair { stroke:var(--muted); stroke-width:1; stroke-dasharray:3 3; opacity:.7; }
.chart .hover-dot { fill:var(--up); stroke:var(--card); stroke-width:2; }
.chart.down .hover-dot { fill:var(--down); }
.chart-overlay { cursor:crosshair; }

@media print {
  .chart-card { break-inside:avoid; margin:0 0 14px; padding:8px 10px; }
  .chart-ranges, .chart-tooltip { display:none !important; }
  .chart { height:170px; }
  .chart .area { opacity:.06; }
  .chart .ln, .chart .dot { stroke:#000; fill:none; }
  .chart .dot { fill:#000; }
  .chart .ax { fill:#444; }
}
.chart-note:not(:empty){ display:block; font-size:11px; color:var(--muted); margin-top:2px; }