/* ═══════════════════════════════════════════════════════════════
   GUHAN ASTRO — Cosmic header & gold flow (CSS only, no JS)
   Load after premium-refine.css
═══════════════════════════════════════════════════════════════ */

.header-accent-bar {
  height: 3px;
  background: linear-gradient(
    to right,
    #2d1f08 0%,
    #9a6c10 14%,
    #c9962a 30%,
    #e8c96d 50%,
    #c9962a 70%,
    #9a6c10 86%,
    #2d1f08 100%
  );
  position: relative;
  z-index: 3;
  flex-shrink: 0;
}

/* ── Deep-space header ─────────────────────────────────────── */
.header {
  position: sticky;
  isolation: isolate;
  overflow: hidden;
  border-bottom: 1px solid rgba(201, 150, 42, 0.38);
  box-shadow:
    0 4px 24px rgba(8, 12, 28, 0.45),
    0 0 40px rgba(88, 60, 160, 0.12);
  background-color: #0c1020;
  background-image:
    radial-gradient(ellipse 120% 90% at 8% 50%, rgba(72, 48, 140, 0.42) 0%, transparent 52%),
    radial-gradient(ellipse 90% 70% at 92% 15%, rgba(201, 150, 42, 0.14) 0%, transparent 48%),
    radial-gradient(ellipse 70% 50% at 50% 110%, rgba(40, 90, 160, 0.28) 0%, transparent 55%),
    linear-gradient(118deg, #060a14 0%, #101830 38%, #1a2550 62%, #121a32 100%);
}

/* Star dust + soft shimmer (decorative only) */
.header::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
  background-image:
    radial-gradient(1.2px 1.2px at 12% 22%, rgba(255, 255, 255, 0.85), transparent),
    radial-gradient(1px 1px at 28% 68%, rgba(255, 248, 220, 0.7), transparent),
    radial-gradient(1.5px 1.5px at 45% 35%, rgba(255, 255, 255, 0.9), transparent),
    radial-gradient(1px 1px at 62% 78%, rgba(255, 255, 255, 0.55), transparent),
    radial-gradient(1.2px 1.2px at 78% 28%, rgba(255, 236, 180, 0.75), transparent),
    radial-gradient(1px 1px at 88% 62%, rgba(255, 255, 255, 0.65), transparent),
    radial-gradient(1.4px 1.4px at 95% 18%, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(1px 1px at 18% 88%, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(1px 1px at 55% 12%, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(1px 1px at 35% 48%, rgba(255, 255, 255, 0.45), transparent);
  background-size: 100% 100%;
}

.header::after {
  display: block;
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  z-index: 1;
  opacity: 1;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(201, 150, 42, 0.25) 15%,
    rgba(255, 230, 140, 0.85) 50%,
    rgba(201, 150, 42, 0.25) 85%,
    transparent 100%
  );
}

.header-brand,
.header .ha,
.header .ha-container {
  position: relative;
  z-index: 2;
}

/* ── Elegant golden brand title ────────────────────────────── */
.header-title {
  font-family: 'Cinzel', serif;
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 800;
  letter-spacing: 0.22em;
  line-height: 1.12;
  text-transform: uppercase;
  color: #ffe97a;
  background: linear-gradient(
    165deg,
    #fffef8 0%,
    #fff0a8 18%,
    #ffd84d 42%,
    #e8b84b 68%,
    #c9962a 92%,
    #f5e6a8 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(0 0 14px rgba(255, 215, 90, 0.55))
    drop-shadow(0 0 28px rgba(201, 150, 42, 0.28))
    drop-shadow(0 2px 4px rgba(0, 0, 0, 0.65));
}

body.dark-theme .header-title {
  background: linear-gradient(
    165deg,
    #ffffff 0%,
    #ffef9a 22%,
    #ffd84d 48%,
    #f0cc70 72%,
    #c9962a 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(0 0 16px rgba(255, 220, 100, 0.65))
    drop-shadow(0 0 32px rgba(240, 204, 112, 0.35))
    drop-shadow(0 2px 5px rgba(0, 0, 0, 0.7));
}

.header-motto {
  font-family: 'Noto Sans Tamil', var(--font-tamil), sans-serif;
  color: rgba(255, 236, 200, 0.88);
  text-shadow: 0 0 12px rgba(201, 150, 42, 0.25);
}

.header-powered,
.header-system {
  font-family: 'Cinzel', serif;
  color: rgba(255, 232, 190, 0.82);
  letter-spacing: 0.14em;
}

.header-tag-sep {
  background: linear-gradient(135deg, #ffe97a, #c9962a);
  box-shadow: 0 0 6px rgba(255, 215, 90, 0.45);
}

.header-logo-wrap {
  background: radial-gradient(circle at 35% 28%, rgba(255, 240, 180, 0.35), rgba(20, 28, 55, 0.5));
  border: 2px solid rgba(240, 204, 112, 0.65);
  box-shadow:
    0 0 20px rgba(201, 150, 42, 0.35),
    0 0 36px rgba(88, 60, 160, 0.2),
    inset 0 0 12px rgba(255, 255, 255, 0.08);
}

.header-mobile-line {
  color: rgba(255, 232, 190, 0.78);
}

/* Header actions — readable on cosmic bar */
.header .btn-premium-gold,
.header .theme-toggle.btn-premium-gold {
  background: linear-gradient(180deg, #fff8e0 0%, #ffd84d 38%, #c9962a 100%);
  border-color: rgba(201, 150, 58, 0.75);
  color: #1a1004;
  box-shadow:
    0 2px 10px rgba(0, 0, 0, 0.35),
    0 0 14px rgba(255, 210, 80, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

body.dark-theme .header .btn-premium-gold,
body.dark-theme .header .theme-toggle.btn-premium-gold {
  background: linear-gradient(180deg, #fff4c8 0%, #f0cc70 45%, #c9962a 100%);
  color: #1a0f02;
}

/* ── Client tab bar — cosmic strip ───────────────────────────── */
.client-nav-bar {
  background: linear-gradient(180deg, rgba(16, 24, 48, 0.04) 0%, var(--card) 28%);
  border: 1px solid rgba(196, 165, 116, 0.28);
  box-shadow:
    0 2px 14px rgba(16, 24, 48, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.cnav-item:hover:not(.cnav-active) {
  background: rgba(21, 101, 192, 0.08);
}

.cnav-active {
  background: linear-gradient(
    165deg,
    rgba(21, 101, 192, 0.16) 0%,
    rgba(38, 166, 154, 0.08) 100%
  );
  border-bottom: 3px solid var(--accent-teal, #26a69a);
  box-shadow: inset 0 -1px 0 rgba(38, 166, 154, 0.2);
}

:root .cnav-active {
  background: linear-gradient(165deg, #1565c0 0%, #1976d2 50%, #1e88e5 100%);
  border-bottom-color: #26a69a;
}

.cnav-active .cnav-lbl {
  color: var(--primary);
  font-weight: 800;
}

:root .cnav-active .cnav-lbl {
  color: #ffffff;
}

/* Research / sub-tabs */
.tabs {
  border-color: rgba(21, 101, 192, 0.18);
  box-shadow: 0 1px 8px rgba(16, 24, 48, 0.06);
}

.tab.active {
  background: linear-gradient(135deg, rgba(21, 101, 192, 0.12), rgba(38, 166, 154, 0.08));
  border-color: rgba(21, 101, 192, 0.35);
  color: var(--primary);
}

:root .tab.active {
  background: linear-gradient(135deg, #1565c0, #1976d2);
  color: #ffffff;
  border-color: transparent;
  box-shadow: inset 0 -2px 0 #26a69a;
}

/* ── Section titles — teal accent band (light); gold in dark via override below ── */
.stitle {
  font-family: 'Cinzel', serif;
  color: var(--primary);
  border-left-color: var(--accent-teal, #26a69a);
  background: linear-gradient(
    90deg,
    rgba(21, 101, 192, 0.1) 0%,
    rgba(38, 166, 154, 0.05) 50%,
    transparent 100%
  );
}

body.dark-theme .stitle {
  color: #f0cc70;
  border-left-color: #c9962a;
}

/* Dashboard / engagement panels */
.engage-panel {
  border-color: rgba(196, 165, 116, 0.32);
  box-shadow:
    0 2px 12px rgba(16, 24, 48, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.engage-panel__title {
  font-family: 'Cinzel', serif;
  letter-spacing: 0.06em;
}

.dash-panchangam-sec {
  border-color: rgba(201, 150, 42, 0.4) !important;
  background: linear-gradient(180deg, rgba(201, 150, 42, 0.04) 0%, var(--card) 24%);
}

/* Sidebar — subtle celestial top edge */
.sidebar {
  border-right-color: rgba(196, 165, 116, 0.2);
  background-image: linear-gradient(
    180deg,
    rgba(45, 31, 8, 0.04) 0%,
    transparent 48px
  );
}

.sb-dashboard-btn.active,
.sidebar .cc.active {
  box-shadow: inset 3px 0 0 #c9962a;
}

/* Welcome / login shell if present */
.welcome .ht h1,
.auth-card h1 {
  font-family: 'Cinzel', serif;
  letter-spacing: 0.14em;
}

@media (prefers-reduced-motion: no-preference) {
  .header::before {
    animation: cosmicHeaderShimmer 18s ease-in-out infinite alternate;
  }
  .header-logo-wrap {
    animation: cosmicLogoPulse 4s ease-in-out infinite;
  }
}

@keyframes cosmicHeaderShimmer {
  0% { opacity: 0.42; }
  100% { opacity: 0.62; }
}

@keyframes cosmicLogoPulse {
  0%, 100% {
    box-shadow:
      0 0 18px rgba(201, 150, 42, 0.3),
      0 0 30px rgba(88, 60, 160, 0.15);
  }
  50% {
    box-shadow:
      0 0 24px rgba(255, 215, 90, 0.45),
      0 0 40px rgba(88, 60, 160, 0.22);
  }
}

@media (prefers-reduced-motion: reduce) {
  .header::before,
  .header-logo-wrap {
    animation: none;
  }
}

@media (max-width: 768px) {
  .header-title {
    font-size: 18px;
    letter-spacing: 0.16em;
  }
}

/* ═══════════════════════════════════════════════════════════════
   Warm dark mode — evening manuscript (overrides cool navy header)
═══════════════════════════════════════════════════════════════ */
body.dark-theme .header {
  border-bottom-color: rgba(201, 150, 42, 0.45);
  box-shadow:
    0 4px 24px rgba(20, 12, 4, 0.5),
    0 0 36px rgba(201, 150, 42, 0.1);
  background-color: #141008;
  background-image:
    radial-gradient(ellipse 120% 90% at 8% 50%, rgba(100, 70, 25, 0.28) 0%, transparent 52%),
    radial-gradient(ellipse 90% 70% at 92% 15%, rgba(201, 150, 42, 0.16) 0%, transparent 48%),
    radial-gradient(ellipse 70% 50% at 50% 110%, rgba(50, 35, 12, 0.4) 0%, transparent 55%),
    linear-gradient(118deg, #0f0c06 0%, #1a1408 35%, #2a2010 65%, #141008 100%);
}

body.dark-theme .header::before {
  opacity: 0.45;
  background-image:
    radial-gradient(1.2px 1.2px at 12% 22%, rgba(255, 248, 220, 0.75), transparent),
    radial-gradient(1px 1px at 28% 68%, rgba(255, 236, 180, 0.55), transparent),
    radial-gradient(1.5px 1.5px at 45% 35%, rgba(255, 240, 200, 0.8), transparent),
    radial-gradient(1px 1px at 62% 78%, rgba(255, 230, 180, 0.45), transparent),
    radial-gradient(1.2px 1.2px at 78% 28%, rgba(255, 220, 150, 0.65), transparent),
    radial-gradient(1px 1px at 88% 62%, rgba(255, 240, 200, 0.5), transparent);
}

body.dark-theme .header-logo-wrap {
  background: radial-gradient(circle at 35% 28%, rgba(255, 240, 180, 0.28), rgba(30, 22, 10, 0.65));
  box-shadow:
    0 0 20px rgba(201, 150, 42, 0.38),
    0 0 28px rgba(80, 55, 20, 0.25),
    inset 0 0 12px rgba(255, 255, 255, 0.06);
}

body.dark-theme .stitle {
  color: #f0cc70;
  background: linear-gradient(
    90deg,
    rgba(201, 150, 42, 0.18) 0%,
    rgba(45, 31, 8, 0.12) 45%,
    transparent 100%
  );
}

body.dark-theme .client-nav-bar {
  background: linear-gradient(180deg, rgba(20, 16, 8, 0.35) 0%, var(--card) 28%);
  border-color: rgba(201, 150, 42, 0.28);
  box-shadow:
    0 2px 14px rgba(20, 12, 4, 0.25),
    inset 0 1px 0 rgba(255, 240, 200, 0.06);
}

body.dark-theme .cnav-active {
  background: linear-gradient(
    165deg,
    rgba(201, 150, 42, 0.28) 0%,
    rgba(45, 31, 8, 0.2) 100%
  );
  border-bottom-color: #e8c96d;
}

body.dark-theme .cnav-active .cnav-lbl {
  color: #f5e6a8;
}

body.dark-theme .tab.active {
  background: linear-gradient(135deg, rgba(201, 150, 42, 0.22), rgba(45, 31, 8, 0.15));
  border-color: rgba(201, 150, 42, 0.4);
  color: #f0cc70;
}

body.dark-theme .engage-panel {
  border-color: rgba(201, 150, 42, 0.28);
  box-shadow:
    0 2px 12px rgba(20, 12, 4, 0.2),
    inset 0 1px 0 rgba(255, 240, 200, 0.05);
}

body.dark-theme .dash-panchangam-sec {
  background: linear-gradient(180deg, rgba(201, 150, 42, 0.08) 0%, var(--card) 24%);
}

body.dark-theme .sidebar {
  background-image: linear-gradient(
    180deg,
    rgba(201, 150, 42, 0.06) 0%,
    transparent 48px
  );
}

body.dark-theme .book-hero {
  background:
    radial-gradient(ellipse 80% 120% at 10% 0%, rgba(120, 80, 30, 0.15), transparent 55%),
    linear-gradient(135deg, rgba(20, 16, 8, 0.5) 0%, var(--card) 45%, var(--card2) 100%);
}

body.dark-theme .book-hero__title {
  background: linear-gradient(165deg, #ffe97a 0%, #f0cc70 50%, #e8c96d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media (prefers-reduced-motion: no-preference) {
  body.dark-theme .header-logo-wrap {
    animation: cosmicLogoPulseWarm 4s ease-in-out infinite;
  }
}

@keyframes cosmicLogoPulseWarm {
  0%, 100% {
    box-shadow:
      0 0 18px rgba(201, 150, 42, 0.32),
      0 0 28px rgba(80, 55, 20, 0.2);
  }
  50% {
    box-shadow:
      0 0 24px rgba(255, 215, 90, 0.48),
      0 0 36px rgba(120, 80, 30, 0.28);
  }
}