/* ============================================
   GOLD THEME (Default)
   ============================================ */
html[data-theme='gold'],
html:not([data-theme]) {
  --theme-primary: #ffd700;
  --theme-primary-rgb: 255, 215, 0;
  --theme-secondary: #eab308;
  --theme-accent: #fbbf24;

  /* Background colors - True black/dark theme */
  --background: #0a0a0a;
  --background-secondary: #141414;
  --background-tertiary: #1a1a1a;
  --background-card: #111111;
  --border: #2a2a2a;

  /* Gradient colors for buttons/backgrounds */
  --theme-gradient-1: #fedb37;
  --theme-gradient-2: #fdb931;
  --theme-gradient-3: #9f7928;
  --theme-gradient-4: #8a6e2f;
  --theme-gradient-5: #e99c05;
  --theme-gradient-6: #f4ae00;
  --theme-gradient-7: #f8bf33;
  --theme-gradient-8: #f8ce19;
  --theme-gradient-9: #ffdc02;

  /* Glow effects */
  --theme-glow: rgba(234, 179, 8, 0.3);
  --theme-glow-strong: rgba(234, 179, 8, 0.5);

  /* Ring/Focus colors */
  --theme-ring: #eab308;

  /* Glowing border animation colors */
  --theme-border-glow-1: rgba(255, 215, 0, 1);
  --theme-border-glow-2: rgba(255, 215, 0, 0.1);

  /* User accent (for profile elements like avatar) */
  --theme-user-accent: #d4a857;
}

/* ============================================
   RED THEME
   ============================================ */
html[data-theme='red'] {
  --theme-primary: #bf1a1a;
  --theme-primary-rgb: 191, 26, 26;
  --theme-secondary: #ff6c0c;
  --theme-accent: #ffe08f;

  /* Background colors - Deep red/maroon theme */
  --background: #1a0a0a;
  --background-secondary: #2d1010;
  --background-tertiary: #3d1818;
  --background-card: #241010;
  --border: #5c2020;

  /* Gradient colors - Red/Orange/Gold metallic */
  --theme-gradient-1: #ffe08f;
  --theme-gradient-2: #ff6c0c;
  --theme-gradient-3: #bf1a1a;
  --theme-gradient-4: #8f1414;
  --theme-gradient-5: #ff6c0c;
  --theme-gradient-6: #ffe08f;
  --theme-gradient-7: #ff6c0c;
  --theme-gradient-8: #bf1a1a;
  --theme-gradient-9: #6d0f0f;

  /* Glow effects */
  --theme-glow: rgba(191, 26, 26, 0.3);
  --theme-glow-strong: rgba(255, 108, 12, 0.5);

  /* Ring/Focus colors */
  --theme-ring: #bf1a1a;

  /* Glowing border animation colors */
  --theme-border-glow-1: rgba(255, 108, 12, 1);
  --theme-border-glow-2: rgba(191, 26, 26, 0.1);

  /* User accent */
  --theme-user-accent: #ff6c0c;
}

/* ============================================
   CRIMSON THEME (Deep Wine/Burgundy)
   ============================================ */
html[data-theme='crimson'] {
  --theme-primary: #ff6b6b;
  --theme-primary-rgb: 255, 107, 107;
  --theme-secondary: #ff8c42;
  --theme-accent: #ffd93d;

  /* Background colors - Deep wine/burgundy */
  --background: #1a0808;
  --background-secondary: #2a1010;
  --background-tertiary: #3a1818;
  --background-card: #221010;
  --border: #4a2020;

  /* Gradient colors - Red/Orange/Gold metallic */
  --theme-gradient-1: #ffd93d;
  --theme-gradient-2: #ff8c42;
  --theme-gradient-3: #ff6b6b;
  --theme-gradient-4: #c94040;
  --theme-gradient-5: #ffd93d;
  --theme-gradient-6: #ff8c42;
  --theme-gradient-7: #ff6b6b;
  --theme-gradient-8: #c94040;
  --theme-gradient-9: #8b2020;

  /* Glow effects */
  --theme-glow: rgba(255, 107, 107, 0.3);
  --theme-glow-strong: rgba(255, 140, 66, 0.5);

  /* Ring/Focus colors */
  --theme-ring: #ff6b6b;

  /* Glowing border animation colors */
  --theme-border-glow-1: rgba(255, 140, 66, 1);
  --theme-border-glow-2: rgba(255, 107, 107, 0.1);

  /* User accent */
  --theme-user-accent: #ff8c42;
}

/* ============================================
   BLUE THEME
   ============================================ */
html[data-theme='blue'] {
  --theme-primary: #3b82f6;
  --theme-primary-rgb: 59, 130, 246;
  --theme-secondary: #2563eb;
  --theme-accent: #60a5fa;

  /* Background colors - Rich blue theme */
  --background: #0f1729;
  --background-secondary: #172033;
  --background-tertiary: #1e2940;
  --background-card: #131c2e;
  --border: #2d4a6d;

  /* Gradient colors - Electric blue metallic */
  --theme-gradient-1: #93c5fd;
  --theme-gradient-2: #60a5fa;
  --theme-gradient-3: #3b82f6;
  --theme-gradient-4: #2563eb;
  --theme-gradient-5: #1d4ed8;
  --theme-gradient-6: #60a5fa;
  --theme-gradient-7: #3b82f6;
  --theme-gradient-8: #2563eb;
  --theme-gradient-9: #1e40af;

  /* Glow effects */
  --theme-glow: rgba(59, 130, 246, 0.3);
  --theme-glow-strong: rgba(59, 130, 246, 0.5);

  /* Ring/Focus colors */
  --theme-ring: #3b82f6;

  /* Glowing border animation colors */
  --theme-border-glow-1: rgba(59, 130, 246, 1);
  --theme-border-glow-2: rgba(59, 130, 246, 0.1);

  /* User accent */
  --theme-user-accent: #60a5fa;
}

/* ============================================
   PURPLE THEME
   ============================================ */
html[data-theme='purple'] {
  --theme-primary: #a855f7;
  --theme-primary-rgb: 168, 85, 247;
  --theme-secondary: #9333ea;
  --theme-accent: #c084fc;

  /* Background colors - Rich purple theme */
  --background: #1a1225;
  --background-secondary: #231a30;
  --background-tertiary: #2d223d;
  --background-card: #1e162a;
  --border: #4a3366;

  /* Gradient colors - Royal purple metallic */
  --theme-gradient-1: #d8b4fe;
  --theme-gradient-2: #c084fc;
  --theme-gradient-3: #a855f7;
  --theme-gradient-4: #9333ea;
  --theme-gradient-5: #7c3aed;
  --theme-gradient-6: #c084fc;
  --theme-gradient-7: #a855f7;
  --theme-gradient-8: #8b5cf6;
  --theme-gradient-9: #6d28d9;

  /* Glow effects */
  --theme-glow: rgba(168, 85, 247, 0.3);
  --theme-glow-strong: rgba(168, 85, 247, 0.5);

  /* Ring/Focus colors */
  --theme-ring: #a855f7;

  /* Glowing border animation colors */
  --theme-border-glow-1: rgba(168, 85, 247, 1);
  --theme-border-glow-2: rgba(168, 85, 247, 0.1);

  /* User accent */
  --theme-user-accent: #c084fc;
}

/* ============================================
   GREEN THEME
   ============================================ */
html[data-theme='green'] {
  --theme-primary: #22c55e;
  --theme-primary-rgb: 34, 197, 94;
  --theme-secondary: #16a34a;
  --theme-accent: #4ade80;

  /* Background colors - Rich emerald theme */
  --background: #101f17;
  --background-secondary: #182920;
  --background-tertiary: #20352a;
  --background-card: #14241b;
  --border: #2d5c42;

  /* Gradient colors - Emerald metallic */
  --theme-gradient-1: #86efac;
  --theme-gradient-2: #4ade80;
  --theme-gradient-3: #22c55e;
  --theme-gradient-4: #16a34a;
  --theme-gradient-5: #15803d;
  --theme-gradient-6: #4ade80;
  --theme-gradient-7: #22c55e;
  --theme-gradient-8: #16a34a;
  --theme-gradient-9: #166534;

  /* Glow effects */
  --theme-glow: rgba(34, 197, 94, 0.3);
  --theme-glow-strong: rgba(34, 197, 94, 0.5);

  /* Ring/Focus colors */
  --theme-ring: #22c55e;

  /* Glowing border animation colors */
  --theme-border-glow-1: rgba(34, 197, 94, 1);
  --theme-border-glow-2: rgba(34, 197, 94, 0.1);

  /* User accent */
  --theme-user-accent: #4ade80;
}

/* ============================================
   CYAN THEME
   ============================================ */
html[data-theme='cyan'] {
  --theme-primary: #06b6d4;
  --theme-primary-rgb: 6, 182, 212;
  --theme-secondary: #0891b2;
  --theme-accent: #22d3ee;

  /* Background colors - Rich cyan/teal theme */
  --background: #0f1f22;
  --background-secondary: #17292d;
  --background-tertiary: #1e3538;
  --background-card: #132428;
  --border: #2d5c63;

  /* Gradient colors - Aqua metallic */
  --theme-gradient-1: #67e8f9;
  --theme-gradient-2: #22d3ee;
  --theme-gradient-3: #06b6d4;
  --theme-gradient-4: #0891b2;
  --theme-gradient-5: #0e7490;
  --theme-gradient-6: #22d3ee;
  --theme-gradient-7: #06b6d4;
  --theme-gradient-8: #0891b2;
  --theme-gradient-9: #155e75;

  /* Glow effects */
  --theme-glow: rgba(6, 182, 212, 0.3);
  --theme-glow-strong: rgba(6, 182, 212, 0.5);

  /* Ring/Focus colors */
  --theme-ring: #06b6d4;

  /* Glowing border animation colors */
  --theme-border-glow-1: rgba(6, 182, 212, 1);
  --theme-border-glow-2: rgba(6, 182, 212, 0.1);

  /* User accent */
  --theme-user-accent: #22d3ee;
}

/* ============================================
   PINK THEME
   ============================================ */
html[data-theme='pink'] {
  --theme-primary: #ec4899;
  --theme-primary-rgb: 236, 72, 153;
  --theme-secondary: #db2777;
  --theme-accent: #f472b6;

  /* Background colors - Vibrant pink theme */
  --background: #4a1535;
  --background-secondary: #5c1d42;
  --background-tertiary: #702550;
  --background-card: #521a3c;
  --border: #8b3060;

  /* Gradient colors - Pink metallic */
  --theme-gradient-1: #fbcfe8;
  --theme-gradient-2: #f472b6;
  --theme-gradient-3: #ec4899;
  --theme-gradient-4: #db2777;
  --theme-gradient-5: #be185d;
  --theme-gradient-6: #f472b6;
  --theme-gradient-7: #ec4899;
  --theme-gradient-8: #db2777;
  --theme-gradient-9: #9d174d;

  /* Glow effects */
  --theme-glow: rgba(236, 72, 153, 0.3);
  --theme-glow-strong: rgba(236, 72, 153, 0.5);

  /* Ring/Focus colors */
  --theme-ring: #ec4899;

  /* Glowing border animation colors */
  --theme-border-glow-1: rgba(236, 72, 153, 1);
  --theme-border-glow-2: rgba(236, 72, 153, 0.1);

  /* User accent */
  --theme-user-accent: #f472b6;
}

/* ============================================
   MAGENTA THEME
   ============================================ */
html[data-theme='magenta'] {
  --theme-primary: #d946ef;
  --theme-primary-rgb: 217, 70, 239;
  --theme-secondary: #c026d3;
  --theme-accent: #e879f9;

  /* Background colors - Vibrant magenta theme */
  --background: #4a1555;
  --background-secondary: #5c1d68;
  --background-tertiary: #70257c;
  --background-card: #521a60;
  --border: #8b3090;

  /* Gradient colors - Magenta metallic */
  --theme-gradient-1: #f5d0fe;
  --theme-gradient-2: #e879f9;
  --theme-gradient-3: #d946ef;
  --theme-gradient-4: #c026d3;
  --theme-gradient-5: #a21caf;
  --theme-gradient-6: #e879f9;
  --theme-gradient-7: #d946ef;
  --theme-gradient-8: #c026d3;
  --theme-gradient-9: #86198f;

  /* Glow effects */
  --theme-glow: rgba(217, 70, 239, 0.3);
  --theme-glow-strong: rgba(217, 70, 239, 0.5);

  /* Ring/Focus colors */
  --theme-ring: #d946ef;

  /* Glowing border animation colors */
  --theme-border-glow-1: rgba(217, 70, 239, 1);
  --theme-border-glow-2: rgba(217, 70, 239, 0.1);

  /* User accent */
  --theme-user-accent: #e879f9;
}

/* ============================================
   YELLOW THEME
   ============================================ */
html[data-theme='yellow'] {
  --theme-primary: #eab308;
  --theme-primary-rgb: 234, 179, 8;
  --theme-secondary: #ca8a04;
  --theme-accent: #facc15;

  /* Background colors - Vibrant yellow theme */
  --background: #4a4010;
  --background-secondary: #5c5015;
  --background-tertiary: #70621a;
  --background-card: #524812;
  --border: #8b7525;

  /* Gradient colors - Yellow metallic */
  --theme-gradient-1: #fef08a;
  --theme-gradient-2: #facc15;
  --theme-gradient-3: #eab308;
  --theme-gradient-4: #ca8a04;
  --theme-gradient-5: #a16207;
  --theme-gradient-6: #facc15;
  --theme-gradient-7: #eab308;
  --theme-gradient-8: #ca8a04;
  --theme-gradient-9: #854d0e;

  /* Glow effects */
  --theme-glow: rgba(234, 179, 8, 0.3);
  --theme-glow-strong: rgba(234, 179, 8, 0.5);

  /* Ring/Focus colors */
  --theme-ring: #eab308;

  /* Glowing border animation colors */
  --theme-border-glow-1: rgba(234, 179, 8, 1);
  --theme-border-glow-2: rgba(234, 179, 8, 0.1);

  /* User accent */
  --theme-user-accent: #facc15;
}

/* ============================================
   ORANGE THEME
   ============================================ */
html[data-theme='orange'] {
  --theme-primary: #f97316;
  --theme-primary-rgb: 249, 115, 22;
  --theme-secondary: #ea580c;
  --theme-accent: #fb923c;

  /* Background colors - Vibrant orange theme */
  --background: #4a2810;
  --background-secondary: #5c3215;
  --background-tertiary: #703e1a;
  --background-card: #522c12;
  --border: #8b5025;

  /* Gradient colors - Orange metallic */
  --theme-gradient-1: #fed7aa;
  --theme-gradient-2: #fb923c;
  --theme-gradient-3: #f97316;
  --theme-gradient-4: #ea580c;
  --theme-gradient-5: #c2410c;
  --theme-gradient-6: #fb923c;
  --theme-gradient-7: #f97316;
  --theme-gradient-8: #ea580c;
  --theme-gradient-9: #9a3412;

  /* Glow effects */
  --theme-glow: rgba(249, 115, 22, 0.3);
  --theme-glow-strong: rgba(249, 115, 22, 0.5);

  /* Ring/Focus colors */
  --theme-ring: #f97316;

  /* Glowing border animation colors */
  --theme-border-glow-1: rgba(249, 115, 22, 1);
  --theme-border-glow-2: rgba(249, 115, 22, 0.1);

  /* User accent */
  --theme-user-accent: #fb923c;
}

/* ============================================
   TEAL THEME
   ============================================ */
html[data-theme='teal'] {
  --theme-primary: #14b8a6;
  --theme-primary-rgb: 20, 184, 166;
  --theme-secondary: #0d9488;
  --theme-accent: #2dd4bf;

  /* Background colors - Vibrant teal theme */
  --background: #0f4a42;
  --background-secondary: #155c52;
  --background-tertiary: #1a7068;
  --background-card: #12524a;
  --border: #258b7e;

  /* Gradient colors - Teal metallic */
  --theme-gradient-1: #99f6e4;
  --theme-gradient-2: #5eead4;
  --theme-gradient-3: #2dd4bf;
  --theme-gradient-4: #14b8a6;
  --theme-gradient-5: #0d9488;
  --theme-gradient-6: #2dd4bf;
  --theme-gradient-7: #14b8a6;
  --theme-gradient-8: #0d9488;
  --theme-gradient-9: #0f766e;

  /* Glow effects */
  --theme-glow: rgba(20, 184, 166, 0.3);
  --theme-glow-strong: rgba(20, 184, 166, 0.5);

  /* Ring/Focus colors */
  --theme-ring: #14b8a6;

  /* Glowing border animation colors */
  --theme-border-glow-1: rgba(20, 184, 166, 1);
  --theme-border-glow-2: rgba(20, 184, 166, 0.1);

  /* User accent */
  --theme-user-accent: #2dd4bf;
}

/* ============================================
   INDIGO THEME
   ============================================ */
html[data-theme='indigo'] {
  --theme-primary: #6366f1;
  --theme-primary-rgb: 99, 102, 241;
  --theme-secondary: #4f46e5;
  --theme-accent: #818cf8;

  /* Background colors - Vibrant indigo theme */
  --background: #252570;
  --background-secondary: #2e2e85;
  --background-tertiary: #38389a;
  --background-card: #2a2a7a;
  --border: #4848b0;

  /* Gradient colors - Indigo metallic */
  --theme-gradient-1: #c7d2fe;
  --theme-gradient-2: #a5b4fc;
  --theme-gradient-3: #818cf8;
  --theme-gradient-4: #6366f1;
  --theme-gradient-5: #4f46e5;
  --theme-gradient-6: #818cf8;
  --theme-gradient-7: #6366f1;
  --theme-gradient-8: #4f46e5;
  --theme-gradient-9: #4338ca;

  /* Glow effects */
  --theme-glow: rgba(99, 102, 241, 0.3);
  --theme-glow-strong: rgba(99, 102, 241, 0.5);

  /* Ring/Focus colors */
  --theme-ring: #6366f1;

  /* Glowing border animation colors */
  --theme-border-glow-1: rgba(99, 102, 241, 1);
  --theme-border-glow-2: rgba(99, 102, 241, 0.1);

  /* User accent */
  --theme-user-accent: #818cf8;
}

/* ============================================
   ROSE THEME
   ============================================ */
html[data-theme='rose'] {
  --theme-primary: #f43f5e;
  --theme-primary-rgb: 244, 63, 94;
  --theme-secondary: #e11d48;
  --theme-accent: #fb7185;

  /* Background colors - Vibrant rose theme */
  --background: #5c1528;
  --background-secondary: #701a32;
  --background-tertiary: #85203c;
  --background-card: #65182c;
  --border: #a02848;

  /* Gradient colors - Rose metallic */
  --theme-gradient-1: #fecdd3;
  --theme-gradient-2: #fda4af;
  --theme-gradient-3: #fb7185;
  --theme-gradient-4: #f43f5e;
  --theme-gradient-5: #e11d48;
  --theme-gradient-6: #fb7185;
  --theme-gradient-7: #f43f5e;
  --theme-gradient-8: #e11d48;
  --theme-gradient-9: #be123c;

  /* Glow effects */
  --theme-glow: rgba(244, 63, 94, 0.3);
  --theme-glow-strong: rgba(244, 63, 94, 0.5);

  /* Ring/Focus colors */
  --theme-ring: #f43f5e;

  /* Glowing border animation colors */
  --theme-border-glow-1: rgba(244, 63, 94, 1);
  --theme-border-glow-2: rgba(244, 63, 94, 0.1);

  /* User accent */
  --theme-user-accent: #fb7185;
}

/* ============================================
   AMBER THEME
   ============================================ */
html[data-theme='amber'] {
  --theme-primary: #f59e0b;
  --theme-primary-rgb: 245, 158, 11;
  --theme-secondary: #d97706;
  --theme-accent: #fbbf24;

  /* Background colors - Vibrant amber theme */
  --background: #4a3510;
  --background-secondary: #5c4215;
  --background-tertiary: #70501a;
  --background-card: #523c12;
  --border: #8b6525;

  /* Gradient colors - Amber metallic */
  --theme-gradient-1: #fde68a;
  --theme-gradient-2: #fcd34d;
  --theme-gradient-3: #fbbf24;
  --theme-gradient-4: #f59e0b;
  --theme-gradient-5: #d97706;
  --theme-gradient-6: #fbbf24;
  --theme-gradient-7: #f59e0b;
  --theme-gradient-8: #d97706;
  --theme-gradient-9: #b45309;

  /* Glow effects */
  --theme-glow: rgba(245, 158, 11, 0.3);
  --theme-glow-strong: rgba(245, 158, 11, 0.5);

  /* Ring/Focus colors */
  --theme-ring: #f59e0b;

  /* Glowing border animation colors */
  --theme-border-glow-1: rgba(245, 158, 11, 1);
  --theme-border-glow-2: rgba(245, 158, 11, 0.1);

  /* User accent */
  --theme-user-accent: #fbbf24;
}

/* ============================================
   LIME THEME
   ============================================ */
html[data-theme='lime'] {
  --theme-primary: #84cc16;
  --theme-primary-rgb: 132, 204, 22;
  --theme-secondary: #65a30d;
  --theme-accent: #a3e635;

  /* Background colors - Vibrant lime theme */
  --background: #2a4a12;
  --background-secondary: #355c18;
  --background-tertiary: #40701e;
  --background-card: #2f5215;
  --border: #558b28;

  /* Gradient colors - Lime metallic */
  --theme-gradient-1: #d9f99d;
  --theme-gradient-2: #bef264;
  --theme-gradient-3: #a3e635;
  --theme-gradient-4: #84cc16;
  --theme-gradient-5: #65a30d;
  --theme-gradient-6: #a3e635;
  --theme-gradient-7: #84cc16;
  --theme-gradient-8: #65a30d;
  --theme-gradient-9: #4d7c0f;

  /* Glow effects */
  --theme-glow: rgba(132, 204, 22, 0.3);
  --theme-glow-strong: rgba(132, 204, 22, 0.5);

  /* Ring/Focus colors */
  --theme-ring: #84cc16;

  /* Glowing border animation colors */
  --theme-border-glow-1: rgba(132, 204, 22, 1);
  --theme-border-glow-2: rgba(132, 204, 22, 0.1);

  /* User accent */
  --theme-user-accent: #a3e635;
}

/* ============================================
   EMERALD THEME
   ============================================ */
html[data-theme='emerald'] {
  --theme-primary: #10b981;
  --theme-primary-rgb: 16, 185, 129;
  --theme-secondary: #059669;
  --theme-accent: #34d399;

  /* Background colors - Vibrant emerald theme */
  --background: #104a38;
  --background-secondary: #155c45;
  --background-tertiary: #1a7055;
  --background-card: #12523e;
  --border: #258b6a;

  /* Gradient colors - Emerald metallic */
  --theme-gradient-1: #a7f3d0;
  --theme-gradient-2: #6ee7b7;
  --theme-gradient-3: #34d399;
  --theme-gradient-4: #10b981;
  --theme-gradient-5: #059669;
  --theme-gradient-6: #34d399;
  --theme-gradient-7: #10b981;
  --theme-gradient-8: #059669;
  --theme-gradient-9: #047857;

  /* Glow effects */
  --theme-glow: rgba(16, 185, 129, 0.3);
  --theme-glow-strong: rgba(16, 185, 129, 0.5);

  /* Ring/Focus colors */
  --theme-ring: #10b981;

  /* Glowing border animation colors */
  --theme-border-glow-1: rgba(16, 185, 129, 1);
  --theme-border-glow-2: rgba(16, 185, 129, 0.1);

  /* User accent */
  --theme-user-accent: #34d399;
}

/* ============================================
   FOREST THEME
   ============================================ */
html[data-theme='forest'] {
  --theme-primary: #739e68;
  --theme-primary-rgb: 115, 158, 104;
  --theme-secondary: #587f4d;
  --theme-accent: #9fb697;

  /* Background colors based on rgb(22 45 16) */
  --background: #162d10;
  --background-secondary: #1d3718;
  --background-tertiary: #263f21;
  --background-card: #1a3215;
  --border: #395b31;

  /* Gradient colors - Muted forest green */
  --theme-gradient-1: #d2ddd0;
  --theme-gradient-2: #b4c8ae;
  --theme-gradient-3: #9fb697;
  --theme-gradient-4: #739e68;
  --theme-gradient-5: #587f4d;
  --theme-gradient-6: #8daa84;
  --theme-gradient-7: #739e68;
  --theme-gradient-8: #587f4d;
  --theme-gradient-9: #36572f;

  /* Glow effects */
  --theme-glow: rgba(115, 158, 104, 0.24);
  --theme-glow-strong: rgba(115, 158, 104, 0.38);

  /* Ring/Focus colors */
  --theme-ring: #739e68;

  /* Glowing border animation colors */
  --theme-border-glow-1: rgba(115, 158, 104, 0.9);
  --theme-border-glow-2: rgba(115, 158, 104, 0.08);

  /* User accent */
  --theme-user-accent: #9fb697;
}

/* ============================================
   SKY THEME
   ============================================ */
html[data-theme='sky'] {
  --theme-primary: #0ea5e9;
  --theme-primary-rgb: 14, 165, 233;
  --theme-secondary: #0284c7;
  --theme-accent: #38bdf8;

  /* Background colors - Vibrant sky blue theme */
  --background: #0c3a52;
  --background-secondary: #104865;
  --background-tertiary: #155878;
  --background-card: #0e405a;
  --border: #1a6890;

  /* Gradient colors - Sky blue metallic */
  --theme-gradient-1: #bae6fd;
  --theme-gradient-2: #7dd3fc;
  --theme-gradient-3: #38bdf8;
  --theme-gradient-4: #0ea5e9;
  --theme-gradient-5: #0284c7;
  --theme-gradient-6: #38bdf8;
  --theme-gradient-7: #0ea5e9;
  --theme-gradient-8: #0284c7;
  --theme-gradient-9: #0369a1;

  /* Glow effects */
  --theme-glow: rgba(14, 165, 233, 0.3);
  --theme-glow-strong: rgba(14, 165, 233, 0.5);

  /* Ring/Focus colors */
  --theme-ring: #0ea5e9;

  /* Glowing border animation colors */
  --theme-border-glow-1: rgba(14, 165, 233, 1);
  --theme-border-glow-2: rgba(14, 165, 233, 0.1);

  /* User accent */
  --theme-user-accent: #38bdf8;
}

/* ============================================
   VIOLET THEME
   ============================================ */
html[data-theme='violet'] {
  --theme-primary: #8b5cf6;
  --theme-primary-rgb: 139, 92, 246;
  --theme-secondary: #7c3aed;
  --theme-accent: #a78bfa;

  /* Background colors - Vibrant violet theme */
  --background: #35285c;
  --background-secondary: #423270;
  --background-tertiary: #503d85;
  --background-card: #3a2c65;
  --border: #6050a0;

  /* Gradient colors - Violet metallic */
  --theme-gradient-1: #ddd6fe;
  --theme-gradient-2: #c4b5fd;
  --theme-gradient-3: #a78bfa;
  --theme-gradient-4: #8b5cf6;
  --theme-gradient-5: #7c3aed;
  --theme-gradient-6: #a78bfa;
  --theme-gradient-7: #8b5cf6;
  --theme-gradient-8: #7c3aed;
  --theme-gradient-9: #6d28d9;

  /* Glow effects */
  --theme-glow: rgba(139, 92, 246, 0.3);
  --theme-glow-strong: rgba(139, 92, 246, 0.5);

  /* Ring/Focus colors */
  --theme-ring: #8b5cf6;

  /* Glowing border animation colors */
  --theme-border-glow-1: rgba(139, 92, 246, 1);
  --theme-border-glow-2: rgba(139, 92, 246, 0.1);

  /* User accent */
  --theme-user-accent: #a78bfa;
}

/* ============================================
   FUCHSIA THEME
   ============================================ */
html[data-theme='fuchsia'] {
  --theme-primary: #d946ef;
  --theme-primary-rgb: 217, 70, 239;
  --theme-secondary: #c026d3;
  --theme-accent: #e879f9;

  /* Background colors - Vibrant fuchsia theme */
  --background: #551560;
  --background-secondary: #681a75;
  --background-tertiary: #7c208a;
  --background-card: #5e1868;
  --border: #9528a5;

  /* Gradient colors - Fuchsia metallic */
  --theme-gradient-1: #f5d0fe;
  --theme-gradient-2: #f0abfc;
  --theme-gradient-3: #e879f9;
  --theme-gradient-4: #d946ef;
  --theme-gradient-5: #c026d3;
  --theme-gradient-6: #e879f9;
  --theme-gradient-7: #d946ef;
  --theme-gradient-8: #c026d3;
  --theme-gradient-9: #a21caf;

  /* Glow effects */
  --theme-glow: rgba(217, 70, 239, 0.3);
  --theme-glow-strong: rgba(217, 70, 239, 0.5);

  /* Ring/Focus colors */
  --theme-ring: #d946ef;

  /* Glowing border animation colors */
  --theme-border-glow-1: rgba(217, 70, 239, 1);
  --theme-border-glow-2: rgba(217, 70, 239, 0.1);

  /* User accent */
  --theme-user-accent: #e879f9;
}

/* ============================================
   SLATE THEME (Neutral/Dark)
   ============================================ */
html[data-theme='slate'] {
  --theme-primary: #64748b;
  --theme-primary-rgb: 100, 116, 139;
  --theme-secondary: #475569;
  --theme-accent: #94a3b8;

  /* Background colors - Vibrant slate/gray theme */
  --background: #2a3040;
  --background-secondary: #353c50;
  --background-tertiary: #404860;
  --background-card: #303848;
  --border: #505870;

  /* Gradient colors - Slate metallic */
  --theme-gradient-1: #e2e8f0;
  --theme-gradient-2: #cbd5e1;
  --theme-gradient-3: #94a3b8;
  --theme-gradient-4: #64748b;
  --theme-gradient-5: #475569;
  --theme-gradient-6: #94a3b8;
  --theme-gradient-7: #64748b;
  --theme-gradient-8: #475569;
  --theme-gradient-9: #334155;

  /* Glow effects */
  --theme-glow: rgba(100, 116, 139, 0.3);
  --theme-glow-strong: rgba(100, 116, 139, 0.5);

  /* Ring/Focus colors */
  --theme-ring: #64748b;

  /* Glowing border animation colors */
  --theme-border-glow-1: rgba(100, 116, 139, 1);
  --theme-border-glow-2: rgba(100, 116, 139, 0.1);

  /* User accent */
  --theme-user-accent: #94a3b8;
}

/* ============================================
   DEFAULT ICON COLORS (Gold for all themes)
   ============================================ */

/* Topbar icons - gold color by default */
.topbar-icon {
  color: #FFD700 !important;
  stroke: #FFD700 !important;
  fill: #FFD700 !important;
}

/* Sidebar/mobile menu icons - gold color by default */
.sidebar-icon {
  color: #FFD700 !important;
  fill: #FFD700 !important;
}

/* Announcement/broadcast icon - gold color by default */
.announcement-icon {
  color: #FFD700 !important;
  fill: #FFD700 !important;
}

/* ============================================
   WHITE-RED THEME (Light Theme with Red Accents)
   White base, red header/navbar/footer/announcement
   ============================================ */
html[data-theme='whitered'] {
  --theme-primary: #dc2626;
  --theme-primary-rgb: 220, 38, 38;
  --theme-secondary: #b91c1c;
  --theme-accent: #ef4444;

  /* Background colors - WHITE base, RED for header/nav/footer */
  --background: #ffffff;
  --background-secondary: #b91c1c; /* RED - for header, navbar, announcement */
  --background-tertiary: #991b1b; /* Darker red for hover states */
  --background-card: #ffffff; /* White cards */
  --border: #fecaca; /* Light red border */

  /* Text colors - White text on red, dark on white */
  --foreground: #ffffff;
  --foreground-muted: #fecaca;

  /* Gradient colors - Red metallic */
  --theme-gradient-1: #fecaca;
  --theme-gradient-2: #f87171;
  --theme-gradient-3: #ef4444;
  --theme-gradient-4: #dc2626;
  --theme-gradient-5: #b91c1c;
  --theme-gradient-6: #ef4444;
  --theme-gradient-7: #dc2626;
  --theme-gradient-8: #b91c1c;
  --theme-gradient-9: #991b1b;

  /* Glow effects */
  --theme-glow: rgba(220, 38, 38, 0.15);
  --theme-glow-strong: rgba(220, 38, 38, 0.25);

  /* Ring/Focus colors */
  --theme-ring: #dc2626;

  /* Glowing border animation colors */
  --theme-border-glow-1: rgba(220, 38, 38, 1);
  --theme-border-glow-2: rgba(220, 38, 38, 0.1);

  /* User accent */
  --theme-user-accent: #ef4444;
}

/* Contrast-safe action and dark-surface foreground tokens. */
html[data-theme='gold'] {
  --theme-action-start: #ffd700;
  --theme-action-end: #eab308;
  --theme-on-action: #000000;
  --theme-on-dark: #fbbf24;
}

html[data-theme='red'] {
  --theme-action-start: #b91c1c;
  --theme-action-end: #991b1b;
  --theme-on-action: #ffffff;
  --theme-on-dark: #ffe08f;
}

html[data-theme='crimson'] {
  --theme-action-start: #ff6b6b;
  --theme-action-end: #ff8c42;
  --theme-on-action: #000000;
  --theme-on-dark: #ffd93d;
}

html[data-theme='blue'] {
  --theme-action-start: #2563eb;
  --theme-action-end: #1d4ed8;
  --theme-on-action: #ffffff;
  --theme-on-dark: #60a5fa;
}

html[data-theme='purple'] {
  --theme-action-start: #9333ea;
  --theme-action-end: #7e22ce;
  --theme-on-action: #ffffff;
  --theme-on-dark: #c084fc;
}

html[data-theme='green'] {
  --theme-action-start: #22c55e;
  --theme-action-end: #16a34a;
  --theme-on-action: #000000;
  --theme-on-dark: #4ade80;
}

html[data-theme='cyan'] {
  --theme-action-start: #06b6d4;
  --theme-action-end: #0891b2;
  --theme-on-action: #000000;
  --theme-on-dark: #22d3ee;
}

html[data-theme='pink'] {
  --theme-action-start: #ec4899;
  --theme-action-end: #db2777;
  --theme-on-action: #000000;
  --theme-on-dark: #f472b6;
}

html[data-theme='magenta'] {
  --theme-action-start: #c026d3;
  --theme-action-end: #a21caf;
  --theme-on-action: #ffffff;
  --theme-on-dark: #e879f9;
}

html[data-theme='yellow'] {
  --theme-action-start: #eab308;
  --theme-action-end: #ca8a04;
  --theme-on-action: #000000;
  --theme-on-dark: #facc15;
}

html[data-theme='orange'] {
  --theme-action-start: #f97316;
  --theme-action-end: #ea580c;
  --theme-on-action: #000000;
  --theme-on-dark: #fb923c;
}

html[data-theme='teal'] {
  --theme-action-start: #14b8a6;
  --theme-action-end: #0d9488;
  --theme-on-action: #000000;
  --theme-on-dark: #2dd4bf;
}

html[data-theme='indigo'] {
  --theme-action-start: #4f46e5;
  --theme-action-end: #4338ca;
  --theme-on-action: #ffffff;
  --theme-on-dark: #818cf8;
}

html[data-theme='rose'] {
  --theme-action-start: #e11d48;
  --theme-action-end: #be123c;
  --theme-on-action: #ffffff;
  --theme-on-dark: #fb7185;
}

html[data-theme='amber'] {
  --theme-action-start: #f59e0b;
  --theme-action-end: #d97706;
  --theme-on-action: #000000;
  --theme-on-dark: #fbbf24;
}

html[data-theme='lime'] {
  --theme-action-start: #84cc16;
  --theme-action-end: #65a30d;
  --theme-on-action: #000000;
  --theme-on-dark: #a3e635;
}

html[data-theme='emerald'] {
  --theme-action-start: #10b981;
  --theme-action-end: #059669;
  --theme-on-action: #000000;
  --theme-on-dark: #34d399;
}

html[data-theme='forest'] {
  --theme-action-start: #739e68;
  --theme-action-end: #587f4d;
  --theme-on-action: #000000;
  --theme-on-dark: #9fb697;
}

html[data-theme='sky'] {
  --theme-action-start: #0ea5e9;
  --theme-action-end: #0284c7;
  --theme-on-action: #000000;
  --theme-on-dark: #38bdf8;
}

html[data-theme='violet'] {
  --theme-action-start: #7c3aed;
  --theme-action-end: #6d28d9;
  --theme-on-action: #ffffff;
  --theme-on-dark: #a78bfa;
}

html[data-theme='fuchsia'] {
  --theme-action-start: #c026d3;
  --theme-action-end: #a21caf;
  --theme-on-action: #ffffff;
  --theme-on-dark: #e879f9;
}

html[data-theme='slate'] {
  --theme-action-start: #64748b;
  --theme-action-end: #475569;
  --theme-on-action: #ffffff;
  --theme-on-dark: #94a3b8;
}

html[data-theme='whitered'] {
  --theme-action-start: #dc2626;
  --theme-action-end: #b91c1c;
  --theme-on-action: #ffffff;
  --theme-on-dark: #ef4444;
}

/* White-Red Theme - Specific Component Overrides */
html[data-theme='whitered'] {
  /* Main content area text should be dark on white background */
  color: #1f2937;
}

/* White-Red: Main content area - dark maroon gradient */
html[data-theme='whitered'] .bg-theme-whitered {
  background: linear-gradient(to bottom, #7f1d1d 0%, #6b1515 50%, #4a0d0d 100%) !important;
  color: #ffffff !important;
}

/* White-Red: Navbar - red background with white text */
html[data-theme='whitered'] .navbar {
  background: #b91c1c !important;
  color: #ffffff !important;
}

/* White-Red: Navbar text elements - force white text */
html[data-theme='whitered'] .navbar a,
html[data-theme='whitered'] .navbar a span,
html[data-theme='whitered'] .navbar span {
  color: #ffffff !important;
  background: transparent !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* White-Red: Topbar specifically - white background */
html[data-theme='whitered'] .bg-theme-whitered {
  background: #ffffff !important;
  color: #dc2626 !important;
}

/* White-Red: Jackpot/gold gradient text - maroon red */
html[data-theme='whitered'] .gold-gradient-text,
html[data-theme='whitered'] .theme-gradient-text {
  background: linear-gradient(to right, #7f1d1d, #b91c1c, #dc2626) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

/* White-Red: Section header gradient - white pastel 30% then red */
html[data-theme='whitered'] .section-header-gradient {
  background: linear-gradient(
    to right,
    #fff5f5 0%,
    #fecaca 30%,
    #dc2626 60%,
    #b91c1c 100%
  ) !important;
}

html[data-theme='whitered'] .section-header-gradient,
html[data-theme='whitered'] .section-header-gradient * {
  color: #ffffff !important;
}

/* White-Red: Provider hover effect */
html[data-theme='whitered'] .provider:hover {
  background-color: rgba(220, 38, 38, 0.1);
}

/* White-Red: Content areas inside background-top - white with opacity */
html[data-theme='whitered'] .background-top .bg-theme-whitered-secondary {
  background: rgba(255, 255, 255, 0.8) !important;
  color: #1f2937 !important;
}

/* White-Red: Navbar - red background (override above rule) */
html[data-theme='whitered'] .navbar.bg-theme-whitered-secondary {
  background: #dc2626 !important;
  color: #ffffff !important;
}

/* White-Red: Topbar (primary) - red text on white */
html[data-theme='whitered'] .bg-theme-whitered,
html[data-theme='whitered'] .bg-theme-whitered * {
  color: #dc2626 !important;
}

/* White-Red: Topbar icons - red color */
html[data-theme='whitered'] .topbar-icon,
html[data-theme='whitered'] .bg-theme-whitered .topbar-icon {
  color: #dc2626 !important;
  stroke: #dc2626 !important;
  fill: #dc2626 !important;
}

/* White-Red: Sidebar/mobile menu icons - red color */
html[data-theme='whitered'] .sidebar-icon {
  color: #dc2626 !important;
  stroke: #dc2626 !important;
  fill: #dc2626 !important;
}

/* White-Red: Login button - red border and red text */
html[data-theme='whitered'] .login-btn {
  border-color: #dc2626 !important;
  color: #dc2626 !important;
}

/* White-Red: Register/Sign Up button - white text on red bg */
html[data-theme='whitered'] .register-btn,
html[data-theme='whitered'] .register-btn a {
  color: #ffffff !important;
}

/* White-Red: Mobile Login/Register buttons - white text */
html[data-theme='whitered'] .mobile-login-btn,
html[data-theme='whitered'] .mobile-register-btn {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* White-Red: Broadcast bar - white background with red icon and text */
html[data-theme='whitered'] .broadcast,
html[data-theme='whitered'] .broadcast.bg-theme-whitered-secondary {
  background: #ffffff !important;
}

html[data-theme='whitered'] .announcement-icon {
  color: #dc2626 !important;
  fill: #dc2626 !important;
}

html[data-theme='whitered'] .broadcast-text {
  color: #dc2626 !important;
}

/* White-Red: Mobile burger menu icon - white on red header */
html[data-theme='whitered'] .mobile-burger-icon {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* White-Red: Mobile menu overlay - transparent dark instead of white */
html[data-theme='whitered'] .mobile-menu-overlay,
html[data-theme='whitered'] .mobile-menu-overlay.bg-opacity-50 {
  background: rgba(0, 0, 0, 0.5) !important;
  background-color: rgba(0, 0, 0, 0.5) !important;
  --tw-bg-opacity: 0.5 !important;
}

/* White-Red: Mobile menu panel - red background with white text */
html[data-theme='whitered'] .mobile-menu-panel {
  background: #b91c1c !important;
  background-color: #b91c1c !important;
}

/* White-Red: Mobile menu text - white for readability */
html[data-theme='whitered'] .mobile-menu-panel,
html[data-theme='whitered'] .mobile-menu-panel span,
html[data-theme='whitered'] .mobile-menu-panel p,
html[data-theme='whitered'] .mobile-menu-panel a {
  color: #ffffff !important;
}

/* White-Red: Mobile menu muted text - light pink instead of gray */
html[data-theme='whitered'] .mobile-menu-panel .text-gray-400 {
  color: rgba(255, 200, 200, 0.9) !important;
}

/* White-Red: Mobile menu accent color - light yellow/gold for contrast */
html[data-theme='whitered'] .mobile-menu-panel [class*='text-[#4FD1C5]'] {
  color: #ffd700 !important;
}

/* White-Red: Mobile menu green text - keep visible */
html[data-theme='whitered'] .mobile-menu-panel .text-green-400 {
  color: #4ade80 !important;
}

/* White-Red: Mobile menu icons - white */
html[data-theme='whitered'] .mobile-menu-panel .sidebar-icon,
html[data-theme='whitered'] .mobile-menu-panel svg {
  color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

/* White-Red: Mobile menu SVG with specific teal color - gold */
html[data-theme='whitered'] .mobile-menu-panel svg.text-\[\#4FD1C5\] {
  color: #ffd700 !important;
  fill: #ffd700 !important;
}

/* White-Red: Mobile menu borders - white with transparency */
html[data-theme='whitered'] .mobile-menu-panel [class*='border'],
html[data-theme='whitered'] .mobile-menu-panel .border-gray-700 {
  border-color: rgba(255, 255, 255, 0.2) !important;
}

/* White-Red: Mobile menu inner boxes - darker red */
html[data-theme='whitered'] .mobile-menu-panel [class*='bg-\[#1a1a1a\]'] {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* White-Red: Mobile menu logout button - gold */
html[data-theme='whitered'] .mobile-menu-panel button[class*='bg-\[#4FD1C5\]'] {
  background: #ffd700 !important;
  color: #b91c1c !important;
}

/* White-Red: Mobile menu register button gradient */
html[data-theme='whitered'] .mobile-menu-panel .theme-gradient-bg {
  background: linear-gradient(135deg, #ffd700, #ffed4a) !important;
}

html[data-theme='whitered'] .mobile-menu-panel .theme-gradient-bg a {
  color: #b91c1c !important;
}

/* White-Red: Footer background with image (mobile and desktop) */
html[data-theme='whitered'] .footer-bg {
  background-color: #f5f5f5;
  background-image: url(/images/themes/footer-whitered.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* White-Red: Footer padding for mobile only */
@media (max-width: 767px) {
  html[data-theme='whitered'] .footer-bg {
    padding: 25px;
  }
}

/* White-Red: Mobile bottom nav center button - white */
html[data-theme='whitered'] .mobile-nav-center-btn {
  background: #ffffff !important;
  border-color: #dc2626 !important;
}

html[data-theme='whitered'] .mobile-nav-center-icon {
  color: #dc2626 !important;
  stroke: #dc2626 !important;
}

html[data-theme='whitered'] .mobile-nav-center-text {
  color: #dc2626 !important;
}

html[data-theme='whitered'] .mobile-nav-center-label {
  color: #dc2626 !important;
  -webkit-text-fill-color: #dc2626 !important;
}

/* White-Red: Withdrawal toast - dark/transparent background */
html[data-theme='whitered'] .withdrawal-toast {
  background: rgba(0, 0, 0, 0.9) !important;
  border-color: #dc2626 !important;
}

/* White-Red: Footer text and labels - RED */
html[data-theme='whitered'] .footer-bg,
html[data-theme='whitered'] .footer-bg * {
  color: #dc2626 !important;
}

/* White-Red: Footer icon borders - RED */
html[data-theme='whitered'] .footer-bg [class*='border'],
html[data-theme='whitered'] .footer-bg [class*='rounded'] {
  border-color: #dc2626 !important;
}

/* White-Red: Footer section titles */
html[data-theme='whitered'] .footer-bg h2,
html[data-theme='whitered'] .footer-bg h3,
html[data-theme='whitered'] .footer-bg h4,
html[data-theme='whitered'] .footer-bg p,
html[data-theme='whitered'] .footer-bg span {
  color: #dc2626 !important;
}

/* White-Red: Login/Register submit buttons - solid dark red so white label stays readable.
   The theme gradient starts at #fecaca (near-white), which makes text-white disappear. */
html[data-theme='whitered'] .glowing2.gold-gradient-bg,
html[data-theme='whitered'] .glowing2.theme-gradient-bg,
html[data-theme='whitered'] .glowing.gold-gradient-bg,
html[data-theme='whitered'] .glowing.theme-gradient-bg {
  background-image: linear-gradient(135deg, #dc2626 0%, #b91c1c 50%, #991b1b 100%) !important;
  color: #ffffff !important;
}

.background-top {
  /* Mobile: Use theme background color */
  background-color: var(--background);
  position: relative;
  padding: 0;
  overflow-x: hidden;
}

.bmw108-dollar-rain {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.bmw108-dollar-rain span {
  position: absolute;
  top: -80px;
  color: rgba(96, 165, 250, 0.28);
  font-size: clamp(24px, 4vw, 58px);
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 0 18px rgba(59, 130, 246, 0.65);
  animation: bmw108-dollar-fall 12s linear infinite;
}

.bmw108-dollar-rain span:nth-child(1) {
  left: 3%;
  animation-delay: -1s;
  animation-duration: 13s;
}

.bmw108-dollar-rain span:nth-child(2) {
  left: 9%;
  animation-delay: -8s;
  animation-duration: 16s;
}

.bmw108-dollar-rain span:nth-child(3) {
  left: 16%;
  animation-delay: -3s;
  animation-duration: 11s;
}

.bmw108-dollar-rain span:nth-child(4) {
  left: 24%;
  animation-delay: -10s;
  animation-duration: 15s;
}

.bmw108-dollar-rain span:nth-child(5) {
  left: 31%;
  animation-delay: -5s;
  animation-duration: 12s;
}

.bmw108-dollar-rain span:nth-child(6) {
  left: 38%;
  animation-delay: -13s;
  animation-duration: 18s;
}

.bmw108-dollar-rain span:nth-child(7) {
  left: 45%;
  animation-delay: -2s;
  animation-duration: 14s;
}

.bmw108-dollar-rain span:nth-child(8) {
  left: 53%;
  animation-delay: -9s;
  animation-duration: 17s;
}

.bmw108-dollar-rain span:nth-child(9) {
  left: 60%;
  animation-delay: -6s;
  animation-duration: 13s;
}

.bmw108-dollar-rain span:nth-child(10) {
  left: 67%;
  animation-delay: -12s;
  animation-duration: 16s;
}

.bmw108-dollar-rain span:nth-child(11) {
  left: 73%;
  animation-delay: -4s;
  animation-duration: 12s;
}

.bmw108-dollar-rain span:nth-child(12) {
  left: 80%;
  animation-delay: -11s;
  animation-duration: 19s;
}

.bmw108-dollar-rain span:nth-child(13) {
  left: 86%;
  animation-delay: -7s;
  animation-duration: 14s;
}

.bmw108-dollar-rain span:nth-child(14) {
  left: 91%;
  animation-delay: -15s;
  animation-duration: 18s;
}

.bmw108-dollar-rain span:nth-child(15) {
  left: 96%;
  animation-delay: -6s;
  animation-duration: 15s;
}

.bmw108-dollar-rain span:nth-child(16) {
  left: 50%;
  animation-delay: -16s;
  animation-duration: 20s;
}

@keyframes bmw108-dollar-fall {
  0% {
    opacity: 0;
    transform: translate3d(0, -80px, 0) rotate(0deg);
  }
  10%,
  85% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate3d(42px, calc(100vh + 120px), 0) rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bmw108-dollar-rain span {
    animation: none;
    opacity: 0.28;
    transform: translateY(20vh);
  }
}

/* Desktop: Apply background image based on theme */
@media (min-width: 768px) {
  .background-top {
    background: url(/images/themes/bg-gold.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    padding: 30px 0;
  }

  /* Theme-specific backgrounds */
  html[data-theme='gold'] .background-top,
  html:not([data-theme]) .background-top {
    background-image: url(/images/themes/bg-gold.jpg);
  }

  html[data-theme='red'] .background-top {
    background-image: url(/images/themes/bg-red.png);
  }

  html[data-theme='crimson'] .background-top {
    background-image: url(/images/themes/bg-crimson.png);
  }

  html[data-theme='blue'] .background-top {
    background-image: url(/images/themes/bg-blue.png);
  }

  html[data-theme='purple'] .background-top {
    background-image: url(/images/themes/bg-purple.png);
  }

  html[data-theme='green'] .background-top {
    background-image: url(/images/themes/bg-green.png);
  }

  html[data-theme='cyan'] .background-top {
    background-image: url(/images/themes/bg-cyan.png);
  }

  /* New themes - background-top */
  html[data-theme='pink'] .background-top {
    background-image: url(/images/themes/bg-pink.png);
  }

  html[data-theme='magenta'] .background-top {
    background-image: url(/images/themes/bg-magenta.png);
  }

  html[data-theme='yellow'] .background-top {
    background-image: url(/images/themes/bg-yellow.png);
  }

  html[data-theme='orange'] .background-top {
    background-image: url(/images/themes/bg-orange.png);
  }

  html[data-theme='teal'] .background-top {
    background-image: url(/images/themes/bg-teal.png);
  }

  html[data-theme='indigo'] .background-top {
    background-image: url(/images/themes/bg-indigo.png);
  }

  html[data-theme='rose'] .background-top {
    background-image: url(/images/themes/bg-rose.png);
  }

  html[data-theme='amber'] .background-top {
    background-image: url(/images/themes/bg-amber.png);
  }

  html[data-theme='lime'] .background-top {
    background-image: url(/images/themes/bg-lime.png);
  }

  html[data-theme='emerald'] .background-top,
  html[data-theme='forest'] .background-top {
    background-image: url(/images/themes/bg-emerald.png);
  }

  html[data-theme='sky'] .background-top {
    background-image: url(/images/themes/bg-sky.png);
  }

  html[data-theme='violet'] .background-top {
    background-image: url(/images/themes/bg-violet.png);
  }

  html[data-theme='fuchsia'] .background-top {
    background-image: url(/images/themes/bg-fuchsia.png);
  }

  html[data-theme='slate'] .background-top {
    background-image: url(/images/themes/bg-slate.png);
  }

  html[data-theme='whitered'] .background-top {
    background-image: url(/images/themes/bg-whitered.jpg);
  }
}

/* ============================================
   FOOTER BACKGROUND - Theme-specific
   Desktop only (md:768px+), uses theme-specific hexagon images
   ============================================ */

/* Base footer styles - all screen sizes */
.footer-bg {
  background-color: var(--background);
  padding: 0;
}

/* Desktop: Theme-specific footer backgrounds */
@media screen and (min-width: 768px) {
  /* Default/Gold theme */
  .footer-bg {
    background-image: url('/images/themes/footer-gold.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
  }

  /* Theme-specific overrides */
  [data-theme='gold'] .footer-bg {
    background-image: url('/images/themes/footer-gold.jpg');
  }

  [data-theme='red'] .footer-bg {
    background-image: url('/images/themes/footer-red.jpg');
  }

  [data-theme='crimson'] .footer-bg {
    background-image: url('/images/themes/footer-crimson.jpg');
  }

  [data-theme='blue'] .footer-bg {
    background-image: url('/images/themes/footer-blue.jpg');
  }

  [data-theme='purple'] .footer-bg {
    background-image: url('/images/themes/footer-purple.jpg');
  }

  [data-theme='green'] .footer-bg {
    background-image: url('/images/themes/footer-green.jpg');
  }

  [data-theme='cyan'] .footer-bg {
    background-image: url('/images/themes/footer-cyan.jpg');
  }

  [data-theme='pink'] .footer-bg {
    background-image: url('/images/themes/footer-pink.jpg');
  }

  [data-theme='magenta'] .footer-bg {
    background-image: url('/images/themes/footer-magenta.jpg');
  }

  [data-theme='yellow'] .footer-bg {
    background-image: url('/images/themes/footer-yellow.jpg');
  }

  [data-theme='orange'] .footer-bg {
    background-image: url('/images/themes/footer-orange.jpg');
  }

  [data-theme='teal'] .footer-bg {
    background-image: url('/images/themes/footer-teal.jpg');
  }

  [data-theme='indigo'] .footer-bg {
    background-image: url('/images/themes/footer-indigo.jpg');
  }

  [data-theme='rose'] .footer-bg {
    background-image: url('/images/themes/footer-rose.jpg');
  }

  [data-theme='amber'] .footer-bg {
    background-image: url('/images/themes/footer-amber.jpg');
  }

  [data-theme='lime'] .footer-bg {
    background-image: url('/images/themes/footer-lime.jpg');
  }

  [data-theme='emerald'] .footer-bg,
  [data-theme='forest'] .footer-bg {
    background-image: url('/images/themes/footer-emerald.jpg');
  }

  [data-theme='sky'] .footer-bg {
    background-image: url('/images/themes/footer-sky.jpg');
  }

  [data-theme='violet'] .footer-bg {
    background-image: url('/images/themes/footer-violet.jpg');
  }

  [data-theme='fuchsia'] .footer-bg {
    background-image: url('/images/themes/footer-fuchsia.jpg');
  }

  [data-theme='slate'] .footer-bg {
    background-image: url('/images/themes/footer-slate.jpg');
  }

  [data-theme='whitered'] .footer-bg {
    background-image: url('/images/themes/footer-whitered.jpg');
  }
}

@font-face {
  font-family: X2Lato;
  src: url('/fonts/x2/Lato-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: X2Lato;
  src: url('/fonts/x2/Lato-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* X2: independent reference-based presentation. Falcon CSS supplies palettes only. */
html.route-theme-x2[data-theme='gold'],
html.route-theme-x2:not([data-theme]) {
  --theme-primary: #bda270;
  --theme-primary-rgb: 189, 162, 112;
  --theme-secondary: #8f7952;
  --theme-accent: #e5d2a9;
  --background: #0d0d0d;
  --background-secondary: #111;
  --background-tertiary: #252017;
  --background-card: #15130e;
  --border: #403725;
  --theme-gradient-1: #e5d2a9;
  --theme-gradient-2: #bda270;
  --theme-gradient-3: #bda270;
  --theme-gradient-4: #796747;
  --theme-gradient-5: #bda270;
  --theme-gradient-6: #bda270;
  --theme-gradient-7: #d1b987;
  --theme-gradient-8: #e5d2a9;
  --theme-gradient-9: #e5d2a9;
  --theme-ring: #bda270;
  --theme-glow: #bda27026;
  --theme-glow-strong: #bda27040;
}
.route-theme-x2 {
  --x2-gold: var(--theme-primary);
  --x2-line: color-mix(in srgb, var(--theme-primary) 35%, transparent);
  --x2-bronze: color-mix(in srgb, var(--theme-primary) 16%, var(--x2-color-080808, #080808));
}
.route-theme-x2 body {
  background: var(--x2-color-0d0d0d, #0d0d0d);
}
.x2-site {
  color: var(--x2-color-f4f4f4, #f4f4f4);
  background: var(--x2-color-0d0d0d, #0d0d0d);
  font-family: X2Lato, Arial, sans-serif;
  min-height: 100vh;
  font-size: 14px;
  line-height: 1.5;
}
.x2-site * {
  box-sizing: border-box;
}
.x2-site button,
.x2-site a {
  -webkit-tap-highlight-color: transparent;
}
.x2-site button {
  cursor: pointer;
}
.x2-site button:disabled {
  cursor: wait;
  opacity: 0.55;
}
.x2-site :is(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--x2-gold);
  outline-offset: 4px;
}
.x2-site :is(input, select, textarea) {
  color: var(--x2-color-eee, #eee);
  background: var(--x2-color-101010, #101010);
  border: 1px solid var(--x2-color-303030, #303030);
  border-radius: 4px;
  min-height: 38px;
  padding: 8px 12px;
  font: inherit;
  width: 100%;
}
.x2-site input::placeholder,
.x2-site textarea::placeholder {
  color: var(--x2-color-8f8f8f, #8f8f8f);
}
.x2-container {
  max-width: 1116px;
  width: calc(100% - 40px);
  margin-inline: auto;
}
.x2-skip-link {
  position: fixed;
  top: -100px;
  left: 10px;
  z-index: 100;
  background: var(--x2-color-000, #000);
  padding: 10px;
}
.x2-skip-link:focus {
  top: 10px;
}
.x2-artwork-fallback {
  display: grid;
  place-items: center;
  min-height: 50px;
  color: var(--x2-gold);
  background: var(--x2-color-17150f, #17150f);
  text-align: center;
  font-size: 13px;
}
.x2-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 10px 26px;
  background: linear-gradient(110deg, var(--theme-gradient-2), var(--theme-gradient-4));
  color: var(--x2-color-fff, #fff);
  border: 0;
  border-radius: 5px;
  font-size: 14px;
}
.x2-button:hover {
  filter: brightness(1.13);
}
.x2-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--x2-color-101010, #101010);
}
.x2-topbar {
  height: 45px;
  border-bottom: 1px solid var(--x2-color-303030, #303030);
}
.x2-topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}
.x2-tools {
  display: flex;
  align-items: center;
  gap: 0;
  color: var(--x2-color-bbb, #bbb);
}
.x2-tools > :is(a, div) {
  padding: 0 12px;
  border-right: 1px solid var(--x2-color-353535, #353535);
}
.x2-tools .x2-telegram {
  display: flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(#4593bd, #16547a);
  border-radius: 3px;
  margin-right: 12px;
  padding: 3px 10px;
  color: var(--x2-color-fff, #fff);
  font-size: 12px;
}
.x2-auth-actions,
.x2-user-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.x2-auth-actions > * {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 88px;
  padding: 5px 18px;
  border-radius: 25px;
  font-size: 12px;
  text-transform: uppercase;
  background: var(--x2-color-191919, #191919);
}
.x2-auth-actions > a {
  background: linear-gradient(110deg, var(--theme-gradient-2), var(--theme-gradient-4));
}
.x2-user-actions > a {
  display: flex;
  gap: 7px;
  align-items: center;
  font-size: 12px;
  color: var(--x2-gold);
}
.x2-desktop-nav {
  position: relative;
  border-bottom: 1px solid var(--x2-color-252525, #252525);
}
.x2-desktop-nav-inner {
  display: flex;
  align-items: center;
  height: 97px;
  gap: 6px;
}
.x2-brand {
  flex: 0 0 195px;
  display: flex;
  align-items: center;
  color: var(--x2-gold);
  font-size: 27px;
  font-weight: 700;
  letter-spacing: 1px;
}
.x2-brand img {
  width: 195px;
  max-height: 72px;
  object-fit: contain;
}
.x2-nav-scroll {
  color: var(--x2-color-aaa, #aaa);
  flex-shrink: 0;
  padding: 5px 0;
}
.x2-nav-links {
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  scrollbar-width: none;
  flex: 1;
  align-self: stretch;
}
.x2-nav-links::-webkit-scrollbar {
  display: none;
}
.x2-nav-links > a,
.x2-nav-item {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
  text-transform: uppercase;
  font-size: 12px;
}
.x2-nav-links > a {
  padding: 0 10px;
}
.x2-nav-item::before {
  content: '';
  display: block;
  width: 1px;
  height: 20px;
  background: var(--x2-color-292929, #292929);
  margin: 0 9px;
}
.x2-nav-item > a {
  padding: 12px 0;
}
.x2-nav-item > button {
  padding: 12px 2px;
}
.x2-nav-item svg {
  transition: transform 0.2s;
}
.x2-nav-item button[aria-expanded='true'] svg {
  transform: rotate(180deg);
}
.x2-nav-item:hover,
.x2-nav-item:focus-within,
.x2-nav-item a[aria-current],
.x2-nav-links > a:hover {
  color: var(--x2-gold);
}
.x2-mega-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  padding: 16px 0;
  max-height: calc(100dvh - 143px);
  overflow-y: auto;
  background: var(--x2-color-171406fa, #171406fa);
  border-bottom: 10px solid var(--x2-gold);
  box-shadow: none;
}
.x2-mega-panel[hidden] {
  display: none;
}
.x2-mega-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px;
}
.x2-provider-art {
  flex: 0 0 calc(20% - 32px);
  padding: 1px;
  display: block;
  overflow: hidden;
  border-radius: 25px;
  border: 0;
  background: linear-gradient(180deg, #0000 25%, var(--x2-color-ffbe16, #ffbe16) 100%);
  transition:
    filter 0.2s,
    transform 0.2s;
}
.x2-provider-art img {
  width: 100%;
  border-radius: 25px;
  aspect-ratio: 327/189;
  object-fit: cover;
}
.x2-provider-art:hover {
  filter: brightness(1.2);
}
.x2-mobile-header,
.x2-bottom-nav {
  display: none;
}
.x2-hero {
  position: relative;
  background: var(--x2-color-070707, #070707);
}
.x2-hero-link,
.x2-hero picture {
  display: block;
}
.x2-hero img,
.x2-hero .x2-artwork-fallback {
  width: 100%;
  height: auto;
  aspect-ratio: 1920/615;
  object-fit: cover;
}
.x2-hero-prev,
.x2-hero-next {
  position: absolute;
  top: 45%;
  display: grid;
  place-items: center;
  width: 36px;
  height: 46px;
  border-radius: 5px;
  background: var(--x2-color-ffffff24, #ffffff24);
}
.x2-hero-prev {
  left: 4%;
}
.x2-hero-next {
  right: 4%;
}
.x2-hero-dots {
  display: flex;
  gap: 5px;
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
}
.x2-hero-dots button {
  width: 9px;
  height: 9px;
  border: 1px solid white;
  border-radius: 50%;
}
.x2-hero-dots button[aria-current='true'] {
  background: white;
}
.x2-announcement {
  background: var(--x2-color-111, #111);
  height: 40px;
  color: var(--x2-color-b8b8b8, #b8b8b8);
}
.x2-announcement > div {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 20px;
}
.x2-announcement time {
  flex: 0 0 270px;
  font-size: 12px;
}
.x2-announcement svg {
  color: var(--x2-gold);
  flex-shrink: 0;
}
.x2-ticker {
  overflow: hidden;
  white-space: nowrap;
  background: var(--x2-color-181818, #181818);
  border-radius: 20px;
  padding: 4px 12px;
  flex: 1;
  font-size: 12px;
}
.x2-ticker span {
  display: inline-block;
  min-width: 100%;
  animation: x2-ticker 35s linear infinite;
}
.x2-ticker:hover span {
  animation-play-state: paused;
}
@keyframes x2-ticker {
  from {
    transform: translateX(15%);
  }
  to {
    transform: translateX(-100%);
  }
}
.x2-home-jackpot {
  margin-top: 20px;
  padding: 20px;
  background: var(--x2-color-100e07e5, #100e07e5);
  border-radius: 50px;
}
.x2-jackpot {
  padding: 10px;
  background: linear-gradient(
    var(--x2-color-1a1507, #1a1507),
    var(--x2-color-4b3e1b, #4b3e1b),
    var(--x2-color-1a1507, #1a1507)
  );
  border-radius: 30px;
}
.x2-jackpot-rim {
  border: 0;
  padding: 10px;
  border-radius: 100px;
  background: var(--x2-color-000, #000);
}
.x2-jackpot-middle {
  padding: 10px;
  border-radius: 100px;
  background: linear-gradient(var(--x2-color-595110, #595110), #59511000);
}
.x2-jackpot-inner {
  border: 3px solid var(--x2-color-b3a418, #b3a418);
  border-radius: 100px;
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 50px;
  background: var(--x2-color-0009, #0009);
}
.x2-jackpot-brand {
  flex: 0 0 268px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-left: 20px;
}
.x2-jackpot-brand > span {
  color: var(--x2-color-fd6f16, #fd6f16);
  font-size: 38px;
  font-weight: bold;
  line-height: 1.15;
  letter-spacing: -1.2px;
}
.x2-jackpot-brand b {
  color: #009fc5;
}
.x2-jackpot-brand small {
  font-size: 9px;
  color: var(--x2-color-bbac69, #bbac69);
  letter-spacing: 2px;
  margin-top: 7px;
}
.x2-jackpot-number {
  flex: 1;
  min-width: 0;
  padding: 10px;
  background: linear-gradient(var(--x2-color-b3a418, #b3a418), var(--x2-color-181600, #181600));
  border-radius: 65px;
}
.x2-jackpot-number > div {
  border: 3px dotted var(--x2-color-595110, #595110);
  border-radius: 50px;
  background: var(--x2-color-000, #000);
  padding: 10px 10px;
}
.x2-jackpot-number span {
  font-size: 50px !important;
  line-height: 1 !important;
  letter-spacing: 2px;
}
.x2-jackpot-number .flex {
  justify-content: center;
}
.x2-mobile-categories {
  display: none;
}
.x2-collections {
  padding: 0 0 20px;
}
.x2-section-title {
  display: flex;
  align-items: center;
  gap: 15px;
  margin: 20px 0 0;
  padding: 10px;
}
.x2-section-title h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 400;
  white-space: nowrap;
}
.x2-section-title h2 svg {
  color: var(--x2-gold);
  width: 24px;
  height: 24px;
}
.x2-section-title i {
  flex: 1;
  height: 4px;
  border-top: 2px solid var(--x2-color-090909, #090909);
  border-bottom: 2px solid var(--x2-color-4a3f2b, #4a3f2b);
}
.x2-section-title > a {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 30px;
  background: var(--x2-gold);
  color: var(--x2-color-080808, #080808);
  border-radius: 25px;
  white-space: nowrap;
  font-size: 15px;
}
.x2-popular-rail {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, auto);
  grid-auto-columns: calc((100% - 24px) / 6.5);
  gap: 10px 6px;
  overflow-x: auto;
  padding: 13px 18px 20px;
  border: 2px solid var(--x2-color-4a3f2b, #4a3f2b);
  border-radius: 30px;
  background: var(--x2-color-0c0c0c, #0c0c0c);
  scrollbar-color: var(--x2-color-58585a, #58585a) transparent;
  scrollbar-width: thin;
}
.x2-game-tile {
  display: flex;
  flex-direction: column;
  min-width: 0;
  color: var(--x2-color-fff, #fff);
  text-align: center;
  background: linear-gradient(var(--x2-color-776545, #776545), var(--x2-color-3a2f1d, #3a2f1d));
  padding: 5px;
  border-radius: 25px;
  position: relative;
  overflow: hidden;
}
.x2-game-image {
  position: relative;
  border-radius: 21px;
  overflow: hidden;
  aspect-ratio: 1;
  width: 100%;
}
.x2-game-image img,
.x2-game-image .x2-artwork-fallback {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.x2-game-title {
  font-size: 14px;
  padding: 6px 10px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
.x2-game-tile > small {
  font-size: 12px;
  color: var(--x2-color-ccc, #ccc);
  padding-bottom: 5px;
}
.x2-game-hover {
  position: absolute;
  inset: 0;
  background: var(--x2-color-000a, #000a);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s;
}
.x2-game-hover > span {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  border-radius: 25px;
  padding: 9px 18px;
  background: var(--x2-gold);
  color: var(--x2-color-111, #111);
}
.x2-game-tile:hover .x2-game-hover,
.x2-game-tile:focus-visible .x2-game-hover {
  opacity: 1;
}
.x2-selection-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  padding: 10px 15px;
  border: 2px solid var(--x2-color-4a3f2b, #4a3f2b);
  border-radius: 30px;
  background: var(--x2-color-0c0c0c, #0c0c0c);
}
.x2-home-providers {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 15px;
  padding: 13px 18px 20px;
  border: 2px solid var(--x2-color-4a3f2b, #4a3f2b);
  border-radius: 30px;
}
.x2-home-providers img {
  width: 100%;
  border-radius: 20px;
}
.x2-app-section {
  overflow: hidden;
  border-top: 1px solid var(--x2-color-24201a, #24201a);
  background:
    radial-gradient(ellipse at bottom left, var(--x2-color-5a452735, #5a452735), transparent 65%),
    var(--x2-color-080808, #080808);
}
.x2-app-section > div {
  min-height: 490px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 50px;
}
.x2-phone {
  width: 238px;
  height: 420px;
  border: 6px solid var(--x2-color-383124, #383124);
  border-radius: 37px;
  padding: 18px 10px;
  margin: 55px auto -35px;
  background: var(--x2-color-101010, #101010);
  transform: rotate(-8deg);
  box-shadow: 0 30px 80px var(--x2-color-000, #000);
}
.x2-phone > span {
  width: 60px;
  height: 5px;
  border-radius: 8px;
  display: block;
  background: var(--x2-color-282828, #282828);
  margin: -6px auto 12px;
}
.x2-phone > div > img:first-child {
  width: 130px;
  height: 36px;
  object-fit: contain;
  margin: 0 auto 10px;
}
.x2-phone > div > img {
  width: 100%;
  height: 95px;
  object-fit: cover;
}
.x2-phone strong {
  display: block;
  color: var(--x2-gold);
  text-align: center;
  margin: 10px;
}
.x2-phone-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 12px 0;
}
.x2-phone-grid img {
  width: 100%;
  border-radius: 14px;
}
.x2-eyebrow {
  color: var(--x2-color-9f916d, #9f916d);
  font-size: 11px;
  letter-spacing: 3px;
}
.x2-app-copy h2 {
  font-size: 47px;
  font-weight: 700;
  line-height: 1.1;
  margin: 12px 0;
}
.x2-app-copy h2 span {
  display: block;
  color: var(--x2-gold);
}
.x2-app-copy h3 {
  font-size: 24px;
  font-weight: 300;
  margin: 18px 0;
}
.x2-app-copy > p:not(.x2-eyebrow) {
  max-width: 380px;
  color: var(--x2-color-aaa, #aaa);
  font-size: 14px;
}
.x2-app-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin: 25px 0;
}
.x2-app-actions > a:last-child {
  display: flex;
  gap: 7px;
  color: var(--x2-color-c7b48a, #c7b48a);
  font-size: 12px;
}
.x2-telegram-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  background: #172a3b;
  min-height: 60px;
  border-block: 1px solid #365372;
}
.x2-telegram-banner strong {
  border-radius: 20px;
  padding: 5px 20px;
  background: #3b7ba2;
}
.x2-footer {
  background: var(--x2-color-0e0e0e, #0e0e0e);
  color: var(--x2-color-9b9b9b, #9b9b9b);
}
.x2-footer .x2-container {
  padding: 35px 0 20px;
}
.x2-cms-footer {
  padding-bottom: 25px;
  font-size: 13px;
  line-height: 1.8;
}
.x2-footer-columns {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 35px;
}
.x2-footer h2 {
  font-weight: 400;
  font-size: 18px;
  color: var(--x2-color-d1c3a3, #d1c3a3);
  margin: 0 0 14px;
}
.x2-footer-columns > div > a,
.x2-custom-links a {
  display: block;
  font-size: 12px;
  margin: 7px 0;
}
.x2-footer a:hover {
  color: var(--x2-gold);
}
.x2-custom-links {
  display: contents;
}
.x2-service-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 35px;
  padding: 25px 0;
  border-block: 1px solid var(--x2-color-292929, #292929);
}
.x2-service-row svg {
  width: 30px;
  height: 30px;
  color: var(--x2-color-73664a, #73664a);
}
.x2-service-row h3 {
  font-size: 13px;
  color: var(--x2-color-aaa, #aaa);
  margin: 10px 0 6px;
}
.x2-service-row p {
  font-size: 11px;
  line-height: 1.7;
}
.x2-bank-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 28px 0;
}
.x2-bank-strip img {
  width: 70px;
  height: 28px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.7;
}
.x2-footer-meta {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-size: 11px;
  border-block: 1px solid var(--x2-color-272727, #272727);
  padding: 20px 0;
}
.x2-footer-providers {
  padding-top: 25px;
}
.x2-footer-providers summary {
  padding: 12px 0;
  cursor: pointer;
  border-bottom: 1px solid var(--x2-color-222, #222);
  font-size: 12px;
}
.x2-footer-providers details > div {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 25px;
  padding: 15px 0;
  font-size: 11px;
}
.x2-login-dialog {
  padding: 0;
  border: 0;
  border-radius: 7px;
  color: var(--x2-color-fff, #fff);
  background: var(--x2-color-000, #000);
  width: 465px;
  max-width: calc(100vw - 30px);
  max-height: calc(100dvh - 30px);
}
.x2-login-dialog::backdrop {
  background: var(--x2-color-000a, #000a);
}
.x2-auth-card {
  width: 100%;
  background: var(--x2-color-000, #000);
  border-radius: 7px;
  color: var(--x2-color-fff, #fff);
}
.x2-auth-heading {
  position: relative;
  padding: 26px 30px 12px;
  margin: 0 30px;
  border-bottom: 1px solid var(--x2-color-333, #333);
  text-align: center;
}
.x2-auth-heading h1 {
  font-size: 18px;
  font-weight: 400;
}
.x2-auth-heading > button {
  position: absolute;
  right: -10px;
  top: 24px;
}
.x2-login-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 32px 32px 25px;
}
.x2-login-form label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 14px;
}
.x2-login-form input {
  height: 36px;
  min-height: 36px;
}
.x2-password-field {
  display: flex;
  position: relative;
}
.x2-password-field input {
  padding-right: 40px;
}
.x2-password-field button {
  position: absolute;
  right: 10px;
  top: 10px;
  color: var(--x2-color-aaa, #aaa);
}
.x2-forgot {
  text-align: right;
  font-size: 13px;
  margin-top: -3px;
}
.x2-login-form .x2-button {
  margin: 5px 0 0;
  width: 100%;
}
.x2-register-prompt {
  text-align: center;
  font-size: 13px;
  padding: 5px 0 10px;
}
.x2-register-prompt a {
  color: var(--x2-gold);
}
.x2-form-error {
  color: #ffa7a7;
  font-size: 12px;
}
.x2-login-page {
  padding: 60px 20px;
  min-height: 540px;
  background: radial-gradient(
    ellipse at center,
    var(--x2-color-63502a25, #63502a25),
    transparent 65%
  );
}
.x2-login-page .x2-auth-card {
  max-width: 465px;
  margin: auto;
  border: 1px solid var(--x2-color-2d261a, #2d261a);
}
.x2-drawer {
  position: fixed;
  margin: 0 0 0 auto;
  height: 100dvh;
  max-height: 100dvh;
  width: 240px;
  max-width: 85vw;
  padding: 0;
  color: var(--x2-color-ddd, #ddd);
  background: var(--x2-color-0d0d0d, #0d0d0d);
  border: 0;
  border-left: 4px solid var(--x2-color-39342b, #39342b);
}
.x2-drawer::backdrop {
  background: var(--x2-color-000b, #000b);
}
.x2-drawer-content {
  min-height: 100%;
  padding: 18px 10px;
}
.x2-drawer-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 4px;
  margin-bottom: 15px;
  color: var(--x2-gold);
}
.x2-drawer-auth {
  display: grid;
  gap: 10px;
  padding: 5px 2px 15px;
}
.x2-drawer-auth > a {
  border: 1px solid var(--x2-gold);
  padding: 10px;
  border-radius: 4px;
  text-align: center;
  font-size: 13px;
}
.x2-drawer-content > a,
.x2-drawer details > summary,
.x2-drawer-language {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 15px 6px;
  border-bottom: 1px solid var(--x2-color-222, #222);
  font-size: 13px;
}
.x2-drawer details summary {
  cursor: pointer;
  list-style: none;
}
.x2-drawer details summary svg {
  margin-left: auto;
}
.x2-drawer details > a {
  display: block;
  padding: 10px 15px;
  font-size: 12px;
  border-left: 1px solid var(--x2-gold);
  margin-left: 10px;
}
.x2-category-hero {
  position: relative;
  height: 390px;
  background: var(--x2-color-080808, #080808);
}
.x2-category-hero > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.6);
}
.x2-category-hero-title {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(transparent, var(--x2-color-08080880, #08080880));
}
.x2-category-hero-title > span {
  letter-spacing: 4px;
  font-size: 11px;
  color: var(--x2-color-e6d7b6, #e6d7b6);
}
.x2-category-hero-title h2 {
  font-size: 60px;
  text-transform: uppercase;
  font-weight: bold;
  color: var(--x2-color-f7e4b7, #f7e4b7);
  text-shadow: 0 2px 15px var(--x2-color-000, #000);
}
.x2-jackpot-compact {
  width: 550px;
  max-width: 90%;
  background: none;
  margin-top: 15px;
}
.x2-jackpot-compact .x2-jackpot-brand {
  display: none;
}
.x2-jackpot-compact .x2-jackpot-inner {
  padding: 0;
  border: 0;
}
.x2-jackpot-compact .x2-jackpot-rim {
  border-width: 3px;
  padding: 4px;
}
.x2-jackpot-compact .x2-jackpot-number > div {
  padding: 12px 5px;
}
.x2-jackpot-compact .x2-jackpot-number span {
  font-size: 34px !important;
}
.x2-catalog {
  position: relative;
  margin-top: -20px;
  padding-bottom: 50px;
}
.x2-provider-strip {
  display: flex;
  overflow-x: auto;
  align-items: center;
  gap: 12px;
  padding: 18px;
  background: linear-gradient(var(--x2-color-443b24, #443b24), var(--x2-color-19160c, #19160c));
  border: 10px solid var(--x2-color-15140d, #15140d);
  border-radius: 32px;
  scrollbar-width: thin;
  scrollbar-color: var(--x2-gold) transparent;
}
.x2-provider-strip > a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  flex: 0 0 135px;
  min-height: 65px;
  color: var(--x2-color-c6bfab, #c6bfab);
  border-radius: 10px;
  padding: 7px;
}
.x2-provider-strip img {
  width: 120px;
  height: 50px;
  object-fit: contain;
}
.x2-provider-strip span {
  font-size: 10px;
}
.x2-provider-strip a.is-active,
.x2-provider-strip a:hover {
  background: var(--x2-color-ffffff13, #ffffff13);
  outline: 1px solid var(--x2-gold);
}
.x2-catalog-title {
  font-size: 28px;
  font-weight: 400;
  text-transform: uppercase;
  padding: 25px 10px 15px;
  color: var(--x2-color-e7dcc3, #e7dcc3);
}
.x2-catalog-panel {
  background: var(--x2-color-111, #111);
  padding: 20px;
  border: 1px solid var(--x2-color-302a1d, #302a1d);
  border-radius: 25px;
}
.x2-catalog-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}
.x2-catalog-toolbar > div {
  display: flex;
  gap: 20px;
}
.x2-catalog-toolbar button {
  padding: 10px 2px;
  color: var(--x2-color-9f9b90, #9f9b90);
  font-size: 12px;
  border-bottom: 2px solid transparent;
}
.x2-catalog-toolbar button[aria-pressed='true'] {
  color: var(--x2-gold);
  border-color: var(--x2-gold);
}
.x2-search {
  display: flex;
  align-items: center;
  position: relative;
  width: 260px;
}
.x2-search svg {
  position: absolute;
  left: 10px;
  color: var(--x2-gold);
}
.x2-search input {
  padding-left: 37px;
}
.x2-catalog-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}
.x2-load-more {
  display: flex;
  margin: 30px auto 10px;
}
.x2-empty-state {
  min-height: 250px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 35px 20px;
  text-align: center;
  color: var(--x2-color-a6a197, #a6a197);
}
.x2-empty-state > svg {
  color: var(--x2-gold);
}
.x2-empty-state h2 {
  font-size: 18px;
  color: var(--x2-color-ded8ca, #ded8ca);
  font-weight: 400;
}
.x2-empty-state p {
  font-size: 13px;
}
.x2-interior {
  padding: 30px 0 50px;
}
.x2-interior-layout {
  display: flex;
  gap: 25px;
  align-items: flex-start;
}
.x2-interior-content {
  width: 100%;
  margin-inline: auto;
  min-width: 0;
  padding: 25px;
  border-radius: 18px;
  background: var(--x2-color-111, #111);
  border: 1px solid var(--x2-color-28251d, #28251d);
}
.x2-interior-content h1,
.x2-interior-content h2 {
  font-family: inherit !important;
}
.x2-interior-content .glowing {
  animation: none;
}
.x2-interior-content .glowing::before,
.x2-interior-content .glowing::after {
  display: none;
}
.x2-interior-content .theme-gradient-bg {
  background: linear-gradient(110deg, var(--theme-gradient-2), var(--theme-gradient-4));
}
.x2-account-sidebar {
  width: 260px;
  flex-shrink: 0;
  border-radius: 18px;
  background: var(--x2-color-111, #111);
  overflow: hidden;
  border: 1px solid var(--x2-color-28251d, #28251d);
}
.x2-account-sidebar > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 25px 10px;
  color: var(--x2-gold);
  background: var(--x2-bronze);
}
.x2-account-sidebar strong {
  color: var(--x2-color-fff, #fff);
  font-size: 17px;
  font-weight: 400;
}
.x2-account-sidebar span {
  font-size: 13px;
}
.x2-account-sidebar nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px;
  border-bottom: 1px solid var(--x2-color-222, #222);
  border-left: 4px solid transparent;
  font-size: 13px;
}
.x2-account-sidebar a[aria-current],
.x2-account-sidebar a:hover {
  background: var(--x2-bronze);
  border-left-color: var(--x2-gold);
}
.x2-promotions {
  display: grid;
  grid-template-columns: 265px 1fr;
  gap: 22px;
  align-items: start;
  padding: 20px 0 45px;
}
.x2-promotions > aside {
  background: var(--x2-color-111, #111);
  border-radius: 20px;
  overflow: hidden;
}
.x2-promotions > aside h1 {
  text-align: center;
  color: var(--x2-gold);
  padding: 25px 10px;
  font-weight: 400;
}
.x2-promotions > aside > div {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px;
  background: var(--x2-bronze);
  border-left: 4px solid var(--x2-gold);
}
.x2-promotions aside label {
  display: block;
  padding: 20px;
  font-size: 12px;
  color: var(--x2-color-aaa, #aaa);
}
.x2-promotions aside input {
  margin-top: 10px;
}
.x2-promotions > section {
  min-width: 0;
  padding: 20px;
  background: var(--x2-color-111, #111);
  border-radius: 20px;
}
.x2-promo-card {
  overflow: hidden;
  border-radius: 15px;
  background: var(--x2-bronze);
  margin-bottom: 20px;
}
.x2-promo-card > img {
  width: 100%;
  height: auto;
  aspect-ratio: 3.4;
  object-fit: cover;
}
.x2-promo-card > div {
  display: flex;
  gap: 20px;
  align-items: center;
  padding: 15px;
}
.x2-promo-card h2 {
  font-size: 17px;
  margin-bottom: 3px;
}
.x2-promo-card p {
  font-size: 12px;
  color: var(--x2-color-bbb, #bbb);
}
.x2-promo-card a {
  margin-left: auto;
  border: 1px solid var(--x2-color-d5cbb3, #d5cbb3);
  border-radius: 25px;
  padding: 8px 25px;
  font-size: 12px;
}
.x2-hero-skeleton {
  aspect-ratio: 1920/615;
  background: var(--x2-color-17140d, #17140d);
}
.x2-collection-skeleton {
  height: 450px;
}
@media (min-width: 768px) and (max-width: 1050px) {
  .x2-brand {
    flex-basis: 160px;
  }
  .x2-brand img {
    width: 160px;
  }
  .x2-jackpot-brand {
    flex-basis: 180px;
  }
  .x2-jackpot-brand > span {
    font-size: 23px;
  }
  .x2-jackpot-number span {
    font-size: 30px !important;
  }
  .x2-mega-grid {
    gap: 18px;
  }
  .x2-app-copy h2 {
    font-size: 36px;
  }
  .x2-footer-columns {
    gap: 20px;
  }
}
@media (max-width: 767px) {
  .x2-container {
    width: 100%;
  }
  .x2-site {
    padding-bottom: 58px;
  }
  .x2-header {
    display: none;
  }
  .x2-mobile-header {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 40;
    height: 54px;
    align-items: center;
    padding: 0 10px 0 15px;
    gap: 12px;
    background: var(--x2-color-171717, #171717);
    border-bottom: 1px solid var(--x2-color-292929, #292929);
  }
  .x2-mobile-header .x2-brand {
    flex: 1;
    min-width: 0;
    font-size: 19px;
    white-space: nowrap;
    overflow: hidden;
  }
  .x2-mobile-header .x2-brand img {
    width: 140px;
    max-width: 100%;
    height: 40px;
    object-fit: contain;
  }
  .x2-mobile-header > button {
    height: 54px;
    padding-left: 10px;
    border-left: 1px solid var(--x2-color-3c3c3c, #3c3c3c);
    color: var(--x2-gold);
  }
  .x2-mobile-header .x2-auth-actions {
    gap: 10px;
  }
  .x2-mobile-header .x2-auth-actions > * {
    min-width: 0;
    padding: 6px 12px;
    font-size: 13px;
    text-transform: none;
    background: linear-gradient(110deg, var(--theme-gradient-2), var(--theme-gradient-4));
  }
  .x2-mobile-header .x2-user-actions {
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
  }
  .x2-mobile-header .x2-user-actions > a {
    font-size: 10px;
  }
  .x2-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 40;
    height: 54px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: var(--x2-color-5d5032, #5d5032);
    color: var(--x2-color-bbaa7e, #bbaa7e);
    border-top: 1px solid var(--x2-color-a99360, #a99360);
  }
  .x2-bottom-nav > * {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    font-size: 9px;
    width: 20%;
    padding: 5px 0;
  }
  .x2-bottom-nav .x2-bottom-center svg {
    width: 38px;
    height: 38px;
    padding: 4px;
    border: 1px solid var(--x2-color-bbaa7e, #bbaa7e);
    border-radius: 50%;
    background: var(--x2-color-5d5032, #5d5032);
    margin-top: -19px;
  }
  .x2-bottom-nav a[aria-current] {
    color: var(--x2-color-eee2b9, #eee2b9);
  }
  .x2-homepage {
    display: flex;
    flex-direction: column;
  }
  .x2-homepage > .x2-announcement {
    order: -1;
  }
  .x2-announcement {
    height: 33px;
  }
  .x2-announcement > div {
    padding: 0 10px;
    gap: 10px;
  }
  .x2-announcement time {
    display: none;
  }
  .x2-ticker {
    padding: 0;
    font-size: 11px;
    background: none;
    border-radius: 0;
  }
  .x2-announcement svg {
    width: 16px;
  }
  /* Mobile artwork can be square or wide: show the entire uploaded banner. */
  .x2-hero img {
    aspect-ratio: auto;
  }
  .x2-hero .x2-artwork-fallback {
    aspect-ratio: 768/360;
  }
  .x2-hero-prev,
  .x2-hero-next {
    width: 26px;
    height: 34px;
  }
  .x2-hero-prev {
    left: 2%;
  }
  .x2-hero-next {
    right: 2%;
  }
  .x2-hero-dots {
    bottom: 7px;
  }
  .x2-hero-dots button {
    width: 6px;
    height: 6px;
  }
  .x2-home-jackpot {
    padding: 0;
  }
  .x2-jackpot {
    padding: 12px 10px 15px;
    background: var(--x2-color-0c0c0c, #0c0c0c);
    border-radius: 0;
  }
  .x2-jackpot-rim {
    padding: 0;
    border: 0;
    background: none;
    border-radius: 0;
  }
  .x2-jackpot-inner {
    padding: 0;
    border: 0;
    background: none;
    flex-direction: column;
    gap: 8px;
  }
  .x2-jackpot-brand {
    flex: auto;
    padding-top: 5px;
  }
  .x2-jackpot-brand > span {
    font-size: 24px;
  }
  .x2-jackpot-brand small {
    font-size: 7px;
    margin-top: 3px;
    letter-spacing: 1.6px;
  }
  .x2-jackpot-number {
    width: 100%;
    padding: 8px;
    border-radius: 70px;
  }
  .x2-jackpot-number > div {
    padding: 9px 3px;
    border-width: 2px;
  }
  .x2-jackpot-number span {
    font-size: 25px !important;
    letter-spacing: 1px;
  }
  .x2-mobile-categories {
    display: block;
  }
  .x2-category-strip {
    display: flex;
    height: 83px;
    background: var(--x2-color-100f0a, #100f0a);
    border-block: 1px solid var(--x2-color-373020, #373020);
  }
  .x2-category-strip > button {
    flex: 0 0 20px;
    display: grid;
    place-items: center;
    color: var(--x2-color-78663d, #78663d);
    background: var(--x2-gold);
  }
  .x2-category-strip > div {
    display: flex;
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--x2-gold) transparent;
  }
  .x2-category-strip a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 0 0 84px;
    font-size: 10px;
    text-transform: uppercase;
    color: var(--x2-color-c0af84, #c0af84);
  }
  .x2-category-strip img {
    width: 27px;
    height: 27px;
    object-fit: contain;
    filter: sepia(0.8);
  }
  .x2-collections {
    padding: 0 0 25px;
  }
  .x2-section-title {
    margin: 10px 0;
    padding: 10px;
    background: var(--x2-gold);
    gap: 5px;
  }
  .x2-section-title h2 {
    font-size: 14px;
    gap: 6px;
  }
  .x2-section-title h2 svg {
    width: 19px;
    color: var(--x2-color-ece1c6, #ece1c6);
  }
  .x2-section-title i {
    display: none;
  }
  .x2-section-title > a {
    margin-left: auto;
    padding: 0;
    background: none;
    font-size: 10px;
  }
  .x2-popular-rail {
    grid-auto-columns: calc((100% - 32px) / 3.6);
    gap: 12px 14px;
    border: 0;
    border-radius: 0;
    padding: 8px 12px 12px;
    background: var(--x2-color-0d0d0d, #0d0d0d);
  }
  .x2-game-tile {
    border-radius: 22px;
    padding: 5px;
  }
  .x2-game-image {
    border-radius: 18px;
  }
  .x2-game-title {
    font-size: 9px;
    padding: 7px 0 3px;
    text-transform: uppercase;
  }
  .x2-game-tile > small {
    font-size: 9px;
  }
  .x2-selection-grid {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: 105px;
    gap: 12px;
    overflow-x: auto;
    border: 0;
    border-radius: 0;
    padding: 6px 12px;
  }
  .x2-home-providers {
    display: flex;
    gap: 10px;
    overflow: auto;
    border: 0;
    padding: 6px 12px;
  }
  .x2-home-providers > a {
    flex: 0 0 145px;
  }
  .x2-home-providers img {
    border-radius: 15px;
  }
  .x2-app-section > div {
    min-height: 250px;
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 20px;
    padding: 25px 16px;
  }
  .x2-phone {
    width: 110px;
    height: 205px;
    border-width: 3px;
    border-radius: 18px;
    padding: 10px 5px;
    margin: 10px 0 -10px;
    transform: rotate(-5deg);
  }
  .x2-phone > span {
    width: 30px;
    height: 3px;
    margin: 0 auto 7px;
  }
  .x2-phone > div > img:first-child {
    width: 75px;
    height: 22px;
    margin-bottom: 5px;
  }
  .x2-phone > div > img {
    height: 48px;
  }
  .x2-phone-grid {
    gap: 4px;
    margin: 7px 0;
  }
  .x2-phone-grid img {
    border-radius: 6px;
  }
  .x2-phone strong {
    font-size: 12px;
    margin: 3px 0;
  }
  .x2-app-copy .x2-eyebrow {
    font-size: 8px;
    letter-spacing: 1px;
  }
  .x2-app-copy h2 {
    font-size: 22px;
  }
  .x2-app-copy h3 {
    font-size: 12px;
    margin: 10px 0;
  }
  .x2-app-copy > p:not(.x2-eyebrow) {
    font-size: 10px;
  }
  .x2-app-actions {
    gap: 8px;
    margin: 12px 0;
  }
  .x2-app-actions .x2-button {
    font-size: 10px;
    padding: 7px 12px;
    min-height: 32px;
  }
  .x2-app-actions > a:last-child {
    font-size: 10px;
  }
  .x2-telegram-banner {
    gap: 10px;
    padding: 10px;
    font-size: 12px;
  }
  .x2-telegram-banner strong {
    padding: 5px 10px;
  }
  .x2-telegram-banner > svg {
    width: 20px;
  }
  .x2-footer .x2-container {
    padding: 25px 15px 15px;
  }
  .x2-footer-columns {
    grid-template-columns: 1fr 1fr;
    gap: 25px 20px;
    padding-bottom: 25px;
  }
  .x2-footer h2 {
    font-size: 15px;
    margin-bottom: 9px;
  }
  .x2-footer-columns > div > a {
    font-size: 11px;
  }
  .x2-service-row {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 20px 0;
  }
  .x2-service-row > div {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 0 12px;
  }
  .x2-service-row svg {
    grid-row: span 2;
  }
  .x2-service-row h3 {
    margin: 0;
  }
  .x2-service-row p {
    font-size: 10px;
  }
  .x2-bank-strip {
    gap: 16px;
    padding: 25px 0;
  }
  .x2-bank-strip img {
    width: 52px;
    height: 22px;
  }
  .x2-footer-meta {
    flex-direction: column;
    gap: 8px;
    text-align: center;
    font-size: 10px;
  }
  .x2-login-dialog {
    width: calc(100vw - 30px);
  }
  .x2-auth-heading {
    padding: 20px 20px 10px;
    margin: 0 16px;
  }
  .x2-auth-heading h1 {
    font-size: 16px;
  }
  .x2-auth-heading > button {
    top: 16px;
    right: 0;
  }
  .x2-login-form {
    padding: 30px 16px 20px;
    gap: 20px;
  }
  .x2-login-form label {
    font-size: 13px;
  }
  .x2-login-form input {
    font-size: 12px;
  }
  .x2-login-form .x2-button {
    font-size: 13px;
  }
  .x2-login-page {
    padding: 30px 15px;
    min-height: 480px;
  }
  .x2-category-hero {
    height: 240px;
  }
  .x2-category-hero-title h2 {
    font-size: 34px;
  }
  .x2-category-hero-title > span {
    font-size: 9px;
    letter-spacing: 2px;
  }
  .x2-jackpot-compact {
    padding: 0;
    margin-top: 10px;
    width: 300px;
    background: none;
  }
  .x2-jackpot-compact .x2-jackpot-number span {
    font-size: 24px !important;
  }
  .x2-catalog {
    margin-top: -15px;
    padding-bottom: 25px;
  }
  .x2-provider-strip {
    border-width: 5px;
    border-radius: 20px;
    padding: 10px;
    gap: 8px;
  }
  .x2-provider-strip > a {
    flex-basis: 95px;
    min-height: 55px;
    padding: 5px;
  }
  .x2-provider-strip img {
    width: 85px;
    height: 36px;
  }
  .x2-provider-strip span {
    font-size: 8px;
  }
  .x2-catalog-title {
    font-size: 20px;
    padding: 20px 15px 10px;
  }
  .x2-catalog-panel {
    padding: 10px;
    border: 0;
    border-radius: 0;
  }
  .x2-catalog-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .x2-catalog-toolbar > div {
    gap: 18px;
  }
  .x2-catalog-toolbar button {
    font-size: 11px;
  }
  .x2-search {
    width: 100%;
  }
  .x2-catalog-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  .x2-interior {
    padding: 15px 0 25px;
  }
  .x2-interior-layout {
    flex-direction: column;
    gap: 15px;
  }
  .x2-interior-content {
    padding: 15px 10px;
    border-radius: 0;
    border: 0;
  }
  .x2-account-sidebar {
    width: 100%;
    border-radius: 0;
    border: 0;
  }
  .x2-account-sidebar > div {
    padding: 15px;
    gap: 4px;
  }
  .x2-account-sidebar nav {
    display: flex;
    overflow: auto;
  }
  .x2-account-sidebar nav a {
    flex-shrink: 0;
    padding: 12px;
    font-size: 11px;
    border-left: 0;
    border-bottom: 2px solid transparent;
  }
  .x2-account-sidebar a[aria-current] {
    border-bottom-color: var(--x2-gold);
  }
  .x2-promotions {
    display: block;
    padding: 15px 10px 25px;
  }
  .x2-promotions > aside {
    border-radius: 10px;
    margin-bottom: 15px;
  }
  .x2-promotions > aside h1 {
    padding: 12px;
    font-size: 12px;
  }
  .x2-promotions > aside > div {
    display: none;
  }
  .x2-promotions aside label {
    padding: 0 12px 12px;
  }
  .x2-promotions > section {
    padding: 0;
    background: none;
  }
  .x2-promo-card {
    border-radius: 10px;
  }
  .x2-promo-card > img {
    aspect-ratio: 2.5;
  }
  .x2-promo-card > div {
    gap: 10px;
    padding: 12px;
  }
  .x2-promo-card h2 {
    font-size: 13px;
  }
  .x2-promo-card p {
    font-size: 10px;
  }
  .x2-promo-card a {
    font-size: 10px;
    padding: 7px 14px;
  }
  .x2-hero-skeleton {
    aspect-ratio: 768/360;
  }
}
@media (prefers-reduced-motion: reduce) {
  .x2-site *,
  .x2-site *::before,
  .x2-site *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
/* Falcon's global span spacing must not move the dedicated jackpot display. */
.x2-jackpot-number .jackpot-counter > span:first-child {
  margin-left: 0 !important;
}
@media (max-width: 767px) {
  .x2-home-jackpot .x2-jackpot {
    min-height: 162.6875px;
    padding-top: 10px;
  }
}
.x2-direct-providers {
  padding: 30px 0 50px;
}
.x2-direct-providers h1 {
  text-align: center;
  font-size: 28px;
  font-weight: 400;
  color: var(--x2-gold);
  margin-bottom: 25px;
}
.x2-direct-providers > div {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 25px;
}
.x2-direct-providers a {
  display: block;
  border: 1px solid var(--x2-line);
  border-radius: 25px;
  overflow: hidden;
  background: var(--x2-bronze);
}
.x2-direct-providers img {
  width: 100%;
  border-radius: 25px;
  aspect-ratio: 327/189;
  object-fit: cover;
}
.x2-direct-providers a > span {
  display: block;
  text-align: center;
  padding: 12px;
  font-size: 13px;
}
@media (max-width: 767px) {
  .x2-direct-providers {
    padding: 25px 12px;
  }
  .x2-direct-providers > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .x2-direct-providers a {
    border-radius: 15px;
  }
  .x2-direct-providers h1 {
    font-size: 22px;
  }
  .x2-direct-providers a > span {
    padding: 8px;
    font-size: 11px;
  }
}
.x2-site [id] {
  scroll-margin-top: 160px;
}
.x2-loading-header {
  height: 143px;
  padding: 35px max(25px, calc((100vw - 1116px) / 2));
  display: flex;
  gap: 70px;
  align-items: center;
  background: var(--x2-color-111, #111);
}
.x2-loading-header > span {
  width: 190px;
  height: 45px;
  border-radius: 5px;
  background: var(--x2-color-232018, #232018);
}
.x2-loading-header > div {
  display: flex;
  gap: 30px;
}
.x2-loading-header i {
  width: 80px;
  height: 15px;
  border-radius: 4px;
  background: var(--x2-color-232018, #232018);
}
.x2-loading-jackpot {
  height: 165px;
  margin: 40px 0;
  border: 10px solid var(--x2-color-30291a, #30291a);
  border-radius: 80px;
  background: var(--x2-color-15130e, #15130e);
}
.x2-loading-games {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 15px;
}
.x2-loading-games span {
  aspect-ratio: 1;
  border-radius: 25px;
  background: var(--x2-color-211d13, #211d13);
}
.x2-interior-content .bg-\[\#1a1a1a\] {
  background: var(--x2-color-080808, #080808);
  box-shadow: none;
}
.x2-interior-content h1.text-4xl {
  font-size: 25px;
  font-weight: 400;
}
@media (max-width: 767px) {
  .x2-site [id] {
    scroll-margin-top: 65px;
  }
  .x2-loading-header {
    height: 54px;
    padding: 10px 15px;
    gap: 20px;
    justify-content: space-between;
  }
  .x2-loading-header > span {
    width: 140px;
    height: 30px;
  }
  .x2-loading-header i {
    width: 40px;
    height: 20px;
  }
  .x2-loading-header i:nth-child(n + 3) {
    display: none;
  }
  .x2-loading-header > div {
    gap: 10px;
  }
  .x2-loading-jackpot {
    height: 145px;
    margin: 20px 10px;
    border-width: 8px;
  }
  .x2-loading-games {
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding: 10px;
  }
}

/* Measured reference geometry: desktop 1280px, mobile 390px. */
.x2-site button,
.x2-site input {
  font-family: inherit;
}
.x2-jackpot-brand > img {
  width: 87px;
  height: auto;
  margin-bottom: 4px;
}
.x2-jackpot-number .jackpot-counter > span:first-child {
  color: var(--x2-color-b3a418, #b3a418);
}
.x2-jackpot-number .jackpot-counter {
  gap: 10px;
}
.x2-jackpot-games {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.x2-game-image {
  border-radius: 20px;
}
.x2-game-title {
  line-height: 21px;
}
.x2-game-tile > small {
  line-height: 18px;
  padding: 0 10px;
}
.x2-announcement {
  height: 40px;
}
.x2-announcement time {
  flex-basis: 27%;
  font-size: 14px;
}
.x2-ticker {
  font-size: 14px;
  padding: 5px 25px;
}
.x2-app-section {
  background: var(--x2-color-0d0d0d, #0d0d0d);
  border: 0;
}
.x2-app-section > div {
  min-height: 534px;
  gap: 0;
}
.x2-app-copy h3 {
  font-size: 32px;
  line-height: 1.2;
  font-weight: 400;
  margin: 0 0 10px;
}
.x2-app-copy h2 {
  font-size: 65px;
  line-height: 1.1;
  text-transform: uppercase;
  margin: 0 0 10px;
}
.x2-app-copy h2 span {
  display: block;
  color: var(--x2-color-dca744, #dca744);
}
.x2-app-copy > p {
  max-width: 315px;
  font-size: 18px;
}
.x2-phone {
  width: 280px;
  height: 480px;
  margin: 30px auto 0;
}
.x2-login-dialog {
  width: 464px;
  max-width: calc(100vw - 24px);
  padding: 0;
  border-radius: 10px;
}
.x2-auth-heading {
  padding: 28px 32px 12px;
  border-bottom: 1px solid var(--x2-color-2a2a2a, #2a2a2a);
}
.x2-auth-heading h1 {
  font-size: 18px;
  font-weight: 400;
  text-align: center;
  flex: 1;
}
.x2-login-form {
  padding: 30px 32px 12px;
  gap: 16px;
}
.x2-login-form input {
  min-height: 34px;
  height: 34px;
  padding: 6px 12px;
}
.x2-login-form .x2-button {
  width: 80%;
  align-self: center;
  margin: 0 auto;
  display: flex;
  background: linear-gradient(
    to right,
    var(--x2-color-bda270, #bda270),
    var(--x2-color-675a43, #675a43)
  );
}
.x2-register-prompt {
  margin: 0;
  padding: 0 0 10px;
}
.x2-register-prompt a {
  color: #5793c2;
}
@media (max-width: 767px) {
  .x2-site {
    background: var(--x2-color-0d0d0d, #0d0d0d);
  }
  .x2-home-jackpot {
    margin: 0;
    padding: 0;
    border-radius: 0;
    background: none;
  }
  .x2-jackpot-middle {
    padding: 0;
    background: none;
    border-radius: 0;
  }
  .x2-jackpot {
    padding: 10px 10px 18px;
    min-height: 162.6875px;
  }
  .x2-jackpot-inner {
    gap: 0;
  }
  .x2-jackpot-brand {
    padding: 0;
    margin: 0;
    flex: auto;
    width: 100%;
    align-items: center;
  }
  .x2-jackpot-brand > img {
    width: 64px;
    height: 29px;
    object-fit: contain;
    align-self: center;
    margin: 0 0 0 104px;
  }
  .x2-jackpot-brand > span {
    font-size: 24px;
    height: 29px;
    line-height: 24px;
    letter-spacing: -1px;
  }
  .x2-jackpot-number {
    padding: 10px;
    width: 100%;
  }
  .x2-jackpot-number > div {
    padding: 8px;
    border: 0;
  }
  .x2-jackpot-number .jackpot-counter {
    border: 3px dotted var(--x2-color-595110, #595110);
    border-radius: 50px;
    min-height: 41px;
    padding: 0 0 5px;
  }
  .x2-jackpot-number span {
    font-size: 28px !important;
    line-height: 30px !important;
    letter-spacing: 2px;
  }
  .x2-announcement {
    height: 33px;
  }
  .x2-ticker {
    font-size: 12px;
    padding: 0;
  }
  .x2-category-strip {
    min-height: 98px;
  }
  .x2-collections {
    padding: 0;
  }
  .x2-section-title {
    height: 44px;
    padding: 10px;
    margin: 10px 0 0;
  }
  .x2-popular-rail {
    grid-auto-columns: 78px;
    gap: 20px;
    padding: 20px 26px 35px;
    background: var(--x2-color-0d0d0d, #0d0d0d);
  }
  .x2-game-tile {
    padding: 5px;
    border-radius: 25px;
  }
  .x2-game-image {
    border-radius: 20px;
  }
  .x2-game-title {
    height: 25.5px;
    padding: 12px 5px 0;
    font-size: 9px;
    line-height: 13.5px;
  }
  .x2-game-tile > small {
    padding: 0;
    font-size: 9px;
    line-height: 13.5px;
  }
  .x2-selection-grid,
  .x2-jackpot-games {
    grid-template-columns: none;
    grid-auto-columns: 98px;
    padding: 20px 16px;
    gap: 10px;
  }
  .x2-app-section > div {
    min-height: 250px;
    gap: 20px;
  }
  .x2-app-copy h3 {
    font-size: 12px;
  }
  .x2-app-copy h2 {
    font-size: 23px;
  }
  .x2-app-copy > p {
    font-size: 10px;
  }
  .x2-phone {
    width: 110px;
    height: 205px;
    margin: 10px 0;
  }
  .x2-login-dialog {
    width: calc(100vw - 30px);
  }
  .x2-auth-heading {
    padding: 20px 20px 12px;
  }
  .x2-login-form {
    padding: 20px;
  }
}

.x2-download-phone {
  width: 100%;
  height: auto;
  max-width: 553px;
}
.x2-jackpot-brand > span {
  font-weight: 700;
}
@media (max-width: 767px) {
  .x2-download-phone {
    width: 100%;
    height: auto;
  }
}

.x2-footer {
  background: var(--x2-color-111, #111);
  color: var(--x2-color-8e8e8e, #8e8e8e);
}
.x2-footer .x2-container {
  padding-top: 20px;
}
.x2-footer-columns {
  padding-bottom: 24px;
  border: 0;
}
.x2-footer h2 {
  font-size: 16px;
  color: var(--x2-color-bda270, #bda270);
  margin-bottom: 12px;
}
.x2-footer-columns > div > a {
  font-size: 14px;
  line-height: 20px;
  margin-bottom: 10px;
}
.x2-service-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  border: 0;
  padding: 0 0 24px;
}
.x2-service-row > div {
  border: 1px solid var(--x2-color-303030, #303030);
  background: var(--x2-color-0d0d0d, #0d0d0d);
  border-radius: 5px;
  padding: 20px 16px;
}
.x2-service-row header {
  display: flex;
  align-items: center;
  gap: 9px;
}
.x2-service-row header span {
  display: grid;
  place-items: center;
  padding: 10px;
  border-radius: 50%;
  background: var(--x2-color-252017, #252017);
}
.x2-service-row h3 {
  font-size: 16px;
  margin: 0;
  color: var(--x2-color-bda270, #bda270);
}
.x2-service-row p {
  font-size: 12px;
  margin-top: 9px;
}
.x2-bank-strip {
  border: 1px solid var(--x2-color-303030, #303030);
  border-radius: 6px;
  padding: 24px;
  justify-content: center;
  flex-wrap: wrap;
  background: var(--x2-color-0d0d0d, #0d0d0d);
}
.x2-bank-note {
  margin: 10px 0 24px;
  font-size: 12px;
  text-align: center;
}
.x2-footer-assurance {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding-bottom: 20px;
  gap: 25px;
}
.x2-footer-assurance > div {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.x2-footer-assurance span {
  width: 100%;
  color: var(--x2-color-bda270, #bda270);
}
.x2-footer-assurance strong {
  font-size: 14px;
}
.x2-footer-providers details {
  display: flex;
  align-items: center;
  border: 0;
  padding: 8px 0;
}
.x2-footer-providers details > div {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.x2-footer-providers details a {
  display: flex;
  align-items: center;
  width: 72px;
  height: 40px;
  filter: grayscale(1);
}
.x2-footer-providers details img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
@media (min-width: 768px) {
  .x2-footer-providers details {
    display: block;
  }
  .x2-footer-providers summary {
    pointer-events: none;
    cursor: default;
    width: 130px;
    font-size: 14px;
    float: left;
  }
  .x2-footer-providers details:not([open]) > div {
    display: flex;
    margin-left: 140px;
  }
}
@media (max-width: 767px) {
  .x2-service-row {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .x2-service-row > div {
    padding: 12px;
  }
  .x2-service-row h3 {
    font-size: 12px;
  }
  .x2-service-row header span {
    padding: 6px;
  }
  .x2-service-row header svg {
    width: 18px;
  }
  .x2-footer-assurance {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}
.x2-category-skin {
  position: relative;
}
.x2-category-skin > img {
  width: 100%;
  height: auto;
}
.x2-category-skin.x2-cockfight-skin > img {
  height: clamp(180px, 24vw, 280px);
  object-fit: contain;
}
.x2-slots-skin > img {
  aspect-ratio: 1517 / 737;
  object-fit: contain;
}
.x2-slot-counter {
  position: relative;
  margin-top: -330px;
  padding-bottom: 60px;
}
.x2-slot-counter .x2-jackpot-compact {
  width: 556px;
  margin: 0 auto;
  max-width: 90%;
  padding: 0;
}
.x2-slot-counter .x2-jackpot-rim,
.x2-slot-counter .x2-jackpot-middle {
  padding: 0;
  background: none;
}
.x2-slot-counter .x2-jackpot-number {
  padding: 10px;
  box-shadow: 0 5px 15px var(--x2-color-000, #000);
}
.x2-slot-counter .x2-jackpot-number > div {
  padding: 10px;
}
.x2-slot-counter .x2-jackpot-number span {
  font-size: 50px !important;
  line-height: 40px !important;
}
.x2-slot-counter .x2-jackpot-number .jackpot-counter {
  padding-bottom: 7px;
}
.x2-catalog {
  margin-top: 0;
  padding: 30px;
  border-radius: 50px;
  background: var(--x2-color-100e07e5, #100e07e5);
  margin-bottom: 20px;
}
.x2-provider-strip {
  height: 96px;
  border: 0;
  padding: 10px 24px;
  border-radius: 100px;
  background: linear-gradient(var(--x2-color-423b1c, #423b1c), var(--x2-color-17140a, #17140a));
}
.x2-provider-strip > a {
  flex-basis: 120px;
  height: 76px;
}
.x2-provider-strip img {
  width: 105px;
  height: 50px;
  filter: grayscale(1);
}
.x2-provider-strip a:hover img,
.x2-provider-strip a.is-active img {
  filter: none;
}
@media (max-width: 767px) {
  .x2-category-skin:not(.x2-slots-skin) > img {
    min-height: 170px;
    object-fit: cover;
  }
  .x2-category-skin.x2-cockfight-skin > img {
    height: clamp(140px, 45vw, 180px);
    min-height: 0;
    object-fit: contain;
  }
  .x2-slots-skin > img {
    aspect-ratio: 1517 / 1000;
    object-fit: cover;
    object-position: center top;
  }
  .x2-slot-counter {
    margin-top: -82px;
    padding-bottom: 20px;
  }
  .x2-slot-counter .x2-jackpot-compact {
    width: calc(100% - 20px);
    max-width: 100%;
    min-height: 0;
  }
  .x2-slot-counter .x2-jackpot-number span {
    font-size: 28px !important;
    line-height: 30px !important;
  }
  .x2-slot-counter .x2-jackpot-number .jackpot-counter {
    padding-bottom: 5px;
  }
  .x2-catalog {
    padding: 10px;
    border-radius: 25px;
  }
  .x2-provider-strip {
    height: 80px;
    padding: 6px 10px;
    border-radius: 45px;
  }
  .x2-provider-strip > a {
    flex-basis: 95px;
    height: 60px;
  }
  .x2-provider-strip img {
    width: 80px;
    height: 40px;
  }
}

.x2-mobile-app {
  display: none !important;
}
@media (max-width: 767px) {
  .x2-collections > section:not(:first-child) {
    display: none;
  }
  .x2-app-section > .x2-desktop-app {
    display: none;
  }
  .x2-app-section > .x2-mobile-app {
    display: block !important;
    min-height: 0;
    padding: 0 0 20px;
  }
  .x2-mobile-app h2 {
    background: var(--x2-color-bda270, #bda270);
    color: var(--x2-color-fff, #fff);
    padding: 10px;
    font-size: 16px;
    font-weight: 400;
  }
  .x2-mobile-app > div {
    margin: 20px auto;
    padding: 15px;
    max-width: 240px;
    border: 1px solid var(--x2-color-4a3f2b, #4a3f2b);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  .x2-mobile-app img {
    width: 125px;
    height: 125px;
    object-fit: contain;
  }
  .x2-mobile-app > div > span {
    font-size: 16px;
  }
  .x2-mobile-app > p {
    font-size: 12px;
    text-align: center;
  }
  .x2-mobile-app a {
    color: var(--x2-color-bda270, #bda270);
    text-decoration: underline;
  }
  .x2-category-strip img {
    width: 25px;
    height: 25px;
    filter: none;
  }
  .x2-service-row,
  .x2-footer-assurance,
  .x2-footer-providers {
    display: none;
  }
}

/* Reference completion: mobile rail controls and the shared contact presentation. */
.x2-popular-carousel {
  position: relative;
}
.x2-popular-prev,
.x2-popular-next {
  position: absolute;
  z-index: 1;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 24px;
  height: 40px;
  color: var(--x2-color-fff, #fff);
  background: var(--x2-color-0d0d0db3, #0d0d0db3);
}
.x2-popular-prev {
  left: 0;
}
.x2-popular-next {
  right: 0;
}
.x2-mobile-back {
  flex: 1;
}
.x2-contact {
  padding: 32px 0 40px;
}
.x2-contact h1 {
  font-size: 24px;
  font-weight: 400;
  margin-bottom: 24px;
}
.x2-contact-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: 40px 32px 60px;
  border-radius: 16px;
  background: linear-gradient(var(--x2-color-191919, #191919), var(--x2-color-29261f, #29261f));
}
.x2-contact-card {
  min-height: 170px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  padding: 24px 16px 16px;
  border-radius: 16px;
  background: linear-gradient(125deg, var(--x2-color-000, #000), var(--x2-color-59451d, #59451d));
  background-size: cover;
  background-position: center;
  overflow-wrap: anywhere;
}
.x2-contact-card strong {
  font-weight: 400;
  font-size: 16px;
}
.x2-contact-card > span {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}
.x2-contact-livechat {
  grid-column: 1 / -1;
  background-image: url('/templates/x2/contact-live-chat.svg');
}
.x2-contact-whatsapp {
  background-image: url('/templates/x2/contact-whatsapp.svg');
}
.x2-contact-telegram {
  background-image: url('/templates/x2/contact-telegram.svg');
}
.x2-referral-content {
  background: var(--x2-color-0d0d0d, #0d0d0d);
}
.x2-referral-content [class*='bg-gradient-to-'] {
  background-image: linear-gradient(
    110deg,
    var(--x2-color-242017, #242017),
    var(--x2-color-111, #111)
  );
}
.x2-referral-content [class*='bg-clip-text'] {
  background: none;
  color: var(--x2-gold);
  -webkit-text-fill-color: currentColor;
}
@media (max-width: 767px) {
  .x2-category-strip {
    min-height: 83px;
    height: 83px;
    border: 0;
    background: var(--x2-color-0d0d0d, #0d0d0d);
  }
  .x2-category-strip > div {
    scrollbar-width: none;
  }
  .x2-category-strip > div::-webkit-scrollbar {
    display: none;
  }
  .x2-category-strip a {
    flex-basis: 80px;
  }
  .x2-section-title > a {
    display: none;
  }
  .x2-section-title h2 {
    font-size: 16px;
  }
  .x2-bottom-nav {
    height: calc(54px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--x2-color-594a27, #594a27);
    border-top: 0;
  }
  .x2-site {
    padding-bottom: calc(54px + env(safe-area-inset-bottom, 0px));
  }
  .x2-bottom-nav img {
    width: 20px;
    height: 20px;
    object-fit: contain;
  }
  .x2-bottom-nav .x2-bottom-center img {
    width: 48px;
    height: 48px;
    margin-top: -26px;
    padding: 5px;
    border-radius: 50%;
    background: var(--x2-color-594a27, #594a27);
  }
  .x2-bottom-nav > * {
    font-size: 8px;
  }
  .x2-drawer {
    width: 234px;
    border: 0;
    overflow: visible;
  }
  .x2-drawer-content {
    height: 100dvh;
    overflow-y: auto;
    padding: 0;
  }
  .x2-drawer-heading {
    position: absolute;
    right: 100%;
    top: 0;
    margin: 0;
    padding: 0;
  }
  .x2-drawer-heading h2 {
    display: none;
  }
  .x2-drawer-heading > button {
    width: 52px;
    height: 54px;
    display: grid;
    place-items: center;
  }
  .x2-drawer-content > .x2-drawer-telegram {
    margin: 18px 8px 12px;
    padding: 10px;
    min-height: 46px;
    justify-content: center;
    background: linear-gradient(110deg, #172a3b, #3b7ba2);
    border: 0;
    border-radius: 4px;
  }
  .x2-drawer-auth {
    padding: 12px;
    gap: 10px;
    background: linear-gradient(
      110deg,
      var(--x2-color-141414, #141414),
      var(--x2-color-050505, #050505)
    );
  }
  .x2-drawer-auth > * {
    min-height: 44px;
    border-radius: 4px;
    font-size: 13px;
  }
  .x2-drawer-auth > .x2-button {
    background: var(--x2-gold);
  }
  .x2-drawer-content > a:not(.x2-drawer-telegram),
  .x2-drawer details > summary,
  .x2-drawer-language {
    border: 0;
    border-left: 3px solid var(--x2-gold);
    min-height: 42px;
    padding: 10px 15px;
    color: var(--x2-color-9a927e, #9a927e);
    gap: 10px;
  }
  .x2-drawer-content > a > img,
  .x2-drawer summary > img,
  .x2-drawer-language > img {
    width: 20px;
    height: 20px;
  }
  .x2-drawer details > summary {
    display: flex;
    align-items: center;
  }
  .x2-drawer details[open] summary > svg {
    transform: rotate(90deg);
  }
  .x2-contact {
    padding: 15px 16px 0;
  }
  .x2-contact h1 {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .x2-contact-panel {
    gap: 14px 12px;
    padding: 40px 16px 60px;
  }
  .x2-contact-card {
    min-height: 130px;
  }
  .x2-contact-livechat {
    min-height: 160px;
  }
  .x2-contact-card strong {
    font-size: 14px;
  }
  .x2-contact-livechat strong {
    font-size: 16px;
  }
  .x2-footer-columns {
    gap: 26px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .x2-footer .x2-container {
    padding-inline: 16px;
  }
  .x2-footer h2 {
    color: var(--x2-color-ddd, #ddd);
  }
  .x2-footer-columns > div > a {
    font-size: 14px;
  }
  .x2-bank-strip {
    border-top: 1px solid var(--x2-color-292929, #292929);
  }
}

/* Authenticated shell follows the same two-column account frame as the reference. */
.x2-wallet {
  display: flex;
  align-items: center;
  gap: 7px;
}
.x2-wallet > button {
  display: grid;
  place-items: center;
}
.x2-wallet details {
  position: relative;
}
.x2-wallet summary {
  display: flex;
  align-items: center;
  gap: 5px;
  list-style: none;
  cursor: pointer;
}
.x2-wallet summary::-webkit-details-marker {
  display: none;
}
.x2-wallet summary > span {
  color: #a6ca83;
}
.x2-wallet-breakdown {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 45;
  width: 350px;
  max-width: calc(100vw - 32px);
  padding: 20px 30px;
  border: 3px solid var(--x2-color-dfc98f, #dfc98f);
  border-radius: 17px;
  background: var(--x2-color-000e, #000e);
  box-shadow: 0 12px 30px var(--x2-color-0006, #0006);
  font-size: 13px;
}
.x2-wallet-breakdown h2 {
  color: var(--x2-color-dfc98f, #dfc98f);
  font-size: 18px;
  border-bottom: 2px solid var(--x2-color-dfc98f, #dfc98f);
  padding-bottom: 10px;
  margin-bottom: 14px;
}
.x2-wallet-breakdown dl > div {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-block: 7px;
}
.x2-wallet-breakdown dd {
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.x2-wallet-breakdown p {
  color: var(--x2-color-aaa, #aaa);
  font-size: 12px;
  line-height: 1.6;
  margin-top: 12px;
}
.x2-member-welcome {
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 20px 40px;
  margin-bottom: 20px;
  border-radius: 16px;
  background: var(--x2-color-242015, #242015);
  font-size: 20px;
}
.x2-member-welcome > svg {
  color: var(--x2-gold);
}
.x2-member-welcome strong {
  color: var(--x2-gold);
  font-weight: 400;
  text-transform: uppercase;
}
.x2-member-welcome > div:last-child {
  margin-left: auto;
  text-align: right;
}
.x2-member-welcome > div > span {
  font-size: 18px;
  display: block;
}
.x2-member-welcome .x2-wallet {
  justify-content: flex-end;
}
.x2-member-layout {
  gap: 18px;
}
.x2-member-layout .x2-account-sidebar {
  width: 270px;
  border: 0;
  border-radius: 18px;
  padding: 24px 15px;
}
.x2-account-sidebar nav h2 {
  text-align: center;
  color: var(--x2-gold);
  font-size: 20px;
  font-weight: 400;
  margin: 14px 0 20px;
}
.x2-account-sidebar nav + nav {
  margin-top: 48px;
}
.x2-account-sidebar nav a {
  justify-content: center;
  padding: 14px;
  min-height: 50px;
  margin-bottom: 15px;
  border: 0;
  border-radius: 10px;
  background: var(--x2-color-242015, #242015);
  font-size: 16px;
}
.x2-account-sidebar nav a > svg {
  display: none;
}
.x2-account-sidebar nav a[aria-current],
.x2-account-sidebar nav a:hover {
  background: linear-gradient(
    90deg,
    var(--x2-color-bda270, #bda270),
    var(--x2-color-675a43, #675a43)
  );
}
.x2-member-layout .x2-interior-content {
  border: 0;
  padding: 35px 40px;
}
.x2-member-layout .x2-interior-content > div > .max-w-lg {
  max-width: none;
}
.x2-member-layout .x2-interior-content > div {
  padding: 0;
}
.x2-member-layout .x2-interior-content h1,
.x2-account-overview > h2 {
  font-size: 26px;
  font-weight: 400;
  color: var(--x2-gold);
  text-align: left;
  border-bottom: 4px solid var(--x2-gold);
  padding: 0 14px 6px;
  margin-bottom: 32px;
}
.x2-member-layout div[class*='bg-[#4FD1C5]'],
.x2-member-layout div[class*='bg-[#2d2d2d]'] {
  background: var(--x2-color-0a0a0a, #0a0a0a);
  border: 1px solid var(--x2-color-282828, #282828);
  border-radius: 4px;
  padding: 0;
}
.x2-member-layout [class*='text-[#4FD1C5]'] {
  color: var(--x2-gold);
}
.x2-member-layout form :is(input, select, textarea) {
  background: var(--x2-color-0a0a0a, #0a0a0a);
  color: var(--x2-color-eee, #eee);
  border: 0;
  min-height: 34px;
  padding: 6px 12px;
}
.x2-member-layout form label {
  color: var(--x2-color-eee, #eee);
  font-size: 14px;
  font-weight: 400;
}
.x2-member-layout form > button[type='submit'] {
  max-width: 300px;
  display: block;
  margin: 30px auto 0;
  background: linear-gradient(
    90deg,
    var(--x2-color-bda270, #bda270),
    var(--x2-color-675a43, #675a43)
  );
  color: var(--x2-color-fff, #fff);
  font-weight: 400;
}
.x2-member-layout :is(#x2-bank-details, #x2-password-form) {
  scroll-margin-top: 80px;
}
.x2-member-mobile-tabs {
  display: none;
}
.x2-account-info-panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 40px 10px 64px;
}
.x2-account-info-panels > * {
  background: var(--x2-color-231f17, #231f17);
  border-radius: 18px;
  padding: 24px 16px;
}
.x2-account-info-panels dl > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}
.x2-account-info-panels dt {
  text-align: right;
}
.x2-account-info-panels dd {
  overflow-wrap: anywhere;
}
.x2-account-info-panels h2 {
  margin-bottom: 16px;
}
.x2-account-info-panels p {
  color: var(--x2-color-bbb, #bbb);
  margin-bottom: 20px;
}
@media (min-width: 768px) {
  .x2-member-layout[data-x2-page='profile'] #x2-password-form > div {
    display: grid;
    grid-template-columns: 36% 1fr;
    align-items: center;
    gap: 16px;
  }
  .x2-member-layout[data-x2-page='deposit'] form > div {
    margin-block: 30px;
  }
}
@media (max-width: 767px) {
  .x2-mobile-header .x2-wallet-breakdown {
    position: fixed;
    top: 60px;
    right: 16px;
  }
  .x2-wallet-breakdown {
    font-size: 13px;
  }
  .x2-member-welcome {
    padding: 12px 16px;
    margin: 6px 0 15px;
    border-radius: 0;
    gap: 12px;
    font-size: 13px;
    flex-wrap: wrap;
  }
  .x2-member-welcome > svg {
    display: none;
  }
  .x2-member-welcome > div > span {
    display: none;
  }
  .x2-member-layout .x2-account-sidebar {
    display: none;
  }
  .x2-member-layout .x2-interior-content {
    padding: 15px 20px 30px;
    border-radius: 0;
    background: var(--x2-color-0d0d0d, #0d0d0d);
  }
  .x2-member-mobile-tabs {
    display: flex;
    border-radius: 10px;
    overflow: hidden;
    background: var(--x2-color-4f4f4f, #4f4f4f);
    margin-bottom: 35px;
  }
  .x2-member-mobile-tabs > a {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    text-align: center;
    text-transform: uppercase;
    font-size: 10px;
    line-height: 1.1;
    min-height: 66px;
    padding: 8px 4px;
    border-right: 1px solid var(--x2-color-0d0d0d, #0d0d0d);
  }
  .x2-member-mobile-tabs > a:last-child {
    border: 0;
  }
  .x2-member-mobile-tabs > a[aria-current] {
    background: var(--x2-gold);
  }
  .x2-payment-tabs > a {
    flex-direction: row;
    min-height: 40px;
    font-size: 12px;
  }
  .x2-member-layout .x2-interior-content h1,
  .x2-account-overview > h2 {
    font-size: 20px;
    text-align: center;
    border: 0;
    padding: 14px 0;
    margin-bottom: 20px;
  }
  .x2-member-layout[data-x2-page='deposit'] .x2-interior-content h1,
  .x2-member-layout[data-x2-page='withdraw'] .x2-interior-content h1 {
    text-align: left;
    font-size: 16px;
  }
  .x2-account-info-panels {
    grid-template-columns: 1fr;
    margin: 0 0 30px;
  }
  .x2-account-info-panels > * {
    background: var(--x2-color-13120d, #13120d);
  }
}
.x2-payment-label {
  font-size: 14px;
  margin: 0 0 8px;
}
.x2-member-layout .x2-payment-methods {
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 8px;
  padding-bottom: 4px;
}
.x2-member-layout .x2-payment-methods > button {
  min-width: 82px;
  min-height: 56px;
  padding: 8px 10px;
  border: 0;
  border-radius: 5px;
  flex-direction: column;
  gap: 3px;
  background: var(--x2-color-ccc, #ccc);
  color: var(--x2-color-111, #111);
  font-size: 12px;
  font-weight: 400;
}
.x2-member-layout .x2-payment-methods > button[aria-pressed='true'] {
  background: linear-gradient(var(--x2-color-bda270, #bda270), var(--x2-color-695327, #695327));
  color: var(--x2-color-fff, #fff);
}
.x2-member-layout [data-payment-method='bank'] {
  order: -1;
}
.x2-member-layout .x2-deposit-notice {
  background: var(--x2-color-242015, #242015);
  border: 0;
  border-radius: 5px;
  box-shadow: none;
  padding: 10px 12px;
}
.x2-member-layout .x2-deposit-notice > div:first-child {
  display: none;
}
.x2-member-layout .x2-deposit-notice p {
  color: var(--x2-color-bda270, #bda270);
}
.x2-payment-history-link {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  padding: 10px 0 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--x2-color-333, #333);
}
.x2-payment-history-link > a {
  text-decoration: underline;
}
.x2-payment-history-link > span {
  text-align: right;
}
@media (max-width: 767px) {
  .x2-payment-welcome {
    display: none;
  }
  .x2-member-layout .x2-payment-methods > button {
    min-width: 64px;
    padding-inline: 6px;
  }
  .x2-member-layout[data-x2-page='deposit'] .x2-interior-content h1 {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
}
.x2-header-authenticated .x2-topbar {
  height: 54px;
}
.x2-interior:has(.x2-member-layout):not(:has(.x2-member-welcome)) {
  padding-top: 10px;
}
.x2-member-layout[data-x2-page='deposit'] .x2-interior-content h1 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.x2-member-layout[data-x2-page='deposit'] .x2-interior-content > div > .max-w-lg {
  display: flex;
  flex-direction: column;
}
.x2-member-layout[data-x2-page='deposit'] .x2-deposit-notice {
  order: 1;
  margin-top: 25px;
}
@media (min-width: 768px) {
  .x2-member-layout[data-x2-page='deposit'] .x2-interior-content {
    padding: 50px;
  }
}
/* Preserve Falcon's turnover information in the reference's member palette. */
.x2-member-layout[data-x2-page='profile'] [class*='bg-gradient-to-br'] {
  background-image: linear-gradient(
    110deg,
    var(--x2-color-2b2519, #2b2519),
    var(--x2-color-15130f, #15130f)
  );
  box-shadow: none;
}
.x2-member-layout[data-x2-page='profile'] [style*='linear-gradient'] {
  background-image: linear-gradient(
    90deg,
    var(--x2-color-675a43, #675a43),
    var(--x2-color-bda270, #bda270)
  ) !important;
}
.x2-member-layout[data-x2-page='profile'] [class*='bg-blue-600'] {
  background-color: var(--x2-color-675a43, #675a43);
}
.x2-turnover-details > summary {
  padding: 12px 16px;
  border: 1px solid var(--x2-color-675a43, #675a43);
  border-radius: 5px;
  color: var(--x2-gold);
  background: var(--x2-color-242015, #242015);
  cursor: pointer;
}
.x2-turnover-details[open] > summary {
  margin-bottom: 12px;
}

.x2-member-layout button[class*='bg-[#4FD1C5]'] {
  background: linear-gradient(
    90deg,
    var(--x2-color-bda270, #bda270),
    var(--x2-color-675a43, #675a43)
  );
  color: var(--x2-color-fff, #fff);
  min-height: 40px;
  padding: 10px 24px;
  border: 0;
}
.x2-member-layout[data-x2-page='withdraw']
  .x2-interior-content
  > div
  > .max-w-lg
  > div[class*='border-[#4FD1C5]'] {
  padding: 12px;
  border: 1px solid var(--x2-color-675a43, #675a43);
  background: var(--x2-color-242015, #242015);
}
.x2-member-layout[data-x2-page='withdraw']
  .x2-interior-content
  > div
  > .max-w-lg
  > div[class*='border-[#4FD1C5]']
  > div:first-child {
  display: none;
}

/* The reference's signed-in mobile home places member status above its banner. */
.x2-member-status {
  display: none;
}
@media (max-width: 767px) {
  .x2-homepage > .x2-member-status {
    display: block;
    order: -1;
  }
  .x2-homepage > .x2-announcement {
    order: -2;
  }
  .x2-member-status {
    background: var(--x2-color-222, #222);
    color: var(--x2-color-eee, #eee);
    font-size: 12px;
  }
  .x2-member-status-wallet {
    height: 42px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    background: linear-gradient(var(--x2-color-555, #555), var(--x2-color-282828, #282828));
  }
  .x2-member-status-wallet > a {
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 700;
  }
  .x2-member-status-wallet .x2-wallet {
    flex: 1;
    flex-direction: row-reverse;
    gap: 18px;
  }
  .x2-member-status-wallet .x2-wallet details {
    flex: 1;
    max-width: 260px;
  }
  .x2-member-status-wallet .x2-wallet summary {
    padding: 5px 9px;
    border-radius: 3px;
    background: var(--x2-color-070707, #070707);
    font-size: 14px;
  }
  .x2-member-status-wallet .x2-wallet summary > svg {
    margin-left: auto;
  }
  .x2-member-status-wallet .x2-wallet summary > span {
    color: #a4dc60;
  }
  .x2-member-status-progress {
    height: 55px;
    display: grid;
    grid-template-columns: 1fr 1fr 50px;
    align-items: center;
    padding: 5px 10px;
    gap: 10px;
  }
  .x2-member-status-progress > a + a {
    border-left: 1px solid var(--x2-color-444, #444);
    padding-left: 10px;
  }
  .x2-status-label {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    margin-bottom: 6px;
  }
  .x2-status-meter {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
  }
  .x2-status-meter b {
    background: var(--x2-color-666, #666);
    font-weight: 400;
    padding: 2px 4px;
  }
  .x2-status-points .x2-status-meter b {
    background: var(--x2-color-e59b35, #e59b35);
  }
  .x2-status-meter > span {
    position: relative;
    flex: 1;
    background: var(--x2-color-3a3a3a, #3a3a3a);
    border-radius: 15px;
    height: 20px;
    line-height: 20px;
    padding: 0 6px;
    overflow: hidden;
    text-align: right;
  }
  .x2-status-points .x2-status-meter > span {
    text-align: left;
    color: var(--x2-color-d6a25e, #d6a25e);
  }
  .x2-status-meter i {
    position: absolute;
    inset: 0 auto 0 0;
    background: #a8ce5644;
  }
  .x2-status-gift {
    display: grid;
    place-items: center;
    color: var(--x2-color-d8ae4c, #d8ae4c);
  }
  .x2-mobile-header > a[aria-label='Pesan'] {
    margin-left: auto;
    padding: 12px;
    color: var(--x2-color-eee, #eee);
  }
}

.x2-status-label img {
  width: 14px;
  height: 14px;
  object-fit: contain;
}
.x2-status-label {
  display: flex;
  align-items: center;
  gap: 4px;
}
.x2-status-gift img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}
.x2-loyalty-page {
  max-width: 1040px;
  margin: 30px auto 70px;
  color: var(--x2-color-eee, #eee);
  font-size: 13px;
}
.x2-loyalty-page h1 {
  margin: 0;
  padding: 20px;
  font-size: 17px;
  text-align: center;
  font-weight: 700;
}
.x2-loyalty-overview {
  padding: 20px 16px 16px;
  background: linear-gradient(
    110deg,
    var(--x2-color-1e1e1e, #1e1e1e),
    var(--x2-color-343434, #343434)
  );
}
.x2-loyalty-current {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
}
.x2-loyalty-current > img {
  width: 38px;
  height: 48px;
}
.x2-loyalty-current > div {
  flex: 1;
  min-width: 0;
}
.x2-loyalty-current strong {
  display: block;
  color: var(--x2-color-b48a70, #b48a70);
  font-size: 16px;
  text-transform: uppercase;
  margin-bottom: 10px;
  font-weight: 400;
}
.x2-loyalty-current > span {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 14px;
}
.x2-loyalty-current:has(> a) > span {
  right: 30px;
}
.x2-loyalty-current em {
  color: #a6d65b;
  font-style: normal;
}
.x2-loyalty-progress {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
}
.x2-loyalty-progress span {
  padding: 2px 4px;
  background: var(--x2-color-666, #666);
}
.x2-loyalty-progress progress {
  flex: 1;
  height: 15px;
  border: 0;
  border-radius: 10px;
  overflow: hidden;
  background: var(--x2-color-050505, #050505);
}
.x2-loyalty-progress progress::-webkit-progress-bar {
  background: var(--x2-color-050505, #050505);
}
.x2-loyalty-progress progress::-webkit-progress-value {
  background: #a7cb57;
}
.x2-loyalty-progress progress::-moz-progress-bar {
  background: #a7cb57;
}
.x2-loyalty-totals {
  margin: 20px 0 0;
  border-radius: 8px;
  background: var(--x2-color-0e0e0e, #0e0e0e);
  padding: 5px 10px;
}
.x2-loyalty-totals > div {
  display: flex;
  justify-content: center;
  gap: 3px;
  padding: 6px;
}
.x2-loyalty-totals > div + div {
  border-top: 1px solid var(--x2-color-333, #333);
}
.x2-loyalty-totals dd {
  color: #a7cb57;
  margin: 0;
}
.x2-loyalty-ladder {
  padding: 18px 16px 0;
  margin: 0;
  display: flex;
  list-style: none;
  gap: 4px;
}
.x2-loyalty-ladder li {
  flex: 1;
  text-align: center;
  font-size: 12px;
  min-width: 0;
}
.x2-loyalty-ladder li > div {
  position: relative;
  padding: 10px 5px;
  border-radius: 8px;
}
.x2-loyalty-ladder li[aria-current] > div {
  background: var(--x2-color-222, #222);
}
.x2-loyalty-ladder img {
  width: 56px;
  height: 56px;
  margin: auto;
}
.x2-loyalty-ladder svg {
  position: absolute;
  right: 1px;
  top: 8px;
}
.x2-loyalty-ladder strong {
  display: block;
  text-transform: uppercase;
  font-weight: 400;
  margin: 6px 0;
  color: var(--x2-color-bd977b, #bd977b);
}
.x2-loyalty-ladder small {
  font-size: 10px;
}
.x2-loyalty-ladder i {
  display: block;
  background: var(--x2-color-333, #333);
  height: 7px;
  margin-top: 25px;
  position: relative;
}
.x2-loyalty-ladder i:after {
  content: '';
  display: block;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--x2-color-333, #333);
  position: absolute;
  left: calc(50% - 7px);
  top: -4px;
}
.x2-loyalty-ladder li[aria-current] i:after {
  background: #91be46;
}
.x2-loyalty-ladder .is-locked {
  opacity: 0.45;
  filter: saturate(0.4);
}
.x2-loyalty-congratulations {
  text-align: center;
  border: 1px dashed var(--x2-color-776a3d, #776a3d);
  padding: 8px;
  margin: 24px 16px 16px;
  line-height: 20px;
}
.x2-loyalty-benefits {
  margin: 16px;
  padding: 16px;
  background: var(--x2-color-141414, #141414);
  border-radius: 12px;
}
.x2-loyalty-benefits h2 {
  font-size: 16px;
  margin: 0 0 16px;
}
.x2-loyalty-benefits h2 span {
  color: var(--x2-color-bd977b, #bd977b);
  text-transform: uppercase;
}
.x2-loyalty-benefits > a,
.x2-loyalty-benefits > div {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 16px;
  background: var(--x2-color-242424, #242424);
  margin-top: 8px;
  border-radius: 7px;
}
.x2-loyalty-benefits > a > svg:first-child,
.x2-loyalty-benefits > div > svg {
  color: var(--x2-color-be9574, #be9574);
  width: 38px;
  height: 38px;
}
.x2-loyalty-benefits > a > svg:last-child {
  margin-left: auto;
}
.x2-loyalty-benefits p {
  margin: 6px 0 0;
  color: var(--x2-color-bbb, #bbb);
}
.x2-loyalty-menu {
  display: flex;
  background: var(--x2-color-222, #222);
  padding: 16px 5px;
}
.x2-loyalty-menu > * {
  flex: 1;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 10px;
  color: var(--x2-color-c6ad77, #c6ad77);
  font-size: 12px;
}
.x2-loyalty-menu [aria-pressed='true'] {
  color: var(--x2-color-fff, #fff);
}
.x2-loyalty-menu svg {
  width: 30px;
  height: 30px;
}
.x2-loyalty-store,
.x2-loyalty-history,
.x2-loyalty-about {
  padding: 24px 16px;
}
.x2-loyalty-page h2 {
  font-size: 16px;
}
.x2-loyalty-redemption {
  display: flex;
  align-items: center;
  background: var(--x2-color-242424, #242424);
  padding: 25px;
  gap: 25px;
  border-radius: 8px;
  margin-top: 20px;
}
.x2-loyalty-redemption > img {
  width: 100px;
  height: 100px;
  object-fit: contain;
}
.x2-loyalty-redemption p {
  margin: 12px 0;
  color: var(--x2-color-c5b180, #c5b180);
}
.x2-loyalty-redemption small {
  display: block;
  margin-top: 10px;
}
.x2-loyalty-history table {
  width: 100%;
  border-collapse: collapse;
}
.x2-loyalty-history th,
.x2-loyalty-history td {
  text-align: left;
  padding: 12px 8px;
  border-bottom: 1px solid var(--x2-color-333, #333);
}
.x2-loyalty-about p {
  line-height: 1.7;
  margin: 16px 0;
}
.x2-loyalty-error {
  margin: 16px;
  padding: 12px;
  border: 1px solid var(--x2-color-8a764e, #8a764e);
}
.x2-loyalty-error button {
  text-decoration: underline;
}
@media (max-width: 767px) {
  .x2-loyalty-page {
    margin: 0 0 30px;
  }
  .x2-mobile-header .x2-brand img {
    object-position: left center;
  }
}

.x2-profile-fields {
  max-width: 780px;
  padding: 26px 30px 45px;
}
.x2-profile-fields h1 {
  font-size: 20px;
  text-align: center;
  padding: 0 0 28px;
}
.x2-profile-fields form > label {
  display: grid;
  grid-template-columns: 150px 1fr;
  align-items: center;
  gap: 24px;
  margin-bottom: 18px;
}
.x2-profile-fields form > label > span {
  text-align: right;
  font-size: 13px;
}
.x2-profile-fields input,
.x2-profile-fields select {
  width: 100%;
  height: 38px;
  border: 1px solid var(--x2-color-8d8d8d, #8d8d8d);
  background: var(--x2-color-1c1c1c, #1c1c1c);
  border-radius: 3px;
  padding: 8px 12px;
  color: var(--x2-color-eee, #eee);
  font-size: 13px;
}
.x2-profile-fields input[readonly] {
  color: var(--x2-color-b9b9b9, #b9b9b9);
  background: var(--x2-color-2a2a2a, #2a2a2a);
}
.x2-profile-submit {
  margin-left: 174px;
}
.x2-profile-submit button {
  width: 100%;
  border-radius: 3px;
}
@media (max-width: 767px) {
  .x2-profile-fields {
    padding: 22px 16px;
  }
  .x2-profile-fields form > label {
    grid-template-columns: 112px 1fr;
    gap: 12px;
  }
  .x2-profile-fields form > label > span {
    text-align: left;
  }
  .x2-profile-submit {
    margin-left: 124px;
  }
}
.x2-wallet-breakdown {
  max-height: min(650px, 75vh);
  overflow-y: auto;
}
.x2-provider-wallets {
  margin-top: 20px;
}
.x2-provider-wallets h3 {
  color: var(--x2-color-dfc98f, #dfc98f);
  text-align: left;
  font-size: 13px;
  margin: 16px 0 8px;
}
.x2-provider-wallets dl > div {
  border: 0;
  padding: 4px 0;
  font-size: 11px;
}
.x2-provider-wallets dd > span {
  color: #a7cb57;
  font-size: 10px;
}
.x2-user-actions {
  gap: 12px;
}
.x2-desktop-member-tier {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--x2-color-222, #222);
  padding: 4px 10px;
  min-width: 110px;
}
.x2-desktop-member-tier img {
  width: 24px;
  height: 28px;
}
.x2-desktop-member-tier progress {
  display: block;
  width: 80px;
  height: 5px;
  margin-top: 3px;
  appearance: none;
  border: 0;
  border-radius: 5px;
  overflow: hidden;
  background: var(--x2-color-000, #000);
}
.x2-desktop-member-tier progress::-webkit-progress-bar {
  background: var(--x2-color-000, #000);
}
.x2-desktop-member-tier progress::-webkit-progress-value {
  background: #a5c85b;
}
.x2-desktop-member-points {
  display: flex;
  align-items: center;
  gap: 5px;
}
.x2-desktop-member-points b {
  background: var(--x2-color-e79b37, #e79b37);
  padding: 3px;
  border-radius: 3px;
  color: var(--x2-color-fff, #fff);
  font-weight: 400;
}
@media (max-width: 767px) {
  .x2-member-status-wallet {
    gap: 8px;
  }
  .x2-member-status-wallet > a {
    flex: 0 1 calc(40% - 10px);
  }
  .x2-member-status-wallet .x2-wallet {
    display: contents;
  }
  .x2-member-status-wallet .x2-wallet details {
    order: 1;
    flex: 0 1 calc(50% - 8px);
    max-width: none;
  }
  .x2-member-status-wallet .x2-wallet > button {
    order: 2;
    width: 18px;
  }
  .x2-member-status-wallet .x2-wallet summary {
    height: 26px;
    line-height: 26px;
    padding: 0 9px;
  }
  .x2-member-status-progress {
    height: 56px;
    padding: 8px 16px;
    gap: 15px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.144fr) 34px;
  }
  .x2-member-status-progress > .x2-status-points {
    padding: 0 15px;
    border-inline: 1px solid var(--x2-color-3e3e3e, #3e3e3e);
  }
  .x2-member-status-progress > .x2-status-gift {
    border: 0;
    padding: 0;
  }
  .x2-status-gift img {
    width: 34px;
    height: 34px;
  }
  .x2-homepage .x2-section-title h2 > svg {
    display: none;
  }
  .x2-homepage .x2-section-title {
    padding-left: 16px;
  }
}
.x2-profile-fields h2 {
  color: var(--x2-gold);
  text-align: center;
  margin: 24px 0 18px;
  font-size: 18px;
  font-weight: 700;
}
.x2-profile-fields textarea {
  width: 100%;
  min-height: 114px;
  border: 1px solid var(--x2-color-333, #333);
  border-radius: 4px;
  background: var(--x2-color-101010, #101010);
  color: var(--x2-color-eee, #eee);
  padding: 10px 12px;
  font-size: 14px;
  resize: vertical;
}
@media (max-width: 767px) {
  .x2-member-layout .x2-interior-content:has(.x2-profile-fields) {
    padding: 0;
  }
  .x2-interior-content:has(.x2-profile-fields) .x2-member-mobile-tabs {
    margin: 15px 16px;
    padding: 40px 16px;
    height: 146px;
    border-radius: 16px;
    background: linear-gradient(var(--x2-color-171717, #171717), #26251f);
  }
  .x2-interior-content:has(.x2-profile-fields) .x2-member-mobile-tabs > a {
    flex: 1;
    min-width: 0;
    height: 66px;
    padding: 8px 4px;
    font-size: 11px;
  }
  .x2-profile-fields {
    margin: 15px 16px;
    padding: 40px 16px 30px;
    border-radius: 16px;
    background: linear-gradient(var(--x2-color-171717, #171717), #26251f);
  }
  .x2-member-layout .x2-profile-fields h1 {
    text-align: center;
    font-size: 18px;
    line-height: 22px;
    border: 0;
    padding: 0;
    margin: 0 0 20px;
    font-weight: 700;
  }
  .x2-profile-fields h2 {
    margin: 0 0 18px;
    line-height: 22px;
  }
  .x2-profile-fields form > label {
    display: block;
    margin-bottom: 22px;
  }
  .x2-profile-fields form > label > span {
    display: block;
    font-size: 12px;
    margin-bottom: 6px;
    line-height: 18px;
  }
  .x2-member-layout .x2-profile-fields form :is(input, select, textarea) {
    background: var(--x2-color-101010, #101010);
    border: 1px solid var(--x2-color-333, #333);
    height: 40px;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 14px;
  }
  .x2-member-layout .x2-profile-fields form textarea {
    height: 114px;
  }
  .x2-profile-fields form > h2:not(:first-child) {
    margin-top: 28px;
  }
  .x2-profile-submit {
    margin-left: 0;
  }
}
.x2-wallet-breakdown h2 {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 5px;
  border-bottom: 2px solid var(--x2-color-ebcb80, #ebcb80);
  color: var(--x2-color-ebcb80, #ebcb80);
  font-size: 19px;
  line-height: 19px;
  font-weight: 700;
}
.x2-wallet-breakdown h2 > span {
  font-size: 14px;
  white-space: nowrap;
}
.x2-wallet-content {
  max-height: 68vh;
  overflow: auto;
  margin-top: 25px;
  padding-right: 8px;
}
.x2-wallet-breakdown {
  overflow: visible;
  max-height: none;
  background: var(--x2-color-000d, #000d);
  border-color: var(--x2-color-ebcb80, #ebcb80);
  padding: 30px 28px 15px 30px;
}
.x2-provider-wallets {
  margin-top: 0;
}
.x2-provider-wallets h3 {
  margin: 0 0 5px;
  text-transform: uppercase;
  font-size: 14px;
}
.x2-provider-wallets section + section {
  margin-top: 15px;
}
.x2-provider-wallets dl > div {
  padding: 3px 0 3px 10px;
  font-size: 13px;
  line-height: 14px;
}
.x2-wallet-content > dl {
  margin-top: 18px;
}
@media (max-width: 767px) {
  .x2-member-status .x2-wallet-breakdown {
    position: fixed;
    top: 45px;
    left: 20px;
    right: 20px;
    width: auto;
    max-width: none;
    z-index: 70;
  }
}
.x2-member-mobile-tabs img {
  width: 25px;
  height: 25px;
  object-fit: contain;
}
.x2-togel-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-left: 16px !important;
  margin-left: 8px;
  border-left: 1px solid var(--x2-color-333, #333);
}
.x2-announcements-page article {
  border-bottom: 1px solid var(--x2-color-333, #333);
  padding: 20px 0;
}
.x2-announcements-page h2 {
  font-size: 16px;
  margin-bottom: 10px;
  color: var(--x2-gold);
}
.x2-announcements-page p {
  font-size: 13px;
  line-height: 1.6;
}
@media (max-width: 767px) {
  .x2-interior:has(.x2-profile-fields) {
    padding-top: 0;
  }
  .x2-interior-content:has(.x2-profile-fields) .x2-member-mobile-tabs > a {
    background: var(--x2-color-515151, #515151);
  }
  .x2-interior-content:has(.x2-profile-fields) .x2-member-mobile-tabs > a:first-child {
    border-radius: 10px 0 0 10px;
  }
  .x2-interior-content:has(.x2-profile-fields) .x2-member-mobile-tabs > a:last-child {
    border-radius: 0 10px 10px 0;
  }
  .x2-interior-content:has(.x2-profile-fields) .x2-member-mobile-tabs > a[aria-current] {
    background: var(--x2-gold);
  }
  .x2-member-layout .x2-profile-fields h1 {
    line-height: 27px;
    margin-bottom: 15px;
  }
  .x2-profile-fields h2 {
    line-height: 27px;
    margin-bottom: 10px;
  }
  .x2-profile-fields form > label {
    margin-bottom: 16px;
  }
  .x2-profile-fields form > label > span {
    height: 22.5px;
    padding-top: 4.5px;
    line-height: 18px;
    margin-bottom: 5px;
  }
  .x2-member-layout .x2-profile-fields form :is(input, select, textarea) {
    display: block;
    padding: 6px 12px;
    line-height: 20px;
  }
}
.x2-floating-help {
  position: fixed;
  z-index: 44;
  bottom: 64px;
  left: 10px;
  width: 60px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.x2-floating-help > button {
  width: 32px;
  height: 32px;
  margin-bottom: 8px;
}
.x2-floating-help > a {
  display: block;
  width: 60px;
  height: 62px;
}
.x2-floating-help img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* Final reference geometry for the signed-in desktop homepage. */
@media (min-width: 768px) {
  .x2-header-authenticated .x2-topbar {
    height: 53px;
  }
  .x2-site:has(.x2-header-authenticated) .x2-homepage > .x2-hero {
    margin-top: -8px;
  }
  .x2-profile-fields {
    padding: 0;
    max-width: none;
  }
  .x2-profile-fields h2 {
    text-align: left;
    border-bottom: 4px solid var(--x2-gold);
    padding: 0 14px 6px;
    margin: 28px 0;
    font-size: 18px;
    font-weight: 400;
  }
  .x2-profile-fields form > label {
    grid-template-columns: 260px 1fr;
    gap: 18px;
    margin-bottom: 14px;
  }
  .x2-profile-fields form > label > span {
    text-align: left;
    font-size: 12px;
  }
  .x2-profile-submit {
    margin-left: 278px;
  }
}
.x2-loyalty-interior .x2-loyalty-page {
  margin: 0;
  max-width: none;
}
.x2-loyalty-interior .x2-loyalty-menu {
  gap: 8px;
  padding: 18px 0 12px;
  background: transparent;
}
.x2-loyalty-menu img {
  width: 38px;
  height: 38px;
  object-fit: contain;
}
.x2-loyalty-menu > button {
  color: var(--x2-color-eee, #eee);
}
.x2-loyalty-interior .x2-loyalty-store {
  padding: 0;
}
.x2-loyalty-banner {
  display: block;
  overflow: hidden;
  border-radius: 10px;
}
.x2-loyalty-banner img {
  width: 100%;
  height: auto;
  aspect-ratio: 3.85;
  object-fit: cover;
}
.x2-loyalty-filters {
  display: flex;
  gap: 8px;
  margin: 16px 0 28px;
}
.x2-loyalty-filters button {
  padding: 10px 14px;
  background: var(--x2-color-222, #222);
  border-radius: 4px;
  font-size: 12px;
}
.x2-loyalty-filters button[aria-pressed='true'] {
  background: var(--x2-color-454545, #454545);
}
.x2-loyalty-store > h2 {
  border-left: 4px solid var(--x2-color-c6ad77, #c6ad77);
  padding-left: 10px;
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 14px;
}
.x2-loyalty-product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.x2-loyalty-interior .x2-loyalty-redemption {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin: 0;
  padding: 10px;
  gap: 12px;
  background: var(--x2-color-202020, #202020);
  border: 1px solid var(--x2-color-333, #333);
  border-radius: 7px;
}
.x2-loyalty-redemption > img {
  width: 100%;
  height: 150px;
  padding: 25px;
  background: linear-gradient(
    135deg,
    var(--x2-color-343025, #343025),
    var(--x2-color-151515, #151515)
  );
  object-fit: contain;
}
.x2-loyalty-redemption h3 {
  font-size: 14px;
  font-weight: 400;
}
.x2-loyalty-redemption p {
  font-size: 12px;
}
.x2-loyalty-redemption .x2-button {
  width: 100%;
  min-height: 30px;
  padding: 4px 12px;
}
.x2-loyalty-empty {
  background: var(--x2-color-1c1c1c, #1c1c1c);
  border: 1px solid var(--x2-color-333, #333);
  padding: 30px 16px;
  margin: 16px 0;
  text-align: center;
  color: var(--x2-color-aaa, #aaa);
  border-radius: 8px;
}
.x2-loyalty-missions,
.x2-loyalty-draws {
  padding: 20px 0;
}
@media (min-width: 768px) {
  .x2-loyalty-menu > button {
    flex-direction: row;
    gap: 6px;
    padding: 6px;
    font-size: 12px;
    background: var(--x2-color-231f17, #231f17);
    border-radius: 5px;
  }
  .x2-loyalty-menu img {
    width: 26px;
    height: 26px;
  }
  .x2-loyalty-overview {
    border-radius: 12px;
  }
  .x2-loyalty-current > img {
    width: 50px;
    height: 50px;
  }
}
@media (max-width: 767px) {
  .x2-site .x2-interior:has(.x2-profile-fields),
  .x2-site .x2-interior:has(.x2-loyalty-page) {
    padding-top: 0;
  }
  .x2-interior-content:has(.x2-loyalty-page) {
    padding: 0;
  }
  .x2-interior-content:has(.x2-loyalty-page) .x2-member-mobile-tabs {
    display: none;
  }
  .x2-member-layout .x2-loyalty-page > h1 {
    font-size: 16px;
    font-weight: 700;
    color: var(--x2-color-fff, #fff);
    text-align: center;
    padding: 18px 0;
    border: 0;
    margin: 0;
    line-height: 20px;
  }
  .x2-loyalty-interior .x2-loyalty-overview {
    padding: 13px 16px;
  }
  .x2-loyalty-interior .x2-loyalty-menu {
    padding: 20px 16px 16px;
    gap: 4px;
  }
  .x2-loyalty-menu > button {
    padding: 0;
    gap: 5px;
    font-size: 12px;
    line-height: 18px;
    min-width: 0;
    justify-content: start;
  }
  .x2-loyalty-menu img {
    width: 40px;
    height: 40px;
    padding: 5px;
    background: var(--x2-color-252017, #252017);
    border-radius: 8px;
  }
  .x2-loyalty-menu > button:first-child img {
    width: 42px;
    height: 42px;
  }
  .x2-loyalty-interior .x2-loyalty-store {
    padding: 0 16px;
  }
  .x2-loyalty-interior .x2-loyalty-current {
    min-height: 50px;
  }
  .x2-loyalty-interior .x2-loyalty-missions,
  .x2-loyalty-interior .x2-loyalty-draws {
    padding: 0 16px;
  }
}
.x2-contact-input {
  display: flex;
  align-items: stretch;
  min-width: 0;
  gap: 4px;
}
.x2-contact-input > select {
  flex: 0 0 85px;
  width: 85px;
  padding: 4px !important;
}
.x2-contact-input > input {
  flex: 1;
  min-width: 0;
  width: 0;
}
.x2-contact-input > button {
  flex: 0 0 28px;
  display: grid;
  place-items: center;
  color: var(--x2-color-bda270, #bda270);
}
/* Measured desktop profile rows and loyalty menu at the reference breakpoint. */
@media (min-width: 768px) {
  .x2-desktop-nav {
    background: var(--x2-color-202020, #202020);
  }
  .x2-member-layout .x2-interior-content:has(.x2-profile-fields) {
    padding-top: 42px;
  }
  .x2-member-layout .x2-profile-fields h1 {
    line-height: 30px;
    margin-bottom: 30px;
  }
  .x2-profile-fields h2 {
    line-height: 24px;
    margin: 0 0 30px;
  }
  .x2-profile-fields form > h2:not(:first-child) {
    margin-top: 15px;
  }
  .x2-profile-fields form > label {
    grid-template-columns: 271px 1fr;
    padding: 0 14px;
    margin-bottom: 15px;
  }
  .x2-member-layout .x2-profile-fields form :is(input, select, textarea) {
    min-height: 34px;
    height: 34px;
    padding: 6px 12px;
    line-height: 20px;
  }
  .x2-member-layout .x2-profile-fields form textarea {
    min-height: 114px;
    height: 114px;
  }
  .x2-loyalty-interior .x2-loyalty-menu {
    gap: 12px;
    padding: 19px 0 15px;
  }
  .x2-loyalty-menu > button {
    flex: 0 1 auto;
    gap: 8px;
    padding: 10px;
    font-size: 16px;
    line-height: 24px;
  }
}
/* Reference top bar: 53px shell, 36px account panel, 24px action artwork. */
.x2-mobile-bell {
  width: 24px;
  height: 24px;
}
.x2-wallet > button > img {
  width: 24px;
  height: 24px;
}
.x2-theme-switcher {
  position: fixed;
  right: 16px;
  bottom: 76px;
  z-index: 80;
}
@media (min-width: 768px) {
  .x2-topbar {
    height: 53px;
    background: var(--x2-color-111, #111);
  }
  .x2-topbar-inner {
    gap: 20px;
  }
  .x2-tools {
    flex-shrink: 0;
    height: 30px;
  }
  .x2-tools > :is(a, div) {
    padding: 0;
    border: 0;
  }
  .x2-tools > :is(a, div) + * {
    border-left: 1px solid var(--x2-color-353535, #353535);
  }
  .x2-tools .x2-telegram {
    width: 126px;
    height: 24px;
    margin: 0 10px 0 0;
    padding: 4px 10px;
    gap: 4px;
    border: 0;
    border-radius: 2px;
    background: linear-gradient(#67b7ed, #286a9b);
    font-size: 12px;
    white-space: nowrap;
  }
  .x2-telegram img,
  .x2-topbar-tool img {
    width: 14px;
    height: 14px;
    object-fit: contain;
  }
  .x2-tools .x2-topbar-tool {
    width: 35px;
    height: 30px;
    display: grid;
    place-items: center;
  }
  .x2-tools .x2-topbar-wheel {
    width: 41px;
  }
  .x2-topbar-wheel img {
    width: 20px;
    height: 20px;
  }
  .x2-tools .x2-topbar-language {
    width: 52px;
    height: 30px;
    padding: 5px 10px;
  }
  .x2-topbar-language > button {
    border: 0;
    background: transparent;
    padding: 0;
    height: 20px;
    gap: 6px;
    border-radius: 0;
  }
  .x2-topbar-language > button > .uppercase {
    display: none;
  }
  .x2-language-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--x2-color-fff, #fff);
  }
  .x2-flag-id {
    display: block;
    width: 16px;
    height: 11px;
    background: linear-gradient(#e42726 50%, var(--x2-color-fff, #fff) 50%);
  }
  .x2-user-actions {
    gap: 10px;
    flex-shrink: 0;
  }
  .x2-user-main-info {
    display: flex;
    align-items: center;
    height: 36px;
    padding: 4px 8px;
    gap: 10px;
    background: var(--x2-color-1d1d1d, #1d1d1d);
  }
  .x2-user-main-info > :not(:first-child) {
    border-left: 1px solid var(--x2-color-444, #444);
    padding-left: 16px;
  }
  .x2-user-main-info .x2-desktop-member-tier {
    padding: 0 5px;
    min-width: 117px;
    gap: 5px;
    background: none;
    color: var(--x2-color-fff, #fff);
  }
  .x2-desktop-member-tier > span {
    width: 80px;
    line-height: 18px;
  }
  .x2-desktop-member-tier img {
    width: 22px;
    height: 22px;
  }
  .x2-desktop-member-tier progress {
    margin-top: 2px;
    height: 5px;
  }
  .x2-user-main-info .x2-wallet {
    gap: 0;
    color: var(--x2-color-fff, #fff);
    font-size: 12px;
  }
  .x2-user-main-info .x2-wallet > button {
    width: 30px;
    padding: 0 6px 0 0;
  }
  .x2-user-main-info .x2-wallet summary {
    display: block;
    text-align: center;
    padding-right: 0;
    line-height: 16px;
    position: relative;
  }
  .x2-user-main-info .x2-wallet summary > svg {
    position: absolute;
    width: 10px;
    height: 6px;
    left: calc(50% - 5px);
    bottom: -6px;
  }
  .x2-user-main-info .x2-wallet summary > span {
    color: #a6ca83;
  }
  .x2-user-main-info .x2-desktop-member-points {
    color: var(--x2-color-c6ad77, #c6ad77);
    display: flex;
    align-items: center;
    gap: 6px;
    padding-right: 5px;
  }
  .x2-desktop-member-points b {
    width: 24px;
    height: 22px;
    padding: 2px;
    border-radius: 3px;
    line-height: 18px;
    text-align: center;
    background: linear-gradient(
      100deg,
      var(--x2-color-e5b866, #e5b866),
      var(--x2-color-e79b37, #e79b37)
    );
  }
  .x2-user-main-info .x2-topbar-chest {
    display: flex;
    align-items: center;
    padding-right: 6px;
  }
  .x2-topbar-chest img {
    width: 25px;
    height: 25px;
    object-fit: contain;
  }
  .x2-user-actions > .x2-topbar-action {
    display: grid;
    place-items: center;
    width: 24px;
    height: 36px;
    padding: 0;
    background: none;
    border: 0;
  }
  .x2-topbar-action img {
    width: 24px;
    height: 24px;
    object-fit: contain;
  }
}
@media (min-width: 768px) and (max-width: 1100px) {
  .x2-topbar-inner {
    gap: 8px;
  }
  .x2-tools .x2-telegram {
    width: auto;
    padding: 4px 6px;
    margin-right: 5px;
    font-size: 10px;
  }
  .x2-tools .x2-topbar-tool {
    width: 26px;
  }
  .x2-user-actions {
    gap: 6px;
  }
  .x2-user-main-info {
    gap: 5px;
    padding: 4px;
  }
  .x2-user-main-info > :not(:first-child) {
    padding-left: 6px;
  }
}

/* Shared Falcon/Wolf Taxi palettes recolour X2 without altering its Gold reference skin.
 * Legacy shade fallbacks retain exact Gold values; other palettes derive their
 * surfaces and accent shading from the shared --background/--theme-primary tokens. */
html.route-theme-x2[data-theme]:not([data-theme='gold']) {
  --x2-color-000: color-mix(in srgb, var(--background) 72%, #000 28%);
  --x2-color-0006: color-mix(in srgb, var(--background) 72%, #0006 28%);
  --x2-color-0009: color-mix(in srgb, var(--background) 72%, #0009 28%);
  --x2-color-000a: color-mix(in srgb, var(--background) 72%, #000a 28%);
  --x2-color-000b: color-mix(in srgb, var(--background) 72%, #000b 28%);
  --x2-color-000d: color-mix(in srgb, var(--background) 72%, #000d 28%);
  --x2-color-000e: color-mix(in srgb, var(--background) 72%, #000e 28%);
  --x2-color-050505: color-mix(in srgb, var(--background) 72%, #050505 28%);
  --x2-color-070707: color-mix(in srgb, var(--background) 72%, #070707 28%);
  --x2-color-080808: color-mix(in srgb, var(--background) 72%, #080808 28%);
  --x2-color-08080880: color-mix(in srgb, var(--background) 72%, #08080880 28%);
  --x2-color-090909: color-mix(in srgb, var(--background) 72%, #090909 28%);
  --x2-color-0a0a0a: color-mix(in srgb, var(--background) 72%, #0a0a0a 28%);
  --x2-color-0c0c0c: color-mix(in srgb, var(--background) 72%, #0c0c0c 28%);
  --x2-color-0d0d0d: color-mix(in srgb, var(--background) 72%, #0d0d0d 28%);
  --x2-color-0d0d0db3: color-mix(in srgb, var(--background) 72%, #0d0d0db3 28%);
  --x2-color-0e0e0e: color-mix(in srgb, var(--background) 72%, #0e0e0e 28%);
  --x2-color-101010: color-mix(in srgb, var(--background) 72%, #101010 28%);
  --x2-color-111: color-mix(in srgb, var(--background) 72%, #111 28%);
  --x2-color-141414: color-mix(in srgb, var(--background) 72%, #141414 28%);
  --x2-color-151515: color-mix(in srgb, var(--background) 72%, #151515 28%);
  --x2-color-171717: color-mix(in srgb, var(--background) 72%, #171717 28%);
  --x2-color-181818: color-mix(in srgb, var(--background) 72%, #181818 28%);
  --x2-color-191919: color-mix(in srgb, var(--background) 72%, #191919 28%);
  --x2-color-1a1a1a: color-mix(in srgb, var(--background) 72%, #1a1a1a 28%);
  --x2-color-1c1c1c: color-mix(in srgb, var(--background) 72%, #1c1c1c 28%);
  --x2-color-1d1d1d: color-mix(in srgb, var(--background) 72%, #1d1d1d 28%);
  --x2-color-1e1e1e: color-mix(in srgb, var(--background) 72%, #1e1e1e 28%);
  --x2-color-202020: color-mix(in srgb, var(--background) 72%, #202020 28%);
  --x2-color-222: color-mix(in srgb, var(--background) 72%, #222 28%);
  --x2-color-242424: color-mix(in srgb, var(--background) 72%, #242424 28%);
  --x2-color-252525: color-mix(in srgb, var(--background) 72%, #252525 28%);
  --x2-color-272727: color-mix(in srgb, var(--background) 72%, #272727 28%);
  --x2-color-282828: color-mix(in srgb, var(--background) 72%, #282828 28%);
  --x2-color-292929: color-mix(in srgb, var(--background) 72%, #292929 28%);
  --x2-color-2a2a2a: color-mix(in srgb, var(--background) 72%, #2a2a2a 28%);
  --x2-color-2d2d2d: color-mix(in srgb, var(--background) 72%, #2d2d2d 28%);
  --x2-color-303030: color-mix(in srgb, var(--background) 72%, #303030 28%);
  --x2-color-333: color-mix(in srgb, var(--background) 72%, #333 28%);
  --x2-color-343434: color-mix(in srgb, var(--background) 72%, #343434 28%);
  --x2-color-353535: color-mix(in srgb, var(--background) 72%, #353535 28%);
  --x2-color-3a3a3a: color-mix(in srgb, var(--background) 72%, #3a3a3a 28%);
  --x2-color-3c3c3c: color-mix(in srgb, var(--background) 72%, #3c3c3c 28%);
  --x2-color-3e3e3e: color-mix(in srgb, var(--background) 72%, #3e3e3e 28%);
  --x2-color-444: color-mix(in srgb, var(--background) 72%, #444 28%);
  --x2-color-454545: color-mix(in srgb, var(--background) 72%, #454545 28%);
  --x2-color-4f4f4f: color-mix(in srgb, var(--background) 72%, #4f4f4f 28%);
  --x2-color-515151: color-mix(in srgb, var(--background) 72%, #515151 28%);
  --x2-color-555: color-mix(in srgb, var(--background) 72%, #555 28%);
  --x2-color-58585a: color-mix(in srgb, var(--background) 72%, #58585a 28%);
  --x2-color-100e07e5: color-mix(
    in srgb,
    color-mix(in srgb, var(--theme-primary) 10%, #080808) 90%,
    transparent
  );
  --x2-color-100f0a: color-mix(in srgb, var(--theme-primary) 10%, #080808);
  --x2-color-13120d: color-mix(in srgb, var(--theme-primary) 11%, #080808);
  --x2-color-15130e: color-mix(in srgb, var(--theme-primary) 12%, #080808);
  --x2-color-15130f: color-mix(in srgb, var(--theme-primary) 12%, #080808);
  --x2-color-15140d: color-mix(in srgb, var(--theme-primary) 11%, #080808);
  --x2-color-171406fa: color-mix(
    in srgb,
    color-mix(in srgb, var(--theme-primary) 10%, #080808) 98%,
    transparent
  );
  --x2-color-17140a: color-mix(in srgb, var(--theme-primary) 11%, #080808);
  --x2-color-17140d: color-mix(in srgb, var(--theme-primary) 12%, #080808);
  --x2-color-17150f: color-mix(in srgb, var(--theme-primary) 13%, #080808);
  --x2-color-181600: color-mix(in srgb, var(--theme-primary) 10%, #080808);
  --x2-color-19160c: color-mix(in srgb, var(--theme-primary) 12%, #080808);
  --x2-color-1a1507: color-mix(in srgb, var(--theme-primary) 11%, #080808);
  --x2-color-211d13: color-mix(in srgb, var(--theme-primary) 17%, #080808);
  --x2-color-231f17: color-mix(in srgb, var(--theme-primary) 19%, #080808);
  --x2-color-232018: color-mix(in srgb, var(--theme-primary) 20%, #080808);
  --x2-color-242015: color-mix(in srgb, var(--theme-primary) 19%, #080808);
  --x2-color-242017: color-mix(in srgb, var(--theme-primary) 20%, #080808);
  --x2-color-24201a: color-mix(in srgb, var(--theme-primary) 21%, #080808);
  --x2-color-252017: color-mix(in srgb, var(--theme-primary) 20%, #080808);
  --x2-color-28251d: color-mix(in srgb, var(--theme-primary) 23%, #080808);
  --x2-color-29261f: color-mix(in srgb, var(--theme-primary) 24%, #080808);
  --x2-color-2b2519: color-mix(in srgb, var(--theme-primary) 23%, #080808);
  --x2-color-2d261a: color-mix(in srgb, var(--theme-primary) 24%, #080808);
  --x2-color-30291a: color-mix(in srgb, var(--theme-primary) 25%, #080808);
  --x2-color-302a1d: color-mix(in srgb, var(--theme-primary) 26%, #080808);
  --x2-color-343025: color-mix(in srgb, var(--theme-primary) 30%, #080808);
  --x2-color-373020: color-mix(in srgb, var(--theme-primary) 29%, #080808);
  --x2-color-383124: color-mix(in srgb, var(--theme-primary) 31%, #080808);
  --x2-color-39342b: color-mix(in srgb, var(--theme-primary) 33%, #080808);
  --x2-color-3a2f1d: color-mix(in srgb, var(--theme-primary) 29%, #080808);
  --x2-color-423b1c: color-mix(in srgb, var(--theme-primary) 31%, #080808);
  --x2-color-443b24: color-mix(in srgb, var(--theme-primary) 35%, #080808);
  --x2-color-4a3f2b: color-mix(in srgb, var(--theme-primary) 39%, #080808);
  --x2-color-4b3e1b: color-mix(in srgb, var(--theme-primary) 34%, #080808);
  --x2-color-59451d: color-mix(in srgb, var(--theme-primary) 39%, #080808);
  --x2-color-594a27: color-mix(in srgb, var(--theme-primary) 43%, #080808);
  --x2-color-595110: color-mix(in srgb, var(--theme-primary) 35%, #080808);
  --x2-color-5a452735: color-mix(
    in srgb,
    color-mix(in srgb, var(--theme-primary) 43%, #080808) 21%,
    transparent
  );
  --x2-color-5d5032: color-mix(in srgb, var(--theme-primary) 48%, #080808);
  --x2-color-63502a25: color-mix(
    in srgb,
    color-mix(in srgb, var(--theme-primary) 47%, #080808) 15%,
    transparent
  );
  --x2-color-675a43: color-mix(in srgb, var(--theme-primary) 56%, #080808);
  --x2-color-695327: color-mix(in srgb, var(--theme-primary) 48%, #080808);
  --x2-color-73664a: color-mix(in srgb, var(--theme-primary) 63%, #080808);
  --x2-color-776545: color-mix(in srgb, var(--theme-primary) 62%, #080808);
  --x2-color-776a3d: color-mix(in srgb, var(--theme-primary) 60%, #080808);
  --x2-color-78663d: color-mix(in srgb, var(--theme-primary) 60%, #080808);
  --x2-color-8a764e: color-mix(in srgb, var(--theme-primary) 72%, #080808);
  --x2-color-9a927e: color-mix(in srgb, var(--theme-primary) 93%, #080808);
  --x2-color-9f916d: color-mix(in srgb, var(--theme-primary) 89%, #080808);
  --x2-color-a99360: color-mix(in srgb, var(--theme-primary) 88%, #080808);
  --x2-color-b3a418: color-mix(in srgb, var(--theme-primary) 67%, #080808);
  --x2-color-b48a70: color-mix(in srgb, var(--theme-primary) 97%, #080808);
  --x2-color-bbaa7e: color-mix(in srgb, var(--theme-primary) 100%, #080808);
  --x2-color-bbac69: color-mix(in srgb, var(--theme-primary) 97%, #080808);
  --x2-color-bd977b: color-mix(in srgb, var(--theme-primary) 100%, #080808);
  --x2-color-bda270: color-mix(in srgb, var(--theme-primary) 100%, #080808);
  --x2-color-be9574: color-mix(in srgb, var(--theme-primary) 100%, #080808);
  --x2-color-c0af84: color-mix(in srgb, var(--theme-primary) 100%, #080808);
  --x2-color-c5b180: color-mix(in srgb, var(--theme-primary) 100%, #080808);
  --x2-color-c6ad77: color-mix(in srgb, var(--theme-primary) 100%, #080808);
  --x2-color-c6bfab: color-mix(in srgb, var(--theme-primary) 67%, #fff);
  --x2-color-c7b48a: color-mix(in srgb, var(--theme-primary) 83%, #fff);
  --x2-color-d1c3a3: color-mix(in srgb, var(--theme-primary) 66%, #fff);
  --x2-color-d5cbb3: color-mix(in srgb, var(--theme-primary) 56%, #fff);
  --x2-color-d6a25e: color-mix(in srgb, var(--theme-primary) 100%, #080808);
  --x2-color-d8ae4c: color-mix(in srgb, var(--theme-primary) 97%, #080808);
  --x2-color-dca744: color-mix(in srgb, var(--theme-primary) 96%, #080808);
  --x2-color-ded8ca: color-mix(in srgb, var(--theme-primary) 41%, #fff);
  --x2-color-dfc98f: color-mix(in srgb, var(--theme-primary) 69%, #fff);
  --x2-color-e59b35: color-mix(in srgb, var(--theme-primary) 94%, #080808);
  --x2-color-e5b866: color-mix(in srgb, var(--theme-primary) 100%, #080808);
  --x2-color-e6d7b6: color-mix(in srgb, var(--theme-primary) 47%, #fff);
  --x2-color-e79b37: color-mix(in srgb, var(--theme-primary) 95%, #080808);
  --x2-color-e7dcc3: color-mix(in srgb, var(--theme-primary) 40%, #fff);
  --x2-color-ebcb80: color-mix(in srgb, var(--theme-primary) 70%, #fff);
  --x2-color-ece1c6: color-mix(in srgb, var(--theme-primary) 36%, #fff);
  --x2-color-eee2b9: color-mix(in srgb, var(--theme-primary) 42%, #fff);
  --x2-color-f7e4b7: color-mix(in srgb, var(--theme-primary) 38%, #fff);
  --x2-color-fd6f16: color-mix(in srgb, var(--theme-primary) 91%, #080808);
  --x2-color-ffbe16: color-mix(in srgb, var(--theme-primary) 92%, #080808);
}
html.route-theme-x2[data-theme='whitered'][data-theme] {
  --x2-color-666: #666666;
  --x2-color-8d8d8d: #4c4c4c;
  --x2-color-8e8e8e: #4b4b4b;
  --x2-color-8f8f8f: #4b4b4b;
  --x2-color-9b9b9b: #434343;
  --x2-color-9f9b90: #454545;
  --x2-color-a6a197: #404040;
  --x2-color-aaa: #393939;
  --x2-color-b8b8b8: #2f2f2f;
  --x2-color-b9b9b9: #2f2f2f;
  --x2-color-bbb: #2d2d2d;
  --x2-color-ccc: #222222;
  --x2-color-ddd: #171717;
  --x2-color-eee: #0b0b0b;
  --x2-color-f4f4f4: #070707;
  --x2-color-fff: #000000;
  --x2-color-ffffff13: #000000;
  --x2-color-ffffff24: #000000;
}
html.route-theme-x2[data-theme='whitered'][data-theme]
  :is(.x2-header, .x2-mobile-header, .x2-bottom-nav, .x2-topbar, .x2-desktop-nav) {
  color: #fff;
  background-color: var(--background-secondary);
}
html.route-theme-x2[data-theme='whitered'][data-theme]
  :is(.x2-user-main-info, .x2-nav-links, .x2-mobile-bottom-nav) {
  color: #fff;
}
html.route-theme-x2[data-theme='whitered'][data-theme] .x2-site .x2-button {
  color: var(--theme-on-action, #fff);
}
.x2-user-main-info {
  font-size: 12px;
}
html.route-theme-x2[data-theme]:not([data-theme='gold']) :is(.x2-button, .x2-auth-actions > a) {
  color: var(--theme-on-action, #fff);
}
html.route-theme-x2[data-theme]:not([data-theme='gold'])
  :is(
    .x2-loyalty-menu img,
    .x2-member-mobile-tabs img,
    .x2-category-menu img,
    .x2-nav-links img,
    .x2-topbar-action img,
    .x2-topbar-chest img
  ) {
  filter: var(--x2-icon-filter, none);
}
html.route-theme-x2[data-theme='red'] {
  --x2-icon-filter: hue-rotate(-42deg) saturate(1.2);
}
html.route-theme-x2[data-theme='crimson'] {
  --x2-icon-filter: hue-rotate(-42deg) saturate(1.2);
}
html.route-theme-x2[data-theme='blue'] {
  --x2-icon-filter: hue-rotate(175deg) saturate(1.2);
}
html.route-theme-x2[data-theme='purple'] {
  --x2-icon-filter: hue-rotate(229deg) saturate(1.2);
}
html.route-theme-x2[data-theme='green'] {
  --x2-icon-filter: hue-rotate(100deg) saturate(1.2);
}
html.route-theme-x2[data-theme='cyan'] {
  --x2-icon-filter: hue-rotate(147deg) saturate(1.2);
}
html.route-theme-x2[data-theme='pink'] {
  --x2-icon-filter: hue-rotate(288deg) saturate(1.2);
}
html.route-theme-x2[data-theme='magenta'] {
  --x2-icon-filter: hue-rotate(250deg) saturate(1.2);
}
html.route-theme-x2[data-theme='yellow'] {
  --x2-icon-filter: hue-rotate(3deg) saturate(1.2);
}
html.route-theme-x2[data-theme='orange'] {
  --x2-icon-filter: hue-rotate(-17deg) saturate(1.2);
}
html.route-theme-x2[data-theme='teal'] {
  --x2-icon-filter: hue-rotate(131deg) saturate(1.2);
}
html.route-theme-x2[data-theme='indigo'] {
  --x2-icon-filter: hue-rotate(197deg) saturate(1.2);
}
html.route-theme-x2[data-theme='rose'] {
  --x2-icon-filter: hue-rotate(308deg) saturate(1.2);
}
html.route-theme-x2[data-theme='amber'] {
  --x2-icon-filter: hue-rotate(-4deg) saturate(1.2);
}
html.route-theme-x2[data-theme='lime'] {
  --x2-icon-filter: hue-rotate(42deg) saturate(1.2);
}
html.route-theme-x2[data-theme='emerald'] {
  --x2-icon-filter: hue-rotate(118deg) saturate(1.2);
}
html.route-theme-x2[data-theme='forest'] {
  --x2-icon-filter: hue-rotate(66deg) saturate(1.2);
}
html.route-theme-x2[data-theme='sky'] {
  --x2-icon-filter: hue-rotate(157deg) saturate(1.2);
}
html.route-theme-x2[data-theme='violet'] {
  --x2-icon-filter: hue-rotate(216deg) saturate(1.2);
}
html.route-theme-x2[data-theme='fuchsia'] {
  --x2-icon-filter: hue-rotate(250deg) saturate(1.2);
}
html.route-theme-x2[data-theme='slate'] {
  --x2-icon-filter: hue-rotate(173deg) saturate(1.2);
}
html.route-theme-x2[data-theme='whitered'][data-theme] {
  --x2-icon-filter: hue-rotate(-42deg) saturate(1.2);
}

html.route-theme-x2[data-theme='whitered'][data-theme] {
  --x2-color-000: #ffffff;
  --x2-color-0006: #ffffff;
  --x2-color-0009: #ffffff;
  --x2-color-000a: #ffffff;
  --x2-color-000b: #ffffff;
  --x2-color-000d: #ffffff;
  --x2-color-000e: #ffffff;
  --x2-color-050505: #fafafa;
  --x2-color-070707: #f8f8f8;
  --x2-color-080808: #f7f7f7;
  --x2-color-08080880: #f7f7f7;
  --x2-color-090909: #f6f6f6;
  --x2-color-0a0a0a: #f5f5f5;
  --x2-color-0c0c0c: #f3f3f3;
  --x2-color-0d0d0d: #f2f2f2;
  --x2-color-0d0d0db3: #f2f2f2;
  --x2-color-0e0e0e: #f1f1f1;
  --x2-color-101010: #efefef;
  --x2-color-111: #eeeeee;
  --x2-color-141414: #ebebeb;
  --x2-color-151515: #eaeaea;
  --x2-color-171717: #e8e8e8;
  --x2-color-181818: #e7e7e7;
  --x2-color-191919: #e6e6e6;
  --x2-color-1a1a1a: #e5e5e5;
  --x2-color-1c1c1c: #e3e3e3;
  --x2-color-1d1d1d: #e2e2e2;
  --x2-color-1e1e1e: #e1e1e1;
  --x2-color-202020: #dfdfdf;
  --x2-color-222: #dddddd;
  --x2-color-242424: #dbdbdb;
  --x2-color-252525: #dadada;
  --x2-color-272727: #d8d8d8;
  --x2-color-282828: #d7d7d7;
  --x2-color-292929: #d6d6d6;
  --x2-color-2a2a2a: #d5d5d5;
  --x2-color-2d2d2d: #d2d2d2;
  --x2-color-303030: #cfcfcf;
  --x2-color-333: #cccccc;
  --x2-color-343434: #cbcbcb;
  --x2-color-353535: #cacaca;
  --x2-color-3a3a3a: #c5c5c5;
  --x2-color-3c3c3c: #c3c3c3;
  --x2-color-3e3e3e: #c1c1c1;
  --x2-color-444: #bbbbbb;
  --x2-color-454545: #bababa;
  --x2-color-4f4f4f: #b0b0b0;
  --x2-color-515151: #aeaeae;
  --x2-color-555: #aaaaaa;
  --x2-color-58585a: #a7a7a5;
}
html.route-theme-x2[data-theme='whitered'][data-theme] .x2-jackpot-number .text-white {
  color: #171717;
}
.x2-tools .x2-telegram {
  color: #fff;
}
.x2-flag-id {
  background: linear-gradient(#e42726 50%, #fff 50%);
}
html.route-theme-x2[data-theme]:not([data-theme='gold']) .x2-category-strip img {
  filter: var(--x2-icon-filter);
}

html.route-theme-x2[data-theme]:not([data-theme='gold']) {
  --x2-color-0006: #0006;
  --x2-color-0009: #0009;
  --x2-color-000a: #000a;
  --x2-color-000b: #000b;
  --x2-color-000d: #000d;
  --x2-color-000e: #000e;
  --x2-color-08080880: #08080880;
  --x2-color-0d0d0db3: #0d0d0db3;
  --x2-color-ffffff13: #ffffff13;
  --x2-color-ffffff24: #ffffff24;
}
html.route-theme-x2[data-theme='whitered'][data-theme] {
  --x2-color-0006: #0006;
  --x2-color-0009: #0009;
  --x2-color-000a: #000a;
  --x2-color-000b: #000b;
  --x2-color-000d: #000d;
  --x2-color-000e: #000e;
  --x2-color-08080880: #08080880;
  --x2-color-0d0d0db3: #0d0d0db3;
  --x2-color-ffffff13: #00000013;
  --x2-color-ffffff24: #00000024;
}
html.route-theme-x2[data-theme='whitered'][data-theme] .x2-wallet summary > span {
  color: #1e5720;
}
html.route-theme-x2[data-theme='whitered'][data-theme] .x2-wallet > button img {
  filter: brightness(0.2);
}
html.route-theme-x2[data-theme='whitered'][data-theme]
  .x2-desktop-member-tier
  progress::-webkit-progress-bar {
  background: #bcbcbc;
}
html.route-theme-x2[data-theme='whitered'][data-theme] :is(.x2-hero-prev, .x2-hero-next) {
  color: #fff;
}

@media (min-width: 768px) and (max-width: 950px) {
  .x2-tools .x2-telegram {
    width: 30px;
    padding: 0;
    margin: 0;
    font-size: 0;
    justify-content: center;
  }
  .x2-tools :is([aria-label='Versi mobile'], [aria-label='Aplikasi Android'], .x2-topbar-wheel) {
    display: none;
  }
  .x2-user-main-info .x2-desktop-member-tier {
    min-width: 93px;
  }
  .x2-desktop-member-tier > span,
  .x2-desktop-member-tier progress {
    width: 56px;
  }
}
html.route-theme-x2[data-theme='whitered'][data-theme] .x2-mobile-header > button {
  color: #fff;
}
html.route-theme-x2[data-theme='whitered'][data-theme] .x2-category-strip > button {
  color: #fff;
}
html.route-theme-x2[data-theme='whitered'][data-theme] .x2-bottom-nav img {
  filter: brightness(0) invert(1);
}
/* Footer reference geometry. Tenant content and availability remain native Falcon data. */
.x2-footer {
  --x2-footer-line: var(--x2-color-222, #222);
  padding: 25px 0;
  font-size: 14px;
  color: var(--x2-footer-muted, #999);
}
.x2-footer .x2-container {
  padding-top: 0;
}
.x2-footer :is(h2, h3) {
  color: inherit;
  font-weight: 400;
}
.x2-footer h2 {
  font-size: 16px;
  line-height: 19.2px;
  margin: 0 0 8px;
}
.x2-cms-footer {
  padding-bottom: 15px;
  margin-bottom: 15px;
  border-bottom: 1px solid var(--x2-footer-line);
}
.x2-cms-footer :is(h1, h2, h3, h4) {
  font-size: 16px;
  line-height: 19.2px;
  margin-bottom: 8px;
}
.x2-cms-footer p {
  font-size: 14px;
  line-height: 21px;
}
.x2-footer-columns {
  display: grid;
  grid-template-columns: 138px 60px 84px 147px 75px;
  justify-content: space-between;
  gap: 8px;
  padding: 0 40px 30px 0;
  margin-bottom: 15px;
  border-bottom: 1px solid var(--x2-footer-line);
}
.x2-footer-columns > div {
  min-width: 0;
}
.x2-footer-columns > div > a,
.x2-footer .x2-custom-links a {
  display: block;
  font-size: 14px;
  line-height: 20px;
  margin: 0;
  padding-top: 10px;
  color: inherit;
}
.x2-footer-policy {
  display: flex;
  flex-direction: column;
}
.x2-footer-policy > h2 {
  order: -1;
}
.x2-footer .x2-custom-links,
.x2-footer .x2-custom-links > div {
  display: contents;
}
.x2-footer .x2-custom-links h4 {
  display: none;
}
.x2-footer .x2-custom-links a {
  order: 3;
  text-align: left;
}
.x2-footer .x2-custom-links a[href*='tentang'] {
  order: 0;
}
.x2-footer .x2-custom-links a:is([href*='bertanggung'], [href*='responsible']) {
  order: 1;
}
.x2-footer-help {
  order: 2;
}
.x2-footer-terms-fallback {
  order: 3;
}
.x2-footer-policy:has(.x2-custom-links a[href*='syarat']) .x2-footer-terms-fallback {
  display: none;
}
.x2-footer-columns .x2-footer-contact {
  display: flex;
  align-items: center;
  gap: 8px;
}
.x2-footer-contact img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}
.x2-service-row {
  gap: 24px;
  padding: 0 0 15px;
  margin-bottom: 15px;
  border-bottom: 1px solid var(--x2-footer-line);
}
.x2-service-row > div {
  padding: 20px 16px;
  min-height: 180px;
  border: 1px solid var(--x2-footer-line);
  border-radius: 5px;
  background: transparent;
}
.x2-service-row header {
  gap: 8px;
}
.x2-service-row header span {
  width: 40px;
  height: 40px;
  padding: 0;
  background: var(--x2-color-222, #222);
}
.x2-service-row header img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}
.x2-service-row h3 {
  font-size: 16px;
  line-height: 19.2px;
}
.x2-service-row p {
  font-size: 12px;
  line-height: 18px;
  margin: 8px 0 0;
}
.x2-footer-banking {
  padding: 25px 24px;
  border: 1px solid var(--x2-footer-line);
  border-radius: 5px;
  margin-bottom: 24px;
}
.x2-bank-strip {
  display: flex;
  justify-content: flex-start;
  gap: 0;
  padding: 10px 0;
  border: 0;
  border-radius: 0;
  background: none;
  filter: none;
}
.x2-bank-strip > span {
  padding: 0 0 5px 5px;
  margin: 5px;
  border-left: 5px solid var(--x2-footer-line);
  height: 45px;
}
.x2-bank-strip img {
  width: 80px;
  height: 40px;
  max-width: none;
  object-fit: contain;
  filter: none;
  opacity: 1;
}
.x2-bank-note {
  font-size: 12px;
  line-height: 18px;
  text-align: left;
  margin: 0 0 20px;
}
.x2-footer-transactions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.x2-footer-transactions > a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  background: var(--x2-color-171717, #171717);
  border-radius: 5px;
}
.x2-footer-transactions > a > span {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--x2-color-1d1d1d, #1d1d1d);
}
.x2-footer-transactions img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}
.x2-footer-transactions h3 {
  font-size: 16px;
  margin: 0 0 8px;
  line-height: 19.2px;
}
.x2-footer-transactions p {
  font-size: 14px;
  margin: 0;
  line-height: 21px;
}
.x2-footer-copyright-row {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  margin-bottom: 24px;
}
.x2-footer-copyright-row p {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 21px;
}
.x2-footer-copyright-row > div > div {
  display: flex;
  gap: 10px;
  align-items: center;
}
.x2-footer-platform img {
  width: 110px;
  height: 40px;
  object-fit: contain;
}
.x2-footer-responsible img {
  height: 40px;
  width: auto;
  object-fit: contain;
}
.x2-footer-browsers img {
  height: 40px;
  width: 41px;
  object-fit: contain;
}
.x2-footer-copyright-row > .x2-footer-copyright {
  margin: auto 0 0 auto;
  text-align: right;
}
.x2-footer-providers {
  display: block;
  padding: 0;
  border: 0;
}
.x2-footer-providers > h2 {
  font-size: 18px;
  margin-bottom: 12px;
}
.x2-footer-provider-group {
  margin-bottom: 16px;
}
.x2-footer-provider-group h3 {
  font-size: 14px;
  line-height: 21px;
  margin: 0 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--x2-footer-line);
}
.x2-footer-provider-group > div {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0 16px;
}
.x2-footer-provider-group a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 50px;
}
.x2-footer-provider-group img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.65;
}
.x2-footer-provider-group a:hover img {
  filter: none;
  opacity: 1;
}
html.route-theme-x2[data-theme='whitered'][data-theme] .x2-footer {
  --x2-footer-muted: #555;
}
@media (max-width: 767px) {
  .x2-footer {
    padding: 25px 0 20px;
  }
  .x2-footer .x2-container {
    width: 100%;
    padding: 0 12px;
  }
  .x2-footer-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px;
    padding: 0 0 15px;
    margin-bottom: 15px;
  }
  .x2-footer h2 {
    font-size: 16px;
    line-height: 19.2px;
  }
  .x2-footer-columns > div > a,
  .x2-footer .x2-custom-links a {
    line-height: 21px;
    margin-bottom: 0;
  }
  .x2-service-row,
  .x2-footer-transactions,
  .x2-footer-responsible,
  .x2-footer-browsers,
  .x2-footer-providers {
    display: none;
  }
  .x2-footer-banking {
    padding: 24px 28px 16px;
    margin-bottom: 16px;
  }
  .x2-bank-note {
    margin: 0;
    font-size: 12px;
    line-height: 18px;
  }
  .x2-footer-copyright-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-bottom: 0;
  }
  .x2-footer-platform {
    text-align: center;
  }
  .x2-footer-platform img {
    height: 30px;
    width: 110px;
  }
  .x2-footer-copyright-row > .x2-footer-copyright {
    margin: 0;
    text-align: center;
  }
}