:root {
    --ui-bg:           #232323; 
    --ui-bg-deep:      #181818; 
    --ui-bg-input:     #141414; 
    --ui-bg-hover:     #333333; 
    
    --ui-border:       #3d3d3d;
    --ui-border-focus: #48827e;
    --ui-danger: #a04444;

    --ui-danger-text:  #fc8181;
    --ui-wire-hover:   rgba(255, 255, 255, 0.15);
    --ui-warn:         #d98c5f;
    --ui-live:         #65dcb4;
    --accent2:         var(--ui-live);
    
    --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);

    --ui-brand-mark:   #686969;
    --ui-checker-a:    #ececec;
    --ui-checker-b:    #cfcfcf;
    
    --ui-font:         system-ui, -apple-system, 'Segoe UI', sans-serif;
    --work-font:       'Courier New', Courier, monospace;
    --ui-font-code:    ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', Consolas, 'SF Mono', Menlo, 'Liberation Mono', monospace;
    --ui-text:         #d4d4d4;
    --ui-text-dim:     #b3b3b3;
    --ui-text-muted:   #969696;
    --ui-accent-text:  #6fb3ad;
    
    --ui-shadow:       0 8px 24px rgba(0, 0, 0, 0.6);
    --node-module-h:   50px;
    --ui-shadow-sm:    0 2px 8px rgba(0, 0, 0, 0.4);

    --accent: var(--ui-accent);
    --bg:     var(--ui-bg);
}

a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
[role="option"]:focus-visible,
[contenteditable="true"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
    outline: 2px solid var(--ui-border-focus);
    outline-offset: 2px;
}

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-sm) !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.tbtn-danger {
    color:        var(--ui-danger-text) !important;
    border-color: var(--ui-danger) !important;
}
.tbtn.tbtn-danger:hover {
    background:   color-mix(in srgb, var(--ui-danger) 24%, transparent) !important;
}

.tbtn-blue {
    background:   var(--ui-accent) !important;
    border-color: var(--ui-accent) !important;
    color:        #fff !important;
    font-weight:  600 !important;
    box-shadow:   none !important;
}
.tbtn-blue:hover {
    background:   var(--ui-accent-hover) !important;
    border-color: var(--ui-accent-hover) !important;
}

.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(--work-font) !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 {
    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) !important; font-variant-numeric: tabular-nums !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) !important; font-variant-numeric: tabular-nums !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-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); }

.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, .tl-split, .tl-vadiv {
    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, .tl-split::before, .tl-vadiv::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, .tl-split::after, .tl-vadiv-grip::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,
.tl-split:hover, .tl-split.dragging, .tl-vadiv:hover, .tl-vadiv.dragging {
    background: var(--ui-accent) !important;
}
#analytics-resizer:hover::after, #analytics-resizer.dragging::after,
.tl-split:hover::after, .tl-split.dragging::after,
.tl-vadiv:hover .tl-vadiv-grip::after, .tl-vadiv.dragging .tl-vadiv-grip::after {
    color: #fff !important;
}

.a4 {
    border-radius: 0 !important;
    box-shadow:    0 2px 16px rgba(0, 0, 0, 0.3) !important;
}

.a4-scroll {
    background: var(--ui-bg-deep) !important;
}

.right-col {
    background: var(--ui-bg) !important;
}

.imgcanvas-viewport {
    min-height: 280px !important;
}

.imgcanvas-toolbar:not(.prm-bar) {
    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;
}

.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; }
.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; }
.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; }
.rep-left                               { background: #181818 !important; }
.rep-script-content                     { background: var(--ui-bg-deep) !important; }
.rep-right                              { background: var(--ui-bg-deep) !important; }

.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;
}

.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; }
.an-col-stats .an-runtime, 
.an-col-stats div[style*="font-size:18px"] {
    color: var(--ui-accent-text) !important;
}

input, select, textarea, button { font-family: var(--ui-font); }
kbd { font-family: var(--ui-font); font-variant-numeric: tabular-nums; }
code, pre, samp { font-family: var(--ui-font-code); }

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; }

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

select { color-scheme: dark; }
select option {
    background-color: var(--ui-bg-deep);
    color: var(--ui-text);
}

.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 {
    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;
}

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

button:not(:disabled):not([aria-disabled="true"]):active,
[role="button"]:not([aria-disabled="true"]):active {
    transform:  scale(0.97);
    filter:     brightness(0.88);
    transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
    button:not(:disabled):not([aria-disabled="true"]):active,
    [role="button"]:not([aria-disabled="true"]):active { transform: none; }
}

.ds-avatar-img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit;
    background: var(--ui-bg-hover); pointer-events: none; user-select: none; -webkit-user-drag: none;
}
.acc-btn, .acc-avatar, .acc-av-prev, .ds-ava, .tm-av, .hs-acc-ava { position: relative; overflow: hidden; }