/* ==========================================================================
   EVPS-1000X Design Tokens
   Enterprise VPS Solutions — WHMCS Theme System
   --------------------------------------------------------------------------
   Source-of-truth design tokens.
   All component CSS reads from these CSS custom properties.
   Theme switching is achieved by overriding [data-theme="light"].
   Density switching is achieved by overriding [data-density="compact"].
   --------------------------------------------------------------------------
   File:    assets/css/evps-1000x-tokens.css
   Loaded:  client area, orderform, and admin templates
   Version: 1.0.0
   License: Proprietary — Enterprise VPS Solutions LLC
   ========================================================================== */

:root {
  /* ── Brand & Primary Palette ─────────────────────────────────────────── */
  --evps-primary:        #3b6cf6;          /* Cobalt — primary actions, links */
  --evps-primary-hover:  #2f5cdf;
  --evps-primary-active: #2750c8;
  --evps-primary-soft:   rgba(59, 108, 246, 0.14);
  --evps-primary-ring:   rgba(59, 108, 246, 0.36);

  --evps-secondary:      #14b8a6;          /* Teal — security/health accent */
  --evps-secondary-soft: rgba(20, 184, 166, 0.14);

  --evps-accent:         #8b5cf6;          /* Violet — AI / premium accent */
  --evps-accent-soft:    rgba(139, 92, 246, 0.14);

  /* Readable label colour for fills of each brand colour (overridden per-brand
     by evps-1000x-custom.css via luminance). Defaults sized for the default
     primary/accent so accent buttons never ship sub-AA white-on-light. */
  --evps-on-primary:     #ffffff;
  --evps-on-accent:      #ffffff;

  /* ── Status / Signal ─────────────────────────────────────────────────── */
  --evps-success:        #2bb673;
  --evps-success-soft:   rgba(43, 182, 115, 0.14);
  --evps-warning:        #f0b429;
  --evps-warning-soft:   rgba(240, 180, 41, 0.16);
  --evps-danger:         #e23d51;
  --evps-danger-soft:    rgba(226, 61, 81, 0.14);
  --evps-info:           #3b6cf6;
  --evps-info-soft:      rgba(59, 108, 246, 0.14);

  /* Status TEXT colors. On dark surfaces the base hue is already legible
     (16:1+ for #2bb673 on #0a0c12). The light-theme override block re-
     declares these to a darker variant so badge / chip / sidebar accent
     text meets WCAG AA on white surfaces too. */
  --evps-success-text:   var(--evps-success);
  --evps-warning-text:   var(--evps-warning);
  --evps-danger-text:    var(--evps-danger);
  --evps-info-text:      var(--evps-info);
  --evps-accent-text:    var(--evps-accent);

  /* ── Surfaces (Dark default) ────────────────────────────────────────── */
  --evps-bg:             #0a0c12;          /* App background */
  --evps-bg-elevated:    #0e1118;          /* Slightly lifted (modals overlay base) */
  --evps-surface:        #12161f;          /* Card surface 1 */
  --evps-surface-2:      #181d28;          /* Card surface 2 (raised) */
  --evps-surface-3:      #1f2533;          /* Hover / selected */
  --evps-surface-inset:  #0c0f16;          /* Inputs, code blocks, wells */

  --evps-border:         #232a39;
  --evps-border-strong:  #2e3648;
  --evps-border-subtle:  #1a2030;

  /* ── Text ────────────────────────────────────────────────────────────── */
  --evps-text:           #e8ecf5;
  --evps-text-muted:     #9aa3b8;
  --evps-text-dim:       #5d667d;
  --evps-text-inverse:   #0a0c12;
  /* "soft" body text — used by ServiceTabRenderer empty-states, the onboarding
     tour, and whois output. It was referenced as var(--evps-text-soft,#475569)
     but never DEFINED, so it fell back to a dark slate in BOTH modes and was
     unreadable (2.2:1) on dark surfaces. Define it mode-aware. */
  --evps-text-soft:      #aab3c5;

  /* ── Chart palette (color-blind safe-ish, sequence-stable) ───────────── */
  --evps-chart-1: #3b6cf6;
  --evps-chart-2: #14b8a6;
  --evps-chart-3: #f0b429;
  --evps-chart-4: #e23d51;
  --evps-chart-5: #8b5cf6;
  --evps-chart-6: #2bb673;
  --evps-chart-7: #ec4899;
  --evps-chart-8: #06b6d4;

  /* ── Typography ──────────────────────────────────────────────────────── */
  --evps-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --evps-font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --evps-font-display: "Inter", system-ui, sans-serif;

  --evps-fs-xs:    11px;
  --evps-fs-sm:    12px;
  --evps-fs-base:  14px;
  --evps-fs-md:    15px;
  --evps-fs-lg:    17px;
  --evps-fs-xl:    20px;
  --evps-fs-2xl:   24px;
  --evps-fs-3xl:   30px;
  --evps-fs-4xl:   38px;
  --evps-fs-5xl:   48px;

  --evps-fw-regular:  400;
  --evps-fw-medium:   500;
  --evps-fw-semibold: 600;
  --evps-fw-bold:     700;

  --evps-lh-tight:  1.15;
  --evps-lh-snug:   1.3;
  --evps-lh-normal: 1.5;
  --evps-lh-relaxed:1.7;

  --evps-tracking-tight: -0.015em;
  --evps-tracking-normal: 0;
  --evps-tracking-wide:   0.03em;
  --evps-tracking-caps:   0.08em;

  /* ── Spacing (4-pt grid) ─────────────────────────────────────────────── */
  --evps-space-0:  0;
  --evps-space-1:  4px;
  --evps-space-2:  8px;
  --evps-space-3:  12px;
  --evps-space-4:  16px;
  --evps-space-5:  20px;
  --evps-space-6:  24px;
  --evps-space-7:  32px;
  --evps-space-8:  40px;
  --evps-space-9:  48px;
  --evps-space-10: 64px;
  --evps-space-11: 80px;
  --evps-space-12: 96px;

  /* ── Radius ──────────────────────────────────────────────────────────── */
  --evps-radius-xs: 3px;
  --evps-radius-sm: 6px;
  --evps-radius-md: 8px;
  --evps-radius-lg: 12px;
  --evps-radius-xl: 16px;
  --evps-radius-2xl: 22px;
  --evps-radius-pill: 999px;

  /* ── Shadow ──────────────────────────────────────────────────────────── */
  --evps-shadow-xs:  0 1px 1px rgba(0,0,0,0.32);
  --evps-shadow-sm:  0 1px 2px rgba(0,0,0,0.36), 0 0 0 1px rgba(255,255,255,0.02) inset;
  --evps-shadow-md:  0 8px 24px -6px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.4);
  --evps-shadow-lg:  0 24px 48px -12px rgba(0,0,0,0.55), 0 4px 12px rgba(0,0,0,0.4);
  --evps-shadow-xl:  0 32px 80px -20px rgba(0,0,0,0.65);
  --evps-shadow-glow:0 0 0 1px rgba(59,108,246,0.4), 0 0 24px rgba(59,108,246,0.18);

  /* ── Z-index scale ───────────────────────────────────────────────────── */
  --evps-z-base:       0;
  --evps-z-sticky:     50;
  --evps-z-dropdown:   200;
  --evps-z-overlay:    400;
  --evps-z-drawer:     500;
  --evps-z-modal:      600;
  --evps-z-toast:      700;
  --evps-z-tooltip:    800;
  --evps-z-cmdk:       900;
  --evps-z-ai:         950;

  /* ── Breakpoints (used in JS where needed) ───────────────────────────── */
  --evps-bp-sm:  640px;
  --evps-bp-md:  768px;
  --evps-bp-lg:  1024px;
  --evps-bp-xl:  1280px;
  --evps-bp-2xl: 1536px;

  /* ── Motion ──────────────────────────────────────────────────────────── */
  --evps-ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --evps-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --evps-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --evps-dur-fast:    120ms;
  --evps-dur-base:    200ms;
  --evps-dur-slow:    320ms;

  /* ── Layout ──────────────────────────────────────────────────────────── */
  --evps-content-max:      1320px;
  --evps-sidebar-w:        252px;
  --evps-sidebar-w-sm:     64px;
  --evps-topbar-h:         56px;
  --evps-topbar-h-admin:   52px;

  /* ── Component sizing ────────────────────────────────────────────────── */
  --evps-control-h-sm: 28px;
  --evps-control-h-md: 36px;
  --evps-control-h-lg: 44px;
  --evps-control-px:   12px;

  /* ── Density-driven (overridden by [data-density]) ───────────────────── */
  --evps-row-py:       12px;
  --evps-card-pad:     20px;
  --evps-section-gap:  24px;
}

/* ── Compact density overrides ─────────────────────────────────────────── */
[data-density="compact"] {
  --evps-row-py:       8px;
  --evps-card-pad:     14px;
  --evps-section-gap:  16px;
  --evps-fs-base:      13px;
  --evps-control-h-md: 32px;
}

/* ── Light theme overrides ─────────────────────────────────────────────── */
[data-theme="light"] {
  --evps-bg:             #f4f6fb;
  --evps-bg-elevated:    #ffffff;
  --evps-surface:        #ffffff;
  --evps-surface-2:      #f8fafc;
  --evps-surface-3:      #eef2f8;
  --evps-surface-inset:  #f1f4f9;

  --evps-border:         #dde3ee;
  --evps-border-strong:  #c5cfdf;
  --evps-border-subtle:  #e8edf5;

  --evps-text:           #0e1422;
  --evps-text-muted:     #4d5567;   /* WCAG AA: 7.4:1 on white surface */
  --evps-text-dim:       #5e6878;   /* WCAG AA: 5.6:1 on white surface */
  --evps-text-soft:      #475569;   /* WCAG AA: ~7:1 on white surface */
  --evps-text-inverse:   #ffffff;

  --evps-primary-soft:   rgba(59, 108, 246, 0.10);
  --evps-secondary-soft: rgba(20, 184, 166, 0.10);
  --evps-accent-soft:    rgba(139, 92, 246, 0.10);
  --evps-success-soft:   rgba(43, 182, 115, 0.14);
  --evps-warning-soft:   rgba(240, 180, 41, 0.20);
  --evps-danger-soft:    rgba(226, 61, 81, 0.12);
  --evps-info-soft:      rgba(59, 108, 246, 0.10);

  /* Status text colors that meet 4.5:1 on a light tinted-soft pill or on
     a plain --evps-surface (#fff). The base --evps-success / --evps-warning
     etc. tokens are tuned for *dark* surfaces; in light mode, badge/chip/
     icon text needs noticeably darker variants. */
  --evps-success-text:   #16734a;   /* 5.4:1 on success-soft, 6.7:1 on white */
  --evps-warning-text:   #8a5a00;   /* 5.5:1 on warning-soft, 6.6:1 on white */
  --evps-danger-text:    #b1212f;   /* 5.0:1 on danger-soft, 5.6:1 on white  */
  --evps-info-text:      #1c4eda;   /* 5.4:1 on info-soft, 6.4:1 on white   */
  --evps-accent-text:    #5d2bd6;   /* 5.7:1 on white                       */

  --evps-shadow-xs:  0 1px 1px rgba(15, 23, 42, 0.04);
  --evps-shadow-sm:  0 1px 2px rgba(15, 23, 42, 0.06), 0 0 0 1px rgba(15, 23, 42, 0.04);
  --evps-shadow-md:  0 8px 24px -6px rgba(15, 23, 42, 0.10), 0 2px 6px rgba(15, 23, 42, 0.06);
  --evps-shadow-lg:  0 24px 48px -12px rgba(15, 23, 42, 0.18);
  --evps-shadow-xl:  0 32px 80px -20px rgba(15, 23, 42, 0.20);
}

/* ── Auto theme follows the OS (no-JS + "Auto" button) ─────────────────────
   Previously theme was JS-only, so no-JS visitors were locked to the dark
   default and "Auto" was inert. Mirror the light token block under
   prefers-color-scheme:light for auto / unset-theme. An explicit
   [data-theme="dark"|"light"] (set by the switcher's cookie+JS) still wins
   because it is a more specific selector outside this media query. */
@media (prefers-color-scheme: light) {
  html[data-theme="auto"], html:not([data-theme]) {
    --evps-bg:#f4f6fb; --evps-bg-elevated:#ffffff;
    --evps-surface:#ffffff; --evps-surface-2:#f8fafc; --evps-surface-3:#eef2f8; --evps-surface-inset:#f1f4f9;
    --evps-border:#dde3ee; --evps-border-strong:#c5cfdf; --evps-border-subtle:#e8edf5;
    --evps-text:#0e1422; --evps-text-muted:#4d5567; --evps-text-dim:#5e6878; --evps-text-soft:#475569; --evps-text-inverse:#ffffff;
    --evps-primary-soft:rgba(59,108,246,.10); --evps-secondary-soft:rgba(20,184,166,.10); --evps-accent-soft:rgba(139,92,246,.10);
    --evps-success-soft:rgba(43,182,115,.14); --evps-warning-soft:rgba(240,180,41,.20); --evps-danger-soft:rgba(226,61,81,.12); --evps-info-soft:rgba(59,108,246,.10);
    --evps-success-text:#16734a; --evps-warning-text:#8a5a00; --evps-danger-text:#b1212f; --evps-info-text:#1c4eda; --evps-accent-text:#5d2bd6;
    --evps-shadow-xs:0 1px 1px rgba(15,23,42,.04);
    --evps-shadow-sm:0 1px 2px rgba(15,23,42,.06),0 0 0 1px rgba(15,23,42,.04);
    --evps-shadow-md:0 8px 24px -6px rgba(15,23,42,.10),0 2px 6px rgba(15,23,42,.06);
    --evps-shadow-lg:0 24px 48px -12px rgba(15,23,42,.18);
    --evps-shadow-xl:0 32px 80px -20px rgba(15,23,42,.20);
  }
}

/* ── Reduced motion ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --evps-dur-fast: 0ms;
    --evps-dur-base: 0ms;
    --evps-dur-slow: 0ms;
  }
}

/* ==========================================================================
   ACCESSIBILITY / COLOUR-BLIND-SAFE MODE   (toggle: html[data-evps-a11y="on"])
   --------------------------------------------------------------------------
   Remaps the semantic hues to a colour-vision-deficiency-safe set derived from
   the Okabe-Ito palette (Okabe & Ito, 2008) — blue / teal / vermillion / amber
   / reddish-purple, which stay distinguishable under deuteranopia, protanopia
   AND tritanopia (red+green, the classic clash, become blue-teal vs vermillion
   which differ in BOTH hue and luminance). Plus non-colour cues: underlined
   links + a strong focus ring, so meaning never depends on colour alone
   (WCAG 2.2 SC 1.4.1 Use of Color, 2.4.7 Focus Visible, 1.4.11 Non-text Contrast).
   !important on the custom-property values guarantees they win over the
   light/dark token blocks regardless of selector specificity.
   ========================================================================== */
html[data-evps-a11y="on"] {
  --evps-primary:        #0072B2 !important;
  --evps-primary-hover:  #005f93 !important;
  --evps-primary-active: #004e79 !important;
  --evps-primary-soft:   rgba(0,114,178,.16) !important;
  --evps-primary-ring:   rgba(0,114,178,.55) !important;
  --evps-info:           #0072B2 !important;
  --evps-info-soft:      rgba(0,114,178,.16) !important;
  --evps-success:        #009E73 !important;
  --evps-success-soft:   rgba(0,158,115,.20) !important;
  --evps-warning:        #E69F00 !important;
  --evps-warning-soft:   rgba(230,159,0,.22) !important;
  --evps-danger:         #D55E00 !important;
  --evps-danger-soft:    rgba(213,94,0,.20) !important;
  --evps-accent:         #CC79A7 !important;
  --evps-accent-soft:    rgba(204,121,167,.20) !important;
  --evps-link:           #7cc4ff !important; /* bright link for dark surfaces */
}
/* Light surfaces: darker text variants so the same hues still pass WCAG AA on white */
html[data-theme="light"][data-evps-a11y="on"] {
  --evps-link:          #005a8c !important;
  --evps-info-text:     #005a8c !important;
  --evps-success-text:  #00614a !important;
  --evps-warning-text:  #7a5400 !important;
  --evps-danger-text:   #9e4500 !important;
  --evps-accent-text:   #8a4f72 !important;
}
/* Non-colour cues — scoped so we DON'T uglify nav/cards/buttons.
   Underline only links inside body prose (where colour alone would distinguish
   a link from text), plus any link on keyboard focus. WCAG 1.4.1 / 2.4.7. */
html[data-evps-a11y="on"] :is(p, li, dd, td, blockquote, .ai-chat-bubble) a:not([class]):not([role="button"]) {
  text-decoration: underline !important;
  text-underline-offset: 2px;
}
html[data-evps-a11y="on"] a:focus-visible,
html[data-evps-a11y="on"] a:hover:not([class*="card"]):not([class*="nav"]):not([class*="menu"]) {
  text-decoration: underline !important;
}
html[data-evps-a11y="on"] :focus-visible {
  outline: 3px solid var(--evps-primary) !important;
  outline-offset: 2px !important;
}
/* CVD non-colour cue where it matters most: status pills get a leading glyph so
   success/warning/danger are not distinguished by colour alone. ::before only —
   no layout shift, only on recognised status classes. */
html[data-evps-a11y="on"] .label-success::before,
html[data-evps-a11y="on"] .badge-success::before,
html[data-evps-a11y="on"] .status-active::before,
html[data-evps-a11y="on"] .text-success::before { content: "\2713\00a0"; font-weight: 700; }
html[data-evps-a11y="on"] .label-warning::before,
html[data-evps-a11y="on"] .badge-warning::before,
html[data-evps-a11y="on"] .text-warning::before { content: "\26A0\00a0"; font-weight: 700; }
html[data-evps-a11y="on"] .label-danger::before,
html[data-evps-a11y="on"] .badge-danger::before,
html[data-evps-a11y="on"] .status-cancelled::before,
html[data-evps-a11y="on"] .text-danger::before { content: "\2715\00a0"; font-weight: 700; }
/* The toggle button's active state */
html[data-evps-a11y="on"] [data-evps-a11y-toggle] {
  background: var(--evps-primary-soft) !important;
  color: var(--evps-primary) !important;
}

/* ==========================================================================
   HIGH-CONTRAST MODE  (toggle: html[data-evps-contrast="high"])
   --------------------------------------------------------------------------
   A deliberately BOLD, obviously-different mode for low-vision users: pure
   black/white surfaces, max-contrast text (white-on-black / black-on-white,
   ~21:1), and visible borders on every surface so structure never depends on
   subtle fills. Placed AFTER the colour-blind block so when both are enabled
   the high-contrast palette wins. WCAG 1.4.6 (Contrast AAA) / 1.4.11.
   ========================================================================== */
html[data-evps-contrast="high"] {
  --evps-bg: #000 !important; --evps-bg-elevated: #000 !important;
  --evps-surface: #000 !important; --evps-surface-2: #0d0d0d !important;
  --evps-surface-3: #1a1a1a !important; --evps-surface-inset: #000 !important;
  --evps-border: #fff !important; --evps-border-strong: #fff !important; --evps-border-subtle: #c8c8c8 !important;
  --evps-text: #fff !important; --evps-text-muted: #fff !important; --evps-text-dim: #dcdcdc !important;
  --evps-link: #7cc4ff !important;
  --evps-primary: #4ea3ff !important; --evps-primary-hover: #79bbff !important; --evps-primary-soft: rgba(78,163,255,.22) !important; --evps-primary-ring: rgba(124,196,255,.6) !important;
  --evps-info: #4ea3ff !important;
  --evps-success: #2ee6a6 !important; --evps-success-text: #2ee6a6 !important; --evps-success-soft: rgba(46,230,166,.20) !important;
  --evps-warning: #ffd23f !important; --evps-warning-text: #ffd23f !important; --evps-warning-soft: rgba(255,210,63,.22) !important;
  --evps-danger:  #ff6b6b !important; --evps-danger-text: #ff6b6b !important; --evps-danger-soft: rgba(255,107,107,.20) !important;
  --evps-accent:  #d59be0 !important;
  --evps-shadow-xs: none !important; --evps-shadow-sm: none !important; --evps-shadow-md: none !important; --evps-shadow-lg: none !important;
}
html[data-theme="light"][data-evps-contrast="high"] {
  --evps-bg: #fff !important; --evps-bg-elevated: #fff !important;
  --evps-surface: #fff !important; --evps-surface-2: #f1f1f1 !important;
  --evps-surface-3: #e6e6e6 !important; --evps-surface-inset: #fff !important;
  --evps-border: #000 !important; --evps-border-strong: #000 !important; --evps-border-subtle: #3a3a3a !important;
  --evps-text: #000 !important; --evps-text-muted: #000 !important; --evps-text-dim: #1a1a1a !important;
  --evps-link: #0033cc !important;
  --evps-primary: #0033cc !important; --evps-primary-hover: #0029a3 !important; --evps-primary-soft: rgba(0,51,204,.14) !important;
  --evps-info: #0033cc !important;
  --evps-success-text: #00592b !important; --evps-warning-text: #6b4500 !important; --evps-danger-text: #b00000 !important;
}
/* Make structure explicit: visible borders on the major surfaces/controls. */
html[data-evps-contrast="high"] :is(input, select, textarea, button, .btn, .card, .panel, .evps-card, [class*="-card"], table, th, td) {
  border: 1px solid var(--evps-border) !important;
}
html[data-evps-contrast="high"] :focus-visible {
  outline: 3px solid var(--evps-link) !important; outline-offset: 2px !important;
}
html[data-evps-contrast="high"] [data-evps-a11y-toggle],
html[data-evps-contrast="high"] #evps-a11y-trigger { box-shadow: inset 0 0 0 2px currentColor !important; }

/* ── Text-size control (data-evps-fontscale) ─────────────────────────────────
   Scales the EVPS type tokens AND the root font-size, so token-driven components
   and rem/em native elements both grow. Modest steps to avoid layout breakage. */
html[data-evps-fontscale="lg"] {
  font-size: 109%;
  --evps-fs-xs: 12px; --evps-fs-sm: 13px; --evps-fs-base: 15px; --evps-fs-md: 16px; --evps-fs-lg: 19px;
}
html[data-evps-fontscale="xl"] {
  font-size: 120%;
  --evps-fs-xs: 13px; --evps-fs-sm: 15px; --evps-fs-base: 17px; --evps-fs-md: 18px; --evps-fs-lg: 21px;
}

/* ── Dyslexia-friendly font + spacing (data-evps-dyslexia) ───────────────────
   Evidence points to letter/word spacing + line-height mattering as much as the
   typeface; we use a high-legibility system stack (no webfont dependency) plus
   generous spacing. Atkinson Hyperlegible is used if the user has it installed. */
html[data-evps-dyslexia="on"] body,
html[data-evps-dyslexia="on"] button,
html[data-evps-dyslexia="on"] input,
html[data-evps-dyslexia="on"] select,
html[data-evps-dyslexia="on"] textarea {
  font-family: "Atkinson Hyperlegible", "Comic Neue", Verdana, Tahoma, "Trebuchet MS", sans-serif !important;
  letter-spacing: 0.03em !important;
  word-spacing: 0.12em !important;
}
html[data-evps-dyslexia="on"] body { line-height: 1.7 !important; }
html[data-evps-dyslexia="on"] p,
html[data-evps-dyslexia="on"] li { max-width: 72ch; }

/* ── Skip-to-content link (visible only on keyboard focus) ───────────────────
   WCAG 2.4.1 Bypass Blocks. Injected as the first focusable element by evps-a11y.js. */
.evps-skip-link {
  position: fixed; top: -100px; left: 12px; z-index: 100000;
  background: var(--evps-primary, #0072B2); color: #fff;
  padding: 10px 16px; border-radius: 0 0 8px 8px;
  font: 600 14px/1 var(--evps-font-sans, system-ui, sans-serif);
  text-decoration: none; box-shadow: 0 4px 14px rgba(0,0,0,.35);
  transition: top .15s ease;
}
.evps-skip-link:focus { top: 0; outline: 3px solid #fff; outline-offset: 2px; }

/* ── Accessibility panel (popover built by evps-a11y.js) ─────────────────────── */
#evps-a11y-panel {
  width: 300px; max-width: calc(100vw - 16px);
  background: var(--evps-bg-elevated, #0e1118);
  color: var(--evps-text, #e8ecf5);
  border: 1px solid var(--evps-border, #232a39);
  border-radius: var(--evps-radius-lg, 12px);
  box-shadow: var(--evps-shadow-lg, 0 24px 48px -12px rgba(0,0,0,.55));
  padding: 14px; z-index: 100000;
  font-family: var(--evps-font-sans, system-ui, sans-serif);
}
#evps-a11y-panel[hidden] { display: none; }
.evps-a11y-panel__title { font-size: 14px; font-weight: 700; margin-bottom: 10px; color: var(--evps-text, #e8ecf5); }
.evps-a11y-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--evps-border-subtle, #1a2030); }
.evps-a11y-row:first-of-type { border-top: 0; }
.evps-a11y-row label { font-size: 13px; color: var(--evps-text-muted, #9aa3b8); }
.evps-a11y-note { margin: 10px 0 0; font-size: 11px; color: var(--evps-text-dim, #5d667d); }
.evps-a11y-switch {
  flex: none; width: 42px; height: 24px; border-radius: 999px;
  border: 1px solid var(--evps-border-strong, #2e3648); background: var(--evps-surface-2, #181d28);
  position: relative; cursor: pointer; padding: 0; transition: background .15s ease, border-color .15s ease;
}
.evps-a11y-switch__dot { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left .15s ease; }
.evps-a11y-switch.is-on { background: var(--evps-primary, #0072B2); border-color: var(--evps-primary, #0072B2); }
.evps-a11y-switch.is-on .evps-a11y-switch__dot { left: 20px; }
.evps-a11y-fs { display: inline-flex; border: 1px solid var(--evps-border-strong, #2e3648); border-radius: 8px; overflow: hidden; }
.evps-a11y-fs button { background: var(--evps-surface-2, #181d28); color: var(--evps-text, #e8ecf5); border: 0; padding: 4px 12px; cursor: pointer; font-size: 13px; font-weight: 600; }
.evps-a11y-fs button + button { border-left: 1px solid var(--evps-border-strong, #2e3648); }
.evps-a11y-fs button:hover { background: var(--evps-surface-3, #1f2533); }

/* ── Windows High-Contrast / forced-colors: respect the OS palette ───────────── */
@media (forced-colors: active) {
  .evps-skip-link { background: Highlight; color: HighlightText; }
  .evps-a11y-switch.is-on { background: Highlight; }
  :focus-visible { outline: 3px solid Highlight !important; outline-offset: 2px; }
}

/* ── prefers-reduced-transparency: drop frosted-glass blur + force opaque ─────────
   Users who reduce transparency (OS setting) get solid surfaces instead of
   translucent/blurred panels. Removing the blur alone would leave a semi-opaque
   surface see-through, so we also pin the affected surfaces to the solid token.
   Also a battery/GPU win on low-power devices. */
@media (prefers-reduced-transparency: reduce) {
  *, *::before, *::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .evps-topbar,
  .evps-topbar__search input,
  .evps-cmdk__overlay,
  .evps-cmdk__panel,
  .evps-modal, .evps-modal__panel, .evps-modal__overlay,
  .evps-dropdown, .evps-popover, .evps-sheet, .evps-drawer,
  .evps-ai-drawer,
  .evps-appearance-panel, .evps-appearance-fab {
    background-color: var(--evps-surface, #101729) !important;
  }
}

/* ==========================================================================
   STYLE MANAGER TOKENS   (pages/stylemanager.php — Croster-parity editor)
   --------------------------------------------------------------------------
   Default declarations for the NEW custom properties the granular Style
   Manager can override (the writer in lib/Tokens.php re-declares only the
   ones an admin edits away from default, in evps-1000x-custom.css, which
   loads AFTER this file and therefore wins). Tokens that already existed
   above (--evps-radius-*, --evps-shadow-*, --evps-fs-*, --evps-sidebar-w,
   --evps-surface-2/-inset, --evps-primary-hover/-active) are NOT redeclared
   here — only the genuinely new ones, plus the consumer rules that bind every
   Style-Manager token to a real on-screen surface so editing a value has a
   visible effect.
   ========================================================================== */
:root {
  /* Per-semantic hover / active / gradient (primary already had hover/active) */
  --evps-secondary-hover: #0f9488;
  --evps-secondary-active: #0d8378;
  --evps-accent-hover:     #0fb6d4;
  --evps-accent-active:    #0c9cb8;
  --evps-success-hover:    #1f8f59;
  --evps-success-active:   #1a7a4c;
  --evps-warning-hover:    #c8930f;
  --evps-warning-active:   #a87b0c;
  --evps-danger-hover:     #bd2c3e;
  --evps-danger-active:    #a32634;

  --evps-primary-grad-from:   var(--evps-primary, #3b6cf6);
  --evps-primary-grad-to:     var(--evps-primary-hover, #2f5cdf);
  --evps-secondary-grad-from: var(--evps-secondary, #14b8a6);
  --evps-secondary-grad-to:   var(--evps-secondary-hover, #0f9488);
  --evps-accent-grad-from:    var(--evps-accent, #22d3ee);
  --evps-accent-grad-to:      var(--evps-accent-hover, #0fb6d4);
  --evps-success-grad-from:   var(--evps-success, #2bb673);
  --evps-success-grad-to:     var(--evps-success-hover, #1f8f59);
  --evps-warning-grad-from:   var(--evps-warning, #f0b429);
  --evps-warning-grad-to:     var(--evps-warning-hover, #c8930f);
  --evps-danger-grad-from:    var(--evps-danger, #e23d51);
  --evps-danger-grad-to:      var(--evps-danger-hover, #bd2c3e);

  /* Button fills (8 styles x default/hover/active). Default to the matching
     semantic token so unedited buttons look identical to today. */
  --evps-btn-primary-bg:     var(--evps-primary, #3b6cf6);
  --evps-btn-primary-hover:  var(--evps-primary-hover, #2f5cdf);
  --evps-btn-primary-active: var(--evps-primary-active, #2750c8);
  --evps-btn-secondary-bg:     var(--evps-secondary, #14b8a6);
  --evps-btn-secondary-hover:  var(--evps-secondary-hover, #0f9488);
  --evps-btn-secondary-active: var(--evps-secondary-active, #0d8378);
  --evps-btn-success-bg:     var(--evps-success, #2bb673);
  --evps-btn-success-hover:  var(--evps-success-hover, #1f8f59);
  --evps-btn-success-active: var(--evps-success-active, #1a7a4c);
  --evps-btn-danger-bg:     var(--evps-danger, #e23d51);
  --evps-btn-danger-hover:  var(--evps-danger-hover, #bd2c3e);
  --evps-btn-danger-active: var(--evps-danger-active, #a32634);
  --evps-btn-warning-bg:     var(--evps-warning, #f0b429);
  --evps-btn-warning-hover:  var(--evps-warning-hover, #c8930f);
  --evps-btn-warning-active: var(--evps-warning-active, #a87b0c);
  --evps-btn-info-bg:     var(--evps-info, #3b6cf6);
  --evps-btn-info-hover:  var(--evps-primary-hover, #2f5cdf);
  --evps-btn-info-active: var(--evps-primary-active, #2750c8);
  --evps-btn-light-bg:     #f1f4f9;
  --evps-btn-light-hover:  #e2e8f1;
  --evps-btn-light-active: #d2dae6;
  --evps-btn-dark-bg:     #1f2533;
  --evps-btn-dark-hover:  #161c24;
  --evps-btn-dark-active: #0e1118;

  /* Typography extras */
  --evps-heading:        var(--evps-text, #e8ecf5);
  --evps-heading-weight: var(--evps-fw-bold, 700);
  --evps-link:           var(--evps-primary, #3b6cf6);
  --evps-link-hover:     var(--evps-primary-hover, #2f5cdf);

  /* General: logo sizing + billing-cycle discount badge */
  --evps-logo-w:         160px;
  --evps-logo-h:         40px;
  --evps-discount-bg:    var(--evps-success, #2bb673);
  --evps-discount-text:  #ffffff;

  /* Sections: caption / title / subtitle + product price + featured sticker */
  --evps-section-caption-color:  var(--evps-accent, #22d3ee);
  --evps-section-caption-size:   12px;
  --evps-section-title-color:    var(--evps-heading, var(--evps-text, #e8ecf5));
  --evps-section-title-size:     30px;
  --evps-section-subtitle-color: var(--evps-text-muted, #9aa3b8);
  --evps-section-subtitle-size:  16px;
  --evps-price-color:        var(--evps-text, #e8ecf5);
  --evps-price-size:         32px;
  --evps-price-cycle-color:  var(--evps-text-muted, #9aa3b8);
  --evps-featured-bg:        var(--evps-primary, #3b6cf6);
  --evps-featured-text:      var(--evps-on-primary, #ffffff);
}

/* ---- Consumer bindings: wire the Style-Manager tokens to real surfaces ----
   These augment (do not replace) the base component rules in evps-1000x.css.
   They are written here, in the token sheet, so the Style-Manager zone owns
   them without touching the shared component stylesheet. */

/* Buttons — bind each semantic variant to its SM token + add gradient option */
.evps-btn--primary   { background: var(--evps-btn-primary-bg); }
.evps-btn--primary:hover   { background: var(--evps-btn-primary-hover); }
.evps-btn--primary:active  { background: var(--evps-btn-primary-active); }
.evps-btn--secondary { background: var(--evps-btn-secondary-bg); color: var(--evps-on-secondary, #fff); }
.evps-btn--secondary:hover  { background: var(--evps-btn-secondary-hover); }
.evps-btn--secondary:active { background: var(--evps-btn-secondary-active); }
.evps-btn--success   { background: var(--evps-btn-success-bg); }
.evps-btn--success:hover   { background: var(--evps-btn-success-hover); }
.evps-btn--success:active  { background: var(--evps-btn-success-active); }
.evps-btn--danger    { background: var(--evps-btn-danger-bg); }
.evps-btn--danger:hover    { background: var(--evps-btn-danger-hover); }
.evps-btn--danger:active   { background: var(--evps-btn-danger-active); }
.evps-btn--warning   { background: var(--evps-btn-warning-bg); color: #0a0c12; }
.evps-btn--warning:hover   { background: var(--evps-btn-warning-hover); }
.evps-btn--warning:active  { background: var(--evps-btn-warning-active); }
.evps-btn--info      { background: var(--evps-btn-info-bg); color: #fff; }
.evps-btn--info:hover      { background: var(--evps-btn-info-hover); }
.evps-btn--info:active     { background: var(--evps-btn-info-active); }
.evps-btn--light     { background: var(--evps-btn-light-bg); color: #0a0c12; border-color: var(--evps-border, #232a39); }
.evps-btn--light:hover     { background: var(--evps-btn-light-hover); }
.evps-btn--light:active    { background: var(--evps-btn-light-active); }
.evps-btn--dark      { background: var(--evps-btn-dark-bg); color: #fff; }
.evps-btn--dark:hover      { background: var(--evps-btn-dark-hover); }
.evps-btn--dark:active     { background: var(--evps-btn-dark-active); }
/* Opt-in gradient buttons (used by aurora-pro experience + .evps-btn--grad) */
.evps-btn--grad,
.evps-btn--gradient {
  background: linear-gradient(135deg, var(--evps-primary-grad-from), var(--evps-primary-grad-to));
  color: var(--evps-on-primary, #fff);
  border-color: transparent;
}

/* Typography — headings + links honour the SM colour/weight tokens */
.evps-app h1, .evps-app h2, .evps-app h3, .evps-app h4, .evps-app h5, .evps-app h6,
.evps-skin h1, .evps-skin h2, .evps-skin h3, .evps-skin h4, .evps-skin h5, .evps-skin h6 {
  color: var(--evps-heading, var(--evps-text, #e8ecf5));
  font-weight: var(--evps-heading-weight, 700);
}
.evps-app a:not(.evps-btn):not(.btn),
.evps-skin a:not(.evps-btn):not(.btn) { color: var(--evps-link, var(--evps-primary, #3b6cf6)); }
.evps-app a:not(.evps-btn):not(.btn):hover,
.evps-skin a:not(.evps-btn):not(.btn):hover { color: var(--evps-link-hover, var(--evps-primary-hover, #2f5cdf)); }

/* General — client logo sizing */
.evps-app .evps-sidebar__logo,
.evps-app .evps-topbar__logo {
  max-width: var(--evps-logo-w, 160px);
  max-height: var(--evps-logo-h, 40px);
  width: auto;
  height: auto;
}

/* General — billing-cycle "save X%" discount badge */
.evps-app .evps-cycle-discount,
.evps-app .evps-discount-badge,
.evps-app .evps-badge--discount {
  background: var(--evps-discount-bg, var(--evps-success, #2bb673));
  color: var(--evps-discount-text, #fff);
  border-radius: var(--evps-radius-pill, 999px);
  padding: 2px 9px;
  font-size: var(--evps-fs-xs, 11px);
  font-weight: var(--evps-fw-semibold, 600);
}

/* Sections — eyebrow caption / title / subtitle */
.evps-app .evps-section__caption,
.evps-app .evps-section-caption {
  color: var(--evps-section-caption-color, var(--evps-accent, #22d3ee));
  font-size: var(--evps-section-caption-size, 12px);
  letter-spacing: var(--evps-tracking-caps, .08em);
  text-transform: uppercase;
  font-weight: var(--evps-fw-semibold, 600);
}
.evps-app .evps-section__title,
.evps-app .evps-section-title {
  color: var(--evps-section-title-color, var(--evps-heading, var(--evps-text, #e8ecf5)));
  font-size: var(--evps-section-title-size, 30px);
}
.evps-app .evps-section__subtitle,
.evps-app .evps-section-subtitle {
  color: var(--evps-section-subtitle-color, var(--evps-text-muted, #9aa3b8));
  font-size: var(--evps-section-subtitle-size, 16px);
}

/* Sections — product pricing */
.evps-app .evps-tier__price-amt,
.evps-app .evps-prod__price,
.evps-app .evps-option-card__price {
  color: var(--evps-price-color, var(--evps-text, #e8ecf5));
  font-size: var(--evps-price-size, 32px);
}
.evps-app .evps-tier__price-cycle,
.evps-app .evps-prod__cycle {
  color: var(--evps-price-cycle-color, var(--evps-text-muted, #9aa3b8));
}

/* Sections — featured "most popular" sticker / ribbon */
.evps-app .evps-tier__sticker,
.evps-app .evps-featured-sticker,
.evps-app .evps-tier__ribbon {
  background: var(--evps-featured-bg, var(--evps-primary, #3b6cf6));
  color: var(--evps-featured-text, var(--evps-on-primary, #fff));
  border-radius: var(--evps-radius-pill, 999px);
  padding: 3px 11px;
  font-size: var(--evps-fs-xs, 11px);
  font-weight: var(--evps-fw-bold, 700);
  letter-spacing: var(--evps-tracking-wide, .03em);
}