/* ===========================================================
   VR CHURCH · ADMIN — Manage Leaders.
   Magic-link sign-in (no Discord, no passwords). Founding admin
   is protected. Same neon-dark HUD language as wiki + planner.
   Mock auth/state for the prototype; maps 1:1 to Supabase Auth
   + a `leaders` table guarded by Row-Level Security later.
   =========================================================== */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
:root{
  --void:#050508; --surface:#0d0d14; --lift:#14141f; --lift2:#191926; --edge:#22223a;
  --fog:#a8a8c8; --dim:#6b6b8a; --snow:#f0f0ff;
  --volt:#00cfff; --arc:#c8ff00; --gold:#ffcf4a; --rose:#ff5a7a;
  --volt-glow:rgba(0,207,255,.4); --arc-glow:rgba(200,255,0,.4);
  --gold-glow:rgba(255,207,74,.4); --rose-glow:rgba(255,90,122,.4);
}
html,body{ min-height:100%; background:var(--void); }
body{ font-family:'JetBrains Mono',monospace; color:var(--snow); -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(70% 50% at 82% 4%, rgba(0,207,255,.08), transparent 60%),
    radial-gradient(60% 50% at 8% 98%, rgba(255,207,74,.05), transparent 62%),
    var(--void); }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
input{ font-family:inherit; }
a{ color:var(--volt); text-decoration:none; }
a:hover{ text-decoration:underline; }
.starfield{ position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.4; }

/* ---------- TOPBAR ---------- */
.shell{ position:relative; z-index:2; }
.topbar{ position:sticky; top:0; z-index:30; display:flex; align-items:center; justify-content:space-between; gap:16px;
  height:58px; padding:0 26px; background:rgba(5,5,8,.96); border-bottom:1px solid var(--edge); }
.tb-left{ display:flex; align-items:center; gap:13px; min-width:0; }
.tb-logo{ display:flex; align-items:center; gap:9px; }
.tb-logo img{ height:24px; }
.tb-logo .wm{ font-family:'Rajdhani',sans-serif; font-weight:700; font-size:18px; letter-spacing:.09em; text-transform:uppercase; white-space:nowrap; }
.tb-logo .wm .v{ color:var(--volt); text-shadow:0 0 14px var(--volt-glow); }
.tb-tag{ font-size:10.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--dim); padding-left:13px; border-left:1px solid var(--edge); white-space:nowrap; }
.tb-right{ display:flex; align-items:center; gap:11px; }
.id-chip{ display:flex; align-items:center; gap:9px; font-size:10.5px; letter-spacing:.05em; color:var(--fog); border:1px solid var(--edge); background:var(--surface); padding:7px 12px; }
.id-chip .em{ color:var(--snow); }
.id-chip .rb{ font-family:'Rajdhani',sans-serif; font-weight:700; letter-spacing:.12em; font-size:9.5px; padding:2px 7px; }
.rb.founder{ color:var(--gold); border:1px solid rgba(255,207,74,.5); background:rgba(255,207,74,.08); }
.rb.leader{ color:var(--volt); border:1px solid rgba(0,207,255,.5); background:rgba(0,207,255,.08); }
.btn-ghost{ display:flex; align-items:center; gap:8px; border:1px solid var(--edge); color:var(--fog); font-size:11px; letter-spacing:.08em; padding:9px 13px; transition:all .18s; }
.btn-ghost:hover{ border-color:var(--volt); color:var(--volt); }
.btn-ghost svg{ width:15px; height:15px; }
.btn-ghost.danger:hover{ border-color:var(--rose); color:var(--rose); }

/* ---------- LOGIN ---------- */
.login-stage{ position:relative; z-index:2; min-height:100vh; display:flex; align-items:center; justify-content:center; padding:32px 22px; }
.login-card{ width:100%; max-width:430px; border:1px solid var(--edge); background:rgba(13,13,20,.72);
  backdrop-filter:blur(6px); padding:38px 34px 34px; box-shadow:0 30px 80px rgba(0,0,0,.5); }
.lc-logo{ display:flex; align-items:center; gap:10px; margin-bottom:26px; }
.lc-logo img{ height:30px; }
.lc-logo .wm{ font-family:'Rajdhani',sans-serif; font-weight:700; font-size:21px; letter-spacing:.09em; text-transform:uppercase; }
.lc-logo .wm .v{ color:var(--volt); text-shadow:0 0 14px var(--volt-glow); }
.lc-eyebrow{ display:flex; align-items:center; gap:10px; font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); margin-bottom:13px; }
.lc-eyebrow .ln{ width:24px; height:2px; background:var(--gold); box-shadow:0 0 8px var(--gold-glow); }
.lc-title{ font-family:'Rajdhani',sans-serif; font-weight:700; text-transform:uppercase; font-size:34px; line-height:.98; letter-spacing:.005em; }
.lc-title em{ font-style:normal; color:var(--volt); text-shadow:0 0 30px var(--volt-glow); }
.lc-sub{ color:var(--fog); font-size:12.5px; line-height:1.65; margin-top:13px; }
.lc-form{ margin-top:24px; display:flex; flex-direction:column; gap:12px; }
.field-l{ font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--dim); }
.lc-input{ width:100%; background:var(--void); border:1px solid var(--edge); color:var(--snow); font-size:14px;
  padding:14px 15px; outline:none; transition:border-color .18s, box-shadow .18s; }
.lc-input:focus{ border-color:var(--volt); box-shadow:0 0 20px var(--volt-glow); }
.lc-input::placeholder{ color:var(--dim); }
.lc-btn{ display:flex; align-items:center; justify-content:center; gap:10px; width:100%; margin-top:4px;
  background:var(--volt); color:#04222b; font-family:'Rajdhani',sans-serif; font-weight:700; font-size:14px;
  letter-spacing:.1em; text-transform:uppercase; padding:14px; box-shadow:0 0 26px var(--volt-glow);
  transition:filter .18s, box-shadow .18s; }
.lc-btn:hover{ filter:brightness(1.08); box-shadow:0 0 38px var(--volt-glow); }
.lc-btn svg{ width:17px; height:17px; }
.lc-foot{ margin-top:20px; padding-top:18px; border-top:1px solid var(--edge); font-size:10.5px; line-height:1.7; color:var(--dim); }
.lc-foot b{ color:var(--fog); font-weight:500; }
.lc-error{ display:flex; gap:10px; align-items:flex-start; margin-top:16px; border:1px solid rgba(255,90,122,.5);
  background:rgba(255,90,122,.07); padding:13px 15px; font-size:11.5px; line-height:1.6; color:#ffb3c2; }
.lc-error svg{ width:16px; height:16px; flex:0 0 auto; margin-top:1px; color:var(--rose); }

/* sent state */
.sent-icon{ width:58px; height:58px; border:1px solid var(--volt); display:flex; align-items:center; justify-content:center;
  color:var(--volt); margin-bottom:22px; box-shadow:0 0 30px var(--volt-glow); }
.sent-icon svg{ width:28px; height:28px; }
.sent-em{ color:var(--snow); }
.sim-note{ margin-top:22px; padding-top:18px; border-top:1px dashed var(--edge); }
.sim-l{ font-size:9.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--dim); margin-bottom:11px; }
.sim-btn{ display:flex; align-items:center; justify-content:center; gap:9px; width:100%; border:1px dashed var(--arc);
  color:var(--arc); background:rgba(200,255,0,.04); font-family:'Rajdhani',sans-serif; font-weight:700; font-size:12px;
  letter-spacing:.1em; text-transform:uppercase; padding:13px; transition:all .18s; }
.sim-btn:hover{ background:rgba(200,255,0,.12); box-shadow:0 0 22px var(--arc-glow); }
.sim-btn svg{ width:15px; height:15px; }
.link-again{ margin-top:14px; font-size:11px; color:var(--dim); text-align:center; }
.link-again button{ color:var(--volt); font-size:11px; }
.link-again button:hover{ text-decoration:underline; }

/* ---------- PAGE ---------- */
.wrap{ max-width:1180px; margin:0 auto; padding:0 26px; }
.pagehead{ padding:40px 0 26px; border-bottom:1px solid var(--edge); }
.ph-eyebrow{ display:flex; align-items:center; gap:10px; font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); margin-bottom:16px; }
.ph-eyebrow .ln{ width:26px; height:2px; background:var(--gold); box-shadow:0 0 8px var(--gold-glow); }
.ph-title{ font-family:'Rajdhani',sans-serif; font-weight:700; text-transform:uppercase; font-size:clamp(34px,5vw,50px); line-height:.96; letter-spacing:-.005em; }
.ph-title em{ font-style:normal; color:var(--volt); text-shadow:0 0 30px var(--volt-glow); }
.ph-sub{ color:var(--fog); font-size:13px; line-height:1.6; margin-top:14px; max-width:62ch; }

/* how-it-works strip */
.how{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--edge); border:1px solid var(--edge); margin:30px 0 34px; }
.how-cell{ background:var(--surface); padding:20px 20px; display:flex; gap:14px; align-items:flex-start; }
.how-ic{ width:34px; height:34px; flex:0 0 auto; border:1px solid var(--edge); display:flex; align-items:center; justify-content:center; color:var(--volt); }
.how-ic svg{ width:17px; height:17px; }
.how-cell.g .how-ic{ color:var(--gold); }
.how-cell.a .how-ic{ color:var(--arc); }
.how-h{ font-family:'Rajdhani',sans-serif; font-weight:700; text-transform:uppercase; font-size:13px; letter-spacing:.06em; color:var(--snow); }
.how-p{ font-size:11px; line-height:1.6; color:var(--dim); margin-top:5px; }

/* ---------- ADD LEADER ---------- */
.section-l{ display:flex; align-items:center; gap:12px; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--dim); margin-bottom:14px; }
.section-l .bar{ width:4px; height:15px; background:var(--gold); box-shadow:0 0 10px var(--gold-glow); }
.addrow{ display:flex; gap:11px; margin-bottom:34px; flex-wrap:wrap; }
.add-input{ flex:1; min-width:240px; background:var(--surface); border:1px solid var(--edge); color:var(--snow); font-size:13px;
  padding:14px 15px; outline:none; transition:border-color .18s, box-shadow .18s; }
.add-input:focus{ border-color:var(--volt); box-shadow:0 0 18px var(--volt-glow); }
.add-input::placeholder{ color:var(--dim); }
.add-btn{ display:flex; align-items:center; gap:9px; border:1px solid var(--arc); background:rgba(200,255,0,.05); color:var(--arc);
  font-family:'Rajdhani',sans-serif; font-weight:700; font-size:12px; letter-spacing:.1em; text-transform:uppercase; padding:0 20px; transition:all .18s; }
.add-btn:hover{ background:rgba(200,255,0,.12); box-shadow:0 0 22px var(--arc-glow); }
.add-btn svg{ width:15px; height:15px; }

/* ---------- LEADERS TABLE ---------- */
.lead-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.lead-count{ font-size:11px; color:var(--dim); }
.lead-count b{ color:var(--fog); font-weight:500; }
.leaders{ border:1px solid var(--edge); }
.lrow{ display:grid; grid-template-columns:1fr 130px 120px 150px; align-items:center; gap:18px; padding:16px 20px; border-bottom:1px solid var(--edge); transition:background .14s; }
.lrow:last-child{ border-bottom:none; }
.lrow:hover{ background:rgba(20,20,31,.5); }
.lrow.is-founder{ background:rgba(255,207,74,.04); }
.lrow.head{ background:var(--void); padding:12px 20px; font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--dim); }
.lrow.head:hover{ background:var(--void); }
.l-id{ display:flex; align-items:center; gap:13px; min-width:0; }
.l-ava{ width:34px; height:34px; flex:0 0 auto; border:1px solid var(--edge); display:flex; align-items:center; justify-content:center;
  font-family:'Rajdhani',sans-serif; font-weight:700; font-size:14px; color:var(--volt); background:var(--void); }
.is-founder .l-ava{ color:var(--gold); border-color:rgba(255,207,74,.4); }
.l-em{ font-size:13px; color:var(--snow); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.l-you{ font-size:9px; letter-spacing:.1em; color:var(--dim); margin-top:3px; text-transform:uppercase; }
.badge{ display:inline-flex; align-items:center; gap:7px; font-family:'Rajdhani',sans-serif; font-weight:700; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; padding:5px 10px; width:max-content; }
.badge svg{ width:13px; height:13px; }
.badge.founder{ color:var(--gold); border:1px solid rgba(255,207,74,.45); background:rgba(255,207,74,.07); }
.badge.leader{ color:var(--volt); border:1px solid rgba(0,207,255,.4); background:rgba(0,207,255,.06); }
.status{ display:inline-flex; align-items:center; gap:8px; font-size:11px; letter-spacing:.04em; }
.status .dot{ width:7px; height:7px; border-radius:50%; flex:0 0 auto; }
.status.active{ color:var(--arc); } .status.active .dot{ background:var(--arc); box-shadow:0 0 8px var(--arc-glow); }
.status.invited{ color:var(--gold); } .status.invited .dot{ background:var(--gold); box-shadow:0 0 8px var(--gold-glow); }
.l-actions{ display:flex; gap:7px; justify-content:flex-end; }
.l-act{ display:flex; align-items:center; gap:7px; border:1px solid var(--edge); color:var(--dim); font-size:10px; letter-spacing:.06em;
  text-transform:uppercase; padding:7px 10px; transition:all .15s; }
.l-act:hover{ border-color:var(--volt); color:var(--volt); }
.l-act.danger:hover{ border-color:var(--rose); color:var(--rose); }
.l-act svg{ width:13px; height:13px; }
.l-locked{ display:flex; align-items:center; gap:7px; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); justify-content:flex-end; }
.l-locked svg{ width:13px; height:13px; color:var(--gold); }

.foot-note{ margin:22px 0 80px; font-size:10.5px; line-height:1.7; color:var(--dim); display:flex; gap:10px; align-items:flex-start; }
.foot-note svg{ width:15px; height:15px; flex:0 0 auto; color:var(--dim); margin-top:1px; }
.foot-note b{ color:var(--fog); font-weight:500; }
.foot-note code{ color:var(--volt); background:var(--surface); border:1px solid var(--edge); padding:1px 6px; font-size:10px; }

/* ---------- TOAST ---------- */
.toast{ position:fixed; left:50%; bottom:30px; transform:translateX(-50%); z-index:60; display:flex; gap:12px; align-items:center;
  border:1px solid var(--volt); background:rgba(5,5,8,.97); padding:14px 18px; box-shadow:0 0 34px var(--volt-glow); max-width:90vw;
  animation:rise .26s ease; }
.toast.ok{ border-color:var(--arc); box-shadow:0 0 34px var(--arc-glow); }
.toast.warn{ border-color:var(--gold); box-shadow:0 0 34px var(--gold-glow); }
.toast .ic{ display:flex; color:var(--volt); flex:0 0 auto; } .toast.ok .ic{ color:var(--arc); } .toast.warn .ic{ color:var(--gold); }
.toast .ic svg{ width:18px; height:18px; }
.toast .tx{ font-size:12px; line-height:1.4; color:var(--snow); }
.toast .tx b{ color:var(--volt); } .toast.ok .tx b{ color:var(--arc); } .toast.warn .tx b{ color:var(--gold); }
@keyframes rise{ from{ opacity:0; transform:translate(-50%,12px); } to{ opacity:1; transform:translate(-50%,0); } }

/* ---------- RESPONSIVE ---------- */
@media(max-width:820px){
  .how{ grid-template-columns:1fr; }
  .lrow{ grid-template-columns:1fr; gap:12px; padding:18px 18px; }
  .lrow.head{ display:none; }
  .l-actions, .l-locked{ justify-content:flex-start; }
}
@media(max-width:600px){
  body{ font-size:15px; }
  .wrap{ padding:0 18px; }
  .tb-tag{ display:none; }
  .id-chip .em{ display:none; }
  .login-card{ padding:30px 22px 26px; }
}
@media(min-width:1500px){ body{ font-size:16px; } .ph-sub,.how-p,.foot-note,.lc-sub{ font-size:14px; } }

.tb-back{ font-size:11px; letter-spacing:.06em; color:var(--fog); border:1px solid var(--edge); padding:7px 11px; text-decoration:none; transition:all .15s; }
.tb-back:hover{ border-color:var(--volt); color:var(--volt); }