:root {
  --bw-0: #ffffff;
  --bw-50: #fafafa;
  --bw-100: #f5f5f5;
  --bw-150: #ededed;
  --bw-200: #e5e5e5;
  --bw-300: #d4d4d4;
  --bw-400: #a3a3a3;
  --bw-500: #737373;
  --bw-600: #525252;
  --bw-700: #404040;
  --bw-800: #171717;
  --bw-900: #0a0a0a;

  --accent: #0a0a0a;
  --on-pace: #18a957;
  --behind: #dc2626;
  --ahead: #18a957;
  --pulse: #22c55e;

  --hairline: 1px solid var(--bw-200);
  --hairline-strong: 1px solid var(--bw-300);

  --rail: clamp(16px, 1.6vw, 32px);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  overflow: hidden;
}

body {
  font-family: "Geist Sans", "Inter", system-ui, sans-serif;
  color: var(--bw-900);
  background: var(--bw-0);
  font-feature-settings: "ss01" on, "cv11" on;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.app {
  height: 100dvh;
  width: 100vw;
  display: grid;
  grid-template-rows: auto minmax(0, 0.9fr) minmax(0, 1.4fr);
  padding: var(--rail);
  gap: 0;
}

/* bottom row: sparkline | feed, side by side, fills whatever's left */
.bottom {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  min-height: 0;
  border-top: var(--hairline);
}
.bottom > .pinned {
  border-right: var(--hairline);
  border-bottom: 0;
}

/* ============================================================
 * HEADER
 * ============================================================ */
.hdr {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding-bottom: 12px;
  border-bottom: var(--hairline);
}
.hdr-brand {
  justify-self: start;
}
.hdr-right {
  justify-self: end;
}
.hdr-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}
.hdr-logo {
  height: clamp(36px, 3.2vw, 56px);
  width: auto;
  display: block;
}
.hdr-center {
  text-align: center;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 14px;
  color: var(--bw-500);
  font-size: clamp(13px, 1.05vw, 16px);
  letter-spacing: 0.04em;
}
.hdr-center .week-range {
  color: var(--bw-900);
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.hdr-center .week-sep {
  color: var(--bw-300);
}
.hdr-center .week-today {
  color: var(--bw-900);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.hdr-right {
  display: flex;
  align-items: center;
  gap: 14px;
  justify-self: end;
  font-variant-numeric: tabular-nums;
}
.clock {
  font-size: clamp(18px, 1.8vw, 28px);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.settings-btn {
  background: transparent;
  border: var(--hairline-strong);
  color: var(--bw-800);
  padding: 6px 12px;
  font: inherit;
  font-size: clamp(11px, 0.85vw, 13px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 120ms ease;
}
.settings-btn:hover {
  background: var(--bw-50);
}

/* ============================================================
 * GOALS ROW — three tiles
 * ============================================================ */
.goals {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  border-bottom: var(--hairline);
  min-height: 0;
}
.goals-mode-header {
  grid-column: 1 / -1;
  padding: clamp(10px, 1.1vw, 18px) clamp(16px, 1.8vw, 32px) clamp(10px, 1.1vw, 18px);
  text-align: center;
  border-bottom: var(--hairline);
}
.goals-mode-label {
  font-size: clamp(16px, 1.6vw, 22px);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bw-400);
  transition: color 320ms ease;
  display: inline-block;
}
.goals[data-mode="clients"] .goals-mode-label {
  color: var(--bw-900);
}
.goals[data-mode="throxy"] .goals-mode-label {
  color: var(--bw-900);
}
.tile {
  container-type: size;
  position: relative;
  padding: clamp(12px, 1.2vw, 22px) clamp(16px, 1.6vw, 28px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 2px;
  min-width: 0;
  min-height: 0;
}
.tile + .tile {
  border-left: var(--hairline);
}
.tile.global {
  background: var(--bw-0);
}
.tile-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.tile-label {
  font-size: clamp(14px, 1.8cqw, 24px);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bw-500);
  font-weight: 700;
}
.tile.global .tile-label {
  color: var(--bw-900);
}
.tile-pace {
  font-size: clamp(13px, 1.5cqw, 20px);
  color: var(--bw-500);
  letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.tile-pace.ahead {
  color: var(--on-pace);
}
.tile-pace.behind {
  color: var(--behind);
}

.tile-body {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: clamp(6px, 0.8vw, 16px);
  min-height: 0;
}
.tile-numbers {
  min-width: 0;
  line-height: 0.9;
  display: flex;
  align-items: baseline;
  gap: 0;
  flex-wrap: wrap;
}
.tile-num {
  font-size: clamp(72px, 26cqh, 260px);
  font-weight: 700;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
  color: var(--bw-900);
  transition: color 240ms ease;
  line-height: 0.9;
}
.tile-target {
  display: inline-flex;
  align-items: baseline;
  font-size: clamp(36px, 13cqh, 120px);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--bw-400);
  letter-spacing: -0.03em;
  margin-left: 0.12em;
}
.tile-target .slash {
  color: var(--bw-300);
  margin: 0 0.08em 0 0;
}
.tile.hit .tile-num {
  color: var(--on-pace);
}
/* .tile-denom removed — superseded by the inline `.tile-target` above. */
.tile-denom .slash {
  color: var(--bw-300);
  margin: 0 0.35em;
}

.ring-wrap {
  display: grid;
  place-items: center;
  width: clamp(120px, 22cqh, 240px);
  aspect-ratio: 1;
}
.ring-wrap svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.ring-track {
  fill: none;
  stroke: var(--bw-150);
  stroke-width: 7;
  stroke-linecap: round;
}
.ring-fill {
  fill: none;
  stroke: var(--bw-900);
  stroke-width: 7;
  stroke-linecap: round;
  transition: stroke-dashoffset 520ms cubic-bezier(0.2, 0.8, 0.2, 1), stroke 240ms ease;
}
.tile.hit .ring-fill {
  stroke: var(--on-pace);
}
.tile.behind .ring-fill {
  stroke: var(--behind);
}
.ring-pct {
  font-size: clamp(22px, 6.5cqh, 64px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  fill: var(--bw-900);
  letter-spacing: -0.04em;
  dominant-baseline: central;
}
.tile.hit .ring-pct {
  fill: var(--on-pace);
}
.tile.behind .ring-pct {
  fill: var(--behind);
}

.tile-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: clamp(13px, 1.35cqw, 18px);
  color: var(--bw-500);
  padding-top: clamp(6px, 0.7vw, 12px);
  border-top: 1px dashed var(--bw-200);
  font-weight: 500;
}
.dots {
  display: inline-flex;
  gap: 6px;
}
.dot {
  width: clamp(5px, 0.6cqw, 8px);
  height: clamp(5px, 0.6cqw, 8px);
  background: var(--bw-200);
  border-radius: 50%;
  transition: background 240ms ease;
}
.dot.on {
  background: var(--bw-900);
}
.tile.hit .dot.on {
  background: var(--on-pace);
}
.tile.behind .dot.on {
  background: var(--behind);
}
.to-go {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--bw-900);
  font-weight: 800;
  font-size: clamp(20px, 2.6cqw, 38px);
  line-height: 1;
  transition: color 240ms ease;
}
.tile.behind .to-go {
  color: var(--behind);
}
.tile.hit .to-go {
  color: var(--on-pace);
}
.tile.hit .to-go {
  color: var(--on-pace);
}

/* ============================================================
 * PINNED LEADERBOARD (Most Attended · 4 weeks) — left side of the bottom row
 * ============================================================ */
.pinned {
  container-type: size;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: clamp(8px, 1vw, 16px);
  padding: clamp(14px, 1.4vw, 24px) clamp(16px, 1.8vw, 32px) clamp(10px, 1vw, 16px);
  min-height: 0;
}
.pinned-head {
  display: flex;
  align-items: baseline;
  gap: 20px;
}
.pinned-label {
  font-size: clamp(12px, 1.1vw, 15px);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bw-900);
}
.pinned-body {
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
}
.spark-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
}
.spark-label {
  font-size: clamp(11px, 1.1vw, 14px);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bw-900);
}
.spark-meta {
  font-size: clamp(11px, 1vw, 14px);
  color: var(--bw-500);
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
}
.spark-meta b {
  color: var(--bw-900);
  font-weight: 600;
  font-size: clamp(16px, 1.6vw, 22px);
  margin-right: 6px;
}
.spark-body {
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  min-height: 0;
}
.spark-bars {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: clamp(4px, 0.5vw, 10px);
  align-items: end;
  min-height: 0;
}
.bar {
  background: var(--bw-800);
  min-height: 2px;
  height: var(--h, 2%);
  transition: height 520ms cubic-bezier(0.2, 0.8, 0.2, 1), background 240ms ease;
  position: relative;
}
.bar.empty {
  background: var(--bw-150);
}
.bar.now {
  background: var(--bw-900);
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6);
  animation: bar-pulse 1.8s ease-out infinite;
}
@keyframes bar-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55);
  }
  70% {
    box-shadow: 0 0 0 14px rgba(34, 197, 94, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
  }
}
.bar-val {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: clamp(10px, 0.85vw, 12px);
  color: var(--bw-600);
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transition: opacity 180ms ease;
}
.bar.now .bar-val,
.bar:hover .bar-val {
  opacity: 1;
}
.spark-axis {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: end;
  color: var(--bw-400);
  font-size: clamp(10px, 0.75vw, 11px);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.spark-side {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  font-variant-numeric: tabular-nums;
  color: var(--bw-500);
  font-size: clamp(10px, 0.8vw, 12px);
  min-width: 40px;
}
.spark-side .big {
  font-size: clamp(22px, 2.5vw, 36px);
  color: var(--bw-900);
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* ============================================================
 * FEED
 * ============================================================ */
.feed {
  container-type: size;
  display: grid;
  grid-template-rows: auto auto 1fr;
  padding: clamp(14px, 1.4vw, 24px) clamp(16px, 1.8vw, 32px) clamp(10px, 1vw, 16px);
  min-height: 0;
  row-gap: clamp(6px, 0.8vw, 14px);
}
.feed-tabs {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2vw, 40px);
  position: relative;
}
.feed-tab {
  font-size: clamp(12px, 1.1vw, 15px);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bw-400);
  padding-bottom: 10px;
  cursor: pointer;
  transition: color 240ms ease;
  user-select: none;
  background: none;
  border: 0;
  font-family: inherit;
}
.feed-tab[aria-selected="true"] {
  color: var(--bw-900);
}
.feed-tab .count {
  color: var(--bw-400);
  font-weight: 500;
  margin-left: 8px;
  font-variant-numeric: tabular-nums;
}
.feed-underline {
  display: none;
}
.feed-progress {
  height: 2px;
  background: var(--bw-150);
  position: relative;
  overflow: hidden;
}
.feed-progress-bar {
  position: absolute;
  inset: 0;
  background: var(--bw-900);
  transform: scaleX(0);
  transform-origin: left;
  will-change: transform;
}

.feed-body {
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: clamp(8px, 1vw, 16px);
  padding-top: 4px;
}

/* ============================================================
 * PODIUM — top 3 on a 2-1-3 layout
 * ============================================================ */
.podium {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  align-items: end;
  gap: clamp(8px, 1.2vw, 20px);
  padding: clamp(6px, 0.8vw, 14px) 0 clamp(10px, 1vw, 18px);
  border-bottom: var(--hairline);
}
.podium-slot {
  display: grid;
  justify-items: center;
  gap: clamp(4px, 0.4vw, 8px);
  text-align: center;
  min-width: 0;
  padding: clamp(6px, 0.8vw, 14px) clamp(2px, 0.4vw, 8px);
  position: relative;
}
.podium-slot.empty {
  opacity: 0.35;
}
.podium-slot.empty .podium-rank {
  color: var(--bw-400);
}
.podium-rank {
  font-size: clamp(11px, 1vw, 14px);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--bw-500);
  font-variant-numeric: tabular-nums;
  margin-bottom: 2px;
}
.podium-slot.rank-1 .podium-rank { color: #b08900; }
.podium-slot.rank-2 .podium-rank { color: #8a8a8a; }
.podium-slot.rank-3 .podium-rank { color: #a0623b; }
.podium-name {
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: clamp(14px, 1.3vw, 20px);
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.podium-slot.rank-1 .podium-name {
  font-size: clamp(16px, 1.6vw, 24px);
}
.podium-meta {
  display: grid;
  gap: 2px;
  font-size: clamp(11px, 1vw, 14px);
  color: var(--bw-500);
  line-height: 1.25;
}
.podium-meta span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100%;
  display: block;
}
.podium-trailing {
  margin-top: clamp(4px, 0.4vw, 8px);
  font-variant-numeric: tabular-nums;
  font-size: clamp(12px, 1.05vw, 16px);
  color: var(--bw-900);
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Avatars */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bw-100);
  color: var(--bw-700);
  font-weight: 700;
  letter-spacing: -0.01em;
  flex-shrink: 0;
}
.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}
.avatar-lg {
  width: clamp(48px, 5cqw, 96px);
  height: clamp(48px, 5cqw, 96px);
  font-size: clamp(16px, 1.6vw, 24px);
  box-shadow: inset 0 0 0 2px var(--bw-200);
}
.avatar-sm {
  width: clamp(22px, 2cqw, 32px);
  height: clamp(22px, 2cqw, 32px);
  font-size: clamp(10px, 0.85vw, 12px);
  box-shadow: inset 0 0 0 1px var(--bw-200);
}

/* Pinned Most Attended — oversized podium avatars only. List ranks 4–10
   keep the default `.avatar-sm` size so the column still fits 10 rows. */
.pinned .avatar-lg {
  width: clamp(72px, 9cqw, 160px);
  height: clamp(72px, 9cqw, 160px);
  font-size: clamp(22px, 2vw, 34px);
}
.pinned .podium-slot.rank-1 .avatar-lg {
  width: clamp(110px, 14cqw, 220px);
  height: clamp(110px, 14cqw, 220px);
  /* Expose the money badge; image carries its own border-radius above. */
  overflow: visible;
}

/* Money badge on rank-1 — positioned bottom-right of the avatar with a
   slight tilt so it reads as "she's holding a bag". Only on the pinned
   Most Attended widget. */
.pinned .podium-slot.rank-1 {
  position: relative;
}
.pinned .podium-slot.rank-1 .avatar-lg {
  position: relative;
}
.pinned .podium-slot.rank-1 .avatar-lg::after {
  content: "💵";
  position: absolute;
  right: -14%;
  bottom: 14%;
  font-size: 200%;
  line-height: 1;
  transform: rotate(-18deg);
  transform-origin: center;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.3));
  pointer-events: none;
}
/* Podium: center rank 1 gets the bigger avatar + gold ring */
.podium-slot.rank-1 .avatar-lg {
  width: clamp(72px, 8cqw, 128px);
  height: clamp(72px, 8cqw, 128px);
  box-shadow: 0 0 0 3px #e9b949, 0 6px 18px rgba(176, 137, 0, 0.18);
}
.podium-slot.rank-2 .avatar-lg {
  box-shadow: 0 0 0 2.5px #c6c6c6, 0 4px 10px rgba(0, 0, 0, 0.08);
}
.podium-slot.rank-3 .avatar-lg {
  box-shadow: 0 0 0 2.5px #c28560, 0 4px 10px rgba(0, 0, 0, 0.1);
}
.avatar-fallback {
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
}

/* ============================================================
 * LIST (ranks 4..10)
 * ============================================================ */
.rank-list {
  display: grid;
  align-content: start;
  min-height: 0;
  overflow: hidden;
}
.rank-row {
  display: grid;
  grid-template-columns: 1.8em clamp(22px, 2cqw, 32px) minmax(0, 1.6fr) minmax(0, 1.4fr) auto;
  gap: clamp(8px, 0.9vw, 14px);
  align-items: center;
  padding: clamp(5px, 0.9cqh, 11px) 0;
  border-bottom: var(--hairline);
  font-size: clamp(12px, 1.75cqh, 17px);
  font-variant-numeric: tabular-nums;
}
.rank-row .rank-num {
  color: var(--bw-400);
  font-weight: 500;
}
.rank-row .rank-name {
  font-weight: 600;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
}
.rank-row .rank-context {
  color: var(--bw-500);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
}
.rank-row .rank-trailing {
  color: var(--bw-900);
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}

/* Animate rows in on tab change only */
.feed-body.animate-in .podium-slot,
.feed-body.animate-in .rank-row {
  animation: feed-row-in 460ms cubic-bezier(0.3, 0.8, 0.2, 1) both;
}
.feed-body.animate-in .podium-slot:nth-child(1) { animation-delay: 40ms; }
.feed-body.animate-in .podium-slot:nth-child(2) { animation-delay: 0ms; }
.feed-body.animate-in .podium-slot:nth-child(3) { animation-delay: 80ms; }
.feed-body.animate-in .rank-row:nth-child(1) { animation-delay: 120ms; }
.feed-body.animate-in .rank-row:nth-child(2) { animation-delay: 150ms; }
.feed-body.animate-in .rank-row:nth-child(3) { animation-delay: 180ms; }
.feed-body.animate-in .rank-row:nth-child(4) { animation-delay: 210ms; }
.feed-body.animate-in .rank-row:nth-child(5) { animation-delay: 240ms; }
.feed-body.animate-in .rank-row:nth-child(6) { animation-delay: 270ms; }
.feed-body.animate-in .rank-row:nth-child(7) { animation-delay: 300ms; }
@keyframes feed-row-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.feed-empty {
  padding: 40px 0;
  color: var(--bw-400);
  text-align: center;
  font-size: clamp(13px, 1.2vw, 18px);
  letter-spacing: 0.04em;
}

/* ============================================================
 * GOALS SETTINGS MODAL
 * ============================================================ */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.5);
  z-index: 9998;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.modal-backdrop.open {
  display: flex;
}
.modal {
  background: var(--bw-0);
  border: 1px solid var(--bw-900);
  padding: 32px;
  max-width: 440px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}
.modal h2 {
  font-size: 20px;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.modal .sub {
  color: var(--bw-500);
  font-size: 13px;
  margin-bottom: 16px;
  letter-spacing: 0.02em;
}
.settings-side-toggle {
  display: inline-flex;
  gap: 0;
  margin-bottom: 20px;
  border: var(--hairline-strong);
  padding: 2px;
  background: var(--bw-50);
}
.settings-side-pill {
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 8px 18px;
  border: 0;
  background: transparent;
  color: var(--bw-500);
  cursor: pointer;
  font-weight: 600;
  transition: background 140ms ease, color 140ms ease;
}
.settings-side-pill.active {
  background: var(--bw-900);
  color: var(--bw-0);
}
.modal .field {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
  border-bottom: var(--hairline);
}
.modal .field label {
  font-size: 14px;
  font-weight: 500;
}
.modal .field input {
  width: 100px;
  border: var(--hairline-strong);
  padding: 8px 12px;
  font: inherit;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  background: var(--bw-0);
  color: var(--bw-900);
  outline: none;
}
.modal .field input:focus {
  border-color: var(--bw-900);
}
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 24px;
}
.modal button {
  font: inherit;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 10px 18px;
  border: var(--hairline-strong);
  background: var(--bw-0);
  cursor: pointer;
  color: var(--bw-900);
  transition: background 120ms ease;
}
.modal button:hover {
  background: var(--bw-50);
}
.modal button.primary {
  background: var(--bw-900);
  color: var(--bw-0);
  border-color: var(--bw-900);
}
.modal button.primary:hover {
  background: var(--bw-700);
}
.modal-error {
  color: var(--behind);
  font-size: 13px;
  margin-top: 12px;
  display: none;
}
.modal-error.show {
  display: block;
}

/* ============================================================
 * RESPONSIVE — keep full-screen, no scroll
 * ============================================================ */
@media screen and (max-width: 900px) {
  .app {
    grid-template-rows: auto minmax(0, 1.5fr) minmax(0, 2fr);
    padding: 12px;
  }
  .goals {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, 1fr);
  }
  .tile + .tile {
    border-left: 0;
    border-top: var(--hairline);
  }
  .ring-wrap {
    width: clamp(72px, 26cqh, 140px);
  }
  .tile-num {
    font-size: clamp(42px, 16cqh, 100px);
  }
  .hdr-center {
    display: none;
  }
  .bottom {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 0.7fr) minmax(0, 1fr);
  }
  .bottom > .spark {
    border-right: 0;
    border-bottom: var(--hairline);
  }
  .podium {
    grid-template-columns: 1fr 1.2fr 1fr;
  }
  .rank-row {
    grid-template-columns: 1.8em 24px minmax(0, 1.4fr) minmax(0, 1fr) auto;
    font-size: clamp(11px, 1.9vh, 15px);
  }
}