/* KIRIN OS — portal styles */

/* Air-gap: шрифты vendored в /vendor/fonts/ (см. apps/portal/vendor/fetch-fonts.sh).
   Trunk копирует их в dist/fonts/ через `copy-dir` в index.html. unicode-range
   позволяет browser'у тянуть только нужный subset (latin или cyrillic) на основе
   характеров на странице. */

/* IBM Plex Sans — body UI font, weights 300/400/500/600, latin + cyrillic. */
@font-face {
    font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 300; font-display: swap;
    src: url('fonts/ibm-plex-sans-latin-300-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 300; font-display: swap;
    src: url('fonts/ibm-plex-sans-cyrillic-300-normal.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap;
    src: url('fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap;
    src: url('fonts/ibm-plex-sans-cyrillic-400-normal.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap;
    src: url('fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap;
    src: url('fonts/ibm-plex-sans-cyrillic-500-normal.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap;
    src: url('fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap;
    src: url('fonts/ibm-plex-sans-cyrillic-600-normal.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* JetBrains Mono — technical text (timestamps, IDs, IPs), weights 400/500. */
@font-face {
    font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap;
    src: url('fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap;
    src: url('fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2');
}

:root {
    /* Brand: indigo + gold + jade (per project_kirin_os_branding) */
    --bg-0:        #0b0f1a;
    --bg-1:        #131a2c;
    --bg-2:        #1c2542;
    --border:      #2a3556;
    --fg-0:        #e6ecf5;
    --fg-1:        #aab4c8;
    --fg-2:        #6f7a92;
    --indigo:      #4b6ee0;
    --indigo-hi:   #6e8df0;
    --gold:        #d4a13b;
    --jade:        #5fc5a0;
    --red:         #e25c5c;
    --orange:      #f08c43;
    --yellow:      #e6c947;
    --shadow:      0 4px 14px rgba(0, 0, 0, 0.35);

    /* Phase A spec — A.UI.1: typography */
    --font-ui:   'IBM Plex Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', 'Cascadia Code', ui-monospace, "Fira Code", monospace;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: var(--font-ui);
}

html, body {
    height: 100%;
    background: var(--bg-0);
    color: var(--fg-0);
    font-size: 13px;
    line-height: 1.45;
}

body { overflow: hidden; }

/* ─── A.UI.1 Shell — sidebar + topbar + statusbar grid ────────── */

.shell {
    display: grid;
    grid-template-columns: 220px 1fr;
    grid-template-rows: 48px 1fr 28px;
    height: 100vh;
}

/* Sidebar — single solid panel, full height */
.sidebar {
    grid-column: 1;
    grid-row: 1 / -1;
    display: flex;
    flex-direction: column;
    background: var(--bg-1);
    border-right: 1px solid var(--border);
    overflow: hidden;
}
.sidebar-brand {
    padding: 14px 18px 12px;
    border-bottom: 1px solid var(--border);
}
.sidebar-brand .word {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.2em;
    color: var(--gold);
    text-transform: uppercase;
}
.sidebar-brand .sub {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    color: var(--fg-2);
    letter-spacing: 0.05em;
}
.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 12px 0 16px;
}
.nav-group { margin-top: 14px; }
.nav-group:first-child { margin-top: 0; }
.nav-group .label {
    padding: 6px 18px 4px;
    font-size: 10px;
    color: var(--fg-2);
    letter-spacing: 0.2em;
    text-transform: uppercase;
}
.nav-item {
    display: block;
    padding: 8px 18px;
    border-left: 3px solid transparent;
    color: var(--fg-1);
    font-size: 13px;
    text-decoration: none;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.nav-item:hover {
    background: var(--bg-2);
    color: var(--fg-0);
}
.nav-item.active {
    background: linear-gradient(90deg, rgba(75,110,224,0.18), transparent 70%);
    color: var(--fg-0);
    border-left: 3px solid var(--indigo);
}
.sidebar-user {
    padding: 10px 14px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sidebar-user .name { color: var(--fg-0); font-size: 13px; font-weight: 500; }
.sidebar-user .role { color: var(--fg-2); font-size: 11px; font-family: var(--font-mono); }
.sidebar-user .logout {
    margin-top: 6px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--fg-1);
    padding: 5px 10px;
    border-radius: 3px;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.sidebar-user .logout:hover { color: var(--indigo-hi); border-color: var(--indigo); }

/* Topbar — page title left, action area right */
.topbar {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    background: var(--bg-0);
    border-bottom: 1px solid var(--border);
}
.topbar-title {
    display: flex;
    align-items: baseline;
    gap: 12px;
}
.topbar-title h1 {
    font-size: 15px;
    font-weight: 500;
    color: var(--fg-0);
    letter-spacing: 0.02em;
}
.topbar-title .crumb {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--fg-2);
}
.topbar-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}
.topbar-actions .clock {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--fg-1);
    letter-spacing: 0.05em;
}
.topbar-actions .site-pill {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--fg-1);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 3px 8px;
    background: rgba(98, 76, 196, 0.08);
    letter-spacing: 0.04em;
    white-space: nowrap;
}

/* Statusbar — operator pulse */
.statusbar {
    grid-column: 2;
    grid-row: 3;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 0 18px;
    background: var(--bg-1);
    border-top: 1px solid var(--border);
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--fg-2);
}
.statusbar .sep { color: var(--border); }
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--jade);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.status-pill.warn   { color: var(--gold); }
.status-pill.down   { color: var(--red); }
.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--jade);
    box-shadow: 0 0 0 2px rgba(95,197,160,0.20);
    animation: kirin-pulse 2.4s ease-in-out infinite;
}
.status-pill.warn .status-dot {
    background: var(--gold);
    box-shadow: 0 0 0 2px rgba(212,161,59,0.20);
}
.status-pill.down .status-dot {
    background: var(--red);
    box-shadow: none;
    animation: none;
}
@keyframes kirin-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.5; transform: scale(0.78); }
}

/* Main — full-width content */
main {
    grid-column: 2;
    grid-row: 2;
    overflow-y: auto;
    background: var(--bg-0);
    padding: 28px 36px;
}

/* ─── Login ───────────────────────────────────────────────────── */

.login-shell {
    display: grid;
    place-items: center;
    height: 100vh;
    background:
        radial-gradient(ellipse at top, rgba(75, 110, 224, 0.15), transparent 60%),
        radial-gradient(ellipse at bottom, rgba(95, 197, 160, 0.08), transparent 60%),
        var(--bg-0);
}
.login-card {
    width: 360px;
    padding: 32px;
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow);
}
.login-card h1 {
    color: var(--gold);
    text-align: center;
    margin-bottom: 4px;
    letter-spacing: 2px;
}
.login-card .sub {
    color: var(--fg-2);
    text-align: center;
    margin-bottom: 24px;
    font-size: 12px;
}
.login-card label {
    display: block;
    color: var(--fg-1);
    margin-bottom: 6px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.login-card input {
    width: 100%;
    padding: 10px 12px;
    margin-bottom: 16px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--fg-0);
    font-size: 14px;
}
.login-card input:focus {
    outline: none;
    border-color: var(--indigo);
}
.login-card button {
    width: 100%;
    padding: 10px;
    background: var(--indigo);
    border: none;
    border-radius: 6px;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    font-size: 14px;
}
.login-card button:hover { background: var(--indigo-hi); }
.login-card button:disabled { opacity: 0.5; cursor: wait; }
.login-card .err {
    color: var(--red);
    text-align: center;
    margin-top: 12px;
    font-size: 12px;
}

/* ─── Cards / panels ──────────────────────────────────────────── */

.panel {
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 16px;
}
.panel h2 {
    color: var(--gold);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 14px;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
th {
    text-align: left;
    padding: 8px;
    color: var(--fg-2);
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 1px;
    border-bottom: 1px solid var(--border);
}
td {
    padding: 8px;
    color: var(--fg-1);
    border-bottom: 1px solid var(--border);
}
tr:hover td { background: var(--bg-2); color: var(--fg-0); }

.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}
.badge.healthy  { background: rgba(95, 197, 160, 0.2);  color: var(--jade); }
.badge.degraded { background: rgba(230, 201, 71, 0.2);  color: var(--yellow); }
.badge.offline  { background: rgba(226, 92, 92, 0.2);   color: var(--red); }
.badge.enabled  { background: rgba(75, 110, 224, 0.2);  color: var(--indigo-hi); }
.badge.disabled { background: rgba(111, 122, 146, 0.2); color: var(--fg-2); }

/* Старый базовый .btn block замещён A.UI.2 design system primitives
   в конце файла (см. секцию A.UI.2). Если нужен legacy `<button class="btn">`
   без variant — он получает .btn-secondary поведение по умолчанию. */

.live-feed {
    font-family: "JetBrains Mono", "Fira Code", monospace;
    font-size: 12px;
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px;
    height: 70vh;
    overflow: auto;
}
.live-feed .line {
    padding: 4px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.live-feed .ts { color: var(--fg-2); margin-right: 8px; }
.live-feed .subj { color: var(--indigo-hi); margin-right: 8px; }

/* ─── Loader bar (top of page) ─────────────────────────────────── */
.loader-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 9999;
    background: transparent;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
}
.loader-bar.active { opacity: 1; }
.loader-bar-progress {
    height: 100%;
    width: 30%;
    background: linear-gradient(90deg,
        transparent, var(--indigo-hi), var(--gold), transparent);
    animation: loader-slide 1.2s ease-in-out infinite;
}
@keyframes loader-slide {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(400%); }
}

/* spinner — для inline индикаторов (login button и др.) */
.spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.2);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── Modal ────────────────────────────────────────────────────── */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 9000;
    display: grid;
    place-items: center;
    animation: fade-in 0.15s ease-out;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.modal-card {
    width: 460px;
    max-width: 90vw;
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    overflow: hidden;
}
.modal-card.kind-error    { border-color: var(--red); }
.modal-card.kind-warning  { border-color: var(--yellow); }
.modal-card.kind-info     { border-color: var(--indigo); }
.modal-card.kind-confirm  { border-color: var(--gold); }

.modal-header {
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--border);
}
.modal-header .kind {
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 1px;
    color: var(--fg-2);
}
.kind-error .kind    { color: var(--red); }
.kind-warning .kind  { color: var(--yellow); }
.kind-info .kind     { color: var(--indigo-hi); }
.kind-confirm .kind  { color: var(--gold); }
.modal-header h3 { margin-top: 4px; font-size: 16px; color: var(--fg-0); }

.modal-body {
    padding: 16px 20px;
    color: var(--fg-1);
    font-size: 14px;
    line-height: 1.5;
}
.modal-detail {
    margin-top: 12px;
    padding: 8px 10px;
    background: var(--bg-0);
    border-radius: 4px;
    font-family: "JetBrains Mono", "Fira Code", monospace;
    font-size: 12px;
    color: var(--fg-2);
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 200px;
    overflow: auto;
}

.modal-footer {
    padding: 12px 20px 16px;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}
.modal-footer .btn.primary {
    background: var(--indigo);
    color: #fff;
    border-color: var(--indigo);
}
.modal-footer .btn.primary:hover { background: var(--indigo-hi); }

/* ─── Toast ────────────────────────────────────────────────────── */
.toast-stack {
    position: fixed;
    bottom: 24px;
    right: 24px;
    display: flex;
    flex-direction: column-reverse;
    gap: 8px;
    z-index: 8000;
    max-width: 380px;
}
.toast {
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 13px;
    background: var(--bg-1);
    border-left: 3px solid var(--indigo);
    color: var(--fg-0);
    box-shadow: 0 6px 20px rgba(0,0,0,0.4);
    animation: toast-in 0.25s ease-out;
}
.toast.success { border-left-color: var(--jade); }
.toast.warning { border-left-color: var(--yellow); }
.toast.error   { border-left-color: var(--red); }
@keyframes toast-in {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ─── Camera grid ──────────────────────────────────────────────── */
.camera-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
.cam-card {
    background: var(--bg-0);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.cam-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 8px 12px;
    background: var(--bg-2);
    border-bottom: 1px solid var(--border);
}
.cam-label { font-weight: 600; color: var(--fg-0); font-size: 13px; }
.cam-id { color: var(--fg-2); font-family: monospace; font-size: 11px; }

.cam-frame {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #000;
    display: grid;
    place-items: center;
}
.cam-frame img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.cam-meta {
    position: absolute;
    bottom: 4px;
    left: 8px;
    color: rgba(255,255,255,0.7);
    font-family: monospace;
    font-size: 11px;
    background: rgba(0,0,0,0.4);
    padding: 2px 6px;
    border-radius: 3px;
}
.cam-placeholder {
    color: var(--fg-2);
    font-style: italic;
    font-size: 13px;
}

.cam-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* ─── Live page layout ──────────────────────────────────────── */
.live-shell {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 16px;
}
.filter-sidebar {
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px;
    height: fit-content;
    position: sticky;
    top: 0;
    max-height: calc(100vh - 96px);
    overflow-y: auto;
}
.filter-section { margin-bottom: 18px; }
.filter-section h3 {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--gold);
    margin-bottom: 8px;
}
.filter-section label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--fg-1);
    font-size: 13px;
    cursor: pointer;
    padding: 4px 0;
}
.filter-section input[type="checkbox"] {
    accent-color: var(--indigo);
    width: 14px; height: 14px;
}

.sev-pill {
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 600;
}
.sev-pill.sev-low      { background: rgba(95,197,160,.2); color: var(--jade); }
.sev-pill.sev-medium   { background: rgba(230,201,71,.2); color: var(--yellow); }
.sev-pill.sev-high     { background: rgba(240,140,67,.2); color: var(--orange); }
.sev-pill.sev-critical { background: rgba(226,92,92,.2);  color: var(--red); }

.live-feed .line.sev-medium   { border-left: 3px solid var(--yellow); padding-left: 8px; }
.live-feed .line.sev-high     { border-left: 3px solid var(--orange); padding-left: 8px; }
.live-feed .line.sev-critical { border-left: 3px solid var(--red);    padding-left: 8px; background: rgba(226,92,92,.06); }

.filter-sidebar .btn { width: 100%; }

.zone-camera { margin-bottom: 24px; }
.zone-camera h3 {
    color: var(--gold);
    font-size: 13px;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px 16px;
    margin-bottom: 12px;
}
.form-grid label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: var(--fg-2);
    text-transform: uppercase;
    letter-spacing: .5px;
}
.form-grid label.full { grid-column: 1 / -1; }
.form-grid input, .form-grid select, .form-grid textarea {
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--fg-0);
    font-size: 13px;
    padding: 6px 8px;
}
/* Удалён — заменён на .btn.btn-primary (см. A.UI.2). var(--accent)
   никогда не была определена, что делало этот блок мёртвым. */

.drone-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
}
.drone-card {
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 12px 16px;
}
.drone-card-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 4px;
}
.drone-card-head h3 {
    color: var(--gold); font-size: 14px; margin: 0;
    text-transform: uppercase; letter-spacing: 1px;
}
.drone-card-meta {
    display: flex; gap: 12px; font-size: 11px; color: var(--fg-2);
    margin-bottom: 10px;
}
.drone-bat {
    height: 18px; background: var(--bg-2); border-radius: 3px;
    position: relative; overflow: hidden; margin-bottom: 10px;
}
.drone-bat-fill { height: 100%; transition: width .4s ease; }
.drone-bat.bat-ok        .drone-bat-fill { background: var(--jade); }
.drone-bat.bat-mid       .drone-bat-fill { background: var(--yellow); }
.drone-bat.bat-low       .drone-bat-fill { background: var(--orange); }
.drone-bat.bat-critical  .drone-bat-fill { background: var(--red); }
.drone-bat.bat-unknown   .drone-bat-fill { background: var(--fg-2); width: 0%; }
.drone-preview {
    margin-top: 12px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 3px;
    overflow: hidden;
}
.drone-preview-tabs {
    display: flex;
    background: var(--bg-1);
    border-bottom: 1px solid var(--border);
}
.drone-preview-tab {
    flex: 1;
    padding: 6px 10px;
    background: transparent;
    border: none;
    color: var(--fg-2);
    font-family: var(--font-ui);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}
.drone-preview-tab:hover { background: var(--bg-2); color: var(--fg-0); }
.drone-preview-tab.active {
    color: var(--jade);
    border-bottom: 2px solid var(--jade);
    background: var(--bg-2);
}
.drone-preview-body {
    aspect-ratio: 16 / 12;
    background: #000;
}
.drone-pov-frame {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
/* Sprint 37 — stacked overlay для Camera ↔ 3D POV toggle без flicker.
   Оба iframe позиционированы absolute в одной точке; opacity:0 inactive,
   opacity:1 active. Browser продолжает rendering обоих (in-viewport,
   non-zero size), stream играет ПОСТОЯННО. */
.drone-preview-stack {
    position: relative;
}
.drone-preview-stack > .drone-pov-overlay {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 150ms ease;
}
.drone-preview-stack > .drone-pov-overlay.active,
.drone-preview-stack > .drone-pov-overlay.drone-pov-active {
    opacity: 1;
    pointer-events: auto;
}
.drone-video {
    position: relative;
    background: #000;
    overflow: hidden;
    width: 100%;
    height: 100%;
}
.drone-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.drone-video-label {
    position: absolute;
    top: 6px;
    left: 8px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    color: var(--jade);
    background: rgba(10, 14, 26, 0.65);
    padding: 2px 6px;
    border-radius: 2px;
}

.drone-payload {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}
.drone-failure {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}
.training-controls {
    margin-bottom: 16px;
    display: flex;
    gap: 16px;
    align-items: center;
}
.training-controls .form-row {
    display: flex; align-items: center; gap: 8px;
    font-size: 11px; color: var(--fg-2); text-transform: uppercase;
    letter-spacing: 0.16em;
}
.training-scenarios {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}
.training-card {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-left: 3px solid var(--indigo);
}
.training-card.diff-easy   { border-left-color: var(--jade); }
.training-card.diff-medium { border-left-color: var(--yellow); }
.training-card.diff-hard   { border-left-color: var(--orange); }
.training-card.diff-expert { border-left-color: var(--red); }
.training-card-head {
    display: flex; justify-content: space-between; align-items: center;
}
.training-card-head h3 {
    margin: 0; font-size: 13px; color: var(--fg-0);
}
.training-meta {
    display: flex; gap: 12px; font-family: var(--font-mono);
    font-size: 10px; color: var(--fg-2);
}
.sev-pill.diff-easy { background: rgba(95,197,160,0.15); color: var(--jade); }
.sev-pill.diff-medium { background: rgba(230,201,71,0.15); color: var(--yellow); }
.sev-pill.diff-hard { background: rgba(240,140,67,0.15); color: var(--orange); }
.sev-pill.diff-expert { background: rgba(226,92,92,0.15); color: var(--red); }
.sev-pill.outcome-mission_completed { background: rgba(95,197,160,0.15); color: var(--jade); }
.sev-pill.outcome-safe_rtl { background: rgba(95,197,160,0.10); color: var(--jade); }
.sev-pill.outcome-drone_lost { background: rgba(226,92,92,0.15); color: var(--red); }
.sev-pill.outcome-aborted { background: rgba(170,180,200,0.10); color: var(--fg-2); }
.sev-pill.outcome-in_progress { background: rgba(75,110,224,0.15); color: var(--indigo-hi); }
.instructor-summary {
    margin-bottom: 14px;
    padding: 8px 12px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 12px;
}
.instructor-summary .mono {
    font-family: var(--font-mono);
    color: var(--jade);
    font-weight: 600;
}
.instructor-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.instructor-table td {
    vertical-align: middle;
}
.scenario-author {
    margin-bottom: 16px;
    padding: 10px 14px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 4px;
}
.scenario-author summary {
    cursor: pointer;
    color: var(--gold);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    user-select: none;
    list-style: none;
    padding: 4px 0;
}
.scenario-author summary::-webkit-details-marker { display: none; }
.scenario-author summary::before { content: "▸ "; }
.scenario-author[open] summary::before { content: "▾ "; }
.scenario-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
}
.scenario-form label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--fg-2);
}
.scenario-form input, .scenario-form select, .scenario-form textarea {
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: 3px;
    color: var(--fg-0);
    padding: 6px 10px;
    font-family: var(--font-mono);
    font-size: 12px;
    text-transform: none;
    letter-spacing: 0;
}
.scenario-form textarea { font-family: var(--font-mono); }
.scenario-form button { align-self: flex-start; }
.login-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 0 12px;
    color: var(--fg-2);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
}
.login-divider::before, .login-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border);
}
.passkey-btn {
    background: transparent;
    color: var(--gold);
    border: 1px solid var(--gold);
    border-radius: 3px;
    padding: 9px 16px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    width: 100%;
    transition: background 120ms ease, color 120ms ease;
}
.passkey-btn:hover:not(:disabled) {
    background: rgba(212, 161, 59, 0.1);
}
.passkey-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.profile-link {
    display: block;
    color: var(--indigo-hi);
    font-size: 11px;
    margin: 6px 0 4px;
    text-decoration: none;
    transition: color 120ms ease;
}
.profile-link:hover { color: var(--gold); }
.profile-info { margin-bottom: 14px; font-size: 12px; color: var(--fg-1); }
.passkey-register {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
    padding: 10px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 4px;
}
.passkey-register input {
    flex: 1;
    background: var(--bg-1);
    border: 1px solid var(--border);
    color: var(--fg-0);
    padding: 6px 10px;
    border-radius: 3px;
    font-size: 12px;
}
.wp-editor {
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-top: 1px dashed var(--border);
    padding-top: 10px;
    margin-top: 6px;
}
.wp-editor-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.wp-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.wp-row {
    display: grid;
    grid-template-columns: 28px 1fr 1fr 70px 70px 32px;
    gap: 6px;
    align-items: center;
}
.wp-row.failure-row {
    grid-template-columns: 70px 1fr 1fr 1.4fr 32px;
}
.wp-num {
    color: var(--fg-2);
    font-size: 10px;
    text-align: right;
}
.wp-row input, .wp-row select {
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: 2px;
    color: var(--fg-0);
    font-family: var(--font-mono);
    font-size: 11px;
    padding: 3px 6px;
    text-transform: none;
    letter-spacing: 0;
}
.wp-row .btn-ghost {
    color: var(--red);
    padding: 2px 6px;
}
.drone-failure summary {
    cursor: pointer;
    color: var(--orange);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    user-select: none;
    list-style: none;
    padding: 4px 0;
}
.drone-failure summary::-webkit-details-marker { display: none; }
.drone-failure summary::before { content: "▸ "; }
.drone-failure[open] summary::before { content: "▾ "; }
.drone-failure-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}
.drone-failure-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.drone-failure-group .drone-payload-label {
    flex-basis: 100%;
    color: var(--fg-2);
    font-size: 9px;
}
.drone-payload-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.drone-payload-label {
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--fg-2);
    margin-right: 4px;
}

.drone-bat-label {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--fg-0); font-size: 11px; font-weight: 600;
    text-shadow: 0 0 3px rgba(0,0,0,.6);
}
.drone-tele { width: 100%; font-size: 12px; }
.drone-tele th {
    text-align: left; color: var(--fg-2); font-weight: 400;
    padding: 2px 8px 2px 0; width: 80px;
}
.drone-tele td { color: var(--fg-0); padding: 2px 0; font-family: var(--font-mono); }

/* ─── A.UI.2 Design system primitives ─────────────────────────── */

/* Buttons — 4 variants × 2 sizes. Base = .btn */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 3px;
    border: 1px solid transparent;
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.04em;
    cursor: pointer;
    user-select: none;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn:focus-visible { outline: 2px solid var(--indigo-hi); outline-offset: 2px; }

.btn-sm  { padding: 4px 10px; font-size: 11px; }
.btn-md  { /* default */ }

.btn-primary {
    background: var(--indigo);
    color: #fff;
    border-color: var(--indigo);
}
.btn-primary:hover:not(:disabled) { background: var(--indigo-hi); border-color: var(--indigo-hi); }

.btn-secondary {
    background: var(--bg-2);
    color: var(--fg-0);
    border-color: var(--border);
}
.btn-secondary:hover:not(:disabled) { border-color: var(--indigo); color: var(--indigo-hi); }

.btn-ghost {
    background: transparent;
    color: var(--fg-1);
    border-color: transparent;
}
.btn-ghost:hover:not(:disabled) { background: var(--bg-2); color: var(--fg-0); }

.btn-danger {
    background: transparent;
    color: var(--red);
    border-color: var(--red);
}
.btn-danger:hover:not(:disabled) { background: rgba(226, 92, 92, 0.12); }

/* Inputs */
.input {
    width: 100%;
    padding: 7px 10px;
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: 3px;
    color: var(--fg-0);
    font-family: var(--font-ui);
    font-size: 13px;
    transition: border-color 120ms ease;
}
.input:focus { outline: none; border-color: var(--indigo); }
.input:disabled { opacity: 0.5; }
.input-mono { font-family: var(--font-mono); }

.select {
    width: 100%;
    padding: 7px 10px;
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: 3px;
    color: var(--fg-0);
    font-family: var(--font-ui);
    font-size: 13px;
    cursor: pointer;
}
.select:focus { outline: none; border-color: var(--indigo); }

.input-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 12px;
}
.input-field > label {
    font-size: 10px;
    font-weight: 500;
    color: var(--fg-2);
    text-transform: uppercase;
    letter-spacing: 0.16em;
}

/* Panel — overrides предыдущей стилистики (sharp 4px, gold caps title) */
.panel {
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 22px 24px;
    margin-bottom: 18px;
}
.panel-alert {
    border-color: var(--red);
    box-shadow: 0 0 0 3px rgba(226, 92, 92, 0.12);
}
.panel-title {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 14px;
}

/* Status pill — расширение для online/warn/down (используется в statusbar
   и можно в page-content для show service health). */
.status-pill-online { color: var(--jade); }
.status-pill-warn   { color: var(--gold); }
.status-pill-down   { color: var(--red); }

/* Helpers */
.divider {
    height: 1px;
    background: var(--border);
    margin: 16px 0;
    border: 0;
}
.mono { font-family: var(--font-mono); }

/* .kbd — keyboard hint, для cheat-sheet (#A.UI.3) */
.kbd {
    display: inline-block;
    padding: 1px 6px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--fg-0);
    line-height: 1.4;
    box-shadow: 0 1px 0 var(--border);
}

/* Better default table styling — uppercase th, hover rows */
table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
thead th {
    text-align: left;
    padding: 8px 10px;
    color: var(--fg-2);
    text-transform: uppercase;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
    border-bottom: 1px solid var(--border);
    background: transparent;
}
tbody td {
    padding: 9px 10px;
    color: var(--fg-1);
    border-bottom: 1px solid var(--border);
}
tbody tr:hover td { background: var(--bg-2); color: var(--fg-0); }
tbody tr:last-child td { border-bottom: none; }

/* ─── A.UI.5 utilities ─────────────────────────────────────────── */

.muted    { color: var(--fg-2); }
.muted-sm { color: var(--fg-2); font-size: 11px; }
.intro    { color: var(--fg-2); margin-bottom: 12px; }
.mono-sm  { font-family: var(--font-mono); font-size: 11px; }
.mt-2     { margin-top: 8px; }
.mt-3     { margin-top: 12px; }
.mb-3     { margin-bottom: 12px; }

details summary { cursor: pointer; }

.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
    align-items: center;
}

.code-block {
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 8px 10px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--fg-1);
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 200px;
    overflow: auto;
}

.zone-canvas-frame {
    display: inline-block;
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
    background: var(--bg-1);
    max-width: 100%;
}
.zone-canvas-frame canvas {
    display: block;
    max-width: 100%;
    cursor: crosshair;
}

.badge.warn { background: rgba(240, 140, 67, 0.2); color: var(--orange); }

.modal-card.modal-wide { width: 720px; max-width: 95vw; }
.modal-wide video,
.modal-wide img {
    display: block;
    width: 100%;
    max-width: 100%;
    max-height: 480px;
}
.modal-wide video { background: #000; }

/* Page-grid — 2-column split for pages, collapses к stack на узких экранах.
   Используется чтобы list+form / list+history шли side-by-side. */
.page-grid {
    display: grid;
    gap: 18px;
    align-items: start;
}
.page-grid--2col {
    grid-template-columns: 1fr;
}
@media (min-width: 1280px) {
    .page-grid--2col { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1600px) {
    .page-grid--main-side { grid-template-columns: 2fr 1fr; }
}

/* Clickable table rows (audit drilldown, etc.) */
.row-clickable { cursor: pointer; }
.row-clickable:hover { background: rgba(75, 110, 224, 0.06); }

/* Severity pill — small variant для inline-после-name placement. */
.sev-pill-sm { margin-left: 6px; font-size: 10px; padding: 1px 5px; }

/* Hidden helper canvas (cameras snapshot pipeline). */
.canvas-hidden { display: none; }

/* Full-width textarea — для long-form JSON / scenario fields. */
.input-fullw { width: 100%; font-size: 12px; }

/* Dashboard KPI panels. */
.kpi-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 12px;
}
.kpi-row:last-child { margin-bottom: 0; }
.kpi {
    flex: 1 1 80px;
    min-width: 70px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 10px 12px;
    text-align: center;
}
.kpi-num {
    font-family: var(--font-mono);
    font-size: 22px;
    font-weight: 500;
    color: var(--fg-0);
    line-height: 1.1;
}
.kpi-num.kpi-good { color: var(--jade); }
.kpi-num.kpi-warn { color: var(--gold); }
.kpi-num.kpi-bad  { color: var(--red); }
.kpi-lbl {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--fg-2);
    margin-top: 4px;
}

/* Operator outcome breakdown bar (operators page). */
.breakdown-bar {
    display: flex;
    height: 14px;
    width: 200px;
    border: 1px solid var(--border);
    border-radius: 2px;
    overflow: hidden;
}
.breakdown-bar .bb-seg { display: block; min-width: 0; }
.breakdown-bar .bb-good { background: var(--jade); }
.breakdown-bar .bb-ok   { background: rgba(95,197,160,0.5); }
.breakdown-bar .bb-bad  { background: var(--red); }
.breakdown-bar .bb-warn { background: var(--orange); }