/* ─── HEADER ─── */
.app-header{
  display:flex;align-items:center;justify-content:space-between;
  /* Apple Nav Bar: 44pt height + safe area, 16px side margins */
  padding:0 var(--margin);
  padding-top:env(safe-area-inset-top);
  height:calc(44px + env(safe-area-inset-top));
  background:var(--bg);
  flex-shrink:0;z-index:100;
  border-bottom:0.5px solid var(--border);
  position:sticky;top:0;
  transition:background 0s !important;
}
.dark-mode .app-header{background:var(--bg);}
.header-left{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.hdr-avatar{
  width:32px;height:32px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--teal),var(--teal-d));
  display:flex;align-items:center;justify-content:center;
  font-size:0.82rem;font-weight:700;color:#fff;overflow:hidden
}
/* Apple Navigation Bar title style */
.hdr-title{
  font-size:1.0625rem;font-weight:700;color:var(--text);
  letter-spacing:-0.025em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px;
  /* SF Display semibold look */
  -webkit-font-smoothing:auto;
}
.hdr-actions{display:flex;gap:4px;align-items:center;flex-shrink:0}
/* Apple bar button item — 44×44pt tap target, icon only */
.hdr-btn{
  width:44px;height:44px;border-radius:50%;
  background:transparent;border:none;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;position:relative;flex-shrink:0;
  -webkit-tap-highlight-color:transparent;
}
.hdr-btn:active{background:var(--fill);}
.hdr-btn svg{width:22px;height:22px;stroke:var(--teal);stroke-width:1.8;position:relative;z-index:1}
/* chip grup — hidden on narrow, shown via JS when grup active */
.active-grup-chip{
  font-size:0.65rem;font-weight:700;color:var(--teal-d);
  background:var(--teal-l);border:1px solid var(--teal-m);
  padding:4px 10px;border-radius:var(--r-pill);
  max-width:90px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  display:none  /* hide by default, show only when grup selected */
}
.active-grup-chip.visible{display:block}

/* ─── TAB BAR ─────────────────────────────────────────
   Apple HIG iOS 26 spec:
   • Capsule shape, inset 16pt from edges
   • White/dark background, no blur (lightweight)
   • Icon: 25pt, outline inactive / filled active
   • Label: 10pt, weight 500
   • Active tint: app accent color (teal)
   • Min tap target: 44×44pt
   • No highlight rect — just color change (HIG)
─────────────────────────────────────────────────── */
nav{
  position:fixed;bottom:0;left:0;right:0;
  display:flex;align-items:flex-end;justify-content:center;
  z-index:200;
  background:transparent;
  padding:0 20px calc(env(safe-area-inset-bottom,0px) + 10px);
  pointer-events:none;
}
nav .tab-pill{
  display:flex;align-items:center;
  background:#FFFFFF;
  border-radius:999px;         /* full pill per iOS 26 */
  padding:6px 8px;
  gap:0;
  box-shadow:0 2px 12px rgba(0,0,0,.1);
  pointer-events:all;
  width:100%;max-width:500px;
}
.dark-mode nav .tab-pill{
  background:#1C1C1E;
  box-shadow:0 2px 12px rgba(0,0,0,.4);
}
/* Each tab: 44pt minimum tap area */
nav button{
  flex:1;
  min-height:52px;   /* icon+label+padding */
  padding:7px 4px 6px;
  border:none;background:transparent;
  font-family:-apple-system,sans-serif;
  font-size:0.625rem;  /* 10pt */
  font-weight:500;
  letter-spacing:.02em;
  color:var(--text3);cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  transition:color .12s;
  -webkit-tap-highlight-color:transparent;
  position:relative;
}
/* Icon: 25pt, outline style when inactive */
nav button .tab-icon-off{
  width:25px;height:25px;
  stroke:currentColor;stroke-width:1.5;
  fill:none;stroke-linecap:round;stroke-linejoin:round;
  display:block;flex-shrink:0;
  transition:opacity .1s;
}
nav button .tab-icon-on{
  width:25px;height:25px;
  display:none;flex-shrink:0;
  stroke-linecap:round;stroke-linejoin:round;
}
/* Active state: show filled icon, teal color */
nav button.active .tab-icon-off{display:none;}
nav button.active .tab-icon-on{display:block;}
nav button.active{
  color:var(--teal);
}
/* Per HIG: NO background pill on active tab — just tint color */
nav button.active span{font-weight:600;}
nav button:active{opacity:.55;}

/* ─── PAGES & iOS TRANSITIONS ─────────────────────────────────
  Three animation modes matching native iOS UIKit:
  1. Tab switch        → fade + translateY(8px→0)  like UITabBarController
  2. Push (→ detail)  → translateX(100%→0)         like UINavigationController push
  3. Pop  (← back)    → translateX(-30%→0)         like UINavigationController pop
  Hardware-accelerated via transform+opacity (compositor thread only)
─────────────────────────────────────────────────────────────── */

/* Base: hidden by default */
.page{
  display:none;
  padding:0;
  max-width:600px;
  margin:0 auto;
  background:var(--bg);
  min-height:100vh;
}
/* Active: visible, will animate in */
.page.active{display:block}

/* ── Keyframes ── */
@keyframes iosTabIn {
  from { opacity:0; transform:translateY(10px); }
  to   { opacity:1; transform:translateY(0);    }
}
@keyframes iosPushIn {
  from { opacity:0.6; transform:translateX(100%); }
  to   { opacity:1;   transform:translateX(0);    }
}
@keyframes iosPopIn {
  from { opacity:0.6; transform:translateX(-30%); }
  to   { opacity:1;   transform:translateX(0);    }
}
@keyframes iosPopOut {
  from { opacity:1;   transform:translateX(0);    }
  to   { opacity:0.6; transform:translateX(100%); }
}

/* ── Animation classes (applied then removed by JS) ── */
.page-anim-tab {
  animation: iosTabIn 0.26s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.page-anim-push {
  animation: iosPushIn 0.34s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.page-anim-pop {
  animation: iosPopIn 0.28s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.page-pad{padding:16px}

/*
  Large Title layout:
  • Title: 34pt, line-height 1.1 — visible bottom ~37px
  • Subtitle gap: 8pt (Apple 4pt grid × 2) between Title baseline and sub cap-height
  • Visually resolves the "crammed" look in Keuangan, Kocokan, WA Blast
*/
.pg-hdr{display:flex;align-items:flex-start;justify-content:space-between;padding:20px 16px 4px}
.pg-title{
  font-size:2.125rem;   /* 34pt — Apple Large Title */
  font-weight:700;
  color:var(--text);
  letter-spacing:-0.4px;
  line-height:1.1;
  margin-bottom:0;      /* subtitle margin handles the gap */
}
/* Caption 1 (12pt) — description subtitle below Large Title */
.pg-sub{
  font-size:0.75rem;    /* 12pt — Caption 1 */
  color:var(--text3);
  margin-top:8px;       /* 8pt gap from title baseline — Apple 4pt grid × 2 */
  font-weight:400;
  letter-spacing:-0.1px;
  line-height:1.33;     /* Apple Caption 1 line-height */
}

/* ─── CARDS ─── */
.card{
  background:var(--card);
  border-radius:var(--r);   /* 16pt */
  overflow:hidden;
  /* HIG: subtle shadow for elevation */
  box-shadow:0 1px 4px rgba(0,0,0,.07);
}
.dark-mode .card{
  box-shadow:0 1px 4px rgba(0,0,0,.35);
}
/* Card content padding: 16px to match Apple layout margin */
.card-pad{padding:16px}
/* Section header: 12px gap below the label, matches Apple grouped table spacing */
.section-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.section-title{
  font-size:.6875rem;  /* 11pt */
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--text3);
  font-family:-apple-system,sans-serif;
}
.see-all{font-size:0.75rem;font-weight:700;color:var(--teal);cursor:pointer}

/* ─── HERO BANNER CARD ─── */
.hero-banner{
  margin:16px 16px 0;border-radius:var(--r);overflow:hidden;position:relative;
  background:linear-gradient(135deg,#1AAF6C,#0E6FA8);
  min-height:130px;display:flex;align-items:center;
}
.hero-banner-content{padding:20px;flex:1;z-index:2;position:relative}
.hero-banner-eyebrow{font-size:0.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.7);margin-bottom:4px}
.hero-banner-title{font-size:1.3rem;font-weight:800;color:#fff;line-height:1.2;margin-bottom:8px}
.hero-banner-sub{font-size:0.75rem;color:rgba(255,255,255,.8);font-weight:500}
.hero-banner-blob{
  position:absolute;right:-20px;top:-20px;width:140px;height:140px;
  border-radius:50%;background:rgba(255,255,255,.08);
}
.hero-banner-blob2{
  position:absolute;right:30px;bottom:-30px;width:90px;height:90px;
  border-radius:50%;background:rgba(255,255,255,.06);
}
.hero-banner-illo{
  position:absolute;right:0;bottom:0;width:110px;height:110px;z-index:1;
  display:flex;align-items:flex-end;justify-content:flex-end;padding:0 8px 0 0
}

/* ─── GRUP CARDS ─── */
.grup-scroll{padding:16px 16px 4px;display:flex;flex-direction:column;gap:12px}
.grup-item{
  background:var(--white);border-radius:var(--r);box-shadow:var(--shadow);
  overflow:hidden;display:flex;align-items:stretch;cursor:pointer;
  transition:transform .18s,box-shadow .18s;border:1px solid var(--border)
}
.grup-item:active{transform:scale(.98)}
.grup-item:hover{box-shadow:var(--shadow2);transform:translateY(-1px)}
.grup-item-accent{width:6px;flex-shrink:0}
.grup-item-body{flex:1;padding:14px 16px;min-width:0}
.grup-item-name{font-size:0.95rem;font-weight:800;color:var(--text);margin-bottom:2px}
.grup-item-meta{font-size:0.73rem;color:var(--text2);font-weight:500;margin-bottom:10px}
.prog-row{display:flex;align-items:center;gap:8px}
.prog-bar-wrap{flex:1;height:3px;background:var(--fill);border-radius:var(--r-pill);overflow:hidden}
.prog-bar-fill{height:100%;border-radius:var(--r-pill);transition:width .4s ease}
.prog-pct{font-size:0.68rem;font-weight:800;min-width:28px;text-align:right}
.grup-item-right{display:flex;align-items:center;justify-content:center;}
.grup-chevron{width:26px;height:26px;border-radius:8px;background:var(--bg);display:flex;align-items:center;justify-content:center}
.grup-chevron svg{width:14px;height:14px;stroke:var(--text3)}
.btn-del{
  padding:4px 10px;border-radius:var(--r-pill);background:rgba(255,59,48,.1);
  border:1px solid rgba(255,59,48,.2);font-size:0.65rem;font-weight:700;color:var(--red);
  cursor:pointer;transition:all .15s;white-space:nowrap
}
.btn-del:active{transform:scale(.95)}
/* 3-dot menu button on grup card */
.btn-more{
  display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:50%;
  background:transparent;border:none;
  cursor:pointer;color:var(--text3);
  -webkit-tap-highlight-color:transparent;flex-shrink:0;
}
.btn-more:active{background:var(--fill);}
.btn-more svg{width:20px;height:20px;}

/* Context menu popup */
/* iOS 26 Context Menu — dark material like reference image */
.ctx-menu{
  position:fixed;z-index:800;
  background:#2A2A2E;
  border-radius:14px;
  box-shadow:0 20px 60px rgba(0,0,0,.35),0 4px 16px rgba(0,0,0,.22),
             0 0 0 0.5px rgba(255,255,255,.08);
  overflow:hidden;min-width:200px;
  animation:ctxFadeIn .18s cubic-bezier(.4,0,.2,1);
}
body:not(.dark-mode) .ctx-menu{
  background:rgba(250,250,252,0.97);
  box-shadow:0 20px 60px rgba(0,0,0,.2),0 4px 16px rgba(0,0,0,.1),
             0 0 0 0.5px rgba(0,0,0,.06);
}
@keyframes ctxFadeIn{
  from{opacity:0;transform:scale(.88);}
  to{opacity:1;transform:scale(1);}
}
.ctx-backdrop{position:fixed;inset:0;z-index:799;background:transparent;}
.ctx-item{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;
  font-size:.9375rem;font-weight:400;
  color:#fff;
  cursor:pointer;border:none;background:transparent;
  width:100%;text-align:left;
  border-bottom:0.5px solid rgba(255,255,255,.08);
  -webkit-tap-highlight-color:transparent;
  font-family:-apple-system,'Plus Jakarta Sans',sans-serif;
  gap:10px;
}
body:not(.dark-mode) .ctx-item{color:var(--text);border-bottom-color:var(--border-soft);}
.ctx-item:last-child{border-bottom:none;}
.ctx-item:active{background:rgba(255,255,255,.08);}
body:not(.dark-mode) .ctx-item:active{background:var(--fill);}
.ctx-item.danger{color:#FF453A;}
body:not(.dark-mode) .ctx-item.danger{color:var(--red);}
.ctx-item svg{width:18px;height:18px;flex-shrink:0;stroke:rgba(255,255,255,.65);stroke-width:1.6;}
body:not(.dark-mode) .ctx-item svg{stroke:var(--text2);}
.ctx-item.danger svg{stroke:#FF453A;}
body:not(.dark-mode) .ctx-item.danger svg{stroke:var(--red);}

/* ─── SERVICE GRID ─── */
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:0 16px}
.svc-card{
  background:var(--white);border-radius:var(--r-sm);box-shadow:var(--shadow);
  padding:16px 8px 14px;display:flex;flex-direction:column;align-items:center;
  gap:8px;cursor:pointer;border:1.5px solid transparent;
  transition:all .18s;position:relative;text-align:center
}
.svc-card:hover{border-color:var(--teal-m);transform:translateY(-2px);box-shadow:var(--shadow2)}
.svc-card:active{transform:scale(.96)}
.svc-icon{
  width:52px;height:52px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
}
.svc-icon svg{width:26px;height:26px}
.svc-label{font-size:0.73rem;font-weight:700;color:var(--text);line-height:1.2}
.svc-pip{
  position:absolute;top:9px;right:9px;
  background:var(--coral);color:#fff;font-size:0.55rem;font-weight:800;
  width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center
}

/* ─── MEMBER LIST ─── */
.member-list{padding:0 16px}
/* Apple HIG: each row min 44pt, standard vertical padding 11px top/bottom */
.member-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:none;min-height:44px;position:relative;}
.member-row:not(:last-child)::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:0.5px;background:var(--border-soft);
}
.card .member-row:not(:last-child)::after{left:16px;right:16px;}
.mv-avatar{
  width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:0.875rem;font-weight:600;flex-shrink:0
}
/* Apple Subhead: 15pt, Semibold for primary text in list row */
.mv-name{font-weight:600;font-size:0.9375rem;letter-spacing:-0.15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Apple Caption 1: 12pt for secondary text */
.mv-sub{font-size:0.75rem;color:var(--text3);font-weight:400;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px;}

/* ─── IURAN ─── */
/* ─── IURAN LIST ──────────────────────────────────────
   Apple HIG: inset grouped table, rows 44pt min
   Separator: 0.5px, inset from leading edge
   Background: secondarySystemGroupedBackground
─────────────────────────────────────────────────── */
.iuran-row{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;
  padding:12px 16px;
  background:var(--card);
  border-radius:0;
  border-bottom:none;
  min-height:52px;  /* above 44pt HIG minimum */
  position:relative;
}
.iuran-row:not(:last-child)::after{
  content:'';position:absolute;bottom:0;left:16px;right:16px;height:0.5px;background:var(--border-soft);
}
/* First/last get rounded corners for inset-grouped look */
.iuran-list-card .iuran-row:first-child{border-radius:var(--r-sm) var(--r-sm) 0 0;}
.iuran-list-card .iuran-row:last-child{border-radius:0 0 var(--r-sm) var(--r-sm);}
.iuran-list-card .iuran-row:only-child{border-radius:var(--r-sm);}

/* ─── IURAN STATUS SELECTOR ─── */
/* Pill badge for viewer mode */
.iuran-status-pill{
  display:inline-block;padding:5px 12px;border-radius:100px;
  font-family:-apple-system,sans-serif;font-size:.8125rem;font-weight:500;
  flex-shrink:0;
}
.iuran-status-pill.lunas{background:rgba(26,175,108,.1);color:var(--teal);}
.iuran-status-pill.belum{background:rgba(255,59,48,.08);color:var(--red);}
.iuran-status-pill.kurang{background:rgba(255,149,0,.1);color:var(--amber);}
.dark-mode .iuran-status-pill.lunas{background:rgba(26,175,108,.18);}
.dark-mode .iuran-status-pill.belum{background:rgba(255,69,58,.15);}
.dark-mode .iuran-status-pill.kurang{background:rgba(255,159,10,.15);}

/* Select button — clean dropdown trigger */
.iuran-sel-wrap{position:relative;flex-shrink:0;}
.iuran-sel-btn{
  display:flex;align-items:center;gap:6px;
  padding:8px 12px;min-height:34px;min-width:90px;
  border-radius:8px;border:none;cursor:pointer;
  font-family:-apple-system,sans-serif;font-size:.875rem;font-weight:500;
  -webkit-tap-highlight-color:transparent;
  transition:opacity .1s;
}
.iuran-sel-btn:active{opacity:.6;}
.iuran-sel-btn span{flex:1;}
.iuran-sel-btn svg{flex-shrink:0;transition:transform .2s;}
/* Per status color */
.iuran-sel-btn.lunas{background:rgba(26,175,108,.1);color:var(--teal);}
.iuran-sel-btn.belum{background:rgba(255,59,48,.08);color:var(--red);}
.iuran-sel-btn.kurang{background:rgba(255,149,0,.1);color:#B87000;}
.dark-mode .iuran-sel-btn.lunas{background:rgba(26,175,108,.18);}
.dark-mode .iuran-sel-btn.belum{background:rgba(255,69,58,.15);}
.dark-mode .iuran-sel-btn.kurang{background:rgba(255,159,10,.15);color:var(--amber);}

/* Floating dropdown panel */
.iuran-dropdown-panel{
  position:fixed;z-index:600;
  background:var(--bg2);
  border-radius:12px;
  box-shadow:0 6px 18px rgba(0,0,0,.12);
  overflow:hidden;min-width:140px;
  animation:dropFadeIn .15s cubic-bezier(.4,0,.2,1);
}
.dark-mode .iuran-dropdown-panel{
  background:#2C2C2E;
  box-shadow:0 6px 18px rgba(0,0,0,.4);
}
@keyframes dropFadeIn{from{opacity:0;transform:scale(.92) translateY(-4px)}to{opacity:1;transform:scale(1) translateY(0)}}
.iuran-drop-item{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;padding:13px 16px;min-height:44px;
  font-family:-apple-system,sans-serif;font-size:.9375rem;font-weight:400;
  color:var(--text);background:transparent;border:none;cursor:pointer;
  border-bottom:none;
  -webkit-tap-highlight-color:transparent;
  transition:background .08s;
  position:relative;
}
.iuran-drop-item:not(:last-child)::after{
  content:'';position:absolute;bottom:0;left:16px;right:16px;height:0.5px;background:var(--border-soft);
}
.iuran-drop-item:active{background:rgba(120,120,128,.1);}
.iuran-drop-item.active{color:var(--teal);font-weight:600;}
.iuran-drop-check{
  width:16px;height:16px;flex-shrink:0;
  stroke:var(--teal);stroke-width:2.5;fill:none;display:none;
}
.iuran-drop-item.active .iuran-drop-check{display:block;}

/* ─── STAT CARDS ─── */
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:0 16px;margin-bottom:16px}
.stat-card{border-radius:var(--r-sm);padding:12px 10px;text-align:center;}
.stat-lunas{background:rgba(40,205,65,.1);}
.dark-mode .stat-lunas{background:rgba(48,209,88,.12);}
.stat-belum{background:rgba(255,59,48,.08);}
.dark-mode .stat-belum{background:rgba(255,69,58,.12);}
.stat-kurang{background:rgba(255,149,0,.1);}
.dark-mode .stat-kurang{background:rgba(255,159,10,.12);}
.stat-lunas .stat-num{color:var(--green);}
.stat-belum .stat-num{color:var(--red);}
.stat-kurang .stat-num{color:var(--amber);}
/* Title 2 (22pt) for stat numbers — prominent but below Large Title in hierarchy */
.stat-num{font-size:1.375rem;font-weight:700;line-height:1;letter-spacing:-0.3px}
/* Caption 2 (11pt) for stat labels — NEVER go below 11pt per Apple HIG */
.stat-lbl{font-size:0.6875rem;font-weight:500;color:var(--text3);margin-top:4px;text-transform:uppercase;letter-spacing:.05em}

/* ─── WINNER ITEM ─── */
.winner-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:none;min-height:44px;position:relative;}
.winner-row:not(:last-child)::after{
  content:'';position:absolute;bottom:0;left:16px;right:16px;height:0.5px;background:var(--border-soft);
}
.winner-badge{
  width:32px;height:32px;border-radius:var(--r-xs);
  background:var(--teal-l);display:flex;align-items:center;justify-content:center;
  font-size:0.7rem;font-weight:800;color:var(--teal-d);flex-shrink:0
}

/* ─── WHEEL ─── */
#wheelContainer{position:relative;width:min(258px,76vw);height:min(258px,76vw);margin:12px auto 22px}
#wheelCanvas{width:100%;height:100%;border-radius:50%;will-change:transform;box-shadow:0 6px 20px rgba(0,0,0,.1);}
#wheelPtr{
  position:absolute;top:-16px;left:50%;transform:translateX(-50%);
  z-index:10;line-height:1;
}

/* ─── PROGRESS (generic) ─── */
.prog-strip{height:4px;background:var(--fill2);border-radius:var(--r-pill);overflow:hidden;margin:8px 0;}
.prog-strip-fill{height:100%;border-radius:var(--r-pill);background:var(--teal);transition:width .4s ease}

/* ─── PWA BANNER ─── */
#pwa-banner{position:fixed;bottom:0;left:0;right:0;z-index:9990;padding:0 12px calc(env(safe-area-inset-bottom)+72px);pointer-events:none}
#pwa-banner.show{pointer-events:all}
.pwa-card{background:var(--white);border-radius:20px;box-shadow:0 -4px 32px rgba(0,0,0,.13);border:1px solid var(--border);border-bottom:3px solid var(--teal);padding:16px 16px 18px;transform:translateY(calc(100% + 80px));transition:transform .4s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;gap:12px}
#pwa-banner.show .pwa-card{transform:translateY(0)}
.pwa-top{display:flex;align-items:center;gap:12px}
.pwa-ico{width:48px;height:48px;border-radius:13px;flex-shrink:0;background:linear-gradient(135deg,var(--teal),var(--teal-d));display:flex;align-items:center;justify-content:center;font-size:1.4rem;box-shadow:0 3px 10px rgba(26,175,108,.3)}
.pwa-name{font-weight:800;font-size:0.9rem;color:var(--text)}
.pwa-sub{font-size:0.72rem;color:var(--text2);margin-top:2px;font-weight:500}
.pwa-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pwa-btn-ok{background:var(--teal);color:#fff;border:none;border-radius:var(--r-pill);padding:10px 14px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:0.8rem;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:5px;transition:transform .12s,background .12s;box-shadow:0 3px 10px rgba(26,175,108,.28)}
.pwa-btn-ok:active{transform:scale(.96);background:var(--teal-d)}
.pwa-btn-skip{background:var(--bg);color:var(--text2);border:1.5px solid var(--border);border-radius:var(--r-pill);padding:10px 14px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:0.8rem;cursor:pointer;transition:background .12s}
.pwa-btn-skip:active{background:var(--fill2)}
.pwa-ios-steps{display:none;flex-direction:column;gap:7px;background:var(--teal-l);border:1px solid var(--teal-m);border-radius:12px;padding:12px}
.pwa-ios-steps.show{display:flex}
.pwa-step{display:flex;align-items:flex-start;gap:8px;font-size:0.76rem;color:var(--text2);font-weight:500}
.pwa-step-n{width:19px;height:19px;border-radius:50%;background:var(--teal);color:#fff;font-size:0.6rem;font-weight:800;flex-shrink:0;display:flex;align-items:center;justify-content:center}


/* ─── WA BLAST ─── */
.wa-bubble{background:var(--card);border-radius:var(--r);padding:16px;margin-bottom:10px;box-shadow:var(--shadow-card);}
/* Subhead 15pt — primary title in a card */
.wa-bubble-title{font-weight:600;font-size:0.9375rem;color:var(--text);margin-bottom:10px;display:flex;align-items:center;gap:8px;letter-spacing:-0.15px;}
/* Footnote 13pt — preview / helper text */
.wa-preview-text{
  font-size:0.8125rem;   /* 13pt — Apple Footnote */
  color:var(--text2);
  line-height:1.47;      /* Apple Body line-height for readability */
  white-space:pre-line;
  max-height:100px;overflow-y:auto;
  background:var(--bg);border-radius:10px;
  padding:10px 12px;
}

/* ─── LAPORAN ROWS ─── */
.lap-row{display:flex;justify-content:space-between;align-items:center;padding:13px 0;border-bottom:none;font-size:.9375rem;min-height:44px;position:relative;}
.lap-row:not(:last-child)::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:0.5px;background:var(--border-soft);
}
.card .lap-row:not(:last-child)::after{left:16px;right:16px;}
.lap-lbl{color:var(--text2);font-weight:500}
.lap-val{font-weight:700}

/* ─── BADGES ─── */
.badge{display:inline-flex;align-items:center;padding:4px 10px;border-radius:var(--r-pill);font-size:.6875rem;font-weight:600;letter-spacing:.01em;}
.bdg-green{background:rgba(40,205,65,.12);color:#1AAF6C}
.dark-mode .bdg-green{background:rgba(48,209,88,.18);color:#30D158}
.bdg-red{background:rgba(255,59,48,.1);color:var(--red)}
.bdg-amber{background:rgba(255,149,0,.12);color:#CC7A00}
.dark-mode .bdg-amber{background:rgba(255,159,10,.15);color:var(--amber)}
.bdg-teal{background:rgba(26,175,108,.1);color:var(--teal-d)}
.bdg-muted{background:var(--fill);color:var(--text3);}

/* ─── RECEIPT ─── */
.receipt{background:var(--bg);border:1.5px dashed var(--border);border-radius:var(--r);padding:20px}
.receipt-hdr{text-align:center;padding-bottom:16px;margin-bottom:16px;border-bottom:1.5px dashed var(--border)}
.receipt-hdr h2{font-weight:800;font-size:1rem;margin:6px 0 3px}
.receipt-row{display:flex;justify-content:space-between;padding:7px 0;font-size:0.82rem;border-bottom:1px solid var(--border)}
.receipt-row:last-child{border-bottom:none}.receipt-row.b{font-weight:700}
.receipt-total{margin-top:12px;padding-top:12px;border-top:2px solid var(--teal);display:flex;justify-content:space-between;font-weight:800;font-size:1rem;color:var(--teal)}
.receipt-ftr{text-align:center;margin-top:14px;padding-top:14px;border-top:1.5px dashed var(--border);font-size:0.7rem;color:var(--text3)}
.receipt-winner{background:var(--teal-l);border:1.5px solid var(--teal-m);border-radius:var(--r-sm);padding:14px;text-align:center;margin:12px 0}
.receipt-winner .rname{font-weight:800;font-size:1.2rem;color:var(--teal-d)}

/* ─── CONFETTI ─── */
.confetti-piece{position:fixed;z-index:9999;pointer-events:none;animation:cfFall linear forwards}
@keyframes cfFall{0%{transform:translateY(-20px) rotate(0);opacity:1}100%{transform:translateY(100vh) rotate(720deg);opacity:0}}

/* ─── KEUANGAN SUB-TAB ─── */
.keu-segtab{
  display:flex;background:rgba(120,120,128,.1);
  border-radius:9px;padding:2px;gap:2px;
  margin-bottom:0;
}
.dark-mode .keu-segtab{background:rgba(120,120,128,.22);}
.keu-tab{
  flex:1;padding:8px 4px;min-height:32px;
  border-radius:7px;border:none;background:transparent;
  font-family:-apple-system,sans-serif;font-size:.9375rem;
  font-weight:400;color:var(--text2);cursor:pointer;
  transition:all .12s;-webkit-tap-highlight-color:transparent;
}
.keu-tab:active{opacity:.6;}
.keu-tab.active{
  background:#fff;color:var(--text);font-weight:600;
  box-shadow:0 1px 3px rgba(0,0,0,.12),0 0 0 0.5px rgba(0,0,0,.03);
}
.dark-mode .keu-tab.active{background:#3A3A3C;box-shadow:0 1px 3px rgba(0,0,0,.4);}

/* ─── SETTINGS BTN ─── */
.settings-btn{
  width:36px;height:36px;border-radius:50%;
  background:var(--fill);
  border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  -webkit-tap-highlight-color:transparent;
  transition:background .15s;
  flex-shrink:0;
  /* HIG 44pt tap target */
  padding:4px;margin:-4px;
}
.settings-btn svg{width:18px;height:18px;stroke:var(--teal);stroke-width:1.8;}
.settings-btn:active{background:var(--fill2);}

/* ─── MISC UTILITIES ─── */
.divider{height:0.5px;background:var(--border);margin:0 16px}
/* Calibrated spacing utilities (per Apple HIG 4pt grid) */
.mt-4{margin-top:4px}
.mt-8{margin-top:8px}
.mt-12{margin-top:12px}   /* was 10px — corrected to 12px */
.mt-16{margin-top:16px}
.mt-20{margin-top:20px}
.mb-4{margin-bottom:4px}
.mb-8{margin-bottom:8px}
.mb-12{margin-bottom:12px}
.mb-16{margin-bottom:16px}
.mb-20{margin-bottom:20px}
.px-20{padding-left:16px;padding-right:16px}
.row{display:flex;align-items:center}
.row-sb{display:flex;align-items:center;justify-content:space-between}

/* ─── APPLE INVITES SHARE MODAL ─── */
/* ═══ SHARE GRUP MODAL — Invitation Light Style ═══ */
.share-invite-modal{
  padding:0 0 max(28px,env(safe-area-inset-bottom))!important;
  overflow:hidden;
  border-radius:28px 28px 0 0 !important;
}
.share-invite-modal .modal-drag{margin-bottom:12px;}

/* ── Hero card (mirip invitation_light hero) ── */
.invite-card{
  position:relative;overflow:hidden;
  margin:8px var(--margin) 14px;
  border-radius:24px;
  height:230px;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  padding:0 20px 18px;
  box-shadow:0 12px 40px rgba(26,175,108,0.3),0 4px 16px rgba(0,0,0,0.1);
}
.invite-card-bg{
  position:absolute;inset:0;
  border-radius:inherit;
  background:linear-gradient(160deg, #d4f5e5 0%, #9ee8c8 30%, #5dc99a 65%, #1AAF6C 100%);
}
/* floating circles like invitation_light */
.invite-card-bg::before{
  content:'';position:absolute;
  width:160px;height:160px;border-radius:50%;
  background:rgba(255,255,255,0.22);
  top:-40px;right:-30px;
}
.invite-card-bg::after{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 25% 30%, rgba(255,255,255,0.2) 0%, transparent 50%),
    linear-gradient(to bottom, transparent 40%, rgba(255,255,255,0.65) 80%, rgba(255,255,255,0.92) 100%);
}
/* dark mode: flip to dark gradient */
.dark-mode .invite-card-bg{
  background:linear-gradient(160deg, #0d2e1e 0%, #0f3d28 40%, #0a3d52 100%);
}
.dark-mode .invite-card-bg::after{
  background:
    radial-gradient(ellipse at 25% 30%, rgba(26,175,108,0.25) 0%, transparent 50%),
    linear-gradient(to bottom, transparent 40%, rgba(10,20,15,0.7) 80%, rgba(10,20,15,0.95) 100%);
}

/* top row */
.invite-top-row{
  position:absolute;top:0;left:0;right:0;z-index:3;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px 0;
}
.invite-eyebrow{
  font-size:.68rem;font-weight:700;
  color:rgba(255,255,255,0.9);
  text-transform:uppercase;letter-spacing:.1em;
  background:rgba(255,255,255,0.2);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,0.3);
  border-radius:999px;padding:4px 12px;
}
.dark-mode .invite-eyebrow{
  background:rgba(26,175,108,0.25);
  border-color:rgba(26,175,108,0.4);
  color:rgba(255,255,255,0.9);
}
.invite-close{
  width:26px;height:26px;border-radius:50%;
  background:rgba(0,0,0,0.2);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:none;display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:#fff;-webkit-tap-highlight-color:transparent;
  transition:background .15s;
}
.invite-close:active{background:rgba(0,0,0,.45);}

/* center emoji art */
.invite-art{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-65%);z-index:2;
  font-size:3.2rem;
  filter:drop-shadow(0 6px 16px rgba(0,0,0,0.12));
  animation:invBounce 2.8s ease-in-out infinite;
}
@keyframes invBounce{0%,100%{transform:translate(-50%,-65%)}50%{transform:translate(-50%,-72%)}}

/* avatar stack */
.invite-avatars{
  position:relative;z-index:3;
  display:flex;margin-bottom:6px;
  align-self:flex-start;
}
.invite-av{
  width:28px;height:28px;border-radius:50%;
  border:2px solid rgba(255,255,255,0.9);
  background:var(--teal);color:#fff;
  font-size:.7rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  margin-left:-7px;
}
.invite-av:first-child{margin-left:0}
.invite-av-more{
  background:rgba(255,255,255,0.85);
  color:var(--teal-d);font-size:.6rem;
}
.dark-mode .invite-av-more{background:rgba(30,50,40,0.85);color:var(--teal-m)}

/* avatar */
.invite-avatar{display:none}/* hidden — replaced by art + avatars */

/* group name */
.invite-group-name{
  position:relative;z-index:3;
  font-size:1.35rem;font-weight:800;
  color:var(--text);
  text-align:left;align-self:flex-start;
  letter-spacing:-0.02em;line-height:1.15;
  margin-bottom:2px;
}
.dark-mode .invite-group-name{color:#fff}
.invite-meta{
  position:relative;z-index:3;
  font-size:.78rem;font-weight:500;
  color:var(--text2);align-self:flex-start;
}
.dark-mode .invite-meta{color:rgba(255,255,255,0.7)}

/* tag pill */
.invite-tag-row{display:none}/* hidden — moved below card */

/* ── Link row ── */
.invite-link-row{
  display:flex;align-items:center;gap:10px;
  margin:0 var(--margin) 4px;
  background:var(--bg);
  border:1px solid var(--border-soft);
  border-radius:14px;padding:10px 14px;
}
.dark-mode .invite-link-row{background:var(--bg2);border-color:var(--border);}
.invite-link-text{
  flex:1;font-size:.72rem;color:var(--text2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;
}
.invite-link-copy{
  width:32px;height:32px;flex-shrink:0;
  background:var(--teal-l);border:none;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--teal);
  -webkit-tap-highlight-color:transparent;
  transition:opacity .15s;
}
.invite-link-copy:active{opacity:.55;}
.dark-mode .invite-link-copy{background:var(--teal-m);color:var(--teal-d)}

/* floating dots */
@keyframes invDot{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(-7px);opacity:1}}

/* ─── DELETE CONFIRMATION SHEET ─── */
.konfirm-modal{padding:0 16px max(32px,env(safe-area-inset-bottom,0px)) !important;text-align:center;}
.konfirm-icon-wrap{display:flex;justify-content:center;padding:24px 0 16px;}
.konfirm-icon-bg{
  width:64px;height:64px;border-radius:18px;
  background:rgba(255,59,48,.1);
  display:flex;align-items:center;justify-content:center;
}
.dark-mode .konfirm-icon-bg{background:rgba(255,69,58,.15);}
.konfirm-body{padding:0 0 24px;}
.konfirm-title{font-size:1.25rem;font-weight:700;color:var(--text);margin-bottom:8px;font-family:-apple-system,sans-serif;letter-spacing:-.02em;}
.konfirm-msg{font-size:.9375rem;color:var(--text2);line-height:1.5;font-family:-apple-system,sans-serif;}
.konfirm-msg strong{color:var(--text);font-weight:600;}
.konfirm-actions{display:flex;gap:14px;padding-bottom:8px;padding-left:4px;padding-right:4px;}
.konfirm-btn-cancel,.konfirm-btn-delete{
  flex:1;height:50px;border-radius:999px;border:none;
  font-family:-apple-system,sans-serif;font-size:1rem;font-weight:600;cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:opacity .1s,transform .1s;
}
.konfirm-btn-cancel:active,.konfirm-btn-delete:active{opacity:.7;transform:scale(.97);}
.konfirm-btn-cancel{background:rgba(120,120,128,.12);color:var(--text);}
.dark-mode .konfirm-btn-cancel{background:rgba(120,120,128,.24);}
.konfirm-btn-delete{background:rgba(255,59,48,.1);color:var(--red);}
.dark-mode .konfirm-btn-delete{background:rgba(255,69,58,.18);}

/* ─── AUTH SCREEN ─── */
#authScreen{
  position:fixed;inset:0;z-index:9500;
  background:var(--bg);
  flex-direction:column;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  display:none;
}
#authScreen.show{display:flex!important;}
#authScreen.hidden{display:none!important;}

/*
  ── Unified Navigation Bar — SAME SPEC as .profile-header ──
  Both Profile and Auth screens use the exact same nav bar layout.
  This is critical for visual harmony across page transitions.
  Apple HIG: status bar + 44pt nav bar area
*/
.auth-nav-bar {
  /* Identical to .profile-header */
  position: sticky;
  top: 0;
  z-index: 10;
  height: calc(44px + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  display: flex;
  align-items: center;
  padding-left: 4px;   /* Same as profile-header: 4px + button width = ~16px from edge */
  padding-right: 16px;
  flex-shrink: 0;
  background: var(--bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
/* Identical to .profile-back */
.auth-back-top {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--teal);
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}
.auth-back-top svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 2.2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.auth-back-top:active { background: var(--fill); }

/* ── Centered hero content — 16px layout margin matches HIG ── */
.auth-hero-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 16px 28px; /* 16px = Apple layout margin */
  text-align: center;
}
.auth-logo-wrap {
  margin-bottom: 16px;
}
.auth-logo-wrap img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  border-radius: 18px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
}
.auth-title {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.025em;
}
.auth-subtitle {
  font-size: 0.875rem;
  color: var(--text2);
  margin-top: 6px;
  font-weight: 400;
}

/* ── Gradient hero di atas ── */
.auth-hero{
  background:linear-gradient(160deg,#1AAF6C 0%,#0E9F8E 60%,#007AFF 100%);
  padding:60px 24px 48px;
  display:flex;flex-direction:column;align-items:center;
  position:relative;overflow:hidden;flex-shrink:0;
}
.auth-hero::before{
  content:'';position:absolute;
  width:220px;height:220px;border-radius:50%;
  background:rgba(255,255,255,.08);
  top:-60px;right:-40px;
}
.auth-hero::after{
  content:'';position:absolute;
  width:140px;height:140px;border-radius:50%;
  background:rgba(255,255,255,.06);
  bottom:-30px;left:-20px;
}
.auth-hero-logo{
  width:68px;height:68px;border-radius:20px;
  background:rgba(255,255,255,.2);
  backdrop-filter:blur(10px);
  display:flex;align-items:center;justify-content:center;
  font-size:2rem;margin-bottom:16px;
  box-shadow:0 8px 24px rgba(0,0,0,.15);
  position:relative;z-index:1;
}
.auth-hero-title{
  font-size:1.75rem;font-weight:800;color:#fff;
  text-align:center;letter-spacing:-.03em;
  margin-bottom:6px;position:relative;z-index:1;
}
.auth-hero-sub{
  font-size:.875rem;color:rgba(255,255,255,.8);
  text-align:center;position:relative;z-index:1;
}

/* ── Card putih ── */
.auth-card{
  flex:1;background:var(--bg2);
  border-radius:28px 28px 0 0;
  margin-top:-20px;
  padding:28px 24px 40px;
  position:relative;z-index:2;
}

/* ── Tabs ── */
.auth-tabs{
  display:flex;gap:2px;
  background:var(--fill);
  border-radius:14px;padding:3px;
  margin-bottom:24px;
}
.auth-tab{
  flex:1;padding:10px;border:none;
  background:transparent;border-radius:12px;
  font-size:.9rem;font-weight:700;
  color:var(--text2);cursor:pointer;
  transition:all .18s;
  font-family:'Plus Jakarta Sans',sans-serif;
  letter-spacing:-.01em;
}
.auth-tab.active{
  background:var(--bg2);color:var(--text);
  box-shadow:0 2px 8px rgba(0,0,0,.1);
}

/* ── Panel transitions ── */
.auth-panel{animation:authFadeIn .22s ease;}
@keyframes authFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ── Field ── */
.auth-field{margin-bottom:16px}
.auth-field label{
  display:block;font-size:.72rem;font-weight:700;
  color:var(--text2);margin-bottom:7px;
  text-transform:uppercase;letter-spacing:.05em;
}
.auth-input{
  width:100%;padding:14px 16px;
  border:1.5px solid var(--border);
  border-radius:14px;background:var(--bg);
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:.9375rem;color:var(--text);
  outline:none;
  transition:border-color .15s,box-shadow .15s,background .15s;
  box-sizing:border-box;
  -webkit-appearance:none;
}
.auth-input:focus{
  border-color:var(--teal);
  box-shadow:0 0 0 3.5px rgba(26,175,108,.14);
  background:var(--bg2);
}
.auth-input::placeholder{color:var(--text3)}
.dark-mode .auth-input{background:var(--bg3);}
.dark-mode .auth-input:focus{background:var(--bg2);}

/* Password wrapper dengan show/hide toggle */
.auth-pass-wrap{position:relative}
.auth-pass-wrap .auth-input{padding-right:48px}
.auth-pass-eye{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  background:none;border:none;cursor:pointer;
  color:var(--text3);padding:4px;
  display:flex;align-items:center;
}
.auth-pass-eye svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.8;fill:none}

/* ── Forgot link ── */
.auth-forgot{
  text-align:right;margin-top:-8px;margin-bottom:16px;
}
.auth-link{
  background:none;border:none;
  color:var(--teal);font-size:.85rem;font-weight:600;
  cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;
  padding:2px 0;-webkit-tap-highlight-color:transparent;
}

/* ── Tombol utama ── */
.auth-btn-primary{
  width:100%;padding:16px;border:none;
  border-radius:var(--r-pill);
  background:linear-gradient(160deg,#22D477,#1AAF6C);
  color:#fff;font-size:1rem;font-weight:700;
  cursor:pointer;margin-top:4px;
  font-family:'Plus Jakarta Sans',sans-serif;
  box-shadow:0 6px 20px rgba(26,175,108,.4);
  transition:transform .12s,box-shadow .12s,opacity .12s;
  letter-spacing:-.01em;
  -webkit-tap-highlight-color:transparent;
}
.auth-btn-primary:active{transform:scale(.97);box-shadow:0 2px 8px rgba(26,175,108,.2);}
.auth-btn-primary:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}

/* ── Error / success alert ── */
.auth-alert{
  border-radius:12px;padding:12px 14px;
  font-size:.825rem;font-weight:500;
  margin-bottom:16px;display:none;
  line-height:1.4;
}
.auth-alert.show{display:block}
.auth-alert.error{
  background:rgba(255,59,48,.08);
  border:1px solid rgba(255,59,48,.18);
  color:var(--red);
}
.auth-alert.success{
  background:rgba(40,205,65,.08);
  border:1px solid rgba(40,205,65,.2);
  color:var(--green);
}

/* ── Divider ── */
.auth-divider{
  display:flex;align-items:center;gap:10px;
  margin:20px 0;
}
.auth-divider::before,.auth-divider::after{
  content:'';flex:1;height:1px;background:var(--border);
}
.auth-divider span{font-size:.75rem;color:var(--text3);font-weight:500}

/* ── Back link ── */
.auth-back{
  display:flex;align-items:center;gap:6px;
  background:none;border:none;
  color:var(--text2);font-size:.875rem;font-weight:600;
  cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;
  margin-bottom:20px;padding:0;
  -webkit-tap-highlight-color:transparent;
}
.auth-back svg{width:16px;height:16px;stroke:currentColor;stroke-width:2.5;fill:none}

/* ── User chip di header ── */
.hdr-user-chip{
  width:32px;height:32px;border-radius:50%;
  background:linear-gradient(135deg,var(--teal),var(--teal-d));
  display:flex;align-items:center;justify-content:center;
  font-size:.75rem;font-weight:800;color:#fff;
  cursor:pointer;border:none;flex-shrink:0;
  -webkit-tap-highlight-color:transparent;
}

/* ── User bar di hero banner ── */
.hero-user-bar{
  display:flex;align-items:center;gap:10px;
  margin-bottom:10px;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.hero-user-avatar{
  width:36px;height:36px;border-radius:50%;flex-shrink:0;
  background:rgba(255,255,255,.25);
  border:2px solid rgba(255,255,255,.5);
  display:flex;align-items:center;justify-content:center;
  font-size:.9rem;font-weight:800;color:#fff;
  overflow:hidden;
}
.hero-user-avatar img{width:100%;height:100%;object-fit:cover;}
.hero-user-info{flex:1;min-width:0;}
.hero-user-name{
  font-size:.82rem;font-weight:700;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.hero-user-status{
  font-size:.68rem;color:rgba(255,255,255,.7);
  display:flex;align-items:center;gap:4px;
}
.hero-user-status .dot{
  width:6px;height:6px;border-radius:50%;
  background:#4ade80;flex-shrink:0;
}
.hero-user-chevron{
  width:16px;height:16px;stroke:rgba(255,255,255,.6);
  stroke-width:2.5;fill:none;flex-shrink:0;
}

/* ── User Bottom Sheet ── */
.user-sheet-overlay{
  position:fixed;inset:0;z-index:2000;
  background:rgba(0,0,0,.45);
  display:flex;align-items:flex-end;justify-content:center;
  opacity:0;pointer-events:none;
  transition:opacity .22s ease;
}
.user-sheet-overlay.open{opacity:1;pointer-events:all;}
.user-sheet{
  width:100%;max-width:600px;
  background:var(--bg2);
  border-radius:24px 24px 0 0;
  padding-bottom:calc(env(safe-area-inset-bottom)+16px);
  transform:translateY(100%);
  transition:transform .3s cubic-bezier(.34,1.1,.64,1);
}
.user-sheet-overlay.open .user-sheet{transform:translateY(0);}
.user-sheet-drag{
  width:36px;height:4px;border-radius:4px;
  background:var(--border);margin:12px auto 0;
}
/* Header akun */
.user-sheet-head{
  display:flex;align-items:center;gap:14px;
  padding:20px 20px 16px;
  border-bottom:1px solid var(--border-soft);
}
.user-sheet-avatar{
  width:52px;height:52px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--teal),var(--teal-d));
  display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;font-weight:800;color:#fff;overflow:hidden;
}
.user-sheet-avatar img{width:100%;height:100%;object-fit:cover;}
.user-sheet-name{font-size:1rem;font-weight:700;color:var(--text);}
.user-sheet-email{font-size:.8rem;color:var(--text2);margin-top:2px;}
.user-sheet-badge{
  display:inline-flex;align-items:center;gap:4px;
  font-size:.65rem;font-weight:700;
  padding:3px 8px;border-radius:var(--r-pill);margin-top:4px;
}
.user-sheet-badge.verified{background:rgba(40,205,65,.1);color:var(--green);}
.user-sheet-badge.unverified{background:rgba(255,149,0,.1);color:var(--amber);}
/* Menu items */
.user-sheet-menu{padding:8px 0;}
.user-sheet-item{
  display:flex;align-items:center;gap:14px;
  padding:14px 20px;cursor:pointer;
  transition:background .1s;
  -webkit-tap-highlight-color:transparent;
}
.user-sheet-item:active{background:var(--fill);}
.user-sheet-item-ico{
  width:36px;height:36px;border-radius:10px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:1rem;
}
.user-sheet-item-text{flex:1;}
.user-sheet-item-title{font-size:.9375rem;font-weight:600;color:var(--text);}
.user-sheet-item-sub{font-size:.75rem;color:var(--text2);margin-top:1px;}
.user-sheet-item-arrow{
  width:14px;height:14px;stroke:var(--text3);
  stroke-width:2.5;fill:none;flex-shrink:0;
}
.user-sheet-sep{height:1px;background:var(--border-soft);margin:4px 0;}
.user-sheet-item.danger .user-sheet-item-title{color:var(--red);}
.user-sheet-item.danger .user-sheet-item-ico{background:rgba(255,59,48,.1);}


/* PROFILE SPECIFIC LAYOUT */
/* ══ BANNER — radius & margin matches index.html .hero-banner ══ */
.profile-banner{
  background:linear-gradient(135deg,#1AAF6C 0%,#0E9F8E 55%,#007AFF 100%);
  padding:10px 16px 22px;
  position:relative;overflow:hidden;
  margin:calc(var(--safe-top) + 16px) 20px 0;
  border-radius:var(--r); /* 16px — same as index.html */
  min-height:128px;
}
.b-blob{position:absolute;border-radius:50%;background:rgba(255,255,255,0.07);pointer-events:none;}
.b-blob-1{width:180px;height:180px;right:-50px;top:-50px;}
.b-blob-2{width:110px;height:110px;right:60px;bottom:-40px;}
.b-blob-3{width:70px;height:70px;left:30px;top:10px;background:rgba(255,255,255,0.04);}

/* ── Back button: plain chevron, no outline/label ── */
.banner-top{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:14px;position:relative;z-index:2;
}
.back-btn{
  width:44px;height:44px;margin:-6px;
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,0.92);text-decoration:none;
  -webkit-tap-highlight-color:transparent;
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
}
.back-btn svg{width:26px;height:26px;stroke:currentColor;stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.back-btn:active{opacity:0.55;}
.banner-title{font-size:15px;font-weight:700;color:rgba(255,255,255,0.95);letter-spacing:-0.01em;}

/* ── Profile row ── */
.profile-row{display:flex;align-items:center;gap:14px;position:relative;z-index:2;}
.avatar-ring{
  width:64px;height:64px;border-radius:50%;
  border:2.5px solid rgba(255,255,255,0.5);padding:2px;flex-shrink:0;
  cursor:pointer;transition:transform .2s;-webkit-tap-highlight-color:transparent;
}
.avatar-ring:active{transform:scale(0.96);}
.avatar-inner{
  width:100%;height:100%;border-radius:50%;
  background:rgba(255,255,255,0.2);
  display:flex;align-items:center;justify-content:center;
  font-size:20px;font-weight:800;color:#fff;overflow:hidden;
}
.avatar-inner img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.profile-meta{flex:1;min-width:0;}
.profile-name{font-size:19px;font-weight:800;color:#fff;line-height:1.15;letter-spacing:-0.3px;}
.profile-email{font-size:12px;color:rgba(255,255,255,0.65);margin-top:3px;}
.v-badge{
  display:inline-flex;align-items:center;gap:4px;
  font-size:.65rem;font-weight:700;
  padding:3px 8px;border-radius:var(--r-pill);margin-top:5px;
}
.v-badge.warn{background:rgba(255,149,0,0.22);color:#FFCC00;}
.v-badge.ok{background:rgba(48,209,88,0.22);color:#30D158;}


/* ══ SECTIONS ══ */
.section{padding:20px 20px 0;}
/* Apple HIG section header */
.sec-label{
  font-size:.6875rem;font-weight:400;
  text-transform:uppercase;letter-spacing:.04em;
  color:var(--text3);padding:0 4px 8px;
}
.menu-card{
  background:var(--card);border-radius:var(--r);
  overflow:hidden;border:0.5px solid var(--border-soft);
  box-shadow:var(--shadow-card);
}
/* Apple HIG: 44pt min tap target */
.menu-item{
  display:flex;align-items:center;gap:12px;
  padding:12px 16px;min-height:44px;
  cursor:pointer;position:relative;transition:background .15s;
  -webkit-tap-highlight-color:transparent;
  border:none;background:transparent;
  width:100%;text-align:left;font-family:inherit;
}
.menu-item:not(:last-child)::after{
  content:'';position:absolute;bottom:0;left:58px;right:0;
  height:0.5px;background:var(--border-soft);
}
.menu-item:active{background:var(--fill);}
/* Apple HIG: 30×30 icon cell, 7px radius */
.mico{
  width:30px;height:30px;border-radius:7px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.ic-g{background:rgba(26,175,108,0.12);color:var(--teal);}
.ic-t{background:rgba(26,175,108,0.10);color:var(--teal-d);}
.ic-a{background:rgba(255,159,10,0.12);color:var(--amber);}
.ic-b{background:rgba(0,122,255,0.10);color:var(--blue);}
.ic-r{background:rgba(255,59,48,0.10);color:var(--red);}
.mcont{flex:1;min-width:0;}
.mtitle{font-size:15px;font-weight:500;color:var(--text);letter-spacing:-0.01em;}
.msub{font-size:12px;color:var(--text2);margin-top:1px;}
.mchev{flex-shrink:0;color:var(--text3);}

/* ─── PREMIUM PROFILE PAGE ─── */
#page-profile {
  background: var(--bg);
}

/*
  Apple HIG Navigation Bar:
  • Status Bar:  env(safe-area-inset-top)  ≈ 47-54px on modern iPhone
  • Nav Bar area: 44px                   (always 44pt per HIG)
  • Total sticky header = safe-area + 44px
  • Back button: 44×44pt tap target, 16px from left edge
  • Layout margin: 16px (sides)
*/
.profile-header {
  position: sticky;
  top: 0;
  z-index: 100;
  /* EXACT same formula as auth-nav-bar */
  height: calc(44px + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  display: flex;
  align-items: center;
  padding-left: 4px;       /* 4px container + 12px button = 16px from edge */
  padding-right: 16px;
  background: var(--bg);
  transition:background 0s !important;
}
.dark-mode .profile-header {
  background: var(--bg);
}
/* Apple HIG: 44×44pt minimum tap target for navigation buttons */
.profile-back {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--teal);
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}
.profile-back svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 2.2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.profile-back:active { background: var(--fill); }
.profile-title {
  display: none;
}

/* Profile content — starts immediately below the nav bar */
.profile-content {
  /*
    Apple HIG: content starts at top of page body (below nav bar)
    16px layout margins on sides
    Bottom padding: tab bar (83px) + home indicator (21px) + extra = 120px
  */
  padding: 20px 16px 120px;
}

/*
  Profile User Card — Apple Settings pattern:
  Avatar: 60pt, text: Name (17pt Headline), subtitle (12pt Caption)
  Row height: ~72px, 16px horizontal inset
*/
.profile-user-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 4px;   /* 14px vertical — matches Apple Settings user cell height */
  margin-bottom: 8px;  /* Tight gap before section separator line */
  cursor: pointer;
  transition: opacity .12s;
  -webkit-tap-highlight-color: transparent;
  border-radius: var(--r);
}
.profile-user-card:active {
  opacity: 0.65;
}
/*
  Avatar: 60pt circle — Apple Settings avatar size
  Font-size for initial: 24px (40% of 60px)
*/
.profile-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--teal), var(--teal-d));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;   /* 24px initial inside 60px circle */
  font-weight: 700;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(26, 175, 108, 0.25);
  overflow: hidden;
}
.profile-user-info {
  flex: 1;
  min-width: 0;
}
/*
  Apple Settings: Name = Headline (17pt, medium weight)
  not bold-800 — Settings uses 400-500 weight for name
*/
.profile-name {
  font-size: 1.0625rem;   /* 17pt — Apple Headline */
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0;
  letter-spacing: -0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.profile-email {
  font-size: 0.75rem;     /* 12pt — Apple Caption 1 */
  color: var(--text3);
  font-weight: 400;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/*
  Profile Menu — Apple Inset Grouped Table View
  Each section: rounded card on --bg background, 0.5px border
  Row height: 44pt minimum per HIG
  Section label: 11pt, uppercase, text3 — appears ABOVE the card
*/
.profile-menu {
  display: flex;
  flex-direction: column;
  background: var(--border-soft);
  border-radius: var(--r-sm);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  margin-bottom: 0;
}
.menu-label {
  /* Apple section header: 11pt all-caps, appears above the group card */
  padding: 20px 4px 6px; /* 20px from previous content, 4px left matches left inset */
  font-size: 0.6875rem;   /* 11pt — Apple section header */
  font-weight: 400;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: transparent; /* label is NOT inside the card */
}
.profile-menu .menu-item {
  background: var(--card);
  padding: 13px 16px;   /* 16px = Apple HIG layout margin */
  display: flex;
  align-items: center;
  gap: 14px;
  border: none;
  cursor: pointer;
  transition: background 0.12s;
  width: 100%;
  text-align: left;
  font-family: inherit;
  min-height: 44px;     /* Apple HIG: 44pt minimum tap target */
}
.profile-menu .menu-item:active {
  background: var(--fill);
}
/*
  Menu icon cell: 30×30px per Apple HIG icon grid (radius 7px)
  Slightly larger than generic at 38px — we align with standard Settings app
*/
.menu-ico {
  width: 30px;
  height: 30px;
  border-radius: 7px;   /* Apple icon mask radius for 30pt icons */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.menu-ico svg {
  width: 17px;          /* Icon at ~56% cell size per Apple HIG spec */
  height: 17px;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
}
/*
  Menu text: Headline 17pt, weight 400 (not bold)
  Apple Settings uses regular weight, not heavy for list items
*/
.menu-text {
  flex: 1;
  font-size: 1.0625rem; /* 17pt — Apple Headline */
  font-weight: 400;
  color: var(--text);
  letter-spacing: -0.2px;
}
/* Disclosure indicator: chevron.right, 8px wide — Apple secondary color */
.menu-chevron {
  width: 15px;
  height: 15px;
  stroke: var(--text3);
  stroke-width: 2.5;
  fill: none;
  flex-shrink: 0;
}
.menu-item.danger .menu-text {
  color: var(--red);
}

.v-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  margin-top: 10px;
}
.v-badge.warn {
  background: rgba(255, 149, 0, 0.1);
  color: #CC7A00;
}
.dark-mode .profile-header {
  background: rgba(28, 28, 30, 0.85);
}