/**
 * Solo Leveling — Registration / System UI
 * Полупрозрачные панели · синее/фиолетовое свечение · glass HUD
 */

:root {
    --sl-blue: #4a9eff;
    --sl-blue-bright: #7ec8ff;
    --sl-blue-rgb: 74, 158, 255;
    --sl-purple: #8b6bff;
    --sl-purple-rgb: 139, 107, 255;
    --sl-panel: rgba(10, 16, 36, 0.52);
    --sl-panel-deep: rgba(6, 10, 24, 0.72);
    --sl-border: rgba(126, 200, 255, 0.38);
    --sl-glow: rgba(74, 158, 255, 0.42);
    --sl-glow-purple: rgba(139, 107, 255, 0.32);
    --sl-text: #e8f2ff;
    --sl-text-dim: #8fa8c8;
    --sl-gold: #f0d060;
    --sl-danger: #ff4d6d;
    --sl-success: #5dffb0;
}

/* ── Фон экрана регистрации ── */
#login-screen.login-register-active {
    background:
        radial-gradient(ellipse 90% 55% at 50% -5%, rgba(var(--sl-blue-rgb), 0.16), transparent 58%),
        radial-gradient(ellipse 50% 45% at 92% 88%, rgba(var(--sl-purple-rgb), 0.14), transparent 52%),
        radial-gradient(ellipse 40% 35% at 8% 75%, rgba(var(--sl-purple-rgb), 0.08), transparent 48%),
        linear-gradient(180deg, #04060e 0%, #0a1022 42%, #060912 100%) !important;
}

#login-screen.login-register-active::before {
    background:
        radial-gradient(circle at 50% 40%, rgba(var(--sl-blue-rgb), 0.11) 0%, rgba(var(--sl-purple-rgb), 0.05) 42%, transparent 68%);
    animation: slAmbientPulse 8s ease-in-out infinite;
}

@keyframes slAmbientPulse {
    0%, 100% { opacity: 0.85; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); }
}

#login-screen.login-register-active .cyber-grid {
    background-image:
        linear-gradient(rgba(var(--sl-blue-rgb), 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--sl-blue-rgb), 0.05) 1px, transparent 1px);
    opacity: 0.55;
}

/* ── Баннер предупреждения (System Alert) ── */
.intro-alert-register .intro-alert-banner {
    backdrop-filter: blur(18px) saturate(1.2);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
    border: 1px solid rgba(255, 77, 109, 0.42);
    background:
        linear-gradient(135deg, rgba(255, 77, 109, 0.12) 0%, transparent 42%),
        linear-gradient(225deg, rgba(var(--sl-purple-rgb), 0.08) 0%, transparent 50%),
        var(--sl-panel);
    box-shadow:
        0 0 0 1px rgba(var(--sl-blue-rgb), 0.08),
        0 0 36px rgba(255, 77, 109, 0.22),
        0 8px 32px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
    border-radius: 2px;
}

.intro-alert-register .intro-alert-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, transparent 28%);
}

.intro-alert-register .alert-title {
    color: #ff8fa8;
    text-shadow:
        0 0 12px rgba(255, 77, 109, 0.55),
        0 0 28px rgba(var(--sl-purple-rgb), 0.25);
    letter-spacing: 4px;
}

.intro-alert-register .alert-text {
    color: var(--sl-text-dim);
}

.intro-alert-register .highlight-red {
    color: var(--sl-gold);
    text-shadow: 0 0 14px rgba(240, 208, 96, 0.65);
}

.intro-alert-register .intro-timer-box {
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(var(--sl-blue-rgb), 0.45);
    background:
        linear-gradient(180deg, rgba(var(--sl-blue-rgb), 0.14), rgba(var(--sl-purple-rgb), 0.08)),
        var(--sl-panel-deep);
    box-shadow:
        0 0 24px var(--sl-glow),
        0 0 48px var(--sl-glow-purple),
        inset 0 0 20px rgba(var(--sl-blue-rgb), 0.08);
    color: var(--sl-blue-bright);
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(22px, 3vw, 32px);
    text-shadow: 0 0 16px rgba(var(--sl-blue-rgb), 0.75);
    animation: slTimerPulse 2.4s ease-in-out infinite;
}

@keyframes slTimerPulse {
    0%, 100% { box-shadow: 0 0 24px var(--sl-glow), 0 0 48px var(--sl-glow-purple), inset 0 0 20px rgba(var(--sl-blue-rgb), 0.08); }
    50% { box-shadow: 0 0 32px rgba(var(--sl-blue-rgb), 0.55), 0 0 64px var(--sl-glow-purple), inset 0 0 28px rgba(var(--sl-blue-rgb), 0.12); }
}

.intro-alert-register .intro-timer-label {
    color: var(--sl-text-dim);
    letter-spacing: 3px;
}

/* ── Главный контейнер формы ── */
.cyber-register-shell {
    --reg-cyan: var(--sl-blue-bright);
    --reg-cyan-rgb: 126, 200, 255;
    --reg-pink: var(--sl-purple);
    --reg-pink-rgb: 139, 107, 255;
    --reg-green: var(--sl-success);

    backdrop-filter: blur(22px) saturate(1.15);
    -webkit-backdrop-filter: blur(22px) saturate(1.15);
    background:
        linear-gradient(155deg, rgba(var(--sl-blue-rgb), 0.1) 0%, transparent 38%),
        linear-gradient(335deg, rgba(var(--sl-purple-rgb), 0.12) 0%, transparent 42%),
        var(--sl-panel);
    border: 1px solid var(--sl-border);
    box-shadow:
        0 0 0 1px rgba(var(--sl-purple-rgb), 0.14),
        0 0 50px var(--sl-glow),
        0 0 90px var(--sl-glow-purple),
        0 24px 64px rgba(0, 0, 0, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 0 80px rgba(var(--sl-blue-rgb), 0.04);
    border-radius: 3px;
}

.cyber-register-shell::before {
    opacity: 0.04;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 3px,
        rgba(var(--sl-blue-rgb), 0.15) 3px,
        rgba(var(--sl-blue-rgb), 0.15) 4px
    );
}

.cyber-register-shell::after {
    content: 'SYSTEM';
    position: absolute;
    top: 14px;
    right: 18px;
    font-family: 'Orbitron', sans-serif;
    font-size: 9px;
    letter-spacing: 4px;
    color: rgba(var(--sl-blue-rgb), 0.35);
    pointer-events: none;
    z-index: 1;
}

.cyber-register-corner {
    border-color: var(--sl-blue-bright);
    box-shadow:
        0 0 12px rgba(var(--sl-blue-rgb), 0.55),
        0 0 24px rgba(var(--sl-purple-rgb), 0.25);
    opacity: 0.95;
}

.cyber-register-scan {
    background: linear-gradient(90deg, transparent, var(--sl-blue-bright), rgba(var(--sl-purple-rgb), 0.8), transparent);
    box-shadow: 0 0 20px rgba(var(--sl-blue-rgb), 0.65);
    height: 1px;
}

/* ── Шапка ── */
.cyber-register-head {
    border-bottom: 1px solid rgba(var(--sl-blue-rgb), 0.2);
}

.cyber-register-kicker {
    color: var(--sl-blue-bright);
    border: 1px solid rgba(var(--sl-blue-rgb), 0.35);
    background: rgba(var(--sl-blue-rgb), 0.08);
    text-shadow: 0 0 10px rgba(var(--sl-blue-rgb), 0.5);
    backdrop-filter: blur(8px);
}

.cyber-register-title {
    background: linear-gradient(90deg, #fff 0%, var(--sl-blue-bright) 55%, rgba(var(--sl-purple-rgb), 0.9) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 18px rgba(var(--sl-blue-rgb), 0.45));
}

.cyber-register-sub {
    color: var(--sl-text-dim);
}

/* ── Секции (полупрозрачные карточки) ── */
.cyber-register-section {
    backdrop-filter: blur(14px) saturate(1.1);
    -webkit-backdrop-filter: blur(14px) saturate(1.1);
    background:
        linear-gradient(180deg, rgba(var(--sl-blue-rgb), 0.06) 0%, transparent 35%),
        rgba(8, 14, 32, 0.44);
    border: 1px solid rgba(var(--sl-blue-rgb), 0.22);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        inset 0 0 40px rgba(var(--sl-blue-rgb), 0.04),
        0 8px 28px rgba(0, 0, 0, 0.28);
    border-radius: 2px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.cyber-register-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 12px;
    right: 12px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--sl-blue-rgb), 0.55), transparent);
    pointer-events: none;
}

.cyber-register-section:hover {
    border-color: rgba(var(--sl-blue-rgb), 0.38);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        inset 0 0 48px rgba(var(--sl-blue-rgb), 0.06),
        0 0 24px rgba(var(--sl-blue-rgb), 0.12),
        0 8px 28px rgba(0, 0, 0, 0.28);
}

.cyber-register-section-title {
    color: var(--sl-blue-bright);
    text-shadow: 0 0 12px rgba(var(--sl-blue-rgb), 0.45);
}

.cyber-register-section-title span {
    border-color: rgba(var(--sl-blue-rgb), 0.4);
    background: rgba(var(--sl-blue-rgb), 0.1);
    color: var(--sl-gold);
    box-shadow: 0 0 10px rgba(var(--sl-blue-rgb), 0.2);
}

/* ── Поля ввода ── */
.cyber-field-label {
    color: var(--sl-text-dim);
    letter-spacing: 2px;
}

.cyber-field-wrap,
.cyber-field-textarea {
    backdrop-filter: blur(10px);
    background: rgba(4, 8, 20, 0.55);
    border: 1px solid rgba(var(--sl-blue-rgb), 0.24);
    box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.35);
}

.cyber-field-wrap:focus-within,
.cyber-field-textarea:focus {
    border-color: rgba(var(--sl-blue-rgb), 0.65);
    box-shadow:
        0 0 0 1px rgba(var(--sl-blue-rgb), 0.25),
        0 0 22px rgba(var(--sl-blue-rgb), 0.28),
        inset 0 0 20px rgba(var(--sl-blue-rgb), 0.06);
}

.cyber-field-prefix {
    color: var(--sl-purple);
    text-shadow: 0 0 10px rgba(var(--sl-purple-rgb), 0.55);
}

.cyber-field-input,
.cyber-field-select,
.cyber-field-textarea {
    color: var(--sl-text);
}

.cyber-field-select {
    background:
        linear-gradient(90deg, rgba(var(--sl-blue-rgb), 0.06), transparent),
        rgba(4, 8, 20, 0.55);
}

.cyber-threat-slider {
    accent-color: var(--sl-purple);
}

.cyber-threat-labels #intro-threat-label {
    color: var(--sl-purple);
    text-shadow: 0 0 10px rgba(var(--sl-purple-rgb), 0.5);
}

/* ── Роли ── */
.cyber-register-role-preview .role-preview-stage {
    backdrop-filter: blur(12px);
    background:
        radial-gradient(circle at 30% 20%, rgba(var(--sl-blue-rgb), 0.12), transparent 55%),
        rgba(8, 14, 32, 0.5);
    border: 1px solid rgba(var(--sl-blue-rgb), 0.28);
    box-shadow:
        0 0 32px rgba(var(--sl-blue-rgb), 0.15),
        inset 0 0 40px rgba(var(--sl-purple-rgb), 0.06);
}

.cyber-register-roles .role-select-card {
    backdrop-filter: blur(10px);
    background: rgba(8, 14, 32, 0.48);
    border: 1px solid rgba(var(--sl-blue-rgb), 0.2);
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.25);
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
}

.cyber-register-roles .role-select-card:hover {
    border-color: rgba(var(--sl-blue-rgb), 0.45);
    box-shadow:
        0 0 20px rgba(var(--sl-blue-rgb), 0.2),
        inset 0 0 24px rgba(var(--sl-blue-rgb), 0.06);
    transform: translateY(-2px);
}

.cyber-register-roles .role-select-card.active {
    border-color: rgba(var(--sl-blue-rgb), 0.65);
    background:
        linear-gradient(160deg, rgba(var(--sl-blue-rgb), 0.14), rgba(var(--sl-purple-rgb), 0.08)),
        rgba(8, 14, 32, 0.55);
    box-shadow:
        0 0 28px rgba(var(--sl-blue-rgb), 0.35),
        0 0 48px rgba(var(--sl-purple-rgb), 0.15),
        inset 0 0 30px rgba(var(--sl-blue-rgb), 0.08);
}

/* ── Футер и кнопка ── */
.cyber-register-footer {
    border-top: 1px solid rgba(var(--sl-blue-rgb), 0.18);
}

.cyber-register-terms {
    color: var(--sl-text-dim);
}

.cyber-register-terms-box {
    border-color: rgba(var(--sl-blue-rgb), 0.4);
    background: rgba(4, 8, 20, 0.5);
}

.cyber-register-terms input:checked + .cyber-register-terms-box {
    background: radial-gradient(circle at center, rgba(var(--sl-blue-rgb), 0.55), rgba(var(--sl-purple-rgb), 0.2));
    box-shadow: 0 0 14px rgba(var(--sl-blue-rgb), 0.5);
}

.cyber-register-terms b {
    color: var(--sl-blue-bright);
}

.cyber-register-error {
    backdrop-filter: blur(10px);
    color: #ffb8c8;
    border-color: rgba(255, 77, 109, 0.45);
    background: rgba(255, 77, 109, 0.1);
    box-shadow: 0 0 20px rgba(255, 77, 109, 0.15);
}

.cyber-register-submit {
    backdrop-filter: blur(12px);
    border: 1px solid rgba(var(--sl-blue-rgb), 0.55);
    background:
        linear-gradient(135deg, rgba(var(--sl-blue-rgb), 0.22) 0%, rgba(var(--sl-purple-rgb), 0.18) 100%);
    box-shadow:
        0 0 32px rgba(var(--sl-blue-rgb), 0.28),
        0 0 56px rgba(var(--sl-purple-rgb), 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 0 30px rgba(var(--sl-blue-rgb), 0.08);
}

.cyber-register-submit:hover {
    box-shadow:
        0 0 40px rgba(var(--sl-blue-rgb), 0.45),
        0 0 72px rgba(var(--sl-purple-rgb), 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.cyber-register-submit-text {
    text-shadow: 0 0 14px rgba(var(--sl-blue-rgb), 0.65);
}

/* ── Скроллбар ── */
.intro-alert-register {
    scrollbar-color: rgba(var(--sl-blue-rgb), 0.5) rgba(0, 0, 0, 0.35);
}

.intro-alert-register::-webkit-scrollbar-thumb,
.cyber-register::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(var(--sl-blue-rgb), 0.75), rgba(var(--sl-purple-rgb), 0.55));
    box-shadow: 0 0 10px rgba(var(--sl-blue-rgb), 0.4);
}

/* ── Терминал взлома (шаг 2) ── */
.intro-hack-overlay {
    backdrop-filter: blur(14px) saturate(1.1);
    background: rgba(4, 8, 18, 0.72);
}

.intro-hack-terminal {
    backdrop-filter: blur(20px);
    border: 1px solid rgba(var(--sl-blue-rgb), 0.4);
    background:
        linear-gradient(160deg, rgba(var(--sl-blue-rgb), 0.08), transparent 45%),
        rgba(8, 14, 32, 0.62);
    box-shadow:
        0 0 60px rgba(var(--sl-blue-rgb), 0.22),
        0 0 100px rgba(var(--sl-purple-rgb), 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.intro-hack-terminal__titlebar {
    background: rgba(var(--sl-blue-rgb), 0.08);
    border-bottom: 1px solid rgba(var(--sl-blue-rgb), 0.22);
}

.intro-hack-terminal__timer {
    color: var(--sl-blue-bright);
    text-shadow: 0 0 12px rgba(var(--sl-blue-rgb), 0.6);
}

@media (max-width: 820px) {
    .cyber-register-shell {
        backdrop-filter: blur(16px);
    }

    .cyber-register-section:hover {
        transform: none;
    }

    .cyber-register-title {
        font-size: clamp(18px, 5vw, 26px);
        letter-spacing: 2px;
    }
}

@media (max-width: 520px) {
    .cyber-register-roles.roles-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================================================
   ПРОФИЛЬ УГРОЗЫ — футуристичный cyberpunk-слайдер.

   Слои:
     .cyber-threat-control  — контейнер управления (тач-цель);
     .cyber-threat-rail     — визуальный рельс (фон, сетка, заполнение, ромб);
     .cyber-threat-ticks    — деления по 5 уровням;
     .cyber-threat-slider   — НАТИВНЫЙ <input type=range>, прозрачный
                              интерактивный слой (мышь/тач/клавиатура).

   Плавность: ширина .cyber-threat-fill и позиция .cyber-threat-thumb
   анимированы (transition), поэтому заполнение «течёт», а не прыгает.
   Цвет кодирует уровень через --threat-c / --threat-c-rgb.
   ============================================================================ */

.cyber-threat-meter {
    --threat-thumb: 26px;
    --threat-c: var(--reg-pink);
    --threat-c-rgb: var(--reg-pink-rgb);
    --threat-ratio: 0.5;
}

/* Цветовое кодирование уровня угрозы */
.cyber-threat-meter.is-level-1 { --threat-c: #38ff9e; --threat-c-rgb: 56, 255, 158; }
.cyber-threat-meter.is-level-2 { --threat-c: #4ee6ff; --threat-c-rgb: 78, 230, 255; }
.cyber-threat-meter.is-level-3 { --threat-c: #ffc857; --threat-c-rgb: 255, 200, 87; }
.cyber-threat-meter.is-level-4 { --threat-c: #ff8a3d; --threat-c-rgb: 255, 138, 61; }
.cyber-threat-meter.is-level-5 { --threat-c: #ff2d6b; --threat-c-rgb: 255, 45, 107; }

.cyber-threat-control {
    position: relative;
    height: 44px;
    margin-top: 6px;
    display: flex;
    align-items: center;
    touch-action: none;
}

.cyber-threat-rail {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* базовый рельс */
.cyber-threat-rail-bg {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 6px;
    transform: translateY(-50%);
    border-radius: 3px;
    background: linear-gradient(90deg, rgba(10, 16, 34, 0.95), rgba(6, 10, 22, 0.95));
    border: 1px solid rgba(var(--reg-cyan-rgb), 0.22);
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.75);
}

/* неоновое заполнение (ширина анимируется → движение плавное) */
.cyber-threat-fill {
    position: absolute;
    top: 50%;
    left: 0;
    height: 6px;
    width: calc(var(--threat-thumb) / 2 + (100% - var(--threat-thumb)) * var(--threat-ratio));
    transform: translateY(-50%);
    border-radius: 3px;
    background: linear-gradient(
        90deg,
        rgba(var(--threat-c-rgb), 0.12),
        rgba(var(--threat-c-rgb), 0.85) 78%,
        var(--threat-c)
    );
    box-shadow:
        0 0 10px rgba(var(--threat-c-rgb), 0.55),
        0 0 22px rgba(var(--threat-c-rgb), 0.28);
    transition:
        width 0.16s cubic-bezier(0.22, 0.61, 0.36, 1),
        background 0.3s ease,
        box-shadow 0.3s ease;
    overflow: hidden;
}

/* бегущий «скан» по заполнению */
.cyber-threat-fill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    background-size: 40% 100%;
    background-repeat: no-repeat;
    animation: cyberThreatScan 2.2s linear infinite;
    opacity: 0.5;
}

@keyframes cyberThreatScan {
    0% { background-position: -60% 0; }
    100% { background-position: 160% 0; }
}

/* тонкая техно-сетка поверх рельса */
.cyber-threat-grid {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 6px;
    transform: translateY(-50%);
    background-image: repeating-linear-gradient(
        90deg,
        rgba(var(--reg-cyan-rgb), 0.25) 0 1px,
        transparent 1px 8px
    );
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    opacity: 0.6;
}

/* ромбовидный светящийся бегунок */
.cyber-threat-thumb {
    position: absolute;
    top: 50%;
    left: calc(var(--threat-thumb) / 2 + (100% - var(--threat-thumb)) * var(--threat-ratio));
    width: 18px;
    height: 18px;
    transform: translate(-50%, -50%) rotate(45deg);
    border: 1px solid var(--threat-c);
    background: linear-gradient(135deg, rgba(var(--threat-c-rgb), 0.9), rgba(var(--threat-c-rgb), 0.25));
    box-shadow:
        0 0 10px rgba(var(--threat-c-rgb), 0.8),
        0 0 20px rgba(var(--threat-c-rgb), 0.45),
        inset 0 0 6px rgba(255, 255, 255, 0.35);
    transition:
        left 0.16s cubic-bezier(0.22, 0.61, 0.36, 1),
        transform 0.15s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease;
}

.cyber-threat-thumb::after {
    content: '';
    position: absolute;
    inset: 4px;
    background: var(--threat-c);
    box-shadow: 0 0 8px var(--threat-c);
    opacity: 0.9;
}

.cyber-threat-control:hover .cyber-threat-thumb,
.cyber-threat-control:focus-within .cyber-threat-thumb {
    box-shadow:
        0 0 14px rgba(var(--threat-c-rgb), 0.95),
        0 0 30px rgba(var(--threat-c-rgb), 0.6),
        inset 0 0 8px rgba(255, 255, 255, 0.5);
}

.cyber-threat-control:focus-within .cyber-threat-rail-bg {
    border-color: rgba(var(--threat-c-rgb), 0.55);
}

.cyber-threat-control:active .cyber-threat-thumb {
    transform: translate(-50%, -50%) rotate(45deg) scale(1.15);
}

/* тики по позициям 5 уровней */
.cyber-threat-ticks {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.cyber-threat-ticks span {
    position: absolute;
    top: calc(50% + 9px);
    left: calc(var(--threat-thumb) / 2 + (100% - var(--threat-thumb)) * var(--tick-ratio));
    width: 1px;
    height: 5px;
    transform: translateX(-50%);
    background: rgba(var(--reg-cyan-rgb), 0.4);
}

.cyber-threat-ticks span:nth-child(1) { --tick-ratio: 0; }
.cyber-threat-ticks span:nth-child(2) { --tick-ratio: 0.25; }
.cyber-threat-ticks span:nth-child(3) { --tick-ratio: 0.5; }
.cyber-threat-ticks span:nth-child(4) { --tick-ratio: 0.75; }
.cyber-threat-ticks span:nth-child(5) { --tick-ratio: 1; }

/* прозрачный интерактивный input поверх рельса */
.cyber-threat-slider {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    touch-action: none;
    z-index: 3;
}

.cyber-threat-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 26px;
    height: 26px;
}

.cyber-threat-slider::-moz-range-thumb {
    width: 26px;
    height: 26px;
    border: none;
    background: transparent;
}