/* ═══════════════════════════════════════════════════════   FN Aqua Gift Shop — Red/Black Theme   ═══════════════════════════════════════════════════════ *//* Hide default cursor only when custom cursor is ready */body.custom-cursor-ready,body.custom-cursor-ready *,body.custom-cursor-ready *::before,body.custom-cursor-ready *::after {  cursor: none !important;}:root {  --bg: #0a0a0f;  --bg2: #111117;  --bg3: #1a1a24;  --card: #14141c;  --card-hover: #1e1e2a;  --border: #2a2a38;  --border-red: rgba(220, 38, 38, 0.4);  --red: #dc2626;  --red-bright: #ef4444;  --red-dark: #991b1b;  --red-glow: rgba(220, 38, 38, 0.15);  --red-glow2: rgba(220, 38, 38, 0.08);  --text: #f0f0f5;  --text-muted: #888899;  --text-dim: #555566;  --font-head: 'Rajdhani', sans-serif;  --font-body: 'Inter', sans-serif;  --radius: 10px;  --radius-lg: 16px;  --shadow: 0 4px 24px rgba(0, 0, 0, 0.5);  --shadow-red: 0 4px 20px rgba(220, 38, 38, 0.25);  --transition: .2s ease;  --t: background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease, opacity .2s ease;}/* ══════════════════════════════════════════════════════   WATER THEME — html[data-theme="water"]   ══════════════════════════════════════════════════════ */html[data-theme="water"] {  --bg: #070b12;  --bg2: #0c1220;  --bg3: #121d2e;  --card: #0e1828;  --card-hover: #152033;  --border: #1c2f45;  --border-red: rgba(14, 165, 233, 0.4);  --red: #0ea5e9;  --red-bright: #38bdf8;  --red-dark: #0369a1;  --red-glow: rgba(14, 165, 233, 0.15);  --red-glow2: rgba(14, 165, 233, 0.08);  --shadow-red: 0 4px 20px rgba(14, 165, 233, 0.25);}html[data-theme="water"] ::-webkit-scrollbar-thumb {  background: #0369a1;}html[data-theme="water"] ::-webkit-scrollbar-thumb:hover {  background: #0ea5e9;}html[data-theme="water"] .cursor-ring {  border-color: #0ea5e9;}html[data-theme="water"] .cursor-dot {  background: #38bdf8;}/* ══════════════════════════════════════════════════════   PREMIUM THEME — html[data-theme="premium"]   ══════════════════════════════════════════════════════ */html[data-theme="premium"] {  --bg: #09070a;  --bg2: #120e16;  --bg3: #1b1520;  --card: #150f1c;  --card-hover: #1e1628;  --border: #2d2240;  --border-red: rgba(251, 191, 36, 0.4);  --red: #d97706;  --red-bright: #fbbf24;  --red-dark: #92400e;  --red-glow: rgba(251, 191, 36, 0.12);  --red-glow2: rgba(251, 191, 36, 0.06);  --shadow-red: 0 4px 20px rgba(251, 191, 36, 0.2);}html[data-theme="premium"] ::-webkit-scrollbar-thumb {  background: #92400e;}html[data-theme="premium"] ::-webkit-scrollbar-thumb:hover {  background: #d97706;}html[data-theme="premium"] .cursor-ring {  border-color: #fbbf24;}html[data-theme="premium"] .cursor-dot {  background: #fbbf24;}html[data-theme="premium"] .hero-bg {  background:    radial-gradient(ellipse 80% 50% at 20% 40%, rgba(217, 119, 6, 0.15) 0%, transparent 60%),    radial-gradient(ellipse 60% 40% at 80% 60%, rgba(251, 191, 36, 0.08) 0%, transparent 55%);}html[data-theme="premium"] .hero::after {  background: linear-gradient(90deg, transparent, rgba(251, 191, 36, 0.5), transparent);}html[data-theme="premium"] .btn-primary {  background: linear-gradient(135deg, #d97706, #b45309);  box-shadow: 0 4px 15px rgba(217, 119, 6, 0.35);}html[data-theme="premium"] .btn-primary:hover {  background: linear-gradient(135deg, #fbbf24, #d97706);  box-shadow: 0 6px 20px rgba(251, 191, 36, 0.4);}html[data-theme="premium"] .brand-icon,html[data-theme="premium"] .brand-accent,html[data-theme="premium"] .accent {  color: #fbbf24;}html[data-theme="premium"] a {  color: #fbbf24;}html[data-theme="premium"] .nav-link.active {  background: rgba(251, 191, 36, 0.12);}html[data-theme="premium"] .filter-btn.active {  background: #d97706;}html[data-theme="premium"] .item-card:hover {  box-shadow: 0 8px 30px rgba(251, 191, 36, 0.18);}/* ══════════════════════════════════════════════════════   SHADOW THEME — html[data-theme="shadow"]   ══════════════════════════════════════════════════════ */html[data-theme="shadow"] {  --bg: #000000;  --bg2: #0d0d0d;  --bg3: #1a1a1a;  --card: #0d0d0d;  --card-hover: #1a1a1a;  --border: #333333;  --border-red: rgba(255, 255, 255, 0.2);  --red: #ffffff;  --red-bright: #ffffff;  --red-dark: #cccccc;  --red-glow: rgba(255, 255, 255, 0.15);  --red-glow2: rgba(255, 255, 255, 0.08);  --text: #ffffff;  --text-muted: #b3b3b3;  --text-dim: #808080;}html[data-theme="shadow"] ::-webkit-scrollbar-thumb {  background: #4b5563;}html[data-theme="shadow"] ::-webkit-scrollbar-thumb:hover {  background: #6b7280;}html[data-theme="shadow"] .cursor-ring {  border-color: #ffffff;}html[data-theme="shadow"] .cursor-dot {  background: #ffffff;}html[data-theme="shadow"] .hero-bg {  background:    radial-gradient(ellipse 80% 50% at 20% 40%, rgba(156, 163, 175, 0.12) 0%, transparent 60%),    radial-gradient(ellipse 60% 40% at 80% 60%, rgba(107, 114, 128, 0.08) 0%, transparent 55%);}html[data-theme="shadow"] .hero::after {  background: linear-gradient(90deg, transparent, rgba(156, 163, 175, 0.4), transparent);}html[data-theme="shadow"] .btn-primary {  background: linear-gradient(135deg, #ffffff, #e6e6e6);  box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2);  color: #000000;}html[data-theme="shadow"] .btn-primary:hover {  background: linear-gradient(135deg, #ffffff, #f5f5f5);  box-shadow: 0 6px 20px rgba(255, 255, 255, 0.3);}html[data-theme="shadow"] .item-add-btn {  color: #000000;}html[data-theme="shadow"] .item-add-btn:hover {  color: #000000;}html[data-theme="shadow"] .admin-tab.active {  color: #000000;}html[data-theme="shadow"] .brand-icon,html[data-theme="shadow"] .brand-accent,html[data-theme="shadow"] .accent {  color: #ffffff;}html[data-theme="shadow"] a {  color: #ffffff;}html[data-theme="shadow"] .nav-link.active {  background: rgba(255, 255, 255, 0.1);}html[data-theme="shadow"] .filter-btn.active {  background: #ffffff;  color: #000000;}html[data-theme="shadow"] .item-card:hover {  box-shadow: 0 8px 30px rgba(255, 255, 255, 0.15);  border-color: rgba(255, 255, 255, 0.3);}html[data-theme="shadow"] .tg-login-btn {  background: linear-gradient(135deg, #ffffff, #e6e6e6);  color: #000000;}html[data-theme="shadow"] .tg-login-btn:hover {  background: linear-gradient(135deg, #ffffff, #f5f5f5);  box-shadow: 0 4px 15px rgba(255, 255, 255, 0.3);}html[data-theme="shadow"] .lang-btn {  background: #1a1a1a;  border-color: #333333;}html[data-theme="shadow"] .lang-btn:hover {  background: #262626;  border-color: #4d4d4d;}/* ══════════════════════════════════════════════════════   NEON THEME — html[data-theme="neon"]  (paid exclusive)   ══════════════════════════════════════════════════════ */html[data-theme="neon"] {  --bg: #04000d;  --bg2: #08011a;  --bg3: #0d0225;  --card: #0a0120;  --card-hover: #110230;  --border: #2a0a4a;  --border-red: rgba(217, 70, 239, 0.45);  --red: #d946ef;  --red-bright: #f0abfc;  --red-dark: #a21caf;  --red-glow: rgba(217, 70, 239, 0.18);  --red-glow2: rgba(217, 70, 239, 0.09);  --shadow-red: 0 4px 24px rgba(217, 70, 239, 0.3);}html[data-theme="neon"] ::-webkit-scrollbar-thumb {  background: #7e22ce;}html[data-theme="neon"] ::-webkit-scrollbar-thumb:hover {  background: #d946ef;}html[data-theme="neon"] .cursor-ring {  border-color: #d946ef;}html[data-theme="neon"] .cursor-dot {  background: #f0abfc;}/* animated scanline noise */html[data-theme="neon"] body::before {  content: '';  position: fixed;  inset: 0;  pointer-events: none;  z-index: 9999;  background: repeating-linear-gradient(0deg,      transparent,      transparent 2px,      rgba(217, 70, 239, 0.018) 2px,      rgba(217, 70, 239, 0.018) 4px);  background-size: 100% 4px;  animation: scanlineScroll 0.6s linear infinite;}html[data-theme="neon"] .hero-bg {  background:    radial-gradient(ellipse 70% 50% at 15% 45%, rgba(217, 70, 239, 0.2) 0%, transparent 60%),    radial-gradient(ellipse 50% 40% at 85% 55%, rgba(99, 102, 241, 0.15) 0%, transparent 55%);}html[data-theme="neon"] .hero::after {  background: linear-gradient(90deg, transparent, rgba(217, 70, 239, 0.6), transparent);}html[data-theme="neon"] .btn-primary {  background: linear-gradient(135deg, #a21caf, #7e22ce);  box-shadow: 0 0 18px rgba(217, 70, 239, 0.5);}html[data-theme="neon"] .btn-primary:hover {  background: linear-gradient(135deg, #d946ef, #a21caf);  box-shadow: 0 0 28px rgba(217, 70, 239, 0.65);}html[data-theme="neon"] .brand-icon,html[data-theme="neon"] .brand-accent,html[data-theme="neon"] .accent {  color: #f0abfc;}html[data-theme="neon"] a {  color: #d946ef;}html[data-theme="neon"] .nav-link.active {  background: rgba(217, 70, 239, 0.12);}html[data-theme="neon"] .filter-btn.active {  background: #a21caf;}html[data-theme="neon"] .item-card {  box-shadow: 0 0 0 1px rgba(217, 70, 239, 0.08);}html[data-theme="neon"] .item-card:hover {  box-shadow: 0 0 22px rgba(217, 70, 239, 0.28), 0 0 0 1px rgba(217, 70, 239, 0.35);}/* neon text glow on headings */html[data-theme="neon"] h1,html[data-theme="neon"] .hero-title {  text-shadow: 0 0 30px rgba(217, 70, 239, 0.45);}html[data-theme="neon"] .navbar {  border-bottom-color: rgba(217, 70, 239, 0.2);  box-shadow: 0 1px 20px rgba(217, 70, 239, 0.1);}/* ── Theme picker preview ── */.theme-preview-neon {  background: linear-gradient(135deg, #04000d, #0d0225);  border: 1px solid rgba(217, 70, 239, 0.45);}/* ══════════════════════════════════════════════════════   EMERALD THEME — html[data-theme="emerald"]  (paid exclusive)   ══════════════════════════════════════════════════════ */html[data-theme="emerald"] {  --bg: #000c05;  --bg2: #011408;  --bg3: #02200d;  --card: #01180a;  --card-hover: #02240f;  --border: #0a3a1b;  --border-red: rgba(16, 185, 129, 0.45);  --red: #10b981;  --red-bright: #34d399;  --red-dark: #059669;  --red-glow: rgba(16, 185, 129, 0.18);  --red-glow2: rgba(16, 185, 129, 0.09);  --shadow-red: 0 4px 24px rgba(16, 185, 129, 0.3);}html[data-theme="emerald"] ::-webkit-scrollbar-thumb {  background: #059669;}html[data-theme="emerald"] ::-webkit-scrollbar-thumb:hover {  background: #10b981;}html[data-theme="emerald"] .cursor-ring {  border-color: #10b981;}html[data-theme="emerald"] .cursor-dot {  background: #34d399;}/* animated scanning noise */html[data-theme="emerald"] body::before {  content: '';  position: fixed;  inset: 0;  pointer-events: none;  z-index: 9999;  background: repeating-linear-gradient(0deg,      transparent,      transparent 2px,      rgba(16, 185, 129, 0.018) 2px,      rgba(16, 185, 129, 0.018) 4px);  background-size: 100% 4px;  animation: scanlineScroll 0.6s linear infinite;}html[data-theme="emerald"] .hero-bg {  background:    radial-gradient(ellipse 70% 50% at 15% 45%, rgba(16, 185, 129, 0.2) 0%, transparent 60%),    radial-gradient(ellipse 50% 40% at 85% 55%, rgba(52, 211, 153, 0.15) 0%, transparent 55%);}html[data-theme="emerald"] .hero::after {  background: linear-gradient(90deg, transparent, rgba(16, 185, 129, 0.3), transparent);}html[data-theme="emerald"] .btn-primary {  background: linear-gradient(135deg, #059669, #047857);  box-shadow: 0 0 18px rgba(16, 185, 129, 0.5);}html[data-theme="emerald"] .btn-primary:hover {  background: linear-gradient(135deg, #10b981, #059669);  box-shadow: 0 0 28px rgba(16, 185, 129, 0.65);}html[data-theme="emerald"] .brand-icon,html[data-theme="emerald"] .brand-accent,html[data-theme="emerald"] .accent {  color: #34d399;}html[data-theme="emerald"] a {  color: #10b981;}html[data-theme="emerald"] .nav-link.active {  background: rgba(16, 185, 129, 0.12);}html[data-theme="emerald"] .filter-btn.active {  background: #059669;}html[data-theme="emerald"] .item-card {  box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.08);}html[data-theme="emerald"] .item-card:hover {  box-shadow: 0 0 22px rgba(16, 185, 129, 0.28), 0 0 0 1px rgba(16, 185, 129, 0.35);}html[data-theme="emerald"] h1,html[data-theme="emerald"] .hero-title {  text-shadow: 0 0 30px rgba(16, 185, 129, 0.45);}html[data-theme="emerald"] .navbar {  border-bottom-color: rgba(16, 185, 129, 0.2);  box-shadow: 0 1px 20px rgba(16, 185, 129, 0.1);}.theme-preview-emerald {  background: linear-gradient(135deg, #000c05, #02200d);  border: 1px solid rgba(16, 185, 129, 0.45);}html[data-theme="water"] .hero-bg {  background:    radial-gradient(ellipse 80% 50% at 20% 40%, rgba(14, 165, 233, 0.18) 0%, transparent 60%),    radial-gradient(ellipse 60% 40% at 80% 60%, rgba(6, 182, 212, 0.12) 0%, transparent 55%);}html[data-theme="water"] .hero::after {  background: linear-gradient(90deg, transparent, rgba(14, 165, 233, 0.6), transparent);}html[data-theme="water"] .btn-primary {  background: linear-gradient(135deg, #0ea5e9, #0284c7);  box-shadow: 0 4px 15px rgba(14, 165, 233, 0.3);}html[data-theme="water"] .btn-primary:hover {  background: linear-gradient(135deg, #38bdf8, #0ea5e9);  box-shadow: 0 6px 20px rgba(14, 165, 233, 0.45);}html[data-theme="water"] .nav-link.active {  background: rgba(14, 165, 233, 0.15);}html[data-theme="water"] .filter-btn.active {  background: #0ea5e9;}html[data-theme="water"] .item-card:hover {  box-shadow: 0 8px 30px rgba(14, 165, 233, 0.2);}html[data-theme="water"] .brand-icon,html[data-theme="water"] .brand-accent,html[data-theme="water"] .accent {  color: #38bdf8;}html[data-theme="water"] a {  color: #38bdf8;}/* ══════════════════════════════════════════════════════   PREMIUM DYNAMIC BACKGROUND ANIMATIONS   ══════════════════════════════════════════════════════ */@keyframes scanlineScroll {  from {    background-position: 0 0;  }  to {    background-position: 0 4px;  }}@keyframes ambientGlowMove {  0% {    background-position: 0% 0%, 100% 100%, 0% 0%;  }  50% {    background-position: 100% 50%, 0% 50%, 0% 0%;  }  100% {    background-position: 0% 0%, 100% 100%, 0% 0%;  }}html[data-theme="premium"] body,html[data-theme="neon"] body,html[data-theme="emerald"] body {  background:    radial-gradient(circle at 10% 20%, var(--red-glow2) 0%, transparent 40%),    radial-gradient(circle at 90% 80%, var(--red-glow) 0%, transparent 40%),    var(--bg);  background-attachment: fixed;  background-size: 200% 200%, 200% 200%, 100% 100%;  /* Замедлили до 60s — реже триггерит repaint */  animation: ambientGlowMove 60s ease-in-out infinite;  will-change: background-position;}/* ══════════════════════════════════════════════════════   PREMIUM MONOCHROME DESIGN (B&W) — html[data-design="minimal"]   ══════════════════════════════════════════════════════ */html[data-design="minimal"] {  /* Very dark, elegant background */  --bg: #050505;  --bg2: #0a0a0a;  --bg3: #121212;  /* Cards with slight translucency (glass effect basis) */  --card: rgba(20, 20, 20, 0.6);  --card-hover: rgba(30, 30, 30, 0.8);  /* Subtle, thin borders */  --border: rgba(255, 255, 255, 0.08);  --border-red: rgba(255, 255, 255, 0.15);  /* Monochrome accents instead of red */  --red: #ffffff;  --red-bright: #e0e0e0;  --red-dark: #a0a0a0;  /* White glows */  --red-glow: rgba(255, 255, 255, 0.1);  --red-glow2: rgba(255, 255, 255, 0.05);  /* Text colors */  --text: #ffffff;  --text-muted: #888888;  --text-dim: #555555;  /* Softer, more elegant curves */  --radius: 12px;  --radius-lg: 20px;  /* Soft, deep ambient shadows */  --shadow: 0 8px 32px rgba(0, 0, 0, 0.6);  --shadow-red: 0 4px 24px rgba(255, 255, 255, 0.15);}/* Elegant radial gradient background */html[data-design="minimal"] body {  background:    radial-gradient(circle at 15% 50%, rgba(255, 255, 255, 0.03) 0%, transparent 50%),    radial-gradient(circle at 85% 30%, rgba(255, 255, 255, 0.02) 0%, transparent 50%),    var(--bg);  background-attachment: fixed;  color: var(--text);}/* Hide colorful ambient animations if any */html[data-design="minimal"] body::before {  display: none !important;}/* Glassmorphism for cards, navbar, modals */html[data-design="minimal"] .item-card,html[data-design="minimal"] .step-card,html[data-design="minimal"] .profile-card,html[data-design="minimal"] .modal,html[data-design="minimal"] .cart-sidebar,html[data-design="minimal"] .navbar,html[data-design="minimal"] .payment-card {  background: var(--card) !important;  backdrop-filter: blur(16px);  -webkit-backdrop-filter: blur(16px);  border: 1px solid var(--border) !important;  box-shadow: var(--shadow) !important;}html[data-design="minimal"] .item-card:hover {  background: var(--card-hover) !important;  border-color: rgba(255, 255, 255, 0.2) !important;  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.1) !important;  transform: translateY(-4px) scale(1.02);}/* Sleek Buttons */html[data-design="minimal"] .btn {  border-radius: 10px;  text-transform: uppercase;  letter-spacing: 0.5px;  font-weight: 600;  font-size: 0.85rem;}html[data-design="minimal"] .btn-primary {  background: #ffffff;  color: #000000;  border: none;  box-shadow: 0 4px 14px rgba(255, 255, 255, 0.2);}html[data-design="minimal"] .btn-primary:hover {  background: #e0e0e0;  box-shadow: 0 6px 20px rgba(255, 255, 255, 0.3);}html[data-design="minimal"] .item-add-btn {  background: rgba(255, 255, 255, 0.1);  color: #ffffff;  border: 1px solid rgba(255, 255, 255, 0.1);  border-radius: 10px;}html[data-design="minimal"] .item-add-btn:hover {  background: #ffffff;  color: #000000;  border-color: #ffffff;}html[data-design="minimal"] .btn-outline {  border-color: rgba(255, 255, 255, 0.2);  color: #ffffff;}html[data-design="minimal"] .btn-outline:hover {  background: rgba(255, 255, 255, 0.1);  border-color: #ffffff;}/* Typography & Accents Override to pure White/Gray */html[data-design="minimal"] .brand-icon,html[data-design="minimal"] .brand-accent,html[data-design="minimal"] .vbuck-icon,html[data-design="minimal"] .vbucks-svg,html[data-design="minimal"] .hero-counter-num,html[data-design="minimal"] .stat-value,html[data-design="minimal"] .item-price,html[data-design="minimal"] .cart-item-price,html[data-design="minimal"] a:not(.btn) {  color: #ffffff !important;  fill: #ffffff !important;}html[data-design="minimal"] .nav-link.active,html[data-design="minimal"] .filter-btn.active {  background: rgba(255, 255, 255, 0.15) !important;  color: #ffffff !important;  border-color: rgba(255, 255, 255, 0.3) !important;}html[data-design="minimal"] .nav-link::after {  background: #ffffff !important;}html[data-design="minimal"] .hero-badge {  background: rgba(255, 255, 255, 0.05);  border-color: rgba(255, 255, 255, 0.15);  color: #ffffff;  box-shadow: none;  animation: none;}/* Inputs */html[data-design="minimal"] .form-input,html[data-design="minimal"] .shop-search,html[data-design="minimal"] .shop-sort {  background: rgba(0, 0, 0, 0.3) !important;  border: 1px solid rgba(255, 255, 255, 0.1) !important;  color: #ffffff !important;}html[data-design="minimal"] .form-input:focus,html[data-design="minimal"] .shop-search:focus {  border-color: rgba(255, 255, 255, 0.4) !important;  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.05);}/* Status pills and Badges */html[data-design="minimal"] .status-done,html[data-design="minimal"] .status-paid {  background: rgba(255, 255, 255, 0.1) !important;  color: #ffffff !important;  border: 1px solid rgba(255, 255, 255, 0.2) !important;}html[data-design="minimal"] .status-pending_payment,html[data-design="minimal"] .status-waiting_friend,html[data-design="minimal"] .status-waiting_timer,html[data-design="minimal"] .status-sending,html[data-design="minimal"] .status-failed,html[data-design="minimal"] .status-cancelled {  background: transparent !important;  color: #a0a0a0 !important;  border: 1px solid rgba(255, 255, 255, 0.1) !important;}/* Base V-Bucks SVG icon styling */html[data-design="minimal"] .cart-count,html[data-design="minimal"] .in-cart-badge,html[data-design="minimal"] .item-hours,html[data-design="minimal"] .item-friend-badge,html[data-design="minimal"] .nick-ok,html[data-design="minimal"] .nick-err,html[data-design="minimal"] .wishlist-in-shop-badge {  background: #ffffff !important;  color: #000000 !important;  border: none !important;}html[data-design="minimal"] .nick-warning {  background: rgba(255, 255, 255, 0.05) !important;  border: 1px solid rgba(255, 255, 255, 0.1) !important;  border-left: 3px solid #ffffff !important;  color: #a0a0a0 !important;}/* Custom Cursor override */html[data-design="minimal"] .cursor-dot {  background: #ffffff;}html[data-design="minimal"] .cursor-ring {  border-color: rgba(255, 255, 255, 0.3);}html[data-design="minimal"] #customCursor.hovering .cursor-ring {  border-color: rgba(255, 255, 255, 0.6);}/* Disable theme picking in minimal mode */html[data-design="minimal"] .theme-picker {  opacity: 0.3;  pointer-events: none;  filter: grayscale(100%);}/* ── */* {  box-sizing: border-box;  margin: 0;  padding: 0;}html {  scroll-behavior: smooth;}body {  background: var(--bg);  color: var(--text);  font-family: var(--font-body);  font-size: 15px;  line-height: 1.6;  min-height: 100vh;  transition: opacity 0.2s ease;}/* Language change fade effect */[data-i18n],[data-i18n-placeholder],.filter-btn[data-cat],#langIcon {  transition: opacity 0.2s ease-in-out;}body.lang-changing [data-i18n],body.lang-changing [data-i18n-placeholder],body.lang-changing .filter-btn[data-cat],body.lang-changing #langIcon {  opacity: 0.3;}a {  color: var(--red-bright);  text-decoration: none;  transition: color var(--transition);}a:hover {  color: var(--text);}/* ── Scrollbar ── */::-webkit-scrollbar {  width: 6px;}::-webkit-scrollbar-track {  background: var(--bg2);}::-webkit-scrollbar-thumb {  background: var(--red-dark);  border-radius: 3px;}::-webkit-scrollbar-thumb:hover {  background: var(--red);}/* ══════════════════════════════════════════════════════   LAYOUT   ══════════════════════════════════════════════════════ */.container {  max-width: 1280px;  margin: 0 auto;  padding: 0 24px;}/* Wider container for admin panel */.admin-container {  max-width: 1600px;}html[data-layout="ultrawide"] .container {  max-width: 1800px;}html[data-layout="ultrawide"] .nav-inner {  max-width: 1800px;}.container-sm {  max-width: 800px;}.page-container {  padding: 80px 0 60px;  min-height: 100vh;}/* ══════════════════════════════════════════════════════   NAVBAR   ══════════════════════════════════════════════════════ */.navbar {  position: fixed;  top: 0;  left: 0;  right: 0;  z-index: 100;  background: rgba(10, 10, 15, 0.92);  backdrop-filter: blur(12px);  border-bottom: 1px solid var(--border);  height: 62px;}.nav-inner {  max-width: 1280px;  margin: 0 auto;  padding: 0 24px;  height: 100%;  display: flex;  align-items: center;  gap: 32px;}.nav-brand {  display: flex;  align-items: center;  gap: 8px;  color: var(--text) !important;  font-family: var(--font-head);  font-size: 1.4rem;  font-weight: 700;  letter-spacing: 1px;}.brand-icon {  color: var(--red);  font-size: 1.3rem;}.brand-accent {  color: var(--red);}.nav-links {  display: flex;  gap: 4px;  flex: 1;  justify-content: center;}.nav-link {  color: var(--text-muted) !important;  padding: 6px 14px;  border-radius: 6px;  font-size: 0.9rem;  font-weight: 500;  transition: var(--t);}.nav-link:hover {  color: var(--text) !important;  background: var(--bg3);}.nav-link.active {  color: var(--text) !important;  background: var(--red-glow);}.nav-admin {  color: var(--red-bright) !important;}.nav-right {  display: flex;  align-items: center;  gap: 12px;  margin-left: auto;}/* Cart button */.cart-btn {  position: relative;  background: var(--bg3);  border: 1px solid var(--border);  color: var(--text);  padding: 8px 10px;  border-radius: 8px;  cursor: pointer;  transition: var(--t);  display: flex;  align-items: center;}.lang-btn {  position: relative;  background: var(--bg3);  border: 1px solid var(--border);  color: var(--text);  padding: 8px 10px;  border-radius: 8px;  cursor: pointer;  transition: var(--t);  display: flex;  align-items: center;  font-size: 1.4rem;  margin-right: 8px;  /* Force emoji rendering */  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;}.lang-btn #langIcon {  display: inline-flex;  align-items: center;  justify-content: center;  line-height: 1;}.lang-btn #langIcon svg {  display: block;  border-radius: 2px;}.lang-btn:hover {  border-color: var(--red);  background: var(--red-glow2);}.cart-btn:hover {  border-color: var(--red);  background: var(--red-glow2);}.cart-count {  position: absolute;  top: -6px;  right: -6px;  background: var(--red);  color: #fff;  font-size: 10px;  font-weight: 700;  width: 18px;  height: 18px;  border-radius: 50%;  display: flex;  align-items: center;  justify-content: center;  display: none;}.cart-count.visible {  display: flex;}/* TG login btn */.tg-login-btn {  display: flex;  align-items: center;  gap: 7px;  background: var(--red);  color: #fff;  border: none;  padding: 8px 16px;  border-radius: 8px;  font-size: 0.85rem;  font-weight: 600;  cursor: pointer;  transition: var(--t);}.tg-login-btn:hover {  background: var(--red-bright);  box-shadow: var(--shadow-red);}/* User menu */.user-menu {  position: relative;}.user-btn {  display: flex;  align-items: center;  gap: 8px;  background: var(--bg3);  border: 1px solid var(--border);  color: var(--text);  padding: 7px 14px;  border-radius: 8px;  cursor: pointer;  font-size: 0.85rem;  transition: var(--t);}.user-btn:hover {  border-color: var(--red);}.user-avatar {  font-size: 1rem;}.user-name {  max-width: 100px;  overflow: hidden;  text-overflow: ellipsis;  white-space: nowrap;}.user-dropdown {  position: absolute;  top: calc(100% + 8px);  right: 0;  background: var(--card);  border: 1px solid var(--border);  border-radius: var(--radius);  min-width: 160px;  display: none;  overflow: hidden;  box-shadow: var(--shadow);}.user-dropdown.open {  display: block;}.user-dropdown a,.user-dropdown button {  display: block;  width: 100%;  padding: 10px 16px;  color: var(--text-muted);  background: none;  border: none;  cursor: pointer;  font-size: 0.875rem;  text-align: left;  transition: var(--t);}.user-dropdown a:hover,.user-dropdown button:hover {  color: var(--text);  background: var(--bg3);}/* ══════════════════════════════════════════════════════   HERO   ══════════════════════════════════════════════════════ */.hero {  position: relative;  padding: 140px 24px 80px;  text-align: center;  overflow: hidden;}.hero-bg {  position: absolute;  inset: 0;  background:    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(220, 38, 38, 0.12) 0%, transparent 70%),    radial-gradient(ellipse 40% 60% at 80% 50%, rgba(220, 38, 38, 0.06) 0%, transparent 60%);  pointer-events: none;}.hero-content {  position: relative;  max-width: 720px;  margin: 0 auto;}.hero-badge {  display: inline-flex;  align-items: center;  gap: 6px;  background: var(--red-glow);  border: 1px solid var(--border-red);  color: var(--red-bright);  padding: 5px 14px;  border-radius: 20px;  font-size: 0.8rem;  font-weight: 600;  letter-spacing: 0.5px;  margin-bottom: 20px;  text-transform: uppercase;}.hero-title {  font-family: var(--font-head);  font-size: clamp(2.8rem, 6vw, 5rem);  font-weight: 700;  letter-spacing: 2px;  line-height: 1.05;  margin-bottom: 16px;}.accent {  color: var(--red);}.hero-subtitle {  font-size: 1.05rem;  color: var(--text-muted);  max-width: 540px;  margin: 0 auto 32px;}.hero-features {  display: flex;  justify-content: center;  gap: 20px;  flex-wrap: wrap;}.hero-feature {  display: flex;  align-items: center;  gap: 8px;  background: var(--card);  border: 1px solid var(--border);  padding: 8px 16px;  border-radius: 20px;  font-size: 0.85rem;  color: var(--text-muted);}/* ══════════════════════════════════════════════════════   SHOP   ══════════════════════════════════════════════════════ */.shop-section {  padding: 20px 0 60px;}.shop-toolbar {  display: flex;  align-items: flex-start;  justify-content: space-between;  flex-wrap: wrap;  gap: 16px;  margin-bottom: 24px;}.shop-toolbar-left {  display: flex;  align-items: center;  gap: 24px;  flex-wrap: wrap;}.shop-timer {  display: flex;  align-items: center;  gap: 8px;  padding: 8px 16px;  background: rgba(var(--accent-rgb), 0.1);  border: 1px solid rgba(var(--accent-rgb), 0.3);  border-radius: 8px;  font-size: 0.9rem;}.shop-timer-label {  color: var(--text-muted);  font-weight: 500;}.shop-timer-value {  color: var(--accent);  font-weight: 700;  font-size: 1.1rem;  font-family: 'Courier New', monospace;  letter-spacing: 1px;  text-shadow: 0 0 10px rgba(var(--accent-rgb), 0.3);}margin-bottom: 24px;}.section-title {  font-family: var(--font-head);  font-size: 1.6rem;  font-weight: 700;  letter-spacing: 1px;  display: flex;  align-items: center;  gap: 10px;}.shop-count {  font-size: 0.85rem;  color: var(--text-muted);  font-family: var(--font-body);  font-weight: 400;}.filter-bar {  display: flex;  flex-wrap: wrap;  gap: 6px;}.filter-btn {  background: var(--card);  border: 1px solid var(--border);  color: var(--text-muted);  padding: 6px 14px;  border-radius: 20px;  font-size: 0.8rem;  cursor: pointer;  transition: var(--t);}.filter-btn:hover {  border-color: var(--red);  color: var(--text);}.filter-btn.active {  background: var(--red);  border-color: var(--red);  color: #fff;}/* Shop grid */.shop-grid {  display: grid;  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));  gap: 14px;  contain: layout style;}.shop-loading,.shop-empty {  display: flex;  flex-direction: column;  align-items: center;  justify-content: center;  gap: 16px;  padding: 80px;  color: var(--text-muted);}.empty-icon {  font-size: 3rem;}/* Item card — base layout (animation/hover in animations section below) */.item-card {  background: var(--card);  border: 1px solid var(--border);  border-radius: var(--radius-lg);  overflow: hidden;  position: relative;  display: flex;  flex-direction: column;  contain: layout style paint;}.item-card.in-cart {  border-color: var(--red);  box-shadow: 0 0 0 1px var(--red);}.item-info {  padding: 10px 12px 12px;  flex: 1;  display: flex;  flex-direction: column;  gap: 8px;}.item-name {  font-size: 0.82rem;  font-weight: 600;  color: var(--text);  line-height: 1.3;  overflow: hidden;  text-overflow: ellipsis;  display: -webkit-box;  -webkit-line-clamp: 2;  line-clamp: 2;  -webkit-box-orient: vertical;}.item-price {  font-family: var(--font-head);  font-size: 1rem;  font-weight: 700;  color: #5bc8ff;  display: flex;  align-items: center;  gap: 5px;  width: 100%;}.vbuck-icon {  font-size: 0.8rem;}.in-cart-badge {  position: absolute;  top: 8px;  right: 8px;  background: var(--red);  color: #fff;  font-size: 11px;  font-weight: 700;  padding: 2px 7px;  border-radius: 10px;}/* ══════════════════════════════════════════════════════   HOW IT WORKS   ══════════════════════════════════════════════════════ */.how-section {  padding: 60px 0;  background: linear-gradient(180deg, transparent 0%, var(--bg2) 30%, var(--bg2) 70%, transparent 100%);}.steps-grid {  display: grid;  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));  gap: 20px;  margin-top: 32px;}.step-card {  background: var(--card);  border: 1px solid var(--border);  border-radius: var(--radius-lg);  padding: 28px 24px;  position: relative;  transition: var(--t);}.step-card:hover {  border-color: var(--border-red);  box-shadow: 0 4px 20px var(--red-glow2);}.step-num {  font-family: var(--font-head);  font-size: 3rem;  font-weight: 700;  color: var(--red);  opacity: 0.3;  line-height: 1;  margin-bottom: 8px;}.step-icon {  font-size: 2rem;  margin-bottom: 12px;}.step-card h3 {  font-family: var(--font-head);  font-size: 1.1rem;  font-weight: 600;  margin-bottom: 8px;}.step-card p {  font-size: 0.875rem;  color: var(--text-muted);  line-height: 1.5;}/* ══════════════════════════════════════════════════════   CART SIDEBAR   ══════════════════════════════════════════════════════ */.cart-overlay {  position: fixed;  inset: 0;  background: rgba(0, 0, 0, 0.6);  z-index: 200;  opacity: 0;  pointer-events: none;  transition: opacity var(--transition);}.cart-overlay.active {  opacity: 1;  pointer-events: all;}.cart-sidebar {  position: fixed;  top: 0;  right: 0;  width: 360px;  height: 100vh;  background: var(--bg2);  border-left: 1px solid var(--border);  z-index: 201;  display: flex;  flex-direction: column;  transform: translateX(100%);  transition: transform .3s ease;}.cart-sidebar.open {  transform: translateX(0);}.cart-header {  display: flex;  align-items: center;  justify-content: space-between;  padding: 20px;  border-bottom: 1px solid var(--border);}.cart-header h3 {  font-family: var(--font-head);  font-size: 1.2rem;  font-weight: 700;}.cart-close {  background: none;  border: none;  color: var(--text-muted);  font-size: 1.1rem;  cursor: pointer;  padding: 4px 8px;  border-radius: 4px;  transition: color var(--transition);}.cart-close:hover {  color: var(--text);}.cart-items {  flex: 1;  overflow-y: auto;  padding: 12px;}.cart-empty {  display: flex;  align-items: center;  justify-content: center;  height: 200px;  color: var(--text-muted);  font-size: 0.9rem;}.cart-item {  display: flex;  align-items: center;  gap: 12px;  padding: 10px;  background: var(--card);  border: 1px solid var(--border);  border-radius: var(--radius);  margin-bottom: 8px;}.cart-item-img {  width: 54px;  height: 54px;  border-radius: 6px;  object-fit: cover;  background: var(--bg3);  flex-shrink: 0;  display: flex;  align-items: center;  justify-content: center;  font-size: 1.5rem;}.cart-item-info {  flex: 1;  min-width: 0;}.cart-item-name {  font-size: 0.82rem;  font-weight: 600;  overflow: hidden;  text-overflow: ellipsis;  white-space: nowrap;}.cart-item-price {  font-size: 0.78rem;  color: #5bc8ff;  margin-top: 2px;}.cart-item-remove {  background: none;  border: none;  color: var(--text-dim);  cursor: pointer;  font-size: 1rem;  padding: 4px;  border-radius: 4px;  transition: color var(--transition);  flex-shrink: 0;}.cart-item-remove:hover {  color: var(--red);}.cart-footer {  padding: 16px 20px;  border-top: 1px solid var(--border);}.cart-total {  display: flex;  justify-content: space-between;  align-items: center;  margin-bottom: 14px;  font-weight: 600;  font-size: 0.95rem;}/* ══════════════════════════════════════════════════════   MODALS   ══════════════════════════════════════════════════════ */.modal-overlay {  position: fixed;  inset: 0;  background: rgba(0, 0, 0, 0.75);  z-index: 300;  display: flex;  align-items: center;  justify-content: center;  padding: 20px;  opacity: 0;  pointer-events: none;  transition: opacity var(--transition);}.modal-overlay.active {  opacity: 1;  pointer-events: all;}.modal {  background: var(--bg2);  border: 1px solid var(--border);  border-radius: var(--radius-lg);  width: 100%;  max-width: 520px;  max-height: 90vh;  overflow-y: auto;  transform: scale(0.95);  transition: transform var(--transition);}.modal-overlay.active .modal {  transform: scale(1);}.modal-sm {  max-width: 380px;}.modal-header {  display: flex;  align-items: center;  justify-content: space-between;  padding: 20px 24px;  border-bottom: 1px solid var(--border);}.modal-header h3 {  font-family: var(--font-head);  font-size: 1.2rem;  font-weight: 700;}.modal-close {  background: none;  border: none;  color: var(--text-muted);  font-size: 1.1rem;  cursor: pointer;  padding: 4px 8px;  border-radius: 4px;  transition: color var(--transition);}.modal-close:hover {  color: var(--text);}.modal-body {  padding: 24px;}.modal-footer {  padding: 16px 24px;  border-top: 1px solid var(--border);}/* ══════════════════════════════════════════════════════   FORMS   ══════════════════════════════════════════════════════ */.form-group {  margin-bottom: 16px;}.form-group label {  display: block;  font-size: 0.82rem;  font-weight: 600;  color: var(--text-muted);  text-transform: uppercase;  letter-spacing: 0.5px;  margin-bottom: 6px;}.form-input {  width: 100%;  background: var(--bg3);  border: 1px solid var(--border);  color: var(--text);  padding: 10px 14px;  border-radius: 8px;  font-size: 0.9rem;  font-family: var(--font-body);  transition: border-color var(--transition);  outline: none;}.form-input:focus {  border-color: var(--red);}.form-input::placeholder {  color: var(--text-dim);}.form-hint {  font-size: 0.78rem;  color: #f59e0b;  margin-top: 6px;}.promo-row {  display: flex;  gap: 8px;}.promo-row .form-input {  flex: 1;}.promo-msg {  font-size: 0.8rem;  margin-top: 6px;  min-height: 16px;}.promo-ok {  color: #22c55e;}.promo-err {  color: var(--red-bright);}/* Payment methods */.payment-methods {  display: grid;  grid-template-columns: 1fr 1fr;  gap: 8px;}.payment-option {  cursor: pointer;}.payment-option input[type=radio] {  display: none;}.payment-card {  background: var(--bg3);  border: 1px solid var(--border);  border-radius: 8px;  padding: 12px;  display: flex;  flex-direction: column;  align-items: center;  gap: 4px;  transition: var(--t);}.payment-option input:checked+.payment-card {  border-color: var(--red);  background: var(--red-glow2);}.payment-card:hover {  border-color: var(--red);}.pay-icon {  font-size: 1.4rem;}.pay-name {  font-size: 0.8rem;  font-weight: 600;}.pay-price {  font-size: 0.75rem;  color: var(--text-muted);}.order-summary {  background: var(--bg3);  border: 1px solid var(--border);  border-radius: 8px;  padding: 14px;  margin-top: 16px;  font-size: 0.85rem;}.order-summary-row {  display: flex;  justify-content: space-between;  padding: 4px 0;  color: var(--text-muted);}.order-summary-total {  display: flex;  justify-content: space-between;  padding-top: 10px;  margin-top: 8px;  border-top: 1px solid var(--border);  font-weight: 700;  color: var(--text);}/* ══════════════════════════════════════════════════════   BUTTONS   ══════════════════════════════════════════════════════ */.btn {  display: inline-flex;  align-items: center;  justify-content: center;  gap: 6px;  padding: 10px 20px;  border-radius: 8px;  font-size: 0.9rem;  font-weight: 600;  font-family: var(--font-body);  cursor: pointer;  transition: var(--t);  border: 1px solid transparent;  white-space: nowrap;}.btn-primary {  background: var(--red);  color: #fff;  border-color: var(--red);}.btn-primary:hover {  background: var(--red-bright);  box-shadow: var(--shadow-red);}.btn-outline {  background: transparent;  color: var(--text);  border-color: var(--border);}.btn-outline:hover {  border-color: var(--red);  color: var(--red-bright);}.btn-danger {  background: var(--red-dark);  color: #fff;  border-color: var(--red-dark);}.btn-danger:hover {  background: var(--red);}.btn-sm {  padding: 6px 14px;  font-size: 0.8rem;  border-radius: 6px;}.btn-block {  width: 100%;}.mt-1 {  margin-top: 8px;}/* ══════════════════════════════════════════════════════   PROFILE PAGE   ══════════════════════════════════════════════════════ */.page-header {  padding: 80px 0 32px;  text-align: center;}.page-header h1 {  font-family: var(--font-head);  font-size: 2.2rem;  font-weight: 700;  margin-bottom: 8px;}.profile-header {  background: var(--card);  border: 1px solid var(--border);  border-radius: var(--radius-lg);  padding: 32px;  display: flex;  align-items: center;  gap: 24px;  margin-bottom: 24px;  flex-wrap: wrap;}.profile-avatar {  width: 72px;  height: 72px;  background: var(--red-glow);  border: 2px solid var(--border-red);  border-radius: 50%;  display: flex;  align-items: center;  justify-content: center;  font-size: 2rem;  flex-shrink: 0;}.profile-info {  flex: 1;}.profile-info h1 {  font-family: var(--font-head);  font-size: 1.5rem;  font-weight: 700;}.profile-stats-row {  display: flex;  gap: 12px;  margin-left: auto;  flex-wrap: wrap;}.stat-pill {  background: var(--bg3);  border: 1px solid var(--border);  border-radius: 10px;  padding: 10px 20px;  text-align: center;  min-width: 90px;}.stat-value {  display: block;  font-family: var(--font-head);  font-size: 1.3rem;  font-weight: 700;}.stat-label {  display: block;  font-size: 0.75rem;  color: var(--text-muted);  margin-top: 2px;}.profile-grid {  display: grid;  grid-template-columns: 1.5fr 1fr;  gap: 20px;}.profile-card {  background: var(--card);  border: 1px solid var(--border);  border-radius: var(--radius-lg);  overflow: hidden;}.card-header {  padding: 16px 20px;  border-bottom: 1px solid var(--border);}.card-header h3 {  font-family: var(--font-head);  font-size: 1rem;  font-weight: 700;}/* Order item */.order-item {  display: flex;  align-items: center;  gap: 14px;  padding: 14px 20px;  border-bottom: 1px solid var(--border);  transition: background var(--transition);}.order-item:last-child {  border-bottom: none;}.order-item:hover {  background: var(--bg3);}.order-status {  display: inline-flex;  align-items: center;  padding: 3px 10px;  border-radius: 12px;  font-size: 0.72rem;  font-weight: 700;  text-transform: uppercase;  letter-spacing: 0.5px;}.status-done {  background: rgba(34, 197, 94, 0.15);  color: #22c55e;}.status-pending_payment {  background: rgba(245, 158, 11, 0.15);  color: #f59e0b;}.status-paid {  background: rgba(59, 130, 246, 0.15);  color: #60a5fa;}.status-waiting_friend {  background: rgba(168, 85, 247, 0.15);  color: #a855f7;}.status-waiting_timer {  background: rgba(168, 85, 247, 0.15);  color: #a855f7;}.status-sending {  background: rgba(59, 130, 246, 0.15);  color: #60a5fa;}.status-failed {  background: rgba(220, 38, 38, 0.15);  color: var(--red-bright);}.status-cancelled {  background: var(--bg3);  color: var(--text-dim);}/* Ref section */.ref-info {  padding: 16px 20px;}.ref-link-box {  margin-bottom: 16px;}.ref-link-box label {  font-size: 0.8rem;  font-weight: 600;  color: var(--text-muted);  display: block;  margin-bottom: 6px;}.input-copy-row {  display: flex;  gap: 8px;}.input-copy-row .form-input {  flex: 1;  font-size: 0.8rem;}.ref-stats-row {  display: flex;  gap: 10px;}.ref-stats-row .ref-balance-box {  flex: 1;}.ref-balance-box {  background: var(--red-glow2);  border: 1px solid var(--border-red);  border-radius: var(--radius);  padding: 14px;  display: flex;  align-items: center;  justify-content: space-between;}.ref-balance-label {  font-size: 0.85rem;  color: var(--text-muted);}.ref-balance-value {  font-family: var(--font-head);  font-size: 1.4rem;  font-weight: 700;  color: var(--red-bright);}/* Wishlist */.wishlist-item {  display: flex;  align-items: center;  justify-content: space-between;  padding: 10px 20px;  border-bottom: 1px solid var(--border);  font-size: 0.875rem;}.wishlist-item:last-child {  border-bottom: none;}.wishlist-remove {  background: none;  border: none;  color: var(--text-dim);  cursor: pointer;  font-size: 0.9rem;  padding: 2px 6px;  border-radius: 4px;  transition: color var(--transition);}.wishlist-remove:hover {  color: var(--red);}/* ══════════════════════════════════════════════════════   FAQ PAGE   ══════════════════════════════════════════════════════ */.faq-list {  display: flex;  flex-direction: column;  gap: 8px;  margin-top: 8px;}.faq-item {  background: var(--card);  border: 1px solid var(--border);  border-radius: var(--radius);  overflow: hidden;}.faq-q {  display: flex;  align-items: center;  justify-content: space-between;  padding: 16px 20px;  cursor: pointer;  font-weight: 600;  font-size: 0.95rem;  transition: var(--t);  user-select: none;}.faq-q:hover {  background: var(--bg3);}.faq-item.open .faq-q {  color: var(--red-bright);  border-bottom: 1px solid var(--border);}.faq-arrow {  color: var(--text-muted);  font-size: 0.7rem;  transition: transform var(--transition);}.faq-item.open .faq-arrow {  transform: rotate(180deg);}.faq-a {  overflow: hidden;  height: 0;  font-size: 0.9rem;  color: var(--text-muted);  line-height: 1.7;  transition: height .32s cubic-bezier(.4, 0, .2, 1);}.faq-a-inner {  padding: 16px 20px;}.faq-a ol {  padding-left: 18px;}.faq-a ol li {  margin-bottom: 6px;}.faq-a strong {  color: var(--text);}/* ══════════════════════════════════════════════════════   ADMIN PAGE   ══════════════════════════════════════════════════════ */.admin-tabs {  display: flex;  flex-wrap: wrap;  gap: 4px;  margin-bottom: 24px;  border-bottom: 1px solid var(--border);  padding-bottom: 16px;}.admin-tab {  background: var(--card);  border: 1px solid var(--border);  color: var(--text-muted);  padding: 8px 16px;  border-radius: 8px;  font-size: 0.85rem;  font-weight: 500;  cursor: pointer;  transition: var(--t);}.admin-tab:hover {  color: var(--text);  border-color: var(--red);}.admin-tab.active {  background: var(--red);  border-color: var(--red);  color: #fff;}.admin-panel {  display: none;}.admin-panel.active {  display: block;}.panel-toolbar {  display: flex;  align-items: center;  justify-content: space-between;  margin-bottom: 16px;  flex-wrap: wrap;  gap: 12px;}.panel-toolbar h3 {  font-family: var(--font-head);  font-size: 1.1rem;  font-weight: 700;}.toolbar-right {  display: flex;  gap: 8px;}/* Stats grid */.stats-grid {  display: grid;  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));  gap: 16px;}.stat-card {  background: var(--card);  border: 1px solid var(--border);  border-radius: var(--radius-lg);  padding: 20px;  transition: var(--t);}.stat-card:hover {  border-color: var(--border-red);}.stat-card-label {  font-size: 0.75rem;  color: var(--text-muted);  text-transform: uppercase;  letter-spacing: 0.5px;  margin-bottom: 8px;}.stat-card-value {  font-family: var(--font-head);  font-size: 1.8rem;  font-weight: 700;  color: var(--text);}.stat-card-value.red {  color: var(--red-bright);}.stat-card-value.green {  color: #22c55e;}/* Tables */.table-wrap {  overflow-x: auto;  border-radius: var(--radius);  border: 1px solid var(--border);}.data-table {  width: 100%;  border-collapse: collapse;  font-size: 0.83rem;}.data-table th {  background: var(--bg3);  color: var(--text-muted);  font-weight: 600;  font-size: 0.75rem;  text-transform: uppercase;  letter-spacing: 0.5px;  padding: 10px 14px;  text-align: left;  border-bottom: 1px solid var(--border);  white-space: nowrap;}.data-table td {  padding: 10px 14px;  border-bottom: 1px solid var(--border);  color: var(--text-muted);  vertical-align: middle;}.data-table tr:last-child td {  border-bottom: none;}.data-table tr:hover td {  background: var(--bg3);}.table-loading {  text-align: center;  padding: 30px;}/* Create form */.create-form {  background: var(--bg3);  border: 1px solid var(--border);  border-radius: var(--radius);  padding: 16px;  margin-bottom: 16px;}.form-row {  display: flex;  gap: 12px;  flex-wrap: wrap;}.form-row .form-group {  flex: 1;  min-width: 140px;}.form-actions {  display: flex;  gap: 8px;  margin-top: 4px;}.req {  color: var(--red-bright);  margin-left: 2px;}/* Nick verify */.nick-verify-row {  display: flex;  gap: 8px;  align-items: center;}.nick-verify-row .form-input {  flex: 1;}.nick-verify-status {  margin-top: 6px;  font-size: 0.82rem;  font-weight: 600;  padding: 4px 8px;  border-radius: 6px;}.nick-ok {  color: #22c55e;  background: rgba(34, 197, 94, .1);  border: 1px solid rgba(34, 197, 94, .3);}.nick-err {  color: var(--red-bright);  background: rgba(220, 38, 38, .1);  border: 1px solid rgba(220, 38, 38, .3);}/* Support button in nav */.nav-link-btn {  background: none;  border: none;  cursor: pointer;  font: inherit;  line-height: normal;  display: inline-flex;  align-items: center;}/* Support modal contacts */.support-contacts {  display: flex;  flex-direction: column;  gap: 10px;}.support-contact-btn {  display: flex;  align-items: center;  gap: 10px;  padding: 12px 16px;  background: var(--bg3);  border: 1px solid var(--border);  border-radius: var(--radius);  color: var(--text);  text-decoration: none;  font-weight: 600;  font-size: 0.95rem;  transition: border-color var(--transition), background var(--transition);}.support-contact-btn:hover {  border-color: var(--red);  background: rgba(220, 38, 38, .08);  color: var(--red-bright);}.acc-add-steps {  display: flex;  flex-direction: column;  gap: 14px;}.acc-step {  display: flex;  gap: 12px;  align-items: flex-start;  font-size: 0.88rem;  color: var(--text);  line-height: 1.5;}.acc-step-num {  flex-shrink: 0;  width: 24px;  height: 24px;  background: var(--red);  color: #fff;  border-radius: 50%;  display: flex;  align-items: center;  justify-content: center;  font-weight: 700;  font-size: 0.8rem;  margin-top: 1px;}.acc-step code {  background: var(--bg2);  border: 1px solid var(--border);  padding: 1px 6px;  border-radius: 4px;  font-size: 0.82rem;}/* Settings form */.settings-form {  background: var(--card);  border: 1px solid var(--border);  border-radius: var(--radius-lg);  padding: 24px;}.settings-grid {  display: grid;  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));  gap: 16px;  margin-bottom: 20px;}/* Pagination */.pagination {  display: flex;  gap: 6px;  justify-content: center;  margin-top: 16px;}.page-btn {  background: var(--card);  border: 1px solid var(--border);  color: var(--text-muted);  padding: 6px 14px;  border-radius: 6px;  cursor: pointer;  font-size: 0.8rem;  transition: var(--t);}.page-btn:hover,.page-btn.active {  border-color: var(--red);  color: var(--red-bright);}.page-btn.active {  background: var(--red-glow2);  font-weight: 600;}/* ══════════════════════════════════════════════════════   ADMIN — REFERRAL STATS   ══════════════════════════════════════════════════════ */.ref-summary-grid {  display: grid;  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));  gap: 12px;  margin-bottom: 24px;}.ref-stat-card {  background: var(--bg3);  border: 1px solid var(--border);  border-radius: 10px;  padding: 16px 14px;  text-align: center;}.ref-stat-value {  font-size: 1.4rem;  font-weight: 700;  color: var(--red-bright);  line-height: 1.2;}.ref-stat-label {  font-size: 0.72rem;  color: var(--text-dim);  margin-top: 5px;  line-height: 1.3;}.ref-section-title {  font-size: 0.95rem;  font-weight: 600;  color: var(--text);  margin: 0 0 10px;  padding-bottom: 8px;  border-bottom: 1px solid var(--border);}.pagination-bar {  display: flex;  align-items: center;  gap: 6px;  padding: 12px 16px;  flex-wrap: wrap;}/* ══════════════════════════════════════════════════════   PROFILE — full-width card variant   ══════════════════════════════════════════════════════ */.profile-card-full {  grid-column: 1 / -1;}/* ══════════════════════════════════════════════════════   THEME PICKER   ══════════════════════════════════════════════════════ */.theme-picker {  display: grid;  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));  gap: 12px;  padding: 14px 16px 16px;  max-width: 900px;  margin: 0 auto;}@media (min-width: 768px) {  .theme-picker {    grid-template-columns: repeat(3, 1fr);  }}.theme-pick-card {  position: relative;  display: flex;  align-items: center;  gap: 12px;  padding: 14px;  background: var(--bg3);  border: 1.5px solid var(--border);  border-radius: 12px;  cursor: pointer;  transition: border-color .2s, box-shadow .2s, transform .15s;  text-align: left;  width: 100%;  box-sizing: border-box;  min-height: 80px;}.theme-pick-card:hover {  border-color: var(--red);  box-shadow: 0 4px 16px var(--red-glow);  transform: translateY(-2px);}.theme-pick-card.active-theme {  border-color: var(--red-bright);  box-shadow: 0 4px 18px var(--red-glow);  background: var(--card-hover);}.theme-pick-preview {  display: flex;  flex-direction: column;  gap: 5px;  padding: 8px 6px;  border-radius: 8px;  width: 36px;  flex-shrink: 0;}.theme-preview-red {  background: linear-gradient(135deg, #1a0505, #2d0909);  border: 1px solid rgba(220, 38, 38, .35);}.theme-preview-water {  background: linear-gradient(135deg, #070b12, #0c1b2e);  border: 1px solid rgba(14, 165, 233, .35);}.theme-preview-premium {  background: linear-gradient(135deg, #09070a, #1b1520);  border: 1px solid rgba(251, 191, 36, .35);}.theme-preview-shadow {  background: #000000;  border: 1px solid rgba(156, 163, 175, 0.4);}.theme-pick-dot {  display: block;  height: 5px;  border-radius: 3px;}.theme-preview-red .theme-pick-dot:nth-child(1) {  background: #dc2626;  width: 100%;}.theme-preview-red .theme-pick-dot:nth-child(2) {  background: rgba(220, 38, 38, .5);  width: 70%;}.theme-preview-red .theme-pick-dot:nth-child(3) {  background: rgba(220, 38, 38, .25);  width: 45%;}.theme-preview-water .theme-pick-dot:nth-child(1) {  background: #0ea5e9;  width: 100%;}.theme-preview-water .theme-pick-dot:nth-child(2) {  background: rgba(14, 165, 233, .5);  width: 70%;}.theme-preview-water .theme-pick-dot:nth-child(3) {  background: rgba(14, 165, 233, .25);  width: 45%;}.theme-preview-premium .theme-pick-dot:nth-child(1) {  background: #d97706;  width: 100%;}.theme-preview-premium .theme-pick-dot:nth-child(2) {  background: rgba(217, 119, 6, .5);  width: 70%;}.theme-preview-premium .theme-pick-dot:nth-child(3) {  background: rgba(217, 119, 6, .25);  width: 45%;}.theme-preview-shadow .theme-pick-dot:nth-child(1) {  background: rgba(255, 255, 255, .9);  width: 60%;}.theme-preview-shadow .theme-pick-dot:nth-child(2) {  background: rgba(255, 255, 255, .7);  width: 75%;}.theme-preview-shadow .theme-pick-dot:nth-child(3) {  background: rgba(255, 255, 255, .5);  width: 50%;}.theme-pick-label {  display: flex;  flex-direction: column;  gap: 3px;  flex: 1;  min-width: 0;  overflow: hidden;}.theme-pick-name {  font-size: 0.9rem;  font-weight: 600;  color: var(--text);  line-height: 1.3;  white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis;}.theme-pick-desc {  font-size: 0.75rem;  color: var(--text-dim);  line-height: 1.4;  word-break: break-word;  overflow-wrap: break-word;  display: -webkit-box;  -webkit-line-clamp: 2;  -webkit-box-orient: vertical;  overflow: hidden;}.theme-pick-check {  width: 20px;  height: 20px;  border-radius: 50%;  background: var(--red);  color: #fff;  font-size: 0.7rem;  font-weight: 700;  display: none;  align-items: center;  justify-content: center;  flex-shrink: 0;}.theme-pick-card.active-theme .theme-pick-check {  display: flex;}@media (max-width: 600px) {  .theme-picker {    grid-template-columns: 1fr;    gap: 8px;    padding: 10px 10px 12px;  }  .theme-pick-card {    padding: 10px;    gap: 8px;  }  .theme-pick-preview {    width: 28px;    padding: 6px 4px;    flex-shrink: 0;  }  .theme-pick-locked-badge {    font-size: 0.55rem;    padding: 2px 5px;    top: 5px;    right: 5px;    letter-spacing: 0;  }  .theme-buy-btn {    font-size: 0.65rem;    padding: 3px 8px;  }}@media (max-width: 340px) {  .theme-picker {    grid-template-columns: 1fr;  }}/* ═══════════════════════════════════════════════════════════════════════   ROULETTE   ═══════════════════════════════════════════════════════════════════════ */.roulette-balance-card {  background: var(--card);  border: 1px solid var(--border);  border-radius: var(--radius-lg);  padding: 24px;  text-align: center;  margin-bottom: 32px;}.balance-label {  font-size: 0.9rem;  color: var(--text-muted);  margin-bottom: 8px;}.balance-value {  font-size: 2.5rem;  font-weight: 700;  color: var(--red-bright);  font-family: var(--font-head);  margin-bottom: 8px;}.balance-hint {  font-size: 0.85rem;  color: var(--text-dim);}.roulette-machine {  background: var(--card);  border: 1px solid var(--border);  border-radius: var(--radius-lg);  padding: 32px 24px;  margin-bottom: 40px;  overflow: hidden;}.roulette-viewport {  position: relative;  width: 100%;  height: 220px;  overflow: hidden;  background: linear-gradient(90deg,      var(--bg) 0%,      transparent 15%,      transparent 85%,      var(--bg) 100%);  border-radius: var(--radius-md);  margin-bottom: 24px;}.roulette-strip {  display: flex;  gap: 20px;  padding: 20px 0;  position: absolute;  left: 50%;  will-change: transform;  transform: translateZ(0);  /* Force hardware acceleration */  backface-visibility: hidden;  /* Prevent flickering */}.roulette-item {  flex-shrink: 0;  width: 160px;  height: 180px;}.roulette-item-inner {  width: 100%;  height: 100%;  background: var(--bg);  border: 2px solid var(--border);  border-radius: var(--radius-md);  padding: 12px;  display: flex;  flex-direction: column;  align-items: center;  justify-content: center;  gap: 8px;  transition: all 0.2s ease;}.roulette-item-inner:hover {  border-color: var(--red-bright);  transform: translateY(-2px);}.roulette-item img {  width: 80px;  height: 80px;  object-fit: contain;  border-radius: 6px;}.roulette-item-placeholder {  width: 80px;  height: 80px;  background: var(--border);  border-radius: 6px;  display: flex;  align-items: center;  justify-content: center;  font-size: 2rem;  color: var(--text-dim);}.roulette-item-name {  font-size: 0.75rem;  font-weight: 600;  color: var(--text);  text-align: center;  line-height: 1.2;  max-height: 2.4em;  overflow: hidden;  text-overflow: ellipsis;  display: -webkit-box;  -webkit-line-clamp: 2;  -webkit-box-orient: vertical;}.roulette-item-vbucks {  font-size: 0.8rem;  font-weight: 700;  color: var(--red-bright);}.roulette-pointer {  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);  width: 4px;  height: 100%;  background: var(--red-bright);  box-shadow: 0 0 20px var(--red-bright);  pointer-events: none;  z-index: 10;}.roulette-pointer::before,.roulette-pointer::after {  content: '';  position: absolute;  left: 50%;  transform: translateX(-50%);  width: 0;  height: 0;  border-style: solid;}.roulette-pointer::before {  top: -10px;  border-width: 0 8px 10px 8px;  border-color: transparent transparent var(--red-bright) transparent;}.roulette-pointer::after {  bottom: -10px;  border-width: 10px 8px 0 8px;  border-color: var(--red-bright) transparent transparent transparent;}.roulette-controls {  display: flex;  justify-content: center;  gap: 12px;}.roulette-history-section {  margin-top: 40px;}.roulette-history-section h3 {  font-family: var(--font-head);  font-size: 1.5rem;  margin-bottom: 20px;  color: var(--text);}.roulette-history-item {  background: var(--card);  border: 1px solid var(--border);  border-radius: var(--radius-md);  padding: 16px;  margin-bottom: 12px;  display: flex;  align-items: center;  gap: 16px;  transition: all 0.2s ease;}.roulette-history-item:hover {  border-color: var(--red-bright);  transform: translateX(4px);}@media (max-width: 768px) {  .balance-value {    font-size: 2rem;  }  .roulette-viewport {    height: 200px;  }  .roulette-item {    width: 140px;    height: 160px;  }  .roulette-item img {    width: 70px;    height: 70px;  }  .roulette-machine {    padding: 24px 16px;  }  .roulette-history-item {    flex-direction: column;    align-items: flex-start;  }}/* Locked / paid theme card */.theme-pick-card.locked {  opacity: 0.75;  cursor: default;  border-style: dashed;}.theme-pick-card.locked:hover {  transform: none;  box-shadow: none;  border-color: var(--red);}.theme-pick-locked-badge {  position: absolute;  top: 6px;  right: 6px;  background: var(--red-glow);  border: 1px solid var(--border-red);  color: var(--red-bright);  font-size: 0.6rem;  font-weight: 700;  padding: 2px 6px;  border-radius: 20px;  letter-spacing: 0.02em;}.theme-preview-neon .theme-pick-dot:nth-child(1) {  background: #d946ef;  width: 100%;}.theme-preview-neon .theme-pick-dot:nth-child(2) {  background: rgba(217, 70, 239, .5);  width: 70%;}.theme-preview-neon .theme-pick-dot:nth-child(3) {  background: rgba(99, 102, 241, .4);  width: 45%;}.theme-preview-emerald .theme-pick-dot:nth-child(1) {  background: #34d399;  width: 100%;}.theme-preview-emerald .theme-pick-dot:nth-child(2) {  background: rgba(52, 211, 153, .5);  width: 70%;}.theme-preview-emerald .theme-pick-dot:nth-child(3) {  background: rgba(16, 185, 129, .4);  width: 45%;}.theme-buy-btn {  display: inline-flex;  align-items: center;  gap: 4px;  margin-top: 6px;  padding: 4px 10px;  background: var(--red-glow);  border: 1px solid var(--border-red);  border-radius: 6px;  color: var(--red-bright);  font-size: 0.7rem;  font-weight: 600;  cursor: pointer;  transition: background .2s, box-shadow .2s;  white-space: nowrap;}.theme-buy-btn:hover {  background: var(--red-glow2);  box-shadow: 0 0 10px var(--red-glow);}.theme-buy-btn:disabled {  opacity: 0.45;  cursor: not-allowed;}/* ══════════════════════════════════════════════════════   SPINNER & LOADING   ══════════════════════════════════════════════════════ */.spinner {  width: 28px;  height: 28px;  border: 3px solid var(--border);  border-top-color: var(--red);  border-radius: 50%;  animation: spin .7s linear infinite;}.loading-sm {  display: flex;  justify-content: center;  padding: 40px;}@keyframes spin {  to {    transform: rotate(360deg);  }}/* ══════════════════════════════════════════════════════   TOAST   ══════════════════════════════════════════════════════ */.toast-container {  position: fixed;  bottom: 24px;  left: 24px;  z-index: 1000;  display: flex;  flex-direction: column;  gap: 8px;  pointer-events: none;}.toast {  background: var(--card);  border: 1px solid var(--border);  border-radius: 10px;  padding: 12px 18px;  font-size: 0.875rem;  font-weight: 500;  box-shadow: var(--shadow);  pointer-events: all;  transform: translateX(-100px);  opacity: 0;  transition: background .3s ease, border-color .3s ease, color .3s ease, box-shadow .3s ease;  max-width: 320px;}.toast.show {  transform: translateX(0);  opacity: 1;}.toast-success {  border-color: #22c55e;  color: #22c55e;}.toast-error {  border-color: var(--red);  color: var(--red-bright);}.toast-info {  border-color: #60a5fa;  color: #60a5fa;}/* ══════════════════════════════════════════════════════   FOOTER   ══════════════════════════════════════════════════════ */.footer {  background: var(--bg2);  border-top: 1px solid var(--border);  padding: 40px 24px;  text-align: center;}.footer-inner {  max-width: 600px;  margin: 0 auto;}.footer-brand {  display: flex;  align-items: center;  justify-content: center;  gap: 8px;  font-family: var(--font-head);  font-size: 1.2rem;  font-weight: 700;  margin-bottom: 12px;}.footer-desc {  color: var(--text-muted);  font-size: 0.85rem;  margin-bottom: 16px;}.footer-links {  display: flex;  flex-direction: column;  justify-content: center;  align-items: center;  gap: 12px;}.footer-links a {  color: var(--text-muted);  font-size: 0.85rem;  transition: color var(--transition);}.footer-links a:hover {  color: var(--red-bright);}/* ══════════════════════════════════════════════════════   UTILS   ══════════════════════════════════════════════════════ */.text-muted {  color: var(--text-muted);}.text-center {  text-align: center;}/* ══════════════════════════════════════════════════════   RESPONSIVE   ══════════════════════════════════════════════════════ *//* ── Auth Tabs ── */.auth-tabs {  display: flex;  gap: 4px;  padding: 16px 16px 0;  border-bottom: 1px solid var(--border);  margin: -20px -20px 0;}.auth-tab {  flex: 1;  display: flex;  align-items: center;  justify-content: center;  gap: 6px;  padding: 10px 16px 8px;  background: transparent;  color: var(--text-muted);  border: none;  border-bottom: 3px solid transparent;  border-radius: 8px 8px 0 0;  font-size: 14px;  font-weight: 500;  cursor: pointer;  outline: none;  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);  position: relative;  margin-bottom: -1px;}.auth-tab:hover {  color: var(--text);  background: rgba(239, 68, 68, 0.05);}.auth-tab.active {  color: var(--red-bright);  background: rgba(239, 68, 68, 0.08);  border-bottom-color: var(--red-bright);}.auth-tab:focus {  outline: none;}.auth-tab svg {  width: 16px;  height: 16px;  transition: transform 0.3s ease;}.auth-tab.active svg {  transform: scale(1.1);}.auth-tab-content {  padding: 20px 0 0;}/* ── Link Button ── */.link-btn {  background: none;  border: none;  color: var(--red-bright);  font-size: 13px;  cursor: pointer;  padding: 4px 8px;  transition: var(--t);}.link-btn:hover {  color: var(--text);  text-decoration: underline;}/* ══════════════════════════════════════════════════════   RESPONSIVE   ══════════════════════════════════════════════════════ *//* ── Burger button ─────────────────────────────────────────────────── */.nav-burger {  display: none;  flex-direction: column;  justify-content: center;  gap: 5px;  width: 36px;  height: 36px;  padding: 6px;  background: var(--bg3);  border: 1px solid var(--border);  border-radius: 8px;  cursor: pointer;  order: 99;}.nav-burger span {  display: block;  height: 2px;  background: var(--text-muted);  border-radius: 2px;  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;}.nav-burger.open span:nth-child(1) {  transform: translateY(7px) rotate(45deg);}.nav-burger.open span:nth-child(2) {  opacity: 0;}.nav-burger.open span:nth-child(3) {  transform: translateY(-7px) rotate(-45deg);}@media (max-width: 768px) {  .nav-burger {    display: flex;  }  .nav-links {    display: none;    position: fixed;    top: 62px;    left: 0;    right: 0;    background: rgba(10, 10, 15, 0.98);    backdrop-filter: blur(16px);    border-bottom: 1px solid var(--border);    flex-direction: column;    padding: 12px 16px 20px;    gap: 4px;    z-index: 99;    animation: navSlideDown 0.2s ease;  }  .nav-links.mobile-open {    display: flex;  }  .nav-link {    padding: 12px 16px;    font-size: 1rem;    border-radius: 8px;  }  .nav-link-btn {    text-align: left;    width: 100%;  }  /* Hide username text on small screens, keep avatar + dropdown */  .user-name {    display: none;  }  .user-btn svg {    display: none;  }  .profile-header {    flex-direction: column;    align-items: flex-start;  }  .profile-stats-row {    margin-left: 0;  }  .profile-grid {    grid-template-columns: 1fr;  }  .ref-stats-row {    flex-direction: column;    gap: 8px;  }  .ref-balance-box {    padding: 12px;  }  .ref-balance-value {    font-size: 1.2rem;  }  .design-btn,  .layout-btn {    flex: 1;    min-width: 0;    font-size: 0.85rem;    padding: 10px 12px;  }  .footer-links a {    font-size: 0.8rem;  }  .shop-toolbar {    flex-direction: column;  }  .shop-toolbar-left {    flex-direction: column;    align-items: flex-start;    width: 100%;    gap: 12px;  }  .shop-timer {    width: 100%;    justify-content: space-between;  }  .cart-sidebar {    width: 100%;  }  .payment-methods {    grid-template-columns: 1fr 1fr;  }  .shop-grid {    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));  }  .hero {    padding: 120px 20px 60px;  }  .hero-title {    font-size: 2.5rem;  }  .admin-tabs {    gap: 3px;  }  .admin-tab {    padding: 7px 10px;    font-size: 0.78rem;  }  /* Hide custom cursor on touch devices */  #customCursor {    display: none;  }  *,  *::before,  *::after {    cursor: auto !important;  }}/* ══════════════════════════════════════════════════════   TELEGRAM AUTH MODAL   ══════════════════════════════════════════════════════ */.tg-auth-icon {  font-size: 3rem;  text-align: center;  margin-bottom: 16px;}.tg-auth-desc {  text-align: center;  color: var(--text-muted);  font-size: 0.9rem;  margin-bottom: 20px;  line-height: 1.5;}.tg-auth-steps {  background: var(--bg3);  border: 1px solid var(--border);  border-radius: var(--radius);  padding: 14px 14px 14px 32px;  margin-bottom: 20px;  font-size: 0.875rem;  color: var(--text-muted);  line-height: 1.8;}.tg-auth-steps li {  margin-bottom: 4px;}.tg-auth-steps strong {  color: var(--text);}.tg-open-btn {  gap: 10px;  font-size: 0.95rem;  padding: 13px 20px;}.tg-auth-waiting {  display: flex;  align-items: center;  justify-content: center;  gap: 12px;  padding: 12px;  color: var(--text-muted);  font-size: 0.875rem;}/* Animated pulse dot */.tg-pulse {  width: 10px;  height: 10px;  background: var(--red);  border-radius: 50%;  animation: pulse 1.2s ease-in-out infinite;  flex-shrink: 0;}@keyframes pulse {  0%,  100% {    transform: scale(1);    opacity: 1;  }  50% {    transform: scale(1.6);    opacity: 0.5;  }}.tg-auth-success {  text-align: center;  padding: 20px 0;  animation: fadeUp .4s ease both;}.tg-auth-success p {  margin-bottom: 6px;  font-weight: 600;}/* ══════════════════════════════════════════════════════   CUSTOM CURSOR   ══════════════════════════════════════════════════════ */#customCursor {  position: fixed;  top: 0;  left: 0;  pointer-events: none;  z-index: 99999;  transition: opacity .3s;  /* Isolate cursor in its own compositor layer */  contain: layout style;}.cursor-dot {  position: fixed;  top: -4px;  left: -4px;  width: 8px;  height: 8px;  background: var(--red);  border-radius: 50%;  pointer-events: none;  will-change: transform;  /* Only animate GPU-composited properties */  transition: width .15s, height .15s, background .15s;}.cursor-ring {  position: fixed;  top: -18px;  left: -18px;  width: 36px;  height: 36px;  border: 2px solid rgba(220, 38, 38, 0.6);  border-radius: 50%;  pointer-events: none;  will-change: transform;  transition: border-color .2s;}/* Hover state — dot only, ring scale handled by JS */#customCursor.hovering .cursor-dot {  width: 12px;  height: 12px;  top: -6px;  left: -6px;  background: var(--red-bright);}#customCursor.hovering .cursor-ring {  border-color: rgba(239, 68, 68, 0.8);}/* Click state — dot only, ring scale handled by JS */#customCursor.clicking .cursor-dot {  width: 6px;  height: 6px;  top: -3px;  left: -3px;  background: #fff;}#customCursor.clicking .cursor-ring {  border-color: var(--red-bright);}/* ══════════════════════════════════════════════════════   ITEM CARD ANIMATIONS   ══════════════════════════════════════════════════════ *//* Cards enter with fade+slide — используем translate3d для GPU-ускорения */.item-card {  opacity: 0;  transform: translate3d(0, 12px, 0);  transition:    opacity .25s ease,    transform .25s ease,    border-color var(--transition),    box-shadow var(--transition);}.item-card.visible {  opacity: 1;  transform: translate3d(0, 0, 0);}/* Hover: GPU-слой создаётся только при hover */.item-card:hover {  transform: translate3d(0, -4px, 0);  border-color: var(--red);  box-shadow: 0 8px 24px rgba(220, 38, 38, 0.2), 0 0 0 1px rgba(220, 38, 38, 0.25);  will-change: transform;}/* Image zoom on card hover — GPU через transform3d */.item-img-wrap {  position: relative;  overflow: hidden;  background: var(--bg3);  contain: layout style;}.item-img {  width: 100%;  aspect-ratio: 1;  object-fit: cover;  display: block;  transition: transform .3s ease;  will-change: transform;}.item-card:hover .item-img {  transform: scale3d(1.06, 1.06, 1);}/* Image placeholder */.item-img-placeholder {  width: 100%;  aspect-ratio: 1;  display: flex;  align-items: center;  justify-content: center;  font-size: 3rem;  background: var(--bg3);}/* Add to cart button pulse on hover */.item-add-btn {  background: var(--red);  color: #fff;  border: none;  padding: 7px;  border-radius: 6px;  font-size: 0.8rem;  font-weight: 600;  width: 100%;  transition: background var(--transition), transform .15s, box-shadow .15s;}.item-add-btn:hover {  background: var(--red-bright);  transform: scale(1.03);  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.4);}.item-add-btn:active {  transform: scale(0.97);}.item-add-btn.added {  background: var(--bg3);  color: var(--text-muted);}.item-add-btn.added:hover {  background: var(--bg3);  transform: none;  box-shadow: none;}/* Hours left badge — overlays the image, bottom-right corner */.item-hours {  position: absolute;  bottom: 8px;  right: 8px;  background: rgba(0, 0, 0, 0.65);  border: 1px solid rgba(245, 158, 11, 0.6);  color: #f59e0b;  font-size: 10px;  font-weight: 700;  padding: 2px 8px;  border-radius: 10px;  z-index: 2;  backdrop-filter: blur(4px);  pointer-events: none;}/* ══════════════════════════════════════════════════════   PAGE TRANSITIONS & GENERAL ANIMATIONS   ══════════════════════════════════════════════════════ *//* Navbar slide-down on load */@keyframes navSlideDown {  from {    transform: translateY(-100%);    opacity: 0;  }  to {    transform: translateY(0);    opacity: 1;  }}.navbar {  animation: navSlideDown .35s ease forwards;  /* will-change только на анимации, после убирается автоматически */}/* Hero fade-in */@keyframes heroFadeIn {  from {    opacity: 0;    transform: translate3d(0, 24px, 0);  }  to {    opacity: 1;    transform: translate3d(0, 0, 0);  }}.hero-content {  animation: heroFadeIn .8s ease .1s both;}/* Section reveal */@keyframes fadeUp {  from {    opacity: 0;    transform: translate3d(0, 20px, 0);  }  to {    opacity: 1;    transform: translate3d(0, 0, 0);  }}.shop-section {  animation: fadeUp .6s ease .2s both;}.how-section {  animation: fadeUp .6s ease .3s both;}/* Step cards stagger */.step-card {  animation: fadeUp .5s ease both;}.step-card:nth-child(1) {  animation-delay: .35s;}.step-card:nth-child(2) {  animation-delay: .45s;}.step-card:nth-child(3) {  animation-delay: .55s;}.step-card:nth-child(4) {  animation-delay: .65s;}/* Profile header */.profile-header {  animation: fadeUp .5s ease .1s both;}.profile-card {  animation: fadeUp .5s ease .2s both;}/* Buttons — scale on press */.btn {  transition: background var(--transition), box-shadow var(--transition), transform .12s;}.btn:active {  transform: scale(0.97);}/* Filter buttons — slide indicator */.filter-btn {  position: relative;  overflow: hidden;}.filter-btn::after {  content: '';  position: absolute;  inset: 0;  background: rgba(220, 38, 38, 0.1);  transform: scaleX(0);  transform-origin: left;  transition: transform .2s;}.filter-btn:hover::after {  transform: scaleX(1);}.filter-btn.active::after {  display: none;}/* Admin tabs */.admin-tab {  position: relative;  overflow: hidden;  transition: var(--t), transform .12s;}.admin-tab:active {  transform: scale(0.96);}/* Cart sidebar slide — используем translate3d */.cart-sidebar {  transition: transform .3s cubic-bezier(.4, 0, .2, 1);  will-change: transform;}.cart-item {  animation: fadeUp .3s ease both;}/* Modal scale-in */.modal {  transition: transform .22s cubic-bezier(.25, .46, .45, .94), opacity .2s;}.modal-overlay {  transition: opacity .2s;}/* Toast */.toast {  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), opacity .3s;}/* Spinner */@keyframes spin {  to {    transform: rotate(360deg);  }}.spinner {  animation: spin .7s linear infinite;}/* Glow pulse for hero badge */@keyframes glowPulse {  0%,  100% {    box-shadow: 0 0 8px rgba(220, 38, 38, 0.3);  }  50% {    box-shadow: 0 0 20px rgba(220, 38, 38, 0.6);  }}.hero-badge {  animation: glowPulse 3s ease-in-out infinite;}/* Red line scan on hero */.hero::after {  content: '';  position: absolute;  left: 0;  right: 0;  height: 1px;  background: linear-gradient(90deg, transparent, var(--red), transparent);  bottom: 0;  animation: lineScan 4s ease-in-out infinite;}@keyframes lineScan {  0% {    opacity: 0;    transform: scaleX(0);  }  50% {    opacity: 1;    transform: scaleX(1);  }  100% {    opacity: 0;    transform: scaleX(0);  }}/* Navbar link underline */.nav-link {  position: relative;}.nav-link::after {  content: '';  position: absolute;  bottom: 2px;  left: 50%;  right: 50%;  height: 2px;  background: var(--red);  border-radius: 1px;  transition: left .2s, right .2s;}.nav-link:hover::after,.nav-link.active::after {  left: 8px;  right: 8px;}/* Page header reveal */.page-header {  animation: fadeUp .5s ease .05s both;}/* FAQ answer smooth open */.faq-a {  transition: max-height .35s cubic-bezier(.4, 0, .2, 1), padding .35s ease;}.faq-item {  transition: border-color .2s;}.faq-item.open {  border-color: var(--border-red);}/* ══════════════════════════════════════════════════════   NICK WARNING BLOCK   ══════════════════════════════════════════════════════ *//* ══════════════════════════════════════════════════════   ITEM NAME ROW + WISHLIST HEART   ══════════════════════════════════════════════════════ */.item-name-row {  display: flex;  align-items: flex-start;  gap: 4px;}.item-name-row .item-name {  flex: 1;  min-width: 0;}.item-wish-btn {  background: none;  border: none;  color: var(--text-dim);  font-size: 1rem;  line-height: 1;  cursor: pointer;  padding: 0 2px;  flex-shrink: 0;  transition: color 0.2s, transform 0.15s;}.item-wish-btn:hover {  color: var(--red-bright);  transform: scale(1.2);}.item-wish-btn.wishlisted {  color: var(--red-bright);}/* Friend-only item card (expiring soon but orderable by bot friends) */.item-card-friend-only {  border-color: rgba(245, 158, 11, 0.35);}.item-card-friend-only:hover {  border-color: rgba(245, 158, 11, 0.7);  box-shadow: 0 8px 24px rgba(245, 158, 11, 0.15), 0 0 0 1px rgba(245, 158, 11, 0.25);}.item-friend-badge {  position: absolute;  bottom: 0;  left: 0;  right: 0;  background: rgba(120, 80, 0, 0.88);  color: #facc15;  font-size: 0.72rem;  font-weight: 600;  text-align: center;  padding: 6px;}.item-add-btn-friend {  background: rgba(245, 158, 11, 0.2) !important;  color: #facc15 !important;  border: 1px solid rgba(245, 158, 11, 0.35) !important;}.item-add-btn-friend:hover {  background: rgba(245, 158, 11, 0.35) !important;  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);}/* Friend notice in item detail modal */.item-detail-friend-notice {  background: rgba(245, 158, 11, 0.1);  border: 1px solid rgba(245, 158, 11, 0.3);  border-left: 3px solid #f59e0b;  border-radius: 6px;  padding: 8px 12px;  font-size: 0.78rem;  color: #facc15;  line-height: 1.5;}/* Expiring / wishlist filter pills */.filter-btn-expiring {  color: #facc15 !important;}.filter-btn-expiring.active {  background: rgba(250, 204, 21, 0.15) !important;  border-color: rgba(250, 204, 21, 0.4) !important;  color: #facc15 !important;}.filter-btn-wishlist {  color: var(--red-bright) !important;}.filter-btn-wishlist.active {  background: var(--red-glow) !important;}/* Wishlist item improvements */.wishlist-item {  display: flex;  align-items: center;  gap: 8px;  padding: 8px 16px;  border-bottom: 1px solid var(--border);}.wishlist-item:last-child {  border-bottom: none;}.wishlist-item-name {  font-size: 0.875rem;  color: var(--text);}.wishlist-in-shop-badge {  display: inline-block;  margin-left: 8px;  font-size: 0.7rem;  background: rgba(34, 197, 94, 0.15);  border: 1px solid rgba(34, 197, 94, 0.35);  color: #4ade80;  border-radius: 4px;  padding: 1px 6px;  cursor: pointer;  font-weight: 600;  transition: background 0.2s;}.wishlist-in-shop-badge:hover {  background: rgba(34, 197, 94, 0.25);}/* ══════════════════════════════════════════════════════   ITEM CARD RUB PRICE   ══════════════════════════════════════════════════════ */.item-price-rub {  font-size: 0.75rem;  color: var(--text-muted);  font-weight: 500;  margin-left: auto;}.nick-warning {  background: rgba(220, 38, 38, 0.12);  border: 1px solid rgba(220, 38, 38, 0.4);  border-left: 3px solid var(--red);  border-radius: 6px;  padding: 10px 14px;  font-size: 0.82rem;  color: #f87171;  line-height: 1.5;  margin-top: 8px;  display: flex;  flex-direction: column;  gap: 6px;}.nick-warning p {  margin: 0;}/* ══════════════════════════════════════════════════════   CHECKOUT FAQ HINT   ══════════════════════════════════════════════════════ */.checkout-faq-hint {  text-align: center;  font-size: 0.78rem;  color: var(--text-dim);  margin-top: 10px;}.checkout-faq-hint a {  color: var(--red-bright);}.checkout-support-link {  background: none;  border: none;  color: var(--red-bright);  font-size: inherit;  cursor: pointer;  padding: 0;  text-decoration: underline;}/* ══════════════════════════════════════════════════════   USER DROPDOWN INFO   ══════════════════════════════════════════════════════ */.user-dropdown-info {  padding: 10px 14px 8px;  border-bottom: 1px solid var(--border);  margin-bottom: 4px;}.user-dropdown-stat {  display: flex;  justify-content: space-between;  font-size: 0.78rem;  color: var(--text-muted);  padding: 2px 0;}.user-dropdown-stat span:last-child {  color: var(--text);  font-weight: 600;}/* ══════════════════════════════════════════════════════   HERO COUNTER   ══════════════════════════════════════════════════════ */.hero-counter {  display: inline-flex;  align-items: center;  gap: 8px;  margin-top: 20px;  background: rgba(220, 38, 38, 0.1);  border: 1px solid rgba(220, 38, 38, 0.25);  border-radius: 40px;  padding: 6px 18px;  font-size: 0.88rem;  color: var(--text-muted);}.hero-counter-num {  font-family: var(--font-head);  font-size: 1.25rem;  font-weight: 700;  color: var(--red-bright);}/* ══════════════════════════════════════════════════════   SHOP CONTROLS (search + sort)   ══════════════════════════════════════════════════════ */.shop-controls {  display: flex;  gap: 10px;  align-items: center;  margin-bottom: 12px;  flex-wrap: wrap;}.search-wrap {  position: relative;  flex: 1;  min-width: 180px;}.search-icon {  position: absolute;  left: 10px;  top: 50%;  transform: translateY(-50%);  color: var(--text-dim);  pointer-events: none;}.shop-search {  width: 100%;  background: var(--bg2);  border: 1px solid var(--border);  border-radius: 8px;  color: var(--text);  font-size: 0.875rem;  padding: 8px 12px 8px 32px;  outline: none;  transition: border-color var(--transition);}.shop-search:focus {  border-color: var(--red);}.shop-sort {  background: var(--bg2);  border: 1px solid var(--border);  border-radius: 8px;  color: var(--text-muted);  font-size: 0.85rem;  padding: 8px 12px;  outline: none;  cursor: pointer;  transition: border-color var(--transition);}.shop-sort:focus {  border-color: var(--red);  color: var(--text);}/* Filter bar wraps on mobile */.filter-bar {  flex-wrap: wrap;}/* ══════════════════════════════════════════════════════   ITEM QUICK VIEW OVERLAY   ══════════════════════════════════════════════════════ */.item-quick-view {  position: absolute;  bottom: 0;  left: 0;  right: 0;  background: rgba(10, 10, 15, 0.85);  color: var(--text-muted);  font-size: 0.72rem;  text-align: center;  padding: 6px;  opacity: 0;  transition: opacity 0.2s;}.item-img-wrap:hover .item-quick-view {  opacity: 1;}/* ══════════════════════════════════════════════════════   ITEM DETAIL MODAL   ══════════════════════════════════════════════════════ */.modal-item-detail {  max-width: 700px;  display: flex;  gap: 0;  padding: 0;  overflow: hidden;  position: relative;}.modal-item-detail .modal-close {  position: absolute;  top: 12px;  right: 12px;  z-index: 2;  background: rgba(10, 10, 15, 0.7);  border: 1px solid var(--border);  border-radius: 50%;  width: 32px;  height: 32px;  display: flex;  align-items: center;  justify-content: center;  color: var(--text-muted);  font-size: 1rem;  cursor: pointer;  transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;}.modal-item-detail .modal-close:hover {  background: var(--bg3);  color: var(--text);}.item-detail-img-wrap {  width: 280px;  min-width: 280px;  background: var(--bg2);  display: flex;  align-items: center;  justify-content: center;  overflow: hidden;}.item-detail-img-wrap img {  width: 100%;  height: 100%;  object-fit: cover;}.item-detail-body {  flex: 1;  padding: 28px 24px;  display: flex;  flex-direction: column;  gap: 12px;}.item-detail-category {  font-size: 0.75rem;  text-transform: uppercase;  letter-spacing: 0.1em;  color: var(--red-bright);  font-weight: 600;}.item-detail-name {  font-family: var(--font-head);  font-size: 1.5rem;  font-weight: 700;  color: var(--text);  line-height: 1.2;  margin: 0;}.item-detail-price {  display: flex;  align-items: center;  gap: 6px;  font-family: var(--font-head);  font-size: 1.15rem;  font-weight: 700;  color: var(--text);}.item-detail-rub {  font-size: 0.9rem;  color: var(--text-muted);  font-family: var(--font-body);  font-weight: 400;  margin-left: 4px;}.item-detail-hours {  font-size: 0.8rem;  color: #f59e0b;  background: rgba(245, 158, 11, 0.1);  border: 1px solid rgba(245, 158, 11, 0.25);  border-radius: 6px;  padding: 5px 10px;  display: inline-block;}.item-detail-add-btn {  margin-top: auto;}.item-detail-add-btn.added {  background: var(--bg3);  color: var(--text-muted);}@media (max-width: 600px) {  .modal-item-detail {    flex-direction: column;    max-height: 90vh;    overflow-y: auto;  }  .item-detail-img-wrap {    width: 100%;    min-width: unset;    height: 220px;  }  .item-detail-body {    padding: 18px 16px;  }}/* ══════════════════════════════════════════════════════   REVIEWS SECTION   ══════════════════════════════════════════════════════ */.reviews-section {  padding: 64px 0 80px;}.reviews-section .section-title {  justify-content: center;}.section-sub {  text-align: center;  color: var(--text-muted);  font-size: 0.9rem;  margin-top: -8px;  margin-bottom: 32px;}.reviews-grid {  display: grid;  grid-template-columns: repeat(3, 1fr);  gap: 20px;  max-width: 1000px;  margin: 0 auto;}.review-platform-card {  display: block;  background: var(--bg2);  border: 1px solid var(--border);  border-radius: var(--radius);  padding: 24px;  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;  text-decoration: none;  color: inherit;}.review-platform-card:hover {  border-color: var(--border-red);  transform: translateY(-3px);  box-shadow: 0 8px 24px rgba(220, 38, 38, 0.15);}.review-platform-top {  display: flex;  align-items: center;  gap: 14px;  margin-bottom: 14px;}.review-platform-logo {  width: 44px;  height: 44px;  border-radius: 10px;  display: flex;  align-items: center;  justify-content: center;  font-weight: 800;  font-size: 1.1rem;  flex-shrink: 0;}.review-logo-lolz {  background: linear-gradient(135deg, #1a1a2e, #16213e);  border: 1px solid #3a3a5c;  color: #7c7cff;}.review-logo-tg {  background: linear-gradient(135deg, #0088cc, #005f99);  color: #fff;}.review-platform-name {  font-weight: 700;  font-size: 1rem;  color: var(--text);}.review-platform-sub {  font-size: 0.75rem;  color: var(--text-dim);  margin-top: 2px;}.review-platform-desc {  font-size: 0.82rem;  color: var(--text-muted);  line-height: 1.5;  margin-bottom: 14px;}.review-platform-cta {  font-size: 0.82rem;  color: var(--red-bright);  font-weight: 600;}@media (max-width: 600px) {  .reviews-grid {    grid-template-columns: 1fr;  }  .shop-controls {    flex-direction: column;  }  .search-wrap {    min-width: unset;  }  .shop-sort {    width: 100%;  }}/* ══════════════════════════════════════════════════════   ITEM DETAIL MODAL — DESKTOP (≥601px)   ══════════════════════════════════════════════════════ */.modal-item-detail {  max-width: min(780px, 92vw);  width: 780px;  /* Дать модалке свободно расти по высоте, но не выходить за экран */  max-height: 90vh;  overflow: visible;  /* overflow управляется внутри */}/* Desktop image column */@media (min-width: 601px) {  .item-detail-img-wrap {    width: 300px;    min-width: 300px;    /* Убираем max-height — пусть растёт под контент */    flex-shrink: 0;    align-self: stretch;    display: flex;    align-items: center;    justify-content: center;    overflow: hidden;    min-height: 300px;  }  .item-detail-img-wrap img,  #itemDetailImg {    width: 100%;    height: 100%;    object-fit: cover;    border-radius: 0;  }  .item-detail-body {    min-height: 0;    justify-content: flex-start;    /* Скролл внутри body если текста очень много */    overflow-y: auto;    max-height: 90vh;  }}/* Mobile: stack vertically */@media (max-width: 600px) {  .modal-item-detail {    flex-direction: column;    max-height: 92vh;    overflow-y: auto;  }  .item-detail-img-wrap {    width: 100%;    min-width: unset;    height: 240px;    flex-shrink: 0;    display: flex;    align-items: center;    justify-content: center;    overflow: hidden;  }  #itemDetailImg {    width: 100%;    height: 100%;    max-height: 240px;    object-fit: contain;    border-radius: 0;  }}/* ══════════════════════════════════════════════════════   BUNDLE AND INVENTORY WARNINGS   ══════════════════════════════════════════════════════ */.bundle-warning-box {  background: linear-gradient(135deg, rgba(220, 38, 38, 0.15), rgba(220, 38, 38, 0.05));  border: 2px solid var(--red);  border-radius: var(--radius-lg);  padding: 20px;  margin-bottom: 20px;  animation: pulse-border 2s ease-in-out infinite;}@keyframes pulse-border {  0%,  100% {    border-color: var(--red);    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4);  }  50% {    border-color: var(--red-bright);    box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.1);  }}.bundle-warning-header {  display: flex;  align-items: center;  gap: 10px;  margin-bottom: 12px;  font-size: 1.1rem;  color: var(--red-bright);}.bundle-warning-icon {  font-size: 1.5rem;  animation: shake 0.5s ease-in-out infinite;}@keyframes shake {  0%,  100% {    transform: rotate(0deg);  }  25% {    transform: rotate(-5deg);  }  75% {    transform: rotate(5deg);  }}.bundle-warning-box p {  margin: 8px 0;  font-size: 0.95rem;  line-height: 1.5;  color: var(--text);}.bundle-items-list {  margin: 12px 0;}.bundle-confirm-checkbox {  display: flex;  align-items: flex-start;  gap: 10px;  margin-top: 16px;  padding: 12px;  background: rgba(0, 0, 0, 0.3);  border-radius: var(--radius);  cursor: pointer;  transition: background var(--transition);}.bundle-confirm-checkbox:hover {  background: rgba(0, 0, 0, 0.4);}.bundle-confirm-checkbox input[type="checkbox"] {  width: 20px;  height: 20px;  margin-top: 2px;  cursor: pointer;  accent-color: var(--red);}.bundle-confirm-checkbox span {  flex: 1;  font-size: 0.95rem;  font-weight: 600;  color: var(--text);  line-height: 1.4;}.inventory-warning-box {  background: rgba(220, 38, 38, 0.08);  border-left: 4px solid var(--red);  border-radius: var(--radius);  padding: 12px 16px;  margin-bottom: 16px;}.inventory-warning-box p {  margin: 0;  font-size: 0.9rem;  color: var(--text-muted);  line-height: 1.5;}@media (max-width: 768px) {  .bundle-warning-box {    padding: 16px;  }  .bundle-warning-header {    font-size: 1rem;  }  .bundle-warning-box p {    font-size: 0.88rem;  }  .bundle-confirm-checkbox span {    font-size: 0.88rem;  }}

/* ══════════════════════════════════════════════════════
   VALORANT POINTS — отдельная страница /valorant
   Стилистика Valorant: Anton (display) + Oswald, угловатость,
   красный акцент, наследует тему сайта.
   ══════════════════════════════════════════════════════ */
:root {
  --vp-red: #ff4655;
  --vp-red-2: #ff5e6c;
  --vp-red-soft: rgba(255, 70, 85, 0.10);
  --vp-red-line: rgba(255, 70, 85, 0.35);
  --vp-radius: 4px;
  --vp-font-display: 'Anton', 'Oswald', 'Rajdhani', sans-serif;
  --vp-font-head:    'Oswald', 'Rajdhani', sans-serif;
}

/* Wrapper — все Valorant правила скоупим под .vp-page,
   чтобы не повлиять на остальной сайт */
.vp-page {
  --radius: var(--vp-radius);
}

/* Nav link — красная точка Valorant */
.nav-link-valorant {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  font-family: var(--vp-font-head) !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.nav-valorant-dot {
  width: 6px;
  height: 6px;
  background: var(--vp-red);
  box-shadow: 0 0 8px rgba(255, 70, 85, 0.6);
  flex-shrink: 0;
  /* острый ромб вместо круга — отсылка к Valorant logo */
  transform: rotate(45deg);
}

/* ── HERO ─────────────────────────────────────────── */
.vp-hero {
  position: relative;
  padding: 88px 0 64px;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
  background:
    linear-gradient(115deg, transparent 0%, transparent 55%, var(--vp-red-soft) 100%),
    var(--bg);
}
.vp-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 90% 10%, rgba(255, 70, 85, 0.18) 0%, transparent 45%),
    radial-gradient(circle at 5% 85%, rgba(255, 70, 85, 0.08) 0%, transparent 45%);
  pointer-events: none;
}
.vp-hero-inner {
  position: relative;
  max-width: 720px;
  border-left: 2px solid var(--vp-red);
  padding-left: 28px;
}

.vp-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 5px 12px;
  font-family: var(--vp-font-head);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vp-red);
  background: var(--vp-red-soft);
  border: 1px solid var(--vp-red-line);
  border-radius: 0;
}
.vp-dot {
  width: 6px;
  height: 6px;
  background: var(--vp-red);
  transform: rotate(45deg);
  animation: vpPulse 2s ease-in-out infinite;
}
@keyframes vpPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.vp-hero-title {
  font-family: var(--vp-font-display);
  font-weight: 400;
  font-size: clamp(3rem, 8vw, 5.6rem);
  line-height: 0.92;
  letter-spacing: 0.01em;
  margin: 26px 0 22px;
  color: var(--text);
  text-transform: uppercase;
}
.vp-hero-title .vp-accent {
  color: var(--vp-red);
}

.vp-hero-sub {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text-muted);
  max-width: 560px;
  margin: 0 0 36px;
}
.vp-hero-sub b {
  color: var(--text);
  font-weight: 600;
}

.vp-hero-stats {
  display: flex;
  gap: 36px;
  flex-wrap: wrap;
}
.vp-stat-num {
  font-family: var(--vp-font-display);
  font-weight: 400;
  font-size: 1.7rem;
  letter-spacing: 0.02em;
  color: var(--text);
  text-transform: uppercase;
}
.vp-stat-label {
  font-family: var(--vp-font-head);
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-top: 4px;
}

/* ── SECTION TITLES ──────────────────────────────── */
.vp-page .vp-section-title {
  font-family: var(--vp-font-display);
  font-weight: 400;
  font-size: clamp(1.8rem, 3.5vw, 2.4rem);
  letter-spacing: 0.04em;
  color: var(--text);
  text-transform: uppercase;
  line-height: 1;
  position: relative;
  padding-left: 14px;
  margin: 0;
}
.vp-page .vp-section-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6%;
  bottom: 6%;
  width: 3px;
  background: var(--vp-red);
}
.vp-section {
  padding: 80px 0 72px;
}
.vp-section-head {
  margin-bottom: 36px;
}
.vp-section-sub {
  margin: 12px 0 0;
  color: var(--text-muted);
  font-size: 0.95rem;
}

/* ── PACKAGE GRID ────────────────────────────────── */
.vp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}

/* ── CARD ────────────────────────────────────────── */
.vp-card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--vp-radius);
  padding: 26px 22px 22px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
  overflow: hidden;
}
/* угол-обрезка как в Valorant UI */
.vp-card-corner {
  position: absolute;
  top: 0;
  right: 0;
  width: 14px;
  height: 14px;
  background: var(--vp-red);
  clip-path: polygon(100% 0, 100% 100%, 0 0);
  transition: width 0.18s ease, height 0.18s ease;
}
.vp-card:hover {
  transform: translateY(-2px);
  border-color: var(--vp-red);
  background: var(--card-hover);
}
.vp-card:hover .vp-card-corner {
  width: 22px;
  height: 22px;
}

.vp-card-icon {
  color: var(--vp-red);
  margin-bottom: 16px;
  opacity: 0.9;
}

.vp-card-amount {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
}
.vp-amount-num {
  font-family: var(--vp-font-display);
  font-weight: 400;
  font-size: 2.2rem;
  color: var(--text);
  letter-spacing: 0.01em;
  line-height: 1;
  text-transform: uppercase;
}
.vp-amount-label {
  font-family: var(--vp-font-head);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--text-muted);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.vp-card-region {
  font-family: var(--vp-font-head);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--text-muted);
  text-transform: uppercase;
  margin: 4px 0 18px;
  padding: 3px 0 3px 10px;
  border-left: 2px solid var(--vp-red);
}

.vp-card-price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 18px;
  margin-top: auto;
}
.vp-price-num {
  font-family: var(--vp-font-display);
  font-weight: 400;
  font-size: 1.7rem;
  color: var(--text);
  letter-spacing: 0.01em;
}
.vp-price-cur {
  font-family: var(--vp-font-head);
  font-size: 1rem;
  color: var(--text-muted);
}

.vp-card-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 44px;
  padding: 0 16px;
  border: none;
  border-radius: var(--vp-radius);
  background: var(--vp-red);
  color: #fff;
  font-family: var(--vp-font-head);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  transition: background 0.15s ease, transform 0.15s ease, letter-spacing 0.15s ease;
}
.vp-card-btn:hover {
  background: var(--vp-red-2);
  letter-spacing: 0.2em;
}
.vp-card-btn:active {
  transform: translateY(1px);
}

/* ── HOW IT WORKS ────────────────────────────────── */
.vp-how {
  padding: 72px 0 96px;
  border-top: 1px solid var(--border);
  background: var(--bg2);
}
.vp-steps {
  margin-top: 36px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.vp-step {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--vp-radius);
  padding: 26px 22px;
  position: relative;
}
.vp-step::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 28px;
  height: 2px;
  background: var(--vp-red);
}
.vp-step-num {
  font-family: var(--vp-font-display);
  font-weight: 400;
  font-size: 1.1rem;
  color: var(--vp-red);
  letter-spacing: 0.06em;
  margin-bottom: 12px;
  text-transform: uppercase;
}
.vp-step h3 {
  font-family: var(--vp-font-head);
  font-weight: 700;
  font-size: 1rem;
  margin: 0 0 10px;
  color: var(--text);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.vp-step p {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0;
}

/* ── CHECKOUT MODAL ──────────────────────────────── */
.vp-modal {
  max-width: 460px;
}
.vp-modal-title {
  font-family: var(--vp-font-display);
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0;
}

.vp-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
  background: linear-gradient(115deg, var(--vp-red-soft) 0%, transparent 100%);
  border: 1px solid var(--vp-red-line);
  border-left: 3px solid var(--vp-red);
  border-radius: var(--vp-radius);
  margin-bottom: 22px;
}
.vp-summary-amount {
  font-family: var(--vp-font-display);
  font-weight: 400;
  font-size: 1.7rem;
  color: var(--text);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.vp-summary-region {
  font-family: var(--vp-font-head);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-top: 4px;
}
.vp-summary-price {
  font-family: var(--vp-font-display);
  font-weight: 400;
  font-size: 1.9rem;
  color: var(--vp-red);
  letter-spacing: 0.01em;
}

.vp-page .vp-label {
  display: block;
  font-family: var(--vp-font-head);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.vp-payments {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.vp-pay-option {
  cursor: pointer;
  display: block;
}
.vp-pay-option input {
  display: none;
}
.vp-pay-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--vp-radius);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.vp-pay-option input:checked + .vp-pay-card {
  border-color: var(--vp-red);
  background: var(--vp-red-soft);
  box-shadow: inset 3px 0 0 var(--vp-red);
}
.vp-pay-icon {
  font-size: 1.3rem;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: var(--vp-radius);
  background: var(--card);
  color: var(--text);
}
.vp-pay-name {
  font-family: var(--vp-font-head);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.vp-pay-sub {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 3px;
}

.vp-warning {
  background: rgba(251, 191, 36, 0.08);
  border-left: 3px solid rgba(251, 191, 36, 0.5);
  border-radius: var(--vp-radius);
  color: var(--text-muted);
  padding: 12px 14px;
  font-size: 0.85rem;
  line-height: 1.55;
  margin: 22px 0 18px;
}
.vp-warning b {
  color: var(--text);
}

.vp-page .vp-submit-btn,
.vp-page .vp-submit-btn.btn.btn-primary {
  font-family: var(--vp-font-head);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: var(--vp-red);
  color: #fff;
  border: none;
  border-radius: var(--vp-radius);
  height: 48px;
  transition: background 0.15s ease, letter-spacing 0.15s ease;
}
.vp-page .vp-submit-btn:hover:not(:disabled) {
  background: var(--vp-red-2);
  letter-spacing: 0.22em;
}
.vp-page .vp-submit-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.vp-result {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: var(--vp-radius);
  font-size: 0.9rem;
  line-height: 1.55;
}
.vp-result a {
  color: var(--vp-red);
  text-decoration: underline;
}
.vp-result code {
  font-family: 'Courier New', monospace;
  background: var(--bg3);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 0.9em;
}
.vp-result-success {
  background: rgba(16, 185, 129, 0.08);
  border-left: 3px solid rgba(16, 185, 129, 0.6);
  color: var(--text);
}
.vp-result-error {
  background: rgba(220, 38, 38, 0.08);
  border-left: 3px solid rgba(220, 38, 38, 0.6);
  color: var(--text);
}

@media (max-width: 768px) {
  .vp-hero {
    padding: 56px 0 44px;
  }
  .vp-hero-inner {
    padding-left: 18px;
  }
  .vp-hero-stats {
    gap: 22px;
  }
  .vp-section {
    padding: 56px 0 48px;
  }
  .vp-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
  }
  .vp-card {
    padding: 22px 16px 16px;
  }
  .vp-amount-num {
    font-size: 1.85rem;
  }
  .vp-how {
    padding: 56px 0 72px;
  }
}


/* Epic nick  fallback help (UUID / external accounts) */
.nick-help {
  margin-top: 8px;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.nick-help summary {
  cursor: pointer;
  padding: 6px 0;
  user-select: none;
  color: var(--text-muted);
  transition: color 0.15s ease;
}
.nick-help summary:hover {
  color: var(--text);
}
.nick-help[open] summary {
  color: var(--text);
}
.nick-help-body {
  margin-top: 8px;
  padding: 12px 14px;
  background: var(--bg3);
  border-left: 3px solid var(--vp-red, #ff4655);
  border-radius: 4px;
  line-height: 1.55;
}
.nick-help-body p {
  margin: 0 0 8px;
}
.nick-help-body ul {
  margin: 6px 0 8px;
  padding-left: 18px;
}
.nick-help-body li {
  margin-bottom: 4px;
}
.nick-help-body code {
  font-family: 'Courier New', monospace;
  background: var(--card);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 0.88em;
  color: var(--text);
}
.nick-help-body a {
  color: var(--vp-red, #ff4655);
  text-decoration: underline;
}
.nick-help-note {
  font-size: 0.8rem;
  color: var(--text-dim);
  margin: 8px 0 0;
}