:root{
    /* semantic surfaces */
    --sa-bg:        #f7f8fb;
    --sa-card:      #ffffff;
    --sa-card-2:    color-mix(in srgb, var(--sa-card) 92%, #fff);
    --sa-border:    #e9edf3;
    --sa-ink:       #0b1220;
    --sa-muted:     #687385;

    --sa-brand-50:  #eef2ff;
    --sa-brand-100: #e0e7ff;
    --sa-brand-200: #c7d2fe;
    --sa-brand-300: #a5b4fc;
    --sa-brand-400: #818cf8;
    --sa-brand-500: #6366f1;
    --sa-brand-600: #5458d9;

    /* accent (будет переопределяться через html[data-accent]) */
    --sa-accent:    #dd8448;         /* по умолчанию ember */
    --sa-electric:  var(--sa-accent);/* цвет электрической рамки */

    /* state colors */
    --sa-info:   #3b82f6;
    --sa-warn:   #f59e0b;
    --sa-danger: #ef4444;

    /* effects */
    --sa-radius: 14px;
    --sa-shadow-sm: 0 6px 18px rgba(12,16,26,.07);
    --sa-shadow:    0 14px 34px rgba(12,16,26,.10);

    /* motion */
    --sa-time-1: .14s;
    --sa-time-2: .24s;
    --sa-time-3: .38s;
    --sa-ease: cubic-bezier(.2,.55,.18,.99);

    color-scheme: light dark;
}

/* ===== Палитры акцентов ===== */
html[data-accent="ember"] { --sa-accent:#dd8448; --sa-electric:#dd8448; }
html[data-accent="cyan"]  { --sa-accent:#22d3ee; --sa-electric:#22d3ee; }
html[data-accent="grape"] { --sa-accent:#8b5cf6; --sa-electric:#8b5cf6; }
html[data-accent="mint"]  { --sa-accent:#10b981; --sa-electric:#10b981; }
html[data-accent="gold"]  { --sa-accent:#f59e0b; --sa-electric:#f59e0b; }

html[data-theme="dark"]{
    --sa-bg:#0a0f15;
    --sa-card:#0f141b;
    --sa-card-2:#0c1117;
    --sa-border:#1f2a37;
    --sa-ink:#e6e9ee;
    --sa-muted:#94a0ae;

    --sa-brand-50:#0e1322;
    --sa-brand-100:#151b2d;
    --sa-brand-200:#1e2640;
    --sa-brand-300:#293259;
    --sa-brand-400:#34407a;
    --sa-brand-500:#5164ff;
    --sa-brand-600:#7ea2ff;

    --sa-shadow-sm: 0 6px 18px rgba(0,0,0,.35);
    --sa-shadow:    0 18px 42px rgba(0,0,0,.48);
}

body{ background:var(--sa-bg); color:var(--sa-ink); }

.card{
    background:var(--sa-card);
    border:1px solid var(--sa-border);
    border-radius:var(--sa-radius);
    box-shadow:var(--sa-shadow-sm);
    transition:
            transform var(--sa-time-2) var(--sa-ease),
            box-shadow var(--sa-time-2) var(--sa-ease),
            border-color var(--sa-time-2) var(--sa-ease);
}
.card-hover:hover{
    transform:translateY(-2px);
    box-shadow:var(--sa-shadow);
    border-color:color-mix(in oklab, var(--sa-accent) 24%, var(--sa-border));
}

/* ===================== Electric Border · EBX ===================== */
/* Навесь на .card класс .electric и один из режимов:
      .electric--frame   — «единый» аккуратный (свет только по кромке)
      .electric--dramatic— как в референсе (мощный glow)
   Контент не дублируется: слои создаёт инжектор в header. */

.card.electric{
    position:relative;
    border-radius:var(--sa-radius);
    isolation:isolate;
    overflow:clip;                /* аккуратно подрезаем glow */
    border-color:transparent;     /* не спорим со светящейся рамкой */
    --ebx-color: var(--sa-electric);
    --ebx-visible:1;
}

/* режимы видимости (по умолчанию — видно всегда, если не указан --hover) */
.electric--on    { --ebx-visible:1; }
.electric--hover { --ebx-visible:0; }
.electric--hover:hover { --ebx-visible:1; }

/* Frame — единый аккуратный стиль */
.electric--frame{
    --ebx-alpha:.5;
    --ebx-edge-w:2px;
    --ebx-pad:8px;       /* ширина «кольца» */
    --ebx-glow1:1px;
    --ebx-glow2:3px;
    --ebx-scale:1.02;
    --ebx-show-fill:0;   /* без внутреннего «фонаря» */
}

/* Dramatic — «как в демо» */
.electric--dramatic{
    --ebx-alpha:.72;
    --ebx-edge-w:2px;
    --ebx-pad:10px;
    --ebx-glow1:1px;
    --ebx-glow2:4px;
    --ebx-scale:1.08;
    --ebx-show-fill:1;
}

/* корневой контейнер эффекта (создаётся скриптом) */
.ebx{ position:relative; border-radius:inherit; min-height:1px; }

/* общий слой */
.ebx__layer{
    position:absolute; inset:0;
    border-radius:inherit;
    pointer-events:none;
    opacity:var(--ebx-visible,1);
    transition:opacity var(--sa-time-2) var(--sa-ease);
}

/* тонкий внешний контур */
.ebx__border-outer{
    border:2px solid color-mix(in oklab, var(--ebx-color) 60%, white);
    opacity:.35;
}

/* «живая» кромка с турбулентностью */
.ebx__main{
    border:var(--ebx-edge-w) solid var(--ebx-color);
    filter:url(#turbulent-displace); /* defs подключаются в header */
}

/* Ограничиваем мягкий glow и накладки только «кольцом» по краю */
.ebx__glow1, .ebx__glow2, .ebx__overlay1, .ebx__overlay2, .ebx__background{
    padding: var(--ebx-pad);
    box-sizing: border-box;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude; /* центр чистый */
}

/* мягкие свечения */
.ebx__glow1{ border:2px solid color-mix(in oklab, var(--ebx-color) 95%, white); filter:blur(var(--ebx-glow1)); opacity:.6; }
.ebx__glow2{ border:2px solid color-mix(in oklab, var(--ebx-color) 85%, white); filter:blur(var(--ebx-glow2)); opacity:.45; }

/* стеклянные накладки */
.ebx__overlay1, .ebx__overlay2{
    mix-blend-mode:overlay;
    transform:scale(var(--ebx-scale));
    filter:blur(16px);
    border-radius:inherit;
    background:linear-gradient(-30deg,#fff,transparent 30%,transparent 70%,#fff);
    opacity:calc(var(--ebx-show-fill,0) * .7);
}
.ebx__overlay2{ opacity:calc(var(--ebx-show-fill,0) * .35); }

/* фоновый «фонарь» */
.ebx__background{
    z-index:-1;
    transform:scale(var(--ebx-scale));
    filter:blur(32px);
    opacity:calc(var(--ebx-show-fill,0) * .30);
    background:linear-gradient(
            -30deg,
            oklch(from var(--ebx-color) l c h),
            transparent,
            var(--ebx-color)
    );
}

/* место для реального контента карточки */
.ebx__content{ position:relative; border-radius:inherit; z-index:5; }

/* чуть слабее в светлой теме */
html[data-theme="light"] .card.electric{ --ebx-alpha:.56; }

@media (prefers-reduced-motion: reduce){
    .ebx__main{ filter:none; }
}
/* ============================================================================ */

/* Кнопки/ссылки на акценте */
.btn-primary{
    --bs-btn-bg: var(--sa-accent);
    --bs-btn-border-color: var(--sa-accent);
    --bs-btn-hover-bg: color-mix(in oklab, var(--sa-accent) 86%, black);
    --bs-btn-hover-border-color: color-mix(in oklab, var(--sa-accent) 86%, black);
    --bs-btn-active-bg: color-mix(in oklab, var(--sa-accent) 86%, black);
}
.btn-outline-primary{
    --bs-btn-color: var(--sa-accent);
    --bs-btn-border-color: color-mix(in oklab, var(--sa-accent) 55%, transparent);
    --bs-btn-hover-bg: color-mix(in oklab, var(--sa-accent) 12%, transparent);
    --bs-btn-hover-border-color: var(--sa-accent);
}
a{ color: color-mix(in oklab, var(--sa-accent) 78%, white); }
a:hover{ color: var(--sa-accent); }

/* аккуратные чипы и бейджи */
.chip{
    background:linear-gradient(180deg,var(--sa-card-2) 0%,var(--sa-card) 100%);
    border:1px solid var(--sa-border);
}
.badge-soft{
    background:color-mix(in srgb, var(--sa-accent) 18%, transparent);
    color:color-mix(in oklab, var(--sa-accent) 80%, white);
    border:1px solid color-mix(in srgb, var(--sa-accent) 36%, transparent);
}
.badge-muted{
    background:color-mix(in srgb, var(--sa-muted) 14%, transparent);
    color:var(--sa-muted);
    border:1px solid color-mix(in srgb, var(--sa-muted) 28%, transparent);
}

/* «живая» подпись в navbar */
.navbar-brand{
    background: linear-gradient(90deg, var(--sa-accent), color-mix(in oklab, var(--sa-accent) 70%, white));
    -webkit-background-clip:text; background-clip:text; color:transparent;
}
.navbar-brand:hover{ filter:saturate(1.12) brightness(1.02); }

@keyframes sa-fade-up   { from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }
@keyframes sa-scale-in  { from{opacity:.8; transform:scale(.98)} to{opacity:1; transform:scale(1)} }
@keyframes sa-drop      { from{opacity:0; transform:translateY(-8px)} to{opacity:1; transform:none} }

/* утилиты анимаций */
.sa-entrance{ animation: sa-fade-up var(--sa-time-3) var(--sa-ease); }
.sa-scalein{  animation: sa-scale-in var(--sa-time-2) var(--sa-ease); }
.dropdown-menu{ transform-origin: top right; animation: sa-drop var(--sa-time-2) var(--sa-ease); }

/* нажатия и ховеры */
.btn, .chip, .list-group-item, .file-chip{
    transition:
            transform var(--sa-time-1) var(--sa-ease),
            box-shadow var(--sa-time-2) var(--sa-ease),
            background-color var(--sa-time-2) var(--sa-ease);
}
.btn:active{ transform: translateY(1px) scale(.99); }
.table tbody tr:hover{ background: color-mix(in oklab, var(--sa-accent) 6%, transparent); }

/* липкая шапка, мягкое сжатие при скролле */
.navbar.bg-body{
    backdrop-filter: blur(8px);
    transition: box-shadow var(--sa-time-2), padding var(--sa-time-2);
}
.navbar.nav-scrolled{
    box-shadow:0 8px 22px rgba(13,18,28,.08);
    padding-block: .35rem !important;
}

@media (prefers-reduced-motion: reduce){
    * { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition:none !important; }
}

/* до 576px таблицы становятся карточками */
@media (max-width: 575.98px){
    .table.responsive-cards thead{ display:none; }
    .table.responsive-cards tbody,
    .table.responsive-cards tr,
    .table.responsive-cards td{ display:block; width:100%; }
    .table.responsive-cards tr{
        border:1px solid var(--sa-border);
        border-radius:12px;
        background:var(--sa-card);
        box-shadow:var(--sa-shadow-sm);
        margin-bottom:.75rem; padding:.4rem .6rem;
    }
    .table.responsive-cards td{ border:none; padding:.2rem 0; }
    .table.responsive-cards td::before{
        content: attr(data-th) ": ";
        font-weight:600; color:var(--sa-muted);
        min-width:7rem; display:inline-block;
    }
    .table.responsive-cards .text-end{ text-align:left !important; }
}

/* удобные фокусы */
:where(a,button,.form-control,.form-select):focus{
    box-shadow:0 0 0 .2rem color-mix(in oklab, var(--sa-accent) 28%, transparent) !important;
    border-color: color-mix(in oklab, var(--sa-accent) 55%, var(--sa-border)) !important;
}

/* скроллбары */
*{ scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--sa-muted) 35%, transparent) transparent; }
*::-webkit-scrollbar{ height:10px; width:10px; }
*::-webkit-scrollbar-thumb{
    background: color-mix(in srgb, var(--sa-muted) 35%, transparent);
    border-radius: 999px;
}

/* file-chip визуал */
.file-chip{
    background:linear-gradient(180deg,var(--sa-card-2) 0%,var(--sa-card) 100%);
    border:1px solid var(--sa-border);
}
.file-chip .dot{ width:.5rem; height:.5rem; border-radius:999px; background:#94a3b8; }
.file-chip[data-ext="apk"] .dot{ background:#10b981; }
.file-chip[data-ext="zip"] .dot{ background:#6366f1; }
.file-chip[data-ext="jar"] .dot{ background:#f59e0b; }
.file-chip[data-ext="pdf"] .dot{ background:#ef4444; }
.file-chip:hover{ transform:translateY(-1px); box-shadow:var(--sa-shadow-sm); }

/* пустые состояния */
.empty{
    display:grid; place-items:center; padding:2.2rem;
    color:var(--sa-muted);
    border:1px dashed var(--sa-border);
    border-radius:var(--sa-radius);
    background:linear-gradient(180deg,var(--sa-card) 0%, var(--sa-card-2) 100%);
}

/* верхняя полоса прогресса */
#sa-nprog{
    position:fixed; left:0; top:0; height:3px; width:0%;
    background: linear-gradient(90deg, var(--sa-accent), color-mix(in oklab, var(--sa-accent) 70%, white));
    box-shadow: 0 0 12px color-mix(in oklab, var(--sa-accent) 45%, transparent);
    transition: width var(--sa-time-2) var(--sa-ease), opacity .3s;
    z-index: 3000; opacity:0;
    pointer-events: none;
    will-change: width;
}
#sa-nprog.active{ opacity:1; }

.prose{ line-height:1.7; color:var(--sa-ink); }
html[data-theme="dark"] .prose{ color:var(--sa-ink); }

.prose img,
.prose video{
    max-width:100% !important;
    height:auto !important;
    display:block;
    border-radius:10px;
    box-shadow:var(--sa-shadow-sm);
    margin:.6rem 0;
}

.prose iframe{
    width:100%;
    max-width:100%;
    border:0;
    margin:.6rem 0;
}

.prose table{ width:100%; border-collapse:collapse; }
.prose pre{
    background:#0b1020; color:#e2e8f0;
    padding:.9rem; border-radius:10px;
    overflow:auto;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.prose code:not(pre code){
    background: color-mix(in srgb, var(--sa-ink) 6%, transparent);
    padding:.1rem .35rem; border-radius:4px;
}