/*
 * KUTURCHIN UI — generated file.
 * Не редактировать вручную. Источники: static/ui/src/ и временный legacy-слой static/css/.
 */

@layer legacy, reset, tokens, foundations, layout, components, patterns, pages, utilities;

/* legacy: 00_variables.css */
@layer legacy {
/* ========================================
   KUTURCHIN UI — legacy dark and light themes
   ======================================== */

:root {
    /* ТЁМНАЯ ТЕМА (по умолчанию) */
    --color-primary: #FF8C00;
    --color-primary-hover: #E07800;
    --color-primary-light: #FFA940;
    --color-primary-glow: rgba(255, 140, 0, 0.3);

    --color-success: #22C55E;
    --color-warning: #F59E0B;
    --color-danger: #EF4444;
    --color-info: #3B82F6;

    --bg-base: #0A0E14;
    --bg-primary: #0D1117;
    --bg-secondary: #111820;
    --bg-surface: #161E28;
    --bg-surface-hover: #1C2532;
    --bg-glass: rgba(22, 30, 40, 0.8);

    --text-primary: #E6EDF3;
    --text-secondary: #8B949E;
    --text-muted: #484F58;
    --text-orange: #FF8C00;

    --border-default: #21262D;
    --border-hover: #30363D;
    --border-orange: rgba(255, 140, 0, 0.3);

    --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.5);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.6);
    --shadow-orange: 0 0 20px rgba(255, 140, 0, 0.15);

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 20px;

    --transition-fast: 0.15s ease;
    --transition-base: 0.25s ease;
    --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    --font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
    --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    --status-online: #22C55E;
    --status-offline: #484F58;
    --status-warning: #F59E0B;
    --status-error: #EF4444;
}

/* СВЕТЛАЯ ТЕМА */
[data-theme="light"] {
    --color-primary: #E07800;
    --color-primary-hover: #CC6A00;
    --color-primary-light: #FF8C00;
    --color-primary-glow: rgba(224, 120, 0, 0.2);

    --bg-base: #F5F5F5;
    --bg-primary: #FFFFFF;
    --bg-secondary: #FAFAFA;
    --bg-surface: #FFFFFF;
    --bg-surface-hover: #F0F0F0;
    --bg-glass: rgba(255, 255, 255, 0.9);

    --text-primary: #1A1A1A;
    --text-secondary: #666666;
    --text-muted: #999999;
    --text-orange: #E07800;

    --border-default: #E0E0E0;
    --border-hover: #CCCCCC;
    --border-orange: rgba(224, 120, 0, 0.3);

    --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.1);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
    --shadow-orange: 0 0 16px rgba(224, 120, 0, 0.1);

    --status-online: #16A34A;
    --status-offline: #999999;
    --status-warning: #D97706;
    --status-error: #DC2626;
}
}

/* legacy: 01_reset.css */
@layer legacy {
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    font-size: 14px;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-sans);
    background: var(--bg-base);
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
    overflow-x: hidden;
}

/* Скроллбар */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: var(--border-hover); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* Выделение */
::selection { background: rgba(255, 140, 0, 0.3); color: var(--text-primary); }

/* Glass эффект */
.glass {
    background: var(--bg-glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-default);
}

.glass-orange {
    background: linear-gradient(135deg, rgba(255,140,0,0.08) 0%, rgba(255,140,0,0.02) 100%);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border-orange);
}

/* Glow эффекты */
.glow-orange { box-shadow: var(--shadow-orange); }
.glow-on-hover:hover { box-shadow: 0 0 24px rgba(255,140,0,0.25); }

a { color: var(--color-primary); text-decoration: none; transition: var(--transition-fast); }
a:hover { color: var(--color-primary-hover); }

img, svg { max-width: 100%; display: block; }

/* Светлая тема — явные переопределения */
[data-theme="light"] body {
    background: #F5F5F5;
    color: #1A1A1A;
}

[data-theme="light"] .sidebar {
    background: #FAFAFA;
    border-right-color: #E0E0E0;
}

[data-theme="light"] .topbar {
    background: #FFFFFF;
    border-bottom-color: #E0E0E0;
}

[data-theme="light"] .card,
[data-theme="light"] .stat-card,
[data-theme="light"] .table-container {
    background: #FFFFFF;
    border-color: #E0E0E0;
}

[data-theme="light"] .table th {
    background: #F5F5F5;
    color: #666;
}

[data-theme="light"] .table td {
    border-bottom-color: #F0F0F0;
}

[data-theme="light"] .table tr:hover td {
    background: #FAFAFA;
}

[data-theme="light"] .nav-item:hover {
    background: #F0F0F0;
    color: #1A1A1A;
}

[data-theme="light"] .nav-item.active {
    background: rgba(224, 120, 0, 0.08);
}

[data-theme="light"] input,
[data-theme="light"] select,
[data-theme="light"] textarea,
[data-theme="light"] .form-input,
[data-theme="light"] .form-select,
[data-theme="light"] .form-textarea {
    background: #FFFFFF;
    border-color: #D0D0D0;
    color: #1A1A1A;
}

[data-theme="light"] input:focus,
[data-theme="light"] select:focus,
[data-theme="light"] textarea:focus {
    border-color: #E07800;
    box-shadow: 0 0 0 3px rgba(224,120,0,0.15);
}

[data-theme="light"] .btn {
    background: #F5F5F5;
    color: #1A1A1A;
    border-color: #D0D0D0;
}

[data-theme="light"] .btn:hover {
    background: #EBEBEB;
}

[data-theme="light"] .btn-primary {
    background: #E07800;
    color: #FFFFFF;
    border-color: #E07800;
}

[data-theme="light"] .btn-primary:hover {
    background: #CC6A00;
}

[data-theme="light"] .btn-delete {
    color: #DC2626;
    border-color: rgba(220,38,38,0.3);
}

[data-theme="light"] .btn-reboot {
    color: #D97706;
    border-color: rgba(217,119,6,0.3);
}

[data-theme="light"] .status-dot {
    background: #16A34A;
}

[data-theme="light"] .system-status {
    color: #666;
}
}

/* legacy: 02_tipography.css */
@layer legacy {
h1, h2, h3, h4, h5, h6 { font-weight: 600; line-height: 1.3; color: var(--text-primary); }
h1 { font-size: 1.75rem; letter-spacing: -0.02em; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.1rem; }

.page-title {
    font-size: 1.5rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--text-primary) 0%, var(--color-primary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.section-title {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
    font-weight: 600;
}

.text-orange { color: var(--color-primary); }
.text-muted { color: var(--text-muted); }
.text-mono { font-family: var(--font-mono); font-size: 0.85rem; }
}

/* legacy: 03_layout.css */
@layer legacy {
.layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    min-height: 100vh;
}

.main {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.content {
    flex: 1;
    padding: 1.5rem;
    max-width: 1400px;
    width: 100%;
}

/* Сетка карточек */
.grid { display: grid; gap: 1rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1200px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) {
    .layout { grid-template-columns: 1fr; }
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
    .content { padding: 1rem; }
}
}

/* legacy: 04_header.css */
@layer legacy {
.topbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1.5rem;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-default);
    position: sticky;
    top: 0;
    z-index: 100;
}

.menu-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.25rem;
}

.topbar-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.topbar-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.status-item {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.status-item .label { font-size: 0.65rem; color: var(--text-muted); text-transform: uppercase; }
.status-item .value { font-size: 0.85rem; color: var(--color-primary); font-weight: 600; }

.status-dot {
    width: 8px; height: 8px;
    background: var(--status-online);
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

@media (max-width: 768px) {
    .menu-toggle { display: block; }
    .topbar { padding: 0.5rem 1rem; }
}
}

/* legacy: 05_sidebar.css */
@layer legacy {
.sidebar {
    background: var(--bg-secondary);
    border-right: 1px solid var(--border-default);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    z-index: 200;
}

.sidebar-logo {
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-bottom: 1px solid var(--border-default);
}

.logo-icon {
    font-size: 1.75rem;
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, rgba(255,140,0,0.2), rgba(255,140,0,0.05));
    border-radius: var(--radius-md);
    border: 1px solid var(--border-orange);
}

.logo-text h1 {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.logo-text span {
    font-size: 0.7rem;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.sidebar-nav {
    flex: 1;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.85rem;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    transition: var(--transition-fast);
    font-size: 0.9rem;
    border: 1px solid transparent;
}

.nav-item:hover {
    background: var(--bg-surface);
    color: var(--text-primary);
    border-color: var(--border-default);
}

.nav-item.active {
    background: linear-gradient(135deg, rgba(255,140,0,0.12) 0%, rgba(255,140,0,0.04) 100%);
    color: var(--color-primary);
    border-color: var(--border-orange);
    font-weight: 500;
}

.nav-icon { font-size: 1.1rem; width: 24px; text-align: center; }

.sidebar-footer {
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--border-default);
}

.system-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

@media (max-width: 768px) {
    .sidebar {
        position: fixed;
        left: -280px;
        width: 280px;
        transition: left var(--transition-base);
    }
    .sidebar.open { left: 0; }
    .mobile-overlay {
        display: none;
        position: fixed; inset: 0;
        background: rgba(0,0,0,0.5);
        z-index: 150;
    }
    .mobile-overlay.active { display: block; }
}
}

/* legacy: 06_dashboard.css */
@layer legacy {
.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stat-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    transition: var(--transition-base);
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 3px;
    background: linear-gradient(90deg, var(--color-primary), transparent);
    opacity: 0;
    transition: var(--transition-base);
}

.stat-card:hover {
    border-color: var(--border-orange);
    box-shadow: var(--shadow-orange);
    transform: translateY(-2px);
}
.stat-card:hover::before { opacity: 1; }

.stat-card-icon { font-size: 1.5rem; margin-bottom: 0.5rem; }
.stat-card-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    font-family: var(--font-mono);
}
.stat-card-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 0.25rem;
}

.stat-card.status-online { border-left: 3px solid var(--status-online); }
.stat-card.status-warning { border-left: 3px solid var(--status-warning); }
.stat-card.status-offline { border-left: 3px solid var(--status-offline); }
}

/* legacy: 07_card.css */
@layer legacy {
.card {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    transition: var(--transition-base);
}

.card:hover {
    border-color: var(--border-hover);
    box-shadow: var(--shadow-md);
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-default);
}

.card-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
}

.card-body { color: var(--text-secondary); font-size: 0.9rem; }

/* Карточка с оранжевым акцентом */
.card-accent {
    border-top: 2px solid var(--color-primary);
    background: linear-gradient(180deg, rgba(255,140,0,0.04) 0%, var(--bg-surface) 30%);
}
}

/* legacy: 08_button.css */
@layer legacy {
/* ========================================
   KUTURCHIN UI — legacy buttons
   ======================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.55rem 1.1rem;
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    border: 1px solid transparent;
    text-decoration: none;
    font-family: var(--font-sans);
    line-height: 1.4;
    white-space: nowrap;
    user-select: none;
    background: var(--bg-surface);
    color: var(--text-primary);
    border-color: var(--border-default);
}

.btn:hover {
    background: var(--bg-surface-hover);
    border-color: var(--border-hover);
    transform: translateY(-1px);
}

.btn:active {
    transform: translateY(0);
}

/* Primary — оранжевая */
.btn-primary {
    background: var(--color-primary);
    color: #0A0E14;
    border-color: var(--color-primary);
    font-weight: 600;
}
.btn-primary:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    box-shadow: 0 0 20px rgba(255,140,0,0.3);
    color: #0A0E14;
}

/* Outline */
.btn-outline {
    background: transparent;
    color: var(--color-primary);
    border-color: var(--border-orange);
}
.btn-outline:hover {
    background: rgba(255,140,0,0.08);
    border-color: var(--color-primary);
    box-shadow: 0 0 12px rgba(255,140,0,0.15);
}

/* Ghost */
.btn-ghost {
    background: transparent;
    color: var(--text-secondary);
    border-color: transparent;
}
.btn-ghost:hover {
    background: var(--bg-surface);
    color: var(--text-primary);
}

/* Danger */
.btn-danger {
    background: transparent;
    color: var(--color-danger);
    border-color: rgba(239,68,68,0.3);
}
.btn-danger:hover {
    background: rgba(239,68,68,0.1);
    border-color: var(--color-danger);
    box-shadow: 0 0 12px rgba(239,68,68,0.2);
}

/* Success */
.btn-success {
    background: transparent;
    color: var(--color-success);
    border-color: rgba(34,197,94,0.3);
}
.btn-success:hover {
    background: rgba(34,197,94,0.1);
    border-color: var(--color-success);
}

/* Sizes */
.btn-sm { padding: 0.35rem 0.75rem; font-size: 0.8rem; border-radius: var(--radius-sm); }
.btn-lg { padding: 0.7rem 1.5rem; font-size: 0.95rem; }
.btn-block { width: 100%; }

/* Icon button */
.btn-icon {
    padding: 0.45rem;
    width: 36px; height: 36px;
    border-radius: var(--radius-md);
}
.btn-icon.btn-sm {
    padding: 0.3rem;
    width: 28px; height: 28px;
}

/* Disabled */
.btn:disabled, .btn.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
    transform: none !important;
}

/* Group */
.btn-group {
    display: inline-flex;
    gap: 0;
}
.btn-group .btn {
    border-radius: 0;
    margin-left: -1px;
}
.btn-group .btn:first-child { border-radius: var(--radius-md) 0 0 var(--radius-md); margin-left: 0; }
.btn-group .btn:last-child { border-radius: 0 var(--radius-md) var(--radius-md) 0; }

/* Loading */
.btn.loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}
.btn.loading::after {
    content: '';
    position: absolute;
    width: 16px; height: 16px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
}

/* legacy: 09_form.css */
@layer legacy {
/* ========================================
   KUTURCHIN UI — legacy forms
   ======================================== */

.form-group {
    margin-bottom: 1rem;
}

.form-label {
    display: block;
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 0.35rem;
    font-weight: 500;
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: 0.55rem 0.75rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.9rem;
    font-family: var(--font-sans);
    transition: all var(--transition-fast);
    outline: none;
}

.form-input:hover,
.form-select:hover,
.form-textarea:hover {
    border-color: var(--border-hover);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-glow);
    background: var(--bg-primary);
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--text-muted);
}

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

.form-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='%238B949E' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2rem;
}

.form-select option {
    background: var(--bg-surface);
    color: var(--text-primary);
}

.form-checkbox,
.form-radio {
    accent-color: var(--color-primary);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.form-inline {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.form-hint {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

.form-error {
    font-size: 0.75rem;
    color: var(--color-danger);
    margin-top: 0.25rem;
}

.form-success {
    font-size: 0.75rem;
    color: var(--color-success);
    margin-top: 0.25rem;
}

/* File input */
.form-file {
    position: relative;
}
.form-file input[type="file"] {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}
.form-file-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.75rem;
    background: var(--bg-primary);
    border: 1px dashed var(--border-default);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition-fast);
}
.form-file-label:hover {
    border-color: var(--border-orange);
    color: var(--color-primary);
}

/* Disabled */
.form-input:disabled,
.form-select:disabled,
.form-textarea:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--bg-secondary);
}
}

/* legacy: 10_input.css */
@layer legacy {
/* ========================================
   KUTURCHIN UI — legacy input extras
   ======================================== */

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="date"],
input[type="time"] {
    background: var(--bg-primary);
    border: 1px solid var(--border-default);
    color: var(--text-primary);
    padding: 0.55rem 0.75rem;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    font-family: var(--font-sans);
    transition: all var(--transition-fast);
    outline: none;
}

input:hover {
    border-color: var(--border-hover);
}

input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-glow);
}

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

input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--bg-secondary);
}

/* Search input */
.input-search {
    padding-left: 2.25rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%238B949E' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85zm-5.242.156a5 5 0 1 1 0-10 5 5 0 0 1 0 10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 0.65rem center;
    background-color: var(--bg-primary);
}
}

/* legacy: 11_select.css */
@layer legacy {
/* Select custom */
select {
    background: var(--bg-primary);
    border: 1px solid var(--border-default);
    color: var(--text-primary);
    padding: 0.55rem 0.75rem;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    cursor: pointer;
    outline: none;
    transition: var(--transition-fast);
}
select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-glow);
}
select option {
    background: var(--bg-surface);
    color: var(--text-primary);
}
}

/* legacy: 12_checkbox.css */
@layer legacy {
/*
===============================================================================
 KUTURCHIN UI
 12_checkbox.css
 Часть 1/4
===============================================================================
*/

/* ============================================================================
   CHECKBOX
============================================================================ */

.checkbox{

    display:inline-flex;

    align-items:center;

    gap:var(--space-3);

    cursor:pointer;

    user-select:none;

}

.checkbox input{

    position:absolute;

    opacity:0;

    pointer-events:none;

}

/* ============================================================================
   КВАДРАТ
============================================================================ */

.checkbox-box{

    display:flex;

    align-items:center;

    justify-content:center;

    width:20px;

    height:20px;

    flex-shrink:0;

    background:var(--surface);

    border:2px solid var(--border);

    border-radius:var(--radius-sm);

    transition:
        border-color var(--transition-fast),
        background var(--transition-fast);

}

.checkbox:hover .checkbox-box{

    border-color:var(--color-primary);

}

.checkbox input:checked + .checkbox-box{

    background:var(--color-primary);

    border-color:var(--color-primary);

}

.checkbox-box svg{

    width:14px;

    height:14px;

    color:var(--white);

    opacity:0;

}

.checkbox input:checked + .checkbox-box svg{

    opacity:1;

}

/* ============================================================================
   ТЕКСТ
============================================================================ */

.checkbox-label{

    color:var(--text);

    line-height:1.5;

}
/* ============================================================================
   KUTURCHIN UI
   12_checkbox.css
   Часть 2/4
============================================================================ */

/* ============================================================================
   СОСТОЯНИЯ
============================================================================ */

.checkbox input:focus-visible + .checkbox-box{

    outline:2px solid var(--color-primary);

    outline-offset:2px;

}

.checkbox input:disabled + .checkbox-box{

    background:var(--surface-secondary);

    border-color:var(--border);

    opacity:var(--opacity-disabled);

}

.checkbox input:disabled ~ .checkbox-label{

    color:var(--text-secondary);

    cursor:not-allowed;

}

.checkbox.disabled{

    cursor:not-allowed;

}

/* ============================================================================
   INLINE
============================================================================ */

.checkbox-group{

    display:flex;

    flex-direction:column;

    gap:var(--space-3);

}

.checkbox-inline{

    display:flex;

    flex-wrap:wrap;

    gap:var(--space-5);

    align-items:center;

}

/* ============================================================================
   РАЗМЕРЫ
============================================================================ */

.checkbox-sm .checkbox-box{

    width:16px;

    height:16px;

}

.checkbox-sm .checkbox-box svg{

    width:10px;

    height:10px;

}

.checkbox-lg .checkbox-box{

    width:24px;

    height:24px;

}

.checkbox-lg .checkbox-box svg{

    width:16px;

    height:16px;

}
/* ============================================================================
   KUTURCHIN UI
   12_checkbox.css
   Часть 3/4
============================================================================ */

/* ============================================================================
   RADIO BUTTON
============================================================================ */

.radio{

    display:inline-flex;

    align-items:center;

    gap:var(--space-3);

    cursor:pointer;

    user-select:none;

}

.radio input{

    position:absolute;

    opacity:0;

    pointer-events:none;

}

.radio-circle{

    display:flex;

    align-items:center;

    justify-content:center;

    width:20px;

    height:20px;

    flex-shrink:0;

    border:2px solid var(--border);

    border-radius:50%;

    background:var(--surface);

    transition:
        border-color var(--transition-fast),
        background var(--transition-fast);

}

.radio-circle::after{

    content:"";

    width:10px;

    height:10px;

    border-radius:50%;

    background:var(--white);

    transform:scale(0);

    transition:transform var(--transition-fast);

}

.radio:hover .radio-circle{

    border-color:var(--color-primary);

}

.radio input:checked + .radio-circle{

    background:var(--color-primary);

    border-color:var(--color-primary);

}

.radio input:checked + .radio-circle::after{

    transform:scale(1);

}

.radio-label{

    line-height:1.5;

}
/* ============================================================================
   KUTURCHIN UI
   12_checkbox.css
   Часть 4/4
============================================================================ */

/* ============================================================================
   RADIO GROUP
============================================================================ */

.radio-group{

    display:flex;

    flex-direction:column;

    gap:var(--space-3);

}

.radio-inline{

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:var(--space-5);

}

/* ============================================================================
   СОСТОЯНИЯ RADIO
============================================================================ */

.radio input:focus-visible + .radio-circle{

    outline:2px solid var(--color-primary);

    outline-offset:2px;

}

.radio input:disabled + .radio-circle{

    opacity:var(--opacity-disabled);

    background:var(--surface-secondary);

}

.radio input:disabled ~ .radio-label{

    color:var(--text-secondary);

    cursor:not-allowed;

}

.radio.disabled{

    cursor:not-allowed;

}

/* ============================================================================
   ПЕРЕКЛЮЧАТЕЛЬ (SWITCH)
============================================================================ */

.switch{

    display:inline-flex;

    align-items:center;

    gap:var(--space-3);

    cursor:pointer;

    user-select:none;

}

.switch-label{

    line-height:1.5;

}

/* ============================================================================
   КОНЕЦ ФАЙЛА
============================================================================ */
}

/* legacy: 13_table.css */
@layer legacy {
.table-container {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.table th {
    background: var(--bg-secondary);
    padding: 0.75rem 1rem;
    text-align: left;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--border-default);
}

.table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-default);
    color: var(--text-primary);
}

.table tr:last-child td { border-bottom: none; }
.table tr:hover td { background: var(--bg-surface-hover); }

.table .status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.6rem;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 500;
}

.status-badge.online { background: rgba(34,197,94,0.1); color: var(--status-online); }
.status-badge.offline { background: rgba(72,79,88,0.1); color: var(--status-offline); }
.status-badge.warning { background: rgba(245,158,11,0.1); color: var(--status-warning); }
}

/* legacy: 14_modal.css */
@layer legacy {
/*
===============================================================================
 KUTURCHIN UI
 14_modal.css
 Часть 1/4
===============================================================================
*/

/* ============================================================================
   OVERLAY
============================================================================ */

.modal{

    position:fixed;

    inset:0;

    display:none;

    align-items:center;

    justify-content:center;

    padding:var(--space-6);

    background:rgba(0,0,0,.45);

    backdrop-filter:blur(4px);

    z-index:var(--z-modal);

}

.modal.open{

    display:flex;

}

/* ============================================================================
   ОКНО
============================================================================ */

.modal-dialog{

    display:flex;

    flex-direction:column;

    width:100%;

    max-width:640px;

    max-height:90vh;

    overflow:hidden;

    background:var(--surface);

    border:1px solid var(--border);

    border-radius:var(--card-radius);

    box-shadow:var(--shadow-xl);

    animation:modal-show .18s ease-out;

}

/* ============================================================================
   HEADER
============================================================================ */

.modal-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:var(--space-4);

    padding:var(--card-padding);

    border-bottom:1px solid var(--border);

}

.modal-title{

    margin:0;

    font-size:var(--font-size-xl);

    font-weight:var(--font-weight-semibold);

}

.modal-close{

    flex-shrink:0;

}
/* ============================================================================
   KUTURCHIN UI
   14_modal.css
   Часть 2/4
============================================================================ */

/* ============================================================================
   BODY
============================================================================ */

.modal-body{

    flex:1;

    overflow:auto;

    padding:var(--card-padding);

}

.modal-text{

    line-height:1.7;

    color:var(--text);

}

.modal-scroll{

    overflow-y:auto;

    max-height:60vh;

}

/* ============================================================================
   FOOTER
============================================================================ */

.modal-footer{

    display:flex;

    align-items:center;

    justify-content:flex-end;

    gap:var(--space-3);

    padding:var(--card-padding);

    border-top:1px solid var(--border);

    background:var(--surface-secondary);

}

/* ============================================================================
   РАЗМЕРЫ
============================================================================ */

.modal-sm{

    max-width:420px;

}

.modal-md{

    max-width:640px;

}

.modal-lg{

    max-width:960px;

}

.modal-xl{

    max-width:1280px;

}
/* ============================================================================
   KUTURCHIN UI
   14_modal.css
   Часть 3/4
============================================================================ */

/* ============================================================================
   ПОЛНОЭКРАННОЕ ОКНО
============================================================================ */

.modal-fullscreen{

    width:100%;

    max-width:none;

    height:100%;

    max-height:none;

    border-radius:0;

}

/* ============================================================================
   СОСТОЯНИЕ ЗАГРУЗКИ
============================================================================ */

.modal.loading .modal-body{

    opacity:.6;

    pointer-events:none;

}

/* ============================================================================
   ЦЕНТРИРОВАНИЕ
============================================================================ */

.modal-center{

    text-align:center;

}

.modal-center .modal-footer{

    justify-content:center;

}

/* ============================================================================
   ОПАСНОЕ ДЕЙСТВИЕ
============================================================================ */

.modal-danger .modal-header{

    border-bottom-color:var(--status-error);

}

.modal-danger .modal-title{

    color:var(--status-error);

}

/* ============================================================================
   ИНФОРМАЦИОННОЕ ОКНО
============================================================================ */

.modal-info .modal-header{

    border-bottom-color:var(--color-primary);

}

.modal-warning .modal-header{

    border-bottom-color:var(--status-warning);

}

.modal-success .modal-header{

    border-bottom-color:var(--status-online);

}
/* ============================================================================
   KUTURCHIN UI
   14_modal.css
   Часть 4/4
============================================================================ */

/* ============================================================================
   АНИМАЦИЯ
============================================================================ */

@keyframes modal-show{

    from{

        opacity:0;

        transform:translateY(-16px) scale(.98);

    }

    to{

        opacity:1;

        transform:translateY(0) scale(1);

    }

}

/* ============================================================================
   АДАПТАЦИЯ
============================================================================ */

@media (max-width:768px){

    .modal{

        padding:var(--space-3);

    }

    .modal-dialog{

        max-width:100%;

        max-height:100%;

    }

    .modal-footer{

        flex-direction:column;

        align-items:stretch;

    }

}

/* ============================================================================
   БЛОКИ
============================================================================ */

.modal-divider{

    width:100%;

    height:1px;

    margin:var(--space-4) 0;

    background:var(--border);

}

/* ============================================================================
   КОНЕЦ ФАЙЛА
============================================================================ */
}

/* legacy: 15_alert.css */
@layer legacy {
/*
===============================================================================
 KUTURCHIN UI
 15_alert.css
 Часть 1/3
===============================================================================
*/

/* ============================================================================
   ALERT
============================================================================ */

.alert{

    display:flex;

    align-items:flex-start;

    gap:var(--space-4);

    padding:var(--space-4);

    border:1px solid var(--border);

    border-radius:var(--radius-md);

    background:var(--surface);

}

/* ============================================================================
   ИКОНКА
============================================================================ */

.alert-icon{

    display:flex;

    align-items:center;

    justify-content:center;

    width:22px;

    height:22px;

    flex-shrink:0;

}

.alert-icon svg{

    width:20px;

    height:20px;

}

/* ============================================================================
   КОНТЕНТ
============================================================================ */

.alert-content{

    flex:1;

}

.alert-title{

    margin:0 0 4px;

    font-size:var(--font-size-md);

    font-weight:var(--font-weight-semibold);

}

.alert-text{

    color:var(--text-secondary);

    line-height:1.6;

}
/* ============================================================================
   KUTURCHIN UI
   15_alert.css
   Часть 2/3
============================================================================ */

/* ============================================================================
   ТИПЫ ALERT
============================================================================ */

.alert-info{

    border-left:4px solid var(--color-primary);

}

.alert-success{

    border-left:4px solid var(--status-online);

}

.alert-warning{

    border-left:4px solid var(--status-warning);

}

.alert-error{

    border-left:4px solid var(--status-error);

}

/* ============================================================================
   КНОПКА ЗАКРЫТИЯ
============================================================================ */

.alert-close{

    display:flex;

    align-items:center;

    justify-content:center;

    width:32px;

    height:32px;

    margin-left:auto;

    border-radius:var(--radius-sm);

    cursor:pointer;

    transition:background var(--transition-fast);

}

.alert-close:hover{

    background:var(--surface-secondary);

}

/* ============================================================================
   КОМПАКТНЫЙ ALERT
============================================================================ */

.alert.compact{

    gap:var(--space-3);

    padding:var(--space-3);

}
/* ============================================================================
   KUTURCHIN UI
   15_alert.css
   Часть 3/3
============================================================================ */

/* ============================================================================
   ALERT С ДЕЙСТВИЯМИ
============================================================================ */

.alert-actions{

    display:flex;

    align-items:center;

    gap:var(--space-3);

    margin-top:var(--space-4);

    flex-wrap:wrap;

}

/* ============================================================================
   ALERT БЕЗ ИКОНКИ
============================================================================ */

.alert.no-icon{

    padding-left:var(--space-5);

}

/* ============================================================================
   ALERT НА ВСЮ ШИРИНУ
============================================================================ */

.alert.block{

    width:100%;

}

/* ============================================================================
   ALERT СТЕК
============================================================================ */

.alert-stack{

    display:flex;

    flex-direction:column;

    gap:var(--space-3);

}

/* ============================================================================
   ФОКУС
============================================================================ */

.alert:focus-within{

    border-color:var(--color-primary);

}

/* ============================================================================
   КОНЕЦ ФАЙЛА
============================================================================ */
}

/* legacy: 16_badge.css */
@layer legacy {
/*
===============================================================================
 KUTURCHIN UI
 16_badge.css
 Часть 1/3
===============================================================================
*/

/* ============================================================================
   BADGE
============================================================================ */

.badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:6px;

    min-height:24px;

    padding:0 10px;

    border-radius:999px;

    border:1px solid transparent;

    background:var(--surface-secondary);

    color:var(--text);

    font-size:var(--font-size-xs);

    font-weight:var(--font-weight-semibold);

    line-height:1;

    white-space:nowrap;

}

/* ============================================================================
   ЦВЕТА
============================================================================ */

.badge-primary{

    background:var(--color-primary);

    color:var(--white);

}

.badge-success{

    background:var(--status-online);

    color:var(--white);

}

.badge-warning{

    background:var(--status-warning);

    color:var(--white);

}

.badge-error{

    background:var(--status-error);

    color:var(--white);

}

.badge-secondary{

    background:var(--surface-secondary);

}
/* ============================================================================
   KUTURCHIN UI
   16_badge.css
   Часть 2/3
============================================================================ */

/* ============================================================================
   OUTLINE
============================================================================ */

.badge-outline{

    background:transparent;

    border-color:var(--border);

    color:var(--text);

}

.badge-outline-primary{

    border-color:var(--color-primary);

    color:var(--color-primary);

}

.badge-outline-success{

    border-color:var(--status-online);

    color:var(--status-online);

}

.badge-outline-warning{

    border-color:var(--status-warning);

    color:var(--status-warning);

}

.badge-outline-error{

    border-color:var(--status-error);

    color:var(--status-error);

}

/* ============================================================================
   РАЗМЕРЫ
============================================================================ */

.badge-sm{

    min-height:20px;

    padding:0 8px;

    font-size:11px;

}

.badge-lg{

    min-height:30px;

    padding:0 14px;

    font-size:var(--font-size-sm);

}
/* ============================================================================
   KUTURCHIN UI
   16_badge.css
   Часть 3/3
============================================================================ */

/* ============================================================================
   BADGE С ИКОНКОЙ
============================================================================ */

.badge-icon{

    display:flex;

    align-items:center;

    justify-content:center;

    width:14px;

    height:14px;

}

.badge-icon svg{

    width:12px;

    height:12px;

}

/* ============================================================================
   BADGE ТОЧКА
============================================================================ */

.badge-dot{

    width:8px;

    height:8px;

    border-radius:50%;

    background:currentColor;

}

/* ============================================================================
   BADGE ГРУППА
============================================================================ */

.badge-group{

    display:flex;

    align-items:center;

    gap:var(--space-2);

    flex-wrap:wrap;

}

/* ============================================================================
   BADGE BLOCK
============================================================================ */

.badge.block{

    display:flex;

    width:100%;

    justify-content:center;

}

/* ============================================================================
   КОНЕЦ ФАЙЛА
============================================================================ */
}

/* legacy: 17_progress.css */
@layer legacy {
/*
===============================================================================
 KUTURCHIN UI
 17_progress.css
 Часть 1/3
===============================================================================
*/

/* ============================================================================
   PROGRESS
============================================================================ */

.progress{

    display:flex;

    flex-direction:column;

    gap:var(--space-2);

    width:100%;

}

/* ============================================================================
   HEADER
============================================================================ */

.progress-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:var(--space-3);

}

.progress-title{

    font-size:var(--font-size-sm);

    font-weight:var(--font-weight-medium);

}

.progress-value{

    font-size:var(--font-size-sm);

    color:var(--text-secondary);

}

/* ============================================================================
   BAR
============================================================================ */

.progress-bar{

    width:100%;

    height:10px;

    overflow:hidden;

    background:var(--surface-secondary);

    border-radius:999px;

}

.progress-fill{

    height:100%;

    width:0;

    background:var(--color-primary);

    border-radius:inherit;

    transition:width .35s ease;

}
/* ============================================================================
   KUTURCHIN UI
   17_progress.css
   Часть 2/3
============================================================================ */

/* ============================================================================
   ЦВЕТА
============================================================================ */

.progress-fill.success{

    background:var(--status-online);

}

.progress-fill.warning{

    background:var(--status-warning);

}

.progress-fill.error{

    background:var(--status-error);

}

/* ============================================================================
   РАЗМЕРЫ
============================================================================ */

.progress-sm .progress-bar{

    height:6px;

}

.progress-md .progress-bar{

    height:10px;

}

.progress-lg .progress-bar{

    height:16px;

}

/* ============================================================================
   ПОЛОСЫ
============================================================================ */

.progress-striped .progress-fill{

    background-image:linear-gradient(
        45deg,
        rgba(255,255,255,.18) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255,255,255,.18) 50%,
        rgba(255,255,255,.18) 75%,
        transparent 75%,
        transparent
    );

    background-size:20px 20px;

}
/* ============================================================================
   KUTURCHIN UI
   17_progress.css
   Часть 3/3
============================================================================ */

/* ============================================================================
   АНИМАЦИЯ
============================================================================ */

.progress-animated .progress-fill{

    animation:progress-stripes 1s linear infinite;

}

@keyframes progress-stripes{

    from{

        background-position:0 0;

    }

    to{

        background-position:20px 0;

    }

}

/* ============================================================================
   КРУГОВОЙ PROGRESS
============================================================================ */

.progress-circle{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    position:relative;

}

.progress-circle-value{

    position:absolute;

    font-size:var(--font-size-sm);

    font-weight:var(--font-weight-semibold);

}

/* ============================================================================
   КОНЕЦ ФАЙЛА
============================================================================ */
}

/* legacy: 18_tabs.css */
@layer legacy {
/* ========================================
   KUTURCHIN UI — legacy tabs and action buttons
   ======================================== */

.tabs {
    display: flex;
    gap: 0.25rem;
    border-bottom: 1px solid var(--border-default);
    margin-bottom: 1rem;
    padding-bottom: 0;
}

.tab {
    padding: 0.5rem 1rem;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    transition: var(--transition-fast);
}
.tab:hover { color: var(--text-primary); }
.tab.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

/* Кнопки действий (удалить, перезагрузка, выбрать файлы) */
.action-btn,
.btn-delete,
.btn-reboot,
.btn-file {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.9rem;
    background: var(--bg-surface);
    color: var(--text-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all var(--transition-fast);
    font-family: var(--font-sans);
}

.action-btn:hover,
.btn-file:hover {
    background: var(--bg-surface-hover);
    border-color: var(--border-hover);
    color: var(--text-primary);
}

.btn-delete {
    color: var(--color-danger);
    border-color: rgba(239,68,68,0.3);
}
.btn-delete:hover {
    background: rgba(239,68,68,0.12);
    border-color: var(--color-danger);
}

.btn-reboot {
    color: var(--color-warning);
    border-color: rgba(245,158,11,0.3);
}
.btn-reboot:hover {
    background: rgba(245,158,11,0.12);
    border-color: var(--color-warning);
}

/* File upload button */
.btn-file input[type="file"] {
    display: none;
}
}

/* source: 10-tokens.css */
@layer tokens {
:root {
    color-scheme: dark;

    /* Холодный стальной цвет отвечает за ссылки и фокус, но не заливает кнопки. */
    --color-action: #8fa9b7;
    --color-action-hover: #b5c8d1;
    --color-action-pressed: #718c9b;
    --color-action-soft: rgba(143, 169, 183, 0.11);
    --color-action-border: rgba(143, 169, 183, 0.25);
    --color-focus-ring: rgba(240, 138, 50, 0.34);

    --accent-warm: #f08a32;
    --accent-warm-hover: #ff9d4d;
    --accent-warm-pressed: #d96f1c;
    --accent-warm-soft: rgba(240, 138, 50, 0.10);
    --accent-warm-border: rgba(240, 138, 50, 0.28);

    --color-success: #4fc18a;
    --color-warning: #e7b55a;
    --color-danger: #ee7272;
    --color-info: #80aebe;

    --surface-base: #090c10;
    --surface-page: #0d1117;
    --surface-panel: #11171e;
    --surface-card: #151c24;
    --surface-card-hover: #1a232d;
    --surface-raised: #202a35;
    --surface-sunken: #0a0f14;
    --surface-overlay: rgba(3, 6, 9, 0.74);
    --surface-metal: linear-gradient(145deg, rgba(255,255,255,0.038), transparent 34%), linear-gradient(180deg, rgba(255,255,255,0.018), rgba(0,0,0,0.075));
    --surface-metal-strong: linear-gradient(145deg, rgba(255,255,255,0.065), transparent 38%), linear-gradient(180deg, rgba(255,255,255,0.025), rgba(0,0,0,0.10));

    --text-primary: #eef2f5;
    --text-secondary: #b0bbc4;
    --text-muted: #7f8c98;
    --text-faint: #5d6872;
    --text-inverse: #11171e;

    --border-subtle: rgba(189, 204, 216, 0.075);
    --border-default: rgba(189, 204, 216, 0.14);
    --border-strong: rgba(203, 216, 226, 0.24);

    --shadow-xs: 0 1px 1px rgba(0,0,0,0.20), 0 1px 0 rgba(255,255,255,0.025) inset;
    --shadow-sm: 0 3px 12px rgba(0,0,0,0.18), 0 1px 0 rgba(255,255,255,0.025) inset;
    --shadow-md: 0 14px 32px rgba(0,0,0,0.25), 0 1px 0 rgba(255,255,255,0.035) inset;
    --shadow-lg: 0 26px 70px rgba(0,0,0,0.36), 0 1px 0 rgba(255,255,255,0.045) inset;
    --shadow-focus: 0 0 0 3px var(--color-focus-ring);

    --radius-xs: 5px;
    --radius-sm: 8px;
    --radius-md: 11px;
    --radius-lg: 15px;
    --radius-xl: 20px;
    --radius-pill: 999px;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;

    /* Нативный стек: быстро, читаемо и одинаково уместно в Web/Android. */
    --font-sans: "Segoe UI Variable", "Inter", Roboto, "Noto Sans", Ubuntu, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: "Cascadia Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    --font-size-xs: 0.72rem;
    --font-size-sm: 0.84rem;
    --font-size-md: 0.96rem;
    --font-size-lg: 1.08rem;
    --font-size-xl: 1.28rem;
    --font-size-2xl: clamp(1.42rem, 1.22rem + .75vw, 1.92rem);
    --font-weight-medium: 500;
    --font-weight-semibold: 620;
    --font-weight-bold: 720;

    --control-height-sm: 2.1rem;
    --control-height-md: 2.55rem;
    --control-height-lg: 3rem;
    --sidebar-width: 15.5rem;
    --sidebar-rail-width: 4.75rem;
    --topbar-height: 3.65rem;
    --mobile-nav-height: 4rem;
    --content-max-width: 96rem;

    --transition-fast: 110ms ease;
    --transition-base: 180ms ease;
    --transition-slow: 280ms cubic-bezier(.2,.8,.2,1);

    /* Совместимость старых компонентов на период управляемой миграции. */
    --color-primary: var(--color-action);
    --color-primary-hover: var(--color-action-hover);
    --color-primary-light: var(--color-action-hover);
    --color-primary-glow: var(--color-focus-ring);
    --bg-base: var(--surface-base);
    --bg-primary: var(--surface-page);
    --bg-secondary: var(--surface-panel);
    --bg-surface: var(--surface-card);
    --bg-surface-hover: var(--surface-card-hover);
    --bg-glass: rgba(21,28,36,0.92);
    --text-orange: var(--accent-warm);
    --border-hover: var(--border-strong);
    --border-orange: var(--accent-warm-border);
    --shadow-orange: 0 0 0 1px var(--accent-warm-border), 0 10px 28px rgba(0,0,0,0.20);
    --status-online: var(--color-success);
    --status-offline: var(--text-muted);
    --status-warning: var(--color-warning);
    --status-error: var(--color-danger);
    --surface: var(--surface-card);
    --surface-secondary: var(--surface-panel);
    --border: var(--border-default);
    --text: var(--text-primary);
    --white: #ffffff;
}

html[data-theme="light"] {
    color-scheme: light;

    --color-action: #486c7d;
    --color-action-hover: #315767;
    --color-action-pressed: #294a58;
    --color-action-soft: rgba(72, 108, 125, 0.09);
    --color-action-border: rgba(72, 108, 125, 0.24);
    --color-focus-ring: rgba(216, 112, 27, 0.28);

    --accent-warm: #d8701b;
    --accent-warm-hover: #bd5e10;
    --accent-warm-pressed: #a64f0a;
    --accent-warm-soft: rgba(216, 112, 27, 0.085);
    --accent-warm-border: rgba(216, 112, 27, 0.25);

    --color-success: #26875a;
    --color-warning: #9d690e;
    --color-danger: #c84b4b;
    --color-info: #3f7183;

    --surface-base: #e8ecef;
    --surface-page: #f2f4f6;
    --surface-panel: #e9edf0;
    --surface-card: #fbfcfd;
    --surface-card-hover: #f5f7f8;
    --surface-raised: #ffffff;
    --surface-sunken: #e5eaed;
    --surface-overlay: rgba(18, 27, 33, 0.44);
    --surface-metal: linear-gradient(145deg, rgba(255,255,255,0.88), transparent 40%), linear-gradient(180deg, rgba(255,255,255,0.42), rgba(65,79,89,0.035));
    --surface-metal-strong: linear-gradient(145deg, rgba(255,255,255,0.95), transparent 42%), linear-gradient(180deg, rgba(255,255,255,0.5), rgba(65,79,89,0.055));

    --text-primary: #182128;
    --text-secondary: #4f5d67;
    --text-muted: #73808a;
    --text-faint: #98a2aa;
    --text-inverse: #ffffff;

    --border-subtle: rgba(40, 55, 65, 0.07);
    --border-default: rgba(40, 55, 65, 0.13);
    --border-strong: rgba(40, 55, 65, 0.22);

    --shadow-xs: 0 1px 2px rgba(28,39,47,0.055), 0 1px 0 rgba(255,255,255,0.9) inset;
    --shadow-sm: 0 4px 14px rgba(28,39,47,0.07), 0 1px 0 rgba(255,255,255,0.95) inset;
    --shadow-md: 0 14px 34px rgba(28,39,47,0.11), 0 1px 0 rgba(255,255,255,0.98) inset;
    --shadow-lg: 0 28px 70px rgba(28,39,47,0.16), 0 1px 0 rgba(255,255,255,1) inset;

    --bg-glass: rgba(251,252,253,0.94);
}
}

/* source: 20-foundations.css */
@layer reset {
*, *::before, *::after { box-sizing: border-box; }
html { min-height: 100%; font-size: 16px; -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; }
button, input, textarea, select { font: inherit; }
button { border: 0; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }
}

@layer foundations {
html { background: var(--surface-base); scroll-behavior: smooth; }
body {
    min-width: 20rem;
    min-height: 100vh;
    min-height: 100dvh;
    background:
        radial-gradient(circle at 84% -14%, var(--accent-warm-soft), transparent 24rem),
        linear-gradient(135deg, rgba(255,255,255,0.012), transparent 32rem),
        var(--surface-page);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: var(--font-size-sm);
    line-height: 1.5;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    font-variant-numeric: tabular-nums;
    overflow-x: hidden;
}

::selection { background: var(--accent-warm-border); color: var(--text-primary); }
:focus { outline: none; }
:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

h1, h2, h3, h4 {
    color: var(--text-primary);
    font-weight: var(--font-weight-semibold);
    line-height: 1.18;
    letter-spacing: -0.022em;
}
h1 { font-size: var(--font-size-2xl); }
h2 { font-size: var(--font-size-xl); }
h3 { font-size: var(--font-size-lg); }
p { max-width: 72ch; }
small { color: var(--text-muted); }
code, pre, .text-mono { font-family: var(--font-mono); }
a { text-decoration: none; }
a:not(.nav-item, .module-card, .launch-card, .btn, .button, .mobile-nav__item):hover { color: var(--color-action-hover); }

.icon { width: 1.18rem; height: 1.18rem; flex: 0 0 auto; stroke: currentColor; fill: none; }
.icon--sm { width: .95rem; height: .95rem; }
.icon--lg { width: 1.42rem; height: 1.42rem; }
.icon--xl { width: 1.9rem; height: 1.9rem; }
.icon--brand { width: 1.65rem; height: 1.65rem; }

::-webkit-scrollbar { width: 0.58rem; height: 0.58rem; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border: 0.16rem solid transparent; background-clip: padding-box; border-radius: var(--radius-pill); }
::-webkit-scrollbar-thumb:hover { background-color: var(--text-muted); }

.skip-link {
    position: fixed;
    top: var(--space-3);
    left: var(--space-3);
    z-index: 1000;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    background: var(--surface-raised);
    color: var(--text-primary);
    transform: translateY(-160%);
    transition: transform var(--transition-fast);
}
.skip-link:focus { transform: translateY(0); }

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

/* source: 30-layout.css */
@layer layout {
.app-shell {
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    min-height: 100vh;
    min-height: 100dvh;
}
.app-main { min-width: 0; min-height: 100vh; min-height: 100dvh; }
.app-content {
    width: min(100%, var(--content-max-width));
    margin-inline: auto;
    padding: clamp(.9rem, .65rem + .8vw, 1.65rem);
    padding-bottom: clamp(1.75rem, 3vw, 3rem);
}

.grid { display: grid; gap: var(--space-4); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.cluster { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); }

@media (max-width: 74.99rem) and (min-width: 48rem) {
    .app-shell { grid-template-columns: var(--sidebar-rail-width) minmax(0, 1fr); }
    .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 47.99rem) {
    .app-shell { display: block; }
    .app-content {
        padding: .85rem;
        padding-bottom: calc(var(--mobile-nav-height) + var(--space-6) + env(safe-area-inset-bottom));
    }
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}
}

/* source: 40-components.css */
@layer components {
.sidebar {
    position: sticky;
    top: 0;
    z-index: 300;
    display: flex;
    flex-direction: column;
    width: var(--sidebar-width);
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    background: var(--surface-metal), var(--surface-panel);
    border-right: 1px solid var(--border-default);
    box-shadow: var(--shadow-xs);
}
.sidebar__brand {
    position: relative;
    display: flex;
    align-items: center;
    gap: .72rem;
    min-height: 4rem;
    padding: .4rem .78rem;
}
.sidebar__brand::after {
    content: "";
    position: absolute;
    inset: auto .85rem 0;
    height: 1px;
    background: linear-gradient(90deg, var(--accent-warm-border), var(--border-subtle) 42%, transparent);
}
.brand-logo, .topbar__brand-mobile {
    position: relative;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}
.brand-logo { width: 3rem; height: 3rem; }
.brand-logo__image {
    grid-area: 1 / 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 4px 9px rgba(0,0,0,.22));
}
.brand-logo__image--light { display: none; }
html[data-theme="light"] .brand-logo__image--dark { display: none; }
html[data-theme="light"] .brand-logo__image--light { display: block; }
.brand-copy { min-width: 0; }
.brand-copy__name {
    overflow: hidden;
    color: var(--text-primary);
    font-size: .96rem;
    font-weight: var(--font-weight-bold);
    letter-spacing: .075em;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.brand-copy__version { margin-top: .04rem; color: var(--text-muted); font-size: .62rem; letter-spacing: .025em; }
.topbar__brand-mobile { display: none; width: 2rem; height: 2rem; }

.sidebar-nav { flex: 1; overflow-y: auto; padding: .65rem .55rem 1rem; }
.nav-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: .72rem;
    min-height: 2.45rem;
    margin-bottom: .16rem;
    padding: .42rem .68rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: .79rem;
    font-weight: var(--font-weight-medium);
    transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}
.nav-item:hover { background: rgba(255,255,255,.025); border-color: var(--border-subtle); color: var(--text-primary); }
.nav-item:active { transform: translateY(1px); }
.nav-item.active, .nav-item[aria-current="page"] {
    background: linear-gradient(90deg, var(--accent-warm-soft), rgba(255,255,255,.018) 72%, transparent);
    border-color: var(--accent-warm-border);
    color: var(--text-primary);
}
.nav-item.active::before, .nav-item[aria-current="page"]::before {
    content: "";
    position: absolute;
    left: -.12rem;
    width: .18rem;
    height: 1.2rem;
    border-radius: var(--radius-pill);
    background: var(--accent-warm);
    box-shadow: 0 0 12px var(--accent-warm-soft);
}
.nav-icon { display: grid; place-items: center; width: 1.25rem; color: var(--text-faint); }
.nav-item:hover .nav-icon { color: var(--color-action-hover); }
.nav-item.active .nav-icon, .nav-item[aria-current="page"] .nav-icon { color: var(--accent-warm); }
.nav-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sidebar__footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: .42rem;
    padding: .65rem;
    border-top: 1px solid var(--border-subtle);
}
.system-status { display: flex; align-items: center; min-width: 0; gap: .45rem; color: var(--text-muted); font-size: .68rem; }
.status-dot { width: .42rem; height: .42rem; flex: 0 0 auto; border-radius: 50%; background: var(--color-success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-success) 13%, transparent); }

.topbar {
    position: sticky;
    top: 0;
    z-index: 220;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--topbar-height);
    padding: 0 clamp(.85rem, .5rem + 1vw, 1.45rem);
    background: color-mix(in srgb, var(--surface-page) 92%, transparent);
    border-bottom: 1px solid var(--border-subtle);
    backdrop-filter: blur(15px) saturate(118%);
}
.topbar__title { color: var(--text-secondary); font-size: .79rem; font-weight: var(--font-weight-semibold); letter-spacing: .015em; }
.topbar__actions { display: flex; align-items: center; gap: .5rem; }
.topbar__meta { display: flex; align-items: center; gap: .4rem; }
.meta-item { display: flex; align-items: center; gap: .35rem; min-height: 1.8rem; padding: 0 .55rem; border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); background: rgba(255,255,255,.018); }
.meta-item__label { color: var(--text-faint); font-size: .62rem; }
.meta-item__value { color: var(--text-secondary); font-size: .66rem; font-weight: var(--font-weight-medium); }

.icon-button, .theme-control, .menu-toggle {
    display: inline-grid;
    place-items: center;
    width: 2.15rem;
    height: 2.15rem;
    padding: 0;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--surface-metal), var(--surface-card);
    color: var(--text-muted);
    box-shadow: var(--shadow-xs);
    cursor: pointer;
    transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
}
.icon-button:hover, .theme-control:hover, .menu-toggle:hover { border-color: var(--accent-warm-border); color: var(--text-primary); background: var(--surface-card-hover); }
.icon-button:active, .theme-control:active, .menu-toggle:active { transform: translateY(1px); }
.menu-toggle { display: none; }

.btn, .button, .action-btn, .btn-file, .btn-delete, .btn-reboot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .48rem;
    min-height: var(--control-height-md);
    padding: 0 .9rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--surface-metal), var(--surface-card);
    color: var(--text-secondary);
    box-shadow: var(--shadow-xs);
    cursor: pointer;
    font-size: .78rem;
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    text-decoration: none;
    transition: transform var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}
.btn:hover, .button:hover, .action-btn:hover, .btn-file:hover { background: var(--surface-metal-strong), var(--surface-card-hover); border-color: var(--border-strong); color: var(--text-primary); transform: translateY(-1px); }
.btn:active, .button:active, .action-btn:active, .btn-file:active { transform: translateY(0); background: var(--surface-sunken); }
.btn-primary, .button--primary {
    position: relative;
    overflow: hidden;
    background: var(--surface-metal-strong), var(--surface-raised);
    border-color: var(--accent-warm-border);
    color: var(--text-primary);
}
.btn-primary::before, .button--primary::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent-warm), transparent);
    opacity: .85;
}
.btn-primary:hover, .button--primary:hover { background: var(--surface-metal-strong), var(--surface-card-hover); border-color: var(--accent-warm); color: var(--text-primary); }
.btn-primary:active, .button--primary:active { background: var(--surface-sunken); border-color: var(--accent-warm-pressed); }
.btn-outline { background: transparent; border-color: var(--color-action-border); color: var(--color-action-hover); }
.btn-ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--text-secondary); }
.btn-danger, .btn-delete { background: transparent; border-color: color-mix(in srgb, var(--color-danger) 34%, transparent); color: var(--color-danger); }
.btn-success { background: transparent; border-color: color-mix(in srgb, var(--color-success) 34%, transparent); color: var(--color-success); }
.btn-reboot { background: transparent; border-color: color-mix(in srgb, var(--color-warning) 34%, transparent); color: var(--color-warning); }
.btn-sm { min-height: var(--control-height-sm); padding-inline: .7rem; font-size: .71rem; }
.btn-lg { min-height: var(--control-height-lg); padding-inline: 1.1rem; font-size: .86rem; }
.btn-block { width: 100%; }
.btn:disabled, .button:disabled, .btn.disabled { opacity: .48; pointer-events: none; }

.card, .panel, .section-card {
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-metal), var(--surface-card);
    box-shadow: var(--shadow-xs);
}
.card { padding: var(--space-4); }
.page { display: grid; gap: var(--space-4); }
.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); }
.page-title { font-size: var(--font-size-2xl); }
.page-description { margin-top: .3rem; color: var(--text-muted); font-size: .82rem; }

input:not([type="checkbox"]):not([type="radio"]), select, textarea, .form-input, .form-select, .form-textarea {
    width: 100%;
    min-height: var(--control-height-md);
    padding: .58rem .72rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
    color: var(--text-primary);
    box-shadow: 0 1px 0 rgba(255,255,255,.018) inset;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}
textarea, .form-textarea { min-height: 7rem; resize: vertical; }
input:not([type="checkbox"]):not([type="radio"]):hover, select:hover, textarea:hover { border-color: var(--border-strong); }
input:not([type="checkbox"]):not([type="radio"]):focus, select:focus, textarea:focus, .form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--accent-warm-border); box-shadow: var(--shadow-focus); }
input::placeholder, textarea::placeholder { color: var(--text-muted); opacity: .78; }
label, .form-label { color: var(--text-secondary); font-weight: var(--font-weight-medium); }

.table-container { width: 100%; overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; }
.table th { padding: .68rem .85rem; background: var(--surface-panel); border-bottom: 1px solid var(--border-default); color: var(--text-muted); font-size: .66rem; letter-spacing: .07em; text-align: left; text-transform: uppercase; }
.table td { padding: .72rem .85rem; border-bottom: 1px solid var(--border-subtle); color: var(--text-secondary); }
.table tbody tr:hover td { background: var(--surface-card-hover); color: var(--text-primary); }

.alert {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: .8rem .9rem;
    border: 1px solid var(--border-default);
    border-left: .2rem solid var(--color-info);
    border-radius: var(--radius-sm);
    background: var(--surface-card);
    color: var(--text-secondary);
    box-shadow: var(--shadow-xs);
}
.alert-success { border-left-color: var(--color-success); }
.alert-warning { border-left-color: var(--color-warning); }
.alert-danger, .alert-error { border-left-color: var(--color-danger); }
.alert-info { border-left-color: var(--color-info); }

.tabs { display: flex; gap: .25rem; overflow-x: auto; margin-bottom: var(--space-4); border-bottom: 1px solid var(--border-default); }
.tab { min-height: 2.45rem; padding: 0 .8rem; border-bottom: 2px solid transparent; background: transparent; color: var(--text-muted); cursor: pointer; }
.tab:hover { color: var(--text-primary); }
.tab.active { border-bottom-color: var(--accent-warm); color: var(--text-primary); }

.mobile-overlay { display: none; }
.mobile-nav { display: none; }

@media (min-width: 75rem) {
    body.sidebar-collapsed .app-shell { grid-template-columns: var(--sidebar-rail-width) minmax(0, 1fr); }
    body.sidebar-collapsed .sidebar { width: var(--sidebar-rail-width); }
    body.sidebar-collapsed .sidebar__brand { justify-content: center; padding-inline: var(--space-2); }
    body.sidebar-collapsed .sidebar__brand::after { inset-inline: .7rem; }
    body.sidebar-collapsed .sidebar__brand .brand-logo { width: 3.2rem; height: 3.2rem; }
    body.sidebar-collapsed .brand-copy,
    body.sidebar-collapsed .nav-label,
    body.sidebar-collapsed .sidebar__footer .system-status span:last-child { display: none; }
    body.sidebar-collapsed .sidebar-nav { padding-inline: .42rem; }
    body.sidebar-collapsed .nav-item { justify-content: center; padding-inline: .5rem; }
    body.sidebar-collapsed .sidebar__footer { grid-template-columns: 1fr; justify-items: center; padding-inline: .4rem; }
}

@media (max-width: 74.99rem) and (min-width: 48rem) {
    .sidebar { width: var(--sidebar-rail-width); }
    .sidebar__brand { justify-content: center; padding-inline: var(--space-2); }
    .sidebar__brand::after { inset-inline: .7rem; }
    .sidebar__brand .brand-logo { width: 3.2rem; height: 3.2rem; }
    .brand-copy, .nav-label, .sidebar__footer .system-status span:last-child { display: none; }
    .sidebar-nav { padding-inline: .42rem; }
    .nav-item { justify-content: center; padding-inline: .5rem; }
    .nav-item.active::before, .nav-item[aria-current="page"]::before { left: -.05rem; }
    .sidebar__footer { grid-template-columns: 1fr; justify-items: center; padding-inline: .4rem; }
    body.sidebar-open .sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 300;
        width: min(18rem, calc(100vw - 2.5rem));
        box-shadow: var(--shadow-lg);
    }
    body.sidebar-open .sidebar__brand { justify-content: flex-start; padding: .4rem .78rem; }
    body.sidebar-open .brand-copy,
    body.sidebar-open .nav-label,
    body.sidebar-open .sidebar__footer .system-status span:last-child { display: block; }
    body.sidebar-open .sidebar-nav { padding-inline: .55rem; }
    body.sidebar-open .nav-item { justify-content: flex-start; padding-inline: .68rem; }
    body.sidebar-open .sidebar__footer { grid-template-columns: minmax(0, 1fr) auto auto; justify-items: stretch; padding-inline: .65rem; }
    body.sidebar-open .mobile-overlay {
        position: fixed;
        inset: 0;
        z-index: 290;
        display: block;
        background: var(--surface-overlay);
        opacity: 1;
        pointer-events: auto;
    }
}

@media (max-width: 47.99rem) {
    .sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        width: min(18rem, calc(100vw - 2.5rem));
        transform: translateX(-105%);
        transition: transform var(--transition-slow);
        box-shadow: var(--shadow-lg);
    }
    .sidebar.is-open { transform: translateX(0); }
    .mobile-overlay {
        position: fixed;
        inset: 0;
        z-index: 290;
        display: block;
        background: var(--surface-overlay);
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--transition-base);
    }
    .mobile-overlay.is-active { opacity: 1; pointer-events: auto; }
    .menu-toggle { display: inline-grid; }
    .topbar__brand-mobile { display: grid; }
    .topbar { min-height: 3.45rem; padding-inline: .72rem; }
    .topbar__meta { display: none; }
    .mobile-nav {
        position: fixed;
        inset: auto 0 0;
        z-index: 240;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        min-height: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom));
        padding: .28rem .3rem calc(.28rem + env(safe-area-inset-bottom));
        background: color-mix(in srgb, var(--surface-panel) 96%, transparent);
        border-top: 1px solid var(--border-default);
        box-shadow: 0 -10px 28px rgba(0,0,0,.16);
        backdrop-filter: blur(15px) saturate(120%);
    }
    .mobile-nav__item {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: .14rem;
        min-width: 0;
        min-height: 3.25rem;
        border-radius: var(--radius-sm);
        color: var(--text-muted);
        font-size: .59rem;
    }
    .mobile-nav__item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .mobile-nav__item.active, .mobile-nav__item[aria-current="page"] { background: var(--accent-warm-soft); color: var(--text-primary); }
    .mobile-nav__item.active::after, .mobile-nav__item[aria-current="page"]::after { content: ""; position: absolute; top: .15rem; width: 1.2rem; height: .14rem; border-radius: var(--radius-pill); background: var(--accent-warm); }
}
}

/* Управляемые checkbox и элементы учётной записи */
.form-checkbox {
    display: flex;
    align-items: flex-start;
    gap: .62rem;
    width: auto;
    height: auto;
    min-width: 0;
    color: var(--text-secondary);
    cursor: pointer;
    line-height: 1.42;
}
.form-checkbox > input[type="checkbox"],
.form-checkbox > input[type="radio"] {
    box-sizing: border-box;
    width: 1rem;
    min-width: 1rem;
    height: 1rem;
    min-height: 1rem;
    margin: .12rem 0 0;
    padding: 0;
    border: 1px solid var(--border-strong);
    border-radius: .25rem;
    accent-color: var(--accent-warm);
    flex: 0 0 1rem;
}
.form-checkbox > span { min-width: 0; overflow-wrap: anywhere; }
.form-checkbox > span > code { display: block; margin-top: .12rem; color: var(--text-faint); font-size: .61rem; overflow-wrap: anywhere; white-space: normal; }
.form-checkbox > span > small { display: block; margin-top: .18rem; color: var(--text-muted); font-size: .62rem; }
.form-checkbox--card { padding: .75rem; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-sunken); }
.account-control { display: inline-flex; align-items: center; gap: .42rem; min-height: 2.25rem; max-width: 14rem; padding: 0 .62rem; border: 1px solid var(--border-default); border-radius: var(--radius-sm); color: var(--text-secondary); }
.account-control:hover { border-color: var(--accent-warm-border); color: var(--text-primary); background: var(--surface-card-hover); }
.account-control .icon { width: 1rem; height: 1rem; flex: 0 0 auto; }
.account-control span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .68rem; }
.permission-code { display: inline-flex; max-width: 100%; padding: .28rem .45rem; border: 1px solid var(--border-subtle); border-radius: var(--radius-xs); background: var(--surface-sunken); overflow-wrap: anywhere; white-space: normal; }
.break-anywhere { overflow-wrap: anywhere; }

.sidebar__brand .brand-logo,
.topbar__brand-mobile {
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--surface-card) 82%, transparent);
}
.sidebar__brand .brand-logo { width: 3.1rem; height: 3.1rem; padding: .18rem; }

/* source: 50-patterns.css */
@layer patterns {
.page-intro {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-5);
    margin-bottom: 1rem;
    padding: .35rem 0 .75rem;
    border-bottom: 1px solid var(--border-subtle);
}
.page-intro__copy { display: grid; gap: .35rem; }
.page-intro__eyebrow { color: var(--accent-warm); font-size: .66rem; font-weight: var(--font-weight-bold); letter-spacing: .105em; text-transform: uppercase; }
.page-intro__description { color: var(--text-secondary); font-size: .84rem; }
.page-intro__meta { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }

.status-chip {
    display: inline-flex;
    align-items: center;
    gap: .42rem;
    min-height: 1.8rem;
    padding: 0 .62rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-pill);
    background: var(--surface-card);
    color: var(--text-secondary);
    font-size: .66rem;
    box-shadow: var(--shadow-xs);
}
.status-chip__dot { width: .4rem; height: .4rem; border-radius: 50%; background: var(--color-success); }

.section-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin: 1.2rem 0 .65rem; }
.section-heading__title { font-size: .9rem; letter-spacing: .01em; }
.section-heading__hint { color: var(--text-muted); font-size: .68rem; }

.module-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: .65rem; }
.module-card, .launch-card {
    position: relative;
    display: grid;
    grid-template-columns: 2.4rem minmax(0, 1fr) auto;
    align-items: center;
    gap: .75rem;
    min-height: 4.65rem;
    padding: .72rem .82rem;
    overflow: hidden;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-metal), var(--surface-card);
    box-shadow: var(--shadow-xs);
    color: var(--text-primary);
    transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base), background var(--transition-base);
}
.module-card::before, .launch-card::before {
    content: "";
    position: absolute;
    inset: .65rem auto .65rem 0;
    width: .13rem;
    border-radius: var(--radius-pill);
    background: var(--accent-warm);
    opacity: .28;
    transition: opacity var(--transition-fast);
}
.module-card:hover, .launch-card:hover { transform: translateY(-1px); border-color: var(--accent-warm-border); background: var(--surface-metal-strong), var(--surface-card-hover); box-shadow: var(--shadow-sm); }
.module-card:hover::before, .launch-card:hover::before { opacity: .9; }
.module-card__icon, .launch-card__icon { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--surface-sunken); color: var(--color-action-hover); }
.module-card:hover .module-card__icon, .launch-card:hover .launch-card__icon { color: var(--accent-warm); border-color: var(--accent-warm-border); }
.module-card__copy, .launch-card__copy { min-width: 0; }
.module-card__title, .launch-card__title { display: block; margin-bottom: .12rem; font-size: .82rem; font-weight: var(--font-weight-semibold); }
.module-card__description, .launch-card__description { display: block; color: var(--text-muted); font-size: .67rem; line-height: 1.35; }
.module-card__arrow, .launch-card__arrow { color: var(--text-faint); transition: color var(--transition-fast), transform var(--transition-fast); }
.module-card:hover .module-card__arrow, .launch-card:hover .launch-card__arrow { color: var(--accent-warm); transform: translateX(.1rem); }

.auth-shell { display: grid; min-height: 100vh; min-height: 100dvh; place-items: center; padding: var(--space-4); }
.auth-panel { width: min(100%, 25rem); padding: clamp(1.2rem, 1rem + 1vw, 1.7rem); border: 1px solid var(--border-default); border-radius: var(--radius-xl); background: var(--surface-metal-strong), var(--surface-card); box-shadow: var(--shadow-lg); }
.auth-panel__header { display: grid; justify-items: center; gap: .7rem; margin-bottom: 1.4rem; text-align: center; }
.auth-panel__brand { width: 6rem; height: 6rem; margin-bottom: -.25rem; }
.auth-panel__brand .brand-logo__image { filter: drop-shadow(0 10px 22px rgba(0,0,0,.24)); }
.auth-panel__wordmark {
    color: var(--text-primary);
    font-size: 1.08rem;
    font-weight: var(--font-weight-bold);
    letter-spacing: .16em;
}
.auth-panel__title { font-size: 1.18rem; }
.auth-panel__subtitle { color: var(--text-secondary); font-size: .78rem; }
.auth-form { display: grid; gap: .85rem; }
.form-field { display: grid; gap: .38rem; }
.auth-panel__footer { display: flex; justify-content: center; margin-top: 1.2rem; color: var(--text-muted); font-size: .65rem; }
.auth-theme { position: fixed; top: var(--space-4); right: var(--space-4); }

@media (max-width: 47.99rem) {
    .page-intro { align-items: flex-start; flex-direction: column; gap: .75rem; }
    .module-grid { grid-template-columns: 1fr; }
    .module-card, .launch-card { min-height: 4.45rem; }
}
}

.auth-panel__approved-logo {
    display: block;
    width: min(100%, 18rem);
    max-height: 10rem;
    object-fit: contain;
    filter: drop-shadow(0 10px 22px rgba(0,0,0,.2));
}

/* source: 55-pages.css */
@layer pages {
/* Рабочий стол */
.dashboard-overview {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(15rem, .65fr);
    gap: .75rem;
    margin-bottom: .85rem;
}
.dashboard-lead, .dashboard-state {
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    background: var(--surface-metal), var(--surface-card);
    box-shadow: var(--shadow-xs);
}
.dashboard-lead { position: relative; overflow: hidden; padding: 1.05rem 1.15rem; }
.dashboard-lead::after {
    content: "";
    position: absolute;
    width: 12rem;
    height: 12rem;
    right: -5rem;
    top: -7rem;
    border: 1px solid var(--accent-warm-border);
    border-radius: 50%;
    box-shadow: 0 0 0 2.8rem var(--accent-warm-soft);
    opacity: .55;
    pointer-events: none;
}
.dashboard-lead__eyebrow { margin-bottom: .36rem; color: var(--accent-warm); font-size: .64rem; font-weight: var(--font-weight-bold); letter-spacing: .11em; text-transform: uppercase; }
.dashboard-lead h1 { max-width: 24ch; }
.dashboard-lead p { margin-top: .45rem; color: var(--text-secondary); font-size: .8rem; }
.dashboard-state { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; }
.dashboard-state__item { display: grid; align-content: center; gap: .15rem; min-height: 4.25rem; padding: .7rem .8rem; }
.dashboard-state__item:nth-child(odd) { border-right: 1px solid var(--border-subtle); }
.dashboard-state__item:nth-child(n+3) { border-top: 1px solid var(--border-subtle); }
.dashboard-state__label { color: var(--text-muted); font-size: .63rem; }
.dashboard-state__value { display: flex; align-items: center; gap: .38rem; color: var(--text-primary); font-size: .76rem; font-weight: var(--font-weight-semibold); }
.dashboard-state__value .status-dot { width: .36rem; height: .36rem; }
.dashboard-groups { display: grid; gap: .8rem; }
.dashboard-group { min-width: 0; }
.dashboard-group__header { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; margin-bottom: .45rem; padding-inline: .1rem; }
.dashboard-group__title { font-size: .78rem; letter-spacing: .02em; }
.dashboard-group__hint { color: var(--text-muted); font-size: .64rem; }
.dashboard-launch-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; }

/* Диагностика */
.diag-shell { display: grid; gap: .72rem; }
.diag-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: .8rem; }
.diag-toolbar__copy { display: grid; gap: .2rem; }
.diag-toolbar__copy p { color: var(--text-muted); font-size: .73rem; }
.diag-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-metal), var(--surface-card); overflow: hidden; }
.diag-summary__item { display: grid; gap: .15rem; min-height: 3.7rem; align-content: center; padding: .65rem .8rem; }
.diag-summary__item + .diag-summary__item { border-left: 1px solid var(--border-subtle); }
.diag-summary__label { color: var(--text-muted); font-size: .62rem; }
.diag-summary__value { color: var(--text-primary); font-size: .77rem; font-weight: var(--font-weight-semibold); }
.diag-summary__value[data-state="ok"] { color: var(--color-success); }
.diag-summary__value[data-state="fail"] { color: var(--color-danger); }
.diag-segmented { display: inline-grid; grid-template-columns: 1fr 1fr; width: fit-content; padding: .2rem; border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--surface-sunken); }
.diag-tab { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 2.15rem; padding: 0 .8rem; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--text-muted); cursor: pointer; font-size: .72rem; font-weight: var(--font-weight-semibold); }
.diag-tab:hover { color: var(--text-primary); }
.diag-tab[aria-selected="true"] { border-color: var(--accent-warm-border); background: var(--surface-metal), var(--surface-card); color: var(--text-primary); box-shadow: var(--shadow-xs); }
.diag-tab[aria-selected="true"] .icon { color: var(--accent-warm); }
.diag-panel[hidden] { display: none; }
.diag-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: .5rem; }
.diag-card { display: grid; grid-template-columns: 2.15rem minmax(0, 1fr) auto; align-items: center; gap: .65rem; min-height: 4.35rem; padding: .62rem .7rem; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-metal), var(--surface-card); box-shadow: var(--shadow-xs); }
.diag-card__icon { display: grid; place-items: center; width: 2.15rem; height: 2.15rem; border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--surface-sunken); color: var(--color-action); }
.diag-card__body { display: grid; min-width: 0; gap: .08rem; }
.diag-card__name { display: block; overflow: hidden; color: var(--text-primary); font-size: .75rem; font-weight: var(--font-weight-semibold); text-overflow: ellipsis; white-space: nowrap; }
.diag-card__detail { display: block; margin-top: .12rem; overflow: hidden; color: var(--text-muted); font-size: .63rem; text-overflow: ellipsis; white-space: nowrap; }
.diag-card__status { display: inline-flex; align-items: center; gap: .3rem; min-height: 1.55rem; padding: 0 .48rem; border: 1px solid var(--border-default); border-radius: var(--radius-pill); color: var(--text-muted); font-size: .61rem; font-weight: var(--font-weight-semibold); }
.diag-card__status::before { content: ""; width: .34rem; height: .34rem; border-radius: 50%; background: var(--text-faint); }
.diag-card[data-state="ok"] .diag-card__status { border-color: color-mix(in srgb, var(--color-success) 30%, transparent); color: var(--color-success); }
.diag-card[data-state="ok"] .diag-card__status::before { background: var(--color-success); }
.diag-card[data-state="fail"] .diag-card__status { border-color: color-mix(in srgb, var(--color-danger) 32%, transparent); color: var(--color-danger); }
.diag-card[data-state="fail"] .diag-card__status::before { background: var(--color-danger); }
.diag-card[data-state="loading"] { opacity: .72; }
.diag-card[data-state="loading"] .diag-card__status::before { animation: diag-pulse 1s ease-in-out infinite; }
@keyframes diag-pulse { 50% { opacity: .25; transform: scale(.7); } }

/* Чат */
.chat-layout { display: grid; grid-template-columns: minmax(0, 1fr) 13.5rem; gap: .7rem; min-height: min(43rem, calc(100dvh - 6.5rem)); }
.chat-panel, .chat-aside { border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--surface-metal), var(--surface-card); box-shadow: var(--shadow-xs); overflow: hidden; }
.chat-panel { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 31rem; }
.chat-head { display: flex; align-items: center; justify-content: space-between; gap: .7rem; min-height: 3.35rem; padding: .62rem .8rem; border-bottom: 1px solid var(--border-subtle); }
.chat-head__identity { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.chat-head__icon { display: grid; place-items: center; width: 2.05rem; height: 2.05rem; border: 1px solid var(--accent-warm-border); border-radius: var(--radius-sm); background: var(--accent-warm-soft); color: var(--accent-warm); }
.chat-head__identity > span:last-child { display: grid; gap: .08rem; min-width: 0; }
.chat-head__title { display: block; font-size: .78rem; font-weight: var(--font-weight-semibold); }
.chat-head__subtitle { display: block; margin-top: .08rem; color: var(--text-muted); font-size: .62rem; }
.chat-connection { display: inline-flex; align-items: center; gap: .35rem; color: var(--text-muted); font-size: .62rem; }
.chat-connection::before { content: ""; width: .38rem; height: .38rem; border-radius: 50%; background: var(--color-success); }
.chat-connection[data-state="offline"] { color: var(--color-danger); }
.chat-connection[data-state="offline"]::before { background: var(--color-danger); }
.chat-messages { display: flex; flex-direction: column; gap: .4rem; min-height: 0; overflow-y: auto; padding: .75rem; background: linear-gradient(180deg, rgba(0,0,0,.035), transparent 18%), var(--surface-sunken); }
.chat-day { align-self: center; margin: .25rem 0; padding: .22rem .5rem; border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); background: var(--surface-card); color: var(--text-muted); font-size: .58rem; }
.chat-message { display: flex; align-items: flex-end; gap: .42rem; max-width: min(82%, 42rem); }
.chat-message--self { align-self: flex-end; flex-direction: row-reverse; }
.chat-avatar { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; flex: 0 0 auto; border: 1px solid var(--border-default); border-radius: 50%; background: var(--surface-card); color: var(--color-action-hover); font-size: .57rem; font-weight: var(--font-weight-bold); }
.chat-message--self .chat-avatar { color: var(--accent-warm); border-color: var(--accent-warm-border); }
.chat-bubble { min-width: 0; padding: .48rem .62rem .4rem; border: 1px solid var(--border-default); border-radius: 11px 11px 11px 3px; background: var(--surface-metal), var(--surface-card); box-shadow: var(--shadow-xs); }
.chat-message--self .chat-bubble { border-color: var(--accent-warm-border); border-radius: 11px 11px 3px 11px; background: linear-gradient(145deg, var(--accent-warm-soft), transparent 62%), var(--surface-raised); }
.chat-bubble__meta { display: flex; align-items: baseline; gap: .45rem; margin-bottom: .16rem; }
.chat-bubble__user { color: var(--color-action-hover); font-size: .62rem; font-weight: var(--font-weight-semibold); }
.chat-message--self .chat-bubble__user { color: var(--accent-warm); }
.chat-bubble__time { color: var(--text-faint); font-size: .56rem; }
.chat-bubble__text { color: var(--text-primary); font-size: .76rem; line-height: 1.42; overflow-wrap: anywhere; white-space: pre-wrap; }
.chat-empty { display: grid; place-items: center; align-content: center; gap: .5rem; min-height: 100%; color: var(--text-muted); text-align: center; }
.chat-empty .icon { width: 1.8rem; height: 1.8rem; color: var(--text-faint); }
.chat-empty strong { color: var(--text-secondary); font-size: .75rem; }
.chat-empty span { max-width: 30ch; font-size: .65rem; }
.chat-composer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; padding: .62rem; border-top: 1px solid var(--border-subtle); background: var(--surface-panel); }
.chat-composer textarea { min-height: 2.55rem; max-height: 8rem; resize: none; padding: .63rem .72rem; line-height: 1.35; }
.chat-send { width: 2.55rem; min-width: 2.55rem; padding: 0; }
.chat-aside { display: grid; align-content: start; }
.chat-aside__section { padding: .8rem; }
.chat-aside__section + .chat-aside__section { border-top: 1px solid var(--border-subtle); }
.chat-aside__title { margin-bottom: .55rem; color: var(--text-muted); font-size: .62rem; font-weight: var(--font-weight-semibold); letter-spacing: .07em; text-transform: uppercase; }
.chat-stat { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 2rem; color: var(--text-secondary); font-size: .68rem; }
.chat-stat strong { color: var(--text-primary); font-weight: var(--font-weight-semibold); }
.chat-note { color: var(--text-muted); font-size: .64rem; line-height: 1.5; }

@media (max-width: 69rem) {
    .dashboard-launch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .chat-layout { grid-template-columns: minmax(0, 1fr); }
    .chat-aside { display: none; }
}

@media (max-width: 47.99rem) {
    .dashboard-overview { grid-template-columns: 1fr; }
    .dashboard-launch-grid { grid-template-columns: 1fr; }
    .dashboard-lead { padding: .9rem; }
    .diag-toolbar { align-items: stretch; flex-direction: column; }
    .diag-toolbar .btn { width: 100%; }
    .diag-summary { grid-template-columns: 1fr; }
    .diag-summary__item + .diag-summary__item { border-left: 0; border-top: 1px solid var(--border-subtle); }
    .diag-segmented { width: 100%; }
    .diag-grid { grid-template-columns: 1fr; }
    .chat-layout { min-height: calc(100dvh - 9rem); }
    .chat-panel { min-height: calc(100dvh - 9rem); border-radius: var(--radius-md); }
    .chat-message { max-width: 92%; }
}

/* Системные экраны */
.page-toolbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}
.page-toolbar--compact { align-items: flex-start; }
.page-toolbar__copy { display: grid; gap: .2rem; min-width: 0; }
.page-toolbar__copy h1 { font-size: clamp(1.55rem, 2.3vw, 2.15rem); }
.page-toolbar__copy p { max-width: 68ch; color: var(--text-muted); font-size: .75rem; line-height: 1.5; }
.page-toolbar__eyebrow, .surface-section__eyebrow {
    color: var(--accent-warm);
    font-size: .59rem;
    font-weight: var(--font-weight-bold);
    letter-spacing: .11em;
    text-transform: uppercase;
}
.refresh-action { flex: 0 0 auto; min-width: 9.4rem; }
.refresh-action[data-loading="true"] .icon { animation: refresh-spin .8s linear infinite; }
@keyframes refresh-spin { to { transform: rotate(360deg); } }

.monitor-page, .network-page, .settings-page, .about-page { display: grid; gap: .75rem; }
.surface-section {
    min-width: 0;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    background: var(--surface-metal), var(--surface-card);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
}
.surface-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    min-height: 3.55rem;
    padding: .7rem .85rem;
    border-bottom: 1px solid var(--border-subtle);
}
.surface-section__header > div { display: grid; gap: .12rem; min-width: 0; }
.surface-section__header h2 { font-size: .86rem; }
.surface-section__symbol { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border: 1px solid var(--accent-warm-border); border-radius: var(--radius-sm); background: var(--accent-warm-soft); color: var(--accent-warm); }
.state-pill, .counter-pill {
    display: inline-flex;
    align-items: center;
    gap: .32rem;
    min-height: 1.55rem;
    padding: 0 .55rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-pill);
    background: var(--surface-sunken);
    color: var(--text-muted);
    font-size: .61rem;
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
}
.state-pill::before { content: ""; width: .34rem; height: .34rem; border-radius: 50%; background: var(--text-faint); }
.state-pill[data-state="ok"] { border-color: color-mix(in srgb, var(--color-success) 32%, transparent); color: var(--color-success); }
.state-pill[data-state="ok"]::before { background: var(--color-success); }
.state-pill[data-state="fail"] { border-color: color-mix(in srgb, var(--color-danger) 32%, transparent); color: var(--color-danger); }
.state-pill[data-state="fail"]::before { background: var(--color-danger); }
.state-pill[data-state="warning"] { border-color: color-mix(in srgb, var(--color-warning) 34%, transparent); color: var(--color-warning); }
.state-pill[data-state="warning"]::before { background: var(--color-warning); }
.state-pill[data-state="loading"]::before { background: var(--color-action); animation: diag-pulse 1s ease-in-out infinite; }

.metric-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .55rem; }
.metric-card {
    position: relative;
    display: grid;
    grid-template-columns: 2.15rem minmax(0, 1fr);
    align-items: center;
    gap: .65rem;
    min-height: 5.3rem;
    padding: .72rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-metal), var(--surface-card);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
}
.metric-card__icon { display: grid; place-items: center; width: 2.15rem; height: 2.15rem; border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--surface-sunken); color: var(--color-action); }
.metric-card__copy { display: grid; gap: .08rem; min-width: 0; }
.metric-card__label { color: var(--text-muted); font-size: .61rem; }
.metric-card__value { color: var(--text-primary); font-size: 1.25rem; line-height: 1.1; }
.metric-card__track { position: absolute; inset: auto .7rem .45rem; height: 2px; border-radius: var(--radius-pill); background: var(--border-subtle); overflow: hidden; }
.metric-card__track > span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--color-action), var(--accent-warm)); transition: width var(--transition-slow); }
.metric-card[data-state="unknown"] .metric-card__value { color: var(--text-muted); }

.detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.detail-grid--router { border-bottom: 1px solid var(--border-subtle); }
.detail-item { display: grid; align-content: center; gap: .14rem; min-height: 3.75rem; padding: .65rem .85rem; }
.detail-item + .detail-item { border-left: 1px solid var(--border-subtle); }
.detail-item:nth-child(n+4) { border-top: 1px solid var(--border-subtle); }
.detail-item:nth-child(4) { border-left: 0; }
.detail-item dt { color: var(--text-muted); font-size: .6rem; }
.detail-item dd { overflow: hidden; color: var(--text-primary); font-size: .72rem; font-weight: var(--font-weight-semibold); text-overflow: ellipsis; white-space: nowrap; }

.device-grid, .interface-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: .5rem; padding: .7rem; }
.device-card, .interface-card {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) auto;
    align-items: center;
    gap: .6rem;
    min-height: 4.2rem;
    padding: .58rem .65rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
}
.device-card__icon, .interface-card__icon { display: grid; place-items: center; width: 2rem; height: 2rem; border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--surface-card); color: var(--color-action); }
.device-card__copy, .interface-card__body { display: grid; min-width: 0; gap: .06rem; }
.device-card__copy strong, .interface-card__body strong { overflow: hidden; color: var(--text-primary); font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.device-card__copy span, .interface-card__body span { overflow: hidden; color: var(--text-muted); font-size: .61rem; text-overflow: ellipsis; white-space: nowrap; }
.device-card__copy code { color: var(--text-faint); font-size: .56rem; }
.interface-card__traffic { margin-top: .15rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; }

.empty-state { display: grid; place-items: center; align-content: center; gap: .35rem; min-height: 12rem; color: var(--text-muted); text-align: center; }
.empty-state--compact { grid-column: 1 / -1; min-height: 7rem; }
.empty-state .icon { color: var(--text-faint); }
.empty-state strong { color: var(--text-secondary); font-size: .72rem; }
.empty-state span { max-width: 44ch; font-size: .62rem; line-height: 1.45; }

.traffic-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; padding: .7rem; }
.traffic-metric { display: grid; grid-template-columns: 1.8rem minmax(0, 1fr); align-items: center; gap: .55rem; min-height: 4.2rem; padding: .58rem .65rem; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-sunken); }
.traffic-metric__icon { display: grid; place-items: center; grid-row: 1 / 3; width: 1.8rem; height: 1.8rem; color: var(--color-action); }
.traffic-metric__label { color: var(--text-muted); font-size: .6rem; }
.traffic-metric strong { color: var(--text-primary); font-size: 1rem; }
.traffic-interface-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .45rem; padding: 0 .7rem .7rem; }
.traffic-interface { display: flex; align-items: center; justify-content: space-between; gap: .6rem; min-height: 2.55rem; padding: .45rem .6rem; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--surface-card); }
.traffic-interface strong { color: var(--text-secondary); font-size: .65rem; }
.traffic-interface span { color: var(--text-muted); font-size: .59rem; font-variant-numeric: tabular-nums; }
.responsive-table { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th { padding: .62rem .75rem; border-bottom: 1px solid var(--border-default); color: var(--text-muted); font-size: .58rem; letter-spacing: .07em; text-align: left; text-transform: uppercase; }
.data-table td { padding: .62rem .75rem; border-bottom: 1px solid var(--border-subtle); color: var(--text-secondary); font-size: .67rem; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover td { background: var(--surface-card-hover); color: var(--text-primary); }
.data-table code { color: var(--color-action-hover); }

.theme-choice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; padding: .7rem; }
.theme-choice { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); align-items: center; gap: .65rem; min-height: 4.5rem; padding: .65rem; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-sunken); color: var(--text-secondary); cursor: pointer; text-align: left; transition: transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast); }
.theme-choice:hover { border-color: var(--border-strong); background: var(--surface-card-hover); transform: translateY(-1px); }
.theme-choice[aria-pressed="true"] { border-color: var(--accent-warm-border); background: linear-gradient(135deg, var(--accent-warm-soft), transparent 70%), var(--surface-card); }
.theme-choice__icon { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--surface-card); color: var(--color-action); }
.theme-choice[aria-pressed="true"] .theme-choice__icon { border-color: var(--accent-warm-border); color: var(--accent-warm); }
.theme-choice__copy { display: grid; gap: .12rem; min-width: 0; }
.theme-choice__copy strong { color: var(--text-primary); font-size: .72rem; }
.theme-choice__copy span { color: var(--text-muted); font-size: .61rem; line-height: 1.35; }
.settings-description { padding: .8rem .85rem; color: var(--text-secondary); font-size: .73rem; line-height: 1.6; }

.about-hero { display: grid; grid-template-columns: 5rem minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: 1rem; border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: linear-gradient(130deg, var(--accent-warm-soft), transparent 35%), var(--surface-metal), var(--surface-card); box-shadow: var(--shadow-xs); }
.about-hero__mark { position: relative; display: block; width: 5rem; height: 5rem; }
.about-hero__mark .brand-logo__image { width: 100%; height: 100%; object-fit: contain; }
.about-hero__copy { display: grid; gap: .25rem; min-width: 0; }
.about-hero__copy h1 { font-size: clamp(1.6rem, 2.7vw, 2.35rem); }
.about-hero__copy p { max-width: 66ch; color: var(--text-secondary); font-size: .73rem; line-height: 1.55; }
.about-release { display: grid; justify-items: end; gap: .22rem; }
.about-release__version { color: var(--color-action-hover); font-size: 1.15rem; font-weight: var(--font-weight-bold); }
.about-release__codename { color: var(--text-secondary); font-size: .72rem; }
.version-table td:first-child { color: var(--color-action-hover); white-space: nowrap; }
.about-footer-modern { display: flex; align-items: center; justify-content: center; gap: .45rem; min-height: 3rem; color: var(--text-muted); font-size: .63rem; }
.about-footer-modern .icon { color: var(--accent-warm); }

@media (max-width: 70rem) {
    .metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .theme-choice-grid { grid-template-columns: 1fr; }
}

@media (max-width: 47.99rem) {
    .page-toolbar { align-items: stretch; flex-direction: column; }
    .page-toolbar .btn { width: 100%; }
    .metric-grid { grid-template-columns: 1fr 1fr; }
    .detail-grid { grid-template-columns: 1fr; }
    .detail-item + .detail-item, .detail-item:nth-child(4) { border-left: 0; border-top: 1px solid var(--border-subtle); }
    .traffic-summary { grid-template-columns: 1fr; }
    .device-grid, .interface-grid { grid-template-columns: 1fr; }
    .about-hero { grid-template-columns: 3.6rem minmax(0, 1fr); }
    .about-hero__mark { width: 3.6rem; height: 3.6rem; }
    .about-release { grid-column: 1 / -1; justify-items: start; grid-template-columns: auto auto auto; align-items: center; gap: .5rem; }
}

@media (max-width: 30rem) {
    .metric-grid { grid-template-columns: 1fr; }
    .about-release { grid-template-columns: 1fr; }
}
}

/* Identity, роли и личный кабинет */
.account-page, .policy-page { display: grid; gap: .8rem; }
.account-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; }
.account-summary-card { display: grid; gap: .2rem; min-height: 5.2rem; align-content: center; }
.account-summary-card strong { font-size: .9rem; overflow-wrap: anywhere; }
.account-profile-grid { align-items: start; }
.account-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
.account-facts > div { min-width: 0; padding: .58rem; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--surface-sunken); }
.account-facts dt { color: var(--text-muted); font-size: .61rem; }
.account-facts dd { margin-top: .12rem; color: var(--text-primary); font-size: .71rem; overflow-wrap: anywhere; }
.chip-list { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .4rem; }
.chip { display: inline-flex; align-items: center; gap: .35rem; min-height: 1.8rem; max-width: 100%; padding: .25rem .55rem; border: 1px solid var(--border-default); border-radius: var(--radius-pill); background: var(--surface-sunken); color: var(--text-secondary); font-size: .66rem; }
.chip small { color: var(--text-muted); font-size: .55rem; }
.policy-status-row { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .65rem 0; border-bottom: 1px solid var(--border-subtle); }
.policy-status-row:last-of-type { border-bottom: 0; }
.button-row { display: flex; flex-wrap: wrap; gap: .45rem; }
.permission-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: .4rem; min-width: 0; }
.permission-list--compact { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.permission-option { min-width: 0; padding: .62rem; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--surface-sunken); }
.permission-option span { min-width: 0; overflow-wrap: anywhere; }
.role-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: .65rem; }
.role-card { min-width: 0; }
.role-card__header { display: flex; align-items: flex-start; justify-content: space-between; gap: .65rem; }
.role-card__code { overflow-wrap: anywhere; }
.identity-tabs { display: flex; flex-wrap: wrap; gap: .35rem; }
.identity-tabs a { min-height: 2rem; }
.policy-document .prose { max-width: 76ch; }
.policy-document h2 { margin-top: 1.15rem; font-size: .9rem; }
.policy-document h2:first-child { margin-top: 0; }
.policy-document p { margin-top: .4rem; color: var(--text-secondary); font-size: .75rem; line-height: 1.6; }
.auth-shell--wide .auth-panel { width: min(100%, 42rem); }
.onboarding-panel { max-width: 42rem; }
.onboarding-form { gap: .75rem; }
.onboarding-copy { color: var(--text-secondary); font-size: .75rem; line-height: 1.55; }
.js-local-time { font-variant-numeric: tabular-nums; }

@media (max-width: 69rem) {
    .account-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 47.99rem) {
    .account-control span { display: none; }
    .account-summary-grid, .account-facts { grid-template-columns: 1fr; }
    .policy-status-row { align-items: flex-start; flex-direction: column; }
    .permission-list, .permission-list--compact { grid-template-columns: 1fr; }
}

/* Identity & Account Completion R2 */
.identity-page { display: grid; gap: .8rem; }
.button-count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.35rem; min-height: 1.35rem; margin-left: .3rem; padding-inline: .35rem; border-radius: var(--radius-pill); background: var(--surface-sunken); color: var(--text-muted); font-size: .6rem; }
.summary-hint { color: var(--text-muted); font-size: .62rem; font-weight: var(--font-weight-regular); }
.identity-guidance { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
.identity-guidance > div { padding: .72rem .8rem; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-sunken); color: var(--text-secondary); font-size: .7rem; line-height: 1.5; }
.identity-guidance strong { display: block; margin-bottom: .12rem; color: var(--text-primary); }
.identity-create-panel { scroll-margin-top: calc(var(--topbar-height) + 1rem); }
.identity-fieldset { min-width: 0; padding: .7rem; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-sunken); }
.identity-fieldset legend { padding-inline: .35rem; color: var(--text-secondary); font-size: .68rem; font-weight: var(--font-weight-semibold); }
.identity-password-flag { align-self: end; min-height: 4.7rem; }
.form-actions { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: .45rem; }
.role-choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: .42rem; }
.role-choice, .permission-choice { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: flex-start; gap: .55rem; min-width: 0; padding: .58rem .62rem; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--surface-card); cursor: pointer; }
.role-choice:hover, .permission-choice:hover { border-color: var(--border-strong); background: var(--surface-card-hover); }
.role-choice > input, .permission-choice > input { width: 1rem; height: 1rem; margin-top: .08rem; accent-color: var(--color-action); }
.role-choice span, .permission-choice span { display: grid; min-width: 0; gap: .1rem; }
.role-choice strong, .permission-choice strong { color: var(--text-primary); font-size: .68rem; line-height: 1.3; }
.role-choice small, .permission-choice small { color: var(--text-muted); font-size: .58rem; line-height: 1.35; overflow-wrap: anywhere; }
.permission-group-list { display: grid; gap: .42rem; }
.permission-group { min-width: 0; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--surface-card); overflow: hidden; }
.permission-group > summary { display: flex; align-items: center; justify-content: space-between; gap: .6rem; min-height: 2.5rem; padding: .5rem .65rem; color: var(--text-secondary); cursor: pointer; font-size: .67rem; font-weight: var(--font-weight-semibold); }
.permission-group > summary span { color: var(--text-muted); font-size: .58rem; }
.permission-choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: .38rem; padding: .55rem; border-top: 1px solid var(--border-subtle); background: var(--surface-sunken); }
fieldset.permission-choice { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; cursor: default; }
fieldset.permission-choice > span { grid-column: 1 / -1; }
fieldset.permission-choice > label { display: flex; align-items: center; gap: .3rem; min-width: 0; color: var(--text-secondary); font-size: .6rem; cursor: pointer; }
fieldset.permission-choice > label input { flex: 0 0 auto; width: .9rem; height: .9rem; accent-color: var(--color-action); }
fieldset.permission-choice:disabled { opacity: .55; cursor: not-allowed; }
.identity-user-list { display: grid; gap: .62rem; }
.identity-user-card { min-width: 0; overflow: hidden; scroll-margin-top: calc(var(--topbar-height) + 1rem); }
.identity-user-card__header { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .72rem .82rem; border-bottom: 1px solid var(--border-subtle); }
.identity-user-card__person { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.identity-user-card__person h2 { overflow: hidden; color: var(--text-primary); font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }
.identity-user-card__person code { color: var(--text-muted); font-size: .61rem; overflow-wrap: anywhere; }
.identity-user-card__avatar { display: grid; place-items: center; width: 2.35rem; height: 2.35rem; flex: 0 0 auto; border: 1px solid var(--accent-warm-border); border-radius: var(--radius-sm); background: var(--accent-warm-soft); color: var(--accent-warm); font-size: .9rem; font-weight: var(--font-weight-bold); }
.identity-user-card__body { display: grid; gap: .7rem; padding: .75rem .82rem .82rem; }
.identity-user-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--surface-sunken); overflow: hidden; }
.identity-user-summary > div { display: grid; align-content: center; gap: .12rem; min-width: 0; min-height: 3.35rem; padding: .55rem .62rem; }
.identity-user-summary > div + div { border-left: 1px solid var(--border-subtle); }
.identity-user-summary span { color: var(--text-muted); font-size: .57rem; }
.identity-user-summary strong { color: var(--text-primary); font-size: .67rem; line-height: 1.35; overflow-wrap: anywhere; }
.identity-user-roles { min-width: 0; }
.identity-section-label { color: var(--text-secondary); font-size: .66rem; font-weight: var(--font-weight-semibold); }
.identity-user-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: .48rem; align-items: start; }
.identity-user-actions > .identity-advanced { grid-column: 1 / -1; }
.identity-advanced .permission-group-list { margin-top: .35rem; }
.text-muted { color: var(--text-muted); font-size: .65rem; }

.role-catalog-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-card); overflow: hidden; }
.role-catalog-summary > div { display: grid; align-content: center; gap: .12rem; min-height: 3.9rem; padding: .62rem .75rem; }
.role-catalog-summary > div + div { border-left: 1px solid var(--border-subtle); }
.role-catalog-summary span { color: var(--text-muted); font-size: .59rem; }
.role-catalog-summary strong { color: var(--text-primary); font-size: .9rem; }
.role-catalog-section { display: grid; gap: .5rem; }
.role-catalog-section > header { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; padding-inline: .1rem; }
.role-catalog-section > header h2 { font-size: .78rem; }
.role-catalog-section > header p { color: var(--text-muted); font-size: .62rem; text-align: right; }
.role-catalog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: .58rem; }
.role-catalog-card { min-width: 0; overflow: hidden; scroll-margin-top: calc(var(--topbar-height) + 1rem); }
.role-catalog-card:target { border-color: var(--accent-warm); box-shadow: 0 0 0 2px var(--accent-warm-soft), var(--shadow-sm); }
.role-catalog-card__header { display: flex; align-items: flex-start; justify-content: space-between; gap: .7rem; padding: .72rem .78rem; border-bottom: 1px solid var(--border-subtle); }
.role-catalog-card__header h3 { color: var(--text-primary); font-size: .78rem; }
.role-catalog-card__header code { color: var(--text-muted); font-size: .58rem; overflow-wrap: anywhere; }
.role-catalog-card__body { display: grid; gap: .58rem; padding: .68rem .78rem .78rem; }
.role-catalog-card__body > p { color: var(--text-secondary); font-size: .66rem; line-height: 1.45; }
.role-catalog-card__meta { display: flex; flex-wrap: wrap; gap: .38rem .75rem; color: var(--text-muted); font-size: .58rem; }
.compact-permission-list { display: flex; flex-wrap: wrap; gap: .32rem; }
.compact-permission { display: inline-flex; align-items: center; min-height: 1.65rem; max-width: 100%; padding: .22rem .48rem; border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); background: var(--surface-sunken); color: var(--text-secondary); font-size: .59rem; overflow-wrap: anywhere; }

.onboarding-brand { margin-bottom: .9rem; }
.onboarding-brand__logo { width: min(100%, 20rem); max-height: 10.5rem; object-fit: contain; filter: drop-shadow(0 10px 22px rgba(0,0,0,.2)); }
.onboarding-documents { display: grid; gap: .48rem; margin-bottom: .8rem; }
.onboarding-document-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .8rem; padding: .68rem .75rem; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-sunken); }
.onboarding-document-card h2 { margin-top: .08rem; font-size: .75rem; }
.onboarding-document-card p { margin-top: .15rem; color: var(--text-muted); font-size: .62rem; line-height: 1.4; }
.onboarding-document-card__kind { color: var(--accent-warm); font-size: .54rem; font-weight: var(--font-weight-bold); letter-spacing: .08em; text-transform: uppercase; }

.policy-toolbar { align-items: flex-end; }
.policy-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.policy-document-nav { display: flex; flex-wrap: wrap; gap: .35rem; padding: .35rem; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-sunken); }
.policy-document-nav a { display: inline-flex; align-items: center; min-height: 2rem; padding: .35rem .62rem; border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--text-muted); font-size: .65rem; }
.policy-document-nav a:hover { color: var(--text-primary); }
.policy-document-nav a[aria-current="page"] { border-color: var(--accent-warm-border); background: var(--surface-card); color: var(--text-primary); }
.policy-document { overflow: hidden; }
.policy-document .policy-prose { max-width: 82ch; margin-inline: auto; padding: clamp(1rem, .7rem + 1vw, 1.6rem); }
.policy-document-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 1rem; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--surface-sunken); overflow: hidden; }
.policy-document-meta > div { display: grid; gap: .15rem; min-width: 0; padding: .62rem .7rem; }
.policy-document-meta > div + div { border-left: 1px solid var(--border-subtle); }
.policy-document-meta span { color: var(--text-muted); font-size: .57rem; }
.policy-document-meta strong { color: var(--text-primary); font-size: .65rem; line-height: 1.4; overflow-wrap: anywhere; }
.policy-document .policy-lead { padding: .72rem .8rem; border-left: .18rem solid var(--accent-warm); background: var(--accent-warm-soft); color: var(--text-primary); }
.policy-document ul { display: grid; gap: .32rem; margin: .45rem 0 0 1.2rem; color: var(--text-secondary); font-size: .75rem; line-height: 1.55; }
.policy-document li::marker { color: var(--accent-warm); }

@media (max-width: 69rem) {
    .identity-user-summary, .role-catalog-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .identity-user-summary > div:nth-child(3), .identity-user-summary > div:nth-child(4), .role-catalog-summary > div:nth-child(3), .role-catalog-summary > div:nth-child(4) { border-top: 1px solid var(--border-subtle); }
    .identity-user-summary > div:nth-child(3), .role-catalog-summary > div:nth-child(3) { border-left: 0; }
    .policy-document-meta { grid-template-columns: 1fr; }
    .policy-document-meta > div + div { border-left: 0; border-top: 1px solid var(--border-subtle); }
}

@media (max-width: 47.99rem) {
    .identity-guidance, .identity-user-summary, .role-catalog-summary { grid-template-columns: 1fr; }
    .identity-user-card__header, .role-catalog-card__header, .role-catalog-section > header { align-items: flex-start; flex-direction: column; }
    .identity-user-summary > div + div, .identity-user-summary > div:nth-child(3), .identity-user-summary > div:nth-child(4), .role-catalog-summary > div + div, .role-catalog-summary > div:nth-child(3), .role-catalog-summary > div:nth-child(4) { border-left: 0; border-top: 1px solid var(--border-subtle); }
    .role-catalog-section > header p { text-align: left; }
    .onboarding-document-card { grid-template-columns: 1fr; }
    .onboarding-document-card .button { width: 100%; }
    .policy-actions { width: 100%; }
    .policy-actions .button { flex: 1; }
}

@media print {
    .sidebar, .topbar, .mobile-nav, .mobile-overlay, .policy-actions, .policy-document-nav, .skip-link { display: none; }
    .app-shell, .app-main, .app-content { display: block; width: 100%; margin: 0; padding: 0; }
    .policy-page { display: block; }
    .policy-toolbar { margin-bottom: 1rem; }
    .policy-document { border: 0; box-shadow: none; }
    .policy-document .policy-prose { max-width: none; padding: 0; }
    body { background: #fff; color: #111; }
}

@layer pages {
/* Профессиональный рабочий стол */
.dashboard-command {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(24rem, .65fr);
    gap: .8rem;
    margin-bottom: 1rem;
}
.dashboard-command__lead,
.dashboard-command__status {
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    background: var(--surface-metal), var(--surface-card);
    box-shadow: var(--shadow-xs);
}
.dashboard-command__lead {
    display: grid;
    align-content: center;
    min-height: 8rem;
    padding: 1.2rem 1.3rem;
}
.dashboard-command__lead h1 { margin-top: .2rem; font-size: clamp(1.55rem, 2.2vw, 2.2rem); }
.dashboard-command__lead p { max-width: 66rem; margin-top: .45rem; color: var(--text-secondary); }
.dashboard-command__status {
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
}
.dashboard-command__status > div { display: grid; align-content: center; gap: .2rem; min-height: 4rem; padding: .75rem .9rem; }
.dashboard-command__status > div:nth-child(odd) { border-right: 1px solid var(--border-subtle); }
.dashboard-command__status > div:nth-child(n+3) { border-top: 1px solid var(--border-subtle); }
.dashboard-command__status dt { color: var(--text-muted); font-size: .64rem; }
.dashboard-command__status dd { color: var(--text-primary); font-size: .8rem; font-weight: var(--font-weight-semibold); text-transform: capitalize; }
.dashboard-module-section { margin-bottom: 1rem; }
.dashboard-section-heading { margin-top: 0; }
.dashboard-primary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; }
.dashboard-primary-card {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr) auto;
    align-items: center;
    gap: .8rem;
    min-height: 6rem;
    padding: .9rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-metal), var(--surface-card);
    color: var(--text-primary);
    box-shadow: var(--shadow-xs);
}
.dashboard-primary-card:hover { border-color: var(--accent-warm-border); background: var(--surface-metal-strong), var(--surface-card-hover); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.dashboard-primary-card__icon { display: grid; place-items: center; width: 3rem; height: 3rem; border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--surface-sunken); color: var(--accent-warm); }
.dashboard-primary-card__copy { display: grid; gap: .18rem; min-width: 0; }
.dashboard-primary-card__copy strong { font-size: .86rem; }
.dashboard-primary-card__copy span { color: var(--text-muted); font-size: .68rem; line-height: 1.38; }
.dashboard-primary-card__arrow { color: var(--text-faint); }
.dashboard-operations-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; align-items: start; }
.dashboard-activity { grid-column: 1 / -1; }
.readiness-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .42rem; }
.readiness-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .55rem; min-height: 2.55rem; padding: .45rem .55rem; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--surface-sunken); }
.readiness-item[data-state="warning"] .status-dot { background: var(--color-warning); }
.readiness-item__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .72rem; font-weight: var(--font-weight-medium); }
.readiness-item__state { color: var(--text-muted); font-size: .64rem; }
.dashboard-metric-list { display: grid; gap: 0; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); overflow: hidden; }
.dashboard-metric-list > div { display: flex; align-items: center; justify-content: space-between; gap: .8rem; min-height: 2.7rem; padding: .48rem .65rem; background: var(--surface-sunken); }
.dashboard-metric-list > div + div { border-top: 1px solid var(--border-subtle); }
.dashboard-metric-list dt { color: var(--text-secondary); font-size: .69rem; }
.dashboard-metric-list dd { color: var(--text-primary); font-size: .72rem; font-weight: var(--font-weight-semibold); }
.storage-progress { width: 100%; height: .55rem; margin-top: .7rem; border: 0; border-radius: var(--radius-pill); overflow: hidden; background: var(--surface-sunken); }
.storage-progress::-webkit-progress-bar { background: var(--surface-sunken); }
.storage-progress::-webkit-progress-value { background: var(--accent-warm); border-radius: var(--radius-pill); }
.storage-progress::-moz-progress-bar { background: var(--accent-warm); border-radius: var(--radius-pill); }
.activity-list { display: grid; gap: .35rem; }
.activity-item { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; align-items: center; gap: .65rem; min-height: 3.1rem; padding: .48rem .55rem; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--surface-sunken); }
.activity-item__icon { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: var(--radius-xs); color: var(--color-action-hover); }
.activity-item__copy { display: grid; gap: .1rem; min-width: 0; }
.activity-item__copy strong { overflow-wrap: anywhere; font-size: .7rem; }
.activity-item__copy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); font-size: .63rem; }
.activity-item time { color: var(--text-muted); font-size: .61rem; white-space: nowrap; }
.surface-actions { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .75rem; }
.empty-state.compact { min-height: 6rem; padding: 1rem; }

/* Технический паспорт */
.technical-passport { display: grid; gap: .85rem; }
.technical-passport__header { display: grid; grid-template-columns: minmax(11rem, 17rem) minmax(0, 1fr) auto; align-items: center; gap: 1.2rem; padding: 1rem 1.2rem; border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--surface-metal), var(--surface-card); box-shadow: var(--shadow-xs); }
.technical-passport__logo { width: 100%; max-height: 9rem; object-fit: contain; }
.technical-passport__title { display: grid; gap: .35rem; }
.technical-passport__title p { color: var(--text-secondary); }
.technical-columns { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: .85rem; }
.technical-detail-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mono-value, .path-list dd { font-family: var(--font-mono); overflow-wrap: anywhere; }
.component-status-list { display: grid; gap: .35rem; }
.component-status { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .55rem; padding: .48rem .55rem; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--surface-sunken); }
.component-status[data-state="warning"] .status-dot { background: var(--color-warning); }
.component-status > span:nth-child(2) { display: grid; gap: .05rem; }
.component-status strong { font-size: .7rem; }
.component-status small, .component-status > span:last-child { color: var(--text-muted); font-size: .61rem; }
.path-list { display: grid; gap: .45rem; }
.path-list > div { display: grid; gap: .15rem; padding: .5rem .55rem; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--surface-sunken); }
.path-list dt { color: var(--text-muted); font-size: .61rem; }
.path-list dd { color: var(--text-secondary); font-size: .64rem; }
.storage-summary-line { display: flex; justify-content: space-between; gap: .75rem; margin-top: .65rem; color: var(--text-muted); font-size: .65rem; }
.storage-summary-line strong { color: var(--text-primary); }
.technical-notice { display: grid; grid-template-columns: 3rem minmax(0, 1fr); align-items: start; gap: .8rem; padding: .85rem; border: 1px solid var(--color-warning); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--color-warning) 7%, var(--surface-card)); }
.technical-notice__icon { color: var(--color-warning); }
.technical-notice p { margin-top: .25rem; color: var(--text-secondary); font-size: .72rem; }
.settings-page--focused { max-width: 70rem; }
.time-preview { margin-top: .7rem; padding: .75rem; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--surface-sunken); color: var(--text-primary); font-family: var(--font-mono); }

/* Журналы и аудит */
.logs-page { display: grid; gap: .85rem; }
.logs-toolbar { align-items: center; }
.logs-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .55rem; }
.summary-card { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); align-items: center; gap: .65rem; min-height: 4.5rem; padding: .65rem .75rem; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-metal), var(--surface-card); box-shadow: var(--shadow-xs); }
.summary-card__icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--radius-sm); background: var(--surface-sunken); color: var(--accent-warm); }
.summary-card > span:last-child { display: grid; gap: .1rem; }
.summary-card small { color: var(--text-muted); font-size: .61rem; }
.summary-card strong { font-size: .78rem; }
.logs-filter { display: grid; grid-template-columns: minmax(12rem, 1.3fr) minmax(10rem, 1fr) minmax(9rem, .8fr) auto auto; align-items: end; gap: .5rem; margin-bottom: .7rem; }
.logs-filter label { display: grid; gap: .25rem; font-size: .63rem; }
.logs-table-wrap { max-height: 34rem; }
.logs-table code { overflow-wrap: anywhere; color: var(--text-primary); }
.table-subline { display: block; max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); }
.result-pill { display: inline-flex; min-height: 1.45rem; align-items: center; padding: 0 .45rem; border-radius: var(--radius-pill); background: var(--surface-sunken); color: var(--text-secondary); font-size: .61rem; }
.result-pill[data-result="success"] { color: var(--color-success); }
.result-pill[data-result="denied"], .result-pill[data-result="failure"] { color: var(--color-danger); }
.logs-source-layout { display: grid; grid-template-columns: minmax(20rem, .8fr) minmax(0, 1.2fr); gap: .85rem; align-items: start; }
.log-source-groups { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.log-source-groups h3 { margin-bottom: .4rem; font-size: .72rem; }
.log-source-list { display: grid; gap: .3rem; }
.log-source-item { display: grid; grid-template-columns: 1.8rem minmax(0, 1fr) auto; align-items: center; gap: .5rem; min-height: 2.7rem; padding: .4rem .48rem; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--surface-sunken); color: var(--text-primary); }
.log-source-item:hover { border-color: var(--accent-warm-border); }
.log-source-item > span:first-child { color: var(--color-action-hover); }
.log-source-item > span:nth-child(2) { display: grid; min-width: 0; }
.log-source-item strong, .log-source-item small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log-source-item strong { font-size: .66rem; }
.log-source-item small { color: var(--text-muted); font-size: .58rem; }
.log-preview { min-width: 0; }
.log-output { min-height: 18rem; max-height: 38rem; overflow: auto; padding: .75rem; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--surface-sunken); color: var(--text-secondary); font-family: var(--font-mono); font-size: .61rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.activity-list--audit { max-height: 28rem; overflow: auto; }
.muted-line { color: var(--text-muted); font-size: .65rem; }

/* Видеонаблюдение */
.video-page { display: grid; gap: .85rem; }
.video-toolbar { align-items: center; }
.video-archive-summary { display: grid; grid-template-columns: repeat(3, minmax(6rem, 1fr)); border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-card); overflow: hidden; }
.video-archive-summary > span { display: grid; gap: .12rem; padding: .62rem .75rem; }
.video-archive-summary > span + span { border-left: 1px solid var(--border-subtle); }
.video-archive-summary small { color: var(--text-muted); font-size: .59rem; }
.video-archive-summary strong { font-size: .74rem; }
.video-storage-notice { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .65rem; padding: .62rem .75rem; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-metal), var(--surface-card); }
.video-storage-notice > span:first-child { color: var(--accent-warm); }
.video-storage-notice > span:nth-child(2) { display: flex; align-items: baseline; gap: .55rem; min-width: 0; }
.video-storage-notice code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); }
.camera-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.camera-card { min-width: 0; overflow: hidden; border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--surface-metal), var(--surface-card); box-shadow: var(--shadow-xs); }
.camera-card[data-recording="true"] { border-color: color-mix(in srgb, var(--color-danger) 48%, var(--border-default)); }
.camera-card__header { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .75rem .85rem; border-bottom: 1px solid var(--border-subtle); }
.camera-card__number { color: var(--text-muted); font-size: .59rem; text-transform: uppercase; letter-spacing: .08em; }
.camera-card__header h2 { margin-top: .1rem; font-size: .85rem; }
.camera-state { display: inline-flex; align-items: center; gap: .35rem; min-height: 1.7rem; padding: 0 .5rem; border: 1px solid var(--border-default); border-radius: var(--radius-pill); color: var(--text-secondary); font-size: .61rem; }
.camera-card[data-recording="true"] .camera-state { color: var(--color-danger); }
.camera-card[data-recording="true"] .camera-state .status-dot { background: var(--color-danger); }
.camera-preview { position: relative; display: grid; place-items: center; min-height: 19rem; aspect-ratio: 16/9; overflow: hidden; background: #05070a; }
.camera-preview img { width: 100%; height: 100%; object-fit: contain; }
.camera-preview__message { position: absolute; inset: auto .55rem .55rem; padding: .25rem .42rem; border-radius: var(--radius-xs); background: rgba(0, 0, 0, .72); color: rgba(255,255,255,.78); font-size: .58rem; }
.camera-preview__empty { display: grid; justify-items: center; gap: .35rem; color: rgba(255,255,255,.6); text-align: center; }
.camera-preview__empty span { font-size: .65rem; }
.camera-runtime { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
.camera-runtime > div { display: grid; gap: .12rem; min-width: 0; padding: .48rem .55rem; }
.camera-runtime > div:not(:nth-child(3n+1)) { border-left: 1px solid var(--border-subtle); }
.camera-runtime > div:nth-child(n+4) { border-top: 1px solid var(--border-subtle); }
.camera-runtime dt { color: var(--text-muted); font-size: .57rem; }
.camera-runtime dd { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary); font-size: .63rem; }
.camera-controls { display: grid; gap: .6rem; padding: .7rem .8rem; }
.camera-config-form { display: grid; grid-template-columns: minmax(8rem, .8fr) minmax(0, 1.5fr) minmax(6.5rem, .55fr) minmax(6.5rem, .55fr); align-items: end; gap: .45rem; }
.camera-config-form label { display: grid; gap: .22rem; min-width: 0; font-size: .58rem; }
.camera-config-form input { min-width: 0; }
.camera-config-form__source { display: grid; gap: .32rem; min-width: 0; }
.camera-config-form__clear { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .35rem; color: var(--text-muted); }
.camera-config-form__clear input { width: 1rem; height: 1rem; }
.camera-config-form label small { color: var(--text-muted); font-size: .54rem; line-height: 1.35; }
.camera-config-form > .button { grid-column: 1 / -1; justify-self: end; min-width: 10rem; }
.camera-record-actions { display: flex; justify-content: flex-end; }
.video-archive-table code { color: var(--text-secondary); }
.table-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem; }
.table-actions form { margin: 0; }
.button-compact { min-height: 1.85rem; padding-inline: .55rem; font-size: .61rem; }

@media (max-width: 74.99rem) {
    .dashboard-primary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dashboard-command { grid-template-columns: 1fr; }
    .technical-columns, .logs-source-layout { grid-template-columns: 1fr; }
    .technical-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .logs-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .camera-config-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .camera-config-form__source { grid-column: 1 / -1; }
    .camera-config-form > .button { grid-column: 1 / -1; }
}

@media (max-width: 47.99rem) {
    .dashboard-primary-grid, .dashboard-operations-grid, .camera-grid { grid-template-columns: 1fr; }
    .dashboard-activity { grid-column: auto; }
    .readiness-list { grid-template-columns: 1fr; }
    .activity-item { grid-template-columns: 2rem minmax(0, 1fr); }
    .activity-item time { grid-column: 2; }
    .technical-passport__header { grid-template-columns: 1fr; align-items: start; }
    .technical-passport__logo { max-width: 15rem; justify-self: center; }
    .technical-detail-grid, .logs-summary-grid, .log-source-groups { grid-template-columns: 1fr; }
    .logs-filter { grid-template-columns: 1fr; }
    .video-archive-summary { width: 100%; }
    .video-storage-notice { grid-template-columns: auto minmax(0, 1fr); }
    .video-storage-notice .button { grid-column: 1 / -1; }
    .video-storage-notice > span:nth-child(2) { display: grid; gap: .1rem; }
    .camera-preview { min-height: 13rem; }
    .camera-runtime { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .camera-runtime > div:not(:nth-child(3n+1)) { border-left: 0; }
    .camera-runtime > div:nth-child(even) { border-left: 1px solid var(--border-subtle); }
    .camera-runtime > div:nth-child(n+3) { border-top: 1px solid var(--border-subtle); }
    .camera-config-form { grid-template-columns: 1fr; }
    .camera-config-form__source { grid-column: auto; }
    .camera-config-form > .button { grid-column: auto; justify-self: stretch; width: 100%; }
    .video-archive-summary { grid-template-columns: 1fr; }
    .video-archive-summary > span + span { border-left: 0; border-top: 1px solid var(--border-subtle); }
}

/* Interface & Collaboration Completion R1 */
.chat-workspace {
    position: relative;
    display: grid;
    grid-template-columns: 16rem minmax(0, 1fr);
    gap: .7rem;
    min-height: min(46rem, calc(100dvh - 6.5rem));
}
.chat-channels,
.chat-conversation {
    min-width: 0;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    background: var(--surface-metal), var(--surface-card);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
}
.chat-channels {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
}
.chat-channels__header,
.chat-conversation__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .7rem;
    min-height: 3.75rem;
    padding: .7rem .8rem;
    border-bottom: 1px solid var(--border-subtle);
}
.chat-channels__header h1 { font-size: .94rem; }
.chat-channel-list {
    display: grid;
    align-content: start;
    gap: .24rem;
    min-height: 0;
    overflow-y: auto;
    padding: .45rem;
}
.chat-channel-skeleton {
    padding: .9rem .7rem;
    color: var(--text-muted);
    font-size: .68rem;
}
.chat-channel {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) auto;
    align-items: center;
    gap: .55rem;
    width: 100%;
    min-height: 3.25rem;
    padding: .45rem .5rem;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
}
.chat-channel:hover { background: var(--surface-raised); }
.chat-channel.is-active {
    border-color: var(--accent-warm-border);
    background: linear-gradient(145deg, var(--accent-warm-soft), transparent 70%), var(--surface-raised);
}
.chat-channel__symbol {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
    color: var(--text-secondary);
    font-size: .67rem;
    font-weight: var(--font-weight-bold);
}
.chat-channel.is-active .chat-channel__symbol {
    border-color: var(--accent-warm-border);
    color: var(--accent-warm);
}
.chat-channel__copy {
    display: grid;
    gap: .12rem;
    min-width: 0;
}
.chat-channel__copy strong,
.chat-channel__copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chat-channel__copy strong { font-size: .7rem; }
.chat-channel__copy small { color: var(--text-muted); font-size: .59rem; }
.chat-channel__badge {
    display: grid;
    place-items: center;
    min-width: 1.3rem;
    height: 1.3rem;
    padding: 0 .28rem;
    border-radius: var(--radius-pill);
    background: var(--accent-warm);
    color: var(--color-on-action);
    font-size: .56rem;
    font-weight: var(--font-weight-bold);
}
.chat-channels__footer {
    display: grid;
    gap: .22rem;
    padding: .65rem .75rem;
    border-top: 1px solid var(--border-subtle);
    color: var(--text-muted);
    font-size: .59rem;
}
.chat-conversation {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto auto;
}
.chat-conversation__identity {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-width: 0;
    margin-right: auto;
}
.chat-conversation__identity > span:last-child {
    display: grid;
    gap: .08rem;
    min-width: 0;
}
.chat-conversation__identity strong,
.chat-conversation__identity small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chat-conversation__identity strong { font-size: .78rem; }
.chat-conversation__identity small { color: var(--text-muted); font-size: .61rem; }
.chat-channel-toggle { display: none; }
.chat-message--system {
    align-self: stretch;
    max-width: 100%;
}
.chat-message--system .chat-bubble {
    width: 100%;
    border-style: dashed;
    background: var(--surface-sunken);
}
.chat-bubble__attachment {
    display: inline-flex;
    align-items: center;
    min-height: 1.8rem;
    margin-top: .4rem;
    padding: .32rem .55rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
    color: var(--color-action-hover);
    font-size: .63rem;
    text-decoration: none;
}
.chat-queue {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .55rem;
    padding: .45rem .65rem;
    border-top: 1px solid var(--color-warning);
    background: color-mix(in srgb, var(--color-warning) 10%, var(--surface-panel));
    color: var(--text-secondary);
    font-size: .62rem;
}
.chat-composer {
    grid-template-columns: auto minmax(0, 1fr) auto;
    position: relative;
}
.chat-attachment-button {
    position: relative;
    align-self: end;
    overflow: hidden;
}
.chat-attachment-button input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.chat-attachment-button.is-disabled { opacity: .42; cursor: not-allowed; }
.chat-attachment-preview {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .45rem;
    padding: .4rem .5rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
    color: var(--text-secondary);
    font-size: .62rem;
}
.chat-attachment-preview[hidden] { display: none; }
.chat-attachment-preview > span:nth-child(2) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chat-direct-dialog .modal-dialog__surface { width: min(30rem, calc(100vw - 2rem)); }

.field-page { display: grid; gap: .75rem; }
.field-toolbar__actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.field-status-bar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(5rem, 12rem) auto;
    align-items: center;
    gap: .55rem;
    min-height: 2.55rem;
    padding: .45rem .7rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-metal), var(--surface-card);
    color: var(--text-muted);
    font-size: .64rem;
}
.field-status-bar[data-state="online"] .status-dot,
.field-status-bar[data-state="cached"] .status-dot { background: var(--color-success); }
.field-status-bar[data-state="offline"] .status-dot { background: var(--color-warning); }
.field-status-bar[data-state="loading"] .status-dot { background: var(--color-action); animation: diag-pulse 1s ease-in-out infinite; }
.field-cache-progress { width: 100%; height: .42rem; }
.field-layout {
    display: grid;
    grid-template-columns: 15.5rem minmax(0, 1fr);
    gap: .7rem;
    min-height: min(44rem, calc(100dvh - 11rem));
}
.field-navigation,
.field-content {
    min-width: 0;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    background: var(--surface-metal), var(--surface-card);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
}
.field-navigation { display: grid; grid-template-rows: auto auto minmax(0, 1fr); }
.field-search {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: .45rem;
    margin: .6rem;
    padding: 0 .55rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
    color: var(--text-muted);
}
.field-search input { min-height: 2.35rem; padding: 0; border: 0; background: transparent; }
.field-nav-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem; padding: 0 .6rem .55rem; }
.field-nav-tab {
    min-height: 2rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    font-size: .62rem;
    cursor: pointer;
}
.field-nav-tab.is-active { border-color: var(--accent-warm-border); background: var(--accent-warm-soft); color: var(--accent-warm); }
.field-section-list { display: grid; align-content: start; gap: .25rem; overflow-y: auto; padding: .45rem .6rem .7rem; }
.field-section-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    min-height: 2.65rem;
    padding: .45rem .6rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    font-size: .68rem;
    text-align: left;
    cursor: pointer;
}
.field-section-button:hover { border-color: var(--border-default); background: var(--surface-raised); color: var(--text-primary); }
.field-section-button strong {
    display: grid;
    place-items: center;
    min-width: 1.45rem;
    height: 1.45rem;
    border-radius: var(--radius-pill);
    background: var(--surface-sunken);
    color: var(--text-muted);
    font-size: .57rem;
}
.field-loading { padding: 1rem; color: var(--text-muted); font-size: .66rem; text-align: center; }
.field-content { min-height: 32rem; }
.field-welcome {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    min-height: 100%;
    padding: clamp(1rem, 4vw, 3rem);
}
.field-welcome__symbol {
    display: grid;
    place-items: center;
    width: 4.5rem;
    height: 4.5rem;
    border: 1px solid var(--accent-warm-border);
    border-radius: var(--radius-lg);
    background: var(--accent-warm-soft);
    color: var(--accent-warm);
}
.field-welcome h2 { margin-top: .25rem; font-size: clamp(1.25rem, 2.2vw, 2rem); }
.field-welcome p { max-width: 62ch; margin-top: .45rem; color: var(--text-muted); font-size: .74rem; line-height: 1.55; }
.field-welcome__metrics { display: grid; min-width: 9rem; border: 1px solid var(--border-default); border-radius: var(--radius-md); overflow: hidden; }
.field-welcome__metrics div { display: flex; justify-content: space-between; gap: .7rem; padding: .5rem .65rem; }
.field-welcome__metrics div + div { border-top: 1px solid var(--border-subtle); }
.field-welcome__metrics dt { color: var(--text-muted); font-size: .6rem; }
.field-welcome__metrics dd { font-size: .66rem; font-weight: var(--font-weight-semibold); }
.field-results { padding: .8rem; }
.field-results:empty { display: none; }
.field-results__header { display: flex; align-items: center; justify-content: space-between; gap: .7rem; margin-bottom: .65rem; }
.field-results__header h2 { font-size: 1rem; }
.field-article-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.field-article-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .7rem;
    min-height: 4.2rem;
    padding: .65rem .75rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
}
.field-article-card:hover { border-color: var(--accent-warm-border); transform: translateY(-1px); }
.field-article-card__copy { display: grid; gap: .16rem; min-width: 0; }
.field-article-card__copy strong { font-size: .72rem; }
.field-article-card__copy small { color: var(--text-muted); font-size: .58rem; }
.field-article-card__arrow { color: var(--accent-warm); font-size: 1rem; }
.field-article { display: grid; }
.field-article__header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .75rem;
    padding: .75rem .85rem;
    border-bottom: 1px solid var(--border-subtle);
}
.field-article__header h2 { margin-top: .12rem; font-size: 1.12rem; }
.field-article__header [data-field-back] .icon { transform: rotate(180deg); }
.field-article__meta {
    display: flex;
    align-items: center;
    gap: .45rem;
    min-height: 2.6rem;
    padding: .45rem .85rem;
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-muted);
    font-size: .6rem;
}
.field-font-controls { display: flex; gap: .2rem; margin-left: auto; }
.field-font-controls button {
    display: grid;
    place-items: center;
    width: 1.8rem;
    height: 1.8rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}
.field-font-controls button:nth-child(1) { font-size: .58rem; }
.field-font-controls button:nth-child(3) { font-size: .82rem; }
.field-font-controls button.is-active { border-color: var(--accent-warm-border); background: var(--accent-warm-soft); color: var(--accent-warm); }
.field-article__body {
    max-width: 78ch;
    width: 100%;
    margin-inline: auto;
    padding: 1rem clamp(.85rem, 4vw, 2.5rem) 2rem;
    font-size: .78rem;
    line-height: 1.65;
}
.field-article__body[data-font-size="small"] { font-size: .69rem; }
.field-article__body[data-font-size="large"] { font-size: .91rem; }
.field-article__body h2,
.field-article__body h3,
.field-article__body h4,
.field-article__body h5 { margin: 1.2em 0 .45em; }
.field-article__body p,
.field-article__body ul,
.field-article__body ol,
.field-article__body blockquote,
.field-article__body pre { margin: .65em 0; }
.field-article__body img { display: block; max-width: 100%; height: auto; margin: .8rem auto; border-radius: var(--radius-md); }
.field-article__body blockquote { padding: .55rem .7rem; border-left: 3px solid var(--accent-warm); background: var(--surface-sunken); color: var(--text-secondary); }
.field-article__body pre { overflow-x: auto; padding: .7rem; border-radius: var(--radius-sm); background: var(--surface-sunken); }
.field-article__body a { color: var(--color-action-hover); }
.field-install-guide { display: grid; gap: .6rem; }
.field-install-guide ol { display: grid; gap: .35rem; padding-left: 1.2rem; color: var(--text-secondary); font-size: .7rem; }
.icon-button.is-active { border-color: var(--accent-warm-border); background: var(--accent-warm-soft); color: var(--accent-warm); }

.storage-page { display: grid; gap: .75rem; }
.storage-overview { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, .55fr) minmax(0, 1.3fr); gap: .55rem; }
.storage-overview__card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: .65rem;
    min-height: 4.8rem;
    padding: .65rem .75rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-metal), var(--surface-card);
}
.storage-overview__icon {
    display: grid;
    place-items: center;
    width: 2.3rem;
    height: 2.3rem;
    border: 1px solid var(--accent-warm-border);
    border-radius: var(--radius-sm);
    background: var(--accent-warm-soft);
    color: var(--accent-warm);
}
.storage-overview__card > div { display: grid; gap: .15rem; min-width: 0; }
.storage-overview__card small { color: var(--text-muted); font-size: .59rem; }
.storage-overview__card strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .68rem; }
.storage-overview__card--wide { display: block; }
.storage-capacity { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.storage-capacity span { display: grid; gap: .1rem; }
.storage-browser__header { padding-inline: .85rem; }
.storage-breadcrumbs {
    display: flex;
    align-items: center;
    gap: .25rem;
    min-height: 2.7rem;
    padding: .45rem .75rem;
    border-bottom: 1px solid var(--border-subtle);
    overflow-x: auto;
}
.storage-breadcrumb {
    min-height: 1.75rem;
    padding: 0 .45rem;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-action-hover);
    font-size: .62rem;
    cursor: pointer;
    white-space: nowrap;
}
.storage-breadcrumb:hover { background: var(--surface-raised); }
.storage-breadcrumbs__separator { color: var(--text-faint); }
.storage-upload { padding: .7rem; border-bottom: 1px solid var(--border-subtle); }
.storage-dropzone {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .7rem;
    min-height: 4.4rem;
    padding: .7rem .8rem;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
    cursor: pointer;
}
.storage-dropzone.is-dragging { border-color: var(--accent-warm); background: var(--accent-warm-soft); }
.storage-dropzone input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.storage-dropzone__icon { color: var(--accent-warm); }
.storage-dropzone > span:nth-child(2) { display: grid; gap: .12rem; }
.storage-dropzone strong { font-size: .7rem; }
.storage-dropzone small { color: var(--text-muted); font-size: .6rem; }
.storage-upload__status { margin-top: .45rem; padding: .4rem .55rem; border-radius: var(--radius-sm); background: var(--surface-sunken); color: var(--text-muted); font-size: .62rem; }
.storage-upload__status[data-state="success"] { color: var(--color-success); }
.storage-upload__status[data-state="error"] { color: var(--color-danger); }
.storage-list { min-height: 14rem; padding: .7rem; }
.storage-entry {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--text-primary);
    font-size: .68rem;
    text-align: left;
}
.storage-entry--directory { color: var(--color-action-hover); cursor: pointer; }
.storage-entry__symbol {
    display: grid;
    place-items: center;
    width: 1.65rem;
    height: 1.65rem;
    flex: 0 0 auto;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
    color: var(--text-muted);
    font-size: .52rem;
    font-weight: var(--font-weight-bold);
}
.storage-table td:first-child { min-width: 15rem; }

@media (max-width: 69rem) {
    .chat-workspace { grid-template-columns: 13rem minmax(0, 1fr); }
    .field-layout { grid-template-columns: 13rem minmax(0, 1fr); }
    .field-welcome { grid-template-columns: auto minmax(0, 1fr); }
    .field-welcome__metrics { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); }
    .field-welcome__metrics div + div { border-top: 0; border-left: 1px solid var(--border-subtle); }
    .storage-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .storage-overview__card--wide { grid-column: 1 / -1; }
}

@media (max-width: 47.99rem) {
    .chat-workspace { grid-template-columns: 1fr; min-height: calc(100dvh - 9rem); }
    .chat-channels {
        position: fixed;
        z-index: 50;
        top: var(--topbar-height);
        bottom: var(--mobile-nav-height);
        left: .5rem;
        width: min(18rem, calc(100vw - 1rem));
        transform: translateX(calc(-100% - 1rem));
        transition: transform .2s ease;
        box-shadow: var(--shadow-lg);
    }
    .chat-workspace--channels-open .chat-channels { transform: translateX(0); }
    .chat-channel-toggle { display: inline-grid; }
    .chat-conversation { min-height: calc(100dvh - 9rem); border-radius: var(--radius-md); }
    .chat-conversation__header .counter-pill { display: none; }
    .chat-queue { grid-template-columns: auto minmax(0, 1fr); }
    .chat-queue .button { grid-column: 1 / -1; }

    .field-toolbar { align-items: stretch; flex-direction: column; }
    .field-toolbar__actions { display: grid; grid-template-columns: 1fr; }
    .field-toolbar__actions .button { width: 100%; }
    .field-status-bar { grid-template-columns: auto minmax(0, 1fr); }
    .field-status-bar .field-cache-progress,
    .field-status-bar .button { grid-column: 1 / -1; }
    .field-layout { grid-template-columns: 1fr; min-height: 0; }
    .field-navigation { max-height: none; }
    .field-section-list { grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
    .field-content { min-height: 24rem; }
    .field-welcome { grid-template-columns: 1fr; align-content: start; text-align: center; }
    .field-welcome__symbol { margin-inline: auto; }
    .field-welcome__metrics { grid-column: auto; grid-template-columns: 1fr; }
    .field-welcome__metrics div + div { border-left: 0; border-top: 1px solid var(--border-subtle); }
    .field-article-grid { grid-template-columns: 1fr; }
    .field-article__header { grid-template-columns: auto minmax(0, 1fr); }
    .field-article__header > .icon-button { grid-column: 1 / -1; justify-self: end; }
    .field-article__meta { flex-wrap: wrap; }

    .storage-toolbar { align-items: stretch; flex-direction: column; }
    .storage-toolbar .button { width: 100%; }
    .storage-overview { grid-template-columns: 1fr; }
    .storage-overview__card--wide { grid-column: auto; }
    .storage-capacity { grid-template-columns: 1fr; }
    .storage-dropzone { grid-template-columns: auto minmax(0, 1fr); }
    .storage-dropzone > .button { grid-column: 1 / -1; width: 100%; }
    .storage-table td:first-child { min-width: 11rem; }
}
}

/* Срочное исправление рабочих экранов alpha.11 */
dialog.modal-dialog:not([open]) { display: none; }
dialog.modal-dialog[open] {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: grid;
    width: 100vw;
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: 1rem;
    border: 0;
    background: transparent;
    place-items: center;
}
dialog.modal-dialog::backdrop { background: rgba(3, 7, 12, .68); backdrop-filter: blur(3px); }
.modal-dialog__surface {
    display: grid;
    width: min(36rem, calc(100vw - 2rem));
    max-height: calc(100dvh - 2rem);
    overflow: hidden;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    background: var(--surface-card);
    box-shadow: var(--shadow-lg);
}
.modal-dialog__header,
.modal-dialog__footer { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .75rem .85rem; }
.modal-dialog__header { border-bottom: 1px solid var(--border-subtle); }
.modal-dialog__footer { justify-content: flex-end; border-top: 1px solid var(--border-subtle); }
.modal-dialog__body { min-height: 0; overflow: auto; padding: .85rem; }

.camera-card__header-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: .45rem; }
.camera-card__header-actions form { margin: 0; }

.field-admin-page,
.field-editor-page { display: grid; gap: .8rem; }
.field-admin-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(18rem, .55fr); gap: .8rem; align-items: start; }
.field-admin-items { display: grid; }
.field-admin-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .75rem; min-height: 4rem; padding: .65rem .8rem; border-top: 1px solid var(--border-subtle); }
.field-admin-item__copy { display: grid; gap: .15rem; min-width: 0; color: var(--text-primary); text-decoration: none; }
.field-admin-item__copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .72rem; }
.field-admin-item__copy span { color: var(--text-muted); font-size: .61rem; }
.field-admin-item__actions { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; }
.field-admin-item__actions form { margin: 0; }
.field-admin-note .prose-compact { display: grid; gap: .7rem; padding: .85rem; color: var(--text-secondary); font-size: .68rem; line-height: 1.5; }

.field-editor-form { display: grid; gap: .75rem; padding: .85rem; }
.field-editor-meta { display: grid; grid-template-columns: minmax(14rem, 1.4fr) minmax(10rem, .6fr) minmax(14rem, 1fr); gap: .65rem; }
.field-editor-upload { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .75rem; min-height: 5rem; padding: .75rem .85rem; border: 1px dashed var(--border-strong); border-radius: var(--radius-md); background: var(--surface-sunken); }
.field-editor-upload.is-dragging { border-color: var(--accent-warm); background: var(--accent-warm-soft); }
.field-editor-upload input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.field-editor-upload > div { display: grid; gap: .2rem; }
.field-editor-upload span { color: var(--text-muted); font-size: .62rem; }
.field-editor-upload-status { padding: .45rem .6rem; border-radius: var(--radius-sm); background: var(--surface-sunken); color: var(--text-muted); font-size: .64rem; }
.field-editor-upload-status[data-state="success"] { color: var(--color-success); }
.field-editor-upload-status[data-state="error"] { color: var(--color-danger); }
.field-editor-preview { display: flex; flex-wrap: wrap; gap: .45rem; }
.field-editor-preview__item { display: grid; grid-template-columns: 3rem minmax(0, 1fr); align-items: center; gap: .45rem; width: min(18rem, 100%); padding: .4rem; border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--surface-sunken); }
.field-editor-preview__item img,
.field-editor-preview__file { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: var(--radius-xs); background: var(--surface-card); object-fit: cover; }
.field-editor-preview__item > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .61rem; }
.field-editor-toolbar { display: flex; flex-wrap: wrap; gap: .3rem; }
.field-editor-toolbar button { min-height: 2rem; padding: 0 .65rem; border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--surface-sunken); color: var(--text-primary); cursor: pointer; }
.field-editor-toolbar button:hover { border-color: var(--accent-warm-border); }
.field-editor-content textarea { min-height: 28rem; resize: vertical; font-family: var(--font-mono); line-height: 1.55; }
.field-editor-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: .45rem; }

@media (max-width: 64rem) {
    .field-admin-layout { grid-template-columns: 1fr; }
    .field-editor-meta { grid-template-columns: 1fr; }
}

@media (max-width: 47.99rem) {
    .camera-card__header { align-items: flex-start; }
    .camera-card__header-actions { justify-content: flex-start; }
    .field-admin-item { grid-template-columns: 1fr; }
    .field-admin-item__actions { justify-content: flex-start; }
    .field-editor-upload { grid-template-columns: 1fr; }
    .field-editor-upload .button { width: 100%; }
    .field-editor-actions .button { width: 100%; }
}

/* Operational Chat v2 — independent, offline-first client. */
.chat-workspace--v2 {
    grid-template-columns: 17rem minmax(0, 1fr);
    gap: .65rem;
    height: min(52rem, calc(100dvh - 6.25rem));
    min-height: 34rem;
}
.chat-workspace--v2.chat-workspace--context-open {
    grid-template-columns: 16rem minmax(20rem, 1fr) 19rem;
}
.chat-workspace--v2 .chat-channels {
    grid-template-rows: auto auto minmax(0, 1fr) auto;
}
.chat-header-actions,
.chat-sections,
.chat-outbox header,
.chat-outbox-item__actions {
    display: flex;
    align-items: center;
    gap: .35rem;
}
.chat-sections {
    padding: .42rem .48rem;
    border-bottom: 1px solid var(--border-subtle);
    overflow-x: auto;
}
.chat-section {
    min-height: 1.9rem;
    padding: 0 .55rem;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--text-muted);
    font-size: .62rem;
    cursor: pointer;
    white-space: nowrap;
}
.chat-section:hover { color: var(--text-primary); background: var(--surface-raised); }
.chat-section.is-active {
    border-color: var(--accent-warm-border);
    background: var(--accent-warm-soft);
    color: var(--text-primary);
}
.chat-connection[data-state="loading"],
.chat-connection[data-state="reconnecting"] { color: var(--color-warning); }
.chat-connection[data-state="loading"]::before,
.chat-connection[data-state="reconnecting"]::before { background: var(--color-warning); }
.chat-connection[data-state="online"] { color: var(--color-success); }
.chat-conversation { position: relative; }
.chat-history-control {
    display: flex;
    justify-content: center;
    padding: .35rem;
    border-bottom: 1px solid var(--border-subtle);
    background: var(--surface-panel);
}
.chat-history-control[hidden] { display: none; }
.chat-workspace--v2 .chat-messages { scroll-behavior: smooth; }
.chat-workspace--v2 .chat-message { max-width: min(88%, 46rem); }
.chat-workspace--v2 .chat-bubble__text { font-size: .92rem; line-height: 1.48; }
.chat-reply-reference {
    margin-bottom: .35rem;
    padding-left: .45rem;
    border-left: 2px solid var(--accent-warm-border);
    color: var(--text-muted);
    font-size: .62rem;
}
.chat-delivery-state {
    display: block;
    margin-top: .28rem;
    color: var(--text-muted);
    font-size: .57rem;
    text-align: right;
}
.chat-delivery-state[data-state="failed"] { color: var(--color-danger); }
.chat-unread-marker {
    align-self: stretch;
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--accent-warm);
    font-size: .6rem;
    font-weight: var(--font-weight-semibold);
}
.chat-unread-marker::before,
.chat-unread-marker::after { content: ""; height: 1px; flex: 1; background: var(--accent-warm-border); }
.chat-new-messages {
    position: absolute;
    z-index: 4;
    right: 1rem;
    bottom: 5.2rem;
    min-height: 2rem;
    padding: 0 .7rem;
    border: 1px solid var(--accent-warm-border);
    border-radius: var(--radius-pill);
    background: var(--surface-card);
    color: var(--text-primary);
    box-shadow: var(--shadow-md);
    cursor: pointer;
}
.chat-new-messages[hidden] { display: none; }
.chat-outbox {
    max-height: 12rem;
    overflow-y: auto;
    border-top: 1px solid var(--color-warning);
    background: color-mix(in srgb, var(--color-warning) 8%, var(--surface-panel));
}
.chat-outbox > header {
    justify-content: space-between;
    min-height: 2.45rem;
    padding: .35rem .65rem;
    color: var(--text-secondary);
    font-size: .63rem;
}
.chat-outbox__items { display: grid; }
.chat-outbox-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .55rem;
    padding: .45rem .65rem;
    border-top: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    font-size: .62rem;
}
.chat-outbox-item > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-composer .chat-draft-state {
    grid-column: 2 / -1;
    min-height: .7rem;
    color: var(--text-muted);
    font-size: .56rem;
}
.chat-context {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-width: 0;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    background: var(--surface-metal), var(--surface-card);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
}
.chat-context[hidden] { display: none; }
.chat-context__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .7rem;
    min-height: 3.75rem;
    padding: .7rem .8rem;
    border-bottom: 1px solid var(--border-subtle);
}
.chat-context__header h2 { font-size: .86rem; }
.chat-context__section { min-height: 0; overflow-y: auto; padding: .8rem; }
.chat-context__section form { display: grid; gap: .65rem; }
.chat-details { display: grid; gap: .55rem; margin: 0 0 .8rem; }
.chat-details div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; }
.chat-details dt { color: var(--text-muted); font-size: .62rem; }
.chat-details dd { margin: 0; color: var(--text-primary); font-size: .65rem; }
.chat-search-form { padding-bottom: .75rem; border-bottom: 1px solid var(--border-subtle); }
.chat-search-results { display: grid; gap: .45rem; padding-top: .75rem; }
.chat-search-result {
    display: grid;
    gap: .2rem;
    width: 100%;
    padding: .55rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
    color: var(--text-primary);
    font-size: .64rem;
    text-align: left;
    cursor: pointer;
}
.chat-search-result:hover { border-color: var(--accent-warm-border); }
.chat-mobile-backdrop { display: none; }

@media (max-width: 69rem) {
    .chat-workspace--v2.chat-workspace--context-open { grid-template-columns: 14rem minmax(0, 1fr); }
    .chat-workspace--v2.chat-workspace--context-open .chat-context {
        position: fixed;
        z-index: 52;
        top: var(--topbar-height);
        right: .5rem;
        bottom: .5rem;
        width: min(21rem, calc(100vw - 1rem));
        box-shadow: var(--shadow-lg);
    }
}

@media (max-width: 47.99rem) {
    .chat-workspace--v2 {
        height: calc(100dvh - var(--topbar-height) - var(--mobile-nav-height) - 1rem);
        min-height: 28rem;
    }
    .chat-workspace--v2 .chat-channels { z-index: 53; }
    .chat-workspace--channels-open .chat-mobile-backdrop,
    .chat-workspace--context-open .chat-mobile-backdrop {
        position: fixed;
        z-index: 51;
        inset: 0;
        display: block;
        border: 0;
        background: rgba(0, 0, 0, .42);
    }
    .chat-workspace--v2.chat-workspace--context-open { grid-template-columns: 1fr; }
    .chat-workspace--v2.chat-workspace--context-open .chat-context {
        z-index: 53;
        top: var(--topbar-height);
        right: 0;
        bottom: var(--mobile-nav-height);
        width: min(23rem, 100vw);
        border-radius: 0;
    }
    .chat-workspace--v2 .chat-message { max-width: 96%; }
    .chat-workspace--v2 .chat-messages { padding: .55rem; }
    .chat-workspace--v2 .chat-composer { padding: .5rem; }
    .chat-outbox-item { grid-template-columns: 1fr; }
    .chat-new-messages { right: .6rem; bottom: 5rem; }
}

@media (prefers-reduced-motion: reduce) {
    .chat-workspace--v2 .chat-messages { scroll-behavior: auto; }
}

/* Chat alpha.18 — familiar Telegram interaction model, Kuturchin identity. */
.chat-workspace--familiar {
    grid-template-columns: 20rem minmax(0, 1fr);
    gap: 0;
    height: min(56rem, calc(100dvh - 5.4rem));
    min-height: 38rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    background: var(--surface-card);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.chat-workspace--familiar.chat-workspace--context-open {
    grid-template-columns: 19rem minmax(22rem, 1fr) 21rem;
}
.chat-workspace--familiar .chat-channels,
.chat-workspace--familiar .chat-conversation,
.chat-workspace--familiar .chat-context {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
.chat-workspace--familiar .chat-channels {
    border-right: 1px solid var(--border-subtle);
    background: var(--surface-card);
}
.chat-familiar-sidebar-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .45rem;
    min-height: 4rem;
    padding: .55rem .65rem;
}
.chat-sidebar-search {
    display: flex;
    align-items: center;
    gap: .4rem;
    min-width: 0;
    min-height: 2.45rem;
    padding: 0 .7rem;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    background: var(--surface-sunken);
    color: var(--text-muted);
}
.chat-sidebar-search:focus-within {
    border-color: var(--accent-warm-border);
    background: var(--surface-raised);
}
.chat-sidebar-search .icon { width: 1rem; height: 1rem; }
.chat-sidebar-search input {
    min-width: 0;
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text-primary);
    font: inherit;
}
.chat-workspace--familiar .chat-sections {
    padding: .25rem .55rem .5rem;
    border-bottom: 1px solid var(--border-subtle);
}
.chat-workspace--familiar .chat-section {
    min-height: 2rem;
    padding: 0 .7rem;
    font-size: .68rem;
}
.chat-workspace--familiar .chat-channel-list { padding: .25rem 0; }
.chat-workspace--familiar .chat-channel {
    grid-template-columns: 3rem minmax(0, 1fr) auto;
    gap: .7rem;
    min-height: 4.35rem;
    padding: .48rem .65rem;
    border: 0;
    border-radius: 0;
    background: transparent;
}
.chat-workspace--familiar .chat-channel:hover { background: var(--surface-raised); }
.chat-workspace--familiar .chat-channel.is-active {
    background: color-mix(in srgb, var(--accent-warm) 17%, var(--surface-raised));
    box-shadow: inset 3px 0 var(--accent-warm);
}
.chat-workspace--familiar .chat-channel__symbol,
.chat-head__avatar,
.chat-profile-card__avatar {
    display: grid;
    place-items: center;
    width: 2.8rem;
    height: 2.8rem;
    flex: 0 0 auto;
    border: 0;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--accent-warm-soft), var(--surface-sunken));
    color: var(--accent-warm);
    font-size: .86rem;
    font-weight: var(--font-weight-bold);
}
.chat-channel__headline {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .4rem;
}
.chat-channel__headline strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .78rem;
}
.chat-channel__headline time { color: var(--text-muted); font-size: .58rem; }
.chat-workspace--familiar .chat-channel__copy { gap: .25rem; }
.chat-workspace--familiar .chat-channel__copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .66rem;
}
.chat-channel__side { display: grid; justify-items: end; gap: .25rem; }
.chat-channel__pin { color: var(--text-muted); font-size: .58rem; }
.chat-workspace--familiar .chat-channel__badge {
    display: grid;
    place-items: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 .28rem;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--accent-warm);
    color: var(--surface-card);
    font-size: .6rem;
    font-weight: var(--font-weight-bold);
}
.chat-workspace--familiar .chat-channels__footer {
    min-height: 2.4rem;
    padding: .35rem .65rem;
    font-size: .58rem;
}
.chat-workspace--familiar .chat-conversation {
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto auto;
    min-width: 0;
    background: var(--surface-sunken);
}
.chat-familiar-header {
    min-height: 4rem;
    padding: .45rem .7rem;
    background: var(--surface-card);
    box-shadow: 0 1px 0 var(--border-subtle);
}
.chat-conversation__identity {
    display: flex;
    align-items: center;
    gap: .65rem;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}
.chat-conversation__identity > span:last-child { display: grid; min-width: 0; }
.chat-conversation__identity strong,
.chat-conversation__identity small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chat-conversation__identity strong { font-size: .82rem; }
.chat-conversation__identity small { color: var(--text-muted); font-size: .6rem; }
.chat-shell .chat-typing { color: var(--accent-warm); }
.chat-pinned-bar {
    display: grid;
    grid-template-columns: .22rem minmax(0, 1fr) auto;
    align-items: center;
    gap: .55rem;
    width: 100%;
    min-height: 3rem;
    padding: .35rem .75rem;
    border: 0;
    border-bottom: 1px solid var(--border-subtle);
    background: var(--surface-card);
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
}
.chat-pinned-bar[hidden] { display: none; }
.chat-pinned-bar__mark,
.chat-composer-context__mark {
    align-self: stretch;
    border-radius: var(--radius-pill);
    background: var(--accent-warm);
}
.chat-pinned-bar > span:nth-child(2),
.chat-composer-context > span:nth-child(2) { display: grid; min-width: 0; }
.chat-pinned-bar strong,
.chat-composer-context strong { color: var(--accent-warm); font-size: .63rem; }
.chat-pinned-bar small,
.chat-composer-context small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .61rem; }
.chat-workspace--familiar .chat-messages {
    gap: .12rem;
    padding: 1rem clamp(.65rem, 3vw, 3.2rem);
    background:
        radial-gradient(circle at 15% 20%, color-mix(in srgb, var(--accent-warm) 4%, transparent), transparent 22%),
        radial-gradient(circle at 80% 70%, color-mix(in srgb, var(--text-muted) 4%, transparent), transparent 25%),
        var(--surface-sunken);
}
.chat-date-separator,
.chat-unread-marker {
    position: sticky;
    z-index: 2;
    top: .35rem;
    align-self: center;
    width: max-content;
    margin: .65rem auto;
    padding: .3rem .65rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--surface-card) 92%, transparent);
    color: var(--text-secondary);
    box-shadow: var(--shadow-xs);
    font-size: .58rem;
    backdrop-filter: blur(8px);
}
.chat-unread-marker { position: static; color: var(--accent-warm); }
.chat-unread-marker::before,
.chat-unread-marker::after { display: none; }
.chat-workspace--familiar .chat-message {
    position: relative;
    align-self: flex-start;
    max-width: min(76%, 42rem);
    gap: .35rem;
    margin-top: .34rem;
    outline: none;
}
.chat-workspace--familiar .chat-message--self { align-self: flex-end; }
.chat-workspace--familiar .chat-message--grouped { margin-top: .08rem; }
.chat-workspace--familiar .chat-message--grouped .chat-avatar { visibility: hidden; }
.chat-workspace--familiar .chat-avatar {
    width: 1.8rem;
    height: 1.8rem;
    flex: 0 0 1.8rem;
    border: 0;
    border-radius: 50%;
    background: var(--surface-card);
    color: var(--accent-warm);
    font-size: .58rem;
}
.chat-workspace--familiar .chat-bubble {
    position: relative;
    min-width: 5.2rem;
    padding: .48rem .62rem .3rem;
    border: 1px solid var(--border-subtle);
    border-radius: .75rem .75rem .75rem .22rem;
    background: var(--surface-card);
    box-shadow: 0 1px 1px color-mix(in srgb, var(--text-primary) 8%, transparent);
}
.chat-workspace--familiar .chat-message--self .chat-bubble {
    border-color: color-mix(in srgb, var(--accent-warm) 24%, var(--border-subtle));
    border-radius: .75rem .75rem .22rem .75rem;
    background: color-mix(in srgb, var(--accent-warm) 10%, var(--surface-card));
}
.chat-message--important .chat-bubble,
.chat-message--critical .chat-bubble { box-shadow: inset 3px 0 var(--accent-warm), var(--shadow-xs); }
.chat-message--critical .chat-bubble { box-shadow: inset 3px 0 var(--color-danger), var(--shadow-xs); }
.chat-workspace--familiar .chat-bubble__user {
    display: block;
    margin-bottom: .2rem;
    color: var(--accent-warm);
    font-size: .66rem;
}
.chat-workspace--familiar .chat-bubble__text {
    min-width: 0;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
    font-size: .91rem;
    line-height: 1.38;
}
.chat-bubble__deleted { color: var(--text-muted); font-style: italic; font-size: .78rem; }
.chat-reply-reference {
    display: grid;
    width: 100%;
    gap: .08rem;
    margin: 0 0 .4rem;
    padding: .18rem .4rem;
    border: 0;
    border-left: 3px solid var(--accent-warm);
    background: color-mix(in srgb, var(--accent-warm) 5%, transparent);
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
}
.chat-reply-reference strong { color: var(--accent-warm); font-size: .61rem; }
.chat-reply-reference span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .59rem; }
.chat-forward-reference { border-left-color: var(--text-muted); }
.chat-bubble__attachment {
    display: grid;
    gap: .25rem;
    margin-top: .35rem;
    color: var(--text-primary);
    text-decoration: none;
    font-size: .62rem;
}
.chat-bubble__attachment--image img {
    display: block;
    width: min(24rem, 100%);
    max-height: 22rem;
    border-radius: .55rem;
    object-fit: cover;
}
.chat-bubble__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .28rem;
    min-height: .8rem;
    margin-top: .2rem;
    color: var(--text-muted);
    font-size: .5rem;
}
.chat-bubble__pin { color: var(--accent-warm); }
.chat-workspace--familiar .chat-delivery-state {
    display: inline;
    margin: 0;
    color: var(--accent-warm);
    font-size: .55rem;
}
.chat-message__menu-button {
    position: absolute;
    top: .18rem;
    right: .2rem;
    display: none;
    width: 1.55rem;
    height: 1.55rem;
    border: 0;
    border-radius: 50%;
    background: color-mix(in srgb, var(--surface-card) 86%, transparent);
    color: var(--text-secondary);
    cursor: pointer;
}
.chat-message:hover .chat-message__menu-button,
.chat-message:focus-within .chat-message__menu-button { display: grid; place-items: center; }
.chat-message-reactions { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .38rem; }
.chat-message-reaction {
    min-height: 1.55rem;
    padding: .05rem .42rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-pill);
    background: var(--surface-sunken);
    color: var(--text-primary);
    cursor: pointer;
}
.chat-message-reaction.is-mine { border-color: var(--accent-warm-border); background: var(--accent-warm-soft); }
.chat-ack-button {
    width: 100%;
    min-height: 1.8rem;
    margin-top: .38rem;
    border: 0;
    border-top: 1px solid var(--border-subtle);
    background: transparent;
    color: var(--accent-warm);
    font-size: .6rem;
    cursor: pointer;
}
.chat-ack-button:disabled { color: var(--text-muted); }
.chat-message.is-highlighted .chat-bubble { animation: chat-highlight 1.4s ease-out; }
@keyframes chat-highlight {
    0%, 35% { box-shadow: 0 0 0 4px var(--accent-warm-soft); }
    100% { box-shadow: var(--shadow-xs); }
}
.chat-new-messages {
    right: 1rem;
    bottom: 5rem;
    display: grid;
    place-items: center;
    min-width: 2.55rem;
    height: 2.55rem;
    padding: 0 .55rem;
    border-radius: 50%;
    background: var(--surface-card);
    color: var(--accent-warm);
}
.chat-new-messages::before { content: "↓"; font-size: 1rem; }
.chat-new-messages span { position: absolute; top: -.38rem; right: -.25rem; min-width: 1.2rem; height: 1.2rem; padding: 0 .2rem; border-radius: var(--radius-pill); background: var(--accent-warm); color: var(--surface-card); font-size: .55rem; }
.chat-workspace--familiar .chat-composer {
    position: relative;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    gap: .35rem;
    padding: .5rem .7rem .35rem;
    border-top: 1px solid var(--border-subtle);
    background: var(--surface-card);
}
.chat-workspace--familiar .chat-composer textarea {
    min-height: 2.55rem;
    max-height: 10rem;
    padding: .68rem .85rem;
    border: 1px solid var(--border-subtle);
    border-radius: 1.25rem;
    background: var(--surface-sunken);
    font-size: .84rem;
    line-height: 1.35;
}
.chat-workspace--familiar .chat-send {
    display: grid;
    place-items: center;
    width: 2.65rem;
    height: 2.65rem;
    padding: 0;
    border-radius: 50%;
}
.chat-emoji-button { font-size: 1rem; }
.chat-composer-context {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: .22rem minmax(0, 1fr) auto;
    align-items: center;
    gap: .5rem;
    min-height: 2.6rem;
    padding: .2rem .35rem;
}
.chat-composer-context[hidden] { display: none; }
.chat-workspace--familiar .chat-attachment-preview { grid-column: 3 / -1; }
.chat-workspace--familiar .chat-draft-state { grid-column: 3 / -1; }
.chat-message-menu {
    position: fixed;
    z-index: 90;
    display: grid;
    min-width: 13.5rem;
    padding: .35rem;
    border: 1px solid var(--border-default);
    border-radius: .7rem;
    background: color-mix(in srgb, var(--surface-card) 97%, transparent);
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(14px);
}
.chat-message-menu[hidden] { display: none; }
.chat-message-menu > button {
    min-height: 2.15rem;
    padding: 0 .65rem;
    border: 0;
    border-radius: .38rem;
    background: transparent;
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
}
.chat-message-menu > button:hover { background: var(--surface-raised); }
.chat-message-menu > button.is-danger { color: var(--color-danger); }
.chat-reaction-strip { display: flex; justify-content: space-between; gap: .2rem; padding: .2rem .25rem .45rem; border-bottom: 1px solid var(--border-subtle); margin-bottom: .25rem; }
.chat-reaction-strip button { border: 0; background: transparent; font-size: 1rem; cursor: pointer; }
.chat-emoji-popover {
    position: fixed;
    z-index: 89;
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    width: 13rem;
    padding: .45rem;
    border: 1px solid var(--border-default);
    border-radius: .7rem;
    background: var(--surface-card);
    box-shadow: var(--shadow-lg);
}
.chat-emoji-popover[hidden] { display: none; }
.chat-emoji-popover button { width: 2.2rem; height: 2.2rem; border: 0; border-radius: .35rem; background: transparent; font-size: 1.1rem; cursor: pointer; }
.chat-emoji-popover button:hover { background: var(--surface-raised); }
.chat-profile-card { display: grid; justify-items: center; gap: .35rem; padding: .5rem 0 1rem; text-align: center; }
.chat-profile-card__avatar { width: 4.5rem; height: 4.5rem; font-size: 1.2rem; }
.chat-profile-card small { color: var(--text-muted); }
.chat-context-action,
.chat-forward-target,
.chat-pinned-item {
    display: flex;
    align-items: center;
    gap: .55rem;
    width: 100%;
    min-height: 2.65rem;
    padding: .45rem .55rem;
    border: 0;
    border-bottom: 1px solid var(--border-subtle);
    background: transparent;
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
}
.chat-context-action:hover,
.chat-forward-target:hover,
.chat-pinned-item:hover { background: var(--surface-raised); }
.chat-forward-list,
.chat-pinned-list { display: grid; }
.chat-workspace--familiar .chat-context { border-left: 1px solid var(--border-subtle); background: var(--surface-card); }

@media (max-width: 74rem) {
    .chat-workspace--familiar.chat-workspace--context-open { grid-template-columns: 18rem minmax(0, 1fr); }
    .chat-workspace--familiar.chat-workspace--context-open .chat-context {
        position: fixed;
        z-index: 53;
        top: var(--topbar-height);
        right: .5rem;
        bottom: .5rem;
        width: min(23rem, calc(100vw - 1rem));
        border: 1px solid var(--border-default);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-lg);
    }
}

@media (max-width: 47.99rem) {
    html.chat-page-active,
    body.chat-page { height: 100%; overflow: hidden; overscroll-behavior: none; }
    body.chat-page .app-shell,
    body.chat-page .app-main { height: var(--chat-visual-height, 100dvh); min-height: 0; overflow: hidden; }
    body.chat-page .topbar { position: relative; }
    body.chat-page .app-content {
        width: 100%;
        height: calc(var(--chat-visual-height, 100dvh) - var(--topbar-height));
        min-height: 0;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
    body.chat-page .mobile-nav { display: none; }
    body.chat-page .chat-workspace--familiar {
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
        height: 100%;
        min-height: 0;
        border: 0;
        border-radius: 0;
    }
    body.chat-page .chat-workspace--familiar .chat-channels {
        z-index: 53;
        top: var(--topbar-height);
        bottom: 0;
        left: 0;
        width: min(22rem, 92vw);
        border-radius: 0;
    }
    body.chat-page .chat-workspace--familiar .chat-conversation {
        grid-column: 1;
        width: 100%;
        min-height: 0;
        border-radius: 0;
    }
    body.chat-page .chat-workspace--familiar .chat-message { max-width: 91%; }
    body.chat-page .chat-workspace--familiar .chat-messages { min-height: 0; padding: .75rem .45rem; }
    body.chat-page .chat-workspace--familiar .chat-avatar { display: none; }
    body.chat-page .chat-workspace--familiar .chat-composer {
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: .3rem;
        padding: .38rem max(.35rem, env(safe-area-inset-right)) max(.38rem, env(safe-area-inset-bottom)) max(.35rem, env(safe-area-inset-left));
    }
    body.chat-page .chat-workspace--familiar .chat-emoji-button { display: none; }
    body.chat-page .chat-workspace--familiar .chat-composer textarea { min-width: 0; font-size: 1rem; }
    body.chat-page .chat-workspace--familiar .chat-attachment-preview,
    body.chat-page .chat-workspace--familiar .chat-draft-state { grid-column: 2 / -1; }
    body.chat-page .chat-message__menu-button { display: grid; place-items: center; }
    body.chat-page .chat-workspace--familiar.chat-workspace--context-open .chat-context {
        top: var(--topbar-height);
        right: 0;
        bottom: 0;
        width: 100vw;
        border: 0;
        border-radius: 0;
    }
    body.chat-page.chat-keyboard-open .chat-familiar-header,
    body.chat-page.chat-keyboard-open .chat-pinned-bar { min-height: 3.2rem; }
}

/* source: 60-utilities.css */
@layer utilities {
/* HTML hidden is an unconditional state. Utilities are the final cascade layer. */
[hidden] { display: none; }
.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; }
.flex { display: flex; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.gap-1 { gap: var(--space-2); }
.gap-2 { gap: var(--space-4); }
.mt-1 { margin-top: var(--space-2); }
.mt-2 { margin-top: var(--space-4); }
.mb-1 { margin-bottom: var(--space-2); }
.mb-2 { margin-bottom: var(--space-4); }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-muted { color: var(--text-muted); }
.text-orange, .text-warm { color: var(--accent-warm); }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto;
        animation-duration: 0.01ms;
        animation-iteration-count: 1;
        transition-duration: 0.01ms;
    }
}
}