/* === 1. Глобальные переменные === */
:root {
    /* Цвета */
    --bg-color: #050505;
    --text-main: #ffffff;
    --text-muted: rgba(255, 255, 255, 0.5);
    
    --color-red: #ef4444;
    --color-red-glow: rgba(239, 68, 68, 0.4);
    --color-green: #22c55e;
    --color-green-glow: rgba(34, 197, 94, 0.2);
    --color-yellow: #eab308;
    --color-orange: #f97316;
    --color-blue: #3b82f6;

    /* Стекломорфизм (Glassmorphism) */
    --glass-bg: rgba(20, 20, 20, 0.75);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-blur: blur(16px);
    
    /* Z-Index (Слои) */
    --z-map: 0;
    --z-ui: 1000;
    --z-modal: 2000;
    --z-lock: 9999;
}

/* === 2. Сброс и База === */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    user-select: none; /* Защита от выделения текста на тачскринах */
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-main);
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}

/* Утилиты */
.hidden { display: none !important; opacity: 0; pointer-events: none; }
.text-danger { color: var(--color-red) !important; }
.text-warning { color: var(--color-yellow) !important; }
.text-success { color: var(--color-green) !important; }

/* === 3. Анимации === */
@keyframes shimmer { 
    0% { background-position: -200% 0; } 
    100% { background-position: 200% 0; } 
}

@keyframes pulse-dot { 
    0% { opacity: 1; transform: scale(1); } 
    50% { opacity: 0.4; transform: scale(0.8); } 
    100% { opacity: 1; transform: scale(1); } 
}

@keyframes breathe-red { 
    0% { box-shadow: 0 0 0 0 var(--color-red-glow); border-color: rgba(239, 68, 68, 0.3); } 
    50% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); border-color: var(--color-red); } 
    100% { box-shadow: 0 0 0 0 var(--color-red-glow); border-color: rgba(239, 68, 68, 0.3); } 
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}
.shake-anim { animation: shake 0.4s ease-in-out; }

/* Скелетон (Загрузка) */
.skeleton {
    background: linear-gradient(90deg, #1a1a1a 25%, #222 50%, #1a1a1a 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    color: transparent !important;
    border-radius: 8px;
    pointer-events: none;
}