:root {
  /* -- Raw Accent Scale (Teal) -- */
  --accent-50: #F2FDFC;
  --accent-100: #E0FAF9;
  --accent-200: #BCF2F2;
  --accent-300: #85E4E3;
  --accent-400: #28C9C9;
  --accent-500: #00ADAE;
  --accent-600: #008D90;
  --accent-700: #006E71;
  --accent-800: #005456;
  --accent-900: #003B3C;
  --accent-950: #002324;

  /* -- Raw Neutral Scale (Slate) -- */
  --neutral-50: #FAFCFD;
  --neutral-100: #F3F5F7;
  --neutral-200: #E4E8EB;
  --neutral-300: #CCD2D6;
  --neutral-400: #A5ACB1;
  --neutral-500: #747C81;
  --neutral-600: #51595F;
  --neutral-700: #363E44;
  --neutral-800: #20272D;
  --neutral-900: #0F1518;
  --neutral-950: #030506;

  /* -- Semantics -- */
  --success: #008C3A;
  --warning: #CC7F00;
  --danger: #E95E59;
  --info: #007BC7;

  /* -- Core Semantic Tokens (Dark Glass Mode Default) -- */
  --bg: rgba(12, 12, 12, 0.6);
  --bg-soft: rgba(255, 255, 255, 0.04);
  --fg: #FFFFFF;
  --fg-soft: rgba(255, 255, 255, 0.8);
  --border: rgba(255, 255, 255, 0.04);
  --accent: #00ADAE;
  --accent-soft: rgba(0, 173, 174, 0.15);
  --muted: rgba(255, 255, 255, 0.50);
  --surface: rgba(12, 12, 12, 0.6);
  --radius-lg: 24px;
  --radius-md: 12px;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.7);

  --canvas-bg: radial-gradient(ellipse at 60% 40%, #071214 0%, #040c0d 40%, #020608 100%);
  --app-layout-bg: radial-gradient(ellipse at 60% 40%, #071214 0%, #040c0d 40%, #020608 100%);
  --blob-1-gradient: radial-gradient(circle, var(--accent) 0%, rgba(0, 173, 174, 0) 70%);
  --blob-2-gradient: radial-gradient(circle, #8B5CF6 0%, rgba(139, 92, 246, 0) 70%);
  --blob-opacity: 0.15;

  /* ══════════════════════════════════════════
     LIQUID GLASS DESIGN TOKENS
     ══════════════════════════════════════════ */

  /* ── Blur Scale ── */
  --lg-blur-xs: 4px;
  --lg-blur-sm: 8px;
  --lg-blur-md: 16px;
  --lg-blur-lg: 24px;
  --lg-blur-xl: 32px;

  /* ── Background Tints (Light Mode) ── */
  --lg-bg-subtle:  rgba(255, 255, 255, 0.08);
  --lg-bg-light:   rgba(255, 255, 255, 0.15);
  --lg-bg-medium:  rgba(255, 255, 255, 0.28);
  --lg-bg-heavy:   rgba(255, 255, 255, 0.45);
  --lg-bg-solid:   rgba(255, 255, 255, 0.70);

  /* ── Border Tints ── */
  --lg-border-subtle:  rgba(255, 255, 255, 0.12);
  --lg-border-light:   rgba(255, 255, 255, 0.22);
  --lg-border-medium:  rgba(255, 255, 255, 0.35);
  --lg-border-strong:  rgba(255, 255, 255, 0.50);

  /* ── Inner Highlights ── */
  --lg-highlight-top:    rgba(255, 255, 255, 0.40);
  --lg-highlight-bottom: rgba(255, 255, 255, 0.05);
  --lg-highlight-edge:   rgba(255, 255, 255, 0.30);

  /* ── Shadows ── */
  --lg-shadow-xs: 0 2px 8px rgba(0, 0, 0, 0.04);
  --lg-shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.06);
  --lg-shadow-md: 0 8px 32px rgba(0, 0, 0, 0.08);
  --lg-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.12);
  --lg-shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.16);

  /* ── Inset Shadows (for depth) ── */
  --lg-inset-top:    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  --lg-inset-bottom: inset 0 -1px 0 rgba(0, 0, 0, 0.05);
  --lg-inset-full:   inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.05);

  /* ── Radius ── */
  --lg-radius-xs: 6px;
  --lg-radius-sm: 10px;
  --lg-radius-md: 16px;
  --lg-radius-lg: 24px;
  --lg-radius-xl: 32px;
  --lg-radius-pill: 9999px;

  /* ── Saturation ── */
  --lg-saturate: 180%;
  --lg-saturate-heavy: 220%;

  /* ── Transition Presets ── */
  --lg-transition-fast: 0.15s ease;
  --lg-transition-normal: 0.25s ease;
  --lg-transition-smooth: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Background Gradients (for behind glass) ── */
  --lg-gradient-teal:   linear-gradient(135deg, #006E71 0%, #00ADAE 50%, #85E4E3 100%);
  --lg-gradient-subtle: linear-gradient(135deg, #F2FDFC 0%, #E0FAF9 50%, #BCF2F2 100%);
  --lg-gradient-warm:   linear-gradient(135deg, #00ADAE 0%, #007BC7 50%, #6366f1 100%);
  --lg-gradient-dark:   linear-gradient(135deg, #003B3C 0%, #005456 50%, #006E71 100%);
}

[data-theme="dark"] {
  /* -- Core Semantic Tokens (Dark Glass Mode) -- */
  --bg: rgba(12, 12, 12, 0.6);
  --bg-soft: rgba(255, 255, 255, 0.04);
  --fg: #FFFFFF;
  --fg-soft: rgba(255, 255, 255, 0.8);
  --border: rgba(255, 255, 255, 0.04);
  --accent: #00ADAE;
  --accent-soft: rgba(0, 173, 174, 0.15);
  --muted: rgba(255, 255, 255, 0.50);
  --surface: rgba(12, 12, 12, 0.6);
  --radius-lg: 24px;
  --radius-md: 12px;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.7);

  --canvas-bg: radial-gradient(ellipse at 60% 40%, #071214 0%, #040c0d 40%, #020608 100%);
  --app-layout-bg: radial-gradient(ellipse at 60% 40%, #071214 0%, #040c0d 40%, #020608 100%);
  --blob-1-gradient: radial-gradient(circle, var(--accent) 0%, rgba(0, 173, 174, 0) 70%);
  --blob-2-gradient: radial-gradient(circle, #8B5CF6 0%, rgba(139, 92, 246, 0) 70%);
  --blob-opacity: 0.15;

  /* ── Liquid Glass Dark Mode Overrides ── */
  --lg-bg-subtle:  rgba(0, 0, 0, 0.15);
  --lg-bg-light:   rgba(0, 0, 0, 0.22);
  --lg-bg-medium:  rgba(0, 0, 0, 0.35);
  --lg-bg-heavy:   rgba(0, 0, 0, 0.50);
  --lg-bg-solid:   rgba(0, 0, 0, 0.70);

  --lg-border-subtle:  rgba(255, 255, 255, 0.06);
  --lg-border-light:   rgba(255, 255, 255, 0.10);
  --lg-border-medium:  rgba(255, 255, 255, 0.16);
  --lg-border-strong:  rgba(255, 255, 255, 0.25);

  --lg-highlight-top:    rgba(255, 255, 255, 0.12);
  --lg-highlight-bottom: rgba(255, 255, 255, 0.02);
  --lg-highlight-edge:   rgba(255, 255, 255, 0.08);

  --lg-shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.20);
  --lg-shadow-md: 0 8px 32px rgba(0, 0, 0, 0.30);
  --lg-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.40);

  --lg-inset-top:    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --lg-inset-bottom: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
}


html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--canvas-bg);
  color: var(--fg);
  transition: background-color 0.3s ease, color 0.3s ease;
}
main { max-width: 880px; margin: 32px auto; padding: 0 16px; }
button {
  font: inherit;
  cursor: pointer;
  padding: 6px 12px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--fg);
  border-radius: 6px;
}
button:hover { filter: brightness(0.97); }
input, textarea, select {
  font: inherit;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--fg);
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  border: 1px solid transparent;
  background-clip: padding-box;
  transition: background 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--accent, #00ADAE);
  border: 1px solid transparent;
  background-clip: padding-box;
}

* {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.08) transparent;
}

/* ── Toast Notification Override ───────────────────────────────────────────
   The notify container is appended to document.body but the app shell creates
   a new stacking context (Shadow DOM + overflow:hidden) which clips fixed
   children. Force the container above ALL layers at the true viewport level.
   ───────────────────────────────────────────────────────────────────────── */
#usbp-notify-container {
  position: fixed !important;
  z-index: 999999 !important;
  pointer-events: none;
  bottom: 24px !important;
  right: 24px !important;
  top: unset !important;
  left: unset !important;
  transform: none !important;
  max-width: 380px;
  width: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#usbp-notify-container > * {
  pointer-events: all;
}