/* ==========================================================================
   VICC v69 — AETHER
   The luxury portal aesthetic, applied to real VICC surfaces.
   Loads last. Remove the one <link> and everything reverts.

   The hard part was the laser track: the portal used four <span> elements
   per card, and VICC's markup has none. This achieves the same continuous
   perimeter beam with four background layers on a single pseudo-element,
   each animating its own position — so no page markup changes at all.
   ========================================================================== */

:root{
  --void:#000208;
  --cyan:#06B6D4;
  --cyan-lt:#67E8F9;
  --emerald:#6EE7B7;
  --violet:#8B5CF6;
  --violet-lt:#C4B5FD;
  --magenta:#E879F9;

  --idle:#6EE7B7;
  --ring:#FBBF24;
  --busy:#FB7185;
  --acc:#67E8F9;
  --off:#334155;

  --ink:#E8EEF8;
  --ink-dim:#94A3B8;
  --muted:#8493BC;
  --faint:#57637A;

  --glass:rgba(0,0,0,.40);
  --edge:rgba(255,255,255,.12);
  --edge-hi:rgba(255,255,255,.30);
  --line:rgba(255,255,255,.12);
  --line-soft:rgba(255,255,255,.06);
}

html, body { background:#000208 !important; }

body{
  background:
    radial-gradient(ellipse 130% 90% at 50% -20%, #0A1424 0%, #04070F 40%, #000208 100%) !important;
  color:var(--ink);
}

/* ==========================================================================
   HOLOGRAPHIC OVERLAYS — scanlines across the whole document
   ========================================================================== */
body::before{
  content:"";position:fixed;inset:0;z-index:200;pointer-events:none;
  background:repeating-linear-gradient(180deg,
    rgba(0,0,0,0) 0%, rgba(0,0,0,0) 95%, rgba(0,255,255,.03) 100%);
  background-size:100% 4px;
  animation:none;
}

/* Nebulae replace the flat mesh. */
body::after{
  content:"";position:fixed;inset:-20%;z-index:0;pointer-events:none;
  background:
    radial-gradient(38% 34% at 16% 12%, rgba(6,182,212,.22), transparent 66%),
    radial-gradient(34% 30% at 84% 10%, rgba(139,92,246,.22), transparent 64%),
    radial-gradient(40% 34% at 74% 88%, rgba(232,121,249,.16), transparent 66%),
    radial-gradient(28% 24% at 8% 78%, rgba(110,231,183,.14), transparent 62%) !important;
  filter:blur(70px);
  animation:v69-neb 34s ease-in-out infinite alternate !important;
  background-size:auto !important;
  -webkit-mask-image:none !important; mask-image:none !important;
}
@keyframes v69-neb{
  0%  {transform:translate3d(0,0,0) scale(1)}
  50% {transform:translate3d(3%,-2%,0) scale(1.1)}
  100%{transform:translate3d(-3%,3%,0) scale(1.02)}
}

/* Vignette */
.page::after{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 82% 72% at 50% 45%,transparent 42%,rgba(0,0,0,.68) 100%);
}
/* z-index ONLY. Writing `position` in a rule whose selector list contains
   .bar or .rail overrides their fixed positioning and drops them into normal
   flow — which pushes the entire page down by the height of the rail. This
   has now bitten three times; the rule is: never set position on .bar/.rail
   outside the media query that deliberately unpins them. */
.bar  { z-index:100 }
.rail { z-index:90 }
.page > * { position:relative; z-index:2 }

/* Belt and braces: re-assert the fixed chrome so load order cannot matter. */
.bar  { position:fixed !important; top:12px; left:14px; right:14px }
.rail { position:fixed !important; top:82px; bottom:14px; left:14px; overflow-y:auto }
.page { margin-top:86px }

/* ==========================================================================
   HYPER-DIMENSIONAL GLASS
   ========================================================================== */
.panel, .metric, .stat, .ident, .card, .ops-panel, .feature-card,
.app-tile, .phone-mini, .sidecar, .cmdk-box, .hero, .note,
.notice-good, .notice-warn, .safe-note, .danger-note, .ops-kpi{
  background:rgba(0,0,0,.40) !important;
  -webkit-backdrop-filter:blur(64px) saturate(190%) !important;
          backdrop-filter:blur(64px) saturate(190%) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  border-radius:20px !important;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.30),
    inset 0 -1px 0 rgba(0,0,0,.55),
    0 0 50px rgba(139,92,246,.15),
    0 26px 70px rgba(0,0,0,.6) !important;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  transform-style:preserve-3d;
  transition:transform .55s cubic-bezier(.16,1,.3,1), box-shadow .55s ease;
}

/* Subtle 3D lift */
.metric:hover, .stat:hover, .feature-card:hover, .app-tile:hover, .phone-mini:hover{
  transform:translateZ(30px) scale(1.015);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.42),
    0 0 90px rgba(139,92,246,.3),
    0 40px 100px rgba(0,0,0,.7) !important;
}

/* ==========================================================================
   LASER TRACK — a 2px beam runs the exact perimeter
   Four background layers on one pseudo-element: top, right, bottom, left.
   Each animates its own position, a quarter-cycle apart, so the beam reads
   as one continuous loop with no extra markup.
   ========================================================================== */
.metric::before, .stat::before, .ops-kpi::before,
.panel > .panel-head::after, .ident::before{
  content:"";position:absolute;inset:0;z-index:6;pointer-events:none;
  border-radius:inherit;
  background-repeat:no-repeat;
  background-image:
    linear-gradient(90deg,  transparent, var(--beam,#67E8F9) 45%, #fff 50%, var(--beam,#67E8F9) 55%, transparent),
    linear-gradient(180deg, transparent, var(--beam,#67E8F9) 45%, #fff 50%, var(--beam,#67E8F9) 55%, transparent),
    linear-gradient(90deg,  transparent, var(--beam,#67E8F9) 45%, #fff 50%, var(--beam,#67E8F9) 55%, transparent),
    linear-gradient(180deg, transparent, var(--beam,#67E8F9) 45%, #fff 50%, var(--beam,#67E8F9) 55%, transparent);
  background-size:38% 2px, 2px 38%, 38% 2px, 2px 38%;
  background-position:-40% 0, 100% -40%, 140% 100%, 0 140%;
  filter:drop-shadow(0 0 6px var(--beam,#06B6D4)) drop-shadow(0 0 14px var(--beam,#06B6D4));
  animation:laser-track 4s linear infinite;
}

@keyframes laser-track{
  0%   { background-position: -40% 0,    100% -40%,  140% 100%,  0 140%; }
  25%  { background-position:  140% 0,   100% -40%,  140% 100%,  0 140%; }
  25.01%,50% { background-position: 140% 0, 100% 140%, 140% 100%, 0 140%; }
  50.01%,75% { background-position: 140% 0, 100% 140%, -40% 100%, 0 140%; }
  75.01%,100%{ background-position: 140% 0, 100% 140%, -40% 100%, 0 -40%; }
}

/* Each tile's beam takes its own signal colour, out of phase. */
.metric.idle, .stat.good  { --beam:#6EE7B7 }
.metric.ring, .stat.warn  { --beam:#FBBF24 }
.metric.busy, .stat.bad   { --beam:#FB7185 }
.metric.acc               { --beam:#67E8F9 }
.metric:nth-child(2n)::before, .stat:nth-child(2n)::before { animation-delay:-1.33s }
.metric:nth-child(3n)::before, .stat:nth-child(3n)::before { animation-delay:-2.66s }

/* ==========================================================================
   REFLECTION SHINE — the exact gradient, every 4 seconds
   ========================================================================== */
.panel::after, .metric::after, .stat::after, .ident::after, .sidecar::after{
  content:"";position:absolute;inset:-50%;z-index:5;pointer-events:none;
  background:linear-gradient(45deg,transparent 20%,rgba(255,255,255,.60) 50%,transparent 80%);
  transform:translate3d(-70%,-70%,0) rotate(8deg);
  opacity:0; mix-blend-mode:overlay;
  animation:v69-shine 4s ease-in-out infinite;
}
@keyframes v69-shine{
  0%  {opacity:0;  transform:translate3d(-70%,-70%,0) rotate(8deg)}
  38% {opacity:0}
  50% {opacity:.45}
  62% {opacity:0}
  100%{opacity:0;  transform:translate3d(70%,70%,0) rotate(8deg)}
}
.panel:nth-child(2n)::after { animation-delay:-2s }

/* ==========================================================================
   OMNI-GLOW TYPE
   ========================================================================== */
.head h1, .title h1, header h1,
.metric dd, .stat strong, .ops-kpi strong{
  background-image:linear-gradient(to top right,#67E8F9 0%,#A7F3D0 45%,#8B5CF6 100%) !important;
  -webkit-background-clip:text !important; background-clip:text !important;
  -webkit-text-fill-color:transparent !important; color:transparent !important;
  text-shadow:0 0 20px rgba(6,182,212,.8), 0 0 40px rgba(139,92,246,.6);
  filter:drop-shadow(0 0 26px rgba(6,182,212,.4));
  background-size:180% 180%;
  animation:v69-omni 8s ease-in-out infinite alternate;
}
@keyframes v69-omni{
  0%  {background-position:0% 100%}
  100%{background-position:100% 0%}
}

.metric.idle dd { background-image:linear-gradient(to top right,#6EE7B7,#A7F3D0 50%,#67E8F9) !important }
.metric.ring dd { background-image:linear-gradient(to top right,#FBBF24,#FDE68A 50%,#FB923C) !important }
.metric.busy dd { background-image:linear-gradient(to top right,#FB7185,#FDA4AF 50%,#E879F9) !important }

.eyebrow, .ops-heading, .section-heading, .rail-label, summary.rail-label{
  color:var(--cyan-lt) !important;
  text-shadow:0 0 18px rgba(6,182,212,.6);
}

/* ==========================================================================
   BUTTONS — scale, brightness, neon blast
   ========================================================================== */
.btn, button, .actions a{
  position:relative; overflow:hidden;
  background:rgba(255,255,255,.06) !important;
  -webkit-backdrop-filter:blur(22px); backdrop-filter:blur(22px);
  border:1px solid rgba(255,255,255,.24) !important;
  border-radius:12px !important;
  color:#fff !important;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.32), 0 12px 34px rgba(0,0,0,.5) !important;
  transition:transform .35s cubic-bezier(.16,1,.3,1), filter .35s ease,
             box-shadow .35s ease, border-color .35s ease;
}
.btn:hover, button:hover, .actions a:hover{
  transform:scale(1.05) translateY(-2px);
  filter:brightness(1.25);
  border-color:rgba(103,232,249,.75) !important;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.45),
    0 0 40px rgba(6,182,212,.75),
    0 0 90px rgba(139,92,246,.55),
    0 0 140px rgba(6,182,212,.35),
    0 18px 56px rgba(0,0,0,.6) !important;
}
.btn:active, button:active { transform:scale(1.01) translateY(0) }
.btn::after, button::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.55) 48%,transparent 66%);
  transform:translateX(-140%); transition:transform .8s ease;
}
.btn:hover::after, button:hover::after{ transform:translateX(140%) }

.btn.primary, button[type=submit]:not(.mini):not(.danger){
  background:linear-gradient(135deg,#06B6D4,#8B5CF6) !important;
  color:#02121A !important; font-weight:800;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.4), 0 0 40px rgba(6,182,212,.5),
             0 14px 40px rgba(0,0,0,.55) !important;
}
.btn.go{
  background:linear-gradient(135deg,#6EE7B7,#06B6D4) !important;
  color:#022c22 !important; font-weight:800;
}
.btn.danger, button.danger{
  background:linear-gradient(135deg,#FB7185,#E879F9) !important;
  color:#2A0512 !important; font-weight:800;
}

/* ==========================================================================
   LAMPS + PILLS
   ========================================================================== */
.lamp, .status, .ops-orb{
  background:radial-gradient(circle at 34% 28%, #fff 0%, var(--c,var(--idle)) 38%, var(--c,var(--idle)) 100%) !important;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.45) inset,
    0 0 8px var(--c,var(--idle)),
    0 0 22px var(--c,var(--idle)),
    0 0 44px color-mix(in srgb, var(--c,var(--idle)) 40%, transparent) !important;
}
.lamp.idle{--c:#6EE7B7} .lamp.ring{--c:#FBBF24}
.lamp.busy{--c:#FB7185} .lamp.acc{--c:#67E8F9}
.lamp.dark{--c:#334155;box-shadow:0 0 0 1px rgba(0,0,0,.55) inset !important}

.pill, .badge, .goodpill, .badpill, .ops-badge, .live-chip, .who,
.account-chip, .protection-shield, .led{
  background:rgba(255,255,255,.07) !important;
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.14) !important;
  border-radius:99px !important;
}
.pill.idle, .goodpill, .led{
  background:rgba(16,185,129,.12) !important;
  border-color:rgba(110,231,183,.42) !important; color:#6EE7B7 !important;
  box-shadow:0 0 26px rgba(16,185,129,.26), inset 0 1px 0 rgba(255,255,255,.16) !important;
  animation:v69-core 2.6s ease-in-out infinite;
}
@keyframes v69-core{
  0%,100%{box-shadow:0 0 26px rgba(16,185,129,.26), inset 0 1px 0 rgba(255,255,255,.16)}
  50%    {box-shadow:0 0 52px rgba(16,185,129,.58), inset 0 1px 0 rgba(255,255,255,.24)}
}
.pill.ring{background:rgba(251,191,36,.12)!important;border-color:rgba(251,191,36,.42)!important;color:#FBBF24!important}
.pill.busy,.badpill{background:rgba(251,113,133,.12)!important;border-color:rgba(251,113,133,.42)!important;color:#FB7185!important}
.pill.acc{background:rgba(6,182,212,.12)!important;border-color:rgba(103,232,249,.42)!important;color:#67E8F9!important}

/* ==========================================================================
   CHROME
   ========================================================================== */
.bar, .shell > main > header, .app > .main > .top{
  background:linear-gradient(180deg,rgba(0,0,0,.62),rgba(0,0,0,.42)) !important;
  -webkit-backdrop-filter:blur(30px) saturate(190%) !important;
          backdrop-filter:blur(30px) saturate(190%) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  border-radius:18px !important;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.24), 0 20px 60px rgba(0,0,0,.65),
             0 0 50px rgba(139,92,246,.12) !important;
}
.rail, .shell > aside, .app > .side{
  background:linear-gradient(180deg,rgba(0,0,0,.56),rgba(0,0,0,.38)) !important;
  -webkit-backdrop-filter:blur(30px) saturate(180%) !important;
          backdrop-filter:blur(30px) saturate(180%) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  border-radius:18px !important;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.2), 0 20px 60px rgba(0,0,0,.6) !important;
}
.rail a.on, .rail a.active{
  background:linear-gradient(90deg,rgba(6,182,212,.24),rgba(139,92,246,.12) 55%,transparent) !important;
  box-shadow:inset 0 0 0 1px rgba(103,232,249,.32), 0 0 28px rgba(6,182,212,.2) !important;
}

/* Corner crosshairs on the bar and on panels. */
.bar::before, .panel::before{
  content:"+"; position:absolute; top:9px; left:11px; z-index:7;
  font:300 11px/11px var(--mono, ui-monospace, monospace);
  color:rgba(6,182,212,.5); pointer-events:none;
}
.panel > .panel-head { position:relative }

/* ==========================================================================
   FORMS / TABLES / CODE
   ========================================================================== */
input, select, textarea{
  background:rgba(0,0,0,.44) !important;
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.16) !important;
  border-radius:12px !important;
  color:var(--ink) !important;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.10), inset 0 2px 12px rgba(0,0,0,.5) !important;
}
input:focus, select:focus, textarea:focus{
  border-color:#67E8F9 !important;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.14),
             0 0 0 3px rgba(6,182,212,.18),
             0 0 40px rgba(6,182,212,.28) !important;
}
th{ background:rgba(255,255,255,.05)!important; border-bottom:1px solid rgba(255,255,255,.12)!important;
    color:var(--muted)!important }
td{ border-bottom:1px solid rgba(255,255,255,.06)!important }
tbody tr:hover{ background:rgba(6,182,212,.06)!important }
pre, pre.xml, code{
  background:rgba(0,0,0,.55)!important;
  border:1px solid rgba(255,255,255,.12)!important;
  border-radius:14px!important; color:var(--ink-dim)!important;
}
a{ color:var(--cyan-lt) }

/* LCD */
.lcd, .phone-screen{
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(110,231,183,.14), transparent 62%),
    linear-gradient(180deg, rgba(2,20,18,.85), rgba(0,8,8,.94)) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  box-shadow:inset 0 0 44px rgba(0,0,0,.75), 0 0 30px rgba(110,231,183,.14) !important;
}
.lcd-ext, .phone-screen-ext{ color:#6EE7B7 !important; text-shadow:0 0 18px rgba(110,231,183,.8) }

@media (prefers-reduced-motion:reduce){
  body::after, .metric::before, .stat::before, .panel::after, .metric::after,
  .head h1, .pill.idle, .goodpill { animation:none !important }
}
@media (max-width:900px){
  .bar, .rail, .shell > aside, .app > .side,
  .shell > main > header, .app > .main > .top { border-radius:0 !important }
}


/* ==========================================================================
   SCALE — larger type and a larger mark
   ========================================================================== */
html { font-size:17px }
body { font-size:16.5px }

.head h1, .title h1, header h1 { font-size:clamp(34px,4vw,52px) !important; }
h2, .panel-head h2 { font-size:20px !important }
h3 { font-size:17.5px !important }

.metric dd, .stat strong, .ops-kpi strong { font-size:48px !important; font-weight:800 }
.metric dt, .stat span, .ops-kpi span { font-size:11.5px !important; letter-spacing:.2em !important }

table { font-size:15.5px !important }
th { font-size:11.5px !important; padding:13px 18px !important; letter-spacing:.14em !important }
td { padding:14px 18px !important }
.ext, .rack-ext { font-size:22px !important }
.rack-name b { font-size:16px !important }
.mac, .mono { font-size:14px !important }

.rail a { font-size:15.5px !important; padding:9px 16px 9px 26px !important }
.rail-label, summary.rail-label { font-size:12px !important; letter-spacing:.18em !important }
.rail-n { font-size:10.5px !important; padding:3px 9px !important }
.rail-ico { font-size:16px !important; width:21px !important }

.btn, button { font-size:15px !important; padding:11px 19px !important }
.btn.mini, button.mini { font-size:13.5px !important; padding:7px 13px !important }
input, select, textarea { font-size:16.5px !important; padding:12px 15px !important }
.field > span, .form label { font-size:11.5px !important; letter-spacing:.15em !important }
.pill, .badge, .live-chip, .who { font-size:12.5px !important; padding:5px 12px !important }
.note, .checks li { font-size:15.5px !important }
.eyebrow { font-size:11.5px !important; letter-spacing:.22em !important }
pre, code { font-size:13.5px !important }

/* The mark — larger, with a real glow */
.bar-logo, .brand-logo {
  width:44px !important; height:44px !important;
  border-radius:12px !important;
  border:1px solid rgba(255,255,255,.22) !important;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.34),
    0 0 34px rgba(6,182,212,.45),
    0 0 70px rgba(139,92,246,.25) !important;
  animation:v69-mark 5s ease-in-out infinite;
}
@keyframes v69-mark{
  0%,100%{ box-shadow:inset 0 1px 1px rgba(255,255,255,.34),0 0 34px rgba(6,182,212,.45),0 0 70px rgba(139,92,246,.25) }
  50%    { box-shadow:inset 0 1px 1px rgba(255,255,255,.45),0 0 54px rgba(6,182,212,.75),0 0 100px rgba(139,92,246,.45) }
}
.bar-name, .brand-text, .brand {
  font-size:17px !important; font-weight:800 !important; letter-spacing:.16em !important;
  background-image:linear-gradient(to top right,#67E8F9,#A7F3D0 50%,#8B5CF6) !important;
  -webkit-background-clip:text !important; background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  filter:drop-shadow(0 0 20px rgba(6,182,212,.5));
}
.bar-brand small, .brand-text span, .brand small {
  font-size:11.5px !important; -webkit-text-fill-color:initial !important;
  color:var(--faint) !important; letter-spacing:.14em !important;
}
.bar-brand { gap:13px !important }

@media (max-width:900px){
  html { font-size:16px }
  .bar { position:sticky !important; top:0; left:0; right:0 }
  .rail { position:static !important; height:auto }
  .page { margin-top:0 }
  .metric dd, .stat strong { font-size:34px !important }
  .head h1 { font-size:26px !important }
}


/* 3D perspective belongs on the card containers, never on body:
   perspective creates a containing block for position:fixed, which was
   re-anchoring .bar and .rail to body instead of the viewport. */
.metrics, .rack, .grid2, .grid3, .cards, .feature-grid { perspective: 1000px; }