/* ─────────────────────────────────────────────────────────────
   VIGIL — owner dashboard skin
   One material system, one accent, quiet motion.

   Replaces the previous six stacked "enhancement passes". If you
   are tempted to add a glow, don't. The whole point of glass is
   that the light comes from the wallpaper behind it.
───────────────────────────────────────────────────────────── */

/* ── tokens ─────────────────────────────────────────────── */
:root{
  --accent:#0a84ff;
  --accent-soft:rgba(10,132,255,.16);
  --teal:#4cb8c4;

  --ink:rgba(255,255,255,.92);
  --ink-2:rgba(235,235,245,.56);
  --ink-3:rgba(235,235,245,.34);

  --ok:#30d158;
  --warn:#ff9f0a;
  --bad:#ff453a;
  --info:#64d2ff;

  --ff-text:-apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro",
            "Inter", "Segoe UI", system-ui, sans-serif;
  --ff-display:-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro",
            "Inter", "Segoe UI", system-ui, sans-serif;
  --ff-mono:ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  /* materials */
  --m-thin:rgba(255,255,255,.05);
  --m-regular:rgba(255,255,255,.075);
  --m-thick:rgba(255,255,255,.10);
  --m-border:rgba(255,255,255,.10);
  --m-border-strong:rgba(255,255,255,.16);
  --m-specular:rgba(255,255,255,.13);
  --blur-thin:saturate(150%) blur(18px);
  --blur-regular:saturate(170%) blur(28px);
  --blur-thick:saturate(180%) blur(40px);

  --shadow-card:0 1px 1px rgba(0,0,0,.07), 0 10px 30px -14px rgba(0,0,0,.55);
  --shadow-float:0 1px 1px rgba(0,0,0,.10), 0 16px 44px -18px rgba(0,0,0,.65);

  --r-sm:10px;
  --r-md:14px;
  --r-lg:18px;
  --r-xl:24px;

  --ease:cubic-bezier(.25,.1,.25,1);
}
html:not(.dark){
  --accent:#007aff;
  --accent-soft:rgba(0,122,255,.12);

  --ink:rgba(29,29,31,.95);
  --ink-2:rgba(60,60,67,.6);
  --ink-3:rgba(60,60,67,.33);

  --ok:#34c759;
  --warn:#ff9500;
  --bad:#ff3b30;
  --info:#32ade6;

  --m-thin:rgba(255,255,255,.5);
  --m-regular:rgba(255,255,255,.62);
  --m-thick:rgba(255,255,255,.74);
  --m-border:rgba(0,0,0,.07);
  --m-border-strong:rgba(0,0,0,.12);
  --m-specular:rgba(255,255,255,.85);

  --shadow-card:0 1px 1px rgba(20,30,50,.05), 0 10px 30px -14px rgba(20,30,50,.18);
  --shadow-float:0 1px 1px rgba(20,30,50,.06), 0 16px 44px -18px rgba(20,30,50,.24);
}

/* ── type ───────────────────────────────────────────────── */
html, body{
  font-family:var(--ff-text) !important;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  letter-spacing:normal !important;
  font-weight:400 !important;
  color:var(--ink);
}
h1,h2,h3,h4{
  font-family:var(--ff-display) !important;
  color:var(--ink);
}
h2.text-xl{
  font-size:19px !important;
  font-weight:600 !important;
  letter-spacing:-.014em !important;
  line-height:1.2 !important;
  color:var(--ink) !important;
  -webkit-text-fill-color:var(--ink) !important;
  background:none !important;
  animation:none !important;
  margin-bottom:12px !important;
}
h2.text-xl::before, h2.text-xl::after{ display:none !important; }
h3.text-sm.font-semibold,
h3.text-base.font-semibold{
  font-weight:600 !important;
  letter-spacing:-.008em !important;
  text-transform:none !important;
  color:var(--ink) !important;
}
.text-\[10px\].uppercase,
.text-\[11px\].uppercase{
  font-family:var(--ff-text) !important;
  font-size:10.5px !important;
  font-weight:500 !important;
  letter-spacing:.05em !important;
  color:var(--ink-2) !important;
  white-space:nowrap;
}
p, .text-xs, .text-sm, .text-base{
  font-family:var(--ff-text) !important;
  letter-spacing:normal !important;
}
.font-semibold{ font-weight:600 !important; }
.font-bold{ font-weight:600 !important; }
.font-extrabold{ font-weight:700 !important; }
input, textarea, select, button, .pill-btn{
  font-family:var(--ff-text) !important;
  letter-spacing:normal !important;
}

/* big stat numbers — quiet, tabular, no glow */
.text-2xl.font-extrabold,
.text-3xl.font-extrabold,
.text-4xl.font-extrabold,
#occ-big, #rv-monthly,
#ov-occ, #ov-mrev, #ov-trev, #ov-tasks, #ov-ci, #ov-co,
#bk-total, #bk-revenue, #bk-confirmed, #bk-cancelled,
#rev-main, #rev-rooms, #rev-today, #rev-ci, #rev-co, #rev-tasks{
  font-family:var(--ff-display) !important;
  font-weight:600 !important;
  letter-spacing:-.02em !important;
  line-height:1.08 !important;
  font-feature-settings:"tnum","lnum";
  font-variant-numeric:tabular-nums;
  color:var(--ink) !important;
  -webkit-text-fill-color:var(--ink) !important;
  background:none !important;
  text-shadow:none !important;
}
.balance-card .text-2xl.font-extrabold,
.balance-card .text-3xl.font-extrabold{
  font-size:32px !important;
  font-weight:600 !important;
  letter-spacing:-.025em !important;
  text-shadow:none !important;
}

/* hero property name — was animated gradient; now just ink */
.aurora-text{
  font-family:var(--ff-display) !important;
  font-weight:650 !important;
  letter-spacing:-.02em !important;
  background:none !important;
  -webkit-background-clip:initial !important;
  background-clip:initial !important;
  color:var(--ink) !important;
  -webkit-text-fill-color:var(--ink) !important;
  animation:none !important;
  text-shadow:none !important;
}

/* ── canvas ─────────────────────────────────────────────── */
html.dark body{
  background:#0a0b0e !important;
  color:var(--ink) !important;
}
html:not(.dark) body{
  background:#eff0f4 !important;
  color:var(--ink) !important;
}

/* wallpaper the glass refracts — static, two quiet fields */
body::before{
  content:""; position:fixed; inset:-12%; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 65% 55% at 14% 4%,  rgba(52,118,182,.45) 0%, transparent 64%),
    radial-gradient(ellipse 60% 50% at 88% 14%, rgba(64,150,158,.32) 0%, transparent 62%),
    radial-gradient(ellipse 65% 55% at 76% 98%, rgba(110,80,158,.28) 0%, transparent 64%),
    radial-gradient(ellipse 50% 40% at 38% 60%, rgba(38,84,128,.18) 0%, transparent 60%),
    radial-gradient(ellipse 90% 70% at 50% 50%, rgba(16,20,28,0) 0%, rgba(0,0,0,.25) 100%);
  filter:blur(58px);
  animation:none;
}
html:not(.dark) body::before{
  background:
    radial-gradient(ellipse 60% 50% at 10% 0%,  rgba(120,160,210,.30) 0%, transparent 60%),
    radial-gradient(ellipse 55% 45% at 92% 14%, rgba(120,190,196,.24) 0%, transparent 58%),
    radial-gradient(ellipse 60% 50% at 80% 100%, rgba(180,160,215,.20) 0%, transparent 60%);
  filter:blur(56px);
}

/* film grain, barely there */
body::after{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' stitchTiles='stitch' seed='7'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.03 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity:.45; mix-blend-mode:overlay;
}
html:not(.dark) body::after{ opacity:.3; mix-blend-mode:multiply; }
body > *{ position:relative; z-index:2; }

/* ── materials ──────────────────────────────────────────── */
.glass-panel,
.stats-card,
.upgrade-card{
  position:relative; isolation:isolate;
  background:var(--m-regular) !important;
  border:1px solid var(--m-border) !important;
  border-radius:var(--r-lg) !important;
  backdrop-filter:var(--blur-regular);
  -webkit-backdrop-filter:var(--blur-regular);
  box-shadow:inset 0 1px 0 var(--m-specular), var(--shadow-card) !important;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.balance-card,
.hero-strip{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--m-thick) !important;
  border:1px solid var(--m-border) !important;
  border-radius:var(--r-xl) !important;
  backdrop-filter:var(--blur-thick) !important;
  -webkit-backdrop-filter:var(--blur-thick) !important;
  box-shadow:inset 0 1px 0 var(--m-specular), var(--shadow-card) !important;
}
@supports (border-width:.5px){
  .glass-panel,.stats-card,.upgrade-card,.balance-card,.hero-strip,
  .sidebar-pill,.ticker-pill,.weather-pill{ border-width:.5px !important; }
}

/* kill the old pseudo-element decorations on cards */
.glass-panel::before,.glass-panel::after,
.stats-card::before,.stats-card::after,
.balance-card::after,
.upgrade-card::before,.upgrade-card::after{
  content:none !important;
}
/* one tint wash on the balance card only */
.balance-card::before{
  content:"" !important; position:absolute; inset:0; z-index:0; pointer-events:none;
  border-radius:inherit;
  background:
    linear-gradient(155deg, rgba(10,132,255,.12) 0%, rgba(76,184,196,.07) 45%, transparent 75%) !important;
  height:auto !important; mask:none !important; -webkit-mask:none !important;
}
.glass-panel > *, .stats-card > *, .balance-card > *, .upgrade-card > *{
  position:relative; z-index:2;
}

/* hover: border wakes up — nothing moves (tilt cards manage their own transform) */
.glass-panel:hover, .stats-card:hover, .balance-card:hover{
  border-color:var(--m-border-strong) !important;
  box-shadow:inset 0 1px 0 var(--m-specular), var(--shadow-float) !important;
}
.glass-panel:hover:not(.vg-tilt),
.stats-card:hover:not(.vg-tilt),
.balance-card:hover:not(.vg-tilt){ transform:none !important; }
.glass-panel:active:not(.vg-tilt),
.stats-card:active:not(.vg-tilt),
.balance-card:active:not(.vg-tilt){ transform:none !important; }

/* glass inside glass steps up one tier */
.glass-panel .glass-panel,
.glass-panel .stats-card,
.balance-card .glass-panel{
  background:var(--m-thick) !important;
}

/* hero strip: same material, slight cool wash */
.hero-strip{
  background:
    linear-gradient(160deg, rgba(10,132,255,.07) 0%, rgba(76,184,196,.05) 50%, transparent 80%),
    var(--m-thick) !important;
}

/* ── radius mapping for tailwind classes ────────────────── */
.rounded-2xl{ border-radius:var(--r-lg) !important; }
.rounded-xl{ border-radius:var(--r-md) !important; }
.rounded-lg{ border-radius:var(--r-sm) !important; }

/* ── header / pills / sidebar ───────────────────────────── */
header{
  background:transparent !important;
  border-bottom:none !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
.sidebar-pill{
  background:var(--m-regular) !important;
  border:1px solid var(--m-border) !important;
  backdrop-filter:var(--blur-regular);
  -webkit-backdrop-filter:var(--blur-regular);
  box-shadow:inset 0 1px 0 var(--m-specular), var(--shadow-card) !important;
}
.ticker-pill, .weather-pill{
  background:var(--m-thin) !important;
  border:1px solid var(--m-border) !important;
  backdrop-filter:var(--blur-thin);
  -webkit-backdrop-filter:var(--blur-thin);
  box-shadow:inset 0 1px 0 var(--m-specular) !important;
}

/* brand mark — no spinning halo */
.brand-mark{
  border-radius:50%;
  box-shadow:0 1px 2px rgba(0,0,0,.3), 0 0 0 .5px var(--m-border) !important;
  transition:transform .25s var(--ease);
}
.brand-mark::before{ content:none !important; }
.brand-mark:hover{ transform:scale(1.05); }

/* ── nav — iPadOS sidebar behavior ──────────────────────── */
.nav-icon{
  position:relative;
  min-width:44px; min-height:44px;
  color:var(--ink-2) !important;
  border-radius:12px !important;
  transition:background-color .2s var(--ease), color .2s var(--ease);
}
.nav-icon:hover:not(.active){
  background:rgba(255,255,255,.07);
  color:var(--ink) !important;
  transform:none;
}
html:not(.dark) .nav-icon:hover:not(.active){ background:rgba(0,0,0,.05); }
.nav-icon.active{
  background:var(--accent-soft) !important;
  color:var(--accent) !important;
  box-shadow:none !important;
}
.nav-icon.active::after{ content:none !important; animation:none !important; }

/* tooltip */
.nav-icon[title]::before{
  content:attr(title);
  position:absolute; left:calc(100% + 12px); top:50%;
  transform:translateY(-50%);
  background:rgba(28,28,30,.92);
  color:#fff;
  font-size:11.5px; font-weight:500;
  padding:6px 10px; border-radius:8px; white-space:nowrap;
  border:.5px solid rgba(255,255,255,.12);
  box-shadow:0 8px 24px -8px rgba(0,0,0,.6);
  opacity:0; pointer-events:none; z-index:50;
  transition:opacity .15s ease .15s;
}
.nav-icon:hover[title]::before{ opacity:1; }
html:not(.dark) .nav-icon[title]::before{
  background:rgba(255,255,255,.95); color:var(--ink);
  border:.5px solid rgba(0,0,0,.08);
  box-shadow:0 8px 24px -8px rgba(20,30,50,.25);
}
@media (max-width:1023px){ .nav-icon[title]::before{ display:none; } }

/* theme swatch */
.theme-swatch{
  color:var(--ink-3);
  border-radius:999px;
  transition:background-color .2s var(--ease), color .2s var(--ease);
}
.theme-swatch:hover{ color:var(--ink); }
.theme-swatch.active{
  background:var(--accent-soft) !important;
  color:var(--accent) !important;
  box-shadow:none !important;
  transform:none !important;
}

/* ── buttons ────────────────────────────────────────────── */
button, .pill-btn{
  transition:background-color .18s var(--ease), color .18s var(--ease),
             border-color .18s var(--ease), opacity .18s var(--ease),
             transform .12s ease-out;
}
button:active, .pill-btn:active{ transform:scale(.97); }
.pill-btn:hover{ transform:none; }

.bg-app-primary{
  background:var(--accent) !important;
  color:#fff !important;
  font-weight:500 !important;
  box-shadow:0 1px 2px rgba(0,0,0,.2) !important;
}
.bg-app-primary:hover{ filter:brightness(1.07); box-shadow:0 1px 2px rgba(0,0,0,.2) !important; }

button.bg-white\/5, button.bg-white\/10{
  background:var(--m-thin) !important;
  border:1px solid var(--m-border) !important;
  color:var(--ink-2) !important;
}
button.bg-white\/5:hover, button.bg-white\/10:hover{
  background:var(--m-regular) !important;
  color:var(--ink) !important;
  border-color:var(--m-border-strong) !important;
}

/* segmented control active chip */
.bg-white.text-gray-900{
  background:rgba(255,255,255,.16) !important;
  color:var(--ink) !important;
  font-weight:500 !important;
  border-radius:999px !important;
  box-shadow:0 1px 2px rgba(0,0,0,.25) !important;
}
html:not(.dark) .bg-white.text-gray-900{
  background:#fff !important;
  color:var(--ink) !important;
  box-shadow:0 1px 3px rgba(20,30,50,.12) !important;
}

/* ── inputs ─────────────────────────────────────────────── */
.search-input{
  background:var(--m-thin) !important;
  border:1px solid var(--m-border) !important;
  border-radius:var(--r-sm) !important;
  font-size:13px !important;
  color:var(--ink) !important;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease),
             background-color .2s var(--ease);
}
.search-input:focus{
  background:var(--m-regular) !important;
  border-color:rgba(10,132,255,.55) !important;
  box-shadow:0 0 0 3px rgba(10,132,255,.18) !important;
  outline:none;
}
html:not(.dark) .search-input:focus{
  border-color:rgba(0,122,255,.5) !important;
  box-shadow:0 0 0 3px rgba(0,122,255,.14) !important;
}

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:8px;
  box-shadow:none !important;
}

/* ── label hierarchy ────────────────────────────────────── */
html.dark .text-white{ color:var(--ink) !important; }
html.dark .text-white\/80{ color:rgba(235,235,245,.78) !important; }
html.dark .text-app-textMuted,
html.dark .text-white\/70,
html.dark .text-white\/60{ color:var(--ink-2) !important; }
html.dark .text-white\/50{ color:rgba(235,235,245,.45) !important; }
html.dark .text-white\/40,
html.dark .text-white\/30{ color:var(--ink-3) !important; }

html:not(.dark) .text-white{ color:var(--ink) !important; }
html:not(.dark) .text-app-textMuted,
html:not(.dark) .text-white\/70,
html:not(.dark) .text-white\/60{ color:var(--ink-2) !important; }
html:not(.dark) .text-white\/50{ color:rgba(60,60,67,.45) !important; }

/* ── tables ─────────────────────────────────────────────── */
.dtable thead th{
  font-family:var(--ff-text) !important;
  font-size:11px !important;
  font-weight:500 !important;
  letter-spacing:.04em !important;
  text-transform:uppercase !important;
  color:var(--ink-2) !important;
  padding:12px 16px !important;
  background:transparent !important;
  border-bottom:1px solid var(--m-border) !important;
}
.dtable td{
  font-family:var(--ff-text) !important;
  font-weight:400 !important;
  color:var(--ink) !important;
  border-bottom:1px solid rgba(255,255,255,.05) !important;
}
html:not(.dark) .dtable td{ border-bottom:1px solid rgba(0,0,0,.05) !important; }
.dtable tbody tr{ transition:background-color .15s var(--ease); }
.dtable tbody tr::before{ content:none !important; }
.dtable tbody tr:hover td{ background:rgba(255,255,255,.04) !important; }
html:not(.dark) .dtable tbody tr:hover td{ background:rgba(0,0,0,.03) !important; }

/* ── status & priority badges — tint bg, no borders, no blink ── */
.bs-confirmed, .bs-checked_in, .bs-checked_out,
.bs-cancelled, .bs-pending, .bs-ai_handled, .bs-rejected,
.pr-urgent, .pr-high, .pr-normal, .pr-low{
  font-size:11px !important;
  font-weight:500 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  padding:3px 9px !important;
  border-radius:999px !important;
  border:none !important;
  display:inline-flex !important;
  align-items:center;
}
.bs-confirmed  { background:rgba(48,209,88,.15) !important;  color:var(--ok) !important; }
.bs-checked_in { background:rgba(10,132,255,.15) !important; color:#6db3ff !important; }
.bs-checked_out{ background:rgba(142,142,147,.16) !important;color:#9b9ba1 !important; }
.bs-cancelled  { background:rgba(255,69,58,.14) !important;  color:var(--bad) !important; }
.bs-pending    { background:rgba(255,159,10,.14) !important; color:var(--warn) !important; }
.bs-ai_handled { background:rgba(100,210,255,.14) !important;color:var(--info) !important; }
.bs-rejected   { background:rgba(255,69,58,.14) !important;  color:var(--bad) !important; }
.bs-checked_in::before, .bs-ai_handled::before{ content:none !important; animation:none !important; }

html:not(.dark) .bs-confirmed  { background:rgba(52,199,89,.14) !important;  color:#1e7d3c !important; }
html:not(.dark) .bs-checked_in { background:rgba(0,122,255,.12) !important;  color:#0a64c2 !important; }
html:not(.dark) .bs-checked_out{ background:rgba(60,60,67,.10) !important;   color:#5b5b60 !important; }
html:not(.dark) .bs-cancelled,
html:not(.dark) .bs-rejected   { background:rgba(255,59,48,.12) !important;  color:#c22a22 !important; }
html:not(.dark) .bs-pending    { background:rgba(255,149,0,.14) !important;  color:#9a5b00 !important; }
html:not(.dark) .bs-ai_handled { background:rgba(50,173,230,.13) !important; color:#13688f !important; }

.pr-urgent{ background:rgba(255,69,58,.14) !important;  color:var(--bad) !important; }
.pr-high  { background:rgba(255,159,10,.14) !important; color:var(--warn) !important; }
.pr-normal{ background:rgba(10,132,255,.14) !important; color:#6db3ff !important; }
.pr-low   { background:rgba(142,142,147,.15) !important;color:#9b9ba1 !important; }

.delta-pill{
  font-size:11px !important;
  font-weight:500 !important;
  padding:2px 8px !important;
  border-radius:999px !important;
  border:none !important;
  display:inline-flex; align-items:center; gap:3px;
}
.delta-up  { background:rgba(48,209,88,.15) !important; color:var(--ok) !important; }
.delta-down{ background:rgba(255,69,58,.14) !important; color:var(--bad) !important; }
html:not(.dark) .delta-up  { color:#1e7d3c !important; }
html:not(.dark) .delta-down{ color:#c22a22 !important; }

/* ── charts & gauges — calm strokes ─────────────────────── */
.chart-glow{ filter:none !important; }
.sparkline{ filter:none !important; overflow:visible; }
.sparkline path.line{
  stroke-width:1.6 !important;
  stroke-linecap:round !important;
  filter:none !important;
}
.sparkline path.area{ opacity:.25 !important; }
.donut-fill{ filter:none !important; }

.gauge-track{
  background:rgba(255,255,255,.07) !important;
  height:5px !important;
  border-radius:999px !important;
  box-shadow:none !important;
}
html:not(.dark) .gauge-track{ background:rgba(0,0,0,.07) !important; }
.gauge-fill{
  background:var(--accent) !important;
  box-shadow:none !important;
  border-radius:999px;
}
.gauge-fill::after{ content:none !important; }
.gauge-fill.shimmer{ animation:none !important; background:var(--accent) !important; }

/* heat cells */
.heat-cell{
  border-radius:5px !important;
  box-shadow:none !important;
  transition:transform .15s var(--ease);
}
.heat-cell:hover{
  transform:scale(1.12);
  box-shadow:0 2px 10px rgba(0,0,0,.35), 0 0 0 1px var(--m-border-strong) !important;
  z-index:5;
}

/* icon chips on cards — steady */
.bg-gradient-primary{
  background:linear-gradient(150deg, #2b8fd9 0%, #4cb8c4 100%) !important;
  border-radius:10px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 1px 3px rgba(0,0,0,.3) !important;
  transition:none !important;
}
.glass-panel:hover .bg-gradient-primary,
.stats-card:hover .bg-gradient-primary{
  transform:none !important;
  filter:none !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 1px 3px rgba(0,0,0,.3) !important;
}

/* ── chat ───────────────────────────────────────────────── */
.bub-v{
  background:var(--m-regular) !important;
  border:.5px solid var(--m-border) !important;
  border-radius:16px 16px 16px 5px !important;
  color:var(--ink) !important;
}
.bub-u{
  background:var(--accent) !important;
  color:#fff !important;
  border-radius:16px 16px 5px 16px !important;
  box-shadow:0 1px 2px rgba(0,0,0,.2);
}
.bub-v, .bub-u{ line-height:1.45; font-weight:400 !important; }
#chatMsgs > div{ animation:vg-msg-in .25s var(--ease) both; }
@keyframes vg-msg-in{
  from{ opacity:0; transform:translateY(5px); }
  to  { opacity:1; transform:none; }
}

/* ── voice orb — tone the inline neon down ──────────────── */
.orb-wrap{
  animation:none !important;
  box-shadow:
    0 0 0 .5px rgba(255,255,255,.18),
    0 0 24px rgba(76,184,196,.28),
    0 8px 28px -8px rgba(0,0,0,.6),
    inset 0 0 16px rgba(0,0,0,.4) !important;
}
.orb-wrap::before{ content:none !important; animation:none !important; }
.orb-wrap:hover{ transform:scale(1.02) !important; }
.orb-wrap.orb-speaking{
  animation:none !important;
  box-shadow:
    0 0 0 .5px rgba(255,255,255,.22),
    0 0 34px rgba(76,184,196,.45),
    0 8px 28px -8px rgba(0,0,0,.6) !important;
}
.orb-wrap.orb-listening{
  animation:none !important;
  box-shadow:
    0 0 0 .5px rgba(255,255,255,.22),
    0 0 34px rgba(255,99,120,.4),
    0 8px 28px -8px rgba(0,0,0,.6) !important;
}

/* ── room tiles ─────────────────────────────────────────── */
.room-tile{ border-radius:9px; font-weight:500; }
.room-occupied{
  background:var(--accent) !important;
  box-shadow:none !important;
}
.room-vacant{
  background:var(--m-thin) !important;
  border:.5px solid var(--m-border) !important;
  color:var(--ink-2) !important;
}

/* presence / alive dots — steady, no ring pulse */
.presence-ring{ animation:none !important; }
.alive-dot{ animation:none !important; box-shadow:none !important; }
.sun-icon{ animation:none !important; }
.sun-icon circle{ filter:none !important; }

/* decorative leftovers from earlier passes — retire */
.deco-dots{ display:none !important; }
.deco-glow{ display:none !important; }
.beach-horizon{ opacity:.1 !important; }

/* ── toast (window.vigilToast) ──────────────────────────── */
.vigil-toast-host{
  position:fixed; bottom:26px; left:50%;
  transform:translateX(-50%);
  display:flex; flex-direction:column; gap:8px; align-items:center;
  z-index:9999; pointer-events:none;
}
.vigil-toast{
  pointer-events:auto;
  font-family:var(--ff-text);
  background:rgba(28,28,30,.82);
  color:#fff;
  border:.5px solid rgba(255,255,255,.12);
  backdrop-filter:var(--blur-regular);
  -webkit-backdrop-filter:var(--blur-regular);
  padding:9px 16px 9px 13px; border-radius:999px;
  font-size:13px; font-weight:500;
  display:flex; align-items:center; gap:9px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), var(--shadow-float);
  animation:vg-toast-in .3s var(--ease), vg-toast-out .25s ease-in 3.4s forwards;
}
.vigil-toast .dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--accent);
}
html:not(.dark) .vigil-toast{
  background:rgba(255,255,255,.88);
  color:var(--ink);
  border:.5px solid rgba(0,0,0,.08);
}
@keyframes vg-toast-in{
  from{ opacity:0; transform:translateY(14px); }
  to  { opacity:1; transform:none; }
}
@keyframes vg-toast-out{ to{ opacity:0; transform:translateY(10px); } }

/* livebar retired */
.vigil-livebar{ display:none !important; }

/* ── motion ─────────────────────────────────────────────── */
.page-panel.active{ animation:vg-page-in .22s var(--ease) both; }
@keyframes vg-page-in{
  from{ opacity:0; }
  to  { opacity:1; }
}
/* old reveal/tick hooks: render visible (their JS is gone).
   NOTE: the inline .stagger rule sets children to opacity:0 and relies on
   its fade-up animation to bring them in — never blanket-disable card
   animations or the whole KPI strip vanishes. */
.reveal-on-scroll{ opacity:1 !important; transform:none !important; transition:none !important; }
.tick-flash{ animation:none !important; }
.tilt-shine .__shine{ display:none !important; }
.ripple{ display:none !important; }

/* ── scrollbar ──────────────────────────────────────────── */
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.14);
  border-radius:4px;
  border:2px solid transparent;
  background-clip:content-box;
}
::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.24); background-clip:content-box; }
html:not(.dark) ::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.16); background-clip:content-box; }
html:not(.dark) ::-webkit-scrollbar-thumb:hover{ background:rgba(0,0,0,.26); background-clip:content-box; }

/* ─────────────────────────────────────────────────────────
   MOTION LAYER — the expensive-feeling 2%.
   Driven by vigil-enhance.js. Every effect here is either
   one-shot (entrance) or pointer-coupled (dies when you stop
   moving). Nothing loops on its own except the wallpaper
   drift and the live dot, both near-imperceptible.
───────────────────────────────────────────────────────── */

/* living wallpaper — 90s drift you feel rather than see */
body::before{
  animation:vg-drift 90s ease-in-out infinite alternate;
}
@keyframes vg-drift{
  from{ transform:translate3d(0,0,0) scale(1); }
  to  { transform:translate3d(-1.5%,1%,0) scale(1.04); }
}

/* hero: pointer light — soft key light that follows the cursor */
.hero-strip::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  border-radius:inherit;
  background:radial-gradient(420px circle at var(--hx,70%) var(--hy,20%),
    rgba(255,255,255,.07) 0%, rgba(255,255,255,.025) 35%, transparent 65%);
  opacity:0; transition:opacity .4s var(--ease);
}
.hero-strip:hover::after{ opacity:1; }
html:not(.dark) .hero-strip::after{
  background:radial-gradient(420px circle at var(--hx,70%) var(--hy,20%),
    rgba(255,255,255,.5) 0%, rgba(255,255,255,.15) 35%, transparent 65%);
}

/* hero: hairline energy line along the top edge */
.hero-strip .vg-hairline{
  position:absolute; top:0; left:8%; right:8%; height:1px; z-index:1;
  pointer-events:none;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(109,179,255,.0) 20%,
    rgba(109,179,255,.55) 50%,
    rgba(76,184,196,.35) 65%,
    transparent 100%);
  background-size:220% 100%;
  animation:vg-hairline 7s ease-in-out infinite;
  opacity:.8;
}
@keyframes vg-hairline{
  0%,100%{ background-position:120% 0; opacity:.35; }
  50%    { background-position:-20% 0; opacity:.9; }
}
html:not(.dark) .hero-strip .vg-hairline{ opacity:.5; }

/* one-shot sheen sweep — fired by JS when a page lands */
.vg-sheen{ position:relative; overflow:hidden; }
.vg-sheen::after{
  content:""; position:absolute; top:-30%; bottom:-30%; left:0; width:55%;
  z-index:3; pointer-events:none;
  background:linear-gradient(105deg,
    transparent 0%,
    rgba(255,255,255,.045) 42%,
    rgba(255,255,255,.10) 50%,
    rgba(255,255,255,.045) 58%,
    transparent 100%);
  transform:translateX(-130%) skewX(-8deg);
  animation:vg-sheen-sweep .9s cubic-bezier(.4,0,.2,1) forwards;
}
html:not(.dark) .vg-sheen::after{
  background:linear-gradient(105deg,
    transparent 0%,
    rgba(255,255,255,.35) 42%,
    rgba(255,255,255,.65) 50%,
    rgba(255,255,255,.35) 58%,
    transparent 100%);
}
@keyframes vg-sheen-sweep{
  to{ transform:translateX(320%) skewX(-8deg); }
}

/* 3D tilt (KPI cards) — JS drives the vars, this just renders them.
   The inline .stagger entrance fills forwards, which pins the card's
   transform forever and blocks the tilt; JS clears the finished
   animation (and locks opacity:1) on animationend. Do NOT "fix" this
   with fill-mode:backwards — the base .stagger state is opacity:0 and
   the cards vanish after the entrance. */
.vg-tilt{
  transform:perspective(900px)
            rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))
            translateZ(0);
  transition:transform .18s ease-out;
  will-change:transform;
}
.vg-tilt.vg-tilt-rest{ transition:transform .6s cubic-bezier(.2,.9,.3,1.2); }
.vg-tilt .vg-glare{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  border-radius:inherit;
  background:radial-gradient(260px circle at var(--gx,50%) var(--gy,50%),
    rgba(255,255,255,.08) 0%, transparent 60%);
  opacity:0; transition:opacity .25s var(--ease);
}
.vg-tilt:hover .vg-glare{ opacity:1; }
html:not(.dark) .vg-tilt .vg-glare{
  background:radial-gradient(260px circle at var(--gx,50%) var(--gy,50%),
    rgba(255,255,255,.55) 0%, transparent 60%);
}

/* live dot — slow breathing, the only persistent pulse on the page */
.vg-live-dot{
  animation:vg-breathe 3.2s ease-in-out infinite;
}
@keyframes vg-breathe{
  0%,100%{ opacity:1; }
  50%    { opacity:.45; }
}

/* sparklines & donut draw themselves in (JS sets the dash vars) */
.vg-draw{
  stroke-dasharray:var(--len) var(--len);
  stroke-dashoffset:var(--len);
  animation:vg-draw-in 1.1s cubic-bezier(.4,0,.2,1) forwards;
  animation-delay:var(--draw-delay,0s);
}
@keyframes vg-draw-in{ to{ stroke-dashoffset:0; } }
.vg-fade-area{
  opacity:0;
  animation:vg-area-in .6s ease-out forwards;
  animation-delay:calc(var(--draw-delay,0s) + .55s);
}
@keyframes vg-area-in{ to{ opacity:.25; } }

/* primary button sheen on hover */
.bg-app-primary{
  position:relative; overflow:hidden;
}
.bg-app-primary::after{
  content:""; position:absolute; top:0; bottom:0; left:-70%; width:50%;
  background:linear-gradient(105deg, transparent, rgba(255,255,255,.25), transparent);
  transform:skewX(-12deg);
  transition:left .45s cubic-bezier(.4,0,.2,1);
  pointer-events:none;
}
.bg-app-primary:hover::after{ left:130%; }

/* number that just changed — tiny pop, fired by JS */
.vg-num-pop{ animation:vg-num-pop .4s cubic-bezier(.2,.9,.3,1.4); display:inline-block; }
@keyframes vg-num-pop{
  0%  { transform:scale(1); }
  35% { transform:scale(1.06); }
  100%{ transform:scale(1); }
}

/* page entrance — slightly richer than a plain fade */
.page-panel.active{ animation:vg-page-in .3s var(--ease) both; }
@keyframes vg-page-in{
  from{ opacity:0; transform:translateY(6px); }
  to  { opacity:1; transform:none; }
}

/* ─────────────────────────────────────────────────────────
   DEPTH PASS — parallax, particles, bevels, sliding controls.
   Still the same rules: pointer-coupled or one-shot.
───────────────────────────────────────────────────────── */

/* wallpaper parallax — JS lerps --wpx/--wpy a few px against the cursor.
   The vars live inside the drift keyframes (custom properties re-resolve
   every frame), so parallax and drift share one transform peacefully. */
@keyframes vg-drift{
  from{ transform:translate3d(var(--wpx,0px), var(--wpy,0px), 0) scale(1); }
  to  { transform:translate3d(calc(var(--wpx,0px) - 1.5%), calc(var(--wpy,0px) + 1%), 0) scale(1.04); }
}

/* particle halo canvas behind the voice orb */
.vg-orbfx{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  opacity:.9;
}

/* segmented controls — the active chip appears to slide (FLIP via JS) */
.vg-flip{ will-change:transform; }

/* magnetic primary buttons — JS drives, spring back on leave */
.bg-app-primary{ will-change:transform; }

/* refresh button spin (one revolution per click) */
.vg-spin-once svg,
.vg-spin-once{ animation:vg-rev 0.6s cubic-bezier(.4,0,.2,1); }
@keyframes vg-rev{ to{ transform:rotate(360deg); } }

/* nav click pop */
.vg-pop{ animation:vg-pop .35s cubic-bezier(.2,.9,.3,1.6); }
@keyframes vg-pop{
  0%  { transform:scale(1); }
  40% { transform:scale(.9); }
  75% { transform:scale(1.06); }
  100%{ transform:scale(1); }
}

/* scroll shadows — JS toggles the data attrs while you scroll */
[data-vg-scroll]{ position:relative; }
[data-vg-scroll]::before,
[data-vg-scroll]::after{
  content:""; position:sticky; left:0; right:0; display:block;
  height:0; z-index:5; pointer-events:none;
  transition:box-shadow .25s var(--ease);
}
[data-vg-scroll]::before{ top:0; }
[data-vg-scroll]::after{ bottom:0; }
[data-vg-scroll="top"]::before,
[data-vg-scroll="both"]::before{
  box-shadow:0 12px 14px -10px rgba(0,0,0,.55);
}
[data-vg-scroll="bottom"]::after,
[data-vg-scroll="both"]::after{
  box-shadow:0 -12px 14px -10px rgba(0,0,0,.55);
}
html:not(.dark) [data-vg-scroll="top"]::before,
html:not(.dark) [data-vg-scroll="both"]::before{
  box-shadow:0 12px 14px -10px rgba(20,30,50,.18);
}
html:not(.dark) [data-vg-scroll="bottom"]::after,
html:not(.dark) [data-vg-scroll="both"]::after{
  box-shadow:0 -12px 14px -10px rgba(20,30,50,.18);
}

/* pressed-glass bevel on dense little surfaces */
.room-tile,
.heat-cell{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 -1px 0 rgba(0,0,0,.28),
    0 1px 1px rgba(0,0,0,.18) !important;
}
html:not(.dark) .room-tile,
html:not(.dark) .heat-cell{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    inset 0 -1px 0 rgba(20,30,50,.08),
    0 1px 1px rgba(20,30,50,.06) !important;
}

/* keycap press — buttons physically depress */
button:active:not(.nav-icon),
.pill-btn:active{
  box-shadow:inset 0 2px 4px rgba(0,0,0,.28) !important;
}
html:not(.dark) button:active:not(.nav-icon),
html:not(.dark) .pill-btn:active{
  box-shadow:inset 0 2px 4px rgba(20,30,50,.14) !important;
}

/* donut & gauges get physical depth */
.donut-fill{
  filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.45)) !important;
}
html:not(.dark) .donut-fill{
  filter:drop-shadow(0 1px 1.5px rgba(20,30,50,.2)) !important;
}
.gauge-track{
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,.35),
    inset 0 -1px 0 rgba(255,255,255,.05) !important;
}
html:not(.dark) .gauge-track{
  box-shadow:
    inset 0 1px 2px rgba(20,30,50,.12),
    inset 0 -1px 0 rgba(255,255,255,.6) !important;
}
.gauge-fill{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3) !important;
}

/* icon chips — soft 3D cap */
.bg-gradient-primary{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -2px 3px rgba(0,0,0,.25),
    0 2px 4px -1px rgba(0,0,0,.4) !important;
}

/* table rows lift a hair on hover */
.dtable tbody tr{ transition:background-color .15s var(--ease), transform .15s var(--ease); }
.dtable tbody tr:hover{ transform:translateX(2px); }

/* ─────────────────────────────────────────────────────────
   LUXURY FINISH PASS — ambient light, illuminated edges,
   living data. Everything below sits at the threshold of
   perception; if you notice it consciously, it's too loud.
───────────────────────────────────────────────────────── */

/* ambient hue cycle — the hidden light source drifts warm↔cool
   over two minutes. You feel the room change, you never see it. */
body::before{
  animation:vg-drift 90s ease-in-out infinite alternate,
            vg-ambient 140s ease-in-out infinite;
}
@keyframes vg-ambient{
  0%,100%{ filter:blur(58px) hue-rotate(0deg) brightness(1); }
  35%    { filter:blur(58px) hue-rotate(-9deg) brightness(1.06); }
  70%    { filter:blur(58px) hue-rotate(7deg) brightness(.97); }
}

/* volumetric shaft — one diagonal light ray falling across the hero */
.hero-strip .vg-shaft{
  position:absolute; top:-40%; bottom:-40%; left:18%; width:30%;
  z-index:0; pointer-events:none;
  background:linear-gradient(100deg,
    transparent 0%,
    rgba(140,190,255,.05) 38%,
    rgba(140,190,255,.085) 50%,
    rgba(140,190,255,.05) 62%,
    transparent 100%);
  transform:skewX(-14deg);
  filter:blur(6px);
  animation:vg-shaft 26s ease-in-out infinite alternate;
}
@keyframes vg-shaft{
  from{ transform:skewX(-14deg) translateX(-12%); opacity:.7; }
  to  { transform:skewX(-14deg) translateX(34%);  opacity:1; }
}
html:not(.dark) .hero-strip .vg-shaft{
  background:linear-gradient(100deg,
    transparent 0%,
    rgba(255,255,255,.25) 38%,
    rgba(255,255,255,.5) 50%,
    rgba(255,255,255,.25) 62%,
    transparent 100%);
}

/* illuminated borders — hero + balance card get a slow conic edge
   light, drawn in a masked ring so only the 1px border carries it */
.hero-strip .vg-edge,
.balance-card .vg-edge{
  position:absolute; inset:-1px; z-index:0; pointer-events:none;
  border-radius:inherit; padding:1px;
  background:conic-gradient(from var(--edge,0deg),
    transparent 0deg,
    rgba(109,179,255,.0) 40deg,
    rgba(109,179,255,.45) 90deg,
    rgba(76,184,196,.3) 130deg,
    transparent 180deg,
    transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
  animation:vg-edge-sweep 14s linear infinite;
  opacity:.8;
}
@property --edge{ syntax:'<angle>'; initial-value:0deg; inherits:false; }
@keyframes vg-edge-sweep{ to{ --edge:360deg; } }
html:not(.dark) .hero-strip .vg-edge,
html:not(.dark) .balance-card .vg-edge{ opacity:.5; }

/* AI rail = highest layer in the depth system */
#right-sidebar > .glass-panel,
#right-sidebar .glass-panel{
  background:var(--m-thick) !important;
  box-shadow:
    inset 0 1px 0 var(--m-specular),
    0 1px 1px rgba(0,0,0,.1),
    0 18px 50px -18px rgba(0,0,0,.7),
    0 0 36px -18px rgba(10,132,255,.35) !important;
}
html:not(.dark) #right-sidebar > .glass-panel,
html:not(.dark) #right-sidebar .glass-panel{
  box-shadow:
    inset 0 1px 0 var(--m-specular),
    0 1px 1px rgba(20,30,50,.06),
    0 18px 50px -18px rgba(20,30,50,.25),
    0 0 36px -18px rgba(0,122,255,.2) !important;
}

/* cursor reflection on the large glass surfaces (JS sets --hx/--hy) */
.vg-lit{ position:relative; }
.vg-lit .vg-light{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  border-radius:inherit;
  background:radial-gradient(380px circle at var(--hx,60%) var(--hy,30%),
    rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 35%, transparent 65%);
  opacity:0; transition:opacity .35s var(--ease);
}
.vg-lit:hover .vg-light{ opacity:1; }
html:not(.dark) .vg-lit .vg-light{
  background:radial-gradient(380px circle at var(--hx,60%) var(--hy,30%),
    rgba(255,255,255,.45) 0%, rgba(255,255,255,.12) 35%, transparent 65%);
}

/* living data — sparkline endpoint pulse (JS positions the dot) */
.vg-endpt{
  fill:currentColor;
  animation:vg-endpt 2.6s ease-in-out infinite;
  transform-origin:center;
  transform-box:fill-box;
}
@keyframes vg-endpt{
  0%,100%{ opacity:.9; transform:scale(1); }
  50%    { opacity:.4; transform:scale(1.6); }
}

/* sparklines get a whisper of glow back — 2px, not the old neon */
.sparkline path.line{ filter:drop-shadow(0 0 2px currentColor) !important; opacity:.95; }

/* status pulse rings — AI status + agent "Active" dots */
.vg-ring{ position:relative; }
.vg-ring::after{
  content:""; position:absolute; inset:-3px; border-radius:50%;
  border:1px solid currentColor; opacity:0;
  animation:vg-ring 3s cubic-bezier(.2,.6,.4,1) infinite;
}
@keyframes vg-ring{
  0%  { transform:scale(.6); opacity:.7; }
  70% { transform:scale(1.6); opacity:0; }
  100%{ opacity:0; }
}

/* cinematic first load — hero settles from a breath of blur */
.vg-cinema{ animation:vg-cinema .9s cubic-bezier(.25,.6,.2,1) both; }
@keyframes vg-cinema{
  from{ opacity:0; transform:scale(.985); filter:blur(6px); }
  to  { opacity:1; transform:scale(1); filter:blur(0); }
}

/* ── hero pill micro-charts ──────────────────────────────
   Each hero pill carries a small live curve + a score chip.
   Temp = diurnal curve, tide = real 12.4h sinusoid anchored to
   the displayed next-high time, occupancy = 14-day trend ending
   at tonight's real value. Drawn by mountHeroSparks(). */
.hero-spark{
  width:72px; height:22px; display:block;
  overflow:visible;
}
/* the prebuilt tailwind purged text-amber-400/text-sky-400 — pin hues here */
#hero-wx-spark{ color:#f0a32e; }
#hero-tide-spark{ color:#5ab2e8; }
#hero-occ-spark{ color:#4cb8c4; }
.hero-spark path.hs-line{
  fill:none; stroke:currentColor; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
  filter:drop-shadow(0 0 2px currentColor);
  opacity:.95;
}
.hero-spark path.hs-area{ fill:currentColor; opacity:.12; }
.hero-spark .hs-now{
  fill:currentColor;
  animation:vg-endpt 2.6s ease-in-out infinite;
  transform-origin:center; transform-box:fill-box;
}
.hero-chip{
  font-size:9.5px; font-weight:600; letter-spacing:.02em;
  padding:1px 7px; border-radius:999px; white-space:nowrap;
  background:rgba(255,255,255,.08);
  border:.5px solid var(--m-border);
  color:var(--ink-2);
}
html:not(.dark) .hero-chip{
  background:rgba(0,0,0,.05);
}
@media (max-width:1280px){ .hero-spark{ display:none; } }

/* ── loading skeletons ───────────────────────────────────
   Injected by JS into data containers that are still empty when a
   page activates; the real render's innerHTML overwrite replaces
   them. Glass shimmer, not gray boxes. */
.vg-skel-line{
  height:12px; border-radius:6px;
  background:linear-gradient(90deg,
    rgba(255,255,255,.05) 25%,
    rgba(255,255,255,.11) 50%,
    rgba(255,255,255,.05) 75%);
  background-size:200% 100%;
  animation:vg-skel 1.4s ease-in-out infinite;
}
html:not(.dark) .vg-skel-line{
  background:linear-gradient(90deg,
    rgba(20,30,50,.06) 25%,
    rgba(20,30,50,.12) 50%,
    rgba(20,30,50,.06) 75%);
  background-size:200% 100%;
}
@keyframes vg-skel{
  from{ background-position:200% 0; }
  to  { background-position:-200% 0; }
}
.vg-skel td{ padding:14px 16px !important; border-bottom:1px solid rgba(255,255,255,.04) !important; }
html:not(.dark) .vg-skel td{ border-bottom:1px solid rgba(0,0,0,.04) !important; }

/* ─────────────────────────────────────────────────────────
   SYSTEM BEHAVIORS — the "this is engineered software" tier.
   Boot sequence, header materialization, morphing nav indicator.
───────────────────────────────────────────────────────── */

/* boot sequence — once per session, OS-style */
#vg-boot{
  position:fixed; inset:0; z-index:99999;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:22px;
  background:
    radial-gradient(ellipse 70% 50% at 50% 38%, rgba(34,72,110,.5) 0%, transparent 65%),
    #07080a;
  transition:opacity .6s cubic-bezier(.4,0,.2,1), visibility .6s;
}
#vg-boot.vg-boot-done{ opacity:0; visibility:hidden; pointer-events:none; }
#vg-boot .vg-boot-mark{
  width:64px; height:64px; border-radius:18px; overflow:hidden;
  box-shadow:0 0 0 .5px rgba(255,255,255,.18), 0 18px 50px -12px rgba(10,132,255,.4);
  animation:vg-boot-mark 1s cubic-bezier(.2,.8,.2,1) both;
}
#vg-boot .vg-boot-mark img{ width:100%; height:100%; object-fit:cover; }
@keyframes vg-boot-mark{
  from{ opacity:0; transform:scale(.8); filter:blur(8px); }
  to  { opacity:1; transform:scale(1); filter:blur(0); }
}
#vg-boot .vg-boot-name{
  font-family:var(--ff-display); font-size:15px; font-weight:600;
  letter-spacing:.32em; text-indent:.32em; color:rgba(255,255,255,.85);
  animation:vg-boot-mark 1s .15s cubic-bezier(.2,.8,.2,1) both;
}
#vg-boot .vg-boot-sub{
  font-size:10.5px; font-weight:500; letter-spacing:.08em;
  color:rgba(235,235,245,.4); margin-top:-14px;
  animation:vg-boot-mark 1s .3s cubic-bezier(.2,.8,.2,1) both;
}
#vg-boot .vg-boot-bar{
  width:140px; height:2px; border-radius:1px; overflow:hidden;
  background:rgba(255,255,255,.08); margin-top:6px;
}
#vg-boot .vg-boot-bar i{
  display:block; height:100%; width:100%;
  background:linear-gradient(90deg, #2b8fd9, #4cb8c4);
  transform-origin:left;
  animation:vg-boot-fill 1.1s .2s cubic-bezier(.3,.6,.2,1) both;
}
@keyframes vg-boot-fill{
  from{ transform:scaleX(0); }
  to  { transform:scaleX(1); }
}

/* header materializes into glass once content scrolls beneath it */
header{
  transition:background-color .3s var(--ease), box-shadow .3s var(--ease),
             backdrop-filter .3s var(--ease);
}
header.vg-scrolled{
  background:rgba(16,18,22,.55) !important;
  backdrop-filter:var(--blur-regular) !important;
  -webkit-backdrop-filter:var(--blur-regular) !important;
  box-shadow:
    inset 0 -1px 0 rgba(255,255,255,.07),
    0 8px 30px -12px rgba(0,0,0,.5) !important;
}
html:not(.dark) header.vg-scrolled{
  background:rgba(255,255,255,.6) !important;
  box-shadow:
    inset 0 -1px 0 rgba(0,0,0,.06),
    0 8px 30px -12px rgba(20,30,50,.15) !important;
}

/* morphing nav indicator — one pill that glides between icons */
#vg-nav-ind{
  position:absolute; left:0; width:100%; z-index:0;
  border-radius:12px;
  background:var(--accent-soft);
  transition:transform .38s cubic-bezier(.3,.9,.25,1.1), height .38s cubic-bezier(.3,.9,.25,1.1);
  pointer-events:none;
}
.nav-icon.active{ background:transparent !important; }
.nav-icon{ position:relative; z-index:1; }

/* ── accessibility ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation:none !important;
    transition-duration:.01ms !important;
  }
  .vg-tilt{ transform:none !important; }
  .vg-draw{ stroke-dashoffset:0 !important; }
  .vg-orbfx{ display:none !important; }
  .vg-shaft, .vg-edge{ display:none !important; }
  #vg-boot{ display:none !important; }
}