.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tile {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
}
.tile strong { font: 700 1.75rem var(--serif); }
.tile span { color: var(--ink-2); font-size: 0.88rem; }

.bars { display: flex; align-items: stretch; height: 120px; border-bottom: 1px solid var(--line); }
.bar {
  flex: 1;
  appearance: none;
  border: 0;
  background: none;
  padding: 0 1px;
  display: flex;
  align-items: flex-end;
  cursor: pointer;
}
.bar span {
  display: block;
  width: 100%;
  height: var(--value, 0%);
  min-height: 2px;
  background: var(--good);
  border-radius: 4px 4px 0 0;
}
.bar.empty span { background: var(--surface-2); }
.bar:hover span, .bar:focus-visible span { filter: brightness(1.15); }

.progress-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.progress-list .row { display: flex; justify-content: space-between; gap: 12px; }
.deck-name { min-width: 0; overflow-wrap: anywhere; }