/* ═══════════════════════════════════════════════════════════
   Church Hub — style.css
   Design: Glassmorphic · Clean · Premium
   Fonts: Syne (display) · DM Sans (body)
   Themes: Dark Glass · Light Glass · Royal Purple · Ocean · Rose Gold
═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&display=swap');

/* ── DARK GLASS (default) ─────────────────────────────── */
:root {
  --bg-1: #05030F;
  --bg-2: #0D0A1E;
  --bg-3: #13102A;

  --glass:      rgba(255,255,255,0.055);
  --glass-2:    rgba(255,255,255,0.09);
  --glass-3:    rgba(255,255,255,0.13);
  --glass-border: rgba(255,255,255,0.10);
  --glass-border-hi: rgba(255,255,255,0.18);

  --gold:    #F59E0B;
  --gold-hi: #FDE68A;
  --gold-lo: rgba(245,158,11,0.15);
  --violet:  #7C3AED;
  --violet-lo: rgba(124,58,237,0.15);
  --electric:#4F46E5;
  --sky:     #0EA5E9;
  --mint:    #10B981;
  --rose:    #F43F5E;
  --danger:  #EF4444;

  --tx-1: rgba(255,255,255,0.94);
  --tx-2: rgba(255,255,255,0.60);
  --tx-3: rgba(255,255,255,0.30);

  --nav-h: 64px;
  --top-h: 54px;
  --r:     20px;
  --r-sm:  14px;
  --r-xs:  10px;

  --f-display: 'Syne', sans-serif;
  --f-body:    'DM Sans', sans-serif;

  --ease:   cubic-bezier(.4,0,.2,1);
  --spring: cubic-bezier(.34,1.56,.64,1);
  --smooth: cubic-bezier(.25,.46,.45,.94);

  --shadow-sm: 0 2px 12px rgba(0,0,0,0.3);
  --shadow-md: 0 6px 24px rgba(0,0,0,0.4);
  --shadow-lg: 0 12px 48px rgba(0,0,0,0.5);
  --shadow-gold: 0 4px 20px rgba(245,158,11,0.15);

  --orb1: #7C3AED;
  --orb2: #0EA5E9;
  --orb3: #F59E0B;

  --blur: blur(20px) saturate(1.8);
}

/* ── LIGHT GLASS ──────────────────────────────────────── */
body.theme-light {
  --bg-1: #EEF0F8;
  --bg-2: #E4E7F5;
  --bg-3: #D8DCF0;
  --glass:      rgba(255,255,255,0.55);
  --glass-2:    rgba(255,255,255,0.72);
  --glass-3:    rgba(255,255,255,0.88);
  --glass-border: rgba(100,80,200,0.12);
  --glass-border-hi: rgba(100,80,200,0.22);
  --tx-1: rgba(12,8,35,0.92);
  --tx-2: rgba(12,8,35,0.58);
  --tx-3: rgba(12,8,35,0.30);
  --orb1: #A78BFA;
  --orb2: #38BDF8;
  --orb3: #FCD34D;
}

/* ── ROYAL PURPLE ─────────────────────────────────────── */
body.theme-purple {
  --bg-1: #0D0520;
  --bg-2: #160A30;
  --bg-3: #1E1040;
  --glass:      rgba(168,85,247,0.07);
  --glass-2:    rgba(168,85,247,0.12);
  --glass-3:    rgba(168,85,247,0.18);
  --glass-border: rgba(168,85,247,0.16);
  --glass-border-hi: rgba(168,85,247,0.30);
  --gold:    #E9D5FF;
  --gold-hi: #F3E8FF;
  --gold-lo: rgba(168,85,247,0.15);
  --violet:  #A855F7;
  --electric:#9333EA;
  --tx-1: rgba(245,235,255,0.96);
  --tx-2: rgba(220,195,255,0.62);
  --tx-3: rgba(195,165,240,0.35);
  --orb1: #7C3AED;
  --orb2: #A855F7;
  --orb3: #EC4899;
}

/* ── OCEAN BLUE ───────────────────────────────────────── */
body.theme-ocean {
  --bg-1: #020D1C;
  --bg-2: #04152E;
  --bg-3: #071D3F;
  --glass:      rgba(14,165,233,0.06);
  --glass-2:    rgba(14,165,233,0.11);
  --glass-3:    rgba(14,165,233,0.17);
  --glass-border: rgba(14,165,233,0.14);
  --glass-border-hi: rgba(14,165,233,0.26);
  --gold:    #BAE6FD;
  --gold-hi: #E0F2FE;
  --gold-lo: rgba(14,165,233,0.14);
  --violet:  #0EA5E9;
  --electric:#0284C7;
  --sky:     #38BDF8;
  --tx-1: rgba(224,247,255,0.96);
  --tx-2: rgba(186,230,253,0.62);
  --tx-3: rgba(147,210,240,0.35);
  --orb1: #0EA5E9;
  --orb2: #06B6D4;
  --orb3: #3B82F6;
}

/* ── ROSE GOLD ────────────────────────────────────────── */
body.theme-rose {
  --bg-1: #1A0810;
  --bg-2: #260D18;
  --bg-3: #321220;
  --glass:      rgba(244,63,94,0.06);
  --glass-2:    rgba(244,63,94,0.11);
  --glass-3:    rgba(244,63,94,0.17);
  --glass-border: rgba(244,63,94,0.14);
  --glass-border-hi: rgba(244,63,94,0.28);
  --gold:    #FECDD3;
  --gold-hi: #FFE4E6;
  --gold-lo: rgba(244,63,94,0.14);
  --violet:  #F43F5E;
  --electric:#E11D48;
  --sky:     #FB7185;
  --tx-1: rgba(255,240,244,0.96);
  --tx-2: rgba(255,210,220,0.62);
  --tx-3: rgba(240,180,195,0.35);
  --orb1: #F43F5E;
  --orb2: #FB923C;
  --orb3: #FBBF24;
}

/* ── RESET ────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:16px; -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  font-family: var(--f-body);
  background: var(--bg-1);
  color: var(--tx-1);
  min-height: 100dvh;
  padding-top: var(--top-h);
  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 1rem);
  overflow-x: hidden;
  transition: background .35s var(--ease), color .35s var(--ease);
}
a { color:inherit; text-decoration:none; }
button { cursor:pointer; font-family:var(--f-body); border:none; outline:none; background:none; }
img { max-width:100%; display:block; }
input,textarea,select { font-family:var(--f-body); }

/* ── AMBIENT ORBS ─────────────────────────────────────── */
.bg-canvas {
  position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
}
.orb {
  position:absolute; border-radius:50%;
  filter: blur(100px);
}
.orb-1 {
  width:600px; height:600px; opacity:.12;
  background: radial-gradient(circle, var(--orb1), transparent 65%);
  top:-220px; left:-180px;
  animation: orbDrift1 20s ease-in-out infinite alternate;
}
.orb-2 {
  width:500px; height:500px; opacity:.10;
  background: radial-gradient(circle, var(--orb2), transparent 65%);
  bottom:-180px; right:-140px;
  animation: orbDrift2 26s ease-in-out infinite alternate;
}
.orb-3 {
  width:350px; height:350px; opacity:.06;
  background: radial-gradient(circle, var(--orb3), transparent 65%);
  top:45%; left:45%;
  animation: orbDrift3 32s ease-in-out infinite alternate;
}
@keyframes orbDrift1 { to { transform:translate(70px,90px) scale(1.1); } }
@keyframes orbDrift2 { to { transform:translate(-60px,-70px) scale(1.08); } }
@keyframes orbDrift3 { to { transform:translate(-90px,50px) scale(1.15); } }

/* ── GLASS CARD ───────────────────────────────────────── */
.glass {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--r);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
}
.glass-2 {
  background: var(--glass-2);
  border: 1px solid var(--glass-border);
  border-radius: var(--r);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
}
.glass-card {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--r);
  padding: 1.1rem 1.2rem;
  margin-bottom: .9rem;
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  transition: border-color .2s, transform .2s var(--spring);
}
.glass-card:hover { border-color: var(--glass-border-hi); }

/* ── STATUS BAR ───────────────────────────────────────── */
.statusbar {
  position:fixed; top:0; left:0; right:0; height:var(--top-h);
  background: rgba(5,3,15,0.75);
  backdrop-filter: blur(28px) saturate(2);
  -webkit-backdrop-filter: blur(28px) saturate(2);
  border-bottom: 1px solid var(--glass-border);
  display:flex; align-items:center; justify-content:space-between;
  padding: 0 1rem; z-index:1000;
  transition: background .3s;
}
body.theme-light .statusbar { background: rgba(220,222,240,0.82); }
body.theme-purple .statusbar { background: rgba(13,5,32,0.82); }
body.theme-ocean .statusbar  { background: rgba(2,13,28,0.82); }
body.theme-rose .statusbar   { background: rgba(26,8,16,0.82); }

.statusbar-left { display:flex; align-items:center; gap:.55rem; }
.logo-mark {
  font-size:1.2rem; color:var(--gold);
  animation: spinSlow 18s linear infinite;
  display:inline-block;
}
@keyframes spinSlow { to { transform:rotate(360deg); } }
.app-wordmark {
  font-family:var(--f-display); font-size:1.05rem; font-weight:800;
  letter-spacing:.02em; color:var(--tx-1);
}
.statusbar-right { display:flex; align-items:center; gap:.6rem; }

.pulse-dot {
  width:8px; height:8px; border-radius:50%;
  background:var(--mint);
  animation: pulse 2.2s ease-in-out infinite;
}
.pulse-dot.offline { background:var(--danger); animation:none; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.85)} }

.admin-chip {
  font-size:.66rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  padding:4px 11px; border-radius:20px;
  background:var(--gold-lo); border:1px solid rgba(245,158,11,.3);
  color:var(--gold); cursor:pointer; transition:background .2s;
}
.admin-chip:hover { background:rgba(245,158,11,.22); }

.header-user { display:flex; align-items:center; gap:.45rem; }
.header-avatar {
  width:30px; height:30px; border-radius:50%; object-fit:cover;
  border:1.5px solid var(--glass-border-hi); flex-shrink:0;
  background: linear-gradient(135deg, var(--violet), var(--electric));
  display:flex; align-items:center; justify-content:center;
  font-size:.62rem; font-weight:700; color:#fff; overflow:hidden;
}
.header-avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.header-name {
  font-size:.8rem; font-weight:600; color:var(--tx-1);
  max-width:80px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ── PAGE LAYOUT ──────────────────────────────────────── */
#mainContent { position:relative; z-index:1; }
.page { display:none; padding:.7rem 1rem 1rem; animation: pageIn .24s var(--ease) both; }
.page.active { display:block; }
@keyframes pageIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

.page-header { margin-bottom:1.1rem; }
.page-title {
  font-family:var(--f-display); font-size:1.65rem; font-weight:800;
  color:var(--tx-1); line-height:1.1;
}
.page-sub { font-size:.78rem; color:var(--tx-3); margin-top:.2rem; display:block; }

/* ── OVERLINE ─────────────────────────────────────────── */
.overline {
  font-size:.63rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  color:var(--tx-3);
}

/* ── BOTTOM NAV ───────────────────────────────────────── */
.float-nav {
  position:fixed; bottom:0; left:0; right:0;
  background: rgba(8,5,20,0.85);
  backdrop-filter: blur(28px) saturate(2);
  -webkit-backdrop-filter: blur(28px) saturate(2);
  border-top: 1px solid var(--glass-border-hi);
  padding:.3rem .4rem;
  padding-bottom: calc(.3rem + env(safe-area-inset-bottom));
  z-index:2000;
  transition: background .3s;
}
body.theme-light .float-nav { background: rgba(210,212,235,0.88); }
body.theme-purple .float-nav { background: rgba(13,5,30,0.88); }
body.theme-ocean .float-nav  { background: rgba(2,10,22,0.88); }
body.theme-rose .float-nav   { background: rgba(22,6,14,0.88); }

.nav-track {
  display:flex; align-items:center; gap:.05rem;
  overflow-x:auto; overflow-y:visible; scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;
  min-height:50px;
}
.nav-track::-webkit-scrollbar { display:none; }

.fnav-btn {
  min-width:48px; width:48px; height:48px;
  border-radius:12px; flex-shrink:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; color:var(--tx-3);
  transition: color .18s, background .18s, transform .18s var(--spring);
  scroll-snap-align:center; position:relative;
}
.fnav-btn svg { width:18px; height:18px; stroke-width:1.8; }
.fnav-label { font-size:.52rem; font-weight:600; letter-spacing:.01em; white-space:nowrap; }
.fnav-btn:hover { color:var(--tx-1); transform:scale(1.07); }
.fnav-btn.active {
  color:var(--gold);
  background: var(--gold-lo);
}
.fnav-badge {
  position:absolute; top:4px; right:4px;
  width:9px; height:9px; border-radius:50%;
  background:var(--rose); color:transparent;
  font-size:0; line-height:0; min-width:unset; padding:0;
  display:flex; align-items:center; justify-content:center;
  border:2px solid var(--bg-1);
  animation: badgePop .25s ease both;
}
@keyframes badgePop { from{transform:scale(0)} to{transform:scale(1)} }

/* ── FORMS ────────────────────────────────────────────── */
.field {
  width:100%; padding:.72rem 1rem;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-xs);
  color:var(--tx-1); font-family:var(--f-body); font-size:.88rem;
  margin-bottom:.5rem; outline:none;
  backdrop-filter: blur(8px);
  transition: border-color .2s, background .2s;
}
.field::placeholder { color:var(--tx-3); }
.field:focus {
  border-color:rgba(124,58,237,.55);
  background: var(--glass-2);
}
.field-ta { min-height:90px; resize:vertical; }
.field-select { appearance:none; cursor:pointer; }
option { background:var(--bg-2); color:var(--tx-1); }

/* Buttons */
.btn-primary {
  width:100%; padding:.78rem;
  background: linear-gradient(135deg, var(--violet), var(--electric));
  color:#fff; border-radius:var(--r-xs);
  font-size:.94rem; font-weight:600; letter-spacing:.02em;
  box-shadow: var(--shadow-sm);
  transition: opacity .2s, transform .15s var(--spring);
}
.btn-primary:hover { opacity:.88; transform:translateY(-1px); }
.btn-primary:active { transform:scale(.98); }

.btn-gold {
  width:100%; padding:.78rem;
  background: linear-gradient(135deg, var(--gold), #D97706);
  color:#1a0800; border-radius:var(--r-xs);
  font-size:.94rem; font-weight:700; letter-spacing:.02em;
  box-shadow: var(--shadow-gold);
  transition: opacity .2s, transform .15s var(--spring);
}
.btn-gold:hover { opacity:.88; transform:translateY(-1px); }

.btn-glass {
  width:100%; padding:.72rem;
  background: var(--glass-2);
  border: 1px solid var(--glass-border-hi);
  color:var(--tx-1); border-radius:var(--r-xs);
  font-size:.88rem; font-weight:600;
  backdrop-filter: blur(8px);
  transition: background .2s, transform .15s var(--spring);
}
.btn-glass:hover { background:var(--glass-3); }

.btn-danger {
  width:100%; padding:.72rem;
  background: rgba(239,68,68,.1);
  border: 1px solid rgba(239,68,68,.25);
  color:#FCA5A5; border-radius:var(--r-xs);
  font-size:.9rem; font-weight:600;
  transition: background .2s;
}
.btn-danger:hover { background:rgba(239,68,68,.2); }

.btn-sm {
  padding:.38rem .85rem; border-radius:20px;
  font-size:.78rem; font-weight:600;
  transition: opacity .2s, transform .15s var(--spring);
}
.btn-sm:hover { opacity:.85; transform:scale(1.03); }

/* ── ADMIN PANEL ──────────────────────────────────────── */
.admin-only { display:none; }
body.admin-mode .admin-only { display:block; }
.admin-panel {
  background: rgba(245,158,11,.04);
  border: 1px dashed rgba(245,158,11,.25);
  border-radius:var(--r); padding:1.1rem; margin-bottom:1.1rem;
}
.admin-label {
  font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(245,158,11,.7); margin-bottom:.75rem;
}

/* ── FILE UPLOAD ──────────────────────────────────────── */
.file-label {
  display:flex; align-items:center; gap:.5rem;
  padding:.6rem 1rem;
  background: var(--glass);
  border: 1.5px dashed var(--glass-border-hi);
  border-radius:var(--r-xs);
  font-size:.84rem; color:var(--tx-2);
  cursor:pointer; margin-bottom:.5rem;
  transition: border-color .2s, background .2s;
}
.file-label:hover { border-color:rgba(124,58,237,.45); background:var(--glass-2); }
.file-input-hidden { position:absolute; opacity:0; width:0; height:0; pointer-events:none; }
.thumb-preview {
  margin-bottom:.5rem; border-radius:var(--r-xs); overflow:hidden;
  border:1px solid var(--glass-border); max-height:160px;
}
.thumb-preview img,.thumb-preview video { width:100%; max-height:160px; object-fit:cover; }

/* ── FEED CARDS ───────────────────────────────────────── */
.feed { display:flex; flex-direction:column; gap:.65rem; }
.empty-state {
  text-align:center; padding:3rem 1rem;
  color:var(--tx-3); font-size:.88rem; line-height:1.6;
}
.empty-icon { font-size:2rem; opacity:.25; display:block; margin-bottom:.5rem; }

.feed-card {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius:var(--r); padding:1.1rem 1.15rem;
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  transition: border-color .2s, transform .2s var(--spring);
  position:relative; overflow:hidden;
  animation: pageIn .28s var(--ease) both;
}
.feed-card::before {
  content:''; position:absolute; top:0; left:0; width:3px; height:100%;
  background: linear-gradient(to bottom, var(--violet), var(--sky));
  border-radius:4px 0 0 4px;
}
.feed-card:hover { border-color:var(--glass-border-hi); transform:translateY(-1px); }

.fc-header { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:.45rem; }
.fc-title  { font-family:var(--f-display); font-size:1rem; font-weight:700; color:var(--tx-1); line-height:1.3; flex:1; }
.fc-meta   { font-size:.7rem; color:var(--tx-3); margin-bottom:.38rem; }
.fc-body   { font-size:.88rem; color:var(--tx-2); line-height:1.68; }
.fc-img    { width:100%; border-radius:var(--r-sm); margin-bottom:.6rem; object-fit:cover; max-height:180px; }

.fc-actions { display:flex; align-items:center; gap:.5rem; margin-top:.75rem; flex-wrap:wrap; }
.react-btn {
  display:flex; align-items:center; gap:.3rem;
  padding:.3rem .65rem; border-radius:20px;
  background:var(--glass-2); border:1px solid var(--glass-border);
  font-size:.78rem; color:var(--tx-2); cursor:pointer;
  transition: background .2s, transform .15s var(--spring);
}
.react-btn:hover { background:var(--glass-3); transform:scale(1.04); }
.react-btn.reacted { background:var(--gold-lo); border-color:rgba(245,158,11,.3); color:var(--gold); }

.del-btn {
  background:rgba(239,68,68,.08); border:1px solid rgba(239,68,68,.18);
  color:#F87171; border-radius:50%; width:28px; height:28px;
  font-size:.72rem; display:flex; align-items:center; justify-content:center;
  flex-shrink:0; cursor:pointer; transition:background .2s;
}
.del-btn:hover { background:rgba(239,68,68,.2); }

.edit-btn {
  background:var(--glass-2); border:1px solid var(--glass-border);
  color:var(--tx-2); border-radius:50%; width:28px; height:28px;
  font-size:.72rem; display:flex; align-items:center; justify-content:center;
  flex-shrink:0; cursor:pointer; transition:background .2s;
}
.edit-btn:hover { background:var(--glass-3); }

/* ── HERO ─────────────────────────────────────────────── */
.hero {
  position:relative; border-radius:var(--r); overflow:hidden;
  margin-bottom:.9rem; min-height:190px;
}
.hero-bg {
  position:absolute; inset:0;
  background: linear-gradient(135deg,
    rgba(124,58,237,.28) 0%,
    rgba(79,70,229,.18) 50%,
    rgba(14,165,233,.14) 100%);
  border:1px solid var(--glass-border-hi);
  border-radius:var(--r);
  backdrop-filter: blur(12px);
}

/* Hero Slideshow */
.hero-slideshow {
  position:absolute; inset:0; border-radius:var(--r); overflow:hidden; z-index:0;
}
.hero-slide {
  position:absolute; inset:0; opacity:0;
  transition: opacity 1.2s ease-in-out;
  border-radius:var(--r);
}
.hero-slide.active { opacity:1; }
.hero-dots {
  position:absolute; bottom:.6rem; left:50%; transform:translateX(-50%);
  display:flex; gap:.35rem; z-index:2;
}
.hero-dot {
  width:6px; height:6px; border-radius:50%;
  background:rgba(255,255,255,.3); transition:background .4s, width .4s;
  cursor:pointer;
}
.hero-dot.active { background:rgba(255,255,255,.85); width:16px; border-radius:3px; }

.hero-cross {
  position:absolute; right:1.2rem; top:50%; transform:translateY(-50%);
  font-size:5.5rem; color:rgba(245,158,11,.08);
  font-family:var(--f-display); line-height:1;
  animation: spinSlow 60s linear infinite;
}
.hero-content {
  position:relative; z-index:1; padding:1.4rem 1.3rem;
  display:flex; flex-direction:column; gap:.28rem;
}
.hero-eyebrow { display:flex; align-items:center; gap:.65rem; margin-bottom:.4rem; }
.live-badge {
  font-size:.6rem; font-weight:700; letter-spacing:.1em;
  color:var(--mint); padding:2px 8px; border-radius:20px;
  background:rgba(16,185,129,.12); border:1px solid rgba(16,185,129,.28);
}
.hero-time { font-size:.7rem; color:var(--tx-3); }
.hero-greeting { font-family:var(--f-display); font-size:.95rem; font-weight:600; color:var(--tx-2); }
.hero-church {
  font-family:var(--f-display); font-size:2rem; font-weight:800;
  color:var(--tx-1); line-height:1.1;
  animation: slideUp .5s var(--spring) .08s both;
}
@keyframes slideUp { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
.hero-logo-wrap { margin-top:.7rem; display:flex; align-items:center; gap:.7rem; }
.hero-logo {
  width:48px; height:48px; border-radius:50%;
  background:var(--glass-2); border:2px solid rgba(245,158,11,.4);
  display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; overflow:hidden; flex-shrink:0;
}
.hero-logo img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.upload-chip {
  font-size:.67rem; font-weight:600; padding:4px 10px; border-radius:20px;
  background:var(--glass-2); border:1px solid var(--glass-border-hi);
  color:var(--tx-2); cursor:pointer; transition:background .2s;
}
.upload-chip:hover { background:var(--glass-3); }

/* ── VERSE BLOCK ──────────────────────────────────────── */
.verse-block { display:flex; gap:.9rem; align-items:flex-start; }
.verse-icon { font-size:1.3rem; margin-top:.1rem; flex-shrink:0; }
.verse-content { flex:1; }
.verse-text { font-size:.92rem; font-style:italic; color:var(--tx-1); line-height:1.78; margin:.3rem 0 .45rem; }
.verse-ref  { font-size:.72rem; font-weight:700; letter-spacing:.06em; color:var(--gold); }

/* ── SERVICE TIMES ────────────────────────────────────── */
.service-list { display:flex; flex-direction:column; gap:.4rem; margin-top:.5rem; }
.service-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:.48rem .75rem;
  background:var(--glass); border-radius:var(--r-xs);
  border:1px solid var(--glass-border);
}
.service-day   { font-size:.86rem; font-weight:600; color:var(--tx-1); }
.service-badge {
  font-size:.72rem; font-weight:600; color:var(--gold);
  padding:3px 10px; background:var(--gold-lo);
  border-radius:20px; border:1px solid rgba(245,158,11,.2);
}

/* ── ACTION GRID ──────────────────────────────────────── */
.action-grid {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:.55rem; margin-bottom:1.1rem;
}
.action-tile {
  background:var(--glass); border:1px solid var(--glass-border);
  border-radius:var(--r-sm); padding:.82rem .25rem .6rem;
  display:flex; flex-direction:column; align-items:center; gap:.38rem;
  font-size:.65rem; font-weight:600; color:var(--tx-2);
  transition: transform .18s var(--spring), border-color .2s;
  -webkit-tap-highlight-color:transparent;
  backdrop-filter: blur(8px);
}
.action-tile:hover,.action-tile:active {
  transform:scale(1.06) translateY(-2px);
  border-color:var(--glass-border-hi);
}
.tile-icon {
  width:40px; height:40px; border-radius:50%;
  background: linear-gradient(135deg, var(--c1,#7C3AED), var(--c2,#4F46E5));
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; box-shadow:var(--shadow-sm);
}

/* ── EVENTS ───────────────────────────────────────────── */
.event-card {
  background:var(--glass); border:1px solid var(--glass-border);
  border-radius:var(--r); padding:1rem;
  display:flex; gap:.8rem; align-items:flex-start;
  backdrop-filter:var(--blur); transition:border-color .2s, transform .2s var(--spring);
  animation:pageIn .28s var(--ease) both;
}
.event-card:hover { border-color:var(--glass-border-hi); transform:translateY(-1px); }
.event-date-badge {
  flex-shrink:0; display:flex; flex-direction:column; align-items:center;
  background:linear-gradient(135deg, var(--violet), var(--electric));
  border-radius:var(--r-xs); padding:.5rem .6rem; min-width:48px;
}
.edb-day { font-family:var(--f-display); font-size:1.4rem; font-weight:800; color:#fff; line-height:1; }
.edb-mon { font-size:.56rem; font-weight:700; letter-spacing:.1em; color:rgba(255,255,255,.75); text-transform:uppercase; }
.event-info  { flex:1; }
.event-title { font-family:var(--f-display); font-size:.95rem; font-weight:700; color:var(--tx-1); }
.event-desc  { font-size:.82rem; color:var(--tx-2); margin-top:.28rem; line-height:1.55; }
.event-meta  { font-size:.72rem; color:var(--tx-3); margin-top:.3rem; display:flex; gap:.75rem; flex-wrap:wrap; }

/* ── SERMONS ──────────────────────────────────────────── */
.sermon-grid { display:grid; grid-template-columns:1fr 1fr; gap:.65rem; }
.sermon-card {
  background:var(--glass); border:1px solid var(--glass-border);
  border-radius:var(--r); overflow:hidden;
  backdrop-filter:var(--blur); transition:border-color .2s, transform .2s var(--spring);
  animation:pageIn .28s var(--ease) both;
}
.sermon-card:hover { border-color:var(--glass-border-hi); transform:translateY(-2px); }
.sermon-thumb {
  height:115px; background:var(--bg-3);
  display:flex; align-items:center; justify-content:center;
  font-size:2.2rem; position:relative; overflow:hidden;
}
.sermon-thumb img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.sermon-play {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.35); color:#fff; font-size:1.8rem;
  opacity:0; transition:opacity .2s;
}
.sermon-card:hover .sermon-play { opacity:1; }
.sermon-body { padding:.85rem .9rem; }
.sermon-title    { font-family:var(--f-display); font-size:.92rem; font-weight:700; color:var(--tx-1); }
.sermon-preacher { font-size:.74rem; color:var(--tx-3); margin:.18rem 0 .55rem; }
.sermon-watch {
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.38rem .85rem; border-radius:20px;
  background:linear-gradient(135deg, var(--violet), var(--electric));
  color:#fff; font-size:.76rem; font-weight:600; border:none;
  font-family:var(--f-body); cursor:pointer; transition:opacity .2s;
}
.sermon-watch:hover { opacity:.85; }

/* ── PRAYER / TESTIMONIES ─────────────────────────────── */
.seg-control {
  display:flex; gap:.35rem; background:var(--glass);
  border:1px solid var(--glass-border); border-radius:30px; padding:.28rem;
  margin-bottom:.8rem;
}
.seg-btn {
  flex:1; padding:.48rem; border-radius:24px;
  font-size:.78rem; font-weight:600; color:var(--tx-2);
  transition:background .2s, color .2s;
}
.seg-btn.active { background:var(--violet); color:#fff; }

.prayer-card {
  background:var(--glass); border:1px solid var(--glass-border);
  border-radius:var(--r); padding:1rem;
  backdrop-filter:var(--blur); animation:pageIn .28s var(--ease) both;
  transition:border-color .2s;
}
.prayer-card:hover { border-color:var(--glass-border-hi); }
.prayer-author { font-size:.8rem; font-weight:700; color:var(--tx-1); margin-bottom:.3rem; }
.prayer-text   { font-size:.87rem; color:var(--tx-2); line-height:1.65; }
.prayer-meta   { font-size:.7rem; color:var(--tx-3); margin-top:.4rem; }

/* ── GALLERY ──────────────────────────────────────────── */
.gallery-grid {
  display:grid; grid-template-columns:repeat(2,1fr); gap:.45rem;
}
.gallery-item {
  border-radius:var(--r-sm); overflow:hidden;
  aspect-ratio:1; position:relative; cursor:pointer;
  background:var(--bg-3);
}
.gallery-img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s; }
.gallery-item:hover .gallery-img { transform:scale(1.04); }
.gallery-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.65) 0%, transparent 55%);
  opacity:0; transition:opacity .22s;
  display:flex; flex-direction:column; justify-content:flex-end; padding:.55rem;
}
.gallery-item:hover .gallery-overlay { opacity:1; }
.gallery-cap { font-size:.74rem; color:#fff; font-weight:500; }
.gal-del {
  position:absolute; top:.45rem; right:.45rem;
  background:rgba(0,0,0,.55); border:none; border-radius:50%;
  width:28px; height:28px; display:none; align-items:center; justify-content:center;
  font-size:.72rem; color:#fff; cursor:pointer;
}
body.admin-mode .gal-del { display:flex; }

/* Lightbox */
.lightbox {
  position:fixed; inset:0; background:rgba(0,0,0,.9);
  display:flex; align-items:center; justify-content:center;
  z-index:9999; padding:1rem; animation:pageIn .2s var(--ease);
}
.lightbox-inner { position:relative; max-width:92vw; max-height:92vh; }
.lb-close {
  position:absolute; top:-.65rem; right:-.65rem; z-index:2;
  background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.2);
  color:#fff; border-radius:50%; width:32px; height:32px;
  font-size:.8rem; display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.lb-img { max-width:100%; max-height:82vh; border-radius:var(--r-sm); display:block; }
.lb-caption { color:rgba(255,255,255,.7); font-size:.82rem; text-align:center; margin-top:.5rem; }

/* ── LEADERSHIP ───────────────────────────────────────── */
.leader-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:.75rem; }
.leader-card {
  background:var(--glass); border:1px solid var(--glass-border);
  border-radius:var(--r); padding:1rem .8rem;
  text-align:center; backdrop-filter:var(--blur);
  transition:border-color .2s, transform .2s var(--spring);
  animation:pageIn .28s var(--ease) both;
}
.leader-card:hover { border-color:var(--glass-border-hi); transform:translateY(-2px); }
.leader-img {
  width:70px; height:70px; border-radius:50%; object-fit:cover;
  margin:0 auto .6rem; display:block; border:2px solid var(--glass-border-hi);
}
.leader-initials {
  width:70px; height:70px; border-radius:50%;
  background:linear-gradient(135deg, var(--violet), var(--electric));
  display:flex; align-items:center; justify-content:center;
  margin:0 auto .6rem;
  font-family:var(--f-display); font-size:1.3rem; font-weight:700; color:#fff;
}
.leader-name    { font-family:var(--f-display); font-size:.9rem; font-weight:700; color:var(--tx-1); }
.leader-role    { font-size:.74rem; color:var(--gold); font-weight:600; margin-top:.18rem; }
.leader-contact { font-size:.7rem; color:var(--tx-3); margin-top:.18rem; }

/* ── DEVOTIONS ────────────────────────────────────────── */
.devotion-card {
  background:var(--glass); border:1px solid rgba(124,58,237,.2);
  border-radius:var(--r); padding:1.2rem;
  backdrop-filter:var(--blur); animation:pageIn .28s var(--ease) both;
  transition:border-color .2s;
}
.devotion-card:hover { border-color:rgba(124,58,237,.35); }
.dev-date   { font-size:.68rem; color:var(--tx-3); margin-bottom:.5rem; }
.dev-title  { font-family:var(--f-display); font-size:1.05rem; font-weight:700; color:var(--tx-1); margin-bottom:.5rem; }
.dev-verse  { font-size:.88rem; font-style:italic; color:var(--gold); margin-bottom:.7rem; line-height:1.62; }
.dev-message { font-size:.88rem; color:var(--tx-2); line-height:1.72; margin-bottom:.7rem; }
.dev-prayer { font-size:.84rem; color:var(--tx-3); font-style:italic; line-height:1.6; border-top:1px solid var(--glass-border); padding-top:.6rem; margin-top:.3rem; }

/* AI Panel */
.ai-panel {
  background:linear-gradient(135deg, rgba(124,58,237,.08), rgba(79,70,229,.05));
  border:1px solid rgba(124,58,237,.2); border-radius:var(--r); padding:1.1rem; margin-bottom:1rem;
}
.ai-label {
  font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(124,58,237,.8); margin-bottom:.7rem;
  display:flex; align-items:center; gap:.4rem;
}
.ai-loader { display:flex; align-items:center; gap:.7rem; padding:.8rem 0; color:var(--tx-2); font-size:.87rem; }
.ai-spinner {
  width:20px; height:20px; border-radius:50%;
  border:2px solid var(--glass-border); border-top-color:var(--violet);
  animation:spin .7s linear infinite; flex-shrink:0;
}
@keyframes spin { to { transform:rotate(360deg); } }
.ai-draft {
  background:var(--glass-2); border:1px solid rgba(124,58,237,.2);
  border-radius:var(--r-sm); padding:1rem; margin-top:.75rem;
}
.ai-draft-title { font-family:var(--f-display); font-size:.92rem; font-weight:700; color:var(--tx-1); margin-bottom:.4rem; }
.ai-draft-body  { font-size:.86rem; color:var(--tx-2); line-height:1.68; }
.ai-draft-actions { display:flex; gap:.5rem; margin-top:.75rem; }
.ai-draft-actions .btn-primary,.ai-draft-actions .btn-glass { flex:1; }

.quote-card {
  background:linear-gradient(135deg, rgba(124,58,237,.1), rgba(79,70,229,.06));
  border:1px solid rgba(124,58,237,.2); border-radius:var(--r-sm);
  padding:.9rem 1rem; margin-bottom:.5rem; position:relative;
}
.quote-card::before { content:'"'; position:absolute; top:.3rem; left:.8rem; font-size:2.5rem; color:rgba(124,58,237,.15); font-family:serif; line-height:1; }
.quote-text { font-size:.9rem; color:var(--tx-1); line-height:1.65; padding-left:.5rem; font-style:italic; }
.quote-actions { display:flex; gap:.4rem; margin-top:.6rem; }

/* ── BIRTHDAYS ────────────────────────────────────────── */
.bd-scroll {
  display:flex; gap:.65rem; overflow-x:auto; scrollbar-width:none;
  padding:.2rem .1rem .7rem; margin-bottom:.5rem;
}
.bd-scroll::-webkit-scrollbar { display:none; }
.bd-spot {
  flex-shrink:0; background:rgba(244,63,94,.08);
  border:1px solid rgba(244,63,94,.2); border-radius:var(--r);
  padding:.8rem .75rem; text-align:center; min-width:92px; position:relative;
}
.bd-spot.today { border-color:rgba(244,63,94,.5); background:rgba(244,63,94,.12); }
.bd-spot-img {
  width:46px; height:46px; border-radius:50%; object-fit:cover;
  border:2px solid rgba(244,63,94,.35); margin:0 auto .4rem; display:block;
}
.bd-spot-init {
  width:46px; height:46px; border-radius:50%;
  background:linear-gradient(135deg, #F43F5E, #FB923C);
  display:flex; align-items:center; justify-content:center;
  font-size:.82rem; font-weight:700; color:#fff;
  margin:0 auto .4rem;
}
.bd-today-badge {
  position:absolute; top:-.4rem; left:50%; transform:translateX(-50%);
  background:linear-gradient(135deg, #F43F5E, #FB923C);
  color:#fff; font-size:.56rem; font-weight:700;
  padding:2px 7px; border-radius:10px; white-space:nowrap; letter-spacing:.04em;
}
.bd-spot-name { font-size:.73rem; font-weight:700; color:var(--tx-1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:84px; }
.bd-spot-date { font-size:.66rem; color:var(--tx-3); margin-top:.1rem; }
.bd-wish-btn {
  margin-top:.42rem; padding:3px 9px; border-radius:20px;
  background:rgba(244,63,94,.1); border:1px solid rgba(244,63,94,.22);
  color:#F43F5E; font-size:.66rem; font-weight:600;
  cursor:pointer; font-family:var(--f-body); width:100%;
  transition:background .18s;
}
.bd-wish-btn:hover { background:rgba(244,63,94,.22); }

.bd-card {
  background:var(--glass); border:1px solid var(--glass-border);
  border-radius:var(--r); padding:.9rem;
  display:flex; align-items:center; gap:.8rem;
  animation:pageIn .28s var(--ease) both; transition:border-color .2s;
}
.bd-card:hover { border-color:var(--glass-border-hi); }
.bd-avatar { width:44px; height:44px; border-radius:50%; object-fit:cover; flex-shrink:0; border:2px solid var(--glass-border-hi); }
.bd-initials {
  width:44px; height:44px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg, #F43F5E, #FB923C);
  display:flex; align-items:center; justify-content:center;
  font-size:.78rem; font-weight:700; color:#fff;
}
.bd-info    { flex:1; }
.bd-name    { font-family:var(--f-display); font-size:.9rem; font-weight:700; color:var(--tx-1); }
.bd-date    { font-size:.74rem; color:var(--tx-3); margin-top:.1rem; }
.bd-countdown { font-size:.7rem; font-weight:700; color:#F43F5E; margin-top:.15rem; }

/* ── CHAT ─────────────────────────────────────────────── */
.chat-page { padding:0!important; height:calc(100dvh - var(--top-h) - var(--nav-h)); overflow:hidden; }
.chat-layout { display:flex; height:100%; }

.chat-sidebar {
  width:260px; flex-shrink:0; height:100%;
  border-right:1px solid var(--glass-border);
  display:flex; flex-direction:column; overflow:hidden;
}
.chat-sidebar-header { padding:.85rem 1rem; border-bottom:1px solid var(--glass-border); flex-shrink:0; }
.chat-sidebar-title  { font-family:var(--f-display); font-size:1.05rem; font-weight:700; color:var(--tx-1); margin-bottom:.55rem; }
.chat-search {
  width:100%; padding:.48rem .82rem;
  background:var(--glass); border:1px solid var(--glass-border);
  border-radius:20px; color:var(--tx-1); font-family:var(--f-body); font-size:.83rem;
  outline:none; transition:border-color .2s;
}
.chat-search:focus { border-color:rgba(124,58,237,.45); }

.chat-user-list { flex:1; overflow-y:auto; }
.chat-user-row {
  display:flex; align-items:center; gap:.7rem;
  padding:.75rem 1rem; border-bottom:1px solid var(--glass-border);
  cursor:pointer; transition:background .18s;
}
.chat-user-row:hover  { background:var(--glass); }
.chat-user-row.active { background:var(--violet-lo); }
.chat-user-row.chat-row-unread { background:rgba(34,197,94,.05); }
.chat-user-row.chat-row-unread:hover { background:rgba(34,197,94,.09); }

.chat-user-av-wrap { position:relative; flex-shrink:0; }
.chat-user-av {
  width:40px; height:40px; border-radius:50%; object-fit:cover;
  border:1.5px solid var(--glass-border-hi); display:block;
}
.chat-user-av-init {
  width:40px; height:40px; border-radius:50%;
  background:linear-gradient(135deg, var(--violet), var(--electric));
  display:flex; align-items:center; justify-content:center;
  font-size:.7rem; font-weight:700; color:#fff;
}
.chat-unread-dot {
  position:absolute; top:0; right:0;
  width:10px; height:10px; border-radius:50%;
  background:var(--violet); border:2px solid var(--bg-1);
}
.chat-user-meta { flex:1; min-width:0; }
.chat-user-name { font-size:.87rem; font-weight:600; color:var(--tx-1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-user-preview { font-size:.72rem; color:var(--tx-3); margin-top:.08rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.chat-convo { flex:1; display:flex; flex-direction:column; overflow:hidden; height:100%; }
.chat-convo-empty {
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:var(--tx-3); gap:.65rem;
}
.chat-convo-active { flex:1; display:flex; flex-direction:column; overflow:hidden; }

.chat-convo-header {
  flex-shrink:0; border-bottom:1px solid var(--glass-border);
  background:var(--glass); padding:.7rem 1rem;
  display:flex; align-items:center; gap:.7rem;
}
.chat-back-btn { background:none; color:var(--tx-2); font-size:1.1rem; cursor:pointer; padding:.2rem; display:none; }

.chat-messages {
  flex:1; overflow-y:auto; padding:.8rem .9rem;
  display:flex; flex-direction:column; gap:.45rem; scroll-behavior:smooth;
}
.chat-messages::-webkit-scrollbar { width:3px; }
.chat-messages::-webkit-scrollbar-thumb { background:var(--glass-border); border-radius:2px; }

.chat-no-msgs { text-align:center; color:var(--tx-3); font-size:.84rem; padding:2rem 1rem; }

.msg { display:flex; align-items:flex-end; gap:.38rem; }
.msg.other { justify-content:flex-start; }
.msg.mine  { justify-content:flex-end; }
.msg-av {
  width:26px; height:26px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg, var(--violet), var(--electric));
  display:flex; align-items:center; justify-content:center;
  font-size:.58rem; font-weight:700; color:#fff;
}
.msg-content { display:flex; flex-direction:column; max-width:78%; }
.msg-content.mine  { align-items:flex-end; }
.msg-content.other { align-items:flex-start; }
.msg-author { font-size:.63rem; color:var(--tx-3); margin-bottom:.1rem; padding:0 .32rem; }
.msg-bubble {
  padding:.48rem .78rem; border-radius:16px;
  font-size:.84rem; line-height:1.5; word-break:break-word;
}
.msg.other .msg-bubble {
  background:var(--glass-2); border:1px solid var(--glass-border);
  color:var(--tx-1); border-bottom-left-radius:4px;
}
.msg.mine .msg-bubble {
  background:linear-gradient(135deg, var(--violet), var(--electric));
  color:#fff; border-bottom-right-radius:4px; box-shadow:var(--shadow-sm);
}
.msg.ai .msg-bubble {
  background:linear-gradient(135deg, rgba(124,58,237,.15), rgba(79,70,229,.1));
  border:1px solid rgba(124,58,237,.25); color:var(--tx-1);
  border-bottom-left-radius:4px;
}
.msg-time { font-size:.6rem; color:var(--tx-3); padding:0 .32rem; margin-top:.06rem; display:flex; align-items:center; gap:.25rem; }
.msg-receipt { font-size:.68rem; font-weight:700; }
.msg-receipt.sent  { color:var(--tx-3); }
.msg-receipt.read  { color:#60a5fa; }

.msg-ctx-menu button,
.chat-options-menu button {
  display:block; width:100%; text-align:left; background:none; border:none;
  color:var(--tx-1); font-size:.86rem; padding:.5rem .85rem; cursor:pointer;
  border-radius:4px; font-family:var(--f-body);
}
.msg-ctx-menu button:hover,
.chat-options-menu button:hover { background:var(--glass); }

.chat-input-bar {
  flex-shrink:0; display:flex; align-items:center; gap:.5rem;
  padding:.75rem 1rem; border-top:1px solid var(--glass-border);
  background:var(--glass);
}
.chat-field {
  flex:1; background:var(--glass-2); border:1px solid var(--glass-border);
  border-radius:22px; padding:.6rem 1rem; font-size:.88rem;
  color:var(--tx-1); font-family:var(--f-body); outline:none;
  transition:border-color .2s; line-height:1.4; min-height:40px;
}
.chat-field:focus { border-color:rgba(124,58,237,.45); }
.chat-send {
  width:40px; height:40px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg, var(--violet), var(--electric));
  color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-sm); transition:transform .18s var(--spring);
}
.chat-send:hover { transform:scale(1.08); }
.chat-send svg { width:16px; height:16px; }

/* ── CONTACT ──────────────────────────────────────────── */
.contact-row {
  display:flex; align-items:center; gap:.72rem;
  padding:.58rem 0; border-bottom:1px solid var(--glass-border);
  font-size:.9rem; color:var(--tx-1);
}
.contact-row:last-child { border-bottom:none; }
.contact-icon { font-size:1.05rem; width:22px; text-align:center; flex-shrink:0; }
.social-row { display:flex; gap:.45rem; flex-wrap:wrap; margin-bottom:.9rem; }
.social-pill {
  padding:.42rem .88rem; border-radius:20px;
  border:1px solid var(--glass-border-hi); background:var(--glass-2);
  font-size:.8rem; font-weight:600; color:var(--tx-1);
  transition:background .2s; cursor:pointer;
}
.social-pill:hover { background:var(--glass-3); }

/* ── PROFILE ──────────────────────────────────────────── */
.profile-card { display:flex; align-items:center; gap:.9rem; }
.profile-pic-wrap { position:relative; flex-shrink:0; }
.profile-pic {
  width:74px; height:74px; border-radius:50%; object-fit:cover;
  border:2px solid var(--glass-border-hi); display:block; overflow:hidden;
  background:linear-gradient(135deg, var(--violet), var(--electric));
  display:flex; align-items:center; justify-content:center;
}
.profile-pic img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.profile-pic-init { font-family:var(--f-display); font-size:1.5rem; font-weight:700; color:#fff; }
.profile-edit-btn {
  position:absolute; bottom:0; right:0;
  background:var(--bg-2); border:1px solid var(--glass-border-hi);
  border-radius:50%; width:24px; height:24px;
  display:flex; align-items:center; justify-content:center;
  font-size:.68rem; cursor:pointer;
}
.profile-info { flex:1; }
.profile-name { font-family:var(--f-display); font-size:1.1rem; font-weight:700; color:var(--tx-1); }
.profile-dept { font-size:.8rem; color:var(--tx-3); margin-top:.18rem; }
.profile-badge {
  display:inline-block; margin-top:.38rem;
  font-size:.6rem; font-weight:700; letter-spacing:.1em;
  padding:2px 10px; border-radius:20px;
  background:var(--gold-lo); border:1px solid rgba(245,158,11,.3);
  color:var(--gold);
}

/* ── THEME SWITCHER ───────────────────────────────────── */
.theme-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:.45rem; }
.theme-opt {
  display:flex; align-items:center; gap:.5rem;
  padding:.58rem .78rem; border-radius:var(--r-xs);
  background:var(--glass); border:1px solid var(--glass-border);
  font-size:.82rem; color:var(--tx-2); cursor:pointer; font-family:var(--f-body);
  transition:background .2s, border-color .2s;
}
.theme-opt.active { border-color:var(--violet); color:var(--tx-1); background:var(--violet-lo); }
.theme-swatch { width:20px; height:20px; border-radius:50%; flex-shrink:0; }

/* ── MODAL ────────────────────────────────────────────── */
.modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.7);
  backdrop-filter:blur(6px); z-index:5000;
  display:flex; align-items:flex-end; justify-content:center;
  animation:pageIn .2s var(--ease);
}
.modal-sheet {
  width:100%; max-width:480px; max-height:90dvh;
  background:var(--bg-2); border-radius:var(--r) var(--r) 0 0;
  border:1px solid var(--glass-border-hi); border-bottom:none;
  overflow-y:auto; padding:1.25rem 1.2rem;
  animation:slideUp .3s var(--spring) both;
}
.modal-handle {
  width:40px; height:4px; border-radius:2px;
  background:var(--glass-3); margin:0 auto .9rem;
}
.modal-title { font-family:var(--f-display); font-size:1.1rem; font-weight:700; color:var(--tx-1); margin-bottom:1rem; }

/* ── AUTH ─────────────────────────────────────────────── */
.auth-screen {
  position:fixed; inset:0; z-index:3000;
  display:flex; align-items:center; justify-content:center;
  padding:1rem; background:var(--bg-1); overflow-y:auto;
}
.auth-card {
  width:100%; max-width:400px;
  background:var(--glass); border:1px solid var(--glass-border-hi);
  border-radius:calc(var(--r) + 4px); padding:2rem 1.75rem;
  backdrop-filter:blur(24px); box-shadow:var(--shadow-lg);
  animation:slideUp .4s var(--spring) both;
}
.auth-brand { text-align:center; margin-bottom:1.65rem; }
.auth-logo  {
  font-size:2.6rem; color:var(--gold); display:block;
  animation:spinSlow 18s linear infinite; margin-bottom:.45rem;
}
.auth-title   { font-family:var(--f-display); font-size:1.75rem; font-weight:800; color:var(--tx-1); }
.auth-tagline { font-size:.8rem; color:var(--tx-3); margin-top:.2rem; }

.auth-tabs {
  display:flex; gap:.28rem;
  background:var(--glass); border:1px solid var(--glass-border);
  border-radius:30px; padding:.28rem; margin-bottom:1.1rem;
}
.auth-tab {
  flex:1; padding:.5rem; border-radius:24px;
  font-size:.83rem; font-weight:600; color:var(--tx-2);
  transition:background .2s, color .2s;
}
.auth-tab.active { background:var(--violet); color:#fff; }

.auth-error {
  margin-top:.7rem; padding:.55rem .85rem;
  background:rgba(239,68,68,.1); border:1px solid rgba(239,68,68,.25);
  border-radius:var(--r-xs); color:#FCA5A5; font-size:.83rem; line-height:1.5;
}
.auth-loader {
  display:flex; align-items:center; justify-content:center;
  gap:.6rem; padding:.9rem; color:var(--tx-2); font-size:.87rem; margin-top:.4rem;
}
.spinner {
  width:18px; height:18px; border-radius:50%;
  border:2px solid var(--glass-border); border-top-color:var(--violet);
  animation:spin .7s linear infinite; flex-shrink:0;
}

/* ── TOAST ────────────────────────────────────────────── */
.toast {
  position:fixed; bottom:calc(var(--nav-h) + 4.5rem); left:50%;
  transform:translateX(-50%);
  background:rgba(18,14,40,.97); backdrop-filter:blur(16px);
  border:1px solid var(--glass-border-hi); border-radius:50px;
  padding:.48rem 1.2rem; font-size:.83rem; color:var(--tx-1);
  font-family:var(--f-body); z-index:9997; white-space:nowrap;
  animation:toastIn .22s var(--spring) both; box-shadow:var(--shadow-md);
}
.toast-success { border-color:rgba(16,185,129,.38); color:var(--mint); }
.toast-error   { border-color:rgba(239,68,68,.38); color:#FCA5A5; }
@keyframes toastIn { from{opacity:0;transform:translate(-50%,12px)} to{opacity:1;transform:translate(-50%,0)} }

/* ── PROGRAMMES ───────────────────────────────────────── */
.prog-card {
  background:var(--glass); border:1px solid var(--glass-border);
  border-radius:var(--r); padding:.95rem 1.1rem;
  display:flex; gap:.85rem; align-items:center;
  backdrop-filter:var(--blur); transition:border-color .2s;
  animation:pageIn .28s var(--ease) both;
}
.prog-card:hover { border-color:var(--glass-border-hi); }
.prog-time-badge {
  flex-shrink:0; background:var(--gold-lo); border:1px solid rgba(245,158,11,.2);
  border-radius:var(--r-xs); padding:.45rem .6rem; text-align:center; min-width:58px;
}
.prog-time { font-family:var(--f-display); font-size:.88rem; font-weight:700; color:var(--gold); }
.prog-day  { font-size:.6rem; color:var(--tx-3); margin-top:.08rem; }
.prog-info { flex:1; }
.prog-title { font-family:var(--f-display); font-size:.92rem; font-weight:700; color:var(--tx-1); }
.prog-desc  { font-size:.8rem; color:var(--tx-2); margin-top:.2rem; line-height:1.5; }

/* ── EDIT MODAL ───────────────────────────────────────── */
.edit-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.75);
  backdrop-filter:blur(8px); z-index:4000;
  display:flex; align-items:flex-end; justify-content:center;
}
.edit-sheet {
  width:100%; max-width:480px; max-height:88dvh;
  background:var(--bg-2); border-radius:var(--r) var(--r) 0 0;
  border:1px solid var(--glass-border-hi); border-bottom:none;
  overflow-y:auto; padding:1.2rem;
  animation:slideUp .3s var(--spring) both;
}
.edit-sheet-handle {
  width:40px; height:4px; border-radius:2px;
  background:var(--glass-3); margin:0 auto .85rem;
}
.edit-sheet-title { font-family:var(--f-display); font-size:1.05rem; font-weight:700; color:var(--tx-1); margin-bottom:.9rem; }

/* ── RESPONSIVE ───────────────────────────────────────── */
@media (max-width:520px) {
  .action-grid { grid-template-columns:repeat(3,1fr); }
  .leader-grid { grid-template-columns:1fr; }
  .sermon-grid { grid-template-columns:1fr; }
  .hero-church { font-size:1.8rem; }
  .theme-grid  { grid-template-columns:repeat(2,1fr); }
  .chat-sidebar { width:100%; border-right:none; }
  .chat-sidebar.hidden-mobile { display:none; }
  .chat-convo { display:none; }
  .chat-convo.active-mobile { display:flex; }
  .chat-back-btn { display:block!important; }
}
@media (min-width:480px) {
  .action-grid     { grid-template-columns:repeat(4,1fr); }
  .gallery-grid    { grid-template-columns:repeat(3,1fr); }
  .leader-grid     { grid-template-columns:repeat(3,1fr); }
}
@media (min-width:640px) {
  .chat-sidebar { display:flex!important; }
  .chat-convo   { display:flex!important; }
  .chat-back-btn { display:none!important; }
}

/* ── SCROLLBAR ────────────────────────────────────────── */
::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--glass-border); border-radius:8px; }
::-webkit-scrollbar-thumb:hover { background:var(--glass-border-hi); }

/* ── UTILITY ──────────────────────────────────────────── */
.mt-1  { margin-top:.5rem; }
.mt-2  { margin-top:1rem; }
.mb-1  { margin-bottom:.5rem; }
.mb-2  { margin-bottom:1rem; }
.text-gold { color:var(--gold); }
.text-muted { color:var(--tx-3); font-size:.82rem; }
.fw-bold { font-weight:700; }
.font-display { font-family:var(--f-display); }
.flex-row { display:flex; align-items:center; gap:.5rem; }
.flex-between { display:flex; align-items:center; justify-content:space-between; }
.w-full { width:100%; }
.hidden { display:none!important; }

/* ══════════════════════════════════════════════════════════
   HOME PAGE ANIMATIONS
══════════════════════════════════════════════════════════ */

/* ── Hero floating particles ─────────────────────────── */
.hero { overflow:hidden; }
.hero-bg::before, .hero-bg::after {
  content:''; position:absolute; border-radius:50%; pointer-events:none;
}
.hero-bg::before {
  width:120px; height:120px;
  background: radial-gradient(circle, rgba(245,158,11,.18) 0%, transparent 70%);
  top:-20px; left:-20px;
  animation: heroFloat1 8s ease-in-out infinite alternate;
}
.hero-bg::after {
  width:90px; height:90px;
  background: radial-gradient(circle, rgba(79,70,229,.22) 0%, transparent 70%);
  bottom:-10px; right:60px;
  animation: heroFloat2 11s ease-in-out infinite alternate;
}
@keyframes heroFloat1 { to { transform: translate(40px, 30px) scale(1.2); } }
@keyframes heroFloat2 { to { transform: translate(-30px, -25px) scale(1.15); } }

/* ── Hero cross glow pulse ───────────────────────────── */
.hero-cross {
  animation: spinSlow 60s linear infinite, crossGlow 4s ease-in-out infinite alternate !important;
}
@keyframes crossGlow {
  from { color: rgba(245,158,11,.07); text-shadow: none; }
  to   { color: rgba(245,158,11,.18); text-shadow: 0 0 40px rgba(245,158,11,.25); }
}

/* ── Hero greeting fade-slide chain ─────────────────── */
.hero-eyebrow  { animation: slideUp .4s var(--spring) .0s both; }
.hero-greeting { animation: slideUp .4s var(--spring) .06s both; }
.hero-church   { animation: slideUp .5s var(--spring) .12s both !important; }
.hero-logo-wrap{ animation: slideUp .4s var(--spring) .18s both; }

/* ── Verse block shimmer on load ─────────────────────── */
#votdCard {
  animation: pageIn .5s var(--ease) .25s both;
  position: relative; overflow: hidden;
}
#votdCard::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(110deg,
    transparent 30%,
    rgba(245,158,11,.06) 50%,
    transparent 70%);
  animation: shimmer 3.5s ease-in-out 1s 1;
}
@keyframes shimmer {
  from { transform: translateX(-100%); }
  to   { transform: translateX(200%); }
}
.verse-icon {
  animation: verseIconBounce 1s var(--spring) .6s both;
}
@keyframes verseIconBounce {
  0%   { transform: scale(0) rotate(-20deg); opacity:0; }
  70%  { transform: scale(1.2) rotate(5deg); }
  100% { transform: scale(1) rotate(0deg); opacity:1; }
}

/* ── Action tiles staggered entrance ─────────────────── */
.action-grid .action-tile:nth-child(1) { animation: tileIn .4s var(--spring) .15s both; }
.action-grid .action-tile:nth-child(2) { animation: tileIn .4s var(--spring) .22s both; }
.action-grid .action-tile:nth-child(3) { animation: tileIn .4s var(--spring) .29s both; }
.action-grid .action-tile:nth-child(4) { animation: tileIn .4s var(--spring) .36s both; }
.action-grid .action-tile:nth-child(5) { animation: tileIn .4s var(--spring) .43s both; }
.action-grid .action-tile:nth-child(6) { animation: tileIn .4s var(--spring) .50s both; }
.action-grid .action-tile:nth-child(7) { animation: tileIn .4s var(--spring) .57s both; }
.action-grid .action-tile:nth-child(8) { animation: tileIn .4s var(--spring) .64s both; }
@keyframes tileIn {
  from { opacity:0; transform: scale(.8) translateY(12px); }
  to   { opacity:1; transform: scale(1) translateY(0); }
}

/* ── Tile press & hover ripple ───────────────────────── */
.action-tile {
  transition: transform .15s var(--ease), box-shadow .2s, filter .2s !important;
}
.action-tile:hover {
  transform: translateY(-3px) scale(1.04) !important;
  filter: brightness(1.15);
  box-shadow: 0 8px 28px rgba(0,0,0,.35) !important;
}
.action-tile:active {
  transform: scale(.94) !important;
  transition: transform .08s !important;
}
.tile-icon {
  font-size:1.4rem;
  animation: tileIconFloat 3s ease-in-out infinite alternate;
}
.action-tile:nth-child(odd)  .tile-icon { animation-duration: 3.2s; }
.action-tile:nth-child(even) .tile-icon { animation-duration: 2.8s; animation-delay: .4s; }
@keyframes tileIconFloat {
  from { transform: translateY(0); }
  to   { transform: translateY(-3px); }
}

/* ── Home section cards staggered entrance ───────────── */
#pageHome .glass-card:nth-child(1) { animation: pageIn .45s var(--ease) .1s both; }
#pageHome .glass-card:nth-child(2) { animation: pageIn .45s var(--ease) .2s both; }
#pageHome .glass-card:nth-child(3) { animation: pageIn .45s var(--ease) .3s both; }
#pageHome .glass-card:nth-child(4) { animation: pageIn .45s var(--ease) .4s both; }

/* ── Announcement feed cards animate in ─────────────── */
#homeAnnouncementsFeed .glass-card {
  animation: slideUp .35s var(--spring) both;
}
#homeAnnouncementsFeed .glass-card:nth-child(1) { animation-delay: .05s; }
#homeAnnouncementsFeed .glass-card:nth-child(2) { animation-delay: .12s; }
#homeAnnouncementsFeed .glass-card:nth-child(3) { animation-delay: .19s; }

/* ── Logo pulse ring ─────────────────────────────────── */
.hero-logo {
  animation: logoRing 3.5s ease-in-out infinite;
}
@keyframes logoRing {
  0%,100% { box-shadow: 0 0 0 0 rgba(245,158,11,.25); }
  50%      { box-shadow: 0 0 0 8px rgba(245,158,11,.0); }
}


/* ══════════════════════════════════════════════════════════
   HOME CONTENT CAROUSEL
══════════════════════════════════════════════════════════ */
.home-carousel-wrap {
  margin-bottom: 1rem;
}

/* Tab pills row */
.hc-tabs {
  display: flex; gap: .35rem; overflow-x: auto; scrollbar-width: none;
  padding: .1rem .05rem .55rem; margin-bottom: .05rem;
}
.hc-tabs::-webkit-scrollbar { display:none; }
.hc-tab {
  flex-shrink: 0; padding: .38rem .82rem; border-radius: 20px;
  font-size: .76rem; font-weight: 600; font-family: var(--f-body);
  background: var(--glass); border: 1px solid var(--glass-border);
  color: var(--tx-2); cursor: pointer;
  transition: background .2s, color .2s, border-color .2s, transform .15s var(--spring);
}
.hc-tab:hover  { background: var(--glass-2); color: var(--tx-1); }
.hc-tab.active {
  background: var(--violet-lo); border-color: rgba(124,58,237,.4);
  color: var(--tx-1);
}

/* Viewport */
.hc-viewport {
  position: relative; overflow: hidden; min-height: 220px;
}
.hc-slide {
  display: none; flex-direction: column; gap: .55rem;
  animation: pageIn .28s var(--ease) both;
}
.hc-slide.active { display: flex; }

/* Cards inside carousel */
.hc-card {
  background: var(--glass); border: 1px solid var(--glass-border);
  border-radius: var(--r); overflow: hidden;
  display: flex; flex-direction: column;
  cursor: pointer; transition: border-color .2s, transform .18s var(--spring);
  position: relative;
}
.hc-card:hover { border-color: var(--glass-border-hi); transform: translateY(-2px); }

.hc-card-img {
  width: 100%; height: 150px; object-fit: cover; display: block;
  flex-shrink: 0;
}
.hc-card-img-placeholder {
  display: flex; align-items: center; justify-content: center;
}
.hc-play-badge {
  position: absolute; top: .6rem; right: .6rem;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(0,0,0,.55); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .78rem;
}
.hc-card-body { padding: .75rem .9rem .85rem; }
.hc-tag {
  display: inline-block; font-size: .6rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 20px;
  background: var(--violet-lo); border: 1px solid rgba(124,58,237,.22);
  color: var(--violet); margin-bottom: .38rem;
}
.hc-card-title {
  font-family: var(--f-display); font-size: .95rem; font-weight: 700;
  color: var(--tx-1); line-height: 1.3; margin-bottom: .28rem;
}
.hc-card-sub   { font-size: .8rem; color: var(--tx-2); line-height: 1.55; margin-bottom: .22rem; }
.hc-card-meta  { font-size: .68rem; color: var(--tx-3); }
.hc-empty      { color: var(--tx-3); font-size: .85rem; padding: 1.5rem 0; text-align: center; }
.hc-loading    { padding: 2rem 0; display: flex; align-items: center; justify-content: center; }

/* Footer */
.hc-footer {
  display: flex; justify-content: flex-end; margin-top: .55rem;
}
.hc-see-all {
  font-size: .78rem; font-weight: 600; color: var(--gold);
  background: none; border: none; cursor: pointer; font-family: var(--f-body);
}
.hc-see-all:hover { opacity: .8; }

/* ══════════════════════════════════════════════════════════
   UPGRADED GALLERY LIGHTBOX
══════════════════════════════════════════════════════════ */
.lightbox-inner {
  position: relative; max-width: 96vw; max-height: 96vh;
  display: flex; flex-direction: column; align-items: center;
}
.lb-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.25);
  color: #fff; font-size: 1.6rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 3; transition: background .2s;
  -webkit-tap-highlight-color: transparent;
  backdrop-filter: blur(4px);
}
.lb-arrow:hover { background: rgba(0,0,0,.65); }
.lb-prev { left: 10px; }
.lb-next { right: 10px; }
@media (max-width: 520px) {
  .lb-arrow { width: 38px; height: 38px; font-size: 1.35rem; }
  .lb-prev { left: 6px; }
  .lb-next { right: 6px; }
}
.lb-bottom {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; margin-top: .5rem; gap: .75rem;
}
.lb-caption { color: rgba(255,255,255,.7); font-size: .82rem; flex: 1; }
.lb-download {
  display: flex; align-items: center; gap: .35rem;
  padding: .38rem .85rem; border-radius: 20px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
  color: #fff; font-size: .76rem; font-weight: 600;
  text-decoration: none; transition: background .2s; flex-shrink: 0;
}
.lb-download:hover { background: rgba(255,255,255,.22); }
.lb-counter {
  position: absolute; bottom: 3.2rem; left: 50%; transform: translateX(-50%);
  font-size: .68rem; color: rgba(255,255,255,.5);
  background: rgba(0,0,0,.4); padding: 2px 10px; border-radius: 20px;
}
/* ══════════════════════════════════════════════════════════
   SPLASH SCREEN — stunning animated auth background
══════════════════════════════════════════════════════════ */

/* Full-screen dark layered background for the auth/splash */
.auth-screen {
  background: radial-gradient(ellipse 120% 80% at 50% 0%, rgba(124,58,237,.28) 0%, transparent 60%),
              radial-gradient(ellipse 80% 60% at 80% 100%, rgba(14,165,233,.18) 0%, transparent 55%),
              radial-gradient(ellipse 60% 50% at 10% 80%, rgba(245,158,11,.12) 0%, transparent 50%),
              var(--bg-1) !important;
}

/* Floating ambient orbs behind the card */
.splash-orb {
  position: fixed;
  border-radius: 50%;
  filter: blur(72px);
  opacity: .55;
  pointer-events: none;
  z-index: 0;
}
.splash-orb-a {
  width: 420px; height: 420px;
  top: -140px; left: -100px;
  background: radial-gradient(circle, rgba(124,58,237,.7), rgba(109,40,217,.3));
  animation: splashOrbA 9s ease-in-out infinite alternate;
}
.splash-orb-b {
  width: 340px; height: 340px;
  bottom: -80px; right: -60px;
  background: radial-gradient(circle, rgba(14,165,233,.6), rgba(2,132,199,.25));
  animation: splashOrbB 11s ease-in-out infinite alternate;
}
.splash-orb-c {
  width: 260px; height: 260px;
  top: 55%; left: 60%;
  background: radial-gradient(circle, rgba(245,158,11,.45), rgba(217,119,6,.2));
  animation: splashOrbC 7s ease-in-out infinite alternate;
}

@keyframes splashOrbA {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(60px, 80px) scale(1.15); }
}
@keyframes splashOrbB {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(-50px,-60px) scale(1.12); }
}
@keyframes splashOrbC {
  from { transform: translate(0,0) scale(1); opacity:.5; }
  to   { transform: translate(-40px, 50px) scale(1.2); opacity:.7; }
}

/* Giant faint cross in the background */
.splash-cross {
  position: fixed;
  font-size: clamp(220px, 40vw, 380px);
  color: rgba(255,255,255,.025);
  pointer-events: none;
  z-index: 0;
  top: 50%; left: 50%;
  transform: translate(-50%, -54%);
  line-height: 1;
  user-select: none;
  animation: splashCrossGlow 6s ease-in-out infinite alternate;
}
@keyframes splashCrossGlow {
  from { opacity: .022; text-shadow: none; }
  to   { opacity: .048; text-shadow: 0 0 120px rgba(245,158,11,.3); }
}

/* Rays burst behind the card */
.splash-rays {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
}
.splash-rays span {
  position: absolute;
  display: block;
  width: 2px;
  height: clamp(120px, 22vw, 220px);
  background: linear-gradient(to bottom, rgba(245,158,11,.18), transparent);
  transform-origin: center top;
  border-radius: 1px;
  top: 0; left: -1px;
  animation: splashRayFade 4s ease-in-out infinite alternate;
}
.splash-rays span:nth-child(1) { transform: rotate(0deg);   animation-delay: 0s;   }
.splash-rays span:nth-child(2) { transform: rotate(45deg);  animation-delay: .5s;  }
.splash-rays span:nth-child(3) { transform: rotate(90deg);  animation-delay: 1s;   }
.splash-rays span:nth-child(4) { transform: rotate(135deg); animation-delay: 1.5s; }
.splash-rays span:nth-child(5) { transform: rotate(180deg); animation-delay: 2s;   }
.splash-rays span:nth-child(6) { transform: rotate(225deg); animation-delay: 2.5s; }
.splash-rays span:nth-child(7) { transform: rotate(270deg); animation-delay: 3s;   }
.splash-rays span:nth-child(8) { transform: rotate(315deg); animation-delay: 3.5s; }
@keyframes splashRayFade {
  from { opacity: .15; transform-origin: center top; }
  to   { opacity: .55; transform-origin: center top; }
}

/* Make auth-card sit above all the background effects */
.auth-card { position: relative; z-index: 1; }

/* Logo ring + spinning rings around the ✦ icon */
.splash-logo-ring {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 76px; height: 76px;
  margin: 0 auto .7rem;
}
.splash-logo-ring .auth-logo {
  position: relative; z-index: 2;
  font-size: 2.1rem;
  margin: 0;
}
.splash-ring-1,
.splash-ring-2 {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid transparent;
}
.splash-ring-1 {
  border-color: rgba(245,158,11,.45) rgba(245,158,11,.1) rgba(245,158,11,.1) rgba(245,158,11,.1);
  animation: splashRing 3s linear infinite;
}
.splash-ring-2 {
  inset: 8px;
  border-color: rgba(124,58,237,.5) rgba(124,58,237,.1) rgba(124,58,237,.5) rgba(124,58,237,.1);
  animation: splashRing 5s linear infinite reverse;
}
@keyframes splashRing {
  to { transform: rotate(360deg); }
}

/* Enhanced auth-card border on splash */
.auth-card {
  border: 1px solid rgba(245,158,11,.22) !important;
  box-shadow: 0 0 0 1px rgba(124,58,237,.12),
              0 24px 64px rgba(0,0,0,.55),
              0 0 80px rgba(124,58,237,.12) !important;
}

/* ══════════════════════════════════════════════════════════
   CINEMATIC SPLASH INTRO SCREEN
   A separate full-screen overlay that plays on every cold
   launch, then dissolves into auth or the app.
══════════════════════════════════════════════════════════ */

#splashScreen {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  z-index: 99999 !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--bg-1);
  overflow: hidden;
  /* Override any body padding that could offset the splash */
  margin: 0 !important;
  padding: 0 !important;
  /* The whole screen fades out at the end */
  transition: opacity .65s cubic-bezier(.4,0,.2,1), transform .65s cubic-bezier(.4,0,.2,1);
}
#splashScreen.splash-exit {
  opacity: 0;
  transform: scale(1.04);
  pointer-events: none;
}

/* ── Radial gradient backdrop ─────────────────────────── */
#splashScreen::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 110% 70% at 50% -10%, rgba(124,58,237,.45) 0%, transparent 60%),
    radial-gradient(ellipse 70% 50% at 90% 110%,  rgba(14,165,233,.28) 0%, transparent 55%),
    radial-gradient(ellipse 60% 40% at 5%  90%,   rgba(245,158,11,.18) 0%, transparent 50%);
  animation: splashBgPulse 2.4s ease-in-out infinite alternate;
}
@keyframes splashBgPulse {
  from { opacity: .85; }
  to   { opacity: 1;   }
}

/* ── Large atmospheric orbs ───────────────────────────── */
.si-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(88px);
  pointer-events: none;
}
.si-orb-1 {
  width: 520px; height: 520px;
  top: -200px; left: -180px;
  background: radial-gradient(circle, rgba(124,58,237,.75), transparent 65%);
  animation: siOrb1 1.6s var(--ease) both;
}
.si-orb-2 {
  width: 420px; height: 420px;
  bottom: -160px; right: -120px;
  background: radial-gradient(circle, rgba(14,165,233,.65), transparent 65%);
  animation: siOrb2 1.6s var(--ease) .1s both;
}
.si-orb-3 {
  width: 300px; height: 300px;
  top: 50%; left: 55%;
  background: radial-gradient(circle, rgba(245,158,11,.5), transparent 65%);
  animation: siOrb3 1.6s var(--ease) .2s both;
}
@keyframes siOrb1 { from { opacity:0; transform:translate(-40px, -40px) scale(.8); } to { opacity:1; transform:none; } }
@keyframes siOrb2 { from { opacity:0; transform:translate(40px, 40px) scale(.8); }  to { opacity:1; transform:none; } }
@keyframes siOrb3 { from { opacity:0; transform:translate(-20px, -20px) scale(.7); } to { opacity:1; transform:none; } }

/* ── Particle ring ────────────────────────────────────── */
.si-particles {
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  pointer-events: none;
}
.si-particle {
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0;
}
/* 12 particles rotated around center, each animates outward */
.si-particle:nth-child(1)  { animation: siParticle 1.2s var(--ease) .3s both;  transform: rotate(0deg)   translateY(-90px); }
.si-particle:nth-child(2)  { animation: siParticle 1.2s var(--ease) .35s both; transform: rotate(30deg)  translateY(-90px); }
.si-particle:nth-child(3)  { animation: siParticle 1.2s var(--ease) .4s both;  transform: rotate(60deg)  translateY(-90px); }
.si-particle:nth-child(4)  { animation: siParticle 1.2s var(--ease) .45s both; transform: rotate(90deg)  translateY(-90px); }
.si-particle:nth-child(5)  { animation: siParticle 1.2s var(--ease) .5s both;  transform: rotate(120deg) translateY(-90px); }
.si-particle:nth-child(6)  { animation: siParticle 1.2s var(--ease) .55s both; transform: rotate(150deg) translateY(-90px); }
.si-particle:nth-child(7)  { animation: siParticle 1.2s var(--ease) .6s both;  transform: rotate(180deg) translateY(-90px); }
.si-particle:nth-child(8)  { animation: siParticle 1.2s var(--ease) .65s both; transform: rotate(210deg) translateY(-90px); }
.si-particle:nth-child(9)  { animation: siParticle 1.2s var(--ease) .7s both;  transform: rotate(240deg) translateY(-90px); }
.si-particle:nth-child(10) { animation: siParticle 1.2s var(--ease) .75s both; transform: rotate(270deg) translateY(-90px); }
.si-particle:nth-child(11) { animation: siParticle 1.2s var(--ease) .8s both;  transform: rotate(300deg) translateY(-90px); }
.si-particle:nth-child(12) { animation: siParticle 1.2s var(--ease) .85s both; transform: rotate(330deg) translateY(-90px); }
@keyframes siParticle {
  from { opacity: 0; transform-origin: 0 0; scale: 0; }
  40%  { opacity: 1; }
  to   { opacity: 0; scale: 1; }
}

/* ── Animated cross behind everything ────────────────── */
.si-cross {
  position: absolute;
  font-size: clamp(260px, 48vw, 420px);
  color: rgba(255,255,255,.018);
  pointer-events: none;
  user-select: none;
  line-height: 1;
  top: 50%; left: 50%;
  transform: translate(-50%, -52%);
  animation: siCrossReveal 1.2s var(--ease) .15s both;
}
@keyframes siCrossReveal {
  from { opacity: 0; transform: translate(-50%, -52%) scale(.88) rotate(-4deg); }
  to   { opacity: 1; transform: translate(-50%, -52%) scale(1) rotate(0deg); }
}

/* ── Spinning ray burst ───────────────────────────────── */
.si-rays {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: siRaysAppear .9s var(--ease) .4s both, siRaysSpin 18s linear 1.3s infinite;
}
@keyframes siRaysAppear { from { opacity:0; scale:.6; } to { opacity:1; scale:1; } }
@keyframes siRaysSpin   { to { transform: translate(-50%, -50%) rotate(360deg); } }
.si-rays span {
  position: absolute;
  display: block;
  width: 1.5px;
  height: clamp(100px, 20vw, 180px);
  background: linear-gradient(to bottom, rgba(245,158,11,.25), transparent);
  transform-origin: center top;
  border-radius: 1px;
  top: 0; left: -0.75px;
}
.si-rays span:nth-child(1)  { transform: rotate(0deg);    }
.si-rays span:nth-child(2)  { transform: rotate(45deg);   }
.si-rays span:nth-child(3)  { transform: rotate(90deg);   }
.si-rays span:nth-child(4)  { transform: rotate(135deg);  }
.si-rays span:nth-child(5)  { transform: rotate(180deg);  }
.si-rays span:nth-child(6)  { transform: rotate(225deg);  }
.si-rays span:nth-child(7)  { transform: rotate(270deg);  }
.si-rays span:nth-child(8)  { transform: rotate(315deg);  }

/* ── Main logo container ──────────────────────────────── */
.si-center {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

/* Logo ring with orbiting arcs */
.si-logo-wrap {
  position: relative;
  width: 100px; height: 100px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.4rem;
  animation: siLogoIn .7s var(--spring) .35s both;
}
@keyframes siLogoIn {
  from { opacity:0; transform:scale(.4) rotate(-20deg); }
  to   { opacity:1; transform:scale(1)  rotate(0deg); }
}
/* Glow core behind icon */
.si-logo-wrap::before {
  content: '';
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245,158,11,.35), transparent 65%);
  animation: siLogoGlow 2s ease-in-out infinite alternate;
}
@keyframes siLogoGlow {
  from { transform: scale(.9); opacity:.6; }
  to   { transform: scale(1.1); opacity:1; }
}
.si-logo-icon {
  position: relative;
  z-index: 2;
  font-size: 2.8rem;
  color: var(--gold);
  display: block;
  filter: drop-shadow(0 0 18px rgba(245,158,11,.55));
  animation: spinSlow 14s linear infinite;
}
/* Three concentric spinning rings */
.si-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid transparent;
}
.si-ring-1 {
  border-color: rgba(245,158,11,.55) transparent transparent transparent;
  animation: splashRing 2.2s linear infinite;
}
.si-ring-2 {
  inset: 10px;
  border-color: rgba(124,58,237,.5) transparent rgba(124,58,237,.5) transparent;
  animation: splashRing 3.6s linear infinite reverse;
}
.si-ring-3 {
  inset: 20px;
  border-color: transparent rgba(14,165,233,.45) transparent rgba(14,165,233,.45);
  animation: splashRing 5s linear infinite;
}

/* ── Title block ──────────────────────────────────────── */
.si-title {
  font-family: var(--f-display);
  font-size: clamp(2rem, 8vw, 2.6rem);
  font-weight: 800;
  color: var(--tx-1);
  letter-spacing: .02em;
  text-align: center;
  animation: siTitleIn .65s var(--spring) .55s both;
}
@keyframes siTitleIn {
  from { opacity:0; transform:translateY(24px); }
  to   { opacity:1; transform:translateY(0); }
}
.si-tagline {
  font-size: .85rem;
  color: var(--tx-3);
  text-align: center;
  letter-spacing: .22em;
  text-transform: uppercase;
  margin-top: .35rem;
  animation: siTitleIn .65s var(--ease) .7s both;
}

/* ── Loading dots ─────────────────────────────────────── */
.si-dots {
  display: flex;
  gap: .45rem;
  margin-top: 2.2rem;
  animation: siTitleIn .5s var(--ease) .9s both;
}
.si-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
  opacity: .3;
}
.si-dot:nth-child(1) { animation: siDotPulse 1.1s ease-in-out .0s  infinite; }
.si-dot:nth-child(2) { animation: siDotPulse 1.1s ease-in-out .18s infinite; }
.si-dot:nth-child(3) { animation: siDotPulse 1.1s ease-in-out .36s infinite; }
@keyframes siDotPulse {
  0%, 100% { opacity:.25; transform:scale(.8); }
  50%       { opacity:1;   transform:scale(1.2); }
}

/* ── Screen-edge vignette ─────────────────────────────── */
#splashScreen::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 80% at 50% 50%, transparent 40%, rgba(5,3,15,.65) 100%);
  pointer-events: none;
}