/* ============================================================================
   LaunchGuard — Liquid Glass (Apple iOS 26 style), dark-only.
   Loaded AFTER each page's inline <style>, so these rules win.
   Adaptation, not a rebuild: existing classes keep their layout; this sheet
   swaps their material to a 4-layer glass (blur+saturate · tint · specular rim
   · depth shadow) and adds spring motion + a sliding tab "droplet".

   PERF — never put backdrop-filter on uncapped repeated items:
     .icard (20–60+), admin table <tr> (100s), .gallery .shot, .pagelist label.
   Blur lives only on a few CONTAINER surfaces per viewport region (≤3).
   ========================================================================== */

:root {
  /* blur radii per surface class */
  /* stronger blur → the frosted, see-through iOS widget feel */
  --lg-blur-sm: 14px;   /* nav, buttons, inputs, chips */
  --lg-blur-md: 30px;   /* cards, stat tiles, dropdown, toast */
  --lg-blur-lg: 44px;   /* modals / lightbox panel */
  --lg-saturate: 190%;

  /* MILKY FROSTED tint (iOS widget look): a light WHITE veil over the blur,
     not a dark fill — this is what makes the reference cards glow bright/frosted
     instead of dark. Kept subtle so text stays AA-legible on the dark app. */
  --lg-tint: rgba(255, 255, 255, 0.10);
  --lg-tint-strong: rgba(255, 255, 255, 0.16);
  --lg-tint-clear: rgba(255, 255, 255, 0.05);   /* .lg-clear over media/hero */

  /* bright soft top-rim highlight (specular sheen) + a wide gentle shadow. */
  --lg-stroke: rgba(255, 255, 255, 0.22);
  --lg-rim: inset 0 1.5px 0 rgba(255, 255, 255, 0.40), inset 0 0 0 1px rgba(255, 255, 255, 0.10), inset 0 -10px 24px rgba(255, 255, 255, 0.04);
  --lg-shadow: 0 12px 42px rgba(0, 0, 0, 0.30), 0 2px 8px rgba(0, 0, 0, 0.18);
  --lg-shadow-sm: 0 6px 20px rgba(0, 0, 0, 0.22);

  /* concentric-corner ladder — bumped to the big, soft iOS-widget radii */
  --lg-radius-pill: 999px;
  --lg-radius-card: 28px;
  --lg-radius-md: 20px;
  --lg-radius-control: 15px;
  --lg-radius-sm: 12px;
  --lg-radius-modal: 32px;

  /* gel bounce */
  --lg-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* accent glaze for primary buttons (over the existing --grad) */
  --lg-accent-glaze: linear-gradient(135deg, rgba(124, 107, 255, 0.30), rgba(47, 212, 255, 0.14));
}

/* ---- base material classes (used directly or via component overrides) ---- */
.lg,
.lg-regular {
  background: var(--lg-tint);
  -webkit-backdrop-filter: blur(var(--lg-blur-md)) saturate(var(--lg-saturate));
  backdrop-filter: blur(var(--lg-blur-md)) saturate(var(--lg-saturate));
  border: 1px solid var(--lg-stroke);
  box-shadow: var(--lg-rim), var(--lg-shadow);
}

.lg-clear {
  background: var(--lg-tint-clear);
  -webkit-backdrop-filter: blur(var(--lg-blur-sm)) saturate(var(--lg-saturate));
  backdrop-filter: blur(var(--lg-blur-sm)) saturate(var(--lg-saturate));
  border: 1px solid var(--lg-stroke);
  box-shadow: var(--lg-rim);
}

/* =====================================================================
   TOPBARS — regular · sm blur · sticky · shrink-on-scroll
   ===================================================================== */
.topnav,
.top {
  background: var(--lg-tint) !important;
  -webkit-backdrop-filter: blur(var(--lg-blur-sm)) saturate(var(--lg-saturate));
  backdrop-filter: blur(var(--lg-blur-sm)) saturate(var(--lg-saturate));
  box-shadow: var(--lg-rim), 0 1px 0 rgba(255, 255, 255, 0.03);
  transition: padding 0.35s var(--lg-spring), backdrop-filter 0.3s ease, background 0.3s ease;
}
/* shrink + deepen blur after 24px scroll (JS toggles .scrolled) */
.topnav.scrolled,
.top.scrolled {
  background: var(--lg-tint-strong) !important;
  -webkit-backdrop-filter: blur(var(--lg-blur-md)) saturate(var(--lg-saturate));
  backdrop-filter: blur(var(--lg-blur-md)) saturate(var(--lg-saturate));
  box-shadow: var(--lg-rim), var(--lg-shadow-sm);
}
.topnav.scrolled .nav-in { padding-top: 9px; padding-bottom: 9px; }
.top.scrolled { padding-top: 10px; padding-bottom: 10px; }

/* =====================================================================
   CARDS / HERO / STAT TILES / mtile — regular · md
   ===================================================================== */
.card,
.stat,
.mtile {
  background: var(--lg-tint) !important;
  -webkit-backdrop-filter: blur(var(--lg-blur-md)) saturate(var(--lg-saturate));
  backdrop-filter: blur(var(--lg-blur-md)) saturate(var(--lg-saturate));
  border: 1px solid var(--lg-stroke);
  border-radius: var(--lg-radius-card) !important;
  box-shadow: var(--lg-rim), var(--lg-shadow);
}
.stat, .mtile { border-radius: var(--lg-radius-md) !important; }
/* keep the accent/figma/hero tinted GLAZES layered over the glass tint */
.card.hero {
  background: linear-gradient(160deg, rgba(109, 94, 252, 0.16), rgba(51, 210, 255, 0.05)), var(--lg-tint) !important;
}
.card.accent {
  background: linear-gradient(160deg, rgba(124, 107, 255, 0.16), rgba(79, 140, 255, 0.06)), var(--lg-tint) !important;
}
.card.figma {
  background: linear-gradient(160deg, rgba(255, 90, 180, 0.13), rgba(120, 80, 255, 0.06)), var(--lg-tint) !important;
}
/* stat tiles lift on hover (dashboard) */
.stat {
  transition: transform 0.35s var(--lg-spring), box-shadow 0.3s ease, border-color 0.3s ease;
}
.stat:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: var(--lg-rim), var(--lg-shadow);
}

/* =====================================================================
   BUTTONS — primary (accent glaze) · secondary/.ghost (clear) — sm
   ===================================================================== */
/* primary: keep the brand gradient, add a glass glaze + spring press */
#go, #scanSel, #cmpGo, #fixBtn, #pwGo, button.act, .submit {
  box-shadow: var(--lg-rim), 0 10px 28px -10px rgba(79, 110, 255, 0.6);
  transition: transform 0.35s var(--lg-spring), box-shadow 0.3s ease, background-position 0.5s ease;
}
#go:hover, #scanSel:hover, #cmpGo:hover, #fixBtn:hover, button.act:hover, .submit:hover {
  transform: translateY(-1px);
}
#go:active, #scanSel:active, #cmpGo:active, #fixBtn:active, #pwGo:active, button.act:active, .submit:active {
  transform: scale(0.97);
}

/* secondary (.ghost / .side button) → clear glass */
.ghost {
  background: var(--lg-tint-clear) !important;
  -webkit-backdrop-filter: blur(var(--lg-blur-sm)) saturate(var(--lg-saturate));
  backdrop-filter: blur(var(--lg-blur-sm)) saturate(var(--lg-saturate));
  border: 1px solid var(--lg-stroke) !important;
  box-shadow: var(--lg-rim);
  transition: transform 0.35s var(--lg-spring), background 0.3s ease, border-color 0.3s ease;
}
.ghost:hover { transform: translateY(-1px); border-color: rgba(255, 255, 255, 0.24) !important; }
.ghost:active { transform: scale(0.97); }

/* nav-tag + profile-btn → pill clear glass */
.nav-tag, .profile-btn {
  background: var(--lg-tint-clear) !important;
  -webkit-backdrop-filter: blur(var(--lg-blur-sm)) saturate(var(--lg-saturate));
  backdrop-filter: blur(var(--lg-blur-sm)) saturate(var(--lg-saturate));
  border: 1px solid var(--lg-stroke) !important;
  box-shadow: var(--lg-rim);
}
.profile-btn { transition: transform 0.35s var(--lg-spring), border-color 0.2s ease, background 0.2s ease; }
.profile-btn:hover { transform: translateY(-1px); }
.profile-btn:active { transform: scale(0.97); }

/* =====================================================================
   INPUTS — subtle glass inset · sm · focus = accent glow ring
   ===================================================================== */
input, select, textarea {
  -webkit-backdrop-filter: blur(var(--lg-blur-sm));
  backdrop-filter: blur(var(--lg-blur-sm));
  box-shadow: var(--lg-rim);
  transition: border-color 0.2s ease, box-shadow 0.25s ease;
}
input:focus, select:focus, textarea:focus {
  box-shadow: var(--lg-rim), 0 0 0 4px rgba(79, 140, 255, 0.20), 0 0 22px -6px rgba(79, 140, 255, 0.5);
}

/* =====================================================================
   PILLS / CHIPS — clear · sm (NO backdrop-filter: these repeat in lists)
   just refine the rim so they read as glass without a blur layer.
   ===================================================================== */
.pill, .chip, .nav-link.small {
  box-shadow: var(--lg-rim);
}

/* =====================================================================
   DROPDOWN / POPOVER + TOAST — regular · md
   ===================================================================== */
/* Floating menus/toasts float OVER page text, so they need an OPAQUE dark base
   (a dark fill + a light frost veil on top) + a strong blur — otherwise the
   text behind them shows through. Not see-through like the cards. */
.profile-menu {
  background: linear-gradient(var(--lg-tint-strong), var(--lg-tint-strong)), #0c0f18 !important;
  -webkit-backdrop-filter: blur(var(--lg-blur-lg)) saturate(var(--lg-saturate));
  backdrop-filter: blur(var(--lg-blur-lg)) saturate(var(--lg-saturate));
  border: 1px solid var(--lg-stroke) !important;
  box-shadow: var(--lg-rim), var(--lg-shadow) !important;
}
.toast {
  background: linear-gradient(var(--lg-tint-strong), var(--lg-tint-strong)), #0c0f18 !important;
  -webkit-backdrop-filter: blur(var(--lg-blur-lg)) saturate(var(--lg-saturate));
  backdrop-filter: blur(var(--lg-blur-lg)) saturate(var(--lg-saturate));
  box-shadow: var(--lg-rim), var(--lg-shadow) !important;
}

/* progress bar track = clear glass */
.prog {
  -webkit-backdrop-filter: blur(var(--lg-blur-sm));
  backdrop-filter: blur(var(--lg-blur-sm));
  box-shadow: var(--lg-rim);
}

/* =====================================================================
   TABS — segmented control with a sliding glass "droplet" indicator.
   The .tabs container gets a relative context; a ::before droplet sits
   behind the active tab and animates left/width via CSS custom props the
   tiny JS sets (--lg-dx, --lg-dw). Falls back to per-tab active glass if
   JS/props absent.
   ===================================================================== */
.tabs {
  position: relative;
}
.tabs::before {
  content: '';
  position: absolute;
  top: var(--lg-dtop, 4px);
  left: var(--lg-dx, 0);
  width: var(--lg-dw, 0);
  height: var(--lg-dh, calc(100% - 8px));
  border-radius: var(--lg-radius-sm);
  background: var(--lg-tint-strong);
  -webkit-backdrop-filter: blur(var(--lg-blur-sm)) saturate(var(--lg-saturate));
  backdrop-filter: blur(var(--lg-blur-sm)) saturate(var(--lg-saturate));
  box-shadow: var(--lg-rim), var(--lg-shadow-sm);
  opacity: 0;
  transition: left 0.4s var(--lg-spring), width 0.4s var(--lg-spring), opacity 0.2s ease;
  pointer-events: none;
  z-index: 0;
}
.tabs.lg-ready::before { opacity: 1; }
/* once the droplet is active, the tab's own active background is redundant —
   let the droplet show through; keep text above it */
.tabs.lg-ready .tab,
.tabs.lg-ready .tab.cat,
.tabs.lg-ready button {
  position: relative;
  z-index: 1;
  background: transparent !important;
  box-shadow: none !important;
  border-color: transparent !important;
  transition: color 0.25s ease;
}
.tabs .tab, .tabs .tab.cat, .tabs button { transition: color 0.2s ease, background 0.2s ease; }

/* =====================================================================
   ADMIN SIDEBAR — regular · md (container, not a list of many rows)
   ===================================================================== */
.side {
  background: var(--lg-tint) !important;
  -webkit-backdrop-filter: blur(var(--lg-blur-md)) saturate(var(--lg-saturate));
  backdrop-filter: blur(var(--lg-blur-md)) saturate(var(--lg-saturate));
  border-right: 1px solid var(--lg-stroke) !important;
}
.side button { transition: background 0.2s ease, color 0.2s ease, transform 0.3s var(--lg-spring); }
.side button.on {
  box-shadow: var(--lg-rim);
}
.side button:active { transform: scale(0.98); }

/* sticky table HEADER only (never the rows) */
.card table thead th {
  position: sticky;
  top: 0;
  background: var(--lg-tint-strong);
  -webkit-backdrop-filter: blur(var(--lg-blur-sm)) saturate(var(--lg-saturate));
  backdrop-filter: blur(var(--lg-blur-sm)) saturate(var(--lg-saturate));
  z-index: 2;
}

/* row action buttons: subtle spring, no blur (they're inside long tables) */
.acts a, .acts button, .side button, .ig-btn {
  transition: transform 0.3s var(--lg-spring), border-color 0.2s ease, background 0.2s ease;
}
.acts a:active, .acts button:active, .ig-btn:active { transform: scale(0.95); }

/* =====================================================================
   MODAL — lightbox scrim (dim + light blur), inner image reads as panel
   ===================================================================== */
.lightbox {
  -webkit-backdrop-filter: blur(var(--lg-blur-sm));
  backdrop-filter: blur(var(--lg-blur-sm));
}
.lightbox img {
  box-shadow: var(--lg-rim), 0 24px 70px rgba(0, 0, 0, 0.7);
}

/* =====================================================================
   FALLBACKS
   ===================================================================== */
/* No backdrop-filter support → solid tints (glass would be invisible). */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .lg, .lg-regular, .lg-clear,
  .topnav, .top, .card, .stat, .mtile, .side,
  .profile-menu, .toast, .nav-tag, .profile-btn, .ghost,
  .tabs::before, .card table thead th {
    background: #10131d !important;
  }
  .card.hero { background: linear-gradient(160deg, #241f4a, #14202a) !important; }
  .card.accent { background: linear-gradient(160deg, #241f4a, #141b2a) !important; }
  .card.figma { background: linear-gradient(160deg, #2a1730, #1a1430) !important; }
}

/* User prefers less transparency → solid opaque surfaces (accessibility). */
@media (prefers-reduced-transparency: reduce) {
  .topnav, .top, .card, .stat, .mtile, .side,
  .profile-menu, .toast, .tabs::before, .card table thead th {
    background: #0d1018 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .nav-tag, .profile-btn, .ghost { background: rgba(255, 255, 255, 0.06) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}

/* Reduced motion → kill springs, transforms, droplet slide. */
@media (prefers-reduced-motion: reduce) {
  .topnav, .top, .stat, .ghost, .profile-btn, .side button,
  #go, #scanSel, #cmpGo, #fixBtn, #pwGo, button.act, .submit,
  .acts a, .acts button, .ig-btn {
    transition: none !important;
  }
  .stat:hover, .ghost:hover, .profile-btn:hover,
  #go:hover, #fixBtn:hover, button.act:hover, .submit:hover { transform: none !important; }
  *:active { transform: none !important; }
  .tabs::before { transition: opacity 0.2s ease !important; }
}