/* ==========================================================================
   VICC v71 — CYBER OS
   The desktop-environment look, mapped onto VICC's real structure.
   Loads last. Remove the one <link> and everything reverts.

   The mapping:
     body    -> desktop wallpaper, grid, glowing data lines
     .bar    -> window title bar, with control lamps at the left
     .page   -> the application window itself: cyber-glass, sharp corners,
                1px pink->blue gradient border, diagonal gloss
     .panel  -> sub-panels inside the window
     .rail   -> docked sidebar
   Data surfaces stay crisp: no glow or blur on tables, MACs, IPs or XML.
   ========================================================================== */

:root{
  --pink:#ff2d9b;
  --blue:#00b3ff;
  --cyan:#00ffe1;
  --violet:#8b5cf6;
  --amber:#ffb300;

  --idle:#00ffe1;
  --ring:#ffb300;
  --busy:#ff2d9b;
  --acc:#00b3ff;
  --off:#2b3648;

  --ink:#e9f2ff;
  --ink-dim:#8fa3bd;
  --muted:#8fa3bd;
  --faint:#4c5c73;
  --line:rgba(255,255,255,.10);
  --line-soft:rgba(255,255,255,.055);
}

html, body { background:#04060c !important; }

/* ==========================================================================
   DESKTOP WALLPAPER
   ========================================================================== */
body{
  background:
    radial-gradient(ellipse 100% 70% at 50% 0%,  rgba(0,179,255,.14), transparent 62%),
    radial-gradient(ellipse 90% 60% at 80% 100%, rgba(255,45,155,.14), transparent 60%),
    radial-gradient(ellipse 70% 50% at 10% 80%,  rgba(139,92,246,.10), transparent 58%),
    #04060c !important;
  color:var(--ink);
}

/* Fine grid */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(0,179,255,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,179,255,.055) 1px,transparent 1px) !important;
  background-size:26px 26px !important;
  animation:none !important;
  -webkit-mask-image:none !important; mask-image:none !important;
}

/* Coarse grid, drifting */
body::after{
  content:"";position:fixed;inset:-10%;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,45,155,.075) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,45,155,.075) 1px,transparent 1px) !important;
  background-size:130px 130px !important;
  filter:none !important;
  animation:v71-drift 40s linear infinite !important;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 45%,#000 20%,transparent 78%) !important;
          mask-image:radial-gradient(ellipse 80% 70% at 50% 45%,#000 20%,transparent 78%) !important;
}
@keyframes v71-drift{
  0%  {transform:translate3d(0,0,0)}
  100%{transform:translate3d(130px,130px,0)}
}

/* Scanline film + vignette over the desktop */
.page::before{
  content:"";position:fixed;inset:0;z-index:160;pointer-events:none;
  background:repeating-linear-gradient(180deg,
    rgba(0,0,0,0) 0px,rgba(0,0,0,0) 2px,rgba(0,0,0,.14) 3px,rgba(0,0,0,0) 4px);
}
.page::after{
  content:"";position:fixed;inset:0;z-index:159;pointer-events:none;
  background:radial-gradient(ellipse 80% 72% at 50% 46%,transparent 42%,rgba(0,0,0,.7) 100%);
}

/* ==========================================================================
   CHROME — z-index only. Never declare `position` alongside .bar/.rail:
   it overrides their fixed positioning and collapses the layout.
   ========================================================================== */
.bar  { z-index:100 }
.rail { z-index:90 }
.page > * { position:relative; z-index:3 }

.bar  { position:fixed !important; top:0; left:0; right:0 }
.rail { position:fixed !important; top:var(--bar,58px); bottom:44px; left:0; overflow-y:auto }
.page { margin-top:calc(var(--bar,58px) + 14px); margin-bottom:56px }

/* ---- .bar becomes the window title bar ---- */
.bar{
  background:linear-gradient(180deg,rgba(23,23,23,.82),rgba(12,16,24,.72)) !important;
  -webkit-backdrop-filter:blur(48px) saturate(180%) !important;
          backdrop-filter:blur(48px) saturate(180%) !important;
  border-bottom:1px solid rgba(255,255,255,.12) !important;
  border-radius:0 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 10px 40px rgba(0,0,0,.7) !important;
  padding-left:78px !important;
}

/* Window control lamps at the far left of the bar */
.bar::before{
  content:"";position:absolute;left:18px;top:50%;transform:translateY(-50%);
  width:13px;height:13px;z-index:12;
  background:var(--amber);
  box-shadow:
    0 0 10px var(--amber),
    20px 0 0 var(--cyan), 20px 0 10px var(--cyan),
    40px 0 0 var(--pink), 40px 0 10px var(--pink);
  clip-path:polygon(0 3px,3px 0,100% 0,100% calc(100% - 3px),calc(100% - 3px) 100%,0 100%);
}

/* ---- .rail docks under the title bar ---- */
.rail{
  background:rgba(10,14,22,.72) !important;
  -webkit-backdrop-filter:blur(34px) saturate(180%) !important;
          backdrop-filter:blur(34px) saturate(180%) !important;
  border-right:1px solid rgba(0,179,255,.24) !important;
  border-radius:0 !important;
  box-shadow:6px 0 40px rgba(0,0,0,.6) !important;
}
.rail a.on, .rail a.active{
  background:linear-gradient(90deg,rgba(0,179,255,.22),rgba(255,45,155,.08) 60%,transparent) !important;
  box-shadow:inset 0 0 0 1px rgba(0,179,255,.34), 0 0 24px rgba(0,179,255,.2) !important;
  color:#fff !important;
}
.rail a.on::before{
  background:linear-gradient(180deg,var(--blue),var(--pink)) !important;
  box-shadow:0 0 14px var(--blue) !important;
}

/* ==========================================================================
   THE APPLICATION WINDOW — panels become cyber-glass
   ========================================================================== */
.panel, .card, .ops-panel, .feature-card, .app-tile, .phone-mini,
.sidecar, .cmdk-box, .hero, .ident{
  background:rgba(23,23,23,.60) !important;
  -webkit-backdrop-filter:blur(48px) saturate(180%) !important;
          backdrop-filter:blur(48px) saturate(180%) !important;
  border:none !important;
  border-radius:0 !important;
  box-shadow:
    inset 0 0 90px rgba(0,179,255,.08),
    inset 0 1px 0 rgba(255,255,255,.14),
    0 0 50px rgba(255,45,155,.12),
    0 26px 80px rgba(0,0,0,.8) !important;
  clip-path:polygon(0 14px,14px 0,calc(100% - 14px) 0,100% 14px,
                    100% calc(100% - 14px),calc(100% - 14px) 100%,
                    14px 100%,0 calc(100% - 14px));
  position:relative;
  overflow:hidden;
  isolation:isolate;
}

/* 1px pink->blue gradient border tracking the angled corners */
.panel::before, .card::before, .ops-panel::before, .hero::before{
  content:"";position:absolute;inset:0;z-index:8;pointer-events:none;
  background:linear-gradient(135deg,var(--pink) 0%,var(--violet) 42%,var(--blue) 100%);
  clip-path:polygon(
    0 14px, 14px 0,
    calc(100% - 14px) 0, 100% 14px,
    100% calc(100% - 14px), calc(100% - 14px) 100%,
    14px 100%, 0 calc(100% - 14px),
    0 14px,
    1px calc(14px + .4px),
    1px calc(100% - 14px),
    calc(14px + .4px) calc(100% - 1px),
    calc(100% - 14px - .4px) calc(100% - 1px),
    calc(100% - 1px) calc(100% - 14px - .4px),
    calc(100% - 1px) calc(14px + .4px),
    calc(100% - 14px - .4px) 1px,
    calc(14px + .4px) 1px,
    1px calc(14px + .4px)
  );
  filter:drop-shadow(0 0 5px rgba(255,45,155,.6)) drop-shadow(0 0 12px rgba(0,179,255,.45));
  height:auto;
}

/* Diagonal gloss sweeping the glass */
.panel::after, .card::after, .hero::after{
  content:"";position:absolute;inset:-60%;z-index:7;pointer-events:none;
  background:linear-gradient(115deg,
    transparent 34%, rgba(255,255,255,.05) 44%, rgba(255,255,255,.22) 49%,
    rgba(255,255,255,.06) 55%, transparent 66%);
  transform:translate3d(-70%,-70%,0);
  mix-blend-mode:overlay;
  animation:v71-gloss 6s ease-in-out infinite;
}
@keyframes v71-gloss{
  0%  {transform:translate3d(-70%,-70%,0);opacity:0}
  40% {opacity:0}
  55% {opacity:1}
  72% {opacity:0}
  100%{transform:translate3d(70%,70%,0);opacity:0}
}
.panel:nth-child(2n)::after{animation-delay:-3s}

/* Panel heads read as sub-window title bars */
.panel-head{
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.015)) !important;
  border-bottom:1px solid rgba(255,255,255,.10) !important;
}
.panel-head h2::before{
  background:linear-gradient(180deg,var(--blue),var(--pink)) !important;
  box-shadow:0 0 12px var(--blue) !important;
}

/* ==========================================================================
   METRIC TILES — instrument sub-panels
   ========================================================================== */
.metric, .stat, .ops-kpi{
  background:rgba(0,0,0,.34) !important;
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.09) !important;
  border-radius:0 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),
             inset 0 0 40px rgba(0,179,255,.05) !important;
  clip-path:polygon(0 8px,8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%);
  transition:box-shadow .3s ease, transform .3s cubic-bezier(.16,1,.3,1);
}
.metric:hover, .stat:hover{
  transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),
             0 0 34px rgba(0,179,255,.24) !important;
}
.metric dd, .stat strong, .ops-kpi strong{
  color:var(--cyan) !important; font-weight:700 !important;
  text-shadow:0 0 18px rgba(0,255,225,.6);
}
.metric.idle dd, .stat.good strong { color:var(--cyan) !important;  text-shadow:0 0 18px rgba(0,255,225,.6) }
.metric.ring dd, .stat.warn strong { color:var(--amber) !important; text-shadow:0 0 18px rgba(255,179,0,.6) }
.metric.busy dd, .stat.bad  strong { color:var(--pink) !important;  text-shadow:0 0 18px rgba(255,45,155,.6) }
.metric.acc  dd                    { color:var(--blue) !important;  text-shadow:0 0 18px rgba(0,179,255,.6) }
.metric dt, .stat span{ color:var(--faint) !important; letter-spacing:.22em !important }

/* ==========================================================================
   TASKBAR — a real docked strip at the foot of every page
   ========================================================================== */
body > .vicc-taskbar,
.page > .vicc-taskbar { display:none }

.utl-page-footer, footer{
  position:fixed !important; left:0; right:0; bottom:0; z-index:120;
  height:44px !important; margin:0 !important; padding:0 16px !important;
  display:flex !important; align-items:center; gap:14px;
  background:rgba(6,9,16,.78) !important;
  -webkit-backdrop-filter:blur(34px) saturate(180%);
          backdrop-filter:blur(34px) saturate(180%);
  border-top:1px solid rgba(0,179,255,.28) !important;
  box-shadow:0 -10px 40px rgba(0,0,0,.7), 0 0 40px rgba(0,179,255,.1) !important;
}
.utl-page-footer img, footer img{ max-height:22px !important; width:auto !important; opacity:.75 }

/* A pulsing start lamp at the left of the taskbar */
.utl-page-footer::before, footer::before{
  content:"◈ VICC";
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 14px;
  font:500 10px/1 var(--mono, ui-monospace, monospace); letter-spacing:.2em;
  color:#fff;
  background:linear-gradient(135deg,rgba(255,45,155,.28),rgba(0,179,255,.22));
  border:1px solid rgba(255,45,155,.6);
  clip-path:polygon(0 6px,6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%);
  animation:v71-start 2.2s ease-in-out infinite;
}
@keyframes v71-start{
  0%,100%{box-shadow:0 0 16px rgba(255,45,155,.45), inset 0 0 14px rgba(255,45,155,.14)}
  50%    {box-shadow:0 0 40px rgba(255,45,155,.9),  inset 0 0 24px rgba(255,45,155,.3)}
}

/* ==========================================================================
   LAMPS
   ========================================================================== */
.lamp, .status, .ops-orb, .led{
  background:radial-gradient(circle at 34% 28%, #fff 0%, var(--c,var(--cyan)) 38%, var(--c,var(--cyan)) 100%) !important;
  box-shadow:0 0 0 1px rgba(0,0,0,.5) inset,
             0 0 8px var(--c,var(--cyan)), 0 0 20px var(--c,var(--cyan)) !important;
}
.lamp.idle{--c:#00ffe1} .lamp.ring{--c:#ffb300}
.lamp.busy{--c:#ff2d9b} .lamp.acc{--c:#00b3ff}
.lamp.dark{--c:#2b3648; box-shadow:0 0 0 1px rgba(0,0,0,.6) inset !important}
.lamp.ring.is-live{animation:v71-blip 1.4s ease-in-out infinite}
@keyframes v71-blip{0%,100%{opacity:1}50%{opacity:.32}}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn, button, .actions a{
  position:relative; overflow:hidden;
  background:rgba(255,255,255,.05) !important;
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.14) !important;
  border-radius:0 !important;
  color:var(--ink) !important;
  font-family:var(--mono, ui-monospace, monospace) !important;
  letter-spacing:.1em;
  clip-path:polygon(0 5px,5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%);
  transition:background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.btn:hover, button:hover, .actions a:hover{
  background:rgba(0,179,255,.14) !important;
  border-color:rgba(0,179,255,.55) !important;
  color:#fff !important;
  transform:translateY(-1px);
  box-shadow:0 0 26px rgba(0,179,255,.35) !important;
}
.btn::after, button::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 32%,rgba(255,255,255,.4) 50%,transparent 68%);
  transform:translateX(-140%); transition:transform .7s ease;
}
.btn:hover::after, button:hover::after{transform:translateX(140%)}
.btn.primary{border-color:rgba(0,179,255,.6) !important; color:var(--blue) !important}
.btn.go     {border-color:rgba(0,255,225,.6) !important; color:var(--cyan) !important}
.btn.danger {border-color:rgba(255,45,155,.6) !important; color:var(--pink) !important}

/* ==========================================================================
   DATA SURFACES — kept crisp on purpose
   ========================================================================== */
table, td, th, .mono, .mac, pre, code, .rack-ext, .rack-name{
  text-shadow:none !important; filter:none !important; animation:none !important;
}
th{
  background:linear-gradient(180deg,rgba(0,179,255,.10),rgba(0,179,255,.02)) !important;
  border-bottom:1px solid rgba(0,179,255,.26) !important;
  color:var(--blue) !important; letter-spacing:.16em !important;
}
td{ border-bottom:1px solid rgba(255,255,255,.055) !important; color:var(--ink) !important }
tbody tr:hover{ background:rgba(0,179,255,.07) !important }
.rack-row:hover{ background:linear-gradient(90deg,rgba(0,179,255,.10),transparent 55%) !important }

input, select, textarea{
  background:rgba(0,0,0,.5) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  border-radius:0 !important;
  color:var(--ink) !important;
  font-family:var(--mono, ui-monospace, monospace) !important;
  clip-path:polygon(0 5px,5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%);
}
input:focus, select:focus, textarea:focus{
  border-color:var(--blue) !important;
  box-shadow:0 0 0 2px rgba(0,179,255,.16), 0 0 30px rgba(0,179,255,.28) !important;
}

pre, code{
  background:rgba(0,0,0,.62) !important;
  border:1px solid rgba(0,179,255,.2) !important;
  border-radius:0 !important; color:#9fe4ff !important;
}

.pill, .badge, .goodpill, .badpill, .ops-badge, .live-chip, .who, .account-chip{
  background:rgba(0,0,0,.45) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  border-radius:0 !important;
  font-family:var(--mono, ui-monospace, monospace) !important;
  clip-path:polygon(0 4px,4px 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%);
}
.pill.idle,.goodpill{border-color:rgba(0,255,225,.5)!important;color:var(--cyan)!important;
  box-shadow:0 0 18px rgba(0,255,225,.22)!important}
.pill.ring{border-color:rgba(255,179,0,.5)!important;color:var(--amber)!important}
.pill.busy,.badpill{border-color:rgba(255,45,155,.5)!important;color:var(--pink)!important;
  box-shadow:0 0 18px rgba(255,45,155,.26)!important}
.pill.acc{border-color:rgba(0,179,255,.5)!important;color:var(--blue)!important}

.head h1, .title h1, header h1{
  background-image:linear-gradient(135deg,#fff 0%,var(--blue) 46%,var(--pink) 100%) !important;
  -webkit-background-clip:text !important; background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  filter:drop-shadow(0 0 22px rgba(0,179,255,.45));
  font-weight:800 !important;
}
.eyebrow, .rail-label, summary.rail-label{
  color:var(--blue) !important; letter-spacing:.22em !important;
  text-shadow:0 0 12px rgba(0,179,255,.55);
}
a{ color:var(--blue) }

.lcd, .phone-screen{
  background:radial-gradient(120% 80% at 50% 0%, rgba(0,255,225,.13), transparent 62%),
             linear-gradient(180deg, rgba(0,14,16,.9), rgba(0,4,6,.96)) !important;
  border:1px solid rgba(0,255,225,.26) !important; border-radius:0 !important;
}
.lcd-ext{ color:var(--cyan) !important; text-shadow:0 0 16px rgba(0,255,225,.75) !important }

@media (prefers-reduced-motion:reduce){
  body::after, .panel::after, .card::after, .hero::after,
  .utl-page-footer::before, footer::before, .lamp.ring.is-live{ animation:none !important }
}
@media (max-width:900px){
  .bar{ padding-left:16px !important }
  .bar::before{ display:none }
  .rail{ position:static !important; height:auto; bottom:auto }
  .page{ margin-top:0; margin-bottom:56px }
}