/**
 * NEXGLE PRODUCTION THEME LAYER
 * Real Two-Mode System:
 * - LIGHT MODE: White/Light Surfaces + Purple Brand Accents (#7C3AED) + Dark Text (#18181B)
 * - DARK MODE:  Black/Dark Surfaces + Purple Brand Accents (#7C3AED) + White Text (#FAFAFA)
 * Brand: Nexgle Purple is the universal brand color across BOTH modes.
 * Semantic status colors (Success=Green, Error=Red, Warning=Amber) and Third-Party Assets Preserved.
 */

/* ==========================================================================
   1. SHARED BRAND TOKENS (NEXGLE PURPLE IN BOTH MODES)
   ========================================================================== */
:root {
  /* Nexgle Core Brand Purple */
  --nexgle-primary: #7C3AED;
  --nexgle-primary-hover: #6D28D9;
  --nexgle-primary-active: #5B21B6;
  --primary: #7C3AED;
  --accent: #7C3AED;
  --theme-accent: #7C3AED;

  /* Tailwind brand scale overridden to Nexgle Purple (NO GREEN) */
  --brand-25: 250 249 255;
  --brand-50: 245 243 255;
  --brand-100: 237 233 254;
  --brand-200: 221 214 254;
  --brand-300: 196 181 253;
  --brand-400: 167 139 250;
  --brand-500: 124 58 237;
  --brand-600: 109 40 217;
  --brand-700: 91 33 182;
  --brand-800: 76 29 149;
  --brand-900: 59 7 100;
  --brand-950: 46 16 101;

  /* Platform theme engine brand purple */
  --gg-purple: 124 58 237;
  --gg-accent: 124 58 237;
  --gg-accent-press: 91 33 182;
  --gg-accent-deep: 76 29 149;
  --gg-on-accent: #FFFFFF;

  /* Semantic status colors: Success is now Nexgle Purple (NO PLATFORM GREEN) */
  --gg-green: 124 58 237;
  --gg-red: 239 68 68;
  --gg-yellow: 245 158 11;
  --gg-amber: 245 158 11;
  --gg-blue: 59 130 246;

  --gg-root: 15px;
}

/* ==========================================================================
   2. LIGHT MODE TOKENS & OVERRIDES
   ========================================================================== */
:root,
html:not(.dark),
html.light,
html:not(.dark) body,
html:not(.dark) .gg-app,
html:not(.dark) .gg-app.gg-app,
html:not(.dark) .gg-app.gg-app.gg-app,
html:not(.dark) .gg-shell,
html:not(.dark) .ggl-scope,
html:not(.dark) .ggl-site-shell {
  color-scheme: light;

  /* Standard design system tokens */
  --background: #FFFFFF;
  --surface: #FFFFFF;
  --card: #FFFFFF;
  --surface-soft: #FAFAFF;

  --foreground: #18181B;
  --text-primary: #18181B;
  --text-secondary: #71717A;
  --text-muted: #A1A1AA;

  --border: #E4E4E7;
  --border-soft: #F4F4F5;

  --primary-hover: #6D28D9;
  --accent-soft: #F5F3FF;

  --nexgle-bg: #FFFFFF;
  --nexgle-surface: #FFFFFF;
  --nexgle-surface-soft: #FAFAFF;
  --nexgle-card: #FFFFFF;

  --nexgle-text: #18181B;
  --nexgle-text-secondary: #71717A;
  --nexgle-text-muted: #A1A1AA;
  --nexgle-border: #E4E4E7;

  --nexgle-soft-purple: #F5F3FF;
  --nexgle-light-purple: #EDE9FE;
  --nexgle-purple-border: #DDD6FE;

  /* Internal platform engine light tokens */
  --gg-bg: #FFFFFF !important;
  --gg-surface: #FFFFFF !important;
  --gg-surface-raised: #FAFAFF !important;
  --gg-surface-sunken: #F4F4F5 !important;
  --gg-surface-high: #EDE9FE !important;
  --gg-card-bg: #FFFFFF !important;
  --gg-bg-solid: #FFFFFF !important;
  --gg-text: #18181B !important;
  --gg-text-rgb: 24 24 27 !important;
  --gg-bg-rgb: 255 255 255 !important;

  --gg-glass: rgba(24, 24, 27, 0.02) !important;
  --gg-glass-2: rgba(24, 24, 27, 0.015) !important;
  --gg-glass-hover: rgba(124, 58, 237, 0.06) !important;
  --gg-modal-glass: rgba(255, 255, 255, 0.98) !important;
  --gg-modal-input: #FFFFFF !important;
  --gg-modal-border: #E4E4E7 !important;
  --gg-border: #E4E4E7 !important;
  --gg-border-soft: #F4F4F5 !important;
  --gg-card-border: #E4E4E7 !important;

  --gg-t1: #18181B !important;
  --gg-t2: #52525B !important;
  --gg-t3: #71717A !important;
  --gg-t4: #A1A1AA !important;

  --gg-icon: #52525B !important;
  --gg-icon-soft: #71717A !important;

  --gg-accent-hover: 109 40 217 !important;
  --gg-accent-grad-1: #A78BFA !important;
  --gg-accent-grad-2: #7C3AED !important;
  --gg-accent-grad-3: #6D28D9 !important;
  --gg-accent-dim: rgba(124, 58, 237, 0.10) !important;
  --gg-accent-border: rgba(124, 58, 237, 0.25) !important;
  --gg-focus: rgba(124, 58, 237, 0.5) !important;
  --gg-focus-ring: 0 0 0 2px rgba(124, 58, 237, 0.35) !important;
  --gg-veil-rgb: 24 24 27 !important;
  --gg-popover-bg: #FFFFFF !important;
  --gg-popover-border: #E4E4E7 !important;
  --gg-wash: 124 58 237 !important;
  --gg-wash-1: 0.05 !important;
  --gg-wash-2: 0.03 !important;
}

/* ==========================================================================
   3. DARK MODE TOKENS & OVERRIDES
   ========================================================================== */
html.dark,
html.dark body,
html.dark .gg-app,
html.dark .gg-app.gg-app,
html.dark .gg-app.gg-app.gg-app,
html.dark .gg-shell,
html.dark .ggl-scope,
html.dark .ggl-site-shell {
  color-scheme: dark;

  /* Standard design system tokens */
  --background: #09090B;
  --surface: #111113;
  --card: #151518;
  --surface-soft: #18181B;

  --foreground: #FAFAFA;
  --text-primary: #FAFAFA;
  --text-secondary: #A1A1AA;
  --text-muted: #71717A;

  --border: #27272A;
  --border-soft: #1F1F23;

  --primary-hover: #8B5CF6;
  --accent-soft: rgba(124, 58, 237, 0.15);

  --nexgle-bg: #09090B;
  --nexgle-surface: #111113;
  --nexgle-surface-soft: #18181B;
  --nexgle-card: #151518;

  --nexgle-text: #FAFAFA;
  --nexgle-text-secondary: #A1A1AA;
  --nexgle-text-muted: #71717A;
  --nexgle-border: #27272A;

  --nexgle-soft-purple: rgba(124, 58, 237, 0.15);
  --nexgle-light-purple: rgba(124, 58, 237, 0.25);
  --nexgle-purple-border: rgba(124, 58, 237, 0.35);

  /* Internal platform engine dark tokens (Purple substituted for Green) */
  --gg-bg: #000000 !important;
  --gg-surface: #0a0a0c !important;
  --gg-surface-raised: #141416 !important;
  --gg-surface-sunken: #08080a !important;
  --gg-surface-high: #1e1e24 !important;
  --gg-card-bg: #111114 !important;
  --gg-bg-solid: #000000 !important;
  --gg-text: #ffffff !important;
  --gg-text-rgb: 255 255 255 !important;
  --gg-bg-rgb: 0 0 0 !important;

  --gg-glass: rgba(255, 255, 255, 0.03) !important;
  --gg-glass-2: rgba(255, 255, 255, 0.02) !important;
  --gg-glass-hover: rgba(124, 58, 237, 0.12) !important;
  --gg-modal-glass: rgba(18, 18, 22, 0.96) !important;
  --gg-modal-input: #18181c !important;
  --gg-modal-border: #27272a !important;
  --gg-border: rgba(255, 255, 255, 0.12) !important;
  --gg-border-soft: rgba(255, 255, 255, 0.08) !important;
  --gg-card-border: rgba(255, 255, 255, 0.12) !important;

  --gg-t1: rgba(255, 255, 255, 0.96) !important;
  --gg-t2: rgba(255, 255, 255, 0.68) !important;
  --gg-t3: rgba(255, 255, 255, 0.44) !important;
  --gg-t4: rgba(255, 255, 255, 0.22) !important;

  --gg-icon: rgba(255, 255, 255, 0.88) !important;
  --gg-icon-soft: rgba(255, 255, 255, 0.62) !important;

  --gg-accent-hover: 139 92 246 !important;
  --gg-accent-grad-1: #C084FC !important;
  --gg-accent-grad-2: #7C3AED !important;
  --gg-accent-grad-3: #6D28D9 !important;
  --gg-accent-dim: rgba(124, 58, 237, 0.18) !important;
  --gg-accent-border: rgba(124, 58, 237, 0.35) !important;
  --gg-focus: rgba(124, 58, 237, 0.6) !important;
  --gg-focus-ring: 0 0 0 2px rgba(124, 58, 237, 0.4) !important;
  --gg-veil-rgb: 0 0 0 !important;
  --gg-popover-bg: #111114 !important;
  --gg-popover-border: #27272a !important;
  --gg-wash: 124 58 237 !important;
  --gg-wash-1: 0.15 !important;
  --gg-wash-2: 0.10 !important;
}

/* ==========================================================================
   4. DOCUMENT & CANVAS RESET (TWO MODES)
   ========================================================================== */
html:not(.dark) body,
html.light body {
  background-color: #FFFFFF !important;
  color: #18181B !important;
}

html.dark body {
  background-color: #000000 !important;
  color: #FAFAFA !important;
}

html:not(.dark) .gg-app.gg-app.gg-shell,
html:not(.dark) .gg-app.gg-app {
  background: #FFFFFF !important;
  color: #18181B !important;
}

html.dark .gg-app.gg-app.gg-shell,
html.dark .gg-app.gg-app {
  background: #000000 !important;
  color: #FAFAFA !important;
}

html:not(.dark) .gg-app.gg-app > .gg-backdrop {
  background: radial-gradient(65% 55% at 100% 0, rgba(124, 58, 237, 0.04), transparent 70%),
              radial-gradient(55% 55% at 0 100%, rgba(124, 58, 237, 0.03), transparent 70%),
              #FFFFFF !important;
}

html.dark .gg-app.gg-app > .gg-backdrop {
  background: radial-gradient(65% 55% at 100% 0, rgba(124, 58, 237, 0.10), transparent 70%),
              radial-gradient(55% 55% at 0 100%, rgba(124, 58, 237, 0.08), transparent 70%),
              #000000 !important;
}

/* ==========================================================================
   5. SIDEBAR & NAVIGATION (TWO MODES)
   ========================================================================== */
html:not(.dark) .gg-sidebar,
html:not(.dark) aside.gg-sidebar {
  background-color: #FFFFFF !important;
  border-right: 1px solid #E4E4E7 !important;
  color: #18181B !important;
}

html.dark .gg-sidebar,
html.dark aside.gg-sidebar {
  background-color: #0a0a0c !important;
  border-right: 1px solid rgba(255, 255, 255, 0.10) !important;
  color: #FAFAFA !important;
}

html:not(.dark) .gg-sidebar-head,
html:not(.dark) .gg-sidebar-foot {
  background-color: #FFFFFF !important;
  border-color: #E4E4E7 !important;
}

html.dark .gg-sidebar-head,
html.dark .gg-sidebar-foot {
  background-color: #0a0a0c !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
}

html:not(.dark) .gg-nav-grouplabel {
  color: #A1A1AA !important;
}

html.dark .gg-nav-grouplabel {
  color: #71717A !important;
}

html:not(.dark) .gg-nav-item {
  color: #52525B !important;
}

html.dark .gg-nav-item {
  color: #A1A1AA !important;
}

html:not(.dark) .gg-nav-item:hover {
  background-color: #F5F3FF !important;
  color: #7C3AED !important;
}

html.dark .gg-nav-item:hover {
  background-color: rgba(124, 58, 237, 0.15) !important;
  color: #C084FC !important;
}

html:not(.dark) .gg-nav-item.gg-active,
html:not(.dark) .gg-nav-item.active {
  background-color: #EDE9FE !important;
  color: #7C3AED !important;
  font-weight: 600 !important;
}

html.dark .gg-nav-item.gg-active,
html.dark .gg-nav-item.active {
  background-color: rgba(124, 58, 237, 0.25) !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
}

html:not(.dark) .gg-nav-item.gg-active svg,
html:not(.dark) .gg-nav-item.active svg {
  color: #7C3AED !important;
}

html.dark .gg-nav-item.gg-active svg,
html.dark .gg-nav-item.active svg {
  color: #C084FC !important;
}

.gg-catpill {
  color: #7C3AED !important;
  border-color: rgba(124, 58, 237, 0.3) !important;
  background-color: rgba(124, 58, 237, 0.1) !important;
}

/* Upgrade Card in Sidebar */
html:not(.dark) .gg-upgrade {
  background: linear-gradient(135deg, #F5F3FF 0%, #EDE9FE 100%) !important;
  border: 1px solid #DDD6FE !important;
  color: #18181B !important;
}

html.dark .gg-upgrade {
  background: linear-gradient(135deg, #151024 0%, #1c1435 100%) !important;
  border: 1px solid rgba(124, 58, 237, 0.35) !important;
  color: #FAFAFA !important;
}

html:not(.dark) .gg-upgrade-title {
  color: #18181B !important;
}

html.dark .gg-upgrade-title {
  color: #FAFAFA !important;
}

html:not(.dark) .gg-upgrade-desc {
  color: #71717A !important;
}

html.dark .gg-upgrade-desc {
  color: #A1A1AA !important;
}

.gg-upgrade-btn,
.gg-upgrade-btn *,
.gg-upgrade-btn span,
.gg-upgrade-btn svg,
.gg-upgrade-btn a,
button.gg-upgrade-btn,
a.gg-upgrade-btn {
  background-color: #7C3AED !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  border-color: #7C3AED !important;
  fill: #FFFFFF !important;
}

.gg-upgrade-btn svg {
  stroke: #FFFFFF !important;
}

.gg-upgrade-btn:hover {
  background-color: #6D28D9 !important;
}

/* ==========================================================================
   6. TOPBAR & THEME TOGGLE (TWO MODES)
   ========================================================================== */
html:not(.dark) .gg-topbar {
  background-color: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid #E4E4E7 !important;
  color: #18181B !important;
}

html.dark .gg-topbar {
  background-color: rgba(10, 10, 12, 0.88) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
  color: #FAFAFA !important;
}

/* Seamless Top Search Integration (No outer border box - authentic Globalgle parity) */
.gg-topsearch {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

html:not(.dark) .gg-topsearch-btn {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #52525B !important;
  border-radius: 8px !important;
  transition: background-color 0.15s ease, color 0.15s ease !important;
}

html:not(.dark) .gg-topsearch-btn:hover {
  background: rgba(124, 58, 237, 0.08) !important;
  color: #7C3AED !important;
  border: none !important;
}

html.dark .gg-topsearch-btn {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #A1A1AA !important;
  border-radius: 8px !important;
  transition: background-color 0.15s ease, color 0.15s ease !important;
}

html.dark .gg-topsearch-btn:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #FAFAFA !important;
  border: none !important;
}

.gg-topsearch-btn:focus-visible {
  outline: 2px solid #7C3AED !important;
  outline-offset: 2px !important;
}

html:not(.dark) .gg-topsearch-hint {
  color: #71717A !important;
}

html.dark .gg-topsearch-hint {
  color: #A1A1AA !important;
}

/* Modal Search Field & Input styling (when expanded) */
.gg-topsearch-panel {
  border-radius: 12px !important;
}

html:not(.dark) .gg-topsearch-panel {
  background-color: #FFFFFF !important;
  border: 1px solid #E4E4E7 !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
}

html.dark .gg-topsearch-panel {
  background-color: #18181B !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5) !important;
}

html:not(.dark) .gg-topsearch-field {
  background-color: #FAFAFA !important;
  border: 1px solid #E4E4E7 !important;
}

html.dark .gg-topsearch-field {
  background-color: #27272A !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

html:not(.dark) .gg-topsearch input {
  background: transparent !important;
  color: #18181B !important;
}

html.dark .gg-topsearch input {
  background: transparent !important;
  color: #FAFAFA !important;
}

/* Theme Toggle Button Styling */
html:not(.dark) .gg-topbar-theme {
  background-color: rgba(255, 255, 255, 0.6) !important;
  border: 1px solid #E4E4E7 !important;
  color: #52525B !important;
}

html:not(.dark) .gg-topbar-theme:hover {
  background-color: #F5F3FF !important;
  color: #7C3AED !important;
  border-color: #DDD6FE !important;
}

html.dark .gg-topbar-theme {
  background-color: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #FAFAFA !important;
}

html.dark .gg-topbar-theme:hover {
  background-color: rgba(124, 58, 237, 0.25) !important;
  color: #FFFFFF !important;
  border-color: rgba(124, 58, 237, 0.4) !important;
}

/* ==========================================================================
   7. BUTTONS & INTERACTIVE ELEMENTS
   ========================================================================== */
/* Primary Buttons (Nexgle Purple in BOTH modes) */
.btn-primary,
button.btn-primary,
a.btn-primary,
.ggl-btn-primary,
.gg-w-action.btn-primary {
  background-color: #7C3AED !important;
  background-image: none !important;
  border-color: #7C3AED !important;
  color: #FFFFFF !important;
  box-shadow: 0 1px 2px rgba(124, 58, 237, 0.25) !important;
}

.btn-primary:hover,
button.btn-primary:hover,
a.btn-primary:hover,
.ggl-btn-primary:hover {
  background-color: #6D28D9 !important;
  border-color: #6D28D9 !important;
  color: #FFFFFF !important;
}

.btn-primary:active,
button.btn-primary:active,
a.btn-primary:active,
.ggl-btn-primary:active {
  background-color: #5B21B6 !important;
  border-color: #5B21B6 !important;
  color: #FFFFFF !important;
}

/* Secondary Buttons */
html:not(.dark) .btn-secondary,
html:not(.dark) button.btn-secondary,
html:not(.dark) a.btn-secondary,
html:not(.dark) .ggl-btn-secondary {
  background-color: #FAFAFF !important;
  border: 1px solid #E4E4E7 !important;
  color: #18181B !important;
}

html:not(.dark) .btn-secondary:hover,
html:not(.dark) button.btn-secondary:hover,
html:not(.dark) a.btn-secondary:hover,
html:not(.dark) .ggl-btn-secondary:hover {
  background-color: #EDE9FE !important;
  border-color: #DDD6FE !important;
  color: #7C3AED !important;
}

html.dark .btn-secondary,
html.dark button.btn-secondary,
html.dark a.btn-secondary,
html.dark .ggl-btn-secondary {
  background-color: #18181C !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #FAFAFA !important;
}

html.dark .btn-secondary:hover,
html.dark button.btn-secondary:hover,
html.dark a.btn-secondary:hover,
html.dark .ggl-btn-secondary:hover {
  background-color: rgba(124, 58, 237, 0.2) !important;
  border-color: rgba(124, 58, 237, 0.4) !important;
  color: #FFFFFF !important;
}

/* ==========================================================================
   PLAN BADGES, CYCLE BUTTONS & BILLING STATUS LABELS (HIGH CONTRAST)
   ========================================================================== */
/* Inactive Cycle/Period buttons */
html:not(.dark) .gg-cycle-btn {
  background-color: #FAFAFF !important;
  border: 1px solid #E4E4E7 !important;
  color: #52525B !important;
  -webkit-text-fill-color: #52525B !important;
}

html.dark .gg-cycle-btn {
  background-color: #18181C !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #A1A1AA !important;
  -webkit-text-fill-color: #A1A1AA !important;
}

/* Active Cycle/Duration Pill - MUST BE HIGH CONTRAST PURPLE + WHITE TEXT */
html:not(.dark) .gg-app.gg-app .gg-cycle .gg-cycle-btn.gg-cycle-btn-active,
html:not(.dark) .gg-cycle .gg-cycle-btn.gg-cycle-btn-active,
html:not(.dark) .gg-cycle-btn.gg-cycle-btn-active,
html:not(.dark) .gg-cycle-btn.bg-brand-600,
html.dark .gg-app.gg-app .gg-cycle .gg-cycle-btn.gg-cycle-btn-active,
html.dark .gg-cycle .gg-cycle-btn.gg-cycle-btn-active,
html.dark .gg-cycle-btn.gg-cycle-btn-active,
html.dark .gg-cycle-btn.bg-brand-600,
.gg-cycle-btn-active {
  background-color: #7C3AED !important;
  border-color: #7C3AED !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  font-weight: 700 !important;
}

/* Plan Card Badges - ROOT SELECTOR FIX FOR PURPLE STATUS LABELS */
.gg-app.gg-app .gg-plan-card .gg-plan-badge,
.gg-app.gg-app .gg-plan-card span.gg-plan-badge,
.gg-app.gg-app .gg-plan-badge {
  font-weight: 800 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
}

/* Current Plan & Switch Plan Badges: High Contrast Purple with White Text */
.gg-app.gg-app .gg-plan-card .gg-plan-badge.gg-plan-badge-current,
.gg-app.gg-app .gg-plan-card .gg-plan-badge-current,
.gg-app.gg-app .gg-plan-card .gg-plan-badge.gg-plan-badge-switch,
.gg-app.gg-app .gg-plan-card .gg-plan-badge-switch,
.gg-app.gg-app .gg-plan-card .gg-plan-badge.bg-brand-600,
html:not(.dark) .gg-app.gg-app .gg-plan-card .gg-plan-badge.gg-plan-badge-current,
html.dark .gg-app.gg-app .gg-plan-card .gg-plan-badge.gg-plan-badge-current {
  background-color: #7C3AED !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

.gg-app.gg-app .gg-plan-card .gg-plan-badge-current svg,
.gg-app.gg-app .gg-plan-card .gg-plan-badge-switch svg {
  color: #FFFFFF !important;
  stroke: #FFFFFF !important;
  fill: none !important;
}

/* Upgrade & Free Badges: High Contrast Purple / Accent with White Text */
.gg-app.gg-app .gg-plan-card .gg-plan-badge.gg-plan-badge-up,
.gg-app.gg-app .gg-plan-card .gg-plan-badge-up,
.gg-app.gg-app .gg-plan-card .gg-plan-badge.gg-plan-badge-free,
.gg-app.gg-app .gg-plan-card .gg-plan-badge-free {
  background-color: #7C3AED !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

.gg-app.gg-app .gg-plan-card .gg-plan-badge-up svg,
.gg-app.gg-app .gg-plan-card .gg-plan-badge-free svg {
  color: #FFFFFF !important;
  stroke: #FFFFFF !important;
}

/* Scheduled / Pending Downgrade Badge */
html:not(.dark) .gg-app.gg-app .gg-plan-card .gg-plan-badge.gg-plan-badge-down,
html:not(.dark) .gg-app.gg-app .gg-plan-card .gg-plan-badge-down {
  background-color: #F4F4F5 !important;
  border: 1px solid #D4D4D8 !important;
  color: #18181B !important;
  -webkit-text-fill-color: #18181B !important;
}
html:not(.dark) .gg-app.gg-app .gg-plan-card .gg-plan-badge-down svg {
  color: #18181B !important;
  stroke: #18181B !important;
}
html.dark .gg-app.gg-app .gg-plan-card .gg-plan-badge.gg-plan-badge-down,
html.dark .gg-app.gg-app .gg-plan-card .gg-plan-badge-down {
  background-color: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.20) !important;
  color: #FAFAFA !important;
  -webkit-text-fill-color: #FAFAFA !important;
}
html.dark .gg-app.gg-app .gg-plan-card .gg-plan-badge-down svg {
  color: #FAFAFA !important;
  stroke: #FAFAFA !important;
}

/* Free Trial Badge */
.gg-app.gg-app .gg-plan-card .gg-plan-badge.gg-plan-badge-trial,
.gg-app.gg-app .gg-plan-card .gg-plan-badge-trial {
  background-color: #D97706 !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}
.gg-app.gg-app .gg-plan-card .gg-plan-badge-trial svg {
  color: #FFFFFF !important;
  stroke: #FFFFFF !important;
}

/* Most Popular Chip */
.gg-app.gg-app .gg-plan-card .gg-plan-popular-chip {
  background-color: #7C3AED !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}
.gg-app.gg-app .gg-plan-card .gg-plan-popular-chip svg {
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
}

/* Feature Unlocks Chip */
html:not(.dark) .gg-app.gg-app .gg-plan-card .gg-plan-unlocks-chip {
  background-color: #F5F3FF !important;
  border: 1px solid #DDD6FE !important;
  color: #6D28D9 !important;
  -webkit-text-fill-color: #6D28D9 !important;
}
html:not(.dark) .gg-app.gg-app .gg-plan-card .gg-plan-unlocks-chip svg {
  color: #6D28D9 !important;
}
html.dark .gg-app.gg-app .gg-plan-card .gg-plan-unlocks-chip {
  background-color: rgba(124, 58, 237, 0.20) !important;
  border: 1px solid rgba(124, 58, 237, 0.40) !important;
  color: #DDD6FE !important;
  -webkit-text-fill-color: #DDD6FE !important;
}
html.dark .gg-app.gg-app .gg-plan-card .gg-plan-unlocks-chip svg {
  color: #DDD6FE !important;
}

/* Current Plan Action Button */
.gg-app.gg-app .gg-plan-card .gg-plan-btn-current {
  background-color: rgba(124, 58, 237, 0.12) !important;
  border: 1px solid rgba(124, 58, 237, 0.3) !important;
  color: #7C3AED !important;
  -webkit-text-fill-color: #7C3AED !important;
  opacity: 1 !important;
}

/* ==========================================================================
   8. CARDS, PANELS, HUBS & CONTAINERS (TWO MODES)
   ========================================================================== */
html:not(.dark) .card,
html:not(.dark) .gg-pcard,
html:not(.dark) .gg-bill-hub,
html:not(.dark) .gg-mhist,
html:not(.dark) .gg-empty,
html:not(.dark) .ggl-card,
html:not(.dark) [class*="rounded-xl"][class*="border"],
html:not(.dark) [class*="rounded-2xl"][class*="border"] {
  background-color: #FFFFFF !important;
  border-color: #E4E4E7 !important;
  color: #18181B !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.02) !important;
}

html.dark .card,
html.dark .gg-pcard,
html.dark .gg-bill-hub,
html.dark .gg-mhist,
html.dark .gg-empty,
html.dark .ggl-card,
html.dark [class*="rounded-xl"][class*="border"],
html.dark [class*="rounded-2xl"][class*="border"] {
  background-color: #111114 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #FAFAFA !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

html:not(.dark) .gg-pcard:hover {
  border-color: #DDD6FE !important;
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.08) !important;
}

html.dark .gg-pcard:hover {
  border-color: rgba(124, 58, 237, 0.5) !important;
  box-shadow: 0 4px 20px rgba(124, 58, 237, 0.18) !important;
}

html:not(.dark) .gg-pcard-name {
  color: #18181B !important;
}

html.dark .gg-pcard-name {
  color: #FFFFFF !important;
}

html:not(.dark) .gg-pcard-tag {
  color: #71717A !important;
}

html.dark .gg-pcard-tag {
  color: #A1A1AA !important;
}

/* Chips, Badges & Pills */
html:not(.dark) .gg-pcard-badge,
html:not(.dark) .gg-chip-sm,
html:not(.dark) .gg-badge-new,
html:not(.dark) .gg-tile-name,
html:not(.dark) .gg-service-badge.gg-badge-new,
html:not(.dark) .ggl-badge-inner {
  background-color: #F5F3FF !important;
  border: 1px solid #DDD6FE !important;
  color: #7C3AED !important;
}

html.dark .gg-pcard-badge,
html.dark .gg-chip-sm,
html.dark .gg-badge-new,
html.dark .gg-tile-name,
html.dark .gg-service-badge.gg-badge-new,
html.dark .ggl-badge-inner {
  background-color: rgba(124, 58, 237, 0.18) !important;
  border: 1px solid rgba(124, 58, 237, 0.35) !important;
  color: #C084FC !important;
}

.gg-pcard-cta {
  color: #7C3AED !important;
}

/* Modal Dialogs and Overlays */
.gg-overlay {
  background-color: rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

html:not(.dark) .gg-modal,
html:not(.dark) [role="dialog"] {
  background-color: #FFFFFF !important;
  border: 1px solid #E4E4E7 !important;
  color: #18181B !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15) !important;
}

html.dark .gg-modal,
html.dark [role="dialog"] {
  background-color: #121216 !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #FAFAFA !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6) !important;
}

.gg-modal * {
  color: inherit;
}

/* ==========================================================================
   9. FORMS, INPUTS, SELECTS & TABLES (TWO MODES)
   ========================================================================== */
html:not(.dark) input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
html:not(.dark) textarea,
html:not(.dark) select,
html:not(.dark) .gg-payform-input,
html:not(.dark) .gg-payform-select {
  background-color: #FFFFFF !important;
  border: 1px solid #E4E4E7 !important;
  color: #18181B !important;
}

html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
html.dark textarea,
html.dark select,
html.dark .gg-payform-input,
html.dark .gg-payform-select {
  background-color: #18181C !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #FAFAFA !important;
}

input:focus,
textarea:focus,
select:focus,
.gg-payform-input:focus,
.gg-payform-select:focus {
  border-color: #7C3AED !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.2) !important;
}

html:not(.dark) table {
  background-color: #FFFFFF !important;
  color: #18181B !important;
}

html.dark table {
  background-color: #111114 !important;
  color: #FAFAFA !important;
}

html:not(.dark) th {
  background-color: #FAFAFF !important;
  color: #71717A !important;
  border-bottom: 1px solid #E4E4E7 !important;
}

html.dark th {
  background-color: #16161A !important;
  color: #A1A1AA !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}

html:not(.dark) td {
  border-bottom: 1px solid #E4E4E7 !important;
  color: #18181B !important;
}

html.dark td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
  color: #FAFAFA !important;
}

html:not(.dark) tr:hover td {
  background-color: #FAFAFF !important;
}

html.dark tr:hover td {
  background-color: rgba(255, 255, 255, 0.04) !important;
}

/* ==========================================================================
   10. PUBLIC MARKETING SHELL & PAGES (.ggl-*) (TWO MODES)
   ========================================================================== */
html:not(.dark) .gg-app.gg-app.ggl-scope,
html:not(.dark) .gg-app.gg-app.ggl-site-shell,
html:not(.dark) .ggl-site-shell {
  background-color: #FFFFFF !important;
  color: #18181B !important;
}

html.dark .gg-app.gg-app.ggl-scope,
html.dark .gg-app.gg-app.ggl-site-shell,
html.dark .ggl-site-shell {
  background-color: #000000 !important;
  color: #FAFAFA !important;
}

html:not(.dark) .ggl-navbar {
  background-color: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid #E4E4E7 !important;
  color: #18181B !important;
}

html.dark .ggl-navbar {
  background-color: rgba(0, 0, 0, 0.85) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #FAFAFA !important;
}

html:not(.dark) .ggl-navbar a,
html:not(.dark) .ggl-nav-item,
html:not(.dark) .ggl-nav-btn {
  color: #18181B !important;
}

html.dark .ggl-navbar a,
html.dark .ggl-nav-item,
html.dark .ggl-nav-btn {
  color: #FAFAFA !important;
}

.ggl-nav-btn:hover {
  color: #7C3AED !important;
}

html:not(.dark) .ggl-nav-btn--active {
  color: #7C3AED !important;
  background-color: #EDE9FE !important;
}

html.dark .ggl-nav-btn--active {
  color: #FFFFFF !important;
  background-color: rgba(124, 58, 237, 0.3) !important;
}

html:not(.dark) .ggl-hero {
  background: linear-gradient(180deg, #FAFAFF 0%, #FFFFFF 100%) !important;
  color: #18181B !important;
}

html.dark .ggl-hero {
  background: linear-gradient(180deg, #09090b 0%, #000000 100%) !important;
  color: #FAFAFA !important;
}

html:not(.dark) .ggl-hero h1,
html:not(.dark) .ggl-hero h2,
html:not(.dark) .ggl-hero h3 {
  color: #18181B !important;
}

html.dark .ggl-hero h1,
html.dark .ggl-hero h2,
html.dark .ggl-hero h3 {
  color: #FAFAFA !important;
}

html:not(.dark) .ggl-hero p {
  color: #52525B !important;
}

html.dark .ggl-hero p {
  color: #A1A1AA !important;
}

html:not(.dark) .ggl-footer {
  background-color: #FAFAFF !important;
  border-top: 1px solid #E4E4E7 !important;
  color: #71717A !important;
}

html.dark .ggl-footer {
  background-color: #08080a !important;
  border-top: 1px solid rgba(255, 255, 255, 0.10) !important;
  color: #A1A1AA !important;
}

html:not(.dark) .ggl-footer h4,
html:not(.dark) .ggl-footer-col h4 {
  color: #18181B !important;
}

html.dark .ggl-footer h4,
html.dark .ggl-footer-col h4 {
  color: #FFFFFF !important;
}

html:not(.dark) .ggl-footer a {
  color: #52525B !important;
}

html.dark .ggl-footer a {
  color: #A1A1AA !important;
}

html:not(.dark) .ggl-footer a:hover {
  color: #7C3AED !important;
}

html.dark .ggl-footer a:hover {
  color: #C084FC !important;
}

html:not(.dark) .ggl-topbar-icon-btn {
  background-color: rgba(255, 255, 255, 0.8) !important;
  border: 1px solid #E4E4E7 !important;
  color: #18181B !important;
}

html:not(.dark) .ggl-topbar-icon-btn svg {
  stroke: #18181B !important;
}

html.dark .ggl-topbar-icon-btn {
  background-color: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #FAFAFA !important;
}

html.dark .ggl-topbar-icon-btn svg {
  stroke: #FAFAFA !important;
}

/* Auth Pages (Login / Register / Forgot Password) - Exact Canonical Dark Parity */
.gg-app.gg-app.ggl-auth-shell,
.ggl-auth-shell,
html.dark .gg-app.gg-app.ggl-auth-shell,
html.dark .ggl-auth-shell,
html:not(.dark) .gg-app.gg-app.ggl-auth-shell,
html:not(.dark) .ggl-auth-shell {
  background-color: #000000 !important;
  background: #000000 !important;
  color: #FFFFFF !important;
}

.gg-app.gg-app .ggl-curve {
  display: block !important;
  position: absolute;
  width: 480px;
  height: 700px;
  border-radius: 50%;
  filter: blur(2px);
  pointer-events: none;
}

.gg-app.gg-app .ggl-auth-col,
html.dark .gg-app.gg-app .ggl-auth-col,
html:not(.dark) .gg-app.gg-app .ggl-auth-col {
  background-color: transparent !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 480px !important;
}

.gg-app.gg-app .gg-auth-page,
.gg-app.gg-app .card-padded.gg-auth-card,
.gg-app.gg-app .gg-auth-card {
  background-color: transparent !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 480px !important;
}

.gg-app.gg-app .ggl-auth-title,
.gg-app.gg-app .gg-auth-title {
  color: #FFFFFF !important;
}

.gg-app.gg-app .ggl-auth-sub,
.gg-app.gg-app .gg-auth-sub {
  color: rgba(255, 255, 255, 0.5) !important;
}

.gg-app.gg-app .gg-auth-link {
  color: rgba(255, 255, 255, 0.8) !important;
}

.gg-app.gg-app .gg-auth-link:hover {
  color: #FFFFFF !important;
}

.gg-app.gg-app .gg-auth-card .input,
.gg-app.gg-app.ggl-auth-shell input.input {
  background: rgb(20, 20, 20) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 10px !important;
  color: #FFFFFF !important;
  padding: 11px 16px !important;
  box-shadow: none !important;
}

.gg-app.gg-app .gg-auth-card .input:focus,
.gg-app.gg-app.ggl-auth-shell input.input:focus {
  border-color: rgba(124, 58, 237, 0.6) !important;
  box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.3) !important;
  outline: none !important;
}

.gg-app.gg-app .gg-auth-card button[type="button"].flex.w-full,
.gg-app.gg-app.ggl-auth-shell button[type="button"].flex.w-full {
  background: rgb(20, 20, 20) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 10px !important;
  color: #FFFFFF !important;
}

.gg-app.gg-app .gg-auth-terms {
  border-color: rgba(255, 255, 255, 0.1) !important;
  background: transparent !important;
}

.gg-app.gg-app .gg-auth-btn {
  border-radius: 10px !important;
  padding: 12px !important;
  font-weight: 600 !important;
}

.gg-app.gg-app .gg-auth-btn:disabled {
  background-color: #3f3f46 !important;
  color: #a1a1aa !important;
  border: none !important;
  cursor: not-allowed !important;
  opacity: 0.7 !important;
}

.gg-app.gg-app .gg-auth-btn:not(:disabled) {
  background: #7c3aed !important;
  color: #FFFFFF !important;
  border: none !important;
}

/* ==========================================================================
   11. BRAND GREEN OVERRIDES -> NEXGLE PURPLE IN BOTH MODES
   ========================================================================== */
.bg-brand-50,
.hover\:bg-brand-50:hover {
  background-color: var(--nexgle-soft-purple) !important;
}

.border-brand-200,
.border-brand-300 {
  border-color: var(--nexgle-purple-border) !important;
}

.text-brand-600,
.text-brand-700,
.hover\:text-brand-700:hover {
  color: #7C3AED !important;
}

html.dark .dark\:text-brand-300,
html.dark .dark\:text-brand-400 {
  color: #C084FC !important;
}

html.dark .dark\:border-brand-700,
html.dark .dark\:border-brand-800 {
  border-color: rgba(124, 58, 237, 0.35) !important;
}

html.dark .dark\:bg-brand-950\/40 {
  background-color: rgba(124, 58, 237, 0.15) !important;
}

/* Shadow / glow overrides */
.shadow-indigo-500\/30,
.shadow-violet-500\/25,
[class*="shadow-emerald"],
[class*="shadow-green"] {
  --tw-shadow-color: rgba(124, 58, 237, 0.2) !important;
}

/* ==========================================================================
   12. PLATFORM STATUS INDICATORS (ZERO PLATFORM GREEN)
   All platform-rendered success and positive states are now Nexgle Purple.
   Third-party logos remain in authentic brand colors.
   ========================================================================== */
.ggl-status-dot-inner,
.gg-app .ggl-status-dot-inner,
.gg-app.gg-app .ggl-status-dot-inner,
.status-online,
.status-dot,
.gg-stat-pos,
.bg-success-500,
.bg-emerald-400,
.bg-emerald-500,
.bg-emerald-600,
.bg-green-400,
.bg-green-500,
.bg-green-600,
.bg-lime-400,
.bg-lime-500,
[class*="bg-emerald-"]:not([class*="brand-logo"]):not([class*="coin-logo"]):not([class*="crypto"]):not([class*="receipt"]):not([class*="preview"]),
[class*="bg-green-"]:not([class*="brand-logo"]):not([class*="coin-logo"]):not([class*="crypto"]):not([class*="receipt"]):not([class*="preview"]) {
  background-color: #7C3AED !important;
}

.ggl-status-dot-inner,
.gg-app .ggl-status-dot-inner,
.gg-app.gg-app .ggl-status-dot-inner,
.status-online,
.status-dot {
  box-shadow: 0 0 6px rgba(124, 58, 237, 0.7) !important;
}

.gg-app.gg-app .ggl-status-dot:before {
  background: rgba(124, 58, 237, 0.4) !important;
  box-shadow: 0 0 10px rgba(124, 58, 237, 0.4) !important;
}

.text-success-500,
.text-emerald-400,
.text-emerald-500,
.text-emerald-600,
.text-green-400,
.text-green-500,
.text-green-600,
.text-lime-400,
.text-lime-500,
[class*="text-emerald-"]:not([class*="brand-logo"]):not([class*="coin-logo"]):not([class*="crypto"]):not([class*="receipt"]):not([class*="preview"]),
[class*="text-green-"]:not([class*="brand-logo"]):not([class*="coin-logo"]):not([class*="crypto"]):not([class*="receipt"]):not([class*="preview"]) {
  color: #7C3AED !important;
}

html.dark .text-success-500,
html.dark .text-emerald-400,
html.dark .text-emerald-500,
html.dark .text-green-400,
html.dark .text-green-500,
html.dark [class*="text-emerald-"]:not([class*="brand-logo"]):not([class*="coin-logo"]):not([class*="crypto"]):not([class*="receipt"]):not([class*="preview"]),
html.dark [class*="text-green-"]:not([class*="brand-logo"]):not([class*="coin-logo"]):not([class*="crypto"]):not([class*="receipt"]):not([class*="preview"]) {
  color: #A78BFA !important;
}

.border-emerald-400,
.border-emerald-500,
.border-emerald-600,
.border-green-400,
.border-green-500,
[class*="border-emerald-"]:not([class*="brand-logo"]):not([class*="coin-logo"]):not([class*="crypto"]):not([class*="receipt"]):not([class*="preview"]),
[class*="border-green-"]:not([class*="brand-logo"]):not([class*="coin-logo"]):not([class*="crypto"]):not([class*="receipt"]):not([class*="preview"]) {
  border-color: #7C3AED !important;
}

[class*="bg-emerald-500/"],
[class*="bg-emerald-400/"],
[class*="bg-green-500/"],
[class*="bg-green-400/"] {
  background-color: rgba(124, 58, 237, 0.15) !important;
}

[class*="border-emerald-500/"],
[class*="border-emerald-400/"],
[class*="border-green-500/"] {
  border-color: rgba(124, 58, 237, 0.25) !important;
}

/* Danger / Error indicators */
.text-error-500,
.text-red-500,
.bg-red-500 {
  color: #EF4444 !important;
}

/* Warning indicators */
.text-amber-500,
.text-yellow-500 {
  color: #F59E0B !important;
}

/* ==========================================================================
   13. THIRD-PARTY ASSETS PROTECTION (UNTOUCHED IN BOTH MODES)
   ========================================================================== */
img[alt="Binance"],
img[alt="ByBit"],
img[alt="Coinbase"],
img[alt="Bitcoin.com"],
img[alt="CashApp"],
img[alt="Trust Wallet"],
img[alt="SafePal"],
img[alt="Gate.io"],
img[alt="Blockchain"],
img[alt*="crypto"],
img[src*="brand-logos"],
img[src*="service-icons"] {
  filter: none !important;
  background: transparent !important;
}

/* ==========================================================================
   14. FINAL CANVAS ANCHORS
   These sit LAST in the file so they win cascade tie-breaks.
   They override any background/color that the React ThemeProvider re-injects
   via <style id="gg-canvas"> between renders.
   ========================================================================== */

/* Light mode body canvas */
html:not(.dark) body,
html.light body,
html:not(.dark) > body {
  background-color: #FFFFFF !important;
  color: #18181B !important;
}

/* Dark mode body canvas */
html.dark body,
html.dark > body {
  background-color: #000000 !important;
  color: #FAFAFA !important;
}

/* Light mode app shell canvas */
html:not(.dark) .gg-app,
html:not(.dark) .gg-shell,
html:not(.dark) .gg-app.gg-app,
html:not(.dark) .gg-app.gg-app.gg-app {
  background-color: #FFFFFF !important;
  color: #18181B !important;
}

/* Dark mode app shell canvas */
html.dark .gg-app,
html.dark .gg-shell,
html.dark .gg-app.gg-app,
html.dark .gg-app.gg-app.gg-app {
  background-color: #000000 !important;
  color: #FAFAFA !important;
}

/* Light mode platform CSS variables re-anchored last */
html:not(.dark) .gg-app.gg-app,
html:not(.dark) .gg-app.gg-app.gg-app {
  --gg-bg: #FFFFFF !important;
  --gg-surface: #FFFFFF !important;
  --gg-text: #18181B !important;
  --gg-bg-rgb: 255 255 255 !important;
  --gg-text-rgb: 24 24 27 !important;
}

/* Dark mode platform CSS variables re-anchored last */
html.dark .gg-app.gg-app,
html.dark .gg-app.gg-app.gg-app {
  --gg-bg: #000000 !important;
  --gg-surface: #0a0a0c !important;
  --gg-text: #ffffff !important;
  --gg-bg-rgb: 0 0 0 !important;
  --gg-text-rgb: 255 255 255 !important;
}

/* Ensure color-scheme meta stays correct */
html:not(.dark) {
  color-scheme: light !important;
}

html.dark {
  color-scheme: dark !important;
}

/* ==========================================================================
   15. TERMINAL PLATFORM VARIABLE OVERRIDES
   Guarantees that no inline <style id="platform-theme"> can resurrect green.
   ========================================================================== */
:root,
html body,
html .gg-app,
html .gg-app.gg-app,
html .gg-app.gg-app.gg-app,
html .gg-app.gg-app.gg-app.gg-app,
html:not(.dark) body:not(:has(.ggl-scope)) .gg-app.gg-app.gg-app:not(.ggl-scope) {
  --brand-25: 250 249 255 !important;
  --brand-50: 245 243 255 !important;
  --brand-100: 237 233 254 !important;
  --brand-200: 221 214 254 !important;
  --brand-300: 196 181 253 !important;
  --brand-400: 167 139 250 !important;
  --brand-500: 124 58 237 !important;
  --brand-600: 109 40 217 !important;
  --brand-700: 91 33 182 !important;
  --brand-800: 76 29 149 !important;
  --brand-900: 59 7 100 !important;
  --brand-950: 46 16 101 !important;
  --gg-purple: 124 58 237 !important;
  --gg-accent: 124 58 237 !important;
  --gg-accent-hover: 167 139 250 !important;
  --gg-accent-press: 91 33 182 !important;
  --gg-accent-deep: 76 29 149 !important;
  --gg-accent-grad-1: #a78bfa !important;
  --gg-accent-grad-2: #7c3aed !important;
  --gg-accent-grad-3: #5b21b6 !important;
  --gg-accent-dim: rgba(124, 58, 237, 0.14) !important;
  --gg-accent-border: rgba(124, 58, 237, 0.28) !important;
  --gg-focus: rgba(124, 58, 237, 0.55) !important;
  --gg-focus-ring: 0 0 0 2px rgba(124, 58, 237, 0.35) !important;
  --gg-green: 124 58 237 !important;
  --gg-wash: 124 58 237 !important;
  --accent: 124 58 237 !important;
}

/* ==========================================================================
   16. SUPPORT PAGE UI OVERRIDES
   Eradicates green headset disc, ping, status dot, CTA button, shield icon.
   ========================================================================== */
.gg-sup-hero .gg-sup-grid {
  background-color: rgba(124, 58, 237, 0.15) !important;
}
.gg-sup-hero .gg-sup-glow {
  background-color: rgba(124, 58, 237, 0.35) !important;
}
.gg-sup-hero .gg-sup-ping {
  background-color: rgba(124, 58, 237, 0.2) !important;
}
.gg-sup-hero .gg-sup-disc {
  background: linear-gradient(135deg, #a78bfa, #7c3aed) !important;
  box-shadow: 0 10px 30px -8px rgba(109, 40, 217, 0.5) !important;
  border-color: rgba(124, 58, 237, 0.2) !important;
}
.gg-sup-hero .gg-sup-pip {
  background-color: #7C3AED !important;
}
.gg-sup-hero .gg-sup-pip-ping {
  background-color: rgba(167, 139, 250, 0.7) !important;
}
.gg-sup-hero .gg-sup-avail {
  color: #7C3AED !important;
}
html.dark .gg-sup-hero .gg-sup-avail {
  color: #A78BFA !important;
}
.gg-sup-hero .gg-sup-cta,
button.gg-sup-cta {
  background: linear-gradient(to right, #7C3AED, #6D28D9) !important;
  box-shadow: 0 10px 25px -5px rgba(109, 40, 217, 0.35) !important;
  border-color: transparent !important;
  color: #FFFFFF !important;
}
.gg-sup-hero .gg-sup-cta:hover,
button.gg-sup-cta:hover {
  background: linear-gradient(to right, #6D28D9, #5B21B6) !important;
  box-shadow: 0 10px 25px -5px rgba(109, 40, 217, 0.5) !important;
}
.gg-sup-hero .gg-sup-note svg,
.gg-sup-hero [class*="text-brand-500"] {
  color: #7C3AED !important;
  stroke: #7C3AED !important;
}

/* ==========================================================================
   17. FIXED-DARK ROUTES (/ AND /terms)
   Always renders dark (black canvas #000000 + purple brand accents).
   Never affected by localStorage, html:not(.dark), or user preference.
   Theme toggle is hidden/disabled on these routes.
   ========================================================================== */
html[data-fixed-theme="dark"],
html[data-fixed-theme="dark"] body,
html[data-fixed-theme="dark"] .gg-app,
html[data-fixed-theme="dark"] .gg-app.gg-app,
html[data-fixed-theme="dark"] .gg-app.gg-app.gg-app,
html[data-fixed-theme="dark"] .gg-shell,
html[data-fixed-theme="dark"] .ggl-site-shell,
html[data-fixed-theme="dark"] .ggl-scope,
html[data-fixed-theme="dark"] main,
html[data-fixed-theme="dark"] .card,
html[data-fixed-theme="dark"] .ggl-site-main,
html[data-fixed-theme="dark"] .ggl-trade-section,
html[data-fixed-theme="dark"] .ggl-features-section {
  background-color: #000000 !important;
  color: #FAFAFA !important;
  color-scheme: dark !important;
  --background: #000000 !important;
  --surface: #0a0a0c !important;
  --card: #0a0a0c !important;
  --surface-soft: #121216 !important;
  --foreground: #FAFAFA !important;
  --text-primary: #FAFAFA !important;
  --text-secondary: #A1A1AA !important;
  --text-muted: #71717A !important;
  --border: #27272A !important;
  --border-soft: #1F1F23 !important;
  --gg-bg: #000000 !important;
  --gg-surface: #0a0a0c !important;
  --gg-card-bg: #0a0a0c !important;
  --gg-bg-solid: #000000 !important;
  --gg-text: #ffffff !important;
  --gg-text-rgb: 255 255 255 !important;
  --gg-bg-rgb: 0 0 0 !important;
  --nexgle-bg: #000000 !important;
  --nexgle-surface: #0a0a0c !important;
  --nexgle-text: #FAFAFA !important;
  --nexgle-border: #27272A !important;
}

html[data-fixed-theme="dark"] h1,
html[data-fixed-theme="dark"] h2,
html[data-fixed-theme="dark"] h3,
html[data-fixed-theme="dark"] h4,
html[data-fixed-theme="dark"] p,
html[data-fixed-theme="dark"] span {
  color-scheme: dark !important;
}

html[data-fixed-theme="dark"] .ggl-navbar {
  background-color: #000000 !important;
  background: #000000 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #FAFAFA !important;
}

html[data-fixed-theme="dark"] .ggl-navbar a,
html[data-fixed-theme="dark"] .ggl-nav-item,
html[data-fixed-theme="dark"] .ggl-nav-btn {
  color: #FAFAFA !important;
}

html[data-fixed-theme="dark"] .ggl-hero {
  background: #000000 !important;
  background-color: #000000 !important;
  background-image: none !important;
  color: #FAFAFA !important;
}

html[data-fixed-theme="dark"] .ggl-hero h1,
html[data-fixed-theme="dark"] .ggl-hero h2,
html[data-fixed-theme="dark"] .ggl-hero h3 {
  color: #FAFAFA !important;
}

html[data-fixed-theme="dark"] .ggl-hero p {
  color: #A1A1AA !important;
}

html[data-fixed-theme="dark"] .ggl-footer {
  background-color: #000000 !important;
  background: #000000 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.10) !important;
  color: #A1A1AA !important;
}

html[data-fixed-theme="dark"] .ggl-footer h4,
html[data-fixed-theme="dark"] .ggl-footer-col h4 {
  color: #FFFFFF !important;
}

html[data-fixed-theme="dark"] .ggl-footer a {
  color: #A1A1AA !important;
}

html[data-fixed-theme="dark"] .ggl-footer a:hover {
  color: #C084FC !important;
}

html[data-fixed-theme="dark"] .ggl-profile-btn {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: #FAFAFA !important;
}

html[data-fixed-theme="dark"] .ggl-topbar-icon-btn {
  background-color: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #FAFAFA !important;
}

html[data-fixed-theme="dark"] .ggl-topbar-icon-btn svg {
  stroke: #FAFAFA !important;
}

html[data-fixed-theme="dark"] .ggl-control-icon {
  border-color: rgba(124, 58, 237, 0.25) !important;
  background: linear-gradient(160deg, rgba(124, 58, 237, 0.08) 0, rgba(124, 58, 237, 0.03) 100%) !important;
}

html[data-fixed-theme="dark"] .ggl-icon-bottom-glow {
  background: linear-gradient(0deg, rgba(124, 58, 237, 0.22) 0, transparent) !important;
}

/* Mobile Drawer / Menu on Fixed-Dark Routes (/ and /terms) */
html[data-fixed-theme="dark"] .ggl-mobile-menu,
html[data-fixed-theme="dark"] .ggl-mobile-inner,
html[data-fixed-theme="dark"] .ggl-mobile-nav {
  --gg-text-rgb: 255 255 255 !important;
  --gg-bg-rgb: 0 0 0 !important;
  --gg-text: #FFFFFF !important;
  background-color: #000000 !important;
  background: #000000 !important;
  color: #FAFAFA !important;
}

html[data-fixed-theme="dark"] .ggl-mobile-nav-link,
html[data-fixed-theme="dark"] .ggl-mobile-nav-item,
html[data-fixed-theme="dark"] .ggl-mobile-nav-btn {
  color: #FAFAFA !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  text-decoration: none !important;
}

html[data-fixed-theme="dark"] .ggl-mobile-nav-link svg {
  stroke: #A78BFA !important;
  color: #A78BFA !important;
}

html[data-fixed-theme="dark"] .ggl-mobile-nav-link:hover {
  color: #FFFFFF !important;
  background-color: rgba(255, 255, 255, 0.05) !important;
}

html[data-fixed-theme="dark"] .ggl-mobile-sep {
  background-color: rgba(255, 255, 255, 0.12) !important;
  background: rgba(255, 255, 255, 0.12) !important;
}

html[data-fixed-theme="dark"] .ggl-mobile-logout-btn {
  color: #FAFAFA !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  background: transparent !important;
}

html[data-fixed-theme="dark"] .ggl-mobile-login-btn {
  color: #FAFAFA !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  background: transparent !important;
}

html[data-fixed-theme="dark"] .ggl-mobile-signup-btn {
  color: #FFFFFF !important;
  background: #7C3AED !important;
  border-color: #7C3AED !important;
}

/* Hide theme toggles on fixed-dark routes */
html[data-fixed-theme="dark"] .gg-topbar-theme,
html[data-fixed-theme="dark"] button[aria-label*="Theme" i],
html[data-fixed-theme="dark"] [data-testid="theme-toggle"],
html[data-fixed-theme="dark"] .ggl-topbar-icon-btn[aria-label="Theme"] {
  display: none !important;
  pointer-events: none !important;
}

/* ==========================================================================
   BRAND NAVIGATION LOADER & ERROR BOUNDARY SUPPRESSION
   ========================================================================== */
#brand-nav-loader {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  height: 3px !important;
  width: 0%;
  background: linear-gradient(90deg, #7C3AED, #A855F7, #C084FC) !important;
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.8), 0 0 5px #7C3AED !important;
  z-index: 9999999 !important;
  pointer-events: none !important;
  opacity: 0;
  transition: width 0.08s ease, opacity 0.15s ease;
}

#brand-nav-loader.is-active {
  opacity: 1 !important;
}

/* Suppress error boundary flash artifacts completely */
.gg-boundary-title,
.gg-boundary,
[data-nextjs-error] {
  display: none !important;
}

/* ==========================================================================
   18. AUTH AMBIENT BACKDROP CURVES & CANONICAL BRAND PARITY
   Canonical Globalgle curves: 480px x 700px, 50% radius, blur(2px)
   Elevated high-contrast gradient so ambient curves are clearly visible.
   ========================================================================== */
.ggl-auth-shell,
.gg-app .ggl-auth-shell,
.gg-app.gg-app .ggl-auth-shell,
.gg-app.gg-app.gg-app .ggl-auth-shell {
  background-color: #000000 !important;
  background: #000000 !important;
  position: relative !important;
  overflow: hidden !important;
  min-height: 100vh !important;
}

.gg-app.gg-app .ggl-curve,
.gg-app.gg-app.gg-app .ggl-curve,
.ggl-curve {
  position: absolute !important;
  width: 480px !important;
  height: 700px !important;
  border-radius: 50% !important;
  filter: blur(2px) !important;
  pointer-events: none !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 0 !important;
}

.gg-app.gg-app .ggl-curve-left,
.gg-app.gg-app.gg-app .ggl-curve-left,
.ggl-curve-left {
  left: -220px !important;
  top: 50% !important;
  transform: translateY(-50%) rotate(-20deg) !important;
  background: linear-gradient(160deg, #5a5a5a 0%, #2c2c2c 45%, rgba(0, 0, 0, 0) 85%) !important;
}

.gg-app.gg-app .ggl-curve-right,
.gg-app.gg-app.gg-app .ggl-curve-right,
.ggl-curve-right {
  right: -220px !important;
  top: 50% !important;
  transform: translateY(-50%) rotate(20deg) !important;
  background: linear-gradient(200deg, #5a5a5a 0%, #2c2c2c 45%, rgba(0, 0, 0, 0) 85%) !important;
}

.ggl-auth-main,
.gg-app.gg-app .ggl-auth-main,
html[data-fixed-theme="dark"] main.ggl-auth-main,
html[data-fixed-theme="dark"] .ggl-auth-main {
  background: transparent !important;
  background-color: transparent !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Key icon badge on /forgot-password */
.gg-auth-icon,
.gg-app .gg-auth-icon,
.gg-app.gg-app .gg-auth-icon {
  background-color: rgba(124, 58, 237, 0.15) !important;
  color: #A78BFA !important;
  border: 1px solid rgba(124, 58, 237, 0.3) !important;
  border-radius: 12px !important;
}

.gg-auth-icon svg,
.gg-app .gg-auth-icon svg {
  color: #A78BFA !important;
  stroke: #A78BFA !important;
}