/* ============================================================
   theme.css — единая тема всего приложения
   РАСПОЛОЖЕНИЕ: корень проекта, рядом с index.html
   
   Подключение в index.html (уже есть):
   <link rel="stylesheet" href="theme.css">
   
   За основу взят стиль главного экрана (homeScreen.css).
   Ноды на холсте (.tl-block, .block-*) НЕ затрагиваются.
   ============================================================ */

/* ── CSS-переменные (Professional Slate Teal Style) ─────────────────────────────────── */
:root {
    /* Основные фоны - матовые, нейтральные */
    --ui-bg:           #232323; 
    --ui-bg-deep:      #181818; 
    --ui-bg-input:     #141414; 
    --ui-bg-hover:     #333333; 
    
    /* Границы: делаем их заметными для разделения окон */
    --ui-border:       #3d3d3d;
    --ui-border-focus: #48827e; /* Серо-голубо-зеленый фокус */
    /* ⚡ A3: цвет опасного действия. Раньше жил литералом --aig-danger внутри
       aiImageNode; при выносе стилей стало очевидно, что токена уровня темы
       для него нет вовсе. Заведён здесь, чтобы такие цвета не расползались
       локальными копиями по панелям. */
    --ui-danger: #a04444;
    
    /* Скругления - строгие */
    --ui-radius:       6px;
    --ui-radius-sm:    4px;
    --ui-radius-xs:    2px;
    
    /* АКЦЕНТНЫЙ ЦВЕТ: Благородный серо-голубо-зеленый */
    --ui-accent:       #48827e; 
    --ui-accent-grad:  #48827e; 
    --ui-accent-hover: #569e99;
    --ui-accent-glow:  rgba(72, 130, 126, 0.3);

    /* ⚡ v154. ФИРМЕННЫЙ ЗНАК. Цвет задан в исходнике assets/d-logo.svg
       (Денис: «специально в цвет покрасил нужный») — вынесен сюда токеном,
       чтобы разметка знака оставалась бесцветной (currentColor) и один и тот
       же знак мог жить и в топбаре, и белым на обложке стартового экрана. */
    --ui-brand-mark:   #686969;
    
    /* Шрифты и текст */
    --ui-font:         system-ui, -apple-system, 'Segoe UI', sans-serif;
    --ui-font-mono:    'Courier New', Courier, monospace;
    --ui-text:         #cccccc; 
    --ui-text-dim:     #999999;
    --ui-text-muted:   #666666;
    
    /* Тени */
    --ui-shadow:       0 8px 24px rgba(0, 0, 0, 0.6);
    --ui-shadow-sm:    0 2px 8px rgba(0, 0, 0, 0.4);

    /* Render-панель использует --accent и --bg */
    --accent: var(--ui-accent);
    --bg:     var(--ui-bg);
}

/* ════════════════════════════════════════════════════════════
   ГЛОБАЛЬНЫЙ КАРКАС И ФОНЫ
   ════════════════════════════════════════════════════════════ */
html, body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    overflow: hidden !important;
    background: var(--ui-bg-deep) !important;
}

.nle {
    display: flex !important;
    flex-direction: column !important;
    height: 100vh !important;
    width: 100vw !important;
    overflow: hidden !important;
    background: var(--ui-bg) !important;
    border: none !important;
    border-radius: 0 !important;
}

.workspace {
    display: flex !important;
    flex: 1 1 0 !important; /* ⚡ ЗАСТАВЛЯЕТ РАБОЧУЮ ОБЛАСТЬ ЗАНИМАТЬ ВСЁ МЕСТО */
    min-height: 0 !important;
    width: 100% !important;
}

/* ════════════════════════════════════════════════════════════
   ТОПБАР И ШАПКИ
   ════════════════════════════════════════════════════════════ */

.topbar {
    font-family:   var(--ui-font) !important;
    background:    var(--ui-bg-deep) !important;
    border-bottom: 1px solid var(--ui-border) !important;
}

.canvas-header {
    font-family:   var(--ui-font) !important;
    background:    var(--ui-bg-deep) !important;
    border-bottom: 1px solid var(--ui-border) !important;
    color:         var(--ui-text-dim) !important;
}

.label-row {
    font-family:   var(--ui-font) !important;
    background:    var(--ui-bg-deep) !important;
    border-bottom: 1px solid var(--ui-border) !important;
    color:         var(--ui-text-muted) !important;
}

#save-indicator {
    font-family: var(--ui-font) !important;
}


/* ════════════════════════════════════════════════════════════
   КНОПКИ ТОПБАРА
   ════════════════════════════════════════════════════════════ */

.tbtn {
    font-family:   var(--ui-font) !important;
    font-size:     12px !important;
    background:    rgba(255, 255, 255, 0.06) !important;
    border:        1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-xs) !important;
    color:         var(--ui-text) !important;
    transition:    background 0.14s, border-color 0.14s !important;
}
.tbtn:hover {
    background:   rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
}

.tbtn-blue {
    background:   var(--ui-accent-grad) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color:        #fff !important;
    font-weight:  600 !important;
    box-shadow:   0 2px 10px var(--ui-accent-glow) !important;
}
.tbtn-blue:hover {
    background: linear-gradient(180deg, var(--ui-accent-hover) 0%, #569e99 100%) !important;
}


/* ════════════════════════════════════════════════════════════
   МОДАЛКА ИМПОРТА ТЕКСТА (.modal-overlay > .modal)
   ════════════════════════════════════════════════════════════ */

.modal-overlay {
    background:              rgba(0, 0, 0, 0.75) !important;
    backdrop-filter:         blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
}

.modal {
    font-family:   var(--ui-font) !important;
    background:    var(--ui-bg) !important;
    border:        1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius) !important;
    box-shadow:    var(--ui-shadow) !important;
    color:         var(--ui-text) !important;
    padding:       28px 32px !important;
}

.modal h3 {
    font-size:     17px !important;
    font-weight:   700 !important;
    color:         #fff !important;
    margin-bottom: 20px !important;
}

.modal .modal-hint {
    font-size:     12px !important;
    color:         var(--ui-text-dim) !important;
    margin-bottom: 14px !important;
}

.modal textarea {
    background:    var(--ui-bg-input) !important;
    border:        1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-sm) !important;
    color:         var(--ui-text) !important;
    font-family:   var(--ui-font-mono) !important;
    font-size:     13px !important;
    line-height:   1.6 !important;
    padding:       12px 14px !important;
    resize:        vertical !important;
    transition:    border-color 0.15s !important;
}
.modal textarea:focus {
    outline:      none !important;
    border-color: var(--ui-border-focus) !important;
    background:   rgba(72, 130, 126, 0.04) !important;
}

.modal-actions .tbtn {
    padding:     8px 18px !important;
    font-size:   13px !important;
    font-weight: 500 !important;
}


/* ════════════════════════════════════════════════════════════
   МОДАЛКА НАСТРОЕК (#settings-modal > .settings-window)
   ════════════════════════════════════════════════════════════ */

#settings-modal {
    background:              rgba(0, 0, 0, 0.75) !important;
    backdrop-filter:         blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
}

.settings-window {
    font-family:   var(--ui-font) !important;
    background:    var(--ui-bg) !important;
    border:        1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius) !important;
    box-shadow:    var(--ui-shadow) !important;
}

.settings-header {
    border-bottom: 1px solid var(--ui-border) !important;
}

.settings-title {
    font-family:    var(--ui-font) !important;
    font-size:      14px !important;
    font-weight:    700 !important;
    color:          var(--ui-text) !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
}

.settings-close {
    color:      var(--ui-text-dim) !important;
    transition: color 0.15s, background 0.15s !important;
}
.settings-close:hover {
    color:       #fff !important;
    background:  rgba(255, 255, 255, 0.08) !important;
}

.settings-section-label {
    font-family:   var(--ui-font) !important;
    color:         var(--ui-text-muted) !important;
    border-bottom: 1px solid var(--ui-border) !important;
}

.sf-table       { font-family: var(--ui-font) !important; }
.sf-table th    { font-family: var(--ui-font) !important; color: var(--ui-text-muted) !important; border-bottom: 1px solid var(--ui-border) !important; }
.sf-table td    { border-bottom: 1px solid rgba(255,255,255,0.04) !important; }
.sf-ctx         { color: var(--ui-text-dim) !important; }
.sf-result      { color: var(--ui-text) !important; }

.hotkey-row  { border-bottom: 1px solid rgba(255,255,255,0.04) !important; }
.hotkey-desc { font-family: var(--ui-font) !important; color: var(--ui-text-dim) !important; }

.kbd {
    font-family:   var(--ui-font-mono) !important;
    background:    rgba(255, 255, 255, 0.07) !important;
    border:        1px solid rgba(255, 255, 255, 0.14) !important;
    border-bottom: 2px solid rgba(0, 0, 0, 0.25) !important;
    border-radius: 5px !important;
    color:         var(--ui-text) !important;
    font-size:     10px !important;
}

.settings-footer    { border-top: 1px solid var(--ui-border) !important; }
.settings-copyright { font-family: var(--ui-font-mono) !important; color: var(--ui-text-muted) !important; }


/* ════════════════════════════════════════════════════════════
   КОНТЕКСТНОЕ МЕНЮ
   ════════════════════════════════════════════════════════════ */

.context-menu {
    font-family:   var(--ui-font) !important;
    background:    var(--ui-bg) !important;
    border:        1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-sm) !important;
    box-shadow:    var(--ui-shadow) !important;
    padding:       5px !important;
}

.context-menu-item {
    font-family:   var(--ui-font) !important;
    color:         var(--ui-text) !important;
    border-radius: var(--ui-radius-xs) !important;
    padding:       8px 13px !important;
    transition:    background 0.1s !important;
}
.context-menu-item:hover {
    background: rgba(72, 130, 126, 0.15) !important;
    color:      #fff !important;
}

.menu-sep  { background: var(--ui-border) !important; }
.menu-hint { color: var(--ui-text-muted) !important; }


/* ════════════════════════════════════════════════════════════
   AI-НАСТРОЙКИ — inline стили, бьём через !important по ID
   ════════════════════════════════════════════════════════════ */

#ai-settings-modal {
    backdrop-filter:         blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
}

#ai-settings-modal > div {
    font-family:   var(--ui-font) !important;
    background:    var(--ui-bg) !important;
    border:        1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius) !important;
    box-shadow:    var(--ui-shadow) !important;
    color:         var(--ui-text) !important;
}

#ai-settings-modal h2     { font-family: var(--ui-font) !important; color: #fff !important; }
#ai-settings-modal label  { font-family: var(--ui-font) !important; color: var(--ui-text-dim) !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; }

#ai-settings-modal input,
#ai-settings-modal select {
    font-family:   var(--ui-font) !important;
    background:    var(--ui-bg-input) !important;
    border:        1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-sm) !important;
    color:         var(--ui-text) !important;
}
#ai-settings-modal input:focus,
#ai-settings-modal select:focus {
    outline:      none !important;
    border-color: var(--ui-border-focus) !important;
}

#ai-settings-close       { color: var(--ui-text-dim) !important; }
#ai-settings-close:hover { color: #fff !important; }


/* ════════════════════════════════════════════════════════════
   АНКЕТА ПЕРСОНАЖА
   ════════════════════════════════════════════════════════════ */

#char-profile-overlay {
    background:              rgba(0, 0, 0, 0.75) !important;
    backdrop-filter:         blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
}

.cp-modal {
    font-family:   var(--ui-font) !important;
    background:    var(--ui-bg) !important;
    border:        1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius) !important;
    box-shadow:    var(--ui-shadow) !important;
}

.cp-sidebar {
    background:   rgba(0, 0, 0, 0.25) !important;
    border-right: 1px solid var(--ui-border) !important;
}
.cp-sidebar-group-label {
    font-family:   var(--ui-font) !important;
    color:         var(--ui-text-muted) !important;
    border-bottom: 1px solid var(--ui-border) !important;
}
.cp-sidebar-name {
    font-family: var(--ui-font) !important;
    color:       var(--ui-text-dim) !important;
}

.cp-name { font-family: var(--ui-font) !important; }

.cp-section-label {
    font-family:   var(--ui-font) !important;
    color:         var(--ui-text-muted) !important;
    border-bottom: 1px solid var(--ui-border) !important;
}

.cp-textarea {
    font-family:   var(--ui-font) !important;
    background:    var(--ui-bg-input) !important;
    border:        1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-sm) !important;
    color:         var(--ui-text) !important;
}
.cp-textarea:focus { border-color: var(--ui-border-focus) !important; background: rgba(72, 130, 126, 0.03) !important; }

.cp-input {
    font-family:   var(--ui-font) !important;
    background:    var(--ui-bg-input) !important;
    border:        1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-xs) !important;
    color:         var(--ui-text) !important;
}
.cp-input:focus { border-color: var(--ui-border-focus) !important; }

.cp-select,
.cp-select option,
.cp-rel-select option {
    font-family:   var(--ui-font) !important;
    background:    var(--ui-bg-input) !important;
    border:        1px solid var(--ui-border) !important;
    color:         var(--ui-text) !important;
    border-radius: var(--ui-radius-xs) !important;
}

.cp-nav-btn {
    font-family:   var(--ui-font) !important;
    background:    rgba(255,255,255,0.06) !important;
    border:        1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-xs) !important;
    color:         var(--ui-text) !important;
}
.cp-nav-pos  { font-family: var(--ui-font) !important; color: var(--ui-text-muted) !important; }

.cp-close        { color: var(--ui-text-dim) !important; }
.cp-close:hover  { color: #fff !important; background: rgba(255,255,255,0.08) !important; }

.cp-merge-btn {
    font-family:   var(--ui-font) !important;
    background:    rgba(255,255,255,0.05) !important;
    border:        1px solid var(--ui-border) !important;
    color:         var(--ui-text-dim) !important;
    border-radius: var(--ui-radius-xs) !important;
}

.cp-gender-btn {
    border:        1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-xs) !important;
    color:         var(--ui-text-dim) !important;
}
.cp-gender-btn:hover { border-color: rgba(255,255,255,0.35) !important; color: #fff !important; }

.cp-rel-label  { font-family: var(--ui-font) !important; }
.cp-rel-empty  { font-family: var(--ui-font) !important; color: var(--ui-text-muted) !important; }
.cp-rel-chip   { font-family: var(--ui-font) !important; }
.cp-trait-chip { font-family: var(--ui-font) !important; }

/* Диалог слияния персонажей */
#cp-merge-overlay > div {
    font-family:   var(--ui-font) !important;
    background:    var(--ui-bg) !important;
    border:        1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius) !important;
    box-shadow:    var(--ui-shadow) !important;
}
#cp-merge-overlay select,
#cp-merge-overlay input[type="text"] {
    font-family:   var(--ui-font) !important;
    background:    var(--ui-bg-input) !important;
    border:        1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-sm) !important;
    color:         var(--ui-text) !important;
}
#mg-cancel {
    font-family:   var(--ui-font) !important;
    background:    rgba(255,255,255,0.05) !important;
    border:        1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-sm) !important;
    color:         var(--ui-text-dim) !important;
    transition:    background 0.14s !important;
}
#mg-cancel:hover { background: rgba(255,255,255,0.1) !important; }


/* ════════════════════════════════════════════════════════════
   РЕНДЕР-ПАНЕЛЬ — только шрифт
   ════════════════════════════════════════════════════════════ */

#render-export-panel,
.rep-tab, .rep-input, .rep-fps-btn, .rep-label, .rep-toggle {
    font-family: var(--ui-font) !important;
}
#render-export-panel { --accent: var(--ui-accent); }


/* ════════════════════════════════════════════════════════════
   АНИМАТИК — только шрифт
   ════════════════════════════════════════════════════════════ */

.imgcanvas-toolbar,
.imgcanvas-toolbar-title,
.imgtool-btn,
.imgtool-clear-btn {
    font-family: var(--ui-font) !important;
}


/* ════════════════════════════════════════════════════════════
   СКРОЛЛБАРЫ
   ════════════════════════════════════════════════════════════ */

* {
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
}
*::-webkit-scrollbar       { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.18); }


/* ════════════════════════════════════════════════════════════
   РЕСАЙЗЕРЫ — тонкие (1px) без дыр, с невидимой зоной захвата
   ════════════════════════════════════════════════════════════ */

/* ── Вертикальные ресайзеры (между панелями) ─────── */
.resizer, .an-sep {
    width:       1px !important;
    background:  var(--ui-border) !important; /* Сам ресайзер выглядит как граница */
    cursor:      col-resize !important;
    z-index:     100 !important;
    position:    relative !important;
    flex-shrink: 0 !important;
    border:      none !important;
    box-shadow:  none !important;
    transition:  background 0.15s !important;
}

/* Невидимая широкая зона (хитбокс), чтобы легко хватать мышкой */
.resizer::before, .an-sep::before {
    content:       '' !important;
    position:      absolute !important;
    top:           0 !important;
    bottom:        0 !important;
    left:          -4px !important;
    right:         -4px !important;
    background:    transparent !important;
    z-index:       10 !important;
}

/* Точки по центру */
.resizer::after, .an-sep::after {
    content:        '⋮' !important;
    position:       absolute !important;
    top:            50% !important;
    left:           50% !important;
    transform:      translate(-50%, -50%) !important;
    font-size:      12px !important;
    color:          var(--ui-text-muted) !important;
    line-height:    1 !important;
    pointer-events: none !important;
    transition:     color 0.15s !important;
}

/* Ховер — подсвечиваем ресайзер акцентным цветом */
.resizer:hover, .resizer.dragging,
.an-sep:hover, .an-sep.dragging {
    background: var(--ui-accent) !important;
}

.resizer:hover::after, .resizer.dragging::after,
.an-sep:hover::after, .an-sep.dragging::after {
    color: #fff !important;
}

/* ── Горизонтальный ресайзер (над аналитикой) ─ */
#analytics-resizer {
    height:      1px !important;
    width:       auto !important;
    background:  var(--ui-border) !important;
    cursor:      row-resize !important;
    z-index:     100 !important;
    position:    relative !important;
    flex-shrink: 0 !important;
    border:      none !important;
    transition:  background 0.15s !important;
}

#analytics-resizer::before {
    content:    '' !important;
    position:   absolute !important;
    left:       0 !important;
    right:      0 !important;
    top:        -4px !important;
    bottom:     -4px !important;
    background: transparent !important;
    z-index:    10 !important;
}

#analytics-resizer::after {
    content:        '⋯' !important;
    position:       absolute !important;
    top:            50% !important;
    left:           50% !important;
    transform:      translate(-50%, -50%) !important;
    font-size:      14px !important;
    color:          var(--ui-text-muted) !important;
    line-height:    1 !important;
    pointer-events: none !important;
    transition:     color 0.15s !important;
}

#analytics-resizer:hover, #analytics-resizer.dragging {
    background: var(--ui-accent) !important;
}
#analytics-resizer:hover::after, #analytics-resizer.dragging::after {
    color: #fff !important;
}


/* ════════════════════════════════════════════════════════════
   ФИКС БЕЛЫХ УГЛОВ И ВОЗВРАТ ВНЕШНЕЙ РАМКИ
   ════════════════════════════════════════════════════════════ */

/* Убираем скругление у белой бумаги А4 —
   оно давало белые уголки на фоне серого #999 */
.a4 {
    border-radius: 0 !important;
    box-shadow:    0 2px 16px rgba(0, 0, 0, 0.3) !important;
}

/* Меняем контрастный серый #999 на тёмный */
.a4-scroll {
    background: var(--ui-bg-deep) !important;
}

/* right-col имел кремовый #f0ece6 — заменяем на тёмный */
.right-col {
    background: var(--ui-bg) !important;
}


/* ════════════════════════════════════════════════════════════
   АНИМАТИК — защита от схлопывания viewport
   ════════════════════════════════════════════════════════════ */

/* Гарантируем минимальную высоту области канваса */
.imgcanvas-viewport {
    min-height: 280px !important;
}

/* Тулбар не переносится на вторую строку принудительно.
   overflow-x убран — он обрезает попап размера кисти */
.imgcanvas-toolbar {
    flex-wrap: nowrap !important;
    overflow: visible !important;
}


/* ════════════════════════════════════════════════════════════
   ЕДИНЫЙ ФОН — ПРИВЯЗКА К ПЕРЕМЕННЫМ
   ════════════════════════════════════════════════════════════ */

/* ── Топбар и шапки ─────────────────────────────────────────── */
.topbar, .canvas-header, .label-row     { background: var(--ui-bg-deep) !important; }

/* ── Нодовый холст (Точечная сетка) ─────────────────────────── */
.node-workspace { 
    background-color: #1c1c1c !important;
    background-image: radial-gradient(rgba(255, 255, 255, 0.15) 1px, transparent 1px) !important;
    background-size: 40px 40px !important;
    background-position: center center !important;
}

/* ── Правая колонка и А4 ────────────────────────────────────── */
.right-col                              { background: var(--ui-bg) !important; }
.a4-scroll                              { background: var(--ui-bg-deep) !important; }

/* ── Главный экран ──────────────────────────────────────────── */
#home-screen                            { background: rgba(0,0,0,0.85) !important; }
.hs-window                              { background: var(--ui-bg) !important; }
/* ⚡ v155. background-COLOR, а не шорткат: шорткат сбрасывает
   background-image в none, и с !important он убивал обложку
   стартового экрана (theme.css грузится ПОСЛЕ homeScreen.css). */
.hs-sidebar                             { background-color: var(--ui-bg-deep) !important; }
.hs-main                                { background: var(--ui-bg) !important; }
.hs-list                                { background: var(--ui-bg) !important; }
.hs-card:hover                          { background: var(--ui-bg-hover) !important; }

/* ── Модалки ────────────────────────────────────────────────── */
.modal                                  { background: var(--ui-bg) !important; }
.settings-window                        { background: var(--ui-bg) !important; }
#ai-settings-modal > div                { background: var(--ui-bg) !important; }

/* ── Анкета персонажа ───────────────────────────────────────── */
.cp-modal                               { background: var(--ui-bg) !important; }
.cp-sidebar                             { background: var(--ui-bg-deep) !important; }
.cp-body, .cp-main                      { background: var(--ui-bg) !important; }
#cp-merge-overlay > div                 { background: var(--ui-bg) !important; }

/* ── Контекстное меню ───────────────────────────────────────── */
.context-menu, .submenu                 { background: var(--ui-bg) !important; }

/* ── Аниматик (раскадровка) ─────────────────────────────────── */
#image-editor-workspace                 { background: var(--ui-bg) !important; }
.imgcanvas-toolbar                      { background: var(--ui-bg-deep) !important; }
/* 5. Фон под холстом раскадровки #181818 */
.imgcanvas-viewport                     { background: var(--ui-bg-deep) !important; }
.imgcanvas-timeline                     { background: var(--ui-bg-deep) !important; }
.imgframe-thumb                         { background: var(--ui-bg-input) !important; }
.imgcanvas-right                        { background: var(--ui-bg-deep) !important; }

/* ── Рендер-панель ──────────────────────────────────────────── */
#render-export-panel                    { background: var(--ui-bg) !important; }
/* 1. Черный фон за аниматиком */
.rep-left                               { background: #181818 !important; }
/* Темный фон за листом сценария (#181818) */
.rep-script-content                     { background: var(--ui-bg-deep) !important; }
.rep-right                              { background: var(--ui-bg-deep) !important; }

/* 2. Стили для табов (режимов) в рендер-ноде */
.rep-tab {
    background: transparent !important; 
    color: var(--ui-text-dim) !important;
    border: 1px solid transparent !important;
    border-radius: var(--ui-radius-sm) !important;
    cursor: pointer !important; 
    transition: all 0.15s ease !important; 
}

/* Эффект при наведении на НЕАКТИВНЫЙ таб */
.rep-tab:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    color: var(--ui-text) !important;
}

/* ⚡ АКТИВНЫЙ ТАБ — скрипт использует класс "on" */
.rep-tab.on,
.rep-tab.on:hover {
    background: rgba(255, 255, 255, 0.12) !important; 
    color: #ffffff !important; 
    border: 1px solid rgba(255, 255, 255, 0.2) !important; 
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2) !important; 
}

/* Принудительно красим текст внутри активного таба */
.rep-tab.on * {
    color: #ffffff !important;
}


/* ── Аналитика ──────────────────────────────────────────────── */
#analytics-panel                        { background: var(--ui-bg-deep) !important; }
/* 3. Одинаковый акцентный цвет на оба хронометража */
.an-col-stats .an-runtime, 
.an-col-stats div[style*="font-size:18px"] {
    color: var(--ui-accent) !important;
}

/* ── Поля ввода везде ───────────────────────────────────────── */
input, select, textarea,
.cp-input, .cp-select, .cp-textarea,
.rep-input, #ai-settings-modal input,
#ai-settings-modal select {
    background: var(--ui-bg-input) !important;
}

.cp-select option,
.cp-rel-select option,
#ai-settings-modal select option        { background: var(--ui-bg-deep) !important; }

/* ════════════════════════════════════════════════════════════
   ЖЕСТКИЕ ГРАНИЦЫ ПАНЕЛЕЙ (КАК В PREMIERE PRO)
   ════════════════════════════════════════════════════════════ */

/* Убеждаемся, что у топбара есть жесткая нижняя линия */
.topbar {
    border-bottom: 1px solid var(--ui-border) !important;
}

/* Добавляем обводку для панели инструментов аниматика */
.imgcanvas-toolbar {
    border-bottom: 1px solid var(--ui-border) !important;
}

/* Отделяем таймлайн под аниматиком сверху */
.imgcanvas-timeline {
    border-top: 1px solid var(--ui-border) !important;
}

/* ════════════════════════════════════════════════════════════
   ПОДВАЛ (BOTTOMBAR)
   ════════════════════════════════════════════════════════════ */
.bottombar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 4px 14px !important;
    background: var(--ui-bg-input) !important; /* Слегка темнее, чем панель аналитики */
    border-top: 1px solid var(--ui-border) !important;
    font-family: var(--ui-font) !important;
    color: var(--ui-text-muted) !important;
    font-size: 10px !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    flex-shrink: 0 !important; /* Гарантирует, что блок не будет сжиматься */
    z-index: 100 !important;
}

/* ════════════════════════════════════════════════════════════
   ФИКС МИГАНИЯ АНАЛИТИКИ В АНИМАТИКЕ
   Полноценный фикс требует JS (animaticTimeline.js).
   Это CSS-смягчение: панель не прыгает резко.
   ════════════════════════════════════════════════════════════ */

#analytics-panel {
    transition: none !important;
    min-height: 170px !important;
}