/* 📁НАЧАЛО ФАЙЛА style.css v2.37 */
@layer base, layout, components, utilities;

@layer base {
    :root {
        --color-primary-oklch: oklch(56.5% 0.22 263.5); 
        --color-primary-dark-oklch: oklch(45% 0.23 263);
        --color-secondary-oklch: oklch(55% 0.015 260);
        --color-secondary-dark-oklch: oklch(48% 0.015 260);
        --color-success-oklch: oklch(67% 0.18 145);
        --color-success-dark-oklch: oklch(58% 0.19 145);
        --color-danger-oklch: oklch(60% 0.22 25); 
        --color-danger-dark-oklch: oklch(54% 0.23 25);
        --color-warning-oklch: oklch(85% 0.18 90); 
        --color-warning-dark-oklch: oklch(78% 0.19 90);
        --color-info-oklch: oklch(65% 0.15 220);
        --color-info-dark-oklch: oklch(58% 0.16 220);
        --color-light-oklch: oklch(98% 0.003 260);
        --color-dark-oklch: oklch(30% 0.01 260);
        --color-background-oklch: oklch(95% 0.005 260);
        --color-surface-oklch: oklch(100% 0 0);
        --color-text-oklch: oklch(20% 0.005 260);
        --color-text-muted-oklch: oklch(55% 0.015 260);
        --color-text-on-success-oklch: oklch(15% 0.005 145);
        --color-text-on-danger-oklch: oklch(98% 0.003 25);
        --color-border-oklch: oklch(90% 0.005 260);
        --color-border-input-oklch: oklch(85% 0.005 260);
        --color-border-input-invalid-oklch: var(--color-danger-oklch); 
        --color-focus-ring-oklch: oklch(56.5% 0.22 263.5 / 0.25);
        --color-focus-ring-invalid-oklch: oklch(60% 0.22 25 / 0.25); 
        --color-orphan-border-oklch: oklch(70% 0.2 50); 
        --color-field-filled-bg-oklch: oklch(96% 0.02 145 / 0.3);
        --color-field-filled-border-oklch: oklch(75% 0.1 145);
        
        --color-type-camera-bg: oklch(95% 0.03 25 / 0.4);
        --color-type-camera-border: oklch(88% 0.06 25);
        --color-type-registrar-bg: oklch(95% 0.02 260 / 0.4);
        --color-type-registrar-border: oklch(88% 0.04 260);
        --color-type-divider-bg: oklch(95% 0 0 / 0.4);
        --color-type-divider-border: oklch(88% 0 0);

        --color-primary: var(--color-primary-oklch);
        --color-primary-dark: var(--color-primary-dark-oklch);
        --color-secondary: var(--color-secondary-oklch);
        --color-secondary-dark: var(--color-secondary-dark-oklch);
        --color-success: var(--color-success-oklch);
        --color-success-dark: var(--color-success-dark-oklch);
        --color-danger: var(--color-danger-oklch);
        --color-danger-dark: var(--color-danger-dark-oklch);
        --color-warning: var(--color-warning-oklch);
        --color-warning-dark: var(--color-warning-dark-oklch);
        --color-info: var(--color-info-oklch);
        --color-info-dark: var(--color-info-dark-oklch);
        --color-light: var(--color-light-oklch);
        --color-dark: var(--color-dark-oklch);
        --color-background: var(--color-background-oklch);
        --color-surface: var(--color-surface-oklch);
        --color-text: var(--color-text-oklch);
        --color-text-muted: var(--color-text-muted-oklch);
        --color-text-on-success: var(--color-text-on-success-oklch);
        --color-text-on-danger: var(--color-text-on-danger-oklch);
        --color-border: var(--color-border-oklch);
        --color-border-input: var(--color-border-input-oklch);
        --color-border-input-invalid: var(--color-border-input-invalid-oklch);
        --color-focus-ring: var(--color-focus-ring-oklch);
        --color-focus-ring-invalid: var(--color-focus-ring-invalid-oklch);
        --color-orphan-border: var(--color-orphan-border-oklch);
        --color-field-filled-bg: var(--color-field-filled-bg-oklch);
        --color-field-filled-border: var(--color-field-filled-border-oklch);

        --font-family-sans-serif: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        --font-size-base: 13px; 
        --line-height-base: 1.5;
        --spacing-xs: 0.25rem;
        --spacing-sm: 0.5rem;
        --spacing-md: 1rem;
        --spacing-lg: 1.5rem;
        --spacing-xl: 2rem;
        --border-radius: 0.25rem;
        --border-radius-lg: 0.3rem;
        --control-padding-y: 0.375rem;
        --control-padding-x: 0.75rem;
        --control-height: 34px; /* Единая высота для элементов управления */
        accent-color: var(--color-primary);
    }

    html { box-sizing: border-box; height: 100%; font-size: var(--font-size-base); }
    *, *::before, *::after { box-sizing: inherit; }
    body { height: 100%; margin: 0; padding: 0; overflow: hidden; font-family: var(--font-family-sans-serif); line-height: var(--line-height-base); background-color: var(--color-background); color: var(--color-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
}

@layer layout {
    .app-container { display: flex; flex-direction: column; gap: var(--spacing-xs); width: 100%; height: 100%; padding: var(--spacing-xs); }
    .pane { display: flex; flex-direction: column; padding: var(--spacing-sm); background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--border-radius-lg); box-shadow: 0 1px 3px rgba(0,0,0,0.05); overflow-y: auto; width: 100%; flex-basis: auto; }
    #device-list-pane { max-height: 40vh; order: 1; }
    .device-details-pane { min-height: 40vh; order: 2; }
    #actions-pane { max-height: 25vh; order: 3; }
    .pane::-webkit-scrollbar { width: 8px; }
    .pane::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; }
    .pane::-webkit-scrollbar-thumb { background: var(--color-border-input); border-radius: 10px; }
    .pane::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--color-border-input) 70%, black); }
    @media (min-width: 769px) { html { --font-size-base: 14px; } .app-container { flex-direction: row; gap: var(--spacing-sm); padding: var(--spacing-sm); } #device-list-pane { flex: 0 0 320px; max-height: none; order: 0; } .device-details-pane { flex: 2; min-height: auto; order: 0; } #actions-pane { flex: 0 0 260px; max-height: none; order: 0; } }
    @media (min-width: 1200px) { #device-list-pane { flex: 0 0 350px; } #actions-pane { flex: 0 0 280px; } }
}

@layer components {
    /* Общие стили */
    .mode-switcher-container { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-xs); margin-bottom: var(--spacing-md); padding-bottom: var(--spacing-sm); border-bottom: 1px solid var(--color-border); }
    .mode-switcher-container label { font-weight: 500; font-size: 0.9em; }
    .mode-toggle-group { display: flex; border-radius: var(--border-radius); overflow: hidden; width: 100%; }
    .mode-btn { padding: var(--spacing-xs) var(--spacing-sm); font-size: 0.85em; border: 1px solid var(--color-primary); background-color: var(--color-surface); color: var(--color-primary); cursor: pointer; transition: background-color 0.2s, color 0.2s; margin: 0; flex-grow: 1; text-align: center; }
    .mode-btn:first-child { border-top-left-radius: var(--border-radius); border-bottom-left-radius: var(--border-radius); border-right-width: 0.5px; }
    .mode-btn:last-child { border-top-right-radius: var(--border-radius); border-bottom-right-radius: var(--border-radius); border-left-width: 0.5px; }
    .mode-btn:hover:not(.active) { background-color: color-mix(in oklch, var(--color-primary) 10%, transparent); }
    .mode-btn.active { background-color: var(--color-primary); color: var(--color-surface); border-color: var(--color-primary); cursor: default; }
    .pane > h3, .pane h4 { margin-block-start: 0; margin-block-end: var(--spacing-sm); color: var(--color-primary-dark); font-size: 1.1em; border-block-end: 1px solid var(--color-border); padding-block-end: var(--spacing-xs); }
    .mode-switcher-container + h3 { margin-block-start: 0; }
    #device-form-view h3 { text-align: center; }
    .pane h4 { font-size: 1em; margin-block-end: var(--spacing-xs); padding-block-end: calc(var(--spacing-xs) / 2); margin-block-start: var(--spacing-md); }
    .pane h4:first-of-type { margin-block-start: 0; }
    #storage-section h5 { font-size: 0.95em; color: var(--color-secondary-dark); margin-block-start: var(--spacing-sm); margin-block-end: var(--spacing-xs); font-weight: 500; }
    
    /* Унификация полей ввода */
    input[type="text"], input[type="email"], input[type="password"], input[type="date"], input[type="number"], select {
        width: 100%;
        height: var(--control-height); 
        padding-inline: calc(var(--control-padding-x) - 2px); 
        padding-block: 0; 
        border: 1px solid var(--color-border-input);
        border-radius: var(--border-radius);
        font-size: 0.9em;
        background-color: var(--color-surface);
        transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
        color: var(--color-text);
    }
    textarea {
        width: 100%;
        padding: calc(var(--control-padding-y) - 1px) calc(var(--control-padding-x) - 2px);
        border: 1px solid var(--color-border-input);
        border-radius: var(--border-radius);
        font-size: 0.9em;
        background-color: var(--color-surface);
        transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
        color: var(--color-text);
    }

    .form-group { margin-block-end: var(--spacing-sm); }
    .form-group input, .form-group select, .form-group textarea, .form-group .ip-input-container, .form-group .input-with-actions, .form-group .input-with-button, .form-group .input-with-override { margin-block-end: 0; }
    .form-group--full-width { grid-column: 1 / -1; } /* Для элементов, занимающих всю ширину грида */
    
    input:focus, select:focus, textarea:focus { border-color: var(--color-primary); outline: 0; box-shadow: 0 0 0 0.2rem var(--color-focus-ring); }
    select { appearance: none; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right var(--control-padding-x) center; background-size: 16px 12px; padding-right: calc(var(--control-padding-x) * 2 + 16px); }
    select[multiple] { appearance: auto; background-image: none; padding-right: var(--control-padding-x); min-height: calc((var(--font-size-base) * var(--line-height-base) * 4) + (var(--control-padding-y) * 2) + 2px); }
    .form-group small:not(.field-validation-message):not(.field-helper-text) { font-size: 0.8em; color: var(--color-text-muted); margin-top: calc(var(--spacing-xs) / 2); display: block; }
    button { padding: calc(var(--control-padding-y) - 1px) calc(var(--control-padding-x) - 2px); margin-block-start: var(--spacing-sm); font-size: 0.9em; background-color: var(--color-primary); color: var(--color-surface); border: 1px solid var(--color-primary); border-radius: var(--border-radius); cursor: pointer; transition: background-color 0.2s, border-color 0.2s, color 0.2s; text-align: center; }
    button:hover:not(:disabled) { background-color: var(--color-primary-dark); border-color: var(--color-primary-dark); }
    button:disabled { background-color: var(--color-background); border-color: var(--color-border-input); color: var(--color-text-muted); cursor: not-allowed; opacity: 0.65; }
    .form-group:not(:has(#deviceMainType)).has-value > input:not([type="checkbox"]):not([type="radio"]):not(.invalid), .form-group:not(:has(#deviceMainType)).has-value > select:not(.invalid), .form-group:not(:has(#deviceMainType)).has-value > textarea:not(.invalid) { background-color: var(--color-field-filled-bg); border-color: var(--color-field-filled-border); }
    .form-group.has-value > .color-picker-wrapper input[type="color"] { box-shadow: 0 0 0 2px var(--color-field-filled-border) inset; }
    .form-group.ip-address-group.has-value > .input-with-actions .ip-input-container:not(.invalid-container) { border-color: var(--color-field-filled-border); }
    #deviceMainType.device-type-camera { background-color: var(--color-type-camera-bg); border-color: var(--color-type-camera-border); }
    #deviceMainType.device-type-registrar { background-color: var(--color-type-registrar-bg); border-color: var(--color-type-registrar-border); }
    #deviceMainType.device-type-divider { background-color: var(--color-type-divider-bg); border-color: var(--color-type-divider-border); }
    
    /* Унификация контейнера IP и кнопок */
    .ip-input-container { display: flex; align-items: center; border: 1px solid var(--color-border-input); border-radius: var(--border-radius); transition: border-color 0.2s, box-shadow 0.2s; background-color: var(--color-surface); flex-grow: 1; height: var(--control-height); }
    .ip-input-container:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 0.2rem var(--color-focus-ring); }
    .ip-prefix-display { padding: calc(var(--control-padding-y) - 1px) var(--spacing-xs) calc(var(--control-padding-y) - 1px) calc(var(--control-padding-x) - 2px); background-color: var(--color-background); color: var(--color-text-muted); border-right: 1px solid var(--color-border-input); white-space: nowrap; cursor: default; user-select: none; border-top-left-radius: var(--border-radius); border-bottom-left-radius: var(--border-radius); }
    .ip-prefix-display.editable { background-color: color-mix(in oklch, var(--color-warning) 30%, transparent); color: var(--color-text); cursor: text; }
    #ipAddressPrimarySuffix { flex-grow: 1; border: none; background-color: transparent; border-top-right-radius: var(--border-radius); border-bottom-right-radius: var(--border-radius); padding-left: var(--spacing-xs); }
    #ipAddressPrimarySuffix:focus { box-shadow: none; outline: none; }
    .input-with-button, .input-with-actions, .input-with-icon { display: flex; align-items: center; gap: var(--spacing-xs); position: relative; }
    .input-with-button input, .input-with-button select, .input-with-actions .ip-input-container, .input-with-icon input { flex-grow: 1; }
    .input-with-icon input { padding-right: 32px; } /* Место под иконку */
    .input-icon-btn { position: absolute; right: 1px; top: 1px; bottom: 1px; width: 32px; background: transparent; border: none; color: var(--color-text-muted); cursor: pointer; margin: 0; padding: 0; font-size: 1.2em; display: flex; align-items: center; justify-content: center; }
    .input-icon-btn:hover { color: var(--color-text); }
    .form-action-buttons { display: flex; gap: var(--spacing-xs); }
    .inline-action-btn { margin-block-start: 0; height: var(--control-height); padding-inline: var(--spacing-sm); padding-block: 0; line-height: 1; display: flex; align-items: center; justify-content: center; font-size: 1em; min-width: auto; background-color: var(--color-background); border-color: var(--color-border-input); color: var(--color-text-muted); flex-shrink: 0; }
    .inline-action-btn:hover:not(:disabled) { background-color: var(--color-border); border-color: var(--color-text-muted); color: var(--color-text); }
    .optional-triggers-container { display: flex; gap: var(--spacing-sm); margin-top: var(--spacing-xs); }
    .optional-network-field { display: none; }
    .optional-section-header { display: flex; align-items: center; justify-content: space-between; margin-top: var(--spacing-sm); }
    .optional-section-header h5 { margin: 0; }
    .toggle-section-btn { margin: 0; padding: 2px 6px; font-size: 0.8em; }
    .toggle-section-btn[aria-expanded="true"] { background-color: color-mix(in srgb, var(--color-danger) 15%, transparent); border-color: color-mix(in srgb, var(--color-danger) 40%, transparent); color: var(--color-danger-dark); }
    .input-with-override { display: flex; align-items: center; gap: var(--spacing-sm); }
    .input-with-override select { flex-grow: 1; }
    .input-with-override .override-checkbox label { font-size: 0.85em; font-weight: normal; }
    select.editable-by-triple-click:not(:disabled) { border-color: var(--color-warning-dark) !important; outline: 1px solid var(--color-warning-dark) !important; }
    select:disabled.editable-by-triple-click { border-color: var(--color-border-input) !important; outline: none !important; }
    .field-validation-message { font-size: 0.8em; color: var(--color-danger); margin-top: var(--spacing-xs); min-height: 1.2em; display: block; }
    .field-helper-text { font-size: 0.8em; color: var(--color-text-muted); margin-top: var(--spacing-xs); min-height: 1.2em; display: block; }
    input.invalid, select.invalid, textarea.invalid, .ip-input-container.invalid-container { border-color: var(--color-border-input-invalid) !important; }
    input.invalid:focus, select.invalid:focus, textarea.invalid:focus, .ip-input-container.invalid-container:focus-within { border-color: var(--color-border-input-invalid) !important; box-shadow: 0 0 0 0.2rem var(--color-focus-ring-invalid) !important; }
    .list-actions-toolbar { margin-bottom: var(--spacing-sm); display: flex; }
    button.move-mode-btn { width: 100%; padding: var(--spacing-xs) var(--spacing-sm); font-size: 0.85em; background-color: var(--color-info); border-color: var(--color-info-dark); color: var(--color-surface); margin-block-start: 0; display: flex; align-items: center; justify-content: center; gap: var(--spacing-xs); }
    button.move-mode-btn .button-text { margin-left: var(--spacing-xs); }
    button.move-mode-btn.active { background-color: var(--color-warning); border-color: var(--color-warning-dark); color: var(--color-dark); }
    button.move-mode-btn:hover:not(:disabled):not(.active) { background-color: var(--color-info-dark); }
    button.move-mode-btn.active:hover:not(:disabled) { background-color: var(--color-warning-dark); }
    #device-tree-container { flex-grow: 1; overflow-y: auto; padding-right: var(--spacing-xs); }
    #device-list { display: flex; flex-direction: column; gap: 2px; }
    .form-metadata-dates { font-size: 0.8em; color: var(--color-text-muted); background-color: color-mix(in oklch, var(--color-background) 90%, var(--color-border)); padding: var(--spacing-xs) var(--spacing-sm); margin-bottom: var(--spacing-md); border-radius: var(--border-radius); border: 1px solid var(--color-border); }
    .form-metadata-dates p { margin: 0; line-height: 1.4; }
    .form-metadata-dates p span { font-weight: 500; color: var(--color-text); }
    .device-item-wrapper { display: flex; align-items: stretch; position: relative; }
    .device-color-labels { display: flex; flex-direction: row; align-items: stretch; margin-right: 4px; flex-shrink: 0; }
    .device-color-label { width: 8px; /* Увеличено */ }
    .device-color-label.secondary { opacity: 0.9; }
    .device-color-labels:not(:empty) { border-top-left-radius: var(--border-radius); border-bottom-left-radius: var(--border-radius); overflow: hidden; }
    .device-item { display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-xs) var(--spacing-sm); background-color: var(--color-surface); border: 1px solid var(--color-border); border-left: none; border-top-right-radius: var(--border-radius); border-bottom-right-radius: var(--border-radius); cursor: pointer; transition: background-color 0.15s, border-color 0.15s; min-height: 36px; flex-grow: 1; overflow: hidden; }
    .device-color-labels:empty + .device-item { border-top-left-radius: var(--border-radius); border-bottom-left-radius: var(--border-radius); border-left: 1px solid var(--color-border); }
    .device-item:hover { background-color: var(--color-light); border-color: var(--color-border-input); }
    .device-item.active { background-color: color-mix(in oklch, var(--color-primary) 15%, transparent); border-color: color-mix(in oklch, var(--color-primary) 40%, transparent); }
    .device-color-labels:empty + .device-item.active { border-left-color: color-mix(in oklch, var(--color-primary) 40%, transparent); }
    .device-item.active .device-item-name { font-weight: 600; color: var(--color-primary-dark); }
    .device-item.orphan-device { background-color: color-mix(in oklch, var(--color-orphan-border) 10%, transparent); }
    .device-item.orphan-device .device-item-name { font-style: italic; color: color-mix(in oklch, var(--color-orphan-border) 80%, black); }
    .device-item-wrapper:has(> .device-item.orphan-device) > .device-color-labels:empty::before { content: ""; display: block; width: 8px; /* Увеличено */ height: 100%; background-color: var(--color-orphan-border); border-top-left-radius: var(--border-radius); border-bottom-left-radius: var(--border-radius); }
    .device-color-labels.inherited-marks .device-color-label { outline: 1px dashed color-mix(in oklch, var(--color-text-muted) 60%, transparent); outline-offset: -1px; }
    .device-item.device-item-divider { padding: var(--spacing-xs) var(--spacing-sm); text-align: center; font-weight: 600; background-color: var(--divider-color, var(--color-light)); border: 1px solid color-mix(in srgb, var(--divider-color, var(--color-light)) 80%, black); border-left: 5px solid color-mix(in srgb, var(--divider-color, var(--color-light)) 70%, black); border-right-width: 1px; border-radius: var(--border-radius); margin-top: var(--spacing-sm); margin-bottom: var(--spacing-sm); cursor: default; min-height: auto; }
    .device-item.device-item-divider:hover { background-color: var(--divider-color, var(--color-light)); }
    .device-item.device-item-divider .device-item-name.divider-title { flex-grow: 1; text-align: center; color: oklch(from var(--divider-color) calc(l < 0.6 ? 0.95 : 0.05) c h); font-size: 0.9em; text-transform: uppercase; letter-spacing: 0.05em; }
    .device-item.device-item-divider .device-item-controls button { color: oklch(from var(--divider-color) calc(l < 0.6 ? 0.9 : 0.1) c h / 0.8); background-color: transparent; border-color: transparent; }
    .device-item.device-item-divider .device-item-controls button:hover { color: oklch(from var(--divider-color) calc(l < 0.6 ? 1 : 0) c h); background-color: oklch(from var(--divider-color) l c h / 0.1); }
    .orphan-cameras-header { margin: var(--spacing-sm) 0 var(--spacing-xs) 0; padding: var(--spacing-xs) var(--spacing-sm); background-color: color-mix(in oklch, var(--color-warning) 20%, transparent); border-left: 3px solid var(--color-warning); border-radius: var(--border-radius); }
    .orphan-cameras-header h4 { margin: 0; padding: 0; border: none; font-size: 0.9em; color: var(--color-warning-dark); }
    .device-item-content { display: flex; align-items: center; flex-grow: 1; overflow: hidden; }
    .tree-toggle-btn { background: none; border: none; padding: 0 var(--spacing-xs) 0 0; margin: 0; color: var(--color-text-muted); cursor: pointer; font-size: 0.8em; line-height: 1; width: 18px; text-align: center; }
    .tree-toggle-btn:hover { color: var(--color-primary); }
    .tree-toggle-btn-spacer { display: inline-block; width: 18px; }
    .device-type-icon { margin-inline-end: var(--spacing-xs); font-size: 1em; width: 18px; text-align: center; line-height: 1; }
    .device-item-name { flex-grow: 1; margin-inline-start: var(--spacing-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.9em; }
    .device-item-controls { display: flex; gap: var(--spacing-xs); margin-left: var(--spacing-sm); }
    .device-item button { padding: 2px 4px; font-size: 0.75em; margin-block-start: 0; min-width: 24px; line-height: 1.2; }
    .device-item-controls .move-device-btn { padding: 1px 4px; font-size: 1.1em; line-height: 1; background-color: var(--color-light); border: 1px solid var(--color-border-input); color: var(--color-text-muted); min-width: 22px; }
    .device-item-controls .move-device-btn:hover:not(:disabled) { background-color: var(--color-border); color: var(--color-text); }
    .device-item-controls .move-device-btn:disabled { opacity: 0.3; cursor: not-allowed; }
    button.edit-device-btn { background-color: var(--color-warning); border-color: var(--color-warning); color: var(--color-dark); }
    button.edit-device-btn:hover:not(:disabled) { background-color: var(--color-warning-dark); border-color: var(--color-warning-dark); }
    button.delete-device-btn { background-color: var(--color-danger); border-color: var(--color-danger); }
    button.delete-device-btn:hover:not(:disabled) { background-color: var(--color-danger-dark); border-color: var(--color-danger-dark); }
    #add-camera-to-selected-registrar-btn { background-color: var(--color-success); border-color: var(--color-success); width: 100%; }
    #add-camera-to-selected-registrar-btn:hover:not(:disabled) { background-color: var(--color-success-dark); border-color: var(--color-success-dark); }
    .device-children-container { display: flex; flex-direction: column; gap: 2px; }
    
    /* Новые стили для сеточной разметки формы */
    .form-grid.form-grid-layout { display: grid; gap: var(--spacing-sm) var(--spacing-md); grid-template-columns: 1fr; }
    @media (min-width: 480px) { .form-grid.form-grid-layout { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }
    @media (min-width: 769px) { .form-grid.form-grid-layout { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } }
    #main-params-grid.layout-camera .form-group--type { order: -3; }
    #main-params-grid.layout-camera .form-group--parent { order: -2; }
    #main-params-grid.layout-camera .form-group--name { order: -1; }
    #main-params-grid.layout-registrar .form-group--type { order: -3; }
    #main-params-grid.layout-registrar .form-group--channels { order: -2; }
    #main-params-grid.layout-registrar .form-group--name { order: -1; }
    .form-group label { margin-block-end: var(--spacing-xs); font-weight: 500; color: var(--color-text); font-size: 0.85em; }
    .hdd-data-date-group input[type="date"] { margin-bottom: var(--spacing-xs); }
    .checkbox-inline-group { display: flex; align-items: center; gap: var(--spacing-xs); } 
    .checkbox-inline-group input[type="checkbox"] { width: auto; margin-bottom: 0; }
    .checkbox-inline-group label { margin-bottom: 0; font-weight: normal; font-size: 0.9em; color: var(--color-text); } 
    .form-actions { margin-block-start: var(--spacing-md); padding-block-start: var(--spacing-sm); border-block-start: 1px solid var(--color-border); display: flex; flex-direction: column; gap: var(--spacing-sm); }
    #cancel-edit-btn { background-color: var(--color-secondary); border-color: var(--color-secondary); }
    #cancel-edit-btn:hover:not(:disabled) { background-color: var(--color-secondary-dark); border-color: var(--color-secondary-dark); }
    #actions-pane > h3 { text-align: center; }
    #actions-pane hr { border: none; border-top: 1px solid var(--color-border); margin: var(--spacing-md) 0; }
    #global-settings-btn { background-color: var(--color-info); border-color: var(--color-info); width: 100%; margin-bottom: var(--spacing-xs); }
    #global-settings-btn:hover:not(:disabled) { background-color: var(--color-info-dark); border-color: var(--color-info-dark); }
    #selected-device-info { background-color: color-mix(in oklch, var(--color-info) 15%, transparent); border: 1px solid color-mix(in oklch, var(--color-info) 40%, transparent); padding: var(--spacing-sm); margin-block-end: var(--spacing-md); border-radius: var(--border-radius); font-size: 0.9em; }
    #selected-device-info h4 { margin-block-start: 0; margin-block-end: var(--spacing-xs); padding-block-end: 0; border-block-end: none; color: var(--color-info-dark); font-size: 1em; }
    #selected-device-info p { margin: 0 0 var(--spacing-xs) 0; color: var(--color-text); }
    #selected-device-name-info, #selected-device-id-display-info, #selected-device-type-display-info { font-weight: bold; }
    .action-buttons-group button { display: block; width: 100%; margin-block-end: var(--spacing-sm); }
    #clear-all-data-btn { background-color: var(--color-warning); border-color: var(--color-warning); color: var(--color-dark); margin-block-start: var(--spacing-md); }
    #clear-all-data-btn:hover:not(:disabled) { background-color: var(--color-warning-dark); border-color: var(--color-warning-dark); }
    #help-btn { background-color: var(--color-info); border-color: var(--color-info); width: 100%; }
    #help-btn:hover:not(:disabled) { background-color: var(--color-info-dark); border-color: var(--color-info-dark); }
    #view-details-area { padding: var(--spacing-sm); height: 100%; display: flex; flex-direction: column; }
    #view-details-area h3 { margin-block-start: 0; margin-block-end: var(--spacing-sm); color: var(--color-primary-dark); font-size: 1.2em; border-block-end: 1px solid var(--color-border); padding-block-end: var(--spacing-xs); text-align: center; }
    #view-device-content { flex-grow: 1; overflow-y: auto; font-size: 0.9em; }
    #view-device-content .view-section { padding: var(--spacing-xs); margin-bottom: var(--spacing-xs); border: 1px solid var(--color-border); border-radius: var(--border-radius); background-color: var(--color-light); }
    #view-device-content .view-section h4 { font-size: 1em; margin-bottom: var(--spacing-xs); color: var(--color-primary); padding-bottom: 2px; border-bottom: 1px dotted var(--color-border); }
    #view-device-content .view-detail-item { font-size: 0.9em; margin-bottom: var(--spacing-xs); display: flex; flex-wrap: wrap; align-items: baseline; }
    #view-device-content .view-detail-label { display: inline-block; min-width: 130px; font-weight: 600; color: var(--color-text-muted); margin-right: var(--spacing-xs); }
    #view-device-content .view-detail-value { word-break: break-word; }
    #view-device-content .media-item { flex-direction: column; align-items: flex-start; }
    #view-device-content .media-item .view-detail-label { margin-bottom: var(--spacing-xs); }
    #view-device-content .media-item-content-wrapper { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-xs); }
    #view-device-content .media-item .view-detail-value.media-path { font-family: monospace; background-color: var(--color-background); padding: var(--spacing-xs); border-radius: var(--border-radius-sm); display: inline-block; word-break: break-all; }
    #view-device-content .media-item img.media-preview-thumbnail { max-width: 200px; max-height: 120px; border: 1px solid var(--color-border-input); border-radius: var(--border-radius-sm); object-fit: cover; cursor: pointer; transition: transform 0.2s ease-out, opacity 0.2s; margin-top: var(--spacing-xs); }
    #view-device-content .media-item img.media-preview-thumbnail:hover { transform: scale(1.05); opacity: 0.85; }
    #view-device-content .media-item video { border: 1px solid var(--color-border-input); border-radius: var(--border-radius); background-color: var(--color-background); object-fit: contain; display: block; margin-top: var(--spacing-xs); }
    #view-device-content .media-item .media-fallback-note { font-size: 0.85em; color: var(--color-text-muted); display: block; width: 100%; margin-top: var(--spacing-xs); }
    .media-action-btn { padding: 2px 5px; font-size: 0.8em; background-color: var(--color-secondary); border-color: var(--color-secondary); color: var(--color-surface); line-height: 1; min-width: auto; margin-block-start: 0; vertical-align: middle; }
    .media-action-btn:hover:not(:disabled) { background-color: var(--color-secondary-dark); }
    .media-action-btn.success-feedback { background-color: var(--color-success) !important; border-color: var(--color-success) !important; color: var(--color-text-on-success) !important; }
    .media-action-btn.error-feedback { background-color: var(--color-danger) !important; border-color: var(--color-danger) !important; color: var(--color-text-on-danger) !important; }
    #view-device-content .color-swatch { display:inline-block; width:1em; height:1em; border:1px solid var(--color-border-input); margin-right:0.3em; vertical-align:middle; }
    #view-device-content .color-swatch.secondary-swatch { opacity: 0.8; }
    #view-device-content .color-swatch.inherited { outline: 1px dashed color-mix(in oklch, var(--color-text-muted) 60%, transparent); outline-offset: 1px; box-shadow: inset 0 0 0 1px var(--color-surface); }
    #view-device-content .view-detail-hint { font-style: italic; font-size: 0.9em; color: var(--color-text-muted); margin-left: var(--spacing-xs); }
    #view-device-content .tag-item { background-color: var(--color-background); padding: 2px 5px; border-radius:var(--border-radius); margin-right:3px; font-size:0.9em; display: inline-block; margin-bottom: 2px; }
    #view-device-content ul { padding-inline-start: var(--spacing-md); list-style-type: disc; }
    #view-device-content li { margin-bottom: var(--spacing-xs); }
    #view-device-content h5.custom-view-header { font-size: 1em; font-weight: 600; color: var(--color-secondary-dark); margin-top: var(--spacing-sm); margin-bottom: var(--spacing-xs); padding-bottom: 2px; border-bottom: 1px dotted var(--color-border-input); }
    #view-device-content h5.custom-view-header + ul { margin-top: var(--spacing-xs); }
    .view-actions { margin-top: var(--spacing-md); border-top: 1px solid var(--color-border); padding-top:var(--spacing-sm); }
    .view-actions button { background-color: var(--color-success); border-color: var(--color-success); width: 100%; }
    .view-actions button:hover:not(:disabled) { background-color: var(--color-success-dark); border-color: var(--color-success-dark); }
    
    /* Новые стили для MAC, DNS, Тегов, Цвета */
    .converted-mac-output { background-color: var(--color-background); color: var(--color-text-muted); margin-top: var(--spacing-xs); cursor: copy; text-align: center; }
    #dns-fields-container .dns-field-row { display: flex; gap: var(--spacing-sm); align-items: center; margin-bottom: var(--spacing-xs); }
    #dns-fields-container .dns-field-row select { flex-basis: 40%; }
    #dns-fields-container .dns-field-row input { flex-grow: 1; }
    #dns-fields-container .dns-field-row .remove-item-btn { margin: 0; padding: 0; width: var(--control-height); height: var(--control-height); flex-shrink: 0; background-color: var(--color-danger); border-color: var(--color-danger); }
    .tags-input-container { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-xs); padding: var(--spacing-xs); border: 1px solid var(--color-border-input); border-radius: var(--border-radius); background-color: var(--color-surface); min-height: var(--control-height); }
    .tags-input-container:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 0.2rem var(--color-focus-ring); }
    #tags-display-container { display: contents; } /* Делаем контейнер "прозрачным" для flex */
    .tag-item-ui { display: flex; align-items: center; background-color: var(--color-primary); color: var(--color-surface); padding: 2px 6px; border-radius: var(--border-radius); font-size: 0.85em; }
    .tag-item-ui .remove-tag-btn { background: none; border: none; color: inherit; padding: 0 0 0 4px; margin: 0; font-size: 1.2em; line-height: 1; cursor: pointer; opacity: 0.7; }
    .tag-item-ui .remove-tag-btn:hover { opacity: 1; }
    #markingTagsInput { border: none; background: transparent; padding: var(--spacing-xs); margin: 0; flex-grow: 1; min-width: 120px; height: auto; }
    #markingTagsInput:focus { outline: none; box-shadow: none; }
    .color-picker-wrapper { position: relative; }
    .color-picker-wrapper input[type="color"] { width: var(--control-height); height: var(--control-height); border: 1px solid var(--color-border-input); padding: 2px; cursor: pointer; border-radius: var(--border-radius); }
    
    #custom-fields-container .custom-section-header { font-size: 1em; font-weight: 600; color: var(--color-secondary-dark); padding: var(--spacing-sm) var(--spacing-xs); margin-top: var(--spacing-md); margin-bottom: var(--spacing-xs); border-bottom: 1px dashed var(--color-border-input); display: flex; justify-content: space-between; align-items: center; }
    #custom-fields-container .custom-section-header:first-child { margin-top: var(--spacing-sm); }
    #custom-fields-container .custom-section-header input[type="text"] { flex-grow: 1; font-size: 1em; font-weight: 600; color: var(--color-secondary-dark); border: none; padding: 0; margin-bottom: 0; background-color: transparent; }
    #custom-fields-container .custom-section-header input[type="text"]:focus { outline: 1px dotted var(--color-primary); box-shadow: none; }
    #custom-fields-container .custom-section-header .remove-custom-item-btn, .custom-field .remove-custom-item-btn, .dns-field-row .remove-item-btn { padding: 2px 4px; font-size: 0.75em; background-color: var(--color-danger); border-color: var(--color-danger); color: var(--color-surface); margin: 0 0 0 var(--spacing-sm); line-height: 1; min-width: auto; }
    #custom-fields-container .custom-section-header .remove-custom-item-btn:hover:not(:disabled), .custom-field .remove-custom-item-btn:hover:not(:disabled), .dns-field-row .remove-item-btn:hover:not(:disabled) { background-color: var(--color-danger-dark); border-color: var(--color-danger-dark); }
    .custom-field { display: flex; flex-direction: column; gap: var(--spacing-xs); align-items: stretch; margin-block-end: var(--spacing-sm); padding-left: var(--spacing-sm); }
    .custom-field .form-group { flex: 1 1 auto; margin-block-end: 0; }
    .custom-field input[type="text"] { margin-block-end: 0; }
    .custom-field-actions { display: flex; flex-direction: column; gap: var(--spacing-sm); margin-block-start: var(--spacing-xs); margin-block-end: var(--spacing-md); }
    .custom-field-actions button { background-color: var(--color-success); border-color: var(--color-success); font-size: 0.9em; padding: calc(var(--control-padding-y) - 1px) var(--control-padding-x); margin-block-start: 0; width: 100%; }
    .custom-field-actions button:hover:not(:disabled) { background-color: var(--color-success-dark); border-color: var(--color-success-dark); }
    .custom-field-actions button#add-custom-header-btn { background-color: var(--color-info); border-color: var(--color-info); }
    .custom-field-actions button#add-custom-header-btn:hover:not(:disabled) { background-color: var(--color-info-dark); border-color: var(--color-info-dark); }
    button.add-item-btn { background-color: var(--color-success); border-color: var(--color-success); font-size: 0.9em; padding: var(--control-padding-y) var(--control-padding-x); margin-top: var(--spacing-sm); width: auto; display: inline-block; }
    button.add-item-btn:hover:not(:disabled) { background-color: var(--color-success-dark); border-color: var(--color-success-dark); }
    
    .modal-overlay { position: fixed; inset: 0; z-index: 1000; background-color: oklch(0% 0 0 / 0.5); display: none; align-items: center; justify-content: center; padding: var(--spacing-sm); }
    .modal-content { background-color: var(--color-surface); padding: var(--spacing-md); border: 1px solid var(--color-border); border-radius: var(--border-radius-lg); box-shadow: 0 4px 8px oklch(0% 0 0 / 0.1),0 6px 20px oklch(0% 0 0 / 0.1); position: relative; max-height: 90vh; display: flex; flex-direction: column; }
    .modal-content-large { max-width: 90vw; width: 700px; }
    @media (min-width: 992px) { .modal-content-large { width: 800px; } }
    #ipCalculatorModal .modal-content { max-width: 620px; width: 100%; height: auto; overflow: hidden; }
    .ip-calculator-modal-content { flex-grow: 0; width: 100%; }
    #ipCalculatorIframe { width: 100%; border: none; min-height: 350px; display: block; transition: height 0.15s ease-out; }
    #mediaViewerModal .modal-content { max-width: 90vw; max-height: 90vh; width: auto; height: auto; padding: var(--spacing-sm); }
    #mediaViewerModalTitle { font-size: 1.1em; margin-bottom: var(--spacing-sm); padding-bottom: var(--spacing-xs); }
    .media-viewer-content { display: flex; justify-content: center; align-items: center; overflow: auto; flex-grow: 1; background-color: var(--color-dark); cursor: pointer; }
    .media-viewer-content img, .media-viewer-content video { max-width: 100%; max-height: calc(90vh - 80px); object-fit: contain; display: block; border-radius: var(--border-radius-sm); }
    #help-modal .modal-content { max-width: 700px; }
    #global-settings-modal .modal-content { max-width: 800px; min-width: min(90vw, 600px); }
    .modal-content h2 { margin-block-start: 0; color: var(--color-primary-dark); border-block-end: 1px solid var(--color-border); padding-block-end: var(--spacing-sm); font-size: 1.3em; }
    .modal-close-btn { color: var(--color-text-muted); position: absolute; top: var(--spacing-sm); right: var(--spacing-sm); font-size: 24px; font-weight: bold; line-height: 1; background: none; border: none; padding: 0; cursor: pointer; z-index: 10; }
    .modal-close-btn:hover, .modal-close-btn:focus { color: var(--color-dark); text-decoration: none; }
    #help-content, #global-settings-content { flex-grow: 1; overflow-y: auto; line-height: 1.6; padding-inline-end: var(--spacing-xs); }
    #help-content p, #help-content ul, #help-content h3, #global-settings-content p, #global-settings-content ul, #global-settings-content h3 { margin-block-end: var(--spacing-sm); }
    #help-content h3, #global-settings-content h3 { font-size: 1.1em; color: var(--color-primary); margin-block-start: var(--spacing-md); }
    #help-content ul, #global-settings-content ul { padding-inline-start: var(--spacing-md); } 
    #help-content code { background-color: var(--color-background); padding: 2px 5px; border-radius: var(--border-radius); font-family: 'Courier New', Courier, monospace; font-size: 0.9em; }
    #global-settings-content section { margin-bottom: var(--spacing-lg); padding: var(--spacing-md); border: 1px solid var(--color-border); border-radius: var(--border-radius-lg); background-color: var(--color-light); }
    #global-settings-content section h3 { font-size: 1.15em; color: var(--color-primary-dark); margin-top: 0; margin-bottom: var(--spacing-sm); padding-bottom: var(--spacing-xs); border-bottom: 1px solid var(--color-border-input); }
    #global-settings-content p:not(:last-child) { margin-bottom: var(--spacing-md); }
    #global-settings-content .gs-form-group { margin-bottom: var(--spacing-sm); }
    #global-settings-content .gs-form-group label { font-size: 0.9em; font-weight: normal; margin-bottom: calc(var(--spacing-xs) / 2); }
    #global-settings-content .gs-form-group small { font-size: 0.8em; color: var(--color-text-muted); display: block; margin-top: calc(var(--spacing-xs) / 2); }
    #global-settings-content .gs-form-group #gs-media-root-status { font-weight: bold; display: block; margin-top: var(--spacing-xs); transition: color 0.3s ease; }
    #gs-media-root-status.status-info { color: var(--color-text-muted); }
    #gs-media-root-status.status-ok { color: var(--color-success-dark); } 
    #gs-media-root-status.status-warning { color: var(--color-warning-dark); }
    #gs-media-root-status.status-error { color: var(--color-danger-dark); }
    .gs-list-editor { max-height: 200px; overflow-y: auto; border: 1px solid var(--color-border-input); padding: var(--spacing-sm); border-radius: var(--border-radius); margin-bottom: var(--spacing-sm); background-color: var(--color-surface); }
    .gs-list-item { display: flex; flex-wrap: nowrap; gap: var(--spacing-sm); align-items: center; margin-bottom: var(--spacing-xs); padding: var(--spacing-xs) 0; }
    .gs-list-item input[type="text"] { flex-grow: 1; flex-shrink: 1; min-width: 80px; margin-bottom: 0; font-size: 0.9em; }
    .gs-list-item.vlan-item input[type="text"]:first-child, .gs-list-item.dns-item input[type="text"]:first-child { flex-basis: 55%; }
    .gs-list-item.vlan-item input[type="text"]:nth-child(2), .gs-list-item.dns-item input[type="text"]:nth-child(2) { flex-basis: 30%; }
    .gs-list-item button.remove-gs-item-btn { flex-shrink: 0; padding: var(--spacing-xs) var(--spacing-sm); font-size: 0.9em; background-color: var(--color-danger); border-color: var(--color-danger); color: var(--color-surface); margin: 0; line-height: 1; }
    .gs-list-item button.remove-gs-item-btn:hover:not(:disabled) { background-color: var(--color-danger-dark); border-color: var(--color-danger-dark); }
    #global-settings-modal [class*="gs-add-"], #global-settings-modal #gs-select-media-root-btn { margin-top: var(--spacing-sm); }
    .gs-radio-option { display: flex; align-items: center; gap: var(--spacing-sm); margin-bottom: var(--spacing-xs); }
    .gs-radio-option input[type="radio"] { width: auto; }
    .gs-radio-option input[type="text"] { height: calc(var(--control-height) - 4px); font-size: 0.85em; }
    #global-settings-modal .gs-form-actions { margin-top: var(--spacing-lg); padding-top: var(--spacing-md); border-top: 1px solid var(--color-border); display: flex; justify-content: flex-end; gap: var(--spacing-sm); } 
    #global-settings-modal .gs-form-actions button { min-width: 130px; margin-left: 0; }
    #global-settings-modal .gs-form-actions button.success-feedback { background-color: var(--color-success) !important; border-color: var(--color-success-dark) !important; color: var(--color-text-on-success) !important; }
    #global-settings-modal .gs-form-actions button.error-feedback { background-color: var(--color-danger) !important; border-color: var(--color-danger-dark) !important; color: var(--color-text-on-danger) !important; }
    #gs-cancel-settings-btn { background-color: var(--color-secondary); border-color: var(--color-secondary); }
    #gs-cancel-settings-btn:hover:not(:disabled) { background-color: var(--color-secondary-dark); border-color: var(--color-secondary-dark); }
    #welcome-view { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--spacing-lg); color: var(--color-text-muted); height: 100%; }
    #welcome-view h3 { border-block-end: none; font-size: 1.3em; color: var(--color-primary); } 
    #welcome-view p { font-size: 1em; } 
    #device-list p:only-child { text-align: center; color: var(--color-text-muted); margin-block-start: var(--spacing-md); font-style: italic; padding: var(--spacing-sm); }
    .device-item:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; box-shadow: 0 0 0 0.2rem var(--color-focus-ring); }
    @media (min-width: 769px) { html { --font-size-base: 14px; } input[type="text"], input[type="email"], input[type="password"], input[type="date"], input[type="number"], select { padding-inline: var(--control-padding-x); padding-block: 0; } button { padding: var(--control-padding-y) var(--control-padding-x); font-size: 0.95em; } textarea {padding: var(--control-padding-y) var(--control-padding-x); } .mode-switcher-container { flex-direction: row; align-items: center; gap: var(--spacing-sm); } .mode-toggle-group { width: auto; } .mode-btn { flex-grow: 0; } .pane > h3 { font-size: 1.2em; margin-block-end: var(--spacing-md); padding-block-end: var(--spacing-sm); } .pane h4 { font-size: 1.1em; } #storage-section h5 { font-size: 1em; } .device-item { min-height: 38px; } .orphan-cameras-header h4 { font-size: 0.95em; } .tree-toggle-btn { padding: 0 var(--spacing-sm) 0 var(--spacing-xs); width: 20px; } .tree-toggle-btn-spacer { width: 20px; } .device-type-icon { font-size: 1.1em; width: 20px; } .device-item-name { font-size: 0.95em; } .device-item button { padding: 3px 6px; font-size: 0.8em; min-width: 28px; } .form-actions { flex-direction: row; justify-content: flex-end; } .form-actions button { min-width: 120px; } #view-details-area { padding: var(--spacing-md); } #view-details-area h3 { font-size: 1.4em; padding-block-end: var(--spacing-sm); } #view-device-content { font-size: 0.95em; } #view-device-content .view-section h4 { font-size: 1.1em; } #view-device-content .view-detail-item { font-size: 0.9em; } #view-device-content .view-detail-label { min-width: 150px; } .view-actions button { width: auto; }  .custom-field { flex-direction: row; gap: var(--spacing-sm); align-items: flex-end; padding-left: var(--spacing-md); } .custom-field-actions { flex-direction: row; } .custom-field-actions button { width: auto; } .modal-overlay { padding: var(--spacing-md); }  .modal-content { padding: var(--spacing-lg); } .modal-content h2 { font-size: 1.5em; } #help-content { font-size: 0.95em; padding-inline-end: var(--spacing-sm); } #help-content ul { padding-inline-start: var(--spacing-lg); } .modal-close-btn { top: var(--spacing-md); right: var(--spacing-md); font-size: 28px; } #global-settings-modal .gs-form-actions { justify-content: flex-end; }  #welcome-view { padding: var(--spacing-xl); } #welcome-view h3 { font-size: 1.5em; } #welcome-view p { font-size: 1.1em; } #device-list p:only-child { margin-block-start: var(--spacing-lg); padding: var(--spacing-md); } }
}

@layer utilities {
    .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }
    .placeholder-text { text-align: center; color: var(--color-text-muted); margin-block-start: var(--spacing-lg); font-style: italic; padding: var(--spacing-md); }
    .is-hidden { display: none !important; }
}
/* 📁КОНЕЦ ФАЙЛА style.css v2.37 */