/* ============================================================
   Brihaspati Kendra — ASTROLOGER CONSOLE ("Night Sky") theme
   ------------------------------------------------------------
   ADDITIVE ONLY. Nothing here applies until <body> carries the
   class .astro-mode, which astrologer-shell.js adds only while
   the astrologer is actually viewing the dashboard.
   Your public site (styles.css) is never overridden.
   ============================================================ */

body.astro-mode {
  /* --- console palette --- */
  --ac-void:      #070A12;
  --ac-deep:      #0C1120;
  --ac-panel:     #121829;
  --ac-panel-2:   #171E33;
  --ac-raise:     #1D2540;
  --ac-line:      #262F4C;
  --ac-line-soft: #1B2238;

  --ac-saffron:   #FF7A1A;
  --ac-saffron-d: #C25204;
  --ac-gold:      #E8BE76;
  --ac-cyan:      #5FD4D0;
  --ac-violet:    #9B8CF5;
  --ac-rose:      #F2709C;
  --ac-green:     #4ADE9B;

  --ac-text:      #E9EDFA;
  --ac-text-2:    #A9B4D0;
  --ac-text-3:    #6E7998;

  --ac-glow: 0 0 0 1px rgba(255,122,26,0.22), 0 18px 48px rgba(0,0,0,0.55);
  --ac-soft: 0 10px 30px rgba(0,0,0,0.45);
  --ac-ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* --- remap the site's own tokens so inherited components follow --- */
  --surface-white: var(--ac-panel);
  --surface-cream: var(--ac-void);
  --text-dark:  var(--ac-text);
  --text-muted: var(--ac-text-2);
  --text-faint: var(--ac-text-3);
  --divider:    var(--ac-line);
  --glass:        rgba(255,255,255,0.03);
  --glass-strong: rgba(255,255,255,0.06);
  --glass-border: rgba(232,190,118,0.20);
  --glass-border-soft: rgba(232,190,118,0.10);
  --primary-orange: var(--ac-saffron);
  --primary-orange-dark: var(--ac-gold);
  --accent-gold: var(--ac-gold);

  background: var(--ac-void) !important;
  color: var(--ac-text);
}

html:has(body.astro-mode) { background: #070A12 !important; }

/* Starfield: two slow parallax layers, GPU-cheap, no images. */
body.astro-mode::before {
  content: '';
  position: fixed; inset: -25%;
  z-index: -1; pointer-events: none;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%, rgba(255,255,255,.55), transparent),
    radial-gradient(1.1px 1.1px at 34% 62%, rgba(232,190,118,.45), transparent),
    radial-gradient(1.6px 1.6px at 58% 24%, rgba(255,255,255,.38), transparent),
    radial-gradient(1.1px 1.1px at 76% 71%, rgba(155,140,245,.42), transparent),
    radial-gradient(1.3px 1.3px at 88% 36%, rgba(255,255,255,.34), transparent),
    radial-gradient(1.2px 1.2px at 22% 84%, rgba(95,212,208,.32), transparent),
    radial-gradient(1.5px 1.5px at 66% 92%, rgba(255,255,255,.30), transparent),
    radial-gradient(1.1px 1.1px at 46% 44%, rgba(255,255,255,.26), transparent);
  background-size: 620px 620px, 780px 780px, 520px 520px, 900px 900px,
                   700px 700px, 840px 840px, 600px 600px, 500px 500px;
  animation: ac-drift 180s linear infinite;
  opacity: .8;
}
body.astro-mode::after {
  content: '';
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1100px 620px at 78% -8%, rgba(255,122,26,0.13), transparent 62%),
    radial-gradient(900px 560px at 6% 8%,   rgba(155,140,245,0.11), transparent 60%),
    radial-gradient(1000px 700px at 50% 108%, rgba(95,212,208,0.07), transparent 62%);
}
@keyframes ac-drift { to { transform: translate3d(-300px, -220px, 0); } }

/* Only the page's own structural blocks get lifted above the starfield —
   NEVER a blanket "all direct children of body" rule. A blanket rule here
   was hijacking any other fixed-position widget on the page (e.g. a
   WhatsApp chat bubble), forcing it from position:fixed to position:relative
   and making it render inline near the top of the document instead of
   pinned to a screen corner. */
body.astro-mode header.brand,
body.astro-mode nav.tabs,
body.astro-mode section.hero-marketing,
body.astro-mode #kundliSection,
body.astro-mode #gunaSection,
body.astro-mode #chatSection,
body.astro-mode #reportsSection,
body.astro-mode #dashboardSection,
body.astro-mode #chatRoomSection,
body.astro-mode footer {
  position: relative;
  z-index: 1;
}

/* ---------- header ---------- */
body.astro-mode header.brand {
  background: linear-gradient(120deg, #0B1020 0%, #141B31 48%, #1A1230 100%) !important;
  border-bottom: 1px solid var(--ac-line);
  box-shadow: 0 1px 0 rgba(232,190,118,0.10), 0 16px 40px rgba(0,0,0,.5);
}
body.astro-mode header.brand h1 { color: var(--ac-text) !important; letter-spacing: -0.015em; }
body.astro-mode header.brand p  { color: var(--ac-text-2) !important; }
body.astro-mode .badge {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(232,190,118,.24) !important;
  box-shadow: 0 0 26px rgba(255,122,26,.20);
}
body.astro-mode .header-customer-id {
  background: rgba(255,122,26,.12) !important;
  border: 1px solid rgba(255,122,26,.30) !important;
  color: var(--ac-gold) !important;
}
body.astro-mode .header-auth-btn {
  background: rgba(255,255,255,.07) !important;
  border: 1px solid var(--ac-line) !important;
  color: var(--ac-text) !important;
}
body.astro-mode .auth-menu {
  background: var(--ac-panel) !important;
  border: 1px solid var(--ac-line) !important;
  color: var(--ac-text) !important;
  box-shadow: var(--ac-soft);
}
body.astro-mode .auth-menu a,
body.astro-mode .auth-menu button { color: var(--ac-text) !important; }

/* ---------- top nav ---------- */
body.astro-mode nav.tabs {
  background: rgba(12,17,32,.86) !important;
  border-bottom: 1px solid var(--ac-line-soft);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
body.astro-mode nav.tabs button {
  background: transparent !important;
  color: var(--ac-text-2) !important;
  border: 1px solid transparent !important;
  transition: all .22s var(--ac-ease);
}
body.astro-mode nav.tabs button:hover {
  color: var(--ac-text) !important;
  background: rgba(255,255,255,.05) !important;
}
body.astro-mode nav.tabs button.active,
body.astro-mode nav.tabs button[aria-selected="true"] {
  background: linear-gradient(180deg, rgba(255,122,26,.22), rgba(255,122,26,.10)) !important;
  border-color: rgba(255,122,26,.45) !important;
  color: #FFD5B0 !important;
  box-shadow: 0 0 22px rgba(255,122,26,.20);
}
/* the astrologer's own nav entry gets a quiet marker */
body.astro-mode #navDashboard::before {
  content: '◈ '; color: var(--ac-gold); font-size: .85em;
}

/* ---------- section shell ---------- */
body.astro-mode #dashboardSection { max-width: 1420px; margin: 0 auto; padding: 0 22px 72px; }
body.astro-mode #dashboardSection > .section-title {
  color: var(--ac-text) !important;
  font-size: 13px; font-weight: 700;
  letter-spacing: .20em; text-transform: uppercase;
  opacity: .5; margin: 26px 0 0;
}
body.astro-mode .section-sub { color: var(--ac-text-2) !important; }

/* ---------- panels / cards inherited from styles.css ---------- */
body.astro-mode .result-card,
body.astro-mode .ac-panel {
  background: linear-gradient(180deg, var(--ac-panel) 0%, var(--ac-deep) 100%) !important;
  border: 1px solid var(--ac-line) !important;
  border-radius: 18px !important;
  color: var(--ac-text) !important;
  box-shadow: var(--ac-soft);
}
body.astro-mode .result-card h3 { color: var(--ac-gold) !important; }

/* Diagnostics / test blocks are real but noisy — demote, don't delete. */
body.astro-mode #notifyPermissionBanner,
body.astro-mode #dashboardContent > .result-card {
  opacity: .58;
  transform: scale(.985);
  transform-origin: top center;
  transition: opacity .3s var(--ac-ease), transform .3s var(--ac-ease);
}
body.astro-mode #notifyPermissionBanner:hover,
body.astro-mode #dashboardContent > .result-card:hover { opacity: 1; transform: scale(1); }

/* ---------- inherited stat grid (Overview tab) ---------- */
body.astro-mode .stat-grid { grid-template-columns: repeat(auto-fit, minmax(178px,1fr)); gap: 14px; }
body.astro-mode .stat-card {
  background: linear-gradient(165deg, var(--ac-panel-2) 0%, var(--ac-deep) 100%) !important;
  border: 1px solid var(--ac-line) !important;
  border-radius: 16px !important;
  padding: 18px 16px !important;
  position: relative; overflow: hidden;
  box-shadow: var(--ac-soft);
}
body.astro-mode .stat-card::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--ac-saffron), transparent);
  opacity: .5;
}
body.astro-mode .stat-card:hover {
  border-color: rgba(255,122,26,.42) !important;
  box-shadow: var(--ac-glow) !important;
  transform: translateY(-4px);
}
body.astro-mode .stat-value {
  color: var(--ac-text) !important;
  font-variant-numeric: tabular-nums;
  font-size: 28px !important; font-weight: 700; letter-spacing: -.02em;
}
body.astro-mode .stat-label {
  color: var(--ac-text-3) !important;
  text-transform: uppercase; letter-spacing: .10em;
  font-size: 10px !important; font-weight: 700;
}
body.astro-mode .stat-sub { color: var(--ac-gold) !important; }

/* ---------- admin tabs ---------- */
body.astro-mode .admin-tabs {
  gap: 4px; padding: 5px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--ac-line);
  border-radius: 14px;
  margin: 22px 0 18px;
}
body.astro-mode .admin-tabs button {
  background: transparent !important;
  border: 1px solid transparent !important;
  color: var(--ac-text-2) !important;
  border-radius: 10px !important;
  padding: 9px 15px !important;
  font-weight: 600; font-size: 13px;
  white-space: nowrap;
  transition: all .2s var(--ac-ease);
}
body.astro-mode .admin-tabs button:hover {
  background: rgba(255,255,255,.05) !important; color: var(--ac-text) !important;
}
body.astro-mode .admin-tabs button.active {
  background: linear-gradient(180deg, var(--ac-saffron) 0%, var(--ac-saffron-d) 100%) !important;
  border-color: rgba(255,170,90,.5) !important;
  color: #14100A !important;
  box-shadow: 0 6px 20px rgba(255,122,26,.34);
}

/* ---------- inputs ---------- */
body.astro-mode input[type=text],
body.astro-mode input[type=search],
body.astro-mode input[type=number],
body.astro-mode input[type=date],
body.astro-mode select,
body.astro-mode textarea {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid var(--ac-line) !important;
  color: var(--ac-text) !important;
  border-radius: 11px !important;
}
body.astro-mode input::placeholder, body.astro-mode textarea::placeholder { color: var(--ac-text-3) !important; }
body.astro-mode input:focus, body.astro-mode select:focus, body.astro-mode textarea:focus {
  outline: none !important;
  border-color: rgba(255,122,26,.55) !important;
  box-shadow: 0 0 0 3px rgba(255,122,26,.14) !important;
}
body.astro-mode select option { background: var(--ac-panel); color: var(--ac-text); }

/* ---------- buttons ---------- */
body.astro-mode button.primary {
  background: linear-gradient(180deg, var(--ac-saffron) 0%, var(--ac-saffron-d) 100%) !important;
  border: 1px solid rgba(255,170,90,.42) !important;
  color: #14100A !important;
  box-shadow: 0 8px 24px rgba(255,122,26,.30);
}
body.astro-mode button.primary:hover { box-shadow: 0 10px 34px rgba(255,122,26,.46) !important; }
body.astro-mode button.secondary {
  background: rgba(255,255,255,.05) !important;
  border: 1px solid var(--ac-line) !important;
  color: var(--ac-text) !important;
  border-radius: 10px !important;
}
body.astro-mode button.secondary:hover {
  border-color: rgba(255,122,26,.45) !important;
  background: rgba(255,122,26,.10) !important;
  color: #FFD5B0 !important;
}

/* ---------- tables ---------- */
body.astro-mode .table-scroll {
  border: 1px solid var(--ac-line);
  border-radius: 16px;
  background: linear-gradient(180deg, var(--ac-panel) 0%, var(--ac-deep) 100%);
  box-shadow: var(--ac-soft);
}
body.astro-mode table { font-size: 13px; margin-top: 0; }
body.astro-mode thead th {
  background: rgba(255,255,255,.035) !important;
  color: var(--ac-text-3) !important;
  text-transform: uppercase; letter-spacing: .09em;
  font-size: 10px !important; font-weight: 700;
  padding: 13px 14px !important;
  border-bottom: 1px solid var(--ac-line) !important;
  position: sticky; top: 0; z-index: 2;
  backdrop-filter: blur(8px);
}
body.astro-mode tbody td {
  color: var(--ac-text) !important;
  border-bottom: 1px solid var(--ac-line-soft) !important;
  padding: 13px 14px !important;
  font-variant-numeric: tabular-nums;
}
body.astro-mode tbody tr { transition: background .16s var(--ac-ease); }
body.astro-mode tbody tr:hover td { background: rgba(255,122,26,.07) !important; }
body.astro-mode tbody tr:last-child td { border-bottom: none !important; }
body.astro-mode .cell-sub { color: var(--ac-text-3) !important; }
body.astro-mode .empty-cell { color: var(--ac-text-3) !important; text-align: center; padding: 42px !important; }
body.astro-mode table code {
  background: rgba(232,190,118,.10) !important;
  color: var(--ac-gold) !important;
  border: 1px solid rgba(232,190,118,.16);
}

/* ---------- pills ---------- */
body.astro-mode .pill { border-radius: 7px !important; padding: 4px 10px !important; letter-spacing: .05em; }
body.astro-mode .pill-ok {
  background: rgba(74,222,155,.13) !important; color: var(--ac-green) !important;
  border: 1px solid rgba(74,222,155,.30) !important;
}
body.astro-mode .pill-warn {
  background: rgba(255,122,26,.14) !important; color: #FFB37A !important;
  border: 1px solid rgba(255,122,26,.34) !important;
}
body.astro-mode .pill-muted {
  background: rgba(169,180,208,.10) !important; color: var(--ac-text-2) !important;
  border: 1px solid rgba(169,180,208,.20) !important;
}
body.astro-mode .error-text { color: #FF8B7A !important; }

/* ---------- footer ---------- */
body.astro-mode footer { border-top: 1px solid var(--ac-line); }
body.astro-mode footer, body.astro-mode footer p, body.astro-mode .hint { color: var(--ac-text-3) !important; }
body.astro-mode footer a { color: var(--ac-text-2) !important; }

/* ---------- chart viewer panel: keep its native light look ---------- */
/* This side panel is shared with the customer-facing site and reads the
   same global --text-dark / --glass variables our dark remap above
   repoints for admin components. That remap was leaking into this
   panel too, putting near-white text on its own near-white glass
   background — unreadable. Reset the variables back to their original
   site values, scoped to just this panel, so it always looks exactly
   like it does for a customer, regardless of which theme the rest of
   the dashboard is in. */
body.astro-mode .chart-panel,
body.astro-mode .chart-panel-overlay {
  --primary-orange: #E8690F;
  --primary-orange-dark: #B84800;
  --accent-gold: #D8A24C;
  --surface-white: #FFFFFF;
  --surface-cream: #FFF9F2;
  --glass: rgba(255, 255, 255, 0.24);
  --glass-strong: rgba(255, 255, 255, 0.40);
  --glass-border: rgba(216, 162, 76, 0.38);
  --glass-border-soft: rgba(216, 162, 76, 0.22);
  --text-dark: #26160C;
  --text-muted: #7C6857;
  --text-faint: #B3A08C;
  --divider: rgba(216, 162, 76, 0.20);
}
/* The variable reset above only helps rules that READ those variables. The
   dark-mode button/input rules elsewhere in this file use hardcoded !important
   colors instead, so they were still winning inside this "light island" panel —
   pale, low-contrast controls on an already-light background. Re-declaring them
   here, scoped to .chart-panel, wins on specificity (body.astro-mode .chart-panel
   button.secondary beats body.astro-mode button.secondary) and reproduces the
   exact values the customer-facing site uses for these same elements. */
body.astro-mode .chart-panel button.secondary {
  background: rgba(255,255,255,0.30) !important;
  color: var(--primary-orange-dark) !important;
  border: 1.5px solid var(--accent-gold) !important;
}
body.astro-mode .chart-panel button.secondary:hover {
  background: rgba(216,162,76,0.20) !important;
}
body.astro-mode .chart-panel button.secondary.active {
  background: linear-gradient(135deg, var(--primary-orange), var(--accent-gold)) !important;
  color: #fff !important;
  border-color: transparent !important;
}
body.astro-mode .chart-panel button.primary {
  background: linear-gradient(135deg, var(--primary-orange), var(--primary-orange-dark)) !important;
  color: #fff !important;
  border: none !important;
}
body.astro-mode .chart-panel input[type=text],
body.astro-mode .chart-panel input[type=number],
body.astro-mode .chart-panel select {
  background: rgba(255,255,255,0.55) !important;
  border: 1px solid var(--glass-border-soft) !important;
  color: var(--text-dark) !important;
}
body.astro-mode .chart-panel input::placeholder { color: var(--text-faint) !important; }
body.astro-mode .chart-panel table th { color: var(--text-muted) !important; }
body.astro-mode .chart-panel table td, body.astro-mode .chart-panel table th {
  border-color: var(--divider) !important; color: var(--text-dark) !important;
}

/* ---------- keep the branding header visible above the chart panel ---------- */
/* header.brand sat at z-index:60, well below the panel's 998/999, so opening
   the panel simply rendered on top of it, hiding the logo and the "BK" customer
   id badge. Lifting the header above the panel (but still below the auth
   dropdown and toast) means it now stays on-screen and clickable the whole
   time the panel is open, instead of being covered by it. */
body.astro-mode header.brand,
body.astro-mode .offer-banner {
  z-index: 1000;
}

/* ============================================================
   THE COMMAND DECK  (all markup injected by astrologer-shell.js)
   ============================================================ */

.ac-deck { display: grid; gap: 16px; margin: 20px 0 6px; }

/* ---- urgent "paid & waiting on you" banner ---- */
.ac-urgent {
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(135deg, rgba(242,112,156,.16), rgba(255,122,26,.10));
  border: 1px solid rgba(242,112,156,.4);
  border-radius: 14px; padding: 12px 16px;
  font-size: 13.5px; font-weight: 700; color: var(--ac-text);
  cursor: pointer; user-select: none;
  animation: acUrgentGlow 1.8s infinite;
}
.ac-urgent:hover { border-color: rgba(242,112,156,.7); }
.ac-urgent-dot {
  width: 10px; height: 10px; border-radius: 50%; background: var(--ac-rose); flex-shrink: 0;
  box-shadow: 0 0 0 rgba(242,112,156,.6); animation: acUrgentDot 1.4s infinite;
}
.ac-urgent-arrow { margin-left: auto; color: var(--ac-rose); font-weight: 900; }
@keyframes acUrgentDot {
  0%   { box-shadow: 0 0 0 0 rgba(242,112,156,.6); }
  70%  { box-shadow: 0 0 0 8px rgba(242,112,156,0); }
  100% { box-shadow: 0 0 0 0 rgba(242,112,156,0); }
}
@keyframes acUrgentGlow {
  0%, 100% { box-shadow: 0 0 0 rgba(242,112,156,0); }
  50%      { box-shadow: 0 6px 24px rgba(242,112,156,.22); }
}

/* ---- badge injected onto the "Requests" admin tab button ---- */
.admin-tabs button.has-urgent { border-color: rgba(242,112,156,.55); }
.ac-tab-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 17px; height: 17px; padding: 0 4px; margin-left: 6px;
  background: var(--ac-rose); color: #fff; border-radius: 999px;
  font-size: 10.5px; font-weight: 800; line-height: 1;
  animation: acUrgentDot 1.4s infinite;
}


/* --- greeting bar --- */
.ac-hero {
  display: flex; align-items: center; justify-content: space-between;
  gap: 22px; flex-wrap: wrap;
  padding: 22px 26px;
  border-radius: 20px;
  border: 1px solid var(--ac-line);
  background:
    radial-gradient(760px 200px at 88% 0%, rgba(255,122,26,.16), transparent 66%),
    linear-gradient(135deg, var(--ac-panel-2) 0%, var(--ac-deep) 100%);
  box-shadow: var(--ac-soft);
  position: relative; overflow: hidden;
}
.ac-hero::before {
  content: ''; position: absolute; right: -70px; top: -110px;
  width: 300px; height: 300px; border-radius: 50%;
  border: 1px solid rgba(232,190,118,.14);
  box-shadow: inset 0 0 90px rgba(232,190,118,.07);
}
.ac-hero-eyebrow {
  font-size: 10px; font-weight: 800; letter-spacing: .24em;
  text-transform: uppercase; color: var(--ac-saffron); margin: 0 0 7px;
}
.ac-hero-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 30px; font-weight: 600; letter-spacing: -.015em;
  color: var(--ac-text); margin: 0 0 6px; line-height: 1.15;
}
.ac-hero-sub { font-size: 13px; color: var(--ac-text-2); margin: 0; }
.ac-hero-right { display: flex; align-items: center; gap: 20px; }
.ac-clock {
  font-size: 34px; font-weight: 300; letter-spacing: -.02em;
  color: var(--ac-text); font-variant-numeric: tabular-nums; line-height: 1;
}
.ac-clock small { font-size: 14px; color: var(--ac-text-3); margin-left: 5px; font-weight: 500; }
.ac-clock-date {
  font-size: 11px; color: var(--ac-text-3); text-align: right;
  letter-spacing: .09em; text-transform: uppercase; margin-top: 7px; font-weight: 600;
}

/* --- do-not-disturb --- */
.ac-dnd {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 15px; border-radius: 30px; cursor: pointer; user-select: none;
  border: 1px solid var(--ac-line);
  background: rgba(255,255,255,.04);
  color: var(--ac-text-2);
  font-size: 12px; font-weight: 700; letter-spacing: .05em;
  transition: all .25s var(--ac-ease);
}
.ac-dnd:hover { border-color: rgba(232,190,118,.36); color: var(--ac-text); }
.ac-dnd-lamp {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--ac-green); box-shadow: 0 0 11px var(--ac-green);
  animation: ac-pulse 2.6s ease-in-out infinite;
}
@keyframes ac-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.ac-dnd.on { border-color: rgba(242,112,156,.5); color: var(--ac-rose); background: rgba(242,112,156,.10); }
.ac-dnd.on .ac-dnd-lamp { background: var(--ac-rose); box-shadow: 0 0 11px var(--ac-rose); animation: none; }
body.astro-dnd #dashboardContent > *:not(.ac-deck) { opacity: .26; filter: saturate(.35); transition: opacity .4s var(--ac-ease); }
body.astro-dnd .ac-deck-lower { opacity: .26; filter: saturate(.35); }

/* --- signal cards --- */
.ac-signals { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.ac-sig {
  padding: 17px 18px 13px;
  border-radius: 16px;
  border: 1px solid var(--ac-line);
  background: linear-gradient(168deg, var(--ac-panel-2) 0%, var(--ac-deep) 100%);
  position: relative; overflow: hidden;
  transition: transform .26s var(--ac-ease), border-color .26s var(--ac-ease), box-shadow .26s var(--ac-ease);
}
.ac-sig:hover { transform: translateY(-4px); border-color: rgba(255,122,26,.40); box-shadow: var(--ac-glow); }
.ac-sig-head { display: flex; align-items: center; gap: 8px; margin-bottom: 11px; }
.ac-sig-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.ac-sig-label {
  font-size: 10px; font-weight: 800; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ac-text-3);
}
.ac-sig-value {
  font-size: 33px; font-weight: 700; letter-spacing: -.03em;
  color: var(--ac-text); font-variant-numeric: tabular-nums; line-height: 1;
}
.ac-sig-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 9px; }
.ac-sig-delta { font-size: 11px; font-weight: 700; color: var(--ac-text-3); letter-spacing: .03em; }
.ac-sig-delta.up { color: var(--ac-green); }
.ac-sig-spark { width: 82px; height: 26px; flex: none; opacity: .92; }

/* --- deck sub-navigation (the "check them one at a time" tabs) --- */
.ac-subnav {
  display: flex; gap: 6px; overflow-x: auto; padding: 5px;
  border: 1px solid var(--ac-line); border-radius: 14px;
  background: rgba(255,255,255,.03);
}
.ac-subnav button {
  flex: none;
  display: flex; align-items: center; gap: 7px;
  padding: 9px 16px; border-radius: 10px; border: 1px solid transparent;
  background: transparent; color: var(--ac-text-2);
  font-size: 13px; font-weight: 650; letter-spacing: .01em;
  cursor: pointer; white-space: nowrap;
  transition: all .2s var(--ac-ease);
}
.ac-subnav button:hover { background: rgba(255,255,255,.05); color: var(--ac-text); }
.ac-subnav button.active {
  background: linear-gradient(180deg, var(--ac-saffron) 0%, var(--ac-saffron-d) 100%);
  border-color: rgba(255,170,90,.5); color: #14100A;
  box-shadow: 0 6px 20px rgba(255,122,26,.30);
}
.ac-subnav button .ac-sn-badge {
  min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
  background: rgba(255,255,255,.16); color: inherit;
  font-size: 10.5px; font-weight: 800; display: flex; align-items: center; justify-content: center;
}
.ac-subnav button.active .ac-sn-badge { background: rgba(0,0,0,.18); }
.ac-subpane { display: none; }
.ac-subpane.active { display: block; animation: ac-fade-in .3s var(--ac-ease); }
@keyframes ac-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* --- lower grid: wheel + queue --- */
.ac-deck-lower { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(0,1fr); gap: 16px; }
.ac-panel {
  border-radius: 20px;
  border: 1px solid var(--ac-line);
  background: linear-gradient(180deg, var(--ac-panel) 0%, var(--ac-deep) 100%);
  padding: 20px 22px;
  box-shadow: var(--ac-soft);
  min-width: 0;
}
.ac-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 4px; }
.ac-panel-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 18px; font-weight: 600; color: var(--ac-text); margin: 0; letter-spacing: -.01em;
}
.ac-panel-note { font-size: 11px; color: var(--ac-text-3); letter-spacing: .05em; text-transform: uppercase; font-weight: 600; }
.ac-panel-sub { font-size: 12px; color: var(--ac-text-3); margin: 3px 0 14px; }

/* --- the chakra dial --- */
.ac-wheel-wrap { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.ac-wheel { flex: 1 1 320px; min-width: 280px; max-width: 420px; }
.ac-wheel svg { width: 100%; height: auto; display: block; overflow: visible; }
.ac-hand { transform-origin: 200px 200px; transition: transform .6s var(--ac-ease); }
.ac-evt { cursor: default; transition: r .2s var(--ac-ease), opacity .2s var(--ac-ease); }
.ac-evt:hover { opacity: 1 !important; }
.ac-wheel-legend { flex: 1 1 170px; display: grid; gap: 11px; align-content: center; }
.ac-leg { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--ac-text-2); }
.ac-leg i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.ac-leg b { color: var(--ac-text); font-variant-numeric: tabular-nums; margin-left: auto; font-size: 15px; }

/* --- action queue --- */
.ac-queue { display: grid; gap: 9px; max-height: 340px; overflow-y: auto; padding-right: 5px; margin-right: -5px; }
.ac-queue::-webkit-scrollbar { width: 6px; }
.ac-queue::-webkit-scrollbar-thumb { background: var(--ac-line); border-radius: 4px; }
.ac-queue::-webkit-scrollbar-track { background: transparent; }
.ac-q {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 13px;
  border: 1px solid var(--ac-line-soft);
  background: rgba(255,255,255,.028);
  cursor: pointer;
  transition: all .2s var(--ac-ease);
}
.ac-q:hover { border-color: rgba(255,122,26,.42); background: rgba(255,122,26,.08); transform: translateX(3px); }
.ac-q-bar { width: 3px; align-self: stretch; border-radius: 3px; flex: none; }
.ac-q-body { min-width: 0; flex: 1; }
.ac-q-name {
  font-size: 13.5px; font-weight: 650; color: var(--ac-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ac-q-meta { font-size: 11.5px; color: var(--ac-text-3); margin-top: 2px; }
.ac-q-amt { font-size: 13px; font-weight: 700; color: var(--ac-gold); font-variant-numeric: tabular-nums; flex: none; }
.ac-empty {
  text-align: center; padding: 42px 18px; color: var(--ac-text-3); font-size: 13px;
  border: 1px dashed var(--ac-line); border-radius: 14px;
}
.ac-empty span { display: block; font-size: 25px; margin-bottom: 9px; opacity: .55; }

/* --- rhythm bars --- */
.ac-rhythm { display: flex; align-items: flex-end; gap: 9px; height: 112px; margin-top: 6px; }
.ac-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.ac-bar-track { width: 100%; height: 84px; display: flex; align-items: flex-end; }
.ac-bar {
  width: 100%; border-radius: 6px 6px 3px 3px;
  background: linear-gradient(180deg, var(--ac-saffron) 0%, rgba(255,122,26,.22) 100%);
  min-height: 3px;
  transition: height .55s var(--ac-ease), filter .2s var(--ac-ease);
}
.ac-bar-col:hover .ac-bar { filter: brightness(1.3); }
.ac-bar.today { background: linear-gradient(180deg, var(--ac-gold) 0%, rgba(232,190,118,.25) 100%); }
.ac-bar-lbl { font-size: 10px; color: var(--ac-text-3); font-weight: 700; letter-spacing: .06em; }
.ac-bar-col.is-today .ac-bar-lbl { color: var(--ac-gold); }

/* --- responsive: laptop-first, degrade gracefully --- */
@media (max-width: 1180px) {
  .ac-signals { grid-template-columns: repeat(2, 1fr); }
  .ac-deck-lower { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .ac-signals { grid-template-columns: 1fr 1fr; }
  .ac-hero { flex-direction: column; align-items: flex-start; }
  .ac-hero-title { font-size: 23px; }
  .ac-clock { font-size: 27px; }
  .ac-clock-date { text-align: left; }
  body.astro-mode #dashboardSection { padding: 0 14px 52px; }
}

@media (prefers-reduced-motion: reduce) {
  body.astro-mode::before { animation: none; }
  .ac-dnd-lamp { animation: none; }
}