/*
 * Design tokens — единый источник стилей для всех страниц.
 * Подключается первым в каждом HTML-файле.
 */

:root {
  /* ── Фоны ──────────────────────────────────────────────────── */
  --bg:           #02030a;
  --bg2:          #050616;
  --bg3:          #0a0c1a;
  --card:         #0b0c18;
  --card2:        #111222;

  /* ── Акценты ───────────────────────────────────────────────── */
  --accent:       #ff9900;
  --accent2:      #ff4b00;
  --accent3:      #ffdd99;

  /* ── Граница / текст ───────────────────────────────────────── */
  --border:       #262637;
  --border2:      #2f2f45;
  --text:         #f5f5f5;
  --muted:        #9a9ab5;

  /* ── Статусы ───────────────────────────────────────────────── */
  --danger:       #ff3366;
  --ok:           #3bd16f;

  /* ── Стекло ────────────────────────────────────────────────── */
  --glass:        rgba(10, 10, 25, 0.82);
  --glass-strong: rgba(10, 10, 25, 0.96);

  /* ── Тени ──────────────────────────────────────────────────── */
  --shadow:       0 0 20px rgba(255, 153, 0, 0.15);
  --shadow-hover: 0 0 30px rgba(255, 153, 0, 0.30);

  /* ── Анимация ──────────────────────────────────────────────── */
  --transition:   0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

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

/* ── Scrollbar ───────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg2); border-radius: 4px; }
::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent2); }

/* ── Background helpers ──────────────────────────────────────── */
.bg-orbit {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(circle at   0%   0%, rgba(255,255,255,0.08) 0, transparent 55%),
    radial-gradient(circle at 100%   0%, rgba(255,153,  0,0.18) 0, transparent 55%),
    radial-gradient(circle at   0% 100%, rgba(  0,180,255,0.18) 0, transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(255, 75,  0,0.18) 0, transparent 55%);
  opacity: 0.7;
  filter: blur(4px);
  pointer-events: none;
  animation: orbitPulse 18s ease-in-out infinite alternate;
}

.bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.4;
  mix-blend-mode: screen;
  pointer-events: none;
  animation: gridDrift 40s linear infinite;
}

.bg-lines {
  position: absolute;
  inset: 0;
  background:
    linear-gradient( 120deg, rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(-120deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 220px 220px;
  opacity: 0.25;
  mix-blend-mode: screen;
  pointer-events: none;
  animation: linesDrift 60s linear infinite;
}

@keyframes orbitPulse { 0% { transform: scale(1); }    100% { transform: scale(1.05); } }
@keyframes gridDrift  { 0% { transform: translate(0,0); } 100% { transform: translate(-40px,-40px); } }
@keyframes linesDrift { 0% { transform: translate(0,0); } 100% { transform: translate(80px,40px); } }