/* ============================================================
   Components
   ============================================================ */

/* ---------------- Card ---------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.card--pad { padding: var(--s-4); }
.card--flat { box-shadow: none; }

.card-link {
  display: block;
  width: 100%;
  text-align: left;
  transition: transform var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out);
}
.card-link:active { transform: scale(.985); }
@media (hover: hover) {
  .card-link:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--purple-200);
  }
}

/* ---------------- Buttons ---------------- */
.btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 46px;
  padding: 0 var(--s-5);
  border-radius: var(--r-pill);
  font-size: var(--fs-base);
  font-weight: 650;
  letter-spacing: -.01em;
  white-space: nowrap;
  transition: transform var(--t-fast) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out),
              background var(--t-base) var(--ease-out),
              opacity var(--t-base) var(--ease-out);
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:active { transform: scale(.96); }
.btn[disabled] { opacity: .5; pointer-events: none; }
.btn--block { width: 100%; }
.btn--sm { min-height: 38px; padding: 0 var(--s-4); font-size: var(--fs-sm); }
.btn--lg { min-height: 54px; font-size: var(--fs-lg); }

.btn--primary {
  color: #fff;
  background: var(--grad-brand);
  box-shadow: var(--shadow-brand);
}
@media (hover: hover) { .btn--primary:hover { box-shadow: 0 14px 30px rgba(109,40,217,.42); } }

.btn--soft { color: var(--purple-700); background: var(--lavender); }
@media (hover: hover) { .btn--soft:hover { background: var(--purple-200); } }

.btn--ghost { color: var(--text-muted); background: transparent; border: 1px solid var(--line-strong); }
@media (hover: hover) { .btn--ghost:hover { background: var(--surface-2); color: var(--text); } }

.btn--danger { color: #fff; background: var(--grad-owe); box-shadow: 0 8px 20px rgba(239,68,68,.28); }

.btn--google {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-sm);
}
@media (hover: hover) { .btn--google:hover { box-shadow: var(--shadow-md); border-color: var(--purple-200); } }

/* Ripple, injected by ui.js */
.ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background: currentColor;
  opacity: .28;
  pointer-events: none;
  animation: ripple-out .6s var(--ease-out) forwards;
}

/* ---------------- Floating action button ---------------- */
.fab {
  position: fixed;
  right: var(--s-4);
  bottom: calc(var(--bottomnav-h) + var(--safe-b) + var(--s-4));
  z-index: var(--z-fab);
  height: 52px;
  padding: 0 var(--s-5);
  border-radius: var(--r-pill);
  display: inline-flex; align-items: center; gap: var(--s-2);
  color: #fff; font-weight: 650;
  background: var(--grad-brand);
  box-shadow: var(--shadow-brand);
  transition: transform var(--t-base) var(--ease-spring), box-shadow var(--t-base) var(--ease-out);
}
.fab svg { width: 20px; height: 20px; }
.fab:active { transform: scale(.92); }
/* On mobile the bottom nav's own + already covers this action, so the pill
   would just be a second button doing the same job. Desktop has no bottom
   nav, so it appears there. */
.fab { display: none; }
@media (min-width: 1024px) {
  .fab { display: inline-flex; bottom: var(--s-7); right: var(--s-7); }
}

/* ---------------- Avatars ---------------- */
.avatar {
  width: 40px; height: 40px; flex: none;
  border-radius: var(--r-pill);
  display: grid; place-items: center;
  font-size: var(--fs-sm); font-weight: 700; color: #fff;
  background: var(--grad-brand);
  object-fit: cover;
  user-select: none;
}
.avatar--sm { width: 30px; height: 30px; font-size: 11px; }
.avatar--lg { width: 64px; height: 64px; font-size: var(--fs-xl); }
.avatar--xl { width: 88px; height: 88px; font-size: var(--fs-2xl); }

.avatar-stack { display: flex; align-items: center; }
.avatar-stack .avatar {
  border: 2px solid var(--surface);
  margin-left: -10px;
  transition: transform var(--t-base) var(--ease-spring);
}
.avatar-stack .avatar:first-child { margin-left: 0; }
.avatar-stack__more {
  background: var(--lavender);
  color: var(--purple-700);
}

/* ---------------- Icon tiles ---------------- */
.tile {
  width: 44px; height: 44px; flex: none;
  border-radius: 14px;
  display: grid; place-items: center;
  font-size: var(--fs-lg);
  background: var(--lavender);
  color: var(--purple-700);
}
.tile svg { width: 20px; height: 20px; }
.tile--sm { width: 36px; height: 36px; border-radius: 11px; font-size: var(--fs-base); }
.tile--success { background: var(--success-soft); color: #15803D; }
.tile--danger  { background: var(--danger-soft); color: #B91C1C; }
.tile--warning { background: var(--warning-soft); color: #B45309; }

/* ---------------- Badges / chips ---------------- */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: 650;
  background: var(--lavender); color: var(--purple-700);
}
.badge svg { width: 13px; height: 13px; flex: none; }
.badge--success { background: var(--success-soft); color: #15803D; }
.badge--danger  { background: var(--danger-soft); color: #B91C1C; }
.badge--warning { background: var(--warning-soft); color: #B45309; }
.badge--neutral { background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--line); }

.chip-row {
  display: flex; gap: var(--s-2);
  overflow-x: auto;
  padding-bottom: var(--s-1);
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: x proximity;
}
.chip-row::-webkit-scrollbar { display: none; }
.chip {
  flex: none;
  min-height: 36px;
  padding: 0 var(--s-4);
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--text-muted);
  font-size: var(--fs-sm); font-weight: 600;
  scroll-snap-align: start;
  transition: all var(--t-base) var(--ease-out);
}
.chip svg { width: 15px; height: 15px; flex: none; }
.chip:active { transform: scale(.94); }
.chip.is-active {
  background: var(--grad-brand);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--shadow-brand);
}

/* ---------------- Summary cards (dashboard) ---------------- */
.summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
}
/* Balance hero and total expenses span the full row on mobile */
.summary-grid > .stat--wide { grid-column: 1 / -1; }

.stat {
  position: relative;
  overflow: hidden;
  padding: var(--s-4);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
@media (hover: hover) {
  .stat:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
}
.stat__label {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--fs-xs); font-weight: 650;
  color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .06em;
}
.stat__label svg { width: 15px; height: 15px; flex: none; }
.stat__value {
  margin-top: var(--s-2);
  font-size: var(--fs-xl);
  font-weight: 750;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.stat__meta { margin-top: 2px; font-size: var(--fs-xs); color: var(--text-faint); }

/* Hero balance card — the one big gradient moment */
.stat--hero {
  color: #fff;
  border: 0;
  background: var(--grad-deep);
  box-shadow: var(--shadow-brand);
  padding: var(--s-5);
}
.stat--hero::after {
  content: '';
  position: absolute;
  right: -50px; top: -70px;
  width: 190px; height: 190px;
  border-radius: 50%;
  background: rgba(255,255,255,.10);
}
.stat--hero::before {
  content: '';
  position: absolute;
  right: 10px; bottom: -80px;
  width: 150px; height: 150px;
  border-radius: 50%;
  background: rgba(255,255,255,.07);
}
.stat--hero .stat__label { color: rgba(255,255,255,.78); }
.stat--hero .stat__value { font-size: var(--fs-3xl); margin-top: var(--s-1); }
.stat--hero .stat__meta { color: rgba(255,255,255,.72); position: relative; }

.stat--owe .stat__value { color: var(--danger); }
.stat--owed .stat__value { color: var(--success); }

/* ---------------- Group card ---------------- */
.group-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-3);
  padding: var(--s-4);
}
.group-card__top { display: flex; align-items: center; gap: var(--s-3); }
.group-card__icon {
  width: 46px; height: 46px; flex: none;
  border-radius: 14px;
  display: grid; place-items: center;
  font-size: var(--fs-xl);
  background: var(--grad-soft);
  border: 1px solid var(--line);
}
.group-card__name { display: block; font-weight: 700; font-size: var(--fs-base); letter-spacing: -.015em; }
.group-card__meta { display: block; font-size: var(--fs-xs); color: var(--text-faint); }
.group-card__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px dashed var(--line);
}
.group-card__end { text-align: right; flex: none; }
.group-card__label { display: block; font-size: var(--fs-xs); color: var(--text-muted); }
.group-card__amount {
  display: block;
  font-size: var(--fs-base);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ---------------- List rows ---------------- */
.list {
  display: grid;
  /* minmax(0,1fr) — an `auto` track sizes to the row's min-content and would
     widen the page on narrow phones. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-2);
}

.list-row {
  display: flex; align-items: center; gap: var(--s-3);
  width: 100%;
  min-width: 0;
  text-align: left;
  min-height: 60px;
  padding: var(--s-3);
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--line);
  transition: transform var(--t-fast) var(--ease-out), border-color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.list-row:active { transform: scale(.985); }
@media (hover: hover) {
  button.list-row:hover, a.list-row:hover { border-color: var(--purple-200); box-shadow: var(--shadow-sm); }
}
.list-row__title { display: block; font-weight: 650; font-size: var(--fs-base); letter-spacing: -.01em; }
.list-row__sub { display: block; font-size: var(--fs-xs); color: var(--text-faint); margin-top: 1px; }
.list-row__end { text-align: right; flex: none; max-width: 42%; }
.list-row__amount { display: block; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------------- Member row ----------------
   Like .list-row, but its actions (settle, claim, rename, remove) drop to a
   line of their own on a phone, where four controls will not fit beside a
   name and a balance. */
.member-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3);
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--line);
}
.member-row > .avatar { flex: none; }
.member-row .list-row__title { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.member-row .list-row__end { text-align: right; white-space: nowrap; }
.member-row__actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s-2);
  padding-top: var(--s-3);
  border-top: 1px dashed var(--line);
}
.icon-btn--sm { width: 36px; height: 36px; }
.icon-btn--sm svg { width: 18px; height: 18px; }

@media (min-width: 640px) {
  .member-row { grid-template-columns: auto minmax(0, 1fr) auto auto; }
  .member-row__actions {
    grid-column: auto;
    padding-top: 0;
    border-top: 0;
  }
}

/* ---------------- Timeline ---------------- */
.timeline {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-4);
  padding-left: 38px;
}
.timeline::before {
  content: '';
  position: absolute;
  left: 21px; top: 8px; bottom: 8px;
  width: 2px;
  background: linear-gradient(var(--purple-200), var(--line));
  border-radius: 2px;
}
.timeline__item { position: relative; }
.timeline__dot {
  position: absolute;
  left: -38px; top: 0;
  width: 36px; height: 36px;
  border-radius: var(--r-pill);
  display: grid; place-items: center;
  background: var(--surface);
  border: 2px solid var(--line);
  font-size: var(--fs-sm);
}
.timeline__dot svg { width: 16px; height: 16px; }
.timeline__body { padding-top: 6px; }
.timeline__text { font-size: var(--fs-base); line-height: 1.45; }
.timeline__text strong { font-weight: 650; }
.timeline__time { font-size: var(--fs-xs); color: var(--text-faint); margin-top: 2px; }

/* ---------------- Tabs ---------------- */
.tabs {
  position: relative;
  display: flex;
  gap: var(--s-1);
  padding: 4px;
  border-radius: var(--r-pill);
  background: var(--bg-tint);
  border: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: max-content;
  min-height: 44px;
  padding: 0 var(--s-4);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm); font-weight: 650;
  color: var(--text-muted);
  transition: color var(--t-base) var(--ease-out);
}
.tab.is-active { color: var(--purple-700); }
.tabs__indicator {
  position: absolute;
  top: 4px; bottom: 4px; left: 0;
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-base) var(--ease-out), width var(--t-base) var(--ease-out);
}

/* ---------------- Forms ---------------- */
.field { display: grid; gap: 6px; }
.field__label { font-size: var(--fs-sm); font-weight: 650; color: var(--text-muted); }
.field__hint { font-size: var(--fs-xs); color: var(--text-faint); }
.field__error { font-size: var(--fs-xs); color: var(--danger); font-weight: 600; min-height: 0; }

.input, .select, .textarea {
  width: 100%;
  min-height: 50px;
  padding: 0 var(--s-4);
  border-radius: var(--r-md);
  border: 1.5px solid var(--line-strong);
  background: var(--surface);
  font-size: var(--fs-lg); /* >=16px keeps iOS from zooming on focus */
  color: var(--text);
  transition: border-color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out), background var(--t-base) var(--ease-out);
  appearance: none;
}
.textarea { min-height: 96px; padding: var(--s-3) var(--s-4); resize: vertical; line-height: 1.5; }
.input::placeholder, .textarea::placeholder { color: var(--text-faint); }
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--purple-500);
  box-shadow: 0 0 0 4px rgba(139, 92, 246, .16);
}
.input[aria-invalid="true"] { border-color: var(--danger); }
.input[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px rgba(239,68,68,.14); }

.select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6580' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--s-4) center;
  background-size: 18px;
  padding-right: var(--s-8);
}

/* Amount input with a leading currency mark */
.amount-field { position: relative; }
.amount-field__sym {
  position: absolute; left: var(--s-4); top: 50%; transform: translateY(-50%);
  font-size: var(--fs-xl); font-weight: 700; color: var(--text-faint);
  pointer-events: none;
}
.amount-field .input {
  padding-left: 40px;
  font-size: var(--fs-2xl);
  font-weight: 700;
  min-height: 62px;
  font-variant-numeric: tabular-nums;
}

/* Search */
.search { position: relative; }
.search svg {
  position: absolute; left: var(--s-4); top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--text-faint); pointer-events: none;
}
.search .input { padding-left: 44px; font-size: var(--fs-base); }

/* Selectable member / option rows */
.option-row {
  display: flex; align-items: center; gap: var(--s-3);
  width: 100%; text-align: left;
  min-height: 56px;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-md);
  border: 1.5px solid var(--line);
  background: var(--surface);
  transition: all var(--t-base) var(--ease-out);
}
.option-row.is-selected { border-color: var(--purple-500); background: var(--lavender); }
.option-row__check {
  width: 22px; height: 22px; flex: none;
  border-radius: 7px;
  border: 2px solid var(--line-strong);
  display: grid; place-items: center;
  color: transparent;
  transition: all var(--t-base) var(--ease-out);
}
.option-row__check svg { width: 14px; height: 14px; }
.option-row.is-selected .option-row__check {
  background: var(--brand); border-color: var(--brand); color: #fff;
}
.option-row .input { min-height: 40px; width: 92px; font-size: var(--fs-base); text-align: right; padding-inline: var(--s-2); }

/* Segmented control */
.segmented {
  display: grid;
  grid-auto-flow: column;
  gap: var(--s-1);
  padding: 4px;
  border-radius: var(--r-md);
  background: var(--bg-tint);
  border: 1px solid var(--line);
}
.segmented__btn {
  min-height: 40px;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm); font-weight: 650;
  color: var(--text-muted);
  transition: all var(--t-base) var(--ease-out);
}
.segmented__btn.is-active { background: var(--surface); color: var(--purple-700); box-shadow: var(--shadow-xs); }

/* ---------------- Modal / bottom sheet ---------------- */
.modal-scrim {
  position: fixed; inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: flex-end;         /* mobile: sheet from the bottom */
  justify-content: center;
  background: rgba(30, 27, 46, .48);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity var(--t-base) var(--ease-out);
}
.modal-scrim.is-open { opacity: 1; }

.sheet {
  position: relative;
  width: 100%;
  max-height: 92dvh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--shadow-lg);
  transform: translateY(100%);
  transition: transform var(--t-slow) var(--ease-out);
  will-change: transform;
}
.modal-scrim.is-open .sheet { transform: translateY(0); }
.sheet.is-dragging { transition: none; }

.sheet__grip {
  padding: var(--s-3) 0 var(--s-1);
  display: grid; place-items: center;
  flex: none;
  cursor: grab;
  touch-action: none;
}
.sheet__grip::before {
  content: '';
  width: 42px; height: 5px;
  border-radius: var(--r-pill);
  background: var(--line-strong);
}
.sheet__head {
  flex: none;
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2) var(--s-4) var(--s-3);
  border-bottom: 1px solid var(--line);
}
.sheet__title { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -.02em; }
.sheet__sub { font-size: var(--fs-xs); color: var(--text-faint); }
.sheet__body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--s-4);
  display: grid;
  gap: var(--s-4);
}
.sheet__foot {
  flex: none;
  display: flex; gap: var(--s-3);
  padding: var(--s-3) var(--s-4) calc(var(--s-4) + var(--safe-b));
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.sheet__foot .btn { flex: 1; }

/* Desktop: the same sheet becomes a centred dialog */
@media (min-width: 768px) {
  .modal-scrim { align-items: center; padding: var(--s-6); }
  .sheet {
    width: min(520px, 100%);
    max-height: 86dvh;
    border-radius: var(--r-xl);
    transform: translateY(16px) scale(.96);
    opacity: 0;
    transition: transform var(--t-base) var(--ease-spring), opacity var(--t-base) var(--ease-out);
  }
  .modal-scrim.is-open .sheet { transform: translateY(0) scale(1); opacity: 1; }
  .sheet__grip { display: none; }
  .sheet__head { padding-top: var(--s-4); }
  .sheet__foot { padding-bottom: var(--s-4); }
}

/* ---------------- Toast ---------------- */
#toast-region {
  position: fixed;
  left: 50%;
  bottom: calc(var(--bottomnav-h) + var(--safe-b) + var(--s-4));
  transform: translateX(-50%);
  z-index: var(--z-toast);
  display: grid;
  gap: var(--s-2);
  width: min(420px, calc(100vw - 32px));
  pointer-events: none;
}
@media (min-width: 1024px) { #toast-region { bottom: var(--s-6); } }

.toast {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  background: var(--dark-bg);
  color: #fff;
  font-size: var(--fs-sm); font-weight: 600;
  box-shadow: var(--shadow-lg);
  animation: toast-in .34s var(--ease-spring);
}
.toast.is-leaving { animation: toast-out .24s var(--ease-out) forwards; }
.toast__icon { width: 20px; height: 20px; flex: none; }
.toast--success .toast__icon { color: #4ADE80; }
.toast--error   .toast__icon { color: #FCA5A5; }

/* ---------------- Empty / loading states ---------------- */
.empty {
  display: grid; justify-items: center; text-align: center;
  gap: var(--s-3);
  padding: var(--s-8) var(--s-5);
  border-radius: var(--r-lg);
  border: 1px dashed var(--line-strong);
  background: var(--surface-2);
}
.empty__icon {
  width: 62px; height: 62px;
  border-radius: var(--r-pill);
  display: grid; place-items: center;
  background: var(--grad-soft);
  color: var(--purple-500);
}
.empty__icon svg { width: 26px; height: 26px; }
.empty__title { font-weight: 700; font-size: var(--fs-base); }
.empty__text { font-size: var(--fs-sm); color: var(--text-muted); max-width: 34ch; }

.skeleton {
  border-radius: var(--r-md);
  background: linear-gradient(100deg, var(--bg-tint) 30%, #fff 50%, var(--bg-tint) 70%);
  background-size: 220% 100%;
  animation: shimmer 1.3s linear infinite;
}
.skeleton--line { height: 12px; border-radius: var(--r-pill); }
.skeleton--card { height: 92px; }

/* ---------------- Progress bar ---------------- */
.progress {
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--bg-tint);
  overflow: hidden;
}
.progress__fill {
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--grad-brand);
  width: 0;
  transition: width .8s var(--ease-out);
}

/* ---------------- Settlement card ---------------- */
.settle-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-3);
  padding: var(--s-4);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.settle-card__top { display: flex; align-items: center; gap: var(--s-3); }
.settle-card__top > .faint svg { width: 18px; height: 18px; }
.settle-card__amount {
  font-size: var(--fs-2xl); font-weight: 750;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}

/* ---------------- Landing page ---------------- */
.landing {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(760px 460px at 85% -8%, rgba(139,92,246,.28), transparent 62%),
    radial-gradient(620px 420px at -10% 12%, rgba(109,40,217,.16), transparent 60%),
    var(--bg);
}
.landing__nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(var(--safe-t) + var(--s-4)) var(--s-4) var(--s-2);
  max-width: var(--content-max); margin-inline: auto; width: 100%;
}
.landing__main {
  flex: 1;
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding: var(--s-6) var(--s-4) calc(var(--safe-b) + var(--s-8));
  display: grid;
  gap: var(--s-8);
  align-content: start;
}
.hero { display: grid; gap: var(--s-5); }
.hero__eyebrow {
  justify-self: start;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-xs);
  font-size: var(--fs-xs); font-weight: 650; color: var(--purple-700);
  white-space: nowrap;
}
.hero__eyebrow svg { width: 15px; height: 15px; flex: none; }
.hero__title {
  font-size: clamp(2rem, 8.5vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -.035em;
  font-weight: 800;
}
.hero__title em {
  font-style: normal;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__text { color: var(--text-muted); font-size: var(--fs-lg); max-width: 46ch; }
.hero__cta { display: grid; gap: var(--s-3); }
.hero__note { font-size: var(--fs-xs); color: var(--text-faint); text-align: center; }

/* CSS-drawn phone mock — the illustration, no image assets */
.mock {
  position: relative;
  justify-self: center;
  width: min(300px, 84vw);
  padding: 14px;
  border-radius: 38px;
  background: linear-gradient(160deg, #2B2244, #1E1B2E);
  box-shadow: 0 32px 70px rgba(76,29,149,.34);
}
.mock__screen {
  border-radius: 26px;
  background: var(--bg);
  padding: var(--s-4);
  display: grid;
  gap: var(--s-3);
  overflow: hidden;
}
.mock__bar {
  height: 6px; width: 74px; margin: 0 auto var(--s-1);
  border-radius: var(--r-pill); background: var(--line-strong);
}
.mock__hero {
  border-radius: var(--r-md);
  background: var(--grad-deep);
  color: #fff;
  padding: var(--s-4);
}
.mock__hero span { font-size: 10px; opacity: .78; text-transform: uppercase; letter-spacing: .08em; font-weight: 650; }
.mock__hero strong { display: block; font-size: 1.5rem; letter-spacing: -.03em; margin-top: 2px; }
.mock__row {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2);
  border-radius: var(--r-sm);
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 11px;
}
.mock__row .tile { width: 28px; height: 28px; border-radius: 9px; font-size: 12px; }
.mock__row b { font-weight: 650; }

.feature-grid { display: grid; gap: var(--s-3); }
.feature {
  display: grid; gap: var(--s-2);
  padding: var(--s-5);
  border-radius: var(--r-lg);
  background: var(--surface-glass);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
@media (hover: hover) { .feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } }
.feature__title { font-weight: 700; font-size: var(--fs-base); }
.feature__text { font-size: var(--fs-sm); color: var(--text-muted); }

.landing__foot {
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--text-faint);
  padding: var(--s-5) var(--s-4) calc(var(--safe-b) + var(--s-5));
}

/* ---------------- Profile header ---------------- */
.profile-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--s-2);
  padding: var(--s-7) var(--s-5);
  border-radius: var(--r-xl);
  background: var(--grad-deep);
  color: #fff;
  box-shadow: var(--shadow-brand);
}
.profile-hero::after {
  content: '';
  position: absolute; top: -80px; right: -60px;
  width: 220px; height: 220px; border-radius: 50%;
  background: rgba(255,255,255,.10);
}
.profile-hero > * { position: relative; }
.profile-hero .avatar { border: 3px solid rgba(255,255,255,.5); }
.profile-hero__name { font-size: var(--fs-xl); font-weight: 750; letter-spacing: -.02em; }
.profile-hero__mail { font-size: var(--fs-sm); color: rgba(255,255,255,.78); }

.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-2);
  width: 100%;
  margin-top: var(--s-4);
}
.stat-row > div {
  padding: var(--s-3) var(--s-2);
  border-radius: var(--r-md);
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.16);
}
.stat-row b { display: block; font-size: var(--fs-lg); letter-spacing: -.02em; }
.stat-row span { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; opacity: .8; font-weight: 650; }

/* ---------------- Group detail header ---------------- */
.group-hero {
  position: relative;
  overflow: hidden;
  padding: var(--s-5);
  border-radius: var(--r-xl);
  background: var(--grad-deep);
  color: #fff;
  box-shadow: var(--shadow-brand);
  display: grid;
  gap: var(--s-4);
}
.group-hero::after {
  content: '';
  position: absolute; top: -90px; right: -50px;
  width: 210px; height: 210px; border-radius: 50%;
  background: rgba(255,255,255,.10);
}
.group-hero > * { position: relative; }
.group-hero__icon {
  width: 52px; height: 52px; flex: none;
  border-radius: 16px;
  display: grid; place-items: center;
  font-size: var(--fs-2xl);
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.22);
}
.group-hero__name { display: block; font-size: var(--fs-xl); font-weight: 750; letter-spacing: -.025em; }
.group-hero__meta {
  display: block;
  font-size: var(--fs-xs);
  color: rgba(255,255,255,.76);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.group-hero__figures { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.group-hero__figures > div {
  padding: var(--s-3);
  border-radius: var(--r-md);
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.16);
}
.group-hero__figures span { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; opacity: .8; font-weight: 650; }
.group-hero__figures b { display: block; font-size: var(--fs-lg); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

/* ---------------- Settings rows ---------------- */
.setting-row {
  display: flex; align-items: center; gap: var(--s-3);
  width: 100%; text-align: left;
  min-height: 56px;
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--line);
  transition: background var(--t-fast) var(--ease-out);
}
.setting-row:last-child { border-bottom: 0; }
.setting-row:active { background: var(--surface-2); }
.setting-row__chev { margin-left: auto; color: var(--text-faint); flex: none; }
.setting-row__chev svg { width: 18px; height: 18px; }

.switch {
  margin-left: auto;
  width: 48px; height: 28px; flex: none;
  border-radius: var(--r-pill);
  background: var(--line-strong);
  padding: 3px;
  transition: background var(--t-base) var(--ease-out);
}
.switch::after {
  content: '';
  display: block;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow-xs);
  transition: transform var(--t-base) var(--ease-spring);
}
.switch.is-on { background: var(--brand); }
.switch.is-on::after { transform: translateX(20px); }

/* ============================================================
   Auth, onboarding, notices, invites — added for the account flow
   ============================================================ */

/* ---------------- Spinner ---------------- */
.spinner {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: spin .7s linear infinite;
  flex: none;
}
.spinner--lg { width: 34px; height: 34px; border-width: 3px; color: var(--purple-500); }

.page-loader {
  min-height: 60dvh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--s-4);
  padding: var(--s-6);
  text-align: center;
}

/* ---------------- Auth panel ---------------- */
.auth-panel {
  display: grid;
  gap: var(--s-3);
  padding: var(--s-5);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  max-width: 460px;
}
.auth-panel__note {
  font-size: var(--fs-xs);
  color: var(--text-faint);
  text-align: center;
  line-height: 1.5;
}
.auth-divider {
  display: flex; align-items: center; gap: var(--s-3);
  color: var(--text-faint);
  font-size: var(--fs-xs);
  font-weight: 600;
}
.auth-divider::before, .auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* ---------------- Notices ---------------- */
.notice {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-4);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  border: 1px solid;
}
.notice p { color: var(--text-muted); margin-top: 2px; line-height: 1.5; }
.notice__icon { flex: none; margin-top: 1px; }
.notice__icon svg { width: 20px; height: 20px; }
.notice--warning { background: var(--warning-soft); border-color: #FDE68A; color: #92400E; }
.notice--info    { background: var(--lavender);     border-color: var(--purple-200); color: var(--purple-800); }
.notice--danger  { background: var(--danger-soft);  border-color: #FECACA; color: #991B1B; }

/* ---------------- Guest banner ---------------- */
.guest-banner {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--warning-soft);
  border-bottom: 1px solid #FDE68A;
  color: #92400E;
  font-size: var(--fs-xs);
  line-height: 1.4;
}
.guest-banner__icon { flex: none; }
.guest-banner__icon svg { width: 18px; height: 18px; }
.guest-banner .btn { flex: none; }
@media (min-width: 768px) { .guest-banner { padding-inline: var(--s-6); font-size: var(--fs-sm); } }

/* ---------------- Onboarding / first run ---------------- */
/* A gradient welcome banner replaces the old plain empty state — the first
   screen after signing in should look like the product, not like a blank. */
.hero-banner {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: var(--s-7) var(--s-5) var(--s-6);
  border-radius: var(--r-xl);
  background: var(--grad-deep);
  color: #fff;
  box-shadow: var(--shadow-brand);
  display: grid;
  justify-items: start;
  gap: var(--s-3);
  text-align: left;
}
.hero-banner > * { position: relative; z-index: 1; }

.hero-banner__art { position: absolute; inset: 0; z-index: 0; }
.hero-banner__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
}
.hero-banner__blob--1 {
  width: 240px; height: 240px;
  top: -110px; right: -70px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.22), rgba(255,255,255,.04));
}
.hero-banner__blob--2 {
  width: 180px; height: 180px;
  bottom: -90px; left: -60px;
  background: radial-gradient(circle at 60% 40%, rgba(167,139,250,.45), rgba(255,255,255,0));
}
.hero-banner__coin {
  position: absolute;
  font-size: 1.5rem;
  opacity: .5;
  animation: float-soft 6s var(--ease-in-out) infinite;
}
.hero-banner__coin--1 { top: 9%;   right: 7%;  animation-delay: -.4s; }
.hero-banner__coin--2 { top: 30%;   right: 3%;  animation-delay: -2.2s; font-size: 1.15rem; }
.hero-banner__coin--3 { bottom: 32%; right: 9%; animation-delay: -3.6s; font-size: 1.3rem; }

.hero-banner__pill {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 6px var(--s-3);
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.24);
  font-size: var(--fs-xs);
  font-weight: 600;
}
.hero-banner__pill svg { width: 15px; height: 15px; }

.hero-banner__title {
  font-size: var(--fs-3xl);
  letter-spacing: -.03em;
  line-height: 1.12;
}
.hero-banner__text {
  color: rgba(255,255,255,.82);
  font-size: var(--fs-sm);
  max-width: 46ch;
}
.hero-banner__actions { margin-top: var(--s-2); }
.hero-banner__cta {
  background: #fff;
  color: var(--purple-800);
  box-shadow: 0 10px 24px rgba(20, 8, 50, .28);
}
.hero-banner__cta:active { transform: translateY(1px); }

.hero-banner__starters {
  width: 100%;
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid rgba(255,255,255,.16);
}
.hero-banner__startersLabel {
  display: block;
  font-size: var(--fs-xs);
  color: rgba(255,255,255,.7);
  margin-bottom: var(--s-2);
}
.starter-row {
  display: flex;
  gap: var(--s-2);
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}
.starter-row::-webkit-scrollbar { display: none; }
.starter {
  flex: none;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px var(--s-3);
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.starter:hover { background: rgba(255,255,255,.24); }
.starter:active { transform: scale(.96); }
.starter__emoji { font-size: var(--fs-base); }

/* Steps */
.steps { display: grid; gap: var(--s-3); }
.step-card {
  position: relative;
  padding: var(--s-4);
  padding-left: calc(var(--s-4) + 38px);
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-xs);
}
.step-card__num {
  position: absolute;
  top: var(--s-4); left: var(--s-4);
  width: 28px; height: 28px;
  border-radius: var(--r-pill);
  display: grid; place-items: center;
  background: var(--lavender);
  color: var(--purple-700);
  font-size: var(--fs-xs);
  font-weight: 700;
}
.step-card strong { font-size: var(--fs-sm); }
.step-card p { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; }

/* Perks */
.perk-row {
  display: grid;
  gap: var(--s-3);
  margin-top: var(--s-5);
}
.perk {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-4);
  border-radius: var(--r-md);
  background: var(--grad-soft);
  border: 1px solid var(--line);
}
.perk__icon {
  width: 34px; height: 34px; flex: none;
  border-radius: var(--r-sm);
  display: grid; place-items: center;
  background: var(--surface);
  color: var(--brand);
  box-shadow: var(--shadow-xs);
}
.perk__icon svg { width: 18px; height: 18px; }
.perk strong { font-size: var(--fs-sm); }
.perk p { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; }

@media (min-width: 768px) {
  .hero-banner { padding: var(--s-9) var(--s-7) var(--s-7); }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .step-card { padding-left: var(--s-4); }
  .step-card__num { position: static; margin-bottom: var(--s-3); }
  .perk-row { grid-template-columns: repeat(3, 1fr); }
}

/* ---------------- Invite ---------------- */
.invite-link {
  padding: var(--s-3);
  border-radius: var(--r-md);
  background: var(--bg-tint);
  border: 1px dashed var(--line-strong);
  overflow-x: auto;
}
.invite-link code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--fs-xs);
  color: var(--purple-800);
  white-space: nowrap;
}

.invite-card {
  text-align: center;
  display: grid;
  justify-items: center;
  max-width: 420px;
  margin-inline: auto;
}

.group-hero__actions { flex-wrap: wrap; gap: var(--s-2); }
.group-hero__share {
  justify-self: start;
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .24);
  color: #fff;
}
.group-hero__share:active { background: rgba(255, 255, 255, .28); }

/* ---------------- Compact list preference ---------------- */
.is-compact .list-row { min-height: 52px; padding: var(--s-2) var(--s-3); }
.is-compact .group-card { padding: var(--s-3); }
.is-compact .stat { padding: var(--s-3); }

/* ---------------- Theme picker (settings) ---------------- */
.theme-picker {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-2);
  margin-top: var(--s-2);
}
.theme-option {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: var(--s-3) var(--s-2);
  border-radius: var(--r-md);
  border: 1.5px solid var(--line);
  background: var(--surface-2);
  color: var(--text);
  text-align: center;
  transition: border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.theme-option:hover { border-color: var(--line-strong); }
.theme-option.is-active {
  border-color: var(--brand);
  background: var(--lavender);
}
.theme-option__swatch {
  width: 100%; height: 34px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-strong);
}
/* The swatches are literal previews, so their colours are fixed rather
   than themed — a dark chip must look dark even in the light theme. */
.theme-option__swatch--light  { background: linear-gradient(160deg, #FFFFFF 55%, #EDE9FE); }
.theme-option__swatch--dark   { background: linear-gradient(160deg, #2E2947 45%, #7C3AED); }
.theme-option__swatch--system { background: linear-gradient(110deg, #FFFFFF 0 50%, #2E2947 50% 100%); }
.theme-option__label { font-size: var(--fs-sm); font-weight: 650; }
.theme-option__hint  { font-size: 11px; color: var(--text-faint); }

/* ---------------- Identity picker (join by link) ---------------- */
.identity-picker {
  width: 100%;
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
  text-align: left;
}
.identity-picker__ask { font-weight: 700; font-size: var(--fs-sm); }
.identity-picker__hint {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-top: 2px;
}
.identity-picker__options { display: grid; gap: var(--s-2); margin-top: var(--s-3); }
.identity-option {
  display: flex; align-items: center; gap: var(--s-3);
  width: 100%;
  padding: var(--s-3);
  border-radius: var(--r-md);
  border: 1.5px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  font-size: var(--fs-sm);
  text-align: left;
  transition: border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.identity-option:hover { border-color: var(--line-strong); }
.identity-option.is-active { border-color: var(--brand); background: var(--lavender); }
.identity-option .avatar { flex: none; }
.identity-option__tick {
  width: 22px; height: 22px; flex: none;
  border-radius: var(--r-pill);
  display: grid; place-items: center;
  background: var(--line);
  color: transparent;
}
.identity-option__tick svg { width: 14px; height: 14px; }
.identity-option.is-active .identity-option__tick {
  background: var(--brand);
  color: #fff;
}

/* ---------------- Dark-theme corrections ----------------
   A handful of components hard-code ink that only works on a pale
   background. These re-state just those colours. */
:root[data-theme="dark"] .tile--success,
:root[data-theme="dark"] .tile--danger,
:root[data-theme="dark"] .guest-banner {
  color: inherit;
}
:root[data-theme="dark"] .tile--success { color: #4ADE80; }
:root[data-theme="dark"] .tile--danger  { color: #F87171; }
:root[data-theme="dark"] .guest-banner {
  color: #FCD34D;
  border-bottom-color: #4A3A12;
}
:root[data-theme="dark"] .invite-link code { color: var(--purple-800); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tile--success { color: #4ADE80; }
  :root:not([data-theme="light"]) .tile--danger  { color: #F87171; }
  :root:not([data-theme="light"]) .guest-banner {
    color: #FCD34D;
    border-bottom-color: #4A3A12;
  }
}