/* Screen reader only utility */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Manrope:wght@600;700;800&display=swap');

@font-face {
  font-family: "Twemoji Country Flags";
  src: url("https://cdn.jsdelivr.net/npm/country-flag-emoji-polyfill@0.1.3/dist/TwemojiCountryFlags.woff2") format("woff2");
  font-display: swap;
}

.hidden {
  display: none !important;
}

:root {
  /* ==========================================================================
     THEME ARCHITECTURE: TWO-PILLAR DESIGN SYSTEM
     1. Primary Color (Dynamic rainbow spectrum - switchable in settings)
     2. Gold (Constant & universal across all themes for key accents & giving)
     ========================================================================== */

  /* 1. Dynamic Primary HSL Baseline (Default: Sapphire Blue) */
  --primary-h: 221;
  --primary-s: 83%;
  --primary-l: 53%;
  --primary: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
  --primary-hover: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) - 7%));
  --primary-active: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) - 13%));
  --primary-soft: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.12);
  --primary-surface: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.07);
  --primary-border: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.28);
  --primary-gradient: linear-gradient(135deg, hsl(calc(var(--primary-h) - 18), 85%, 56%) 0%, hsl(var(--primary-h), var(--primary-s), var(--primary-l)) 52%, hsl(calc(var(--primary-h) + 24), 85%, 52%) 100%);
  --primary-glow: 0 10px 25px hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.35);

  /* 2. Universal Gold Standards (Constant across all themes) */
  --gold: #e5a93c;
  --gold-hover: #d97706;
  --gold-rgb: 229, 169, 60;
  --gold-surface: rgba(229, 169, 60, 0.10);
  --gold-border: rgba(229, 169, 60, 0.32);
  --gold-gradient: linear-gradient(135deg, #f59e0b 0%, #e5a93c 50%, #d97706 100%);
  --gold-glow: 0 8px 24px rgba(229, 169, 60, 0.32);
  --gold-text: #92400e;

  /* 3. Surface & Light Mode Base */
  --background: #f8fafc;
  --background-secondary: #f1f5f9;
  --surface: #ffffff;
  --surface-card: #ffffff;
  --surface-soft: #f8faff;
  --surface-canvas: #f8fafc;
  --border: #e2e8f0;
  --border-default: #e2e8f0;
  --border-subtle: #f1f5f9;
  --border-strong: #cbd5e1;

  /* 4. Text Contrast Tokens */
  --text-primary: #0f172a;
  --text-secondary: #334155;
  --text-muted: #64748b;
  --text-disabled: #94a3b8;
  --text-tertiary: #94a3b8;

  /* 5. Ambient Contrasting Background with Faint Primary Gradient */
  --ambient-bg: radial-gradient(circle at 10% 12%, hsla(var(--primary-h), var(--primary-s), 70%, 0.13), transparent 42%),
                radial-gradient(circle at 90% 88%, rgba(var(--gold-rgb), 0.08), transparent 38%),
                radial-gradient(circle at 50% 50%, hsla(var(--primary-h), 60%, 92%, 0.06), transparent 60%);

  /* 6. Legacy compatibility mappings */
  --color-primary-gold: var(--gold);
  --color-primary-gold-dark: var(--gold-hover);
  --ink: var(--text-primary);
  --muted: var(--text-muted);
  --soft: var(--background-secondary);
  --soft-2: var(--surface-soft);
  --line: var(--border);
  --forest: var(--primary);
  --teal: var(--primary);
  --clay: var(--primary);
  --plum: var(--primary);
  --blue: var(--primary);
  --brand-blue: var(--primary);
  --brand-cyan: hsl(calc(var(--primary-h) - 20), 85%, 52%);
  --brand-violet: hsl(calc(var(--primary-h) + 25), 85%, 55%);
  --brand-navy: var(--text-primary);
  --ai-blue: var(--primary);
  --ai-cyan: hsl(calc(var(--primary-h) - 20), 85%, 52%);
  --ai-violet: hsl(calc(var(--primary-h) + 25), 85%, 55%);
  --ai-navy: var(--text-primary);
  --ai-slate: var(--text-secondary);
  --ai-muted: var(--text-muted);
  --ai-border: var(--border);
  --shadow: 0 20px 60px rgba(15, 23, 42, 0.07);
  --shadow-card: 0 10px 30px rgba(15, 23, 42, 0.06);
  --shadow-primary: var(--primary-glow);
  --gradient-brand: var(--primary-gradient);
  --radius: 12px;
  --max: 1080px;

  color: var(--text-primary);
  font-family: 'Open Sans', 'Twemoji Country Flags', Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* 8 Rainbow Spectrum Presets - Excludes Yellow/Amber/Gold */
html[data-primary="blue"]   { --primary-h: 221; --primary-s: 83%; --primary-l: 53%; }
html[data-primary="indigo"] { --primary-h: 239; --primary-s: 84%; --primary-l: 67%; }
html[data-primary="purple"] { --primary-h: 271; --primary-s: 91%; --primary-l: 65%; }
html[data-primary="pink"]   { --primary-h: 330; --primary-s: 81%; --primary-l: 60%; }
html[data-primary="red"]    { --primary-h: 350; --primary-s: 89%; --primary-l: 60%; }
html[data-primary="orange"] { --primary-h: 24;  --primary-s: 95%; --primary-l: 53%; }
html[data-primary="green"]  { --primary-h: 158; --primary-s: 64%; --primary-l: 40%; }
html[data-primary="cyan"],
html[data-primary="teal"]   { --primary-h: 189; --primary-s: 94%; --primary-l: 43%; }

/* Swatches in settings */
.swatch-blue   { background: linear-gradient(135deg, #2563eb, #3b82f6); }
.swatch-indigo { background: linear-gradient(135deg, #4f46e5, #6366f1); }
.swatch-purple { background: linear-gradient(135deg, #9333ea, #a855f7); }
.swatch-pink   { background: linear-gradient(135deg, #db2777, #ec4899); }
.swatch-red    { background: linear-gradient(135deg, #e11d48, #f43f5e); }
.swatch-orange { background: linear-gradient(135deg, #ea580c, #f97316); }
.swatch-green  { background: linear-gradient(135deg, #059669, #10b981); }
.swatch-cyan   { background: linear-gradient(135deg, #0891b2, #06b6d4); }

/* Dark Mode System - Harmonized with Primary Spectrum & Fainter Subtle Borders */
html[data-theme="dark"],
body.dark-mode {
  /* Dynamic primary-tinted dark mode surfaces (Brighter surfaces + Glassmorphism) */
  --background: hsl(var(--primary-h), 42%, 6%);
  --background-secondary: hsl(var(--primary-h), 38%, 9%);
  --surface: hsl(var(--primary-h), 32%, 15%);
  --surface-card: hsl(var(--primary-h), 30%, 18%);
  --surface-soft: hsl(var(--primary-h), 28%, 23%);
  --surface-canvas: hsl(var(--primary-h), 42%, 6%);

  --glass-card-bg: linear-gradient(145deg, hsla(var(--primary-h), 28%, 21%, 0.78) 0%, hsla(var(--primary-h), 25%, 15%, 0.88) 100%);
  --glass-card-border: 1px solid hsla(var(--primary-h), 25%, 70%, 0.06);
  --glass-card-shadow: 0 10px 32px rgba(0, 0, 0, 0.35), inset 0 1px 0 hsla(var(--primary-h), 30%, 80%, 0.05);

  /* Soft, faint, elegant, non-intrusive borders for dark mode */
  --border: hsla(var(--primary-h), 25%, 70%, 0.06);
  --border-default: hsla(var(--primary-h), 25%, 70%, 0.06);
  --border-subtle: hsla(var(--primary-h), 25%, 70%, 0.035);
  --border-strong: hsla(var(--primary-h), 25%, 70%, 0.09);
  --line: var(--border-subtle);

  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.78);
  --text-muted: rgba(255, 255, 255, 0.50);
  --text-disabled: rgba(255, 255, 255, 0.30);
  --text-tertiary: rgba(255, 255, 255, 0.50);

  --primary-surface: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.18);
  --primary-border: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.35);
  --primary-soft: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.22);

  --gold: #f59e0b;
  --gold-hover: #d97706;
  --gold-rgb: 245, 158, 11;
  --gold-surface: rgba(245, 158, 11, 0.16);
  --gold-border: rgba(245, 158, 11, 0.35);
  --gold-text: #fbbf24;

  --ambient-bg: radial-gradient(circle at 10% 12%, hsla(var(--primary-h), var(--primary-s), 55%, 0.14), transparent 45%),
                radial-gradient(circle at 90% 88%, rgba(var(--gold-rgb), 0.08), transparent 40%),
                radial-gradient(circle at 50% 50%, hsla(var(--primary-h), 40%, 12%, 0.10), transparent 60%);

  --shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.35);
}

/* Specific Dark Mode Primary Tints & Soft Harmonized Borders */
html[data-theme="dark"][data-primary="blue"] {
  --background: #080d1a;
  --background-secondary: #0c1426;
  --surface: #142344;
  --surface-card: #1b2e56;
  --surface-soft: #233b6e;
  --surface-canvas: #080d1a;
  --border: rgba(147, 197, 253, 0.06);
  --border-default: rgba(147, 197, 253, 0.06);
  --border-subtle: rgba(147, 197, 253, 0.035);
  --border-strong: rgba(147, 197, 253, 0.09);
}

html[data-theme="dark"][data-primary="indigo"] {
  --background: #090a1a;
  --background-secondary: #0e1026;
  --surface: #191e4a;
  --surface-card: #232860;
  --surface-soft: #2d347c;
  --surface-canvas: #090a1a;
  --border: rgba(165, 180, 252, 0.06);
  --border-default: rgba(165, 180, 252, 0.06);
  --border-subtle: rgba(165, 180, 252, 0.035);
  --border-strong: rgba(165, 180, 252, 0.09);
}

html[data-theme="dark"][data-primary="purple"] {
  --background: #0e071a;
  --background-secondary: #160c28;
  --surface: #271648;
  --surface-card: #341e5e;
  --surface-soft: #422678;
  --surface-canvas: #0e071a;
  --border: rgba(216, 180, 254, 0.06);
  --border-default: rgba(216, 180, 254, 0.06);
  --border-subtle: rgba(216, 180, 254, 0.035);
  --border-strong: rgba(216, 180, 254, 0.09);
}

html[data-theme="dark"][data-primary="pink"] {
  --background: #170712;
  --background-secondary: #240c1d;
  --surface: #3e1734;
  --surface-card: #501d43;
  --surface-soft: #642554;
  --surface-canvas: #170712;
  --border: rgba(249, 168, 212, 0.06);
  --border-default: rgba(249, 168, 212, 0.06);
  --border-subtle: rgba(249, 168, 212, 0.035);
  --border-strong: rgba(249, 168, 212, 0.09);
}

html[data-theme="dark"][data-primary="red"] {
  --background: #170709;
  --background-secondary: #240b0f;
  --surface: #3e141d;
  --surface-card: #501925;
  --surface-soft: #642030;
  --surface-canvas: #170709;
  --border: rgba(253, 164, 175, 0.06);
  --border-default: rgba(253, 164, 175, 0.06);
  --border-subtle: rgba(253, 164, 175, 0.035);
  --border-strong: rgba(253, 164, 175, 0.09);
}

html[data-theme="dark"][data-primary="orange"] {
  --background: #150904;
  --background-secondary: #220e07;
  --surface: #3d1b0e;
  --surface-card: #4e2212;
  --surface-soft: #622b17;
  --surface-canvas: #150904;
  --border: rgba(253, 186, 116, 0.06);
  --border-default: rgba(253, 186, 116, 0.06);
  --border-subtle: rgba(253, 186, 116, 0.035);
  --border-strong: rgba(253, 186, 116, 0.09);
}

html[data-theme="dark"][data-primary="green"] {
  --background: #05140e;
  --background-secondary: #081f16;
  --surface: #103828;
  --surface-card: #164a36;
  --surface-soft: #1d5e45;
  --surface-canvas: #05140e;
  --border: rgba(110, 231, 183, 0.06);
  --border-default: rgba(110, 231, 183, 0.06);
  --border-subtle: rgba(110, 231, 183, 0.035);
  --border-strong: rgba(110, 231, 183, 0.09);
}

html[data-theme="dark"][data-primary="cyan"],
html[data-theme="dark"][data-primary="teal"] {
  --background: #041217;
  --background-secondary: #071c24;
  --surface: #0e3442;
  --surface-card: #13465a;
  --surface-soft: #195a72;
  --surface-canvas: #041217;
  --border: rgba(103, 232, 249, 0.06);
  --border-default: rgba(103, 232, 249, 0.06);
  --border-subtle: rgba(103, 232, 249, 0.035);
  --border-strong: rgba(103, 232, 249, 0.09);
}

/* Animated scroll reveals */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(28px) scale(0.985);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.reveal-on-scroll.revealed,
.reveal-on-scroll.is-revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
}
}
@media (prefers-reduced-motion: reduce) {
  .reveal-on-scroll { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* Modern dashboard and livestream surfaces */
.dash-body { background:#f7f8f6; }
.dash-topbar { background:rgba(255,255,255,.92); border-bottom:1px solid #e6e9e3; }
.dash-shell { display:grid; grid-template-columns:248px minmax(0,1fr); min-height:calc(100vh - 70px); }
.dash-sidebar { position:sticky; top:70px; height:calc(100vh - 70px); padding:22px; background:#fff; border-right:1px solid #e6e9e3; }
.dash-user { display:grid; grid-template-columns:42px 1fr; gap:11px; align-items:center; margin-bottom:22px; }
.avatar { display:grid; width:42px; height:42px; place-items:center; border-radius:50%; background:#e9f3ee; color:var(--forest); font-weight:950; }
.dash-nav { display:grid; gap:6px; }
.dash-nav a, .dash-nav button { display:flex; align-items:center; gap:10px; min-height:40px; border:0; border-radius:10px; padding:0 11px; background:transparent; color:#526058; font-weight: 600; text-align:left; }
.dash-nav a.active, .dash-nav a:hover, .dash-nav button:hover { background:#edf3ef; color:var(--forest); }
.dash-main { padding:24px; }
.dash-header { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:18px; }
.dash-title h1 { margin-bottom:8px; font-size:clamp(2rem,4vw,3.8rem); line-height:1; }
.dash-title p { max-width:720px; margin-bottom:0; }
.dash-toolbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.kpi-strip { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:18px; }
.kpi-card { display:grid; gap:8px; min-height:116px; border:1px solid #e3e7e0; border-radius:14px; padding:16px; background:#fff; box-shadow:0 14px 34px rgba(20,23,22,.06); }
.kpi-card .icon { display:grid; width:34px; height:34px; place-items:center; border-radius:10px; background:#edf3ef; color:var(--forest); }
.kpi-card strong { font-size:1.75rem; line-height:1; }
.kpi-card span { color:var(--muted); font-size:.86rem; font-weight:760; }
.dashboard-grid { display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:18px; align-items:start; }
.dashboard-grid.admin-grid { grid-template-columns:minmax(0,1fr) 420px; }
.stack { display:grid; gap:16px; }
.dash-panel { border:1px solid #e3e7e0; border-radius:16px; background:#fff; box-shadow:0 14px 34px rgba(20,23,22,.06); overflow:hidden; }
.dash-panel-pad { padding:18px; }
.panel-header { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:18px 18px 0; }
.panel-header h2, .panel-header h3 { margin-bottom:5px; }
.panel-header p { margin-bottom:0; font-size:.92rem; }
.field-category { padding:18px; border-top:1px solid #edf0ea; }
.field-category:first-of-type { border-top:0; }
.category-head { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.category-icon { display:grid; width:34px; height:34px; place-items:center; border-radius:10px; background:#f0f5f2; color:var(--forest); }
.category-head h3 { margin-bottom:2px; font-size:1rem; }
.category-head p { margin-bottom:0; font-size:.84rem; }
.readable-block { display:grid; gap:14px; }
.profile-story { margin:0; max-width:860px; color:#39443e; font-size:1rem; line-height:1.65; }
.content-callout { display:grid; gap:5px; border:1px solid #e3e7e0; border-radius:14px; padding:14px; background:linear-gradient(180deg,#fbfcfa,#f7f8f6); }
.content-callout span, .readable-grid span { color:#657269; font-size:.78rem; font-weight:900; letter-spacing:.04em; text-transform:uppercase; }
.content-callout strong { color:var(--ink); font-size:1.02rem; line-height:1.45; overflow-wrap:anywhere; }
.readable-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.readable-grid.three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.readable-grid > div { display:grid; gap:5px; min-height:84px; border:1px solid #e8ebe5; border-radius:14px; padding:13px; background:#fff; }
.readable-grid strong { color:var(--ink); font-size:1.02rem; line-height:1.35; overflow-wrap:anywhere; }
.pastor-readable { display:grid; grid-template-columns:96px minmax(0,1fr); gap:14px; align-items:start; border:1px solid #e3e7e0; border-radius:16px; padding:14px; background:#fbfcfa; }
.pastor-readable img { width:96px; aspect-ratio:1; border-radius:14px; object-fit:cover; background:#edf0ea; }
.pastor-readable h4 { margin:2px 0 2px; font-size:1.3rem; }
.pastor-readable p:last-child { margin-bottom:0; line-height:1.6; }
.eyebrow { color:var(--forest); font-size:.78rem; font-weight:950; letter-spacing:.08em; text-transform:uppercase; }
.ministry-chip-grid { display:flex; flex-wrap:wrap; gap:8px; }
.ministry-chip-grid .tag { background:#edf3ef; color:var(--forest); border-color:#dce7e1; font-weight:850; }
.block-editor { margin-top:16px; border:1px solid #e3e7e0; border-radius:14px; background:#fbfcfa; overflow:hidden; }
.block-editor summary { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:52px; padding:0 14px; cursor:pointer; list-style:none; }
.block-editor summary::-webkit-details-marker { display:none; }
.block-editor summary span { display:flex; align-items:center; gap:8px; color:var(--ink); font-weight:900; }
.block-editor summary small { color:#69756e; font-weight:760; text-align:right; }
.block-editor:not([open]) .editor-body { display:none; }
.block-editor[open] { position:fixed; inset:0; z-index:80; display:grid; grid-template-columns:minmax(0,min(980px,calc(100vw - 48px))); align-content:center; justify-content:center; margin:0; padding:24px; border:0; border-radius:0; background:rgba(9,15,12,.58); overflow:auto; }
.block-editor[open] summary { width:100%; min-height:72px; border:1px solid #e3e7e0; border-bottom:0; border-radius:18px 18px 0 0; padding:18px 22px; background:#fff; box-shadow:0 28px 90px rgba(20,23,22,.18); }
.block-editor[open] summary span { font-size:1.08rem; }
.block-editor[open] .editor-body { width:100%; max-height:min(72vh,780px); overflow:auto; border:1px solid #e3e7e0; border-radius:0 0 18px 18px; background:#fff; box-shadow:0 28px 90px rgba(20,23,22,.18); }
.block-editor[open] .compact-grid { gap:16px 18px; }
.block-editor[open] .form-field input,
.block-editor[open] .form-field select,
.block-editor[open] .form-field textarea { min-height:48px; border-radius:12px; padding:11px 14px; font-size:.96rem; font-weight:760; }
.block-editor[open] .form-field textarea { min-height:132px; line-height:1.5; }
.editor-body { display:grid; gap:16px; padding:22px; }
.editor-actions { display:flex; justify-content:flex-end; gap:10px; padding-top:4px; }
body.portal-modal-open { overflow:hidden; }
.compact-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.compact-grid.three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.side-card { border:1px solid #e3e7e0; border-radius:16px; padding:16px; background:#fff; box-shadow:0 14px 34px rgba(20,23,22,.06); }
.profile-preview { overflow:hidden; padding:0; }
.preview-cover { min-height:142px; background:linear-gradient(180deg,rgba(20,23,22,.08),rgba(20,23,22,.54)), var(--preview-image) center/cover; }
.preview-body { padding:16px; }
.progress-list, .activity-list, .chat-list { display:grid; gap:10px; }
.progress-item, .activity-item, .chat-message { display:grid; grid-template-columns:34px 1fr; gap:10px; align-items:start; }
.progress-item i, .activity-item i, .chat-avatar { display:grid; width:34px; height:34px; place-items:center; border-radius:50%; background:#edf3ef; color:var(--forest); }
.mini-chart { display:grid; gap:8px; }
.bar { height:9px; border-radius:999px; background:#edf0ea; overflow:hidden; }
.bar span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--forest),var(--teal)); }
.admin-filter-row { display:grid; grid-template-columns:minmax(0,1fr) 150px 150px auto; gap:10px; padding:18px; border-bottom:1px solid #edf0ea; }
.admin-command-list { display:grid; gap:10px; }
.command-card { display:grid; grid-template-columns:38px 1fr auto; gap:10px; align-items:center; border:1px solid #edf0ea; border-radius:12px; padding:12px; background:#fbfcfa; }
.command-card .icon { display:grid; width:38px; height:38px; place-items:center; border-radius:12px; background:#edf3ef; color:var(--forest); }
.live-page { min-height:100vh; background:radial-gradient(circle at 20% 0%,rgba(20,125,126,.08),transparent 34%), radial-gradient(circle at 84% 10%,rgba(215,168,62,.1),transparent 32%), #f7f8f6; color:var(--ink); }
.live-page .topbar { background: hsla(var(--primary-h), 25%, 98%, 0.94); border-color: var(--border-subtle); color: var(--ink); }
.live-page .brand small, .live-page .nav-links, .live-page p { color:var(--muted); }
.live-shell { width:min(var(--max),calc(100% - 44px)); margin:0 auto; padding:24px 0 44px; }
.live-grid { display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:18px; align-items:start; }
.live-player { min-height:620px; border:1px solid #e3e7e0; border-radius:18px; overflow:hidden; background:#fff; box-shadow:0 24px 70px rgba(20,23,22,.1); }
.live-stage { min-height:500px; display:grid; place-items:center; position:relative; border-bottom:1px solid #e3e7e0; background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(20,23,22,.34)), var(--player-image) center/cover; }
.live-stage::after { content:"LIVE"; position:absolute; left:18px; top:18px; border-radius:999px; padding:7px 10px; background:#ef4444; color:#fff; font-size:.75rem; font-weight:950; }
.live-control-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:86px; padding:16px; background:#fff; }
.live-control-group { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.control-dot { display:grid; width:38px; height:38px; place-items:center; border-radius:50%; background:#edf3ef; color:var(--forest); }
.live-card { border:1px solid #e3e7e0; border-radius:16px; background:#fff; box-shadow:0 20px 54px rgba(20,23,22,.08); }
.live-card-pad { padding:16px; }
.live-sidebar-tabs { position:sticky; top:88px; min-height:620px; display:grid; grid-template-rows:auto minmax(0,1fr); overflow:hidden; }
.live-tab-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; padding:10px; border-bottom:1px solid #e3e7e0; background:#fbfcfa; }
.live-tab-button { display:flex; align-items:center; justify-content:center; gap:7px; min-height:42px; border:1px solid #e3e7e0; border-radius:12px; background:#fff; color:#526058; font-weight: 600; font-size:.82rem; cursor:pointer; transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease; }
.live-tab-button svg { width:16px; height:16px; }
.live-tab-button:hover { border-color:#cbd8d0; color:var(--forest); transform:translateY(-1px); }
.live-tab-button.active { border-color:#cfe0d7; background:#edf3ef; color:var(--forest); }
.live-tab-panel { display:none; min-height:0; }
.live-tab-panel.active { display:block; }
.live-tab-panel.chat-panel.active { display:grid; grid-template-rows:auto minmax(260px,1fr) auto; overflow:hidden; }
.live-tab-panel .stack { margin-top:14px; }
.chat-panel { min-height:0; }
.chat-list { overflow:auto; padding:14px 16px; border-top:1px solid #e8ebe5; border-bottom:1px solid #e8ebe5; background:#fbfcfa; }
.chat-message strong { display:block; margin-bottom:3px; color:var(--ink); }
.chat-message p { margin:0; color:var(--muted); font-size:.92rem; }
.chat-form { display:grid; grid-template-columns:1fr auto; gap:8px; padding:12px; }
.chat-form input, .live-card input, .live-card textarea { width:100%; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink); padding:11px 12px; outline:0; }
.chat-form input::placeholder, .live-card input::placeholder, .live-card textarea::placeholder { color:#8a938d; }
.private-app:not(.is-authenticated) .private-content { display:none; }
.private-app.is-authenticated .login-screen { display:none !important; }
.login-screen {
  height: calc(100vh - 70px);
  min-height: 540px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 24px 28px 0 28px;
  box-sizing: border-box;
  background: radial-gradient(circle at 18% 10%, rgba(26, 68, 120, 0.08), transparent 32%), var(--soft);
  overflow: hidden;
}

.portal-grid {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  grid-template-rows: min-content min-content;
  column-gap: 48px;
  row-gap: 16px;
  width: min(1080px, 100%);
  align-items: center;
  margin-bottom: 12px;
}

.portal-hero-title-section {
  grid-column: 1;
  grid-row: 1;
}

.onboarding-feature-carousel {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
}

.login-card {
  grid-column: 2;
  grid-row: 1 / span 2;
}

/* Dynamic Onboarding Feature Carousel */
.onboarding-feature-carousel {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 24px;
  min-height: 180px;
  position: relative;
  width: 100%;
}

.onboarding-feature-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  animation: onboardingFadeInRise 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.onboarding-feature-group.exit {
  animation: onboardingFadeOutFall 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.onboarding-feature-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.25rem;
  font-weight: 750;
  color: var(--ink);
  padding-left: 4px;
}

.onboarding-feature-item i {
  color: var(--forest);
  width: 25px;
  height: 25px;
  flex-shrink: 0;
}

.onboarding-feature-stats {
  display: flex;
  gap: 16px;
  width: 100%;
  flex-wrap: nowrap;
}

.onboarding-stat-card {
  flex: 0 0 auto;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 4px 12px rgba(20, 23, 22, 0.02);
  opacity: 0;
  transform: translateY(12px);
  animation: onboardingFadeInRise 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.onboarding-stat-card-icon {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: rgba(23, 76, 58, 0.08);
  color: var(--forest);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.onboarding-stat-card-icon i {
  width: 18px;
  height: 18px;
}

.onboarding-stat-card-content {
  display: flex;
  flex-direction: column;
  gap: 0px;
}

.onboarding-stat-card-content strong {
  font-size: 1.3rem;
  font-weight: 850;
  color: var(--ink);
  line-height: 1.1;
}

.onboarding-stat-card-content span {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}

@keyframes onboardingFadeInRise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes onboardingFadeOutFall {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-14px);
  }
}

/* Launch Goal Selection in Signup Card */
.launch-goal-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.launch-goal-card {
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 12px 10px;
  background: var(--surface-soft);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.launch-goal-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.launch-goal-card i {
  width: 24px;
  height: 24px;
  color: var(--primary);
  transition: transform 0.2s ease;
}

.launch-goal-card strong {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.2;
}

.launch-goal-card span {
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.15;
}

.launch-goal-card:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
  background: var(--surface);
}

.launch-goal-card.active,
.launch-goal-card:has(input:checked) {
  border-color: var(--primary);
  background: rgba(43, 94, 167, 0.08);
  box-shadow: 0 0 0 1px var(--primary);
}

.launch-goal-card.active strong,
.launch-goal-card:has(input:checked) strong {
  color: var(--primary);
}

/* Member to Creator Upgrade Badge & Components */
.creator-upgrade-profile-badge {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-radius: 16px;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  margin-bottom: 16px;
}
.creator-upgrade-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--gradient-brand, var(--primary));
  color: #ffffff;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 1.05rem;
  flex: 0 0 44px;
  box-shadow: 0 4px 12px hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.25);
}
.creator-upgrade-details {
  flex: 1 1 auto;
  min-width: 0;
}
.creator-upgrade-greeting {
  font-size: 0.92rem;
  color: var(--ink);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.creator-upgrade-greeting strong {
  color: var(--primary);
  font-weight: 800;
}
.creator-upgrade-email {
  font-size: 0.78rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.creator-upgrade-status-pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: rgba(43, 94, 167, 0.1);
  color: var(--primary);
  border: 1px solid rgba(43, 94, 167, 0.25);
}
.creator-upgrade-status-pill svg {
  width: 13px;
  height: 13px;
}
html[data-theme="dark"] .creator-upgrade-profile-badge {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border-subtle);
}
html[data-theme="dark"] .creator-upgrade-status-pill {
  background: rgba(43, 94, 167, 0.22);
  border-color: rgba(43, 94, 167, 0.4);
  color: #93c5fd;
}

/* Authenticated Launchpad Grid & Panels */
.launchpad-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  margin-top: 20px;
  margin-bottom: 24px;
}

.launchpad-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.launchpad-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.07);
  border-color: var(--primary);
}

.launchpad-card-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.launchpad-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(43, 94, 167, 0.1);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.launchpad-icon i {
  width: 22px;
  height: 22px;
}

.launchpad-card-title strong {
  display: block;
  font-size: 1.15rem;
  font-weight: 850;
  color: var(--ink);
  margin-bottom: 4px;
}

.launchpad-card-title span {
  display: block;
  font-size: 0.84rem;
  color: var(--muted);
  line-height: 1.4;
}

.launchpad-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.launchpad-card-badge {
  font-size: 0.75rem;
  font-weight: 750;
  color: var(--forest);
  background: rgba(34, 139, 34, 0.1);
  padding: 3px 8px;
  border-radius: 6px;
}

@media (max-width: 1040px) {
  .login-screen {
    height: auto;
    min-height: auto;
    overflow: visible;
    padding-bottom: 0;
  }
  .portal-grid {
    flex: none;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 15px;
    margin-bottom: 15px;
  }
  .portal-hero-title-section {
    grid-column: 1;
    grid-row: 1;
    text-align: center;
    align-items: center;
    padding: 0 50px;
    box-sizing: border-box;
  }
  .login-card {
    grid-column: 1;
    grid-row: 2;
  }
  .onboarding-feature-carousel {
    grid-column: 1;
    grid-row: 3;
    min-height: auto;
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .onboarding-feature-group {
    align-items: center;
  }
  .onboarding-feature-item {
    justify-content: center;
    text-align: center;
    font-size: 1.12rem;
  }
  .onboarding-feature-item i {
    width: 22px;
    height: 22px;
  }
  .onboarding-feature-stats {
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
  }
  .onboarding-stat-card {
    padding: 10px 14px;
    gap: 10px;
  }
  .onboarding-stat-card-icon {
    width: 32px;
    height: 32px;
  }
  .onboarding-stat-card-icon i {
    width: 16px;
    height: 16px;
  }
  .onboarding-stat-card-content strong {
    font-size: 1.15rem;
  }
  .onboarding-stat-card-content span {
    font-size: 0.72rem;
  }
  .portal-card-title {
    font-size: 1.35rem;
    text-align: center;
  }
}

.portal-card-title {
  font-size: 1.6rem;
}

.portal-hero-title-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: var(--ink);
  animation: floatUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.portal-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--forest);
}

.portal-hero-title-section h1 {
  font-size: clamp(1.8rem, 5vw, 3rem);
  font-weight: 900;
  line-height: 1.15;
  margin: 0;
}

.portal-desc {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 10px 0;
}

.portal-bullets {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-left: 20px;
}

.bullet-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
}

.bullet-item i {
  color: var(--forest);
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.login-card {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: 0 24px 80px rgba(40, 44, 42, 0.06);
  padding: 34px;
  animation: floatUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}

/* Tabs switcher styling */
.portal-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--soft);
  padding: 4px;
  border-radius: 12px;
  margin-bottom: 24px;
}

.tab-btn {
  background: transparent;
  border: none;
  padding: 10px;
  font-size: 0.88rem;
  font-weight: 800;
  border-radius: 9px;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.2s ease;
  outline: none;
}

.tab-btn.active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 4px 12px rgba(20, 23, 22, 0.06);
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

.tab-content h2 {
  font-size: 1.45rem;
  font-weight: 900;
  margin: 4px 0 12px 0;
}

.tab-content form {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.security-note {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  border-radius: 12px;
  padding: 12px;
  background: rgba(26, 68, 120, 0.06);
  color: var(--blue);
  font-size: .88rem;
  line-height: 1.45;
  font-weight: 700;
}

/* Responsive grid for portal split screen */
@media (max-width: 900px) {
  .portal-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

@media (max-width:1040px) {
  .dash-shell, .dashboard-grid, .dashboard-grid.admin-grid, .live-grid { grid-template-columns:1fr; }
  .dash-sidebar { position:static; height:auto; border-right:0; border-bottom:1px solid #e6e9e3; }
  .dash-nav { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .kpi-strip { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .live-sidebar-tabs { position:static; min-height:520px; }
}

@media (max-width:680px) {
  .dash-main { padding:16px; }
  .dash-header { flex-direction:column; }
  .dash-toolbar, .dash-toolbar .button { width:100%; }
  .kpi-strip, .compact-grid, .compact-grid.three, .readable-grid, .readable-grid.three, .admin-filter-row, .dash-nav, .chat-form { grid-template-columns:1fr; }
  .live-shell { width:min(100% - 28px,var(--max)); }
  .live-player, .live-stage { min-height:420px; }
  .live-sidebar-tabs { min-height:0; }
  .live-tab-list { grid-template-columns:1fr; }
  .pastor-readable { grid-template-columns:1fr; }
  .block-editor summary { align-items:flex-start; flex-direction:column; justify-content:center; padding:12px 14px; }
  .block-editor[open] { grid-template-columns:minmax(0,calc(100vw - 24px)); padding:12px; align-content:start; }
  .block-editor[open] summary { min-height:0; padding:16px; }
  .editor-body { padding:16px; }
  .block-editor summary small { text-align:left; }
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--soft);
  color: var(--ink);
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

.container {
  width: min(var(--max), calc(100% - 44px));
  margin: 0 auto;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 1000 !important;
  background: hsla(var(--primary-h), 25%, 98%, 0.92);
  border-bottom: 1px solid hsla(var(--primary-h), 20%, 85%, 0.70);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition: background 0.4s ease, border-color 0.4s ease;
}

.topbar.has-active-popover,
.topbar:has(.theme-palette-popover:not([hidden])),
.topbar:has(.lang-selector-container.open),
.topbar:has(.open),
.dash-topbar.has-active-popover,
.aw-topbar.has-active-popover,
.member-shell-header.has-active-popover {
  z-index: 100000 !important;
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 70px;
  gap: 18px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-width: max-content;
}

.brand-mark {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 11px;
  background: var(--forest);
  color: #fff;
  font-weight: 900;
}

.brand strong {
  display: block;
  line-height: 1;
}

.brand small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
}

.nav-links,
.nav-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}

.nav-links {
  margin-left: auto;
  color: #3b4640;
  font-size: 0.93rem;
  font-weight: 600;
}

.nav-actions {
  margin-left: auto;
}

.nav-links ~ .nav-actions {
  margin-left: 0;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 10px 15px;
  background: #fff;
  color: var(--ink);
  font-weight: 600;
  line-height: 1;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.button:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(20, 23, 22, 0.12);
}

.button.primary {
  background: var(--forest);
  color: #fff;
}

.button.gold {
  background: var(--gold);
  color: #2f250f;
}

.button.ghost {
  border-color: var(--line);
}

.button.danger {
  color: #9f2f24;
  border-color: #efc7c0;
}

.button.small {
  min-height: 34px;
  padding: 8px 10px;
  font-size: 0.85rem;
}

.hero {
  padding: 34px 0 74px;
}

.hero-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(340px, 0.95fr);
  gap: 34px;
  align-items: stretch;
  min-height: 620px;
  border: 1px solid rgba(221, 216, 202, 0.88);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.hero-copy {
  padding: clamp(36px, 6vw, 70px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-media {
  position: relative;
  min-height: 460px;
  background: linear-gradient(180deg, rgba(20, 23, 22, 0.08), rgba(20, 23, 22, 0.62)), var(--hero-image) center/cover;
}

.hero-media-card {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  display: grid;
  gap: 12px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 14px;
  padding: 18px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(14px);
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  border-radius: 999px;
  padding: 7px 10px;
  background: #f8edcf;
  color: #7a5207;
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

h1,
h2,
h3,
h4,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 18px;
  max-width: 830px;
  font-size: clamp(3rem, 7vw, 6.7rem);
  line-height: 0.96;
  letter-spacing: 0;
}

h2 {
  margin-bottom: 14px;
  font-size: clamp(2rem, 4vw, 3.7rem);
  line-height: 1.02;
  letter-spacing: 0;
}

h3 {
  margin-bottom: 8px;
  font-size: 1.28rem;
  line-height: 1.2;
}

p {
  color: var(--muted);
  line-height: 1.65;
}

.lead {
  max-width: 660px;
  font-size: 1.1rem;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.section {
  padding: 72px 0;
}

.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}

.section-head.center {
  display: block;
  max-width: 760px;
  margin: 0 auto 34px;
  text-align: center;
}

.search-panel,
.panel {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 18px 48px rgba(20, 23, 22, 0.08);
}

/* ======================================================
   INDUSTRY-LEADING SEAMLESS SEARCH & FILTER BAR (Airbnb / Linear Style)
   ====================================================== */

.directory-search-container {
  margin-bottom: 36px;
}

.search-hero-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.search-input-wrapper {
  position: relative;
  flex: 1;
}

.search-hero-icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: #64748b;
  pointer-events: none;
}

.search-hero-input {
  width: 100%;
  min-height: 52px;
  border-radius: 14px;
  border: 1.5px solid #cbd5e1 !important;
  background: #ffffff !important;
  padding: 12px 18px 12px 50px !important;
  font-size: 0.98rem !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.search-hero-input:focus {
  border-color: #c79624 !important;
  box-shadow: 0 0 0 4px rgba(199, 150, 36, 0.15), 0 8px 24px rgba(15, 23, 42, 0.08) !important;
}

.reset-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 18px;
  border-radius: 14px;
  border: 1.5px solid #e2e8f0;
  background: #ffffff;
  color: #475569;
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}

.reset-filter-btn:hover {
  background: #f8fafc;
  color: #0f172a;
  border-color: #cbd5e1;
}

/* Seamless Segmented Filter Bar */
.seamless-filter-bar {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 8px 30px -10px rgba(15, 23, 42, 0.06);
  overflow: hidden;
}

.filter-segment {
  display: flex;
  flex-direction: column;
  padding: 12px 16px;
  border-right: 1px solid #f1f5f9;
  background: #ffffff;
  transition: background 0.2s ease;
  cursor: pointer;
}

.filter-segment:hover {
  background: #f8fafc;
}

.filter-segment.last-segment {
  border-right: none;
}

.segment-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.68rem;
  font-weight: 800;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 2px;
}

.segment-label svg {
  width: 13px;
  height: 13px;
  color: #c79624;
}

.segment-select {
  width: 100%;
  border: none !important;
  outline: none !important;
  background-color: transparent !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23d97706' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-position: right 4px center !important;
  background-size: 14px 14px !important;
  background-repeat: no-repeat !important;
  padding: 2px 22px 2px 0 !important;
  margin: 0 !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  box-shadow: none !important;
}

.seamless-filter-bar.events-filter-bar {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1024px) {
  .seamless-filter-bar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .filter-segment:nth-child(3) {
    border-right: none;
  }
  .filter-segment {
    border-bottom: 1px solid var(--border-subtle);
  }
}

@media (max-width: 640px) {
  .seamless-filter-bar {
    grid-template-columns: 1fr;
  }
  .filter-segment {
    border-right: none !important;
    border-bottom: 1px solid #f1f5f9;
  }
  .search-hero-bar {
    flex-direction: column;
    align-items: stretch;
  }
}

.search-panel {
  background: #ffffff;
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.05);
  margin-bottom: 32px;
}

.search-primary-row {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 20px;
}

.search-input-flex {
  position: relative;
  flex: 1;
}

.search-field-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: #64748b;
  pointer-events: none;
}

.search-field-input {
  width: 100%;
  min-height: 48px;
  border-radius: 12px;
  border: 1.5px solid #cbd5e1 !important;
  background: #f8fafc !important;
  padding: 12px 16px 12px 48px !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.search-field-input:focus {
  border-color: #c79624 !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(199, 150, 36, 0.15) !important;
}

.filter-controls-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.filter-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.filter-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.76rem;
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.filter-label svg {
  width: 14px;
  height: 14px;
  color: #c79624;
}

.styled-filter-select {
  width: 100%;
  min-height: 42px;
  border-radius: 10px;
  border: 1px solid #cbd5e1 !important;
  background-color: #ffffff !important;
  padding: 8px 12px !important;
  font-size: 0.86rem !important;
  font-weight: 650 !important;
  color: #0f172a !important;
  transition: all 0.2s;
  cursor: pointer;
}

.styled-filter-select:focus {
  border-color: #c79624 !important;
  box-shadow: 0 0 0 3px rgba(199, 150, 36, 0.15) !important;
}

@media (max-width: 1024px) {
  .filter-controls-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .filter-controls-grid {
    grid-template-columns: 1fr;
  }
  .search-primary-row {
    flex-direction: column;
  }
}

.field,
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  padding: 11px 12px;
  outline: 0;
  font-weight: 650;
}

select.field,
.form-field select {
  appearance: none;
  padding-right: 38px;
  background-image:
    linear-gradient(45deg, transparent 50%, #1f2a24 50%),
    linear-gradient(135deg, #1f2a24 50%, transparent 50%);
  background-position: calc(100% - 21px) 50%, calc(100% - 15px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.form-field {
  display: grid;
  gap: 8px;
}

.form-field span {
  color: #536058;
  font-size: 0.78rem;
  font-weight: 600;
  margin-left: 4px;
}

.form-field textarea {
  min-height: 106px;
  resize: vertical;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.form-grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  margin-top: 18px;
}

.church-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(20, 23, 22, 0.08);
}

.church-photo {
  position: relative;
  height: 174px;
  background: var(--photo) center/cover;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 7px 9px;
  background: rgba(20, 23, 22, 0.86);
  color: #fff;
  font-size: 0.76rem;
  font-weight: 900;
}

.church-photo .badge {
  position: absolute;
  left: 12px;
  bottom: 12px;
}

.church-card-body {
  padding: 16px;
}

.meta {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 12px 0;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid #ded8c9;
  border-radius: 999px;
  padding: 6px 8px;
  background: #f8f5ee;
  color: #39433d;
  font-size: 0.76rem;
  font-weight: 820;
}

.card-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

.card-actions .button {
  flex: 1;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.stat {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px;
  background: #fff;
}

.stat strong {
  display: block;
  margin-bottom: 7px;
  font-size: 2rem;
  line-height: 1;
}

.story-grid,
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.story,
.feature,
.summary-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}

.story-image {
  height: 170px;
  background: var(--image) center/cover;
}

.story-body,
.feature,
.summary-card {
  padding: 18px;
}

.app-shell {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  min-height: calc(100vh - 70px);
}

.sidebar {
  position: sticky;
  top: 70px;
  height: calc(100vh - 70px);
  border-right: 1px solid var(--line);
  background: #fff;
  padding: 22px;
}

.sidebar-title {
  margin-bottom: 20px;
}

.sidebar-nav {
  display: grid;
  gap: 8px;
}

.sidebar-nav a,
.sidebar-nav button {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 40px;
  border: 0;
  border-radius: var(--radius);
  padding: 0 10px;
  background: transparent;
  color: #39433d;
  font-weight: 600;
  text-align: left;
}

.sidebar-nav a.active,
.sidebar-nav button.active,
.sidebar-nav a:hover,
.sidebar-nav button:hover {
  background: var(--soft);
  color: var(--forest);
}

.workspace {
  padding: 28px;
}

.workspace-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
}

.workspace-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 18px;
  align-items: start;
}

.panel {
  padding: 20px;
}

.panel + .panel {
  margin-top: 16px;
}

.metric-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.metric {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  background: #fff;
}

.metric strong {
  display: block;
  font-size: 1.75rem;
}

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
}

table {
  width: 100%;
  min-width: 860px;
  border-collapse: collapse;
  background: #fff;
}

th,
td {
  padding: 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

th {
  background: #f8f6f0;
  color: #58635d;
  font-size: 0.75rem;
  font-weight: 950;
  text-transform: uppercase;
}

tr:last-child td {
  border-bottom: 0;
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 7px 9px;
  background: #ecfdf3;
  color: #166534;
  font-size: 0.76rem;
  font-weight: 900;
  white-space: nowrap;
}

.status.pending {
  background: #fff2cc;
  color: #725008;
}

.status.offline {
  background: #efebe2;
  color: #5a625d;
}

.status.premium {
  background: #eee9ff;
  color: var(--plum);
}

.row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.profile-hero {
  min-height: 470px;
  display: grid;
  align-items: end;
  color: #fff;
  background: linear-gradient(180deg, rgba(20, 23, 22, 0.2), rgba(20, 23, 22, 0.82)), var(--profile-image) center/cover;
}

.profile-hero-content {
  padding: 96px 0 42px;
}

.profile-hero h1 {
  color: #fff;
}

.profile-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 18px;
  align-items: start;
  margin-top: -26px;
}

.contact-list {
  display: grid;
  gap: 10px;
}

.contact-list a,
.contact-list span {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 38px;
}

.media-player {
  min-height: 520px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(180deg, rgba(20, 23, 22, 0.18), rgba(20, 23, 22, 0.86)), var(--player-image) center/cover;
  box-shadow: var(--shadow);
}

.play-button {
  display: grid;
  width: 86px;
  height: 86px;
  place-items: center;
  border-radius: 50%;
  background: var(--gold);
  color: #2f250f;
  margin: 0 auto 18px;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 18px;
  z-index: 80;
  transform: translateX(-50%) translateY(110px);
  border-radius: 999px;
  padding: 12px 16px;
  background: var(--ink);
  color: #fff;
  font-weight: 850;
  box-shadow: var(--shadow);
  transition: transform 180ms ease;
}

.toast.show {
  transform: translateX(-50%) translateY(0);
}

.empty {
  padding: 24px;
  color: var(--muted);
}

.lucide {
  width: 1.05em;
  height: 1.05em;
  stroke-width: 2.3;
  vertical-align: -0.16em;
}

@media (max-width: 1040px) {
  .nav-links {
    display: none;
  }

  .hero-panel,
  .workspace-grid,
  .profile-layout {
    grid-template-columns: 1fr;
  }

  .search-row,
  .form-grid.three {
    grid-template-columns: 1fr 1fr;
  }

  .cards-grid,
  .story-grid,
  .feature-grid,
  .stats-grid,
  .metric-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .sidebar-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .container {
    width: min(100% - 28px, var(--max));
  }

  .section-head,
  .workspace-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .nav-actions {
    margin-left: 0;
    width: 100%;
  }

  .nav-actions .button {
    flex: 1;
  }

  .hero {
    padding-top: 18px;
  }

  .hero-copy {
    padding: 28px;
  }

  .hero-media {
    min-height: 320px;
  }

  .search-row,
  .form-grid,
  .form-grid.three,
  .cards-grid,
  .story-grid,
  .feature-grid,
  .stats-grid,
  .metric-row {
    grid-template-columns: 1fr;
  }

  .workspace {
    padding: 18px;
  }

  .sidebar-nav {
    grid-template-columns: 1fr;
  }

  h1 {
    font-size: clamp(2.6rem, 14vw, 4.4rem);
  }
}

@media (min-width:560px) and (max-width:1040px) {
  body[data-page="portal"] .dashboard-grid {
    grid-template-columns: minmax(0, 1fr) 250px;
  }
}

/* Redesigned 100vh Hero Page Styles */
body.hero-only-page {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--background);
}

body.hero-only-page .topbar {
  flex-shrink: 0;
}

body.hero-only-page footer,
body.hero-only-page .platform-footer {
  display: block;
}

body.hero-only-page .hero-main {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

body.hero-only-page main {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.hero-fullscreen {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  min-width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: 0;
}

.video-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none !important;
  overflow: hidden;
  background: #141716;
  user-select: none;
}

.video-background video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.65;
  pointer-events: none !important;
  user-select: none;
  z-index: 1;
}

.video-background iframe {
  width: 100vw;
  height: 56.25vw; /* 16:9 ratio */
  min-height: 100vh;
  min-width: 177.77vh; /* 16:9 ratio */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: none;
  opacity: 0.65;
  pointer-events: none !important;
  user-select: none;
  z-index: 0;
}

.hero-glow-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: 
    linear-gradient(to top, hsla(var(--primary-h), 45%, 6%, 0.95) 0%, hsla(var(--primary-h), 35%, 10%, 0.65) 50%, hsla(var(--primary-h), 30%, 12%, 0.25) 100%),
    linear-gradient(135deg, hsla(var(--primary-h), var(--primary-s), 50%, 0.42) 0%, transparent 65%),
    radial-gradient(circle at 80% 25%, rgba(var(--gold-rgb), 0.28) 0%, transparent 55%),
    radial-gradient(circle at 15% 85%, hsla(var(--primary-h), 80%, 55%, 0.22) 0%, transparent 60%);
  pointer-events: none;
  transition: background 0.5s ease;
}

html[data-theme="dark"] .hero-glow-overlay {
  background: 
    linear-gradient(to top, hsla(var(--primary-h), 50%, 4%, 0.98) 0%, hsla(var(--primary-h), 40%, 7%, 0.72) 50%, hsla(var(--primary-h), 35%, 9%, 0.35) 100%),
    linear-gradient(135deg, hsla(var(--primary-h), var(--primary-s), 45%, 0.45) 0%, transparent 65%),
    radial-gradient(circle at 80% 25%, rgba(var(--gold-rgb), 0.24) 0%, transparent 55%),
    radial-gradient(circle at 15% 85%, hsla(var(--primary-h), 80%, 50%, 0.25) 0%, transparent 60%);
}

.hero-container {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(360px, 0.8fr);
  gap: 48px;
  align-items: center;
  height: 100%;
  padding-top: 82px;
  padding-bottom: 20px;
}

.hero-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  color: #fff;
  padding: 100px 20px 100px 0;
}

.hero-left h1 {
  font-size: clamp(2.5rem, 4vw, 4rem);
  color: #fff;
  line-height: 1.05;
  margin-top: 16px;
  margin-bottom: 16px;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.hero-left .lead {
  font-size: 1.05rem;
  line-height: 1.6;
  color: rgba(235, 240, 237, 0.85);
  margin-bottom: 32px;
  max-width: 600px;
}

.hero-left .kicker {
  background: rgba(215, 168, 62, 0.18);
  color: #f5cb6c;
  border: 1px solid rgba(215, 168, 62, 0.35);
  padding: 6px 12px;
  letter-spacing: 0.05em;
}

/* Dynamic Hero Carousel Animations & Layout */
.hero-dynamic-content {
  display: flex;
  flex-direction: column;
  transition: opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1), transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), filter 0.28s ease;
  will-change: opacity, transform;
}

.hero-dynamic-content.hero-slide-animating-out {
  opacity: 0;
  transform: translateY(-8px) scale(0.99);
  filter: blur(2px);
  pointer-events: none;
}

.hero-dynamic-content.hero-slide-animating-in {
  animation: heroSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes heroSlideIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.99);
    filter: blur(2px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

.hero-dynamic-title {
  margin-top: 0 !important;
}

/* Slider Track Sync Transition */
.slider-wrapper {
  transition: opacity 0.28s ease, transform 0.28s ease;
}

.slider-wrapper.slider-animating-out {
  opacity: 0.15;
  transform: translateY(6px);
  pointer-events: none;
}

.slider-wrapper.slider-animating-in {
  animation: sliderFadeSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes sliderFadeSlideIn {
  from {
    opacity: 0.15;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Slide Indicator Dots / Navigation */
.hero-slide-indicators {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  margin-bottom: 8px;
}

.hero-indicator-dot {
  width: 24px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.25);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s ease, transform 0.2s ease;
}

.hero-indicator-dot:hover {
  background: rgba(255, 255, 255, 0.55);
}

.hero-indicator-dot.active {
  width: 44px;
  background: var(--gold, #f5cb6c);
  box-shadow: 0 0 10px rgba(245, 203, 108, 0.45);
}

/* Slider Section: Inline breakout, Full Width, grouped under text content */
.slider-wrapper {
  position: relative;
  width: 100vw;
  /* Break out of .hero-left and container to touch screen edges exactly */
  margin-left: calc((min(var(--max), 100vw - 44px) - 100vw) / 2);
  z-index: 5; /* Lower z-index so it slides behind the form card */
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.slider-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  color: #f5cb6c;
  letter-spacing: 0.08em;
  /* Align text exactly with container left edge */
  padding-left: max(22px, calc((100vw - var(--max)) / 2));
}

.slider-container-box {
  width: 100%;
  overflow: hidden;
  position: relative;
  /* Default Mobile Mask: fade 24px on both edges */
  mask-image: linear-gradient(to right, 
    rgba(0, 0, 0, 0) 0px, 
    rgba(0, 0, 0, 1) 24px, 
    rgba(0, 0, 0, 1) calc(100% - 24px), 
    rgba(0, 0, 0, 0) 100%
  );
  -webkit-mask-image: linear-gradient(to right, 
    rgba(0, 0, 0, 0) 0px, 
    rgba(0, 0, 0, 1) 24px, 
    rgba(0, 0, 0, 1) calc(100% - 24px), 
    rgba(0, 0, 0, 0) 100%
  );
}

@media (min-width: 1041px) {
  .slider-container-box {
    /* Desktop Mask: 100px fade on left, 450px fade on right (matches right column width) */
    mask-image: linear-gradient(to right, 
      rgba(0, 0, 0, 0) 0px, 
      rgba(0, 0, 0, 1) 100px, 
      rgba(0, 0, 0, 1) calc(100% - 450px), 
      rgba(0, 0, 0, 0) 100%
    );
    -webkit-mask-image: linear-gradient(to right, 
      rgba(0, 0, 0, 0) 0px, 
      rgba(0, 0, 0, 1) 100px, 
      rgba(0, 0, 0, 1) calc(100% - 450px), 
      rgba(0, 0, 0, 0) 100%
    );
  }
}

.slider-track {
  display: flex;
  gap: 16px;
  width: max-content;
  animation: marqueeScroll 64s linear infinite;
  padding: 16px 4px;
  padding-left: max(22px, calc((100vw - var(--max)) / 2));
  padding-right: max(22px, calc((100vw - var(--max)) / 2));
}

.slider-track:hover {
  animation-play-state: paused;
}

@keyframes marqueeScroll {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

.slider-track::-webkit-scrollbar {
  display: none; /* Safari/Chrome */
}

/* Responsive Church Slider Cards */
.tiny-church-card {
  flex: 0 0 310px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface-card);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: var(--text-primary);
  opacity: 0.95;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), 
              border-color 0.25s ease, 
              background-color 0.25s ease, 
              box-shadow 0.25s ease,
              opacity 0.25s ease;
  cursor: pointer;
}

.tiny-church-card:hover {
  transform: scale(1.05);
  z-index: 10;
  border-color: var(--primary);
  background: var(--surface-soft);
  box-shadow: var(--shadow-card);
  opacity: 1;
}

.tiny-card-img {
  width: 80px;
  height: 80px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid var(--border);
  background: var(--surface-soft);
}

.tiny-card-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tiny-card-name {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tiny-card-details {
  font-size: 0.74rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tiny-card-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.65rem;
  font-weight: 900;
  color: var(--gold);
  text-transform: uppercase;
}

.slider-loading {
  color: var(--text-muted);
  font-size: 0.88rem;
  font-style: italic;
  padding: 10px 4px;
}

/* Right Side Floating Search Form Card */
.hero-right {
  display: flex;
  justify-content: flex-end;
}

.search-card {
  width: 100%;
  max-width: 410px;
  padding: 34px;
  border-radius: 22px;
  background: var(--surface);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.85);
  animation: floatUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
  position: relative;
  z-index: 20; /* High z-index to stay on top of the scrolling breakout slider */
}

.search-card-header {
  margin-bottom: 24px;
}

.search-card-header h2 {
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--forest);
  margin-bottom: 6px;
  line-height: 1.2;
}

.search-card-header p {
  font-size: 0.86rem;
  color: var(--muted);
  margin: 0;
  line-height: 1.45;
}

.search-card form {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.location-combined-group {
  display: flex;
  align-items: center;
  border: 1.5px solid #cbd5e1;
  border-radius: 12px;
  background: #f8fafc;
  overflow: visible;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.location-combined-group:focus-within {
  border-color: var(--forest);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(23, 76, 58, 0.12);
}

.location-combined-group .city-section {
  flex: 1;
}

.location-combined-group .city-section .field {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  min-height: 48px;
}

.location-combined-group .country-section {
  flex-shrink: 0;
  border-left: 1.5px solid var(--border);
}

.location-combined-group .country-dropdown {
  border: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  min-height: 48px;
  width: 98px;
  padding: 0 28px 0 10px;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-primary);
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 14px !important;
  appearance: none;
}

.toggle-group {
  margin-top: 4px;
}

.toggle-label-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  width: 100%;
}

.toggle-label-text {
  font-size: 0.88rem;
  font-weight: 700;
  color: #39433d;
}

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 26px;
  flex-shrink: 0;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: #cbd5e1;
  border-radius: 34px;
  transition: background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.toggle-slider::before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  border-radius: 50%;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.toggle-switch input:checked + .toggle-slider {
  background-color: var(--clay);
}

.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(22px);
}

.toggle-switch input:focus-visible + .toggle-slider {
  box-shadow: 0 0 0 3px rgba(185, 93, 69, 0.25);
}

.search-card .form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.search-card label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-left: 4px;
}

.input-with-icon,
.select-with-icon {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.search-card .input-icon {
  position: absolute;
  left: 14px;
  width: 18px;
  height: 18px;
  color: var(--muted);
  pointer-events: none;
}

.search-card .field {
  width: 100%;
  min-height: 48px;
  border-radius: 12px;
  border: 1.5px solid #cbd5e1;
  padding: 10px 14px;
  font-size: 0.95rem;
  font-weight: 780;
  background: #f8fafc;
  color: var(--ink);
  transition: all 0.2s ease;
  appearance: none; /* Reset standard styles */
}

/* Offset padding when icon is present on the left */
.input-with-icon .field,
.select-with-icon .field {
  padding-left: 42px;
}

/* Remove calendar/datalist picker down arrow on city input */
#hero-city-input::-webkit-calendar-picker-indicator {
  display: none !important;
}

.search-card select.field {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2366716b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
  padding-right: 38px;
}

.search-card .field:focus {
  border-color: var(--forest);
  background: #fff;
  outline: none;
  box-shadow: 0 0 0 3px rgba(23, 76, 58, 0.12);
}

.search-submit-button {
  background: var(--clay);
  color: #fff;
  border: none;
  border-radius: 12px;
  width: 100%;
  min-height: 52px;
  font-size: 1.02rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
  transition: all 0.2s ease;
}

.search-submit-button:hover {
  background: #a04933;
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(185, 93, 69, 0.35);
}

.search-submit-button active {
  transform: translateY(0);
}

@keyframes floatUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsiveness for 100vh Hero Page */
@media (max-width: 1040px) {
  body.hero-only-page {
    overflow-y: auto;
    height: auto;
  }
  
  body.hero-only-page .hero-main {
    flex: none;
    height: auto;
  }
  
  .hero-fullscreen {
    min-height: 100vh;
    min-height: 100dvh;
    height: auto;
    padding: 0 0 44px;
  }
  
  .hero-container {
    grid-template-columns: 1fr;
    gap: 34px;
    height: auto;
    padding-top: 104px;
    padding-bottom: 10px;
  }
  
  .hero-left {
    padding: 20px 0;
    justify-content: start;
    height: auto;
  }
  
  .hero-left h1 {
    font-size: clamp(2rem, 8vw, 3.2rem);
  }
  
  .slider-wrapper {
    position: static;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
  
  .hero-right {
    justify-content: center;
  }
  
  .search-card {
    max-width: 100%;
  }
}

/* Header styles for hero page with seamless 100px fade-out into the page and no separating line */
body.hero-only-page .topbar {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 1000 !important;
  background: transparent !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

body.hero-only-page .topbar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(100% + 100px);
  pointer-events: none;
  z-index: -1;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: linear-gradient(180deg,
    rgba(10, 15, 26, 0.94) 0%,
    rgba(10, 15, 26, 0.82) calc(100% - 100px),
    rgba(10, 15, 26, 0.35) calc(100% - 30px),
    transparent 100%
  );
  mask-image: linear-gradient(to bottom, black calc(100% - 100px), transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 100px), transparent 100%);
  transition: background 0.3s ease;
}

/* Primary color-reactive header background in dark mode (darker primary hue) */
html[data-theme="dark"] body.hero-only-page .topbar::before {
  background: linear-gradient(180deg,
    hsla(var(--primary-h), 45%, 7%, 0.95) 0%,
    hsla(var(--primary-h), 45%, 7%, 0.82) calc(100% - 100px),
    hsla(var(--primary-h), 45%, 7%, 0.35) calc(100% - 30px),
    transparent 100%
  ) !important;
}

/* Primary color-reactive header background in light mode (brighter primary hue) */
html[data-theme="light"] body.hero-only-page .topbar::before,
html:not([data-theme="dark"]) body.hero-only-page .topbar::before {
  background: linear-gradient(180deg,
    hsla(var(--primary-h), 35%, 96%, 0.94) 0%,
    hsla(var(--primary-h), 35%, 96%, 0.82) calc(100% - 100px),
    hsla(var(--primary-h), 35%, 96%, 0.35) calc(100% - 30px),
    transparent 100%
  ) !important;
}

html[data-theme="light"] body.hero-only-page .topbar .brand,
html:not([data-theme="dark"]) body.hero-only-page .topbar .brand {
  color: hsl(var(--primary-h), 50%, 15%) !important;
}

html[data-theme="light"] body.hero-only-page .topbar .brand small,
html:not([data-theme="dark"]) body.hero-only-page .topbar .brand small {
  color: hsl(var(--primary-h), 30%, 35%) !important;
}

html[data-theme="light"] body.hero-only-page .topbar .nav-links a,
html:not([data-theme="dark"]) body.hero-only-page .topbar .nav-links a {
  color: hsl(var(--primary-h), 45%, 20%) !important;
}

html[data-theme="light"] body.hero-only-page .topbar .nav-links a:hover,
html:not([data-theme="dark"]) body.hero-only-page .topbar .nav-links a:hover {
  color: var(--primary) !important;
}

html[data-theme="light"] body.hero-only-page .topbar .lang-selector-btn,
html[data-theme="light"] body.hero-only-page .topbar .theme-palette-btn,
html:not([data-theme="dark"]) body.hero-only-page .topbar .lang-selector-btn,
html:not([data-theme="dark"]) body.hero-only-page .topbar .theme-palette-btn {
  background: rgba(255, 255, 255, 0.85) !important;
  border: 1px solid hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.3) !important;
  color: hsl(var(--primary-h), 50%, 15%) !important;
  box-shadow: 0 2px 8px hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.1) !important;
}

html[data-theme="light"] body.hero-only-page .topbar .lang-selector-btn .lang-text,
html[data-theme="light"] body.hero-only-page .topbar .theme-palette-btn span,
html:not([data-theme="dark"]) body.hero-only-page .topbar .lang-selector-btn .lang-text,
html:not([data-theme="dark"]) body.hero-only-page .topbar .theme-palette-btn span {
  color: hsl(var(--primary-h), 50%, 15%) !important;
}

html[data-theme="light"] body.hero-only-page .topbar .lang-selector-btn .lang-chevron,
html[data-theme="light"] body.hero-only-page .topbar .theme-palette-btn i,
html:not([data-theme="dark"]) body.hero-only-page .topbar .lang-selector-btn .lang-chevron,
html:not([data-theme="dark"]) body.hero-only-page .topbar .theme-palette-btn i {
  color: var(--primary) !important;
}

body.hero-only-page .topbar.scrolled {
  border-bottom: none !important;
  box-shadow: none !important;
}

body.hero-only-page .topbar .brand {
  color: #ffffff;
}

body.hero-only-page .topbar .brand small {
  color: rgba(255, 255, 255, 0.65);
}

body.hero-only-page .topbar .nav-links {
  color: rgba(255, 255, 255, 0.9);
}

body.hero-only-page .topbar .nav-links a:hover {
  color: #ffffff;
}

body.hero-only-page .topbar .nav-actions .button.ghost {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.35);
  color: #ffffff;
}

body.hero-only-page .topbar .nav-actions .button.ghost:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: #ffffff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

body.hero-only-page .topbar .lang-selector-btn,
body.hero-only-page .topbar .theme-palette-btn {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
}

body.hero-only-page .topbar .lang-selector-btn:hover,
body.hero-only-page .topbar .theme-palette-btn:hover {
  background: rgba(255, 255, 255, 0.16) !important;
  border-color: #ffffff !important;
}

body.hero-only-page .topbar .lang-selector-btn .lang-text,
body.hero-only-page .topbar .theme-palette-btn span {
  color: #ffffff !important;
}

body.hero-only-page .topbar .lang-selector-btn .lang-chevron,
body.hero-only-page .topbar .theme-palette-btn i {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* Homepage User Authentication Area & Sections */
#homepage-nav-auth {
  display: flex;
  align-items: center;
  gap: 10px;
}

.home-inline-login-form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 24px;
  box-shadow: var(--shadow-card);
}

.home-inline-login-form h3 {
  margin-top: 0;
  margin-bottom: 16px;
  font-size: 1.15rem;
  color: var(--text-primary);
}

.home-logged-in-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 24px;
  text-align: center;
  box-shadow: var(--shadow-card);
}

.home-logged-in-panel .user-avatar-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.home-logged-in-panel h3 {
  margin: 0 0 6px;
  font-size: 1.1rem;
  color: var(--text-primary);
}

/* Custom Modern Select Dropdown UI */
.custom-select-container {
  position: relative;
  width: 100%;
}

.custom-select-container.open {
  z-index: 10000 !important;
}

.custom-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  cursor: pointer;
  text-align: left;
  outline: none;
}

.custom-select-trigger .trigger-arrow {
  width: 16px;
  height: 16px;
  color: var(--muted);
  transition: transform 0.22s ease;
  pointer-events: none;
  flex-shrink: 0;
}

.custom-select-container.open .custom-select-trigger .trigger-arrow {
  transform: rotate(180deg);
}

.custom-options-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
  z-index: 10001 !important;
  max-height: 240px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 6px;
}

/* Custom scrollbar for options panel */
.custom-options-panel::-webkit-scrollbar {
  width: 6px;
}
.custom-options-panel::-webkit-scrollbar-track {
  background: transparent;
}
.custom-options-panel::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

.custom-select-container.open .custom-options-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.custom-option {
  padding: 10px 14px;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.15s ease, color 0.15s ease;
  display: flex;
  align-items: center;
  gap: 10px;
}

.custom-option:hover {
  background: #f1f5f9;
  color: var(--forest);
}

.custom-option.selected {
  background: rgba(23, 76, 58, 0.08);
  color: var(--forest);
}

/* Custom Checkbox styles for multi-select options */
.custom-option .option-checkbox {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border: 1.5px solid #cbd5e1;
  border-radius: 4px;
  background: #ffffff;
  transition: all 0.18s ease;
  flex-shrink: 0;
}

.custom-option .option-checkbox-icon {
  width: 10px;
  height: 10px;
  color: #ffffff;
  opacity: 0;
  transition: opacity 0.18s ease;
  stroke-width: 3px;
  flex-shrink: 0;
}

/* Selected checkbox state */
.custom-option.selected .option-checkbox {
  background-color: var(--clay);
  border-color: var(--clay);
}

.custom-option.selected .option-checkbox-icon {
  opacity: 1;
}

/* Right-aligned checkmark for single-select option rows */
.custom-option .option-check-icon {
  width: 14px;
  height: 14px;
  color: var(--forest);
  opacity: 0;
  transition: opacity 0.15s ease;
  flex-shrink: 0;
  margin-left: auto;
}

.custom-option.selected .option-check-icon {
  opacity: 1;
}

/* Small, semi-bold styling for select trigger fields when an active selection is made */
.custom-select-container.has-selection .custom-select-trigger .trigger-label {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--forest);
}

/* Special overrides for country combined select trigger */
.location-combined-group .country-section {
  flex-shrink: 0;
  border-left: 1.5px solid #e2e8f0;
  width: 115px; /* Sized to perfectly fit 20px padding + centered content */
  position: relative;
}

.country-section .custom-select-container {
  width: 100%;
}

.country-section .custom-select-trigger {
  width: 100% !important;
  padding-left: 20px !important; /* 20px left padding */
  padding-right: 20px !important; /* 20px right padding */
  justify-content: center !important; /* Center content */
  gap: 10px !important; /* Spacing between code and chevron arrow (at least 8px!) */
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  font-size: 0.92rem !important; /* Same font size as dropdown options */
  font-weight: 700 !important;
}

.country-section .custom-options-panel {
  width: 100% !important;
  min-width: 0 !important;
  left: 0 !important;
  right: 0 !important;
}

.country-section .custom-option {
  justify-content: center !important; /* Centered options */
  padding-left: 20px !important; /* 20px left padding */
  padding-right: 20px !important; /* 20px right padding */
}

.country-label-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 6px; /* Spacing between flag and country code initials (at least 5px!) */
}

/* Premium Language Selector Dropdown Layout */
.lang-selector-container {
  position: relative;
  display: inline-block;
  margin-right: 8px;
}

.lang-selector-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
  outline: none;
}

.login-header-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 16px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
  outline: none;
  text-decoration: none !important;
}

.login-header-btn:hover {
  border-color: var(--forest);
  background: var(--soft);
  color: var(--ink) !important;
}

.header-profile-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  cursor: pointer;
  transition: all 0.2s ease;
  overflow: hidden;
  box-sizing: border-box;
}

.header-profile-circle:hover {
  border-color: var(--forest);
  background: var(--soft);
}

/* Premium Modal Styles (Light and Dark Mode support) */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
}

.modal-card {
  background: #ffffff;
  border-radius: 24px;
  padding: 24px;
  width: 90%;
  max-width: 320px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  z-index: 1010;
  box-sizing: border-box;
  position: relative;
  border: 1px solid var(--border-subtle);
  transition: background 0.3s ease, border-color 0.3s ease;
}

.modal-tab {
  flex: 1;
  padding: 8px;
  font-weight: 700;
  font-size: 0.8rem;
  border: none;
  background: none;
  border-bottom: 2px solid transparent;
  color: #64748b;
  cursor: pointer;
  transition: all 0.2s;
}

.modal-tab.active {
  border-bottom-color: #10b981;
  color: #0f172a;
}

.modal-card h3 {
  color: #0f172a !important;
}

.modal-card p,
.modal-card label,
.modal-card span {
  color: #64748b;
}

.modal-card input {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #e2e8f0 !important;
  outline: none;
  transition: border-color 0.2s;
}

.modal-card input:focus {
  border-color: #10b981 !important;
}

.modal-card hr {
  border: 0;
  border-top: 1px solid var(--border-subtle);
}

/* Dark Mode Modal overrides */
body.lights-out .modal-overlay {
  background: rgba(4, 6, 10, 0.8) !important;
}

body.lights-out .modal-card {
  background: #111625 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5) !important;
}

body.lights-out .modal-card h3 {
  color: #ffffff !important;
}

body.lights-out .modal-card p,
body.lights-out .modal-card label,
body.lights-out .modal-card span {
  color: #94a3b8 !important;
}

body.lights-out .modal-card input {
  background: #1e293b !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

body.lights-out .modal-card hr {
  border-top-color: rgba(255, 255, 255, 0.08) !important;
}

body.lights-out .modal-card button {
  color: #94a3b8;
}

body.lights-out .modal-tab {
  color: #94a3b8;
}

body.lights-out .modal-tab.active {
  color: #ffffff;
}

.lang-selector-btn:hover {
  border-color: var(--forest);
  background: var(--soft);
}

.lang-selector-btn .lang-chevron {
  width: 12px;
  height: 12px;
  color: var(--muted);
  transition: transform 0.2s ease;
}

.lang-selector-container.open .lang-selector-btn .lang-chevron {
  transform: rotate(180deg);
}

.lang-selector-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 100000 !important;
  min-width: 130px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 12px 34px rgba(20, 23, 22, 0.1);
  padding: 6px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.lang-selector-container.open .lang-selector-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lang-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--ink);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.lang-option:hover {
  background: var(--soft);
  color: var(--forest);
}

.lang-option .lang-flag {
  font-size: 1.05rem;
}

/* Password Input Wrapper & Visibility Toggle */
.password-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.password-input-wrapper input {
  width: 100%;
  padding-right: 42px !important; /* Make room for the eye icon button */
}

.password-toggle {
  position: absolute;
  right: 12px;
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  outline: none;
}

.password-toggle:hover {
  color: var(--ink);
}

.password-toggle i {
  width: 18px;
  height: 18px;
}

/* Hide dashboard actions in topbar if not authenticated */
.private-app:not(.is-authenticated) .dash-topbar .nav-links,
.private-app:not(.is-authenticated) .dash-topbar .nav-actions > *:not(.lang-selector-container),
.private-app:not(.is-authenticated) .mobile-menu-toggle {
  display: none !important;
}

/* Mobile Sidebar Drawer Navigation System */
.topbar-menu-group {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-left: auto;
}

.mobile-only-link {
  display: none;
}

.mobile-menu-toggle {
  display: none !important;
}

@media (max-width: 768px) {
  .topbar-inner {
    justify-content: space-between !important;
    width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    gap: 8px !important;
  }

  .brand small {
    display: none !important;
  }

  /* Language Selector positioning on mobile header */
  .topbar-inner .lang-selector-container {
    margin-left: auto !important; /* Pushes toggle and lang select to the right */
    margin-right: 0 !important; /* Remove margin right */
  }

  /* Transparent, borderless language selector button across the entire platform on mobile */
  .topbar-inner .lang-selector-btn {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    color: var(--ink) !important; /* Default dark text color for standard light headers */
    cursor: pointer;
    font-size: 0.9rem !important;
    font-weight: 800 !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    transition: opacity 0.2s ease, transform 0.2s ease;
  }

  /* Transparent, borderless hamburger toggle button across the entire platform on mobile */
  .mobile-menu-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--ink) !important; /* Matches default header text */
    cursor: pointer;
    z-index: 101; /* Stay on top of drawer */
    margin-left: 0 !important; /* Relies on lang selector auto margin */
    transition: opacity 0.2s ease, transform 0.2s ease;
    outline: none;
    padding: 0 !important;
  }

  /* Force white text/icons on the transparent video-background hero header page on mobile */
  body.hero-only-page .mobile-menu-toggle {
    color: #fff !important;
  }
  body.hero-only-page .topbar-inner .lang-selector-btn {
    color: #fff !important;
  }

  .mobile-menu-toggle:hover,
  .topbar-inner .lang-selector-btn:hover {
    opacity: 0.75;
    transform: scale(1.08);
  }

  .mobile-menu-toggle i {
    width: 32px !important;
    height: 32px !important;
  }

  .brand,
  .mobile-menu-toggle,
  .topbar-inner .lang-selector-container,
  main {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  body.mobile-menu-active {
    overflow-x: hidden !important;
    width: 100% !important;
    position: fixed !important; /* Locks vertical scroll on body during active menu */
  }

  /* Translate elements separately to prevent topbar transform stacking context double translation */
  body.mobile-menu-active .brand,
  body.mobile-menu-active .mobile-menu-toggle,
  body.mobile-menu-active .topbar-inner .lang-selector-container,
  body.mobile-menu-active main,
  body.mobile-menu-active .topbar-menu-group {
    transform: translateX(-290px) !important;
  }

  .topbar-menu-group {
    position: fixed; /* Fixed to viewport to prevent header and container clipping */
    top: 0;
    right: -290px; /* Positioned off-screen relative to viewport */
    bottom: auto;
    width: 290px;
    height: 100vh;
    height: 100dvh;
    background: #fff !important;
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.15) !important;
    padding: 82px 24px 28px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 16px;
    z-index: 1000; /* Render on top of backdrop */
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .topbar-menu-group .nav-links,
  .topbar-menu-group .nav-actions {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 12px;
    margin: 0;
  }

  .topbar-menu-group .nav-links a {
    font-size: 1rem;
    font-weight: 700;
    padding: 11px 14px;
    border-radius: 10px;
    border-bottom: none;
    background: var(--soft);
    display: block;
    color: var(--ink);
    transition: all 0.2s ease;
  }

  .topbar-menu-group .nav-links a:hover {
    background: rgba(23, 76, 58, 0.08);
    color: var(--forest);
  }

  .topbar-menu-group .nav-links .mobile-only-link {
    display: block;
  }

  .topbar-menu-group .nav-actions .lang-selector-container {
    width: 100%;
  }

  .topbar-menu-group .nav-actions .lang-selector-btn {
    width: 100%;
    justify-content: space-between;
  }

  .topbar-menu-group .nav-actions .button {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}

/* Backdrop overlay for mobile menu drawer (plain overlay, NO BLUR) */
.mobile-menu-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 23, 22, 0.45);
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mobile-menu-backdrop.open {
  opacity: 1;
  visibility: visible;
}

/* ==========================================================================
   CHRISTIAN EVENTS MODULE STYLES
   ========================================================================== */

.events-main {
  padding-top: 100px;
  padding-bottom: 60px;
  min-height: calc(100vh - 200px);
}

.events-search-section {
  margin-bottom: 40px;
}

.events-filter-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 16px;
  align-items: end;
}

@media (max-width: 900px) {
  .events-filter-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  .events-filter-grid {
    grid-template-columns: 1fr;
  }
}

.events-section {
  margin-bottom: 40px;
}

.section-title-row {
  margin-bottom: 20px;
  border-bottom: 2px solid var(--line);
  padding-bottom: 8px;
}

.section-title-row h3 {
  font-size: 1.4rem;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
}

.events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 40px;
}

/* ── Event Card V2 (Full-bleed image cards matching reference) ── */
.evc {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  transition: transform 0.35s cubic-bezier(.22,.61,.36,1), box-shadow 0.35s ease;
}
.evc:hover {
  transform: translateY(-6px) scale(1.015);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
}
.evc--featured { box-shadow: 0 6px 24px rgba(220,110,80,0.18); }
.evc--featured:hover { box-shadow: 0 18px 40px rgba(220,110,80,0.28); }
.evc--past { filter: grayscale(0.7); opacity: 0.75; }

.evc-link {
  display: block;
  position: relative;
  height: 240px;
  text-decoration: none;
  color: #fff;
}

.evc-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.evc:hover .evc-bg {
  transform: scale(1.06);
}

.evc-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.08) 0%,
    rgba(0,0,0,0.15) 40%,
    rgba(0,0,0,0.55) 75%,
    rgba(0,0,0,0.78) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* Date Badge */
.evc-date-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(8px);
  border-radius: 10px;
  overflow: hidden;
  min-width: 52px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}
.evc-date-dow {
  display: block;
  width: 100%;
  text-align: center;
  background: #1a5c3a;
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 6px;
}
.evc--featured .evc-date-dow { background: var(--clay, #c66a3c); }
.evc-date-day {
  display: block;
  font-size: 1.35rem;
  font-weight: 800;
  color: #1a2e22;
  line-height: 1.15;
  padding: 2px 8px 0;
}
.evc-date-month {
  display: block;
  font-size: 0.65rem;
  font-weight: 600;
  color: #5a6e62;
  text-transform: capitalize;
  padding: 0 8px 5px;
}

/* Optional badge slot (Promoted / LIVE / Past) */
.evc-badge-slot {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
}
.evc-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 50px;
  font-size: 0.68rem;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  backdrop-filter: blur(6px);
}
.evc-badge--promoted { background: var(--clay, #c66a3c); }
.evc-badge--live { background: #e11d48; }
.evc-badge--past { background: rgba(100,116,139,0.85); }
.evc-pulse-dot {
  width: 6px; height: 6px;
  background: #fff;
  border-radius: 50%;
  animation: pulse-live 2s infinite;
}

/* Bottom content overlay */
.evc-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  padding: 16px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.evc-city {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.8);
  display: flex;
  align-items: center;
  gap: 5px;
}
.evc-city-arrow {
  display: inline-block;
  color: #34d399;
  font-weight: 800;
}
.evc-title {
  margin: 1px 0 6px;
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1.25;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,0.3);
}
.evc-cta {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  color: rgba(255,255,255,0.75);
  border-bottom: 1px solid rgba(255,255,255,0.35);
  padding-bottom: 1px;
  align-self: flex-start;
  transition: color 0.2s, border-color 0.2s;
}
.evc:hover .evc-cta {
  color: #fff;
  border-color: #fff;
}

/* Legacy event-card classes kept for backward compat (modal etc.) */
.event-card { background: var(--bg); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.03); display: flex; flex-direction: column; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.event-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0,0,0,0.08); }
.event-card.featured { border: 2px solid var(--clay); box-shadow: 0 8px 20px rgba(220,110,80,0.08); }
.event-card.featured:hover { box-shadow: 0 16px 30px rgba(220,110,80,0.16); }
.event-card.past-card { filter: grayscale(0.85); opacity: 0.8; }
.event-image-container { height: 180px; background-size: cover; background-position: center; position: relative; }
.event-badges-overlay { position: absolute; top: 12px; left: 12px; display: flex; flex-direction: column; gap: 6px; }

.badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 50px; font-size: 0.72rem; font-weight: 700; color: #fff; text-transform: uppercase; }
.badge.promoted { background: var(--clay); }
.badge.live { background: #e11d48; animation: pulse-live 2s infinite; }
.badge.ticketed { background: var(--forest); }
.badge.past { background: #64748b; }

@keyframes pulse-live {
  0% { opacity: 1; }
  50% { opacity: 0.7; }
  100% { opacity: 1; }
}

.event-details { padding: 20px; display: flex; flex-direction: column; flex-grow: 1; }
.event-date { font-size: 0.8rem; font-weight: 600; color: var(--clay); display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.event-title { font-size: 1.15rem; margin: 0 0 10px 0; line-height: 1.4; color: var(--ink); }
.event-organizer, .event-location { font-size: 0.85rem; color: var(--muted); display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.event-card-footer { margin-top: auto; border-top: 1px solid var(--line); padding-top: 14px; display: flex; justify-content: space-between; align-items: center; }
.event-price { font-weight: 700; font-size: 1.1rem; color: var(--ink); }

/* ── Speaker Cards (Reference-matched portrait style) ── */
.spk-card {
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.spk-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.1);
}

.spk-photo-wrap {
  padding: 12px 12px 0;
}
.spk-photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}

.spk-info {
  padding: 14px 16px 6px;
}
.spk-name {
  font-size: 0.95rem;
  font-weight: 800;
  color: #1a2e22;
  margin: 0 0 3px;
  line-height: 1.3;
}
.spk-role {
  font-size: 0.78rem;
  color: #6b7c72;
  margin: 0;
  line-height: 1.4;
}

.spk-footer {
  margin-top: auto;
  padding: 10px 16px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.spk-stats {
  display: flex;
  align-items: center;
  gap: 12px;
}
.spk-stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #8a9890;
}
.spk-follow-btn {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 8px;
  background: #f0f4f1;
  color: #1a5c3a;
  font-size: 0.75rem;
  font-weight: 700;
  transition: background 0.2s, color 0.2s;
  cursor: pointer;
}
.spk-card:hover .spk-follow-btn {
  background: #1a5c3a;
  color: #fff;
}

.events-empty-state {
  text-align: center;
  padding: 60px 20px;
  border: 1px dashed var(--line);
  border-radius: 16px;
  color: var(--muted);
}

.events-empty-state .empty-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 12px;
  color: var(--muted);
}

/* Modal and receipts styles */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(20, 23, 22, 0.5);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: modalFadeIn 0.25s ease-out;
}

.modal.open {
  display: flex;
}

.modal-dialog {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 16px;
  width: 100%;
  max-width: 600px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  animation: modalSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  overflow: hidden;
}

.modal-dialog.modal-narrow {
  max-width: 440px;
}

.modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h3 {
  margin: 0;
  font-size: 1.2rem;
  color: var(--ink);
}

.close-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  padding: 4px;
  transition: color 0.2s;
}

.close-btn:hover {
  color: var(--ink);
}

.modal-body {
  padding: 20px;
  overflow-y: auto;
}

@keyframes modalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes modalSlideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.event-modal-detail-grid {
  display: flex;
  flex-direction: column;
  color: var(--ink);
}

.meta-row .icon {
  color: var(--forest);
  width: 20px;
  height: 20px;
  margin-right: 12px;
}

.price-summary-box {
  display: flex;
  justify-content: space-between;
  padding: 12px;
  background: var(--soft);
  border-radius: 8px;
  margin-bottom: 16px;
  font-weight: 600;
}

.ticket-stub {
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 20px;
  text-align: left;
  box-shadow: 0 4px 12px rgba(0,0,0,0.02);
  margin-bottom: 20px;
  color: var(--ink);
}

/* Portal elements styles */
.form-grid-three {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.event-editor-card {
  animation: fadeInRise 0.3s ease-out;
}

@keyframes fadeInRise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.event-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
}

.event-title a:hover {
  color: var(--clay);
}

.event-image-link {
  display: block;
  text-decoration: none;
}

/* ==========================================================================
   LIVESTREAM HUB (LIVESTREAM.HTML) STYLES
   ========================================================================== */

.streams-hub-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 1050px) {
  .streams-hub-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px !important;
  }
}

@media (max-width: 680px) {
  .streams-hub-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 20px !important;
  }
}

.pulse-dot {
  animation: pulse-red-live 1.5s infinite;
}

@keyframes pulse-red-live {
  0% { transform: scale(0.9); opacity: 0.8; }
  50% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(0.9); opacity: 0.8; }
}

.player-layout-grid {
  display: grid;
  grid-template-columns: calc(75% - 30px) calc(25% + 30px);
  gap: 20px;
}

@media (max-width: 1024px) {
  .player-layout-grid {
    grid-template-columns: 1fr;
  }
}

#player-chat-box div {
  margin-bottom: 8px;
  line-height: 1.4;
  word-break: break-word;
}

#player-chat-box {
  background: transparent;
}

/* Fading transitions for lights out mode switch */
body[data-page="streams"],
body[data-page="livestream"] {
  transition: background-color 0.8s ease, color 0.8s ease;
  position: relative;
}

body[data-page="streams"]::before,
body[data-page="livestream"]::before {
  content: "";
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1600px;
  height: 1600px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.04) 0%, rgba(59, 130, 246, 0) 70%);
  pointer-events: none;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.8s ease;
}

body.lights-out::before {
  opacity: 1;
}

.modern-video-wrapper {
  position: relative;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  transition: box-shadow 0.8s ease;
}

body[data-page="streams"] .topbar,
body[data-page="streams"] .event-card,
body[data-page="streams"] .stream-info-card,
body[data-page="streams"] aside,
body[data-page="streams"] h1,
body[data-page="streams"] h2,
body[data-page="streams"] h3,
body[data-page="streams"] h4,
body[data-page="streams"] p,
body[data-page="streams"] span,
body[data-page="streams"] a,
body[data-page="streams"] strong,
body[data-page="livestream"] .topbar,
body[data-page="livestream"] aside,
body[data-page="livestream"] h1,
body[data-page="livestream"] h2,
body[data-page="livestream"] h3,
body[data-page="livestream"] h4,
body[data-page="livestream"] p,
body[data-page="livestream"] span,
body[data-page="livestream"] a,
body[data-page="livestream"] strong {
  transition: background-color 0.8s ease, border-color 0.8s ease, color 0.8s ease;
}

/* Lights Out Dark Mode Colors (Bluish dark theme background, not pitch black) */
body.lights-out {
  background-color: #0b0e14 !important;
  color: #e3e8e5 !important;
}

body.lights-out .modern-video-wrapper {
  box-shadow: 0 10px 40px rgba(59, 130, 246, 0.15), 0 0 20px rgba(59, 130, 246, 0.10) !important;
}

body.lights-out .topbar {
  background-color: hsla(var(--primary-h), 45%, 7%, 0.95) !important;
  border-bottom-color: var(--border-subtle) !important;
}

body.lights-out .topbar .brand {
  color: #fff !important;
}

body.lights-out .nav-links a {
  color: rgba(255, 255, 255, 0.7) !important;
}

body.lights-out .nav-links a.active {
  color: #fff !important;
  border-bottom-color: var(--clay) !important;
}

body.lights-out h1, 
body.lights-out h2, 
body.lights-out h3, 
body.lights-out h4,
body.lights-out strong {
  color: #fff !important;
}

body.lights-out p,
body.lights-out span,
body.lights-out label,
body.lights-out small {
  color: rgba(255, 255, 255, 0.6) !important;
}

body.lights-out .event-card,
body.lights-out .stream-info-card,
body.lights-out aside {
  background-color: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #e3e8e5 !important;
}

body.lights-out #player-chat-input {
  background-color: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
}

body.lights-out .section-head {
  border-bottom-color: rgba(255, 255, 255, 0.12) !important;
}

/* Stream Card & Badge Styling Rules */
.stream-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 12px rgba(0,0,0,0.02);
}

.stream-viewer-tag {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(20,23,22,0.75);
  color: #fff !important;
  font-size: 0.75rem;
  padding: 3px 8px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
}

.stream-card-body {
  padding: 16px 16px 0 16px;
}

.stream-card-title {
  margin: 0 0 6px 0;
  font-size: 1.1rem;
  color: var(--ink);
  font-weight: 700;
  line-height: 1.3;
}

.stream-card-tagline {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.4;
}

.stream-card-footer {
  margin-top: 14px;
  border-top: 1px solid var(--line);
  padding: 12px 16px 16px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.stream-card-city {
  font-size: 0.8rem;
  color: var(--forest);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
}

/* Dark Mode Overrides */
body.lights-out .stream-card {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

body.lights-out .stream-card-title {
  color: #fff !important;
}

body.lights-out .stream-card-tagline {
  color: rgba(255, 255, 255, 0.6) !important;
}

body.lights-out .stream-card-footer {
  border-top-color: rgba(255, 255, 255, 0.08) !important;
}

body.lights-out .stream-card-city {
  color: var(--clay) !important;
}

body.lights-out .kicker {
  background: #2f2716 !important;
  color: #f5cb6c !important;
}

/* Modern platform footer */
.platform-footer {
  position: relative;
  overflow: hidden;
  border-top: 1px solid hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.2);
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* Dark Mode Footer - Deep Rich Tinted Dark Background */
html[data-theme="dark"] .platform-footer,
body.dark-mode .platform-footer {
  background:
    linear-gradient(135deg, hsla(var(--primary-h), 45%, 16%, 0.55), transparent 45%),
    radial-gradient(circle at 85% 15%, hsla(var(--primary-h), 55%, 22%, 0.45), transparent 35%),
    hsl(var(--primary-h), 45%, 6%);
  border-top: 1px solid hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.22);
  color: #f1f5f9;
}

/* Light Mode Footer - Soft Light Tinted Pastel Background */
html:not([data-theme="dark"]) .platform-footer {
  background:
    linear-gradient(135deg, hsla(var(--primary-h), 45%, 92%, 0.75), transparent 50%),
    radial-gradient(circle at 85% 15%, hsla(var(--primary-h), 50%, 88%, 0.5), transparent 40%),
    hsl(var(--primary-h), 35%, 96%);
  border-top: 1px solid hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.18);
  color: #1e293b;
}

.platform-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, hsla(var(--primary-h), var(--primary-s), 90%, 0.04), transparent 38%);
}

.platform-footer .container,
.platform-footer .landing-container {
  position: relative;
  z-index: 1;
}

.footer-main {
  display: grid;
  grid-template-columns: minmax(260px, 1.25fr) repeat(3, minmax(150px, 0.7fr));
  gap: 34px;
  padding: 56px 0 34px;
}

.footer-brand-block {
  display: grid;
  gap: 16px;
  max-width: 430px;
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  font-weight: 950;
  font-size: 1.08rem;
  transition: color 0.2s ease;
}

html[data-theme="dark"] .footer-brand {
  color: #ffffff;
}

html:not([data-theme="dark"]) .footer-brand {
  color: hsl(var(--primary-h), 50%, 15%);
}

.footer-brand-mark {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--primary), hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) + 12%)));
  color: #ffffff;
  box-shadow: 0 10px 24px hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.35);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.footer-brand-mark svg,
.footer-brand-mark i {
  width: 21px;
  height: 21px;
  color: #ffffff !important;
  stroke: #ffffff !important;
}

.footer-description {
  max-width: 36rem;
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.7;
}

html[data-theme="dark"] .footer-description {
  color: #cbd5e1;
}

html:not([data-theme="dark"]) .footer-description {
  color: #475569;
}

.footer-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.footer-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  border-radius: 8px;
  padding: 0 14px;
  text-decoration: none;
  font-weight: 850;
  font-size: 0.86rem;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

html[data-theme="dark"] .footer-button {
  border: 1px solid hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.35);
  background: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.16);
  color: #ffffff;
}

html[data-theme="dark"] .footer-button:hover {
  transform: translateY(-1px);
  border-color: var(--primary);
  background: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.26);
}

html:not([data-theme="dark"]) .footer-button {
  border: 1px solid hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.35);
  background: #ffffff;
  color: hsl(var(--primary-h), 65%, 26%);
  box-shadow: 0 2px 6px hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.08);
}

html:not([data-theme="dark"]) .footer-button:hover {
  transform: translateY(-1px);
  border-color: var(--primary);
  background: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.12);
}

.footer-button i,
.footer-button svg {
  color: var(--primary);
  stroke: var(--primary);
}

.footer-button.primary {
  border-color: var(--primary) !important;
  background: var(--primary) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 24px hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.35);
}

.footer-button.primary:hover {
  background: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) - 6%)) !important;
  transform: translateY(-2px);
}

.footer-button.primary i,
.footer-button.primary svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

.footer-column {
  display: grid;
  align-content: start;
  gap: 12px;
}

/* Titles for text links and Connect in PRIMARY color */
.footer-column h2,
.footer-column h3 {
  margin: 0;
  font-size: 0.84rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color 0.3s ease;
}

html[data-theme="dark"] .footer-column h2,
html[data-theme="dark"] .footer-column h3 {
  color: hsl(var(--primary-h), 85%, 72%) !important;
}

html:not([data-theme="dark"]) .footer-column h2,
html:not([data-theme="dark"]) .footer-column h3 {
  color: hsl(var(--primary-h), 75%, 32%) !important;
}

.footer-links {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-links a,
.footer-muted-link {
  text-decoration: none;
  font-size: 0.92rem;
  line-height: 1.45;
  transition: color 0.2s ease, transform 0.2s ease;
}

html[data-theme="dark"] .footer-links a,
html[data-theme="dark"] .footer-muted-link {
  color: #cbd5e1;
}

html[data-theme="dark"] .footer-links a:hover,
html[data-theme="dark"] .footer-muted-link:hover {
  color: hsl(var(--primary-h), 85%, 78%);
  transform: translateX(3px);
}

html:not([data-theme="dark"]) .footer-links a,
html:not([data-theme="dark"]) .footer-muted-link {
  color: #475569;
}

html:not([data-theme="dark"]) .footer-links a:hover,
html:not([data-theme="dark"]) .footer-muted-link:hover {
  color: var(--primary);
  transform: translateX(3px);
}

.footer-note {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.6;
}

.footer-contact-card {
  display: grid;
  gap: 10px;
  border-radius: 10px;
  padding: 14px;
  transition: background 0.3s ease, border-color 0.3s ease;
}

html[data-theme="dark"] .footer-contact-card {
  border: 1px solid hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.25);
  background: hsla(var(--primary-h), 30%, 14%, 0.65);
}

html:not([data-theme="dark"]) .footer-contact-card {
  border: 1px solid hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.25);
  background: rgba(255, 255, 255, 0.75);
  box-shadow: 0 4px 14px hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.08);
}

.footer-contact-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  font-size: 0.9rem;
  line-height: 1.45;
}

html[data-theme="dark"] .footer-contact-row {
  color: #cbd5e1;
}

html:not([data-theme="dark"]) .footer-contact-row {
  color: #334155;
}

.footer-contact-row svg,
.footer-contact-row i {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--primary) !important;
  stroke: var(--primary) !important;
}

.footer-bottom {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 18px 0 26px;
  font-size: 0.82rem;
  transition: border-color 0.3s ease, color 0.3s ease;
}

html[data-theme="dark"] .footer-bottom {
  border-top: 1px solid hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.18);
  color: #94a3b8;
}

html:not([data-theme="dark"]) .footer-bottom {
  border-top: 1px solid hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.15);
  color: #64748b;
}

.footer-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.footer-status::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary) !important;
  box-shadow: 0 0 0 4px hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.22) !important;
}

.mini-footer {
  border-top: 1px solid rgba(20, 23, 22, 0.08);
  background: rgba(253, 252, 249, 0.96);
  color: var(--ink);
}

.mini-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 62px;
  padding: 10px 0;
}

.mini-footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 950;
}

.mini-footer-mark {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 8px;
  background: rgba(199, 150, 36, 0.16);
  color: var(--gold);
}

.mini-footer-mark svg {
  width: 17px;
  height: 17px;
}

.mini-footer-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 760;
}

.mini-footer-links {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.mini-footer-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  border-radius: 8px;
  padding: 0 10px;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 850;
  transition: background 0.2s ease, color 0.2s ease;
}

.mini-footer-links a:hover {
  background: rgba(26, 68, 120, 0.08);
  color: var(--teal);
}

.mini-footer-links a.primary {
  background: var(--gold);
  color: #16140f;
}

.mini-footer.hero-mini-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 25;
  border-top-color: rgba(255, 255, 255, 0.14);
  background: rgba(20, 23, 22, 0.1);
  color: #ffffff;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.hero-mini-footer .mini-footer-inner {
  min-height: 58px;
}

.hero-mini-footer .mini-footer-mark {
  background: rgba(255, 255, 255, 0.12);
  color: #f5cb6c;
}

.hero-mini-footer .mini-footer-meta,
.hero-mini-footer .mini-footer-links a {
  color: rgba(255, 255, 255, 0.78);
}

.hero-mini-footer .mini-footer-links a:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.hero-mini-footer .mini-footer-links a.primary {
  background: rgba(199, 150, 36, 0.92);
  color: #16140f;
}

.live-page .mini-footer {
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

body.lights-out .mini-footer {
  border-top-color: rgba(255, 255, 255, 0.08);
  background: rgba(11, 14, 20, 0.94);
  color: #ffffff;
}

body.lights-out .mini-footer-meta,
body.lights-out .mini-footer-links a {
  color: #aeb8c7;
}

body.lights-out .mini-footer-links a:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

@media (max-width: 900px) {
  .footer-main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-brand-block {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .footer-main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px;
    padding: 42px 0 28px;
  }

  .footer-brand-block,
  .footer-column:last-child {
    grid-column: 1 / -1;
  }

  .footer-bottom {
    align-items: flex-start;
    flex-direction: column;
  }

  .mini-footer-meta {
    display: none;
  }

}

/* 2026 module refinement: shared rhythm, editorial resources, inline messaging */
.module-page main.product-detail-page,
.module-page main.channel-detail-page,
.module-page main.channel-content-page { padding-top: 72px; padding-bottom: 72px; }
.channel-detail-tabs { display: flex; gap: 28px; margin-top: 26px; padding: 0 32px; border-top: 1px solid var(--border-subtle); }
.channel-detail-tabs a { padding: 18px 2px 15px; border-bottom: 3px solid transparent; color: #647799; font-size: .82rem; font-weight: 800; text-decoration: none; }
.channel-detail-tabs a.active { border-color: #2878f5; color: #2878f5; }
.channel-content-grid article { transition: transform .18s ease, box-shadow .18s ease; }
.channel-content-grid article:hover { transform: translateY(-3px); box-shadow: 0 18px 44px rgba(25,56,118,.11); }
.channel-content-grid a { color: inherit; text-decoration: none; }
.channel-content-cover { position: relative; display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 13px; background: linear-gradient(135deg, #e8eef9, #dce7fb); background-position: center; background-size: cover; }
.channel-content-cover img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.channel-content-cover img[hidden] { display: none; }
.channel-content-cover > span { position: absolute; z-index: 1; inset: 0; display: grid; place-items: center; pointer-events: none; }
.channel-content-cover > span svg { box-sizing: content-box; width: 20px; height: 20px; padding: 12px; border: 1px solid rgba(255,255,255,.78); border-radius: 50%; color: #17305c; background: rgba(255,255,255,.94); box-shadow: 0 3px 12px rgba(10,25,55,.18); }
.channel-content-grid article > small { display: block; margin: 14px 2px 6px; color: #71809a; font-size: .68rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.channel-content-grid article > h3 { margin: 0 2px 7px; color: #172b50; font-size: 1.05rem; line-height: 1.35; }
.channel-content-grid article > p { margin: 0 2px 3px; color: #627598; font-size: .85rem; line-height: 1.55; }
.channel-post-view { overflow: hidden; border: 1px solid var(--border-subtle); border-radius: 28px; background: rgba(255,255,255,.9); box-shadow: 0 24px 70px rgba(18,54,120,.11); }
.channel-post-media { position: relative; min-height: 470px; display: grid; place-items: center; background-position: center; background-size: cover; }
.channel-post-media::after { position: absolute; inset: 0; background: rgba(3,17,49,.36); content: ""; }
.channel-post-media button { position: relative; z-index: 2; width: 78px; height: 78px; display: grid; place-items: center; border: 0; border-radius: 99px; color: #2676f4; background: #fff; box-shadow: 0 16px 40px rgba(0,0,0,.23); cursor: pointer; }
.channel-post-media button svg { width: 31px; height: 31px; }
.channel-post-media > span { position: absolute; z-index: 2; right: 22px; bottom: 20px; padding: 8px 12px; border-radius: 10px; color: #fff; background: rgba(4,18,52,.75); font-size: .73rem; font-weight: 850; }
.channel-post-copy { max-width: 790px; margin: 0 auto; padding: 54px 38px 70px; }
.channel-post-copy h1 { margin: 8px 0 18px; color: #071b49; font-size: clamp(2.2rem,5vw,4rem); line-height: 1.04; letter-spacing: -.05em; }
.channel-post-lead { color: #52698f; font-size: 1.18rem; line-height: 1.7; }
.channel-post-author { display: flex; align-items: center; gap: 13px; margin: 30px 0; padding: 18px 0; border-block: 1px solid var(--border-subtle); }
.channel-post-author img { width: 48px; height: 48px; border-radius: 14px; object-fit: cover; }
.channel-post-author div { display: grid; gap: 4px; flex: 1; }
.channel-post-author span { color: #7686a3; font-size: .76rem; }
.channel-post-author a { display: inline-flex; align-items: center; gap: 7px; color: #2876f3; font-weight: 800; text-decoration: none; }
.channel-post-article { color: #344d74; font-size: 1.02rem; line-height: 1.85; }
.channel-post-article h2 { margin-top: 38px; color: #102654; }

.resources-grid { grid-template-columns: repeat(3,minmax(0,1fr)); align-items: start; gap: 40px; }
.resource-card.editorial-card { display: block; min-height: 0; overflow: hidden; border: 1px solid rgba(207,219,243,.9); border-radius: 20px; background: #fff; box-shadow: 0 14px 36px rgba(20,54,118,.08); transition: transform .2s ease, box-shadow .2s ease; }
.resource-card.editorial-card:hover { transform: translateY(-4px); box-shadow: 0 22px 48px rgba(20,54,118,.14); }
.editorial-card .resource-cover { position: relative; display: block; aspect-ratio: 1.34; }
.editorial-card .resource-cover::before { position: absolute; z-index: 1; inset: 0; background: rgba(31,72,182,.28); content: ""; }
.editorial-card.tone-1 .resource-cover::before { background: rgba(240,108,130,.3); }
.editorial-card.tone-2 .resource-cover::before { background: rgba(57,179,171,.3); }
.editorial-card.tone-3 .resource-cover::before { background: rgba(240,164,62,.29); }
.editorial-card.tone-4 .resource-cover::before { background: rgba(108,81,219,.3); }
.editorial-card.tone-5 .resource-cover::before { background: rgba(28,153,218,.3); }
.editorial-card .resource-cover::after { background: rgba(3,18,55,.18); }
.editorial-card .resource-cover-icon { z-index: 3; left: 18px; top: 18px; bottom: auto; width: 46px; height: 46px; border-radius: 99px; box-shadow: 0 8px 24px rgba(4,18,52,.18); }
.editorial-card .resource-type-icon { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.editorial-card .resource-type-label { position: absolute; z-index: 3; left: 18px; bottom: 17px; padding: 7px 10px; border-radius: 9px; color: #102554; background: rgba(255,255,255,.94); font-size: .67rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.editorial-card .resource-card-body { padding: 22px; }
.editorial-card .resource-card-body { display: flex; min-height: 286px; flex-direction: column; padding: 21px; }
.editorial-card .resource-identity { display: grid; gap: 8px; }
.editorial-card h3 { min-height: 0; margin: 0; font-size: 1.08rem; line-height: 1.36; letter-spacing: -.015em; }
.editorial-card .resource-subtitle { display: flex; align-items: center; gap: 7px; color: #8290a8; font-size: .7rem; font-weight: 700; }
.editorial-card .resource-topic { color: #3972d4; font-weight: 850; }
.editorial-card .resource-card-body > p { display: -webkit-box; overflow: hidden; margin: 12px 0 14px; color: #5f6f89; font-size: .78rem; line-height: 1.6; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.editorial-card .resource-channel-link { display: flex; min-width: 0; align-items: center; gap: 10px; margin-top: auto; padding: 11px 12px; border: 1px solid #e7edf7; border-radius: 13px; color: #263d65; background: #f8faff; text-decoration: none; transition: border-color .18s ease, background .18s ease; }
.editorial-card .resource-channel-link:hover { border-color: #bfd2f5; background: #f1f6ff; }
.editorial-card .resource-channel-link > svg { width: 17px; flex: 0 0 auto; color: #3878e8; }
.editorial-card .resource-channel-link > span { display: grid; min-width: 0; gap: 2px; overflow: hidden; font-size: .73rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.editorial-card .resource-channel-link small { color: #8a97ac; font-size: .59rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.editorial-card .resource-channel-link strong { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 3px; margin-left: auto; color: #3972d4; font-size: .64rem; font-weight: 850; white-space: nowrap; }
.editorial-card .resource-channel-link strong svg { width: 13px; height: 13px; }
.editorial-card .resource-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; padding-top: 13px; border-top: 1px solid #edf1f7; }
.editorial-card .resource-duration { display: inline-flex; align-items: center; gap: 6px; color: #78869d; font-size: .68rem; font-weight: 750; }
.editorial-card .resource-duration svg { width: 15px; height: 15px; }
.editorial-card .resource-price-badge { padding: 7px 11px; border-radius: 999px; color: #256a4e; background: #eaf7f0; font-size: .69rem; font-weight: 900; }
.editorial-card .resource-price-badge.paid { color: #6245a5; background: #f1edfb; }
.editorial-card .resource-price-badge { white-space: nowrap; }
.resources-grid.list-view .editorial-card { grid-template-columns: 260px 1fr; }
.editorial-card .resource-action { width: 100%; min-height: 42px; margin-top: 12px; border: 1px solid rgba(51,120,236,.2); border-radius: 11px; color: #286bd1; background: #f3f7ff; font-size: .72rem; font-weight: 850; transition: background .18s ease, border-color .18s ease; }
.editorial-card .resource-action:hover { border-color: #bfd2f5; background: #eaf1ff; }
.resources-grid.list-view .editorial-card .resource-card-body { min-height: 0; }
.resource-preview-action { width: 100%; min-height: 46px; margin-top: 11px; border: 1px solid var(--border-subtle); border-radius: 13px; color: #2875f2; background: #fff; font-weight: 850; cursor: pointer; }
.resource-reader { margin-top: 34px; overflow: hidden; scroll-margin-top: 92px; border: 1px solid var(--border-subtle); border-radius: 26px; background: #fff; box-shadow: 0 24px 70px rgba(18,54,120,.12); }
.resource-reader-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 22px; border-bottom: 1px solid var(--border-subtle); }
.resource-reader-head div { display: grid; gap: 3px; }
.resource-reader-head span { color: #2874ef; font-size: .67rem; font-weight: 850; text-transform: uppercase; }
.resource-reader-head button { display: inline-flex; align-items: center; gap: 7px; border: 0; color: #607394; background: transparent; font-weight: 800; cursor: pointer; }
.resource-reader-book { display: grid; grid-template-columns: 250px 1fr; min-height: 620px; }
.resource-reader-book aside { padding: 34px 28px; color: var(--text-primary); background: var(--surface); border-right: 1px solid var(--border-subtle); }
.resource-reader-book aside > span { color: #62b8ff; font-size: .7rem; font-weight: 900; text-transform: uppercase; }
.resource-reader-book aside h2 { margin: 12px 0; color: #fff; font-size: 1.25rem; }
.resource-reader-book aside p { color: #9fb3d7; font-size: .78rem; }
.resource-reader-book aside ol { display: grid; gap: 7px; margin-top: 30px; padding-left: 22px; color: #8fa5cc; font-size: .76rem; }
.resource-reader-book aside li.active { color: #fff; font-weight: 850; }
.resource-reader-book > article { max-width: 760px; padding: 64px 70px; color: #334c73; font-family: Georgia,serif; font-size: 1.05rem; line-height: 1.95; }
.resource-reader-book > article > span { color: #2874ef; font-family: inherit; font-size: .7rem; font-weight: 800; text-transform: uppercase; }
.resource-reader-book > article h2 { color: #0b2050; font-family: inherit; font-size: 2rem; }
.resource-reader-book footer { display: flex; justify-content: space-between; margin-top: 70px; padding-top: 20px; border-top: 1px solid var(--border-subtle); }
.resource-reader-book footer button { display: inline-flex; align-items: center; gap: 7px; border: 0; color: #2875f2; background: transparent; font-weight: 850; cursor: pointer; }
.resource-reader-book footer button:disabled { opacity: .35; cursor: default; }

.message-recipient-picker { width: min(680px,calc(100% - 60px)); margin: 60px auto; }
.message-recipient-picker h2,.email-settings-form h2 { margin: 6px 0 10px; color: #0b204d; font-size: 2rem; }
.message-recipient-picker > p { color: #647799; line-height: 1.65; }
.recipient-results { display: grid; gap: 9px; margin-top: 18px; }
.recipient-results button { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 13px; padding: 12px; border: 1px solid var(--border-subtle); border-radius: 14px; text-align: left; background: #fff; cursor: pointer; }
.recipient-results button:hover { border-color: #8db6ff; background: #f6f9ff; }
.recipient-results img { width: 48px; height: 48px; border-radius: 13px; object-fit: cover; }
.recipient-results span { display: grid; gap: 4px; }
.recipient-results small { color: #7c8ba5; }
.conversation-empty { margin: auto; max-width: 420px; text-align: center; color: #7183a3; }
.conversation-empty > svg { width: 42px; height: 42px; color: #2875f4; }
.conversation-empty strong { display: block; margin: 12px 0 6px; color: #132958; }
.email-settings-view { display: grid; grid-template-columns: .85fr 1.15fr; width: min(880px,calc(100% - 60px)); margin: auto; overflow: hidden; border: 1px solid var(--border-subtle); border-radius: 24px; background: #fff; box-shadow: 0 20px 55px rgba(23,56,119,.1); }
.email-settings-visual { padding: 46px 38px; color: var(--text-primary); background: var(--primary-surface); border-right: 1px solid var(--border-subtle); }
.email-settings-visual > span { width: 56px; height: 56px; display: grid; place-items: center; border: 1px solid var(--primary-border); border-radius: 16px; color: var(--primary); background: var(--surface-card); }
.email-settings-visual h2 { margin: 26px 0 12px; color: var(--text-primary); font-size: 1.8rem; }
.email-settings-visual p { color: var(--text-secondary); line-height: 1.7; }
.email-settings-visual div { display: grid; grid-template-columns: 22px 1fr; gap: 12px 7px; margin-top: 28px; color: var(--text-muted); font-size: .78rem; line-height: 1.45; }
.email-settings-visual div svg { color: var(--primary); }
.email-settings-form { display: grid; align-content: center; gap: 18px; padding: 46px 40px; }
.email-settings-form > label:not(.message-toggle-row) { display: grid; gap: 8px; color: #293f68; font-size: .75rem; font-weight: 800; }
.email-settings-form input[type=email] { min-height: 48px; padding: 0 13px; border: 1px solid var(--border-subtle); border-radius: 12px; font: inherit; }
.email-provider-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.email-provider-row button { min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--border-subtle); border-radius: 11px; color: #617598; background: #fff; font-weight: 800; }
.email-provider-row button.active { border-color: #8bb6ff; color: #2875f2; background: #f2f7ff; }
.member-lang-selector .lang-selector-panel button { width: 100%; display: flex; gap: 9px; padding: 9px 10px; border: 0; border-radius: 8px; text-align: left; background: transparent; cursor: pointer; }
.member-lang-selector .lang-selector-panel button:hover { background: #f1f5ff; }
.member-app-shell .profile-app-account { min-width: 0; }

/* Video resource discussions sit beside the player on desktop and below it on mobile. */
.resource-video-experience { display: grid; grid-template-columns: minmax(0,1.7fr) minmax(290px,.8fr); align-items: stretch; gap: 22px; }
.resource-video-main { min-width: 0; }
.resource-video-main .resource-experience-description { margin-top: 18px; }
.resource-comments-panel { display: flex; min-height: 100%; flex-direction: column; overflow: hidden; border: 1px solid var(--border-subtle); border-radius: 20px; background: var(--surface-card); box-shadow: 0 14px 40px rgba(19,48,104,.07); }
.resource-comments-panel > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 18px 14px; border-bottom: 1px solid var(--border-subtle); }
.resource-comments-panel > header div { display: grid; gap: 3px; }
.resource-comments-panel > header span { color: var(--primary); font-size: .65rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.resource-comments-panel > header h2 { margin: 0; color: var(--text-primary); font-size: 1.1rem; }
.resource-comments-panel > header > strong { display: grid; min-width: 31px; height: 31px; place-items: center; padding: 0 8px; border-radius: 999px; color: var(--text-secondary); background: var(--surface-soft); font-size: .75rem; }
.resource-comments-list { display: flex; min-height: 190px; max-height: 390px; flex: 1; flex-direction: column; gap: 2px; overflow-y: auto; padding: 8px 18px; }
.resource-comment-item { padding: 13px 0; border-bottom: 1px solid var(--border-subtle); }
.resource-comment-item:last-child { border-bottom: 0; }
.resource-comment-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.resource-comment-meta strong { color: var(--text-primary); font-size: .78rem; }
.resource-comment-meta time { flex: 0 0 auto; color: var(--text-muted); font-size: .66rem; }
.resource-comment-item > p { margin: 7px 0 0; color: var(--text-secondary); font-size: .79rem; line-height: 1.55; overflow-wrap: anywhere; white-space: pre-wrap; }
.resource-comments-loading,.resource-comments-empty { margin: auto; padding: 30px 8px; color: var(--text-muted); font-size: .78rem; line-height: 1.55; text-align: center; }
.resource-comment-form { display: grid; gap: 9px; margin-top: auto; padding: 15px 18px 18px; border-top: 1px solid var(--border-subtle); }
.resource-comment-form > label { color: var(--text-primary); font-size: .76rem; font-weight: 800; }
.resource-comment-form textarea { width: 100%; min-height: 78px; resize: vertical; padding: 11px 12px; border: 1px solid var(--border-subtle); border-radius: 12px; color: var(--text-primary); background: var(--surface); font: inherit; font-size: .78rem; }
.resource-comment-form > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.resource-comment-form [data-comment-status] { color: var(--text-muted); font-size: .66rem; line-height: 1.35; }
.resource-comment-form button { min-height: 38px; flex: 0 0 auto; padding: 0 13px; border: 0; border-radius: 10px; color: #fff; background: var(--primary); font-size: .72rem; font-weight: 850; cursor: pointer; }
.resource-comment-form button:disabled { opacity: .55; cursor: wait; }
@media (max-width: 760px) { .resource-video-experience { grid-template-columns: minmax(0,1fr); gap: 18px; } .resource-comments-panel { min-height: 360px; } .resource-comments-list { max-height: 330px; } }

@media (max-width: 760px) {
  .module-page main.product-detail-page,.module-page main.channel-detail-page,.module-page main.channel-content-page { padding-top: 42px; padding-bottom: 52px; }
  .channel-post-media { min-height: 300px; }
  .channel-post-copy { padding: 36px 22px 50px; }
  .resource-reader-book,.email-settings-view { grid-template-columns: 1fr; }
  .resource-reader-book aside { display: none; }
  .resource-reader-book > article { padding: 38px 24px; }
  .message-recipient-picker,.email-settings-view { width: calc(100% - 28px); margin: 28px auto; }
  .email-settings-form,.email-settings-visual { padding: 32px 24px; }
}

/* Final dark-theme cascade: placed after page modules so every route inherits it. */
html[data-theme="dark"] body.member-app-shell .member-shell-header,
html[data-theme="dark"] body.member-app-shell .member-shell-rail {
  border-color: var(--border-subtle) !important;
  background: var(--background) !important;
}
html[data-theme="dark"] body.member-app-shell .profile-app-brand,
html[data-theme="dark"] body.member-app-shell .profile-app-church,
html[data-theme="dark"] body.member-app-shell .member-notification-icon,
html[data-theme="dark"] body.member-app-shell .profile-mobile-menu { color: var(--text-primary) !important; }
html[data-theme="dark"] body.member-app-shell .profile-rail-nav a { color: var(--text-secondary) !important; }
html[data-theme="dark"] body.member-app-shell .profile-rail-nav a:hover { color: #ffffff !important; background: var(--surface-soft) !important; }
html[data-theme="dark"] body.member-app-shell .profile-rail-nav a.active { color: var(--primary) !important; background: var(--primary-surface) !important; border-left: 3px solid var(--primary) !important; }
html[data-theme="dark"] body.member-app-shell .profile-invite-card,
html[data-theme="dark"] body.member-app-shell .member-mobile-actions { border-color: var(--border-subtle) !important; background: var(--surface-card) !important; }
html[data-theme="dark"] body.member-app-shell .profile-rail-utility { border-color: var(--border-subtle) !important; }
html[data-theme="dark"] body.member-app-shell .profile-app-search { color: var(--text-primary) !important; border-color: var(--border-subtle) !important; background: var(--surface-soft) !important; }

html[data-theme="dark"] body[data-page="home"] .search-card input,
html[data-theme="dark"] body[data-page="home"] .search-card select,
html[data-theme="dark"] body[data-page="home"] .search-card .field,
html[data-theme="dark"] body[data-page="home"] .location-combined-group,
html[data-theme="dark"] body[data-page="home"] .country-section {
  color: var(--text-primary) !important;
  border-color: var(--border-subtle) !important;
  background: var(--surface-soft) !important;
}
html[data-theme="dark"] body[data-page="home"] .search-card label,
html[data-theme="dark"] body[data-page="home"] .toggle-label-text { color: var(--text-secondary) !important; }
html[data-theme="dark"] body[data-page="home"] .search-card-header p { color: var(--text-muted) !important; }

html[data-theme="dark"] .module-page,
html[data-theme="dark"] .module-content {
  color: var(--text-primary) !important;
  background-color: var(--background) !important;
}
html[data-theme="dark"] :where(.channel-profile-card, .store-product-card, .resource-card, .channel-detail-card, .channel-content-card, .product-detail-card, .resource-detail-card, .resource-media-experience, .resource-file-experience, .resource-audio-experience) {
  border-color: var(--border-subtle) !important;
  background: linear-gradient(145deg, hsla(var(--primary-h), 28%, 21%, 0.82) 0%, hsla(var(--primary-h), 25%, 15%, 0.90) 100%) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.38), inset 0 1px 0 hsla(var(--primary-h), 40%, 85%, 0.12) !important;
}

/* Media-specific single content and resource experiences */
.module-page main.product-detail-page,
.module-page main.channel-detail-page,
.module-page main.channel-content-page { width: min(var(--max), calc(100% - 44px)); }
.resource-detail-shell { display: block; padding: 0; border: 0; background: transparent; box-shadow: none; }
.resource-media-experience,
.resource-file-experience { overflow: hidden; border: 1px solid var(--border-subtle); border-radius: 26px; background: #fff; box-shadow: 0 22px 65px rgba(20,53,113,.1); }
.resource-video-frame,.channel-video-player { position: relative; aspect-ratio: 16/9; overflow: hidden; background: #06183f; }
.resource-video-frame iframe,.channel-video-player iframe { width: 100%; height: 100%; border: 0; }
.resource-experience-description,.channel-video-copy { padding: 38px 42px 44px; }
.resource-experience-description > span { display: inline-flex; align-items: center; gap: 7px; color: #2875f3; font-size: .72rem; font-weight: 850; text-transform: uppercase; }
.resource-experience-description h1,.channel-video-copy h1 { margin: 10px 0 12px; color: #071b49; font-size: clamp(2rem,4vw,3.5rem); line-height: 1.05; letter-spacing: -.045em; }
.resource-experience-description p,.channel-video-copy > p { color: #566d92; font-size: 1rem; line-height: 1.75; }
.resource-audio-experience,.channel-audio-view { display: grid; grid-template-columns: minmax(300px,.78fr) minmax(0,1.22fr); min-height: 540px; }
.audio-artwork,.channel-audio-art { position: relative; min-height: 540px; overflow: hidden; background: #071a47; }
.audio-artwork::after,.channel-audio-art::after { position: absolute; inset: 0; background: rgba(4,18,52,.46); content: ""; }
.audio-artwork img,.channel-audio-art img { width: 100%; height: 100%; object-fit: cover; }
.audio-artwork button,.channel-audio-art button { position: absolute; z-index: 2; inset: 0; width: 76px; height: 76px; margin: auto; display: grid; place-items: center; border: 0; border-radius: 99px; color: #2676f4; background: #fff; box-shadow: 0 16px 40px rgba(0,0,0,.25); cursor: pointer; }
.audio-artwork button svg,.channel-audio-art button svg { width: 30px; height: 30px; }
.audio-player-copy,.channel-audio-copy { align-self: center; padding: 46px; }
.audio-player-copy h1,.channel-audio-copy h1 { margin: 11px 0; color: #071b49; font-size: clamp(2rem,4vw,3.4rem); line-height: 1.05; letter-spacing: -.045em; }
.audio-player-copy > p,.channel-audio-copy > p { color: #5d7194; line-height: 1.7; }
.audio-visualizer,.channel-audio-waves { height: 105px; display: flex; align-items: center; gap: 4px; margin: 32px 0 18px; overflow: hidden; }
.audio-visualizer i,.channel-audio-waves i { width: 4px; height: calc(var(--wave) * 7px); flex: 1; max-width: 8px; border-radius: 99px; background: #3379ee; transform-origin: center; }
.audio-visualizer.playing i,.channel-audio-waves.playing i { animation: resourceWave .62s ease-in-out infinite alternate; animation-delay: calc(var(--wave) * -70ms); }
@keyframes resourceWave { to { transform: scaleY(.28); opacity: .55; } }
.audio-progress-ui { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; color: #7183a2; font-size: .72rem; font-weight: 750; }
.audio-progress-ui input { width: 100%; accent-color: #2876f3; }
.channel-audio-view,.channel-video-view,.channel-article-view { overflow: hidden; border: 1px solid var(--border-subtle); border-radius: 27px; background: #fff; box-shadow: 0 22px 65px rgba(20,53,113,.1); }
.channel-media-description { margin-top: 30px; padding-top: 24px; border-top: 1px solid #e1e8f5; }
.channel-media-description h2 { margin: 0 0 10px; color: #132957; font-size: 1.1rem; }
.channel-media-description p { color: #52698e; line-height: 1.75; }
.channel-article-view { max-width: 900px; margin: 0 auto; padding: 68px clamp(26px,8vw,92px) 86px; }
.channel-article-view header { padding-bottom: 30px; border-bottom: 1px solid var(--border-subtle); }
.channel-article-view h1 { margin: 10px 0 18px; color: #071a47; font-family: Georgia,serif; font-size: clamp(2.5rem,6vw,4.8rem); line-height: 1.04; letter-spacing: -.045em; }
.channel-article-view header > p { color: #52698f; font-family: Georgia,serif; font-size: 1.22rem; line-height: 1.75; }
.channel-article-body { padding-top: 42px; color: #30486f; font-family: Georgia,serif; font-size: 1.08rem; line-height: 2; }
.channel-article-body h2 { margin-top: 42px; color: #102654; font-size: 1.7rem; }
.channel-article-body blockquote { margin: 42px 0 0; padding: 24px 28px; border-left: 4px solid #2876f3; color: #17315f; background: #f4f8ff; font-size: 1.25rem; font-style: italic; }
.resource-file-experience { display: grid; grid-template-columns: minmax(300px,.8fr) minmax(0,1.2fr); padding: 28px; gap: 52px; }
.resource-file-cover { position: relative; min-height: 500px; overflow: hidden; border-radius: 20px; }
.resource-file-cover img { width: 100%; height: 100%; object-fit: cover; }
.resource-file-cover::after { position: absolute; inset: 0; background: rgba(3,18,55,.3); content: ""; }
.resource-file-cover > span { position: absolute; z-index: 2; left: 18px; bottom: 18px; display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 10px; color: #2875f3; background: #fff; font-weight: 850; }
.resource-file-meta { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0; }
.resource-file-meta span { display: inline-flex; align-items: center; gap: 7px; padding: 9px 11px; border-radius: 10px; color: #536b91; background: #f4f7fc; font-size: .73rem; font-weight: 750; }
.resource-file-meta svg { width: 16px; color: #2875f3; }
.resource-file-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.resource-download-action { min-height: 56px; display: flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid var(--border-subtle); border-radius: 15px; color: #2875f3; background: #fff; font-weight: 850; cursor: pointer; }
.resource-article-experience { max-width: 860px; margin: 0 auto; padding: 70px clamp(26px,8vw,90px) 88px; border: 1px solid var(--border-subtle); border-radius: 26px; background: #fff; box-shadow: 0 22px 65px rgba(20,53,113,.1); }
.resource-article-experience header { padding-bottom: 34px; border-bottom: 1px solid var(--border-subtle); }
.resource-article-experience h1 { margin: 12px 0 18px; color: #071a47; font-family: Georgia,serif; font-size: clamp(2.5rem,6vw,4.5rem); line-height: 1.05; }
.resource-article-deck { color: #536a90; font-family: Georgia,serif; font-size: 1.2rem; line-height: 1.75; }
.resource-article-experience header > div { display: flex; gap: 20px; color: #7b8aa5; font-size: .78rem; }
.resource-article-body { padding-top: 40px; color: #30486f; font-family: Georgia,serif; font-size: 1.08rem; line-height: 2; }
.resource-article-body h2 { margin-top: 40px; color: #102654; }
.resource-access-panel { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 22px; padding: 18px 20px; border: 1px solid #dce5f5; border-radius: 16px; background: #fff; }
.resource-access-panel > div { display: grid; gap: 4px; }
.resource-access-panel span { color: #7485a3; font-size: .7rem; font-weight: 800; text-transform: uppercase; }
.resource-access-panel strong { color: #102654; }
.reader-head-actions { display: flex !important; gap: 8px !important; }

@media (max-width: 760px) {
  .module-page main.product-detail-page,.module-page main.channel-detail-page,.module-page main.channel-content-page { width: calc(100% - 28px); }
  .resource-audio-experience,.channel-audio-view,.resource-file-experience { grid-template-columns: 1fr; }
  .audio-artwork,.channel-audio-art { min-height: 330px; }
  .audio-player-copy,.channel-audio-copy,.resource-experience-description,.channel-video-copy { padding: 30px 22px; }
  .resource-file-experience { padding: 16px; gap: 24px; }
  .resource-file-cover { min-height: 340px; }
  .resource-file-actions { grid-template-columns: 1fr; }
  .resource-access-panel { align-items: stretch; flex-direction: column; }
  .reader-head-actions { align-items: flex-end; flex-direction: column; }
}

/* White creator cards, channel profiles, and member messaging */
.channels-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 40px; }
.channel-profile-card { overflow: hidden; border: 1px solid rgba(213,220,233,.9); border-radius: 28px; background: #fff; box-shadow: 0 18px 45px rgba(23,42,82,.09); transition: transform .2s ease, box-shadow .2s ease; }
.channel-profile-card:hover { transform: translateY(-4px); box-shadow: 0 24px 55px rgba(23,42,82,.14); }
.channel-profile-cover { position: relative; display: block; height: 172px; margin: 10px 10px 0; border-radius: 21px; background: #eaf0fa; text-decoration: none; }
.channel-profile-cover > img:first-child { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.channel-profile-cover::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg,rgba(5,17,48,.02),rgba(5,17,48,.2)); }
.channel-profile-cover .channel-format,.channel-profile-cover .channel-live { z-index: 2; }
.channel-profile-avatar { position: absolute; z-index: 3; left: 18px; bottom: -28px; width: 67px; height: 67px; border: 5px solid #fff; border-radius: 99px; object-fit: cover; box-shadow: 0 5px 16px rgba(16,38,83,.14); }
.channel-profile-body { padding: 41px 20px 19px; }
.channel-profile-identity { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.channel-profile-identity h3 { display: flex; align-items: center; gap: 6px; margin: 0; color: #111827; font-size: 1.05rem; letter-spacing: -.02em; }
.channel-profile-identity h3 a { color: inherit; text-decoration: none; }
.channel-profile-identity h3 svg { width: 17px; color: #6955df; fill: #eeeaff; }
.channel-profile-identity > div > span { display: block; margin-top: 4px; color: #8790a0; font-size: .75rem; }
.channel-online { display: inline-flex; align-items: center; gap: 5px; color: #778293; font-size: .69rem; white-space: nowrap; }
.channel-online i { width: 7px; height: 7px; border-radius: 99px; background: #45b979; box-shadow: 0 0 0 3px #e8f8ef; }
.channel-profile-body > p { min-height: 44px; margin: 17px 0; color: #64748b; font-size: .78rem; line-height: 1.55; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.channel-platform-stats { display: grid; grid-template-columns: repeat(3,1fr); padding: 12px 7px; border-radius: 15px; background: #f5f7fb; }
.channel-platform-stats span { display: grid; gap: 2px; text-align: center; }
.channel-platform-stats span + span { border-left: 1px solid #e0e5ef; }
.channel-platform-stats strong { color: #172033; font-size: .87rem; }
.channel-platform-stats small { color: #929aa8; font-size: .62rem; }
.channel-contact-button { min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; border-radius: 13px; background: var(--primary-gradient); color: #fff !important; font-size: .78rem; font-weight: 820; text-decoration: none; transition: background .2s ease, transform .15s ease; box-shadow: 0 4px 14px rgba(0,0,0,0.18); }
.channel-contact-button:hover { background: var(--primary-hover); transform: translateY(-1px); }
.channel-contact-button:hover { background: #246fee; }
.channel-contact-button svg { width: 16px; }
.channel-card-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 14px; }
.channel-card-actions .channel-contact-button { margin-top: 0; }
.channel-open-button { min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 10px; border: 1px solid #d7e0f0; border-radius: 13px; background: #f5f8ff; color: #244779 !important; font-size: .78rem; font-weight: 820; text-decoration: none; transition: background .2s ease, transform .15s ease; }
.channel-open-button:hover { background: #eaf1ff; transform: translateY(-1px); }
.channel-open-button svg { width: 16px; }

.channel-detail-page { padding: 30px 0 70px; }
.channel-detail-hero { overflow: hidden; border: 1px solid var(--border-subtle); border-radius: 27px; background: #fff; box-shadow: 0 20px 55px rgba(25,52,108,.1); }
.channel-detail-cover { height: 285px; overflow: hidden; }
.channel-detail-cover img { width: 100%; height: 100%; object-fit: cover; }
.channel-detail-profile { position: relative; display: grid; grid-template-columns: 118px 1fr auto; gap: 20px; align-items: end; padding: 0 34px; margin-top: -54px; }
.channel-detail-profile > img { width: 118px; height: 118px; border: 7px solid #fff; border-radius: 99px; object-fit: cover; box-shadow: 0 8px 22px rgba(20,44,91,.14); }
.channel-detail-profile > div { padding-bottom: 7px; }
.channel-detail-profile > div > span { color: #3375e6; font-size: .73rem; font-weight: 820; text-transform: uppercase; }
.channel-detail-profile h1 { display: flex; align-items: center; gap: 8px; margin: 6px 0; color: #10224d; font-size: 2rem; }
.channel-detail-profile h1 svg { width: 22px; color: #6650dc; }
.channel-detail-profile p { margin: 0; color: #7383a0; }
.channel-detail-profile > a { min-height: 46px; display: inline-flex; align-items: center; gap: 8px; margin-bottom: 9px; padding: 0 19px; border-radius: 13px; background: var(--primary-gradient); color: #fff !important; font-weight: 800; text-decoration: none; box-shadow: 0 4px 14px rgba(0,0,0,0.18); }
.channel-detail-description { max-width: 760px; margin: 27px 34px 22px; color: #587096; line-height: 1.7; }
.channel-detail-stats { display: grid; grid-template-columns: repeat(3,1fr); max-width: 660px; margin: 0 34px 32px; overflow: hidden; border: 1px solid var(--border-subtle); border-radius: 15px; }
.channel-detail-stats span { display: grid; gap: 4px; padding: 15px; color: #7988a3; font-size: .72rem; text-align: center; }
.channel-detail-stats span + span { border-left: 1px solid #e0e7f4; }
.channel-detail-stats strong { color: #142a56; font-size: 1.12rem; }
.channel-content-section { margin-top: 32px; }
.channel-content-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.channel-content-grid article { padding: 12px; border: 1px solid #dce5f7; border-radius: 18px; background: #fff; }
.channel-content-grid article > div { height: 155px; display: grid; place-items: center; border-radius: 13px; background-position: center; background-size: cover; }
.channel-content-grid article > div span { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 99px; background: rgba(255,255,255,.92); color: #2875f5; }
.channel-content-grid small { display: block; margin-top: 12px; color: #7d8ca5; }
.channel-content-grid h3 { margin: 7px 0 4px; color: #152a56; }

.member-account-menu a { min-height: 40px; display: flex; align-items: center; gap: 9px; margin-bottom: 8px; padding: 0 11px; border-radius: 9px; background: #f2f6ff; color: #245ead; font-size: .8rem; font-weight: 750; text-decoration: none; }
.member-account-menu a svg { width: 17px; }
.member-account-menu a span { flex: 1; }
.member-account-menu a b { min-width: 20px; height: 20px; display: grid; place-items: center; border-radius: 99px; background: #286ff0; color: #fff; font-size: .65rem; }

.messages-page { min-height: calc(100vh - 2px); display: grid; grid-template-columns: 360px minmax(0,1fr); background: var(--background); color: var(--text-primary); }
.messages-sidebar { min-height: 100%; padding: 24px 18px; border-right: 1px solid var(--border-subtle); background: var(--surface); position: relative; }
.messages-sidebar-head { display: flex; align-items: center; justify-content: space-between; padding: 0 5px; }
.messages-sidebar-head span { color: var(--primary); font-size: .68rem; font-weight: 830; letter-spacing: .08em; text-transform: uppercase; }
.messages-sidebar-head h1 { margin: 4px 0 0; color: var(--text-primary); font-size: 1.55rem; }
.messages-sidebar-head button { width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 12px; background: var(--primary); color: #fff; cursor: pointer; transition: background 0.2s ease; }
.messages-sidebar-head button:hover { background: var(--primary-hover); }
.messages-search { height: 43px; display: flex; align-items: center; gap: 9px; margin: 22px 0 12px; padding: 0 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-soft); }
.messages-search svg { width: 17px; color: var(--text-muted); }
.messages-search input { width: 100%; border: 0; outline: 0; color: var(--text-primary); background: transparent; }
.message-filter-tabs { display: flex; gap: 5px; margin-bottom: 13px; }
.message-filter-tabs button { padding: 7px 11px; border: 0; border-radius: 8px; background: transparent; color: var(--text-secondary); font-size: .72rem; font-weight: 750; cursor: pointer; }
.message-filter-tabs button.active { background: var(--primary-surface); color: var(--primary); font-weight: 800; }
.message-thread-list { display: grid; gap: 5px; }
.message-thread { position: relative; display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center; width: 100%; padding: 11px; border: 0; border-radius: 13px; background: transparent; text-align: left; cursor: pointer; }
.message-thread:hover,.message-thread.active { background: var(--surface-soft); }
.message-thread img { width: 44px; height: 44px; border-radius: 99px; object-fit: cover; }
.message-thread > span { min-width: 0; display: grid; gap: 4px; }
.message-thread strong { overflow: hidden; color: var(--text-primary); font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }
.message-thread small { overflow: hidden; color: var(--text-secondary); font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.message-thread time { color: var(--text-muted); font-size: .62rem; }
.message-thread > i { position: absolute; right: 10px; bottom: 9px; width: 7px; height: 7px; border-radius: 99px; background: var(--primary); }
.email-sync-button { width: calc(100% - 36px); min-height: 58px; position: absolute; bottom: 20px; display: grid; grid-template-columns: 35px 1fr auto; gap: 10px; align-items: center; padding: 10px; border: 1px solid var(--border-subtle); border-radius: 13px; background: var(--surface-card); color: var(--primary); text-align: left; cursor: pointer; }
.email-sync-button > svg:first-child { padding: 8px; border-radius: 10px; background: var(--primary-surface); color: var(--primary); }
.email-sync-button > span { display: grid; gap: 3px; }
.email-sync-button strong { color: var(--text-primary); font-size: .75rem; }
.email-sync-button small { color: var(--text-secondary); font-size: .64rem; }
.message-conversation { min-width: 0; display: flex; flex-direction: column; background: radial-gradient(circle at 50% 30%, hsla(var(--primary-h), 50%, 50%, 0.05), transparent 40%), var(--background); color: var(--text-primary); }
.message-welcome { margin: auto; max-width: 390px; text-align: center; color: var(--text-secondary); }
.message-welcome > svg { width: 52px; height: 52px; color: var(--primary); }
.message-welcome h2 { color: var(--text-primary); margin: 12px 0 6px; }
.message-welcome p { line-height: 1.6; color: var(--text-secondary); margin: 0 0 16px; }
.message-welcome button { padding: 12px 22px; border: 0; border-radius: 11px; background: var(--primary-gradient) !important; color: #fff !important; font-weight: 800; cursor: pointer; }
.conversation-head { min-height: 76px; display: grid; grid-template-columns: 45px 1fr auto; gap: 12px; align-items: center; padding: 0 25px; border-bottom: 1px solid var(--border-subtle); }
.conversation-head img { width: 45px; height: 45px; border-radius: 99px; object-fit: cover; }
.conversation-head div { display: grid; gap: 3px; }
.conversation-head strong { color: #1d3159; }
.conversation-head span { color: #7c8aa1; font-size: .7rem; }
.conversation-head button { border: 0; background: transparent; color: #70809a; }
.conversation-body { flex: 1; display: flex; flex-direction: column; gap: 12px; overflow: auto; padding: 28px; }
.message-bubble { align-self: flex-start; max-width: min(520px,75%); padding: 12px 15px; border-radius: 4px 16px 16px; background: #eef2f8; color: #364b70; }
.message-bubble.sent { align-self: flex-end; border-radius: 16px 4px 16px 16px; background: #286fee; color: #fff; }
.message-bubble p { margin: 0; line-height: 1.55; }
.message-bubble time { display: block; margin-top: 6px; opacity: .66; font-size: .61rem; }
.conversation-reply { display: grid; grid-template-columns: 1fr 44px; gap: 10px; margin: 18px 25px 24px; padding: 8px; border: 1px solid var(--border-subtle); border-radius: 15px; background: #fff; }
.conversation-reply textarea { min-height: 42px; padding: 10px; border: 0; outline: 0; resize: none; }
.conversation-reply button { width: 44px; height: 44px; border: 0; border-radius: 11px; background: #286fee; color: #fff; }
.message-compose-card { max-width: 570px; }
.email-sync-card { max-width: 500px; text-align: center; }
.email-sync-icon { width: 58px; height: 58px; display: grid; place-items: center; margin: 0 auto 15px; border-radius: 18px; background: var(--primary-surface); color: var(--primary); }
.message-toggle-row { display: flex !important; align-items: center; justify-content: space-between; padding: 14px; border: 1px solid var(--border-subtle); border-radius: 12px; text-align: left; }
.message-toggle-row > span { display: grid; gap: 4px; }
.message-toggle-row small { color: #8090aa; }
@media (max-width: 1050px) { .channels-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 760px) {
  .channels-grid { grid-template-columns: 1fr; }
  .channel-detail-profile { grid-template-columns: 86px 1fr; padding: 0 20px; }
  .channel-detail-profile > img { width: 86px; height: 86px; }
  .channel-detail-profile > a { grid-column: 1/-1; justify-content: center; }
  .channel-detail-description,.channel-detail-stats { margin-left: 20px; margin-right: 20px; }
  .channel-content-grid { grid-template-columns: 1fr; }
  .messages-page { grid-template-columns: 1fr; }
  .messages-sidebar { min-height: 570px; }
  .message-conversation { min-height: 630px; border-top: 1px solid var(--border-subtle); }
}

/* Store detail, cart drawer, resource layouts, and donation impact gallery */
.store-products-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.product-card a { color: inherit; text-decoration: none; }
.product-card h3 a:hover { color: var(--brand-blue); }
.product-image-wrap { display: block; cursor: pointer; }
.store-cart-trigger { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 14px; border: 1px solid var(--border-subtle); border-radius: 12px; background: #fff; color: #102452; font-weight: 800; cursor: pointer; }
.store-cart-trigger svg { width: 18px; color: #2875ff; }
.store-cart-trigger .cart-count { min-width: 23px; height: 23px; display: grid; place-items: center; border-radius: 99px; background: linear-gradient(135deg, #159fee, #7045f3); color: #fff; font-size: .75rem; }
.cart-drawer-backdrop { position: fixed; inset: 0; z-index: 1290; background: rgba(5, 17, 47, .42); backdrop-filter: blur(3px); }
.store-cart-drawer { position: fixed; z-index: 1300; top: 0; right: 0; bottom: 0; width: min(430px, 94vw); display: flex; flex-direction: column; padding: 24px; background: var(--surface); border-left: 1px solid var(--border-subtle); box-shadow: -28px 0 70px rgba(0, 0, 0, .22); transform: translateX(105%); visibility: hidden; transition: transform .28s ease, visibility .28s; }
.store-cart-drawer.open { transform: translateX(0); visibility: visible; }
.store-cart-drawer .store-cart-head { padding-bottom: 18px; border-bottom: 1px solid var(--border-subtle); }
.drawer-close { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--border-subtle); border-radius: 11px; background: var(--surface-soft); color: var(--text-primary); cursor: pointer; }
.store-cart-drawer .cart-items { flex: 1; overflow: auto; padding: 16px 0; }
.store-cart-drawer .cart-summary { padding-top: 18px; border-top: 1px solid var(--border-subtle); }
.cart-drawer-open { overflow: hidden; }
.product-detail-page { padding-top: 30px; padding-bottom: 70px; }
.product-back-link { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 24px; color: #47618c; font-weight: 750; text-decoration: none; }
.product-back-link svg { width: 18px; }
.product-detail-shell { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr); gap: 58px; padding: 28px; border: 1px solid rgba(181,199,239,.75); border-radius: 28px; background: rgba(255,255,255,.83); box-shadow: 0 26px 70px rgba(23,61,133,.11); }
.product-main-image { aspect-ratio: 1 / .92; overflow: hidden; border-radius: 22px; background: #edf2fc; }
.product-main-image img { width: 100%; height: 100%; object-fit: cover; }
.product-thumbnails { display: flex; gap: 12px; margin-top: 14px; }
.product-thumbnails button { width: 82px; aspect-ratio: 1; padding: 3px; overflow: hidden; border: 2px solid transparent; border-radius: 14px; background: #fff; cursor: pointer; }
.product-thumbnails button.active { border-color: #2c78ff; }
.product-thumbnails img { width: 100%; height: 100%; border-radius: 9px; object-fit: cover; }
.product-detail-copy { align-self: center; }
.product-detail-category { color: #2875f4; font-size: .78rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.product-detail-copy h1 { margin: 12px 0; color: #081b49; font-size: clamp(2rem, 3.6vw, 3.35rem); line-height: 1.04; letter-spacing: -.045em; }
.product-detail-rating { display: flex; gap: 18px; color: #63769c; font-weight: 700; }
.product-detail-rating span:first-child { display: inline-flex; align-items: center; gap: 5px; color: #236ff3; }
.product-detail-rating svg { width: 17px; fill: currentColor; }
.product-detail-price { display: flex; align-items: baseline; gap: 12px; margin: 24px 0 16px; }
.product-detail-price strong { color: #071b4a; font-size: 2rem; }
.product-detail-price del { color: #8b99b5; }
.product-detail-description { color: #52698f; font-size: 1.02rem; line-height: 1.75; }
.product-detail-features { display: grid; gap: 12px; margin: 24px 0; padding: 0; list-style: none; color: #344d78; }
.product-detail-features li { display: flex; align-items: center; gap: 10px; }
.product-detail-features svg { width: 19px; color: #2776f4; }
.product-detail-add { width: 100%; min-height: 56px; display: flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 15px; background: linear-gradient(120deg, #159fe9, #226ef5 55%, #7448ee); color: #fff; font-size: 1rem; font-weight: 850; box-shadow: 0 14px 30px rgba(49,105,238,.25); cursor: pointer; }
.product-seller-panel { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; padding: 16px; border: 1px solid #dce5f7; border-radius: 14px; background: #f8faff; }
.product-seller-panel div { display: grid; gap: 4px; }
.product-seller-panel span { color: #7484a2; font-size: .78rem; }
.product-seller-panel strong { color: #172c57; }
.product-seller-panel button { border: 0; background: transparent; color: #2875f5; font-weight: 800; }
.resource-view-toggle { display: flex; padding: 4px; border: 1px solid var(--border-subtle); border-radius: 12px; background: #fff; }
.resource-view-toggle button { width: 38px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: #71819f; cursor: pointer; }
.resource-view-toggle button.active { background: #eaf2ff; color: #2676f5; }
.resource-view-toggle svg { width: 18px; }
.resource-card { overflow: hidden; padding: 0; grid-template-columns: 1fr; }
.resource-card a { color: inherit; text-decoration: none; }
.resource-card h3 a:hover { color: var(--brand-blue); }
.resource-cover { position: relative; aspect-ratio: 1.55; overflow: hidden; background: #eaf0fc; }
.resource-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(3,18,55,.72)); }
.resource-cover-icon { position: absolute; z-index: 2; left: 14px; bottom: 13px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: rgba(255,255,255,.94); color: #2476f4; }
.resource-cover-format { position: absolute; z-index: 2; right: 13px; bottom: 15px; padding: 5px 9px; border-radius: 8px; background: rgba(7,26,66,.78); color: #fff; font-size: .69rem; font-weight: 850; letter-spacing: .06em; }
.resource-card-body { padding: 19px; }
.resource-format { color: #2d6fe7; font-size: .72rem; font-weight: 820; letter-spacing: .035em; text-transform: uppercase; }
.resource-card h3 { margin: 10px 0 7px; }
.resource-card-body > p { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.resource-meta { display: inline-flex; align-items: center; gap: 5px; }
.resource-meta svg { width: 15px; fill: currentColor; color: #2675f3; }
.resources-grid.list-view { grid-template-columns: 1fr; }
.resources-grid.list-view .resource-card { display: grid; grid-template-columns: 230px 1fr; }
.resources-grid.list-view .resource-cover { height: 100%; min-height: 210px; aspect-ratio: auto; }
.resources-grid.list-view .resource-card-body { display: flex; flex-direction: column; justify-content: center; padding: 26px 30px; }
.resources-grid.list-view .resource-card-body > p { -webkit-line-clamp: 3; }
.resource-detail-shell { display: grid; grid-template-columns: minmax(320px,.8fr) minmax(0,1.2fr); gap: 56px; padding: 28px; border: 1px solid rgba(181,199,239,.75); border-radius: 28px; background: rgba(255,255,255,.86); box-shadow: 0 26px 70px rgba(23,61,133,.11); }
.resource-detail-cover { position: relative; min-height: 520px; overflow: hidden; border-radius: 22px; }
.resource-detail-cover img { width: 100%; height: 100%; object-fit: cover; }
.resource-detail-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(3,18,55,.72)); }
.resource-detail-cover > span { position: absolute; z-index: 2; left: 20px; bottom: 20px; display: inline-flex; align-items: center; gap: 8px; padding: 10px 13px; border-radius: 12px; background: #fff; color: #2274f2; font-weight: 850; }
.resource-detail-cover svg { width: 18px; }
.resource-detail-includes { margin: 24px 0; padding: 20px; border: 1px solid #dce5f7; border-radius: 15px; background: #f8faff; }
.resource-detail-includes h2 { margin: 0 0 13px; color: #132b59; font-size: 1rem; }
.resource-detail-includes ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; color: #50678d; }
.resource-detail-includes li { display: flex; align-items: center; gap: 9px; }
.resource-detail-includes svg { width: 17px; color: #2777f5; }
.donation-impact-gallery { padding: 78px 0; background: var(--background); }
.impact-gallery-head { max-width: 720px; margin: 0 auto 34px; text-align: center; }
.impact-gallery-head .section-kicker { color: var(--primary); font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.impact-gallery-head h2 { margin: 10px 0 12px; color: #071a48; font-size: clamp(2rem,4vw,3rem); }
.impact-gallery-head p { color: #5e7398; font-size: 1.05rem; line-height: 1.7; }
.impact-gallery-grid { display: grid; grid-template-columns: 1.15fr .85fr .85fr; grid-template-rows: 245px 245px; gap: 16px; }
.impact-media-card { position: relative; overflow: hidden; border-radius: 22px; background: #dce7f8; box-shadow: 0 16px 40px rgba(17,54,120,.12); }
.impact-media-card:first-child { grid-row: 1 / 3; }
.impact-media-card img, .impact-media-card video { width: 100%; height: 100%; object-fit: cover; }
.impact-media-overlay { position: absolute; inset: auto 0 0; padding: 28px 20px 18px; background: linear-gradient(transparent, rgba(3,17,51,.9)); color: #fff; pointer-events: none; }
.impact-media-overlay strong { display: block; font-size: 1.05rem; }
.impact-media-overlay span { display: block; margin-top: 5px; color: #dbe8ff; font-size: .82rem; }
.impact-video-badge { position: absolute; z-index: 2; top: 16px; left: 16px; display: flex; align-items: center; gap: 7px; padding: 8px 11px; border-radius: 99px; background: rgba(255,255,255,.94); color: #1c65e8; font-size: .75rem; font-weight: 850; }
.impact-video-badge svg { width: 16px; }
@media (max-width: 1050px) {
  .store-products-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .product-detail-shell { gap: 32px; }
  .impact-gallery-grid { grid-template-columns: 1fr 1fr; }
  .impact-media-card:first-child { grid-row: auto; }
}
@media (max-width: 760px) {
  .store-products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-detail-shell { grid-template-columns: 1fr; padding: 17px; }
  .resource-detail-shell { grid-template-columns: 1fr; gap: 26px; padding: 17px; }
  .resource-detail-cover { min-height: 360px; }
  .resources-grid.list-view .resource-card { grid-template-columns: 130px 1fr; }
  .resources-grid.list-view .resource-cover { min-height: 250px; }
  .resources-grid.list-view .resource-card-body { padding: 18px; }
  .impact-gallery-grid { grid-template-columns: 1fr; grid-template-rows: none; }
  .impact-media-card { min-height: 260px; }
}
@media (max-width: 480px) {
  .store-products-grid { grid-template-columns: 1fr; }
  .resources-grid.list-view .resource-card { grid-template-columns: 1fr; }
  .resources-grid.list-view .resource-cover { min-height: 190px; }
}

/* Shopify-inspired cart and one-page checkout */
.commerce-shell { padding: 42px 0 80px; }
.commerce-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 30px; }
.commerce-page-head h1 { margin: 8px 0 0; color: var(--text-primary); font-size: clamp(2.2rem,4vw,3.4rem); letter-spacing: -.045em; }
.commerce-page-head > a { display: inline-flex; align-items: center; gap: 8px; color: var(--primary); font-weight: 800; text-decoration: none; }
.commerce-page-head > a svg { width: 18px; }
.cart-page-layout { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(320px,.75fr); gap: 28px; align-items: start; }
.cart-page-card, .cart-order-summary { border: 1px solid var(--border-subtle); border-radius: 22px; background: var(--surface); color: var(--text-primary); box-shadow: 0 18px 45px rgba(0,0,0,.08); }
.cart-page-card { padding: 26px; }
.cart-page-title { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 20px; border-bottom: 1px solid var(--border-subtle); }
.cart-page-title h2, .cart-order-summary h2 { margin: 0; color: var(--text-primary); font-size: 1.18rem; }
.cart-page-title span { color: var(--text-secondary); }
.cart-page-item { display: grid; grid-template-columns: 104px minmax(0,1fr) auto auto; gap: 20px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--border-subtle); }
.cart-page-item > a img { width: 104px; height: 104px; border-radius: 14px; object-fit: cover; }
.cart-page-product { display: grid; gap: 5px; }
.cart-page-product > span, .cart-page-product small { color: var(--text-secondary); font-size: .78rem; }
.cart-page-product h3 { margin: 0; color: var(--text-primary); font-size: 1rem; }
.cart-page-product h3 a { color: inherit; text-decoration: none; }
.cart-page-product button { width: max-content; padding: 0; border: 0; background: transparent; color: var(--text-muted); font-size: .78rem; text-decoration: underline; cursor: pointer; }
.cart-quantity { display: grid; grid-template-columns: 32px 38px 32px; overflow: hidden; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-soft); }
.cart-quantity button, .cart-quantity input { height: 36px; border: 0; background: var(--surface); color: var(--text-primary); text-align: center; }
.cart-quantity button { color: var(--primary); font-size: 1.1rem; cursor: pointer; }
.cart-quantity input { width: 38px; color: var(--text-primary); font-weight: 800; appearance: textfield; }
.cart-order-summary { position: sticky; top: 22px; padding: 26px; }
.cart-order-summary .discount-row { margin-top: 22px; }
.discount-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.discount-row input { min-width: 0; height: 46px; padding: 0 13px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-soft); color: var(--text-primary); }
.discount-row button { padding: 0 17px; border: 1px solid var(--border); border-radius: 10px; background: var(--primary-surface); color: var(--primary); font-weight: 800; cursor: pointer; }
.discount-message { min-height: 18px; margin: 8px 0 0; font-size: .77rem; }
.discount-message.success { color: #148358; }
.discount-message.error { color: #c74343; }
.cart-order-summary dl, .checkout-totals { display: grid; gap: 13px; margin: 24px 0; }
.cart-order-summary dl > div, .checkout-totals > div { display: flex; justify-content: space-between; gap: 20px; color: var(--text-secondary); }
.cart-order-summary dd, .checkout-totals dd { margin: 0; color: var(--text-primary); text-align: right; }
.summary-total { margin-top: 7px; padding-top: 18px; border-top: 1px solid var(--border-subtle); font-size: 1.08rem; font-weight: 850; }
.summary-total dd { color: var(--text-primary) !important; font-size: 1.22rem; }
.checkout-primary { min-height: 54px; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 13px; background: var(--primary-gradient) !important; color: #fff !important; font-weight: 850; text-decoration: none; }
.checkout-primary.disabled { opacity: .45; pointer-events: none; }
.checkout-primary svg { width: 17px; }
.checkout-trust { display: flex; justify-content: center; gap: 16px; margin-top: 18px; color: #71809b; font-size: .72rem; }
.checkout-trust span { display: flex; align-items: center; gap: 5px; }
.checkout-trust svg { width: 14px; color: #2a73ec; }
.cart-page-empty { padding: 70px 20px; text-align: center; color: #667a9f; }
.cart-page-empty > svg { width: 44px; height: 44px; color: #3981f2; }
.cart-page-empty h2 { color: #132853; }
.cart-page-empty a { display: inline-flex; margin-top: 10px; padding: 12px 18px; border-radius: 11px; background: #2674ef; color: #fff; font-weight: 800; text-decoration: none; }

.checkout-page { min-height: 100vh; margin: 0; background: var(--background); color: var(--text-primary); font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
.checkout-header { height: 78px; display: flex; align-items: center; justify-content: space-between; padding: 0 max(26px,calc((100% - 1120px)/2)); border-bottom: 1px solid var(--border-subtle); background: var(--surface); color: var(--text-primary); }
.checkout-brand { display: flex; align-items: center; gap: 10px; color: var(--text-primary); font-size: 1.3rem; font-weight: 900; text-decoration: none; }
.checkout-brand > span { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: var(--primary-gradient); color: #fff; }
.checkout-brand svg { width: 20px; }
.checkout-cart-link { position: relative; color: var(--text-secondary); text-decoration: none; }
.checkout-cart-link span { position: absolute; top: -10px; right: -11px; width: 19px; height: 19px; display: grid; place-items: center; border-radius: 99px; background: var(--primary); color: #fff; font-size: .66rem; }
.checkout-layout { min-height: calc(100vh - 78px); display: grid; grid-template-columns: minmax(0,1.15fr) minmax(390px,.85fr); }
.checkout-form-column { width: min(650px,calc(100% - 48px)); justify-self: end; padding: 42px 70px 60px 0; background: transparent; color: var(--text-primary); }
.checkout-summary-column { padding: 42px max(28px,calc((100vw - 1120px)/2)) 60px 44px; border-left: 1px solid var(--border-subtle); background: var(--background-secondary); color: var(--text-primary); }
.checkout-summary-inner { position: sticky; top: 30px; max-width: 470px; }
.checkout-breadcrumbs { display: flex; align-items: center; gap: 6px; margin-bottom: 30px; color: var(--text-muted); font-size: .76rem; }
.checkout-breadcrumbs a { color: var(--primary); text-decoration: none; }
.checkout-breadcrumbs strong { color: var(--text-primary); }
.checkout-breadcrumbs svg { width: 13px; }
.accelerated-checkout { padding: 18px; border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--surface-card); }
.accelerated-checkout > p { width: max-content; margin: -28px auto 14px; padding: 0 11px; background: var(--surface-card); color: var(--text-secondary); font-size: .75rem; border: 1px solid var(--border-subtle); border-radius: 99px; }
.accelerated-checkout > div { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; }
.accelerated { height: 45px; border: 0; border-radius: 7px; color: #fff; font-size: .95rem; font-weight: 800; cursor: pointer; }
.accelerated.shop { background: #5a31f4; }
.accelerated.shop span { opacity: .85; font-style: italic; }
.accelerated.paypal { background: #ffc439; color: #143b75; font-style: italic; }
.accelerated.google { background: #161719; }
.checkout-divider { display: flex; align-items: center; gap: 12px; margin: 25px 0; color: var(--text-muted); font-size: .72rem; }
.checkout-divider::before,.checkout-divider::after { content: ""; height: 1px; flex: 1; background: var(--border-subtle); }
.checkout-section { margin-bottom: 38px; }
.checkout-section h1,.checkout-section h2 { margin: 0 0 15px; color: var(--text-primary); font-size: 1.22rem; font-weight: 650; }
.checkout-section-head { display: flex; justify-content: space-between; align-items: baseline; }
.checkout-section-head span,.checkout-help { color: var(--text-secondary); font-size: .8rem; }
.checkout-section-head a { color: var(--primary); }
.checkout-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.checkout-field { position: relative; display: block; }
.checkout-field.wide { grid-column: 1 / -1; }
.checkout-field > span { position: absolute; z-index: 1; left: 12px; top: 7px; color: var(--text-muted); font-size: .68rem; pointer-events: none; }
.checkout-field input,.checkout-field select { width: 100%; height: 52px; padding: 18px 11px 4px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text-primary); font: inherit; box-sizing: border-box; }
.checkout-field input:focus,.checkout-field select:focus { outline: 2px solid var(--primary-soft); outline-offset: 0; border-color: var(--primary); }
.checkout-check { display: flex; align-items: center; gap: 8px; margin-top: 11px; color: var(--text-secondary); font-size: .82rem; }
.delivery-tabs { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 14px; }
.delivery-tabs label { position: relative; }
.delivery-tabs input { position: absolute; opacity: 0; }
.delivery-tabs span { height: 54px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text-secondary); }
.delivery-tabs label:first-child span { border-radius: 9px 0 0 9px; }
.delivery-tabs label:last-child span { border-radius: 0 9px 9px 0; }
.delivery-tabs input:checked + span { position: relative; z-index: 1; border: 2px solid var(--primary) !important; color: var(--primary) !important; background: var(--primary-surface) !important; font-weight: 700; }
.delivery-tabs svg { width: 18px; }
.shipping-option { display: flex; align-items: center; gap: 12px; padding: 16px; border: 1px solid var(--border); background: var(--surface); color: var(--text-primary); }
.shipping-option:first-of-type { border-radius: 9px 9px 0 0; }
.shipping-option:last-of-type { margin-top: -1px; border-radius: 0 0 9px 9px; }
.shipping-option:has(input:checked) { position: relative; z-index: 1; border: 2px solid var(--primary) !important; background: var(--primary-surface) !important; }
.shipping-option span { flex: 1; display: grid; gap: 3px; }
.shipping-option small { color: var(--text-secondary); }
.payment-card { overflow: hidden; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); }
.payment-choice { min-height: 54px; display: flex; align-items: center; gap: 10px; padding: 0 15px; background: var(--surface-soft); color: var(--text-primary); }
.payment-choice strong { flex: 1; }
.payment-choice.bordered { border-top: 1px solid var(--border-subtle); background: var(--surface); }
.payment-fields { padding: 14px; border-top: 1px solid var(--border-subtle); background: var(--surface-soft); color: var(--text-primary); }
.billing-check { padding: 14px; border: 1px solid var(--border); background: var(--surface); color: var(--text-primary); }
.checkout-fields-disabled { display: none; }
.checkout-form-error { color: #bf3434; font-size: .82rem; }
.checkout-pay-button { width: 100%; height: 58px; display: flex; align-items: center; justify-content: center; gap: 9px; border: 0; border-radius: 8px; background: var(--primary-gradient) !important; color: #fff !important; font-size: 1rem; font-weight: 750; cursor: pointer; }
.checkout-pay-button span { margin-left: 3px; }
.checkout-pay-button svg { width: 17px; }
.checkout-policy-links { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; padding-top: 18px; border-top: 1px solid var(--border-subtle); }
.checkout-policy-links a { color: var(--primary); font-size: .72rem; }
.checkout-order-items { display: grid; gap: 17px; margin-bottom: 22px; }
.checkout-order-item { display: grid; grid-template-columns: 62px 1fr auto; gap: 13px; align-items: center; color: var(--text-primary); }
.checkout-order-item > div { position: relative; }
.checkout-order-item img { width: 62px; height: 62px; border: 1px solid var(--border-subtle); border-radius: 99px; border-radius: 9px; object-fit: cover; }
.checkout-order-item > div span { position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 99px; background: var(--primary); color: #fff; font-size: .7rem; }
.checkout-order-item p { display: grid; gap: 4px; margin: 0; font-size: .83rem; color: var(--text-primary); }
.checkout-order-item small { color: var(--text-secondary); }
.checkout-order-item b { font-size: .83rem; color: var(--text-primary); }
.checkout-totals { padding-top: 18px; border-top: 1px solid var(--border-subtle); font-size: .84rem; color: var(--text-secondary); }
.checkout-totals .summary-total { font-size: 1.1rem; color: var(--text-primary); }
.checkout-totals .summary-total dd { color: var(--text-primary) !important; }
.checkout-totals .summary-total small { margin-left: 5px; color: var(--text-muted); font-size: .68rem; font-weight: 500; }
.mobile-order-toggle { display: none; }
.checkout-success { position: fixed; z-index: 2000; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(248,250,255,.98); }
.checkout-success[hidden] { display: none; }
.checkout-success > div { max-width: 560px; padding: 48px; border: 1px solid #dce5f7; border-radius: 24px; background: #fff; box-shadow: 0 28px 80px rgba(28,56,113,.15); text-align: center; }
.success-check { width: 66px; height: 66px; display: grid; place-items: center; margin: 0 auto 18px; border: 2px solid #38a377; border-radius: 99px; color: #278d66; }
.checkout-success h1 { color: #132853; }
.checkout-success p { color: #66789a; line-height: 1.6; }
.checkout-success a { display: inline-flex; margin-top: 14px; padding: 13px 20px; border-radius: 10px; background: #2d6fdc; color: #fff; font-weight: 800; text-decoration: none; }
@media (max-width: 900px) {
  .cart-page-layout { grid-template-columns: 1fr; }
  .cart-order-summary { position: static; }
  .checkout-layout { display: flex; flex-direction: column; }
  .checkout-summary-column { order: -1; padding: 0; border: 0; background: #f5f6f8; }
  .checkout-summary-inner { max-width: none; }
  .mobile-order-toggle { width: 100%; min-height: 58px; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; border: 0; border-bottom: 1px solid var(--border-subtle); background: transparent; color: #3165be; }
  .mobile-order-toggle span { display: flex; align-items: center; gap: 8px; }
  #checkout-order-content { display: none; padding: 22px 24px; }
  #checkout-order-content.open { display: block; }
  .checkout-form-column { width: min(650px,calc(100% - 40px)); justify-self: auto; margin: 0 auto; padding: 34px 0 50px; }
}
@media (max-width: 640px) {
  .commerce-page-head { align-items: flex-start; flex-direction: column; }
  .cart-page-card { padding: 18px; }
  .cart-page-item { grid-template-columns: 82px 1fr; }
  .cart-page-item > a img { width: 82px; height: 82px; }
  .cart-quantity { grid-column: 2; }
  .cart-page-item > strong { grid-column: 2; }
  .checkout-header { padding: 0 20px; }
  .accelerated-checkout > div { grid-template-columns: 1fr; }
  .checkout-fields { grid-template-columns: 1fr; }
  .checkout-field { grid-column: 1 !important; }
  .checkout-section-head { align-items: flex-start; flex-direction: column; gap: 5px; }
}

@media (max-width: 460px) {
  .footer-main {
    grid-template-columns: 1fr;
  }

  .mini-footer-inner {
    align-items: flex-start;
    flex-direction: column;
    min-height: 0;
  }

  .mini-footer-links {
    width: 100%;
  }

  .footer-cta-row {
    align-items: stretch;
    flex-direction: column;
  }

  .footer-button {
    width: 100%;
  }

  .mini-footer.hero-mini-footer {
    position: static;
    background: #121614;
  }
}

body.lights-out .badge,
body.lights-out .badge * {
  color: #fff !important;
}

/* Chat container styles (total white in light mode) */
.stream-chat-panel {
  border: 1px solid var(--line);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 400px;
  max-height: calc(100vh - 200px);
  overflow: hidden;
  background: #ffffff !important;
  box-shadow: 0 4px 18px rgba(0,0,0,0.03);
}

.stream-chat-header {
  padding: 16px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #ffffff;
}

.stream-chat-header strong {
  color: var(--ink);
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 6px;
}

#player-chat-box {
  flex-grow: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 0.85rem;
  scroll-behavior: smooth;
  color: var(--ink);
  background: #ffffff;
}

#player-chat-box div {
  margin-bottom: 8px;
  line-height: 1.4;
  word-break: break-word;
  color: var(--ink);
}

/* Custom Scrollbar */
#player-chat-box::-webkit-scrollbar {
  width: 6px;
}
#player-chat-box::-webkit-scrollbar-track {
  background: transparent;
}
#player-chat-box::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 3px;
}

.stream-chat-form {
  padding: 12px;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 8px;
  background: var(--soft);
}

#player-chat-input {
  flex-grow: 1;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 12px;
  color: var(--ink);
  font-size: 0.85rem;
}

.stream-chat-form button {
  padding: 6px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stream-chat-welcome {
  color: var(--muted);
  text-align: center;
  font-size: 0.76rem;
  margin-bottom: 12px;
  line-height: 1.4;
  padding: 6px;
  background: var(--soft);
  border-radius: 6px;
}

.stream-chat-host-msg {
  margin-bottom: 8px;
  color: var(--ink);
  line-height: 1.4;
}

.stream-chat-host-name {
  font-weight: 700;
  color: var(--clay);
  margin-right: 4px;
}

.stream-chat-username {
  font-weight: 700;
  color: var(--forest);
  margin-right: 4px;
}

.stream-chat-user-me {
  font-weight: 700;
  color: var(--clay);
  margin-right: 4px;
}

/* Chat Dark Mode Overrides (Bluish dark grey background, not pitch black) */
body.lights-out .stream-chat-panel {
  background: var(--surface) !important;
  border-color: var(--border-subtle) !important;
  box-shadow: none;
}

body.lights-out .stream-chat-header {
  background: var(--surface) !important;
  border-bottom-color: var(--border-subtle) !important;
}

body.lights-out .stream-chat-header strong {
  color: #ffffff !important;
}

body.lights-out #player-chat-box {
  background: var(--surface-soft) !important;
}

body.lights-out #player-chat-box div {
  color: rgba(255, 255, 255, 0.85) !important;
}

body.lights-out #player-chat-box::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15) !important;
}

body.lights-out .stream-chat-form {
  background: rgba(255, 255, 255, 0.02) !important;
  border-top-color: rgba(255, 255, 255, 0.08) !important;
}

body.lights-out #player-chat-input {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
}

body.lights-out .stream-chat-welcome {
  color: rgba(255, 255, 255, 0.4) !important;
  background: rgba(255, 255, 255, 0.02) !important;
}

body.lights-out .stream-chat-host-msg {
  color: #f3f5f3 !important;
}

body.lights-out .stream-chat-username {
  color: #60a5fa !important;
}

body.lights-out .stream-chat-host-name,
body.lights-out .stream-chat-user-me {
  color: #f5cb6c !important;
}

/* Dark Mode Header buttons & User Profile Circle */
body.lights-out .lang-selector-btn,
body.lights-out .login-header-btn,
body.lights-out .header-profile-circle {
  background: #1e293b !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: #f1f5f9 !important;
}

body.lights-out .lang-selector-btn:hover,
body.lights-out .login-header-btn:hover,
body.lights-out .header-profile-circle:hover {
  background: #334155 !important;
  border-color: #10b981 !important;
}

body.lights-out .lang-selector-btn .lang-text,
body.lights-out .login-header-btn span {
  color: #f1f5f9 !important;
}

body.lights-out .lang-selector-btn .lang-chevron {
  color: #94a3b8 !important;
}

/* Dark Mode Chat Bubbles & Typography */
body.lights-out .stream-chat-bubble {
  background: #1e293b !important;
  color: #f1f5f9 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

body.lights-out .stream-chat-msg-row.outgoing .stream-chat-bubble {
  background: #312e81 !important;
  color: #ede9fe !important;
  border-color: transparent !important;
}

body.lights-out .stream-chat-sender {
  color: #94a3b8 !important;
}

body.lights-out .stream-chat-welcome {
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Dark Mode Chat input form */
body.lights-out .stream-chat-form-container {
  background: #111625 !important;
  border-top-color: rgba(255, 255, 255, 0.08) !important;
}

body.lights-out .stream-chat-form-inner {
  background: #1e293b !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: none !important;
}

body.lights-out .stream-chat-input-field {
  color: #ffffff !important;
}

body.lights-out .stream-chat-input-field::placeholder {
  color: #64748b !important;
}

/* Floating Action Button (FAB) for Lights Out Toggle */
.floating-lights-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 999;
  background: #ffffff !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.1);
  border-radius: 50px;
  padding: 12px 20px;
  font-size: 0.88rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.floating-lights-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.14);
}

body.lights-out .floating-lights-btn {
  background: #111625 !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important;
}

/* Video Player Overlay Badges & Hover Faint-to-Solid Transitions */
.player-overlay-badge {
  position: absolute;
  top: 16px;
  z-index: 5;
  pointer-events: none; /* Let clicks pass directly to the video player under it */
  opacity: 0.35;
  transition: opacity 0.35s ease;
}

.player-overlay-left {
  left: 16px;
}

.player-overlay-right {
  right: 16px;
}

/* Turns fully solid on hovering over the video player frame */
.modern-video-wrapper:hover .player-overlay-badge {
  opacity: 1;
}

.player-overlay-left .badge.live {
  background: #ef4444 !important;
  color: #fff !important;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.25);
  display: inline-flex;
  align-items: center;
}

.live-dot {
  width: 6px;
  height: 6px;
  background: #fff;
  border-radius: 50%;
  display: inline-block;
  margin-right: 6px;
}

.viewer-count-overlay {
  background: rgba(20, 23, 22, 0.75);
  color: #fff !important;
  font-size: 0.75rem;
  padding: 5px 10px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.viewer-count-overlay strong {
  color: #fff !important;
}

/* ── Tab Layout Panel ── */
.tab-panel.hidden {
  display: none !important;
}

/* ── Responsive Columns Speakers Grid ── */
.speakers-layout-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(var(--spk-cols-mobile, 2), minmax(0, 1fr));
}
@media (min-width: 768px) {
  .speakers-layout-grid {
    grid-template-columns: repeat(var(--spk-cols-desktop, 3), minmax(0, 1fr));
  }
}

/* ── Premium Church Card (Reference-Matched Design) ── */
/* ── Premium Church Card (Reference-Matched Design) ── */
.church-premium-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  min-height: 290px;
}
.church-premium-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
}

.cpc-banner-link {
  display: block;
  width: 100%;
}
.cpc-banner {
  height: 180px; /* Increased height */
  background-size: cover;
  background-position: center;
  width: 100%;
  position: relative;
  transition: filter 0.3s ease;
}
.church-premium-card:hover .cpc-banner {
  filter: brightness(0.95);
}

.cpc-banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.25) 50%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
}

.cpc-verified-icon-tr {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 20;
  color: #3b82f6;
  background: #ffffff;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}
.cpc-verified-icon-tr svg {
  width: 16px;
  height: 16px;
  fill: #3b82f6;
  color: #ffffff;
}

.cpc-name-overlay {
  position: absolute;
  bottom: 12px;
  left: 96px; /* clears overlapping avatar on left */
  right: 16px;
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600; /* semi-bold */
  color: #ffffff;
  line-height: 1.25;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.cpc-body {
  padding: 16px 25px 25px 25px; /* increased to 25px left and right */
  display: flex;
  flex-direction: column;
  position: relative;
  flex-grow: 1;
}

/* Overlapping Pastor Avatar Container */
.cpc-pastor-avatar-container-new {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 4px solid #ffffff;
  overflow: hidden;
  position: absolute;
  top: -32px; /* half overlaying the thumbnail and half overlaying the card content area */
  left: 20px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  z-index: 10;
  background: #f1f5f9;
}
.cpc-pastor-avatar-new {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Pastor Info box to the right of the avatar, in the card body */
.cpc-pastor-info-box {
  margin-left: 71px; /* aligns text next to avatar (25px padding + 71px = 96px left offset) */
  margin-bottom: 12px;
  margin-top: -13px; /* pulled upward further by 3px (total -13px) */
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 38px;
}

.cpc-pastor-name-new {
  font-size: 0.8rem; /* reduced by 3 points down */
  font-weight: 700;
  color: #475569; /* dark gray, not black */
  text-transform: uppercase; /* all uppercase */
  letter-spacing: 0.03em;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Tagline Short Description */
.cpc-tagline {
  font-size: 0.9rem; /* increased font size by 2 points */
  color: #64748b;
  line-height: 1.4;
  margin: 0 0 16px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Service Times Rectangular Gray Box */
.cpc-service-times-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 54px;
}

.cpc-service-time-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.cpc-service-label {
  font-size: 0.65rem;
  color: #94a3b8;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}

.cpc-service-time-item {
  font-size: 0.85rem;
  font-weight: 800;
  color: #1e293b;
}

.cpc-service-time-sep-vertical {
  width: 1px;
  height: 28px;
  background-color: #cbd5e1;
}

/* Card Actions Row & Buttons */
.cpc-actions-row {
  display: flex;
  gap: 10px;
  width: 100%;
  margin-top: auto;
}

.cpc-btn-view {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 11px;
  background: #c79624; /* Theme Gold */
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 700;
  border-radius: 10px;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.1s ease;
  box-shadow: 0 2px 4px rgba(199, 150, 36, 0.15);
}
.cpc-btn-view:hover {
  background: #b0811a; /* Darker Gold */
}
.cpc-btn-view:active {
  transform: scale(0.99);
}

.cpc-btn-directions {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 11px;
  background: #0f172a; /* Dark Slate */
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 700;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.1s ease;
}
.cpc-btn-directions:hover {
  background: #1e293b;
}
.cpc-btn-directions:active {
  transform: scale(0.99);
}

/* Premium Map Modal Styles */
.cpc-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  padding: 16px;
  box-sizing: border-box;
}
.cpc-modal-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.cpc-modal-content {
  background: #ffffff;
  border-radius: 20px;
  width: 100%;
  max-width: 540px;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  position: relative;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(226, 232, 240, 0.8);
  transform: scale(0.96) translateY(8px);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.cpc-modal-backdrop.open .cpc-modal-content {
  transform: scale(1) translateY(0);
}

.cpc-modal-photo-hero {
  height: 140px;
  width: 100%;
  background-size: cover;
  background-position: center;
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
}

.cpc-modal-photo-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.35) 0%, rgba(15, 23, 42, 0.08) 40%, rgba(15, 23, 42, 0.75) 100%);
}

.cpc-modal-photo-badges {
  position: absolute;
  top: 12px;
  left: 14px;
  display: flex;
  gap: 6px;
  z-index: 2;
}

.cpc-modal-photo-badge {
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  backdrop-filter: blur(8px);
  background: rgba(15, 23, 42, 0.75);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.cpc-modal-verified-badge {
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  backdrop-filter: blur(8px);
  background: rgba(16, 185, 129, 0.9);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.cpc-modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 5;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #ffffff;
  transition: background 0.2s, transform 0.2s;
}
.cpc-modal-close:hover {
  background: rgba(15, 23, 42, 0.9);
  transform: scale(1.08);
}

.cpc-modal-body {
  padding: 16px 20px 18px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.cpc-modal-header {
  flex-shrink: 0;
}

.cpc-modal-church-title {
  font-size: 1.22rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 3px 0;
  line-height: 1.25;
}

.cpc-modal-denomination {
  font-size: 0.8rem;
  font-weight: 600;
  color: #64748b;
  margin: 0 0 6px 0;
}

.cpc-modal-address {
  font-size: 0.8rem;
  color: #475569;
  margin: 0 0 10px 0;
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 5px;
}
.cpc-modal-address i {
  color: #c79624;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}

.cpc-modal-meta-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.cpc-meta-pill {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #334155;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.cpc-meta-pill i {
  color: #c79624;
  width: 13px;
  height: 13px;
}

.cpc-modal-map-container {
  position: relative;
  height: 190px;
  min-height: 150px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  margin-bottom: 14px;
  flex-shrink: 0;
}

.cpc-modal-map-frame {
  width: 100%;
  height: 100%;
  border: 0;
}

/* Interactive Map Marker Card with Actual Church Photo */
.cpc-map-marker-overlay {
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 10;
  pointer-events: none;
}

.cpc-marker-card {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.8);
  max-width: 250px;
}

.cpc-marker-card-thumb {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.cpc-marker-card-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow: hidden;
}

.cpc-marker-card-name {
  font-size: 0.76rem;
  font-weight: 800;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cpc-marker-card-loc {
  font-size: 0.68rem;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cpc-marker-card-badge {
  font-size: 0.64rem;
  font-weight: 700;
  color: #16a34a;
  display: flex;
  align-items: center;
  gap: 3px;
}

.cpc-marker-pin-stem {
  position: absolute;
  bottom: -6px;
  left: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cpc-marker-pulse {
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.45);
  animation: marker-pulse-anim 1.8s infinite ease-out;
}

.cpc-pin-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ef4444;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  position: relative;
  z-index: 2;
}

.cpc-modal-footer {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%;
  flex-shrink: 0;
  margin-top: auto;
}

.cpc-modal-btn-share,
.cpc-modal-btn-gmaps,
.cpc-modal-btn-profile {
  flex: 1 1 0;
  min-width: 0;
  height: 40px;
  padding: 0 10px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.8rem;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-sizing: border-box;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.cpc-modal-btn-share {
  background: #c79624;
  color: #ffffff;
  border: none;
}
.cpc-modal-btn-share:hover {
  background: #b0811a;
  transform: translateY(-1px);
}

.cpc-modal-btn-gmaps {
  background: #0f172a;
  color: #ffffff;
  border: none;
}
.cpc-modal-btn-gmaps:hover {
  background: #1e293b;
  transform: translateY(-1px);
}

.cpc-modal-btn-profile {
  background: #f1f5f9;
  color: #0f172a;
  border: 1px solid #e2e8f0;
}
.cpc-modal-btn-profile:hover {
  background: #e2e8f0;
  transform: translateY(-1px);
}

@media (max-width: 480px) {
  .cpc-modal-footer {
    flex-direction: column;
    gap: 8px;
  }
  .cpc-modal-btn-share,
  .cpc-modal-btn-gmaps,
  .cpc-modal-btn-profile {
    width: 100%;
    height: 40px;
  }
}

.cpc-modal-content svg {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

/* Church Card Action Row & Map Button - Perfectly Sized Equal Buttons */
.church-card-action-row {
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
  width: 100% !important;
  margin-top: 8px !important;
}

.immersive-pill-btn,
.immersive-map-btn {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  height: 44px !important;
  padding: 0 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  border-radius: 999px !important;
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  line-height: 1 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.immersive-map-btn {
  background: rgba(255, 255, 255, 0.94) !important;
  color: #0f172a !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  backdrop-filter: blur(10px) !important;
}
.immersive-map-btn:hover {
  background: #ffffff !important;
  color: var(--color-primary-gold, #c79624) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2) !important;
}

.split-map-btn {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  height: 42px !important;
  padding: 0 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 6px !important;
  border-radius: 999px !important;
  background: #f1f5f9 !important;
  color: #0f172a !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  line-height: 1 !important;
  border: 1px solid #e2e8f0 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}
.split-map-btn:hover {
  background: #e2e8f0 !important;
  color: var(--primary, #c79624) !important;
  transform: translateY(-2px) !important;
}

/* Profile Location Showcase (Tab 4) */
.profile-location-showcase {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 16px;
  margin-top: 14px;
}
@media (max-width: 768px) {
  .profile-location-showcase {
    grid-template-columns: 1fr;
  }
}

.profile-location-photo-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  height: 340px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--line, #e2e8f0);
}

.profile-location-church-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.profile-location-photo-badge {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: rgba(15, 23, 42, 0.78);
  backdrop-filter: blur(8px);
  color: #ffffff;
  font-size: 0.74rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.profile-on-map-card {
  position: absolute;
  bottom: 14px;
  left: 14px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.7);
  max-width: 280px;
}

.profile-on-map-thumb {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  object-fit: cover;
  border: 2px solid #ffffff;
  flex-shrink: 0;
}

.profile-on-map-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}

.profile-on-map-name {
  font-size: 0.82rem;
  font-weight: 800;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-on-map-address {
  font-size: 0.72rem;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-on-map-badge {
  font-size: 0.68rem;
  font-weight: 700;
  color: #16a34a;
  display: flex;
  align-items: center;
  gap: 3px;
}

/* Dark Mode Overrides for Map Modal & Markers */
html[data-theme="dark"] .cpc-modal-content {
  background: #0f172a;
  border-color: #334155;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.55);
}

html[data-theme="dark"] .cpc-modal-church-title {
  color: #f8fafc;
}

html[data-theme="dark"] .cpc-modal-denomination {
  color: #94a3b8;
}

html[data-theme="dark"] .cpc-modal-address {
  color: #cbd5e1;
}

html[data-theme="dark"] .cpc-meta-pill {
  background: #1e293b;
  color: #cbd5e1;
}

html[data-theme="dark"] .cpc-modal-map-container {
  border-color: #334155;
}

html[data-theme="dark"] .cpc-marker-card {
  background: rgba(15, 23, 42, 0.94);
  border-color: rgba(255, 255, 255, 0.15);
}

html[data-theme="dark"] .cpc-marker-card-name {
  color: #f8fafc;
}

html[data-theme="dark"] .cpc-marker-card-loc {
  color: #94a3b8;
}

html[data-theme="dark"] .cpc-modal-btn-profile {
  background: #1e293b;
  color: #f8fafc;
}
html[data-theme="dark"] .cpc-modal-btn-profile:hover {
  background: #334155;
}

html[data-theme="dark"] .immersive-map-btn {
  background: rgba(30, 41, 59, 0.88);
  color: #f8fafc;
  border-color: rgba(255, 255, 255, 0.15);
}
html[data-theme="dark"] .immersive-map-btn:hover {
  background: rgba(51, 65, 85, 0.95);
  color: #fbbf24;
}

html[data-theme="dark"] .split-map-btn {
  background: #1e293b;
  color: #f8fafc;
  border-color: #334155;
}
html[data-theme="dark"] .split-map-btn:hover {
  background: #334155;
  color: #fbbf24;
}

html[data-theme="dark"] .profile-on-map-card {
  background: rgba(15, 23, 42, 0.94);
  border-color: rgba(255, 255, 255, 0.15);
}

html[data-theme="dark"] .profile-on-map-name {
  color: #f8fafc;
}

html[data-theme="dark"] .profile-on-map-address {
  color: #94a3b8;
}

/* ── Premium Group Chat Styles (Reference-Matched) ── */
.stream-chat-panel {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 20px !important;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04) !important;
}

.live-tab-button {
  border: none !important;
  background: transparent !important;
  color: #64748b !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  padding: 6px 14px !important;
  border-radius: 30px !important;
  cursor: pointer;
  transition: all 0.2s ease !important;
}
.live-tab-button.active {
  background: #d1fae5 !important; /* light mint */
  color: #065f46 !important; /* dark green */
}
.live-tab-button:hover:not(.active) {
  color: #0f172a !important;
}

/* Chat box containers */
#player-chat-box {
  background: #f8fafc !important;
  display: flex;
  flex-direction: column;
  gap: 20px !important;
}

/* Chat Welcome and System messages */
.stream-chat-welcome {
  background: #f1f5f9 !important;
  color: #475569 !important;
  border-radius: 12px;
  padding: 10px 14px !important;
  font-size: 0.76rem !important;
  line-height: 1.4;
  text-align: center;
  border: 1px solid #e2e8f0;
}

/* Message Rows */
.stream-chat-msg-row {
  display: flex;
  gap: 10px;
  max-width: 85%;
  align-items: flex-end;
}
.stream-chat-msg-row.incoming {
  align-self: flex-start;
}
.stream-chat-msg-row.outgoing {
  align-self: flex-end;
  flex-direction: row-reverse;
  max-width: 80%;
}

.stream-chat-avatar {
  display: block !important;
  margin: 0 0 10px 0 !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 1px solid #e2e8f0 !important;
  flex-shrink: 0 !important;
  aspect-ratio: 1 / 1 !important;
}

.stream-chat-msg-col {
  display: flex;
  flex-direction: column;
}
.stream-chat-sender {
  font-size: 0.72rem;
  font-weight: 600;
  color: #64748b;
  margin-bottom: 3px;
  margin-left: 4px;
}
.stream-chat-msg-row.outgoing .stream-chat-sender {
  align-self: flex-end;
  margin-right: 4px;
}

/* Chat Bubbles */
.stream-chat-bubble {
  font-size: 0.8rem;
  line-height: 1.45;
  padding: 10px 14px;
  border-radius: 16px;
  word-break: break-word;
}
.incoming .stream-chat-bubble {
  background: #ffffff;
  color: #0f172a;
  border: 1px solid #e2e8f0;
  border-bottom-left-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}
.outgoing .stream-chat-bubble {
  background: #ede9fe; /* Light purple */
  color: #312e81; /* Indigo/purple text */
  border-bottom-right-radius: 4px;
}

/* Typing Indicator styling */
.chat-typing-indicator {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  background: transparent;
  align-self: flex-start;
  transition: opacity 0.2s ease;
}
.chat-typing-indicator.hidden {
  display: none !important;
}

.typing-dot {
  width: 5px;
  height: 5px;
  background: #94a3b8;
  border-radius: 50%;
  animation: typingBounce 1.4s infinite ease-in-out both;
}
.typing-dot:nth-child(2) {
  animation-delay: 0.2s;
}
.typing-dot:nth-child(3) {
  animation-delay: 0.4s;
}
@keyframes typingBounce {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1.0); }
}

.typing-text {
  font-size: 0.72rem;
  font-weight: 500;
  color: #64748b;
  margin-left: 6px;
}

/* Form inputs container */
.stream-chat-form-container {
  padding: 14px 16px;
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
}
.stream-chat-form-inner {
  display: flex;
  align-items: center;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.stream-chat-form-inner:focus-within {
  border-color: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

.stream-chat-input-field {
  flex-grow: 1;
  border: none !important;
  background: transparent !important;
  padding: 8px 12px !important;
  font-size: 0.82rem !important;
  color: #0f172a !important;
  outline: none !important;
  box-shadow: none !important;
}

.stream-chat-send-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--gold) !important; /* Golden theme */
  color: #ffffff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none !important;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.1s ease !important;
  flex-shrink: 0;
}
.stream-chat-send-btn:hover {
  background: #a3781b !important;
  transform: scale(1.03);
}
.stream-chat-send-btn:active {
  transform: scale(0.97);
}

.hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.gateway-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-top: 32px;
}

.gateway-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 24px;
  border-radius: 20px;
  background: #ffffff;
  border: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
  text-decoration: none;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.gateway-card:hover {
  transform: translateY(-6px);
  border-color: var(--gold);
  box-shadow: 0 18px 40px rgba(199, 150, 36, 0.14);
}

.gateway-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--soft);
  border: 1px solid var(--line);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.gateway-card h3 {
  font-size: 1.15rem;
  font-weight: 800;
  margin-bottom: 6px;
  color: var(--ink);
}

.gateway-card p {
  font-size: 0.86rem;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 18px;
  flex-grow: 1;
}

.gateway-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

@media (max-width: 1024px) {
  .gateway-cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .gateway-cards-grid {
    grid-template-columns: 1fr;
  }
}

/* ======================================================
   EXPANDED PLATFORM STYLES: ACTION BUTTONS, SALVATION & DONATIONS
   ====================================================== */

.hero-action-buttons-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 24px;
}

.hero-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

.hero-action-btn:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.22);
  border-color: var(--gold);
  color: #ffffff;
}

.hero-action-btn svg {
  width: 20px;
  height: 20px;
  color: var(--gold);
}

.hero-action-btn.primary {
  background: var(--gold);
  color: #000000;
}
.hero-action-btn.primary svg {
  color: #000000;
}
.hero-action-btn.primary:hover {
  background: #dda23e;
  color: #000000;
}

.explainer-video-card {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 24px;
  box-shadow: var(--shadow);
  margin-top: 30px;
}

.explainer-video-wrapper {
  aspect-ratio: 16/9;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
}

.explainer-video-wrapper iframe {
  width: 100%;
  height: 100%;
}

.explainer-steps-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.explainer-step-item {
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  text-align: center;
}

.explainer-step-item .step-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--gold);
  color: #000;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px;
}

.salvation-banner {
  background: linear-gradient(180deg, #faf7f0 0%, #f2ebd9 100%);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.salvation-card {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
}

.salvation-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--gold);
  color: #000;
  font-weight: 800;
  font-size: 0.75rem;
  padding: 6px 14px;
  border-radius: 50px;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.sinners-prayer-box {
  background: #ffffff;
  border: 1.5px solid var(--gold);
  border-radius: 20px;
  padding: 30px;
  margin: 24px 0;
  position: relative;
  box-shadow: 0 10px 30px rgba(199, 150, 36, 0.12);
}

.sinners-prayer-box .quote-icon {
  width: 32px;
  height: 32px;
  color: var(--gold);
  margin-bottom: 12px;
}

.sinners-prayer-text {
  font-size: 1.15rem;
  line-height: 1.7;
  font-weight: 600;
  color: var(--ink);
  font-style: italic;
  margin: 0;
}

.giving-freq-selector {
  display: flex;
  gap: 8px;
  background: #f1f5f9;
  padding: 4px;
  border-radius: 12px;
}

.freq-btn {
  flex: 1;
  padding: 10px;
  border-radius: 8px;
  border: none;
  background: transparent;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.2s;
}

.freq-btn.active {
  background: #ffffff;
  color: var(--ink);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.amount-pills-grid {
  cursor: pointer;
  transition: all 0.2s;
}
@media (max-width: 600px) {
  .gateway-cards-grid {
    grid-template-columns: 1fr;
  }
}

/* ======================================================
   EXPANDED PLATFORM STYLES: ACTION BUTTONS, SALVATION & DONATIONS
   ====================================================== */

.hero-action-buttons-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 24px;
}

.hero-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

.hero-action-btn:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.22);
  border-color: var(--gold);
  color: #ffffff;
}

.hero-action-btn svg {
  width: 20px;
  height: 20px;
  color: var(--gold);
}

.hero-action-btn.primary {
  background: var(--gold);
  color: #000000;
}
.hero-action-btn.primary svg {
  color: #000000;
}
.hero-action-btn.primary:hover {
  background: #dda23e;
  color: #000000;
}

.explainer-video-card {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 24px;
  box-shadow: var(--shadow);
  margin-top: 30px;
}

.explainer-video-wrapper {
  aspect-ratio: 16/9;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
}

.explainer-video-wrapper iframe {
  width: 100%;
  height: 100%;
}

.explainer-steps-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.explainer-step-item {
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  text-align: center;
}

.explainer-step-item .step-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--gold);
  color: #000;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px;
}

.salvation-banner {
  background: linear-gradient(180deg, #faf7f0 0%, #f2ebd9 100%);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.salvation-card {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
}

.salvation-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--gold);
  color: #000;
  font-weight: 800;
  font-size: 0.75rem;
  padding: 6px 14px;
  border-radius: 50px;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.sinners-prayer-box {
  background: #ffffff;
  border: 1.5px solid var(--gold);
  border-radius: 20px;
  padding: 30px;
  margin: 24px 0;
  position: relative;
  box-shadow: 0 10px 30px rgba(199, 150, 36, 0.12);
}

.sinners-prayer-box .quote-icon {
  width: 32px;
  height: 32px;
  color: var(--gold);
  margin-bottom: 12px;
}

.sinners-prayer-text {
  font-size: 1.15rem;
  line-height: 1.7;
  font-weight: 600;
  color: var(--ink);
  font-style: italic;
  margin: 0;
}

.giving-freq-selector {
  display: flex;
  gap: 8px;
  background: #f1f5f9;
  padding: 4px;
  border-radius: 12px;
}

.freq-btn {
  flex: 1;
  padding: 10px;
  border-radius: 8px;
  border: none;
  background: transparent;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.2s;
}

.freq-btn.active {
  background: #ffffff;
  color: var(--ink);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.amount-pills-grid {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.amount-pill {
  flex: 1;
  min-width: 60px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #ffffff;
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--ink);
  cursor: pointer;
  transition: all 0.2s;
}

.amount-pill.active,
.amount-pill:hover {
  border-color: var(--gold);
  background: var(--soft);
  color: var(--gold);
}

.currency-prefix {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 800;
  color: var(--muted);
}

.table-styled {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.table-styled th {
  padding: 12px;
  border-bottom: 2px solid var(--line);
  font-size: 0.78rem;
  text-transform: uppercase;
  color: var(--muted);
}

.table-styled td {
  padding: 12px;
  border-bottom: 1px solid var(--line);
  font-size: 0.88rem;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 50px;
  font-size: 0.72rem;
  font-weight: 800;
}

.badge.verified {
  background: #dcfce7;
  color: #15803d;
}

.badge.pending {
  background: #fef9c3;
  color: #a16207;
}

.tax-disclaimer-box {
  background: #fffbe6;
  border: 1px solid #ffe58f;
  border-radius: 12px;
  padding: 14px 16px;
}

.disclaimer-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
}

/* Foundation & Donate Page Specific Styling */
.foundation-hero {
  background: linear-gradient(180deg, #fdfcf9 0%, #faf7f0 100%);
  padding: 52px 0 48px;
}

.foundation-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.9fr);
  gap: 40px;
  align-items: center;
}

.foundation-hero-text h1 {
  font-size: 2.1rem !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  color: #0f172a !important;
  letter-spacing: -0.02em !important;
  margin: 12px 0 16px !important;
}

.foundation-hero-text .lead {
  font-size: 0.98rem !important;
  line-height: 1.6 !important;
  color: #475569 !important;
  margin-bottom: 24px !important;
}

.hero-cta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.hero-impact-card {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.hero-impact-img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
}

.impact-card-badge {
  position: absolute;
  bottom: 16px;
  left: 16px;
  background: rgba(20, 23, 22, 0.85);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 8px 14px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.foundation-app-banner {
  background: linear-gradient(135deg, #ffffff 0%, #faf7f0 100%);
  border: 1.5px solid var(--gold);
}

.app-banner-card {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
}

.app-step-list {
  padding-left: 20px;
  margin-top: 12px;
  line-height: 1.8;
  font-size: 0.88rem;
  color: var(--muted);
}

/* ======================================================
   PREMIUM DONATION PORTAL DESIGN SYSTEM
   ====================================================== */

.donate-hero {
  background: #f8fafc;
  padding: 50px 0 64px;
  border-bottom: 1px solid #e2e8f0;
}

.donate-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(420px, 0.9fr);
  gap: 48px;
  align-items: start;
}

.donate-info-side h1 {
  font-size: 2.25rem !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  color: #0f172a !important;
  letter-spacing: -0.02em !important;
  margin: 12px 0 14px !important;
}

.donate-info-side .lead {
  font-size: 1rem !important;
  line-height: 1.65 !important;
  color: #475569 !important;
  margin-bottom: 28px !important;
}

.tax-disclaimer-box {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 16px;
  padding: 18px 20px;
  margin-bottom: 28px;
}

.disclaimer-header {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  font-weight: 800;
  color: #166534;
}

.disclaimer-header svg {
  width: 18px;
  height: 18px;
  color: #16a34a;
}

.tax-disclaimer-box p {
  font-size: 0.82rem;
  line-height: 1.55;
  color: #15803d;
  margin-top: 6px;
}

.guarantee-list {
  display: grid;
  gap: 20px;
}

.guarantee-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.guarantee-icon-badge {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: #fef3c7;
  border: 1px solid #fde68a;
  color: #d97706;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.guarantee-item strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 2px;
}

.guarantee-item p {
  font-size: 0.85rem;
  color: #64748b;
  margin: 0;
  line-height: 1.45;
}

.donate-form-panel {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 24px;
  padding: 32px;
  box-shadow: 0 20px 40px -15px rgba(15, 23, 42, 0.08);
}

.donate-form-panel h2 {
  font-size: 1.4rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin-bottom: 20px !important;
  letter-spacing: -0.01em;
}

.form-group-block {
  margin-bottom: 20px;
}

.form-label-bold {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: #334155;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}

.giving-freq-selector {
  display: flex;
  background: #f1f5f9;
  padding: 4px;
  border-radius: 12px;
  gap: 4px;
}

.freq-btn {
  flex: 1;
  padding: 10px 12px;
  border-radius: 8px;
  border: none;
  background: transparent;
  font-weight: 700;
  font-size: 0.85rem;
  color: #64748b;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.freq-btn.active {
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.styled-select-field {
  width: 100%;
  min-height: 48px;
  border-radius: 12px;
  border: 1.5px solid #cbd5e1;
  background-color: #ffffff;
  padding: 10px 14px;
  font-size: 0.9rem;
  font-weight: 700;
  color: #0f172a;
  transition: all 0.2s;
}
.styled-select-field:focus {
  border-color: #c79624;
  box-shadow: 0 0 0 3px rgba(199, 150, 36, 0.15);
}

.amount-pills-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.amount-pill {
  padding: 12px 6px;
  border-radius: 10px;
  border: 1.5px solid #e2e8f0;
  background: #f8fafc;
  font-weight: 800;
  font-size: 0.92rem;
  color: #334155;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.amount-pill:hover {
  border-color: #cbd5e1;
  background: #ffffff;
  color: #0f172a;
}

.amount-pill.active {
  background: #c79624;
  border-color: #c79624;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(199, 150, 36, 0.3);
}

.custom-amount-wrapper {
  display: flex;
  align-items: center;
  border: 1.5px solid #cbd5e1;
  border-radius: 12px;
  overflow: hidden;
  background: #ffffff;
  transition: all 0.2s;
}

.custom-amount-wrapper:focus-within {
  border-color: #c79624;
  box-shadow: 0 0 0 3px rgba(199, 150, 36, 0.15);
}

.currency-addon {
  padding: 12px 16px;
  background: #f1f5f9;
  border-right: 1px solid #cbd5e1;
  font-weight: 800;
  color: #475569;
  font-size: 0.95rem;
}

.custom-amount-input {
  flex: 1;
  border: none !important;
  outline: none !important;
  padding: 12px 14px !important;
  font-weight: 800 !important;
  font-size: 1rem !important;
  color: #0f172a !important;
  background: transparent !important;
  box-shadow: none !important;
}

.styled-input-field {
  width: 100%;
  min-height: 46px;
  border-radius: 10px;
  border: 1.5px solid #cbd5e1;
  background: #ffffff;
  padding: 10px 14px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #0f172a;
  transition: all 0.2s;
}
.styled-input-field:focus {
  border-color: #c79624;
  box-shadow: 0 0 0 3px rgba(199, 150, 36, 0.15);
}

.donation-submit-btn {
  width: 100%;
  padding: 14px 20px;
  border-radius: 12px;
  background: linear-gradient(135deg, #c79624 0%, #a3781b 100%);
  color: #ffffff;
  font-weight: 800;
  font-size: 1rem;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 8px 20px rgba(199, 150, 36, 0.3);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.donation-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(199, 150, 36, 0.4);
}

.donation-submit-btn:active {
  transform: translateY(0);
}

.policy-link:hover,
.policy-link.active {
  background: var(--gold);
  color: #000;
  border-color: var(--gold);
}

@media (max-width: 968px) {
  .foundation-hero-grid,
  .donate-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

@media (max-width: 768px) {
  .hero-action-buttons-grid,
  .explainer-steps-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ==========================================================================
   Restructured Single Church Profile Page Styles (2-Column Grid + Tabs)
   ========================================================================== */

.church-profile-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.85fr) minmax(320px, 1.15fr);
  gap: 32px;
  align-items: start;
  margin-top: 36px;
  margin-bottom: 60px;
}

.church-profile-tabs-wrapper {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

.church-tabs-nav {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  gap: 12px;
  padding: 0 0 24px 0;
  background: transparent;
  border-bottom: none;
  flex-wrap: wrap;
}

.church-tabs-nav::-webkit-scrollbar {
  display: none;
}

.church-tab-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 120px;
  max-width: 120px;
  min-height: 84px;
  padding: 12px 6px;
  border-radius: 16px;
  border: 1.5px solid rgba(226, 232, 240, 0.8);
  background: #ffffff;
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  line-height: 1.25;
  word-break: break-word;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.church-tab-button svg,
.church-tab-button i {
  width: 26px;
  height: 26px;
  color: #64748b;
  transition: all 0.2s ease;
}

.church-tab-button:hover {
  color: #0f172a;
  background: #ffffff;
  border-color: rgba(176, 129, 26, 0.3);
  transform: translateY(-2px);
}

.church-tab-button:hover svg,
.church-tab-button:hover i {
  color: #b0811a;
}

.church-tab-button.active {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: #b0811a !important;
  box-shadow: 0 6px 16px rgba(176, 129, 26, 0.18) !important;
}

.church-tab-button.active svg,
.church-tab-button.active i {
  color: #b0811a !important;
}

.church-tab-pane {
  display: none;
  padding: 0;
}

.church-tab-pane.active {
  display: block;
}

.church-sidebar-stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: sticky;
  top: 90px;
}

.sticky-connection-card {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 28px;
  box-shadow: var(--shadow);
}

.church-quick-contact-card {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 24px;
  box-shadow: var(--shadow);
}

@media (max-width: 992px) {
  .church-profile-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .church-sidebar-stack {
    position: static;
  }
}

/* ==========================================================================
   New Card Designs (Immersive Overlay for Directory & Split Banner for Related)
   ========================================================================== */

/* Design #1: Immersive Full-Bleed Overlay Card (Main Directory Page) */
.church-card-immersive {
  position: relative;
  height: 440px;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  background-size: cover;
  background-position: center;
}

.church-card-immersive:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.22);
}

.church-card-immersive-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.15) 45%, rgba(0, 0, 0, 0.85) 100%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px;
}

.church-card-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.immersive-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(12px);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  color: #0f172a;
}


.church-card-bottom-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.immersive-card-title {
  font-size: 1.45rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
  line-height: 1.2;
}

.immersive-card-subtitle {
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.82);
  margin: 0;
}

.immersive-card-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.75);
  margin-top: 4px;
  margin-bottom: 14px;
}

.immersive-pill-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px 20px;
  border-radius: 999px;
  background: var(--primary-gradient) !important;
  color: #ffffff !important;
  font-size: 0.88rem;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2), 0 0 16px hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.35);
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.immersive-pill-btn:hover {
  background: var(--primary-hover) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.45);
}

/* Design #2: Clean Split Banner Card (Related Churches on Single Profile Page) */
.church-card-split {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.church-card-split:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.12);
}

.church-card-split-media {
  height: 200px;
  background-size: cover;
  background-position: center;
  position: relative;
  padding: 16px;
}

.church-card-split-body {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.split-card-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
  line-height: 1.25;
}

.split-card-subtitle {
  font-size: 0.82rem;
  font-weight: 600;
  color: #64748b;
  margin: 0;
}

.split-card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: #64748b;
  margin-top: 4px;
  margin-bottom: 16px;
  width: 100%;
  overflow: hidden;
}

.split-card-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.split-card-meta span svg,
.split-card-meta span i {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}

.split-card-action-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  margin-top: 10px !important;
}

.split-dark-pill-btn {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  height: 42px !important;
  padding: 0 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 6px !important;
  border-radius: 999px !important;
  background: var(--primary-gradient) !important;
  color: #ffffff !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  line-height: 1 !important;
  text-decoration: none !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16) !important;
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease !important;
}

.split-dark-pill-btn:hover {
  background: var(--primary-hover) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.35) !important;
}


/* ==========================================================================
   New Modern Event Card Design (Matching Mockup: 4-Corner Rounded Media + 2-Col Date)
   ========================================================================== */

.event-card-modern {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: 16px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
}

.event-card-modern:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
}

.event-card-banner-wrap {
  width: 100%;
  height: 210px;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  background: #0f172a;
}

.event-card-banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.event-card-modern:hover .event-card-banner-img {
  transform: scale(1.04);
}

.event-card-top-badge {
  position: absolute;
  top: 15px;
  left: 15px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  color: #0f172a;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

.event-card-bottom-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-top: 18px;
  padding: 0 6px 6px;
}

.event-date-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  text-align: center;
}

.event-date-month {
  font-size: 0.85rem;
  font-weight: 900;
  color: #047857;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1;
}

.event-date-num {
  font-size: 1.9rem;
  font-weight: 900;
  color: #0f172a;
  line-height: 1;
  margin-top: 4px;
}

.event-price-tag-sub {
  font-size: 0.68rem;
  font-weight: 800;
  color: #047857;
  background: #ecfdf5;
  padding: 2px 7px;
  border-radius: 6px;
  margin-top: 6px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.event-date-divider {
  width: 1px;
  height: 54px;
  background: rgba(226, 232, 240, 0.9);
  margin-top: 2px;
}

.event-details-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.event-location-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.76rem;
  font-weight: 700;
  color: #64748b;
}

.event-card-title-new {
  font-size: 1.15rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.event-card-desc {
  font-size: 0.78rem;
  color: #64748b;
  margin: 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ==========================================================================
   16:9 Livestream Card Design with Endless Glowing Red Border & Top-Right Play
   ========================================================================== */

@keyframes liveGlowPulse {
  0% {
    box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.35), 0 4px 14px rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.45);
  }
  50% {
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.55), 0 6px 20px rgba(239, 68, 68, 0.3);
    border-color: rgba(239, 68, 68, 0.75);
  }
  100% {
    box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.35), 0 4px 14px rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.45);
  }
}

.livestream-card-16-9 {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  min-width: 0;
  border-radius: 24px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.1);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px;
  text-decoration: none !important;
  color: #ffffff !important;
  box-sizing: border-box;
  background-color: #0f172a;
}

.livestream-card-16-9:hover {
  transform: translateY(-4px);
}

.livestream-card-16-9.is-live {
  animation: liveGlowPulse 2.5s infinite ease-in-out;
  border: 1px solid rgba(239, 68, 68, 0.5);
}

.livestream-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.25) 0%, rgba(15, 23, 42, 0.4) 40%, rgba(15, 23, 42, 0.92) 100%);
  z-index: 1;
}

.livestream-card-top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.livestream-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #dc2626;
  color: #ffffff;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.4);
}

.live-pulse-dot {
  width: 7px;
  height: 7px;
  background: #ffffff;
  border-radius: 50%;
  animation: pulse-red-live 1.5s infinite ease-in-out;
}

.livestream-play-btn {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #ef4444;
  color: #ffffff;
  border: none;
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.45);
  transition: transform 0.2s ease, background 0.2s ease;
  cursor: pointer;
  margin-left: auto;
}

.livestream-card-16-9:hover .livestream-play-btn {
  transform: scale(1.12);
  background: #dc2626;
}

.livestream-card-bottom {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.livestream-card-title {
  font-size: 1.22rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.livestream-card-desc {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.livestream-viewers-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.74rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.75);
  margin-top: 2px;
}

/* ==========================================================================
   Featured Event Cards: Full Media Banner Cover + Dark Base + White Outer Card Frame
   ========================================================================== */

.event-card-banner-wrap.is-featured-banner {
  height: 320px;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 18px;
  box-sizing: border-box;
}

.event-card-featured-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.15) 0%, rgba(15, 23, 42, 0.45) 45%, rgba(15, 23, 42, 0.95) 100%);
  z-index: 1;
}

.event-card-top-row-featured {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
}

.is-featured-banner .event-card-bottom-row {
  position: relative;
  z-index: 2;
  margin-top: auto !important;
  padding: 0;
}

/* Bright Font Colors for Overlaying Dark Base */
.is-featured-banner .event-date-month {
  color: #34d399 !important; /* Vibrant bright emerald */
}

.is-featured-banner .event-date-num {
  color: #ffffff !important; /* Bright crisp white */
}

.is-featured-banner .event-price-tag-sub {
  background: rgba(52, 211, 153, 0.2) !important;
  color: #6ee7b7 !important;
  border: 1px solid rgba(52, 211, 153, 0.4);
}

.is-featured-banner .event-date-divider {
  background: rgba(255, 255, 255, 0.25) !important;
}

.is-featured-banner .event-location-pill {
  color: rgba(255, 255, 255, 0.85) !important;
}

.is-featured-banner .event-card-title-new {
  color: #ffffff !important;
}

.is-featured-banner .event-card-desc {
  color: rgba(255, 255, 255, 0.82) !important;
}

.event-price-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.74rem;
  font-weight: 800;
  color: #047857;
  margin-top: 4px;
}

/* Featured Events Grid: Strict 2 Columns Layout */
#featured-events-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}

@media (max-width: 768px) {
  #featured-events-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Simple Unified 1-Row Church Directory Search & Filter Bar
   ========================================================================== */

.simple-directory-search-card {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 14px 18px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
  margin-bottom: 36px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.search-input-box-main {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  min-width: 240px;
}

.search-input-box-main .search-icon {
  position: absolute;
  left: 16px;
  width: 18px;
  height: 18px;
  color: #94a3b8;
  pointer-events: none;
}

.search-input-box-main .search-input {
  width: 100%;
  height: 46px;
  padding: 0 16px 0 46px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #f8fafc;
  font-size: 0.9rem;
  color: #0f172a;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}

.search-input-box-main .search-input:focus {
  border-color: var(--color-primary-gold);
  background: #ffffff;
}

.simple-filter-box {
  position: relative;
  display: flex;
  align-items: center;
  width: 210px;
  flex-shrink: 0;
}

.simple-filter-box .filter-icon {
  position: absolute;
  left: 14px;
  width: 15px;
  height: 15px;
  color: var(--color-primary-gold);
  pointer-events: none;
}

.simple-select {
  width: 100%;
  height: 46px;
  padding: 0 34px 0 36px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #f8fafc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23d97706' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 12px center;
  font-size: 0.85rem;
  font-weight: 700;
  color: #1e293b;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  outline: none;
  transition: border-color 0.2s, background-color 0.2s;
}

.simple-select:hover,
.simple-select:focus {
  border-color: var(--color-primary-gold);
  background-color: #ffffff;
}

.reset-simple-btn {
  height: 46px;
  padding: 0 16px;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .simple-directory-search-card {
    flex-wrap: wrap;
  }
  .search-input-box-main {
    width: 100%;
    flex: 1 0 100%;
  }
  .simple-filter-box {
    flex: 1 1 calc(50% - 12px);
    width: auto;
  }
}

@media (max-width: 600px) {
  .simple-filter-box {
    flex: 1 0 100%;
  }
  .reset-simple-btn {
    width: 100%;
  }
}

/* Related Fellowships & Churches Grid: Strict 3 Columns Layout */
#related-churches-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

@media (max-width: 992px) {
  #related-churches-container {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 640px) {
  #related-churches-container {
    grid-template-columns: 1fr !important;
  }
}

/* Church Profile Upcoming Events Grid */
#church-events-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

@media (max-width: 768px) {
  #church-events-container {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Modern Theme-Styled Pill Filter System (Platform Amber/Gold Theme)
   ========================================================================== */

.pill-filter-bar-container {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.pill-search-input-wrapper {
  position: relative;
  flex: 1 1 320px;
  display: flex;
  align-items: center;
}

.pill-search-input-wrapper .search-hero-icon {
  position: absolute;
  left: 16px;
  width: 18px;
  height: 18px;
  color: #94a3b8;
  pointer-events: none;
}

.pill-search-input-wrapper .search-hero-input {
  width: 100%;
  height: 44px;
  padding: 0 16px 0 46px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #ffffff;
  font-size: 0.9rem;
  color: #0f172a;
  outline: none;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.pill-search-input-wrapper .search-hero-input:focus {
  border-color: var(--color-primary-gold);
  box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.18);
}

.filter-pills-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.custom-pill-filter {
  position: relative;
  display: inline-block;
}

.filter-pill-btn {
  height: 42px;
  padding: 0 16px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #f8fafc;
  color: #1e293b;
  font-size: 0.88rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  outline: none;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.03);
}

.filter-pill-btn:hover {
  background: #ffffff;
  border-color: var(--color-primary-gold);
}

/* Active Theme Gold Pill State (Matching User's Swatch Color #b0811a!) */
.custom-pill-filter.is-active .filter-pill-btn {
  background: #b0811a !important;
  border-color: #b0811a !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(176, 129, 26, 0.35) !important;
}

.custom-pill-filter.is-active .pill-title {
  color: #ffffff !important;
}

.custom-pill-filter.is-active .pill-arrow {
  color: #ffffff !important;
}

.pill-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: #ffffff;
  color: var(--color-primary-gold-dark);
  font-size: 0.75rem;
  font-weight: 800;
}

.pill-arrow {
  width: 16px;
  height: 16px;
  color: #64748b;
  transition: transform 0.2s ease;
}

.custom-pill-filter.open .pill-arrow {
  transform: rotate(180deg);
}

/* Dropdown Popup Card Panel */
.filter-dropdown-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 240px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 18px;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.14);
  padding: 16px;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.custom-pill-filter.open .filter-dropdown-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-panel-title {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 12px;
}

.dropdown-options-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 260px;
  overflow-y: auto;
}

/* Custom Rounded Checkbox Row (Platform Amber Theme) */
.custom-checkbox-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease;
}

.custom-checkbox-row:hover {
  background: #f8fafc;
}

.custom-checkbox-row input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.checkbox-box {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  border: 2px solid #cbd5e1;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.18s ease;
  flex-shrink: 0;
}

.checkbox-box svg {
  width: 14px;
  height: 14px;
  color: #ffffff;
  opacity: 0;
  transform: scale(0.5);
  transition: all 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.custom-checkbox-row input:checked + .checkbox-box {
  background: var(--color-primary-gold);
  border-color: var(--color-primary-gold);
}

.custom-checkbox-row input:checked + .checkbox-box svg {
  opacity: 1;
  transform: scale(1);
}

.checkbox-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: #0f172a;
}

.filter-pill-reset-btn {
  height: 42px;
  padding: 0 16px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #ffffff;
  color: #64748b;
  font-size: 0.85rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  outline: none;
  transition: all 0.2s ease;
}

.filter-pill-reset-btn:hover {
  background: #f1f5f9;
  color: #0f172a;
}

/* ==========================================================================
   Masterful Hero Background Carousel & Platform Donation System
   ========================================================================== */

.donate-hero-slider {
  position: relative;
  width: 100%;
  min-height: 520px;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.15);
  margin-bottom: 36px;
}

.donate-slide-item {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
  transform: scale(1.04);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
}

.donate-slide-item.active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

.donate-slide-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.88) 0%, rgba(15, 23, 42, 0.65) 50%, rgba(15, 23, 42, 0.45) 100%);
}

.donate-slide-content {
  position: relative;
  z-index: 10;
  max-width: 740px;
  padding: 60px 48px;
  color: #ffffff;
}

.donate-slide-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 999px;
  background: rgba(176, 129, 26, 0.3);
  border: 1px solid rgba(176, 129, 26, 0.6);
  color: #fef08a;
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 20px;
  backdrop-filter: blur(8px);
}

.donate-slide-title {
  font-size: clamp(2.2rem, 4.2vw, 3.4rem);
  font-weight: 900;
  line-height: 1.15;
  color: #ffffff;
  margin-bottom: 18px;
  text-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

.donate-slide-subtitle {
  font-size: 1.1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 28px;
}

/* Slider Controls */
.donate-slider-controls {
  position: absolute;
  bottom: 24px;
  right: 32px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 16px;
}

.slider-indicator-pills {
  display: flex;
  align-items: center;
  gap: 8px;
}

.slider-pill-dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.4);
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.slider-pill-dot.active {
  width: 36px;
  background: #b0811a;
}

.slider-arrow-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: all 0.2s ease;
}

.slider-arrow-btn:hover {
  background: rgba(255, 255, 255, 0.4);
  transform: scale(1.08);
}

/* Explicit Platform Designation Banner */
.platform-destination-banner {
  background: linear-gradient(135deg, rgba(176, 129, 26, 0.08) 0%, rgba(15, 23, 42, 0.04) 100%);
  border: 1.5px solid rgba(176, 129, 26, 0.3);
  border-radius: 20px;
  padding: 20px 24px;
  margin-bottom: 36px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.03);
}

.platform-destination-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: #b0811a;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(176, 129, 26, 0.3);
}

.platform-destination-text h4 {
  font-size: 1.05rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 4px;
}

.platform-destination-text p {
  font-size: 0.9rem;
  color: #475569;
  line-height: 1.55;
  margin: 0;
}

/* ==========================================================================
   Masterpiece Modern UI Page Layout for donate.html
   ========================================================================== */

.master-giving-section {
  padding: 40px 0 80px 0;
}

.master-giving-grid {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 36px;
  align-items: start;
}

.master-giving-card {
  background: #ffffff;
  border-radius: 28px;
  padding: 40px;
  border: 1px solid rgba(15, 23, 42, 0.07);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.08);
}

.master-giving-header {
  margin-bottom: 28px;
}

.master-giving-header h2 {
  font-size: 1.8rem;
  font-weight: 900;
  color: #0f172a;
  margin-bottom: 6px;
}

.master-giving-header p {
  font-size: 0.95rem;
  color: #64748b;
  margin: 0;
}

/* Frequency Selector */
.master-freq-switcher {
  display: flex;
  background: #f1f5f9;
  padding: 4px;
  border-radius: 16px;
  margin-bottom: 24px;
}

.master-freq-btn {
  flex: 1;
  height: 44px;
  border: none;
  background: transparent;
  color: #64748b;
  font-size: 0.9rem;
  font-weight: 700;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.25s ease;
}

.master-freq-btn.active {
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

/* Amount Pills Grid */
.master-amount-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.master-amount-pill {
  height: 52px;
  border-radius: 14px;
  border: 1.5px solid var(--line);
  background: #f8fafc;
  color: #0f172a;
  font-size: 1.1rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
}

.master-amount-pill:hover {
  border-color: #b0811a;
  background: #ffffff;
}

.master-amount-pill.active {
  background: #b0811a !important;
  border-color: #b0811a !important;
  color: #ffffff !important;
  box-shadow: 0 6px 18px rgba(176, 129, 26, 0.35) !important;
}

.master-custom-amount-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.master-custom-amount-wrap .currency {
  position: absolute;
  left: 18px;
  font-size: 1.1rem;
  font-weight: 800;
  color: #b0811a;
}

.master-custom-amount-input {
  width: 100%;
  height: 48px;
  padding: 0 16px 0 38px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #f8fafc;
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f172a;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.master-custom-amount-input:focus {
  border-color: #b0811a;
  box-shadow: 0 0 0 3px rgba(176, 129, 26, 0.18);
  background: #ffffff;
}

/* Payment Method Switcher */
.master-pay-method-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 10px;
}

.master-pay-radio {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  border-radius: 12px;
  border: 1.5px solid var(--line);
  background: #f8fafc;
  color: #475569;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.master-pay-radio.active {
  border-color: #b0811a;
  background: rgba(176, 129, 26, 0.08);
  color: #b0811a;
}

/* Right Column: Dashboard Stack */
.master-dashboard-stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.master-kpi-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 24px;
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
  display: flex;
  align-items: center;
  gap: 18px;
}

.master-kpi-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: rgba(176, 129, 26, 0.12);
  color: #b0811a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}

.master-kpi-info strong {
  display: block;
  font-size: 1.6rem;
  font-weight: 900;
  color: #0f172a;
  line-height: 1.1;
}

.master-kpi-info span {
  font-size: 0.85rem;
  color: #64748b;
  font-weight: 600;
}

/* Impact Pillars Section */
.master-impact-section {
  padding: 80px 0;
  background: #f8fafc;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.master-pillar-card {
  background: #ffffff;
  border-radius: 24px;
  padding: 32px;
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.master-pillar-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.1);
  border-color: rgba(176, 129, 26, 0.3);
}

.master-pillar-icon-badge {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(176, 129, 26, 0.12);
  color: #b0811a;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.master-pillar-card h3 {
  font-size: 1.25rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 10px;
}

.master-pillar-card p {
  font-size: 0.9rem;
  color: #64748b;
  line-height: 1.6;
  margin: 0;
}

/* Masterpiece Dark Banner */
.master-dark-banner {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  border-radius: 32px;
  padding: 56px 48px;
  color: #ffffff;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.2);
}

.master-dark-banner h2 {
  font-size: 2rem;
  font-weight: 900;
  color: #ffffff;
  margin-bottom: 14px;
}

.master-dark-banner p {
  font-size: 1.05rem;
  color: #94a3b8;
  line-height: 1.65;
}

@media (max-width: 992px) {
  .master-giving-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Church Profile Lightbox Popup Video Modal & Hero Play Button Card
   ========================================================================== */

.hero-standalone-play-btn {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: transparent;
  border: none;
  padding: 20px;
  cursor: pointer;
  outline: none;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-standalone-play-btn:hover {
  transform: scale(1.08);
}

.play-btn-circle-standalone {
  position: relative;
  z-index: 2;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: #b0811a;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 40px rgba(176, 129, 26, 0.55), 0 0 0 10px rgba(176, 129, 26, 0.15);
  transition: all 0.3s ease;
}

.hero-standalone-play-btn:hover .play-btn-circle-standalone {
  background: #c79624;
  box-shadow: 0 18px 50px rgba(176, 129, 26, 0.75), 0 0 0 14px rgba(176, 129, 26, 0.25);
}

.play-btn-pulse-ring {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 2.5px solid rgba(176, 129, 26, 0.7);
  animation: standalonePlayPulse 2.2s infinite;
  z-index: 1;
}

@keyframes standalonePlayPulse {
  0% { transform: translateX(-50%) scale(0.9); opacity: 0.9; }
  100% { transform: translateX(-50%) scale(1.75); opacity: 0; }
}

.play-btn-label {
  position: relative;
  z-index: 2;
  font-size: 0.92rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(8px);
  padding: 7px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.2s ease;
}

.hero-standalone-play-btn:hover .play-btn-label {
  background: rgba(15, 23, 42, 0.8);
  border-color: rgba(176, 129, 26, 0.6);
}

/* Transparent Dark Blur Lightbox Video Modal Backdrop (No Gradient, Same Page Background) */
.church-video-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s ease;
}

.church-video-modal-backdrop.open {
  opacity: 1;
  visibility: visible;
}

.church-video-modal-card {
  width: min(920px, 94vw);
  background: #0f172a;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  transform: scale(0.94);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.church-video-modal-backdrop.open .church-video-modal-card {
  transform: scale(1);
}

.video-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  background: rgba(30, 41, 59, 0.8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.video-modal-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
  font-weight: 800;
  color: #ffffff;
}

.video-modal-close-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.video-modal-close-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: scale(1.08);
}

.video-modal-player-wrap {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  background: #000000;
}

.video-modal-player-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ==========================================================================
   Modernized Weekly Gathering Times Cards & Calendar Download UX
   ========================================================================== */

.gathering-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 22px;
}

@media (max-width: 768px) {
  .gathering-card-grid {
    grid-template-columns: 1fr !important;
    gap: 18px;
  }
}

.gathering-modern-card {
  position: relative;
  background: var(--surface, #ffffff);
  border-radius: 20px;
  border: 1px solid var(--border, rgba(226, 232, 240, 0.9));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.gathering-modern-card:hover {
  transform: translateY(-4px);
  border-color: var(--primary-border, rgba(236, 72, 153, 0.4));
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08);
}

.gathering-thumb-wrap {
  width: 100%;
  height: 180px;
  overflow: hidden;
  position: relative;
  background: var(--surface-soft, #f1f5f9);
}

.gathering-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.gathering-modern-card:hover .gathering-thumb {
  transform: scale(1.03);
}

.gathering-card-body {
  padding: 20px 22px 14px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.gathering-title-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}

.gathering-title {
  font-size: 1.05rem;
  font-weight: 850;
  color: var(--text-primary, #0f172a);
  margin: 0;
  line-height: 1.35;
}

.gathering-thumb-wrap .gathering-time-pill {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  transition: all 0.2s ease;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #15803d;
  border: 1px solid rgba(255, 255, 255, 0.8);
}

.gathering-thumb-wrap .gathering-time-pill svg,
.gathering-thumb-wrap .gathering-time-pill i {
  width: 12px;
  height: 12px;
  color: #16a34a;
}

.gathering-desc {
  font-size: 0.84rem;
  color: var(--text-secondary, #64748b);
  line-height: 1.55;
  margin: 0 0 16px 0;
}

.gathering-card-footer {
  padding: 0 22px 22px;
  margin-top: auto;
}

.gathering-cal-btn {
  width: 100%;
  height: 42px;
  border-radius: 12px;
  border: 1.5px solid var(--primary-border, rgba(236, 72, 153, 0.3));
  background: var(--primary-surface, rgba(236, 72, 153, 0.06));
  color: var(--primary, #db2777);
  font-size: 0.82rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.gathering-cal-btn svg,
.gathering-cal-btn i {
  width: 15px;
  height: 15px;
  color: var(--primary, #db2777);
}

.gathering-cal-btn:hover {
  background: var(--primary, #db2777);
  color: #ffffff;
  border-color: var(--primary, #db2777);
  box-shadow: 0 4px 14px var(--primary-glow, rgba(236, 72, 153, 0.3));
  transform: translateY(-1px);
}

.gathering-cal-btn:hover svg,
.gathering-cal-btn:hover i {
  color: #ffffff;
}

.gathering-cal-btn:hover {
  background: #b0811a;
  border-color: #b0811a;
  color: #ffffff;
  box-shadow: 0 6px 16px rgba(176, 129, 26, 0.3);
  transform: translateY(-1px);
}

/* ==========================================================================
   UNIFIED MEMBER APP SHELL & PROFILE CLASSES (DYNAMIC WITH VAR(--PRIMARY) & VAR(--GOLD))
   ========================================================================== */

body.member-app-shell {
  min-height: 100vh;
  margin: 0;
  overflow: hidden;
  background-color: var(--background);
  background-image: var(--ambient-bg);
  color: var(--text-primary);
  font-family: 'Inter', system-ui, sans-serif;
}

.member-app-shell .member-shell-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: grid;
  grid-template-columns: 240px minmax(260px, 1fr) minmax(280px, 1.4fr) auto;
  align-items: center;
  min-height: 76px;
  padding: 0 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.member-app-shell .profile-app-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-primary);
  font-size: 1.18rem;
  font-weight: 900;
  text-decoration: none;
}

.member-app-shell .profile-app-brand-mark {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 10px;
  color: #ffffff;
  background: var(--primary-gradient);
  box-shadow: var(--primary-glow);
}

.member-app-shell .profile-app-church {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 12px;
  background: var(--surface-soft);
  border: 1px solid var(--border);
}

.member-app-shell .profile-app-church img {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  object-fit: cover;
}

.member-app-shell .profile-app-church strong {
  display: block;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--text-primary);
}

.member-app-shell .profile-app-church small {
  display: block;
  font-size: 0.68rem;
  color: var(--text-muted);
}

.member-app-shell .profile-app-church svg {
  width: 16px;
  height: 16px;
  color: var(--gold);
  fill: var(--gold);
}

.member-app-shell .profile-app-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
}

.member-app-shell .profile-app-search:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

.member-app-shell .profile-app-search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-size: 0.84rem;
}

.member-shell-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Dedicated Gold Standard Giving Button */
.member-header-giving {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 11px;
  border: 0;
  color: #ffffff !important;
  background: var(--gold-gradient) !important;
  box-shadow: var(--gold-glow) !important;
  font-size: 0.78rem;
  font-weight: 850;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.member-header-giving:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(var(--gold-rgb), 0.45) !important;
}

.member-header-giving svg {
  width: 16px;
  height: 16px;
}

.member-notification-icon {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 11px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  cursor: pointer;
}

.member-notification-icon:hover {
  color: var(--primary);
  border-color: var(--primary-border);
}

.profile-app-account {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 10px 4px 4px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-primary);
  cursor: pointer;
}

.profile-app-account img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.topbar .nav-links .drawer-nav-icon {
  display: none !important;
}

.member-account-avatar {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: .72rem !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  text-align: center;
  letter-spacing: .02em;
}

.member-account-avatar > img,
.member-account-avatar > [data-member-avatar-initials] {
  grid-area: 1 / 1;
}

.member-account-avatar > [data-member-avatar-initials] {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  margin: 0 !important;
  color: #ffffff !important;
  line-height: 1 !important;
  text-align: center;
}

.member-account-avatar > img {
  display: block;
}

.member-account-avatar > img[hidden],
.member-account-avatar > [data-member-avatar-initials][hidden] {
  display: none !important;
}

.profile-app-account .member-account-identity strong,
.profile-app-account .member-account-identity small {
  font-size: 0.78rem;
  font-weight: 750;
}

.profile-app-account svg {
  width: 14px;
  color: var(--text-muted);
}

/* Left Navigation Rail */
.member-app-shell .member-shell-rail {
  position: fixed;
  top: 76px;
  left: 0;
  bottom: 0;
  width: 240px;
  padding: 20px 14px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow-y: auto;
}

.profile-rail-nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.profile-rail-nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 11px;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 750;
  transition: all 0.16s ease;
}

.profile-rail-nav a svg {
  width: 18px;
  height: 18px;
  color: var(--text-muted);
  transition: color 0.16s ease;
}

.profile-rail-nav a:hover {
  color: var(--primary);
  background: var(--primary-surface);
}

.profile-rail-nav a:hover svg {
  color: var(--primary);
}

.profile-rail-nav a.active {
  color: var(--primary) !important;
  background: var(--primary-surface) !important;
  border-left: 3px solid var(--primary);
  font-weight: 850;
}

.profile-rail-nav a.active svg {
  color: var(--primary) !important;
}

/* Main Frame Container */
.member-shell-main {
  position: fixed;
  top: 76px;
  left: 240px;
  right: 0;
  bottom: 0;
  overflow: hidden;
  background-color: var(--background);
  background-image: var(--ambient-bg);
}

.member-shell-frame {
  width: 100%;
  height: 100%;
  border: 0;
  opacity: 0;
  transition: opacity 0.18s ease;
}

.member-shell-frame.is-ready {
  opacity: 1;
}

.member-shell-loading {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  color: var(--text-muted);
  background: var(--background);
  transition: opacity 120ms ease, visibility 120ms ease;
}

.member-shell-loading.is-hidden { visibility: hidden; opacity: 0; }
.member-shell-loading span {
  width: 38px;
  height: 38px;
  border: 3px solid hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.16);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: member-shell-spin 700ms linear infinite;
}
.member-shell-loading p { margin: 0; font-size: 0.82rem; font-weight: 700; }
@keyframes member-shell-spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   CHURCH PROFILE & DASHBOARD COMPONENTS (FULLY WIRED TO VAR(--PRIMARY) & VAR(--GOLD))
   ========================================================================== */

body[data-page="profile"] {
  background-color: var(--background);
  background-image: var(--ambient-bg);
  color: var(--text-primary);
}

body[data-page="profile"] .church-tab-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 18px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 750;
  cursor: pointer;
  transition: all 0.16s ease;
}

body[data-page="profile"] .church-tab-button:hover {
  color: var(--primary);
  background: var(--primary-surface);
}

body[data-page="profile"] .church-tab-button.active {
  color: var(--primary) !important;
  border-bottom-color: var(--primary) !important;
  font-weight: 850;
}

body[data-page="profile"] .church-tab-button svg {
  width: 17px;
  height: 17px;
}

body[data-page="profile"] .church-tab-button.active svg {
  color: var(--primary) !important;
}

/* Play button overlay */
body[data-page="profile"] .message-card-icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #ffffff !important;
  background: var(--primary-gradient) !important;
  box-shadow: 0 10px 25px hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.45) !important;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
}

body[data-page="profile"] .message-card-icon:hover {
  transform: scale(1.10);
  box-shadow: 0 14px 32px hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.60) !important;
}

body[data-page="profile"] .leader-bio .kicker {
  align-self: flex-start;
  color: var(--primary) !important;
  background: var(--primary-surface) !important;
  border: 1px solid var(--primary-border) !important;
  font-weight: 800;
  border-radius: 999px;
  padding: 4px 10px;
}

.leader-facts svg {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  color: var(--primary) !important;
}

.leader-facts strong { color: var(--text-primary); font-size: 0.64rem; line-height: 1.2; }
.leader-facts small { color: var(--text-muted); font-size: 0.58rem; }

.profile-primary-action,
.profile-new-here {
  border: 0 !important;
  color: #ffffff !important;
  background: var(--primary-gradient) !important;
  box-shadow: var(--primary-glow) !important;
  font-weight: 800;
}

.profile-secondary-action {
  border: 1px solid var(--primary-border) !important;
  color: var(--primary) !important;
  background: var(--surface) !important;
  font-weight: 800;
}

.profile-secondary-action:hover {
  background: var(--primary-surface) !important;
}

body[data-page="profile"] .stories-heading span {
  color: var(--primary) !important;
  font-weight: 800;
}

body[data-page="profile"] .stories-heading a {
  color: var(--primary) !important;
  font-weight: 800;
}

body[data-page="profile"] .testimony-stars {
  color: var(--gold) !important;
}

body[data-page="profile"] .testimony-stars svg {
  color: var(--gold) !important;
  fill: rgba(var(--gold-rgb), 0.24) !important;
}

.profile-side-heading > span {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 50%;
  color: var(--primary) !important;
  background: var(--primary-surface) !important;
  border: 1px solid var(--primary-border) !important;
}

.profile-service-location svg {
  width: 17px;
  color: var(--primary) !important;
}

.profile-primary-action, .profile-new-here {
  border: 0 !important;
  color: #ffffff !important;
  background: var(--primary-gradient) !important;
  box-shadow: var(--primary-glow) !important;
  font-weight: 800;
}
.profile-primary-action svg, .profile-primary-action i {
  color: #ffffff !important;
}

.profile-secondary-action, .profile-ride-action {
  border: 1.5px solid var(--primary-border) !important;
  color: var(--primary) !important;
  background: var(--surface, #ffffff) !important;
  font-weight: 800;
}
.profile-secondary-action svg, .profile-secondary-action i,
.profile-ride-action svg, .profile-ride-action i {
  color: var(--primary) !important;
}
.profile-secondary-action:hover, .profile-ride-action:hover {
  background: var(--primary-surface) !important;
  border-color: var(--primary) !important;
}

.profile-calendar-action {
  display: flex;
  min-height: 42px;
  padding: 0 14px;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--primary-border) !important;
  border-radius: 9px;
  color: var(--primary) !important;
  background: var(--surface) !important;
  font-size: 0.69rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.16s ease;
}

.profile-calendar-action:hover {
  background: var(--primary-surface) !important;
}

.profile-side-link {
  display: flex;
  width: 100%;
  margin-top: 20px;
  padding: 17px 0 0;
  align-items: center;
  gap: 7px;
  border: 0;
  border-top: 1px solid var(--border);
  color: var(--primary) !important;
  background: transparent;
  font-size: 0.68rem;
  font-weight: 800;
  cursor: pointer;
}

.profile-next-step-label > svg {
  width: 18px;
  color: var(--primary) !important;
}

.profile-next-step-label span {
  margin-left: auto;
  padding: 4px 8px;
  border-radius: 999px;
  color: var(--gold-text) !important;
  background: var(--gold-surface) !important;
  border: 1px solid var(--gold-border) !important;
  font-size: 0.58rem;
  font-weight: 800;
}

.profile-next-step > button:not(.profile-new-here) {
  display: grid;
  grid-template-columns: 24px 1fr 15px;
  width: 100%;
  padding: 10px 8px;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 10px;
  color: var(--primary) !important;
  text-align: left;
  background: transparent;
  cursor: pointer;
  transition: background 0.15s ease;
}

.profile-next-step > button:not(.profile-new-here):hover {
  background: var(--primary-surface) !important;
}

.profile-next-step > button svg {
  width: 18px;
  color: var(--primary) !important;
}

.profile-next-step > button strong {
  color: var(--text-primary) !important;
  font-size: 0.72rem;
}

.profile-next-step > button small {
  color: var(--text-muted) !important;
}

body[data-page="profile"] .leadership-grid {
  display: grid;
  grid-template-columns: minmax(230px, 260px) minmax(0, 1fr);
  gap: clamp(26px, 3.5vw, 48px);
  height: clamp(380px, 30vw, 435px);
  min-height: 0;
  align-items: center;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body[data-page="profile"] .leader-photo-wrap {
  align-self: stretch;
  height: 100%;
  max-width: 260px;
  overflow: hidden;
  border-radius: 24px;
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.16);
  position: relative;
}

body[data-page="profile"] .leader-photo-wrap::after {
  position: absolute;
  inset: 48% 0 0;
  z-index: 1;
  background: linear-gradient(180deg, transparent, rgba(4, 10, 28, 0.72));
  content: "";
  pointer-events: none;
}

body[data-page="profile"] .leader-photo {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: center 24%;
  border-radius: 24px;
}

body[data-page="profile"] .message-card {
  position: absolute;
  bottom: 14px;
  left: 14px;
  z-index: 3;
  width: max-content;
  max-width: calc(100% - 28px);
  padding: 0;
  border: 0;
  color: #ffffff;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
}

body[data-page="profile"] .leader-bio { display: flex; padding: 18px 0; flex-direction: column; justify-content: center; background: transparent; }
body[data-page="profile"] .leader-bio h2.leader-name { max-width: none; margin-bottom: 18px; color: var(--text-primary); font-size: clamp(2.35rem, 3.3vw, 3.4rem); font-weight: 800; }
body[data-page="profile"] .leader-bio-text { color: var(--text-secondary); font-size: 0.93rem; line-height: 1.65; }

.leader-facts { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0; margin-top: 28px; }
.leader-facts > div { display: flex; align-items: flex-start; gap: 8px; min-width: 0; padding: 0 10px; border-right: 1px solid var(--border); }
.leader-facts > div:first-child { padding-left: 0; }
.leader-facts > div:last-child { padding-right: 0; border-right: 0; }

.leader-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 25px; max-width: 440px; }
.leader-actions button, .profile-new-here { display: flex; min-height: 46px; align-items: center; justify-content: center; gap: 8px; border-radius: 12px; font-size: 0.76rem; font-weight: 800; cursor: pointer; transition: all 0.2s ease; }
.leader-actions svg { width: 17px; }

.btn-more-stories {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--primary) !important;
  font-weight: 800;
  font-size: 0.78rem;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px 6px;
  transition: transform 0.2s ease;
}
.btn-more-stories:hover {
  transform: translateX(3px);
}
.btn-more-stories svg {
  width: 14px;
}

.btn-share-story {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-primary);
  font-weight: 750;
  font-size: 0.78rem;
  background: var(--surface-card, #ffffff);
  border: 1px solid var(--border, #cbd5e1);
  border-radius: 9999px;
  cursor: pointer;
  padding: 6px 14px;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.btn-share-story:hover {
  border-color: var(--primary, #db2777);
  color: var(--primary, #db2777);
  transform: translateY(-1px);
}
.btn-share-story svg {
  width: 14px;
  height: 14px;
}
.testimony-empty-card {
  transition: all 0.2s ease;
}

body[data-page="profile"] .stories-section { padding: 20px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface-card); }
body[data-page="profile"] .stories-heading { display: grid; grid-template-columns: 1fr auto; margin-bottom: 15px; }
body[data-page="profile"] .stories-heading h3 { color: var(--text-primary); font-size: 1.35rem; }
body[data-page="profile"] .testimonials-grid { display: grid; gap: 14px; }
body[data-page="profile"] .testimony-card.glass-card { display: grid; grid-template-columns: 132px minmax(0,1fr); min-height: 210px; padding: 10px; border-radius: 14px; box-shadow: none; border: 1px solid var(--border); background: var(--surface-card); }
body[data-page="profile"] .testimony-scene { width: 100%; height: 100%; min-height: 188px; object-fit: cover; border-radius: 10px; }
body[data-page="profile"] .testimony-content { display: flex; min-width: 0; padding: 8px 10px 4px 14px; flex-direction: column; }
body[data-page="profile"] .testimony-text { margin-bottom: 12px; color: var(--text-secondary); font-size: 0.71rem; line-height: 1.55; }
body[data-page="profile"] .testimony-user { margin-top: auto; padding-top: 0; border-top: 0; display: flex; align-items: center; gap: 9px; }
body[data-page="profile"] .testimony-user-img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
body[data-page="profile"] .testimony-user-info h4 { color: var(--text-primary); font-size: 0.68rem; margin: 0; }
body[data-page="profile"] .testimony-user-info span { color: var(--text-muted); font-size: 0.59rem; }

body[data-page="profile"] .church-sidebar-stack { display: grid; gap: 20px; position: sticky; top: 105px; }
.profile-next-service, .profile-next-step { padding: 24px 22px; border: 1px solid var(--border); border-radius: 17px; background: var(--surface-card); box-shadow: var(--shadow-card); }
.profile-side-heading { display: flex; align-items: center; gap: 11px; }
.profile-side-heading h3 { color: var(--text-primary); font-size: 0.78rem; font-weight: 800; margin: 0; }
.profile-next-service > h4 { margin: 20px 0 3px; color: var(--text-primary); font-size: 1.35rem; font-weight: 800; letter-spacing: -0.035em; }
.profile-next-service > p { color: var(--text-muted); font-size: 0.74rem; }
.profile-service-location { display: flex; align-items: flex-start; gap: 10px; margin: 20px 0; }
.profile-service-location span { display: grid; }
.profile-service-location strong { color: var(--text-secondary); font-size: 0.72rem; }
.profile-service-location small { color: var(--text-muted); font-size: 0.68rem; }
.profile-next-step-label { display: flex; align-items: center; gap: 7px; color: var(--text-primary); font-size: 0.62rem; font-weight: 700; }
.profile-next-step > h4 { margin: 21px 0 4px; color: var(--text-primary); font-size: 0.95rem; font-weight: 800; }
.profile-next-step > p { margin-bottom: 14px; color: var(--text-muted); font-size: 0.7rem; line-height: 1.5; }
.profile-new-here { width: 100%; margin-top: 11px; }

/* Responsive adjustments */
@media (max-width: 1100px) {
  body[data-page="profile"] .church-details-layout { grid-template-columns: 1fr; }
  body[data-page="profile"] .church-sidebar-stack { grid-template-columns: 1fr 1fr; }
  .member-app-shell .member-shell-header { grid-template-columns: 210px minmax(230px, 0.8fr) minmax(220px, 1fr) auto; }
}

@media (max-width: 900px) {
  body[data-page="profile"] .leadership-grid { height: auto; grid-template-columns: 1fr; }
  body[data-page="profile"] .leader-photo-wrap { height: 470px; }
  body[data-page="profile"] .leader-photo { height: 100%; min-height: 470px; }
  .member-app-shell .member-shell-header { grid-template-columns: 1fr auto auto; padding: 0 16px; }
  .member-app-shell .profile-app-brand { align-self: auto; padding: 0; border: 0; }
  .member-app-shell .profile-app-church,
  .member-app-shell .profile-app-search { display: none; }
  .member-app-shell .member-shell-rail { transform: translateX(-105%); transition: transform 180ms ease; box-shadow: 24px 0 60px rgba(4, 18, 52, 0.16); }
  .member-app-shell.member-nav-open .member-shell-rail { transform: translateX(0); }
  .member-shell-main { left: 0; }
}

@media (max-width: 700px) {
  body[data-page="profile"] .landing-container { padding-inline: 14px !important; }
  body[data-page="profile"] .profile-tabs-header { grid-template-columns: 1fr; }
  body[data-page="profile"] .church-tab-button + .church-tab-button { border-top: 1px solid var(--border); border-left: 0; }
  body[data-page="profile"] .leader-photo-wrap { height: 410px; }
  body[data-page="profile"] .leader-photo { min-height: 0; }
  body[data-page="profile"] .leader-bio { padding: 26px 22px; }
  .leader-facts { grid-template-columns: 1fr 1fr; }
  .leader-actions { grid-template-columns: 1fr; }
  body[data-page="profile"] .stories-section { padding: 16px; }
  body[data-page="profile"] .stories-heading a { display: none; }
  body[data-page="profile"] .testimony-card.glass-card { grid-template-columns: 112px 1fr; }
  body[data-page="profile"] .church-sidebar-stack { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .member-app-shell .member-shell-header { min-height: 70px; }
  .member-app-shell .profile-app-brand { font-size: 1.05rem; }
  .member-app-shell .profile-app-brand-mark { width: 31px; height: 31px; }
  .member-notification-icon,
  .member-app-shell .profile-app-account > svg { display: none; }
  .member-app-shell .member-shell-rail { top: 70px; }
  .member-shell-main { top: 70px; }
}

body[data-page="home"] .tiny-church-card {
  border-color: var(--border);
  color: var(--text-primary);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  opacity: 1;
}
body[data-page="home"] .tiny-church-card:hover {
  border-color: var(--primary-border);
  background: var(--surface);
}


/* ==========================================================================
   THEME PALETTE DROPDOWN & POPOVER (MODERN FLOATING CARD)
   ========================================================================== */
.theme-palette-container {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.theme-palette-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 11px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: all 0.16s ease;
}

.theme-palette-btn:hover {
  color: var(--primary);
  border-color: var(--primary-border);
  transform: translateY(-1px);
}

.theme-palette-indicator {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: 0 0 8px currentColor;
}

.theme-palette-popover {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 100000 !important;
  width: 290px;
  padding: 18px 20px;
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: themePopoverFade 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.theme-palette-popover[hidden] {
  display: none !important;
}

@keyframes themePopoverFade {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.theme-palette-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.theme-palette-header strong {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.85rem;
  font-weight: 850;
  color: var(--text-primary);
}

.mode-toggle-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  padding: 4px;
  border-radius: 12px;
  background: var(--surface-soft);
  border: 1px solid var(--border);
}

.mode-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  border: 0;
  border-radius: 9px;
  font-family: inherit;
  font-size: 0.76rem;
  font-weight: 750;
  color: var(--text-secondary);
  background: transparent;
  cursor: pointer;
  transition: all 0.15s ease;
}

.mode-toggle-btn:hover {
  color: var(--text-primary);
}

.mode-toggle-btn.active {
  color: var(--text-primary) !important;
  background: var(--surface) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
  font-weight: 850;
}

.mode-toggle-btn svg {
  width: 15px;
  height: 15px;
}

.palette-section-title {
  font-size: 0.72rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 9px;
}

.rainbow-swatch-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
}

.swatch-btn {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 10px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.swatch-btn:hover {
  transform: scale(1.12);
}

.swatch-btn.active {
  border-color: var(--text-primary) !important;
  transform: scale(1.14);
  box-shadow: 0 0 0 3px var(--primary-soft), 0 4px 12px rgba(0, 0, 0, 0.18);
}

/* Mobile menu icon must be strictly hidden on desktop */
.profile-mobile-menu {
  display: none !important;
}

@media (max-width: 980px) {
  .profile-mobile-menu {
    display: grid !important;
    width: 40px;
    height: 40px;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text-primary);
    background: var(--surface);
    cursor: pointer;
  }
}

/* Left Rail Utility & Invite Card */
.member-app-shell .profile-rail-footer {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.profile-invite-card {
  padding: 16px;
  border-radius: 14px;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.profile-invite-card strong {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--text-primary);
}

.profile-invite-card strong svg {
  width: 15px;
  color: var(--primary);
}

.profile-invite-card p {
  margin: 0;
  font-size: 0.7rem;
  color: var(--text-muted);
  line-height: 1.45;
}

.profile-invite-card button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  margin-top: 4px;
  border-radius: 9px;
  border: 1px solid var(--primary-border);
  color: var(--primary);
  background: var(--surface);
  font-size: 0.72rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.15s ease;
}

.profile-invite-card button:hover {
  color: #ffffff;
  background: var(--primary-gradient);
  border-color: transparent;
}

.member-invite-popover {
  position: fixed;
  z-index: 100000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(7, 15, 35, .38);
  backdrop-filter: blur(3px);
}
.member-invite-popover-card {
  display: grid;
  gap: 18px;
  width: 320px;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 36px);
  overflow-y: auto;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 18px;
  color: var(--text-primary);
  background: var(--surface);
  box-shadow: 0 22px 64px rgba(12, 29, 65, .24);
}
.member-invite-popover[hidden] { display: none; }
.member-invite-popover-head { display: flex; align-items: flex-start; gap: 14px; }
.member-invite-popover-head > div { display: grid; flex: 1; gap: 4px; }
.member-invite-popover-head strong { color: var(--text-primary); font-size: 1rem; font-weight: 850; }
.member-invite-popover-head span { color: var(--text-muted); font-size: .78rem; line-height: 1.45; }
.member-invite-popover .member-invite-close { width: 34px; min-width: 34px; height: 34px; min-height: 34px; margin: -4px -4px 0 0; padding: 0; border: 1px solid var(--border); border-radius: 10px; color: var(--text-secondary); background: var(--surface-soft); }
.member-invite-close svg { width: 16px; height: 16px; }
.member-invite-share-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.member-invite-share-grid > a,
.member-invite-share-grid > button { min-width: 0; min-height: 76px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; margin: 0; padding: 10px 5px; border: 1px solid var(--border); border-radius: 13px; color: var(--text-secondary); background: var(--surface-soft); font-size: .68rem; font-weight: 750; text-align: center; text-decoration: none; cursor: pointer; transition: border-color .16s ease, color .16s ease, background .16s ease, transform .16s ease; }
.member-invite-share-grid > a:hover,
.member-invite-share-grid > button:hover { transform: translateY(-2px); border-color: var(--primary); color: var(--primary); background: var(--primary-surface); }
.member-invite-share-grid svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.member-invite-share-grid [data-share-target="facebook"] svg { fill: currentColor; stroke: none; }
.member-invite-share-grid [data-share-target="x"] svg,
.member-invite-share-grid [data-share-target="telegram"] svg { fill: currentColor; stroke: none; }
.member-invite-share-grid i { display: grid; place-items: center; }
.member-invite-share-grid i svg { width: 22px; height: 22px; }
html[data-theme="dark"] .member-invite-popover-card { border-color: var(--border-subtle); background: var(--background-secondary); }
html[data-theme="dark"] .member-invite-share-grid > a,
html[data-theme="dark"] .member-invite-share-grid > button { border-color: var(--border-subtle); background: var(--surface); }

.profile-rail-utility {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.profile-rail-utility a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 9px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.76rem;
  font-weight: 750;
  transition: all 0.15s ease;
}

.profile-rail-utility a svg {
  width: 15px;
  height: 15px;
}

.profile-rail-utility a:hover {
  color: var(--primary);
  background: var(--primary-surface);
}

/* Independent member modules: Channels, Store, Resources, Seller Dashboard   */
/* ========================================================================== */

.module-page { min-height: 100vh; color: var(--text-primary); background: var(--surface-canvas); }
.module-page main { padding-bottom: 70px; }
.module-shell { width: min(var(--max), calc(100% - 44px)); margin: 0 auto; }
.module-hero { position: relative; overflow: hidden; padding: 72px 0 36px; border-bottom: 1px solid var(--border-subtle); background: linear-gradient(145deg, rgba(246,246,254,0.96), rgba(239,246,255,0.92)); }
.module-hero::before,
.module-hero::after { position: absolute; width: 360px; height: 360px; border-radius: 50%; filter: blur(70px); content: ""; pointer-events: none; }
.module-hero::before { top: -210px; right: 8%; background: hsla(var(--primary-h), var(--primary-s), 55%, 0.18); }
.module-hero::after { bottom: -280px; left: 16%; background: rgba(var(--gold-rgb), 0.14); }
.module-hero-inner { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; }
.module-kicker { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 12px; color: var(--primary); font-size: 0.73rem; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; }
.module-kicker svg { width: 16px; }
.module-hero h1 { max-width: 720px; margin: 0; color: var(--text-primary); font-size: clamp(2.1rem, 5vw, 3.55rem); line-height: 1.02; letter-spacing: -0.055em; }
.module-hero p { max-width: 720px; margin: 16px 0 0; color: var(--text-secondary); font-size: 1rem; line-height: 1.72; }
.module-primary-action,
.module-secondary-action { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding: 0 18px; border-radius: 12px; text-decoration: none; font-size: 0.8rem; font-weight: 850; cursor: pointer; }
.module-primary-action { border: 0; color: #ffffff; background: var(--gradient-brand); box-shadow: var(--shadow-primary); }
.module-primary-action:hover { color: #ffffff; transform: translateY(-1px); }
.module-secondary-action { border: 1px solid var(--border-default); color: var(--primary); background: #ffffff; }
.module-primary-action svg,
.module-secondary-action svg { width: 18px; }
.module-content { padding: 36px 0 72px; }

.module-toolbar { display: grid; grid-template-columns: minmax(260px, 1fr) repeat(3, minmax(150px, auto)); gap: 12px; margin-bottom: 24px; padding: 14px; border: 1px solid var(--border-subtle); border-radius: 16px; background: rgba(255,255,255,0.9); box-shadow: 0 10px 28px rgba(4,18,52,0.05); }
.module-toolbar.resources-toolbar { grid-template-columns: minmax(240px, 1.4fr) repeat(5, minmax(118px, auto)); }
.module-search { display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 13px; border: 1px solid var(--border-default); border-radius: 11px; background: #ffffff; }
.module-search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(51,120,236,0.09); }
.module-search svg { width: 17px; color: var(--text-tertiary); }
.module-search input { width: 100%; border: 0; outline: 0; color: var(--text-primary); background: transparent; font: inherit; font-size: 0.8rem; }
.module-select { min-height: 44px; padding: 0 36px 0 12px; border: 1px solid var(--border-default); border-radius: 11px; color: var(--text-secondary); background: #ffffff; font: inherit; font-size: 0.78rem; font-weight: 700; }
.module-results-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 17px; }
.module-results-head h2 { margin: 0; color: var(--text-primary); font-size: 1.18rem; letter-spacing: -0.025em; }
.module-results-head span { color: var(--text-tertiary); font-size: 0.76rem; font-weight: 700; }
.module-empty { grid-column: 1 / -1; padding: 64px 24px; border: 1px dashed var(--border-default); border-radius: 18px; text-align: center; color: var(--text-secondary); background: rgba(255,255,255,0.72); }
.module-empty svg { width: 34px; height: 34px; margin-bottom: 10px; color: var(--primary); }

.channels-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.channel-card { overflow: hidden; border: 1px solid var(--border-subtle); border-radius: 18px; background: #ffffff; box-shadow: 0 12px 30px rgba(4,18,52,0.06); transition: transform 170ms ease, box-shadow 170ms ease; }
.channel-card:hover { transform: translateY(-3px); box-shadow: 0 18px 42px rgba(4,18,52,0.11); }
.channel-cover { position: relative; height: 170px; background-position: center; background-size: cover; }
.channel-cover::after { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(4,18,52,0.72)); content: ""; }
.channel-format,
.channel-live { position: absolute; z-index: 1; top: 13px; display: inline-flex; align-items: center; gap: 6px; min-height: 27px; padding: 0 9px; border-radius: 999px; color: #ffffff; font-size: 0.64rem; font-weight: 900; text-transform: uppercase; }
.channel-format { left: 13px; background: rgba(4,18,52,0.72); backdrop-filter: blur(8px); }
.channel-live { right: 13px; background: #e83d5b; }
.channel-avatar { position: absolute; z-index: 2; right: 16px; bottom: -26px; width: 58px; height: 58px; object-fit: cover; border: 4px solid #ffffff; border-radius: 16px; }
.channel-card-body { padding: 20px; }
.channel-owner { display: flex; align-items: center; gap: 5px; color: var(--primary); font-size: 0.68rem; font-weight: 800; }
.channel-owner svg { width: 14px; fill: rgba(51,120,236,0.12); }
.channel-card h3 { margin: 7px 0 5px; padding-right: 48px; color: var(--text-primary); font-size: 1.04rem; letter-spacing: -0.025em; }
.channel-handle { color: var(--text-tertiary); font-size: 0.7rem; }
.channel-card p { min-height: 62px; margin: 12px 0 16px; color: var(--text-secondary); font-size: 0.78rem; line-height: 1.55; }
.channel-meta { display: flex; gap: 14px; padding-top: 14px; border-top: 1px solid var(--border-subtle); color: var(--text-tertiary); font-size: 0.68rem; font-weight: 700; }
.channel-meta span { display: inline-flex; align-items: center; gap: 5px; }
.channel-meta svg { width: 14px; }

.module-modal { position: fixed; inset: 0; z-index: 11000; display: none; place-items: center; padding: 22px; background: rgba(4,18,52,0.64); backdrop-filter: blur(12px); }
.module-modal.is-open { display: grid; }
.module-modal-card { position: relative; width: min(100%, 560px); max-height: min(760px, calc(100vh - 44px)); overflow-y: auto; padding: 28px; border-radius: 22px; background: #ffffff; box-shadow: 0 34px 90px rgba(4,18,52,0.28); }
.module-modal-card h2 { margin: 0; font-size: 1.55rem; letter-spacing: -0.035em; }
.module-modal-card > p { margin: 8px 0 22px; color: var(--text-secondary); font-size: 0.84rem; line-height: 1.55; }
.module-modal-close { position: absolute; top: 16px; right: 16px; display: grid; width: 36px; height: 36px; place-items: center; border: 0; border-radius: 10px; color: var(--text-secondary); background: #f1f4fb; cursor: pointer; }
.module-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.module-form label { display: grid; gap: 7px; color: var(--text-primary); font-size: 0.72rem; font-weight: 800; }
.module-form label.wide { grid-column: 1 / -1; }
.module-form input,
.module-form select,
.module-form textarea { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--border-default); border-radius: 10px; outline: 0; color: var(--text-primary); background: #ffffff; font: inherit; font-size: 0.8rem; }
.module-form textarea { min-height: 90px; resize: vertical; }
.module-form input:focus,
.module-form select:focus,
.module-form textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(51,120,236,0.09); }
.module-form .module-primary-action { grid-column: 1 / -1; margin-top: 4px; }

.store-layout { display: grid; grid-template-columns: minmax(0,1fr) 278px; gap: 24px; align-items: start; }
.store-products-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 17px; }
.product-card { overflow: hidden; border: 1px solid var(--border-subtle); border-radius: 17px; background: #ffffff; box-shadow: 0 10px 28px rgba(4,18,52,0.055); }
.product-image-wrap { position: relative; overflow: hidden; aspect-ratio: 1 / 0.82; background: #eef2fb; }
.product-image { width: 100%; height: 100%; object-fit: cover; transition: transform 220ms ease; }
.product-card:hover .product-image { transform: scale(1.035); }
.product-badge { position: absolute; top: 12px; left: 12px; min-height: 25px; padding: 0 9px; border-radius: 999px; color: var(--primary); background: rgba(255,255,255,0.92); font-size: 0.62rem; font-weight: 900; line-height: 25px; }
.product-card-body { padding: 16px; }
.product-seller { color: var(--text-tertiary); font-size: 0.66rem; font-weight: 750; }
.product-card h3 { min-height: 44px; margin: 7px 0 9px; color: var(--text-primary); font-size: 0.93rem; line-height: 1.35; }
.product-rating { display: flex; align-items: center; gap: 5px; color: var(--primary); font-size: 0.68rem; font-weight: 800; }
.product-price-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.product-price { color: var(--text-primary); font-size: 1rem; font-weight: 900; }
.product-compare { margin-left: 5px; color: var(--text-tertiary); font-size: 0.68rem; text-decoration: line-through; }
.product-add { display: grid; width: 38px; height: 38px; place-items: center; border: 0; border-radius: 11px; color: #ffffff; background: var(--gradient-brand); cursor: pointer; }
.product-add svg { width: 17px; }
.store-cart-panel { position: sticky; top: 18px; overflow: hidden; border: 1px solid var(--border-subtle); border-radius: 18px; background: #ffffff; box-shadow: 0 12px 34px rgba(4,18,52,0.07); }
.store-cart-head { display: flex; align-items: center; justify-content: space-between; padding: 18px; border-bottom: 1px solid var(--border-subtle); }
.store-cart-head h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 0.94rem; }
.store-cart-head svg { width: 18px; color: var(--primary); }
.cart-count { display: grid; min-width: 25px; height: 25px; padding: 0 6px; place-items: center; border-radius: 999px; color: var(--primary); background: var(--primary-soft); font-size: 0.68rem; font-weight: 900; }
.cart-items { display: grid; max-height: 380px; overflow-y: auto; }
.cart-item { display: grid; grid-template-columns: 48px 1fr auto; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--border-subtle); }
.cart-item img { width: 48px; height: 48px; object-fit: cover; border-radius: 9px; }
.cart-item strong { display: block; color: var(--text-primary); font-size: 0.72rem; line-height: 1.35; }
.cart-item small { color: var(--text-tertiary); font-size: 0.64rem; }
.cart-remove { align-self: start; border: 0; color: #c43c57; background: transparent; cursor: pointer; }
.cart-remove svg { width: 15px; }
.cart-empty { padding: 32px 18px; text-align: center; color: var(--text-tertiary); font-size: 0.76rem; }
.cart-summary { padding: 16px 18px 18px; }
.cart-total { display: flex; justify-content: space-between; margin-bottom: 13px; color: var(--text-primary); font-size: 0.86rem; font-weight: 900; }
.cart-summary .module-primary-action { width: 100%; }

.resources-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.resource-card { display: grid; grid-template-columns: 112px 1fr; min-height: 180px; overflow: hidden; border: 1px solid var(--border-subtle); border-radius: 17px; background: #ffffff; box-shadow: 0 10px 28px rgba(4,18,52,0.055); }
.resource-image { width: 100%; height: 100%; object-fit: cover; }
.resource-card-body { display: flex; min-width: 0; padding: 16px; flex-direction: column; }
.resource-format-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.resource-format { display: inline-flex; align-items: center; gap: 5px; color: var(--primary); font-size: 0.63rem; font-weight: 900; text-transform: uppercase; }
.resource-format svg { width: 14px; }
.resource-access { padding: 4px 7px; border-radius: 999px; color: #347257; background: #eaf8f1; font-size: 0.58rem; font-weight: 900; text-transform: uppercase; }
.resource-access.paid { color: hsl(calc(var(--primary-h) + 25), 85%, 55%); background: #f0edff; }
.resource-card h3 { margin: 8px 0 6px; color: var(--text-primary); font-size: 0.88rem; line-height: 1.32; }
.resource-creator { color: var(--text-tertiary); font-size: 0.64rem; }
.resource-card p { display: -webkit-box; overflow: hidden; margin: 9px 0 12px; color: var(--text-secondary); font-size: 0.7rem; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.resource-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; }
.resource-meta { color: var(--text-tertiary); font-size: 0.62rem; }
.resource-action { min-height: 31px; padding: 0 10px; border: 1px solid rgba(51,120,236,0.22); border-radius: 9px; color: var(--primary); background: var(--primary-soft); font-size: 0.66rem; font-weight: 850; cursor: pointer; }

.seller-dashboard-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 15px; margin-bottom: 22px; }
.seller-kpi { padding: 18px; border: 1px solid var(--border-subtle); border-radius: 15px; background: #ffffff; box-shadow: 0 9px 24px rgba(4,18,52,0.05); }
.seller-kpi span { display: flex; align-items: center; gap: 7px; color: var(--text-tertiary); font-size: 0.68rem; font-weight: 800; }
.seller-kpi span svg { width: 16px; color: var(--primary); }
.seller-kpi strong { display: block; margin-top: 9px; color: var(--text-primary); font-size: 1.65rem; letter-spacing: -0.04em; }
.seller-panel { overflow: hidden; border: 1px solid var(--border-subtle); border-radius: 18px; background: #ffffff; box-shadow: 0 12px 30px rgba(4,18,52,0.055); }
.seller-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 17px 20px; border-bottom: 1px solid var(--border-subtle); }
.seller-panel-head h2 { margin: 0; font-size: 1.02rem; }
.seller-table-wrap { overflow-x: auto; }
.seller-table { width: 100%; border-collapse: collapse; }
.seller-table th,
.seller-table td { padding: 13px 16px; border-bottom: 1px solid var(--border-subtle); text-align: left; font-size: 0.72rem; }
.seller-table th { color: var(--text-tertiary); background: #fafbff; font-size: 0.63rem; letter-spacing: 0.08em; text-transform: uppercase; }
.seller-product { display: flex; align-items: center; gap: 10px; min-width: 210px; }
.seller-product img { width: 42px; height: 42px; object-fit: cover; border-radius: 9px; }
.seller-product strong { color: var(--text-primary); }
.status-pill { display: inline-flex; min-height: 25px; padding: 0 8px; align-items: center; border-radius: 999px; color: #347257; background: #eaf8f1; font-size: 0.62rem; font-weight: 850; }
.status-pill.draft { color: #80651f; background: #fff7dc; }
.seller-row-actions { display: flex; gap: 6px; }
.seller-row-actions button { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid var(--border-default); border-radius: 8px; color: var(--text-secondary); background: #ffffff; cursor: pointer; }
.seller-row-actions button.danger { color: #c43c57; }
.seller-row-actions svg { width: 15px; }

@media (max-width: 1100px) {
  .channels-grid,
  .store-products-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .resources-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .seller-dashboard-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .module-toolbar.resources-toolbar { grid-template-columns: 1fr 1fr 1fr; }
  .module-toolbar.resources-toolbar .module-search { grid-column: 1 / -1; }
}

@media (max-width: 850px) {
  .module-toolbar { grid-template-columns: 1fr 1fr; }
  .module-search { grid-column: 1 / -1; }
  .store-layout { grid-template-columns: 1fr; }
  .store-cart-panel { position: static; }
}

@media (max-width: 640px) {
  .module-shell { width: calc(100% - 28px); }
  .module-hero { padding: 34px 0 28px; }
  .module-hero-inner { align-items: flex-start; flex-direction: column; }
  .module-toolbar,
  .channels-grid,
  .store-products-grid,
  .resources-grid,
  .seller-dashboard-grid { grid-template-columns: 1fr; }
  .module-search { grid-column: auto; }
  .module-toolbar.resources-toolbar { grid-template-columns: 1fr; }
  .module-toolbar.resources-toolbar .module-search { grid-column: auto; }
  .resource-card { grid-template-columns: 98px 1fr; }
  .module-form { grid-template-columns: 1fr; }
  .module-form label.wide,
  .module-form .module-primary-action { grid-column: auto; }
}

/* Final single-page cascade guards */
.module-page main.product-detail-page,
.module-page main.channel-detail-page,
.module-page main.channel-content-page { width: min(var(--max), calc(100% - 44px)); padding-top: 72px; padding-bottom: 72px; }
.resource-detail-shell { display: block; padding: 0; border: 0; background: transparent; box-shadow: none; }
.cart-page-item { grid-template-columns: 104px minmax(0,1fr) auto auto 42px; }
.cart-page-delete { width: 40px; height: 40px; display: grid; place-items: center; align-self: center; border: 1px solid #f0ccd3; border-radius: 11px; color: #c43c57; background: #fff5f7; cursor: pointer; }
.cart-page-delete:hover { color: #fff; background: #c43c57; }
.cart-page-delete svg { width: 17px; }
.channel-audio-page { display: grid; gap: 22px; }
.channel-audio-page .channel-audio-view { min-height: 470px; }
.channel-audio-page .channel-audio-art { min-height: 470px; }
.channel-episode-about { padding: 34px 38px 40px; border: 1px solid var(--border); border-radius: 20px; background: rgba(255,255,255,.86); box-shadow: 0 14px 38px rgba(20,53,113,.07); }
.channel-episode-about h2 { margin: 4px 0 10px; color: var(--text-primary); font-size: 1.55rem; }
.channel-episode-about p { max-width: 790px; margin: 0; color: var(--text-secondary); line-height: 1.8; }
.resource-reader-route { padding-top: 72px; padding-bottom: 72px; }
.dedicated-reader { overflow: hidden; border: 1px solid var(--border); border-radius: 24px; background: #fff; box-shadow: 0 22px 65px rgba(20,53,113,.11); }
.dedicated-reader:fullscreen { width: 100vw; height: 100vh; overflow: auto; border: 0; border-radius: 0; background: #f5f8ff; }
.dedicated-reader-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 22px; border-bottom: 1px solid var(--border); background: #fff; }
.dedicated-reader-toolbar > div:first-child { display: grid; gap: 3px; }
.dedicated-reader-toolbar span { color: var(--primary); font-size: .68rem; font-weight: 900; text-transform: uppercase; }
.dedicated-reader-toolbar strong { color: var(--text-primary); }
.dedicated-reader-toolbar > div:last-child { display: flex; gap: 8px; }
.dedicated-reader-toolbar button { min-height: 40px; display: inline-flex; align-items: center; gap: 7px; padding: 0 12px; border: 1px solid var(--border); border-radius: 10px; color: var(--primary); background: #fff; font-weight: 800; cursor: pointer; }
.dedicated-reader-toolbar button:last-child { color: #fff; border-color: transparent; background: var(--primary); }
.dedicated-reader-toolbar svg { width: 16px; }
.dedicated-reader-book { min-height: 660px; }
.dedicated-reader-book aside ol { list-style: none; padding: 0; }
.dedicated-reader-book aside button { width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; text-align: left; color: #9fb3d7; background: transparent; cursor: pointer; }
.dedicated-reader-book aside button.active { color: #fff; background: rgba(255,255,255,.12); font-weight: 850; }
.dedicated-reader-book > article h1 { color: var(--text-primary); font-family: Georgia,serif; font-size: 2.15rem; }

/* Refined single-channel identity header */
.channel-detail-modern .channel-detail-cover { position: relative; height: 310px; }
.channel-detail-modern .channel-detail-cover::after { position: absolute; inset: 28% 0 0; background: linear-gradient(180deg, rgba(3,16,45,0), rgba(3,16,45,.88)); content: ""; }
.channel-detail-modern .channel-detail-cover > .channel-contact-button { position: absolute; z-index: 4; top: 22px; right: 24px; min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin: 0; padding: 0 18px; border: 1px solid rgba(255,255,255,.58); border-radius: 999px; color: #fff !important; background: rgba(9,18,35,.72); box-shadow: 0 8px 22px rgba(0,0,0,.2); backdrop-filter: blur(12px); }
.channel-detail-modern .channel-detail-cover > .channel-contact-button:hover { color: #fff !important; background: rgba(9,18,35,.9); }
.channel-detail-modern .channel-cover-type { position: absolute; z-index: 2; left: 190px; bottom: 25px; display: inline-flex; align-items: center; gap: 8px; color: #fff; font-size: .76rem; font-weight: 900; letter-spacing: .075em; text-shadow: 0 2px 12px rgba(0,0,0,.35); text-transform: uppercase; }
.channel-detail-modern .channel-cover-type svg { width: 17px; height: 17px; }
.channel-detail-modern .channel-detail-profile { grid-template-columns: 142px minmax(0,1fr) auto; gap: 22px; margin-top: -72px; padding: 0 38px; align-items: start; }
.channel-detail-modern .channel-detail-profile > img { position: relative; z-index: 3; width: 142px; height: 142px; border-width: 8px; box-shadow: 0 14px 34px rgba(16,39,85,.2); }
.channel-detail-modern .channel-detail-identity { align-self: start; padding: 94px 0 0; }
.channel-detail-modern .channel-detail-identity h1 { margin: 0 0 7px; font-size: clamp(1.7rem,3vw,2.35rem); letter-spacing: -.04em; }
.channel-detail-modern .channel-detail-identity p { display: flex; flex-wrap: wrap; gap: 6px; color: var(--text-muted); font-size: .9rem; }
.channel-detail-modern .channel-detail-actions { grid-column: 3; align-self: start; display: flex; flex-wrap: nowrap; justify-content: flex-end; align-items: center; gap: 10px; min-width: 0; margin-top: 88px; padding: 0 !important; }
.channel-detail-modern .channel-detail-actions .content-love-detail { width: 48px; min-width: 48px; height: 48px; padding: 0; border: 1px solid var(--primary-border); border-radius: 999px; color: var(--primary); background: var(--primary-surface); box-shadow: none; }
.channel-detail-modern .channel-detail-actions .channel-contact-button,
.channel-detail-modern .channel-detail-actions > .module-primary-action { min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin: 0 !important; padding: 0 20px; border-radius: 999px; white-space: nowrap; }
.channel-detail-modern .channel-follow-controls { display: flex; flex: 0 0 auto; justify-content: flex-end; align-items: center; gap: 10px; padding: 0 !important; }
.channel-detail-modern .channel-follow-controls button { min-height: 48px; padding: 0 22px; border: 0; border-radius: 999px; color: #fff; background: var(--gradient-brand, var(--primary-gradient, var(--primary))); box-shadow: 0 8px 20px hsla(var(--primary-h), var(--primary-s), var(--primary-l), .28); font: inherit; font-size: .9rem; font-weight: 800; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.channel-detail-modern .channel-follow-controls button:hover { transform: translateY(-1px); box-shadow: 0 11px 24px hsla(var(--primary-h), var(--primary-s), var(--primary-l), .36); }
.channel-detail-modern .channel-follow-controls button[aria-pressed="true"] { color: var(--primary); border: 1px solid var(--primary-border); background: var(--primary-surface); box-shadow: none; }
.channel-detail-modern .channel-follow-loading { color: var(--text-muted); font-size: .78rem; }
.channel-detail-modern .channel-detail-summary { display: grid; grid-template-columns: minmax(0,1fr) minmax(420px,.9fr); gap: 34px; align-items: stretch; margin: 30px 38px 34px; }
.channel-detail-modern .channel-detail-description { display: grid; align-content: center; gap: 8px; max-width: none; margin: 0; padding: 22px 24px; border: 1px solid var(--border); border-radius: 17px; background: #f8faff; }
.channel-detail-modern .channel-detail-description > span { color: var(--primary); font-size: .68rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.channel-detail-modern .channel-detail-description p { margin: 0; color: var(--text-secondary); font-size: .9rem; line-height: 1.65; }
.channel-detail-modern .channel-detail-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); max-width: none; margin: 0; overflow: visible; border: 0; border-radius: 0; gap: 10px; }
.channel-detail-modern .channel-detail-stats span { display: grid; min-width: 0; padding: 16px 10px; place-items: center; border: 1px solid var(--border); border-radius: 16px; color: var(--text-muted); background: #fff; box-shadow: 0 8px 22px rgba(23,54,112,.055); }
.channel-detail-modern .channel-detail-stats span + span { border-left: 1px solid var(--border); }
.channel-detail-modern .channel-detail-stats svg { width: 19px; height: 19px; margin-bottom: 4px; color: var(--primary); }
.channel-detail-modern .channel-detail-stats strong { font-size: 1.18rem; line-height: 1; }
.channel-detail-modern .channel-detail-stats small { color: var(--text-muted); font-size: .65rem; }
.channel-detail-modern .channel-detail-tabs { margin-top: 0; }
@media (max-width: 760px) {
  .module-page main.product-detail-page,
  .module-page main.channel-detail-page,
  .module-page main.channel-content-page { width: calc(100% - 28px); padding-top: 42px; padding-bottom: 52px; }
  .cart-page-item { grid-template-columns: 82px 1fr 42px; }
  .cart-page-item .cart-quantity,.cart-page-item > strong { grid-column: 2; }
  .cart-page-delete { grid-column: 3; grid-row: 1; }
  .channel-episode-about { padding: 26px 22px; }
  .dedicated-reader-toolbar { align-items: flex-start; flex-direction: column; }
  .dedicated-reader-toolbar > div:last-child { width: 100%; }
  .dedicated-reader-toolbar button { flex: 1; justify-content: center; }
  .channel-detail-modern .channel-detail-cover { height: 250px; }
  .channel-detail-modern .channel-detail-cover > .channel-contact-button { top: 14px; right: 14px; min-height: 42px; padding: 0 14px; }
  .channel-detail-modern .channel-cover-type { left: 22px; bottom: 88px; }
  .channel-detail-modern .channel-detail-profile { grid-template-columns: 96px 1fr; gap: 14px; margin-top: -66px; padding: 0 20px; }
  .channel-detail-modern .channel-detail-profile > img { width: 96px; height: 96px; border-width: 6px; }
  .channel-detail-modern .channel-detail-identity { padding-top: 78px; }
  .channel-detail-modern .channel-detail-identity h1 { font-size: 1.45rem; }
  .channel-detail-modern .channel-detail-identity p { font-size: .76rem; }
  .channel-detail-modern .channel-detail-actions { grid-column: 1/-1; justify-content: flex-end; gap: 8px; margin-top: 8px; }
  .channel-detail-modern .channel-detail-actions .channel-contact-button { min-height: 46px; padding: 0 15px; }
  .channel-detail-modern .channel-follow-controls button { min-height: 46px; padding: 0 18px; }
  .channel-detail-modern .channel-detail-summary { grid-template-columns: 1fr; gap: 14px; margin: 22px 20px 26px; }
  .channel-detail-modern .channel-detail-stats { gap: 7px; }
  .channel-detail-modern .channel-detail-stats span { padding: 13px 6px; }
}

/* ==========================================================================
   COMPREHENSIVE PLATFORM-WIDE DARK MODE SYSTEM (ALL 25 PAGES & MODULES)
   ========================================================================== */

/* 1. Global Page Backgrounds & Base Typography */
html[data-theme="dark"],
html[data-theme="dark"] body,
body.dark-mode {
  background-color: var(--background) !important;
  color: var(--text-primary) !important;
  color-scheme: dark;
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] strong,
html[data-theme="dark"] b {
  color: #f8fafc !important;
}

html[data-theme="dark"] p,
html[data-theme="dark"] .lead {
  color: #cbd5e1 !important;
}

html[data-theme="dark"] small,
html[data-theme="dark"] .meta {
  color: #94a3b8 !important;
}

html[data-theme="dark"] hr {
  border-color: var(--border-subtle) !important;
}

/* 2. Global Scrollbars & Native Form Controls */
html[data-theme="dark"] {
  scrollbar-color: var(--border-subtle) var(--background);
}

html[data-theme="dark"] ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
html[data-theme="dark"] ::-webkit-scrollbar-track {
  background: var(--background);
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #23334d;
  border-radius: 999px;
  border: 2px solid var(--background);
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: #364e75;
}

/* 3. Global Form Controls (Inputs, Selects, Textareas, Labels) */
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="range"]):not(:where(.module-search input)),
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .field,
html[data-theme="dark"] .form-field input,
html[data-theme="dark"] .form-field select,
html[data-theme="dark"] .form-field textarea,
html[data-theme="dark"] .search-hero-input,
html[data-theme="dark"] .search-field-input,
html[data-theme="dark"] .styled-filter-select,
html[data-theme="dark"] .segment-select,
html[data-theme="dark"] .simple-select,
html[data-theme="dark"] .search-input-box-main .search-input,
html[data-theme="dark"] .master-custom-amount-input,
html[data-theme="dark"] .module-select,
html[data-theme="dark"] .module-form input,
html[data-theme="dark"] .module-form select,
html[data-theme="dark"] .module-form textarea,
html[data-theme="dark"] .chat-form input,
html[data-theme="dark"] #player-chat-input,
html[data-theme="dark"] .conversation-reply textarea {
  background-color: var(--background-secondary) !important;
  border-color: var(--border-subtle) !important;
  color: #f8fafc !important;
  box-shadow: none !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] select::placeholder,
html[data-theme="dark"] textarea::placeholder,
html[data-theme="dark"] .search-hero-input::placeholder,
html[data-theme="dark"] .search-field-input::placeholder {
  color: #64748b !important;
}

html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] .field:focus,
html[data-theme="dark"] .search-hero-input:focus,
html[data-theme="dark"] .search-field-input:focus,
html[data-theme="dark"] .styled-filter-select:focus,
html[data-theme="dark"] .simple-select:focus {
  background-color: var(--background-secondary) !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px hsla(var(--primary-h), var(--primary-s), 55%, 0.25) !important;
  outline: none !important;
}

html[data-theme="dark"] label,
html[data-theme="dark"] .form-label-bold,
html[data-theme="dark"] .form-field span {
  color: #e2e8f0 !important;
}

/* 4. Global Buttons & Action Controls */
html[data-theme="dark"] .button.secondary,
html[data-theme="dark"] .button.ghost,
html[data-theme="dark"] button.ghost,
html[data-theme="dark"] .button:not(.primary):not(.gold):not(.search-submit-button):not(.accent):not(.btn-gold):not(.btn-primary):not([type="submit"]):not(.light):not(.profile-primary-action):not(.profile-new-here) {
  background: var(--surface);
  color: #f8fafc;
  border-color: var(--border-subtle);
}

html[data-theme="dark"] .button:hover,
html[data-theme="dark"] .button.ghost:hover {
  background: var(--surface-soft);
  border-color: var(--primary);
  color: #ffffff;
}

html[data-theme="dark"] .btn-outline {
  border-color: var(--border-subtle) !important;
  color: #cbd5e1 !important;
  background: transparent !important;
}

html[data-theme="dark"] .reset-filter-btn,
html[data-theme="dark"] .filter-pill-reset-btn,
html[data-theme="dark"] .reset-simple-btn {
  background: var(--surface) !important;
  border-color: var(--border-subtle) !important;
  color: #cbd5e1 !important;
}

html[data-theme="dark"] .reset-filter-btn:hover,
html[data-theme="dark"] .filter-pill-reset-btn:hover,
html[data-theme="dark"] .reset-simple-btn:hover {
  background: var(--surface-soft) !important;
  color: #ffffff !important;
  border-color: var(--primary) !important;
}

/* 5. Global Top Navigation & Headers - Theme Accent Harmonized */
html[data-theme="dark"] .topbar,
html[data-theme="dark"] .dash-topbar {
  background: hsla(var(--primary-h), 42%, 7%, 0.94) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  border-bottom-color: var(--border-subtle) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  color: #f8fafc !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

html[data-theme="dark"] body.member-app-shell .profile-app-header,
html[data-theme="dark"] body.member-app-shell .member-shell-header {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  color: #f8fafc !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

html[data-theme="dark"] .topbar .brand,
html[data-theme="dark"] .dash-topbar .brand,
html[data-theme="dark"] .profile-app-brand,
html[data-theme="dark"] body.member-app-shell .profile-app-brand {
  color: #f8fafc !important;
}

html[data-theme="dark"] .topbar .nav-links a {
  color: #cbd5e1 !important;
}

html[data-theme="dark"] .topbar .nav-links a:hover,
html[data-theme="dark"] .topbar .nav-links a.active {
  color: #ffffff !important;
}

html[data-theme="dark"] .topbar .mobile-menu-toggle {
  color: #f8fafc !important;
}

html[data-theme="dark"] .lang-selector-btn,
html[data-theme="dark"] .header-profile-circle,
html[data-theme="dark"] .profile-app-account,
html[data-theme="dark"] .member-notification-icon {
  background: var(--surface) !important;
  border-color: var(--border-subtle) !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] .lang-selector-panel {
  background: var(--surface) !important;
  border-color: var(--border-subtle) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5) !important;
}

html[data-theme="dark"] .lang-option {
  color: #f8fafc !important;
}

html[data-theme="dark"] .lang-option:hover {
  background: var(--surface-soft) !important;
  color: var(--primary) !important;
}

/* 6. Topbar Navigation & Mobile Drawer (Strictly Scoped) */
.topbar .nav-links a,
.dash-topbar .nav-links a,
html[data-theme="dark"] .topbar .nav-links a,
html[data-theme="dark"] .dash-topbar .nav-links a {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--text-secondary) !important;
  text-decoration: none;
  transition: color 0.2s ease;
}

.topbar .nav-links a:hover,
.topbar .nav-links a.active,
.dash-topbar .nav-links a:hover,
.dash-topbar .nav-links a.active,
html[data-theme="dark"] .topbar .nav-links a:hover,
html[data-theme="dark"] .topbar .nav-links a.active,
html[data-theme="dark"] .dash-topbar .nav-links a:hover,
html[data-theme="dark"] .dash-topbar .nav-links a.active {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--primary) !important;
}

/* Mobile drawer styles only trigger below 960px screen width */
@media (max-width: 960px) {
  html[data-theme="dark"] .topbar-menu-group {
    background: var(--surface-card) !important;
    border-left: 1px solid var(--border-subtle) !important;
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.6) !important;
  }

  html[data-theme="dark"] .topbar-menu-group .nav-links a {
    background: var(--surface) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-subtle) !important;
  }

  html[data-theme="dark"] .topbar-menu-group .nav-links a:hover {
    background: var(--surface-soft) !important;
    color: var(--primary) !important;
  }
}

/* 7. Member Shell Rail & App Shell */
html[data-theme="dark"] body.member-app-shell .member-shell-rail,
html[data-theme="dark"] .profile-left-rail,
html[data-theme="dark"] .dash-sidebar {
  background: var(--surface-card) !important;
  border-color: var(--border-subtle) !important;
}

html[data-theme="dark"] body.member-app-shell .profile-app-church {
  background: var(--background-secondary) !important;
  border-color: var(--border-subtle) !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] body.member-app-shell .profile-rail-nav a,
html[data-theme="dark"] .dash-nav a,
html[data-theme="dark"] .dash-nav button {
  color: #cbd5e1 !important;
}

html[data-theme="dark"] body.member-app-shell .profile-rail-nav a:hover,
html[data-theme="dark"] .dash-nav a:hover,
html[data-theme="dark"] .dash-nav button:hover {
  color: #ffffff !important;
  background: var(--surface-soft) !important;
}

html[data-theme="dark"] body.member-app-shell .profile-rail-nav a.active,
html[data-theme="dark"] .dash-nav a.active {
  color: var(--primary) !important;
  background: var(--primary-surface) !important;
  border-left: 3px solid var(--primary) !important;
}
html[data-theme="dark"] body.member-app-shell .profile-rail-nav a.active svg,
html[data-theme="dark"] .dash-nav a.active svg {
  color: var(--primary) !important;
}

html[data-theme="dark"] body.member-app-shell .profile-invite-card,
html[data-theme="dark"] body.member-app-shell .member-mobile-actions,
html[data-theme="dark"] .dash-user {
  background: var(--background-secondary) !important;
  border-color: var(--border-subtle) !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] body.member-app-shell .profile-rail-utility {
  border-color: var(--border-subtle) !important;
}

html[data-theme="dark"] body.member-app-shell .profile-app-search {
  color: #eaf0ff !important;
  border-color: var(--border-subtle) !important;
  background: var(--surface-soft) !important;
}

/* 8. Modals, Dialogs, Popovers & Drawers */
html[data-theme="dark"] .modal-overlay,
html[data-theme="dark"] .module-modal,
html[data-theme="dark"] .church-video-modal-backdrop {
  background: rgba(4, 8, 16, 0.8) !important;
}

html[data-theme="dark"] .modal-card,
html[data-theme="dark"] .module-modal-card,
html[data-theme="dark"] .login-card,
html[data-theme="dark"] .church-video-modal-card {
  background: var(--surface) !important;
  border: 1px solid var(--border-subtle) !important;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.6) !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] .modal-card h3,
html[data-theme="dark"] .module-modal-card h2,
html[data-theme="dark"] .login-card h1 {
  color: #f8fafc !important;
}

html[data-theme="dark"] .modal-tab {
  color: #94a3b8 !important;
}

html[data-theme="dark"] .modal-tab.active {
  color: #f8fafc !important;
  border-bottom-color: var(--primary) !important;
}

html[data-theme="dark"] .module-modal-close,
html[data-theme="dark"] .video-modal-close-btn,
html[data-theme="dark"] .drawer-close {
  background: var(--surface-soft) !important;
  border-color: var(--border-subtle) !important;
  color: #cbd5e1 !important;
}

html[data-theme="dark"] .theme-palette-popover {
  background: var(--surface) !important;
  border-color: var(--border-subtle) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6) !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] .mode-toggle-group {
  background: var(--background-secondary) !important;
  border-color: var(--border-subtle) !important;
}

html[data-theme="dark"] .mode-toggle-btn {
  color: #94a3b8 !important;
}

html[data-theme="dark"] .mode-toggle-btn.active {
  background: var(--surface-soft) !important;
  color: #f8fafc !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

html[data-theme="dark"] .toast {
  background: var(--surface) !important;
  border-color: var(--border-subtle) !important;
  color: #f8fafc !important;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5) !important;
}

html[data-theme="dark"] .store-cart-drawer {
  background: var(--surface-card) !important;
  border-left: 1px solid var(--border-subtle) !important;
  border-left-color: var(--border-subtle) !important;
  color: var(--text-primary) !important;
  box-shadow: -28px 0 70px rgba(0, 0, 0, 0.6) !important;
}
html[data-theme="dark"] .store-cart-drawer .store-cart-head {
  border-bottom: 1px solid var(--border-subtle) !important;
}
html[data-theme="dark"] .store-cart-drawer .cart-summary {
  border-top: 1px solid var(--border-subtle) !important;
}
html[data-theme="dark"] .drawer-close {
  background: var(--surface-soft) !important;
  border: 1px solid var(--border-subtle) !important;
  color: var(--text-primary) !important;
}
html[data-theme="dark"] .cart-item {
  border-bottom: 1px solid var(--border-subtle) !important;
}

/* 9. Page 1: Homepage (index.html) */
html[data-theme="dark"] body[data-page="home"] .hero-panel,
html[data-theme="dark"] body[data-page="home"] .search-panel,
html[data-theme="dark"] body[data-page="home"] .panel,
html[data-theme="dark"] body[data-page="home"] .card {
  background: var(--surface) !important;
  border-color: var(--border-subtle) !important;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.35) !important;
}

html[data-theme="dark"] body[data-page="home"] .hero-media-card {
  background: rgba(19, 29, 49, 0.92) !important;
  border-color: var(--border-subtle) !important;
}

html[data-theme="dark"] body[data-page="home"] .search-card {
  background: var(--surface) !important;
  border-color: var(--border-subtle) !important;
}

html[data-theme="dark"] body[data-page="home"] .search-card input,
html[data-theme="dark"] body[data-page="home"] .search-card select,
html[data-theme="dark"] body[data-page="home"] .search-card .field,
html[data-theme="dark"] body[data-page="home"] .location-combined-group,
html[data-theme="dark"] body[data-page="home"] .country-section {
  color: #edf3ff !important;
  border-color: var(--border-subtle) !important;
  background: var(--background-secondary) !important;
}

html[data-theme="dark"] body[data-page="home"] .search-card label,
html[data-theme="dark"] body[data-page="home"] .toggle-label-text {
  color: #dce5f8 !important;
}

html[data-theme="dark"] body[data-page="home"] .search-card-header p {
  color: #aebbd3 !important;
}

html[data-theme="dark"] body[data-page="home"] .tiny-church-card {
  border-color: var(--border-subtle) !important;
  color: #f8fafc !important;
  background: var(--surface) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4) !important;
}

html[data-theme="dark"] body[data-page="home"] .tiny-card-name {
  color: #f8fafc !important;
}

html[data-theme="dark"] body[data-page="home"] .tiny-card-details {
  color: #94a3b8 !important;
}

html[data-theme="dark"] body[data-page="home"] .tiny-card-tag {
  color: var(--gold) !important;
}

html[data-theme="dark"] body[data-page="home"] .tiny-card-img {
  border-color: var(--border-subtle) !important;
  background: var(--background-secondary) !important;
}

html[data-theme="dark"] .onboarding-stat-card,
html[data-theme="dark"] .hero-stat-card,
html[data-theme="dark"] .gateway-card,
html[data-theme="dark"] .step-card,
html[data-theme="dark"] .story-card,
html[data-theme="dark"] .explainer-step {
  background: var(--surface) !important;
  border-color: var(--border-subtle) !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] .impact-callout-banner,
html[data-theme="dark"] .master-dark-banner {
  background: linear-gradient(135deg, var(--background-secondary) 0%, #17243c 100%) !important;
  border: 1px solid var(--border-subtle) !important;
  color: #f8fafc !important;
}

/* 10. Page 2: Churches Directory (churches.html) */
html[data-theme="dark"] .directory-search-container,
html[data-theme="dark"] .simple-directory-search-card,
html[data-theme="dark"] .seamless-filter-bar {
  background: var(--surface) !important;
  border-color: var(--border-subtle) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
}

html[data-theme="dark"] .filter-segment {
  background: var(--surface) !important;
  border-right-color: var(--border-subtle) !important;
  border-bottom-color: var(--border-subtle) !important;
}

html[data-theme="dark"] .filter-segment:hover {
  background: var(--surface-soft) !important;
}

html[data-theme="dark"] .filter-segment .segment-label {
  color: #94a3b8 !important;
}

html[data-theme="dark"] .filter-pill-btn,
html[data-theme="dark"] .custom-pill-filter .filter-pill-btn {
  background: var(--surface) !important;
  border-color: var(--border-subtle) !important;
  color: #cbd5e1 !important;
}

html[data-theme="dark"] .filter-pill-btn:hover {
  background: var(--surface-soft) !important;
  border-color: var(--gold) !important;
  color: #ffffff !important;
}

html[data-theme="dark"] .filter-dropdown-panel {
  background: var(--surface) !important;
  border-color: var(--border-subtle) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5) !important;
}

html[data-theme="dark"] .custom-checkbox-row:hover {
  background: var(--surface-soft) !important;
}

html[data-theme="dark"] .checkbox-label {
  color: #f8fafc !important;
}

html[data-theme="dark"] .checkbox-box {
  background: var(--background-secondary) !important;
  border-color: var(--border-subtle) !important;
}

html[data-theme="dark"] .church-card,
html[data-theme="dark"] .church-card-split {
  background: var(--surface) !important;
  border-color: var(--border-subtle) !important;
  color: #f8fafc !important;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.35) !important;
}

html[data-theme="dark"] .church-card-immersive {
  border-color: var(--border-subtle) !important;
  color: #f8fafc !important;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.35) !important;
}

/* 11. Page 3: Church Profile (church-profile.html) */
html[data-theme="dark"] body[data-page="profile"] .church-tabs-nav {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow-card) !important;
}

html[data-theme="dark"] body[data-page="profile"] .church-tab-button {
  background: transparent !important;
  border: none !important;
  color: var(--text-muted) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body[data-page="profile"] .church-tab-button + .church-tab-button {
  border-left: 1px solid var(--border) !important;
}

html[data-theme="dark"] body[data-page="profile"] .church-tab-button:hover {
  background: var(--primary-surface) !important;
  color: var(--primary) !important;
}

html[data-theme="dark"] body[data-page="profile"] .church-tab-button:hover svg,
html[data-theme="dark"] body[data-page="profile"] .church-tab-button:hover i {
  color: var(--primary) !important;
}

html[data-theme="dark"] body[data-page="profile"] .church-tab-button.active {
  background: transparent !important;
  color: var(--primary) !important;
  border: none !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body[data-page="profile"] .church-tab-button.active svg,
html[data-theme="dark"] body[data-page="profile"] .church-tab-button.active i {
  color: var(--primary) !important;
}

html[data-theme="dark"] body[data-page="profile"] .church-tab-button.active::after {
  background: var(--primary) !important;
  box-shadow: 0 0 10px hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.45) !important;
}

html[data-theme="dark"] body[data-page="profile"] .leader-bio h2.leader-name {
  color: #f8fafc !important;
}

html[data-theme="dark"] body[data-page="profile"] .leader-bio-text {
  color: #cbd5e1 !important;
}

html[data-theme="dark"] body[data-page="profile"] .leader-facts > div {
  border-color: var(--border-subtle) !important;
}

html[data-theme="dark"] body[data-page="profile"] .leader-facts strong {
  color: #f8fafc !important;
}

html[data-theme="dark"] body[data-page="profile"] .leader-facts small {
  color: #94a3b8 !important;
}

html[data-theme="dark"] body[data-page="profile"] .stories-section {
  background: var(--surface) !important;
  border-color: var(--border-subtle) !important;
}

html[data-theme="dark"] body[data-page="profile"] .glass-card.testimony-card,
html[data-theme="dark"] body[data-page="profile"] .testimony-card {
  background: var(--background-secondary) !important;
  border-color: var(--border-subtle) !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] body[data-page="profile"] .testimony-text {
  color: #cbd5e1 !important;
}

html[data-theme="dark"] body[data-page="profile"] .testimony-user-info h4 {
  color: #f8fafc !important;
}

html[data-theme="dark"] body[data-page="profile"] .salvation-prayer-card,
html[data-theme="dark"] body[data-page="profile"] .glass-card[style*="gradient"] {
  background: linear-gradient(180deg, var(--surface), var(--surface-soft)) !important;
  border: 1px solid var(--border-subtle) !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] body[data-page="profile"] .gathering-modern-card {
  background: var(--surface) !important;
  border-color: var(--border-subtle) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
}

html[data-theme="dark"] body[data-page="profile"] .gathering-time-pill {
  background: rgba(15, 23, 42, 0.85) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #f8fafc !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
}

html[data-theme="dark"] body[data-page="profile"] .gathering-time-pill svg,
html[data-theme="dark"] body[data-page="profile"] .gathering-time-pill i {
  color: #4ade80 !important;
}

html[data-theme="dark"] body[data-page="profile"] .gathering-title {
  color: #f8fafc !important;
}

html[data-theme="dark"] body[data-page="profile"] .gathering-desc {
  color: #94a3b8 !important;
}

html[data-theme="dark"] body[data-page="profile"] .gathering-cal-btn {
  background: rgba(var(--gold-rgb), 0.12) !important;
  border-color: rgba(var(--gold-rgb), 0.4) !important;
  color: var(--gold) !important;
}

html[data-theme="dark"] body[data-page="profile"] .sticky-connection-card,
html[data-theme="dark"] body[data-page="profile"] .church-quick-contact-card,
html[data-theme="dark"] body[data-page="profile"] .profile-next-service,
html[data-theme="dark"] body[data-page="profile"] .profile-next-step {
  background: var(--surface) !important;
  border-color: var(--border-subtle) !important;
  color: #f8fafc !important;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.3) !important;
}

html[data-theme="dark"] body[data-page="profile"] .landing-section[style*="rgba(250"] {
  background-color: transparent !important;
  border-top-color: var(--border-subtle) !important;
}

html[data-theme="dark"] body[data-page="profile"] .text-slate-900 {
  color: #f8fafc !important;
}
html[data-theme="dark"] body[data-page="profile"] .text-slate-800 {
  color: #f1f5f9 !important;
}
html[data-theme="dark"] body[data-page="profile"] .text-slate-600,
html[data-theme="dark"] body[data-page="profile"] .text-slate-500 {
  color: #94a3b8 !important;
}
html[data-theme="dark"] body[data-page="profile"] .bg-white {
  background-color: var(--surface) !important;
}
html[data-theme="dark"] body[data-page="profile"] .border-slate-200 {
  border-color: var(--border-subtle) !important;
}

/* 12. Page 4 & 5: Events (events.html) & Event Profile (event-profile.html) */
html[data-theme="dark"] .event-card,
html[data-theme="dark"] .evc,
html[data-theme="dark"] .event-card-v2 {
  background: var(--surface) !important;
  border-color: var(--border-subtle) !important;
  color: #f8fafc !important;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.3) !important;
}

html[data-theme="dark"] .evc-date-badge {
  background: rgba(19, 29, 49, 0.95) !important;
  border: 1px solid var(--border-subtle) !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] .evc-date-day {
  color: #f8fafc !important;
}

html[data-theme="dark"] .evc-date-month {
  color: #94a3b8 !important;
}

html[data-theme="dark"] .section-title-row {
  border-bottom-color: var(--border-subtle) !important;
}

html[data-theme="dark"] body[data-page="event-profile"] {
  background-color: var(--background) !important;
  color: var(--text-primary) !important;
}

html[data-theme="dark"] body[data-page="event-profile"] .glassmorphism {
  background: rgba(19, 29, 49, 0.85) !important;
  border-color: var(--border-subtle) !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] body[data-page="event-profile"] #countdown-grid > div {
  background: var(--background-secondary) !important;
  border-color: var(--border-subtle) !important;
}

html[data-theme="dark"] body[data-page="event-profile"] #cd-days,
html[data-theme="dark"] body[data-page="event-profile"] #cd-hours,
html[data-theme="dark"] body[data-page="event-profile"] #cd-mins {
  color: #f8fafc !important;
}

html[data-theme="dark"] body[data-page="event-profile"] .sticky {
  background: rgba(9, 13, 22, 0.95) !important;
  border-color: var(--border-subtle) !important;
}

html[data-theme="dark"] body[data-page="event-profile"] .tab-panel {
  background: transparent !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] body[data-page="event-profile"] .bg-white,
html[data-theme="dark"] body[data-page="event-profile"] .bg-slate-50,
html[data-theme="dark"] body[data-page="event-profile"] .bg-slate-100,
html[data-theme="dark"] body[data-page="event-profile"] .bg-slate-100\/50,
html[data-theme="dark"] body[data-page="event-profile"] .bg-slate-100\/30 {
  background-color: var(--surface) !important;
}

html[data-theme="dark"] body[data-page="event-profile"] .text-slate-900,
html[data-theme="dark"] body[data-page="event-profile"] .text-slate-800 {
  color: #f8fafc !important;
}

html[data-theme="dark"] body[data-page="event-profile"] .text-slate-600,
html[data-theme="dark"] body[data-page="event-profile"] .text-slate-500,
html[data-theme="dark"] body[data-page="event-profile"] .text-slate-400 {
  color: #94a3b8 !important;
}

html[data-theme="dark"] body[data-page="event-profile"] .border-slate-200,
html[data-theme="dark"] body[data-page="event-profile"] .border-slate-200\/80,
html[data-theme="dark"] body[data-page="event-profile"] .border-slate-200\/60,
html[data-theme="dark"] body[data-page="event-profile"] .border-slate-200\/50 {
  border-color: var(--border-subtle) !important;
}

/* 13. Page 6: Livestream Hub (livestream.html) */
html[data-theme="dark"] body[data-page="livestream"],
html[data-theme="dark"] body[data-page="streams"],
html[data-theme="dark"] .live-page {
  background: var(--background) !important;
  color: var(--text-primary) !important;
}

html[data-theme="dark"] .live-player,
html[data-theme="dark"] .live-card,
html[data-theme="dark"] .live-stage {
  background: var(--surface) !important;
  border-color: var(--border-subtle) !important;
  color: #f8fafc !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4) !important;
}

html[data-theme="dark"] .live-control-bar {
  background: var(--background-secondary) !important;
  border-color: var(--border-subtle) !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] .live-tab-list {
  background: var(--background-secondary) !important;
  border-color: var(--border-subtle) !important;
}

html[data-theme="dark"] .live-tab-button {
  background: var(--surface) !important;
  border-color: var(--border-subtle) !important;
  color: #cbd5e1 !important;
}

html[data-theme="dark"] .live-tab-button:hover,
html[data-theme="dark"] .live-tab-button.active {
  background: var(--surface-soft) !important;
  color: var(--primary) !important;
  border-color: var(--primary) !important;
}

html[data-theme="dark"] .chat-list,
html[data-theme="dark"] #player-chat-box,
html[data-theme="dark"] .stream-chat-panel {
  background: var(--background-secondary) !important;
  border-color: var(--border-subtle) !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] .chat-form,
html[data-theme="dark"] .stream-chat-form {
  background: var(--surface) !important;
  border-color: var(--border-subtle) !important;
}

html[data-theme="dark"] .stream-chat-bubble {
  background: var(--surface-soft) !important;
  border-color: #25395a !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] .stream-card {
  background: var(--surface) !important;
  border-color: var(--border-subtle) !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] .stream-card-title {
  color: #f8fafc !important;
}

html[data-theme="dark"] .stream-card-tagline {
  color: #94a3b8 !important;
}

html[data-theme="dark"] .stream-card-footer {
  border-top-color: var(--border-subtle) !important;
}

html[data-theme="dark"] .floating-lights-btn {
  background: var(--surface) !important;
  color: #f8fafc !important;
  border-color: var(--border-subtle) !important;
}

/* 14. Page 7, 8, 9: Channels (channels.html, channel-detail.html, channel-content.html) */
html[data-theme="dark"] .module-page,
html[data-theme="dark"] .module-content {
  color: var(--text-primary) !important;
  background-color: var(--background) !important;
}

html[data-theme="dark"] :where(.channel-profile-card, .store-product-card, .resource-card, .channel-detail-card, .channel-content-card, .product-detail-card, .resource-detail-card) {
  border-color: var(--border-subtle) !important;
  background: var(--glass-card-bg) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.38), inset 0 1px 0 hsla(var(--primary-h), 40%, 85%, 0.12) !important;
  color: var(--text-primary) !important;
}

html[data-theme="dark"] .channel-profile-avatar {
  border-color: var(--background-secondary) !important;
}

html[data-theme="dark"] .channel-profile-identity h3 {
  color: #f8fafc !important;
}

html[data-theme="dark"] .channel-platform-stats {
  background: var(--background-secondary) !important;
  border: 1px solid var(--border-subtle) !important;
}

html[data-theme="dark"] .channel-platform-stats span + span {
  border-left-color: var(--border-subtle) !important;
}

html[data-theme="dark"] .channel-platform-stats strong {
  color: #f8fafc !important;
}

html[data-theme="dark"] .channel-platform-stats small {
  color: #94a3b8 !important;
}

/* channel-contact-button retains vibrant theme color in dark mode */

html[data-theme="dark"] .channel-contact-button:hover {
  background: var(--primary) !important;
  border-color: transparent !important;
  color: #ffffff !important;
}

html[data-theme="dark"] .channel-detail-hero {
  background: var(--background-secondary) !important;
  border-color: var(--border-subtle) !important;
}

html[data-theme="dark"] .channel-detail-profile > img {
  border-color: var(--background-secondary) !important;
}

html[data-theme="dark"] .channel-detail-description,
html[data-theme="dark"] .channel-detail-modern .channel-detail-description {
  background: var(--surface) !important;
  border-color: var(--border-subtle) !important;
  color: #cbd5e1 !important;
}

html[data-theme="dark"] .channel-detail-stats span,
html[data-theme="dark"] .channel-detail-modern .channel-detail-stats span {
  background: var(--surface) !important;
  border-color: var(--border-subtle) !important;
  color: #94a3b8 !important;
}

html[data-theme="dark"] .channel-detail-stats strong,
html[data-theme="dark"] .channel-detail-modern .channel-detail-stats strong {
  color: #f8fafc !important;
}

html[data-theme="dark"] .channel-content-grid article {
  background: var(--background-secondary) !important;
  border-color: var(--border-subtle) !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] .channel-audio-view,
html[data-theme="dark"] .channel-video-view,
html[data-theme="dark"] .channel-article-view {
  background: var(--background-secondary) !important;
  border-color: var(--border-subtle) !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] .channel-episode-about {
  background: var(--background-secondary) !important;
  border-color: var(--border-subtle) !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] .channel-article-body {
  color: #e2e8f0 !important;
}

html[data-theme="dark"] .channel-article-body h2 {
  color: #f8fafc !important;
}

html[data-theme="dark"] .channel-article-body blockquote {
  background: var(--surface) !important;
  border-left-color: var(--primary) !important;
  color: #cbd5e1 !important;
}

/* 15. Page 10, 11, 12: Resources (resources.html, resource-detail.html, resource-reader.html) */
html[data-theme="dark"] .resource-view-toggle {
  background: var(--surface) !important;
  border-color: var(--border-subtle) !important;
}

html[data-theme="dark"] .resource-view-toggle button {
  color: #94a3b8 !important;
}

html[data-theme="dark"] .resource-view-toggle button.active {
  background: var(--surface-soft) !important;
  color: var(--primary) !important;
}

html[data-theme="dark"] .resource-media-experience,
html[data-theme="dark"] .resource-file-experience,
html[data-theme="dark"] .resource-article-experience {
  background: var(--background-secondary) !important;
  border-color: var(--border-subtle) !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] .resource-file-meta span {
  background: var(--surface) !important;
  color: #cbd5e1 !important;
  border: 1px solid var(--border-subtle) !important;
}

html[data-theme="dark"] .resource-download-action {
  background: var(--surface) !important;
  border-color: var(--border-subtle) !important;
  color: var(--primary) !important;
}

html[data-theme="dark"] .resource-download-action:hover {
  background: var(--surface-soft) !important;
}

html[data-theme="dark"] .resource-access-panel {
  background: var(--surface) !important;
  border-color: var(--border-subtle) !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] .dedicated-reader {
  background: var(--background) !important;
  border-color: var(--border-subtle) !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] .dedicated-reader:fullscreen {
  background: var(--background) !important;
}

html[data-theme="dark"] .dedicated-reader-toolbar {
  background: var(--background-secondary) !important;
  border-color: var(--border-subtle) !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] .dedicated-reader-toolbar button {
  background: var(--surface) !important;
  border-color: var(--border-subtle) !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] .dedicated-reader-book > article {
  background: var(--surface-card) !important;
  color: #e2e8f0 !important;
}

html[data-theme="dark"] .dedicated-reader-book > article h1 {
  color: #f8fafc !important;
}

/* 16. Page 13, 14, 15, 16, 17: Store (store.html, product-detail.html, cart.html, checkout.html, seller-dashboard.html) */
html[data-theme="dark"] .product-card h3,
html[data-theme="dark"] .product-price {
  color: #f8fafc !important;
}

html[data-theme="dark"] .product-image-wrap {
  background: var(--background-secondary) !important;
}

html[data-theme="dark"] .store-cart-trigger,
html[data-theme="dark"] .store-cart-panel {
  background: var(--surface) !important;
  border-color: var(--border-subtle) !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] .product-detail-shell {
  background: var(--background-secondary) !important;
  border-color: var(--border-subtle) !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] .product-main-image {
  background: var(--background-secondary) !important;
}

html[data-theme="dark"] .product-thumbnails button {
  background: var(--surface) !important;
  border-color: var(--border-subtle) !important;
}

html[data-theme="dark"] .product-thumbnails button.active {
  border-color: var(--primary) !important;
}

html[data-theme="dark"] .product-seller-panel {
  background: var(--surface) !important;
  border-color: var(--border-subtle) !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] .cart-page-item {
  background: var(--background-secondary) !important;
  border-color: var(--border-subtle) !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] .cart-page-summary,
html[data-theme="dark"] .cart-coupon-card {
  background: var(--background-secondary) !important;
  border-color: var(--border-subtle) !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] .cart-page-delete {
  background: rgba(239, 68, 68, 0.15) !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
  color: #f87171 !important;
}

html[data-theme="dark"] .checkout-step-card,
html[data-theme="dark"] .checkout-summary-card {
  background: var(--background-secondary) !important;
  border-color: var(--border-subtle) !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] .seller-kpi,
html[data-theme="dark"] .seller-panel {
  background: var(--background-secondary) !important;
  border-color: var(--border-subtle) !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] .seller-kpi strong {
  color: #f8fafc !important;
}

html[data-theme="dark"] .seller-table th {
  background: var(--background-secondary) !important;
  color: #94a3b8 !important;
  border-color: var(--border-subtle) !important;
}

html[data-theme="dark"] .seller-table td {
  border-color: var(--border-subtle) !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] .seller-row-actions button {
  background: var(--surface) !important;
  border-color: var(--border-subtle) !important;
  color: #cbd5e1 !important;
}

/* 17. Page 18: Messages (messages.html) */
html[data-theme="dark"] .messages-page {
  background: var(--background) !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] .messages-sidebar {
  background: var(--surface-card) !important;
  border-right-color: var(--border-subtle) !important;
}

html[data-theme="dark"] .messages-sidebar-head h1 {
  color: #f8fafc !important;
}

html[data-theme="dark"] .messages-search {
  background: var(--surface-soft) !important;
  border-color: var(--border-subtle) !important;
}

html[data-theme="dark"] .message-filter-tabs button {
  color: #94a3b8 !important;
}

html[data-theme="dark"] .message-filter-tabs button.active {
  background: var(--surface-soft) !important;
  color: var(--primary) !important;
}

html[data-theme="dark"] .message-thread {
  color: #f8fafc !important;
}

html[data-theme="dark"] .message-thread:hover {
  background: var(--surface) !important;
}

html[data-theme="dark"] .message-thread.active {
  background: var(--surface-soft) !important;
}

html[data-theme="dark"] .message-thread strong {
  color: #f8fafc !important;
}

html[data-theme="dark"] .message-thread small {
  color: #94a3b8 !important;
}

html[data-theme="dark"] .message-conversation {
  background: var(--background) !important;
}

html[data-theme="dark"] .conversation-head {
  background: var(--surface-card) !important;
  border-bottom-color: var(--border-subtle) !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] .conversation-head strong {
  color: #f8fafc !important;
}

html[data-theme="dark"] .message-bubble {
  background: var(--surface-soft) !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] .message-bubble.sent {
  background: var(--primary) !important;
  color: #ffffff !important;
}

html[data-theme="dark"] .conversation-reply {
  background: var(--surface) !important;
  border-color: var(--border-subtle) !important;
}

html[data-theme="dark"] .email-sync-button {
  background: var(--surface) !important;
  border-color: var(--border-subtle) !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] .email-sync-button strong {
  color: #f8fafc !important;
}

/* 18. Page 19 & 20: Giving / Donate (donate.html) & Foundation (foundation.html) */
html[data-theme="dark"] .master-giving-card {
  background: var(--background-secondary) !important;
  border-color: var(--border-subtle) !important;
  color: #f8fafc !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4) !important;
}

html[data-theme="dark"] .master-giving-header h2 {
  color: #f8fafc !important;
}

html[data-theme="dark"] .master-freq-switcher {
  background: var(--background-secondary) !important;
}

html[data-theme="dark"] .master-freq-btn {
  color: #94a3b8 !important;
}

html[data-theme="dark"] .master-freq-btn.active {
  background: var(--surface-soft) !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] .master-amount-pill {
  background: var(--surface) !important;
  border-color: var(--border-subtle) !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] .master-amount-pill:hover {
  background: var(--surface-soft) !important;
  border-color: var(--gold) !important;
}

html[data-theme="dark"] .master-amount-pill.active {
  background: var(--gold) !important;
  color: var(--background-secondary) !important;
  font-weight: 900 !important;
}

html[data-theme="dark"] .master-pay-radio {
  background: var(--surface) !important;
  border-color: var(--border-subtle) !important;
  color: #cbd5e1 !important;
}

html[data-theme="dark"] .master-pay-radio.active {
  border-color: var(--gold) !important;
  background: rgba(var(--gold-rgb), 0.15) !important;
  color: var(--gold) !important;
}

html[data-theme="dark"] .master-kpi-card {
  background: var(--background-secondary) !important;
  border-color: var(--border-subtle) !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] .master-kpi-info strong {
  color: #f8fafc !important;
}

html[data-theme="dark"] .master-impact-section {
  background: transparent !important;
  border-color: var(--border-subtle) !important;
}

html[data-theme="dark"] .master-pillar-card {
  background: var(--background-secondary) !important;
  border-color: var(--border-subtle) !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] .master-pillar-card h3 {
  color: #f8fafc !important;
}

html[data-theme="dark"] .master-pillar-card p {
  color: #cbd5e1 !important;
}

html[data-theme="dark"] .donation-impact-gallery .card,
html[data-theme="dark"] .grant-step-card,
html[data-theme="dark"] .faq-item,
html[data-theme="dark"] .leader-card,
html[data-theme="dark"] .report-download-card {
  background: var(--background-secondary) !important;
  border-color: var(--border-subtle) !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] .platform-destination-banner {
  background: linear-gradient(135deg, rgba(var(--gold-rgb), 0.12), rgba(15, 23, 42, 0.6)) !important;
  border-color: rgba(var(--gold-rgb), 0.35) !important;
}

html[data-theme="dark"] .platform-destination-text h4 {
  color: #f8fafc !important;
}

html[data-theme="dark"] .platform-destination-text p {
  color: #cbd5e1 !important;
}

/* 19. Page 21, 22, 23, 24: Privacy, Admin, Owner Dashboard, Church Portal */
html[data-theme="dark"] .legal-sidebar,
html[data-theme="dark"] .legal-content,
html[data-theme="dark"] .legal-callout,
html[data-theme="dark"] .legal-table {
  background: var(--background-secondary) !important;
  border-color: var(--border-subtle) !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] .dash-body {
  background: var(--background) !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] .dash-panel {
  background: var(--background-secondary) !important;
  border-color: var(--border-subtle) !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] .kpi-card {
  background: var(--background-secondary) !important;
  border-color: var(--border-subtle) !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] .kpi-card strong {
  color: #f8fafc !important;
}

html[data-theme="dark"] .kpi-card span {
  color: #94a3b8 !important;
}

html[data-theme="dark"] .field-category {
  border-top-color: var(--border-subtle) !important;
}

html[data-theme="dark"] .content-callout,
html[data-theme="dark"] .readable-grid > div {
  background: var(--surface) !important;
  border-color: var(--border-subtle) !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] .content-callout strong,
html[data-theme="dark"] .readable-grid strong {
  color: #f8fafc !important;
}

html[data-theme="dark"] .pastor-readable {
  background: var(--surface) !important;
  border-color: var(--border-subtle) !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] .block-editor {
  background: var(--background-secondary) !important;
  border-color: var(--border-subtle) !important;
}

html[data-theme="dark"] .block-editor summary span {
  color: #f8fafc !important;
}

html[data-theme="dark"] .block-editor[open] summary {
  background: var(--surface) !important;
  border-color: var(--border-subtle) !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] .block-editor[open] .editor-body {
  background: var(--surface) !important;
  border-color: var(--border-subtle) !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] .admin-filter-row {
  border-bottom-color: var(--border-subtle) !important;
}

html[data-theme="dark"] table th {
  background: var(--background-secondary) !important;
  color: #94a3b8 !important;
  border-color: var(--border-subtle) !important;
}

html[data-theme="dark"] table td {
  border-color: var(--border-subtle) !important;
  color: #f8fafc !important;
}

/* ==========================================================================
   COMPREHENSIVE GLOBAL THEME & DARK MODE ENGINE (SYSTEM-WIDE)
   Covers all 24+ pages, modules, forms, dropdowns, dashboards, and modals
   ========================================================================== */

html[data-theme="dark"],
body.dark-mode {
  --surface-canvas: var(--background);
  --surface-glass: rgba(19, 29, 49, 0.85);
  --surface-glass-hover: rgba(24, 37, 64, 0.95);
  --surface-muted: var(--border-subtle);
  --border: var(--border-subtle);
  --border-default: var(--border-subtle);
  --border-light: var(--border-subtle);
  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;
  --text-disabled: #64748b;
  --text-tertiary: #64748b;
  --ink: #f8fafc;
  --muted: #94a3b8;
  --soft: var(--background-secondary);
  --soft-2: var(--surface-soft);
  --line: var(--border-subtle);
  --ai-navy: #f8fafc;
  --ai-slate: #cbd5e1;
  --ai-muted: #94a3b8;
  --ai-border: var(--border-subtle);
  --brand-navy: #f8fafc;
  --input-bg: var(--background-secondary);
  --input-border: var(--border-subtle);
  --input-text: #f8fafc;
  --input-placeholder: #64748b;
  --card-bg: var(--surface-card);
  --card-border: var(--border-subtle);
  --panel-bg: var(--surface);
  --panel-border: var(--border-subtle);
  --table-stripe: var(--background-secondary);
  --modal-bg: var(--surface);
  --modal-overlay: rgba(3, 7, 18, 0.82);
  --dropdown-bg: var(--background-secondary);
  --dropdown-hover: var(--border-subtle);
  --dropdown-border: var(--border-subtle);
  --dropdown-text: #f8fafc;
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.35);
  --gold: #f59e0b;
  --gold-hover: #d97706;
  --gold-rgb: 245, 158, 11;
  --gold-surface: rgba(245, 158, 11, 0.16);
  --gold-border: rgba(245, 158, 11, 0.40);
  --gold-text: #fbbf24;
}

/* 1. Global Base, Typography & Canvases */
html[data-theme="dark"] body {
  background-color: var(--background) !important;
  color: var(--text-primary) !important;
}
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6 {
  color: var(--text-primary) !important;
}
html[data-theme="dark"] p {
  color: var(--text-secondary) !important;
}
html[data-theme="dark"] hr {
  border-color: var(--border) !important;
}
html[data-theme="dark"] .dash-body {
  background-color: var(--background) !important;
}

/* 2. Universal Form Controls, Inputs, Selects & Buttons */
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="range"]),
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] .field,
html[data-theme="dark"] .input-group input,
html[data-theme="dark"] .input-group textarea,
html[data-theme="dark"] .input-group select,
html[data-theme="dark"] .form-field input,
html[data-theme="dark"] .form-field textarea,
html[data-theme="dark"] .form-field select,
html[data-theme="dark"] .block-editor[open] .form-field input,
html[data-theme="dark"] .block-editor[open] .form-field select,
html[data-theme="dark"] .block-editor[open] .form-field textarea,
html[data-theme="dark"] .share-link-input {
  background-color: var(--input-bg) !important;
  color: var(--input-text) !important;
  border-color: var(--input-border) !important;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: var(--input-placeholder) !important;
}
html[data-theme="dark"] select option {
  background-color: var(--dropdown-bg) !important;
  color: var(--dropdown-text) !important;
}
html[data-theme="dark"] .custom-select-trigger {
  background-color: var(--input-bg) !important;
  color: var(--input-text) !important;
  border-color: var(--input-border) !important;
}
html[data-theme="dark"] .custom-select-trigger.country-dropdown {
  background-image: none !important;
}
html[data-theme="dark"] .custom-options-panel,
html[data-theme="dark"] .country-section .custom-options-panel {
  background-color: var(--dropdown-bg) !important;
  border-color: var(--dropdown-border) !important;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55) !important;
}
html[data-theme="dark"] .custom-option {
  color: var(--text-secondary) !important;
}
html[data-theme="dark"] .custom-option:hover,
html[data-theme="dark"] .custom-option.selected {
  background-color: var(--dropdown-hover) !important;
  color: var(--text-primary) !important;
}
html[data-theme="dark"] .checkbox-card {
  background-color: var(--surface-card) !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
}
html[data-theme="dark"] .checkbox-card:hover {
  background-color: var(--surface-soft) !important;
}
html[data-theme="dark"] .checkbox-card.selected {
  background-color: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.15) !important;
  border-color: var(--primary) !important;
}
html[data-theme="dark"] .btn-outline,
html[data-theme="dark"] .button.ghost,
html[data-theme="dark"] .profile-secondary-action {
  background-color: transparent !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
}
html[data-theme="dark"] .btn-outline:hover,
html[data-theme="dark"] .button.ghost:hover,
html[data-theme="dark"] .profile-secondary-action:hover {
  background-color: var(--surface-soft) !important;
}
html[data-theme="dark"] .button.light,
html[data-theme="dark"] .btn-white {
  background-color: var(--surface) !important;
  color: var(--text-primary) !important;
  border-color: var(--border) !important;
}

/* 3. Cards, Panels, KPI Strips & Structural Surfaces (Brighter with Glassmorphism Gradient Layer) */
html[data-theme="dark"] .dash-panel,
html[data-theme="dark"] .kpi-card,
html[data-theme="dark"] .side-card,
html[data-theme="dark"] .readable-grid > div,
html[data-theme="dark"] .pastor-readable,
html[data-theme="dark"] .content-callout,
html[data-theme="dark"] .church-card,
html[data-theme="dark"] .church-grid-card,
html[data-theme="dark"] .event-card,
html[data-theme="dark"] .channel-card,
html[data-theme="dark"] .product-card,
html[data-theme="dark"] .product-card-inner,
html[data-theme="dark"] .resource-card,
html[data-theme="dark"] .testimony-card,
html[data-theme="dark"] .glass-card,
html[data-theme="dark"] .glassmorphism,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .card,
html[data-theme="dark"] .member-view-card,
html[data-theme="dark"] .member-stat-box,
html[data-theme="dark"] .info-card,
html[data-theme="dark"] .channel-content-grid article,
html[data-theme="dark"] .block-editor summary,
html[data-theme="dark"] .block-editor .editor-body,
html[data-theme="dark"] .profile-invite-card,
html[data-theme="dark"] .profile-next-service,
html[data-theme="dark"] .profile-next-step,
html[data-theme="dark"] .stories-section,
html[data-theme="dark"] .price-summary-box,
html[data-theme="dark"] .ticket-tier-card,
html[data-theme="dark"] .speaker-card,
html[data-theme="dark"] .countdown-box,
html[data-theme="dark"] .cart-summary-box,
html[data-theme="dark"] .cart-page-card,
html[data-theme="dark"] .cart-order-summary,
html[data-theme="dark"] .checkout-form,
html[data-theme="dark"] .impact-card,
html[data-theme="dark"] .amount-card,
html[data-theme="dark"] .module-modal-card {
  background: linear-gradient(145deg, hsla(var(--primary-h), 28%, 21%, 0.82) 0%, hsla(var(--primary-h), 25%, 15%, 0.90) 100%) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid hsla(var(--primary-h), 25%, 70%, 0.06) !important;
  color: var(--text-primary) !important;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.35), inset 0 1px 0 hsla(var(--primary-h), 30%, 80%, 0.05) !important;
}

html[data-theme="dark"] .church-card:hover,
html[data-theme="dark"] .church-grid-card:hover,
html[data-theme="dark"] .channel-card:hover,
html[data-theme="dark"] .product-card:hover,
html[data-theme="dark"] .resource-card:hover,
html[data-theme="dark"] .event-card:hover,
html[data-theme="dark"] .speaker-card:hover,
html[data-theme="dark"] .card:hover {
  background: linear-gradient(145deg, hsla(var(--primary-h), 30%, 25%, 0.85) 0%, hsla(var(--primary-h), 28%, 18%, 0.92) 100%) !important;
  border-color: hsla(var(--primary-h), 35%, 70%, 0.12) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), inset 0 1px 0 hsla(var(--primary-h), 40%, 80%, 0.09) !important;
}
html[data-theme="dark"] .pastor-readable img {
  background-color: var(--surface-soft) !important;
}
html[data-theme="dark"] .kpi-card .icon,
html[data-theme="dark"] .category-icon,
html[data-theme="dark"] .avatar,
html[data-theme="dark"] .profile-side-heading > span,
html[data-theme="dark"] .info-card-icon {
  background-color: var(--surface-soft) !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] .ministry-chip-grid .tag,
html[data-theme="dark"] .tag,
html[data-theme="dark"] .tag-row .tag,
html[data-theme="dark"] .badge,
html[data-theme="dark"] .filter-chip,
html[data-theme="dark"] .filter-pill,
html[data-theme="dark"] .category-pill,
html[data-theme="dark"] .badge-pill,
html[data-theme="dark"] .status-badge {
  background-color: var(--surface-soft) !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
}

/* 4. Navigation, Headers, Rails, Tabs & Account Menus */
html[data-theme="dark"] .topbar,
html[data-theme="dark"] .dash-topbar {
  background: hsla(var(--primary-h), 42%, 7%, 0.94) !important;
  border-bottom-color: var(--border-subtle) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}
html[data-theme="dark"] body.member-app-shell .profile-app-header,
html[data-theme="dark"] body.member-app-shell .member-shell-header {
  background: var(--surface) !important;
  border-bottom-color: var(--border-subtle) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}
html[data-theme="dark"] .dash-sidebar,
html[data-theme="dark"] .profile-left-rail,
html[data-theme="dark"] .member-shell-rail,
html[data-theme="dark"] .messages-sidebar {
  background: var(--surface) !important;
  border-right-color: var(--border) !important;
}
html[data-theme="dark"] .dash-nav a,
html[data-theme="dark"] .dash-nav button,
html[data-theme="dark"] .profile-rail-nav a,
html[data-theme="dark"] .profile-rail-nav a svg {
  color: var(--text-secondary) !important;
}
html[data-theme="dark"] .dash-nav a:hover,
html[data-theme="dark"] .dash-nav button:hover,
html[data-theme="dark"] .profile-rail-nav a:hover {
  background-color: var(--surface-soft) !important;
  color: var(--primary) !important;
}
html[data-theme="dark"] .dash-nav a.active,
html[data-theme="dark"] .profile-rail-nav a.active {
  background-color: var(--surface-soft) !important;
  color: var(--primary) !important;
}
html[data-theme="dark"] .profile-app-search {
  background-color: var(--input-bg) !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] .profile-app-search input {
  color: var(--text-primary) !important;
}
html[data-theme="dark"] .profile-app-account {
  color: var(--text-primary) !important;
}
html[data-theme="dark"] .profile-app-account button {
  color: var(--text-primary) !important;
}
html[data-theme="dark"] .profile-app-account button:hover {
  background-color: var(--surface-soft) !important;
}
html[data-theme="dark"] .profile-mobile-menu {
  background-color: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
}
html[data-theme="dark"] .church-tabs-nav {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] .church-tab-button {
  color: var(--text-secondary) !important;
}
html[data-theme="dark"] .church-tab-button + .church-tab-button {
  border-left-color: var(--border) !important;
}
html[data-theme="dark"] .church-tab-button:hover {
  background-color: var(--surface-soft) !important;
  color: var(--primary) !important;
}
html[data-theme="dark"] .church-tab-button.active {
  color: var(--primary) !important;
}
html[data-theme="dark"] .lang-selector-btn {
  background-color: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
}
html[data-theme="dark"] .lang-selector-panel {
  background-color: var(--dropdown-bg) !important;
  border-color: var(--dropdown-border) !important;
  box-shadow: var(--shadow) !important;
}
html[data-theme="dark"] .lang-selector-panel button {
  color: var(--text-primary) !important;
}
html[data-theme="dark"] .lang-selector-panel button:hover {
  background-color: var(--dropdown-hover) !important;
}
html[data-theme="dark"] .member-account-menu {
  background-color: var(--dropdown-bg) !important;
  border-color: var(--dropdown-border) !important;
  box-shadow: var(--shadow) !important;
  color: var(--text-primary) !important;
}
html[data-theme="dark"] .member-account-menu-identity > strong {
  color: var(--text-primary) !important;
}
html[data-theme="dark"] .member-account-menu-identity > span {
  color: var(--text-muted) !important;
}
html[data-theme="dark"] .member-account-menu a,
html[data-theme="dark"] .member-account-menu button {
  background-color: var(--surface-soft) !important;
  color: var(--text-primary) !important;
}
html[data-theme="dark"] .member-account-menu a:hover,
html[data-theme="dark"] .member-account-menu button:hover {
  background-color: var(--dropdown-hover) !important;
}

/* 5. Modals, Overlays, Dialogs & Drawers */
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .alert-modal,
html[data-theme="dark"] .member-auth-card,
html[data-theme="dark"] .login-modal-card,
html[data-theme="dark"] .profile-modal-card,
html[data-theme="dark"] .global-video-modal-content,
html[data-theme="dark"] .global-audio-modal-content,
html[data-theme="dark"] .form-success-overlay,
html[data-theme="dark"] .sticky-connection-card,
html[data-theme="dark"] .cart-drawer,
html[data-theme="dark"] .checkout-modal {
  background-color: var(--modal-bg) !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
  box-shadow: var(--shadow) !important;
}
html[data-theme="dark"] .modal-backdrop,
html[data-theme="dark"] .alert-modal-backdrop,
html[data-theme="dark"] .login-modal-overlay,
html[data-theme="dark"] .global-video-modal,
html[data-theme="dark"] .global-audio-modal,
html[data-theme="dark"] body[data-page="profile"].visit-panel-open::after {
  background: var(--modal-overlay) !important;
  backdrop-filter: blur(8px) !important;
}
html[data-theme="dark"] .visit-panel-close,
html[data-theme="dark"] .member-auth-close,
html[data-theme="dark"] .global-video-modal-close,
html[data-theme="dark"] .global-audio-modal-close {
  background-color: var(--surface-soft) !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
}

/* 6. Tables, Lists & Dividers */
html[data-theme="dark"] table {
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
}
html[data-theme="dark"] thead th,
html[data-theme="dark"] table th {
  background-color: var(--surface-soft) !important;
  border-color: var(--border) !important;
  color: var(--text-secondary) !important;
}
html[data-theme="dark"] tbody td,
html[data-theme="dark"] table td {
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
}
html[data-theme="dark"] tbody tr:nth-child(even) td {
  background-color: hsla(var(--primary-h), 20%, 15%, 0.15) !important;
}
html[data-theme="dark"] .field-category {
  border-top-color: var(--border) !important;
}
html[data-theme="dark"] .admin-filter-row {
  border-bottom-color: var(--border) !important;
}

/* 7. Livestream & Messaging Modules */
html[data-theme="dark"] .stream-chat-wrapper,
html[data-theme="dark"] .stream-chat-header,
html[data-theme="dark"] .stream-chat-messages,
html[data-theme="dark"] .messages-page,
html[data-theme="dark"] .messages-main,
html[data-theme="dark"] .message-thread-header,
html[data-theme="dark"] .message-thread-history {
  background-color: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
}
html[data-theme="dark"] .stream-chat-form-container,
html[data-theme="dark"] .message-composer-bar {
  background-color: var(--surface-soft) !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] .stream-chat-form-inner,
html[data-theme="dark"] .message-input-field,
html[data-theme="dark"] .stream-chat-input-field {
  background-color: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--text-primary) !important;
}
html[data-theme="dark"] .chat-message-bubble,
html[data-theme="dark"] .message-bubble-incoming {
  background-color: var(--surface-soft) !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
}
html[data-theme="dark"] .message-bubble-outgoing {
  background-color: var(--primary) !important;
  color: #ffffff !important;
}
html[data-theme="dark"] .conversation-list-item:hover {
  background-color: var(--surface-soft) !important;
}
html[data-theme="dark"] .conversation-list-item.active {
  background-color: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.18) !important;
}

/* 8. Channels, Commerce, Resources & Reader */
html[data-theme="dark"] .module-hero,
html[data-theme="dark"] .store-hero,
html[data-theme="dark"] .channels-hero,
html[data-theme="dark"] .resources-hero {
  background: linear-gradient(145deg, var(--background-secondary), var(--background)) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
}
html[data-theme="dark"] .module-toolbar {
  background-color: var(--surface) !important;
  border-color: var(--border-subtle) !important;
  color: var(--text-primary) !important;
}
html[data-theme="dark"] .module-search,
html[data-theme="dark"] .module-select {
  background-color: var(--surface-soft) !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
}
html[data-theme="dark"] .channel-card,
html[data-theme="dark"] .store-product-card,
html[data-theme="dark"] .resource-card,
html[data-theme="dark"] .event-card {
  background-color: var(--surface) !important;
  border-color: var(--border-subtle) !important;
  color: var(--text-primary) !important;
}
html[data-theme="dark"] .channel-card h3,
html[data-theme="dark"] .store-product-card h3,
html[data-theme="dark"] .resource-card h3 {
  color: var(--text-primary) !important;
}
html[data-theme="dark"] .resource-reader-wrapper,
html[data-theme="dark"] .reader-page-viewport {
  background-color: var(--background) !important;
  color: var(--text-primary) !important;
}
html[data-theme="dark"] .reader-toolbar,
html[data-theme="dark"] .reader-toc-sidebar {
  background-color: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
}
html[data-theme="dark"] .donation-impact-gallery {
  background: var(--background) !important;
}

/* 9. Leadership, Stories & Profile Sections */
html[data-theme="dark"] .leader-bio h2.leader-name,
html[data-theme="dark"] .leader-facts strong,
html[data-theme="dark"] .testimony-user-info h4,
html[data-theme="dark"] .stories-heading h3 {
  color: var(--text-primary) !important;
}
html[data-theme="dark"] .leader-bio-text,
html[data-theme="dark"] .leader-facts small,
html[data-theme="dark"] .testimony-text,
html[data-theme="dark"] .testimony-user-info span {
  color: var(--text-secondary) !important;
}
html[data-theme="dark"] .leader-facts > div {
  border-right-color: var(--border) !important;
}
html[data-theme="dark"] .leader-bio .kicker {
  background-color: var(--surface-soft) !important;
  color: var(--primary) !important;
}

/* Explicit Theme Control for Slider Cards in Light vs Dark Mode */
html:not([data-theme="dark"]) .tiny-church-card {
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  background: rgba(255, 255, 255, 0.94) !important;
  color: var(--text-primary) !important;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06) !important;
}
html:not([data-theme="dark"]) .tiny-church-card:hover {
  border-color: var(--primary) !important;
  background: #ffffff !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12) !important;
}
html:not([data-theme="dark"]) .tiny-card-name {
  color: var(--text-primary) !important;
}
html:not([data-theme="dark"]) .tiny-card-details {
  color: #64748b !important;
}
html:not([data-theme="dark"]) .tiny-card-tag {
  color: var(--gold-text, #92400e) !important;
}
html:not([data-theme="dark"]) .slider-loading {
  color: #64748b !important;
}

html[data-theme="dark"] .tiny-church-card {
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(20, 31, 54, 0.85) !important;
  color: #f8fafc !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}
html[data-theme="dark"] .tiny-church-card:hover {
  border-color: var(--primary) !important;
  background: rgba(26, 41, 72, 0.95) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.6) !important;
}
html[data-theme="dark"] .tiny-card-name {
  color: #f8fafc !important;
}
html[data-theme="dark"] .tiny-card-details {
  color: #94a3b8 !important;
}
html[data-theme="dark"] .tiny-card-tag {
  color: var(--gold) !important;
}
html[data-theme="dark"] .slider-loading {
  color: #94a3b8 !important;
}

/* ==========================================================================
   UNIVERSAL THEME-COLORED BUTTON ENGINE (LIGHT & DARK MODE)
   Guarantees all primary & theme buttons preserve selected spectrum accent color
   ========================================================================== */
.button.primary,
.btn-primary,
.search-submit-button,
.button.search-submit-button,
.profile-primary-action,
.profile-new-here,
.btn-submit,
.auth-submit-btn,
a.button.primary,
button.primary,
button.search-submit-button,
button[type="submit"].primary,
html[data-theme="dark"] .button.primary,
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .search-submit-button,
html[data-theme="dark"] .button.search-submit-button,
html[data-theme="dark"] .profile-primary-action,
html[data-theme="dark"] .profile-new-here,
html[data-theme="dark"] .btn-submit,
html[data-theme="dark"] .auth-submit-btn,
html[data-theme="dark"] a.button.primary,
html[data-theme="dark"] button.primary,
html[data-theme="dark"] button.search-submit-button,
html[data-theme="dark"] button[type="submit"].primary {
  background: var(--gradient-brand, var(--primary-gradient, var(--primary))) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 6px 20px hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.35) !important;
}

.button.primary:hover,
.btn-primary:hover,
.search-submit-button:hover,
.button.search-submit-button:hover,
.profile-primary-action:hover,
.profile-new-here:hover,
.btn-submit:hover,
.auth-submit-btn:hover,
a.button.primary:hover,
button.primary:hover,
button.search-submit-button:hover,
button[type="submit"].primary:hover,
html[data-theme="dark"] .button.primary:hover,
html[data-theme="dark"] .btn-primary:hover,
html[data-theme="dark"] .search-submit-button:hover,
html[data-theme="dark"] .button.search-submit-button:hover,
html[data-theme="dark"] .profile-primary-action:hover,
html[data-theme="dark"] .profile-new-here:hover,
html[data-theme="dark"] .btn-submit:hover,
html[data-theme="dark"] .auth-submit-btn:hover,
html[data-theme="dark"] a.button.primary:hover,
html[data-theme="dark"] button.primary:hover,
html[data-theme="dark"] button.search-submit-button:hover,
html[data-theme="dark"] button[type="submit"].primary:hover {
  background: var(--primary-hover, hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) - 7%))) !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 28px hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.5) !important;
}

/* Universal Gold Buttons */
.button.gold,
.btn-gold,
a.button.gold,
button.gold,
html[data-theme="dark"] .button.gold,
html[data-theme="dark"] .btn-gold,
html[data-theme="dark"] a.button.gold,
html[data-theme="dark"] button.gold {
  background: var(--gold-gradient, var(--gold)) !important;
  color: #000000 !important;
  border: none !important;
  box-shadow: 0 6px 20px rgba(var(--gold-rgb), 0.35) !important;
}

.button.gold:hover,
.btn-gold:hover,
a.button.gold:hover,
button.gold:hover,
html[data-theme="dark"] .button.gold:hover,
html[data-theme="dark"] .btn-gold:hover,
html[data-theme="dark"] a.button.gold:hover,
html[data-theme="dark"] button.gold:hover {
  background: var(--gold-hover, #d97706) !important;
  color: #000000 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 28px rgba(var(--gold-rgb), 0.45) !important;
}

/* Active Chips & Filter Pills */
html[data-theme="dark"] .filter-pill.active,
html[data-theme="dark"] .category-pill.active,
html[data-theme="dark"] .tab-btn.active,
html[data-theme="dark"] .live-tab-btn.active,
html[data-theme="dark"] .amount-btn.active,
html[data-theme="dark"] .frequency-btn.active {
  background: var(--primary) !important;
  color: #ffffff !important;
  border-color: var(--primary) !important;
}

/* ==========================================================================
   EVENT CARD & GRID DARK MODE FIXES (events.html, index.html, etc.)
   ========================================================================== */
html[data-theme="dark"] .event-card-modern {
  background: var(--surface-card) !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45) !important;
}

html[data-theme="dark"] .event-card-modern:hover {
  border-color: var(--primary) !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6) !important;
}

html[data-theme="dark"] .event-card-modern .event-card-title-new {
  color: var(--text-primary) !important;
}

html[data-theme="dark"] .event-card-modern .event-date-num {
  color: var(--text-primary) !important;
}

html[data-theme="dark"] .event-card-modern .event-date-month {
  color: var(--primary) !important;
}

html[data-theme="dark"] .event-card-modern .event-price-tag-sub {
  background: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.18) !important;
  color: var(--primary) !important;
}

html[data-theme="dark"] .event-card-modern .event-date-divider {
  background: var(--border) !important;
}

html[data-theme="dark"] .event-card-modern .event-location-pill {
  color: var(--text-muted) !important;
}

html[data-theme="dark"] .event-card-modern .event-card-desc {
  color: var(--text-secondary) !important;
}

html[data-theme="dark"] .event-card-top-badge {
  background: rgba(15, 23, 42, 0.88) !important;
  color: #f8fafc !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

/* Gathering / Schedule Cards on Profile Page */
html[data-theme="dark"] .gathering-modern-card {
  background: var(--surface-card) !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
}
html[data-theme="dark"] .gathering-card-header h4 {
  color: var(--text-primary) !important;
}
html[data-theme="dark"] .gathering-card-body p {
  color: var(--text-secondary) !important;
}

/* Master Giving Cards & Pillar Cards on Donate Page */
html[data-theme="dark"] .master-giving-card,
html[data-theme="dark"] .master-kpi-card,
html[data-theme="dark"] .master-pillar-card,
html[data-theme="dark"] .impact-media-card,
html[data-theme="dark"] .hero-impact-card,
html[data-theme="dark"] .app-banner-card,
html[data-theme="dark"] .footer-contact-card {
  background: var(--surface-card) !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
}

/* ==========================================================================
   Member Auth Modal (.member-auth-modal) - Fixed Overlay Popup
   ========================================================================== */
.member-auth-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
  background: rgba(15, 23, 42, 0.65) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease !important;
  box-sizing: border-box !important;
}

.member-auth-modal.is-open {
  display: flex !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

body.member-auth-open {
  overflow: hidden !important;
}

.member-auth-card {
  position: relative !important;
  width: 100% !important;
  max-width: 440px !important;
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  border-radius: 24px !important;
  padding: 32px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
  color: var(--text-primary) !important;
  transform: scale(0.95) translateY(10px) !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-sizing: border-box !important;
}

.member-auth-modal.is-open .member-auth-card {
  transform: scale(1) translateY(0) !important;
}

.member-auth-close {
  position: absolute !important;
  top: 18px !important;
  right: 18px !important;
  display: grid !important;
  width: 36px !important;
  height: 36px !important;
  place-items: center !important;
  border-radius: 50% !important;
  border: 1px solid var(--border) !important;
  background: var(--surface-soft) !important;
  color: var(--text-muted) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.member-auth-close:hover {
  background: var(--border) !important;
  color: var(--text-primary) !important;
}

.member-auth-icon {
  display: grid !important;
  width: 52px !important;
  height: 52px !important;
  place-items: center !important;
  border-radius: 16px !important;
  background: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.12) !important;
  color: var(--primary) !important;
  margin-bottom: 20px !important;
}

.member-auth-card h2 {
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  color: var(--text-primary) !important;
  margin: 0 0 8px 0 !important;
}

.member-auth-card p {
  color: var(--text-secondary) !important;
  font-size: 0.9rem !important;
  line-height: 1.5 !important;
  margin: 0 0 24px 0 !important;
}

.member-auth-form {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

.member-auth-google {
  min-height: 48px;
  margin: 4px 0 0;
  background: var(--surface, #ffffff);
}

.member-auth-google svg {
  flex: 0 0 auto;
}

.member-auth-google:disabled {
  opacity: 0.65;
  cursor: progress;
  transform: none;
}

.member-auth-divider {
  margin: 2px 0 0;
}

.member-auth-form label {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
}

.member-auth-form input {
  height: 46px !important;
  border-radius: 12px !important;
  border: 1px solid var(--border) !important;
  background: var(--input-bg) !important;
  color: var(--input-text) !important;
  padding: 0 14px !important;
  font-size: 0.92rem !important;
  outline: none !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
  box-sizing: border-box !important;
}

.member-auth-form input:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.18) !important;
}

.member-auth-submit {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: 48px !important;
  margin-top: 8px !important;
  border-radius: 12px !important;
  border: none !important;
  background: var(--gradient-brand, var(--primary-gradient, var(--primary))) !important;
  color: #ffffff !important;
  font-size: 0.95rem !important;
  font-weight: 750 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 8px 24px hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.35) !important;
}

.member-auth-submit:hover {
  background: var(--primary-hover) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 12px 28px hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.45) !important;
}

.member-auth-submit:disabled {
  opacity: 0.65 !important;
  cursor: progress !important;
  transform: none !important;
}

.member-auth-error {
  margin: 0 !important;
  padding: 10px 12px !important;
  border-radius: 10px !important;
  background: hsla(0, 84%, 60%, 0.12) !important;
  color: hsl(0, 72%, 46%) !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
}

.member-auth-hint {
  margin: 0 !important;
  text-align: center !important;
  font-size: 0.82rem !important;
  color: var(--text-secondary) !important;
}

.member-auth-hint a {
  color: var(--primary) !important;
  font-weight: 700 !important;
}

/* Dark Mode Overrides */
html[data-theme="dark"] .member-auth-modal {
  background: rgba(3, 7, 18, 0.82) !important;
}

html[data-theme="dark"] .member-auth-card {
  background: var(--surface-card) !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6) !important;
}

html[data-theme="dark"] .member-auth-close {
  background: var(--surface-soft) !important;
  border-color: var(--border) !important;
  color: var(--text-muted) !important;
}

html[data-theme="dark"] .member-auth-close:hover {
  background: var(--border) !important;
  color: var(--text-primary) !important;
}

/* ==========================================================================
   UNIVERSAL CHURCH TAB NAVIGATION THEME ACCENT (LIGHT & DARK MODE)
   Active tab: theme-colored icon, theme-colored text, theme-colored bottom underline.
   No outer colored rectangle borders!
   ========================================================================== */
.church-tabs-nav,
body[data-page="profile"] .church-tabs-nav {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
}

body[data-page="profile"].member-shell-embed .church-tabs-nav {
  top: 10px !important;
}

.church-tab-button,
body[data-page="profile"] .church-tab-button {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--text-secondary) !important;
}

.church-tab-button + .church-tab-button,
body[data-page="profile"] .church-tab-button + .church-tab-button {
  border-left: 1px solid var(--border) !important;
}

.church-tab-button svg,
.church-tab-button i,
body[data-page="profile"] .church-tab-button svg,
body[data-page="profile"] .church-tab-button i {
  color: var(--text-muted) !important;
  transition: color 0.2s ease;
}

.church-tab-button:hover,
body[data-page="profile"] .church-tab-button:hover {
  background: var(--primary-surface) !important;
  color: var(--primary) !important;
}

.church-tab-button:hover svg,
.church-tab-button:hover i,
body[data-page="profile"] .church-tab-button:hover svg,
body[data-page="profile"] .church-tab-button:hover i {
  color: var(--primary) !important;
}

.church-tab-button.active,
body[data-page="profile"] .church-tab-button.active,
html[data-theme="dark"] .church-tab-button.active,
html[data-theme="dark"] body[data-page="profile"] .church-tab-button.active {
  background: transparent !important;
  color: var(--primary) !important;
  border: none !important;
  box-shadow: none !important;
}

.church-tab-button.active svg,
.church-tab-button.active i,
body[data-page="profile"] .church-tab-button.active svg,
body[data-page="profile"] .church-tab-button.active i,
html[data-theme="dark"] .church-tab-button.active svg,
html[data-theme="dark"] .church-tab-button.active i,
html[data-theme="dark"] body[data-page="profile"] .church-tab-button.active svg,
html[data-theme="dark"] body[data-page="profile"] .church-tab-button.active i {
  color: var(--primary) !important;
}

.church-tab-button.active::after,
body[data-page="profile"] .church-tab-button.active::after,
html[data-theme="dark"] .church-tab-button.active::after,
html[data-theme="dark"] body[data-page="profile"] .church-tab-button.active::after {
  position: absolute;
  right: 18px;
  bottom: 0;
  left: 18px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--primary) !important;
  content: "";
  box-shadow: 0 0 10px hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.45) !important;
}

/* ==========================================================================
   MEMBER SHELL HEADER & PROFILE ACCOUNT MENU FIXES
   ========================================================================== */

/* Header Grid & Alignment */
.member-app-shell .member-shell-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  min-height: 72px !important;
  height: 72px !important;
  padding: 0 24px !important;
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
  box-sizing: border-box !important;
}

.member-app-shell .profile-app-brand {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: var(--text-primary) !important;
  font-size: 1.18rem !important;
  font-weight: 900 !important;
  text-decoration: none !important;
  flex-shrink: 0 !important;
}

.member-app-shell .profile-app-church,
.member-app-shell .member-section-context {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  height: 42px !important;
  padding: 0 14px !important;
  border-radius: 12px !important;
  background: var(--surface-soft) !important;
  border: 1px solid var(--border) !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
}

.member-app-shell .profile-app-search {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  height: 42px !important;
  flex: 1 1 auto !important;
  max-width: 440px !important;
  padding: 0 14px !important;
  border-radius: 12px !important;
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
  color: var(--text-muted) !important;
  box-sizing: border-box !important;
}

.member-app-shell .profile-app-search input {
  height: 100% !important;
  width: 100% !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  color: var(--text-primary) !important;
  font: inherit !important;
  font-size: 0.84rem !important;
}

.member-shell-actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-shrink: 0 !important;
}

.member-shell-actions .theme-control-button,
.member-shell-actions .theme-dropdown-btn,
.member-shell-actions .theme-toggle-btn,
.member-shell-actions .lang-selector-btn,
.member-shell-actions .member-header-giving,
.member-shell-actions .profile-app-account {
  height: 42px !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.member-shell-actions .lang-selector-btn {
  padding: 0 12px !important;
  border-radius: 12px !important;
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
  color: var(--text-primary) !important;
  font-weight: 750 !important;
  font-size: 0.8rem !important;
  gap: 6px !important;
  cursor: pointer !important;
}

.member-shell-actions .member-header-giving {
  min-height: 42px !important;
  padding: 0 16px !important;
  border-radius: 12px !important;
  border: 0 !important;
  color: #ffffff !important;
  background: var(--gold-gradient) !important;
  box-shadow: var(--gold-glow) !important;
  font-size: 0.8rem !important;
  font-weight: 850 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  gap: 7px !important;
}

.member-shell-account-wrap {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
}

.member-account-identity {
  display: none;
  min-width: 0;
  text-align: left;
}

.member-account-identity strong,
.member-account-identity small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.member-account-identity strong {
  color: var(--text-primary);
  font-size: 0.88rem;
  font-weight: 850;
  line-height: 1.15;
}

.member-account-identity small {
  margin-top: 3px;
  color: var(--text-secondary);
  font-size: 0.72rem;
  font-weight: 650;
  line-height: 1.15;
}

.member-account-chevron {
  width: 16px;
  height: 16px;
  color: var(--text-secondary);
}

.profile-app-account {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  height: 42px !important;
  padding: 4px 6px !important;
  border-radius: 12px !important;
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
  color: var(--text-primary) !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  transition: all 0.16s ease !important;
}

.profile-app-account:hover {
  border-color: var(--primary) !important;
  background: var(--primary-surface) !important;
}

.member-notification-icon {
  display: grid !important;
  width: 32px !important;
  height: 32px !important;
  place-items: center !important;
  border-radius: 8px !important;
  border: none !important;
  background: transparent !important;
  color: var(--text-secondary) !important;
}

.profile-app-account img {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}

/* Floating Profile Account Dropdown Menu */
.member-account-menu {
  position: absolute !important;
  top: calc(100% + 12px) !important;
  right: 0 !important;
  width: 250px !important;
  padding: 18px !important;
  border-radius: 20px !important;
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.16) !important;
  z-index: 99999 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  box-sizing: border-box !important;
}

.member-account-menu[hidden] {
  display: none !important;
}

.member-account-menu-profile {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 14px;
  padding: 2px 2px 12px;
  border-bottom: 1px solid var(--border-subtle);
}

.member-account-menu-profile .member-account-avatar {
  width: 42px;
  height: 42px;
  flex-basis: 42px;
  font-size: .84rem !important;
}

.member-account-menu-identity {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.member-account-menu-identity strong,
.member-account-menu-identity > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.member-account-menu-identity > strong {
  display: block !important;
  font-size: 0.98rem !important;
  font-weight: 850 !important;
  color: var(--text-primary) !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}

.member-account-menu-identity > span {
  display: block !important;
  font-size: 0.78rem !important;
  color: var(--text-secondary) !important;
  margin-top: -4px !important;
  margin-bottom: 6px !important;
}

/* Keep the dropdown identity as one row despite the legacy generic span rules. */
.member-account-menu .member-account-menu-profile {
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
}

.member-account-menu .member-account-menu-profile .member-account-avatar {
  display: grid !important;
  width: 42px !important;
  height: 42px !important;
  flex: 0 0 42px !important;
  place-items: center !important;
  margin: 0 !important;
  background: var(--primary) !important;
  color: #ffffff !important;
}

.member-account-menu .member-account-menu-profile .member-account-avatar > img,
.member-account-menu .member-account-menu-profile .member-account-avatar > span {
  grid-area: 1 / 1 !important;
  width: 42px !important;
  height: 42px !important;
  margin: 0 !important;
}

.member-account-menu .member-account-menu-profile .member-account-avatar > span {
  display: grid !important;
  place-items: center !important;
  color: #ffffff !important;
}

.member-account-menu .member-account-menu-profile .member-account-avatar > [hidden] {
  display: none !important;
}

.member-account-menu .member-account-menu-identity {
  display: grid !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  gap: 2px !important;
  margin: 0 !important;
}

.member-account-menu .member-account-menu-identity > strong,
.member-account-menu .member-account-menu-identity > span {
  display: block !important;
  margin: 0 !important;
}

.member-account-menu a {
  min-height: 42px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 0 12px !important;
  border-radius: 12px !important;
  background: #f8fafc !important;
  color: var(--text-primary) !important;
  font-size: 0.85rem !important;
  font-weight: 750 !important;
  text-decoration: none !important;
  border: 1px solid var(--border) !important;
  box-sizing: border-box !important;
  transition: all 0.2s ease !important;
}

.member-account-menu a:hover {
  background: var(--primary-surface) !important;
  color: var(--primary) !important;
  border-color: var(--primary-border) !important;
}

.member-account-menu a b {
  min-width: 22px !important;
  height: 22px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 99px !important;
  background: var(--gradient-brand, var(--primary-gradient, var(--primary))) !important;
  color: #ffffff !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  margin-left: auto !important;
}

.member-account-menu button,
.member-account-menu #member-sign-out {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  min-height: 40px !important;
  padding: 0 14px !important;
  margin-top: 4px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(239, 68, 68, 0.25) !important;
  background: rgba(239, 68, 68, 0.08) !important;
  color: #ef4444 !important;
  font-size: 0.85rem !important;
  font-weight: 750 !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  transition: all 0.2s ease !important;
}

.member-account-menu button:hover,
.member-account-menu #member-sign-out:hover {
  background: rgba(239, 68, 68, 0.16) !important;
  border-color: rgba(239, 68, 68, 0.45) !important;
  color: #dc2626 !important;
}

/* Dark Mode Overrides for Member Account Menu */
html[data-theme="dark"] .member-account-menu {
  background: var(--surface-card) !important;
  border-color: var(--border) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6) !important;
  color: var(--text-primary) !important;
}

html[data-theme="dark"] .member-account-menu-identity > strong {
  color: var(--text-primary) !important;
}

html[data-theme="dark"] .member-account-menu-identity > span {
  color: var(--text-muted) !important;
}

html[data-theme="dark"] .member-account-menu a {
  background: var(--surface-soft) !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
}

html[data-theme="dark"] .member-account-menu a:hover {
  background: var(--primary-surface) !important;
  color: var(--primary) !important;
  border-color: var(--primary-border) !important;
}

.member-account-menu a > svg,
.member-account-menu button > svg {
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
  color: currentColor !important;
  stroke: currentColor !important;
}

/* Member profile and account */
body.account-profile-page {
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at 6% 0%, hsla(var(--primary-h), var(--primary-s), var(--primary-l), .12), transparent 32rem),
    var(--background, #f6f8fc);
  color: var(--text-primary, #0f172a);
}

.account-profile-shell {
  width: min(var(--max), calc(100% - 44px));
  margin: 0 auto;
  padding: 36px 0 72px;
}

.account-profile-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 26px;
}

.account-profile-heading h1 {
  margin: 8px 0 6px;
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(2rem, 4vw, 3.1rem);
  line-height: 1.04;
  letter-spacing: -.035em;
}

.account-profile-heading > div > p:last-child,
.account-profile-card p {
  margin: 0;
  color: var(--text-secondary, #64748b);
  line-height: 1.6;
}

.account-profile-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 !important;
  color: var(--primary) !important;
  font-size: .8rem;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.account-profile-eyebrow svg { width: 17px; height: 17px; }

.account-profile-member-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--primary-border);
  border-radius: 999px;
  background: var(--primary-surface);
  color: var(--primary);
  font-size: .82rem;
  font-weight: 800;
}

.account-profile-member-badge svg { width: 17px; height: 17px; }

.account-profile-notice {
  margin: 0 0 18px;
  padding: 13px 16px;
  border: 1px solid rgba(34, 197, 94, .28);
  border-radius: 14px;
  background: rgba(34, 197, 94, .1);
  color: #15803d;
  font-weight: 750;
}

.account-profile-notice[data-kind="error"] {
  border-color: rgba(239, 68, 68, .28);
  background: rgba(239, 68, 68, .09);
  color: #dc2626;
}

.account-profile-card {
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 24px;
  background: var(--surface, #fff);
  box-shadow: var(--shadow-card, 0 14px 40px rgba(15, 23, 42, .07));
  padding: 28px;
  box-sizing: border-box;
}

@media (max-width: 640px) {
  .account-profile-card {
    padding: 20px 18px;
    border-radius: 18px;
  }
}

.account-profile-identity-card {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 22px;
  padding: 24px 28px;
}

.account-avatar-wrap {
  width: 104px;
  height: 104px;
  flex: 0 0 104px;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 4px solid var(--surface, #fff);
  border-radius: 50%;
  outline: 2px solid var(--primary-border);
  background: var(--gradient-brand, var(--primary-gradient, var(--primary)));
  box-shadow: 0 12px 28px hsla(var(--primary-h), var(--primary-s), var(--primary-l), .22);
}

.account-avatar-wrap img { width: 100%; height: 100%; object-fit: cover; }
.account-avatar-wrap span { color: #fff; font-size: 1.8rem; font-weight: 900; letter-spacing: -.04em; }
.account-avatar-copy { min-width: 0; }
.account-avatar-copy h2, .account-security-row h2 { margin: 0 0 4px; font-size: 1.08rem; }
.account-avatar-copy small { display: block; margin-top: 10px; color: var(--text-muted, #94a3b8); }

.account-profile-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

.account-profile-button {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 15px;
  border-radius: 12px;
  font: inherit;
  font-size: .86rem;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.account-profile-button:hover { transform: translateY(-1px); }
.account-profile-button svg { width: 17px; height: 17px; }
.account-profile-button-primary { border: 0; background: var(--gradient-brand, var(--primary)); color: #fff; box-shadow: 0 8px 20px hsla(var(--primary-h), var(--primary-s), var(--primary-l), .23); }
.account-profile-button-quiet { border: 1px solid var(--border); background: var(--surface-soft, #f8fafc); color: var(--text-primary); }
.account-profile-button-quiet:hover { border-color: var(--primary-border); color: var(--primary); }
.account-profile-button:disabled { opacity: .52; cursor: not-allowed; transform: none; box-shadow: none; }

.account-profile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.account-profile-grid[hidden],
.account-security-standalone-form[hidden] { display: none !important; }
.account-profile-form { padding: 28px; }

.account-profile-card-title {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-subtle, var(--border));
}

.account-profile-card-title > span,
.account-security-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: var(--primary-surface);
  color: var(--primary);
}

.account-profile-card-title svg, .account-security-icon svg { width: 20px; height: 20px; }
.account-profile-card-title h2 { margin: 0 0 3px; font-size: 1.05rem; }
.account-profile-card-title p { font-size: .86rem; }

.account-profile-form > label,
#profile-password-fields > label {
  display: grid;
  gap: 7px;
  margin-bottom: 18px;
  color: var(--text-primary);
  font-size: .86rem;
  font-weight: 780;
}

.account-profile-form input {
  width: 100%;
  min-height: 50px;
  box-sizing: border-box;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 13px;
  outline: none;
  background: var(--surface-soft, #f8fafc);
  color: var(--text-primary);
  font: inherit;
  transition: border-color .16s ease, box-shadow .16s ease;
}

.account-profile-form input:focus { border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-surface); }
.account-profile-form input[readonly] { opacity: .72; cursor: not-allowed; }
.account-profile-form label small { color: var(--text-muted, #94a3b8); font-weight: 500; line-height: 1.45; }
.account-profile-submit { width: 100%; margin-top: 2px; }

.account-password-field { position: relative; display: block; }
.account-password-field input { padding-right: 48px; }
.account-password-field button { position: absolute; top: 5px; right: 5px; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 10px; background: transparent; color: var(--text-secondary); cursor: pointer; }
.account-password-field button:hover { background: var(--primary-surface); color: var(--primary); }
.account-password-field svg { width: 18px; height: 18px; }

.account-google-password { min-height: 150px; display: grid; place-items: center; align-content: center; gap: 12px; padding: 24px; border-radius: 16px; background: var(--surface-soft); text-align: center; }
.account-google-password[hidden] { display: none; }
.account-google-password > svg { width: 30px; height: 30px; color: var(--primary); }

.account-security-row { display: flex; align-items: center; gap: 16px; margin-top: 22px; padding: 22px 26px; }
.account-security-row > div { flex: 1 1 auto; min-width: 0; }
.account-security-row .account-profile-button { flex: 0 0 auto; }

.account-security-shell .account-profile-card {
  display: flex;
  flex-direction: column;
}
.account-security-shell .account-profile-card > .account-profile-button,
.account-security-shell .account-profile-card > .account-profile-actions {
  margin-top: auto;
}

.account-security-status-text {
  margin: 0 0 16px;
  color: var(--text-primary);
  font-size: 0.95rem;
  line-height: 1.6;
}
.account-security-user-email {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  word-break: break-all;
  margin-bottom: 8px;
}
.account-security-tags {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.account-security-card-desc {
  margin: 0 0 18px !important;
  color: var(--text-secondary);
  font-size: 0.88rem;
  line-height: 1.55;
}
.account-security-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.account-security-tag svg {
  width: 14px;
  height: 14px;
}
.account-security-tag.tag-success {
  background: rgba(34, 197, 94, 0.14);
  color: #16a34a;
  border: 1px solid rgba(34, 197, 94, 0.28);
}
.account-security-tag.tag-warning {
  background: rgba(245, 158, 11, 0.14);
  color: #d97706;
  border: 1px solid rgba(245, 158, 11, 0.28);
}
.account-security-tag.tag-muted {
  background: var(--surface-soft);
  color: var(--text-muted);
  border: 1px solid var(--border);
}
html[data-theme="dark"] .account-security-tag.tag-success {
  background: rgba(34, 197, 94, 0.2);
  color: #86efac;
  border-color: rgba(34, 197, 94, 0.35);
}
html[data-theme="dark"] .account-security-tag.tag-warning {
  background: rgba(245, 158, 11, 0.2);
  color: #fcd34d;
  border-color: rgba(245, 158, 11, 0.35);
}
html[data-theme="dark"] .account-security-tag.tag-muted {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
}
.account-security-enrollment-box {
  margin-top: 18px;
  padding: 18px;
  border-radius: 14px;
  background: var(--surface-soft);
  border: 1px solid var(--border);
}
.account-security-secret-code {
  display: block;
  margin: 10px 0 16px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--primary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-align: center;
  overflow-wrap: anywhere;
}
.account-security-subform {
  display: grid;
  gap: 12px;
}
.account-security-subform label {
  display: grid;
  gap: 6px;
  font-size: 0.86rem;
  font-weight: 780;
  color: var(--text-primary);
}
.account-security-standalone-form {
  max-width: 560px;
  margin: 0 auto;
}

/* Live showcase play button text visibility in dark mode */
html[data-theme="dark"] .livestream-showcase-play {
  background: #ffffff !important;
  color: #000000 !important;
}
html[data-theme="dark"] .livestream-showcase-play b {
  color: #000000 !important;
}
html[data-theme="dark"] .livestream-showcase-play svg {
  color: #000000 !important;
  fill: #000000 !important;
}
html[data-theme="dark"] .livestream-showcase-card:hover .livestream-showcase-play {
  background: var(--primary, #3b82f6) !important;
  color: #ffffff !important;
}
html[data-theme="dark"] .livestream-showcase-card:hover .livestream-showcase-play b {
  color: #ffffff !important;
}
html[data-theme="dark"] .livestream-showcase-card:hover .livestream-showcase-play svg {
  color: #ffffff !important;
  fill: #ffffff !important;
}

html[data-theme="dark"] .account-profile-notice { color: #86efac; }
html[data-theme="dark"] .account-profile-notice[data-kind="error"] { color: #fca5a5; }

@media (max-width: 800px) {
  .account-profile-shell { width: min(100% - 28px, 680px); padding: 30px 0 54px; }
  .account-profile-heading { align-items: flex-start; flex-direction: column; gap: 14px; }
  .account-profile-grid { grid-template-columns: minmax(0, 1fr); }
  .account-security-row { align-items: flex-start; flex-wrap: wrap; }
  .account-security-row .account-profile-button { width: 100%; }
}

@media (max-width: 520px) {
  .account-profile-identity-card { align-items: flex-start; padding: 22px; }
  .account-avatar-wrap { width: 76px; height: 76px; flex-basis: 76px; }
  .account-avatar-wrap span { font-size: 1.3rem; }
  .account-profile-form { padding: 22px; }
}

/* ==========================================================================
   DYNAMIC THEME ACCENT COLOR FOR ALL ACTION BUTTONS (LIGHT & DARK MODE)
   ========================================================================== */

.channel-contact-button,
a.channel-contact-button,
button.channel-contact-button,
.channel-detail-profile a,
.channel-detail-actions a,
.resource-download-action,
.checkout-pay-button,
.module-primary-action,
.product-add-button,
.store-item-btn {
  background: var(--gradient-brand, var(--primary-gradient, var(--primary))) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 6px 18px hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.32) !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease !important;
}

.channel-contact-button:hover,
a.channel-contact-button:hover,
button.channel-contact-button:hover,
.channel-detail-profile a:hover,
.channel-detail-actions a:hover,
.resource-download-action:hover,
.checkout-pay-button:hover,
.module-primary-action:hover,
.product-add-button:hover,
.store-item-btn:hover {
  background: var(--primary-hover) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 24px hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.45) !important;
  color: #ffffff !important;
}

/* ==========================================================================
   BULLETPROOF THEME COLOR PRESERVATION FOR ALL BUTTONS (LIGHT & DARK MODE)
   Ensures buttons NEVER lose their dynamic theme gradient or color in Dark Mode.
   ========================================================================== */
.button.primary,
.button.btn-primary,
.btn-primary,
.search-submit-button,
.button.search-submit-button,
.profile-primary-action,
.btn-submit,
.auth-submit-btn,
a.button.primary,
button.primary,
button.search-submit-button,
button[type="submit"].primary,
.channel-contact-button,
a.channel-contact-button,
button.channel-contact-button,
.channel-detail-profile a,
.channel-detail-actions a,
.resource-download-action,
.checkout-pay-button,
.module-primary-action,
.product-add-button,
.store-item-btn,
.member-auth-submit,
html[data-theme="dark"] .button.primary,
html[data-theme="dark"] .button.btn-primary,
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .search-submit-button,
html[data-theme="dark"] .button.search-submit-button,
html[data-theme="dark"] .profile-primary-action,
html[data-theme="dark"] .btn-submit,
html[data-theme="dark"] .auth-submit-btn,
html[data-theme="dark"] a.button.primary,
html[data-theme="dark"] button.primary,
html[data-theme="dark"] button.search-submit-button,
html[data-theme="dark"] button[type="submit"].primary,
html[data-theme="dark"] .channel-contact-button,
html[data-theme="dark"] a.channel-contact-button,
html[data-theme="dark"] button.channel-contact-button,
html[data-theme="dark"] .channel-detail-profile a,
html[data-theme="dark"] .channel-detail-actions a,
html[data-theme="dark"] .resource-download-action,
html[data-theme="dark"] .checkout-pay-button,
html[data-theme="dark"] .module-primary-action,
html[data-theme="dark"] .product-add-button,
html[data-theme="dark"] .store-item-btn,
html[data-theme="dark"] .member-auth-submit {
  background: var(--gradient-brand, var(--primary-gradient, var(--primary))) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 6px 18px hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.35) !important;
}

.button.primary:hover,
.btn-primary:hover,
.search-submit-button:hover,
.profile-primary-action:hover,
.channel-contact-button:hover,
a.channel-contact-button:hover,
button.channel-contact-button:hover,
.channel-detail-profile a:hover,
.channel-detail-actions a:hover,
.resource-download-action:hover,
.checkout-pay-button:hover,
.module-primary-action:hover,
.product-add-button:hover,
.store-item-btn:hover,
.member-auth-submit:hover,
html[data-theme="dark"] .button.primary:hover,
html[data-theme="dark"] .btn-primary:hover,
html[data-theme="dark"] .search-submit-button:hover,
html[data-theme="dark"] .profile-primary-action:hover,
html[data-theme="dark"] .channel-contact-button:hover,
html[data-theme="dark"] a.channel-contact-button:hover,
html[data-theme="dark"] button.channel-contact-button:hover,
html[data-theme="dark"] .channel-detail-profile a:hover,
html[data-theme="dark"] .channel-detail-actions a:hover,
html[data-theme="dark"] .resource-download-action:hover,
html[data-theme="dark"] .checkout-pay-button:hover,
html[data-theme="dark"] .module-primary-action:hover,
html[data-theme="dark"] .product-add-button:hover,
html[data-theme="dark"] .store-item-btn:hover,
html[data-theme="dark"] .member-auth-submit:hover {
  background: var(--primary-hover) !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 25px hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.5) !important;
}

/* ==========================================================================
   COMPREHENSIVE DYNAMIC THEME COLOR ACCENTS (LIGHT & DARK MODES)
   ========================================================================== */

/* 1. Event Cards: Month & Price Badge (events.html) */
.event-date-month,
.is-featured-banner .event-date-month,
html[data-theme="dark"] .event-date-month,
html[data-theme="dark"] .is-featured-banner .event-date-month {
  color: var(--primary) !important;
}

.event-price-tag-sub,
.is-featured-banner .event-price-tag-sub,
html[data-theme="dark"] .event-price-tag-sub,
html[data-theme="dark"] .is-featured-banner .event-price-tag-sub {
  color: var(--primary) !important;
  background: var(--primary-surface) !important;
  border: 1px solid var(--primary-border) !important;
}

/* 2. Kickers & Category Badges (livestream.html, channels.html, store.html, etc.) */
.kicker,
.module-kicker,
.broadcast-kicker,
.hero-badge,
html[data-theme="dark"] .kicker,
html[data-theme="dark"] .module-kicker,
html[data-theme="dark"] .broadcast-kicker,
html[data-theme="dark"] .hero-badge {
  color: var(--primary) !important;
  background: var(--primary-surface) !important;
  border-color: var(--primary-border) !important;
}

.kicker svg,
.kicker i,
.module-kicker svg,
.module-kicker i,
html[data-theme="dark"] .kicker svg,
html[data-theme="dark"] .kicker i,
html[data-theme="dark"] .module-kicker svg,
html[data-theme="dark"] .module-kicker i {
  color: var(--primary) !important;
}

/* 3. Livestream Buttons & Chat Send (livestream.html) */
#visit-church-btn,
.stream-action-primary,
.stream-chat-send-btn,
.stream-chat-send,
#stream-chat-submit,
html[data-theme="dark"] #visit-church-btn,
html[data-theme="dark"] .stream-action-primary,
html[data-theme="dark"] .stream-chat-send-btn,
html[data-theme="dark"] .stream-chat-send,
html[data-theme="dark"] #stream-chat-submit {
  background: var(--gradient-brand, var(--primary-gradient, var(--primary))) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 16px hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.35) !important;
}

#visit-church-btn:hover,
.stream-chat-send-btn:hover,
#stream-chat-submit:hover,
html[data-theme="dark"] #visit-church-btn:hover,
html[data-theme="dark"] .stream-chat-send-btn:hover,
html[data-theme="dark"] #stream-chat-submit:hover {
  background: var(--primary-hover) !important;
  color: #ffffff !important;
  transform: translateY(-1px) scale(1.02) !important;
}

#share-stream-btn,
html[data-theme="dark"] #share-stream-btn {
  border: 1px solid var(--primary-border) !important;
  color: var(--primary) !important;
  background: var(--primary-surface) !important;
}

#share-stream-btn:hover,
html[data-theme="dark"] #share-stream-btn:hover {
  border-color: var(--primary) !important;
  background: var(--primary) !important;
  color: #ffffff !important;
}

/* 4. Module Hero Ambient Blobs (store.html, channels.html, resources.html, seller-dashboard.html) */
.module-hero::before,
html[data-theme="dark"] .module-hero::before {
  background: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.22) !important;
}

.module-hero::after,
html[data-theme="dark"] .module-hero::after {
  background: hsla(calc(var(--primary-h) + 25), var(--primary-s), var(--primary-l), 0.18) !important;
}

.store-hero-actions .button i,
.store-hero-actions .button svg,
.module-hero .button i,
.module-hero .button svg {
  color: var(--primary) !important;
}

/* 5. Product & Resource Details (product-detail.html, resource-detail.html) */
.product-detail-category,
.product-detail-rating span:first-child,
.product-detail-features svg,
.product-seller-panel button,
.product-seller-panel a,
.view-seller-link,
.audio-artwork button,
.channel-audio-art button,
#resource-audio-toggle,
.resource-cover-icon,
html[data-theme="dark"] .product-detail-category,
html[data-theme="dark"] .product-detail-rating span:first-child,
html[data-theme="dark"] .product-detail-features svg,
html[data-theme="dark"] .product-seller-panel button,
html[data-theme="dark"] .product-seller-panel a,
html[data-theme="dark"] .view-seller-link,
html[data-theme="dark"] .audio-artwork button,
html[data-theme="dark"] .channel-audio-art button,
html[data-theme="dark"] #resource-audio-toggle,
html[data-theme="dark"] .resource-cover-icon {
  color: var(--primary) !important;
}

.product-thumbnails button.active,
html[data-theme="dark"] .product-thumbnails button.active {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 2px var(--primary-surface) !important;
}

.product-detail-add,
#product-detail-add,
#resource-read-action,
html[data-theme="dark"] .product-detail-add,
html[data-theme="dark"] #product-detail-add,
html[data-theme="dark"] #resource-read-action {
  background: var(--gradient-brand, var(--primary-gradient, var(--primary))) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 10px 28px hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.35) !important;
}

.product-detail-add:hover,
#product-detail-add:hover,
#resource-read-action:hover,
html[data-theme="dark"] .product-detail-add:hover,
html[data-theme="dark"] #product-detail-add:hover,
html[data-theme="dark"] #resource-read-action:hover {
  background: var(--primary-hover) !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 34px hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.45) !important;
}

.resource-download-action,
#resource-download-action,
html[data-theme="dark"] .resource-download-action,
html[data-theme="dark"] #resource-download-action {
  border: 1px solid var(--primary-border) !important;
  color: var(--primary) !important;
  background: var(--primary-surface) !important;
}

.resource-download-action:hover,
#resource-download-action:hover,
html[data-theme="dark"] .resource-download-action:hover,
html[data-theme="dark"] #resource-download-action:hover {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #ffffff !important;
}

/* Universal Dark Mode Faint Tailwind Borders & Timeline Dividers (All Pages) */
html[data-theme="dark"] [class*="border-slate-"],
html[data-theme="dark"] [class*="border-gray-"],
html[data-theme="dark"] [class*="border-zinc-"],
html[data-theme="dark"] [class*="border-neutral-"] {
  border-color: var(--border-subtle) !important;
}

html[data-theme="dark"] [class*="divide-slate-"] > *,
html[data-theme="dark"] [class*="divide-gray-"] > * {
  border-color: var(--border-subtle) !important;
}

html[data-theme="dark"] [class*="before:bg-slate-"],
html[data-theme="dark"] [class*="after:bg-slate-"] {
  background-color: var(--border-subtle) !important;
}

/* Event Profile Clean Canvas & Stand-Out Containers */
html[data-theme="dark"] body[data-page="event-profile"] .tab-panel,
html[data-theme="dark"] body[data-page="event-profile"] section#about,
html[data-theme="dark"] body[data-page="event-profile"] section#speakers,
html[data-theme="dark"] body[data-page="event-profile"] section#schedule,
html[data-theme="dark"] body[data-page="event-profile"] section#faq,
html[data-theme="dark"] body[data-page="event-profile"] #event-tabs-container {
  background: transparent !important;
}

/* 1. Only OUTER Card Containers Receive Background, Border & Shadow with overflow: hidden */
html[data-theme="dark"] body[data-page="event-profile"] .schedule-item-row > div:last-child,
html[data-theme="dark"] body[data-page="event-profile"] section#schedule > .container > div:first-child,
html[data-theme="dark"] body[data-page="event-profile"] .faq-item,
html[data-theme="dark"] body[data-page="event-profile"] #event-expect-grid > div,
html[data-theme="dark"] body[data-page="event-profile"] #event-highlights-list > div,
html[data-theme="dark"] body[data-page="event-profile"] .speaker-portrait-card,
html[data-theme="dark"] body[data-page="event-profile"] .border-slate-200.bg-white,
html[data-theme="dark"] .faq-item,
html[data-theme="dark"] .accordion-item,
html[data-theme="dark"] .resource-detail-includes {
  background: linear-gradient(145deg, hsla(var(--primary-h), 28%, 21%, 0.82) 0%, hsla(var(--primary-h), 25%, 15%, 0.90) 100%) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.35), inset 0 1px 0 hsla(var(--primary-h), 30%, 80%, 0.05) !important;
  color: var(--text-primary) !important;
}

/* 2. Inner Nested Elements Are Transparent - NO Popping Out Double-Boxes & NO Sharp Overlaps */
html[data-theme="dark"] body[data-page="event-profile"] .faq-answer {
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid var(--border-subtle) !important;
  box-shadow: none !important;
  border-radius: 0 0 18px 18px !important;
}

html[data-theme="dark"] body[data-page="event-profile"] form,
html[data-theme="dark"] body[data-page="event-profile"] #schedule-days-container,
html[data-theme="dark"] body[data-page="event-profile"] #schedule-tracks-container {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Clean Input Fields inside Forms (Clean rounded inputs without popping card shadow) */
html[data-theme="dark"] body[data-page="event-profile"] input,
html[data-theme="dark"] body[data-page="event-profile"] textarea,
html[data-theme="dark"] body[data-page="event-profile"] select {
  background: var(--surface-soft) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  color: var(--text-primary) !important;
}

/* Day & Track Filter Buttons inside Selector Bar */
html[data-theme="dark"] body[data-page="event-profile"] #schedule-days-container button {
  background: var(--surface-soft) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  color: var(--text-secondary) !important;
}
html[data-theme="dark"] body[data-page="event-profile"] #schedule-days-container button:hover {
  background: var(--primary-surface) !important;
  color: var(--primary) !important;
}
html[data-theme="dark"] body[data-page="event-profile"] #schedule-days-container button.bg-brand-500,
html[data-theme="dark"] body[data-page="event-profile"] #schedule-days-container button.bg-clay-500,
html[data-theme="dark"] body[data-page="event-profile"] #schedule-days-container button.active {
  background: var(--primary) !important;
  color: #ffffff !important;
  border-color: var(--primary) !important;
}

html[data-theme="dark"] body[data-page="event-profile"] #schedule-tracks-container button {
  background: transparent !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  color: var(--text-secondary) !important;
}
html[data-theme="dark"] body[data-page="event-profile"] #schedule-tracks-container button:hover {
  background: var(--primary-surface) !important;
  color: var(--primary) !important;
}
html[data-theme="dark"] body[data-page="event-profile"] #schedule-tracks-container button.bg-brand-500,
html[data-theme="dark"] body[data-page="event-profile"] #schedule-tracks-container button.bg-clay-500,
html[data-theme="dark"] body[data-page="event-profile"] #schedule-tracks-container button.active {
  background: var(--primary) !important;
  color: #ffffff !important;
  border-color: var(--primary) !important;
}

/* Sticky In-Page Navigation Bar & Tabs */
html[data-theme="dark"] body[data-page="event-profile"] .sticky.top-\[70px\] {
  background: hsla(var(--primary-h), 42%, 7%, 0.94) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
}

html[data-theme="dark"] body[data-page="event-profile"] #local-nav-menu button {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  color: var(--text-secondary) !important;
}
html[data-theme="dark"] body[data-page="event-profile"] #local-nav-menu button:hover {
  color: var(--primary) !important;
}
html[data-theme="dark"] body[data-page="event-profile"] #local-nav-menu button.border-brand-500,
html[data-theme="dark"] body[data-page="event-profile"] #local-nav-menu button.active {
  color: var(--primary) !important;
  border-bottom-color: var(--primary) !important;
}

/* Block Editor & Summary Clean Bounds */
html[data-theme="dark"] .block-editor summary {
  border-radius: 16px !important;
}
html[data-theme="dark"] .block-editor[open] summary {
  border-radius: 16px 16px 0 0 !important;
}
html[data-theme="dark"] .block-editor[open] .editor-body {
  border-radius: 0 0 16px 16px !important;
  border-top: 0 !important;
}

/* System-Wide Headers & Footers Polish (All 25 Pages) */
html[data-theme="dark"] .topbar,
html[data-theme="dark"] .dash-topbar {
  background: hsla(var(--primary-h), 42%, 7%, 0.94) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
}

html[data-theme="dark"] body.member-app-shell .profile-app-header,
html[data-theme="dark"] body.member-app-shell .member-shell-header {
  background: var(--surface) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
}

html[data-theme="dark"] footer,
html[data-theme="dark"] .site-footer,
html[data-theme="dark"] .module-footer {
  background: var(--background) !important;
  border-top: 1px solid var(--border-subtle) !important;
}

/* Clean Tab Navigation Across All Modules */
html[data-theme="dark"] .channel-detail-tabs {
  border-top: 1px solid var(--border-subtle) !important;
  background: transparent !important;
}
html[data-theme="dark"] .channel-detail-tabs a {
  background: transparent !important;
  color: var(--text-secondary) !important;
}
html[data-theme="dark"] .channel-detail-tabs a.active {
  color: var(--primary) !important;
  border-bottom-color: var(--primary) !important;
}

html[data-theme="dark"] .delivery-tabs {
  border: 1px solid var(--border-subtle) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: var(--surface-soft) !important;
}

html[data-theme="dark"] .delivery-tabs label {
  background: transparent !important;
  border-radius: 10px !important;
}

html[data-theme="dark"] .delivery-tabs input:checked + label {
  background: var(--surface-card) !important;
  color: var(--primary) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
}

/* Universal Dark Mode Clean Dividers for Single Content and Article Experiences */
html[data-theme="dark"] .channel-post-author,
html[data-theme="dark"] .channel-post-author *,
html[data-theme="dark"] .channel-media-description,
html[data-theme="dark"] .channel-detail-tabs,
html[data-theme="dark"] .resource-reader-head,
html[data-theme="dark"] .resource-reader-book footer,
html[data-theme="dark"] .channel-article-view header,
html[data-theme="dark"] .resource-article-experience header,
html[data-theme="dark"] .conversation-head,
html[data-theme="dark"] .message-conversation,
html[data-theme="dark"] .channel-platform-stats span + span {
  border-color: var(--border-subtle) !important;
}

/* Universal Clean Text & Non-Button Links (No Unwanted Box Backgrounds) */
html[data-theme="dark"] a:not([class*="button"]):not([class*="btn"]):not([class*="badge"]):not([class*="tag"]):not([class*="pill"]):not([class*="chip"]):not([class*="card"]):not([class*="swatch"]):not(.active) {
  background-color: transparent !important;
  box-shadow: none !important;
}

html[data-theme="dark"] p,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6 {
  background-color: transparent !important;
  box-shadow: none !important;
}

/* ==========================================================================
   Modern Dark Mode UI: Split Cards, Settings Boxes & Typography Normalizer
   ========================================================================== */

/* 1. Email Settings & Messaging Split-Card UI */
html[data-theme="dark"] .email-settings-view {
  background: var(--surface-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 24px !important;
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.4) !important;
}

html[data-theme="dark"] .email-settings-visual {
  background: linear-gradient(145deg, hsla(var(--primary-h), 28%, 21%, 0.82) 0%, hsla(var(--primary-h), 25%, 15%, 0.90) 100%) !important;
  border-right: 1px solid var(--border-subtle) !important;
  color: var(--text-primary) !important;
}

html[data-theme="dark"] .email-settings-visual > span {
  background: var(--surface-soft) !important;
  color: var(--primary) !important;
  border: 1px solid var(--border-subtle) !important;
}

html[data-theme="dark"] .email-settings-visual h2 {
  color: #ffffff !important;
}

html[data-theme="dark"] .email-settings-visual p {
  color: rgba(255, 255, 255, 0.78) !important;
}

html[data-theme="dark"] .email-settings-visual div {
  color: rgba(255, 255, 255, 0.70) !important;
}

html[data-theme="dark"] .email-settings-form {
  background: var(--surface) !important;
}

html[data-theme="dark"] .email-settings-form .module-kicker {
  color: var(--primary) !important;
}

html[data-theme="dark"] .email-settings-form h2 {
  color: #ffffff !important;
}

html[data-theme="dark"] .email-settings-form > label:not(.message-toggle-row) {
  color: rgba(255, 255, 255, 0.78) !important;
}

html[data-theme="dark"] .email-settings-form input[type=email] {
  background: var(--surface-soft) !important;
  border: 1px solid var(--border-subtle) !important;
  color: #ffffff !important;
}

html[data-theme="dark"] .email-provider-row button {
  background: var(--surface-soft) !important;
  border: 1px solid var(--border-subtle) !important;
  color: var(--text-secondary) !important;
}

html[data-theme="dark"] .email-provider-row button:hover {
  background: var(--primary-surface) !important;
  color: var(--primary) !important;
}

html[data-theme="dark"] .email-provider-row button.active {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #ffffff !important;
}

html[data-theme="dark"] .message-toggle-row {
  background: var(--surface-soft) !important;
  border: 1px solid var(--border-subtle) !important;
  color: var(--text-primary) !important;
}

html[data-theme="dark"] .message-toggle-row strong {
  color: #ffffff !important;
}

html[data-theme="dark"] .message-toggle-row small {
  color: rgba(255, 255, 255, 0.60) !important;
}

html[data-theme="dark"] .message-recipient-picker {
  background: transparent !important;
}

html[data-theme="dark"] .message-recipient-picker h2 {
  color: #ffffff !important;
}

html[data-theme="dark"] .message-recipient-picker > p {
  color: rgba(255, 255, 255, 0.78) !important;
}

html[data-theme="dark"] .recipient-results button {
  background: var(--surface) !important;
  border-color: var(--border-subtle) !important;
  color: var(--text-primary) !important;
}

html[data-theme="dark"] .recipient-results button:hover {
  background: var(--surface-soft) !important;
  border-color: var(--primary) !important;
}

html[data-theme="dark"] .recipient-results strong {
  color: #ffffff !important;
}

html[data-theme="dark"] .recipient-results small {
  color: rgba(255, 255, 255, 0.55) !important;
}

html[data-theme="dark"] .conversation-empty {
  color: rgba(255, 255, 255, 0.60) !important;
}

html[data-theme="dark"] .conversation-empty strong {
  color: #ffffff !important;
}

/* 2. Detail Panels, Stats & Experience Boxes */
html[data-theme="dark"] .product-seller-panel,
html[data-theme="dark"] .resource-access-panel,
html[data-theme="dark"] .channel-detail-stats {
  background: var(--surface-soft) !important;
  border: 1px solid var(--border-subtle) !important;
  color: var(--text-primary) !important;
}

html[data-theme="dark"] .product-seller-panel strong,
html[data-theme="dark"] .resource-access-panel strong,
html[data-theme="dark"] .channel-detail-stats strong {
  color: #ffffff !important;
}

html[data-theme="dark"] .product-seller-panel span,
html[data-theme="dark"] .resource-access-panel span,
html[data-theme="dark"] .channel-detail-stats span {
  color: rgba(255, 255, 255, 0.65) !important;
}

html[data-theme="dark"] .checkout-success > div {
  background: var(--surface-card) !important;
  border: 1px solid var(--border-subtle) !important;
  color: var(--text-primary) !important;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.5) !important;
}

html[data-theme="dark"] .resource-reader-book > article {
  color: rgba(255, 255, 255, 0.85) !important;
}

html[data-theme="dark"] .resource-reader-book > article h2 {
  color: #ffffff !important;
}

/* 3. Universal Typography Transparency Normalizer (All 25 Pages) */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] strong,
html[data-theme="dark"] b,
html[data-theme="dark"] .font-extrabold,
html[data-theme="dark"] .font-bold {
  color: #ffffff !important;
}

html[data-theme="dark"] p,
html[data-theme="dark"] .lead,
html[data-theme="dark"] label,
html[data-theme="dark"] .text-slate-600,
html[data-theme="dark"] .text-slate-500,
html[data-theme="dark"] .text-gray-600,
html[data-theme="dark"] .text-gray-500 {
  color: rgba(255, 255, 255, 0.78) !important;
}

html[data-theme="dark"] small,
html[data-theme="dark"] .text-slate-400,
html[data-theme="dark"] .text-gray-400,
html[data-theme="dark"] .meta-info,
html[data-theme="dark"] time,
html[data-theme="dark"] .timestamp {
  color: rgba(255, 255, 255, 0.55) !important;
}

/* Maintain accent highlights where explicitly colored */
html[data-theme="dark"] .text-brand-500,
html[data-theme="dark"] .text-brand-600,
html[data-theme="dark"] .eyebrow-light,
html[data-theme="dark"] .module-kicker,
html[data-theme="dark"] .highlight-link {
  color: var(--primary) !important;
}

/* ==========================================================================
   Modern UI: Search Bars, Composite Fields & Form Controls (All 25 Pages)
   ========================================================================== */

/* 1. Universal Search Bar Wrappers & Composite Containers */
.module-search,
.messages-search,
.profile-app-search,
.search-field,
.search-input-box-main,
.search-box-unified,
.channel-search-bar,
.resource-search-bar {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 14px !important;
  border-radius: 14px !important;
  transition: all 0.2s ease !important;
}

/* Light Mode Search Bars */
.module-search,
.messages-search,
.profile-app-search,
.search-field,
.search-input-box-main,
.search-box-unified {
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
}

.module-search:focus-within,
.messages-search:focus-within,
.profile-app-search:focus-within,
.search-field:focus-within,
.search-input-box-main:focus-within {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px hsla(var(--primary-h), 80%, 55%, 0.15) !important;
}

/* Dark Mode Search Bars */
html[data-theme="dark"] .module-search,
html[data-theme="dark"] .messages-search,
html[data-theme="dark"] .profile-app-search,
html[data-theme="dark"] .search-field,
html[data-theme="dark"] .search-input-box-main,
html[data-theme="dark"] .search-box-unified {
  background: var(--surface-soft) !important;
  border: 1px solid var(--border-subtle) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
}

html[data-theme="dark"] .module-search:focus-within,
html[data-theme="dark"] .messages-search:focus-within,
html[data-theme="dark"] .profile-app-search:focus-within,
html[data-theme="dark"] .search-field:focus-within,
html[data-theme="dark"] .search-input-box-main:focus-within {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px hsla(var(--primary-h), 80%, 55%, 0.22) !important;
}

/* Icons inside Search Bars */
.module-search svg,
.messages-search svg,
.profile-app-search svg,
.module-search i,
.messages-search i,
.profile-app-search i {
  width: 17px !important;
  height: 17px !important;
  flex-shrink: 0 !important;
  color: var(--text-muted) !important;
}

/* STRICT OVERRIDE: Inputs INSIDE Search Wrappers MUST BE 100% TRANSPARENT & BORDERLESS */
.module-search input,
.messages-search input,
.profile-app-search input,
.search-field input,
.search-input-box-main input,
.search-box-unified input,
html[data-theme="dark"] .module-search input,
html[data-theme="dark"] .messages-search input,
html[data-theme="dark"] .profile-app-search input,
html[data-theme="dark"] .search-field input,
html[data-theme="dark"] .search-input-box-main input,
html[data-theme="dark"] .search-box-unified input {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  font-size: 0.92rem !important;
  font-family: inherit !important;
  line-height: normal !important;
}

/* 2. Modern Standalone Form Controls (Inputs, Selects, Textareas) */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="range"]):not(.search-input-inside),
select,
textarea {
  font-family: inherit;
  font-size: 0.92rem;
  border-radius: 12px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Standalone inputs in Dark Mode */
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="range"]),
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background-color: var(--surface-soft) !important;
  border: 1px solid var(--border-subtle) !important;
  color: #ffffff !important;
  border-radius: 12px !important;
}

html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="range"]):not(:where(.module-search input)):focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px hsla(var(--primary-h), 80%, 55%, 0.22) !important;
  outline: none !important;
}

/* Textareas specific styling */
textarea,
html[data-theme="dark"] textarea {
  border-radius: 14px !important;
  padding: 12px 14px !important;
  line-height: 1.6 !important;
}

/* Universal Placeholder Styling */
input::placeholder,
textarea::placeholder {
  color: rgba(15, 23, 42, 0.42);
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: rgba(255, 255, 255, 0.42) !important;
}

/* ==========================================================================
   DEFINITIVE OVERRIDE: All Search Input Elements 100% Transparent & Seamless
   ========================================================================== */
#message-search,
#recipient-search,
#channel-search,
#store-search,
#resource-search,
#seller-product-search,
.messages-search input,
.module-search input,
.profile-app-search input,
.search-field input,
.search-input-box-main input,
.search-box-unified input,
.search-hero-input,
html[data-theme="dark"] #message-search,
html[data-theme="dark"] #recipient-search,
html[data-theme="dark"] #channel-search,
html[data-theme="dark"] #store-search,
html[data-theme="dark"] #resource-search,
html[data-theme="dark"] #seller-product-search,
html[data-theme="dark"] .messages-search input,
html[data-theme="dark"] .module-search input,
html[data-theme="dark"] .profile-app-search input,
html[data-theme="dark"] .search-field input,
html[data-theme="dark"] .search-input-box-main input,
html[data-theme="dark"] .search-box-unified input,
html[data-theme="dark"] .search-hero-input {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  color: var(--text-primary) !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* Ensure outer search wrappers have clean modern styling */
.messages-search,
.module-search,
.profile-app-search,
html[data-theme="dark"] .messages-search,
html[data-theme="dark"] .module-search,
html[data-theme="dark"] .profile-app-search {
  background: var(--surface-soft) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
}

/* ==========================================================================
   UNIFIED SEARCH BARS: Strict Zero-Background & Zero-Border on Focus
   ========================================================================== */
#member-shell-search input,
#message-search,
#recipient-search,
#channel-search,
#store-search,
#resource-search,
#seller-product-search,
.profile-app-search input,
.messages-search input,
.module-search input,
.search-field input,
.search-input-box-main input,
.search-box-unified input,
.search-hero-input,
html[data-theme="dark"] #member-shell-search input,
html[data-theme="dark"] #message-search,
html[data-theme="dark"] #recipient-search,
html[data-theme="dark"] #channel-search,
html[data-theme="dark"] #store-search,
html[data-theme="dark"] #resource-search,
html[data-theme="dark"] #seller-product-search,
html[data-theme="dark"] .profile-app-search input,
html[data-theme="dark"] .messages-search input,
html[data-theme="dark"] .module-search input,
html[data-theme="dark"] .search-field input,
html[data-theme="dark"] .search-input-box-main input,
html[data-theme="dark"] .search-box-unified input,
html[data-theme="dark"] .search-hero-input,
#member-shell-search input:focus,
#message-search:focus,
#recipient-search:focus,
#channel-search:focus,
#store-search:focus,
#resource-search:focus,
#seller-product-search:focus,
.profile-app-search input:focus,
.messages-search input:focus,
.module-search input:focus,
.search-field input:focus,
.search-input-box-main input:focus,
.search-box-unified input:focus,
.search-hero-input:focus,
html[data-theme="dark"] #member-shell-search input:focus,
html[data-theme="dark"] #message-search:focus,
html[data-theme="dark"] #recipient-search:focus,
html[data-theme="dark"] #channel-search:focus,
html[data-theme="dark"] #store-search:focus,
html[data-theme="dark"] #resource-search:focus,
html[data-theme="dark"] #seller-product-search:focus,
html[data-theme="dark"] .profile-app-search input:focus,
html[data-theme="dark"] .messages-search input:focus,
html[data-theme="dark"] .module-search input:focus,
html[data-theme="dark"] .search-field input:focus,
html[data-theme="dark"] .search-input-box-main input:focus,
html[data-theme="dark"] .search-box-unified input:focus,
html[data-theme="dark"] .search-hero-input:focus,
html[data-theme="dark"] body.member-app-shell .profile-app-search input,
html[data-theme="dark"] body.member-app-shell .profile-app-search input:focus {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  color: var(--text-primary) !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* Outer search container focus ring */
.profile-app-search:focus-within,
.messages-search:focus-within,
.module-search:focus-within,
.search-field:focus-within,
.search-input-box-main:focus-within,
html[data-theme="dark"] .profile-app-search:focus-within,
html[data-theme="dark"] .messages-search:focus-within,
html[data-theme="dark"] .module-search:focus-within,
html[data-theme="dark"] .search-field:focus-within,
html[data-theme="dark"] .search-input-box-main:focus-within {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px hsla(var(--primary-h), 80%, 55%, 0.22) !important;
  outline: none !important;
}

/* ==========================================================================
   Subtle White Links & Dynamic Feature Perks (Eliminate Hardcoded Blue)
   ========================================================================== */

/* 1. Back Links & Return Navigation (Subtle White in Dark Mode) */
.product-back-link,
.resource-back-link,
.back-link {
  color: var(--text-primary, #0f172a) !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

html[data-theme="dark"] .product-back-link,
html[data-theme="dark"] .resource-back-link,
html[data-theme="dark"] .back-link,
html[data-theme="dark"] .module-shell > a:first-child {
  color: rgba(255, 255, 255, 0.82) !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

.product-back-link:hover,
.resource-back-link:hover,
.back-link:hover {
  color: var(--primary, #2563eb) !important;
}

html[data-theme="dark"] .product-back-link:hover,
html[data-theme="dark"] .resource-back-link:hover,
html[data-theme="dark"] .back-link:hover,
html[data-theme="dark"] .module-shell > a:first-child:hover {
  color: #ffffff !important;
}

/* 2. Product Detail & Resource Detail Feature Lists */
html[data-theme="dark"] .product-detail-features,
html[data-theme="dark"] .product-detail-features li,
html[data-theme="dark"] .resource-detail-includes ul,
html[data-theme="dark"] .resource-detail-includes li,
html[data-theme="dark"] .product-detail-features li span,
html[data-theme="dark"] .resource-detail-includes li span {
  color: rgba(255, 255, 255, 0.78) !important;
}

/* Feature list checkmark/truck/return icons use dynamic active theme color */
html[data-theme="dark"] .product-detail-features svg,
html[data-theme="dark"] .product-detail-features i,
html[data-theme="dark"] .resource-detail-includes svg,
html[data-theme="dark"] .resource-detail-includes i,
html[data-theme="dark"] .product-detail-features li svg,
html[data-theme="dark"] .resource-detail-includes li svg {
  color: var(--primary) !important;
}

/* Product Detail Shell & Rating */
html[data-theme="dark"] .product-detail-shell,
html[data-theme="dark"] .resource-detail-shell {
  background: var(--surface-card) !important;
  border: 1px solid var(--border-subtle) !important;
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.45) !important;
}

html[data-theme="dark"] .product-detail-description {
  color: rgba(255, 255, 255, 0.78) !important;
}

html[data-theme="dark"] .product-detail-rating {
  color: rgba(255, 255, 255, 0.65) !important;
}

html[data-theme="dark"] .product-detail-rating span:first-child {
  color: var(--primary) !important;
}

html[data-theme="dark"] .product-seller-panel button {
  color: var(--primary) !important;
}

/* ==========================================================================
   Donation Page: Impact Gallery Dynamic Theme & Subtle White Typography
   ========================================================================== */
html[data-theme="dark"] .donation-impact-gallery {
  background: var(--background) !important;
}

html[data-theme="dark"] .impact-gallery-head .section-kicker {
  color: var(--primary) !important;
}

html[data-theme="dark"] .impact-gallery-head h2 {
  color: #ffffff !important;
}

html[data-theme="dark"] .impact-gallery-head p {
  color: rgba(255, 255, 255, 0.78) !important;
}

html[data-theme="dark"] .impact-media-card {
  background: var(--surface-card) !important;
  border: 1px solid var(--border-subtle) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4) !important;
}

html[data-theme="dark"] .impact-video-badge {
  background: var(--surface-soft) !important;
  color: var(--primary) !important;
  border: 1px solid var(--border-subtle) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}

html[data-theme="dark"] .impact-media-overlay {
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.92)) !important;
}

html[data-theme="dark"] .impact-media-overlay strong {
  color: #ffffff !important;
}

html[data-theme="dark"] .impact-media-overlay span {
  color: rgba(255, 255, 255, 0.78) !important;
}

/* ==========================================================================
   CARD GRIDS GAP: 40px spacing between all cards
   ========================================================================== */
.cards-grid,
.events-grid,
.streams-hub-grid,
.channels-grid,
.store-products-grid,
.resources-grid,
.church-cards-grid,
.event-cards-grid,
.stream-cards-grid,
.channel-cards-grid,
.product-cards-grid,
#church-list,
#events-list,
#livestream-grid,
#channels-grid,
#store-products,
#resources-grid {
  gap: 40px !important;
}

@media (max-width: 768px) {
  .cards-grid,
  .events-grid,
  .streams-hub-grid,
  .channels-grid,
  .store-products-grid,
  .resources-grid {
    gap: 28px !important;
  }
}

/* ==========================================================================
   LANDING HOME TOPBAR: Bright White Text Exemption
   ========================================================================== */
body.hero-only-page .topbar .nav-links a,
body[data-page="home"] .topbar .nav-links a,
body.hero-only-page .topbar .nav-links a:visited,
body[data-page="home"] .topbar .nav-links a:visited,
html[data-theme="dark"] body.hero-only-page .topbar .nav-links a,
html[data-theme="dark"] body[data-page="home"] .topbar .nav-links a {
  color: #ffffff !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7) !important;
  opacity: 0.95 !important;
}

body.hero-only-page .topbar .nav-links a:hover,
body[data-page="home"] .topbar .nav-links a:hover,
html[data-theme="dark"] body.hero-only-page .topbar .nav-links a:hover,
html[data-theme="dark"] body[data-page="home"] .topbar .nav-links a:hover {
  color: #ffffff !important;
  opacity: 1 !important;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.9) !important;
}

/* Public header: keep light-mode navigation flat and readable. */
body.hero-only-page .topbar .nav-links a,
body.hero-only-page .topbar .nav-links a:hover,
body[data-page="home"] .topbar .nav-links a,
body[data-page="home"] .topbar .nav-links a:hover {
  text-shadow: none !important;
  filter: none !important;
}

html:not([data-theme="dark"]) body.hero-only-page .topbar .nav-signin-btn,
html[data-theme="light"] body.hero-only-page .topbar .nav-signin-btn,
html:not([data-theme="dark"]) body[data-page="home"] .topbar .nav-signin-btn,
html[data-theme="light"] body[data-page="home"] .topbar .nav-signin-btn {
  border-color: var(--border) !important;
  background: var(--surface-card) !important;
  color: var(--text-primary) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

html:not([data-theme="dark"]) body.hero-only-page .topbar .nav-signin-btn:hover,
html[data-theme="light"] body.hero-only-page .topbar .nav-signin-btn:hover,
html:not([data-theme="dark"]) body[data-page="home"] .topbar .nav-signin-btn:hover,
html[data-theme="light"] body[data-page="home"] .topbar .nav-signin-btn:hover {
  border-color: var(--primary-border) !important;
  background: var(--primary-surface) !important;
  color: var(--primary) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* ==========================================================================
   MEMBER HOME DASHBOARD (SPA HOME)
   ========================================================================== */
.member-home-shell {
  padding: 32px 0 80px;
}

.member-hero-banner {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: 28px;
  padding: 36px 40px;
  margin-bottom: 48px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
}

html[data-theme="dark"] .member-hero-banner {
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}

.member-hero-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
  margin-bottom: 36px;
}

.member-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 99px;
  background: var(--surface-soft);
  color: var(--primary);
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
  border: 1px solid var(--border-subtle);
}

.member-hero-greeting h1 {
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  color: var(--text-primary);
  margin-bottom: 10px;
  letter-spacing: -0.03em;
}

.member-name-highlight {
  color: var(--primary);
}

.member-hero-greeting p {
  color: var(--text-secondary);
  font-size: 1.05rem;
  max-width: 600px;
  line-height: 1.6;
}

.member-verse-pill {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 20px;
  border-radius: 18px;
  background: var(--surface-soft);
  border: 1px solid var(--border-subtle);
  max-width: 380px;
}

.member-verse-pill i {
  color: var(--gold);
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin-top: 2px;
}

.member-verse-pill strong {
  display: block;
  font-size: 0.82rem;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}

.member-verse-pill span {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.45;
  font-style: italic;
}

/* Reuse the church-directory Scripture card on the signed-in Home page. */
.daily-scripture.member-home-scripture {
  position: static;
  flex: 0 1 510px;
  width: min(510px, 100%);
  max-width: 510px;
  margin: 0;
  padding: 24px 30px;
  border-radius: 28px;
}
.member-home-scripture .daily-scripture-label { font-size: 0.82rem; }
.member-home-scripture blockquote { font-size: 1.08rem; }
.member-home-scripture cite { font-size: 0.92rem; }

.member-quick-launchpad {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
}

/* Final fit-and-finish for the video and its adjacent conversation panel. */
.resource-video-experience { gap: 0; }
.resource-video-main { overflow: hidden; border-radius: 18px 0 0 18px; }
.resource-video-frame { border-radius: 18px 0 0 0; }
.resource-video-main .resource-experience-description { margin-top: 0; padding: 18px 24px 30px; }
.resource-video-main .resource-experience-description h1 { margin: 5px 0 7px; font-size: clamp(1.7rem,3.2vw,2.65rem); }
.resource-video-main .resource-experience-description p { margin: 0; line-height: 1.55; }
.resource-comments-panel { border-radius: 0 18px 0 0; box-shadow: none; }
.resource-comment-form { padding-bottom: 15px; }
@media (max-width: 760px) {
  .resource-video-main { border-radius: 16px 16px 0 0; }
  .resource-video-frame { border-radius: 16px 16px 0 0; }
  .resource-comments-panel { border-radius: 0 0 0 0; }
}
html[data-theme="dark"] .resource-detail-shell { background: transparent !important; border-color: transparent !important; box-shadow: none !important; }
html[data-theme="dark"] .resource-media-experience.resource-video-experience { background: transparent !important; border-color: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.resource-comments-panel { background: hsl(var(--primary-h), 30%, 97%); border-color: hsl(var(--primary-h), 22%, 89%); }
html[data-theme="dark"] .resource-comments-panel { background: var(--surface-card); border-color: var(--border-subtle); }
html[data-theme="dark"] .resource-video-main .resource-experience-description { background: color-mix(in srgb, var(--surface-card) 86%, #fff 14%); }
html[data-theme="dark"] .resource-video-main .resource-experience-description h1 { color: var(--text-primary); }
html[data-theme="dark"] .resource-video-main .resource-experience-description p { color: var(--text-secondary); }

.launch-card {
  display: flex;
  flex-direction: column;
  padding: 20px;
  border-radius: 18px;
  background-color: var(--primary) !important;
  background-image: none;
  background-size: cover;
  background-position: center;
  color: #ffffff;
  border: 1px solid hsla(var(--primary-h), var(--primary-s), calc(var(--primary-l) + 15%), 0.35) !important;
  box-shadow: 0 10px 24px hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.28);
  text-decoration: none;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease, background-image 0.35s ease;
  position: relative;
  overflow: hidden;
}

.launch-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, rgba(18, 61, 160, 0.68), rgba(16, 41, 107, 0.88));
  pointer-events: none;
  transition: background 0.3s ease;
}

.launch-card > * { position: relative; z-index: 1; }
.launch-card.launch-spotlight { background-image: url("assets/spotlight/grace-testimony.webp") !important; }
.launch-card.launch-meditation { background-image: url("assets/meditation-lake.png") !important; }
.launch-churches:hover, .launch-churches:focus-visible { background-image: url("assets/church-river-city.png") !important; }
.launch-live:hover, .launch-live:focus-visible { background-image: url("assets/church-audience.jpg") !important; }
.launch-channels:hover, .launch-channels:focus-visible { background-image: url("assets/hero-global-church-clean.png") !important; }
.launch-store:hover, .launch-store:focus-visible { background-image: url("assets/mission-trips.png") !important; }
.launch-card:hover::before, .launch-card:focus-visible::before { background: linear-gradient(145deg, rgba(12, 31, 87, 0.5), rgba(9, 24, 68, 0.76)); }
.launch-card.launch-spotlight .launch-icon { background: rgba(255, 255, 255, 0.24) !important; color: #ffffff !important; }

.launch-card:hover {
  transform: translateY(-4px);
  filter: brightness(1.06);
  box-shadow: 0 16px 36px hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.42);
}

.launch-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.22) !important;
  border: 1px solid rgba(255, 255, 255, 0.38) !important;
  color: #ffffff !important;
  margin-bottom: 14px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  transition: background 0.2s ease, transform 0.2s ease;
}

.launch-icon svg,
.launch-icon i {
  color: #ffffff !important;
  stroke: #ffffff !important;
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.6));
}

.launch-meditation .launch-icon,
.launch-churches .launch-icon,
.launch-live .launch-icon,
.launch-channels .launch-icon,
.launch-store .launch-icon {
  background: rgba(255, 255, 255, 0.24) !important;
  color: #ffffff !important;
}

.launch-card:hover .launch-icon {
  background: rgba(255, 255, 255, 0.32) !important;
  transform: scale(1.05);
}

.launch-text strong {
  display: block;
  font-size: 0.98rem;
  color: #ffffff !important;
  margin-bottom: 4px;
  font-weight: 800;
}

.launch-text span {
  font-size: 0.80rem;
  color: rgba(255, 255, 255, 0.90) !important;
  line-height: 1.4;
}

.launch-arrow {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 18px;
  color: #ffffff !important;
  opacity: 0.85;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.launch-card:hover .launch-arrow {
  transform: translateX(3px);
  opacity: 1;
}

.member-section {
  margin-bottom: 56px;
}

.member-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 24px;
}

.member-section-head h2 {
  font-size: 1.6rem;
  color: var(--text-primary);
  margin-top: 4px;
}

.member-see-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--primary);
  font-weight: 750;
  font-size: 0.92rem;
  text-decoration: none;
}

.member-streams-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.stream-card-v2 {
  border-radius: 20px;
  overflow: hidden;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stream-card-v2:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.16);
}

.stream-card-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.stream-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.live-pill {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 99px;
  background: #e11d48;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.06em;
}

.upcoming-pill {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 4px 10px;
  border-radius: 99px;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 750;
}

.viewer-count {
  position: absolute;
  bottom: 10px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 0.75rem;
}

.stream-card-body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stream-card-body strong {
  font-size: 1.02rem;
  color: var(--text-primary);
}

.stream-card-body span {
  font-size: 0.84rem;
  color: var(--text-secondary);
}

.stream-join-btn {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px;
  border-radius: 11px;
  background: var(--surface-soft);
  color: var(--primary);
  font-weight: 800;
  font-size: 0.88rem;
  text-decoration: none;
  border: 1px solid var(--border-subtle);
  transition: background 0.2s ease;
}

.stream-join-btn:hover {
  background: var(--primary);
  color: #fff;
}

.member-meditation-showcase {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 40px;
  padding: 36px 40px;
  border-radius: 28px;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  align-items: center;
}

.med-showcase-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--primary);
  font-size: 0.8rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}

.med-showcase-copy h2 {
  font-size: 2rem;
  color: var(--text-primary);
  margin-bottom: 12px;
}

.med-showcase-copy p {
  color: var(--text-secondary);
  font-size: 1.02rem;
  line-height: 1.65;
  margin-bottom: 20px;
}

.med-showcase-features {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;
}

.med-showcase-features span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;
  color: var(--text-primary);
  font-weight: 700;
}

.med-showcase-features i {
  color: var(--primary);
  width: 16px;
}

.med-showcase-visual img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 20px;
}

.member-impact-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32px 36px;
  border-radius: 24px;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
}

.member-impact-box h2 {
  color: var(--text-primary);
  margin: 6px 0;
}

.member-impact-box p {
  color: var(--text-secondary);
  margin: 0;
}

/* Homepage Side-by-Side Impact & Study Banners */
.home-banners-side-by-side {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

@media (max-width: 860px) {
  .home-banners-side-by-side {
    grid-template-columns: 1fr;
  }
}

.home-impact-banner-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  padding: 32px 34px;
  border-radius: 24px;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.home-impact-banner-card:hover {
  transform: translateY(-3px);
  border-color: var(--primary);
  box-shadow: var(--shadow-card);
}

.home-impact-banner-card h3 {
  font-size: 1.45rem;
  color: var(--text-primary);
  margin: 6px 0 10px;
}

.home-impact-banner-card p {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
}


/* ==========================================================================
   LANDING PAGE & LIGHT MODE CARD CONTRAST ENHANCEMENTS
   ========================================================================== */
.location-combined-group .country-dropdown {
  background-image: none !important;
}

html:not([data-theme="dark"]) .tiny-card-name {
  color: #0f172a !important;
}

html:not([data-theme="dark"]) .church-card h3,
html:not([data-theme="dark"]) .church-card-title,
html:not([data-theme="dark"]) .event-card h3,
html:not([data-theme="dark"]) .channel-card h3,
html:not([data-theme="dark"]) .product-card h3 {
  color: #0f172a !important;
}

body.hero-only-page .topbar .nav-links a {
  color: #ffffff !important;
}

/* ==========================================================================
   LANDING PAGE & LIGHT MODE CARD CONTRAST ENHANCEMENTS
   ========================================================================== */
.location-combined-group .country-dropdown {
  background-image: none !important;
}

html:not([data-theme="dark"]) .tiny-card-name {
  color: #0f172a !important;
}

html:not([data-theme="dark"]) .church-card h3,
html:not([data-theme="dark"]) .church-card-title,
html:not([data-theme="dark"]) .event-card h3,
html:not([data-theme="dark"]) .channel-card h3,
html:not([data-theme="dark"]) .product-card h3 {
  color: #0f172a !important;
}

body.hero-only-page .topbar .nav-links a {
  color: #ffffff !important;
}

/* ==========================================================================
   MEDITATION SANCTUARY MODULE (2-COLUMN THEME-AWARE IMMERSIVE SYSTEM)
   ========================================================================== */

/* 1. LOBBY VIEW */
body[data-page="meditation"] {
  background: var(--background) !important;
  color: var(--text-primary) !important;
}

body[data-page="meditation"] .meditation-lobby,
.meditation-lobby {
  display: block;
}

body[data-page="meditation"] .meditation-lobby[hidden],
.meditation-lobby[hidden],
body.in-meditation-room .meditation-lobby {
  display: none !important;
}

.meditation-filter-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  margin: 28px 0 40px !important;
  width: 100% !important;
}

.lobby-filter-tabs {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

.lobby-tab-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 22px !important;
  border-radius: 99px !important;
  background: var(--surface) !important;
  border: 1.5px solid var(--border-subtle) !important;
  color: var(--text-primary) !important;
  font-size: 0.92rem !important;
  font-weight: 750 !important;
  cursor: pointer !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
  white-space: nowrap !important;
  transition: all 0.2s ease !important;
}

.lobby-tab-btn:hover {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
  transform: translateY(-1px) !important;
}

.lobby-tab-btn.active {
  background: var(--primary) !important;
  color: #ffffff !important;
  border-color: var(--primary) !important;
  box-shadow: 0 6px 18px hsla(var(--primary-h), 80%, 55%, 0.35) !important;
}

.rooms-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
  gap: 28px !important;
  margin-bottom: 48px !important;
}

.sanctuary-room-card {
  background: var(--surface) !important;
  border: 1.5px solid var(--border-subtle) !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05) !important;
  cursor: pointer !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
  display: flex !important;
  flex-direction: column !important;
}

.sanctuary-room-card:hover {
  transform: translateY(-4px) !important;
  border-color: var(--primary) !important;
  box-shadow: 0 16px 36px hsla(var(--primary-h), 80%, 50%, 0.15) !important;
}

.room-card-cover {
  position: relative !important;
  width: 100% !important;
  height: 180px !important;
  overflow: hidden !important;
}

.room-card-cover img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.4s ease !important;
}

.sanctuary-room-card:hover .room-card-cover img {
  transform: scale(1.05) !important;
}

.room-card-tag {
  position: absolute !important;
  top: 14px !important;
  left: 14px !important;
  padding: 6px 12px !important;
  border-radius: 99px !important;
  background: rgba(15, 23, 42, 0.75) !important;
  color: #ffffff !important;
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  backdrop-filter: blur(8px) !important;
}

.room-enter-pill {
  position: absolute !important;
  bottom: 14px !important;
  right: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 7px 14px !important;
  border-radius: 99px !important;
  background: var(--primary) !important;
  color: #ffffff !important;
  font-size: 0.8rem !important;
  font-weight: 750 !important;
  box-shadow: 0 4px 12px hsla(var(--primary-h), 80%, 50%, 0.35) !important;
}

.room-card-body {
  padding: 20px 22px !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  justify-content: space-between !important;
}

.room-card-body h3 {
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  color: var(--text-primary) !important;
  margin: 0 0 8px 0 !important;
}

.room-card-body p {
  font-size: 0.88rem !important;
  color: var(--text-secondary) !important;
  line-height: 1.5 !important;
  margin: 0 0 16px 0 !important;
  flex: 1 !important;
}

.room-card-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-top: 14px !important;
  border-top: 1px solid var(--border-subtle) !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  color: var(--text-secondary) !important;
}

.room-audio-count {
  color: var(--primary) !important;
}

/* 2. IN-ROOM 2-COLUMN VIEW (THEME AWARE, SINGLE VIEWPORT) */
body.in-meditation-room {
  overflow: hidden !important;
  height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.in-meditation-room .topbar,
body.in-meditation-room header.topbar {
  display: none !important;
}

.meditation-room-view,
.meditation-room-view[hidden],
body:not(.in-meditation-room) .meditation-room-view {
  display: none !important;
}

.meditation-room-view:not([hidden]),
body.in-meditation-room .meditation-room-view {
  display: flex !important;
  flex-direction: row !important;
  width: 100vw !important;
  height: 100vh !important;
  max-height: 100vh !important;
  position: fixed !important;
  inset: 0 !important;
  overflow: hidden !important;
  z-index: 9999 !important;
  transition: background 0.3s ease, color 0.3s ease !important;
}

/* Light Mode Room Canvas */
html[data-theme="light"] .meditation-room-view,
body:not([data-theme="dark"]) .meditation-room-view {
  background: #f8fafc !important;
  color: #0f172a !important;
}

/* Dark Mode Room Canvas */
html[data-theme="dark"] .meditation-room-view,
body[data-theme="dark"] .meditation-room-view {
  background: #030712 !important;
  color: #ffffff !important;
}

/* Atmospheric Backdrop Image Layer */
.meditation-room-view .meditation-backdrop {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 0 !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  transition: background-image 0.8s ease, opacity 0.5s ease, filter 0.5s ease !important;
}

/* Atmosphere Theme Image Maps */
.meditation-backdrop.bg-chapel {
  background-image: url('https://images.unsplash.com/photo-1548625361-16eb10f845a7?auto=format&fit=crop&w=2000&q=85') !important;
}

.meditation-backdrop.bg-mountains {
  background-image: url('https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?auto=format&fit=crop&w=2000&q=85') !important;
}

.meditation-backdrop.bg-stars {
  background-image: url('https://images.unsplash.com/photo-1506703719100-a0f3a48c0f86?auto=format&fit=crop&w=2000&q=85') !important;
}

.meditation-backdrop.bg-stream {
  background-image: url('https://images.unsplash.com/photo-1448375240586-882707db888b?auto=format&fit=crop&w=2000&q=85') !important;
}

.meditation-backdrop.bg-deepdark {
  background: radial-gradient(circle at 65% 45%, #0d1527 0%, #060a14 60%, #020408 100%) !important;
}

/* Template 1: Be Still (Warm Sandstone & Olive Shadow) */
.meditation-backdrop.bg-template-timer {
  background-color: #f5efe6 !important;
  background-image: 
    radial-gradient(circle at 85% 18%, rgba(74, 93, 63, 0.16) 0%, transparent 40%),
    radial-gradient(circle at 10% 90%, rgba(200, 185, 165, 0.35) 0%, transparent 50%),
    linear-gradient(135deg, #faf7f2 0%, #ede6db 50%, #e0d6c7 100%) !important;
}

html[data-theme="dark"] .meditation-backdrop.bg-template-timer {
  background-color: #141712 !important;
  background-image: 
    radial-gradient(circle at 85% 20%, rgba(74, 93, 63, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 12% 85%, rgba(32, 36, 28, 0.6) 0%, transparent 60%),
    linear-gradient(135deg, #181b14 0%, #11130e 50%, #0a0c08 100%) !important;
}

/* Template 2: Breath Prayer (Misty Dawn Lake) */
.meditation-backdrop.bg-template-ripple {
  background-image: url('https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=2000&q=85') !important;
  background-position: center bottom !important;
}

/* Template 3: Guided Prayer Journey (Desert Highway Sunrise) */
.meditation-backdrop.bg-template-journey {
  background-image: url('https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?auto=format&fit=crop&w=2000&q=85') !important;
  background-position: center 60% !important;
}

/* Template 4: Walk With God (Sunlit Forest Path & Mountain Waters) */
.meditation-backdrop.bg-template-nature {
  background-image: url('https://images.unsplash.com/photo-1448375240586-882707db888b?auto=format&fit=crop&w=2000&q=85') !important;
  background-position: center !important;
}

/* Template 5: Joy Comes in the Morning (Radiant Sunrise & Warm Hills) */
.meditation-backdrop.bg-template-sunburst {
  background-image: url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=2000&q=85') !important;
  background-position: center top !important;
}


/* Light Mode: Vivid Scenic Background with Soft Heavenly Brightness */
html[data-theme="light"] .meditation-backdrop,
body:not([data-theme="dark"]) .meditation-backdrop {
  opacity: 0.88 !important;
  filter: brightness(1.08) saturate(1.15) !important;
}

/* Dark Mode: Deep Atmospheric Backdrop */
html[data-theme="dark"] .meditation-backdrop,
body[data-theme="dark"] .meditation-backdrop {
  opacity: 0.65 !important;
  filter: brightness(0.75) contrast(1.1) !important;
}

/* Atmospheric Overlay Layer */
.meditation-room-view .meditation-overlay {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1 !important;
  transition: background 0.3s ease !important;
}

/* Light Mode: Soft Translucent Gradient allowing full background image visibility */
html[data-theme="light"] .meditation-overlay,
body:not([data-theme="dark"]) .meditation-overlay {
  background: radial-gradient(circle at 65% 45%, rgba(255, 255, 255, 0.1) 0%, rgba(248, 250, 252, 0.35) 60%, rgba(241, 245, 249, 0.6) 100%) !important;
}

/* Dark Mode: Deep Midnight Gradient */
html[data-theme="dark"] .meditation-overlay,
body[data-theme="dark"] .meditation-overlay {
  background: radial-gradient(circle at 65% 45%, rgba(4, 7, 18, 0.45) 0%, rgba(3, 6, 15, 0.85) 75%, rgba(2, 4, 10, 0.96) 100%) !important;
}

/* COLUMN 1: LEFT SIDEBAR NAVIGATION */
.meditation-room-sidebar {
  position: relative !important;
  z-index: 20 !important;
  width: clamp(280px, 22vw, 340px) !important;
  min-width: clamp(280px, 22vw, 340px) !important;
  max-width: clamp(280px, 22vw, 340px) !important;
  height: 100vh !important;
  max-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  padding: clamp(16px, 2.2vh, 22px) clamp(14px, 1.6vw, 20px) !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
  transition: background 0.3s ease, border-color 0.3s ease !important;
}

html[data-theme="light"] .meditation-room-sidebar,
body:not([data-theme="dark"]) .meditation-room-sidebar {
  background: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(28px) !important;
  border-right: 1px solid rgba(226, 232, 240, 0.9) !important;
  box-shadow: 4px 0 24px rgba(15, 23, 42, 0.08) !important;
  color: var(--text-primary) !important;
}

html[data-theme="dark"] .meditation-room-sidebar,
body[data-theme="dark"] .meditation-room-sidebar {
  background: rgba(8, 12, 24, 0.9) !important;
  backdrop-filter: blur(32px) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 12px 0 45px rgba(0, 0, 0, 0.7) !important;
  color: #ffffff !important;
}

.sidebar-top-section {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid var(--border-subtle) !important;
}

html[data-theme="dark"] .sidebar-top-section {
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

.sidebar-exit-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 9px 15px !important;
  border-radius: 12px !important;
  font-size: 0.88rem !important;
  font-weight: 750 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

html[data-theme="light"] .sidebar-exit-btn,
body:not([data-theme="dark"]) .sidebar-exit-btn {
  background: #f1f5f9 !important;
  border: 1px solid var(--border-subtle) !important;
  color: var(--text-primary) !important;
}

html[data-theme="light"] .sidebar-exit-btn:hover {
  background: var(--surface) !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}

html[data-theme="dark"] .sidebar-exit-btn,
body[data-theme="dark"] .sidebar-exit-btn {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
}

.sidebar-room-badge {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 14px !important;
  border-radius: 14px !important;
}

html[data-theme="light"] .sidebar-room-badge {
  background: #f8fafc !important;
  border: 1px solid var(--border-subtle) !important;
}

html[data-theme="dark"] .sidebar-room-badge {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.sidebar-room-badge .room-badge-icon {
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  background: hsla(var(--primary-h), 80%, 55%, 0.15) !important;
  color: var(--primary) !important;
  display: grid !important;
  place-items: center !important;
}

.sidebar-room-meta {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  overflow: hidden !important;
}

.sidebar-badge-kicker {
  font-size: 0.7rem !important;
  font-weight: 850 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--primary) !important;
}

.sidebar-room-meta strong {
  font-size: 0.9rem !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html[data-theme="light"] .sidebar-room-meta strong {
  color: #0f172a !important;
}

html[data-theme="dark"] .sidebar-room-meta strong {
  color: #ffffff !important;
}

/* Accordion Nav List */
.sidebar-accordion-nav {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin: 16px 0 !important;
  flex: 1 !important;
}

.sidebar-nav-trigger {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 11px 14px !important;
  border-radius: 12px !important;
  font-size: 0.88rem !important;
  font-weight: 750 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
}

html[data-theme="light"] .sidebar-nav-trigger {
  background: var(--surface) !important;
  border: 1px solid var(--border-subtle) !important;
  color: var(--text-primary) !important;
}

html[data-theme="light"] .sidebar-nav-trigger:hover,
html[data-theme="light"] .sidebar-nav-trigger.active,
html[data-theme="light"] .sidebar-nav-trigger[aria-expanded="true"] {
  background: hsla(var(--primary-h), 80%, 55%, 0.08) !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}

html[data-theme="dark"] .sidebar-nav-trigger {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

html[data-theme="dark"] .sidebar-nav-trigger:hover,
html[data-theme="dark"] .sidebar-nav-trigger.active,
html[data-theme="dark"] .sidebar-nav-trigger[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.16) !important;
  border-color: var(--primary) !important;
  color: #ffffff !important;
}

.sidebar-nav-trigger[aria-expanded="true"] .accordion-arrow,
.sidebar-nav-trigger.active .accordion-arrow {
  transform: rotate(180deg) !important;
}

/* Accordion Subitems Panel */
.sidebar-subitems-panel {
  display: grid !important;
  gap: 3px !important;
  padding: 8px 8px 8px 10px !important;
  border-radius: 12px !important;
  margin-top: 4px !important;
  animation: sidebarSlideDown 0.2s ease forwards !important;
}

html[data-theme="light"] .sidebar-subitems-panel {
  background: #f8fafc !important;
  border: 1px solid var(--border-subtle) !important;
}

html[data-theme="dark"] .sidebar-subitems-panel {
  background: rgba(4, 8, 20, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.sidebar-subitems-panel[hidden] {
  display: none !important;
}

.sidebar-panel-header {
  padding: 4px 6px !important;
  font-size: 0.7rem !important;
  font-weight: 850 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--text-muted) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  margin-bottom: 4px !important;
}

.sidebar-subitems-panel button {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 10px !important;
  border-radius: 8px !important;
  border: none !important;
  background: transparent !important;
  font-size: 0.84rem !important;
  font-weight: 650 !important;
  cursor: pointer !important;
  text-align: left !important;
  transition: all 0.15s ease !important;
  box-sizing: border-box !important;
}

html[data-theme="light"] .sidebar-subitems-panel button {
  color: var(--text-primary) !important;
}

html[data-theme="light"] .sidebar-subitems-panel button:hover {
  background: #e2e8f0 !important;
}

html[data-theme="dark"] .sidebar-subitems-panel button {
  color: rgba(255, 255, 255, 0.8) !important;
}

html[data-theme="dark"] .sidebar-subitems-panel button:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
}

.sidebar-subitems-panel button.active {
  background: var(--primary) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
}

.sidebar-scroll-subitems {
  max-height: 220px !important;
  overflow-y: auto !important;
}

.sidebar-footer-section {
  padding-top: 14px !important;
  border-top: 1px solid var(--border-subtle) !important;
}

html[data-theme="dark"] .sidebar-footer-section {
  border-top-color: rgba(255, 255, 255, 0.1) !important;
}

.sidebar-utility-btn {
  width: 100% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 10px 14px !important;
  border-radius: 12px !important;
  font-size: 0.86rem !important;
  font-weight: 750 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

html[data-theme="light"] .sidebar-utility-btn {
  background: #f1f5f9 !important;
  border: 1px solid var(--border-subtle) !important;
  color: var(--text-primary) !important;
}

html[data-theme="dark"] .sidebar-utility-btn {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;
}

/* ==========================================================================
   COLUMN 2: RIGHT MEDITATION SANCTUARY SECTION
   ========================================================================== */
.meditation-room-main {
  flex: 1 !important;
  height: 100vh !important;
  max-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: clamp(12px, 2vh, 24px) clamp(20px, 3.5vw, 48px) clamp(12px, 2vh, 24px) !important;
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 10 !important;
  overflow: hidden !important;
  text-align: center !important;
}

/* 1. SACRED GLOWING BREATHING ORB */
.sacred-orb-section {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  margin-top: clamp(2px, 1vh, 12px) !important;
}

.sacred-orb-container {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

.sacred-pulsing-orb {
  width: clamp(54px, 8vh, 80px) !important;
  height: clamp(54px, 8vh, 80px) !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 35% 35%, #ffffff 0%, var(--primary) 55%, hsla(var(--primary-h), 85%, 35%, 1) 100%) !important;
  box-shadow: 0 10px 40px hsla(var(--primary-h), 85%, 50%, 0.45),
              0 0 80px hsla(var(--primary-h), 85%, 50%, 0.25) !important;
  animation: sacredBreathPulse 8s infinite ease-in-out !important;
  transition: background 0.8s ease, box-shadow 0.8s ease !important;
}

.sacred-orb-aura-inner {
  position: absolute !important;
  width: clamp(90px, 13vh, 130px) !important;
  height: clamp(90px, 13vh, 130px) !important;
  border-radius: 50% !important;
  border: 1.5px solid hsla(var(--primary-h), 80%, 55%, 0.35) !important;
  animation: auraPulse 8s infinite ease-in-out !important;
  pointer-events: none !important;
}

.sacred-orb-aura-outer {
  position: absolute !important;
  width: clamp(130px, 18vh, 180px) !important;
  height: clamp(130px, 18vh, 180px) !important;
  border-radius: 50% !important;
  border: 1px solid hsla(var(--primary-h), 80%, 55%, 0.18) !important;
  animation: auraPulse 8s infinite ease-in-out 1s !important;
  pointer-events: none !important;
}

.sacred-breath-guide {
  font-size: clamp(0.72rem, 1.3vh, 0.84rem) !important;
  font-weight: 850 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  margin-top: clamp(8px, 1.4vh, 14px) !important;
}

html[data-theme="light"] .sacred-breath-guide,
body:not([data-theme="dark"]) .sacred-breath-guide {
  color: #0f172a !important;
  text-shadow: 0 1px 4px rgba(255, 255, 255, 0.9) !important;
}

html[data-theme="dark"] .sacred-breath-guide,
body[data-theme="dark"] .sacred-breath-guide {
  color: rgba(255, 255, 255, 0.9) !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8) !important;
}

@keyframes sacredBreathPulse {
  0%, 100% { transform: scale(0.88); opacity: 0.85; }
  50% { transform: scale(1.18); opacity: 1; }
}

@keyframes auraPulse {
  0%, 100% { transform: scale(0.85); opacity: 0.25; }
  50% { transform: scale(1.2); opacity: 0.7; }
}

/* Sanctuary Media Type Tabs */
.sanctuary-media-tabs {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
  margin: clamp(2px, 0.8vh, 6px) 0 !important;
  z-index: 15 !important;
}

.sanctuary-media-tab {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 5px 14px !important;
  border-radius: 99px !important;
  font-size: clamp(0.72rem, 1.2vh, 0.82rem) !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  background: rgba(255, 255, 255, 0.7) !important;
  border: 1px solid rgba(226, 232, 240, 0.8) !important;
  color: #475569 !important;
  backdrop-filter: blur(12px) !important;
}

html[data-theme="dark"] .sanctuary-media-tab {
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: rgba(255, 255, 255, 0.8) !important;
}

.sanctuary-media-tab:hover {
  background: rgba(255, 255, 255, 0.95) !important;
  color: var(--primary) !important;
  border-color: var(--primary) !important;
}

html[data-theme="dark"] .sanctuary-media-tab:hover {
  background: rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;
}

.sanctuary-media-tab.active {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px hsla(var(--primary-h), 85%, 50%, 0.35) !important;
}

.sanctuary-media-tab i {
  width: 14px !important;
  height: 14px !important;
}

/* Room Picture Display Visualizer */
.room-picture-display {
  width: 100% !important;
  max-height: clamp(120px, 18vh, 180px) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  margin-bottom: 12px !important;
  position: relative !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25) !important;
}

.room-picture-display[hidden] {
  display: none !important;
}

.room-picture-display img {
  width: 100% !important;
  height: clamp(120px, 18vh, 180px) !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.4s ease !important;
}

.room-picture-display:hover img {
  transform: scale(1.02) !important;
}

.room-picture-caption {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  padding: 6px 12px !important;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%) !important;
  color: #ffffff !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  text-align: left !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
}

/* 2. SCRIPTURE CARD */
.room-scripture-display {
  flex: 0 1 auto !important;
  width: 100% !important;
  max-width: clamp(460px, 50vw, 700px) !important;
  border-radius: clamp(16px, 2.2vh, 22px) !important;
  padding: clamp(12px, 2vh, 22px) clamp(16px, 2.8vw, 32px) !important;
  text-align: center !important;
  box-sizing: border-box !important;
  margin: clamp(4px, 1vh, 12px) 0 !important;
  transition: background 0.3s ease, border-color 0.3s ease !important;
}

html[data-theme="light"] .room-scripture-display,
body:not([data-theme="dark"]) .room-scripture-display {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(28px) !important;
  border: 1.5px solid rgba(226, 232, 240, 0.9) !important;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.12) !important;
}

html[data-theme="dark"] .room-scripture-display,
body[data-theme="dark"] .room-scripture-display {
  background: rgba(8, 12, 28, 0.82) !important;
  backdrop-filter: blur(28px) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65) !important;
}

.scripture-topic-tag {
  display: inline-block !important;
  padding: 3px 12px !important;
  border-radius: 99px !important;
  font-size: clamp(0.68rem, 1.2vh, 0.78rem) !important;
  font-weight: 850 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  margin-bottom: clamp(4px, 1vh, 8px) !important;
}

html[data-theme="light"] .scripture-topic-tag {
  background: hsla(var(--primary-h), 80%, 55%, 0.12) !important;
  border: 1px solid hsla(var(--primary-h), 80%, 55%, 0.35) !important;
  color: var(--primary) !important;
}

html[data-theme="dark"] .scripture-topic-tag {
  background: hsla(var(--primary-h), 80%, 55%, 0.25) !important;
  border: 1px solid hsla(var(--primary-h), 80%, 55%, 0.45) !important;
  color: #ffffff !important;
}

.room-scripture-display blockquote {
  font-family: inherit !important;
  font-size: clamp(0.98rem, 1.9vh, 1.25rem) !important;
  line-height: 1.48 !important;
  font-style: italic !important;
  font-weight: 600 !important;
  margin: 0 0 clamp(4px, 1vh, 8px) 0 !important;
  padding-left: 40px !important;
  padding-right: 24px !important;
  text-align: left !important;
}

html[data-theme="light"] .room-scripture-display blockquote {
  color: #0f172a !important;
}

html[data-theme="dark"] .room-scripture-display blockquote {
  color: #ffffff !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8) !important;
}

.room-scripture-display cite {
  display: block !important;
  font-size: clamp(0.78rem, 1.3vh, 0.88rem) !important;
  font-weight: 750 !important;
  font-style: normal !important;
  margin-bottom: clamp(6px, 1.2vh, 10px) !important;
  padding-left: 40px !important;
  text-align: left !important;
}

html[data-theme="light"] .room-scripture-display cite {
  color: #475569 !important;
}

html[data-theme="dark"] .room-scripture-display cite {
  color: rgba(255, 255, 255, 0.8) !important;
}

.room-verse-actions {
  display: flex !important;
  justify-content: center !important;
}

.room-pill-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: clamp(5px, 1vh, 8px) clamp(12px, 1.8vw, 18px) !important;
  border-radius: 99px !important;
  font-size: clamp(0.76rem, 1.3vh, 0.84rem) !important;
  font-weight: 750 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

html[data-theme="light"] .room-pill-btn {
  background: #f1f5f9 !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--text-primary) !important;
}

html[data-theme="light"] .room-pill-btn:hover {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #ffffff !important;
}

html[data-theme="dark"] .room-pill-btn {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  color: #ffffff !important;
}

html[data-theme="dark"] .room-pill-btn:hover {
  background: rgba(255, 255, 255, 0.22) !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
}

/* 3. DOCKED BOTTOM AUDIO PLAYER */
.meditation-room-view .room-bottom-player {
  flex: 0 0 auto !important;
  position: relative !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: auto !important;
  min-width: clamp(320px, 42vw, 580px) !important;
  max-width: 95% !important;
  height: clamp(48px, 6.2vh, 56px) !important;
  padding: 0 clamp(14px, 1.8vw, 24px) !important;
  border-radius: 99px !important;
  box-sizing: border-box !important;
  margin-bottom: clamp(2px, 0.8vh, 8px) !important;
  z-index: 20 !important;
  transition: background 0.3s ease, border-color 0.3s ease !important;
}

html[data-theme="light"] .room-bottom-player,
body:not([data-theme="dark"]) .room-bottom-player {
  background: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(28px) !important;
  border: 1.5px solid rgba(226, 232, 240, 0.9) !important;
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.12) !important;
  color: #0f172a !important;
}

html[data-theme="dark"] .room-bottom-player,
body[data-theme="dark"] .room-bottom-player {
  background: rgba(10, 14, 28, 0.94) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  backdrop-filter: blur(24px) !important;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.7) !important;
  color: #ffffff !important;
}

html[data-theme="light"] .bottom-player-text strong {
  color: #0f172a !important;
}

html[data-theme="light"] .bottom-player-text span {
  color: #64748b !important;
}

html[data-theme="light"] .bottom-player-controls .bottom-btn {
  color: #334155 !important;
}

html[data-theme="light"] .bottom-player-controls .bottom-btn:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

html[data-theme="light"] .bottom-player-volume {
  color: #475569 !important;
}

/* FLOATING SANCTUARY TOP CONTROLS (OVERLAYING THE BACKGROUND, NO SOLID BAR) */
.sanctuary-top-bar {
  flex: 0 0 auto !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 25 !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  height: clamp(56px, 7vh, 72px) !important;
  padding: 0 clamp(16px, 2.5vw, 32px) !important;
  box-sizing: border-box !important;
  background: transparent !important;
  backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
  pointer-events: none !important;
}

html[data-theme="light"] .sanctuary-top-bar,
body:not([data-theme="dark"]) .sanctuary-top-bar,
html[data-theme="dark"] .sanctuary-top-bar,
body[data-theme="dark"] .sanctuary-top-bar {
  background: transparent !important;
  backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
}

.sanctuary-top-left,
.sanctuary-top-center,
.sanctuary-top-right {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  pointer-events: auto !important;
}


.sanctuary-room-badge {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.sanctuary-room-badge .room-badge-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 99px !important;
  background: hsla(var(--primary-h), 80%, 55%, 0.15) !important;
  color: var(--primary) !important;
}

.sanctuary-room-meta {
  display: flex !important;
  flex-direction: column !important;
  line-height: 1.2 !important;
}

.sanctuary-room-meta strong {
  font-size: clamp(0.95rem, 1.6vw, 1.15rem) !important;
  font-weight: 750 !important;
}

.room-desc-tag {
  display: inline-block !important;
  font-size: 0.76rem !important;
  opacity: 0.82 !important;
  max-width: clamp(200px, 28vw, 360px) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.room-creator-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 0.76rem !important;
  opacity: 0.75 !important;
}

.session-presence-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 5px 14px !important;
  border-radius: 99px !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  background: rgba(16, 185, 129, 0.15) !important;
  border: 1px solid rgba(16, 185, 129, 0.35) !important;
  color: #10b981 !important;
}

.presence-pulse-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 99px !important;
  background: #10b981 !important;
  box-shadow: 0 0 10px #10b981 !important;
  animation: presencePulse 2s ease-in-out infinite alternate !important;
}

@keyframes presencePulse {
  0% { transform: scale(0.85); opacity: 0.6; }
  100% { transform: scale(1.25); opacity: 1; }
}

/* FLOATING GLASS PILL BUTTONS (HOVERING IN THE AIR OVER BACKGROUND) */
.room-exit-btn,
.sanctuary-action-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 18px !important;
  border-radius: 99px !important;
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  border: 1px solid var(--border-subtle) !important;
  text-decoration: none !important;
  user-select: none !important;
}

html[data-theme="light"] .room-exit-btn,
html[data-theme="light"] .sanctuary-action-btn {
  background: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(20px) !important;
  border-color: rgba(203, 213, 225, 0.9) !important;
  color: #0f172a !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="light"] .room-exit-btn:hover,
html[data-theme="light"] .sanctuary-action-btn:hover {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 20px hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.35) !important;
  transform: translateY(-1px) !important;
}

html[data-theme="dark"] .room-exit-btn,
html[data-theme="dark"] .sanctuary-action-btn {
  background: rgba(10, 14, 28, 0.78) !important;
  backdrop-filter: blur(20px) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.55) !important;
}

html[data-theme="dark"] .room-exit-btn:hover,
html[data-theme="dark"] .sanctuary-action-btn:hover {
  background: hsla(var(--primary-h), 80%, 55%, 0.35) !important;
  border-color: var(--primary) !important;
  box-shadow: 0 6px 22px hsla(var(--primary-h), 80%, 55%, 0.4) !important;
  transform: translateY(-1px) !important;
}

/* Floating Room Description Pill in Top Center */
.sanctuary-top-desc {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 18px !important;
  border-radius: 99px !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  backdrop-filter: blur(18px) !important;
  transition: all 0.2s ease !important;
  max-width: clamp(260px, 38vw, 520px) !important;
}

.sanctuary-top-desc span {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html[data-theme="light"] .sanctuary-top-desc {
  background: rgba(255, 255, 255, 0.85) !important;
  border: 1px solid rgba(203, 213, 225, 0.85) !important;
  color: #334155 !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="dark"] .sanctuary-top-desc {
  background: rgba(10, 14, 28, 0.72) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #e2e8f0 !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45) !important;
}

/* Atmosphere Scene Pill Indicator in Top Bar */
.sanctuary-atmosphere-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 16px !important;
  border-radius: 99px !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  backdrop-filter: blur(16px) !important;
  transition: all 0.2s ease !important;
}

html[data-theme="light"] .sanctuary-atmosphere-badge {
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(203, 213, 225, 0.9) !important;
  color: #334155 !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05) !important;
}

html[data-theme="dark"] .sanctuary-atmosphere-badge {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: #e2e8f0 !important;
}

.sanctuary-atmosphere-badge i {
  color: var(--primary) !important;
  width: 16px !important;
  height: 16px !important;
}

/* Docked Room Title, Creator Tag & Presence Bar (Positioned Above Audio Player) */
.sanctuary-room-bottom-bar {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: auto !important;
  min-width: clamp(320px, 42vw, 580px) !important;
  max-width: 95% !important;
  padding: 8px clamp(16px, 2vw, 24px) !important;
  border-radius: 99px !important;
  box-sizing: border-box !important;
  margin-bottom: 6px !important;
  z-index: 20 !important;
  transition: background 0.3s ease, border-color 0.3s ease !important;
}

html[data-theme="light"] .sanctuary-room-bottom-bar {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(24px) !important;
  border: 1.5px solid rgba(226, 232, 240, 0.95) !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08) !important;
  color: #0f172a !important;
}

html[data-theme="dark"] .sanctuary-room-bottom-bar {
  background: rgba(10, 14, 28, 0.92) !important;
  backdrop-filter: blur(24px) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important;
  color: #ffffff !important;
}

/* BOTTOM PLAYER ENHANCEMENTS */
.bottom-track-meta {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 0.75rem !important;
}

.bottom-ambience-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 2px 8px !important;
  border-radius: 99px !important;
  background: hsla(var(--primary-h), 80%, 55%, 0.12) !important;
  color: var(--primary) !important;
  font-size: 0.72rem !important;
  font-weight: 650 !important;
}

.chat-toggle-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 14px !important;
  border-radius: 99px !important;
  font-size: 0.8rem !important;
  font-weight: 750 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  border: 1px solid var(--border-subtle) !important;
}

html[data-theme="light"] .chat-toggle-pill {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  border-color: rgba(203, 213, 225, 0.9) !important;
}

html[data-theme="light"] .chat-toggle-pill:hover {
  border-color: var(--primary) !important;
}

html[data-theme="dark"] .chat-toggle-pill {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}

html[data-theme="dark"] .chat-toggle-pill:hover {
  border-color: var(--primary) !important;
  background: rgba(255, 255, 255, 0.18) !important;
}

.chat-unread-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 5px !important;
  border-radius: 99px !important;
  background: #ef4444 !important;
  color: #ffffff !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
}

/* FLOATING LIVE CHAT & COMMENTS DRAWER */
.meditation-chat-drawer {
  position: fixed !important;
  bottom: clamp(72px, 9vh, 88px) !important;
  right: clamp(16px, 2.5vw, 32px) !important;
  width: clamp(320px, 28vw, 380px) !important;
  max-width: calc(100vw - 32px) !important;
  height: clamp(380px, 52vh, 480px) !important;
  max-height: calc(100vh - 160px) !important;
  z-index: 10000 !important;
  display: flex !important;
  flex-direction: column !important;
  border-radius: 20px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.meditation-chat-drawer[hidden] {
  display: none !important;
}

html[data-theme="light"] .meditation-chat-drawer {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(32px) !important;
  border: 1.5px solid rgba(226, 232, 240, 0.95) !important;
  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.18) !important;
  color: #0f172a !important;
}

html[data-theme="dark"] .meditation-chat-drawer {
  background: rgba(10, 14, 28, 0.95) !important;
  backdrop-filter: blur(32px) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8) !important;
  color: #ffffff !important;
}

.chat-drawer-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 14px 18px !important;
  border-bottom: 1px solid var(--border-subtle) !important;
}

html[data-theme="dark"] .chat-drawer-header {
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

.chat-title-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 0.95rem !important;
}

.chat-subtitle {
  font-size: 0.72rem !important;
  opacity: 0.7 !important;
  display: block !important;
}

.chat-icon-btn {
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  color: inherit !important;
  padding: 4px !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
}

.chat-moderation-banner {
  padding: 8px 14px !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  font-size: 0.78rem !important;
}

html[data-theme="dark"] .chat-moderation-banner {
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

.host-switch-label {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  cursor: pointer !important;
  font-weight: 650 !important;
}

.host-switch-label input {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
}

.switch-slider {
  position: relative !important;
  width: 36px !important;
  height: 20px !important;
  background: #cbd5e1 !important;
  border-radius: 99px !important;
  transition: background 0.2s ease !important;
}

html[data-theme="dark"] .switch-slider {
  background: rgba(255, 255, 255, 0.2) !important;
}

.switch-slider::before {
  content: "" !important;
  position: absolute !important;
  width: 14px !important;
  height: 14px !important;
  left: 3px !important;
  top: 3px !important;
  border-radius: 99px !important;
  background: #ffffff !important;
  transition: transform 0.2s ease !important;
}

.host-switch-label input:checked + .switch-slider {
  background: #10b981 !important;
}

.host-switch-label input:checked + .switch-slider::before {
  transform: translateX(16px) !important;
}

.guest-status-banner {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: #f59e0b !important;
}

.chat-messages-feed {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  padding: 12px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.chat-empty-state {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  text-align: center !important;
  padding: 20px !important;
  opacity: 0.65 !important;
  gap: 10px !important;
  font-size: 0.85rem !important;
}

.chat-message-item {
  padding: 8px 12px !important;
  border-radius: 12px !important;
  background: rgba(0, 0, 0, 0.04) !important;
  border: 1px solid var(--border-subtle) !important;
}

html[data-theme="dark"] .chat-message-item {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.chat-message-item.is-host-msg {
  border-left: 3px solid var(--primary) !important;
}

.chat-message-meta {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 0.74rem !important;
  margin-bottom: 3px !important;
}

.chat-host-tag {
  background: var(--primary) !important;
  color: #ffffff !important;
  font-size: 0.65rem !important;
  font-weight: 800 !important;
  padding: 1px 6px !important;
  border-radius: 99px !important;
}

.chat-timestamp {
  opacity: 0.55 !important;
  margin-left: auto !important;
}

.chat-message-text {
  margin: 0 !important;
  font-size: 0.86rem !important;
  line-height: 1.4 !important;
  word-break: break-word !important;
}

.chat-input-form {
  padding: 10px 14px !important;
  border-top: 1px solid var(--border-subtle) !important;
}

html[data-theme="dark"] .chat-input-form {
  border-top-color: rgba(255, 255, 255, 0.1) !important;
}

.chat-input-wrapper {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.chat-input-wrapper input {
  flex: 1 !important;
  padding: 8px 12px !important;
  border-radius: 99px !important;
  border: 1px solid var(--border-subtle) !important;
  background: rgba(0, 0, 0, 0.03) !important;
  color: inherit !important;
  font-size: 0.85rem !important;
  outline: none !important;
}

html[data-theme="dark"] .chat-input-wrapper input {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}

.chat-send-btn {
  width: 34px !important;
  height: 34px !important;
  border-radius: 99px !important;
  background: var(--primary) !important;
  color: #ffffff !important;
  border: none !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: opacity 0.2s ease !important;
}

.chat-send-btn:disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
}

/* SANCTUARY DIALOGS */
/* ==========================================================================
   SANCTUARY DIALOGS & MODAL OVERLAYS (LUXURY GLASSMORPHISM & SLEEK UI)
   ========================================================================== */
.sanctuary-dialog {
  border: none !important;
  border-radius: 28px !important;
  padding: 0 !important;
  max-width: 540px !important;
  width: min(92vw, 540px) !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  animation: dialogZoomIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.sanctuary-dialog-lg {
  max-width: 760px !important;
  width: min(94vw, 760px) !important;
}

.sanctuary-dialog::backdrop {
  background: radial-gradient(circle at center, rgba(15, 23, 42, 0.45) 0%, rgba(10, 14, 26, 0.8) 100%) !important;
  backdrop-filter: blur(16px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
  animation: dialogFadeIn 0.3s ease-out !important;
}

@keyframes dialogZoomIn {
  from { opacity: 0; transform: scale(0.95) translateY(12px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes dialogFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.dialog-content {
  padding: clamp(22px, 3.5vh, 32px) clamp(22px, 3.5vw, 36px) !important;
  border-radius: 28px !important;
  box-sizing: border-box !important;
  position: relative !important;
  overflow: hidden !important;
}

html[data-theme="light"] .dialog-content {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.97) 0%, rgba(248, 250, 252, 0.94) 100%) !important;
  backdrop-filter: blur(40px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(40px) saturate(190%) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 24px 64px -12px rgba(15, 23, 42, 0.16), 0 8px 24px -4px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.8) inset !important;
  color: #0f172a !important;
}

html[data-theme="dark"] .dialog-content {
  background: linear-gradient(145deg, rgba(18, 24, 38, 0.95) 0%, rgba(10, 14, 24, 0.97) 100%) !important;
  backdrop-filter: blur(40px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(40px) saturate(190%) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 30px 80px -15px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.08) inset !important;
  color: #f8fafc !important;
}

/* DIALOG HEADER & BRANDED ICON BADGE */
.dialog-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 16px !important;
  gap: 14px !important;
}

.dialog-title-group {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

.dialog-icon-badge {
  width: 44px !important;
  height: 44px !important;
  border-radius: 14px !important;
  display: grid !important;
  place-items: center !important;
  flex-shrink: 0 !important;
}

html[data-theme="light"] .dialog-icon-badge {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.06) 0%, rgba(15, 23, 42, 0.02) 100%) !important;
  border: 1.5px solid rgba(15, 23, 42, 0.08) !important;
  color: #0f172a !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
}

html[data-theme="dark"] .dialog-icon-badge {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.04) 100%) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

.dialog-icon {
  width: 20px !important;
  height: 20px !important;
}

.dialog-title-group h3 {
  margin: 0 0 2px 0 !important;
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em !important;
  line-height: 1.2 !important;
}

.dialog-kicker {
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: #94a3b8 !important;
  display: block !important;
}

.dialog-close-btn {
  width: 36px !important;
  height: 36px !important;
  border-radius: 999px !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  padding: 0 !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  background: rgba(0, 0, 0, 0.03) !important;
  color: #64748b !important;
}

html[data-theme="light"] .dialog-close-btn:hover {
  background: rgba(15, 23, 42, 0.08) !important;
  color: #0f172a !important;
  transform: rotate(90deg) scale(1.06) !important;
}

html[data-theme="dark"] .dialog-close-btn {
  border-color: rgba(255, 255, 255, 0.12) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: #94a3b8 !important;
}

html[data-theme="dark"] .dialog-close-btn:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
  transform: rotate(90deg) scale(1.06) !important;
}

.dialog-desc {
  font-size: 0.88rem !important;
  line-height: 1.55 !important;
  color: #64748b !important;
  margin: 0 0 18px 0 !important;
}

html[data-theme="dark"] .dialog-desc {
  color: #94a3b8 !important;
}

/* ==========================================================================
   MODAL 1: INVITE A FRIEND (PREMIUM SOCIAL TILES & SLEEK COPY PILL)
   ========================================================================== */
.invite-social-grid {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 10px !important;
  margin: 16px 0 16px !important;
}

@media (max-width: 520px) {
  .invite-social-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }
}

.social-share-btn {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 12px 6px 10px !important;
  border-radius: 18px !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  text-decoration: none !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-sizing: border-box !important;
}

html[data-theme="light"] .social-share-btn {
  background: #ffffff !important;
  border: 1.5px solid rgba(226, 232, 240, 0.95) !important;
  color: #334155 !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.02) !important;
}

html[data-theme="dark"] .social-share-btn {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.08) !important;
  color: #e2e8f0 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
}

.social-share-btn:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12) !important;
  border-color: rgba(148, 163, 184, 0.8) !important;
}

.social-icon-wrapper {
  width: 38px !important;
  height: 38px !important;
  border-radius: 999px !important;
  display: grid !important;
  place-items: center !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.social-share-btn:hover .social-icon-wrapper {
  transform: scale(1.12) !important;
}

.social-whatsapp .social-icon-wrapper {
  background: rgba(37, 211, 102, 0.12) !important;
  color: #16a34a !important;
}

.social-telegram .social-icon-wrapper {
  background: rgba(0, 136, 204, 0.12) !important;
  color: #0284c7 !important;
}

.social-sms .social-icon-wrapper {
  background: rgba(16, 185, 129, 0.12) !important;
  color: #059669 !important;
}

.social-facebook .social-icon-wrapper {
  background: rgba(24, 119, 242, 0.12) !important;
  color: #2563eb !important;
}

.social-twitter .social-icon-wrapper {
  background: rgba(15, 23, 42, 0.08) !important;
  color: #0f172a !important;
}

html[data-theme="dark"] .social-twitter .social-icon-wrapper {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
}

.social-email .social-icon-wrapper {
  background: rgba(234, 67, 53, 0.12) !important;
  color: #dc2626 !important;
}

.social-share-btn i {
  width: 18px !important;
  height: 18px !important;
}

/* UNIFIED LINK COPY BAR */
.unified-copy-entity {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 4px 5px 4px 16px !important;
  border-radius: 999px !important;
  margin: 14px 0 16px !important;
  transition: all 0.25s ease !important;
}

html[data-theme="light"] .unified-copy-entity {
  background: rgba(241, 245, 249, 0.85) !important;
  border: 1.5px solid rgba(203, 213, 225, 0.9) !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03) inset !important;
}

html[data-theme="dark"] .unified-copy-entity {
  background: rgba(15, 23, 42, 0.65) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) inset !important;
}

html[data-theme="light"] .unified-copy-entity:focus-within {
  border-color: #0f172a !important;
  box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="dark"] .unified-copy-entity:focus-within {
  border-color: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.15) !important;
}

.unified-copy-icon {
  display: inline-flex !important;
  align-items: center !important;
  color: #64748b !important;
  margin-right: 8px !important;
  flex: 0 0 auto !important;
}

.unified-copy-icon i {
  width: 16px !important;
  height: 16px !important;
}

.unified-copy-entity input {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  color: inherit !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  font-size: 0.82rem !important;
  padding: 8px 6px !important;
  letter-spacing: -0.01em !important;
  box-shadow: none !important;
}

.unified-copy-btn {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 9px 20px !important;
  border-radius: 999px !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  border: none !important;
}

html[data-theme="light"] .unified-copy-btn {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.18) !important;
}

html[data-theme="light"] .unified-copy-btn:hover {
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.24) !important;
}

html[data-theme="dark"] .unified-copy-btn {
  background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%) !important;
  color: #0f172a !important;
  box-shadow: 0 4px 16px rgba(255, 255, 255, 0.2) !important;
}

html[data-theme="dark"] .unified-copy-btn:hover {
  background: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 22px rgba(255, 255, 255, 0.3) !important;
}

.unified-copy-btn:active {
  transform: scale(0.97) !important;
}

.unified-copy-btn i {
  width: 14px !important;
  height: 14px !important;
}

/* INVITE SANCTUARY PERKS */
.invite-meta-notes {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  margin-top: 14px !important;
}

@media (max-width: 480px) {
  .invite-meta-notes {
    grid-template-columns: 1fr !important;
  }
}

.invite-note {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 14px !important;
  border-radius: 14px !important;
  font-size: 0.78rem !important;
  font-weight: 650 !important;
  letter-spacing: 0.01em !important;
}

html[data-theme="light"] .invite-note {
  background: rgba(16, 185, 129, 0.07) !important;
  border: 1px solid rgba(16, 185, 129, 0.2) !important;
  color: #059669 !important;
}

html[data-theme="dark"] .invite-note {
  background: rgba(16, 185, 129, 0.12) !important;
  border: 1px solid rgba(52, 211, 153, 0.25) !important;
  color: #34d399 !important;
}

.invite-note i {
  width: 15px !important;
  height: 15px !important;
  flex-shrink: 0 !important;
}

/* Backward compatibility for legacy invite-link-box */
.invite-link-box {
  display: flex !important;
  gap: 8px !important;
  margin: 18px 0 !important;
}

.invite-link-box input {
  flex: 1 !important;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  border: 1px solid var(--border-subtle) !important;
  background: rgba(0, 0, 0, 0.04) !important;
  color: inherit !important;
  font-size: 0.85rem !important;
}

html[data-theme="dark"] .invite-link-box input {
  background: rgba(255, 255, 255, 0.08) !important;
}

/* ==========================================================================
   MODAL 2: WRITE A REFLECTION NOTE (JOURNAL CANVASES & PILL ACTIONS)
   ========================================================================== */
.reflection-journal-field {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  width: 100% !important;
}

.reflection-label-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 2px !important;
}

.reflection-label-row span {
  font-size: 0.74rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #64748b !important;
}

html[data-theme="dark"] .reflection-label-row span {
  color: #94a3b8 !important;
}

.reflection-counter-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  color: #94a3b8 !important;
}

.reflection-counter-tag i {
  width: 12px !important;
  height: 12px !important;
}

#reflection-note-text {
  width: 100% !important;
  box-sizing: border-box !important;
  border-radius: 18px !important;
  padding: 16px 18px !important;
  font-family: 'Cinzel', 'Playfair Display', Georgia, serif !important;
  font-size: 1rem !important;
  line-height: 1.65 !important;
  resize: vertical !important;
  min-height: 120px !important;
  outline: none !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

html[data-theme="light"] #reflection-note-text {
  background: rgba(248, 250, 252, 0.9) !important;
  border: 1.5px solid rgba(226, 232, 240, 0.95) !important;
  color: #0f172a !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03) inset !important;
}

html[data-theme="light"] #reflection-note-text:focus {
  background: #ffffff !important;
  border-color: #0f172a !important;
  box-shadow: 0 0 0 4px rgba(15, 23, 42, 0.08), 0 4px 16px rgba(15, 23, 42, 0.04) !important;
}

html[data-theme="dark"] #reflection-note-text {
  background: rgba(15, 23, 42, 0.75) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.14) !important;
  color: #f8fafc !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) inset !important;
}

html[data-theme="dark"] #reflection-note-text:focus {
  background: rgba(20, 28, 48, 0.9) !important;
  border-color: #ffffff !important;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.12), 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

/* UNIFIED DIALOG ACTION BUTTONS */
.dialog-actions {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 10px !important;
  margin-top: 18px !important;
}

.sanctuary-dialog .btn-secondary,
#btn-copy-reflection,
#btn-cancel-create-room {
  border-radius: 999px !important;
  padding: 10px 20px !important;
  font-size: 0.86rem !important;
  font-weight: 650 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  user-select: none !important;
}

html[data-theme="light"] .sanctuary-dialog .btn-secondary,
html[data-theme="light"] #btn-copy-reflection,
html[data-theme="light"] #btn-cancel-create-room {
  background: rgba(255, 255, 255, 0.8) !important;
  border: 1.5px solid rgba(203, 213, 225, 0.9) !important;
  color: #334155 !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04) !important;
}

html[data-theme="light"] .sanctuary-dialog .btn-secondary:hover,
html[data-theme="light"] #btn-copy-reflection:hover,
html[data-theme="light"] #btn-cancel-create-room:hover {
  background: #ffffff !important;
  border-color: rgba(148, 163, 184, 0.9) !important;
  color: #0f172a !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="dark"] .sanctuary-dialog .btn-secondary,
html[data-theme="dark"] #btn-copy-reflection,
html[data-theme="dark"] #btn-cancel-create-room {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.16) !important;
  color: #f1f5f9 !important;
}

html[data-theme="dark"] .sanctuary-dialog .btn-secondary:hover,
html[data-theme="dark"] #btn-copy-reflection:hover,
html[data-theme="dark"] #btn-cancel-create-room:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
}

.sanctuary-dialog .btn-primary,
#btn-save-reflection {
  border-radius: 999px !important;
  padding: 10px 24px !important;
  font-size: 0.86rem !important;
  font-weight: 750 !important;
  letter-spacing: 0.01em !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  border: none !important;
  user-select: none !important;
}

html[data-theme="light"] .sanctuary-dialog .btn-primary,
html[data-theme="light"] #btn-save-reflection {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.18), 0 2px 6px rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="light"] .sanctuary-dialog .btn-primary:hover,
html[data-theme="light"] #btn-save-reflection:hover {
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%) !important;
  transform: translateY(-1.5px) !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.25) !important;
}

html[data-theme="dark"] .sanctuary-dialog .btn-primary,
html[data-theme="dark"] #btn-save-reflection {
  background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%) !important;
  color: #0f172a !important;
  box-shadow: 0 4px 20px rgba(255, 255, 255, 0.2) !important;
}

html[data-theme="dark"] .sanctuary-dialog .btn-primary:hover,
html[data-theme="dark"] #btn-save-reflection:hover {
  background: #ffffff !important;
  transform: translateY(-1.5px) !important;
  box-shadow: 0 8px 30px rgba(255, 255, 255, 0.35) !important;
}

.sanctuary-dialog .btn-primary:active,
.sanctuary-dialog .btn-secondary:active {
  transform: scale(0.98) !important;
}

/* PAST REFLECTIONS TIMELINE */
.reflection-past-entries {
  margin-top: 24px !important;
  padding-top: 18px !important;
  border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
}

html[data-theme="dark"] .reflection-past-entries {
  border-top-color: rgba(255, 255, 255, 0.08) !important;
}

.reflection-past-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 12px !important;
}

.reflection-past-header h4 {
  margin: 0 !important;
  font-size: 0.74rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #64748b !important;
}

html[data-theme="dark"] .reflection-past-header h4 {
  color: #94a3b8 !important;
}

.past-count-badge {
  font-size: 0.68rem !important;
  font-weight: 750 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
}

html[data-theme="light"] .past-count-badge {
  background: rgba(15, 23, 42, 0.05) !important;
  color: #64748b !important;
}

html[data-theme="dark"] .past-count-badge {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #94a3b8 !important;
}

.empty-hint {
  padding: 18px 20px !important;
  border-radius: 16px !important;
  text-align: center !important;
  font-size: 0.86rem !important;
  font-style: italic !important;
  margin: 0 !important;
}

html[data-theme="light"] .empty-hint {
  background: rgba(241, 245, 249, 0.6) !important;
  border: 1.5px dashed rgba(203, 213, 225, 0.8) !important;
  color: #94a3b8 !important;
}

html[data-theme="dark"] .empty-hint {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1.5px dashed rgba(255, 255, 255, 0.1) !important;
  color: #64748b !important;
}

.reflection-entry-card {
  border-radius: 16px !important;
  padding: 14px 18px !important;
  margin-bottom: 10px !important;
  transition: all 0.2s ease !important;
}

html[data-theme="light"] .reflection-entry-card {
  background: #ffffff !important;
  border: 1px solid rgba(226, 232, 240, 0.95) !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04) !important;
  color: #0f172a !important;
}

html[data-theme="dark"] .reflection-entry-card {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
  color: #f8fafc !important;
}

.reflection-card-meta {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-size: 0.75rem !important;
  margin-bottom: 6px !important;
}

.reflection-meta-date {
  color: #64748b !important;
  font-weight: 600 !important;
}

html[data-theme="dark"] .reflection-meta-date {
  color: #94a3b8 !important;
}

.reflection-meta-badge {
  font-size: 0.68rem !important;
  font-weight: 750 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
  background: rgba(15, 23, 42, 0.05) !important;
  color: #475569 !important;
}

html[data-theme="dark"] .reflection-meta-badge {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #e2e8f0 !important;
}

.reflection-card-body {
  margin: 0 !important;
  font-size: 0.95rem !important;
  line-height: 1.55 !important;
}

/* ==========================================================================
   MODAL 3: CREATE VIRTUAL SANCTUARY ROOM
   ========================================================================== */
.create-room-form {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  max-height: 75vh !important;
  overflow-y: auto !important;
  padding-right: 4px !important;
}

.form-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important;
}

@media (max-width: 600px) {
  .form-row {
    grid-template-columns: 1fr !important;
  }
}

.form-label {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
}

.form-label input,
.form-label select,
.form-label textarea {
  padding: 10px 14px !important;
  border-radius: 14px !important;
  font-size: 0.88rem !important;
  transition: all 0.2s ease !important;
  outline: none !important;
  box-sizing: border-box !important;
}

html[data-theme="light"] .form-label input,
html[data-theme="light"] .form-label select,
html[data-theme="light"] .form-label textarea {
  background: rgba(248, 250, 252, 0.9) !important;
  border: 1.5px solid rgba(226, 232, 240, 0.95) !important;
  color: #0f172a !important;
}

html[data-theme="light"] .form-label input:focus,
html[data-theme="light"] .form-label select:focus,
html[data-theme="light"] .form-label textarea:focus {
  background: #ffffff !important;
  border-color: #0f172a !important;
  box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="dark"] .form-label input,
html[data-theme="dark"] .form-label select,
html[data-theme="dark"] .form-label textarea {
  background: rgba(15, 23, 42, 0.7) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
}

html[data-theme="dark"] .form-label input:focus,
html[data-theme="dark"] .form-label select:focus,
html[data-theme="dark"] .form-label textarea:focus {
  border-color: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12) !important;
}

.form-section-title {
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding-bottom: 8px !important;
  margin-top: 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

html[data-theme="light"] .form-section-title {
  color: #0f172a !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}

html[data-theme="dark"] .form-section-title {
  color: #ffffff !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.ambient-mixer-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px 18px !important;
}

@media (max-width: 500px) {
  .ambient-mixer-grid {
    grid-template-columns: 1fr !important;
  }
}

.ambient-mix-field {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  font-size: 0.8rem !important;
  font-weight: 650 !important;
}

/* ==========================================================================
   SANCTUARY IMMERSION & 5 DESIGN TEMPLATES (100VH STRICT ZERO-SCROLL)
   ========================================================================== */

/* 1. STRICT 100VH VIEWPORT ENFORCEMENT */
body.in-meditation-room,
body.in-meditation-room .meditation-room-view,
body.in-meditation-room.is-fullscreen-sanctuary,
body.in-meditation-room.is-fullscreen-sanctuary .meditation-room-view,
body.in-meditation-room.is-fullscreen-sanctuary .meditation-room-main {
  height: 100vh !important;
  max-height: 100vh !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
}

.meditation-room-main {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  align-items: center !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-height: 100vh !important;
  max-height: 100dvh !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  overflow: hidden !important;
  position: relative !important;
  z-index: 10 !important;
}

/* 2. TOPBAR ROOM HEADER BADGE & UNIFIED PILL ACTION BUTTONS */
.sanctuary-room-header-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  color: inherit !important;
  text-decoration: none !important;
  user-select: none !important;
}

.sanctuary-room-header-icon {
  display: grid !important;
  place-items: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 99px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(203, 213, 225, 0.9) !important;
  color: var(--room-color, #0f172a) !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08) !important;
  transition: all 0.2s ease !important;
}

.sanctuary-room-header-icon i,
.sanctuary-room-header-icon svg {
  width: 18px !important;
  height: 18px !important;
}

html[data-theme="dark"] .sanctuary-room-header-icon {
  background: rgba(15, 23, 42, 0.75) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;
}

.sanctuary-room-header-text {
  display: flex !important;
  flex-direction: column !important;
  text-align: left !important;
  line-height: 1.2 !important;
}

.sanctuary-room-header-title {
  font-size: 0.96rem !important;
  font-weight: 750 !important;
  letter-spacing: -0.01em !important;
  color: #0f172a !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8) !important;
}

html[data-theme="dark"] .sanctuary-room-header-title {
  color: #ffffff !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6) !important;
}

.sanctuary-room-header-owner {
  font-size: 0.72rem !important;
  font-weight: 650 !important;
  letter-spacing: 0.04em !important;
  color: #475569 !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6) !important;
}

html[data-theme="dark"] .sanctuary-room-header-owner {
  color: rgba(255, 255, 255, 0.75) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
}

/* UNIFIED TOP ACTION BUTTONS (Invite, Full Screen, Exit - 100% Identical Styling) */
.sanctuary-top-action-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  height: 38px !important;
  padding: 0 18px !important;
  border-radius: 999px !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  user-select: none !important;
  white-space: nowrap !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

.sanctuary-top-action-btn i,
.sanctuary-top-action-btn svg {
  width: 15px !important;
  height: 15px !important;
  flex-shrink: 0 !important;
}

html[data-theme="light"] .sanctuary-top-action-btn,
body:not([data-theme="dark"]) .sanctuary-top-action-btn {
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(203, 213, 225, 0.95) !important;
  color: #0f172a !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}

html[data-theme="light"] .sanctuary-top-action-btn:hover,
body:not([data-theme="dark"]) .sanctuary-top-action-btn:hover {
  background: #ffffff !important;
  border-color: rgba(148, 163, 184, 1) !important;
  color: #0f172a !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.12) !important;
}

html[data-theme="dark"] .sanctuary-top-action-btn {
  background: rgba(15, 23, 42, 0.78) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45) !important;
}

html[data-theme="dark"] .sanctuary-top-action-btn:hover {
  background: rgba(30, 41, 59, 0.92) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.55) !important;
}

.sanctuary-exit-pill {
  background: rgba(255, 255, 255, 0.25) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  border-radius: 99px !important;
}

html[data-theme="light"] .sanctuary-exit-pill {
  background: rgba(255, 255, 255, 0.85) !important;
  border-color: rgba(203, 213, 225, 0.9) !important;
  color: #0f172a !important;
}

html[data-theme="dark"] .sanctuary-exit-pill {
  background: rgba(15, 23, 42, 0.75) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
}

/* 3. AMBIENT CORNER & MARGIN TYPOGRAPHY */
.sanctuary-margin-text {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.25em !important;
  text-transform: uppercase !important;
  opacity: 0.45 !important;
  pointer-events: none !important;
  z-index: 5 !important;
  user-select: none !important;
}

.sanctuary-margin-text.margin-left {
  left: clamp(14px, 2.2vw, 32px) !important;
  text-align: left !important;
}

.sanctuary-margin-text.margin-right {
  right: clamp(14px, 2.2vw, 32px) !important;
  text-align: right !important;
}

.sanctuary-corner-tag {
  display: none !important;
}

@media (max-width: 900px) {
  .sanctuary-margin-text,
  .sanctuary-corner-tag {
    display: none !important;
  }
}

/* 4. SERIF TYPOGRAPHY & COMMON TEMPLATE HEADINGS */
.serif-font {
  font-family: 'Cinzel', 'Playfair Display', 'Cormorant Garamond', 'Georgia', serif !important;
}

.template-header-block {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  margin-bottom: clamp(8px, 1.8vh, 18px) !important;
}

.template-main-title {
  font-size: clamp(2rem, 4.5vh, 3.4rem) !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  margin: 0 !important;
  line-height: 1.15 !important;
  color: var(--room-title-color, inherit) !important;
}

html[data-theme="light"] .template-main-title,
body:not([data-theme="dark"]) .template-main-title {
  color: #0f172a !important;
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.85) !important;
}

html[data-theme="dark"] .template-main-title {
  color: #ffffff !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6) !important;
}

.template-subtitle-badge {
  font-size: clamp(0.78rem, 1.4vh, 0.95rem) !important;
  font-weight: 650 !important;
  letter-spacing: 0.06em !important;
  padding: 4px 16px !important;
  border-radius: 99px !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

html[data-theme="light"] .template-subtitle-badge,
body:not([data-theme="dark"]) .template-subtitle-badge {
  background: rgba(255, 255, 255, 0.88) !important;
  border: 1px solid rgba(203, 213, 225, 0.9) !important;
  color: #1e293b !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06) !important;
}

html[data-theme="dark"] .template-subtitle-badge {
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: #f1f5f9 !important;
}

/* 5. DYNAMIC TEMPLATE STAGE CONTAINER (SINGLE VIEWPORT, ZERO SCROLL) */
.sanctuary-template-stage {
  flex: 1 1 auto !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 960px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 0 !important;
  overflow: hidden !important;
  position: relative !important;
  padding: clamp(68px, 9vh, 88px) clamp(16px, 2.5vw, 36px) clamp(24px, 4vh, 44px) !important;
  box-sizing: border-box !important;
}

.template-stage-view {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  position: relative !important;
  animation: templateFadeIn 0.5s ease-out !important;
}

.template-stage-view[hidden] {
  display: none !important;
}

@keyframes templateFadeIn {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: scale(1); }
}

/* MARGINAL & CORNER TYPOGRAPHY (Floating around stage matching images 2, 3, 4, 5) */
.template-corner-text {
  position: absolute !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  font-size: clamp(0.65rem, 1.1vh, 0.74rem) !important;
  font-weight: 800 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  opacity: 0.7 !important;
  pointer-events: none !important;
  z-index: 10 !important;
  user-select: none !important;
  line-height: 1.35 !important;
}

html[data-theme="light"] .template-corner-text,
body:not([data-theme="dark"]) .template-corner-text {
  color: #1e293b !important;
  opacity: 0.92 !important;
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.95) !important;
}

html[data-theme="dark"] .template-corner-text {
  color: #f1f5f9 !important;
  opacity: 0.7 !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6) !important;
}

.template-corner-text.corner-top-left {
  top: clamp(68px, 9vh, 88px) !important;
  left: clamp(16px, 3vw, 44px) !important;
  text-align: left !important;
}

.template-corner-text.corner-top-right {
  top: clamp(68px, 9vh, 88px) !important;
  right: clamp(16px, 3vw, 44px) !important;
  text-align: right !important;
}

.template-corner-text.corner-bottom-left,
.template-corner-text.corner-bottom-right {
  display: none !important;
}

/* Wood Sign & Rock Tag Carvings (Images 3 & 4) */
.nature-tree-sign {
  position: absolute !important;
  left: clamp(16px, 3vw, 48px) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 16px 12px !important;
  background: rgba(36, 26, 18, 0.78) !important;
  backdrop-filter: blur(12px) !important;
  border: 1.5px solid rgba(160, 110, 60, 0.45) !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
  font-size: 0.72rem !important;
  font-weight: 850 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: #faebd7 !important;
  z-index: 10 !important;
  pointer-events: none !important;
  user-select: none !important;
}

.nature-tree-sign .sign-heart {
  color: #f87171 !important;
  font-size: 0.95rem !important;
  margin-top: 3px !important;
}

.rock-tag-marker {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 15px 13px !important;
  background: rgba(25, 30, 36, 0.72) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
  font-size: 0.72rem !important;
  font-weight: 850 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: #f1f5f9 !important;
  z-index: 10 !important;
  pointer-events: none !important;
  user-select: none !important;
}

.rock-tag-marker.rock-marker-left {
  left: clamp(16px, 3vw, 48px) !important;
  right: auto !important;
}

.rock-tag-marker.rock-marker-right {
  right: clamp(16px, 3vw, 48px) !important;
  left: auto !important;
}

.rock-tag-marker .rock-heart {
  color: #f87171 !important;
  font-size: 0.95rem !important;
  margin-top: 3px !important;
}

.nature-bottom-center-tag {
  display: none !important;
}

@media (max-width: 900px) {
  .template-corner-text,
  .nature-tree-sign,
  .rock-tag-marker,
  .nature-bottom-center-tag {
    display: none !important;
  }
}

/* ========================================================
   TEMPLATE 1: "BE STILL" CIRCULAR TIMER (Image 1)
   ======================================================== */
.template-timer-view {
  color: #2c3527 !important;
}

html[data-theme="dark"] .template-timer-view {
  color: #e2e8f0 !important;
}

.timer-stage-inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(8px, 1.8vh, 18px) !important;
  max-width: 620px !important;
  width: 100% !important;
  margin: auto !important;
}

.timer-ring-wrapper {
  position: relative !important;
  width: clamp(190px, 27vh, 270px) !important;
  height: clamp(190px, 27vh, 270px) !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 auto !important;
}

.timer-dial-svg {
  width: 100% !important;
  height: 100% !important;
  transform: rotate(-90deg) !important;
}

.timer-track {
  fill: none !important;
  stroke: rgba(200, 185, 165, 0.35) !important;
  stroke-width: 8 !important;
}

html[data-theme="dark"] .timer-track {
  stroke: rgba(255, 255, 255, 0.12) !important;
}

.timer-progress {
  fill: none !important;
  stroke: #4e613e !important;
  stroke-width: 8 !important;
  stroke-linecap: round !important;
  stroke-dasharray: 691.15 !important;
  stroke-dashoffset: 0 !important;
  transition: stroke-dashoffset 0.9s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.timer-dial-inner {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
}

.timer-countdown-digits {
  font-size: clamp(2.4rem, 5.5vh, 3.8rem) !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
  line-height: 1 !important;
  color: inherit !important;
}

.timer-countdown-label {
  font-size: 0.68rem !important;
  font-weight: 850 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  opacity: 0.7 !important;
}

.template-scripture-quote {
  max-width: 620px !important;
  padding: 0 16px !important;
  margin-top: 4px !important;
}

.template-quote-text {
  font-size: clamp(0.95rem, 2vh, 1.25rem) !important;
  font-style: italic !important;
  line-height: 1.5 !important;
  margin: 0 0 6px !important;
}

html[data-theme="light"] .template-quote-text,
body:not([data-theme="dark"]) .template-quote-text {
  color: #0f172a !important;
  font-weight: 550 !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.75) !important;
}

html[data-theme="dark"] .template-quote-text {
  color: #ffffff !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6) !important;
}

.template-quote-ref {
  display: block !important;
  font-size: 0.74rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  opacity: 0.75 !important;
}

html[data-theme="light"] .template-quote-ref,
body:not([data-theme="dark"]) .template-quote-ref {
  color: #334155 !important;
  opacity: 0.9 !important;
}

html[data-theme="dark"] .template-quote-ref {
  color: #e2e8f0 !important;
}

.timer-actions-trio {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(20px, 4vw, 44px) !important;
  margin-top: clamp(8px, 1.8vh, 18px) !important;
}

.timer-btn-col {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 7px !important;
}

.timer-circle-btn {
  width: clamp(48px, 6.4vh, 56px) !important;
  height: clamp(48px, 6.4vh, 56px) !important;
  border-radius: 999px !important;
  display: grid !important;
  place-items: center !important;
  border: 1.5px solid rgba(200, 185, 165, 0.75) !important;
  background: rgba(255, 255, 255, 0.85) !important;
  color: #3b4736 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06) !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

html[data-theme="dark"] .timer-circle-btn {
  background: rgba(25, 30, 24, 0.85) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  color: #e2e8f0 !important;
}

.timer-circle-btn:hover {
  transform: translateY(-2px) scale(1.04) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12) !important;
}

.timer-circle-btn.timer-primary-btn {
  width: clamp(62px, 8.2vh, 72px) !important;
  height: clamp(62px, 8.2vh, 72px) !important;
  background: #4e613e !important;
  border: none !important;
  color: #ffffff !important;
  box-shadow: 0 8px 24px rgba(78, 97, 62, 0.45) !important;
}

.timer-circle-btn.timer-primary-btn:hover {
  background: #3f5032 !important;
  box-shadow: 0 10px 30px rgba(78, 97, 62, 0.55) !important;
}

.timer-btn-caption {
  font-size: 0.74rem !important;
  font-weight: 750 !important;
  letter-spacing: 0.04em !important;
  opacity: 0.85 !important;
}

/* ========================================================
   TEMPLATE 2: "BREATH PRAYER" CONCENTRIC RIPPLE (Image 2)
   ======================================================== */
.template-ripple-view {
  color: #0f172a !important;
}

html[data-theme="dark"] .template-ripple-view {
  color: #ffffff !important;
}

.ripple-stage-inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(6px, 1.4vh, 14px) !important;
  max-width: 640px !important;
  width: 100% !important;
  margin: auto !important;
}

.ripple-rings-stage {
  position: relative !important;
  width: clamp(200px, 28vh, 290px) !important;
  height: clamp(200px, 28vh, 290px) !important;
  display: grid !important;
  place-items: center !important;
  margin: clamp(4px, 1vh, 12px) auto !important;
}

.concentric-wave {
  position: absolute !important;
  border-radius: 999px !important;
  border: 1.5px solid rgba(42, 143, 137, 0.45) !important;
  opacity: 0.25 !important;
  animation: rippleWavePulse 6s ease-in-out infinite !important;
}

html[data-theme="dark"] .concentric-wave {
  border-color: rgba(130, 205, 190, 0.4) !important;
}

.concentric-wave.wave-1 { width: 58% !important; height: 58% !important; }
.wave-2 { width: 74% !important; height: 74% !important; animation-delay: 1.5s !important; }
.wave-3 { width: 90% !important; height: 90% !important; animation-delay: 3s !important; }
.wave-4 { width: 106% !important; height: 106% !important; animation-delay: 4.5s !important; }

@keyframes rippleWavePulse {
  0% { transform: scale(0.92); opacity: 0.15; }
  50% { transform: scale(1.05); opacity: 0.38; }
  100% { transform: scale(0.92); opacity: 0.15; }
}

.ripple-center-orb {
  width: clamp(110px, 15vh, 150px) !important;
  height: clamp(110px, 15vh, 150px) !important;
  border-radius: 42% 58% 65% 35% / 45% 40% 60% 55% !important;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.98) 0%, rgba(167, 243, 208, 0.85) 45%, rgba(45, 212, 191, 0.7) 75%, rgba(13, 148, 136, 0.5) 100%) !important;
  box-shadow: 0 0 50px rgba(45, 212, 191, 0.5), inset 0 0 25px rgba(255, 255, 255, 0.8) !important;
  animation: organicSlowPulse 10s ease-in-out infinite alternate !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

html[data-theme="dark"] .ripple-center-orb {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(94, 234, 212, 0.85) 45%, rgba(20, 184, 166, 0.75) 75%, rgba(15, 118, 110, 0.6) 100%) !important;
  box-shadow: 0 0 65px rgba(45, 212, 191, 0.6), inset 0 0 25px rgba(255, 255, 255, 0.6) !important;
}

@keyframes organicSlowPulse {
  0% {
    border-radius: 42% 58% 65% 35% / 45% 40% 60% 55%;
    transform: scale(0.92) rotate(0deg);
  }
  33% {
    border-radius: 58% 42% 40% 60% / 55% 65% 35% 45%;
    transform: scale(1.02) rotate(3deg);
  }
  66% {
    border-radius: 45% 55% 60% 40% / 60% 45% 55% 40%;
    transform: scale(1.06) rotate(-2deg);
  }
  100% {
    border-radius: 52% 48% 45% 55% / 40% 55% 45% 60%;
    transform: scale(0.96) rotate(1deg);
  }
}

/* ========================================================
   TEMPLATE 3: "GUIDED PRAYER JOURNEY" MILESTONES (Image 3)
   ======================================================== */
.template-journey-view {
  color: #0f172a !important;
}

html[data-theme="dark"] .template-journey-view {
  color: #ffffff !important;
}

.journey-stage-inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(8px, 1.6vh, 16px) !important;
  max-width: 640px !important;
  width: 100% !important;
  margin: auto !important;
}

.journey-track-wrapper {
  width: min(90%, 480px) !important;
  margin: clamp(4px, 1vh, 14px) auto !important;
  position: relative !important;
}

.journey-track-line {
  position: absolute !important;
  top: 16px !important;
  left: 18px !important;
  right: 18px !important;
  height: 2px !important;
  background: rgba(15, 23, 42, 0.2) !important;
  z-index: 1 !important;
}

html[data-theme="dark"] .journey-track-line {
  background: rgba(255, 255, 255, 0.25) !important;
}

.journey-track-fill {
  height: 100% !important;
  width: 35% !important;
  background: #b86b5c !important;
  transition: width 0.6s ease !important;
}

.journey-milestones-row {
  display: flex !important;
  justify-content: space-between !important;
  position: relative !important;
  z-index: 2 !important;
}

.journey-node {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 5px !important;
  cursor: pointer !important;
}

.journey-node .node-circle {
  width: 32px !important;
  height: 32px !important;
  border-radius: 99px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1.5px solid rgba(148, 163, 184, 0.8) !important;
  display: grid !important;
  place-items: center !important;
  font-size: 0.75rem !important;
  color: #0f172a !important;
  transition: all 0.3s ease !important;
}

html[data-theme="dark"] .journey-node .node-circle {
  background: rgba(20, 15, 12, 0.7) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  color: #ffffff !important;
}

.journey-node.completed .node-circle {
  background: #b86b5c !important;
  border-color: #b86b5c !important;
  color: #ffffff !important;
}

.journey-node.active .node-circle {
  border-color: #f87171 !important;
  box-shadow: 0 0 16px rgba(248, 113, 113, 0.6) !important;
}

.node-pulse {
  width: 9px !important;
  height: 9px !important;
  border-radius: 99px !important;
  background: #b86b5c !important;
}

html[data-theme="dark"] .node-pulse {
  background: #ffffff !important;
}

.node-label {
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  opacity: 0.9 !important;
}

html[data-theme="dark"] .node-label {
  color: #ffffff !important;
  opacity: 0.75 !important;
}

.journey-node.active .node-label {
  opacity: 1 !important;
  font-weight: 850 !important;
  color: #b91c1c !important;
}

html[data-theme="dark"] .journey-node.active .node-label {
  color: #fca5a5 !important;
}

.journey-contemplation-card {
  max-width: 600px !important;
  padding: clamp(12px, 1.8vh, 18px) clamp(16px, 2.5vw, 26px) !important;
  background: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(14px) !important;
  border-radius: 18px !important;
  border: 1px solid rgba(203, 213, 225, 0.9) !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08) !important;
  color: #0f172a !important;
}

html[data-theme="dark"] .journey-contemplation-card {
  background: rgba(20, 12, 10, 0.45) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
  color: #ffffff !important;
}

.journey-question-prompt {
  font-size: clamp(1.15rem, 2.5vh, 1.65rem) !important;
  font-weight: 500 !important;
  margin: 0 0 6px !important;
  line-height: 1.25 !important;
  color: #0f172a !important;
}

html[data-theme="dark"] .journey-question-prompt {
  color: #ffffff !important;
}

.journey-card-divider {
  width: 40px !important;
  height: 2px !important;
  background: #b86b5c !important;
  margin: 8px auto 10px !important;
}

/* ========================================================
   TEMPLATE 4: "WALK WITH GOD" GUIDED NATURE (Image 4)
   ======================================================== */
.template-nature-view {
  color: #0f172a !important;
}

html[data-theme="dark"] .template-nature-view {
  color: #ffffff !important;
}

.nature-stage-inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(6px, 1.4vh, 14px) !important;
  max-width: 640px !important;
  width: 100% !important;
  margin: auto !important;
}

.template-kicker-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  width: max-content !important;
  border-radius: 9999px !important;
  padding: 7px 15px !important;
  color: var(--primary) !important;
  background: var(--primary-surface) !important;
  border: 1px solid var(--primary-border) !important;
  font-size: 0.72rem !important;
  font-weight: 850 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
}

.nature-leaf-divider {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  width: min(85%, 260px) !important;
  margin: 0 auto !important;
}

.nature-leaf-divider .leaf-line {
  flex: 1 !important;
  height: 1px !important;
  background: rgba(15, 23, 42, 0.2) !important;
}

html[data-theme="dark"] .nature-leaf-divider .leaf-line {
  background: rgba(255, 255, 255, 0.3) !important;
}

.nature-leaf-badge {
  color: #16a34a !important;
  display: grid !important;
  place-items: center !important;
}

html[data-theme="dark"] .nature-leaf-badge {
  color: #86efac !important;
}

.nature-scripture-card {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  max-width: 600px !important;
  padding: clamp(10px, 1.5vh, 16px) clamp(16px, 2.5vw, 26px) !important;
  background: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(14px) !important;
  border-radius: 18px !important;
  border: 1px solid rgba(203, 213, 225, 0.9) !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08) !important;
  color: #0f172a !important;
}

html[data-theme="dark"] .nature-scripture-card {
  background: rgba(10, 24, 15, 0.45) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
  color: #ffffff !important;
}

.nature-controls-mid-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  gap: 12px !important;
}

.nature-soundscape-dropdown-wrap {
  position: relative !important;
}

.nature-soundscape-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 14px !important;
  border-radius: 99px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(203, 213, 225, 0.95) !important;
  color: #0f172a !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08) !important;
  font-size: 0.78rem !important;
  cursor: pointer !important;
  backdrop-filter: blur(10px) !important;
  transition: all 0.2s ease !important;
}

.nature-soundscape-btn:hover {
  background: #ffffff !important;
}

html[data-theme="dark"] .nature-soundscape-btn {
  background: rgba(255, 255, 255, 0.2) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .nature-soundscape-btn:hover {
  background: rgba(255, 255, 255, 0.3) !important;
}

.soundscape-meta {
  display: flex !important;
  flex-direction: column !important;
  text-align: left !important;
  line-height: 1.2 !important;
}

.soundscape-meta strong {
  font-size: 0.76rem !important;
}

.soundscape-meta small {
  font-size: 0.65rem !important;
  opacity: 0.8 !important;
}

.nature-soundscape-menu {
  position: absolute !important;
  bottom: calc(100% + 10px) !important;
  left: 0 !important;
  width: 224px !important;
  background: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(32px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(180%) !important;
  border: 1.5px solid rgba(226, 232, 240, 0.95) !important;
  border-radius: 20px !important;
  box-shadow: 0 20px 48px -8px rgba(15, 23, 42, 0.16), 0 0 0 1px rgba(255, 255, 255, 0.8) inset !important;
  padding: 8px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  z-index: 50 !important;
  animation: dialogZoomIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

html[data-theme="dark"] .nature-soundscape-menu {
  background: rgba(18, 26, 20, 0.94) !important;
  backdrop-filter: blur(32px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7) !important;
}

.nature-soundscape-menu[hidden] {
  display: none !important;
}

.nature-soundscape-opt {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 9px 12px !important;
  border-radius: 12px !important;
  font-size: 0.8rem !important;
  font-weight: 650 !important;
  background: transparent !important;
  border: none !important;
  color: #334155 !important;
  cursor: pointer !important;
  text-align: left !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.nature-soundscape-opt:hover,
.nature-soundscape-opt.active {
  background: rgba(22, 163, 74, 0.12) !important;
  color: #15803d !important;
  transform: translateX(2px) !important;
}

html[data-theme="dark"] .nature-soundscape-opt {
  color: #e2e8f0 !important;
}

html[data-theme="dark"] .nature-soundscape-opt:hover,
html[data-theme="dark"] .nature-soundscape-opt.active {
  background: rgba(134, 239, 172, 0.18) !important;
  color: #86efac !important;
  transform: translateX(2px) !important;
}

.nature-reflection-row {
  display: flex !important;
  justify-content: center !important;
  margin-top: 4px !important;
}

.nature-reflection-pill-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 22px !important;
  border-radius: 99px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(203, 213, 225, 0.95) !important;
  color: #0f172a !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08) !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  backdrop-filter: blur(12px) !important;
  transition: all 0.2s ease !important;
}

.nature-reflection-pill-btn:hover {
  background: #ffffff !important;
  transform: translateY(-1px) !important;
}

html[data-theme="dark"] .nature-reflection-pill-btn {
  background: rgba(255, 255, 255, 0.2) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .nature-reflection-pill-btn:hover {
  background: rgba(255, 255, 255, 0.35) !important;
}

/* ========================================================
   TEMPLATE 5: "JOY COMES IN THE MORNING" SUNBURST (Image 5)
   ======================================================== */
.template-sunburst-view {
  color: #2c221e !important;
}

html[data-theme="dark"] .template-sunburst-view {
  color: #ffffff !important;
}

.sunburst-stage-inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(6px, 1.3vh, 12px) !important;
  max-width: 640px !important;
  width: 100% !important;
  margin: auto !important;
}

.sunburst-sun-crest-stage {
  display: flex !important;
  justify-content: center !important;
  align-items: flex-end !important;
  margin: clamp(4px, 1vh, 10px) 0 !important;
}

.sunburst-sun-semi {
  width: clamp(140px, 20vh, 190px) !important;
  height: clamp(70px, 10vh, 95px) !important;
  background: linear-gradient(180deg, #fb923c 0%, #f97316 100%) !important;
  border-top-left-radius: 999px !important;
  border-top-right-radius: 999px !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  position: relative !important;
  box-shadow: 0 -8px 24px rgba(249, 115, 22, 0.4) !important;
}

.sunburst-crest-play-btn {
  width: clamp(52px, 7.5vh, 64px) !important;
  height: clamp(52px, 7.5vh, 64px) !important;
  border-radius: 999px !important;
  border: none !important;
  background: #ffffff !important;
  color: #ea580c !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
  transform: translateY(50%) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important;
  transition: transform 0.2s ease !important;
}

.sunburst-crest-play-btn:hover {
  transform: translateY(50%) scale(1.06) !important;
}

.sunburst-scrubber-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: min(88%, 460px) !important;
  margin-top: clamp(28px, 4.5vh, 38px) !important;
}

.sunburst-calligraphy-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 2px !important;
  margin: clamp(4px, 0.8vh, 8px) 0 !important;
}

.sunburst-kicker-tags {
  font-size: 0.7rem !important;
  font-weight: 850 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: #475569 !important;
  opacity: 0.9 !important;
}

html[data-theme="dark"] .sunburst-kicker-tags {
  color: #ffffff !important;
  opacity: 0.75 !important;
}

.sunburst-calligraphy-text {
  font-family: 'Brush Script MT', 'Dancing Script', 'Caveat', cursive, serif !important;
  font-size: clamp(2.2rem, 4.8vh, 3.2rem) !important;
  color: #c2410c !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8) !important;
  transform: rotate(-3deg) !important;
  margin: 0 !important;
  line-height: 1.1 !important;
}

html[data-theme="dark"] .sunburst-calligraphy-text {
  color: #fb923c !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important;
}

.sunburst-sub-tag {
  font-size: 0.68rem !important;
  font-weight: 850 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: #475569 !important;
  opacity: 0.9 !important;
}

html[data-theme="dark"] .sunburst-sub-tag {
  color: #ffffff !important;
  opacity: 0.75 !important;
}

.sunburst-bottom-controls-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: min(88%, 460px) !important;
  margin-top: clamp(4px, 1vh, 10px) !important;
}

.volume-num-tag {
  font-size: 0.74rem !important;
  font-weight: 750 !important;
  opacity: 0.8 !important;
}

.sunburst-praise-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 7px 18px !important;
  border-radius: 999px !important;
  background: #f97316 !important;
  border: none !important;
  color: #ffffff !important;
  font-size: 0.8rem !important;
  font-weight: 750 !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(249, 115, 22, 0.35) !important;
  transition: all 0.2s ease !important;
}

.sunburst-praise-btn:hover {
  background: #ea580c !important;
  transform: translateY(-1px) !important;
}

/* ========================================================
   SHARED INTEGRATED PLAYER TIMELINE & CONTROLS
   ======================================================== */
.template-integrated-player {
  width: min(90%, 540px) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: clamp(8px, 1.4vh, 14px) !important;
  margin-top: clamp(6px, 1.2vh, 14px) !important;
}

.integrated-timeline-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
}

.timeline-time-label {
  font-size: 0.74rem !important;
  font-weight: 750 !important;
  font-variant-numeric: tabular-nums !important;
  opacity: 0.85 !important;
  min-width: 32px !important;
  color: #0f172a !important;
}

html[data-theme="dark"] .timeline-time-label {
  color: #ffffff !important;
}

.integrated-timeline-track {
  flex: 1 1 auto !important;
  height: 5px !important;
  background: rgba(15, 23, 42, 0.16) !important;
  border-radius: 99px !important;
  position: relative !important;
  cursor: pointer !important;
  overflow: hidden !important;
}

html[data-theme="dark"] .integrated-timeline-track {
  background: rgba(255, 255, 255, 0.25) !important;
}

html[data-theme="light"] .template-timer-view .integrated-timeline-track,
html[data-theme="light"] .template-sunburst-view .integrated-timeline-track {
  background: rgba(0, 0, 0, 0.15) !important;
}

.integrated-timeline-fill {
  height: 100% !important;
  width: 0% !important;
  background: #0f172a !important;
  border-radius: 99px !important;
  transition: width 0.15s linear !important;
}

html[data-theme="dark"] .integrated-timeline-fill {
  background: #ffffff !important;
}

.sunburst-timeline-fill {
  background: #f97316 !important;
}

.integrated-controls-trio-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
}

.integrated-volume-block {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: #0f172a !important;
}

html[data-theme="dark"] .integrated-volume-block {
  color: #ffffff !important;
}

.integrated-volume-block i {
  width: 16px !important;
  height: 16px !important;
  opacity: 0.8 !important;
}

.mini-volume-range {
  width: clamp(60px, 8vw, 84px) !important;
  height: 4px !important;
  cursor: pointer !important;
  accent-color: #0f172a !important;
}

html[data-theme="dark"] .mini-volume-range {
  accent-color: #ffffff !important;
}

.integrated-circle-play-btn {
  width: clamp(52px, 7.5vh, 62px) !important;
  height: clamp(52px, 7.5vh, 62px) !important;
  border-radius: 999px !important;
  border: none !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
  background: #2a8f89 !important;
  color: #ffffff !important;
  box-shadow: 0 6px 20px rgba(42, 143, 137, 0.45) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.integrated-circle-play-btn:hover {
  transform: translateY(-2px) scale(1.05) !important;
}

.journey-primary-btn {
  background: #b86b5c !important;
  box-shadow: 0 6px 20px rgba(184, 107, 92, 0.45) !important;
}

.nature-primary-btn {
  background: #2d5a3f !important;
  box-shadow: 0 6px 20px rgba(45, 90, 63, 0.45) !important;
}

.journey-center-controls {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.journey-skip-btn {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(203, 213, 225, 0.95) !important;
  color: #0f172a !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06) !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 99px !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
  position: relative !important;
  transition: all 0.2s ease !important;
}

.journey-skip-btn:hover {
  background: #ffffff !important;
}

html[data-theme="dark"] .journey-skip-btn {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .journey-skip-btn:hover {
  background: rgba(255, 255, 255, 0.25) !important;
}

.journey-skip-btn .skip-num {
  position: absolute !important;
  font-size: 0.55rem !important;
  font-weight: 850 !important;
  bottom: 6px !important;
}

.integrated-pill-action-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 7px 16px !important;
  border-radius: 99px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(203, 213, 225, 0.95) !important;
  color: #0f172a !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  backdrop-filter: blur(10px) !important;
  transition: all 0.2s ease !important;
}

.integrated-pill-action-btn:hover {
  background: #ffffff !important;
}

html[data-theme="dark"] .integrated-pill-action-btn {
  background: rgba(255, 255, 255, 0.2) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .integrated-pill-action-btn:hover {
  background: rgba(255, 255, 255, 0.32) !important;
}

/* HIDDEN LEGACY COMPATIBILITY VAULT */
#legacy-compatibility-vault,
.legacy-compatibility-vault {
  display: none !important;
  visibility: hidden !important;
  position: absolute !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
}


/* 6. SCRIPTURE CAROUSEL & AUTO-PLAY CONTROLS */
.room-scripture-carousel-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  margin-top: 10px !important;
}

.scripture-carousel-nav-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 6px 14px !important;
  border-radius: 99px !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  border: 1px solid var(--border-subtle) !important;
  background: var(--surface-soft, rgba(255, 255, 255, 0.12)) !important;
  color: inherit !important;
  transition: all 0.2s ease !important;
}

.scripture-carousel-nav-btn:hover {
  background: var(--room-primary, #4a5d3f) !important;
  color: #ffffff !important;
  border-color: var(--room-primary, #4a5d3f) !important;
}

.scripture-carousel-meta {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.scripture-counter-pill {
  font-size: 0.76rem !important;
  font-weight: 800 !important;
  padding: 3px 10px !important;
  border-radius: 99px !important;
  background: rgba(0, 0, 0, 0.08) !important;
}

html[data-theme="dark"] .scripture-counter-pill {
  background: rgba(255, 255, 255, 0.12) !important;
}

.scripture-autoplay-indicator {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 0.72rem !important;
  font-weight: 750 !important;
  color: var(--room-primary, #4a5d3f) !important;
}

/* 7. BOTTOM PLAYER SCRUBBER & EXTRA CONTROLS */
.bottom-player-scrubber {
  flex: 1 1 100% !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 0 10px !important;
}

.scrubber-time {
  font-size: 0.72rem !important;
  font-weight: 750 !important;
  font-variant-numeric: tabular-nums !important;
  opacity: 0.75 !important;
}

.scrubber-progress-track {
  flex: 1 1 auto !important;
  height: 4px !important;
  background: rgba(148, 163, 184, 0.35) !important;
  border-radius: 99px !important;
  position: relative !important;
  cursor: pointer !important;
  overflow: hidden !important;
}

.scrubber-progress-fill {
  height: 100% !important;
  width: 0% !important;
  background: var(--room-primary, #4a5d3f) !important;
  border-radius: 99px !important;
  transition: width 0.25s linear !important;
}

.bottom-player-controls {
  position: relative !important;
}

.btn-skip-label {
  position: absolute !important;
  bottom: 2px !important;
  font-size: 0.55rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

/* 8. AMBIENCE SELECTOR PILL & DROPDOWN */
.bottom-ambience-selector {
  position: relative !important;
}

.ambience-pill-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 14px !important;
  border-radius: 99px !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  border: 1px solid var(--border-subtle) !important;
  background: transparent !important;
  color: inherit !important;
  transition: all 0.2s ease !important;
}

.ambience-dropdown-menu {
  position: absolute !important;
  bottom: calc(100% + 10px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 230px !important;
  background: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(32px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(180%) !important;
  border: 1.5px solid rgba(226, 232, 240, 0.95) !important;
  border-radius: 20px !important;
  box-shadow: 0 20px 48px -8px rgba(15, 23, 42, 0.16), 0 0 0 1px rgba(255, 255, 255, 0.8) inset !important;
  padding: 8px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  z-index: 100 !important;
  animation: dialogZoomIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

html[data-theme="dark"] .ambience-dropdown-menu {
  background: rgba(15, 23, 42, 0.94) !important;
  backdrop-filter: blur(32px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7) !important;
}

.ambience-dropdown-menu[hidden] {
  display: none !important;
}

.ambience-option-btn {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 9px 12px !important;
  border-radius: 12px !important;
  font-size: 0.82rem !important;
  font-weight: 650 !important;
  border: none !important;
  background: transparent !important;
  color: inherit !important;
  cursor: pointer !important;
  text-align: left !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.ambience-option-btn:hover,
.ambience-option-btn.active {
  background: hsla(var(--room-hue, 100), 80%, 55%, 0.15) !important;
  color: var(--room-primary, #4a5d3f) !important;
  transform: translateX(2px) !important;
}

/* 9. REFLECTION NOTE ACTION PILL */
.reflection-pill-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 7px 18px !important;
  border-radius: 99px !important;
  font-size: 0.82rem !important;
  font-weight: 750 !important;
  cursor: pointer !important;
  border: 1px solid var(--border-subtle) !important;
  background: rgba(255, 255, 255, 0.85) !important;
  color: #0f172a !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

html[data-theme="dark"] .reflection-pill-btn {
  background: rgba(15, 23, 42, 0.8) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45) !important;
}

.reflection-pill-btn:hover {
  background: var(--room-primary, #4a5d3f) !important;
  color: #ffffff !important;
  border-color: var(--room-primary, #4a5d3f) !important;
  transform: translateY(-1px) !important;
}

/* 10. CREATE SANCTUARY ROOM TEMPLATE GRID */
.template-selection-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important;
  gap: 10px !important;
  margin-bottom: 14px !important;
}

.template-choice-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 10px 8px !important;
  border-radius: 14px !important;
  border: 1.5px solid var(--border-subtle) !important;
  background: rgba(0, 0, 0, 0.02) !important;
  cursor: pointer !important;
  text-align: center !important;
  transition: all 0.2s ease !important;
  position: relative !important;
}

html[data-theme="dark"] .template-choice-card {
  background: rgba(255, 255, 255, 0.04) !important;
}

.template-choice-card input {
  position: absolute !important;
  opacity: 0 !important;
}

.template-choice-card:hover,
.template-choice-card.active {
  border-color: var(--primary) !important;
  background: hsla(var(--primary-h), 80%, 55%, 0.1) !important;
  transform: translateY(-2px) !important;
}

.template-card-preview {
  width: 52px !important;
  height: 52px !important;
  border-radius: 99px !important;
  border: 1px dashed var(--primary) !important;
  display: grid !important;
  place-items: center !important;
  font-size: 0.68rem !important;
  font-weight: 750 !important;
  margin-bottom: 6px !important;
  color: var(--primary) !important;
}

.template-title {
  font-size: 0.8rem !important;
  font-weight: 750 !important;
  margin-bottom: 2px !important;
}

.template-desc {
  font-size: 0.68rem !important;
  opacity: 0.75 !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}

/* COLOR PALETTE SWATCHES */
.color-palette-swatches {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.swatch-btn {
  width: 26px !important;
  height: 26px !important;
  border-radius: 99px !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
  cursor: pointer !important;
  transition: transform 0.2s ease !important;
}

.swatch-btn.active {
  transform: scale(1.22) !important;
  outline: 2px solid var(--primary) !important;
}

#new-room-custom-color {
  width: 32px !important;
  height: 28px !important;
  padding: 0 !important;
  border-radius: 6px !important;
  border: 1px solid var(--border-subtle) !important;
  cursor: pointer !important;
}

/* MODE CHOICE PILLS */
.mode-choice-pills {
  display: flex !important;
  gap: 8px !important;
}

.mode-pill {
  flex: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 8px 12px !important;
  border-radius: 12px !important;
  border: 1.5px solid var(--border-subtle) !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.mode-pill input {
  position: absolute !important;
  opacity: 0 !important;
}

.mode-pill.active {
  border-color: var(--primary) !important;
  background: hsla(var(--primary-h), 80%, 55%, 0.12) !important;
  color: var(--primary) !important;
}

/* Standard directory header: Churches, Meditation, Events, Store, Live,
   Resources and Channels share one visual and interaction hierarchy. */
.module-directory-hero {
  min-height: 0;
  box-sizing: border-box;
  display: flex;
  align-items: flex-end;
  padding: 100px 0 48px;
  border-bottom: 1px solid rgba(167, 139, 250, 0.12);
  background: linear-gradient(145deg, rgba(246,246,254,0.96), rgba(239,246,255,0.92));
}

.module-directory-hero::before,
.module-directory-hero::after {
  display: block;
  animation: module-hero-atmosphere 12s ease-in-out infinite alternate;
}
.module-directory-hero::before {
  background: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.24);
}
.module-directory-hero::after {
  background: hsla(var(--primary-h), var(--primary-s), calc(var(--primary-l) + 10%), 0.16);
  animation-delay: -6s;
  animation-direction: alternate-reverse;
}

@keyframes module-hero-atmosphere {
  0% { transform: translate3d(-3%, -2%, 0) scale(0.94); }
  100% { transform: translate3d(6%, 4%, 0) scale(1.1); }
}

@media (prefers-reduced-motion: reduce) {
  .module-directory-hero { animation: none; }
}

.module-directory-hero .module-hero-inner,
.module-directory-hero > .module-shell {
  width: min(var(--max), calc(100% - 44px));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(220px, 1fr);
  align-items: flex-end;
  gap: clamp(28px, 5vw, 72px);
}

.module-directory-hero .module-hero-copy { min-width: 0; }

.module-directory-hero .section-head,
.module-directory-hero .section-head > div { margin: 0; }

.module-directory-hero .module-kicker,
.module-directory-hero .kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin: 0 0 22px;
  padding: 8px 14px;
  border: 1px solid var(--primary-border);
  border-radius: 999px;
  background: var(--primary-surface);
  color: #b35cff;
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
}

.module-directory-hero h1,
.module-directory-hero h2 {
  max-width: 760px;
  margin: 0;
  color: var(--text-primary);
  font-size: clamp(2.2rem, 3.8vw, 3.4rem);
  font-weight: 850;
  line-height: 1.05;
  letter-spacing: -0.045em;
}

.module-directory-hero p:not(.kicker):not(.module-kicker) {
  max-width: 720px;
  margin: 20px 0 0;
  color: var(--text-secondary);
  font-size: clamp(1rem, 1.2vw, 1.14rem);
  line-height: 1.72;
}

.module-directory-hero .module-primary-action {
  width: 100%;
  max-width: 290px;
  min-height: 58px;
  justify-self: end;
  justify-content: center;
  padding-inline: 26px;
  border: 1px solid rgba(255,255,255,0.14);
  background: #9333ea;
  color: #fff;
  box-shadow: 0 16px 34px rgba(126, 34, 206, 0.34);
}

.module-directory-hero .module-creator-action:disabled,
.module-directory-hero .module-creator-action[aria-disabled="true"] {
  opacity: 0.52;
  cursor: not-allowed;
  filter: saturate(0.38);
  box-shadow: none;
  transform: none;
}

.module-directory-toolbar,
.pill-filter-bar-container.module-directory-toolbar {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  margin: 0 0 34px;
  padding: 20px;
  gap: 16px;
  border: 1px solid var(--border-subtle);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: 0 14px 34px rgba(4, 18, 52, 0.08);
  transform: translateY(-50%);
  position: relative;
  z-index: 20;
}

.module-directory-hero + .module-content { padding-top: 0; }

.module-directory-toolbar .module-search {
  position: relative;
  display: flex;
  flex: 2 1 360px;
  align-items: center;
  min-width: 240px;
  min-height: 64px;
  box-sizing: border-box;
  gap: 12px;
  padding: 0 18px;
  border: 1px solid var(--border-subtle);
  border-radius: 15px;
  background-color: var(--surface-soft);
  color: var(--text-primary);
}

.module-directory-toolbar .module-filter-group {
  display: flex;
  flex: 3 1 500px;
  align-items: stretch;
  gap: 16px;
  min-width: 0;
}

.module-directory-toolbar .module-filter-group > .module-filter-trigger {
  flex: 1 1 120px;
  min-width: 120px;
  justify-content: center;
}

.module-directory-toolbar .module-filter-control {
  position: relative;
  display: block;
  flex: 1 1 150px;
  min-width: 138px;
}

.module-directory-toolbar .module-filter-trigger {
  width: 100%;
  min-height: 64px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 18px;
  border: 1px solid var(--border-subtle);
  border-radius: 15px;
  border-color: var(--border-subtle);
  background-color: var(--surface-soft);
  color: var(--text-primary);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 750;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
}

.module-directory-toolbar .module-search input,
.module-directory-toolbar .search-hero-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  padding: 0;
  color: var(--text-primary);
  font: inherit;
  font-size: 0.95rem;
}
.module-directory-toolbar .search-hero-input {
  width: 100%;
  height: 100%;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.module-directory-toolbar input::placeholder { color: var(--text-muted); opacity: 1; }
.module-directory-toolbar .module-search > svg,
.module-directory-toolbar .module-search > i {
  position: static;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  color: var(--primary);
}
.module-directory-toolbar .module-filter-trigger .trigger-arrow,
.module-directory-toolbar .module-filter-trigger .pill-arrow {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin-left: auto;
  transition: transform 180ms ease;
}
.module-directory-toolbar .module-filter-control.open > .module-filter-trigger .trigger-arrow,
.module-directory-toolbar .module-filter-control.open > .module-filter-trigger .pill-arrow { transform: rotate(180deg); }

.module-directory-toolbar .custom-options-panel,
.module-directory-toolbar .filter-dropdown-panel {
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  min-width: 220px;
  padding: 8px;
  border: 1px solid var(--border-subtle);
  border-radius: 15px;
  background: var(--surface);
  box-shadow: 0 18px 44px rgba(4, 18, 52, 0.18);
  z-index: 10001 !important;
}
.module-directory-toolbar .custom-option,
.module-directory-toolbar .custom-checkbox-row {
  min-height: 42px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-radius: 10px;
  color: var(--text-primary);
  font-size: 0.86rem;
  cursor: pointer;
}
.module-directory-toolbar .custom-option:hover,
.module-directory-toolbar .custom-option.selected,
.module-directory-toolbar .custom-checkbox-row:hover {
  background: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.12);
  color: var(--primary);
}
.module-directory-toolbar .lobby-tab-btn {
  flex: 1 1 145px;
  justify-content: center;
}
.module-directory-toolbar .lobby-tab-btn.active {
  border-color: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.45);
  background: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.16);
  color: var(--primary);
}

body[data-page="public"] .module-content,
body[data-page="events"] .module-content { padding-top: 36px; }

html[data-theme="dark"] .module-directory-hero h1,
html[data-theme="dark"] .module-directory-hero h2 { color: #fff; }
html[data-theme="dark"] .module-directory-hero p:not(.kicker):not(.module-kicker) { color: #ded6e8; }

@media (max-width: 900px) {
  .module-directory-hero { min-height: 0; }
  .module-directory-hero .module-hero-inner,
  .module-directory-hero > .module-shell {
    grid-template-columns: minmax(0, 1fr);
    align-items: flex-start;
    gap: 22px;
  }
  .module-directory-hero .module-primary-action {
    width: auto;
    max-width: 100%;
    justify-self: start;
  }
  .module-directory-toolbar .module-search,
  .module-directory-toolbar .module-filter-group { flex-basis: 100%; }
  .module-directory-toolbar .module-filter-group { flex-wrap: wrap; }
}

@media (max-width: 640px) {
  .module-directory-hero {
    min-height: 0;
    padding: 100px 0 36px;
    background-size: cover;
  }
  .module-directory-hero .module-hero-inner,
  .module-directory-hero > .module-shell { width: min(100% - 28px, var(--max)); }
  .module-directory-hero h1,
  .module-directory-hero h2 { font-size: clamp(2.25rem, 12vw, 3.25rem); }
  .module-directory-hero .module-primary-action {
    width: 100%;
    justify-self: stretch;
  }
  .module-directory-toolbar,
  .pill-filter-bar-container.module-directory-toolbar {
    padding: 12px;
    border-radius: 18px;
  }
  .module-directory-toolbar .module-search,
  .module-directory-toolbar .module-filter-trigger { min-height: 54px; }
  .module-directory-toolbar .module-filter-group { gap: 10px; }
}

/* Shared single-row directory search and responsive filter disclosure */
.module-directory-toolbar,
.pill-filter-bar-container.module-directory-toolbar {
  --module-control-height: 56px;
  --module-control-radius: 14px;
  flex-wrap: nowrap;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 20px;
  overflow: visible;
}

.module-directory-toolbar .module-search,
.module-directory-toolbar .module-filter-trigger {
  box-sizing: border-box !important;
  height: var(--module-control-height);
  min-height: var(--module-control-height);
  max-height: var(--module-control-height);
  border-radius: var(--module-control-radius);
}

.module-directory-toolbar .module-search {
  flex: 1 1 auto;
  min-width: 360px;
  padding: 0 16px;
}

.module-directory-toolbar .module-filter-group {
  flex: 0 1 auto;
  flex-wrap: nowrap;
  gap: 12px;
  min-width: 0;
}

.module-directory-toolbar .module-filter-control,
.module-directory-toolbar .module-filter-group > .module-filter-trigger {
  flex: 0 1 138px;
  width: 138px;
  min-width: 0;
}

.module-directory-toolbar .module-filter-trigger {
  padding: 0 15px;
  white-space: nowrap;
}

.module-directory-toolbar .module-filter-trigger > span:not(.pill-badge) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.module-filter-overflow {
  position: relative;
  flex: 0 0 56px !important;
  width: 56px !important;
}

.module-filter-overflow[hidden],
.module-mobile-filter-button[hidden] { display: none !important; }

.module-directory-toolbar .module-overflow-trigger {
  width: 56px;
  padding: 0;
  justify-content: center;
  gap: 0;
}

.module-overflow-trigger > svg:first-child { width: 19px; height: 19px; }
.module-overflow-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.module-filter-popup {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(330px, calc(100vw - 32px));
  box-sizing: border-box;
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 20px 48px rgba(4, 18, 52, 0.24);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(.98);
  transform-origin: top right;
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
  z-index: 200;
}

.module-filter-overflow.open .module-filter-popup {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.module-filter-popup > .module-filter-control,
.module-filter-popup > .module-filter-trigger {
  width: 100%;
  flex-basis: auto;
}

.module-filter-popup .custom-options-panel,
.module-filter-popup .filter-dropdown-panel {
  left: auto;
  right: 0;
  width: 100%;
  min-width: 100%;
}

.module-mobile-filter-button {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid hsla(var(--primary-h), var(--primary-s), var(--primary-l), .28);
  border-radius: 11px;
  background: hsla(var(--primary-h), var(--primary-s), var(--primary-l), .12);
  color: var(--primary);
  cursor: pointer;
}
.module-mobile-filter-button svg { width: 19px; height: 19px; }
.module-filter-popup-head { display: none; }

@media (max-width: 700px) {
  .module-directory-toolbar,
  .pill-filter-bar-container.module-directory-toolbar {
    --module-control-height: 54px;
    display: block;
    position: relative;
    padding: 10px;
    border-radius: 17px;
  }

  .module-directory-toolbar .module-search {
    width: 100%;
    min-width: 0;
    padding: 0 58px 0 14px;
  }

  .module-directory-toolbar > .module-mobile-filter-button {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 230;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    cursor: pointer;
  }

  .module-mobile-filter-button.is-open {
    background: var(--primary) !important;
    color: #ffffff !important;
    border-color: var(--primary) !important;
  }
  .module-mobile-filter-button.is-open svg,
  .module-mobile-filter-button.is-open i {
    color: #ffffff !important;
  }

  .module-directory-toolbar > .module-filter-group { display: none; }

  .module-filter-overflow.mobile-filter-mode {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 220;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
  }

  .module-filter-overflow.mobile-filter-mode:not(.open) {
    display: none !important;
    height: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .module-filter-overflow.mobile-filter-mode.open {
    display: block !important;
    height: auto !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .module-filter-overflow.mobile-filter-mode > .module-overflow-trigger { display: none !important; }

  .module-filter-overflow.mobile-filter-mode .module-filter-popup {
    position: relative !important;
    top: 0;
    left: 0;
    right: 0;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    max-height: min(72vh, 540px);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px;
    border-radius: 18px;
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.28) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .module-filter-popup-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding-bottom: 12px !important;
    margin-bottom: 4px !important;
    border-bottom: 1px solid var(--border-subtle) !important;
  }

  .module-filter-popup-title {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 0.92rem !important;
    font-weight: 800 !important;
    color: var(--text-primary) !important;
  }

  .module-filter-popup-title svg,
  .module-filter-popup-title i {
    width: 16px !important;
    height: 16px !important;
    color: var(--primary) !important;
  }

  .module-filter-popup-close {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    border-radius: 9px !important;
    border: 1px solid var(--border-subtle) !important;
    background: var(--surface-soft) !important;
    color: var(--text-secondary) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
  }

  .module-filter-popup-close:hover {
    background: var(--surface) !important;
    color: var(--text-primary) !important;
    border-color: var(--border) !important;
  }

  .module-filter-popup-close svg,
  .module-filter-popup-close i {
    width: 15px !important;
    height: 15px !important;
  }

  .module-filter-overflow.mobile-filter-mode .module-filter-popup > .module-filter-control,
  .module-filter-overflow.mobile-filter-mode .module-filter-popup > .module-filter-trigger {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: none !important;
    display: block !important;
    height: auto !important;
    margin: 0 !important;
  }

  .module-filter-popup .module-filter-trigger {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
  }

  .module-filter-overflow.mobile-filter-mode .module-filter-popup .custom-options-panel,
  .module-filter-overflow.mobile-filter-mode .module-filter-popup .filter-dropdown-panel {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-top: 8px !important;
    box-shadow: none !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 12px !important;
    background: var(--surface-soft) !important;
    display: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  .module-filter-overflow.mobile-filter-mode .module-filter-popup .custom-pill-filter.open .filter-dropdown-panel,
  .module-filter-overflow.mobile-filter-mode .module-filter-popup .custom-select-container.open .custom-options-panel {
    display: block !important;
  }
}

.module-directory-toolbar .lobby-tab-btn.module-filter-trigger {
  height: var(--module-control-height) !important;
  min-height: var(--module-control-height) !important;
  max-height: var(--module-control-height) !important;
  padding: 0 15px !important;
  border-radius: var(--module-control-radius) !important;
  background: var(--surface-soft) !important;
}

.module-directory-toolbar .lobby-tab-btn.module-filter-trigger.active {
  border-color: hsla(var(--primary-h), var(--primary-s), var(--primary-l), .45) !important;
  background: var(--primary) !important;
  color: #fff !important;
}

/* One public search component across directories, the SPA shell, profiles and messaging. */
.site-search,
.messages-search {
  --site-search-height: 44px;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100%;
  height: var(--site-search-height) !important;
  min-height: var(--site-search-height) !important;
  max-height: var(--site-search-height) !important;
  padding: 0 15px !important;
  overflow: hidden !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 14px !important;
  background: var(--surface-soft) !important;
  color: var(--text-primary) !important;
  box-shadow: 0 3px 10px rgba(4,18,52,.05) !important;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease !important;
}
.module-directory-toolbar .site-search { --site-search-height: var(--module-control-height); }
.site-search > svg,
.site-search > i,
.messages-search > svg,
.messages-search > i {
  position: static !important;
  flex: 0 0 19px !important;
  width: 19px !important;
  height: 19px !important;
  color: var(--text-muted) !important;
}
.site-search input,
.messages-search input,
html[data-theme="dark"] .site-search input,
html[data-theme="dark"] .messages-search input {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--text-primary) !important;
  font: inherit !important;
  font-size: .92rem !important;
}
.site-search:focus-within,
.messages-search:focus-within,
html[data-theme="dark"] .site-search:focus-within,
html[data-theme="dark"] .messages-search:focus-within {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px hsla(var(--primary-h),var(--primary-s),var(--primary-l),.18) !important;
}
html[data-theme="dark"] .site-search,
html[data-theme="dark"] .messages-search {
  background: var(--surface-soft) !important;
  border-color: var(--border-subtle) !important;
  box-shadow: 0 3px 12px rgba(0,0,0,.18) !important;
}
html[data-theme="dark"] .site-search:focus-within,
html[data-theme="dark"] .messages-search:focus-within {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px hsla(var(--primary-h),var(--primary-s),var(--primary-l),.22) !important;
}
@media(max-width:700px) {
  .module-directory-toolbar .site-search { --site-search-height: 54px; }
}

/* Public directory search/filter system. This is the sole visual owner of every module tray. */
.site-search-bar {
  --site-search-control-height: 56px;
  --site-search-radius: 14px;
  box-sizing: border-box !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  position: relative !important;
  z-index: 40 !important;
  isolation: isolate;
  margin: 0 0 34px !important;
  padding: 12px !important;
  overflow: visible !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 20px !important;
  background: var(--surface) !important;
  box-shadow: 0 14px 34px rgba(4,18,52,.08) !important;
}
.site-search-bar.has-open-dropdown,
.site-search-bar:has(.open),
.module-directory-toolbar.has-open-dropdown,
.module-directory-toolbar:has(.open),
.aw-filters.has-open-dropdown,
.aw-filters:has(.open) {
  z-index: 500 !important;
}
.module-directory-hero + .module-content > .site-search-bar,
.module-directory-hero + .module-content > * > .site-search-bar {
  transform: translateY(-50%);
}
.site-search-bar .site-search {
  box-sizing: border-box !important;
  display: flex !important;
  flex: 1 1 auto !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 360px !important;
  width: auto !important;
  height: var(--site-search-control-height) !important;
  min-height: var(--site-search-control-height) !important;
  max-height: var(--site-search-control-height) !important;
  margin: 0 !important;
  padding: 0 16px !important;
  overflow: hidden !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--site-search-radius) !important;
  background: var(--surface-soft) !important;
  box-shadow: none !important;
}
.site-search-bar .site-search:focus-within {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px hsla(var(--primary-h),var(--primary-s),var(--primary-l),.18) !important;
}
.site-search-bar .site-search input,
.site-search-bar .site-search input:focus,
html[data-theme="dark"] .site-search-bar .site-search input,
html[data-theme="dark"] .site-search-bar .site-search input:focus {
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.site-search-bar .pill-search-input-wrapper .search-hero-icon {
  position: static !important;
  left: auto !important;
  flex: 0 0 19px !important;
  width: 19px !important;
  height: 19px !important;
  pointer-events: none !important;
}
.site-search-bar .pill-search-input-wrapper .search-hero-input {
  box-sizing: border-box !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.site-search-bar .module-filter-group {
  display: flex !important;
  flex: 0 1 auto !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
}
.site-search-bar .module-filter-control,
.site-search-bar .module-filter-group > .module-filter-trigger {
  position: relative !important;
  display: block !important;
  flex: 0 1 178px !important;
  width: 178px !important;
  min-width: 0 !important;
  height: var(--site-search-control-height) !important;
}
.site-search-bar .module-filter-trigger,
.site-search-bar .lobby-tab-btn.module-filter-trigger {
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  width: 100% !important;
  height: var(--site-search-control-height) !important;
  min-height: var(--site-search-control-height) !important;
  max-height: var(--site-search-control-height) !important;
  padding: 0 15px !important;
  overflow: hidden !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--site-search-radius) !important;
  background: var(--surface-soft) !important;
  color: var(--text-primary) !important;
  box-shadow: none !important;
}
.site-search-bar .module-filter-trigger > span:not(.pill-badge) {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.site-search-bar .lobby-tab-btn.module-filter-trigger.active {
  border-color: var(--primary) !important;
  background: var(--primary) !important;
  color: #fff !important;
}
.site-search-bar .module-filter-overflow {
  flex: 0 0 var(--site-search-control-height) !important;
  width: var(--site-search-control-height) !important;
  min-width: var(--site-search-control-height) !important;
  max-width: var(--site-search-control-height) !important;
  height: var(--site-search-control-height) !important;
}
.site-search-bar .module-overflow-trigger {
  justify-content: center !important;
  width: var(--site-search-control-height) !important;
  padding: 0 !important;
}
.site-search-bar .module-filter-popup {
  z-index: 10000 !important;
}
.site-search-bar .custom-options-panel,
.site-search-bar .filter-dropdown-panel {
  top: calc(100% + 10px) !important;
  left: 0 !important;
  right: 0 !important;
  width: min(320px,calc(100vw - 32px)) !important;
  min-width: 280px !important;
  padding: 14px !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 15px !important;
  background: var(--surface) !important;
  box-shadow: 0 18px 44px rgba(4,18,52,.18) !important;
  z-index: 10001 !important;
}
.site-search-bar .dropdown-panel-title {
  margin-bottom: 10px !important;
  color: var(--text-muted) !important;
  font-size: .75rem !important;
  font-weight: 800 !important;
  letter-spacing: .06em !important;
}
.site-search-bar .filter-pill-reset-btn.module-filter-trigger {
  justify-content: center !important;
  color: var(--text-primary) !important;
}
.site-search-bar .module-filter-popup > .module-filter-overflow-only {
  width: 100% !important;
  flex-basis: auto !important;
}
.site-search-bar .custom-option,
.site-search-bar .custom-checkbox-row {
  min-height: 42px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 9px 11px !important;
  border-radius: 10px !important;
}
.site-search-bar .custom-option:hover,
.site-search-bar .custom-option.selected,
.site-search-bar .custom-checkbox-row:hover {
  background: hsla(var(--primary-h),var(--primary-s),var(--primary-l),.12) !important;
  color: var(--primary) !important;
}
html[data-theme="dark"] .site-search-bar {
  background: var(--surface) !important;
  border-color: var(--border-subtle) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.2) !important;
}
@media(max-width:700px) {
  .site-search-bar {
    --site-search-control-height: 54px;
    display: block !important;
    position: relative !important;
    margin-bottom: 28px !important;
    padding: 10px !important;
    border-radius: 17px !important;
  }
  .site-search-bar .site-search {
    width: 100% !important;
    min-width: 0 !important;
    padding-right: 58px !important;
  }
  .site-search-bar select.module-select {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-top: 10px !important;
  }
  .site-search-bar > .module-filter-group { display: none !important; }
  .site-search-bar > .module-mobile-filter-button {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    z-index: 280 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
  }
  .site-search-bar > .module-mobile-filter-button.is-open {
    background: var(--primary) !important;
    color: #ffffff !important;
    border-color: var(--primary) !important;
  }
  .site-search-bar > .module-mobile-filter-button.is-open svg,
  .site-search-bar > .module-mobile-filter-button.is-open i {
    color: #ffffff !important;
  }
  .site-search-bar .module-filter-overflow.mobile-filter-mode {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 270 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
  }
  .site-search-bar .module-filter-overflow.mobile-filter-mode:not(.open) {
    display: none !important;
    height: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  .site-search-bar .module-filter-overflow.mobile-filter-mode.open {
    display: block !important;
    height: auto !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  .site-search-bar .module-filter-overflow.mobile-filter-mode > .module-overflow-trigger { display: none !important; }
  .site-search-bar .module-filter-overflow.mobile-filter-mode .module-filter-popup {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    max-height: min(72vh, 540px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 16px !important;
    border-radius: 18px !important;
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.28) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  .site-search-bar .module-filter-overflow.mobile-filter-mode .module-filter-popup > .module-filter-control,
  .site-search-bar .module-filter-overflow.mobile-filter-mode .module-filter-popup > .module-filter-trigger {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: none !important;
    display: block !important;
    height: auto !important;
    margin: 0 !important;
  }
  .site-search-bar .module-filter-overflow.mobile-filter-mode .module-filter-popup .module-filter-trigger {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
  }
  .site-search-bar .module-filter-overflow.mobile-filter-mode .module-filter-popup .custom-options-panel,
  .site-search-bar .module-filter-overflow.mobile-filter-mode .module-filter-popup .filter-dropdown-panel {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-top: 8px !important;
    box-shadow: none !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 12px !important;
    background: var(--surface-soft) !important;
    display: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }
  .site-search-bar .module-filter-overflow.mobile-filter-mode .module-filter-popup .custom-pill-filter.open .filter-dropdown-panel,
  .site-search-bar .module-filter-overflow.mobile-filter-mode .module-filter-popup .custom-select-container.open .custom-options-panel {
    display: block !important;
  }
}

/* ==========================================================================
   INTERACTIVE LIVE & STAGE HOSTING MODULE
   ========================================================================== */
.modern-video-wrapper.has-guest-on-stage {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  background: #030712 !important;
  border-radius: 16px !important;
  padding: 8px !important;
  aspect-ratio: auto !important;
  min-height: 380px !important;
}

@media (max-width: 768px) {
  .modern-video-wrapper.has-guest-on-stage {
    grid-template-columns: 1fr !important;
  }
}

.stage-guest-container {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  background: #0b1329 !important;
  border-radius: 12px !important;
  border: 1.5px solid var(--primary) !important;
  overflow: hidden !important;
  position: relative !important;
  min-height: 220px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
}

.stage-guest-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 8px 12px !important;
  background: rgba(0, 0, 0, 0.65) !important;
  backdrop-filter: blur(8px) !important;
  z-index: 10 !important;
}

.stage-guest-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 0.78rem !important;
  font-weight: 750 !important;
  color: #ffffff !important;
}

.stage-guest-badge i {
  color: #10b981 !important;
  width: 15px !important;
  height: 15px !important;
}

.stage-guest-actions {
  display: flex !important;
  gap: 6px !important;
}

.stage-btn-mute,
.stage-btn-remove {
  background: rgba(255, 255, 255, 0.15) !important;
  border: none !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  padding: 4px 8px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
}

.stage-btn-mute:hover {
  background: rgba(245, 158, 11, 0.4) !important;
}

.stage-btn-remove:hover {
  background: rgba(239, 68, 68, 0.5) !important;
}

.stage-guest-feed {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  padding: 16px !important;
}

.stage-guest-feed img {
  width: 90px !important;
  height: 90px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 3px solid var(--primary) !important;
  box-shadow: 0 0 20px hsla(var(--primary-h), 80%, 55%, 0.4) !important;
}

.stage-audio-waves {
  display: flex !important;
  gap: 4px !important;
  align-items: center !important;
  height: 20px !important;
  margin-top: 10px !important;
}

.stage-audio-waves span {
  display: block !important;
  width: 3px !important;
  height: 100% !important;
  background: #10b981 !important;
  border-radius: 99px !important;
  animation: audioWavePulse 1.2s infinite ease-in-out !important;
}

.stage-audio-waves span:nth-child(2) { animation-delay: 0.2s !important; }
.stage-audio-waves span:nth-child(3) { animation-delay: 0.4s !important; }
.stage-audio-waves span:nth-child(4) { animation-delay: 0.6s !important; }

@keyframes audioWavePulse {
  0%, 100% { height: 6px; }
  50% { height: 20px; }
}

.stage-topic-pill {
  margin-top: 8px !important;
  padding: 4px 10px !important;
  background: rgba(0, 0, 0, 0.6) !important;
  border-radius: 99px !important;
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
}

.host-controls-panel {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  padding: 16px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
}

html[data-theme="dark"] .host-controls-panel {
  background: var(--surface-soft) !important;
  border-color: var(--border-subtle) !important;
}

.host-panel-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-bottom: 14px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid var(--border-subtle) !important;
}

.host-panel-title {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: var(--primary) !important;
  font-size: 0.92rem !important;
}

.host-session-mode {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 0.82rem !important;
}

.host-session-mode select {
  padding: 5px 10px !important;
  border-radius: 8px !important;
  border: 1px solid var(--border) !important;
  background: var(--surface-soft) !important;
  color: inherit !important;
  font-size: 0.82rem !important;
}

.host-queue-title {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  margin-bottom: 10px !important;
}

.host-queue-title small {
  font-weight: 400 !important;
  color: var(--text-muted) !important;
}

.host-queue-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.stage-queue-card {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 8px 12px !important;
  background: var(--surface-soft) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 10px !important;
}

.queue-card-avatar {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}

.queue-card-info {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.queue-card-info strong {
  font-size: 0.84rem !important;
}

.queue-card-info span {
  font-size: 0.74rem !important;
  color: var(--text-muted) !important;
}

.queue-card-actions {
  display: flex !important;
  gap: 6px !important;
  align-items: center !important;
}

.btn-bring-stage {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 12px !important;
  border-radius: 8px !important;
  background: var(--primary) !important;
  color: #ffffff !important;
  border: none !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: opacity 0.2s ease !important;
}

.btn-bring-stage:hover {
  opacity: 0.9 !important;
}

.btn-dismiss-request {
  background: transparent !important;
  border: none !important;
  color: var(--text-muted) !important;
  cursor: pointer !important;
  padding: 4px !important;
}

.btn-dismiss-request:hover {
  color: #ef4444 !important;
}

.stream-chat-announcement {
  padding: 6px 12px !important;
  border-radius: 8px !important;
  background: hsla(var(--primary-h), 80%, 55%, 0.1) !important;
  border-left: 3px solid var(--primary) !important;
  font-size: 0.76rem !important;
  color: var(--text-primary) !important;
  margin: 6px 0 !important;
}

.free-broadcast-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 2px 8px !important;
  border-radius: 99px !important;
  background: rgba(16, 185, 129, 0.12) !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
  color: #10b981 !important;
  font-size: 0.72rem !important;
  font-weight: 750 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

/* ==========================================================================
   TASK 7: FORMS & RIDE REQUEST SYSTEM (PLAN A VISIT & 2-STAGE RIDE CONFIRMATION)
   ========================================================================== */

/* Plan a Visit Pulse Highlight when navigating/clicking */
@keyframes panelPulseHighlight {
  0% {
    box-shadow: 0 0 0 0 rgba(217, 119, 6, 0.65), 0 20px 40px rgba(0, 0, 0, 0.18);
    border-color: #d97706;
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 14px rgba(217, 119, 6, 0.25), 0 25px 50px rgba(217, 119, 6, 0.35);
    border-color: #f59e0b;
    transform: scale(1.015);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(217, 119, 6, 0), 0 20px 40px rgba(0, 0, 0, 0.12);
    border-color: rgba(217, 119, 6, 0.4);
    transform: scale(1);
  }
}

.panel-highlight-pulse {
  animation: panelPulseHighlight 1.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  scroll-margin-top: 100px;
}

/* Spotlight temporarily owns the whole mobile viewport while keeping desktop shell context. */
@media (max-width: 760px) {
  .member-app-shell.member-shell-fullscreen .member-shell-header,
  .member-app-shell.member-shell-fullscreen .member-shell-rail,
  .member-app-shell.member-shell-fullscreen .member-nav-backdrop { display: none !important; }
  .member-app-shell.member-shell-fullscreen .member-shell-main { inset: 0 !important; }
}

/* A fixed visit dialog must keep its centering translation while it pulses. */
@keyframes visitPanelPulseCentered {
  0% {
    box-shadow: 0 0 0 0 rgba(217, 119, 6, 0.65), 0 20px 40px rgba(0, 0, 0, 0.18);
    border-color: #d97706;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    box-shadow: 0 0 0 14px rgba(217, 119, 6, 0.25), 0 25px 50px rgba(217, 119, 6, 0.35);
    border-color: #f59e0b;
    transform: translate(-50%, -50%) scale(1.015);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(217, 119, 6, 0), 0 20px 40px rgba(0, 0, 0, 0.12);
    border-color: rgba(217, 119, 6, 0.4);
    transform: translate(-50%, -50%) scale(1);
  }
}

body[data-page="profile"].visit-panel-open .sticky-connection-card.panel-highlight-pulse {
  animation-name: visitPanelPulseCentered;
}

/* 2-Stage Ride Stepper Tracker */
.ride-stepper-tracker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: rgba(241, 245, 249, 0.85);
  border: 1px solid rgba(203, 213, 225, 0.8);
  border-radius: 18px;
  margin: 16px 0 20px 0;
  gap: 12px;
}

.ride-step-node {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.ride-step-circle {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1rem;
  transition: all 0.25s ease;
  background: #e2e8f0;
  color: #64748b;
  border: 2px solid #cbd5e1;
}

.ride-step-node.active .ride-step-circle {
  background: #2563eb;
  color: #ffffff;
  border-color: #1d4ed8;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.2);
}

.ride-step-node.completed .ride-step-circle {
  background: #10b981;
  color: #ffffff;
  border-color: #059669;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.18);
}

.ride-step-node.locked .ride-step-circle {
  background: #f1f5f9;
  color: #94a3b8;
  border-color: #e2e8f0;
  opacity: 0.7;
}

.ride-step-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.ride-step-text strong {
  font-size: 0.88rem;
  font-weight: 750;
  color: #0f172a;
}

.ride-step-text span {
  font-size: 0.74rem;
  color: #64748b;
}

.ride-step-node.active .ride-step-text strong {
  color: #2563eb;
}

.ride-step-node.completed .ride-step-text strong {
  color: #059669;
}

.ride-step-line {
  flex: 0 0 40px;
  height: 3px;
  background: #cbd5e1;
  border-radius: 2px;
  transition: background 0.25s ease;
}

.ride-step-line.completed {
  background: #10b981;
}

/* Ride Stage Cards */
.ride-stage-card {
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  transition: all 0.2s ease;
}

.ride-stage-card.is-active {
  border-color: #93c5fd;
  background: rgba(239, 246, 255, 0.6);
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.08);
}

.ride-stage-card.is-done {
  border-color: #a7f3d0;
  background: rgba(236, 253, 245, 0.5);
}

.ride-stage-card.is-locked {
  opacity: 0.65;
  background: #f8fafc;
  border-color: #e2e8f0;
}

.stage-num-pill {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #2563eb;
  color: #ffffff;
  font-size: 0.74rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ride-stage-card.is-done .stage-num-pill {
  background: #10b981;
}

.ride-stage-card.is-locked .stage-num-pill {
  background: #94a3b8;
}

.ride-scheduled-details {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 14px;
  margin-top: 10px;
}

/* Dark Mode Overrides for Ride System & Pulse */
html[data-theme="dark"] .ride-confirmation-panel {
  background: #0f172a !important;
  border-color: #334155 !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6) !important;
}

html[data-theme="dark"] .ride-stepper-tracker {
  background: rgba(30, 41, 59, 0.8) !important;
  border-color: #334155 !important;
}

html[data-theme="dark"] .ride-step-circle {
  background: #334155;
  color: #94a3b8;
  border-color: #475569;
}

html[data-theme="dark"] .ride-step-text strong {
  color: #f1f5f9 !important;
}

html[data-theme="dark"] .ride-step-text span {
  color: #94a3b8 !important;
}

html[data-theme="dark"] .ride-step-node.active .ride-step-text strong {
  color: #60a5fa !important;
}

html[data-theme="dark"] .ride-step-node.completed .ride-step-text strong {
  color: #34d399 !important;
}

html[data-theme="dark"] .ride-stage-card {
  background: #1e293b !important;
  border-color: #334155 !important;
}

html[data-theme="dark"] .ride-stage-card.is-active {
  background: rgba(30, 58, 138, 0.25) !important;
  border-color: #3b82f6 !important;
}

html[data-theme="dark"] .ride-stage-card.is-done {
  background: rgba(6, 78, 59, 0.25) !important;
  border-color: #059669 !important;
}

html[data-theme="dark"] .ride-stage-card.is-locked {
  background: #0f172a !important;
  border-color: #1e293b !important;
}

html[data-theme="dark"] .ride-scheduled-details {
  background: #0f172a !important;
  border-color: #334155 !important;
}

/* ==========================================================================
   TASK 8: EVENTS PLATFORM (EXTERNAL HOST ACCOUNT, WORKSHOP STUDIO & ROSTER)
   ========================================================================== */

/* Hero & Topbar Host Buttons */
.btn-host-event {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 14px;
  background: var(--primary-gradient);
  color: #ffffff;
  font-size: 0.88rem;
  font-weight: 750;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.25);
  transition: all 0.2s ease;
}

.btn-host-event:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.35);
}

.topbar-host-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 10px;
  background: var(--primary-gradient);
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.topbar-host-btn:hover {
  opacity: 0.95;
  transform: scale(1.02);
}

/* Host Auth Status Chip */
.host-auth-status-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(203, 213, 225, 0.8);
  border-radius: 99px;
  backdrop-filter: blur(8px);
}

.host-auth-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #10b981;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
}

.host-auth-info {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.host-auth-info strong {
  font-size: 0.82rem;
  color: #0f172a;
}

.host-auth-info span {
  font-size: 0.7rem;
  color: #64748b;
}

/* Workshop Badges on Event Cards */
.event-card-top-badge.workshop-badge {
  background: rgba(15, 23, 42, 0.9);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.3);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  gap: 4px;
}

/* Host Preset Photo Picker */
.host-preset-card {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  overflow: hidden;
  background: #ffffff;
  cursor: pointer;
  padding: 4px;
  text-align: center;
  transition: all 0.18s ease;
}

.host-preset-card:hover {
  border-color: #2563eb;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
}

.host-preset-card img {
  width: 100%;
  height: 48px;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}

.host-preset-card span {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  color: #0f172a;
  margin-top: 4px;
}

/* Dark Theme Overrides for Events Platform */
html[data-theme="dark"] .host-auth-panel,
html[data-theme="dark"] .host-studio-panel,
html[data-theme="dark"] .host-dashboard-panel,
html[data-theme="dark"] .attendee-roster-panel {
  background: #0f172a !important;
  border-color: #334155 !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7) !important;
}

html[data-theme="dark"] .host-auth-status-chip {
  background: rgba(30, 41, 59, 0.85) !important;
  border-color: #334155 !important;
}

html[data-theme="dark"] .host-auth-info strong {
  color: #f1f5f9 !important;
}

html[data-theme="dark"] .host-auth-info span {
  color: #94a3b8 !important;
}

html[data-theme="dark"] .host-identity-bar {
  background: rgba(30, 58, 138, 0.25) !important;
  border-color: #1e3a8a !important;
}

html[data-theme="dark"] .host-stat-box {
  background: #1e293b !important;
  border-color: #334155 !important;
}

html[data-theme="dark"] .host-event-item {
  background: #1e293b !important;
  border-color: #334155 !important;
}

html[data-theme="dark"] .host-preset-card {
  background: #1e293b !important;
  border-color: #334155 !important;
}

html[data-theme="dark"] .host-preset-card span {
  color: #f1f5f9 !important;
}

html[data-theme="dark"] .roster-table-wrap table tr {
  border-color: #334155 !important;
}

html[data-theme="dark"] .roster-table-wrap table thead tr {
  background: rgba(30, 41, 59, 0.9) !important;
}

/* ==========================================================================
   HOMEPAGE REFINEMENTS & COMPONENT STYLES
   ========================================================================== */

/* Hero Static Background Image */
.hero-bg-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  opacity: 0.92;
}

/* 2:1 Ratio Section Header Grid */
.section-head-grid-2-1 {
  display: grid;
  grid-template-columns: 2fr 1fr;
  align-items: end;
  gap: 28px;
  margin-bottom: 28px;
}
.section-head-grid-2-1 .section-head-col-main {
  max-width: 100%;
}
.section-head-grid-2-1 .section-head-col-aside {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}
@media (max-width: 768px) {
  .section-head-grid-2-1 {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .section-head-grid-2-1 .section-head-col-aside {
    justify-content: flex-start;
  }
}

/* Nav Live Dot Pulse */
.live-nav-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.live-dot-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
  display: inline-block;
  box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
  animation: liveDotPulse 1.8s infinite;
}
@keyframes liveDotPulse {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

/* Faith Hub CTA Callout Card */
.faith-hub-cta-card {
  border-radius: 32px;
  padding: 64px 48px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
  text-align: center;
  position: relative;
  overflow: hidden;
  margin: 20px 0;
}
.faith-hub-cta-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 65%;
  height: 180px;
  background: radial-gradient(circle, rgba(var(--gold-rgb, 217, 119, 6), 0.16) 0%, transparent 70%);
  pointer-events: none;
}
.faith-hub-cta-inner {
  max-width: 760px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.faith-hub-cta-inner h2 {
  font-size: 2.2rem;
  font-weight: 800;
  margin: 12px 0 16px 0;
  letter-spacing: -0.02em;
}
.faith-hub-cta-inner .lead {
  font-size: 1.1rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 32px;
}
.faith-hub-btn-group {
  display: flex;
  gap: 16px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
@media (max-width: 768px) {
  .faith-hub-cta-card {
    border-radius: 24px;
    padding: 40px 20px;
  }
  .faith-hub-cta-inner h2 {
    font-size: 1.7rem;
  }
  .faith-hub-btn-group {
    flex-direction: column;
    width: 100%;
  }
  .faith-hub-btn-group .button {
    width: 100%;
  }
}

/* Topbar Sign In Dropdown */
.signin-dropdown-container {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.nav-chevron-icon {
  width: 14px;
  height: 14px;
  margin-left: 2px;
  transition: transform 0.2s ease;
}
.signin-dropdown-container.is-open .nav-chevron-icon {
  transform: rotate(180deg);
}

.signin-dropdown-popover {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 320px;
  padding: 22px;
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.24);
  z-index: 100000 !important;
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: themePopoverFade 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: left;
}
.signin-dropdown-popover[hidden] {
  display: none !important;
}

.signin-dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-subtle, #e2e8f0);
  padding-bottom: 10px;
}
.signin-dropdown-header strong {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--text-primary);
}

/* Switch buttons like light/dark mode switch */
.auth-mode-toggle-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  background: var(--surface-soft, #f1f5f9);
  border-radius: 12px;
  border: 1px solid var(--border, #e2e8f0);
}
.auth-mode-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 9px;
  border: none;
  background: transparent;
  color: var(--text-secondary, #64748b);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.16s ease;
}
.auth-mode-toggle-btn.active {
  background: var(--surface, #ffffff);
  color: var(--text-primary, #0f172a);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Google Fast Auth Button */
.google-auth-fast-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 10px 16px;
  border-radius: 11px;
  border: 1px solid var(--border, #e2e8f0);
  background: var(--surface, #ffffff);
  color: var(--text-primary, #0f172a);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
}
.google-auth-fast-btn:hover {
  background: var(--surface-soft, #f8fafc);
  border-color: var(--primary-border, #cbd5e1);
  transform: translateY(-1px);
}

.auth-divider {
  display: flex;
  align-items: center;
  text-align: center;
  color: var(--text-muted, #94a3b8);
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 2px 0;
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid var(--border-subtle, #e2e8f0);
}
.auth-divider span {
  padding: 0 10px;
}

.small-field {
  padding: 8px 12px !important;
  font-size: 0.85rem !important;
  border-radius: 9px !important;
}

/* Dark mode overrides for Auth Dropdown and Faith Hub */
html[data-theme="dark"] .signin-dropdown-popover {
  background: #111827 !important;
  border-color: #1f293d !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6) !important;
}
html[data-theme="dark"] .signin-dropdown-header {
  border-color: #1f293d !important;
}
html[data-theme="dark"] .auth-mode-toggle-group {
  background: #090d16 !important;
  border-color: #1f293d !important;
}
html[data-theme="dark"] .auth-mode-toggle-btn.active {
  background: #1f293d !important;
  color: #f8fafc !important;
}
html[data-theme="dark"] .google-auth-fast-btn {
  background: #1e293b !important;
  color: #f8fafc !important;
  border-color: #334155 !important;
}
html[data-theme="dark"] .google-auth-fast-btn:hover {
  background: #273549 !important;
}
html[data-theme="dark"] .auth-divider::before,
html[data-theme="dark"] .auth-divider::after {
  border-color: #1f293d !important;
}
html[data-theme="dark"] .faith-hub-cta-card {
  background: #111827 !important;
  border-color: #1f293d !important;
}

/* Church Photo Slide Gallery & Lightbox Popup */
.church-gallery-section {
  margin-top: 32px;
  margin-bottom: 32px;
  position: relative;
}
.church-gallery-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 16px;
}
.church-gallery-kicker {
  display: block;
  color: var(--primary, #db2777);
  font-size: 0.72rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}
.church-gallery-title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 850;
  color: var(--text-primary, #0f172a);
  letter-spacing: -0.01em;
}
.church-gallery-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}
.church-gallery-arrow-btn {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid var(--border, #e2e8f0);
  background: var(--surface-card, #ffffff);
  color: var(--text-primary, #0f172a);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.03);
}
.church-gallery-arrow-btn:hover {
  background: var(--surface-hover, #f8fafc);
  border-color: var(--primary, #db2777);
  color: var(--primary, #db2777);
  transform: translateY(-1px);
}
.church-gallery-arrow-btn svg,
.church-gallery-arrow-btn i {
  width: 16px;
  height: 16px;
}
.church-gallery-track-container {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.church-gallery-track {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 4px 2px 14px;
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.4) transparent;
}
.church-gallery-track::-webkit-scrollbar {
  height: 6px;
}
.church-gallery-track::-webkit-scrollbar-track {
  background: transparent;
}
.church-gallery-track::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.4);
  border-radius: 9999px;
}
.church-gallery-card {
  flex: 0 0 240px;
  min-width: 210px;
  max-width: 270px;
  scroll-snap-align: start;
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  border: 1px solid var(--border, rgba(0,0,0,0.08));
  background: var(--surface-card, #ffffff);
  box-shadow: 0 4px 16px rgba(0,0,0,0.04);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  user-select: none;
}
.church-gallery-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.12);
}
.church-gallery-thumb-wrap {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.church-gallery-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
  display: block;
}
.church-gallery-card:hover .church-gallery-thumb {
  transform: scale(1.06);
}
.church-gallery-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 23, 42, 0.88) 0%, rgba(15, 23, 42, 0.2) 50%, rgba(0, 0, 0, 0.02) 100%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 12px;
  opacity: 0.95;
  transition: opacity 0.25s ease;
}
.gallery-zoom-badge {
  align-self: flex-end;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, background 0.2s ease;
}
.gallery-zoom-badge svg,
.gallery-zoom-badge i {
  width: 14px;
  height: 14px;
}
.church-gallery-card:hover .gallery-zoom-badge {
  background: var(--primary, #db2777);
  border-color: var(--primary, #db2777);
  transform: scale(1.1);
}
.gallery-overlay-tag {
  display: inline-block;
  color: #fbbf24;
  font-size: 0.65rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 2px;
}
.gallery-overlay-title {
  margin: 0;
  color: #ffffff;
  font-size: 0.88rem;
  font-weight: 800;
  line-height: 1.25;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

/* Lightbox Modal & Popup Navigation Arrows */
.church-lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.church-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(7, 12, 28, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.church-lightbox-content {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px 24px;
  box-sizing: border-box;
  pointer-events: none;
}
.church-lightbox-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding-bottom: 12px;
  pointer-events: auto;
}
.church-lightbox-meta {
  display: flex;
  align-items: center;
  gap: 12px;
}
.church-lightbox-counter {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 750;
  padding: 4px 12px;
  border-radius: 9999px;
  letter-spacing: 0.03em;
}
.church-lightbox-church-name {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.95rem;
  font-weight: 700;
}
.church-lightbox-close-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}
.church-lightbox-close-btn:hover {
  background: rgba(255, 255, 255, 0.28);
  transform: scale(1.06);
}
.church-lightbox-close-btn svg,
.church-lightbox-close-btn i {
  width: 20px;
  height: 20px;
}
.church-lightbox-stage {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  pointer-events: auto;
}
.church-lightbox-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 20px rgba(0,0,0,0.35);
}
.church-lightbox-nav-btn.lightbox-popup-prev {
  left: 14px;
}
.church-lightbox-nav-btn.lightbox-popup-next {
  right: 14px;
}
.church-lightbox-nav-btn:hover {
  background: rgba(255, 255, 255, 0.35);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 6px 24px rgba(255, 255, 255, 0.25);
}
.church-lightbox-nav-btn svg,
.church-lightbox-nav-btn i {
  width: 28px;
  height: 28px;
  color: #ffffff;
}
.church-lightbox-figure-wrap {
  position: relative;
  max-width: min(920px, 86vw);
  max-height: calc(82vh - 60px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.church-lightbox-img {
  max-width: 100%;
  max-height: calc(75vh - 70px);
  object-fit: contain;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  transition: opacity 0.25s ease;
}
.church-lightbox-caption-bar {
  margin-top: 14px;
  text-align: center;
  max-width: 680px;
}
.church-lightbox-caption-title {
  margin: 0;
  color: #ffffff;
  font-size: 1.1rem;
  font-weight: 800;
}
.church-lightbox-caption-desc {
  margin: 4px 0 0;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.85rem;
  line-height: 1.4;
}

/* Dark Mode Overrides for Church Gallery */
html[data-theme="dark"] .church-gallery-title {
  color: #f1f5f9;
}
html[data-theme="dark"] .church-gallery-arrow-btn {
  background: rgba(30, 41, 59, 0.8);
  border-color: rgba(255, 255, 255, 0.1);
  color: #f8fafc;
}
html[data-theme="dark"] .church-gallery-arrow-btn:hover {
  background: rgba(51, 65, 85, 0.9);
  border-color: var(--primary, #db2777);
  color: var(--primary, #db2777);
}
html[data-theme="dark"] .church-gallery-card {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(30, 41, 59, 0.7);
}

@media (max-width: 640px) {
  .church-gallery-card {
    flex: 0 0 190px;
    min-width: 175px;
  }
  .church-lightbox-content {
    padding: 12px;
  }
  .church-lightbox-nav-btn {
    width: 44px;
    height: 44px;
  }
  .church-lightbox-nav-btn svg,
  .church-lightbox-nav-btn i {
    width: 22px;
    height: 22px;
  }
  .church-lightbox-nav-btn.lightbox-popup-prev {
    left: 6px;
  }
  .church-lightbox-nav-btn.lightbox-popup-next {
    right: 6px;
  }
}

/* ========================================================
   MEDITATION SANCTUARY — UNIFIED TEMPLATE SYSTEM (2026)
   Shared design language, distinct meditation-method layouts.
   Creator media and viewer theme/accent variables remain authoritative.
   ======================================================== */
.meditation-room-view {
  --sanctuary-ink: color-mix(in srgb, var(--text-primary, #17201b) 92%, transparent);
  --sanctuary-muted: color-mix(in srgb, var(--text-primary, #17201b) 62%, transparent);
  --sanctuary-line: color-mix(in srgb, var(--text-primary, #17201b) 16%, transparent);
  --sanctuary-wash: color-mix(in srgb, var(--surface-card, #fff) 62%, transparent);
  --sanctuary-wash-strong: color-mix(in srgb, var(--surface-card, #fff) 78%, transparent);
  --sanctuary-accent: var(--primary-color, #6d7c62);
  --sanctuary-accent-soft: color-mix(in srgb, var(--sanctuary-accent) 18%, transparent);
}

html[data-theme="dark"] .meditation-room-view {
  --sanctuary-ink: rgba(255,255,255,.94);
  --sanctuary-muted: rgba(255,255,255,.64);
  --sanctuary-line: rgba(255,255,255,.14);
  --sanctuary-wash: rgba(8,12,16,.48);
  --sanctuary-wash-strong: rgba(8,12,16,.72);
}

.sanctuary-template-stage {
  max-width: 1180px !important;
  padding: clamp(74px, 9vh, 96px) clamp(28px, 6vw, 84px) clamp(28px, 5vh, 54px) !important;
}

/* Reliable, project-owned sanctuary imagery.
   Platform rooms receive a curated method image; creator rooms keep the
   atmosphere chosen in the room editor. */
.meditation-backdrop.bg-room-timer,
.meditation-backdrop.bg-chapel {
  background-image: url('./assets/meditation-chapel.png') !important;
  background-position: center !important;
}

.meditation-backdrop.bg-room-ripple,
.meditation-backdrop.bg-stream {
  background-image: url('./assets/meditation-lake.png') !important;
  background-position: center !important;
}

.meditation-backdrop.bg-room-journey,
.meditation-backdrop.bg-mountains {
  background-image: url('./assets/meditation-journey.png') !important;
  background-position: center !important;
}

.meditation-backdrop.bg-room-nature {
  background-image: url('./assets/meditation-forest.png') !important;
  background-position: center !important;
}

.meditation-backdrop.bg-room-sunburst {
  background-image: url('./assets/meditation-sunrise.png') !important;
  background-position: center !important;
}

.meditation-backdrop.bg-stars,
.meditation-backdrop.bg-deepdark {
  background-image: url('./assets/meditation-stars.png') !important;
  background-position: center !important;
}

/* Text remains part of the scene; only interactive controls receive surfaces. */
.journey-contemplation-card,
.nature-scripture-card,
.template-scripture-quote,
.sunburst-calligraphy-container {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.template-stage-view {
  color: var(--sanctuary-ink) !important;
  isolation: isolate !important;
}

.template-stage-view::before {
  content: "" !important;
  position: absolute !important;
  inset: 2% 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background: radial-gradient(circle at 50% 45%, var(--sanctuary-accent-soft), transparent 54%) !important;
  opacity: .52 !important;
}

.template-header-block {
  gap: 8px !important;
  margin-bottom: clamp(14px, 2.4vh, 26px) !important;
}

.template-main-title,
html[data-theme="light"] .template-main-title,
body:not([data-theme="dark"]) .template-main-title,
html[data-theme="dark"] .template-main-title {
  color: var(--sanctuary-ink) !important;
  font-size: clamp(2rem, 4.8vh, 4rem) !important;
  font-weight: 450 !important;
  letter-spacing: -.035em !important;
  text-wrap: balance !important;
  text-shadow: none !important;
}

.template-subtitle-badge,
html[data-theme="light"] .template-subtitle-badge,
body:not([data-theme="dark"]) .template-subtitle-badge,
html[data-theme="dark"] .template-subtitle-badge {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  color: var(--sanctuary-muted) !important;
  font-size: .74rem !important;
  font-weight: 700 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
}

.template-quote-text,
html[data-theme="light"] .template-quote-text,
body:not([data-theme="dark"]) .template-quote-text,
html[data-theme="dark"] .template-quote-text {
  color: var(--sanctuary-ink) !important;
  font-size: clamp(1.05rem, 2.2vh, 1.45rem) !important;
  font-weight: 450 !important;
  line-height: 1.45 !important;
  text-shadow: none !important;
  text-wrap: balance !important;
}

.template-quote-ref,
html[data-theme="light"] .template-quote-ref,
body:not([data-theme="dark"]) .template-quote-ref,
html[data-theme="dark"] .template-quote-ref {
  color: var(--sanctuary-muted) !important;
  font-size: .68rem !important;
  letter-spacing: .18em !important;
}

.template-corner-text,
.nature-tree-sign,
.rock-tag-marker,
.nature-bottom-center-tag { display: none !important; }

.template-integrated-player {
  width: min(100%, 720px) !important;
  padding: 16px 0 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--sanctuary-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--sanctuary-ink) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.integrated-timeline-track {
  height: 3px !important;
  background: var(--sanctuary-line) !important;
}

.integrated-timeline-fill,
.sunburst-timeline-fill,
.journey-track-fill { background: var(--sanctuary-accent) !important; }

.timeline-time-label { color: var(--sanctuary-muted) !important; }

.integrated-circle-play-btn,
.timer-circle-btn.timer-primary-btn,
.sunburst-crest-play-btn {
  background: var(--sanctuary-accent) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--sanctuary-accent) 32%, transparent) !important;
}

.integrated-pill-action-btn,
.nature-reflection-pill-btn,
.sunburst-praise-btn,
.nature-soundscape-btn,
.journey-skip-btn,
.timer-circle-btn {
  border-color: var(--sanctuary-line) !important;
  background: var(--sanctuary-wash-strong) !important;
  color: var(--sanctuary-ink) !important;
  box-shadow: none !important;
}

.integrated-pill-action-btn:hover,
.nature-reflection-pill-btn:hover,
.sunburst-praise-btn:hover,
.nature-soundscape-btn:hover,
.journey-skip-btn:hover,
.timer-circle-btn:hover {
  border-color: color-mix(in srgb, var(--sanctuary-accent) 50%, var(--sanctuary-line)) !important;
  background: color-mix(in srgb, var(--sanctuary-accent) 10%, var(--sanctuary-wash-strong)) !important;
  transform: translateY(-1px) !important;
}

/* Silent prayer: a still, centered timepiece. */
.timer-stage-inner {
  max-width: 700px !important;
  gap: clamp(12px, 2vh, 22px) !important;
}

.template-timer-view::before {
  background:
    linear-gradient(90deg, transparent, var(--sanctuary-line), transparent) 50% 74% / min(520px, 72%) 1px no-repeat,
    radial-gradient(circle at 50% 43%, var(--sanctuary-accent-soft), transparent 52%) !important;
}

.timer-ring-wrapper {
  width: clamp(210px, 31vh, 310px) !important;
  height: clamp(210px, 31vh, 310px) !important;
}

.timer-track { stroke: var(--sanctuary-line) !important; stroke-width: 4 !important; }
.timer-progress { stroke: var(--sanctuary-accent) !important; stroke-width: 5 !important; }
.timer-countdown-digits { color: var(--sanctuary-ink) !important; font-size: clamp(2.8rem, 6vh, 4.6rem) !important; }
.timer-countdown-label { color: var(--sanctuary-muted) !important; }
.timer-actions-trio { gap: clamp(24px, 5vw, 54px) !important; }
.timer-btn-caption { color: var(--sanctuary-muted) !important; font-size: .7rem !important; }

/* Breath prayer: the breath cue and living orb are the experience. */
.ripple-stage-inner {
  display: grid !important;
  grid-template-columns: minmax(300px, .9fr) minmax(340px, 1.1fr) !important;
  grid-template-areas: "copy orb" "quote orb" "player player" !important;
  column-gap: clamp(28px, 6vw, 80px) !important;
  row-gap: 24px !important;
  max-width: 980px !important;
  text-align: left !important;
}
.ripple-stage-inner .template-header-block { grid-area: copy !important; align-items: flex-start !important; text-align: left !important; margin: 0 !important; }
.ripple-rings-stage { grid-area: orb !important; width: clamp(300px, 46vh, 450px) !important; height: clamp(300px, 46vh, 450px) !important; }
.ripple-scripture-quote { grid-area: quote !important; text-align: left !important; padding: 0 !important; }
.ripple-integrated-player { grid-area: player !important; justify-self: center !important; }
.concentric-wave { border-width: 1px !important; border-color: color-mix(in srgb, var(--sanctuary-accent) 50%, transparent) !important; }
.ripple-center-orb,
html[data-theme="dark"] .ripple-center-orb {
  background: radial-gradient(circle at 38% 30%, rgba(255,255,255,.92), color-mix(in srgb, var(--sanctuary-accent) 66%, transparent) 46%, color-mix(in srgb, var(--sanctuary-accent) 92%, #173b37) 100%) !important;
  box-shadow: 0 0 70px color-mix(in srgb, var(--sanctuary-accent) 30%, transparent), inset 0 0 28px rgba(255,255,255,.34) !important;
}

/* Guided prayer: a clear staged path with the current prompt in focus. */
.journey-stage-inner { max-width: 880px !important; gap: clamp(14px, 2.3vh, 26px) !important; }
.journey-track-wrapper { width: min(100%, 680px) !important; }
.journey-track-line { background: var(--sanctuary-line) !important; }
.journey-node .node-circle,
html[data-theme="dark"] .journey-node .node-circle {
  width: 38px !important; height: 38px !important;
  background: var(--sanctuary-wash-strong) !important;
  border-color: var(--sanctuary-line) !important;
  color: var(--sanctuary-ink) !important;
}
.journey-node.completed .node-circle,
.journey-node.active .node-circle { background: var(--sanctuary-accent) !important; border-color: var(--sanctuary-accent) !important; color: #fff !important; box-shadow: none !important; }
.node-label,
html[data-theme="dark"] .node-label,
.journey-node.active .node-label,
html[data-theme="dark"] .journey-node.active .node-label { color: var(--sanctuary-muted) !important; }
.journey-node.active .node-label { color: var(--sanctuary-ink) !important; }
.journey-contemplation-card,
html[data-theme="dark"] .journey-contemplation-card {
  width: min(100%, 720px) !important;
  padding: clamp(24px, 4vh, 42px) clamp(22px, 5vw, 56px) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--sanctuary-ink) !important;
}
.journey-question-prompt { color: var(--sanctuary-ink) !important; font-size: clamp(1.4rem, 3vh, 2.15rem) !important; }
.journey-card-divider { background: var(--sanctuary-accent) !important; width: 38px !important; }

/* Nature meditation: scripture and selectable ambience share the stage. */
.nature-stage-inner {
  display: grid !important;
  grid-template-columns: minmax(320px, 1fr) minmax(360px, .9fr) !important;
  grid-template-areas: "kicker player" "header player" "divider player" "scripture player" !important;
  gap: 14px clamp(34px, 7vw, 92px) !important;
  max-width: 980px !important;
  text-align: left !important;
}
.nature-stage-inner .template-kicker-badge { grid-area: kicker !important; justify-self: start !important; }
.nature-stage-inner .template-header-block { grid-area: header !important; align-items: flex-start !important; text-align: left !important; margin: 0 !important; }
.nature-leaf-divider { grid-area: divider !important; width: 120px !important; margin: 4px 0 !important; }
.nature-scripture-card,
html[data-theme="dark"] .nature-scripture-card {
  grid-area: scripture !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  text-align: left !important;
}
.nature-integrated-player {
  grid-area: player !important;
  align-self: center !important;
  padding: clamp(24px, 4vw, 38px) !important;
  border: 0 !important;
  border-top: 1px solid var(--sanctuary-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
}
.nature-controls-mid-row { display: grid !important; grid-template-columns: 1fr auto !important; gap: 18px !important; }
.nature-soundscape-dropdown-wrap { grid-column: 1 / -1 !important; width: 100% !important; }
.nature-soundscape-btn { width: 100% !important; justify-content: flex-start !important; }
.nature-reflection-row { margin-top: 16px !important; }

/* Joy meditation: radiant and expressive, without decorative clutter. */
.sunburst-stage-inner {
  display: grid !important;
  grid-template-columns: minmax(320px, .95fr) minmax(380px, 1.05fr) !important;
  grid-template-areas: "header crest" "quote crest" "words crest" "controls scrub" !important;
  gap: 18px clamp(42px, 8vw, 104px) !important;
  max-width: 980px !important;
  text-align: left !important;
}
.sunburst-stage-inner .template-header-block { grid-area: header !important; align-items: flex-start !important; text-align: left !important; margin: 0 !important; }
.sunburst-scripture-quote { grid-area: quote !important; text-align: left !important; padding: 0 !important; }
.sunburst-sun-crest-stage { grid-area: crest !important; align-self: center !important; }
.sunburst-scrubber-row { grid-area: scrub !important; align-self: center !important; width: 100% !important; margin: 0 !important; }
.sunburst-calligraphy-container { grid-area: words !important; text-align: left !important; }
.sunburst-bottom-controls-row { grid-area: controls !important; justify-self: start !important; width: 100% !important; }
.sunburst-sun-semi {
  width: clamp(260px, 40vh, 390px) !important;
  height: clamp(130px, 20vh, 195px) !important;
  background: radial-gradient(circle at 50% 92%, color-mix(in srgb, var(--sanctuary-accent) 78%, #fff), color-mix(in srgb, var(--sanctuary-accent) 20%, transparent) 48%, transparent 70%) !important;
  filter: drop-shadow(0 20px 42px color-mix(in srgb, var(--sanctuary-accent) 26%, transparent)) !important;
}
.sunburst-calligraphy-text,
html[data-theme="dark"] .sunburst-calligraphy-text { color: var(--sanctuary-ink) !important; text-shadow: none !important; }
.sunburst-kicker-tags,
.sunburst-sub-tag,
html[data-theme="dark"] .sunburst-kicker-tags,
html[data-theme="dark"] .sunburst-sub-tag { color: var(--sanctuary-muted) !important; }

@media (max-width: 760px) {
  .sanctuary-template-stage { padding: 76px 18px 22px !important; }
  .template-main-title { font-size: clamp(1.7rem, 8vw, 2.45rem) !important; }
  .ripple-stage-inner,
  .nature-stage-inner,
  .sunburst-stage-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    text-align: center !important;
  }
  .ripple-stage-inner .template-header-block,
  .nature-stage-inner .template-header-block,
  .sunburst-stage-inner .template-header-block { align-items: center !important; text-align: center !important; }
  .ripple-scripture-quote,
  .nature-scripture-card,
  .sunburst-scripture-quote,
  .sunburst-calligraphy-container { text-align: center !important; }
  .ripple-rings-stage { width: min(54vw, 230px) !important; height: min(54vw, 230px) !important; margin: 0 auto !important; }
  .nature-leaf-divider { margin-inline: auto !important; }
  .sunburst-sun-crest-stage { min-height: 150px !important; }
  .sunburst-calligraphy-container { display: none !important; }
  .template-integrated-player { border-radius: 18px !important; padding: 12px 14px !important; }
  .integrated-controls-trio-row { gap: 10px !important; }
  .integrated-pill-action-btn span { display: none !important; }
}

/* Let creator-selected media remain atmospheric instead of disappearing in light mode. */
html[data-theme="light"] .meditation-backdrop,
body:not([data-theme="dark"]) .meditation-backdrop {
  opacity: .78 !important;
  filter: brightness(.98) saturate(.86) contrast(.94) !important;
}

html[data-theme="light"] .meditation-overlay,
body:not([data-theme="dark"]) .meditation-overlay {
  background:
    linear-gradient(90deg, rgba(247,249,248,.7) 0%, rgba(247,249,248,.34) 38%, rgba(247,249,248,.08) 66%, rgba(247,249,248,.2) 100%),
    linear-gradient(180deg, rgba(247,249,248,.08), rgba(247,249,248,.2)) !important;
}

html[data-theme="dark"] .meditation-overlay,
body[data-theme="dark"] .meditation-overlay {
  background:
    linear-gradient(90deg, rgba(3,7,12,.84) 0%, rgba(3,7,12,.54) 42%, rgba(3,7,12,.26) 70%, rgba(3,7,12,.52) 100%),
    linear-gradient(180deg, rgba(2,5,10,.18), rgba(2,5,10,.48)) !important;
}

.sanctuary-top-action-btn {
  height: 36px !important;
  padding: 0 14px !important;
  font-size: .76rem !important;
  box-shadow: none !important;
}

@media (max-height: 760px) and (min-width: 761px) {
  .sanctuary-template-stage { padding-top: 70px !important; padding-bottom: 22px !important; }
  .template-main-title { font-size: clamp(1.8rem, 4.4vh, 3rem) !important; }
  .ripple-rings-stage { width: min(37vh, 320px) !important; height: min(37vh, 320px) !important; }
  .timer-ring-wrapper { width: min(27vh, 230px) !important; height: min(27vh, 230px) !important; }
  .sunburst-sun-semi { width: min(36vh, 300px) !important; height: min(18vh, 150px) !important; }
}

@media (prefers-reduced-motion: reduce) {
  .concentric-wave,
  .ripple-center-orb,
  .template-stage-view { animation: none !important; }
}

/* ==========================================================================
   Modern Sleek Single Product & Specialized Service Templates (FaithLink)
   ========================================================================== */

/* Modern Product Page Layout */
.product-detail-shell {
  display: block;
  width: 100%;
  box-sizing: border-box;
}

.product-sleek-layout {
  display: grid;
  grid-template-columns: minmax(420px, 1.08fr) minmax(400px, 0.92fr);
  gap: 48px;
  align-items: start;
  width: 100%;
}

.product-sleek-layout > *,
.product-gallery-column,
.product-info-column {
  min-width: 0;
}

/* Gallery Column */
.product-gallery-column {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.product-main-card {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  background: var(--surface-card, #ffffff);
  border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-badge-float {
  position: absolute;
  top: 16px;
  left: 16px;
  right: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 5;
  pointer-events: none;
}

.product-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 99px;
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.category-pill {
  background: rgba(255, 255, 255, 0.88);
  color: var(--primary, #2563eb);
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.in-stock-pill {
  background: rgba(16, 185, 129, 0.14);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.28);
}

.low-stock-pill {
  background: rgba(245, 158, 11, 0.14);
  color: #d97706;
  border: 1px solid rgba(245, 158, 11, 0.28);
}

.pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.3);
  animation: pulseDot 2s infinite ease-in-out;
}

.pulse-dot.warning {
  background: #f59e0b;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.3);
}

@keyframes pulseDot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.6; }
}

.product-main-image-wrap {
  aspect-ratio: 1 / 0.92;
  overflow: hidden;
  background: var(--surface-soft, #f8fafc);
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-main-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.product-main-card:hover .product-main-image-wrap img {
  transform: scale(1.03);
}

.product-thumbnails-sleek {
  display: flex;
  gap: 12px;
}

.thumb-btn {
  flex: 0 0 84px;
  height: 84px;
  padding: 3px;
  border-radius: 16px;
  border: 2px solid transparent;
  background: var(--surface-card, #ffffff);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
  cursor: pointer;
  overflow: hidden;
  transition: all 0.2s ease;
}

.thumb-btn img {
  width: 100%;
  height: 100%;
  border-radius: 11px;
  object-fit: cover;
}

.thumb-btn:hover {
  transform: translateY(-2px);
  border-color: var(--border-subtle, rgba(0, 0, 0, 0.15));
}

.thumb-btn.active {
  border-color: var(--primary, #2563eb);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.product-guarantee-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 10px;
}

.guarantee-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--surface-card, #ffffff);
  border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.06));
}

.guarantee-item svg {
  width: 20px;
  height: 20px;
  color: var(--primary, #2563eb);
  flex-shrink: 0;
}

.guarantee-item div {
  display: flex;
  flex-direction: column;
}

.guarantee-item strong {
  font-size: 0.78rem;
  color: var(--text-primary, #0f172a);
}

.guarantee-item span {
  font-size: 0.7rem;
  color: var(--text-secondary, #64748b);
}

/* Product Info Column */
.product-info-column {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.product-header-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.product-seller-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 99px;
  background: var(--surface-soft, rgba(0, 0, 0, 0.04));
  border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
  font-size: 0.82rem;
  color: var(--text-secondary, #64748b);
  width: fit-content;
}

.product-seller-badge svg {
  width: 15px;
  height: 15px;
  color: var(--primary, #2563eb);
}

.product-seller-badge strong {
  color: var(--text-primary, #0f172a);
}

.seller-type-tag {
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 99px;
  background: var(--primary-gradient, linear-gradient(135deg, #2563eb, #3b82f6));
  color: #ffffff;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.product-title-sleek {
  margin: 0;
  font-family: var(--font-heading, "Manrope", sans-serif);
  font-size: clamp(1.8rem, 3.2vw, 2.5rem);
  font-weight: 850;
  line-height: 1.15;
  letter-spacing: -0.035em;
  color: var(--text-primary, #0f172a);
}

.product-social-proof {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  color: var(--text-secondary, #64748b);
  flex-wrap: wrap;
}

.rating-stars {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--gold, #f59e0b);
  font-weight: 800;
}

.rating-stars svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
}

.proof-divider {
  opacity: 0.4;
}

.verified-reviews-count {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--primary, #2563eb);
  font-weight: 650;
}

.verified-reviews-count svg {
  width: 15px;
  height: 15px;
}

.product-pricing-card {
  padding: 18px 22px;
  border-radius: 18px;
  background: var(--surface-card, #ffffff);
  border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.price-headline {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.current-price {
  font-size: 2.2rem;
  font-weight: 850;
  color: var(--text-primary, #0f172a);
  letter-spacing: -0.03em;
}

.compare-price {
  font-size: 1.25rem;
  color: var(--text-muted, #94a3b8);
  text-decoration: line-through;
}

.discount-badge {
  padding: 4px 10px;
  border-radius: 99px;
  background: rgba(245, 158, 11, 0.15);
  color: var(--gold, #d97706);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.pricing-subtext {
  margin: 8px 0 0;
  font-size: 0.8rem;
  color: var(--text-secondary, #64748b);
  display: flex;
  align-items: center;
  gap: 6px;
}

.pricing-subtext svg {
  width: 14px;
  height: 14px;
  color: var(--primary, #2563eb);
}

.product-lead-description {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.68;
  color: var(--text-secondary, #475569);
}

/* Action Box: Quantity & Buttons */
.product-action-box {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  border-radius: 20px;
  background: var(--surface-card, #ffffff);
  border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
}

.quantity-control-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.qty-label {
  font-size: 0.85rem;
  font-weight: 750;
  color: var(--text-primary, #0f172a);
}

.qty-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.12));
  border-radius: 12px;
  background: var(--surface-soft, #f8fafc);
  overflow: hidden;
}

.qty-btn {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--text-primary, #0f172a);
  cursor: pointer;
  transition: background 0.15s ease;
}

.qty-btn:hover {
  background: rgba(0, 0, 0, 0.06);
}

.qty-btn svg {
  width: 15px;
  height: 15px;
}

.qty-stepper input {
  width: 44px;
  border: 0;
  background: transparent;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-primary, #0f172a);
  outline: none;
}

.purchase-buttons-stack {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 12px;
}

.product-detail-add {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  border-radius: 14px;
  background: var(--primary-gradient, linear-gradient(135deg, #2563eb, #3b82f6));
  color: #ffffff;
  font-size: 1rem;
  font-weight: 800;
  box-shadow: 0 10px 25px rgba(37, 99, 235, 0.28);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.product-detail-add:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(37, 99, 235, 0.35);
}

.product-detail-buynow {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.15));
  border-radius: 14px;
  background: var(--surface-soft, rgba(0, 0, 0, 0.03));
  color: var(--text-primary, #0f172a);
  font-size: 0.95rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
}

.product-detail-buynow:hover {
  background: var(--surface-card, #ffffff);
  border-color: var(--primary, #2563eb);
  color: var(--primary, #2563eb);
}

/* Product Tabs Container */
.product-tabs-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-radius: 20px;
  background: var(--surface-card, #ffffff);
  border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
  padding: 20px;
}

.product-tabs-header {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
  padding-bottom: 12px;
}

.tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 10px;
  border: 0;
  background: transparent;
  color: var(--text-secondary, #64748b);
  font-size: 0.85rem;
  font-weight: 750;
  cursor: pointer;
  transition: all 0.15s ease;
}

.tab-btn svg {
  width: 16px;
  height: 16px;
}

.tab-btn:hover {
  color: var(--text-primary, #0f172a);
  background: var(--surface-soft, rgba(0, 0, 0, 0.04));
}

.tab-btn.active {
  background: var(--primary-gradient, linear-gradient(135deg, #2563eb, #3b82f6));
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.22);
}

.tab-panel {
  display: none;
  animation: fadeInTab 0.25s ease-out;
}

.tab-panel.active {
  display: block;
}

@keyframes fadeInTab {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.sleek-feature-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sleek-feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text-secondary, #475569);
}

.sleek-feature-list svg {
  width: 17px;
  height: 17px;
  color: var(--primary, #2563eb);
  flex-shrink: 0;
  margin-top: 2px;
}

.product-specs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.product-specs-table tr {
  border-bottom: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.06));
}

.product-specs-table tr:last-child {
  border-bottom: 0;
}

.product-specs-table th {
  text-align: left;
  padding: 10px 0;
  color: var(--text-muted, #94a3b8);
  font-weight: 650;
  width: 35%;
}

.product-specs-table td {
  padding: 10px 0;
  color: var(--text-primary, #0f172a);
  font-weight: 700;
}

.seller-profile-card {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.seller-profile-avatar {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--surface-soft, #eff6ff);
  color: var(--primary, #2563eb);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.seller-profile-avatar svg {
  width: 24px;
  height: 24px;
}

.seller-profile-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.seller-profile-meta strong {
  font-size: 1rem;
  color: var(--text-primary, #0f172a);
}

.seller-profile-meta span {
  font-size: 0.78rem;
  color: var(--primary, #2563eb);
  font-weight: 700;
}

.seller-profile-meta p {
  margin: 6px 0 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-secondary, #64748b);
}

/* ==========================================================================
   Specialized Church & Channel Service Templates
   ========================================================================== */

.service-detail-shell {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

/* The service card is the only visual container; the host is layout-only. */
.product-detail-shell.service-detail-host {
  display: block;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* Service Hero Showcase Card */
.service-hero-card {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(380px, 0.85fr);
  gap: 40px;
  padding: 32px;
  border-radius: 28px;
  background: var(--surface-card, #ffffff);
  border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.05);
}

.service-hero-media {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 20px;
  overflow: hidden;
  background: #0f172a;
}

.service-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.service-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(15, 23, 42, 0.75));
}

.service-type-badge-pill {
  position: absolute;
  top: 16px;
  left: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 99px;
  background: rgba(15, 23, 42, 0.8);
  backdrop-filter: blur(8px);
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.service-type-badge-pill svg {
  width: 14px;
  height: 14px;
  color: var(--primary, #38bdf8);
}

.service-hero-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
}

.service-provider-strip {
  display: flex;
  align-items: center;
  gap: 12px;
}

.provider-avatar {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--surface-soft, #f1f5f9);
  color: var(--primary, #2563eb);
  display: grid;
  place-items: center;
}

.provider-avatar svg {
  width: 22px;
  height: 22px;
}

.provider-type-label {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted, #94a3b8);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 750;
}

.provider-name-text {
  font-size: 1.05rem;
  color: var(--text-primary, #0f172a);
}

.verified-partner-tag {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 99px;
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
  font-size: 0.75rem;
  font-weight: 750;
}

.verified-partner-tag svg {
  width: 13px;
  height: 13px;
}

.service-main-title {
  margin: 0;
  font-family: var(--font-heading, "Manrope", sans-serif);
  font-size: clamp(1.8rem, 2.8vw, 2.4rem);
  font-weight: 850;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: var(--text-primary, #0f172a);
}

.service-main-desc {
  margin: 0;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text-secondary, #475569);
}

.service-highlights-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 14px 18px;
  border-radius: 16px;
  background: var(--surface-soft, #f8fafc);
  border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.06));
}

.highlight-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-label {
  font-size: 0.72rem;
  color: var(--text-muted, #94a3b8);
  text-transform: uppercase;
  font-weight: 750;
  letter-spacing: 0.04em;
}

.stat-value {
  font-size: 1.15rem;
  font-weight: 850;
  color: var(--text-primary, #0f172a);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.stat-value small {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted, #94a3b8);
}

.stat-value.rating-gold {
  color: var(--gold, #f59e0b);
}

.stat-value.rating-gold svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.stat-value svg {
  width: 16px;
  height: 16px;
  color: var(--primary, #2563eb);
}

.service-hero-cta-row {
  display: flex;
  gap: 12px;
  margin-top: 4px;
}

.service-book-direct-btn {
  flex: 1;
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 14px;
  font-weight: 850;
  font-size: 0.95rem;
}

.service-view-tiers-btn {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 14px;
  font-weight: 750;
  font-size: 0.95rem;
  text-decoration: none;
}

/* Common Section Header for Templates */
.service-unique-section {
  padding: 36px;
  border-radius: 28px;
  background: var(--surface-card, #ffffff);
  border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.04);
}

.service-section-header {
  margin-bottom: 28px;
}

.service-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 850;
  color: var(--primary, #2563eb);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 8px;
}

.service-section-header h3 {
  margin: 0 0 8px;
  font-family: var(--font-heading, "Manrope", sans-serif);
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  font-weight: 850;
  color: var(--text-primary, #0f172a);
}

.service-section-header p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--text-secondary, #64748b);
  max-width: 680px;
  line-height: 1.6;
}

/* Template 1: Singing / Audio Player */
.service-audio-player-card {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
  border-radius: 20px;
  background: var(--surface-soft, #f8fafc);
  border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
}

.audio-player-controls {
  display: flex;
  align-items: center;
  gap: 20px;
}

.audio-play-toggle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 0;
  background: var(--primary-gradient, linear-gradient(135deg, #2563eb, #3b82f6));
  color: #ffffff;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(37, 99, 235, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  flex-shrink: 0;
}

.audio-play-toggle:hover {
  transform: scale(1.06);
}

.audio-play-toggle svg {
  width: 24px;
  height: 24px;
  margin-left: 2px;
}

.audio-play-toggle.playing svg {
  margin-left: 0;
}

.audio-player-track-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.track-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.track-header strong {
  font-size: 1rem;
  color: var(--text-primary, #0f172a);
}

.track-badge {
  font-size: 0.72rem;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(37, 99, 235, 0.1);
  color: var(--primary, #2563eb);
  font-weight: 750;
}

.audio-waveform-bars {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 32px;
}

.audio-waveform-bars span {
  flex: 1;
  background: var(--primary, #2563eb);
  opacity: 0.35;
  border-radius: 4px;
  min-height: 4px;
  transition: height 0.2s ease, opacity 0.2s ease;
}

.audio-waveform-bars.animating span {
  opacity: 0.85;
  animation: waveBarPulse 1.2s infinite ease-in-out alternate;
}

.audio-waveform-bars.animating span:nth-child(2n) { animation-delay: 0.2s; }
.audio-waveform-bars.animating span:nth-child(3n) { animation-delay: 0.4s; }
.audio-waveform-bars.animating span:nth-child(4n) { animation-delay: 0.6s; }

@keyframes waveBarPulse {
  0% { transform: scaleY(0.4); }
  100% { transform: scaleY(1.2); }
}

.track-timeline {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.78rem;
  color: var(--text-muted, #94a3b8);
  font-weight: 650;
}

.timeline-bar {
  flex: 1;
  height: 6px;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 99px;
  overflow: hidden;
}

.timeline-progress {
  height: 100%;
  background: var(--primary-gradient, linear-gradient(135deg, #2563eb, #3b82f6));
  border-radius: 99px;
  transition: width 0.3s linear;
}

.audio-specs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.spec-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--surface-card, #ffffff);
  border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.06));
  font-size: 0.85rem;
  color: var(--text-secondary, #475569);
}

.spec-pill svg {
  width: 18px;
  height: 18px;
  color: var(--primary, #2563eb);
  flex-shrink: 0;
}

.spec-pill strong {
  color: var(--text-primary, #0f172a);
}

/* Template 2: Venue / Sanctuary */
.venue-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.venue-stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px;
  border-radius: 18px;
  background: var(--surface-soft, #f8fafc);
  border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.06));
  gap: 6px;
}

.venue-stat-card svg {
  width: 26px;
  height: 26px;
  color: var(--primary, #2563eb);
  margin-bottom: 4px;
}

.venue-stat-card strong {
  font-size: 1.25rem;
  font-weight: 850;
  color: var(--text-primary, #0f172a);
}

.venue-stat-card span {
  font-size: 0.78rem;
  color: var(--text-secondary, #64748b);
}

.venue-amenities-card {
  padding: 24px;
  border-radius: 20px;
  background: var(--surface-soft, #f8fafc);
  border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.06));
}

.venue-amenities-card h4 {
  margin: 0 0 16px;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-primary, #0f172a);
  display: flex;
  align-items: center;
  gap: 8px;
}

.venue-amenities-card h4 svg {
  width: 18px;
  height: 18px;
  color: #10b981;
}

.amenities-checklist {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.amenity-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
  color: var(--text-secondary, #475569);
}

.amenity-item svg {
  width: 17px;
  height: 17px;
  color: var(--primary, #2563eb);
  flex-shrink: 0;
}

/* Template 3: Church Van Transport */
.van-specs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.van-spec-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px;
  border-radius: 18px;
  background: var(--surface-soft, #f8fafc);
  border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.06));
}

.spec-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--surface-card, #ffffff);
  color: var(--primary, #2563eb);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.spec-icon svg {
  width: 22px;
  height: 22px;
}

.van-spec-card div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.van-spec-card strong {
  font-size: 0.95rem;
  color: var(--text-primary, #0f172a);
}

.van-spec-card span {
  font-size: 0.82rem;
  color: var(--text-secondary, #64748b);
  line-height: 1.5;
}

.driver-options-notice {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 24px;
  border-radius: 18px;
  background: rgba(37, 99, 235, 0.06);
  border: 1px solid rgba(37, 99, 235, 0.15);
}

.driver-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 99px;
  background: var(--primary, #2563eb);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 800;
  flex-shrink: 0;
}

.driver-badge svg {
  width: 14px;
  height: 14px;
}

.driver-details strong {
  display: block;
  font-size: 0.95rem;
  color: var(--text-primary, #0f172a);
  margin-bottom: 4px;
}

.driver-details p {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--text-secondary, #475569);
}

/* Template 4: Media Production */
.media-specs-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.media-spec-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 22px 16px;
  border-radius: 18px;
  background: var(--surface-soft, #f8fafc);
  border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.06));
}

.media-spec-item svg {
  width: 26px;
  height: 26px;
  color: var(--primary, #2563eb);
  margin-bottom: 4px;
}

.media-spec-item strong {
  font-size: 0.92rem;
  color: var(--text-primary, #0f172a);
}

.media-spec-item span {
  font-size: 0.78rem;
  color: var(--text-secondary, #64748b);
  line-height: 1.45;
}

.turnaround-guarantee-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 24px;
  border-radius: 16px;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.25);
}

.turnaround-guarantee-card svg {
  width: 24px;
  height: 24px;
  color: var(--gold, #d97706);
  flex-shrink: 0;
}

.turnaround-guarantee-card div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.turnaround-guarantee-card strong {
  font-size: 0.92rem;
  color: var(--text-primary, #0f172a);
}

.turnaround-guarantee-card span {
  font-size: 0.85rem;
  color: var(--text-secondary, #64748b);
}

/* Template 5: Graphic Design */
.design-deliverables-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}

.deliverable-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px;
  border-radius: 18px;
  background: var(--surface-soft, #f8fafc);
  border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.06));
}

.deliverable-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--surface-card, #ffffff);
  color: var(--primary, #2563eb);
  display: grid;
  place-items: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.deliverable-icon svg {
  width: 22px;
  height: 22px;
}

.deliverable-card strong {
  font-size: 1rem;
  color: var(--text-primary, #0f172a);
}

.deliverable-card span {
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--text-secondary, #64748b);
}

.design-process-stepper {
  padding: 24px;
  border-radius: 20px;
  background: var(--surface-soft, #f8fafc);
  border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.06));
}

.design-process-stepper h4 {
  margin: 0 0 20px;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-primary, #0f172a);
  display: flex;
  align-items: center;
  gap: 8px;
}

.design-process-stepper h4 svg {
  width: 18px;
  height: 18px;
  color: var(--primary, #2563eb);
}

.stepper-track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.step-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}

.step-num {
  font-size: 0.85rem;
  font-weight: 850;
  color: var(--primary, #2563eb);
  font-family: var(--font-heading, "Manrope", sans-serif);
}

.step-card strong {
  font-size: 0.9rem;
  color: var(--text-primary, #0f172a);
}

.step-card span {
  font-size: 0.78rem;
  color: var(--text-secondary, #64748b);
  line-height: 1.45;
}

/* Common Package Tiers Section */
.service-tiers-section {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.service-tiers-section .section-title-wrap {
  text-align: center;
  max-width: 620px;
  margin: 0 auto;
}

.service-tiers-section .section-title-wrap h2 {
  margin: 8px 0;
  font-family: var(--font-heading, "Manrope", sans-serif);
  font-size: clamp(1.6rem, 2.5vw, 2.1rem);
  font-weight: 850;
  color: var(--text-primary, #0f172a);
}

.service-tiers-section .section-title-wrap p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--text-secondary, #64748b);
}

.service-tiers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.service-tier-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 30px 26px 26px;
  border-radius: 24px;
  background: var(--surface-card, #ffffff);
  border: 2px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.service-tier-card:hover {
  transform: translateY(-4px);
  border-color: var(--primary, #2563eb);
  box-shadow: 0 16px 40px rgba(37, 99, 235, 0.12);
}

.service-tier-card.selected {
  border-color: var(--primary, #2563eb);
  box-shadow: 0 0 0 2px var(--primary, #2563eb), 0 20px 50px rgba(37, 99, 235, 0.18);
  background: linear-gradient(180deg, var(--surface-card, #ffffff) 80%, rgba(37, 99, 235, 0.04));
}

.tier-popular-ribbon {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 14px;
  border-radius: 99px;
  background: var(--primary-gradient, linear-gradient(135deg, #2563eb, #3b82f6));
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 850;
  letter-spacing: 0.03em;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
}

.tier-popular-ribbon svg {
  width: 13px;
  height: 13px;
  fill: currentColor;
}

.tier-card-head {
  margin-bottom: 20px;
}

.tier-name {
  display: block;
  font-size: 1.05rem;
  font-weight: 850;
  color: var(--text-primary, #0f172a);
  margin-bottom: 12px;
}

.tier-price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.tier-price {
  font-size: 2.2rem;
  font-weight: 850;
  color: var(--text-primary, #0f172a);
  letter-spacing: -0.03em;
}

.tier-duration {
  font-size: 0.85rem;
  color: var(--text-muted, #94a3b8);
  font-weight: 650;
}

.tier-card-body {
  flex: 1;
  margin-bottom: 24px;
}

.tier-highlights-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tier-highlights-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text-secondary, #475569);
}

.tier-highlights-list svg {
  width: 16px;
  height: 16px;
  color: #10b981;
  flex-shrink: 0;
  margin-top: 3px;
}

.tier-card-footer button {
  width: 100%;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 0.9rem;
}

/* Service Bottom CTA Banner */
.service-bottom-cta-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 32px;
  border-radius: 22px;
  background: var(--surface-card, #ffffff);
  border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.05);
}

.service-bottom-cta-banner strong {
  display: block;
  font-size: 1.15rem;
  color: var(--text-primary, #0f172a);
  margin-bottom: 4px;
}

.service-bottom-cta-banner p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--text-secondary, #64748b);
}

.service-book-now-btn {
  min-height: 52px;
  padding: 0 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 14px;
  font-size: 0.95rem;
  font-weight: 850;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1.2;
}

.service-book-now-btn > svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.service-book-now-label,
.service-book-now-price {
  display: inline-block;
  margin: 0 !important;
  white-space: nowrap;
}

.service-book-now-price {
  padding-left: 9px;
  border-left: 1px solid rgba(255, 255, 255, 0.42);
  font-variant-numeric: tabular-nums;
}

/* Provider Full Card */
.service-provider-full-card {
  display: flex;
  gap: 24px;
  padding: 32px;
  border-radius: 24px;
  background: var(--surface-card, #ffffff);
  border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
  align-items: flex-start;
}

.provider-avatar-lg {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: var(--surface-soft, #eff6ff);
  color: var(--primary, #2563eb);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.provider-avatar-lg svg {
  width: 32px;
  height: 32px;
}

.provider-info-lg {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.provider-subhead {
  font-size: 0.78rem;
  color: var(--primary, #2563eb);
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.provider-info-lg h3 {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 850;
  color: var(--text-primary, #0f172a);
}

.provider-info-lg p {
  margin: 4px 0 12px;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text-secondary, #64748b);
  max-width: 720px;
}

.provider-meta-tags {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.provider-meta-tags span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--text-secondary, #64748b);
  font-weight: 650;
}

.provider-meta-tags svg {
  width: 15px;
  height: 15px;
  color: var(--primary, #2563eb);
}

/* ==========================================================================
   Service Booking Modal & Backdrop
   ========================================================================== */

.service-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.56) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 20000;
  animation: fadeInModal 0.25s ease-out;
}

.service-modal-backdrop[hidden],
.service-booking-modal[hidden],
.service-booking-form[hidden],
.service-booking-confirmation[hidden] {
  display: none !important;
}

body.modal-open {
  overflow: hidden !important;
}

.service-booking-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(720px, calc(100% - 32px));
  max-height: min(88dvh, 860px);
  overflow-y: auto;
  overscroll-behavior: contain;
  box-sizing: border-box;
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.2));
  border-radius: 28px;
  background: var(--surface-card, #ffffff);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);
  padding: 32px;
  z-index: 20001;
  display: flex;
  flex-direction: column;
  gap: 24px;
  animation: scaleInModal 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fadeInModal {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes scaleInModal {
  from { opacity: 0; transform: translate(-50%, -46%) scale(0.95); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.service-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
  padding-bottom: 16px;
}

.service-modal-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 850;
  color: var(--primary, #2563eb);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}

.service-modal-header h2 {
  margin: 0;
  font-size: 1.45rem;
  font-weight: 850;
  color: var(--text-primary, #0f172a);
}

.service-modal-close {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
  background: var(--surface-soft, rgba(0, 0, 0, 0.04));
  color: var(--text-primary, #0f172a);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.service-modal-close:hover {
  background: rgba(0, 0, 0, 0.08);
}

.service-modal-close svg {
  width: 18px;
  height: 18px;
}

.service-modal-summary-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border-radius: 16px;
  background: var(--surface-soft, #f8fafc);
  border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.06));
}

.service-summary-thumb {
  width: 54px;
  height: 54px;
  border-radius: 12px;
  object-fit: cover;
}

.service-summary-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.service-summary-tag {
  font-size: 0.72rem;
  font-weight: 750;
  color: var(--primary, #2563eb);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.service-summary-tag svg {
  width: 12px;
  height: 12px;
}

.service-summary-info strong {
  font-size: 0.95rem;
  color: var(--text-primary, #0f172a);
}

.service-summary-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.8rem;
  color: var(--text-secondary, #64748b);
}

.service-summary-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.service-summary-meta svg {
  width: 14px;
  height: 14px;
}

.service-summary-price {
  font-weight: 850;
  color: var(--text-primary, #0f172a);
}

.service-booking-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.service-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.service-booking-form .form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.service-booking-form label {
  font-size: 0.82rem;
  font-weight: 750;
  color: var(--text-primary, #0f172a);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.service-booking-form label svg {
  width: 14px;
  height: 14px;
  color: var(--primary, #2563eb);
}

.service-booking-form input,
.service-booking-form textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.12));
  background: var(--surface-soft, #f8fafc);
  color: var(--text-primary, #0f172a);
  font-size: 0.9rem;
  font-family: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  box-sizing: border-box;
}

.service-booking-form input:focus,
.service-booking-form textarea:focus {
  outline: none;
  border-color: var(--primary, #2563eb);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.service-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
}

.service-submit-btn {
  min-height: 48px;
  padding: 0 24px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 12px;
  font-weight: 850;
}

.service-booking-confirmation {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  padding: 20px 10px;
}

.service-booking-modal:has(.service-booking-confirmation:not([hidden])) {
  width: min(540px, calc(100% - 32px));
}

.service-booking-modal:has(.service-booking-confirmation:not([hidden])) .service-modal-header {
  padding-bottom: 12px;
}

.confirmation-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
  display: grid;
  place-items: center;
}

.confirmation-icon svg {
  width: 36px;
  height: 36px;
}

.service-booking-confirmation h3 {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 850;
  color: var(--text-primary, #0f172a);
}

.confirmation-ref {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 99px;
  background: var(--surface-soft, #f1f5f9);
  border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
  font-size: 0.9rem;
  color: var(--text-secondary, #475569);
}

.confirmation-ref strong {
  color: var(--primary, #2563eb);
  font-family: monospace;
  font-size: 1.05rem;
  letter-spacing: 0.05em;
}

.confirmation-msg {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text-secondary, #64748b);
  max-width: 480px;
}

/* ==========================================================================
   Store Marketplace Service Cards
   ========================================================================== */

.service-card-item {
  border-color: rgba(37, 99, 235, 0.18);
}

.service-badge-pill {
  background: var(--primary-gradient, linear-gradient(135deg, #2563eb, #7c3aed)) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3) !important;
}

.service-book-mini-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 10px;
  background: var(--primary-gradient, linear-gradient(135deg, #2563eb, #3b82f6));
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
  transition: transform 0.15s ease;
}

.service-book-mini-btn:hover {
  transform: scale(1.04);
}

.service-book-mini-btn svg {
  width: 14px;
  height: 14px;
}

.product-unit {
  font-size: 0.78rem;
  color: var(--text-muted, #94a3b8);
  font-weight: 600;
}

/* ==========================================================================
   Dark Mode Adaptation (html[data-theme="dark"])
   ========================================================================== */

html[data-theme="dark"] .product-main-card,
html[data-theme="dark"] .product-pricing-card,
html[data-theme="dark"] .product-action-box,
html[data-theme="dark"] .product-tabs-container,
html[data-theme="dark"] .guarantee-item,
html[data-theme="dark"] .service-hero-card,
html[data-theme="dark"] .service-unique-section,
html[data-theme="dark"] .service-tier-card,
html[data-theme="dark"] .service-bottom-cta-banner,
html[data-theme="dark"] .service-provider-full-card,
html[data-theme="dark"] .service-booking-modal {
  background: rgba(18, 24, 38, 0.85) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45) !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] .product-title-sleek,
html[data-theme="dark"] .current-price,
html[data-theme="dark"] .qty-label,
html[data-theme="dark"] .qty-stepper input,
html[data-theme="dark"] .service-main-title,
html[data-theme="dark"] .service-section-header h3,
html[data-theme="dark"] .tier-name,
html[data-theme="dark"] .tier-price,
html[data-theme="dark"] .service-bottom-cta-banner strong,
html[data-theme="dark"] .provider-info-lg h3,
html[data-theme="dark"] .service-modal-header h2,
html[data-theme="dark"] .service-summary-info strong,
html[data-theme="dark"] .service-summary-price,
html[data-theme="dark"] .service-booking-confirmation h3,
html[data-theme="dark"] .service-booking-form label,
html[data-theme="dark"] .track-header strong,
html[data-theme="dark"] .venue-stat-card strong,
html[data-theme="dark"] .venue-amenities-card h4,
html[data-theme="dark"] .van-spec-card strong,
html[data-theme="dark"] .driver-details strong,
html[data-theme="dark"] .media-spec-item strong,
html[data-theme="dark"] .turnaround-guarantee-card strong,
html[data-theme="dark"] .deliverable-card strong,
html[data-theme="dark"] .step-card strong,
html[data-theme="dark"] .design-process-stepper h4,
html[data-theme="dark"] .provider-name-text,
html[data-theme="dark"] .seller-profile-meta strong,
html[data-theme="dark"] .guarantee-item strong {
  color: #f8fafc !important;
}

html[data-theme="dark"] .product-lead-description,
html[data-theme="dark"] .service-main-desc,
html[data-theme="dark"] .service-section-header p,
html[data-theme="dark"] .service-bottom-cta-banner p,
html[data-theme="dark"] .provider-info-lg p,
html[data-theme="dark"] .confirmation-msg,
html[data-theme="dark"] .sleek-feature-list li,
html[data-theme="dark"] .tier-highlights-list li,
html[data-theme="dark"] .amenity-item,
html[data-theme="dark"] .driver-details p,
html[data-theme="dark"] .media-spec-item span,
html[data-theme="dark"] .deliverable-card span,
html[data-theme="dark"] .step-card span,
html[data-theme="dark"] .turnaround-guarantee-card span {
  color: #cbd5e1 !important;
}

html[data-theme="dark"] .category-pill {
  background: rgba(15, 23, 42, 0.85) !important;
  color: var(--primary, #38bdf8) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

html[data-theme="dark"] .product-seller-badge,
html[data-theme="dark"] .qty-stepper,
html[data-theme="dark"] .thumb-btn,
html[data-theme="dark"] .service-highlights-row,
html[data-theme="dark"] .service-audio-player-card,
html[data-theme="dark"] .spec-pill,
html[data-theme="dark"] .venue-stat-card,
html[data-theme="dark"] .venue-amenities-card,
html[data-theme="dark"] .van-spec-card,
html[data-theme="dark"] .spec-icon,
html[data-theme="dark"] .media-spec-item,
html[data-theme="dark"] .deliverable-card,
html[data-theme="dark"] .deliverable-icon,
html[data-theme="dark"] .design-process-stepper,
html[data-theme="dark"] .provider-avatar,
html[data-theme="dark"] .provider-avatar-lg,
html[data-theme="dark"] .seller-profile-avatar,
html[data-theme="dark"] .service-modal-summary-card,
html[data-theme="dark"] .service-modal-close,
html[data-theme="dark"] .confirmation-ref {
  background: rgba(30, 41, 59, 0.7) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] .product-detail-buynow {
  background: rgba(30, 41, 59, 0.8) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] .service-booking-form input,
html[data-theme="dark"] .service-booking-form textarea {
  background: rgba(15, 23, 42, 0.85) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] .timeline-bar {
  background: rgba(255, 255, 255, 0.1) !important;
}

html[data-theme="dark"] .service-tier-card.selected {
  border-color: var(--primary, #38bdf8) !important;
  box-shadow: 0 0 0 2px var(--primary, #38bdf8), 0 20px 50px rgba(0, 0, 0, 0.5) !important;
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.9) 70%, rgba(37, 99, 235, 0.15)) !important;
}

/* Responsive Breakpoints */
@media (max-width: 1100px) {
  .product-sleek-layout,
  .service-hero-card {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .product-main-image-wrap {
    max-height: 680px;
  }
  .service-tiers-grid,
  .stepper-track,
  .venue-stats-row,
  .media-specs-grid {
    grid-template-columns: 1fr;
  }
  .product-guarantee-strip,
  .audio-specs-grid,
  .amenities-checklist,
  .van-specs-grid,
  .design-deliverables-grid {
    grid-template-columns: 1fr;
  }
  .service-bottom-cta-banner {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  .service-bottom-cta-banner .service-book-now-btn {
    width: 100%;
  }
  .service-form-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 420px) {
  .service-book-now-btn {
    flex-wrap: wrap;
    padding: 10px 18px;
    white-space: normal;
  }

  .service-book-now-price {
    flex-basis: 100%;
    padding: 4px 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.34);
    border-left: 0;
  }
}

@media (max-width: 640px) {
  .service-booking-modal {
    top: auto;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: 92dvh;
    transform: none;
    padding: 22px 18px max(22px, env(safe-area-inset-bottom));
    border-radius: 24px 24px 0 0;
    animation: none;
  }

  .service-booking-modal:has(.service-booking-confirmation:not([hidden])) {
    width: 100%;
  }

  .service-form-grid {
    grid-template-columns: 1fr;
  }

  .service-modal-footer {
    position: sticky;
    bottom: -22px;
    margin-inline: -18px;
    padding: 14px 18px max(14px, env(safe-area-inset-bottom));
    background: var(--surface-card);
  }
}

/* Directory boundary and universal control contract. */
.module-directory-hero + .module-content {
  position: relative !important;
  padding-top: 0 !important;
}

.module-directory-hero + .module-content > .site-search-bar,
.module-directory-hero + .module-content > * > .site-search-bar {
  transform: translateY(-50%) !important;
}

.site-search-bar .site-search > svg,
.site-search-bar .site-search > i,
.site-search-bar .pill-search-input-wrapper .search-hero-icon {
  position: static !important;
  inset: auto !important;
  width: 19px !important;
  height: 19px !important;
  flex: 0 0 19px !important;
  align-self: center !important;
  margin: 0 !important;
  transform: none !important;
}

.site-search-bar .module-filter-control,
.site-search-bar .module-filter-group > .module-filter-trigger {
  flex-basis: 148px !important;
  width: 148px !important;
}

.site-search-bar .module-filter-trigger > svg,
.site-search-bar .module-filter-trigger > i {
  position: static !important;
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
  align-self: center !important;
  margin-block: 0 !important;
}

.site-search-bar .module-filter-trigger > span:not(.pill-badge) {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-align: left !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.site-search-bar .module-filter-trigger .trigger-arrow,
.site-search-bar .module-filter-trigger .pill-arrow {
  margin-left: auto !important;
}

.site-search-bar .module-filter-group > .module-filter-control:nth-last-child(-n + 2) > .custom-options-panel,
.site-search-bar .module-filter-group > .module-filter-control:nth-last-child(-n + 2) > .filter-dropdown-panel {
  right: 0 !important;
  left: auto !important;
}

/* Store typography is the canonical directory-filter typography. */
.site-search-bar .module-filter-trigger,
.site-search-bar .module-filter-trigger .trigger-label,
.site-search-bar .module-filter-trigger .pill-title {
  font-size: 0.88rem !important;
  font-weight: 750 !important;
  line-height: 1 !important;
}

.site-search-bar .site-search {
  flex: 1 1 280px !important;
  min-width: 220px !important;
}

.site-search-bar .module-filter-control:not(.module-filter-overflow) > .module-filter-trigger > svg:not(.trigger-arrow):not(.pill-arrow),
.site-search-bar .module-filter-control:not(.module-filter-overflow) > .module-filter-trigger > i:not(.trigger-arrow):not(.pill-arrow),
.site-search-bar .module-filter-group > .module-filter-trigger:not(.module-overflow-trigger) > svg:not(.trigger-arrow):not(.pill-arrow),
.site-search-bar .module-filter-group > .module-filter-trigger:not(.module-overflow-trigger) > i:not(.trigger-arrow):not(.pill-arrow) {
  display: none !important;
}

/* Hidden must win over the generic filter-control display rule. */
.site-search-bar .module-filter-overflow[hidden],
.module-directory-toolbar .module-filter-overflow[hidden] {
  display: none !important;
}
/* Persisted love control: available only on channels, products, resources and livestreams. */
.content-love-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  min-width: 3.4rem;
  height: 2.55rem;
  padding: 0 0.78rem;
  border: 1px solid var(--border, #dbe3ef);
  border-radius: 999px;
  background: var(--surface, #fff);
  color: var(--muted, #64748b);
  font: 800 0.78rem/1 inherit;
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease;
}
.content-love-button svg { width: 1.05rem; height: 1.05rem; }
.content-love-button:hover { transform: translateY(-1px); border-color: var(--primary); color: var(--primary); background: var(--primary-surface); }
.content-love-button.is-loved { color: #fff; border-color: var(--primary); background: var(--primary-gradient); box-shadow: var(--primary-glow); }
.content-love-button.is-loved svg { fill: currentColor; }
.content-love-button:disabled { cursor: wait; opacity: .65; }
.content-love-button.is-unavailable { opacity: .72; }
.content-love-overlay { position: absolute; top: 0.8rem; right: 0.8rem; z-index: 4; }
.content-love-detail { flex: 0 0 auto; }
.channel-profile-card, .product-card, .resource-card { position: relative; }
.channel-profile-card .content-love-overlay { top: 3.15rem; }
.livestream-showcase-card .content-love-overlay { display: none !important; }

/* Service details inherit the active platform palette in both appearance modes. */
.service-hero-card,
.service-highlights-row,
.service-view-tiers-btn,
.provider-avatar {
  border-color: var(--primary-border) !important;
}
.provider-avatar,
.service-highlights-row {
  background: var(--primary-surface) !important;
}
.service-view-tiers-btn {
  color: var(--text-primary) !important;
  background: var(--surface-card) !important;
}
.service-view-tiers-btn:hover {
  color: var(--primary) !important;
  background: var(--primary-surface) !important;
}
html[data-theme="dark"] .service-hero-card {
  background: linear-gradient(145deg,
    hsla(var(--primary-h), 28%, 21%, 0.84),
    hsla(var(--primary-h), 30%, 14%, 0.94)) !important;
  border-color: var(--primary-border) !important;
  box-shadow: 0 22px 58px rgba(0, 0, 0, 0.42), inset 0 1px 0 hsla(var(--primary-h), 55%, 82%, 0.08) !important;
}
html[data-theme="dark"] .service-highlights-row,
html[data-theme="dark"] .provider-avatar {
  color: var(--text-primary) !important;
  background: hsla(var(--primary-h), 34%, 26%, 0.62) !important;
  border-color: var(--primary-border) !important;
}
html[data-theme="dark"] .service-view-tiers-btn {
  color: var(--text-primary) !important;
  background: hsla(var(--primary-h), 30%, 18%, 0.76) !important;
  border-color: var(--primary-border) !important;
}
html[data-theme="dark"] .service-view-tiers-btn:hover {
  color: hsl(var(--primary-h), 90%, 78%) !important;
  background: var(--primary-soft) !important;
}
html[data-theme="dark"] .service-hero-content > .content-love-button {
  color: hsl(var(--primary-h), 90%, 78%);
  background: var(--primary-surface);
  border-color: var(--primary-border);
}

/* Daily scripture card: overlays the top-right of the church directory hero. */
.daily-scripture {
  position: absolute;
  top: clamp(20px, 3vw, 36px);
  right: max(16px, calc(50% - 540px));
  z-index: 2;
  width: min(340px, calc(100% - 32px));
  box-sizing: border-box;
  padding: 16px 20px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid var(--border-subtle);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.daily-scripture:empty { display: none; }
.daily-scripture .daily-scripture-label {
  max-width: none;
  margin: 0 0 8px;
  color: var(--gold);
  line-height: 1.4;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.daily-scripture blockquote {
  margin: 0 0 8px;
  color: var(--text-primary);
  font-size: 0.92rem;
  line-height: 1.5;
  font-style: italic;
}
.daily-scripture cite {
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-style: normal;
  font-weight: 600;
}
html[data-theme="dark"] .daily-scripture {
  background: rgba(15, 23, 42, 0.72);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
@media (max-width: 900px) {
  .daily-scripture {
    position: relative;
    top: auto;
    right: auto;
    margin: 0 16px 20px;
    width: auto;
    max-width: none;
  }
  .daily-scripture.member-home-scripture {
    position: static;
    width: 100%;
    max-width: 510px;
    margin: 0;
  }
  .module-directory-hero { flex-direction: column; justify-content: flex-end; align-items: stretch; }
}
.church-city-options-status {
  margin: 12px 0;
  font-size: .8rem;
  color: var(--muted);
}

.church-city-source {
  display: block;
  margin-top: 12px;
  font-size: .75rem;
  color: var(--muted);
}

#church-city-option-search {
  width: 100%;
  margin-bottom: 12px;
}

#church-city-show-more[hidden] {
  display: none;
}

.church-directory-reset {
  display: flex;
  margin: 0 0 16px auto;
}

.channel-content-cover img { width:100%; height:100%; object-fit:cover; }
.channel-video-player video { width:100%; max-height:70vh; background:black; }
.channel-post-view.channel-article-view { max-width:100%; margin:0; padding:0; }
.channel-post-view.channel-audio-view { min-height:0; }
.channel-content-layout { display:grid; grid-template-columns:minmax(0,1fr); align-items:start; gap:24px; }
.channel-content-layout.has-engagement { grid-template-columns:minmax(0,1fr) minmax(320px,390px); }
.channel-content-layout > .channel-post-view { min-width:0; }
.channel-post-view .channel-post-media { position:relative; min-height:0; aspect-ratio:16/9; display:grid; place-items:center; overflow:hidden; background:#071a47; }
.channel-post-view .channel-post-media::after { position:absolute; z-index:1; inset:0; background:linear-gradient(180deg,rgba(5,18,47,.02) 45%,rgba(5,18,47,.4)); content:""; pointer-events:none; }
.channel-post-view .channel-post-media-poster,.channel-post-view .channel-post-poster { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.channel-post-view .channel-post-poster[hidden] { display:none; }
.channel-post-view .channel-post-player { padding:0; }
.channel-post-view .channel-post-player::after { display:none; }
.channel-post-view .channel-post-player .channel-video-player { position:absolute; inset:0; width:100%; height:100%; aspect-ratio:auto; }
.channel-post-view .channel-video-player iframe,.channel-post-view .channel-video-player video { display:block; width:100%; height:100%; max-height:none; border:0; object-fit:contain; }
.channel-post-view .channel-post-media-label { position:absolute; z-index:2; right:22px; bottom:20px; padding:8px 12px; border-radius:999px; color:#fff; background:rgba(4,18,52,.72); font-size:.75rem; font-weight:800; }
.channel-post-copy { width:min(100%,980px); max-width:none; margin:0 auto; padding:38px clamp(22px,5vw,56px) 44px; }
.channel-post-copy > .channel-post-kicker,.channel-post-engagement-heading > span { color:var(--primary); font-size:.72rem; font-weight:850; letter-spacing:.09em; text-transform:uppercase; }
.channel-post-copy h1 { margin:9px 0 12px; color:var(--text-primary); font-size:clamp(2rem,4.5vw,3.5rem); line-height:1.08; letter-spacing:-.045em; }
.channel-post-copy .channel-post-lead { max-width:780px; margin:0; color:var(--text-secondary); font-size:1.05rem; line-height:1.7; }
.channel-post-author { display:flex; align-items:center; gap:16px; margin:24px 0 20px; padding:18px 0; border-block:1px solid var(--border-subtle); }
.channel-post-author > div { display:grid; flex:1; gap:4px; color:var(--text-primary); }
.channel-post-author > div span { color:var(--text-muted); font-size:.82rem; }
.channel-post-author > a { display:inline-flex; min-height:42px; align-items:center; justify-content:center; padding:0 16px; border:1px solid var(--border); border-radius:12px; color:var(--primary); background:var(--surface); font-size:.86rem; font-weight:800; text-decoration:none; }
.channel-post-actions { display:flex; flex-wrap:wrap; gap:10px; }
.channel-post-actions .module-primary-action { min-height:44px; display:inline-flex; align-items:center; justify-content:center; margin:0; padding:0 18px; border-radius:12px; text-decoration:none; }
.channel-post-view .channel-episode-about { margin-top:28px; }
.channel-post-engagement { display:grid; gap:22px; margin:24px 0 0; padding:clamp(22px,4vw,36px); border:1px solid var(--border-subtle); border-radius:22px; background:var(--surface); box-shadow:0 16px 44px rgba(25,56,118,.07); }
.channel-content-layout.has-engagement > .channel-post-engagement { position:sticky; top:90px; align-self:start; max-height:calc(100vh - 112px); margin:0; overflow:auto; overscroll-behavior:contain; }
.channel-post-engagement-heading h2 { margin:5px 0 4px; color:var(--text-primary); font-size:clamp(1.5rem,3vw,2.1rem); line-height:1.2; }
.channel-post-engagement-heading p { margin:0; color:var(--text-secondary); font-size:.92rem; line-height:1.6; }
.channel-post-engagement-actions { display:flex; flex-wrap:wrap; gap:9px; }
.channel-post-engagement-actions button { min-height:42px; display:inline-flex; align-items:center; justify-content:center; gap:8px; margin:0; padding:0 15px; border:1px solid var(--border); border-radius:999px; color:var(--text-primary); background:var(--surface-soft); font-size:.84rem; font-weight:750; cursor:pointer; transition:background .18s ease,border-color .18s ease,color .18s ease; }
.channel-post-engagement-actions button:hover,.channel-post-engagement-actions button[aria-pressed="true"] { border-color:var(--primary); color:var(--primary); background:var(--primary-surface); }
.channel-post-engagement-actions button svg { width:17px; height:17px; }
.channel-post-comments { display:grid; gap:0; }
.channel-post-comments > article { padding:16px 0; border-top:1px solid var(--border-subtle); }
.channel-post-comments > article strong { color:var(--text-primary); font-size:.9rem; }
.channel-post-comments > article p,.channel-post-comments > p { margin:5px 0 0; color:var(--text-secondary); line-height:1.6; }
.channel-post-engagement form { display:grid; gap:9px; padding-top:18px; border-top:1px solid var(--border-subtle); }
.channel-post-engagement form[hidden] { display:none; }
.channel-post-engagement form label { color:var(--text-primary); font-size:.85rem; font-weight:800; }
.channel-post-comment-compose { display:flex; align-items:stretch; gap:10px; }
.channel-post-comment-compose input { flex:1; width:100%; min-width:0; min-height:46px; margin:0; padding:0 14px; border:1px solid var(--border); border-radius:12px; outline:none; color:var(--text-primary); background:var(--background); font:inherit; }
.channel-post-comment-compose input:focus { border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-surface); }
.channel-post-comment-compose button { min-height:46px; margin:0; padding:0 18px; border:0; border-radius:12px; color:#fff; background:var(--primary-gradient); font:inherit; font-size:.86rem; font-weight:800; cursor:pointer; }
html[data-theme="dark"] .channel-post-engagement { background:var(--background-secondary); }
html[data-theme="dark"] .channel-post-engagement-actions button { color:var(--text-primary); background:var(--surface); }
@media(max-width:640px) {
  .channel-post-view .channel-post-media { aspect-ratio:4/3; }
  .channel-post-copy { padding:28px 20px 32px; }
  .channel-post-author { align-items:flex-start; flex-wrap:wrap; }
  .channel-post-author > a { width:100%; }
  .channel-post-comment-compose { flex-direction:column; }
  .channel-post-comment-compose button { width:100%; }
}
@media(max-width:900px) {
  .channel-content-layout.has-engagement { grid-template-columns:minmax(0,1fr); }
  .channel-content-layout.has-engagement > .channel-post-engagement { position:static; max-height:none; margin:0; }
}

/* Keep sign-in fields visually simple while preserving programmatic labels. */
.auth-visually-hidden { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important; }
.auth-field-helper { display:none; margin:0; color:var(--text-muted); font-size:.72rem; line-height:1.35; }
.signin-field-group { display:grid; min-width:0; gap:6px; margin:0 !important; }
.signin-field-group:focus-within .auth-field-helper,
.member-auth-field:focus-within .auth-field-helper { display:block; }
.signin-dropdown-popover { box-sizing:border-box; width:min(320px,calc(100vw - 24px)); max-width:calc(100vw - 24px); }
#nav-dropdown-auth-form { display:grid; gap:12px; min-width:0; }
.signin-dropdown-popover .small-field { width:100%; min-width:0; height:48px; min-height:48px; box-sizing:border-box; padding:0 14px !important; border-radius:11px !important; font-size:.9rem !important; }
.signin-dropdown-popover .google-auth-fast-btn,
.signin-dropdown-popover #nav-auth-submit-btn { width:100%; height:48px; min-height:48px; box-sizing:border-box; border-radius:11px; }
.signin-dropdown-popover .google-auth-fast-btn { padding:0 16px; }
.signin-dropdown-popover #nav-auth-submit-btn { margin:0; }
.member-auth-form { gap:12px !important; }
.member-auth-form input { height:48px !important; border-radius:11px !important; }
.member-auth-google,.member-auth-submit { height:48px !important; min-height:48px !important; border-radius:11px !important; }
.member-auth-submit { margin-top:0 !important; }
.member-auth-field { gap:6px !important; }
.member-auth-form .auth-field-helper { padding-left:2px; }
@media (max-width:600px) {
  .signin-dropdown-container { position:static; }
  .signin-dropdown-popover { position:fixed; top:calc(env(safe-area-inset-top,0px) + 76px); right:12px; left:12px; width:auto; max-width:none; max-height:calc(100dvh - 92px); overflow-y:auto; padding:18px; }
  .member-auth-card { max-width:min(440px,calc(100vw - 28px)) !important; padding:24px !important; }
}