/* === variables.css === */
/**
* Глобальные CSS-переменные и базовые стили проекта (Тема: Киберпанк / ВикСейл)
* Извлечено из исходный макет и адаптировано под архитектуру проекта
*/
/* === ГЛОБАЛЬНЫЙ СБРОС (CSS RESET) === */
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
/* === ЦВЕТА ДОНОРА (КИБЕРПАНК) === */
--primary: #6C63FF;
--secondary: #FF6584;
--accent: #00D9FF;
--gold: #FFD700;
--bg-primary: #1e1e3a;
--bg-secondary: #252550;
--bg-card: #2e2e5a;
--bg-elevated: #383870;
--bg-glass: rgba(40, 40, 80, 0.6);
--neon-cyan: #94adae;
--neon-pink: #ff00ff;
--neon-purple: #bf00ff;
--neon-green: #00ff88;
--brand-orange: #ff6b35;
--brand-cream: #f7c59f;
--brand-violet: #8b5cf6;
--brand-sky: #94adae;
--text-primary: #f0f0ff;
--text-secondary: rgba(240, 240, 255, 0.75);
--text-muted: rgba(240, 240, 255, 0.5);
/* === СТАНДАРТНЫЕ ПЕРЕМЕННЫЕ ПРОЕКТА (АЛИАСЫ) === */
--color-primary: var(--primary);
--color-secondary: var(--secondary);
--color-bg: var(--bg-primary);
--color-text: var(--text-primary);
/* === ТИПОГРАФИКА === */
--font-main: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--font-heading: 'Inter', sans-serif;
--font-mono: 'JetBrains Mono', monospace;
--font-size-base: 16px;
/* === ОТСТУПЫ И РАДИУСЫ === */
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-xl: 24px;
--radius-full: 9999px;
--spacing-xs: 4px;
--spacing-sm: 8px;
--spacing-md: 16px;
--spacing-lg: 32px;
--spacing-xl: 64px;
/* === ТЕНИ И ЭФФЕКТЫ === */
--shadow-elevated: 0 8px 32px rgba(0, 0, 0, 0.3);
--card-glow: 0 0 15px rgba(0, 243, 255, 0.04), 0 2px 8px rgba(0, 0, 0, 0.2);
--card-glow-h: 0 0 20px rgba(0, 243, 255, 0.12), 0 4px 16px rgba(0, 0, 0, 0.3);
--glow-cyan: 0 0 5px rgba(0, 243, 255, 0.2), 0 0 12px rgba(0, 243, 255, 0.1);
--glow-cyan-h: 0 0 8px rgba(0, 243, 255, 0.3), 0 0 20px rgba(0, 243, 255, 0.15), 0 0 35px rgba(0, 243, 255, 0.08);
--glow-pink: 0 0 5px rgba(255, 0, 255, 0.2), 0 0 12px rgba(255, 0, 255, 0.1);
--glow-pink-h: 0 0 8px rgba(255, 0, 255, 0.3), 0 0 20px rgba(255, 0, 255, 0.15);
--glow-gold: 0 0 5px rgba(255, 215, 0, 0.2), 0 0 12px rgba(255, 215, 0, 0.1);
--glow-gold-h: 0 0 8px rgba(255, 215, 0, 0.3), 0 0 20px rgba(255, 215, 0, 0.15);
--glow-brand: 0 0 5px rgba(255, 107, 53, 0.2), 0 0 12px rgba(255, 107, 53, 0.1);
--glow-brand-h: 0 0 8px rgba(255, 107, 53, 0.3), 0 0 20px rgba(139, 92, 246, 0.15);
--glow-green: 0 0 5px rgba(0, 255, 136, 0.2), 0 0 12px rgba(0, 255, 136, 0.1);
/* === АНИМАЦИИ И ПЕРЕХОДЫ === */
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
--transition-base: all 0.3s var(--ease-smooth);
/* === КОНТЕЙНЕР === */
--max-width-site: 1440px;
--container-max: 1440px;
--container-padding: 0 clamp(16px, 4vw, 48px);
}
/* === БАЗОВЫЕ СТИЛИ ТЕЛА СТРАНИЦЫ И ЭЛЕМЕНТОВ === */
html {
scroll-behavior: smooth;
scrollbar-width: thin;
scrollbar-color: var(--neon-cyan) var(--bg-primary);
}
body {
margin: 0; /* Убираем стандартный отступ браузера (8px) */
background-color: var(--bg-primary);
color: var(--text-primary);
font-family: var(--font-main);
line-height: 1.6;
min-height: 100vh;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
position: relative;
}
a {
color: inherit;
text-decoration: none;
}
img {
max-width: 100%;
display: block;
}
button {
font-family: inherit;
cursor: pointer;
}
/* Кастомный скроллбар */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: var(--bg-primary);
}
::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, var(--neon-cyan), var(--neon-pink));
border-radius: var(--radius-full);
}
/* Стиль выделенного текста */
::selection {
background: rgba(108, 99, 255, 0.4);
color: #fff;
}

/* === СВЕТЛАЯ ТЕМА (LIGHT THEME) === */
body.light-theme {
    --bg-primary: #f4f7ff;
    --bg-secondary: #ffffff;
    --bg-card: #ffffff;
    --bg-elevated: #eef3ff;
    --bg-glass: rgba(255, 255, 255, 0.78);
    
    --text-primary: #17182f;
    --text-secondary: rgba(23, 24, 47, 0.76);
    --text-muted: rgba(23, 24, 47, 0.52);
    
    --shadow-elevated: 0 10px 34px rgba(78, 91, 140, 0.18);
    
    color: var(--text-primary);
    background: radial-gradient(circle at 15% 5%, rgba(139, 92, 246, .12), transparent 30%),
                radial-gradient(circle at 85% 12%, rgba(0, 137, 94, .10), transparent 32%),
                linear-gradient(135deg, #f4f7ff 0%, #f8fbff 48%, #eef6ff 100%);
}

/* === ДОПОЛНИТЕЛЬНЫЕ АНИМАЦИИ (ЛИЧНЫЙ КАБИНЕТ И VIP) === */
@keyframes starPulse { 0%, 100% { text-shadow: 0 0 4px rgba(255, 215, 0, 0.2); } 50% { text-shadow: 0 0 12px rgba(255, 215, 0, 0.5); } }
@keyframes slideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulseVerify { 0%, 100% { box-shadow: 0 0 0 rgba(0, 255, 136, 0.4); } 50% { box-shadow: 0 0 20px rgba(0, 255, 136, 0.6); } }
@keyframes neonTabPulse { 0%, 100% { box-shadow: 0 4px 15px rgba(0, 243, 255, 0.0); } 50% { box-shadow: 0 4px 20px rgba(0, 243, 255, 0.25), 0 0 40px rgba(0, 243, 255, 0.1); } }
@keyframes shieldPulseYellow { 0%, 100% { filter: drop-shadow(0 0 5px rgba(255, 204, 0, 0.5)); } 50% { filter: drop-shadow(0 0 10px rgba(255, 204, 0, 0.9)); } }
@keyframes shieldPulseGreen { 0%, 100% { filter: drop-shadow(0 0 8px rgba(0, 255, 136, 0.6)); } 50% { filter: drop-shadow(0 0 16px rgba(0, 255, 136, 1)); } }
@keyframes shieldGreenShine { 0% { transform: translateX(-130%) rotate(18deg); opacity: 0; } 20%, 70% { opacity: .9; } 100% { transform: translateX(170%) rotate(18deg); opacity: 0; } }
@keyframes walletGreenShine { 0%, 100% { box-shadow: 0 0 8px rgba(0, 255, 136, 0.24), 0 0 18px rgba(0, 255, 136, 0.12); } 50% { box-shadow: 0 0 16px rgba(0, 255, 136, 0.48), 0 0 34px rgba(0, 255, 136, 0.22); } }
@keyframes walletRedShine { 0%, 100% { box-shadow: 0 0 8px rgba(255, 82, 82, 0.25), 0 0 18px rgba(255, 82, 82, 0.10); } 50% { box-shadow: 0 0 16px rgba(255, 82, 82, 0.48), 0 0 34px rgba(255, 82, 82, 0.20); } }
@keyframes ripple { 0% { transform: scale(0); opacity: 0.6; } 100% { transform: scale(4); opacity: 0; } }
@keyframes crownFloat { 0%, 100% { transform: translateY(0) rotate(-5deg); } 50% { transform: translateY(-4px) rotate(5deg); } }
@keyframes sparkle { 0% { background-position: -200% center; opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { background-position: 300% center; opacity: 0; } }
@keyframes vipSparkle { 0% { background-position: -200% center; opacity: 0; } 15% { opacity: 0.8; } 85% { opacity: 0.8; } 100% { background-position: 300% center; opacity: 0; } }
@keyframes btnPress { 0% { transform: scale(1); } 50% { transform: scale(0.95); } 100% { transform: scale(1); } }
@keyframes deleteHover { 0% { box-shadow: none; } 100% { box-shadow: 0 0 12px rgba(255, 50, 50, 0.5), 0 0 24px rgba(255, 50, 50, 0.2); } }
@keyframes vipPulse { 0%, 100% { box-shadow: var(--glow-gold); } 50% { box-shadow: 0 0 10px rgba(255, 215, 0, .32), 0 0 24px rgba(255, 107, 53, .18); } }
@keyframes supportShine { 0%, 45% { transform: translateX(-120%); } 70%, 100% { transform: translateX(120%); } }
/* ==========================================================================
   СВЕТЛАЯ ТЕМА — ДОПОЛНИТЕЛЬНОЕ ПЕРЕОПРЕДЕЛЕНИЕ (2026-09)
   Причина: неоновые цвета (#94adae, #ff00ff и т.п.), рассчитанные на тёмный
   фон, на светлом фоне нечитаемы. Здесь заменяем их на насыщенные тёмные
   аналоги, которые сохраняют фирменный характер (cyan → синий, pink → малина,
   purple → фиолетовый, green → изумруд) и дают достаточный контраст.
   Свечения (glow-*) на светлом фоне смотрятся грязно — заменяем на мягкие тени.
   ========================================================================== */

body.light-theme {
  /* яркие неоны → насыщенные тёмные аналоги, читаемые на светлом фоне */
  --primary:      #5b52e0;
  --secondary:    #be123c;
  --accent:       #0369a1;
  --gold:         #b45309;

  --neon-cyan:    #0369a1;
  --neon-pink:    #be185d;
  --neon-purple:  #6d28d9;
  --neon-green:   #047857;

  --brand-orange: #c2410c;
  --brand-violet: #6d28d9;
  --brand-sky:    #0369a1;

  /* свечения → мягкие тени под светлую тему */
  --glow-cyan:    0 0 0 transparent;
  --glow-cyan-h:  0 2px 12px rgba(3, 105, 161, 0.18);
  --glow-pink:    0 0 0 transparent;
  --glow-pink-h:  0 2px 12px rgba(190, 24, 93, 0.18);
  --glow-gold:    0 0 0 transparent;
  --glow-gold-h:  0 2px 12px rgba(180, 83, 9, 0.18);
  --glow-green:   0 0 0 transparent;
  --glow-brand:   0 0 0 transparent;
  --glow-brand-h: 0 2px 12px rgba(194, 65, 12, 0.18);

  --card-glow:    0 2px 8px rgba(23, 24, 47, 0.06);
  --card-glow-h:  0 6px 18px rgba(23, 24, 47, 0.10);
}

/* Ссылки по умолчанию тоже не должны использовать яркий cyan */
body.light-theme a {
  color: inherit;
}
body.light-theme a:visited {
  color: inherit;
}
/* ==========================================================================
   Manrope-first (палитра и типографика как в образцах /1234)
   Перебивает Inter-дефолт более высокой спецификой.
   ========================================================================== */
html body {
  --font-main:    'Manrope','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-heading: 'Manrope','Inter',sans-serif;
}
body {
  font-family: var(--font-main);
}
h1, h2, h3, h4, h5, h6,
.page-title, .cabinet-pagehead__title, .cabinet-card__title,
.cabinet-toolbar__title, .stat-card__num {
  font-family: var(--font-heading);
}