/* Settings → Video Editor group (desktop only). Markup: editor.html
   #settings-nav-ve; panels are built by js/settings-video-editor.js. */

.settings-nav-group { display: flex; flex-direction: column; gap: 1px; }

.settings-nav-group-head {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 31px;
    padding: 7px 10px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--sl-text-3, #71717a);
    font-family: var(--sl-font-ui, inherit);
    font-size: 12px;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}
.settings-nav-group-head:hover { background: var(--sl-bg-hover, rgba(255, 255, 255, 0.04)); color: var(--sl-text-1, #e4e4e7); }
.settings-nav-group-head svg { flex-shrink: 0; width: 15px; height: 15px; opacity: 0.45; }
.settings-nav-group-head .settings-nav-group-caret { margin-left: auto; width: 12px; height: 12px; transition: transform 0.15s ease; }
.settings-nav-group.is-collapsed .settings-nav-group-caret { transform: rotate(-90deg); }
.settings-nav-group.has-active .settings-nav-group-head { color: var(--sl-text-1, #e4e4e7); }

.settings-nav-group-items { display: flex; flex-direction: column; gap: 1px; }
.settings-nav-group.is-collapsed .settings-nav-group-items { display: none; }

#settings-overlay .settings-nav-item.settings-nav-sub,
#home-settings-container .settings-nav-item.settings-nav-sub,
.settings-nav-item.settings-nav-sub {
    min-height: 27px;
    padding: 5px 10px 5px 34px;
    font-size: 11.5px;
}
.settings-nav-item.settings-nav-sub.ve-search-hit { color: var(--sl-text-1, #e4e4e7); }
.settings-nav-item.settings-nav-sub.ve-search-hit::after {
    content: '';
    width: 5px; height: 5px; border-radius: 50%;
    margin-left: auto;
    background: var(--sl-accent, var(--accent));
}

/* Panels */
.ve-status { font-size: 12px; color: var(--sl-text-3, var(--text-secondary)); }
.ve-status.is-ok { color: var(--sl-success, var(--success)); }
.ve-status.is-error { color: var(--sl-error, #ef4444); }
.ve-key-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; max-width: 520px; }
.ve-key-row .setting-input { flex: 1; min-width: 180px; }
.ve-list { display: flex; flex-direction: column; gap: 6px; max-width: 560px; }
.ve-list-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--sl-bg-card, rgba(255, 255, 255, 0.03));
}
.ve-list-row .ve-list-main { flex: 1; min-width: 0; }
.ve-list-row .ve-list-title { font-size: 12.5px; font-weight: 600; color: var(--sl-text-1, var(--text-primary)); }
.ve-list-row .ve-list-desc { font-size: 11px; color: var(--sl-text-3, var(--text-secondary)); margin-top: 2px; }
.ve-list-empty { font-size: 12px; color: var(--sl-text-3, var(--text-secondary)); }
.ve-inline { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ve-inline .setting-input { width: 96px; }
.ve-inline select { min-width: 140px; }
.ve-unit { font-size: 11.5px; color: var(--sl-text-3, var(--text-secondary)); }
.ve-color { width: 36px; height: 28px; padding: 0; border: none; background: none; cursor: pointer; }
.ve-mcp-clients { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.ve-mcp-clients .btn-small.is-done { color: var(--sl-success, var(--success)); }