:root {
  color-scheme: light; /* native widgets (date picker, scrollbars) follow the theme */

  /* ── Theme ─────────────────────────────────────────────────────────
     Change --accent (and its dark-mode variant below) to retheme the
     whole app: buttons, active states, focus rings all follow it.
     theme.js sets data-theme="light" | "dark" on <html> before the first
     paint, from the saved choice or the phone's setting. */
  --accent: #0f766e;            /* teal, matches the app icon */
  --accent-contrast: #ffffff;   /* text on top of the accent */
  --accent-soft: color-mix(in srgb, var(--accent) 12%, transparent);

  --bg: #f7f7f8;
  --panel: #ffffff;
  --panel-2: #f4f4f5;
  --text: #18181b;
  --muted: #71717a;
  --border: #e4e4e7;
  --ink: #18181b;           /* neutral interactive (toast, pressed chips) */
  --ink-contrast: #ffffff;
  --earn: #4d7c0f;          /* semantic: positive amounts only (leaf green, kept apart from the teal accent) */
  --spend: #dc2626;         /* semantic: negative amounts only */
  --penalty: #b45309;
  --player-1: #b45309;      /* stats compare-mode series (CVD-validated pair) */
  --player-2: #3b82f6;
  --flash: var(--accent-soft);
  --shadow: 0 1px 2px rgba(0, 0, 0, .04);
  --radius: 12px;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --accent: #2dd4bf;          /* lighter teal for dark backgrounds */
  --accent-contrast: #042f2e;

  --bg: #101012;
  --panel: #18181b;
  --panel-2: #232326;
  --text: #f4f4f5;
  --muted: #9d9da6;
  --border: #2a2a2e;
  --ink: #f4f4f5;
  --ink-contrast: #101012;
  --earn: #a3e635;
  --spend: #f87171;
  --penalty: #fbbf24;
  --player-1: #d97706;
  --player-2: #3b82f6;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}

header {
  text-align: center;
  padding: 24px 16px 6px;
}
h1 { margin: 0; font-size: 1.2rem; font-weight: 700; letter-spacing: -0.02em; }
h1 { display: inline-flex; align-items: center; gap: 8px; }
.brand-icon { width: 1.25em; height: 1.25em; border-radius: 22%; flex: none; }
.tagline { color: var(--muted); margin: 4px 0 0; font-size: 0.78rem; }
.tagline b { color: var(--text); font-weight: 600; }

main {
  max-width: 640px;
  margin: 0 auto;
  padding: 12px;
  display: grid;
  gap: 12px;
}
/* Grid items must shrink below their content minimum (e.g. edit-mode
   inputs' intrinsic width), or they widen the page past the phone screen. */
main > * { min-width: 0; }

/* Wide screens: add-panel and history side by side */
@media (min-width: 900px) {
  main { max-width: 960px; grid-template-columns: 1fr 1fr; align-items: start; }
  #players { grid-column: 1 / -1; }
}

/* Player cards */
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* 3+ players: one row that swipes sideways, two cards in view and the next
   one peeking in. It runs out to main's edges (12px padding) so cards slide
   off the screen edge rather than being cut inside it; the vertical padding
   keeps the active card's ring from being clipped. */
.cards.scroll {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 12px;
  scrollbar-width: none;
  padding: 2px 12px;
  margin: -2px -12px;
}
.cards.scroll::-webkit-scrollbar { display: none; }
.cards.scroll .player { flex: 0 0 min(42%, 220px); scroll-snap-align: start; }
.player {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  min-width: 0; /* the name input's intrinsic width must not widen the grid */
  padding: 16px 10px 14px;
  cursor: pointer;
  transition: border-color .12s, box-shadow .12s, transform .1s;
  text-align: center;
  box-shadow: var(--shadow);
}
.player { position: relative; }
.player:active { transform: scale(.99); }
/* Exercise streak, top corner of the card */
.player .streak {
  position: absolute;
  top: 7px;
  right: 8px;
  font-size: 0.7rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding: 2px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, #f97316 14%, var(--panel));
  color: color-mix(in srgb, #ea580c 85%, var(--text));
}
.cards.has-streaks .player { padding-top: 30px; }
.player .streak.pending { opacity: .5; filter: grayscale(.6); }
.player.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow); }
.player.debt { background: color-mix(in srgb, var(--spend) 5%, var(--panel)); }
.player .name {
  font-weight: 500;
  color: var(--muted);
  background: none;
  border: none;
  text-align: center;
  font-size: 0.85rem;
  width: 100%;
  padding: 1px;
  border-radius: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.player.active .name { color: var(--text); }
/* Edit mode: the name becomes an input and should look like one */
.player input.name {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 3px;
  cursor: text;
  min-width: 0;
}
.player input.name:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.player .balance {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  margin: 4px 0 2px;
}
.player .balance.debt { color: var(--spend); }
.player .balance.bump { animation: balance-bump .45s ease-out; }
@keyframes balance-bump {
  30% { transform: scale(1.1); }
}
.player .status { font-size: 0.72rem; color: var(--muted); min-height: 1em; }
.player.debt .status { color: var(--spend); }
.player .week {
  font-size: 0.7rem;
  color: var(--muted);
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.player .week + .total-spent { margin-top: 1px; }

/* Weekly recap: a slim line that opens into a small card */
.recap-line {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 11px 14px;
  box-shadow: var(--shadow);
  font: inherit;
  font-size: 0.85rem;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.recap .muted { color: var(--muted); }
.recap .earn { color: var(--earn); }
.recap .spend { color: var(--spend); }
.recap b { font-weight: 600; }
.recap-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recap-chev { color: var(--muted); font-size: 1rem; }
.recap-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px 14px;
  box-shadow: var(--shadow);
  display: grid;
  gap: 10px;
}
.recap-head { display: flex; align-items: center; gap: 8px; }
.recap-title {
  flex: 1;
  background: none;
  border: none;
  padding: 2px 0;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.recap-close { background: none; border: none; color: var(--muted); font-size: 1rem; cursor: pointer; padding: 2px 4px; }
.recap-row { display: flex; align-items: center; gap: 10px; font-size: 0.85rem; min-width: 0; }
.recap-row .ic { width: 22px; text-align: center; }
.recap-row .lbl { color: var(--muted); flex: 1; white-space: nowrap; }
.recap-row .val { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recap-me {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

/* Panels */
.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
}
.panel h2 { margin: 0; font-size: 0.95rem; font-weight: 600; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.active-name { color: var(--text); }
.ghost-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}
.ghost-btn.active { border-color: var(--accent); color: var(--accent); }
.group { margin-bottom: 12px; }
.group:last-child { margin-bottom: 0; }
.custom-group { margin-top: 14px; margin-bottom: 0; }
.custom-group summary {
  cursor: pointer;
  font-size: 0.8rem;
  color: var(--muted);
  font-weight: 600;
  user-select: none;
}
.custom-group summary:hover { color: var(--text); }

/* Edit mode: ideas to add to the price list */
.ideas-panel { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 10px; }
.ideas-panel summary {
  cursor: pointer;
  font-size: 0.8rem;
  color: var(--accent);
  font-weight: 600;
  user-select: none;
  margin-bottom: 4px;
}
.ideas-panel .sheet-label { padding: 6px 0 4px; }
.idea.suggest:hover { border-color: var(--accent); }
.idea.suggest:disabled { opacity: .4; cursor: default; }
.ideas-empty { margin: 6px 0 0; color: var(--muted); font-size: 0.8rem; }
.custom-group[open] summary { margin-bottom: 8px; }

/* Earn / Spend tabs: segmented control */
.tabs {
  display: flex;
  gap: 3px;
  margin-bottom: 8px;
  background: var(--panel-2);
  border-radius: 10px;
  padding: 3px;
}
.tab {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--muted);
  border-radius: 8px;
  padding: 7px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s, color .12s, box-shadow .12s;
}
.tab.active { background: var(--panel); color: var(--accent); box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }

/* History controls: player filter + day pager, one row when they fit */
.history-controls { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.tabs.mini { margin-bottom: 0; flex: 1 1 200px; }
.tabs.mini[hidden] { display: none; }
.tabs.mini .tab { padding: 5px; font-size: 0.78rem; }
.tabs.mini .tab.active { color: var(--text); }

.day-nav {
  flex: 1 1 150px;
  display: flex;
  gap: 3px;
  background: var(--panel-2);
  border-radius: 10px;
  padding: 3px;
  position: relative;
}
.day-nav[hidden] { display: none; }
.day-arrow {
  background: transparent;
  border: none;
  color: var(--muted);
  border-radius: 8px;
  width: 30px;
  font-size: 0.95rem;
  cursor: pointer;
}
.day-arrow:hover:not(:disabled) { color: var(--text); }
.day-arrow:disabled { opacity: 0.35; cursor: default; }
.day-label {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--muted);
  border-radius: 8px;
  padding: 5px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}
.day-label.active { background: var(--panel); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.day-input {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  border: none;
  padding: 0;
  pointer-events: none;
}

/* Catalog: card grid in normal mode, quiet row list in edit mode */
.items { display: grid; }
.items.grid {
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 8px;
}
.item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  min-width: 0; /* let the row shrink; the label input inside gives way */
}
.item:last-child { border-bottom: none; }

/* Item cards: tap to add the item's per-tap quantity */
.card-item {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 8px;
  display: grid;
  gap: 3px;
  text-align: center;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  box-shadow: var(--shadow);
  transition: border-color .12s, box-shadow .12s, transform .1s;
}
.card-item:hover { border-color: var(--accent); }
.card-item:active { transform: scale(.97); }
.card-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.card-item.added { animation: card-pop .5s ease-out; }
@keyframes card-pop {
  from { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
  to { box-shadow: var(--shadow); }
}
.ci-label {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ci-label small { font-size: 0.72rem; font-weight: 500; color: var(--muted); }
.ci-coins {
  font-size: 0.8rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.ci-coins.earn { color: var(--earn); }
.ci-coins.spend { color: var(--spend); }
.ci-coins small { font-size: 0.68rem; font-weight: 500; color: var(--muted); }

/* Edit-mode rows */
.item.edit-head {
  padding: 0 0 2px;
  border-bottom: none;
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.item.edit-head .h-label { flex: 1; min-width: 0; }
.item.edit-head .h-num { width: 64px; text-align: center; }
.item.edit-head .h-del { width: 26px; }
.item.editing { padding: 6px 0; }
.item.editing .edit-label { flex: 1; min-width: 0; }
.item.editing input {
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 7px;
  padding: 8px;
  font-size: 0.95rem;
}
.item.editing .edit-coins { width: 64px; text-align: center; }
.item.editing input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.del-item {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 1rem;
  padding: 4px 6px;
}
.del-item:hover { color: var(--spend); }

.item.new-item {
  border: 1px dashed var(--border);
  border-radius: 8px;
  padding: 6px;
  margin-top: 8px;
}
.item.new-item .new-label { flex: 1; min-width: 0; }
.item.new-item input {
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 7px;
  padding: 8px;
  font-size: 0.95rem;
}
.item.new-item .new-coins { width: 64px; text-align: center; }
.item.new-item input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.new-btn {
  border: none;
  background: var(--accent);
  color: var(--accent-contrast);
  border-radius: 7px;
  padding: 8px 12px;
  font-weight: 600;
  cursor: pointer;
}

/* Custom form */
.custom { display: grid; gap: 6px; }
.custom-ideas { margin-top: 10px; }
.custom-ideas-hint { color: var(--muted); font-size: 0.78rem; margin-bottom: 2px; }
.custom-ideas .sheet-label { padding: 6px 0 4px; }
.idea.suggest.chosen { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.custom input {
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 9px 10px;
  font-size: 0.9rem;
}
.custom input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.btn {
  border: none;
  border-radius: 8px;
  padding: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  background: var(--accent);
  color: var(--accent-contrast);
}
.btn:active { transform: scale(.98); }

/* History */
.history {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: min(420px, 55vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.history li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 2px;
  font-size: 0.85rem;
  border-radius: 6px;
}
.history li + li:not(.day) { border-top: 1px solid var(--border); }
.history li.day {
  padding: 12px 2px 4px;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  position: sticky; /* keeps the day visible while the list scrolls */
  top: 0;
  background: var(--panel);
  z-index: 1;
}
.history .who { color: var(--muted); min-width: 0; }
.history .what { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history .amt { font-weight: 600; font-variant-numeric: tabular-nums; }
.history .amt.earn { color: var(--earn); }
.history .amt.spend { color: var(--spend); }
.history .amt.penalty { color: var(--penalty); }
.history .time { color: var(--muted); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.history .del {
  background: none; border: none; color: var(--muted);
  cursor: pointer; font-size: 1rem; line-height: 1; padding: 2px 5px;
}
.history .del:hover { color: var(--spend); }
.history .del.confirm {
  background: var(--spend);
  color: #ffffff;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 3px 7px;
}
.history .empty { color: var(--muted); text-align: center; padding: 10px; }
/* Remove some of a stacked row: [−] 2 of 3 [+] Remove ✕ */
.remove-picker { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; }
.remove-picker .count { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.remove-picker .step {
  width: 30px; height: 30px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--panel); color: var(--text);
  font-size: 1rem; line-height: 1; cursor: pointer;
}
.remove-picker .step:disabled { opacity: .35; cursor: default; }
.remove-picker .go {
  border: none; border-radius: 8px; padding: 7px 10px;
  background: var(--spend); color: #ffffff; font: inherit; font-weight: 600; cursor: pointer;
}
.remove-picker .cancel {
  background: none; border: none; color: var(--muted);
  cursor: pointer; font-size: 1rem; line-height: 1; padding: 2px 5px;
}

/* Stats view: all-time totals per item */
.stats .empty { color: var(--muted); text-align: center; padding: 10px; font-size: 0.85rem; }
.stats-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 12px 2px 4px;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.stats-head:first-child { padding-top: 0; }
.stats-head .amt { font-size: 0.78rem; letter-spacing: 0; text-transform: none; }
.stats-row {
  padding: 7px 2px 9px;
  font-size: 0.85rem;
}
.stats-row .stats-line { display: flex; align-items: center; gap: 8px; }
.stats-row .what { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stats-row .units { color: var(--text); font-weight: 700; margin-left: 2px; }
.stats-bar {
  height: 7px;
  margin-top: 5px;
  min-width: 4px;
  border-radius: 0 4px 4px 0; /* rounded data-end, square at the baseline */
}
.stats-bar.earn { background: var(--earn); }
.stats-bar.spend { background: var(--spend); }
.stats-bar.penalty { background: var(--penalty); }

/* Compare mode ("Both"): one bar per player, colored by player */
.stats-legend {
  display: flex;
  gap: 14px;
  padding: 2px;
  font-size: 0.78rem;
  color: var(--muted);
}
.stats-legend .dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  margin-right: 5px;
}
.dot.p0, .pbar.p0 { background: var(--player-1); }
.dot.p1, .pbar.p1 { background: var(--player-2); }
.stats-pline {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-size: 0.78rem;
}
.stats-pline .ptrack { flex: 1; }
.stats-pline .pbar {
  display: block;
  height: 7px;
  min-width: 2px;
  border-radius: 0 4px 4px 0;
}
.stats-pline .units { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.stats-pline .amt { min-width: 3.2em; text-align: right; }
.stats .amt.zero { color: var(--muted); font-weight: 500; }
.stats-row .amt { font-weight: 600; font-variant-numeric: tabular-nums; }
.stats .amt.earn { color: var(--earn); }
.stats .amt.spend { color: var(--spend); }
.stats .amt.penalty { color: var(--penalty); }
.history li.flash { animation: flash-in 1.4s ease-out; }
@keyframes flash-in {
  from { background: var(--flash); }
  to { background: transparent; }
}

/* Amount that floats up from a tapped card / the custom form */
.fly-amount {
  position: fixed;
  z-index: 30;
  pointer-events: none;
  font-weight: 700;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 4px var(--bg);
  animation: fly-up .8s ease-out forwards;
}
.fly-amount.earn { color: var(--earn); }
.fly-amount.spend { color: var(--spend); }
@keyframes fly-up {
  from { opacity: 1; transform: translate(-50%, -100%); }
  55% { opacity: 1; }
  to { opacity: 0; transform: translate(-50%, calc(-100% - 48px)); }
}

/* Debt-free celebration */
.confetti {
  position: fixed;
  top: -24px;
  z-index: 99;
  pointer-events: none;
  animation: confetti-fall linear forwards;
}
@keyframes confetti-fall {
  to { transform: translateY(110vh) rotate(660deg); }
}

@media (prefers-reduced-motion: reduce) {
  .confetti { display: none; }
  .history li.flash { animation: none; }
  .card-item.added { animation: none; }
  .player .balance.bump { animation: none; }
  .spinner { animation-duration: 1.6s; }
}

/* Boot overlay: covers the empty UI until the first state fetch settles */
#app-loading {
  position: fixed;
  inset: 0;
  z-index: 40; /* below the sign-in screen (50) so it can appear on top */
  background: var(--bg);
  display: grid;
  place-items: center;
  transition: opacity .3s;
}
#app-loading.done { opacity: 0; pointer-events: none; }
.spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Sign-in and other account screens: a full page, not a dialog over the app */
#auth {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--bg);
  display: grid;
  justify-items: center;
  align-items: start;
  padding: 9vh 16px 24px; /* high enough that phone keyboards don't cover it */
  overflow-y: auto;
}
.auth-box {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px 20px;
  display: grid;
  gap: 12px;
  width: min(360px, 100%);
  box-shadow: var(--shadow);
}
#auth { align-content: start; }
.auth-brand { text-align: center; margin-bottom: 18px; }
.auth-brand h1 { font-size: 1.4rem; }
.auth-brand p { margin: 4px 0 0; color: var(--muted); font-size: 0.85rem; letter-spacing: 0.02em; }
.auth-box h2 { margin: 0; font-size: 1.05rem; font-weight: 650; letter-spacing: -0.01em; }
.auth-box form { display: grid; gap: 10px; }
.auth-hint { margin: 0; color: var(--muted); font-size: 0.85rem; line-height: 1.45; }
.auth-hint b { color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
.auth-box input:not([type="checkbox"]) {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 1rem; /* 16px+ stops iOS zooming into the field */
  width: 100%;
}
.auth-box input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.auth-box .code-input { text-align: center; letter-spacing: .4em; font-variant-numeric: tabular-nums; font-size: 1.3rem; }
.auth-box .btn:disabled { opacity: .6; cursor: default; }
.btn.danger-btn { background: var(--spend); color: #fff; }
.ghost-btn.danger-ghost { color: var(--spend); border-color: color-mix(in srgb, var(--spend) 40%, var(--border)); justify-self: start; }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 0.8rem; color: var(--muted); line-height: 1.45; }
.consent input { margin: 2px 0 0; accent-color: var(--accent); width: 16px; height: 16px; flex: none; }
.consent a, .auth-box a { color: var(--accent); }
.auth-links { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.link {
  background: none;
  border: none;
  padding: 0;
  color: var(--muted);
  font-size: 0.8rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  justify-self: start;
}
.link:hover { color: var(--text); }
.auth-error { color: var(--spend); font-size: 0.8rem; margin: 0; }
.auth-error:empty { display: none; }
.claim-list { display: grid; gap: 8px; }
.claim-btn {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 11px 12px;
  font-size: 0.95rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}
.claim-btn:hover { border-color: var(--accent); }

/* Team page: members, players, invite links */
#auth.wide { padding-top: 6vh; }
#auth.wide .auth-box { width: min(480px, 100%); }
.team-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.team-section { border-top: 1px solid var(--border); padding-top: 10px; display: grid; gap: 4px; }
.team-section .sheet-label { padding: 0 0 4px; }
.member { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; }
.member-who { display: grid; gap: 1px; min-width: 0; }
.member-who b { font-size: 0.9rem; font-weight: 600; }
.member-who small { color: var(--muted); font-weight: 400; }
.member-who span { color: var(--muted); font-size: 0.78rem; }
.member-acts { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.link.danger { color: var(--spend); }
.link.confirm { font-weight: 600; }
.auth-box .inline-form { display: flex; gap: 8px; margin-top: 4px; }
.inline-form input { flex: 1; min-width: 0; }
.team-section > .ghost-btn { justify-self: start; margin-top: 4px; }
.new-link { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin: 2px 0 6px; }
.new-link input { font-size: 0.85rem !important; }
.new-link .auth-hint { grid-column: 1 / -1; font-size: 0.78rem; }

/* Create team, step 2: price-list ideas */
.pick-kind { margin: 2px 0 2px; font-size: 0.95rem; font-weight: 650; }
.pick-kind.earn { color: var(--earn); }
.pick-kind.spend { color: var(--spend); }
.ideas { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.idea {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 10px;
  font: inherit;
  font-size: 0.84rem;
  color: var(--muted);
  cursor: pointer;
}
.idea .idea-label { color: var(--text); }
.idea small { color: var(--muted); font-size: 0.72rem; }
.idea .idea-coins { font-size: 0.78rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.idea.earn .idea-coins { color: var(--earn); }
.idea.spend .idea-coins { color: var(--spend); }
.idea[aria-pressed="false"] { opacity: .62; }
.idea[aria-pressed="false"] .idea-coins { color: var(--muted); }
.idea[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.idea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.auth-box .custom-add { display: grid; grid-template-columns: auto 1fr 5.5rem auto; gap: 6px; }
.custom-add select {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 0 8px;
  font: inherit;
  font-size: 0.9rem;
}
@media (max-width: 420px) {
  .auth-box .custom-add { grid-template-columns: auto 1fr; }
}
.pick-footer {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--panel);
  border-top: 1px solid var(--border);
  padding: 12px 0 calc(4px + env(safe-area-inset-bottom, 0px));
  margin-top: 4px;
}
.pick-count { color: var(--muted); font-size: 0.85rem; font-variant-numeric: tabular-nums; }

/* Header theme switch (left) mirrors the account button (right) */
.theme-btn {
  position: absolute;
  top: 18px;
  left: 12px;
  width: 34px;
  height: 31px;
  padding: 0;
  display: grid;
  place-items: center;
}
.theme-btn svg { width: 16px; height: 16px; }
.lang-btn {
  position: absolute;
  top: 18px;
  left: 52px;
  height: 31px;
  padding: 0 9px;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.06em;
}
.lang-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme-btn:focus-visible, .account-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Header account button and team name */
header { position: relative; }
.account-btn {
  position: absolute;
  top: 18px;
  right: 12px;
  max-width: 40vw;
  overflow: hidden;
  text-overflow: ellipsis;
}
.team-line { margin: 2px 0 0; font-size: 0.8rem; font-weight: 600; color: var(--accent); }
@media (max-width: 420px) {
  header { padding-top: 52px; } /* make room for the account button above the title */
}

/* Account menu */
#sheet {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: rgba(0, 0, 0, .35);
  display: grid;
  justify-items: end;
  align-items: start;
  padding: 56px 12px 12px;
}
.sheet-box {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  width: min(300px, 100%);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .18);
  overflow: hidden;
}
.sheet-who { display: grid; gap: 2px; padding: 14px 16px; }
.sheet-who b { font-size: 0.95rem; }
.sheet-who span { color: var(--muted); font-size: 0.8rem; overflow-wrap: anywhere; }
.sheet-section { border-top: 1px solid var(--border); padding: 6px 0; }
.sheet-label { color: var(--muted); font-size: 0.72rem; padding: 6px 16px 2px; }
.sheet-item {
  display: block;
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  padding: 9px 16px;
  font: inherit;
  font-size: 0.88rem;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
}
.sheet-item:hover { background: var(--panel-2); }
.sheet-item.current { color: var(--accent); font-weight: 600; }
.sheet-item.danger { color: var(--spend); }
.sheet-item.danger.confirm { font-weight: 600; }

/* Toast */
#toast {
  position: fixed;
  z-index: 60; /* above the sign-in screen and boot overlay */
  left: 50%;
  bottom: 20px;
  transform: translate(-50%, 8px);
  background: var(--ink);
  color: var(--ink-contrast);
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 0.85rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
  max-width: calc(100vw - 32px);
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#toast.has-action {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 5px 6px 5px 16px;
  white-space: nowrap;
}
#toast.has-action.show { pointer-events: auto; }
.toast-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.toast-action {
  border: none;
  border-radius: 999px;
  padding: 6px 14px;
  font: inherit;
  font-weight: 600;
  background: var(--accent);
  color: var(--accent-contrast);
  cursor: pointer;
}

@media (max-width: 380px) {
  .history .who { display: none; }
}