/* Masjid Service — gaya premium bersama (emerald / emas)
   Tema dipilih dengan data-theme="<nama>" pada <html>.
   Tema: zamrud, biru-malam, marun, teal, hitam-emas.
   Laman awam premium (hero, jam live, grid solat) + Paparan TV 1920x1080. */

:root {
  --gold: #c9a227;
  --gold-soft: #e6c65c;
  --danger: #b91c1c;
  --danger-bg: #fef2f2;
  --success: #15803d;
  --success-bg: #f0fdf4;
  --radius: 14px;
  --shadow: 0 8px 24px rgba(0, 0, 0, .08);
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: Georgia, "Times New Roman", serif;
}

html[data-theme="zamrud"], html:not([data-theme]) {
  --primary: #0b6b4f;
  --primary-dark: #084d39;
  --primary-soft: #e6f4ee;
  --bg: #f7f5ef;
  --surface: #ffffff;
  --text: #1c2420;
  --muted: #6b7280;
  --border: #e3ddd0;
  --on-primary: #ffffff;
}

html[data-theme="biru-malam"] {
  --primary: #0f2440;
  --primary-dark: #0a1829;
  --primary-soft: #e8eef7;
  --bg: #f3f5f8;
  --surface: #ffffff;
  --text: #16202e;
  --muted: #64748b;
  --border: #dbe2ec;
  --on-primary: #ffffff;
}

html[data-theme="marun"] {
  --primary: #6d1a2d;
  --primary-dark: #4d1220;
  --primary-soft: #f9e9ec;
  --bg: #faf5f4;
  --surface: #ffffff;
  --text: #26161a;
  --muted: #7a6a6e;
  --border: #ead9dc;
  --on-primary: #ffffff;
}

html[data-theme="teal"] {
  --primary: #0f766e;
  --primary-dark: #0a5751;
  --primary-soft: #e6f5f3;
  --bg: #f4f8f7;
  --surface: #ffffff;
  --text: #172624;
  --muted: #5f7370;
  --border: #d8e6e3;
  --on-primary: #ffffff;
}

html[data-theme="hitam-emas"] {
  --primary: #141414;
  --primary-dark: #000000;
  --primary-soft: #f0ead6;
  --bg: #f5f3ee;
  --surface: #ffffff;
  --text: #1a1a1a;
  --muted: #6b6b6b;
  --border: #e0dccf;
  --on-primary: #f5d76e;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
}

h1, h2, h3, .display {
  font-family: var(--font-display);
  color: var(--primary);
  line-height: 1.25;
  margin: 0 0 .5rem;
}

a { color: var(--primary); }
a:hover { color: var(--primary-dark); }

.container { max-width: 1080px; margin: 0 auto; padding: 0 16px 48px; }

/* ---------- Header ---------- */
.site-header {
  background: var(--primary);
  color: var(--on-primary);
  padding: 18px 0;
  border-bottom: 3px solid var(--gold);
}
.site-header .container { padding-bottom: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; justify-content: space-between; }
.site-header h1 { color: var(--on-primary); margin: 0; font-size: 1.6rem; }
.site-header .tagline { color: rgba(255, 255, 255, .85); margin: 0; font-size: .95rem; }
.brand-mark {
  display: inline-flex; align-items: center; gap: 10px;
}
.brand-mark .crescent {
  width: 42px; height: 42px; border-radius: 50%;
  border: 2px solid var(--gold); display: grid; place-items: center;
  font-size: 1.3rem; color: var(--gold); flex: none;
}
.header-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Hero premium (laman awam) ---------- */
.hero {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
  margin-top: 20px;
}
.hero h2 { font-size: 1.9rem; }
.hero .meta { color: var(--muted); margin: 4px 0 0; }

.hero-premium {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  border: none;
  border-top: 4px solid var(--gold);
  color: var(--on-primary);
  padding: 28px;
}
.hero-premium .hero-main {
  display: flex; flex-wrap: wrap; gap: 24px;
  align-items: flex-start; justify-content: space-between;
}
.hero-premium .hero-identity { flex: 1 1 420px; min-width: 260px; }
.hero-premium .hero-eyebrow {
  margin: 0 0 6px; color: var(--gold-soft);
  font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .85rem;
}
.hero-premium .hero-name {
  color: var(--gold-soft); font-size: 2.6rem; line-height: 1.1; margin: 0 0 8px;
}
.hero-premium .meta { color: rgba(255, 255, 255, .85); }
.hero-premium .hero-tagline { font-size: 1.05rem; color: rgba(255, 255, 255, .9); }
.hero-clock-box {
  text-align: right; flex: none;
  border-left: 2px solid rgba(255, 255, 255, .25); padding-left: 24px;
}
.hero-clock {
  font-family: var(--font-display); font-size: 3rem; font-weight: 700;
  color: var(--gold-soft); line-height: 1; font-variant-numeric: tabular-nums;
}
.hero-dates { color: rgba(255, 255, 255, .9); margin-top: 8px; font-size: 1rem; }
.hero-dates .hero-hijri { color: var(--gold-soft); }
.hero-premium .next-prayer {
  background: rgba(255, 255, 255, .1); border-color: var(--gold);
  margin-top: 20px;
}
.hero-premium .next-prayer .np-label,
.hero-premium .next-prayer .np-time { color: var(--gold-soft); }
.hero-premium .next-prayer .countdown { color: #fff; }
.hero-premium .btn-row { margin-top: 20px; }

.site-footer {
  border-top: 3px solid var(--gold);
  background: var(--primary); color: rgba(255, 255, 255, .85);
  margin-top: 32px; padding: 20px 0 8px;
}
.site-footer .container { padding-bottom: 0; }
.site-footer p { margin: 0 0 8px; }
.site-footer strong { color: var(--gold-soft); }
.site-footer .hint { color: rgba(255, 255, 255, .6); }

.mosque-picker { margin-top: 20px; }
.mosque-picker select { max-width: 520px; }

/* ---------- Kad / grid ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  margin-top: 20px;
}
.card h2, .card h3 { margin-top: 0; }
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

.stat { text-align: left; }
.stat .label { color: var(--muted); font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; }
.stat .value { font-family: var(--font-display); font-size: 1.7rem; color: var(--primary); font-weight: 700; }
.stat .value.income { color: var(--success); }
.stat .value.expense { color: var(--danger); }

/* ---------- Butang ---------- */
.btn {
  display: inline-block; cursor: pointer;
  background: var(--primary); color: var(--on-primary);
  border: 1px solid var(--primary); border-radius: 10px;
  padding: 10px 18px; font-size: 1rem; text-decoration: none;
  font-family: var(--font-body);
}
.btn:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: var(--on-primary); }
.btn-gold { background: var(--gold); border-color: var(--gold); color: #1a1a1a; font-weight: 600; }
.btn-gold:hover { background: var(--gold-soft); border-color: var(--gold-soft); color: #1a1a1a; }
.btn-outline { background: transparent; color: var(--primary); }
.btn-outline:hover { background: var(--primary-soft); color: var(--primary-dark); }
.hero-premium .btn-outline { color: #fff; border-color: rgba(255, 255, 255, .6); }
.hero-premium .btn-outline:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.hero-premium .btn:not(.btn-gold):not(.btn-outline) { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .4); }
.hero-premium .btn:not(.btn-gold):not(.btn-outline):hover { background: rgba(255, 255, 255, .25); }
.btn-light { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .4); color: #fff; }
.btn-light:hover { background: rgba(255, 255, 255, .25); color: #fff; }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger:hover { background: #991b1b; }
.btn-sm { padding: 6px 12px; font-size: .9rem; border-radius: 8px; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }

/* ---------- Borang ---------- */
form label { display: block; font-weight: 600; margin: 12px 0 4px; font-size: .95rem; }
input, select, textarea {
  width: 100%; padding: 10px 12px; font-size: 1rem;
  border: 1px solid var(--border); border-radius: 10px;
  background: #fff; color: var(--text); font-family: var(--font-body);
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--primary);
}
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 16px; }
.form-grid .full { grid-column: 1 / -1; }
.hint { color: var(--muted); font-size: .88rem; margin-top: 4px; }
.required { color: var(--danger); }

/* ---------- Jadual ---------- */
.table-wrap { overflow-x: auto; margin-top: 12px; }
table { width: 100%; border-collapse: collapse; font-size: .95rem; }
th, td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
th { background: var(--primary-soft); color: var(--primary); font-weight: 700; white-space: nowrap; }
tbody tr:hover { background: rgba(0, 0, 0, .02); }
td.num, th.num { text-align: right; white-space: nowrap; }
.amount-in { color: var(--success); font-weight: 700; }
.amount-out { color: var(--danger); font-weight: 700; }
.empty { color: var(--muted); padding: 16px 0; }

/* ---------- Lencana / status ---------- */
.badge {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: .8rem; font-weight: 700; letter-spacing: .03em;
  background: var(--primary-soft); color: var(--primary);
  border: 1px solid var(--border); white-space: nowrap;
}
.badge-gold { background: #fdf6d8; color: #7a5c00; border-color: var(--gold); }
.badge-demo { background: #fff7cc; color: #854d0e; border-color: var(--gold); }
.badge-danger { background: var(--danger-bg); color: var(--danger); border-color: #fecaca; }
.badge-success { background: var(--success-bg); color: var(--success); border-color: #bbf7d0; }
.badge-muted { background: #f3f4f6; color: var(--muted); }

/* ---------- Mesej / toast ---------- */
.alert {
  border-radius: 10px; padding: 12px 16px; margin-top: 16px;
  border: 1px solid; font-size: .95rem;
}
.alert-error { background: var(--danger-bg); border-color: #fecaca; color: #7f1d1d; }
.alert-success { background: var(--success-bg); border-color: #bbf7d0; color: #14532d; }
.alert-info { background: var(--primary-soft); border-color: var(--border); color: var(--primary-dark); }
#toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  background: #1f2937; color: #fff; padding: 12px 20px; border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .3); z-index: 100;
  max-width: 90vw; text-align: center; display: none;
}
#toast.show { display: block; }
#toast.error { background: var(--danger); }
#toast.success { background: var(--success); }

/* ---------- Waktu solat (laman awam) ---------- */
.prayer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin-top: 16px; }
.prayer-cell {
  border: 1px solid var(--border); border-radius: 12px; padding: 14px 10px;
  text-align: center; background: var(--bg);
}
.prayer-cell .prayer-name { font-size: .85rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.prayer-cell .prayer-time { font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; color: var(--primary); }
.prayer-cell .prayer-iqamah { font-size: .8rem; color: var(--muted); margin-top: 2px; }
.prayer-cell.next {
  background: var(--primary); border-color: var(--gold);
  box-shadow: 0 0 0 2px var(--gold);
}
.prayer-cell.next .prayer-name, .prayer-cell.next .prayer-time { color: #fff; }
.prayer-cell.next .prayer-iqamah { color: var(--gold-soft); }
.next-prayer {
  display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: baseline;
  background: var(--primary-soft); border: 1px solid var(--gold);
  border-radius: 12px; padding: 14px 18px; margin-top: 16px;
}
.next-prayer .np-label { font-weight: 700; color: var(--primary); }
.next-prayer .np-time { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--primary); }
.countdown { font-variant-numeric: tabular-nums; font-weight: 700; }

/* ---------- Infaq ---------- */
.progress { height: 18px; background: #e5e7eb; border-radius: 999px; overflow: hidden; margin-top: 8px; }
.progress > span { display: block; height: 100%; background: linear-gradient(90deg, var(--primary), var(--gold)); }
.infaq-numbers { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 8px; font-size: .95rem; }

/* ---------- Pengumuman ---------- */
.announce { border-left: 4px solid var(--gold); background: var(--bg); padding: 12px 16px; border-radius: 0 10px 10px 0; margin-top: 12px; }
.announce h4 { margin: 0 0 4px; font-family: var(--font-display); color: var(--primary); }
.announce p { margin: 0; }
.announce .date { color: var(--muted); font-size: .85rem; }

/* ---------- Log masuk ---------- */
.login-wrap { max-width: 460px; margin: 40px auto 0; }
.login-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 28px; }
.login-card h1 { text-align: center; }
.login-card .sub { text-align: center; color: var(--muted); margin-bottom: 8px; }
.demo-box {
  background: #fffbeb; border: 1px dashed var(--gold); border-radius: 10px;
  padding: 12px 16px; margin-top: 20px; font-size: .92rem;
}
.demo-box strong { color: #854d0e; }
.demo-box code { background: #fef3c7; padding: 1px 6px; border-radius: 6px; }
.admin-note {
  background: var(--primary); color: #fff; border-radius: 10px;
  padding: 12px 16px; margin-top: 16px; font-size: .92rem; text-align: center;
}
.admin-note strong { color: var(--gold-soft); }
.center { text-align: center; }
.mt { margin-top: 20px; }

/* ---------- Dashboard (sidebar) ---------- */
.layout { display: flex; min-height: 100vh; }
.sidebar {
  width: 250px; flex: none; background: var(--primary); color: #fff;
  padding: 20px 0; display: flex; flex-direction: column; gap: 4px;
}
.sidebar .brand { padding: 0 20px 16px; border-bottom: 1px solid rgba(255, 255, 255, .2); margin-bottom: 12px; }
.sidebar .brand h2 { color: #fff; margin: 0; font-size: 1.25rem; }
.sidebar .brand small { color: rgba(255, 255, 255, .75); }
.sidebar a.nav-link {
  display: block; padding: 11px 20px; color: rgba(255, 255, 255, .9);
  text-decoration: none; border-left: 3px solid transparent; cursor: pointer;
}
.sidebar a.nav-link:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.sidebar a.nav-link.active { background: rgba(255, 255, 255, .12); border-left-color: var(--gold); color: #fff; font-weight: 700; }
.sidebar .logout-link { margin-top: auto; }
.main { flex: 1; min-width: 0; padding: 20px 24px 48px; }
.topbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.topbar h1 { margin: 0; }
.section { display: none; }
.section.active { display: block; }
.user-chip { font-size: .9rem; color: var(--muted); }

/* ---------- Paparan TV — gaya MASAJID SIGNATURE, kanvas tetap 1920x1080 ----------
   Rujukan: skrin langsung MASJID AR-RAUDHAH (my.masaj.id, 14 Nov 2026).
   GEOMETRI (kanvas 1920x1080, disahkan):
   - Panel kiri: left 24px, width 600px -> tepi kanan panel x=624.
   - Jam analog: left 600px, 380px -> tepi kiri jam x=600; bertindih 24px
     ke atas zon sempadan panel sahaja (624-600), bukan ke atas teks.
   - Teks masa tamat: panel padding kanan 44px + row padding kanan 12px ->
     x=624-44-12=568. Jurang selamat = 600-568 = 32px.
   - Panel bawah: bottom 140px -> tepi bawah panel y=940. Butang kawalan
     bottom 84px, tinggi ~40px -> atas butang y=956, iaitu 16px di bawah
     panel dan 64px di atas ticker (ticker atas y=1020). Nota sumber JAKIM
     di kaki panel (dalam panel) tidak dilindungi butang. */
.tv-body { background: #081426; color: #f5f5f0; overflow: hidden; }
.tv-body[data-theme="zamrud"] { background: #0a0f0d; }
.tv-body[data-theme="marun"] { background: #1c0a10; }
.tv-body[data-theme="teal"] { background: #062e2b; }
.tv-body[data-theme="hitam-emas"] { background: #000; }

.tv-page-error { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 200; margin: 0; max-width: 90vw; }

/* Kanvas 1920x1080, berpusat, diskalakan oleh fitTV() */
.tv-canvas {
  position: fixed; left: 50%; top: 50%;
  width: 1920px; height: 1080px;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  overflow: hidden;
  background: linear-gradient(160deg, #0d1f3c 0%, #081426 55%, #050d1a 100%);
  font-size: 16px;
}
.tv-body[data-theme="zamrud"] .tv-canvas { background: linear-gradient(160deg, #0d3b2c 0%, #0a0f0d 55%, #050807 100%); }
.tv-body[data-theme="marun"] .tv-canvas { background: linear-gradient(160deg, #3d1420 0%, #1c0a10 55%, #12060a 100%); }
.tv-body[data-theme="teal"] .tv-canvas { background: linear-gradient(160deg, #0c4a44 0%, #062e2b 55%, #041f1d 100%); }
.tv-body[data-theme="hitam-emas"] .tv-canvas { background: linear-gradient(160deg, #1a1a1a 0%, #000 60%, #000 100%); }

/* Latar foto masjid sebenar + lapisan gelap supaya teks jelas dibaca.
   Foto: assets/masjid-ar-raudhah.jpg (foto udara sebenar Ar-Raudhah,
   681x436 — lembut bila diregang ke 1920x1080, jadi lapisan gelap di
   atasnya dikekalkan supaya teks jelas). Fail stand-in lama
   assets/tv-bg.jpg (Shah Alam) dikekalkan sebagai sandaran, bukan
   dipadam. Tiada hotlink aset MASAJID. Jika foto gagal dimuat,
   gradien di bawah tetap kaya. */
.tv-bg {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(3, 8, 20, .58) 0%, rgba(3, 8, 20, .14) 26%, rgba(3, 8, 20, .26) 60%, rgba(3, 8, 20, .72) 100%),
    linear-gradient(100deg, rgba(3, 8, 20, .90) 0%, rgba(3, 8, 20, .70) 32%, rgba(3, 8, 20, .24) 55%, rgba(3, 8, 20, .38) 78%, rgba(3, 8, 20, .62) 100%),
    url(assets/masjid-ar-raudhah.jpg) center 38%/cover no-repeat,
    linear-gradient(160deg, #0d1f3c 0%, #081426 55%, #050d1a 100%);
}

/* Corak geometri Islam 8 penjuru (bintang khatam) — halus, emas, atas foto */
.tv-pattern {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='132' height='132' viewBox='0 0 132 132'%3E%3Cg fill='none' stroke='%23c9a227' stroke-width='1'%3E%3Crect x='41' y='41' width='50' height='50'/%3E%3Crect x='41' y='41' width='50' height='50' transform='rotate(45 66 66)'/%3E%3Ccircle cx='66' cy='66' r='5'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 132px 132px;
  opacity: .08;
}

/* Bingkai emas TEBAL luar (overlay — tidak ubah geometri 1920x1080),
   sudut membulat, gaya MASAJID. Meliputi seluruh skrin termasuk ticker. */
.tv-frame {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 45;
  border: 10px solid #c9a227;
  border-radius: 26px;
  box-shadow: inset 0 0 0 2px rgba(246, 220, 125, .55), inset 0 0 0 3px rgba(0, 0, 0, .35);
}
.tv-frame::after {
  content: ""; position: absolute; inset: 8px;
  border: 1px solid rgba(246, 220, 125, .45);
  border-radius: 16px;
}

/* Panel waktu solat kiri — 600px, biru diraja + tekstur titik halus.
   Padding kanan 44px + padding baris 12px: teks masa tamat di x=568,
   jam analog di x=640 — jurang selamat 72px (64px pada baris 'next'
   yang melebar 8px). Pil iqamah kini DI BAWAH masa (bukan sebaris),
   supaya lajur masa cuma ~205px lebar dan nama panjang (Zohor,
   Maghrib) tidak lagi ditindih masa — bug 14 Nov 2026, skrin Vin. */
.tv-panel {
  position: absolute; left: 24px; top: 24px; bottom: 140px; width: 600px;
  background:
    radial-gradient(rgba(255, 255, 255, .13) 1px, transparent 1.5px),
    linear-gradient(165deg, var(--tv-primary, #123a7d) 0%, var(--tv-primary-dark, #0d2a5e) 55%, var(--tv-primary-darker, #0a1f4d) 100%);
  background-size: 14px 14px, cover;
  border: 1px solid rgba(201, 162, 39, .55);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .14);
  padding: 24px 44px 18px 26px;
  display: flex; flex-direction: column; z-index: 3;
}
.tv-panel-head {
  font-family: var(--font-body); font-size: 26px; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; color: var(--gold-soft);
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(201, 162, 39, .4); margin-bottom: 6px;
}
.tv-prayer-list { flex: 1; display: flex; flex-direction: column; justify-content: space-evenly; }
.tv-prayer-row {
  display: flex; align-items: center; gap: 16px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
}
.tv-prayer-row:last-child { border-bottom: none; }
/* Ikon garis putih (SVG stroke) — gaya MASAJID, tanpa bulatan emas */
.tv-prayer-icon {
  width: 52px; height: 52px; flex: none;
  display: flex; align-items: center; justify-content: center;
}
.tv-prayer-icon svg { width: 46px; height: 46px; display: block; }
.tv-prayer-names { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.tv-prayer-name { font-size: 32px; font-weight: 700; color: #fff; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-prayer-times { display: block; text-align: right; flex: none; }
.tv-prayer-time {
  font-family: Arial, Helvetica, sans-serif; font-size: 64px; font-weight: 700;
  color: #fff; line-height: 1; font-variant-numeric: tabular-nums;
}
.tv-prayer-ampm {
  font-family: Arial, Helvetica, sans-serif; font-size: 22px; font-weight: 700;
  color: rgba(255, 255, 255, .85); margin-left: 6px; vertical-align: top;
  line-height: 1.4;
}
/* Pil iqamah biru gelap kecil DI BAWAH masa (gaya MASAJID) — display
   block + margin auto kanan supaya ia baris sendiri, dijajar kanan.
   Sebelum ini inline sebaris masa: lajur masa jadi ~400px lebar,
   nama solat tersepit dan masa menindih nama (Zohor, Maghrib). */
.tv-prayer-iqamah {
  display: block; width: fit-content; margin: 6px 0 0 auto;
  font-size: 19px; font-weight: 600; color: #fff;
  background: #081c44;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px; padding: 3px 14px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.tv-prayer-row.next {
  background: linear-gradient(90deg, rgba(201, 162, 39, .32), rgba(201, 162, 39, .12));
  border: 1px solid var(--gold); border-radius: 12px;
  box-shadow: 0 0 0 1px var(--gold), 0 0 26px rgba(201, 162, 39, .35);
  padding-left: 12px; padding-right: 12px;
  margin-left: -8px; margin-right: -8px;
}
.tv-prayer-row.next .tv-prayer-name { color: var(--gold-soft); }
.tv-prayer-row.next .tv-prayer-time { color: var(--gold-soft); }
.tv-prayer-row.next .tv-prayer-ampm { color: var(--gold-soft); }
.tv-prayer-row.next .tv-prayer-iqamah { background: #5c4a08; border-color: var(--gold-soft); color: #fff; }
.tv-panel-foot {
  font-size: 17px; color: rgba(255, 255, 255, .55); text-align: center;
  padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .18);
}

/* Jam analog 360px — tepi kiri x=640 (bukan 600): teks solat tamat di
   x=568 (576 baris 'next'), jurang selamat 72px (64px 'next') — melebihi
   syarat minimum 40px. Pusat (820, 480); tidak sentuh panel, identiti
   (x≥1160), slaid (x≥1220) atau pil kira detik. */
.tv-clock-wrap {
  position: absolute; left: 640px; top: 300px;
  width: 360px; height: 360px; z-index: 5;
}
/* Cahaya emas lembut di belakang jam — isi ruang tengah */
.tv-clock-wrap::before {
  content: ""; position: absolute; left: -60px; top: -60px;
  width: 480px; height: 480px; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, rgba(201, 162, 39, .26) 0%, rgba(201, 162, 39, .10) 45%, rgba(201, 162, 39, 0) 70%);
}
.tv-clock-wrap .analog-wrap { width: 360px; height: 360px; }
.analog-wrap svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .45)); }
.tv-digital-hidden { display: none; }

/* Identiti masjid atas kanan — MASJID emas + nama putih, sans-serif tebal.
   Latar gelap lut sinar di belakang seluruh blok supaya nama/alamat/
   tarikh terbaca atas mana-mana bahagian foto (menara pernah memotong
   baris alamat — bug 14 Nov 2026). Nama 54px + nowrap: "MASJID
   AR-RAUDHAH" muat satu baris (~580px dalam 720px). */
.tv-identity {
  position: absolute; right: 40px; top: 36px; width: 720px; text-align: right; z-index: 4;
  background: linear-gradient(90deg, rgba(3, 8, 20, 0) 0%, rgba(3, 8, 20, .62) 18%, rgba(3, 8, 20, .78) 100%);
  padding: 18px 24px 16px 48px; border-radius: 16px;
}
.tv-identity .tv-name-eyebrow {
  font-family: Arial, Helvetica, sans-serif; font-size: 40px; font-weight: 800;
  letter-spacing: .18em; color: #f6dc7d; line-height: 1.1;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .65);
}
.tv-identity h1 {
  font-family: Arial, Helvetica, sans-serif; font-size: 54px; font-weight: 800;
  letter-spacing: .02em; text-transform: uppercase; line-height: 1.05;
  color: #ffffff; white-space: nowrap;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .7);
  margin: 0 0 6px;
}
/* Pembahagi emas hiasan di bawah nama masjid */
.tv-identity h1::after {
  content: ""; display: block; width: 150px; height: 3px; margin: 12px 0 0 auto;
  background: linear-gradient(90deg, transparent, var(--gold));
  border-radius: 2px;
}
.tv-identity .tv-sub { color: rgba(255, 255, 255, .85); font-size: 26px; margin: 0; text-shadow: 0 2px 10px rgba(0, 0, 0, .8); }
.tv-identity .tv-meta { color: rgba(255, 255, 255, .75); font-size: 22px; margin: 2px 0 0; text-shadow: 0 2px 10px rgba(0, 0, 0, .8); }
/* Bar tarikh biru gelap bertitik hijau (gaya MASAJID) */
.tv-identity .tv-dates {
  margin-top: 14px; font-size: 24px; color: #fff;
  background: rgba(11, 35, 80, .92);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 10px; padding: 10px 18px;
  display: inline-flex; align-items: center; gap: 10px;
}
.tv-identity .tv-dates .tv-date-dot {
  width: 14px; height: 14px; flex: none; border-radius: 50%;
  background: #22c55e; box-shadow: 0 0 10px rgba(34, 197, 94, .9);
}
.tv-identity .tv-dates #tv-date-masihi { font-weight: 700; }
.tv-identity .tv-dates .tv-hijri { color: var(--gold-soft); }

/* Slaid kanan bawah — kaca gelap + aksen emas */
.tv-slide {
  position: absolute; right: 40px; bottom: 300px; width: 660px;
  background: linear-gradient(165deg, rgba(8, 20, 42, .78), rgba(4, 10, 24, .84));
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(201, 162, 39, .4); border-left: 4px solid var(--gold);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .1);
  padding: 18px 22px; min-height: 120px; z-index: 4;
}
.tv-slide h2 { color: var(--gold-soft); font-size: 26px; margin: 0 0 4px; }
.tv-slide p { font-size: 20px; color: rgba(255, 255, 255, .9); margin: 0; line-height: 1.45; }
.tv-slide .progress { background: rgba(255, 255, 255, .2); height: 12px; }

/* Pil kira detik kanan bawah (gaya MASAJID): segmen biru + segmen putih.
   Pembungkus .tv-next di bawah pil membawa baris iqamah kecil. */
.tv-next {
  position: absolute; right: 40px; bottom: 84px; width: 660px; z-index: 4;
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
}
.tv-countdown-pill {
  display: flex; width: 100%; overflow: hidden;
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .5), 0 0 32px rgba(201, 162, 39, .22);
  border: 1px solid var(--gold);
}
.tv-pill-blue {
  flex: 1; display: flex; align-items: center; gap: 14px;
  background: var(--tv-primary-dark, #0d2a5e); color: #fff;
  padding: 18px 22px;
}
.tv-pill-clock { display: flex; flex: none; }
.tv-pill-clock svg { display: block; }
.tv-next .tv-next-label { font-size: 26px; font-weight: 700; color: #fff; }
.tv-pill-white {
  flex: none; display: flex; align-items: baseline; gap: 16px;
  background: #ffffff; padding: 18px 26px;
}
.tv-next .np-time {
  font-family: Arial, Helvetica, sans-serif; font-size: 40px; font-weight: 800;
  color: #111111; line-height: 1; font-variant-numeric: tabular-nums;
}
.tv-next .countdown {
  font-family: Arial, Helvetica, sans-serif; font-size: 40px; font-weight: 800;
  color: #111111; line-height: 1; font-variant-numeric: tabular-nums;
}
.tv-next .tv-iqamah {
  font-size: 21px; color: rgba(255, 255, 255, .85);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .8); text-align: right;
}

/* Kawalan bawah kiri — muncul bila tetikus bergerak sahaja.
   Atas butang y=956: 16px di bawah panel (y=940), di atas ticker. */
.tv-controls {
  position: absolute; left: 40px; bottom: 84px; z-index: 40;
  display: flex; gap: 10px;
  opacity: 0; pointer-events: none; transition: opacity .3s ease;
}
body.tv-show-controls .tv-controls { opacity: 1; pointer-events: auto; }
/* Fokus papan kekunci (Tab) juga menampakkan kawalan — tanpa ini butang
   tidak dapat dicapai langsung selagi tetikus tidak bergerak (butang
   kekal opacity:0 + pointer-events:none; automasi pelayar 14 Nov 2026
   gagal menekannya atas sebab ini). Kekal nampak selagi fokus di dalam. */
.tv-controls:focus-within { opacity: 1; pointer-events: auto; }
.tv-control-btn {
  display: inline-block; cursor: pointer; text-decoration: none;
  background: rgba(0, 0, 0, .55); color: rgba(255, 255, 255, .9);
  border: 1px solid rgba(255, 255, 255, .35); border-radius: 10px;
  padding: 8px 14px; font-size: 17px; font-family: var(--font-body);
}
.tv-control-btn:hover { background: rgba(0, 0, 0, .75); color: #fff; }

/* Petunjuk terapung — hilang sendiri selepas ~5 saat */
.tv-hint {
  position: absolute; left: 50%; bottom: 84px; transform: translateX(-50%);
  background: rgba(0, 0, 0, .55); color: rgba(255, 255, 255, .9);
  border-radius: 999px; padding: 10px 22px; font-size: 18px; z-index: 40;
  transition: opacity .8s ease; white-space: nowrap;
}
.tv-hint.hide { opacity: 0; pointer-events: none; }

/* Ticker HITAM bawah — 60px, teks putih bergerak */
.tv-ticker {
  position: absolute; left: 0; right: 0; bottom: 0; height: 60px; z-index: 30;
  background: #000000; border-top: 2px solid var(--gold);
  color: #fff; overflow: hidden; white-space: nowrap;
  display: flex; align-items: center; font-size: 24px;
}
.tv-ticker span { display: inline-block; padding-left: 100%; animation: ticker-scroll 40s linear infinite; }
@keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-100%); } }

/* ---------- Responsif ---------- */
@media (max-width: 820px) {
  .layout { flex-direction: column; }
  .sidebar { width: 100%; flex-direction: row; flex-wrap: wrap; padding: 10px; }
  .sidebar .brand { width: 100%; padding: 4px 10px 10px; }
  .sidebar a.nav-link { padding: 8px 12px; border-left: none; border-bottom: 2px solid transparent; }
  .sidebar a.nav-link.active { border-bottom-color: var(--gold); }
  .sidebar .logout-link { margin-top: 0; margin-left: auto; }
  .hero-premium .hero-name { font-size: 2rem; }
  .hero-clock-box { text-align: left; border-left: none; padding-left: 0; border-top: 1px solid rgba(255, 255, 255, .25); padding-top: 16px; width: 100%; }
  .hero-clock { font-size: 2.2rem; }
}

/* Paparan TV potret / skrin sempit: susun bertindan, boleh skrol.
   NOTA Fasa 1: syarat (orientation: portrait) dibuang — skrin potret
   LEBAR (>900px, cth. TV potret) kini memakai kanvas potret 1080x1920
   (lihat .tv-canvas[data-layout="vertical_*"] di bawah), bukan susun
   bertindan. Telefon potret (<900px) kekal bertindan. */
@media (max-width: 900px) {
  .tv-body { overflow: auto; }
  .tv-canvas {
    position: static; width: auto; height: auto; min-height: 100vh;
    transform: none !important; display: flex; flex-direction: column; gap: 16px;
    padding: 20px 16px 0;
  }
  .tv-panel, .tv-clock-wrap, .tv-identity, .tv-slide, .tv-next { position: static; width: auto; }
  .tv-panel { order: 2; }
  .tv-clock-wrap { order: 1; width: 300px; height: 300px; margin: 0 auto; }
  .tv-clock-wrap .analog-wrap { width: 300px; height: 300px; }
  .tv-identity { order: 0; text-align: center; }
  .tv-identity .tv-name-eyebrow { font-size: 1.4rem; }
  .tv-identity h1 { font-size: 2rem; }
  .tv-identity .tv-dates { font-size: 1rem; flex-wrap: wrap; justify-content: center; }
  .tv-slide { order: 3; min-height: 0; }
  .tv-next { order: 4; align-items: stretch; }
  .tv-next .np-time, .tv-next .countdown { font-size: 1.8rem; }
  .tv-prayer-time { font-size: 1.8rem; }
  .tv-prayer-ampm { font-size: .9rem; }
  .tv-prayer-name { font-size: 1.1rem; }
  .tv-controls { position: static; opacity: 1; pointer-events: auto; margin-bottom: 12px; }
  .tv-hint { display: none; }
  .tv-frame { display: none; }
  .tv-ticker { position: static; height: auto; padding: 10px 0; font-size: 1rem; }
  /* Fasa 1: skrin sempit sentiasa paparan signature bertindan — susun
     atur alternatif + overlay keadaan disembunyikan di sini. */
  .tv-canvas[data-layout]:not([data-layout="signature"]) #tv-alt { display: none !important; }
  .tv-canvas[data-layout]:not([data-layout="signature"]) .tv-panel { display: flex !important; }
  .tv-canvas[data-layout]:not([data-layout="signature"]) .tv-clock-wrap,
  .tv-canvas[data-layout]:not([data-layout="signature"]) .tv-identity,
  .tv-canvas[data-layout]:not([data-layout="signature"]) .tv-slide,
  .tv-canvas[data-layout]:not([data-layout="signature"]) .tv-next,
  .tv-canvas[data-layout]:not([data-layout="signature"]) .tv-bg,
  .tv-canvas[data-layout]:not([data-layout="signature"]) .tv-pattern { display: block !important; }
  .tv-overlay { display: none !important; }
}

/* ==================================================================
   FASA 1 — MASAJID Silver & Gold: 10 susun atur TV, warna tersuai,
   skrin azan / iqamah, mod khusyuk & jimat tenaga (14 Nov 2026).
   Peraturan utama: dengan tv_layout=signature + warna lalai, TV
   kekal SAMA seperti sebelum ini (panel/klin/jam/ticker tidak
   disentuh kecuali dua pemboleh ubah warna yang nilainya sama).
   ================================================================== */

/* Pemboleh ubah warna TV — diset oleh tv.js dari API (lalai = warna
   signature asal). JS turut menetapkan --tv-primary-dark/-darker. */
.tv-canvas {
  --tv-primary: #123a7d;
  --tv-primary-dark: #0d2a5e;
  --tv-primary-darker: #0a1f4d;
  --tv-secondary: #f5c542;
}

/* Kanvas potret 1080x1920 untuk 3 susun atur menegak; fitTV() di
   tv.js mengira skala dari saiz ini. */
.tv-canvas[data-layout="vertical_quba"],
.tv-canvas[data-layout="vertical_nabawi"],
.tv-canvas[data-layout="vertical_table"] {
  width: 1080px; height: 1920px;
}

/* Susun atur alternatif: elemen signature disembunyikan, #tv-alt pula
   mengambil alih kanvas. Bingkai emas + ticker kekal untuk semua. */
#tv-alt[hidden] { display: none; }
.tv-alt {
  position: absolute; inset: 0; z-index: 2;
  overflow: hidden;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
}
.tv-canvas[data-layout]:not([data-layout="signature"]) .tv-panel,
.tv-canvas[data-layout]:not([data-layout="signature"]) .tv-clock-wrap,
.tv-canvas[data-layout]:not([data-layout="signature"]) .tv-identity,
.tv-canvas[data-layout]:not([data-layout="signature"]) .tv-slide,
.tv-canvas[data-layout]:not([data-layout="signature"]) .tv-next,
.tv-canvas[data-layout]:not([data-layout="signature"]) .tv-bg,
.tv-canvas[data-layout]:not([data-layout="signature"]) .tv-pattern { display: none; }

/* --- Kongsi: latar foto + identiti + pil kira detik --- */
.tv-alt-bg {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(3, 8, 20, .55) 0%, rgba(3, 8, 20, .12) 30%, rgba(3, 8, 20, .30) 65%, rgba(3, 8, 20, .70) 100%),
    url(assets/masjid-ar-raudhah.jpg) center 38%/cover no-repeat,
    linear-gradient(160deg, #0d1f3c 0%, #081426 55%, #050d1a 100%);
}
.tv-alt-eyebrow {
  font-size: 34px; font-weight: 800; letter-spacing: .18em;
  color: var(--tv-secondary); text-transform: uppercase; line-height: 1.1;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .65);
}
.tv-alt-name-big {
  font-size: 52px; font-weight: 800; text-transform: uppercase; line-height: 1.05;
  color: #fff; white-space: nowrap; text-shadow: 0 2px 14px rgba(0, 0, 0, .7);
}
.tv-alt-addr { font-size: 22px; color: rgba(255, 255, 255, .85); text-shadow: 0 2px 10px rgba(0, 0, 0, .8); }
.tv-alt-next-pill {
  display: inline-flex; align-items: baseline; gap: 14px;
  background: rgba(11, 35, 80, .92);
  border: 1px solid var(--tv-secondary); border-radius: 12px;
  padding: 12px 20px; color: #fff;
}
.tv-alt-next-label { font-size: 22px; font-weight: 700; }
.tv-alt-next-name { font-size: 30px; font-weight: 800; color: var(--tv-secondary); }
.tv-alt-next-count { font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums; }
.tv-alt-icon { width: 48px; height: 48px; flex: none; display: flex; align-items: center; justify-content: center; }
.tv-alt-icon svg { width: 44px; height: 44px; display: block; }
.tv-alt-names { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tv-alt-name { font-size: 30px; font-weight: 700; color: #fff; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-alt-sub { font-size: 18px; color: rgba(255, 255, 255, .8); white-space: nowrap; }
.tv-alt-row.next .tv-alt-name, .tv-alt-row.next .tv-alt-time { color: var(--tv-secondary); }

/* --- ULTRA WIDE (1920x1080): foto penuh; sepanduk kiri atas; baris
   bawah = jam analog besar kiri + 6 jubin biru sebaris. --- */
.tv-alt-uw-banner {
  position: absolute; left: 48px; top: 44px; z-index: 3;
  background: linear-gradient(90deg, rgba(3, 8, 20, .78), rgba(3, 8, 20, .45) 75%, rgba(3, 8, 20, 0));
  border-left: 5px solid var(--tv-secondary);
  border-radius: 0 16px 16px 0; padding: 20px 36px 20px 26px;
}
.tv-alt-uw-banner .tv-alt-eyebrow { font-size: 36px; }
.tv-alt-uw-banner .tv-alt-name-big { font-size: 58px; }
.tv-alt-uw-dates {
  position: absolute; right: 48px; top: 48px; z-index: 3;
  font-size: 26px; font-weight: 700; color: #fff;
  background: rgba(11, 35, 80, .92); border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 10px; padding: 12px 20px;
}
.tv-alt-uw-dates .js-alt-date-hijri { color: var(--tv-secondary); }
.tv-alt-uw-next { position: absolute; right: 48px; top: 128px; z-index: 3; }
.tv-alt-uw-bottom {
  position: absolute; left: 48px; right: 48px; bottom: 96px; z-index: 3;
  display: flex; gap: 28px; align-items: stretch;
}
.tv-alt-uw-clock { width: 300px; height: 300px; flex: none; align-self: center; filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .5)); }
.tv-alt-uw-clock svg { width: 100%; height: 100%; display: block; }
.tv-alt-uw-tiles { flex: 1; display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.tv-alt-tile {
  background: linear-gradient(165deg, var(--tv-primary), var(--tv-primary-dark));
  border: 1px solid rgba(245, 197, 66, .55); border-radius: 16px;
  padding: 18px 12px; display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-align: center; box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
}
.tv-alt-tile.next { border-color: var(--tv-secondary); box-shadow: 0 0 0 2px var(--tv-secondary), 0 0 26px rgba(245, 197, 66, .35); }
.tv-alt-tile-icon { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; }
.tv-alt-tile-icon svg { width: 48px; height: 48px; }
.tv-alt-tile-name { font-size: 24px; font-weight: 700; }
.tv-alt-tile.next .tv-alt-tile-name { color: var(--tv-secondary); }
.tv-alt-tile-time { font-size: 40px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.tv-alt-tile-time small { font-size: 18px; font-weight: 700; color: rgba(255, 255, 255, .85); }
.tv-alt-tile-sub { font-size: 16px; color: rgba(255, 255, 255, .85); }

/* --- SIMPLICITY (1920x1080): panel biru kiri ~45% dengan tepi kanan
   zigzag; kira detik digital besar atas panel; senarai menegak 6 solat;
   foto kanan; nama + pil di atas foto. --- */
.tv-alt-sim-panel {
  position: absolute; left: 0; top: 0; bottom: 60px; width: 880px; z-index: 3;
  background: linear-gradient(165deg, var(--tv-primary), var(--tv-primary-dark));
  /* Tepi kanan zigzag (gigi 28px) — potong panel, foto kelihatan. */
  clip-path: polygon(0 0, 836px 0, 862px 28px, 836px 56px, 862px 84px, 836px 112px, 862px 140px, 836px 168px, 862px 196px, 836px 224px, 862px 252px, 836px 280px, 862px 308px, 836px 336px, 862px 364px, 836px 392px, 862px 420px, 836px 448px, 862px 476px, 836px 504px, 862px 532px, 836px 560px, 862px 588px, 836px 616px, 862px 644px, 836px 672px, 862px 700px, 836px 728px, 862px 756px, 836px 784px, 862px 812px, 836px 840px, 862px 868px, 836px 896px, 862px 924px, 836px 952px, 862px 980px, 836px 1008px, 862px 1020px, 0 1020px);
  padding: 44px 96px 30px 48px;
  display: flex; flex-direction: column;
}
.tv-alt-sim-count { text-align: left; }
.tv-alt-sim-big { display: block; font-size: 92px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; color: #fff; }
.tv-alt-sim-to { font-size: 26px; color: rgba(255, 255, 255, .85); }
.tv-alt-sim-to b { color: var(--tv-secondary); }
.tv-alt-sim-dates { font-size: 24px; color: #fff; margin-top: 12px; padding-bottom: 14px; border-bottom: 1px solid rgba(255, 255, 255, .25); }
.tv-alt-sim-dates .js-alt-date-hijri { color: var(--tv-secondary); }
.tv-alt-sim-list { flex: 1; display: flex; flex-direction: column; justify-content: space-evenly; }
.tv-alt-sim-list .tv-alt-row { display: flex; align-items: center; gap: 16px; padding: 8px 4px; border-bottom: 1px solid rgba(255, 255, 255, .16); }
.tv-alt-sim-list .tv-alt-row:last-child { border-bottom: none; }
.tv-alt-sim-list .tv-alt-times { text-align: right; flex: none; }
.tv-alt-time { font-size: 46px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.tv-alt-ampm { font-size: 18px; font-weight: 700; color: rgba(255, 255, 255, .85); margin-left: 5px; }
.tv-alt-sim-identity { position: absolute; right: 48px; top: 44px; z-index: 3; text-align: right; }
.tv-alt-sim-identity .tv-alt-next-pill { margin-top: 16px; }

/* --- CINEMATIC v4 (1920x1080): ikut tema 4 MASAJID sebenar (pratonton
   14 Nov 2026; skala x 1.001 / y 1.082 dari tangkapan 1919x998).
   Foto penuh TANPA bingkai luar; panel kiri 545x1005 lut sinar biru
   gelap, bucu kanan atas/bawah senget, kilau emas tepi kanan+bawah,
   pembahagi emas antara baris; baris bertindan (ikon emas, nama putih
   32px, masa EMAS 70px, pil iqamah gelap); jam analog muka hitam
   375px bertindih tepi panel; masthead serif Georgia 69px + logo
   emas; bar tarikh biru + tab kira detik putih senget; ticker emas
   di kanan panel; slaid pengumuman panel putih tengah-kanan.
   NOTA geometri: koordinat y pratonton mengandaikan kanvas memenuhi
   tetingkap — panel (tamat 1041) akan menindih ticker penuh-lebar,
   jadi ticker diletak di kanan panel sahaja (x 675-1920, bawah
   117px), dan tab kira detik dilebarkan 225->244px (x 1547-1791)
   supaya "Maghrib -02:49:08" 20px muat satu baris — hujung kanan
   bar tarikh kosong (teks tamat ~x1303), tiada teks tertutup. --- */
.tv-canvas[data-layout="cinematic"] .tv-frame { display: none; }
.tv-canvas[data-layout="cinematic"] .tv-alt-bg {
  background:
    linear-gradient(180deg, rgba(3, 8, 20, .55) 0%, rgba(3, 8, 20, .08) 35%, rgba(3, 8, 20, .10) 60%, rgba(3, 8, 20, .45) 100%),
    url(assets/masjid-ar-raudhah.jpg) center/cover no-repeat,
    linear-gradient(160deg, #0d1f3c 0%, #081426 55%, #050d1a 100%);
}
.tv-alt-cin-panel {
  position: absolute; left: 130px; top: 36px; width: 545px; height: 1005px; z-index: 3;
  background: linear-gradient(165deg, rgba(10, 32, 56, .80), rgba(6, 18, 36, .86));
  clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 30px, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%);
  /* Kilau emas ditebalkan 2026-11-14 (skrin: tepi kanan+bawah nampak
     gelap sahaja pada 4px/8px .55/.35) — drop-shadow mengikut bentuk
     clip-path, ditambah garisan emas inset 2px (turut dipotong
     clip-path, jadi mengikut bucu senget) sebagai tepi yang jelas. */
  filter: drop-shadow(6px 0 16px rgba(245, 197, 66, .95)) drop-shadow(0 6px 16px rgba(245, 197, 66, .75)) drop-shadow(0 0 28px rgba(245, 197, 66, .4));
  box-shadow: inset 0 0 0 2px rgba(245, 197, 66, .6);
  padding: 20px 26px; display: flex; flex-direction: column;
}
.tv-alt-cin-row { display: flex; align-items: center; gap: 20px; flex: 1; padding: 6px 4px; border-bottom: 1px solid rgba(245, 197, 66, .45); }
.tv-alt-cin-row:last-child { border-bottom: none; }
.tv-alt-cin-row.next { background: rgba(245, 197, 66, .12); border-radius: 10px; }
.tv-alt-cin-icon { width: 64px; height: 64px; flex: none; display: flex; align-items: center; justify-content: center; }
.tv-alt-cin-icon svg { width: 60px; height: 60px; display: block; }
.tv-alt-cin-icon svg path, .tv-alt-cin-icon svg circle { stroke: #f5c542; }
.tv-alt-cin-stack { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.tv-alt-cin-name { font-size: 32px; font-weight: 700; color: #fff; line-height: 1.1; text-transform: uppercase; white-space: nowrap; }
.tv-alt-cin-time { font-size: 70px; font-weight: 800; color: #f5c542; line-height: 1; font-variant-numeric: tabular-nums; text-shadow: 0 2px 10px rgba(0, 0, 0, .55); white-space: nowrap; }
.tv-alt-cin-time small { font-size: 20px; font-weight: 700; margin-left: 6px; }
.tv-alt-cin-pill { align-self: flex-start; background: rgba(0, 0, 0, .45); color: #fff; font-size: 19px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; padding: 3px 12px; border-radius: 6px; white-space: nowrap; }
.tv-alt-cin-range { font-size: 20px; font-weight: 700; color: rgba(255, 255, 255, .92); white-space: nowrap; }
.tv-alt-cin-clock {
  position: absolute; left: 517px; top: 360px; width: 375px; height: 375px; z-index: 4;
  filter: drop-shadow(0 10px 28px rgba(0, 0, 0, .6));
}
.tv-alt-cin-clock svg { width: 100%; height: 100%; display: block; }
.tv-alt-cin-slide {
  position: absolute; left: 675px; top: 162px; width: 1115px; height: 654px; z-index: 2;
  background: #f4f4f7; color: #111; padding: 40px 48px; overflow: hidden;
  /* Kitaran 20s tunjuk / 40s sembunyi (tv.js): pudar lembut, dan
     visibility:hidden supaya tiada kotak putih kosong tertinggal. */
  transition: opacity .8s ease, visibility .8s ease;
}
.tv-alt-cin-slide.cin-slide-hidden { opacity: 0; visibility: hidden; }
.tv-alt-cin-slide h2 { font-size: 40px; font-weight: 800; color: #111; text-align: right; border-bottom: 2px dashed rgba(0, 0, 0, .25); padding-bottom: 16px; margin: 0 0 16px; }
.tv-alt-cin-slide p { font-size: 26px; color: #555; text-align: right; line-height: 1.5; margin: 0; }
.tv-alt-cin-identity { position: absolute; right: 48px; top: 36px; z-index: 5; display: flex; align-items: flex-start; gap: 18px; }
.tv-alt-cin-id-text { text-align: right; }
.tv-alt-cin-masthead { font-family: Georgia, "Times New Roman", serif; font-size: 69px; font-weight: 700; line-height: 1.05; text-transform: uppercase; white-space: nowrap; color: #fff; text-shadow: 0 2px 14px rgba(0, 0, 0, .7); }
.tv-alt-cin-masthead .tv-alt-cin-gold { color: #f5c542; }
.tv-alt-cin-addr { font-size: 22px; color: rgba(255, 255, 255, .88); margin-top: 6px; white-space: nowrap; text-shadow: 0 2px 10px rgba(0, 0, 0, .8); }
.tv-alt-cin-logo { width: 82px; height: 82px; flex: none; }
.tv-alt-cin-logo svg { width: 82px; height: 82px; display: block; }
.tv-alt-cin-datebar {
  position: absolute; left: 670px; top: 817px; width: 896px; height: 76px; z-index: 3;
  background: #123a7d; display: flex; align-items: center; gap: 12px; padding: 0 28px;
}
.tv-alt-cin-dot { width: 12px; height: 12px; border-radius: 50%; background: #22c55e; flex: none; }
.tv-alt-cin-dates { font-size: 30px; color: #fff; white-space: nowrap; }
.tv-alt-cin-dates .tv-alt-date-sep { margin: 0 6px; color: rgba(255, 255, 255, .7); }
.tv-alt-cin-dates .js-alt-date-hijri { color: #fff; }
.tv-alt-cin-dates b { font-weight: 800; }
.tv-alt-cin-count {
  position: absolute; left: 1547px; top: 820px; width: 244px; height: 73px; z-index: 4;
  background: #f4f4f7; color: #282e35; display: flex; align-items: center; gap: 8px;
  padding: 0 12px 0 20px;
  clip-path: polygon(18px 0, 100% 0, 100% 100%, 0 100%);
}
.tv-alt-cin-count svg { width: 26px; height: 26px; flex: none; color: #066bd0; }
.tv-alt-cin-count .js-alt-next-name { font-size: 20px; font-weight: 800; white-space: nowrap; }
.tv-alt-cin-count .js-alt-next-countdown { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (min-width: 821px) {
  /* Ticker emas di kanan panel sahaja (bawah 117px = y 893-963);
     dibungkus min-width supaya sandaran bertindan skrin sempit
     (ticker statik 1rem) tidak terjejas. */
  .tv-canvas[data-layout="cinematic"] .tv-ticker {
    left: 675px; bottom: 117px; height: 70px;
    background: rgba(8, 8, 10, .72); color: #f5c542;
    font-size: 38px; font-weight: 700; border-top: none;
  }
}

/* --- LIST VERTI (1920x1080): seperti simplicity tetapi jam digital
   waktu semasa di atas, senarai di bawah dengan gaya baris berbeza
   (nama + iqamah kiri, masa kanan), foto kanan. --- */
.tv-alt-lv-panel {
  position: absolute; left: 0; top: 0; bottom: 60px; width: 860px; z-index: 3;
  background: linear-gradient(165deg, var(--tv-primary), var(--tv-primary-dark));
  border-right: 4px solid var(--tv-secondary);
  padding: 40px 48px 28px; display: flex; flex-direction: column;
}
.tv-alt-lv-clock { font-size: 96px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.tv-alt-lv-dates { font-size: 24px; margin-top: 8px; color: rgba(255, 255, 255, .9); }
.tv-alt-lv-dates .js-alt-date-hijri { color: var(--tv-secondary); }
.tv-alt-lv-next { margin-top: 18px; }
.tv-alt-lv-list { flex: 1; display: flex; flex-direction: column; justify-content: space-evenly; margin-top: 10px; }
.tv-alt-lv-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 18px; border-radius: 12px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12);
}
.tv-alt-lv-row.next { background: rgba(245, 197, 66, .22); border-color: var(--tv-secondary); }
.tv-alt-lv-row.next .tv-alt-name { color: var(--tv-secondary); }
.tv-alt-lv-left { display: flex; flex-direction: column; }
.tv-alt-lv-time { font-size: 48px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.tv-alt-lv-time small { font-size: 19px; color: rgba(255, 255, 255, .85); }
.tv-alt-lv-identity { position: absolute; right: 48px; top: 44px; z-index: 3; text-align: right; }

/* --- LIST HORIZON (1920x1080): foto ~70% atas; jalur biru bawah ~30%
   tepi atas zigzag; kira detik + tarikh kiri, 6 lajur solat sebaris. --- */
.tv-alt-hz-photo { position: absolute; left: 0; right: 0; top: 0; height: 700px; z-index: 2; }
.tv-alt-hz-identity { position: absolute; left: 48px; top: 44px; z-index: 3; }
.tv-alt-hz-identity .tv-alt-eyebrow { font-size: 32px; }
.tv-alt-hz-identity .tv-alt-name-big { font-size: 56px; }
.tv-alt-hz-next { position: absolute; left: 48px; bottom: 24px; z-index: 3; }
.tv-alt-hz-strip {
  position: absolute; left: 0; right: 0; bottom: 60px; height: 320px; z-index: 3;
  background: linear-gradient(180deg, var(--tv-primary), var(--tv-primary-dark));
  /* Tepi atas zigzag (gigi 26px). */
  clip-path: polygon(0 26px, 26px 0, 52px 26px, 78px 0, 104px 26px, 130px 0, 156px 26px, 182px 0, 208px 26px, 234px 0, 260px 26px, 286px 0, 312px 26px, 338px 0, 364px 26px, 390px 0, 416px 26px, 442px 0, 468px 26px, 494px 0, 520px 26px, 546px 0, 572px 26px, 598px 0, 624px 26px, 650px 0, 676px 26px, 702px 0, 728px 26px, 754px 0, 780px 26px, 806px 0, 832px 26px, 858px 0, 884px 26px, 910px 0, 936px 26px, 962px 0, 988px 26px, 1014px 0, 1040px 26px, 1066px 0, 1092px 26px, 1118px 0, 1144px 26px, 1170px 0, 1196px 26px, 1222px 0, 1248px 26px, 1274px 0, 1300px 26px, 1326px 0, 1352px 26px, 1378px 0, 1404px 26px, 1430px 0, 1456px 26px, 1482px 0, 1508px 26px, 1534px 0, 1560px 26px, 1586px 0, 1612px 26px, 1638px 0, 1664px 26px, 1690px 0, 1716px 26px, 1742px 0, 1768px 26px, 1794px 0, 1820px 26px, 1846px 0, 1872px 26px, 1898px 0, 1920px 26px, 1920px 320px, 0 320px);
  display: flex; align-items: center; gap: 32px; padding: 40px 48px 0;
}
.tv-alt-hz-left { flex: none; width: 340px; display: flex; flex-direction: column; gap: 4px; }
.tv-alt-hz-count { font-size: 64px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.tv-alt-hz-to { font-size: 22px; color: rgba(255, 255, 255, .85); }
.tv-alt-hz-to b { color: var(--tv-secondary); }
.tv-alt-hz-dates { font-size: 20px; color: rgba(255, 255, 255, .9); margin-top: 6px; }
.tv-alt-hz-dates .js-alt-date-hijri { color: var(--tv-secondary); }
.tv-alt-hz-cols { flex: 1; display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.tv-alt-hz-col {
  border-left: 1px solid rgba(255, 255, 255, .25); padding-left: 16px;
  display: flex; flex-direction: column; gap: 4px;
}
.tv-alt-hz-col.next .tv-alt-hz-name { color: var(--tv-secondary); }
.tv-alt-hz-name { font-size: 23px; font-weight: 700; }
.tv-alt-hz-time { font-size: 38px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.tv-alt-hz-time small { font-size: 17px; color: rgba(255, 255, 255, .85); }
.tv-alt-hz-sub { font-size: 16px; color: rgba(255, 255, 255, .85); }

/* --- BLUE MODERN (1920x1080): rebuild akhir premium Tema 5 pakej zip
   Vin (masajid-6-theme-rebuild, kanvas 1366x768 diskala 1.406) — NILAI
   TEPAT SPEC: panel rata #416ed0 782px, jam digital 110px/900/-4px,
   grid 228/200/186, nama 34px/700, masa 60px/800/-1.4px, iqamah
   21px/800, masthead 65px, pil 73px/39px/41px, ticker 79px/37px,
   bingkai emas 15px/15px. Konvensyen rumah kekal: 12 jam + AM/PM,
   Hijri -1 hari (H tunggal), kira detik negatif. Tiada jam analog.
   Panel #416ed0 tetap (identiti tema), tidak ikut --tv-primary. --- */
.tv-canvas[data-layout="blue_modern"] .tv-alt,
.tv-canvas[data-layout="blue_modern"] .tv-ticker { font-family: Arial, "Segoe UI", sans-serif; }
.tv-canvas[data-layout="blue_modern"] .tv-frame { border: 15px solid #c9a227; border-radius: 15px; }
.tv-canvas[data-layout="blue_modern"] .tv-frame::after { inset: 0; border-radius: 8px; }
/* Foto penuh: inset 15/15/93/15 + lapisan gelap zip
   (180deg #090d2599 0, transparent 40%, #0006). */
.tv-canvas[data-layout="blue_modern"] .tv-alt-bg {
  inset: 15px 15px 93px 15px;
  background:
    linear-gradient(180deg, rgba(9, 13, 37, .6) 0%, rgba(9, 13, 37, 0) 40%, rgba(0, 0, 0, .4) 100%),
    url(assets/masjid-ar-raudhah.jpg) center/cover no-repeat,
    linear-gradient(160deg, #0d1f3c 0%, #081426 55%, #050d1a 100%);
}
.tv-alt-bm-panel {
  position: absolute; left: 15px; top: 15px; bottom: 93px; width: 782px; z-index: 3;
  background: #416ed0;
}
/* Jalur aksen pepenjuru di tepi kanan panel (gaya zip .theme-5). */
.tv-alt-bm-panel::after {
  content: ''; position: absolute; right: -1px; top: 0; bottom: 0; width: 15px; z-index: 4;
  background: linear-gradient(135deg, transparent 30%, #a2b7ef 30% 40%, transparent 40% 70%, #2f55a8 70%);
  background-size: 15px 22px;
}
.tv-alt-bm-clock {
  position: absolute; left: 132px; top: 27px; z-index: 3;
  font-size: 110px; font-weight: 900; line-height: 1; color: #fff;
  font-variant-numeric: tabular-nums; letter-spacing: -4px; white-space: nowrap;
}
.tv-alt-bm-dates {
  position: absolute; left: 41px; top: 146px; width: 728px; height: 82px; z-index: 3;
  display: flex; flex-wrap: wrap; justify-content: center; align-content: center;
  font-size: 27px; line-height: 1.4; color: #fff; text-align: center;
}
.tv-alt-bm-dot { width: 8px; height: 8px; border-radius: 50%; background: #00fc45; margin-right: 8px; flex: none; align-self: center; }
/* Pemisah " / " — ruang putih di dalam flex item terlipat (blockified),
   jadi jarak diberi melalui margin; Hijri putih seperti tema (peraturan
   emas lama dibuang — keseluruhan jalur kini putih, titik hijau kekal). */
.tv-alt-bm-dates .tv-alt-date-sep { margin: 0 8px; }
.tv-alt-bm-list {
  position: absolute; top: 266px; right: 15px; bottom: 17px; left: 13px; z-index: 3;
  display: flex; flex-direction: column; justify-content: space-evenly;
}
.tv-alt-bm-row { position: relative; display: flex; align-items: center; padding: 0 11px 0 18px; border-radius: 11px; }
.tv-alt-bm-row.next { background: #163d85; }
/* Ikon berpusat menegak dalam baris — top:31px lama letak pusat ikon
   21.5px terlalu rendah dalam baris 60px (bawah ikon terkeluar 12px
   dari pil 'next'); top:50% + translateY(-50%) memusat tepat. */
.tv-alt-bm-icon { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); width: 41px; height: 41px; opacity: .96; color: #fff; }
.tv-alt-bm-icon svg { width: 41px; height: 41px; display: block; }
.tv-alt-bm-grid {
  display: grid; grid-template-columns: 228px 200px 186px; gap: 6px; align-items: center;
  margin-left: 53px; min-width: 0; flex: none;
}
.tv-alt-bm-name {
  font-size: 34px; font-weight: 700; text-transform: uppercase; letter-spacing: -.7px;
  color: #fff; white-space: nowrap; overflow: hidden;
}
.tv-alt-bm-time {
  font-size: 60px; font-weight: 800; line-height: 1; letter-spacing: -1.4px;
  color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.tv-alt-bm-time small { font-size: 16px; font-weight: 900; vertical-align: super; color: rgba(255, 255, 255, .9); }
.tv-alt-bm-iqamah {
  font-size: 21px; font-weight: 800; line-height: 1.16; color: #e4f3ff;
  text-transform: uppercase; white-space: nowrap;
}
/* Nama masjid kanan atas — satu baris 65px (MASJID emas + nama putih),
   alamat 18px; gradien gelap menegak gaya zip supaya jelas atas foto. */
.tv-alt-bm-identity {
  position: absolute; left: 796px; top: 15px; right: 27px; height: 160px; z-index: 3;
  display: flex; flex-direction: column; justify-content: center; text-align: right;
  background: linear-gradient(0deg, rgba(22, 24, 36, 0), rgba(22, 24, 36, .53));
}
.tv-alt-bm-masthead-name {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 65px; font-weight: 800; line-height: 1.05; color: #fff;
  text-transform: uppercase; white-space: nowrap; text-shadow: 0 2px 12px rgba(0, 0, 0, .65);
}
.tv-alt-bm-masthead-name .tv-alt-bm-masthead-gold { color: var(--tv-secondary); }
.tv-alt-bm-masthead-addr { font-size: 18px; color: rgba(255, 255, 255, .9); text-shadow: 0 2px 10px rgba(0, 0, 0, .8); margin-top: 8px; }
/* Pil kira detik kanan bawah — ikon jam biru 76px + nama solat 39px +
   nilai negatif 41px/800/-1.4px (konvensyen MASAJID). */
.tv-alt-bm-next { position: absolute; right: 32px; bottom: 118px; z-index: 3; }
.tv-alt-bm-pill {
  display: flex; align-items: center; height: 73px; min-width: 481px;
  border: 3px solid #0d7adb; border-radius: 38px; background: #f4f4f7; color: #282e35;
  overflow: hidden; box-shadow: 0 2px 4px rgba(0, 0, 0, .45);
}
.tv-alt-bm-pill-icon { width: 76px; height: 100%; flex: none; display: flex; align-items: center; justify-content: center; background: #066bd0; color: #fff; margin-right: 15px; }
.tv-alt-bm-pill-label { font-size: 39px; margin-right: 12px; white-space: nowrap; }
.tv-alt-bm-pill-value { font-size: 41px; font-weight: 800; letter-spacing: -1.4px; padding-right: 18px; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Ticker bawah gaya zip: 79px, 37px, hitam #020304, tanpa sempadan emas. */
.tv-canvas[data-layout="blue_modern"] .tv-ticker {
  left: 15px; right: 15px; bottom: 15px; height: 79px; font-size: 37px;
  background: #020304; border-top: none;
}

/* --- VERTICAL QUBA (1080x1920): atas putih (logo, nama biru, kira
   detik hitam besar); slaid tengah; bar tarikh biru; grid 3x2 bawah. --- */
.tv-alt-q-top {
  position: absolute; left: 0; right: 0; top: 0; height: 560px; z-index: 3;
  background: #ffffff; color: #0b2350; text-align: center;
  padding: 56px 48px 30px; display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.tv-alt-q-logo {
  width: 92px; height: 92px; border-radius: 50%; border: 3px solid var(--tv-secondary);
  display: grid; place-items: center; font-size: 44px; color: var(--tv-primary);
}
.tv-alt-q-top .tv-alt-eyebrow { color: #b8860b; text-shadow: none; font-size: 30px; }
.tv-alt-q-top .tv-alt-name-big { color: var(--tv-primary); text-shadow: none; font-size: 58px; }
.tv-alt-q-top .tv-alt-addr { color: #475569; text-shadow: none; }
.tv-alt-q-count { margin-top: 14px; }
.tv-alt-q-big { display: block; font-size: 104px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; color: #111; }
.tv-alt-q-to { font-size: 26px; color: #475569; }
.tv-alt-q-to b { color: var(--tv-primary); }
.tv-alt-q-slide {
  position: absolute; left: 48px; right: 48px; top: 600px; height: 420px; z-index: 3;
  background: linear-gradient(165deg, rgba(8, 20, 42, .82), rgba(4, 10, 24, .88));
  border: 1px solid rgba(245, 197, 66, .4); border-left: 4px solid var(--tv-secondary);
  border-radius: 14px; padding: 28px 32px;
}
.tv-alt-q-slide h2 { color: var(--tv-secondary); font-size: 34px; }
.tv-alt-q-slide p { font-size: 26px; color: rgba(255, 255, 255, .92); }
.tv-alt-q-datebar {
  position: absolute; left: 0; right: 0; top: 1060px; height: 84px; z-index: 3;
  background: var(--tv-primary); display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 28px; font-weight: 700;
}
.tv-alt-q-datebar .js-alt-date-hijri { color: var(--tv-secondary); }
.tv-alt-q-grid {
  position: absolute; left: 48px; right: 48px; top: 1184px; bottom: 96px; z-index: 3;
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 1fr; gap: 18px;
}
.tv-alt-q-tile {
  background: linear-gradient(165deg, var(--tv-primary), var(--tv-primary-dark));
  border: 1px solid rgba(245, 197, 66, .55); border-radius: 16px;
  padding: 22px 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center;
}
.tv-alt-q-tile.next { border-color: var(--tv-secondary); box-shadow: 0 0 0 2px var(--tv-secondary); }
.tv-alt-q-tile-name { font-size: 26px; font-weight: 700; }
.tv-alt-q-tile.next .tv-alt-q-tile-name { color: var(--tv-secondary); }
.tv-alt-q-tile-time { font-size: 52px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.tv-alt-q-tile-time small { font-size: 20px; color: rgba(255, 255, 255, .85); }
.tv-alt-q-tile-sub { font-size: 19px; color: rgba(255, 255, 255, .85); }

/* --- VERTICAL NABAWI (1080x1920): bingkai gerbang masjid berjalur
   (gaya Nabawi) + medalion emas Allah di atas; foto senja kabur di luar
   gerbang; foto + grid di dalam gerbang. --- */
.tv-alt-nab-bg {
  position: absolute; inset: 0;
  background: url(assets/masjid-ar-raudhah.jpg) center/cover no-repeat;
  filter: blur(14px) brightness(.45); transform: scale(1.15);
}
.tv-alt-nab-arch {
  position: absolute; left: 56px; right: 56px; top: 40px; bottom: 96px; z-index: 3;
  background: linear-gradient(180deg, #fdf8ec, #f7ecd2);
  border: 10px solid #b8860b; border-bottom: none;
  border-radius: 480px 480px 18px 18px;
  /* Jalur gerbang Nabawi: belang bata merah/putih halus di tepi. */
  box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 10px #b8860b, 0 24px 60px rgba(0, 0, 0, .5);
  overflow: hidden; color: #0b2350;
}
.tv-alt-nab-arch::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 26px;
  background: repeating-linear-gradient(90deg, #8b1a1a 0 34px, #fdf8ec 34px 68px);
  opacity: .85;
}
.tv-alt-nab-medallion {
  position: absolute; left: 50%; top: 44px; transform: translateX(-50%);
  width: 110px; height: 110px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f6dc7d, #c9a227 60%, #8a6d1a);
  border: 3px solid #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
  display: grid; place-items: center;
  font-size: 52px; color: #3a2c05; z-index: 4;
}
.tv-alt-nab-inner { position: absolute; inset: 0; padding: 180px 44px 28px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.tv-alt-nab-logo { font-size: 40px; color: var(--tv-primary); }
.tv-alt-nab-inner .tv-alt-eyebrow { color: #b8860b; text-shadow: none; font-size: 28px; }
.tv-alt-nab-inner .tv-alt-name-big { color: var(--tv-primary); text-shadow: none; font-size: 52px; }
.tv-alt-nab-inner .tv-alt-addr { color: #475569; text-shadow: none; font-size: 20px; }
.tv-alt-nab-count { font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums; color: #111; }
.tv-alt-nab-count b { color: var(--tv-primary); }
.tv-alt-nab-photo {
  width: 100%; height: 300px; flex: none; margin-top: 8px;
  background: url(assets/masjid-ar-raudhah.jpg) center 38%/cover no-repeat;
  border: 3px solid #c9a227; border-radius: 150px 150px 12px 12px;
}
.tv-alt-nab-datebar {
  width: 100%; margin-top: 14px; background: var(--tv-primary); color: #fff;
  border-radius: 10px; padding: 12px 10px; font-size: 24px; font-weight: 700;
}
.tv-alt-nab-datebar .js-alt-date-hijri { color: var(--tv-secondary); }
.tv-alt-nab-grid { flex: 1; width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 1fr; gap: 14px; margin-top: 14px; }
.tv-alt-nab-tile {
  background: linear-gradient(165deg, var(--tv-primary), var(--tv-primary-dark)); color: #fff;
  border: 1px solid rgba(245, 197, 66, .55); border-radius: 14px;
  padding: 14px 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.tv-alt-nab-tile.next { border-color: var(--tv-secondary); box-shadow: 0 0 0 2px var(--tv-secondary); }
.tv-alt-nab-tile-name { font-size: 22px; font-weight: 700; }
.tv-alt-nab-tile.next .tv-alt-nab-tile-name { color: var(--tv-secondary); }
.tv-alt-nab-tile-time { font-size: 40px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.tv-alt-nab-tile-time small { font-size: 16px; color: rgba(255, 255, 255, .85); }
.tv-alt-nab-tile-sub { font-size: 15px; color: rgba(255, 255, 255, .85); }

/* --- VERTICAL TABLE (1080x1920): foto atas + nama; bar tarikh biru;
   jadual 3 lajur (nama | azan | iqamah); bar putih bawah = solat
   seterusnya + kira detik. --- */
.tv-alt-tb-photo {
  position: absolute; left: 0; right: 0; top: 0; height: 560px; z-index: 2;
  background:
    linear-gradient(180deg, rgba(3, 8, 20, .25) 0%, rgba(3, 8, 20, .55) 100%),
    url(assets/masjid-ar-raudhah.jpg) center 38%/cover no-repeat;
  display: flex; align-items: flex-end;
}
.tv-alt-tb-identity { padding: 0 48px 36px; }
.tv-alt-tb-identity .tv-alt-name-big { font-size: 56px; }
.tv-alt-tb-datebar {
  position: absolute; left: 0; right: 0; top: 560px; height: 84px; z-index: 3;
  background: var(--tv-primary); display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 28px; font-weight: 700;
}
.tv-alt-tb-datebar .js-alt-date-hijri { color: var(--tv-secondary); }
.tv-alt-tb-table {
  position: absolute; left: 48px; right: 48px; top: 680px; height: 960px; z-index: 3;
  display: flex; flex-direction: column; justify-content: space-evenly;
  background: rgba(255, 255, 255, .96); border-radius: 16px; color: #0b2350;
  padding: 12px 28px; box-shadow: 0 18px 40px rgba(0, 0, 0, .4);
}
.tv-alt-tb-row {
  display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center;
  padding: 18px 0; border-bottom: 1px solid #dbe2ec;
}
.tv-alt-tb-row:last-child { border-bottom: none; }
.tv-alt-tb-row.next { background: rgba(245, 197, 66, .18); border-radius: 10px; }
.tv-alt-tb-name { font-size: 30px; font-weight: 700; color: #0b2350; text-align: left; }
.tv-alt-tb-row.next .tv-alt-tb-name { color: #b8860b; }
.tv-alt-tb-azan { font-size: 44px; font-weight: 800; color: var(--tv-primary); text-align: center; font-variant-numeric: tabular-nums; }
.tv-alt-tb-azan small { font-size: 18px; }
.tv-alt-tb-iqamah { font-size: 34px; font-weight: 700; color: #0b2350; text-align: right; font-variant-numeric: tabular-nums; }
.tv-alt-tb-next {
  position: absolute; left: 48px; right: 48px; bottom: 96px; height: 120px; z-index: 3;
  background: #ffffff; border-radius: 16px; color: #111;
  display: flex; align-items: center; justify-content: space-between; padding: 0 28px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .4);
}
.tv-alt-tb-next-label { font-size: 24px; font-weight: 700; color: #475569; }
.tv-alt-tb-next-name { font-size: 36px; font-weight: 800; color: var(--tv-primary); }
.tv-alt-tb-next-count { font-size: 44px; font-weight: 800; font-variant-numeric: tabular-nums; }

/* --- Baris 'next' umum susun atur alternatif --- */
.tv-alt-row.next, .tv-alt-cin-row.next { box-shadow: none; }

/* ==================================================================
   SKRIN KEADAAN (overlay) — z-index 60-70, di atas kanvas.
   ================================================================== */
.tv-overlay {
  position: absolute; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  text-align: center; color: #fff;
}
.tv-overlay[hidden] { display: none; }

/* Pra-azan: skrin gelap ringkas + kira detik besar. */
.tv-preazan { background: rgba(3, 8, 20, .96); z-index: 61; }
.tv-preazan-kicker { font-size: 30px; letter-spacing: .2em; text-transform: uppercase; color: var(--tv-secondary); }
.tv-preazan-name { font-family: Georgia, serif; font-size: 110px; font-weight: 700; color: #fff; line-height: 1.1; }
.tv-preazan-digits { font-size: 150px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--tv-secondary); line-height: 1; }
.tv-preazan-time { font-size: 30px; color: rgba(255, 255, 255, .85); margin-top: 16px; }

/* Azan PROGRESS: hitam + bingkai emas + nama emas besar + pil
   biru-emas + bar kemajuan. */
.tv-azan { background: #000; z-index: 62; }
.tv-azan::before {
  content: ""; position: absolute; inset: 18px;
  border: 3px solid #c9a227; border-radius: 20px; pointer-events: none;
}
.tv-azan-progress { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.tv-azan[data-variant="animated"] .tv-azan-progress { display: none; }
.tv-azan-kicker { font-size: 30px; letter-spacing: .3em; text-transform: uppercase; color: #fff; }
.tv-azan-name { font-family: Georgia, serif; font-size: 150px; font-weight: 700; color: var(--tv-secondary); line-height: 1.05; }
.tv-azan-arabic { font-size: 64px; color: rgba(255, 255, 255, .9); }
.tv-azan-pill {
  margin-top: 18px; display: flex; align-items: baseline; gap: 18px;
  background: linear-gradient(90deg, #0d2a5e, #123a7d);
  border: 1px solid var(--tv-secondary); border-radius: 999px; padding: 14px 34px;
}
.tv-azan-pill-label { font-size: 26px; font-weight: 700; }
.tv-azan-pill-time { font-size: 40px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--tv-secondary); }
.tv-azan-bar { width: 560px; height: 12px; margin-top: 22px; background: rgba(255, 255, 255, .18); border-radius: 999px; overflow: hidden; }
.tv-azan-bar span, .tv-globe-progress span { display: block; height: 100%; background: linear-gradient(90deg, #c9a227, #f6dc7d); }
.tv-azan-count { font-size: 28px; color: rgba(255, 255, 255, .9); margin-top: 10px; font-variant-numeric: tabular-nums; }

/* Azan ANIMATED: angkasa gelap + glob kanvas tengah; kapsyen kiri
   bawah; bar kemajuan kanan bawah. */
.tv-azan-animated { display: none; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 40%, #0a1230 0%, #02040a 70%); }
.tv-azan[data-variant="animated"] .tv-azan-animated { display: block; }
#tv-globe-canvas { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); width: 920px; height: 920px; }
.tv-globe-caption { position: absolute; left: 72px; bottom: 96px; text-align: left; z-index: 2; }
.tv-globe-kicker { font-size: 26px; letter-spacing: .3em; text-transform: uppercase; color: rgba(255, 255, 255, .8); }
.tv-globe-name { font-family: Georgia, serif; font-size: 84px; font-weight: 700; color: var(--tv-secondary); line-height: 1.05; }
.tv-globe-time { font-size: 64px; font-weight: 800; font-variant-numeric: tabular-nums; }
.tv-globe-dist { font-size: 24px; color: rgba(255, 255, 255, .85); margin-top: 6px; }
.tv-globe-progress {
  position: absolute; right: 72px; bottom: 96px; width: 420px; z-index: 2;
  display: flex; align-items: center; gap: 14px;
}
.tv-globe-progress span { height: 10px; border-radius: 999px; background: linear-gradient(90deg, #c9a227, #f6dc7d); }
.tv-globe-progress em { font-style: normal; font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums; }

/* Iqamah: "TOWARDS IQAMAH" emas + nama + kira detik besar + pil
   ticker. Latar 1-8 (CSS/SVG tulen, tiada imej luar) — lihat bawah. */
.tv-iqamah { z-index: 63; color: #1a1a1a; }
.tv-iqamah-inner {
  position: absolute; inset: 34px; border-radius: 18px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 30px;
}
.tv-iqamah-kicker { font-size: 34px; font-weight: 800; letter-spacing: .28em; text-transform: uppercase; color: #8a6d1a; }
.tv-iqamah-name { font-family: Georgia, serif; font-size: 92px; font-weight: 700; color: #0b2350; line-height: 1.05; }
.tv-iqamah-digits { font-variant-numeric: tabular-nums; }
.tv-iqamah-regular span { font-size: 220px; font-weight: 800; color: #0b2350; line-height: 1; }
.tv-iqamah-flip { display: none; gap: 10px; align-items: center; }
.tv-iqamah[data-variant="flip"] .tv-iqamah-regular { display: none; }
.tv-iqamah[data-variant="flip"] .tv-iqamah-flip { display: flex; }
.tv-flip-tile {
  display: inline-grid; place-items: center; min-width: 150px; height: 210px;
  background: linear-gradient(180deg, #123a7d, #0a1f4d); color: #fff;
  font-size: 160px; font-weight: 800; border-radius: 16px;
  border: 1px solid rgba(245, 197, 66, .6);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .35), inset 0 2px 0 rgba(255, 255, 255, .2);
}
.tv-flip-colon { font-size: 140px; font-weight: 800; color: #0b2350; }
.tv-iqamah-ticker {
  margin-top: 18px; max-width: 1200px; background: rgba(11, 35, 80, .92); color: #fff;
  border-radius: 999px; padding: 12px 28px; font-size: 22px; white-space: nowrap; overflow: hidden;
}
.tv-iqamah-hint { font-size: 24px; color: #475569; margin-top: 6px; }

/* Latar iqamah 1-8 (pada .tv-iqamah-inner / overlay). */
.tv-iqamah.iqamah-bg-1 .tv-iqamah-inner {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23c9a227' stroke-width='1' opacity='.45'%3E%3Crect x='22' y='22' width='28' height='28'/%3E%3Crect x='22' y='22' width='28' height='28' transform='rotate(45 36 36)'/%3E%3C/g%3E%3C/svg%3E"),
    #f5efe0;
  border: 3px solid #c9a227;
}
.tv-iqamah.iqamah-bg-2 .tv-iqamah-inner {
  background:
    linear-gradient(135deg, transparent 46%, rgba(201, 162, 39, .55) 46%, rgba(201, 162, 39, .55) 54%, transparent 54%),
    linear-gradient(135deg, transparent 42%, rgba(201, 162, 39, .28) 42%, rgba(201, 162, 39, .28) 58%, transparent 58%),
    #f5efe0;
  background-size: 100% 100%, 100% 100%, auto;
  border: 3px solid #c9a227;
  box-shadow: inset 0 0 0 10px #f5efe0, inset 0 0 0 13px rgba(201, 162, 39, .7);
}
.tv-iqamah.iqamah-bg-2 .tv-iqamah-inner::before,
.tv-iqamah.iqamah-bg-2 .tv-iqamah-inner::after {
  content: "🏮"; position: absolute; font-size: 64px; opacity: .9;
}
.tv-iqamah.iqamah-bg-2 .tv-iqamah-inner::before { left: 60px; top: 40px; }
.tv-iqamah.iqamah-bg-2 .tv-iqamah-inner::after { right: 60px; bottom: 40px; }
.tv-iqamah.iqamah-bg-3 .tv-iqamah-inner {
  background:
    radial-gradient(ellipse 420px 300px at 50% 42%, #ffffff 0%, #ffffff 55%, transparent 56%),
    linear-gradient(180deg, #e8e8e8, #d4d4d4);
  border: 3px solid #c9a227;
  box-shadow: inset 0 0 0 8px #fff, inset 0 0 0 11px rgba(201, 162, 39, .8);
}
.tv-iqamah.iqamah-bg-3 .tv-iqamah-inner::before {
  content: "🏮 🏮"; position: absolute; top: 44px; left: 0; right: 0; text-align: center; font-size: 56px; letter-spacing: 60px;
}
.tv-iqamah.iqamah-bg-4 .tv-iqamah-inner {
  background: #f7f1de;
  border: 14px solid transparent;
  border-image: repeating-linear-gradient(45deg, #c9a227 0 14px, #15803d 14px 28px) 14;
  box-shadow: inset 0 0 0 3px rgba(201, 162, 39, .5);
}
.tv-iqamah.iqamah-bg-5 .tv-iqamah-inner {
  background:
    radial-gradient(ellipse 460px 340px at 50% 50%, #fbf6e8 0%, #fbf6e8 60%, transparent 61%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%237a5c00' stroke-width='1.4' opacity='.55'%3E%3Crect x='28' y='28' width='40' height='40'/%3E%3Crect x='28' y='28' width='40' height='40' transform='rotate(45 48 48)'/%3E%3Ccircle cx='48' cy='48' r='6'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(135deg, #c9a227, #e6c65c 50%, #c9a227);
  border: 3px solid #8a6d1a;
}
.tv-iqamah.iqamah-bg-6 .tv-iqamah-inner {
  background:
    radial-gradient(ellipse 460px 340px at 50% 50%, #fbf6e8 0%, #fbf6e8 60%, transparent 61%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%237fa8e0' stroke-width='1' opacity='.5'%3E%3Crect x='22' y='22' width='28' height='28'/%3E%3Crect x='22' y='22' width='28' height='28' transform='rotate(45 36 36)'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(165deg, #0a1f4d, #123a7d);
  border: 3px solid #c9a227;
  box-shadow: inset 0 0 0 8px rgba(245, 197, 66, .35);
}
.tv-iqamah.iqamah-bg-6 .tv-iqamah-kicker { color: #f6dc7d; }
.tv-iqamah.iqamah-bg-7 .tv-iqamah-inner {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='none' stroke='%230d9488' stroke-width='2' opacity='.6'%3E%3Crect x='55' y='55' width='70' height='70'/%3E%3Crect x='55' y='55' width='70' height='70' transform='rotate(45 90 90)'/%3E%3C/g%3E%3C/svg%3E") left top/180px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='none' stroke='%230d9488' stroke-width='2' opacity='.6'%3E%3Crect x='55' y='55' width='70' height='70'/%3E%3Crect x='55' y='55' width='70' height='70' transform='rotate(45 90 90)'/%3E%3C/g%3E%3C/svg%3E") right top/180px no-repeat,
    #ffffff;
  border: 2px solid #c9a227;
}
.tv-iqamah.iqamah-bg-8 .tv-iqamah-inner {
  background:
    radial-gradient(circle at 20% 15%, rgba(255, 240, 180, .9) 0%, transparent 22%),
    radial-gradient(circle at 85% 10%, rgba(255, 240, 180, .8) 0%, transparent 20%),
    radial-gradient(circle at 50% 110%, rgba(11, 35, 80, .55) 0%, transparent 55%),
    linear-gradient(180deg, #b8860b, #c9a227 45%, #8a6d1a);
  border: 3px solid #f6dc7d;
}
.tv-iqamah.iqamah-bg-8 .tv-iqamah-inner::before {
  content: "🏮 🏮 🏮"; position: absolute; top: 36px; left: 0; right: 0; text-align: center; font-size: 60px; letter-spacing: 120px;
}
.tv-iqamah.iqamah-bg-8 .tv-iqamah-inner::after {
  content: "🕌"; position: absolute; bottom: 24px; left: 0; right: 0; text-align: center; font-size: 90px; opacity: .85;
}
.tv-iqamah.iqamah-bg-8 .tv-iqamah-kicker { color: #fff8dc; text-shadow: 0 2px 10px rgba(0, 0, 0, .5); }
.tv-iqamah.iqamah-bg-8 .tv-iqamah-name { color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, .55); }
.tv-iqamah.iqamah-bg-8 .tv-iqamah-regular span { color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, .55); }
.tv-iqamah.iqamah-bg-8 .tv-flip-colon { color: #fff; }
.tv-iqamah.iqamah-bg-8 .tv-iqamah-hint { color: rgba(255, 255, 255, .9); }

/* Khusyuk: hitam penuh + teks kecil + petunjuk ketik. */
.tv-khusyuk { background: #000; z-index: 64; }
.tv-khusyuk-symbol { font-size: 90px; color: var(--tv-secondary); }
.tv-khusyuk-text { font-size: 44px; font-weight: 700; margin-top: 12px; }
.tv-khusyuk-next { font-size: 28px; color: rgba(255, 255, 255, .75); margin-top: 10px; font-variant-numeric: tabular-nums; }

/* Jimat tenaga: hampir hitam (bukan power-off — pelayar tidak boleh
   mematikan kuasa TV) + jam kecil + solat seterusnya. */
.tv-energy { background: rgba(0, 0, 0, .97); z-index: 65; }
.tv-energy-clock { font-size: 120px; font-weight: 800; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .85); }
.tv-energy-next { font-size: 30px; color: rgba(255, 255, 255, .6); margin-top: 8px; }
.tv-wake-hint {
  margin-top: 34px; font-size: 22px; color: rgba(255, 255, 255, .55);
  border: 1px solid rgba(255, 255, 255, .3); border-radius: 999px; padding: 10px 26px;
}

/* ---------- Senarai tema TV v1-v10 (dashboard masjid + admin) ----------
   Senarai bernombor boleh klik; item aktif diserlahkan emas. JS di
   public/app.js (TV_THEME_LIST / buildTvThemeList / initTvThemeLists)
   membina item dan memautkannya ke <select> susun atur. */
.tv-theme-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.tv-theme-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid #ddd; border-radius: 10px; cursor: pointer; background: #fff; }
.tv-theme-item:hover { border-color: #c9a227; }
.tv-theme-item.active { border-color: #c9a227; background: #fff8e1; box-shadow: 0 0 0 1px #c9a227; }
.tv-theme-item:focus-visible { outline: 2px solid #123a7d; outline-offset: 2px; }
.tv-theme-num { flex: none; width: 34px; height: 34px; border-radius: 50%; background: #123a7d; color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: 13px; }
.tv-theme-item.active .tv-theme-num { background: #c9a227; color: #111; }
.tv-theme-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tv-theme-name { font-weight: 800; }
.tv-theme-desc { font-size: 13px; color: #555; }
.tv-theme-badge { flex: none; font-size: 12px; font-weight: 700; color: #7c5a00; background: #f5c542; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }