* {
    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: var(--sl-font-ui);
    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;
    cursor: pointer;
}

/* Canvas top bar: a quiet Home icon button (no brand mark inside a tool). */
.logo.toolbar-home {
    justify-content: center;
    width: var(--sl-h-sm);
    height: var(--sl-h-sm);
    border-radius: var(--sl-r-6);
    color: var(--sl-text-2);
    flex: none;
}
.logo.toolbar-home:hover { background: var(--sl-wash); color: var(--sl-text-1); }

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

.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: transparent;
    border: none;
    color: var(--sl-text-2);
    cursor: pointer;
    padding: 0;
    border-radius: var(--sl-r-6);
    transition: background 0.12s ease, color 0.12s ease;
    flex-shrink: 0;
    box-shadow: none;
    width: var(--sl-h-sm);
    height: var(--sl-h-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-new-tab:hover {
    background: var(--sl-wash);
    color: var(--sl-text-1);
}

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

/* ============================================================
   MINIMALIST DOCK CAPSULE (Option A - Slate Theme)
   Matches .slc-zoom and the sidebar rails (#palette, #tools-sidebar)
   ============================================================ */
.control-buttons {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9000;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 3px 4px;
    background: var(--sl-raised);
    border: 1px solid var(--sl-line-pop);
    border-radius: var(--sl-r-10);
    box-shadow: var(--sl-shadow-float);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
    user-select: none;
}

#control-buttons.controls-hidden {
    transform: translateX(-50%) translateY(calc(100% + 24px));
    opacity: 0;
    pointer-events: none;
}

/* Control capsule groups and dividers */
.control-capsule-group {
    display: flex;
    align-items: center;
    gap: 2px;
}

.control-capsule-divider {
    width: 1px;
    height: 16px;
    margin: 0 3px;
    background: var(--sl-line-3);
    flex-shrink: 0;
}

/* Compact icon buttons matching .slc-zoom-btn and .palette-item */
.control-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: var(--sl-r-sm, 8px);
    background: transparent;
    color: var(--sl-text-dim, oklch(0.65 0.005 250));
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.control-btn svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    transition: filter 0.15s ease, transform 0.1s ease;
}

.control-btn:hover:not(:disabled) {
    background: oklch(1 0 0 / 0.06);
    color: var(--sl-text-hi, oklch(0.97 0.002 250));
}

.control-btn:active:not(:disabled) {
    transform: scale(0.95);
}

.control-btn:disabled {
    color: var(--sl-text-ghost, oklch(0.45 0.005 250));
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

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

/* Quiet History Buttons (Undo / Redo) */
.control-btn-quiet {
    color: var(--sl-text-dim, oklch(0.65 0.005 250));
}

/* Run / Play: the capsule's one accent (PatchWork Standard — status colours
   are never buttons, so no emerald / amber here). */
.control-btn-play {
    color: var(--sl-link);
}

.control-btn-play:hover:not(:disabled) {
    background: var(--sl-accent-tint);
    color: var(--sl-accent-text);
}

/* Regenerate All: a quiet control like the rest */
.control-btn-continue {
    color: var(--sl-text-2);
}

.control-btn-continue:hover:not(:disabled) {
    background: var(--sl-wash);
    color: var(--sl-text-1);
}

/* Stop: destructive text, danger wash on hover */
.control-btn-stop {
    color: var(--sl-danger-text);
}

.control-btn-stop:hover:not(:disabled) {
    background: var(--sl-danger-wash);
    color: var(--sl-danger-text);
}

/* Collapse / Hide Controls Button */
.control-hide-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 28px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--sl-text-ghost, oklch(0.5 0.005 250));
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    padding: 0;
}

.control-hide-btn:hover {
    background: oklch(1 0 0 / 0.06);
    color: var(--sl-text-hi, oklch(0.97 0.002 250));
}

.control-hide-btn svg {
    flex-shrink: 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: var(--sl-font-ui);
    letter-spacing: 0.3px;
}

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

.cost-calculator-detail {
    font-size: 0.6rem;
    color: var(--text-secondary);
    font-family: var(--sl-font-ui);
    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-sep {
    width: 1px;
    height: 14px;
    background: var(--sl-line-2, oklch(1 0 0 / 0.07));
    margin: 0 4px;
    flex-shrink: 0;
}

.toolbar-menu-history {
    display: inline-flex;
    align-items: center;
    gap: 1px;
}

.toolbar-history-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 22px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--sl-text-nav, oklch(0.68 0.005 250));
    cursor: pointer;
    transition: all 0.15s ease;
}

.toolbar-history-btn svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

.toolbar-history-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.06);
    color: var(--sl-text-hi, oklch(0.97 0.002 250));
}

.toolbar-history-btn:active:not(:disabled) {
    transform: scale(0.95);
}

.toolbar-history-btn:disabled {
    color: var(--sl-text-ghost, oklch(0.45 0.005 250));
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

.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,
#output-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: relative;
    flex-shrink: 0;
    width: 440px;
    min-width: 240px;
    max-width: 70vw;
    height: 100%;
    background: rgba(10, 11, 14, 0.95);
    border: none;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: -8px 0 28px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: ui-monospace, 'Cascadia Mono', 'JetBrains Mono', Consolas, 'Courier New', monospace;
    z-index: 100;
}

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

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

#output-panel.log-minimized {
    height: auto !important;
    align-self: flex-start;
}

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

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

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

#output-panel .btn-small {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.09);
    color: var(--text-secondary);
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
    line-height: 1.4;
}

#output-panel .btn-small:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    border-color: rgba(255, 255, 255, 0.16);
}

.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 [SLATE-MIGRATED] — scrim + raised modal, 14 radius */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--sl-scrim);
    backdrop-filter: blur(2px);
    z-index: 10200;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.modal {
    background: var(--sl-raised);
    border: 1px solid oklch(1 0 0 / 0.1);
    border-radius: var(--sl-r-14);
    width: 720px;
    max-width: 90vw;
    height: 80vh;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--sl-shadow-modal);
    font-family: var(--sl-font-ui);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    border-bottom: 1px solid var(--sl-hairline);
}

.modal-header h2 {
    font-size: 14px;
    font-weight: 700;
    color: var(--sl-text-1);
    letter-spacing: -0.01em;
}

.version-tag {
    font-family: var(--sl-font-mono);
    font-size: 11px;
    color: var(--sl-text-3);
    font-weight: 500;
    margin-left: 8px;
}

.btn-close {
    background: none;
    border: none;
    color: var(--sl-text-2);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--sl-r-6);
}

.btn-close:hover {
    color: var(--sl-text-1);
    background: var(--sl-wash);
}

.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: var(--sl-font-ui), sans-serif;
    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: var(--sl-font-ui), sans-serif;
    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: var(--sl-font-mono), 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: var(--sl-font-ui), sans-serif;
    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: var(--sl-font-mono), 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 [SLATE-MIGRATED] — Standard modal; destructive confirm is outlined */
.confirm-overlay {
    position: fixed;
    inset: 0;
    background: var(--sl-scrim);
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: confirmFadeIn 0.15s ease;
    backdrop-filter: blur(2px);
}

.confirm-dialog {
    background: var(--sl-raised);
    border: 1px solid oklch(1 0 0 / 0.1);
    border-radius: var(--sl-r-14);
    box-shadow: var(--sl-shadow-modal);
    max-width: 440px;
    width: 90vw;
    padding: 20px;
    font-family: var(--sl-font-ui);
    animation: confirmSlideIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.confirm-message {
    color: var(--sl-text-1);
    font-size: 13px;
    line-height: 1.55;
    margin-bottom: 18px;
}

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

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

.confirm-actions .btn {
    height: var(--sl-h);
    padding: 0 12px;
    border-radius: var(--sl-r-8);
    font-family: var(--sl-font-ui);
    font-size: 12px;
    font-weight: 600;
}

.confirm-btn-danger {
    background: transparent;
    border: 1px solid var(--sl-danger-line);
    color: var(--sl-danger-text);
}

.confirm-btn-danger:hover {
    background: var(--sl-danger-wash);
    border-color: var(--sl-danger-line);
    color: var(--sl-danger-text);
    box-shadow: none;
}

.confirm-btn-accent {
    background: var(--sl-accent);
    border: none;
    color: var(--sl-on-accent);
    font-weight: 700;
}

.confirm-btn-accent:hover {
    background: var(--sl-accent);
    color: var(--sl-on-accent);
    filter: brightness(1.07);
    box-shadow: none;
}

@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         */
/* ============================== */

/* ============================================================
   LiteGraph Context Menu [SLATE-MIGRATED]
   Matches .sl-popover and .sl-menu-item from the Slate Design System
   ============================================================ */

.litecontextmenu,
.lgraphcanvas .litecontextmenu {
    position: fixed !important;
    z-index: 10500 !important;
    background: var(--sl-bg-pop, #1f2026) !important;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border: 1px solid var(--sl-line-pop, rgba(255, 255, 255, 0.13)) !important;
    border-radius: 12px !important;
    box-shadow: var(--sl-shadow-pop, 0 18px 40px -10px rgba(0, 0, 0, 0.9)) !important;
    padding: 5px !important;
    min-width: 180px;
    max-height: calc(100vh - 24px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    font-family: var(--sl-font-ui, 'Onest', system-ui, sans-serif) !important;
    color: var(--sl-text, #e1e1e6) !important;
    box-sizing: border-box;
}

/* Scrollbar inside context menu if items overflow screen */
.litecontextmenu::-webkit-scrollbar {
    width: 6px;
}
.litecontextmenu::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
    border-radius: 4px;
}

/* Menu entry row */
.litecontextmenu .litemenu-entry {
    margin: 1px 0 !important;
    padding: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--sl-text, #e1e1e6) !important;
    font-family: var(--sl-font-ui, 'Onest', system-ui, sans-serif) !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    line-height: 1.35;
    cursor: pointer !important;
    transition: background 0.1s ease, color 0.1s ease;
    box-sizing: border-box;
    display: flex !important;
    align-items: center !important;
}

/* Fallback padding for entries without rich formatCtxItem wrapper */
.litecontextmenu .litemenu-entry:not(:has(.pw-ctx-item-row)):not(.separator):not(:has(.pw-ctx-header)) {
    padding: 8px 10px !important;
}

.litecontextmenu .litemenu-entry:hover:not(.disabled):not(.separator) {
    background: oklch(1 0 0 / 0.06) !important;
    color: var(--sl-text-hi, #ffffff) !important;
}

.litecontextmenu .litemenu-entry:active:not(.disabled):not(.separator) {
    background: oklch(1 0 0 / 0.10) !important;
}

/* Disabled items (e.g. headers, inactive options) */
.litecontextmenu .litemenu-entry.disabled {
    cursor: default !important;
    opacity: 0.55;
    background: transparent !important;
}

/* Menu header kicker */
.pw-ctx-header {
    font-family: var(--sl-font-mono, 'JetBrains Mono', monospace);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sl-text-ghost, rgba(255, 255, 255, 0.45));
    padding: 6px 10px 4px;
    user-select: none;
}

/* Menu item row structure */
.pw-ctx-item-row {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 7px 10px;
    box-sizing: border-box;
}

/* Icon slot */
.pw-ctx-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    flex: none;
    color: var(--sl-text-dim, rgba(255, 255, 255, 0.6));
}
.pw-ctx-icon svg {
    width: 15px;
    height: 15px;
    display: block;
}

/* Item label */
.pw-ctx-label {
    flex: 1 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Keyboard shortcut */
.pw-ctx-shortcut {
    font-family: var(--sl-font-mono, 'JetBrains Mono', monospace);
    font-size: 10.5px;
    opacity: 0.45;
    margin-left: auto;
    padding-left: 14px;
    letter-spacing: 0.02em;
    flex: none;
}

/* Color swatch preview for Colors submenu */
.pw-ctx-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex: none;
    margin-right: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);
}

/* Danger actions (e.g. Delete) */
.litecontextmenu .litemenu-entry.menu-item-danger,
.litecontextmenu .litemenu-entry.is-danger,
.pw-ctx-item-row:has(.menu-item-danger) {
    color: var(--sl-red-text, #ef4444) !important;
}

.litecontextmenu .litemenu-entry.menu-item-danger:hover:not(.disabled),
.litecontextmenu .litemenu-entry.is-danger:hover:not(.disabled) {
    background: var(--sl-red-12, rgba(239, 68, 68, 0.15)) !important;
    color: #ffffff !important;
}

.litecontextmenu .litemenu-entry.menu-item-danger:hover .pw-ctx-icon,
.litecontextmenu .litemenu-entry.is-danger:hover .pw-ctx-icon {
    color: #ffffff !important;
}

/* Separator */
.litecontextmenu .litemenu-entry.separator {
    height: 1px !important;
    min-height: 1px !important;
    max-height: 1px !important;
    background: var(--sl-line-2, rgba(255, 255, 255, 0.07)) !important;
    margin: 4px 6px !important;
    padding: 0 !important;
    border: none !important;
    cursor: default !important;
}

/* Submenu indicator chevron: sleek arrow replacing LiteGraph default */
.litecontextmenu .litemenu-entry.has_submenu {
    position: relative;
}
.litecontextmenu .litemenu-entry.has_submenu::after {
    content: '›' !important;
    display: inline-block;
    margin-left: auto;
    padding-left: 8px;
    padding-right: 8px;
    font-size: 15px;
    font-weight: 400;
    line-height: 1;
    color: var(--sl-text-ghost, rgba(255, 255, 255, 0.4));
    transition: transform 0.1s ease, color 0.1s ease;
}
.litecontextmenu .litemenu-entry.has_submenu:hover::after {
    color: var(--sl-text-hi, #ffffff);
    transform: translateX(2px);
}

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

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

/* ============================== */
/* Uniform Font                    */
/* ============================== */
body,
button,
input,
select,
textarea {
    font-family: var(--sl-font-ui);
}

/* ============================== */
/* 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 [SLATE-MIGRATED] ===== */
.home-screen {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--sl-app);
    display: flex;
    flex-direction: row;
    align-items: stretch;
    animation: homeScreenFadeIn 0.3s ease;
    overflow: hidden;
    font-family: var(--sl-font-ui);
    color: var(--sl-text-1);
}

@keyframes homeScreenFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

/* --- Home rail (SlateRail) [SLATE-MIGRATED] ---
   180px expanded on the library pages, 46px collapsed inside the tools (Studio,
   Editor, Canvas). 32px rows at 12.5px with 15px icons; TOOLS / LIBRARY groups,
   then Tutorial / Workspaces / Settings (+ Admin) at the bottom and the footer
   (Agent chat, Report a bug, the user row, Collapse). On the canvas the same
   element is docked to <body> as .is-docked — see DuctedApp._railSync. */
.home-sidebar {
    width: 180px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background: var(--sl-panel);
    border-right: 1px solid var(--sl-hairline);
    overflow: hidden;
    transition: width 0.18s ease;
    position: relative;
    user-select: none;
    -webkit-user-select: none;
    z-index: 10;
    font-family: var(--sl-font-ui);
}

.home-sidebar-brand {
    display: flex;
    align-items: center;
    flex: none;
    height: 50px;
    padding: 0 12px;
    cursor: pointer;
    box-sizing: border-box;
    -webkit-app-region: no-drag;
}

.home-sidebar-brand-content {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.home-logo { flex: none; }

.home-brand {
    display: flex;
    flex-direction: column;
    line-height: 1;
    white-space: nowrap;
    min-width: 0;
}

.home-sidebar .home-title {
    font-family: var(--sl-font-ui);
    font-weight: 700;
    font-size: 14px;
    color: var(--sl-text-1);
    margin: 0;
}

.home-sidebar .home-version {
    font-family: var(--sl-font-mono);
    font-size: 9.5px;
    color: var(--sl-text-3);
    margin-top: 3px;
}

.home-sidebar-nav {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 0 7px 8px;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
}

.home-sidebar-nav::-webkit-scrollbar { display: none; }

/* Group labels: mono section-label caps. Collapsed, they become hairline rules. */
.home-rail-label {
    flex: none;
    font-family: var(--sl-font-mono);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sl-text-3);
    padding: 6px 8px 5px;
    white-space: nowrap;
}

.home-rail-label ~ .home-rail-label { padding-top: 14px; }

.home-sidebar .sl-navitem {
    flex: none;
    gap: 9px;
    padding: 0 8px;
    white-space: nowrap;
    -webkit-app-region: no-drag;
}

.home-sidebar .sl-navitem > span:not(.sl-navicon) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Injected rows (Renders from js/run-panel.js, Admin) carry their own icon sizes. */
.home-sidebar .sl-navicon svg { width: 15px; height: 15px; }

.home-sidebar-spacer { margin-top: auto; padding-top: 8px; flex: none; }

.home-sidebar-footer {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 6px 7px 8px;
    border-top: 1px solid var(--sl-hairline);
}

.home-rail-action { color: var(--sl-text-2); }

/* The agent chat panel lives on the canvas; its row only makes sense there. */
#home-rail-chat { display: none; }
body.pw-rail-docked #home-rail-chat { display: flex; }

.home-sidebar-collapse-btn { font-size: 12px; color: var(--sl-text-3); }
.home-sidebar-collapse-btn .home-collapse-icon { width: 14px; height: 14px; }

/* Full product name for assistive tech; the brand shows it visually. */
.home-sidebar-version {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* User row (rendered by js/auth.js into #pw-auth-mount). */
.pw-auth-mount { display: flex; flex-direction: column; }

.pw-auth-user {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 4px;
    border-radius: var(--sl-r-8);
    box-sizing: border-box;
}

.pw-auth-user:hover { background: var(--sl-wash); }

.pw-auth-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sl-control);
    color: var(--sl-text-1);
    font-size: 11px;
    font-weight: 600;
}

.pw-auth-name {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--sl-text-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pw-auth-signout {
    width: 24px;
    height: 24px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: var(--sl-r-6);
    background: transparent;
    color: var(--sl-text-3);
    cursor: pointer;
}

.pw-auth-signout:hover { color: var(--sl-text-1); background: var(--sl-wash); }

/* --- Collapsed rail (46px icon strip) --- */
.home-sidebar.home-sidebar-collapsed { width: 46px; }

.home-sidebar.home-sidebar-collapsed .home-brand,
.home-sidebar.home-sidebar-collapsed .sl-navitem > span:not(.sl-navicon),
.home-sidebar.home-sidebar-collapsed .pw-auth-name,
.home-sidebar.home-sidebar-collapsed .pw-auth-signout {
    display: none;
}

.home-sidebar.home-sidebar-collapsed .home-sidebar-brand { justify-content: center; padding: 0; }

.home-sidebar.home-sidebar-collapsed .sl-navitem { justify-content: center; padding: 0; }

.home-sidebar.home-sidebar-collapsed .home-rail-label {
    height: 1px;
    padding: 0;
    margin: 2px 5px 7px;
    font-size: 0;
    background: var(--sl-hairline);
}

.home-sidebar.home-sidebar-collapsed .home-rail-label ~ .home-rail-label { margin: 7px 5px; }

.home-sidebar.home-sidebar-collapsed .pw-auth-user { justify-content: center; padding: 0; }

.home-sidebar.home-sidebar-collapsed .home-collapse-icon { transform: rotate(180deg); }

/* --- Docked on the canvas --- */
.home-sidebar.is-docked {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 950;
}

/* Expanded over the canvas it floats; the canvas keeps its 46px inset. */
.home-sidebar.is-docked:not(.home-sidebar-collapsed) { box-shadow: var(--sl-shadow-float); }

body.pw-rail-docked #app { margin-left: 46px; }

/* Tools fill the rest of the window. */
.home-screen.home-immersive .home-main-area {
    height: 100%;
    overflow: hidden;
    justify-content: stretch;
}

.home-screen.home-immersive .home-tab-content.home-tab-active {
    height: 100%;
    overflow: auto;
}

.home-screen.home-immersive #home-tab-editor.home-tab-active,
.home-screen.home-immersive #home-tab-studio.home-tab-active,
#home-tab-settings.home-tab-active,
#home-tab-settings {
    overflow: hidden;
}

/* Every tool (Studio, Editor, Canvas) shows the rail collapsed to its 46px strip,
   so the floating home mark is retired. The element stays (main.js binds it). */

.home-immersive-logo {
    display: none;
    position: fixed;
    top: 7px;
    left: 20px;
    /* Above .video-player-overlay (10020); below .pws-modal-overlay (10250).
       Lives on <body>, so home-screen's z-index 9999 cannot trap it. */
    z-index: 10150;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: var(--sl-r-8);
    place-items: center;
    -webkit-app-region: no-drag;
    transition: background 0.15s ease;
}
.home-immersive-logo:hover { background: var(--sl-wash); }

/* --- Report a bug (js/bug-report.js) [SLATE-MIGRATED] --- */
/* Above #home-screen (9999) and the docked rail; slate.css sets .sl-scrim to 400. */
.sl-scrim.pw-bug-scrim { z-index: 10600; padding: 24px; }
.pw-bug-modal { width: 100%; max-width: 440px; color: var(--sl-text-1); font-family: var(--sl-font-ui); }
.pw-bug-head { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 16px; }
.pw-bug-head-icon { color: var(--sl-link); }
.pw-bug-title { flex: 1; font-size: 15px; font-weight: 700; }
.pw-bug-close { border: none; background: transparent; color: var(--sl-text-2); }
.pw-bug-close:hover { background: var(--sl-wash); color: var(--sl-text-1); }
.pw-bug-body { display: flex; flex-direction: column; gap: 14px; padding: 16px; }
.pw-bug-body [hidden] { display: none; }
.pw-bug-cats { align-self: flex-start; flex-wrap: wrap; }
.pw-bug-field { display: flex; flex-direction: column; gap: 6px; }
.pw-bug-label { font-size: 12px; font-weight: 600; color: var(--sl-text-2); }
.pw-bug-select { width: 100%; cursor: pointer; }
.pw-bug-text { width: 100%; min-height: 110px; box-sizing: border-box; }
.pw-bug-switchrow { display: flex; align-items: center; gap: 12px; }
.pw-bug-switchtext { flex: 1; min-width: 0; }
.pw-bug-switchlabel { font-size: 12.5px; font-weight: 600; }
.pw-bug-switchdesc { font-size: 11px; color: var(--sl-text-2); margin-top: 2px; }
.pw-bug-note { font-size: 12px; color: var(--sl-text-2); line-height: 1.5; }
.pw-bug-foot { align-items: center; padding: 12px 16px; }
.pw-bug-hint { flex: 1; font-family: var(--sl-font-mono); font-size: 10.5px; color: var(--sl-text-3); }

/* Tutorial (empty until lessons ship) */
.tutorial-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 40px 20px; }
.tutorial-empty > span:first-child { color: var(--sl-text-3); }
.tutorial-empty .home-empty-hint { max-width: 460px; line-height: 1.55; }
#home-open-docs { text-decoration: none; flex: none; }
/* --- Home Dashboard [SLATE-MIGRATED] ---
   Home.dc.html (Home A refined): no greeting, no GPU panel. A compact
   "Last opened" strip, Recent projects (6) beside Renders, and the Studio
   composer docked at the bottom (it hands the prompt to Studio). */

.home-dash {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
}

.home-dash-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 22px 28px 8px;
    box-sizing: border-box;
}

.home-dash-flex { flex: 1; }

/* Last opened */
.home-dash-hero {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 12px 10px 10px;
    flex-wrap: wrap;
}

.home-dash-hero-poster {
    width: 38px;
    height: 50px;
    border-radius: var(--sl-r-8);
    flex: none;
    box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.08);
}

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

.home-dash-kicker { display: block; }

.home-dash-hero-title {
    margin-top: 3px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--sl-text-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-dash-hero-meta {
    margin-top: 2px;
    font-size: 12px;
    color: var(--sl-text-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-dash-hero-status { flex: none; white-space: nowrap; }
.home-dash-hero-resume { flex: none; }

/* Recent projects take the width; Renders is a fixed side column (stacks when narrow). */
.home-dash-cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    margin-top: 22px;
    align-items: start;
}
@media (min-width: 1100px) {
    .home-dash-cols { grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); }
}

.home-dash-col { min-width: 0; }

.home-dash-sechead {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    min-height: 32px;
    margin-bottom: 10px;
}

.home-dash-sectitle { flex: none; }

.home-dash-searchbox { flex: 1 1 120px; max-width: 260px; min-width: 0; padding: 0 10px; }

.home-dash-count {
    font-family: var(--sl-font-mono);
    font-size: 10.5px;
    color: var(--sl-text-3);
    white-space: nowrap;
}

.home-dash-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 10px;
}

.home-dash-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 11px;
    min-width: 0;
    cursor: pointer;
    outline: none;
}

.home-dash-row:focus-visible { border-color: var(--sl-focus); }

.home-dash-row-poster {
    width: 40px;
    height: 54px;
    border-radius: var(--sl-r-8);
    flex: none;
    box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.07);
}

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

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

.home-dash-row-line {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    min-width: 0;
}

.home-dash-row-meta {
    font-size: 11.5px;
    color: var(--sl-text-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Canvas / Editor type tag (grey, 6 radius — a tag, not a pill) */
.home-type-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 20px;
    padding: 0 7px;
    border-radius: var(--sl-r-6);
    background: oklch(1 0 0 / 0.06);
    color: var(--sl-text-2);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    flex: none;
}

.home-dash-empty {
    padding: 14px 2px;
    font-size: 12.5px;
    color: var(--sl-text-2);
}

/* Renders */
.home-dash-renders { overflow: hidden; }

.home-dash-render {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
}

.home-dash-render + .home-dash-render { border-top: 1px solid var(--sl-hairline); }

.home-dash-render-top,
.home-dash-render-bottom {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.home-dash-render-icon { color: var(--sl-link); }

.home-dash-render-label {
    flex: 1;
    min-width: 0;
    font-size: 12.5px;
    color: var(--sl-text-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-dash-render-time,
.home-dash-render-detail {
    font-family: var(--sl-font-mono);
    font-size: 10.5px;
    color: var(--sl-text-3);
    white-space: nowrap;
    flex: none;
}

.home-dash-render-bottom .sl-status { font-size: 11.5px; }
.home-dash-render-detail { margin-left: auto; }

.home-dash-renders-empty {
    padding: 18px 12px;
    font-size: 12.5px;
    color: var(--sl-text-2);
}

/* Studio composer, docked at the bottom */
.home-dash-composer-dock {
    flex: none;
    display: flex;
    justify-content: center;
    padding: 8px 28px 18px;
}

.home-dash-composer-dock[hidden] { display: none; }

.home-dash-composer {
    width: min(780px, 100%);
    box-sizing: border-box;
    padding: 12px 14px;
    border-radius: var(--sl-r-14);
    background: var(--sl-raised);
    border: 1px solid var(--sl-border);
    box-shadow: var(--sl-shadow-float);
}

.home-dash-composer-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.home-dash-composer-kicker {
    font-family: var(--sl-font-mono);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sl-link);
}

.home-dash-composer-note { font-size: 11px; color: var(--sl-text-3); }

.home-dash-composer textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    resize: none;
    background: transparent;
    border: none;
    outline: none;
    padding: 2px 2px 0;
    font-family: var(--sl-font-ui);
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--sl-text-1);
}

.home-dash-composer textarea::placeholder { color: oklch(0.5 0.005 250); }

.home-dash-composer-foot {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 9px;
}

.home-dash-kbd {
    font-family: var(--sl-font-mono);
    font-size: 10px;
    font-weight: 500;
    padding: 2px 5px;
    border-radius: 5px;
    background: oklch(0.15 0.02 240 / 0.18);
}

/* --- Home Main Area [SLATE-MIGRATED] --- */

.home-main-area {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    display: flex;
    justify-content: center;
    background: var(--sl-app);
}

/* --- Home Tab Content [SLATE-MIGRATED] --- */

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

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

#home-tab-home.home-tab-active { display: flex; flex-direction: column; height: 100%; min-height: 0; }

/* Library pages: 30px top, 40px sides (Standard page frame). */
.home-tab-panel {
    max-width: 1560px;
    width: 100%;
    margin: 0 auto;
    padding: 30px 40px 48px;
    box-sizing: border-box;
}

.home-tab-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.home-tab-title {
    font-family: var(--sl-font-ui);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--sl-text-1);
    margin: 0;
}

.home-tab-sub {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--sl-text-2);
}

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

/* Legacy small button — secondary-button look (still used by a few panels). */
.home-btn-small {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: var(--sl-h);
    padding: 0 12px;
    box-sizing: border-box;
    border-radius: var(--sl-r-8);
    font-family: var(--sl-font-ui);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid oklch(1 0 0 / 0.1);
    background: var(--sl-control);
    color: var(--sl-text-1);
}

.home-btn-small:hover { background: var(--sl-control-hover); border-color: oklch(1 0 0 / 0.2); }
/* --- Home Content (Projects Tab) [SLATE-MIGRATED] ---
   Swept: the pre-Slate projects rules (folder chips, old row buttons, the
   48px logo) are gone; only the pieces still rendered live here. */

.home-content { width: 100%; }

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

/* Inline editors on a project row (rename, note) */
.home-rename-input,
.home-desc-input {
    width: 100%;
    box-sizing: border-box;
    height: 28px;
    padding: 0 8px;
    background: var(--sl-panel);
    border: 1px solid var(--sl-focus);
    border-radius: var(--sl-r-6);
    color: var(--sl-text-1);
    font-family: var(--sl-font-ui);
    font-size: 13px;
    font-weight: 600;
    outline: none;
}

.home-desc-input { height: 24px; font-size: 12px; font-weight: 400; }

.home-project-row.home-row-dragging { opacity: 0.5; }

/* Folder picker (still reachable from older menus) — Standard menu recipe. */
.home-folder-menu {
    position: fixed;
    z-index: 10000;
    min-width: 180px;
    max-height: 320px;
    overflow-y: auto;
    background: var(--sl-raised);
    border: 1px solid var(--sl-line-pop);
    border-radius: var(--sl-r-10);
    box-shadow: var(--sl-shadow-pop);
    padding: 5px;
}

.home-folder-menu-item {
    display: flex;
    align-items: center;
    width: 100%;
    height: 28px;
    text-align: left;
    background: none;
    border: none;
    color: oklch(0.88 0.002 250);
    font-family: var(--sl-font-ui);
    font-size: 12px;
    padding: 0 9px;
    border-radius: var(--sl-r-6);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-folder-menu-item:hover { background: oklch(1 0 0 / 0.06); }
.home-folder-menu-item.active { color: var(--sl-link); }
.home-folder-menu-item.danger { color: var(--sl-danger-text); }
.home-folder-menu-item.danger:hover { background: var(--sl-danger-wash); }
.home-folder-menu-sep { height: 1px; background: oklch(1 0 0 / 0.07); margin: 4px 6px; }

/* Prompt dialog text input (showPrompt) */
.confirm-input {
    width: 100%;
    box-sizing: border-box;
    height: var(--sl-h);
    margin-top: 4px;
    padding: 0 11px;
    background: var(--sl-panel);
    border: 1px solid var(--sl-border);
    border-radius: var(--sl-r-8);
    color: var(--sl-text-1);
    font-family: var(--sl-font-ui);
    font-size: 12.5px;
    outline: none;
}

.confirm-input:focus { border-color: var(--sl-focus); }

/* Empty state */
.home-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--sl-text-2);
    font-size: 13px;
}

.home-empty p { margin: 0; }
.home-empty p:first-child { font-size: 13.5px; font-weight: 600; color: var(--sl-text-1); margin-bottom: 6px; }
.home-empty-hint { font-size: 12px; color: var(--sl-text-2); }

/* Shared row cells — also reused by the video editor's projects overlay. */
.home-col-name { flex: 1; min-width: 0; }
.home-col-gen { width: 64px; flex-shrink: 0; }
.home-col-modified { width: 92px; text-align: right; flex-shrink: 0; }
.home-col-actions { flex-shrink: 0; display: flex; align-items: center; justify-content: flex-end; gap: 2px; }

.home-project-detail {
    font-family: var(--sl-font-mono);
    font-size: 11px;
    color: var(--sl-text-3);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.home-project-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--sl-r-8);
    background: var(--sl-quiet);
    border: 1px solid var(--sl-hairline);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--sl-link);
}

.home-project-delete:hover { color: var(--sl-danger-text); background: var(--sl-danger-wash); }
/* --- Projects Page [SLATE-MIGRATED] (supersedes the section above) ---
   Projects.dc.html: workspace dropdown, title + count line, search (⌘K), then
   one toolbar — All / Favorites / Generating, the Canvas / Editor type toggles,
   Sort menu, list/grid. Folders are retired from this page. */

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

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

.home-ws-chip { margin-bottom: 12px; font-weight: 600; }
.home-ws-chip svg:first-child { color: var(--sl-link); }

.home-projects-countline {
    margin-top: 8px;
    font-size: 13px;
    color: var(--sl-text-2);
    display: flex;
    align-items: center;
    gap: 6px;
}

.home-projects-countdot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--sl-success);
    display: inline-block;
}

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

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

.home-projects-toolbar {
    margin-top: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.home-projects-viewtoggle { flex: none; }

.home-projects-filter .sl-chip-count,
.home-projects-typefilter .sl-chip-count { margin-left: 2px; }

.home-projects-filter .sl-seg-btn svg,
.home-projects-typefilter .sl-seg-btn svg { color: var(--sl-text-3); }

.home-gen-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--sl-warning);
    display: inline-block;
}

/* Bulk bar: a quiet raised strip; Delete is the outlined destructive button. */
.home-projects-bulkbar {
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px 7px 14px;
    border-radius: var(--sl-r-10);
    background: var(--sl-raised);
    border: 1px solid var(--sl-border);
}

.home-bulk-count {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--sl-text-1);
    margin-right: 6px;
}

.home-bulk-clear { margin-left: auto; }

/* column header (sortable) */
.home-sort-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 12px 6px;
}

.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:hover,
.home-sort-bar .home-sort-btn.home-sort-active { color: var(--sl-text-2); }

.home-col-check { width: 16px; flex: none; }
.home-sort-bar .home-col-name { flex: 1; text-align: left; margin-left: 49px; }
.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: 64px; flex: none; }
.home-sort-arrow { display: inline-flex; }

/* list rows — flat rows with a hover wash, not stacked cards */
.home-projects-list { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; padding-bottom: 32px; }

.home-project-row.sl-card,
.home-project-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border-radius: var(--sl-r-10);
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
}

.home-project-row:hover { background: var(--sl-row-hover); border-color: transparent; }
.home-project-row.home-project-active { border-color: var(--sl-accent-line); }

.home-project-poster {
    width: 37px;
    height: 49px;
    border-radius: var(--sl-r-8);
    flex: none;
    box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.07);
}

.home-project-name-wrap { flex: 1; min-width: 0; }

.home-project-titleline {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.home-project-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--sl-text-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.home-project-broken-tag { font-size: 11px; font-weight: 600; color: var(--sl-error); white-space: nowrap; }

.home-project-desc {
    margin-top: 3px;
    font-size: 12px;
    color: var(--sl-text-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: text;
}

.home-desc-placeholder { color: var(--sl-text-3); opacity: 0; }
.home-project-row:hover .home-desc-placeholder { opacity: 1; }

.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-mono);
    font-size: 11px;
    color: var(--sl-text-3);
    flex: none;
}

.home-project-row .home-col-actions {
    width: 64px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
}

.home-project-row .home-col-actions button {
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: var(--sl-r-6);
    background: none;
    color: var(--sl-text-3);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.home-project-row .home-col-actions button:hover { background: var(--sl-wash); color: var(--sl-text-1); }
.home-project-row .home-project-pin.pinned { color: var(--sl-warning); }

.home-pinned-separator { height: 1px; background: var(--sl-hairline); margin: 4px 12px; }

.home-projects-nomatch { padding: 32px 20px; }

/* grid view (mosaic) */
.home-projects-grid {
    margin-top: 14px;
    column-width: 220px;
    column-gap: 14px;
    padding-bottom: 32px;
    display: block;
}

.home-project-card {
    break-inside: avoid;
    margin-bottom: 14px;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

.home-project-card-poster {
    width: 100%;
    aspect-ratio: var(--proj-aspect, 16 / 9);
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}

.home-project-video-badge,
.home-type-thumb {
    position: absolute;
    bottom: 8px;
    left: 8px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 20px;
    padding: 0 7px;
    border-radius: var(--sl-r-6);
    background: oklch(0 0 0 / 0.5);
    color: oklch(0.97 0.002 250);
    font-size: 10.5px;
    font-weight: 600;
    pointer-events: none;
}

.home-project-video-badge ~ .home-type-thumb { left: auto; right: 8px; }

.home-project-card-star {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    padding: 0;
    background: oklch(0 0 0 / 0.4);
    border: none;
    border-radius: var(--sl-r-6);
    color: oklch(1 0 0 / 0.75);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.home-project-card-star.pinned { color: var(--sl-warning); }

.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: 13.5px;
    font-weight: 600;
    color: var(--sl-text-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-project-card-date {
    margin-top: 2px;
    font-family: var(--sl-font-mono);
    font-size: 11px;
    color: var(--sl-text-3);
}

/* menus (Open in, row ⋯ / right-click, Sort, Workspace) */
.home-projects-pop { min-width: 200px; }
.home-projects-pop .home-pop-icon { color: var(--sl-text-3); }
.home-pop-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-pop-check { margin-left: auto; color: var(--sl-link); }
.home-projects-pop .sl-menu-item.is-danger .home-pop-icon { color: var(--sl-danger-text); }

/* checkbox column on rows */
.home-project-check { align-self: center; }
/* --- Assets Page [SLATE-MIGRATED] ---
   Assets.dc.html: title + count line, Refresh / Upload, search, a segmented
   filter with plain mono counts (active is grey), the card grid, and the
   scene builder reparented into the right-hand split. */

/* Split layout: the page fills the window; the grid and the scene builder scroll. */
#home-tab-assets .home-tab-panel.home-assets-page {
    max-width: none;
    width: 100%;
    padding: 30px 40px 20px;
    display: flex;
    flex-direction: column;
    height: 100vh;
    min-height: 0;
    box-sizing: border-box;
}

.home-assets-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 0;
    flex-shrink: 0;
}

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

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

/* Refresh: the dot lights when an asset arrives while you are 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: 5px;
    right: 5px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--sl-accent);
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
}

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

.home-asset-search-row.sl-search { margin-top: 22px; height: 40px; flex-shrink: 0; }

.home-asset-search-row .home-asset-search {
    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-1);
    padding: 0;
}

.home-asset-search::placeholder { color: oklch(0.5 0.005 250); }
.home-asset-search::-webkit-search-cancel-button { display: none; }

.home-asset-search-row .home-asset-search-clear[hidden] { display: none; }

.home-asset-sort-bar.sl-seg {
    align-self: flex-start;
    margin-top: 14px;
    margin-bottom: 14px;
    flex-shrink: 0;
}

.home-asset-sort-bar .sl-chip-count { margin-left: 2px; }

.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: 8px;
}

.assets-split-handle {
    flex: 0 0 6px;
    background: transparent;
    border-left: 1px solid var(--sl-hairline);
    cursor: col-resize;
    position: relative;
}

.assets-split-handle:hover,
.assets-split-handle.dragging { background: var(--sl-accent-tint); }

.assets-split-right {
    flex: 1 1 auto;
    min-width: 240px;
    display: flex;
    flex-direction: column;
    background: var(--sl-card);
    border: 1px solid var(--sl-hairline);
    border-radius: var(--sl-r-12);
    overflow: hidden;
    position: relative;
}

.assets-sb-placeholder {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sl-text-3);
    font-size: 12.5px;
}

/* 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: var(--sl-r-12);
    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 the preview on top of the timeline (2/3 : 1/3). */
.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 var(--sl-hairline);
}

.sb-panel.sb-panel-in-assets .sb-preview-empty { font-size: 12.5px; color: var(--sl-text-3); }

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

/* The floating preview clears the rail (it sat under it at left: 60px). */
.sb-panel.sb-panel-in-assets .sb-pip { left: 204px; }
.home-sidebar.home-sidebar-collapsed ~ .home-main-area .sb-panel.sb-panel-in-assets .sb-pip { left: 70px; }

/* Drop target: lit the moment an asset drag starts, stronger on hover. */
body.asset-drag-active .assets-split-right { border-color: var(--sl-accent-line); }
.assets-split-right.assets-sb-drop-hover { border-color: var(--sl-accent); box-shadow: inset 0 0 0 1px var(--sl-accent-line); }

.home-asset-card.home-asset-card-dragging { opacity: 0.35; transform: scale(0.96); transition: opacity 0.1s ease, transform 0.1s ease; }

/* Card grid */
.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-tab-assets .home-asset-card { cursor: grab; }
#home-tab-assets .home-asset-card:active { cursor: grabbing; }

.home-asset-card .home-asset-thumb,
.home-asset-card .home-asset-video-thumb-wrapper {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: var(--sl-r-12);
    box-shadow: inset 0 0 0 1px var(--sl-hairline);
    background: var(--sl-card);
    display: block;
}

.home-asset-card .home-asset-video-thumb-wrapper { overflow: hidden; 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 1px var(--sl-accent-line); outline: 1px solid var(--sl-accent-line); }

.home-asset-video-play-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

/* Type tag on the thumbnail: dark .sl-tag-thumb look, never a coloured fill. */
.home-asset-type-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 22px;
    height: 20px;
    border-radius: var(--sl-r-6);
    display: flex;
    align-items: center;
    justify-content: center;
    background: oklch(0 0 0 / 0.5);
    color: oklch(0.97 0.002 250);
    z-index: 2;
}

.home-asset-fav {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 28px;
    height: 28px;
    padding: 0;
    background: oklch(0 0 0 / 0.4);
    border: none;
    border-radius: var(--sl-r-6);
    color: oklch(1 0 0 / 0.75);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.home-asset-fav.favorited { color: var(--sl-warning); }

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

.home-asset-name {
    font-family: var(--sl-font-ui);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--sl-text-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-asset-date {
    margin-top: 2px;
    font-family: var(--sl-font-mono);
    font-size: 11px;
    color: var(--sl-text-3);
}

.home-asset-empty p { margin: 0; }
.home-asset-empty p:first-of-type { font-size: 13.5px; font-weight: 600; color: var(--sl-text-1); }
.home-asset-empty-hint { font-size: 12px; color: var(--sl-text-2); }
/* ===== Projects page: workspace scope (Personal ⇄ Workspace) [SLATE-MIGRATED] ===== */
/* (The old Home Collab tab rules were dead — nothing renders .home-collab-* — and are swept.) */

/* The chip reads as a workspace rather than "Personal" once a scope is active. */
.home-ws-chip.is-workspace { border-color: var(--sl-accent-line); }
.home-ws-chip.is-workspace svg:first-child { color: var(--sl-link); }

/* Scope notice under the header: role, or offline. Quiet surface; status is a dot + text. */
.pws-banner { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 8px 8px 8px 14px; border-radius: var(--sl-r-10); background: var(--sl-card); border: 1px solid var(--sl-hairline); color: var(--sl-text-2); font-size: 12.5px; }
.pws-banner[hidden] { display: none; }
.pws-banner.is-offline { color: var(--sl-warning); }
.pws-banner.is-offline::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.pws-banner-btn { margin-left: auto; height: var(--sl-h-sm); padding: 0 10px; border-radius: var(--sl-r-8); border: 1px solid oklch(1 0 0 / 0.1); background: var(--sl-control); color: var(--sl-text-1); font-family: var(--sl-font-ui); font-size: 11.5px; font-weight: 600; cursor: pointer; }
.pws-banner-btn:hover { background: var(--sl-control-hover); }

/* 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-3); }
.pws-tag { padding: 2px 6px; border-radius: var(--sl-r-6); background: oklch(1 0 0 / 0.07); color: var(--sl-text-2); font-size: 11px; font-weight: 600; flex: none; }

/* Workspace-aware empty state (replaces the personal one in workspace scope). */
.pws-empty { padding: 44px 20px; text-align: center; }
.pws-empty-title { font-size: 13.5px; font-weight: 600; color: var(--sl-text-1); }
.pws-empty-hint { margin: 6px auto 0; font-size: 12.5px; color: var(--sl-text-2); max-width: 420px; line-height: 1.55; }

/* --- 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: var(--sl-on-accent); border: 1.5px solid var(--sl-app); margin-right: -5px; flex: none; }
.pws-dot-more { background: var(--sl-control); color: var(--sl-text-2); }

/* Comment count: unresolved reads as "needs you" (warning text), all-resolved is neutral. */
.pws-comments { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; margin-left: 8px; font-family: var(--sl-font-mono); font-size: 11px; color: var(--sl-text-3); vertical-align: middle; }
.pws-comments.has-open { color: var(--sl-warning); }

/* --- 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-top: 16px; padding: 12px 14px; border-radius: var(--sl-r-12); background: var(--sl-panel); border: 1px solid var(--sl-hairline); color: var(--sl-text-2); font-size: 12.5px; line-height: 1.55; }
.pws-nag strong { color: var(--sl-warning); font-weight: 600; }
.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-2); cursor: pointer; line-height: 1.45; }
.pws-policy-row strong { color: var(--sl-text-1); font-weight: 600; }
.pws-policy-row input { margin-top: 2px; flex: none; accent-color: var(--sl-accent); }

.pws-invites { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.pws-invite { display: flex; align-items: center; gap: 9px; padding: 4px 4px 4px 10px; border-radius: var(--sl-r-8); background: var(--sl-panel); border: 1px solid var(--sl-hairline); font-size: 12px; }
.pws-invite-code { font-family: var(--sl-font-mono); font-size: 11px; color: var(--sl-text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 210px; }
.pws-invite-meta { color: var(--sl-text-3); font-size: 11px; margin-right: auto; }

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

/* Above .home-screen (z-index 9999) — the picker is opened FROM the home screen. */
.pws-modal-overlay { position: fixed; inset: 0; z-index: 10250; background: var(--sl-scrim); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); 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-raised); border: 1px solid oklch(1 0 0 / 0.1); border-radius: var(--sl-r-14); box-shadow: var(--sl-shadow-modal); padding: 20px; }
.pws-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.pws-modal-head h2 { margin: 0; font-size: 17px; font-weight: 700; color: var(--sl-text-1); }

.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: var(--sl-r-12); }
.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-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pws-tpl-meta { padding: 0 11px 11px; font-size: 11px; color: var(--sl-text-3); 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-3); font-size: 12.5px; padding: 12px 2px; }
.pws-act-day { margin: 12px 0 4px; font-family: var(--sl-font-mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sl-text-3); }
.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; color: var(--sl-text-3); }
.pws-act-text { color: var(--sl-text-2); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pws-act-when { color: var(--sl-text-3); font-family: var(--sl-font-mono); font-size: 11px; flex: none; }
.pws-act-more { margin-top: 10px; align-self: flex-start; height: var(--sl-h-sm); padding: 0 10px; border-radius: var(--sl-r-8); border: 1px solid oklch(1 0 0 / 0.1); background: var(--sl-control); color: var(--sl-text-1); font-family: var(--sl-font-ui); font-size: 11.5px; font-weight: 600; cursor: pointer; }
.pws-act-more:hover { background: var(--sl-control-hover); }

/* ===== Workspaces Tab [SLATE-MIGRATED] =====
   Workspaces.dc.html: title + subtitle, left column of workspace cards with the
   Create / Join tiles, right card with the selected workspace. Roles are text. */

#home-tab-workspaces .home-tab-panel { max-width: none; width: 100%; padding: 0; }
.ws-page { max-width: 1560px; margin: 0 auto; width: 100%; padding: 30px 40px 48px; box-sizing: border-box; }
.ws-subtitle { color: var(--sl-text-2); font-size: 13px; line-height: 1.55; 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: 12.5px; color: var(--sl-text-2); line-height: 1.5; }
.ws-right { flex: 1; min-width: 340px; background: var(--sl-card); border: 1px solid var(--sl-hairline); border-radius: var(--sl-r-12); padding: 20px 22px; margin-bottom: 32px; box-sizing: border-box; }
.ws-right-hint { color: var(--sl-text-2); font-size: 13px; padding: 40px 10px; text-align: center; }

/* Mono section label — "MEMBERS · 4". */
.ws-kicker { font-family: var(--sl-font-mono); font-size: 9.5px; letter-spacing: 0.12em; color: var(--sl-text-3); 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-12); background: var(--sl-card); border: 1px solid var(--sl-hairline); cursor: pointer; }
.ws-wscard:hover { border-color: var(--sl-accent-line); }
.ws-wscard.is-active { background: var(--sl-selected); border-color: var(--sl-border-strong); }
.ws-wscard-tile { width: 34px; height: 34px; border-radius: var(--sl-r-8); background: var(--sl-control); color: var(--sl-text-1); font-weight: 700; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
/* Per-workspace tile shade (scannable at a glance) — neutral steps, not status colours. */
.ws-wscard-tile.hue-1 { background: oklch(0.34 0.02 230); }
.ws-wscard-tile.hue-2 { background: oklch(0.34 0.02 300); }
.ws-detail-tile { width: 38px; height: 38px; border-radius: var(--sl-r-8); 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-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-history-meta { font-family: var(--sl-font-mono); font-size: 11px; color: var(--sl-text-3); margin-top: 2px; }

/* Role: plain text, never a pill. Owner reads a step brighter. */
.ws-role-badge { flex: none; font-size: 11.5px; font-weight: 600; color: var(--sl-text-2); background: none; padding: 0; text-transform: capitalize; }
.ws-role-owner { color: var(--sl-text-1); }
.ws-role-viewer { color: var(--sl-text-3); }

/* --- 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-card); border: 1px solid var(--sl-hairline); border-radius: var(--sl-r-12); padding: 14px; box-sizing: border-box; }
/* 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; }
.ws-tile:hover,
.ws-tile.is-open { border-color: var(--sl-accent-line); }
.ws-tile:focus-visible { outline: 2px solid var(--sl-focus); outline-offset: 2px; }
.ws-tile-icon { width: 30px; height: 30px; border-radius: var(--sl-r-8); display: inline-flex; align-items: center; justify-content: center; flex: none; background: var(--sl-quiet); color: var(--sl-link); }
.ws-tile-icon-sky,
.ws-tile-icon-green { background: var(--sl-quiet); color: var(--sl-link); }
.ws-card-title { display: block; color: var(--sl-text-1); font-size: 13px; font-weight: 600; margin: 10px 0 0; }
.ws-tile-hint { display: block; color: var(--sl-text-2); font-size: 11.5px; margin: 3px 0 0; line-height: 1.4; }

/* The form the tiles reveal — kept out of the tiles so they stay compact. */
.ws-reveal { background: var(--sl-card); border: 1px solid var(--sl-border); border-radius: var(--sl-r-12); padding: 12px; 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; height: var(--sl-h); box-sizing: border-box; background: var(--sl-panel); border: 1px solid var(--sl-border); border-radius: var(--sl-r-8); padding: 0 11px; color: var(--sl-text-1); font-size: 12.5px; font-family: var(--sl-font-ui); outline: none; }
.ws-input::placeholder { color: oklch(0.5 0.005 250); }
.ws-input:focus { border-color: var(--sl-focus); }
.ws-input:disabled { opacity: 0.45; cursor: not-allowed; }
.ws-input-code { text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; font-family: var(--sl-font-mono); }

/* --- buttons: the Standard recipes (primary / secondary / ghost / outlined danger / icon) --- */
.ws-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: var(--sl-h); box-sizing: border-box; padding: 0 12px; border-radius: var(--sl-r-8); font-size: 12px; font-weight: 600; font-family: var(--sl-font-ui); cursor: pointer; border: 1px solid transparent; white-space: nowrap; }
.ws-btn:disabled { opacity: 0.45; cursor: default; }
.ws-btn-primary { background: var(--sl-accent); color: var(--sl-on-accent); font-weight: 700; padding: 0 14px; }
.ws-btn-primary:hover:not(:disabled) { filter: brightness(1.07); }
.ws-btn-secondary { background: var(--sl-control); color: var(--sl-text-1); border-color: oklch(1 0 0 / 0.1); }
.ws-btn-secondary:hover:not(:disabled) { background: var(--sl-control-hover); border-color: oklch(1 0 0 / 0.2); }
.ws-btn-ghost { background: none; color: var(--sl-link); padding: 0 6px; }
.ws-btn-ghost:hover:not(:disabled) { color: var(--sl-link-hover); }
.ws-btn-danger { background: transparent; color: var(--sl-danger-text); border-color: var(--sl-danger-line); }
.ws-btn-danger:hover:not(:disabled) { background: var(--sl-danger-wash); }
.ws-btn-sm { height: var(--sl-h-sm); padding: 0 10px; font-size: 11.5px; }
.ws-btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: none; border: none; color: var(--sl-text-3); cursor: pointer; padding: 0; border-radius: var(--sl-r-6); }
.ws-btn-icon:hover { color: var(--sl-text-1); background: var(--sl-wash); }
.ws-remove-member:hover { color: var(--sl-danger-text); background: var(--sl-danger-wash); }

/* --- 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-1); font-family: var(--sl-font-ui); font-size: 17px; font-weight: 700; margin: 0; letter-spacing: -0.01em; }
.ws-header-meta { font-size: 12px; color: var(--sl-text-2); margin-top: 2px; }
/* The invite code: a secondary button with the code in mono. */
.ws-code-chip { display: inline-flex; align-items: center; gap: 6px; flex: none; height: var(--sl-h-sm); padding: 0 10px; background: var(--sl-control); border: 1px solid oklch(1 0 0 / 0.1); color: var(--sl-text-1); border-radius: var(--sl-r-8); cursor: pointer; }
.ws-code-chip:hover { background: var(--sl-control-hover); }
.ws-code-chip svg { color: var(--sl-text-3); }
.ws-code-value { font-family: var(--sl-font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; }

/* --- detail: invite row (mail-icon field + primary Invite button) --- */
.ws-invite-bar { display: flex; align-items: center; gap: 8px; margin-top: 18px; }
.ws-field { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: var(--sl-h); box-sizing: border-box; padding: 0 11px; background: var(--sl-panel); border: 1px solid var(--sl-border); border-radius: var(--sl-r-8); }
.ws-field:focus-within { border-color: var(--sl-focus); }
.ws-field svg { flex: none; color: var(--sl-text-3); }
.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-1); }
.ws-field input::placeholder { color: oklch(0.5 0.005 250); }
.ws-field.is-disabled { opacity: 0.45; }

/* --- detail: sections (two columns when the pane is wide enough) --- */
.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-2); font-size: 12.5px; margin: 0 0 10px; line-height: 1.55; }
.ws-loading, .ws-error { color: var(--sl-text-2); font-size: 13px; padding: 40px 20px; text-align: center; }
.ws-link { background: none; border: none; color: var(--sl-link); cursor: pointer; font-size: 13px; font-weight: 600; padding: 0; }
.ws-link:hover { color: var(--sl-link-hover); }

/* --- detail: member rows --- */
.ws-member { display: flex; align-items: center; gap: 11px; padding: 10px 4px; border-bottom: 1px solid var(--sl-hairline); }
.ws-member:last-child { border-bottom: none; }
.ws-avatar { width: 28px; height: 28px; 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-1); background: var(--sl-control); }
.ws-member-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.ws-member-name { font-size: 13px; font-weight: 600; color: var(--sl-text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-member-sub { font-size: 11.5px; color: var(--sl-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-member-role { flex: none; font-size: 12px; font-weight: 600; color: var(--sl-text-2); text-transform: capitalize; }
.ws-member-role.is-owner { color: var(--sl-text-1); }
.ws-member-actions { display: flex; align-items: center; gap: 2px; flex: none; }
.ws-anon-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--sl-text-3); margin-right: 5px; vertical-align: middle; }

/* --- detail: danger zone --- */
.ws-danger { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--sl-hairline); display: flex; align-items: center; gap: 10px; }
.ws-danger-text { flex: 1; font-size: 12px; color: var(--sl-text-2); line-height: 1.45; }
/* ===== 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: var(--sl-font-mono);
    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: var(--sl-font-mono);
    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: the lesson step card and the Tutorial page live in css/tutorial.css. */

/* ============================================
   Update Log [SLATE-MIGRATED] — Settings → Changelog
   ============================================ */

.update-log-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.update-log-entry {
    background: var(--sl-card);
    border: 1px solid var(--sl-hairline);
    border-radius: var(--sl-r-12);
    padding: 14px;
}

.update-log-entry-latest { border-color: var(--sl-border-strong); }

.update-log-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.update-log-version-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.update-log-version {
    font-family: var(--sl-font-mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--sl-text-1);
}

.update-log-installed { font-size: 11.5px; }

.update-log-date {
    font-family: var(--sl-font-mono);
    font-size: 11px;
    color: var(--sl-text-3);
}

.update-log-title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--sl-text-1);
    margin: 0 0 8px;
}

.update-log-highlights {
    margin: 0;
    padding: 0 0 0 16px;
    list-style: none;
}

.update-log-highlights li {
    position: relative;
    font-size: 12.5px;
    color: var(--sl-text-2);
    line-height: 1.55;
    padding-left: 2px;
}

.update-log-highlights li::before {
    content: '';
    position: absolute;
    left: -12px;
    top: 8px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--sl-text-3);
}

/* ============================================
   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: var(--sl-font-ui);
}

/* Error */
.video-player-error {
    padding: 60px 40px;
    font-size: 0.9rem;
    color: #ef4444;
    text-align: center;
    font-family: var(--sl-font-ui);
}

/* 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: var(--sl-font-ui);
    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 */

/* ============================================
   Video editor — kept at its pre-redesign styling (the Claude Design
   VideoEditor mockup was stale; the OpenChatCut-era editor stays).
   ============================================ */
.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 {
    /* The one --ved-* colour mapping: every editor token points at the
       PatchWork Standard (css/slate.css §1). The timeline <canvas> reads the
       same --sl-* tokens once (VideoEditor._tlPalette). */
    --ved-surface-0: var(--sl-app);
    --ved-surface-1: var(--sl-panel);
    --ved-surface-2: var(--sl-raised);
    --ved-surface-3: var(--sl-control);
    --ved-border-soft: var(--sl-border);
    --ved-border-strong: var(--sl-border-strong);
    --ved-accent: var(--sl-accent);
    --ved-accent-soft: var(--sl-accent-tint);
    --ved-accent-strong: var(--sl-accent);
    --ved-danger-soft: var(--sl-danger-wash);
    --ved-danger-strong: var(--sl-danger-line);
    /* clip/asset kinds stay distinguishable at low chroma */
    --ved-kind-video: oklch(0.72 0.06 290);
    --ved-pane-radius: 8px;
    --ved-pane-shadow: none;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 0px);
    background: var(--ved-surface-0);
    color: var(--sl-text-1);
    font-family: var(--sl-font-ui);
    letter-spacing: -0.01em;
    position: relative;
}
.veditor-top {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    padding: 6px 6px 0;
    gap: 2px;
}
.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(--sl-text-1);
    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(--sl-text-3);
    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: var(--sl-link);
    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);
}
.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 oklch(0.72 0.06 290 / 0.35);
    box-shadow: 0 2px 8px oklch(0.72 0.06 290 / 0.15);
}
.veditor-asset-play-icon {
    position: absolute;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    color: var(--sl-text-1);
    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, oklch(0.72 0.13 230 / 0.2), oklch(0.72 0.06 290 / 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(--sl-text-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.veditor-asset-type {
    font-size: 0.65rem;
    font-weight: 500;
    color: var(--sl-text-3);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.veditor-assets-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 48px 24px;
    text-align: center;
    color: var(--sl-text-3);
    font-size: 0.85rem;
    font-weight: 500;
}
.veditor-assets-hint {
    font-size: 0.72rem;
    color: var(--sl-text-3);
    max-width: 200px;
    line-height: 1.5;
    font-weight: 400;
}
.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: var(--sl-app);
    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;
}
.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 var(--sl-accent);
    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 var(--sl-accent);
    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; }
.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: var(--sl-accent);
    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: var(--sl-accent);
    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: var(--sl-app);
    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(--sl-text-3);
    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(--sl-text-1);
}
.veditor-ctrl-play {
    background: var(--ved-accent-soft);
    border-color: var(--ved-accent-strong);
    color: var(--sl-link);
    min-width: 40px;
}
.veditor-ctrl-stop {
    min-width: 34px;
    color: var(--sl-text-2);
    background: transparent;
    border-color: transparent;
}
.veditor-ctrl-stop:hover {
    color: var(--sl-text-1);
    background: rgba(255, 255, 255, 0.09);
}
.veditor-ctrl-play:hover {
    background: oklch(0.72 0.13 230 / 0.2);
    border-color: oklch(0.72 0.13 230 / 0.36);
    color: var(--sl-accent-text);
    box-shadow: none;
}
.veditor-ctrl-export {
    background: oklch(0.72 0.13 230 / 0.12);
    border-color: oklch(0.72 0.13 230 / 0.25);
    color: var(--sl-accent-text);
    padding-left: 14px;
    padding-right: 14px;
}
.veditor-ctrl-export:hover {
    background: oklch(0.72 0.13 230 / 0.22);
    border-color: oklch(0.72 0.13 230 / 0.4);
    color: var(--sl-accent-text);
    box-shadow: 0 4px 12px oklch(0.72 0.13 230 / 0.2);
}
.veditor-time-display {
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--sl-text-1);
    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: oklch(0.165 0.004 250 / 0.6);
    font-family: var(--sl-font-mono);
}
.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(--sl-text-3);
    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(--sl-text-1);
    border-color: var(--ved-border-soft);
}
.veditor-tool-btn.veditor-tool-active {
    background: var(--ved-accent-soft);
    border-color: var(--ved-accent-strong);
    color: var(--sl-link);
    box-shadow: none;
}
.veditor-tool-btn.veditor-tool-danger:hover {
    background: var(--ved-danger-soft);
    border-color: var(--ved-danger-strong);
    color: var(--sl-danger-text);
}
.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(--sl-text-3);
    min-width: 0;
    flex: 1;
    text-align: center;
    font-family: var(--sl-font-mono);
}
.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;
}
.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: oklch(0.165 0.004 250 / 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: var(--sl-link);
    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(--sl-text-3);
    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(--sl-text-1);
}
.veditor-selbar-btn.veditor-selbar-danger:hover {
    background: var(--ved-danger-soft);
    border-color: var(--ved-danger-strong);
    color: var(--sl-danger-text);
}
.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 var(--sl-hairline);
    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 var(--sl-border-strong);
    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;
}
.veditor-loading-overlay {
    position: absolute;
    inset: 0;
    background: oklch(0.165 0.004 250 / 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 var(--sl-border);
    border-top-color: oklch(0.72 0.13 230 / 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: var(--sl-text-2);
    letter-spacing: 0.02em;
}
.veditor-loading-detail {
    font-size: 0.72rem;
    color: var(--sl-text-3);
    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: oklch(0.72 0.13 230 / 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%); }
}
.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 var(--sl-hairline);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4);
}
.veditor-export-text {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--sl-text-1);
}
.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, var(--sl-accent), var(--sl-link));
    border-radius: 3px;
    width: 0%;
    transition: width 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 12px oklch(0.72 0.13 230 / 0.4);
}
.veditor-export-percent {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--sl-text-3);
    font-variant-numeric: tabular-nums;
    font-family: var(--sl-font-mono);
}
.veditor-export-cancel {
    margin-top: 8px;
    background: oklch(0.65 0.19 25 / 0.15) !important;
    border: 1px solid oklch(0.65 0.19 25 / 0.4) !important;
    color: var(--sl-danger-text) !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: oklch(0.65 0.19 25 / 0.3) !important;
    border-color: oklch(0.65 0.19 25 / 0.6) !important;
    color: var(--sl-danger-text) !important;
}
.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;
}
.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(--sl-text-3);
    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(--sl-text-1);
}
.veditor-tl-tab.active {
    background: rgba(255, 255, 255, 0.06);
    color: var(--sl-text-1);
    border-bottom-color: var(--sl-accent);
}
.veditor-tl-tab-name {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
}
.veditor-tl-tab-input {
    background: var(--sl-app);
    border: 1px solid var(--sl-accent);
    color: var(--sl-text-1);
    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(--sl-text-3);
    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(--sl-danger-wash);
    color: var(--sl-danger-text);
}
.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(--sl-text-3);
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.15s;
}
.veditor-timeline-tab-add:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--sl-text-1);
    border-color: var(--ved-border-soft);
}
.veditor-project-name-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--sl-text-3);
}
.veditor-project-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--sl-text-1);
    cursor: default;
    user-select: none;
}
.veditor-project-name-input {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--sl-text-1);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid oklch(0.72 0.13 230 / 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(--sl-text-3);
    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(--sl-text-1);
    border-color: var(--ved-border-strong);
}
.veditor-project-btn-close:hover {
    background: oklch(0.65 0.19 25 / 0.15);
    color: var(--sl-error);
    border-color: oklch(0.65 0.19 25 / 0.3);
}
.veditor-project-picker {
    position: absolute;
    z-index: 100;
    width: 320px;
    max-height: 360px;
    background: oklch(0.165 0.004 250 / 0.98);
    border: 1px solid var(--sl-border);
    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: var(--sl-text-3);
    border-bottom: 1px solid var(--sl-hairline);
}
.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: oklch(0.72 0.13 230 / 0.12);
    border-left: 2px solid oklch(0.72 0.13 230 / 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(--sl-text-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.veditor-picker-item-meta {
    font-size: 0.7rem;
    color: var(--sl-text-3);
}
.veditor-picker-item-delete {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    background: none;
    color: var(--sl-text-3);
    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: oklch(0.65 0.19 25 / 0.15);
    color: var(--sl-error);
}
.veditor-picker-empty {
    padding: 24px 14px;
    text-align: center;
    color: var(--sl-text-3);
    font-size: 0.82rem;
}
.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(--sl-text-3);
    cursor: pointer;
    transition: all 0.15s ease;
}
.veditor-view-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--sl-text-1);
}
.veditor-view-btn.veditor-view-active {
    background: oklch(0.72 0.13 230 / 0.15);
    color: var(--sl-accent);
}
.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 var(--sl-hairline);
    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 var(--sl-hairline);
    position: sticky;
    top: 0;
    z-index: 1;
}
.veditor-asset-row-header span {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--sl-text-3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.veditor-asset-col-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sl-accent);
    opacity: 0.7;
}
.veditor-asset-col-icon-video {
    color: oklch(0.72 0.06 290);
}
.veditor-asset-col-name {
    font-size: 0.72rem;
    color: var(--sl-text-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 6px;
}
.veditor-asset-col-date {
    font-size: 0.65rem;
    color: var(--sl-text-3);
    text-align: right;
    white-space: nowrap;
}
.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 var(--sl-hairline);
    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: var(--sl-border);
    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 oklch(0.72 0.06 290 / 0.35);
}
.veditor-asset-grid-name {
    font-size: 0.72rem;
    color: var(--sl-text-3);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.veditor-folder-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-bottom: 1px solid var(--sl-border);
    min-height: 26px;
    background: rgba(255, 255, 255, 0.015);
}
.veditor-breadcrumbs {
    flex: 1;
    font-size: 0.72rem;
    color: var(--sl-text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.veditor-breadcrumb {
    color: var(--sl-text-3);
}
.veditor-breadcrumb-link {
    color: oklch(0.72 0.13 230 / 0.8);
    cursor: pointer;
}
.veditor-breadcrumb-link:hover {
    color: var(--sl-accent);
    text-decoration: underline;
}
.veditor-breadcrumb-sep {
    color: var(--sl-text-3);
    margin: 0 1px;
}
.veditor-new-folder-btn {
    background: none;
    border: 1px solid var(--sl-border);
    border-radius: 4px;
    color: var(--sl-text-2);
    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: oklch(0.72 0.13 230 / 0.9);
    border-color: oklch(0.72 0.13 230 / 0.3);
}
.veditor-folder-card {
    cursor: pointer !important;
}
.veditor-folder-card:hover {
    background: oklch(0.72 0.13 230 / 0.08) !important;
}
.veditor-folder-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    background: oklch(0.72 0.13 230 / 0.05) !important;
    border: 1px dashed oklch(0.72 0.13 230 / 0.2) !important;
}
.veditor-folder-name {
    color: oklch(0.72 0.13 230 / 0.85) !important;
}
.veditor-folder-icon svg {
    fill: oklch(0.72 0.13 230 / 0.4);
    stroke: oklch(0.72 0.13 230 / 0.8);
}
.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 oklch(0.72 0.13 230 / 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: oklch(0.72 0.13 230 / 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(--sl-text-3);
    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(--sl-text-1);
    background: transparent;
}
.veditor-tab-btn.veditor-tab-active {
    color: var(--sl-text-1);
    background: transparent;
    border-color: var(--sl-accent);
    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(--sl-text-3);
    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(--sl-text-1);
    background: transparent;
}
.veditor-props-subtab.veditor-props-subtab-active {
    color: var(--sl-text-1);
    background: transparent;
    border-color: var(--sl-accent);
}
.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: var(--sl-text-2);
    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: var(--sl-text-2);
    cursor: pointer;
}
.veditor-scope-label input[type="radio"] {
    accent-color: var(--sl-accent);
}
.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(--sl-text-3);
}
.veditor-prop-row input[type="range"] {
    flex: 1;
    height: 6px;
    accent-color: var(--sl-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(--sl-accent);
    cursor: pointer;
}
.veditor-prop-value {
    flex-shrink: 0;
    width: 36px;
    text-align: right;
    font-size: 0.72rem;
    color: var(--sl-text-3);
}
.veditor-prop-number,
.veditor-prop-input {
    flex: 1;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 2px;
    color: var(--sl-accent);
    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(--sl-text-1);
}
.veditor-prop-number:focus,
.veditor-prop-input:focus {
    background: rgba(0, 0, 0, 0.2);
    border-color: var(--sl-accent);
    color: var(--sl-text-1);
    box-shadow: none;
}
.veditor-prop-unit {
    flex-shrink: 0;
    font-size: 0.72rem;
    color: var(--sl-text-3);
}
.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 var(--sl-border);
    border-radius: 5px;
    color: var(--sl-text-1);
    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(--sl-accent);
}
.veditor-prop-cancel-btn {
    background: oklch(0.65 0.19 25 / 0.12);
    border-color: oklch(0.65 0.19 25 / 0.4);
    color: var(--sl-danger-text);
}
.veditor-prop-cancel-btn:hover {
    background: oklch(0.65 0.19 25 / 0.25);
    border-color: oklch(0.65 0.19 25 / 0.6);
}
.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: oklch(0.72 0.13 230 / 0.1);
}
.veditor-prop-scrub-value {
    font-size: 0.78rem;
    color: var(--sl-accent);
    min-width: 24px;
}
.veditor-prop-scrub .veditor-prop-unit {
    font-size: 0.68rem;
    color: var(--sl-text-3);
    margin-left: 2px;
}
.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: oklch(0.72 0.13 230 / 0.1);
}
.veditor-silence-val {
    font-size: 12px;
    color: var(--sl-link);
    font-weight: 500;
    min-width: 20px;
}
.veditor-silence-unit {
    font-size: 10px;
    color: var(--sl-text-3);
    margin-left: 1px;
}
/* Silence tab: result box (idle / found chips + Cut all N / cut summary) */
.veditor-silence-box {
    min-height: 74px;
    background: var(--ved-surface-0);
    border: 1px solid var(--sl-border);
    border-radius: var(--sl-r-8, 8px);
    padding: 9px 10px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.veditor-silence-status {
    font-size: 11px;
    color: var(--sl-text-3);
}
.veditor-silence-status[data-kind="found"] {
    font-weight: 600;
    color: var(--sl-green-text, var(--sl-success));
}
.veditor-silence-status[data-kind="done"]:empty { display: none; }
.veditor-silence-found[hidden],
.veditor-silence-result[hidden] { display: none; }
.veditor-silence-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    max-height: 132px;
    overflow-y: auto;
}
.veditor-silence-chip {
    display: inline-flex;
    align-items: center;
    background: var(--sl-bg-chip, rgba(255, 255, 255, 0.06));
    border: 1px solid transparent;
    border-radius: var(--sl-r-6, 6px);
    font-family: var(--sl-font-mono, 'JetBrains Mono', monospace);
    font-size: 9.5px;
    color: var(--sl-text-2);
}
.veditor-silence-chip:hover { border-color: var(--sl-amber-40); }
.veditor-silence-chip-gap { border-style: dashed; border-color: var(--sl-border-strong); }
.veditor-silence-chip-seek,
.veditor-silence-chip-x {
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    padding: 3px 2px 3px 6px;
}
.veditor-silence-chip-x {
    padding: 3px 5px 3px 1px;
    color: var(--sl-text-3);
    font-size: 11px;
    line-height: 1;
}
.veditor-silence-chip-x:hover { color: var(--sl-danger-text); }
.veditor-silence-chip-seek:hover { color: var(--sl-text-1); }
.veditor-silence-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}
.veditor-silence-cut {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--sl-amber);
    background: var(--sl-amber-14);
    border: 1px solid var(--sl-amber-40);
    padding: 4px 11px;
    border-radius: var(--sl-r-6, 6px);
    cursor: pointer;
}
.veditor-silence-cut:hover:not(:disabled) { filter: brightness(1.15); }
.veditor-silence-cut:disabled { opacity: 0.45; cursor: default; }
.veditor-silence-link {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-size: 11px;
    color: var(--sl-link);
    cursor: pointer;
}
.veditor-silence-link:hover { color: var(--sl-link-hover, var(--sl-text-1)); text-decoration: underline; }
.veditor-silence-link[hidden] { display: none; }
.veditor-silence-result-main {
    font-size: 11px;
    font-weight: 600;
    color: var(--sl-green-text, var(--sl-success));
}
.veditor-silence-result-main::before { content: "\2713\00a0"; }
.veditor-silence-result-sub {
    font-size: 11px;
    color: var(--sl-text-3);
    margin-top: 4px;
}
.veditor-silence-key {
    font-family: var(--sl-font-mono, 'JetBrains Mono', monospace);
    font-size: 10px;
    color: var(--sl-text-3);
}
.veditor-silence-check {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--sl-text-2);
    cursor: pointer;
}
.veditor-silence-check input { accent-color: var(--sl-accent); margin: 0; }
.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 var(--sl-border);
    border-radius: 4px;
    color: var(--sl-text-2);
    cursor: pointer;
    font-size: 13px;
    font-family: var(--sl-font-ui);
    transition: all 0.15s ease;
}
.veditor-text-style-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--sl-text-1);
}
.veditor-text-style-btn.veditor-text-style-active {
    background: oklch(0.72 0.13 230 / 0.25);
    border-color: oklch(0.72 0.13 230 / 0.5);
    color: var(--sl-accent-text);
}
.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: var(--sl-text-1);
    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 var(--sl-border-strong);
    border-top-color: var(--sl-border-strong);
    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: oklch(0.72 0.13 230 / 0.9);
    border-radius: 2px;
    transition: width 0.15s ease-out;
}
@keyframes veditor-spin {
    to { transform: rotate(360deg); }
}
.veditor-audio-section {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--sl-hairline);
    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: var(--sl-text-1);
    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: var(--sl-text-2);
    border: 1px solid var(--sl-border);
    border-radius: 4px;
    padding: 2px 6px;
    cursor: pointer;
    outline: none;
    transition: border-color 0.15s, color 0.15s;
}
.veditor-audio-select:hover {
    border-color: var(--sl-border-strong);
    color: var(--sl-text-2);
}
.veditor-audio-select:focus {
    border-color: oklch(0.72 0.13 230 / 0.4);
}
.veditor-audio-select option {
    background: var(--sl-control);
    color: var(--sl-text-1);
}
.veditor-audio-desc {
    font-size: 0.62rem;
    color: var(--sl-text-3);
    line-height: 1.3;
}
.veditor-audio-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.veditor-audio-label {
    font-size: 0.68rem;
    color: var(--sl-text-3);
    white-space: nowrap;
}
.veditor-audio-cost {
    font-size: 0.65rem;
    color: var(--sl-text-3);
    font-variant-numeric: tabular-nums;
}
.veditor-audio-status {
    font-size: 0.65rem;
    color: var(--sl-text-2);
    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 var(--sl-hairline);
}
.veditor-audio-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--sl-accent), var(--sl-accent));
    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: var(--sl-border);
    color: var(--sl-text-2);
}
.veditor-audio-btn-primary:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--sl-border-strong);
    color: var(--sl-text-1);
}
.veditor-audio-btn-secondary {
    background: none;
    border-color: var(--sl-hairline);
    color: var(--sl-text-3);
    font-size: 0.65rem;
}
.veditor-audio-btn-secondary:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.04);
    color: var(--sl-text-2);
}
.veditor-audio-voice-list {
    max-height: 110px;
    overflow-y: auto;
    border: 1px solid var(--sl-hairline);
    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; }
.veditor-audio-pill-group {
    display: flex;
    gap: 0;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 5px;
    border: 1px solid var(--sl-hairline);
    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: var(--sl-text-3);
    transition: all 0.15s;
    border-right: 1px solid var(--sl-hairline);
}
.veditor-audio-pill:last-child span {
    border-right: none;
}
.veditor-audio-pill input:checked + span {
    background: oklch(0.72 0.13 230 / 0.18);
    color: var(--sl-accent-text);
    font-weight: 500;
}
.veditor-audio-pill:hover span {
    color: var(--sl-text-2);
}
.veditor-audio-collapse-toggle {
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}
.veditor-audio-chevron {
    margin-left: auto;
    color: var(--sl-text-3);
    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 var(--sl-hairline);
}
.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(--sl-accent);
    cursor: pointer;
}
.veditor-audio-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--sl-accent);
    border: none;
    cursor: pointer;
}
.veditor-audio-slider-val {
    font-size: 0.6rem;
    color: var(--sl-text-2);
    min-width: 30px;
    text-align: right;
}
.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, oklch(0.72 0.13 230 / 0.16), oklch(0.72 0.13 230 / 0.08));
}
.veditor-project-btn-export:hover {
    background: linear-gradient(180deg, oklch(0.72 0.13 230 / 0.25), oklch(0.72 0.13 230 / 0.12)) !important;
    border-color: oklch(0.72 0.13 230 / 0.55) !important;
    color: var(--sl-accent-text) !important;
}
.veditor-project-btn-export-all {
    color: var(--ved-accent) !important;
    border-color: var(--ved-accent-strong);
    background: linear-gradient(180deg, oklch(0.72 0.13 230 / 0.16), oklch(0.72 0.13 230 / 0.08));
}
.veditor-project-btn-export-all:hover {
    background: linear-gradient(180deg, oklch(0.72 0.13 230 / 0.25), oklch(0.72 0.13 230 / 0.12)) !important;
    border-color: oklch(0.72 0.13 230 / 0.55) !important;
    color: var(--sl-accent-text) !important;
}
.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: oklch(0.72 0.13 230 / 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: oklch(0.72 0.13 230 / 0.3);
}
.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 var(--sl-border);
    border-radius: 5px;
    color: var(--sl-text-1);
    cursor: pointer;
    transition: all 0.15s ease;
}
.veditor-ctrl-aspect:hover {
    background: oklch(0.72 0.13 230 / 0.15);
    border-color: oklch(0.72 0.13 230 / 0.3);
}
.veditor-snap-btn.veditor-tool-active {
    background: oklch(0.72 0.13 230 / 0.15);
    color: var(--sl-accent);
}
.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: var(--sl-text-1);
    margin-bottom: 2px;
}
.veditor-empty-hint span {
    display: block;
    font-size: 0.72rem;
    line-height: 1.35;
    color: var(--sl-text-2);
}
.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 oklch(0.72 0.13 230 / 0.22);
    background: oklch(0.165 0.004 250 / 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 oklch(0.72 0.13 230 / 0.3);
    background: oklch(0.165 0.004 250 / 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);
}
.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(--sl-app);
    z-index: 100;
}
.veditor-autoedit-overlay {
    backdrop-filter: blur(8px);
    background: rgba(0, 0, 0, 0.4);
}
.veditor-autoedit-tab {
    background: none;
    border: none;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--sl-text-3);
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.15s ease;
}
.veditor-autoedit-tab:hover {
    color: var(--sl-text-1);
    background: rgba(255, 255, 255, 0.04);
}
.veditor-autoedit-tab.is-active {
    color: var(--sl-text-1);
    background: rgba(255, 255, 255, 0.08);
    font-weight: 600;
}
.veditor-edl-dropzone {
    border: 2px dashed var(--sl-border-strong);
    border-radius: 10px;
    padding: 36px 20px;
    text-align: center;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.02);
    transition: all 0.2s ease;
}
.veditor-edl-dropzone:hover,
.veditor-edl-dropzone.dragover {
    border-color: var(--sl-accent);
    background: oklch(0.72 0.13 230 / 0.08);
}
.veditor-projects-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
    border-bottom: 1px solid var(--sl-hairline);
}
.veditor-projects-title {
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--sl-text-1);
    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 var(--sl-hairline);
}
.veditor-projects-sort-bar span {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--sl-text-3);
    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 var(--sl-hairline);
    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: oklch(0.72 0.13 230 / 0.06);
}
.veditor-projects-col-name {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--sl-text-1);
    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(--sl-text-3);
}
.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(--sl-text-3);
    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: oklch(0.65 0.19 25 / 0.15);
    color: var(--sl-error);
}
.veditor-projects-row-active-badge {
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--sl-accent);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.veditor-projects-empty {
    padding: 40px;
    text-align: center;
    color: var(--sl-text-3);
    font-size: 0.85rem;
}
.veditor-root {
    /* colour tokens: see the one --ved-* mapping at the top of this section */
    --ved-pane-radius: 0px;
    --ved-pane-shadow: none;
    background: var(--sl-app) !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: 42px !important;
    padding: 4px 8px 4px 14px !important;   /* the rail sits left of the editor now; no floating mark to clear */
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    box-sizing: border-box !important;
}
.veditor-project-name {
    font-size: 0.79rem !important;
    color: var(--sl-text-1) !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: var(--sl-text-2) !important;
    font-size: 0.74rem !important;
    font-weight: 500 !important;
}
.veditor-project-btn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: var(--sl-border-strong) !important;
    color: var(--sl-text-1) !important;
}
.veditor-project-btn-export {
    background: oklch(0.72 0.13 230 / 0.2) !important;
    border-color: oklch(0.72 0.13 230 / 0.65) !important;
    color: var(--sl-accent-text) !important;
}
.veditor-project-btn-export:hover {
    background: oklch(0.72 0.13 230 / 0.28) !important;
    border-color: oklch(0.72 0.13 230 / 0.8) !important;
}
.veditor-preview-viewport,
.veditor-timeline-canvas-host {
    background: var(--sl-raised) !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: var(--sl-text-2) !important;
}
.veditor-ctrl-btn:hover {
    background: rgba(255, 255, 255, 0.11) !important;
    border-color: var(--sl-border-strong) !important;
}
.veditor-ctrl-play {
    background: oklch(0.72 0.13 230 / 0.22) !important;
    border-color: oklch(0.72 0.13 230 / 0.7) !important;
    color: var(--sl-accent-text) !important;
}
.veditor-time-display,
.veditor-ctrl-aspect {
    background: transparent !important;
    border: none !important;
    color: var(--sl-accent) !important;
}
.veditor-time-display {
    min-width: 150px !important;
    font-size: 0.85rem !important;
    font-family: var(--sl-font-mono) !important;
}
.veditor-toolbar {
    width: 84px !important;
    min-width: 84px !important;
    padding: 4px !important;
    gap: 4px !important;
    border-left: none !important;
    border-bottom: none !important;
}
.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: var(--sl-text-2) !important;
}
.veditor-tool-btn:hover {
    background: rgba(255, 255, 255, 0.11) !important;
    border-color: var(--sl-border-strong) !important;
    color: var(--sl-text-1) !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: var(--sl-accent-text) !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: var(--sl-panel);
    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: var(--sl-control);
    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: var(--sl-text-2);
    cursor: pointer;
    transition: all 0.15s;
}
.veditor-header-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--sl-text-1);
}
.veditor-header-btn.veditor-header-active {
    background: var(--ved-accent-soft);
    color: var(--ved-accent);
}
.veditor-header-btn.veditor-tool-danger:hover {
    color: var(--sl-error);
    background: oklch(0.65 0.19 25 / 0.1);
}
.veditor-zoom-label {
    font-size: 0.72rem;
    color: var(--sl-text-2);
    min-width: 50px;
    text-align: center;
}
.veditor-zoom-label {
    font-size: 0.62rem !important;
    color: var(--sl-text-2) !important;
}
.veditor-assets-title,
.veditor-prop-row label,
.veditor-props-clip-name {
    color: var(--sl-text-2) !important;
}
.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: var(--sl-border-strong) !important;
    color: var(--sl-text-2) !important;
}
.veditor-filter-btn:hover,
.veditor-view-btn:hover,
.veditor-new-folder-btn:hover {
    background: rgba(255, 255, 255, 0.11) !important;
    border-color: var(--sl-border-strong) !important;
}
.veditor-assets-list,
.veditor-tab-content {
    background: transparent !important;
}
.veditor-asset-card,
.veditor-asset-grid-card,
.veditor-asset-row {
    background: var(--sl-raised) !important;
    border-color: transparent !important;
}
.veditor-asset-card:hover,
.veditor-asset-grid-card:hover,
.veditor-asset-row:hover {
    background: var(--sl-control) !important;
    border-color: var(--sl-border-strong) !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: var(--sl-app) !important;
}
.veditor-timeline-scrollbar-track {
    border-radius: 4px !important;
    background: var(--sl-raised) !important;
}
.veditor-timeline-scrollbar-thumb {
    border-radius: 4px !important;
    border-color: var(--sl-border-strong) !important;
    background: var(--sl-accent) !important;
}
.veditor-timeline-scrollbar-thumb.veditor-scrollbar-thumb-fit {
    background: var(--sl-control-hover) !important;
    border-color: var(--sl-border-strong) !important;
}
.veditor-resize-h,
.veditor-resize-v {
    border-color: var(--sl-border) !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: var(--sl-accent) !important;
}
.veditor-empty-hint {
    display: none !important;
}
.veditor-props-empty-note {
    font-size: 0.69rem;
    color: var(--sl-text-2);
    line-height: 1.35;
}
.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); }
.veditor-project-btn.veditor-btn-auto-edit {
    background: oklch(0.72 0.13 230 / 0.15);
    border: 1px solid oklch(0.72 0.13 230 / 0.45);
    color: var(--sl-accent-text);
    font-weight: 600;
}
.veditor-project-btn.veditor-btn-auto-edit:hover {
    background: oklch(0.72 0.13 230 / 0.28);
    border-color: oklch(0.72 0.13 230 / 0.6);
    color: var(--sl-text-1);
}
.veditor-take-btn {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--sl-border);
    border-radius: 6px;
    color: var(--sl-text-2);
    font-size: 10.5px;
    font-family: var(--sl-font-mono);
    padding: 4px 8px;
    cursor: pointer;
}
.veditor-take-btn:hover { border-color: oklch(0.72 0.13 230 / 0.5); }
.veditor-take-btn.veditor-take-active {
    border-color: var(--sl-sky);
    color: var(--sl-sky-text);
    background: var(--sl-sky-12);
}
.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; }
.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; }


/* The ONE --ved-* token block: every editor surface points at the PatchWork
   Standard (--sl-*, css/slate.css). --ved-tl-* feed the timeline <canvas>
   (read once by VideoEditor._tlPalette; keep them plain colours). */


/* --- Top Row: Assets + Preview --- */


/* --- Asset Panel (left) --- */


/* Asset card */


/* Empty state */


/* --- Preview Panel (center/right) --- */


/* --- Direct-manipulation transform overlay (drag clip to move, corners to scale) --- */


/* --- Transform sliders (Scale / Opacity) — friendlier than drag-numbers --- */


/* --- Toolbar --- */
/* --- Timeline section: left toolbar dock + timeline canvas --- */


/* --- Timeline --- */


/* --- Floating multi-select actions bar --- */


/* --- Loading Overlay --- */


/* --- Export Overlay --- */


/* Cancel export — outlined destructive (Standard); beats the .veditor-tool-btn base */


/* --- Project Bar --- */


/* --- Timeline Composition Tabs --- */


/* --- Project Picker Dropdown --- */


/* --- Asset panel view modes --- */


/* Compact details (excel-like) view */


/* Thumbnails grid view */


/* --- Folder bar & breadcrumbs --- */


/* Folder cards */


/* --- Properties panel --- */


/* Draggable scrub input for transform properties — minimal, no box */


/* Silence standalone scrub inputs — minimal, no box */


/* Text clip style buttons */


/* Buffer indicator */


/* Audio tab — Enhancement & Voice Changer */


/* Pill toggle group for model selection */


/* Collapsible section */


/* 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 */


/* --- Resize handles --- */


/* --- Aspect ratio toggle --- */


/* --- Snap button active state --- */


/* --- Empty state hints for timeline + preview --- */


/* --- Projects overlay --- */


/* --- Auto-Edit Modal Specifics --- */


/* =========================================================================
   [SLATE-MIGRATED] Video editor — PatchWork Standard (VideoEditor.dc.html)
   Replaces the old "Frosted Minimal" override block. Last-wins layer for
   the editor: every colour is a --sl-* / --ved-* token, radii 6/8/10/12/14,
   heights 28/32, Onest UI + JetBrains Mono for times, codes and counts.
   ========================================================================= */


/* ---- layout: flat panes separated by hairlines ---- */


/* ---- the one 46px bar: breadcrumb · timeline tabs · actions ---- */


/* AI / Manual mode switch (js/ai-mode.js) — a Standard segmented control */


/* ---- assets (left) ---- */


/* emoji picker (docked in the assets pane for text clips) */
.emoji-picker { background: var(--sl-app); }
.emoji-picker-header,
.emoji-picker-categories { border-bottom: 1px solid var(--sl-hairline); }
.emoji-picker-title { color: var(--sl-text-2); font-weight: 600; }
.emoji-picker-search {
    height: 28px; box-sizing: border-box; background: var(--sl-panel);
    border: 1px solid var(--sl-border); border-radius: var(--sl-r-8); color: var(--sl-text-1);
}
.emoji-picker-search:focus { border-color: var(--sl-focus); }
.emoji-cat-btn { border-radius: var(--sl-r-6); }
.emoji-cat-btn:hover,
.emoji-btn:hover { background: var(--sl-wash); }
.emoji-cat-btn.emoji-cat-active { background: var(--sl-selected); }
.emoji-btn { border-radius: var(--sl-r-6); }
.emoji-empty { color: var(--sl-text-3); }

/* ---- preview + transport ---- */


/* ---- inspector (right, 302px) ---- */


/* takes (clip → generation node) */


/* action buttons (Analyze / Remove silences) */


/* Analyze is the tab's primary until results exist; then Remove silences is. */


/* Silences: results well + range chips + value boxes */


/* Audio tab: each tool is a recessed card */


/* Captions tab */


/* ---- timeline: tool rail, header, canvas, navigator ---- */

/* Nine Premiere tools (V A B C N Y U H T) in two columns, so the rail fits the shortest timeline pane. */


/* Phones: the Standard's 28px icon buttons grow to a 36px thumb target */


/* multi-select bar (lives in the timeline header) */


/* ---- overlays, menus, dialogs ---- */


/* ═══════════════════════════════════════════════════════════════════
   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 dock capsule slides below the viewport edge */
#control-buttons.controls-hidden {
    transform: translateX(-50%) translateY(calc(100% + 24px));
    opacity: 0;
    pointer-events: none;
}

.control-hide-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--sl-text-dim, oklch(0.62 0.005 250));
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0;
}

.control-hide-btn:hover {
    color: var(--sl-text-hi, oklch(0.97 0.002 250));
    background: var(--sl-bg-hover, oklch(0.26 0.008 250));
}

/* 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: var(--sl-bg-shelf, oklch(0.185 0.005 250));
    border: 1px solid var(--sl-line-2, oklch(1 0 0 / 0.07));
    color: var(--sl-text-dim, oklch(0.62 0.005 250));
    cursor: pointer;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: var(--sl-shadow-card, 0 8px 20px -8px oklch(0 0 0 / 0.6));
    transition: all 0.15s ease;
    padding: 0;
}

.edge-show-tab:hover {
    color: var(--sl-text-hi, oklch(0.97 0.002 250));
    background: var(--sl-bg-hover, oklch(0.26 0.008 250));
}

.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: 18px;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
}

.edge-show-tab-bottom:hover {
    height: 22px;
}


@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: var(--sl-r-8); color: var(--sl-text-2); 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-accent-tint); color: var(--sl-accent-text); cursor: pointer; }
.palette-item.palette-select:hover { background: var(--sl-accent-tint); color: var(--sl-accent-text); }
.palette-divider { height: 1px; background: var(--sl-hairline); 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: var(--sl-r-8);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    color: var(--sl-text-2);
}
#palette.palette-expanded .drawing-item { justify-content: flex-start; padding: 8px 10px; gap: 12px; }
.drawing-item:hover { background: var(--sl-wash); color: var(--sl-text-1); }
.drawing-item.drawing-item-active { background: var(--sl-accent-tint); color: var(--sl-accent-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: var(--sl-raised);
    border: 1px solid var(--sl-line-pop);
    color: var(--sl-text-1);
    padding: 5px 9px;
    border-radius: var(--sl-r-6);
    font-family: var(--sl-font-ui);
    font-size: 12px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 200;
}
.drawing-style-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 6px 8px;
    margin-top: 4px;
    border-radius: var(--sl-r-8);
    cursor: pointer;
    color: var(--sl-text-2);
    transition: all 0.15s ease;
}
#palette.palette-expanded .drawing-style-preview { justify-content: flex-start; padding: 6px 10px; gap: 12px; }
.drawing-style-preview:hover { background: var(--sl-wash); color: var(--sl-text-1); }
.drawing-style-swatch {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: var(--sl-sky, #38bdf8);
    box-shadow: 0 0 0 1px oklch(1 0 0 / 0.2), 0 2px 4px rgba(0, 0, 0, 0.4);
    flex-shrink: 0;
    transition: transform 0.15s ease;
}
.drawing-style-preview:hover .drawing-style-swatch { transform: scale(1.1); }
.drawing-color-label { font-size: 0.78rem; color: var(--sl-text-dim); }

/* ============================================================
   MODERN FLOATING DRAWING HUD & INSPECTOR (Slate Theme)
   ============================================================ */
.drawing-hud {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(0);
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: oklch(0.2 0.006 250 / 0.9);
    border: 1px solid var(--sl-line-pop, oklch(1 0 0 / 0.13));
    border-radius: 16px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: var(--sl-shadow-pop, 0 18px 40px -10px oklch(0 0 0 / 0.9)), 0 0 0 1px oklch(1 0 0 / 0.04);
    font-family: var(--sl-font-ui, 'Onest', system-ui, sans-serif);
    color: var(--sl-text, #f4f4f5);
    user-select: none;
    pointer-events: auto;
    animation: drawingHudAppear 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes drawingHudAppear {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(14px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
    }
}

.dh-section {
    display: flex;
    align-items: center;
    gap: 3px;
}

.dh-divider {
    width: 1px;
    height: 22px;
    background: var(--sl-line-2, oklch(1 0 0 / 0.09));
    margin: 0 4px;
    flex-shrink: 0;
}

.dh-btn {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--sl-text-mid, oklch(0.72 0.005 250));
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0;
    position: relative;
}

.dh-btn:hover {
    background: oklch(1 0 0 / 0.08);
    color: var(--sl-text-hi, #ffffff);
}

.dh-btn:active {
    transform: scale(0.94);
}

.dh-btn.is-active {
    background: var(--sl-sky-16, oklch(0.72 0.13 230 / 0.16));
    color: var(--sl-sky-text, oklch(0.8 0.11 230));
}

.dh-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

.dh-btn svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Tooltip on hover */
.dh-btn[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: oklch(0.14 0.004 250 / 0.95);
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.15s ease;
    transform: translateX(-50%) translateY(4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    border: 1px solid oklch(1 0 0 / 0.08);
    z-index: 10001;
}

.dh-btn:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Width preset dots */
.dh-width-dot {
    background: currentColor;
    border-radius: 50%;
}
.dh-w-1 .dh-width-dot { width: 3px; height: 3px; }
.dh-w-2 .dh-width-dot { width: 6px; height: 6px; }
.dh-w-3 .dh-width-dot { width: 10px; height: 10px; }
.dh-w-4 .dh-width-dot { width: 15px; height: 15px; }

/* Swatches */
.dh-swatch {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: transform 0.15s ease, border-color 0.15s ease;
    padding: 0;
    position: relative;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
}

.dh-swatch:hover {
    transform: scale(1.15);
}

.dh-swatch.is-active {
    border-color: #ffffff;
    transform: scale(1.2);
    box-shadow: 0 0 0 2px var(--sl-sky, #38bdf8);
}

.dh-custom-color-wrap {
    position: relative;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background: conic-gradient(from 180deg, #f87171, #fbbf24, #34d399, #38bdf8, #c084fc, #f87171);
    box-shadow: 0 0 0 1px oklch(1 0 0 / 0.2);
    transition: transform 0.15s ease;
}
.dh-custom-color-wrap:hover { transform: scale(1.15); }
.dh-custom-color-input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

/* Close button in HUD */
.dh-close-btn {
    color: var(--sl-text-faint);
    margin-left: 2px;
}
.dh-close-btn:hover {
    color: var(--sl-red, #f87171);
    background: oklch(0.65 0.19 25 / 0.15);
}

/* Drawing Inspector Popover (when an object is selected) */
.drawing-inspector {
    position: fixed;
    z-index: 10003;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: oklch(0.2 0.006 250 / 0.95);
    border: 1px solid var(--sl-line-pop, oklch(1 0 0 / 0.13));
    border-radius: 12px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: var(--sl-shadow-pop, 0 18px 40px -10px oklch(0 0 0 / 0.9));
    font-family: var(--sl-font-ui, 'Onest', system-ui, sans-serif);
    animation: drawingHudAppear 0.15s ease forwards;
}

/* Text floating toolbar */
.drawing-text-toolbar {
    position: fixed;
    z-index: 10002;
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 4px 8px;
    background: oklch(0.2 0.006 250 / 0.96);
    border: 1px solid var(--sl-line-pop, oklch(1 0 0 / 0.13));
    border-radius: 10px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: var(--sl-shadow-pop, 0 18px 40px -10px oklch(0 0 0 / 0.9));
    font-family: var(--sl-font-ui, 'Onest', system-ui, sans-serif);
}

.dtt-btn {
    min-width: 26px;
    height: 26px;
    padding: 0 6px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--sl-text-mid, oklch(0.72 0.005 250));
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.12s ease;
}
.dtt-btn:hover {
    background: oklch(1 0 0 / 0.08);
    color: #ffffff;
}
.dtt-btn.is-active {
    background: var(--sl-sky-16, oklch(0.72 0.13 230 / 0.16));
    color: var(--sl-sky-text, oklch(0.8 0.11 230));
}
.dtt-size-label {
    font-size: 11px;
    font-family: var(--sl-font-mono, monospace);
    color: var(--sl-text-dim);
    min-width: 22px;
    text-align: center;
}
/* 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: var(--sl-danger-text); }
.tools-item-danger:hover { background: var(--sl-danger-wash); color: var(--sl-danger-text); }

/* 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-raised);
    border: 1px solid var(--sl-line-pop);
    border-radius: var(--sl-r-10);
    box-shadow: var(--sl-shadow-float);
    z-index: 100;
    align-items: center;
}
.slc-zoom-btn {
    width: var(--sl-h-sm);
    height: var(--sl-h-sm);
    padding: 0;
    border: none;
    border-radius: var(--sl-r-6);
    background: transparent;
    color: var(--sl-text-2);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.slc-zoom-btn:hover { background: var(--sl-wash); color: var(--sl-text-1); }
/* Phones keep thumb-sized targets (mobile.css pads these; fixed sizes above
   would otherwise pin them at 28px). */
body.pw-mobile .slc-zoom-btn,
body.pw-mobile #btn-new-tab { width: auto; height: auto; min-width: 38px; min-height: 38px; }
.slc-zoom-label {
    padding: 6px 8px;
    font-family: var(--sl-font-mono);
    font-size: 11px;
    color: var(--sl-text-2);
    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: var(--sl-panel);
    border: 1px solid var(--sl-line-pop);
    border-radius: var(--sl-r-10);
    box-shadow: var(--sl-shadow-float);
    z-index: 100;
    overflow: hidden;
    cursor: crosshair;
}
.slc-minimap canvas { display: block; }
.slc-minimap-label {
    position: absolute;
    right: 6px;
    bottom: 4px;
    font-family: var(--sl-font-mono);
    font-size: 9px;
    letter-spacing: 0.12em;
    color: var(--sl-text-3);
    pointer-events: none;
}

/* shortcuts */
.slc-shortcuts-btn {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: var(--sl-h-sm);
    background: none;
    border: none;
    color: var(--sl-text-2);
    font-family: var(--sl-font-ui);
    font-size: 12px;
    padding: 0 10px;
    border-radius: var(--sl-r-6);
    cursor: pointer;
}
.slc-shortcuts-btn:hover { background: var(--sl-wash); color: var(--sl-text-1); }
/* modal: .sl-modal recipe — head / body / foot rhythm */
.slc-shortcuts { width: 440px; max-width: 92vw; padding: 0; }
.slc-shortcuts-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--sl-hairline); }
.slc-shortcuts-kicon { display: inline-flex; color: var(--sl-text-2); }
.slc-shortcuts-title {
    font-family: var(--sl-font-ui);
    font-size: 14px;
    font-weight: 700;
    color: var(--sl-text-1);
    flex: 1;
}
.slc-shortcuts-close {
    width: var(--sl-h-sm);
    height: var(--sl-h-sm);
    background: none;
    border: none;
    color: var(--sl-text-2);
    cursor: pointer;
    padding: 0;
    border-radius: var(--sl-r-6);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.slc-shortcuts-close:hover { background: var(--sl-wash); color: var(--sl-text-1); }
.slc-shortcuts-list { display: flex; flex-direction: column; padding: 6px 14px 12px; max-height: 70vh; overflow-y: auto; }
.slc-shortcut-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 32px;
    padding: 4px 0;
    border-bottom: 1px solid var(--sl-hairline);
}
.slc-shortcut-row:last-child { border-bottom: none; }
.slc-shortcut-key {
    font-family: var(--sl-font-mono);
    font-size: 10.5px;
    font-weight: 500;
    color: var(--sl-text-1);
    background: transparent;
    border: 1px solid var(--sl-border);
    padding: 2px 7px;
    border-radius: var(--sl-r-6);
    min-width: 56px;
    text-align: center;
    box-sizing: border-box;
}
.slc-shortcut-desc { font-size: 12.5px; color: var(--sl-text-2); }

/* 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;
    height: var(--sl-h-sm);
    padding: 0 10px;
    border-radius: var(--sl-r-8);
    color: var(--sl-text-2);
    font-size: 12.5px;
    cursor: pointer;
}
#toolbar .project-name:hover { background: var(--sl-wash); color: var(--sl-text-1); }

/* One accent: the Editor pill and Share are secondary buttons, not tinted. */
.topbar-editor-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: var(--sl-h);
    padding: 0 12px;
    border-radius: var(--sl-r-8);
    background: var(--sl-control);
    border: 1px solid oklch(1 0 0 / 0.1);
    color: var(--sl-text-1);
    font-family: var(--sl-font-ui);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    margin-right: 4px;
    box-sizing: border-box;
}
.topbar-editor-pill:hover { background: var(--sl-control-hover); border-color: oklch(1 0 0 / 0.2); }

#btn-share.btn-share {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: var(--sl-h);
    padding: 0 12px;
    border-radius: var(--sl-r-8);
    background: var(--sl-control);
    border: 1px solid oklch(1 0 0 / 0.1);
    color: var(--sl-text-1);
    font-family: var(--sl-font-ui);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    box-sizing: border-box;
}
#btn-share.btn-share:hover { background: var(--sl-control-hover); border-color: oklch(1 0 0 / 0.2); }
#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: 8px 8px 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 {   /* plain mono count — no pill (Standard) */
    font-family: var(--sl-font-mono);
    font-size: 10.5px;
    font-weight: 500;
    color: var(--sl-text-3);
    background: none;
    padding: 0;
    min-width: 0;
    border-radius: 0;
}
.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: var(--sl-r-6);
    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: var(--sl-r-6); 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] Scene builder — remaining legacy greys/reds → Standard tokens */
.sb-panel { background: var(--sl-panel); border-top: 1px solid oklch(1 0 0 / 0.08); }
.sb-resize-handle::after { background: oklch(1 0 0 / 0.14); }
.sb-resize-handle:hover::after { background: var(--sl-accent); }
.sb-header { background: var(--sl-panel); border-bottom: 1px solid var(--sl-hairline); min-height: 32px; }
.sb-header-btn {
    width: var(--sl-h-sm); height: var(--sl-h-sm); padding: 0;
    border-radius: var(--sl-r-6); color: oklch(0.66 0.005 250);
}
.sb-header-btn:hover { background: var(--sl-wash); color: var(--sl-text-1); }
.sb-play-btn { background: var(--sl-accent); border: none; color: var(--sl-on-accent); border-radius: var(--sl-r-6); }
.sb-play-btn:hover { background: var(--sl-accent); filter: brightness(1.08); }
.sb-play-btn.sb-playing::after { border-left-color: var(--sl-on-accent); border-right-color: var(--sl-on-accent); }
.sb-time { font-family: var(--sl-font-mono); font-size: 10.5px; color: var(--sl-text-3); }
.sb-preview { background: oklch(0.09 0.002 250); border-right-color: var(--sl-hairline); }
.sb-preview-empty { font-size: 11px; color: var(--sl-text-3); }
.sb-timeline::-webkit-scrollbar-track { background: transparent; }
.sb-timeline::-webkit-scrollbar-thumb { background: oklch(0.32 0.008 250); border-radius: 4px; }
.sb-ruler-area { background: var(--sl-panel); border-bottom: 1px solid var(--sl-hairline); }
.sb-ruler-tick { font-family: var(--sl-font-mono); font-size: 8.5px; color: var(--sl-text-3); border-left-color: oklch(1 0 0 / 0.1); }
.sb-clip { background-color: var(--sl-card); border-color: transparent; }
.sb-clip::before { border-radius: 5px; }
.sb-clip:hover { border-color: oklch(1 0 0 / 0.16); }
.sb-clip.sb-selected { border-color: var(--sl-accent); }
.sb-clip-type {
    display: inline-flex; align-items: center; padding: 2px 4px;
    color: #fff; background: oklch(0 0 0 / 0.5); border-radius: 4px;
}
.sb-clip-name { font-size: 11px; font-weight: 600; color: var(--sl-text-1); }
.sb-clip-dur { font-family: var(--sl-font-mono); font-size: 9.5px; color: oklch(1 0 0 / 0.75); }
.sb-clip-delete {
    display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; padding: 0;
    background: oklch(0 0 0 / 0.6); color: oklch(0.85 0.005 250); border-radius: 4px;
}
.sb-clip-delete:hover { color: var(--sl-danger-text); }
.sb-drag-ghost { border-color: var(--sl-accent); border-radius: var(--sl-r-6); box-shadow: var(--sl-shadow-float); }
.sb-timeline.sb-drop-target { background: oklch(0.72 0.13 230 / 0.06); outline-color: var(--sl-accent-line); }
.sb-playhead::before { background: var(--sl-sky); }
.sb-empty { color: var(--sl-text-3); }
.sb-empty span { font-size: 11.5px; }
.sb-tab-bar { background: var(--sl-panel); border-bottom: 1px solid var(--sl-hairline); padding: 3px 8px; gap: 3px; }
.sb-tab {
    height: 24px; padding: 0 10px; gap: 6px; border: none; border-radius: var(--sl-r-6);
    color: var(--sl-text-3); font-family: var(--sl-font-ui); font-size: 11.5px; font-weight: 500;
}
.sb-tab:hover { background: var(--sl-wash); color: var(--sl-text-1); }
.sb-tab-active { background: var(--sl-selected); color: var(--sl-text-1); font-weight: 600; border-color: transparent; }
.sb-tab-active::after { display: none; }
.sb-tab-count { background: none; color: var(--sl-text-3); font-family: var(--sl-font-mono); font-size: 10px; font-weight: 500; padding: 0; min-width: 0; }
.sb-tab-close {
    display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; padding: 0;
    color: var(--sl-text-3); border-radius: 4px;
}
.sb-tab-close:hover { color: var(--sl-text-1); background: var(--sl-wash); }
.sb-tab-dragover { border-color: var(--sl-accent) !important; box-shadow: inset 0 0 0 1px var(--sl-accent-line); }
.sb-tab-add {
    display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0;
    border: none; border-radius: var(--sl-r-6); color: var(--sl-text-3);
}
.sb-tab-add:hover { color: var(--sl-text-1); background: var(--sl-wash); }
.sb-tab-rename-input {
    height: 20px; box-sizing: border-box; background: var(--sl-panel);
    border: 1px solid var(--sl-focus); border-radius: var(--sl-r-6); color: var(--sl-text-1);
    font-family: var(--sl-font-ui); font-size: 11.5px;
}
.sb-tab-context {
    background: var(--sl-raised); border: 1px solid var(--sl-line-pop); border-radius: var(--sl-r-10);
    box-shadow: var(--sl-shadow-pop); padding: 5px; -webkit-backdrop-filter: none; backdrop-filter: none;
}
.sb-tab-context-item {
    display: flex; align-items: center; height: var(--sl-h-sm); padding: 0 9px; border-radius: var(--sl-r-6);
    font-family: var(--sl-font-ui); font-size: 12px; font-weight: 500; color: oklch(0.88 0.002 250);
}
.sb-tab-context-item:hover { background: oklch(1 0 0 / 0.06); }
.sb-tab-context-item.sb-danger { color: var(--sl-danger-text); }
.sb-tab-context-item.sb-danger:hover { background: var(--sl-danger-wash); color: var(--sl-danger-text); }
.sb-drop-indicator { background: var(--sl-accent); box-shadow: none; }
.sb-export-toast {
    position: fixed; bottom: 80px; right: 20px; z-index: 10100; min-width: 280px; box-sizing: border-box;
    padding: 12px 14px; background: var(--sl-raised); border: 1px solid oklch(1 0 0 / 0.1);
    border-radius: var(--sl-r-12); box-shadow: var(--sl-shadow-pop); font-family: var(--sl-font-ui);
}
.sb-export-toast-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.sb-export-toast-label { font-size: 12.5px; font-weight: 600; color: var(--sl-text-1); }
.sb-export-toast-cancel {
    display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0;
    background: none; border: none; border-radius: var(--sl-r-6); color: var(--sl-text-3); cursor: pointer;
}
.sb-export-toast-cancel:hover { background: var(--sl-wash); color: var(--sl-text-1); }
.sb-export-toast-pct { margin-top: 6px; font-family: var(--sl-font-mono); font-size: 10.5px; color: var(--sl-text-3); }

/* [SLATE-MIGRATED] Video editor "Canvas" button — a secondary, like the canvas topbar's Editor button (one accent: Export) */


/* Auto-Edit hub's apply button — the hub's one primary (Standard sky, not violet) */


/* 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); }


/* 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 { column-width: 220px; column-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. */


/* 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. */


@media (prefers-reduced-motion: reduce) {
    .aim-pin, .aim-tool, .aim-mini, .aim-cmt, .aim-composer { transition: none; }
}

/* ============================================
   RunPod control panel — [SLATE-MIGRATED] styled in css/gpu-panel.css.
   ============================================ */

/* 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: fixed;
    top: 80px;
    left: 50%;
    width: 480px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 80px);
    display: flex;
    flex-direction: column;
    z-index: 1000;
    background: rgba(28, 28, 33, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.05);
    opacity: 0;
    transform: scale(0.96) translateY(6px);
    pointer-events: none;
    transition: opacity 0.15s cubic-bezier(0.16, 1, 0.3, 1), transform 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}
.agc-panel.agc-open { opacity: 1; transform: scale(1) translateY(0); pointer-events: auto; }

.agc-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    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;
    max-height: 220px;
    padding: 12px 14px;
    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: 280px;
    padding: 10px 0;
}
.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 11px;
    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 14px 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 14px 14px;
    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.12);
    background: rgba(9, 9, 11, 0.4);
    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. */
.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; }

/* Activity Pill — compact indicator when the agent is working */
.agc-activity-pill {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(-12px);
    z-index: 999;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: rgba(28, 28, 33, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
    color: var(--text-primary);
    font-size: 0.78rem;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.agc-activity-pill.agc-pill-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
.agc-activity-pill:hover {
    background: rgba(39, 39, 45, 0.98);
    border-color: rgba(91, 164, 207, 0.45);
}
.agc-pill-key {
    font-size: 0.65rem;
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
    margin-left: 4px;
}

/* Question Card — interactive question prompt */
.agc-question-card {
    position: fixed;
    top: 100px;
    left: 50%;
    transform: translateX(-50%) scale(0.96) translateY(6px);
    width: 480px;
    max-width: calc(100vw - 32px);
    z-index: 1001;
    background: rgba(28, 28, 33, 0.95);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(217, 119, 87, 0.45);
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(217, 119, 87, 0.15);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    opacity: 0;
    pointer-events: none;
    transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
.agc-question-card.agc-question-open {
    opacity: 1;
    transform: translateX(-50%) scale(1) translateY(0);
    pointer-events: auto;
}
.agc-q-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.76rem;
    font-weight: 600;
    color: #d97757;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.agc-q-text {
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.45;
}
.agc-q-options {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.agc-q-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    font-size: 0.82rem;
    cursor: pointer;
    text-align: left;
    transition: all 0.15s ease;
}
.agc-q-btn:hover {
    background: rgba(217, 119, 87, 0.15);
    border-color: rgba(217, 119, 87, 0.4);
    color: #fff;
}
.agc-q-num {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    color: var(--text-secondary);
    font-weight: 600;
}
.agc-q-input-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 2px;
}
.agc-q-input {
    flex: 1;
    padding: 7px 10px;
    border-radius: 7px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(9, 9, 11, 0.4);
    color: var(--text-primary);
    font-size: 0.8rem;
}
.agc-q-input:focus {
    outline: none;
    border-color: rgba(217, 119, 87, 0.5);
}
.agc-q-submit {
    padding: 7px 14px;
    border-radius: 7px;
    border: 1px solid rgba(217, 119, 87, 0.4);
    background: rgba(217, 119, 87, 0.2);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
}
.agc-q-submit:hover {
    background: rgba(217, 119, 87, 0.35);
}

@media (max-width: 720px) {
    .agc-panel { top: 8px; right: 8px; bottom: 8px; left: 8px; width: auto; max-width: none; }
}

/* ============================================================
   Settings overhaul (v2) — adapts the Settings.dc.html design
   to the app's theme variables. Appended last so these rules win
   over the originals by source order. Structure/ids unchanged.
   ============================================================ */

/* Roomier shell for the dense per-provider tables + two-up rows */
.modal { width: 860px; }

/* ---- Toggle switch (had no base CSS before) ---- */
.toggle-switch {
    position: relative;
    display: inline-flex;
    flex: none;
    width: 38px;
    height: 22px;
    cursor: pointer;
    vertical-align: middle;
}
.toggle-switch input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.toggle-slider {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    transition: background .18s ease, border-color .18s ease;
}
.toggle-slider::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--text-secondary);
    transition: transform .18s ease, background .18s ease;
}
.toggle-switch input:checked + .toggle-slider {
    background: color-mix(in srgb, var(--accent) 82%, transparent);
    border-color: color-mix(in srgb, var(--accent) 55%, transparent);
}
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(16px); background: #fff; }
.toggle-switch input:focus-visible + .toggle-slider { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- Header: title + search + usage stats + identity ---- */
.modal-header { gap: 12px 14px; flex-wrap: wrap; }
.settings-head-id { display: flex; align-items: baseline; gap: 9px; flex: none; }
.settings-head-search {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 10px; min-width: 0; max-width: 240px; flex: 1 1 150px;
    background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 8px;
}
.settings-head-search svg { flex: none; color: var(--text-secondary); opacity: .7; }
.settings-head-search input {
    flex: 1; min-width: 0; background: transparent; border: none; outline: none;
    font-family: inherit; font-size: 0.78rem; color: var(--text-primary);
}
.settings-head-meta {
    display: flex; align-items: center; justify-content: flex-end;
    gap: 10px 14px; flex: 1 1 auto; min-width: 0; flex-wrap: wrap;
}
.settings-head-user { text-align: right; line-height: 1.3; min-width: 0; }
.settings-head-user .shu-name { font-size: 0.8rem; font-weight: 600; color: var(--text-primary); }
.settings-head-user .shu-email {
    font-size: 0.72rem; color: var(--text-secondary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px;
}
.settings-head-sep { width: 1px; height: 24px; background: var(--border-color); flex: none; }
.settings-stat { line-height: 1.25; text-align: right; flex: none; }
.settings-stat .sst-n { font-size: 0.9rem; font-weight: 700; color: var(--text-primary); }
.settings-stat .sst-n small { font-size: 0.68rem; font-weight: 500; color: var(--text-secondary); }
.settings-stat .sst-sub { font-size: 0.68rem; color: var(--text-secondary); }

/* ---- Nav: subtle refinements + status dot ---- */
.settings-nav { width: 180px; min-width: 180px; }
.settings-nav-item { position: relative; }
.settings-nav-dot {
    width: 6px; height: 6px; border-radius: 50%; background: var(--success);
    flex: none; margin-left: auto;
}

/* ---- Tab title: name + hairline rule, with a blurb under it ---- */
.settings-tab-title {
    display: flex; align-items: center; gap: 11px;
    border-bottom: none; padding-bottom: 0; margin-bottom: 3px;
    font-size: 0.95rem; color: var(--text-primary); letter-spacing: -0.01em;
}
.settings-tab-title::after {
    content: ""; flex: 1; height: 1px; background: var(--border-color);
}
.settings-tab-blurb {
    font-size: 0.72rem; line-height: 1.5; color: var(--text-secondary);
    margin: 0 0 20px; max-width: 560px;
}

/* ---- Footer: unsaved-changes indicator on the left ---- */
.modal-footer { justify-content: flex-end; gap: 9px; align-items: center; }
.settings-dirty {
    display: none; align-items: center; gap: 8px; margin-right: auto;
    font-size: 0.72rem; color: var(--text-secondary);
}
.settings-dirty.on { display: inline-flex; }
.settings-dirty .sd-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--warning); flex: none; }
.modal-footer .btn-start { font-weight: 700; }

/* ---- Reusable pieces the new tabs (Generation/Shortcuts/System) use ---- */
/* Chip button group (aspect ratios, channels, verify modes) */
.setting-chip-row { display: flex; flex-wrap: wrap; gap: 7px; }
.setting-chip {
    display: inline-flex; align-items: center; height: 28px; padding: 0 12px;
    border-radius: 999px; font-size: 0.72rem; font-weight: 600; cursor: pointer;
    background: var(--bg-tertiary); border: 1px solid var(--border-color); color: var(--text-primary);
    font-family: inherit; transition: background .15s, border-color .15s, color .15s;
}
.setting-chip:hover { border-color: color-mix(in srgb, var(--text-secondary) 40%, transparent); }
.setting-chip.active {
    background: color-mix(in srgb, var(--accent) 20%, transparent);
    border-color: color-mix(in srgb, var(--accent) 50%, transparent);
    color: color-mix(in srgb, var(--accent) 85%, var(--text-primary));
}

/* Range slider with a value read-out and min/max ticks */
.setting-slider-head { display: flex; align-items: center; justify-content: space-between; max-width: 460px; margin-bottom: 8px; }
.setting-slider-val { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.72rem; color: var(--accent); }
.setting-range { width: 100%; max-width: 460px; accent-color: var(--accent); }
.setting-range-ticks { display: flex; justify-content: space-between; max-width: 460px; margin-top: 4px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.62rem; color: var(--text-secondary); }

/* Two-up field row */
.setting-two-up { display: flex; gap: 12px; flex-wrap: wrap; }
.setting-two-up > * { flex: 1; min-width: 170px; }

/* An inline row: label+desc on the left, control on the right (toggles) */
.setting-flip-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.setting-flip-row .sfr-title { font-size: 0.82rem; font-weight: 600; color: var(--text-primary); }
.setting-flip-row .sfr-desc { font-size: 0.72rem; color: var(--text-secondary); margin-top: 3px; line-height: 1.45; }
.setting-flip-row .setting-hint { margin: 3px 0 0; }

/* Search: hide non-matching groups (JS toggles [data-nomatch]) */
.setting-group[data-nomatch="1"], .setting-flip-row[data-nomatch="1"] { display: none; }

/* Home-tab (page) surface: widen the reparented layout to match */
#home-settings-container { background: rgba(9, 9, 11, 0.55); }

/* ---- Disk usage bar (Storage tab) ---- */
.disk-usage-bar {
    display: flex; gap: 2px; height: 8px; border-radius: 999px; overflow: hidden;
    max-width: 680px; background: var(--bg-tertiary);
}
.disk-usage-bar > span { height: 100%; }
.disk-usage-legend { display: flex; flex-wrap: wrap; gap: 7px 18px; margin-top: 10px; max-width: 680px; }
.disk-usage-legend .dul { display: flex; align-items: center; gap: 7px; }
.disk-usage-legend .dul-dot { width: 8px; height: 8px; border-radius: 3px; flex: none; }
.disk-usage-legend .dul-label { font-size: 0.72rem; color: var(--text-primary); }
.disk-usage-legend .dul-size { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.66rem; color: var(--text-secondary); }

/* ---- Shortcuts list ---- */
.shortcuts-group { max-width: 680px; margin-bottom: 20px; }
.shortcuts-group-title { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); margin: 0 0 9px; }
.shortcuts-table { background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 12px; overflow: hidden; }
.shortcut-row { display: flex; align-items: center; gap: 12px; padding: 9px 13px; border-top: 1px solid rgba(255,255,255,0.05); }
.shortcut-row:first-child { border-top: none; }
.shortcut-row .sc-action { flex: 1; min-width: 0; font-size: 0.78rem; color: var(--text-primary); }
.shortcut-row .sc-keys {
    font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.68rem;
    padding: 3px 8px; border-radius: 6px; white-space: nowrap;
    background: var(--bg-tertiary); border: 1px solid var(--border-color); color: var(--text-primary); cursor: default;
}
.shortcuts-list.rebinding .shortcut-row .sc-keys { cursor: pointer; border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.shortcut-row .sc-keys.capturing { background: color-mix(in srgb, var(--accent) 22%, transparent); border-color: var(--accent); color: color-mix(in srgb, var(--accent) 90%, var(--text-primary)); }
.shortcut-row .sc-keys.custom { color: var(--accent); }

/* ---- Settings.dc page shell ----
   The settings page shares the same rail, shell, spacing, and type scale as
   Settings.dc.html. The modal keeps the shell chrome while the home tab uses
   the full-height page variant. */
#settings-overlay .modal {
    width: min(1080px, calc(100vw - 80px));
    max-width: 1080px;
    height: min(840px, calc(100vh - 96px));
    max-height: calc(100vh - 96px);
    background: oklch(0.235 0.005 250);
    border: 1px solid oklch(1 0 0 / 0.09);
    border-radius: 14px;
    box-shadow: 0 30px 90px oklch(0.08 0.01 250 / 0.6);
    font-family: var(--sl-font-ui);
}

#settings-overlay .modal-header {
    flex: none;
    padding: 13px 18px;
    background: oklch(0.252 0.005 250);
    border-bottom: 1px solid oklch(1 0 0 / 0.06);
}

#home-settings-container > .modal-header {
    flex: none;
    padding: 11px 18px 11px 68px;
    min-height: 42px;
    box-sizing: border-box;
    background: oklch(0.252 0.005 250);
    border-bottom: 1px solid oklch(1 0 0 / 0.06);
}

#settings-overlay .modal-header h2,
#home-settings-container > .modal-header h2 {
    font-family: var(--sl-font-ui);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.015em;
}

#settings-overlay .version-tag,
#home-settings-container .version-tag {
    font-family: var(--sl-font-mono);
    font-size: 11px;
    color: oklch(0.72 0.005 250);
    background: none;
    padding: 0;
    margin-left: 5px;
    opacity: 1;
}

.settings-head-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 8px;
    background: oklch(0.29 0.006 250);
    border: 1px solid oklch(1 0 0 / 0.1);
    color: oklch(0.85 0.005 250);
    cursor: pointer;
}
.settings-head-action:hover {
    background: oklch(0.355 0.006 250);
    border-color: oklch(1 0 0 / 0.2);
    color: oklch(0.92 0.002 250);
}

#settings-overlay .settings-nav,
#home-settings-container .settings-nav {
    width: 180px;
    min-width: 180px;
    padding: 12px 9px;
    gap: 1px;
    background: oklch(0.222 0.005 250);
    border-right: 1px solid oklch(1 0 0 / 0.06);
}

#settings-overlay .settings-nav::before,
#home-settings-container .settings-nav::before {
    content: 'SECTIONS';
    padding: 4px 10px 8px;
    color: oklch(0.7 0.005 250);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.15em;
}

#settings-overlay .settings-nav-item,
#home-settings-container .settings-nav-item {
    min-height: 31px;
    padding: 7px 10px;
    border-radius: 7px;
    color: oklch(0.68 0.005 250);
    font-family: var(--sl-font-ui);
    font-size: 12px;
    font-weight: 500;
}

#settings-overlay .settings-nav-item:hover,
#home-settings-container .settings-nav-item:hover {
    background: oklch(0.26 0.008 250);
    color: oklch(0.88 0.002 250);
}

#settings-overlay .settings-nav-item.settings-nav-active,
#home-settings-container .settings-nav-item.settings-nav-active {
    background: oklch(0.72 0.13 230 / 0.12);
    color: oklch(0.96 0.002 250);
}

#settings-overlay .settings-content,
#home-settings-container .settings-content {
    padding: 0;
    background: oklch(0.235 0.005 250);
    scrollbar-color: oklch(0.32 0.008 250) transparent;
}

#settings-overlay .settings-tab,
#home-settings-container .settings-tab {
    max-width: 720px;
    padding: 24px 28px 44px;
}

#settings-overlay .settings-tab-title,
#home-settings-container .settings-tab-title {
    margin: 0 0 3px;
    padding: 0;
    color: oklch(0.96 0.002 250);
    font-family: var(--sl-font-ui);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.015em;
}

#settings-overlay .settings-tab-title::after,
#home-settings-container .settings-tab-title::after {
    background: oklch(1 0 0 / 0.07);
}

#settings-overlay .settings-tab-blurb,
#home-settings-container .settings-tab-blurb {
    margin: 0 0 24px;
    color: oklch(0.7 0.005 250);
    font-family: var(--sl-font-ui);
    font-size: 11.5px;
    line-height: 1.5;
}

#settings-overlay .setting-group,
#home-settings-container .setting-group {
    margin-bottom: 22px;
}

#settings-overlay .setting-group label,
#home-settings-container .setting-group label {
    color: oklch(0.7 0.005 250);
    font-family: var(--sl-font-ui);
    font-size: 11px;
}

#settings-overlay .setting-input-row input,
#home-settings-container .setting-input-row input,
#settings-overlay select,
#home-settings-container select {
    height: 32px;
    padding: 0 11px;
    border-radius: 8px;
    background: oklch(0.19 0.004 250);
    border-color: oklch(1 0 0 / 0.09);
    font-family: var(--sl-font-ui);
    font-size: 12px;
}

#settings-overlay .modal-footer,
#home-settings-container > .modal-footer {
    flex: none;
    padding: 11px 18px;
    background: oklch(0.252 0.005 250);
    border-top: 1px solid oklch(1 0 0 / 0.07);
}

.settings-head-right {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

/* ---- Section sub-headings inside settings tabs ---- */
#settings-overlay .settings-section-title,
#home-settings-container .settings-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 32px 0 14px 0;
    padding-top: 18px;
    border-top: 1px solid oklch(1 0 0 / 0.07);
    color: oklch(0.92 0.002 250);
    font-family: var(--sl-font-ui);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* ---- Small action & utility buttons across Settings ---- */
#settings-overlay .btn-small,
#home-settings-container .btn-small,
#settings-overlay .btn-browse,
#home-settings-container .btn-browse,
#settings-overlay .btn-gdrive-signin,
#home-settings-container .btn-gdrive-signin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 32px;
    padding: 0 13px;
    border-radius: var(--sl-r-sm, 8px);
    background: var(--sl-bg-chip, oklch(0.22 0.007 250));
    border: 1px solid var(--sl-line-3, oklch(1 0 0 / 0.09));
    color: var(--sl-text, oklch(0.88 0.002 250));
    font-family: var(--sl-font-ui);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: none;
    letter-spacing: normal;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

#settings-overlay .btn-small:hover,
#home-settings-container .btn-small:hover,
#settings-overlay .btn-browse:hover,
#home-settings-container .btn-browse:hover,
#settings-overlay .btn-gdrive-signin:hover,
#home-settings-container .btn-gdrive-signin:hover {
    background: var(--sl-bg-hover, oklch(0.26 0.008 250));
    border-color: oklch(1 0 0 / 0.18);
    color: var(--sl-text-hi, oklch(0.97 0.002 250));
}

#settings-overlay .btn-small-compact,
#home-settings-container .btn-small-compact {
    height: 26px;
    padding: 0 9px !important;
    font-size: 11px !important;
    border-radius: var(--sl-r-xs, 6px);
}

#settings-overlay .btn-danger-subtle,
#home-settings-container .btn-danger-subtle {
    background: var(--sl-red-12, oklch(0.65 0.19 25 / 0.12));
    border-color: oklch(0.65 0.19 25 / 0.3);
    color: var(--sl-red-text, oklch(0.78 0.1 25));
}
#settings-overlay .btn-danger-subtle:hover,
#home-settings-container .btn-danger-subtle:hover {
    background: oklch(0.65 0.19 25 / 0.22);
    border-color: oklch(0.65 0.19 25 / 0.5);
    color: oklch(0.92 0.08 25);
}

/* ---- Footer Save & Cancel Buttons ---- */
#settings-overlay #settings-save,
#home-settings-container #settings-save {
    background: var(--sl-sky, oklch(0.72 0.13 230));
    border: none;
    color: var(--sl-on-sky, oklch(0.15 0.02 240));
    font-family: var(--sl-font-ui);
    font-size: 13px;
    font-weight: 700;
    height: 34px;
    padding: 0 20px;
    border-radius: var(--sl-r-sm, 8px);
    cursor: pointer;
    text-transform: none;
    letter-spacing: normal;
    transition: filter 0.15s ease, transform 0.15s ease;
}
#settings-overlay #settings-save:hover,
#home-settings-container #settings-save:hover {
    filter: brightness(1.08);
    box-shadow: 0 2px 12px oklch(0.72 0.13 230 / 0.3);
}

#settings-overlay #settings-cancel,
#home-settings-container #settings-cancel {
    background: var(--sl-bg-chip, oklch(0.22 0.007 250));
    border: 1px solid var(--sl-line-3, oklch(1 0 0 / 0.09));
    color: var(--sl-text, oklch(0.88 0.002 250));
    font-family: var(--sl-font-ui);
    font-size: 13px;
    font-weight: 600;
    height: 34px;
    padding: 0 16px;
    border-radius: var(--sl-r-sm, 8px);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
#settings-overlay #settings-cancel:hover,
#home-settings-container #settings-cancel:hover {
    background: var(--sl-bg-hover, oklch(0.26 0.008 250));
    border-color: oklch(1 0 0 / 0.18);
    color: var(--sl-text-hi, oklch(0.97 0.002 250));
}

/* ---- Modern Callouts, Subsections & Code Blocks ---- */
#settings-overlay .setting-subsection,
#home-settings-container .setting-subsection {
    margin-top: 14px;
    padding: 14px 16px;
    border: 1px solid var(--sl-line-2, oklch(1 0 0 / 0.07));
    border-radius: var(--sl-r-md, 11px);
    background: var(--sl-bg-card, oklch(0.2 0.006 250));
}

#settings-overlay .setting-subsection-title,
#home-settings-container .setting-subsection-title {
    font-family: var(--sl-font-ui);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--sl-text-hi);
}

#settings-overlay .setting-code-block,
#home-settings-container .setting-code-block {
    font-family: var(--sl-font-mono);
    font-size: 11.5px;
    background: var(--sl-bg-rail, oklch(0.19 0.005 250));
    border: 1px solid var(--sl-line-2, oklch(1 0 0 / 0.07));
    border-radius: var(--sl-r-xs, 6px);
    color: var(--sl-text-hi);
    padding: 7px 11px;
}

#settings-overlay .setting-callout,
#home-settings-container .setting-callout {
    margin-top: 10px;
    padding: 11px 13px;
    border-radius: var(--sl-r-sm, 8px);
    font-family: var(--sl-font-ui);
}

#settings-overlay .setting-callout-success,
#home-settings-container .setting-callout-success {
    background: var(--sl-green-14, oklch(0.66 0.14 155 / 0.14));
    border: 1px solid var(--sl-green-45, oklch(0.66 0.14 155 / 0.45));
}
#settings-overlay .setting-callout-success .setting-callout-title,
#home-settings-container .setting-callout-success .setting-callout-title {
    color: var(--sl-green-text, oklch(0.8 0.15 155));
    font-weight: 600;
    font-size: 12px;
}

#settings-overlay .setting-callout-info,
#home-settings-container .setting-callout-info {
    background: var(--sl-sky-12, oklch(0.72 0.13 230 / 0.12));
    border: 1px solid var(--sl-sky-35, oklch(0.72 0.13 230 / 0.35));
}
#settings-overlay .setting-callout-info .setting-callout-title,
#home-settings-container .setting-callout-info .setting-callout-title {
    color: var(--sl-sky-text, oklch(0.8 0.11 230));
    font-weight: 600;
    font-size: 12px;
}

#settings-overlay .setting-callout-body,
#home-settings-container .setting-callout-body {
    font-family: var(--sl-font-mono);
    font-size: 11px;
    color: var(--sl-text, oklch(0.88 0.002 250));
    line-height: 1.5;
}

/* ---- API Setup Guide Card ---- */
#settings-overlay .api-setup-guide,
#home-settings-container .api-setup-guide {
    margin-top: 14px;
    background: var(--sl-bg-card, oklch(0.2 0.006 250));
    border: 1px solid var(--sl-line-2, oklch(1 0 0 / 0.07));
    border-radius: var(--sl-r-md, 11px);
    padding: 14px 16px;
}

#settings-overlay .api-setup-title,
#home-settings-container .api-setup-title {
    font-family: var(--sl-font-ui);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sl-text-mid, oklch(0.72 0.005 250));
    margin-bottom: 10px;
}
#settings-overlay .api-setup-title svg,
#home-settings-container .api-setup-title svg {
    color: var(--sl-sky);
}

#settings-overlay .api-setup-steps li,
#home-settings-container .api-setup-steps li {
    font-family: var(--sl-font-ui);
    font-size: 12px;
    color: var(--sl-text-mid);
    border-left: 1px solid var(--sl-line-2, oklch(1 0 0 / 0.07));
    padding: 6px 0 6px 28px;
}
#settings-overlay .api-setup-steps li::before,
#home-settings-container .api-setup-steps li::before {
    background: var(--sl-sky-14);
    border: 1px solid var(--sl-sky-35);
    color: var(--sl-sky-text);
    font-family: var(--sl-font-mono);
    font-size: 10px;
    font-weight: 700;
}
#settings-overlay .api-setup-steps li a,
#home-settings-container .api-setup-steps li a {
    color: var(--sl-sky);
}
#settings-overlay .api-setup-steps li strong,
#home-settings-container .api-setup-steps li strong {
    color: var(--sl-text-hi);
}

#settings-overlay .api-setup-credit,
#home-settings-container .api-setup-credit {
    background: var(--sl-green-14, oklch(0.66 0.14 155 / 0.14));
    border: 1px solid var(--sl-green-45, oklch(0.66 0.14 155 / 0.45));
    border-radius: var(--sl-r-sm, 8px);
    font-family: var(--sl-font-ui);
    font-size: 12px;
    color: var(--sl-text);
    padding: 10px 13px;
}
#settings-overlay .api-setup-credit strong,
#home-settings-container .api-setup-credit strong {
    color: var(--sl-green-text);
}

/* ---- Appearance Tab Color Grid & Swatches ---- */
#settings-overlay .setting-color-grid,
#home-settings-container .setting-color-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 9px;
    padding: 13px;
    background: var(--sl-bg-card, oklch(0.2 0.006 250));
    border: 1px solid var(--sl-line-2, oklch(1 0 0 / 0.07));
    border-radius: var(--sl-r-md, 11px);
}

#settings-overlay .setting-color-row,
#home-settings-container .setting-color-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
    margin: 0;
    background: var(--sl-bg-rail, oklch(0.19 0.005 250));
    border: 1px solid var(--sl-line-2, oklch(1 0 0 / 0.07));
    border-radius: var(--sl-r-sm, 8px);
}
#settings-overlay .setting-color-row span,
#home-settings-container .setting-color-row span {
    font-family: var(--sl-font-ui);
    font-size: 12px;
    font-weight: 500;
    color: var(--sl-text, oklch(0.88 0.002 250));
}
#settings-overlay .setting-color-row input[type="color"],
#home-settings-container .setting-color-row input[type="color"],
#settings-overlay .setting-link-colors-row input[type="color"],
#home-settings-container .setting-link-colors-row input[type="color"] {
    width: 28px;
    height: 28px;
    border: 1px solid var(--sl-line-3, oklch(1 0 0 / 0.12));
    border-radius: var(--sl-r-xs, 6px);
    background: transparent;
    cursor: pointer;
    padding: 2px;
}

#settings-overlay .setting-link-colors-row,
#home-settings-container .setting-link-colors-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    padding: 10px 14px;
    background: var(--sl-bg-card, oklch(0.2 0.006 250));
    border: 1px solid var(--sl-line-2, oklch(1 0 0 / 0.07));
    border-radius: var(--sl-r-md, 11px);
}

/* ---- Multi-API Key Rows ---- */
#settings-overlay .api-key-row,
#home-settings-container .api-key-row {
    display: flex;
    gap: 6px;
    align-items: center;
}
#settings-overlay .api-key-row .api-key-label,
#home-settings-container .api-key-row .api-key-label {
    width: 90px;
    min-width: 75px;
    padding: 6px 10px;
    background: var(--sl-bg-chip, oklch(0.22 0.007 250));
    border: 1px solid var(--sl-line-2, oklch(1 0 0 / 0.07));
    border-radius: var(--sl-r-xs, 6px);
    color: var(--sl-text-dim, oklch(0.62 0.005 250));
    font-family: var(--sl-font-ui);
    font-size: 12px;
}
#settings-overlay .api-key-row .api-key-input,
#home-settings-container .api-key-row .api-key-input {
    flex: 1;
    height: 32px;
    padding: 0 11px;
    background: oklch(0.19 0.004 250);
    border: 1px solid oklch(1 0 0 / 0.09);
    border-radius: var(--sl-r-xs, 6px);
    color: var(--sl-text-hi);
    font-family: var(--sl-font-mono);
    font-size: 12px;
}
#settings-overlay .key-count-badge,
#home-settings-container .key-count-badge {
    background: var(--sl-sky-14);
    color: var(--sl-sky-text);
    font-family: var(--sl-font-mono);
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 999px;
    margin-left: 6px;
}
#settings-overlay .api-key-remove,
#home-settings-container .api-key-remove {
    color: var(--sl-red-text) !important;
    border: 1px solid oklch(0.65 0.19 25 / 0.25) !important;
    border-radius: var(--sl-r-xs, 6px) !important;
    background: transparent !important;
}
#settings-overlay .api-key-remove:hover,
#home-settings-container .api-key-remove:hover {
    background: var(--sl-red-12) !important;
    border-color: oklch(0.65 0.19 25 / 0.45) !important;
}

/* ---- Google Drive Account & Folder Card ---- */
#settings-overlay .gdrive-account-row,
#home-settings-container .gdrive-account-row,
#settings-overlay .gdrive-folder-row,
#home-settings-container .gdrive-folder-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: var(--sl-bg-card, oklch(0.2 0.006 250));
    border: 1px solid var(--sl-line-2, oklch(1 0 0 / 0.07));
    border-radius: var(--sl-r-md, 11px);
}
#settings-overlay .gdrive-avatar,
#home-settings-container .gdrive-avatar {
    border: 2px solid var(--sl-line-3, oklch(1 0 0 / 0.12));
    border-radius: 50%;
}
#settings-overlay .gdrive-user-name,
#home-settings-container .gdrive-user-name {
    font-family: var(--sl-font-ui);
    font-size: 13px;
    font-weight: 600;
    color: var(--sl-text-hi);
}
#settings-overlay .gdrive-user-email,
#home-settings-container .gdrive-user-email {
    font-family: var(--sl-font-ui);
    font-size: 11.5px;
    color: var(--sl-text-dim);
}

/* ---- Cost / Peer / Agent status display ---- */
#settings-overlay .setting-cost-display,
#home-settings-container .setting-cost-display {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    background: var(--sl-bg-chip, oklch(0.22 0.007 250));
    border: 1px solid var(--sl-line-2, oklch(1 0 0 / 0.07));
    border-radius: var(--sl-r-sm, 8px);
    color: var(--sl-text-mid, oklch(0.72 0.005 250));
    font-family: var(--sl-font-mono);
    font-size: 12px;
}

/* ---- Universal hints & links inside Settings ---- */
#settings-overlay .setting-hint,
#home-settings-container .setting-hint {
    font-family: var(--sl-font-ui);
    font-size: 11.5px;
    line-height: 1.5;
    color: oklch(0.7 0.005 250);
}
#settings-overlay .setting-hint a,
#home-settings-container .setting-hint a {
    color: var(--sl-sky);
    text-decoration: none;
}
#settings-overlay .setting-hint a:hover,
#home-settings-container .setting-hint a:hover {
    color: var(--sl-sky-hover);
    text-decoration: underline;
}
#settings-overlay ::placeholder,
#home-settings-container ::placeholder {
    color: oklch(0.55 0.005 250);
}

/* Page mode from Settings.dc.html: the shell fills the area beside the rail. */
#home-tab-settings .home-tab-panel {
    max-width: none;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    margin: 0;
    padding: 0;
}
#home-tab-settings .home-tab-header { display: none; }
#home-settings-container {
    height: 100%;
    min-height: 100vh;
    border: 0;
    border-radius: 0;
    background: oklch(0.235 0.005 250);
}
#home-settings-container #settings-close { display: none; }

@media (max-width: 760px) {
    #settings-overlay .modal {
        width: calc(100vw - 24px);
        max-width: none;
        height: calc(100vh - 24px);
        max-height: none;
    }
    #settings-overlay .settings-nav,
    #home-settings-container .settings-nav {
        width: 156px;
        min-width: 156px;
    }
    #settings-overlay .settings-tab,
    #home-settings-container .settings-tab { padding: 20px 18px 32px; }
}

/* ---- Settings: one uniform control system [SLATE-MIGRATED] ----
   PatchWork Standard pass over every Settings tab (the page and the modal).
   One recipe per control: 32px inputs/selects on --sl-panel, secondary
   buttons on --sl-control, the 38x22 switch, segmented chips (active grey),
   mono section labels, status as dot + text, destructive outlined.
   Generic on purpose: any tab added later (e.g. Brain) that uses the same
   classes as its siblings is styled automatically. */

/* page surfaces: app background, panel nav, header on the page colour */
#home-settings-container,
#home-settings-container .settings-content { background: var(--sl-app); }
#home-settings-container > .modal-header {
    padding: 10px 24px;
    min-height: 50px;
    background: var(--sl-app);
    border-bottom: 1px solid var(--sl-hairline);
}
#settings-overlay .modal { background: var(--sl-raised); }
#settings-overlay .modal-header,
#settings-overlay .modal-footer { background: var(--sl-raised); }
#home-settings-container > .modal-footer { background: var(--sl-app); border-top: 1px solid var(--sl-hairline); }
:is(#settings-overlay, #home-settings-container) .modal-header h2,
:is(#settings-overlay, #home-settings-container) .settings-tab-title,
:is(#settings-overlay, #home-settings-container) .settings-section-title { font-family: var(--sl-font-ui); }

/* nav: panel surface, grey selection (accent is for the icon only) */
:is(#settings-overlay, #home-settings-container) .settings-nav { background: var(--sl-panel); border-right: 1px solid var(--sl-hairline); }
:is(#settings-overlay, #home-settings-container) .settings-nav::before {
    font-family: var(--sl-font-mono); font-weight: 500; letter-spacing: 0.12em; color: var(--sl-text-3);
}
:is(#settings-overlay, #home-settings-container) .settings-nav-item { height: 32px; min-height: 32px; padding: 0 9px; border-radius: var(--sl-r-8); color: var(--sl-text-2); font-size: 12.5px; }
:is(#settings-overlay, #home-settings-container) .settings-nav-item svg { width: 15px; height: 15px; color: var(--sl-text-3); }
:is(#settings-overlay, #home-settings-container) .settings-nav-item:hover { background: var(--sl-wash); color: var(--sl-text-1); }
:is(#settings-overlay, #home-settings-container) .settings-nav-item.settings-nav-active { background: var(--sl-selected); color: var(--sl-text-1); font-weight: 600; }
:is(#settings-overlay, #home-settings-container) .settings-nav-item.settings-nav-active svg { color: var(--sl-link); }
:is(#settings-overlay, #home-settings-container) .settings-nav-dot { width: 6px; height: 6px; background: var(--sl-success); box-shadow: none; }

/* header: search field + usage summary (mono numbers) */
:is(#settings-overlay, #home-settings-container) .settings-head-search {
    height: var(--sl-h); box-sizing: border-box; background: var(--sl-panel);
    border: 1px solid var(--sl-border); border-radius: var(--sl-r-8); color: var(--sl-text-3);
}
:is(#settings-overlay, #home-settings-container) .settings-head-search:focus-within { border-color: var(--sl-focus); }
:is(#settings-overlay, #home-settings-container) .settings-head-search input { font-family: var(--sl-font-ui); font-size: 12.5px; color: var(--sl-text-1); }
:is(#settings-overlay, #home-settings-container) .settings-stat .sst-n { font-family: var(--sl-font-mono); font-size: 13px; font-weight: 600; color: var(--sl-text-1); }
:is(#settings-overlay, #home-settings-container) .settings-stat .sst-n small { font-family: var(--sl-font-ui); font-size: 11px; font-weight: 500; color: var(--sl-text-2); }
:is(#settings-overlay, #home-settings-container) .settings-stat .sst-sub { font-family: var(--sl-font-mono); font-size: 11px; color: var(--sl-text-3); }
:is(#settings-overlay, #home-settings-container) .shu-name { font-size: 12.5px; font-weight: 600; color: var(--sl-text-1); }
:is(#settings-overlay, #home-settings-container) .shu-email { font-size: 11px; color: var(--sl-text-2); }

/* content column */
:is(#settings-overlay, #home-settings-container) .settings-tab { max-width: 760px; padding: 28px 28px 48px; }
:is(#settings-overlay, #home-settings-container) .settings-tab-blurb { font-size: 12.5px; line-height: 1.55; color: var(--sl-text-2); }

/* field labels = mono section labels */
:is(#settings-overlay, #home-settings-container) .setting-group > label,
:is(#settings-overlay, #home-settings-container) .setting-slider-head > label,
:is(#settings-overlay, #home-settings-container) .setting-field > label {
    display: block;
    font-family: var(--sl-font-mono); font-size: 9.5px; font-weight: 600;
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--sl-text-2);
    margin-bottom: 8px;
}
:is(#settings-overlay, #home-settings-container) .setting-toggle-row > label:not(.toggle-switch) {
    font-family: var(--sl-font-ui); font-size: 13px; font-weight: 600; letter-spacing: 0;
    text-transform: none; color: var(--sl-text-1);
}
:is(#settings-overlay, #home-settings-container) .setting-hint { font-size: 12px; line-height: 1.55; color: var(--sl-text-2); }
:is(#settings-overlay, #home-settings-container) .setting-hint a { color: var(--sl-link); }
:is(#settings-overlay, #home-settings-container) .setting-hint code,
:is(#settings-overlay, #home-settings-container) .settings-tab-blurb code { font-family: var(--sl-font-mono); font-size: 11px; color: var(--sl-text-1); }

/* inputs + selects: one recipe */
:is(#settings-overlay, #home-settings-container) .setting-input,
:is(#settings-overlay, #home-settings-container) .setting-input-row input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]),
:is(#settings-overlay, #home-settings-container) .api-key-row .api-key-input,
:is(#settings-overlay, #home-settings-container) select {
    height: var(--sl-h); box-sizing: border-box; padding: 0 11px;
    background: var(--sl-panel); border: 1px solid var(--sl-border); border-radius: var(--sl-r-8);
    color: var(--sl-text-1); font-family: var(--sl-font-ui); font-size: 12.5px; outline: none;
}
:is(#settings-overlay, #home-settings-container) .setting-input:focus,
:is(#settings-overlay, #home-settings-container) .setting-input-row input:focus,
:is(#settings-overlay, #home-settings-container) .api-key-row .api-key-input:focus,
:is(#settings-overlay, #home-settings-container) select:focus { border-color: var(--sl-focus); }
:is(#settings-overlay, #home-settings-container) select:disabled,
:is(#settings-overlay, #home-settings-container) .setting-input:disabled { opacity: 0.45; }
:is(#settings-overlay, #home-settings-container) select option { background: var(--sl-raised); color: var(--sl-text-1); }
:is(#settings-overlay, #home-settings-container) .api-key-row .api-key-input { font-family: var(--sl-font-mono); font-size: 12px; }
:is(#settings-overlay, #home-settings-container) .api-key-row .api-key-label {
    height: var(--sl-h); box-sizing: border-box; display: inline-flex; align-items: center;
    background: var(--sl-quiet); border: 1px solid var(--sl-hairline); border-radius: var(--sl-r-8);
    color: var(--sl-text-2); font-family: var(--sl-font-mono); font-size: 11px;
}

/* buttons: secondary by default, the footer Save is the one primary */
:is(#settings-overlay, #home-settings-container) .btn-small,
:is(#settings-overlay, #home-settings-container) .btn,
:is(#settings-overlay, #home-settings-container) .btn-browse,
:is(#settings-overlay, #home-settings-container) .btn-gdrive-signin,
:is(#settings-overlay, #home-settings-container) #settings-cancel {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: var(--sl-h); box-sizing: border-box; padding: 0 12px;
    background: var(--sl-control); border: 1px solid oklch(1 0 0 / 0.1); border-radius: var(--sl-r-8);
    color: var(--sl-text-1); font-family: var(--sl-font-ui); font-size: 12px; font-weight: 600;
    text-transform: none; letter-spacing: normal; box-shadow: none; cursor: pointer;
}
:is(#settings-overlay, #home-settings-container) .btn-small:hover:not(:disabled),
:is(#settings-overlay, #home-settings-container) .btn:hover:not(:disabled),
:is(#settings-overlay, #home-settings-container) .btn-browse:hover,
:is(#settings-overlay, #home-settings-container) .btn-gdrive-signin:hover,
:is(#settings-overlay, #home-settings-container) #settings-cancel:hover { background: var(--sl-control-hover); border-color: oklch(1 0 0 / 0.2); color: var(--sl-text-1); }
:is(#settings-overlay, #home-settings-container) .btn-small:disabled,
:is(#settings-overlay, #home-settings-container) .btn:disabled { opacity: 0.45; cursor: default; }
:is(#settings-overlay, #home-settings-container) .btn-small-compact { height: var(--sl-h-sm); padding: 0 10px !important; font-size: 11.5px !important; border-radius: var(--sl-r-8); }
:is(#settings-overlay, #home-settings-container) .btn-primary,
:is(#settings-overlay, #home-settings-container) #settings-save {
    height: var(--sl-h); padding: 0 14px; border: none; border-radius: var(--sl-r-8);
    background: var(--sl-accent); color: var(--sl-on-accent); font-weight: 700; font-size: 12px; box-shadow: none;
}
:is(#settings-overlay, #home-settings-container) #settings-save:hover { filter: brightness(1.07); box-shadow: none; }
/* destructive: outlined, never filled */
:is(#settings-overlay, #home-settings-container) .btn-danger-subtle,
:is(#settings-overlay, #home-settings-container) .btn-danger {
    background: transparent; border: 1px solid var(--sl-danger-line); color: var(--sl-danger-text);
}
:is(#settings-overlay, #home-settings-container) .btn-danger-subtle:hover,
:is(#settings-overlay, #home-settings-container) .btn-danger:hover { background: var(--sl-danger-wash); border-color: var(--sl-danger-line); color: var(--sl-danger-text); }
/* remove-key: a quiet 32px icon button with a title */
:is(#settings-overlay, #home-settings-container) .api-key-remove {
    width: var(--sl-h); padding: 0 !important; color: var(--sl-text-3) !important;
    border: 1px solid oklch(1 0 0 / 0.1) !important; background: var(--sl-control) !important; border-radius: var(--sl-r-8) !important;
}
:is(#settings-overlay, #home-settings-container) .api-key-remove:hover { color: var(--sl-danger-text) !important; background: var(--sl-danger-wash) !important; border-color: var(--sl-danger-line) !important; }

/* switch: the 38x22 Standard switch */
:is(#settings-overlay, #home-settings-container) .toggle-switch,
:is(#settings-overlay, #home-settings-container) .setting-toggle-row .toggle-switch { flex: none; width: 38px; height: 22px; margin: 0; }
:is(#settings-overlay, #home-settings-container) .toggle-slider { border-radius: 12px; background: var(--sl-control); border: 1px solid oklch(1 0 0 / 0.1); }
:is(#settings-overlay, #home-settings-container) .toggle-slider::before { width: 16px; height: 16px; left: 2px; top: 2px; bottom: auto; background: oklch(0.74 0.005 250); box-shadow: none; }
:is(#settings-overlay, #home-settings-container) .toggle-switch input:checked + .toggle-slider { background: oklch(0.72 0.13 230 / 0.85); border-color: oklch(0.72 0.13 230 / 0.5); }
:is(#settings-overlay, #home-settings-container) .toggle-switch input:checked + .toggle-slider::before { background: oklch(0.19 0.02 240); transform: translateX(16px); }
:is(#settings-overlay, #home-settings-container) .toggle-switch input:focus-visible + .toggle-slider { outline: 2px solid var(--sl-focus); outline-offset: 2px; }
:is(#settings-overlay, #home-settings-container) .sfr-title { font-size: 13px; font-weight: 600; color: var(--sl-text-1); }
:is(#settings-overlay, #home-settings-container) .sfr-desc { font-size: 12px; line-height: 1.5; color: var(--sl-text-2); }

/* chip groups → segmented (2-4) / toggle look; the active option is grey */
:is(#settings-overlay, #home-settings-container) .setting-chip-row {
    display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; box-sizing: border-box;
    background: var(--sl-panel); border: 1px solid var(--sl-hairline); border-radius: 9px;
}
:is(#settings-overlay, #home-settings-container) .setting-chip {
    height: 26px; padding: 0 10px; border: none; border-radius: var(--sl-r-6);
    background: transparent; color: oklch(0.62 0.005 250); font-family: var(--sl-font-ui); font-size: 12px; font-weight: 600;
}
:is(#settings-overlay, #home-settings-container) .setting-chip:hover { color: var(--sl-text-1); border: none; }
:is(#settings-overlay, #home-settings-container) .setting-chip.active { background: var(--sl-segment-on); color: var(--sl-text-1); border: none; }

/* sliders: mono read-out */
:is(#settings-overlay, #home-settings-container) .setting-slider-val { font-family: var(--sl-font-mono); font-size: 11px; color: var(--sl-text-1); }
:is(#settings-overlay, #home-settings-container) .setting-range-ticks { font-family: var(--sl-font-mono); font-size: 11px; color: var(--sl-text-3); }
:is(#settings-overlay, #home-settings-container) .setting-range,
:is(#settings-overlay, #home-settings-container) .setting-input-row input[type="range"] { accent-color: var(--sl-accent); }

/* counts are plain mono, never a pill */
:is(#settings-overlay, #home-settings-container) .key-count-badge {
    background: none; padding: 0; margin-left: 6px; border-radius: 0;
    font-family: var(--sl-font-mono); font-size: 11px; font-weight: 500; color: var(--sl-text-3); letter-spacing: 0;
}
:is(#settings-overlay, #home-settings-container) .setting-cost-display {
    background: none; border: none; padding: 0; font-family: var(--sl-font-mono); font-size: 12px !important; color: var(--sl-text-2);
}

/* callouts + guides: quiet cards; status colour only on the heading dot + text */
:is(#settings-overlay, #home-settings-container) .setting-callout,
:is(#settings-overlay, #home-settings-container) .setting-callout-success,
:is(#settings-overlay, #home-settings-container) .setting-callout-info,
:is(#settings-overlay, #home-settings-container) .api-setup-guide,
:is(#settings-overlay, #home-settings-container) .api-setup-credit,
:is(#settings-overlay, #home-settings-container) .setting-subsection {
    background: var(--sl-card); border: 1px solid var(--sl-hairline); border-radius: var(--sl-r-12);
}
:is(#settings-overlay, #home-settings-container) .setting-callout-title { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--sl-text-1); }
:is(#settings-overlay, #home-settings-container) .setting-callout-title::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sl-text-3); flex: none; }
:is(#settings-overlay, #home-settings-container) .setting-callout-success .setting-callout-title { color: var(--sl-success); }
:is(#settings-overlay, #home-settings-container) .setting-callout-success .setting-callout-title::before { background: var(--sl-success); }
:is(#settings-overlay, #home-settings-container) .setting-callout-info .setting-callout-title { color: var(--sl-link); }
:is(#settings-overlay, #home-settings-container) .setting-callout-info .setting-callout-title::before { background: var(--sl-link); }
:is(#settings-overlay, #home-settings-container) .api-setup-title { font-family: var(--sl-font-mono); font-size: 9.5px; font-weight: 600; letter-spacing: 0.12em; color: var(--sl-text-2); }
:is(#settings-overlay, #home-settings-container) .api-setup-title svg { color: var(--sl-text-3); }
:is(#settings-overlay, #home-settings-container) .api-setup-steps li { font-size: 12.5px; color: var(--sl-text-2); border-left-color: var(--sl-hairline); }
:is(#settings-overlay, #home-settings-container) .api-setup-steps li::before { background: var(--sl-quiet); border: 1px solid var(--sl-hairline); color: var(--sl-text-2); font-weight: 600; }
:is(#settings-overlay, #home-settings-container) .api-setup-steps li a { color: var(--sl-link); }
:is(#settings-overlay, #home-settings-container) .api-setup-credit { color: var(--sl-text-2); font-size: 12px; }
:is(#settings-overlay, #home-settings-container) .api-setup-credit strong { color: var(--sl-success); }
:is(#settings-overlay, #home-settings-container) .api-setup-credit svg { color: var(--sl-success); }

/* cards inside tabs */
:is(#settings-overlay, #home-settings-container) .setting-color-grid,
:is(#settings-overlay, #home-settings-container) .setting-link-colors-row,
:is(#settings-overlay, #home-settings-container) .gdrive-account-row,
:is(#settings-overlay, #home-settings-container) .gdrive-folder-row { background: var(--sl-card); border-color: var(--sl-hairline); border-radius: var(--sl-r-12); }
:is(#settings-overlay, #home-settings-container) .setting-color-row { background: var(--sl-panel); border-color: var(--sl-hairline); border-radius: var(--sl-r-8); }

/* unsaved-changes: dot + text */
:is(#settings-overlay, #home-settings-container) .settings-dirty { font-size: 12px; font-weight: 600; color: var(--sl-warning); }
:is(#settings-overlay, #home-settings-container) .settings-dirty .sd-dot { width: 6px; height: 6px; background: var(--sl-warning); }

/* ---- Usage tab (GitHub commit style activity) ---- */
.pw-usage-account-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 18px;
    margin-bottom: 16px;
    border-radius: var(--sl-r-md, 11px);
    border: 1px solid var(--sl-line-2, rgba(255, 255, 255, 0.07));
    background: var(--sl-bg-card, oklch(0.2 0.006 250));
    box-shadow: var(--sl-shadow-card, 0 4px 12px rgba(0, 0, 0, 0.25));
}
.pw-usage-account-left {
    display: flex;
    align-items: center;
    gap: 12px;
}
.pw-usage-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6, #10b981);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 14px;
    flex: none;
}
.pw-usage-account-name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--sl-text-hi, #f4f4f5);
}
.pw-usage-account-sub {
    font-size: 11.5px;
    color: var(--sl-text-dim, #a1a1aa);
    margin-top: 2px;
}
.pw-usage-account-right {
    display: flex;
    align-items: center;
    gap: 10px;
}
.pw-usage-sync-tag {
    font-size: 11px;
    font-weight: 600;
    color: var(--sl-green-text, #4ade80);
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(74, 222, 128, 0.12);
    border: 1px solid rgba(74, 222, 128, 0.3);
}
.pw-usage-cta-btn {
    padding: 6px 14px;
    font-weight: 600;
    background: var(--accent, #3b82f6);
    color: #fff;
    border: none;
    border-radius: 7px;
    cursor: pointer;
}

/* Stats grid */
.pw-usage-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}
.pw-usage-stat-card {
    padding: 12px 14px;
    border-radius: var(--sl-r-sm, 8px);
    border: 1px solid var(--sl-line-2, rgba(255, 255, 255, 0.07));
    background: var(--sl-bg-card, oklch(0.2 0.006 250));
}
.pw-usage-stat-label {
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--sl-text-dim, #a1a1aa);
    margin-bottom: 4px;
}
.pw-usage-stat-val {
    font-size: 22px;
    font-weight: 700;
    color: var(--sl-text-1);
    font-family: var(--sl-font-mono);
}
.pw-usage-stat-sub {
    font-size: 10.5px;
    color: var(--sl-text-dim, #a1a1aa);
    margin-top: 3px;
}

/* Heatmap Card */
.pw-usage-heatmap-card {
    padding: 16px 20px;
    border-radius: var(--sl-r-lg, 14px);
    border: 1px solid var(--sl-line-2, rgba(255, 255, 255, 0.07));
    background: var(--sl-bg-card, oklch(0.2 0.006 250));
    box-shadow: var(--sl-shadow-card, 0 4px 12px rgba(0, 0, 0, 0.2));
    margin-bottom: 18px;
}
.pw-usage-heatmap-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.pw-usage-heatmap-title {
    font-size: 14px;
    font-weight: 700;
    margin: 0;
    color: var(--sl-text-hi, #f4f4f5);
}
.pw-usage-heatmap-sub {
    font-size: 11.5px;
    color: var(--sl-text-dim, #a1a1aa);
    margin: 2px 0 0;
}
.pw-usage-chips {
    display: flex;
    gap: 6px;
}
.pw-usage-scroll {
    overflow-x: auto;
    padding-bottom: 6px;
}
.pw-usage-grid-layout {
    display: flex;
    flex-direction: column;
    width: max-content;
    min-width: 100%;
}
.pw-usage-month-row {
    display: flex;
    align-items: center;
    height: 16px;
    margin-bottom: 5px;
}
.pw-usage-month-spacer {
    width: 28px;
    flex: none;
}
.pw-usage-months-wrap {
    display: grid;
    gap: 3px;
}
.pw-usage-month-label {
    font-size: 9.5px;
    color: var(--sl-text-dim, #a1a1aa);
    font-weight: 500;
    white-space: nowrap;
}
.pw-usage-body-row {
    display: flex;
    align-items: flex-start;
}
.pw-usage-weekday-col {
    display: grid;
    grid-template-rows: repeat(7, 12px);
    gap: 3px;
    width: 28px;
    flex: none;
}
.pw-usage-weekday-label {
    font-size: 9px;
    color: var(--sl-text-dim, #a1a1aa);
    line-height: 12px;
    font-weight: 500;
}
.pw-usage-squares-grid {
    display: grid;
    gap: 3px;
}
.pw-usage-week-col {
    display: grid;
    grid-template-rows: repeat(7, 12px);
    gap: 3px;
}
.pw-usage-square {
    width: 12px;
    height: 12px;
    border-radius: 2.5px;
    box-sizing: border-box;
    transition: transform 0.1s ease, border-color 0.1s ease;
    cursor: pointer;
}
.pw-usage-square:hover:not(.future) {
    transform: scale(1.25);
    z-index: 5;
    outline: 1.5px solid #fff;
    outline-offset: 1px;
}
.pw-usage-square.future {
    opacity: 0.15;
    cursor: default;
}
.pw-usage-square.lvl-0 {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.04);
}
.pw-usage-square.lvl-1 {
    background: rgba(74, 222, 128, 0.25);
    border: 1px solid rgba(74, 222, 128, 0.35);
}
.pw-usage-square.lvl-2 {
    background: rgba(74, 222, 128, 0.50);
    border: 1px solid rgba(74, 222, 128, 0.65);
}
.pw-usage-square.lvl-3 {
    background: rgba(74, 222, 128, 0.75);
    border: 1px solid rgba(74, 222, 128, 0.85);
}
.pw-usage-square.lvl-4 {
    background: #4ade80;
    border: 1px solid #86efac;
    box-shadow: 0 0 6px rgba(74, 222, 128, 0.4);
}
.pw-usage-heatmap-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    flex-wrap: wrap;
}
.pw-usage-legend {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}
.pw-usage-legend-text {
    font-size: 10px;
    color: var(--sl-text-dim, #a1a1aa);
}

/* Tooltip */
.pw-usage-tooltip {
    display: none;
    position: fixed;
    transform: translate(-50%, -100%);
    background: rgba(15, 18, 26, 0.96);
    color: #f4f4f5;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 11px;
    line-height: 1.4;
    pointer-events: none;
    z-index: 10300;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
    white-space: nowrap;
    text-align: center;
}
.pw-usage-tooltip strong {
    color: #fff;
    font-weight: 600;
}
.pw-tip-breakdown {
    color: #a1a1aa;
    font-size: 10px;
}

/* Recent Activity Card */
.pw-usage-activity-card {
    padding: 16px 20px;
    border-radius: var(--sl-r-lg, 14px);
    border: 1px solid var(--sl-line-2, rgba(255, 255, 255, 0.07));
    background: var(--sl-bg-card, oklch(0.2 0.006 250));
    margin-bottom: 20px;
}
.pw-usage-activity-title {
    font-size: 13px;
    font-weight: 700;
    margin: 0 0 12px;
    color: var(--sl-text-hi, #f4f4f5);
}
.pw-usage-activity-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pw-usage-activity-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.04);
    font-size: 12px;
}
.pw-usage-act-date {
    width: 140px;
    color: var(--sl-text-hi, #f4f4f5);
    font-weight: 500;
    flex: none;
}
.pw-usage-act-bar-wrap {
    flex: 1;
    display: flex;
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
    gap: 1px;
}
.pw-usage-act-bar.img {
    background: #38bdf8;
    height: 100%;
}
.pw-usage-act-bar.vid {
    background: #a855f7;
    height: 100%;
}
.pw-usage-act-breakdown {
    width: 110px;
    font-size: 11px;
    color: var(--sl-text-dim, #a1a1aa);
    text-align: right;
    flex: none;
}
.pw-usage-act-count {
    width: 110px;
    font-weight: 600;
    color: var(--sl-text-hi, #f4f4f5);
    text-align: right;
    flex: none;
}

/* ── Web-to-Desktop Trampoline Overlay ── */
.pw-trampoline-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgba(10, 12, 16, 0.85);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.pw-trampoline-card {
    background: #18191f;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
    border-radius: 12px;
    max-width: 440px;
    width: 100%;
    padding: 28px;
    text-align: center;
    color: #e4e4e7;
    font-family: var(--font-sans, system-ui, sans-serif);
}
.pw-trampoline-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(56, 189, 248, 0.12);
    color: #38bdf8;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}
.pw-trampoline-card h3 {
    margin: 0 0 8px;
    font-size: 19px;
    font-weight: 600;
    color: #ffffff;
}
.pw-trampoline-body {
    font-size: 13.5px;
    line-height: 1.5;
    color: #a1a1aa;
    margin: 0 0 24px;
}
.pw-trampoline-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-bottom: 20px;
}
.pw-trampoline-actions a,
.pw-trampoline-actions button {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
}
.pw-trampoline-btn-primary {
    background: #38bdf8;
    color: #09090b !important;
    font-weight: 600 !important;
}
.pw-trampoline-btn-primary:hover {
    background: #7dd3fc;
}
.pw-trampoline-btn-secondary {
    background: rgba(255, 255, 255, 0.08);
    color: #e4e4e7 !important;
    border: 1px solid rgba(255, 255, 255, 0.12);
}
.pw-trampoline-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.14);
}
.pw-trampoline-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 16px;
}
.pw-trampoline-web-link {
    background: none;
    border: none;
    color: #71717a;
    font-size: 12.5px;
    cursor: pointer;
    text-decoration: underline;
    transition: color 0.15s;
}
.pw-trampoline-web-link:hover {
    color: #d4d4d8;
}
/* Link handoff card (DuctedApp._openLinkPreferApp): while it is still "opening"
   there is nothing to retry yet, so the app actions stay hidden. */
.pw-trampoline-overlay[data-state="opening"] .pw-trampoline-actions {
    display: none;
}
.pw-trampoline-actions button {
    font-family: inherit;
}
.pw-trampoline-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    justify-content: center;
}

/* Import → From link… */
.pw-import-link-dialog {
    width: min(460px, calc(100vw - 32px));
    text-align: left;
}
.pw-import-link-title {
    margin: 0 0 6px;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
}
.pw-import-link-hint {
    margin: 0 0 14px;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-secondary);
}
.pw-import-link-input {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 11px;
    border-radius: 6px;
    border: 1px solid #3f3f46;
    background: #111114;
    color: #e4e4e7;
    font: 13px var(--font-mono, ui-monospace, monospace);
}
.pw-import-link-input:focus {
    outline: none;
    border-color: #52525b;
}
.pw-import-link-error {
    min-height: 18px;
    margin: 6px 0 4px;
    font-size: 12px;
    color: #f87171;
}