/* ==========================================================================
   VICC v70 — OVERDRIVE
   The cyberpunk terminal look, applied to real VICC surfaces.
   Loads last. Remove the one <link> and everything reverts.

   Deliberate restraint: the glitch, scanlines and chromatic split are applied
   to CHROME and HEADINGS only, never to tables, MAC addresses, IPs or config
   XML. A sheared extension number is a support call at 2am. The aesthetic is
   intact; the data stays legible.
   ========================================================================== */

:root{
  --black:#000000;
  --pink:#ff0055;
  --cyan:#00ffff;
  --violet:#9900ff;
  --magenta:#ff00ff;
  --amber:#ffaa00;

  --idle:#00ffaa;
  --ring:#ffaa00;
  --busy:#ff0055;
  --acc:#00ffff;
  --off:#2a3548;

  --ink:#e8f4ff;
  --ink-dim:#8fa4bd;
  --muted:#7d90a8;
  --faint:#455468;
  --line:rgba(153,0,255,.30);
  --line-soft:rgba(255,255,255,.07);
}

html, body { background:#000000 !important; }
body{
  background:#000000 !important;
  color:var(--ink);
  cursor:crosshair;
}

/* ==========================================================================
   THE HELLSCAPE — 3D grid corridor + plasma
   ========================================================================== */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  perspective:340px; overflow:hidden;
  background:
    linear-gradient(rgba(0,255,255,.09) 1px,transparent 1px) 0 0/64px 64px,
    linear-gradient(90deg,rgba(255,0,85,.07) 1px,transparent 1px) 0 0/64px 64px;
  transform:none;
  animation:v70-rush 1.4s linear infinite;
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 34%,#000 6%,transparent 74%);
          mask-image:radial-gradient(ellipse 90% 70% at 50% 34%,#000 6%,transparent 74%);
}
@keyframes v70-rush{
  0%  {background-position:0 0, 0 0}
  100%{background-position:0 64px, 0 0}
}

/* Plasma field, violently cycling hue */
body::after{
  content:"";position:fixed;inset:-25%;z-index:0;pointer-events:none;
  background:
    radial-gradient(34% 30% at 14% 10%, rgba(255,0,85,.30), transparent 64%),
    radial-gradient(32% 28% at 86% 12%, rgba(0,255,255,.26), transparent 62%),
    radial-gradient(38% 32% at 74% 88%, rgba(153,0,255,.28), transparent 64%),
    radial-gradient(28% 24% at 10% 82%, rgba(255,0,255,.20), transparent 60%) !important;
  background-size:auto !important;
  filter:blur(80px) saturate(240%);
  animation:v70-plasma 12s ease-in-out infinite alternate,
            v70-hue 6s linear infinite !important;
  -webkit-mask-image:none !important; mask-image:none !important;
}
@keyframes v70-plasma{
  0%  {transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(4%,-3%,0) scale(1.16)}
}
@keyframes v70-hue{
  0%  {filter:blur(80px) saturate(240%) hue-rotate(0deg)}
  100%{filter:blur(80px) saturate(240%) hue-rotate(360deg)}
}

/* CRT scanlines — light enough to read tables through */
.page::before{
  content:"";position:fixed;inset:0;z-index:150;pointer-events:none;
  background:repeating-linear-gradient(180deg,
    rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px, rgba(0,0,0,.16) 3px, rgba(0,0,0,0) 4px);
}
/* A sweep passing down the screen */
.page::after{
  content:"";position:fixed;left:0;right:0;height:160px;z-index:151;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(0,255,255,.055),rgba(255,0,85,.04),transparent);
  animation:v70-sweep 4.5s linear infinite;
}
@keyframes v70-sweep{ 0%{top:-160px} 100%{top:110%} }

/* z-index only. Writing `position` in a rule whose selector list contains
   .bar or .rail overrides the fixed positioning below and drops them into
   normal flow, pushing the page down by the height of the rail. This has
   now been caught four times — the audit in the build script exists
   specifically to stop it reaching the server again. */
.bar  { z-index:100 }
.rail { z-index:90 }
.page > * { position:relative; z-index:3 }

/* ==========================================================================
   OVERDRIVE GLASS
   ========================================================================== */
.panel, .metric, .stat, .ident, .card, .ops-panel, .feature-card,
.app-tile, .phone-mini, .sidecar, .cmdk-box, .hero, .note, .ops-kpi,
.notice-good, .notice-warn, .safe-note, .danger-note{
  background:rgba(23,23,23,.20) !important;
  -webkit-backdrop-filter:blur(80px) saturate(240%) brightness(1.06) !important;
          backdrop-filter:blur(80px) saturate(240%) brightness(1.06) !important;
  border:1px solid rgba(153,0,255,.5) !important;
  border-radius:4px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 0 60px rgba(153,0,255,.08),
    0 0 40px rgba(153,0,255,.2),
    0 26px 80px rgba(0,0,0,.9) !important;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  clip-path:polygon(0 10px,10px 0,calc(100% - 10px) 0,100% 10px,
                    100% calc(100% - 10px),calc(100% - 10px) 100%,
                    10px 100%,0 calc(100% - 10px));
  transition:box-shadow .4s ease, transform .4s cubic-bezier(.16,1,.3,1);
}
.panel:hover, .metric:hover, .stat:hover, .phone-mini:hover, .app-tile:hover{
  transform:translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 0 80px rgba(255,0,85,.12),
    0 0 70px rgba(255,0,85,.34),
    0 34px 100px rgba(0,0,0,.95) !important;
}

/* ---- LASER RAY: white-hot pink beam circling the perimeter ------------- */
.metric::before, .stat::before, .ops-kpi::before, .ident::before{
  content:"";position:absolute;inset:0;z-index:6;pointer-events:none;
  background-repeat:no-repeat;
  background-image:
    linear-gradient(90deg, transparent,var(--beam,#ff0055) 38%,#fff 50%,var(--beam,#ff0055) 62%,transparent),
    linear-gradient(180deg,transparent,var(--beam,#ff0055) 38%,#fff 50%,var(--beam,#ff0055) 62%,transparent),
    linear-gradient(90deg, transparent,var(--beam,#ff0055) 38%,#fff 50%,var(--beam,#ff0055) 62%,transparent),
    linear-gradient(180deg,transparent,var(--beam,#ff0055) 38%,#fff 50%,var(--beam,#ff0055) 62%,transparent);
  background-size:42% 2px,2px 42%,42% 2px,2px 42%;
  background-position:-45% 0,100% -45%,145% 100%,0 145%;
  filter:drop-shadow(0 0 5px var(--beam,#ff0055)) drop-shadow(0 0 16px var(--beam,#ff0055));
  animation:v70-laser 3s linear infinite;
}
@keyframes v70-laser{
  0%          {background-position:-45% 0,  100% -45%, 145% 100%, 0 145%}
  25%         {background-position:145% 0,  100% -45%, 145% 100%, 0 145%}
  25.01%,50%  {background-position:145% 0,  100% 145%, 145% 100%, 0 145%}
  50.01%,75%  {background-position:145% 0,  100% 145%, -45% 100%, 0 145%}
  75.01%,100% {background-position:145% 0,  100% 145%, -45% 100%, 0 -45%}
}
.metric.idle, .stat.good { --beam:#00ffaa }
.metric.ring, .stat.warn { --beam:#ffaa00 }
.metric.busy, .stat.bad  { --beam:#ff0055 }
.metric.acc              { --beam:#00ffff }
.metric:nth-child(2n)::before, .stat:nth-child(2n)::before { animation-delay:-1s }
.metric:nth-child(3n)::before, .stat:nth-child(3n)::before { animation-delay:-2s }

/* ---- metallic refraction sweep, every 2 seconds ------------------------ */
.panel > .panel-head::before, .metric::after, .stat::after, .ident::after{
  content:"";position:absolute;inset:-60%;z-index:5;pointer-events:none;
  background:linear-gradient(115deg,
    transparent 32%, rgba(255,255,255,.05) 42%, rgba(0,255,255,.24) 47%,
    rgba(255,255,255,.6) 50%, rgba(255,0,85,.24) 53%,
    rgba(255,255,255,.05) 58%, transparent 68%);
  transform:translate3d(-80%,-80%,0);
  opacity:0; mix-blend-mode:overlay;
  animation:v70-refract 2s ease-in-out infinite;
}
.panel-head { position:relative; overflow:hidden }
@keyframes v70-refract{
  0%  {opacity:0;  transform:translate3d(-80%,-80%,0)}
  35% {opacity:0}
  50% {opacity:.8}
  65% {opacity:0}
  100%{opacity:0;  transform:translate3d(80%,80%,0)}
}
.metric:nth-child(2n)::after { animation-delay:-.66s }
.metric:nth-child(3n)::after { animation-delay:-1.33s }

/* ==========================================================================
   BURNING NEON TYPE — headings only, never data
   ========================================================================== */
.head h1, .title h1, header h1{
  background-image:linear-gradient(to bottom right,#00ffff 0%,#ff0055 50%,#9900ff 100%) !important;
  -webkit-background-clip:text !important; background-clip:text !important;
  -webkit-text-fill-color:transparent !important; color:transparent !important;
  text-shadow:0 0 5px #00ffff, 0 0 15px #ff0055, 0 0 40px #9900ff, 0 0 100px #ff0055;
  animation:v70-glitch 3s steps(1) infinite;
  font-weight:900 !important;
}
@keyframes v70-glitch{
  0%,90%   {transform:translate(0,0) skewX(0deg); clip-path:none}
  91%      {transform:translate(-4px,1px) skewX(-12deg); clip-path:inset(14% 0 58% 0)}
  92%      {transform:translate(5px,-2px) skewX(11deg);  clip-path:inset(60% 0 10% 0)}
  93%      {transform:translate(-2px,0)   skewX(-6deg);  clip-path:inset(38% 0 34% 0)}
  94%,100% {transform:translate(0,0)      skewX(0deg);   clip-path:none}
}

/* Metric numerals glow in their signal colour — no glitch, they are data. */
.metric dd, .stat strong, .ops-kpi strong{
  color:#fff !important; font-weight:800 !important;
  text-shadow:0 0 8px currentColor, 0 0 26px currentColor;
}
.metric.idle dd, .stat.good strong { color:#00ffaa !important }
.metric.ring dd, .stat.warn strong { color:#ffaa00 !important }
.metric.busy dd, .stat.bad  strong { color:#ff0055 !important }
.metric.acc  dd                    { color:#00ffff !important }

.eyebrow, .ops-heading, .section-heading, .rail-label, summary.rail-label{
  color:var(--cyan) !important;
  text-shadow:0 0 12px rgba(0,255,255,.7);
  letter-spacing:.24em !important;
}

/* ==========================================================================
   CHROME
   ========================================================================== */
.bar  { position:fixed !important; top:0; left:0; right:0; border-radius:0 !important }
.rail { position:fixed !important; top:var(--bar,58px); bottom:0; left:0; overflow-y:auto;
        border-radius:0 !important }
.page { margin-top:calc(var(--bar,58px) + 10px) }

.bar, .shell > main > header, .app > .main > .top{
  background:rgba(0,0,0,.78) !important;
  -webkit-backdrop-filter:blur(30px) saturate(240%) !important;
          backdrop-filter:blur(30px) saturate(240%) !important;
  border-bottom:1px solid rgba(0,255,255,.28) !important;
  box-shadow:0 0 40px rgba(255,0,85,.18), 0 14px 50px rgba(0,0,0,.9) !important;
}
.rail, .shell > aside, .app > .side{
  background:rgba(0,0,0,.72) !important;
  -webkit-backdrop-filter:blur(30px) saturate(220%) !important;
          backdrop-filter:blur(30px) saturate(220%) !important;
  border-right:1px solid rgba(153,0,255,.34) !important;
}
.rail a.on, .rail a.active{
  background:linear-gradient(90deg,rgba(255,0,85,.24),rgba(153,0,255,.10) 55%,transparent) !important;
  box-shadow:inset 0 0 0 1px rgba(255,0,85,.34), 0 0 26px rgba(255,0,85,.22) !important;
  color:#fff !important;
}
.rail a.on::before{ background:linear-gradient(180deg,var(--pink),var(--violet)) !important;
                    box-shadow:0 0 14px var(--pink) !important }

/* ==========================================================================
   LAMPS — plasma cores
   ========================================================================== */
.lamp, .status, .ops-orb, .led{
  background:radial-gradient(circle at 34% 28%, #fff 0%, var(--c,#00ffaa) 36%, var(--c,#00ffaa) 100%) !important;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.5) inset,
    0 0 8px var(--c,#00ffaa), 0 0 24px var(--c,#00ffaa), 0 0 48px var(--c,#00ffaa) !important;
}
.lamp.idle{--c:#00ffaa} .lamp.ring{--c:#ffaa00}
.lamp.busy{--c:#ff0055} .lamp.acc{--c:#00ffff}
.lamp.dark{--c:#2a3548;box-shadow:0 0 0 1px rgba(0,0,0,.6) inset !important}
.lamp.ring.is-live{ animation:v70-blink .8s steps(1) infinite }
@keyframes v70-blink{0%,49%{opacity:1}50%,100%{opacity:.22}}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn, button, .actions a{
  position:relative; overflow:hidden;
  background:rgba(23,23,23,.30) !important;
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  border:1px solid rgba(153,0,255,.5) !important;
  border-radius:2px !important;
  color:var(--ink) !important;
  font-family:var(--mono, ui-monospace, monospace) !important;
  letter-spacing:.1em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 0 22px rgba(153,0,255,.2) !important;
  transition:transform .3s cubic-bezier(.16,1,.3,1), filter .3s ease, box-shadow .3s ease;
}
.btn:hover, button:hover, .actions a:hover{
  transform:scale(1.04) translateY(-1px);
  filter:brightness(1.3);
  border-color:var(--pink) !important;
  color:#fff !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26),
             0 0 40px rgba(255,0,85,.7), 0 0 90px rgba(153,0,255,.4) !important;
}
.btn::after, button::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.5) 48%,transparent 66%);
  transform:translateX(-140%); transition:transform .7s ease;
}
.btn:hover::after, button:hover::after{ transform:translateX(140%) }
.btn.primary{ border-color:var(--cyan) !important; color:var(--cyan) !important }
.btn.go     { border-color:#00ffaa !important;  color:#00ffaa !important }
.btn.danger { border-color:var(--pink) !important; color:var(--pink) !important }

/* ==========================================================================
   PILLS / DATA — legibility protected
   ========================================================================== */
.pill, .badge, .goodpill, .badpill, .ops-badge, .live-chip, .who, .account-chip{
  background:rgba(0,0,0,.5) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  border-radius:2px !important;
  font-family:var(--mono, ui-monospace, monospace) !important;
  letter-spacing:.08em;
}
.pill.idle, .goodpill{ border-color:rgba(0,255,170,.5)!important; color:#00ffaa!important;
  box-shadow:0 0 20px rgba(0,255,170,.26)!important }
.pill.ring{ border-color:rgba(255,170,0,.5)!important; color:#ffaa00!important }
.pill.busy, .badpill{ border-color:rgba(255,0,85,.5)!important; color:#ff0055!important;
  box-shadow:0 0 20px rgba(255,0,85,.3)!important;
  animation:v70-alert 1.2s steps(1) infinite }
@keyframes v70-alert{
  0%,59%  {box-shadow:0 0 20px rgba(255,0,85,.3)}
  60%,100%{box-shadow:0 0 44px rgba(255,0,85,.75)}
}
.pill.acc{ border-color:rgba(0,255,255,.5)!important; color:#00ffff!important }

/* Tables, MACs, IPs and XML stay crisp — no glitch, no blur, no glow. */
table, td, th, .mono, .mac, pre, code, .rack-ext, .rack-name{
  text-shadow:none !important; animation:none !important; filter:none !important;
}
th{ background:rgba(0,255,255,.05)!important; border-bottom:1px solid rgba(0,255,255,.2)!important;
    color:var(--cyan)!important; letter-spacing:.14em!important }
td{ border-bottom:1px solid rgba(255,255,255,.06)!important; color:var(--ink)!important }
tbody tr:hover{ background:rgba(255,0,85,.07)!important }
pre, code{ background:rgba(0,0,0,.72)!important; border:1px solid rgba(153,0,255,.3)!important;
           border-radius:2px!important; color:#9fe8ff!important }

input, select, textarea{
  background:rgba(0,0,0,.6) !important;
  border:1px solid rgba(153,0,255,.4) !important;
  border-radius:2px !important;
  color:var(--ink) !important;
  font-family:var(--mono, ui-monospace, monospace) !important;
}
input:focus, select:focus, textarea:focus{
  border-color:var(--cyan) !important;
  box-shadow:0 0 0 2px rgba(0,255,255,.16), 0 0 32px rgba(0,255,255,.3) !important;
}

a{ color:var(--cyan) }
.lcd, .phone-screen{
  background:radial-gradient(120% 80% at 50% 0%, rgba(0,255,170,.14), transparent 62%),
             linear-gradient(180deg, rgba(0,14,12,.9), rgba(0,4,4,.96)) !important;
  border:1px solid rgba(0,255,170,.3) !important; border-radius:2px !important;
}
.lcd-ext{ color:#00ffaa !important; text-shadow:0 0 16px rgba(0,255,170,.8) !important }

@media (prefers-reduced-motion:reduce){
  body::before, body::after, .page::after, .metric::before, .stat::before,
  .metric::after, .head h1, .pill.busy { animation:none !important }
}
@media (max-width:900px){
  .rail { position:static !important; height:auto }
  .page { margin-top:0 }
  body { cursor:auto }
}