/* ==========================================================================
   VICC v65 — HOLOGRAPHIC, legacy shells
   Loads LAST in vicc_layout.php and layout.php.

   v65.css targets the rebuilt pages, which use shell.php markup. Your ~100
   original pages use a different vocabulary — .app / .shell, .side, .main,
   .top, .stat, .hero, .ops-panel, .feature-card, .phone-mini — so none of it
   reached them. This file applies the identical design to that vocabulary,
   so every page in VICC looks like one product.

   No markup changes. Class names are matched exactly as the pages emit them.
   ========================================================================== */

:root {
  --void:      #05060D;
  --bg:        #05060D;
  --bg-deep:   #03040A;

  --panel:     rgba(18,22,40,.55);
  --panel-2:   rgba(26,31,56,.6);
  --panel-3:   rgba(36,42,74,.66);
  --surface:   rgba(18,22,40,.55);
  --surface-2: rgba(26,31,56,.6);
  --surface-3: rgba(36,42,74,.66);

  --glass:    rgba(255,255,255,.045);
  --glass-br: rgba(255,255,255,.10);
  --glass-hi: rgba(255,255,255,.22);

  --line:      rgba(255,255,255,.10);
  --line-soft: rgba(255,255,255,.055);

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

  --lamp-idle: #2BF5A8; --idle: #2BF5A8;
  --lamp-ring: #FFC24B; --ring: #FFC24B;
  --lamp-busy: #FF4D8D; --busy: #FF4D8D;
  --lamp-off:  #38405E; --off:  #38405E;
  --accent:    #34E7FF;  --acc: #34E7FF;

  --cyan: #34E7FF; --purple: #A855FF; --magenta: #FF4DD8;
  --green: #2BF5A8; --amber: #FFC24B; --red: #FF4D8D;

  --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
   ========================================================================== */
html, body { background: var(--void) !important; color: var(--ink); }

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: v65-mesh 32s ease-in-out infinite alternate;
}
@keyframes v65-mesh {
  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); }
}
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;
  -webkit-mask-image: radial-gradient(ellipse 120% 85% at 50% 0%, #000 22%, transparent 78%);
  mask-image: radial-gradient(ellipse 120% 85% at 50% 0%, #000 22%, transparent 78%);
}
.shell, .app, aside, .side, main, .main, header, .top { position: relative; z-index: 1; }

/* Legacy #matrix canvas stays hidden; the mesh replaces it. */
#matrix, canvas#matrix { display: none !important; }

/* ==========================================================================
   RAIL — floating holographic panel
   ========================================================================== */
aside, .side {
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)) !important;
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid var(--glass-br) !important;
  border-radius: 16px;
  margin: 12px 0 12px 12px;
  height: calc(100vh - 24px);
  box-shadow: 0 1px 0 var(--glass-hi) inset, 0 18px 50px rgba(0,0,0,.5);
}
.brand-wrap, .brand { border-bottom: 1px solid var(--line-soft) !important; }
.brand-logo, .brand-badge img { box-shadow: 0 0 26px rgba(52,231,255,.35); border-radius: 7px; }
.brand-text, .brand { color: var(--ink); }
.brand-text span, .brand small { color: var(--faint); }

aside nav a, nav a, .nav a {
  border-radius: 9px; margin: 1px 8px; padding: 7px 14px;
  border-left: 0 !important; color: var(--ink-dim);
}
aside nav a:hover, nav a:hover, .nav a:hover { background: rgba(255,255,255,.06); color: #fff; }
aside nav a.active, nav a.active, .nav a.active, .nav .active {
  background: linear-gradient(90deg, rgba(52,231,255,.20), rgba(168,85,255,.10) 55%, transparent) !important;
  box-shadow: inset 0 0 0 1px rgba(52,231,255,.28), 0 0 26px rgba(52,231,255,.16);
  color: #fff !important; border-left: 0 !important;
}
aside nav b, nav b, .nav-section {
  color: var(--faint); letter-spacing: .16em;
}

/* ==========================================================================
   HEADER — HUD strip
   ========================================================================== */
header, .top {
  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);
  border-radius: 16px;
  padding: 16px 20px !important;
  margin: 12px 0 20px;
  box-shadow: 0 1px 0 var(--glass-hi) inset, 0 18px 50px rgba(0,0,0,.55),
              0 0 62px rgba(52,231,255,.10);
  position: relative; overflow: hidden;
}
header::before, .top::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: .5; background-size: 260% 100%;
  animation: v65-shine 9s linear infinite; pointer-events: none;
}
@keyframes v65-shine { to { background-position: -260% 0; } }

header h1, .title 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));
}
header p { color: var(--cyan); opacity: .85; }

/* ==========================================================================
   PANELS / CARDS — glass
   ========================================================================== */
.panel, .card, .ops-panel, .feature-card, .profile-card, .capability-card,
.app-tile, .update-job, .protect-item, .node, .phone-mini, .engineered-card {
  background: linear-gradient(150deg, rgba(255,255,255,.085), rgba(255,255,255,.025)) !important;
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid var(--glass-br) !important;
  border-radius: 16px;
  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);
  position: relative;
  transition: background .25s ease, box-shadow .25s ease, transform .2s ease;
}
.panel::before, .card::before, .ops-panel::before, .feature-card::before,
.app-tile::before, .phone-mini::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: .3; transition: opacity .3s ease; pointer-events: none; z-index: 2;
}
.panel:hover::before, .card:hover::before, .ops-panel:hover::before,
.feature-card:hover::before, .app-tile:hover::before, .phone-mini:hover::before { opacity: .78; }

.panel:hover, .card:hover, .ops-panel:hover, .feature-card:hover,
.app-tile:hover, .phone-mini:hover {
  background: linear-gradient(150deg, rgba(255,255,255,.12), rgba(255,255,255,.045)) !important;
  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);
  transform: translateY(-2px);
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero, .ops-hero, .updater-hero, .hero.v39 {
  background: linear-gradient(150deg, rgba(255,255,255,.10), rgba(255,255,255,.03)) !important;
  -webkit-backdrop-filter: var(--blur-xl); backdrop-filter: var(--blur-xl);
  border: 1px solid var(--glass-br) !important;
  border-radius: 18px;
  box-shadow: 0 1px 0 var(--glass-hi) inset, 0 20px 60px rgba(0,0,0,.5),
              0 0 70px rgba(52,231,255,.10);
}
.hero::before, .ops-hero::before, .hero.v39:before {
  background: linear-gradient(90deg, var(--cyan), var(--purple) 50%, var(--magenta));
  box-shadow: 0 0 22px rgba(52,231,255,.6);
  height: 2px;
}
.hero h2, .ops-hero h2 {
  background: linear-gradient(100deg, #fff, var(--cyan) 55%, var(--purple));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* ==========================================================================
   STATS — holographic tiles
   ========================================================================== */
.stats, .ops-kpis, main > .stats { gap: 14px; }
.stat, .ops-kpi {
  background: linear-gradient(158deg, rgba(255,255,255,.09), rgba(255,255,255,.028)) !important;
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid var(--glass-br) !important;
  border-radius: 14px;
  box-shadow: 0 1px 0 var(--glass-hi) inset, 0 14px 40px rgba(0,0,0,.4);
  position: relative; overflow: hidden;
  animation: v65-float 7s ease-in-out infinite;
}
.stat:nth-child(2n), .ops-kpi:nth-child(2n) { animation-duration: 8.5s; animation-delay: .6s; }
.stat:nth-child(3n), .ops-kpi:nth-child(3n) { animation-duration: 9.5s; animation-delay: 1.2s; }
.stat:hover, .ops-kpi:hover {
  animation-play-state: paused; transform: translateY(-4px);
  box-shadow: 0 1px 0 var(--glass-hi) inset, 0 20px 52px rgba(0,0,0,.5),
              0 0 44px rgba(52,231,255,.18);
}
@keyframes v65-float { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-5px) } }

.stat::before, .ops-kpi::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--purple));
  box-shadow: 0 0 16px var(--cyan);
}
.stat.good::before, .ops-kpi.up::before   { background: var(--idle); box-shadow: 0 0 16px var(--idle); }
.stat.warn::before, .ops-kpi.warn::before { background: var(--ring); box-shadow: 0 0 16px var(--ring); }
.stat.bad::before,  .ops-kpi.down::before { background: var(--busy); box-shadow: 0 0 16px var(--busy); }

.stat strong, .ops-kpi strong, .card b {
  background: linear-gradient(180deg, #fff, var(--cyan));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 24px rgba(52,231,255,.45));
  font-weight: 800;
}
.stat.good strong { background: linear-gradient(180deg,#fff,var(--idle));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter: drop-shadow(0 0 24px rgba(43,245,168,.5)); }
.stat.warn strong { background: linear-gradient(180deg,#fff,var(--ring));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter: drop-shadow(0 0 24px rgba(255,194,75,.5)); }
.stat.bad strong  { background: linear-gradient(180deg,#fff,var(--busy));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter: drop-shadow(0 0 24px rgba(255,77,141,.5)); }
.stat span, .ops-kpi span { color: var(--faint); letter-spacing: .16em; }

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn, button, .actions a {
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.045)) !important;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid var(--glass-br) !important;
  color: var(--ink) !important;
  box-shadow: 0 1px 0 var(--glass-hi) inset, 0 4px 16px rgba(0,0,0,.4);
}
.btn:hover, button:hover, .actions a:hover {
  background: linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,.08)) !important;
  border-color: rgba(52,231,255,.45) !important;
  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);
}
button[type=submit]:not(.mini):not(.danger):not(.danger-button) {
  background: linear-gradient(135deg, rgba(43,245,168,.26), rgba(52,231,255,.18)) !important;
  border-color: rgba(43,245,168,.5) !important; color: #E6FFF6 !important;
  box-shadow: 0 1px 0 var(--glass-hi) inset, 0 0 40px rgba(43,245,168,.28);
}
.btn.danger, button.danger, .danger-button {
  background: linear-gradient(135deg, rgba(255,77,141,.26), rgba(255,77,216,.18)) !important;
  border-color: rgba(255,77,141,.5) !important; color: #FFEAF3 !important;
  box-shadow: 0 1px 0 var(--glass-hi) inset, 0 0 40px rgba(255,77,141,.26);
}

/* ==========================================================================
   FORMS
   ========================================================================== */
input, select, textarea,
.form input, .form select, .form textarea, .keybox input, .keybox select {
  background: rgba(4,6,16,.55) !important;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--glass-br) !important;
  border-radius: 10px;
  color: var(--ink) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.35) inset;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--cyan) !important;
  background: rgba(4,6,16,.72) !important;
  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) !important;
}
.form label, .form-grid label, .keybox label, label.lbl { color: var(--muted); letter-spacing: .14em; }
::placeholder { color: var(--faint); }

/* ==========================================================================
   PILLS / LAMPS / BADGES
   ========================================================================== */
.pill, .ops-badge, .status, .badge, .capability, .led,
.goodpill, .badpill, .account-chip, .protection-shield {
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-color: var(--glass-br);
}
.pill, .badge, .capability { background: rgba(255,255,255,.07); color: var(--ink-dim); }
.goodpill, .ops-badge.up, .web-ok, .led {
  background: var(--idle-bg) !important; border-color: var(--idle-br) !important; color: var(--idle) !important; }
.badpill, .ops-badge.down, .web-bad {
  background: var(--busy-bg) !important; border-color: var(--busy-br) !important; color: var(--busy) !important; }
.ops-badge.warning {
  background: var(--ring-bg) !important; border-color: var(--ring-br) !important; color: var(--ring) !important; }
.goodpill::before, .badpill::before, .ops-badge::before {
  box-shadow: 0 0 10px currentColor; }

.status, .ops-orb {
  background: radial-gradient(circle at 34% 28%, #fff 0%, var(--lamp-idle) 40%, var(--lamp-idle) 100%);
  box-shadow: 0 0 0 1px rgba(0,0,0,.45) inset, 0 0 8px var(--lamp-idle), 0 0 22px var(--lamp-idle); }
.status.warn { background: radial-gradient(circle at 34% 28%, #fff 0%, var(--lamp-ring) 40%, var(--lamp-ring) 100%);
  box-shadow: 0 0 0 1px rgba(0,0,0,.45) inset, 0 0 8px var(--lamp-ring), 0 0 22px var(--lamp-ring); }
.status.bad, .ops-orb.down { background: radial-gradient(circle at 34% 28%, #fff 0%, var(--lamp-busy) 40%, var(--lamp-busy) 100%);
  box-shadow: 0 0 0 1px rgba(0,0,0,.45) inset, 0 0 8px var(--lamp-busy), 0 0 22px var(--lamp-busy); }
.status.off { background: radial-gradient(circle at 34% 28%, #4A5478 0%, var(--lamp-off) 62%);
  box-shadow: 0 0 0 1px rgba(0,0,0,.55) inset; }

.good { color: var(--idle) } .warn { color: var(--ring) }
.bad, .danger-text { color: var(--busy) } .muted { color: var(--muted) }

/* ==========================================================================
   TABLES
   ========================================================================== */
th { background: rgba(255,255,255,.055) !important; border-bottom: 1px solid var(--line) !important;
     color: var(--muted) !important; }
td { border-bottom: 1px solid var(--line-soft) !important; }
tbody tr:hover, tr:hover { background: rgba(52,231,255,.055) !important; }
table.responsive tr { background: rgba(255,255,255,.05); border-color: var(--glass-br); }

/* ==========================================================================
   KEYS / SIDECAR / LCD
   ========================================================================== */
.kem-button, .keybox, .target-list li {
  background: linear-gradient(150deg, rgba(255,255,255,.08), rgba(255,255,255,.03)) !important;
  border: 1px solid var(--glass-br) !important; border-radius: 10px;
  box-shadow: 0 1px 0 var(--glass-hi) inset;
}
.kem-button:hover, .keybox:hover { border-color: rgba(52,231,255,.4) !important;
  box-shadow: 0 1px 0 var(--glass-hi) inset, 0 0 26px rgba(52,231,255,.18); }
.kem-button::before { box-shadow: 0 0 10px var(--idle); }
.kem-unit-preview, .phone-kem-preview {
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)) !important;
  border: 1px solid var(--glass-br) !important; border-radius: 14px;
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
}
.phone-screen {
  background: radial-gradient(120% 80% at 50% 0%, rgba(43,245,168,.13), transparent 62%),
              linear-gradient(180deg, rgba(8,20,22,.85), rgba(3,10,10,.92)) !important;
  border: 1px solid var(--glass-br) !important; border-radius: 12px;
}
.phone-screen-ext { color: var(--idle); text-shadow: 0 0 18px rgba(43,245,168,.7); }

/* ==========================================================================
   NOTICES / CHECKS / CODE
   ========================================================================== */
.notice-good, .notice-warn, .safe-note, .danger-note {
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-radius: 12px; border-left-width: 3px;
}
.notice-good { background: var(--idle-bg) !important; border-color: var(--idle-br) !important;
               border-left-color: var(--idle) !important; }
.notice-warn { background: var(--ring-bg) !important; border-color: var(--ring-br) !important;
               border-left-color: var(--ring) !important; }
.danger-note { background: var(--busy-bg) !important; border-color: var(--busy-br) !important;
               border-left-color: var(--busy) !important; }
.safe-note   { background: var(--acc-bg) !important;  border-color: var(--acc-br) !important;
               border-left-color: var(--cyan) !important; }

.check.ok::before, .checklist li.ok::before { box-shadow: 0 0 12px var(--idle); }
.check.warn2::before { box-shadow: 0 0 12px var(--ring); }
.check.bad::before   { box-shadow: 0 0 12px var(--busy); }

code, pre {
  background: rgba(3,4,10,.7) !important;
  border: 1px solid var(--glass-br) !important;
  border-radius: 12px; color: var(--ink-dim) !important;
}

/* ==========================================================================
   MISC
   ========================================================================== */
a { color: var(--cyan); }
.eyebrow, .ops-heading, .section-heading, .kem-title {
  color: var(--cyan); opacity: .9; text-shadow: 0 0 18px rgba(52,231,255,.45); }
.meter, .ops-meter { background: rgba(255,255,255,.07); }
.meter span, .ops-meter i { background: linear-gradient(90deg, var(--cyan), var(--purple));
                            box-shadow: 0 0 14px rgba(52,231,255,.5); }
.utl-page-footer { border-top: 1px solid var(--line-soft); }
.vicc-status-cluster .led { animation: v65-breathe 3.4s ease-in-out infinite; }
@keyframes v65-breathe { 0%,100% { opacity: .85 } 50% { opacity: 1 } }
#vicc-protect-toast {
  background: linear-gradient(150deg, rgba(255,255,255,.12), rgba(255,255,255,.04)) !important;
  -webkit-backdrop-filter: var(--blur-xl); backdrop-filter: var(--blur-xl);
  border-color: rgba(52,231,255,.4) !important; border-radius: 14px; }

@media (prefers-reduced-motion: reduce) {
  body::before, header::before, .top::before, .stat, .ops-kpi { animation: none !important; }
}
@media (max-width: 900px) {
  aside, .side { margin: 0; border-radius: 0; height: auto; }
  header, .top { border-radius: 0; margin: 0 0 14px; }
  body::after { background-size: 80px 80px, 80px 80px, 20px 20px, 20px 20px; }
}

/* Rail icons carried over from the old sidebars. */
.rail-ico { flex: none; width: 18px; text-align: center; font-size: 13px; opacity: .9; line-height: 1; }
.rail a { gap: 8px; }