/* ═══════════════════════════════════════════════════════════════════
   HOME COMMAND MATERIALS — durable theme template
   ───────────────────────────────────────────────────────────────────
   Black reflective glass + light-light champagne gold (#E1D6B7)
   + offset brown edges. Lighting model, not flat hex swaps.

   Load LAST (after home.html page styles + tlyn-brand.css).
   This file is the source of truth. Do NOT re-theme by editing
   only home-polish-preview.html — it gets rebuilt from home.html.

   Template home: Website/templates/aeternus_homeowner_theme/
   Apply: Website/scripts/build-home-polish-preview.sh
   Ship: add this same <link> to live home.html after Boo signs off.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --obsidian: #0C0B0A !important;
  --graphite: #0A0908 !important;
  --slate: #13110E !important;
  --slate-hi: #191713 !important;
  --ivory: #F4F1E9 !important;
  --body: #C7C3B8 !important;
  --muted: #9E9A8E !important;
  --gold: #E1D6B7 !important;
  --gold-lite: #F3EBD3 !important;
  --gold-deep: #A68A56 !important;
  --gold-glow: rgba(225, 214, 183, 0.14) !important;
  --gold-brd: rgba(225, 214, 183, 0.32) !important;
  --champ: #F6EFD9 !important;
  --lux-hair: rgba(255, 248, 232, 0.12) !important;
  --lux-hair-hi: rgba(255, 248, 232, 0.22) !important;
  --border: rgba(255, 248, 232, 0.09) !important;
  --border-mid: rgba(255, 248, 232, 0.14) !important;
  --green: #34D399 !important;
  --amber: #FBBF24 !important;
  --orange: #FB923C !important;
  --red: #F87171 !important;
  --font-display: "Cormorant Garamond", "Fraunces", Georgia, serif !important;
  --font-body: "Inter", system-ui, sans-serif !important;
  --font-mono: "JetBrains Mono", ui-monospace, monospace !important;
  --font-mark: "Cinzel", "Trajan Pro", Georgia, serif !important;
  --glass-bg: linear-gradient(160deg, #13110E 0%, #0A0908 55%, #070606 100%);
  --glass-spec: linear-gradient(
    118deg,
    rgba(255, 252, 242, 0.2) 0%,
    rgba(255, 252, 242, 0.08) 20%,
    transparent 42%
  ),
    linear-gradient(
      118deg,
      transparent 55%,
      rgba(255, 252, 242, 0.04) 70%,
      transparent 78%
    );
  --glass-shadow: 0 24px 60px rgba(0, 0, 0, 0.85), 0 6px 18px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 251, 238, 0.14),
    inset 0 -1px 0 rgba(94, 74, 44, 0.22);
  --glass-border: 1px solid rgba(255, 248, 232, 0.12);
  --metal-text: linear-gradient(
    180deg,
    #fffffa 0%,
    #f6eed6 40%,
    #e1d6b7 62%,
    #d9cca6 78%,
    #f2e9ce 100%
  );
  --cta-gold: linear-gradient(135deg, #fffdf4, #e1d6b7 60%, #cdba8c);
}

/* ── Page base: mid-dark so panel shadows can fall ── */
html,
body {
  background: #0c0b0a !important;
  color: var(--body) !important;
  font-family: var(--font-body) !important;
}
body::before {
  background: radial-gradient(140% 110% at 50% -20%, #191713, #0c0b0a 55%, #070706),
    radial-gradient(900px 520px at 55% -8%, rgba(225, 214, 183, 0.09), transparent 62%) !important;
}

/* ── Preview ribbon (only when #home-polish-banner exists) ── */
#home-polish-banner {
  position: relative;
  z-index: 60;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #0a0800;
  background: var(--cta-gold);
  border-bottom: 1px solid rgba(94, 74, 44, 0.35);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
#home-polish-banner a {
  color: #0a0800;
  font-weight: 800;
  text-decoration: underline;
}
#home-polish-banner .pill {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 99px;
  border: 1px solid rgba(20, 16, 10, 0.28);
  background: rgba(255, 255, 255, 0.35);
}

/* ── Topbar ── */
#topbar {
  background: linear-gradient(180deg, rgba(12, 11, 10, 0.94), rgba(7, 6, 6, 0.9)) !important;
  backdrop-filter: blur(18px) saturate(1.15) !important;
  border-bottom: 1px solid rgba(255, 248, 232, 0.1) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45) !important;
}
#topbar::before,
#topbar::after {
  display: none !important; /* kill legacy gold rule lines */
}
.logo {
  font-family: var(--font-mark) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  background: var(--metal-text) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  filter: drop-shadow(0 0 14px rgba(240, 232, 206, 0.4)) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.logo em {
  font-style: normal !important;
  -webkit-text-fill-color: transparent !important;
  background: inherit !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}
.logo img.tlyn-logo,
.logo img.hdr-crest,
img.tlyn-logo.hdr-crest {
  -webkit-text-fill-color: initial !important;
  filter: drop-shadow(0 0 10px rgba(225, 214, 183, 0.55))
    drop-shadow(0 0 22px rgba(225, 214, 183, 0.25)) !important;
  width: 28px !important;
  height: 28px !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
}
.top-tag {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  letter-spacing: 0.14em !important;
  color: var(--gold-lite) !important;
  border: 1px solid var(--gold-brd) !important;
  background: var(--gold-glow) !important;
  border-radius: 99px !important;
  box-shadow: 0 0 18px rgba(225, 214, 183, 0.12) !important;
}
#watch-tick {
  color: var(--muted) !important;
}
#watch-tick .dot {
  background: var(--green) !important;
  box-shadow: 0 0 10px rgba(52, 211, 153, 0.7) !important;
}
.top-btn {
  background: var(--glass-bg) !important;
  border: var(--glass-border) !important;
  color: var(--body) !important;
  border-radius: 10px !important;
  box-shadow: inset 0 1px 0 rgba(255, 251, 238, 0.08) !important;
}
.top-btn:hover {
  color: var(--champ) !important;
  border-color: rgba(225, 214, 183, 0.4) !important;
}

/* ── Sidebar OS ── */
#sidebar {
  background: linear-gradient(180deg, rgba(12, 11, 10, 0.97), rgba(7, 6, 6, 0.98)) !important;
  border-right: 1px solid rgba(255, 248, 232, 0.1) !important;
  backdrop-filter: blur(16px) !important;
}
#sidebar::after {
  display: none !important;
}
.sb-sec {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  letter-spacing: 0.16em !important;
  color: rgba(158, 154, 142, 0.85) !important;
}
.sb-item {
  color: var(--body) !important;
  border-radius: 12px !important;
  border-left: 3px solid transparent !important;
  background: transparent !important;
  text-shadow: none !important;
}
.sb-item:hover {
  color: var(--ivory) !important;
  background: rgba(255, 248, 232, 0.04) !important;
  transform: none !important;
}
/* Active: champagne glass pill — ink on gold, not green/dark mess */
.sb-item.active {
  color: #0a0800 !important;
  font-weight: 700 !important;
  text-shadow: none !important;
  background: var(--cta-gold) !important;
  border-left-color: transparent !important;
  box-shadow: 0 4px 18px rgba(225, 214, 183, 0.28),
    inset 0 1px 0 rgba(255, 252, 240, 0.65) !important;
}
.sb-item.active:hover {
  transform: none !important;
}
/* Homeowner champagne glow icons (assets/icons/champagne/homeowner/) */
.sb-item img.sb-ico,
.tab img.t-ico {
  width: 22px !important;
  height: 22px !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  filter: drop-shadow(0 0 4px rgba(240, 220, 150, 0.35)) !important;
  opacity: 1 !important;
}
.tab img.t-ico {
  width: 18px !important;
  height: 18px !important;
}
.sb-item:hover img.sb-ico {
  filter: drop-shadow(0 0 10px rgba(255, 240, 180, 0.7))
    drop-shadow(0 0 18px rgba(225, 214, 183, 0.4)) !important;
  opacity: 1 !important;
}
/* Gold active pill → dark ink icon for contrast */
.sb-item.active img.sb-ico {
  background: transparent !important;
  filter: brightness(0) saturate(100%) !important;
  opacity: 0.78 !important;
}
.tab.active img.t-ico {
  filter: drop-shadow(0 0 8px rgba(255, 240, 180, 0.75))
    drop-shadow(0 0 14px rgba(225, 214, 183, 0.45)) !important;
  opacity: 1 !important;
}
.sb-build {
  border: 1px solid var(--gold-brd) !important;
  background: var(--gold-glow) !important;
}
.sb-build-t,
.sb-build-c {
  color: var(--gold-lite) !important;
}
.sb-foot b {
  color: var(--gold-lite) !important;
}

/* ── Masthead / display type ── */
/* Street address masthead — Inter, not serif (serif numbers look bad) */
#mast-addr,
#masthead #mast-addr {
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  font-variant-numeric: lining-nums tabular-nums !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: #f4f1e9 !important;
  color: #f4f1e9 !important;
  filter: none !important;
  text-shadow: 0 0 28px rgba(225, 214, 183, 0.18) !important;
}
#mast-addr em {
  font-style: normal !important;
  font-weight: 600 !important;
  color: #f3ebd3 !important;
  -webkit-text-fill-color: #f3ebd3 !important;
  background: none !important;
}
#mast-sub {
  color: var(--muted) !important;
}
.mast-chip {
  background: rgba(255, 248, 232, 0.04) !important;
  border: 1px solid var(--border) !important;
  color: var(--body) !important;
  border-radius: 10px !important;
}

/* ── Black glass panels (all tabs) ── */
.panel,
#main .panel,
.hp-card,
.sys,
.gt-moment,
.nw-pro,
.check-row,
#briefing,
#health-panel.panel,
#living-home.panel {
  position: relative !important;
  overflow: hidden !important;
  background: var(--glass-bg) !important;
  border: var(--glass-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--glass-shadow) !important;
  /* kill 3D tilt chrome that reads tacky on product UI */
  transform: none !important;
  backdrop-filter: blur(12px) !important;
}
.panel::before,
#main .panel::before,
.hp-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  z-index: 0 !important;
  padding: 0 !important;
  opacity: 1 !important;
  animation: none !important;
  -webkit-mask: none !important;
  mask: none !important;
  background: var(--glass-spec) !important;
}
/* kill corner rivet / conic spinner decorations */
.panel::after,
#main .panel::after {
  display: none !important;
}
.panel:hover,
#main .panel:hover,
.hp-card:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(225, 214, 183, 0.35) !important;
  box-shadow: 0 28px 64px rgba(0, 0, 0, 0.88), 0 0 28px rgba(225, 214, 183, 0.08),
    inset 0 1px 0 rgba(255, 251, 238, 0.16) !important;
}
.panel > *,
.hp-card > * {
  position: relative !important;
  z-index: 1 !important;
}
.panel.lux-tilting {
  transform: none !important;
}
.panel-eyebrow {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: rgba(243, 235, 211, 0.88) !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 0 8px 0 !important;
  margin-bottom: 10px !important;
  display: block !important;
  max-width: none !important;
}
.panel-eyebrow::before,
.panel-eyebrow::after {
  display: none !important; /* no green LED dots on every label */
}

/* ── Champagne CTAs ── */
.btn,
button.btn {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  color: #0a0800 !important;
  text-shadow: none !important;
  background: var(--cta-gold) !important;
  border: 1px solid rgba(225, 214, 183, 0.45) !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 14px rgba(225, 214, 183, 0.3),
    inset 0 1px 0 rgba(255, 252, 240, 0.7) !important;
  position: relative !important;
  overflow: hidden !important;
}
.btn::before,
.btn::after,
button.btn::before,
button.btn::after {
  display: none !important; /* kill machined rivet + shine sweep */
}
.btn:hover,
button.btn:hover {
  transform: translateY(-1px) !important;
  filter: brightness(1.04);
  box-shadow: 0 6px 22px rgba(225, 214, 183, 0.38),
    inset 0 1px 0 rgba(255, 252, 240, 0.75) !important;
}
.btn-ghost,
.btn.btn-ghost,
button.btn-ghost {
  background: transparent !important;
  color: var(--gold-lite) !important;
  border: 1px solid rgba(225, 214, 183, 0.32) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
.btn-ghost:hover,
.btn.btn-ghost:hover {
  border-color: rgba(225, 214, 183, 0.55) !important;
  color: var(--champ) !important;
  background: rgba(225, 214, 183, 0.06) !important;
}

/* ── Inputs ── */
.in,
input.in,
textarea.in,
select.in,
#main input,
#main textarea,
#main select {
  background: rgba(7, 6, 6, 0.88) !important;
  border: 1px solid rgba(225, 214, 183, 0.18) !important;
  color: var(--ivory) !important;
  border-radius: 12px !important;
  box-shadow: inset 0 1px 0 rgba(255, 248, 232, 0.04) !important;
}
.in:focus,
input.in:focus,
textarea.in:focus,
select.in:focus {
  border-color: rgba(225, 214, 183, 0.55) !important;
  box-shadow: 0 0 0 2px rgba(225, 214, 183, 0.12) !important;
  outline: none !important;
}
.in::placeholder {
  color: rgba(200, 196, 186, 0.45) !important;
}

/* ── Chips / status ── */
.chip,
.pschip {
  border-radius: 99px !important;
  border: 1px solid var(--border-mid) !important;
}

/* Home Upgrade champagne instrument chips */
.iq-group-lbl {
  font-family: var(--font-mono) !important;
  color: rgba(243, 235, 211, 0.8) !important;
  letter-spacing: 0.18em !important;
}
.iq-chip {
  border-radius: 999px !important;
  border: 1px solid rgba(255, 248, 232, 0.12) !important;
  background: linear-gradient(160deg, #13110e, #0a0908) !important;
  color: var(--body) !important;
  box-shadow: 0 1px 0 rgba(255, 252, 240, 0.04) inset,
    0 10px 24px -18px rgba(0, 0, 0, 0.85) !important;
  text-shadow: none !important;
}
.iq-chip .iq-mark {
  background: radial-gradient(
    circle at 35% 28%,
    #fffdf4 0%,
    #e1d6b7 45%,
    #a68a56 100%
  ) !important;
  color: #0a0800 !important;
  box-shadow: 0 0 12px rgba(240, 220, 150, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}
.iq-chip:hover {
  border-color: rgba(225, 214, 183, 0.4) !important;
  color: var(--ivory) !important;
}
.iq-chip.sel {
  background: var(--cta-gold) !important;
  color: #0a0800 !important;
  border-color: transparent !important;
  box-shadow: 0 4px 18px rgba(225, 214, 183, 0.3),
    inset 0 1px 0 rgba(255, 252, 240, 0.7) !important;
}
.iq-chip.sel .iq-mark {
  background: rgba(10, 8, 0, 0.14) !important;
  border-color: rgba(10, 8, 0, 0.18) !important;
  color: #0a0800 !important;
  box-shadow: inset 0 1px 0 rgba(255, 252, 240, 0.2) !important;
  filter: none !important;
}
.chip.c-good {
  color: var(--green) !important;
  border-color: rgba(52, 211, 153, 0.35) !important;
  background: rgba(52, 211, 153, 0.1) !important;
}
.chip.c-aging,
.chip.c-due_soon {
  color: var(--amber) !important;
  border-color: rgba(251, 191, 36, 0.35) !important;
  background: rgba(251, 191, 36, 0.1) !important;
}
.chip.c-overdue {
  color: var(--orange) !important;
  border-color: rgba(251, 146, 60, 0.4) !important;
  background: rgba(251, 146, 60, 0.1) !important;
}

/* ── My Home pulse cards ── */
.hp-card {
  cursor: pointer !important;
  padding: 16px !important;
}
.hp-eyebrow {
  font-family: var(--font-mono) !important;
  font-size: 9.5px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
}
.hp-sub {
  color: var(--muted) !important;
  font-size: 12px !important;
}

/* ── Big numerals — clean Inter only (never Cormorant/Fraunces serif digits) ── */
#ring-num,
#care-num,
#ins-gauge-num,
#leg-value-big,
#leg-equity-big,
#gt-c-moments,
#gt-c-years,
.stat-big,
.kpi-num,
.hp-big,
.readout-num,
.num-clean,
.gt-counter b,
.fp-verdict {
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  font-variant-numeric: lining-nums tabular-nums !important;
  letter-spacing: -0.03em !important;
  font-style: normal !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: #f3ebd3 !important;
  color: #f3ebd3 !important;
  filter: none !important;
  text-shadow: 0 0 20px rgba(225, 214, 183, 0.25) !important;
}
/* Fair-price verdict keeps color coding; kill metal-serif fill */
.fp-verdict.fair { -webkit-text-fill-color: var(--green) !important; color: var(--green) !important; }
.fp-verdict.high { -webkit-text-fill-color: var(--orange) !important; color: var(--orange) !important; }
.fp-verdict.low { -webkit-text-fill-color: var(--gold-lite) !important; color: var(--gold-lite) !important; }
#leg-equity-big {
  -webkit-text-fill-color: var(--gold-lite) !important;
  color: var(--gold-lite) !important;
}

/* ── Briefing ── */
#briefing {
  border-left: 3px solid var(--gold) !important;
  background: linear-gradient(
      105deg,
      rgba(225, 214, 183, 0.1),
      rgba(10, 9, 8, 0.75) 55%
    ),
    var(--glass-bg) !important;
}
#brief-title {
  color: var(--ivory) !important;
  font-weight: 700 !important;
}
#brief-body b {
  color: var(--ivory) !important;
}

/* ── Living home stage — contain the gold void ── */
#living-home,
#house-wrap {
  min-height: 280px !important;
}
#house-wrap canvas,
#house-slot canvas,
#living-home canvas {
  border-radius: 12px !important;
  max-height: 420px !important;
}
.house-line {
  stroke: var(--gold) !important;
  stroke-opacity: 0.55 !important;
}
.house-fill {
  fill: rgba(225, 214, 183, 0.05) !important;
}
.node {
  background: rgba(10, 9, 8, 0.88) !important;
  border-width: 2px !important;
}
.node.good {
  border-color: rgba(52, 211, 153, 0.85) !important;
  box-shadow: 0 0 14px rgba(52, 211, 153, 0.35) !important;
}
.node-tip {
  background: var(--glass-bg) !important;
  border: var(--glass-border) !important;
  color: var(--body) !important;
  box-shadow: var(--glass-shadow) !important;
}

/* ── Raise list / projections ── */
.raise i {
  color: var(--gold-lite) !important;
}
.proj .amt {
  color: var(--gold-lite) !important;
  font-family: var(--font-display) !important;
}

/* ── Storm / Care checklists ── */
.check-row {
  border-radius: 12px !important;
  padding: 12px 14px !important;
}
.check-row:hover {
  border-color: rgba(225, 214, 183, 0.32) !important;
}
.check-row input {
  accent-color: #e1d6b7 !important;
}
.sys .sys-name {
  color: var(--ivory) !important;
  font-weight: 600 !important;
}
.badge.earned {
  border-color: var(--gold-brd) !important;
  color: var(--gold-lite) !important;
  background: var(--gold-glow) !important;
}

/* ── Neighborhood Watch · top-tier map + tabs ── */
.nw-tab {
  border-radius: 999px !important;
  border: 1px solid rgba(255, 248, 232, 0.12) !important;
  background: linear-gradient(160deg, #13110e, #0a0908) !important;
  color: var(--muted) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
.nw-tab img {
  filter: drop-shadow(0 0 5px rgba(240, 220, 150, 0.4)) !important;
}
.nw-tab.active {
  background: var(--cta-gold) !important;
  color: #0a0800 !important;
  border-color: transparent !important;
  box-shadow: 0 4px 18px rgba(225, 214, 183, 0.28),
    inset 0 1px 0 rgba(255, 252, 240, 0.65) !important;
}
.nw-tab.active img {
  filter: brightness(0) saturate(100%) !important;
  opacity: 0.8 !important;
}
.hood-fchip.on {
  background: var(--cta-gold) !important;
  color: #0a0800 !important;
  border-color: transparent !important;
}
.hood-pin-permit {
  background: radial-gradient(
    circle at 35% 28%,
    #fffdf4 0%,
    #e1d6b7 42%,
    #a68a56 100%
  ) !important;
  box-shadow: 0 0 14px rgba(240, 220, 150, 0.75),
    0 0 0 3px rgba(225, 214, 183, 0.12) !important;
}
.hood-pin-home {
  border-color: rgba(243, 235, 211, 0.85) !important;
  box-shadow: 0 0 0 6px rgba(225, 214, 183, 0.08),
    0 0 22px rgba(240, 220, 150, 0.55) !important;
}
#hood-map .leaflet-popup-content-wrapper {
  background: linear-gradient(160deg, #16140f, #0c0b0a 55%, #080706) !important;
  border: 1px solid rgba(225, 214, 183, 0.32) !important;
  border-radius: 14px !important;
}
.proj .amt {
  font-family: var(--font-body) !important;
  font-variant-numeric: tabular-nums !important;
}

/* ── Home Story thread ── */
.gt-counter b,
.gt-quote,
.gt-chapter b,
.gt-t-title {
  color: var(--champ) !important;
  text-shadow: none !important;
  filter: drop-shadow(0 0 12px rgba(240, 232, 206, 0.25));
}
.gt-chapter b {
  background: var(--glass-bg) !important;
  border: 1px solid rgba(225, 214, 183, 0.35) !important;
  color: var(--gold-lite) !important;
}
.gt-node {
  background: radial-gradient(circle at 38% 32%, #fbefc4, #e1d6b7) !important;
  box-shadow: 0 0 16px 4px rgba(225, 214, 183, 0.45) !important;
}
.gt-thread {
  background: linear-gradient(
    180deg,
    transparent,
    rgba(225, 214, 183, 0.4) 4%,
    rgba(225, 214, 183, 0.4) 96%,
    transparent
  ) !important;
}

/* ── Insurance / Value gauges ── */
#ins-badge {
  border-radius: 99px !important;
}
#leg-equity-fill {
  background: var(--cta-gold) !important;
}

/* ── Companion module + docked FAB ── */
#co-name {
  font-family: var(--font-display) !important;
  color: var(--ivory) !important;
}
#co-tag {
  color: var(--gold-lite) !important;
  border-color: rgba(225, 214, 183, 0.4) !important;
}
#co-core {
  border-color: rgba(225, 214, 183, 0.5) !important;
  box-shadow: 0 0 60px -12px rgba(225, 214, 183, 0.55) !important;
}
#cop-fab {
  background: var(--cta-gold) !important;
  color: #0a0800 !important;
  border: none !important;
  font-weight: 700 !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55), 0 0 24px rgba(225, 214, 183, 0.28) !important;
  /* stay docked — no roam hologram covering product */
}
#cop-panel {
  background: var(--glass-bg) !important;
  border: 1px solid rgba(225, 214, 183, 0.28) !important;
  box-shadow: var(--glass-shadow) !important;
  backdrop-filter: blur(20px) !important;
}
#cop-head {
  border-bottom: 1px solid rgba(255, 248, 232, 0.1) !important;
  color: var(--gold-lite) !important;
}

/* ── Mobile tab bar ── */
#tabbar {
  background: linear-gradient(180deg, rgba(12, 11, 10, 0.92), rgba(7, 6, 6, 0.98)) !important;
  border-top: 1px solid rgba(255, 248, 232, 0.1) !important;
  backdrop-filter: blur(16px) !important;
}
.tab.active {
  color: var(--gold-lite) !important;
}

/* ── Fair Price / Scam / Shield emblems ── */
.ss-shield-lbl,
.shield-emblem {
  color: var(--gold-lite) !important;
}
.shield-emblem svg {
  filter: drop-shadow(0 0 12px rgba(225, 214, 183, 0.4)) !important;
}

/* ── Inline cards JS injects (rgba wells) ── */
#main div[style*="rgba(255,255,255,0.03)"],
#main div[style*="rgba(255,255,255,0.04)"] {
  background: linear-gradient(
    160deg,
    rgba(19, 17, 14, 0.92),
    rgba(10, 9, 8, 0.88)
  ) !important;
  border-color: rgba(255, 248, 232, 0.1) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45) !important;
}

/* ── Atmosphere: keep subtle, not a second product ── */
#lux-atmos-layer {
  opacity: 0.45 !important;
  pointer-events: none !important;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .panel:hover,
  .hp-card:hover,
  .btn:hover {
    transform: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   LAYOUT FIX — Living Home must not eat the viewport (gold void)
   Product UI (pulse cards, health, modules) must stay visible.
   ═══════════════════════════════════════════════════════════════════ */
#hero-grid {
  grid-template-columns: minmax(0, 1.4fr) minmax(260px, 320px) !important;
  align-items: stretch !important;
  gap: 16px !important;
}
@media (max-width: 900px) {
  #hero-grid {
    grid-template-columns: 1fr !important;
  }
}
#living-home {
  min-height: 0 !important;
  max-height: none !important;
  display: flex !important;
  flex-direction: column !important;
}
#living-home {
  overflow: hidden !important;
}
#house-wrap,
#house-wrap.holo {
  position: relative !important;
  flex: 0 0 320px !important;
  width: 100% !important;
  height: 320px !important;
  min-height: 320px !important;
  max-height: 320px !important;
  overflow: hidden !important;
  border-radius: 14px !important;
  background: radial-gradient(120% 100% at 50% 0%, rgba(25, 23, 19, 0.9), #070706 70%) !important;
  border: 1px solid rgba(255, 248, 232, 0.08) !important;
}
#holo-canvas {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 320px !important;
  border-radius: 14px !important;
  pointer-events: auto !important;
}
/* Companion FAB: always docked champagne pill — never roam/figure overlay */
#cop-fab,
#cop-fab.roam,
#cop-fab.state-figure,
#cop-fab.state-orb,
#cop-fab.state-materializing {
  position: fixed !important;
  left: auto !important;
  top: auto !important;
  right: 22px !important;
  bottom: 22px !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 12px 18px !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  background: linear-gradient(135deg, #fffdf4, #e1d6b7 60%, #cdba8c) !important;
  color: #0a0800 !important;
  border: none !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55), 0 0 20px rgba(225, 214, 183, 0.25) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  z-index: 95 !important;
  transform: none !important;
}
#cop-fab .roam-ring,
#cop-fab .roam-orb,
#cop-fab .roam-figure,
#cop-fab .roam-scan,
#cop-fab .roam-dot,
#cop-fab .roam-bubble {
  display: none !important;
}
#lux-atmos-layer,
#lux-motes {
  display: none !important; /* page-wide gold dust fought the product */
}
#house-slot {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none !important;
}
#house-slot #house-svg {
  pointer-events: none !important;
}
#house-wrap .node {
  pointer-events: auto !important;
}
#house-caption {
  font-size: 11px !important;
  letter-spacing: 0.03em !important;
  color: var(--muted) !important;
  margin-top: 8px !important;
}
#house-caption b {
  color: var(--gold-lite) !important;
  font-weight: 600 !important;
}
#house-legend {
  margin-top: 6px !important;
}
#ring-lbl {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}
#house-slot .skel {
  max-width: 90% !important;
  height: 200px !important;
  opacity: 0.35 !important;
}
#house-caption,
#house-legend {
  margin-top: 10px !important;
  font-size: 12px !important;
  color: var(--muted) !important;
}
#portrait-switch .pswitch,
.pswitch {
  background: rgba(7, 6, 6, 0.7) !important;
  border: 1px solid rgba(225, 214, 183, 0.22) !important;
  color: var(--body) !important;
  border-radius: 99px !important;
  font-size: 11px !important;
  padding: 6px 12px !important;
}
.pswitch.active,
.pswitch.gold.active,
#portrait-switch .pswitch.active {
  background: var(--cta-gold) !important;
  color: #0a0800 !important;
  border-color: transparent !important;
  font-weight: 700 !important;
}
#health-panel {
  background: var(--glass-bg) !important;
}
#ring-fg {
  stroke: #e1d6b7 !important;
}
#sys-panel.panel {
  margin-top: 12px !important;
}

/* Pulse strip always below hero — never buried under infinite canvas */
#home-pulse {
  margin-top: 16px !important;
}

/* ═══════════════════════════════════════════════════════════════════
   TAB-BY-TAB surface polish (all modules share glass language)
   ═══════════════════════════════════════════════════════════════════ */
.module .panel-eyebrow,
#mod-companion .panel-eyebrow,
#mod-storm .panel-eyebrow,
#mod-insurance .panel-eyebrow,
#mod-fairprice .panel-eyebrow,
#mod-scamshield .panel-eyebrow,
#mod-shield .panel-eyebrow,
#mod-care .panel-eyebrow,
#mod-legacy .panel-eyebrow,
#mod-iq .panel-eyebrow,
#mod-pros .panel-eyebrow,
#mod-live .panel-eyebrow,
#mod-hood .panel-eyebrow,
#mod-journal .panel-eyebrow {
  color: rgba(243, 235, 211, 0.9) !important;
}

/* Display headlines in modules */
#mod-companion > div > div:first-child,
.module > div > div[style*="font-family:var(--font-display)"],
#mod-companion [style*="clamp(24px"] {
  font-family: var(--font-display) !important;
}

/* Companion gender toggle */
#co-toggle .pswitch {
  border-radius: 10px !important;
}
.co-bar i {
  background: linear-gradient(90deg, #e1d6b7, #f3ebd3) !important;
  box-shadow: 0 0 10px rgba(225, 214, 183, 0.45) !important;
}

/* Fair price track */
.fp-track,
.fp-range {
  background: rgba(255, 248, 232, 0.06) !important;
  border-radius: 8px !important;
}

/* Storm radar / map containers */
#storm-map,
#hood-map,
.leaflet-container {
  border-radius: 14px !important;
  border: 1px solid rgba(255, 248, 232, 0.1) !important;
  overflow: hidden !important;
}

/* Insurance gauge glow */
#ins-gauge-fill {
  filter: drop-shadow(0 0 10px rgba(225, 214, 183, 0.35)) !important;
}

/* Home Shield membership benefit cards */
#mod-shield .sh-benefit,
#shield-member-wrap .sh-benefit {
  background: linear-gradient(160deg, #16140f, #0c0b0a) !important;
  border: 1px solid rgba(255, 248, 232, 0.1) !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 28px -18px rgba(0, 0, 0, 0.85),
    inset 0 1px 0 rgba(255, 251, 238, 0.06) !important;
}
#shield-member-wrap .sh-benefit-mark {
  background: radial-gradient(
    circle at 35% 28%,
    rgba(255, 252, 240, 0.12),
    rgba(10, 9, 8, 0.9) 70%
  ) !important;
  border: 1px solid rgba(225, 214, 183, 0.22) !important;
}
#shield-member-wrap .sh-benefit-mark img {
  filter: drop-shadow(0 0 6px rgba(240, 220, 150, 0.55)) !important;
}

/* Scam Shield — compact status strip (kill the giant void layout) */
#mod-scamshield .ss-status {
  background: linear-gradient(160deg, #13110e, #0a0908) !important;
  border: 1px solid rgba(255, 248, 232, 0.1) !important;
  border-radius: 14px !important;
}
#mod-scamshield .ss-status-title {
  font-family: var(--font-mono) !important;
  color: var(--gold-lite) !important;
  letter-spacing: 0.14em !important;
}
.ss-shield {
  width: 44px !important;
  height: 44px !important;
  margin: 0 !important;
  max-width: 44px !important;
  max-height: 44px !important;
  flex-shrink: 0 !important;
}
.ss-shield svg {
  width: 28px !important;
  height: 28px !important;
  filter: drop-shadow(0 0 8px rgba(225, 214, 183, 0.45)) !important;
}
.ss-shield-lbl {
  display: none !important;
}

/* Home Care ring */
#care-ring {
  filter: drop-shadow(0 0 16px rgba(225, 214, 183, 0.2));
}
#care-lbl {
  font-family: var(--font-mono) !important;
  letter-spacing: 0.14em !important;
  color: var(--muted) !important;
}

/* Home Value equity bar */
#leg-equity-fill {
  box-shadow: 0 0 12px rgba(225, 214, 183, 0.35) !important;
}

/* Pros / request cards */
.req-meta,
.req-card {
  border-color: rgba(255, 248, 232, 0.1) !important;
}

/* Live systems header */
#live-wrap .panel {
  border-color: rgba(225, 214, 183, 0.22) !important;
}

/* Mobile tab bar labels */
#tabbar .tab {
  color: var(--muted) !important;
  font-size: 10px !important;
}
#tabbar .tab.active {
  color: var(--gold-lite) !important;
}

/* Scrollbars match brand */
::-webkit-scrollbar-thumb {
  background: rgba(225, 214, 183, 0.18) !important;
  border-radius: 4px !important;
}

/* Kill atmospheric motes stealing attention from product */
#lux-motes {
  opacity: 0.25 !important;
}
#lux-atmos-layer .la {
  opacity: 0.35 !important;
}

/* Guardian emergency panel on holo */
#holo-emergency {
  background: linear-gradient(160deg, rgba(40, 12, 12, 0.95), rgba(10, 6, 6, 0.96)) !important;
  border: 1px solid rgba(248, 113, 113, 0.45) !important;
  border-radius: 14px !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7) !important;
  padding: 14px !important;
}
#holo-emergency .he-dispatch {
  background: linear-gradient(135deg, #fecaca, #f87171) !important;
  color: #1a0505 !important;
}

/* Ensure main content can scroll past hero */
#main {
  padding-bottom: 100px !important;
}
.module {
  max-width: 1100px !important;
}