* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --bg-primary: #18181b;
    /* Zinc 900 */
    --bg-secondary: #27272a;
    /* Zinc 800 */
    --bg-tertiary: #3f3f46;
    /* Zinc 700 */
    --accent: #5ba4cf;
    /* Keep existing accents */
    --accent-hover: #7dbde8;
    --text-primary: #f4f4f5;
    /* Zinc 100 */
    --text-secondary: #a1a1aa;
    /* Zinc 400 */
    --border-color: rgba(255, 255, 255, 0.1);
    --success: #4ade80;
    --warning: #fbbf24;
    --danger: #ef4444;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.25);
}

.hidden {
    display: none !important;
}

body {
    font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
}

#app {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

/* Held back until the app has populated it — see the inline script in
   index.html. visibility rather than display so layout is still computed and
   nothing reflows at the moment it appears; and scoped to the two containers
   that carry placeholder text rather than to body, so a modal or a toast raised
   during boot is unaffected. */
.pw-booting #home-screen,
.pw-booting #toolbar {
    visibility: hidden;
}

/* Toolbar */
/* Two-row header (Google Sheets-style): tabs row on top, menubar row below */
#toolbar {
    display: flex;
    flex-direction: column;
    padding: 4px 20px 2px;
    background: rgba(39, 39, 42, 0.7);
    /* Frosted Slate */
    border-bottom: 1px solid var(--border-color);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    position: relative;
    z-index: 1000;
}

.toolbar-row {
    display: flex;
    align-items: center;
    width: 100%;
}

.toolbar-row-top {
    height: 42px;
}

.toolbar-row-menus {
    height: 28px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo-icon {
    width: 36px;
    height: 36px;
}

.toolbar-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    /* No overflow clipping here — the menu dropdowns must escape the bar;
       tab overflow is handled by #tabs-container's own overflow-x. */
}

.toolbar-left::-webkit-scrollbar {
    height: 0;
}

.project-name {
    font-size: 0.8rem;
    color: var(--text-secondary);
    cursor: default;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
    flex-shrink: 0;
    padding: 2px 4px;
    border-radius: 4px;
    transition: all 0.15s;
}

.project-name:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
}

.project-separator {
    color: rgba(255, 255, 255, 0.15);
    font-size: 0.8rem;
    flex-shrink: 0;
    user-select: none;
}

.toolbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
    flex-shrink: 0;
}

.btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary);
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    font-family: inherit;
    transition: all 0.15s ease;
    box-shadow: none;
    text-shadow: none;
    letter-spacing: 0.2px;
}

.btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
    color: #fff;
    box-shadow: none;
}

.btn:active:not(:disabled) {
    background: rgba(255, 255, 255, 0.03);
    transform: translateY(1px);
}

.btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.btn-primary {
    background: rgba(91, 164, 207, 0.12);
    border-color: rgba(91, 164, 207, 0.3);
    color: var(--accent);
}

.btn-primary:hover:not(:disabled) {
    background: rgba(91, 164, 207, 0.2);
    border-color: rgba(91, 164, 207, 0.5);
    color: var(--accent-hover);
    box-shadow: none;
    /* Removed heavy glow */
    transform: translateY(-1px);
}

.btn-start {
    background: rgba(74, 222, 128, 0.12);
    border-color: rgba(74, 222, 128, 0.3);
    color: #4ade80;
    font-weight: 600;
    font-size: 1rem;
    padding: 10px 28px;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: none;
}

.btn-start:hover:not(:disabled) {
    background: rgba(74, 222, 128, 0.2);
    border-color: rgba(74, 222, 128, 0.5);
    color: #86efac;
    box-shadow: 0 0 20px rgba(74, 222, 128, 0.12);
}

.btn-start:active:not(:disabled) {
    background: rgba(74, 222, 128, 0.08);
    transform: translateY(0);
}

.btn-start:disabled {
    opacity: 0.3;
    box-shadow: none;
}

.btn-danger {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.3);
    color: #f87171;
}

.btn-danger:hover:not(:disabled) {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.5);
    color: #fca5a5;
    box-shadow: none;
    transform: translateY(-1px);
}

.btn-warning {
    background: rgba(251, 191, 36, 0.12);
    border-color: rgba(251, 191, 36, 0.3);
    color: #fbbf24;
}

.btn-warning:hover:not(:disabled) {
    background: rgba(251, 191, 36, 0.2);
    border-color: rgba(251, 191, 36, 0.5);
    color: #fcd34d;
    box-shadow: none;
    transform: translateY(-1px);
}

.btn-small {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    font-size: 0.75rem;
    font-family: inherit;
    font-weight: 500;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: none;
    letter-spacing: 0.2px;
}

.btn-small:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.last-saved {
    color: var(--text-secondary);
    font-size: 0.7rem;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.btn-share {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(91, 164, 207, 0.9);
    background: rgba(91, 164, 207, 0.12);
    border: 1px solid rgba(91, 164, 207, 0.25);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-share:hover {
    background: rgba(91, 164, 207, 0.22);
    color: #fff;
    border-color: rgba(91, 164, 207, 0.45);
}

.btn-share.hidden {
    display: none;
}

.btn-share.is-shared {
    background: rgba(74, 222, 128, 0.12);
    border-color: rgba(74, 222, 128, 0.3);
    color: rgba(74, 222, 128, 0.9);
}

.btn-share.is-shared:hover {
    background: rgba(74, 222, 128, 0.22);
    color: #fff;
    border-color: rgba(74, 222, 128, 0.45);
}

#status {
    color: var(--text-secondary);
    font-size: 0.85rem;
    transition: opacity 0.2s ease;
}

#status.status-idle {
    opacity: 0;
    pointer-events: none;
}

#generating-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
}

#generating-indicator.hidden {
    display: none;
}

.generating-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent);
    animation: pulse 1.2s ease-in-out infinite;
}

.generating-text {
    color: var(--accent);
    font-size: 0.85rem;
    font-weight: 600;
    animation: textPulse 1.2s ease-in-out infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 0.4;
        transform: scale(0.8);
    }

    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}

@keyframes textPulse {

    0%,
    100% {
        opacity: 0.6;
    }

    50% {
        opacity: 1;
    }
}

@keyframes toastSlideIn {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes toastSlideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Tabs (inline in toolbar) */
#tabs-container {
    display: flex;
    align-items: center;
    gap: 2px;
    min-width: 0;
    overflow-x: auto;
}

#tabs-container::-webkit-scrollbar {
    height: 0;
}

.tab-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    color: var(--text-secondary);
    font-size: 0.8rem;
    cursor: pointer;
    white-space: nowrap;
    max-width: 180px;
    transition: all 0.15s ease;
    position: relative;
    user-select: none;
}

.tab-item:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.tab-item.active {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    border-bottom: 2px solid var(--accent);
    border-radius: 4px 4px 0 0;
}

.tab-item .tab-name {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 130px;
}

.tab-item .tab-name-input {
    background: var(--bg-primary);
    border: 1px solid var(--accent);
    color: var(--text-primary);
    font-size: 0.8rem;
    padding: 1px 4px;
    border-radius: 3px;
    width: 100px;
    outline: none;
}

.tab-close {
    display: none;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 0.85rem;
    cursor: pointer;
    padding: 0 2px;
    line-height: 1;
    border-radius: 3px;
}

.tab-item:hover .tab-close,
.tab-item.active .tab-close {
    display: inline-block;
}

.tab-close:hover {
    background: var(--danger);
    color: #fff;
}

/* Tab running state — spinner */
.tab-spinner {
    width: 10px;
    height: 10px;
    border: 1.5px solid rgba(255, 255, 255, 0.15);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: tab-spin 0.8s linear infinite;
    flex-shrink: 0;
}

@keyframes tab-spin {
    to { transform: rotate(360deg); }
}

.tab-item.tab-running .tab-name {
    color: var(--accent);
}

/* Tab approval state — yellow */
.tab-item.tab-approval {
    border-color: #eab308;
}

.tab-item.tab-approval .tab-name {
    color: #eab308;
}

.tab-item.tab-approval::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: #eab308;
    border-radius: 0 0 4px 4px;
}

.btn-new-tab {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    font-size: 1rem;
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 6px;
    transition: all 0.15s ease;
    flex-shrink: 0;
    line-height: 1.2;
    box-shadow: none;
    min-width: 40px;
    min-height: 40px;
}

.btn-new-tab:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
    color: #fff;
}

/* Briefing tab — distinct from workflow tabs */
.tab-item.tab-briefing .tab-name {
    color: #c8a8e0;
}

.tab-item.tab-briefing.active {
    border-bottom-color: #a878d0;
}

.tab-item .tab-icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    opacity: 0.85;
}

.tab-item .tab-icon svg {
    width: 12px;
    height: 12px;
}

/* New-tab dropdown menu (anchored under the + button) */
.new-tab-menu {
    position: fixed;
    z-index: 10000;
    background: rgba(24, 24, 27, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 4px;
    min-width: 170px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.new-tab-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    background: none;
    border: none;
    border-radius: 5px;
    color: var(--text-primary);
    font-size: 0.8rem;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s ease;
}

.new-tab-menu-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

.new-tab-menu-item svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    opacity: 0.8;
}

/* Briefing document editor — full-cover overlay above the canvas + floating controls */
.briefing-editor {
    position: absolute;
    inset: 0;
    z-index: 9500;
    display: flex;
    flex-direction: column;
    background: var(--bg-primary);
}

.briefing-editor.hidden {
    display: none;
}

/* ============================================================
   Realism QC / Training tab — full-cover overlay above the canvas
   ============================================================ */
.labeling-editor {
    position: absolute;
    inset: 0;
    z-index: 9500;
    display: flex;
    flex-direction: column;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.85rem;
}
.labeling-editor.hidden { display: none; }

.lbl-topbar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}
.lbl-titlewrap { display: flex; align-items: center; gap: 10px; }
.lbl-title { font-weight: 600; }
.lbl-cat-pill {
    font-size: 0.68rem; padding: 2px 8px; border-radius: 999px;
    background: rgba(120, 170, 255, 0.16); color: #9cc2ff;
}
.lbl-actions { display: flex; gap: 6px; }
.lbl-progress { margin-left: auto; color: var(--text-secondary); font-size: 0.75rem; }

.lbl-btn {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 5px 11px; border-radius: 6px; cursor: pointer; font-size: 0.78rem;
}
.lbl-btn:hover { background: rgba(255, 255, 255, 0.12); }
.lbl-btn-primary { background: #3b6fd4; border-color: #3b6fd4; color: #fff; }
.lbl-btn-primary:hover { background: #4a80e8; }

.lbl-main { flex: 1; display: flex; min-height: 0; }
.lbl-empty {
    margin: auto; text-align: center; color: var(--text-secondary);
    max-width: 460px; line-height: 1.6;
}
.lbl-empty code { background: rgba(255, 255, 255, 0.08); padding: 1px 5px; border-radius: 4px; }

.lbl-stage {
    flex: 1; display: flex; flex-direction: column; min-width: 0;
    padding: 16px; gap: 12px;
}
.lbl-image-wrap {
    flex: 1; display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, 0.35); border-radius: 10px; min-height: 0; overflow: hidden;
}
.lbl-image-wrap img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; }
.lbl-setstrip { display: flex; gap: 6px; flex-wrap: wrap; }
.lbl-thumb {
    width: 56px; height: 56px; object-fit: cover; border-radius: 6px; cursor: pointer;
    border: 2px solid transparent; opacity: 0.75;
}
.lbl-thumb:hover { opacity: 1; }
.lbl-thumb.active { border-color: #4a80e8; opacity: 1; }
.lbl-thumb.done { box-shadow: inset 0 0 0 2px #3ecf8e; }
.lbl-nav { display: flex; align-items: center; gap: 10px; }
.lbl-counter { color: var(--text-secondary); font-size: 0.75rem; }

.lbl-side {
    width: 340px; flex-shrink: 0; border-left: 1px solid rgba(255, 255, 255, 0.08);
    padding: 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px;
}
.lbl-section { font-weight: 600; margin-top: 10px; font-size: 0.8rem; }
.lbl-section-fail { color: #ff9a8b; }
.lbl-hint { color: var(--text-secondary); font-weight: 400; font-size: 0.72rem; }

.lbl-metric-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.lbl-metric-label { flex: 1; font-size: 0.8rem; cursor: help; }
.lbl-scale { display: flex; gap: 4px; }
.lbl-score {
    width: 30px; height: 30px; border-radius: 6px; cursor: pointer;
    background: rgba(255, 255, 255, 0.06); color: var(--text-primary);
    border: 1px solid rgba(255, 255, 255, 0.12); font-size: 0.8rem;
}
.lbl-score:hover { background: rgba(255, 255, 255, 0.14); }
.lbl-score.sel { background: #3b6fd4; border-color: #3b6fd4; color: #fff; font-weight: 600; }

.lbl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lbl-chip {
    padding: 4px 10px; border-radius: 999px; cursor: pointer; font-size: 0.76rem;
    background: rgba(255, 255, 255, 0.06); color: var(--text-primary);
    border: 1px solid rgba(255, 255, 255, 0.12);
}
.lbl-chip:hover { background: rgba(255, 255, 255, 0.12); }
.lbl-chip.on { background: #2f6f4f; border-color: #3ecf8e; color: #d9ffe9; }
.lbl-chip.fail.on { background: #7a2f2f; border-color: #ff8b7a; color: #ffe1da; }
.lbl-note {
    width: 100%; resize: vertical; border-radius: 6px; padding: 8px;
    background: rgba(0, 0, 0, 0.3); color: var(--text-primary);
    border: 1px solid rgba(255, 255, 255, 0.12); font-family: inherit; font-size: 0.78rem;
}

/* Modals (metrics/elements CRUD + analytics) */
.lbl-modal-host:empty { display: none; }
.lbl-modal-host {
    position: absolute; inset: 0; z-index: 10; display: flex; align-items: center;
    justify-content: center; background: rgba(0, 0, 0, 0.55);
}
.lbl-modal {
    background: var(--bg-primary); border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px; width: 560px; max-width: 92%; max-height: 84%;
    display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.lbl-modal-wide { width: 820px; }
.lbl-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); font-weight: 600;
}
.lbl-x { background: none; border: none; color: var(--text-secondary); font-size: 1.3rem; cursor: pointer; }
.lbl-x:hover { color: var(--text-primary); }
.lbl-modal-body { padding: 14px 16px; overflow-y: auto; }

.lbl-tax-item { display: flex; gap: 6px; margin-bottom: 8px; align-items: center; }
.lbl-in {
    background: rgba(0, 0, 0, 0.3); color: var(--text-primary);
    border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 6px; padding: 6px 8px; font-size: 0.78rem;
}
.lbl-tax-name { width: 130px; flex-shrink: 0; }
.lbl-tax-descin { flex: 1; }
.lbl-tax-add { display: flex; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.lbl-tax-add .lbl-in { flex-shrink: 0; }
.lbl-in-desc { flex: 1; }
.lbl-mini {
    background: rgba(255, 255, 255, 0.06); color: var(--text-primary);
    border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 5px; padding: 5px 9px; cursor: pointer; font-size: 0.72rem;
}
.lbl-mini:hover { background: rgba(255, 255, 255, 0.12); }
.lbl-mini-del { color: #ff9a8b; }

.lbl-an-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.lbl-an-grid h4 { margin: 4px 0 8px; font-size: 0.8rem; }
.lbl-table { width: 100%; border-collapse: collapse; margin-bottom: 14px; }
.lbl-table td { padding: 4px 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); font-size: 0.78rem; }
.lbl-num { text-align: right; color: #9cc2ff; }
.lbl-slice { padding: 5px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); font-size: 0.76rem; }
.lbl-slice-tag { display: inline-block; min-width: 110px; color: #3ecf8e; }

.briefing-editor-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    flex-shrink: 0;
}

.briefing-editor-icon {
    width: 16px;
    height: 16px;
    color: #c8a8e0;
    flex-shrink: 0;
}

.briefing-editor-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
}

.briefing-editor-hint {
    font-size: 0.72rem;
    color: var(--text-secondary);
    margin-left: 4px;
}

/* Preview toggle — pushed to the right edge of the header */
.briefing-preview-toggle {
    margin-left: auto;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 4px 12px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.briefing-preview-toggle:hover {
    background: rgba(255, 255, 255, 0.09);
    color: var(--text-primary);
}

.briefing-preview-toggle.active {
    background: rgba(200, 168, 224, 0.18);
    border-color: rgba(200, 168, 224, 0.4);
    color: #c8a8e0;
}

/* Formatting toolbar */
.briefing-editor-toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    flex-shrink: 0;
}

.briefing-editor-toolbar.hidden {
    display: none;
}

.briefing-tool {
    min-width: 28px;
    height: 26px;
    padding: 0 7px;
    font-size: 0.78rem;
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}

.briefing-tool:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
}

.briefing-tool b,
.briefing-tool i,
.briefing-tool u {
    font-style: inherit;
}

.briefing-tool i {
    font-style: italic;
}

.briefing-toolbar-sep {
    width: 1px;
    height: 16px;
    background: rgba(255, 255, 255, 0.12);
    margin: 0 4px;
}

.briefing-editor-text {
    flex: 1;
    width: 100%;
    min-height: 0;
    resize: none;
    border: none;
    outline: none;
    background: transparent;
    color: var(--text-primary);
    font-family: 'SF Mono', 'Consolas', 'Monaco', monospace;
    font-size: 0.86rem;
    line-height: 1.6;
    padding: 20px 24px;
    box-sizing: border-box;
}

.briefing-editor-text::placeholder {
    color: var(--text-secondary);
    opacity: 0.6;
}

.briefing-editor-text.hidden {
    display: none;
}

/* Rendered Markdown preview — mirrors the textarea's scroll area */
.briefing-editor-preview {
    flex: 1;
    width: 100%;
    min-height: 0;
    overflow-y: auto;
    color: var(--text-primary);
    font-size: 0.92rem;
    line-height: 1.65;
    padding: 20px 24px;
    box-sizing: border-box;
}

.briefing-editor-preview.hidden {
    display: none;
}

.briefing-editor-preview h1 {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0.6em 0 0.3em;
}

.briefing-editor-preview h2 {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0.6em 0 0.3em;
}

.briefing-editor-preview h3 {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0.6em 0 0.3em;
}

.briefing-editor-preview p {
    margin: 0.4em 0;
}

.briefing-editor-preview ul {
    margin: 0.4em 0;
    padding-left: 1.4em;
}

.briefing-editor-preview li {
    margin: 0.15em 0;
}

.briefing-editor-preview a {
    color: #8ab4f8;
    text-decoration: underline;
}

.briefing-editor-preview strong {
    font-weight: 700;
}

.briefing-editor-preview em {
    font-style: italic;
}

.briefing-editor-preview u {
    text-decoration: underline;
}

/* Floating Control Buttons */
.control-buttons {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9000;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px;
    background: rgba(39, 39, 42, 0.7);
    /* Frosted Slate */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.control-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    background: transparent;
}

.control-btn svg {
    width: 20px;
    height: 20px;
    transition: filter 0.2s ease;
}

.control-btn.hidden {
    display: none;
}

/* Undo / redo sit BESIDE Run without competing with it: Run is the green
   primary and these are chrome. Dimmed until hovered, and visibly dead when
   there is nothing to undo — a control that looks pressable and does nothing
   is worse than one that says so. */
.control-btn-quiet {
    color: rgba(226, 232, 240, 0.55);
    width: 36px;
    height: 36px;
}

.control-btn-quiet:hover:not(:disabled) {
    color: rgba(226, 232, 240, 0.95);
    background: rgba(255, 255, 255, 0.07);
}

.control-btn-quiet svg {
    width: 17px;
    height: 17px;
}

.control-btn-quiet:disabled {
    color: rgba(226, 232, 240, 0.18);
    cursor: default;
}

.control-btn-play {
    color: #4ade80;
}

.control-btn-play svg {
    filter: drop-shadow(0 0 6px rgba(74, 222, 128, 0.6));
}

.control-btn-play:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-2px);
}

.control-btn-play:hover svg {
    filter: drop-shadow(0 0 10px rgba(74, 222, 128, 0.8));
}

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

.control-btn-continue {
    color: #f59e0b;
}

.control-btn-continue svg {
    filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.6));
}

.control-btn-continue:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-2px);
}

.control-btn-continue:hover svg {
    filter: drop-shadow(0 0 10px rgba(245, 158, 11, 0.8));
}

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

.control-btn-pause {
    color: #5ba4cf;
}

.control-btn-pause svg {
    filter: drop-shadow(0 0 6px rgba(91, 164, 207, 0.6));
}

.control-btn-pause:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-2px);
}

.control-btn-pause:hover svg {
    filter: drop-shadow(0 0 10px rgba(91, 164, 207, 0.8));
}

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

.control-btn-stop {
    color: #ef4444;
}

.control-btn-stop svg {
    filter: drop-shadow(0 0 6px rgba(239, 68, 68, 0.6));
}

.control-btn-stop:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-2px);
}

.control-btn-stop:hover svg {
    filter: drop-shadow(0 0 10px rgba(239, 68, 68, 0.8));
}

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

.control-btn-download {
    color: var(--accent);
}

.control-btn-download svg {
    filter: drop-shadow(0 0 6px rgba(91, 164, 207, 0.6));
}

.control-btn-download:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-2px);
}

.control-btn-download:hover svg {
    filter: drop-shadow(0 0 10px rgba(91, 164, 207, 0.8));
}

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

/* Cost Calculator */
.cost-calculator {
    position: absolute;
    bottom: 105px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 16px;
    background: rgba(9, 9, 11, 0.75);
    /* Frosted Slate */
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    pointer-events: none;
    user-select: none;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.cost-calculator-costs {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cost-calculator-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}

.cost-calculator-label {
    font-size: 0.55rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    opacity: 0.6;
}

.cost-calculator-divider {
    width: 1px;
    height: 28px;
    background: rgba(255, 255, 255, 0.12);
}

.cost-calculator-value {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-primary);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    letter-spacing: 0.3px;
}

.cost-calculator-session {
    color: var(--accent);
}

.cost-calculator-detail {
    font-size: 0.6rem;
    color: var(--text-secondary);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    opacity: 0.7;
    letter-spacing: 0.3px;
}

/* Main Content */
#main-content {
    display: flex;
    flex: 1;
    overflow: hidden;
    position: relative;
}

/* Floating Sidebars Container */
#sidebars-container {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Floating Palette Sidebar */
#palette {
    background: rgba(9, 9, 11, 0.45);
    /* Frosted Slate */
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    width: 52px;
}

#palette.palette-expanded {
    width: 210px;
}

.palette-items {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.palette-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    border-radius: 8px;
    cursor: grab;
    transition: all 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    color: var(--text-secondary);
}

.palette-item:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.palette-item:active {
    cursor: grabbing;
}

.palette-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.palette-label {
    font-size: 0.82rem;
    opacity: 0;
    width: 0;
    transition: opacity 0.2s ease 0.1s, width 0.3s ease;
    overflow: hidden;
}

#palette.palette-expanded .palette-label {
    opacity: 1;
    width: auto;
}

/* Tooltip for collapsed sidebar */
#palette:not(.palette-expanded) .palette-item {
    position: relative;
}

#palette:not(.palette-expanded) .palette-item:hover::after {
    content: attr(title);
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.9);
    color: #ffffff;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.78rem;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    z-index: 200;
}

/* Palette footer — show-names + hide-sidebar buttons, stacked so each is centered */
.palette-footer {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding-top: 6px;
}

.palette-footer-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.palette-footer-btn:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.05);
}

.palette-toggle-icon {
    width: 16px;
    height: 16px;
    transition: transform 0.3s ease;
}

#palette.palette-expanded .palette-toggle-icon {
    transform: rotate(180deg);
}

/* Palette dividers and categories */
.palette-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.15);
    margin: 6px 4px;
}

.palette-category {
    font-size: 0.55rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 0 10px;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.2s ease 0.1s, max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s ease;
}

#palette.palette-expanded .palette-category {
    opacity: 0.6;
    max-height: 24px;
    padding: 4px 10px 2px;
}

/* Palette Search */
.palette-search-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-bottom: 1px solid var(--border-color);
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.25s ease, opacity 0.2s ease, padding 0.25s ease;
    padding-top: 0;
    padding-bottom: 0;
}

#palette.palette-expanded .palette-search-wrapper {
    max-height: 40px;
    opacity: 1;
    padding: 6px 10px;
}

.palette-search-icon {
    color: var(--text-secondary);
    flex-shrink: 0;
}

.palette-search {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-size: 0.9rem;
    font-family: inherit;
    min-width: 0;
    min-height: 36px;
}

.palette-search::placeholder {
    color: var(--text-secondary);
    opacity: 0.6;
}

.palette-item.palette-filtered-out,
.palette-category.palette-filtered-out,
.palette-divider.palette-filtered-out {
    display: none !important;
}

/* ============================== */
/* Toolbar Menus (File/View/Workflow) — replaced the right tools sidebar */
/* ============================== */
.toolbar-menus {
    display: flex;
    align-items: center;
    gap: 1px;
    /* Align the menubar under the project name, past the logo (Sheets-style) */
    margin: 0 8px 0 42px;
    flex-shrink: 0;
}

.toolbar-menu-group {
    position: relative;
}

.toolbar-menu-btn {
    padding: 4px 9px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-family: inherit;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.toolbar-menu-btn:hover,
.toolbar-menu-btn.open {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
}

.toolbar-menu-dropdown {
    position: absolute;
    left: 0;
    top: calc(100% + 6px);
    background: rgba(9, 9, 11, 0.85);
    /* Slate dropdown */
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 4px 0;
    min-width: 200px;
    z-index: 1100;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.toolbar-menu-divider {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin: 2px 0;
}

.menu-item-inline {
    display: flex;
    align-items: center;
    gap: 8px;
}

.menu-inline-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.menu-item-danger:hover {
    background: rgba(239, 68, 68, 0.12) !important;
    color: var(--danger);
}

/* Toolbar icon buttons (Assets / Scene / Settings) */
.toolbar-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.toolbar-icon-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
}

.toolbar-icon-btn:active {
    transform: scale(0.95);
}

.toolbar-icon-btn.tools-item-active {
    background: rgba(91, 164, 207, 0.12);
    border-color: rgba(91, 164, 207, 0.3);
    color: var(--accent);
}

.tools-dropdown-item {
    padding: 7px 14px;
    font-size: 0.78rem;
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    transition: background 0.2s ease;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    font-family: inherit;
}

.tools-dropdown-item:hover {
    background: rgba(255, 255, 255, 0.1);
}

.tools-shortcut {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.3);
}

/* ============================== */
/* Sidebar Header Tabs            */
/* ============================== */
.sidebar-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.2s ease;
    user-select: none;
}

.sidebar-header:hover {
    background: rgba(255, 255, 255, 0.05);
}

.sidebar-header-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--text-secondary);
    transition: color 0.2s ease;
}

.sidebar-header-label {
    font-size: 0.7rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
    overflow: hidden;
    transition: color 0.2s ease;
    flex: 1;
}

.sidebar-header-chevron {
    width: 16px;
    height: 16px;
    color: var(--text-secondary);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

.sidebar-active .sidebar-header-chevron {
    transform: rotate(180deg);
}

.sidebar-minimized .sidebar-header-chevron {
    transform: rotate(0deg);
}

/* Active sidebar header gets accent highlight */
.sidebar-active .sidebar-header {
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 8px;
}

.sidebar-active .sidebar-header .sidebar-header-icon {
    color: var(--accent);
}

.sidebar-active .sidebar-header .sidebar-header-label {
    color: var(--accent);
}

/* ============================== */
/* Minimized / Active States      */
/* ============================== */

/* Minimized: show only the header tab */
.sidebar-minimized .sidebar-content {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
        overflow 0s linear 0.25s;
}

.sidebar-minimized .palette-toggle-btn,
.sidebar-minimized .drawing-toggle-btn {
    display: none;
}

/* Active: show full content */
.sidebar-active .sidebar-content {
    max-height: 600px;
    opacity: 1;
    overflow: visible;
    transition: max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
        overflow 0s linear 0s;
}


/* ============================== */
/* History Panel                   */
/* ============================== */
.history-panel {
    position: fixed;
    bottom: 30px;
    right: 20px;
    width: 260px;
    max-height: 220px;
    background: rgba(9, 9, 11, 0.75);
    /* Frosted Slate */
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    z-index: 9000;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: max-height 0.3s ease;
}

.history-panel.history-minimized {
    max-height: 40px;
    overflow: hidden;
}

.history-panel.history-minimized .history-body {
    display: none;
}

.history-panel.history-minimized .history-minimize-btn svg {
    transform: rotate(180deg);
}

.history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    cursor: pointer;
    flex-shrink: 0;
}

.history-title {
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.history-minimize-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    width: 20px;
    height: 20px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.history-minimize-btn svg {
    width: 14px;
    height: 14px;
    transition: transform 0.3s ease;
}

.history-body {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

.history-entry {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    transition: background 0.15s ease;
}

.history-entry:hover {
    background: rgba(255, 255, 255, 0.04);
}

.history-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.history-icon svg {
    width: 14px;
    height: 14px;
}

.history-desc {
    flex: 1;
    font-size: 0.75rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.history-time {
    font-size: 0.65rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.history-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.04);
    margin: 2px 0;
}

/* Canvas Container */
#canvas-container {
    flex: 1;
    min-height: 0;
    position: relative;
    background: var(--bg-primary);
    overflow: hidden;
}

/* ---- Canvas stacking order, stated once ----
   Node DOM panels are position:fixed on <body> at z 6..96 (PANEL_Z_BASE +
   PANEL_Z_SPAN in combined-node-ui.js), so ANY chrome docked around the canvas
   has to clear that whole band. `position:relative` with no z-index does not:
   `z-index:auto` loses to every positive z, which is why a node bleeds over
   these panels unless it happens to be entirely outside the canvas rect — at
   which point the off-screen cull hides it and the overlap "fixes itself".

     6..96   node panels, ordered by graph depth
     100     docked chrome — these panels, .sidebars-container, .tools-collapsed
     9000+   run controls, modals, toasts

   THIS RULE LIVES HERE, NOT WITH THE PANELS. It is about canvas layering, not
   about how either panel looks, and it has twice been deleted by a restyle of
   the GPU panel that had no reason to think it was load-bearing. Keeping it in
   the layout section makes it survive the next one. */
.runpod-panel,
.asset-panel { z-index: 100; }

#graph-canvas {
    width: 100%;
    height: 100%;
}

#drawing-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
}

#drawing-canvas.drawing-active {
    pointer-events: auto;
    cursor: crosshair;
}

/* Logs Panel */
/* ── The console ───────────────────────────────────────────────────────────
   A RIGHT SIDEBAR, opened by an edge tab.

   It began as a 380x350 floating glass box parked over the canvas, in a
   proportional font, with the timestamp on its own line above each message — so
   about eight entries fitted and every one cost two rows. Worse, it was
   reachable only by turning on Dev Mode, so the one place that says what a
   generation is doing was invisible to anyone who did not know that setting
   existed.

   Now it is a server log docked to the right edge: monospace, one line per
   entry, timestamps and levels in fixed columns so the eye scans straight down
   them. The right edge rather than the bottom because the canvas is wide and
   shallow — a bottom strip eats the space nodes actually occupy, while a
   sidebar takes width the canvas can spare and gives the log the vertical run
   it wants. */
#output-panel {
    position: fixed;
    z-index: 250;
    /* Below both toolbar rows (46 + 30), which sit in normal flow above the
       canvas. Overlapping them would cover the run controls. */
    top: 78px;
    right: 0;
    bottom: 0;
    left: auto;
    width: 400px;
    min-width: 240px;
    max-width: 70vw;
    height: auto;
    background: rgba(6, 7, 9, 0.94);
    border: none;
    border-left: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 0;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: -8px 0 28px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Horizontal only: it is pinned to the right edge, so a height handle would
       tear it off the edge it is docked to. */
    resize: horizontal;
    direction: rtl;            /* puts the resize grip on the LEFT, where the panel's free edge is */
    font-family: ui-monospace, 'Cascadia Mono', 'JetBrains Mono', Consolas, 'Courier New', monospace;
}

#output-panel > * {
    direction: ltr;            /* undo the rtl trick for the contents */
}

#output-panel.hidden {
    display: none;
}

#output-panel.log-minimized {
    height: auto !important;
    bottom: auto;
    min-height: auto;
    resize: none;
}

#output-panel.log-minimized #output-content {
    display: none;
}

#output-panel.log-minimized #output-panel-header {
    border-bottom: none;
}

/* One entry, one line. `grid` rather than flex so the timestamp and level form
   real COLUMNS — with flex each row sizes itself and the message text starts at
   a different x on every line, which is what makes a log unreadable. */
#output-panel /* Scope and account chips, modelled on G-Labs' logs tab: "[HH:MM:SS] [Scope]
   message ... Account: <email>". Both are metadata about the line rather than
   part of it, so both stay quieter than the message and neither is allowed to
   push the message out of the row. */
.output-scope {
    display: inline-block;
    margin-right: 6px;
    padding: 0 5px;
    border-radius: 3px;
    background: rgba(124, 196, 240, 0.13);
    color: #7cc4f0;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.2px;
    white-space: nowrap;
    vertical-align: baseline;
}

.output-account {
    float: right;
    margin-left: 10px;
    max-width: 42%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.42);
    font-size: 10px;
}

/* The level column is a glyph now, not a word — centred so a column of them
   reads as a column. */
#output-panel .output-entry .level {
    text-align: center;
    font-size: 11px;
    line-height: 1.35;
}

/* A consecutive repeat is shown as a count on the row that is already there,
   rather than as another row. Deliberately quiet: it is metadata about the
   message, not part of it. */
.output-repeat {
    display: inline-block;
    margin-left: 6px;
    padding: 0 5px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.11);
    color: rgba(255, 255, 255, 0.62);
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    vertical-align: baseline;
}

.output-entry {
    display: grid;
    grid-template-columns: 58px 40px 1fr;
    gap: 7px;
    align-items: baseline;
    padding: 1px 10px;
    font-size: 11px;
    line-height: 1.45;
    border: none;
    background: none;
    margin: 0;
}

#output-panel .output-entry:hover {
    background: rgba(255, 255, 255, 0.035);
}

#output-panel .output-entry .timestamp {
    color: #5a6472;
    font-size: 10.5px;
    text-align: right;
    white-space: nowrap;
}

#output-panel .output-entry .level {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #7b8595;
    white-space: nowrap;
}

#output-panel .output-entry .content {
    color: #c8cedb;
    white-space: pre-wrap;
    word-break: break-word;
    min-width: 0;
}

#output-panel .output-entry.success .level { color: #4ade80; }
#output-panel .output-entry.success .content { color: #d3ecd9; }
#output-panel .output-entry.warning .level { color: #e8b04b; }
#output-panel .output-entry.warning .content { color: #f0dcb4; }
#output-panel .output-entry.error .level { color: #ff6b6b; }
#output-panel .output-entry.error .content { color: #ffc9c9; }
#output-panel .output-entry.info .level { color: #6aa9d8; }

#output-panel-header {
    border-bottom: none;
}

/* One entry, one line. `grid` rather than flex so the timestamp and level form
   real COLUMNS — with flex each row sizes itself and the message text starts at
   a different x on every line, which is what makes a log unreadable. */
#output-panel .output-entry {
    display: grid;
    grid-template-columns: 62px 46px 1fr;
    gap: 8px;
    align-items: baseline;
    padding: 1px 10px;
    font-size: 11px;
    line-height: 1.45;
    border: none;
    background: none;
    margin: 0;
}

#output-panel .output-entry:hover {
    background: rgba(255, 255, 255, 0.035);
}

#output-panel .output-entry .timestamp {
    color: #5a6472;
    font-size: 10.5px;
    text-align: right;
    white-space: nowrap;
}

#output-panel .output-entry .level {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #7b8595;
    white-space: nowrap;
}

#output-panel .output-entry .content {
    color: #c8cedb;
    white-space: pre-wrap;
    word-break: break-word;
    min-width: 0;
}

#output-panel .output-entry.success .level { color: #4ade80; }
#output-panel .output-entry.success .content { color: #d3ecd9; }
#output-panel .output-entry.warning .level { color: #e8b04b; }
#output-panel .output-entry.warning .content { color: #f0dcb4; }
#output-panel .output-entry.error .level { color: #ff6b6b; }
#output-panel .output-entry.error .content { color: #ffc9c9; }
#output-panel .output-entry.info .level { color: #6aa9d8; }

#output-panel-header {
    border-bottom: none;
}

#output-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    cursor: move;
    user-select: none;
    flex-shrink: 0;
}

.output-panel-title {
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

.output-panel-btns {
    display: flex;
    gap: 4px;
    align-items: center;
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    border-bottom: 1px solid var(--border-color);
}

.panel-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.panel-header h3 {
    font-size: 0.9rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn-toggle {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    font-size: 0.75rem;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px;
    transition: all 0.15s ease;
    line-height: 1;
    box-shadow: none;
}

.btn-toggle:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
    color: #fff;
}

#output-content {
    flex: 1;
    padding: 15px;
    overflow-y: auto;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.8rem;
    line-height: 1.5;
}

.output-entry {
    margin-bottom: 10px;
    padding: 10px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    border-left: 3px solid var(--accent);
}

.output-entry.success {
    border-left-color: var(--success);
}

.output-entry.error {
    border-left-color: var(--danger);
}

.output-entry.warning {
    border-left-color: var(--warning);
}

.output-entry .timestamp {
    font-size: 0.7rem;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.output-entry .content {
    word-break: break-word;
    white-space: pre-wrap;
}

.output-entry img {
    max-width: 100%;
    border-radius: 4px;
    margin-top: 8px;
}

/* LiteGraph Customizations */
.litegraph canvas {
    background: var(--bg-primary) !important;
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
    background: var(--bg-tertiary);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--border-color);
}

/* Settings Modal */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-overlay.hidden {
    display: none;
}

.modal {
    background: rgba(9, 9, 11, 0.82);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    width: 720px;
    max-width: 90vw;
    height: 80vh;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0,0,0,0.3);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.modal-header h2 {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.version-tag {
    font-size: 0.62rem;
    color: var(--text-secondary);
    font-weight: 500;
    margin-left: 8px;
    opacity: 0.45;
    background: rgba(255, 255, 255, 0.04);
    padding: 2px 6px;
    border-radius: 4px;
}

.btn-close {
    background: none;
    border: none;
    color: #52525b;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: color 0.15s, background 0.15s;
}

.btn-close:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.06);
}

.modal-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

/* Settings two-panel layout */
.modal-layout {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* When modal-layout is rendered inside the home Settings tab (reparented),
   give it a proper page-style frame instead of the modal popup constraints. */
#home-settings-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    height: calc(100vh - 180px);
    background: rgba(9, 9, 11, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    overflow: hidden;
}
#home-settings-container > .modal-layout {
    flex: 1;
    min-height: 0;
}

.settings-nav {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 10px 6px;
    width: 170px;
    min-width: 170px;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.12);
}

.settings-nav-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border: none;
    background: transparent;
    color: #71717a;
    font-size: 0.78rem;
    font-family: inherit;
    font-weight: 500;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.15s ease;
    text-align: left;
    white-space: nowrap;
}

.settings-nav-item:hover {
    background: rgba(255, 255, 255, 0.04);
    color: #a1a1aa;
}

.settings-nav-item.settings-nav-active {
    background: rgba(91, 164, 207, 0.08);
    color: #e4e4e7;
}

.settings-nav-item svg {
    flex-shrink: 0;
    opacity: 0.45;
    width: 15px;
    height: 15px;
}

.settings-nav-item:hover svg {
    opacity: 0.65;
}

.settings-nav-item.settings-nav-active svg {
    opacity: 0.85;
    color: var(--accent);
}

.settings-content {
    flex: 1;
    overflow-y: auto;
    padding: 18px 20px;
    min-width: 0;
}

.settings-tab {
    display: none;
}

.settings-tab.settings-tab-active {
    display: block;
}

.settings-tab-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: #a1a1aa;
    margin: 0 0 16px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    letter-spacing: 0.02em;
}

/* Sub-section heading inside a settings tab (merged sections, e.g. Confirmations, Google Drive) */
.settings-section-title {
    font-size: 0.78rem;
    font-weight: 600;
    color: #a1a1aa;
    margin: 22px 0 12px 0;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    letter-spacing: 0.02em;
}

.setting-group {
    margin-bottom: 16px;
}

.setting-group:last-child {
    margin-bottom: 0;
}

.setting-group label {
    display: block;
    font-size: 0.75rem;
    color: #71717a;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

/* Section divider between setting groups */
.setting-group-divider {
    margin: 16px 0;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.setting-group-bordered {
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.setting-group-bordered-top {
    padding-top: 14px;
    margin-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Toggle row (label + switch side by side) */
.setting-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.setting-toggle-row label {
    margin: 0;
    flex: 1;
}

.setting-toggle-row .toggle-switch {
    margin: 0;
}

/* Field spacing within config sections */
.setting-field {
    margin-bottom: 6px;
}

/* Subsection (nested card like Share panel) */
.setting-subsection {
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.015);
}

.setting-subsection-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: #a1a1aa;
}

/* Code block in settings */
.setting-code-block {
    flex: 1;
    font-size: 0.72rem;
    padding: 6px 8px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
    overflow-x: auto;
    white-space: nowrap;
    font-family: monospace;
}

/* Callout boxes */
.setting-callout {
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: 6px;
}

.setting-callout-success {
    background: rgba(74, 222, 128, 0.04);
    border: 1px solid rgba(74, 222, 128, 0.15);
}

.setting-callout-info {
    background: rgba(91, 164, 207, 0.04);
    border: 1px solid rgba(91, 164, 207, 0.1);
}

.setting-callout-title {
    margin: 0 0 3px;
    font-size: 0.7rem;
    font-weight: 600;
}

.setting-callout-success .setting-callout-title {
    color: #4ade80;
}

.setting-callout-info .setting-callout-title {
    color: var(--accent, #5ba4cf);
}

.setting-callout-body {
    margin: 0;
    font-size: 0.7rem;
    color: #71717a;
    white-space: pre-wrap;
    line-height: 1.45;
}

/* Compact small button variant */
.btn-small-compact {
    font-size: 0.68rem !important;
    padding: 4px 8px !important;
    min-width: auto !important;
}

.setting-input-row {
    display: flex;
    gap: 6px;
}

.setting-input-row input[type="text"],
.setting-input-row input[type="password"] {
    flex: 1;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    border-radius: 6px;
    font-size: 0.82rem;
    font-family: 'DM Sans', monospace;
    transition: border-color 0.15s ease, background 0.15s;
}

.setting-input-row input:focus {
    outline: none;
    border-color: rgba(91, 164, 207, 0.4);
    background: rgba(255, 255, 255, 0.06);
}

/* Range slider styling */
.setting-input-row input[type="range"] {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    outline: none;
    margin-top: 8px;
    border: none;
}

.setting-input-row input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    border: 2px solid var(--bg-secondary);
}

.setting-input-row input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    border: 2px solid var(--bg-secondary);
}

#line-thickness-value {
    min-width: 28px;
    text-align: center;
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 600;
}

.setting-input-row input[type="number"] {
    flex: 1;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    border-radius: 6px;
    font-size: 0.82rem;
    font-family: 'DM Sans', monospace;
    transition: border-color 0.15s ease;
}

.setting-input-row input[type="number"]:focus {
    outline: none;
    border-color: rgba(91, 164, 207, 0.4);
}

.setting-cost-display {
    flex: 1;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    border-radius: 6px;
    font-size: 0.82rem;
    font-family: monospace;
}

.setting-input-row input::placeholder {
    color: #52525b;
}

/* --- Standalone setting-input (used outside setting-input-row) --- */
.setting-input {
    width: 100%;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    border-radius: 6px;
    font-size: 0.82rem;
    font-family: 'DM Sans', monospace;
    transition: border-color 0.15s ease, background 0.15s;
    box-sizing: border-box;
}

.setting-input:focus {
    outline: none;
    border-color: rgba(91, 164, 207, 0.4);
    background: rgba(255, 255, 255, 0.06);
}

.setting-input::placeholder {
    color: #52525b;
}

/* --- Multi-API Key List --- */
.api-key-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.api-key-row {
    display: flex;
    gap: 4px;
    align-items: center;
}

.api-key-row .api-key-label {
    width: 90px;
    min-width: 75px;
    padding: 7px 9px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: #71717a;
    border-radius: 6px;
    font-size: 0.75rem;
}

.api-key-row .api-key-input {
    flex: 1;
    padding: 7px 9px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    border-radius: 6px;
    font-size: 0.78rem;
    font-family: 'DM Sans', monospace;
}

.api-key-row .api-key-input:focus,
.api-key-row .api-key-label:focus {
    outline: none;
    border-color: rgba(91, 164, 207, 0.4);
}

.api-key-row .api-key-input::placeholder,
.api-key-row .api-key-label::placeholder {
    color: #52525b;
}

.api-key-remove {
    color: #ef4444 !important;
    border-color: rgba(239, 68, 68, 0.15) !important;
    min-width: 26px;
    padding: 5px 7px !important;
    font-size: 0.9rem;
    line-height: 1;
    background: transparent !important;
}

.api-key-remove:hover {
    background: rgba(239, 68, 68, 0.1) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
}

.key-count-badge {
    display: inline-block;
    background: rgba(91, 164, 207, 0.15);
    color: var(--accent);
    font-size: 0.6rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 8px;
    margin-left: 6px;
    vertical-align: middle;
}

.setting-path-row input[type="text"] {
    cursor: pointer;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.btn-browse {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    min-width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-browse:hover {
    background: rgba(91, 164, 207, 0.12);
    color: var(--accent);
    border-color: rgba(91, 164, 207, 0.3);
}

/* Google Drive Sign-In */
.btn-gdrive-signin {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-gdrive-signin:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: 0 2px 12px rgba(66, 133, 244, 0.2);
}

.btn-gdrive-signin svg {
    flex-shrink: 0;
}

.gdrive-account-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.gdrive-account-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.gdrive-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.gdrive-account-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.gdrive-user-name {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-primary);
}

.gdrive-user-email {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.btn-danger-subtle {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.3);
    color: #f87171;
}

.btn-danger-subtle:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.5);
    color: #fca5a5;
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.1);
}

.gdrive-folder-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    margin-top: 6px;
}

.gdrive-folder-display {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-primary);
    font-size: 0.85rem;
    min-width: 0;
    overflow: hidden;
}

.gdrive-folder-display span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gdrive-folder-display svg {
    flex-shrink: 0;
    color: var(--text-secondary);
}

.setting-hint {
    font-size: 0.7rem;
    color: #52525b;
    margin-top: 5px;
    line-height: 1.45;
}

.setting-hint a {
    color: rgba(91, 164, 207, 0.75);
    text-decoration: none;
}

.setting-hint a:hover {
    color: var(--accent);
    text-decoration: underline;
}

.setting-hint-inline {
    font-size: 0.7rem;
    color: var(--text-secondary);
    font-weight: 400;
}

/* API Setup Guide */

.api-setup-guide {
    margin-top: 10px;
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 8px;
    padding: 12px 14px;
}

.api-setup-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    color: #52525b;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.api-setup-title svg {
    color: var(--accent);
    flex-shrink: 0;
}

.api-setup-steps {
    list-style: none;
    counter-reset: setup-step;
    padding: 0;
    margin: 0;
}

.api-setup-steps li {
    counter-increment: setup-step;
    position: relative;
    padding: 6px 0 6px 28px;
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.5;
    border-left: 1px solid rgba(255, 255, 255, 0.06);
    margin-left: 8px;
}

.api-setup-steps li::before {
    content: counter(setup-step);
    position: absolute;
    left: -8px;
    top: 6px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(91, 164, 207, 0.12);
    border: 1px solid rgba(91, 164, 207, 0.3);
    color: var(--accent);
    font-size: 0.65rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.api-setup-steps li:last-child {
    border-left-color: transparent;
}

.api-setup-steps li a {
    color: var(--accent);
    text-decoration: none;
}

.api-setup-steps li a:hover {
    text-decoration: underline;
}

.api-setup-steps li strong {
    color: var(--text-primary);
    font-weight: 600;
}

.api-setup-credit {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 12px;
    background: rgba(74, 222, 128, 0.05);
    border: 1px solid rgba(74, 222, 128, 0.15);
    border-radius: 8px;
    font-size: 0.75rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.api-setup-credit svg {
    color: var(--success);
    flex-shrink: 0;
    margin-top: 1px;
}

.api-setup-credit strong {
    color: var(--success);
}

.setting-input-row select {
    flex: 1;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    border-radius: 6px;
    font-size: 0.82rem;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color 0.15s ease;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath fill='%2371717a' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 30px;
}

.setting-input-row select:focus {
    outline: none;
    border-color: rgba(91, 164, 207, 0.4);
}

.setting-input-row select option {
    background: #18181b;
    color: var(--text-primary);
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px;
    border-top: 1px solid var(--border-color);
}

.modal-footer .btn-start {
    padding: 8px 24px;
    font-size: 0.85rem;
    text-transform: none;
    letter-spacing: 0.2px;
}

/* Workflow Defaults modal — bulk-apply node settings for one workflow */
.modal.modal-compact {
    width: 560px;
    height: auto;
    max-height: 88vh;
}

.wfd-body .settings-section-title {
    margin: 18px 0 10px;
}
.wfd-body .settings-section-title:first-of-type {
    margin-top: 8px;
}

.wfd-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
}

.wfd-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.wfd-field > span {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-secondary);
    letter-spacing: 0.01em;
}

.wfd-field select {
    width: 100%;
    padding: 8px 30px 8px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    border-radius: 6px;
    font-size: 0.82rem;
    font-family: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.15s ease;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath fill='%2371717a' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

.wfd-field select:focus {
    outline: none;
    border-color: rgba(91, 164, 207, 0.4);
}

.wfd-field select option {
    background: #18181b;
    color: var(--text-primary);
}

/* Checkbox styling for settings */
.checkbox-label {
    display: flex !important;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    text-transform: none !important;
    font-size: 0.9rem !important;
    color: var(--text-primary) !important;
    letter-spacing: normal !important;
}

.checkbox-label input[type="checkbox"] {
    display: none;
}

.checkbox-custom {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-primary);
    position: relative;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.checkbox-label input[type="checkbox"]:checked+.checkbox-custom {
    background: var(--accent);
    border-color: var(--accent);
}

.checkbox-label input[type="checkbox"]:checked+.checkbox-custom::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 6px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.checkbox-label:hover .checkbox-custom {
    border-color: var(--accent);
}

/* Confirm dialog */
.confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: confirmFadeIn 0.15s ease;
    backdrop-filter: blur(4px);
}

.confirm-dialog {
    background: #0a0a0a;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.8),
        0 0 0 1px rgba(255, 255, 255, 0.03);
    max-width: 440px;
    width: 90vw;
    padding: 28px;
    animation: confirmSlideIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.confirm-message {
    color: var(--text-primary);
    font-size: 0.88rem;
    line-height: 1.6;
    margin-bottom: 22px;
}

.confirm-checkbox {
    margin-bottom: 18px;
}

.confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.confirm-actions .btn {
    padding: 9px 18px;
    font-size: 0.82rem;
}

.confirm-btn-danger {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.3);
    color: #f87171;
}

.confirm-btn-danger:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.5);
    color: #fca5a5;
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.12);
}

.confirm-btn-accent {
    background: rgba(91, 164, 207, 0.12);
    border-color: rgba(91, 164, 207, 0.3);
    color: var(--accent);
}

.confirm-btn-accent:hover {
    background: rgba(91, 164, 207, 0.2);
    border-color: rgba(91, 164, 207, 0.5);
    color: var(--accent-hover);
    box-shadow: 0 0 20px rgba(91, 164, 207, 0.12);
}

@keyframes confirmFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes confirmSlideIn {
    from {
        opacity: 0;
        transform: scale(0.96) translateY(-8px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Node widget styling */
.node-widget-input {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 4px 8px;
    border-radius: 4px;
}

.node-widget-input:focus {
    outline: none;
    border-color: var(--accent);
}

/* (Old accordion sections removed — now using sidebar nav + tab panels) */

/* Color picker rows */
.setting-color-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.setting-color-row span {
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.setting-color-row input[type="color"] {
    width: 36px;
    height: 36px;
    border: 2px solid var(--border-color);
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    padding: 2px;
    -webkit-appearance: none;
    appearance: none;
}

.setting-color-row input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 2px;
}

.setting-color-row input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: 3px;
}

/* Link color palette */
.setting-link-colors-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.setting-link-colors-row input[type="color"] {
    width: 36px;
    height: 36px;
    border: 2px solid var(--border-color);
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    padding: 2px;
    -webkit-appearance: none;
    appearance: none;
}

.setting-link-colors-row input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 2px;
}

.setting-link-colors-row input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: 3px;
}

/* Node size inputs */

/* Context menu category headers */
.litemenu-entry.disabled {
    font-size: 0.7rem !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-secondary) !important;
    opacity: 0.6;
    padding-top: 8px !important;
}

/* ============================== */
/* LiteGraph CSS Overrides         */
/* ============================== */

/* Override LiteGraph default context menu styling */
.litecontextmenu,
.lgraphcanvas .litecontextmenu {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6) !important;
}

/* A node with many generations offers dozens of takes, and LiteGraph's menu has
   no height cap of its own — the list simply ran off the bottom of the screen
   with its last entries unreachable. Cap it and let it scroll. */
.litecontextmenu {
    max-height: calc(100vh - 24px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
}

/* Editor-node timeline scroller. The global bar is 6px — a hard grab for a
   control whose entire job is horizontal dragging. Widen the TRACK to 11px
   while keeping the visible thumb slim: the transparent border is part of the
   hit area but is clipped out of the paint by background-clip. */
.pwe-scroll::-webkit-scrollbar {
    height: 11px;
}

.pwe-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.22);
    border: 3px solid transparent;
    background-clip: padding-box;
    border-radius: 999px;
}

.pwe-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.4);
    background-clip: padding-box;
}

.litemenu-entry {
    color: var(--text-primary) !important;
}

.litemenu-entry:hover:not(.disabled) {
    background: var(--bg-tertiary) !important;
}

/* Hide LiteGraph search dialog remnants */
.litesearchbox {
    display: none !important;
}

/* Hide LiteGraph default info display (can show as blue box) */
.lgraphcanvas .graphnode_info,
.graphnode_info {
    display: none !important;
}

/* Override LiteGraph widget blue backgrounds */
.litecontextmenu .litemenu-entry.separator {
    background: var(--border-color) !important;
}

/* ============================== */
/* Uniform Font                    */
/* ============================== */
body,
button,
input,
select,
textarea {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* ============================== */
/* Asset Panel (Right Side)        */
/* ============================== */
.asset-panel {
    flex-shrink: 0;
    width: 340px;
    min-width: 200px;
    max-width: 50vw;
    background: rgba(14, 14, 18, 0.92);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    position: relative;
}

.asset-window-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
    user-select: none;
    flex-shrink: 0;
}

.asset-window-title {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 600;
}

.asset-project-badge {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 1px 8px;
    margin-left: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
    vertical-align: middle;
}

/* Drive Browser Modal */
.drive-browser-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.6);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
}
.drive-browser-modal {
    background: rgba(28, 28, 36, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    width: min(600px, 90vw);
    height: min(500px, 80vh);
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.drive-browser-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.drive-browser-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    letter-spacing: 0.5px;
}
.drive-browser-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
}
.drive-browser-close:hover { color: #fff; background: rgba(255,255,255,0.1); }
.drive-browser-breadcrumbs {
    padding: 8px 16px;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.drive-browser-crumb { color: rgba(255, 255, 255, 0.7); }
.drive-browser-crumb:hover { color: #fff; }
.drive-browser-sep { color: rgba(255, 255, 255, 0.25); margin: 0 2px; }
.drive-browser-grid {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 8px;
    align-content: start;
}
.drive-browser-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 4px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
    border: 1px solid transparent;
}
.drive-browser-item:hover { background: rgba(255, 255, 255, 0.06); }
.drive-browser-item.selected {
    background: rgba(91, 164, 207, 0.15);
    border-color: rgba(91, 164, 207, 0.4);
}
.drive-browser-thumb {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.03);
    margin-bottom: 6px;
}
.drive-browser-name {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.drive-browser-loading, .drive-browser-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.8rem;
    padding: 40px 0;
}
.drive-browser-footer {
    padding: 10px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    justify-content: flex-end;
}
.drive-browser-import-btn {
    background: rgba(91, 164, 207, 0.15);
    border: 1px solid rgba(91, 164, 207, 0.3);
    color: rgba(91, 164, 207, 0.9);
    padding: 6px 16px;
    border-radius: 6px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.15s;
}
.drive-browser-import-btn:hover:not(:disabled) {
    background: rgba(91, 164, 207, 0.25);
    color: #fff;
}
.drive-browser-import-btn:disabled { cursor: default; }

/* Share Dialog */
.share-dialog-overlay {
    position: fixed; inset: 0; z-index: 10000;
    background: rgba(0,0,0,0.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
}
.share-dialog-modal {
    background: rgba(28,28,36,0.95); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px; width: min(480px, 90vw); max-height: 80vh;
    display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.share-dialog-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,0.06);
}
.share-dialog-title { font-size: 0.9rem; font-weight: 600; color: rgba(255,255,255,0.85); }
.share-dialog-close {
    background: none; border: none; color: rgba(255,255,255,0.4);
    font-size: 1.2rem; cursor: pointer; padding: 2px 6px; border-radius: 4px;
}
.share-dialog-close:hover { color: #fff; background: rgba(255,255,255,0.1); }
.share-dialog-body { padding: 14px 18px; overflow-y: auto; flex: 1; }
.share-dialog-section { margin-bottom: 16px; }
.share-dialog-label {
    display: block; font-size: 0.7rem; color: rgba(255,255,255,0.4);
    text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; font-weight: 600;
}
.share-dialog-link-row, .share-dialog-invite-row { display: flex; gap: 6px; align-items: center; }
.share-dialog-url-input, .share-dialog-email-input {
    flex: 1; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px; padding: 6px 10px; color: rgba(255,255,255,0.7); font-size: 0.75rem; outline: none;
}
.share-dialog-url-input { font-family: monospace; }
.share-dialog-email-input { color: #fff; font-size: 0.8rem; }
.share-dialog-url-input:focus, .share-dialog-email-input:focus { border-color: rgba(91,164,207,0.4); }
.share-dialog-role-select {
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px; padding: 5px 8px; color: rgba(255,255,255,0.7); font-size: 0.75rem; outline: none; cursor: pointer;
}
.share-dialog-btn {
    padding: 6px 12px; border-radius: 6px; font-size: 0.75rem;
    border: none; cursor: pointer; white-space: nowrap; transition: all 0.15s;
}
.share-dialog-btn-primary { background: rgba(91,164,207,0.2); color: rgba(91,164,207,0.9); border: 1px solid rgba(91,164,207,0.3); }
.share-dialog-btn-primary:hover { background: rgba(91,164,207,0.3); color: #fff; }
.share-dialog-btn-copy { background: rgba(74,222,128,0.15); color: rgba(74,222,128,0.9); border: 1px solid rgba(74,222,128,0.3); }
.share-dialog-btn-copy:hover { background: rgba(74,222,128,0.25); color: #fff; }
.share-dialog-btn-danger { background: rgba(239,68,68,0.1); color: rgba(239,68,68,0.7); border: 1px solid rgba(239,68,68,0.2); }
.share-dialog-btn-danger:hover { background: rgba(239,68,68,0.2); color: #ef4444; }
.share-dialog-people-list { display: flex; flex-direction: column; gap: 6px; }
.share-dialog-person {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 8px; border-radius: 6px; background: rgba(255,255,255,0.03);
}
.share-dialog-person:hover { background: rgba(255,255,255,0.06); }
.share-dialog-avatar {
    width: 28px; height: 28px; border-radius: 50%; overflow: hidden;
    background: rgba(91,164,207,0.2); display: flex; align-items: center; justify-content: center;
    font-size: 0.7rem; color: rgba(91,164,207,0.9); flex-shrink: 0;
}
.share-dialog-avatar img { width: 100%; height: 100%; object-fit: cover; }
.share-dialog-person-info { flex: 1; min-width: 0; }
.share-dialog-person-name { font-size: 0.8rem; color: rgba(255,255,255,0.8); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-dialog-person-email { font-size: 0.65rem; color: rgba(255,255,255,0.35); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-dialog-role-badge { font-size: 0.6rem; padding: 2px 8px; border-radius: 8px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
.share-dialog-role-owner { background: rgba(251,191,36,0.15); color: #fbbf24; }
.share-dialog-role-editor { background: rgba(74,222,128,0.12); color: #4ade80; }
.share-dialog-role-commenter { background: rgba(167,139,250,0.12); color: #a78bfa; }
.share-dialog-role-viewer { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.5); }
.share-dialog-remove-btn { background: none; border: none; color: rgba(255,255,255,0.2); font-size: 1rem; cursor: pointer; padding: 2px 6px; border-radius: 4px; }
.share-dialog-remove-btn:hover { color: #ef4444; background: rgba(239,68,68,0.1); }
.share-dialog-loading { text-align: center; color: rgba(255,255,255,0.3); font-size: 0.8rem; padding: 30px 0; }

.share-dialog-banner {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    padding: 10px 12px;
    margin-bottom: 14px;
    font-size: 0.75rem;
    color: rgba(255,255,255,0.75);
}
.share-dialog-banner-line { line-height: 1.5; }
.share-dialog-banner-label { color: rgba(255,255,255,0.5); margin-right: 4px; }
.share-dialog-banner-sub { color: rgba(255,255,255,0.45); font-size: 0.7rem; }
.share-dialog-banner-warn {
    margin-top: 8px;
    padding: 6px 8px;
    background: rgba(251,191,36,0.08);
    border: 1px solid rgba(251,191,36,0.2);
    border-radius: 4px;
    color: rgba(251,191,36,0.85);
    font-size: 0.7rem;
    line-height: 1.4;
}
.share-dialog-hint {
    margin-top: 6px;
    font-size: 0.7rem;
    color: rgba(255,255,255,0.4);
    line-height: 1.4;
}

/* Google Docs-style share dialog layout */
.share-dialog-top-warn {
    margin-bottom: 12px;
}
.share-dialog-gd-section {
    padding: 12px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.share-dialog-gd-section:last-of-type { border-bottom: none; }
.share-dialog-gd-section-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255,255,255,0.85);
    margin-bottom: 10px;
}
.share-dialog-gd-add-row {
    display: flex;
    gap: 6px;
    align-items: center;
}
.share-dialog-gd-input {
    flex: 1;
    min-width: 0;
    padding: 7px 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    color: rgba(255,255,255,0.9);
    font-size: 0.8rem;
}
.share-dialog-gd-input:focus { outline: none; border-color: rgba(91,164,207,0.5); background: rgba(255,255,255,0.06); }
.share-dialog-gd-access-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.share-dialog-gd-access-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.share-dialog-gd-access-icon.is-restricted { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.65); }
.share-dialog-gd-access-icon.is-public    { background: rgba(74,222,128,0.18); color: #4ade80; }
.share-dialog-gd-access-text {
    flex: 1;
    min-width: 0;
}
.share-dialog-gd-mode-select {
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.9);
    font-size: 0.85rem;
    font-weight: 500;
    padding: 2px 4px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none' stroke='%23ffffff80' stroke-width='1.5'><path d='M1 1l4 4 4-4'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0 center;
    padding-right: 14px;
}
.share-dialog-gd-mode-select:focus { outline: none; }
.share-dialog-gd-mode-select:disabled { color: rgba(255,255,255,0.55); cursor: default; background-image: none; padding-right: 4px; }
.share-dialog-gd-mode-label {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.85);
    padding: 2px 0;
}
.share-dialog-gd-access-sub {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.4);
    margin-top: 2px;
    line-height: 1.4;
}
.share-dialog-gd-anyone-role { flex-shrink: 0; }
.share-dialog-gd-footer {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.share-dialog-gd-footer-spacer { flex: 1; }
.share-dialog-avatar-icon { background: rgba(91,164,207,0.18); color: rgba(91,164,207,0.95); display: flex; align-items: center; justify-content: center; }

/* Shared-project mode banner (sits below toolbar when a project was opened via share link) */
.shared-project-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: linear-gradient(90deg, rgba(91,164,207,0.16), rgba(168,85,247,0.10));
    border-bottom: 1px solid rgba(91,164,207,0.25);
    color: rgba(255,255,255,0.85);
    font-size: 0.75rem;
    line-height: 1.4;
    flex-shrink: 0;
}
.shared-project-banner.hidden { display: none; }
.shared-project-banner-icon { display: inline-flex; color: rgba(91,164,207,0.9); }
.shared-project-banner-text { font-weight: 500; }
.shared-project-banner-role {
    display: inline-block;
    padding: 1px 8px;
    margin-left: 4px;
    border-radius: 8px;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.7);
}
.shared-project-banner-role.role-owner    { background: rgba(251,191,36,0.18); color: #fbbf24; }
.shared-project-banner-role.role-editor   { background: rgba(74,222,128,0.16); color: #4ade80; }
.shared-project-banner-role.role-commenter{ background: rgba(167,139,250,0.16); color: #a78bfa; }
.shared-project-banner-role.role-viewer   { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.55); }
.shared-project-banner-spacer { flex: 1; }
.shared-project-banner-action {
    background: rgba(91,164,207,0.18);
    border: 1px solid rgba(91,164,207,0.32);
    color: rgba(91,164,207,0.95);
    border-radius: 4px;
    padding: 3px 10px;
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.15s ease;
}
.shared-project-banner-action:hover { background: rgba(91,164,207,0.3); color: #fff; }
.shared-project-banner-close {
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.45);
    font-size: 1.1rem;
    line-height: 1;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.shared-project-banner-close:hover { color: #fff; background: rgba(255,255,255,0.08); }
.share-cloud-btn { color: rgba(91,164,207,0.9) !important; }

/* Comment Popups */
.comment-popup {
    background: rgba(28, 28, 36, 0.95); border: 1px solid rgba(167, 139, 250, 0.25);
    border-radius: 10px; padding: 12px; width: 260px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.comment-popup-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.comment-popup-avatar {
    width: 24px; height: 24px; border-radius: 50%; background: rgba(167, 139, 250, 0.3);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.7rem; font-weight: 600; color: #a78bfa; flex-shrink: 0;
}
.comment-popup-author { font-size: 0.8rem; color: rgba(255, 255, 255, 0.8); flex: 1; }
.comment-popup-time { font-size: 0.65rem; color: rgba(255, 255, 255, 0.3); }
.comment-popup-text {
    font-size: 0.8rem; color: rgba(255, 255, 255, 0.7); line-height: 1.4;
    margin-bottom: 10px; word-wrap: break-word;
}
.comment-popup-input {
    width: 100%; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px; padding: 8px; color: #fff; font-size: 0.8rem; resize: none;
    outline: none; margin-bottom: 8px; font-family: inherit;
}
.comment-popup-input:focus { border-color: rgba(167, 139, 250, 0.4); }
.comment-popup-actions { display: flex; gap: 6px; }
.comment-popup-btn {
    padding: 4px 10px; border-radius: 5px; font-size: 0.7rem;
    border: none; cursor: pointer; background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.5);
    transition: all 0.15s;
}
.comment-popup-btn:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.comment-popup-btn-primary { background: rgba(167, 139, 250, 0.2); color: #a78bfa; }
.comment-popup-btn-primary:hover { background: rgba(167, 139, 250, 0.35); color: #fff; }
.comment-popup-btn-danger { color: rgba(239, 68, 68, 0.6); }
.comment-popup-btn-danger:hover { color: #ef4444; background: rgba(239, 68, 68, 0.1); }

.asset-window-controls {
    display: flex;
    gap: 4px;
}

.asset-window-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    box-shadow: none;
}

.asset-window-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
    color: #fff;
}

/* Search bar */
.asset-search-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    margin: 8px 12px 0;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    color: var(--text-secondary);
    transition: border-color 0.15s ease;
}

.asset-search-bar:focus-within {
    border-color: rgba(91, 164, 207, 0.4);
}

.asset-search-bar input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-size: 0.72rem;
    font-family: inherit;
}

.asset-search-bar input::placeholder {
    color: rgba(255, 255, 255, 0.2);
}

/* Toolbar */
.asset-window-toolbar {
    padding: 8px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    background: rgba(255, 255, 255, 0.01);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.asset-window-sort {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.asset-window-filters {
    display: flex;
    align-items: center;
    gap: 4px;
}

.asset-toolbar-sep {
    width: 1px;
    height: 14px;
    background: rgba(255,255,255,0.08);
    margin: 0 4px;
}

.asset-sort-btn,
.asset-filter-btn {
    padding: 3px 9px;
    border-radius: 12px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
    font-size: 0.65rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.asset-sort-btn:hover,
.asset-filter-btn:hover {
    border-color: rgba(255, 255, 255, 0.2);
    color: #cccccc;
}

.asset-sort-btn.asset-sort-active,
.asset-filter-btn.asset-filter-active {
    background: rgba(91, 164, 207, 0.15);
    border-color: rgba(91, 164, 207, 0.4);
    color: #5ba4cf;
}

.asset-view-btn {
    background: none;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 3px 6px;
    display: flex;
    align-items: center;
    transition: all 0.2s ease;
}
.asset-view-btn:hover {
    border-color: rgba(255,255,255,0.2);
    color: #ccc;
}
.asset-view-btn.asset-view-active {
    background: rgba(91,164,207,0.15);
    border-color: rgba(91,164,207,0.4);
    color: #5ba4cf;
}

/* Folder bar & breadcrumbs */
.asset-folder-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    min-height: 26px;
    background: rgba(255, 255, 255, 0.015);
    flex-shrink: 0;
}

.asset-breadcrumbs {
    flex: 1;
    font-size: 0.72rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.asset-breadcrumb {
    color: var(--text-secondary);
}

.asset-breadcrumb-link {
    color: rgba(91, 164, 207, 0.8);
    cursor: pointer;
}

.asset-breadcrumb-link:hover {
    color: rgba(91, 164, 207, 1);
    text-decoration: underline;
}

.asset-breadcrumb-sep {
    color: rgba(255, 255, 255, 0.2);
    margin: 0 1px;
}

.asset-new-folder-btn {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    padding: 2px 4px;
    display: flex;
    align-items: center;
    transition: all 0.15s;
}

.asset-new-folder-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(91, 164, 207, 0.9);
    border-color: rgba(91, 164, 207, 0.3);
}

/* Folder cards in asset grid */
.asset-folder-card {
    position: relative;
    aspect-ratio: 1;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    border: 1px dashed rgba(91, 164, 207, 0.2);
    background: rgba(91, 164, 207, 0.04);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.15s ease;
}

.asset-folder-card:hover {
    border-color: rgba(91, 164, 207, 0.5);
    background: rgba(91, 164, 207, 0.08);
}

.asset-folder-card.drag-over {
    border-color: rgba(91, 164, 207, 0.8);
    background: rgba(91, 164, 207, 0.15);
    box-shadow: 0 0 12px rgba(91, 164, 207, 0.2);
}

.asset-folder-card-name {
    font-size: 0.6rem;
    color: rgba(91, 164, 207, 0.85);
    text-align: center;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 4px;
}

/* Folder cards in list view */
.asset-grid-list .asset-folder-card {
    aspect-ratio: unset;
    flex-direction: row;
    justify-content: flex-start;
    padding: 6px 10px;
    gap: 8px;
    border-radius: 4px;
}

.asset-grid-list .asset-folder-card-name {
    font-size: 0.72rem;
    flex: 1;
    text-align: left;
}

/* Detail / list view */
.asset-grid.asset-grid-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.asset-list-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 4px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s;
    border-bottom: 1px solid rgba(255,255,255,0.03);
}
.asset-list-row:hover {
    background: rgba(255,255,255,0.04);
}
.asset-list-row:active {
    background: rgba(255,255,255,0.07);
}

.asset-list-thumb {
    width: 36px;
    height: 36px;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
    background: rgba(255,255,255,0.04);
    position: relative;
}
.asset-list-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.asset-list-thumb-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.3);
    color: rgba(255,255,255,0.85);
    font-size: 10px;
}

.asset-list-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.asset-list-name {
    color: #e4e4e7;
    font-size: 0.72rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.asset-list-meta {
    color: #71717a;
    font-size: 0.6rem;
    white-space: nowrap;
}

.asset-list-actions {
    display: flex;
    gap: 2px;
    opacity: 0;
    transition: opacity 0.15s;
}
.asset-list-row:hover .asset-list-actions {
    opacity: 1;
}

/* Body */
.asset-window-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
}

.asset-window-body::-webkit-scrollbar {
    width: 4px;
}

.asset-window-body::-webkit-scrollbar-track {
    background: transparent;
}

.asset-window-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
}

/* Sections */
.asset-section {
    padding: 12px 14px;
}

.asset-section+.asset-section {
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.asset-section-label {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-secondary);
    margin-bottom: 10px;
    font-weight: 500;
}

.asset-section-toggle {
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 4px;
}

.asset-section-toggle:hover {
    color: var(--text-secondary);
}

.asset-toggle-arrow {
    font-size: 0.55rem;
    transition: transform 0.2s ease;
    display: inline-block;
}

.asset-section-toggle.collapsed .asset-toggle-arrow {
    transform: rotate(-90deg);
}

.asset-section-content.collapsed {
    display: none;
}

.asset-history-hint {
    font-size: 0.55rem;
    color: rgba(255, 255, 255, 0.25);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}

.asset-empty {
    color: var(--text-secondary);
    font-size: 0.72rem;
    text-align: center;
    padding: 32px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    opacity: 0.5;
}

.asset-empty::before {
    content: '';
    width: 36px;
    height: 36px;
    border: 2px dashed rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    display: block;
}

/* Thumbnail grid */
.asset-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 4px;
    justify-content: start;
}

.asset-thumb {
    position: relative;
    aspect-ratio: 1;
    border-radius: 6px;
    overflow: hidden;
    cursor: grab;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.15s ease;
    background: rgba(255, 255, 255, 0.03);
}

.asset-thumb:hover {
    border-color: rgba(91, 164, 207, 0.5);
    box-shadow: 0 0 12px rgba(91, 164, 207, 0.12);
    transform: scale(1.03);
    z-index: 1;
}

.asset-thumb:active {
    cursor: grabbing;
    transform: scale(0.97);
}

.asset-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
    transition: filter 0.15s ease;
}

.asset-thumb:hover img {
    filter: brightness(1.08);
}

/* Video thumbnail wrapper — shows actual thumbnail with play overlay */
.asset-video-thumb-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    pointer-events: none;
}

.asset-video-thumb-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.asset-video-play-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.home-asset-video-thumb-wrapper {
    position: relative;
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    border-radius: 8px;
    overflow: hidden;
}

.home-asset-video-thumb-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.home-asset-video-play-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition: background 0.15s ease;
}

.home-asset-card:hover .home-asset-video-play-overlay {
    background: rgba(0, 0, 0, 0.15);
}

/* Overlay action buttons on hover */
.asset-thumb-actions {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    gap: 2px;
    padding: 3px;
    opacity: 0;
    transition: opacity 0.12s ease;
    background: linear-gradient(135deg, transparent 0%, rgba(0,0,0,0.5) 100%);
    border-radius: 0 6px 0 6px;
}

.asset-thumb:hover .asset-thumb-actions {
    opacity: 1;
}

.asset-thumb-btn {
    width: 22px;
    height: 22px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #cccccc;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: all 0.15s ease;
    padding: 0;
}

.asset-thumb-btn:hover {
    background: rgba(255, 255, 255, 0.9);
    color: #000000;
    border-color: #ffffff;
}

.asset-thumb-btn.favorited {
    color: #fbbf24;
}

.asset-thumb-btn.favorited:hover {
    color: #000000;
}

.asset-thumb-btn.asset-thumb-save {
    color: #4ade80;
}

.asset-thumb-btn.asset-thumb-save:hover {
    background: rgba(74, 222, 128, 0.9);
    color: #000000;
    border-color: #4ade80;
}

.asset-thumb-btn.asset-btn-delete:hover {
    background: rgba(239, 68, 68, 0.9);
    color: #ffffff;
    border-color: #ef4444;
}

/* Asset type badge (top-left corner) */
.asset-type-badge {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 1;
}

.asset-type-video {
    background: rgba(168, 85, 247, 0.8);
    color: #fff;
}

.asset-type-image {
    background: rgba(91, 164, 207, 0.7);
    color: #fff;
}

/* Left-edge resize handle for asset panel */
.asset-resize-handle-left {
    position: absolute;
    top: 0;
    left: -4px;
    width: 8px;
    height: 100%;
    cursor: ew-resize;
    z-index: 10;
}

/* ===== Home/Welcome Screen ===== */
.home-screen {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--bg-primary);
    display: flex;
    flex-direction: row;
    align-items: stretch;
    animation: homeScreenFadeIn 0.3s ease;
    overflow: hidden;
}

.home-screen::-webkit-scrollbar {
    width: 6px;
}

.home-screen::-webkit-scrollbar-track {
    background: transparent;
}

.home-screen::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
}

.home-screen::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.15);
}

@keyframes homeScreenFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.home-screen.home-hiding {
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

/* --- Home Sidebar [SLATE-MIGRATED] --- */

.home-sidebar {
    width: 240px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: var(--sl-bg-rail);
    border-right: 1px solid var(--sl-line);
    overflow: hidden;
}

.home-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 22px 20px 16px;
}

.home-brand { display: flex; flex-direction: column; line-height: 1; }

.home-title {
    font-family: var(--sl-font-display);
    font-weight: 700;
    font-size: 16px;
    color: var(--sl-text-hi);
    margin: 0;
}

.home-version {
    font-family: var(--sl-font-ui);
    font-size: 10.5px;
    color: oklch(0.52 0.005 250);
    margin-top: 4px;
}

.home-sidebar-nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 12px 12px;
    overflow: hidden;
}

.home-sidebar-spacer { margin-top: auto; }

.home-sidebar-footer {
    display: flex;
    flex-direction: column;
    padding: 12px 14px 14px;
    border-top: 1px solid var(--sl-line);
}

.home-sidebar-version {
    font-family: var(--sl-font-ui);
    font-size: 0.7rem;
    color: oklch(0.52 0.005 250);
    margin-top: 8px;
}

.home-sidebar-byline {
    font-size: 0.7rem;
    color: oklch(0.45 0.005 250);
    margin-top: 2px;
}

/* --- Home Dashboard [SLATE-MIGRATED] --- */

.home-dash {
    /* Was a hard 980px, so the dashboard was the same width on a 1280px
       laptop and a 2560px monitor - 1340px of empty space on the latter,
       content in a narrow strip down the middle. Capping content width is
       what a web PAGE does, for line length; an application uses the window
       it was given.

       1560 rather than a number of its own: #home-tab-projects already caps
       there, and a dashboard wider than the projects page it links to would
       read as a mistake. */
    max-width: 1560px;
    margin: 0 auto;
    width: 100%;
    padding: 32px 40px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.home-dash-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.home-dash-genline {
    margin-top: 8px;
    font-size: 13.5px;
    color: var(--sl-text-dim);
}

.home-dash-hero {
    margin-top: 26px;
    padding: 18px;
    border-radius: var(--sl-r-xl);
    background: var(--sl-bg-card-2);
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}
.home-dash-hero:hover { background: var(--sl-bg-card-2); }

.home-dash-hero-poster {
    width: 92px;
    height: 122px;
    border-radius: 10px;
    position: relative;
    flex: none;
    box-shadow: var(--sl-inset);
}

.home-dash-hero-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: oklch(0 0 0 / 0.42);
    border: 1px solid oklch(1 0 0 / 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.home-dash-hero-info { flex: 1; min-width: 220px; }

.home-dash-kicker {
    font-family: var(--sl-font-ui);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--sl-sky-text);
}

.home-dash-hero-title {
    margin-top: 6px;
    font-size: 18px;
    font-weight: 600;
    color: var(--sl-text-hi);
}

.home-dash-hero-meta {
    margin-top: 4px;
    font-size: 12.5px;
    color: var(--sl-text-dim);
}

.home-dash-hero-progress {
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 340px;
}
.home-dash-hero-progress .sl-progress { flex: 1; }

.home-dash-hero-proglabel {
    font-size: 12px;
    color: var(--sl-green-text);
    white-space: nowrap;
}

.home-dash-hero-strip { display: flex; gap: 6px; flex: none; }
.home-dash-hero-strip span {
    width: 40px;
    height: 54px;
    border-radius: 7px;
    box-shadow: var(--sl-inset);
}

.home-dash-hero-resume { flex: none; }

.home-dash-sechead {
    margin-top: 28px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.home-dash-sectitle {
    font-family: var(--sl-font-ui);
    font-size: 15px;
    font-weight: 600;
    color: var(--sl-text-hi);
    margin: 0;
    flex: none;
}

.home-dash-searchbox { flex: 1; max-width: 340px; margin-left: auto; padding: 8px 12px; }

.home-dash-viewall {
    background: none;
    border: none;
    color: var(--sl-sky-text);
    font-family: var(--sl-font-ui);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    flex: none;
    padding: 6px 4px;
}
.home-dash-viewall:hover { filter: brightness(1.15); }

.home-dash-grid {
    margin-top: 16px;
    display: grid;
    /* auto-fill rather than two fixed columns: the count follows the width,
       so widening the window adds a card per row instead of making two cards
       ever wider. 320px is the narrowest a card still reads at, which also
       collapses this to one column on a narrow window without needing the
       media query that used to do it. */
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 12px;
    padding-bottom: 32px;
}
@media (max-width: 900px) { .home-dash-grid { grid-template-columns: 1fr; } }

.home-dash-row {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 11px 13px;
    cursor: pointer;
}

.home-dash-row-poster {
    width: 46px;
    height: 62px;
    border-radius: 8px;
    flex: none;
    box-shadow: var(--sl-inset);
}

.home-dash-row-mid { flex: 1; min-width: 0; }

.home-dash-row-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--sl-text-hi);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-dash-row-meta {
    margin-top: 3px;
    font-size: 12px;
    color: var(--sl-text-faint);
}

.home-dash-empty {
    margin-top: 24px;
    font-size: 13px;
    color: var(--sl-text-faint);
}

/* --- Home Main Area --- */

.home-main-area {
    flex: 1;
    overflow-y: auto;
    display: flex;
    justify-content: center;
}

.home-main-area::-webkit-scrollbar {
    width: 6px;
}

.home-main-area::-webkit-scrollbar-track {
    background: transparent;
}

.home-main-area::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
}

.home-main-area::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* --- Home Tab Content --- */

.home-tab-content {
    display: none;
    width: 100%;
}

.home-tab-content.home-tab-active {
    display: block;
}

.home-tab-panel {
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
    padding: 40px 40px;
}

/* Generation Studio should be full-width like Flow, not boxed to 900px */
#home-tab-refiner .home-tab-panel {
    max-width: none;
    width: 100%;
    padding: 16px 22px 14px;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 24px);
    min-height: 0;
    box-sizing: border-box;
}

#home-tab-refiner .home-tab-header {
    margin-bottom: 10px;
}

#home-tab-refiner .home-tab-title {
    font-size: 1.12rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

#home-refiner-container {
    flex: 1;
    min-height: 0;
}

.home-tab-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
}

.home-tab-title {
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: -0.3px;
    color: var(--text-primary);
}

.home-tab-actions {
    display: flex;
    gap: 8px;
}

.home-btn-small {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-family: inherit;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary);
}

.home-btn-small:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
}

/* --- Home Content (Projects Tab) --- */

.home-content {
    max-width: 900px;
    width: 100%;
    padding: 40px 40px;
    margin: 0 auto;
}

.home-logo {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
}

.home-brand {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.home-title {
    font-size: 1.8rem;
    font-weight: 600;
    letter-spacing: -0.5px;
    color: var(--text-primary);
}

.home-version {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 400;
}

.home-actions {
    display: flex;
    gap: 12px;
    margin-bottom: 48px;
}

.home-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-family: inherit;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    border: none;
    outline: none;
}

.home-btn-primary {
    background: rgba(91, 164, 207, 0.12);
    border: 1px solid rgba(91, 164, 207, 0.3);
    color: var(--accent);
}

.home-btn-primary:hover {
    background: rgba(91, 164, 207, 0.2);
    border-color: rgba(91, 164, 207, 0.5);
    color: var(--accent-hover);
    box-shadow: 0 0 20px rgba(91, 164, 207, 0.1);
}

.home-btn-ghost {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

.home-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
}

.home-recent {
    margin-top: 8px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Sort bar */
/* ─── Sort bar ─── */
.home-sort-bar {
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(9, 9, 11, 0.5);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: 0 20px;
    height: 36px;
    position: sticky;
    top: 0;
    z-index: 10;
    max-width: 1040px;
    margin: 0 auto;
    width: 100%;
    border-radius: 8px 8px 0 0;
}

.home-sort-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: color 0.15s, background 0.15s;
}

.home-sort-btn:hover {
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.04);
}

.home-sort-btn.home-sort-active {
    color: var(--accent);
}

.home-sort-btn.home-col-gen,
.home-sort-btn.home-col-modified {
    justify-content: flex-end;
}

.home-sort-arrow {
    font-size: 0.55rem;
    opacity: 0.5;
}

/* ─── Column sizing ─── */
.home-col-name {
    flex: 1;
    min-width: 0;
}

.home-col-gen {
    width: 90px;
    text-align: right;
    flex-shrink: 0;
}

/* GEN % cell — colored by completion */
.home-gen-pct {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.home-gen-full { color: #6fcf97; }
.home-gen-partial { color: #f0b35c; }
.home-gen-zero { color: rgba(255, 255, 255, 0.4); }
.home-gen-none { color: rgba(255, 255, 255, 0.22); font-weight: 400; }

.home-col-modified {
    width: 100px;
    text-align: right;
    flex-shrink: 0;
}

.home-col-actions {
    width: 128px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
}

/* ─── Project list ─── */
.home-projects-list {
    display: flex;
    flex-direction: column;
    max-width: 1040px;
    margin: 0 auto;
    width: 100%;
    gap: 2px;
    padding: 4px 0;
}

/* ─── Project row ─── */
.home-project-row {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    cursor: pointer;
    border-radius: 10px;
    gap: 14px;
    margin: 0 4px;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

.home-project-row:hover {
    background: rgba(255, 255, 255, 0.04);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.home-project-row.home-project-active {
    background: rgba(91, 164, 207, 0.06);
    border: 1px solid rgba(91, 164, 207, 0.1);
}

/* ─── Row icon ─── */
.home-project-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(91, 164, 207, 0.12), rgba(91, 164, 207, 0.06));
    border: 1px solid rgba(91, 164, 207, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--accent);
    transition: background 0.2s, border-color 0.2s;
}

.home-project-row:hover .home-project-icon {
    background: linear-gradient(135deg, rgba(91, 164, 207, 0.2), rgba(91, 164, 207, 0.1));
    border-color: rgba(91, 164, 207, 0.2);
}

/* ─── Row name ─── */
.home-project-name {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.01em;
}

/* Name + description stack inside the name column */
.home-project-name-wrap {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

/* One-line project note under the title — click to edit */
.home-project-desc {
    font-size: 0.73rem;
    color: rgba(255, 255, 255, 0.42);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: text;
    border-radius: 4px;
    padding: 1px 4px;
    margin-left: -4px;
}

.home-project-desc:hover {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.6);
}

/* "+ Add note" placeholder — only visible while hovering the row */
.home-project-desc.home-desc-placeholder {
    font-style: italic;
    color: rgba(255, 255, 255, 0.18);
    visibility: hidden;
}

.home-project-row:hover .home-project-desc.home-desc-placeholder {
    visibility: visible;
}

.home-desc-input {
    width: 100%;
    padding: 1px 4px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--accent);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 0.73rem;
    font-family: inherit;
    outline: none;
}

/* Inline rename input */
.home-rename-input {
    width: 100%;
    padding: 3px 8px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--accent);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.88rem;
    font-weight: 500;
    font-family: inherit;
    outline: none;
}

/* ─── Row detail cells ─── */
.home-project-detail {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.35);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* ─── Row action buttons ─── */
.home-project-delete,
.home-project-pin,
.home-project-folder,
.home-project-duplicate,
.home-project-export {
    background: none;
    border: none;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.15s;
    opacity: 0;
    color: rgba(255, 255, 255, 0.45);
}

.home-project-row:hover .home-project-delete,
.home-project-row:hover .home-project-pin,
.home-project-row:hover .home-project-folder,
.home-project-row:hover .home-project-duplicate,
.home-project-row:hover .home-project-export {
    opacity: 0.5;
}

.home-project-row:hover .home-project-delete:hover,
.home-project-row:hover .home-project-pin:hover,
.home-project-row:hover .home-project-folder:hover,
.home-project-row:hover .home-project-duplicate:hover,
.home-project-row:hover .home-project-export:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.06);
}

/* Folder (assigned projects keep the icon faintly lit) */
.home-project-folder.assigned {
    opacity: 0.85;
    color: var(--accent);
}

.home-project-folder:hover {
    color: var(--accent-hover) !important;
    background: rgba(91, 164, 207, 0.1) !important;
}

/* Row being dragged onto a folder chip */
.home-project-row.home-row-dragging {
    opacity: 0.4;
}

/* Delete */
.home-project-delete {
    font-size: 1.1rem;
    line-height: 1;
}

.home-project-delete:hover {
    color: #f87171 !important;
    background: rgba(239, 68, 68, 0.1) !important;
}

/* Pin */
.home-project-pin.pinned {
    opacity: 1;
    color: var(--accent);
}

.home-project-pin:hover {
    color: var(--accent-hover) !important;
    background: rgba(91, 164, 207, 0.1) !important;
}

/* Duplicate */
.home-project-duplicate:hover {
    color: #4ade80 !important;
    background: rgba(74, 222, 128, 0.1) !important;
}

/* Export */
.home-project-export:hover {
    color: #a78bfa !important;
    background: rgba(167, 139, 250, 0.1) !important;
}

/* ─── Pinned separator ─── */
.home-pinned-separator {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(91, 164, 207, 0.2), transparent);
    margin: 4px 20px;
}

/* ─── Folder chip bar ─── */
.home-folder-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    max-width: 1040px;
    margin: 0 auto 10px;
    width: 100%;
    padding: 2px 0;
}

.home-folder-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.78rem;
    font-weight: 500;
    padding: 5px 11px;
    border-radius: 999px;
    cursor: pointer;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.home-folder-chip:hover {
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
}

.home-folder-chip.active {
    color: var(--accent);
    background: rgba(91, 164, 207, 0.12);
    border-color: rgba(91, 164, 207, 0.35);
}

.home-folder-chip.drag-over {
    color: var(--accent);
    background: rgba(91, 164, 207, 0.2);
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(91, 164, 207, 0.25);
}

.home-folder-chip-count {
    font-size: 0.68rem;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.06);
    border-radius: 999px;
    padding: 1px 6px;
    min-width: 16px;
    text-align: center;
}

.home-folder-chip.active .home-folder-chip-count {
    color: var(--accent);
    background: rgba(91, 164, 207, 0.18);
}

.home-folder-chip-add {
    color: rgba(255, 255, 255, 0.4);
    border-style: dashed;
}

.home-folder-chip-add:hover {
    color: var(--accent);
    border-color: rgba(91, 164, 207, 0.4);
}

/* ─── Move-to-folder popover ─── */
.home-folder-menu {
    position: fixed;
    z-index: 10000;
    min-width: 180px;
    max-height: 320px;
    overflow-y: auto;
    background: rgba(24, 24, 27, 0.98);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
    padding: 4px;
}

.home-folder-menu-item {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.82rem;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-folder-menu-item:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

.home-folder-menu-item.active {
    color: var(--accent);
}

.home-folder-menu-item.active::after {
    content: ' ✓';
}

.home-folder-menu-item.danger {
    color: #f87171;
}

.home-folder-menu-item.danger:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #f87171;
}

.home-folder-menu-sep {
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    margin: 4px 6px;
}

/* ─── Prompt dialog text input (showPrompt) ─── */
.confirm-input {
    width: 100%;
    box-sizing: border-box;
    margin-top: 4px;
    padding: 9px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--accent);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.9rem;
    font-family: inherit;
    outline: none;
}

/* ─── Empty state ─── */
.home-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-secondary);
}

.home-empty p:first-child {
    font-size: 1rem;
    margin-bottom: 8px;
}

.home-empty-hint {
    font-size: 0.8rem;
    opacity: 0.6;
}

/* --- Projects Page [SLATE-MIGRATED] (supersedes the section above; old rules swept in the final pass) --- */

.home-projects-page {
    max-width: 1040px;
    margin: 0 auto;
    width: 100%;
    padding: 32px 40px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.home-projects-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.home-ws-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 11px;
    border-radius: 8px;
    background: var(--sl-bg-card-2);
    border: 1px solid var(--sl-line-2);
    color: var(--sl-text-mid);
    font-family: var(--sl-font-ui);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    margin-bottom: 12px;
}
.home-ws-chip:hover { border-color: var(--sl-sky-50); }
.home-ws-chip svg:first-child { color: var(--sl-sky-icon); }

.home-projects-countline {
    margin-top: 8px;
    font-size: 13px;
    color: var(--sl-text-dim);
    display: flex;
    align-items: center;
    gap: 6px;
}
.home-projects-countdot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--sl-green);
    display: inline-block;
}

.home-projects-actions { display: flex; gap: 9px; align-items: center; }

.home-projects-search { margin-top: 22px; }

.home-projects-toolbar {
    margin-top: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.home-projects-toolbar .home-folder-bar { flex: 1; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.home-projects-viewtoggle { flex: none; }

.home-projects-bulkbar {
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 13px;
    border-radius: 11px;
    background: var(--sl-sky-12);
    border: 1px solid var(--sl-sky-35);
}
.home-bulk-count {
    font-family: var(--sl-font-ui);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--sl-sky-text);
    margin-right: 4px;
}
.home-bulk-delete { color: var(--sl-red-text); }
.home-bulk-delete:hover { background: var(--sl-red-12); }
.home-bulk-clear {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--sl-text-faint);
    font-size: 13px;
    cursor: pointer;
    padding: 4px 8px;
}
.home-bulk-clear:hover { color: var(--sl-text); }

/* column header (sortable) */
.home-sort-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 12px 6px;
    background: transparent;
    border: none;
}
.home-sort-bar .home-sort-btn {
    background: none;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
}
.home-sort-bar .home-sort-btn.home-sort-active { color: var(--sl-text-mid); }
.home-col-check { width: 16px; flex: none; }
.home-sort-bar .home-col-name { flex: 1; text-align: left; margin-left: 59px; }
.home-sort-bar .home-col-gen { width: 64px; justify-content: center; }
.home-sort-bar .home-col-modified { width: 92px; justify-content: flex-end; }
.home-sort-bar .home-col-actions { width: 150px; flex: none; }
.home-sort-arrow { font-size: 8px; }

/* list rows */
.home-projects-list { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; padding-bottom: 32px; }

.home-project-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border-radius: 12px;
    cursor: pointer;
}
.home-project-row.home-project-active { border-color: var(--sl-sky-35); }

.home-project-poster {
    width: 37px;
    height: 49px;
    border-radius: 7px;
    flex: none;
    box-shadow: var(--sl-inset);
}

.home-project-name-wrap { flex: 1; min-width: 0; }
.home-project-name {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--sl-text-hi);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.home-project-desc {
    margin-top: 2px;
    font-size: 11.5px;
    color: var(--sl-text-faint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: text;
}
.home-desc-placeholder { opacity: 0.55; }

.home-project-ring { width: 64px; display: flex; justify-content: center; flex: none; }
.home-col-modified.home-project-detail {
    width: 92px;
    text-align: right;
    font-family: var(--sl-font-ui);
    font-size: 12px;
    color: var(--sl-text-faint);
    flex: none;
}

.home-project-row .home-col-actions {
    width: 150px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    opacity: 0;
    transition: opacity 0.12s ease;
}
.home-project-row:hover .home-col-actions { opacity: 1; }
.home-project-row .home-col-actions button {
    background: none;
    border: none;
    color: var(--sl-text-faint);
    cursor: pointer;
    padding: 5px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    line-height: 1;
}
.home-project-row .home-col-actions button:hover { background: oklch(1 0 0 / 0.07); color: var(--sl-text); }
.home-project-row .home-project-pin.pinned { color: var(--sl-amber); opacity: 1; }
.home-project-row .home-project-delete:hover { background: var(--sl-red-12); color: var(--sl-red-text); }

.home-pinned-separator { height: 1px; background: var(--sl-line-2); margin: 4px 8px; }

/* grid view */
.home-projects-grid {
    margin-top: 12px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
    padding-bottom: 32px;
}
.home-project-card { overflow: hidden; cursor: pointer; border-radius: 14px; }
.home-project-card:hover { border-color: var(--sl-sky-50); }
.home-project-card-poster { aspect-ratio: 4 / 5; position: relative; }
.home-project-card-star {
    position: absolute;
    top: 8px;
    right: 8px;
    background: oklch(0 0 0 / 0.4);
    border: none;
    border-radius: 7px;
    color: oklch(1 0 0 / 0.6);
    padding: 5px;
    cursor: pointer;
    display: inline-flex;
}
.home-project-card-star.pinned { color: var(--sl-amber); }
.home-project-card-foot {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
}
.home-project-card-text { flex: 1; min-width: 0; }
.home-project-card-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--sl-text-hi);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.home-project-card-date {
    margin-top: 2px;
    font-family: var(--sl-font-mono);
    font-size: 10px;
    color: var(--sl-text-faint);
}

/* popovers */
.home-projects-pop { min-width: 200px; }
.home-projects-pop-kicker { padding: 6px 10px 4px; }

/* checkbox column on rows */
.home-project-check { align-self: center; }

/* --- Assets Page [SLATE-MIGRATED] (supersedes the section below; old rules swept in the final pass) --- */

.home-assets-page {
    max-width: 1180px;
    margin: 0 auto;
    width: 100%;
    padding: 32px 40px;
    box-sizing: border-box;
}

.home-assets-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    border: none;
    padding: 0;
}

.home-assets-countline {
    margin-top: 8px;
    font-size: 13px;
    color: var(--sl-text-dim);
}

.home-assets-actions { display: flex; gap: 9px; align-items: center; }

.home-asset-search-row.sl-search { margin-top: 22px; position: relative; }
.home-asset-search-row.sl-search .home-asset-search {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-family: var(--sl-font-ui);
    font-size: 13px;
    color: var(--sl-text);
    padding: 0;
}
.home-asset-search-clear {
    background: none;
    border: none;
    color: var(--sl-text-faint);
    cursor: pointer;
    display: inline-flex;
    padding: 4px;
}

.home-asset-sort-bar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 14px;
    border: none;
    padding: 0;
}

.assets-split { margin-top: 16px; }

.home-asset-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 14px;
}

.home-asset-card {
    display: flex;
    flex-direction: column;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    cursor: pointer;
    position: relative;
}

.home-asset-card .home-asset-thumb {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 11px;
    box-shadow: var(--sl-inset);
    background: var(--sl-bg-card);
    display: block;
}
.home-asset-card .home-asset-video-thumb-wrapper {
    width: 100%;
    aspect-ratio: 4 / 5;
    border-radius: 11px;
    overflow: hidden;
    box-shadow: var(--sl-inset);
    background: var(--sl-bg-card);
    position: relative;
}
.home-asset-card .home-asset-video-thumb-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.home-asset-card:hover .home-asset-thumb,
.home-asset-card:hover .home-asset-video-thumb-wrapper {
    box-shadow: inset 0 0 0 2px var(--sl-sky);
}
.home-asset-video-play-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.home-asset-type-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sl-on-sky);
    z-index: 2;
}
.home-asset-type-video { background: var(--sl-sky); }
.home-asset-type-image { background: oklch(0.76 0.12 160); }

.home-asset-fav {
    position: absolute;
    top: 6px;
    right: 6px;
    background: oklch(0 0 0 / 0.4);
    border: none;
    border-radius: 7px;
    color: oklch(1 0 0 / 0.55);
    padding: 4px;
    cursor: pointer;
    display: inline-flex;
    z-index: 2;
}
.home-asset-fav.favorited { color: var(--sl-amber); }

.home-asset-info { padding: 8px 2px 0; }
.home-asset-name {
    font-family: var(--sl-font-ui);
    font-size: 12px;
    font-weight: 600;
    color: var(--sl-text-hi);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.home-asset-date {
    margin-top: 2px;
    font-family: var(--sl-font-mono);
    font-size: 9.5px;
    color: var(--sl-text-faint);
}

/* ===== Home Assets Tab ===== */

/* Refresh button — sibling of Upload in the Assets header actions. The dot
 * indicator lights up when an asset is added while the user is on the tab. */
#home-asset-refresh-btn {
    position: relative;
}

.home-asset-refresh-icon {
    transition: transform 0.6s ease;
}

#home-asset-refresh-btn.spinning .home-asset-refresh-icon {
    transform: rotate(-360deg);
}

.home-asset-refresh-dot {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #5ba4cf;
    box-shadow: 0 0 6px rgba(91, 164, 207, 0.6);
    opacity: 0;
    transform: scale(0.7);
    transition: opacity 0.15s ease, transform 0.15s ease;
    pointer-events: none;
}

#home-asset-refresh-btn.has-new .home-asset-refresh-dot {
    opacity: 1;
    transform: scale(1);
}

/* Glassy search input that matches the asset-card aesthetic (same low-alpha
 * white surface, same 10px blur, same hairline border). Focus picks up the
 * brand accent with a soft glow ring so it feels of-a-piece with other focus
 * states across the app. */
.home-asset-search-row {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    background: rgba(255, 255, 255, 0.03);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 0 6px 0 38px;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.home-asset-search-row:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

.home-asset-search-row:focus-within {
    border-color: rgba(91, 164, 207, 0.55);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 0 0 3px rgba(91, 164, 207, 0.14);
}

.home-asset-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    opacity: 0.6;
    pointer-events: none;
    transition: color 0.15s ease, opacity 0.15s ease;
}

.home-asset-search-row:focus-within .home-asset-search-icon {
    color: var(--accent);
    opacity: 0.85;
}

.home-asset-search {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.85rem;
    line-height: 1.2;
    padding: 10px 4px;
    outline: none;
    letter-spacing: 0.005em;
}

.home-asset-search::placeholder {
    color: var(--text-secondary);
    opacity: 0.5;
}

.home-asset-search::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.home-asset-search-clear {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    padding: 0;
    margin-right: 2px;
    opacity: 0.7;
    transition: background 0.12s ease, color 0.12s ease, opacity 0.12s ease;
}

.home-asset-search-clear:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    opacity: 1;
}

.home-asset-sort-bar {
    display: flex;
    gap: 4px;
    margin-bottom: 20px;
}

.home-asset-sort-btn {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-family: inherit;
    font-weight: 500;
    padding: 6px 14px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.home-asset-sort-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
}

.home-asset-sort-btn.home-asset-sort-active {
    background: rgba(91, 164, 207, 0.12);
    border-color: rgba(91, 164, 207, 0.3);
    color: var(--accent);
}

.home-asset-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}

/* Assets-tab split layout: asset grid (left) | resizable splitter | scene builder host (right) */
#home-tab-assets .home-tab-panel {
    max-width: none;
    width: 100%;
    padding: 16px 22px 14px;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 24px);
    min-height: 0;
    box-sizing: border-box;
}

#home-tab-assets .home-tab-header {
    margin-bottom: 10px;
    flex-shrink: 0;
}

#home-tab-assets .home-asset-sort-bar {
    margin-bottom: 12px;
    flex-shrink: 0;
}

.assets-split {
    flex: 1;
    display: flex;
    flex-direction: row;
    min-height: 0;
    gap: 0;
}

.assets-split-left {
    flex: 1 1 auto;
    min-width: 200px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 6px;
}

.assets-split-handle {
    flex: 0 0 6px;
    background: rgba(255, 255, 255, 0.04);
    border-left: 1px solid rgba(255, 255, 255, 0.06);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    cursor: col-resize;
    transition: background 0.15s ease;
    position: relative;
}

.assets-split-handle:hover,
.assets-split-handle.dragging {
    background: rgba(91, 164, 207, 0.25);
}

.assets-split-right {
    flex: 1 1 auto;
    min-width: 240px;
    display: flex;
    flex-direction: column;
    background: #1e1e22;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.assets-sb-placeholder {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-size: 0.85rem;
    opacity: 0.5;
}

/* Scene builder, when reparented into the assets tab, fills its host */
.sb-panel.sb-panel-in-assets {
    position: relative;
    flex: 1 1 auto;
    width: 100%;
    height: 100% !important;
    border-top: none;
    border-radius: 10px;
    z-index: auto;
}

/* The bottom-panel resize handle and close button don't apply in assets mode */
.sb-panel.sb-panel-in-assets .sb-resize-handle,
.sb-panel.sb-panel-in-assets #sb-btn-close {
    display: none;
}

/* In assets mode, stack preview on top of the timeline (workflow lays them
 * side-by-side because vertical space is tight in the bottom panel). The
 * preview gets 2/3 of the vertical space; the timeline takes the rest. */
.sb-panel.sb-panel-in-assets .sb-body {
    flex-direction: column;
}

.sb-panel.sb-panel-in-assets .sb-preview {
    width: 100%;
    flex: 0 0 66.666%;
    min-height: 0;
    border-right: none;
    border-bottom: 1px solid #2a2a2e;
}

.sb-panel.sb-panel-in-assets .sb-preview-empty {
    font-size: 0.85rem;
    color: #52525b;
}

.sb-panel.sb-panel-in-assets .sb-timeline {
    flex: 1 1 auto;
    min-height: 0;
}

/* Drop-target hint: the moment a drag starts on a home asset, light up the
 * scene-builder host so the user sees the target zone without having to
 * hover over it. The full hover state (when the cursor is actually over the
 * pane) is stronger. */
body.asset-drag-active .assets-split-right {
    border-color: rgba(91, 164, 207, 0.35);
    box-shadow: inset 0 0 0 1px rgba(91, 164, 207, 0.15);
    transition: border-color 0.1s ease, box-shadow 0.1s ease;
}

.assets-split-right.assets-sb-drop-hover {
    border-color: rgba(91, 164, 207, 0.7);
    box-shadow: inset 0 0 0 2px rgba(91, 164, 207, 0.45), 0 0 18px rgba(91, 164, 207, 0.18);
}

/* The originating card dims and shrinks slightly so the user can see at a
 * glance which asset is "in flight" — and so the source-card area visually
 * recedes against the highlighted drop zone. */
.home-asset-card.home-asset-card-dragging {
    opacity: 0.35;
    transform: scale(0.96);
    transition: opacity 0.1s ease, transform 0.1s ease;
}

/* Asset cards in the split view get a draggable affordance */
#home-tab-assets .home-asset-card {
    cursor: grab;
}
#home-tab-assets .home-asset-card:active {
    cursor: grabbing;
}

.home-asset-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
}

.home-asset-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.home-asset-thumb {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
    background: rgba(0, 0, 0, 0.3);
}

.home-asset-info {
    padding: 8px 10px;
}

.home-asset-name {
    font-size: 0.75rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-asset-date {
    font-size: 0.65rem;
    color: var(--text-secondary);
    margin-top: 2px;
}

.home-asset-fav {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    background: rgba(0, 0, 0, 0.5);
    border: none;
    border-radius: 50%;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.15s ease;
}

.home-asset-card:hover .home-asset-fav {
    opacity: 1;
}

.home-asset-fav.favorited {
    opacity: 1;
    color: #f59e0b;
}

/* Home asset type badge (top-left corner) */
.home-asset-type-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 22px;
    height: 22px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 1;
}

.home-asset-type-video {
    background: rgba(168, 85, 247, 0.85);
    color: #fff;
}

.home-asset-type-image {
    background: rgba(91, 164, 207, 0.75);
    color: #fff;
}

.home-asset-empty {
    text-align: center;
    padding: 80px 20px;
    color: var(--text-secondary);
}

.home-asset-empty p {
    margin-top: 16px;
    font-size: 0.95rem;
}

.home-asset-empty-hint {
    font-size: 0.8rem;
    opacity: 0.6;
    margin-top: 4px;
}

/* ===== Home Collab Tab ===== */

.home-collab-section {
    background: rgba(9, 9, 11, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 20px;
}

.home-collab-room-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 10px 12px;
    transition: all 0.15s ease;
}

.home-collab-room-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(91, 164, 207, 0.2);
}

.home-collab-section-title {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    margin-bottom: 16px;
}

.home-collab-input-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.home-collab-label {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.home-collab-input {
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.85rem;
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s ease;
}

.home-collab-input:focus {
    border-color: rgba(91, 164, 207, 0.4);
}

.home-collab-select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

.home-collab-select option {
    background: #1a1a1a;
    color: var(--text-primary);
}

.home-collab-select option.home-collab-optgroup {
    color: var(--text-secondary);
    font-size: 0.75rem;
    letter-spacing: 0.05em;
}

.home-collab-join-row {
    display: flex;
    gap: 8px;
}

.home-collab-join-row .home-collab-input {
    flex: 1;
    text-transform: uppercase;
}

.home-collab-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 24px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid rgba(91, 164, 207, 0.3);
    background: rgba(91, 164, 207, 0.12);
    color: var(--accent);
    transition: all 0.15s ease;
}

.home-collab-btn:hover {
    background: rgba(91, 164, 207, 0.2);
    border-color: rgba(91, 164, 207, 0.5);
}

.home-collab-btn.leave-btn {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

.home-collab-btn.leave-btn:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.4);
}

.home-collab-room-info {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(91, 164, 207, 0.06);
    border: 1px solid rgba(91, 164, 207, 0.15);
    border-radius: 8px;
    margin-bottom: 16px;
}

.home-collab-room-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.home-collab-room-code {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 2px;
    font-family: 'Fira Code', monospace;
}

.home-collab-copy-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
}

.home-collab-copy-btn:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.06);
}

.home-collab-user-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.home-collab-user-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.02);
}

.home-collab-user-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.home-collab-user-name {
    font-size: 0.85rem;
    color: var(--text-primary);
    font-weight: 500;
}

.home-collab-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
    margin: 20px 0;
}

.home-collab-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 16px;
}

.home-collab-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4ade80;
}

.home-collab-status-dot.disconnected {
    background: var(--text-secondary);
}

/* ===== Projects page: workspace scope (Personal ⇄ Workspace) ===== */
/* The chip reads as a workspace rather than "Personal" once a scope is active. */
.home-ws-chip.is-workspace { background: var(--sl-sky-12); border-color: var(--sl-sky-35); }
.home-ws-chip.is-workspace svg:first-child { color: var(--sl-sky); }

/* Scope notice under the header: role, or an offline warning. */
.pws-banner { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 9px 13px; border-radius: 11px; background: var(--sl-sky-12); border: 1px solid var(--sl-sky-35); color: var(--sl-text-dim); font-size: 12.5px; }
.pws-banner[hidden] { display: none; }
.pws-banner.is-offline { background: var(--sl-amber-12, rgba(224, 168, 78, 0.12)); border-color: var(--sl-amber, #e0a84e); color: var(--sl-text-hi); }
.pws-banner-btn { margin-left: auto; padding: 4px 11px; border-radius: 8px; border: 1px solid var(--sl-line-2); background: var(--sl-bg-card); color: var(--sl-text-hi); font-size: 11.5px; font-weight: 600; cursor: pointer; }
.pws-banner-btn:hover { border-color: var(--sl-sky-35); }

/* Who last touched a shared project — only meaningful in a workspace. */
.pws-byline { display: block; margin-top: 2px; font-size: 11px; color: var(--sl-text-faint); }
.pws-tag { margin-left: 7px; padding: 1px 6px; border-radius: 5px; background: var(--sl-sky-12); color: var(--sl-sky); font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; vertical-align: middle; }

/* Workspace-aware empty state (replaces the personal one in workspace scope). */
.pws-empty { padding: 44px 20px; text-align: center; }
.pws-empty-title { font-size: 15px; font-weight: 600; color: var(--sl-text-hi); }
.pws-empty-hint { margin-top: 7px; font-size: 12.5px; color: var(--sl-text-faint); max-width: 420px; margin-left: auto; margin-right: auto; line-height: 1.5; }

/* --- Presence: who's live, and where (same dot language as the topbar collab avatars) --- */
/* Dots overlap via the negative margin on .pws-dot — `gap` cannot be negative. */
.pws-dots { display: inline-flex; align-items: center; margin-top: 4px; padding-right: 5px; vertical-align: middle; }
.pws-dots-header { margin-top: 0; margin-left: auto; }
.pws-dot { width: 19px; height: 19px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 9.5px; font-weight: 700; color: #0b0d10; border: 1.5px solid var(--sl-bg-page); margin-right: -5px; flex: none; }
.pws-dot-more { background: var(--sl-bg-card-2); color: var(--sl-text-dim); }

/* Unresolved comments read as "needs you"; all-resolved is neutral. */
.pws-comments { display: inline-block; margin-top: 4px; margin-left: 8px; padding: 1px 6px; border-radius: 6px; background: var(--sl-bg-card-2); color: var(--sl-text-faint); font-size: 10.5px; font-weight: 600; vertical-align: middle; }
.pws-comments.has-open { background: var(--sl-amber-12, rgba(224, 168, 78, 0.12)); color: var(--sl-amber, #e0a84e); }

/* --- Identity: accounts, invites, join policy --- */
/* An anonymous membership dies with the browser profile — say so, don't let it be a surprise. */
.pws-nag { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; padding: 12px 14px; border-radius: 12px; background: var(--sl-amber-12, rgba(224, 168, 78, 0.12)); border: 1px solid var(--sl-amber, #e0a84e); color: var(--sl-text-dim); font-size: 12.5px; line-height: 1.5; }
.pws-nag strong { color: var(--sl-text-hi); }
.pws-nag .ws-btn { flex: none; }

.pws-policy { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.pws-policy-row { display: flex; align-items: flex-start; gap: 9px; font-size: 12.5px; color: var(--sl-text-dim); cursor: pointer; line-height: 1.45; }
.pws-policy-row strong { color: var(--sl-text-hi); font-weight: 600; }
.pws-policy-row input { margin-top: 2px; flex: none; accent-color: var(--sl-sky); }

.pws-invites { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.pws-invite { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 9px; background: var(--sl-bg-card-2); font-size: 12px; }
.pws-invite-code { font-family: var(--sl-font-mono); font-size: 11px; color: var(--sl-text-hi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 210px; }
.pws-invite-meta { color: var(--sl-text-faint); font-size: 11px; margin-right: auto; }

/* --- Shared library + template gallery --- */
.pws-assets-note { margin-top: 6px; font-size: 12px; color: var(--sl-sky); }
.pws-assets-note[hidden] { display: none; }

/* Above .home-screen (z-index 9999) — the picker is opened FROM the home screen, so it has to
   outrank it, while staying below toasts. */
.pws-modal-overlay { position: fixed; inset: 0; z-index: 10250; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 40px 20px; }
.pws-modal { width: min(900px, 100%); max-height: 80vh; overflow-y: auto; background: var(--sl-bg-card); border: 1px solid var(--sl-line-2); border-radius: 18px; padding: 22px 24px; }
.pws-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.pws-modal-head h2 { margin: 0; font-size: 17px; font-weight: 600; color: var(--sl-text-hi); }

.pws-tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 14px; }
.pws-tpl { padding: 0; overflow: hidden; cursor: pointer; border-radius: 13px; }
.pws-tpl:hover { border-color: var(--sl-sky-35); }
.pws-tpl-poster { aspect-ratio: 4 / 5; background-size: cover; background-position: center; }
.pws-tpl-name { padding: 9px 11px 2px; font-size: 13px; font-weight: 600; color: var(--sl-text-hi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pws-tpl-meta { padding: 0 11px 11px; font-size: 11px; color: var(--sl-text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- Activity feed --- */
.pws-act { display: flex; flex-direction: column; gap: 2px; max-height: 340px; overflow-y: auto; }
.pws-act-empty { color: var(--sl-text-faint); font-size: 12.5px; padding: 12px 2px; }
.pws-act-day { margin: 12px 0 4px; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sl-text-faint); }
.pws-act-day:first-child { margin-top: 0; }
.pws-act-row { display: flex; align-items: center; gap: 9px; padding: 6px 2px; font-size: 12.5px; }
.pws-act-icon { display: inline-flex; flex: none; }
.pws-act-text { color: var(--sl-text-dim); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pws-act-when { color: var(--sl-text-faint); font-size: 11px; flex: none; }
.pws-act-more { margin-top: 10px; align-self: flex-start; padding: 5px 11px; border-radius: 8px; border: 1px solid var(--sl-line-2); background: transparent; color: var(--sl-text-dim); font-size: 11.5px; cursor: pointer; }
.pws-act-more:hover { border-color: var(--sl-sky-35); color: var(--sl-text-hi); }

/* ===== Workspaces Tab [SLATE-MIGRATED] =====
   Implements Workspaces.dc.html from the "Node editor aesthetic improvement" design project.
   Every raw oklch() in the mockup has a --sl-* equivalent (slate.css is generated from the same
   source), so this uses tokens throughout rather than pinning the design's literals. */
/* The generic .home-tab-panel clamps to 900px AND applies its own 40px padding on top of this
   page's — which squeezed the content to ~740px and meant the max-width below never applied. Opt
   out the way the Assets/Refiner tabs do and let .ws-page own its own width and padding. The
   mockup is full-bleed, so the detail pane is meant to have room. */
#home-tab-workspaces .home-tab-panel { max-width: none; width: 100%; padding: 0; }
.ws-page { max-width: 1560px; margin: 0 auto; width: 100%; padding: 32px 40px; box-sizing: border-box; }
.ws-subtitle { color: var(--sl-text-dim); font-size: 13.5px; margin: 8px 0 0; }
.ws-shell { display: flex; gap: 20px; margin-top: 24px; flex-wrap: wrap; align-items: flex-start; }
.ws-left { width: 280px; flex: none; display: flex; flex-direction: column; gap: 10px; }
.ws-left-empty { font-size: 12px; color: var(--sl-text-faint); }
.ws-right { flex: 1; min-width: 340px; background: var(--sl-bg-card); border: 1px solid var(--sl-line-2); border-radius: var(--sl-r-xl); padding: 20px 22px; margin-bottom: 32px; }
.ws-right-hint { color: var(--sl-text-faint); font-size: 13px; padding: 40px 10px; text-align: center; }

/* Mono kicker — the design's section rhythm. "MEMBERS · 4". */
.ws-kicker { font-family: var(--sl-font-mono); font-size: 10px; letter-spacing: 0.13em; color: var(--sl-text-ghost); text-transform: uppercase; margin: 0 0 8px; font-weight: 500; }
.ws-left-kicker { margin-bottom: 2px; }

/* --- left: workspace cards --- */
.ws-wscard { display: flex; align-items: center; gap: 11px; padding: 12px 13px; border-radius: var(--sl-r-md); background: var(--sl-bg-card); border: 1px solid var(--sl-line-2); cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; }
.ws-wscard:hover { border-color: var(--sl-sky-35); }
.ws-wscard.is-active { background: var(--sl-sky-10); border-color: var(--sl-sky-35); }
.ws-wscard-tile { width: 34px; height: 34px; border-radius: 9px; background: var(--sl-sky); color: var(--sl-on-sky); font-weight: 700; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
/* Each workspace gets its own tile hue so the list is scannable at a glance (design shows two). */
.ws-wscard-tile.hue-1 { background: var(--sl-green); }
.ws-wscard-tile.hue-2 { background: var(--sl-amber); }
.ws-detail-tile { width: 38px; height: 38px; border-radius: 10px; font-size: 13px; }
.ws-wscard-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.ws-history-name { font-size: 13.5px; font-weight: 600; color: var(--sl-text-hi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-history-meta { font-family: var(--sl-font-mono); font-size: 10.5px; color: var(--sl-text-faint); margin-top: 2px; }

/* Role pill. This previously had ONE rule (text-transform) and nothing else, so OWNER/EDITOR
   rendered at full body size and blew out every row it sat in. */
.ws-role-badge { display: inline-flex; align-items: center; flex: none; padding: 2px 7px; border-radius: var(--sl-r-xs); font-size: 9.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; background: var(--sl-sky-12); color: var(--sl-sky-text); }
.ws-role-editor { background: oklch(1 0 0 / 0.06); color: var(--sl-text-mid); }
.ws-role-viewer { background: oklch(1 0 0 / 0.04); color: var(--sl-text-faint); }

/* --- left: create / join tiles (2-up, progressive disclosure) --- */
.ws-tilegrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.ws-card { background: var(--sl-bg-card); border: 1px solid var(--sl-line-2); border-radius: var(--sl-r-md); padding: 14px; }
/* Real <button>s (keyboard-reachable), reset to read as cards. */
.ws-tile { display: block; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; }
.ws-tile:hover { border-color: var(--sl-sky-35); background: var(--sl-bg-card-2); }
.ws-tile.is-open { border-color: var(--sl-sky-35); background: var(--sl-bg-card-2); }
.ws-tile:focus-visible { outline: 2px solid var(--sl-sky); outline-offset: 2px; }
.ws-tile-icon { width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ws-tile-icon-sky { background: var(--sl-sky-14); color: var(--sl-sky-icon); }
.ws-tile-icon-green { background: var(--sl-green-14); color: var(--sl-green-text); }
.ws-card-title { display: block; color: var(--sl-text-hi); font-size: 12px; font-weight: 600; margin: 9px 0 0; }
.ws-tile-hint { color: var(--sl-text-faint); font-size: 10.5px; margin: 3px 0 0; line-height: 1.4; }

/* The form the tiles reveal — kept out of the tiles so they stay compact, per the design. */
.ws-reveal { background: var(--sl-bg-card); border: 1px solid var(--sl-sky-35); border-radius: var(--sl-r-md); padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.ws-reveal[hidden] { display: none; }
.ws-form-row { display: flex; gap: 8px; }
.ws-input { flex: 1; min-width: 0; background: var(--sl-bg-page); border: 1px solid var(--sl-line-2); border-radius: 10px; padding: 9px 12px; color: var(--sl-text); font-size: 12.5px; font-family: var(--sl-font-ui); outline: none; transition: border-color 0.15s ease; }
.ws-input::placeholder { color: var(--sl-text-ghost); }
.ws-input:focus { border-color: var(--sl-sky-50); }
.ws-input:disabled { opacity: 0.4; cursor: not-allowed; }
.ws-input-code { text-transform: uppercase; letter-spacing: 2px; font-weight: 600; font-family: var(--sl-font-mono); }

/* --- buttons --- */
.ws-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 16px; border-radius: 10px; font-size: 12.5px; font-weight: 700; font-family: var(--sl-font-ui); cursor: pointer; border: none; white-space: nowrap; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, filter 0.15s ease; }
.ws-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.ws-btn-primary { background: var(--sl-sky); color: var(--sl-on-sky); }
.ws-btn-primary:hover:not(:disabled) { filter: brightness(1.07); }
.ws-btn-secondary { background: var(--sl-bg-chip); color: var(--sl-text); border: 1px solid var(--sl-line-3); font-weight: 600; }
.ws-btn-secondary:hover:not(:disabled) { background: var(--sl-bg-hover); }
.ws-btn-ghost { background: none; color: var(--sl-text-dim); border: 1px solid transparent; padding: 7px 12px; font-weight: 600; }
.ws-btn-ghost:hover:not(:disabled) { background: oklch(1 0 0 / 0.06); color: var(--sl-text-hi); }
.ws-btn-danger { background: none; color: var(--sl-red-text); border: 1px solid var(--sl-red-12); font-weight: 600; }
.ws-btn-danger:hover:not(:disabled) { background: var(--sl-red-12); }
.ws-btn-sm { padding: 5px 10px; font-size: 11px; font-weight: 600; }
.ws-btn-icon { display: inline-flex; align-items: center; justify-content: center; background: none; border: none; color: var(--sl-text-faint); cursor: pointer; font-size: 14px; padding: 5px; border-radius: var(--sl-r-xs); line-height: 1; transition: background 0.15s ease, color 0.15s ease; }
.ws-btn-icon:hover { color: var(--sl-text-hi); background: oklch(1 0 0 / 0.06); }
.ws-remove-member:hover { color: var(--sl-red-text); background: var(--sl-red-12); }

/* --- detail: header --- */
.ws-header { display: flex; align-items: center; gap: 11px; }
.ws-header-text { flex: 1; min-width: 0; }
.ws-title { color: var(--sl-text-hi); font-family: var(--sl-font-display); font-size: 16px; font-weight: 700; margin: 0; letter-spacing: -0.01em; }
.ws-header-meta { font-size: 11.5px; color: var(--sl-text-faint); margin-top: 2px; }
.ws-code-chip { display: inline-flex; align-items: center; gap: 6px; flex: none; background: var(--sl-sky-12); border: 1px solid var(--sl-sky-35); color: var(--sl-sky-text); border-radius: var(--sl-r-sm); padding: 6px 12px; cursor: pointer; transition: background 0.15s ease; }
.ws-code-chip:hover { background: var(--sl-sky-16); }
.ws-code-value { font-family: var(--sl-font-mono); font-size: 11px; font-weight: 600; letter-spacing: 1px; }

/* --- detail: invite row (design's mail-icon field + solid Invite button) --- */
.ws-invite-bar { display: flex; align-items: center; gap: 9px; margin-top: 18px; }
.ws-field { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; padding: 9px 13px; background: var(--sl-bg-page); border: 1px solid var(--sl-line-2); border-radius: 10px; transition: border-color 0.15s ease; }
.ws-field:focus-within { border-color: var(--sl-sky-50); }
.ws-field svg { flex: none; color: var(--sl-text-ghost); }
.ws-field input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; font-family: var(--sl-font-ui); font-size: 12.5px; color: var(--sl-text); }
.ws-field input::placeholder { color: var(--sl-text-ghost); }
.ws-field.is-disabled { opacity: 0.45; }

/* --- detail: sections ---
   With the 900px clamp gone the pane is wide, so the sections split into two columns rather than
   stretching one column of member rows across it. auto-fit means the container decides: two columns
   when there's room, one when there isn't — no viewport breakpoint to keep in sync. */
.ws-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 0 32px; align-items: start; }
.ws-col { min-width: 0; }
.ws-section { margin-top: 20px; }
.ws-empty { color: var(--sl-text-faint); font-size: 12px; margin: 0 0 10px; line-height: 1.5; }
.ws-loading, .ws-error { color: var(--sl-text-dim); font-size: 13px; padding: 40px 20px; text-align: center; }
.ws-link { background: none; border: none; color: var(--sl-sky-text); cursor: pointer; font-size: 13px; text-decoration: underline; }

/* --- detail: member rows --- */
.ws-member { display: flex; align-items: center; gap: 11px; padding: 10px 4px; border-bottom: 1px solid var(--sl-line); }
.ws-member:last-child { border-bottom: none; }
.ws-avatar { width: 30px; height: 30px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 600; color: var(--sl-text-hi); background: var(--sl-bg-active); }
.ws-member-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.ws-member-name { font-size: 12.5px; font-weight: 600; color: var(--sl-text-hi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-member-sub { font-size: 11px; color: var(--sl-text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-member-role { flex: none; font-size: 11px; color: var(--sl-text-dim); }
.ws-member-role.is-owner { color: var(--sl-sky-text); }
.ws-member-actions { display: flex; align-items: center; gap: 2px; flex: none; }
.ws-anon-dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--sl-text-ghost); margin-right: 5px; vertical-align: middle; }

/* --- detail: danger zone (moved out of the header, which the design keeps clean) --- */
.ws-danger { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--sl-line); display: flex; align-items: center; gap: 10px; }
.ws-danger-text { flex: 1; font-size: 11.5px; color: var(--sl-text-faint); line-height: 1.4; }

/* ===== Cost History ===== */
.cost-history-list {
    max-height: 200px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cost-history-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    gap: 12px;
}

.cost-history-item-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.cost-history-cost {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-primary);
}

.cost-history-tokens {
    font-size: 0.72rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cost-history-time {
    font-size: 0.72rem;
    color: var(--text-secondary);
    white-space: nowrap;
    flex-shrink: 0;
}

.cost-history-empty {
    text-align: center;
    color: var(--text-secondary);
    padding: 16px;
    font-size: 0.85rem;
}

/* ============================== */
/* Collaboration UI               */
/* ============================== */

/* Toolbar collaborate button */
.collab-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.15s ease;
    margin-right: 8px;
    min-height: 40px;
}

.btn-new-tab:focus-visible,
.palette-footer-btn:focus-visible,
.tools-dropdown-item:focus-visible,
.toolbar-menu-btn:focus-visible,
.toolbar-icon-btn:focus-visible,
.edge-show-tab:focus-visible,
.control-hide-btn:focus-visible,

.collab-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.collab-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    color: var(--text-primary);
}

.collab-btn.collab-active {
    background: rgba(91, 164, 207, 0.15);
    border-color: rgba(91, 164, 207, 0.35);
    color: var(--accent);
}

.collab-btn.collab-active:hover {
    background: rgba(91, 164, 207, 0.22);
}

.collab-btn.collab-connecting {
    border-color: rgba(245, 158, 11, 0.4);
    color: #f59e0b;
}

.collab-btn.collab-error {
    border-color: rgba(239, 68, 68, 0.4);
    color: #ef4444;
}

.collab-btn-text {
    font-weight: 500;
}

.collab-peer-dots {
    display: flex;
    gap: 3px;
    align-items: center;
    margin-left: 2px;
}

.collab-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    border: 1px solid rgba(0, 0, 0, 0.3);
}

.collab-dot-more {
    font-size: 0.65rem;
    color: var(--text-secondary);
    margin-left: 1px;
}

/* Dropdown menu */
.collab-dropdown {
    position: fixed;
    z-index: 500;
    width: 260px;
    background: rgba(30, 30, 30, 0.97);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    padding: 8px 0;
    animation: collabDropIn 0.15s ease;
}

@keyframes collabDropIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.collab-dropdown-section {
    padding: 8px 14px;
}

.collab-dropdown-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
    margin: 4px 14px;
}

/* Room code display */
.collab-room-code-display {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.collab-room-label {
    font-size: 0.7rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.collab-room-code {
    font-family: 'Segoe UI Mono', 'Cascadia Code', monospace;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 2px;
    flex: 1;
}

.collab-copy-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.15s;
    display: flex;
    align-items: center;
}

.collab-copy-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
}

/* Input styling */
.collab-input-label {
    display: block;
    font-size: 0.7rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 6px;
}

.collab-username-input,
.collab-code-input {
    width: 100%;
    padding: 7px 10px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.85rem;
    outline: none;
    transition: border-color 0.15s;
    box-sizing: border-box;
}

.collab-username-input:focus,
.collab-code-input:focus {
    border-color: var(--accent);
}

.collab-code-input {
    font-family: 'Segoe UI Mono', 'Cascadia Code', monospace;
    letter-spacing: 2px;
    text-align: center;
    font-weight: 600;
    font-size: 1rem;
}

/* Join row */
.collab-join-row {
    display: flex;
    gap: 6px;
}

.collab-join-row .collab-code-input {
    flex: 1;
}

.collab-join-row .collab-join-btn {
    flex-shrink: 0;
    width: auto;
    padding: 7px 14px;
}

/* Action buttons */
.collab-action-btn {
    width: 100%;
    padding: 8px 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: center;
}

.collab-create-btn {
    background: rgba(91, 164, 207, 0.15);
    border-color: rgba(91, 164, 207, 0.3);
    color: var(--accent);
}

.collab-create-btn:hover {
    background: rgba(91, 164, 207, 0.25);
}

.collab-join-btn {
    background: rgba(255, 255, 255, 0.06);
}

.collab-join-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.collab-leave-btn {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.25);
    color: #ef4444;
}

.collab-leave-btn:hover {
    background: rgba(239, 68, 68, 0.2);
}

.collab-action-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.share-download-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.06);
    text-align: left;
}

.share-download-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* User list */
.collab-user-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.collab-user-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    border-radius: 4px;
}

.collab-user-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid rgba(0, 0, 0, 0.2);
}

.collab-user-name {
    font-size: 0.85rem;
    color: var(--text-primary);
}

.collab-username-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* ============================================
   Tutorial System
   ============================================ */

/* --- Floating Tutorial Card --- */

.tutorial-card {
    position: fixed;
    bottom: 80px;
    right: 24px;
    width: 360px;
    z-index: 10020;
    background: rgba(10, 10, 10, 0.95);
    border: 1px solid rgba(91, 164, 207, 0.25);
    border-radius: 16px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(20px);
    animation: tutorialCardSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
    user-select: none;
}

@keyframes tutorialCardSlideIn {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.tutorial-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: rgba(91, 164, 207, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    cursor: grab;
}

.tutorial-card-header:active {
    cursor: grabbing;
}

.tutorial-card-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tutorial-card-icon {
    color: var(--accent);
    flex-shrink: 0;
}

.tutorial-card-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent);
}

.tutorial-card-controls {
    display: flex;
    gap: 4px;
}

.tutorial-card-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.tutorial-card-btn:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.08);
}

.tutorial-card-body {
    padding: 16px;
}

.tutorial-card-step-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.tutorial-card-step-desc {
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.55;
}

/* Status indicator (waiting / completed) */

.tutorial-card-status {
    display: none;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    font-size: 0.75rem;
    color: var(--text-secondary);
    transition: all 0.3s ease;
}

.tutorial-card-status.tutorial-status-completed {
    background: rgba(74, 222, 128, 0.08);
    border-color: rgba(74, 222, 128, 0.2);
    color: var(--success);
}

.tutorial-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    animation: tutorialStatusPulse 1.2s ease-in-out infinite;
    flex-shrink: 0;
}

.tutorial-status-dot.completed {
    background: var(--success);
    animation: none;
}

@keyframes tutorialStatusPulse {

    0%,
    100% {
        opacity: 0.3;
        transform: scale(0.8);
    }

    50% {
        opacity: 1;
        transform: scale(1.1);
    }
}

.tutorial-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* Progress dots */

.tutorial-card-progress {
    display: flex;
    gap: 6px;
}

.tutorial-progress-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    transition: all 0.2s ease;
}

.tutorial-progress-dot.active {
    background: var(--accent);
    box-shadow: 0 0 6px rgba(91, 164, 207, 0.4);
}

.tutorial-progress-dot.completed {
    background: var(--success);
}

/* Action buttons */

.tutorial-card-actions {
    display: flex;
    gap: 8px;
}

.tutorial-card-back {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 0.78rem;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s ease;
}

.tutorial-card-back:hover {
    color: var(--text-primary);
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.04);
}

.tutorial-card-skip {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 0.78rem;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s ease;
}

.tutorial-card-skip:hover {
    color: var(--text-primary);
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.04);
}

.tutorial-card-next {
    background: rgba(91, 164, 207, 0.12);
    border: 1px solid rgba(91, 164, 207, 0.3);
    color: var(--accent);
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 0.78rem;
    cursor: pointer;
    font-family: inherit;
    font-weight: 500;
    transition: all 0.15s ease;
}

.tutorial-card-next:hover {
    background: rgba(91, 164, 207, 0.2);
    border-color: rgba(91, 164, 207, 0.5);
    color: var(--accent-hover);
}

/* Minimized state */

.tutorial-card-minimized .tutorial-card-body,
.tutorial-card-minimized .tutorial-card-footer {
    display: none;
}

.tutorial-card-minimized {
    width: auto;
    min-width: 180px;
}

/* --- Element Highlight (pulsing ring) --- */

.tutorial-highlight {
    outline: 2px solid var(--accent) !important;
    outline-offset: 3px;
    animation: tutorialPulse 1.5s ease-in-out infinite;
}

@keyframes tutorialPulse {

    0%,
    100% {
        outline-color: rgba(91, 164, 207, 0.6);
    }

    50% {
        outline-color: rgba(91, 164, 207, 1.0);
    }
}

/* --- Home Tutorial Tab (Lesson Cards) --- */

.tutorial-lesson-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px 0;
}

.tutorial-lesson-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.tutorial-lesson-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(91, 164, 207, 0.2);
}

.tutorial-lesson-card-completed {
    border-color: rgba(74, 222, 128, 0.2);
}

.tutorial-lesson-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(91, 164, 207, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--accent);
}

.tutorial-lesson-card-completed .tutorial-lesson-icon {
    background: rgba(74, 222, 128, 0.1);
    color: var(--success);
}

.tutorial-lesson-info {
    flex: 1;
}

.tutorial-lesson-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.tutorial-lesson-desc {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.tutorial-lesson-badge {
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 12px;
    font-weight: 500;
    flex-shrink: 0;
    align-self: center;
}

.tutorial-lesson-badge-new {
    background: rgba(91, 164, 207, 0.12);
    color: var(--accent);
    border: 1px solid rgba(91, 164, 207, 0.25);
}

.tutorial-lesson-badge-done {
    background: rgba(74, 222, 128, 0.1);
    color: var(--success);
    border: 1px solid rgba(74, 222, 128, 0.2);
}

.tutorial-lesson-badge-locked {
    background: rgba(255, 255, 255, 0.04);
    color: #555;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.tutorial-lesson-badge-required {
    background: rgba(251, 191, 36, 0.12);
    color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, 0.25);
}

.tutorial-lesson-card-locked {
    opacity: 0.45;
    cursor: not-allowed;
}

.tutorial-lesson-card-locked:hover {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.06);
}

.tutorial-lesson-card-locked .tutorial-lesson-icon {
    background: rgba(255, 255, 255, 0.04);
    color: #555;
}

.tutorial-lesson-card-required {
    border-color: rgba(251, 191, 36, 0.15);
}

.tutorial-lesson-card-required .tutorial-lesson-icon {
    background: rgba(251, 191, 36, 0.1);
    color: #fbbf24;
}

.tutorial-reset-row {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    justify-content: flex-end;
}

.tutorial-reset-btn {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 0.78rem;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s ease;
}

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

/* --- Tutorial Category Sections --- */

.tutorial-category {
    margin-bottom: 4px;
}

.tutorial-category-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 8px;
    transition: color 0.15s ease;
    user-select: none;
}

.tutorial-category-header:hover {
    color: var(--text-primary);
}

.tutorial-category-chevron {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.tutorial-category-collapsed .tutorial-category-chevron {
    transform: rotate(-90deg);
}

.tutorial-category-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 0 8px 0;
    transition: all 0.2s ease;
}

.tutorial-category-collapsed .tutorial-category-body {
    display: none;
}

.tutorial-category-progress {
    margin-left: auto;
    font-size: 0.7rem;
    color: var(--text-tertiary);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

/* In-progress lesson card */
.tutorial-lesson-card-inprogress {
    border-color: rgba(91, 164, 207, 0.25);
}

.tutorial-lesson-card-inprogress .tutorial-lesson-icon {
    background: rgba(91, 164, 207, 0.12);
    color: var(--accent);
}

/* Continue badge */
.tutorial-lesson-badge-progress {
    background: rgba(91, 164, 207, 0.12);
    color: var(--accent);
    border: 1px solid rgba(91, 164, 207, 0.25);
}

/* Sub-lesson progress bar */
.tutorial-lesson-progress-bar {
    height: 3px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 2px;
    margin-top: 8px;
    overflow: hidden;
}

.tutorial-lesson-progress-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 2px;
    transition: width 0.3s ease;
}

.tutorial-lesson-card-completed .tutorial-lesson-progress-fill {
    background: var(--success);
}

/* Sub-lesson step indicators */
.tutorial-lesson-substeps {
    display: flex;
    gap: 12px;
    margin-top: 6px;
    font-size: 0.7rem;
    color: var(--text-tertiary);
    flex-wrap: wrap;
}

.tutorial-lesson-substeps .substep.completed {
    color: var(--success);
}

.tutorial-lesson-substeps .substep.active {
    color: var(--accent);
}

/* ============================================
   Update Log
   ============================================ */

.update-log-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.update-log-entry {
    background: rgba(9, 9, 11, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 20px 24px;
    transition: border-color 0.15s ease;
}

.update-log-entry:hover {
    border-color: rgba(255, 255, 255, 0.12);
}

.update-log-entry-latest {
    border-color: rgba(91, 164, 207, 0.25);
    background: rgba(91, 164, 207, 0.04);
}

.update-log-entry-latest:hover {
    border-color: rgba(91, 164, 207, 0.4);
}

.update-log-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.update-log-version-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.update-log-version {
    font-size: 0.8rem;
    font-weight: 600;
    font-family: 'SF Mono', 'Fira Code', monospace;
    color: var(--accent);
    background: rgba(91, 164, 207, 0.1);
    padding: 2px 8px;
    border-radius: 4px;
}

.update-log-tag {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 6px;
    border-radius: 3px;
}

.update-log-tag-latest {
    color: #34d399;
    background: rgba(52, 211, 153, 0.12);
}

.update-log-date {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.update-log-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 12px 0;
}

.update-log-highlights {
    margin: 0;
    padding: 0 0 0 18px;
    list-style: none;
}

.update-log-highlights li {
    position: relative;
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.6;
    padding-left: 4px;
}

.update-log-highlights li::before {
    content: '';
    position: absolute;
    left: -14px;
    top: 9px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--text-secondary);
    opacity: 0.5;
}

/* ============================================
   Video Player Modal
   ============================================ */

.video-player-overlay {
    position: fixed;
    inset: 0;
    z-index: 10020;
    background: rgba(0, 0, 0, 0.0);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s ease;
}

.video-player-overlay.video-player-visible {
    background: rgba(0, 0, 0, 0.85);
}

.video-player-container {
    position: relative;
    width: 90vw;
    max-width: 1100px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 12px;
    overflow: hidden;
    background: #0a0a14;
    border: 1px solid rgba(168, 85, 247, 0.15);
    box-shadow:
        0 0 60px rgba(168, 85, 247, 0.08),
        0 24px 48px rgba(0, 0, 0, 0.5);
    transform: scale(0.95);
    opacity: 0;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.video-player-visible .video-player-container {
    transform: scale(1);
    opacity: 1;
}

.video-player-close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #999;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.video-player-close:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.video-player-video {
    width: 100%;
    max-height: calc(85vh - 52px);
    background: #000;
    outline: none;
    border-radius: 12px 12px 0 0;
}

.video-player-video.hidden {
    display: none;
}

/* Spinner */
.video-player-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 80px 40px;
}

.video-player-spinner.hidden {
    display: none;
}

.video-player-spinner-ring {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(168, 85, 247, 0.15);
    border-top-color: #a855f7;
    border-radius: 50%;
    animation: video-player-spin 0.8s linear infinite;
}

@keyframes video-player-spin {
    to {
        transform: rotate(360deg);
    }
}

.video-player-spinner-text {
    font-size: 0.85rem;
    color: rgba(168, 85, 247, 0.7);
    font-family: 'Segoe UI', sans-serif;
}

/* Error */
.video-player-error {
    padding: 60px 40px;
    font-size: 0.9rem;
    color: #ef4444;
    text-align: center;
    font-family: 'Segoe UI', sans-serif;
}

/* Bottom bar */
.video-player-bottom-bar {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 10px 16px;
    background: rgba(10, 10, 20, 0.95);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.video-player-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 8px;
    background: rgba(168, 85, 247, 0.1);
    border: 1px solid rgba(168, 85, 247, 0.2);
    color: #c084fc;
    font-size: 0.8rem;
    font-family: 'Segoe UI', sans-serif;
    cursor: pointer;
    transition: all 0.15s ease;
}

.video-player-btn:hover {
    background: rgba(168, 85, 247, 0.2);
    border-color: rgba(168, 85, 247, 0.35);
    color: #d8b4fe;
}

/* =========================================
   Video Editor (.veditor-*)
   ========================================= */

/* Full-screen container overrides the home tab panel max-width */
.veditor-fullscreen-tab {
    padding: 0 !important;
}

.veditor-fullscreen-tab.home-tab-active {
    display: flex !important;
}

.veditor-fullscreen-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.veditor-root {
    --ved-surface-0: #0a0f1b;
    --ved-surface-1: #0f1626;
    --ved-surface-2: #131c2f;
    --ved-surface-3: #172238;
    --ved-border-soft: rgba(154, 177, 214, 0.12);
    --ved-border-strong: rgba(154, 177, 214, 0.2);
    --ved-accent: var(--accent, #5ba4cf);
    --ved-accent-soft: rgba(91, 164, 207, 0.14);
    --ved-accent-strong: rgba(91, 164, 207, 0.28);
    --ved-danger-soft: rgba(239, 68, 68, 0.16);
    --ved-danger-strong: rgba(239, 68, 68, 0.34);
    --ved-pane-radius: 8px;
    --ved-pane-shadow: none;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 0px);
    background: var(--ved-surface-0);
    color: var(--text-primary);
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    letter-spacing: -0.01em;
    position: relative;
}

/* --- Top Row: Assets + Preview --- */
.veditor-top {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    padding: 6px 6px 0;
    gap: 2px;
}

/* --- Asset Panel (left) --- */
.veditor-assets {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: var(--ved-surface-1);
    border: 1px solid var(--ved-border-soft);
    border-radius: var(--ved-pane-radius) var(--ved-pane-radius) 0 0;
    height: 100%;
    overflow: hidden;
    box-shadow: var(--ved-pane-shadow);
    position: relative;
}

.veditor-assets::before,
.veditor-preview::before,
.veditor-properties::before {
    display: none;
}

.veditor-assets-header {
    padding: 8px 10px;
    border-bottom: 1px solid var(--ved-border-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.015);
}

.veditor-assets-title {
    font-size: 0.9rem;
    font-weight: 650;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.veditor-assets-filter {
    display: flex;
    gap: 4px;
}

.veditor-filter-btn {
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 0.71rem;
    font-weight: 500;
    background: transparent;
    border: 1px solid var(--ved-border-soft);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.veditor-filter-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--ved-border-strong);
}

.veditor-filter-btn.veditor-filter-active {
    background: var(--ved-accent-soft);
    border-color: var(--ved-accent-strong);
    color: #7dbde8;
    box-shadow: none;
}

.veditor-assets-list {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: 0;
    max-height: 100%;
}

.veditor-assets-list::-webkit-scrollbar {
    width: 6px;
}

.veditor-assets-list::-webkit-scrollbar-track {
    background: transparent;
}

.veditor-assets-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
}

.veditor-assets-list::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* Asset card */
.veditor-asset-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid transparent;
    cursor: grab;
    transition: background 0.15s ease, border-color 0.15s ease;
    user-select: none;
    position: relative;
    overflow: hidden;
}

.veditor-asset-card::before {
    display: none;
}

.veditor-asset-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--ved-border-soft);
}

.veditor-asset-card.dragging {
    opacity: 0.5;
    transform: scale(0.98);
}

.veditor-asset-card:active {
    cursor: grabbing;
    transform: scale(0.99);
}

.veditor-asset-thumb {
    width: 52px;
    height: 40px;
    border-radius: 6px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.04);
    flex-shrink: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.veditor-asset-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.veditor-asset-thumb.veditor-asset-video {
    border: 1px solid rgba(168, 85, 247, 0.35);
    box-shadow: 0 2px 8px rgba(168, 85, 247, 0.15);
}

.veditor-asset-play-icon {
    position: absolute;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    color: rgba(255, 255, 255, 0.9);
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    backdrop-filter: blur(4px);
}

.veditor-asset-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(91, 164, 207, 0.2), rgba(168, 85, 247, 0.2));
}

.veditor-asset-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.veditor-asset-name {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.veditor-asset-type {
    font-size: 0.65rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

/* Empty state */
.veditor-assets-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 48px 24px;
    text-align: center;
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.85rem;
    font-weight: 500;
}

.veditor-assets-hint {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.18);
    max-width: 200px;
    line-height: 1.5;
    font-weight: 400;
}

/* --- Preview Panel (center/right) --- */
.veditor-preview {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--ved-surface-1);
    border: 1px solid var(--ved-border-soft);
    border-radius: var(--ved-pane-radius) var(--ved-pane-radius) 0 0;
    box-shadow: var(--ved-pane-shadow);
    position: relative;
}

.veditor-preview-viewport {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0b1220;
    overflow: hidden;
    position: relative;
}

.veditor-preview-canvas {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 6px;
    border: 1px solid var(--ved-border-soft);
    box-shadow: none;
}

/* --- Direct-manipulation transform overlay (drag clip to move, corners to scale) --- */
.veditor-transform-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 6;
}
.veditor-transform-box {
    position: absolute;
    box-sizing: border-box;
    border: 1.5px solid #5ba4cf;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
    pointer-events: auto;
    cursor: move;
}
.veditor-transform-handle {
    position: absolute;
    width: 13px;
    height: 13px;
    background: #fff;
    border: 1.5px solid #5ba4cf;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    pointer-events: auto;
    transform: translate(-50%, -50%);
}
.veditor-transform-handle.nw { left: 0;    top: 0;    cursor: nwse-resize; }
.veditor-transform-handle.ne { left: 100%; top: 0;    cursor: nesw-resize; }
.veditor-transform-handle.sw { left: 0;    top: 100%; cursor: nesw-resize; }
.veditor-transform-handle.se { left: 100%; top: 100%; cursor: nwse-resize; }

/* --- Transform sliders (Scale / Opacity) — friendlier than drag-numbers --- */
.veditor-prop-slider {
    flex: 1;
    min-width: 0;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.15);
    outline: none;
    cursor: pointer;
    margin-right: 8px;
}
.veditor-prop-slider:disabled {
    opacity: 0.4;
    cursor: default;
}
.veditor-prop-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #5ba4cf;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.veditor-prop-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border: none;
    border-radius: 50%;
    background: #5ba4cf;
    cursor: pointer;
}

.veditor-preview-controls {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 8px 10px;
    background: var(--ved-surface-1);
    border-top: 1px solid var(--ved-border-soft);
}

.veditor-ctrl-edge {
    display: flex;
    align-items: center;
}

.veditor-ctrl-edge-left {
    display: none;
}

.veditor-ctrl-edge-right {
    margin-left: auto;
    justify-content: flex-end;
}

.veditor-ctrl-center {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    background: #0b1220;
    border: 1px solid var(--ved-border-soft);
    border-radius: 8px;
    padding: 3px;
}

.veditor-ctrl-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 6px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    min-width: 34px;
    height: 30px;
}

.veditor-ctrl-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--ved-border-soft);
    color: var(--text-primary);
}

.veditor-ctrl-play {
    background: var(--ved-accent-soft);
    border-color: var(--ved-accent-strong);
    color: #7dbde8;
    min-width: 40px;
}

.veditor-ctrl-stop {
    min-width: 34px;
    color: rgba(215, 225, 245, 0.75);
    background: transparent;
    border-color: transparent;
}

.veditor-ctrl-stop:hover {
    color: rgba(240, 246, 255, 0.92);
    background: rgba(255, 255, 255, 0.09);
}

.veditor-ctrl-play:hover {
    background: rgba(91, 164, 207, 0.2);
    border-color: rgba(91, 164, 207, 0.36);
    color: #a8d4f0;
    box-shadow: none;
}

.veditor-ctrl-export {
    background: rgba(168, 85, 247, 0.12);
    border-color: rgba(168, 85, 247, 0.25);
    color: #d8b4fe;
    padding-left: 14px;
    padding-right: 14px;
}

.veditor-ctrl-export:hover {
    background: rgba(168, 85, 247, 0.22);
    border-color: rgba(168, 85, 247, 0.4);
    color: #e8d5ff;
    box-shadow: 0 4px 12px rgba(168, 85, 247, 0.2);
}


.veditor-time-display {
    font-size: 0.84rem;
    font-weight: 600;
    color: rgba(230, 239, 252, 0.9);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.2px;
    padding: 5px 9px;
    min-width: 150px;
    text-align: center;
    border-radius: 6px;
    border: 1px solid var(--ved-border-soft);
    background: rgba(5, 9, 18, 0.6);
    font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
}

/* --- Toolbar --- */
/* --- Timeline section: left toolbar dock + timeline canvas --- */
.veditor-timeline-section {
    display: flex;
    align-items: stretch;
    gap: 2px;
    padding: 0 6px 6px;
    flex-shrink: 0;
}

.veditor-toolbar {
    width: 156px;
    min-width: 148px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 6px;
    background: var(--ved-surface-1);
    border: 1px solid var(--ved-border-soft);
    border-radius: 0 0 0 8px;
    box-shadow: none;
    overflow: hidden;
}

.veditor-toolbar-main {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    padding: 0;
    min-width: 0;
}

.veditor-toolbar-zoom-row {
    margin-top: 2px;
}

.veditor-tool-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 0;
    width: 100%;
    border-radius: 6px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-secondary);
    font-size: 0.7rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    min-width: 0;
    height: 32px;
}

.veditor-toolbar .veditor-tool-btn span {
    display: none;
}

.veditor-tool-btn:hover {
    background: rgba(255, 255, 255, 0.07);
    color: var(--text-primary);
    border-color: var(--ved-border-soft);
}

.veditor-tool-btn.veditor-tool-active {
    background: var(--ved-accent-soft);
    border-color: var(--ved-accent-strong);
    color: #7dbde8;
    box-shadow: none;
}

.veditor-tool-btn.veditor-tool-danger:hover {
    background: var(--ved-danger-soft);
    border-color: var(--ved-danger-strong);
    color: #f87171;
}

.veditor-tool-btn:focus-visible,
.veditor-project-btn:focus-visible,
.veditor-ctrl-btn:focus-visible,
.veditor-tab-btn:focus-visible {
    outline: 2px solid var(--ved-accent);
    outline-offset: 1px;
}

.veditor-zoom-control {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 6px;
    border: 1px solid var(--ved-border-soft);
    width: 100%;
    justify-content: space-between;
}

.veditor-zoom-control .veditor-tool-btn {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
}

.veditor-zoom-label {
    font-size: 0.66rem;
    font-weight: 500;
    color: var(--text-secondary);
    min-width: 0;
    flex: 1;
    text-align: center;
    font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
}

/* --- Timeline --- */
.veditor-timeline-wrapper {
    flex: 1;
    min-width: 0;
    flex-shrink: 0;
    background: var(--ved-surface-1);
    border: 1px solid var(--ved-border-soft);
    border-radius: 0 0 8px 0;
    overflow: hidden;
    position: relative;
    cursor: grab;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.veditor-timeline-wrapper:active {
    cursor: grabbing;
}

.veditor-timeline-wrapper.scrubbing {
    cursor: ew-resize;
}

/* --- Floating multi-select actions bar --- */
.veditor-selection-bar {
    position: absolute;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 8px;
    background: rgba(20, 22, 30, 0.92);
    border: 1px solid var(--ved-border-soft);
    border-radius: 9px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    animation: veditor-selbar-in 0.12s ease;
    pointer-events: auto;
}

@keyframes veditor-selbar-in {
    from { opacity: 0; transform: translate(-50%, 6px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

.veditor-selbar-count {
    font-size: 0.72rem;
    font-weight: 600;
    color: #9ad7ff;
    padding: 0 6px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.veditor-selbar-sep {
    width: 1px;
    align-self: stretch;
    margin: 2px 2px;
    background: var(--ved-border-soft);
}

.veditor-selbar-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 26px;
    padding: 0 8px;
    border-radius: 6px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.veditor-selbar-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--ved-border-soft);
    color: var(--text-primary);
}

.veditor-selbar-btn.veditor-selbar-danger:hover {
    background: var(--ved-danger-soft);
    border-color: var(--ved-danger-strong);
    color: #f87171;
}

.veditor-timeline-canvas-host {
    flex: 1;
    min-height: 0;
    position: relative;
}

.veditor-timeline-canvas {
    width: 100%;
    height: 100%;
    display: block;
}

.veditor-timeline-scrollbar {
    height: 16px;
    flex-shrink: 0;
    padding: 2px 8px 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(0, 0, 0, 0.14);
}

.veditor-timeline-scrollbar-track {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    cursor: pointer;
    overflow: hidden;
}

.veditor-timeline-scrollbar-thumb {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    min-width: 24px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: grab;
    transform: translateX(0);
}

.veditor-timeline-scrollbar-thumb:active {
    cursor: grabbing;
}

.veditor-scrollbar-handle {
    width: 8px;
    height: 100%;
    flex-shrink: 0;
    cursor: ew-resize;
}

.veditor-scrollbar-grip {
    flex: 1;
    height: 100%;
    position: relative;
}

.veditor-scrollbar-grip::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 16px;
    height: 2px;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.35);
    border-radius: 999px;
}

/* --- Loading Overlay --- */
.veditor-loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(8, 12, 24, 0.85);
    backdrop-filter: blur(16px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99;
}

.veditor-loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.veditor-loading-spinner {
    width: 32px;
    height: 32px;
    border: 2.5px solid rgba(255, 255, 255, 0.1);
    border-top-color: rgba(91, 164, 207, 0.8);
    border-radius: 50%;
    animation: veditor-spin 0.8s linear infinite;
}

@keyframes veditor-spin {
    to { transform: rotate(360deg); }
}

.veditor-loading-text {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 0.02em;
}

.veditor-loading-detail {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.35);
    min-height: 1em;
    text-align: center;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.veditor-loading-bar {
    width: 200px;
    height: 3px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
    overflow: hidden;
}

.veditor-loading-bar-fill {
    height: 100%;
    background: rgba(91, 164, 207, 0.7);
    border-radius: 2px;
    transition: width 0.25s ease;
    width: 0%;
}

.veditor-loading-bar-fill.indeterminate {
    width: 40% !important;
    animation: veditor-loading-slide 1.2s ease-in-out infinite;
}

@keyframes veditor-loading-slide {
    0%   { transform: translateX(-100%); }
    50%  { transform: translateX(300%); }
    100% { transform: translateX(-100%); }
}

/* --- Export Overlay --- */
.veditor-export-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(24px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

.veditor-export-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding: 48px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4);
}

.veditor-export-text {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-primary);
}

.veditor-export-progress {
    width: 320px;
    height: 5px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    overflow: hidden;
}

.veditor-export-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #5ba4cf, #7dbde8);
    border-radius: 3px;
    width: 0%;
    transition: width 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 12px rgba(91, 164, 207, 0.4);
}

.veditor-export-percent {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
}

.veditor-export-cancel {
    margin-top: 8px;
    background: rgba(239, 68, 68, 0.15) !important;
    border: 1px solid rgba(239, 68, 68, 0.4) !important;
    color: #f87171 !important;
    padding: 8px 32px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    cursor: pointer !important;
    transition: background 0.15s, border-color 0.15s;
}
.veditor-export-cancel:hover {
    background: rgba(239, 68, 68, 0.3) !important;
    border-color: rgba(239, 68, 68, 0.6) !important;
    color: #fca5a5 !important;
}

/* --- Project Bar --- */
.veditor-project-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 8px;
    background: var(--ved-surface-1);
    border-bottom: 1px solid var(--ved-border-soft);
    min-height: 32px;
    flex-shrink: 0;
}

/* --- Timeline Composition Tabs --- */
.veditor-timeline-tabs {
    display: flex;
    align-items: center;
    padding: 0 8px;
    background: var(--ved-surface-1);
    border-bottom: 1px solid var(--ved-border-soft);
    flex-shrink: 0;
    min-height: 28px;
    gap: 2px;
}

.veditor-timeline-tabs-list {
    display: flex;
    align-items: center;
    gap: 2px;
    overflow-x: auto;
    min-width: 0;
    flex: 1;
}

.veditor-timeline-tabs-list::-webkit-scrollbar {
    height: 0;
}

.veditor-tl-tab {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: transparent;
    border: 1px solid transparent;
    border-bottom: 2px solid transparent;
    border-radius: 4px 4px 0 0;
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    max-width: 160px;
    transition: all 0.15s ease;
    user-select: none;
    margin-bottom: -1px;
}

.veditor-tl-tab:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary);
}

.veditor-tl-tab.active {
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
    border-bottom-color: #5ba4cf;
}

.veditor-tl-tab-name {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
}

.veditor-tl-tab-input {
    background: var(--bg-primary);
    border: 1px solid var(--accent);
    color: var(--text-primary);
    font-size: 0.72rem;
    padding: 1px 4px;
    border-radius: 3px;
    width: 90px;
    outline: none;
}

.veditor-tl-tab-close {
    display: none;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 0.8rem;
    cursor: pointer;
    padding: 0 2px;
    line-height: 1;
    border-radius: 3px;
}

.veditor-tl-tab:hover .veditor-tl-tab-close,
.veditor-tl-tab.active .veditor-tl-tab-close {
    display: inline-block;
}

.veditor-tl-tab-close:hover {
    background: var(--danger);
    color: #fff;
}

.veditor-timeline-tab-add {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    color: var(--text-secondary);
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.15s;
}

.veditor-timeline-tab-add:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
    border-color: var(--ved-border-soft);
}

.veditor-project-name-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
}

.veditor-project-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    cursor: default;
    user-select: none;
}

.veditor-project-name-input {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(168, 85, 247, 0.5);
    border-radius: 4px;
    padding: 2px 6px;
    outline: none;
    font-family: inherit;
}

.veditor-project-actions {
    display: flex;
    gap: 3px;
}

.veditor-project-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: transparent;
    border: 1px solid var(--ved-border-soft);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.veditor-project-btn:hover {
    background: rgba(255, 255, 255, 0.11);
    color: var(--text-primary);
    border-color: var(--ved-border-strong);
}

.veditor-project-btn-close:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.3);
}

/* --- Project Picker Dropdown --- */
.veditor-project-picker {
    position: absolute;
    z-index: 100;
    width: 320px;
    max-height: 360px;
    background: rgba(20, 20, 30, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(20px);
    overflow: hidden;
}

.veditor-picker-header {
    padding: 10px 14px 8px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: rgba(255, 255, 255, 0.35);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.veditor-picker-list {
    overflow-y: auto;
    max-height: 300px;
    padding: 4px;
}

.veditor-picker-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.veditor-picker-item:hover {
    background: rgba(255, 255, 255, 0.06);
}

.veditor-picker-active {
    background: rgba(168, 85, 247, 0.12);
    border-left: 2px solid rgba(168, 85, 247, 0.7);
}

.veditor-picker-item-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.veditor-picker-item-name {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.veditor-picker-item-meta {
    font-size: 0.7rem;
    color: var(--text-secondary);
}

.veditor-picker-item-delete {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    background: none;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 4px;
    opacity: 0;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.veditor-picker-item:hover .veditor-picker-item-delete {
    opacity: 1;
}

.veditor-picker-item-delete:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.veditor-picker-empty {
    padding: 24px 14px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.82rem;
}

/* --- Asset panel view modes --- */
.veditor-assets-header {
    flex-wrap: wrap;
}

.veditor-assets-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.veditor-view-toggle {
    display: flex;
    gap: 2px;
}

.veditor-view-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 5px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.veditor-view-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
}

.veditor-view-btn.veditor-view-active {
    background: rgba(91, 164, 207, 0.15);
    color: var(--accent);
}

/* Compact details (excel-like) view */
.veditor-assets-list.veditor-assets-details {
    padding: 0;
    gap: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.veditor-asset-row {
    display: grid;
    grid-template-columns: 28px 1fr 60px;
    align-items: center;
    height: 28px;
    padding: 0 10px;
    cursor: grab;
    user-select: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    transition: background 0.1s ease;
}

.veditor-asset-row:hover {
    background: rgba(255, 255, 255, 0.04);
}

.veditor-asset-row.dragging {
    opacity: 0.5;
}

.veditor-asset-row-header {
    height: 24px;
    cursor: default;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    position: sticky;
    top: 0;
    z-index: 1;
}

.veditor-asset-row-header span {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.veditor-asset-col-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    opacity: 0.7;
}

.veditor-asset-col-icon-video {
    color: #a855f7;
}

.veditor-asset-col-name {
    font-size: 0.72rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 6px;
}

.veditor-asset-col-date {
    font-size: 0.65rem;
    color: var(--text-secondary);
    text-align: right;
    white-space: nowrap;
}

/* Thumbnails grid view */
.veditor-assets-list.veditor-assets-thumbnails {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 8px;
    padding: 8px;
    overflow-y: auto;
    overflow-x: hidden;
}

.veditor-asset-grid-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 6px;
    max-width: 180px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.04);
    background: rgba(255, 255, 255, 0.02);
    cursor: grab;
    transition: all 0.15s ease;
}

.veditor-asset-grid-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-1px);
}

.veditor-asset-grid-card.dragging {
    opacity: 0.5;
}

.veditor-asset-grid-thumb {
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 6px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.veditor-asset-grid-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.veditor-asset-grid-thumb.veditor-asset-video {
    border: 1px solid rgba(168, 85, 247, 0.35);
}

.veditor-asset-grid-name {
    font-size: 0.72rem;
    color: var(--text-secondary);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* --- Folder bar & breadcrumbs --- */
.veditor-folder-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    min-height: 26px;
    background: rgba(255, 255, 255, 0.015);
}

.veditor-breadcrumbs {
    flex: 1;
    font-size: 0.72rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.veditor-breadcrumb {
    color: var(--text-secondary);
}

.veditor-breadcrumb-link {
    color: rgba(91, 164, 207, 0.8);
    cursor: pointer;
}

.veditor-breadcrumb-link:hover {
    color: rgba(91, 164, 207, 1);
    text-decoration: underline;
}

.veditor-breadcrumb-sep {
    color: rgba(255, 255, 255, 0.2);
    margin: 0 1px;
}

.veditor-new-folder-btn {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    padding: 2px 4px;
    display: flex;
    align-items: center;
    transition: all 0.15s;
}

.veditor-new-folder-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(91, 164, 207, 0.9);
    border-color: rgba(91, 164, 207, 0.3);
}

/* Folder cards */
.veditor-folder-card {
    cursor: pointer !important;
}

.veditor-folder-card:hover {
    background: rgba(91, 164, 207, 0.08) !important;
}

.veditor-folder-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(91, 164, 207, 0.05) !important;
    border: 1px dashed rgba(91, 164, 207, 0.2) !important;
}

.veditor-folder-name {
    color: rgba(91, 164, 207, 0.85) !important;
}

.veditor-folder-icon svg {
    fill: rgba(91, 164, 207, 0.4);
    stroke: rgba(91, 164, 207, 0.8);
}

/* --- Properties panel --- */
.veditor-properties {
    width: 240px;
    min-width: 140px;
    max-width: 420px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--ved-border-soft);
    border-radius: var(--ved-pane-radius) var(--ved-pane-radius) 0 0;
    background: var(--ved-surface-1);
    position: relative;
    box-shadow: var(--ved-pane-shadow);
}

.veditor-root.veditor-has-selection .veditor-properties {
    border-color: var(--ved-accent-strong);
    box-shadow: inset 0 0 0 1px rgba(91, 164, 207, 0.2);
}

.veditor-properties-resizer {
    position: absolute;
    left: -4px;
    top: 0;
    bottom: 0;
    width: 8px;
    cursor: col-resize;
    z-index: 10;
    background: transparent;
    transition: background 0.15s ease;
}

.veditor-properties-resizer:hover,
.veditor-properties-resizer.dragging {
    background: rgba(168, 85, 247, 0.3);
}

.veditor-tab-bar {
    display: flex;
    gap: 16px;
    padding: 0 16px;
    background: transparent;
    border-bottom: 1px solid var(--ved-border-soft);
    flex-shrink: 0;
}

.veditor-tab-btn {
    padding: 10px 4px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    margin-bottom: -1px;
}

.veditor-tab-btn:hover {
    color: var(--text-primary);
    background: transparent;
}

.veditor-tab-btn.veditor-tab-active {
    color: #ffffff;
    background: transparent;
    border-color: #5ba4cf;
    box-shadow: none;
}

.veditor-tab-content {
    display: none;
    padding: 10px;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    flex: 1;
}

.veditor-tab-content.veditor-tab-visible {
    display: flex;
}

.veditor-props-subtabs {
    display: flex;
    gap: 16px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--ved-border-soft);
}

.veditor-props-subtab {
    padding: 6px 4px;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.7rem;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    margin-bottom: -1px;
}

.veditor-props-subtab:hover {
    color: var(--text-primary);
    background: transparent;
}

.veditor-props-subtab.veditor-props-subtab-active {
    color: #ffffff;
    background: transparent;
    border-color: #5ba4cf;
}

.veditor-props-subcontent {
    display: none;
    flex-direction: column;
    gap: 10px;
}

.veditor-props-subcontent.veditor-props-subcontent-visible {
    display: flex;
}

.veditor-props-header {
    padding: 8px 10px;
    border-bottom: 1px solid var(--ved-border-soft);
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
}

.veditor-props-clip-name {
    font-size: 0.74rem;
    color: rgba(206, 220, 243, 0.78);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.veditor-scope-toggle {
    display: flex;
    gap: 10px;
    padding: 6px 0;
}

.veditor-scope-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #aaa;
    cursor: pointer;
}

.veditor-scope-label input[type="radio"] {
    accent-color: var(--accent, #7c5cfc);
}

.veditor-prop-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.veditor-prop-row label {
    flex-shrink: 0;
    width: 56px;
    font-size: 0.72rem;
    color: var(--text-secondary);
}

.veditor-prop-row input[type="range"] {
    flex: 1;
    height: 6px;
    accent-color: var(--accent);
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    outline: none;
}

.veditor-prop-row input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
}

.veditor-prop-value {
    flex-shrink: 0;
    width: 36px;
    text-align: right;
    font-size: 0.72rem;
    color: var(--text-secondary);
}

.veditor-prop-number,
.veditor-prop-input {
    flex: 1;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 2px;
    color: #5ba4cf;
    padding: 4px 6px;
    font-size: 0.74rem;
    outline: none;
    transition: background 0.15s;
}

.veditor-prop-number:hover,
.veditor-prop-input:hover {
    background: rgba(255, 255, 255, 0.05);
}

.veditor-prop-number {
    width: 60px;
}

.veditor-prop-input {
    width: 100%;
    color: var(--text-primary);
}

.veditor-prop-number:focus,
.veditor-prop-input:focus {
    background: rgba(0, 0, 0, 0.2);
    border-color: #5ba4cf;
    color: #ffffff;
    box-shadow: none;
}

.veditor-prop-unit {
    flex-shrink: 0;
    font-size: 0.72rem;
    color: var(--text-secondary);
}

.veditor-props-disabled {
    opacity: 0.35;
    pointer-events: none;
}

.veditor-prop-action-btn {
    flex: 0 0 auto;
    padding: 6px 8px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    color: var(--text-primary);
    font-size: 0.72rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.veditor-prop-action-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--accent);
}

.veditor-prop-cancel-btn {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.4);
    color: #f87171;
}

.veditor-prop-cancel-btn:hover {
    background: rgba(239, 68, 68, 0.25);
    border-color: rgba(239, 68, 68, 0.6);
}

/* Draggable scrub input for transform properties — minimal, no box */
.veditor-prop-scrub {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: none;
    padding: 3px 0;
    cursor: ew-resize;
    -webkit-user-select: none;
    user-select: none;
    transition: background 0.15s ease;
}

.veditor-prop-scrub:hover {
    background: rgba(255, 255, 255, 0.04);
}

.veditor-prop-scrub-active {
    background: rgba(91, 164, 207, 0.1);
}

.veditor-prop-scrub-value {
    font-size: 0.78rem;
    color: #5ba4cf;
    min-width: 24px;
}

.veditor-prop-scrub .veditor-prop-unit {
    font-size: 0.68rem;
    color: var(--text-secondary);
    margin-left: 2px;
}

/* Silence standalone scrub inputs — minimal, no box */
.veditor-silence-input {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 3px 6px;
    cursor: ew-resize;
    -webkit-user-select: none;
    user-select: none;
    border-radius: 4px;
    transition: background 0.15s ease;
}

.veditor-silence-input:hover {
    background: rgba(255, 255, 255, 0.04);
}

.veditor-silence-input-active {
    background: rgba(124, 92, 252, 0.1);
}

.veditor-silence-val {
    font-size: 12px;
    color: #7cc4f0;
    font-weight: 500;
    min-width: 20px;
}

.veditor-silence-unit {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.35);
    margin-left: 1px;
}

/* Text clip style buttons */
.veditor-text-style-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    font-size: 13px;
    font-family: 'Segoe UI', sans-serif;
    transition: all 0.15s ease;
}

.veditor-text-style-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.veditor-text-style-btn.veditor-text-style-active {
    background: rgba(124, 92, 252, 0.25);
    border-color: rgba(124, 92, 252, 0.5);
    color: #c4b5fd;
}

/* Buffer indicator */
.veditor-buffer-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    background: rgba(0, 0, 0, 0.75);
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 12px;
    z-index: 10;
    pointer-events: none;
    min-width: 160px;
}

.veditor-buffer-top {
    display: flex;
    align-items: center;
    gap: 8px;
}

.veditor-buffer-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-top-color: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    animation: veditor-spin 0.8s linear infinite;
}

.veditor-buffer-bar {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
    overflow: hidden;
}

.veditor-buffer-bar-fill {
    height: 100%;
    width: 0%;
    background: rgba(139, 192, 255, 0.9);
    border-radius: 2px;
    transition: width 0.15s ease-out;
}

@keyframes veditor-spin {
    to { transform: rotate(360deg); }
}

/* Audio tab — Enhancement & Voice Changer */
.veditor-audio-section {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.veditor-audio-section-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #ddd;
    letter-spacing: 0.02em;
}

.veditor-audio-select {
    margin-left: auto;
    font-size: 0.65rem;
    font-family: inherit;
    background: rgba(255, 255, 255, 0.06);
    color: #aaa;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    padding: 2px 6px;
    cursor: pointer;
    outline: none;
    transition: border-color 0.15s, color 0.15s;
}

.veditor-audio-select:hover {
    border-color: rgba(255, 255, 255, 0.15);
    color: #ccc;
}

.veditor-audio-select:focus {
    border-color: rgba(124, 92, 252, 0.4);
}

.veditor-audio-select option {
    background: #2a2a2e;
    color: #e0e0e0;
}

.veditor-audio-desc {
    font-size: 0.62rem;
    color: #666;
    line-height: 1.3;
}

.veditor-audio-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.veditor-audio-label {
    font-size: 0.68rem;
    color: #888;
    white-space: nowrap;
}

.veditor-audio-cost {
    font-size: 0.65rem;
    color: #71717a;
    font-variant-numeric: tabular-nums;
}

.veditor-audio-status {
    font-size: 0.65rem;
    color: #aaa;
    display: none;
}

.veditor-audio-progress {
    display: none;
    height: 10px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 5px;
    overflow: hidden;
    margin-top: 8px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.veditor-audio-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #7c5cfc, #5ba4cf);
    transition: width 0.4s ease;
    border-radius: 5px;
}

.veditor-audio-btn-row {
    display: flex;
    gap: 6px;
}

.veditor-audio-btn-row .veditor-audio-btn {
    flex: 1;
}

.veditor-audio-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.veditor-audio-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.veditor-audio-btn-primary {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
    color: #ccc;
}

.veditor-audio-btn-primary:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.veditor-audio-btn-secondary {
    background: none;
    border-color: rgba(255, 255, 255, 0.06);
    color: #888;
    font-size: 0.65rem;
}

.veditor-audio-btn-secondary:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.04);
    color: #aaa;
}

.veditor-audio-voice-list {
    max-height: 110px;
    overflow-y: auto;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.2);
}

.veditor-audio-voice-list::-webkit-scrollbar { width: 4px; }
.veditor-audio-voice-list::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 2px; }

/* Pill toggle group for model selection */
.veditor-audio-pill-group {
    display: flex;
    gap: 0;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

.veditor-audio-pill {
    cursor: pointer;
    margin: 0;
}

.veditor-audio-pill input { display: none; }

.veditor-audio-pill span {
    display: block;
    padding: 3px 10px;
    font-size: 0.65rem;
    color: #888;
    transition: all 0.15s;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.veditor-audio-pill:last-child span {
    border-right: none;
}

.veditor-audio-pill input:checked + span {
    background: rgba(124, 92, 252, 0.18);
    color: #c4b5fd;
    font-weight: 500;
}

.veditor-audio-pill:hover span {
    color: #bbb;
}

/* Collapsible section */
.veditor-audio-collapse-toggle {
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

.veditor-audio-chevron {
    margin-left: auto;
    color: #666;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.veditor-audio-collapse-toggle.veditor-audio-open .veditor-audio-chevron {
    transform: rotate(180deg);
}

.veditor-audio-collapse-body {
    display: none;
    flex-direction: column;
    gap: 6px;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.veditor-audio-collapse-toggle.veditor-audio-open + .veditor-audio-collapse-body {
    display: flex;
}

.veditor-audio-slider {
    flex: 1;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}

.veditor-audio-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--accent, #7c5cfc);
    cursor: pointer;
}

.veditor-audio-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--accent, #7c5cfc);
    border: none;
    cursor: pointer;
}

.veditor-audio-slider-val {
    font-size: 0.6rem;
    color: #aaa;
    min-width: 30px;
    text-align: right;
}

/* Emoji Picker */
.emoji-picker {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: rgba(10, 10, 18, 0.95);
}

.emoji-picker-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.emoji-picker-title {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    white-space: nowrap;
}

.emoji-picker-search {
    flex: 1;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    color: #fff;
    font-size: 11px;
    padding: 4px 8px;
    outline: none;
    font-family: inherit;
}

.emoji-picker-search:focus {
    border-color: rgba(124, 92, 252, 0.4);
}

.emoji-picker-categories {
    display: flex;
    gap: 1px;
    padding: 4px 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    overflow-x: auto;
}

.emoji-cat-btn {
    background: none;
    border: none;
    font-size: 16px;
    padding: 4px 5px;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.15s;
    line-height: 1;
    flex-shrink: 0;
}

.emoji-cat-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}

.emoji-cat-btn.emoji-cat-active {
    background: rgba(124, 92, 252, 0.2);
}

.emoji-picker-grid {
    flex: 1;
    overflow-y: auto;
    padding: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    align-content: flex-start;
}

.emoji-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    padding: 3px;
    transition: background 0.1s;
}

.emoji-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.emoji-btn img {
    display: block;
}

.emoji-empty {
    width: 100%;
    text-align: center;
    color: rgba(255, 255, 255, 0.3);
    font-size: 12px;
    padding: 20px 0;
}

/* Project bar export button */
.veditor-project-divider {
    width: 1px;
    height: 16px;
    background: rgba(255, 255, 255, 0.08);
    margin: 0 2px;
}

.veditor-project-btn-export {
    color: var(--ved-accent) !important;
    border-color: var(--ved-accent-strong);
    background: linear-gradient(180deg, rgba(91, 164, 207, 0.16), rgba(91, 164, 207, 0.08));
}

.veditor-project-btn-export:hover {
    background: linear-gradient(180deg, rgba(91, 164, 207, 0.25), rgba(91, 164, 207, 0.12)) !important;
    border-color: rgba(91, 164, 207, 0.55) !important;
    color: #bfe3f8 !important;
}

.veditor-project-btn-export-all {
    color: var(--ved-accent) !important;
    border-color: var(--ved-accent-strong);
    background: linear-gradient(180deg, rgba(91, 164, 207, 0.16), rgba(91, 164, 207, 0.08));
}

.veditor-project-btn-export-all:hover {
    background: linear-gradient(180deg, rgba(91, 164, 207, 0.25), rgba(91, 164, 207, 0.12)) !important;
    border-color: rgba(91, 164, 207, 0.55) !important;
    color: #bfe3f8 !important;
}

/* --- Resize handles --- */
.veditor-resize-h {
    width: 5px;
    cursor: col-resize;
    background: rgba(255, 255, 255, 0.03);
    flex-shrink: 0;
    transition: background 0.15s ease, opacity 0.15s ease;
    z-index: 5;
    border-radius: 0;
    opacity: 1;
    margin: 0 1px;
}

.veditor-resize-h:hover,
.veditor-resize-h:active {
    background: rgba(91, 164, 207, 0.28);
}

.veditor-resize-v {
    height: 4px;
    cursor: row-resize;
    background: rgba(255, 255, 255, 0.03);
    flex-shrink: 0;
    transition: background 0.15s ease;
    z-index: 5;
}

.veditor-resize-v:hover,
.veditor-resize-v:active {
    background: rgba(91, 164, 207, 0.3);
}

/* --- Aspect ratio toggle --- */
.veditor-ctrl-aspect {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 5px;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.veditor-ctrl-aspect:hover {
    background: rgba(91, 164, 207, 0.15);
    border-color: rgba(91, 164, 207, 0.3);
}


/* --- Snap button active state --- */
.veditor-snap-btn.veditor-tool-active {
    background: rgba(91, 164, 207, 0.15);
    color: var(--accent);
}

/* --- Empty state hints for timeline + preview --- */
.veditor-empty-hint {
    pointer-events: none;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.22s ease, transform 0.22s ease;
    z-index: 2;
}

.veditor-empty-hint strong {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(225, 235, 248, 0.88);
    margin-bottom: 2px;
}

.veditor-empty-hint span {
    display: block;
    font-size: 0.72rem;
    line-height: 1.35;
    color: rgba(201, 216, 238, 0.68);
}

.veditor-empty-hint-preview {
    position: absolute;
    left: 50%;
    bottom: 58px;
    transform: translate(-50%, 8px);
    width: min(340px, 88%);
    text-align: center;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid rgba(91, 164, 207, 0.22);
    background: rgba(16, 24, 38, 0.86);
    box-shadow: none;
}

.veditor-empty-hint-timeline {
    position: absolute;
    left: 50%;
    top: 8px;
    transform: translate(-50%, 8px);
    width: min(380px, 92%);
    text-align: center;
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px dashed rgba(91, 164, 207, 0.3);
    background: rgba(12, 22, 40, 0.56);
}

.veditor-root:not(.veditor-has-clips) .veditor-empty-hint-preview,
.veditor-root:not(.veditor-has-clips) .veditor-empty-hint-timeline {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* --- Projects overlay --- */
.veditor-projects-overlay {
    position: absolute;
    inset: 0;
    z-index: 50;
    background: transparent;
    display: block;
}

.veditor-projects-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--bg-primary, #18181b);
    z-index: 100;
}

.veditor-projects-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.veditor-projects-title {
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.veditor-projects-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.veditor-projects-inner {
    width: 100%;
    max-width: 1040px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 24px 40px;
}

.veditor-projects-list-container {
    padding: 0;
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.veditor-projects-list {
    width: 100%;
    padding: 12px 0;
}

.veditor-projects-sort-bar {
    display: grid;
    grid-template-columns: 2fr 100px 100px 120px 80px;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.veditor-projects-sort-bar span {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.veditor-projects-row {
    display: grid;
    grid-template-columns: 2fr 100px 100px 120px 80px;
    align-items: center;
    padding: 16px;
    cursor: pointer;
    transition: background 0.15s ease;
    border-bottom: 1px solid rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    margin-bottom: 4px;
}

.veditor-projects-row:hover {
    background: rgba(255, 255, 255, 0.04);
    border-bottom-color: transparent;
}

.veditor-projects-row-active {
    background: rgba(91, 164, 207, 0.06);
}

.veditor-projects-col-name {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.veditor-projects-col-clips,
.veditor-projects-col-dur,
.veditor-projects-col-date {
    font-size: 0.72rem;
    color: var(--text-secondary);
}

.veditor-projects-col-actions {
    display: flex;
    justify-content: flex-end;
}

.veditor-projects-row-delete {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 5px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    opacity: 0;
    transition: all 0.15s ease;
}

.veditor-projects-row:hover .veditor-projects-row-delete {
    opacity: 1;
}

.veditor-projects-row-delete:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.veditor-projects-row-active-badge {
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.veditor-projects-empty {
    padding: 40px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

/* =========================================
   Unified Video Editor Theme (Frosted Minimal)
   ========================================= */
.veditor-root {
    --ved-surface-0: #141414;
    --ved-surface-1: #1e1e1e;
    --ved-surface-2: #252525;
    --ved-border-soft: #333333;
    --ved-border-strong: #444444;
    --ved-accent: #5ba4cf;
    --ved-accent-soft: rgba(91, 164, 207, 0.2);
    --ved-accent-strong: #5ba4cf;
    --ved-pane-radius: 0px;
    --ved-pane-shadow: none;
    background: #141414 !important;
    letter-spacing: 0;
}

.veditor-top {
    padding: 0 !important;
    gap: 1px !important;
    background: transparent;
}

.veditor-timeline-section {
    padding: 1px 0 0 !important;
    gap: 1px !important;
    background: transparent;
}

.veditor-assets,
.veditor-preview,
.veditor-properties,
.veditor-toolbar,
.veditor-timeline-wrapper,
.veditor-project-bar,
.veditor-tab-bar,
.veditor-assets-header,
.veditor-folder-bar,
.veditor-preview-controls {
    background: var(--ved-surface-1) !important;
    border-color: var(--ved-border-soft) !important;
}

.veditor-assets,
.veditor-preview,
.veditor-properties,
.veditor-toolbar,
.veditor-timeline-wrapper {
    border-radius: var(--ved-pane-radius) !important;
    box-shadow: var(--ved-pane-shadow) !important;
    border: 1px solid var(--ved-border-soft);
}

.veditor-project-bar {
    min-height: 36px !important;
    padding: 4px 8px !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
}

.veditor-project-name {
    font-size: 0.79rem !important;
    color: #e2e8f5 !important;
}

.veditor-project-actions {
    gap: 4px !important;
}

.veditor-project-btn {
    min-height: 30px !important;
    padding: 5px 10px !important;
    border-radius: 5px !important;
    border: 1px solid transparent !important;
    background: rgba(255, 255, 255, 0.035) !important;
    color: #ced8ec !important;
    font-size: 0.74rem !important;
    font-weight: 500 !important;
}

.veditor-project-btn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
    color: #f2f6ff !important;
}

.veditor-project-btn-export {
    background: rgba(109, 183, 255, 0.2) !important;
    border-color: rgba(109, 183, 255, 0.65) !important;
    color: #dff0ff !important;
}

.veditor-project-btn-export:hover {
    background: rgba(109, 183, 255, 0.28) !important;
    border-color: rgba(149, 202, 255, 0.8) !important;
}

.veditor-preview-viewport,
.veditor-timeline-canvas-host {
    background: #252525 !important;
}

.veditor-preview-canvas {
    border: none !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

.veditor-preview-controls {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    gap: 0 !important;
    padding: 6px 10px !important;
    min-height: 40px !important;
}

.veditor-ctrl-center {
    grid-column: 2 !important;
    justify-self: center !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    display: flex;
    align-items: center;
    gap: 8px;
}

.veditor-ctrl-edge-right {
    grid-column: 3 !important;
    justify-self: end !important;
    display: flex !important;
    align-items: center !important;
}

.veditor-ctrl-btn {
    height: 30px !important;
    min-width: 34px !important;
    border-radius: 6px !important;
    border: 1px solid transparent !important;
    background: rgba(255, 255, 255, 0.04) !important;
    color: #d5deef !important;
}

.veditor-ctrl-btn:hover {
    background: rgba(255, 255, 255, 0.11) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

.veditor-ctrl-play {
    background: rgba(109, 183, 255, 0.22) !important;
    border-color: rgba(109, 183, 255, 0.7) !important;
    color: #e4f3ff !important;
}

.veditor-time-display,
.veditor-ctrl-aspect {
    background: transparent !important;
    border: none !important;
    color: #5ba4cf !important;
}

.veditor-time-display {
    min-width: 150px !important;
    font-size: 0.85rem !important;
    font-family: "Courier New", Courier, monospace !important;
}

.veditor-toolbar {
    width: 84px !important;
    min-width: 84px !important;
    padding: 4px !important;
    gap: 4px !important;
    border-left: none !important;
    border-bottom: none !important;
}

/* Nine Premiere tools (V A B C N Y U H T) in two columns, so the rail fits
   the shortest timeline pane. */
.veditor-toolbar-main {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 3px !important;
}

.veditor-tool-btn {
    width: 100% !important;
    min-width: 0 !important;
    height: 30px !important;
    border-radius: 5px !important;
    border: 1px solid transparent !important;
    background: rgba(255, 255, 255, 0.04) !important;
    color: #cfd8ea !important;
}

.veditor-tool-btn:hover {
    background: rgba(255, 255, 255, 0.11) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #f3f7ff !important;
}

.veditor-tool-btn.veditor-tool-active,
.veditor-snap-btn.veditor-tool-active,
.veditor-filter-btn.veditor-filter-active,
.veditor-view-btn.veditor-view-active {
    background: var(--ved-accent-soft) !important;
    border-color: var(--ved-accent-strong) !important;
    color: #e5f2ff !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

.veditor-timeline-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #1e1e1e;
    border-bottom: 1px solid var(--ved-border-soft);
    padding: 0 8px;
    height: 38px;
    flex-shrink: 0;
}

.veditor-timeline-header-left,
.veditor-timeline-header-right {
    display: flex;
    align-items: center;
    gap: 4px;
}

.veditor-header-divider {
    width: 1px;
    height: 16px;
    background: #333333;
    margin: 0 6px;
}

.veditor-header-btn {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    color: #ced9ee;
    cursor: pointer;
    transition: all 0.15s;
}

.veditor-header-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #f3f7ff;
}

.veditor-header-btn.veditor-header-active {
    background: var(--ved-accent-soft);
    color: var(--ved-accent);
}

.veditor-header-btn.veditor-tool-danger:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

.veditor-zoom-label {
    font-size: 0.72rem;
    color: #b8c4dc;
    min-width: 50px;
    text-align: center;
}

.veditor-zoom-label {
    font-size: 0.62rem !important;
    color: #b8c4dc !important;
}

.veditor-assets-title,
.veditor-prop-row label,
.veditor-props-clip-name {
    color: #ced9ee !important;
}

/* veditor-tab-bar layout and subtabs handled by base for Premiere look */

.veditor-filter-btn,
.veditor-view-btn,
.veditor-new-folder-btn,
.veditor-prop-number,
.veditor-prop-input {
    border-radius: 5px !important;
}

.veditor-filter-btn,
.veditor-view-btn,
.veditor-new-folder-btn,
.veditor-prop-number,
.veditor-prop-input {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
    color: #d0daee !important;
}

.veditor-filter-btn:hover,
.veditor-view-btn:hover,
.veditor-new-folder-btn:hover {
    background: rgba(255, 255, 255, 0.11) !important;
    border-color: rgba(255, 255, 255, 0.24) !important;
}

.veditor-assets-list,
.veditor-tab-content {
    background: transparent !important;
}

.veditor-asset-card,
.veditor-asset-grid-card,
.veditor-asset-row {
    background: #252525 !important;
    border-color: transparent !important;
}

.veditor-asset-card:hover,
.veditor-asset-grid-card:hover,
.veditor-asset-row:hover {
    background: #333333 !important;
    border-color: #444 !important;
    transform: none !important;
}

.veditor-timeline-wrapper {
    display: flex !important;
    flex-direction: column !important;
}

.veditor-timeline-canvas-host {
    flex: 1 !important;
    min-height: 0 !important;
}

.veditor-timeline-scrollbar {
    height: 16px !important;
    padding: 2px 8px 4px !important;
    border-top: 1px solid var(--ved-border-soft) !important;
    background: #141414 !important;
}

.veditor-timeline-scrollbar-track {
    border-radius: 4px !important;
    background: #252525 !important;
}

.veditor-timeline-scrollbar-thumb {
    border-radius: 4px !important;
    border-color: #444 !important;
    background: #5ba4cf !important;
}

.veditor-timeline-scrollbar-thumb.veditor-scrollbar-thumb-fit {
    background: #444 !important;
    border-color: #555 !important;
}

.veditor-resize-h,
.veditor-resize-v {
    border-color: #333333 !important;
}

.veditor-resize-h {
    width: 10px !important;
    margin: 0 -4px !important;
    z-index: 30 !important;
    background: transparent !important;
}

.veditor-resize-v {
    height: 10px !important;
    margin: -4px 0 !important;
    z-index: 30 !important;
    background: transparent !important;
}

.veditor-properties-resizer {
    width: 12px !important;
    left: -6px !important;
    z-index: 30 !important;
}

.veditor-properties-resizer:hover,
.veditor-properties-resizer.dragging,
.veditor-resize-h:hover,
.veditor-resize-v:hover {
    background: #5ba4cf !important;
}

.veditor-empty-hint {
    display: none !important;
}

.veditor-props-empty-note {
    font-size: 0.69rem;
    color: #999999;
    line-height: 1.35;
}

/* ═══════════════════════════════════════════════════════════════════
   Scene Builder (Bottom Panel)
   ═══════════════════════════════════════════════════════════════════ */

/* Canvas + Scene Builder wrapper — always column, takes flex:1 from main-content */
#canvas-sb-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

/* Panel */
.sb-panel {
    flex-shrink: 0;
    height: 180px;
    border-top: 1px solid #3f3f46;
    background: #1e1e22;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 10;
}

/* Resize handle (top edge) */
.sb-resize-handle {
    position: absolute;
    top: -4px;
    left: 0;
    right: 0;
    height: 8px;
    cursor: ns-resize;
    z-index: 20;
}

.sb-resize-handle::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 3px;
    border-radius: 2px;
    background: #3f3f46;
    transition: background 0.15s;
}

.sb-resize-handle:hover::after {
    background: #5ba4cf;
}

/* Header */
.sb-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    border-bottom: 1px solid #2a2a2e;
    flex-shrink: 0;
    background: #1e1e22;
    min-height: 32px;
}

/* Play button in header */
.sb-play-btn {
    background: rgba(91, 164, 207, 0.15);
    border: 1px solid rgba(91, 164, 207, 0.25);
    color: #5ba4cf;
    cursor: pointer;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s;
}

.sb-play-btn:hover {
    background: rgba(91, 164, 207, 0.25);
    border-color: rgba(91, 164, 207, 0.4);
}

.sb-play-btn.sb-playing svg {
    display: none;
}

.sb-play-btn.sb-playing::after {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    border-left: 3px solid #5ba4cf;
    border-right: 3px solid #5ba4cf;
}

.sb-time {
    font-size: 0.68rem;
    color: #71717a;
    font-family: monospace;
    white-space: nowrap;
    min-width: 70px;
}

.sb-title {
    font-size: 0.72rem;
    font-weight: 600;
    color: #a1a1aa;
    white-space: nowrap;
}

.sb-badge {
    background: #5ba4cf;
    color: #fff;
    font-size: 0.55rem;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 8px;
    min-width: 14px;
    text-align: center;
}

.sb-badge-hidden {
    display: none;
}

.sb-header-actions {
    margin-left: auto;
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}

.sb-header-btn {
    background: transparent;
    border: none;
    color: #71717a;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}

.sb-header-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #e4e4e7;
}

/* ─── Body (preview + timeline) ─────────────────────────────── */

.sb-body {
    flex: 1;
    display: flex;
    flex-direction: row;
    overflow: hidden;
    min-height: 0;
}

.sb-preview {
    width: 160px;
    flex-shrink: 0;
    background: #111113;
    border-right: 1px solid #2a2a2e;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.sb-preview video,
.sb-preview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: none;
}

.sb-preview video.active,
.sb-preview img.active {
    display: block;
}

.sb-preview-empty {
    font-size: 0.6rem;
    color: #3f3f46;
    text-align: center;
    padding: 8px;
}

.sb-preview video.active ~ .sb-preview-empty,
.sb-preview img.active ~ .sb-preview-empty {
    display: none;
}

/* ─── Timeline ──────────────────────────────────────────────── */

.sb-timeline {
    flex: 1;
    overflow-x: auto;
    overflow-y: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
}

.sb-timeline::-webkit-scrollbar {
    height: 6px;
}

.sb-timeline::-webkit-scrollbar-track {
    background: #18181b;
}

.sb-timeline::-webkit-scrollbar-thumb {
    background: #3f3f46;
    border-radius: 3px;
}

/* Ruler area (time ticks at top) */
.sb-ruler-area {
    flex-shrink: 0;
    height: 20px;
    position: relative;
    background: #18181b;
    border-bottom: 1px solid #2a2a2e;
}

.sb-ruler {
    position: relative;
    height: 100%;
    min-width: 100%;
}

.sb-ruler-tick {
    position: absolute;
    top: 0;
    height: 100%;
    font-size: 0.55rem;
    color: #52525b;
    padding: 3px 4px 0;
    border-left: 1px solid #2a2a2e;
    white-space: nowrap;
    pointer-events: none;
}

/* Track (where clips live) */
.sb-track {
    flex: 1;
    position: relative;
    padding: 6px 0;
    min-height: 60px;
}

.sb-clips {
    display: flex;
    flex-direction: row;
    gap: 2px;
    min-width: 100%;
    height: 100%;
    position: relative;
}

/* Individual clip block */
.sb-clip {
    flex-shrink: 0;
    height: 100%;
    min-height: 50px;
    border-radius: 6px;
    background: #2a2a2e;
    background-size: cover;
    background-position: center;
    border: 2px solid transparent;
    cursor: pointer;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    transition: border-color 0.12s;
    -webkit-user-select: none;
    user-select: none;
}

.sb-clip::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(transparent 40%, rgba(0,0,0,0.7));
    pointer-events: none;
    border-radius: 4px;
}

.sb-clip:hover {
    border-color: #3f3f46;
}

.sb-clip.sb-selected {
    border-color: #5ba4cf;
    box-shadow: 0 0 0 1px rgba(91, 164, 207, 0.3);
}

/* Clip type icon (play triangle for videos) */
.sb-clip-type {
    position: absolute;
    top: 4px;
    left: 5px;
    font-size: 0.5rem;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(0, 0, 0, 0.5);
    padding: 1px 4px;
    border-radius: 3px;
    z-index: 1;
}

/* Clip label (name + duration at bottom) */
.sb-clip-label {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    padding: 3px 6px;
}

.sb-clip-name {
    font-size: 0.6rem;
    color: #e4e4e7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.sb-clip-dur {
    font-size: 0.55rem;
    color: #a1a1aa;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Clip delete */
.sb-clip-delete {
    position: absolute;
    top: 3px;
    right: 3px;
    background: rgba(0, 0, 0, 0.6);
    border: none;
    color: #a1a1aa;
    font-size: 0.8rem;
    cursor: pointer;
    padding: 0 4px;
    border-radius: 3px;
    opacity: 0;
    transition: opacity 0.12s, color 0.12s;
    line-height: 1.2;
    z-index: 2;
}

.sb-clip:hover .sb-clip-delete {
    opacity: 1;
}

.sb-clip-delete:hover {
    color: #ef4444;
}

/* Drag states */
.sb-clip.sb-dragging {
    opacity: 0.25;
}

.sb-drag-ghost {
    position: fixed;
    z-index: 10200;
    pointer-events: none;
    opacity: 0.85;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    border: 2px solid #5ba4cf;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

/* Drop target on timeline */
.sb-timeline.sb-drop-target {
    background: rgba(91, 164, 207, 0.08);
    outline: 2px dashed rgba(91, 164, 207, 0.45);
    outline-offset: -2px;
}

/* Playhead */
.sb-playhead {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #ef4444;
    z-index: 15;
    pointer-events: none;
    transition: left 0.03s linear;
}

.sb-playhead::before {
    content: '';
    position: absolute;
    top: 0;
    left: -5px;
    width: 12px;
    height: 10px;
    background: #ef4444;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}

/* Empty state */
.sb-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    color: #52525b;
    text-align: center;
    width: 100%;
    height: 100%;
}

.sb-empty span {
    font-size: 0.68rem;
}

/* ─── Scene Tab Bar ──────────────────────────────────────────── */

.sb-tab-bar {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 2px 8px;
    background: #18181b;
    border-bottom: 1px solid #2a2a2e;
    flex-shrink: 0;
    overflow-x: auto;
    overflow-y: hidden;
    min-height: 28px;
}

.sb-tab-bar::-webkit-scrollbar {
    height: 0;
}

.sb-tab {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 6px 6px 0 0;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.68rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    border: 1px solid transparent;
    border-bottom: none;
    transition: background 0.12s, color 0.12s;
    position: relative;
    -webkit-user-select: none;
    user-select: none;
}

.sb-tab:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary);
}

.sb-tab-active {
    background: #1e1e22;
    color: var(--text-primary);
    border-color: #2a2a2e;
}

.sb-tab-active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: #1e1e22;
}

.sb-tab-name {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sb-tab-count {
    background: rgba(91, 164, 207, 0.2);
    color: var(--accent);
    font-size: 0.55rem;
    font-weight: 600;
    padding: 0 4px;
    border-radius: 6px;
    min-width: 14px;
    text-align: center;
    line-height: 1.4;
}

.sb-tab-close {
    background: none;
    border: none;
    color: #52525b;
    font-size: 0.75rem;
    cursor: pointer;
    padding: 0 2px;
    line-height: 1;
    border-radius: 3px;
    opacity: 0;
    transition: opacity 0.12s, color 0.12s, background 0.12s;
}

.sb-tab:hover .sb-tab-close {
    opacity: 1;
}

.sb-tab-close:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

.sb-tab-dragging {
    opacity: 0.4;
}

.sb-tab-dragover {
    border-color: var(--accent) !important;
}

.sb-tab-add {
    background: none;
    border: 1px dashed #3f3f46;
    color: #52525b;
    font-size: 0.8rem;
    cursor: pointer;
    padding: 2px 8px;
    border-radius: 6px 6px 0 0;
    transition: color 0.12s, border-color 0.12s;
    flex-shrink: 0;
}

.sb-tab-add:hover {
    color: var(--accent);
    border-color: var(--accent);
}

.sb-tab-rename-input {
    background: #18181b;
    border: 1px solid var(--accent);
    color: var(--text-primary);
    font-size: 0.68rem;
    font-weight: 500;
    padding: 1px 4px;
    border-radius: 3px;
    outline: none;
    width: 80px;
    font-family: inherit;
}

/* ─── Tab Context Menu ────────────────────────────────────────── */

.sb-tab-context {
    position: fixed;
    z-index: 10300;
    background: rgba(39, 39, 42, 0.95);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 4px;
    min-width: 120px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.sb-tab-context-item {
    padding: 6px 12px;
    font-size: 0.72rem;
    color: var(--text-primary);
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.12s;
}

.sb-tab-context-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

.sb-tab-context-item.sb-danger:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

/* ─── Drop Indicator (insertion line) ─────────────────────────── */

.sb-drop-indicator {
    position: absolute;
    top: 26px;
    bottom: 6px;
    width: 3px;
    background: var(--accent);
    z-index: 16;
    pointer-events: none;
    border-radius: 2px;
    box-shadow: 0 0 10px rgba(91, 164, 207, 0.6);
}


/* ============================== */
/* Collapsible Chrome v2          */
/* (hide-to-edge sidebar + run controls, radial add-node menu) */
/* ============================== */

/* Left sidebars slide off-screen, leaving only the edge tab */
#sidebars-container {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
}

#sidebars-container.sidebars-hidden {
    transform: translateY(-50%) translateX(calc(-100% - 24px));
    opacity: 0;
    pointer-events: none;
}

/* Run-controls pill slides below the canvas edge */
.control-buttons {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
}

#control-buttons.controls-hidden {
    transform: translateX(-50%) translateY(120px);
    opacity: 0;
    pointer-events: none;
}

.control-hide-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 44px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0;
}

.control-hide-btn:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}

/* Edge show-tabs — the "little arrow sticking out" while chrome is hidden */
.edge-show-tab {
    position: absolute;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(39, 39, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
    cursor: pointer;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    transition: all 0.15s ease;
    padding: 0;
}

.edge-show-tab:hover {
    color: #ffffff;
    background: rgba(63, 63, 70, 0.85);
}

.edge-show-tab.hidden {
    display: none;
}

.edge-show-tab-left {
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 56px;
    border-left: none;
    border-radius: 0 10px 10px 0;
}

.edge-show-tab-left:hover {
    width: 26px;
}

.edge-show-tab-bottom {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 56px;
    height: 22px;
    border-bottom: none;
    border-radius: 10px 10px 0 0;
}

.edge-show-tab-bottom:hover {
    height: 26px;
}


@media (prefers-reduced-motion: reduce) {


    #sidebars-container,
    .control-buttons,
    .edge-show-tab {
        transition-duration: 0.01ms !important;
    }
}

/* ============================== */
/* Right Tools Sidebar (restored) */
/* Quick-action mirror of the toolbar menus; hides entirely to an edge tab */
/* ============================== */
#tools-sidebar {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
    background: rgba(9, 9, 11, 0.45);
    /* Frosted Slate */
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
    width: 52px;
}

#tools-sidebar.tools-hidden {
    transform: translateY(-50%) translateX(calc(100% + 24px));
    opacity: 0;
    pointer-events: none;
}

.tools-items {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tools-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    min-height: 36px;
    border-radius: 8px;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    color: var(--text-secondary);
    width: 100%;
    text-align: left;
    font: inherit;
}

.tools-item:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.tools-item:active {
    transform: scale(0.96);
}

.tools-item-warning:hover {
    color: var(--warning);
}

.tools-item.tools-item-active {
    background: rgba(91, 164, 207, 0.12);
    color: var(--accent);
}

.tools-icon {
    /* match the left rail's .palette-icon */
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.tools-label {
    font-size: 0.82rem;
    overflow: hidden;
}

/* Tooltip when collapsed to icons-only (CanvasChrome .slc-rail-toggle state) */
#tools-sidebar.tools-collapsed .tools-item {
    position: relative;
}

#tools-sidebar.tools-collapsed .tools-item:hover::after {
    content: attr(title);
    position: absolute;
    right: calc(100% + 12px);
    left: auto;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.9);
    color: #ffffff;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.78rem;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    z-index: 200;
}

.tools-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.15);
    margin: 6px 4px;
}

.edge-show-tab-right {
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 56px;
    border-right: none;
    border-radius: 10px 0 0 10px;
}

.edge-show-tab-right:hover {
    width: 26px;
}

.tools-item:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    #tools-sidebar {
        transition-duration: 0.01ms !important;
    }
}

/* ============================================
   Canvas Chrome [SLATE-MIGRATED]
   Zoom control, minimap, shortcuts modal + a
   token reskin of the canvas topbar/menubar/rails.
   ============================================ */

/* topbar + menubar */
#toolbar { background: var(--sl-bg-rail); border-bottom: 1px solid var(--sl-line); }
#toolbar .toolbar-row-top { min-height: 46px; }
#toolbar .project-name { font-family: var(--sl-font-ui); font-size: 12px; color: var(--sl-text-dim); }
#toolbar-menus { background: var(--sl-bg-panel); border-top: 1px solid var(--sl-line); min-height: 30px; display: flex; align-items: center; }
#toolbar-menus .toolbar-menu-btn { font-family: var(--sl-font-ui); font-size: 12px; color: var(--sl-text-nav); }
#tabs-container .tab, #tabs-container > * {
    font-family: var(--sl-font-mono);
    font-size: 11px;
}

/* side rails */
/* Left tool rail: docked full-height 46px column (NodeCanvas.dc.html) */
#sidebars-container {
    left: 0;
    top: 0;
    bottom: 0;
    transform: none;
    gap: 0;
}
#sidebars-container.sidebars-hidden { transform: translateX(calc(-100% - 24px)); }
#palette {
    background: var(--sl-bg-rail);
    border: none;
    border-right: 1px solid var(--sl-line);
    border-radius: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    width: 46px;
    flex: 1;
    min-height: 0;
    padding: 10px 5px;
}
#palette.palette-expanded { width: 190px; }
#palette .sidebar-header { display: none; }
/* icon-only rail: kill the flex gap or the 0-width label shoves the icon off-center */
.palette-item { justify-content: center; padding: 8px; border-radius: 9px; color: var(--sl-text-dim); gap: 0; }
#palette.palette-expanded .palette-item { justify-content: flex-start; padding: 8px 10px; gap: 12px; }
.palette-icon { width: 15px; height: 15px; }
.palette-item.palette-select { background: var(--sl-sky-16); color: var(--sl-sky-text); cursor: pointer; }
.palette-item.palette-select:hover { background: var(--sl-sky-16); color: var(--sl-sky-text); }
.palette-divider { height: 1px; background: oklch(1 0 0 / 0.09); margin: 5px 4px; }

/* Drawing tools: same rail, same look (old floating #drawing-sidebar removed) */
.drawing-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 8px;
    border-radius: 9px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    color: var(--sl-text-dim);
}
#palette.palette-expanded .drawing-item { justify-content: flex-start; padding: 8px 10px; gap: 12px; }
.drawing-item:hover { background: oklch(1 0 0 / 0.05); color: oklch(0.9 0.002 250); }
.drawing-item.drawing-item-active { background: var(--sl-sky-16); color: var(--sl-sky-text); }
/* tooltips for icon-only mode (same pattern as palette items) */
#palette:not(.palette-expanded) .drawing-item { position: relative; }
#palette:not(.palette-expanded) .drawing-item:hover::after {
    content: attr(title);
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.9);
    color: #ffffff;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.78rem;
    white-space: nowrap;
    pointer-events: none;
    z-index: 200;
}
.drawing-color-picker { display: flex; flex-direction: column; gap: 4px; margin-top: 2px; }
.drawing-color-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 4px;
    border-radius: 8px;
}
#palette.palette-expanded .drawing-color-row { justify-content: flex-start; padding: 4px 10px; }
.drawing-color-label { font-size: 0.78rem; color: var(--sl-text-dim); }
.drawing-color-input {
    width: 18px;
    height: 18px;
    padding: 0;
    border: 1px solid oklch(1 0 0 / 0.15);
    border-radius: 5px;
    background: transparent;
    cursor: pointer;
    flex: none;
}
.drawing-color-input::-webkit-color-swatch-wrapper { padding: 1px; }
.drawing-color-input::-webkit-color-swatch { border: none; border-radius: 3px; }
/* Right action rail: docked full-height, icons by default (NodeCanvas.dc.html) */
#tools-sidebar {
    background: var(--sl-bg-rail);
    border: none;
    border-left: 1px solid var(--sl-line);
    border-radius: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    right: 0;
    top: 0;
    bottom: 0;
    transform: none;
    padding: 10px 6px;
}
#tools-sidebar.tools-hidden { transform: translateX(calc(100% + 24px)); }
.tools-item-danger { color: oklch(0.7 0.14 25); }
.tools-item-danger:hover { background: oklch(0.65 0.19 25 / 0.12); color: oklch(0.76 0.15 25); }

/* zoom control (bottom-right) */
.slc-zoom {
    position: absolute;
    right: 62px; /* clear of the docked 46px right rail */
    transition: right 0.25s ease;
    bottom: 14px;
    display: flex;
    gap: 4px;
    padding: 4px;
    background: var(--sl-bg-card-2);
    border: 1px solid var(--sl-line-3);
    border-radius: 11px;
    box-shadow: var(--sl-shadow-card);
    z-index: 5;
    align-items: center;
}
.slc-zoom-btn {
    padding: 6px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: oklch(0.65 0.005 250);
    cursor: pointer;
    display: inline-flex;
}
.slc-zoom-btn:hover { background: oklch(1 0 0 / 0.05); }
.slc-zoom-label {
    padding: 6px 8px;
    font-family: var(--sl-font-mono);
    font-size: 10.5px;
    color: var(--sl-text-mid);
    min-width: 34px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* minimap (above the zoom control) */
.slc-minimap {
    position: absolute;
    right: 62px; /* clear of the docked 46px right rail */
    transition: right 0.25s ease;
    bottom: 66px;
    width: 150px;
    height: 96px;
    background: oklch(0.19 0.005 250 / 0.96);
    border: 1px solid oklch(1 0 0 / 0.1);
    border-radius: 10px;
    box-shadow: var(--sl-shadow-card);
    z-index: 5;
    overflow: hidden;
    cursor: crosshair;
}
.slc-minimap canvas { display: block; }
.slc-minimap-label {
    position: absolute;
    right: 5px;
    bottom: 3px;
    font-family: var(--sl-font-mono);
    font-size: 8.5px;
    color: var(--sl-text-ghost);
    pointer-events: none;
}

/* shortcuts */
.slc-shortcuts-btn {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    color: var(--sl-text-dim);
    font-family: var(--sl-font-ui);
    font-size: 11.5px;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
}
.slc-shortcuts-btn:hover { background: oklch(1 0 0 / 0.05); color: var(--sl-text); }
.slc-shortcuts { width: 430px; max-width: 92vw; }
.slc-shortcuts-head { display: flex; align-items: center; gap: 8px; }
.slc-shortcuts-title {
    font-family: var(--sl-font-display);
    font-size: 17px;
    font-weight: 600;
    color: oklch(0.95 0.002 250);
    flex: 1;
}
.slc-shortcuts-close {
    background: none;
    border: none;
    color: var(--sl-text-dim);
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
    display: inline-flex;
}
.slc-shortcuts-close:hover { background: oklch(1 0 0 / 0.06); }
.slc-shortcuts-list { display: flex; flex-direction: column; gap: 2px; margin-top: 14px; }
.slc-shortcut-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 4px;
    border-bottom: 1px solid oklch(1 0 0 / 0.04);
}
.slc-shortcut-row:last-child { border-bottom: none; }
.slc-shortcut-key {
    font-family: var(--sl-font-mono);
    font-size: 10.5px;
    font-weight: 600;
    color: var(--sl-text);
    background: oklch(1 0 0 / 0.07);
    border: 1px solid oklch(1 0 0 / 0.1);
    padding: 3px 9px;
    border-radius: 6px;
    min-width: 52px;
    text-align: center;
}
.slc-shortcut-desc { font-size: 12px; color: var(--sl-text-mid); }

/* Canvas Chrome — design proportions + topbar pieces [SLATE-MIGRATED] */
#toolbar .toolbar-row-top { height: 46px; min-height: 46px; padding: 0 16px; box-sizing: border-box; align-items: center; }
#toolbar-menus { height: 30px; min-height: 30px; padding: 0 14px; box-sizing: border-box; }
#toolbar .project-name {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 11px;
    border-radius: 8px;
    color: var(--sl-text-dim);
    font-size: 12px;
    cursor: pointer;
}
#toolbar .project-name:hover { background: oklch(1 0 0 / 0.04); }

.topbar-editor-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border-radius: 8px;
    background: var(--sl-sky-12);
    border: 1px solid oklch(0.72 0.13 230 / 0.4);
    color: var(--sl-sky-text);
    font-family: var(--sl-font-ui);
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    margin-right: 4px;
}
.topbar-editor-pill:hover { background: oklch(0.72 0.13 230 / 0.2); }

#btn-share.btn-share {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 15px;
    border-radius: 8px;
    background: var(--sl-green-14);
    border: 1px solid var(--sl-green-45);
    color: var(--sl-green-text);
    font-family: var(--sl-font-ui);
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
}
#btn-share.btn-share:hover { background: oklch(0.66 0.14 155 / 0.24); }
#btn-share.hidden { display: none; }

#last-saved.last-saved {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--sl-text-faint);
}
#last-saved.last-saved:not(:empty)::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--sl-green);
}

.topbar-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--sl-bg-active);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--sl-font-ui);
    font-size: 10px;
    font-weight: 600;
    color: oklch(0.9 0.002 250);
    margin-left: 2px;
    cursor: pointer;
    flex: none;
}

/* Live-presence stack: one dot per peer in the project's collab room */
.collab-presence {
    display: inline-flex;
    align-items: center;
    flex: none;
    margin-left: 4px;
}
.collab-presence[hidden] { display: none; }
.collab-presence-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--sl-font-ui);
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    border: 2px solid var(--sl-bg, #1a1c20);
    margin-left: -6px;
    flex: none;
    cursor: default;
}
.collab-presence-dot:first-child { margin-left: 0; }
.collab-presence-agent {
    background: var(--sl-bg-active);
    font-size: 12px;
}
.collab-presence-more {
    background: var(--sl-bg-active);
    color: oklch(0.9 0.002 250);
}

/* right rail: 46px icons ⇄ 174px labels */
#tools-sidebar { width: 174px; box-sizing: border-box; }
#tools-sidebar.tools-collapsed { width: 46px; }
/* minimap + zoom stay stuck to the right rail's edge (16px padding):
   expanded rail pushes them left, hidden rail lets them hug the window */
body:has(#tools-sidebar:not(.tools-collapsed):not(.tools-hidden)) .slc-minimap,
body:has(#tools-sidebar:not(.tools-collapsed):not(.tools-hidden)) .slc-zoom { right: 190px; }
body:has(#tools-sidebar.tools-hidden) .slc-minimap,
body:has(#tools-sidebar.tools-hidden) .slc-zoom { right: 16px; }
#tools-sidebar.tools-collapsed .tools-label { display: none; }
#tools-sidebar.tools-collapsed .tools-item { justify-content: center; padding: 8px 0; }
.slc-rail-toggle {
    margin-top: auto;
    align-self: center;
    background: none;
    border: none;
    color: var(--sl-text-faint);
    cursor: pointer;
    padding: 7px;
    border-radius: 8px;
    display: inline-flex;
}
.slc-rail-toggle:hover { background: oklch(1 0 0 / 0.06); color: var(--sl-text); }

/* right-drag marquee selection box */
.slc-marquee {
    position: fixed;
    z-index: 200;
    border: 1.5px solid var(--sl-sky);
    background: var(--sl-sky-10);
    border-radius: 3px;
    pointer-events: none;
}

/* ============================================================ */
/* [SLATE-MIGRATED] Scene Builder — full-width drawer + PiP     */
/* (NodeCanvas.dc.html: strip takes the whole width; the player */
/*  is a floating, draggable picture-in-picture card)           */
/* ============================================================ */
.sb-panel {
    background: oklch(0.185 0.005 250);
    border-top: 1px solid oklch(1 0 0 / 0.08);
}

.sb-collapse-tab {
    position: absolute;
    top: -17px;
    left: 50%;
    transform: translateX(-50%);
    width: 46px;
    height: 17px;
    background: oklch(0.185 0.005 250);
    border: 1px solid oklch(1 0 0 / 0.08);
    border-bottom: none;
    border-radius: 9px 9px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sl-text-dim);
    cursor: pointer;
    z-index: 21;
    padding: 0;
    transition: transform 0.2s ease;
}
.sb-collapse-tab:hover { background: oklch(0.23 0.007 250); }

.sb-title { font-family: var(--sl-font-ui); font-size: 12.5px; font-weight: 600; color: oklch(0.93 0.002 250); }
.sb-badge {
    font-family: var(--sl-font-mono);
    font-size: 9.5px;
    font-weight: 600;
    color: var(--sl-sky-text);
    background: oklch(0.72 0.13 230 / 0.15);
    padding: 2px 7px;
    border-radius: 10px;
}
.sb-header-total { font-family: var(--sl-font-mono); font-size: 10px; color: var(--sl-text-dim); }
.sb-header-sep { width: 1px; height: 14px; background: oklch(1 0 0 / 0.1); margin: 0 3px; }
.sb-header-btn-danger { color: oklch(0.68 0.1 25); }
.sb-header-btn-danger:hover { background: oklch(0.65 0.19 25 / 0.12); color: oklch(0.76 0.13 25); }
.sb-collapsed-summary { display: none; font-family: var(--sl-font-mono); font-size: 9.5px; color: oklch(0.55 0.005 250); }

/* Collapsed: 26px summary strip (height set inline by _initCollapse) */
#scene-builder.sb-collapsed .sb-tab-bar,
#scene-builder.sb-collapsed .sb-body,
#scene-builder.sb-collapsed .sb-pip,
#scene-builder.sb-collapsed .sb-resize-handle,
#scene-builder.sb-collapsed .sb-header-actions,
#scene-builder.sb-collapsed .sb-title,
#scene-builder.sb-collapsed .sb-badge,
#scene-builder.sb-collapsed .sb-header-total { display: none; }
#scene-builder.sb-collapsed .sb-collapsed-summary { display: block; margin: 0 auto; }
#scene-builder.sb-collapsed .sb-header { justify-content: center; }

/* Floating PiP preview card */
.sb-pip {
    position: fixed;
    left: 60px;
    bottom: 200px;
    width: 152px;
    background: oklch(0.21 0.006 250);
    border: 1px solid oklch(1 0 0 / 0.12);
    border-radius: 12px;
    box-shadow: 0 18px 44px -14px oklch(0 0 0 / 0.85);
    padding: 6px;
    z-index: 460;
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
    touch-action: none;
}
.sb-pip:active { cursor: grabbing; }
.sb-pip .sb-preview {
    position: relative;
    width: auto;
    height: 186px;
    border-radius: 8px;
    overflow: hidden;
    background: oklch(0.09 0.002 250);
    box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.08);
    flex: none;
}
.sb-pip .sb-preview video,
.sb-pip .sb-preview img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
}
.sb-pip .sb-preview video.active,
.sb-pip .sb-preview img.active { display: block; }
.sb-pip .sb-preview-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: oklch(0.5 0.005 250);
}
.sb-pip .sb-preview video.active ~ .sb-preview-empty,
.sb-pip .sb-preview img.active ~ .sb-preview-empty { display: none; }
.sb-pip-label {
    position: absolute;
    top: 5px;
    left: 6px;
    font-family: var(--sl-font-mono);
    font-size: 9px;
    font-weight: 700;
    color: #fff;
    background: oklch(0 0 0 / 0.55);
    padding: 2px 6px;
    border-radius: 4px;
    max-width: 118px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    z-index: 2;
}
.sb-pip-label:empty { display: none; }
.sb-pip-row { display: flex; align-items: center; gap: 6px; margin-top: 5px; }
.sb-pip-row .sb-play-btn {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: var(--sl-sky);
    color: oklch(0.15 0.02 240);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex: none;
    padding: 0;
}
.sb-pip-row .sb-play-btn:hover { filter: brightness(1.08); }
.sb-pip-row .sb-time { font-family: var(--sl-font-mono); font-size: 9.5px; color: oklch(0.66 0.005 250); }

/* Clip cards + playhead accents */
.sb-clip { border-radius: 7px; box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.08); }
.sb-clip.sb-selected { box-shadow: inset 0 0 0 2px var(--sl-sky); }
.sb-playhead { width: 2px; background: var(--sl-sky); }

/* [SLATE-MIGRATED] Video editor "Canvas" pill — mirror of the canvas topbar's Editor pill */
.veditor-project-btn.veditor-btn-canvas {
    background: var(--sl-sky-12);
    border: 1px solid var(--sl-sky-35);
    color: var(--sl-sky-text);
    font-weight: 600;
}
.veditor-project-btn.veditor-btn-canvas:hover { background: oklch(0.72 0.13 230 / 0.2); }

/* PiP resize handle (bottom-right corner) */
.sb-pip-resize {
    position: absolute;
    right: 1px;
    bottom: 1px;
    width: 14px;
    height: 14px;
    cursor: nwse-resize;
    border-right: 2px solid oklch(0.45 0.005 250);
    border-bottom: 2px solid oklch(0.45 0.005 250);
    border-radius: 0 0 6px 0;
    touch-action: none;
}
.sb-pip-resize:hover {
    border-color: var(--sl-sky);
}

/* Add-node popover (right-click / link-drop) */
.pw-addnode-menu { min-width: 180px; }
.pw-addnode-kicker { padding: 6px 12px 4px; }
.pw-addnode-icon { display: inline-flex; width: 15px; height: 15px; flex: none; }
.pw-addnode-icon svg { width: 15px; height: 15px; }
.pw-addnode-cancel { justify-content: center; color: var(--sl-text-dim); }
.pw-addnode-empty { padding: 8px 12px; font-size: 11.5px; color: var(--sl-text-dim); }

/* Takes: SB PiP chevrons + Video Editor takes strip */
.sb-pip-takes { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.sb-pip-takebtn {
    background: none;
    border: none;
    color: oklch(0.68 0.005 250);
    padding: 3px;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
}
.sb-pip-takebtn:hover { background: oklch(1 0 0 / 0.07); }
.sb-pip-take { font-family: var(--sl-font-mono); font-size: 10px; font-weight: 600; color: var(--sl-sky-text); }
.veditor-take-btn {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    color: #cfd6e4;
    font-size: 10.5px;
    font-family: 'JetBrains Mono', monospace;
    padding: 4px 8px;
    cursor: pointer;
}
.veditor-take-btn:hover { border-color: rgba(124, 182, 255, 0.5); }
.veditor-take-btn.veditor-take-active {
    border-color: var(--sl-sky);
    color: var(--sl-sky-text);
    background: var(--sl-sky-12);
}

/* Projects tab: use the horizontal space (was capped at 900px by .home-content) */
#home-tab-projects .home-content { max-width: 1560px; }
.home-projects-page { max-width: 1520px; }
.home-projects-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }

/* =========================================================================
   AI MODE — the review chrome for the video editor
   =========================================================================
   A second skin over the SAME timeline, not a second editor. Everything here
   is scoped under .veditor-root so it inherits the editor's own --ved-* tokens
   rather than re-deriving colours; .ai-mode on the root is the single switch
   that swaps chromes. Manual mode is today's editor, untouched.
   ------------------------------------------------------------------------ */

/* Mode toggle, in the project bar beside Canvas / New / Save */
.aim-modes {
    display: flex;
    padding: 2px;
    margin-right: 6px;
    border-radius: 7px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--ved-border-soft);
}
.aim-mode {
    padding: 4px 11px;
    border: none;
    border-radius: 5px;
    background: transparent;
    color: var(--text-secondary, #a1a1aa);
    font-family: inherit;
    font-size: 0.72rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.aim-mode:hover { color: var(--text-primary, #f4f4f5); }
.aim-mode[aria-pressed="true"] {
    background: var(--ved-surface-3);
    color: var(--text-primary, #f4f4f5);
}
.aim-mode:focus-visible { outline: 2px solid var(--ved-accent); outline-offset: 2px; }

/* Tool sidebar — drawing tools in AI mode, cutting tools in Manual */
.aim-sidebar {
    flex-shrink: 0;
    width: 46px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 6px 0;
    border: 1px solid var(--ved-border-soft);
    border-radius: var(--ved-pane-radius) var(--ved-pane-radius) 0 0;
    background: var(--ved-surface-1);
}
.aim-sb-label {
    font-size: 0.53rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary, #a1a1aa);
    margin-bottom: 2px;
}
.aim-sb-split { width: 22px; height: 1px; background: var(--ved-border-soft); margin: 3px 0; }
.aim-tool {
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ved-border-soft);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-secondary, #a1a1aa);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.aim-tool:hover { background: rgba(255, 255, 255, 0.1); color: var(--text-primary, #f4f4f5); }
.aim-tool:focus-visible { outline: 2px solid var(--ved-accent); outline-offset: 2px; }
.aim-tool[aria-pressed="true"] {
    background: var(--ved-accent-soft);
    border-color: var(--ved-accent-strong);
    color: var(--ved-accent);
}
.aim-tool svg { width: 16px; height: 16px; }

/* Annotation layer over the preview — the same trick .veditor-transform-overlay
   uses. Non-scaling strokes keep a 2px line at any preview size while the
   geometry stays normalised. */
.aim-ink {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 6;
}
.aim-ink.drawing { pointer-events: auto; cursor: crosshair; }
.aim-ink.erasing { pointer-events: auto; cursor: pointer; }
.aim-ink * { vector-effect: non-scaling-stroke; }
/* Markup red, not the UI accent — annotation has to read as "the reviewer drew
   this", separate from every blue control around it, and stay legible over
   arbitrary video. The drop shadow is what keeps it visible on a light frame. */
.aim-shape {
    stroke: #ff3b30;
    stroke-width: 2.5;
    fill: rgba(255, 59, 48, 0.1);
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.7));
}
.aim-shape.pen { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.aim-ink.erasing .aim-shape:hover { stroke: #fff; fill: rgba(255, 59, 48, 0.35); }

/* The band — AI mode's timeline. The whole band is the hit target, not just
   the bar; comment pins get their own lane so they never fight the seek. */
.aim-band {
    position: relative;
    margin: 8px 4px 4px;
    padding: 6px 8px 8px;
    border: 1px solid var(--ved-border-soft);
    border-radius: 9px;
    background: rgba(0, 0, 0, 0.22);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}
.aim-band:hover { border-color: var(--ved-border-strong); }
.aim-band:focus-visible { outline: 2px solid var(--ved-accent); outline-offset: 2px; }
.aim-pinlane { position: relative; height: 20px; }
.aim-clipstrip { display: flex; gap: 2px; height: 20px; margin-bottom: 6px; }
.aim-clipseg {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    white-space: nowrap;
    border-radius: 4px;
    background: var(--ved-surface-3);
    color: var(--text-secondary, #a1a1aa);
    font-size: 0.6rem;
    transition: background 0.15s ease;
}
.aim-band:hover .aim-clipseg { background: #223252; }
.aim-scrub {
    position: relative;
    height: 11px;
    border-radius: 6px;
    background: var(--ved-surface-3);
    overflow: hidden;
}
.aim-played { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; background: var(--ved-accent); }
.aim-range { position: absolute; top: 0; bottom: 0; background: rgba(251, 191, 36, 0.3); }
.aim-sel { position: absolute; top: 0; bottom: 0; background: rgba(91, 164, 207, 0.45); }
.aim-head {
    position: absolute;
    top: 26px;
    bottom: 8px;
    width: 2px;
    transform: translateX(-1px);
    background: var(--text-primary, #f4f4f5);
    pointer-events: none;
}
.aim-head::before {
    content: "";
    position: absolute;
    top: -7px;
    left: 50%;
    transform: translateX(-50%);
    width: 13px;
    height: 13px;
    border-radius: 4px;
    background: var(--text-primary, #f4f4f5);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.aim-pin {
    position: absolute;
    top: 0;
    width: 19px;
    height: 19px;
    padding: 0;
    transform: translateX(-50%);
    border: 2px solid var(--ved-surface-0);
    border-radius: 6px;
    background: var(--warning, #fbbf24);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.aim-pin:hover { transform: translateX(-50%) translateY(-2px) scale(1.1); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5); z-index: 2; }
.aim-pin:focus-visible { outline: 2px solid var(--ved-accent); outline-offset: 2px; z-index: 2; }
.aim-pin.addressed, .aim-pin.resolved { background: var(--success, #4ade80); }
.aim-pin.queued { background: var(--ved-accent); }
.aim-pin.lost { background: var(--text-secondary, #a1a1aa); }

/* The rail — comments and history */
.aim-rail {
    width: 300px;
    min-width: 240px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    border: 1px solid var(--ved-border-soft);
    border-radius: var(--ved-pane-radius) var(--ved-pane-radius) 0 0;
    background: var(--ved-surface-1);
}
.aim-railhead { display: flex; gap: 4px; padding: 6px; border-bottom: 1px solid var(--ved-border-soft); }
.aim-railtab {
    flex: 1;
    padding: 5px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary, #a1a1aa);
    font-family: inherit;
    font-size: 0.73rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.aim-railtab[aria-selected="true"] { background: rgba(255, 255, 255, 0.07); color: var(--text-primary, #f4f4f5); }
.aim-railtab:focus-visible { outline: 2px solid var(--ved-accent); outline-offset: -2px; }
.aim-wavebar {
    padding: 6px 10px;
    border-bottom: 1px solid var(--ved-border-soft);
    font-size: 0.68rem;
    color: var(--text-secondary, #a1a1aa);
}
.aim-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.aim-empty { margin: 4px; font-size: 0.72rem; line-height: 1.5; color: var(--text-secondary, #a1a1aa); }

.aim-cmt {
    padding: 6px 10px;
    border: 1px solid var(--ved-border-soft);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.03);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.aim-cmt:hover { background: rgba(255, 255, 255, 0.06); }
.aim-cmt.active { border-color: var(--ved-accent-strong); background: var(--ved-accent-soft); }
.aim-cmt:focus-visible { outline: 2px solid var(--ved-accent); outline-offset: 2px; }
.aim-cmt p { margin: 0; font-size: 0.76rem; line-height: 1.45; }
.aim-cmtop { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.aim-at { font-size: 0.68rem; font-weight: 600; color: var(--ved-accent); font-variant-numeric: tabular-nums; }
.aim-who {
    padding: 1px 6px;
    border-radius: 5px;
    font-size: 0.6rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.aim-who.user { background: rgba(255, 255, 255, 0.1); color: var(--text-secondary, #a1a1aa); }
.aim-who.agent { background: var(--ved-accent-soft); color: var(--ved-accent); }
.aim-meta { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.aim-chip {
    padding: 1px 6px;
    border: 1px solid var(--ved-border-soft);
    border-radius: 5px;
    font-size: 0.61rem;
    color: var(--text-secondary, #a1a1aa);
}
.aim-chip.ok { color: var(--success, #4ade80); border-color: rgba(74, 222, 128, 0.3); background: rgba(74, 222, 128, 0.1); }
.aim-chip.warn { color: var(--warning, #fbbf24); border-color: rgba(251, 191, 36, 0.3); background: rgba(251, 191, 36, 0.1); }
.aim-chip.acc { color: var(--ved-accent); border-color: var(--ved-accent-strong); background: var(--ved-accent-soft); }
.aim-reply { margin-top: 6px; padding-left: 8px; border-left: 2px solid var(--ved-accent-strong); }
.aim-reply p { font-size: 0.73rem; color: var(--text-secondary, #a1a1aa); }
.aim-acts { display: flex; gap: 6px; margin-top: 6px; }
.aim-mini {
    padding: 3px 9px;
    border: 1px solid var(--ved-border-soft);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary, #f4f4f5);
    font-family: inherit;
    font-size: 0.68rem;
    cursor: pointer;
    transition: background 0.15s ease;
}
.aim-mini:hover { background: rgba(255, 255, 255, 0.1); }
.aim-mini:focus-visible { outline: 2px solid var(--ved-accent); outline-offset: 2px; }
.aim-mini.aim-go { color: var(--success, #4ade80); border-color: rgba(74, 222, 128, 0.3); background: rgba(74, 222, 128, 0.1); }
.aim-mini.aim-send { margin-left: auto; color: var(--ved-accent); border-color: var(--ved-accent-strong); background: var(--ved-accent-soft); }

.aim-ver { padding: 6px 10px; border: 1px solid var(--ved-border-soft); border-radius: 9px; background: rgba(255, 255, 255, 0.03); }
.aim-ver.head { border-color: var(--ved-accent-strong); background: var(--ved-accent-soft); }
.aim-vid { font-size: 0.73rem; font-weight: 600; }
.aim-vsum { margin: 0; font-size: 0.72rem; color: var(--text-secondary, #a1a1aa); }
.aim-ops { margin: 5px 0 0; padding-left: 15px; font-size: 0.68rem; color: var(--text-secondary, #a1a1aa); }

/* Composer — always open, anchor follows the playhead */
.aim-composer {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 7px;
    border-top: 1px solid var(--ved-border-soft);
    background: rgba(0, 0, 0, 0.3);
    transition: background 0.15s ease;
}
.aim-composer.armed { background: var(--ved-accent-soft); }
.aim-crow { display: flex; align-items: center; gap: 6px; }
.aim-crow .aim-at { flex: 1; }
.aim-text {
    width: 100%;
    resize: vertical;
    padding: 6px 8px;
    border: 1px solid var(--ved-border-soft);
    border-radius: 7px;
    background: rgba(0, 0, 0, 0.35);
    color: var(--text-primary, #f4f4f5);
    font-family: inherit;
    font-size: 0.75rem;
}
.aim-text:focus { outline: 2px solid var(--ved-accent); outline-offset: -1px; }

/* The switch. AI mode hides the panes it replaces; Manual hides AI's own. */
.veditor-root:not(.ai-mode) .aim-sidebar,
.veditor-root:not(.ai-mode) .aim-rail,
.veditor-root:not(.ai-mode) .aim-band,
.veditor-root:not(.ai-mode) .aim-ink { display: none; }

/* Hide the whole bottom region, not just the track wrapper: .veditor-timeline-
   section contains the editing toolbar AND the timeline, and leaving the
   toolbar behind put manual editing controls under a review surface. */
.veditor-root.ai-mode .veditor-properties,
.veditor-root.ai-mode .veditor-assets,
.veditor-root.ai-mode .veditor-timeline-section,
.veditor-root.ai-mode .veditor-selection-bar { display: none; }

@media (prefers-reduced-motion: reduce) {
    .aim-pin, .aim-tool, .aim-mini, .aim-cmt, .aim-composer { transition: none; }
}

/* ============================================
   RunPod control panel
   Rented GPU time is the only thing in this app billed by the second, so money
   is the loudest element, sits above the tabs where every view can see it, and a
   pod that is costing money without being usable is styled as a problem rather
   than as neutral state.

   SPACING IS PER-INSTANCE, NOT PER-COMPONENT. The obvious way to write this is
   one padding on `.rp-sect` and one on `.rp-bar-row` and let them repeat. That
   was the first draft and it drifted visibly: the JOBS heading wants 2px above
   it because the pods list already ends with 13px, and the tab bar wants 16px on
   the left where the content under it wants 15px, so its labels line up
   optically rather than mathematically. Those are decisions, not accidents, and
   they only survive if each instance carries its own number.

   Type is Onest for prose, Space Grotesk for the one title, JetBrains Mono for
   anything numeric — all three already loaded by the app.

   The palette is declared once as tokens on the panel root. It is a colder,
   flatter dark than the rest of the app's chrome on purpose: this is an
   instrument panel, not a document, and its blue accent has to stay distinct
   from the amber that means "billing" everywhere in here.

   oklch throughout — the same lightness step reads as the same step across the
   blues, greens and ambers, which is what keeps a stack of rows from looking
   like it has been assembled out of four different UIs. That sets a floor of
   Chrome 111 / Safari 15.4 / Firefox 113 on this panel alone, which is well
   under the floor the app already has from WebCodecs; carrying a parallel hex
   palette for browsers that cannot run the editor either would be dead weight.
   ============================================ */
.runpod-panel {
    --rp-bg:      oklch(0.196 0.005 250);
    --rp-bg-2:    oklch(0.213 0.006 250);
    --rp-bg-3:    oklch(0.178 0.004 250);
    --rp-sunk:    oklch(0.166 0.004 250);
    --rp-deep:    oklch(0.145 0.003 250);
    --rp-line:    oklch(1 0 0 / 0.06);
    --rp-line-2:  oklch(1 0 0 / 0.09);
    --rp-fg:      oklch(0.95 0.002 250);
    --rp-fg-2:    oklch(0.80 0.005 250);
    --rp-fg-3:    oklch(0.62 0.005 250);
    --rp-fg-4:    oklch(0.50 0.005 250);
    --rp-accent:  oklch(0.72 0.13 230);
    --rp-accent-t:oklch(0.85 0.09 232);
    --rp-good:    oklch(0.68 0.13 155);
    --rp-warn:    oklch(0.78 0.13 70);
    --rp-bad:     oklch(0.70 0.16 25);
    --rp-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    position: relative;
    flex-shrink: 0;
    width: 520px; min-width: 320px; max-width: 55vw;
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--rp-bg);
    border-left: 1px solid var(--rp-line-2);
    color: var(--rp-fg);
    font-family: 'Onest', system-ui, sans-serif;
    font-size: 13px; line-height: 1.4;
}
/* Same left-edge grab strip as the asset panel. */
.rp-resize-handle-left {
    position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
    cursor: ew-resize; z-index: 5;
}
.rp-resize-handle-left:hover { background: oklch(1 0 0 / 0.12); }

.runpod-panel button { font: inherit; }
.runpod-panel .rp-mono, .runpod-panel .rp-stat-v, .runpod-panel .rp-stat-k,
.runpod-panel .rp-pod-name, .runpod-panel .rp-pod-cost, .runpod-panel .rp-pod-up,
.runpod-panel .rp-pod-desc-m, .runpod-panel .rp-sect-k, .runpod-panel .rp-sect-n,
.runpod-panel .rp-card-k, .runpod-panel .rp-card-v, .runpod-panel .rp-bar-v,
.runpod-panel .rp-bar-k, .runpod-panel .rp-tp, .runpod-panel .rp-tp-head,
.runpod-panel .rp-job-n, .runpod-panel .rp-job-m, .runpod-panel .rp-job-g,
.runpod-panel .rp-chip, .runpod-panel .rp-opt, .runpod-panel .rp-seg-b,
.runpod-panel .rp-track-n, .runpod-panel .rp-track-b, .runpod-panel .rp-step-v,
.runpod-panel .rp-gpu-n, .runpod-panel .rp-gpu-r, .runpod-panel .rp-gpu-m,
.runpod-panel .rp-gpu-a, .runpod-panel .rp-tag, .runpod-panel .rp-unit,
.runpod-panel .rp-eta, .runpod-panel .rp-cost-m, .runpod-panel .rp-foot-v,
.runpod-panel .rp-link, .runpod-panel .rp-log {
    font-family: var(--rp-mono); font-variant-numeric: tabular-nums;
}

/* ---- header ---- */
.rp-head {
    flex: none; display: flex; align-items: center; gap: 10px;
    padding: 12px 12px 11px 15px;
    border-bottom: 1px solid var(--rp-line);
    background: var(--rp-bg-2);
}
.rp-title { font-family: 'Space Grotesk', system-ui, sans-serif;
    font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: oklch(0.96 0.002 250); }
.rp-chip-live {
    display: flex; align-items: center; gap: 7px;
    padding: 3px 10px 3px 8px; border-radius: 20px;
    background: oklch(1 0 0 / 0.05); border: 1px solid var(--rp-line-2);
    font-family: var(--rp-mono); font-size: 11.5px; font-weight: 600; color: oklch(0.78 0.005 250);
}
.rp-head-acts { margin-left: auto; display: flex; gap: 1px; }
.rp-ico {
    width: 28px; height: 28px; flex: none; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 7px; background: none;
    color: var(--rp-fg-3); cursor: pointer;
}
.rp-ico:hover { background: oklch(1 0 0 / 0.07); color: oklch(0.93 0.002 250); }
.rp-ico-danger:hover { background: oklch(0.65 0.19 25 / 0.16); color: oklch(0.83 0.14 25); }
.rp-i { display: block; }
/* The one affordance that keeps the panel from turning into an essay: anything
   worth saying but not worth reading every time hangs off one of these. */
.rp-info { display: inline-flex; align-items: center; color: var(--rp-fg-4);
    cursor: help; vertical-align: -1px; }
.rp-info:hover { color: var(--rp-fg-2); }
@keyframes rp-spin { to { transform: rotate(360deg); } }
@keyframes rp-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.rp-spin { animation: rp-spin 0.7s linear; }
.rp-pulse { animation: rp-pulse 2.2s ease-in-out infinite; }

/* ---- money strip ---- */
.rp-stats {
    flex: none; display: grid; grid-template-columns: 1fr 1fr 1fr;
    border-bottom: 1px solid var(--rp-line); background: var(--rp-bg-3);
}
.rp-stat { padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; }
.rp-stat + .rp-stat { border-left: 1px solid oklch(1 0 0 / 0.05); }
.rp-stat-k { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; color: oklch(0.56 0.005 250); }
.rp-stat-v { font-size: 19px; font-weight: 500; color: oklch(0.93 0.002 250); }

/* The one element that is allowed to be two pixels tall: it is glanced, never
   read, and a labelled progress bar here would compete with the numbers above. */
.rp-budget { flex: none; height: 2px; background: oklch(0.16 0.004 250); }
.rp-budget-fill { display: block; height: 100%; background: oklch(0.5 0.06 232);
    transition: width 0.4s ease; }
.rp-budget-hot { background: var(--rp-bad); }

/* ---- tabs ---- */
/* 16px on the left where the content below is on 15: the tab label sits inside
   an icon+gap, so matching the numbers would push it visibly right of the
   headings it introduces. */
.rp-tabs {
    flex: none; display: flex; align-items: stretch; gap: 18px;
    padding: 0 12px 0 16px; border-bottom: 1px solid var(--rp-line-2);
}
.rp-tab {
    display: flex; align-items: center; gap: 7px;
    padding: 12px 1px 11px; margin-bottom: -1px;
    background: none; border: 0; border-bottom: 2px solid transparent;
    font-size: 13px; font-weight: 500; color: oklch(0.64 0.005 250); cursor: pointer;
}
.rp-tab:hover { color: oklch(0.93 0.002 250); }
.rp-tab-on { border-bottom-color: var(--rp-accent); color: oklch(0.97 0.002 250); font-weight: 600; }

.rp-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
/* Overview is the one tab laid out as a stack of equal-weight blocks, so its
   rhythm comes from a single gap rather than from each section's own padding. */
.rp-body-overview { padding: 13px 15px 16px; gap: 16px; }
.rp-body::-webkit-scrollbar, .rp-console-body::-webkit-scrollbar,
.rp-pods::-webkit-scrollbar, .rp-jobs::-webkit-scrollbar,
.rp-gpus::-webkit-scrollbar { width: 8px; }
.rp-body::-webkit-scrollbar-thumb, .rp-console-body::-webkit-scrollbar-thumb,
.rp-pods::-webkit-scrollbar-thumb, .rp-jobs::-webkit-scrollbar-thumb,
.rp-gpus::-webkit-scrollbar-thumb { background: oklch(0.32 0.008 250); border-radius: 4px; }

/* ---- section rules ---- */
.rp-sect { flex: none; display: flex; align-items: center; gap: 9px; padding: 11px 15px 8px; }
/* Directly under a list that already ends in its own bottom padding. */
.rp-sect-tight { padding: 2px 15px 8px; }
/* A heading nested inside a block that already carries the panel's side padding
   must not add its own, or it ends up indented twice as far as every other
   heading in the panel. */
.rp-group .rp-sect, .rp-setup-gpu .rp-sect, .rp-cost .rp-sect { padding: 0; }
.rp-sect-k { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; color: oklch(0.58 0.005 250); }
.rp-sect-n { font-size: 11.5px; color: oklch(0.55 0.005 250); }
.rp-rule { flex: 1; height: 1px; background: var(--rp-line); }
.rp-link { background: none; border: 0; padding: 0; cursor: pointer;
    font-size: 11.5px; color: var(--rp-fg-3); }
.rp-link:hover { color: oklch(0.95 0.002 250); }
.rp-link-danger:hover { color: oklch(0.85 0.13 25); }
.rp-group { flex: none; display: flex; flex-direction: column; gap: 9px; }
.rp-dim { color: var(--rp-fg-4); font-size: 11.5px; }
.rp-bright { color: oklch(0.94 0.002 250); }
.rp-hot { color: oklch(0.82 0.11 45); }
.rp-on { color: oklch(0.95 0.002 250) !important; }

.rp-blank {
    flex: none; display: flex; flex-direction: column; align-items: center; gap: 9px;
    padding: 18px; text-align: center;
    border: 1px dashed oklch(1 0 0 / 0.1); border-radius: 9px;
    font-size: 12.5px; line-height: 1.5; color: var(--rp-fg-3); text-wrap: pretty;
}
.rp-blank-lg { padding: 22px; }
.rp-blank-click { cursor: pointer; }
.rp-blank-click:hover { border-color: oklch(1 0 0 / 0.2); }
.rp-cta {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 13px; border-radius: 8px;
    background: oklch(0.72 0.13 230 / 0.14); border: 1px solid oklch(0.72 0.13 230 / 0.4);
    font-size: 12.5px; font-weight: 600; color: var(--rp-accent-t);
}

/* ---- buttons ---- */
.rp-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 14px; border-radius: 8px; cursor: pointer; font-size: 12.5px;
    background: oklch(1 0 0 / 0.06); border: 1px solid var(--rp-line-2); color: var(--rp-fg);
}
.rp-btn:hover { background: oklch(1 0 0 / 0.11); }
.rp-btn[disabled] { opacity: 0.45; cursor: default; }
/* Sits inside a section head, where the full-size button is taller than the
   rule it is aligned against. */
.rp-btn-sm { padding: 4px 10px; font-size: 11.5px; border-radius: 7px; }
.rp-btn-primary {
    background: var(--rp-accent); border-color: var(--rp-accent);
    color: oklch(0.16 0.03 240); font-weight: 700; font-size: 13.5px; padding: 10px 18px; border-radius: 9px;
}
.rp-btn-primary:hover { background: oklch(0.78 0.12 232); }
.rp-mini-cta {
    flex: none; padding: 3px 9px; border-radius: 6px; cursor: pointer;
    background: oklch(0.72 0.13 230 / 0.14); border: 1px solid oklch(0.72 0.13 230 / 0.4);
    font-family: var(--rp-mono); font-size: 11px; font-weight: 600; color: var(--rp-accent-t);
}
.rp-mini-cta:hover { background: oklch(0.72 0.13 230 / 0.24); }

/* ---- status boxes ---- */
.rp-busy, .rp-err { flex: none; margin: 11px 15px 0; padding: 8px 11px;
    border-radius: 8px; font-size: 12px; line-height: 1.45; text-wrap: pretty; }
.rp-busy { background: oklch(0.72 0.13 230 / 0.12); color: var(--rp-accent-t); }
.rp-err  { background: oklch(0.65 0.19 25 / 0.13); color: oklch(0.84 0.11 25); }
/* Scarcity is amber, not red. A refused start is a wait the user has to sit
   out, not a fault they introduced, and the panel's colours should not accuse
   them of one. */
.rp-cap {
    flex: none; display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
    margin: 11px 15px 0; padding: 11px 13px; border-radius: 9px;
    border: 1px solid oklch(0.78 0.13 70 / 0.32); background: oklch(0.78 0.13 70 / 0.09);
    font-size: 12px; line-height: 1.45; color: oklch(0.85 0.06 75); text-wrap: pretty;
}
.rp-cap p { margin: 0; }
.rp-cap-head { display: flex; align-items: center; gap: 6px;
    font-size: 12.5px; font-weight: 600; color: oklch(0.88 0.11 75); }
.rp-cap-acts { display: flex; gap: 7px; }
.rp-empty { padding: 20px 15px; display: flex; flex-direction: column; gap: 12px;
    align-items: flex-start; color: var(--rp-fg-3); line-height: 1.55; }
.rp-empty p { margin: 0; text-wrap: pretty; }

/* ---- dots ---- */
.rp-dot { width: 6px; height: 6px; flex: none; border-radius: 50%; background: oklch(0.44 0.005 250); }
.rp-dot-ok, .rp-dot-gen { background: var(--rp-good); }
.rp-dot-wait, .rp-dot-idle { background: var(--rp-warn); }
.rp-dot-boot { background: var(--rp-accent); }
.rp-dot-bad, .rp-dot-dark { background: var(--rp-bad); }
.rp-dot-paused, .rp-dot-off, .rp-dot-queued { background: oklch(0.42 0.005 250); }

/* ---- pods ---- */
/* Capped and self-scrolling, as the design has it: past four pods the list would
   otherwise push the console — the thing that says WHY a pod is misbehaving —
   off the bottom of the panel. */
.rp-pods { flex: none; max-height: 296px; overflow-y: auto;
    display: flex; flex-direction: column; gap: 5px; padding: 0 15px 13px; }
.rp-pod { flex: none; border: 1px solid oklch(1 0 0 / 0.07); border-radius: 9px;
    background: var(--rp-sunk); overflow: hidden; }
.rp-pod-gen { border-color: oklch(0.68 0.13 155 / 0.28); }
.rp-pod-dark { border-color: oklch(0.7 0.16 25 / 0.34); }
.rp-pod-top { display: flex; align-items: center; gap: 9px; padding: 9px 7px 6px 10px; }
.rp-pod-name { font-size: 13px; font-weight: 500; color: oklch(0.95 0.002 250); white-space: nowrap; }
.rp-pod-state { font-size: 11.5px; font-weight: 600; color: var(--rp-fg-3); }
.rp-pod-gen .rp-pod-state { color: var(--rp-good); }
.rp-pod-boot .rp-pod-state { color: var(--rp-accent-t); }
.rp-pod-idle .rp-pod-state { color: var(--rp-warn); }
.rp-pod-dark .rp-pod-state { color: var(--rp-bad); }
.rp-pod-cost { margin-left: auto; font-size: 13px; font-weight: 600; color: oklch(0.94 0.002 250); }
.rp-pod-cost-off { font-size: 11.5px; font-weight: 500; color: oklch(0.58 0.005 250); }
.rp-pod-up { font-size: 11.5px; color: oklch(0.58 0.005 250); min-width: 46px; text-align: right; }
.rp-pod-acts { display: flex; gap: 1px; }
.rp-pod-acts .rp-ico { width: 23px; height: 23px; border-radius: 6px; }
.rp-pod-desc { display: flex; align-items: baseline; gap: 9px; padding: 0 10px 9px 25px; }
.rp-pod-desc-t { flex: 1; min-width: 0; font-size: 12.5px; line-height: 1.4; color: oklch(0.76 0.005 250);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-pod-desc-m { flex: none; font-size: 11.5px; color: oklch(0.58 0.005 250); }
.rp-pod-bar { display: block; height: 2px; background: oklch(0.23 0.006 250); }
.rp-pod-bar-f { display: block; height: 100%; width: 0; transition: width 0.4s linear; }
.rp-bar-gen { background: var(--rp-good); }
.rp-bar-boot { background: var(--rp-accent); }
.rp-bar-idle { background: oklch(0.42 0.04 70); }
.rp-bar-dark, .rp-bar-paused { background: transparent; }

/* ---- jobs ---- */
.rp-jobs { flex: none; max-height: 178px; overflow-y: auto;
    display: flex; flex-direction: column; gap: 4px; padding: 0 15px 14px; }
.rp-job { flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 7px 8px 10px;
    border-radius: 8px; background: var(--rp-sunk); border: 1px solid var(--rp-line); }
.rp-job-n { flex: 1; min-width: 0; font-size: 12.5px; color: oklch(0.92 0.002 250);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-job-queued .rp-job-n { color: oklch(0.72 0.005 250); }
.rp-job-g { flex: none; font-size: 11.5px; color: oklch(0.6 0.005 250); }
.rp-job-m { flex: none; min-width: 84px; text-align: right; font-size: 11.5px; color: var(--rp-fg-3); }
.rp-job .rp-ico { width: 22px; height: 22px; border-radius: 6px; }

/* ---- console ---- */
/* Takes whatever height is left, with a floor. The log is the thing you are
   reading when something is wrong, so it should grow into a tall panel rather
   than leave dead space under a fixed box. */
.rp-console { flex: 1 1 240px; min-height: 240px; display: flex; flex-direction: column;
    border-top: 1px solid var(--rp-line); background: oklch(0.172 0.004 250); }
.rp-console-head { flex: none; display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
    padding: 10px 13px 9px 15px; }
.rp-console-head .rp-sect-k { margin-right: 2px; }
.rp-pills { display: flex; gap: 2px; padding: 2px; border-radius: 8px; background: var(--rp-deep); }
.rp-pill { padding: 4px 9px; border: 0; border-radius: 6px; background: none;
    font-size: 12px; color: oklch(0.64 0.005 250); cursor: pointer; }
.rp-pill-on { background: oklch(0.29 0.008 250); color: oklch(0.96 0.002 250); }
.rp-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.rp-chip { display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: 16px; background: none;
    border: 1px solid var(--rp-line-2); font-size: 11px; font-weight: 600;
    color: oklch(0.68 0.005 250); cursor: pointer; }
.rp-chip:hover { border-color: oklch(1 0 0 / 0.2); }
.rp-chip-on { border-color: oklch(1 0 0 / 0.3); color: oklch(0.96 0.002 250); }
.rp-chip-n { font-weight: 500; color: oklch(0.55 0.005 250); }
.rp-console-copy { margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 8px; border-radius: 6px; }
.rp-console-copy:hover { background: oklch(1 0 0 / 0.05); }
.rp-console-body { flex: 1; min-height: 0; overflow-y: auto;
    padding: 2px 10px 12px 12px; display: flex; flex-direction: column; gap: 1px; }
.rp-log { flex: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 9px;
    padding: 4px 6px; border-radius: 5px; }
.rp-log:hover { background: oklch(1 0 0 / 0.035); }
.rp-log-t { flex: none; font-size: 11.5px; color: oklch(0.48 0.005 250); }
.rp-log-t-approx { color: oklch(0.44 0.005 250); font-style: italic; }
/* 54px where the design has 40: its GPU shorts are "A100"/"H100" and ours is
   "PRO 6000", which the narrower column clips to "PRO 6…" — the one place a name
   has to survive intact, since it is what tells two pods apart. */
.rp-log-p { flex: 0 0 54px; font-size: 11px; font-weight: 600; color: oklch(0.58 0.005 250);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The ordinal that separates two pods on the same card. Its own tiny column so
   it survives the ellipsis that trims the card name beside it. */
.rp-log-i { flex: none; min-width: 12px; font-size: 10.5px; color: var(--rp-fg-4); }
.rp-log-i:empty { min-width: 0; }
.rp-log-d { width: 5px; height: 5px; align-self: flex-start; margin-top: 5px; }
.rp-log-d-gen { background: var(--rp-good); }
.rp-log-d-error { background: var(--rp-bad); }
.rp-log-d-event { background: oklch(0.55 0.05 232); }
.rp-log-d-info { background: oklch(0.42 0.005 250); }
.rp-log-node { flex: none; padding: 0 5px; border-radius: 3px;
    background: oklch(0.72 0.13 230 / 0.16); color: var(--rp-accent-t); font-size: 10px; }
/* Flex rather than grid so the message shares the line when it fits and wraps to
   its own full-width line when it does not — which is what a folded traceback
   needs, and what a docked panel forces often. */
.rp-log-x { flex: 1 1 180px; min-width: 0; font-size: 12px; line-height: 1.55;
    white-space: pre-wrap; word-break: break-word; color: oklch(0.86 0.002 250);
    text-wrap: pretty; }
.rp-log-error .rp-log-x { color: oklch(0.82 0.09 25); }
.rp-log-info .rp-log-x { color: oklch(0.65 0.005 250); }
.rp-log-foot { flex: none; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--rp-line);
    color: var(--rp-fg-4); font-size: 10px; line-height: 1.45; }

/* ---- overview ---- */
.rp-cards { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.rp-card { padding: 11px 12px; border-radius: 9px; background: var(--rp-sunk);
    border: 1px solid var(--rp-line); display: flex; flex-direction: column; gap: 3px; }
.rp-card-hot { border-color: oklch(0.7 0.12 55 / 0.34); }
.rp-card-hot .rp-card-v { color: oklch(0.84 0.11 45); }
.rp-card-bad .rp-card-v { color: oklch(0.82 0.11 25); }
.rp-card-k { display: flex; align-items: center; gap: 5px;
    font-size: 11px; font-weight: 600; letter-spacing: 0.07em; color: oklch(0.56 0.005 250); }
.rp-card-v { font-size: 20px; color: oklch(0.94 0.002 250); }
.rp-card-n { font-size: 11.5px; color: oklch(0.58 0.005 250); }

/* align-self so it hugs its buttons when it is a block on its own row (the
   Benchmarks axis picker) as well as when it sits inline in a section head. */
.rp-seg { display: flex; align-self: flex-start; gap: 2px; padding: 2px;
    border-radius: 7px; background: var(--rp-deep); }
.rp-seg-b { padding: 3px 9px; border: 0; border-radius: 5px; background: none;
    font-size: 11px; font-weight: 600; color: var(--rp-fg-3); cursor: pointer; }
.rp-seg-on { background: oklch(0.29 0.008 250); color: oklch(0.96 0.002 250); }
/* Thirteen ways to split the cost scatter do not fit on one 520px row, and a
   horizontal scroller hides the options nobody thought to drag for. */
.rp-seg-wrap { flex-wrap: wrap; align-self: stretch; }

.rp-track { display: flex; flex-direction: column; gap: 5px; }
.rp-track-top { display: flex; align-items: baseline; gap: 8px; }
.rp-track-n { flex: none; min-width: 44px; font-size: 12px; color: oklch(0.6 0.005 250); }
.rp-track-note { flex: 1; min-width: 0; font-size: 11.5px; color: oklch(0.58 0.005 250);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-track-b { flex: none; font-size: 12px; }
.rp-good { color: var(--rp-good); }
.rp-warnc { color: var(--rp-warn); }
.rp-badc { color: var(--rp-bad); }
.rp-mute { color: oklch(0.5 0.005 250); }
.rp-strip { display: flex; gap: 1px; height: 16px; border-radius: 3px; overflow: hidden; }
.rp-cell { flex: 1; }
.rp-cell-gen { background: var(--rp-good); }
.rp-cell-idle { background: oklch(0.62 0.1 70); }
.rp-cell-boot { background: oklch(0.55 0.1 232); }
.rp-cell-paused, .rp-cell-off { background: oklch(0.25 0.006 250); }
.rp-legend { display: flex; gap: 14px; flex-wrap: wrap; padding-top: 2px; }
.rp-legend-i { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--rp-fg-3); }
.rp-legend-i .rp-cell { flex: none; width: 9px; height: 9px; border-radius: 2px; }

.rp-bar-row { display: flex; align-items: center; gap: 10px; }
.rp-bar-k { flex: none; min-width: 44px; font-size: 12px; color: var(--rp-fg-2); }
.rp-fail-k { flex: 1; min-width: 0; font-size: 12px; color: var(--rp-fg-2);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-bar { flex: 1; height: 7px; border-radius: 4px; background: oklch(0.23 0.006 250); overflow: hidden; }
.rp-bar-sm { flex: none; width: 96px; height: 6px; border-radius: 3px; }
.rp-bar-f { display: block; height: 100%; border-radius: 4px; background: oklch(0.5 0.07 70); }
.rp-bar-hot { background: oklch(0.62 0.11 55); }
.rp-bar-cool { background: oklch(0.5 0.07 232); }
.rp-bar-bad { background: oklch(0.58 0.12 25); border-radius: 3px; }
.rp-bar-v { flex: none; min-width: 52px; text-align: right; font-size: 12px; color: oklch(0.72 0.005 250); }
.rp-bar-v2 { min-width: 48px; }
.rp-bar-n { flex: none; min-width: 18px; text-align: right; font-size: 11.5px; color: oklch(0.7 0.005 250); }

.rp-tp-wrap { display: flex; flex-direction: column; gap: 3px; }
.rp-tp-head { display: flex; align-items: flex-end; gap: 10px; padding: 0 10px 2px; }
.rp-tp { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px;
    background: var(--rp-sunk); border: 1px solid var(--rp-line); }
.rp-tp-head span { font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
    color: oklch(0.64 0.005 250); text-align: right; }
.rp-tp-head .rp-c1 { text-align: left; }
.rp-tp span { font-size: 12px; color: oklch(0.7 0.005 250); text-align: right; }
.rp-c1 { flex: none; min-width: 44px; text-align: left; }
.rp-c2 { flex: none; min-width: 38px; }
.rp-c3 { flex: none; min-width: 52px; }
.rp-c4 { flex: none; min-width: 60px; }
.rp-c5 { flex: none; min-width: 72px; }
.rp-c6 { flex: 1; }

/* Its own sunken card, as the design has it — the bucket list is a summary of
   the FAILURES card above, not another row of the table beside it. */
.rp-failbox { display: flex; flex-direction: column; gap: 7px; padding: 9px 11px;
    border-radius: 9px; background: var(--rp-sunk); border: 1px solid var(--rp-line); }
.rp-failbox-k { font-size: 11px; font-weight: 600; letter-spacing: 0.07em;
    font-family: var(--rp-mono); color: oklch(0.56 0.005 250); }

/* ---- benchmarks: cost per second ----
   Two lines per row rather than a seventh column. The dock is ~500px and the
   config label ("H3 frames · Turbo Medium") does not survive being squeezed into
   a share of that; the numbers that have to line up for scanning are the price
   and the bar, and those do. */
.rp-cost { flex: none; display: flex; flex-direction: column; gap: 5px;
    padding: 9px 11px; border-radius: 9px;
    background: var(--rp-sunk); border: 1px solid var(--rp-line); }
/* The cheapest row is the answer, so it is the one thing here with a colour. */
.rp-cost-best { border-color: oklch(0.62 0.13 155 / 0.5); }
.rp-cost-top { display: flex; align-items: baseline; gap: 8px; }
.rp-cost-t { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600;
    color: oklch(0.92 0.002 250); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-cost-g { flex: none; font-family: var(--rp-mono); font-size: 11px; font-weight: 600;
    padding: 1px 7px; border-radius: 5px;
    background: oklch(1 0 0 / 0.07); color: var(--rp-fg-3); }
.rp-cost-v { flex: none; font-family: var(--rp-mono); font-size: 14px; font-weight: 600;
    color: oklch(0.94 0.002 250); font-variant-numeric: tabular-nums; }
.rp-cost-best .rp-cost-v { color: var(--rp-good); }
.rp-cost-bar { height: 4px; border-radius: 3px; overflow: hidden;
    background: oklch(1 0 0 / 0.06); }
.rp-cost-fill { display: block; height: 100%; border-radius: 3px;
    background: oklch(0.62 0.09 250 / 0.75); }
.rp-cost-best .rp-cost-fill { background: var(--rp-good); }
.rp-cost-sub { display: flex; align-items: baseline; gap: 8px;
    font-size: 11px; color: var(--rp-fg-4); }
.rp-cost-sub > span:first-child { flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-cost-x { flex: none; font-family: var(--rp-mono); color: var(--rp-fg-3); }

/* ---- benchmarks: what each setting costs ---- */
.rp-fac { flex: none; display: flex; flex-direction: column; gap: 3px;
    padding: 9px 11px; border-radius: 9px;
    background: var(--rp-sunk); border: 1px solid var(--rp-line); }
.rp-fac-h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; }
.rp-fac-k { flex: 1; min-width: 0; font-size: 12px; font-weight: 600;
    color: oklch(0.92 0.002 250); }
.rp-fac-r { flex: none; font-family: var(--rp-mono); font-size: 10.5px; color: var(--rp-fg-4); }
.rp-fac-l { display: flex; align-items: baseline; gap: 8px; }
.rp-fac-v { flex: 1; min-width: 0; font-size: 11.5px; color: oklch(0.7 0.005 250);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-fac-d { flex: none; min-width: 42px; text-align: right; font-family: var(--rp-mono);
    font-size: 12px; font-weight: 600; color: var(--rp-fg-3);
    font-variant-numeric: tabular-nums; }
/* Cheaper is the good direction, and it is the only thing coloured — a table
   where every row is tinted says nothing about any of them. */
.rp-fac-down { color: var(--rp-good); }
.rp-fac-up { color: var(--rp-warn); }
.rp-fac-u { flex: none; min-width: 62px; text-align: right; font-family: var(--rp-mono);
    font-size: 11px; color: var(--rp-fg-3); font-variant-numeric: tabular-nums; }
.rp-fac-n { flex: none; min-width: 62px; text-align: right; font-size: 10.5px;
    color: var(--rp-fg-4); }
.rp-fac-note, .rp-fac-no { margin-top: 4px; font-size: 11px; color: var(--rp-fg-4);
    text-wrap: pretty; }
.rp-fac-no { font-style: italic; }

/* ---- benchmarks ---- */
.rp-bench { flex: none; display: flex; flex-direction: column; gap: 7px;
    padding: 10px 11px; border-radius: 9px;
    background: var(--rp-sunk); border: 1px solid var(--rp-line); }
.rp-bench-top { display: flex; align-items: baseline; gap: 8px; }
.rp-bench-t { flex: none; font-size: 12.5px; font-weight: 600; color: oklch(0.92 0.002 250); }
.rp-bench-g { flex: none; font-family: var(--rp-mono); font-size: 11px; font-weight: 600;
    padding: 1px 7px; border-radius: 5px;
    background: oklch(1 0 0 / 0.07); color: var(--rp-fg-3); }
.rp-bench-n { flex: 1; min-width: 0; font-family: var(--rp-mono); font-size: 11px;
    color: var(--rp-fg-4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-bench-m { flex: none; font-family: var(--rp-mono); font-size: 13px; font-weight: 600;
    color: oklch(0.94 0.002 250); font-variant-numeric: tabular-nums; }
/* Fixed viewBox scaled to whatever width the dock is: no measurement, no resize
   observer, and the circles stay circular because the aspect ratio is kept. */
.rp-plot { display: block; width: 100%; height: auto; }
.rp-plot-grid { stroke: oklch(1 0 0 / 0.07); stroke-width: 1; }
.rp-plot-lab { fill: var(--rp-fg-4); font-family: var(--rp-mono); font-size: 9px; }
/* COLOUR COMES FROM THE ELEMENT, NOT FROM HERE. Every point and every fit is
   drawn with its series' own hue as a presentation attribute, and a fill or a
   stroke declared in a stylesheet outranks a presentation attribute — so these
   rules used to repaint all of them one blue and one green. The legend beside
   the chart went on naming three different cards. Only the parts that are the
   same for every series live here. */
.rp-plot-fit { stroke-width: 1.5; stroke-dasharray: 4 3; opacity: 0.85; }
.rp-plot-pt { stroke-width: 1; }
/* Hollow, and excluded from the fit: a 21 GB model load is a different
   population from every run after it, not an outlier to average away. The
   COLOUR still says which card — the fill is what says which population, so
   that a cold run on the H200 is not mistaken for a warm one on some other
   card, which a shared amber would have made it. */
.rp-plot-pt-cold { stroke-width: 1.6; }
/* One legend row per card on an overlaid chart: swatch, SKU, then what its fit
   says in both units — seconds per step and dollars per step, which for two
   different cards routinely rank in opposite orders. */
.rp-ovl-legend { display: flex; flex-direction: column; gap: 3px; }
.rp-ovl-row { display: flex; align-items: baseline; gap: 7px; }
/* On the cost scatter a legend row is a control: it hides its own series so two
   of five can be compared without the other three setting the axes. Styled to
   stay a legend — the hover tint is the only thing that says it is clickable,
   because a row of buttons would read as a toolbar. */
.rp-ovl-btn { width: 100%; padding: 2px 4px; margin: 0 -4px; border: 0; border-radius: 5px;
    background: none; text-align: left; cursor: pointer; font: inherit; }
.rp-ovl-btn:hover { background: oklch(1 0 0 / 0.05); }
.rp-ovl-off { opacity: 0.4; }
.rp-ovl-sw { flex: none; width: 9px; height: 9px; border-radius: 3px; }
.rp-ovl-g { flex: none; min-width: 54px; font-family: var(--rp-mono); font-size: 11px;
    font-weight: 600; color: oklch(0.88 0.002 250); }
.rp-ovl-f { flex: 1; min-width: 0; font-family: var(--rp-mono); font-size: 10.5px;
    color: var(--rp-fg-4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.rp-bench-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rp-bench-fit { flex: 1; min-width: 0; font-family: var(--rp-mono); font-size: 11px;
    color: var(--rp-accent-t); white-space: pre; overflow: hidden; text-overflow: ellipsis; }
.rp-bench-legend { flex: none; display: flex; align-items: center; gap: 5px;
    font-size: 10.5px; color: var(--rp-fg-4); }
.rp-pt { width: 7px; height: 7px; border-radius: 50%; flex: none;
    background: oklch(0.72 0.13 230 / 0.75); border: 1px solid var(--rp-accent); }
.rp-pt-cold { background: none; border-color: var(--rp-warn); }
.rp-bench-legend .rp-pt + span { margin-right: 4px; }

.rp-ovs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.rp-ov { padding: 9px 11px; border-radius: 9px; background: var(--rp-sunk);
    border: 1px solid var(--rp-line); display: flex; flex-direction: column; gap: 2px; }
.rp-ov-k { font-family: var(--rp-mono); font-size: 10px; font-weight: 600;
    letter-spacing: 0.07em; color: oklch(0.56 0.005 250); }
.rp-ov-v { font-family: var(--rp-mono); font-size: 17px; color: oklch(0.94 0.002 250);
    font-variant-numeric: tabular-nums; }
.rp-ov-n { font-size: 11px; color: var(--rp-fg-3); text-wrap: pretty; }

/* ---- setup ---- */
.rp-setup-gpu { flex: none; min-height: 170px; display: flex; flex-direction: column; gap: 9px;
    padding: 13px 15px 14px; border-bottom: 1px solid oklch(1 0 0 / 0.05); }
/* Capped at about five rows rather than grown to fit: the catalogue can be six
   cards deep and the settings below it are what most opens of this tab are for.
   Negative margin against the padding so the scrollbar, when it appears, sits in
   the panel's own gutter instead of shortening every row by 8px. */
.rp-gpus { flex: none; max-height: 216px; overflow-y: auto; display: flex; flex-direction: column;
    gap: 4px; padding-right: 4px; margin-right: -4px; }
.rp-gpu { flex: none; display: flex; align-items: center; gap: 10px; padding: 9px 10px;
    border-radius: 8px; background: var(--rp-sunk); border: 1px solid var(--rp-line);
    cursor: pointer; }
.rp-gpu:hover { background: oklch(0.21 0.005 250); }
.rp-gpu-on { background: oklch(0.72 0.13 230 / 0.07); border-color: oklch(0.72 0.13 230 / 0.38); }
.rp-radio { width: 13px; height: 13px; flex: none; border-radius: 50%; box-sizing: border-box;
    border: 1.5px solid oklch(0.36 0.006 250); }
.rp-radio-on { border-color: var(--rp-accent); box-shadow: inset 0 0 0 3px var(--rp-accent); }
.rp-gpu-n { flex: none; min-width: 106px; font-size: 13px; font-weight: 500;
    color: oklch(0.8 0.005 250); white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; }
.rp-gpu-on .rp-gpu-n { color: oklch(0.97 0.002 250); }
.rp-gpu-m { flex: none; white-space: nowrap; font-size: 11.5px; color: oklch(0.56 0.005 250); }
/* flex:none + nowrap, or a two-word tag ("2 running") wraps inside its own pill
   and makes that one row taller than every other row in the list. */
.rp-tag { flex: none; white-space: nowrap; padding: 2px 8px; border-radius: 5px;
    background: oklch(1 0 0 / 0.07); font-size: 11px; font-weight: 600; color: var(--rp-fg-3); }
.rp-tag-ok { background: oklch(0.68 0.13 155 / 0.14); color: oklch(0.8 0.1 155); }
/* "too small" — the model does not fit. Amber rather than red: the card is a
   legitimate choice for someone who knows, and a mistake for someone who does
   not, which is a warning and not an error. */
.rp-tag-warn { background: oklch(0.75 0.14 70 / 0.15); color: oklch(0.82 0.11 70); }
.rp-gpu-m-bad { color: oklch(0.75 0.11 70); }
/* The divider between the recommended cards and everything else RunPod offers.
   max-height on .rp-gpus already scrolls, so the long list stays contained. */
.rp-gpu-div { flex: none; display: flex; align-items: center; gap: 6px;
    padding: 10px 2px 4px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--rp-fg-3); }
.rp-gpu-more { flex: none; display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 7px; margin-top: 2px; border-radius: 8px; border: 1px dashed var(--rp-line);
    font-size: 12px; color: var(--rp-fg-3); cursor: pointer; }
.rp-gpu-more:hover { background: oklch(0.21 0.005 250); color: oklch(0.85 0.005 250); }
.rp-gpu-a { margin-left: auto; display: flex; align-items: center; gap: 6px;
    font-size: 11.5px; color: oklch(0.6 0.005 250); }
.rp-gpu-a .rp-dot { width: 5px; height: 5px; }
.rp-gpu-r { flex: none; min-width: 60px; text-align: right; font-size: 12.5px; color: oklch(0.82 0.005 250); }
.rp-hint { flex: none; display: flex; gap: 7px; padding: 0 1px;
    color: oklch(0.58 0.005 250); font-size: 12px; line-height: 1.45; text-wrap: pretty; }
.rp-hint .rp-i { flex: none; margin-top: 2px; color: oklch(0.48 0.005 250); }

.rp-set { flex: none; display: flex; align-items: center; gap: 12px; padding: 12px 15px;
    border-bottom: 1px solid oklch(1 0 0 / 0.05); }
.rp-set-wide { padding: 13px 15px; gap: 9px; }
.rp-pair { flex: none; display: grid; grid-template-columns: 1fr 1fr; }
.rp-pair .rp-set:first-child { padding: 12px 14px 12px 15px; border-right: 1px solid oklch(1 0 0 / 0.05); }
.rp-pair .rp-set:last-child { padding: 12px 15px 12px 14px; }
.rp-set-l { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rp-set-t { display: flex; align-items: center; gap: 5px;
    font-size: 13px; font-weight: 600; color: oklch(0.93 0.002 250); }
.rp-set-h { font-size: 11.5px; line-height: 1.4; color: oklch(0.6 0.005 250); text-wrap: pretty; }
.rp-opts { flex: none; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.rp-opt { padding: 6px 11px; border-radius: 7px; background: var(--rp-sunk);
    border: 1px solid oklch(1 0 0 / 0.1); font-size: 12px; font-weight: 600;
    color: oklch(0.72 0.005 250); cursor: pointer; }
.rp-opt-sm { min-width: 30px; padding: 6px 8px; text-align: center; }
.rp-opt:hover { border-color: oklch(1 0 0 / 0.22); }
.rp-opt-on { background: oklch(0.72 0.13 230 / 0.16); border-color: oklch(0.72 0.13 230 / 0.5);
    color: oklch(0.89 0.07 232); }
/* ---- serverless (Run on) block ---- */
.rp-okc { color: var(--rp-good); }
.rp-sl { flex: none; display: flex; flex-direction: column; gap: 8px; padding: 0 15px 6px; }
.rp-sl-card { display: flex; flex-direction: column; gap: 7px; padding: 10px 11px;
    border: 1px solid oklch(1 0 0 / 0.08); border-radius: 9px; background: var(--rp-sunk); }
.rp-sl-seeding { flex-direction: row; align-items: flex-start; gap: 10px; }
.rp-sl-seeding .rp-dot { margin-top: 5px; }
.rp-sl-lines { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.rp-sl-head { display: flex; align-items: center; gap: 8px; }
.rp-sl-t { font-size: 12.5px; font-weight: 600; color: oklch(0.93 0.002 250); }
.rp-sl-h { font-size: 11.5px; line-height: 1.45; color: oklch(0.66 0.005 250); }
.rp-sl-cost { margin-left: auto; font-size: 11.5px; font-weight: 600; color: oklch(0.82 0.005 250); white-space: nowrap; }
.rp-sl-row { display: flex; align-items: baseline; gap: 8px; font-size: 11.5px; min-width: 0; }
.rp-sl-k { flex: none; width: 76px; color: oklch(0.6 0.005 250); font-weight: 600; }
.rp-sl-id { flex: none; color: oklch(0.55 0.005 250); font-size: 11px; max-width: 120px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-sl-v { flex: 1; min-width: 0; color: oklch(0.8 0.005 250); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-sl-seed { flex: none; font-size: 11px; font-weight: 600; }
.rp-sl-setup { display: flex; flex-direction: column; gap: 6px; align-items: stretch; text-align: left; }
.rp-sl-acts { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.rp-sl-list { max-height: none; }
.rp-sl-billed { display: flex; align-items: baseline; gap: 8px; margin-top: 8px; padding-top: 8px;
    border-top: 1px solid oklch(1 0 0 / 0.07); font-size: 11.5px; }
.rp-sl-billed-l { color: oklch(0.6 0.005 250); font-weight: 600; }
.rp-sl-billed-v { margin-left: auto; color: oklch(0.85 0.005 250); font-weight: 600; white-space: nowrap; }
.rp-sl .rp-pair { border: 1px solid oklch(1 0 0 / 0.07); border-radius: 9px; overflow: hidden; }
.rp-sl .rp-warn { margin: 0; }
.rp-unit { font-size: 11px; color: oklch(0.55 0.005 250); margin-left: 2px; }

/* Advanced build settings. The option lists here are words rather than the
   two-digit minute counts the rest of the panel uses — "BF16 full" does not fit
   a 30px pill — so the row wraps them under the label instead of shrinking the
   label to fit. `align-items: start` keeps the title on the first line when it
   does wrap. */
.rp-set-stack { align-items: flex-start; flex-wrap: wrap; row-gap: 8px; }
.rp-set-stack .rp-set-l { flex: 1 1 190px; }
.rp-set-stack .rp-opts { justify-content: flex-end; }
/* Amber, and NOT the same weight as .rp-hint. These name the two settings that
   can render a clip 100% black or 100% noise while every status in this app
   reports success, so they have to read as a warning rather than as more prose
   the eye has learned to skip. */
.rp-warn { flex: none; display: flex; gap: 7px; margin: 0 15px 2px; padding: 9px 11px;
    border-radius: 8px; background: oklch(0.72 0.15 75 / 0.1);
    border: 1px solid oklch(0.72 0.15 75 / 0.28);
    color: oklch(0.84 0.09 78); font-size: 11.5px; line-height: 1.45; text-wrap: pretty; }
.rp-warn .rp-i { flex: none; margin-top: 1px; }

.rp-sw { flex: none; width: 38px; height: 22px; padding: 0; border: 0; border-radius: 12px;
    background: oklch(0.3 0.007 250); position: relative; cursor: pointer;
    transition: background 0.15s; }
.rp-sw-on { background: oklch(0.72 0.13 230 / 0.55); }
.rp-sw-k { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
    border-radius: 50%; background: oklch(0.6 0.005 250); transition: left 0.15s, background 0.15s; }
.rp-sw-on .rp-sw-k { left: 19px; background: oklch(0.97 0.01 235); }

.rp-step { flex: none; display: flex; align-items: center; gap: 1px; padding: 3px;
    border-radius: 8px; background: oklch(0.15 0.003 250); border: 1px solid oklch(1 0 0 / 0.08); }
.rp-step .rp-ico { width: 24px; height: 24px; border-radius: 6px; color: oklch(0.75 0.005 250); }
.rp-step .rp-ico:hover { background: oklch(1 0 0 / 0.08); }
.rp-step-v { min-width: 42px; text-align: center; font-size: 13px; font-weight: 600; color: oklch(0.95 0.002 250); }

.rp-cost { flex: none; display: flex; flex-direction: column;
    padding: 13px 15px 14px; border-top: 1px solid oklch(1 0 0 / 0.05); background: var(--rp-bg-3); }
.rp-cost .rp-sect { padding: 0; margin-bottom: 10px; }
.rp-eta { font-size: 11.5px; color: var(--rp-accent-t); }
.rp-cost-rows { display: flex; flex-direction: column; gap: 2px; }
.rp-cost-r { display: flex; align-items: center; gap: 10px; padding: 6px 2px; color: oklch(0.55 0.005 250); }
.rp-cost-l { flex: 1; min-width: 0; font-size: 12.5px; color: oklch(0.82 0.005 250);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-cost-m { flex: none; min-width: 82px; text-align: right; font-size: 11.5px; color: oklch(0.62 0.005 250); }
.rp-cost-warn { color: oklch(0.7 0.11 65); }
.rp-cost-warn .rp-cost-m { color: oklch(0.83 0.11 65); }

/* Outside the scroller: the price of what you are about to start must not
   scroll away from the button that starts it. */
.rp-foot { flex: none; display: flex; align-items: center; gap: 12px;
    padding: 12px 15px; border-top: 1px solid var(--rp-line-2);
    background: var(--rp-bg-2); box-shadow: 0 -8px 20px -12px oklch(0 0 0 / 0.8); }
.rp-foot-l { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rp-foot-v { font-size: 15px; color: oklch(0.94 0.002 250); display: flex; align-items: baseline; gap: 6px; }
.rp-foot-eta { font-size: 12px; color: oklch(0.6 0.005 250); }
.rp-foot-n { font-size: 11.5px; line-height: 1.4; color: oklch(0.62 0.005 250); text-wrap: pretty; }

@media (max-width: 620px) {
    /* No room to dock beside anything — take the width and drop the grab strip,
       which is not a gesture that exists on touch anyway. */
    .runpod-panel { width: 100%; min-width: 0; max-width: none; }
    .rp-resize-handle-left { display: none; }
    .rp-pair { grid-template-columns: 1fr; }
    .rp-pair .rp-set:first-child { border-right: 0; border-bottom: 1px solid oklch(1 0 0 / 0.05); }
}
@media (prefers-reduced-motion: reduce) {
    .rp-spin, .rp-pulse { animation: none; }
    .rp-budget-fill, .rp-pod-bar-f, .rp-sw, .rp-sw-k { transition: none; }
}

/* GPU chip in the toolbar. Always present so a pod can be started before a
   project is open — booting takes ~4 minutes — and so the burn rate is visible
   without opening anything. Amber only while pods are actually costing money. */
.rp-chip { display: inline-flex; align-items: center; gap: 6px; width: auto; padding: 0 8px; }
.rp-chip-burn { font-family: ui-monospace, monospace; font-size: 10.5px; font-variant-numeric: tabular-nums; }
.rp-chip-burn:empty { display: none; }
.rp-chip-on { color: #e8a13d; }
.rp-chip-on .rp-chip-burn { color: #e8a13d; }


/* =========================================================================
   CLAUDE CHAT — the panel (js/agent-chat.js)
   =========================================================================
   A floating glass panel on the right of the canvas, collapsible to an edge
   tab like the rest of the canvas chrome. Two layers: the panel is the
   shallow glass, the composer input and code blocks sit deeper. Colours are
   the app tokens; the one exception is the agent's own orange (#d97757),
   which is what the peer list already paints an agent, so the panel reads as
   "the same Claude" and not a second one.
   ------------------------------------------------------------------------ */
.agc-panel {
    position: absolute;
    top: 12px;
    right: 12px;
    bottom: 12px;
    width: 360px;
    max-width: calc(100% - 24px);
    display: flex;
    flex-direction: column;
    z-index: 60;
    background: rgba(39, 39, 42, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    opacity: 0;
    transform: translateX(12px);
    pointer-events: none;
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}
.agc-panel.agc-open { opacity: 1; transform: none; pointer-events: auto; }

.agc-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color);
}
.agc-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    flex-shrink: 0;
}
.agc-title svg { width: 16px; height: 16px; color: #d97757; }
.agc-status {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
    font-size: 0.72rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
}
.agc-status span { overflow: hidden; text-overflow: ellipsis; }
.agc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-secondary); flex-shrink: 0; }
.agc-dot[data-state="ready"] { background: var(--success); }
.agc-dot[data-state="waiting"] { background: var(--warning); }
.agc-dot[data-state="off"] { background: var(--danger); }
.agc-dot[data-state="busy"] { background: var(--accent); animation: agc-pulse 1.2s ease-in-out infinite; }
@keyframes agc-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.agc-head-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.agc-transport {
    font-family: inherit;
    font-size: 0.7rem;
    padding: 3px 6px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary);
    cursor: pointer;
    max-width: 130px;
}
.agc-transport:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.agc-icon-btn {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 6px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.agc-icon-btn:hover { background: rgba(255, 255, 255, 0.08); color: var(--text-primary); }
.agc-icon-btn:active { transform: scale(0.96); }
.agc-icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.agc-icon-btn[hidden] { display: none; }
.agc-icon-btn svg { width: 14px; height: 14px; }

.agc-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.agc-empty {
    margin: auto;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.75rem;
    line-height: 1.5;
    max-width: 240px;
}
.agc-msg { display: flex; flex-direction: column; gap: 4px; max-width: 92%; }
.agc-msg.agc-user { align-self: flex-end; align-items: flex-end; }
.agc-msg.agc-assistant { align-self: flex-start; }
.agc-msg.agc-system { align-self: center; max-width: 100%; align-items: center; }
.agc-bubble {
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.06);
    overflow-wrap: anywhere;
}
.agc-user .agc-bubble { background: rgba(91, 164, 207, 0.14); border-color: rgba(91, 164, 207, 0.3); }
.agc-system .agc-bubble {
    background: transparent;
    border-color: transparent;
    color: var(--text-secondary);
    font-size: 0.72rem;
    text-align: center;
    padding: 2px 6px;
}
.agc-bubble p { margin: 0; }
.agc-bubble p + p, .agc-bubble p + .agc-code, .agc-bubble .agc-code + p { margin-top: 6px; }
.agc-code {
    margin: 0;
    padding: 8px;
    border-radius: 6px;
    background: rgba(9, 9, 11, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.72rem;
    line-height: 1.4;
    white-space: pre-wrap;
    overflow-x: auto;
}
.agc-meta { font-size: 0.65rem; color: var(--text-secondary); }
.agc-meta[data-state="failed"] { color: var(--danger); }
.agc-meta[data-state="pending"] { color: var(--warning); }

.agc-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.agc-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 0.68rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
    max-width: 100%;
}
.agc-chip b {
    color: var(--text-primary);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 160px;
}
.agc-chip button {
    all: unset;
    cursor: pointer;
    color: var(--text-secondary);
    line-height: 1;
    padding: 0 2px;
    font-size: 0.8rem;
}
.agc-chip button:hover { color: var(--danger); }
.agc-chip button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 3px; }

.agc-hint {
    margin: 0 12px 8px;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(251, 191, 36, 0.08);
    border: 1px solid rgba(251, 191, 36, 0.25);
    color: var(--text-primary);
    font-size: 0.72rem;
    line-height: 1.45;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.agc-hint[hidden] { display: none; }
.agc-hint[data-tone="error"] { background: rgba(239, 68, 68, 0.08); border-color: rgba(239, 68, 68, 0.3); }
.agc-hint code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.68rem;
    background: rgba(0, 0, 0, 0.3);
    padding: 1px 5px;
    border-radius: 4px;
    user-select: all;
    overflow-wrap: anywhere;
}
.agc-hint-actions { display: flex; gap: 6px; flex-wrap: wrap; }

.agc-compose {
    border-top: 1px solid var(--border-color);
    padding: 10px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.agc-attach-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.agc-input-row { display: flex; gap: 8px; align-items: flex-end; }
.agc-input {
    flex: 1;
    resize: none;
    min-height: 38px;
    max-height: 140px;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(9, 9, 11, 0.35);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.8rem;
    line-height: 1.4;
    transition: border-color 0.15s ease;
}
.agc-input::placeholder { color: var(--text-secondary); }
.agc-input:focus { outline: none; border-color: rgba(91, 164, 207, 0.5); }
.agc-send {
    height: 38px;
    padding: 0 14px;
    border-radius: 8px;
    border: 1px solid rgba(91, 164, 207, 0.3);
    background: rgba(91, 164, 207, 0.12);
    color: var(--accent);
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}
.agc-send:hover { background: rgba(91, 164, 207, 0.22); color: #fff; border-color: rgba(91, 164, 207, 0.5); }
.agc-send:active { transform: scale(0.98); }
.agc-send:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
.agc-send:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The edge tab — the panel folded away. Same idiom as the palette and run
   controls: a small handle at the edge that brings the chrome back. */
.agc-tab {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 59;
    border-radius: 8px 0 0 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-right: none;
    background: rgba(39, 39, 42, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}
.agc-tab:hover { color: var(--text-primary); background: rgba(39, 39, 42, 0.9); }
.agc-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.agc-tab svg { width: 15px; height: 15px; color: #d97757; }
.agc-tab[hidden] { display: none; }
.agc-badge {
    position: absolute;
    top: -6px;
    left: -6px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--accent);
    color: var(--bg-primary);
    font-size: 0.62rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}
.agc-badge[hidden] { display: none; }

@media (max-width: 720px) {
    .agc-panel { top: 8px; right: 8px; bottom: 8px; left: 8px; width: auto; max-width: none; }
}