:root {
  --pink-a: #3FCDA0; --pink-b: #22A67D; --wine: #8B7CF6; --wine-dark: #6B5CE0;
  --outer-top: #FAFAFC; --outer-bot: #F0F0F6;
  --green-top: #3FCDA0; --green-bot: #22A67D; --panel: #FFFFFF; --panel-line: rgba(139,124,246,0.16);
  --ink: #6B5CE0; --ink-soft: #8B7CF6; --text-dark: #26243A; --text-muted: #8E8CA3;
  --sage-a: #3FCDA0; --sage-b: #22A67D;
  --orange: #FF9F5A; --pink-accent: #FF6B6B;
  --gold: #FF9F5A;
  --shadow: 0 16px 32px -16px rgba(38,36,58,0.2);
  --font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-padding-top: env(safe-area-inset-top, 0px); }
body {
  margin:0; font-family: var(--font); color: var(--text-dark); line-height:1.5;
  padding-top: env(safe-area-inset-top,0px); padding-bottom: env(safe-area-inset-bottom,0px);
  min-height:100vh;
  background: linear-gradient(180deg, var(--outer-top) 0%, var(--outer-bot) 100%);
  background-attachment: fixed;
}
h1,h2,h3 { font-family: var(--font); margin:0; }
a { color: inherit; }
.wrap { max-width: 480px; margin:0 auto; min-height:100vh; display:flex; flex-direction:column; }
.datebar { background: linear-gradient(90deg, var(--pink-a), var(--pink-b)); color:#fff; font-weight:600; font-size:13px;
  padding: 12px 20px; text-align:right; border-radius: 0 0 18px 18px; }
.content { padding: 20px 18px 90px; flex:1; }
.topnav { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.backbtn, .gearbtn { background: #fff; border:none; color: var(--wine); width:36px; height:36px; border-radius:50%;
  font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center; text-decoration:none; box-shadow: 0 6px 14px -8px rgba(38,36,58,.18); }
h1.page-title { color: var(--text-dark); font-weight:800; font-size:34px; text-align:center; margin: 6px 0 20px; }

.hero-card { background: linear-gradient(330deg, #8b71ff, #b6a7ff); border-radius:24px; padding:20px 18px 4px; box-shadow: 0 16px 30px -14px rgba(34,166,125,0.45); }

.poster { width:100%; aspect-ratio: 3/2; border-radius:18px; margin: 4px 0 18px; color:#fff;
  background: rgba(255,255,255,0.2);
  display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.poster .moon { font-size:64px; }
.poster .sparkle { position:absolute; font-size:20px; opacity:.7; }
.poster-image-wrap { display:flex; justify-content:center; margin: 6px 0 18px; }
.poster-image { max-width: 230px; width:58%; border-radius: 6px; display:block; }
.eyebrow-label { color: rgba(255,255,255,0.9); font-weight:600; font-size:14px; }
.event-h1 { color:#fff; font-weight:800; font-size:32px; line-height:1.12; margin: 4px 0 12px; }
.ustadz-line { color: rgba(255,255,255,0.9); font-weight:600; font-size:15.5px; margin-bottom:10px; }
.meta-line { color: rgba(255,255,255,0.8); font-size:13px; margin-bottom:2px; }

.pink-stat { background: #fff; border-radius:18px; padding:14px 16px;
  display:flex; align-items:center; gap:12px; margin: 20px 0 14px; box-shadow: var(--shadow); }
.pink-stat .silhouette { font-size:40px; flex:none; }
.pink-stat .silhouette-img { width:52px; height:52px; object-fit:contain; flex:none; border-radius:50%; background: rgba(139,124,246,0.12); padding:4px; }
.pink-stat .stat-body { flex:1; }
.pink-stat .stat-label { color: var(--text-muted); font-size:12px; }
.pink-stat .stat-num { color: var(--text-dark); font-weight:800; font-size:28px; line-height:1; }
.pink-stat .stat-num small { font-size:14px; font-weight:600; margin-left:4px; color: var(--text-muted); }
.pill-btn { background: var(--orange); color: #fff; border:none; border-radius:999px; padding:9px 16px; font-weight:700;
  font-size:12.5px; cursor:pointer; white-space:nowrap; text-decoration:none; }

.wine-btn { display:flex; align-items:center; gap:12px; width:100%; background: linear-gradient(120deg, var(--sage-a), var(--sage-b)); color:#fff;
  border:none; border-radius:16px; padding:16px 18px; font-family:var(--font); font-weight:700; font-size:17px; cursor:pointer;  }
.wine-btn .check { width:26px; height:26px; border-radius:50%; background:#fff; color: var(--sage-b); display:flex; align-items:center; justify-content:center; font-size:14px; flex:none; }
.outline-btn { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; background:#fff; border:2px solid var(--wine); color: var(--wine); border-radius:16px; padding:14px 18px; font-family:var(--font); font-weight:700; font-size:15.5px; text-decoration:none; margin-top:12px; box-shadow: 0 10px 20px -16px rgba(139,124,246,0.4); }
.outline-btn:active { transform: scale(0.98); }
.btn-row { display:flex; gap:10px; margin-top:18px; }
.wine-btn-half { width:auto; flex:1; padding:14px 10px; font-size:14.5px; }
.wine-btn.orange-btn { background: linear-gradient(120deg, #f35584, #e0274f);  }
.wine-btn.orange-btn .check { color: #E8823A; }
.btn-row .reg-btn, .btn-row .copy-btn { flex:1; display:flex; align-items:center; justify-content:center; gap:7px; text-align:center; font-family:var(--font); font-weight:700; font-size:13.5px; padding:13px 10px; border-radius:14px; text-decoration:none; cursor:pointer; border:none; }
.btn-row .reg-btn { background: linear-gradient(120deg, #bcf5d9, #acf8d3);
    color: #007a3f; }
.btn-row .copy-btn { background: linear-gradient(120deg, #bcf5d9, #acf8d3);
    color: #007a3f;}
.btn-row button.copy-btn:active, .btn-row a.reg-btn:active { transform: scale(0.97); }

.panel { background: var(--panel); border-radius:18px; padding: 20px 18px; box-shadow: var(--shadow); }
.tabs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.tab-btn { flex:none; border:none; background: rgba(139,124,246,0.12); color: var(--ink); font-family:var(--font); font-weight:600; font-size:13px; padding:9px 14px; border-radius:999px; cursor:pointer; white-space:nowrap; }
.tab-btn.active { background: var(--wine); color:#fff; }
.tab-pane { display:none; }
.tab-pane.active { display:block; }
.panel h2 { font-size:17px; color: var(--ink); font-weight:700; margin-bottom:4px; }
.panel p.help { color: var(--text-muted); font-size:13.5px; margin: 0 0 16px; }
.green-pill-btn { width:100%; background: linear-gradient(120deg, #403fcd, #3a2fe3); color:#fff; border:none; border-radius:999px;
  padding:14px; font-family:var(--font); font-weight:600; font-size:15px; cursor:pointer; margin-bottom:16px; }
.field { margin-top:14px; }
.field label { display:block; font-size:12.5px; font-weight:600; color: var(--ink-soft); margin-bottom:6px; }
.field input, .field select { width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--panel-line); background:#fff; color:var(--text-dark); font-family:var(--font); font-size:15px; }
.field-input { width:100%; padding:14px; border-radius:12px; border:1px solid var(--panel-line); font-family:var(--font); font-size:15px; margin-bottom:10px; background:#fff; color:var(--text-dark); }
.btn { display:block; width:100%; text-align:center; border:none; cursor:pointer; font-family:var(--font); font-weight:700; font-size:15px;
  padding:14px; border-radius:999px; background: linear-gradient(120deg, var(--pink-a), var(--pink-b)); color:#fff; margin-top:18px; text-decoration:none; }
.btn.secondary { background: transparent; border:1px solid var(--panel-line); color: var(--ink); }
.btn.done { background: linear-gradient(120deg, var(--sage-a), var(--sage-b)); }
.btn.already-done { background: rgba(31,111,96,0.12); color: var(--sage-b); border:1px solid rgba(31,111,96,0.25); opacity:1; cursor:default; }

#qr-reader { width:100%; border-radius:14px; overflow:hidden; margin-bottom:16px; background:#000; min-height:220px; }

.stat-row { display:flex; gap:10px; margin-bottom:16px; }
.stat-card { flex:1; background: #fff; border:1px solid rgba(139,124,246,0.14); border-radius:16px; padding:12px 10px; color: var(--text-dark); box-shadow: 0 8px 18px -14px rgba(38,36,58,.15); }
.stat-card .stat-card-label { font-size:11px; color: var(--text-muted); margin-bottom:6px; }
.stat-card .stat-card-num { font-weight:800; font-size:22px; line-height:1; }
.stat-card .stat-card-sub { font-size:10.5px; color: var(--text-muted); font-weight:600; }
.stat-card.c1 { background: #DFF3E1; border: 2px solid #8FD0A0; color: #1D4A2A; }
.stat-card.c2 { background: #DCE6FA; border: 2px solid #7EA6F0; color: #1E3868; }
.stat-card.c3 { background: #FBF0D2; border: 2px solid #E8C766; color: #5C4712; }
.stat-card.c1 .stat-card-label, .stat-card.c1 .stat-card-sub { color: #3E6B4C; }
.stat-card.c2 .stat-card-label, .stat-card.c2 .stat-card-sub { color: #3E578F; }
.stat-card.c3 .stat-card-label, .stat-card.c3 .stat-card-sub { color: #8A6E2E; }
.stat-card.c1 .divider { background: rgba(29,74,42,0.18); }
.stat-card.c2 .divider { background: rgba(30,56,104,0.18); }
.stat-card.c3 .divider { background: rgba(92,71,18,0.18); }

.search-box { width:100%; padding:12px 14px 12px 40px; border-radius:12px; border:1px solid var(--panel-line); background:#fff; color:var(--text-dark); font-family:var(--font); font-size:14.5px; }
.search-wrap { position:relative; margin-bottom:14px; }
.search-icon { position:absolute; left:13px; top:50%; transform:translateY(-50%); color: var(--text-muted); pointer-events:none; }
.roster-list { display:flex; flex-direction:column; gap:8px; }
.roster-card { border:1px solid var(--panel-line); border-radius:14px; padding:11px 13px; background:#fff; }
.roster-card:nth-child(even) { background: rgba(139,124,246,0.05); }
.roster-card-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.roster-card-name { font-weight:700; font-size:14.5px; color: var(--text-dark); }
.roster-card-sub { font-size:12px; color: var(--text-muted); margin-top:3px; }
.roster-card-sub a { color: var(--ink-soft); font-weight:600; text-decoration:none; }
table.roster-table { width:100%; border-collapse:collapse; font-size:13px; }
table.roster-table th { text-align:left; font-size:11.5px; color: var(--ink-soft); font-weight:700; padding: 0 6px 8px; border-bottom:2px solid var(--gold); }
table.roster-table td { padding:10px 6px; border-bottom:1px solid var(--panel-line); vertical-align:top; }
.badge { font-size:10.5px; font-weight:700; padding:3px 8px; border-radius:999px; white-space:nowrap; }
.badge.hadir { background: rgba(34,166,125,0.14); color: #1F8A69; }
.badge.belum { background: rgba(255,107,107,0.14); color: #E85555; }
.pager { display:flex; justify-content:center; gap:6px; margin-top:14px; font-size:13px; }
.pager-link { text-decoration:none; font-weight:700; color: var(--ink-soft); padding:2px 8px; }
.pager-link.active { color: var(--wine); text-decoration:underline; }

.confirm-card { background:#fff; border-radius:16px; padding:20px; text-align:center; margin-bottom:8px; }
.confirm-card .reg-num { font-weight:800; font-size:26px; color: var(--wine); letter-spacing:0.5px; }
.confirm-card .name { font-weight:700; font-size:19px; margin-top:6px; }
.confirm-card .sub { color: var(--text-muted); font-size:13.5px; margin-top:2px; }
.qr-wrap { display:flex; justify-content:center; margin: 14px 0; }

.footer-org { text-align:center; color: var(--text-muted); font-weight:700; font-size:12.5px; padding: 10px 18px 22px; }
.toast { position: fixed; left:50%; bottom: calc(24px + env(safe-area-inset-bottom,0px)); transform: translateX(-50%) translateY(20px);
  background: var(--wine); color:#fff; padding:12px 20px; border-radius:999px; font-size:13.5px; box-shadow: var(--shadow);
  opacity:0; pointer-events:none; transition: opacity .25s ease, transform .25s ease; z-index:60; max-width:88vw; text-align:center; }
.toast.show { opacity:1; transform: translateX(-50%) translateY(0); }
.toast.warn { background: #E85555; }
.banner { border-radius:14px; padding:12px 16px; font-size:13px; margin-bottom:14px; }
.banner.warn { background: rgba(255,107,107,0.1); color: #E85555; border:1px solid rgba(255,107,107,0.3); }
.empty-note { color: var(--text-muted); font-size:14px; text-align:center; padding:10px 0; }

/* ===== Theme variants (affects the outer page background; the teal hero card stays teal) ===== */
:root[data-theme="dark"] {
  --outer-top: #1C1A2E; --outer-bot: #100E1C;
  --panel: #262340; --panel-line: rgba(255,255,255,0.1);
  --text-dark: #F0EFF7; --text-muted: #A6A3BE;
}
:root[data-theme="dark"] h1.page-title,
:root[data-theme="dark"] .footer-org,
:root[data-theme="dark"] .brand span { color: #fff; }
:root[data-theme="dark"] .outline-btn { background: transparent; border-color: rgba(255,255,255,0.5); color: #fff; }
:root[data-theme="dark"] .backbtn,
:root[data-theme="dark"] .gearbtn { background: rgba(255,255,255,0.14); color: #fff; box-shadow:none; }
:root[data-theme="dark"] .stat-card,
:root[data-theme="dark"] .pink-stat,
:root[data-theme="dark"] .confirm-card,
:root[data-theme="dark"] .search-box,
:root[data-theme="dark"] .field input,
:root[data-theme="dark"] .field select { background: #262340; border-color: rgba(255,255,255,0.12); color: #F0EFF7; }
:root[data-theme="dark"] .banner.warn { background: rgba(255,107,107,0.16); border-color: rgba(255,107,107,0.4); }

:root[data-theme="light"] {
  --outer-top: #FFFFFF; --outer-bot: #F7F7FB;
}