/* ════════════════════════════════════════════════════════════════════
   DEELIAR — DEFAULT 2035 GLOBAL STYLE LAYER
   ────────────────────────────────────────────────────────────────────
   Loaded on every non-auth template AFTER all page CSS, BEFORE
   theme-presets.css and the inline tenant <style> block. This file
   lifts the *default* look of the entire product to a futuristic
   space / AI / SaaS aesthetic without touching backend logic, JS,
   class names or template structure.

   Cascade contract:
     1. Inline tenant branding (highest)
     2. theme-presets.css   (--style-* vars, runtime preset switcher)
     3. THIS FILE           (default-2035.css)
     4. Page-specific CSS   (dashboard.css, hub.css, …)
     5. styles.css          (legacy base)

   Rules followed by every selector below:
     • Use `var(--…)` so all 15+ presets keep working.
     • Never change layout (no width/height/grid changes that move
       elements); only enhance surfaces, borders, shadows, motion.
     • Auth pages opt out via `body:not(.auth-page)`.
     • `prefers-reduced-motion` honoured at the bottom.
   ════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Public-friendly token aliases (per request brief) ── */
  --bg-main:           var(--ds-bg);
  --bg-surface:        var(--ds-surface);
  --bg-surface-glass:  var(--ds-glass);
  --text-main:         var(--ds-text);
  --primary-glow:      color-mix(in srgb, var(--primary) 35%, transparent);
  --secondary:         var(--primary-light);
  --border-soft:       var(--ds-border);

  --container-max:     1200px;

  --shadow-soft:       0 12px 30px -16px rgba(4, 5, 14, 0.55);
  --shadow-glow:       var(--shadow-glow-primary);
  --glass-bg:          var(--ds-glass);
  --glass-border:      var(--ds-border-strong);
  --blur-strong:       28px;

  --transition-fast:   140ms var(--ease-spring);
  --transition-normal: 260ms var(--ease-spring);
}

[data-theme="light"] {
  --primary-glow:      color-mix(in srgb, var(--primary) 28%, transparent);
}

/* ════════════════════════════════════════════════════════════════════
   GLOBAL CANVAS — futuristic space background
   Applied to every non-auth page. Uses `body::before` so the body's
   own background-color stays available to legacy code if needed.
   ════════════════════════════════════════════════════════════════════ */

html { color-scheme: dark; }
[data-theme="light"] html,
[data-theme="light"] :root { color-scheme: light; }

body:not(.auth-page) {
  background:
    radial-gradient(ellipse 70% 50% at 12% -10%,
      color-mix(in srgb, var(--primary) 22%, transparent), transparent 60%),
    radial-gradient(ellipse 60% 50% at 100% 0%,
      color-mix(in srgb, var(--accent) 18%, transparent), transparent 60%),
    radial-gradient(ellipse 80% 60% at 50% 110%,
      color-mix(in srgb, var(--primary-light) 18%, transparent), transparent 65%),
    var(--ds-bg, #06060f);
  color: var(--ds-text, #f4f5fb);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Subtle grid + light-points layer (purely decorative, pointer-events
   disabled, sits behind everything). Skipped on auth pages and on
   pages that explicitly opt out via [data-no-default-bg].
   z-index: -1 keeps it BELOW normal-flow body content without requiring
   body > * { z-index: 1 } — which would create stacking contexts on <main>
   and trap position:fixed modal overlays below <footer>. */
body:not(.auth-page):not([data-no-default-bg])::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(var(--ds-border, rgba(255,255,255,0.06)) 1px, transparent 1px),
    linear-gradient(90deg, var(--ds-border, rgba(255,255,255,0.06)) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 25%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 25%, #000 0%, transparent 78%);
  opacity: 0.45;
}

[data-theme="light"] body:not(.auth-page) {
  background:
    radial-gradient(ellipse 70% 50% at 12% -10%,
      color-mix(in srgb, var(--primary) 12%, transparent), transparent 60%),
    radial-gradient(ellipse 60% 50% at 100% 0%,
      color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%),
    var(--ds-bg, #f6f7fb);
  color: var(--ds-text, #1b1d2a);
}
[data-theme="light"] body:not(.auth-page):not([data-no-default-bg])::before {
  opacity: 0.3;
}

/* Body children sit above the decorative ::before grid (now at z-index:-1)
   via normal painting order — NO z-index needed here. NOT adding z-index
   is intentional: z-index would create stacking contexts on <main>/<footer>
   that trap position:fixed modal overlays below the footer. */
body > * { position: relative; }

/* Prevent horizontal scroll — common offender on hero sections.
   IMPORTANT: Use overflow-x: clip (NOT hidden) on BOTH html AND body.
   overflow-x: hidden causes overflow-y: visible → auto (CSS spec rule),
   which makes the element an explicit scroll container separate from the
   viewport. Wheel events then scroll body instead of the viewport, breaking
   page scroll. overflow-x: clip is excluded from this rule — it clips
   without creating a scroll container. */
html { overflow-x: clip; }   /* clip = no scroll container created */
body { overflow-x: clip; max-width: 100%; }  /* clip, NOT hidden — avoids overflow-y:auto on body */

/* ════════════════════════════════════════════════════════════════════
   TYPOGRAPHY — modern display defaults
   ════════════════════════════════════════════════════════════════════ */

body:not(.auth-page) h1,
body:not(.auth-page) h2,
body:not(.auth-page) h3 {
  font-family: var(--font-display);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-tight);
}

body:not(.auth-page) h1 { font-weight: 700; }
body:not(.auth-page) h2 { font-weight: 700; }
body:not(.auth-page) h3 { font-weight: 600; }

::selection {
  background: color-mix(in srgb, var(--primary) 38%, transparent);
  color: #fff;
}

/* ════════════════════════════════════════════════════════════════════
   BUTTONS — futuristic primary / secondary / ghost
   Overrides legacy `.btn-*` from styles.css.
   ════════════════════════════════════════════════════════════════════ */

body:not(.auth-page) .btn,
body:not(.auth-page) .hub-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 22px;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.005em;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  white-space: nowrap;
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-normal),
    background var(--transition-normal),
    border-color var(--transition-normal),
    color var(--transition-normal);
  text-decoration: none;
}

body:not(.auth-page) .btn-sm,
body:not(.auth-page) .hub-nav-btn { padding: 8px 18px; font-size: 0.86rem; }
body:not(.auth-page) .btn-lg { padding: 14px 32px; font-size: 1.02rem; }

body:not(.auth-page) .btn-primary,
body:not(.auth-page) .hub-nav-btn-primary {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--primary) 92%, white 8%),
    color-mix(in srgb, var(--primary-light, #818cf8) 92%, var(--accent) 8%));
  color: #fff;
  border-color: transparent;
  box-shadow: var(--shadow-glow-primary, 0 22px 60px -22px rgba(99,102,241,0.65));
}
body:not(.auth-page) .btn-primary:hover,
body:not(.auth-page) .hub-nav-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow:
    var(--shadow-glow-primary, 0 22px 60px -22px rgba(99,102,241,0.65)),
    0 0 0 1px color-mix(in srgb, var(--primary) 50%, transparent);
}
body:not(.auth-page) .btn-primary:active,
body:not(.auth-page) .hub-nav-btn-primary:active { transform: translateY(0) scale(0.985); }

body:not(.auth-page) .btn-outline,
body:not(.auth-page) .hub-nav-btn-ghost {
  background: var(--ds-glass, rgba(255,255,255,0.05));
  color: var(--ds-text, #f4f5fb);
  border-color: var(--ds-border-strong, rgba(255,255,255,0.16));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
body:not(.auth-page) .btn-outline:hover,
body:not(.auth-page) .hub-nav-btn-ghost:hover {
  background: var(--ds-glass-strong, rgba(255,255,255,0.09));
  border-color: var(--ds-border-accent);
  color: var(--ds-text, #fff);
  transform: translateY(-1px);
}

body:not(.auth-page) .btn-ghost {
  background: transparent;
  color: var(--ds-text-muted, #aab1c8);
  border-color: transparent;
}
body:not(.auth-page) .btn-ghost:hover {
  color: var(--ds-text, #f4f5fb);
  background: var(--ds-glass, rgba(255,255,255,0.05));
}

body:not(.auth-page) .btn-white {
  background: #ffffff;
  color: var(--primary-dark, #4f46e5);
  border-color: #ffffff;
  box-shadow: 0 18px 40px -18px rgba(255,255,255,0.4);
}
body:not(.auth-page) .btn-white:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 50px -16px rgba(255,255,255,0.55);
}

body:not(.auth-page) .btn-ghost-white {
  background: transparent;
  color: #ffffff;
  border-color: rgba(255,255,255,0.4);
}
body:not(.auth-page) .btn-ghost-white:hover {
  background: rgba(255,255,255,0.1);
  border-color: #ffffff;
}

body:not(.auth-page) .btn:focus-visible,
body:not(.auth-page) .hub-nav-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--primary) 70%, white);
  outline-offset: 3px;
}

/* ════════════════════════════════════════════════════════════════════
   NAVBARS — premium glass with bottom glow line
   Catches every navbar variant in the project: .navbar, .hub-navbar,
   .dash-navbar, .ha-navbar.
   ════════════════════════════════════════════════════════════════════ */

body:not(.auth-page) .navbar,
body:not(.auth-page) .hub-navbar,
body:not(.auth-page) .dash-navbar,
body:not(.auth-page) .ha-navbar {
  background: color-mix(in srgb, var(--ds-bg, #06060f) 72%, transparent);
  -webkit-backdrop-filter: blur(var(--blur-strong, 28px)) saturate(1.8);
          backdrop-filter: blur(var(--blur-strong, 28px)) saturate(1.8);
  border-bottom: 1px solid var(--ds-border, rgba(255,255,255,0.08));
  box-shadow: 0 1px 0 color-mix(in srgb, var(--primary) 12%, transparent);
}
body:not(.auth-page) .navbar.scrolled,
body:not(.auth-page) .hub-navbar.scrolled,
body:not(.auth-page) .dash-navbar.scrolled {
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--primary) 18%, transparent),
    0 18px 40px -22px rgba(0,0,0,0.6);
}

[data-theme="light"] body:not(.auth-page) .navbar,
[data-theme="light"] body:not(.auth-page) .hub-navbar,
[data-theme="light"] body:not(.auth-page) .dash-navbar,
[data-theme="light"] body:not(.auth-page) .ha-navbar {
  background: color-mix(in srgb, var(--ds-bg, #f6f7fb) 78%, white);
  border-bottom-color: var(--ds-border, rgba(20,25,50,0.08));
  box-shadow: 0 1px 0 color-mix(in srgb, var(--primary) 14%, transparent);
}

/* Active / hover on nav links — subtle accent without rewriting layout */
body:not(.auth-page) .nav-links a:hover,
body:not(.auth-page) .nav-link:hover {
  color: var(--ds-text, #fff);
}
body:not(.auth-page) .nav-link.active,
body:not(.auth-page) .nav-links a.active {
  color: var(--ds-text, #fff);
}

/* ════════════════════════════════════════════════════════════════════
   FOOTER — same futuristic vibe as navbar
   ════════════════════════════════════════════════════════════════════ */

body:not(.auth-page) .footer,
body:not(.auth-page) footer.footer {
  background:
    linear-gradient(180deg,
      transparent,
      color-mix(in srgb, var(--ds-bg, #06060f) 80%, transparent) 30%,
      var(--ds-bg, #06060f));
  border-top: 1px solid var(--ds-border, rgba(255,255,255,0.08));
  color: var(--ds-text-muted, #aab1c8);
  position: relative;
}
body:not(.auth-page) .footer::before {
  content: "";
  position: absolute;
  inset: -1px 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent,
    color-mix(in srgb, var(--primary) 50%, transparent), transparent);
  pointer-events: none;
}
body:not(.auth-page) .footer a {
  color: var(--ds-text-muted, #aab1c8);
  transition: color var(--transition-fast);
}
body:not(.auth-page) .footer a:hover { color: var(--ds-text, #fff); }

[data-theme="light"] body:not(.auth-page) .footer {
  background:
    linear-gradient(180deg,
      transparent,
      color-mix(in srgb, var(--ds-bg, #f6f7fb) 70%, transparent) 30%,
      var(--ds-bg-2, #eceff7));
  color: var(--ds-text-muted, #4d5266);
  border-top-color: var(--ds-border, rgba(20,25,50,0.1));
}

/* ════════════════════════════════════════════════════════════════════
   CARDS — generic + landing variants get glassmorphism by default
   ════════════════════════════════════════════════════════════════════ */

body:not(.auth-page) .card,
body:not(.auth-page) .feature-card,
body:not(.auth-page) .pricing-card,
body:not(.auth-page) .testimonial-card,
body:not(.auth-page) .ho-card {
  position: relative;
  background: var(--ds-surface, rgba(20, 22, 38, 0.72));
  border: 1px solid var(--ds-border-strong, rgba(255,255,255,0.12));
  border-radius: var(--radius-2xl, 24px);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
          backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: var(--shadow-soft);
  transition:
    transform var(--transition-normal),
    box-shadow var(--transition-normal),
    border-color var(--transition-normal),
    background-color var(--transition-normal);
}
body:not(.auth-page) .card:hover,
body:not(.auth-page) .feature-card:hover,
body:not(.auth-page) .pricing-card:hover,
body:not(.auth-page) .testimonial-card:hover,
body:not(.auth-page) .ho-card:hover {
  transform: translateY(-3px);
  border-color: var(--ds-border-accent);
  box-shadow:
    var(--shadow-2xl),
    0 0 0 1px color-mix(in srgb, var(--primary) 22%, transparent);
}

/* Accent gradient hairline at the top of pricing/feature cards
   (purely visual; doesn't shift layout). */
body:not(.auth-page) .pricing-card::before,
body:not(.auth-page) .feature-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 16%;
  right: 16%;
  height: 1px;
  background: linear-gradient(90deg, transparent,
    color-mix(in srgb, var(--primary) 60%, transparent),
    color-mix(in srgb, var(--accent) 60%, transparent),
    transparent);
  pointer-events: none;
  opacity: 0.7;
}

[data-theme="light"] body:not(.auth-page) .card,
[data-theme="light"] body:not(.auth-page) .feature-card,
[data-theme="light"] body:not(.auth-page) .pricing-card,
[data-theme="light"] body:not(.auth-page) .testimonial-card,
[data-theme="light"] body:not(.auth-page) .ho-card {
  background: var(--ds-surface-2, rgba(255,255,255,0.92));
  border-color: var(--ds-border-strong, rgba(20,25,50,0.14));
}

/* ════════════════════════════════════════════════════════════════════
   FORMS — dark/glass inputs with primary focus ring
   Excludes .form-input (already styled by auth.css / message.css /
   login_register.css) to avoid double-styling on forms inside cards.
   ════════════════════════════════════════════════════════════════════ */

body:not(.auth-page) input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not(.form-input):not(.btn):not(.ds-input),
body:not(.auth-page) select:not(.form-input):not(.ds-select),
body:not(.auth-page) textarea:not(.form-input):not(.ds-textarea) {
  width: 100%;
  min-height: 44px;
  padding: 11px 14px;
  background: var(--ds-glass, rgba(255,255,255,0.04));
  border: 1px solid var(--ds-border, rgba(255,255,255,0.1));
  border-radius: var(--radius-pill);
  color: var(--ds-text, #f4f5fb);
  font-family: inherit;
  font-size: 0.94rem;
  font-weight: 500;
  line-height: 1.4;
  transition:
    border-color var(--transition-normal),
    background-color var(--transition-normal),
    box-shadow var(--transition-normal);
  outline: none;
}
body:not(.auth-page) input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not(.form-input):not(.btn):not(.ds-input):hover,
body:not(.auth-page) select:not(.form-input):not(.ds-select):hover,
body:not(.auth-page) textarea:not(.form-input):not(.ds-textarea):hover {
  border-color: var(--ds-border-strong, rgba(255,255,255,0.18));
}
body:not(.auth-page) input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not(.form-input):not(.btn):not(.ds-input):focus-visible,
body:not(.auth-page) select:not(.form-input):not(.ds-select):focus-visible,
body:not(.auth-page) textarea:not(.form-input):not(.ds-textarea):focus-visible {
  border-color: var(--ds-border-accent);
  background: var(--ds-glass-strong, rgba(255,255,255,0.07));
  box-shadow: 0 0 0 4px var(--primary-glow);
}
body:not(.auth-page) textarea:not(.form-input):not(.ds-textarea) {
  min-height: 110px;
  resize: vertical;
}
body:not(.auth-page) ::placeholder {
  color: var(--ds-text-subtle, color-mix(in srgb, var(--ds-text, #fff) 35%, transparent));
}

/* Custom select chevron (CSS-only, no SVG dataURI) */
body:not(.auth-page) select:not(.form-input):not(.ds-select) {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 32px;
  background-image:
    linear-gradient(45deg,  transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - 16px) 55%,
    calc(100% - 11px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

/* Modernise checkbox + radio defaults (without JS-relevant attrs). */
body:not(.auth-page) input[type="checkbox"]:not(.no-ds),
body:not(.auth-page) input[type="radio"]:not(.no-ds) {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1px solid var(--ds-border-strong, rgba(255,255,255,0.2));
  background: var(--ds-glass, rgba(255,255,255,0.04));
  border-radius: 5px;
  display: inline-grid;
  place-content: center;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
  vertical-align: middle;
}
body:not(.auth-page) input[type="radio"]:not(.no-ds) { border-radius: 50%; }

body:not(.auth-page) input[type="checkbox"]:not(.no-ds):checked,
body:not(.auth-page) input[type="radio"]:not(.no-ds):checked {
  background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 70%, var(--accent)));
  border-color: transparent;
}
body:not(.auth-page) input[type="checkbox"]:not(.no-ds):checked::after {
  content: "";
  width: 10px;
  height: 6px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translateY(-1px) rotate(-45deg);
}
body:not(.auth-page) input[type="radio"]:not(.no-ds):checked::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
}
body:not(.auth-page) input[type="checkbox"]:not(.no-ds):focus-visible,
body:not(.auth-page) input[type="radio"]:not(.no-ds):focus-visible {
  outline: 2px solid color-mix(in srgb, var(--primary) 70%, white);
  outline-offset: 2px;
}

/* Light-theme equivalents for the global form layer */
[data-theme="light"] body:not(.auth-page) input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not(.form-input):not(.btn):not(.ds-input),
[data-theme="light"] body:not(.auth-page) select:not(.form-input):not(.ds-select),
[data-theme="light"] body:not(.auth-page) textarea:not(.form-input):not(.ds-textarea) {
  background: rgba(255,255,255,0.7);
  border-color: var(--ds-border, rgba(20,25,50,0.12));
  color: var(--ds-text, #1b1d2a);
}

/* ════════════════════════════════════════════════════════════════════
   TABLES — modern data table optic
   ════════════════════════════════════════════════════════════════════ */

body:not(.auth-page) table:not(.no-ds) {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--ds-surface, rgba(20, 22, 38, 0.72));
  border: 1px solid var(--ds-border-strong, rgba(255,255,255,0.12));
  border-radius: var(--radius-2xl, 22px);
  overflow: hidden;
  -webkit-backdrop-filter: blur(18px);
          backdrop-filter: blur(18px);
  box-shadow: var(--shadow-soft);
  font-size: 0.92rem;
}
body:not(.auth-page) table:not(.no-ds) thead th {
  text-align: left;
  padding: 14px 18px;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: var(--tracking-wide, 0.04em);
  text-transform: uppercase;
  color: var(--ds-text-muted, #aab1c8);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--primary) 14%, transparent),
    color-mix(in srgb, var(--primary) 6%,  transparent));
  border-bottom: 1px solid var(--ds-border, rgba(255,255,255,0.1));
}
body:not(.auth-page) table:not(.no-ds) tbody td {
  padding: 13px 18px;
  border-top: 1px solid var(--ds-border, rgba(255,255,255,0.06));
  color: var(--ds-text, #f4f5fb);
}
body:not(.auth-page) table:not(.no-ds) tbody tr {
  transition: background-color .18s ease;
}
body:not(.auth-page) table:not(.no-ds) tbody tr:hover {
  background: var(--ds-glass, rgba(255,255,255,0.04));
}
body:not(.auth-page) table:not(.no-ds) tbody tr:first-child td {
  border-top: none;
}

/* Mobile: turn off horizontal scroll for tables that go wider than viewport */
@media (max-width: 720px) {
  body:not(.auth-page) table:not(.no-ds) {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

[data-theme="light"] body:not(.auth-page) table:not(.no-ds) {
  background: var(--ds-surface-2, rgba(255,255,255,0.94));
  border-color: var(--ds-border-strong, rgba(20,25,50,0.14));
}
[data-theme="light"] body:not(.auth-page) table:not(.no-ds) thead th {
  color: var(--ds-text-muted, #4d5266);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--primary) 12%, transparent),
    color-mix(in srgb, var(--primary) 5%,  transparent));
}
[data-theme="light"] body:not(.auth-page) table:not(.no-ds) tbody td {
  color: var(--ds-text, #1b1d2a);
}
[data-theme="light"] body:not(.auth-page) table:not(.no-ds) tbody tr:hover {
  background: rgba(20,25,50,0.04);
}

/* ════════════════════════════════════════════════════════════════════
   MODALS — backdrop blur + glass panel
   Targets the `.modal*` family used across hub/instance/admin pages.
   ════════════════════════════════════════════════════════════════════ */

body:not(.auth-page) .modal-backdrop,
body:not(.auth-page) .modal-overlay {
  background: color-mix(in srgb, var(--ds-bg, #06060f) 70%, transparent) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
          backdrop-filter: blur(14px) saturate(1.2);
}

body:not(.auth-page) .modal-card,
body:not(.auth-page) .modal-content,
body:not(.auth-page) .modal-panel {
  background: var(--ds-surface-2, rgba(28, 30, 50, 0.92));
  border: 1px solid var(--ds-border-strong, rgba(255,255,255,0.14));
  border-radius: var(--radius-2xl, 24px);
  -webkit-backdrop-filter: blur(28px) saturate(1.6);
          backdrop-filter: blur(28px) saturate(1.6);
  box-shadow:
    var(--shadow-2xl, 0 36px 80px -28px rgba(0,0,0,0.7)),
    inset 0 1px 0 color-mix(in srgb, var(--ds-text, #fff) 8%, transparent);
}

[data-theme="light"] body:not(.auth-page) .modal-card,
[data-theme="light"] body:not(.auth-page) .modal-content,
[data-theme="light"] body:not(.auth-page) .modal-panel {
  background: var(--ds-surface-2, #ffffff);
  border-color: var(--ds-border-strong, rgba(20,25,50,0.14));
}

/* ════════════════════════════════════════════════════════════════════
   SCROLLBARS — slim futuristic
   ════════════════════════════════════════════════════════════════════ */

body:not(.auth-page) * {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--primary) 35%, transparent) transparent;
}
body:not(.auth-page) *::-webkit-scrollbar { width: 10px; height: 10px; }
body:not(.auth-page) *::-webkit-scrollbar-track { background: transparent; }
body:not(.auth-page) *::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--primary) 32%, transparent);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
body:not(.auth-page) *::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--primary) 55%, transparent);
  background-clip: padding-box;
  border: 2px solid transparent;
}

/* ════════════════════════════════════════════════════════════════════
   FOCUS RING — global default for keyboard navigation
   ════════════════════════════════════════════════════════════════════ */

body:not(.auth-page) :focus-visible {
  outline: 2px solid color-mix(in srgb, var(--primary) 70%, white);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ════════════════════════════════════════════════════════════════════
   RESPONSIVE — desktop / tablet / mobile container tuning
   ════════════════════════════════════════════════════════════════════ */

body:not(.auth-page) .container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 32px);
}

@media (max-width: 1024px) {
  body:not(.auth-page) {
    background-size: 200% 200%;
  }
}
@media (max-width: 640px) {
  body:not(.auth-page) .btn,
  body:not(.auth-page) .hub-nav-btn { padding: 9px 18px; font-size: 0.9rem; }
  body:not(.auth-page) .btn-lg     { padding: 12px 24px; font-size: 0.96rem; }
}

/* ════════════════════════════════════════════════════════════════════
   REDUCED MOTION — kill non-essential animations / transitions
   ════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  body:not(.auth-page) .btn,
  body:not(.auth-page) .hub-nav-btn,
  body:not(.auth-page) .card,
  body:not(.auth-page) .feature-card,
  body:not(.auth-page) .pricing-card,
  body:not(.auth-page) .testimonial-card,
  body:not(.auth-page) .ho-card,
  body:not(.auth-page) .navbar,
  body:not(.auth-page) .hub-navbar,
  body:not(.auth-page) .dash-navbar,
  body:not(.auth-page) .ha-navbar {
    transition: none !important;
  }
  body:not(.auth-page) .btn:hover,
  body:not(.auth-page) .card:hover,
  body:not(.auth-page) .feature-card:hover,
  body:not(.auth-page) .pricing-card:hover {
    transform: none !important;
  }
}