/* ═══════════════════════════════════════════════════════════════════
   DueGrid Design System v5 — modern refresh
   Fonts : Plus Jakarta Sans (display) + Inter (body)  [Google Fonts]
   Icons : Material Symbols Rounded                     [Google Fonts]
   Accent: Teal→Emerald gradient  ·  Brand: Deep Navy→Indigo
   Status: green = paid/clear · amber = partial/pending · red = outstanding
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --teal:        #0FA3A3;
  --teal-hover:  #0B8383;
  --teal-soft:   #E3F5F5;
  --navy:        #0F1F3D;
  --navy-hover:  #1B3160;
  --navy-soft:   #E7EDF7;
  --indigo:      #4F46E5;
  --gold:        #D4A24C;
  --gold-soft:   #FBF3E3;
  --red:         #D64541;
  --red-soft:    #FCEBEA;
  --ok:          #0FA3A3;
  --ok-soft:     #E3F5F5;
  --warn:        #D4A24C;
  --warn-soft:   #FBF3E3;
  --bad:         #D64541;
  --bad-soft:    #FCEBEA;
  --muted:       #98A2B3;
  --muted-soft:  #F0F2F6;
  --ink:         #141E30;
  --ink-soft:    #5B6B84;
  --bg:          #F5F7FB;
  --card:        #FFFFFF;
  --border:      #E7EAF1;
  --shadow:      0 1px 2px rgba(15,31,61,.05), 0 10px 30px rgba(15,31,61,.07);
  --shadow-lg:   0 2px 6px rgba(15,31,61,.06), 0 22px 44px rgba(15,31,61,.12);
  --radius:      18px;
  --radius-sm:   12px;
  --grad-brand:  linear-gradient(135deg, #0F1F3D 0%, #1B3A6B 55%, #0FA3A3 130%);
  --grad-teal:   linear-gradient(135deg, #0FA3A3, #12B8B8 60%, #34D0C9);
  --grad-navy:   linear-gradient(135deg, #1B3160, #2E4A85);
  --grad-gold:   linear-gradient(135deg, #C98F2E, #E4B95C);
  --grad-red:    linear-gradient(135deg, #C93B36, #E25A4E);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  color: var(--ink);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 15px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(1100px 420px at 88% -8%, rgba(15,163,163,.10), transparent 60%),
    radial-gradient(900px 400px at -8% 8%, rgba(79,70,229,.07), transparent 55%),
    var(--bg);
  background-attachment: fixed;
}

a { color: var(--teal); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { margin: 0 0 .5rem; color: var(--navy); letter-spacing: -.015em; font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; }
h1 { font-size: 24px; } h2 { font-size: 18px; } h3 { font-size: 15px; }

.wrap { max-width: 1100px; margin: 0 auto; padding: 1.6rem 1rem 4.5rem; }
.wrap-narrow { max-width: 470px; }

/* Material symbol helper */
.mi {
  font-family: 'Material Symbols Rounded';
  font-weight: normal; font-style: normal;
  font-size: 22px; line-height: 1; letter-spacing: normal;
  text-transform: none; display: inline-block; white-space: nowrap;
  word-wrap: normal; direction: ltr; font-variation-settings: 'FILL' 1, 'wght' 500;
  -webkit-font-smoothing: antialiased; user-select: none; vertical-align: -0.18em;
}

/* ── Nav: centered brand + hamburger drawer ────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 80;
  background: var(--grad-brand);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.10), 0 8px 24px rgba(15,31,61,.18);
}
.nav-bar {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 1rem; padding: .65rem 1.1rem; min-height: 60px;
}
.nav-zone { display: flex; align-items: center; }
.nav-zone.left { justify-content: flex-start; }
.nav-zone.right { justify-content: flex-end; gap: .35rem; }

.nav-brand {
  display: flex; align-items: center; gap: .6rem; text-decoration: none !important;
  justify-self: center;
}
.nav-logo {
  width: 34px; height: 34px; border-radius: 11px;
  background: linear-gradient(135deg, #22C3C3, #4F46E5);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 15px; color: #fff;
  box-shadow: 0 4px 12px rgba(15,163,163,.45), inset 0 1px 0 rgba(255,255,255,.35);
}
.nav-brand strong { display: block; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 16px; font-weight: 800; letter-spacing: -.01em; line-height: 1.1; }
.nav-brand > span:not(.nav-logo) { display: block; font-size: 11px; color: rgba(255,255,255,.6); line-height: 1.2; }

.nav-links { display: flex; align-items: center; gap: .15rem; }
.nav-links a {
  color: rgba(255,255,255,.78); font-size: 13.5px; font-weight: 600;
  padding: .5rem .75rem; border-radius: 10px;
  transition: background .15s, color .15s, transform .1s;
  display: inline-flex; align-items: center; gap: .4rem;
}
.nav-links a:hover { background: rgba(255,255,255,.10); color: #fff; text-decoration: none; }
.nav-links a.active { background: linear-gradient(135deg, #0FA3A3, #12B8B8); color: #fff; font-weight: 700; box-shadow: 0 2px 8px rgba(15,163,163,.4); }
.nav-cta { background: linear-gradient(135deg, #12B8B8, #0FA3A3); color: #fff !important; font-weight: 700; }
.nav-cta:hover { filter: brightness(1.08); }

/* Hamburger button */
.hamburger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border: none; border-radius: 11px; cursor: pointer;
  background: rgba(255,255,255,.12); color: #fff;
  border: 1px solid rgba(255,255,255,.16);
  transition: background .15s, transform .1s;
}
.hamburger:hover { background: rgba(255,255,255,.2); }
.hamburger:active { transform: scale(.95); }
.hamburger .mi { font-size: 26px; }

/* Notifications bell */
.nav-bell { position: relative; }
.bell-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border: none; border-radius: 11px; cursor: pointer;
  background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.16);
  transition: background .15s, transform .1s;
}
.bell-btn:hover { background: rgba(255,255,255,.2); }
.bell-btn:active { transform: scale(.95); }
.bell-btn .mi { font-size: 24px; }
.bell-dot {
  position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 999px; background: var(--grad-red); color: #fff; font-size: 11px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--navy);
}
.bell-panel {
  position: absolute; top: calc(100% + 10px); right: 0; width: min(320px, calc(100vw - 2rem));
  background: #fff; color: var(--ink); border-radius: var(--radius-sm); overflow: hidden;
  box-shadow: 0 18px 46px rgba(15,31,61,.28); border: 1px solid var(--border);
  z-index: 70; animation: fadeUp .16s ease both;
}
.bell-title {
  display: flex; align-items: center; gap: .45rem; font-weight: 800; font-size: 14px;
  padding: .8rem .9rem; border-bottom: 1px solid var(--border); color: var(--navy);
}
.bell-item {
  display: flex; gap: .65rem; align-items: flex-start; padding: .7rem .9rem;
  font-size: 13px; color: var(--ink); text-decoration: none; border-bottom: 1px solid rgba(226,232,240,.7);
}
.bell-item:hover { background: var(--navy-soft); color: var(--navy); }
.bell-ico {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; display: inline-flex;
  align-items: center; justify-content: center; background: var(--navy-soft); color: var(--navy);
}
.bell-ico .mi { font-size: 17px; }
.bell-empty { display: flex; align-items: center; gap: .5rem; padding: 1.1rem .9rem; font-size: 13px; color: var(--ink-soft); }
.bell-empty .mi { color: var(--ok); font-size: 20px; }

/* Drawer panel (hamburger menu) */
.drawer {
  display: none;
  position: absolute; top: 100%; right: 0; left: 0;
  background: rgba(15,31,61,.97);
  backdrop-filter: blur(14px);
  box-shadow: 0 24px 48px rgba(15,31,61,.35);
  border-top: 1px solid rgba(255,255,255,.08);
  max-height: calc(100vh - 62px); overflow-y: auto;
  animation: drawerIn .22s ease;
}
.drawer.open { display: block; }
.drawer-inner { max-width: 1100px; margin: 0 auto; padding: .8rem 1.1rem 1.2rem; }
.drawer-label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em;
  color: rgba(255,255,255,.42); font-weight: 700; margin: .9rem .35rem .35rem;
}
.drawer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .3rem .6rem; }
.drawer-grid a {
  display: flex; align-items: center; gap: .7rem;
  color: rgba(255,255,255,.85); font-size: 14px; font-weight: 600;
  padding: .68rem .7rem; border-radius: 11px; text-decoration: none !important;
  transition: background .12s;
}
.drawer-grid a:hover { background: rgba(255,255,255,.09); }
.drawer-grid a .mi { font-size: 20px; color: #3AD3D3; }
.drawer-grid a.logout { color: #FFA79E; }
.drawer-grid a.logout .mi { color: #FF8A80; }
.drawer-grid a.active { background: rgba(15,163,163,.22); color: #fff; }
.drawer-grid a.active .mi { color: #5BE3E3; }
.drawer-badge { margin-left: auto; }

@keyframes drawerIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ── Badges / status ────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: .2rem .65rem; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; white-space: nowrap;
}
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.ok   { background: var(--ok-soft); color: var(--ok); }
.badge.warn { background: var(--warn-soft); color: #A4772D; }
.badge.bad  { background: var(--bad-soft); color: var(--red); }
.badge.muted{ background: var(--muted-soft); color: var(--ink-soft); }
.badge.navy { background: var(--navy-soft); color: var(--navy); }
.badge.plain::before { display: none; }
.badge-count { background: var(--grad-red); color: #fff; padding: .08rem .5rem; box-shadow: 0 2px 6px rgba(214,69,65,.45); }

/* ── Cards ──────────────────────────────────────────────────────── */
.card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 1.5rem; margin-bottom: 1.1rem;
  animation: fadeUp .45s ease both;
  transition: box-shadow .2s, transform .2s, border-color .2s;
}
.card:nth-child(2) { animation-delay: .04s; }
.card:nth-child(3) { animation-delay: .08s; }
.card:nth-child(4) { animation-delay: .12s; }
.card:hover { box-shadow: var(--shadow-lg); border-color: #D8DEE9; }
.card-title { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.card-title h2 { margin: 0; }
.card-body > :last-child, .card > :last-child { margin-bottom: 0; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; }
@media (max-width: 760px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ── Stat tiles ─────────────────────────────────────────────────── */
.stat {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 1.2rem 1.25rem;
  position: relative; overflow: hidden;
  animation: fadeUp .45s ease both;
}
.stat::after { content: ''; position: absolute; top: -40px; right: -40px; width: 110px; height: 110px; border-radius: 50%; background: rgba(15,163,163,.05); }
.stat .lbl { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin-bottom: .25rem; }
.stat .val { font-size: 30px; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; font-variant-numeric: tabular-nums; font-family: 'Plus Jakarta Sans', sans-serif; }
.stat .sub { font-size: 12px; color: var(--ink-soft); margin-top: .25rem; }
.stat.teal .val { color: var(--teal); } .stat.red .val { color: var(--red); }
.stat.navy .val { color: var(--navy); } .stat.gold .val { color: #A4772D; }

/* Gradient icon chip on stat tiles */
.stat-icon {
  position: absolute; top: 1.1rem; right: 1.1rem;
  width: 38px; height: 38px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; color: #fff;
  box-shadow: 0 6px 14px rgba(15,31,61,.22);
}
.stat-icon .mi { font-size: 21px; }
.stat-icon.ic-teal { background: var(--grad-teal); }
.stat-icon.ic-navy { background: var(--grad-navy); }
.stat-icon.ic-gold { background: var(--grad-gold); }
.stat-icon.ic-red  { background: var(--grad-red); }

/* ── Buttons ────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  border-radius: var(--radius-sm); padding: .62rem 1.15rem;
  border: 1px solid transparent; text-decoration: none !important;
  transition: background .15s, border-color .15s, transform .1s, box-shadow .15s, filter .15s;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn-primary { background: var(--grad-teal); color: #fff; box-shadow: 0 4px 14px rgba(15,163,163,.35); }
.btn-primary:hover { filter: brightness(1.06); box-shadow: 0 6px 18px rgba(15,163,163,.45); }
.btn-outline { background: transparent; border-color: var(--navy); color: var(--navy); }
.btn-outline:hover { background: var(--navy-soft); }
.btn-ghost { background: transparent; border-color: var(--border); color: var(--ink); }
.btn-ghost:hover { background: var(--muted-soft); }
.btn-danger { background: var(--grad-red); color: #fff; box-shadow: 0 4px 14px rgba(214,69,65,.3); }
.btn-danger:hover { filter: brightness(1.06); }
.btn-lg { padding: .85rem 1.6rem; font-size: 16px; }
.btn-sm { padding: .38rem .75rem; font-size: 12.5px; border-radius: 9px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

/* Primary action — hero on dashboard */
.hero-action {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  width: 100%; text-align: center;
  background: var(--grad-teal); color: #fff; border-radius: var(--radius);
  padding: 1.1rem; font-size: 17px; font-weight: 800; font-family: 'Plus Jakarta Sans', sans-serif;
  box-shadow: 0 10px 26px rgba(15,163,163,.4);
  position: relative; overflow: hidden;
  text-decoration: none !important;
  transition: transform .15s, box-shadow .2s, filter .15s;
  animation: fadeUp .4s ease both;
}
.hero-action::before {
  content: ''; position: absolute; top: 0; left: -60%; width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  animation: shine 3.4s ease-in-out infinite;
}
.hero-action:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(15,163,163,.5); filter: brightness(1.04); }
.hero-action .mi { font-size: 24px; }
@keyframes shine { 0% { left: -60%; } 55%, 100% { left: 130%; } }

/* ── Who-owes list ─────────────────────────────────────────────── */
.owes-row {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .75rem .2rem; border-bottom: 1px solid var(--border);
}
.owes-row:last-child { border-bottom: none; }
.owes-name { font-weight: 600; }
.owes-meta { font-size: 12px; color: var(--ink-soft); }
.owes-amt { font-weight: 800; font-variant-numeric: tabular-nums; }
.owes-amt.negative { color: var(--red); }

/* ── Forms ─────────────────────────────────────────────────────── */
.form-group { margin-bottom: 1rem; }
.form-group label, .form-label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-soft); margin-bottom: .35rem; }
.form-group .req { color: var(--red); }
input, select, textarea {
  width: 100%; font: inherit; font-size: 14.5px;
  padding: .6rem .85rem; border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  background: #fff; color: var(--ink); transition: border-color .15s, box-shadow .15s;
  min-height: 44px;
}
textarea { min-height: 88px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(15,163,163,.15); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }
.hint { font-size: 12px; color: var(--muted); margin-top: .3rem; }

/* ── Option chips (categories / choir parts) ──────────────── */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .4rem; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; pointer-events: none; min-height: 0; }
.chip span {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem 1.05rem; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--border); background: #fff;
  font-size: 14px; font-weight: 600; color: var(--ink);
  transition: border-color .15s, background .15s, color .15s, transform .1s;
  min-height: 40px;
}
.chip input:checked + span { background: var(--grad-teal); border-color: transparent; color: #fff; font-weight: 700; box-shadow: 0 4px 12px rgba(15,163,163,.35); }
.chip span:hover { border-color: var(--teal); transform: translateY(-1px); }
.chip-static {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .45rem .9rem; border-radius: 999px;
  border: 1.5px solid var(--border); background: var(--navy-soft);
  font-size: 13.5px; font-weight: 700; color: var(--navy);
}
.chip-count {
  background: #fff; border-radius: 999px; min-width: 22px;
  text-align: center; padding: .05rem .4rem;
  font-size: 12px; color: var(--ink-soft); font-weight: 700;
}

/* ── Tables ────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; padding: .6rem .6rem; border-bottom: 1px solid var(--border); }
td { padding: .75rem .6rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tbody tr { transition: background .12s; }
tbody tr:hover { background: #F8FAFD; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); } .soft { color: var(--ink-soft); }

/* ── Empty states ──────────────────────────────────────────────── */
.empty {
  text-align: center; padding: 2.6rem 1rem; color: var(--ink-soft);
}
.empty .icon {
  width: 64px; height: 64px; margin: 0 auto .8rem;
  border-radius: 20px; background: var(--grad-brand);
  display: flex; align-items: center; justify-content: center;
  color: #fff; box-shadow: 0 8px 20px rgba(15,31,61,.25);
}
.empty .icon .mi { font-size: 30px; }
.empty p { margin: 0 0 1rem; }
.empty .btn { display: inline-flex; }

/* ── Alerts / flash ────────────────────────────────────────────── */
.alert {
  display: flex; align-items: center; gap: .6rem;
  padding: .85rem 1.05rem; border-radius: var(--radius-sm);
  margin-bottom: 1rem; font-size: 14px; border: 1px solid transparent;
  animation: fadeUp .3s ease both;
}
.alert-success { background: var(--ok-soft); color: var(--teal-hover); border-color: #BFE6E6; }
.alert-danger  { background: var(--bad-soft); color: var(--red); border-color: #F2CCC8; }
.alert-warn    { background: var(--warn-soft); color: #A4772D; border-color: #EFDDBB; }
.alert a { color: inherit; font-weight: 700; }
.alert-success a:hover, .alert a:hover { text-decoration: underline; }

/* ── Auth pages ────────────────────────────────────────────────── */
.auth-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem;
  background:
    radial-gradient(800px 480px at 15% -5%, rgba(79,70,229,.18), transparent 60%),
    radial-gradient(900px 520px at 110% 10%, rgba(15,163,163,.22), transparent 55%),
    linear-gradient(160deg, #0F1F3D 0%, #14294F 45%, #0B6B6B 120%);
  position: relative; overflow: hidden;
}
.auth-wrap::before, .auth-wrap::after {
  content: ''; position: absolute; border-radius: 50%; filter: blur(60px); opacity: .35;
}
.auth-wrap::before { width: 340px; height: 340px; background: #0FA3A3; top: -120px; right: -80px; }
.auth-wrap::after { width: 300px; height: 300px; background: #4F46E5; bottom: -120px; left: -90px; }
.auth-card { width: 100%; max-width: 400px; position: relative; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 30px 70px rgba(6,14,32,.5); }
.auth-logo {
  width: 56px; height: 56px; border-radius: 16px;
  background: linear-gradient(135deg, #22C3C3, #4F46E5);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 24px; color: #fff;
  margin: 0 auto 1rem; box-shadow: 0 10px 24px rgba(15,163,163,.45), inset 0 1px 0 rgba(255,255,255,.4);
}
.auth-card h1 { text-align: center; }
.auth-card > .soft { text-align: center; }

/* ── Mobile sticky primary action ──────────────────────────────── */
.sticky-action {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  padding: .65rem 1rem; background: rgba(245,247,251,.92); backdrop-filter: blur(8px);
  border-top: 1px solid var(--border);
}
@media (max-width: 640px) {
  .sticky-action { display: block; }
  .wrap { padding-bottom: 6rem; }
  body { padding-bottom: 0; }
  .hide-mobile { display: none !important; }

  .nav-bar { grid-template-columns: 1fr auto 1fr; gap: .5rem; padding: .6rem .8rem; }
  .nav-links { display: none; }
  .nav-brand strong { font-size: 15px; }
  .nav-brand > span:not(.nav-logo) > span { display: none; }

  /* Full-width tables become cards on small screens */
  .table-wrap { overflow-x: visible; }
  table, thead, tbody, th, td, tr { display: block; }
  thead { display: none; }
  table tr { border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: .75rem; padding: .35rem .7rem; background: #fff; }
  table td { border: none; padding: .45rem .3rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
  table td[data-label]::before { content: attr(data-label); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
  td.num { text-align: right; }
}

/* ── Safe areas for notched phones (PWA / standalone mode) ────── */
.nav-bar { padding-top: max(.65rem, env(safe-area-inset-top)); }
@media (max-width: 640px) {
  .nav-bar { padding-top: max(.6rem, env(safe-area-inset-top)); }
  .sticky-action { padding-bottom: max(.65rem, env(safe-area-inset-bottom)); }
}

/* ── Member's balance hero ─────────────────────────────────────── */
.balance-hero {
  border-radius: var(--radius); padding: 1.7rem; color: #fff; position: relative; overflow: hidden;
  animation: fadeUp .4s ease both;
  box-shadow: 0 16px 36px rgba(15,31,61,.22);
}
.balance-hero::after {
  content: ''; position: absolute; top: -55px; right: -45px; width: 190px; height: 190px; border-radius: 50%;
  background: rgba(255,255,255,.14); 
}
.balance-hero::before {
  content: ''; position: absolute; bottom: -70px; left: -30px; width: 150px; height: 150px; border-radius: 50%;
  background: rgba(255,255,255,.08);
}
.balance-hero.owing { background: linear-gradient(135deg, #8E241F, #C93B36 55%, #E25A4E); }
.balance-hero.clear { background: linear-gradient(135deg, #064E52, #0FA3A3 60%, #23C7C0); }
.balance-hero.partial { background: linear-gradient(135deg, #8F6420, #C98F2E 55%, #E4B95C); }
.balance-hero .big { font-size: 42px; font-weight: 800; letter-spacing: -.03em; line-height: 1; margin: .3rem 0 .45rem; font-family: 'Plus Jakarta Sans', sans-serif; position: relative; }
.balance-hero .lbl { font-size: 12.5px; font-weight: 700; opacity: .85; text-transform: uppercase; letter-spacing: .06em; position: relative; }
.balance-hero .msg { font-size: 14px; opacity: .95; max-width: 34rem; position: relative; }
/* ── Install prompt banner (PWA) ──────────────────────────────────── */
.install-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 300;
  display: flex; align-items: center; justify-content: space-between; gap: .9rem; flex-wrap: wrap;
  padding: .8rem 1.1rem calc(.8rem + env(safe-area-inset-bottom));
  background: linear-gradient(135deg, #0f1f3d, #1e4776);
  color: #fff; box-shadow: 0 -8px 28px rgba(15,31,61,.3);
  animation: fadeUp .35s ease both;
}
.install-banner .install-text { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.install-banner .install-text strong { font-size: 14.5px; font-family: 'Plus Jakarta Sans', sans-serif; }
.install-banner .install-text span { color: rgba(255,255,255,.75); display: flex; align-items: center; gap: .3rem; }
.install-banner .install-actions { display: flex; gap: .5rem; }
.install-banner .btn-ghost { color: #fff; border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.08); }
.install-banner .btn-ghost:hover { background: rgba(255,255,255,.16); }