/**
 * Общий технический фон — несколько вариантов (data-ui-bg на html)
 * Одинаковый градиент справа-сверху → #0f1419 слева-снизу
 */
:root {
    --bg-base: #0f1419;
    --scroll-track: #141c28;
    --scroll-thumb: #4b5f82;
    --scroll-thumb-hover: #5b8def;
}

html {
    background: var(--bg-base);
}

body {
    position: relative;
    min-height: 100vh;
    background: transparent !important;
    isolation: isolate;
}

body::before,
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
}

/* Общий градиент для всех вариантов */
body::before {
    z-index: -2;
    background:
        linear-gradient(
            to bottom left,
            rgba(15, 20, 25, 0) 0%,
            rgba(15, 20, 25, 0.55) 38%,
            var(--bg-base) 68%,
            var(--bg-base) 100%
        ),
        radial-gradient(
            ellipse 85% 65% at 100% 0%,
            rgba(56, 189, 248, 0.14) 0%,
            rgba(91, 141, 239, 0.08) 28%,
            transparent 62%
        ),
        radial-gradient(
            ellipse 45% 35% at 92% 6%,
            rgba(34, 211, 238, 0.1) 0%,
            transparent 70%
        ),
        var(--bg-base);
}

/* Общая маска паттерна — правый верхний сектор */
html[data-ui-bg] body::after {
    z-index: -1;
    opacity: 0.88;
    background-repeat: no-repeat;
    background-position: top right;
    -webkit-mask-image: radial-gradient(
        ellipse 95% 85% at 100% 0%,
        #000 0%,
        #000 32%,
        rgba(0, 0, 0, 0.55) 52%,
        transparent 78%
    );
    mask-image: radial-gradient(
        ellipse 95% 85% at 100% 0%,
        #000 0%,
        #000 32%,
        rgba(0, 0, 0, 0.55) 52%,
        transparent 78%
    );
}

/* 1. Чипы / плата */
html[data-ui-bg="chips"] body::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='480' viewBox='0 0 480 480'%3E%3Cg fill='none' stroke='%235b8def' stroke-opacity='0.2'%3E%3Cpath d='M40 40h48v48H40zM120 40h48v48h-48zM200 40h48v48h-48zM280 40h48v48h-48zM360 40h48v48h-48zM80 120h48v48H80zM160 120h48v48h-48zM240 120h48v48h-48zM320 120h48v48h-48zM400 120h48v48h-48zM40 200h48v48H40zM120 200h48v48h-48zM200 200h48v48h-48zM280 200h48v48h-48zM360 200h48v48h-48zM80 280h48v48H80zM160 280h48v48h-48zM240 280h48v48h-48zM320 280h48v48h-48zM400 280h48v48h-48z'/%3E%3Cpath d='M88 88v64M168 88v64M248 88v64M328 88v64M408 88v64M128 168h64M208 168h64M288 168h64M368 168h64' stroke-width='1' stroke-opacity='0.3'/%3E%3C/g%3E%3Cg fill='%2338bdf8' fill-opacity='0.1'%3E%3Ccircle cx='64' cy='64' r='2.5'/%3E%3Ccircle cx='144' cy='64' r='2.5'/%3E%3Ccircle cx='224' cy='64' r='2.5'/%3E%3Ccircle cx='304' cy='64' r='2.5'/%3E%3Ccircle cx='384' cy='64' r='2.5'/%3E%3Ccircle cx='104' cy='144' r='2.5'/%3E%3Ccircle cx='184' cy='144' r='2.5'/%3E%3Ccircle cx='264' cy='144' r='2.5'/%3E%3Ccircle cx='344' cy='144' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 480px 480px;
}

/* 2. Числовая матрица */
html[data-ui-bg="matrix"] body::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420'%3E%3Cg fill='%2393c5fd' fill-opacity='0.07' font-family='ui-monospace,monospace' font-size='11'%3E%3Ctext x='20' y='28'%3E1042%3C/text%3E%3Ctext x='80' y='28'%3E8731%3C/text%3E%3Ctext x='140' y='28'%3E0029%3C/text%3E%3Ctext x='200' y='28'%3E5510%3C/text%3E%3Ctext x='260' y='28'%3E7744%3C/text%3E%3Ctext x='320' y='28'%3E0193%3C/text%3E%3Ctext x='20' y='68'%3E8842%3C/text%3E%3Ctext x='80' y='68'%3E0017%3C/text%3E%3Ctext x='140' y='68'%3E6620%3C/text%3E%3Ctext x='200' y='68'%3E3301%3C/text%3E%3Ctext x='260' y='68'%3E9912%3C/text%3E%3Ctext x='320' y='68'%3E4408%3C/text%3E%3Ctext x='20' y='108'%3E2109%3C/text%3E%3Ctext x='80' y='108'%3E5566%3C/text%3E%3Ctext x='140' y='108'%3E7781%3C/text%3E%3Ctext x='200' y='108'%3E0034%3C/text%3E%3Ctext x='260' y='108'%3E8820%3C/text%3E%3Ctext x='320' y='108'%3E1190%3C/text%3E%3Ctext x='20' y='148'%3E4455%3C/text%3E%3Ctext x='80' y='148'%3E0021%3C/text%3E%3Ctext x='140' y='148'%3E9933%3C/text%3E%3Ctext x='200' y='148'%3E6612%3C/text%3E%3Ctext x='260' y='148'%3E0077%3C/text%3E%3Ctext x='320' y='148'%3E2244%3C/text%3E%3Ctext x='20' y='188'%3E8811%3C/text%3E%3Ctext x='80' y='188'%3E3344%3C/text%3E%3Ctext x='140' y='188'%3E0099%3C/text%3E%3Ctext x='200' y='188'%3E7722%3C/text%3E%3Ctext x='260' y='188'%3E1100%3C/text%3E%3Ctext x='320' y='188'%3E5588%3C/text%3E%3Ctext x='20' y='228'%3E0033%3C/text%3E%3Ctext x='80' y='228'%3E6677%3C/text%3E%3Ctext x='140' y='228'%3E2211%3C/text%3E%3Ctext x='200' y='228'%3E8899%3C/text%3E%3Ctext x='260' y='228'%3E4410%3C/text%3E%3Ctext x='320' y='228'%3E0066%3C/text%3E%3Ctext x='20' y='268'%3E9900%3C/text%3E%3Ctext x='80' y='268'%3E1122%3C/text%3E%3Ctext x='140' y='268'%3E5533%3C/text%3E%3Ctext x='200' y='268'%3E7788%3C/text%3E%3Ctext x='260' y='268'%3E0022%3C/text%3E%3Ctext x='320' y='268'%3E6644%3C/text%3E%3C/g%3E%3Cg stroke='%235b8def' stroke-opacity='0.12' stroke-width='0.5'%3E%3Cpath d='M0 40h420M0 80h420M0 120h420M0 160h420M0 200h420M0 240h420M0 280h420'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 420px 420px;
}

/* 3. Схематичный мозг / нейросеть */
html[data-ui-bg="brain"] body::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='500' viewBox='0 0 500 500'%3E%3Cg fill='none' stroke='%235b8def' stroke-opacity='0.18' stroke-width='1.2'%3E%3Cpath d='M280 60c-55-5-95 25-105 65-8 35 5 70 35 90-30 15-50 45-45 80 5 40 40 70 85 75 50 5 95-20 110-60 15-45-5-90-45-115 35-25 50-65 35-105-12-35-45-58-75-55z'/%3E%3Cpath d='M295 95c-25 8-42 30-40 55 2 20 18 38 38 45M250 130c-18 12-28 32-25 52 3 18 16 34 32 40M320 160c15 10 22 28 18 48-4 18-18 32-35 36M270 200c-22 5-38 22-40 42-2 22 12 42 32 50M340 220c12 18 10 40-5 55-12 12-30 16-45 10'/%3E%3C/g%3E%3Cg stroke='%2338bdf8' stroke-opacity='0.14' stroke-width='0.8'%3E%3Cpath d='M200 120l60 40M260 160l80 20M180 180l100 30M220 220l90 10M300 100l-40 80M340 180l-60 60M280 240l-70 30M360 140l-80 100'/%3E%3C/g%3E%3Cg fill='%2338bdf8' fill-opacity='0.14'%3E%3Ccircle cx='200' cy='120' r='4'/%3E%3Ccircle cx='260' cy='160' r='4'/%3E%3Ccircle cx='340' cy='180' r='4'/%3E%3Ccircle cx='280' cy='240' r='4'/%3E%3Ccircle cx='360' cy='140' r='4'/%3E%3Ccircle cx='220' cy='220' r='3.5'/%3E%3Ccircle cx='300' cy='100' r='3.5'/%3E%3Ccircle cx='180' cy='180' r='3.5'/%3E%3Ccircle cx='320' cy='220' r='3.5'/%3E%3Ccircle cx='250' cy='130' r='3'/%3E%3Ccircle cx='295' cy='95' r='3'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 500px 500px;
}

/* 4. PCB / схема */
html[data-ui-bg="circuit"] body::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='460' height='460' viewBox='0 0 460 460'%3E%3Cg fill='none' stroke='%235b8def' stroke-opacity='0.2' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M40 80h120v40H40zM200 40h80v80h-80zM320 100h100M320 100v80M200 120h120M120 120v100M120 220h160M280 220v60M280 280h140M40 280h80M40 280v80M120 360h200'/%3E%3Cpath d='M160 80v40M240 120h40M360 100h-40M120 160h80M280 180v40M200 280h80' stroke-opacity='0.28'/%3E%3C/g%3E%3Cg fill='%2338bdf8' fill-opacity='0.11'%3E%3Ccircle cx='160' cy='80' r='3'/%3E%3Ccircle cx='240' cy='120' r='3'/%3E%3Ccircle cx='120' cy='220' r='3'/%3E%3Ccircle cx='280' cy='220' r='3'/%3E%3Ccircle cx='280' cy='280' r='3'/%3E%3Ccircle cx='120' cy='360' r='3'/%3E%3Ccircle cx='320' cy='100' r='3'/%3E%3Ccircle cx='200' cy='40' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 460px 460px;
}

/* 5. Соты / hex */
html[data-ui-bg="hex"] body::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cg fill='none' stroke='%235b8def' stroke-opacity='0.15' stroke-width='1'%3E%3Cpath d='M50 30l35 20v40l-35 20-35-20V50zM120 30l35 20v40l-35 20-35-20V50zM190 30l35 20v40l-35 20-35-20V50zM260 30l35 20v40l-35 20-35-20V50zM330 30l35 20v40l-35 20-35-20V50zM15 90l35 20v40l-35 20-35-20v-40zM85 90l35 20v40l-35 20-35-20v-40zM155 90l35 20v40l-35 20-35-20v-40zM225 90l35 20v40l-35 20-35-20v-40zM295 90l35 20v40l-35 20-35-20v-40zM365 90l35 20v40l-35 20-35-20v-40zM50 150l35 20v40l-35 20-35-20v-40zM120 150l35 20v40l-35 20-35-20v-40zM190 150l35 20v40l-35 20-35-20v-40zM260 150l35 20v40l-35 20-35-20v-40zM330 150l35 20v40l-35 20-35-20v-40zM15 210l35 20v40l-35 20-35-20v-40zM85 210l35 20v40l-35 20-35-20v-40zM155 210l35 20v40l-35 20-35-20v-40zM225 210l35 20v40l-35 20-35-20v-40zM295 210l35 20v40l-35 20-35-20v-40zM365 210l35 20v40l-35 20-35-20v-40z'/%3E%3C/g%3E%3Cg fill='%2338bdf8' fill-opacity='0.08'%3E%3Ccircle cx='50' cy='50' r='2'/%3E%3Ccircle cx='190' cy='50' r='2'/%3E%3Ccircle cx='330' cy='50' r='2'/%3E%3Ccircle cx='155' cy='110' r='2'/%3E%3Ccircle cx='295' cy='110' r='2'/%3E%3Ccircle cx='260' cy='170' r='2'/%3E%3Ccircle cx='120' cy='170' r='2'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 400px 400px;
}

/* 6. Созвездие / граф */
html[data-ui-bg="constellation"] body::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='480' viewBox='0 0 480 480'%3E%3Cg stroke='%235b8def' stroke-opacity='0.16' stroke-width='1'%3E%3Cpath d='M380 40L320 90M320 90L280 60M320 90L350 140M350 140L420 120M350 140L300 180M300 180L240 150M300 180L340 230M340 230L400 260M340 230L280 260M280 260L220 220M280 260L320 310M320 310L380 340M320 310L260 340M220 220L180 280M180 280L240 320M180 280L120 240' fill='none'/%3E%3C/g%3E%3Cg fill='%2338bdf8' fill-opacity='0.13'%3E%3Ccircle cx='380' cy='40' r='4'/%3E%3Ccircle cx='320' cy='90' r='3.5'/%3E%3Ccircle cx='350' cy='140' r='3.5'/%3E%3Ccircle cx='300' cy='180' r='3'/%3E%3Ccircle cx='340' cy='230' r='3.5'/%3E%3Ccircle cx='280' cy='260' r='3'/%3E%3Ccircle cx='320' cy='310' r='3'/%3E%3Ccircle cx='220' cy='220' r='2.5'/%3E%3Ccircle cx='180' cy='280' r='2.5'/%3E%3Ccircle cx='420' cy='120' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 480px 480px;
}

/* 7. Осциллограмма / сигнал */
html[data-ui-bg="waveform"] body::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='400' viewBox='0 0 500 400'%3E%3Cg fill='none' stroke='%235b8def' stroke-opacity='0.2' stroke-width='1.2'%3E%3Cpath d='M20 200 Q60 120 100 200 T180 200 T260 200 T340 200 T420 200 T480 200'/%3E%3Cpath d='M20 140 Q80 80 140 140 T260 140 T380 140 T460 140' stroke-opacity='0.12'/%3E%3Cpath d='M20 260 Q70 320 130 260 T250 260 T370 260 T460 260' stroke-opacity='0.12'/%3E%3Cpath d='M20 80 Q100 40 180 80 T340 80 T460 80' stroke-opacity='0.08'/%3E%3C/g%3E%3Cg fill='%2338bdf8' fill-opacity='0.1'%3E%3Ccircle cx='100' cy='200' r='3'/%3E%3Ccircle cx='180' cy='200' r='3'/%3E%3Ccircle cx='260' cy='200' r='3'/%3E%3Ccircle cx='340' cy='200' r='3'/%3E%3Ccircle cx='420' cy='200' r='3'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 500px 400px;
}

/* Fallback до загрузки JS */
html:not([data-ui-bg]) body::after {
    z-index: -1;
    opacity: 0.88;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='480' viewBox='0 0 480 480'%3E%3Cg fill='none' stroke='%235b8def' stroke-opacity='0.18'%3E%3Cpath d='M40 40h48v48H40zM120 40h48v48h-48zM200 40h48v48h-48zM280 40h48v48h-48zM360 40h48v48h-48z'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 480px 480px;
    background-position: top right;
    background-repeat: no-repeat;
    -webkit-mask-image: radial-gradient(ellipse 95% 85% at 100% 0%, #000 0%, #000 32%, rgba(0,0,0,0.55) 52%, transparent 78%);
    mask-image: radial-gradient(ellipse 95% 85% at 100% 0%, #000 0%, #000 32%, rgba(0,0,0,0.55) 52%, transparent 78%);
}

@media (max-width: 720px) {
    html[data-ui-bg] body::after {
        opacity: 0.62;
    }
}

@media (prefers-reduced-motion: no-preference) {
    html[data-ui-bg="matrix"] body::after {
        animation: ui-bg-matrix 60s linear infinite;
    }
    html[data-ui-bg="constellation"] body::after {
        animation: ui-bg-pulse 8s ease-in-out infinite alternate;
    }
    html[data-ui-bg="waveform"] body::after {
        animation: ui-bg-wave 20s ease-in-out infinite alternate;
    }
}

@keyframes ui-bg-matrix {
    0% { background-position: top right; }
    100% { background-position: top -40px right; }
}

@keyframes ui-bg-pulse {
    0% { opacity: 0.75; }
    100% { opacity: 0.92; }
}

@keyframes ui-bg-wave {
    0% { background-position: top right; }
    100% { background-position: top 8px right -12px; }
}

/* Скроллбары — единый стиль интерфейса (Firefox + WebKit) */
html {
    scrollbar-width: thin;
    scrollbar-color: var(--scroll-thumb) var(--scroll-track);
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--scroll-thumb) var(--scroll-track);
}

*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-track {
    background: var(--scroll-track);
    border-radius: 4px;
}

*::-webkit-scrollbar-thumb {
    background: var(--scroll-thumb);
    border-radius: 4px;
    border: 2px solid var(--scroll-track);
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--scroll-thumb-hover);
}

*::-webkit-scrollbar-corner {
    background: var(--scroll-track);
}

/* Текст розыгрышей / постов — спокойные ссылки и акценты */
.popover-text,
.cell-text-html,
.desc-html,
.winner-win-text {
    line-height: 1.45;
    word-break: break-word;
}

.popover-text,
.cell-text-html,
.desc-html {
    color: #94a3b8;
}

.popover-text b,
.popover-text strong,
.cell-text-html b,
.cell-text-html strong,
.desc-html b,
.desc-html strong {
    color: #cbd5e1;
    font-weight: 600;
}

.popover-text a,
.popover-links a,
.cell-text-html a,
.desc-html a,
.channel-link a,
.channel-name a,
.winner-win-channels a {
    color: #8b9cb3;
    text-decoration: none;
    border-bottom: 1px solid rgba(139, 156, 179, 0.28);
}

.popover-text a:hover,
.popover-links a:hover,
.cell-text-html a:hover,
.desc-html a:hover,
.channel-link a:hover,
.channel-name a:hover,
.winner-win-channels a:hover {
    color: #b0becf;
    border-bottom-color: rgba(176, 190, 207, 0.45);
}

.popover-links {
    color: #8b9cb3;
    font-size: 11px;
    margin-top: 6px;
}

.popover-links a {
    border-bottom-style: dotted;
}

.meta-line {
    color: #8b9cb3;
    font-size: 11px;
}

.winner-win-title {
    color: #cbd5e1;
}

.winner-win-title:hover {
    color: #e2e8f0;
}