:root {
  color-scheme: light;
  --fg: #1a1a1a;
  --muted: #6b7280;
  --border: #e5e7eb;
  --bg: #ffffff;
  --up: #b91c1c;
  --down: #1d4ed8;
  --accent: #2563eb;
  --accent-soft: rgba(37, 99, 235, 0.15);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  padding: 1.5rem;
  background: var(--bg);
  color: var(--fg);
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}
header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}
h1 { font-size: 1.25rem; margin: 0; }
h2 { font-size: 1rem; margin: 1.5rem 0 0.5rem; }
h2 .muted { font-weight: 400; }
a { color: inherit; text-decoration: none; }
a.back { display: inline-block; padding: 0.2rem 0; color: var(--muted); }
.muted { color: var(--muted); }
.label-sub { font-size: 0.8em; font-weight: 400; }
.table-scroll { overflow-x: auto; margin-top: 0.5rem; -webkit-overflow-scrolling: touch; }
.table-scroll table { margin-top: 0; }
.up { color: var(--up); }
.down { color: var(--down); }
table { width: 100%; border-collapse: collapse; margin-top: 0.5rem; }
th, td { text-align: right; padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--border); }
th:first-child, td:first-child { text-align: left; }
th { color: var(--muted); font-weight: 500; }
.num { font-variant-numeric: tabular-nums; }
.cards { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 0.5rem; }
.card { border: 1px solid var(--border); border-radius: 8px; padding: 1rem; min-width: 240px; }
.card h3 { margin: 0 0 0.5rem; font-size: 1rem; }
.card dl { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 0.25rem 1rem; }
.card dt { color: var(--muted); }
.card dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
button {
  font: inherit;
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--fg);
  color: var(--bg);
  cursor: pointer;
}
button:disabled { opacity: 0.5; cursor: default; }
input {
  font: inherit;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: transparent;
  color: inherit;
}
.login { max-width: 360px; margin: 10vh auto; display: flex; flex-direction: column; gap: 0.75rem; }
.login label { display: flex; flex-direction: column; gap: 0.25rem; }
.error { color: var(--up); }
#status { min-height: 1.5em; }
.bar { height: 0.5rem; background: var(--border); border-radius: 999px; overflow: hidden; }
.bar .fill { display: block; height: 100%; border-radius: inherit; }
.composition { display: flex; height: 0.6rem; border-radius: 999px; overflow: hidden; background: var(--border); margin: 0.5rem 0 0.4rem; }
.composition .fill { display: block; height: 100%; }
.legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.2rem 0.9rem; font-size: 0.85em; color: var(--muted); }
.legend li { display: flex; align-items: center; gap: 0.35rem; }
.dot { width: 0.6rem; height: 0.6rem; border-radius: 999px; flex: 0 0 auto; }
.alloc { display: none; }
.chart { margin: 0.5rem 0 0; }
.chart-head, .chart-foot { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.85em; }
.chart-head { margin-bottom: 0.35rem; }
.chart-foot { margin-top: 0.35rem; }
.spark { display: block; width: 100%; height: 160px; }
.spark .line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.spark .area { fill: var(--accent-soft); stroke: none; }
.w0{width:0%}.w1{width:1%}.w2{width:2%}.w3{width:3%}.w4{width:4%}.w5{width:5%}.w6{width:6%}.w7{width:7%}.w8{width:8%}.w9{width:9%}.w10{width:10%}.w11{width:11%}.w12{width:12%}.w13{width:13%}.w14{width:14%}.w15{width:15%}.w16{width:16%}.w17{width:17%}.w18{width:18%}.w19{width:19%}.w20{width:20%}.w21{width:21%}.w22{width:22%}.w23{width:23%}.w24{width:24%}.w25{width:25%}.w26{width:26%}.w27{width:27%}.w28{width:28%}.w29{width:29%}.w30{width:30%}.w31{width:31%}.w32{width:32%}.w33{width:33%}.w34{width:34%}.w35{width:35%}.w36{width:36%}.w37{width:37%}.w38{width:38%}.w39{width:39%}.w40{width:40%}.w41{width:41%}.w42{width:42%}.w43{width:43%}.w44{width:44%}.w45{width:45%}.w46{width:46%}.w47{width:47%}.w48{width:48%}.w49{width:49%}.w50{width:50%}.w51{width:51%}.w52{width:52%}.w53{width:53%}.w54{width:54%}.w55{width:55%}.w56{width:56%}.w57{width:57%}.w58{width:58%}.w59{width:59%}.w60{width:60%}.w61{width:61%}.w62{width:62%}.w63{width:63%}.w64{width:64%}.w65{width:65%}.w66{width:66%}.w67{width:67%}.w68{width:68%}.w69{width:69%}.w70{width:70%}.w71{width:71%}.w72{width:72%}.w73{width:73%}.w74{width:74%}.w75{width:75%}.w76{width:76%}.w77{width:77%}.w78{width:78%}.w79{width:79%}.w80{width:80%}.w81{width:81%}.w82{width:82%}.w83{width:83%}.w84{width:84%}.w85{width:85%}.w86{width:86%}.w87{width:87%}.w88{width:88%}.w89{width:89%}.w90{width:90%}.w91{width:91%}.w92{width:92%}.w93{width:93%}.w94{width:94%}.w95{width:95%}.w96{width:96%}.w97{width:97%}.w98{width:98%}.w99{width:99%}.w100{width:100%}
.c0{background-color:#3b82f6}.c1{background-color:#14b8a6}.c2{background-color:#f59e0b}.c3{background-color:#8b5cf6}.c4{background-color:#ef4444}.c5{background-color:#22c55e}.c6{background-color:#f97316}.c7{background-color:#64748b}
details { margin-top: 0.5rem; }
details > summary {
  cursor: pointer;
  color: var(--muted);
  padding: 0.5rem 0;
  list-style-position: inside;
}

@media (max-width: 640px) {
  body { padding: 0.75rem; }
  header { flex-wrap: wrap; align-items: center; margin-bottom: 1rem; padding-bottom: 0.6rem; }
  h1 { font-size: 1.1rem; }
  h2 { font-size: 0.95rem; margin: 1.1rem 0 0.4rem; }
  button { padding: 0.5rem 0.85rem; }
  .card { width: 100%; min-width: 0; padding: 0.85rem; }
  .card dl { gap: 0.2rem 0.75rem; }

  table.responsive thead { display: none; }
  table.responsive,
  table.responsive tbody,
  table.responsive tr,
  table.responsive td { display: block; width: 100%; }
  table.responsive tr {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.55rem 0.7rem;
    margin-bottom: 0.55rem;
  }
  table.responsive td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    text-align: right;
    border: 0;
    padding: 0.22rem 0;
  }
  table.responsive td::before {
    content: attr(data-label);
    color: var(--muted);
    text-align: left;
    flex: 0 0 auto;
  }
  table.responsive td.row-title {
    display: block;
    text-align: left;
    font-weight: 600;
    padding: 0 0 0.4rem;
    margin-bottom: 0.3rem;
    border-bottom: 1px solid var(--border);
  }
  table.responsive td.row-title::before { content: none; }
  table.responsive td.row-title .muted { font-weight: 400; }
  table.responsive td.num { white-space: nowrap; }
  table.responsive td.weight-cell { display: none; }
  .alloc { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.35rem; }
  .alloc .bar { flex: 1 1 auto; }
  .alloc .pct { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
  .spark { height: 120px; }
  .table-scroll table { min-width: 520px; }
}