/* ==========================================================================
   VICC v65 — HOLOGRAPHIC
   Loads AFTER v63/v64. Overrides the chassis, keeps every class name, so no
   markup changes are needed anywhere.

   Deep cosmic field, glass surfaces at heavy blur, mesh gradients in cyan /
   electric purple / neon magenta, animated border shine, floating HUD nav.

   One deliberate constraint: this is an operations tool, so glow is applied
   to chrome and state, never behind body text. Data stays crisp.
   ========================================================================== */

:root {
  /* Cosmic field */
  --void:      #05060D;
  --void-2:    #080B18;
  --bg:        #05060D;
  --bg-deep:   #03040A;

  /* Glass */
  --glass:     rgba(255,255,255,.045);
  --glass-2:   rgba(255,255,255,.075);
  --glass-3:   rgba(255,255,255,.11);
  --glass-br:  rgba(255,255,255,.10);
  --glass-hi:  rgba(255,255,255,.22);

  --surface:   rgba(18,22,40,.55);
  --surface-2: rgba(26,31,56,.6);
  --surface-3: rgba(36,42,74,.66);
  --line:      rgba(255,255,255,.10);
  --line-soft: rgba(255,255,255,.055);

  /* Ink */
  --ink:     #EEF3FF;
  --ink-dim: #B9C6E4;
  --muted:   #8493BC;
  --faint:   #5C6A94;

  /* Signal — lamp semantics preserved */
  --idle: #2BF5A8;
  --ring: #FFC24B;
  --busy: #FF4D8D;
  --off:  #38405E;
  --acc:  #34E7FF;

  /* Accent trio */
  --cyan:    #34E7FF;
  --purple:  #A855FF;
  --magenta: #FF4DD8;

  --idle-bg: rgba(43,245,168,.10);  --idle-br: rgba(43,245,168,.34);
  --ring-bg: rgba(255,194,75,.10);  --ring-br: rgba(255,194,75,.34);
  --busy-bg: rgba(255,77,141,.10);  --busy-br: rgba(255,77,141,.34);
  --acc-bg:  rgba(52,231,255,.10);  --acc-br:  rgba(52,231,255,.36);

  --blur:   blur(22px) saturate(180%);
  --blur-xl: blur(36px) saturate(200%);
}

/* ==========================================================================
   COSMIC FIELD — mesh gradients + glowing grid
   ========================================================================== */
body {
  background: var(--void);
  color: var(--ink);
  position: relative;
}

/* Layer 1: drifting mesh gradients */
body::before {
  content: ""; position: fixed; inset: -20%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(38% 32% at 18% 14%, rgba(52,231,255,.20), transparent 62%),
    radial-gradient(34% 30% at 82% 10%, rgba(168,85,255,.20), transparent 60%),
    radial-gradient(40% 34% at 72% 88%, rgba(255,77,216,.16), transparent 62%),
    radial-gradient(30% 26% at 8% 82%, rgba(43,245,168,.13), transparent 60%);
  filter: blur(28px);
  animation: mesh-drift 32s ease-in-out infinite alternate;
}
@keyframes mesh-drift {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(2.5%,-2%,0) scale(1.06); }
  100% { transform: translate3d(-2%,2.5%,0) scale(1.02); }
}

/* Layer 2: the grid, glowing faintly and receding at the edges */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(52,231,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(52,231,255,.07) 1px, transparent 1px),
    linear-gradient(rgba(168,85,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168,85,255,.045) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  mask-image: radial-gradient(ellipse 120% 85% at 50% 0%, #000 22%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 120% 85% at 50% 0%, #000 22%, transparent 78%);
}

/* z-index ONLY. Declaring position here would override the fixed positioning
   set in v63 and drop the bar and rail into normal flow — which pushes the
   whole page down by the height of the rail. */
.bar  { z-index: 50; }
.rail { z-index: 40; }
.page { position: relative; z-index: 1; }
.cmdk { z-index: 200; }

/* ==========================================================================
   HUD — the command bar floats free of the viewport edge
   ========================================================================== */
.bar {
  top: 12px; left: 14px; right: 14px; width: auto;
  height: 58px; border-radius: 16px;
  background: linear-gradient(135deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
  -webkit-backdrop-filter: var(--blur-xl); backdrop-filter: var(--blur-xl);
  border: 1px solid var(--glass-br);
  box-shadow:
    0 1px 0 var(--glass-hi) inset,
    0 -1px 0 rgba(0,0,0,.4) inset,
    0 18px 50px rgba(0,0,0,.6),
    0 0 62px rgba(52,231,255,.10);
  overflow: hidden;
}

/* A shine sweeps the bar edge, slowly. */
.bar::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px;
  background: linear-gradient(115deg,
    transparent 18%, var(--cyan) 32%, var(--purple) 46%,
    var(--magenta) 58%, transparent 74%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .55; background-size: 260% 100%;
  animation: shine 9s linear infinite;
  pointer-events: none;
}
@keyframes shine { to { background-position: -260% 0; } }

.rail  { top: 82px; bottom: 14px; left: 14px; width: calc(var(--rail) - 14px);
         border-radius: 16px; border: 1px solid var(--glass-br);
         background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
         -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
         box-shadow: 0 1px 0 var(--glass-hi) inset, 0 18px 50px rgba(0,0,0,.5); }
.page  { margin: 86px 0 0 calc(var(--rail) + 6px); padding: 22px 26px 90px; }

@supports not (backdrop-filter: blur(1px)) {
  .bar  { background: rgba(10,13,26,.96); }
  .rail { background: rgba(8,11,22,.96); }
}

/* ==========================================================================
   GLASS SURFACES
   ========================================================================== */
.panel, .metric, .ident, .sidecar, .key, .cmdk-box, .note, .lcd {
  background: linear-gradient(150deg, rgba(255,255,255,.085), rgba(255,255,255,.025));
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid var(--glass-br);
  box-shadow:
    0 1px 0 var(--glass-hi) inset,
    0 -1px 0 rgba(0,0,0,.35) inset,
    0 14px 44px rgba(0,0,0,.42);
  border-radius: 16px;
}
.key { border-radius: 10px; }

/* Animated border shine on every panel — thin, and only on the top-left arc. */
.panel::before, .metric::before, .ident::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(145deg, var(--cyan), transparent 32%, transparent 68%, var(--magenta));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .34; transition: opacity .3s ease; pointer-events: none; z-index: 2;
  height: auto;
}
.panel:hover::before, .metric:hover::before { opacity: .8; }

.panel, .metric, .ident { position: relative; }
.panel-head {
  background: linear-gradient(180deg, rgba(255,255,255,.07), transparent);
  border-bottom: 1px solid var(--line-soft);
}
.panel-head h2::before {
  background: linear-gradient(180deg, var(--cyan), var(--purple));
  box-shadow: 0 0 14px var(--cyan);
}

/* Hover brightens the whole card, as specified. */
.panel:hover, .metric:hover {
  background: linear-gradient(150deg, rgba(255,255,255,.12), rgba(255,255,255,.045));
  box-shadow: 0 1px 0 var(--glass-hi) inset, 0 18px 56px rgba(0,0,0,.5),
              0 0 46px rgba(52,231,255,.13);
}

/* ==========================================================================
   FLOAT — key surfaces drift, gently and out of phase
   ========================================================================== */
@keyframes float-a { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-5px) } }
@keyframes float-b { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-3px) } }
.metric              { animation: float-a 7s ease-in-out infinite; }
.metric:nth-child(2n){ animation: float-b 8.5s ease-in-out infinite .6s; }
.metric:nth-child(3n){ animation: float-a 9.5s ease-in-out infinite 1.2s; }
.metric:hover        { animation-play-state: paused; transform: translateY(-6px); }
.sidecar             { animation: float-b 11s ease-in-out infinite; }

/* ==========================================================================
   METRICS — holographic tiles
   ========================================================================== */
.metric dd {
  font-weight: 800;
  background: linear-gradient(180deg, #fff, var(--cyan));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 26px rgba(52,231,255,.45));
}
.metric.idle dd { background: linear-gradient(180deg,#fff,var(--idle));
                  -webkit-background-clip:text; background-clip:text;
                  -webkit-text-fill-color:transparent;
                  filter: drop-shadow(0 0 26px rgba(43,245,168,.5)); }
.metric.ring dd { background: linear-gradient(180deg,#fff,var(--ring));
                  -webkit-background-clip:text; background-clip:text;
                  -webkit-text-fill-color:transparent;
                  filter: drop-shadow(0 0 26px rgba(255,194,75,.5)); }
.metric.busy dd { background: linear-gradient(180deg,#fff,var(--busy));
                  -webkit-background-clip:text; background-clip:text;
                  -webkit-text-fill-color:transparent;
                  filter: drop-shadow(0 0 26px rgba(255,77,141,.5)); }
.metric dt { color: var(--faint); letter-spacing: .18em; }

/* ==========================================================================
   LAMPS — plasma cores
   ========================================================================== */
.lamp {
  background: radial-gradient(circle at 34% 28%, #fff 0%, var(--c) 38%, var(--c) 100%);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.45) inset,
    0 0 8px var(--c), 0 0 22px var(--c), 0 0 44px color-mix(in srgb, var(--c) 40%, transparent);
}
.lamp.dark {
  background: radial-gradient(circle at 34% 28%, #4A5478 0%, var(--off) 62%);
  box-shadow: 0 0 0 1px rgba(0,0,0,.55) inset;
}

/* ==========================================================================
   NAV — holographic rail
   ========================================================================== */
.rail a { border-radius: 9px; margin: 1px 8px; padding-left: 22px; }
.rail a::before { border-radius: 9px 0 0 9px; }
.rail a.on {
  background: linear-gradient(90deg, rgba(52,231,255,.20), rgba(168,85,255,.10) 55%, transparent);
  box-shadow: inset 0 0 0 1px rgba(52,231,255,.28), 0 0 26px rgba(52,231,255,.16);
  color: #fff;
}
.rail a.on::before { background: linear-gradient(180deg, var(--cyan), var(--purple));
                     box-shadow: 0 0 16px var(--cyan); }
.rail a:hover { background: rgba(255,255,255,.06); }
.rail-group > summary.rail-label:hover { color: var(--cyan); }
.rail-n { background: rgba(255,255,255,.06); border-color: var(--glass-br); }
.rail a .tag {
  background: linear-gradient(135deg, rgba(52,231,255,.22), rgba(168,85,255,.22));
  border-color: rgba(52,231,255,.45); color: #EAFBFF;
  box-shadow: 0 0 16px rgba(52,231,255,.3);
}

/* ==========================================================================
   BUTTONS — glass with a light sweep
   ========================================================================== */
.btn {
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.045));
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid var(--glass-br);
  box-shadow: 0 1px 0 var(--glass-hi) inset, 0 4px 16px rgba(0,0,0,.4);
}
.btn:hover {
  background: linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,.08));
  border-color: rgba(52,231,255,.45);
  box-shadow: 0 1px 0 var(--glass-hi) inset, 0 6px 22px rgba(0,0,0,.45),
              0 0 34px rgba(52,231,255,.24);
  transform: translateY(-1px);
}
.btn.primary {
  background: linear-gradient(135deg, rgba(52,231,255,.26), rgba(168,85,255,.22));
  border-color: rgba(52,231,255,.5); color: #EAFBFF;
  box-shadow: 0 1px 0 var(--glass-hi) inset, 0 0 40px rgba(52,231,255,.3);
}
.btn.go {
  background: linear-gradient(135deg, rgba(43,245,168,.26), rgba(52,231,255,.18));
  border-color: rgba(43,245,168,.5); color: #E6FFF6;
  box-shadow: 0 1px 0 var(--glass-hi) inset, 0 0 40px rgba(43,245,168,.28);
}
.btn.danger {
  background: linear-gradient(135deg, rgba(255,77,141,.26), rgba(255,77,216,.18));
  border-color: rgba(255,77,141,.5); color: #FFEAF3;
  box-shadow: 0 1px 0 var(--glass-hi) inset, 0 0 40px rgba(255,77,141,.26);
}

/* ==========================================================================
   FORM — sleek glass fields
   ========================================================================== */
input[type=text], input[type=password], input[type=number], input[type=search],
input[type=email], select, textarea {
  background: rgba(4,6,16,.55);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--glass-br);
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0,0,0,.35) inset;
  color: var(--ink);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--cyan);
  background: rgba(4,6,16,.72);
  box-shadow: 0 2px 12px rgba(0,0,0,.35) inset,
              0 0 0 3px rgba(52,231,255,.16),
              0 0 34px rgba(52,231,255,.22);
}
.field > span { color: var(--muted); letter-spacing: .15em; }
::placeholder { color: var(--faint); }

/* ==========================================================================
   OMNI + CHIPS
   ========================================================================== */
.omni {
  border-radius: 11px;
  background: rgba(4,6,16,.5);
  border: 1px solid var(--glass-br);
  box-shadow: 0 2px 14px rgba(0,0,0,.4) inset;
}
.omni:hover { border-color: rgba(52,231,255,.5);
              box-shadow: 0 2px 14px rgba(0,0,0,.4) inset, 0 0 30px rgba(52,231,255,.2); }
.omni kbd { background: rgba(255,255,255,.09); border-color: var(--glass-br); }
.who, .pill, .live-chip, .pulse {
  background: rgba(255,255,255,.07);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-color: var(--glass-br);
}
.pill.idle { background: var(--idle-bg); border-color: var(--idle-br); color: var(--idle); }
.pill.ring { background: var(--ring-bg); border-color: var(--ring-br); color: var(--ring); }
.pill.busy { background: var(--busy-bg); border-color: var(--busy-br); color: var(--busy); }
.pill.acc  { background: var(--acc-bg);  border-color: var(--acc-br);  color: var(--acc); }

/* ==========================================================================
   RACK
   ========================================================================== */
.rack-row { border-bottom: 1px solid var(--line-soft); }
.rack-row:hover {
  background: linear-gradient(90deg, rgba(52,231,255,.12), rgba(168,85,255,.05) 45%, transparent);
  box-shadow: 0 1px 0 rgba(255,255,255,.07) inset;
}
.rack-row:hover::before { background: linear-gradient(180deg, var(--cyan), var(--purple));
                          box-shadow: 0 0 18px var(--cyan); }
.rack-head { background: rgba(255,255,255,.045); border-bottom: 1px solid var(--line); }
.rack-ext { background: linear-gradient(180deg, #fff, var(--ink-dim));
            -webkit-background-clip: text; background-clip: text;
            -webkit-text-fill-color: transparent; }

/* ==========================================================================
   HEADINGS
   ========================================================================== */
.head h1 {
  background: linear-gradient(100deg, #fff 10%, var(--cyan) 42%, var(--purple) 70%, var(--magenta) 96%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 34px rgba(52,231,255,.3));
}
.eyebrow { color: var(--cyan); opacity: .9; text-shadow: 0 0 20px rgba(52,231,255,.5); }
.head { border-bottom: 1px solid var(--line-soft); }

/* ==========================================================================
   TABLES / MISC
   ========================================================================== */
th { background: rgba(255,255,255,.055); border-bottom: 1px solid var(--line);
     color: var(--muted); }
td { border-bottom: 1px solid var(--line-soft); }
tbody tr:hover { background: rgba(52,231,255,.055); }
pre.xml { background: rgba(3,4,10,.7); border: 1px solid var(--glass-br); border-radius: 12px; }
.cmdk { background: rgba(3,4,10,.6); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.cmdk-box { border-radius: 18px; }
.cmdk-item.sel, .cmdk-item:hover {
  background: linear-gradient(90deg, rgba(52,231,255,.22), rgba(168,85,255,.08));
  box-shadow: inset 0 0 0 1px rgba(52,231,255,.3);
}
.tabs a.on { border-bottom-color: var(--cyan); box-shadow: 0 3px 24px rgba(52,231,255,.28); }
.note.ok { border-left-color: var(--idle) } .note.warn { border-left-color: var(--ring) }
.note.bad { border-left-color: var(--busy) }
.lcd { background: radial-gradient(120% 80% at 50% 0%, rgba(43,245,168,.13), transparent 62%),
       linear-gradient(180deg, rgba(8,20,22,.8), rgba(3,10,10,.9)); }
.lcd-ext { text-shadow: 0 0 18px rgba(43,245,168,.75); }
a { color: var(--cyan); }
.bar-logo { box-shadow: 0 0 26px rgba(52,231,255,.35); }

/* ==========================================================================
   ACCESSIBILITY / FALLBACK
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  body::before, .bar::before, .metric, .sidecar { animation: none !important; }
}
@media (max-width: 900px) {
  .bar  { top: 0; left: 0; right: 0; border-radius: 0; }
  .rail { top: auto; left: 0; width: auto; border-radius: 0; margin-top: 58px; }
  .page { margin: 0; padding: 18px 14px 60px; }
  body::after { background-size: 80px 80px, 80px 80px, 20px 20px, 20px 20px; }
}