/*
Theme Name: CrateOps Panel
Text Domain: crateops
Domain Path: /languages
Theme URI: https://crateops.dev/
Author: CrateOps
Author URI: https://crateops.dev/
Description: Кастомная тема под верстку CrateOps Panel (header/footer + wiki).
Version: 0.1.0
Requires at least: 6.0
Tested up to: 6.6
License: GPLv2 or later
Text Domain: crateops
*/
/* учёт фикс-шапки для всех якорей */
:root {
    --nav-offset: 72px;
}

[id] {
    scroll-margin-top: calc(var(--nav-offset) + 12px);
}

/* если используешь нативную прокрутку */
html {
    scroll-behavior: smooth;
}

:root{
    --co-navy:#05256b;        /* основной синий панели */
    --co-navy-2:#001c5e;      /* active/hover */
    --co-accent:#257dc1;      /* ссылки/hover */
    --co-accent-2:#3399ff;    /* светлый акцент */
    --co-text:#0d1b2a;        /* текст */
    --co-muted:#58708a;       /* втор. текст */
    --co-border:#dbe8f7;      /* бордер */
    --co-darkblue:#102840;    /* меню/оффканвас */
    --co-midblue:#295577;     /* бейджи вторичные */
    --co-pg-nov: #0CA4E5;
    --co-shadow:0 12px 30px rgba(5,37,107,.10);
    --co-radius:16px;

    /* Bootstrap mapping */
    --bs-primary:var(--co-navy);
    --bs-primary-rgb:5,37,107;
    --bs-body-font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif;
    --bs-body-color:var(--co-text);
    --bs-body-bg:#ffffff;
    --bs-border-color:var(--co-border);
    --bs-border-radius:16px;
    --bs-border-radius-lg:18px;
    --bs-border-radius-sm:12px;
}
ul li {
    list-style: none;
}
img, svg {
    vertical-align: sub!important;;
}
/* Навбар + брендовые варианты (как в панели) */
.bg-blue{background-color:var(--co-navy)!important;border-bottom:2px solid #072456}
.bg-dark-blue{background-color:var(--co-darkblue)!important}
.bg-secondary-blue{background-color:var(--co-midblue)!important}
.dropdown-menu-dark-blue{
    --bs-dropdown-color:#fff;
    --bs-dropdown-bg:#1b3753;
    --bs-dropdown-link-color:#bddcfb;
    --bs-dropdown-link-hover-color:#fff;
    --bs-dropdown-link-hover-bg:rgba(255,255,255,.15);
}

/* Кнопки */
.btn-primary{
    background:linear-gradient(90deg,var(--co-navy),#123b83);
    border-color:var(--co-navy);
    box-shadow:0 8px 18px rgba(5,37,107,.22)
}

.btn-primary:hover {
    background: linear-gradient(90deg, #0db7ed 0%, #0a67cc 100%);
}

.btn-primary:focus,
.btn-primary:active {
    background: linear-gradient(90deg, #0db7ed 0%, #0a67cc 100%);
    box-shadow: none;
}

/* Базовый стиль */
.btn-primary.dual-border {
    position: relative;
    border: none;                /* убираем border Bootstrap */
    z-index: 1;
}

.btn-primary.dual-border::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px; /* толщина рамки */
    background: linear-gradient(90deg, #0db7ed, #0a67cc);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: -1; /* рамка за кнопкой */
}

/* Фон кнопки (обычный и при hover) */
.btn-primary.dual-border {
    background: linear-gradient(90deg, var(--co-navy), #123b83);
}

.btn-primary.dual-border:hover,
.btn-primary.dual-border:focus,
.btn-primary.dual-border:active {
    background: linear-gradient(90deg, #0db7ed 0%, #0a67cc 100%);
    color: #fff; /* чтобы текст не пропадал */
}

/* Хлебные секции/заголовки */
.section{padding-block:56px}
.section-eyebrow{
    width: 120px;
    height:2px;
    background:linear-gradient(90deg,transparent,var(--co-accent-2),transparent);
    border-radius:2px;
    position:relative;
    margin:12px auto
}
.section-eyebrow::after{
    content:"";position:absolute;left:50%;top:50%;
    transform:translate(-50%,-50%);width:8px;height:8px;border-radius:50%;
    background:var(--co-accent-2)
}
/* фон с дождём */
.binary-rain-layer {
    position: absolute;
    inset: 0;             /* растянуть на весь header */
    z-index: 1;           /* под контентом */
    pointer-events: none; /* клики не блокирует */
    opacity: 0.15;        /* регулируй прозрачность */
}

.binary-rain-layer .matrix-container svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Hero */
/* контент всегда поверх */
.hero-bg .container,
.hero-bg .row,
.hero-bg .cube {
    position: relative;
    z-index: 2;
}
.hero-bg{
    position: relative;
    overflow: hidden; /* чтобы дождь не вылазил */
    background:radial-gradient(120% 120% at -10% 30%,#e6f2ff 0,#ffffff 60%);
    border-bottom:1px solid var(--co-border)
}
/* уменьшить внутренние отступы */
.hero-bg .container {
    padding-top: 1rem;   /* вместо 3rem (py-lg-5) */
    padding-bottom: 1rem;
}
/* уменьшить высоту куба */
/*.hero-bg .cube svg {
  height: 260px;
}*/

/* поджать волну */
.hero-bg .waves svg {
    height: 70px; /* вместо 110px */
}
#why .bi {
    font-size: 1.4rem;
}
.waves svg{display:block;width:100%;height:110px;opacity: 0.7;margin-top: 0}
.cube svg{display:block;width:100%;height:260px;opacity: 0.7;}
/* Карточки «фич» (панельная подача) */
.card.feature{border:1.5px solid var(--co-border);box-shadow:var(--co-shadow);border-radius:var(--co-radius)}
.icon-box{
    width:70px;height:70px;border-radius:14px;border:1px solid #cfe4ff;
    background:linear-gradient(180deg,#f0f7ff,#e7f2ff);
    display:grid;place-items:center;color:var(--co-navy);font-weight:900;font-size: xxx-large;padding: 5px 10px;
}
.bi-shield-shaded, .bi-key, .bi-gear-fill {font-size: 50px;}
.icon-box svg{font-size: 50px;}
/* Моки превью */
.mock{
    min-height:220px;border:1.5px solid var(--co-border);border-radius:14px;
    background:linear-gradient(180deg,#f7fbff,#e9f4ff);
    display:grid;place-items:center;color:#44617f;font-weight:700;box-shadow:var(--co-shadow);
    transition:transform .2s ease
}
.mock:hover{transform:scale(1.02)}

/* Чипы/бейджи безопасности */
.badge-co{border:1px solid #cfe4ff;background:#f6faff;color:#2a466e;border-radius:999px;font-weight:800;font-size: medium;}

/* Акценты ссылок */
a:hover{color:var(--co-accent)}
/* ===== Offcanvas (левое меню) ===== */
.offcanvas.bg-dark-blue{
    color:#fff;
    /* фикс паддингов на мобилках (Firefox/WebKit) + вырезы экрана */
    --bs-offcanvas-padding-x: 1rem;
    --bs-offcanvas-padding-y: 1rem;
    padding-inline: max(1rem, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
    padding-block: 1rem;
}
.offcanvas .navbar-brand .logo{width:28px;height:28px}
.offcanvas .list-group-item{background:transparent;border:0;color:#cfe3ff;padding:.6rem 0;}
.offcanvas .list-group-item .badge{background:rgba(255,255,255,.15)}
.offcanvas .list-group-item:hover{color:#fff}
.offcanvas-header{border-bottom:1px solid rgba(255,255,255,.1)}
/* ===== FAQ ===== */
.faq-content {
    display: flex;
    align-items: flex-start;
    gap: 40px;
    margin-top: 40px;
    flex-wrap: inherit;              /* перенос колонок на узких экранах */
}
.faq-illustration {
    /* держим иллюстрацию видимой и центрируем её */
    flex: 1 1 320px;              /* базис под ширину картинки */
    min-width: 260px;             /* не даём схлопнуться */
    display: flex;                /* центруем <img> через flex */
    justify-content: center;
    align-items: center;
}

.monitor-svg {
    width: 100%;
    max-width: 420px;             /* максимум для десктопа */
}
.monitor-svg img{
    display: block;               /* убираем inline-щели */
    width: 100%;                  /* масштаб по контейнеру */
    height: auto;                 /* сохраняем пропорции */
}

.faq-questions {
    flex: 1 1 480px;              /* эластичная правая колонка */
    min-width: 0;                 /* ключ: разрешаем сжатие внутри flex */
    position: relative;
}

.faq-line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -20px;
    width: 2px;
    background: linear-gradient(180deg, #0db7ed, #0a67cc);
    height: 90%;
}
/* ===== About section (Bootstrap, light) ===== */
.about-section{padding:1rem 0;}
.about-title{font-weight:700;font-size:1.2rem;color:#111;}
background:linear-gradient(90deg,#0db7ed,#0a67cc);margin:12px 0 20px;}
.about-text{color:#444;}
.about-illustration{max-width:480px;width:100%;}
.about-illustration img{display:block;width:100%;height:auto;}
.about-illustration img, .monitor-svg img, .intl-illustration img {
    opacity: 0.95;
    filter: brightness(1.05) saturate(110%);
    mix-blend-mode: multiply;
    transition: all 0.3s ease;
}

.about-illustration img:hover, .monitor-svg img:hover, .intl-illustration img:hover {
    opacity: 1;
    filter: brightness(1.1) saturate(120%);
}

/* Карточки вопросов */
.faq-item {
    background: #f8f9fa; /* светлый фон */
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 15px;
    transition: background 0.3s, box-shadow 0.3s;
}

.faq-item:hover {
    background: #f1f7ff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

/* Заголовок вопроса */
.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-weight: 500;
    color: #222;
}

/* Кнопка + / – */
.faq-toggle {
    background: none;
    border: none;
    font-size: 30px;
    font-weight: bold;
    color: #0a67cc;
    cursor: pointer;
    transition: transform 0.2s;
}

.faq-item.open .faq-toggle {
    transform: rotate(180deg);
}

/* Ответ */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.3s ease;
    margin-top: 20px;
    color: #444;
    opacity: 0;
    line-height: 1.5;
}

.faq-item.open .faq-answer {
    max-height: 500px;
    opacity: 1;
}

.hero-title {
    font-size: 2rem; /* ~28px */
    line-height: 1.3;
}
/* Поджать бренд как в реальной панельке */
.navbar .navbar-brand { /*margin-right: 0 !important;*/ }   /* Bootstrap по умолчанию даёт me-2 */
.navbar .navbar-toggler { padding: .25rem .5rem; }
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler:focus-visible {
    outline: none !important;   /* убираем стандартную синюю рамку */
    box-shadow: none !important; /* убираем glow Bootstrap */
}
/* Эффект underline при наведении */
.navbar-nav .nav-link, .navbar-nav .nav-item {
    position: relative;
    display: inline-block;
    padding-bottom: 4px; /* место для линии */
}

.navbar-nav .nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0%;
    height: 2px; /* толщина линии */
    background: linear-gradient(90deg, #0db7ed, #0a67cc);
    transition: width 0.3s ease;
}

.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link:focus::after {
    width: 100%; /* линия растягивается */
}
/* Кнопка вверх с двухцветной обводкой */
.scroll-top-btn {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: none;
    background: #fff; /* фон внутри */
    color: #0a67cc;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.2s ease;
    z-index: 999;
}

.scroll-top-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    padding: 2px; /* толщина обводки */
    background: linear-gradient(135deg, #0db7ed, #0a67cc); /* двухцветная рамка */
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.scroll-top-btn:hover {
    transform: scale(1.1);
    color: #fff;
    background: linear-gradient(135deg, #0db7ed, #0a67cc);
}

/* ===== International (Bootstrap-first, light) ===== */
.hr-gradient{ /* тонкая линия под заголовком */
    width:500px;height:3px;border-radius:3px;
    background:linear-gradient(90deg,#0db7ed,#0a67cc);
}
.navbar-brand {font-size: 18px;}

.breadcrumb-item a {color: #05256b;}

.flag-22{width:22px;height:22px;border-radius:50%;object-fit:cover;display:block;}
.intl-illustration{max-width:440px;width:100%;}
.intl-illustration img{display:block;width:100%;height:auto;}
.btn-outline-primary {
    --bs-btn-color: #001c5e;
    --bs-btn-border-color: #001c5e;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #001c5e;
    --bs-btn-hover-border-color: #001c5e;
    --bs-btn-focus-shadow-rgb: 13,110,253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #001c5e;
    --bs-btn-active-border-color: #001c5e;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #001c5e;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #001c5e;
    --bs-gradient: none;
}
.breadcrumb .breadcrumb-item .bi.bi-house-door-fill {
    font-size: 16px;
}
/* =========================================
   WP Admin Bar (mobile) — не сдвигать страницу
   WordPress добавляет inline: html { margin-top:46px !important }
   Из-за этого появляется зазор над шапкой.
   Глушим его и уводим бар под контент.
   ========================================= */
#wpadminbar {
    z-index: -1;
}
@media screen and (max-width: 782px) {
    /*html {
        margin-top: 0 !important;
    }*/
    html #wpadminbar {
        z-index: -1 !important;      /* уходим под контент, чтобы не перекрывал оффканвас */
        position: fixed;                 /* фиксируем, чтобы не дёргал раскладку при скролле */
        /*top: 0; */                         /* без смещения */
    }
}

/* ===============================
   Fix: WP Admin Bar overlaps navbar/offcanvas (mobile & desktop)
   =============================== */
/* Высота админ-бара: 32px десктоп, 46px узкие экраны */
:root {
    --wp-adminbar-h: 32px;
}
@media (max-width: 782px) {
    :root { --wp-adminbar-h: 46px; }
}
/* ===== Адаптив HERO ===== */
@media (max-width: 767.98px) {
    .hero-title {
        font-size: 1.5rem;   /* уменьшаем заголовок на мобилках */
        line-height: 1.25;
        margin-top: 2.5rem;
    }
    .hero-bg p.lead {
        font-size: 0.95rem;  /* меньше текст подзаголовка */
    }
    .hero-bg .d-flex.flex-wrap.gap-2 {
        flex-direction: column;   /* кнопки в столбик */
        align-items: stretch;
    }
    .hero-bg .btn {
        width: 60%;              /* кнопки на всю ширину */
        margin: 0 auto;
        text-align: center;
    }
    .hero-bg .cube svg {
        display: none;            /* скрываем куб */
    }
    .binary-rain-layer {
        opacity: 0.1;             /* слабее дождь */
    }
    .hero-bg .cube svg {
        display: none; /* убираем куб */
    }
    .hero-bg .container {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }
    .hero-bg .hero-title {
        font-size: 1.4rem;
        line-height: 1.3;
    }
    .hero-bg p.lead {
        font-size: 0.95rem;
        margin-bottom: 1rem;
    }
    .hero-bg .d-flex.flex-wrap.gap-2 {
        flex-direction: column;
        align-items: stretch;
    }
    .hero-bg .btn {
        width: 70%;
        margin: 0 auto;
    }
    .hr-gradient {
        width: 98%;
    }
    .monitor-svg img {
        width: 100%;
    }
}
@media (max-width: 767.98px){
    .faq-content{ flex-direction: column; gap: 24px; }
    .faq-line{ display: none; }
    .monitor-svg{ width: 350px;}
}
@media (min-width: 768px) and (max-width: 991.98px) {
    .hero-title { font-size: 1.75rem;margin-top: 3rem; }
    .hero-bg p.lead { font-size: 1rem; }
    .hero-bg .cube svg { height: 240px; }
    .monitor-svg img {
        width: 100%;
    }
}

/* DESKTOP (>=992px): скрыть бургер, дать зазор бренду */
@media (min-width: 992px){
    .navbar .navbar-toggler{ display: none; }
    .navbar .navbar-brand{ margin-right: .75rem !important; } /* воздух слева от меню */
    .navbar .container-fluid {
        /*max-width: 1140px;*/ /* как у bootstrap .container-lg */
        margin: 0 auto;
    }
}
/* MOBILE (<992px): близкий бургер + бренд без правого отступа */
@media (max-width: 991.98px){
    .navbar .navbar-toggler.me-1{ margin-right: .25rem !important; }
    /*.navbar .navbar-brand{ margin-right: 0 !important; }*/
    .cube svg{display: none;}
    .binary-rain-layer svg{display: none;}
    .navbar-brand {
        /*margin-left: auto !important;*/
        margin-right: auto !important;
    }
    .section-eyebrow {
        width: 160px;
    }
}
/* ==== локальная секция для бинарного дождя ==== */
.binary-rain-block{
    position: relative;
    min-height: 360px;     /* высота блока с дождём */
    isolation: isolate;    /* корректный стек слоёв */
    background: transparent;
}
.binary-rain-block .matrix-container{
    position: absolute;
    inset: 0;              /* дождь только в границах секции */
    z-index: 1;            /* фон под контентом */
    pointer-events: none;  /* клики проходят к контенту */
    opacity: 0.15;         /* общая прозрачность эффекта */
    overflow: hidden;
}
.binary-rain-block .matrix-container svg{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.binary-rain-block > .container,
.binary-rain-block > .content{
    position: relative;
    z-index: 2;            /* контент поверх дождя */
}
.carousel-control-prev i,
.carousel-control-next i {
    font-size: 2.5rem;
    color: #05256b;
    text-shadow: 0 0 6px #05256b;
}

/* размеры/цвета как у шрифта */
.btn .bi { font-size: 1.25em; }
.text-primary { color: #0d6efd; }

/*новые стили*/
/* === FAQ → System requirements: flat key→value list inside one card === */
.faq-answer .spec-list {
    list-style: none;
    margin: 12px 0 0;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid var(--co-border);
    border-radius: 12px;
    box-shadow: var(--co-shadow);
}

/* строка */
.faq-answer .spec-list li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 10px 0;
    border-top: 1px dashed #e6eefb;
    line-height: 1.55;
    color: var(--co-text);
}

.faq-answer .spec-list li:first-child {
    border-top: 0;
}

/* левая колонка — метка */
.faq-answer .spec-list li>strong {
    flex: 0 0 240px;
    /* фиксированная ширина метки на десктопе */
    color: var(--co-navy);
    font-weight: 700;
}

/* компактнее на планшетах */
@media (max-width: 991.98px) {
    .faq-answer .spec-list li>strong {
        flex-basis: 200px;
    }
}

/* на мобильных метка уходит наверх, текст — ниже */
@media (max-width: 575.98px) {
    .faq-answer .spec-list {
        padding: 10px 12px;
    }

    .faq-answer .spec-list li {
        flex-direction: column;
        gap: 6px;
        padding: 8px 0;
    }

    .faq-answer .spec-list li>strong {
        flex: 0 0 auto;
        width: 100%;
    }
}

/* ===== Render Gate (critical, no deps) ===== */
html[data-boot="pending"],
html[data-boot="pending"] body {
    height: 100%;
    overflow: hidden
}

html[data-boot="pending"] body> :not(#bootloader) {
    visibility: hidden !important
}

/* Overlay (brand) */
#bootloader {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: grid;
    place-items: center;
    /* navy overlay with slight blur */
    background: rgba(5, 37, 107, .92);
    /* #05256b */
    -webkit-backdrop-filter: blur(6px) saturate(120%);
    backdrop-filter: blur(6px) saturate(120%);
    color: #e6eef8;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", "Courier New", monospace;
}

/* Card */
#bootloader .bl-card {
    width: min(720px, 92vw);
    border-radius: 14px;
    border: 1px solid #1b3b64;
    background:
        radial-gradient(120% 160% at 10% 0%, rgba(51, 153, 255, .14), transparent 40%),
        /* accent-2 glow */
        #0e1d33;
    /* deep navy bg */
    box-shadow: 0 18px 48px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .06);
    padding: 1.1rem 1.1rem .95rem;
}

/* Header */
#bootloader .bl-head {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .6rem
}

#bootloader .bl-title {
    font-weight: 800;
    letter-spacing: .3px;
    font-size: .95rem;
    color: #cfe3fb
}

/* LED (accent→accent-2) */
#bootloader .bl-led {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    background: linear-gradient(180deg, #257dc1, #3399ff);
    /* accent -> accent-2 */
    box-shadow: 0 0 18px #3399ff99, 0 0 1px #fff inset;
    animation: bl-pulse 1.2s ease-in-out infinite;
}

@keyframes bl-pulse {
    50% {
        filter: saturate(1.3) brightness(1.25)
    }
}

/* Log */
#bootloader .bl-log {
    display: grid;
    gap: .2rem;
    color: #9fb6d3;
    min-height: 3.4em;
    margin: .2rem 0 .7rem
}

#bootloader .bl-log span {
    opacity: .85
}

/* Progress bar (accent gradient) */
#bootloader .bl-progress {
    position: relative;
    height: 10px;
    border-radius: 999px;
    background: #0b1b30;
    border: 1px solid #1f3856;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
    overflow: hidden
}

#bootloader .bl-bar {
    position: absolute;
    inset: 1px;
    width: 0%;
    border-radius: 999px;
    background: linear-gradient(90deg, #257dc1, #3399ff);
    box-shadow: 0 0 18px #3399ff55;
    animation: bl-grow 1.15s ease-out forwards;
}

@keyframes bl-grow {
    0% {
        width: 0%
    }

    60% {
        width: 72%
    }

    100% {
        width: 100%
    }
}

/* Footer */
#bootloader .bl-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: .6rem;
    color: #8aa8c7
}

#bootloader .bl-spin {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid #2a476a;
    border-top-color: #3399ff;
    animation: bl-rot .7s linear infinite
}

@keyframes bl-rot {
    to {
        transform: rotate(360deg)
    }
}

/* Hide anim */
#bootloader.bl-hide {
    animation: bl-fade .35s ease forwards
}

@keyframes bl-fade {
    to {
        opacity: 0;
        visibility: hidden
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {

    #bootloader .bl-led,
    #bootloader .bl-bar,
    #bootloader .bl-spin {
        animation: none !important
    }

    #bootloader .bl-bar {
        width: 100% !important
    }
}

/* Light scheme fallback (если система светлая) */
@media (prefers-color-scheme: light) {
    #bootloader {
        background: rgba(248, 251, 255, .95)
    }

    #bootloader .bl-card {
        background: radial-gradient(120% 160% at 10% 0%, rgba(51, 153, 255, .10), transparent 40%), #ffffff;
        border-color: #dbe7fb;
        color: #0b2a4a
    }

    #bootloader .bl-title {
        color: #113a66
    }

    #bootloader .bl-log {
        color: #355c86
    }
}