/* BBB SARVAGNA — Styles v6 — Mobile-first */
:root {
  --bg:#06090f;--surface:#0d1321;--card:#131b2e;--card-hover:#182240;
  --border:#1a2744;--border-hi:#243356;
  --accent:#e8a928;--accent-dark:#c48b1a;--accent-glow:rgba(232,169,40,.12);
  --green:#22c55e;--green-bg:rgba(34,197,94,.1);--green-border:rgba(34,197,94,.25);
  --red:#ef4444;--red-bg:rgba(239,68,68,.1);--red-border:rgba(239,68,68,.25);
  --blue:#3b82f6;--blue-bg:rgba(59,130,246,.1);
  --orange:#f97316;--orange-bg:rgba(249,115,22,.1);
  --t1:#f0f4fc;--t2:#94a3c4;--t3:#5b6b8a;
  --gold:linear-gradient(135deg,#e8a928 0%,#f5d680 50%,#c48b1a 100%);
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-tap-highlight-color:transparent;}
body{font-family:'Outfit',sans-serif;background:var(--bg);color:var(--t1);min-height:100vh;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
::-webkit-scrollbar{width:4px;height:4px;}
::-webkit-scrollbar-thumb{background:var(--border-hi);border-radius:2px;}
input,select,textarea,button{font-family:'Outfit',sans-serif;outline:none;}
input:focus,select:focus{border-color:var(--accent)!important;box-shadow:0 0 0 2px var(--accent-glow)!important;}

/* Animations */
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideR{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
@keyframes scanLine{0%{top:15%}100%{top:85%}}
@keyframes glow{0%,100%{box-shadow:0 0 15px rgba(232,169,40,.3)}50%{box-shadow:0 0 35px rgba(232,169,40,.6)}}
@keyframes progressGrow{from{width:0}}
.page-anim{animation:fadeUp .35s ease}

/* ── HEADER ── */
.header{background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100;backdrop-filter:blur(16px);}
.header-inner{max-width:1400px;margin:0 auto;display:flex;align-items:center;gap:8px;padding:10px 14px;flex-wrap:nowrap;}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0;}
.logo-text h1{font-size:15px;font-weight:800;font-family:'Playfair Display',serif;background:var(--gold);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1.1;}
.logo-text p{font-size:9px;color:var(--t3);letter-spacing:2px;text-transform:uppercase;}
.nav{display:flex;gap:2px;overflow-x:auto;flex:1;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.nav::-webkit-scrollbar{display:none;}
.nav-btn{background:transparent;border:1px solid transparent;color:var(--t3);padding:7px 9px;border-radius:8px;cursor:pointer;display:flex;align-items:center;gap:4px;font-size:11px;font-weight:600;white-space:nowrap;transition:all .2s;flex-shrink:0;}
.nav-btn:hover{color:var(--t2);}
.nav-btn.active{background:var(--accent-glow);border-color:rgba(232,169,40,.25);color:var(--accent);}
.nav-label{display:none;}
.admin-btn{background:var(--card);border:1px solid var(--border);color:var(--t3);padding:7px 10px;border-radius:8px;cursor:pointer;display:flex;align-items:center;gap:5px;font-size:11px;font-weight:600;white-space:nowrap;flex-shrink:0;}
.admin-btn.active{background:var(--accent-glow);border-color:rgba(232,169,40,.25);color:var(--accent);}

/* ── MAIN ── */
.main{max-width:1400px;margin:0 auto;padding:14px 12px 80px;}

/* ── STATS ── */
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px;}
.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px 12px;animation:fadeUp .4s ease both;position:relative;overflow:hidden;}
.stat-label{font-size:10px;color:var(--t3);text-transform:uppercase;letter-spacing:1.2px;font-weight:600;margin-bottom:4px;}
.stat-value{font-size:22px;font-weight:700;font-family:'Playfair Display',serif;}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;gap:6px;padding:10px 16px;border-radius:9px;font-weight:600;font-size:13px;cursor:pointer;transition:all .2s;border:1px solid var(--border);background:var(--card);color:var(--t1);text-decoration:none;}
.btn:active{transform:scale(0.97);}
.btn.primary{background:var(--gold);border-color:transparent;color:var(--bg);font-weight:700;box-shadow:0 4px 16px rgba(232,169,40,.25);}
.btn.danger{background:var(--red-bg);border-color:var(--red-border);color:var(--red);}
.btn.accent-outline{border-color:rgba(232,169,40,.3);color:var(--accent);}
.btn.small{padding:6px 12px;font-size:11px;border-radius:7px;}
.btn.full{width:100%;justify-content:center;}
.btn:disabled{opacity:.4;cursor:not-allowed;}
.btn-label{display:none;}

/* ── ACTIONS GRID ── */
.actions-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px;}

/* ── FORMS ── */
.field{margin-bottom:12px;}
.field label{display:block;font-size:12px;color:var(--t2);margin-bottom:4px;font-weight:500;}
.field .req{color:var(--red);}
.field input,.field select,.field textarea{width:100%;padding:10px 13px;border-radius:9px;background:var(--card);border:1px solid var(--border);color:var(--t1);font-size:14px;}
.field input::placeholder{color:var(--t3);}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.select-input{padding:9px 13px;border-radius:9px;background:var(--card);border:1px solid var(--border);color:var(--t1);font-size:13px;}
.search-wrap{position:relative;flex:1 1 220px;max-width:360px;}
.search-icon{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--t3);}
.search-input{width:100%;padding:9px 11px 9px 38px;border-radius:9px;background:var(--surface);border:1px solid var(--border);color:var(--t1);font-size:13px;}

/* ── FILTERS ── */
.filters{display:flex;gap:5px;flex-wrap:wrap;}
.filter-btn{padding:6px 13px;border-radius:7px;font-size:11px;font-weight:600;cursor:pointer;text-transform:capitalize;background:transparent;border:1px solid transparent;color:var(--t3);transition:all .2s;}
.filter-btn.active{background:var(--accent-glow);border-color:rgba(232,169,40,.25);color:var(--accent);}

/* ── CARDS ── */
.card{background:var(--surface);border:1px solid var(--border);border-radius:13px;padding:16px;}
.card h3{font-size:14px;font-weight:600;margin-bottom:12px;}
.alert-card{background:var(--accent-glow);border:1px solid var(--accent);border-radius:13px;padding:14px;margin-bottom:14px;}
.alert-card h3{display:flex;align-items:center;gap:8px;color:var(--accent);font-size:14px;margin-bottom:10px;}

/* ── PAGE HEADERS ── */
.page-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px;gap:10px;flex-wrap:wrap;}
.page-title{font-size:20px;font-weight:700;font-family:'Playfair Display',serif;}
.page-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap;}

/* ── BADGES ── */
.badge{display:inline-flex;align-items:center;font-size:10px;padding:3px 8px;border-radius:20px;font-weight:600;white-space:nowrap;}
.badge.gold{background:var(--accent-glow);color:var(--accent);}
.badge.green{background:var(--green-bg);color:var(--green);}
.badge.red{background:var(--red-bg);color:var(--red);}
.badge.blue{background:var(--blue-bg);color:var(--blue);}
.badge.orange{background:var(--orange-bg);color:var(--orange);}

/* ── LISTS ── */
.list{display:flex;flex-direction:column;gap:7px;}
.activity-list{display:flex;flex-direction:column;gap:5px;}
.activity-row{display:flex;align-items:center;justify-content:space-between;padding:8px 11px;border-radius:8px;background:var(--card);}
.activity-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}

/* ── MEMBER ROWS ── */
.member-row{background:var(--surface);border:1px solid var(--border);border-radius:11px;padding:12px 14px;transition:border-color .2s;}
.member-row.paid{border-left:4px solid var(--green);}
.member-row.unpaid{border-left:4px solid var(--red);}
.member-info{margin-bottom:8px;}
.member-name-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:3px;}
.member-name{font-weight:600;font-size:14px;}
.member-badges{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:8px;}
.member-btns{display:flex;gap:5px;flex-wrap:wrap;}
.streak{display:inline-flex;align-items:center;gap:2px;font-size:11px;color:var(--orange);}
.meta-text{font-size:11px;color:var(--t3);}

/* ── ATTENDANCE ── */
.attend-row{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:11px 13px;display:flex;align-items:center;gap:8px;transition:all .2s;flex-wrap:wrap;}
.attend-row.present{background:rgba(34,197,94,.04);border-color:rgba(34,197,94,.15);}
.attend-row.absent-row{background:rgba(239,68,68,.03);border-color:rgba(239,68,68,.12);}
.attend-avatar{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;flex-shrink:0;}
.attend-avatar.yes{background:var(--green-bg);color:var(--green);}
.attend-avatar.no{background:var(--card);color:var(--t3);}
.attend-avatar.absent-av{background:var(--red-bg);color:var(--red);font-weight:700;}
.attend-actions{display:flex;gap:5px;flex-wrap:wrap;margin-left:auto;}

/* ── VISITOR ROWS ── */
.visitor-row{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:12px 14px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}

/* ── FEE COMPONENTS ── */
.grand-total-card{background:linear-gradient(135deg,var(--surface),var(--card));border:1px solid var(--accent);border-radius:14px;padding:16px;margin-bottom:14px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.total-breakdown{display:flex;gap:14px;flex-wrap:wrap;}
.total-item{text-align:center;min-width:70px;}
.fee-legend{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:4px;}
.legend-chip{font-size:10px;padding:2px 7px;border-radius:10px;background:var(--card);color:var(--t3);border:1px solid var(--border);}
.card-header-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;}
.section-total{margin-top:10px;padding:8px 12px;background:var(--card);border-radius:8px;display:flex;justify-content:space-between;font-size:13px;color:var(--t2);}
.fee-member-row{display:flex;align-items:center;gap:10px;padding:9px 12px;background:var(--card);border-radius:8px;flex-wrap:wrap;}
.fee-member-info{flex:1;min-width:120px;display:flex;flex-direction:column;gap:2px;}
.fee-member-name{font-weight:600;font-size:13px;}
.fee-amount{font-size:14px;font-weight:700;color:var(--blue);}
.fee-actions{display:flex;gap:4px;margin-left:auto;}
.fee-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:7px;}
.fee-item{background:var(--card);border-radius:9px;padding:11px 13px;border:1px solid var(--border);}
.fee-item .label{font-size:11px;color:var(--t3);}
.fee-item .amount{font-size:18px;font-weight:700;color:var(--t1);font-family:'Playfair Display',serif;margin-top:3px;}
.fee-item.highlight{border-color:rgba(232,169,40,.2);}
.fee-item.highlight .label{color:var(--accent);}

/* Annual membership table */
.mbr-header{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr 1fr auto;gap:4px;padding:6px 12px;font-size:10px;color:var(--t3);font-weight:600;text-transform:uppercase;letter-spacing:.8px;border-bottom:1px solid var(--border);}
.mbr-row{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr 1fr auto;gap:4px;align-items:center;padding:9px 12px;background:var(--card);border-radius:8px;}
.mbr-name{font-size:13px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.qcell{width:100%;padding:6px 4px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;transition:all .15s;text-align:center;}
.qcell-view{width:100%;padding:6px 4px;border-radius:6px;font-size:12px;font-weight:600;text-align:center;}
.paid-cell{background:var(--green-bg);color:var(--green);border:1px solid var(--green-border);}
.empty-cell{background:var(--card);color:var(--t3);border:1px dashed var(--border-hi);}

/* ── PAY TYPES ── */
.pay-types{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:12px;}
.pay-type-btn{padding:9px 11px;border-radius:9px;border:1px solid var(--border);background:var(--card);color:var(--t2);font-size:11px;font-weight:600;cursor:pointer;text-align:left;transition:all .15s;}
.pay-type-btn.active{border-color:rgba(232,169,40,.4);background:var(--accent-glow);color:var(--accent);}
.pay-amt{display:block;font-size:15px;font-weight:700;margin-top:2px;color:var(--t1);}
.pay-type-btn.active .pay-amt{color:var(--accent);}
.pay-history{background:var(--card);border-radius:9px;padding:11px;margin-bottom:14px;}
.pay-history-title{font-size:11px;color:var(--t3);font-weight:600;text-transform:uppercase;letter-spacing:1px;margin-bottom:7px;}
.pay-history-row{display:flex;justify-content:space-between;padding:5px 0;font-size:12px;border-bottom:1px solid var(--border);}
.pay-history-row:last-child{border:none;}

/* ── ANALYTICS ── */
.analytics-grid{display:grid;grid-template-columns:1fr;gap:14px;}
.leaderboard-row{display:flex;align-items:center;justify-content:space-between;padding:8px 11px;border-radius:8px;background:var(--card);}
.revenue-row,.rev-list .revenue-row{display:flex;justify-content:space-between;align-items:center;padding:9px 12px;background:var(--card);border-radius:8px;font-size:13px;}
.rev-list{display:flex;flex-direction:column;gap:6px;}
.progress-track{height:7px;border-radius:4px;background:var(--card);overflow:hidden;}
.progress-fill{height:100%;border-radius:4px;animation:progressGrow .7s ease;}

/* ── HEAT MAP ── */
.heatmap-container{overflow-x:auto;padding-bottom:4px;}
.heatmap-headers,.heatmap-row{display:grid;grid-template-columns:120px repeat(12,24px) 44px;gap:3px;align-items:center;margin-bottom:3px;}
.heatmap-head{font-size:9px;color:var(--t3);text-align:center;writing-mode:vertical-lr;transform:rotate(180deg);min-height:34px;display:flex;align-items:flex-end;justify-content:center;}
.heatmap-name{font-size:11px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.heatmap-cell{width:22px;height:20px;border-radius:3px;cursor:help;}
.heatmap-cell.present{background:var(--green);}
.heatmap-cell.absent{background:var(--red);}
.heatmap-cell.none{background:var(--card);border:1px dashed var(--border-hi);}
.heatmap-pct{font-size:11px;font-weight:700;text-align:right;}
.heatmap-legend{display:flex;gap:12px;font-size:11px;color:var(--t2);margin-bottom:10px;flex-wrap:wrap;}
.heatmap-swatch{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:middle;margin-right:3px;}
.heatmap-swatch.present{background:var(--green);}
.heatmap-swatch.absent{background:var(--red);}
.heatmap-swatch.none{background:var(--card);border:1px dashed var(--border-hi);}
.heatmap-name-head{font-size:9px;color:var(--t3);font-weight:600;text-transform:uppercase;}
.heatmap-pct-head{font-size:9px;color:var(--t3);font-weight:600;text-align:right;}

/* ── AUTOMATIONS ── */
.auto-grid{display:grid;grid-template-columns:1fr;gap:14px;}
.auto-card h3{font-size:14px;font-weight:600;}
.reminder-list{display:flex;flex-direction:column;gap:6px;max-height:260px;overflow-y:auto;}
.reminder-row{display:flex;justify-content:space-between;align-items:center;padding:8px 11px;background:var(--card);border-radius:7px;gap:8px;flex-wrap:wrap;}

/* ── SCAN ── */
.scan-area{width:100%;height:200px;border-radius:14px;background:linear-gradient(135deg,var(--card),var(--bg));border:2px dashed var(--border-hi);display:flex;flex-direction:column;align-items:center;justify-content:center;margin-bottom:14px;position:relative;overflow:hidden;}
.scan-line{position:absolute;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent);animation:scanLine 2s ease-in-out infinite alternate;}
.scan-success{text-align:center;animation:fadeUp .3s ease;}
.icon-wrap{width:48px;height:48px;border-radius:50%;background:var(--green-bg);display:flex;align-items:center;justify-content:center;margin:0 auto 8px;color:var(--green);animation:glow 1.5s ease infinite;}
.scan-input{flex:1;padding:11px 14px;border-radius:9px;background:var(--card);border:1px solid var(--border);color:var(--t1);font-size:15px;letter-spacing:2px;text-transform:uppercase;}

/* ── MODAL ── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.82);display:flex;align-items:flex-end;justify-content:center;z-index:300;backdrop-filter:blur(10px);padding:0;animation:fadeIn .2s ease;}
.modal{background:var(--surface);border-radius:20px 20px 0 0;padding:22px 20px 32px;width:100%;max-width:520px;border:1px solid var(--border);border-bottom:none;animation:fadeUp .3s ease;max-height:92vh;overflow-y:auto;}
.modal.wide{max-width:620px;}
.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;}
.modal-title{font-size:18px;font-weight:700;font-family:'Playfair Display',serif;}
.modal-close{background:none;border:none;color:var(--t3);cursor:pointer;padding:4px;font-size:18px;}
.pin-input{text-align:center;font-size:22px;letter-spacing:8px;}

/* ── TOAST ── */
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:999;padding:11px 20px;border-radius:10px;font-size:13px;font-weight:500;animation:slideR .3s ease;backdrop-filter:blur(12px);white-space:nowrap;max-width:90vw;}
.toast.success{background:var(--green-bg);border:1px solid var(--green-border);color:var(--green);}
.toast.error{background:var(--red-bg);border:1px solid var(--red-border);color:var(--red);}

/* ── SAVE INDICATOR ── */
.save-indicator{position:fixed;bottom:60px;right:14px;padding:7px 12px;border-radius:8px;font-size:11px;font-weight:600;animation:fadeIn .2s;z-index:200;}
.save-indicator.saving{background:var(--blue-bg);color:var(--blue);}
.save-indicator.saved{background:var(--green-bg);color:var(--green);}

/* ── PWA INSTALL BANNER ── */
.install-banner{position:fixed;bottom:0;left:0;right:0;z-index:400;background:var(--surface);border-top:1px solid var(--accent);padding:10px 14px;animation:fadeUp .3s ease;}
.install-banner-inner{max-width:600px;margin:0 auto;display:flex;align-items:center;gap:10px;}
.install-banner strong{font-size:13px;display:block;}
.install-banner p{font-size:11px;color:var(--t3);margin:1px 0 0;}

/* ── BIRTHDAYS ── */
.welcome-bar{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
.bday-strip{display:flex;gap:8px;overflow-x:auto;padding-bottom:3px;}
.bday-card{background:var(--card);border:1px solid var(--border);border-radius:9px;padding:9px 13px;min-width:120px;text-align:center;flex-shrink:0;}
.bday-card .name{font-weight:600;font-size:13px;}
.bday-card .when{font-size:11px;color:var(--t3);margin-top:2px;}

/* ── MISC ── */
.empty{text-align:center;color:var(--t3);padding:30px 16px;font-size:13px;}

/* ═══════════════════════════════════
   TABLET (600px+)
   ═══════════════════════════════════ */
@media(min-width:600px){
  .main{padding:18px 18px 40px;}
  .header-inner{padding:10px 18px;}
  .stats-grid{grid-template-columns:repeat(3,1fr);}
  .actions-grid{grid-template-columns:repeat(2,1fr);}
  .analytics-grid{grid-template-columns:repeat(2,1fr);}
  .auto-grid{grid-template-columns:repeat(2,1fr);}
  .nav-label{display:inline;}
  .nav-btn{font-size:12px;padding:7px 11px;}
  .btn-label{display:inline;}
  .modal-overlay{align-items:center;padding:16px;}
  .modal{border-radius:18px;border-bottom:1px solid var(--border);}
  .toast{bottom:auto;top:16px;right:16px;left:auto;transform:none;}
}

/* ═══════════════════════════════════
   DESKTOP (960px+)
   ═══════════════════════════════════ */
@media(min-width:960px){
  .main{padding:22px 24px 40px;}
  .header-inner{padding:10px 24px;}
  .stats-grid{grid-template-columns:repeat(6,1fr);}
  .actions-grid{grid-template-columns:repeat(4,1fr);}
  .analytics-grid{grid-template-columns:repeat(3,1fr);}
  .auto-grid{grid-template-columns:repeat(3,1fr);}
  .stat-value{font-size:24px;}
  .heatmap-headers,.heatmap-row{grid-template-columns:160px repeat(12,28px) 50px;}
  .heatmap-cell{width:26px;height:22px;}
  .heatmap-name{font-size:12px;}
}

/* ═══════════════════════════════════
   MOBILE BOTTOM NAVIGATION
   ═══════════════════════════════════ */
.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  z-index: 150;
  padding: 6px 0 calc(6px + env(safe-area-inset-bottom));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.bottom-nav-inner {
  display: flex;
  justify-content: space-around;
  align-items: center;
  max-width: 600px;
  margin: 0 auto;
}
.bottom-nav-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 8px;
  background: none;
  border: none;
  color: var(--t3);
  cursor: pointer;
  font-size: 9px;
  font-weight: 600;
  font-family: 'Outfit', sans-serif;
  transition: color 0.2s;
  min-width: 44px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.bottom-nav-btn.active { color: var(--accent); }
.bottom-nav-btn svg { flex-shrink: 0; }

/* More menu overlay */
.more-menu {
  position: fixed;
  bottom: calc(60px + env(safe-area-inset-bottom));
  left: 0; right: 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-radius: 20px 20px 0 0;
  padding: 16px 20px 20px;
  z-index: 160;
  animation: fadeUp 0.25s ease;
  max-height: 70vh;
  overflow-y: auto;
}
.more-menu-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.more-menu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 8px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  color: var(--t2);
  font-family: 'Outfit', sans-serif;
  transition: all 0.2s;
}
.more-menu-item.active {
  background: var(--accent-glow);
  border-color: rgba(232,169,40,0.3);
  color: var(--accent);
}
.more-menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 148;
  animation: fadeIn 0.2s ease;
}

/* ── PWA Install Banner ── */
.pwa-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 500;
  background: linear-gradient(135deg, var(--surface), var(--card));
  border-bottom: 1px solid var(--accent);
  padding: 12px 16px;
  animation: slideDown 0.3s ease;
}
.pwa-banner-inner {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
}
.pwa-banner strong { font-size: 13px; display: block; color: var(--t1); }
.pwa-banner p { font-size: 11px; color: var(--t3); margin: 2px 0 0; }
.pwa-ios-steps {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--t2);
  line-height: 1.8;
}
@keyframes slideDown { from { opacity:0; transform:translateY(-100%); } to { opacity:1; transform:translateY(0); } }

/* ── Payment QR Modal ── */
.payment-qr-card {
  text-align: center;
  padding: 20px;
  background: #fff;
  border-radius: 14px;
  margin-bottom: 14px;
}
.payment-qr-card img {
  width: 200px;
  height: 200px;
  object-fit: contain;
  display: block;
  margin: 0 auto 10px;
}
.payment-qr-card .qr-label {
  font-size: 13px;
  color: #333;
  font-weight: 600;
}
.payment-qr-card .qr-sub {
  font-size: 11px;
  color: #666;
  margin-top: 3px;
}

/* ── WhatsApp message editor ── */
.wa-editor {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--t1);
  font-size: 13px;
  font-family: 'Outfit', sans-serif;
  resize: vertical;
  min-height: 120px;
  line-height: 1.5;
  outline: none;
}
.wa-editor:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-glow); }

/* ── Attendance fee alert ── */
.fee-alert-card {
  background: var(--red-bg);
  border: 1px solid var(--red-border);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 14px;
  animation: fadeUp 0.3s ease;
}
.fee-alert-card.paid {
  background: var(--green-bg);
  border-color: var(--green-border);
}

/* Show bottom nav on mobile */
@media (max-width: 767px) {
  .bottom-nav { display: block; }
  .header .nav { display: none; }
  .header .admin-btn .nav-label { display: none; }
  .main { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
}

@media (min-width: 768px) {
  .bottom-nav { display: none !important; }
  .header .nav { display: flex; }
}

/* Fix: ensure more menu items are always clickable */
.more-menu { pointer-events: auto; }
.more-menu-item { pointer-events: auto; cursor: pointer; }
.more-menu-overlay { pointer-events: auto; }