* { box-sizing: border-box; }
:root {
  /* === Hindu mythology palette ===
     Each token has a sacred meaning + maps to existing semantic vars below
     so existing components keep working without refactor. */
  --kesari:    #ff9933;   /* saffron — courage, sacrifice (primary) */
  --kesari-deep:#c2410c;  /* deep saffron — devotion */
  --chandan:   #d4a373;   /* sandalwood — purity */
  --chandan-light:#f6e0c0;
  --sindoor:   #a91d2a;   /* vermilion red — auspicious */
  --haldi:     #f5b700;   /* turmeric yellow — prosperity */
  --kumkum:    #c41e3a;   /* sacred red — devotion */
  --mor-pankh: #0d7c8f;   /* peacock teal — wisdom (Krishna) */
  --tulsi:     #2f7d32;   /* holy basil green — vitality */
  --kamal:     #e85d75;   /* lotus pink — divinity */
  --bhasma:    #6b6258;   /* sacred ash — Shiva / transcendence */
  --shubhra:   #fbf6ee;   /* sacred ivory — knowledge */

  /* === Existing semantic vars — DARK theme (default) === */
  --bg: #0f1115;
  --bg-2: #131722;
  --bg-3: #1a1d24;
  --line: #232838;
  --ink: #e6e8eb;
  --ink-dim: #94a3b8;
  --saffron: var(--kesari);
  --saffron-dim: rgba(255, 153, 51, 0.12);
  --gold: var(--haldi);
  --green: #34d399;
  --red: #fda4af;
  --blue: #60a5fa;
  --shadow-sm: 0 1px 0 rgba(255,255,255,0.02);
  --shadow-md: 0 8px 24px -10px rgba(0,0,0,0.6);

  /* Display fonts */
  --font-display: "Cinzel", "Playfair Display", Georgia, serif;
  --font-deva: "Tiro Devanagari Hindi", "Noto Sans Devanagari", serif;
}

/* LIGHT theme — Mahakal day: chandan / shubhra / kesari-deep */
body.theme-light {
  --bg: var(--shubhra);
  --bg-2: #ffffff;
  --bg-3: #f6ead4;
  --line: #e6d2a6;
  --ink: #2a1a0a;
  --ink-dim: #8a6f4a;
  --saffron: var(--kesari-deep);
  --saffron-dim: rgba(194, 65, 12, 0.10);
  --gold: #b45309;
  --green: var(--tulsi);
  --red: var(--kumkum);
  --blue: var(--mor-pankh);
  --shadow-sm: 0 1px 2px rgba(120, 70, 20, 0.06);
  --shadow-md: 0 12px 36px -16px rgba(120, 70, 20, 0.18);
  color-scheme: light;
}
body {
  margin: 0;
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background:
    radial-gradient(ellipse at top, rgba(255,153,51,0.07), transparent 50%),
    radial-gradient(ellipse at bottom right, rgba(76,29,149,0.10), transparent 60%),
    var(--bg);
  color: var(--ink);
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* Trishul watermark — high-res SVG, fixed in the background.
   Image stays crisp at any size; opacity tuned per theme below. */
.trishul-watermark {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: url("/static/images/trishul.svg");
  background-repeat: no-repeat;
  background-position: center;
  /* SVG is 240×720 (1:3 aspect) — constrain by height so it always fits
     the viewport vertically; width auto-derives. Caps at 280px on big screens
     so it doesn't dwarf content. */
  background-size: auto min(85vh, 760px);
  opacity: 0.18;
  filter: drop-shadow(0 0 60px rgba(255, 153, 51, 0.45));
  transform: rotate(-6deg);
  user-select: none;
  animation: trishul-breathe 12s ease-in-out infinite alternate;
}
.trishul-watermark::after { content: ""; }   /* reset old emoji */

@keyframes trishul-breathe {
  0%   { transform: rotate(-6deg) scale(1);    filter: drop-shadow(0 0 60px rgba(255,153,51,0.45)); }
  100% { transform: rotate(-5deg) scale(1.02); filter: drop-shadow(0 0 90px rgba(255,153,51,0.65)); }
}

/* Corner trishuls — same SVG, different rotations + sizes */
body::before, body::after {
  content: "";
  position: fixed;
  pointer-events: none;
  z-index: 0;
  background-image: url("/static/images/trishul.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.10;
}
body::before {
  top: 30px;
  right: 30px;
  width: clamp(160px, 18vw, 240px);
  height: clamp(420px, 60vh, 640px);
  transform: rotate(12deg);
  opacity: 0.13;
}
body::after {
  bottom: 30px;
  left: 30px;
  width: clamp(160px, 18vw, 240px);
  height: clamp(420px, 60vh, 640px);
  transform: rotate(-12deg);
  opacity: 0.13;
}

/* All real content sits above the watermark */
.bar, main, .shell, .sidebar, .content { position: relative; z-index: 1; }

/* ---- Module-aware shell: vertical sidebar + content column ---- */
.shell {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
}
.sidebar {
  background: linear-gradient(180deg, rgba(255,153,51,0.06), var(--bg-2) 60%);
  border-right: 1px solid var(--line);
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.sidebar .brand {
  font-weight: 700;
  font-size: 17px;
  background: linear-gradient(90deg, var(--saffron), var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 0.02em;
  padding: 4px 8px 12px;
  border-bottom: 1px solid var(--line);
}
/* Each nav-group is a <details> element for free expand/collapse. The
   <summary> is the clickable header; siblings inside <details> are the
   nav links that show only when the group is open. */
.nav-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nav-group[open] > .nav-group-title { color: var(--saffron); }
.nav-group-title {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-dim);
  padding: 9px 10px;
  cursor: pointer;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
  transition: background 0.15s, color 0.15s;
  list-style: none;                  /* hide default marker */
}
.nav-group-title::-webkit-details-marker { display: none; }
.nav-group-title::before {
  content: "▸";
  display: inline-block;
  font-size: 10px;
  color: var(--ink-dim);
  transition: transform 0.18s ease;
  transform-origin: center;
  width: 10px;
}
.nav-group[open] > .nav-group-title::before {
  transform: rotate(90deg);
  color: var(--saffron);
}
.nav-group-title:hover {
  background: rgba(255, 153, 51, 0.06);
  color: var(--saffron);
}
.nav-group .nav-item { margin-left: 16px; }      /* indent under the disclosure */
.nav-item {
  display: block;
  padding: 8px 12px;
  border-radius: 7px;
  color: #cbd5e1;
  font-size: 13.5px;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
  border-left: 2px solid transparent;
}
.nav-item:hover {
  background: rgba(255, 153, 51, 0.06);
  color: var(--saffron);
  text-decoration: none;
}
.nav-item.active {
  background: rgba(255, 153, 51, 0.10);
  color: var(--saffron);
  border-left-color: var(--saffron);
  font-weight: 600;
}
.sidebar-foot {
  margin-top: auto;
  border-top: 1px solid var(--line);
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.user-pill {
  display: flex;
  flex-direction: column;
  padding: 6px 10px;
  background: var(--bg-3);
  border-radius: 7px;
  font-size: 12.5px;
}
.user-pill small { color: var(--ink-dim); font-size: 10.5px; }
.logout {
  display: block;
  text-align: center;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 7px;
  font-size: 12.5px;
  color: var(--ink-dim);
}
.logout:hover { color: var(--red); border-color: var(--red); text-decoration: none; }
.content {
  padding: 24px 28px;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}
.content-bare { padding: 0; max-width: none; }
body.login-page { overflow-x: hidden; }
body.login-page .trishul-watermark { display: none; }

@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar {
    position: static;
    height: auto;
    padding: 10px;
  }
  .sidebar .brand { padding-bottom: 8px; }
  .nav-group .nav-item { margin-left: 12px; padding: 6px 10px; font-size: 13px; }
  .sidebar-foot { flex-direction: row; }
  .user-pill { flex: 1; flex-direction: row; gap: 6px; align-items: center; }
}

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
code { background: var(--bg-3); padding: 1px 5px; border-radius: 3px; font-size: 12px; }

.bar {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  background: linear-gradient(90deg, rgba(255,153,51,0.08), var(--bg-2) 30%, var(--bg-2) 70%, rgba(76,29,149,0.08));
  border-bottom: 1px solid var(--line);
  gap: 18px;
  backdrop-filter: blur(8px);
}
.brand {
  font-weight: 700;
  font-size: 17px;
  background: linear-gradient(90deg, var(--saffron), var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 0.02em;
}
nav { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
nav a { color: #cbd5e1; transition: color 0.15s; }
nav a:hover { color: var(--saffron); text-decoration: none; }
.role { margin-left: auto; opacity: .6; font-size: 12px; }

main { padding: 24px 20px; max-width: 1280px; margin: 0 auto; }

h1 {
  margin: 0 0 16px;
  font-size: 26px;
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  padding-bottom: 10px;
}
/* Saffron→gold→saffron underline draws under every page heading */
h1::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 56px;
  height: 2px;
  background: linear-gradient(90deg, var(--saffron), var(--gold), transparent);
  border-radius: 2px;
}
h2 {
  margin: 28px 0 12px;
  font-size: 13px;
  color: var(--saffron);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  position: relative;
  padding-left: 22px;
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Lamp/diya bullet on every section heading */
h2::before {
  content: "🪔";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  filter: saturate(1.2) drop-shadow(0 0 6px rgba(255, 153, 51, 0.5));
  background: none;
  width: auto; height: auto;
  border-radius: 0;
}
h3 { margin: 0 0 10px; }

table {
  width: 100%;
  border-collapse: collapse;
  background: rgba(19, 23, 34, 0.85);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  backdrop-filter: blur(6px);
}
th, td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--line); }
th {
  background: var(--bg-3);
  font-size: 11px;
  color: var(--ink-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: rgba(255, 153, 51, 0.03); }

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
  margin: 12px 0 24px;
}
.tile {
  background: linear-gradient(160deg, rgba(255,153,51,0.06), rgba(19,23,34,0.95) 60%);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: transform 0.15s, border-color 0.15s;
}
.tile:hover {
  transform: translateY(-2px);
  border-color: var(--saffron-dim);
}
.tile::before {
  content: "🔱";
  position: absolute;
  right: -8px;
  bottom: -16px;
  font-size: 64px;
  opacity: 0.06;
  pointer-events: none;
}
.tile .num { font-size: 32px; font-weight: 800; color: #fff; }
.tile .lbl {
  font-size: 11px;
  color: var(--ink-dim);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-top: 4px;
  font-weight: 600;
}
.tile.ok .num { color: var(--green); }
.tile.warn .num { color: var(--gold); }

.alert {
  background: linear-gradient(90deg, rgba(255,153,51,0.10), rgba(180,83,9,0.20));
  border: 1px solid #b45309;
  padding: 12px 16px;
  border-radius: 10px;
  margin: 8px 0 18px;
  color: #fde68a;
}

.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: #1f2937;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.badge.senior { background: #4c1d95; color: #ddd6fe; }
.badge.st-confirmed { background: #064e3b; color: #6ee7b7; }
.badge.st-pending { background: #1e3a8a; color: #93c5fd; }
.badge.st-awaiting_payment { background: #78350f; color: #fcd34d; }
.badge.st-cancelled { background: #4c0519; color: #fda4af; }
.badge.st-rejected { background: #3f0f0f; color: #fca5a5; }

.bar-bg { background: var(--line); height: 8px; border-radius: 4px; }
.bar-fill {
  background: linear-gradient(90deg, var(--saffron), var(--gold) 50%, var(--green));
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s;
}

form.row, form.filter, form { display: flex; gap: 8px; flex-wrap: wrap; }
input, select, button {
  background: var(--bg-3);
  color: var(--ink);
  border: 1px solid var(--line);
  padding: 9px 12px;
  border-radius: 7px;
  font-size: 14px;
}
input:focus, select:focus { outline: none; border-color: var(--saffron); }
button {
  background: linear-gradient(180deg, var(--saffron), #e87c1e);
  border-color: var(--saffron);
  color: #1a0e00;
  font-weight: 700;
  cursor: pointer;
  transition: filter 0.15s, transform 0.1s;
}
button:hover { filter: brightness(1.1); }
button:active { transform: translateY(1px); }

.card {
  background: rgba(19, 23, 34, 0.85);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px;
  margin: 8px 0 18px;
  backdrop-filter: blur(6px);
}
.narrow { max-width: 360px; margin: 60px auto; }
.narrow form { flex-direction: column; }
.narrow label { display: block; font-size: 12px; color: var(--ink-dim); }
.narrow input { width: 100%; margin-top: 4px; }
.err { color: var(--red); }
.hint { font-size: 12px; color: var(--ink-dim); }

.btn.block {
  display: block;
  text-align: center;
  padding: 9px 12px;
  border-radius: 7px;
  border: 1px solid var(--saffron);
  color: var(--saffron);
  background: transparent;
  font-weight: 600;
  margin: 8px 0;
}
.btn.block:hover {
  background: var(--saffron-dim);
  text-decoration: none;
}

.sim-grid { display: grid; grid-template-columns: 240px 1fr; gap: 16px; }
.phones { list-style: none; padding: 0; margin: 0; }
.phones li { padding: 6px 0; border-bottom: 1px dashed var(--line); }
.phones a.active { color: var(--green); font-weight: 700; }
.chat {
  background: rgba(10, 13, 18, 0.92);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px;
  height: 60vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}
.msg { max-width: 75%; padding: 8px 12px; border-radius: 12px; white-space: pre-wrap; }
.msg.in { background: #1e3a8a; align-self: flex-end; border-bottom-right-radius: 2px; }
.msg.out { background: #134e2a; align-self: flex-start; border-bottom-left-radius: 2px; }

small { color: var(--ink-dim); }
.ok { color: var(--green); font-weight: 600; }
ol li { margin-bottom: 6px; }

@media (max-width: 640px) {
  .bar { flex-direction: column; align-items: flex-start; }
  nav { gap: 8px; font-size: 13px; }
  .role { margin-left: 0; }
  main { padding: 16px 12px; }
  h1 { font-size: 22px; }
  .tile { padding: 14px; }
  .tile .num { font-size: 26px; }
}

/* ==========================================================================
   Mahakal hero / banner treatments
   --------------------------------------------------------------------------
   Each .hero-* uses a real photo if present (e.g. /static/images/temple-hero.jpg)
   layered over the SVG shikhara silhouette as a guaranteed fallback. If the
   JPG is missing the SVG still gives a credible Mahakal evening look.
   ========================================================================== */

/* ---- LOGIN: full-bleed split hero ---- */
.login-hero {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  overflow: hidden;
  isolation: isolate;
}
.login-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(110deg, rgba(15,17,21,0.55) 40%, rgba(15,17,21,0.95) 65%, rgba(15,17,21,1) 100%),
    image-set(
      url("/static/images/temple-hero.jpg") 1x
    ),
    url("/static/images/shikhara.svg");
  background-color: #0f1115;
  background-size: cover, cover, cover;
  background-position: center, center, bottom;
  background-repeat: no-repeat;
  z-index: -1;
  filter: saturate(1.05);
}
.login-hero::after {
  content: "🔱";
  position: absolute;
  top: 6%;
  left: 6%;
  font-size: 88px;
  opacity: 0.18;
  filter: drop-shadow(0 0 28px rgba(255,153,51,0.5));
  pointer-events: none;
}
.login-hero-copy {
  padding: clamp(36px, 7vw, 100px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  z-index: 1;
}
.login-hero-copy .deva {
  font-family: "Tiro Devanagari Hindi", "Noto Sans Devanagari", serif;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.1;
  background: linear-gradient(180deg, #ffe28a, var(--saffron) 60%, #c2410c);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 0.01em;
}
.login-hero-copy .eyebrow {
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.login-hero-copy h1 {
  font-size: clamp(28px, 3.4vw, 44px);
  margin: 0;
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.005em;
}
.login-hero-copy .lede {
  color: #cbd5e1;
  font-size: 15px;
  max-width: 460px;
  line-height: 1.6;
}
.login-hero-copy .chant {
  margin-top: 14px;
  color: var(--saffron);
  font-weight: 600;
  letter-spacing: 0.06em;
}
.login-hero-form {
  background: rgba(15, 17, 21, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-left: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 5vw, 60px);
  z-index: 1;
}
.login-hero-form .card {
  margin: 0;
  width: 100%;
  max-width: 380px;
  background: rgba(19, 23, 34, 0.92);
  border-color: rgba(255,153,51,0.18);
  box-shadow: 0 30px 80px -30px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,153,51,0.05) inset;
}
.login-hero-form .card h2 {
  margin: 0 0 14px;
  font-size: 14px;
  color: var(--saffron);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.login-hero-form .card .lock-row {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 18px;
}
.login-hero-form .card .lock-row .ic {
  width: 36px; height: 36px; border-radius: 10px;
  background: linear-gradient(160deg, var(--saffron), #b45309);
  display: grid; place-items: center; font-size: 18px;
  color: #1a0e00;
}
.login-hero-form .card .lock-row .ttl {
  font-size: 18px; font-weight: 700; color: #fff; letter-spacing: 0.005em;
}
.login-hero-form .card .lock-row .sub {
  font-size: 11px; color: var(--ink-dim); letter-spacing: 0.08em; text-transform: uppercase;
}

@media (max-width: 900px) {
  .login-hero { grid-template-columns: 1fr; min-height: auto; }
  .login-hero::before { background-position: top, top, bottom; }
  .login-hero-copy { padding: 60px 24px 32px; min-height: 380px; justify-content: flex-end; }
  .login-hero-form { border-left: 0; border-top: 1px solid var(--line); }
}

/* ---- PUBLIC CAMPAIGN: photo banner with overlay ---- */
.temple-banner {
  position: relative;
  height: 220px;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 18px;
  background:
    linear-gradient(180deg, rgba(15,17,21,0.0) 30%, rgba(15,17,21,0.85) 100%),
    url("/static/images/temple-banner.jpg"),
    url("/static/images/shikhara.svg");
  background-color: #1a0e00;
  background-size: cover, cover, cover;
  background-position: center, center, bottom;
  background-repeat: no-repeat;
  border: 1px solid var(--line);
  box-shadow: 0 20px 60px -30px rgba(0,0,0,0.8);
}
.temple-banner .banner-tag {
  position: absolute;
  top: 14px; left: 16px;
  background: rgba(15,17,21,0.7);
  border: 1px solid rgba(255,153,51,0.3);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--saffron);
  backdrop-filter: blur(6px);
}
.temple-banner .banner-foot {
  position: absolute;
  left: 18px; right: 18px; bottom: 14px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}
.temple-banner .banner-deva {
  font-family: "Tiro Devanagari Hindi", "Noto Sans Devanagari", serif;
  font-size: 28px;
  background: linear-gradient(180deg, #ffe28a, var(--saffron));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
}
.temple-banner .banner-place {
  color: #cbd5e1;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* ---- DASHBOARD: slim banner above the heading ---- */
.temple-strip {
  position: relative;
  height: 110px;
  border-radius: 14px;
  overflow: hidden;
  margin: 0 0 18px;
  background:
    linear-gradient(90deg, rgba(15,17,21,0.92) 0%, rgba(15,17,21,0.55) 45%, rgba(15,17,21,0.05) 100%),
    url("/static/images/temple-dashboard.jpg"),
    url("/static/images/shikhara.svg");
  background-color: #0f1115;
  background-size: cover, cover, cover;
  background-position: center, center, bottom;
  background-repeat: no-repeat;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  padding: 0 22px;
}
.temple-strip .ts-left {
  display: flex; flex-direction: column; gap: 4px;
}
.temple-strip .ts-deva {
  font-family: "Tiro Devanagari Hindi", "Noto Sans Devanagari", serif;
  font-size: 22px;
  background: linear-gradient(180deg, #ffe28a, var(--saffron));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
}
.temple-strip .ts-sub {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.temple-strip .ts-chant {
  margin-left: auto;
  font-size: 12px;
  color: var(--saffron);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  opacity: 0.9;
}
@media (max-width: 640px) {
  .temple-strip { height: 90px; padding: 0 14px; }
  .temple-strip .ts-chant { display: none; }
  .temple-banner { height: 170px; }
  .temple-banner .banner-deva { font-size: 22px; }
}

/* ==========================================================================
   LIGHT THEME — concrete overrides for places where the dark palette is
   baked into gradients / rgba blacks / shadows that don't auto-flip via vars.
   ========================================================================== */
body.theme-light {
  background:
    radial-gradient(ellipse at top, rgba(194,65,12,0.08), transparent 55%),
    radial-gradient(ellipse at bottom right, rgba(180,83,9,0.08), transparent 60%),
    var(--bg);
  color: var(--ink);
}
body.theme-light .trishul-watermark { opacity: 0.16; filter: drop-shadow(0 0 50px rgba(194,65,12,0.35)); }
body.theme-light::before, body.theme-light::after { opacity: 0.12; }

body.theme-light .sidebar {
  background: linear-gradient(180deg, rgba(194,65,12,0.06), #fff 70%);
  border-right: 1px solid var(--line);
}
body.theme-light .sidebar .brand,
body.theme-light .brand,
body.theme-light .login-hero-copy .deva,
body.theme-light .public-shell h1,
body.theme-light .temple-banner .banner-deva,
body.theme-light .temple-strip .ts-deva {
  background: linear-gradient(180deg, var(--saffron), #7c2d12);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
body.theme-light .nav-item { color: #4a3a25; }
body.theme-light .nav-item:hover { background: rgba(194,65,12,0.08); }
body.theme-light .nav-item.active {
  background: rgba(194,65,12,0.12);
  border-left-color: var(--saffron);
}
body.theme-light .user-pill { background: var(--bg-3); color: var(--ink); }
body.theme-light .logout { color: var(--ink-dim); border-color: var(--line); }

body.theme-light .bar {
  background: linear-gradient(90deg, rgba(194,65,12,0.06), #fff 30%, #fff 70%, rgba(180,83,9,0.06));
  border-bottom: 1px solid var(--line);
}

body.theme-light table {
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
body.theme-light th { background: var(--bg-3); color: #6b5230; }
body.theme-light tbody tr:hover { background: rgba(194,65,12,0.04); }

body.theme-light .tile {
  background: linear-gradient(160deg, #fff 0%, #fff8ec 100%);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
}
body.theme-light .tile .num { color: #2a1a0a; }
body.theme-light .tile.ok .num { color: #047857; }
body.theme-light .tile.warn .num { color: #b45309; }
body.theme-light .tile::before { color: var(--saffron); opacity: 0.07; }

body.theme-light .alert {
  background: linear-gradient(90deg, rgba(255,237,213,1), rgba(254,215,170,1));
  border: 1px solid #fdba74;
  color: #7c2d12;
}

body.theme-light .badge { background: #f3e9d2; color: #4a3a25; }
body.theme-light .badge.senior { background: #e9d5ff; color: #581c87; }
body.theme-light .badge.st-confirmed { background: #d1fae5; color: #065f46; }
body.theme-light .badge.st-pending { background: #dbeafe; color: #1e40af; }
body.theme-light .badge.st-awaiting_payment { background: #fef3c7; color: #92400e; }
body.theme-light .badge.st-cancelled { background: #fecaca; color: #991b1b; }
body.theme-light .badge.st-rejected { background: #fecaca; color: #7f1d1d; }

body.theme-light input, body.theme-light select {
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
}
body.theme-light input:focus, body.theme-light select:focus { border-color: var(--saffron); }
body.theme-light button {
  background: linear-gradient(180deg, var(--saffron), #7c2d12);
  border-color: var(--saffron);
  color: #fff;
}

body.theme-light .card {
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
}

body.theme-light a { color: var(--blue); }
body.theme-light code { background: var(--bg-3); color: #4a3a25; }

body.theme-light h2 { color: #7c2d12; }
body.theme-light h2::before { background: none; filter: saturate(1.3) drop-shadow(0 0 8px rgba(194,65,12,0.4)); }

body.theme-light .chat { background: #fffaf0; border: 1px solid var(--line); }
body.theme-light .msg.in { background: #dbeafe; color: #1e3a8a; }
body.theme-light .msg.out { background: #d1fae5; color: #064e3b; }

body.theme-light .login-hero-form { background: rgba(255,255,255,0.78); border-left: 1px solid var(--line); }
body.theme-light .login-hero-form .card {
  background: #fff;
  border-color: var(--line);
  box-shadow: 0 30px 80px -30px rgba(120, 70, 20, 0.25);
}

body.theme-light .public-card {
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
}

body.theme-light .temple-strip { background-color: #fbf6ee; }
body.theme-light .temple-strip .ts-sub { color: var(--ink-dim); }

/* Cinematic hero — when light theme, swap night sky to dawn / golden hour */
body.theme-light .cine-stage { background: #fff8ec; }
body.theme-light .cine-sky {
  background:
    radial-gradient(ellipse at 50% 80%, rgba(255,178,74,0.4), transparent 50%),
    radial-gradient(ellipse at 30% 40%, rgba(254,215,170,0.5), transparent 60%),
    linear-gradient(180deg, #ffe8c8 0%, #ffd9a8 45%, #ffb878 100%);
}
body.theme-light .cine-sky::before { opacity: 0; }
body.theme-light .cine-form .card {
  background: rgba(255,255,255,0.85);
  border-color: rgba(194,65,12,0.18);
  box-shadow: 0 30px 90px -30px rgba(120, 70, 20, 0.35);
}
body.theme-light .cine-copy h1 { color: #2a1a0a; text-shadow: 0 1px 0 rgba(255,255,255,0.4); }
body.theme-light .cine-copy .lede { color: #4a3a25; text-shadow: none; }
body.theme-light .cine-copy .eyebrow { color: #6b5230; }
body.theme-light .cine-copy .chant { color: #7c2d12; text-shadow: none; }
body.theme-light .cine-form .lock-row .ttl { color: #2a1a0a; }
body.theme-light .cine-form .lock-row .sub { color: #6b5230; }