:root {
  /* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
     WRS MASTER DESIGN SYSTEM ------ SEMANTIC DESIGN TOKENS
     ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */

  /* 1. Core Canvas & Surface Palette */
  --wrs-color-bg-canvas:           #f8fafc;
  --wrs-color-bg-sidebar:          #0d111a;
  --wrs-color-bg-sidebar-top:      #131824;
  --wrs-color-bg-surface:          #ffffff;
  --wrs-color-bg-surface-subtle:   #f1f5f9;
  --wrs-color-bg-surface-elevated: #ffffff;

  /* Universal Dark Surface Palette (for Cyberpunk Login, Gift Vault & Modals) */
  --wrs-color-bg-dark-canvas:      #090b10;
  --wrs-color-bg-dark-surface:     #131824;
  --wrs-color-bg-dark-card:        #13161f;
  --wrs-color-bg-dark-glass:       rgba(10, 25, 47, 0.82);
  --wrs-color-input-dark:          #0a2244;

  /* 2. Borders & Dividers */
  --wrs-color-border-sidebar:      rgba(148, 163, 184, 0.18);
  --wrs-color-border-subtle:       #f1f5f9;
  --wrs-color-border-default:      #e2e8f0;
  --wrs-color-border-strong:       #cbd5e1;

  /* 3. Brand & Accent Hierarchy (Default Royal Cobalt SSOT) */
  --wrs-color-brand-primary:       #1597ff;
  --wrs-color-brand-gold:          #e69124;
  --wrs-color-gold-hover:          #d97706;
  --wrs-color-gold-glow:           rgba(230, 145, 36, 0.25);
  --wrs-color-gold-bg:             rgba(230, 145, 36, 0.12);
  --wrs-color-cyan:                #38bdf8;
  --wrs-color-cyan-glow:           rgba(56, 189, 248, 0.25);
  --wrs-color-brand-primary-hover: #006edc;
  --wrs-color-brand-primary-dark:  #005bb8;
  --wrs-color-brand-gradient:      linear-gradient(135deg, #1597ff 0%, #006edc 100%);
  --wrs-color-brand-gradient-hover: linear-gradient(135deg, #38bdf8 0%, #1597ff 100%);
  --wrs-color-brand-accent:        #38bdf8;
  --wrs-color-brand-glow:          rgba(21, 151, 255, 0.25);
  --wrs-color-brand-focus:         #7dd3fc;

  /* 4. Master Typography Hierarchy */
  --wrs-color-text-primary:        #0f172a;
  --wrs-color-text-secondary:      #475569;
  --wrs-color-text-muted:          #64748b;
  --wrs-color-text-dim:            #94a3b8;
  --wrs-color-text-inverse:        #ffffff;

  /* 5. Semantic Financial & Operational Status Colors */
  /* Active / Settled / Success */
  --wrs-color-success-bg:          #dcfce7;
  --wrs-color-success-border:      #bbf7d0;
  --wrs-color-success-text:        #15803d;
  --wrs-color-success-solid:       #16a34a;

  /* In Progress / Pending / Warning */
  --wrs-color-warning-bg:          #fef3c7;
  --wrs-color-warning-border:      #fde68a;
  --wrs-color-warning-text:        #b45309;
  --wrs-color-warning-solid:       #d97706;

  /* Blocked / Rejected / Danger */
  --wrs-color-danger-bg:           #fee2e2;
  --wrs-color-danger-border:       #fecaca;
  --wrs-color-danger-text:         #991b1b;
  --wrs-color-danger-solid:        #dc2626;

  /* Info / Neutral */
  --wrs-color-info-bg:             #e0f2fe;
  --wrs-color-info-border:         #bae6fd;
  --wrs-color-info-text:           #0369a1;
  --wrs-color-info-solid:          #0284c7;

  /* Turbo / Lightning / Priority */
  --wrs-color-turbo-bg:            #fef9c3;
  --wrs-color-turbo-border:        #fef08a;
  --wrs-color-turbo-text:          #854d0e;
  --wrs-color-turbo-solid:         #eab308;

  /* Paused / Inactive */
  --wrs-color-paused-bg:           #f1f5f9;
  --wrs-color-paused-border:       #e2e8f0;
  --wrs-color-paused-text:         #64748b;
  --wrs-color-paused-solid:        #64748b;

  /* 6. Data-Viz & Extended Semantic Shades (previously untokenized, now centralized) */
  --wrs-color-text-strong:         #334155; /* slate-700, used for strong secondary text */
  --wrs-color-progress-mid:        #2563eb; /* daily-limit progress bar: 40---75% */
  --wrs-color-progress-high:       #ef4444; /* daily-limit progress bar: >75% */
  --wrs-color-status-dot-green:    #10b981; /* small status dots (distinct from success-solid) */
  --wrs-gradient-sidebar-card-a:   linear-gradient(115deg, #132238 0%, #1e334f 60%, #101c2e 100%);
  --wrs-gradient-sidebar-card-b:   linear-gradient(115deg, #182b45 0%, #264265 60%, #15243a 100%);


  /* Master Structural Dimensions */
  --wrs-sidebar-width:             264px;
  --wrs-sidebar-collapsed:         72px;
  --wrs-vh:                        100vh; /* upgraded below + by JS in Telegram WebApp context */
  --wrs-dock-height:               56px;
  --wrs-safe-bottom:               var(--tg-content-safe-area-inset-bottom, var(--tg-safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)));
  --wrs-safe-top:                  var(--tg-content-safe-area-inset-top, var(--tg-safe-area-inset-top, env(safe-area-inset-top, 0px)));
  --wrs-safe-pad-bottom:           calc(var(--wrs-dock-height) + var(--wrs-safe-bottom) + 20px);
  --wrs-radius:                    10px;
  --wrs-radius-lg:                 16px;
  --wrs-radius-xl:                 20px;
  --wrs-radius-full:               9999px;

  /* Fluid Canvas Spacing & Layout Bounds */
  --wrs-canvas-pad-x:              clamp(14px, 2.5vw, 40px);
  --wrs-canvas-pad-y:              clamp(16px, 2.2vw, 32px);
  --wrs-canvas-max-w:              1440px;
  --wrs-canvas-detail-max-w:       1280px;

  /* Master Standardized Z-Index Scale */
  --wrs-z-base:                    1;
  --wrs-z-sticky:                  50;
  --wrs-z-dropdown:                100;
  --wrs-z-sidebar:                 200;
  --wrs-z-modal-backdrop:          1000;
  --wrs-z-modal:                   1050;
  --wrs-z-toast:                   2000;

  /* Unified Typography */
  --wrs-font:                      'Inter', 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --wrs-font-ar:                   'IBM Plex Sans Arabic', 'Inter', system-ui, -apple-system, sans-serif;
  --wrs-font-mono:                 'DM Mono', 'Fira Code', monospace;
  /* Nexus compatibility aliases ------ semantic values above remain the single source. */
  --wrs-bg-page: var(--wrs-color-bg-canvas);
  --wrs-bg-subtle: var(--wrs-color-bg-surface-subtle);
  --wrs-surface: var(--wrs-color-bg-surface);
  --wrs-border: var(--wrs-color-border-default);
  --wrs-border-strong: var(--wrs-color-border-strong);
  --wrs-text: var(--wrs-color-text-primary);
  --wrs-text-secondary: var(--wrs-color-text-secondary);
  --wrs-muted: var(--wrs-color-text-muted);
  --wrs-text-dim: var(--wrs-color-text-dim);
  --wrs-bg-dark: var(--wrs-color-bg-sidebar); /* global public alias --- --wrs-bg is sidebar-local only */
  --wrs-accent: var(--wrs-color-brand-primary);
  --wrs-accent-strong: var(--wrs-color-brand-primary-hover);
  --wrs-success: var(--wrs-color-success-solid);
  --wrs-success-dark: var(--wrs-color-success-text);
  --wrs-success-bg: var(--wrs-color-success-bg);
  --wrs-danger: var(--wrs-color-danger-solid);
  --wrs-danger-bg: var(--wrs-color-danger-bg);
  --wrs-warning-bg: var(--wrs-color-warning-bg);
  --wrs-gold: var(--wrs-color-brand-gold);
  --wrs-gold-dark: var(--wrs-color-warning-solid);

  /* ADDED 2026-09-01: consolidated additive tokens (no live conflict) from orphaned style.css / design-tokens.css */
  --wrs-accent-glow: rgba(21, 151, 255, 0.25);
  --wrs-accent-bg: rgba(21, 151, 255, 0.08);
  --wrs-gold-glow: rgba(230, 145, 36, 0.25);
}

/* =============================================================================
   WRS THEME PALETTE ENGINE (Agent-Selectable Sovereign Palettes)
   Single Source of Truth for Brand Primary, Accents, Hover & Glowing Shadows
   Three Sovereign Palettes: Royal Cobalt (#1597ff), Imperial Gold (#e69124), Tactical Emerald (#10b981)
   ============================================================================= */

/* 1. Royal Cobalt (Official Primary Sovereign Web3 / Network Core) */
:root[data-palette="cobalt"], :root[data-theme="cobalt"], [data-palette="cobalt"], [data-theme="cobalt"] {
  --wrs-color-brand-primary:       #1597ff;
  --wrs-color-brand-primary-hover: #006edc;
  --wrs-color-brand-primary-dark:  #005bb8;
  --wrs-color-brand-accent:        #38bdf8;
  --wrs-color-brand-glow:          rgba(21, 151, 255, 0.28);
  --wrs-color-brand-gradient:      linear-gradient(135deg, #1597ff 0%, #006edc 100%);
  --wrs-color-brand-gradient-hover: linear-gradient(135deg, #38bdf8 0%, #1597ff 100%);
  --wrs-color-brand-focus:         #7dd3fc;
  --wrs-accent-glow:               rgba(21, 151, 255, 0.28);
  --wrs-accent-bg:                 rgba(21, 151, 255, 0.08);
}

/* 2. Imperial Gold (Elite VIP / Institutional Treasury & Liquidity) */
:root[data-palette="gold"], :root[data-theme="gold"], [data-palette="gold"], [data-theme="gold"] {
  --wrs-color-brand-primary:       #e69124;
  --wrs-color-brand-primary-hover: #d97706;
  --wrs-color-brand-primary-dark:  #b45309;
  --wrs-color-brand-accent:        #fbbf24;
  --wrs-color-brand-glow:          rgba(230, 145, 36, 0.28);
  --wrs-color-brand-gradient:      linear-gradient(135deg, #e69124 0%, #d97706 100%);
  --wrs-color-brand-gradient-hover: linear-gradient(135deg, #fbbf24 0%, #e69124 100%);
  --wrs-color-brand-focus:         #fde68a;
  --wrs-accent-glow:               rgba(230, 145, 36, 0.28);
  --wrs-accent-bg:                 rgba(230, 145, 36, 0.08);
}

/* 3. Tactical Emerald (Military Operations & Real-Time Settlements) */
:root[data-palette="olive"], :root[data-theme="olive"], [data-palette="olive"], [data-theme="olive"],
:root[data-palette="emerald"], :root[data-theme="emerald"], [data-palette="emerald"], [data-theme="emerald"] {
  --wrs-color-brand-primary:       #10b981;
  --wrs-color-brand-primary-hover: #059669;
  --wrs-color-brand-primary-dark:  #047857;
  --wrs-color-brand-accent:        #34d399;
  --wrs-color-brand-glow:          rgba(16, 185, 129, 0.28);
  --wrs-color-brand-gradient:      linear-gradient(135deg, #10b981 0%, #059669 100%);
  --wrs-color-brand-gradient-hover: linear-gradient(135deg, #34d399 0%, #10b981 100%);
  --wrs-color-brand-focus:         #6ee7b7;
  --wrs-accent-glow:               rgba(16, 185, 129, 0.28);
  --wrs-accent-bg:                 rgba(16, 185, 129, 0.08);
}

@supports (height: 100dvh) {
  :root { --wrs-vh: 100dvh; }
}



/* =============================================================================
   TELEGRAM MINI APP NATIVE THEME SYNC (Dark / Light Mode & ThemeParams)
   ============================================================================= */
[data-theme="dark"],
:root[data-theme="dark"] {
  --wrs-color-bg-canvas:           var(--tg-bg, #0f172a);
  --wrs-color-bg-surface:          var(--tg-surface, #1e293b);
  --wrs-color-bg-surface-subtle:   #182234;
  --wrs-color-bg-surface-elevated: #243248;
  --wrs-color-border-default:      #334155;
  --wrs-color-border-subtle:       #1e293b;
  --wrs-color-border-strong:       #475569;
  --wrs-color-text-primary:        var(--tg-text, #f8fafc);
  --wrs-color-text-secondary:      #cbd5e1;
  --wrs-color-text-muted:          var(--tg-hint, #94a3b8);
  --wrs-color-text-dim:            #64748b;
  --wrs-bg-page:                   var(--tg-bg, #0f172a);
  --wrs-surface:                   var(--tg-surface, #1e293b);
  --wrs-border:                    #334155;
  --wrs-text:                      var(--tg-text, #f8fafc);
  --wrs-muted:                     var(--tg-hint, #94a3b8);
}

[data-theme="dark"] body.wrs-platform-canvas {
  background: var(--tg-bg, #0f172a) !important;
  color: var(--tg-text, #f8fafc) !important;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body.wrs-platform-canvas {
  width: 100vw !important;
  width: 100% !important;
  height: var(--wrs-vh, 100vh) !important;
  max-height: var(--wrs-vh, 100vh) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #f8fafc !important;
  color: #0f172a !important;
  font-family: var(--wrs-font) !important;
  -webkit-font-smoothing: antialiased;
}

/* Master Layout Grid */
.wrs-shell {
  display: grid;
  grid-template-columns: var(--wrs-sidebar-width, 264px) minmax(0, 1fr);
  width: 100vw !important;
  width: 100% !important;
  height: var(--wrs-vh, 100vh) !important;
  max-height: var(--wrs-vh, 100vh) !important;
  overflow: hidden !important;
  background: #f8fafc;
  transition: grid-template-columns .22s ease;
}
.wrs-shell.is-collapsed {
  grid-template-columns: var(--wrs-sidebar-collapsed) minmax(0,1fr);
}

/* ---- MASTER SIDEBAR (3-Compartment Frozen Header/Footer Architecture) ---- */
.wrs-sidebar {
  --wrs-bg: var(--wrs-color-bg-sidebar);
  --wrs-text: var(--wrs-color-text-inverse);
  --wrs-muted: var(--wrs-color-text-dim);
  --wrs-focus: var(--wrs-color-brand-focus);
  position: relative !important;
  height: var(--wrs-vh, 100vh) !important;
  max-height: var(--wrs-vh, 100vh) !important;
  overflow: visible !important;
  background: var(--wrs-color-bg-sidebar) !important;
  border-inline-end: 1px solid var(--wrs-border) !important;
  display: flex;
  flex-direction: column;
  padding: 0 !important;
  color: var(--wrs-text) !important;
  z-index: 100;
  flex-shrink: 0;
}

/* Enforce link colors inside sidebar against WP core inheritance */
.wrs-sidebar a,
.wrs-sidebar a:visited,
.wrs-sidebar button {
  color: var(--wrs-text) !important;
  text-decoration: none !important;
}

/* ------------------ 1. Pinned Top Compartment (Brand + App Switcher) ------------------ */
.wrs-sidebar-top {
  flex-shrink: 0;
  padding: 14px 10px 10px;
  background: #0d111a;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  z-index: 20;
}

.wrs-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 4px 10px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.03em;
  color: #ffffff !important;
  flex-shrink: 0;
}
.wrs-brand-logo {
  height: 24px; width: auto; max-height: 24px;
  object-fit: contain; flex-shrink: 0;
}
.wrs-brand strong {
  color: #38bdf8 !important;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.wrs-collapse-btn {
  margin-inline-start: auto;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border: 1px solid rgba(148,163,184,.25) !important;
  border-radius: 7px;
  background: rgba(255,255,255,.04) !important;
  color: var(--wrs-muted) !important;
  cursor: pointer !important;
  flex-shrink: 0;
  position: relative !important;
  z-index: 10 !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
}
.wrs-collapse-btn:hover { background: rgba(255,255,255,.1) !important; color: #fff !important; }
.wrs-collapse-btn svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

.wrs-shell.is-collapsed .wrs-brand > span,
.wrs-shell.is-collapsed .wrs-brand strong,
.wrs-shell.is-collapsed .wrs-brand-logo { display: none !important; }
.wrs-shell.is-collapsed .wrs-brand { justify-content: center; padding-inline: 4px; }
.wrs-shell.is-collapsed .wrs-collapse-btn { margin: 0 auto !important; }
.wrs-shell.is-collapsed .wrs-collapse-btn svg { transform: rotate(180deg); }

/* App Switcher */
.wrs-app-switcher {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  background: #091a32 !important;
  border: 1px solid rgba(56, 189, 248, 0.25) !important;
  border-radius: 12px;
  padding: 4px;
  margin: 0 2px 2px;
  flex-shrink: 0;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
}
.wrs-app-switch-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent !important;
  background: rgba(255, 255, 255, 0.05) !important;
  color: #94a3b8 !important;
  padding: 8px 6px;
  font-size: 12px !important;
  font-weight: 700 !important;
  border-radius: 9px;
  cursor: pointer;
  text-align: center;
  transition: all .2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
  font-family: var(--wrs-font) !important;
  text-decoration: none !important;
}
.wrs-app-switch-btn:hover {
  color: #ffffff !important;
  background: rgba(56, 189, 248, 0.16) !important;
  border-color: rgba(56, 189, 248, 0.3) !important;
}
.wrs-app-switch-btn.active {
  background: var(--wrs-color-brand-gradient) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 4px 14px rgba(21, 151, 255, 0.35) !important;
}
.wrs-shell.is-collapsed .wrs-app-switcher { display: none !important; }

/* ------------------ 2. Scrollable Middle Compartment (Navigation + Widgets) ------------------ */
.wrs-sidebar-scrollable {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(148,163,184,.25) transparent;
}

.wrs-sidebar-scrollable::-webkit-scrollbar {
  width: 5px;
}
.wrs-sidebar-scrollable::-webkit-scrollbar-track {
  background: transparent;
}
.wrs-sidebar-scrollable::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.25);
  border-radius: 4px;
}
.wrs-sidebar-scrollable::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.4);
}

/* Section Label */
.wrs-nav-section-label {
  margin: 6px 8px 4px;
  color: var(--wrs-color-brand-accent, #38bdf8) !important;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.wrs-shell.is-collapsed .wrs-nav-section-label { display: none !important; }

/* Navigation Tree */
.wrs-nav { display: grid; gap: 2px; flex-shrink: 0; }
.wrs-nav-link {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0 !important;
  border-radius: var(--wrs-radius);
  background: transparent !important;
  color: #cbd5e1 !important;
  padding: 8px 10px;
  text-align: start;
  font: 600 13px/1.3 var(--wrs-font) !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.wrs-nav-link:hover {
  background: rgba(56,189,248,.12) !important;
  color: #ffffff !important;
}
.wrs-nav-link.is-active {
  background: linear-gradient(135deg, var(--wrs-color-brand-glow, rgba(21, 151, 255, 0.25)) 0%, transparent 100%) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border-inline-start: 3px solid var(--wrs-color-brand-primary) !important;
}
.wrs-nav-link.is-active .wrs-nav-icon {
  stroke: var(--wrs-color-brand-primary) !important;
  color: var(--wrs-color-brand-primary) !important;
}
.wrs-nav-link:focus-visible { outline: 2px solid var(--wrs-focus); outline-offset: 2px; }
.wrs-nav-icon { width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.wrs-shell.is-collapsed .wrs-nav-link span { display: none !important; }
.wrs-shell.is-collapsed .wrs-nav-link { justify-content: center; padding: 10px; }

/* ------------------ Financial Sidebar Widgets (Scrolls inside Middle Compartment) ------------------ */
.wrs-sidebar-widgets-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
  flex-shrink: 0;
}
.wrs-shell.is-collapsed .wrs-sidebar-widgets-section { display: none !important; }

/* ------------------ Collapsed: Promo Card ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */
.wrs-shell.is-collapsed .wrs-sidebar-promo-container { display: none !important; }

/* ------------------ Collapsed: Footer Controls Row ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */
.wrs-shell.is-collapsed .wrs-download-badge { display: none !important; }
.wrs-shell.is-collapsed .wrs-footer-controls-row { justify-content: center !important; }
.wrs-shell.is-collapsed .wrs-lang-trigger {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  border-radius: 10px !important;
}
.wrs-shell.is-collapsed .wrs-lang-trigger .wrs-flag-icon {
  font-size: 16px !important;
  line-height: 1 !important;
}
.wrs-shell.is-collapsed .wrs-lang-trigger .wrs-lang-code {
  display: block !important;
  font-size: 9.5px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  color: #94a3b8 !important;
  text-transform: uppercase !important;
}
.wrs-shell.is-collapsed .wrs-lang-trigger .wrs-chevron-icon {
  display: none !important;
}
.wrs-shell.is-collapsed .wrs-lang-menu {
  position: absolute !important;
  bottom: 0 !important;
  left: calc(100% + 12px) !important;
  right: auto !important;
  min-width: 160px !important;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.85) !important;
  z-index: 999999 !important;
}
[dir="rtl"] .wrs-shell.is-collapsed .wrs-lang-menu,
.wrs-shell[dir="rtl"].is-collapsed .wrs-lang-menu,
.dir-rtl .wrs-shell.is-collapsed .wrs-lang-menu {
  left: auto !important;
  right: calc(100% + 12px) !important;
}

/* ------------------ Collapsed: User Profile Card ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */
.wrs-shell.is-collapsed .wrs-user-meta-left { display: none !important; }
.wrs-shell.is-collapsed .wrs-user-profile-card {
  justify-content: center !important;
  padding: 4px !important;
}
.wrs-shell.is-collapsed .wrs-logout-btn {
  width: 44px !important;
  height: 44px !important;
  justify-content: center !important;
  padding: 0 !important;
}

.wrs-side-widget-card {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 12px;
  padding: 10px 12px;
}

.wrs-side-widget-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 500;
  color: #94a3b8;
}

.wrs-side-widget-val {
  font-size: 17px;
  font-weight: 800;
  color: #ffffff;
  margin: 3px 0 2px;
  letter-spacing: -0.01em;
}

.wrs-side-widget-timestamps {
  font-size: 10px;
  color: #64748b;
  line-height: 1.3;
  margin-bottom: 8px;
  font-family: var(--wrs-font-mono);
}

.wrs-side-widget-btn {
  width: 100%;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 11.5px;
  font-weight: 700;
  color: #f8fafc;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.15s ease;
  font-family: var(--wrs-font);
}

.wrs-side-widget-btn:hover {
  background: rgba(56, 189, 248, 0.18);
  border-color: rgba(56, 189, 248, 0.4);
  color: #ffffff;
}

.wrs-side-rate-card {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 10px;
  padding: 8px 12px;
  text-align: center;
  font-size: 12.5px;
  font-weight: 800;
  color: #38bdf8;
  letter-spacing: 0.02em;
}

.wrs-side-support-banner {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 10.5px;
  color: #fde68a;
  line-height: 1.35;
  display: flex;
  gap: 7px;
  align-items: flex-start;
}

.wrs-side-support-banner svg {
  flex-shrink: 0;
  color: #f59e0b;
  margin-top: 1px;
}

.wrs-side-support-banner a {
  color: #fbbf24 !important;
  text-decoration: underline !important;
  font-weight: 700;
}

.wrs-status-indicator-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-inline-end: 4px;
}

.wrs-status-indicator-dot.green {
  background: #22c55e;
  box-shadow: 0 0 8px #22c55e;
}

/* ------------------ 3. Pinned Bottom Compartment (Language + Download + Agent Card) ------------------ */
.wrs-sidebar-bottom {
  flex-shrink: 0;
  padding: 10px 10px 12px;
  background: #0d111a;
  border-top: 1px solid rgba(148, 163, 184, 0.14);
  position: relative !important;
  z-index: 99999 !important;
  overflow: visible !important;
  margin-top: auto;
}

.wrs-user-footer {
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
  padding: 0 !important;
  margin: 0 !important;
  position: relative !important;
  z-index: 99999 !important;
  overflow: visible !important;
}

.wrs-footer-controls-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  position: relative !important;
  z-index: 99999 !important;
  overflow: visible !important;
}

.wrs-lang-dropdown {
  position: relative !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  z-index: 999999 !important;
  overflow: visible !important;
}

.wrs-lang-trigger {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: rgba(15, 23, 42, 0.75) !important;
  border: 1px solid rgba(148, 163, 184, 0.22) !important;
  border-radius: 8px !important;
  padding: 5px 8px !important;
  color: #f8fafc !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.wrs-lang-trigger:hover,
.wrs-lang-dropdown.is-open .wrs-lang-trigger {
  background: rgba(255, 255, 255, 0.09) !important;
  border-color: rgba(56, 189, 248, 0.45) !important;
  color: #ffffff !important;
}

.wrs-lang-menu {
  display: none !important;
  position: absolute !important;
  bottom: calc(100% + 6px) !important;
  left: 0 !important;
  min-width: 140px !important;
  background: #091a32 !important;
  border: 1px solid rgba(148, 163, 184, 0.25) !important;
  border-radius: 10px !important;
  padding: 4px !important;
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.75) !important;
  z-index: 999999 !important;
  flex-direction: column !important;
  gap: 3px !important;
}

[dir="rtl"] .wrs-lang-menu,
.dir-rtl .wrs-lang-menu {
  left: auto !important;
  right: 0 !important;
}

.wrs-lang-dropdown.is-open .wrs-lang-menu {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.wrs-lang-menu-item {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  padding: 7px 10px !important;
  border: 0 !important;
  background: transparent !important;
  border-radius: 7px !important;
  color: #cbd5e1 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  text-align: start !important;
  outline: none !important;
}

.wrs-lang-menu-item:hover {
  background: rgba(56, 189, 248, 0.16) !important;
  color: #ffffff !important;
}

.wrs-lang-menu-item.is-active {
  background: linear-gradient(135deg, #1476d1, #0284c7) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.4) !important;
}

.wrs-download-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: rgba(34, 197, 94, 0.12) !important;
  border: 1px solid rgba(34, 197, 94, 0.28) !important;
  border-radius: 8px !important;
  padding: 5px 9px !important;
  color: #4ade80 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
  white-space: nowrap !important;
}

.wrs-download-badge:hover {
  background: rgba(34, 197, 94, 0.22) !important;
  border-color: rgba(34, 197, 94, 0.45) !important;
  color: #86efac !important;
}

.wrs-user-profile-card {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: rgba(15, 23, 42, 0.75) !important;
  border: 1px solid rgba(148, 163, 184, 0.22) !important;
  border-radius: 10px !important;
  padding: 7px 10px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.wrs-user-meta-left {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.wrs-user-name-line {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  color: #ffffff;
}

.wrs-user-id-line {
  font-size: 9.5px;
  font-family: var(--wrs-font-mono);
  color: #64748b;
  margin-top: 2px;
  padding-left: 13px;
}

.dir-rtl .wrs-user-id-line {
  padding-left: 0;
  padding-right: 13px;
}

.wrs-logout-btn {
  color: #94a3b8 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 4px !important;
  border-radius: 6px !important;
  transition: all 0.15s ease !important;
  text-decoration: none !important;
}

.wrs-logout-btn:hover {
  color: #f87171 !important;
  background: rgba(239, 68, 68, 0.14) !important;
}

/* ------------------ MAIN CANVAS ------------------ */
.wrs-canvas {
  width: 100% !important;
  min-width: 0 !important;
  height: var(--wrs-vh, 100vh) !important;
  max-height: var(--wrs-vh, 100vh) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  /* zero scrollbar gutter */
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.25) transparent;
  display: flex;
  flex-direction: column;
  background: #f8fafc !important;
  padding: 24px 32px 60px !important;
  box-sizing: border-box !important;
}

.wrs-canvas::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
.wrs-canvas::-webkit-scrollbar-track {
  background: transparent;
}
.wrs-canvas::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.25);
  border-radius: 9999px;
}
.wrs-canvas::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 116, 139, 0.5);
}

@media (max-width: 1024px), (pointer: coarse) {
  .wrs-canvas {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .wrs-canvas::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }
}

/* Application Mount */
#wrs-app-mount {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  position: relative;
  width: 100%;
  max-width: 100% !important;
  margin: 0 auto;
}

#wrs-app-mount > #root,
#wrs-app-mount > #wrsnexus-root {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Responsive */
/* ------------------ Multi-Tier Master Responsive Breakpoints ------------------ */

/* 1. Tablet Rail Mode (768px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  .wrs-shell {
  display: grid;
  grid-template-columns: var(--wrs-sidebar-width, 264px) minmax(0, 1fr);
  width: 100vw !important;
  width: 100% !important;
  height: var(--wrs-vh, 100vh) !important;
  max-height: var(--wrs-vh, 100vh) !important;
  overflow: hidden !important;
  background: #f8fafc;
  transition: grid-template-columns .22s ease;
}
  .wrs-brand > span, .wrs-brand strong, .wrs-nav-section-label, .wrs-nav-link span, .wrs-user-meta-left, .wrs-app-switcher, .wrs-footer-controls-row { display: none !important; }
  .wrs-brand { justify-content: center; padding-inline: 4px; }
  .wrs-nav-link { justify-content: center; padding: 10px; }
  .wrs-user-profile-card { justify-content: center; padding: 8px 4px; }
  .wrs-collapse-btn { display: none !important; }
}

/* 2. Full Mobile Phone & Telegram Webview (< 768px): 100% Canvas + Sleek Mobile Shell */
@media (max-width: 768px) {
  .wrs-broadcast-bar {
    display: none !important;
  }

  .wrs-shell {
    display: flex !important;
    flex-direction: column !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: var(--wrs-vh, 100vh) !important;
    max-height: var(--wrs-vh, 100vh) !important;
    overflow: hidden !important;
    background: #f8fafc !important;
  }

  .wrs-sidebar {
    position: relative !important;
    height: auto !important;
    max-height: none !important;
    width: 100% !important;
    max-width: 100vw !important;
    background: var(--wrs-color-bg-sidebar) !important;
    border-inline-end: none !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.15) !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    color: var(--wrs-text) !important;
    z-index: 100 !important;
    flex-shrink: 0 !important;
  }

  .wrs-sidebar-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .wrs-brand {
    padding: 0 !important;
    gap: 6px !important;
    font-size: 15px !important;
  }

  .wrs-brand-logo {
    height: 18px !important;
  }

  .wrs-app-switcher {
    display: inline-flex !important;
    gap: 4px !important;
    padding: 2px !important;
    margin: 0 !important;
  }

  .wrs-app-switch-btn {
    padding: 4px 8px !important;
    font-size: 11px !important;
  }

  .wrs-sidebar-scrollable {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 6px 10px !important;
    gap: 6px !important;
    white-space: nowrap !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
  }

  .wrs-nav-section-label {
    display: none !important;
  }

  .wrs-nav {
    display: flex !important;
    flex-direction: row !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
  }

  .wrs-nav-link {
    padding: 5px 10px !important;
    font-size: 11.5px !important;
    gap: 5px !important;
    white-space: nowrap !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  .wrs-sidebar-widgets-section,
  .wrs-sidebar-promo,
  .wrs-sidebar-promo-container,
  .wrs-sidebar-bottom,
  .wrs-collapse-btn {
    display: none !important;
  }

  .wrs-canvas {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    height: auto !important;
    flex: 1 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    background: #f8fafc !important;
    padding: 12px 14px calc(110px + env(safe-area-inset-bottom, 24px)) !important;
    box-sizing: border-box !important;
  }

  #wrs-app-mount {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  position: relative;
  width: 100%;
  max-width: 100% !important;
  margin: 0 auto;
}
}

/* Additional Bidi & RTL Quality Enforcements */
.wrs-user-name-text,
.wrs-user-id-line {
  direction: ltr !important;
  unicode-bidi: isolate !important;
  text-align: start !important;
}

.dir-rtl .wrs-logout-btn svg,
[dir="rtl"] .wrs-logout-btn svg {
  transform: rotate(180deg);
}


/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
   THEME-LEVEL UNIVERSAL DESIGN SYSTEM FOR ALL PLUGINS & SUITE APPS
   ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */

/* ------------------ Universal Pagination Component ------------------ */
.wrs-pagination,
.pagination-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin-top: 24px !important;
  padding-bottom: 12px !important;
  direction: ltr !important;
}

.wrs-pagination-nav,
.pagination-nav {
  height: 36px !important;
  padding: 0 16px !important;
  border-radius: 10px !important;
  border: 1px solid var(--wrs-color-border-default) !important;
  background: #ffffff !important;
  color: var(--wrs-color-text-strong) !important;
  font: 600 13px/1 var(--wrs-font, "Inter", sans-serif) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03) !important;
  transition: all 0.15s ease !important;
}

.wrs-pagination-nav:hover:not(:disabled),
.pagination-nav:hover:not(:disabled) {
  background: #f8fafc !important;
  border-color: var(--wrs-color-border-strong) !important;
  color: #0f172a !important;
}

.wrs-pagination-nav:disabled,
.pagination-nav:disabled {
  color: #cbd5e1 !important;
  background: #ffffff !important;
  cursor: not-allowed !important;
  opacity: 0.6 !important;
}

.wrs-pagination-numbers,
.pagination-numbers {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.wrs-pagination-page,
.pagination-page {
  min-width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  border: 1px solid var(--wrs-color-border-default) !important;
  background: #ffffff !important;
  color: var(--wrs-color-text-secondary) !important;
  font: 600 13px/1 var(--wrs-font, "Inter", sans-serif) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03) !important;
  transition: all 0.15s ease !important;
}

.wrs-pagination-page:hover:not(.current):not(.active),
.pagination-page:hover:not(.current):not(.active) {
  background: #f8fafc !important;
  border-color: var(--wrs-color-border-strong) !important;
  color: #0f172a !important;
}

.wrs-pagination-page.current,
.wrs-pagination-page.active,
.pagination-page.current,
.pagination-page.active {
  border-color: var(--wrs-color-info-solid) !important;
  background: var(--wrs-color-info-solid) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(2,132,199,0.25) !important;
}

.wrs-pagination-ellipsis,
.pagination-ellipsis {
  color: #94a3b8 !important;
  font-weight: 700 !important;
  padding: 0 4px !important;
  align-self: center !important;
  font-size: 14px !important;
}

/* ------------------ Universal Table & Card Utilities ------------------ */
.wrs-card,
.wrs-table-card {
  background: #ffffff !important;
  border-radius: 16px !important;
  border: 1px solid var(--wrs-color-border-subtle) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.03) !important;
  overflow: hidden !important;
}

.wrs-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 10px !important;
  border-radius: 14px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
}

.wrs-badge--success {
  background: var(--wrs-color-success-bg) !important;
  color: var(--wrs-color-success-text) !important;
}

.wrs-badge--warning {
  background: var(--wrs-color-warning-bg) !important;
  color: var(--wrs-color-warning-text) !important;
}

.wrs-badge--danger {
  background: var(--wrs-color-danger-bg) !important;
  color: var(--wrs-color-danger-solid) !important;
}

/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
   MASTER TYPOGRAPHY & TABULAR NUMBERS ENFORCEMENT
   ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */
/* RTL typography enforcement */
.dir-rtl, [dir="rtl"] {
  direction: rtl;
}

.wrs-western-nums,
input[type="number"],
.rd-metric-val,
.stat-card .val,
.ge-stat-val,
.req-cell-limit {
  font-family: var(--wrs-font-mono) !important;
  font-variant-numeric: tabular-nums lining-nums !important;
  font-feature-settings: "tnum" 1, "lnum" 1 !important;
  letter-spacing: -0.01em;
}

/* ------------ Sidebar Promo Card (1win Exact Match Full-Width Proportions) ------------------------------------ */
.wrs-sidebar-promo-container {
  margin: 6px 2px 6px 2px;
  padding: 0;
  box-sizing: border-box;
  width: auto;
}

.wrs-sidebar-promo-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 60px;
  padding: 6px 16px;
  background: linear-gradient(115deg, #132238 0%, #1e334f 60%, #101c2e 100%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  cursor: pointer;
  box-sizing: border-box;
  width: 100%;
  position: relative;
}

.wrs-sidebar-promo-card:hover {
  background: linear-gradient(115deg, #182b45 0%, #264265 60%, #15243a 100%);
  border-color: rgba(21, 151, 255, 0.5);
  transform: translateY(-1.5px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4), 0 0 16px rgba(21, 151, 255, 0.25);
}

.wrs-sidebar-promo-img {
  width: 68px;
  height: 46px;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.45));
  transition: transform 0.22s ease;
  flex-shrink: 0;
}

.wrs-sidebar-promo-card:hover .wrs-sidebar-promo-img {
  transform: scale(1.08) rotate(-1.5deg);
}

.wrs-sidebar-promo-content {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  min-width: 0;
  justify-content: center;
}

[dir="ltr"] .wrs-sidebar-promo-content,
html[lang="en"] .wrs-sidebar-promo-content,
html[lang="fr"] .wrs-sidebar-promo-content {
  align-items: flex-start;
  text-align: left;
}

.wrs-sidebar-promo-title {
  font-size: 13.5px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.2;
  white-space: nowrap;
  letter-spacing: -0.01em;
}
.wrs-sidebar-promo-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
[dir="rtl"] .wrs-sidebar-promo-content {
  align-items: flex-start;
  text-align: right;
  padding-right: 4px;
}

/* ------------ Universal Search Input Container (Logical RTL/LTR Aware) ------------------------------------------ */
.wrs-search-input-box {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 100%;
  max-width: 280px;
}

.wrs-search-input-box input {
  width: 100%;
  height: 40px;
  padding-inline-start: 38px;
  padding-inline-end: 14px;
  border-radius: 10px;
  border: 1px solid var(--wrs-color-border-default);
  font-size: 13.5px;
  color: var(--wrs-color-text-primary);
  background: #ffffff;
  outline: none;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.wrs-search-input-box input:focus {
  border-color: var(--wrs-color-brand-primary, #1597ff);
  box-shadow: 0 0 0 3px rgba(21, 151, 255, 0.15);
}

.wrs-search-input-box .wrs-search-icon-pos {
  position: absolute;
  inset-inline-start: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  color: #94a3b8;
}

/* ------------ Universal Vector Icon System Styling ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */
.wrs-vector-icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

/* ------------------ Gift Engine Official Dark Theme Canvas Alignment ------------------ */
.wrs-shell[data-app="gift"] .wrs-canvas, body.wrs-gift-engine-page .wrs-canvas, .wrs-canvas:has(.ge-app-container) { background: var(--wrs-color-bg-sidebar) !important; color: #ffffff !important; }
.wrs-shell[data-app="gift"] #wrs-app-mount, body.wrs-gift-engine-page #wrs-app-mount { background: var(--wrs-color-bg-sidebar) !important; max-width: 100% !important; width: 100% !important; }


/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
   FOUC PREVENTION ------ wrs-pre-collapse (mirrors .wrs-shell.is-collapsed)
   Applied on <html> via inline head script BEFORE first paint.
   Removed by shell.js immediately after is-collapsed class is set on #wrs-shell.
   ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */
html.wrs-pre-collapse .wrs-shell {
  grid-template-columns: var(--wrs-sidebar-collapsed) minmax(0,1fr) !important;
}
html.wrs-pre-collapse .wrs-sidebar-promo-container,
html.wrs-pre-collapse .wrs-download-badge,
html.wrs-pre-collapse .wrs-app-switcher,
html.wrs-pre-collapse .wrs-nav-section-label,
html.wrs-pre-collapse .wrs-sidebar-widgets-section,
html.wrs-pre-collapse .wrs-user-meta-left,
html.wrs-pre-collapse .wrs-brand > span,
html.wrs-pre-collapse .wrs-brand strong,
html.wrs-pre-collapse .wrs-brand-logo { display: none !important; }
html.wrs-pre-collapse .wrs-brand { justify-content: center; padding-inline: 4px; }
html.wrs-pre-collapse .wrs-collapse-btn { margin: 0 auto !important; }
html.wrs-pre-collapse .wrs-collapse-btn svg { transform: rotate(180deg); }
html.wrs-pre-collapse .wrs-nav-link { justify-content: center; padding: 10px; }
html.wrs-pre-collapse .wrs-nav-link span { display: none !important; }
html.wrs-pre-collapse .wrs-footer-controls-row { justify-content: center !important; }
html.wrs-pre-collapse .wrs-lang-trigger .wrs-lang-code,
html.wrs-pre-collapse .wrs-lang-trigger .wrs-chevron-icon { display: none !important; }
html.wrs-pre-collapse .wrs-lang-trigger {
  justify-content: center !important;
  width: 44px !important; height: 44px !important;
  padding: 0 !important; border-radius: 10px !important;
}
html.wrs-pre-collapse .wrs-user-profile-card { justify-content: center !important; padding: 4px !important; }
html.wrs-pre-collapse .wrs-logout-btn { width: 44px !important; height: 44px !important; justify-content: center !important; padding: 0 !important; }
/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
   OFFICIAL LOGIN PORTAL ------ 100% FULL-CANVAS ISOLATION (NO SIDEBAR, FULL BLEED)
   ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */
body.wrs-app-gift,
.wrs-app-gift {
  --wrs-color-bg-canvas: var(--wrs-color-bg-dark-canvas, #090b10);
  background: var(--wrs-color-bg-dark-canvas, #090b10) !important;
}

body.wrs-app-login,
body.wrs-app-login html,
html:has(body.wrs-app-login),
body:has(.wrs-shell[data-app="login"]) {
  background: var(--wrs-color-bg-sidebar) !important;
  width: 100vw !important;
  height: var(--wrs-vh, 100vh) !important;
  overflow: hidden !important;
}

body.wrs-app-login .wrs-shell,
.wrs-shell[data-app="login"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  grid-template-columns: 1fr !important;
  width: 100vw !important;
  width: 100% !important;
  min-height: var(--wrs-vh, 100vh) !important;
  height: var(--wrs-vh, 100vh) !important;
  background: var(--wrs-color-bg-sidebar) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

body.wrs-app-login .wrs-sidebar,
.wrs-shell[data-app="login"] .wrs-sidebar {
  display: none !important;
  width: 0 !important;
}

body.wrs-app-login .wrs-canvas,
.wrs-shell[data-app="login"] .wrs-canvas {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100vw !important;
  width: 100% !important;
  height: var(--wrs-vh, 100vh) !important;
  min-height: var(--wrs-vh, 100vh) !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

body.wrs-app-login #wrs-app-mount,
.wrs-shell[data-app="login"] #wrs-app-mount {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.wrs-app-login #wrs-auth-root,
.wrs-shell[data-app="login"] #wrs-auth-root {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body.wrs-app-login .wrs-auth-shell,
.wrs-shell[data-app="login"] .wrs-auth-shell {
  width: 100% !important;
  min-height: var(--wrs-vh, 100vh) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 24px !important;
  box-sizing: border-box !important;
  background: radial-gradient(circle at 20% 20%, rgba(21, 151, 255, 0.08), transparent 40%),
              radial-gradient(circle at 80% 80%, rgba(230, 145, 36, 0.08), transparent 40%),
              #0d111a !important;
}

body.wrs-app-login .wrs-auth-card,
.wrs-shell[data-app="login"] .wrs-auth-card {
  width: 100% !important;
  max-width: 440px !important;
  margin: auto !important;
  box-sizing: border-box !important;
}

/* ------------------ Compact Agent Code Chip & Footer Alignment ------------------ */

/* ===================================================================
   1. Master Agent Code & Identity Typography (Zero-Artifacts)
   =================================================================== */
.wrs-agent-code-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-family: 'DM Mono', 'SF Mono', Consolas, monospace !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #38bdf8 !important;
  background: rgba(56, 189, 248, 0.12) !important;
  border: 1px solid rgba(56, 189, 248, 0.3) !important;
  border-radius: 6px !important;
  padding: 2px 8px !important;
  margin-top: 3px !important;
  letter-spacing: 0.06em !important;
  white-space: nowrap !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.15) !important;
  transition: all 0.15s ease !important;
}

.wrs-agent-code-chip:hover {
  background: rgba(56, 189, 248, 0.2) !important;
  border-color: rgba(56, 189, 248, 0.5) !important;
  color: #ffffff !important;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.35) !important;
}

.wrs-user-name-text {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--wrs-color-bg-surface-subtle, #ffffff) !important;
  -webkit-font-smoothing: antialiased !important;
}

/* ===================================================================
   2. Desktop Overrides (Hidden on Desktop)
   =================================================================== */
.wrs-mobile-top-header,
.wrs-mobile-bottom-dock,
.wrs-mobile-drawer-overlay {
  display: none !important;
}

/* ===================================================================
   2.5 Tablet Range (769px - 1024px) — Pre-hydration Anti-FOUC
   Defaults to 72px collapsed sidebar before JS hydration on tablets.
   Once hydrated, shell.js manages .is-collapsed toggle dynamically,
   allowing full expansion to 264px when user taps the collapse button.
   =================================================================== */
@media (min-width: 769px) and (max-width: 1024px) {
  html.wrs-pre-collapse .wrs-shell {
    grid-template-columns: var(--wrs-sidebar-collapsed, 72px) minmax(0, 1fr) !important;
  }
}

/* ===================================================================
   3. Web3 Telegram Mini App & Mobile Responsive Master Suite (<= 768px)
   =================================================================== */
@media (max-width: 768px) {

  .wrs-broadcast-bar,
  .wrs-sidebar {
    display: none !important;
  }

  .wrs-canvas, #wrs-app-mount, .wrs-main-layout, #nexus-app {
    padding-top: 14px !important;
    padding-bottom: calc(56px + var(--tg-content-safe-area-inset-bottom, var(--tg-safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)))) !important;
  }

  /* --- Top Mobile Sticky Header (48px Solid Luxury Fintech) --- */
  .wrs-mobile-top-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 48px !important;
    padding: 0 12px !important;
    background: #080c14 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .wrs-mobile-menu-btn {
    width: 44px !important;
    height: 44px !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #94a3b8 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.15s ease !important;
    flex-shrink: 0 !important;
  }
  .wrs-mobile-menu-btn:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
  }

  .wrs-mobile-balances {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
  }

  .wrs-mobile-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 3px 8px !important;
    border-radius: 9999px !important;
    font-family: 'DM Mono', monospace !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
  }
  .wrs-mobile-badge.egp {
    background: rgba(34, 197, 94, 0.12) !important;
    color: #4ade80 !important;
    border: 1px solid rgba(34, 197, 94, 0.3) !important;
  }
  .wrs-mobile-badge.usdt {
    background: rgba(245, 158, 11, 0.12) !important;
    color: #fbbf24 !important;
    border: 1px solid rgba(245, 158, 11, 0.3) !important;
  }

  .wrs-mobile-badge .badge-dot {
    width: 5px !important;
    height: 5px !important;
    border-radius: 50% !important;
  }
  .badge-dot.green { background: #22c55e !important; box-shadow: 0 0 6px #22c55e !important; }
  .badge-dot.gold { background: #f59e0b !important; box-shadow: 0 0 6px #f59e0b !important; }

  .wrs-mobile-user-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
  }

  .wrs-mobile-notif-btn {
    position: relative !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #94a3b8 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.15s ease !important;
  }
  .wrs-mobile-notif-btn:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
  }

  .wrs-notif-dot {
    position: absolute !important;
    top: 5px !important;
    right: 5px !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: #ef4444 !important;
    box-shadow: 0 0 6px #ef4444 !important;
  }

  .wrs-mobile-avatar-pill {
    text-decoration: none !important;
  }

  .wrs-mobile-avatar-3d {
    position: relative !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle at 30% 30%, #1e3a8a, #0f172a) !important;
    border: 1.5px solid rgba(56, 189, 248, 0.5) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 0 8px rgba(56, 189, 248, 0.25) !important;
  }

  .wrs-agent-online-dot {
    position: absolute !important;
    bottom: -1px !important;
    right: -1px !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #22c55e !important;
    border: 1.5px solid #080c14 !important;
    box-shadow: 0 0 6px #22c55e !important;
  }

  /* --- Compact Sidebar Drawer (275px / 72vw --- Native Feel) --- */
  .wrs-mobile-drawer-overlay {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(4, 6, 10, 0.75) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    z-index: 999999 !important;
    display: none !important;
  }
  .wrs-mobile-drawer-overlay.is-open {
    display: flex !important;
  }

  .wrs-mobile-drawer-panel {
    width: 275px !important;
    max-width: 72vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: #080c14 !important;
    border-inline-end: 1px solid rgba(255, 255, 255, 0.08) !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    box-shadow: 8px 0 36px rgba(0, 0, 0, 0.8) !important;
    position: relative !important;
    animation: slideDrawer 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    overflow: hidden !important;
    padding: 0 !important;
  }

  @keyframes slideDrawer {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
  }
  [dir="ltr"] .wrs-mobile-drawer-panel {
    animation-name: slideDrawerLtr !important;
  }
  @keyframes slideDrawerLtr {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
  }

  .wrs-mobile-drawer-panel .wrs-sidebar-top {
    padding: 10px 12px 6px !important;
    gap: 6px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    background: rgba(0, 0, 0, 0.2) !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .wrs-mobile-drawer-panel .wrs-brand {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    height: 32px !important;
    width: 100% !important;
  }

  .wrs-mobile-drawer-panel .wrs-brand-logo {
    height: 24px !important;
    max-height: 24px !important;
    width: auto !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
  }

  .wrs-mobile-drawer-panel .wrs-brand > span {
    font-size: 17px !important;
    font-weight: 900 !important;
    color: #ffffff !important;
    letter-spacing: -0.02em !important;
  }

  .wrs-mobile-drawer-panel .wrs-brand strong {
    font-size: 10.5px !important;
    padding: 1px 5px !important;
    border-radius: 4px !important;
    color: #38bdf8 !important;
    background: rgba(56, 189, 248, 0.12) !important;
    border: 1px solid rgba(56, 189, 248, 0.25) !important;
  }

  .wrs-mobile-drawer-panel .wrs-collapse-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-inline-start: auto !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 7px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #94a3b8 !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
  }

  .wrs-mobile-drawer-panel .wrs-app-switcher {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    padding: 2px !important;
    gap: 3px !important;
    border-radius: 8px !important;
    background: rgba(13, 17, 26, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
  }

  .wrs-mobile-drawer-panel .wrs-app-switch-btn {
    padding: 4px 6px !important;
    font-size: 11px !important;
    border-radius: 6px !important;
    text-align: center !important;
    font-weight: 700 !important;
    color: #94a3b8 !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .wrs-mobile-drawer-panel .wrs-app-switch-btn.active {
    background: var(--wrs-color-brand-gradient, linear-gradient(135deg, #1597ff 0%, #0070e0 100%)) !important;
    color: #ffffff !important;
  }

  .wrs-mobile-drawer-panel .wrs-sidebar-promo-card {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    min-height: 34px !important;
    height: 34px !important;
    padding: 3px 8px !important;
    border-radius: 8px !important;
    background: linear-gradient(115deg, #132238 0%, #1a2c42 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  .wrs-mobile-drawer-panel .wrs-sidebar-promo-img {
    width: 34px !important;
    height: 22px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
  }

  .wrs-mobile-drawer-panel .wrs-sidebar-promo-title {
    font-size: 11px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
  }

  .wrs-mobile-drawer-panel .wrs-sidebar-scrollable {
    padding: 4px 8px !important;
    gap: 1px !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    scrollbar-width: none !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .wrs-mobile-drawer-panel .wrs-sidebar-scrollable::-webkit-scrollbar {
    display: none !important;
  }

  .wrs-mobile-drawer-panel .wrs-nav-section-label {
    font-size: 9px !important;
    margin: 3px 0 2px 3px !important;
    color: #38bdf8 !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
  }

  .wrs-mobile-drawer-panel .wrs-nav {
    display: grid !important;
    gap: 1.5px !important;
    width: 100% !important;
  }

  .wrs-mobile-drawer-panel .wrs-nav-link {
    display: flex !important;
    align-items: center !important;
    padding: 5px 8px !important;
    font-size: 12px !important;
    gap: 7px !important;
    border-radius: 6px !important;
    color: #94a3b8 !important;
    background: transparent !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .wrs-mobile-drawer-panel .wrs-nav-icon {
    width: 15px !important;
    height: 15px !important;
    flex-shrink: 0 !important;
  }

  .wrs-mobile-drawer-panel .wrs-nav-link:hover,
  .wrs-mobile-drawer-panel .wrs-nav-link:active {
    background: rgba(56, 189, 248, 0.1) !important;
    color: #ffffff !important;
  }

  .wrs-mobile-drawer-panel .wrs-nav-link.is-active,
  .wrs-mobile-drawer-panel .wrs-nav-link.active {
    background: linear-gradient(135deg, rgba(21, 151, 255, 0.22) 0%, rgba(0, 112, 224, 0.15) 100%) !important;
    color: #38bdf8 !important;
    font-weight: 800 !important;
  }

  .wrs-mobile-drawer-panel .wrs-sidebar-bottom {
    padding: 6px 8px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    background: rgba(0, 0, 0, 0.3) !important;
    gap: 4px !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .wrs-mobile-drawer-panel .wrs-footer-controls-row {
    display: flex !important;
    gap: 4px !important;
  }

  .wrs-mobile-drawer-panel .wrs-lang-btn,
  .wrs-mobile-drawer-panel .wrs-download-btn {
    padding: 3px 6px !important;
    font-size: 10.5px !important;
    border-radius: 6px !important;
    height: 26px !important;
  }

  .wrs-mobile-drawer-panel .wrs-user-chip {
    padding: 4px 6px !important;
    font-size: 10.5px !important;
    border-radius: 6px !important;
  }

  /* --- Authentic Bottom Fixed Dock (Contained Luxury Fintech) --- */
  .wrs-mobile-bottom-dock {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: calc(var(--wrs-dock-height, 56px) + var(--wrs-safe-bottom, 0px)) !important;
    padding: 5px 8px calc(5px + var(--wrs-safe-bottom, 0px)) !important;
    background: rgba(10, 14, 23, 0.98) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5) !important;
    z-index: 999999 !important;
    align-items: center !important;
    justify-content: space-around !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .wrs-dock-item {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 !important;
    height: 100% !important;
    color: #64748b !important;
    text-decoration: none !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    position: relative !important;
    padding: 0 !important;
    margin: 0 !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
    user-select: none !important;
    -webkit-user-select: none !important;
  }

  .wrs-dock-item:active .wrs-dock-icon-wrapper {
    transform: scale(0.92) !important;
    transition: transform 0.08s ease !important;
  }

  .wrs-dock-item .wrs-dock-icon-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 36px !important;
    border-radius: 10px !important;
    color: #64748b !important;
    background: transparent !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  .wrs-dock-item .wrs-dock-icon-wrapper svg {
    width: 21px !important;
    height: 21px !important;
  }

  .wrs-dock-item.is-active .wrs-dock-icon-wrapper {
    background: var(--wrs-color-brand-gradient, linear-gradient(135deg, #1597ff 0%, #0070e0 100%)) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 10px var(--wrs-color-brand-glow, rgba(21, 151, 255, 0.45)) !important;
    transform: scale(1.02) !important;
  }

  .wrs-dock-item.is-active {
    color: #ffffff !important;
  }

  .wrs-dock-item:not(.is-active):hover .wrs-dock-icon-wrapper {
    color: #94a3b8 !important;
    background: rgba(255, 255, 255, 0.05) !important;
  }

  /* --- Spacious Uncompressed Requisites Toolbar --- */
  .wrs-pinned-top-compartment {
    position: relative !important;
    background: transparent !important;
    padding-bottom: 8px !important;
    margin-bottom: 4px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .wrs-requisites-toolbar {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .wrs-toolbar-actions-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .wrs-toolbar-search-box {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: var(--wrs-surface, #ffffff) !important;
    border: 1.5px solid var(--wrs-border, #e2e8f0) !important;
    border-radius: 10px !important;
    padding: 0 10px !important;
    height: 38px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    transition: all 0.15s ease !important;
  }
  .wrs-toolbar-search-box:focus-within {
    border-color: var(--wrs-color-brand-primary, #1597ff) !important;
    box-shadow: 0 0 0 3px var(--wrs-color-brand-glow, rgba(21, 151, 255, 0.15)) !important;
  }

  .wrs-search-input {
    border: none !important;
    background: transparent !important;
    color: var(--wrs-text, #0f172a) !important;
    outline: none !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    width: 100% !important;
  }

  .wrs-search-clear-btn {
    background: transparent !important;
    border: none !important;
    color: #94a3b8 !important;
    font-size: 16px !important;
    cursor: pointer !important;
    padding: 0 2px !important;
    line-height: 1 !important;
  }

  .wrs-toolbar-view-mode {
    display: inline-flex !important;
    background: var(--wrs-surface, #ffffff) !important;
    border: 1.5px solid var(--wrs-border, #e2e8f0) !important;
    border-radius: 10px !important;
    padding: 3px !important;
    gap: 2px !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
  }

  .wrs-view-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 5px 8px !important;
    border-radius: 7px !important;
    border: none !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.16s ease !important;
    background: transparent !important;
    color: var(--wrs-muted, #64748b) !important;
    flex-shrink: 0 !important;
  }
  .wrs-view-btn.is-active {
    background: var(--wrs-accent, #2563eb) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    box-shadow: 0 1px 4px rgba(37, 99, 235, 0.25) !important;
  }

  .wrs-toolbar-add-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    height: 38px !important;
    background: var(--wrs-color-brand-gradient, linear-gradient(135deg, #1597ff 0%, #0070e0 100%)) !important;
    border: none !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    padding: 0 12px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    box-shadow: 0 2px 8px var(--wrs-color-brand-glow, rgba(21, 151, 255, 0.3)) !important;
    transition: all 0.15s ease !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  .wrs-toolbar-status-tabs {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    background: var(--wrs-surface, #ffffff) !important;
    border: 1.5px solid var(--wrs-border, #e2e8f0) !important;
    border-radius: 10px !important;
    padding: 3px !important;
    gap: 3px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .wrs-tab-pill {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 6px 2px !important;
    border-radius: 8px !important;
    border: none !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.16s ease !important;
    background: transparent !important;
    color: var(--wrs-muted, #64748b) !important;
    white-space: nowrap !important;
    width: 100% !important;
    box-sizing: border-box !important;
    user-select: none !important;
  }

  .wrs-tab-pill.is-active {
    background: var(--wrs-bg-page, #f8fafc) !important;
    color: var(--wrs-text, #0f172a) !important;
    font-weight: 800 !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important;
  }

  .wrs-tab-count {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 18px !important;
    height: 17px !important;
    padding: 0 4px !important;
    border-radius: 9999px !important;
    font-size: 10.5px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
  }

  /* --- Floating Bulk Actions Pill --- */
  .wrs-floating-bulk-actions-bar {
    position: fixed !important;
    bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 999999 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: #0b1329 !important;
    border: 1.5px solid rgba(37, 99, 235, 0.5) !important;
    border-radius: 12px !important;
    padding: 5px 10px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 16px rgba(37, 99, 235, 0.25) !important;
    max-width: 94vw !important;
    box-sizing: border-box !important;
  }

  .wrs-bulk-count-pill {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    padding-inline-end: 4px !important;
    border-inline-end: 1px solid rgba(255, 255, 255, 0.15) !important;
  }

  .wrs-bulk-count-num {
    background: #2563eb !important;
    color: #ffffff !important;
    border-radius: 50% !important;
    width: 18px !important;
    height: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 10px !important;
    font-weight: 900 !important;
  }

  .wrs-bulk-btn {
    border-radius: 7px !important;
    padding: 4px 8px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    border: none !important;
  }
  .wrs-bulk-activate {
    background: rgba(34, 197, 94, 0.18) !important;
    border: 1px solid rgba(34, 197, 94, 0.4) !important;
    color: #4ade80 !important;
  }
  .wrs-bulk-pause {
    background: rgba(245, 158, 11, 0.18) !important;
    border: 1px solid rgba(245, 158, 11, 0.4) !important;
    color: #fbbf24 !important;
  }
  .wrs-bulk-delete {
    background: rgba(239, 68, 68, 0.18) !important;
    border: 1px solid rgba(239, 68, 68, 0.4) !important;
    color: #f87171 !important;
  }
  .wrs-bulk-clear {
    background: transparent !important;
    border: none !important;
    color: #94a3b8 !important;
    padding: 3px 5px !important;
    font-size: 10.5px !important;
  }
}


/* ===================================================================
   Master Native Mobile App Scroll Canvas & Universal Pagination Suite
   =================================================================== */
@media (max-width: 768px) {
  html, body.wrs-platform-canvas, .wrs-shell {
    height: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    inset: 0 !important;
  }

  .wrs-canvas {
    position: absolute !important;
    top: 48px !important; /* Below top mobile header */
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: calc(100dvh - 48px) !important;
    max-height: calc(100dvh - 48px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
    padding: 8px 12px var(--wrs-safe-pad-bottom, calc(78px + env(safe-area-inset-bottom, 20px))) !important;
    box-sizing: border-box !important;
    background: #f8fafc !important;
    display: block !important;
  }

  #wrs-app-mount,
  .wrs-hub-root,
  .wrs-requisites-view,
  .wrs-deals-container {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .wrs-pagination.pagination-row {
    margin: 16px 0 20px 0 !important;
    padding: 12px 14px !important;
    background: var(--wrs-surface, #ffffff) !important;
    border-top: 1.5px solid var(--wrs-border, #e2e8f0) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    position: relative !important;
    z-index: 10 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    user-select: none !important;
  }

  .wrs-pagination .pagination-page {
    min-width: 40px !important;
    height: 40px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    border-radius: 10px !important;
  }

  .wrs-pagination .pagination-nav {
    height: 40px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    border-radius: 10px !important;
  }
}



/* ==============================================================================
   Official Mobile Drawer Suite (Exact Authentic Replica of Desktop Master Sidebar)
   ============================================================================== */
@media (max-width: 768px) {
  .wrs-mobile-drawer-overlay {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(4, 6, 10, 0.8) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    z-index: 10000000 !important; /* Overlays bottom dock completely */
    display: none !important;
  }
  .wrs-mobile-drawer-overlay.is-open {
    display: flex !important;
  }

  .wrs-mobile-drawer-panel {
    width: 290px !important;
    max-width: 82vw !important;
    height: 100% !important;
    height: 100dvh !important;
    background: #080c14 !important;
    border-inline-end: 1px solid rgba(255, 255, 255, 0.1) !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    box-shadow: 12px 0 48px rgba(0, 0, 0, 0.9) !important;
    position: relative !important;
    overflow: hidden !important;
    padding: 0 !important;
    z-index: 10000001 !important;
  }

  /* ── 1. Top Pinned Section: Brand + Switcher + Promo Card ── */
  .wrs-mobile-drawer-panel .wrs-sidebar-top {
    padding: 12px 14px 8px !important;
    gap: 8px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: #060910 !important;
    display: flex !important;
    flex-direction: column !important;
    flex-shrink: 0 !important;
  }

  .wrs-mobile-drawer-panel .wrs-brand {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }
  .wrs-mobile-drawer-panel .wrs-brand-logo {
    width: 26px !important;
    height: 26px !important;
  }
  .wrs-mobile-drawer-panel .wrs-brand > span {
    font-size: 18px !important;
    font-weight: 900 !important;
    color: #ffffff !important;
  }
  .wrs-mobile-drawer-panel .wrs-brand strong {
    font-size: 11px !important;
    padding: 1px 6px !important;
    border-radius: 4px !important;
    color: #38bdf8 !important;
    background: rgba(56, 189, 248, 0.12) !important;
    border: 1px solid rgba(56, 189, 248, 0.25) !important;
  }

  .wrs-mobile-drawer-panel .wrs-collapse-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-inline-start: auto !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #94a3b8 !important;
    cursor: pointer !important;
  }

  .wrs-mobile-drawer-panel .wrs-app-switcher {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    padding: 4px !important;
    gap: 4px !important;
    border-radius: 10px !important;
    background: #0d111a !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .wrs-mobile-drawer-panel .wrs-app-switch-btn {
    width: 100% !important;
    height: 38px !important;
    padding: 0 4px !important;
    font-size: 13px !important;
    border-radius: 8px !important;
    text-align: center !important;
    font-weight: 800 !important;
    color: #94a3b8 !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }
  .wrs-mobile-drawer-panel .wrs-app-switch-btn.active {
    background: var(--wrs-color-brand-gradient, linear-gradient(135deg, #1597ff 0%, #0070e0 100%)) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 10px var(--wrs-color-brand-glow, rgba(21, 151, 255, 0.4)) !important;
  }

  /* Promo Card: Free Money with Dollars (Identical to Desktop) */
  .wrs-mobile-drawer-panel .wrs-sidebar-promo-container {
    display: block !important;
    margin: 2px 0 0 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .wrs-mobile-drawer-panel .wrs-sidebar-promo-card {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    min-height: 46px !important;
    height: 46px !important;
    padding: 4px 12px !important;
    border-radius: 10px !important;
    background: linear-gradient(115deg, #132238 0%, #1a2c42 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }
  .wrs-mobile-drawer-panel .wrs-sidebar-promo-img {
    width: 48px !important;
    height: 32px !important;
    object-fit: contain !important;
    display: block !important;
    flex-shrink: 0 !important;
  }
  .wrs-mobile-drawer-panel .wrs-sidebar-promo-title {
    font-size: 12px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
  }

  /* ── 2. Middle Scrollable Section: Navigation Links ── */
  .wrs-mobile-drawer-panel .wrs-sidebar-scrollable {
    padding: 8px 10px !important;
    gap: 2px !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .wrs-mobile-drawer-panel .wrs-nav-section-label {
    font-size: 10px !important;
    margin: 6px 0 4px 4px !important;
    color: #38bdf8 !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
  }
  .wrs-mobile-drawer-panel .wrs-nav {
    display: grid !important;
    gap: 2px !important;
    width: 100% !important;
  }
  .wrs-mobile-drawer-panel .wrs-nav-link {
    display: flex !important;
    align-items: center !important;
    padding: 7px 10px !important;
    font-size: 13px !important;
    gap: 9px !important;
    border-radius: 8px !important;
    color: #94a3b8 !important;
    background: transparent !important;
    text-decoration: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .wrs-mobile-drawer-panel .wrs-nav-icon {
    width: 17px !important;
    height: 17px !important;
    flex-shrink: 0 !important;
  }
  .wrs-mobile-drawer-panel .wrs-nav-link.is-active,
  .wrs-mobile-drawer-panel .wrs-nav-link.active {
    background: linear-gradient(135deg, rgba(21, 151, 255, 0.22) 0%, rgba(0, 112, 224, 0.15) 100%) !important;
    color: #38bdf8 !important;
    font-weight: 800 !important;
  }

  /* ── 3. Bottom Pinned Section: Language + Download + Agent Card ── */
  .wrs-mobile-drawer-panel .wrs-sidebar-bottom {
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 12px)) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: #05080e !important;
    gap: 6px !important;
    display: flex !important;
    flex-direction: column !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
  }

  .wrs-mobile-drawer-panel .wrs-footer-controls-row {
    display: flex !important;
    gap: 6px !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  .wrs-mobile-drawer-panel .wrs-lang-trigger,
  .wrs-mobile-drawer-panel .wrs-download-badge {
    height: 32px !important;
    padding: 0 10px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
  }
  .wrs-mobile-drawer-panel .wrs-download-badge {
    border: 1px solid rgba(34, 197, 94, 0.4) !important;
    background: rgba(34, 197, 94, 0.08) !important;
    color: #22c55e !important;
    text-decoration: none !important;
  }

  /* Agent Card Row (Pinned at Bottom of Drawer) */
  .wrs-mobile-drawer-panel .wrs-agent-card {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 6px 10px !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-top: 2px !important;
  }
  .wrs-mobile-drawer-panel .wrs-agent-meta {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
  }
  .wrs-mobile-drawer-panel .wrs-user-name-text {
    font-size: 12.5px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
  }
  .wrs-mobile-drawer-panel .wrs-agent-code-chip {
    font-size: 10px !important;
    padding: 1px 5px !important;
    border-radius: 4px !important;
    background: rgba(245, 158, 11, 0.15) !important;
    color: #f59e0b !important;
    border: 1px solid rgba(245, 158, 11, 0.3) !important;
    font-weight: 800 !important;
  }
  .wrs-mobile-drawer-panel .wrs-logout-btn {
    width: 28px !important;
    height: 28px !important;
    border-radius: 6px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #94a3b8 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}



/* ==============================================================================
   Extensible Rotating Sidebar Promo Carousel (Blue + Gold Themes & Smooth Motion)
   ============================================================================== */
.wrs-sidebar-promo-container {
  margin: 6px 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  width: 100% !important;
  position: relative !important;
  user-select: none !important;
}

.wrs-sidebar-promo-track {
  position: relative !important;
  width: 100% !important;
  min-height: 56px !important;
  height: 56px !important;
  overflow: hidden !important;
  border-radius: 12px !important;
}

.wrs-sidebar-promo-card {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  min-height: 56px !important;
  height: 56px !important;
  padding: 4px 14px !important;
  border-radius: 12px !important;
  text-decoration: none !important;
  overflow: hidden !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  width: 100% !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: scale(0.96) translateY(4px) !important;
  transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.22s ease, box-shadow 0.22s ease !important;
  z-index: 1 !important;
}

.wrs-sidebar-promo-card.is-active {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: scale(1) translateY(0) !important;
  z-index: 2 !important;
}

/* 1. Theme Blue (Free Money / Cash Rewards) */
.wrs-promo-theme-blue {
  background: linear-gradient(125deg, #0a1628 0%, #132e54 35%, #0f4f8a 70%, #0a1a30 100%) !important;
  background-size: 220% 220% !important;
  animation: wrsPromoAura 7s ease infinite !important;
  border: 1.5px solid rgba(56, 189, 248, 0.4) !important;
  box-shadow: 0 4px 18px rgba(10, 30, 60, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.2) !important;
}

.wrs-promo-theme-blue::before {
  content: '' !important;
  position: absolute !important;
  top: -60% !important;
  left: -70% !important;
  width: 50% !important;
  height: 220% !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), rgba(56, 189, 248, 0.3), transparent) !important;
  transform: rotate(25deg) !important;
  animation: wrsPromoShimmer 4s cubic-bezier(0.4, 0, 0.2, 1) infinite !important;
  pointer-events: none !important;
}

.wrs-promo-theme-blue:hover {
  border-color: rgba(56, 189, 248, 0.85) !important;
  box-shadow: 0 8px 26px rgba(15, 79, 138, 0.6), 0 0 20px rgba(56, 189, 248, 0.4) !important;
  transform: translateY(-1px) !important;
}
.wrs-promo-theme-blue .wrs-sidebar-promo-badge {
  background: rgba(56, 189, 248, 0.18) !important;
  color: #7dd3fc !important;
  border: 1px solid rgba(56, 189, 248, 0.3) !important;
}

/* 2. Theme Cyan / Laser Ice (Easy Earn / Bybit-Style Yield Protocol) */
.wrs-promo-theme-cyan {
  background: linear-gradient(125deg, #051926 0%, #0c2e42 35%, #083c54 70%, #03141f 100%) !important;
  background-size: 220% 220% !important;
  animation: wrsPromoAura 7s ease infinite !important;
  border: 1.5px solid rgba(0, 240, 255, 0.5) !important;
  box-shadow: 0 4px 18px rgba(0, 40, 60, 0.55), inset 0 1px 2px rgba(200, 250, 255, 0.3) !important;
}

.wrs-promo-theme-cyan::before {
  content: '' !important;
  position: absolute !important;
  top: -60% !important;
  left: -70% !important;
  width: 50% !important;
  height: 220% !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), rgba(0, 240, 255, 0.45), transparent) !important;
  transform: rotate(25deg) !important;
  animation: wrsPromoShimmer 3.8s cubic-bezier(0.4, 0, 0.2, 1) infinite !important;
  pointer-events: none !important;
}

.wrs-promo-theme-cyan:hover {
  border-color: rgba(0, 240, 255, 0.95) !important;
  box-shadow: 0 8px 28px rgba(0, 200, 230, 0.45), 0 0 24px rgba(0, 240, 255, 0.5) !important;
  transform: translateY(-1px) !important;
}
.wrs-promo-theme-cyan .wrs-sidebar-promo-badge {
  background: rgba(0, 240, 255, 0.16) !important;
  color: #a5f3fc !important;
  border: 1px solid rgba(0, 240, 255, 0.35) !important;
}

/* 3. Theme Violet (Turbo Upload / High Velocity) */
.wrs-promo-theme-violet {
  background: linear-gradient(125deg, #130a26 0%, #251347 35%, #3d1b70 70%, #110822 100%) !important;
  background-size: 220% 220% !important;
  animation: wrsPromoAura 7s ease infinite !important;
  border: 1.5px solid rgba(168, 85, 247, 0.45) !important;
  box-shadow: 0 4px 18px rgba(40, 10, 60, 0.5), inset 0 1px 1px rgba(240, 220, 255, 0.25) !important;
}

.wrs-promo-theme-violet:hover {
  border-color: rgba(192, 132, 252, 0.9) !important;
  box-shadow: 0 8px 26px rgba(147, 51, 234, 0.5), 0 0 20px rgba(168, 85, 247, 0.4) !important;
  transform: translateY(-1px) !important;
}
.wrs-promo-theme-violet .wrs-sidebar-promo-badge {
  background: rgba(168, 85, 247, 0.18) !important;
  color: #d8b4fe !important;
  border: 1px solid rgba(168, 85, 247, 0.35) !important;
}
.wrs-promo-theme-violet .wrs-sidebar-promo-icon-wrap {
  color: #c084fc !important;
  background: rgba(168, 85, 247, 0.15) !important;
  border-color: rgba(168, 85, 247, 0.3) !important;
}

/* 4. Theme Emerald (Gift Engine) */
.wrs-promo-theme-emerald {
  background: linear-gradient(125deg, #06231a 0%, #0d382b 35%, #104f3d 70%, #051f17 100%) !important;
  background-size: 220% 220% !important;
  animation: wrsPromoAura 7s ease infinite !important;
  border: 1.5px solid rgba(16, 185, 129, 0.45) !important;
  box-shadow: 0 4px 18px rgba(5, 40, 25, 0.5), inset 0 1px 1px rgba(200, 255, 230, 0.25) !important;
}

.wrs-promo-theme-emerald:hover {
  border-color: rgba(52, 211, 153, 0.9) !important;
  box-shadow: 0 8px 26px rgba(5, 150, 105, 0.5), 0 0 20px rgba(16, 185, 129, 0.4) !important;
  transform: translateY(-1px) !important;
}
.wrs-promo-theme-emerald .wrs-sidebar-promo-badge {
  background: rgba(16, 185, 129, 0.18) !important;
  color: #6ee7b7 !important;
  border: 1px solid rgba(16, 185, 129, 0.35) !important;
}
.wrs-promo-theme-emerald .wrs-sidebar-promo-icon-wrap {
  color: #34d399 !important;
  background: rgba(16, 185, 129, 0.15) !important;
  border-color: rgba(16, 185, 129, 0.3) !important;
}

/* 5. Theme Laser (Nexus Copilot / AI Core) */
.wrs-promo-theme-laser {
  background: linear-gradient(125deg, #091322 0%, #11263d 35%, #17385c 70%, #0a1626 100%) !important;
  background-size: 220% 220% !important;
  animation: wrsPromoAura 7s ease infinite !important;
  border: 1.5px solid rgba(56, 189, 248, 0.5) !important;
  box-shadow: 0 4px 18px rgba(8, 25, 45, 0.55), inset 0 1px 2px rgba(255, 255, 255, 0.3) !important;
}

.wrs-promo-theme-laser:hover {
  border-color: rgba(125, 211, 252, 0.95) !important;
  box-shadow: 0 8px 26px rgba(14, 116, 144, 0.6), 0 0 22px rgba(56, 189, 248, 0.5) !important;
  transform: translateY(-1px) !important;
}
.wrs-promo-theme-laser .wrs-sidebar-promo-badge {
  background: rgba(56, 189, 248, 0.2) !important;
  color: #bae6fd !important;
  border: 1px solid rgba(56, 189, 248, 0.4) !important;
}
.wrs-promo-theme-laser .wrs-sidebar-promo-icon-wrap {
  color: #38bdf8 !important;
  background: rgba(56, 189, 248, 0.15) !important;
  border-color: rgba(56, 189, 248, 0.35) !important;
}

@keyframes wrsPromoAura {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes wrsPromoShimmer {
  0% { left: -70%; }
  35% { left: 150%; }
  100% { left: 150%; }
}

/* Promo Visual Asset (3D Coin & Parachute / Money) */
.wrs-sidebar-promo-img {
  width: 68px !important;
  height: 48px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 8px rgba(0, 240, 255, 0.45)) !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  flex-shrink: 0 !important;
  display: block !important;
}

.wrs-promo-theme-cyan .wrs-sidebar-promo-img {
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 12px rgba(0, 240, 255, 0.6)) !important;
}

.wrs-sidebar-promo-card:hover .wrs-sidebar-promo-img {
  transform: scale(1.08) rotate(-2deg) !important;
}

/* Sleek Icon Wrap for SVG Slides */
.wrs-sidebar-promo-icon-wrap {
  width: 40px !important;
  height: 40px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  flex-shrink: 0 !important;
  transition: transform 0.25s ease !important;
}

.wrs-sidebar-promo-icon-wrap svg {
  width: 20px !important;
  height: 20px !important;
}

.wrs-sidebar-promo-card:hover .wrs-sidebar-promo-icon-wrap {
  transform: scale(1.1) !important;
}

.wrs-sidebar-promo-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  text-align: right !important;
  min-width: 0 !important;
  justify-content: center !important;
  gap: 1px !important;
}

[dir="ltr"] .wrs-sidebar-promo-content,
html[lang="en"] .wrs-sidebar-promo-content,
html[lang="it"] .wrs-sidebar-promo-content,
html[lang="de"] .wrs-sidebar-promo-content,
html[lang="ru"] .wrs-sidebar-promo-content,
html[lang="fr"] .wrs-sidebar-promo-content {
  align-items: flex-start !important;
  text-align: left !important;
}

.wrs-sidebar-promo-badge {
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.03em !important;
  padding: 1px 5px !important;
  border-radius: 4px !important;
  line-height: 1.1 !important;
  display: inline-block !important;
  white-space: nowrap !important;
}

.wrs-sidebar-promo-title {
  font-size: 13.5px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  letter-spacing: -0.01em !important;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6) !important;
}

/* Carousel Dots Indicator */
.wrs-sidebar-promo-dots {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  margin-top: 5px !important;
  padding: 0 !important;
}

.wrs-promo-dot {
  width: 5px !important;
  height: 5px !important;
  border-radius: 9999px !important;
  background: rgba(148, 163, 184, 0.35) !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.wrs-promo-dot:hover {
  background: rgba(255, 255, 255, 0.7) !important;
  transform: scale(1.2) !important;
}

.wrs-promo-dot.is-active {
  width: 14px !important;
  background: linear-gradient(90deg, #00f0ff, #38bdf8) !important;
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.6) !important;
}

@media (prefers-reduced-motion: reduce) {
  .wrs-sidebar-promo-card {
    transition: opacity 0.15s ease !important;
    animation: none !important;
  }
  .wrs-sidebar-promo-card::before {
    animation: none !important;
    display: none !important;
  }
}

@media (max-width: 768px) {
  .wrs-mobile-drawer-panel .wrs-sidebar-promo-container {
    display: block !important;
    margin: 4px 0 0 0 !important;
    width: 100% !important;
  }
  .wrs-mobile-drawer-panel .wrs-sidebar-promo-track {
    min-height: 54px !important;
    height: 54px !important;
  }
  .wrs-mobile-drawer-panel .wrs-sidebar-promo-card {
    min-height: 54px !important;
    height: 54px !important;
    padding: 4px 14px !important;
  }
  .wrs-mobile-drawer-panel .wrs-sidebar-promo-img {
    width: 74px !important;
    height: 50px !important;
  }
  .wrs-mobile-drawer-panel .wrs-sidebar-promo-title {
    font-size: 13.5px !important;
  }
}