:root {
  --bg: #e8e8e6;
  --card: #ffffff;
  --sub: #f3f3f1;
  --ink: #111111;
  --ink-2: #5c5c59;
  --muted: #6b6b68;
  --gray: #d9d9d6;
  --gray-2: #b0b0ac;
  --gray-3: #8a8a86;
  --orange: #e4602e;
  --radius-card: 26px;
  --radius-sub: 16px;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }

html { overflow-x: hidden; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.4;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

button, input { font: inherit; color: inherit; }

button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; cursor: pointer; }

a { color: inherit; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: 0.75rem;
  top: 0.75rem;
  transform: translateY(-150%);
  background: var(--card);
  color: var(--ink);
  padding: 0.5rem 0.75rem;
  border-radius: 999px;
  z-index: 5;
}

.skip:focus { transform: none; }

.bench {
  width: min(440px, 100%);
  margin: 0 auto;
  padding: 0.75rem 0.75rem calc(6.5rem + env(safe-area-inset-bottom));
}

.icon {
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
  display: block;
}

/* ---- top bar ---- */

.topbar {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  padding-top: env(safe-area-inset-top);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 3rem;
  padding: 0 1rem;
  border: 0;
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.pill.ghost { flex: none; padding: 0 0.8rem 0 0.7rem; font-size: 0.92rem; }
.month-pill h1 .icon { display: none; }
.pill.ghost.reminders span { display: none; }
.pill.ghost.reminders { padding: 0 0.85rem; }
@media (min-width: 400px) {
  .month-pill h1 .icon { display: block; }
  .pill.ghost.reminders span { display: inline; }
  .pill.ghost.reminders { padding: 0 0.8rem 0 0.7rem; }
}

.month-pill {
  flex: 1;
  min-width: 0;
  padding: 0 0.15rem;
  justify-content: space-between;
}

.month-pill h1 {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  justify-content: center;
}

.month-pill h1 span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.month-pill button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-width: 2.75rem;
  min-height: 2.75rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
}

.month-pill button:disabled { opacity: 0.3; cursor: default; }

/* ---- cards ---- */

.card {
  margin-top: 0.75rem;
  padding: 1.1rem 1rem 1.1rem;
  background: var(--card);
  border-radius: var(--radius-card);
  box-shadow: 0 1px 2px rgba(17, 17, 17, 0.03);
}

.card h2 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.card h2.title-lg { font-size: 1.5rem; line-height: 1.1; }

.greeting {
  margin: 0 0 0.2rem;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 500;
}

.overview .card-sub { font-size: 0.95rem; color: var(--ink-2); margin-top: 0.3rem; }

.card-head { margin-bottom: 0.8rem; }

.card-head.split {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.card-head.split > div { min-width: 0; }

.card-sub {
  margin: 0.15rem 0 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.card-kicker {
  margin: 0;
  font-size: 0.86rem;
  font-weight: 500;
}

.big-value {
  display: inline-flex;
  align-items: baseline;
  gap: 0.15em;
  flex: none;
  margin: 0;
  font-size: clamp(1.35rem, 6.2vw, 1.7rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  white-space: nowrap;
}

.big-value .cur {
  font-size: 0.55em;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0;
}

/* ---- badge + gauge ---- */

.badge {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  min-height: 3rem;
  padding: 0.6rem 0.9rem;
  border-radius: var(--radius-sub);
  background: var(--sub);
  font-size: 0.92rem;
}

.badge .icon { color: var(--orange); }

.badge strong { font-weight: 600; }

.gauge { margin: 0.6rem 0 0.2rem; }

.gauge svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 320px;
  margin: 0 auto;
  overflow: visible;
}

.gauge .seg { fill: var(--sub); stroke: var(--sub); stroke-width: 6; stroke-linejoin: round; }
.gauge .seg.on { fill: var(--orange); stroke: var(--orange); }
.gauge .num { fill: var(--ink); font-size: 44px; font-weight: 600; letter-spacing: -0.03em; }
.gauge .lbl { fill: var(--muted); font-size: 13px; }

/* ---- KPI tiles ---- */

.kpis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin: 0.8rem 0 0;
}

.tile {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-height: 7.4rem;
  padding: 0.8rem 0.8rem 0.65rem;
  border-radius: var(--radius-sub);
  background: var(--sub);
}

.tile-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.35rem;
}

.tile dt {
  margin: 0;
  min-width: 0;
  color: var(--ink-2);
  font-size: 0.8rem;
  line-height: 1.25;
}

.tile dd {
  margin: 0;
}

.tile .value {
  display: flex;
  align-items: baseline;
  gap: 0.12em;
  margin-top: auto;
  font-size: clamp(1.25rem, 6vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  white-space: nowrap;
}

.tile .value .cur { font-size: 0.55em; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.tile .value .cents { font-size: 0.58em; font-weight: 500; color: var(--muted); letter-spacing: 0; }

.tile .spark { width: 100%; height: 22px; margin-top: 0.3rem; }
.tile .spark svg { display: block; width: 100%; height: 22px; overflow: visible; }
.tile .spark path { fill: none; stroke: var(--gray-2); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.tile .spark circle { fill: var(--orange); stroke: var(--sub); stroke-width: 2; }

.delta {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  flex: none;
  min-height: 1.45rem;
  padding: 0 0.5rem 0 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
}

.delta .icon { width: 0.8rem; height: 0.8rem; }
.delta.good { background: var(--orange); color: var(--ink); }
.delta.bad { background: var(--ink); color: #fff; }
.delta.flat { background: var(--gray); color: var(--ink); }
.delta.inline { min-height: 1.3rem; font-size: 0.68rem; padding: 0 0.45rem; }

/* ---- segmented filter ---- */

.segmented {
  display: flex;
  gap: 0.2rem;
  margin-top: 0.8rem;
  padding: 0.2rem;
  border-radius: 999px;
  background: var(--sub);
}

.segmented button {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  min-width: 0;
  min-height: 2.6rem;
  padding: 0 0.4rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-2);
  font-weight: 500;
  font-size: 0.9rem;
}

.segmented button[aria-pressed="true"] {
  background: var(--ink);
  color: #fff;
}

.rails {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 1rem;
  margin: 0.55rem 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}

.rails span { white-space: nowrap; }

/* ---- dark + accent duo ---- */

.duo {
  display: grid;
  grid-template-columns: 42fr 58fr;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.duo .card { margin-top: 0; }

.duo > .card { min-width: 0; }

.card.dark {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: start;
  width: 100%;
  padding: 0.6rem;
  background: var(--ink);
  color: #fff;
  border-radius: 999px;
  aspect-ratio: 1;
}

.ring { width: 100%; }

.ring svg { display: block; width: 100%; height: auto; overflow: visible; }
.ring .dot { fill: #fff; }
.ring .arc { fill: none; stroke: var(--orange); stroke-width: 8; stroke-linecap: round; }
.ring .track { fill: none; stroke: rgba(255, 255, 255, 0.12); stroke-width: 8; }
.ring .num { fill: #fff; font-size: 28px; font-weight: 600; letter-spacing: -0.03em; }
.ring .lbl { fill: var(--gray); font-size: 11px; }

.card.accent {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.9rem 0.9rem 0.85rem;
  background: var(--orange);
  color: var(--ink);
}

.card.accent .card-kicker { color: var(--ink); opacity: 0.85; }

.next-task {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.next-when {
  margin: 0;
  font-size: 0.82rem;
  color: var(--ink);
  opacity: 0.85;
}

.next-actions {
  display: flex;
  gap: 0.4rem;
  margin-top: auto;
  padding-top: 0.4rem;
}

.next-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  min-height: 2.75rem;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-weight: 600;
  font-size: 0.9rem;
}

.next-actions .done-btn { flex: 1; padding: 0 0.8rem; }
.next-actions .done-btn .icon { color: var(--orange); }
.next-actions .x-btn { min-width: 2.75rem; padding: 0 0.6rem; }
.next-actions .x-btn.armed { font-size: 0.78rem; padding: 0 0.7rem; }

.next-empty {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.35;
}

/* ---- charts (shared) ---- */

.chart-wrap { position: relative; }

.chart-wrap.sub {
  padding: 0.75rem 0.5rem 0.5rem;
  border-radius: var(--radius-sub);
  background: var(--sub);
}

.chart { width: 100%; }

.chart svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  touch-action: pan-y;
  font-family: var(--sans);
}

.chart .grid { stroke: var(--gray); stroke-width: 1; }
.chart .axis { stroke: var(--gray-2); stroke-width: 1; }
.chart .bar { fill: var(--gray); }
.chart .bar.picked { fill: var(--gray-2); }
.chart .bar.hot { fill: var(--orange); }
.chart .bar.ink { fill: var(--ink); }
.chart .tick { fill: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.chart .tick.selected { fill: var(--ink); font-weight: 600; }
.chart .value { fill: var(--ink); font-size: 10px; font-weight: 600; font-variant-numeric: tabular-nums; }
.chart .value.soft { fill: var(--muted); font-weight: 500; }
.chart .value.lead { fill: var(--ink); font-weight: 600; }
.chart .tag { fill: var(--ink); }
.chart .tag-text { fill: #fff; font-size: 10px; font-weight: 600; font-variant-numeric: tabular-nums; }
.chart .hit { fill: transparent; cursor: pointer; }
.chart .hit:focus-visible { outline: none; stroke: var(--ink); stroke-width: 2; }

.chart-empty {
  margin: 0.4rem 0 0;
  color: var(--muted);
}

.chart-hint {
  margin: 0.45rem 0 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.series {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.9rem;
  margin: 0.55rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.82rem;
  color: var(--muted);
}

.series li { display: inline-flex; align-items: center; gap: 0.35rem; }

.swatch {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 3px;
  flex: none;
  background: var(--gray);
}

.swatch.hot { background: var(--orange); }
.swatch.ink { background: var(--ink); }
.swatch.round { border-radius: 50%; width: 0.55rem; height: 0.55rem; }
.swatch.ringed { background: transparent; box-shadow: inset 0 0 0 2px var(--ink); }

.series.scale .steps { display: inline-flex; gap: 2px; }
.series.scale .steps span { width: 0.7rem; height: 0.7rem; border-radius: 3px; display: inline-block; }

.tooltip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: min(15rem, 100%);
  padding: 0.6rem 0.75rem 0.5rem;
  border-radius: 14px;
  background: var(--ink);
  color: #fff;
  box-shadow: 0 12px 30px rgba(17, 17, 17, 0.22);
  font-size: 0.88rem;
}

.tooltip strong { display: block; margin-bottom: 0.3rem; font-weight: 600; }

.tooltip dl { margin: 0; }

.tooltip .tip-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  min-height: 1.6rem;
}

.tooltip dt {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  color: var(--gray);
}

.tooltip dt .key { display: inline-block; width: 0.8rem; height: 3px; border-radius: 2px; background: var(--gray-2); }
.tooltip dt .key.hot { background: var(--orange); }
.tooltip dt .key.ink { background: #fff; }

.tooltip dd {
  margin: 0;
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.tooltip .tip-actions {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.2rem;
}

.tooltip .text-button { min-height: 2.4rem; padding: 0; color: #fff; }
.tooltip .text-button:disabled { color: var(--gray-3); }

/* ---- month rail ---- */

.rail-title {
  margin: 0.9rem 0 0.45rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-2);
}

.timeline {
  display: flex;
  gap: 0.4rem;
  margin: 0 -1rem;
  padding: 0.1rem 1rem 0.25rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.timeline::-webkit-scrollbar { display: none; }

.month-chip {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.05rem;
  min-width: 4.2rem;
  min-height: 3.4rem;
  padding: 0.4rem 0.5rem;
  border: 0;
  border-radius: 14px;
  background: var(--sub);
  color: var(--ink);
  scroll-snap-align: center;
  line-height: 1.15;
}

.month-chip .chip-month { font-weight: 600; font-size: 0.92rem; }
.month-chip .chip-year { color: var(--muted); font-size: 0.7rem; }
.month-chip .chip-net { font-size: 0.76rem; color: var(--muted); margin-top: 0.1rem; font-variant-numeric: tabular-nums; }

.month-chip.now { box-shadow: inset 0 0 0 1.5px var(--orange); }

.month-chip[aria-pressed="true"] {
  background: var(--ink);
  color: #fff;
}

.month-chip[aria-pressed="true"] .chip-year,
.month-chip[aria-pressed="true"] .chip-net { color: var(--gray); }

/* ---- agenda ---- */

.pill.small {
  min-height: 2.75rem;
  padding: 0 0.85rem 0 0.7rem;
  background: var(--sub);
  font-size: 0.9rem;
  font-weight: 600;
}

.day-block { margin-top: 0.7rem; }
.day-block:first-child { margin-top: 0; }

.day-title {
  margin: 0 0 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-2);
}

.day-title span { color: var(--muted); font-weight: 500; }

.visit {
  display: grid;
  grid-template-columns: 3.4rem 1fr;
  gap: 0 0.6rem;
  padding: 0.7rem 0.75rem 0.55rem;
  border-radius: 14px;
  background: var(--sub);
}

.visit + .visit { margin-top: 0.4rem; }

.visit.next { background: var(--orange); }

.visit.done { opacity: 0.55; }
.visit.done .visit-client { text-decoration: line-through; text-decoration-thickness: 1px; }

.visit-time {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.visit-time small { display: block; font-size: 0.7rem; font-weight: 500; color: var(--muted); letter-spacing: 0; margin-top: 0.15rem; }
.visit.next .visit-time small { color: var(--ink); opacity: 0.75; }

.visit-body { min-width: 0; }

.visit-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }

.visit-client {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.visit-meta { margin: 0.15rem 0 0; color: var(--muted); font-size: 0.82rem; overflow-wrap: anywhere; }
.visit.next .visit-meta { color: var(--ink); opacity: 0.8; }

.visit-amount {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 1.45rem;
  padding: 0 0.55rem;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 0.74rem;
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.visit-actions { grid-column: 2; display: flex; gap: 0.9rem; margin-top: 0.15rem; }
.visit-actions button {
  border: 0;
  background: transparent;
  color: var(--muted);
  min-height: 2.75rem;
  padding: 0;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}
.visit-actions .visit-done { color: var(--ink); }
.visit-actions button.armed { color: var(--ink); font-weight: 600; }
.visit.next .visit-actions button { color: var(--ink); }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.field-row .field { min-width: 0; }

/* ---- projection ---- */

.proj-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}

.proj-tile {
  padding: 0.75rem 0.8rem;
  border-radius: var(--radius-sub);
  background: var(--sub);
}

.proj-tile p { margin: 0; }
.proj-tile .lbl { color: var(--ink-2); font-size: 0.78rem; line-height: 1.25; }
.proj-tile .val { margin-top: 0.4rem; font-size: 1.15rem; font-weight: 600; letter-spacing: -0.02em; white-space: nowrap; }

.proj-close {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.6rem;
  padding: 0.85rem 0.9rem;
  border-radius: var(--radius-sub);
  background: var(--ink);
  color: #fff;
}

.proj-close .icon { color: var(--orange); width: 1.4rem; height: 1.4rem; }
.proj-close p { margin: 0; font-size: 0.86rem; color: var(--gray); }
.proj-close strong { display: block; font-size: 1.3rem; font-weight: 600; letter-spacing: -0.03em; color: #fff; }

/* ---- categories ---- */

.legend-list {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-top: 0.7rem;
}

.legend-list button {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  min-height: 3rem;
  padding: 0.35rem 0.75rem 0.35rem 0.6rem;
  border: 0;
  border-radius: 14px;
  background: var(--sub);
  color: var(--ink);
  text-align: left;
}

.legend-list button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.legend-list button[aria-pressed="true"] .meta-line { color: var(--gray); }
.legend-list button[aria-pressed="true"] .icon { color: #fff; }

.legend-list .name { flex: 1; min-width: 0; }
.legend-list .name strong { display: block; font-weight: 600; font-size: 0.92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.legend-list .meta-line { display: block; color: var(--muted); font-size: 0.76rem; }
.legend-list .amount { display: flex; flex-direction: column; align-items: flex-end; gap: 0.2rem; font-weight: 600; font-size: 0.92rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.legend-list .mark { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--gray-2); flex: none; }
.legend-list .mark.hot { background: var(--orange); }

/* ---- calendar ---- */

.cal-wrap { margin: 0 -0.5rem; }

.cal-wrap svg { touch-action: pan-y; }
.chart .cal-head { fill: var(--muted); font-size: 10px; font-weight: 500; }
.chart .cal-day { fill: var(--ink); font-size: 11px; font-weight: 500; font-variant-numeric: tabular-nums; }
.chart .cal-day.light { fill: #fff; }
.chart .cal-day.faint { fill: var(--gray-3); }
.chart .cal-cell { stroke: none; }
.chart .cal-cell.today { stroke: var(--ink); stroke-width: 2; }
.chart .cal-in { fill: var(--ink); }
.chart .cal-in.light { fill: #fff; }

/* ---- method bars ---- */

.mini-table {
  width: 100%;
  margin-top: 0.6rem;
  border-collapse: collapse;
  font-size: 0.82rem;
  color: var(--muted);
}

.mini-table th { font-weight: 500; text-align: left; padding: 0.25rem 0; }
.mini-table th:not(:first-child), .mini-table td:not(:first-child) { text-align: right; padding-left: 0.5rem; }
.mini-table td { padding: 0.3rem 0; color: var(--ink); font-weight: 600; font-size: 0.8rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mini-table tbody tr { border-top: 1px solid var(--sub); }

.chart .seg-text { fill: #fff; font-size: 10px; font-weight: 600; font-variant-numeric: tabular-nums; }
.chart .row-label { fill: var(--ink-2); font-size: 11px; font-weight: 500; }

/* ---- rankings ---- */

.ranking { display: flex; flex-direction: column; gap: 0.5rem; }

.rank {
  display: block;
  padding: 0.55rem 0.75rem 0.6rem;
  border-radius: 14px;
  background: var(--sub);
}

.rank-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.rank-top .who { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.45rem; }
.rank-top .who .icon { color: var(--ink-2); }
.rank-top .who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; font-size: 0.92rem; }
.rank-top .amt { font-weight: 600; font-size: 0.92rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rank .bar-track { height: 6px; margin-top: 0.45rem; border-radius: 999px; background: var(--gray); overflow: hidden; }
.rank .bar-fill { height: 100%; border-radius: 999px; background: var(--gray-3); }
.rank.lead .bar-fill { background: var(--orange); }
.rank .rank-meta { margin: 0.25rem 0 0; color: var(--muted); font-size: 0.76rem; }

/* ---- logs (reminders + entries) ---- */

.log h2 { font-size: 1.05rem; }

.row {
  padding: 0.85rem 0 0.7rem;
  border-top: 1px solid var(--sub);
}

.row-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.row-top > :first-child { flex: 1; min-width: 0; }

.phrase {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.phrase-line {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
}

.phrase-line .icon { margin-top: 0.15rem; color: var(--ink-2); }

.meta {
  margin: 0.2rem 0 0;
  color: var(--muted);
  font-size: 0.84rem;
}

.stamp {
  margin: 0;
  align-self: start;
  font-weight: 600;
  font-size: 0.92rem;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.stamp.income { color: var(--ink); }
.stamp.expense { color: var(--ink-2); }

.row-actions { display: flex; gap: 0.9rem; }

.row-delete, .row-done {
  border: 0;
  background: transparent;
  color: var(--muted);
  min-height: 2.75rem;
  padding: 0;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.row-done { color: var(--ink); }
.row-delete.armed { color: var(--ink); font-weight: 600; }

.row.reminder.done { opacity: 0.55; }
.row.reminder.done .phrase { text-decoration: line-through; text-decoration-thickness: 1px; }

.empty {
  margin: 0.4rem 0 0;
  color: var(--muted);
}

.hint {
  margin: 0.9rem 0 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.tax-preview {
  margin: 0.45rem 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

/* ---- floating action + status ---- */

.fab {
  position: fixed;
  left: 50%;
  bottom: calc(0.9rem + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: min(440px, calc(100% - 1.5rem));
  min-height: 3.25rem;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
  box-shadow: 0 10px 24px rgba(17, 17, 17, 0.22);
}

.status {
  position: fixed;
  left: 50%;
  bottom: calc(4.6rem + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(440px, calc(100% - 1.5rem));
  margin: 0;
  text-align: center;
  color: var(--ink);
  font-weight: 600;
  pointer-events: none;
}

.status:not(:empty) {
  background: var(--card);
  border-radius: 999px;
  padding: 0.5rem 1rem;
  width: auto;
  box-shadow: 0 6px 20px rgba(17, 17, 17, 0.14);
}

/* ---- new entry sheet ---- */

dialog {
  border: 0;
  padding: 0;
  background: transparent;
  width: min(440px, 100%);
  max-width: 440px;
  max-height: 100dvh;
  margin: auto auto 0;
}

@supports not (height: 100dvh) {
  dialog { max-height: 100vh; }
}

dialog::backdrop { background: rgba(17, 17, 17, 0.45); }

.sheet {
  background: var(--card);
  border-radius: 26px 26px 0 0;
  padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom));
  max-height: 100dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.sheet-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.sheet h2 { margin: 0; font-size: 1.3rem; font-weight: 600; letter-spacing: -0.02em; }

.text-button {
  border: 0;
  background: transparent;
  color: var(--ink);
  min-height: 2.75rem;
  font-weight: 600;
}

.field, .choice { display: block; margin-top: 0.85rem; }

.field span, .choice legend {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--muted);
  font-size: 0.88rem;
}

.choice {
  border: 0;
  padding: 0;
  display: flex;
  gap: 0.5rem;
}

.choice legend { width: 100%; }

.choice label {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 3rem;
  border-radius: 14px;
  background: var(--sub);
  cursor: pointer;
  font-weight: 500;
}

.choice label:has(input:checked) {
  background: var(--ink);
  color: #fff;
}

.choice input { accent-color: var(--orange); }

.field input {
  width: 100%;
  min-height: 3rem;
  padding: 0.65rem 0.85rem;
  border: 0;
  border-radius: 14px;
  background: var(--sub);
  font-size: max(1rem, 16px);
}

.form-error {
  min-height: 1.3rem;
  margin: 0.6rem 0 0;
  color: var(--ink);
  font-weight: 600;
}

.submit {
  width: 100%;
  margin-top: 0.4rem;
  min-height: 3.25rem;
  border: 0;
  border-radius: 999px;
  background: var(--orange);
  color: var(--ink);
  font-weight: 600;
}

:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
}

.card.dark :focus-visible, .card.accent :focus-visible { outline-color: #fff; }

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto; transition: none; }
}