/* ═══════════════════════════════════════════════════════════
   styles.css — Grace Ministry India
   ═══════════════════════════════════════════════════════════ */

/* ── THEME VARIABLES ─────────────────────────────────────── */
:root {
  --bg-deep: #4d0000; --bg-mid: #800000; --bg-card: #3d0000;
  --border: rgba(255,255,255,0.25); --border-gold: #c9b97a44;
  --text-primary: #dde8f0; --text-secondary: #8899aa;
  --text-muted: #667788; --text-dim: #445566;
  --gold: #c9b97a; --gold-text: #e8d48b;
  --gold-dim: #c9b97a22; --gold-border: #c9b97a33;
  --stroke: #334455; --tab-on: #c9b97a; --auth-form: #4d0000;
  --trans: background 0.25s ease, color 0.2s ease, border-color 0.2s ease;
}

body.light {
  --bg-deep: #f0f2f5; --bg-mid: #ffffff; --bg-card: #ffffff;
  --border: #dde3ec; --border-gold: #c9b97a66;
  --text-primary: #1a2332; --text-secondary: #5a6a7a;
  --text-muted: #7a8a9a; --text-dim: #9aaabb;
  --gold: #b8a45a; --gold-text: #8a6f20;
  --gold-dim: #c9b97a18; --gold-border: #c9b97a44;
  --stroke: #c0ccd8; --tab-on: #b8a45a; --auth-form: #f0f2f5;
}

* { box-sizing: border-box; margin: 0; padding: 0; transition: var(--trans); }

/* ── BASE ────────────────────────────────────────────────── */
html { width:100%; height:100%; background:var(--bg-deep); }
body { width:100%; height:100%; overflow:hidden; background:var(--bg-deep); }

/* ── MOBILE-SAFE VIEWPORT HEIGHT ─────────────────────────
   100dvh (dynamic viewport height) shrinks when the browser
   toolbar appears on iOS Safari / Android Chrome, so content
   is never clipped behind it. Falls back to -webkit-fill-available
   and finally 100vh for older browsers.                   */
.frame {
  background: var(--bg-deep);
  display: flex;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  height: 100dvh;          /* modern mobile — shrinks with toolbar */
  height: -webkit-fill-available; /* iOS Safari fallback           */
}
/* Two-step trick: set 100vh on html first, then inherit */
@supports not (height: 100dvh) {
  html { height: -webkit-fill-available; }
  .frame { height: 100vh; }
}

.phone {
  width: 100%;
  max-width: 480px;
  background: var(--bg-deep);
  display: flex;
  flex-direction: column;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  height: 100%;           /* fills .frame instead of hard 100vh */
  overflow: visible;      /* ensures tabbar labels are not clipped */
  position: relative;
}

/* ── VERY SMALL SCREENS (< 360px width) ──────────────────── */
@media (max-width: 359px) {
  .tab-lbl   { font-size: 9px; }
  .tab       { min-width: 40px; }
  .tabbar    { height: 64px; min-height: 64px; }
  .logo-txt-main { font-size: 14px; }
  .scr-h     { font-size: 17px; }
}
.sb     { display:flex; justify-content:space-between; align-items:center; padding:10px 22px 4px; color:var(--text-secondary); font-size:11px; background:var(--bg-mid); }

/* ── SCREENS ─────────────────────────────────────────────── */
.scr { display:none; flex-direction:column; flex:1; overflow:hidden; min-height:0; }
.scr.on { display:flex; }
.scrollable { flex:1; overflow-y:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.scrollable::-webkit-scrollbar { display:none; }

/* ── THEME TOGGLE ────────────────────────────────────────── */
.theme-toggle-wrap { display:flex; align-items:center; gap:7px; cursor:pointer; }
.theme-toggle { width:38px; height:22px; background:#334455; border-radius:11px; position:relative; border:none; cursor:pointer; flex-shrink:0; }
.theme-toggle.light { background:var(--gold); }
.theme-toggle::after { content:""; position:absolute; width:16px; height:16px; border-radius:50%; background:#fff; top:3px; left:3px; transition:transform 0.3s; }
.theme-toggle.light::after { transform:translateX(16px); }
.theme-lbl { font-size:10px; color:var(--text-muted); }

/* ── AUTH ────────────────────────────────────────────────── */
.auth-bg { flex:1; background:var(--bg-mid); display:flex; flex-direction:column; }
.auth-hero { background:var(--bg-mid); padding:40px 28px 28px; display:flex; flex-direction:column; align-items:center; }
.auth-form { flex:1; background:var(--auth-form); border-radius:28px 28px 0 0; padding:28px 24px; overflow-y:auto; scrollbar-width:none; }
.auth-form::-webkit-scrollbar { display:none; }
.auth-title { font-size:22px; font-weight:600; color:var(--gold-text); margin-bottom:4px; text-align:center; }
.auth-sub { font-size:13px; color:var(--text-secondary); text-align:center; }

.f-label { font-size:12px; color:var(--text-secondary); margin-bottom:6px; letter-spacing:0.3px; }
.field { width:100%; background:var(--bg-card); border:0.5px solid var(--border); border-radius:12px; padding:13px 16px; font-size:14px; color:var(--text-primary); margin-bottom:14px; font-family:-apple-system,sans-serif; }
.field:focus { outline:none; border-color:var(--gold); }
.field::placeholder { color:var(--text-dim); }

.phone-row { display:flex; gap:8px; margin-bottom:14px; }
.country-code { background:var(--bg-card); border:0.5px solid var(--border); border-radius:12px; padding:13px 12px; font-size:14px; color:var(--text-primary); width:70px; text-align:center; flex-shrink:0; }
.phone-field { flex:1; background:var(--bg-card); border:0.5px solid var(--border); border-radius:12px; padding:13px 16px; font-size:14px; color:var(--text-primary); font-family:-apple-system,sans-serif; }
.phone-field::placeholder { color:var(--text-dim); }

.btn-gold { width:100%; padding:15px; background:var(--gold); border:none; border-radius:14px; font-size:15px; font-weight:600; color:#800000; cursor:pointer; margin-bottom:14px; font-family:-apple-system,sans-serif; }
.btn-gold:active { opacity:0.85; transform:scale(0.99); }
.btn-outline { width:100%; padding:14px; background:transparent; border:0.5px solid var(--border); border-radius:14px; font-size:14px; color:var(--text-secondary); cursor:pointer; margin-bottom:10px; display:flex; align-items:center; justify-content:center; gap:8px; font-family:-apple-system,sans-serif; }

.divider { display:flex; align-items:center; gap:10px; margin:4px 0 14px; }
.div-line { flex:1; height:0.5px; background:var(--border); }
.div-txt { font-size:12px; color:var(--text-muted); }

.switch-row { display:flex; justify-content:center; gap:4px; margin-top:8px; }
.switch-txt { font-size:13px; color:var(--text-muted); }
.switch-link { font-size:13px; color:var(--gold); font-weight:500; cursor:pointer; background:none; border:none; padding:0; }

.tab-row { display:flex; background:var(--bg-card); border-radius:12px; padding:4px; margin-bottom:20px; gap:4px; }
.tab-opt { flex:1; padding:10px; text-align:center; border-radius:10px; cursor:pointer; font-size:13px; color:var(--text-muted); border:none; background:transparent; font-family:-apple-system,sans-serif; }
.tab-opt.on { background:var(--gold); color:#800000; font-weight:600; }

.otp-boxes { display:flex; gap:10px; justify-content:center; margin:20px 0; }
.otp-box { width:50px; height:56px; background:var(--bg-card); border:0.5px solid var(--border); border-radius:12px; font-size:20px; font-weight:600; color:var(--gold-text); text-align:center; font-family:-apple-system,sans-serif; }
.otp-box:focus { outline:none; border-color:var(--gold); }

/* ── HOME ────────────────────────────────────────────────── */
.hero-hd { background:var(--bg-mid); padding:12px 16px; }
.hero-top { display:flex; justify-content:space-between; align-items:center; }
.logo-row { display:flex; align-items:center; gap:10px; }
.logo-txt-main { font-size:16px; font-weight:600; color:var(--gold-text); letter-spacing:0.3px; }
.logo-txt-sub { font-size:10px; color:var(--text-secondary); letter-spacing:2px; text-transform:uppercase; margin-top:1px; }
.bell { width:34px; height:34px; border-radius:50%; background:var(--bg-card); border:0.5px solid var(--border); display:flex; align-items:center; justify-content:center; cursor:pointer; position:relative; }
.notif-dot { position:absolute; top:6px; right:6px; width:7px; height:7px; background:var(--gold); border-radius:50%; border:1.5px solid var(--bg-mid); }

.jesus-card { background:var(--bg-card); border-radius:16px; padding:16px; margin:14px 16px 10px; border:0.5px solid var(--gold-border); display:flex; gap:16px; align-items:center; }
.cross-wrap { flex-shrink:0; width:36px; height:44px; position:relative; }
.cross-v { position:absolute; width:4px; height:44px; background:var(--gold); left:16px; border-radius:2px; }
.cross-h { position:absolute; width:30px; height:4px; background:var(--gold); top:12px; left:3px; border-radius:2px; }
.jc-text { font-size:12px; color:var(--text-secondary); font-style:italic; line-height:1.6; }
.jc-ref { font-size:10px; color:var(--text-muted); margin-top:6px; }

.verse-block { background:var(--bg-card); border-radius:14px; padding:16px; margin:0 16px 14px; border:0.5px solid var(--gold-dim); }
.verse-tag { font-size:10px; color:var(--gold); letter-spacing:1px; text-transform:uppercase; font-weight:500; margin-bottom:8px; }
.verse-text { font-size:13px; color:var(--text-primary); line-height:1.65; font-style:italic; }
.verse-ref { font-size:11px; color:var(--text-secondary); margin-top:8px; }

/* ── LIVE SERVICE CARD ───────────────────────────────────── */
.live-card { border-radius:16px; padding:14px 16px; margin:0 16px 14px; border:0.5px solid var(--border); background:var(--bg-card); display:flex; align-items:center; gap:14px; text-decoration:none; cursor:pointer; }
.live-card.live-active { border-color:#ff333388; background:linear-gradient(135deg,#1a0a0a,#3d0000); }
.live-pulse { width:10px; height:10px; border-radius:50%; background:#ff3333; box-shadow:0 0 0 0 #ff333366; animation:pulse 1.5s infinite; flex-shrink:0; }
.live-pulse.offline { background:var(--text-muted); animation:none; box-shadow:none; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 #ff333366} 70%{box-shadow:0 0 0 8px transparent} 100%{box-shadow:0 0 0 0 transparent} }
.live-badge { background:#ff3333; color:#fff; font-size:9px; font-weight:800; letter-spacing:1px; padding:2px 6px; border-radius:4px; margin-left:6px; }
.live-title { font-size:14px; font-weight:600; color:var(--text-primary); }
.live-sub { font-size:11px; color:var(--text-muted); margin-top:2px; }

/* ── DEVOTIONAL PREVIEW ON HOME ──────────────────────────── */
.devot-preview { background:linear-gradient(135deg,var(--bg-card),#4a0a0a); border-radius:16px; padding:16px; margin:0 16px 14px; border:0.5px solid var(--gold-border); cursor:pointer; position:relative; overflow:hidden; }
.devot-preview::before { content:""; position:absolute; top:0; left:0; width:3px; height:100%; background:var(--gold); border-radius:0 0 0 0; }
.devot-preview-tag { font-size:10px; color:var(--gold); letter-spacing:1px; text-transform:uppercase; font-weight:500; margin-bottom:6px; padding-left:10px; }
.devot-preview-title { font-size:15px; font-weight:600; color:var(--text-primary); padding-left:10px; margin-bottom:4px; }
.devot-preview-verse { font-size:12px; color:var(--text-secondary); font-style:italic; padding-left:10px; line-height:1.5; }
.devot-preview-cta { font-size:11px; color:var(--gold); padding-left:10px; margin-top:8px; }

/* ── SERMONS ─────────────────────────────────────────────── */
.sec-label { font-size:10px; color:var(--text-secondary); letter-spacing:1px; text-transform:uppercase; font-weight:500; padding:14px 16px 8px; }
.sermon-row { display:flex; gap:12px; align-items:center; padding:12px 16px; border-bottom:0.5px solid rgba(255,255,255,0.18); cursor:pointer; text-decoration:none; }
.thumb { width:50px; height:50px; border-radius:10px; background:var(--bg-card); display:flex; align-items:center; justify-content:center; flex-shrink:0; border:0.5px solid var(--gold-border); }
.play-tri { width:0; height:0; border-style:solid; border-width:7px 0 7px 13px; border-color:transparent transparent transparent var(--gold); margin-left:4px; }
.s-title { font-size:14px; font-weight:500; color:var(--text-primary); margin-bottom:2px; }
.s-meta { font-size:12px; color:var(--text-muted); }
.s-dur { font-size:11px; color:var(--gold); margin-top:3px; }

/* ── EVENTS ──────────────────────────────────────────────── */
.event-row { display:flex; gap:12px; align-items:center; padding:12px 16px; border-bottom:0.5px solid rgba(255,255,255,0.18); }
.e-day { font-size:20px; font-weight:600; color:var(--gold); line-height:1; }
.e-mon { font-size:10px; color:var(--text-secondary); text-transform:uppercase; letter-spacing:0.5px; }
.e-title { font-size:13px; font-weight:500; color:var(--text-primary); }
.e-time { font-size:11px; color:var(--text-secondary); margin-top:2px; }
.reg-btn { border:0.5px solid var(--gold); border-radius:8px; padding:5px 10px; cursor:pointer; background:transparent; margin-left:auto; text-decoration:none; display:inline-block; }
.reg-txt { color:var(--gold); font-size:11px; font-weight:500; }

/* ── LOCATIONS ───────────────────────────────────────────── */
.loc-card { background:var(--bg-card); border-radius:14px; padding:14px 16px; margin:0 16px 10px; border:0.5px solid var(--border); display:flex; align-items:center; gap:12px; text-decoration:none; }
.loc-icon { width:40px; height:40px; border-radius:10px; background:var(--gold-dim); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.loc-name { font-size:14px; font-weight:600; color:var(--text-primary); }
.loc-sub  { font-size:11px; color:var(--text-muted); margin-top:2px; }

/* ── GIVE / CONNECT ──────────────────────────────────────── */
.c-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:12px 16px; }
.c-card { border-radius:14px; padding:16px; border:0.5px solid var(--border); background:var(--bg-card); text-decoration:none; display:block; transition:border-color 0.2s; }
.c-card:active { border-color:var(--gold); }
.c-icon { width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; margin-bottom:8px; }
.c-name { font-size:13px; font-weight:500; color:var(--text-primary); margin-bottom:2px; }
.c-sub  { font-size:11px; color:var(--text-muted); }
.give-card { background:var(--bg-card); border:0.5px solid var(--border); border-radius:14px; padding:14px 16px; margin-bottom:8px; display:flex; justify-content:space-between; align-items:center; text-decoration:none; }
.give-card:active { border-color:var(--gold); }
.give-title { font-size:14px; font-weight:500; color:var(--text-primary); }
.give-sub   { font-size:12px; color:var(--text-secondary); margin-top:2px; }
.upi-card { background:var(--bg-card); border-radius:14px; padding:18px; text-align:center; border:0.5px solid var(--border-gold); margin-bottom:8px; }
.upi-id   { font-size:14px; font-weight:600; color:var(--gold-text); letter-spacing:0.5px; word-break:break-all; }
.upi-note { font-size:11px; color:var(--text-secondary); margin-top:6px; }

/* ── PRAYER ──────────────────────────────────────────────── */
.p-quote { background:var(--bg-card); border-radius:0 12px 12px 0; padding:14px; margin-bottom:14px; border-left:2px solid var(--gold); }
.p-q-text { font-size:13px; color:var(--text-secondary); font-style:italic; line-height:1.6; }
.p-q-ref  { font-size:11px; color:var(--text-muted); margin-top:6px; }
.wa-btn { width:100%; padding:14px; background:#25d366; color:#fff; border:none; border-radius:12px; font-size:14px; font-weight:600; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; margin-top:4px; }
.tog-row { display:flex; gap:8px; margin-bottom:14px; }
.tog { flex:1; padding:10px; border-radius:10px; border:0.5px solid var(--border); background:var(--bg-card); text-align:center; cursor:pointer; }
.tog.on { background:var(--gold-dim); border-color:var(--gold); }
.tog-txt { font-size:13px; color:var(--text-muted); }
.tog.on .tog-txt { color:var(--gold); font-weight:500; }

/* ── SCREEN HEADERS ──────────────────────────────────────── */
.scr-hd { padding:12px 16px; border-bottom:0.5px solid rgba(255,255,255,0.18); background:var(--bg-mid); display:flex; align-items:center; gap:10px; }
.scr-hd-text { flex:1; }
.scr-h { font-size:20px; font-weight:600; color:var(--gold-text); }
.scr-s { font-size:12px; color:var(--text-secondary); margin-top:2px; }
.back-btn { width:34px; height:34px; border-radius:50%; background:var(--bg-card); border:0.5px solid var(--border); display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; }

/* ── TABBAR ──────────────────────────────────────────────── */
.tabbar {
  display: flex;
  background: #0f1b2d;
  border-top: 2px solid #c9b97a;
  height: 72px;
  min-height: 72px;
  padding: 6px 0 10px;
  /* iOS home-indicator safe area — prevents tabbar sitting behind the swipe bar */
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  height: calc(72px + env(safe-area-inset-bottom));
  min-height: calc(72px + env(safe-area-inset-bottom));
  align-items: center;
  justify-content: space-around;
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;
  flex-shrink: 0;
  z-index: 100;
}
.tabbar::-webkit-scrollbar { display: none; }

.tab {
  flex: 1;
  min-width: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  padding: 2px 0;
}

.tab svg,
.tab i {
  color: #9aa7bd;
}

.tab-ico {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: #9aa7bd;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
  flex-shrink: 0;
}

.tab-lbl {
  font-size: 10px;
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
  line-height: 1;
  white-space: nowrap;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: visible;
}

/* Active state — default gold */
.tab.on svg,
.tab.on i {
  color: #ffd369;
}
.tab.on .tab-ico {
  stroke: #ffd369;
}
.tab.on .tab-lbl {
  color: #ffd369;
  font-weight: 700;
}

/* ── PER-TAB ACCENT COLOURS ──────────────────────────────── */
/* Home — warm gold */
#t-home.on .tab-ico { stroke: #ffd369; }
#t-home.on .tab-lbl { color: #ffd369; }

/* Sermons tab (now shows Media) — coral pink */
#t-sermons .tab-ico { stroke: #f08080; }
#t-sermons .tab-lbl { color: #f08080; }
#t-sermons.on .tab-ico { stroke: #ff9999; }
#t-sermons.on .tab-lbl { color: #ff9999; }

/* Events — mint green */
#t-events .tab-ico { stroke: #5ec98a; }
#t-events .tab-lbl { color: #5ec98a; }
#t-events.on .tab-ico { stroke: #7ee8a2; }
#t-events.on .tab-lbl { color: #7ee8a2; }

/* Prayer-wall tab (now shows Give) — bright green */
#t-prayer-wall .tab-ico { stroke: #4cde80; }
#t-prayer-wall .tab-lbl { color: #4cde80; }
#t-prayer-wall.on .tab-ico { stroke: #6effa0; }
#t-prayer-wall.on .tab-lbl { color: #6effa0; }

/* Serve / Volunteer — warm orange */
#t-volunteer .tab-ico { stroke: #f5a623; }
#t-volunteer .tab-lbl { color: #f5a623; }
#t-volunteer.on .tab-ico { stroke: #ffbf47; }
#t-volunteer.on .tab-lbl { color: #ffbf47; }

/* Give tab (now shows Prayer Wall) — rose gold */
#t-give .tab-ico { stroke: #f4a7b9; }
#t-give .tab-lbl { color: #f4a7b9; }
#t-give.on .tab-ico { stroke: #ffc4d0; }
#t-give.on .tab-lbl { color: #ffc4d0; }

/* More / Connect — steel blue */
#t-connect .tab-ico { stroke: #7aaccc; }
#t-connect .tab-lbl { color: #7aaccc; }
#t-connect.on .tab-ico { stroke: #9ac8e8; }
#t-connect.on .tab-lbl { color: #9ac8e8; }

/* ── STICKY BOTTOM BARS ──────────────────────────────────── */
.screen-bottom { padding:8px 12px 10px; background:var(--bg-deep); border-top:0.5px solid rgba(255,255,255,0.18); flex-shrink:0; }
.bottom-btn { width:100%; padding:11px 8px; border:none; border-radius:12px; font-size:13px; font-weight:600; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:6px; text-decoration:none; font-family:-apple-system,sans-serif; }
.bottom-btn-gold { background:var(--gold); color:#800000; }
.bottom-btn-gold:active { opacity:0.88; }
.bottom-btn-red { background:#ff0000; color:#fff; }
.bottom-btn-red:active { opacity:0.88; }
.bottom-btn-green { background:#25d366; color:#fff; }
.bottom-btn-green:active { opacity:0.88; }
.bottom-btn-dark { background:var(--bg-card); border:0.5px solid var(--gold); color:var(--gold); }
.bottom-btn-row { display:flex; gap:10px; }
.bottom-btn-row .bottom-btn { flex:1; }

/* ── FLOATING BUTTONS ────────────────────────────────────── */
.fab-wrap { position:fixed; bottom:64px; right:16px; display:none; flex-direction:column; gap:10px; z-index:90; align-items:flex-end; }
.fab-wrap.on { display:flex; }
.fab { width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; text-decoration:none; box-shadow:0 4px 16px #00000066; border:none; flex-shrink:0; transition:transform 0.15s; }
.fab:active { transform:scale(0.93); }
.fab-wa   { background:#25d366; }
.fab-call { background:#4a9eff; }
.fab-label { position:absolute; right:62px; background:var(--bg-mid); border:0.5px solid var(--border); border-radius:8px; padding:5px 10px; font-size:11px; font-weight:600; color:var(--text-primary); white-space:nowrap; pointer-events:none; }
.fab-row { position:relative; display:flex; align-items:center; }

/* ── OVERLAYS ────────────────────────────────────────────── */
.notif-overlay { position:fixed; inset:0; background:#000000aa; z-index:100; display:none; align-items:flex-start; justify-content:center; padding-top:60px; }
.notif-overlay.on { display:flex; }
.notif-panel { background:var(--bg-mid); border-radius:20px; padding:20px; width:calc(100% - 32px); max-width:448px; }
.notif-hd { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.notif-title { font-size:16px; font-weight:600; color:var(--gold-text); }
.notif-close { background:none; border:none; color:var(--text-muted); font-size:20px; cursor:pointer; line-height:1; }
.notif-item { background:var(--bg-card); border-radius:12px; padding:14px; margin-bottom:8px; border-left:2px solid var(--gold); }
.notif-msg  { font-size:13px; color:var(--text-primary); line-height:1.5; }
.notif-time { font-size:11px; color:var(--text-muted); margin-top:4px; }

.share-overlay { position:fixed; inset:0; background:#000000aa; z-index:100; display:none; align-items:flex-end; justify-content:center; }
.share-overlay.on { display:flex; }
.share-sheet { background:var(--bg-mid); border-radius:24px 24px 0 0; padding:20px 20px 32px; width:100%; max-width:480px; }
.share-title { font-size:16px; font-weight:600; color:var(--gold-text); margin-bottom:4px; text-align:center; }
.share-sub { font-size:12px; color:var(--text-secondary); text-align:center; margin-bottom:20px; }
.share-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:16px; }
.share-item { display:flex; flex-direction:column; align-items:center; gap:6px; cursor:pointer; text-decoration:none; }
.share-icon { width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center; }
.share-lbl { font-size:11px; color:var(--text-secondary); text-align:center; }
.share-cancel { width:100%; padding:14px; background:var(--bg-card); border:none; border-radius:14px; font-size:15px; font-weight:600; color:var(--text-secondary); cursor:pointer; }

/* ── ADMIN PANEL ─────────────────────────────────────────── */
.admin-panel { position:fixed; inset:0; background:var(--bg-mid); z-index:200; display:none; flex-direction:column; max-width:480px; margin:0 auto; }
.admin-panel.on { display:flex; }
.admin-hd { background:var(--bg-mid); padding:16px 20px; border-bottom:0.5px solid var(--border); display:flex; justify-content:space-between; align-items:center; flex-shrink:0; }
.admin-body { flex:1; overflow-y:auto; padding:16px; }
.admin-card { background:var(--bg-card); border-radius:14px; padding:16px; margin-bottom:12px; border:0.5px solid var(--border); }
.admin-card-title { font-size:13px; font-weight:600; color:var(--gold-text); margin-bottom:12px; }
.admin-input { width:100%; background:var(--bg-mid); border:0.5px solid var(--border); border-radius:10px; padding:11px 14px; font-size:13px; color:var(--text-primary); margin-bottom:10px; font-family:-apple-system,sans-serif; }
.admin-input:focus { outline:none; border-color:var(--gold); }
.admin-btn { width:100%; padding:12px; background:var(--gold); border:none; border-radius:10px; font-size:14px; font-weight:600; color:#800000; cursor:pointer; }
.admin-btn-danger { background:#ff4444; color:#fff; }
.admin-btn-secondary { background:var(--bg-mid); border:0.5px solid var(--border); color:var(--text-secondary); }
.prayer-req-item { background:var(--bg-mid); border-radius:10px; padding:12px; margin-bottom:8px; border-left:2px solid var(--gold); }
.prayer-req-name { font-size:13px; font-weight:600; color:var(--text-primary); }
.prayer-req-msg  { font-size:12px; color:var(--text-secondary); margin-top:4px; line-height:1.5; }
.prayer-req-meta { font-size:10px; color:var(--text-muted); margin-top:6px; }

/* ── ABOUT / PRIVACY / PROFILE ───────────────────────────── */
.about-section { padding:16px; }
.about-hero { text-align:center; padding:24px 16px 20px; border-bottom:0.5px solid var(--border); }
.about-btn { display:flex; align-items:center; justify-content:center; gap:8px; padding:13px; border-radius:12px; text-decoration:none; font-size:14px; font-weight:600; margin-bottom:10px; }
.privacy-section { padding:16px; }
.privacy-section h3 { font-size:14px; font-weight:600; color:var(--gold-text); margin:16px 0 6px; }
.privacy-section p { font-size:13px; color:var(--text-secondary); line-height:1.65; margin-bottom:8px; }

/* ── SPLASH IMAGE ────────────────────────────────────────── */
.splash-img { max-width:280px; width:85%; border-radius:24px; box-shadow:0 8px 32px #00000066; opacity:0; animation:fadeInUp 0.8s ease forwards; }
@keyframes fadeInUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
body.light .splash-img { box-shadow:0 8px 32px #00000022; }

/* ══════════════════════════════════════════════════════════
   NEW FEATURE STYLES
   ══════════════════════════════════════════════════════════ */

/* ── DEVOTIONAL SCREEN ───────────────────────────────────── */
.devot-card { background:var(--bg-card); border-radius:16px; margin:0 16px 14px; overflow:hidden; border:0.5px solid var(--gold-border); }
.devot-card-header { background:linear-gradient(135deg,#1a2a1a,var(--bg-card)); padding:16px; border-bottom:0.5px solid var(--border); }
.devot-date { font-size:10px; color:var(--gold); letter-spacing:1px; text-transform:uppercase; font-weight:500; margin-bottom:6px; }
.devot-title { font-size:18px; font-weight:600; color:var(--gold-text); }
.devot-body { padding:16px; }
.devot-verse-block { background:var(--bg-mid); border-radius:12px; padding:14px; margin-bottom:14px; border-left:3px solid var(--gold); }
.devot-verse-text { font-size:14px; color:var(--text-primary); font-style:italic; line-height:1.7; }
.devot-verse-ref  { font-size:11px; color:var(--gold); margin-top:8px; font-weight:500; }
.devot-message { font-size:14px; color:var(--text-secondary); line-height:1.75; margin-bottom:16px; }
.devot-prayer-block { background:var(--gold-dim); border-radius:12px; padding:14px; border:0.5px solid var(--gold-border); }
.devot-prayer-label { font-size:10px; color:var(--gold); letter-spacing:1px; text-transform:uppercase; font-weight:500; margin-bottom:8px; }
.devot-prayer-text { font-size:13px; color:var(--text-primary); line-height:1.7; font-style:italic; }
.devot-empty { text-align:center; padding:40px 20px; color:var(--text-muted); font-size:14px; }

/* ── MEDIA / REELS ───────────────────────────────────────── */
.media-filter { display:flex; gap:8px; padding:14px 16px 6px; overflow-x:auto; scrollbar-width:none; }
.media-filter::-webkit-scrollbar { display:none; }
.media-pill { padding:7px 16px; border-radius:20px; font-size:12px; font-weight:500; cursor:pointer; white-space:nowrap; border:0.5px solid var(--border); background:var(--bg-card); color:var(--text-muted); transition:all 0.2s; }
.media-pill.on { background:var(--gold); color:#800000; font-weight:700; border-color:var(--gold); }
.media-grid { padding:12px 16px 20px; display:grid; grid-template-columns:1fr 1fr; gap:12px; }

/* New media card */
.media-card-new { background:var(--bg-card); border-radius:14px; border:0.5px solid var(--border); overflow:hidden; cursor:pointer; transition:border-color 0.2s,transform 0.15s; }
.media-card-new:active { border-color:var(--gold); transform:scale(0.97); }
.media-card-thumb { height:100px; background:linear-gradient(135deg,#800000,#3d0000); display:flex; align-items:center; justify-content:center; position:relative; }
.media-card-icon { opacity:0.35; }
.media-card-play { position:absolute; width:38px; height:38px; border-radius:50%; background:var(--gold); display:flex; align-items:center; justify-content:center; box-shadow:0 4px 14px #00000066; }
.media-card-badge { position:absolute; top:8px; right:8px; font-size:9px; font-weight:800; letter-spacing:0.8px; padding:3px 7px; border-radius:6px; border:0.5px solid; }
.media-card-body { padding:10px 12px 12px; }
.media-card-title { font-size:13px; font-weight:600; color:var(--text-primary); line-height:1.4; margin-bottom:4px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.media-card-meta { font-size:11px; color:var(--text-muted); }

/* Legacy simple list (kept for fallback) */
.media-simple { background:var(--bg-card); padding:14px 16px; border-radius:12px; margin-bottom:10px; border:0.5px solid var(--border); transition:border-color 0.2s; }
.media-simple:active { border-color:var(--gold); }
.media-title { font-size:14px; font-weight:600; color:var(--text-primary); }
.media-meta  { font-size:12px; color:#8899aa; margin-top:4px; }

/* ── COMMUNITY FEED ──────────────────────────────────────── */
.post-card { background:var(--bg-card); border-radius:14px; margin:0 16px 12px; border:0.5px solid var(--border); overflow:hidden; }
.post-header { display:flex; align-items:center; gap:10px; padding:14px 14px 10px; }
.post-avatar { width:36px; height:36px; border-radius:50%; background:var(--gold-dim); border:1px solid var(--gold-border); display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:600; color:var(--gold); flex-shrink:0; }
.post-author { font-size:13px; font-weight:500; color:var(--text-primary); }
.post-time   { font-size:11px; color:var(--text-muted); }
.post-image  { width:100%; max-height:220px; object-fit:cover; display:block; }
.post-image-placeholder { width:100%; height:160px; background:var(--bg-mid); display:flex; align-items:center; justify-content:center; }
.post-body   { padding:12px 14px; }
.post-title  { font-size:15px; font-weight:600; color:var(--text-primary); margin-bottom:6px; }
.post-desc   { font-size:13px; color:var(--text-secondary); line-height:1.6; }
.post-actions { display:flex; gap:12px; padding:8px 14px 14px; border-top:0.5px solid var(--border); }
.post-action-btn { display:flex; align-items:center; gap:5px; background:none; border:none; cursor:pointer; font-size:12px; color:var(--text-muted); font-family:-apple-system,sans-serif; padding:4px 8px; border-radius:8px; }
.post-action-btn:active { background:var(--gold-dim); color:var(--gold); }

/* ── PRAYER WALL ─────────────────────────────────────────── */
.prayer-wall-card { background:var(--bg-card); border-radius:14px; margin:0 16px 10px; padding:14px; border:0.5px solid var(--border); }
.prayer-wall-name { font-size:13px; font-weight:600; color:var(--gold-text); margin-bottom:6px; }
.prayer-wall-msg  { font-size:13px; color:var(--text-secondary); line-height:1.6; margin-bottom:10px; }
.prayer-wall-footer { display:flex; justify-content:space-between; align-items:center; }
.prayer-wall-time { font-size:11px; color:var(--text-muted); }
.pray-btn { display:flex; align-items:center; gap:5px; background:var(--gold-dim); border:0.5px solid var(--gold-border); border-radius:20px; padding:6px 12px; cursor:pointer; font-size:12px; color:var(--gold); font-weight:500; font-family:-apple-system,sans-serif; transition:background 0.2s; }
.pray-btn:active { background:var(--gold); color:#800000; }
.pray-btn.prayed { background:var(--gold); color:#800000; }
.prayer-wall-submit { background:var(--bg-card); border-radius:14px; margin:0 16px 14px; padding:14px; border:0.5px solid var(--border); }
.prayer-wall-submit textarea { width:100%; background:var(--bg-mid); border:0.5px solid var(--border); border-radius:10px; padding:12px 14px; font-size:14px; color:var(--text-primary); font-family:-apple-system,sans-serif; resize:none; height:80px; margin-bottom:10px; }
.prayer-wall-submit textarea:focus { outline:none; border-color:var(--gold); }

/* ── VOLUNTEER ───────────────────────────────────────────── */
.volunteer-team { background:var(--bg-card); border-radius:14px; margin:0 16px 10px; padding:16px; border:0.5px solid var(--border); display:flex; align-items:center; gap:14px; }
.volunteer-icon { display:none; }
.volunteer-info { flex:1; }
.volunteer-name { font-size:14px; font-weight:600; color:var(--text-primary); }
.volunteer-desc { font-size:12px; color:var(--text-muted); margin-top:2px; }
.volunteer-count { font-size:11px; color:var(--gold); margin-top:4px; }
.join-btn { padding:8px 16px; border-radius:10px; border:0.5px solid var(--gold); background:transparent; color:var(--gold); font-size:12px; font-weight:600; cursor:pointer; font-family:-apple-system,sans-serif; white-space:nowrap; }
.join-btn.joined { background:var(--gold); color:#800000; border-color:var(--gold); }

/* ── ABOUT LOC CARD ──────────────────────────────────────── */
.about-loc-card { display:flex; align-items:center; gap:12px; background:var(--bg-card); border-radius:12px; padding:14px; margin-bottom:10px; border:0.5px solid var(--border); }

/* ── MEMBER PROFILE ──────────────────────────────────────── */
.member-header { text-align:center; padding:28px 20px 20px; border-bottom:0.5px solid var(--border); }
.member-avatar { width:72px; height:72px; border-radius:50%; background:var(--bg-card); border:2px solid var(--gold); display:flex; align-items:center; justify-content:center; margin:0 auto 12px; font-size:28px; font-weight:700; color:var(--gold); }
.member-name   { font-size:20px; font-weight:600; color:var(--gold-text); }
.member-city   { font-size:13px; color:var(--gold); margin-top:4px; }
.member-since  { font-size:12px; color:var(--text-muted); margin-top:4px; }