/**
 * Styles - Web Application
 * Dark sidebar layout with teal accents
 */

/* ===== CSS Variables ===== */
:root {
    --primary-color: #0f766e;
    --primary-dark: #0d5f59;
    --primary-light: #14b8a6;
    --secondary-color: #475569;
    --accent-color: #f59e0b;
    --accent-dark: #d97706;

    --bg-dark: #0f172a;
    --bg-medium: #1e293b;
    --bg-light: #334155;
    --bg-card: #1e293b;

    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;

    --success-color: #10b981;
    --success-bg: rgba(16, 185, 129, 0.15);
    --error-color: #ef4444;
    --error-bg: rgba(239, 68, 68, 0.15);
    --warning-color: #f59e0b;
    --warning-bg: rgba(245, 158, 11, 0.15);
    --info-color: #3b82f6;
    --info-bg: rgba(59, 130, 246, 0.15);

    --border-color: #334155;
    --border-radius: 12px;
    --border-radius-sm: 8px;
    --border-radius-lg: 16px;

    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.3);

    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;

    --sidebar-width: 220px;
    --content-pad-x: clamp(16px, 2.2vw, 40px);
    --content-pad-y: clamp(18px, 2vw, 32px);
    --layout-gap: clamp(12px, 1.4vw, 20px);
    --page-max: 1800px;
    --page-max-narrow: 1200px;
    --side-panel: clamp(280px, 22vw, 380px);
}

/* ===== Reset & Base ===== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    overflow-x: clip;
}

body {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-primary);
    background-color: var(--bg-dark);
    min-height: 100vh;
    overflow-x: clip;
}

a { color: var(--primary-light); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ===== Ambient background (диспетчерская) ===== */
.bg-wrapper {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
    background: #070b12;
}

.bg-base {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 90% 70% at 15% 10%, rgba(13, 148, 136, 0.16) 0%, transparent 55%),
        radial-gradient(ellipse 80% 60% at 88% 18%, rgba(30, 64, 110, 0.18) 0%, transparent 50%),
        radial-gradient(ellipse 70% 50% at 50% 100%, rgba(15, 118, 110, 0.1) 0%, transparent 55%),
        linear-gradient(180deg, #0a1018 0%, #070b12 45%, #05080e 100%);
}

.bg-grid {
    position: absolute;
    inset: 0;
    opacity: 0.22;
    background-image:
        linear-gradient(rgba(94, 234, 212, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(94, 234, 212, 0.045) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 75% 70% at 50% 40%, #000 20%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 40%, #000 20%, transparent 75%);
    animation: bgGridPulse 14s ease-in-out infinite;
}

.background-animation {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    overflow: hidden;
}

.background-animation .orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0;
    will-change: transform, opacity;
    mix-blend-mode: screen;
}

.background-animation .orb-1 {
    width: 55vw;
    height: 55vw;
    max-width: 720px;
    max-height: 720px;
    background: radial-gradient(circle, rgba(20, 184, 166, 0.22) 0%, transparent 68%);
    top: -12%;
    left: -8%;
    animation: orbDrift1 42s ease-in-out infinite, orbFadeIn 2.4s ease-out 0.2s forwards;
}

.background-animation .orb-2 {
    width: 48vw;
    height: 48vw;
    max-width: 640px;
    max-height: 640px;
    background: radial-gradient(circle, rgba(56, 120, 180, 0.18) 0%, transparent 70%);
    top: -10%;
    right: -12%;
    animation: orbDrift2 52s ease-in-out infinite, orbFadeIn 2.4s ease-out 0.6s forwards;
}

.background-animation .orb-3 {
    width: 50vw;
    height: 50vw;
    max-width: 680px;
    max-height: 680px;
    background: radial-gradient(circle, rgba(15, 118, 110, 0.16) 0%, transparent 70%);
    bottom: -18%;
    left: 28%;
    animation: orbDrift3 48s ease-in-out infinite, orbFadeIn 2.4s ease-out 1s forwards;
}

.bg-sheen {
    position: absolute;
    inset: -20% -10%;
    background: linear-gradient(
        115deg,
        transparent 35%,
        rgba(94, 234, 212, 0.035) 48%,
        transparent 62%
    );
    animation: bgSheen 28s ease-in-out infinite;
}

.bg-vignette {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 85% 80% at 50% 45%, transparent 35%, rgba(3, 6, 12, 0.55) 100%);
}

@keyframes orbFadeIn {
    to { opacity: 1; }
}

@keyframes orbDrift1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(8vw, 10vh) scale(1.06); }
}

@keyframes orbDrift2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(-7vw, 8vh) scale(1.05); }
}

@keyframes orbDrift3 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(5vw, -6vh) scale(1.04); }
}

@keyframes bgSheen {
    0%, 100% { transform: translateX(-8%) rotate(0.5deg); opacity: 0.7; }
    50%      { transform: translateX(8%) rotate(-0.5deg); opacity: 1; }
}

@keyframes bgGridPulse {
    0%, 100% { opacity: 0.16; }
    50%      { opacity: 0.28; }
}

/* legacy hooks — particles removed */
.background-lines,
.background-particles {
    display: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .background-animation .orb,
    .bg-sheen,
    .bg-grid {
        animation: none !important;
    }
    .background-animation .orb {
        opacity: 0.85;
    }
}

/* ===== Sidebar (в тон ambient-фону) ===== */
.sidebar {
    position: fixed;
    top: 0; left: 0;
    width: var(--sidebar-width);
    height: 100vh;
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.04) 0%,
            transparent 28%,
            rgba(0, 0, 0, 0.12) 100%
        ),
        linear-gradient(
            165deg,
            rgba(13, 148, 136, 0.1) 0%,
            rgba(10, 16, 28, 0.55) 42%,
            rgba(5, 8, 14, 0.72) 100%
        ),
        rgba(7, 11, 18, 0.58);
    backdrop-filter: blur(22px) saturate(1.15);
    -webkit-backdrop-filter: blur(22px) saturate(1.15);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
        12px 0 40px rgba(0, 0, 0, 0.28),
        inset -1px 0 0 rgba(94, 234, 212, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    z-index: 200;
    overflow-y: auto;
}

.sidebar-content {
    display: flex;
    flex-direction: column;
    padding: 20px 0;
}

.sidebar-content a,
.sidebar-content .sidebar-link {
    padding: 11px 22px;
    margin: 1px 10px;
    color: rgba(148, 163, 184, 0.92);
    font-weight: 500;
    font-size: 0.92rem;
    text-decoration: none;
    transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease;
    border-left: none;
    border-radius: 8px;
    border: 1px solid transparent;
}

/* Make button-links look like sidebar links (no native button chrome) */
.sidebar-content button.sidebar-link {
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: 0;
    box-shadow: none !important;
    width: calc(100% - 20px);
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}

.sidebar-content button.sidebar-link:hover,
.sidebar-content button.sidebar-link:active,
.sidebar-content button.sidebar-link:focus,
.sidebar-content button.sidebar-link:focus-visible {
    box-shadow: none !important;
    outline: none !important;
}

.sidebar-content a:hover,
.sidebar-content .sidebar-link:hover {
    color: rgba(241, 245, 249, 0.98);
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.08);
    text-decoration: none;
}

.sidebar-content a.active,
.sidebar-content a.sidebar-section-link:hover {
    color: #ccfbf1;
}

.sidebar-content a.active {
    background:
        linear-gradient(135deg, rgba(20, 184, 166, 0.16) 0%, rgba(255, 255, 255, 0.03) 100%);
    border-color: rgba(45, 212, 191, 0.28);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.sidebar-content a.sidebar-section-link {
    color: rgba(226, 232, 240, 0.88);
    font-weight: 600;
    letter-spacing: 0.01em;
}

.sidebar-content a.sidebar-section-link--with-badge {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.sidebar-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 7px 3px;
    border-radius: 5px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.2;
    user-select: none;
    pointer-events: none;
}

.sidebar-badge--beta {
    color: #99f6e4;
    background:
        linear-gradient(135deg, rgba(45, 212, 191, 0.22) 0%, rgba(13, 148, 136, 0.12) 100%);
    border: 1px solid rgba(45, 212, 191, 0.38);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 0 12px rgba(45, 212, 191, 0.12);
}

.sidebar-content a:hover .sidebar-badge--beta,
.sidebar-content a.active .sidebar-badge--beta {
    color: #ccfbf1;
    border-color: rgba(94, 234, 212, 0.55);
    background:
        linear-gradient(135deg, rgba(45, 212, 191, 0.32) 0%, rgba(20, 184, 166, 0.16) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        0 0 14px rgba(45, 212, 191, 0.18);
}

.sidebar-divider {
    border: none;
    height: 1px;
    margin: 10px 18px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(94, 234, 212, 0.16) 20%,
        rgba(255, 255, 255, 0.12) 50%,
        rgba(94, 234, 212, 0.16) 80%,
        transparent 100%
    );
}

.sidebar-icon {
    display: block;
    padding: 10px 24px 8px;
    color: rgba(94, 234, 212, 0.55);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 600;
}

.sidebar-group {
    display: block;
}

.sidebar-group[open] {
    padding-bottom: 4px;
}

.sidebar-group-toggle {
    position: relative;
    list-style: none;
    cursor: pointer;
    user-select: none;
    padding-right: 42px;
}

.sidebar-group-toggle::-webkit-details-marker {
    display: none;
}

.sidebar-group-toggle::marker {
    content: "";
}

.sidebar-group-toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 24px;
    width: 8px;
    height: 8px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-65%) rotate(45deg);
    transition: transform 0.18s ease;
    opacity: 0.9;
}

.sidebar-group[open] > .sidebar-group-toggle::after {
    transform: translateY(-35%) rotate(225deg);
}

.sidebar-group-items {
    display: grid;
}

.sidebar-nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sidebar-nav-icon {
    width: 18px;
    height: 18px;
    color: var(--primary-light);
    opacity: 0.85;
    flex-shrink: 0;
}

.sidebar-content a.sidebar-nav-link:hover .sidebar-nav-icon,
.sidebar-content a.sidebar-nav-link.active .sidebar-nav-icon {
    opacity: 1;
}

/* (removed) collapsible directories styles */

.auth-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 24px !important;
    border-left: none !important;
    margin: 0 10px !important;
}

.auth-icon svg {
    width: 32px;
    height: 32px;
    color: rgba(148, 163, 184, 0.9);
    transition: color var(--transition-fast);
}

.auth-icon:hover svg {
    color: #5eead4;
}

/* User info in sidebar */
.sidebar-user {
    padding: 12px 18px;
    margin: 0 10px 4px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-primary);
    font-size: 0.9rem;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        linear-gradient(165deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 100%),
        rgba(8, 14, 24, 0.35);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.sidebar-user svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: #5eead4;
    opacity: 0.9;
}

.sidebar-user-name {
    font-weight: 600;
    color: #ccfbf1;
}

.sidebar-logout {
    display: block;
}

.sidebar-content .sidebar-logout:hover {
    color: #fca5a5 !important;
    background: rgba(239, 68, 68, 0.1) !important;
    border-color: rgba(248, 113, 113, 0.28) !important;
}

/* ===== Main Content ===== */
.container {
    position: relative;
    z-index: 10;
    margin-left: var(--sidebar-width);
    padding: var(--content-pad-y) var(--content-pad-x);
    width: calc(100% - var(--sidebar-width));
    max-width: none;
    animation: fadeIn 0.4s ease-out;
}

.container > * {
    max-width: var(--page-max-narrow);
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.container-center {
    position: relative;
    z-index: 10;
    margin-left: var(--sidebar-width);
    padding: clamp(28px, 4vw, 48px) var(--content-pad-x);
    width: calc(100% - var(--sidebar-width));
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: fadeIn 0.4s ease-out;
}

.container h1, .container-center h1 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 24px;
}

/* ===== Actions Bar ===== */
.actions-block {
    margin-bottom: 24px;
}

.actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.actions-block .actions {
    margin-bottom: 0;
}

.search-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
}

.search-input-wrap {
    position: relative;
    width: 100%;
    flex: 1 1 auto;
    min-width: 240px;
}

.search-input-wrap input {
    width: 100%;
    padding: 12px 18px;
    background: var(--bg-dark);
    border: 1.5px solid var(--primary-color);
    border-radius: var(--border-radius-sm);
    color: var(--text-primary);
    font-size: 0.95rem;
}

.search-input-wrap input::placeholder {
    color: var(--text-muted);
}

.search-input-wrap input:focus {
    outline: none;
    border-color: var(--primary-light);
}

/* ===== Search Modal ===== */
.search-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    align-items: center;
    justify-content: center;
}

.search-overlay.active {
    display: flex;
}

.search-modal {
    position: relative;
    background: var(--bg-medium);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: 28px 32px 24px;
    width: 90%;
    max-width: 480px;
    box-shadow: var(--shadow-lg);
    animation: modalIn 0.2s ease;
}

@keyframes modalIn {
    from { opacity: 0; transform: translateY(-16px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.search-modal h2 {
    margin: 0 0 20px;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text-primary);
}

.search-modal label {
    display: block;
    margin-bottom: 4px;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.search-modal input {
    width: 100%;
    padding: 9px 12px;
    margin-bottom: 14px;
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    color: var(--text-primary);
    font-size: 0.9rem;
    transition: border-color var(--transition-fast);
}

.search-modal input::placeholder {
    color: var(--text-muted);
}

.search-modal input:focus {
    outline: none;
    border-color: var(--primary-light);
    box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.2);
}

.search-modal-actions {
    display: flex;
    gap: 10px;
    margin-top: 6px;
}

.search-modal-actions .btn-search {
    flex: 1;
    background: var(--primary-color);
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: var(--border-radius-sm);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.search-modal-actions .btn-search:hover {
    background: var(--primary-dark);
}

.search-modal-actions .btn-reset {
    padding: 10px 16px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    color: var(--text-secondary);
    font-size: 0.9rem;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    transition: border-color var(--transition-fast), color var(--transition-fast);
}

.search-modal-actions .btn-reset:hover {
    border-color: var(--text-secondary);
    color: var(--text-primary);
}

.search-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: rgba(64, 14, 14, 0.58) !important;
    border: none !important;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.78) !important;
    cursor: pointer;
    line-height: 1;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition:
        background var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast),
        box-shadow var(--transition-fast);
}

.search-modal-close svg {
    display: block;
    flex-shrink: 0;
}

.search-modal-close:hover {
    background: rgba(64, 14, 14, 0.72) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.34);
}

.search-modal-close:active {
    transform: translateY(1px);
}

.search-modal-wrapper {
    position: relative;
}

/* ===== Buttons ===== */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: var(--border-radius-sm);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn:hover { text-decoration: none; }

.btn-outline {
    background: transparent;
    color: var(--primary-light);
    border: 1.5px solid var(--primary-color);
    padding: 9px 19px;
}

.btn-outline:hover {
    background: rgba(20, 184, 166, 0.1);
    border-color: var(--primary-light);
    color: var(--primary-light);
    transform: translateY(-1px);
}

.btn-accent {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: white;
    border: none;
    border-radius: var(--border-radius-sm);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all var(--transition-fast);
    box-shadow: 0 4px 12px rgba(15, 118, 110, 0.3);
}

.btn-accent:hover {
    background: linear-gradient(135deg, var(--primary-light), var(--primary-color));
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(15, 118, 110, 0.4);
    text-decoration: none;
    color: white;
}

.back-to-list {
    margin-top: 16px;
    margin-bottom: 0;
}

.btn-sm {
    padding: 6px 12px;
    font-size: 0.85rem;
}

.btn-restore {
    background: var(--success-bg);
    color: var(--success-color);
    border: 1px solid rgba(16, 185, 129, 0.3);
    padding: 6px 14px;
    border-radius: var(--border-radius-sm);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-restore:hover {
    background: rgba(16, 185, 129, 0.25);
}

/* ===== Data Table ===== */
.data-table {
    width: 100%;
    border-collapse: collapse;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    animation: fadeIn 0.4s ease-out;
}

/* ===== Glassmorphism (по гайду) ===== */
.glassPanel {
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background:
        linear-gradient(
            165deg,
            rgba(255, 255, 255, 0.06) 0%,
            rgba(255, 255, 255, 0.02) 48%,
            rgba(0, 0, 0, 0.06) 100%
        ),
        rgba(6, 8, 12, 0.22);
    box-shadow:
        0 26px 74px rgba(0, 0, 0, 0.58),
        0 0 42px rgba(230, 235, 245, 0.03),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(18px) saturate(1.08);
    -webkit-backdrop-filter: blur(18px) saturate(1.08);
}

/* ===== Edit pages: glass window around forms ===== */
.edit-glass-window {
    border: 1px solid rgba(255, 255, 255, 0.12);
    background:
        linear-gradient(
            165deg,
            rgba(255, 255, 255, 0.06) 0%,
            rgba(255, 255, 255, 0.02) 48%,
            rgba(0, 0, 0, 0.06) 100%
        ),
        rgba(6, 8, 12, 0.22);
    box-shadow:
        0 26px 74px rgba(0, 0, 0, 0.58),
        0 0 42px rgba(230, 235, 245, 0.03),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(18px) saturate(1.08);
    -webkit-backdrop-filter: blur(18px) saturate(1.08);
    border-radius: 16px;
    padding: 18px 18px 8px;
    width: 100%;
    max-width: 640px;
}

.edit-glass-window form {
    max-width: none !important;
}

/* Применяем стекло к окнам/таблицам/попапам без правок HTML */
.data-table,
.events-table-wrap,
.search-modal,
.menu-content,
.tp-datepicker-popover,
.analytics-kpi-card,
.analytics-chart-card,
.cam-toolbar,
.cam-cell,
.cam-loading,
.cam-error-overlay,
.cam-barrier-summary,
.cameras-page .barrier-log-window,
.cameras-page .camera-console-window,
.cameras-page .barrier-log-header,
.cameras-page .camera-console-header,
.pagination-arrow,
.pagination-num {
    border: 1px solid rgba(255, 255, 255, 0.12);
    background:
        linear-gradient(
            165deg,
            rgba(255, 255, 255, 0.06) 0%,
            rgba(255, 255, 255, 0.02) 48%,
            rgba(0, 0, 0, 0.06) 100%
        ),
        rgba(6, 8, 12, 0.22);
    box-shadow:
        0 26px 74px rgba(0, 0, 0, 0.58),
        0 0 42px rgba(230, 235, 245, 0.03),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(18px) saturate(1.08);
    -webkit-backdrop-filter: blur(18px) saturate(1.08);
}

/* ===== Glassmorphism for buttons & search inputs ===== */
button,
.btn,
.btn-outline,
.btn-accent,
.btn-menu,
.cam-layout-btn,
.cam-cell-btn,
.cameras-page .barrier-log-clear-btn,
.auth-form button,
.events-page .events-search-input,
.search-input-wrap input,
input[type="search"] {
    border: 1px solid rgba(255, 255, 255, 0.14);
    background:
        linear-gradient(
            165deg,
            rgba(255, 255, 255, 0.08) 0%,
            rgba(255, 255, 255, 0.03) 48%,
            rgba(0, 0, 0, 0.06) 100%
        ),
        rgba(6, 8, 12, 0.20);
    box-shadow:
        0 18px 48px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(14px) saturate(1.06);
    -webkit-backdrop-filter: blur(14px) saturate(1.06);
}

button:hover,
.btn:hover,
.btn-outline:hover,
.btn-accent:hover,
.btn-menu:hover,
.cam-layout-btn:hover,
.cam-cell-btn:hover,
.cameras-page .barrier-log-clear-btn:hover {
    border-color: rgba(255, 255, 255, 0.22);
    background:
        linear-gradient(
            165deg,
            rgba(255, 255, 255, 0.10) 0%,
            rgba(255, 255, 255, 0.04) 48%,
            rgba(0, 0, 0, 0.08) 100%
        ),
        rgba(6, 8, 12, 0.22);
}

button:active,
.btn:active,
.btn-outline:active,
.btn-accent:active,
.btn-menu:active,
.cam-layout-btn:active,
.cam-cell-btn:active {
    transform: translateY(1px);
}

/* Чёткий фокус для клавиатуры */
button:focus-visible,
.btn:focus-visible,
.btn-outline:focus-visible,
.btn-accent:focus-visible,
.btn-menu:focus-visible,
.cam-layout-btn:focus-visible,
.cam-cell-btn:focus-visible,
.events-page .events-search-input:focus-visible,
.search-input-wrap input:focus-visible,
input[type="search"]:focus-visible {
    outline: 2px solid rgba(20, 184, 166, 0.55);
    outline-offset: 2px;
}

/* Камерные «окна-консоли» ранее форсили bg через !important — переопределяем стеклом */
.cameras-page .barrier-log-window,
.cameras-page .camera-console-window {
    background:
        linear-gradient(
            165deg,
            rgba(255, 255, 255, 0.06) 0%,
            rgba(255, 255, 255, 0.02) 48%,
            rgba(0, 0, 0, 0.06) 100%
        ),
        rgba(6, 8, 12, 0.22) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

.data-table th,
.data-table td {
    padding: 14px 18px;
    text-align: left;
}

.data-table th {
    background: rgba(255, 255, 255, 0.03);
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    white-space: nowrap;
}

.data-table td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    font-size: 0.95rem;
}

.data-table tbody tr {
    transition: background var(--transition-fast);
}

.data-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.04);
}

.data-table tbody tr:last-child td {
    border-bottom: none;
}

.data-table .tp-datetime {
    display: block;
    white-space: nowrap;
}

.data-table .tp-datetime-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    line-height: 1.15;
}

.data-table .tp-datetime-stack > .tp-datetime:first-child {
    line-height: 1.15;
}

.data-table .tp-datetime--sub {
    margin: 0;
    padding: 0;
    font-size: 0.85em;
    color: var(--text-secondary);
    white-space: nowrap;
    line-height: 1.15;
}

/* ===== Pagination ===== */
.pagination {
    margin-top: 20px;
    display: flex;
    justify-content: center;
}

.pagination-inner {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    min-width: 0;
}

.pagination-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    background: var(--bg-medium);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    color: var(--text-primary);
    text-decoration: none;
    font-size: 1.2rem;
    transition: all var(--transition-fast);
}

.pagination-arrow:hover:not(.disabled) {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.pagination-arrow.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pagination-numbers {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.pagination-numbers > li {
    flex-shrink: 0;
}

.pagination-ellipsis {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 36px;
    padding: 0 2px;
    color: var(--text-secondary);
    font-size: 0.9rem;
    user-select: none;
    letter-spacing: 0.02em;
}

.pagination-num {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    background: var(--bg-medium);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.9rem;
    transition: all var(--transition-fast);
}

.pagination-num:hover:not(.active) {
    background: var(--bg-light);
    border-color: var(--primary-color);
}

.pagination-num.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

/* ===== Action Menu ===== */
.action-menu {
    position: relative;
    display: inline-block;
}

.btn-menu {
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    padding: 6px 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: all var(--transition-fast);
}

.btn-menu:hover {
    background: var(--bg-medium);
}

.btn-menu svg {
    width: 20px;
    height: 20px;
    fill: var(--text-secondary);
}

.menu-content {
    display: none;
    position: fixed;
    /* более прозрачное стекло для меню действий */
    background:
        linear-gradient(
            165deg,
            rgba(255, 255, 255, 0.08) 0%,
            rgba(255, 255, 255, 0.03) 48%,
            rgba(0, 0, 0, 0.06) 100%
        ),
        rgba(6, 8, 12, 0.14);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    min-width: 180px;
    box-shadow: var(--shadow-lg);
    z-index: 10000;
    overflow: hidden;
    backdrop-filter: blur(16px) saturate(1.08);
    -webkit-backdrop-filter: blur(16px) saturate(1.08);
}

.action-menu.open .menu-content {
    display: block;
}

.menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    color: var(--text-primary);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all var(--transition-fast);
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    font-family: inherit;
    text-decoration: none;
}

.menu-item:hover {
    background: var(--bg-light);
    text-decoration: none;
}

.menu-item svg {
    width: 16px;
    height: 16px;
    fill: var(--text-secondary);
}

.btn-delete-small {
    color: var(--error-color) !important;
}

.btn-delete-small:hover {
    background: var(--error-bg) !important;
}

.btn-delete-small svg {
    fill: var(--error-color);
}

.btn-accent-small {
    color: var(--primary-light) !important;
}

.inline {
    display: inline;
}

/* ===== Forms ===== */
form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

label {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.95rem;
    margin-bottom: -8px;
}

input, select, textarea {
    padding: 12px 16px;
    background: var(--bg-dark);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 1rem;
    transition: all var(--transition-fast);
    width: 100%;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.2);
}

input[readonly] {
    opacity: 0.6;
    cursor: not-allowed;
}

input::placeholder {
    color: var(--text-muted);
}

select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2394a3b8' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}

select option {
    background: var(--bg-dark);
    color: var(--text-primary);
}

textarea {
    resize: vertical;
    min-height: 100px;
}

/* ===== Messages ===== */
.message {
    padding: 12px 20px;
    background: var(--success-bg);
    color: var(--success-color);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: var(--border-radius-sm);
    font-weight: 500;
    text-align: center;
}

.error {
    padding: 12px 20px;
    background: var(--error-bg);
    color: var(--error-color);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: var(--border-radius-sm);
    font-weight: 500;
    text-align: center;
}

/* ===== Back Link ===== */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 500;
    margin-bottom: 20px;
    transition: color var(--transition-fast);
}

.back-link:hover {
    color: var(--primary-light);
    text-decoration: none;
}

/* ===== Auth Page ===== */
.auth-page {
    min-height: 100vh;
}

.auth-container {
    position: relative;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 40px 20px;
}

.auth-card {
    width: 100%;
    max-width: 420px;
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background:
        linear-gradient(
            165deg,
            rgba(255, 255, 255, 0.07) 0%,
            rgba(255, 255, 255, 0.02) 48%,
            rgba(0, 0, 0, 0.14) 100%
        ),
        rgba(7, 11, 18, 0.52);
    box-shadow:
        0 26px 74px rgba(0, 0, 0, 0.55),
        0 0 42px rgba(230, 235, 245, 0.03),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(20px) saturate(1.12);
    -webkit-backdrop-filter: blur(20px) saturate(1.12);
    animation: fadeIn 0.5s ease-out;
}

.auth-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.05) 0%,
            rgba(255, 255, 255, 0.015) 100%
        ),
        rgba(8, 14, 24, 0.35);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.auth-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.auth-card-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-muted);
}

.auth-card-dot:nth-child(1) { background: #ff5f56; }
.auth-card-dot:nth-child(2) { background: #ffbd2e; }
.auth-card-dot:nth-child(3) { background: #27c93f; }

.auth-card-label {
    margin-left: 4px;
    color: rgba(204, 251, 241, 0.78);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.auth-card-meta {
    color: rgba(148, 163, 184, 0.85);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.auth-card-body {
    padding: 32px 28px 28px;
}

.auth-header {
    text-align: center;
    margin-bottom: 28px;
}

.auth-icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    border-radius: 16px;
    color: #5eead4;
    background:
        linear-gradient(
            165deg,
            rgba(20, 184, 166, 0.18) 0%,
            rgba(15, 118, 110, 0.08) 100%
        ),
        rgba(6, 8, 12, 0.35);
    border: 1px solid rgba(94, 234, 212, 0.22);
    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.auth-icon-badge svg {
    width: 28px;
    height: 28px;
}

.auth-icon-large {
    font-size: 4rem;
    margin-bottom: 16px;
    display: block;
}

.auth-title {
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 8px;
    letter-spacing: -0.02em;
}

.auth-subtitle {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.auth-hint {
    margin: 12px 0 0;
    padding: 8px 12px;
    display: inline-block;
    color: rgba(148, 163, 184, 0.92);
    font-size: 0.8rem;
    line-height: 1.4;
    border-radius: 8px;
    background: rgba(8, 14, 24, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.auth-hint strong {
    color: #99f6e4;
    font-weight: 600;
}

.auth-error {
    margin: 0 0 18px;
    padding: 12px 14px;
    border-radius: var(--border-radius-sm);
    background: var(--error-bg);
    color: var(--error-color);
    border: 1px solid rgba(239, 68, 68, 0.28);
    font-size: 0.9rem;
    text-align: center;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.auth-field label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(148, 163, 184, 0.95);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.auth-field input {
    width: 100%;
    padding: 12px 14px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.95rem;
    border-radius: var(--border-radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.12);
    background:
        linear-gradient(165deg, rgba(255, 255, 255, 0.06) 0%, rgba(0, 0, 0, 0.1) 100%),
        rgba(10, 16, 26, 0.55);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    outline: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.auth-field input::placeholder {
    color: var(--text-muted);
}

.auth-field input:focus {
    border-color: rgba(94, 234, 212, 0.45);
    box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.18);
}

.auth-submit {
    margin-top: 6px;
    color: #ecfeff !important;
    border: 1px solid rgba(94, 234, 212, 0.38) !important;
    background:
        linear-gradient(
            145deg,
            rgba(45, 212, 191, 0.55) 0%,
            rgba(20, 184, 166, 0.42) 42%,
            rgba(15, 118, 110, 0.55) 100%
        ),
        rgba(7, 11, 18, 0.28) !important;
    box-shadow:
        0 14px 36px rgba(15, 118, 110, 0.28),
        0 0 24px rgba(45, 212, 191, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        inset 0 -1px 0 rgba(0, 0, 0, 0.12) !important;
    backdrop-filter: blur(16px) saturate(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    transition:
        transform var(--transition-fast),
        border-color var(--transition-fast),
        background var(--transition-fast),
        box-shadow var(--transition-fast);
}

.auth-submit:hover {
    color: #ffffff !important;
    border-color: rgba(153, 246, 228, 0.55) !important;
    background:
        linear-gradient(
            145deg,
            rgba(94, 234, 212, 0.62) 0%,
            rgba(45, 212, 191, 0.48) 45%,
            rgba(20, 184, 166, 0.58) 100%
        ),
        rgba(7, 11, 18, 0.22) !important;
    box-shadow:
        0 18px 42px rgba(15, 118, 110, 0.34),
        0 0 32px rgba(45, 212, 191, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.34),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1) !important;
    transform: translateY(-1px);
}

.auth-submit:active {
    transform: translateY(1px);
    box-shadow:
        0 8px 22px rgba(15, 118, 110, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

.btn-block {
    width: 100%;
    justify-content: center;
    padding: 14px 24px;
    font-size: 1.05rem;
    margin-top: 8px;
}

.auth-footer {
    text-align: center;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--border-color);
    color: var(--text-secondary);
}

.auth-link {
    color: var(--primary-light);
    font-weight: 600;
}

.auth-link:hover {
    color: var(--accent-color);
}

/* ===== Camera Page ===== */

.cameras-page.container {
    max-width: none;
    padding-right: var(--content-pad-x);
    display: flex;
    flex-direction: column;
    gap: var(--layout-gap);
}

/* Центрируем основные блоки камеры как у остальных страниц */
.cameras-page.container > * {
    max-width: var(--page-max-narrow);
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.cameras-page.container > .cam-toolbar,
.cameras-page.container > .cam-monitor-layout,
.cameras-page.container > .cam-section-divider,
.cameras-page.container > .cam-map-section,
.cameras-page.container > .cam-archive-section,
.archive-page.container > .cam-archive-section {
    max-width: var(--page-max);
}

/* Окна камеры/журнала */
.cameras-page .camera-console-window,
.cameras-page .barrier-log-window {
    max-width: none;
    width: 100%;
}

.cam-monitor-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--side-panel);
    gap: var(--layout-gap);
    align-items: start;
}

.cam-monitor-main,
.cam-monitor-side {
    min-width: 0;
}

.cam-monitor-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.cam-monitor-side {
    display: flex;
    flex-direction: column;
    gap: var(--layout-gap);
    align-items: stretch;
}

.cam-monitor-side > .cam-side-card {
    flex-shrink: 0;
}

.cam-side-card {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background:
        linear-gradient(
            165deg,
            rgba(255, 255, 255, 0.07) 0%,
            rgba(255, 255, 255, 0.02) 48%,
            rgba(0, 0, 0, 0.12) 100%
        ),
        rgba(7, 11, 18, 0.45);
    box-shadow:
        0 18px 44px rgba(0, 0, 0, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(18px) saturate(1.12);
    -webkit-backdrop-filter: blur(18px) saturate(1.12);
    border-radius: 14px;
    padding: 18px 20px;
}

.cam-side-card-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 14px;
    color: rgba(236, 253, 245, 0.92);
    font-size: 0.9rem;
    font-weight: 700;
}

.cam-barrier-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #94a3b8;
    box-shadow: 0 0 0 4px rgba(148, 163, 184, 0.18);
    transition: background 0.35s ease, box-shadow 0.35s ease;
}

.cam-barrier-open .cam-barrier-status-dot {
    background: var(--success-color);
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.18);
}

.cam-barrier-closed .cam-barrier-status-dot {
    background: var(--error-color);
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.18);
}

.cam-barrier-visual {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 12px;
    overflow: visible;
    border-radius: 8px;
    padding: 10px 0 6px;
}

.cam-barrier-visual svg {
    width: min(100%, 300px);
    height: auto;
    fill: none;
    display: block;
    overflow: visible;
}

.cam-barrier-post,
.cam-barrier-pivot {
    fill: rgba(148, 163, 184, 0.14);
    stroke: rgba(148, 163, 184, 0.42);
    stroke-width: 2.5;
    transition: fill 0.4s ease, stroke 0.4s ease;
}

.cam-barrier-pivot {
    transform-box: fill-box;
    transform-origin: center;
}

.cam-barrier-arm-group {
    transform-box: view-box;
    transform-origin: 58px 96px;
    transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

.cam-barrier-idle .cam-barrier-arm-group,
.cam-barrier-ready .cam-barrier-arm-group {
    transform: rotate(-18deg);
}

.cam-barrier-open .cam-barrier-arm-group {
    transform: rotate(-52deg);
    transition: transform 0.85s cubic-bezier(0.22, 1.15, 0.36, 1);
}

.cam-barrier-closed .cam-barrier-arm-group {
    transform: rotate(0deg);
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.68, 0.06);
}

.cam-barrier-arm {
    stroke: #94a3b8;
    stroke-width: 12;
    stroke-linecap: round;
    filter: drop-shadow(0 0 6px rgba(148, 163, 184, 0.2));
    transition: stroke 0.35s ease, filter 0.35s ease;
}

.cam-barrier-open .cam-barrier-arm {
    stroke: var(--success-color);
    filter: drop-shadow(0 0 12px rgba(16, 185, 129, 0.55));
    animation: camBarrierArmGlow 1.4s ease-in-out 0.15s 2;
}

.cam-barrier-open .cam-barrier-post,
.cam-barrier-open .cam-barrier-pivot {
    fill: rgba(16, 185, 129, 0.12);
    stroke: rgba(16, 185, 129, 0.55);
}

.cam-barrier-open .cam-barrier-pivot {
    animation: camBarrierPivotPulse 0.55s cubic-bezier(0.22, 1.2, 0.36, 1);
}

.cam-barrier-open .cam-barrier-status-dot {
    animation: camBarrierDotPulse 0.7s cubic-bezier(0.22, 1.1, 0.36, 1);
}

@keyframes camBarrierArmGlow {
    0%, 100% {
        filter: drop-shadow(0 0 8px rgba(16, 185, 129, 0.4));
    }
    50% {
        filter: drop-shadow(0 0 20px rgba(16, 185, 129, 0.85));
    }
}

@keyframes camBarrierPivotPulse {
    0% { transform: scale(1); }
    35% { transform: scale(1.18); }
    100% { transform: scale(1); }
}

@keyframes camBarrierDotPulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.18);
    }
    40% {
        transform: scale(1.35);
        box-shadow: 0 0 0 8px rgba(16, 185, 129, 0.32);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.18);
    }
}

@media (prefers-reduced-motion: reduce) {
    .cam-barrier-arm-group,
    .cam-barrier-arm,
    .cam-barrier-pivot,
    .cam-barrier-status-dot {
        animation: none !important;
        transition-duration: 0.01ms !important;
    }
}

.cam-barrier-closed .cam-barrier-arm {
    stroke: var(--error-color);
    filter: drop-shadow(0 0 10px rgba(239, 68, 68, 0.45));
}

.cam-barrier-closed .cam-barrier-post,
.cam-barrier-closed .cam-barrier-pivot {
    fill: rgba(239, 68, 68, 0.12);
    stroke: rgba(239, 68, 68, 0.55);
}

.cam-barrier-base {
    stroke: rgba(148, 163, 184, 0.36);
    stroke-width: 4;
    stroke-linecap: round;
}

.cam-barrier-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.cam-barrier-actions[hidden] {
    display: none !important;
    margin: 0;
    padding: 0;
    border: 0;
}

.cam-barrier-actions .cam-btn-barrier,
.cam-barrier-actions .cam-btn-deny {
    width: 100%;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 600;
}

.cam-barrier-actions .cam-btn-barrier {
    background:
        linear-gradient(165deg, rgba(16, 185, 129, 0.28) 0%, rgba(6, 95, 70, 0.18) 100%),
        rgba(8, 20, 18, 0.45);
    color: #a7f3d0;
    border: 1px solid rgba(52, 211, 153, 0.45);
    border-radius: 10px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.cam-barrier-actions .cam-btn-barrier:hover {
    background:
        linear-gradient(165deg, rgba(16, 185, 129, 0.38) 0%, rgba(6, 95, 70, 0.24) 100%),
        rgba(8, 24, 20, 0.55);
    border-color: rgba(52, 211, 153, 0.65);
    color: #ecfdf5;
}

.cam-barrier-actions .cam-btn-deny {
    background:
        linear-gradient(165deg, rgba(239, 68, 68, 0.22) 0%, rgba(127, 29, 29, 0.16) 100%),
        rgba(20, 10, 12, 0.45);
    color: #fecaca;
    border: 1px solid rgba(248, 113, 113, 0.42);
    border-radius: 10px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.cam-barrier-actions .cam-btn-deny:hover {
    background:
        linear-gradient(165deg, rgba(239, 68, 68, 0.32) 0%, rgba(127, 29, 29, 0.22) 100%),
        rgba(24, 10, 12, 0.55);
    border-color: rgba(248, 113, 113, 0.62);
    color: #fff1f2;
}

.cam-side-card-text {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.85rem;
    line-height: 1.45;
    text-align: center;
}

/* Toolbar */
.cam-toolbar {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 12px 16px;
    background:
        linear-gradient(
            165deg,
            rgba(255, 255, 255, 0.07) 0%,
            rgba(255, 255, 255, 0.02) 50%,
            rgba(0, 0, 0, 0.1) 100%
        ),
        rgba(7, 11, 18, 0.42);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    box-shadow:
        0 16px 40px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(18px) saturate(1.12);
    -webkit-backdrop-filter: blur(18px) saturate(1.12);
    max-width: var(--page-max);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
}

.cam-toolbar-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.cam-toolbar-label {
    color: rgba(148, 163, 184, 0.9);
    font-size: 0.76rem;
    font-weight: 600;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.cam-toolbar-sep {
    width: 1px;
    height: 24px;
    background: linear-gradient(
        180deg,
        transparent,
        rgba(94, 234, 212, 0.28),
        transparent
    );
    flex-shrink: 0;
}

.cam-toolbar-status {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: rgba(148, 163, 184, 0.8);
    font-size: 0.8rem;
    white-space: nowrap;
    flex-wrap: wrap;
    justify-content: flex-end;
}

#camStatus:empty {
    display: none;
}

.cam-toolbar select {
    width: auto;
    padding: 7px 32px 7px 10px;
    font-size: 0.85rem;
    color: rgba(241, 245, 249, 0.95);
    background:
        linear-gradient(165deg, rgba(255, 255, 255, 0.08) 0%, rgba(0, 0, 0, 0.1) 100%),
        rgba(10, 16, 26, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Layout buttons */
.cam-layout-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 12px;
    background:
        linear-gradient(165deg, rgba(255, 255, 255, 0.06) 0%, rgba(0, 0, 0, 0.08) 100%),
        rgba(8, 14, 24, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: rgba(148, 163, 184, 0.95);
    font-size: 0.82rem;
    font-family: inherit;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.cam-layout-btn:hover {
    color: rgba(241, 245, 249, 0.98);
    border-color: rgba(45, 212, 191, 0.35);
    background:
        linear-gradient(165deg, rgba(255, 255, 255, 0.09) 0%, rgba(0, 0, 0, 0.08) 100%),
        rgba(10, 18, 28, 0.5);
}

.cam-layout-btn.active {
    background:
        linear-gradient(160deg, rgba(20, 184, 166, 0.32) 0%, rgba(15, 118, 110, 0.22) 100%),
        rgba(8, 24, 26, 0.55);
    color: #ecfeff;
    border-color: rgba(45, 212, 191, 0.45);
    box-shadow:
        0 0 0 1px rgba(45, 212, 191, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Grid */
.cam-grid {
    display: grid;
    gap: clamp(6px, 0.8vw, 10px);
    width: 100%;
}

.cam-grid.layout-1x1 {
    grid-template-columns: minmax(0, 1fr);
    max-width: min(1280px, 100%);
}

.cam-grid.layout-2x2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cam-grid.layout-2x3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cam-grid.layout-3x3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Camera cell */
.cam-cell {
    position: relative;
    aspect-ratio: 16 / 9;
    background:
        linear-gradient(165deg, rgba(255, 255, 255, 0.04) 0%, rgba(0, 0, 0, 0.2) 100%),
        rgba(5, 8, 14, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.cam-cell:hover:not(.cam-cell-empty) {
    border-color: rgba(45, 212, 191, 0.45);
    box-shadow:
        0 0 0 1px rgba(45, 212, 191, 0.2),
        0 12px 28px rgba(0, 0, 0, 0.35);
}

.cam-cell-single {
    cursor: default;
    max-width: 1280px;
    aspect-ratio: 16 / 9;
}

.cam-monitor-main .cam-grid.layout-1x1,
.cam-monitor-main .cam-cell-single {
    max-width: none;
}

/* Single-view: back button only (barrier controls moved to side panel) */
.cam-cell-empty {
    cursor: default;
    opacity: 0.5;
}

/* Cell header overlay */
.cam-cell-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: linear-gradient(
        to bottom,
        rgba(6, 12, 20, 0.82) 0%,
        rgba(6, 12, 20, 0.35) 55%,
        transparent 100%
    );
    z-index: 10;
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.cam-cell:hover .cam-cell-header,
.cam-cell-header-visible {
    opacity: 1 !important;
}

.cam-cell-name {
    color: #fff;
    font-size: 0.82rem;
    font-weight: 600;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.cam-cell-actions {
    display: flex;
    gap: 5px;
}

.cam-cell-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background:
        linear-gradient(165deg, rgba(255, 255, 255, 0.16) 0%, rgba(0, 0, 0, 0.12) 100%),
        rgba(8, 14, 24, 0.45);
    backdrop-filter: blur(10px) saturate(1.1);
    -webkit-backdrop-filter: blur(10px) saturate(1.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.cam-cell-btn:hover {
    background:
        linear-gradient(165deg, rgba(255, 255, 255, 0.22) 0%, rgba(0, 0, 0, 0.1) 100%),
        rgba(10, 18, 28, 0.55);
    border-color: rgba(45, 212, 191, 0.4);
}

.cam-cell-btn.active {
    background:
        linear-gradient(160deg, rgba(20, 184, 166, 0.45) 0%, rgba(15, 118, 110, 0.35) 100%);
    border-color: rgba(45, 212, 191, 0.55);
    color: #ecfeff;
}

/* Fullscreen overlay */
.cam-fullscreen-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    background: #000;
}

.cam-fullscreen-overlay[hidden] {
    display: none !important;
}

body.cam-fullscreen-active {
    overflow: hidden;
}

.cam-fullscreen-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    background:
        linear-gradient(
            180deg,
            rgba(8, 14, 24, 0.82) 0%,
            rgba(8, 14, 24, 0.35) 70%,
            transparent 100%
        );
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    z-index: 2;
}

.cam-fullscreen-title {
    color: rgba(236, 253, 245, 0.95);
    font-size: 0.95rem;
    font-weight: 600;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.cam-fullscreen-body {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cam-fullscreen-body img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
}

.cam-fullscreen-close {
    flex-shrink: 0;
}

.cam-fullscreen-barrier-menu {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 14px;
    background:
        linear-gradient(
            165deg,
            rgba(255, 255, 255, 0.08) 0%,
            rgba(255, 255, 255, 0.02) 50%,
            rgba(0, 0, 0, 0.12) 100%
        ),
        rgba(8, 14, 24, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow:
        0 16px 40px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(18px) saturate(1.15);
    -webkit-backdrop-filter: blur(18px) saturate(1.15);
}

.cam-fullscreen-barrier-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 168px;
    padding: 10px 18px;
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    border-radius: 10px;
}

.cam-fullscreen-barrier-open {
    background:
        linear-gradient(165deg, rgba(16, 185, 129, 0.28) 0%, rgba(6, 95, 70, 0.18) 100%),
        rgba(8, 20, 18, 0.45);
    color: #a7f3d0;
    border: 1px solid rgba(52, 211, 153, 0.45);
}

.cam-fullscreen-barrier-open:hover {
    background:
        linear-gradient(165deg, rgba(16, 185, 129, 0.38) 0%, rgba(6, 95, 70, 0.24) 100%),
        rgba(8, 24, 20, 0.55);
    color: #ecfdf5;
}

.cam-fullscreen-barrier-deny {
    background:
        linear-gradient(165deg, rgba(239, 68, 68, 0.22) 0%, rgba(127, 29, 29, 0.16) 100%),
        rgba(20, 10, 12, 0.45);
    color: #fecaca;
    border: 1px solid rgba(248, 113, 113, 0.42);
}

.cam-fullscreen-barrier-deny:hover {
    background:
        linear-gradient(165deg, rgba(239, 68, 68, 0.32) 0%, rgba(127, 29, 29, 0.22) 100%),
        rgba(24, 10, 12, 0.55);
    color: #fff1f2;
}

@media (max-width: 640px) {
    .cam-fullscreen-barrier-menu {
        left: 12px;
        right: 12px;
        bottom: 16px;
        transform: none;
        flex-direction: column;
        width: auto;
    }

    .cam-fullscreen-barrier-btn {
        width: 100%;
        min-width: 0;
    }
}

/* Back-to-grid button in single camera view */
.cam-cell-actions .cam-btn-back {
    background: rgba(64, 14, 14, 0.58) !important;
    color: rgba(255, 255, 255, 0.78) !important;
    backdrop-filter: blur(4px);
}

.cam-cell-actions .cam-btn-back:hover {
    background: rgba(64, 14, 14, 0.72) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Cell body */
.cam-cell-body {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cam-cell-body img,
.cam-cell-body video.cam-live-video {
    /* Как в архиве: растягиваем на ячейку и вписываем кадр целиком. */
    width: 100% !important;
    height: 100% !important;
    max-width: none;
    max-height: none;
    object-fit: contain !important;
    object-position: center center;
    display: block;
    background: #000;
}

.cam-fullscreen-body {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
}

.cam-fullscreen-body img.cam-fullscreen-img,
.cam-fullscreen-body video.cam-fullscreen-video {
    width: 100% !important;
    height: 100% !important;
    max-width: none;
    max-height: none;
    object-fit: contain !important;
    object-position: center center;
    display: block;
    background: #000;
}

.cam-empty-body {
    flex-direction: column;
    gap: 8px;
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* Loading spinner */
.cam-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(165deg, rgba(255, 255, 255, 0.04) 0%, rgba(0, 0, 0, 0.18) 100%),
        rgba(5, 8, 14, 0.78);
    z-index: 5;
}

.cam-cell.loaded .cam-loading {
    display: none;
}

.cam-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(255, 255, 255, 0.12);
    border-top-color: #5eead4;
    border-radius: 50%;
    animation: camSpin 0.7s linear infinite;
}

@keyframes camSpin {
    to { transform: rotate(360deg); }
}

/* Error overlay */
.cam-error-overlay {
    position: absolute;
    inset: 0;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background:
        linear-gradient(165deg, rgba(239, 68, 68, 0.08) 0%, rgba(0, 0, 0, 0.2) 100%),
        rgba(8, 6, 10, 0.82);
    color: #fca5a5;
    font-size: 0.85rem;
    z-index: 5;
}

/* Barrier Log Console + camera console — ambient glass */
.cameras-page .barrier-log-window,
.cameras-page .camera-console-window {
    display: block;
    margin: 20px 0 0;
    width: 100%;
    background:
        linear-gradient(
            165deg,
            rgba(255, 255, 255, 0.07) 0%,
            rgba(255, 255, 255, 0.02) 48%,
            rgba(0, 0, 0, 0.14) 100%
        ),
        rgba(7, 11, 18, 0.48) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 14px;
    box-shadow:
        0 20px 48px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(20px) saturate(1.12);
    -webkit-backdrop-filter: blur(20px) saturate(1.12);
    overflow: hidden;
}

.cam-monitor-layout .camera-console-window,
.cam-monitor-layout .barrier-log-window {
    margin-top: 0;
    max-width: none;
}

.cam-monitor-layout .camera-console-window {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    align-self: start;
    overflow: visible;
}

.cam-monitor-layout .barrier-log-window {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    width: 100%;
    height: auto;
}

/* На всякий случай — центрируем сами окна */
.cameras-page .barrier-log-window,
.cameras-page .camera-console-window {
    margin-left: auto;
    margin-right: auto;
}

.cameras-page .barrier-log-header,
.cameras-page .camera-console-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px 14px;
    padding: 12px 16px;
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.05) 0%,
            rgba(255, 255, 255, 0.015) 100%
        ),
        rgba(8, 14, 24, 0.35);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
    z-index: 5;
    overflow: visible;
    flex-wrap: wrap;
}

.cameras-page .barrier-log-title,
.cameras-page .camera-console-title {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    min-width: 0;
}

.cameras-page .barrier-log-dot,
.cameras-page .camera-console-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-muted);
}

.cameras-page .barrier-log-dot:nth-child(1),
.cameras-page .camera-console-dot:nth-child(1) { background: #ff5f56; }
.cameras-page .barrier-log-dot:nth-child(2),
.cameras-page .camera-console-dot:nth-child(2) { background: #ffbd2e; }
.cameras-page .barrier-log-dot:nth-child(3),
.cameras-page .camera-console-dot:nth-child(3) { background: #27c93f; }

.cameras-page .barrier-log-label,
.cameras-page .camera-console-label {
    margin-left: 4px;
    color: rgba(204, 251, 241, 0.78);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.cameras-page .camera-console-meta,
.cam-toolbar-meta {
    color: rgba(148, 163, 184, 0.9);
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    flex: 0 0 auto;
}

.camera-console-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
    min-width: 0;
    flex: 1 1 280px;
}

.camera-console-preset-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 0 1 auto;
    margin-left: auto;
    max-width: 100%;
}

.camera-console-preset-group .cam-preset-add-btn {
    flex: 0 0 auto;
}

.camera-console-controls > .camera-console-fullscreen-btn {
    flex: 0 0 auto;
}

.camera-console-picker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 0 1 auto;
    max-width: 100%;
}

.camera-console-picker-label {
    color: rgba(148, 163, 184, 0.9);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    flex: 0 0 auto;
}

.camera-console-select-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-width: 0;
    flex: 0 1 auto;
    max-width: 360px;
}

.camera-console-select-trigger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    width: 280px;
    min-width: 220px;
    max-width: 360px;
    padding: 10px 14px;
    font-size: 0.92rem;
    font-weight: 600;
    font-family: inherit;
    line-height: 1.25;
    color: rgba(241, 245, 249, 0.96);
    text-align: left;
    background:
        linear-gradient(
            165deg,
            rgba(255, 255, 255, 0.08) 0%,
            rgba(255, 255, 255, 0.02) 45%,
            rgba(0, 0, 0, 0.12) 100%
        ),
        rgba(8, 14, 24, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(14px) saturate(1.12);
    -webkit-backdrop-filter: blur(14px) saturate(1.12);
    cursor: pointer;
    transition:
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        background var(--transition-fast),
        transform var(--transition-fast);
}

.camera-console-select-value {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.camera-console-select-cam-icon {
    flex-shrink: 0;
    color: var(--primary-light);
    opacity: 0.95;
    filter: drop-shadow(0 0 6px rgba(20, 184, 166, 0.35));
}

.camera-console-select-chevron {
    flex-shrink: 0;
    color: var(--primary-light);
    opacity: 0.85;
    transition: transform var(--transition-fast);
}

.camera-console-select-wrap.is-open .camera-console-select-chevron {
    transform: rotate(180deg);
}

.camera-console-select-trigger:hover:not(:disabled) {
    border-color: rgba(45, 212, 191, 0.4);
    background:
        linear-gradient(
            165deg,
            rgba(255, 255, 255, 0.1) 0%,
            rgba(255, 255, 255, 0.03) 45%,
            rgba(0, 0, 0, 0.12) 100%
        ),
        rgba(10, 18, 28, 0.55);
    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.28),
        0 0 0 1px rgba(45, 212, 191, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.camera-console-select-trigger:focus,
.camera-console-select-trigger:focus-visible {
    outline: none;
    border-color: rgba(20, 184, 166, 0.62);
    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.3),
        0 0 0 3px rgba(20, 184, 166, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.camera-console-select-trigger:active:not(:disabled) {
    transform: translateY(1px);
}

.camera-console-select-trigger:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.camera-console-select-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 120;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px;
    max-height: 280px;
    overflow-y: auto;
    background:
        linear-gradient(
            165deg,
            rgba(255, 255, 255, 0.08) 0%,
            rgba(255, 255, 255, 0.02) 48%,
            rgba(0, 0, 0, 0.12) 100%
        ),
        rgba(8, 14, 24, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    box-shadow:
        0 20px 48px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(18px) saturate(1.15);
    -webkit-backdrop-filter: blur(18px) saturate(1.15);
}

.camera-console-select-menu[hidden] {
    display: none !important;
}

.camera-console-select-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    font-size: 0.88rem;
    font-weight: 600;
    font-family: inherit;
    color: var(--text-primary);
    text-align: left;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--border-radius-sm);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    cursor: pointer;
    transition:
        background var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast);
}

.camera-console-select-option svg {
    flex-shrink: 0;
    color: var(--text-secondary);
    opacity: 0.85;
}

.camera-console-select-option span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.camera-console-select-option:hover,
.camera-console-select-option.is-active {
    background: rgba(45, 212, 191, 0.16);
    border-color: rgba(45, 212, 191, 0.35);
    color: #ecfeff;
}

.camera-console-select-option.is-active svg {
    color: var(--primary-light);
}

.camera-console-select-menu::-webkit-scrollbar {
    width: 6px;
}

.camera-console-select-menu::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
    border-radius: 999px;
}

.cameras-page .barrier-log-clear-btn {
    padding: 5px 11px;
    background:
        linear-gradient(165deg, rgba(255, 255, 255, 0.06) 0%, rgba(0, 0, 0, 0.08) 100%),
        rgba(8, 14, 24, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: rgba(148, 163, 184, 0.95);
    font-size: 0.75rem;
    font-family: inherit;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.cameras-page .barrier-log-clear-btn:hover {
    color: #ecfeff;
    border-color: rgba(45, 212, 191, 0.4);
}

/* Console body - dark terminal look (used only by log) */
.cameras-page .barrier-log-console {
    max-height: 360px;
    overflow-y: auto;
    padding: 12px 16px;
    background:
        linear-gradient(180deg, rgba(8, 14, 22, 0.55) 0%, rgba(4, 7, 12, 0.72) 100%);
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', 'Monaco', monospace;
    font-size: 0.78rem;
    line-height: 1.6;
    color: rgba(148, 163, 184, 0.92);
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.cam-monitor-layout .barrier-log-console {
    flex: 0 0 auto;
    min-height: 160px;
    max-height: 360px;
    overflow-y: auto;
}

/* Camera console body — slight inset so window background shows at edges */
.cameras-page .camera-console-body {
    padding: 10px;
    background:
        linear-gradient(180deg, rgba(8, 14, 22, 0.35) 0%, rgba(4, 7, 12, 0.55) 100%);
}

.cam-monitor-layout .camera-console-body {
    flex: 0 0 auto;
    display: block;
    padding: 10px;
    overflow: hidden;
    border-radius: 0 0 14px 14px;
}

.cam-monitor-layout .cam-grid {
    width: 100%;
    align-content: start;
    gap: 8px;
}

.cam-grid-viewport {
    display: flex;
    align-items: stretch;
    gap: 10px;
}

.cam-grid-shell {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cam-grid-nav-btn {
    flex: 0 0 auto;
    align-self: center;
    width: 38px;
    min-height: 72px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    background:
        linear-gradient(165deg, rgba(255, 255, 255, 0.07) 0%, rgba(0, 0, 0, 0.1) 100%),
        rgba(8, 14, 24, 0.45);
    color: rgba(203, 213, 225, 0.95);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.cam-grid-nav-btn:hover:not(:disabled) {
    background:
        linear-gradient(165deg, rgba(45, 212, 191, 0.18) 0%, rgba(0, 0, 0, 0.08) 100%),
        rgba(8, 20, 24, 0.5);
    border-color: rgba(45, 212, 191, 0.45);
    color: #5eead4;
}

.cam-grid-nav-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.cam-grid-page-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2px 0 4px;
    color: #94a3b8;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.cam-grid.single-mode ~ .cam-grid-page-bar,
.cam-grid-viewport:has(.cam-grid.single-mode) .cam-grid-nav-btn,
.cam-grid-viewport:has(.cam-grid.single-mode) .cam-grid-page-bar {
    display: none;
}

.cameras-page .barrier-log-empty {
    padding: 8px 0;
    color: #484f58;
}

.cameras-page .barrier-log-line {
    padding: 2px 0;
    white-space: pre-wrap;
    word-break: break-word;
}

.cameras-page .barrier-log-prompt {
    color: #58a6ff;
    margin-right: 4px;
}

.cameras-page .barrier-log-badge {
    display: inline-block;
    padding: 1px 6px;
    margin: 0 4px;
    border-radius: 3px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.cameras-page .barrier-log-badge.barrier-log-open {
    background: rgba(46, 160, 67, 0.3);
    color: #3fb950;
}

.cameras-page .barrier-log-badge.barrier-log-close {
    background: rgba(248, 81, 73, 0.3);
    color: #f85149;
}

.cameras-page .barrier-log-detail {
    color: rgba(201, 209, 217, 0.58);
}

.cameras-page .barrier-log-console::-webkit-scrollbar {
    width: 8px;
}

.cameras-page .barrier-log-console::-webkit-scrollbar-track {
    background: #161b22;
}

.cameras-page .barrier-log-console::-webkit-scrollbar-thumb {
    background: #30363d;
    border-radius: 4px;
}

.cameras-page .barrier-log-console::-webkit-scrollbar-thumb:hover {
    background: #484f58;
}

/* Responsive — cameras & monitor */
@media (max-width: 1480px) {
    :root {
        --side-panel: clamp(260px, 24vw, 340px);
    }
}

@media (max-width: 1200px) {
    .cam-monitor-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .cam-monitor-side {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
    }

    .cam-grid.layout-2x3,
    .cam-grid.layout-3x3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1100px) {
    .cameras-page .camera-console-header {
        align-items: flex-start;
    }

    .camera-console-controls {
        width: 100%;
        flex: 1 1 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .camera-console-select-trigger {
        max-width: none;
    }

    .cam-toolbar-status {
        margin-left: 0;
        width: 100%;
    }
}

@media (max-width: 820px) {
    .cam-monitor-side {
        grid-template-columns: minmax(0, 1fr);
    }

    .cam-grid.layout-2x2,
    .cam-grid.layout-2x3,
    .cam-grid.layout-3x3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cam-toolbar {
        gap: 10px;
    }

    .cam-toolbar-group {
        flex-wrap: wrap;
        max-width: 100%;
    }

    .cam-toolbar-sep {
        display: none;
    }

    .camera-console-picker-label {
        display: none;
    }

    .cam-grid-nav-btn {
        width: 32px;
        min-height: 56px;
    }
}

@media (max-width: 560px) {
    .cam-grid.layout-2x2,
    .cam-grid.layout-2x3,
    .cam-grid.layout-3x3 {
        grid-template-columns: minmax(0, 1fr);
    }

    .cam-grid-viewport {
        gap: 6px;
    }

    .cam-layout-btn span,
    .cam-layout-btn {
        font-size: 0.78rem;
    }
}

/* Zoom / narrow console: wrap controls by container width (работает и при Ctrl+/-) */
@container cam-console (max-width: 820px) {
    .camera-console-header {
        align-items: flex-start;
    }

    .camera-console-controls {
        width: 100%;
        flex: 1 1 100%;
        justify-content: flex-start;
    }

    .camera-console-select-trigger {
        max-width: none;
    }
}

@container cam-console (max-width: 560px) {
    .camera-console-picker-label {
        display: none;
    }
}

.camera-console-window {
    container-type: inline-size;
    container-name: cam-console;
}

/* ===== Animations ===== */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===== Responsive — layout shell ===== */
@media (max-width: 1024px) {
    :root {
        --sidebar-width: 200px;
    }
}

@media (max-width: 900px) {
    :root {
        --sidebar-width: 0px;
        --content-pad-x: clamp(12px, 3vw, 20px);
        --content-pad-y: clamp(14px, 2vw, 20px);
    }

    .sidebar {
        position: sticky;
        top: 0;
        left: 0;
        width: 100%;
        height: auto;
        max-height: none;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow:
            0 12px 32px rgba(0, 0, 0, 0.28),
            inset 0 -1px 0 rgba(94, 234, 212, 0.04);
        overflow: visible;
        z-index: 300;
    }

    .sidebar-content {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 4px;
        padding: 10px 12px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .sidebar-content::-webkit-scrollbar {
        height: 4px;
    }

    .sidebar-content::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.18);
        border-radius: 999px;
    }

    .sidebar-content a,
    .sidebar-content .sidebar-link,
    .sidebar-content button.sidebar-link {
        flex: 0 0 auto;
        white-space: nowrap;
        margin: 0;
        padding: 8px 12px;
        width: auto;
        font-size: 0.82rem;
    }

    .sidebar-user {
        flex: 0 0 auto;
        margin: 0 4px 0 0;
        padding: 6px 10px;
    }

    .sidebar-user-name {
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .sidebar-divider {
        display: none;
    }

    .sidebar-group {
        flex: 0 0 auto;
        position: relative;
    }

    .sidebar-group-toggle {
        white-space: nowrap;
        padding: 8px 12px;
        font-size: 0.82rem;
    }

    .sidebar-group-items {
        position: absolute;
        top: calc(100% + 6px);
        left: 0;
        min-width: 180px;
        padding: 8px;
        border-radius: 10px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        background:
            linear-gradient(165deg, rgba(255, 255, 255, 0.08) 0%, rgba(0, 0, 0, 0.16) 100%),
            rgba(7, 11, 18, 0.92);
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        z-index: 40;
    }

    .sidebar-group-items a {
        display: block;
        width: 100%;
        margin: 2px 0;
    }

    .container,
    .container-center {
        margin-left: 0;
        width: 100%;
        padding: var(--content-pad-y) var(--content-pad-x);
    }

    .data-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .auth-card {
        max-width: min(420px, 100%);
    }

    .auth-card-body {
        padding: 24px 18px 20px;
    }

    .auth-title {
        font-size: 1.35rem;
    }

    .container h1,
    .container-center h1 {
        font-size: clamp(1.35rem, 4vw, 2rem);
    }
}

@media (max-width: 480px) {
    .auth-container {
        padding: 20px 12px;
    }

    .cameras-page .camera-console-body {
        padding: 8px;
    }

    .cam-side-card {
        padding: 14px 14px;
    }
}

/* ===== Страница «События» (стили в основном файле — без отдельного кэша) ===== */
.events-page.container {
    max-width: none;
}

/* Явно центрируем ключевые блоки страницы событий */
.events-page.container > * {
    max-width: 1200px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.events-page .events-intro {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 1.25rem;
    max-width: 42ch;
}

.events-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 1rem;
}

.events-bar-left {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.events-search-input {
    flex: 1;
    min-width: 200px;
    max-width: 360px;
    padding: 10px 14px;
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    color: var(--text-primary);
    font-size: 0.9rem;
    font-family: inherit;
    transition: border-color var(--transition-fast);
}

.events-search-input::placeholder {
    color: var(--text-muted);
}

.events-search-input:focus {
    outline: none;
    border-color: var(--primary-light);
    box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.15);
}

.events-meta {
    font-size: 0.8rem;
    color: var(--text-muted);
    white-space: nowrap;
}

/* Легенда цветов (важность и статус) */
.events-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 12px;
    margin-bottom: 14px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    font-size: 0.8rem;
    color: rgba(148, 163, 184, 0.92);
}

.events-legend-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    flex: 1 1 280px;
    padding: 12px 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    background:
        linear-gradient(
            165deg,
            rgba(255, 255, 255, 0.07) 0%,
            rgba(255, 255, 255, 0.02) 48%,
            rgba(0, 0, 0, 0.12) 100%
        ),
        rgba(7, 11, 18, 0.45);
    box-shadow:
        0 16px 40px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(18px) saturate(1.12);
    -webkit-backdrop-filter: blur(18px) saturate(1.12);
}

.events-legend-title {
    font-weight: 700;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(204, 251, 241, 0.82);
    margin-right: 4px;
}

.events-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: rgba(203, 213, 225, 0.92);
}

.events-legend-swatch {
    width: 14px;
    height: 14px;
    border-radius: 5px;
    flex-shrink: 0;
    box-sizing: border-box;
}

.events-legend-swatch--sev-0 {
    background:
        linear-gradient(165deg, rgba(255, 255, 255, 0.08) 0%, rgba(0, 0, 0, 0.12) 100%),
        rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.events-legend-swatch--sev-1 {
    background: linear-gradient(
        145deg,
        rgba(251, 146, 60, 0.5) 0%,
        rgba(245, 158, 11, 0.16) 100%
    );
    border: 1px solid rgba(251, 146, 60, 0.65);
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.28);
}

.events-legend-swatch--sev-2 {
    background: linear-gradient(
        145deg,
        rgba(248, 113, 113, 0.5) 0%,
        rgba(239, 68, 68, 0.18) 100%
    );
    border: 1px solid rgba(248, 113, 113, 0.7);
    box-shadow:
        0 0 10px rgba(239, 68, 68, 0.32),
        inset 0 0 0 1px rgba(254, 202, 202, 0.12);
}

.events-legend-swatch--st-new {
    background: linear-gradient(
        145deg,
        rgba(45, 212, 191, 0.4) 0%,
        rgba(20, 184, 166, 0.14) 100%
    );
    border: 1px solid rgba(45, 212, 191, 0.6);
    box-shadow: 0 0 10px rgba(45, 212, 191, 0.22);
}

.events-legend-swatch--st-done {
    background: linear-gradient(
        145deg,
        rgba(52, 211, 153, 0.35) 0%,
        rgba(16, 185, 129, 0.12) 100%
    );
    border: 1px solid rgba(52, 211, 153, 0.5);
}

.events-legend-swatch--st-closed {
    background: transparent;
    border: 1px dashed rgba(148, 163, 184, 0.55);
    border-radius: 4px;
}

/* Таблица «События» теперь использует общий стиль `.data-table` как справочники.
   Оставляем только логику фильтрации строк через класс. */
.data-table tbody tr.events-tr--filtered {
    display: none;
}

.events-empty-msg {
    padding: 20px 14px !important;
    color: var(--text-muted);
    font-size: 0.9rem;
    text-align: center;
}

.events-col-time {
    width: 128px;
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.events-col-src {
    box-sizing: border-box;
    /* было 140px — мало, «Событие» растягивалось; даём источнику больше доли в разумных пределах */
    width: clamp(200px, 22vw, 300px);
    color: var(--text-secondary);
    font-size: 0.88rem;
    line-height: 1.35;
    overflow-wrap: break-word;
    word-break: break-word;
}

.events-col-sev,
.events-col-st {
    width: 124px;
}

.events-col-badge {
    vertical-align: middle;
}

.events-title {
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.35;
}

.events-detail {
    margin-top: 4px;
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.events-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 5.5rem;
    min-height: 28px;
    padding: 2px 12px;
    box-sizing: border-box;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
    border: 1px solid var(--border-color);
    background: var(--bg-dark);
    color: var(--text-secondary);
}

.events-badge--sev-0 {
    border-color: var(--border-color);
    background: rgba(15, 23, 42, 0.6);
    color: var(--text-muted);
    font-weight: 500;
}

.events-badge--sev-1 {
    border: 2px solid var(--warning-color);
    background: linear-gradient(
        165deg,
        rgba(245, 158, 11, 0.28) 0%,
        rgba(245, 158, 11, 0.06) 100%
    );
    color: #fbbf24;
    font-weight: 800;
    letter-spacing: 0.02em;
    box-shadow:
        0 0 0 1px rgba(245, 158, 11, 0.15),
        0 2px 10px rgba(245, 158, 11, 0.2);
}

.events-badge--sev-2 {
    border: 2px solid #f87171;
    background: linear-gradient(
        165deg,
        rgba(248, 113, 113, 0.32) 0%,
        rgba(239, 68, 68, 0.08) 100%
    );
    color: #fca5a5;
    font-weight: 800;
    letter-spacing: 0.02em;
    box-shadow:
        0 0 0 1px rgba(239, 68, 68, 0.2),
        0 2px 10px rgba(239, 68, 68, 0.28);
}

.events-badge--st-new {
    border: 2px solid var(--primary-light);
    background: rgba(20, 184, 166, 0.16);
    color: #5eead4;
    font-weight: 700;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.events-badge--st-new::before {
    content: "";
    width: 6px;
    height: 6px;
    margin-right: 6px;
    border-radius: 50%;
    background: var(--primary-light);
    box-shadow: 0 0 6px var(--primary-light);
    flex-shrink: 0;
}

.events-badge--st-done {
    border: 1px solid rgba(16, 185, 129, 0.45);
    background: var(--success-bg);
    color: var(--success-color);
    font-weight: 600;
}

.events-badge--st-done::before {
    content: "✓";
    margin-right: 5px;
    font-size: 0.7rem;
    opacity: 0.95;
    flex-shrink: 0;
}

.events-badge--st-closed {
    border: 1px dashed var(--text-muted);
    background: transparent;
    color: var(--text-muted);
    font-weight: 500;
    opacity: 0.92;
}

.events-badge--st-closed::before {
    content: "";
    width: 5px;
    height: 5px;
    margin-right: 6px;
    border-radius: 1px;
    background: var(--text-muted);
    opacity: 0.7;
    flex-shrink: 0;
}

#eventsFiltersOverlay .events-filters-modal {
    position: relative;
    max-width: 440px;
}

/* Модальное окно фото на странице «События» (как «Фильтры») */
.events-photo-thumb {
    display: inline-block;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    font: inherit;
    vertical-align: middle;
    border-radius: 6px;
}

.events-photo-thumb:focus-visible {
    outline: 2px solid rgba(20, 184, 166, 0.55);
    outline-offset: 2px;
}

.events-photo-thumb:disabled,
.events-photo-thumb.events-photo-thumb--fail {
    cursor: default;
    padding: 0;
    vertical-align: middle;
}

.events-photo-thumb-fail-msg {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 120px;
    height: 80px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: rgba(15, 23, 42, 0.35);
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.25;
    text-align: center;
    padding: 6px;
}

.events-photo-thumb img {
    display: block;
}

/* Модалка фото: одна внешняя рамка (.search-modal), без внутренней обводки вокруг снимка */
#eventsPhotoOverlay .events-photo-modal {
    position: relative;
    width: fit-content;
    max-width: min(99vw, 9600px);
    margin: 0 auto;
    padding: 48px 12px 12px 12px;
    box-sizing: border-box;
    overflow: hidden;
}

#eventsPhotoOverlay .events-photo-modal .search-modal-wrapper {
    padding: 0;
    margin: 0;
}

#eventsPhotoOverlay .events-photo-modal-body {
    margin: 0;
    padding: 0;
    text-align: center;
    line-height: 0;
}

#eventsPhotoOverlay .events-photo-modal-frame {
    display: block;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    line-height: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

#eventsPhotoOverlay .events-photo-modal-frame img {
    display: block;
    /* ~в 3 раза выше прежних лимитов 3200×2400; занимаем почти весь вьюпорт */
    max-width: min(calc(100vw - 36px), 9600px);
    max-height: min(calc(100vh - 72px), 7200px);
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 0;
    vertical-align: top;
}

.events-filters-hint {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: -8px 0 16px;
    line-height: 1.45;
}

.events-modal-field {
    width: 100%;
    padding: 9px 12px;
    margin-bottom: 14px;
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    color: var(--text-primary);
    font-size: 0.9rem;
    font-family: inherit;
}

.events-modal-field:focus {
    outline: none;
    border-color: var(--primary-light);
    box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.2);
}

#eventsFiltersOverlay .search-modal label {
    display: block;
    margin-bottom: 4px;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* ===== Datepicker (всплывающий календарь для фильтров «События») ===== */
.tp-datepicker-popover {
    position: fixed;
    z-index: 9999;
    width: 292px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
    padding: 10px;
    backdrop-filter: blur(10px);
}

.tp-datepicker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 4px 2px 10px;
}

.tp-datepicker-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.01em;
}

.tp-datepicker-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-dark);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
    user-select: none;
}

.tp-datepicker-nav:hover {
    background: rgba(20, 184, 166, 0.10);
    border-color: rgba(20, 184, 166, 0.35);
    transform: translateY(-1px);
}

.tp-datepicker-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}

.tp-datepicker-dow {
    text-align: center;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    padding: 6px 0;
}

.tp-datepicker-day {
    height: 34px;
    border-radius: 10px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-primary);
    font-size: 0.82rem;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.tp-datepicker-day:hover {
    background: rgba(20, 184, 166, 0.10);
    border-color: rgba(20, 184, 166, 0.25);
}

.tp-datepicker-day.is-out {
    opacity: 0.35;
}

.tp-datepicker-day.is-today {
    border-color: rgba(245, 158, 11, 0.55);
}

.tp-datepicker-day.is-selected {
    background: rgba(20, 184, 166, 0.18);
    border-color: rgba(20, 184, 166, 0.55);
    color: #5eead4;
    font-weight: 700;
}

/* ===== AI Pages: incidents, faces, neural networks ===== */
.ai-page.container {
    max-width: none;
}

.ai-page.container > * {
    max-width: 1220px;
    width: 100%;
}

.ai-hero,
.ai-toolbar,
.ai-kpi,
.incident-card,
.face-card,
.neural-card,
.scenario-card {
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(30, 41, 59, 0.74);
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(14px);
}

.ai-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 24px;
    border-radius: var(--border-radius-lg);
    margin-bottom: 18px;
}

.ai-hero h1 {
    margin: 0 0 6px;
}

.ai-eyebrow {
    margin: 0 0 6px;
    color: var(--primary-light);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ai-subtitle,
.ai-section-head span {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.ai-actions,
.ai-filter-row,
.ai-tabs,
.ai-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.ai-toolbar {
    padding: 14px;
    border-radius: var(--border-radius-lg);
    margin-bottom: 18px;
}

.ai-input,
.ai-select {
    min-height: 38px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: rgba(15, 23, 42, 0.55);
    color: var(--text-primary);
    padding: 8px 12px;
    font: inherit;
    font-size: 0.85rem;
}

.ai-input {
    min-width: 240px;
    flex: 1 1 260px;
}

.ai-check {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

/* Better checkbox visuals on “Лица” page */
.faces-page .ai-check {
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(8, 14, 24, 0.28);
    cursor: pointer;
    user-select: none;
    min-height: 38px;
}

.faces-page .ai-check:hover {
    border-color: rgba(94, 234, 212, 0.22);
    background: rgba(20, 184, 166, 0.08);
}

.faces-page .ai-check input[type="checkbox"] {
    /* Hide native checkbox, draw our own. */
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 6px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: rgba(15, 23, 42, 0.55);
    display: inline-grid;
    place-items: center;
    margin: 0;
    flex-shrink: 0;
}

.faces-page .ai-check input[type="checkbox"]::after {
    content: "";
    width: 8px;
    height: 4px;
    border-left: 2px solid transparent;
    border-bottom: 2px solid transparent;
    transform: rotate(-45deg) translateY(-1px);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.faces-page .ai-check input[type="checkbox"]:checked {
    border-color: rgba(20, 184, 166, 0.72);
    background: rgba(20, 184, 166, 0.22);
}

.faces-page .ai-check input[type="checkbox"]:checked::after {
    border-left-color: rgba(236, 253, 245, 0.95);
    border-bottom-color: rgba(236, 253, 245, 0.95);
    opacity: 1;
}

.faces-page .ai-check input[type="checkbox"]:focus-visible {
    outline: 2px solid rgba(94, 234, 212, 0.35);
    outline-offset: 2px;
}

.ai-filter,
.ai-tab {
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.44);
    color: var(--text-secondary);
    padding: 7px 14px;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
}

.ai-filter.active,
.ai-tab.active {
    border-color: rgba(20, 184, 166, 0.55);
    background: rgba(20, 184, 166, 0.16);
    color: var(--primary-light);
}

.ai-filter--critical {
    color: var(--error-color);
}

.ai-filter--warning {
    color: var(--warning-color);
}

.ai-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.ai-kpi {
    padding: 16px;
    border-radius: var(--border-radius-lg);
}

.ai-kpi span,
.ai-kpi small {
    display: block;
    color: var(--text-secondary);
    font-size: 0.76rem;
}

.ai-kpi span {
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.ai-kpi strong {
    display: block;
    margin: 4px 0;
    color: var(--text-primary);
    font-size: 2rem;
    line-height: 1;
}

.ai-kpi--red {
    border-left: 3px solid var(--error-color);
}

.ai-kpi--orange {
    border-left: 3px solid var(--warning-color);
}

.ai-kpi--blue {
    border-left: 3px solid var(--info-color);
}

.ai-kpi--green {
    border-left: 3px solid var(--success-color);
}

.ai-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.incident-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    border-radius: var(--border-radius-lg);
}

.incident-card--critical {
    border-left: 3px solid var(--error-color);
}

.incident-card--warning {
    border-left: 3px solid var(--warning-color);
}

.incident-card--info {
    border-left: 3px solid var(--info-color);
}

.incident-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(59, 130, 246, 0.14);
    flex: 0 0 auto;
    font-size: 1.15rem;
}

.incident-body {
    flex: 1 1 auto;
    min-width: 0;
}

.incident-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 4px;
}

.incident-head h2,
.face-card h2,
.neural-card h3,
.scenario-card h3,
.ai-section-head h2 {
    margin: 0;
    color: var(--text-primary);
    font-size: 1rem;
    line-height: 1.35;
}

.incident-meta,
.incident-description,
.incident-reaction,
.face-card p,
.neural-card p,
.scenario-card p,
.scenario-card small {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.82rem;
}

.incident-description,
.incident-reaction {
    margin-top: 5px;
}

.incident-reaction--done {
    color: var(--success-color);
}

.incident-reaction--wait {
    color: var(--warning-color);
}

.ai-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 3px 9px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ai-badge--critical {
    background: var(--error-bg);
    color: var(--error-color);
}

.ai-badge--warning {
    background: var(--warning-bg);
    color: var(--warning-color);
}

.ai-badge--info {
    background: var(--info-bg);
    color: var(--info-color);
}

.ai-badge--ok {
    background: var(--success-bg);
    color: var(--success-color);
}

.face-grid,
.neural-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 12px;
}

.neural-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.face-card,
.neural-card {
    border-radius: var(--border-radius-lg);
    padding: 16px;
    transition: border-color var(--transition-fast), transform var(--transition-fast);
}

.face-card {
    text-align: center;
}

.face-card:hover,
.neural-card:hover,
.incident-card:hover {
    border-color: rgba(20, 184, 166, 0.44);
}

.neural-card:hover {
    transform: translateY(-2px);
}

.face-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 82px;
    height: 82px;
    margin: 0 auto 10px;
    border-radius: 50%;
    color: white;
    font-size: 1.65rem;
    font-weight: 800;
}

.face-card small,
.face-status {
    display: block;
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 0.72rem;
}

.face-status {
    font-weight: 800;
}

.face-status--active {
    color: var(--success-color);
}

.face-status--guest {
    color: var(--warning-color);
}

.face-status--stop {
    color: var(--error-color);
}

.ai-tabs {
    width: fit-content;
    padding: 4px;
    margin-bottom: 18px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.45);
    border: 1px solid var(--border-color);
}

.ai-tab {
    border-color: transparent;
}

.ai-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.neural-card-icon {
    margin-bottom: 10px;
    font-size: 2rem;
}

.neural-meta,
.neural-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    color: var(--text-secondary);
    font-size: 0.76rem;
}

.neural-count {
    margin-left: auto;
}

.neural-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.neural-dot--on {
    background: var(--success-color);
}

.neural-dot--off {
    background: var(--error-color);
}

.scenario-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.scenario-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: var(--border-radius-lg);
}

.scenario-card--muted {
    opacity: 0.62;
}

.scenario-icon {
    font-size: 1.5rem;
}

.scenario-body {
    flex: 1 1 auto;
}

.scenario-state {
    color: var(--success-color);
    font-size: 0.78rem;
    font-weight: 800;
}

.scenario-toggle {
    position: relative;
    flex: 0 0 42px;
    width: 42px;
    height: 24px;
}

.scenario-toggle input {
    width: 0;
    height: 0;
    opacity: 0;
}

.scenario-toggle span {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: var(--bg-light);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.scenario-toggle span::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: white;
    transition: transform var(--transition-fast);
}

.scenario-toggle input:checked + span {
    background: var(--primary-color);
}

.scenario-toggle input:checked + span::before {
    transform: translateX(18px);
}

@media (max-width: 900px) {
    .ai-hero,
    .scenario-card,
    .incident-card {
        flex-direction: column;
    }

    .ai-actions,
    .ai-section-head {
        align-items: flex-start;
    }
}

/* ===== AI Pages refined UI ===== */

/* ===== Vehicle Plates & Auto-AI ===== */
.vehicle-plate {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    background: #e2e8f0;
    color: #0f172a;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', 'Monaco', monospace;
    text-transform: uppercase;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.vehicle-plate.unknown {
    background: #ffe4e6;
    border-color: #fda4af;
    color: #9f1239;
}
.vehicle-plate.special {
    background: #dbeafe;
    border-color: #93c5fd;
    color: #1e3a8a;
}
.vehicle-plate.allowed {
    background: #dcfce7;
    border-color: #86efac;
    color: #166534;
}
/* ===== End Vehicle Plates ===== */
.ai-page {
    --ai-panel:
        linear-gradient(
            165deg,
            rgba(255, 255, 255, 0.07) 0%,
            rgba(255, 255, 255, 0.02) 48%,
            rgba(0, 0, 0, 0.12) 100%
        ),
        rgba(7, 11, 18, 0.48);
    --ai-panel-strong:
        linear-gradient(
            165deg,
            rgba(255, 255, 255, 0.08) 0%,
            rgba(255, 255, 255, 0.02) 50%,
            rgba(0, 0, 0, 0.14) 100%
        ),
        rgba(8, 14, 24, 0.55);
    --ai-line: rgba(255, 255, 255, 0.08);
    --ai-glow: rgba(45, 212, 191, 0.16);
    --ai-glass-shadow:
        0 20px 48px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.ai-page.container {
    padding-top: 30px;
}

.ai-page.container > * {
    max-width: 1240px;
}

.ai-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
    animation: aiFadeUp 420ms ease-out both;
}

.ai-page-header h1 {
    margin: 0 0 6px;
    font-size: 2rem;
    letter-spacing: -0.03em;
    color: rgba(236, 253, 245, 0.95);
}

.ai-page-header p {
    margin: 0;
    max-width: 720px;
    color: rgba(148, 163, 184, 0.9);
    font-size: 0.95rem;
}

.ai-header-status,
.ai-muted {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background:
        linear-gradient(165deg, rgba(255, 255, 255, 0.06) 0%, rgba(0, 0, 0, 0.08) 100%),
        rgba(8, 14, 24, 0.4);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: rgba(204, 251, 241, 0.82);
    font-size: 0.82rem;
    white-space: nowrap;
}

.ai-live-dot {
    position: relative;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 0 5px rgba(52, 211, 153, 0.14);
}

.ai-live-dot::after {
    content: "";
    position: absolute;
    inset: -7px;
    border: 1px solid rgba(52, 211, 153, 0.4);
    border-radius: 50%;
    animation: aiPulse 1.8s ease-out infinite;
}

.ai-console-panel {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    background: var(--ai-panel);
    box-shadow: var(--ai-glass-shadow);
    backdrop-filter: blur(20px) saturate(1.12);
    -webkit-backdrop-filter: blur(20px) saturate(1.12);
    animation: aiFadeUp 520ms ease-out both;
}

.ai-console-panel::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(94, 234, 212, 0.5), transparent);
    opacity: 0.7;
}

.ai-console-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 48px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--ai-line);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 100%),
        rgba(8, 14, 24, 0.32);
}

.ai-console-title {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: rgba(241, 245, 249, 0.96);
    font-size: 0.9rem;
}

.ai-console-title b {
    margin-left: 2px;
    color: rgba(204, 251, 241, 0.88);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ai-console-title span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.ai-console-title span:nth-child(1) { background: #ff5f56; }
.ai-console-title span:nth-child(2) { background: #ffbd2e; }
.ai-console-title span:nth-child(3) { background: #27c93f; }

.ai-kpi-grid {
    gap: 14px;
    margin-bottom: 20px;
}

.ai-console-panel > .ai-kpi-grid {
    padding: 16px;
    margin-bottom: 0;
}

.ai-kpi {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-left: 0;
    border-radius: 14px;
    background:
        linear-gradient(165deg, rgba(255, 255, 255, 0.06) 0%, rgba(0, 0, 0, 0.1) 100%),
        rgba(8, 14, 24, 0.42);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transform: translateZ(0);
    transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
    animation: aiFadeUp 520ms ease-out both;
}

.ai-kpi::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: #5eead4;
}

.ai-kpi::after {
    content: "";
    position: absolute;
    right: -35px;
    top: -35px;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: rgba(45, 212, 191, 0.08);
    transition: transform 220ms ease, opacity 220ms ease;
}

.ai-kpi:hover {
    transform: translateY(-3px);
    border-color: rgba(45, 212, 191, 0.28);
    background:
        linear-gradient(165deg, rgba(255, 255, 255, 0.08) 0%, rgba(0, 0, 0, 0.1) 100%),
        rgba(10, 18, 28, 0.55);
    box-shadow:
        0 14px 32px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.ai-kpi:hover::after {
    transform: scale(1.12);
    opacity: 0.9;
}

.ai-kpi span,
.ai-kpi small {
    color: rgba(148, 163, 184, 0.9);
}

.ai-kpi strong {
    font-size: 2.2rem;
    letter-spacing: -0.04em;
    color: rgba(241, 245, 249, 0.98);
}

.ai-kpi--red::before { background: #f87171; }
.ai-kpi--orange::before { background: #fb923c; }
.ai-kpi--blue::before { background: #38bdf8; }
.ai-kpi--green::before { background: #34d399; }

.ai-kpi-grid--compact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ai-split-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 18px;
}

.ai-section-head {
    padding: 16px 16px 0;
    margin-bottom: 14px;
}

.ai-section-head h2 {
    font-size: 1rem;
    letter-spacing: -0.01em;
    color: rgba(236, 253, 245, 0.94);
}

.ai-section-head span {
    color: rgba(148, 163, 184, 0.88);
}

.ai-filter-row,
.ai-actions {
    gap: 8px;
}

.ai-filter,
.ai-tab {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    background:
        linear-gradient(165deg, rgba(255, 255, 255, 0.06) 0%, rgba(0, 0, 0, 0.08) 100%),
        rgba(8, 14, 24, 0.4);
    color: rgba(148, 163, 184, 0.95);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.ai-filter:hover,
.ai-tab:hover {
    transform: translateY(-1px);
    border-color: rgba(45, 212, 191, 0.36);
    color: rgba(241, 245, 249, 0.98);
}

.ai-filter.active,
.ai-tab.active {
    border-color: rgba(45, 212, 191, 0.45);
    background:
        linear-gradient(160deg, rgba(20, 184, 166, 0.28) 0%, rgba(15, 118, 110, 0.18) 100%),
        rgba(8, 24, 26, 0.5);
    color: #ecfeff;
}

.ai-filter--critical {
    color: #fca5a5;
}

.ai-filter--warning {
    color: #fdba74;
}

.ai-filter--critical.active {
    border-color: rgba(248, 113, 113, 0.45);
    background:
        linear-gradient(160deg, rgba(239, 68, 68, 0.28) 0%, rgba(127, 29, 29, 0.16) 100%),
        rgba(24, 10, 12, 0.5);
    color: #fecaca;
}

.ai-filter--warning.active {
    border-color: rgba(251, 146, 60, 0.45);
    background:
        linear-gradient(160deg, rgba(245, 158, 11, 0.26) 0%, rgba(146, 64, 14, 0.14) 100%),
        rgba(24, 16, 8, 0.5);
    color: #ffedd5;
}

.ai-toolbar {
    margin: 0;
    padding: 16px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
}

.ai-input,
.ai-select {
    border-color: rgba(255, 255, 255, 0.12);
    background:
        linear-gradient(165deg, rgba(255, 255, 255, 0.06) 0%, rgba(0, 0, 0, 0.1) 100%),
        rgba(8, 14, 24, 0.45);
    transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.ai-input:focus,
.ai-select:focus {
    border-color: rgba(45, 212, 191, 0.5);
    box-shadow: 0 0 0 4px rgba(45, 212, 191, 0.1);
    outline: none;
}

.incident-timeline {
    position: relative;
    padding: 0 16px 16px;
}

.incident-timeline::before {
    content: "";
    position: absolute;
    top: 10px;
    bottom: 26px;
    left: 115px;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(94, 234, 212, 0.28), transparent);
}

.incident-row {
    position: relative;
    display: grid;
    grid-template-columns: 70px 30px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: start;
    padding: 14px 12px;
    margin: 0 -4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    animation: aiFadeUp 480ms ease-out both;
    transition: background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.incident-row:last-child {
    border-bottom: 0;
}

.incident-row:hover {
    transform: translateX(3px);
    background:
        linear-gradient(165deg, rgba(255, 255, 255, 0.05) 0%, rgba(0, 0, 0, 0.06) 100%),
        rgba(8, 14, 24, 0.35);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.incident-time {
    color: rgba(100, 116, 139, 0.95);
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.incident-time b {
    display: block;
    color: rgba(226, 232, 240, 0.95);
    font-size: 0.86rem;
}

.incident-marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-top: 0;
    border: 1px solid rgba(56, 189, 248, 0.3);
    border-radius: 50%;
    color: #7dd3fc;
    background: rgba(56, 189, 248, 0.1);
    box-shadow: 0 0 0 5px rgba(56, 189, 248, 0.1);
}

.incident-marker .ai-line-icon {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

.incident-row--critical .incident-marker {
    border-color: rgba(248, 113, 113, 0.35);
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.12);
    box-shadow: 0 0 0 5px rgba(239, 68, 68, 0.12);
}

.incident-row--warning .incident-marker {
    border-color: rgba(251, 146, 60, 0.35);
    color: #fdba74;
    background: rgba(245, 158, 11, 0.12);
    box-shadow: 0 0 0 5px rgba(245, 158, 11, 0.12);
}

.incident-row--info .incident-marker {
    border-color: rgba(52, 211, 153, 0.35);
    color: #6ee7b7;
    background: rgba(16, 185, 129, 0.12);
    box-shadow: 0 0 0 5px rgba(16, 185, 129, 0.12);
}

.incident-head h3 {
    margin: 0;
    color: rgba(241, 245, 249, 0.96);
    font-size: 0.96rem;
    line-height: 1.35;
}

.incident-meta,
.incident-description {
    color: rgba(148, 163, 184, 0.9);
}

.incident-description {
    max-width: 780px;
}

.incident-reaction--done {
    color: #6ee7b7;
}

.incident-reaction--wait {
    color: #fdba74;
}

.ai-badge {
    border: 1px solid transparent;
    border-radius: 8px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.ai-badge--critical {
    background: rgba(239, 68, 68, 0.14);
    border-color: rgba(248, 113, 113, 0.28);
    color: #fca5a5;
}

.ai-badge--warning {
    background: rgba(245, 158, 11, 0.14);
    border-color: rgba(251, 146, 60, 0.28);
    color: #fdba74;
}

.ai-badge--info {
    background: rgba(56, 189, 248, 0.12);
    border-color: rgba(56, 189, 248, 0.28);
    color: #7dd3fc;
}

.ai-badge--ok {
    background: rgba(16, 185, 129, 0.14);
    border-color: rgba(52, 211, 153, 0.28);
    color: #6ee7b7;
}

.ai-side-panel {
    align-self: start;
}

.ai-priority-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 16px 16px;
}

.ai-priority-item {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    background:
        linear-gradient(165deg, rgba(255, 255, 255, 0.05) 0%, rgba(0, 0, 0, 0.08) 100%),
        rgba(8, 14, 24, 0.4);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: border-color 160ms ease, background 160ms ease;
}

.ai-priority-item:hover {
    border-color: rgba(45, 212, 191, 0.28);
    background:
        linear-gradient(165deg, rgba(255, 255, 255, 0.07) 0%, rgba(0, 0, 0, 0.08) 100%),
        rgba(10, 18, 28, 0.5);
}

.ai-priority-item > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(148, 163, 184, 0.95);
    font-size: 0.78rem;
    font-weight: 800;
}

.ai-priority-item b,
.ai-priority-item small {
    display: block;
}

.ai-priority-item b {
    color: rgba(241, 245, 249, 0.95);
}

.ai-priority-item small {
    color: rgba(148, 163, 184, 0.88);
}

.ai-priority-item.is-critical > span {
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.14);
    border-color: rgba(248, 113, 113, 0.28);
}
.ai-priority-item.is-warning > span {
    color: #fdba74;
    background: rgba(245, 158, 11, 0.14);
    border-color: rgba(251, 146, 60, 0.28);
}
.ai-priority-item.is-ok > span {
    color: #6ee7b7;
    background: rgba(16, 185, 129, 0.14);
    border-color: rgba(52, 211, 153, 0.28);
}

.face-directory {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 12px;
    padding: 0 16px 16px;
}

.face-card {
    display: flex;
    gap: 14px;
    align-items: center;
    text-align: left;
    border-color: rgba(148, 163, 184, 0.14);
    background: rgba(15, 23, 42, 0.5);
    box-shadow: none;
    animation: aiFadeUp 520ms ease-out both;
    transition: transform 170ms ease, border-color 170ms ease, background 170ms ease;
}

.face-card:hover {
    transform: translateY(-3px);
    background: rgba(15, 23, 42, 0.68);
}

.face-avatar {
    width: 54px;
    height: 54px;
    margin: 0;
    font-size: 1rem;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), 0 10px 24px rgba(0, 0, 0, 0.18);
}

.face-card-main {
    min-width: 0;
    flex: 1;
}

.face-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.face-card h2 {
    margin: 0;
    font-size: 0.98rem;
}

.face-card p {
    margin-top: 2px;
}

.face-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-top: 8px;
    color: var(--text-muted);
    font-size: 0.74rem;
}

.face-status {
    display: inline-flex;
    margin: 0;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.1);
    white-space: nowrap;
}

.face-confidence {
    overflow: hidden;
    height: 4px;
    margin-top: 10px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.15);
}

.face-confidence span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
    animation: aiGrowX 700ms ease-out both;
}

.ai-tabs {
    width: auto;
    padding: 16px;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.ai-tab {
    border-color: rgba(148, 163, 184, 0.18);
}

.ai-tab-panel {
    animation: aiFadeUp 300ms ease-out both;
}

.neural-grid {
    gap: 14px;
}

.neural-card {
    min-height: 250px;
    display: flex;
    flex-direction: column;
    border-color: rgba(148, 163, 184, 0.14);
    background:
        radial-gradient(circle at 85% 0%, rgba(20, 184, 166, 0.12), transparent 32%),
        rgba(15, 23, 42, 0.54);
    box-shadow: none;
    animation: aiFadeUp 520ms ease-out both;
}

.neural-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.neural-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin: 0;
    border: 1px solid rgba(20, 184, 166, 0.2);
    border-radius: 14px;
    background: rgba(20, 184, 166, 0.08);
    color: var(--primary-light);
}

.ai-line-icon {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.neural-model {
    padding: 4px 8px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 999px;
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 700;
}

.neural-card h3 {
    font-size: 1rem;
}

.neural-card p {
    flex: 1;
    margin-top: 8px;
    line-height: 1.55;
}

.neural-meta {
    padding-top: 12px;
    border-top: 1px solid rgba(148, 163, 184, 0.12);
}

.neural-actions {
    margin-top: 10px;
}

.scenario-list {
    padding: 0 16px 16px;
}

.scenario-card {
    border-color: rgba(148, 163, 184, 0.14);
    background: rgba(15, 23, 42, 0.52);
    box-shadow: none;
    animation: aiFadeUp 520ms ease-out both;
    transition: transform 170ms ease, border-color 170ms ease, background 170ms ease;
}

.scenario-card:hover {
    transform: translateY(-2px);
    border-color: rgba(20, 184, 166, 0.3);
    background: rgba(15, 23, 42, 0.7);
}

.scenario-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border: 1px solid rgba(20, 184, 166, 0.18);
    border-radius: 12px;
    background: rgba(20, 184, 166, 0.07);
    color: var(--primary-light);
    font-size: 0;
}

.scenario-body small {
    display: block;
    margin-top: 6px;
    line-height: 1.45;
}

@keyframes aiFadeUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes aiPulse {
    from {
        opacity: 0.9;
        transform: scale(0.7);
    }
    to {
        opacity: 0;
        transform: scale(1.45);
    }
}

@keyframes aiGrowX {
    from { transform: scaleX(0); transform-origin: left; }
    to { transform: scaleX(1); transform-origin: left; }
}

@media (prefers-reduced-motion: reduce) {
    .ai-page *,
    .ai-page *::before,
    .ai-page *::after {
        animation-duration: 1ms !important;
        transition-duration: 1ms !important;
    }
}

@media (max-width: 1100px) {
    .ai-split-layout,
    .ai-kpi-grid--compact {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .ai-page-header,
    .ai-console-header,
    .incident-row,
    .scenario-card {
        align-items: flex-start;
        grid-template-columns: 1fr;
        flex-direction: column;
    }

    .incident-timeline::before {
        display: none;
    }

    .incident-time {
        text-align: left;
    }

    .face-directory {
        grid-template-columns: 1fr;
    }
}

/* ===== Avto-AI page ===== */
.avto-page {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.avto-page > .ai-page-header {
    margin-bottom: 0;
}

.avto-tabs-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    background:
        linear-gradient(
            165deg,
            rgba(255, 255, 255, 0.07) 0%,
            rgba(255, 255, 255, 0.02) 48%,
            rgba(0, 0, 0, 0.12) 100%
        ),
        rgba(7, 11, 18, 0.48);
    box-shadow:
        0 18px 44px rgba(0, 0, 0, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(18px) saturate(1.12);
    -webkit-backdrop-filter: blur(18px) saturate(1.12);
}

.avto-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.avto-tab-panel {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.avto-tab-panel[hidden] {
    display: none !important;
}

.avto-filters-panel {
    overflow: visible;
}

.avto-toolbar {
    margin: 0;
    padding: 14px 16px;
    gap: 10px;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
}

.avto-toolbar--bordered {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-wrap: wrap;
    flex-direction: row;
}

.avto-filter-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
    width: 100%;
}

.avto-filter-row--primary {
    flex: 0 0 auto;
}

.avto-filter-row--secondary {
    flex: 0 0 auto;
}

.avto-period {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 1 auto;
    min-width: 0;
    min-height: 38px;
    padding: 0 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    background:
        linear-gradient(165deg, rgba(255, 255, 255, 0.06) 0%, rgba(0, 0, 0, 0.1) 100%),
        rgba(8, 14, 24, 0.45);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.avto-period-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(148, 163, 184, 0.85);
    white-space: nowrap;
}

.avto-period-input {
    background: transparent;
    border: none;
    color: rgba(241, 245, 249, 0.95);
    font: inherit;
    font-size: 0.75rem;
    outline: none;
    width: 9.6rem;
    max-width: 100%;
    min-width: 0;
    color-scheme: dark;
}

.avto-period-sep {
    color: rgba(94, 234, 212, 0.55);
    font-size: 0.8rem;
    flex-shrink: 0;
}

.avto-select-compact {
    flex: 0 1 8.5rem;
    width: 8.5rem;
    max-width: 8.5rem;
    min-width: 0;
    padding-left: 10px;
    padding-right: 28px;
}

.avto-select-network {
    flex: 0 0 auto;
    width: auto;
    min-width: 11.5rem;
    max-width: none;
    padding-left: 12px;
    padding-right: 32px;
    white-space: nowrap;
}

.avto-filter-row--primary .avto-period {
    flex: 0 1 auto;
}

.avto-filter-row--primary .ai-check {
    margin-left: auto;
    flex-shrink: 0;
    white-space: nowrap;
}

.avto-filter-row--secondary .ai-input {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    max-width: none;
}

.avto-kpi-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 0;
}

.avto-page .ai-kpi {
    padding: 16px 18px;
}

.avto-page .ai-kpi span {
    font-size: 0.68rem;
    line-height: 1.3;
    min-height: 2.2em;
}

.avto-page .ai-kpi strong {
    margin: 8px 0 6px;
    font-size: 1.85rem;
}

.ai-kpi--purple::before {
    background: #a78bfa;
}

.ai-kpi--purple::after {
    background: rgba(167, 139, 250, 0.1);
}

.avto-split {
    margin-top: 0;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
}

.avto-split > .ai-console-panel {
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.avto-split .incident-timeline {
    flex: 1 1 auto;
}

.avto-special-panel,
.avto-page .ai-console-panel {
    margin: 0;
}

.avto-page .ai-section-head h2 {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ai-section-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    border: 1px solid rgba(45, 212, 191, 0.28);
    background: rgba(45, 212, 191, 0.1);
    color: #5eead4;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}

.ai-section-icon .ai-line-icon {
    width: 18px;
    height: 18px;
}

.ai-section-icon--warning {
    border-color: rgba(251, 146, 60, 0.32);
    background: rgba(245, 158, 11, 0.12);
    color: #fdba74;
}

.ai-section-icon--info {
    border-color: rgba(56, 189, 248, 0.32);
    background: rgba(56, 189, 248, 0.12);
    color: #7dd3fc;
}

.ai-section-icon--accent {
    border-color: rgba(167, 139, 250, 0.32);
    background: rgba(139, 92, 246, 0.12);
    color: #c4b5fd;
}

.avto-type {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: rgba(226, 232, 240, 0.95);
    font-weight: 600;
}

.avto-type__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(148, 163, 184, 0.95);
    flex-shrink: 0;
}

.avto-type__icon .ai-line-icon {
    width: 16px;
    height: 16px;
}

.avto-type__icon--emergency {
    border-color: rgba(248, 113, 113, 0.32);
    background: rgba(239, 68, 68, 0.12);
    color: #fca5a5;
}

.avto-type__icon--service {
    border-color: rgba(56, 189, 248, 0.32);
    background: rgba(56, 189, 248, 0.12);
    color: #7dd3fc;
}

.avto-table-wrap {
    margin: 0 16px 16px;
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background:
        linear-gradient(180deg, rgba(8, 14, 22, 0.28) 0%, rgba(4, 7, 12, 0.4) 100%);
}

.avto-table-wrap .data-table {
    margin: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.avto-table-wrap .data-table th {
    background: rgba(255, 255, 255, 0.03);
    color: rgba(148, 163, 184, 0.9);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.avto-table-wrap .data-table td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: rgba(226, 232, 240, 0.92);
}

.avto-table-wrap .data-table tbody tr:hover {
    background: rgba(45, 212, 191, 0.05);
}

.avto-col-check {
    width: 40px;
}

.ai-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 56px 24px;
    text-align: center;
    color: rgba(148, 163, 184, 0.88);
    font-size: 0.95rem;
}

.ai-empty-state p {
    margin: 0;
    color: rgba(203, 213, 225, 0.92);
    font-weight: 600;
}

.ai-empty-state small {
    color: rgba(100, 116, 139, 0.95);
    font-size: 0.85rem;
}

.ai-empty-state--compact {
    padding: 40px 20px;
}

.ai-empty-state__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background:
        linear-gradient(165deg, rgba(255, 255, 255, 0.06) 0%, rgba(0, 0, 0, 0.08) 100%),
        rgba(8, 14, 24, 0.4);
    color: rgba(148, 163, 184, 0.85);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.ai-empty-state__icon .ai-line-icon {
    width: 28px;
    height: 28px;
    opacity: 0.8;
}

.incident-row--info .incident-marker .ai-line-icon {
    stroke-width: 2;
}

/* Госномер — стилизованная RU-плашка, тёмный текст на светлом фоне */
.avto-page h3.avto-plate,
.avto-page .avto-plate,
.avto-plate {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0 11px 0 0;
    overflow: hidden;
    border-radius: 7px;
    border: 1.5px solid rgba(15, 23, 42, 0.5);
    background: linear-gradient(180deg, #ffffff 0%, #e8eef5 100%);
    color: #0f172a !important;
    font-size: 0.9rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 800;
    font-family: "JetBrains Mono", "Fira Code", "Consolas", "Monaco", monospace;
    line-height: 1.15;
    white-space: nowrap;
    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 1),
        inset 0 -1px 0 rgba(15, 23, 42, 0.08);
}

.avto-page h3.avto-plate::before,
.avto-page .avto-plate::before,
.avto-plate::before {
    content: "RUS";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    min-width: 1.6rem;
    margin-right: 10px;
    padding: 8px 5px;
    background:
        linear-gradient(180deg, #2563eb 0%, #1e3a8a 100%);
    color: #f8fafc;
    font-size: 0.5rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    line-height: 1;
    border-right: 1px solid rgba(15, 23, 42, 0.18);
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.15);
}

.avto-plate--inline {
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    padding-right: 9px;
}

.avto-plate--inline::before {
    min-width: 1.35rem;
    margin-right: 8px;
    padding: 6px 4px;
    font-size: 0.42rem;
}

.avto-page .ai-check {
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(8, 14, 24, 0.28);
}

@media (max-width: 1200px) {
    .avto-kpi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .avto-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .avto-tabs-bar {
        align-items: stretch;
        flex-direction: column;
    }

    .avto-filter-row {
        flex-wrap: wrap;
    }

    .avto-filter-row--primary .ai-check {
        margin-left: 0;
    }

    .avto-select-compact {
        flex: 1 1 8rem;
        width: auto;
        max-width: none;
    }

    .avto-filter-row--secondary .ai-input {
        flex: 1 1 100%;
        min-width: 0;
    }
}

@media (max-width: 520px) {
    .avto-kpi-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== Camera add page ===== */
.camera-add-page {
    align-items: stretch;
    padding-bottom: 48px;
}

.camera-add-page > .camera-add-hero,
.camera-add-page > .camera-add-alert,
.camera-add-page > .camera-add-card {
    width: 100%;
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
}

.camera-add-hero {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 22px;
    animation: fadeIn 0.45s ease-out;
}

.camera-add-hero-icon {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    color: var(--primary-light);
    background:
        linear-gradient(145deg, rgba(20, 184, 166, 0.22), rgba(15, 118, 110, 0.08)),
        rgba(6, 10, 16, 0.45);
    border: 1px solid rgba(20, 184, 166, 0.28);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.camera-add-hero-icon svg {
    width: 28px;
    height: 28px;
}

.camera-add-eyebrow {
    margin: 0 0 6px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--primary-light);
}

.camera-add-page .camera-add-hero h1 {
    margin: 0 0 8px;
    font-size: clamp(1.55rem, 2.4vw, 1.95rem);
}

.camera-add-lead {
    margin: 0;
    max-width: 46ch;
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.5;
}

.camera-add-alert {
    margin-bottom: 16px;
    text-align: left;
}

.camera-add-alert--error {
    background: var(--error-bg);
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.35);
}

.camera-add-alert--ok {
    background: var(--success-bg);
    color: #86efac;
    border-color: rgba(16, 185, 129, 0.35);
}

.camera-add-card {
    max-width: none;
    padding: 8px 8px 4px;
    animation: fadeIn 0.55s ease-out;
}

.camera-add-form {
    gap: 0;
}

.camera-add-section {
    padding: 20px 22px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.camera-add-section:last-of-type {
    border-bottom: none;
}

.camera-add-section-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 16px;
}

.camera-add-section-num {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
    color: #ecfeff;
    background: linear-gradient(145deg, var(--primary-light), var(--primary-color));
    box-shadow: 0 6px 16px rgba(15, 118, 110, 0.35);
}

.camera-add-section-head h2 {
    margin: 0 0 2px;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
}

.camera-add-section-head p {
    margin: 0;
    font-size: 0.86rem;
    color: var(--text-muted);
}

.camera-add-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 16px;
}

.camera-add-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
}

.camera-add-field label {
    margin: 0;
}

.camera-add-optional {
    margin-left: 6px;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-muted);
}

.camera-add-hint {
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--text-muted);
}

.camera-add-hint code,
.camera-add-chips code {
    font-size: 0.78em;
    padding: 1px 5px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--primary-light);
}

.camera-add-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.camera-add-chips-label {
    font-size: 0.82rem;
    color: var(--text-muted);
}

.camera-add-chip {
    appearance: none;
    border: 1px solid rgba(20, 184, 166, 0.35);
    background: rgba(20, 184, 166, 0.12);
    color: var(--primary-light);
    border-radius: 999px;
    padding: 4px 10px;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.camera-add-chip:hover {
    background: rgba(20, 184, 166, 0.22);
    border-color: rgba(20, 184, 166, 0.55);
    transform: translateY(-1px);
}

.camera-add-toggle {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 4px 0 18px;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
    cursor: pointer;
}

.camera-add-toggle-control {
    position: relative;
    flex: 0 0 46px;
    width: 46px;
    height: 26px;
    margin-top: 2px;
}

.camera-add-toggle-control input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.camera-add-toggle-track {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: var(--bg-light);
    transition: background var(--transition-fast);
}

.camera-add-toggle-track::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    transition: transform var(--transition-fast);
}

.camera-add-toggle-control input:checked + .camera-add-toggle-track {
    background: var(--primary-color);
}

.camera-add-toggle-control input:checked + .camera-add-toggle-track::before {
    transform: translateX(20px);
}

.camera-add-toggle-control input:focus-visible + .camera-add-toggle-track {
    outline: 2px solid rgba(20, 184, 166, 0.55);
    outline-offset: 2px;
}

.camera-add-toggle-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.camera-add-toggle-text strong {
    font-size: 0.95rem;
    color: var(--text-primary);
}

.camera-add-toggle-text small {
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.camera-add-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 8px 22px 20px;
}

.camera-add-submit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 180px;
    justify-content: center;
}

.sidebar-section-link--add-cam {
    color: var(--primary-light) !important;
    border: 1px solid rgba(20, 184, 166, 0.28);
    border-radius: 10px;
    margin: 2px 0 6px;
    background: rgba(20, 184, 166, 0.08);
}

.sidebar-section-link--add-cam:hover {
    background: rgba(20, 184, 166, 0.16) !important;
    border-color: rgba(20, 184, 166, 0.45);
}

@media (max-width: 900px) {
    .camera-add-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .camera-add-hero {
        flex-direction: column;
    }

    .camera-add-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .camera-add-submit,
    .camera-add-actions .btn-outline {
        width: 100%;
        justify-content: center;
    }
}