/* ============================================================
   LIQUID GLASS material — integrated into the single white-LED
   theme. Panels, island, sidebar, buttons & tiles become
   refractive glass with a drifting specular sheen and
   light-catching edges. The background stays black.
   ============================================================ */

/* Panels → refractive glass */
.panel {
  background: linear-gradient(135deg, rgba(255,255,255,.13), rgba(255,255,255,.035) 60%, rgba(255,255,255,.06)) !important;
  backdrop-filter: blur(22px) saturate(1.7) brightness(1.06);
  -webkit-backdrop-filter: blur(22px) saturate(1.7) brightness(1.06);
  border: 1px solid rgba(255,255,255,.20);
  box-shadow:
    0 10px 40px rgba(0,0,0,.5),
    inset 0 1px 1px rgba(255,255,255,.40),
    inset 0 -2px 6px rgba(255,255,255,.05),
    inset 2px 0 6px rgba(255,255,255,.04);
}
/* bright top-edge light (replaces the flat neon hairline) */
.panel::before {
  height: 42%;
  background: linear-gradient(180deg, rgba(255,255,255,.16), transparent) !important;
  opacity: .5;
  pointer-events: none;   /* decorative only — must NOT eat clicks/focus on panel content */
}
/* specular sheen — parked off-screen, sweeps once when you hover the panel
   (reactive to the user instead of an always-on ambient loop) */
.panel::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(110deg, transparent 34%, rgba(255,255,255,.12) 47%, rgba(255,255,255,.04) 53%, transparent 66%);
  background-size: 280% 280%;
  background-position: 150% 0;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .panel:hover::after { animation: liquidSheen 1.1s var(--ease) 1; }
}
@keyframes liquidSheen { from { background-position: 150% 0; } to { background-position: -60% 0; } }

/* Sidebar glass */
.sidebar {
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.015));
  backdrop-filter: blur(22px) saturate(1.5);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  border-right: 1px solid rgba(255,255,255,.14);
}
.nav-item.active {
  background: linear-gradient(135deg, rgba(255,255,255,.20), rgba(255,255,255,.05)) !important;
  border-color: rgba(255,255,255,.38);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.45), 0 4px 18px rgba(0,0,0,.35);
}

/* Glass buttons */
.btn {
  background: linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.045));
  backdrop-filter: blur(12px) saturate(1.5);
  -webkit-backdrop-filter: blur(12px) saturate(1.5);
  border: 1px solid rgba(255,255,255,.26);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.4), 0 6px 20px rgba(0,0,0,.3);
}
.btn--solid {
  background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(210,225,255,.78)) !important;
  color: #06080f; border: none;
}

/* Glass switches, tiles, chips */
.switch { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.24); }
.switch.on { background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(190,210,255,.72)); }
.tile-ic, .avatar {
  background: linear-gradient(135deg, rgba(255,255,255,.24), rgba(255,255,255,.06)) !important;
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.45);
}
.chip { background: rgba(255,255,255,.06); backdrop-filter: blur(8px); }
table.data tr:hover td { background: rgba(255,255,255,.05); }