.module-page {
  padding-bottom: 48px;
}
.module-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.module-card {
  overflow: hidden;
}
.module-card-link {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  color: inherit;
  padding: 0;
}
.module-card h2,
.person-card h2 {
  margin: 14px 18px 8px;
}
.module-card p,
.person-card p,
.module-card .eyebrow,
.module-card .content-meta {
  margin-left: 18px;
  margin-right: 18px;
}
.module-image {
  display: block;
  width: 100%;
  object-fit: cover;
  background: #edf2ef;
}
.module-image-wide {
  aspect-ratio: 16/9;
}
.module-image-person {
  aspect-ratio: 1/1;
}
.module-card > .no-image {
  aspect-ratio: 16/9;
}
.person-card {
  overflow: hidden;
}
.person-card > strong,
.person-card > p {
  display: block;
  margin: 0 18px 14px;
}
.youtube-frame {
  width: 100%;
  aspect-ratio: 16/9;
  background: #101b1a;
  border-radius: 8px;
  overflow: hidden;
}
.youtube-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.article-detail {
  max-width: 880px;
  margin-inline: auto;
  padding: 24px;
}
.article-detail .module-image {
  max-height: 480px;
  border-radius: 8px;
  margin: 18px 0;
}
.article-body {
  white-space: pre-wrap;
  line-height: 1.8;
}
.prayer-monthly-page .table-wrap {
  overflow: auto;
}
.prayer-monthly-page table {
  min-width: 720px;
}
.prayer-monthly-page th,
.prayer-monthly-page td {
  white-space: nowrap;
}
.module-empty {
  min-height: 160px;
  display: grid;
  place-content: center;
  text-align: center;
}
.calendar-nav {
  display: flex;
  gap: 8px;
  align-items: center;
}
.calendar-nav input {
  min-height: 40px;
  border: 1px solid var(--line, #d8e1dc);
  border-radius: 6px;
  padding: 0 10px;
}
.module-card .no-image {
  margin: 0;
}
.module-card .content-meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.module-card .content-meta span {
  font-size: 13px;
  color: var(--muted);
}

/* Theme engine: shared composition tokens. Loaded last so every public and
   preview surface uses the same design direction without changing markup. */
:root[data-theme] {
  --theme-surface: var(--white);
  --theme-surface-2: var(--mint);
  --theme-gradient: linear-gradient(135deg, var(--teal), var(--ink));
  --theme-hero-overlay: linear-gradient(100deg, rgba(4, 35, 29, .94), rgba(4, 35, 29, .38) 68%, rgba(4, 35, 29, .12));
  --theme-button: linear-gradient(135deg, var(--teal), color-mix(in srgb, var(--teal) 72%, var(--amber)));
  --theme-radius: 10px;
  --theme-card-radius: var(--theme-radius);
  --theme-card-shadow: var(--shadow);
  --theme-nav-mode: solid;
  --theme-density: 1;
  --theme-heading: Newsreader, serif;
  --theme-body: "DM Sans", sans-serif;
  --theme-pattern: none;
  --theme-glow: none;
  --theme-border: 1px solid var(--line);
  --theme-section-space: 30px;
  --theme-surface-gradient: linear-gradient(145deg, var(--theme-surface), var(--theme-surface-2));
  --theme-gold: linear-gradient(135deg, #f7df9a, #bd8b2d 48%, #fff0b4);
  transition: background-color .25s ease, color .25s ease;
}
:root[data-theme] body { font-family: var(--theme-body); background-image: var(--theme-pattern); }
:root[data-theme] h1,
:root[data-theme] h2,
:root[data-theme] h3,
:root[data-theme] .headline,
:root[data-theme] .home-hero-copy h1,
:root[data-theme] .home-section-heading h2,
:root[data-theme] .live-title { font-family: var(--theme-heading); }
:root[data-theme] .topbar {
  background: var(--theme-surface-gradient);
  border-bottom: var(--theme-border);
  box-shadow: 0 8px 28px color-mix(in srgb, var(--ink) 10%, transparent);
}
:root[data-theme] .brand-mark { background: var(--theme-gradient); box-shadow: var(--theme-glow); }
:root[data-theme] .nav button { border-radius: var(--theme-radius); transition: background .2s ease, transform .2s ease; }
:root[data-theme] .nav button:hover { transform: translateY(-1px); }
:root[data-theme] .nav button.active,
:root[data-theme] .nav button:hover { background: var(--theme-surface-2); color: var(--teal); }
:root[data-theme] .header-select,
:root[data-theme] .icon-btn { background: var(--theme-surface); border: var(--theme-border); border-radius: var(--theme-radius); }
:root[data-theme] .btn { border-radius: var(--theme-radius); transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; }
:root[data-theme] .btn:hover { transform: translateY(-2px); filter: saturate(1.08); }
:root[data-theme] .btn-primary,
:root[data-theme] .home-card-button { background: var(--theme-button); color: #fff; border-color: transparent; box-shadow: 0 8px 18px color-mix(in srgb, var(--teal) 24%, transparent); }
:root[data-theme] .card,
:root[data-theme] .home-feature,
:root[data-theme] .home-programs,
:root[data-theme] .home-gallery,
:root[data-theme] .live-stage,
:root[data-theme] .module-card { background: var(--theme-surface-gradient); border: var(--theme-border); border-radius: var(--theme-card-radius); box-shadow: var(--theme-card-shadow); }
:root[data-theme] .card:hover,
:root[data-theme] .home-feature:hover,
:root[data-theme] .module-card:hover { transform: translateY(-2px); transition: transform .2s ease, box-shadow .2s ease; }
:root[data-theme] .home-hero { border-radius: calc(var(--theme-radius) * 1.5); background: var(--theme-gradient); box-shadow: var(--theme-card-shadow), var(--theme-glow); }
:root[data-theme] .home-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5; background: var(--theme-pattern); mix-blend-mode: screen; }
:root[data-theme] .home-hero::after { content: ""; position: absolute; inset: 14px; z-index: -1; pointer-events: none; border: 1px solid color-mix(in srgb, var(--amber) 36%, transparent); border-radius: calc(var(--theme-radius) * 1.15); opacity: .6; }
:root[data-theme] .home-hero-media:after { background: var(--theme-hero-overlay); }
:root[data-theme] .home-prayer-card { border: var(--theme-border); border-radius: var(--theme-card-radius); background: var(--theme-surface); box-shadow: 0 20px 45px color-mix(in srgb, var(--ink) 25%, transparent); }
:root[data-theme] .home-prayer-head { background: var(--theme-gradient); }
:root[data-theme] .home-prayer-list .current { background: var(--amber); color: var(--ink); }
:root[data-theme] .home-prayer-head span, :root[data-theme] .home-section-heading > div > span, :root[data-theme] .home-feature-title > span { color: var(--amber); }
:root[data-theme] .home-section-heading { position: relative; padding-bottom: 12px; }
:root[data-theme] .home-section-heading::after { content: ""; position: absolute; left: 0; bottom: 0; width: 58px; height: 2px; background: var(--theme-gold); border-radius: 2px; }
:root[data-theme] .home-shortcuts { background: var(--theme-gradient); border-radius: var(--theme-card-radius); box-shadow: var(--theme-card-shadow); }
:root[data-theme] .home-shortcut-list button { border-radius: var(--theme-radius); background: var(--theme-surface); color: var(--teal); border: var(--theme-border); }
:root[data-theme] .home-bottom-grid { gap: calc(20px * var(--theme-density)); }
:root[data-theme] .home-section-heading > button { color: var(--teal); }
:root[data-theme] .main-sidebar { background: var(--theme-surface-gradient); border-color: var(--line); box-shadow: 8px 0 28px color-mix(in srgb, var(--ink) 8%, transparent); }
:root[data-theme] .side { background: var(--theme-gradient); color: #fff; box-shadow: var(--theme-card-shadow); }
:root[data-theme] .side button { color: rgba(255,255,255,.78); }
:root[data-theme] .side button.active, :root[data-theme] .side button:hover { background: rgba(255,255,255,.16); color: #fff; }
:root[data-theme] .admin-nav-label { color: rgba(255,255,255,.62); }
:root[data-theme] .side-item.active,
:root[data-theme] .side-item:hover { background: var(--theme-surface-2); color: var(--teal); }
:root[data-theme] .main-sidebar .admin-entry { background: var(--theme-gradient); border-radius: var(--theme-radius); }
:root[data-theme] .footer { background: var(--theme-gradient); }
:root[data-theme] .pill { border-radius: 999px; background: var(--theme-surface-2); color: var(--teal); }
:root[data-theme] .live-feature .home-feature-icon, :root[data-theme] .lecture-feature .home-feature-icon, :root[data-theme] .notice-feature .home-feature-icon { background: var(--theme-surface-2); color: var(--teal); border: 1px solid color-mix(in srgb, var(--amber) 42%, transparent); }
:root[data-theme] .live-stage-active { background: var(--theme-gradient); }
:root[data-theme] .live-badge { background: linear-gradient(135deg, #b42318, #df6249); box-shadow: 0 0 0 3px rgba(255,255,255,.1); }
:root[data-theme] .home-announcement-ad { background: var(--theme-gradient); border: 1px solid color-mix(in srgb, var(--amber) 45%, transparent); box-shadow: var(--theme-card-shadow); }
:root[data-theme] .program-card, :root[data-theme] .announcement-card, :root[data-theme] .gallery-card, :root[data-theme] .kuliah-card { overflow: hidden; }
:root[data-theme] .program-card-copy h2, :root[data-theme] .announcement-card h2, :root[data-theme] .gallery-caption { font-family: var(--theme-heading); }
:root[data-theme] .footer { position: relative; overflow: hidden; }
:root[data-theme] .footer::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .3; background: var(--theme-pattern); }
:root[data-theme] .no-image { background: var(--theme-surface-2); color: var(--teal); }

/* Masjid Emerald: editorial emerald and gold with a geometric watermark. */
:root[data-theme="emerald-classic"] { --theme-gradient: linear-gradient(135deg, #0a4b3b, #11765a 55%, #193d37); --theme-hero-overlay: linear-gradient(100deg, rgba(3, 35, 27, .95), rgba(8, 84, 63, .48), rgba(8, 84, 63, .12)); --theme-radius: 10px; --theme-card-shadow: 0 18px 40px rgba(10, 69, 53, .14); --theme-pattern: radial-gradient(circle at 15% 10%, rgba(217,182,91,.12), transparent 25%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M32 4l7 18 19 3-14 13 4 19-16-10-16 10 4-19L6 25l19-3z' fill='none' stroke='%23d9b65b' stroke-opacity='.12'/%3E%3C/svg%3E"); }
/* Royal Madinah: richer, gold-edged luxury surfaces. */
:root[data-theme="royal-madinah"] { --theme-gradient: linear-gradient(120deg, #073f3a, #12685c 52%, #8b672b); --theme-hero-overlay: linear-gradient(105deg, rgba(4, 43, 38, .95), rgba(9, 92, 79, .48), rgba(143, 101, 35, .18)); --theme-radius: 14px; --theme-card-shadow: 0 22px 48px rgba(45, 31, 8, .18); --theme-surface-gradient: linear-gradient(145deg, #fffdf5, #f3ead2); }
:root[data-theme="royal-madinah"] .card, :root[data-theme="royal-madinah"] .home-feature { border-color: #d8bd72; }
/* Sahara Sunset: warm terracotta composition and sunset hero. */
:root[data-theme="sahara-sunset"] { --ink: #40291f; --teal: #a65739; --mint: #f3d8bd; --paper: #fff7ee; --line: #e8cbb5; --amber: #ed9b42; --theme-gradient: linear-gradient(125deg, #602f29, #b85c3a 58%, #e6a44c); --theme-hero-overlay: linear-gradient(105deg, rgba(72, 34, 26, .93), rgba(169, 74, 45, .46), rgba(239, 164, 72, .12)); --theme-radius: 12px; --theme-card-shadow: 0 16px 34px rgba(112, 58, 32, .15); --theme-surface-gradient: linear-gradient(145deg, #fffaf2, #f6e3cf); --theme-heading: Newsreader, serif; }
/* Sky & Turquoise: airy glass-like cyan surfaces. */
:root[data-theme="sky-turquoise"] { --ink: #123c4c; --teal: #087f91; --mint: #d8f4f4; --paper: #f1fbfd; --line: #bfe5eb; --amber: #e8a943; --theme-gradient: linear-gradient(125deg, #087c8b, #21b7c2 55%, #4e9fea); --theme-hero-overlay: linear-gradient(105deg, rgba(4, 77, 94, .86), rgba(17, 153, 166, .38), rgba(79, 164, 239, .1)); --theme-radius: 18px; --theme-card-shadow: 0 18px 38px rgba(16, 130, 151, .14); --theme-surface-gradient: linear-gradient(145deg, rgba(255,255,255,.92), rgba(224,248,249,.9)); }
:root[data-theme="sky-turquoise"] .card, :root[data-theme="sky-turquoise"] .home-feature, :root[data-theme="sky-turquoise"] .home-programs, :root[data-theme="sky-turquoise"] .home-gallery { backdrop-filter: blur(10px); }
/* Purple Ramadan: cinematic purple and gold with spiritual glow. */
:root[data-theme="purple-ramadan"] { --ink: #f8efff; --teal: #b38ce9; --mint: #42255f; --paper: #171026; --line: #5a3d7d; --white: #26183a; --muted: #cbb9db; --amber: #e6bc5c; --theme-gradient: linear-gradient(125deg, #251039, #632d86 58%, #a64c91); --theme-hero-overlay: linear-gradient(105deg, rgba(25, 8, 45, .94), rgba(88, 34, 120, .5), rgba(164, 69, 132, .2)); --theme-radius: 14px; --theme-card-shadow: 0 24px 52px rgba(6, 2, 16, .42); --theme-glow: 0 0 28px rgba(184, 118, 246, .22); --theme-surface-gradient: linear-gradient(145deg, #2b1b40, #211531); }
/* Islamic Oasis: organic rounded cards and mint gradients. */
:root[data-theme="islamic-oasis"] { --ink: #243b2b; --teal: #4c8053; --mint: #e0efd8; --paper: #f6f8ef; --line: #d0e0c4; --amber: #c39b49; --theme-gradient: linear-gradient(125deg, #315b40, #709b61 58%, #b8ca8a); --theme-hero-overlay: linear-gradient(105deg, rgba(29, 67, 42, .88), rgba(73, 118, 69, .45), rgba(154, 180, 104, .12)); --theme-radius: 22px; --theme-card-shadow: 0 16px 34px rgba(50, 91, 50, .12); --theme-surface-gradient: linear-gradient(145deg, #fffffa, #edf3dc); }
/* Modern Minimal: restrained dashboard density and crisp borders. */
:root[data-theme="modern-minimal"] { --ink: #202a33; --teal: #216bb1; --mint: #e8f0f8; --paper: #f8fafc; --line: #d7e0e8; --amber: #d98927; --theme-gradient: linear-gradient(135deg, #1f2933, #356f9d); --theme-hero-overlay: linear-gradient(105deg, rgba(24, 34, 46, .92), rgba(43, 91, 130, .4), rgba(53, 111, 157, .08)); --theme-radius: 6px; --theme-card-shadow: 0 8px 22px rgba(35, 54, 72, .06); --theme-heading: "DM Sans", sans-serif; --theme-density: .86; --theme-surface-gradient: #fff; }
:root[data-theme="modern-minimal"] .card, :root[data-theme="modern-minimal"] .home-feature, :root[data-theme="modern-minimal"] .home-programs, :root[data-theme="modern-minimal"] .home-gallery { box-shadow: none; }
/* Night Mosque: navy cinematic surfaces and controlled cyan glow. */
:root[data-theme="night-mosque"] { --ink: #eef6ff; --teal: #64c4c2; --mint: #1c3a51; --paper: #091525; --line: #284866; --white: #122337; --muted: #abc1d4; --amber: #e7bd62; --theme-gradient: linear-gradient(125deg, #08172d, #133e59 58%, #146d70); --theme-hero-overlay: linear-gradient(105deg, rgba(3, 14, 31, .95), rgba(8, 57, 78, .52), rgba(19, 105, 107, .16)); --theme-radius: 9px; --theme-card-shadow: 0 22px 48px rgba(0, 0, 0, .42); --theme-glow: 0 0 24px rgba(89, 206, 203, .15); --theme-surface-gradient: linear-gradient(145deg, #142c43, #102032); }
/* Islamic Art: patterned editorial surfaces, restrained for readability. */
:root[data-theme="islamic-art"] { --ink: #163d37; --teal: #147269; --mint: #e3eee5; --paper: #fbf7eb; --line: #d9d6ba; --amber: #c69b3c; --theme-gradient: linear-gradient(125deg, #11554d, #1e8171 52%, #ae8432); --theme-hero-overlay: linear-gradient(105deg, rgba(7, 53, 47, .9), rgba(20, 111, 96, .46), rgba(177, 137, 51, .12)); --theme-radius: 8px; --theme-card-shadow: 0 14px 30px rgba(42, 75, 54, .1); --theme-pattern: radial-gradient(circle at 15% 20%, rgba(198,155,60,.12), transparent 24%), repeating-linear-gradient(45deg, rgba(20,114,105,.035) 0 1px, transparent 1px 14px); }
/* Masjid Future: glassmorphism, electric accents and a professional tech edge. */
:root[data-theme="masjid-future"] { --ink: #eef5ff; --teal: #54d8e7; --mint: #1b3155; --paper: #081225; --line: #2b4f7c; --white: #10203a; --muted: #aec1db; --amber: #e8bd62; --theme-gradient: linear-gradient(125deg, #0a1b3d, #1858a6 52%, #684ec2); --theme-hero-overlay: linear-gradient(105deg, rgba(4, 15, 40, .94), rgba(17, 74, 150, .48), rgba(95, 63, 184, .2)); --theme-radius: 13px; --theme-card-shadow: 0 22px 46px rgba(2, 11, 30, .45); --theme-glow: 0 0 30px rgba(75, 204, 239, .17); --theme-surface-gradient: linear-gradient(145deg, #142c4c, #111d36); }
:root[data-theme="masjid-future"] .card, :root[data-theme="masjid-future"] .home-feature, :root[data-theme="masjid-future"] .home-programs, :root[data-theme="masjid-future"] .home-gallery { backdrop-filter: blur(12px); border-color: rgba(92, 201, 239, .36); }
:root[data-theme="royal-madinah"] .nav button.active { background: transparent; color: var(--teal); box-shadow: inset 0 -2px 0 var(--amber); border-radius: 0; }
:root[data-theme="sahara-sunset"] .home-shortcuts { background: linear-gradient(120deg, #6e3428, #c16b3f 60%, #e2a34e); }
:root[data-theme="sky-turquoise"] .nav button.active { background: rgba(255,255,255,.7); box-shadow: 0 5px 14px rgba(24,143,165,.14); }
:root[data-theme="purple-ramadan"] .nav button.active { background: linear-gradient(135deg, #7d43a4, #b34f8f); color: #fff; }
:root[data-theme="modern-minimal"] .topbar { box-shadow: none; }
:root[data-theme="modern-minimal"] .nav button.active { background: var(--ink); color: #fff; }
:root[data-theme="night-mosque"] .home-feature, :root[data-theme="night-mosque"] .home-programs, :root[data-theme="night-mosque"] .home-gallery { border-color: rgba(100,196,194,.35); }
:root[data-theme="islamic-art"] .section-head, :root[data-theme="islamic-art"] .home-section-heading { background-image: linear-gradient(90deg, color-mix(in srgb, var(--amber) 55%, transparent), transparent 70%); background-repeat: no-repeat; background-position: left bottom; background-size: 100% 1px; }
:root[data-theme="masjid-future"] .nav button.active { background: rgba(84,216,231,.15); color: var(--teal); box-shadow: inset 0 0 0 1px rgba(84,216,231,.4), 0 0 14px rgba(84,216,231,.14); }

.theme-settings { margin: 4px 0 8px; }
.theme-option-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.theme-option {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 10px;
  text-align: left;
  color: var(--ink);
  background: var(--theme-surface);
  border: 1px solid var(--line);
  border-radius: var(--theme-radius);
  box-shadow: 0 5px 16px color-mix(in srgb, var(--ink) 7%, transparent);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.theme-option:hover, .theme-option:focus-visible { transform: translateY(-2px); border-color: var(--teal); box-shadow: var(--theme-card-shadow); outline: 0; }
.theme-option.selected { border: 2px solid var(--teal); padding: 9px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 15%, transparent), var(--theme-card-shadow); }
.theme-option-copy { min-width: 0; display: grid; gap: 4px; }
.theme-option-copy strong { font-size: 14px; line-height: 1.2; }
.theme-option-copy small { color: var(--muted); font-size: 11px; line-height: 1.4; }
.theme-option-check { color: var(--teal); display: grid; place-items: center; }
.theme-option-check svg { width: 18px; height: 18px; }
.theme-preview-notice { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0 0 14px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--teal) 42%, var(--line)); border-radius: var(--theme-radius); background: var(--theme-surface-2); color: var(--ink); }
.theme-preview-notice .btn { flex: none; padding: 9px 12px; }
.theme-mini-preview { position: relative; display: block; width: 132px; aspect-ratio: 16/10; overflow: hidden; border-radius: calc(var(--theme-radius) * .7); background: var(--swatch-primary); box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); }
.theme-mini-preview i { position: absolute; display: block; }
.theme-mini-preview .mini-topbar { inset: 0 0 auto; height: 17%; background: color-mix(in srgb, var(--swatch-primary) 68%, #fff); }
.theme-mini-preview .mini-hero { left: 8%; right: 8%; top: 27%; height: 36%; border-radius: 5px; background: linear-gradient(135deg, var(--swatch-primary), var(--swatch-accent)); }
.theme-mini-preview .mini-card { bottom: 10%; width: 35%; height: 17%; border-radius: 3px; background: color-mix(in srgb, var(--swatch-accent) 28%, #fff); }
.theme-mini-preview .mini-card-a { left: 8%; }
.theme-mini-preview .mini-card-b { right: 8%; }
@media (max-width: 760px) {
  .theme-option-grid { grid-template-columns: 1fr; }
  .theme-option { grid-template-columns: 116px minmax(0, 1fr) 22px; }
  .theme-mini-preview { width: 116px; }
  .theme-preview-notice { align-items: stretch; flex-direction: column; }
}

@media (prefers-reduced-motion: no-preference) {
  :root[data-theme] .home-hero,
  :root[data-theme] .home-shortcuts { transition: box-shadow .25s ease, border-radius .25s ease; }
}
@media (max-width: 900px) {
  :root[data-theme] .topbar { padding-inline: 16px; }
  :root[data-theme] .nav { gap: 2px; }
  :root[data-theme] .home-hero { border-radius: var(--theme-radius); }
}
@media (max-width: 600px) {
  :root[data-theme] .top-actions { gap: 4px; }
  :root[data-theme] .header-select { padding-inline: 5px; }
  :root[data-theme] .header-select select { max-width: 66px; }
  :root[data-theme] .home-feature, :root[data-theme] .card { border-radius: var(--theme-radius); }
}
@media (max-width: 900px) {
  .module-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 620px) {
  .module-grid {
    grid-template-columns: 1fr;
  }
  .module-page {
    padding-inline: 14px;
  }
  .article-detail {
    padding: 16px;
  }
  .calendar-nav {
    flex-wrap: wrap;
  }
  .prayer-monthly-page .section-head {
    align-items: flex-start;
    gap: 14px;
    flex-direction: column;
  }
}
.home-hero.home-hero-without-prayer {
  grid-template-columns: minmax(0, 720px);
}
.home-feature-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.home-bottom-grid > section:only-child {
  grid-column: 1/-1;
}

.live-public-page {
  max-width: 1180px;
}
.live-public-page .headline {
  font-size: 68px;
  letter-spacing: 0;
}
.live-stage {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}
.live-stage-active {
  position: relative;
  background: #10231f;
  color: #fff;
}
.live-stage-active .youtube-frame {
  border-radius: 0;
}
.live-badge {
  position: absolute;
  z-index: 2;
  top: 14px;
  left: 14px;
  display: flex;
  align-items: center;
  gap: 7px;
  border-radius: 5px;
  padding: 7px 10px;
  background: #b42318;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.live-badge span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.2);
}
.live-stage-copy {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  padding: 24px;
}
.live-stage-copy > div:first-child {
  min-width: 0;
  max-width: 760px;
}
.live-stage-copy h2,
.live-state-panel h2,
.replay-detail h1 {
  font-family: Newsreader, serif;
  letter-spacing: 0;
}
.live-stage-copy h2 {
  font-size: 32px;
  margin: 0 0 8px;
}
.live-stage-copy p {
  color: #d7e5df;
  line-height: 1.65;
  margin: 12px 0;
}
.live-stage-copy small {
  color: #9eb9af;
}
.live-player-actions {
  flex: none;
}
.live-stage-active .btn-ghost {
  border-color: #527068;
  color: #fff;
}
.live-admin-actions {
  padding: 0 24px 24px;
}
.live-meta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  color: #597068;
  font-size: 13px;
}
.live-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.live-meta svg {
  width: 15px;
  height: 15px;
}
.live-stage-active .live-meta {
  color: #b8cdc5;
}
.live-state-panel {
  min-height: 330px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 26px;
  padding: 38px;
  background: #f7faf8;
}
.live-state-icon {
  width: 76px;
  height: 76px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: #e1eee8;
  color: #087358;
}
.live-state-icon svg {
  width: 34px;
  height: 34px;
}
.live-state-panel h2 {
  font-size: 38px;
  margin: 8px 0;
}
.live-state-panel p {
  max-width: 640px;
  color: var(--muted);
  line-height: 1.65;
}
.live-state-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #087358;
}
.live-state-upcoming {
  background: #fff9e8;
}
.live-state-upcoming .live-state-label {
  color: #916100;
}
.live-state-thumbnail {
  width: 220px;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 7px;
}
.live-countdown {
  display: block;
  margin-top: 18px;
  font-size: 24px;
  font-variant-numeric: tabular-nums;
  color: #6b4c00;
}
.live-state-unavailable .live-state-icon {
  background: #fce9e7;
  color: #b42318;
}
.live-state-ended .live-state-icon {
  background: #e9eef0;
  color: #496168;
}
.replay-public-grid {
  grid-template-columns: repeat(3, minmax(240px, 1fr));
}
.replay-public-card {
  padding: 0;
  overflow: hidden;
  position: relative;
}
.replay-public-media {
  position: relative;
  aspect-ratio: 16/9;
  background: #eaf0ec;
}
.replay-public-media > img,
.replay-public-media > .no-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.replay-play {
  position: absolute;
  left: 16px;
  bottom: 14px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #e5b20b;
  color: #2f260e;
}
.replay-play svg {
  width: 19px;
  height: 19px;
}
.replay-public-copy {
  padding: 18px;
}
.replay-public-copy h2 {
  font-family: Newsreader, serif;
  font-size: 25px;
  letter-spacing: 0;
  margin: 6px 0 10px;
}
.replay-public-copy p {
  line-height: 1.55;
  margin: 8px 0;
}
.replay-public-card > .home-edit-controls {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
}
.replay-detail {
  max-width: 940px;
  margin: 22px auto;
}
.replay-detail .youtube-frame {
  border-radius: 8px;
}
.replay-detail-copy {
  padding: 28px 4px;
}
.replay-detail-copy .headline {
  font-size: 64px;
  margin: 12px 0;
}
.replay-detail-copy > p {
  line-height: 1.75;
  max-width: 760px;
}
.replay-detail-copy > small {
  color: var(--muted);
}
.content-preview-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(7, 27, 23, 0.72);
}
.content-preview-dialog {
  width: min(100%, 760px);
  max-height: calc(100vh - 36px);
  overflow: auto;
  border-radius: 8px;
  background: #fff;
  padding: 22px;
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.32);
}
.content-preview-dialog h2 {
  font-size: 28px;
  margin: 5px 0;
  letter-spacing: 0;
}
.content-preview-dialog .youtube-frame,
.content-preview-dialog .module-image,
.content-preview-dialog > .no-image {
  margin: 10px 0 18px;
  border-radius: 7px;
  max-height: 420px;
}
.content-preview-copy {
  display: grid;
  gap: 10px;
  margin: 8px 0 18px;
}
.content-preview-copy p {
  line-height: 1.65;
  margin: 0;
}
@media (max-width: 900px) {
  .replay-public-grid {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
  }
  .live-state-panel {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .live-state-panel .live-admin-actions {
    grid-column: 1/-1;
    padding: 0;
  }
  .live-state-thumbnail {
    width: 180px;
  }
}
@media (max-width: 620px) {
  .live-public-page .headline {
    font-size: 44px;
  }
  .replay-detail-copy .headline {
    font-size: 40px;
  }
  .live-public-page .section-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .live-public-page .library-tabs {
    width: 100%;
    overflow-x: auto;
  }
  .live-stage-copy {
    align-items: flex-start;
    flex-direction: column;
    padding: 18px;
  }
  .live-player-actions,
  .live-player-actions .btn {
    width: 100%;
  }
  .live-state-panel {
    min-height: 300px;
    grid-template-columns: 1fr;
    padding: 24px 18px;
  }
  .live-state-icon {
    width: 60px;
    height: 60px;
  }
  .live-state-panel h2 {
    font-size: 30px;
  }
  .live-state-thumbnail {
    width: 100%;
    max-width: none;
  }
  .live-countdown {
    font-size: 20px;
  }
  .live-admin-actions {
    padding: 0 18px 18px;
  }
  .replay-public-grid {
    grid-template-columns: 1fr;
  }
  .replay-detail-copy {
    padding-inline: 0;
  }
  .content-preview-dialog {
    padding: 16px;
  }
  .content-preview-dialog .section-head {
    align-items: flex-start;
  }
  .content-preview-dialog h2 {
    font-size: 23px;
  }
}