.director-section { margin-bottom: 20px; }
    .director-section h4 { color: #667eea; margin: 0 0 10px; font-size: 14px; border-bottom: 1px solid #333; padding-bottom: 6px; }
    .director-ratings { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin-bottom: 16px; }
    .director-rating-item { background: #252540; padding: 10px; border-radius: 8px; }
    .director-rating-item .label { font-size: 11px; color: #888; }
    .director-rating-item .stars { color: #ffd700; font-size: 14px; }
    .director-scenes { display: grid; gap: 10px; }
    .director-scene-card { background: #252540; padding: 12px; border-radius: 8px; border-left: 3px solid #667eea; }
    .director-scene-header { display: flex; justify-content: space-between; margin-bottom: 8px; }
    .director-scene-id { color: #667eea; font-weight: bold; }
    .director-scene-meta { font-size: 11px; color: #888; }
    .director-scene-desc { font-size: 13px; margin-bottom: 6px; }
    .director-camera { display: inline-block; background: #3a3a5a; padding: 2px 8px; border-radius: 4px; font-size: 11px; margin-right: 4px; }
    .director-characters { display: flex; flex-wrap: wrap; gap: 8px; }
    .director-char-tag { background: #3a3a5a; padding: 6px 12px; border-radius: 20px; font-size: 12px; }
    .director-audio-tags { display: flex; flex-wrap: wrap; gap: 6px; }
    .director-tag { background: #3a3a5a; padding: 4px 10px; border-radius: 4px; font-size: 11px; }
    .director-suggestions li { margin-bottom: 6px; color: #ffa07a; font-size: 13px; }
    .btn { padding: 8px 16px; border-radius: 6px; border: none; cursor: pointer; font-size: 13px; }
    .btn-primary { background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; }
    .btn-secondary { background: #333; color: #e0e0e0; }
    .btn-danger { background: #dc3545; color: #fff; }
    .director-timeline {
        position: relative;
        margin: 16px 0;
        padding-left: 0;
    }
    .director-timeline-item {
        position: relative;
        padding: 12px 16px 12px 0;
        border-left: 2px solid #667eea;
        margin-left: 8px;
    }
    .director-timeline-item::before {
        content: '';
        position: absolute;
        left: -5px;
        top: 16px;
        width: 8px;
        height: 8px;
        background: #667eea;
        border-radius: 50%;
    }
    .director-timeline-time {
        font-size: 11px;
        color: #ffd700;
        font-weight: 600;
        margin-bottom: 4px;
    }
    .director-timeline-content {
        background: #252540;
        border-radius: 8px;
        padding: 10px 12px;
    }
    .director-timeline-shot {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        margin-bottom: 6px;
    }
    .director-timeline-shot-num {
        background: #667eea;
        color: #fff;
        padding: 2px 6px;
        border-radius: 4px;
        font-size: 10px;
        font-weight: 600;
        min-width: 40px;
        text-align: center;
    }
    .director-timeline-dialogue {
        background: #1a1a2e;
        border-left: 3px solid #4ecdc4;
        padding: 6px 10px;
        margin: 6px 0;
        border-radius: 0 6px 6px 0;
    }
    .director-timeline-music {
        background: linear-gradient(90deg, #ff9f4320, transparent);
        padding: 4px 10px;
        border-radius: 4px;
        font-size: 11px;
        color: #ff9f43;
        margin-top: 6px;
    }
    .director-timeline-camera {
        display: inline-flex;
        gap: 4px;
        margin-top: 6px;
    }
    .director-timeline-summary {
        background: linear-gradient(135deg, #667eea20, #764ba220);
        border: 1px solid #667eea40;
        border-radius: 8px;
        padding: 12px 16px;
        margin-bottom: 16px;
    }
    .director-timeline-summary h4 {
        color: #ffd700;
        margin: 0 0 8px;
        font-size: 13px;
    }
    .director-timeline-summary .stats {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        font-size: 12px;
    }
    .director-timeline-summary .stat {
        display: flex;
        align-items: center;
        gap: 4px;
    }
    .director-timeline-summary .stat-value {
        color: #fff;
        font-weight: 600;
    }
    .director-script-dropzone {
        position: relative;
        transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    }
    .director-script-dropzone.drag-doc {
        border-color: rgba(78, 205, 196, 0.75) !important;
        background: rgba(78, 205, 196, 0.1) !important;
        box-shadow: 0 18px 45px rgba(78, 205, 196, 0.18);
    }
    .director-script-dropzone.drag-doc::after {
        content: '松手导入剧本文件';
        position: absolute;
        inset: 50px 18px 58px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px dashed rgba(78, 205, 196, 0.78);
        border-radius: 8px;
        background: rgba(8, 14, 24, 0.84);
        color: #7ff4e8;
        font-size: 15px;
        font-weight: 800;
        letter-spacing: 1px;
        pointer-events: none;
        backdrop-filter: blur(8px);
    }
    .director-file-importing {
        align-items: center;
        justify-content: center;
        margin-top: 8px;
        min-height: 34px;
        border-radius: 8px;
        background: rgba(102, 126, 234, 0.16);
        color: #dfe7ff;
        font-size: 12px;
        font-weight: 700;
    }
    .director-style-panel {
        background: rgba(255, 255, 255, 0.82);
        border: 1px solid rgba(16, 19, 24, 0.08);
        border-radius: 12px;
        padding: 10px;
        box-shadow: 0 12px 28px rgba(16, 19, 24, 0.05);
    }
    .director-style-topline {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) 52px;
        gap: 8px;
        align-items: center;
    }
    .director-style-eyebrow {
        color: rgba(16, 19, 24, 0.54);
        font-size: 11px;
        font-weight: 900;
        line-height: 1;
        white-space: nowrap;
    }
    .director-style-select,
    .director-style-custom {
        width: 100%;
        box-sizing: border-box;
        background: rgba(255, 255, 255, 0.96);
        border: 1px solid rgba(16, 19, 24, 0.12);
        border-radius: 8px;
        color: var(--ark-ink, #101318);
        font-size: 12px;
        outline: none;
    }
    .director-style-select {
        height: 32px;
        padding: 0 8px;
    }
    .director-style-chips {
        display: flex;
        gap: 5px;
        overflow-x: auto;
        padding: 7px 0 0;
        scrollbar-width: none;
    }
    .director-style-chips::-webkit-scrollbar {
        display: none;
    }
    .director-style-chip {
        flex: 0 0 auto;
        border: 1px solid rgba(16, 19, 24, 0.1);
        background: rgba(255, 255, 255, 0.78);
        color: rgba(16, 19, 24, 0.68);
        border-radius: 7px;
        padding: 4px 7px;
        font-size: 11px;
        font-weight: 800;
        cursor: pointer;
        transition: background 0.16s ease, color 0.16s ease, transform 0.16s ease;
    }
    .director-style-chip:hover {
        transform: translateY(-1px);
        color: var(--ark-ink, #101318);
    }
    .director-style-chip.active {
        background: var(--ark-ink, #101318);
        color: #fff;
        border-color: var(--ark-ink, #101318);
    }
    .director-style-more {
        border: 1px solid rgba(10, 163, 132, 0.16);
        background: #eef8f5;
        color: var(--ark-mint, #0aa384);
        border-radius: 7px;
        padding: 0 8px;
        height: 32px;
        font-size: 11px;
        font-weight: 800;
        cursor: pointer;
        text-align: center;
    }
    .director-style-advanced {
        position: fixed;
        inset: 0;
        z-index: 10000;
        align-items: center;
        justify-content: center;
        background: rgba(16, 19, 24, 0.26);
        backdrop-filter: blur(6px);
        padding: 20px;
    }
    .director-style-advanced.show {
        display: flex;
    }
    .director-style-advanced-card {
        width: min(520px, 92vw);
        background: rgba(255, 255, 255, 0.96);
        border: 1px solid rgba(16, 19, 24, 0.1);
        border-radius: 8px;
        padding: 14px;
        box-shadow: 0 28px 90px rgba(16, 19, 24, 0.24);
    }
    .director-style-advanced-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 10px;
    }
    .director-style-advanced-head strong {
        display: block;
        color: var(--ark-ink, #101318);
        font-size: 15px;
        margin-bottom: 4px;
    }
    .director-style-advanced-head span {
        display: block;
        color: var(--ark-muted, #6b7280);
        font-size: 12px;
    }
    .director-style-advanced-head button {
        border: 1px solid rgba(16, 19, 24, 0.1);
        background: #fff;
        color: var(--ark-ink, #101318);
        border-radius: 7px;
        padding: 6px 10px;
        font-size: 12px;
        font-weight: 800;
        cursor: pointer;
    }
    .director-style-custom {
        min-height: 96px;
        resize: vertical;
        padding: 10px;
        line-height: 1.5;
        font-family: inherit;
    }
    .director-style-hint {
        margin-top: 8px;
        color: var(--ark-muted, #6b7280);
        font-size: 11px;
        line-height: 1.55;
        padding: 8px 10px;
        border-radius: 8px;
        background: #f7fbfa;
        border: 1px solid rgba(10, 163, 132, 0.12);
    }
    .director-ai-prompts {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-top: 12px;
    }
    .director-ai-prompt-card,
    .director-ai-negative {
        background: linear-gradient(135deg, rgba(10, 14, 24, 0.94), rgba(23, 28, 44, 0.9));
        border: 1px solid rgba(102, 126, 234, 0.28);
        border-radius: 8px;
        padding: 10px 12px;
        box-shadow: 0 14px 30px rgba(0, 0, 0, 0.24);
    }
    .director-ai-prompt-image {
        border-color: rgba(78, 205, 196, 0.38);
    }
    .director-ai-prompt-video {
        border-color: rgba(255, 159, 67, 0.38);
    }
    .director-ai-prompt-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 8px;
        color: #fff;
        font-size: 12px;
        font-weight: 800;
    }
    .director-ai-prompt-actions {
        display: flex;
        gap: 6px;
        flex-shrink: 0;
    }
    .director-ai-prompt-actions button,
    .director-ai-negative button {
        border: 1px solid rgba(255, 255, 255, 0.16);
        background: rgba(255, 255, 255, 0.08);
        color: #f8fbff;
        border-radius: 6px;
        padding: 4px 8px;
        font-size: 11px;
        cursor: pointer;
        transition: transform 0.16s ease, background 0.16s ease;
    }
    .director-ai-prompt-actions button:hover,
    .director-ai-negative button:hover {
        transform: translateY(-1px);
        background: rgba(102, 126, 234, 0.26);
    }
    .director-ai-prompt-text {
        color: rgba(235, 242, 255, 0.88);
        font-size: 12px;
        line-height: 1.65;
        max-height: 116px;
        overflow: auto;
        white-space: pre-wrap;
    }
    .director-ai-negative {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: auto auto 1fr;
        align-items: center;
        gap: 8px;
        color: rgba(235, 242, 255, 0.72);
        font-size: 11px;
    }
    .director-ai-negative span {
        color: #ff9f43;
        font-weight: 700;
    }
    #directorReportBody .director-ai-prompt-card,
    #directorReportBody .director-ai-negative,
    #wfDirectorBody .director-ai-prompt-card,
    #wfDirectorBody .director-ai-negative {
        background: linear-gradient(135deg, rgba(8, 12, 22, 0.98), rgba(20, 26, 42, 0.96)) !important;
        color: rgba(245, 248, 255, 0.94) !important;
        border-color: rgba(102, 126, 234, 0.35) !important;
        box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22) !important;
    }
    #directorReportBody .director-ai-prompt-head,
    #wfDirectorBody .director-ai-prompt-head {
        color: #fff !important;
    }
    #directorReportBody .director-ai-prompt-text,
    #directorReportBody .director-ai-negative div,
    #wfDirectorBody .director-ai-prompt-text,
    #wfDirectorBody .director-ai-negative div {
        color: rgba(245, 248, 255, 0.9) !important;
    }
    .director-shot-video-btn {
        background: linear-gradient(135deg, #00d4aa, #667eea) !important;
        border-color: rgba(255, 255, 255, 0.22) !important;
        color: #fff !important;
        font-weight: 800;
    }

/* 图生视频：减少卡片套卡片，只保留必要的输入控件和一层预览画布。 */
body.ui-polished-creator #img2video-panel {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

body.ui-polished-creator #img2video-panel .t2i-layout {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 18px 24px 20px !important;
    gap: 24px !important;
}

body.ui-polished-creator #img2video-panel .t2i-left,
body.ui-polished-creator #img2video-panel .t2i-right {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

body.ui-polished-creator #img2video-panel .t2i-left::after {
    margin-top: 18px !important;
    padding: 8px 2px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body.ui-polished-creator #img2video-panel .t2i-image-container {
    border-radius: 8px !important;
    border: 1px solid rgba(15,23,42,0.08) !important;
    box-shadow: none !important;
}

body.ui-polished-creator #img2video-panel .ark-empty-stage-image-video {
    width: min(520px, 78%) !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body.ui-polished-creator #img2video-panel .ark-empty-cinema.from-image {
    width: min(330px, 88%) !important;
    padding: 10px !important;
    background: rgba(16,19,24,0.10) !important;
    border-color: rgba(16,19,24,0.08) !important;
    box-shadow: none !important;
}

body.ui-polished-creator #img2video-panel .ark-empty-screen {
    height: 160px !important;
}

body.ui-polished-creator.ark-night #img2video-panel .t2i-image-container {
    border-color: rgba(255,255,255,0.10) !important;
    background:
        linear-gradient(90deg, rgba(238,242,255,0.035) 1px, transparent 1px),
        linear-gradient(180deg, rgba(238,242,255,0.03) 1px, transparent 1px),
        linear-gradient(135deg, rgba(7,9,15,0.94), rgba(10,13,22,0.92)) !important;
    background-size: 42px 42px, 42px 42px, auto !important;
    box-shadow: none !important;
}

body.ui-polished-creator.ark-night #img2video-panel .t2i-left::after {
    color: rgba(226,232,246,0.66) !important;
}

body.ui-polished-creator.ark-night #img2video-panel .ark-empty-cinema.from-image {
    background: rgba(10,13,22,0.42) !important;
    border-color: rgba(255,255,255,0.10) !important;
}

/* Workflow director report modal: keep hidden until analysis opens it */
#wfDirectorModal.director-modal {
    position: fixed;
    inset: 0;
    z-index: 10020;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 28px;
    background: rgba(7, 10, 18, 0.72);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

#wfDirectorModal.director-modal.show {
    display: flex;
}

#wfDirectorModal .director-modal-content {
    width: min(1080px, 94vw);
    max-height: min(820px, 88vh);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 18px;
    background: #ffffff;
    color: #111827;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.32);
}

#wfDirectorModal .director-modal-header,
#wfDirectorModal .director-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.10);
}

#wfDirectorModal .director-modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 900;
}

#wfDirectorModal .director-modal-close {
    width: 34px;
    height: 34px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.04);
    color: #334155;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

#wfDirectorModal .director-modal-close:hover {
    background: rgba(15, 23, 42, 0.08);
    color: #0f172a;
}

#wfDirectorModal .director-modal-body {
    flex: 1;
    min-height: 260px;
    overflow: auto;
    padding: 20px;
}

#wfDirectorModal .director-modal-footer {
    justify-content: flex-end;
    border-top: 1px solid rgba(15, 23, 42, 0.10);
    border-bottom: 0;
}

body.ark-night #wfDirectorModal .director-modal-content,
body.ui-polished-creator.ark-night #wfDirectorModal .director-modal-content {
    background: #0d111a;
    color: #f8fafc;
    border-color: rgba(226, 232, 240, 0.14);
}

body.ark-night #wfDirectorModal .director-modal-header,
body.ark-night #wfDirectorModal .director-modal-footer,
body.ui-polished-creator.ark-night #wfDirectorModal .director-modal-header,
body.ui-polished-creator.ark-night #wfDirectorModal .director-modal-footer {
    border-color: rgba(226, 232, 240, 0.12);
}

body.ark-night #wfDirectorModal .director-modal-close,
body.ui-polished-creator.ark-night #wfDirectorModal .director-modal-close {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.14);
    color: rgba(248, 250, 252, 0.82);
}

/* Final alignment pass: these creator tabs should move as one grid, not as a sticky preview beside a scrolling form. */
body.ui-polished-creator :is(#text2img-panel, #img2img-panel, #text2video-panel, #img2video-panel) .t2i-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 520px) minmax(360px, 1fr) !important;
    align-items: stretch !important;
    gap: clamp(24px, 2.4vw, 32px) !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

body.ui-polished-creator :is(#text2img-panel, #img2img-panel, #text2video-panel, #img2video-panel) .t2i-left,
body.ui-polished-creator :is(#text2img-panel, #img2img-panel, #text2video-panel, #img2video-panel) .t2i-right {
    align-self: stretch !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

body.ui-polished-creator :is(#text2img-panel, #img2img-panel, #text2video-panel, #img2video-panel) .t2i-left {
    display: flex !important;
    flex-direction: column !important;
    padding-bottom: 0 !important;
}

body.ui-polished-creator :is(#text2img-panel, #img2img-panel, #text2video-panel, #img2video-panel) .t2i-actions {
    margin-top: auto !important;
}

body.ui-polished-creator :is(#text2img-panel, #img2img-panel, #text2video-panel, #img2video-panel) .t2i-right,
body.ui-polished-creator.day :is(#text2img-panel, #img2img-panel, #text2video-panel, #img2video-panel) .t2i-right,
body.ui-polished-creator.ark-night :is(#text2img-panel, #img2img-panel, #text2video-panel, #img2video-panel) .t2i-right {
    position: relative !important;
    top: auto !important;
    min-height: 0 !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
}

body.ui-polished-creator :is(#text2img-panel, #img2img-panel, #text2video-panel, #img2video-panel) .t2i-image-container,
body.ui-polished-creator.day :is(#text2img-panel, #img2img-panel, #text2video-panel, #img2video-panel) .t2i-image-container,
body.ui-polished-creator.ark-night :is(#text2img-panel, #img2img-panel, #text2video-panel, #img2video-panel) .t2i-image-container {
    flex: 1 1 auto !important;
    min-height: 0 !important;
}

body.ui-polished-creator :is(#text2img-panel, #text2video-panel) .t2i-right {
    margin-top: 60px !important;
}

body.ui-polished-creator :is(#img2img-panel, #img2video-panel) .t2i-right {
    margin-top: 28px !important;
}

body.ui-polished-creator #img2video-panel .t2i-right {
    margin-top: 0 !important;
}

body.ui-polished-creator :is(#text2img-panel, #text2video-panel) .t2i-layout {
    padding-top: 0 !important;
}

body.ui-polished-creator.day :is(#text2img-panel, #text2video-panel) .t2i-layout,
body.ui-polished-creator.ark-night :is(#text2img-panel, #text2video-panel) .t2i-layout {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body.ui-polished-creator[data-active-tab="text2img"] .top-bar,
body.ui-polished-creator[data-active-tab="text2video"] .top-bar {
    margin-bottom: 0 !important;
}

body.ui-polished-creator :is(#text2img-panel, #text2video-panel) .t2i-left {
    padding-top: 22px !important;
}

body.ui-polished-creator :is(#text2img-panel, #text2video-panel) .t2i-left > .t2i-form-group:has(> .t2i-textarea) {
    margin-top: 0 !important;
}

body.ui-polished-creator :is(#text2img-panel, #text2video-panel) .t2i-right {
    margin-top: 0 !important;
}

@media (max-width: 1180px) {
    body.ui-polished-creator :is(#text2img-panel, #img2img-panel, #text2video-panel, #img2video-panel) .t2i-layout {
        grid-template-columns: 1fr !important;
    }
}

body.ui-polished-creator .main-content {
    overflow-x: clip !important;
}
/* One-click ad generator */
body.ui-polished-creator #ad-panel {
    padding: 0 0 32px !important;
    color: var(--mt-ink);
}

body.ui-polished-creator #ad-panel .ad-kicker {
    font-family: 'Manrope', 'Noto Sans SC', sans-serif;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--mt-soft);
}

body.ui-polished-creator #ad-panel .ad-kicker::before {
    content: "·  ·  ·   ";
}

body.ui-polished-creator #ad-panel .ad-shell {
    display: grid;
    grid-template-columns: minmax(400px, 0.9fr) minmax(520px, 1.1fr);
    gap: 18px;
    align-items: start;
}

body.ui-polished-creator #ad-panel .ad-control,
body.ui-polished-creator #ad-panel .ad-preview,
body.ui-polished-creator #ad-panel .ad-gallery {
    border-radius: var(--mt-radius);
    box-shadow: var(--mt-shadow-sm);
    overflow: hidden;
}

body.ui-polished-creator #ad-panel .ad-control {
    background: var(--mt-paper);
    border: 1px solid var(--mt-line);
}

body.ui-polished-creator #ad-panel .ad-preview {
    position: sticky;
    top: 24px;
    min-height: 720px;
    background: #0c0c12;
    border: 1px solid #1a1a22;
    color: #fff;
    box-shadow: 0 24px 60px -24px rgba(12,12,18,.45);
}

body.ui-polished-creator #ad-panel .ad-gallery {
    margin-top: 18px;
    padding: 18px;
    background: var(--mt-paper);
    border: 1px solid var(--mt-line);
}

body.ui-polished-creator #ad-panel .ad-head,
body.ui-polished-creator #ad-panel .ad-preview-head,
body.ui-polished-creator #ad-panel .ad-gallery-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--mt-line);
}

body.ui-polished-creator #ad-panel .ad-head h3,
body.ui-polished-creator #ad-panel .ad-preview-head h3,
body.ui-polished-creator #ad-panel .ad-gallery-head h3 {
    margin: 0;
    color: var(--mt-ink);
    font-family: 'Noto Serif SC', serif;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0;
}

body.ui-polished-creator #ad-panel .ad-preview-head {
    border-bottom-color: rgba(255,255,255,.07);
}

body.ui-polished-creator #ad-panel .ad-preview .ad-kicker {
    color: rgba(255,255,255,.46);
}

body.ui-polished-creator #ad-panel .ad-preview-head h3,
body.ui-polished-creator #ad-panel .ad-preview .ad-stage-top {
    color: #fff;
}

body.ui-polished-creator #ad-panel .ad-preview-head h3 {
    color: #fff;
    font-size: 18px;
}

body.ui-polished-creator #ad-panel .ad-gallery-head h3 {
    font-size: 18px;
}

body.ui-polished-creator #ad-panel .ad-status-pill {
    min-width: 84px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(91,71,251,.22);
    background: var(--mt-accent-soft);
    color: var(--mt-accent-3);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

body.ui-polished-creator #ad-panel .ad-control-body {
    padding: 18px 20px 20px;
}

body.ui-polished-creator #ad-panel .ad-step-block {
    padding: 0 0 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--mt-line);
}

body.ui-polished-creator #ad-panel .ad-step-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    color: var(--mt-ink);
    font-size: 13px;
    font-weight: 800;
}

body.ui-polished-creator #ad-panel .ad-step-title span {
    min-width: 30px;
    height: 24px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--mt-accent);
    background: var(--mt-accent-soft);
    font-family: 'Manrope', sans-serif;
    font-size: 11px;
    font-weight: 800;
}

body.ui-polished-creator #ad-panel .ad-goal-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 10px;
}

body.ui-polished-creator #ad-panel .ad-goal {
    min-height: 54px;
    padding: 10px 12px;
    border: 1px solid var(--mt-line-2);
    border-radius: 12px;
    background: #fff;
    color: var(--mt-ink);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
    text-align: left;
    transition: border-color .18s ease, background .18s ease, transform .18s ease, color .18s ease;
}

body.ui-polished-creator #ad-panel .ad-goal strong {
    font-size: 13px;
    line-height: 1.2;
}

body.ui-polished-creator #ad-panel .ad-goal span {
    color: var(--mt-soft);
    font-size: 11.5px;
}

body.ui-polished-creator #ad-panel .ad-goal:hover,
body.ui-polished-creator #ad-panel .ad-goal.active {
    border-color: rgba(91,71,251,.34);
    background: var(--mt-accent-soft);
    color: var(--mt-accent-3);
    transform: translateY(-1px);
}

body.ui-polished-creator #ad-panel .ad-goal.active span {
    color: var(--mt-accent);
}

body.ui-polished-creator #ad-panel .ad-chip-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

body.ui-polished-creator #ad-panel .ad-chip {
    position: relative;
    min-height: 50px;
    padding: 9px 10px 8px;
    border: 1px solid var(--mt-line-2);
    border-radius: 12px;
    background: #fff;
    color: var(--mt-ink);
    cursor: pointer;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}

body.ui-polished-creator #ad-panel .ad-chip-name {
    display: block;
    font-size: 12.5px;
    font-weight: 800;
    line-height: 1.2;
}

body.ui-polished-creator #ad-panel .ad-chip-mode {
    display: block;
    color: var(--mt-soft);
    font-size: 11px;
    line-height: 1.2;
}

body.ui-polished-creator #ad-panel .ad-chip:hover,
body.ui-polished-creator #ad-panel .ad-chip.active {
    border-color: rgba(91,71,251,.34);
    background: var(--mt-accent-soft);
    color: var(--mt-accent-3);
    transform: translateY(-1px);
    box-shadow: 0 7px 18px -14px rgba(91,71,251,.6);
}

body.ui-polished-creator #ad-panel .ad-chip.active::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 7px;
    height: 2px;
    border-radius: 999px;
    background: var(--mt-accent);
}

body.ui-polished-creator #ad-panel .ad-chip.active .ad-chip-mode {
    color: var(--mt-accent);
}

body.ui-polished-creator #ad-panel .ad-product-type-wrap {
    margin: 0 0 12px;
    padding: 10px;
    border: 1px solid var(--mt-line);
    border-radius: 12px;
    background: rgba(250,250,255,.72);
}

body.ui-polished-creator #ad-panel .ad-mini-label {
    margin: 0 0 8px;
    color: var(--mt-soft);
    font-family: 'Manrope', 'Noto Sans SC', sans-serif;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

body.ui-polished-creator #ad-panel .ad-product-type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
    gap: 7px;
}

body.ui-polished-creator #ad-panel .ad-product-type {
    min-height: 52px;
    padding: 8px 9px;
    border: 1px solid var(--mt-line-2);
    border-radius: 10px;
    background: #fff;
    color: var(--mt-ink);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 3px;
    text-align: left;
    transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease;
}

body.ui-polished-creator #ad-panel .ad-product-type strong {
    font-size: 12px;
    line-height: 1.2;
}

body.ui-polished-creator #ad-panel .ad-product-type span {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--mt-soft);
    font-size: 10.5px;
    line-height: 1.25;
}

body.ui-polished-creator #ad-panel .ad-product-type:hover,
body.ui-polished-creator #ad-panel .ad-product-type.active {
    border-color: rgba(91,71,251,.34);
    background: var(--mt-accent-soft);
    color: var(--mt-accent-3);
    transform: translateY(-1px);
}

body.ui-polished-creator #ad-panel .ad-product-type.active span {
    color: var(--mt-accent);
}

body.ui-polished-creator #ad-panel .ad-industry-summary {
    margin: 0 0 10px;
    padding: 12px 14px;
    border-left: 2px solid var(--mt-accent);
    border-radius: 10px;
    background: var(--mt-accent-soft);
}

body.ui-polished-creator #ad-panel .ad-summary-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

body.ui-polished-creator #ad-panel .ad-summary-top span {
    color: var(--mt-soft);
    font-family: 'Manrope', sans-serif;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

body.ui-polished-creator #ad-panel .ad-summary-top strong {
    color: var(--mt-accent-3);
    font-size: 13px;
}

body.ui-polished-creator #ad-panel .ad-industry-summary p {
    margin: 0;
    color: var(--mt-ink-2);
    font-size: 12.5px;
    line-height: 1.65;
}

body.ui-polished-creator #ad-panel .ad-summary-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 9px;
}

body.ui-polished-creator #ad-panel .ad-summary-tags span {
    height: 24px;
    display: inline-flex;
    align-items: center;
    padding: 0 9px;
    border-radius: 999px;
    background: #fff;
    color: var(--mt-accent);
    border: 1px solid rgba(91,71,251,.18);
    font-size: 11.5px;
    font-weight: 700;
}

body.ui-polished-creator #ad-panel .ad-output-plan {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(91,71,251,.12);
}

body.ui-polished-creator #ad-panel .ad-output-plan b,
body.ui-polished-creator #ad-panel .ad-output-plan span {
    height: 24px;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    font-size: 11.5px;
}

body.ui-polished-creator #ad-panel .ad-output-plan b {
    color: var(--mt-ink);
    font-weight: 800;
}

body.ui-polished-creator #ad-panel .ad-output-plan span {
    padding: 0 9px;
    background: #fff;
    border: 1px solid var(--mt-line);
    color: var(--mt-ink-2);
}

body.ui-polished-creator #ad-panel .ad-input,
body.ui-polished-creator #ad-panel .ad-textarea,
body.ui-polished-creator #ad-panel .ad-field select {
    width: 100%;
    border-radius: 11px;
    border: 1px solid var(--mt-line-2);
    background: #fff;
    color: var(--mt-ink);
    outline: none;
    font-size: 13px;
    box-shadow: 0 1px 0 rgba(255,255,255,.85) inset;
}

body.ui-polished-creator #ad-panel .ad-input,
body.ui-polished-creator #ad-panel .ad-field select {
    height: 40px;
    padding: 0 12px;
}

body.ui-polished-creator #ad-panel .ad-textarea {
    min-height: 78px;
    resize: vertical;
    padding: 12px;
    line-height: 1.55;
}

body.ui-polished-creator #ad-panel .ad-upload {
    min-height: 170px;
    border-radius: 12px;
    border: 1px dashed rgba(91,71,251,.28);
    background:
        radial-gradient(420px 180px at 50% 0%, rgba(91,71,251,.07), transparent 62%),
        #fff;
    padding: 12px;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease;
}

body.ui-polished-creator #ad-panel .ad-upload.drag-over,
body.ui-polished-creator #ad-panel .ad-upload:hover {
    border-color: rgba(91,71,251,.55);
    background:
        radial-gradient(420px 180px at 50% 0%, rgba(91,71,251,.10), transparent 62%),
        #fff;
}

body.ui-polished-creator #ad-panel .ad-upload-empty {
    min-height: 144px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--mt-ink-2);
    text-align: center;
}

body.ui-polished-creator #ad-panel .ad-upload-empty b {
    color: var(--mt-ink);
    font-size: 14px;
}

body.ui-polished-creator #ad-panel .ad-upload-empty span {
    color: var(--mt-muted);
    font-size: 12px;
}

body.ui-polished-creator #ad-panel .ad-upload-guidance {
    margin-top: 8px;
    color: var(--mt-muted);
    font-size: 12px;
    line-height: 1.55;
}

body.ui-polished-creator #ad-panel .ad-asset-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

body.ui-polished-creator #ad-panel .ad-asset {
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    background: var(--mt-accent-soft);
}

body.ui-polished-creator #ad-panel .ad-asset img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

body.ui-polished-creator #ad-panel .ad-asset-badge,
body.ui-polished-creator #ad-panel .ad-asset-remove {
    position: absolute;
    top: 7px;
    border: 0;
    border-radius: 999px;
    min-width: 28px;
    height: 24px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}

body.ui-polished-creator #ad-panel .ad-asset-badge {
    left: 7px;
    background: rgba(91,71,251,.92);
    color: #fff;
}

body.ui-polished-creator #ad-panel .ad-asset-remove {
    right: 7px;
    background: rgba(255,255,255,0.86);
    color: #111827;
    cursor: pointer;
}

body.ui-polished-creator #ad-panel .ad-field-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 10px;
}

body.ui-polished-creator #ad-panel .ad-field span {
    display: block;
    margin-bottom: 6px;
    color: var(--mt-soft);
    font-size: 12px;
    font-weight: 700;
}

body.ui-polished-creator #ad-panel .ad-delivery-card {
    margin-top: 12px;
    padding: 12px;
    border: 1px solid var(--mt-line);
    border-radius: 12px;
    background:
        radial-gradient(420px 180px at 20% 0%, rgba(91,71,251,.06), transparent 58%),
        rgba(250,250,255,.82);
}

body.ui-polished-creator #ad-panel .ad-delivery-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

body.ui-polished-creator #ad-panel .ad-delivery-item {
    min-height: 92px;
    padding: 10px 11px;
    border: 1px solid var(--mt-line-2);
    border-radius: 10px;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

body.ui-polished-creator #ad-panel .ad-delivery-item span {
    color: var(--mt-accent);
    font-family: 'Manrope', 'Noto Sans SC', sans-serif;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

body.ui-polished-creator #ad-panel .ad-delivery-item b {
    color: var(--mt-ink);
    font-size: 12.5px;
    line-height: 1.35;
}

body.ui-polished-creator #ad-panel .ad-delivery-item small {
    color: var(--mt-muted);
    font-size: 11.5px;
    line-height: 1.5;
}

body.ui-polished-creator #ad-panel .ad-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding-top: 18px;
    border-top: 1px solid var(--mt-line);
}

body.ui-polished-creator #ad-panel .ad-primary,
body.ui-polished-creator #ad-panel .ad-secondary {
    height: 42px;
    min-height: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    order: initial !important;
    padding: 0 14px !important;
    border-radius: 11px;
    border: 1px solid var(--mt-line);
    cursor: pointer;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0 !important;
    line-height: 1 !important;
}

body.ui-polished-creator #ad-panel .ad-primary {
    color: #fff;
    border-color: rgba(91,71,251,.42);
    background: linear-gradient(135deg, var(--mt-accent-2), var(--mt-accent) 58%, var(--mt-accent-3));
    box-shadow: 0 16px 36px rgba(91,71,251,.22);
}

body.ui-polished-creator #ad-panel .ad-main-action {
    grid-column: 1 / -1;
    height: 48px !important;
    font-size: 14px !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,.20) inset,
        0 18px 34px -18px rgba(91,71,251,.62) !important;
}

body.ui-polished-creator #ad-panel .ad-primary::before,
body.ui-polished-creator #ad-panel .ad-secondary::before {
    display: none !important;
}

body.ui-polished-creator #ad-panel .ad-primary:disabled,
body.ui-polished-creator #ad-panel .ad-secondary:disabled {
    opacity: .55;
    cursor: wait;
}

body.ui-polished-creator #ad-panel .ad-secondary {
    background: #fff;
    color: var(--mt-ink-2);
}

body.ui-polished-creator #ad-panel .ad-secondary:hover {
    border-color: var(--mt-accent);
    color: var(--mt-accent);
}

body.ui-polished-creator #ad-panel .ad-secondary.small {
    min-width: 96px;
    height: 34px;
    padding: 0 12px;
    white-space: nowrap;
}

body.ui-polished-creator #ad-panel .ad-progress {
    display: none;
    margin-top: 14px;
}

body.ui-polished-creator #ad-panel .ad-progress.show {
    display: block;
}

body.ui-polished-creator #ad-panel .ad-progress-head {
    display: flex;
    justify-content: space-between;
    color: var(--mt-soft);
    font-size: 12px;
    margin-bottom: 8px;
}

body.ui-polished-creator #ad-panel .ad-progress-track {
    height: 8px;
    border-radius: 999px;
    background: var(--mt-line);
    overflow: hidden;
}

body.ui-polished-creator #ad-panel .ad-progress-track span {
    display: block;
    width: 0%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--mt-accent-2), var(--mt-accent));
    transition: width .22s ease;
}

body.ui-polished-creator #ad-panel .ad-stage-grid {
    padding: 18px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

body.ui-polished-creator #ad-panel .ad-stage {
    min-height: 205px;
    border-radius: 16px;
    border: 1px solid #1a1a22;
    background:
        radial-gradient(600px 280px at 50% 0%, rgba(91,71,251,.20), transparent 60%),
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
        #0a0a10;
    background-size: auto, 32px 32px, 32px 32px, auto;
    box-shadow: 0 24px 60px -24px rgba(12,12,18,.45);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    color: #fff;
}

body.ui-polished-creator #ad-panel .ad-stage.running {
    border-color: rgba(91,71,251,.56);
}

body.ui-polished-creator #ad-panel .ad-stage.done {
    border-color: rgba(91,71,251,.36);
}

body.ui-polished-creator #ad-panel .ad-stage-top {
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 14px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    color: #f8fafc;
}

body.ui-polished-creator #ad-panel .ad-stage-title {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    font-weight: 800;
}

body.ui-polished-creator #ad-panel .ad-stage-title em {
    font-style: normal;
    font-family: 'Manrope', sans-serif;
    font-size: 10.5px;
    color: rgba(255,255,255,.42);
    letter-spacing: .14em;
}

body.ui-polished-creator #ad-panel .ad-stage-state {
    color: rgba(255,255,255,.62);
    font-family: 'Manrope', sans-serif;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    white-space: nowrap;
}

body.ui-polished-creator #ad-panel .ad-stage-media {
    flex: 1;
    min-height: 118px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    gap: 8px;
    align-items: stretch;
    padding: 10px;
}

body.ui-polished-creator #ad-panel .ad-stage-empty {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 108px;
    border-radius: 12px;
    color: rgba(255,255,255,.42);
    font-family: 'Noto Serif SC', serif;
    font-size: 22px;
    font-weight: 800;
    border: 1px dashed rgba(255,255,255,.12);
}

body.ui-polished-creator #ad-panel .ad-stage-img {
    min-height: 128px;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    background: rgba(255,255,255,0.04);
    cursor: zoom-in;
}

body.ui-polished-creator #ad-panel .ad-stage-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

body.ui-polished-creator #ad-panel .ad-stage-hint {
    padding: 0 14px 10px;
    color: rgba(255,255,255,.48);
    font-size: 12px;
    line-height: 1.55;
}

body.ui-polished-creator #ad-panel .ad-stage-brief {
    margin: 0 14px 10px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.045);
    display: grid;
    gap: 4px;
}

body.ui-polished-creator #ad-panel .ad-stage-brief span {
    color: rgba(255,255,255,.46);
    font-family: 'Manrope', 'Noto Sans SC', sans-serif;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

body.ui-polished-creator #ad-panel .ad-stage-brief b {
    color: rgba(255,255,255,.82);
    font-size: 12px;
    line-height: 1.45;
}

body.ui-polished-creator #ad-panel .ad-stage-actions {
    display: flex;
    gap: 8px;
    padding: 0 14px 14px;
    flex-wrap: wrap;
}

body.ui-polished-creator #ad-panel .ad-stage-actions button {
    height: 30px;
    padding: 0 10px;
    border: 1px solid rgba(255,255,255,0.11);
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    color: rgba(248,250,252,0.78);
    cursor: pointer;
    font-size: 12px;
}

body.ui-polished-creator #ad-panel .ad-prompt-box {
    margin: 0 18px 18px;
    max-height: 460px;
    overflow: auto;
    padding: 14px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.09);
    color: rgba(248,250,252,0.74);
    background: rgba(0,0,0,0.28);
    font-size: 12px;
    line-height: 1.6;
}

body.ui-polished-creator #ad-panel .ad-prompt-pack-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

body.ui-polished-creator #ad-panel .ad-prompt-pack-head span {
    display: block;
    color: rgba(255,255,255,.42);
    font-family: 'Manrope', sans-serif;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
}

body.ui-polished-creator #ad-panel .ad-prompt-pack-head strong {
    display: block;
    margin-top: 3px;
    color: #fff;
    font-size: 13px;
}

body.ui-polished-creator #ad-panel .ad-prompt-pack-head button,
body.ui-polished-creator #ad-panel .ad-prompt-card-head button {
    height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.07);
    color: rgba(255,255,255,.82);
    cursor: pointer;
    font-size: 12px;
}

body.ui-polished-creator #ad-panel .ad-prompt-pack-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

body.ui-polished-creator #ad-panel .ad-prompt-card {
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 12px;
    background: rgba(255,255,255,.035);
    overflow: hidden;
}

body.ui-polished-creator #ad-panel .ad-prompt-card-head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255,255,255,.07);
}

body.ui-polished-creator #ad-panel .ad-prompt-card-head span {
    color: rgba(255,255,255,.46);
    font-family: 'Manrope', sans-serif;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .14em;
}

body.ui-polished-creator #ad-panel .ad-prompt-card-head strong {
    color: #fff;
    font-size: 13px;
}

body.ui-polished-creator #ad-panel .ad-prompt-lines {
    padding: 10px 12px 12px;
}

body.ui-polished-creator #ad-panel .ad-prompt-lines p {
    margin: 0 0 7px;
    color: rgba(248,250,252,.76);
    line-height: 1.62;
    word-break: break-word;
}

body.ui-polished-creator #ad-panel .ad-prompt-lines p:last-child {
    margin-bottom: 0;
}

body.ui-polished-creator #ad-panel .ad-gallery-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

body.ui-polished-creator #ad-panel .ad-gallery-tags span {
    height: 28px;
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(91,71,251,.20);
    background: var(--mt-accent-soft);
    color: var(--mt-accent);
    font-size: 12px;
}

body.ui-polished-creator #ad-panel .img-library-panel {
    border-radius: 12px;
    border: 1px solid var(--mt-line);
    background: #fff;
    overflow: hidden;
}

@media (max-width: 1180px) {
    body.ui-polished-creator #ad-panel .ad-shell {
        grid-template-columns: 1fr;
    }
    body.ui-polished-creator #ad-panel .ad-preview {
        position: static;
        min-height: 0;
    }
}

@media (max-width: 720px) {
    body.ui-polished-creator #ad-panel .ad-goal-grid,
    body.ui-polished-creator #ad-panel .ad-chip-grid,
    body.ui-polished-creator #ad-panel .ad-product-type-grid,
    body.ui-polished-creator #ad-panel .ad-delivery-grid,
    body.ui-polished-creator #ad-panel .ad-field-grid,
    body.ui-polished-creator #ad-panel .ad-actions,
    body.ui-polished-creator #ad-panel .ad-stage-grid {
        grid-template-columns: 1fr;
    }
    body.ui-polished-creator #ad-panel .ad-chip {
        min-height: 58px;
    }
    body.ui-polished-creator #ad-panel .ad-head,
    body.ui-polished-creator #ad-panel .ad-preview-head,
    body.ui-polished-creator #ad-panel .ad-gallery-head {
        align-items: flex-start;
        flex-direction: column;
    }
}

body.ui-polished-creator.asset-library-active .page-title::after {
    content: "虚拟人像上传、素材审核与图生视频调用集中管理。";
}

body.ui-polished-creator .asset-library-panel {
    padding: 0 0 44px;
    color: #111827;
}

body.ui-polished-creator .asset-library-shell {
    display: grid;
    gap: 16px;
}

body.ui-polished-creator .asset-library-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    padding: 24px 26px;
    border: 1px solid rgba(17,24,39,0.08);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(255,255,255,0.96), rgba(248,250,252,0.94) 58%, rgba(236,253,245,0.76));
    box-shadow: 0 22px 50px rgba(15,23,42,0.06);
}

body.ui-polished-creator .asset-head-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

body.ui-polished-creator .asset-library-kicker,
body.ui-polished-creator .asset-guide-kicker {
    color: #667085;
    font-family: 'Manrope', sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .18em;
}

body.ui-polished-creator .asset-library-head h2 {
    margin: 7px 0 8px;
    font-family: 'Noto Serif SC', serif;
    font-size: 30px;
    line-height: 1.12;
    letter-spacing: 0;
}

body.ui-polished-creator .asset-library-head p {
    margin: 0;
    max-width: 780px;
    color: #667085;
    font-size: 14px;
    line-height: 1.65;
}

body.ui-polished-creator .asset-library-status-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

body.ui-polished-creator .asset-status-tile {
    min-height: 62px;
    padding: 11px 14px;
    border: 1px solid rgba(17,24,39,0.08);
    border-radius: 8px;
    background: rgba(255,255,255,0.82);
    box-shadow: 0 14px 34px rgba(15,23,42,0.04);
    display: grid;
    align-content: center;
    gap: 5px;
}

body.ui-polished-creator .asset-status-tile span {
    color: #5b47fb;
    font: 900 12px 'Manrope', sans-serif;
    letter-spacing: .1em;
}

body.ui-polished-creator .asset-status-tile strong {
    color: #101828;
    font-size: 14px;
    font-weight: 900;
}

body.ui-polished-creator .asset-status-tile em {
    color: #667085;
    font-style: normal;
    font-size: 12px;
    font-weight: 700;
}

body.ui-polished-creator .asset-library-main {
    display: grid;
    grid-template-columns: minmax(420px, .9fr) minmax(360px, .62fr);
    gap: 16px;
    align-items: start;
}

body.ui-polished-creator .asset-library-card,
body.ui-polished-creator .asset-guide-card,
body.ui-polished-creator .asset-library-list {
    border: 1px solid rgba(17,24,39,0.08);
    border-radius: 8px;
    background: rgba(255,255,255,.9);
    padding: 18px;
    box-shadow: 0 18px 44px rgba(15,23,42,.06);
}

body.ui-polished-creator .asset-library-list {
    padding: 16px;
}

body.ui-polished-creator .asset-library-card.virtual {
    background: rgba(255,255,255,.94);
    align-self: start;
}

body.ui-polished-creator .asset-guide-card {
    background: #0f172a;
    color: #f8fafc;
    display: grid;
    align-content: space-between;
    gap: 18px;
    min-height: 100%;
}

body.ui-polished-creator .asset-status-panel {
    align-content: start;
    gap: 16px;
    overflow: hidden;
    align-self: start;
}

body.ui-polished-creator .asset-status-preview {
    display: grid;
    gap: 12px;
}

body.ui-polished-creator .asset-status-current {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    align-items: stretch;
    padding: 14px;
    border-radius: 8px;
    border: 1px solid rgba(148,163,184,.26);
    background: rgba(255,255,255,.06);
}

body.ui-polished-creator .asset-status-thumb {
    width: 100%;
    height: clamp(240px, 28vw, 380px);
    border-radius: 8px;
    overflow: hidden;
    background: rgba(255,255,255,.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #cbd5e1;
    font-size: 12px;
    font-weight: 900;
}

body.ui-polished-creator .asset-status-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #f8fafc;
}

body.ui-polished-creator .asset-status-copy {
    min-width: 0;
    display: grid;
    gap: 8px;
}

body.ui-polished-creator .asset-status-name {
    color: #f8fafc;
    font-size: 14px;
    font-weight: 900;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.ui-polished-creator .asset-status-uri {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #c4b5fd;
    background: rgba(99,102,241,.18);
    border-radius: 999px;
    padding: 6px 9px;
    font-size: 11px;
    font-weight: 900;
}

body.ui-polished-creator .asset-status-copy p {
    margin: 0;
    color: #cbd5e1;
    font-size: 12px;
    line-height: 1.6;
}

body.ui-polished-creator .asset-status-actions {
    margin-top: 2px;
}

body.ui-polished-creator .asset-status-empty {
    min-height: 156px;
    border: 1px dashed rgba(148,163,184,.32);
    border-radius: 8px;
    background: rgba(255,255,255,.04);
    color: #cbd5e1;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 20px;
}

body.ui-polished-creator .asset-status-empty strong,
body.ui-polished-creator .asset-status-empty span {
    display: block;
}

body.ui-polished-creator .asset-status-empty strong {
    color: #f8fafc;
    font-size: 15px;
    margin-bottom: 6px;
}

body.ui-polished-creator .asset-guide-card h3 {
    margin: 4px 0 0;
    font-size: 22px;
    line-height: 1.2;
    letter-spacing: 0;
    color: #f8fafc;
}

body.ui-polished-creator .asset-guide-card p {
    margin: 0;
    color: #cbd5e1;
    font-size: 13px;
    line-height: 1.7;
}

body.ui-polished-creator .asset-guide-list {
    display: grid;
    gap: 10px;
}

body.ui-polished-creator .asset-guide-list div {
    display: flex;
    gap: 10px;
    align-items: center;
    color: #e2e8f0;
    font-size: 13px;
    font-weight: 800;
}

body.ui-polished-creator .asset-guide-list span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2dd4bf;
    box-shadow: 0 0 0 4px rgba(45,212,191,0.14);
    flex: 0 0 auto;
}

body.ui-polished-creator .asset-card-title,
body.ui-polished-creator .asset-list-head > div {
    display: flex;
    gap: 9px;
    align-items: center;
    color: #111827;
    font-weight: 900;
}

body.ui-polished-creator .asset-card-title span,
body.ui-polished-creator .asset-list-head span {
    color: var(--mt-accent);
    font-family: 'Manrope', sans-serif;
    font-size: 12px;
    letter-spacing: .1em;
}

body.ui-polished-creator .asset-card-desc,
body.ui-polished-creator .asset-list-head small {
    display: block;
    margin: 8px 0 14px;
    color: #667085;
    font-size: 12px;
    line-height: 1.6;
}

body.ui-polished-creator .asset-field-grid,
body.ui-polished-creator .asset-live-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

body.ui-polished-creator .asset-field-label {
    display: block;
    margin: 12px 0 6px;
    color: #475467;
    font-size: 11px;
    font-weight: 900;
}

body.ui-polished-creator .asset-input {
    width: 100%;
    height: 42px;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    background: #fff;
    color: #111827;
    padding: 0 12px;
    font: 700 13px 'Manrope', 'Noto Sans SC', sans-serif;
    box-sizing: border-box;
}

body.ui-polished-creator .asset-input:focus {
    outline: none;
    border-color: rgba(91,71,251,0.5);
    box-shadow: 0 0 0 3px rgba(91,71,251,0.1);
}

body.ui-polished-creator .asset-upload-line {
    min-height: 48px;
    margin: 12px 0;
    border: 1px dashed #b6c2d5;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 14px;
    cursor: pointer;
    color: #111827;
    background: #f8fafc;
}

body.ui-polished-creator .asset-upload-line span {
    font-weight: 900;
    font-size: 13px;
}

body.ui-polished-creator .asset-upload-line em {
    color: #667085;
    font-style: normal;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.ui-polished-creator .asset-primary-btn,
body.ui-polished-creator .asset-secondary-btn,
body.ui-polished-creator .asset-library-soft-btn {
    min-height: 42px;
    border-radius: 8px;
    border: 1px solid transparent;
    padding: 0 15px;
    font-weight: 900;
    cursor: pointer;
}

body.ui-polished-creator .asset-primary-btn {
    width: 100%;
    color: #fff;
    background: linear-gradient(135deg, #5b47fb, #1f7ae0);
    box-shadow: 0 14px 30px rgba(31,122,224,.18);
}

body.ui-polished-creator .asset-secondary-btn,
body.ui-polished-creator .asset-library-soft-btn {
    color: #111827;
    background: #fff;
    border-color: #d0d5dd;
}

body.ui-polished-creator .asset-library-soft-btn:first-child {
    color: #fff;
    background: #111827;
    border-color: #111827;
}

body.ui-polished-creator .asset-live-link {
    margin: 10px 0 0;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    color: #1f7ae0;
    font-weight: 900;
    text-decoration: none;
}

body.ui-polished-creator .asset-list-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 14px;
}

body.ui-polished-creator .asset-library-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
    gap: 12px;
}

body.ui-polished-creator .asset-item {
    border: 1px solid #e3e6ef;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

body.ui-polished-creator .asset-gallery-item {
    position: relative;
    cursor: pointer;
    background: #f8fafc;
    padding: 10px;
    display: grid;
    gap: 10px;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

body.ui-polished-creator .asset-gallery-item:hover,
body.ui-polished-creator .asset-gallery-item.selected {
    border-color: rgba(91,71,251,.58);
    box-shadow: 0 14px 34px rgba(91,71,251,.14);
    transform: translateY(-1px);
}

body.ui-polished-creator .asset-gallery-action {
    position: static;
    width: 100%;
    min-height: 36px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.36);
    color: #fff;
    background: linear-gradient(135deg, #5b47fb, #1f7ae0);
    box-shadow: 0 10px 24px rgba(31,122,224,.26);
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}

body.ui-polished-creator .asset-gallery-action:disabled,
body.ui-polished-creator .asset-actions button:disabled {
    cursor: not-allowed;
    opacity: .46;
}

body.ui-polished-creator .asset-thumb {
    width: 100%;
    aspect-ratio: 4/5;
    background: #f3f4f8;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

body.ui-polished-creator .asset-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #f8fafc;
}

body.ui-polished-creator .asset-thumb-fallback,
body.ui-polished-creator .asset-thumb.is-broken::before,
body.ui-polished-creator .asset-status-thumb.is-broken::before,
body.ui-polished-creator .history-image-item.is-broken::before,
body.ui-polished-creator .upload-multi-item.is-broken::before {
    content: "图片暂不可预览";
    width: 100%;
    min-height: 54px;
    display: grid;
    place-items: center;
    color: #667085;
    font-size: 12px;
    font-weight: 900;
    text-align: center;
    padding: 8px;
    box-sizing: border-box;
}

body.ui-polished-creator .history-image-label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #111827;
    font-size: 12px;
    font-weight: 900;
}

body.ui-polished-creator .asset-body {
    padding: 11px;
    display: grid;
    gap: 8px;
}

body.ui-polished-creator .asset-name {
    font-weight: 900;
    color: #111827;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.ui-polished-creator .asset-meta {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

body.ui-polished-creator .asset-meta span {
    border-radius: 999px;
    padding: 4px 8px;
    background: #f2f3f8;
    color: #63677a;
    font-size: 11px;
    font-weight: 800;
}

body.ui-polished-creator .asset-meta .active {
    background: rgba(45, 212, 191, .12);
    color: #047a6c;
}

body.ui-polished-creator .asset-meta .processing {
    background: rgba(245, 158, 11, .14);
    color: #a15c00;
}

body.ui-polished-creator .asset-meta .failed {
    background: rgba(239, 68, 68, .12);
    color: #b42318;
}

body.ui-polished-creator .asset-note {
    border-radius: 8px;
    padding: 9px 10px;
    font-size: 12px;
    line-height: 1.55;
    font-weight: 800;
}

body.ui-polished-creator .asset-note.failed {
    background: rgba(239, 68, 68, .08);
    color: #b42318;
    border: 1px solid rgba(239, 68, 68, .18);
}

body.ui-polished-creator .asset-actions {
    display: flex;
    gap: 8px;
}

body.ui-polished-creator .asset-actions button {
    flex: 1;
    height: 32px;
    border-radius: 7px;
    border: 1px solid #d7dbe7;
    background: #fff;
    color: #111827;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

body.ui-polished-creator .asset-actions button.primary {
    color: #fff;
    border-color: transparent;
    background: #5b47fb;
}

body.ui-polished-creator .asset-empty {
    grid-column: 1 / -1;
    padding: 32px;
    text-align: center;
    color: #8b90a3;
    border: 1px dashed #d7dbe7;
    border-radius: 8px;
}

body.ui-polished-creator .asset-source-badge {
    background: #eef2ff !important;
    color: #4f46e5 !important;
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 980px) {
    body.ui-polished-creator .asset-library-head,
    body.ui-polished-creator .asset-library-status-grid,
    body.ui-polished-creator .asset-library-main,
    body.ui-polished-creator .asset-field-grid,
    body.ui-polished-creator .asset-live-row {
        grid-template-columns: 1fr;
    }
    body.ui-polished-creator .asset-library-panel {
        padding: 24px 18px 32px;
    }
    body.ui-polished-creator .asset-head-actions,
    body.ui-polished-creator .asset-list-head {
        flex-direction: column;
        align-items: stretch;
    }
    body.ui-polished-creator .asset-head-actions .asset-library-soft-btn {
        width: 100%;
    }
    body.ui-polished-creator .asset-status-current {
        grid-template-columns: 1fr;
    }
    body.ui-polished-creator .asset-status-thumb {
        width: 100%;
        height: auto;
        aspect-ratio: 4/5;
    }
}

/* LibTV-style dark infinite canvas shell */
body.canvas-mode-active,
body.canvas-mode-active.ui-polished-creator,
body.canvas-mode-active.ui-polished-creator.day {
    overflow: hidden !important;
    background: #08090a !important;
}
body.canvas-mode-active .bg-dynamic,
body.canvas-mode-active .grid-bg,
body.canvas-mode-active .sidebar,
body.canvas-mode-active .sidebar-hover-zone,
body.canvas-mode-active .top-bar,
body.canvas-mode-active .create-tabs,
body.canvas-mode-active .history-section,
body.canvas-mode-active .result-section {
    display: none !important;
}
body.canvas-mode-active .main-content,
body.ui-polished-creator.canvas-mode-active .main-content,
body.ui-polished-creator.sidebar-auto-hide.canvas-mode-active .main-content {
    margin: 0 !important;
    padding: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    overflow: hidden !important;
    background: #08090a !important;
}
body.canvas-mode-active #canvas-panel,
body.ui-polished-creator.day.canvas-mode-active #canvas-panel {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1200 !important;
    display: block !important;
    width: 100vw !important;
    height: 100vh !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: clip !important;
    background: #08090a !important;
    color: #f5f6f7 !important;
}
body.canvas-mode-active #canvas-panel .canvas-shell,
body.ui-polished-creator.day.canvas-mode-active #canvas-panel .canvas-shell {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    height: 100vh !important;
    min-height: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}
body.canvas-mode-active #canvas-panel .canvas-side,
body.canvas-mode-active #canvas-panel .canvas-inspector,
body.canvas-mode-active #canvas-panel .canvas-topbar,
body.canvas-mode-active #canvas-panel .canvas-floating-dock,
body.canvas-mode-active #canvas-panel .canvas-timeline {
    display: none !important;
}
body.canvas-mode-active #canvas-panel .canvas-workspace,
body.ui-polished-creator.day.canvas-mode-active #canvas-panel .canvas-workspace {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100vw !important;
    height: 100vh !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #08090a !important;
    overflow: hidden !important;
}
body.canvas-mode-active #canvas-panel .canvas-stage-wrap,
body.ui-polished-creator.day.canvas-mode-active #canvas-panel .canvas-stage-wrap {
    position: absolute !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    min-height: 100vh !important;
	    overflow: hidden !important;
	    background:
	        radial-gradient(circle at 1px 1px, rgba(255,255,255,var(--canvas-grid-alpha,.057)) 0 .72px, transparent .78px),
	        linear-gradient(180deg, #090a0b 0%, #070808 100%) !important;
	    background-size: var(--canvas-grid-size, 18px) var(--canvas-grid-size, 18px), auto !important;
	    cursor: grab;
	}
body.canvas-mode-active #canvas-panel .canvas-stage-wrap.is-panning {
    cursor: grabbing;
}
.canvas-lib-top {
    position: absolute;
    top: 18px;
    left: 18px;
    right: 18px;
    z-index: 1225;
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: none;
}
.canvas-lib-brand,
.canvas-lib-right {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    pointer-events: auto;
}
.canvas-lib-brand {
    position: relative;
}
.canvas-lib-logo-menu-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 9px 0 0;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    color: #f7f7f7;
    cursor: pointer;
}
.canvas-lib-logo-menu-trigger:hover,
.canvas-lib-logo-menu-trigger.open {
    background: rgba(38,38,38,.92);
    border-color: rgba(255,255,255,.12);
}
.canvas-lib-menu-caret {
    color: rgba(255,255,255,.62);
    font-size: 12px;
    font-weight: 900;
    transform: translateY(-1px);
}
.canvas-lib-mark {
    width: 27px;
    height: 18px;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f4;
    color: #08090a;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: -.04em;
    transform: skew(-10deg);
}
.canvas-lib-name {
    color: #f7f7f7;
    font-size: 16px;
    font-weight: 950;
    letter-spacing: -.02em;
}
.canvas-lib-title {
    display: inline-block;
    min-width: 44px;
    max-width: 260px;
    color: rgba(255,255,255,.86);
    font-size: 13px;
    font-weight: 850;
    outline: none;
    border-radius: 7px;
    padding: 4px 7px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: text;
    caret-color: #fff;
    -webkit-user-select: text;
    user-select: text;
}
.canvas-lib-title:focus {
    background: rgba(255,255,255,.10);
    box-shadow: 0 0 0 1px rgba(255,255,255,.20) inset;
    text-overflow: clip;
}
.canvas-lib-title:empty::before {
    content: "未命名";
    color: rgba(255,255,255,.42);
}
.canvas-project-menu {
    position: absolute;
    top: 42px;
    left: 0;
    z-index: 1290;
    display: none;
    width: 190px;
    padding: 8px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 14px;
    background: rgba(35,35,35,.98);
    box-shadow: 0 22px 58px rgba(0,0,0,.45);
    backdrop-filter: blur(18px);
}
.canvas-project-menu.show {
    display: grid;
    gap: 4px;
}
.canvas-project-menu button {
    height: 42px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: rgba(255,255,255,.92);
    font-size: 14px;
    font-weight: 850;
    text-align: left;
    padding: 0 12px;
    cursor: pointer;
}
.canvas-project-menu button:hover {
    background: rgba(255,255,255,.10);
}
.canvas-project-home {
    position: absolute;
    inset: 0;
    z-index: 1280;
    display: none;
    overflow: auto;
    padding: 14px 24px 64px;
    color: #f7f7f7;
    background:
        radial-gradient(circle at 1px 1px, rgba(255,255,255,.08) 1px, transparent 1.15px),
        #0b0c0d;
    background-size: 18px 18px, auto;
}
#canvas-panel.canvas-project-home-open .canvas-project-home {
    display: block;
}
#canvas-panel.canvas-project-home-open .canvas-shell,
#canvas-panel.canvas-project-home-open .canvas-lib-left-rail,
#canvas-panel.canvas-project-home-open .canvas-lib-bottom-bar,
#canvas-panel.canvas-project-home-open .canvas-lib-toolbox,
#canvas-panel.canvas-project-home-open .canvas-add-node-menu,
#canvas-panel.canvas-project-home-open .canvas-node-gen-panel {
    display: none !important;
}
.canvas-project-home-top {
    margin: 0 0 28px;
}
.canvas-project-home-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.canvas-project-home-toolbar {
    max-width: 1420px;
    margin: 32px auto 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}
.canvas-project-home-actions {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    color: rgba(255,255,255,.92);
    font-size: 14px;
    font-weight: 850;
}
.canvas-project-home-actions button,
.canvas-project-new-folder {
    border: 0;
    border-radius: 9px;
    background: rgba(38,38,38,.92);
    color: rgba(255,255,255,.92);
    height: 34px;
    padding: 0 13px;
    font-size: 13px;
    font-weight: 850;
    cursor: pointer;
}
.canvas-project-home-actions button:hover,
.canvas-project-new-folder:hover {
    background: rgba(58,58,58,.96);
}
.canvas-project-home-actions span {
    width: 1px;
    height: 16px;
    background: rgba(255,255,255,.24);
}
.canvas-project-new-folder {
    flex: 0 0 auto;
}
@media (max-width: 720px) {
    .canvas-project-home {
        padding: 12px 16px 44px;
    }
    .canvas-project-home-toolbar {
        margin-top: 22px;
        gap: 12px;
        flex-wrap: wrap;
    }
    .canvas-project-home-actions {
        gap: 10px;
    }
    .canvas-project-new-folder {
        margin-left: auto;
    }
}
.canvas-project-grid {
    max-width: 1420px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 34px 22px;
}
.canvas-project-card {
    position: relative;
    min-width: 0;
    color: rgba(255,255,255,.9);
}
.canvas-project-thumb,
.canvas-project-create-card {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.08);
    background: #242526;
    overflow: hidden;
}
.canvas-project-card:not(.create) .canvas-project-thumb {
    cursor: pointer;
}
.canvas-project-card:not(.create) .canvas-project-thumb:hover {
    border-color: rgba(255,255,255,.24);
}
.canvas-project-thumb img,
.canvas-project-thumb video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.canvas-project-thumb.empty {
    display: grid;
    place-items: center;
}
.canvas-project-thumb.empty::before {
    content: "";
    width: 54px;
    height: 42px;
    opacity: .28;
    background: currentColor;
    clip-path: polygon(0 100%, 28% 52%, 45% 74%, 62% 38%, 100% 100%);
}
.canvas-project-create-card {
    display: grid;
    place-items: center;
    gap: 8px;
    color: rgba(255,255,255,.92);
    background: linear-gradient(145deg, rgba(48,52,57,.96), rgba(28,30,32,.96));
    cursor: pointer;
}
.canvas-project-create-card:hover {
    border-color: rgba(132,166,255,.72);
}
.canvas-project-create-card b {
    font-size: 30px;
    font-weight: 400;
    line-height: 1;
}
.canvas-project-create-card span {
    font-size: 14px;
    font-weight: 850;
}
.canvas-project-meta-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    margin-top: 10px;
    align-items: start;
}
.canvas-project-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 850;
}
.canvas-project-date {
    margin-top: 4px;
    color: rgba(255,255,255,.46);
    font-size: 12px;
    font-weight: 700;
}
.canvas-project-card-more {
    width: 28px;
    height: 24px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: rgba(255,255,255,.62);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}
.canvas-project-card-more:hover,
.canvas-project-card.menu-open .canvas-project-card-more {
    background: rgba(255,255,255,.10);
    color: #fff;
}
.canvas-project-card-menu {
    position: absolute;
    right: 0;
    top: calc(100% - 42px);
    z-index: 1300;
    display: none;
    width: 150px;
    padding: 8px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 12px;
    background: rgba(48,48,48,.98);
    box-shadow: 0 18px 44px rgba(0,0,0,.48);
}
.canvas-project-card.menu-open .canvas-project-card-menu {
    display: grid;
    gap: 2px;
}
.canvas-project-card-menu button {
    height: 34px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #fff;
    font-size: 13px;
    font-weight: 820;
    text-align: left;
    padding: 0 10px;
    cursor: pointer;
}
.canvas-project-card-menu button:hover {
    background: rgba(255,255,255,.10);
}
.canvas-project-card-menu button.danger {
    color: #ffd1d1;
}
.canvas-project-home-footer {
    max-width: 1420px;
    margin: 56px auto 0;
    color: rgba(255,255,255,.38);
    text-align: center;
    font-size: 13px;
    font-weight: 850;
}
.canvas-project-delete-modal {
    position: fixed;
    inset: 0;
    z-index: 2147483400;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.42);
    pointer-events: none;
}
.canvas-project-delete-modal.show {
    display: flex;
    pointer-events: auto;
}
.canvas-project-delete-dialog {
    width: min(420px, calc(100vw - 42px));
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 14px;
    background: rgba(36,36,36,.98);
    color: #fff;
    padding: 20px;
    box-shadow: 0 28px 80px rgba(0,0,0,.55);
}
.canvas-project-delete-dialog h3 {
    margin: 0 0 16px;
    color: #ff5a5f;
    font-size: 16px;
    font-weight: 900;
}
.canvas-project-delete-dialog p {
    margin: 0 0 20px;
    color: rgba(255,255,255,.58);
    font-size: 14px;
    font-weight: 700;
}
.canvas-project-delete-dialog div {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}
.canvas-project-delete-dialog button {
    height: 38px;
    min-width: 58px;
    border: 0;
    border-radius: 10px;
    background: rgba(255,255,255,.10);
    color: #fff;
    font-size: 14px;
    font-weight: 850;
    cursor: pointer;
}
.canvas-project-delete-dialog button.confirm {
    background: #fff;
    color: #171717;
}
.canvas-workspace-home-actions { display:flex; align-items:center; gap:10px; }
.canvas-workspace-home-actions select,
.canvas-workspace-home-actions > button:not(.canvas-project-new-folder) { min-height:38px; border:1px solid rgba(255,255,255,.14); border-radius:10px; background:#1d1d1f; color:#f5f5f7; padding:0 13px; font:inherit; }
.canvas-workspace-home-actions select { min-width:150px; }
.canvas-workspace-home-actions > button { cursor:pointer; }
.canvas-workspace-modal { position:fixed; inset:0; z-index:16040; display:none; align-items:center; justify-content:center; padding:24px; background:rgba(0,0,0,.72); backdrop-filter:blur(14px); }
.canvas-workspace-modal.show { display:flex; }
.canvas-workspace-dialog { width:min(980px,96vw); max-height:min(780px,92vh); overflow:hidden; border:1px solid rgba(255,255,255,.14); border-radius:18px; background:#151517; color:#f5f5f7; box-shadow:0 28px 90px rgba(0,0,0,.55); }
.canvas-workspace-dialog.assets { width:min(1120px,96vw); }
.canvas-workspace-head { display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid rgba(255,255,255,.1); }
.canvas-workspace-head span { color:#8e8e93; font-size:12px; }
.canvas-workspace-head h3 { margin:3px 0 0; font-size:20px; }
.canvas-workspace-head > button { width:38px; height:38px; border:1px solid rgba(255,255,255,.15); border-radius:10px; background:#242426; color:#fff; font-size:22px; cursor:pointer; }
.canvas-workspace-layout { display:grid; grid-template-columns:240px minmax(0,1fr); min-height:540px; max-height:calc(92vh - 78px); }
.canvas-workspace-layout > aside { padding:16px; border-right:1px solid rgba(255,255,255,.1); overflow:auto; }
.canvas-workspace-layout > main { padding:22px; overflow:auto; }
.canvas-workspace-create { width:100%; min-height:42px; border:0; border-radius:10px; background:#f5f5f7; color:#111; font-weight:700; cursor:pointer; }
.canvas-workspace-list { display:grid; gap:8px; margin-top:14px; }
.canvas-workspace-list button { display:grid; gap:3px; width:100%; padding:11px 12px; border:1px solid transparent; border-radius:10px; background:#202022; color:#fff; text-align:left; cursor:pointer; }
.canvas-workspace-list button.active { border-color:#34d399; background:rgba(52,211,153,.1); }
.canvas-workspace-list button small { color:#929299; }
.canvas-workspace-empty { min-height:360px; display:grid; place-items:center; color:#8e8e93; }
.canvas-workspace-detail-head { display:flex; gap:12px; align-items:flex-start; justify-content:space-between; }
.canvas-workspace-detail-head h4 { margin:0; font-size:22px; }
.canvas-workspace-detail-head p { margin:7px 0 0; color:#9b9ba1; }
.canvas-workspace-detail-actions { display:flex; flex-wrap:wrap; gap:8px; }
.canvas-workspace-detail-actions button,
.canvas-workspace-member-form button,
.canvas-workspace-assets-toolbar button { min-height:38px; border:1px solid rgba(255,255,255,.15); border-radius:9px; background:#2a2a2d; color:#fff; padding:0 13px; cursor:pointer; }
.canvas-workspace-detail-actions button.primary,
.canvas-workspace-member-form button,
.canvas-workspace-assets-toolbar button { border-color:#34d399; background:#153a31; }
.canvas-workspace-section { margin-top:24px; }
.canvas-workspace-section h5 { margin:0 0 10px; font-size:14px; }
.canvas-workspace-member-form { display:grid; grid-template-columns:minmax(0,1fr) 130px auto; gap:8px; }
.canvas-workspace-member-form input,
.canvas-workspace-member-form select,
.canvas-workspace-assets-toolbar input,
.canvas-workspace-assets-toolbar select,
.canvas-publication-options input[type="text"] { min-height:40px; border:1px solid rgba(255,255,255,.14); border-radius:9px; background:#202022; color:#fff; padding:0 11px; }
.canvas-workspace-members,
.canvas-workspace-projects { display:grid; gap:8px; }
.canvas-workspace-list-spaced { margin-top:10px; }
.canvas-workspace-row { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:10px; padding:10px 12px; border:1px solid rgba(255,255,255,.09); border-radius:10px; background:#1d1d1f; }
.canvas-workspace-row span { overflow:hidden; text-overflow:ellipsis; }
.canvas-workspace-row small { color:#9b9ba1; }
.canvas-workspace-row button { border:0; background:transparent; color:#ff8a8a; cursor:pointer; }
.canvas-workspace-assets-toolbar { display:grid; grid-template-columns:180px 140px minmax(160px,1fr) auto; gap:10px; padding:16px 20px 0; }
.canvas-workspace-billing-note { margin:10px 20px 0; color:#8e8e93; font-size:12px; }
.canvas-workspace-assets-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:12px; padding:18px 20px 24px; max-height:calc(92vh - 190px); overflow:auto; }
.canvas-workspace-asset-card { overflow:hidden; border:1px solid rgba(255,255,255,.1); border-radius:12px; background:#202022; }
.canvas-workspace-asset-preview { display:grid; place-items:center; height:126px; background:#111; color:#8e8e93; overflow:hidden; }
.canvas-workspace-asset-preview img,
.canvas-workspace-asset-preview video { width:100%; height:100%; object-fit:cover; }
.canvas-workspace-asset-copy { padding:10px; }
.canvas-workspace-asset-copy strong,
.canvas-workspace-asset-copy small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.canvas-workspace-asset-copy small { margin-top:4px; color:#929299; }
.canvas-workspace-asset-actions { display:flex; gap:7px; padding:0 10px 10px; }
.canvas-workspace-asset-actions button { flex:1; min-height:34px; border:1px solid rgba(255,255,255,.13); border-radius:8px; background:#2b2b2e; color:#fff; cursor:pointer; }
.canvas-workspace-asset-actions button:first-child { border-color:#34d399; color:#b7f7db; }
.canvas-publication-options { display:grid; gap:10px; padding:13px 14px; border:1px solid rgba(255,255,255,.09); border-radius:10px; background:rgba(255,255,255,.025); }
.canvas-publication-options label { color:#d6d6da; font-size:13px; }
.canvas-publication-options button { min-height:40px; border:1px solid #34d399; border-radius:9px; background:#153a31; color:#d7fff0; font-weight:700; cursor:pointer; }
@media (max-width:760px) {
    .canvas-workspace-home-actions select { min-width:110px; }
    .canvas-workspace-home-actions > button:not(.canvas-project-new-folder) { display:none; }
    .canvas-workspace-layout { grid-template-columns:1fr; }
    .canvas-workspace-layout > aside { border-right:0; border-bottom:1px solid rgba(255,255,255,.1); max-height:180px; }
    .canvas-workspace-assets-toolbar { grid-template-columns:1fr 1fr; }
    .canvas-workspace-assets-toolbar input { grid-column:1 / -1; }
}

.canvas-share-modal {
    position: fixed;
    inset: 0;
    z-index: 2147483450;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0,0,0,.50);
    backdrop-filter: blur(4px);
    pointer-events: none;
}
.canvas-share-modal.show {
    display: flex;
    pointer-events: auto;
}
.canvas-trim-modal {
    position: fixed;
    inset: 0;
    z-index: 2147483460;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0,0,0,.68);
    backdrop-filter: blur(7px);
}
.canvas-trim-modal.show { display: flex; }
.canvas-lighting-modal { position: fixed; inset: 0; z-index: 2147483470; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(0,0,0,.72); backdrop-filter: blur(8px); }
.canvas-lighting-modal.show { display: flex; }
.canvas-lighting-dialog { width: min(1050px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; border: 1px solid rgba(255,255,255,.14); border-radius: 18px; background: #1e1e1f; color: #fff; box-shadow: 0 34px 110px rgba(0,0,0,.72); }
.canvas-lighting-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding: 18px 20px; border-bottom: 1px solid rgba(255,255,255,.08); }
.canvas-lighting-head h3 { margin: 0 0 6px; font-size: 16px; }.canvas-lighting-head p { margin: 0; color: rgba(255,255,255,.55); font-size: 12px; }.canvas-lighting-head button { border: 0; background: transparent; color: rgba(255,255,255,.72); font-size: 25px; cursor: pointer; }
.canvas-lighting-body { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(280px,.8fr); gap: 18px; padding: 20px; }
.canvas-lighting-column { min-width: 0; }.canvas-lighting-section-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 11px; }.canvas-lighting-section-title span { color: rgba(255,255,255,.46); font-size: 12px; }
.canvas-lighting-sphere { display: grid; gap: 7px; padding: 28px; border: 1px solid rgba(255,255,255,.09); border-radius: 50%; background: radial-gradient(circle at 38% 30%,rgba(255,255,255,.16),rgba(255,255,255,.035) 46%,rgba(0,0,0,.3)); aspect-ratio: 1.35; align-content: center; }
.canvas-lighting-sphere.key { grid-template-columns: repeat(5,minmax(0,1fr)); }.canvas-lighting-sphere.rim { grid-template-columns: repeat(3,minmax(0,1fr)); aspect-ratio: 1; }
.canvas-lighting-sphere button { min-width: 0; min-height: 48px; border: 1px solid rgba(255,255,255,.10); border-radius: 10px; background: rgba(0,0,0,.32); color: rgba(255,255,255,.66); padding: 5px; font-size: 10px; cursor: pointer; }.canvas-lighting-sphere button i { display: block; width: 9px; height: 9px; margin: 0 auto 4px; border-radius: 50%; background: rgba(255,255,255,.32); box-shadow: 0 0 0 3px rgba(255,255,255,.05); }.canvas-lighting-sphere button.active { border-color: #fff; background: rgba(255,255,255,.16); color: #fff; }.canvas-lighting-sphere button.active i { background: #fff; box-shadow: 0 0 14px #fff; }
.canvas-lighting-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 15px; }.canvas-lighting-controls label,.canvas-lighting-extra { display: grid; gap: 6px; color: rgba(255,255,255,.58); font-size: 11px; }.canvas-lighting-controls select,.canvas-lighting-extra textarea { border: 1px solid rgba(255,255,255,.11); border-radius: 9px; background: rgba(255,255,255,.06); color: #fff; padding: 9px; font: inherit; }.canvas-lighting-extra { margin-top: 12px; }.canvas-lighting-extra textarea { min-height: 88px; resize: vertical; }
.canvas-lighting-actions { grid-column: 1/-1; display: flex; justify-content: flex-end; gap: 10px; }.canvas-lighting-actions button { height: 40px; border: 0; border-radius: 10px; background: rgba(255,255,255,.10); color: #fff; padding: 0 18px; font-weight: 800; cursor: pointer; }.canvas-lighting-actions button.primary { background: #fff; color: #171717; }
@media (max-width: 780px) { .canvas-lighting-body { grid-template-columns: 1fr; }.canvas-lighting-sphere { border-radius: 28px; aspect-ratio: auto; padding: 16px; }.canvas-lighting-sphere.key { grid-template-columns: repeat(3,minmax(0,1fr)); } }
.canvas-director-motion-modal { position: fixed; inset: 0; z-index: 2147483475; display: none; align-items: center; justify-content: center; padding: 18px; background: rgba(0,0,0,.76); backdrop-filter: blur(9px); }
.canvas-director-motion-modal.show { display: flex; }
.canvas-director-motion-dialog { width: min(1180px, calc(100vw - 28px)); max-height: calc(100vh - 28px); overflow: auto; border: 1px solid rgba(255,255,255,.14); border-radius: 18px; background: #191a1b; color: #fff; box-shadow: 0 36px 120px rgba(0,0,0,.76); }
.canvas-director-motion-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 18px 20px; border-bottom: 1px solid rgba(255,255,255,.09); }
.canvas-director-motion-head h3 { margin: 0 0 6px; font-size: 17px; }.canvas-director-motion-head p { max-width: 760px; margin: 0; color: rgba(255,255,255,.56); font-size: 12px; line-height: 1.55; }.canvas-director-motion-head button { border: 0; background: transparent; color: rgba(255,255,255,.72); font-size: 26px; cursor: pointer; }
.canvas-director-motion-body { padding: 18px; }
.canvas-director-motion-toolbar { display: grid; grid-template-columns: minmax(180px,1.25fr) 100px auto minmax(180px,1fr) 150px auto; gap: 10px; align-items: end; margin-bottom: 14px; }
.canvas-director-motion-toolbar label { display: grid; gap: 6px; min-width: 0; color: rgba(255,255,255,.6); font-size: 11px; }.canvas-director-motion-toolbar select,.canvas-director-motion-toolbar input { min-width: 0; height: 38px; border: 1px solid rgba(255,255,255,.12); border-radius: 9px; background: rgba(255,255,255,.06); color: #fff; padding: 0 10px; font: inherit; }
.canvas-director-motion-kinds,.canvas-director-motion-history { display: flex; gap: 6px; }.canvas-director-motion-kinds button,.canvas-director-motion-history button { height: 38px; border: 1px solid rgba(255,255,255,.11); border-radius: 9px; background: rgba(255,255,255,.06); color: rgba(255,255,255,.72); padding: 0 11px; cursor: pointer; }.canvas-director-motion-kinds button::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--track-color); }.canvas-director-motion-kinds button.active { border-color: var(--track-color); background: color-mix(in srgb,var(--track-color) 18%,transparent); color: #fff; }.canvas-director-motion-history button:disabled { opacity: .35; cursor: default; }
.canvas-director-motion-workspace { display: grid; grid-template-columns: minmax(0,1fr) 250px; gap: 14px; }
.canvas-director-motion-stage { position: relative; min-height: 390px; overflow: hidden; border: 1px solid rgba(255,255,255,.11); border-radius: 13px; background: linear-gradient(135deg,#242627,#141516); aspect-ratio: 16/9; user-select: none; touch-action: none; }.canvas-director-motion-stage > img,.canvas-director-motion-stage > video { display: block; width: 100%; height: 100%; object-fit: contain; background: #0d0e0f; pointer-events: none; }.canvas-director-motion-stage > svg { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; touch-action: none; }.canvas-director-motion-track { cursor: pointer; filter: drop-shadow(0 2px 4px rgba(0,0,0,.65)); }.canvas-director-motion-track.selected polyline { filter: drop-shadow(0 0 7px currentColor); }.canvas-director-motion-track text { font-size: 19px; font-weight: 800; paint-order: stroke; stroke: rgba(0,0,0,.72); stroke-width: 5px; stroke-linejoin: round; }.canvas-director-motion-hint { position: absolute; left: 12px; bottom: 10px; border-radius: 7px; background: rgba(0,0,0,.58); color: rgba(255,255,255,.76); padding: 6px 9px; font-size: 11px; pointer-events: none; }.canvas-director-motion-empty { position: absolute; inset: 0; display: grid; place-items: center; padding: 28px; color: rgba(255,255,255,.45); text-align: center; font-size: 13px; }
.canvas-director-motion-list { min-height: 0; max-height: 460px; overflow: auto; border: 1px solid rgba(255,255,255,.10); border-radius: 12px; background: rgba(255,255,255,.035); padding: 10px; }.canvas-director-motion-list header { display: flex; justify-content: space-between; align-items: center; margin: 2px 2px 9px; }.canvas-director-motion-list header span { color: rgba(255,255,255,.44); font-size: 11px; }.canvas-director-motion-list > p { margin: 24px 8px; color: rgba(255,255,255,.45); font-size: 12px; line-height: 1.6; }.canvas-director-motion-list > button { display: grid; grid-template-columns: 10px minmax(0,1fr) 24px; gap: 9px; align-items: center; width: 100%; margin-bottom: 7px; border: 1px solid rgba(255,255,255,.08); border-radius: 9px; background: rgba(255,255,255,.04); color: #fff; padding: 9px; text-align: left; cursor: pointer; }.canvas-director-motion-list > button.active { border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.10); }.canvas-director-motion-list button > i { width: 8px; height: 8px; border-radius: 50%; background: var(--track-color); }.canvas-director-motion-list button > span { min-width: 0; }.canvas-director-motion-list button strong,.canvas-director-motion-list button small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.canvas-director-motion-list button strong { font-size: 12px; }.canvas-director-motion-list button small { margin-top: 3px; color: rgba(255,255,255,.48); font-size: 10px; }.canvas-director-motion-list button em { color: rgba(255,255,255,.5); font-style: normal; font-size: 18px; text-align: center; }
.canvas-director-motion-notes { display: grid; gap: 7px; margin-top: 14px; color: rgba(255,255,255,.6); font-size: 11px; }.canvas-director-motion-notes textarea { min-height: 72px; resize: vertical; border: 1px solid rgba(255,255,255,.11); border-radius: 10px; background: rgba(255,255,255,.055); color: #fff; padding: 10px 12px; font: inherit; }
.canvas-director-motion-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 14px; }.canvas-director-motion-actions > span { margin-right: auto; color: rgba(255,255,255,.43); font-size: 11px; }.canvas-director-motion-actions button { height: 40px; border: 0; border-radius: 10px; background: rgba(255,255,255,.10); color: #fff; padding: 0 18px; font-weight: 800; cursor: pointer; }.canvas-director-motion-actions button.primary { background: #fff; color: #171717; }
.canvas-director-motion-summary { display: flex; justify-content: space-between; gap: 8px; margin: 8px 12px 0; border: 1px solid rgba(94,234,212,.22); border-radius: 8px; background: rgba(94,234,212,.08); color: #dffdfa; padding: 7px 9px; font-size: 10px; }.canvas-director-motion-summary span { color: rgba(223,253,250,.62); }.canvas-director-motion-summary.empty { display: block; border-color: rgba(255,255,255,.08); background: rgba(255,255,255,.035); color: rgba(255,255,255,.5); }
@media (max-width: 1040px) { .canvas-director-motion-toolbar { grid-template-columns: repeat(3,minmax(0,1fr)); }.canvas-director-motion-workspace { grid-template-columns: 1fr; }.canvas-director-motion-list { max-height: 220px; }.canvas-director-motion-stage { min-height: 300px; } }
@media (max-width: 650px) { .canvas-director-motion-modal { padding: 6px; }.canvas-director-motion-dialog { width: calc(100vw - 12px); max-height: calc(100vh - 12px); }.canvas-director-motion-toolbar { grid-template-columns: 1fr 1fr; }.canvas-director-motion-kinds,.canvas-director-motion-history { grid-column: 1/-1; flex-wrap: wrap; }.canvas-director-motion-stage { min-height: 220px; }.canvas-director-motion-actions { flex-wrap: wrap; }.canvas-director-motion-actions > span { width: 100%; } }
.canvas-trim-dialog {
    width: min(820px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    overflow: auto;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 18px;
    background: #1f1f20;
    color: #fff;
    box-shadow: 0 32px 100px rgba(0,0,0,.7);
}
.canvas-trim-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 20px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.canvas-trim-head h3 { margin: 0 0 6px; font-size: 16px; }
.canvas-trim-head p { margin: 0; color: rgba(255,255,255,.56); font-size: 12px; }
.canvas-trim-head > button { border: 0; background: transparent; color: rgba(255,255,255,.72); font-size: 25px; cursor: pointer; }
.canvas-trim-body { padding: 20px; }
.canvas-trim-loading { min-height: 240px; display: grid; place-items: center; color: rgba(255,255,255,.58); }
.canvas-trim-preview { display: grid; place-items: center; min-height: 92px; margin-bottom: 18px; border-radius: 12px; overflow: hidden; background: #111; }
.canvas-trim-preview video { display: block; width: 100%; max-height: 330px; background: #000; }
.canvas-trim-preview audio { width: calc(100% - 32px); }
.canvas-trim-timeline { position: relative; height: 112px; border: 1px solid rgba(255,255,255,.10); border-radius: 12px; background: #151516; overflow: hidden; }
.canvas-trim-waveform { position: absolute; inset: 12px 8px 24px; display: flex; align-items: center; gap: 2px; opacity: .86; }
.canvas-trim-waveform i { flex: 1 1 0; min-width: 1px; border-radius: 2px; background: linear-gradient(180deg,#fff,#a6a6a6); }
.canvas-trim-selection { position: absolute; inset: 0 auto 0 0; width: 100%; border-left: 3px solid #fff; border-right: 3px solid #fff; background: rgba(255,255,255,.08); pointer-events: none; }
.canvas-trim-timeline input[type="range"] { position: absolute; left: 8px; right: 8px; bottom: 4px; width: calc(100% - 16px); margin: 0; background: transparent; accent-color: #fff; }
.canvas-trim-timeline input.start { bottom: 5px; }
.canvas-trim-timeline input.end { bottom: 21px; }
.canvas-trim-selection-summary { margin-top: 10px; color: rgba(255,255,255,.72); font-size: 12px; font-variant-numeric: tabular-nums; }
.canvas-trim-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.canvas-trim-fields label { display: grid; gap: 7px; color: rgba(255,255,255,.62); font-size: 12px; }
.canvas-trim-fields input { height: 40px; border: 1px solid rgba(255,255,255,.12); border-radius: 9px; background: rgba(255,255,255,.06); color: #fff; padding: 0 12px; font: inherit; }
.canvas-trim-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.canvas-trim-actions button { height: 40px; border: 0; border-radius: 10px; background: rgba(255,255,255,.10); color: #fff; padding: 0 18px; font-weight: 800; cursor: pointer; }
.canvas-trim-actions button.primary { background: #fff; color: #171717; }
@media (max-width: 640px) { .canvas-trim-fields { grid-template-columns: 1fr; } .canvas-trim-preview video { max-height: 240px; } }
.canvas-share-dialog {
    width: min(620px, calc(100vw - 40px));
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 14px;
    background: rgba(36,36,36,.98);
    box-shadow: 0 28px 80px rgba(0,0,0,.58);
    color: #fff;
    overflow: hidden;
}
.canvas-share-head {
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
body.ui-polished-creator .canvas-share-head h3,
.canvas-share-head h3 {
    margin: 0 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    font-family: inherit !important;
    letter-spacing: 0 !important;
}
.canvas-share-close {
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: rgba(255,255,255,.72);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.canvas-share-close:hover {
    background: rgba(255,255,255,.08);
    color: #fff;
}
.canvas-share-body {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 24px;
}
.canvas-share-link-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
}
.canvas-share-link-row.is-empty {
    display: none;
}
.canvas-collaboration-conflict {
    display: grid;
    gap: 12px;
    padding: 13px 14px;
    border: 1px solid rgba(255,201,92,.28);
    border-radius: 10px;
    background: rgba(128,91,16,.18);
}
.canvas-collaboration-conflict[hidden] {
    display: none !important;
}
.canvas-collaboration-conflict h4 {
    margin: 0 0 4px;
    color: #ffe5a8;
    font-size: 13px;
}
.canvas-collaboration-conflict p {
    margin: 0;
    color: rgba(255,237,195,.68);
    font-size: 11px;
    line-height: 1.5;
}
.canvas-collaboration-conflict-list {
    display: grid;
    gap: 8px;
    max-height: min(420px, 48vh);
    overflow: auto;
    padding-right: 2px;
}
.canvas-collaboration-conflict-card {
    display: grid;
    gap: 7px;
    padding: 9px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 9px;
    background: rgba(0,0,0,.14);
}
.canvas-collaboration-conflict-card > strong {
    overflow-wrap: anywhere;
    color: rgba(255,245,219,.86);
    font-size: 11px;
}
.canvas-collaboration-conflict-compare {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}
.canvas-collaboration-conflict-option {
    min-width: 0;
    display: grid;
    gap: 5px;
    padding: 7px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 8px;
    background: rgba(255,255,255,.035);
    cursor: pointer;
}
.canvas-collaboration-conflict-option:has(input:checked) {
    border-color: rgba(255,215,134,.48);
    background: rgba(255,215,134,.10);
}
.canvas-collaboration-conflict-option > span {
    display: flex;
    align-items: center;
    gap: 6px;
    color: rgba(255,255,255,.76);
    font-size: 10px;
    font-weight: 800;
}
.canvas-collaboration-conflict-option input { accent-color: #ffd17b; }
.canvas-collaboration-conflict-option code {
    min-height: 42px;
    max-height: 96px;
    overflow: auto;
    padding: 6px;
    border-radius: 6px;
    background: rgba(0,0,0,.22);
    color: rgba(255,255,255,.67);
    font: 10px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.canvas-collaboration-conflict-legacy {
    padding: 9px;
    border-radius: 8px;
    background: rgba(255,255,255,.05);
}
.canvas-collaboration-conflict-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 7px;
}
.canvas-collaboration-conflict-actions button {
    min-height: 34px;
    border: 0;
    border-radius: 8px;
    background: #ffe0a0;
    color: #352408;
    padding: 0 11px;
    font: inherit;
    font-size: 11px;
    font-weight: 850;
    cursor: pointer;
}
.canvas-collaboration-conflict-actions button.discard {
    background: rgba(255,255,255,.09);
    color: rgba(255,255,255,.65);
}
.canvas-collaboration-conflict-actions button.apply {
    background: #caffed;
    color: #07120e;
}
@media (max-width: 640px) {
    .canvas-collaboration-conflict-compare { grid-template-columns: 1fr; }
    .canvas-collaboration-conflict-actions { justify-content: stretch; }
    .canvas-collaboration-conflict-actions button { flex: 1 1 auto; }
}
.canvas-collaborator-panel {
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,.09);
}
.canvas-collaborator-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}
.canvas-collaborator-heading h4 {
    margin: 0 0 5px;
    color: #fff;
    font-size: 14px;
}
.canvas-collaborator-heading p {
    margin: 0;
    color: rgba(255,255,255,.58);
    font-size: 12px;
    line-height: 1.5;
}
.canvas-collaborator-heading > span {
    flex: none;
    color: rgba(255,255,255,.62);
    font-size: 12px;
}
.canvas-collaborator-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 108px 72px;
    gap: 8px;
    margin-bottom: 12px;
}
.canvas-collaborator-form input,
.canvas-collaborator-form select,
.canvas-collaborator-form button {
    height: 38px;
    border-radius: 8px;
    font: inherit;
}
.canvas-collaborator-form input,
.canvas-collaborator-form select {
    min-width: 0;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.07);
    color: #fff;
    padding: 0 11px;
    outline: none;
}
.canvas-collaborator-form button {
    border: 0;
    background: #fff;
    color: #171717;
    font-weight: 850;
    cursor: pointer;
}
.canvas-collaborator-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
    max-height: 220px;
    overflow: auto;
}
.canvas-collaborator-list > p {
    margin: 0;
    padding: 12px;
    border-radius: 8px;
    background: rgba(255,255,255,.045);
    color: rgba(255,255,255,.56);
    font-size: 12px;
}
.canvas-collaborator-item {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 7px 9px 7px 12px;
    border-radius: 8px;
    background: rgba(255,255,255,.055);
    font-size: 13px;
}
.canvas-collaborator-item b {
    color: rgba(255,255,255,.70);
    font-size: 12px;
}
.canvas-collaborator-item i {
    color: rgba(255,255,255,.38);
    font-size: 11px;
    font-style: normal;
}
.canvas-collaborator-item i.online {
    color: #6ee7b7;
}
.canvas-collaborator-item button {
    border: 0;
    border-radius: 7px;
    background: rgba(255,92,92,.14);
    color: #ff9f9f;
    padding: 6px 9px;
    cursor: pointer;
}
body.canvas-project-readonly #canvasLibTitle {
    cursor: default;
    opacity: .78;
}
body.canvas-project-readonly #canvas-panel .canvas-resize-handle,
body.canvas-project-readonly #canvas-panel .canvas-port-plus {
    pointer-events: none;
    opacity: .22 !important;
    cursor: not-allowed !important;
}
body.canvas-project-readonly #canvas-panel .canvas-lib-rich-editable[contenteditable="true"],
body.canvas-project-readonly #canvas-panel [data-field][contenteditable="true"] {
    caret-color: transparent;
    cursor: default;
}
body.canvas-project-readonly #canvas-panel .canvas-node-gen-panel button[type="submit"],
body.canvas-project-readonly #canvas-panel .canvas-node-gen-panel .canvas-node-gen-send,
body.canvas-project-readonly #canvas-panel .canvas-multi-selection-toolbar button:not([data-view-action]) {
    filter: saturate(.25);
    opacity: .48;
}
body.ui-polished-creator .canvas-share-input,
.canvas-share-input {
    min-width: 0;
    height: 40px !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 8px !important;
    background: rgba(88,88,88,.72) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    box-shadow: none !important;
    padding: 0 12px !important;
    font-size: 13px !important;
    outline: none !important;
}
body.ui-polished-creator .canvas-share-input:focus,
.canvas-share-input:focus {
    border-color: rgba(255,255,255,.18) !important;
    background: rgba(88,88,88,.72) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    box-shadow: none !important;
}
.canvas-share-input::selection {
    background: rgba(123,101,255,.45);
    color: #fff;
}
.canvas-share-copy {
    height: 40px;
    min-width: 100px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 0;
    border-radius: 9px;
    background: #fff;
    color: #171717;
    padding: 0 14px;
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
}
.canvas-share-copy:hover {
    background: rgba(255,255,255,.92);
}
.canvas-share-copy-icon {
    position: relative;
    width: 14px;
    height: 14px;
    display: inline-block;
}
.canvas-share-copy-icon::before,
.canvas-share-copy-icon::after {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    border: 1.5px solid currentColor;
    border-radius: 2px;
}
.canvas-share-copy-icon::before {
    left: 1px;
    top: 4px;
}
.canvas-share-copy-icon::after {
    left: 4px;
    top: 1px;
    background: #fff;
}
@media (max-width: 560px) {
    .canvas-collaborator-form {
        grid-template-columns: 1fr 96px;
    }
    .canvas-collaborator-form button {
        grid-column: 1 / -1;
    }
    .canvas-share-body {
        grid-template-columns: 1fr;
    }
    .canvas-share-copy {
        width: 100%;
    }
}
.canvas-lib-top-icon,
.canvas-lib-pill {
    height: 34px;
    border-radius: 13px;
    border: 1px solid rgba(255,255,255,.11);
    background: rgba(38,38,38,.92);
    color: rgba(255,255,255,.88);
    box-shadow: 0 10px 24px rgba(0,0,0,.28);
}
.canvas-lib-top-icon {
    width: 34px;
    position: relative;
    cursor: pointer;
    font-weight: 950;
    display: inline-grid;
    place-items: center;
}
.canvas-lib-top-icon.copy-project {
    width: auto;
    min-width: 112px;
    padding: 0 14px;
    grid-auto-flow: column;
    gap: 8px;
    font-size: 15px;
    line-height: 1;
    text-indent: 0;
    white-space: nowrap;
}
.canvas-lib-top-icon.copy-project .canvas-copy-project-symbol {
    position: relative;
    width: 17px;
    height: 17px;
    display: inline-block;
    flex: 0 0 auto;
}
.canvas-lib-top-icon.copy-project .canvas-copy-project-symbol::before,
.canvas-lib-top-icon.copy-project .canvas-copy-project-symbol::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    border: 1.6px solid currentColor;
    border-radius: 2px;
}
.canvas-lib-top-icon.copy-project .canvas-copy-project-symbol::before {
    left: 1px;
    top: 5px;
}
.canvas-lib-top-icon.copy-project .canvas-copy-project-symbol::after {
    left: 5px;
    top: 1px;
    background: rgba(38,38,38,.92);
}
.canvas-lib-top-icon.copy-project .canvas-copy-project-symbol i {
    position: absolute;
    left: 5px;
    top: 10px;
    width: 7px;
    height: 1.6px;
    border-radius: 999px;
    background: currentColor;
    z-index: 2;
}
.canvas-lib-top-icon.copy-project .canvas-copy-project-symbol i::after {
    content: "";
    position: absolute;
    left: 2.7px;
    top: -2.7px;
    width: 1.6px;
    height: 7px;
    border-radius: 999px;
    background: currentColor;
}
.canvas-lib-top-icon.copy-project .canvas-copy-project-text {
    font-size: 15px;
    font-weight: 900;
    color: rgba(255,255,255,.94);
}
.canvas-lib-top-icon:hover,
.canvas-lib-pill:hover {
    background: rgba(58,58,58,.96);
    border-color: rgba(255,255,255,.20);
}
.canvas-lib-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 13px;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}
.canvas-lib-pill.connected {
    color: #b7fff1;
}
.canvas-lib-status-group {
    min-height: 34px;
    max-width: min(360px, 38vw);
    display: inline-flex;
    align-items: stretch;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 13px;
    background: rgba(38,38,38,.92);
    box-shadow: 0 10px 24px rgba(0,0,0,.28);
    pointer-events: auto;
}
.canvas-lib-status-group > .canvas-lib-pill {
    height: 32px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.canvas-lib-status-group > .canvas-lib-pill:hover {
    background: rgba(255,255,255,.065);
}
.canvas-lib-status-group > .canvas-lib-pill + .canvas-lib-pill {
    border-left: 1px solid rgba(255,255,255,.10);
}
.canvas-lib-status-group > .canvas-cloud-status {
    min-width: 0;
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.canvas-lib-pill.collaboration {
    appearance: none;
    gap: 7px;
    color: #d7fff5;
    cursor: pointer;
}
.canvas-lib-pill.collaboration[hidden] {
    display: none !important;
}
.canvas-lib-pill.collaboration > span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #48e0af;
    box-shadow: 0 0 0 3px rgba(72,224,175,.14), 0 0 12px rgba(72,224,175,.45);
}
.canvas-lib-pill.collaboration > b {
    font: inherit;
}
.canvas-lib-pill.collaboration.remote-change {
    color: #ffe5a8;
    border-color: rgba(255,201,92,.38);
}
.canvas-lib-pill.collaboration.remote-change > span {
    background: #ffc95c;
    box-shadow: 0 0 0 3px rgba(255,201,92,.15), 0 0 12px rgba(255,201,92,.45);
}
.canvas-lib-pill.collaboration.has-conflict {
    color: #ffd58a;
    border-color: rgba(255,166,61,.42);
}
.canvas-lib-pill.collaboration.has-conflict > span {
    background: #ff9f43;
    box-shadow: 0 0 0 3px rgba(255,159,67,.15), 0 0 12px rgba(255,159,67,.45);
}
body.canvas-mode-active #canvas-panel .canvas-node.remote-collaboration-active {
    border-color: rgba(255,201,92,.78) !important;
    filter: drop-shadow(0 0 12px rgba(255,201,92,.22));
}
body.canvas-mode-active #canvas-panel .canvas-node-collaboration-presence {
    position: absolute;
    top: 6px;
    left: 50%;
    z-index: 30;
    max-width: calc(100% - 90px);
    transform: translateX(-50%);
    overflow: hidden;
    padding: 4px 8px;
    border: 1px solid rgba(255,222,145,.46);
    border-radius: 999px;
    background: rgba(74,53,12,.92);
    color: #ffe6a8;
    box-shadow: 0 6px 16px rgba(0,0,0,.28);
    font-size: 10px;
    font-weight: 800;
    line-height: 1.2;
    pointer-events: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.canvas-mode-active #canvas-panel .canvas-collaboration-cursor {
    position: absolute;
    z-index: 90;
    display: flex;
    align-items: flex-start;
    gap: 4px;
    transform: translate(-2px, -2px) scale(var(--canvas-collaboration-cursor-scale, 1));
    transform-origin: 2px 2px;
    pointer-events: none;
}
body.canvas-mode-active #canvas-panel .canvas-collaboration-cursor i {
    display: block;
    width: 0;
    height: 0;
    border-top: 13px solid #ffc95c;
    border-right: 9px solid transparent;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,.38));
}
body.canvas-mode-active #canvas-panel .canvas-collaboration-cursor span {
    margin-top: 9px;
    padding: 3px 6px;
    border-radius: 5px;
    background: #805b10;
    color: #fff7da;
    box-shadow: 0 3px 10px rgba(0,0,0,.3);
    font-size: 10px;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
}
body.canvas-mode-active #canvas-panel .canvas-collaboration-cursor.role-editor i { border-top-color: #5eead4; }
body.canvas-mode-active #canvas-panel .canvas-collaboration-cursor.role-editor span { background: #11685e; color: #e6fffb; }
body.canvas-mode-active #canvas-panel .canvas-collaboration-cursor.role-viewer i { border-top-color: #c4b5fd; }
body.canvas-mode-active #canvas-panel .canvas-collaboration-cursor.role-viewer span { background: #57428a; color: #f4f0ff; }
.canvas-lib-pill.points {
    color: #fff4c0;
}
.canvas-lib-top-icon[data-canvas-toolbar-icon] {
    font-size: 0;
    line-height: 0;
    text-indent: 0;
    overflow: visible;
}
.canvas-lib-top-icon.copy-project[data-canvas-toolbar-icon] {
    font-size: 15px;
    line-height: 1;
}
.canvas-lib-top-icon[data-canvas-toolbar-icon]::before {
    content: none !important;
    display: none !important;
}
.canvas-lib-top-symbol {
    position: relative;
    display: block;
    color: rgba(255,255,255,.88);
    pointer-events: none;
}
.canvas-lib-top-symbol.keyboard {
    width: 15px;
    height: 11px;
    border: 1.4px solid currentColor;
    border-radius: 2px;
}
.canvas-lib-top-symbol.keyboard::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 2px;
    width: 2px;
    height: 1.6px;
    border-radius: 1px;
    background: currentColor;
    box-shadow: 3.2px 0 0 currentColor, 6.4px 0 0 currentColor, 9.6px 0 0 currentColor,
                0 3.2px 0 currentColor, 3.2px 3.2px 0 currentColor, 6.4px 3.2px 0 currentColor, 9.6px 3.2px 0 currentColor;
}
.canvas-lib-top-symbol.share {
    width: 16px;
    height: 16px;
}
.canvas-lib-top-symbol.share i {
    position: absolute;
    left: 5px;
    top: 7px;
    width: 8px;
    height: 1.4px;
    border-radius: 999px;
    background: currentColor;
    transform-origin: left center;
}
.canvas-lib-top-symbol.share i:first-child {
    transform: rotate(-31deg);
}
.canvas-lib-top-symbol.share i:nth-child(2) {
    transform: rotate(31deg);
}
.canvas-lib-top-symbol.share b {
    position: absolute;
    left: 1px;
    top: 6px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 10px -5px 0 currentColor, 10px 5px 0 currentColor;
}
.canvas-lib-left-rail {
    position: absolute;
    left: 18px;
    top: 50%;
    z-index: 1226;
    transform: translateY(-50%);
    display: grid;
    gap: 8px;
    padding: 8px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 16px;
    background: rgba(38,38,38,.82);
    box-shadow: 0 18px 42px rgba(0,0,0,.35);
    backdrop-filter: blur(16px);
}
.canvas-lib-rail-btn,
.canvas-lib-bottom-btn,
.canvas-lib-zoom-text {
    position: relative;
    border: 0;
    outline: none;
    border-radius: 11px;
    background: transparent;
    color: rgba(255,255,255,.78);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 950;
    transition: background .16s ease, color .16s ease, transform .16s ease;
}
.canvas-lib-rail-btn {
    width: 38px;
    height: 38px;
    font-size: 20px;
}
.canvas-lib-rail-btn.add {
    background: #f3f3f2;
    color: #252525;
    font-size: 30px;
    line-height: 1;
}
.canvas-lib-rail-btn:hover,
.canvas-lib-bottom-btn:hover,
.canvas-lib-zoom-text:hover,
.canvas-lib-rail-btn.active,
.canvas-lib-bottom-btn.active {
    background: rgba(255,255,255,.13);
    color: #fff;
}
.canvas-lib-rail-btn.add:hover {
    background: #fff;
    color: #111;
}
.canvas-lib-rail-btn::after,
.canvas-lib-bottom-btn::after,
.canvas-lib-zoom-text::after,
.canvas-lib-top-icon::after {
    content: attr(data-tip);
    position: absolute;
    z-index: 1250;
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
    padding: 7px 10px;
    border-radius: 8px;
    color: #fff;
    background: rgba(32,32,32,.96);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 14px 34px rgba(0,0,0,.30);
    font-size: 13px;
    font-weight: 850;
    transition: opacity .15s ease, transform .15s ease;
}
.canvas-lib-rail-btn::after {
    left: 50px;
    top: 50%;
    transform: translateY(-50%) translateX(-6px);
}
.canvas-lib-bottom-btn::after,
.canvas-lib-zoom-text::after {
    left: 50%;
    bottom: 45px;
    transform: translateX(-50%) translateY(6px);
}
.canvas-lib-top-icon::after {
    right: 0;
    top: 42px;
    transform: translateY(-6px);
}
.canvas-lib-rail-btn:hover::after,
.canvas-lib-bottom-btn:hover::after,
.canvas-lib-zoom-text:hover::after,
.canvas-lib-top-icon:hover::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}
.canvas-lib-rail-btn[data-canvas-toolbox-trigger].active::after {
    display: none;
}
.canvas-lib-bottom-btn:hover::after,
.canvas-lib-zoom-text:hover::after {
    transform: translateX(-50%) translateY(0);
}
.canvas-lib-top-icon:hover::after {
    transform: translateY(0);
}
.canvas-lib-icon::before {
    display: inline-block;
    font-size: 19px;
    line-height: 1;
}
.canvas-lib-icon.branches::before { content: "⌘"; }
.canvas-lib-icon.assets::before { content: "◇"; }
.canvas-lib-icon.history::before { content: "◷"; }
.canvas-lib-icon.help::before { content: "?"; }
.canvas-lib-icon.arrange::before { content: "⌗"; }
.canvas-lib-icon.map::before { content: "▱"; }
.canvas-lib-icon.snap {
    position: relative;
    width: 18px;
    height: 18px;
    display: inline-block;
}
.canvas-lib-icon.snap::before,
.canvas-lib-icon.snap::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 6px;
    border: 2px solid currentColor;
    border-radius: 999px;
    transform: rotate(-36deg);
    box-sizing: border-box;
}
.canvas-lib-icon.snap::before {
    left: 1px;
    top: 4px;
}
.canvas-lib-icon.snap::after {
    right: 1px;
    bottom: 4px;
}
.canvas-lib-bottom-bar {
    position: absolute;
    left: 18px;
    bottom: 18px;
    z-index: 1226;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 46px;
    padding: 6px 9px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 13px;
    background: rgba(38,38,38,.88);
    box-shadow: 0 18px 42px rgba(0,0,0,.36);
    backdrop-filter: blur(16px);
}
.canvas-lib-bottom-btn {
    width: 32px;
    height: 32px;
    font-size: 17px;
}
.canvas-lib-zoom-text {
    min-width: 58px;
    height: 32px;
    padding: 0 8px;
    font-size: 12px;
}
.canvas-lib-toolbox {
    position: absolute;
    left: 76px;
    top: 34px;
    z-index: 1224;
    display: none;
    width: 480px;
    max-width: calc(100vw - 104px);
    max-height: min(640px, calc(100vh - 68px));
    padding: 16px 16px 18px;
    border-radius: 9px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(35,35,35,.98);
    box-shadow: 0 22px 58px rgba(0,0,0,.42);
    color: rgba(255,255,255,.92);
    overflow: hidden;
}
.canvas-lib-toolbox.show {
    display: flex;
    flex-direction: column;
}
.canvas-toolbox-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 36px;
    padding: 0 0 12px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.canvas-toolbox-title-row {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}
.canvas-toolbox-title-row strong {
    color: #fff;
    font-size: 14px;
    font-weight: 900;
}
.canvas-toolbox-title-row > span:not(.canvas-toolbox-help) {
    color: rgba(255,255,255,.58);
    font-size: 13px;
    font-weight: 720;
    overflow: hidden;
    text-overflow: ellipsis;
}
.canvas-toolbox-help {
    width: 14px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.24);
    color: rgba(255,255,255,.58);
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
}
.canvas-toolbox-close {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: rgba(255,255,255,.58);
    font-size: 24px;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
}
.canvas-toolbox-close:hover {
    background: rgba(255,255,255,.08);
    color: #fff;
}
.canvas-toolbox-filters {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 10px 0 0;
}
.canvas-toolbox-filter {
    height: 28px;
    padding: 0 13px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.1);
    background: rgba(255,255,255,.055);
    color: rgba(255,255,255,.72);
    font-size: 12px;
    font-weight: 820;
    line-height: 1;
    cursor: pointer;
}
.canvas-toolbox-filter:hover {
    border-color: rgba(255,255,255,.22);
    color: #fff;
    background: rgba(255,255,255,.09);
}
.canvas-toolbox-filter.active {
    border-color: rgba(255,255,255,.92);
    background: rgba(255,255,255,.94);
    color: #161616;
    box-shadow: 0 8px 22px rgba(255,255,255,.08);
}
.canvas-toolbox-preset-grid {
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-content: start;
    gap: 20px 12px;
    padding: 14px 10px 4px 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.48) transparent;
}
.canvas-toolbox-preset-grid::-webkit-scrollbar {
    width: 6px;
}
.canvas-toolbox-preset-grid::-webkit-scrollbar-track {
    background: transparent;
}
.canvas-toolbox-preset-grid::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(255,255,255,.44);
}
.canvas-toolbox-preset-shell {
    position: relative;
    min-width: 0;
}
.canvas-toolbox-preset {
    display: block;
    width: 100%;
    min-width: 0;
    border: 0;
    padding: 0;
    background: transparent;
    color: rgba(255,255,255,.82);
    text-align: left;
    cursor: pointer;
}
.canvas-toolbox-preset-delete {
    position: absolute;
    z-index: 4;
    right: 7px;
    top: 7px;
    width: 26px;
    height: 26px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    background: rgba(16,16,16,.76);
    color: rgba(255,255,255,.76);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity .16s ease, background .16s ease, color .16s ease;
}
.canvas-toolbox-preset-shell:hover .canvas-toolbox-preset-delete,
.canvas-toolbox-preset-delete:focus-visible {
    opacity: 1;
}
.canvas-toolbox-preset-delete:hover {
    color: #fff;
    background: rgba(220,38,38,.88);
}
.canvas-toolbox-preset-thumb {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 8px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.07);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.canvas-toolbox-preset-thumb::before {
    content: '使用';
    position: absolute;
    right: 9px;
    top: 9px;
    z-index: 2;
    opacity: 0;
    height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgba(24,24,24,.78);
    border: 1px solid rgba(255,255,255,.16);
    font-size: 12px;
    font-weight: 860;
    transition: opacity .16s ease;
}
.canvas-toolbox-preset-thumb img,
.canvas-toolbox-preset-thumb video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
.canvas-toolbox-preset-thumb-fallback {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    color: rgba(255,255,255,.84);
    font-size: 28px;
    font-weight: 900;
    letter-spacing: 0;
}
.canvas-toolbox-preset-thumb-fallback.warm { background: radial-gradient(circle at 30% 25%, #8b5a33, #2b201b 58%, #151515); }
.canvas-toolbox-preset-thumb-fallback.graphite { background: radial-gradient(circle at 70% 30%, #8395a8, #222b33 50%, #111); }
.canvas-toolbox-preset-thumb-fallback.coffee { background: radial-gradient(circle at 50% 45%, #7b5b40, #2b201b 55%, #111); }
.canvas-toolbox-preset-thumb-fallback.candy { background: radial-gradient(circle at 35% 35%, #ff88c8, #8851ff 54%, #23112a); }
.canvas-toolbox-preset-thumb-fallback.studio { background: radial-gradient(circle at 64% 34%, #85f2ff, #4047a8 52%, #141421); }
.canvas-toolbox-preset-thumb-fallback.live2d { background: radial-gradient(circle at 30% 28%, #d9ccff, #3c4e91 56%, #17141d); }
.canvas-toolbox-preset-title {
    display: block;
    min-height: 18px;
    margin-top: 7px;
    padding: 0;
    color: rgba(255,255,255,.82);
    font-size: 12px;
    font-weight: 780;
    line-height: 18px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: normal;
    overflow-wrap: normal;
}
.canvas-toolbox-preset:hover .canvas-toolbox-preset-thumb,
.canvas-toolbox-preset.active .canvas-toolbox-preset-thumb {
    border-color: rgba(255,255,255,.42);
    box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 12px 26px rgba(0,0,0,.32);
}
.canvas-toolbox-preset:hover .canvas-toolbox-preset-thumb::before,
.canvas-toolbox-preset:focus-visible .canvas-toolbox-preset-thumb::before {
    opacity: 1;
}
.canvas-toolbox-preset.loading .canvas-toolbox-preset-thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
    animation: canvasToolboxPresetSweep 1s linear infinite;
}
.canvas-toolbox-empty {
    grid-column: 1 / -1;
    min-height: 180px;
    display: grid;
    place-items: center;
    color: rgba(255,255,255,.48);
    font-size: 13px;
    font-weight: 700;
}
@keyframes canvasToolboxPresetSweep {
    from { transform: translateX(-100%); }
    to { transform: translateX(100%); }
}
.canvas-lib-icon.role-library {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border: 1px solid currentColor;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
}
.canvas-role-library {
    position: absolute;
    left: 76px;
    top: 78px;
    z-index: 1238;
    display: none;
    width: 780px;
    max-width: calc(100vw - 104px);
    height: min(720px, calc(100vh - 64px));
    max-height: calc(100vh - 64px);
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 12px;
    background: rgba(28,28,30,.985);
    box-shadow: 0 24px 70px rgba(0,0,0,.5);
    color: rgba(255,255,255,.9);
    overflow: hidden;
}
.canvas-role-library.show {
    display: flex;
    flex-direction: column;
}
.canvas-role-library-head {
    flex: 0 0 auto;
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.canvas-role-library-head > div {
    min-width: 0;
    display: grid;
    gap: 3px;
}
.canvas-role-library-head strong { font-size: 15px; color: #fff; }
.canvas-role-library-head span { font-size: 11px; color: rgba(255,255,255,.5); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.canvas-role-library-head button,
.canvas-role-detail-title button {
    border: 0;
    background: transparent;
    color: rgba(255,255,255,.6);
    cursor: pointer;
}
.canvas-role-library-head button { width: 30px; height: 30px; font-size: 24px; }
.canvas-role-library-head button:hover { color: #fff; background: rgba(255,255,255,.08); border-radius: 8px; }
.canvas-subject-tabs {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 5px;
    padding: 9px 16px 0;
}
.canvas-subject-tabs button {
    min-height: 34px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 9px;
    background: rgba(255,255,255,.035);
    color: rgba(255,255,255,.58);
    font-size: 12px;
    font-weight: 780;
    cursor: pointer;
}
.canvas-subject-tabs button:hover { color: #fff; background: rgba(255,255,255,.07); }
.canvas-subject-tabs button.active { border-color: rgba(153,120,255,.52); background: rgba(116,83,210,.22); color: #f4f0ff; }
.canvas-role-library-tools {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 16px 8px;
}
.canvas-role-library-tools input[type="search"] {
    flex: 1 1 auto;
    min-width: 0;
    height: 34px;
    padding: 0 12px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 9px;
    outline: 0;
    background: rgba(255,255,255,.065);
    color: #fff;
    font-size: 12px;
}
.canvas-role-library-tools input[type="search"]:focus { border-color: rgba(151,116,255,.78); }
.canvas-role-library-tools label { display: flex; align-items: center; gap: 6px; white-space: nowrap; color: rgba(255,255,255,.66); font-size: 12px; }
.canvas-role-library-filters {
    position: relative;
    flex: 0 0 auto;
    max-height: 154px;
    padding: 0 16px 8px;
    overflow-y: auto;
    border-bottom: 1px solid rgba(255,255,255,.07);
}
.canvas-role-filter-row {
    display: grid;
    grid-template-columns: 66px 1fr;
    align-items: start;
    gap: 7px;
    min-height: 27px;
}
.canvas-role-filter-row strong { padding-top: 5px; color: rgba(255,255,255,.46); font-size: 11px; font-weight: 720; }
.canvas-role-filter-row > div { display: flex; flex-wrap: wrap; gap: 4px; }
.canvas-role-filter-row button,
.canvas-role-filter-clear {
    min-height: 23px;
    padding: 0 8px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: rgba(255,255,255,.66);
    font-size: 11px;
    cursor: pointer;
}
.canvas-role-filter-row button:hover { background: rgba(255,255,255,.08); color: #fff; }
.canvas-role-filter-row button.active { border-color: rgba(162,129,255,.72); background: rgba(124,92,220,.3); color: #f4f0ff; }
.canvas-role-filter-clear { position: absolute; right: 13px; top: 0; color: rgba(255,255,255,.45); }
.canvas-role-filter-clear:hover { color: #fff; }
.canvas-role-library-body {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
}
.canvas-role-library-list {
    min-height: 0;
    padding: 10px;
    overflow-y: auto;
    border-right: 1px solid rgba(255,255,255,.08);
}
.canvas-role-card {
    width: 100%;
    min-height: 58px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    padding: 8px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: #fff;
    text-align: left;
    cursor: pointer;
}
.canvas-role-card:hover { background: rgba(255,255,255,.06); }
.canvas-role-card.active { border-color: rgba(153,120,255,.48); background: rgba(116,83,210,.18); }
.canvas-role-avatar { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: linear-gradient(145deg,#6950aa,#27233a); color: #fff; font-size: 15px; font-weight: 900; }
.canvas-role-card > span:nth-child(2) { min-width: 0; display: grid; gap: 3px; }
.canvas-role-card strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.canvas-role-card small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgba(255,255,255,.45); font-size: 10px; }
.canvas-role-card em { padding: 3px 6px; border-radius: 999px; background: rgba(255,255,255,.08); color: rgba(255,255,255,.5); font-size: 9px; font-style: normal; }
.canvas-role-library-detail {
    min-width: 0;
    min-height: 0;
    padding: 16px;
    overflow-y: auto;
}
.canvas-role-detail-title { display: flex; justify-content: space-between; gap: 12px; align-items: start; }
.canvas-role-detail-title > div { display: grid; gap: 4px; }
.canvas-role-detail-title strong { color: #fff; font-size: 18px; }
.canvas-role-detail-title span { color: rgba(255,255,255,.46); font-size: 11px; }
.canvas-role-detail-title button { padding: 5px 8px; font-size: 11px; }
.canvas-role-detail-title button:hover { color: #ffaaa9; }
.canvas-role-reference-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; margin-top: 14px; }
.canvas-role-reference { position: relative; aspect-ratio: 3/4; overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 9px; background: rgba(255,255,255,.045); }
.canvas-role-reference img { width: 100%; height: 100%; object-fit: cover; }
.canvas-role-reference span { position: absolute; left: 5px; right: 5px; bottom: 5px; padding: 3px 5px; border-radius: 5px; background: rgba(10,10,10,.7); color: #fff; font-size: 9px; text-align: center; }
.canvas-role-reference.empty,
.canvas-role-reference.missing { display: grid; place-items: center; align-content: center; gap: 6px; color: rgba(255,255,255,.38); }
.canvas-role-reference.empty b { font-size: 20px; font-weight: 300; }
.canvas-role-reference.empty span,
.canvas-role-reference.missing span { position: static; background: transparent; color: inherit; }
.canvas-role-tag-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 13px; }
.canvas-role-tag-list span { padding: 4px 8px; border-radius: 999px; background: rgba(144,110,245,.14); color: #d9ccff; font-size: 10px; }
.canvas-role-library-detail > p { min-height: 42px; margin: 12px 0; color: rgba(255,255,255,.62); font-size: 12px; line-height: 1.65; white-space: pre-wrap; }
.canvas-role-detail-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.canvas-role-detail-actions button { min-height: 34px; padding: 0 13px; border: 1px solid rgba(255,255,255,.13); border-radius: 9px; background: rgba(255,255,255,.07); color: rgba(255,255,255,.84); font-size: 11px; font-weight: 760; cursor: pointer; }
.canvas-role-detail-actions button:hover { background: rgba(255,255,255,.12); color: #fff; }
.canvas-role-detail-actions button.primary { border-color: #8a6ce5; background: #7456cf; color: #fff; }
.canvas-role-empty { min-height: 130px; display: grid; place-items: center; padding: 20px; color: rgba(255,255,255,.42); font-size: 12px; text-align: center; }
@media (max-width: 760px) {
    .canvas-role-library { width: calc(100vw - 88px); }
    .canvas-role-library-body { grid-template-columns: 210px minmax(0,1fr); }
    .canvas-role-reference-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
.canvas-add-node-menu {
    position: absolute;
    left: 76px;
    top: 160px;
    z-index: 1246;
    width: 240px;
    max-height: calc(100vh - 32px);
    display: none;
    overflow-y: auto;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(34,34,34,.98);
    box-shadow: 0 22px 54px rgba(0,0,0,.46);
    color: #fff;
    transform: translateY(8px) scale(.98);
    transform-origin: left top;
    transition: opacity .16s ease, transform .18s ease;
}
.canvas-add-node-menu.show {
    display: grid;
    gap: 4px;
    opacity: 1;
    transform: translateY(0) scale(1);
}
.canvas-add-node-group {
    padding: 2px 2px 8px;
    color: rgba(225,229,232,.72);
    font-size: 14px;
    font-weight: 650;
}
.canvas-add-node-group.resource {
    padding-top: 12px;
}
.canvas-add-node-option {
    width: 100%;
    min-height: 48px;
    display: grid;
    grid-template-columns: 34px 1fr;
    align-items: center;
    gap: 9px;
    padding: 6px 8px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: #fff;
    text-align: left;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.canvas-add-node-option:hover {
    border-color: rgba(255,255,255,.26);
    background: rgba(255,255,255,.07);
}
.canvas-add-node-icon {
    position: relative;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: rgba(255,255,255,.12);
    color: rgba(255,255,255,.92);
}
.canvas-add-node-icon::before,
.canvas-add-node-icon::after {
    content: "";
    position: absolute;
    box-sizing: border-box;
}
.canvas-add-node-icon.icon-text::before {
    left: 9px;
    top: 10px;
    width: 16px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    box-shadow: 0 6px 0 currentColor, 0 12px 0 currentColor;
}
.canvas-add-node-icon.icon-image::before,
.canvas-add-node-icon.icon-video::before,
.canvas-add-node-icon.icon-history::before {
    left: 8px;
    top: 8px;
    width: 18px;
    height: 18px;
    border: 2px solid currentColor;
    border-radius: 3px;
}
.canvas-add-node-icon.icon-image::after,
.canvas-add-node-icon.icon-history::after {
    left: 12px;
    top: 17px;
    width: 12px;
    height: 8px;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: skewX(-28deg);
}
.canvas-add-node-icon.icon-video::after {
    left: 15px;
    top: 12px;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 9px solid currentColor;
}
.canvas-add-node-icon.icon-audio::before {
    left: 9px;
    top: 9px;
    width: 3px;
    height: 16px;
    border-radius: 2px;
    background: currentColor;
    box-shadow: 5px -3px 0 currentColor, 10px 2px 0 currentColor, 15px -5px 0 currentColor;
}
.canvas-add-node-icon.icon-script::before {
    left: 9px;
    top: 8px;
    width: 16px;
    height: 18px;
    border: 2px solid currentColor;
    border-radius: 3px;
}
.canvas-add-node-icon.icon-script::after {
    left: 13px;
    top: 14px;
    width: 9px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    box-shadow: 0 5px 0 currentColor;
}
.canvas-add-node-icon.icon-style::before {
    left: 8px;
    top: 8px;
    width: 18px;
    height: 18px;
    border: 2px solid currentColor;
    border-radius: 50%;
    box-shadow: inset 6px 0 0 rgba(139,92,246,.8), inset -5px -4px 0 rgba(34,211,238,.55);
}
.canvas-add-node-icon.icon-effect::before {
    left: 9px;
    top: 8px;
    width: 16px;
    height: 18px;
    background: currentColor;
    clip-path: polygon(50% 0, 62% 35%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 35%);
}
.canvas-add-node-icon.icon-agent::before {
    left: 8px;
    top: 8px;
    width: 18px;
    height: 18px;
    border: 2px solid currentColor;
    border-radius: 999px;
    box-shadow: inset 0 0 0 4px rgba(255,255,255,.08);
}
.canvas-add-node-icon.icon-agent::after {
    left: 15px;
    top: 15px;
    width: 4px;
    height: 4px;
    border-radius: 999px;
    background: currentColor;
    box-shadow: -8px -7px 0 -1px currentColor, 8px -7px 0 -1px currentColor, 0 10px 0 -1px currentColor;
}
.canvas-add-node-icon.icon-ad::before {
    left: 9px;
    top: 8px;
    width: 16px;
    height: 18px;
    border-left: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
}
.canvas-add-node-icon.icon-ad::after {
    left: 8px;
    top: 16px;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
}
.canvas-add-node-icon.icon-director::before {
    left: 9px;
    top: 10px;
    width: 16px;
    height: 11px;
    border: 2px solid currentColor;
    transform: rotate(-22deg);
}
.canvas-add-node-icon.icon-director::after {
    left: 9px;
    top: 16px;
    width: 16px;
    height: 11px;
    border: 2px solid currentColor;
    background: rgba(34,34,34,.98);
    transform: rotate(-22deg);
}
.canvas-add-node-icon.icon-upload {
    background: rgba(255,255,255,.12);
}
.canvas-add-node-icon.icon-upload::before {
    left: 10px;
    bottom: 9px;
    width: 14px;
    height: 6px;
    border: 2px solid currentColor;
    border-top: 0;
    border-radius: 0 0 2px 2px;
}
.canvas-add-node-icon.icon-upload::after {
    left: 10px;
    top: 7px;
    width: 14px;
    height: 14px;
    background: currentColor;
    clip-path: polygon(50% 0, 82% 34%, 64% 34%, 64% 82%, 36% 82%, 36% 34%, 18% 34%);
    box-shadow: none;
}
.canvas-add-node-copy {
    min-width: 0;
    display: grid;
    gap: 2px;
}
.canvas-add-node-copy span {
    display: block;
    color: rgba(255,255,255,.94);
    font-size: 14px;
    font-weight: 850;
    line-height: 1.12;
    transform: translateY(7px);
    transition: transform .16s ease;
}
.canvas-add-node-copy small {
    display: block;
    max-height: 0;
    overflow: hidden;
    color: rgba(220,225,229,.58);
    font-size: 11px;
    font-weight: 650;
    line-height: 1.2;
    opacity: 0;
    transform: translateY(-4px);
    transition: max-height .16s ease, opacity .16s ease, transform .16s ease;
}
.canvas-add-node-option:hover .canvas-add-node-copy span {
    transform: translateY(0);
}
.canvas-add-node-option:hover .canvas-add-node-copy small {
    max-height: 16px;
    opacity: 1;
    transform: translateY(0);
}
.canvas-history-assets-modal,
.canvas-history-preview-modal {
    position: fixed;
    inset: 0;
    z-index: 1350;
    display: none;
    color: rgba(255,255,255,.92);
}
.canvas-history-assets-modal.show,
.canvas-history-preview-modal.show {
    display: block;
}
.canvas-history-assets-backdrop,
.canvas-history-preview-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.62);
    backdrop-filter: blur(10px);
}
.canvas-history-assets-dialog {
    --canvas-history-thumb-size: 156px;
    position: absolute;
    left: 3vw;
    right: 3vw;
    top: 3vh;
    bottom: 3vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(34,34,34,.98);
    box-shadow: 0 30px 90px rgba(0,0,0,.55);
}
.canvas-history-assets-head {
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.canvas-history-assets-head h2 {
    margin: 0;
    font-size: 17px;
    font-weight: 850;
    color: #fff !important;
}
.canvas-history-assets-head-actions,
.canvas-history-assets-tools,
.canvas-history-assets-sort,
.canvas-history-assets-tabs {
    display: flex;
    align-items: center;
    gap: 12px;
}
.canvas-history-assets-zoom {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 32px;
    padding: 0 8px;
    border-radius: 8px;
    background: rgba(0,0,0,.34);
    border: 1px solid rgba(255,255,255,.10);
}
.canvas-history-assets-zoom button,
.canvas-history-assets-close,
.canvas-history-assets-tabs button,
.canvas-history-assets-sort button {
    border: 0;
    background: transparent;
    color: rgba(255,255,255,.76);
    font-weight: 800;
    cursor: pointer;
}
.canvas-history-assets-zoom button {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.canvas-history-assets-zoom button:hover,
.canvas-history-assets-close:hover,
.canvas-history-assets-sort button:hover {
    background: rgba(255,255,255,.10);
    color: #fff;
}
.canvas-history-batch-actions {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 32px;
    padding: 0 4px 0 8px;
    border: 1px solid rgba(177,255,229,.18);
    border-radius: 9px;
    background: rgba(177,255,229,.055);
}
.canvas-history-batch-actions[hidden] { display: none; }
.canvas-history-batch-actions span {
    min-width: 64px;
    color: rgba(255,255,255,.62);
    font-size: 11px;
    font-weight: 800;
}
.canvas-history-batch-actions button {
    min-width: 0;
    height: 26px;
    padding: 0 7px;
    font-size: 11px;
}
.canvas-history-batch-actions button:disabled { opacity: .35; cursor: not-allowed; }
.canvas-history-batch-actions button.danger:not(:disabled) { color: #ffb3b3; }
.canvas-history-assets-zoom span {
    min-width: 42px;
    text-align: center;
    color: #fff;
    font-size: 13px;
    font-weight: 900;
}
.canvas-history-assets-close {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    font-size: 25px;
    line-height: 1;
}
.canvas-history-assets-tools {
    justify-content: space-between;
    min-height: 56px;
    padding: 0 20px;
}
.canvas-history-assets-tabs button {
    height: 34px;
    padding: 0 4px;
    color: rgba(255,255,255,.50);
    font-size: 14px;
}
.canvas-history-assets-tabs button.active {
    color: #fff;
}
.canvas-history-assets-sort button {
    height: 32px;
    padding: 0 8px;
    border-radius: 8px;
    font-size: 13px;
}
.canvas-history-assets-body {
    flex: 1;
    overflow: auto;
    padding: 0 20px 26px;
    scrollbar-color: rgba(255,255,255,.36) transparent;
}
.canvas-history-assets-day {
    margin: 14px 0 26px;
}
.canvas-history-assets-day h3 {
    margin: 0 0 14px;
    color: #fff !important;
    font-size: 15px;
    font-weight: 900;
}
.canvas-history-assets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--canvas-history-thumb-size), var(--canvas-history-thumb-size)));
    gap: 14px;
    align-items: start;
}
.canvas-history-asset-card {
    width: var(--canvas-history-thumb-size);
    min-width: 0;
}
.canvas-history-asset-card.selected .canvas-history-asset-media {
    box-shadow: 0 0 0 2px #8ff0cf, 0 0 0 5px rgba(143,240,207,.14);
}
.canvas-history-asset-select {
    position: absolute;
    left: 8px;
    top: 8px;
    z-index: 4;
    width: 25px;
    height: 25px;
    display: none;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(255,255,255,.42);
    border-radius: 7px;
    background: rgba(7,10,10,.68);
    color: #07110e;
    font-size: 14px;
    font-weight: 950;
    cursor: pointer;
}
.canvas-history-assets-modal.batch-mode .canvas-history-asset-select { display: grid; }
.canvas-history-asset-card.selected .canvas-history-asset-select {
    border-color: #9ff5d8;
    background: #9ff5d8;
}
.canvas-history-assets-modal.batch-mode .canvas-history-asset-trash,
.canvas-history-assets-modal.batch-mode .canvas-history-asset-overlay { display: none !important; }
.canvas-history-assets-modal.batch-mode .canvas-history-asset-card { cursor: pointer; }
.canvas-history-assets-modal.batch-mode .canvas-history-asset-card:hover .canvas-history-asset-media img,
.canvas-history-assets-modal.batch-mode .canvas-history-asset-card:hover .canvas-history-asset-media video {
    filter: brightness(.76);
    transform: none;
}
.canvas-history-asset-media {
    position: relative;
    width: var(--canvas-history-thumb-size);
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 8px;
    background: rgba(255,255,255,.08);
}
.canvas-history-asset-media img,
.canvas-history-asset-media video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: filter .16s ease, transform .18s ease;
}
.canvas-history-asset-card:hover .canvas-history-asset-media img,
.canvas-history-asset-card:hover .canvas-history-asset-media video {
    filter: blur(3px) brightness(.55);
    transform: scale(1.04);
}
.canvas-history-asset-trash {
    position: absolute;
    right: 7px;
    top: 7px;
    z-index: 3;
    width: 24px;
    height: 24px;
    display: none;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: rgba(0,0,0,.52);
    color: #fff;
    cursor: pointer;
    transition: background .16s ease, transform .16s ease;
}
.canvas-history-asset-card:hover .canvas-history-asset-trash {
    display: flex;
}
.canvas-history-asset-trash:hover {
    background: rgba(0,0,0,.78);
    transform: scale(1.06);
}
.canvas-history-asset-trash span {
    position: relative;
    width: 13px;
    height: 13px;
    display: block;
}
.canvas-history-asset-trash span::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 5px;
    width: 7px;
    height: 7px;
    border: 1.8px solid currentColor;
    border-top: 0;
    border-radius: 0 0 2px 2px;
}
.canvas-history-asset-trash span::after {
    content: "";
    position: absolute;
    left: 1px;
    top: 2px;
    width: 11px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    box-shadow: 4px -2px 0 -1px currentColor;
}
.canvas-history-asset-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    opacity: 0;
    transition: opacity .16s ease;
}
.canvas-history-asset-card:hover .canvas-history-asset-overlay {
    opacity: 1;
}
.canvas-history-asset-overlay button {
    height: 34px;
    min-width: 58px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 8px;
    background: rgba(0,0,0,.64);
    color: #fff;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
}
.canvas-history-asset-overlay button.canvas-history-asset-view {
    background: rgba(255,255,255,.94);
    color: #151515;
    border-color: rgba(255,255,255,.88);
}
.canvas-history-asset-overlay button.canvas-history-asset-use {
    background: rgba(0,0,0,.72);
    color: #fff;
}
.canvas-history-asset-overlay button:hover {
    background: rgba(255,255,255,.92);
    color: #161616;
}
.canvas-history-asset-caption {
    display: grid;
    gap: 3px;
    padding-top: 8px;
}
.canvas-history-asset-caption strong,
.canvas-history-asset-caption span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.canvas-history-asset-caption strong {
    color: rgba(255,255,255,.86);
    font-size: 12px;
    font-weight: 850;
}
.canvas-history-asset-caption span {
    color: rgba(255,255,255,.44);
    font-size: 11px;
}
.canvas-history-asset-audio {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: #fff;
}
.canvas-history-asset-audio span {
    width: 6px;
    height: 32px;
    border-radius: 6px;
    background: rgba(255,255,255,.78);
}
.canvas-history-asset-audio span:nth-child(2) { height: 54px; }
.canvas-history-asset-audio span:nth-child(3) { height: 42px; }
.canvas-history-asset-audio span:nth-child(4) { height: 68px; }
.canvas-history-assets-empty {
    height: 45vh;
    display: grid;
    place-items: center;
    color: rgba(255,255,255,.48);
    font-size: 15px;
    font-weight: 800;
}
.canvas-history-preview-dialog {
    position: absolute;
    inset: 6vh 8vw;
    display: grid;
    place-items: center;
    pointer-events: none;
}
.canvas-history-preview-content {
    max-width: min(78vw, 1120px);
    max-height: 82vh;
    display: grid;
    gap: 14px;
    justify-items: center;
    pointer-events: auto;
}
.canvas-history-preview-content img,
.canvas-history-preview-content video {
    max-width: min(78vw, 1120px);
    max-height: 72vh;
    border-radius: 10px;
    object-fit: contain;
    background: #111;
    box-shadow: 0 24px 70px rgba(0,0,0,.58);
}
.canvas-history-preview-audio {
    min-width: 380px;
    display: grid;
    gap: 18px;
    padding: 28px;
    border-radius: 12px;
    background: rgba(34,34,34,.98);
}
.canvas-history-preview-audio .canvas-history-asset-audio {
    height: 170px;
    border-radius: 10px;
    background: rgba(255,255,255,.06);
}
.canvas-history-preview-audio audio {
    width: 100%;
}
.canvas-history-preview-close {
    position: absolute;
    right: 4vw;
    top: 4vh;
    z-index: 2;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 10px;
    background: rgba(255,255,255,.12);
    color: #fff;
    font-size: 28px;
    cursor: pointer;
}
.canvas-history-preview-close:hover {
    background: rgba(255,255,255,.22);
}
.canvas-history-preview-meta {
    max-width: min(78vw, 920px);
    padding: 10px 12px;
    border-radius: 9px;
    background: rgba(0,0,0,.56);
    color: rgba(255,255,255,.82);
    text-align: center;
}
.canvas-history-preview-meta strong {
    display: block;
    color: #fff;
    font-size: 14px;
}
.canvas-history-preview-meta p {
    margin: 5px 0 0;
    color: rgba(255,255,255,.66);
    font-size: 12px;
}
body.canvas-mode-active #canvas-panel .canvas-history-assets-head h2,
body.canvas-mode-active #canvas-panel .canvas-history-assets-day h3,
body.canvas-mode-active #canvas-panel .canvas-history-assets-tabs button.active {
    color: #fff !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.36);
}
body.canvas-mode-active #canvas-panel .canvas-history-assets-tabs button,
body.canvas-mode-active #canvas-panel .canvas-history-assets-sort button {
    color: rgba(255,255,255,.72) !important;
}
body.canvas-mode-active #canvas-panel .canvas-empty {
    width: auto !important;
    min-width: 280px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(255,255,255,.72) !important;
    pointer-events: none !important;
}
body.canvas-mode-active #canvas-panel .canvas-empty > * {
    display: none !important;
}
body.canvas-mode-active #canvas-panel .canvas-empty::before {
    content: "双击画布  自由生成节点";
    display: block;
    color: rgba(255,255,255,.70);
    font-size: 15px;
    font-weight: 850;
    letter-spacing: .02em;
    text-shadow: 0 8px 24px rgba(0,0,0,.5);
}
body.canvas-mode-active #canvas-panel .canvas-empty::after {
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    margin: -17px 0 0 -22px;
    border-radius: 50% 50% 50% 0;
    background: #fff;
    transform: rotate(-45deg);
    box-shadow: 0 0 0 2px rgba(255,255,255,.14);
}
body.canvas-mode-active #canvas-panel .canvas-minimap {
    display: block !important;
    left: 24px !important;
    right: auto !important;
    bottom: 82px !important;
    width: 178px !important;
    height: 116px !important;
    z-index: 1223 !important;
    opacity: 0;
    pointer-events: none;
    transform: translateY(18px) scale(.96);
    transform-origin: left bottom;
    transition: opacity .18s ease, transform .18s ease;
    border-radius: 14px !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    background:
        radial-gradient(circle at 1px 1px, rgba(255,255,255,.16) 1px, transparent 1.2px),
        rgba(32,32,32,.96) !important;
    background-size: 13px 13px, auto !important;
    box-shadow: 0 18px 42px rgba(0,0,0,.42) !important;
    overflow: visible !important;
}
body.canvas-mode-active #canvas-panel .canvas-minimap.show {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}
body.canvas-mode-active #canvas-panel .canvas-minimap::after {
    content: "画布小地图";
    position: absolute;
    left: 13px;
    bottom: 7px;
    color: #fff;
    font-size: 13px;
    font-weight: 850;
}
body.canvas-mode-active #canvas-panel .canvas-minimap-view {
    border-color: rgba(255,255,255,.62) !important;
    background: rgba(255,255,255,.08) !important;
}
body.canvas-mode-active #canvas-panel .canvas-minimap-node {
    background: rgba(180,210,210,.82) !important;
    border-color: rgba(255,255,255,.30) !important;
}
body.canvas-mode-active #canvas-panel .canvas-link-layer {
    pointer-events: none !important;
    overflow: visible !important;
}
body.canvas-mode-active #canvas-panel .canvas-link-hit {
    fill: none !important;
    stroke: rgba(255,255,255,0) !important;
    stroke-width: 22px !important;
    pointer-events: stroke !important;
    cursor: pointer !important;
}
body.canvas-mode-active #canvas-panel .canvas-link-path {
    stroke: rgba(255,255,255,.30) !important;
    stroke-width: 2px !important;
    pointer-events: stroke !important;
    filter: drop-shadow(0 5px 10px rgba(0,0,0,.24)) !important;
    transition: stroke .16s ease, stroke-width .16s ease, opacity .16s ease, filter .16s ease !important;
}
body.canvas-mode-active #canvas-panel .canvas-link-hit:hover + .canvas-link-path,
body.canvas-mode-active #canvas-panel .canvas-link-path:hover,
body.canvas-mode-active #canvas-panel .canvas-link-path.active,
body.canvas-mode-active #canvas-panel .canvas-link-path.selected {
    stroke: rgba(255,255,255,.96) !important;
    stroke-width: 2.8px !important;
    filter: drop-shadow(0 0 10px rgba(255,255,255,.18)) drop-shadow(0 8px 16px rgba(0,0,0,.38)) !important;
}
body.canvas-mode-active #canvas-panel .canvas-link-path.draft {
    stroke: #fff !important;
    stroke-width: 3px !important;
}
body.canvas-mode-active #canvas-panel .canvas-link-particle {
    fill: #fff !important;
    opacity: .92 !important;
    pointer-events: none !important;
    filter: drop-shadow(0 0 5px rgba(255,255,255,.48)) !important;
}
body.canvas-mode-active #canvas-panel .canvas-link-dot {
    fill: #101112 !important;
    stroke: rgba(255,255,255,.54) !important;
}
body.canvas-mode-active #canvas-panel .canvas-link-label {
    display: none !important;
    fill: #f5f5f5 !important;
    stroke: rgba(0,0,0,.86) !important;
}
body.canvas-mode-active #canvas-panel .canvas-node {
    background: rgba(28,29,31,.96) !important;
    border-color: rgba(255,255,255,.13) !important;
    color: rgba(255,255,255,.82) !important;
    box-shadow: 0 18px 44px rgba(0,0,0,.38) !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    -webkit-tap-highlight-color: transparent !important;
}
body.canvas-mode-active #canvas-panel .canvas-node.selected {
    border-color: rgba(183,255,241,.64) !important;
    box-shadow: 0 0 0 4px rgba(183,255,241,.12), 0 18px 44px rgba(0,0,0,.40) !important;
}
body.canvas-mode-active #canvas-panel .canvas-node.connection-tilt-left .canvas-lib-image-frame,
body.canvas-mode-active #canvas-panel .canvas-node.connection-tilt-left .canvas-lib-text-frame {
    transform: perspective(720px) rotateY(-6deg) scale(1.01) !important;
    transform-origin: left center !important;
    border-color: rgba(255,255,255,.52) !important;
}
body.canvas-mode-active #canvas-panel .canvas-node.connection-tilt-right .canvas-lib-image-frame,
body.canvas-mode-active #canvas-panel .canvas-node.connection-tilt-right .canvas-lib-text-frame {
    transform: perspective(720px) rotateY(6deg) scale(1.01) !important;
    transform-origin: right center !important;
    border-color: rgba(255,255,255,.52) !important;
}
body.canvas-mode-active #canvas-panel .canvas-node.connection-tilt-left:not(.lib-image-node):not(.lib-video-node):not(.lib-text-node),
body.canvas-mode-active #canvas-panel .canvas-node.connection-tilt-right:not(.lib-image-node):not(.lib-video-node):not(.lib-text-node) {
    border-color: rgba(255,255,255,.48) !important;
    box-shadow: 0 0 0 2px rgba(255,255,255,.12), 0 18px 44px rgba(0,0,0,.38) !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-head {
    background: rgba(255,255,255,.04) !important;
    border-bottom-color: rgba(255,255,255,.10) !important;
    color: #fff !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-body {
    color: rgba(255,255,255,.76) !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-chip,
body.canvas-mode-active #canvas-panel .canvas-node-badge {
    background: rgba(255,255,255,.09) !important;
    color: rgba(255,255,255,.86) !important;
}
body.canvas-mode-active #canvas-panel .canvas-mini-btn {
    background: rgba(255,255,255,.08) !important;
    border-color: rgba(255,255,255,.13) !important;
    color: rgba(255,255,255,.88) !important;
}
body.canvas-mode-active #canvas-panel .canvas-mini-btn:hover {
    background: rgba(255,255,255,.14) !important;
}
body.canvas-mode-active #canvas-panel .canvas-port-plus {
    background: #f5f5f4 !important;
    color: #202020 !important;
    border-color: rgba(255,255,255,.30) !important;
    opacity: .95 !important;
}
body.canvas-mode-active #canvas-panel .canvas-port-plus.connection-target {
    opacity: 1 !important;
    pointer-events: auto !important;
    border-color: rgba(255,255,255,.82) !important;
    background: rgba(255,255,255,.96) !important;
    color: #141414 !important;
    box-shadow: 0 0 0 6px rgba(255,255,255,.10), 0 10px 24px rgba(0,0,0,.34) !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-panel {
    background: rgba(28,28,28,.96) !important;
    border-color: rgba(255,255,255,.13) !important;
    color: #fff !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-head,
body.canvas-mode-active #canvas-panel .canvas-node-gen-head span {
    color: rgba(255,255,255,.86) !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-input,
body.canvas-mode-active #canvas-panel .canvas-node-gen-select {
    background: rgba(255,255,255,.08) !important;
    border-color: rgba(255,255,255,.13) !important;
    color: #fff !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-cost {
    background: rgba(255,255,255,.10) !important;
    border-color: rgba(255,255,255,.14) !important;
    color: #fff4c0 !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-send {
    background: #f5f5f4 !important;
    color: #111 !important;
    border-color: #f5f5f4 !important;
    box-shadow: none !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-close {
    background: rgba(255,255,255,.08) !important;
    border-color: rgba(255,255,255,.13) !important;
    color: #fff !important;
}
body.canvas-mode-active #canvas-panel .canvas-node.lib-image-node,
body.canvas-mode-active #canvas-panel .canvas-node.lib-image-node:hover,
body.canvas-mode-active #canvas-panel .canvas-node.lib-image-node.selected {
    display: block !important;
    min-height: 0 !important;
    overflow: visible !important;
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(255,255,255,.78) !important;
    transform: none !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-node-title {
    position: absolute;
    left: 0;
    top: 0;
    height: 22px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: rgba(255,255,255,.58);
    font-size: 13px;
    font-weight: 650;
    letter-spacing: 0;
    pointer-events: none;
    -webkit-user-select: none !important;
    user-select: none !important;
    background: transparent !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-node-title.canvas-title-container {
    pointer-events: auto;
}
body.canvas-mode-active #canvas-panel .canvas-lib-node-title-text.canvas-title-editable {
    min-width: 24px;
    max-width: min(520px, calc(100vw - 120px));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-radius: 4px;
    padding: 0 3px;
    outline: none;
    cursor: text;
    pointer-events: auto;
    -webkit-user-select: text !important;
    user-select: text !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-node-title-text.canvas-title-editable.is-editing {
    color: rgba(255,255,255,.96);
    background: rgba(255,255,255,.12);
    box-shadow: 0 0 0 1px rgba(124,92,255,.72);
}
body.canvas-mode-active #canvas-panel .canvas-lib-node-title i {
    font-size: 13px;
    color: rgba(255,255,255,.58);
}
body.canvas-mode-active #canvas-panel .canvas-lib-image-frame {
    position: absolute;
    left: 0;
    right: 0;
    top: 28px;
    bottom: 0;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.14);
    background: #252525;
    box-shadow: none;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease, transform .18s ease;
}
body.canvas-mode-active #canvas-panel .canvas-node.lib-image-node:hover .canvas-lib-image-frame {
    border-color: rgba(255,255,255,.28);
}
body.canvas-mode-active #canvas-panel .canvas-node.lib-image-node.selected .canvas-lib-image-frame {
    border-color: rgba(255,255,255,.64);
    box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 16px 40px rgba(0,0,0,.34);
}
body.canvas-mode-active.canvas-node-dragging #canvas-panel,
body.canvas-mode-active.canvas-node-dragging #canvas-panel * {
    -webkit-user-select: none !important;
    user-select: none !important;
}
body.canvas-mode-active.canvas-node-dragging #canvas-panel ::selection,
body.canvas-mode-active.canvas-node-dragging #canvas-panel *::selection {
    background: transparent !important;
    color: inherit !important;
}
body.canvas-mode-active.canvas-node-dragging #canvas-panel .canvas-node.lib-image-node.is-dragging-node .canvas-lib-image-frame,
body.canvas-mode-active.canvas-node-dragging #canvas-panel .canvas-node.lib-image-node.selected .canvas-lib-image-frame {
    border-color: rgba(255,255,255,.78) !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,.24), 0 18px 44px rgba(0,0,0,.36) !important;
}
body.canvas-mode-active.canvas-node-dragging #canvas-panel .canvas-node.lib-image-node.is-dragging-node .canvas-lib-node-title,
body.canvas-mode-active.canvas-node-dragging #canvas-panel .canvas-node.lib-image-node.is-dragging-node .canvas-lib-node-title *,
body.canvas-mode-active.canvas-node-dragging #canvas-panel .canvas-node.lib-image-node.selected .canvas-lib-node-title,
body.canvas-mode-active.canvas-node-dragging #canvas-panel .canvas-node.lib-image-node.selected .canvas-lib-node-title * {
    background: transparent !important;
    color: rgba(255,255,255,.58) !important;
    text-shadow: none !important;
    outline: none !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-image-placeholder {
    position: absolute;
    left: 50%;
    top: 34%;
    transform: translate(-50%, -50%);
    color: rgba(255,255,255,.24);
    font-size: 40px;
    pointer-events: none;
}
body.canvas-mode-active #canvas-panel .canvas-lib-node-try {
    position: absolute;
    left: 24px;
    top: 52%;
    transform: translateY(-18%);
    display: grid;
    gap: 10px;
}
body.canvas-mode-active #canvas-panel .canvas-lib-node-try-label {
    color: rgba(255,255,255,.58);
    font-size: 12px;
    font-weight: 500;
}
body.canvas-mode-active #canvas-panel .canvas-lib-node-option {
    width: max-content;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 2px 8px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: rgba(255,255,255,.88);
    font-size: 12px;
    font-weight: 750;
    cursor: pointer;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}
body.canvas-mode-active #canvas-panel .canvas-lib-node-option:hover {
    background: rgba(255,255,255,.12);
    color: #fff;
    transform: translateX(2px);
}
body.canvas-mode-active #canvas-panel .canvas-lib-hd-icon {
    min-width: 15px;
    height: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.62);
    border-radius: 2px;
    font-size: 8px;
    line-height: 1;
    font-weight: 850;
}
body.canvas-mode-active #canvas-panel .canvas-lib-upload-float {
    position: absolute;
    left: 50%;
    top: -34px;
    z-index: 8;
    transform: translate(-50%, 6px);
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 13px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 9px;
    background: rgba(36,36,36,.96);
    color: rgba(255,255,255,.92);
    font-size: 13px;
    font-weight: 800;
    box-shadow: 0 14px 28px rgba(0,0,0,.32);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease, border-color .18s ease, background .18s ease;
}
body.canvas-mode-active #canvas-panel .canvas-node.lib-image-node.selected .canvas-lib-upload-float {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0);
}
body.canvas-mode-active.canvas-node-dragging #canvas-panel .canvas-node.lib-image-node.selected .canvas-lib-upload-float,
body.canvas-mode-active #canvas-panel .canvas-node.lib-image-node.is-dragging-node .canvas-lib-upload-float {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translate(-50%, 6px) !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-upload-float:hover {
    border-color: rgba(255,255,255,.34);
    background: rgba(54,54,54,.98);
}
body.canvas-mode-active #canvas-panel .canvas-node.lib-image-node .canvas-port-plus {
    top: calc(50% + 14px);
    width: 22px;
    height: 22px;
    border-color: rgba(255,255,255,.36) !important;
    background: rgba(30,30,30,.96) !important;
    color: rgba(255,255,255,.82) !important;
    font-size: 16px;
    font-weight: 700;
    box-shadow: 0 8px 18px rgba(0,0,0,.28) !important;
    opacity: 0 !important;
    pointer-events: none;
    --port-magnet-x: 0px;
    --port-magnet-y: 0px;
    transition: opacity .18s ease, transform .22s cubic-bezier(.2,.8,.2,1), border-color .18s ease, background .18s ease, box-shadow .18s ease;
    -webkit-user-select: none !important;
    user-select: none !important;
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
}
body.canvas-mode-active #canvas-panel .canvas-node.lib-image-node .canvas-port-plus.input {
    left: -34px;
    transform: translate(calc(10px + var(--port-magnet-x)), calc(-50% + var(--port-magnet-y))) scale(.82);
}
body.canvas-mode-active #canvas-panel .canvas-node.lib-image-node .canvas-port-plus.output {
    right: -34px;
    transform: translate(calc(-10px + var(--port-magnet-x)), calc(-50% + var(--port-magnet-y))) scale(.82);
}
body.canvas-mode-active #canvas-panel .canvas-node.lib-image-node:hover .canvas-port-plus,
body.canvas-mode-active #canvas-panel .canvas-node.lib-image-node.port-hover-armed .canvas-port-plus,
body.canvas-mode-active #canvas-panel .canvas-node.lib-image-node.selected .canvas-port-plus,
body.canvas-mode-active #canvas-panel .canvas-node.lib-image-node .canvas-port-plus.active {
    opacity: 1 !important;
    pointer-events: auto;
}
body.canvas-mode-active #canvas-panel .canvas-node.lib-image-node:hover .canvas-port-plus.input,
body.canvas-mode-active #canvas-panel .canvas-node.lib-image-node.port-hover-armed .canvas-port-plus.input,
body.canvas-mode-active #canvas-panel .canvas-node.lib-image-node.selected .canvas-port-plus.input,
body.canvas-mode-active #canvas-panel .canvas-node.lib-image-node .canvas-port-plus.input.active {
    transform: translate(var(--port-magnet-x), calc(-50% + var(--port-magnet-y))) scale(1);
}
body.canvas-mode-active #canvas-panel .canvas-node.lib-image-node:hover .canvas-port-plus.output,
body.canvas-mode-active #canvas-panel .canvas-node.lib-image-node.port-hover-armed .canvas-port-plus.output,
body.canvas-mode-active #canvas-panel .canvas-node.lib-image-node.selected .canvas-port-plus.output,
body.canvas-mode-active #canvas-panel .canvas-node.lib-image-node .canvas-port-plus.output.active {
    transform: translate(var(--port-magnet-x), calc(-50% + var(--port-magnet-y))) scale(1);
}
body.canvas-mode-active #canvas-panel .canvas-node.lib-image-node .canvas-port-plus.magnetized {
    border-color: rgba(255,255,255,.70) !important;
    box-shadow: 0 0 0 4px rgba(255,255,255,.08), 0 10px 24px rgba(0,0,0,.34) !important;
}
body.canvas-mode-active #canvas-panel .canvas-node.lib-image-node .canvas-port-plus:hover {
    background: rgba(255,255,255,.94) !important;
    color: #1a1a1a !important;
    border-color: rgba(255,255,255,.78) !important;
}
body.canvas-mode-active.canvas-node-dragging #canvas-panel .canvas-node.lib-image-node.is-dragging-node .canvas-port-plus,
body.canvas-mode-active.canvas-node-dragging #canvas-panel .canvas-node.lib-image-node.selected .canvas-port-plus {
    background: rgba(30,30,30,.96) !important;
    color: rgba(255,255,255,.86) !important;
    border-color: rgba(255,255,255,.58) !important;
    box-shadow: 0 8px 18px rgba(0,0,0,.28) !important;
    outline: none !important;
    text-shadow: none !important;
}
body.canvas-mode-active.canvas-node-dragging #canvas-panel .canvas-node.lib-image-node.is-dragging-node .canvas-port-plus:focus,
body.canvas-mode-active.canvas-node-dragging #canvas-panel .canvas-node.lib-image-node.is-dragging-node .canvas-port-plus:focus-visible,
body.canvas-mode-active.canvas-node-dragging #canvas-panel .canvas-node.lib-image-node.selected .canvas-port-plus:focus,
body.canvas-mode-active.canvas-node-dragging #canvas-panel .canvas-node.lib-image-node.selected .canvas-port-plus:focus-visible {
    outline: none !important;
    box-shadow: 0 8px 18px rgba(0,0,0,.28) !important;
}
body.canvas-mode-active #canvas-panel .canvas-node.lib-image-node .canvas-resize-handle {
    border-color: rgba(255,255,255,.55);
    opacity: 0;
}
body.canvas-mode-active #canvas-panel .canvas-node.lib-image-node.selected .canvas-resize-handle {
    opacity: .8;
}
body.canvas-mode-active #canvas-panel .canvas-node.lib-video-node,
body.canvas-mode-active #canvas-panel .canvas-node.lib-video-node:hover,
body.canvas-mode-active #canvas-panel .canvas-node.lib-video-node.selected {
    display: block !important;
    min-height: 0 !important;
    overflow: visible !important;
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(255,255,255,.78) !important;
    transform: none !important;
}
body.canvas-mode-active #canvas-panel .canvas-node.lib-video-node .canvas-lib-node-title {
    position: absolute;
    left: 0;
    top: 0;
    height: 22px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: rgba(255,255,255,.58);
    font-size: 13px;
    font-weight: 650;
    pointer-events: none;
    -webkit-user-select: none !important;
    user-select: none !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-title-play {
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 7px solid rgba(255,255,255,.58);
}
body.canvas-mode-active #canvas-panel .canvas-node.lib-video-node .canvas-lib-image-frame {
    position: absolute;
    left: 0;
    right: 0;
    top: 28px;
    bottom: 0;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.14);
    background: #252525;
    box-shadow: none;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease, transform .18s ease;
}
body.canvas-mode-active #canvas-panel .canvas-node.lib-video-node:hover .canvas-lib-image-frame {
    border-color: rgba(255,255,255,.28);
}
body.canvas-mode-active #canvas-panel .canvas-node.lib-video-node.selected .canvas-lib-image-frame {
    border-color: rgba(255,255,255,.64);
    box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 16px 40px rgba(0,0,0,.34);
}
body.canvas-mode-active.canvas-node-dragging #canvas-panel .canvas-node.lib-video-node.is-dragging-node .canvas-lib-image-frame,
body.canvas-mode-active.canvas-node-dragging #canvas-panel .canvas-node.lib-video-node.selected .canvas-lib-image-frame {
    border-color: rgba(255,255,255,.78) !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,.24), 0 18px 44px rgba(0,0,0,.36) !important;
}
body.canvas-mode-active.canvas-node-dragging #canvas-panel .canvas-node.lib-video-node.is-dragging-node .canvas-lib-node-title,
body.canvas-mode-active.canvas-node-dragging #canvas-panel .canvas-node.lib-video-node.is-dragging-node .canvas-lib-node-title *,
body.canvas-mode-active.canvas-node-dragging #canvas-panel .canvas-node.lib-video-node.selected .canvas-lib-node-title,
body.canvas-mode-active.canvas-node-dragging #canvas-panel .canvas-node.lib-video-node.selected .canvas-lib-node-title * {
    background: transparent !important;
    color: rgba(255,255,255,.58) !important;
    text-shadow: none !important;
    outline: none !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-video-placeholder {
    position: absolute;
    left: 50%;
    top: 34%;
    transform: translate(-50%, -50%);
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    pointer-events: none;
}
body.canvas-mode-active #canvas-panel .canvas-lib-video-placeholder span {
    width: 0;
    height: 0;
    border-top: 18px solid transparent;
    border-bottom: 18px solid transparent;
    border-left: 28px solid rgba(255,255,255,.24);
}
body.canvas-mode-active #canvas-panel .canvas-node.lib-video-node .canvas-lib-node-try {
    position: absolute;
    left: 24px;
    top: 52%;
    transform: translateY(-18%);
    display: grid;
    gap: 10px;
}
body.canvas-mode-active #canvas-panel .canvas-lib-video-option-icon {
    position: relative;
    width: 16px;
    height: 16px;
    display: inline-block;
    flex: 0 0 16px;
}
body.canvas-mode-active #canvas-panel .canvas-lib-video-option-icon.stack::before,
body.canvas-mode-active #canvas-panel .canvas-lib-video-option-icon.stack::after {
    content: "";
    position: absolute;
    left: 2px;
    width: 12px;
    height: 7px;
    border: 1.7px solid currentColor;
    border-radius: 3px;
    transform: skewY(-18deg);
    background: transparent;
}
body.canvas-mode-active #canvas-panel .canvas-lib-video-option-icon.stack::before {
    top: 2px;
}
body.canvas-mode-active #canvas-panel .canvas-lib-video-option-icon.stack::after {
    top: 7px;
    opacity: .82;
}
body.canvas-mode-active #canvas-panel .canvas-lib-video-option-icon.sparkle::before,
body.canvas-mode-active #canvas-panel .canvas-lib-video-option-icon.sparkle::after {
    content: "";
    position: absolute;
    background: currentColor;
}
body.canvas-mode-active #canvas-panel .canvas-lib-video-option-icon.sparkle::before {
    left: 2px;
    top: 2px;
    width: 12px;
    height: 12px;
    clip-path: polygon(50% 0, 62% 36%, 100% 50%, 62% 64%, 50% 100%, 38% 64%, 0 50%, 38% 36%);
}
body.canvas-mode-active #canvas-panel .canvas-lib-video-option-icon.sparkle::after {
    right: 0;
    top: 1px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
}
body.canvas-mode-active #canvas-panel .canvas-node.lib-video-node .canvas-lib-upload-float {
    position: absolute;
    left: 50%;
    top: -34px;
    z-index: 8;
    transform: translate(-50%, 6px);
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 13px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 9px;
    background: rgba(36,36,36,.96);
    color: rgba(255,255,255,.92);
    font-size: 13px;
    font-weight: 800;
    box-shadow: 0 14px 28px rgba(0,0,0,.32);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease, border-color .18s ease, background .18s ease;
}
body.canvas-mode-active #canvas-panel .canvas-node.lib-video-node.selected .canvas-lib-upload-float {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0);
}
body.canvas-mode-active.canvas-node-dragging #canvas-panel .canvas-node.lib-video-node.selected .canvas-lib-upload-float,
body.canvas-mode-active #canvas-panel .canvas-node.lib-video-node.is-dragging-node .canvas-lib-upload-float {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translate(-50%, 6px) !important;
}
body.canvas-mode-active #canvas-panel .canvas-node.lib-video-node .canvas-port-plus {
    top: calc(50% + 14px);
    width: 22px;
    height: 22px;
    border-color: rgba(255,255,255,.36) !important;
    background: rgba(30,30,30,.96) !important;
    color: rgba(255,255,255,.82) !important;
    font-size: 16px;
    font-weight: 700;
    box-shadow: 0 8px 18px rgba(0,0,0,.28) !important;
    opacity: 0 !important;
    pointer-events: none;
    --port-magnet-x: 0px;
    --port-magnet-y: 0px;
    transition: opacity .18s ease, transform .22s cubic-bezier(.2,.8,.2,1), border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
body.canvas-mode-active #canvas-panel .canvas-node.lib-video-node .canvas-port-plus.input {
    left: -34px;
    transform: translate(calc(10px + var(--port-magnet-x)), calc(-50% + var(--port-magnet-y))) scale(.82);
}
body.canvas-mode-active #canvas-panel .canvas-node.lib-video-node .canvas-port-plus.output {
    right: -34px;
    transform: translate(calc(-10px + var(--port-magnet-x)), calc(-50% + var(--port-magnet-y))) scale(.82);
}
body.canvas-mode-active #canvas-panel .canvas-node.lib-video-node:hover .canvas-port-plus,
body.canvas-mode-active #canvas-panel .canvas-node.lib-video-node.port-hover-armed .canvas-port-plus,
body.canvas-mode-active #canvas-panel .canvas-node.lib-video-node.selected .canvas-port-plus,
body.canvas-mode-active #canvas-panel .canvas-node.lib-video-node .canvas-port-plus.active {
    opacity: 1 !important;
    pointer-events: auto;
    transform: translate(var(--port-magnet-x), calc(-50% + var(--port-magnet-y))) scale(1);
}
body.canvas-mode-active #canvas-panel .canvas-node.lib-video-node .canvas-port-plus.magnetized {
    border-color: rgba(255,255,255,.70) !important;
    box-shadow: 0 0 0 4px rgba(255,255,255,.08), 0 10px 24px rgba(0,0,0,.34) !important;
}
body.canvas-mode-active #canvas-panel .canvas-node.lib-video-node .canvas-port-plus:hover {
    background: rgba(255,255,255,.94) !important;
    color: #1a1a1a !important;
    border-color: rgba(255,255,255,.78) !important;
}
body.canvas-mode-active.canvas-node-dragging #canvas-panel .canvas-node.lib-video-node.is-dragging-node .canvas-port-plus,
body.canvas-mode-active.canvas-node-dragging #canvas-panel .canvas-node.lib-video-node.selected .canvas-port-plus {
    background: rgba(30,30,30,.96) !important;
    color: rgba(255,255,255,.86) !important;
    border-color: rgba(255,255,255,.58) !important;
    box-shadow: 0 8px 18px rgba(0,0,0,.28) !important;
}
body.canvas-mode-active #canvas-panel .canvas-node.lib-video-node .canvas-resize-handle {
    border-color: rgba(255,255,255,.55);
    opacity: 0;
}
body.canvas-mode-active #canvas-panel .canvas-node.lib-video-node.selected .canvas-resize-handle {
    opacity: .8;
}
body.canvas-mode-active #canvas-panel .canvas-node.lib-media-node .canvas-lib-media-frame {
    overflow: hidden;
}
body.canvas-mode-active #canvas-panel .canvas-node.lib-media-node .canvas-lib-media-content,
body.canvas-mode-active #canvas-panel .canvas-node.lib-media-node img.canvas-lib-media-content,
body.canvas-mode-active #canvas-panel .canvas-node.lib-media-node video.canvas-lib-media-content {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    display: block !important;
    object-fit: cover !important;
    border-radius: 8px;
    background: #111;
}
body.canvas-mode-active #canvas-panel .canvas-node.media-transparent-preview .canvas-lib-media-frame {
    background-color: #2b2b2b !important;
    background-image:
        linear-gradient(45deg, rgba(255,255,255,.18) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(255,255,255,.18) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(255,255,255,.18) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(255,255,255,.18) 75%) !important;
    background-size: 20px 20px !important;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0 !important;
}
body.canvas-mode-active #canvas-panel .canvas-node.media-transparent-preview img.canvas-lib-media-content {
    background: transparent !important;
}
body.canvas-mode-active #canvas-panel .canvas-node.lib-media-node video.canvas-lib-media-content {
    pointer-events: auto;
}
body.canvas-mode-active #canvas-panel .canvas-node.lib-video-node .canvas-lib-video-frame > video.canvas-lib-media-content {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    display: block !important;
    object-fit: cover !important;
    background: #000 !important;
}
body.canvas-mode-active #canvas-panel .canvas-node.upscale-comparison-node .canvas-lib-media-frame {
    background: #111;
}
body.canvas-mode-active #canvas-panel .canvas-upscale-compare {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
    --canvas-upscale-compare-pos: 50%;
}
body.canvas-mode-active #canvas-panel .canvas-upscale-compare > img.canvas-lib-media-content {
    position: absolute !important;
    inset: 0 !important;
}
body.canvas-mode-active #canvas-panel .canvas-upscale-compare-original {
    position: absolute;
    inset: 0;
    z-index: 4;
    overflow: hidden;
    border-radius: inherit;
    clip-path: inset(0 calc(100% - var(--canvas-upscale-compare-pos)) 0 0);
    opacity: 0;
    pointer-events: none;
}
body.canvas-mode-active #canvas-panel .canvas-upscale-compare-original.loaded {
    opacity: 1;
}
body.canvas-mode-active #canvas-panel .canvas-upscale-compare-original-img {
    position: absolute !important;
    inset: 0 !important;
}
body.canvas-mode-active #canvas-panel .canvas-upscale-compare-label {
    position: absolute;
    right: 14px;
    top: 14px;
    z-index: 6;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border-radius: 8px;
    background: rgba(17,17,17,.82);
    color: rgba(255,255,255,.94);
    font-size: 18px;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 8px 22px rgba(0,0,0,.28);
    pointer-events: none;
}
body.canvas-mode-active #canvas-panel .canvas-upscale-compare-toggle {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 18;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: rgba(255,255,255,.96);
    color: #111;
    font-size: 0;
    line-height: 0;
    text-indent: 0;
    box-shadow: 0 7px 16px rgba(0,0,0,.28);
    cursor: pointer;
    pointer-events: auto;
}
body.canvas-mode-active #canvas-panel .canvas-upscale-compare-toggle span {
    position: relative;
    width: 16px;
    height: 13px;
    display: block;
    color: #111;
    border: 2px solid currentColor;
    border-radius: 2px;
    box-sizing: border-box;
}
body.canvas-mode-active #canvas-panel .canvas-upscale-compare-toggle span::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -2px;
    bottom: -2px;
    width: 2px;
    border-radius: 999px;
    background: currentColor;
    transform: translateX(-50%);
}
body.canvas-mode-active #canvas-panel .canvas-upscale-compare-toggle span::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
    transform: translate(-50%, -50%);
}
body.canvas-mode-active #canvas-panel .canvas-upscale-compare-toggle.active,
body.canvas-mode-active #canvas-panel .canvas-upscale-compare-toggle:hover,
body.canvas-mode-active #canvas-panel .canvas-upscale-compare-toggle:focus-visible {
    background: #fff;
    box-shadow: 0 9px 20px rgba(0,0,0,.34), 0 0 0 2px rgba(255,255,255,.24);
}
body.canvas-mode-active #canvas-panel .canvas-upscale-compare-divider {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--canvas-upscale-compare-pos);
    z-index: 8;
    width: 42px;
    padding: 0;
    border: 0;
    background: transparent;
    color: transparent;
    font-size: 0;
    line-height: 0;
    text-indent: 0;
    cursor: ew-resize;
    transform: translateX(-50%);
    touch-action: none;
}
body.canvas-mode-active #canvas-panel .canvas-upscale-compare-divider::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgba(255,255,255,.82);
    box-shadow: 0 0 0 1px rgba(0,0,0,.12), 0 0 18px rgba(0,0,0,.22);
    transform: translateX(-50%);
}
body.canvas-mode-active #canvas-panel .canvas-upscale-compare-divider span {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(255,255,255,.96);
    color: #111;
    box-shadow: 0 10px 28px rgba(0,0,0,.28);
    transform: translate(-50%, -50%);
}
body.canvas-mode-active #canvas-panel .canvas-upscale-compare-divider span::before,
body.canvas-mode-active #canvas-panel .canvas-upscale-compare-divider span::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    transform: translateY(-50%);
}
body.canvas-mode-active #canvas-panel .canvas-upscale-compare-divider span::before {
    left: 11px;
    border-right: 7px solid #111;
}
body.canvas-mode-active #canvas-panel .canvas-upscale-compare-divider span::after {
    right: 11px;
    border-left: 7px solid #111;
}
body.canvas-mode-active #canvas-panel .canvas-upscale-compare-divider:hover span,
body.canvas-mode-active #canvas-panel .canvas-upscale-compare-divider:focus-visible span {
    background: #fff;
    box-shadow: 0 12px 32px rgba(0,0,0,.34), 0 0 0 2px rgba(96,165,250,.55);
}
body.canvas-mode-active #canvas-panel .canvas-lib-media-ratio {
    position: absolute;
    right: 0;
    top: 0;
    height: 22px;
    display: inline-flex;
    align-items: center;
    color: rgba(255,255,255,.46);
    font-size: 11px;
    font-weight: 700;
}
body.canvas-mode-active #canvas-panel .canvas-lib-audio-frame,
body.canvas-mode-active #canvas-panel .canvas-lib-script-frame {
    overflow: hidden;
}
body.canvas-mode-active #canvas-panel .canvas-lib-audio-wave {
    position: absolute;
    left: 50%;
    top: 35%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: rgba(255,255,255,.28);
}
body.canvas-mode-active #canvas-panel .canvas-lib-audio-wave span {
    width: 5px;
    height: 26px;
    border-radius: 6px;
    background: currentColor;
}
body.canvas-mode-active #canvas-panel .canvas-lib-audio-wave span:nth-child(2),
body.canvas-mode-active #canvas-panel .canvas-lib-audio-wave span:nth-child(4) {
    height: 44px;
}
body.canvas-mode-active #canvas-panel .canvas-lib-audio-wave span:nth-child(3) {
    height: 58px;
}
body.canvas-mode-active #canvas-panel .canvas-lib-audio-player {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 30px;
    width: calc(100% - 48px);
}
body.canvas-mode-active #canvas-panel .canvas-lib-script-actions {
    position: absolute;
    left: 18px;
    top: 18px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
body.canvas-mode-active #canvas-panel .canvas-lib-script-actions button {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 8px;
    background: rgba(255,255,255,.05);
    color: rgba(255,255,255,.86);
    font-size: 12px;
    font-weight: 750;
}
body.canvas-mode-active #canvas-panel .canvas-lib-script-body {
    position: absolute;
    left: 22px;
    right: 22px;
    top: 64px;
    bottom: 22px;
    overflow: auto;
    color: rgba(255,255,255,.78);
    font-size: 13px;
    line-height: 1.65;
    white-space: pre-wrap;
    outline: none;
}
body.canvas-mode-active #canvas-panel .canvas-lib-script-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 28px;
    padding: 46px;
    color: rgba(255,255,255,.9);
}
body.canvas-mode-active #canvas-panel .canvas-lib-script-placeholder-icon {
    display: flex;
    justify-content: center;
    color: rgba(255,255,255,.28);
    font-size: 62px;
    line-height: 1;
    transform: translateY(-8px);
}
body.canvas-mode-active #canvas-panel .canvas-lib-script-options {
    display: grid;
    gap: 18px;
}
body.canvas-mode-active #canvas-panel .canvas-lib-script-options em {
    color: rgba(255,255,255,.55);
    font-style: normal;
    font-size: 18px;
    font-weight: 650;
}
body.canvas-mode-active #canvas-panel .canvas-lib-script-option {
    width: max-content;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    color: #fff;
    font-size: 24px;
    font-weight: 900;
    cursor: pointer;
}
body.canvas-mode-active #canvas-panel .canvas-lib-script-option:hover {
    background: rgba(255,255,255,.10);
    border-color: rgba(255,255,255,.14);
}
body.canvas-mode-active #canvas-panel .canvas-lib-script-option i {
    width: 24px;
    text-align: center;
    font-size: 22px;
}
body.canvas-mode-active #canvas-panel .canvas-lib-script-table-toolbar {
    position: absolute;
    left: 50%;
    bottom: calc(100% + var(--canvas-node-toolbar-gap, 14px));
    transform: translateX(-50%) scale(var(--canvas-node-toolbar-scale, 1));
    transform-origin: bottom center;
    z-index: 5;
    display: none;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 9px;
    background: rgba(36,36,36,.96);
    box-shadow: 0 12px 32px rgba(0,0,0,.30);
    color: #fff;
    white-space: nowrap;
}
body.canvas-mode-active #canvas-panel .canvas-node.selected .canvas-lib-script-table-toolbar {
    display: flex;
}
body.canvas-mode-active #canvas-panel .canvas-lib-script-table-toolbar button {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: rgba(255,255,255,.94);
    padding: 0 10px;
    font-size: 13px;
    font-weight: 850;
    cursor: pointer;
}
body.canvas-mode-active #canvas-panel .canvas-lib-script-table-toolbar button:hover {
    background: rgba(255,255,255,.10);
}
body.canvas-mode-active #canvas-panel .canvas-lib-script-table-toolbar .divider {
    width: 1px;
    height: 22px;
    background: rgba(255,255,255,.16);
}
body.canvas-mode-active #canvas-panel .canvas-lib-script-table-frame {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-rows: 44px 1fr;
    overflow: hidden;
    border-radius: 8px;
    background: rgba(20,20,20,.92);
}
body.canvas-mode-active #canvas-panel .canvas-lib-script-table-head {
    min-width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 14px;
    border-bottom: 1px solid rgba(255,255,255,.12);
    color: #fff;
    font-weight: 900;
}
body.canvas-mode-active #canvas-panel .canvas-lib-script-view-btn,
body.canvas-mode-active #canvas-panel .canvas-lib-script-expand-btn {
    border: 0;
    background: transparent;
    color: rgba(255,255,255,.86);
    font-size: 13px;
    font-weight: 850;
    cursor: pointer;
}
body.canvas-mode-active #canvas-panel .canvas-lib-script-table-wrap {
    overflow: auto;
}
body.canvas-mode-active #canvas-panel .canvas-lib-script-table {
    width: max(100%, 980px);
    border-collapse: collapse;
    table-layout: fixed;
    color: rgba(255,255,255,.94);
    font-size: 13px;
    line-height: 1.45;
}
body.canvas-mode-active #canvas-panel .canvas-lib-script-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    height: 38px;
    background: rgba(74,74,74,.96);
    color: rgba(255,255,255,.70);
    border-right: 1px solid rgba(255,255,255,.12);
    font-weight: 850;
}
body.canvas-mode-active #canvas-panel .canvas-lib-script-table td {
    min-height: 46px;
    padding: 10px 12px;
    vertical-align: top;
    border-right: 1px solid rgba(255,255,255,.10);
    border-bottom: 1px solid rgba(255,255,255,.10);
    outline: none;
}
body.canvas-mode-active #canvas-panel .canvas-lib-script-table td[contenteditable="true"]:focus {
    background: rgba(99,155,255,.12);
    box-shadow: inset 0 0 0 1px rgba(157,191,255,.55);
}
body.canvas-mode-active #canvas-panel .canvas-lib-script-image-slot {
    display: inline-flex;
    width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: rgba(255,255,255,.10);
    color: rgba(255,255,255,.35);
}
body.canvas-mode-active #canvas-panel .canvas-script-gen-panel {
    position: absolute;
    z-index: 10;
    display: none;
    gap: 12px;
    width: min(720px, calc(100% - 32px));
    padding: 14px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(37,37,37,.98);
    box-shadow: 0 18px 42px rgba(0,0,0,.34);
    transform-origin: top center;
}
body.canvas-mode-active #canvas-panel .canvas-script-gen-panel.show {
    display: grid;
}
body.canvas-mode-active.canvas-node-dragging #canvas-panel .canvas-script-gen-panel.show {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
body.canvas-mode-active #canvas-panel .canvas-script-gen-refs {
    display: none;
    align-items: center;
    gap: 8px;
    min-height: 48px;
}
body.canvas-mode-active #canvas-panel .canvas-script-gen-refs.show {
    display: flex;
}
body.canvas-mode-active #canvas-panel .canvas-script-gen-refs .canvas-node-gen-ref {
    width: 44px;
    height: 44px;
}
body.canvas-mode-active #canvas-panel .canvas-script-gen-input {
    width: 100%;
    min-height: 72px;
    resize: vertical;
    border: 0;
    outline: none;
    background: transparent;
    color: rgba(255,255,255,.92);
    font-size: 14px;
    font-weight: 760;
    line-height: 1.65;
}
body.canvas-mode-active #canvas-panel .canvas-script-gen-input::placeholder {
    color: rgba(255,255,255,.48);
}
body.canvas-mode-active #canvas-panel .canvas-script-gen-row {
    display: grid;
    grid-template-columns: auto 1fr auto auto auto;
    gap: 10px;
    align-items: center;
}
body.canvas-mode-active #canvas-panel .canvas-script-gen-model,
body.canvas-mode-active #canvas-panel .canvas-script-gen-icon,
body.canvas-mode-active #canvas-panel .canvas-script-gen-cost,
body.canvas-mode-active #canvas-panel .canvas-script-gen-send {
    min-height: 36px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: rgba(255,255,255,.94);
    font-size: 13px;
    font-weight: 900;
}
body.canvas-mode-active #canvas-panel .canvas-script-gen-model {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: default;
}
body.canvas-mode-active #canvas-panel .canvas-script-gen-icon {
    width: 36px;
    cursor: pointer;
}
body.canvas-mode-active #canvas-panel .canvas-script-gen-icon:hover {
    background: rgba(255,255,255,.10);
}
body.canvas-mode-active #canvas-panel .canvas-script-gen-cost {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: rgba(255,255,255,.60);
}
body.canvas-mode-active #canvas-panel .canvas-script-gen-send {
    width: 36px;
    height: 36px;
    background: rgba(255,255,255,.86);
    color: #111;
    font-size: 20px;
    cursor: pointer;
}
body.canvas-mode-active #canvas-panel .canvas-script-gen-send:disabled {
    cursor: wait;
    opacity: .62;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-panel {
    width: min(720px, calc(100% - 32px)) !important;
    gap: 12px !important;
    padding: 12px !important;
    border-radius: 10px !important;
    background: rgba(37,37,37,.98) !important;
    border-color: rgba(255,255,255,.12) !important;
    box-shadow: 0 18px 42px rgba(0,0,0,.34) !important;
    transform-origin: top center;
}
body.canvas-mode-active.canvas-node-dragging #canvas-panel .canvas-node-gen-panel.show,
body.canvas-mode-active #canvas-panel .canvas-node-gen-panel.show.drag-suppressed {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-head {
    min-height: 40px;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-head strong {
    display: none;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-head > span {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    max-width: 220px;
    color: rgba(255,255,255,.88) !important;
    font-size: 13px;
    text-align: center;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-tools {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-tools button {
    width: 52px;
    height: 40px;
    display: inline-grid;
    place-items: center;
    gap: 2px;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 8px;
    background: rgba(255,255,255,.04);
    color: rgba(255,255,255,.76);
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-tools button i {
    font-size: 13px;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-tools button:hover,
body.canvas-mode-active #canvas-panel .canvas-node-gen-close:hover {
    background: rgba(255,255,255,.10) !important;
    color: #fff !important;
    border-color: rgba(255,255,255,.30) !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-panel.video-node-panel {
    width: min(560px, calc(100% - 32px)) !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-panel.video-node-panel .canvas-node-gen-head {
    min-height: 72px;
    align-items: flex-start;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-panel.video-node-panel .canvas-node-gen-tools {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 6px;
    padding-right: 32px;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-panel.video-node-panel .canvas-node-gen-tools button {
    width: auto;
    min-width: 58px;
    height: 30px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 850;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-panel.video-node-panel .canvas-node-gen-tools button.mode.active {
    background: rgba(255,255,255,.10);
    border-color: rgba(255,255,255,.36);
    color: #fff;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-panel.video-node-panel .canvas-node-gen-tools button.mode.muted {
    color: rgba(255,255,255,.36);
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-panel.video-node-panel .canvas-node-gen-tools button.compact {
    width: 52px;
    height: 40px;
    display: inline-grid;
    gap: 2px;
    padding: 0;
    color: rgba(255,255,255,.76);
    font-size: 10px;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-panel.video-node-panel .canvas-node-gen-input {
    min-height: 74px !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-panel.video-node-panel .canvas-node-gen-row {
    grid-template-columns: minmax(180px, 1.2fr) minmax(150px,.9fr) minmax(72px,.42fr) auto 42px !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-close {
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    margin-left: auto;
    font-size: 13px !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-input {
    min-height: 68px !important;
    max-height: 124px !important;
    resize: vertical;
    border-radius: 10px !important;
    background: rgba(255,255,255,.04) !important;
    border-color: rgba(255,255,255,.13) !important;
    color: rgba(255,255,255,.90) !important;
    font-size: 14px !important;
    font-weight: 650 !important;
    line-height: 1.55 !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-input::placeholder {
    color: rgba(255,255,255,.48);
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-input:focus {
    border-color: rgba(138,124,255,.72) !important;
    box-shadow: 0 0 0 3px rgba(111,91,255,.18) !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-row {
    grid-template-columns: minmax(180px, 1.1fr) minmax(130px,.8fr) minmax(100px,.56fr) auto 48px !important;
    gap: 10px !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-select,
body.canvas-mode-active #canvas-panel .canvas-node-gen-cost {
    min-height: 38px !important;
    border-radius: 9px !important;
    background: rgba(255,255,255,.07) !important;
    border-color: rgba(255,255,255,.16) !important;
    color: rgba(255,255,255,.92) !important;
    font-size: 13px !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-cost {
    color: #fff1ba !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-send {
    min-width: 0 !important;
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    border-radius: 9px !important;
    background: rgba(245,245,244,.94) !important;
    color: #171717 !important;
    font-size: 22px !important;
    line-height: 1 !important;
    box-shadow: none !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-send:hover {
    background: #fff !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-input {
    min-height: 64px !important;
    resize: none !important;
    padding: 8px 2px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-input:focus {
    border: 0 !important;
    box-shadow: none !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-row {
    grid-template-columns: minmax(170px, 1.1fr) minmax(122px,.78fr) minmax(82px,.48fr) auto 42px !important;
    gap: 8px !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-picker {
    position: relative;
    min-width: 0;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-select {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    border: 0 !important;
    padding: 0 !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-picker-trigger {
    width: 100%;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: rgba(255,255,255,.92);
    font-size: 13px;
    font-weight: 850;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, color .16s ease;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-picker-trigger:hover,
body.canvas-mode-active #canvas-panel .canvas-node-gen-picker.open .canvas-node-gen-picker-trigger {
    border-color: rgba(255,255,255,.28);
    background: rgba(255,255,255,.07);
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-picker-main {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-picker-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-picker-arrow {
    flex: 0 0 auto;
    font-size: 10px;
    color: rgba(255,255,255,.54);
    transition: transform .16s ease;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-picker.open .canvas-node-gen-picker-arrow {
    transform: rotate(180deg);
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-cost {
    min-height: 36px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px !important;
    border-color: transparent !important;
    background: transparent !important;
    color: rgba(255,241,186,.92) !important;
    white-space: nowrap;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-menu {
    position: absolute;
    left: 0;
    bottom: calc(100% + 8px);
    z-index: 40;
    width: max(100%, 330px);
    max-height: 410px;
    overflow: auto;
    display: none;
    padding: 8px;
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 12px;
    background: rgba(34,34,34,.98);
    box-shadow: 0 18px 42px rgba(0,0,0,.48);
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-picker.open .canvas-node-gen-menu {
    display: grid;
    gap: 4px;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-menu::-webkit-scrollbar {
    width: 8px;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-menu::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.35);
    border-radius: 999px;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-option {
    width: 100%;
    min-height: 54px;
    display: grid;
    grid-template-columns: 34px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    color: rgba(255,255,255,.90);
    text-align: left;
    cursor: pointer;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-option:hover,
body.canvas-mode-active #canvas-panel .canvas-node-gen-option.active {
    background: rgba(255,255,255,.10);
    border-color: rgba(255,255,255,.10);
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-option-icon {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: rgba(255,255,255,.10);
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-option-text {
    min-width: 0;
    display: grid;
    gap: 2px;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-option-text b {
    font-size: 13px;
    line-height: 1.15;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-option-text small {
    color: rgba(255,255,255,.48);
    font-size: 11px;
    line-height: 1.2;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-option em {
    justify-self: end;
    padding: 2px 6px;
    border-radius: 5px;
    background: rgba(255,255,255,.10);
    color: rgba(255,255,255,.62);
    font-size: 11px;
    font-style: normal;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-menu.ratio {
    width: 342px;
    padding: 12px;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-resolution {
    display: grid;
    gap: 10px;
    color: rgba(255,255,255,.52);
    font-size: 13px;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-resolution > div {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-resolution button,
body.canvas-mode-active #canvas-panel .canvas-node-gen-ratio-option {
    min-height: 34px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 8px;
    background: transparent;
    color: rgba(255,255,255,.62);
    cursor: pointer;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-resolution button.active,
body.canvas-mode-active #canvas-panel .canvas-node-gen-ratio-option.active,
body.canvas-mode-active #canvas-panel .canvas-node-gen-resolution button:hover,
body.canvas-mode-active #canvas-panel .canvas-node-gen-ratio-option:hover {
    border-color: rgba(255,255,255,.82);
    color: #fff;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-ratio-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-ratio-option {
    min-height: 62px;
    display: grid;
    place-items: center;
    gap: 5px;
    font-size: 12px;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-ratio-option i {
    width: 18px;
    height: 10px;
    border: 1px solid currentColor;
    border-radius: 2px;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-menu.count {
    width: 72px;
    min-width: 72px;
    padding: 6px;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-menu.count .canvas-node-gen-option {
    min-height: 36px;
    display: flex;
    justify-content: center;
    padding: 0 8px;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-menu.count .canvas-node-gen-option-icon,
body.canvas-mode-active #canvas-panel .canvas-node-gen-menu.count .canvas-node-gen-option em,
body.canvas-mode-active #canvas-panel .canvas-node-gen-menu.count .canvas-node-gen-option-text small {
    display: none;
}
body.canvas-mode-active #canvas-panel #canvasNodeGenTitle {
    display: none !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-head {
    position: relative;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-close {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    z-index: 4 !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: transparent !important;
    color: rgba(218,224,228,.72) !important;
    box-shadow: none !important;
    font-size: 14px !important;
    line-height: 1 !important;
    overflow: visible !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-close:hover {
    background: rgba(0,0,0,.26) !important;
    color: rgba(238,242,245,.92) !important;
    border-color: transparent !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-expand-icon {
    position: relative !important;
    display: block !important;
    width: 16px !important;
    height: 16px !important;
    color: currentColor !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-expand-icon::before,
body.canvas-mode-active #canvas-panel .canvas-node-gen-expand-icon::after {
    content: "" !important;
    position: absolute !important;
    width: 6px !important;
    height: 6px !important;
    border-color: currentColor !important;
    border-style: solid !important;
    opacity: .96 !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-close:not(.is-compress) .canvas-node-gen-expand-icon::before {
    top: 1px !important;
    right: 1px !important;
    border-width: 1.6px 1.6px 0 0 !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-close:not(.is-compress) .canvas-node-gen-expand-icon::after {
    left: 1px !important;
    bottom: 1px !important;
    border-width: 0 0 1.6px 1.6px !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-close.is-compress .canvas-node-gen-expand-icon::before {
    top: 1px !important;
    left: 1px !important;
    border-width: 1.6px 0 0 1.6px !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-close.is-compress .canvas-node-gen-expand-icon::after {
    right: 1px !important;
    bottom: 1px !important;
    border-width: 0 1.6px 1.6px 0 !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-input {
    color: rgba(213,221,226,.86) !important;
    caret-color: rgba(235,238,241,.94) !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-input::placeholder {
    color: rgba(204,214,220,.72) !important;
    opacity: 1 !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-send {
    width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    max-height: 30px !important;
    border-radius: 8px !important;
    border: 0 !important;
    background: rgba(190,192,194,.88) !important;
    color: #1d1f21 !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    display: inline-grid !important;
    place-items: center !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-send:hover {
    background: rgba(222,224,226,.96) !important;
}
body.canvas-mode-active.canvas-node-gen-expanded #canvas-panel::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1230 !important;
    background: rgba(0,0,0,.56) !important;
    pointer-events: none !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-panel.expanded {
    z-index: 1235 !important;
    grid-template-rows: auto 1fr auto !important;
    gap: 12px !important;
    padding: 12px !important;
    border-radius: 10px !important;
    background: rgba(37,37,37,.98) !important;
    box-shadow: 0 20px 56px rgba(0,0,0,.48) !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-panel.expanded .canvas-node-gen-input {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-panel.expanded .canvas-node-gen-row {
    align-self: end;
}
body.canvas-mode-active #canvas-panel .canvas-lib-media-toolbar {
    position: absolute;
    left: 50%;
    top: auto;
    bottom: calc(100% + var(--canvas-node-toolbar-gap, 16px));
    z-index: 16;
    min-height: 42px;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 6px 8px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(34,34,34,.98);
    box-shadow: 0 14px 34px rgba(0,0,0,.34);
    color: rgba(255,255,255,.92);
    white-space: nowrap;
    max-width: min(920px, calc(100vw - 80px));
    overflow: visible;
    transform-origin: bottom center;
    transform: translateX(-50%) scale(var(--canvas-node-toolbar-scale, 1));
}
body.canvas-mode-active #canvas-panel .canvas-node.lib-media-node.selected .canvas-lib-media-toolbar {
    display: inline-flex;
}
body.canvas-mode-active #canvas-panel .canvas-node.lib-media-node.group-selected-member .canvas-lib-media-toolbar {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
body.canvas-mode-active #canvas-panel .canvas-node.multi-selected-member .canvas-lib-media-toolbar,
body.canvas-mode-active #canvas-panel .canvas-node.multi-selected-member .canvas-lib-text-toolbar,
body.canvas-mode-active #canvas-panel .canvas-node.multi-selected-member .canvas-lib-script-table-toolbar,
body.canvas-mode-active #canvas-panel .canvas-node.group-selected-member .canvas-lib-text-toolbar,
body.canvas-mode-active #canvas-panel .canvas-node.group-selected-member .canvas-lib-script-table-toolbar {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
body.canvas-mode-active.canvas-node-dragging #canvas-panel .canvas-node.lib-media-node.selected .canvas-lib-media-toolbar {
    display: none !important;
}
body.canvas-mode-active #canvas-panel .canvas-node.grid-storyboard-attached .canvas-lib-media-toolbar,
body.canvas-mode-active #canvas-panel .canvas-node.grid-storyboard-attached .canvas-port-plus,
body.canvas-mode-active #canvas-panel .canvas-node.grid-storyboard-attached .canvas-resize-handle,
body.canvas-mode-active #canvas-panel .canvas-node.grid-storyboard-attached .canvas-lib-upload-float {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
body.canvas-mode-active #canvas-panel .canvas-node.grid-storyboard-attached .canvas-lib-image-frame,
body.canvas-mode-active #canvas-panel .canvas-node.grid-storyboard-attached:hover .canvas-lib-image-frame,
body.canvas-mode-active #canvas-panel .canvas-node.grid-storyboard-attached.selected .canvas-lib-image-frame {
    border-color: rgba(255,255,255,.14) !important;
    box-shadow: none !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-media-toolbar button,
body.canvas-mode-active #canvas-panel .canvas-lib-media-toolbar .canvas-lib-media-tool {
    position: relative;
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 9px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: rgba(255,255,255,.92);
    font-size: 13px;
    font-weight: 850;
    cursor: pointer;
    outline: none;
}
body.canvas-mode-active #canvas-panel .canvas-lib-media-toolbar button:hover,
body.canvas-mode-active #canvas-panel .canvas-lib-media-toolbar .canvas-lib-media-tool:hover,
body.canvas-mode-active #canvas-panel .canvas-lib-media-toolbar .canvas-lib-media-tool:focus-within {
    background: rgba(255,255,255,.10);
}
body.canvas-mode-active #canvas-panel .canvas-lib-media-toolbar button.capability-pending {
    color: rgba(255,255,255,.54);
    box-shadow: inset 0 0 0 1px rgba(251,191,36,.24);
}
body.canvas-mode-active #canvas-panel .canvas-lib-media-toolbar button.capability-pending::after {
    content: '未接入';
    padding: 1px 4px;
    border-radius: 999px;
    background: rgba(251,191,36,.14);
    color: #fcd34d;
    font-size: 9px;
    font-weight: 900;
}
body.canvas-mode-active #canvas-panel .canvas-lib-media-toolbar i {
    font-size: 13px;
    color: rgba(255,255,255,.92);
}
body.canvas-mode-active #canvas-panel .canvas-lib-media-svg {
    width: 18px;
    height: 18px;
    display: block;
    flex: 0 0 auto;
    fill: none;
    stroke: #fff;
    stroke-width: 2.15;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 1;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.45));
}
body.canvas-mode-active #canvas-panel .canvas-lib-media-toolbar button:hover .canvas-lib-media-svg,
body.canvas-mode-active #canvas-panel .canvas-lib-media-toolbar .canvas-lib-media-tool:hover .canvas-lib-media-svg {
    stroke: #fff;
    opacity: 1;
}
body.canvas-mode-active #canvas-panel .canvas-lib-media-toolbar em {
    min-height: 16px;
    padding: 0 5px;
    border-radius: 999px;
    background: rgba(76,211,224,.18);
    color: #67e8f9;
    font-style: normal;
    font-size: 10px;
    font-weight: 900;
    line-height: 16px;
}
body.canvas-mode-active #canvas-panel .canvas-lib-media-toolbar .caret {
    font-size: 10px;
    color: rgba(255,255,255,.56);
}
body.canvas-mode-active #canvas-panel .canvas-lib-media-toolbar-divider {
    width: 1px;
    height: 24px;
    margin: 0 4px;
    background: rgba(255,255,255,.16);
}
body.canvas-mode-active #canvas-panel .canvas-lib-media-toolbar-actions {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
body.canvas-mode-active #canvas-panel .canvas-lib-media-toolbar-actions button {
    width: 30px;
    min-width: 30px;
    padding: 0;
}
body.canvas-mode-active #canvas-panel .canvas-lib-media-toolbar-actions button i {
    color: #fff;
    font-size: 14px;
}
body.canvas-mode-active #canvas-panel .canvas-lib-media-toolbar-actions button .canvas-lib-media-svg {
    width: 19px;
    height: 19px;
}
body.canvas-mode-active #canvas-panel .canvas-node.lib-video-node.lib-media-node.selected .canvas-lib-upload-float {
    display: none !important;
}
body.canvas-mode-active #canvas-panel .canvas-node.lib-audio-node.lib-media-node.selected .canvas-lib-upload-float {
    display: none !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-video-toolbar {
    gap: 6px;
    padding: 7px 10px;
}
body.canvas-mode-active #canvas-panel .canvas-lib-video-toolbar button {
    min-height: 32px;
    padding: 0 10px;
}
body.canvas-mode-active #canvas-panel .canvas-lib-video-toolbar .canvas-lib-media-toolbar-actions button {
    width: 32px;
    min-width: 32px;
    padding: 0;
}
body.canvas-mode-active #canvas-panel .canvas-lib-video-toolbar .canvas-lib-media-svg {
    width: 18px;
    height: 18px;
    stroke: #fff;
    opacity: 1;
}
body.canvas-mode-active #canvas-panel .canvas-lib-audio-toolbar {
    gap: 6px;
    padding: 7px 10px;
}
body.canvas-mode-active #canvas-panel .canvas-lib-media-edit-toolbar {
    gap: 8px;
    min-height: 48px;
    padding: 6px 10px;
}
body.canvas-mode-active #canvas-panel .canvas-lib-media-edit-toolbar button.active {
    background: rgba(255,255,255,.16);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
}
body.canvas-mode-active #canvas-panel .canvas-lib-media-edit-toolbar .with-text {
    padding: 0 10px;
}
body.canvas-mode-active #canvas-panel .canvas-lib-media-edit-toolbar .save {
    min-width: 62px;
    padding: 0 14px;
    background: #fff;
    color: #111;
}
body.canvas-mode-active #canvas-panel .canvas-lib-media-edit-toolbar .save:hover {
    background: #f5f5f5;
}
body.canvas-mode-active #canvas-panel .canvas-lib-media-color-row {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
body.canvas-mode-active #canvas-panel .canvas-lib-media-color-row .canvas-lib-media-color {
    width: 22px;
    min-width: 22px;
    height: 22px;
    min-height: 22px;
    padding: 0;
    border-radius: 999px;
    border: 2px solid rgba(255,255,255,.28);
    background: var(--media-color);
    box-shadow: 0 0 0 1px rgba(0,0,0,.28);
}
body.canvas-mode-active #canvas-panel .canvas-lib-media-color-row .canvas-lib-media-color.active {
    border-color: #fff;
    box-shadow: 0 0 0 2px rgba(255,255,255,.18), 0 0 14px rgba(255,255,255,.16);
}
body.canvas-mode-active #canvas-panel .canvas-lib-media-size {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 30px;
    color: rgba(255,255,255,.9);
}
body.canvas-mode-active #canvas-panel .canvas-lib-media-size input {
    width: 92px;
    accent-color: #fff;
}
body.canvas-mode-active #canvas-panel .canvas-lib-media-angle {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 8px;
    color: #fff;
    font-size: 13px;
    font-weight: 850;
}
body.canvas-mode-active #canvas-panel .canvas-lib-media-frame {
    overflow: hidden;
}
body.canvas-mode-active #canvas-panel .canvas-lib-grid-split-toolbar {
    gap: 8px;
    min-height: 48px;
    padding: 6px 10px;
}
body.canvas-mode-active #canvas-panel .canvas-lib-grid-split-toolbar .with-text {
    padding: 0 10px;
}
body.canvas-mode-active #canvas-panel .canvas-lib-grid-split-info {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 0 10px;
    color: rgba(255,255,255,.72);
    font-size: 13px;
    font-weight: 850;
}
body.canvas-mode-active #canvas-panel .canvas-lib-grid-scale-tool {
    min-width: 54px;
}
body.canvas-mode-active #canvas-panel .canvas-lib-media-tool-menu.compact {
    width: 96px;
    max-height: none;
}
body.canvas-mode-active #canvas-panel .canvas-lib-media-frame.media-grid-split {
    outline: 1.5px solid rgba(255,255,255,.72);
    outline-offset: 2px;
}
body.canvas-mode-active #canvas-panel .canvas-lib-grid-split-overlay {
    position: absolute;
    inset: 0;
    z-index: 8;
    pointer-events: auto;
    border-radius: inherit;
}
body.canvas-mode-active #canvas-panel .canvas-lib-grid-split-cell {
    position: absolute;
    display: grid;
    place-items: start end;
    padding: 5px;
    border: 1px solid rgba(255,255,255,.46);
    border-radius: 0;
    background: rgba(255,255,255,0);
    color: rgba(255,255,255,.78);
    cursor: pointer;
    pointer-events: auto;
    outline: none;
    transition: background .14s ease, box-shadow .14s ease, border-color .14s ease;
}
body.canvas-mode-active #canvas-panel .canvas-lib-grid-split-cell span {
    min-width: 18px;
    height: 18px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(0,0,0,.48);
    color: rgba(255,255,255,.86);
    font-size: 10px;
    font-weight: 850;
    opacity: 0;
}
body.canvas-mode-active #canvas-panel .canvas-lib-grid-split-cell:hover,
body.canvas-mode-active #canvas-panel .canvas-lib-grid-split-cell.active {
    border-color: rgba(255,255,255,.96);
    background: rgba(96,165,250,.18);
    box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.88), 0 0 0 1px rgba(96,165,250,.32);
}
body.canvas-mode-active #canvas-panel .canvas-lib-grid-split-cell:hover span,
body.canvas-mode-active #canvas-panel .canvas-lib-grid-split-cell.active span {
    opacity: 1;
}
body.canvas-mode-active #canvas-panel .canvas-lib-media-content {
    transform-origin: center center !important;
    transition: transform .18s ease;
}
body.canvas-mode-active #canvas-panel .canvas-lib-annotation-layer {
    position: absolute;
    inset: 0;
    z-index: 7;
    width: 100%;
    height: 100%;
    pointer-events: auto;
    touch-action: none;
    cursor: crosshair;
}
body.canvas-mode-active #canvas-panel .canvas-lib-media-frame.media-edit-annotate {
    outline: 1.5px solid rgba(96,165,250,.9);
    outline-offset: 2px;
}
body.canvas-mode-active #canvas-panel .canvas-lib-media-frame.media-edit-rotate {
    outline: 1.5px solid rgba(96,165,250,.9);
    outline-offset: 2px;
}
body.canvas-mode-active #canvas-panel .canvas-lib-media-frame.media-edit-crop {
    overflow: visible !important;
    outline: 1px solid rgba(255,255,255,.78);
    outline-offset: 0;
}
body.canvas-mode-active #canvas-panel .canvas-lib-media-frame.media-edit-outpaint {
    overflow: visible !important;
    outline: 1px solid rgba(255,255,255,.62);
    outline-offset: 0;
}
body.canvas-mode-active #canvas-panel .canvas-node.lib-media-node:has(.canvas-lib-media-frame.media-edit-outpaint),
body.canvas-mode-active #canvas-panel .canvas-node.lib-media-node.selected:has(.canvas-lib-media-frame.media-edit-outpaint),
body.canvas-mode-active #canvas-panel .canvas-node.lib-media-node.media-outpaint-active,
body.canvas-mode-active #canvas-panel .canvas-node.lib-media-node.selected.media-outpaint-active,
body.canvas-mode-active #canvas-panel .canvas-node.lib-media-node .canvas-lib-media-frame.media-edit-outpaint {
    overflow: visible !important;
}
body.canvas-mode-active #canvas-panel .canvas-node.lib-media-node:has(.canvas-lib-media-frame.media-edit-crop),
body.canvas-mode-active #canvas-panel .canvas-node.lib-media-node.selected:has(.canvas-lib-media-frame.media-edit-crop),
body.canvas-mode-active #canvas-panel .canvas-node.lib-media-node.media-crop-active,
body.canvas-mode-active #canvas-panel .canvas-node.lib-media-node.selected.media-crop-active,
body.canvas-mode-active #canvas-panel .canvas-node.lib-media-node .canvas-lib-media-frame.media-edit-crop {
    overflow: visible !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-media-frame.media-edit-redraw,
body.canvas-mode-active #canvas-panel .canvas-lib-media-frame.media-edit-erase {
    outline: 1.5px solid rgba(255,255,255,.72);
    outline-offset: 2px;
}
body.canvas-mode-active #canvas-panel .canvas-media-tool-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    color: rgba(255,255,255,.62);
    font-size: 14px;
    font-weight: 650;
    text-align: center;
    pointer-events: none;
}
body.canvas-mode-active #canvas-panel .canvas-media-tool-panel {
    position: absolute;
    left: 50%;
    top: calc(100% + 24px);
    z-index: 34;
    width: 640px;
    min-height: 126px;
    padding: 16px 18px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(36,36,36,.98);
    color: rgba(255,255,255,.94);
    box-shadow: 0 18px 46px rgba(0,0,0,.42);
    transform: translateX(-50%);
    box-sizing: border-box;
    pointer-events: auto;
}
body.canvas-mode-active #canvas-panel .canvas-media-tool-upscale-panel {
    width: 460px;
    min-height: 126px;
    top: calc(100% + var(--canvas-node-toolbar-gap, 16px));
    transform: translateX(-50%) scale(var(--canvas-node-toolbar-scale, 1));
    transform-origin: top center;
}
body.canvas-mode-active #canvas-panel .canvas-media-tool-grid9-panel {
    left: 50%;
    width: clamp(260px, calc(100% - 24px), 360px);
    min-width: 0;
    max-width: 360px;
    min-height: 48px;
    height: 48px;
    top: calc(100% + 6px);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 7px;
    border-radius: 10px;
    background: rgba(34,34,35,.98);
    transform: translateX(-50%) scale(var(--canvas-node-toolbar-scale, 1));
    transform-origin: top center;
}
body.canvas-mode-active #canvas-panel .canvas-node:not(.selected) > .canvas-media-tool-upscale-panel,
body.canvas-mode-active #canvas-panel .canvas-node.multi-selected-member > .canvas-media-tool-upscale-panel,
body.canvas-mode-active #canvas-panel .canvas-node.group-selected-member > .canvas-media-tool-upscale-panel,
body.canvas-mode-active #canvas-panel .canvas-node:not(.selected) > .canvas-media-tool-grid9-panel,
body.canvas-mode-active #canvas-panel .canvas-node.multi-selected-member > .canvas-media-tool-grid9-panel,
body.canvas-mode-active #canvas-panel .canvas-node.group-selected-member > .canvas-media-tool-grid9-panel {
    display: none;
}
body.canvas-mode-active #canvas-panel .canvas-media-tool-grid9-panel .canvas-grid9-close {
    width: 34px;
    min-width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: rgba(255,255,255,.84);
    font-size: 0;
    line-height: 1;
    overflow: hidden;
    cursor: pointer;
}
body.canvas-mode-active #canvas-panel .canvas-media-tool-grid9-panel .canvas-grid9-close:hover {
    background: rgba(255,255,255,.10);
    color: #fff;
}
body.canvas-mode-active #canvas-panel .canvas-media-tool-grid9-panel .canvas-grid9-close > span {
    display: none;
}
body.canvas-mode-active #canvas-panel .canvas-media-tool-grid9-panel .canvas-grid9-close::before {
    content: "×";
    font-size: 23px;
    font-weight: 350;
    line-height: 1;
}
body.canvas-mode-active #canvas-panel .canvas-media-tool-grid9-panel .canvas-grid9-close::after {
    content: none !important;
    display: none !important;
}
body.canvas-mode-active #canvas-panel .canvas-grid9-label {
    min-width: 0;
    color: rgba(255,255,255,.94);
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.canvas-mode-active #canvas-panel .canvas-grid9-spacer {
    flex: 1 1 auto;
    min-width: 8px;
}
body.canvas-mode-active #canvas-panel .canvas-grid9-cost {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: rgba(255,255,255,.55);
    margin-left: auto;
}
body.canvas-mode-active #canvas-panel .canvas-grid9-cost i {
    color: rgba(255,255,255,.46);
    font-size: 11px;
}
body.canvas-mode-active #canvas-panel .canvas-grid9-cost b {
    color: #f5e7a6;
    font-size: 12px;
    font-weight: 900;
}
body.canvas-mode-active #canvas-panel .canvas-media-tool-grid9-panel .canvas-grid9-send {
    width: 36px;
    min-width: 36px;
    height: 36px;
    border-radius: 9px;
}
body.canvas-mode-active #canvas-panel .canvas-media-tool-title {
    margin: 0 0 14px;
    color: #fff;
    font-size: 15px;
    font-weight: 900;
}
body.canvas-mode-active #canvas-panel .canvas-media-tool-field {
    display: grid;
    grid-template-columns: 108px 1fr;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
    color: rgba(255,255,255,.78);
    font-size: 14px;
    font-weight: 800;
}
body.canvas-mode-active #canvas-panel .canvas-media-tool-field > button,
body.canvas-mode-active #canvas-panel .canvas-media-tool-model {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.9);
    font-size: 13px;
    font-weight: 850;
}
body.canvas-mode-active #canvas-panel .canvas-media-tool-segments {
    display: flex;
    align-items: center;
    gap: 8px;
}
body.canvas-mode-active #canvas-panel .canvas-media-tool-segments button {
    min-width: 70px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.78);
    font-size: 13px;
    font-weight: 850;
    cursor: pointer;
}
body.canvas-mode-active #canvas-panel .canvas-media-tool-segments.compact {
    gap: 6px;
    max-width: 280px;
    overflow: hidden;
}
body.canvas-mode-active #canvas-panel .canvas-media-tool-segments.compact button {
    min-width: auto;
    padding: 0 10px;
}
body.canvas-mode-active #canvas-panel .canvas-media-tool-segments button:hover,
body.canvas-mode-active #canvas-panel .canvas-media-tool-segments button.active {
    border-color: rgba(255,255,255,.72);
    background: rgba(255,255,255,.13);
    color: #fff;
}
body.canvas-mode-active #canvas-panel .canvas-media-tool-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 16px;
}
body.canvas-mode-active #canvas-panel .canvas-media-tool-cost {
    color: #f5e7a6;
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
}
body.canvas-mode-active #canvas-panel .canvas-media-tool-send {
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    border: 0;
    border-radius: 10px;
    background: rgba(245,245,245,.92);
    color: #171717;
    font-size: 20px;
    font-weight: 950;
    cursor: pointer;
}
body.canvas-mode-active #canvas-panel .canvas-media-tool-send:hover {
    background: #fff;
}
body.canvas-mode-active #canvas-panel .canvas-media-tool-send[data-icon-only="send"] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    font-size: 0;
    line-height: 1;
}
body.canvas-mode-active #canvas-panel .canvas-media-tool-send[data-icon-only="send"] > span {
    display: none;
}
body.canvas-mode-active #canvas-panel .canvas-media-tool-send[data-icon-only="send"]::before {
    content: "↑";
    color: #151515;
    font-size: 26px;
    font-weight: 650;
    line-height: 1;
    transform: translateY(-2px);
}
body.canvas-mode-active #canvas-panel .canvas-media-tool-edit-panel {
    width: 620px;
    min-height: 140px;
    padding: 16px;
}
body.canvas-mode-active #canvas-panel .canvas-media-tool-body {
    min-height: 76px;
}
body.canvas-mode-active #canvas-panel .canvas-media-tool-prompt {
    width: 100%;
    min-height: 76px;
    resize: none;
    border: 0;
    outline: 0;
    background: transparent;
    color: rgba(255,255,255,.88);
    font-size: 14px;
    font-weight: 650;
    line-height: 1.65;
}
body.canvas-mode-active #canvas-panel .canvas-media-tool-prompt::placeholder {
    color: rgba(255,255,255,.48);
}
body.canvas-mode-active #canvas-panel .canvas-media-tool-bottom {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 36px;
}
body.canvas-mode-active #canvas-panel .canvas-media-edit-toolbar {
    position: absolute;
    left: 50%;
    bottom: calc(100% + var(--canvas-node-toolbar-gap, 12px));
    z-index: 40;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(34,34,34,.98);
    color: #fff;
    box-shadow: 0 14px 34px rgba(0,0,0,.34);
    transform: translateX(-50%) scale(var(--canvas-node-toolbar-scale, 1));
    transform-origin: bottom center;
    white-space: nowrap;
}
body.canvas-mode-active #canvas-panel .canvas-media-edit-toolbar button {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 9px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: rgba(255,255,255,.9);
    font-size: 13px;
    font-weight: 850;
    cursor: pointer;
}
body.canvas-mode-active #canvas-panel .canvas-media-edit-toolbar button:hover,
body.canvas-mode-active #canvas-panel .canvas-media-edit-toolbar button.active {
    background: rgba(255,255,255,.12);
}
body.canvas-mode-active #canvas-panel .canvas-media-outpaint-box {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 6;
    border: 1px solid rgba(255,255,255,.68);
    border-radius: 4px;
    box-shadow: 0 0 0 1px rgba(0,0,0,.26), 0 10px 34px rgba(0,0,0,.18);
    pointer-events: none;
}
body.canvas-mode-active #canvas-panel .canvas-media-outpaint-guides {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        linear-gradient(90deg, transparent calc(33.333% - .5px), rgba(255,255,255,.28) calc(33.333% - .5px), rgba(255,255,255,.28) calc(33.333% + .5px), transparent calc(33.333% + .5px)),
        linear-gradient(90deg, transparent calc(66.666% - .5px), rgba(255,255,255,.28) calc(66.666% - .5px), rgba(255,255,255,.28) calc(66.666% + .5px), transparent calc(66.666% + .5px)),
        linear-gradient(0deg, transparent calc(33.333% - .5px), rgba(255,255,255,.28) calc(33.333% - .5px), rgba(255,255,255,.28) calc(33.333% + .5px), transparent calc(33.333% + .5px)),
        linear-gradient(0deg, transparent calc(66.666% - .5px), rgba(255,255,255,.28) calc(66.666% - .5px), rgba(255,255,255,.28) calc(66.666% + .5px), transparent calc(66.666% + .5px));
    opacity: .45;
}
body.canvas-mode-active #canvas-panel .canvas-media-outpaint-handle {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,.74);
    background: rgba(35,35,35,.92);
    box-shadow: 0 2px 8px rgba(0,0,0,.3);
    pointer-events: auto;
    touch-action: none;
    z-index: 3;
}
body.canvas-mode-active #canvas-panel .canvas-media-outpaint-handle:hover {
    border-color: #fff;
    background: rgba(50,50,50,.98);
    box-shadow: 0 0 0 3px rgba(255,255,255,.12), 0 5px 14px rgba(0,0,0,.34);
}
body.canvas-mode-active #canvas-panel .canvas-media-outpaint-handle.nw { left: -6px; top: -6px; cursor: nwse-resize; }
body.canvas-mode-active #canvas-panel .canvas-media-outpaint-handle.n { left: 50%; top: -6px; transform: translateX(-50%); width: 34px; height: 9px; cursor: ns-resize; }
body.canvas-mode-active #canvas-panel .canvas-media-outpaint-handle.ne { right: -6px; top: -6px; cursor: nesw-resize; }
body.canvas-mode-active #canvas-panel .canvas-media-outpaint-handle.e { right: -6px; top: 50%; transform: translateY(-50%); width: 9px; height: 34px; cursor: ew-resize; }
body.canvas-mode-active #canvas-panel .canvas-media-outpaint-handle.se { right: -6px; bottom: -6px; cursor: nwse-resize; }
body.canvas-mode-active #canvas-panel .canvas-media-outpaint-handle.s { left: 50%; bottom: -6px; transform: translateX(-50%); width: 34px; height: 9px; cursor: ns-resize; }
body.canvas-mode-active #canvas-panel .canvas-media-outpaint-handle.sw { left: -6px; bottom: -6px; cursor: nesw-resize; }
body.canvas-mode-active #canvas-panel .canvas-media-outpaint-handle.w { left: -6px; top: 50%; transform: translateY(-50%); width: 9px; height: 34px; cursor: ew-resize; }
body.canvas-outpaint-resizing,
body.canvas-outpaint-resizing * {
    -webkit-user-select: none !important;
    user-select: none !important;
}
body.canvas-mode-active #canvas-panel .canvas-media-crop-box {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 8;
    border: 3px solid #fff;
    border-radius: 0;
    box-shadow: 0 0 0 1px rgba(0,0,0,.66), 0 7px 22px rgba(0,0,0,.28);
    pointer-events: auto;
    touch-action: none;
    cursor: move;
    box-sizing: border-box;
}
body.canvas-mode-active #canvas-panel .canvas-media-crop-guides {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
}
body.canvas-mode-active #canvas-panel .canvas-media-crop-guides i {
    position: absolute;
    display: block;
    background: rgba(255,255,255,.72);
    box-shadow: 0 0 0 1px rgba(0,0,0,.20), 0 0 8px rgba(255,255,255,.16);
    pointer-events: none;
}
body.canvas-mode-active #canvas-panel .canvas-media-crop-guides .v1,
body.canvas-mode-active #canvas-panel .canvas-media-crop-guides .v2 {
    top: 0;
    bottom: 0;
    width: 2px;
    transform: translateX(-1px);
}
body.canvas-mode-active #canvas-panel .canvas-media-crop-guides .v1 { left: 33.333%; }
body.canvas-mode-active #canvas-panel .canvas-media-crop-guides .v2 { left: 66.666%; }
body.canvas-mode-active #canvas-panel .canvas-media-crop-guides .h1,
body.canvas-mode-active #canvas-panel .canvas-media-crop-guides .h2 {
    left: 0;
    right: 0;
    height: 2px;
    transform: translateY(-1px);
}
body.canvas-mode-active #canvas-panel .canvas-media-crop-guides .h1 { top: 33.333%; }
body.canvas-mode-active #canvas-panel .canvas-media-crop-guides .h2 { top: 66.666%; }
body.canvas-mode-active #canvas-panel .canvas-media-crop-handle {
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 2px;
    border: 1px solid rgba(0,0,0,.42);
    background: #fff;
    box-shadow: 0 0 0 1px rgba(255,255,255,.96), 0 3px 10px rgba(0,0,0,.42);
    pointer-events: auto;
    touch-action: none;
    z-index: 4;
}
body.canvas-mode-active #canvas-panel .canvas-media-crop-handle:hover {
    background: #f4f4f4;
    box-shadow: 0 0 0 4px rgba(255,255,255,.24), 0 6px 16px rgba(0,0,0,.44);
}
body.canvas-mode-active #canvas-panel .canvas-media-crop-handle.nw { left: -9px; top: -9px; cursor: nwse-resize; }
body.canvas-mode-active #canvas-panel .canvas-media-crop-handle.n { left: 50%; top: -7px; transform: translateX(-50%); width: 48px; height: 9px; cursor: ns-resize; }
body.canvas-mode-active #canvas-panel .canvas-media-crop-handle.ne { right: -9px; top: -9px; cursor: nesw-resize; }
body.canvas-mode-active #canvas-panel .canvas-media-crop-handle.e { right: -7px; top: 50%; transform: translateY(-50%); width: 9px; height: 48px; cursor: ew-resize; }
body.canvas-mode-active #canvas-panel .canvas-media-crop-handle.se { right: -9px; bottom: -9px; cursor: nwse-resize; }
body.canvas-mode-active #canvas-panel .canvas-media-crop-handle.s { left: 50%; bottom: -7px; transform: translateX(-50%); width: 48px; height: 9px; cursor: ns-resize; }
body.canvas-mode-active #canvas-panel .canvas-media-crop-handle.sw { left: -9px; bottom: -9px; cursor: nesw-resize; }
body.canvas-mode-active #canvas-panel .canvas-media-crop-handle.w { left: -7px; top: 50%; transform: translateY(-50%); width: 9px; height: 48px; cursor: ew-resize; }
body.canvas-crop-resizing,
body.canvas-crop-resizing * {
    -webkit-user-select: none !important;
    user-select: none !important;
}
body.canvas-mode-active #canvas-panel .canvas-crop-toolbar {
    gap: 8px;
    padding: 7px 8px;
    border-radius: 10px;
    background: rgba(31,31,32,.98);
    box-shadow: 0 18px 42px rgba(0,0,0,.38);
}
body.canvas-mode-active #canvas-panel .canvas-crop-toolbar .canvas-crop-close {
    width: 38px;
    min-width: 38px;
    padding: 0;
    color: rgba(255,255,255,.9);
    font-size: 24px;
    font-weight: 350;
}
body.canvas-mode-active #canvas-panel .canvas-crop-divider {
    width: 1px;
    height: 30px;
    margin: 0 2px;
    background: rgba(255,255,255,.14);
}
body.canvas-mode-active #canvas-panel .canvas-crop-tool {
    position: relative;
    min-width: 118px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 10px;
    border-radius: 8px;
    color: rgba(255,255,255,.88);
    font-size: 13px;
    font-weight: 850;
    cursor: pointer;
    outline: none;
}
body.canvas-mode-active #canvas-panel .canvas-crop-tool:hover,
body.canvas-mode-active #canvas-panel .canvas-crop-tool.menu-open {
    background: rgba(255,255,255,.10);
    color: #fff;
}
body.canvas-mode-active #canvas-panel .canvas-crop-tool .canvas-lib-media-svg {
    width: 15px;
    height: 15px;
}
body.canvas-mode-active #canvas-panel .canvas-crop-tool .caret {
    color: rgba(255,255,255,.56);
    font-size: 10px;
}
body.canvas-mode-active #canvas-panel .canvas-crop-menu-list {
    position: absolute;
    left: 0;
    top: calc(100% + 9px);
    z-index: 24;
    width: 150px;
    display: none;
    gap: 3px;
    padding: 7px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(35,35,36,.98);
    box-shadow: 0 18px 42px rgba(0,0,0,.42);
    box-sizing: border-box;
}
body.canvas-mode-active #canvas-panel .canvas-crop-tool.has-menu.menu-open .canvas-crop-menu-list,
body.canvas-mode-active #canvas-panel .canvas-crop-tool.has-menu:focus-within .canvas-crop-menu-list {
    display: grid;
}
body.canvas-mode-active #canvas-panel .canvas-crop-menu-list button {
    width: 100%;
    height: 34px;
    justify-content: space-between;
    padding: 0 9px;
    border-radius: 8px;
    color: rgba(255,255,255,.82);
    background: transparent;
    font-size: 13px;
    font-weight: 820;
    text-align: left;
}
body.canvas-mode-active #canvas-panel .canvas-crop-menu-list button:hover,
body.canvas-mode-active #canvas-panel .canvas-crop-menu-list button.active {
    background: rgba(255,255,255,.12);
    color: #fff;
}
body.canvas-mode-active #canvas-panel .canvas-crop-confirm {
    min-width: 58px !important;
    height: 38px !important;
    padding: 0 16px !important;
    border-radius: 9px !important;
    background: #fff !important;
    color: #151515 !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    box-shadow: 0 6px 18px rgba(0,0,0,.26) !important;
}
body.canvas-mode-active #canvas-panel .canvas-crop-confirm:hover {
    background: #f4f4f4 !important;
    color: #111 !important;
}
body.canvas-mode-active #canvas-panel .canvas-outpaint-toolbar {
    position: absolute;
    left: 50%;
    top: calc(100% + 14px);
    z-index: 44;
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 7px 8px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(31,31,32,.98);
    color: rgba(255,255,255,.88);
    box-shadow: 0 18px 42px rgba(0,0,0,.38);
    transform: translateX(-50%) scale(var(--canvas-node-toolbar-scale, 1));
    transform-origin: top center;
    white-space: nowrap;
    box-sizing: border-box;
    pointer-events: auto;
    backdrop-filter: blur(16px);
}
body.canvas-mode-active #canvas-panel .canvas-outpaint-toolbar button,
body.canvas-mode-active #canvas-panel .canvas-outpaint-tool {
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: rgba(255,255,255,.84);
    font-size: 13px;
    font-weight: 850;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    box-sizing: border-box;
}
body.canvas-mode-active #canvas-panel .canvas-outpaint-toolbar button:hover,
body.canvas-mode-active #canvas-panel .canvas-outpaint-tool:hover,
body.canvas-mode-active #canvas-panel .canvas-outpaint-tool.menu-open {
    background: rgba(255,255,255,.10);
    color: #fff;
}
body.canvas-mode-active #canvas-panel .canvas-outpaint-close {
    width: 40px;
    min-width: 40px;
    color: rgba(255,255,255,.82);
    font-size: 0;
}
body.canvas-mode-active #canvas-panel .canvas-outpaint-close::before {
    content: "×";
    color: rgba(255,255,255,.9);
    font-size: 24px;
    font-weight: 350;
    line-height: 1;
}
body.canvas-mode-active #canvas-panel .canvas-outpaint-close > span,
body.canvas-mode-active #canvas-panel .canvas-outpaint-send > span {
    display: none;
}
body.canvas-mode-active #canvas-panel .canvas-outpaint-divider {
    width: 1px;
    height: 30px;
    margin: 0 2px;
    background: rgba(255,255,255,.14);
}
body.canvas-mode-active #canvas-panel .canvas-outpaint-divider.subtle {
    height: 22px;
    margin-left: 0;
    background: rgba(255,255,255,.08);
}
body.canvas-mode-active #canvas-panel .canvas-outpaint-tool {
    position: relative;
    min-width: 62px;
    padding: 0 9px;
    outline: none;
}
body.canvas-mode-active #canvas-panel .canvas-outpaint-tool .caret {
    color: rgba(255,255,255,.52);
    font-size: 10px;
}
body.canvas-mode-active #canvas-panel .canvas-outpaint-dashed-icon {
    width: 14px;
    height: 14px;
    display: inline-grid;
    place-items: center;
    border: 1.5px dashed rgba(255,255,255,.78);
    border-radius: 3px;
    color: transparent;
    font-size: 0;
}
body.canvas-mode-active #canvas-panel .canvas-outpaint-menu-list {
    position: absolute;
    left: 0;
    bottom: calc(100% + 9px);
    z-index: 20;
    width: 150px;
    display: none;
    gap: 3px;
    padding: 7px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(35,35,36,.98);
    box-shadow: 0 18px 42px rgba(0,0,0,.42);
    box-sizing: border-box;
}
body.canvas-mode-active #canvas-panel .canvas-outpaint-tool.has-menu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 12px;
}
body.canvas-mode-active #canvas-panel .canvas-outpaint-tool.has-menu.menu-open .canvas-outpaint-menu-list,
body.canvas-mode-active #canvas-panel .canvas-outpaint-tool.has-menu:focus-within .canvas-outpaint-menu-list {
    display: grid;
}
body.canvas-mode-active #canvas-panel .canvas-outpaint-menu-list button {
    width: 100%;
    height: 34px;
    justify-content: space-between;
    padding: 0 9px;
    border-radius: 8px;
    color: rgba(255,255,255,.82);
    background: transparent;
    font-size: 13px;
    font-weight: 820;
    text-align: left;
}
body.canvas-mode-active #canvas-panel .canvas-outpaint-menu-list button:hover,
body.canvas-mode-active #canvas-panel .canvas-outpaint-menu-list button.active {
    background: rgba(255,255,255,.12);
    color: #fff;
}
body.canvas-mode-active #canvas-panel .canvas-outpaint-menu-list button i {
    color: rgba(255,255,255,.72);
    font-size: 11px;
}
body.canvas-mode-active #canvas-panel .canvas-outpaint-cost {
    min-width: 34px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: rgba(255,255,255,.60);
    font-size: 13px;
}
body.canvas-mode-active #canvas-panel .canvas-outpaint-cost i {
    color: rgba(255,255,255,.54);
    font-size: 12px;
}
body.canvas-mode-active #canvas-panel .canvas-outpaint-cost b {
    color: #f5e7a6;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
}
body.canvas-mode-active #canvas-panel .canvas-outpaint-send {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    border: 0 !important;
    border-radius: 9px !important;
    background: #fff !important;
    color: #151515 !important;
    font-size: 0 !important;
    opacity: 1 !important;
    filter: none !important;
    box-shadow: 0 6px 18px rgba(0,0,0,.26) !important;
}
body.canvas-mode-active #canvas-panel .canvas-outpaint-send:hover {
    background: #f4f4f4 !important;
    color: #111 !important;
}
body.canvas-mode-active #canvas-panel .canvas-outpaint-send::before {
    content: "↑";
    color: #151515 !important;
    font-size: 26px !important;
    font-weight: 650 !important;
    line-height: 1 !important;
    transform: translateY(-2px);
}
body.canvas-mode-active #canvas-panel .canvas-erase-top-toolbar {
    gap: 8px;
    padding: 7px 10px;
    border-radius: 10px;
    background: rgba(31,31,32,.98);
    box-shadow: 0 18px 42px rgba(0,0,0,.38);
    backdrop-filter: blur(16px);
}
body.canvas-mode-active #canvas-panel .canvas-erase-top-toolbar button {
    width: 34px;
    min-width: 34px;
    height: 34px;
    padding: 0;
}
body.canvas-mode-active #canvas-panel .canvas-erase-top-toolbar .canvas-erase-exit {
    width: auto;
    min-width: 78px;
    padding: 0 9px;
    color: rgba(255,255,255,.9);
}
body.canvas-mode-active #canvas-panel .canvas-erase-top-toolbar .canvas-lib-media-svg {
    width: 17px;
    height: 17px;
}
body.canvas-mode-active #canvas-panel .canvas-erase-divider {
    width: 1px;
    height: 30px;
    margin: 0 2px;
    background: rgba(255,255,255,.14);
}
body.canvas-mode-active #canvas-panel .canvas-erase-divider.subtle {
    height: 22px;
    background: rgba(255,255,255,.08);
}
body.canvas-mode-active #canvas-panel .canvas-erase-size {
    height: 34px;
    min-width: 132px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 8px;
    color: rgba(255,255,255,.86);
}
body.canvas-mode-active #canvas-panel .canvas-erase-size .canvas-lib-media-svg {
    width: 18px;
    height: 18px;
}
body.canvas-mode-active #canvas-panel .canvas-erase-size input[type="range"] {
    width: 92px;
    accent-color: #7dd3fc;
    cursor: pointer;
}
body.canvas-mode-active #canvas-panel .canvas-erase-bottom-toolbar {
    position: absolute;
    left: 50%;
    top: calc(100% + 14px);
    z-index: 44;
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 7px 8px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(31,31,32,.98);
    color: rgba(255,255,255,.88);
    box-shadow: 0 18px 42px rgba(0,0,0,.38);
    transform: translateX(-50%) scale(var(--canvas-node-toolbar-scale, 1));
    transform-origin: top center;
    white-space: nowrap;
    box-sizing: border-box;
    pointer-events: auto;
    backdrop-filter: blur(16px);
}
body.canvas-mode-active #canvas-panel .canvas-erase-bottom-toolbar button,
body.canvas-mode-active #canvas-panel .canvas-erase-tool {
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: rgba(255,255,255,.84);
    font-size: 13px;
    font-weight: 850;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    box-sizing: border-box;
}
body.canvas-mode-active #canvas-panel .canvas-erase-bottom-toolbar button:hover,
body.canvas-mode-active #canvas-panel .canvas-erase-tool:hover,
body.canvas-mode-active #canvas-panel .canvas-erase-tool.menu-open {
    background: rgba(255,255,255,.10);
    color: #fff;
}
body.canvas-mode-active #canvas-panel .canvas-erase-tool {
    position: relative;
    min-width: 62px;
    padding: 0 9px;
    outline: none;
}
body.canvas-mode-active #canvas-panel .canvas-erase-tool .caret {
    color: rgba(255,255,255,.52);
    font-size: 10px;
}
body.canvas-mode-active #canvas-panel .canvas-erase-dashed-icon {
    width: 14px;
    height: 14px;
    display: inline-grid;
    place-items: center;
    border: 1.5px dashed rgba(255,255,255,.78);
    border-radius: 3px;
    color: transparent;
    font-size: 0;
}
body.canvas-mode-active #canvas-panel .canvas-erase-menu-list {
    position: absolute;
    left: 0;
    bottom: calc(100% + 9px);
    z-index: 20;
    width: 150px;
    display: none;
    gap: 3px;
    padding: 7px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(35,35,36,.98);
    box-shadow: 0 18px 42px rgba(0,0,0,.42);
    box-sizing: border-box;
}
body.canvas-mode-active #canvas-panel .canvas-erase-tool.has-menu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 12px;
}
body.canvas-mode-active #canvas-panel .canvas-erase-tool.has-menu.menu-open .canvas-erase-menu-list {
    display: grid;
}
body.canvas-mode-active #canvas-panel .canvas-erase-menu-list button {
    width: 100%;
    height: 34px;
    justify-content: space-between;
    padding: 0 9px;
    border-radius: 8px;
    color: rgba(255,255,255,.82);
    background: transparent;
    font-size: 13px;
    font-weight: 820;
    text-align: left;
}
body.canvas-mode-active #canvas-panel .canvas-erase-menu-list button:hover,
body.canvas-mode-active #canvas-panel .canvas-erase-menu-list button.active {
    background: rgba(255,255,255,.12);
    color: #fff;
}
body.canvas-mode-active #canvas-panel .canvas-erase-menu-list button i {
    color: rgba(255,255,255,.72);
    font-size: 11px;
}
body.canvas-mode-active #canvas-panel .canvas-erase-cost {
    min-width: 34px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: rgba(255,255,255,.60);
    font-size: 13px;
}
body.canvas-mode-active #canvas-panel .canvas-erase-cost i {
    color: rgba(255,255,255,.54);
    font-size: 12px;
}
body.canvas-mode-active #canvas-panel .canvas-erase-cost b {
    color: #f5e7a6;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
}
body.canvas-mode-active #canvas-panel .canvas-erase-send {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    border: 0 !important;
    border-radius: 9px !important;
    background: #fff !important;
    color: #151515 !important;
    font-size: 0 !important;
    opacity: 1 !important;
    filter: none !important;
    box-shadow: 0 6px 18px rgba(0,0,0,.26) !important;
}
body.canvas-mode-active #canvas-panel .canvas-erase-send:hover {
    background: #f4f4f4 !important;
    color: #111 !important;
}
body.canvas-mode-active #canvas-panel .canvas-erase-send > span {
    display: none;
}
body.canvas-mode-active #canvas-panel .canvas-erase-send::before {
    content: "↑";
    color: #151515 !important;
    font-size: 26px !important;
    font-weight: 650 !important;
    line-height: 1 !important;
    transform: translateY(-2px);
}
body.canvas-mode-active #canvas-panel .canvas-redraw-top-toolbar {
    gap: 8px;
    padding: 7px 10px;
    border-radius: 10px;
    background: rgba(31,31,32,.98);
    box-shadow: 0 18px 42px rgba(0,0,0,.38);
    backdrop-filter: blur(16px);
}
body.canvas-mode-active #canvas-panel .canvas-redraw-top-toolbar button {
    width: 34px;
    min-width: 34px;
    height: 34px;
    padding: 0;
}
body.canvas-mode-active #canvas-panel .canvas-redraw-top-toolbar .canvas-redraw-exit {
    width: auto;
    min-width: 78px;
    padding: 0 9px;
    color: rgba(255,255,255,.9);
}
body.canvas-mode-active #canvas-panel .canvas-redraw-top-toolbar .canvas-lib-media-svg {
    width: 17px;
    height: 17px;
}
body.canvas-mode-active #canvas-panel .canvas-redraw-panel {
    position: absolute;
    left: 50%;
    top: calc(100% + 14px);
    z-index: 44;
    width: min(420px, max(280px, calc(100% + 70px)));
    min-height: 134px;
    display: grid;
    grid-template-rows: minmax(68px, 1fr) 42px;
    gap: 8px;
    padding: 13px 14px 10px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(31,31,32,.98);
    color: rgba(255,255,255,.88);
    box-shadow: 0 18px 42px rgba(0,0,0,.38);
    transform: translateX(-50%) scale(var(--canvas-node-toolbar-scale, 1));
    transform-origin: top center;
    box-sizing: border-box;
    pointer-events: auto;
    backdrop-filter: blur(16px);
}
body.canvas-mode-active #canvas-panel .canvas-redraw-prompt {
    width: 100%;
    min-height: 68px;
    resize: none;
    border: 0 !important;
    outline: 0 !important;
    outline-offset: 0 !important;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(31,31,32,.98) !important;
    color: rgba(255,255,255,.92);
    font-size: 14px;
    font-weight: 650;
    line-height: 1.55;
    box-shadow: none !important;
    border-radius: 0;
    padding: 0;
}
body.canvas-mode-active #canvas-panel .canvas-redraw-prompt:focus,
body.canvas-mode-active #canvas-panel .canvas-redraw-prompt:focus-visible,
body.canvas-mode-active #canvas-panel .canvas-redraw-prompt:active {
    border: 0 !important;
    outline: 0 !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
    background: rgba(31,31,32,.98) !important;
}
body.canvas-mode-active #canvas-panel .canvas-redraw-prompt::placeholder {
    color: rgba(255,255,255,.34);
}
body.canvas-mode-active #canvas-panel .canvas-redraw-bottom-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
body.canvas-mode-active #canvas-panel .canvas-redraw-panel .canvas-erase-tool {
    min-width: 58px;
    height: 34px;
    padding: 0 7px;
}
body.canvas-mode-active #canvas-panel .canvas-redraw-panel .canvas-erase-send {
    margin-left: auto;
}
body.canvas-mode-active #canvas-panel .canvas-redraw-panel .canvas-erase-cost {
    min-width: 30px;
}
body.canvas-mode-active #canvas-panel .canvas-lib-media-tool-menu {
    position: absolute;
    left: 0;
    top: calc(100% + 8px);
    z-index: 18;
    width: var(--canvas-media-menu-width, 156px);
    max-height: 318px;
    overflow: auto;
    display: none;
    padding: 7px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(55,55,55,.98);
    box-shadow: 0 18px 40px rgba(0,0,0,.36);
}
body.canvas-mode-active #canvas-panel .canvas-lib-media-tool-menu.menu-kind-hd {
    --canvas-media-menu-width: 112px;
}
body.canvas-mode-active #canvas-panel .canvas-lib-media-tool-menu.menu-kind-split {
    --canvas-media-menu-width: 148px;
}
body.canvas-mode-active #canvas-panel .canvas-lib-media-tool-menu.menu-kind-grid {
    --canvas-media-menu-width: 164px;
}
body.canvas-mode-active #canvas-panel .canvas-lib-media-tool.has-menu::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 10px;
}
body.canvas-mode-active #canvas-panel .canvas-lib-media-tool.has-menu.menu-open .canvas-lib-media-tool-menu {
    display: grid;
    gap: 3px;
}
body.canvas-mode-active #canvas-panel .canvas-stage-wrap > .canvas-lib-media-tool-menu-portal {
    position: absolute !important;
    z-index: 1312 !important;
    display: grid !important;
    gap: 3px !important;
    width: var(--canvas-media-menu-width, 156px) !important;
    max-height: min(318px, calc(100vh - 40px)) !important;
    overflow: auto !important;
    padding: 7px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    background: rgba(55,55,55,.98) !important;
    box-shadow: 0 18px 40px rgba(0,0,0,.36) !important;
    pointer-events: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-width: thin;
}
body.canvas-mode-active #canvas-panel .canvas-stage-wrap > .canvas-lib-media-tool-menu-portal.compact {
    width: 96px !important;
    max-height: none !important;
}
body.canvas-mode-active.canvas-media-toolbar-menu-ported #canvas-panel .canvas-lib-media-tool.has-menu.menu-open > .canvas-lib-media-tool-menu {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-media-tool-menu button {
    justify-content: flex-start;
    width: 100%;
    min-height: 32px;
    padding: 0 8px;
    font-size: 13px;
    font-weight: 780;
    white-space: nowrap;
}
body.canvas-mode-active #canvas-panel .canvas-lib-media-tool-menu button i {
    color: rgba(255,255,255,.52);
}
body.canvas-mode-active #canvas-panel .canvas-node.lib-reference-image-node .canvas-port-plus.input {
    display: none !important;
}
body.canvas-mode-active #canvas-panel .canvas-node.lib-reference-image-node .canvas-port-plus.output {
    right: -34px;
    top: calc(50% + 14px);
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-references {
    display: none;
    align-items: flex-end;
    gap: 8px;
    min-height: 0;
    padding: 0 4px 2px;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-references.show {
    display: flex;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-ref {
    position: relative;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.82);
    box-shadow: 0 10px 20px rgba(0,0,0,.22);
    cursor: default;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-ref:hover {
    border-color: rgba(255,255,255,.46);
    background: rgba(255,255,255,.13);
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-ref > img,
body.canvas-mode-active #canvas-panel .canvas-node-gen-ref > video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 7px;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-ref.text {
    grid-template-columns: 1fr;
    padding: 5px;
    overflow: hidden;
    font-size: 10px;
    line-height: 1.1;
    text-align: center;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-ref.text i {
    font-size: 15px;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-ref.text span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-ref > button {
    position: absolute;
    right: -6px;
    top: -6px;
    width: 18px;
    height: 18px;
    display: none;
    place-items: center;
    border: 1px solid rgba(255,255,255,.65);
    border-radius: 999px;
    background: rgba(38,38,38,.96);
    color: #fff;
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-ref:hover > button {
    display: grid;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-ref-preview {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 10px);
    z-index: 24;
    width: 196px;
    min-height: 80px;
    display: none;
    transform: translateX(-50%);
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(37,37,37,.98);
    box-shadow: 0 18px 40px rgba(0,0,0,.42);
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-ref:hover .canvas-node-gen-ref-preview {
    display: block;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-ref-preview img,
body.canvas-mode-active #canvas-panel .canvas-node-gen-ref-preview video {
    width: 100%;
    max-height: 220px;
    display: block;
    object-fit: contain;
    background: #171717;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-ref-preview.text-preview {
    width: 220px;
    max-height: 160px;
    overflow: auto;
    padding: 12px;
    color: rgba(255,255,255,.86);
    font-size: 12px;
    line-height: 1.5;
    text-align: left;
    white-space: pre-wrap;
}
.canvas-creator-sidebar-toggle {
    position: absolute;
    left: 0;
    top: 50%;
    z-index: 1305;
    width: 18px;
    height: 92px;
    transform: translateY(-50%);
    border: 1px solid rgba(255,255,255,.18);
    border-left: 0;
    border-radius: 0 12px 12px 0;
    background: rgba(255,255,255,.95);
    box-shadow: 8px 0 28px rgba(0,0,0,.26);
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    overflow: hidden;
    color: transparent;
    font-size: 0;
    line-height: 0;
    transition: transform .34s cubic-bezier(.22, 1, .36, 1), background .16s ease, box-shadow .2s ease;
}
.canvas-creator-sidebar-toggle span {
    width: 4px;
    height: 62px;
    border-radius: 999px;
    background: linear-gradient(180deg, #6e5bff, #b8a8ff);
    box-shadow: 0 0 18px rgba(110,91,255,.38);
}
.canvas-creator-sidebar-toggle:hover {
    background: #fff;
    box-shadow: 10px 0 34px rgba(110,91,255,.24);
}
body.canvas-mode-active #canvas-panel .canvas-creator-sidebar-toggle {
    display: inline-flex;
}
body.canvas-mode-active.canvas-creator-sidebar-open #canvas-panel .canvas-creator-sidebar-toggle {
    left: 0;
}
body.canvas-mode-active.canvas-creator-sidebar-open .sidebar {
    display: flex !important;
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 268px !important;
    height: 100vh !important;
    z-index: 2147483600 !important;
    transform: translateX(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    overflow: hidden !important;
    padding: 20px 14px 16px !important;
    border-radius: 0 !important;
    border-right: 1px solid var(--mt-line) !important;
    box-shadow: 1px 0 0 rgba(255,255,255,.4), 18px 0 50px -36px rgba(40,30,90,.18) !important;
    background: #fff !important;
    color: var(--mt-ink) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
body.canvas-mode-active.canvas-creator-sidebar-open .sidebar .nav-menu {
    overflow-y: auto !important;
    scrollbar-width: thin;
}
body.canvas-mode-active.canvas-creator-sidebar-open .sidebar-hover-zone {
    display: none !important;
}
body.canvas-mode-active.canvas-creator-sidebar-open .sidebar::before,
body.canvas-mode-active.canvas-creator-sidebar-open .sidebar::after {
    display: none !important;
}
body.canvas-mode-active.canvas-creator-sidebar-open .logo-section {
    padding: 4px 6px 18px !important;
    margin-bottom: 14px !important;
    border-bottom: 1px solid var(--mt-line) !important;
    background: transparent !important;
}
body.canvas-mode-active.canvas-creator-sidebar-open .logo {
    gap: 12px !important;
    min-height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
body.canvas-mode-active.canvas-creator-sidebar-open .logo-icon {
    display: none !important;
}
body.canvas-mode-active.canvas-creator-sidebar-open .logo-text {
    position: relative !important;
    padding-left: 16px !important;
    font-family: 'Noto Serif SC', serif !important;
    font-size: 19px !important;
    font-weight: 900 !important;
    letter-spacing: -.015em !important;
    color: var(--mt-ink) !important;
    background: none !important;
    -webkit-text-fill-color: var(--mt-ink) !important;
}
body.canvas-mode-active.canvas-creator-sidebar-open .logo-text::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    width: 6px !important;
    height: 6px !important;
    transform: translateY(-50%) !important;
    border-radius: 50% !important;
    background: var(--mt-accent) !important;
    box-shadow: 0 0 10px var(--mt-accent) !important;
}
body.canvas-mode-active.canvas-creator-sidebar-open .ark-home-btn {
    display: none !important;
}
body.canvas-mode-active.canvas-creator-sidebar-open .nav-menu {
    padding: 8px 6px 12px !important;
    background: transparent !important;
}
body.canvas-mode-active.canvas-creator-sidebar-open .nav-section {
    margin: 0 0 14px !important;
    padding: 0 !important;
    border-bottom: 0 !important;
    position: relative !important;
}
body.canvas-mode-active.canvas-creator-sidebar-open .nav-section:first-child {
    padding-top: 0 !important;
}
body.canvas-mode-active.canvas-creator-sidebar-open .nav-section + .nav-section {
    padding-top: 12px !important;
}
body.canvas-mode-active.canvas-creator-sidebar-open .nav-section + .nav-section::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 10px !important;
    right: 10px !important;
    height: 1px !important;
    background: var(--mt-line) !important;
}
body.canvas-mode-active.canvas-creator-sidebar-open .nav-section-title {
    padding: 0 12px 6px !important;
    margin: 0 !important;
    color: var(--mt-soft) !important;
    font-family: 'Noto Sans SC', sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    line-height: 1.4 !important;
}
body.canvas-mode-active.canvas-creator-sidebar-open .nav-item {
    min-height: 34px !important;
    margin: 0 !important;
    padding: 6px 12px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--mt-muted) !important;
    transform: none !important;
    transition: background .15s, color .15s !important;
}
body.canvas-mode-active.canvas-creator-sidebar-open .nav-item::before {
    display: none !important;
}
body.canvas-mode-active.canvas-creator-sidebar-open .nav-icon {
    display: none !important;
}
body.canvas-mode-active.canvas-creator-sidebar-open .nav-text,
body.canvas-mode-active.canvas-creator-sidebar-open .nav-item.active .nav-text {
    color: inherit !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    letter-spacing: -.005em !important;
}
body.canvas-mode-active.canvas-creator-sidebar-open .nav-item:hover {
    background: rgba(91,71,251,.05) !important;
    color: var(--mt-ink) !important;
}
body.canvas-mode-active.canvas-creator-sidebar-open .nav-item.active {
    min-height: 34px !important;
    margin: 0 !important;
    padding: 6px 12px !important;
    background: linear-gradient(135deg, var(--mt-accent), var(--mt-accent-3)) !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: 0 6px 16px -8px rgba(91,71,251,.55) !important;
}
body.canvas-mode-active.canvas-creator-sidebar-open .nav-item.active .nav-text {
    color: #fff !important;
    font-weight: 700 !important;
}
body.canvas-mode-active.canvas-creator-sidebar-open .nav-badge,
body.canvas-mode-active.canvas-creator-sidebar-open .nav-item:not(.active) .nav-badge {
    min-width: auto !important;
    height: auto !important;
    margin-left: auto !important;
    padding: 1px 7px !important;
    border-radius: 4px !important;
    background: rgba(91,71,251,.10) !important;
    color: var(--mt-accent) !important;
    border: 0 !important;
    box-shadow: none !important;
    font-family: 'Manrope', 'Noto Sans SC', sans-serif !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    letter-spacing: .06em !important;
    line-height: 1.6 !important;
}
body.canvas-mode-active.canvas-creator-sidebar-open .nav-item.active .nav-badge {
    margin-left: auto !important;
    padding: 1px 7px !important;
    border-radius: 4px !important;
    background: rgba(255,255,255,.20) !important;
    color: #fff !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    box-shadow: none !important;
}
body.canvas-mode-active.canvas-creator-sidebar-open .user-section {
    padding: 12px 6px 8px !important;
    border-top: 1px solid var(--mt-line) !important;
    background: transparent !important;
}
body.canvas-mode-active.canvas-creator-sidebar-open .user-card {
    min-height: auto !important;
    padding: 8px 10px !important;
    gap: 10px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--mt-ink) !important;
}
body.canvas-mode-active.canvas-creator-sidebar-open .user-avatar {
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    background: var(--mt-bg-2) !important;
    border: 1px solid var(--mt-line-2) !important;
    color: var(--mt-muted) !important;
    box-shadow: none !important;
    font-size: 14px !important;
}
body.canvas-mode-active.canvas-creator-sidebar-open .user-name {
    color: var(--mt-ink) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}
body.canvas-mode-active.canvas-creator-sidebar-open .user-status {
    color: var(--mt-muted) !important;
    font-size: 12px !important;
}
@media (max-width: 760px) {
    .canvas-lib-top {
        left: 12px;
        right: 12px;
    }
    .canvas-lib-right {
        gap: 6px;
    }
    .canvas-lib-top-icon {
        display: none;
    }
    .canvas-lib-pill {
        height: 30px;
        padding: 0 9px;
        font-size: 11px;
    }
    .canvas-lib-left-rail {
        left: 12px;
    }
    .canvas-lib-bottom-bar {
        left: 12px;
        bottom: 12px;
    }
}
/* Permanent dark AI canvas lock: every canvas entry path must render this surface. */
body.canvas-black-locked,
body.canvas-black-locked.ui-polished-creator,
body.canvas-black-locked.ui-polished-creator.day {
    width: 100vw !important;
    height: 100vh !important;
    overflow: hidden !important;
    background: #08090a !important;
    color: #f5f6f7 !important;
}
body.canvas-black-locked .bg-dynamic,
body.canvas-black-locked .grid-bg,
body.canvas-black-locked .top-bar,
body.canvas-black-locked .create-tabs,
body.canvas-black-locked .history-section,
body.canvas-black-locked .result-section,
body.canvas-black-locked .page-header,
body.canvas-black-locked .section-header {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
body.canvas-black-locked .sidebar,
body.canvas-black-locked .sidebar-hover-zone {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
body.canvas-black-locked.canvas-creator-sidebar-open .sidebar {
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
}
body.canvas-black-locked .main-content,
body.ui-polished-creator.canvas-black-locked .main-content,
body.ui-polished-creator.sidebar-auto-hide.canvas-black-locked .main-content {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #08090a !important;
    transform: none !important;
}
body.canvas-black-locked #canvas-panel,
body.ui-polished-creator.day.canvas-black-locked #canvas-panel {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 1200 !important;
    width: 100vw !important;
    height: 100vh !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #08090a !important;
    color: #f5f6f7 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
body.canvas-black-locked #canvas-panel .canvas-shell,
body.ui-polished-creator.day.canvas-black-locked #canvas-panel .canvas-shell {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #08090a !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
body.canvas-black-locked #canvas-panel .canvas-side,
body.canvas-black-locked #canvas-panel .canvas-inspector,
body.canvas-black-locked #canvas-panel .canvas-topbar,
body.canvas-black-locked #canvas-panel .canvas-toolbar,
body.canvas-black-locked #canvas-panel .canvas-floating-dock,
body.canvas-black-locked #canvas-panel .canvas-timeline {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
body.canvas-black-locked #canvas-panel .canvas-workspace,
body.ui-polished-creator.day.canvas-black-locked #canvas-panel .canvas-workspace {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #08090a !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
body.canvas-black-locked #canvas-panel .canvas-stage-wrap,
body.ui-polished-creator.day.canvas-black-locked #canvas-panel .canvas-stage-wrap {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
	    overflow: hidden !important;
	    background-color: #08090a !important;
	    background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,var(--canvas-grid-alpha,.057)) 0 .72px, transparent .78px) !important;
	    background-size: var(--canvas-grid-size, 18px) var(--canvas-grid-size, 18px) !important;
	    border: 0 !important;
	    border-radius: 0 !important;
	    box-shadow: none !important;
	}
body.canvas-black-locked #canvas-panel .canvas-lib-top,
body.canvas-black-locked #canvas-panel .canvas-lib-left-rail,
body.canvas-black-locked #canvas-panel .canvas-lib-bottom-bar {
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
}
body.canvas-black-locked #canvas-panel .canvas-lib-left-rail {
    left: 18px !important;
    top: 50% !important;
    bottom: auto !important;
    width: 54px !important;
    min-height: 258px !important;
    height: auto !important;
    padding: 8px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    transform: translateY(-50%) !important;
    border-radius: 16px !important;
}
body.canvas-black-locked #canvas-panel .canvas-lib-left-rail .canvas-lib-rail-btn {
    flex: 0 0 auto !important;
    width: 38px !important;
    height: 38px !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-panel.video-node-panel {
    width: min(560px, calc(100% - 32px)) !important;
    grid-template-rows: auto minmax(74px, 1fr) auto !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-panel.video-node-panel .canvas-node-gen-head {
    min-height: 88px !important;
    align-items: flex-start !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-panel.video-node-panel .canvas-node-gen-tools {
    width: calc(100% - 34px) !important;
    display: grid !important;
    grid-template-columns: repeat(5, max-content) !important;
    align-items: start !important;
    justify-content: start !important;
    gap: 8px 6px !important;
    padding-right: 0 !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-panel.video-node-panel .canvas-node-gen-tools button {
    width: auto !important;
    min-width: 62px !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    font-weight: 850 !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-panel.video-node-panel .canvas-node-gen-tools button.mode.active {
    border-color: rgba(255,255,255,.70) !important;
    background: rgba(255,255,255,.10) !important;
    color: #fff !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-panel.video-node-panel .canvas-node-gen-tools button.mode.muted {
    border-color: rgba(255,255,255,.12) !important;
    background: rgba(255,255,255,.035) !important;
    color: rgba(255,255,255,.68) !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-panel.video-node-panel .canvas-node-gen-tools button.mode:disabled,
body.canvas-mode-active #canvas-panel .canvas-node-gen-panel.video-node-panel .canvas-node-gen-tools button.mode.disabled {
    opacity: .42 !important;
    cursor: not-allowed !important;
    border-color: rgba(255,255,255,.08) !important;
    background: rgba(255,255,255,.025) !important;
    color: rgba(255,255,255,.24) !important;
    box-shadow: none !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-panel.video-node-panel .canvas-node-gen-tools button.mode.needs-input:not(.active) {
    border-color: rgba(245,183,76,.42) !important;
    border-style: dashed !important;
    color: rgba(255,225,167,.82) !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-panel.video-node-panel .canvas-node-gen-tools button.mode.needs-input.active {
    border-color: rgba(245,183,76,.86) !important;
    background: rgba(245,183,76,.13) !important;
    color: #ffe3a8 !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-panel.video-node-panel .canvas-node-gen-tools button.compact {
    width: 52px !important;
    min-width: 52px !important;
    height: 40px !important;
    display: inline-grid !important;
    gap: 2px !important;
    padding: 0 !important;
    color: rgba(255,255,255,.76) !important;
    font-size: 10px !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-panel.video-node-panel .canvas-node-gen-input {
    min-height: 74px !important;
    padding: 6px 4px 0 !important;
    color: rgba(207,216,221,.84) !important;
    font-size: 14px !important;
    font-weight: 650 !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-panel.video-node-panel .canvas-node-gen-input::placeholder {
    color: rgba(198,207,213,.72) !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-panel.video-node-panel .canvas-node-gen-row {
    grid-template-columns: minmax(170px, 1.15fr) minmax(168px, .98fr) minmax(64px, .34fr) auto 34px !important;
    align-items: center !important;
    gap: 8px !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-panel.video-node-panel .canvas-node-gen-picker-trigger {
    min-height: 34px !important;
    padding: 0 8px !important;
    border-color: transparent !important;
    background: transparent !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-panel.video-node-panel .canvas-node-gen-picker-trigger:hover,
body.canvas-mode-active #canvas-panel .canvas-node-gen-panel.video-node-panel .canvas-node-gen-picker.open .canvas-node-gen-picker-trigger {
    border-color: rgba(255,255,255,.28) !important;
    background: rgba(255,255,255,.08) !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-menu.video-ratio {
    left: auto !important;
    right: 0 !important;
    width: 340px !important;
    min-width: 340px !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 12px !important;
    gap: 12px !important;
    border-radius: 12px !important;
    background: rgba(34,34,34,.985) !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-menu.video-ratio .canvas-video-ratio-section {
    display: grid !important;
    gap: 8px !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-menu.video-ratio .canvas-video-ratio-label {
    color: rgba(255,255,255,.46) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}
body.canvas-mode-active #canvas-panel .canvas-video-ratio-grid {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 8px !important;
}
body.canvas-mode-active #canvas-panel .canvas-video-ratio-option,
body.canvas-mode-active #canvas-panel .canvas-video-resolution-row button {
    min-height: 62px !important;
    display: grid !important;
    place-items: center !important;
    gap: 5px !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: rgba(255,255,255,.58) !important;
    font-size: 12px !important;
    cursor: pointer !important;
}
body.canvas-mode-active #canvas-panel .canvas-video-ratio-option i {
    width: 16px !important;
    height: 9px !important;
    border: 1px solid currentColor !important;
    border-radius: 2px !important;
}
body.canvas-mode-active #canvas-panel .canvas-video-ratio-option.active,
body.canvas-mode-active #canvas-panel .canvas-video-ratio-option:hover,
body.canvas-mode-active #canvas-panel .canvas-video-resolution-row button.active,
body.canvas-mode-active #canvas-panel .canvas-video-resolution-row button:hover {
    border-color: rgba(255,255,255,.86) !important;
    color: #fff !important;
    background: rgba(255,255,255,.04) !important;
}
body.canvas-mode-active #canvas-panel .canvas-video-resolution-row {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
}
body.canvas-mode-active #canvas-panel .canvas-video-resolution-row button {
    min-height: 34px !important;
}
body.canvas-mode-active #canvas-panel .canvas-video-duration-row {
    display: grid !important;
    grid-template-columns: 1fr 82px !important;
    align-items: center !important;
    gap: 10px !important;
}
body.canvas-mode-active #canvas-panel .canvas-video-duration-slider {
    width: 100% !important;
    accent-color: #fff !important;
    cursor: pointer !important;
}
body.canvas-mode-active #canvas-panel .canvas-video-duration-value {
    color: rgba(255,255,255,.58) !important;
    font-size: 12px !important;
    text-align: right !important;
}
body.canvas-mode-active #canvas-panel .canvas-node.lib-text-node,
body.canvas-mode-active #canvas-panel .canvas-node.lib-text-node:hover,
body.canvas-mode-active #canvas-panel .canvas-node.lib-text-node.selected {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}
body.canvas-mode-active #canvas-panel .canvas-node.lib-text-node .canvas-lib-node-title {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    z-index: 6 !important;
    height: 22px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    color: rgba(255,255,255,.58) !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    text-shadow: none !important;
    background: transparent !important;
}
body.canvas-mode-active #canvas-panel .canvas-node.lib-text-node .canvas-lib-node-title i {
    font-size: 13px !important;
    color: rgba(255,255,255,.58) !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-text-frame {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 28px !important;
    bottom: 0 !important;
    width: auto !important;
    height: auto !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 8px !important;
    background: #252525 !important;
    box-shadow: none !important;
    overflow: hidden !important;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease, transform .18s ease !important;
}
body.canvas-mode-active #canvas-panel .canvas-node.lib-text-node:hover .canvas-lib-text-frame {
    border-color: rgba(255,255,255,.28) !important;
    box-shadow: none !important;
}
body.canvas-mode-active #canvas-panel .canvas-node.lib-text-node.selected .canvas-lib-text-frame {
    border-color: rgba(255,255,255,.64) !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 16px 40px rgba(0,0,0,.34) !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-text-placeholder-icon {
    position: absolute !important;
    left: 50% !important;
    top: 24% !important;
    width: 116px !important;
    display: grid !important;
    gap: 11px !important;
    transform: translateX(-50%) !important;
    opacity: .38 !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-text-placeholder-icon span {
    display: block !important;
    height: 12px !important;
    border-radius: 1px !important;
    background: rgba(255,255,255,.82) !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-text-placeholder-icon span:nth-child(4) {
    width: 60% !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-text-try {
    position: absolute !important;
    left: 24px !important;
    top: 52% !important;
    display: grid !important;
    gap: 10px !important;
    transform: translateY(-18%) !important;
}
body.canvas-mode-active #canvas-panel .canvas-node.lib-text-node .canvas-lib-node-try-label {
    color: rgba(255,255,255,.58) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}
body.canvas-mode-active #canvas-panel .canvas-node.lib-text-node .canvas-lib-text-option {
    min-height: 24px !important;
    padding: 2px 8px !important;
    gap: 7px !important;
    border: 0 !important;
    border-radius: 7px !important;
    color: rgba(255,255,255,.88) !important;
    font-size: 12px !important;
    font-weight: 750 !important;
    transition: background .18s ease, color .18s ease, transform .18s ease !important;
}
body.canvas-mode-active #canvas-panel .canvas-node.lib-text-node .canvas-lib-text-option i {
    width: 16px !important;
    font-size: 12px !important;
}
body.canvas-mode-active #canvas-panel .canvas-node.lib-text-node .canvas-lib-text-option:hover,
body.canvas-mode-active #canvas-panel .canvas-node.lib-text-node .canvas-lib-text-option:focus-visible {
    background: rgba(255,255,255,.12) !important;
    color: #fff !important;
    transform: translateX(2px) !important;
}
body.canvas-mode-active #canvas-panel .canvas-node.lib-text-prompt-node .canvas-lib-text-placeholder-icon {
    top: 22% !important;
    width: 96px !important;
    gap: 9px !important;
}
body.canvas-mode-active #canvas-panel .canvas-node.lib-text-prompt-node .canvas-lib-text-placeholder-icon span {
    height: 10px !important;
}
body.canvas-mode-active #canvas-panel .canvas-node.lib-text-prompt-node .canvas-lib-text-try {
    left: 24px !important;
    top: 52% !important;
    gap: 10px !important;
}
body.canvas-mode-active #canvas-panel .canvas-node.lib-text-prompt-node .canvas-lib-node-try-label {
    font-size: 12px !important;
}
body.canvas-mode-active #canvas-panel .canvas-node.lib-text-prompt-node .canvas-lib-text-option {
    min-height: 24px !important;
    padding: 2px 8px !important;
    gap: 7px !important;
    font-size: 12px !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-text-toolbar {
    position: absolute !important;
    left: 50% !important;
    top: auto !important;
    bottom: calc(100% + var(--canvas-node-toolbar-gap, 16px)) !important;
    z-index: 8 !important;
    min-height: 44px !important;
    padding: 7px 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 10px !important;
    background: rgba(34,34,34,.98) !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.34) !important;
    transform-origin: bottom center !important;
    transform: translateX(-50%) translateY(6px) scale(var(--canvas-node-toolbar-scale, 1)) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity .16s ease, transform .16s ease !important;
}
body.canvas-mode-active #canvas-panel .canvas-node.lib-text-editor-node.selected .canvas-lib-text-toolbar,
body.canvas-mode-active #canvas-panel .canvas-node.lib-text-editor-node:hover .canvas-lib-text-toolbar {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateX(-50%) translateY(0) scale(var(--canvas-node-toolbar-scale, 1)) !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-text-toolbar button {
    width: 28px !important;
    height: 28px !important;
    display: grid !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: transparent !important;
    color: rgba(224,228,231,.70) !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    cursor: pointer !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-text-toolbar button:hover {
    background: rgba(255,255,255,.09) !important;
    color: #fff !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-text-toolbar > span {
    width: 1px !important;
    height: 20px !important;
    background: rgba(255,255,255,.08) !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-rich-editable {
    width: 100% !important;
    height: 100% !important;
    padding: 30px 34px !important;
    outline: none !important;
    overflow: auto !important;
    color: rgba(238,241,243,.92) !important;
    font-size: 24px !important;
    font-weight: 500 !important;
    line-height: 1.55 !important;
    white-space: pre-wrap !important;
    word-break: break-word !important;
    caret-color: rgba(123,101,255,.95) !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-rich-editable:empty::before {
    content: attr(data-placeholder) !important;
    color: rgba(199,206,211,.48) !important;
    pointer-events: none !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-rich-editable h1,
body.canvas-mode-active #canvas-panel .canvas-lib-rich-editable h2,
body.canvas-mode-active #canvas-panel .canvas-lib-rich-editable h3,
body.canvas-mode-active #canvas-panel .canvas-lib-rich-editable p {
    margin: 0 0 .45em !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-rich-editable h1 {
    font-size: 36px !important;
    color: #fff !important;
    font-weight: 900 !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-rich-editable h2 {
    font-size: 30px !important;
    color: #fff !important;
    font-weight: 900 !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-rich-editable h3 {
    font-size: 24px !important;
    color: #fff !important;
    font-weight: 900 !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-rich-editable .canvas-lib-text-heading {
    color: #fff !important;
    font-weight: 900 !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-rich-editable .canvas-lib-text-heading.h1 {
    font-size: 36px !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-rich-editable .canvas-lib-text-heading.h2 {
    font-size: 30px !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-rich-editable .canvas-lib-text-heading.h3 {
    font-size: 24px !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-rich-editable hr {
    border: 0 !important;
    border-top: 1px solid rgba(255,255,255,.22) !important;
    margin: 16px 0 !important;
}
body.canvas-mode-active #canvas-panel .canvas-node.lib-text-node .canvas-port-plus {
    z-index: 9 !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    border-radius: 999px !important;
    border: 2px solid rgba(255,255,255,.54) !important;
    background: rgba(30,30,30,.96) !important;
    color: #f8f8f8 !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    opacity: 0 !important;
    transform: translate(-50%, -50%) scale(.82) !important;
    transition: opacity .16s ease, transform .16s ease, border-color .16s ease, background .16s ease !important;
}
body.canvas-mode-active #canvas-panel .canvas-node.lib-text-node .canvas-port-plus.input {
    left: -28px !important;
    top: 50% !important;
}
body.canvas-mode-active #canvas-panel .canvas-node.lib-text-node .canvas-port-plus.output {
    left: auto !important;
    right: -58px !important;
    top: 50% !important;
}
body.canvas-mode-active #canvas-panel .canvas-node.lib-text-editor-node .canvas-port-plus.input {
    display: none !important;
}
body.canvas-mode-active #canvas-panel .canvas-node.lib-text-node:hover .canvas-port-plus,
body.canvas-mode-active #canvas-panel .canvas-node.lib-text-node.port-hover-armed .canvas-port-plus,
body.canvas-mode-active #canvas-panel .canvas-node.lib-text-node.selected .canvas-port-plus,
body.canvas-mode-active #canvas-panel .canvas-node.lib-text-node .canvas-port-plus.active {
    opacity: 1 !important;
    transform: translate(-50%, -50%) scale(1) !important;
}
body.canvas-mode-active #canvas-panel .canvas-node.lib-text-node .canvas-port-plus.magnetized {
    border-color: rgba(255,255,255,.86) !important;
    background: rgba(44,44,44,.98) !important;
}
body.canvas-mode-active #canvas-panel .canvas-node.lib-text-node .canvas-resize-handle {
    border-color: rgba(255,255,255,.55) !important;
    opacity: 0 !important;
}
body.canvas-mode-active #canvas-panel .canvas-node.lib-text-node.selected .canvas-resize-handle {
    opacity: .72 !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-text-option-icon {
    position: relative !important;
    flex: 0 0 16px !important;
    width: 16px !important;
    height: 16px !important;
    display: inline-grid !important;
    place-items: center !important;
    color: #fff !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-text-option-icon.write::before {
    content: '' !important;
    width: 16px !important;
    height: 16px !important;
    border-radius: 3px !important;
    background:
        linear-gradient(#242424, #242424) 4px 4px / 8px 1.5px no-repeat,
        linear-gradient(#242424, #242424) 4px 8px / 8px 1.5px no-repeat,
        linear-gradient(#242424, #242424) 4px 12px / 6px 1.5px no-repeat,
        #f5f5f5 !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-text-option-icon.video::before {
    content: '' !important;
    width: 16px !important;
    height: 16px !important;
    border-radius: 3px !important;
    background: #f5f5f5 !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-text-option-icon.video::after {
    content: '' !important;
    position: absolute !important;
    left: 7px !important;
    top: 5px !important;
    width: 0 !important;
    height: 0 !important;
    border-left: 5px solid #242424 !important;
    border-top: 3px solid transparent !important;
    border-bottom: 3px solid transparent !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-rich-editable[contenteditable="false"] {
    cursor: grab !important;
    -webkit-user-select: none !important;
    user-select: none !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-rich-editable[contenteditable="true"] {
    cursor: text !important;
    -webkit-user-select: text !important;
    user-select: text !important;
}
body.canvas-mode-active #canvas-panel .canvas-node.lib-text-node .canvas-port-plus {
    top: 50% !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    --port-magnet-x: 0px;
    --port-magnet-y: 0px;
    transition: opacity .18s ease, transform .22s cubic-bezier(.2,.8,.2,1), border-color .18s ease, background .18s ease, box-shadow .18s ease !important;
}
body.canvas-mode-active #canvas-panel .canvas-node.lib-text-node .canvas-port-plus.input {
    left: -38px !important;
    right: auto !important;
    transform: translate(calc(10px + var(--port-magnet-x)), calc(-50% + var(--port-magnet-y))) scale(.82) !important;
}
body.canvas-mode-active #canvas-panel .canvas-node.lib-text-node .canvas-port-plus.output {
    left: auto !important;
    right: -38px !important;
    transform: translate(calc(-10px + var(--port-magnet-x)), calc(-50% + var(--port-magnet-y))) scale(.82) !important;
}
body.canvas-mode-active #canvas-panel .canvas-node.lib-text-editor-node .canvas-port-plus.input {
    display: none !important;
}
body.canvas-mode-active #canvas-panel .canvas-node.lib-text-node:hover .canvas-port-plus,
body.canvas-mode-active #canvas-panel .canvas-node.lib-text-node.port-hover-armed .canvas-port-plus,
body.canvas-mode-active #canvas-panel .canvas-node.lib-text-node.selected .canvas-port-plus,
body.canvas-mode-active #canvas-panel .canvas-node.lib-text-node .canvas-port-plus.active {
    opacity: 1 !important;
    pointer-events: auto !important;
}
body.canvas-mode-active #canvas-panel .canvas-node.lib-text-node:hover .canvas-port-plus.input,
body.canvas-mode-active #canvas-panel .canvas-node.lib-text-node.port-hover-armed .canvas-port-plus.input,
body.canvas-mode-active #canvas-panel .canvas-node.lib-text-node.selected .canvas-port-plus.input,
body.canvas-mode-active #canvas-panel .canvas-node.lib-text-node .canvas-port-plus.input.active,
body.canvas-mode-active #canvas-panel .canvas-node.lib-text-node:hover .canvas-port-plus.output,
body.canvas-mode-active #canvas-panel .canvas-node.lib-text-node.port-hover-armed .canvas-port-plus.output,
body.canvas-mode-active #canvas-panel .canvas-node.lib-text-node.selected .canvas-port-plus.output,
body.canvas-mode-active #canvas-panel .canvas-node.lib-text-node .canvas-port-plus.output.active {
    transform: translate(var(--port-magnet-x), calc(-50% + var(--port-magnet-y))) scale(1) !important;
}
body.canvas-mode-active #canvas-panel .canvas-node.lib-text-node .canvas-port-plus.magnetized {
    border-color: rgba(255,255,255,.78) !important;
    background: rgba(255,255,255,.94) !important;
    color: #1d1d1d !important;
    box-shadow: 0 0 0 4px rgba(255,255,255,.08), 0 10px 24px rgba(0,0,0,.34) !important;
}
body.canvas-mode-active.canvas-node-dragging #canvas-panel .canvas-node.lib-text-node.is-dragging-node .canvas-port-plus,
body.canvas-mode-active.canvas-node-dragging #canvas-panel .canvas-node.lib-text-node.selected .canvas-port-plus {
    background: rgba(30,30,30,.96) !important;
    color: rgba(255,255,255,.86) !important;
    border-color: rgba(255,255,255,.58) !important;
    box-shadow: 0 8px 18px rgba(0,0,0,.28) !important;
    outline: none !important;
}
body.canvas-mode-active #canvas-panel .canvas-node.lib-text-node .canvas-port-plus {
    top: calc(50% + 14px) !important;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    border-width: 1px !important;
    border-color: rgba(255,255,255,.36) !important;
    background: rgba(30,30,30,.96) !important;
    color: rgba(255,255,255,.82) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    box-shadow: 0 8px 18px rgba(0,0,0,.28) !important;
}
body.canvas-mode-active #canvas-panel .canvas-node.lib-text-node .canvas-port-plus.input,
body.canvas-mode-active #canvas-panel .canvas-node.lib-text-editor-node .canvas-port-plus.input {
    display: grid !important;
    left: -34px !important;
    right: auto !important;
    transform: translate(calc(10px + var(--port-magnet-x)), calc(-50% + var(--port-magnet-y))) scale(.82) !important;
}
body.canvas-mode-active #canvas-panel .canvas-node.lib-text-node .canvas-port-plus.output {
    left: auto !important;
    right: -34px !important;
    transform: translate(calc(-10px + var(--port-magnet-x)), calc(-50% + var(--port-magnet-y))) scale(.82) !important;
}
body.canvas-mode-active #canvas-panel .canvas-node.lib-text-node:hover .canvas-port-plus.input,
body.canvas-mode-active #canvas-panel .canvas-node.lib-text-node.port-hover-armed .canvas-port-plus.input,
body.canvas-mode-active #canvas-panel .canvas-node.lib-text-node.selected .canvas-port-plus.input,
body.canvas-mode-active #canvas-panel .canvas-node.lib-text-node .canvas-port-plus.input.active,
body.canvas-mode-active #canvas-panel .canvas-node.lib-text-node:hover .canvas-port-plus.output,
body.canvas-mode-active #canvas-panel .canvas-node.lib-text-node.port-hover-armed .canvas-port-plus.output,
body.canvas-mode-active #canvas-panel .canvas-node.lib-text-node.selected .canvas-port-plus.output,
body.canvas-mode-active #canvas-panel .canvas-node.lib-text-node .canvas-port-plus.output.active {
    transform: translate(var(--port-magnet-x), calc(-50% + var(--port-magnet-y))) scale(1) !important;
}
body.canvas-mode-active #canvas-panel .canvas-selection-box {
    z-index: 1228 !important;
    border: 1.5px dashed rgba(255,255,255,.72) !important;
    background: rgba(255,255,255,.055) !important;
    box-shadow: 0 0 0 1px rgba(0,0,0,.22) inset !important;
}
body.canvas-mode-active #canvas-panel .canvas-multi-selection-outline {
    position: absolute !important;
    z-index: 1227 !important;
    display: none !important;
    pointer-events: none !important;
    border: 1.5px dashed rgba(255,255,255,.72) !important;
    border-radius: 10px !important;
    background: rgba(255,255,255,.035) !important;
    box-shadow: 0 0 0 1px rgba(0,0,0,.32) inset !important;
}
body.canvas-mode-active #canvas-panel .canvas-multi-selection-outline.show {
    display: block !important;
}
body.canvas-mode-active #canvas-panel .canvas-multi-selection-port {
    position: absolute !important;
    top: 50% !important;
    z-index: 3 !important;
    width: var(--canvas-multi-port-size, 22px) !important;
    height: var(--canvas-multi-port-size, 22px) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(255,255,255,.48) !important;
    border-radius: 999px !important;
    background: rgba(22,22,22,.92) !important;
    color: #fff !important;
    font-size: calc(var(--canvas-multi-port-size, 22px) * .62) !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    box-shadow: 0 0 0 1.5px rgba(0,0,0,.28), 0 10px 22px rgba(0,0,0,.24) !important;
    cursor: crosshair !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease !important;
}
body.canvas-mode-active #canvas-panel .canvas-multi-selection-port.input {
    left: calc(-1 * var(--canvas-multi-port-gap, 16px)) !important;
    transform: translate(calc(-50% + var(--port-magnet-x, 0px)), calc(-50% + var(--port-magnet-y, 0px))) scale(1) !important;
}
body.canvas-mode-active #canvas-panel .canvas-multi-selection-port.output {
    right: calc(-1 * var(--canvas-multi-port-gap, 16px)) !important;
    transform: translate(calc(50% + var(--port-magnet-x, 0px)), calc(-50% + var(--port-magnet-y, 0px))) scale(1) !important;
}
body.canvas-mode-active #canvas-panel .canvas-multi-selection-port:hover,
body.canvas-mode-active #canvas-panel .canvas-multi-selection-port.magnetized,
body.canvas-mode-active #canvas-panel .canvas-multi-selection-port.connection-target {
    border-color: rgba(125,211,252,.9) !important;
    background: rgba(37,99,235,.96) !important;
    box-shadow: 0 0 0 2px rgba(125,211,252,.20), 0 10px 22px rgba(37,99,235,.24) !important;
}
body.canvas-mode-active #canvas-panel .canvas-multi-selection-port.input:hover,
body.canvas-mode-active #canvas-panel .canvas-multi-selection-port.input.magnetized,
body.canvas-mode-active #canvas-panel .canvas-multi-selection-port.input.connection-target {
    transform: translate(calc(-50% + var(--port-magnet-x, 0px)), calc(-50% + var(--port-magnet-y, 0px))) scale(1.1) !important;
}
body.canvas-mode-active #canvas-panel .canvas-multi-selection-port.output:hover,
body.canvas-mode-active #canvas-panel .canvas-multi-selection-port.output.magnetized,
body.canvas-mode-active #canvas-panel .canvas-multi-selection-port.output.connection-target {
    transform: translate(calc(50% + var(--port-magnet-x, 0px)), calc(-50% + var(--port-magnet-y, 0px))) scale(1.1) !important;
}
body.canvas-mode-active #canvas-panel .canvas-multi-selection-outline.group-selected {
    border-style: solid !important;
    border-color: rgba(255,255,255,.58) !important;
    background: transparent !important;
}
body.canvas-mode-active #canvas-panel .canvas-multi-selection-toolbar {
    position: absolute !important;
    z-index: 1231 !important;
    display: none !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    min-height: 42px !important;
    padding: 6px 8px !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 10px !important;
    background: rgba(30,30,30,.98) !important;
    box-shadow: 0 16px 38px rgba(0,0,0,.36) !important;
    transform: translateX(-50%) !important;
    white-space: nowrap !important;
    overflow: visible !important;
}
body.canvas-mode-active #canvas-panel .canvas-multi-selection-toolbar.show {
    display: inline-flex !important;
}
body.canvas-mode-active #canvas-panel .canvas-multi-selection-toolbar button {
    width: auto !important;
    min-width: max-content !important;
    flex: 0 0 auto !important;
    height: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 0 9px !important;
    border: 0 !important;
    border-radius: 7px !important;
    background: transparent !important;
    color: rgba(255,255,255,.88) !important;
    font-size: 12px !important;
    font-weight: 760 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow: hidden !important;
    cursor: pointer !important;
}
body.canvas-mode-active #canvas-panel .canvas-multi-selection-toolbar button > span {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    line-height: 1 !important;
}
body.canvas-mode-active #canvas-panel .canvas-multi-selection-toolbar button > span:not(.canvas-selection-tool-icon):not(.canvas-selection-color-dot) {
    display: inline-block !important;
    min-width: max-content !important;
    max-width: none !important;
}
body.canvas-mode-active #canvas-panel .canvas-multi-selection-toolbar button:hover {
    background: rgba(255,255,255,.10) !important;
    color: #fff !important;
}
body.canvas-mode-active #canvas-panel .canvas-selection-color-wrap {
    position: relative !important;
    display: none !important;
    align-items: center !important;
}
body.canvas-mode-active #canvas-panel .canvas-multi-selection-toolbar.group-selected .canvas-selection-color-wrap.show {
    display: inline-flex !important;
}
body.canvas-mode-active #canvas-panel .canvas-selection-color-button {
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    flex-basis: 32px !important;
    padding: 0 !important;
    justify-content: center !important;
    font-size: 0 !important;
    color: transparent !important;
    overflow: hidden !important;
    text-indent: 0 !important;
}
body.canvas-mode-active #canvas-panel .canvas-selection-color-dot {
    position: relative !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 999px !important;
    background: var(--canvas-group-swatch, #8e8e93) !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,.20), 0 5px 12px rgba(0,0,0,.30) !important;
    flex: 0 0 auto !important;
}
body.canvas-mode-active #canvas-panel .canvas-selection-color-dot[data-color="neutral"] {
    background: #8e8e93 !important;
}
body.canvas-mode-active #canvas-panel .canvas-selection-color-dot[data-color="neutral"]::after {
    content: none !important;
    display: none !important;
}
body.canvas-mode-active #canvas-panel .canvas-selection-color-menu {
    position: absolute !important;
    left: 0 !important;
    bottom: calc(100% + 8px) !important;
    z-index: 1235 !important;
    display: none !important;
    grid-template-columns: repeat(5, 34px) !important;
    gap: 10px !important;
    padding: 12px !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 12px !important;
    background: rgba(34,34,34,.99) !important;
    box-shadow: 0 18px 42px rgba(0,0,0,.46) !important;
}
body.canvas-mode-active #canvas-panel .canvas-selection-color-menu.show {
    display: grid !important;
}
body.canvas-mode-active #canvas-panel .canvas-selection-color-menu button {
    position: relative !important;
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    border: 0 !important;
    background: var(--swatch, rgba(255,255,255,.28)) !important;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.12), 0 8px 16px rgba(0,0,0,.22) !important;
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
}
body.canvas-mode-active #canvas-panel .canvas-selection-color-button::before,
body.canvas-mode-active #canvas-panel .canvas-selection-color-button::after,
body.canvas-mode-active #canvas-panel .canvas-selection-color-menu button::before,
body.canvas-mode-active #canvas-panel .canvas-selection-color-menu button::after {
    content: none !important;
    display: none !important;
}
body.canvas-mode-active #canvas-panel .canvas-selection-color-menu button:hover,
body.canvas-mode-active #canvas-panel .canvas-selection-color-menu button.active {
    box-shadow: 0 0 0 2px #0bdcff, inset 0 0 0 1px rgba(0,0,0,.18), 0 8px 16px rgba(0,0,0,.24) !important;
    transform: scale(1.04) !important;
}
body.canvas-mode-active #canvas-panel .canvas-selection-color-menu button.none {
    background: linear-gradient(45deg, transparent calc(50% - 1px), rgba(239,68,68,.90) 50%, transparent calc(50% + 1px)), rgba(255,255,255,.78) !important;
}
body.canvas-mode-active #canvas-panel .canvas-selection-color-menu button.none::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    inset: 5px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(0,0,0,.18) !important;
    background: transparent !important;
}
body.canvas-mode-active #canvas-panel .canvas-selection-tool-icon {
    position: relative !important;
    width: 15px !important;
    height: 15px !important;
    display: inline-block !important;
    opacity: .92 !important;
}
body.canvas-mode-active #canvas-panel .canvas-selection-tool-icon::before,
body.canvas-mode-active #canvas-panel .canvas-selection-tool-icon::after {
    content: '' !important;
    position: absolute !important;
    border-color: currentColor !important;
}
body.canvas-mode-active #canvas-panel .canvas-selection-tool-icon.arrange::before {
    inset: 2px 1px auto 1px !important;
    height: 2px !important;
    background: currentColor !important;
    box-shadow: 0 5px 0 currentColor, 0 10px 0 currentColor !important;
}
body.canvas-mode-active #canvas-panel .canvas-selection-tool-icon.asset::before {
    inset: 2px !important;
    border: 1.6px solid currentColor !important;
    border-radius: 3px !important;
}
body.canvas-mode-active #canvas-panel .canvas-selection-tool-icon.asset::after {
    left: 5px !important;
    top: 1px !important;
    width: 5px !important;
    height: 7px !important;
    border-left: 1.6px solid currentColor !important;
    border-bottom: 1.6px solid currentColor !important;
    transform: rotate(-45deg) !important;
}
body.canvas-mode-active #canvas-panel .canvas-selection-tool-icon.run::before {
    left: 3px !important;
    top: 2px !important;
    width: 0 !important;
    height: 0 !important;
    border-top: 6px solid transparent !important;
    border-bottom: 6px solid transparent !important;
    border-left: 10px solid currentColor !important;
}
body.canvas-mode-active #canvas-panel .canvas-selection-tool-icon.compose::before {
    inset: 2px 1px !important;
    border: 1.6px solid currentColor !important;
    border-radius: 2px !important;
    box-shadow: 4px 4px 0 -2px currentColor !important;
}
body.canvas-mode-active #canvas-panel .canvas-selection-tool-icon.compose::after {
    left: 6px !important;
    top: 5px !important;
    width: 0 !important;
    height: 0 !important;
    border-top: 3px solid transparent !important;
    border-bottom: 3px solid transparent !important;
    border-left: 5px solid currentColor !important;
}
body.canvas-mode-active #canvas-panel .canvas-selection-tool-icon.workflow::before {
    inset: 1px !important;
    border: 1.6px solid currentColor !important;
    border-radius: 3px !important;
}
body.canvas-mode-active #canvas-panel .canvas-selection-tool-icon.workflow::after {
    left: 4px !important;
    top: 4px !important;
    width: 7px !important;
    height: 7px !important;
    border-left: 1.6px solid currentColor !important;
    border-bottom: 1.6px solid currentColor !important;
}
body.canvas-mode-active #canvas-panel .canvas-selection-tool-icon.duplicate::before,
body.canvas-mode-active #canvas-panel .canvas-selection-tool-icon.download::before {
    inset: 4px 1px 1px 4px !important;
    border: 1.6px solid currentColor !important;
    border-radius: 2px !important;
}
body.canvas-mode-active #canvas-panel .canvas-selection-tool-icon.duplicate::after {
    inset: 1px 4px 4px 1px !important;
    border: 1.6px solid currentColor !important;
    border-radius: 2px !important;
}
body.canvas-mode-active #canvas-panel .canvas-selection-tool-icon.download::after {
    left: 6px !important;
    top: 1px !important;
    width: 4px !important;
    height: 9px !important;
    border-left: 1.8px solid currentColor !important;
    border-bottom: 1.8px solid currentColor !important;
    transform: rotate(-45deg) !important;
}
body.canvas-mode-active #canvas-panel .canvas-selection-tool-icon.group::before {
    inset: 2px !important;
    border: 1.6px dashed currentColor !important;
    border-radius: 3px !important;
}
body.canvas-mode-active #canvas-panel .canvas-selection-tool-icon.grid::before {
    inset: 1px !important;
    border: 1.4px solid currentColor !important;
    border-radius: 2px !important;
    box-shadow: inset 5px 0 0 rgba(0,0,0,0), inset -5px 0 0 rgba(0,0,0,0) !important;
}
body.canvas-mode-active #canvas-panel .canvas-selection-tool-icon.grid::after {
    left: 7px !important;
    top: 1px !important;
    width: 1px !important;
    height: 13px !important;
    background: currentColor !important;
    box-shadow: -5px 5px 0 -4px currentColor, 5px 0 0 0 currentColor, 0 5px 0 0 currentColor !important;
    opacity: .9 !important;
}
body.canvas-mode-active #canvas-panel .canvas-selection-tool-icon.horizontal::before {
    left: 1px !important;
    right: 1px !important;
    top: 3px !important;
    height: 3px !important;
    border-radius: 2px !important;
    background: currentColor !important;
    box-shadow: 0 5px 0 currentColor, 0 10px 0 currentColor !important;
}
body.canvas-mode-active #canvas-panel .canvas-selection-tool-icon.vertical::before {
    top: 1px !important;
    bottom: 1px !important;
    left: 2px !important;
    width: 3px !important;
    border-radius: 2px !important;
    background: currentColor !important;
    box-shadow: 5px 0 0 currentColor, 10px 0 0 currentColor !important;
}
body.canvas-mode-active #canvas-panel .canvas-selection-arrange-wrap {
    position: relative !important;
    display: inline-flex !important;
}
body.canvas-mode-active #canvas-panel .canvas-selection-arrange-menu {
    position: absolute !important;
    left: 0 !important;
    top: calc(100% + 8px) !important;
    z-index: 1234 !important;
    display: none !important;
    width: 148px !important;
    padding: 7px !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 11px !important;
    background: rgba(30,30,30,.99) !important;
    box-shadow: 0 18px 40px rgba(0,0,0,.42) !important;
}
body.canvas-mode-active #canvas-panel .canvas-selection-arrange-menu.show {
    display: grid !important;
    gap: 4px !important;
}
body.canvas-mode-active #canvas-panel .canvas-selection-arrange-menu button {
    width: 100% !important;
    justify-content: flex-start !important;
    height: 34px !important;
    padding: 0 9px !important;
    border-radius: 8px !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-group-frame {
    position: absolute !important;
    z-index: 0 !important;
    pointer-events: auto !important;
    cursor: grab !important;
    border: 1px solid var(--canvas-group-border, rgba(255,255,255,.20)) !important;
    border-style: solid !important;
    border-radius: 0 !important;
    background: var(--canvas-group-bg, rgba(255,255,255,.075)) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.035), 0 18px 44px rgba(0,0,0,.12) !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-group-title {
    position: absolute !important;
    left: 0 !important;
    top: -28px !important;
    pointer-events: auto !important;
    color: rgba(232,237,244,.86) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 20px !important;
    white-space: nowrap !important;
    text-shadow: 0 2px 8px rgba(0,0,0,.45) !important;
    cursor: text !important;
    outline: none !important;
    border-radius: 4px !important;
    padding: 0 4px !important;
    -webkit-user-select: text !important;
    user-select: text !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-group-title.is-editing {
    color: rgba(255,255,255,.98) !important;
    background: rgba(0,0,0,.42) !important;
    box-shadow: 0 0 0 1px rgba(124,92,255,.72) !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-group-grid-slots {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-group-grid-slot {
    position: absolute !important;
    display: grid !important;
    place-items: center !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    background: rgba(255,255,255,.055) !important;
    color: rgba(255,255,255,.58) !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.20) !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-group-grid-slot.filled {
    background: rgba(255,255,255,.018) !important;
    color: transparent !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-group-grid-slot.filled > span {
    opacity: 0 !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-group-frame:hover,
body.canvas-mode-active #canvas-panel .canvas-lib-group-frame.selected {
    border-color: var(--canvas-group-border, rgba(255,255,255,.50)) !important;
    border-style: solid !important;
    background: var(--canvas-group-bg-selected, rgba(255,255,255,.105)) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 18px 44px rgba(0,0,0,.20) !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-group-frame:active {
    cursor: grabbing !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-group-resize-handle {
    position: absolute !important;
    z-index: 4 !important;
    width: 10px !important;
    height: 10px !important;
    display: none !important;
    border: 0 !important;
    border-radius: 2px !important;
    background: rgba(186,190,194,.98) !important;
    box-shadow: 0 0 0 1px rgba(12,12,12,.28), 0 2px 6px rgba(0,0,0,.24) !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-group-frame.selected .canvas-lib-group-resize-handle {
    display: block !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-group-resize-handle.nw {
    left: -5px !important;
    top: -5px !important;
    cursor: nwse-resize !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-group-resize-handle.ne {
    right: -5px !important;
    top: -5px !important;
    cursor: nesw-resize !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-group-resize-handle.sw {
    left: -5px !important;
    bottom: -5px !important;
    cursor: nesw-resize !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-group-resize-handle.se {
    right: -5px !important;
    bottom: -5px !important;
    cursor: nwse-resize !important;
}
body.canvas-mode-active #canvas-panel .canvas-node.grouped {
    outline: none !important;
}

/* Video generator: keep LibTV-like tool rows and aligned reference chips. */
body.canvas-mode-active #canvas-panel .canvas-node-gen-panel.video-node-panel {
    width: min(560px, calc(100% - 32px)) !important;
    grid-template-rows: auto minmax(72px, 1fr) auto !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-panel.video-node-panel .canvas-node-gen-head {
    min-height: 92px !important;
    align-items: flex-start !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-panel.video-node-panel .canvas-node-gen-tools {
    width: calc(100% - 34px) !important;
    display: grid !important;
    grid-template-columns: repeat(5, max-content) !important;
    grid-auto-rows: min-content !important;
    align-items: start !important;
    justify-content: start !important;
    gap: 8px 6px !important;
    padding-right: 0 !important;
    overflow: visible !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-panel.video-node-panel .canvas-node-gen-tools > button:nth-child(1) { grid-column: 1 !important; grid-row: 1 !important; }
body.canvas-mode-active #canvas-panel .canvas-node-gen-panel.video-node-panel .canvas-node-gen-tools > button:nth-child(2) { grid-column: 2 !important; grid-row: 1 !important; }
body.canvas-mode-active #canvas-panel .canvas-node-gen-panel.video-node-panel .canvas-node-gen-tools > button:nth-child(3) { grid-column: 3 !important; grid-row: 1 !important; }
body.canvas-mode-active #canvas-panel .canvas-node-gen-panel.video-node-panel .canvas-node-gen-tools > button:nth-child(4) { grid-column: 4 !important; grid-row: 1 !important; }
body.canvas-mode-active #canvas-panel .canvas-node-gen-panel.video-node-panel .canvas-node-gen-tools > button:nth-child(5) { grid-column: 5 !important; grid-row: 1 !important; }
body.canvas-mode-active #canvas-panel .canvas-node-gen-panel.video-node-panel .canvas-node-gen-tools > button:nth-child(6) { grid-column: 1 !important; grid-row: 2 !important; }
body.canvas-mode-active #canvas-panel .canvas-node-gen-panel.video-node-panel .canvas-node-gen-tools > button:nth-child(7) { grid-column: 2 !important; grid-row: 2 !important; }
body.canvas-mode-active #canvas-panel .canvas-node-gen-panel.video-node-panel .canvas-node-gen-tools > button:nth-child(8) { grid-column: 3 !important; grid-row: 2 !important; }
body.canvas-mode-active #canvas-panel .canvas-node-gen-panel.video-node-panel .canvas-node-gen-tools > button:nth-child(9) { grid-column: 4 !important; grid-row: 2 !important; }
body.canvas-mode-active #canvas-panel .canvas-node-gen-panel.video-node-panel .canvas-node-gen-tools > .canvas-node-gen-references {
    grid-column: 1 / 6 !important;
    grid-row: 3 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    align-self: center !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 0 18px 0 0 !important;
    overflow: visible !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-panel.video-node-panel .canvas-node-gen-tools > .canvas-node-gen-references.show {
    display: flex !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-panel.video-node-panel .canvas-node-gen-input {
    min-height: 72px !important;
    padding: 4px 4px 0 !important;
    margin-top: 0 !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-references.show {
    display: flex !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-ref {
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    box-sizing: border-box !important;
    aspect-ratio: 1 / 1 !important;
    display: grid !important;
    place-items: center !important;
    overflow: visible !important;
    border-radius: 8px !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-ref > img,
body.canvas-mode-active #canvas-panel .canvas-node-gen-ref > video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 7px !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-ref-media {
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    display: block !important;
    overflow: hidden !important;
    border-radius: 7px !important;
    background: rgba(255,255,255,.08) !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-ref-media > img,
body.canvas-mode-active #canvas-panel .canvas-node-gen-ref-media > video {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
    border-radius: 7px !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-ref.text,
body.canvas-mode-active #canvas-panel .canvas-node-gen-ref.audio {
    display: grid !important;
    grid-template-columns: 1fr !important;
    place-items: center !important;
    overflow: visible !important;
    padding: 0 !important;
    background: rgba(255,255,255,.16) !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-panel.video-node-panel .canvas-node-gen-ref.text span,
body.canvas-mode-active #canvas-panel .canvas-node-gen-panel.video-node-panel .canvas-node-gen-ref.audio span {
    display: none !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-ref.text i,
body.canvas-mode-active #canvas-panel .canvas-node-gen-ref.audio i {
    font-size: 18px !important;
    color: rgba(255,255,255,.9) !important;
    line-height: 1 !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-ref-index {
    position: absolute !important;
    right: -5px !important;
    top: -7px !important;
    z-index: 3 !important;
    min-width: 16px !important;
    height: 16px !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 4px !important;
    border-radius: 999px !important;
    background: rgba(45,45,45,.98) !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,.25), 0 4px 10px rgba(0,0,0,.35) !important;
    transition: opacity .12s ease, transform .12s ease !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-ref:hover .canvas-node-gen-ref-index {
    opacity: 0 !important;
    transform: scale(.82) !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-ref > button,
body.canvas-mode-active #canvas-panel .canvas-node-gen-panel.video-node-panel .canvas-node-gen-tools .canvas-node-gen-ref > button {
    left: auto !important;
    right: -5px !important;
    top: -7px !important;
    width: 16px !important;
    min-width: 16px !important;
    max-width: 16px !important;
    height: 16px !important;
    min-height: 16px !important;
    max-height: 16px !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    border: 1px solid rgba(255,255,255,.56) !important;
    border-radius: 999px !important;
    background: rgba(36,36,36,.98) !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: scale(.88) !important;
    transition: opacity .12s ease, transform .12s ease, background .12s ease !important;
    box-shadow: 0 4px 10px rgba(0,0,0,.34) !important;
    cursor: pointer !important;
    z-index: 4 !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-ref:hover > button,
body.canvas-mode-active #canvas-panel .canvas-node-gen-panel.video-node-panel .canvas-node-gen-tools .canvas-node-gen-ref:hover > button {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: scale(1) !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-ref > button:hover,
body.canvas-mode-active #canvas-panel .canvas-node-gen-panel.video-node-panel .canvas-node-gen-tools .canvas-node-gen-ref > button:hover {
    background: rgba(58,58,58,.98) !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-panel.video-node-panel .canvas-node-gen-tools .canvas-node-gen-ref > button i,
body.canvas-mode-active #canvas-panel .canvas-node-gen-panel.video-node-panel .canvas-node-gen-tools .canvas-node-gen-ref > button span {
    display: none !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-ref-preview {
    bottom: calc(100% + 12px) !important;
    z-index: 80 !important;
    pointer-events: none !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-ref-preview img,
body.canvas-mode-active #canvas-panel .canvas-node-gen-ref-preview video {
    width: 100% !important;
    max-height: 220px !important;
    object-fit: contain !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-ref-preview.text-preview {
    width: 220px !important;
    min-height: 42px !important;
    max-height: 170px !important;
    overflow: auto !important;
}
body.canvas-mode-active #canvas-panel .canvas-node.workflow-running.lib-image-node .canvas-lib-media-content,
body.canvas-mode-active #canvas-panel .canvas-node.workflow-running.lib-image-node .canvas-lib-image-placeholder,
body.canvas-mode-active #canvas-panel .canvas-node.workflow-running.lib-image-node .canvas-lib-node-try,
body.canvas-mode-active #canvas-panel .canvas-node.workflow-running.lib-video-node .canvas-lib-media-content,
body.canvas-mode-active #canvas-panel .canvas-node.workflow-running.lib-video-node .canvas-lib-video-placeholder,
body.canvas-mode-active #canvas-panel .canvas-node.workflow-running.lib-video-node .canvas-lib-node-try {
    filter: blur(8px) !important;
    opacity: .44 !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-generation-busy {
    position: absolute !important;
    inset: 0 !important;
    z-index: 8 !important;
    display: grid !important;
    place-items: center !important;
    pointer-events: none !important;
    background: rgba(0,0,0,.10) !important;
    backdrop-filter: blur(2px) !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-generation-busy span {
    min-width: 112px !important;
    height: 34px !important;
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    padding: 0 14px !important;
    border: 1px solid rgba(255,255,255,.30) !important;
    border-radius: 9px !important;
    background: rgba(24,24,24,.92) !important;
    color: rgba(255,255,255,.88) !important;
    font-size: 13px !important;
    font-weight: 760 !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.36), 0 0 0 0 rgba(255,255,255,.18) !important;
    animation: canvasBusyPillBreath 1.2s infinite ease-in-out !important;
}
#canvas-panel .canvas-lib-generation-busy span::before {
    content: "" !important;
    position: absolute !important;
    inset: -1px !important;
    z-index: 0 !important;
    background: linear-gradient(110deg, transparent 0%, transparent 34%, rgba(255,255,255,.18) 48%, transparent 62%, transparent 100%) !important;
    transform: translateX(-120%) !important;
    animation: canvasBusyPillSweep 1.55s infinite linear !important;
    pointer-events: none !important;
}
#canvas-panel .canvas-lib-generation-busy span::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    z-index: 0 !important;
    width: 86px !important;
    height: 22px !important;
    border-radius: 999px !important;
    background: radial-gradient(circle, rgba(255,255,255,.18), transparent 66%) !important;
    transform: translate(-50%, -50%) scale(.72) !important;
    opacity: .34 !important;
    animation: canvasBusySoftPulse 1.7s infinite ease-in-out !important;
    pointer-events: none !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-generation-busy .canvas-busy-label,
#canvas-panel .canvas-lib-generation-busy .canvas-busy-label {
    position: relative !important;
    z-index: 1 !important;
    display: inline-flex !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    text-shadow: 0 0 10px rgba(255,255,255,.18) !important;
    animation: canvasBusyTextPulse .9s infinite ease-in-out !important;
    -webkit-text-size-adjust: none;
    font-weight: 760 !important;
    font-size: 13px !important;
    line-height: 1 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}
#canvas-panel .canvas-lib-generation-busy .canvas-busy-pill i {
    position: relative !important;
    z-index: 1 !important;
    width: 4px !important;
    height: 4px !important;
    display: inline-block !important;
    margin-left: 3px !important;
    border-radius: 999px !important;
    background: currentColor !important;
    opacity: .34 !important;
    transform: translateY(1px) scale(.72) !important;
    animation: canvasBusyDotJump 1.05s infinite ease-in-out !important;
}
#canvas-panel .canvas-lib-generation-busy .canvas-busy-pill i:nth-of-type(1) {
    animation-delay: 0s !important;
}
#canvas-panel .canvas-lib-generation-busy .canvas-busy-pill i:nth-of-type(2) {
    animation-delay: .16s !important;
}
#canvas-panel .canvas-lib-generation-busy .canvas-busy-pill i:nth-of-type(3) {
    animation-delay: .32s !important;
}
@-webkit-keyframes canvasBusyTextPulse {
    0%, 100% { opacity: .68; transform: translateY(0); }
    50% { opacity: 1; transform: translateY(-1px); }
}
@keyframes canvasBusyTextPulse {
    0%, 100% { opacity: .68; transform: translateY(0); }
    50% { opacity: 1; transform: translateY(-1px); }
}
@-webkit-keyframes canvasBusyDotJump {
    0%, 80%, 100% { opacity: .28; transform: translateY(1px) scale(.72); }
    38% { opacity: 1; transform: translateY(-4px) scale(1.06); }
}
@keyframes canvasBusyDotJump {
    0%, 80%, 100% { opacity: .28; transform: translateY(1px) scale(.72); }
    38% { opacity: 1; transform: translateY(-4px) scale(1.06); }
}
@-webkit-keyframes canvasBusyPillBreath {
    0%, 100% { border-color: rgba(255,255,255,.24); box-shadow: 0 14px 34px rgba(0,0,0,.36), 0 0 0 0 rgba(255,255,255,.10); }
    50% { border-color: rgba(255,255,255,.52); box-shadow: 0 14px 34px rgba(0,0,0,.36), 0 0 0 4px rgba(255,255,255,.06); }
}
@keyframes canvasBusyPillBreath {
    0%, 100% { border-color: rgba(255,255,255,.24); box-shadow: 0 14px 34px rgba(0,0,0,.36), 0 0 0 0 rgba(255,255,255,.10); }
    50% { border-color: rgba(255,255,255,.52); box-shadow: 0 14px 34px rgba(0,0,0,.36), 0 0 0 4px rgba(255,255,255,.06); }
}
@-webkit-keyframes canvasBusyPillSweep {
    0% { transform: translateX(-120%); }
    100% { transform: translateX(120%); }
}
@keyframes canvasBusyPillSweep {
    0% { transform: translateX(-120%); }
    100% { transform: translateX(120%); }
}
@-webkit-keyframes canvasBusySoftPulse {
    0%, 100% { opacity: .18; transform: translate(-50%, -50%) scale(.72); }
    50% { opacity: .42; transform: translate(-50%, -50%) scale(1); }
}
@keyframes canvasBusySoftPulse {
    0%, 100% { opacity: .18; transform: translate(-50%, -50%) scale(.72); }
    50% { opacity: .42; transform: translate(-50%, -50%) scale(1); }
}
body.canvas-mode-active #canvas-panel .canvas-lib-generation-error {
    position: absolute !important;
    inset: 14px !important;
    z-index: 9 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 14px !important;
    background: rgba(34, 8, 13, .86) !important;
    border: 1px solid rgba(248, 113, 113, .72) !important;
    border-radius: 8px !important;
    color: #fecaca !important;
    text-align: center !important;
    pointer-events: auto !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-generation-error strong {
    color: #f87171 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-generation-error span {
    max-width: 100% !important;
    max-height: 72px !important;
    overflow: auto !important;
    color: #fecaca !important;
    font-size: 11px !important;
    line-height: 1.45 !important;
    overflow-wrap: anywhere !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-generation-error button {
    min-width: 92px !important;
    height: 30px !important;
    padding: 0 12px !important;
    border: 1px solid rgba(254, 202, 202, .65) !important;
    border-radius: 6px !important;
    background: rgba(248, 113, 113, .18) !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 750 !important;
    cursor: pointer !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-generation-error button:hover {
    background: rgba(248, 113, 113, .32) !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-panel {
    overflow: visible !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-mention-menu {
    position: absolute !important;
    z-index: 90 !important;
    display: none !important;
    width: 190px !important;
    max-height: 220px !important;
    overflow: auto !important;
    padding: 7px !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 9px !important;
    background: rgba(31,31,31,.985) !important;
    box-shadow: 0 18px 42px rgba(0,0,0,.44) !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-mention-menu.show {
    display: grid !important;
    gap: 5px !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-mention-menu button {
    width: 100% !important;
    height: 42px !important;
    display: grid !important;
    grid-template-columns: 32px 1fr auto !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 4px 7px !important;
    border: 0 !important;
    border-radius: 7px !important;
    background: transparent !important;
    color: rgba(255,255,255,.86) !important;
    cursor: pointer !important;
    text-align: left !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-mention-menu button:hover {
    background: rgba(255,255,255,.09) !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-mention-menu img,
body.canvas-mode-active #canvas-panel .canvas-node-gen-mention-menu video,
body.canvas-mode-active #canvas-panel .canvas-node-gen-mention-icon {
    width: 32px !important;
    height: 32px !important;
    display: block !important;
    object-fit: cover !important;
    border-radius: 5px !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-mention-icon {
    display: grid !important;
    place-items: center !important;
    background: rgba(255,255,255,.10) !important;
    color: rgba(255,255,255,.78) !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-mention-menu span {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 12px !important;
    font-weight: 720 !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-mention-menu em {
    font-style: normal !important;
    color: rgba(255,255,255,.45) !important;
    font-size: 12px !important;
    font-weight: 760 !important;
}

/* Expanded image/video generator: tools and references stay on top, prompt editor gets the main space. */
body.canvas-mode-active #canvas-panel .canvas-node-gen-panel.expanded {
    width: min(900px, calc(100vw - 96px)) !important;
    height: min(600px, calc(100vh - 110px)) !important;
    min-height: 440px !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    grid-template-columns: 100% !important;
    align-content: stretch !important;
    gap: 12px !important;
    padding: 14px !important;
    overflow: visible !important;
    overscroll-behavior: contain !important;
    pointer-events: auto !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-panel.expanded .canvas-node-gen-head {
    grid-row: 1 !important;
    min-height: 54px !important;
    height: 54px !important;
    align-items: flex-start !important;
    padding-right: 34px !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-panel.expanded .canvas-node-gen-tools {
    width: auto !important;
    max-width: calc(100% - 44px) !important;
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    padding: 0 !important;
    overflow: visible !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-panel.expanded .canvas-node-gen-tools button {
    flex: 0 0 auto !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-panel.expanded .canvas-node-gen-references {
    position: absolute !important;
    left: 230px !important;
    right: 54px !important;
    top: 14px !important;
    z-index: 6 !important;
    width: auto !important;
    max-width: none !important;
    height: 52px !important;
    min-height: 52px !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    padding: 0 !important;
    overflow: visible !important;
    pointer-events: auto !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-panel.expanded.video-node-panel .canvas-node-gen-head {
    min-height: 116px !important;
    height: auto !important;
    align-items: flex-start !important;
    padding-right: 34px !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-panel.expanded.video-node-panel .canvas-node-gen-tools {
    width: calc(100% - 42px) !important;
    max-width: calc(100% - 42px) !important;
    display: grid !important;
    grid-template-columns: repeat(5, max-content) minmax(0, 1fr) !important;
    grid-auto-rows: min-content !important;
    align-items: start !important;
    justify-content: start !important;
    gap: 8px !important;
    padding: 0 !important;
    overflow: visible !important;
    position: relative !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-panel.expanded.video-node-panel .canvas-node-gen-tools > button:nth-child(1) { grid-column: 1 !important; grid-row: 1 !important; }
body.canvas-mode-active #canvas-panel .canvas-node-gen-panel.expanded.video-node-panel .canvas-node-gen-tools > button:nth-child(2) { grid-column: 2 !important; grid-row: 1 !important; }
body.canvas-mode-active #canvas-panel .canvas-node-gen-panel.expanded.video-node-panel .canvas-node-gen-tools > button:nth-child(3) { grid-column: 3 !important; grid-row: 1 !important; }
body.canvas-mode-active #canvas-panel .canvas-node-gen-panel.expanded.video-node-panel .canvas-node-gen-tools > button:nth-child(4) { grid-column: 4 !important; grid-row: 1 !important; }
body.canvas-mode-active #canvas-panel .canvas-node-gen-panel.expanded.video-node-panel .canvas-node-gen-tools > button:nth-child(5) { grid-column: 5 !important; grid-row: 1 !important; }
body.canvas-mode-active #canvas-panel .canvas-node-gen-panel.expanded.video-node-panel .canvas-node-gen-tools > button:nth-child(6) { grid-column: 1 !important; grid-row: 2 !important; }
body.canvas-mode-active #canvas-panel .canvas-node-gen-panel.expanded.video-node-panel .canvas-node-gen-tools > button:nth-child(7) { grid-column: 2 !important; grid-row: 2 !important; }
body.canvas-mode-active #canvas-panel .canvas-node-gen-panel.expanded.video-node-panel .canvas-node-gen-tools > button:nth-child(8) { grid-column: 3 !important; grid-row: 2 !important; }
body.canvas-mode-active #canvas-panel .canvas-node-gen-panel.expanded.video-node-panel .canvas-node-gen-tools > button:nth-child(9) { grid-column: 4 !important; grid-row: 2 !important; }
body.canvas-mode-active #canvas-panel .canvas-node-gen-panel.expanded.video-node-panel .canvas-node-gen-tools > .canvas-node-gen-references {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    grid-column: 1 / 7 !important;
    grid-row: 3 !important;
    width: auto !important;
    max-width: min(360px, 100%) !important;
    height: 52px !important;
    min-height: 52px !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    padding: 0 24px 0 0 !important;
    overflow: visible !important;
    pointer-events: auto !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-panel.expanded.video-node-panel .canvas-node-gen-tools > .canvas-node-gen-references:not(.show) {
    display: none !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-panel.expanded.video-node-panel .canvas-node-gen-input {
    grid-row: 2 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-panel.expanded.video-node-panel .canvas-node-gen-row {
    grid-row: 3 !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-panel.expanded .canvas-node-gen-references:not(.show) {
    display: none !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-panel.expanded .canvas-node-gen-ref {
    width: 48px !important;
    height: 48px !important;
    flex-basis: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-panel.expanded .canvas-node-gen-input {
    grid-row: 2 !important;
    align-self: stretch !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 4px 2px 10px !important;
    overflow: auto !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    resize: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(238,242,245,.92) !important;
    font-size: 15px !important;
    font-weight: 720 !important;
    line-height: 1.72 !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-panel.expanded .canvas-node-gen-input::placeholder {
    color: rgba(213,222,228,.72) !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-panel.expanded .canvas-node-gen-row {
    grid-row: 3 !important;
    align-self: end !important;
    margin: 0 !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-panel.expanded .canvas-node-gen-mention-menu {
    left: 16px !important;
    top: 92px !important;
    bottom: auto !important;
}

/* Script node final polish: LibTV-style dark script generator and storyboard table. */
body.canvas-mode-active #canvas-panel .canvas-node.lib-script-node {
    color: rgba(238,242,245,.94) !important;
}
body.canvas-mode-active #canvas-panel .canvas-node.lib-script-node .canvas-lib-node-title {
    color: rgba(192,198,204,.82) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    gap: 6px !important;
}
body.canvas-mode-active #canvas-panel .canvas-node.lib-script-node .canvas-lib-node-title i {
    color: rgba(200,205,211,.78) !important;
}
body.canvas-mode-active #canvas-panel .canvas-node.lib-script-node .canvas-lib-script-frame {
    background: #242424 !important;
    border: 1px solid rgba(255,255,255,.34) !important;
    border-radius: 9px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03) !important;
}
body.canvas-mode-active #canvas-panel .canvas-node.lib-script-node.selected .canvas-lib-script-frame,
body.canvas-mode-active #canvas-panel .canvas-node.lib-script-node:hover .canvas-lib-script-frame {
    border-color: rgba(255,255,255,.74) !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,.16), inset 0 1px 0 rgba(255,255,255,.04) !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-script-placeholder {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 42px !important;
    padding: 52px 62px 58px !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-script-placeholder-icon {
    width: auto !important;
    height: auto !important;
    display: grid !important;
    place-items: center !important;
    color: rgba(255,255,255,.26) !important;
    font-size: 54px !important;
    line-height: 1 !important;
    margin: 0 !important;
    opacity: 1 !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-script-options {
    width: 100% !important;
    display: grid !important;
    justify-items: start !important;
    align-self: stretch !important;
    gap: 16px !important;
    margin: 0 0 0 4px !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-script-options em {
    color: rgba(210,216,221,.66) !important;
    font-size: 15px !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-script-option {
    min-height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    padding: 4px 10px !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: #fff !important;
    font-size: 20px !important;
    font-weight: 850 !important;
    letter-spacing: 0 !important;
    cursor: pointer !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-script-option i {
    width: 22px !important;
    display: inline-grid !important;
    place-items: center !important;
    color: #fff !important;
    font-size: 20px !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-script-option:hover {
    background: rgba(255,255,255,.10) !important;
    border-color: rgba(255,255,255,.16) !important;
}
body.canvas-mode-active #canvas-panel .canvas-script-gen-panel {
    width: min(760px, calc(100vw - 36px)) !important;
    min-height: 154px !important;
    display: none !important;
    grid-template-rows: auto 1fr auto !important;
    gap: 12px !important;
    padding: 18px !important;
    border-radius: 11px !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    background: rgba(37,37,37,.98) !important;
    box-shadow: 0 18px 50px rgba(0,0,0,.48) !important;
    color: rgba(238,242,245,.94) !important;
}
body.canvas-mode-active #canvas-panel .canvas-script-gen-panel.show {
    display: grid !important;
}
body.canvas-mode-active #canvas-panel .canvas-script-gen-refs {
    min-height: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
}
body.canvas-mode-active #canvas-panel .canvas-script-gen-input {
    width: 100% !important;
    min-height: 82px !important;
    height: auto !important;
    padding: 8px 2px !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: none !important;
    resize: none !important;
    background: transparent !important;
    color: rgba(226,232,237,.90) !important;
    caret-color: #fff !important;
    box-shadow: none !important;
    font-size: 15px !important;
    font-weight: 650 !important;
    line-height: 1.55 !important;
}
body.canvas-mode-active #canvas-panel .canvas-script-gen-input::placeholder {
    color: rgba(204,214,220,.66) !important;
    opacity: 1 !important;
}
body.canvas-mode-active #canvas-panel .canvas-script-gen-row {
    display: grid !important;
    grid-template-columns: minmax(160px, auto) 1fr auto auto !important;
    align-items: center !important;
    gap: 12px !important;
}
body.canvas-mode-active #canvas-panel .canvas-script-gen-model {
    min-height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #fff !important;
    font-weight: 850 !important;
    font-size: 14px !important;
}
body.canvas-mode-active #canvas-panel .canvas-script-gen-tools {
    display: inline-flex !important;
    align-items: center !important;
    justify-self: end !important;
    gap: 12px !important;
    color: rgba(255,255,255,.84) !important;
}
body.canvas-mode-active #canvas-panel .canvas-script-gen-cost {
    color: rgba(255,241,186,.92) !important;
    font-weight: 850 !important;
}
body.canvas-mode-active #canvas-panel .canvas-script-gen-send {
    width: 30px !important;
    height: 30px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: rgba(220,222,224,.92) !important;
    color: #1c1d1f !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    display: grid !important;
    place-items: center !important;
    cursor: pointer !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-script-table-frame {
    width: 100% !important;
    height: 100% !important;
    display: grid !important;
    grid-template-rows: 44px 1fr !important;
    overflow: hidden !important;
    border: 1px solid rgba(255,255,255,.22) !important;
    border-radius: 8px !important;
    background: rgba(20,20,20,.96) !important;
    color: rgba(238,242,245,.94) !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-script-table-title {
    min-width: 0 !important;
    padding: 0 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-bottom: 1px solid rgba(255,255,255,.12) !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 850 !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-script-table-title button {
    color: rgba(255,255,255,.82) !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-script-table-wrap {
    overflow: auto !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-script-table {
    width: max(100%, 1640px) !important;
    border-collapse: collapse !important;
    table-layout: fixed !important;
    font-size: 12px !important;
    color: rgba(238,242,245,.92) !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-script-table th,
body.canvas-mode-active #canvas-panel .canvas-lib-script-table td {
    border: 1px solid rgba(255,255,255,.12) !important;
    padding: 8px 10px !important;
    vertical-align: top !important;
    background: rgba(18,18,18,.98) !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-script-table th {
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
    background: rgba(60,60,60,.98) !important;
    color: rgba(230,235,240,.78) !important;
    font-weight: 800 !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-script-cell {
    min-height: 42px !important;
    max-height: 116px !important;
    overflow: auto !important;
    outline: none !important;
    white-space: pre-wrap !important;
    line-height: 1.45 !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-script-cell:focus {
    background: rgba(255,255,255,.06) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.22) !important;
}
.canvas-script-preview-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483600 !important;
    display: none !important;
    background: #070707 !important;
    color: #fff !important;
}
.canvas-script-preview-modal.show {
    display: block !important;
}
.canvas-script-preview-dialog {
    width: 100vw !important;
    width: 100dvw !important;
    height: 100vh !important;
    height: 100dvh !important;
    display: grid !important;
    grid-template-rows: 54px 40px 36px 1fr !important;
    background: #070707 !important;
}
.canvas-script-preview-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 20px !important;
    border-bottom: 1px solid rgba(255,255,255,.10) !important;
}
.canvas-script-preview-head strong {
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 850 !important;
}
.canvas-script-preview-head span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 14px !important;
}
.canvas-script-preview-head button,
.canvas-script-preview-subbar button,
.canvas-script-preview-tools button {
    border: 0 !important;
    background: transparent !important;
    color: rgba(238,242,245,.88) !important;
    font-weight: 760 !important;
    cursor: pointer !important;
}
.canvas-script-preview-close {
    width: 28px !important;
    height: 28px !important;
    display: grid !important;
    place-items: center !important;
    font-size: 22px !important;
}
.canvas-script-preview-subbar,
.canvas-script-preview-tools {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 0 20px !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
.canvas-script-preview-subbar button {
    height: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 0 12px !important;
    border-radius: 6px !important;
    background: rgba(255,255,255,.08) !important;
}
.canvas-script-preview-tools button {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
}
.canvas-script-preview-table-wrap {
    overflow: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 20px 20px !important;
}
.canvas-script-preview-table-wrap .canvas-lib-script-table {
    width: max(100%, 2460px) !important;
    border-collapse: collapse !important;
    table-layout: fixed !important;
    color: rgba(238,242,245,.95) !important;
    font-size: 13px !important;
}
.canvas-script-preview-table-wrap .canvas-lib-script-table th,
.canvas-script-preview-table-wrap .canvas-lib-script-table td {
    border: 1px solid rgba(255,255,255,.13) !important;
    padding: 10px 12px !important;
    vertical-align: top !important;
    background: rgba(10,10,10,.96) !important;
}
.canvas-script-preview-table-wrap .canvas-lib-script-table th {
    position: sticky !important;
    top: 0 !important;
    z-index: 3 !important;
    background: #3a3a3a !important;
    color: rgba(230,235,240,.84) !important;
}
.canvas-script-preview-table-wrap .canvas-lib-script-cell {
    max-height: 160px !important;
    overflow: auto !important;
    white-space: pre-wrap !important;
    outline: none !important;
}

/* Script generator bottom bar: model stays left, cost and send stay right. */
body.canvas-mode-active #canvas-panel .canvas-script-gen-row {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 12px !important;
    min-height: 36px !important;
}
body.canvas-mode-active #canvas-panel .canvas-script-gen-spacer {
    flex: 1 1 auto !important;
    min-width: 24px !important;
}
body.canvas-mode-active #canvas-panel .canvas-script-gen-model {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: min(360px, 58%) !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: rgba(255,255,255,.94) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    font-size: 14px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    cursor: default !important;
}
body.canvas-mode-active #canvas-panel .canvas-script-gen-model span {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
body.canvas-mode-active #canvas-panel .canvas-script-gen-model i {
    flex: 0 0 auto !important;
    color: rgba(255,255,255,.92) !important;
    font-size: 13px !important;
}
body.canvas-mode-active #canvas-panel .canvas-script-gen-icon {
    display: none !important;
}
body.canvas-mode-active #canvas-panel .canvas-script-gen-cost {
    flex: 0 0 auto !important;
    height: 32px !important;
    min-height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 0 2px !important;
    border: 0 !important;
    background: transparent !important;
    color: rgba(255,241,186,.92) !important;
    font-size: 14px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
}
body.canvas-mode-active #canvas-panel .canvas-script-gen-cost i {
    color: rgba(255,255,255,.48) !important;
    font-size: 12px !important;
}
body.canvas-mode-active #canvas-panel .canvas-script-gen-send {
    flex: 0 0 30px !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    max-width: 30px !important;
    max-height: 30px !important;
    margin-left: 4px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: rgba(238,240,242,.96) !important;
    color: #17191b !important;
    display: inline-grid !important;
    place-items: center !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    cursor: pointer !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-script-loading-frame {
    position: absolute !important;
    inset: 0 !important;
    display: grid !important;
    grid-template-rows: 36px 1fr !important;
    overflow: hidden !important;
    border-radius: 8px !important;
    background: rgba(18,18,18,.96) !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-script-skeleton {
    position: relative !important;
    display: grid !important;
    align-content: start !important;
    gap: 8px !important;
    padding: 14px 12px 58px !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-script-skeleton-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 8px !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-script-skeleton-row span {
    height: 18px !important;
    border-radius: 4px !important;
    background: linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,.16), rgba(255,255,255,.08)) !important;
    background-size: 220% 100% !important;
    animation: canvasScriptSkeletonPulse 1.25s linear infinite !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-script-progress-pill {
    position: absolute !important;
    left: 50% !important;
    bottom: 18px !important;
    transform: translateX(-50%) !important;
    min-height: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 0 16px !important;
    border: 1px solid rgba(255,255,255,.34) !important;
    border-radius: 8px !important;
    background: rgba(18,18,18,.90) !important;
    color: rgba(255,255,255,.94) !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    box-shadow: 0 10px 26px rgba(0,0,0,.34) !important;
    cursor: pointer !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-script-progress-pill span {
    color: rgba(255,255,255,.62) !important;
    font-weight: 750 !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-script-table {
    width: max(100%, 2612px) !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-script-table-title {
    height: 36px !important;
    min-height: 36px !important;
}
.canvas-script-preview-table-wrap .canvas-lib-script-table {
    width: max(100%, 2912px) !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-script-table-wrap {
    align-content: start !important;
    display: block !important;
    height: 100% !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-script-table,
body.canvas-mode-active #canvas-panel .canvas-lib-script-table thead,
body.canvas-mode-active #canvas-panel .canvas-lib-script-table tbody,
body.canvas-mode-active #canvas-panel .canvas-lib-script-table tr,
body.canvas-mode-active #canvas-panel .canvas-lib-script-table th,
body.canvas-mode-active #canvas-panel .canvas-lib-script-table td {
    height: auto !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-script-table {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-script-table thead,
body.canvas-mode-active #canvas-panel .canvas-lib-script-table tbody {
    min-height: 0 !important;
    max-height: none !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-script-table th,
body.canvas-mode-active #canvas-panel .canvas-lib-script-table td {
    padding: 6px 8px !important;
    line-height: 1.32 !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-script-table tbody tr {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-script-cell {
    height: auto !important;
    min-height: 0 !important;
    max-height: 88px !important;
    line-height: 1.32 !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-script-table-title > span:last-child {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 0 0 auto !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-script-expand-btn {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    padding: 0 !important;
    display: inline-grid !important;
    place-items: center !important;
    opacity: 1 !important;
    visibility: visible !important;
    color: #fff !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-script-expand-btn svg,
body.canvas-mode-active #canvas-panel .canvas-lib-script-expand-btn i {
    color: #fff !important;
    fill: currentColor !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-script-toolbar-icon {
    width: 34px !important;
    min-width: 34px !important;
    padding: 0 !important;
    justify-content: center !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-script-toolbar-icon svg {
    width: 18px !important;
    height: 18px !important;
    display: block !important;
    fill: #fff !important;
}
.canvas-script-preview-table-wrap .canvas-lib-script-table,
.canvas-script-preview-table-wrap .canvas-lib-script-table thead,
.canvas-script-preview-table-wrap .canvas-lib-script-table tbody,
.canvas-script-preview-table-wrap .canvas-lib-script-table tr,
.canvas-script-preview-table-wrap .canvas-lib-script-table th,
.canvas-script-preview-table-wrap .canvas-lib-script-table td {
    height: auto !important;
}
.canvas-script-preview-table-wrap .canvas-lib-script-table th,
.canvas-script-preview-table-wrap .canvas-lib-script-table td {
    padding: 7px 9px !important;
    line-height: 1.32 !important;
}
.canvas-script-preview-table-wrap .canvas-lib-script-cell {
    min-height: 0 !important;
    max-height: 120px !important;
    line-height: 1.32 !important;
}
@keyframes canvasScriptSkeletonPulse {
    0% { background-position: 0 0; }
    100% { background-position: -220% 0; }
}

/* Final guard: the infinite canvas must own the whole viewport. */
html.canvas-viewport-locked,
html.canvas-viewport-locked body.canvas-mode-active {
    width: 100vw !important;
    width: 100dvw !important;
    min-width: 100vw !important;
    min-width: 100dvw !important;
    max-width: 100vw !important;
    max-width: 100dvw !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    overflow: hidden !important;
    background: #08090a !important;
}
body.canvas-mode-active #canvas-panel,
body.canvas-mode-active #canvas-panel.canvas-project-home-open,
body.canvas-mode-active #canvas-panel .canvas-project-home,
body.canvas-mode-active #canvas-panel .canvas-shell,
body.canvas-mode-active #canvas-panel .canvas-workspace,
body.canvas-mode-active #canvas-panel .canvas-stage-wrap {
    left: 0 !important;
    right: auto !important;
    top: 0 !important;
    bottom: auto !important;
    width: 100vw !important;
    width: 100dvw !important;
    min-width: 100vw !important;
    min-width: 100dvw !important;
    max-width: 100vw !important;
    max-width: 100dvw !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}
body.canvas-mode-active #canvas-panel,
body.canvas-mode-active #canvas-panel.canvas-project-home-open,
body.canvas-mode-active #canvas-panel .canvas-project-home {
    position: fixed !important;
    inset: 0 !important;
	    z-index: 2147483000 !important;
	    background:
	        radial-gradient(circle at 1px 1px, rgba(255,255,255,var(--canvas-grid-alpha,.057)) 0 .72px, transparent .78px),
	        linear-gradient(180deg, #090a0b 0%, #070808 100%) !important;
	    background-size: var(--canvas-grid-size, 18px) var(--canvas-grid-size, 18px), auto !important;
	}
body.canvas-mode-active #canvas-panel .canvas-shell,
body.canvas-mode-active #canvas-panel .canvas-workspace,
body.canvas-mode-active #canvas-panel .canvas-stage-wrap {
    position: absolute !important;
    inset: 0 !important;
}
body.canvas-mode-active #canvas-panel .canvas-stage {
    min-width: 100vw !important;
    min-width: 100dvw !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
}
body.canvas-mode-active #canvas-panel.canvas-project-home-open .canvas-project-home {
    display: block !important;
    overflow: auto !important;
}
body.canvas-mode-active #canvas-panel:not(.canvas-project-home-open) .canvas-project-home {
    display: none !important;
}
body.canvas-mode-active #canvas-panel .canvas-project-home-toolbar,
body.canvas-mode-active #canvas-panel .canvas-project-grid {
    width: min(1520px, calc(100vw - 96px)) !important;
    width: min(1520px, calc(100dvw - 96px)) !important;
    max-width: none !important;
}

/* Project workspace must stay above the full-screen canvas so users can switch tools. */
body.canvas-mode-active.mt-project-workspace-active #mtProjectWorkspaceBar {
    position: fixed !important;
    top: 12px !important;
    left: 18px !important;
    right: 18px !important;
    z-index: 2147483600 !important;
    display: flex !important;
    margin: 0 !important;
    background: rgba(255, 255, 255, .97) !important;
    box-shadow: 0 18px 46px rgba(0, 0, 0, .28) !important;
    pointer-events: auto !important;
}
body.canvas-mode-active.mt-project-workspace-active #mtProjectWorkspaceBar,
body.canvas-mode-active.mt-project-workspace-active #mtProjectWorkspaceBar * {
    pointer-events: auto !important;
}
body.canvas-mode-active.mt-project-workspace-active #canvas-panel .canvas-project-home {
    padding-top: 86px !important;
    box-sizing: border-box !important;
}

/* Project management is a clean project picker; sidebar appears only after a project is opened. */
body.ui-polished-creator.mt-project-home-active:not(.canvas-mode-active) .sidebar,
body.ui-polished-creator.mt-project-home-active:not(.canvas-mode-active) .sidebar-hover-zone {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
body.ui-polished-creator.mt-project-home-active:not(.canvas-mode-active) .main-content,
body.ui-polished-creator.sidebar-auto-hide.mt-project-home-active:not(.canvas-mode-active) .main-content,
body.ui-polished-creator.sidebar-auto-hide.sidebar-revealed.mt-project-home-active:not(.canvas-mode-active) .main-content {
    margin-left: 0 !important;
    padding-left: clamp(40px, 5vw, 72px) !important;
    padding-right: clamp(40px, 5vw, 72px) !important;
}

/* Mode switching now lives in the sidebar; remove the duplicated white project toolbar. */
body.mt-project-workspace-active #mtProjectWorkspaceBar,
body.canvas-mode-active.mt-project-workspace-active #mtProjectWorkspaceBar {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
body.canvas-mode-active.mt-project-workspace-active #canvas-panel .canvas-project-home {
    padding-top: 0 !important;
}

/* Infinite canvas home also uses the standard auto-hide creator sidebar. */
body.canvas-mode-active.canvas-project-home-active #canvas-panel .canvas-creator-sidebar-toggle {
    display: none !important;
}
body.canvas-mode-active.canvas-project-home-active .sidebar {
    display: flex !important;
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 268px !important;
    height: 100vh !important;
    height: 100dvh !important;
    z-index: 2147483600 !important;
    transform: translateX(-282px) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    overflow: hidden !important;
    padding: 20px 14px 16px !important;
    border-radius: 0 !important;
    border-right: 1px solid var(--mt-line) !important;
    box-shadow: 22px 0 60px -28px rgba(0,0,0,.55) !important;
    background: #fff !important;
    color: var(--mt-ink) !important;
    transition: transform .34s cubic-bezier(.22, 1, .36, 1), box-shadow .34s cubic-bezier(.22, 1, .36, 1) !important;
}
body.canvas-mode-active.canvas-project-home-active.sidebar-revealed .sidebar {
    transform: translateX(0) !important;
}
body.canvas-mode-active.canvas-project-home-active .sidebar::before,
body.canvas-mode-active.canvas-project-home-active .sidebar::after {
    display: none !important;
}
body.canvas-mode-active.canvas-project-home-active .sidebar .nav-menu {
    overflow-y: auto !important;
    scrollbar-width: thin;
}
body.canvas-mode-active.canvas-project-home-active .sidebar-hover-zone {
    display: block !important;
    visibility: visible !important;
    pointer-events: auto !important;
    position: fixed !important;
    left: 0 !important;
    top: 50% !important;
    width: 16px !important;
    height: 78px !important;
    z-index: 2147483601 !important;
    opacity: 1 !important;
    transform: translateY(-50%) !important;
    background: #fff !important;
    border: 1px solid rgba(226, 232, 240, .9) !important;
    border-left: 0 !important;
    border-radius: 0 10px 10px 0 !important;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .16) !important;
    cursor: pointer !important;
    transition: opacity .22s ease, width .22s ease, box-shadow .28s cubic-bezier(.22, 1, .36, 1) !important;
}
body.canvas-mode-active.canvas-project-home-active .sidebar-hover-zone::after {
    content: "" !important;
    position: absolute !important;
    left: 6px !important;
    top: 50% !important;
    width: 3px !important;
    height: 46px !important;
    transform: translateY(-50%) !important;
    border-radius: 999px !important;
    background: var(--mt-accent, #7c5cff) !important;
    box-shadow: 0 0 14px rgba(124, 92, 255, .38) !important;
    opacity: .95 !important;
}
body.canvas-mode-active.canvas-project-home-active .sidebar-hover-zone:hover {
    width: 18px !important;
    box-shadow: 0 16px 38px rgba(15, 23, 42, .2) !important;
}
body.canvas-mode-active.canvas-project-home-active.sidebar-revealed .sidebar-hover-zone {
    width: 4px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
/* Move the complete project surface as one layer so sidebar toggles do not reflow project cards. */
body.canvas-mode-active.canvas-project-home-active #canvas-panel .canvas-project-home-top {
    transition: transform .34s cubic-bezier(.22, 1, .36, 1) !important;
    will-change: transform;
}
body.canvas-mode-active.canvas-project-home-active #canvas-panel .canvas-project-grid,
body.canvas-mode-active.canvas-project-home-active #canvas-panel .canvas-project-home-footer {
    transition: transform .34s cubic-bezier(.22, 1, .36, 1) !important;
    will-change: transform;
}
body.canvas-mode-active.canvas-project-home-active.sidebar-revealed #canvas-panel .canvas-project-home-top {
    transform: translateX(268px) !important;
}
body.canvas-mode-active.canvas-project-home-active.sidebar-revealed #canvas-panel .canvas-project-grid,
body.canvas-mode-active.canvas-project-home-active.sidebar-revealed #canvas-panel .canvas-project-home-footer {
    transform: translateX(268px) !important;
}
body.canvas-mode-active.canvas-project-home-active:not(.sidebar-revealed) #canvas-panel .canvas-project-home-top,
body.canvas-mode-active.canvas-project-home-active:not(.sidebar-revealed) #canvas-panel .canvas-project-grid,
body.canvas-mode-active.canvas-project-home-active:not(.sidebar-revealed) #canvas-panel .canvas-project-home-footer {
    transform: translateX(0) !important;
}

/* Canvas project home cards stay dark, independent of the creator page theme. */
body.canvas-mode-active #canvas-panel .canvas-project-home .canvas-project-card {
    display: block !important;
    padding: 10px !important;
    border-radius: 10px !important;
    background: rgba(12, 13, 20, .78) !important;
    border: 1px solid rgba(92, 79, 255, .18) !important;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .24) !important;
    color: rgba(255, 255, 255, .90) !important;
}
body.canvas-mode-active #canvas-panel .canvas-project-home .canvas-project-card.create {
    background: rgba(10, 11, 17, .72) !important;
}
body.canvas-mode-active #canvas-panel .canvas-project-home .canvas-project-name {
    color: rgba(255, 255, 255, .92) !important;
}
body.canvas-mode-active #canvas-panel .canvas-project-home .canvas-project-date {
    color: rgba(255, 255, 255, .46) !important;
}
body.canvas-mode-active #canvas-panel .canvas-project-home .canvas-project-card-more {
    color: rgba(255, 255, 255, .62) !important;
}

/* Canvas selected image toolbar: icon-only action buttons, no runtime DOM scanning. */
body.canvas-mode-active #canvas-panel .canvas-lib-media-toolbar-actions .canvas-toolbar-icon-btn[data-canvas-toolbar-icon] {
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    color: #fff !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-indent: 0 !important;
    overflow: hidden !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-media-toolbar-actions .canvas-toolbar-icon-btn[data-canvas-toolbar-icon]::before,
body.canvas-mode-active #canvas-panel .canvas-lib-media-toolbar-actions .canvas-toolbar-icon-btn[data-canvas-toolbar-icon]::after {
    content: none !important;
    display: none !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-media-toolbar-actions .canvas-toolbar-icon-btn[data-canvas-toolbar-icon] .canvas-lib-media-svg {
    width: 18px !important;
    height: 18px !important;
    display: block !important;
    flex: 0 0 auto !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
    filter: none !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-media-toolbar-actions .canvas-toolbar-icon-btn[data-canvas-toolbar-icon]:hover {
    background: rgba(255,255,255,.10) !important;
}
/* Canvas image/video generator controls: icon-only expand and send buttons. */
body.canvas-mode-active #canvas-panel .canvas-node-gen-close[data-canvas-toolbar-icon="node-gen-expand"] {
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    display: inline-grid !important;
    place-items: center !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    border-radius: 8px !important;
    background: rgba(17,17,18,.96) !important;
    color: #fff !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-indent: 0 !important;
    overflow: hidden !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-close[data-canvas-toolbar-icon="node-gen-expand"]:hover {
    background: rgba(33,33,35,.98) !important;
    border-color: rgba(255,255,255,.24) !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-close[data-canvas-toolbar-icon="node-gen-expand"]::before,
body.canvas-mode-active #canvas-panel .canvas-node-gen-close[data-canvas-toolbar-icon="node-gen-expand"]::after,
body.canvas-mode-active #canvas-panel .canvas-node-gen-send[data-canvas-toolbar-icon="node-gen-send"]::before,
body.canvas-mode-active #canvas-panel .canvas-node-gen-send[data-canvas-toolbar-icon="node-gen-send"]::after {
    content: none !important;
    display: none !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-close[data-canvas-toolbar-icon="node-gen-expand"] .canvas-node-gen-expand-icon {
    display: block !important;
    flex: 0 0 auto !important;
    width: 16px !important;
    height: 16px !important;
    color: currentColor !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-send[data-canvas-toolbar-icon="node-gen-send"] {
    width: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    padding: 0 !important;
    display: inline-grid !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: #161719 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-indent: 0 !important;
    overflow: hidden !important;
    box-shadow: none !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-send[data-canvas-toolbar-icon="node-gen-send"]:hover {
    background: #fff !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-send[data-canvas-toolbar-icon="node-gen-send"]:disabled {
    opacity: .64 !important;
    cursor: wait !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-send[data-canvas-toolbar-icon="node-gen-send"] .canvas-node-gen-send-icon {
    position: relative !important;
    display: block !important;
    width: 16px !important;
    height: 16px !important;
    color: currentColor !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-send[data-canvas-toolbar-icon="node-gen-send"] .canvas-node-gen-send-icon::before {
    content: "" !important;
    position: absolute !important;
    left: 4px !important;
    top: 3px !important;
    width: 8px !important;
    height: 8px !important;
    border-left: 2px solid currentColor !important;
    border-top: 2px solid currentColor !important;
    border-radius: 1px !important;
    transform: rotate(45deg) !important;
    box-sizing: border-box !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-send[data-canvas-toolbar-icon="node-gen-send"] .canvas-node-gen-send-icon::after {
    content: "" !important;
    position: absolute !important;
    left: 7px !important;
    top: 5px !important;
    width: 2px !important;
    height: 9px !important;
    border-radius: 999px !important;
    background: currentColor !important;
}
/* Keep completed canvas video nodes in their full media frame even when older media styles are cached. */
body.canvas-mode-active #canvas-panel .canvas-node.lib-video-node.lib-media-node .canvas-lib-image-frame.canvas-lib-video-frame.canvas-lib-media-frame {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 28px !important;
    bottom: 0 !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    display: block !important;
    overflow: hidden !important;
    isolation: isolate !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    background: #000 !important;
}
body.canvas-mode-active #canvas-panel .canvas-node.lib-video-node.lib-media-node .canvas-lib-image-frame.canvas-lib-video-frame.canvas-lib-media-frame::before,
body.canvas-mode-active #canvas-panel .canvas-node.lib-video-node.lib-media-node .canvas-lib-image-frame.canvas-lib-video-frame.canvas-lib-media-frame::after {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
body.canvas-mode-active #canvas-panel .canvas-node.lib-video-node.lib-media-node .canvas-lib-image-frame.canvas-lib-video-frame.canvas-lib-media-frame > .canvas-lib-video-cover,
body.canvas-mode-active #canvas-panel .canvas-node.lib-video-node.lib-media-node .canvas-lib-image-frame.canvas-lib-video-frame.canvas-lib-media-frame > video.canvas-lib-media-content {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: none !important;
    display: block !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    background: #000 !important;
}
body.ui-polished-creator #canvasProjectDeleteModal .canvas-project-delete-dialog h3,
body.canvas-mode-active #canvasProjectDeleteModal .canvas-project-delete-dialog h3 {
    color: #ff4d57 !important;
    -webkit-text-fill-color: #ff4d57 !important;
    font-weight: 900 !important;
}
body.ui-polished-creator #canvasHistoryDeleteModal .canvas-project-delete-dialog h3,
body.canvas-mode-active #canvasHistoryDeleteModal .canvas-project-delete-dialog h3 {
    color: #ff4d57 !important;
    -webkit-text-fill-color: #ff4d57 !important;
    font-weight: 900 !important;
}
/* Canvas group frame: keep selected groups square and keep resize handles visually stable while zooming. */
body.canvas-mode-active #canvas-panel .canvas-lib-group-frame,
body.canvas-mode-active #canvas-panel .canvas-lib-group-frame:hover,
body.canvas-mode-active #canvas-panel .canvas-lib-group-frame.selected,
body.canvas-mode-active #canvas-panel .canvas-multi-selection-outline.group-selected {
    border-radius: 0 !important;
}
body.canvas-mode-active #canvas-panel .canvas-node.group-selected-member .canvas-resize-handle,
body.canvas-mode-active #canvas-panel .canvas-node.multi-selected-member .canvas-resize-handle {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-group-resize-handle {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: scale(var(--canvas-group-handle-scale, 1)) !important;
    transform-origin: center center !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-group-resize-handle::before {
    content: '' !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 10px !important;
    height: 10px !important;
    border-radius: 1px !important;
    background: rgba(188, 191, 195, .98) !important;
    box-shadow: 0 0 0 1px rgba(8, 8, 8, .26), 0 2px 6px rgba(0, 0, 0, .24) !important;
    transform: translate(-50%, -50%) !important;
    pointer-events: none !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-group-resize-handle.nw {
    left: -11px !important;
    top: -11px !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-group-resize-handle.ne {
    right: -11px !important;
    top: -11px !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-group-resize-handle.sw {
    left: -11px !important;
    bottom: -11px !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-group-resize-handle.se {
    right: -11px !important;
    bottom: -11px !important;
}
/* Keep the active single-node toolbar above neighboring canvas nodes. */
body.canvas-mode-active #canvas-panel .canvas-node.selected:not(.multi-selected-member):not(.group-selected-member) {
    z-index: 1248 !important;
    overflow: visible !important;
}
body.canvas-mode-active #canvas-panel .canvas-node.selected:not(.multi-selected-member):not(.group-selected-member) .canvas-lib-media-toolbar,
body.canvas-mode-active #canvas-panel .canvas-node.selected:not(.multi-selected-member):not(.group-selected-member) .canvas-lib-text-toolbar,
body.canvas-mode-active #canvas-panel .canvas-node.selected:not(.multi-selected-member):not(.group-selected-member) .canvas-lib-script-table-toolbar,
body.canvas-mode-active #canvas-panel .canvas-node.selected:not(.multi-selected-member):not(.group-selected-member) .canvas-media-edit-toolbar,
body.canvas-mode-active #canvas-panel .canvas-node.selected:not(.multi-selected-member):not(.group-selected-member) .canvas-erase-toolbar {
    z-index: 1260 !important;
}
body.canvas-mode-active #canvas-panel .canvas-node-gen-panel.show,
body.canvas-mode-active #canvas-panel .canvas-script-gen-panel.show {
    z-index: 1258 !important;
}
body.canvas-mode-active #canvas-panel .canvas-node.selected:not(.multi-selected-member):not(.group-selected-member):has(.canvas-lib-media-tool.has-menu:is(.menu-open, :hover, :focus-within)),
body.canvas-mode-active #canvas-panel .canvas-node.selected:not(.multi-selected-member):not(.group-selected-member):has(.canvas-outpaint-toolbar .has-menu:is(.menu-open, :hover, :focus-within)),
body.canvas-mode-active #canvas-panel .canvas-node.selected:not(.multi-selected-member):not(.group-selected-member):has(.canvas-crop-toolbar .has-menu:is(.menu-open, :hover, :focus-within)),
body.canvas-mode-active #canvas-panel .canvas-node.selected:not(.multi-selected-member):not(.group-selected-member):has(.canvas-erase-toolbar .has-menu:is(.menu-open, :hover, :focus-within)) {
    z-index: 1266 !important;
    overflow: visible !important;
}
body.canvas-mode-active #canvas-panel .canvas-node.selected:not(.multi-selected-member):not(.group-selected-member):has(.canvas-lib-media-tool.has-menu:is(.menu-open, :hover, :focus-within)) {
    z-index: 1266 !important;
    overflow: visible !important;
}
body.canvas-mode-active #canvas-panel .canvas-node.selected:not(.multi-selected-member):not(.group-selected-member):has(.canvas-lib-media-tool.has-menu:is(.menu-open, :hover, :focus-within)) .canvas-lib-media-toolbar {
    z-index: 1268 !important;
}
body.canvas-mode-active #canvas-panel .canvas-node.selected:not(.multi-selected-member):not(.group-selected-member):has(.canvas-lib-media-tool.has-menu:is(.menu-open, :hover, :focus-within)) .canvas-lib-media-tool-menu {
    z-index: 1270 !important;
}
/* Canvas connection hover action: reveal a scissors button after a short hover. */
/* ManyTokens dark mode color layer. Layout stays inherited from the current day-mode UI. */
body.ui-polished-creator.ark-night:not(.canvas-mode-active) {
    --mt-bg: #050507;
    --mt-bg-2: #0c0c12;
    --mt-ink: #f6f3ff;
    --mt-ink-2: #e3ddff;
    --mt-muted: rgba(246,243,255,.68);
    --mt-soft: rgba(246,243,255,.46);
    --mt-line: rgba(255,255,255,.08);
    --mt-line-2: rgba(255,255,255,.15);
    --mt-accent: #7f6bff;
    --mt-accent-2: #9a8cff;
    --mt-accent-3: #5b47fb;
    --mt-accent-soft: rgba(127,107,255,.16);
    --mt-accent-tint: rgba(127,107,255,.24);
    --mt-paper: rgba(20,20,26,.78);
    --mt-paper-2: rgba(28,28,36,.94);
    --mt-shadow-sm: 0 1px 0 rgba(255,255,255,.05) inset, 0 10px 26px -18px rgba(0,0,0,.88);
    --mt-shadow-md: 0 1px 0 rgba(255,255,255,.06) inset, 0 22px 50px -26px rgba(0,0,0,.92);
    --mt-shadow-lg: 0 1px 0 rgba(255,255,255,.07) inset, 0 38px 86px -34px rgba(0,0,0,.96);
    background: var(--mt-bg) !important;
    color: var(--mt-ink) !important;
    color-scheme: dark;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active)::before {
    background:
        radial-gradient(900px 700px at 6% -8%, rgba(127,107,255,.18), transparent 62%),
        radial-gradient(720px 620px at 100% 108%, rgba(127,107,255,.10), transparent 62%),
        linear-gradient(180deg, rgba(5,5,7,.96) 0%, rgba(9,9,13,.98) 100%) !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active)::after {
    opacity: .06 !important;
    mix-blend-mode: screen !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .sidebar {
    background: linear-gradient(180deg, rgba(15,15,20,.92) 0%, rgba(8,8,12,.88) 100%) !important;
    border-right-color: rgba(255,255,255,.08) !important;
    box-shadow: 1px 0 0 rgba(255,255,255,.04), 24px 0 64px -38px rgba(0,0,0,.94) !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active).sidebar-auto-hide.sidebar-revealed .sidebar {
    box-shadow: 22px 0 70px -30px rgba(0,0,0,.95) !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .logo-section,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .user-section,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .top-bar,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .ark-tools-divider,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .t2i-preview-header,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .img-library-header,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .history-picker-header,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .mt-project-head,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .mt-project-workspace-bar,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel .wf-project-home-search,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel .wf-project-home-pager {
    border-color: var(--mt-line) !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .logo-text,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .page-title,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .user-name,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .t2i-label,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .t2i-preview-header > span,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .history-title,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) h2,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) h3,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .mt-project-title,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .mt-project-card-title,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel .wf-project-card-title,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .ark-tools-name {
    color: var(--mt-ink) !important;
    -webkit-text-fill-color: var(--mt-ink) !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .nav-section-title,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .user-status,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .page-title::after,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .t2i-textarea::placeholder,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) textarea::placeholder,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) input::placeholder,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .mt-project-subtitle,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .mt-project-card-desc,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .mt-project-card-meta,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .mt-project-card-status,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .wf-project-card-meta,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .history-full-time,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .history-full-meta,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .ark-tools-kbd {
    color: var(--mt-muted) !important;
    -webkit-text-fill-color: currentColor !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .nav-item,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .nav-item .nav-text {
    color: var(--mt-muted) !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .nav-item:hover,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .user-card:hover,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .ark-tools-item:hover {
    background: rgba(127,107,255,.13) !important;
    color: var(--mt-ink) !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .nav-badge,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .template-tag,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .img-library-badge {
    background: rgba(127,107,255,.18) !important;
    color: #b9aeff !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .user-avatar,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .ark-top-home-btn,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .icon-btn,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .tool-btn,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .t2i-action-btn,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .ark-balance-widget,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .ark-points-widget,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .ark-tools-trigger,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .mt-project-primary,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .mt-project-secondary,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .mt-project-tool-btn,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel .wf-project-home-pager button,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel .wf-project-home-page-num,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .btn-secondary {
    background: rgba(22,22,29,.88) !important;
    border-color: var(--mt-line-2) !important;
    color: var(--mt-ink) !important;
    box-shadow: var(--mt-shadow-sm) !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .ark-top-home-btn:hover,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .icon-btn:hover,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .tool-btn:hover,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .t2i-action-btn:hover,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .mt-project-secondary:hover,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .mt-project-tool-btn:hover {
    background: rgba(35,35,46,.96) !important;
    border-color: rgba(127,107,255,.48) !important;
    color: #b9aeff !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .ark-tools-dropdown,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .modal-content,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .settings-panel,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .modal-container,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .detail-modal-content,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .favorites-modal,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .history-full-content,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .shortcut-modal,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .ark-shortcut-content {
    background: rgba(16,16,22,.96) !important;
    border-color: var(--mt-line-2) !important;
    color: var(--mt-ink) !important;
    box-shadow: 0 28px 80px -34px rgba(0,0,0,.96) !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .t2i-layout,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .t2i-left,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .t2i-right,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .upload-area-multi,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .history-image-picker,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .img-library-panel,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .result-section,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .director-card,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .director-style-box,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .director-style-current,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .workflow-container,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .mt-project-home,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .wf-topbar,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .wf-panel-topbar,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .wf-left,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .wf-right,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .wf-card,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .wf-result-panel,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .wf-script-result,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .wf-sb-card,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .wf-char-card,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .wf-chapter-panel,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .wf-input-panel,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .history-card,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .result-card,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .history-full-card,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .mt-project-card,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .mt-project-empty,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel.wf-project-home-active,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel.wf-project-home-active .wf-project-home,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel .wf-project-home,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel .wf-project-card,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel .wf-project-home-empty,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel .wf-project-home-search input {
    background: rgba(18,18,24,.78) !important;
    border-color: var(--mt-line-2) !important;
    color: var(--mt-ink) !important;
    box-shadow: var(--mt-shadow-sm) !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .t2i-layout {
    background:
        radial-gradient(900px 280px at 0% 0%, rgba(127,107,255,.12), transparent 60%),
        linear-gradient(180deg, rgba(24,24,31,.88), rgba(12,12,18,.84)) !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .t2i-left::after {
    background: rgba(127,107,255,.14) !important;
    color: #c8c1ff !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel.wf-project-home-active .wf-project-home-search {
    background: rgba(24,25,33,.86) !important;
    border-color: rgba(255,255,255,.12) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 14px 36px -30px rgba(0,0,0,.95) !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel.wf-project-home-active .wf-project-home-search input,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel.wf-project-home-active .wf-project-home-search input[type="search"] {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    color: #f7f5ff !important;
    -webkit-text-fill-color: #f7f5ff !important;
    box-shadow: none !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel.wf-project-home-active .wf-project-home-search input::placeholder {
    color: rgba(231,226,255,.48) !important;
    -webkit-text-fill-color: rgba(231,226,255,.48) !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel.wf-project-home-active .wf-project-home-search span {
    color: rgba(231,226,255,.54) !important;
    -webkit-text-fill-color: rgba(231,226,255,.54) !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .t2i-preset-btn,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .director-style-chip {
    background: rgba(24,24,31,.90) !important;
    border-color: var(--mt-line-2) !important;
    color: var(--mt-ink-2) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 8px 18px -16px rgba(0,0,0,.9) !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .t2i-preset-btn:hover,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .director-style-chip:hover {
    background: rgba(127,107,255,.16) !important;
    border-color: rgba(127,107,255,.44) !important;
    color: #d6d0ff !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .t2i-textarea,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .t2i-select,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) input[type="text"],
body.ui-polished-creator.ark-night:not(.canvas-mode-active) input[type="number"],
body.ui-polished-creator.ark-night:not(.canvas-mode-active) input[type="search"],
body.ui-polished-creator.ark-night:not(.canvas-mode-active) input:not([type]),
body.ui-polished-creator.ark-night:not(.canvas-mode-active) textarea,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) select {
    background: rgba(8,8,12,.78) !important;
    border-color: var(--mt-line-2) !important;
    color: var(--mt-ink) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.04) inset !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) input:focus,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) textarea:focus,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) select:focus,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .t2i-textarea:focus,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .t2i-select:focus {
    background: rgba(10,10,16,.92) !important;
    border-color: var(--mt-accent) !important;
    box-shadow: 0 0 0 4px rgba(127,107,255,.18) !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) select option {
    background: #111117 !important;
    color: var(--mt-ink) !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .t2i-image-container,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #text2img-panel .t2i-image-container,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #img2img-panel .t2i-image-container,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #text2video-panel .t2i-image-container,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #img2video-panel .t2i-image-container {
    background:
        radial-gradient(800px 380px at 50% -10%, rgba(127,107,255,.18), transparent 62%),
        repeating-linear-gradient(0deg, rgba(255,255,255,.022) 0 1px, transparent 1px 3px),
        #09090f !important;
    border-color: rgba(255,255,255,.08) !important;
    color: #fff !important;
    box-shadow: inset 0 0 80px rgba(0,0,0,.52) !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #text2img-panel .t2i-right,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #img2img-panel .t2i-right,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #text2video-panel .t2i-right,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #img2video-panel .t2i-right {
    background: #0b0b11 !important;
    border-color: rgba(255,255,255,.10) !important;
    color: #fff !important;
    box-shadow: 0 24px 60px -24px rgba(0,0,0,.72) !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #text2img-panel .t2i-preview-header,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #img2img-panel .t2i-preview-header,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #text2video-panel .t2i-preview-header,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #img2video-panel .t2i-preview-header {
    border-bottom-color: rgba(255,255,255,.07) !important;
    color: #fff !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .ark-empty-stage,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .ark-empty-title,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .ark-empty-subtitle,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .ark-empty-tags span {
    color: rgba(255,255,255,.88) !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .mt-project-card.add,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel .wf-project-card.add {
    background: rgba(13,13,19,.68) !important;
    border-color: rgba(127,107,255,.28) !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .mt-project-folder-icon,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .mt-project-add-icon,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel .wf-project-card-folder {
    background: rgba(127,107,255,.20) !important;
    color: #c8c1ff !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .mt-project-card-actions button,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel .wf-project-card-menu-left,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel .wf-project-card-menu-right {
    color: rgba(230,226,255,.72) !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .mt-project-card-actions button:hover,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel .wf-project-card-menu-left:hover,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel .wf-project-card-menu-right:hover {
    background: rgba(127,107,255,.14) !important;
    color: #fff !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .progress-container,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .progress-bar-wrapper,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .director-rating-item,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .director-scene-card,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .director-timeline-item,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .shortcut-badge,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .ark-shortcut-row {
    background: rgba(255,255,255,.055) !important;
    border-color: rgba(255,255,255,.10) !important;
    color: var(--mt-ink) !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) ::selection {
    background: rgba(127,107,255,.36) !important;
    color: #fff !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) ::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.18) !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) ::-webkit-scrollbar-thumb:hover {
    background: rgba(127,107,255,.50) !important;
}

/* Night mode visual tuning: keep day layout, replace only color, surface, and shadow. */
body.ui-polished-creator.ark-night:not(.canvas-mode-active) {
    --mt-bg: #07080d;
    --mt-bg-2: #0d1017;
    --mt-ink: #f7f5ff;
    --mt-ink-2: #e7e2ff;
    --mt-muted: rgba(231,226,255,.68);
    --mt-soft: rgba(231,226,255,.44);
    --mt-line: rgba(255,255,255,.09);
    --mt-line-2: rgba(255,255,255,.16);
    --mt-accent: #816cff;
    --mt-accent-2: #a295ff;
    --mt-accent-3: #5f45ff;
    --mt-paper: rgba(29,30,38,.76);
    --mt-paper-2: rgba(35,36,45,.92);
    --mt-shadow-sm: 0 1px 0 rgba(255,255,255,.06) inset, 0 12px 28px -24px rgba(0,0,0,.9);
    --mt-shadow-md: 0 1px 0 rgba(255,255,255,.07) inset, 0 26px 60px -34px rgba(0,0,0,.94);
    --mt-shadow-lg: 0 1px 0 rgba(255,255,255,.08) inset, 0 34px 88px -44px rgba(0,0,0,.96);
    background: #07080d !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active)::before {
    background:
        radial-gradient(760px 520px at 9% 0%, rgba(126,100,255,.24), transparent 62%),
        radial-gradient(820px 560px at 100% 4%, rgba(28,126,104,.18), transparent 64%),
        linear-gradient(180deg, #10121a 0%, #080a10 48%, #06070b 100%) !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active)::after {
    opacity: .026 !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .main-content {
    background: transparent !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .sidebar {
    background:
        linear-gradient(180deg, rgba(13,14,20,.94), rgba(8,9,13,.92)) !important;
    border-right-color: rgba(255,255,255,.08) !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .nav-item,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .user-card {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .nav-item.active,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .nav-item.active:hover {
    background: linear-gradient(135deg, #826cff 0%, #583dff 100%) !important;
    color: #fff !important;
    box-shadow: 0 16px 34px -24px rgba(96,70,255,.95) !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .page-title {
    color: #fff !important;
    text-shadow: 0 16px 42px rgba(0,0,0,.3);
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .page-subtitle,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .page-title::after {
    color: rgba(231,226,255,.66) !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .ark-top-home-btn,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .tool-btn,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .ark-balance-widget,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .ark-points-widget,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .ark-tools-trigger,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .btn-secondary {
    background: rgba(24,25,33,.78) !important;
    border-color: rgba(255,255,255,.16) !important;
    color: rgba(247,245,255,.92) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 14px 32px -28px rgba(0,0,0,.92) !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .ark-tools-dropdown,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .modal-content,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .settings-panel,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .modal-container,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .detail-modal-content,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .favorites-modal,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .history-full-content,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .shortcut-modal,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .ark-shortcut-content {
    background: rgba(20,21,28,.96) !important;
    border-color: rgba(255,255,255,.14) !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) :is(#text2img-panel, #img2img-panel, #text2video-panel, #img2video-panel) .t2i-layout {
    background:
        radial-gradient(720px 300px at 96% 0%, rgba(23,113,96,.18), transparent 62%),
        radial-gradient(620px 260px at 0% 0%, rgba(129,108,255,.16), transparent 62%),
        linear-gradient(180deg, rgba(35,36,45,.84), rgba(16,17,23,.82)) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 28px 80px -44px rgba(0,0,0,.92) !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) :is(#text2img-panel, #img2img-panel, #text2video-panel, #img2video-panel) .t2i-left {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) :is(#text2img-panel, #img2img-panel, #text2video-panel, #img2video-panel) .t2i-right {
    background: rgba(10,11,16,.92) !important;
    border-color: rgba(255,255,255,.14) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 24px 70px -40px rgba(0,0,0,.95) !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) :is(#text2img-panel, #img2img-panel, #text2video-panel, #img2video-panel) .t2i-textarea,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) :is(#text2img-panel, #img2img-panel, #text2video-panel, #img2video-panel) textarea,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) :is(#text2img-panel, #img2img-panel, #text2video-panel, #img2video-panel) input {
    background: rgba(36,37,45,.92) !important;
    background-color: rgba(36,37,45,.92) !important;
    border-color: rgba(255,255,255,.15) !important;
    color: #f7f5ff !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.05) inset !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) :is(#text2img-panel, #img2img-panel, #text2video-panel, #img2video-panel) .t2i-select,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) :is(#text2img-panel, #img2img-panel, #text2video-panel, #img2video-panel) select,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) :is(#text2img-panel, #img2img-panel, #text2video-panel, #img2video-panel) .t2i-row:not(#i2vAudioRow) > .t2i-form-group > select.t2i-select,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) :is(#text2img-panel, #img2img-panel, #text2video-panel, #img2video-panel) .t2i-row:not(#i2vAudioRow) > .t2i-form-group > .t2i-select {
    background-color: rgba(36,37,45,.94) !important;
    background-image:
        linear-gradient(45deg, transparent 50%, rgba(247,245,255,.72) 50%),
        linear-gradient(135deg, rgba(247,245,255,.72) 50%, transparent 50%) !important;
    background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50% !important;
    background-size: 5px 5px, 5px 5px !important;
    background-repeat: no-repeat !important;
    border-color: rgba(255,255,255,.16) !important;
    color: #f7f5ff !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.05) inset !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) :is(#text2img-panel, #img2img-panel, #text2video-panel, #img2video-panel) .t2i-textarea:focus,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) :is(#text2img-panel, #img2img-panel, #text2video-panel, #img2video-panel) .t2i-select:focus,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) :is(#text2img-panel, #img2img-panel, #text2video-panel, #img2video-panel) textarea:focus,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) :is(#text2img-panel, #img2img-panel, #text2video-panel, #img2video-panel) select:focus {
    background-color: rgba(42,43,52,.98) !important;
    border-color: rgba(129,108,255,.72) !important;
    box-shadow: 0 0 0 3px rgba(129,108,255,.18), 0 1px 0 rgba(255,255,255,.06) inset !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) :is(#text2img-panel, #img2img-panel, #text2video-panel, #img2video-panel) .t2i-image-container {
    background:
        radial-gradient(620px 340px at 50% -8%, rgba(129,108,255,.16), transparent 64%),
        linear-gradient(180deg, rgba(9,10,15,.96), rgba(6,7,11,.96)) !important;
    border-color: rgba(255,255,255,.11) !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .mt-project-home,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .workflow-container,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel.wf-project-home-active,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel .wf-project-home,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .history-full-card,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .result-card,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .history-card,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .mt-project-card,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel .wf-project-card {
    background: rgba(22,23,30,.78) !important;
    border-color: rgba(255,255,255,.12) !important;
    color: #f7f5ff !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .history-full-content .history-full-card {
    background: rgba(21,22,29,.92) !important;
    border-color: rgba(255,255,255,.10) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.035) inset, 0 18px 46px -36px rgba(0,0,0,.96) !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .history-full-content .history-full-card .history-single-media,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .history-full-content .history-full-card .history-media-stack,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .history-full-content .history-full-card .history-media-tile,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .history-full-content .history-full-card img.history-lazy-media {
    background:
        radial-gradient(420px 180px at 50% 0%, rgba(129,108,255,.10), transparent 70%),
        rgba(12,13,18,.94) !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .history-full-content .history-full-card .history-full-meta {
    background: rgba(22,23,30,.94) !important;
    border-top-color: rgba(255,255,255,.07) !important;
    color: #f7f5ff !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .history-full-content .history-full-card .history-full-prompt {
    color: rgba(247,245,255,.88) !important;
    -webkit-text-fill-color: rgba(247,245,255,.88) !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .history-full-content .history-full-card .history-full-time {
    color: rgba(231,226,255,.48) !important;
    -webkit-text-fill-color: rgba(231,226,255,.48) !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .history-full-content .history-full-card .result-action-btn {
    background: rgba(35,36,44,.82) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    color: rgba(247,245,255,.82) !important;
    box-shadow: none !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .history-full-content .history-full-card .result-action-btn:hover {
    background: rgba(48,49,60,.96) !important;
    border-color: rgba(129,108,255,.35) !important;
    color: #fff !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .history-full-content .history-full-card .result-action-btn[title="重新生成"] {
    background: rgba(0,160,130,.22) !important;
    border-color: rgba(0,212,170,.26) !important;
    color: #8ff5dc !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .history-full-content .history-full-card .result-action-btn[title="删除"] {
    background: rgba(239,68,68,.18) !important;
    border-color: rgba(248,113,113,.24) !important;
    color: #ffa3a3 !important;
}

/* Workflow create-project modal: keep the same layout, only recolor for night mode. */
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #wfAddProjectModal.detail-modal {
    background: rgba(3,4,8,.72) !important;
    backdrop-filter: blur(14px) !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #wfAddProjectModal .wf-project-modal {
    background: rgba(20,21,28,.98) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    color: #f7f5ff !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 34px 90px -38px rgba(0,0,0,.96) !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #wfAddProjectModal .wf-project-modal-head,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #wfAddProjectModal .wf-project-modal-body {
    background: transparent !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #wfAddProjectModal .wf-project-modal-head {
    border-bottom-color: rgba(255,255,255,.10) !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #wfAddProjectModal .wf-project-modal-title,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #wfAddProjectModal .wf-project-label {
    color: #f7f5ff !important;
    -webkit-text-fill-color: #f7f5ff !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #wfAddProjectModal .wf-project-modal-sub {
    color: rgba(231,226,255,.64) !important;
    -webkit-text-fill-color: rgba(231,226,255,.64) !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #wfAddProjectModal .wf-project-input,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #wfAddProjectModal .wf-project-select,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #wfAddProjectModal .wf-project-textarea {
    background: rgba(36,37,45,.94) !important;
    border-color: rgba(255,255,255,.14) !important;
    color: #f7f5ff !important;
    -webkit-text-fill-color: #f7f5ff !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.05) inset !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #wfAddProjectModal .wf-project-input:focus,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #wfAddProjectModal .wf-project-select:focus,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #wfAddProjectModal .wf-project-textarea:focus {
    background: rgba(42,43,52,.98) !important;
    border-color: rgba(129,108,255,.72) !important;
    box-shadow: 0 0 0 3px rgba(129,108,255,.18), 0 1px 0 rgba(255,255,255,.06) inset !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #wfAddProjectModal .wf-project-select option {
    background: #151722 !important;
    color: #f7f5ff !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #wfAddProjectModal .wf-project-tip {
    background: rgba(129,108,255,.12) !important;
    border-color: rgba(129,108,255,.32) !important;
    color: rgba(231,226,255,.76) !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #wfAddProjectModal .wf-project-tip strong {
    color: #b9aeff !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #wfAddProjectModal .wf-project-modal-close,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #wfAddProjectModal .wf-project-cancel {
    background: rgba(24,25,33,.78) !important;
    border-color: rgba(255,255,255,.14) !important;
    color: rgba(247,245,255,.88) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.05) inset !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #wfAddProjectModal .wf-project-modal-close:hover,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #wfAddProjectModal .wf-project-cancel:hover {
    background: rgba(35,36,46,.96) !important;
    border-color: rgba(129,108,255,.40) !important;
    color: #fff !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #wfAddProjectModal .wf-project-submit {
    background: linear-gradient(135deg, #8d79ff, #654bff) !important;
    color: #fff !important;
    box-shadow: 0 16px 30px rgba(91,71,251,.28) !important;
}

/* Project management keeps the original folder-card layout; night mode only recolors it. */
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .mt-project-home {
    background:
        radial-gradient(620px 260px at 100% 0%, rgba(29,126,104,.16), transparent 64%),
        linear-gradient(180deg, rgba(24,25,32,.76), rgba(12,13,18,.74)) !important;
    border-color: rgba(255,255,255,.13) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 28px 90px -56px rgba(0,0,0,.96) !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .mt-project-card {
    background: rgba(31,32,40,.58) !important;
    border-color: rgba(255,255,255,.16) !important;
    color: #f7f5ff !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 16px 40px -34px rgba(0,0,0,.9) !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .mt-project-card.add {
    background: rgba(30,31,40,.46) !important;
    border-color: rgba(129,108,255,.36) !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .mt-project-folder-icon,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .mt-project-folder-icon::before {
    background: linear-gradient(180deg, rgba(183,197,216,.96), rgba(133,153,178,.92)) !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .mt-project-folder-icon {
    color: rgba(30,37,50,.95) !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .mt-project-card-title {
    color: #fff !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .mt-project-card-status,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) .mt-project-card-meta {
    color: rgba(231,226,255,.62) !important;
}

/* Generation pages: align prompt spacing and soften preview frames without changing layout. */
body.ui-polished-creator:not(.canvas-mode-active) :is(#text2img-panel, #img2img-panel, #text2video-panel, #img2video-panel) .t2i-form-group:has(> .t2i-textarea) {
    padding-top: 30px !important;
}
body.ui-polished-creator:not(.canvas-mode-active) :is(#text2img-panel, #img2img-panel, #text2video-panel, #img2video-panel) .t2i-form-group:has(> .t2i-textarea)::before {
    top: 0 !important;
    left: 0 !important;
    line-height: 1.2 !important;
}
body.ui-polished-creator:not(.canvas-mode-active) :is(#text2img-panel, #text2video-panel) .t2i-left > .t2i-form-group:has(> .t2i-textarea),
body.ui-polished-creator:not(.canvas-mode-active) :is(#img2img-panel, #img2video-panel) .t2i-form-group:has(> .t2i-textarea) {
    margin-top: 0 !important;
}
body.ui-polished-creator:not(.canvas-mode-active) :is(#img2img-panel, #img2video-panel) .upload-area-multi {
    margin-top: 30px !important;
}
body.ui-polished-creator:not(.canvas-mode-active) :is(#img2img-panel, #img2video-panel) .upload-area-multi::before {
    top: -30px !important;
    left: 0 !important;
    line-height: 1.2 !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) :is(#text2img-panel, #img2img-panel, #text2video-panel, #img2video-panel) .t2i-layout {
    background:
        radial-gradient(720px 300px at 96% 0%, rgba(23,113,96,.14), transparent 62%),
        radial-gradient(620px 260px at 0% 0%, rgba(129,108,255,.13), transparent 62%),
        linear-gradient(180deg, rgba(30,31,40,.80), rgba(15,16,22,.78)) !important;
    border-color: rgba(255,255,255,.075) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 28px 76px -48px rgba(0,0,0,.94) !important;
}
body.ui-polished-creator.day:not(.ark-night):not(.canvas-mode-active) :is(#text2img-panel, #img2img-panel, #text2video-panel, #img2video-panel) .t2i-layout {
    background:
        radial-gradient(720px 300px at 96% 0%, rgba(44,133,116,.08), transparent 62%),
        radial-gradient(620px 260px at 0% 0%, rgba(91,71,251,.08), transparent 62%),
        rgba(255,255,255,.78) !important;
    border-color: rgba(15,23,42,.075) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.85) inset, 0 28px 78px -58px rgba(15,23,42,.28) !important;
}
body.ui-polished-creator:not(.canvas-mode-active) :is(#text2img-panel, #img2img-panel, #text2video-panel, #img2video-panel) .t2i-left {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) :is(#text2img-panel, #img2img-panel, #text2video-panel, #img2video-panel) .t2i-textarea {
    background: rgba(35,36,44,.72) !important;
    border-color: rgba(255,255,255,.10) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.04) inset !important;
}
body.ui-polished-creator.day:not(.ark-night):not(.canvas-mode-active) :is(#text2img-panel, #img2img-panel, #text2video-panel, #img2video-panel) .t2i-textarea {
    border-color: rgba(15,23,42,.12) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.72) inset !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) :is(#text2img-panel, #img2img-panel, #text2video-panel, #img2video-panel) .t2i-select {
    border-color: rgba(255,255,255,.10) !important;
}
body.ui-polished-creator.day:not(.ark-night):not(.canvas-mode-active) :is(#text2img-panel, #img2img-panel, #text2video-panel, #img2video-panel) .t2i-select {
    border-color: rgba(15,23,42,.11) !important;
}
body.ui-polished-creator:not(.canvas-mode-active) :is(#text2img-panel, #img2img-panel, #text2video-panel, #img2video-panel) .t2i-right {
    border-radius: 10px !important;
    overflow: hidden !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) :is(#text2img-panel, #img2img-panel, #text2video-panel, #img2video-panel) .t2i-right {
    background: linear-gradient(180deg, rgba(10,11,16,.94), rgba(7,8,12,.96)) !important;
    border-color: rgba(255,255,255,.08) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.035) inset, 0 24px 70px -46px rgba(0,0,0,.98) !important;
}
body.ui-polished-creator.day:not(.ark-night):not(.canvas-mode-active) :is(#text2img-panel, #img2img-panel, #text2video-panel, #img2video-panel) .t2i-right {
    background: linear-gradient(180deg, #0c0d13, #08090d) !important;
    border-color: rgba(15,23,42,.16) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.045) inset, 0 24px 70px -52px rgba(15,23,42,.46) !important;
}
body.ui-polished-creator:not(.canvas-mode-active) :is(#text2img-panel, #img2img-panel, #text2video-panel, #img2video-panel) .t2i-preview-header {
    border-bottom-color: rgba(255,255,255,.06) !important;
}
body.ui-polished-creator:not(.canvas-mode-active) :is(#text2img-panel, #img2img-panel, #text2video-panel, #img2video-panel) .t2i-image-container {
    border: 0 !important;
    border-radius: 0 !important;
    background:
        radial-gradient(620px 340px at 50% -8%, rgba(129,108,255,.13), transparent 64%),
        linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px),
        linear-gradient(180deg, rgba(9,10,15,.98), rgba(6,7,11,.98)) !important;
    background-size: auto, 32px 32px, 32px 32px, auto !important;
    box-shadow: inset 0 0 76px rgba(0,0,0,.50) !important;
}
body.ui-polished-creator:not(.canvas-mode-active) :is(#text2img-panel, #img2img-panel, #text2video-panel, #img2video-panel) .ark-empty-tags span {
    border-color: rgba(255,255,255,.14) !important;
    background: rgba(255,255,255,.055) !important;
}

/* Night mode: keep upload/avatar surfaces from falling back to white cards. */
body.ui-polished-creator.ark-night:not(.canvas-mode-active) :is(#img2img-panel, #img2video-panel) .upload-area-multi {
    background:
        radial-gradient(520px 210px at 50% 0%, rgba(129,108,255,.13), transparent 70%),
        rgba(35,36,44,.72) !important;
    background-color: rgba(35,36,44,.72) !important;
    border-color: rgba(255,255,255,.12) !important;
    color: #f7f5ff !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.04) inset !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) :is(#img2img-panel, #img2video-panel) .upload-area-multi:hover,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) :is(#img2img-panel, #img2video-panel) .upload-area-multi.drag-over {
    background:
        radial-gradient(520px 210px at 50% 0%, rgba(129,108,255,.20), transparent 70%),
        rgba(42,43,52,.88) !important;
    border-color: rgba(129,108,255,.54) !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) :is(#img2img-panel, #img2video-panel) .upload-area-multi::before {
    color: rgba(231,226,255,.48) !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) :is(#img2img-panel, #img2video-panel) .upload-text,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) :is(#img2img-panel, #img2video-panel) .upload-icon {
    color: rgba(247,245,255,.92) !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) :is(#img2img-panel, #img2video-panel) .upload-text small {
    color: rgba(231,226,255,.58) !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) :is(#img2img-panel, #img2video-panel) .upload-multi-grid,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) :is(#img2img-panel, #img2video-panel) .upload-multi-item,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) :is(#img2img-panel, #img2video-panel) .upload-multi-add {
    background: rgba(14,15,22,.70) !important;
    border-color: rgba(255,255,255,.10) !important;
    color: #f7f5ff !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) :is(#img2img-panel, #img2video-panel) .upload-multi-add {
    border-style: dashed !important;
    border-color: rgba(129,108,255,.34) !important;
    background:
        radial-gradient(120px 90px at 50% 0%, rgba(129,108,255,.14), transparent 70%),
        rgba(16,17,24,.86) !important;
    color: #ff4ff0 !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.035) inset !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) :is(#img2img-panel, #img2video-panel) .upload-multi-add:hover {
    border-color: rgba(255,79,240,.56) !important;
    background:
        radial-gradient(120px 90px at 50% 0%, rgba(255,79,240,.16), transparent 70%),
        rgba(28,29,38,.94) !important;
    color: #ff6df3 !important;
}
body.ui-polished-creator :is(#img2img-panel, #img2video-panel) .upload-multi-remove[data-keep-icon] {
    font-size: 0 !important;
    line-height: 1 !important;
    text-indent: 0 !important;
}
body.ui-polished-creator :is(#img2img-panel, #img2video-panel) .upload-multi-remove[data-keep-icon]::before {
    content: attr(data-keep-icon);
    display: block;
    font-size: 15px;
    font-weight: 900;
    line-height: 1;
}

body.ui-polished-creator.ark-night:not(.canvas-mode-active) #asset-library-panel {
    color: #f7f5ff !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #asset-library-panel .asset-library-head,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #asset-library-panel .asset-status-tile,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #asset-library-panel .asset-library-card,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #asset-library-panel .asset-library-list {
    background:
        radial-gradient(560px 220px at 100% 0%, rgba(23,113,96,.12), transparent 64%),
        rgba(35,36,44,.76) !important;
    border-color: rgba(255,255,255,.12) !important;
    color: #f7f5ff !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 24px 64px -46px rgba(0,0,0,.92) !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #asset-library-panel .asset-library-head {
    background:
        radial-gradient(680px 260px at 100% 0%, rgba(23,113,96,.16), transparent 64%),
        radial-gradient(520px 220px at 0% 0%, rgba(129,108,255,.13), transparent 62%),
        rgba(35,36,44,.78) !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #asset-library-panel .asset-guide-card {
    background:
        radial-gradient(520px 220px at 0% 0%, rgba(129,108,255,.13), transparent 62%),
        rgba(15,23,42,.82) !important;
    border-color: rgba(255,255,255,.12) !important;
    color: #f7f5ff !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #asset-library-panel :is(.asset-library-head h2, .asset-status-tile strong, .asset-card-title, .asset-list-head > div, .asset-name, .history-image-label) {
    color: #f7f5ff !important;
    -webkit-text-fill-color: currentColor !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #asset-library-panel :is(.asset-library-kicker, .asset-guide-kicker, .asset-library-head p, .asset-card-desc, .asset-list-head small, .asset-status-tile em, .asset-field-label, .asset-upload-line em, .asset-meta span, .asset-empty) {
    color: rgba(231,226,255,.64) !important;
    -webkit-text-fill-color: currentColor !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #asset-library-panel :is(.asset-input, .asset-upload-line) {
    background: rgba(35,36,44,.92) !important;
    border-color: rgba(255,255,255,.13) !important;
    color: #f7f5ff !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.04) inset !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #asset-library-panel .asset-input::placeholder {
    color: rgba(231,226,255,.48) !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #asset-library-panel .asset-upload-line:hover {
    background: rgba(42,43,52,.96) !important;
    border-color: rgba(129,108,255,.52) !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #asset-library-panel :is(.asset-item, .asset-gallery-item, .asset-thumb, .asset-thumb img, .asset-status-thumb img) {
    background: rgba(14,15,22,.74) !important;
    border-color: rgba(255,255,255,.10) !important;
    color: #f7f5ff !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #asset-library-panel .asset-empty {
    background: rgba(14,15,22,.46) !important;
    border-color: rgba(255,255,255,.13) !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #asset-library-panel .asset-secondary-btn,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #asset-library-panel .asset-library-soft-btn,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #asset-library-panel .asset-actions button {
    background: rgba(24,25,33,.86) !important;
    border-color: rgba(255,255,255,.14) !important;
    color: #f7f5ff !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #asset-library-panel .asset-library-soft-btn:first-child,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #asset-library-panel .asset-actions button.primary {
    background: linear-gradient(135deg, #826cff, #1f7ae0) !important;
    border-color: rgba(255,255,255,.14) !important;
    color: #fff !important;
}

/* Night mode: make creation-page borders softer, closer to the compact mockup. */
body.ui-polished-creator.ark-night:not(.canvas-mode-active) :is(#text2img-panel, #img2img-panel, #text2video-panel, #img2video-panel) .t2i-layout {
    border-color: rgba(129,108,255,.10) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.026) inset, 0 28px 76px -52px rgba(0,0,0,.96) !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) :is(#text2img-panel, #img2img-panel, #text2video-panel, #img2video-panel) .t2i-textarea,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) :is(#text2img-panel, #img2img-panel, #text2video-panel, #img2video-panel) .t2i-select,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) :is(#text2img-panel, #img2img-panel, #text2video-panel, #img2video-panel) textarea,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) :is(#text2img-panel, #img2img-panel, #text2video-panel, #img2video-panel) select,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) :is(#text2img-panel, #img2img-panel, #text2video-panel, #img2video-panel) input {
    border-color: rgba(255,255,255,.07) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.025) inset !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) :is(#text2img-panel, #img2img-panel, #text2video-panel, #img2video-panel) .t2i-select,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) :is(#text2img-panel, #img2img-panel, #text2video-panel, #img2video-panel) select,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) :is(#text2img-panel, #img2img-panel, #text2video-panel, #img2video-panel) .t2i-row:not(#i2vAudioRow) > .t2i-form-group > select.t2i-select,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) :is(#text2img-panel, #img2img-panel, #text2video-panel, #img2video-panel) .t2i-row:not(#i2vAudioRow) > .t2i-form-group > .t2i-select {
    border-color: rgba(255,255,255,.07) !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) :is(#img2img-panel, #img2video-panel) .upload-area-multi,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) :is(#img2img-panel, #img2video-panel) .upload-multi-grid,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) :is(#img2img-panel, #img2video-panel) .upload-multi-item {
    border-color: rgba(255,255,255,.07) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.025) inset !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) :is(#text2img-panel, #img2img-panel, #text2video-panel, #img2video-panel) .t2i-right {
    border-color: rgba(255,255,255,.055) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.025) inset, 0 24px 70px -50px rgba(0,0,0,.98) !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) :is(#text2img-panel, #img2img-panel, #text2video-panel, #img2video-panel) .t2i-preview-header,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) :is(#text2img-panel, #img2img-panel, #text2video-panel, #img2video-panel) .t2i-actions {
    border-color: rgba(255,255,255,.045) !important;
    border-top-color: rgba(255,255,255,.045) !important;
    border-bottom-color: rgba(255,255,255,.045) !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) :is(#text2img-panel, #img2img-panel, #text2video-panel, #img2video-panel) .t2i-textarea:focus,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) :is(#text2img-panel, #img2img-panel, #text2video-panel, #img2video-panel) .t2i-select:focus,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) :is(#text2img-panel, #img2img-panel, #text2video-panel, #img2video-panel) textarea:focus,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) :is(#text2img-panel, #img2img-panel, #text2video-panel, #img2video-panel) select:focus {
    border-color: rgba(129,108,255,.50) !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #asset-library-panel :is(.asset-library-head, .asset-status-tile, .asset-library-card, .asset-guide-card, .asset-library-list, .asset-input, .asset-upload-line, .asset-item, .asset-gallery-item, .asset-thumb, .asset-empty, .asset-secondary-btn, .asset-library-soft-btn, .asset-actions button) {
    border-color: rgba(255,255,255,.075) !important;
}

/* Night mode: text/video audio row and sidebar modal pages. */
body.ui-polished-creator.ark-night:not(.canvas-mode-active) :is(#t2vAudioRow, #i2vAudioRow) {
    background: transparent !important;
    color: #f7f5ff !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) :is(#t2vAudioRow, #i2vAudioRow) > .t2i-form-group {
    background: transparent !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) :is(#t2vAudioRow, #i2vAudioRow) > .t2i-form-group > div[style] {
    background: rgba(35,36,44,.78) !important;
    background-color: rgba(35,36,44,.78) !important;
    border: 1px solid rgba(255,255,255,.075) !important;
    border-radius: 10px !important;
    color: #f7f5ff !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.025) inset !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) :is(#t2vAudioRow, #i2vAudioRow) label[style],
body.ui-polished-creator.ark-night:not(.canvas-mode-active) :is(#t2vAudioRow, #i2vAudioRow) span,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) :is(#t2vAudioRow, #i2vAudioRow) span * {
    color: rgba(247,245,255,.88) !important;
    -webkit-text-fill-color: currentColor !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) :is(#t2vAudioRow, #i2vAudioRow) b {
    color: #b9aeff !important;
    -webkit-text-fill-color: #b9aeff !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) :is(#t2vAudioRow, #i2vAudioRow) input[type="checkbox"] {
    accent-color: #826cff !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) :is(
    .favorites-content,
    .history-full-content,
    .settings-content,
    #settingsModal .settings-content,
    #arkMembershipModal .ark-modal-box,
    #arkHelpModal .ark-modal-box,
    #arkProfileModal .ark-modal-box,
    #arkComplianceModal .ark-modal-box
) {
    background:
        radial-gradient(620px 260px at 100% 0%, rgba(23,113,96,.13), transparent 64%),
        radial-gradient(520px 220px at 0% 0%, rgba(129,108,255,.12), transparent 62%),
        rgba(16,17,23,.96) !important;
    background-color: rgba(16,17,23,.96) !important;
    border-color: rgba(255,255,255,.075) !important;
    color: #f7f5ff !important;
    box-shadow: 0 28px 80px -42px rgba(0,0,0,.96) !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) :is(
    .favorites-content,
    .history-full-content,
    .settings-content,
    #arkMembershipModal,
    #arkHelpModal,
    #arkProfileModal,
    #arkComplianceModal
) :is(
    .settings-section,
    .settings-option,
    .history-full-card,
    .result-card,
    .empty-state,
    .ark-plan-card,
    .ark-membership-payment-panel,
    .ark-membership-service-card,
    .ark-membership-service-inner,
    .ark-help-member-card,
    .ark-help-section,
    .ark-faq-item,
    .ark-profile-stat,
    .ark-profile-info,
    .ark-recent-table,
    .template-tag
) {
    background: rgba(35,36,44,.72) !important;
    background-color: rgba(35,36,44,.72) !important;
    border-color: rgba(255,255,255,.075) !important;
    color: #f7f5ff !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.025) inset !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) :is(
    .favorites-content,
    .history-full-content,
    .settings-content,
    #arkMembershipModal,
    #arkHelpModal,
    #arkProfileModal,
    #arkComplianceModal
) :is(.history-header, .detail-modal-header, .ark-modal-header) {
    border-color: rgba(255,255,255,.075) !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) :is(
    .favorites-content,
    .history-full-content,
    .settings-content,
    #arkMembershipModal,
    #arkHelpModal,
    #arkProfileModal,
    #arkComplianceModal
) :is(h1, h2, h3, h4, strong, b, .history-title, .settings-section-title, .settings-option-label, .ark-help-member-card-title, .ark-membership-payment-title, .ark-membership-service-title, .ark-faq-q, .stat-num, .stat-label) {
    color: #f7f5ff !important;
    -webkit-text-fill-color: currentColor !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) :is(
    .favorites-content,
    .history-full-content,
    .settings-content,
    #arkMembershipModal,
    #arkHelpModal,
    #arkProfileModal,
    #arkComplianceModal
) :is(p, li, small, span, em, .history-full-time, .history-full-meta, .history-full-prompt, .ark-help-member-card-sub, .ark-membership-payment-desc, .ark-membership-payment-status, .ark-membership-service-meta, .ark-faq-a, .settings-section-title) {
    color: rgba(231,226,255,.66) !important;
    -webkit-text-fill-color: currentColor !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) :is(
    .favorites-content,
    .history-full-content,
    .settings-content,
    #arkMembershipModal,
    #arkHelpModal,
    #arkProfileModal,
    #arkComplianceModal
) :is([style*="background:#fff"], [style*="background: #fff"], [style*="background:white"], [style*="background: white"], [style*="background:rgba(255,255,255"], [style*="background: rgba(255,255,255"]) {
    background: rgba(35,36,44,.72) !important;
    background-color: rgba(35,36,44,.72) !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) :is(
    .favorites-content,
    .history-full-content,
    .settings-content,
    #arkMembershipModal,
    #arkHelpModal,
    #arkProfileModal,
    #arkComplianceModal
) :is(input, textarea, select, table, th, td) {
    background: rgba(24,25,33,.82) !important;
    border-color: rgba(255,255,255,.075) !important;
    color: #f7f5ff !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #arkMembershipModal {
    --ark-ink: #f7f5ff;
    --ark-muted: rgba(231,226,255,.68);
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #arkMembershipModal :is(
    .ark-modal-header h3,
    #arkMembershipBanner,
    #arkMembershipBanner div,
    .ark-plan-card,
    .ark-plan-card .plan-name,
    .ark-membership-service-card,
    .ark-membership-service-inner,
    .ark-membership-service-title,
    .ark-membership-payment-title,
    .ark-membership-payment-btn.secondary,
    [style*="font-weight:700"],
    [style*="font-weight:800"],
    [style*="font-weight: 700"],
    [style*="font-weight: 800"]
) {
    color: #f7f5ff !important;
    -webkit-text-fill-color: #f7f5ff !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #arkMembershipModal :is(
    .ark-plan-card .plan-features,
    .ark-plan-card .plan-price span,
    .ark-membership-payment-desc,
    .ark-membership-payment-status,
    .ark-membership-service-meta,
    #arkMembershipBanner [style*="color:rgba(255,255,255"],
    [style*="color:rgba(255,255,255,0.4"],
    [style*="color: rgba(255,255,255,0.4"],
    [style*="color:rgba(255,255,255,0.45"],
    [style*="color: rgba(255,255,255,0.45"],
    [style*="color:rgba(255,255,255,0.5"],
    [style*="color: rgba(255,255,255,0.5"]
) {
    color: rgba(231,226,255,.68) !important;
    -webkit-text-fill-color: rgba(231,226,255,.68) !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #arkMembershipModal .ark-plan-card .plan-price,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #arkMembershipModal #arkCurrentPlan,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #arkMembershipModal .ark-membership-service-wechat {
    color: #b9aeff !important;
    -webkit-text-fill-color: #b9aeff !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #arkMembershipModal .ark-membership-pay-choice,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #arkMembershipModal .ark-membership-pay-choice * {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #arkMembershipModal .ark-modal-close {
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
}

/* Workflow project workspace: night colors must win over older day-only project rules. */
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel:not(.wf-project-home-active) {
    background: transparent !important;
    border-color: rgba(255,255,255,.12) !important;
    color: #f7f5ff !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel .wf-workspace-shell,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel .wf-main-layout,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel .wf-result-panel,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel .wf-result-body,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel .wf-input-panel,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel .wf-chapter-panel,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel .wf-input-body,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel .wf-project-tree,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel .wf-script-summary-card,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel .wf-script-asset-card,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel .wf-shot-card,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel .wf-shotlist-card,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel .wf-char-card,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel .wf-sb-card,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel .wf-video-card {
    background: rgba(17,18,25,.78) !important;
    background-color: rgba(17,18,25,.78) !important;
    border-color: rgba(255,255,255,.10) !important;
    color: rgba(247,245,255,.90) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.035) inset, 0 18px 50px -40px rgba(0,0,0,.95) !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel .wf-result-body,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel .wf-input-body,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel .wf-project-tree {
    background: rgba(8,9,14,.54) !important;
    box-shadow: none !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel .wf-project-strip {
    background: rgba(19,20,28,.86) !important;
    background-color: rgba(19,20,28,.86) !important;
    border-top-color: rgba(255,255,255,.08) !important;
    border-bottom-color: rgba(255,255,255,.10) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.035) inset !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel .wf-topbar {
    background: rgba(17,18,25,.72) !important;
    background-color: rgba(17,18,25,.72) !important;
    border-color: rgba(255,255,255,.12) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 18px 50px -42px rgba(0,0,0,.95) !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel .wf-steps {
    background: transparent !important;
    border: 0 !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel .wf-steps > div:not(.wf-step) {
    color: rgba(231,226,255,.42) !important;
    -webkit-text-fill-color: rgba(231,226,255,.42) !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel .wf-step {
    background: rgba(38,39,49,.82) !important;
    background-color: rgba(38,39,49,.82) !important;
    border-color: rgba(255,255,255,.13) !important;
    color: rgba(231,226,255,.58) !important;
    -webkit-text-fill-color: currentColor !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.045) inset !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel .wf-step:hover {
    background: rgba(50,51,64,.96) !important;
    background-color: rgba(50,51,64,.96) !important;
    border-color: rgba(127,107,255,.38) !important;
    color: #f7f5ff !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel .wf-step.act {
    background: linear-gradient(135deg, #8b76ff, #5b47fb) !important;
    border-color: transparent !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    box-shadow: 0 14px 30px -20px rgba(96,70,255,.95) !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel .wf-step.done {
    background: rgba(25,80,68,.48) !important;
    background-color: rgba(25,80,68,.48) !important;
    border-color: rgba(74,222,128,.26) !important;
    color: rgba(156,246,203,.86) !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel .wf-step-num,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel .wf-input-step-num {
    background: rgba(127,107,255,.18) !important;
    background-color: rgba(127,107,255,.18) !important;
    border-color: rgba(127,107,255,.30) !important;
    color: #d8d2ff !important;
    -webkit-text-fill-color: currentColor !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel .wf-step.act .wf-step-num {
    background: rgba(255,255,255,.22) !important;
    background-color: rgba(255,255,255,.22) !important;
    border-color: rgba(255,255,255,.30) !important;
    color: #fff !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel .wf-project-chip,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel .wf-project-add-btn,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel .wf-btn-secondary,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel .wf-btn:not(.wf-btn-primary),
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel .wf-result-tab,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel .wf-feedback-tag,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel .style-option,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel .wf-tpl-btn,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel .wf-tl-item,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel .wf-tl-add,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel .wf-ib,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel .wf-card-icon-btn,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel .wf-shotlist-expand-btn {
    background: rgba(31,32,42,.88) !important;
    background-color: rgba(31,32,42,.88) !important;
    border-color: rgba(255,255,255,.13) !important;
    color: rgba(247,245,255,.86) !important;
    -webkit-text-fill-color: currentColor !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.045) inset !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel .wf-project-chip.active,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel .wf-result-tab.active {
    background: linear-gradient(135deg, #7f6bff, #5b47fb) !important;
    border-color: transparent !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    box-shadow: 0 12px 28px -20px rgba(96,70,255,.95) !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel .wf-project-chip:hover,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel .wf-btn-secondary:hover,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel .wf-btn:not(.wf-btn-primary):hover,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel .wf-result-tab:hover,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel .wf-feedback-tag:hover,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel .style-option:hover,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel .wf-tpl-btn:hover,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel .wf-tl-item:hover,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel .wf-tl-add:hover,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel .wf-ib:hover,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel .wf-card-icon-btn:hover,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel .wf-shotlist-expand-btn:hover {
    background: rgba(48,49,62,.96) !important;
    border-color: rgba(127,107,255,.42) !important;
    color: #fff !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel :is(
    .wf-panel-topbar,
    .wf-input-header,
    .wf-result-header,
    .wf-result-tabs,
    .wf-shot-section,
    .wf-shot-list,
    .wf-shotlist-toolbar,
    .wf-shotlist-assets-panel,
    .wf-shot-asset-group
) {
    background: transparent !important;
    border-color: rgba(255,255,255,.09) !important;
    color: rgba(247,245,255,.90) !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel :is(
    .wf-panel-topbar-label,
    .wf-input-header-title,
    .wf-input-step-label,
    .wf-label,
    .wf-script-summary-title,
    .wf-shot-section-title,
    .wf-shot-title,
    .wf-shotlist-title,
    .wf-shotlist-meta label,
    .wf-shotlist-fields label,
    .wf-shot-asset-group-title,
    .wf-asset-prompt-label,
    .wf-scene-prompt-label
) {
    color: #f7f5ff !important;
    -webkit-text-fill-color: #f7f5ff !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel .wf-char-name {
    color: #f7f5ff !important;
    -webkit-text-fill-color: #f7f5ff !important;
    font-weight: 800 !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel .wf-char-name > span {
    background: rgba(127,107,255,.18) !important;
    border: 1px solid rgba(127,107,255,.26) !important;
    color: #d8d2ff !important;
    -webkit-text-fill-color: currentColor !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel :is(
    .wf-empty-sub,
    .wf-project-strip-empty,
    .wf-project-chip-meta,
    .wf-script-summary-preview,
    .wf-script-asset-desc,
    .wf-shot-desc,
    .wf-shot-continuity,
    .wf-shotlist-sub,
    .wf-card-meta,
    .wf-sb-desc,
    .wf-char-desc,
    .wf-placeholder,
    #wfResultStatus,
    #wfScriptVersionStatus
) {
    color: rgba(231,226,255,.62) !important;
    -webkit-text-fill-color: rgba(231,226,255,.62) !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel :is(
    .wf-textarea,
    .wf-select,
    .wf-script-dropzone textarea,
    .wf-scene-title-input,
    .wf-scene-prompt-input,
    .wf-asset-prompt-input,
    .wf-shotlist-meta input,
    .wf-shotlist-meta select,
    .wf-shotlist-fields textarea,
    .wf-shotlist-editor-textarea,
    input,
    textarea,
    select
) {
    background: rgba(28,29,38,.94) !important;
    background-color: rgba(28,29,38,.94) !important;
    border-color: rgba(255,255,255,.13) !important;
    color: #f7f5ff !important;
    -webkit-text-fill-color: #f7f5ff !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.045) inset !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel :is(
    .wf-textarea,
    .wf-select,
    .wf-script-dropzone textarea,
    .wf-scene-title-input,
    .wf-scene-prompt-input,
    .wf-asset-prompt-input,
    .wf-shotlist-meta input,
    .wf-shotlist-meta select,
    .wf-shotlist-fields textarea,
    .wf-shotlist-editor-textarea,
    input,
    textarea,
    select
):focus {
    background: rgba(36,37,48,.98) !important;
    background-color: rgba(36,37,48,.98) !important;
    border-color: rgba(127,107,255,.64) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    box-shadow: 0 0 0 3px rgba(127,107,255,.18), 0 1px 0 rgba(255,255,255,.055) inset !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel :is(input, textarea, select)::placeholder {
    color: rgba(231,226,255,.42) !important;
    -webkit-text-fill-color: rgba(231,226,255,.42) !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel select option {
    background: #171922 !important;
    color: #f7f5ff !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel .wf-shot-chip,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel .wf-script-summary-pill,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel .wf-shot-index,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel .wf-shotlist-time {
    background: rgba(127,107,255,.18) !important;
    border-color: rgba(127,107,255,.28) !important;
    color: #d8d2ff !important;
    -webkit-text-fill-color: currentColor !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel .wf-shot-card:hover,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel .wf-shot-card.active,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel .wf-shotlist-card:hover,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel .wf-shotlist-card.active,
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel .wf-script-asset-card:hover {
    background: rgba(25,27,36,.94) !important;
    border-color: rgba(127,107,255,.34) !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel :is(
    [style*="background:#fff"],
    [style*="background: #fff"],
    [style*="background:white"],
    [style*="background: white"],
    [style*="background:rgba(255,255,255"],
    [style*="background: rgba(255,255,255"]
) {
    background: rgba(31,32,42,.88) !important;
    background-color: rgba(31,32,42,.88) !important;
}
body.ui-polished-creator.ark-night:not(.canvas-mode-active) #workflow-panel :is(
    [style*="color:#111827"],
    [style*="color: #111827"],
    [style*="color:#000"],
    [style*="color: #000"],
    [style*="color:black"],
    [style*="color: black"]
) {
    color: #f7f5ff !important;
    -webkit-text-fill-color: #f7f5ff !important;
}

/* Night mode: keep the main creator sidebar dark while the infinite canvas remains black. */
body.ui-polished-creator.ark-night.canvas-mode-active .sidebar {
    background:
        linear-gradient(180deg, rgba(13,14,20,.97) 0%, rgba(8,9,13,.96) 100%) !important;
    background-color: rgba(13,14,20,.97) !important;
    border-right-color: rgba(255,255,255,.08) !important;
    box-shadow: 1px 0 0 rgba(255,255,255,.04), 22px 0 64px -34px rgba(0,0,0,.95) !important;
    color: #f7f5ff !important;
}
body.ui-polished-creator.ark-night.canvas-mode-active.sidebar-revealed .sidebar,
body.ui-polished-creator.ark-night.canvas-mode-active.canvas-creator-sidebar-open .sidebar {
    box-shadow: 1px 0 0 rgba(255,255,255,.04), 24px 0 72px -34px rgba(0,0,0,.96) !important;
}
body.ui-polished-creator.ark-night.canvas-mode-active .sidebar-hover-zone {
    background: rgba(16,17,23,.96) !important;
    border-color: rgba(255,255,255,.10) !important;
    border-left: 0 !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.42) !important;
}
body.ui-polished-creator.ark-night.canvas-mode-active .logo-section,
body.ui-polished-creator.ark-night.canvas-mode-active .user-section,
body.ui-polished-creator.ark-night.canvas-mode-active .nav-section + .nav-section::before {
    border-color: rgba(255,255,255,.08) !important;
    background: transparent !important;
}
body.ui-polished-creator.ark-night.canvas-mode-active .nav-section + .nav-section::before {
    background: rgba(255,255,255,.08) !important;
}
body.ui-polished-creator.ark-night.canvas-mode-active .logo-text,
body.ui-polished-creator.ark-night.canvas-mode-active .user-name {
    color: #f7f5ff !important;
    -webkit-text-fill-color: #f7f5ff !important;
}
body.ui-polished-creator.ark-night.canvas-mode-active .logo-text::before {
    background: #7c5cff !important;
    box-shadow: 0 0 12px rgba(124,92,255,.72) !important;
}
body.ui-polished-creator.ark-night.canvas-mode-active .nav-section-title,
body.ui-polished-creator.ark-night.canvas-mode-active .user-status {
    color: rgba(231,226,255,.46) !important;
    -webkit-text-fill-color: rgba(231,226,255,.46) !important;
}
body.ui-polished-creator.ark-night.canvas-mode-active .nav-item,
body.ui-polished-creator.ark-night.canvas-mode-active .nav-item .nav-text,
body.ui-polished-creator.ark-night.canvas-mode-active .user-card {
    background: transparent !important;
    border-color: transparent !important;
    color: rgba(231,226,255,.72) !important;
    -webkit-text-fill-color: currentColor !important;
    box-shadow: none !important;
}
body.ui-polished-creator.ark-night.canvas-mode-active .nav-item:hover,
body.ui-polished-creator.ark-night.canvas-mode-active .user-card:hover {
    background: rgba(127,107,255,.13) !important;
    color: #f7f5ff !important;
}
body.ui-polished-creator.ark-night.canvas-mode-active .nav-item.active,
body.ui-polished-creator.ark-night.canvas-mode-active .nav-item.active:hover {
    background: linear-gradient(135deg, #826cff 0%, #583dff 100%) !important;
    color: #fff !important;
    box-shadow: 0 16px 34px -24px rgba(96,70,255,.95) !important;
}
body.ui-polished-creator.ark-night.canvas-mode-active .nav-item.active .nav-text {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}
body.ui-polished-creator.ark-night.canvas-mode-active .nav-badge,
body.ui-polished-creator.ark-night.canvas-mode-active .nav-item:not(.active) .nav-badge {
    background: rgba(127,107,255,.18) !important;
    color: #d6d0ff !important;
}
body.ui-polished-creator.ark-night.canvas-mode-active .nav-item.active .nav-badge {
    background: rgba(255,255,255,.20) !important;
    color: #fff !important;
}
body.ui-polished-creator.ark-night.canvas-mode-active .user-avatar {
    background: rgba(127,107,255,.18) !important;
    border-color: rgba(255,255,255,.10) !important;
    color: #c8c1ff !important;
}
body.ui-polished-creator.ark-night.canvas-mode-active .user-card i,
body.ui-polished-creator.ark-night.canvas-mode-active .nav-item i {
    color: rgba(231,226,255,.72) !important;
}

/* Night canvas: keep the sidebar reveal controls dark like the canvas project home. */
body.ui-polished-creator.ark-night.canvas-mode-active #canvas-panel .canvas-creator-sidebar-toggle,
body.canvas-black-locked #canvas-panel .canvas-creator-sidebar-toggle,
body.ui-polished-creator.ark-night.canvas-black-locked #canvas-panel .canvas-creator-sidebar-toggle {
    background: rgba(16,17,23,.96) !important;
    border-color: rgba(255,255,255,.10) !important;
    border-left: 0 !important;
    box-shadow: 8px 0 28px rgba(0,0,0,.42) !important;
}
body.ui-polished-creator.ark-night.canvas-mode-active #canvas-panel .canvas-creator-sidebar-toggle:hover,
body.canvas-black-locked #canvas-panel .canvas-creator-sidebar-toggle:hover,
body.ui-polished-creator.ark-night.canvas-black-locked #canvas-panel .canvas-creator-sidebar-toggle:hover {
    background: rgba(25,26,34,.98) !important;
    border-color: rgba(127,107,255,.28) !important;
    box-shadow: 10px 0 34px rgba(0,0,0,.48) !important;
}
body.ui-polished-creator.ark-night.canvas-mode-active #canvas-panel .canvas-creator-sidebar-toggle span,
body.canvas-black-locked #canvas-panel .canvas-creator-sidebar-toggle span,
body.ui-polished-creator.ark-night.canvas-black-locked #canvas-panel .canvas-creator-sidebar-toggle span {
    background: linear-gradient(180deg, #826cff, #6d56ff) !important;
    box-shadow: 0 0 18px rgba(127,107,255,.46) !important;
}
body.ui-polished-creator.ark-night.canvas-mode-active #canvas-panel .canvas-lib-rail-btn.add,
body.canvas-black-locked #canvas-panel .canvas-lib-rail-btn.add,
body.ui-polished-creator.ark-night.canvas-black-locked #canvas-panel .canvas-lib-rail-btn.add {
    background: rgba(16,17,23,.96) !important;
    color: #f7f5ff !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 10px 24px rgba(0,0,0,.24) !important;
}
body.ui-polished-creator.ark-night.canvas-mode-active #canvas-panel .canvas-lib-rail-btn.add:hover,
body.canvas-black-locked #canvas-panel .canvas-lib-rail-btn.add:hover,
body.ui-polished-creator.ark-night.canvas-black-locked #canvas-panel .canvas-lib-rail-btn.add:hover {
    background: rgba(127,107,255,.18) !important;
    color: #fff !important;
    border-color: rgba(127,107,255,.34) !important;
}

body.canvas-mode-active #canvas-panel .canvas-connection-cut-button {
    position: absolute !important;
    z-index: 1236 !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    display: none !important;
    place-items: center !important;
    padding: 0 !important;
    border: 1px solid rgba(255,255,255,.22) !important;
    border-radius: 999px !important;
    background: rgba(35,35,36,.94) !important;
    color: rgba(255,255,255,.94) !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-indent: 0 !important;
    box-shadow: 0 0 0 1px rgba(0,0,0,.30), 0 12px 28px rgba(0,0,0,.40) !important;
    cursor: pointer !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    backdrop-filter: blur(10px) !important;
}
body.canvas-mode-active #canvas-panel .canvas-connection-cut-button::before,
body.canvas-mode-active #canvas-panel .canvas-connection-cut-button::after {
    content: none !important;
    display: none !important;
}
body.canvas-mode-active #canvas-panel .canvas-connection-cut-button.show {
    display: grid !important;
    animation: canvasConnectionCutIn .12s ease-out both !important;
}
body.canvas-mode-active #canvas-panel .canvas-connection-cut-button:hover {
    border-color: rgba(255,255,255,.36) !important;
    background: rgba(47,47,49,.98) !important;
    color: #fff !important;
}
body.canvas-mode-active #canvas-panel .canvas-connection-cut-button svg {
    width: 23px !important;
    height: 23px !important;
    display: block !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.9 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    pointer-events: none !important;
}
@keyframes canvasConnectionCutIn {
    from {
        opacity: 0;
        transform: scale(.82);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

body.canvas-mode-active #canvas-panel .canvas-asset-manager-trigger {
    position: fixed !important;
    right: 18px !important;
    bottom: 18px !important;
    z-index: 1326 !important;
    width: auto !important;
    min-width: 112px !important;
    height: 40px !important;
    padding: 0 14px !important;
    gap: 8px !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 14px !important;
    background: rgba(38,38,38,.90) !important;
    color: rgba(255,255,255,.88) !important;
    box-shadow: 0 18px 42px rgba(0,0,0,.36) !important;
    backdrop-filter: blur(16px) !important;
    transition: right .24s cubic-bezier(.22,1,.36,1), background .16s ease, color .16s ease, transform .16s ease !important;
}
body.canvas-mode-active #canvas-panel .canvas-asset-manager-trigger > span:last-child {
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}
body.canvas-mode-active #canvas-panel .canvas-asset-manager-trigger:hover,
body.canvas-mode-active #canvas-panel .canvas-asset-manager-trigger.active {
    background: rgba(80,70,255,.92) !important;
    color: #fff !important;
}
body.canvas-mode-active.canvas-asset-manager-open #canvas-panel .canvas-asset-manager-trigger {
    display: none !important;
}
body.canvas-mode-active #canvas-panel .canvas-lib-icon.asset-manager {
    width: 18px;
    height: 18px;
    display: inline-grid;
    place-items: center;
    position: relative;
}
body.canvas-mode-active #canvas-panel .canvas-lib-icon.asset-manager::before {
    content: "";
    width: 14px;
    height: 14px;
    border: 1.8px solid currentColor;
    border-radius: 3px;
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.08);
}
body.canvas-mode-active #canvas-panel .canvas-lib-icon.asset-manager::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 1.8px;
    border-radius: 999px;
    background: currentColor;
    box-shadow: 0 -4px 0 currentColor, 0 4px 0 currentColor;
}
body.canvas-mode-active #canvas-panel .canvas-asset-manager-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1325;
    width: 306px;
    max-width: min(306px, calc(100vw - 44px));
    display: flex;
    flex-direction: column;
    color: rgba(255,255,255,.92);
    background: rgba(17,17,19,.96);
    border-left: 1px solid rgba(255,255,255,.10);
    box-shadow: -24px 0 54px rgba(0,0,0,.42);
    transform: translateX(104%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform .28s cubic-bezier(.22,1,.36,1), opacity .18s ease, visibility 0s linear .28s, box-shadow .28s ease;
    backdrop-filter: blur(20px);
}
body.canvas-mode-active.canvas-asset-manager-open #canvas-panel .canvas-asset-manager-panel {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: transform .28s cubic-bezier(.22,1,.36,1), opacity .18s ease, visibility 0s, box-shadow .28s ease;
}
body.canvas-mode-active #canvas-panel.canvas-project-home-open .canvas-asset-manager-panel,
body.canvas-mode-active #canvas-panel.canvas-project-home-open .canvas-asset-manager-trigger {
    display: none !important;
}
body.canvas-mode-active #canvas-panel .canvas-asset-manager-head {
    height: 58px;
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px 9px;
    border-bottom: 1px solid rgba(255,255,255,.10);
}
body.canvas-mode-active #canvas-panel .canvas-asset-manager-tabs {
    display: inline-flex;
    gap: 5px;
    padding: 3px;
    border-radius: 9px;
    background: rgba(255,255,255,.055);
}
body.canvas-mode-active #canvas-panel .canvas-asset-manager-tabs button,
body.canvas-mode-active #canvas-panel .canvas-asset-manager-close,
body.canvas-mode-active #canvas-panel .canvas-asset-manager-search-btn {
    border: 0;
    color: rgba(255,255,255,.82);
    background: transparent;
    cursor: pointer;
}
body.canvas-mode-active #canvas-panel .canvas-asset-manager-tabs button {
    height: 32px;
    padding: 0 12px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 900;
}
body.canvas-mode-active #canvas-panel .canvas-asset-manager-tabs button.active {
    color: #fff;
    background: rgba(255,255,255,.14);
}
body.canvas-mode-active #canvas-panel .canvas-asset-manager-close {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    font-size: 22px;
    line-height: 1;
}
body.canvas-mode-active #canvas-panel .canvas-asset-manager-close:hover,
body.canvas-mode-active #canvas-panel .canvas-asset-manager-search-btn:hover {
    background: rgba(255,255,255,.10);
    color: #fff;
}
body.canvas-mode-active #canvas-panel .canvas-asset-manager-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 12px 8px;
    color: rgba(255,255,255,.62);
}
body.canvas-mode-active #canvas-panel .canvas-asset-manager-toolbar strong {
    flex: 1;
    font-size: 13px;
    font-weight: 850;
    color: rgba(255,255,255,.62);
}
body.canvas-mode-active #canvas-panel .canvas-asset-manager-filter-wrap {
    position: relative;
    flex: 0 0 auto;
}
body.canvas-mode-active #canvas-panel .canvas-asset-manager-filter {
    min-width: 82px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 9px 0 11px;
    border: 1px solid rgba(255,255,255,.12);
    outline: none;
    border-radius: 8px;
    color: #fff;
    background: rgba(31,31,35,.96);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
    font-size: 13px;
    font-weight: 850;
    cursor: pointer;
}
body.canvas-mode-active #canvas-panel .canvas-asset-manager-filter:hover,
body.canvas-mode-active #canvas-panel .canvas-asset-manager-filter[aria-expanded="true"] {
    border-color: rgba(127,107,255,.45);
    background: rgba(37,36,44,.98);
}
body.canvas-mode-active #canvas-panel .canvas-asset-manager-filter i {
    width: 7px;
    height: 7px;
    border-right: 2px solid rgba(255,255,255,.78);
    border-bottom: 2px solid rgba(255,255,255,.78);
    transform: rotate(45deg) translateY(-2px);
}
body.canvas-mode-active #canvas-panel .canvas-asset-manager-filter-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 7px);
    z-index: 1342;
    width: 120px;
    padding: 6px;
    display: none;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 10px;
    background: rgba(27,27,29,.98);
    box-shadow: 0 18px 38px rgba(0,0,0,.38);
    backdrop-filter: blur(16px);
}
body.canvas-mode-active #canvas-panel .canvas-asset-manager-filter-menu.show {
    display: grid;
    gap: 2px;
}
body.canvas-mode-active #canvas-panel .canvas-asset-manager-filter-menu button {
    height: 34px;
    padding: 0 8px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: rgba(255,255,255,.86);
    cursor: pointer;
    text-align: left;
    font-size: 13px;
    font-weight: 850;
}
body.canvas-mode-active #canvas-panel .canvas-asset-manager-filter-menu button:hover,
body.canvas-mode-active #canvas-panel .canvas-asset-manager-filter-menu button.active {
    background: rgba(255,255,255,.10);
    color: #fff;
}
body.canvas-mode-active #canvas-panel .canvas-asset-manager-search-btn {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    font-size: 0;
    color: rgba(255,255,255,.90) !important;
    background: rgba(31,31,35,.96) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    -webkit-text-fill-color: currentColor !important;
}
body.canvas-mode-active #canvas-panel .canvas-asset-manager-search-btn:hover {
    background: rgba(255,255,255,.12) !important;
    color: #fff !important;
}
body.canvas-mode-active #canvas-panel .canvas-asset-manager-search-icon {
    width: 15px;
    height: 15px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.25;
    stroke-linecap: round;
    stroke-linejoin: round;
}
body.canvas-mode-active #canvas-panel .canvas-asset-manager-search {
    display: none;
    width: calc(100% - 24px) !important;
    height: 30px !important;
    box-sizing: border-box !important;
    margin: 0 12px 10px !important;
    padding: 0 10px !important;
    border: 1px solid rgba(255,255,255,.13) !important;
    border-radius: 8px !important;
    outline: none;
    color: #f7f5ff !important;
    -webkit-text-fill-color: #f7f5ff !important;
    background: rgba(28,29,34,.98) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 0 0 1px rgba(0,0,0,.16) !important;
    font-size: 13px !important;
    font-weight: 760 !important;
}
body.canvas-mode-active #canvas-panel .canvas-asset-manager-search::placeholder {
    color: rgba(231,226,255,.44) !important;
    -webkit-text-fill-color: rgba(231,226,255,.44) !important;
}
body.canvas-mode-active #canvas-panel .canvas-asset-manager-search:focus {
    border-color: rgba(127,107,255,.58) !important;
    background: rgba(33,34,40,.98) !important;
    box-shadow: 0 0 0 3px rgba(127,107,255,.16), inset 0 1px 0 rgba(255,255,255,.05) !important;
}
body.canvas-mode-active #canvas-panel .canvas-asset-manager-panel.search-open .canvas-asset-manager-search {
    display: block;
}
#canvasAssetManagerPanel .canvas-asset-manager-search-btn {
    width: 30px !important;
    height: 30px !important;
    position: relative !important;
    flex: 0 0 30px !important;
    display: inline-grid !important;
    place-items: center !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 8px !important;
    color: rgba(255,255,255,.9) !important;
    background: transparent !important;
    box-shadow: none !important;
    cursor: pointer !important;
    -webkit-text-fill-color: currentColor !important;
}
#canvasAssetManagerPanel .canvas-asset-manager-search-btn:hover {
    color: #fff !important;
    background: rgba(255,255,255,.08) !important;
}
#canvasAssetManagerPanel .canvas-asset-manager-search-btn::before {
    content: "" !important;
    position: absolute !important;
    left: 8px !important;
    top: 7px !important;
    width: 9px !important;
    height: 9px !important;
    border: 1.8px solid currentColor !important;
    border-radius: 999px !important;
    box-sizing: border-box !important;
}
#canvasAssetManagerPanel .canvas-asset-manager-search-btn::after {
    content: "" !important;
    position: absolute !important;
    left: 17px !important;
    top: 17px !important;
    width: 7px !important;
    height: 1.8px !important;
    border-radius: 999px !important;
    background: currentColor !important;
    transform: rotate(45deg) !important;
    transform-origin: left center !important;
}
#canvasAssetManagerPanel .canvas-asset-manager-search {
    width: calc(100% - 24px) !important;
    box-sizing: border-box !important;
    color: #f7f5ff !important;
    -webkit-text-fill-color: #f7f5ff !important;
    background: rgba(28,29,34,.98) !important;
}
body.canvas-mode-active #canvas-panel .canvas-asset-manager-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 4px 7px 12px;
    overscroll-behavior: contain;
}
body.canvas-mode-active #canvas-panel .canvas-asset-manager-list::-webkit-scrollbar {
    width: 7px;
}
body.canvas-mode-active #canvas-panel .canvas-asset-manager-list::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.28);
    border-radius: 999px;
}
body.canvas-mode-active #canvas-panel .canvas-asset-manager-item {
    width: 100%;
    min-height: 46px;
    display: grid;
    grid-template-columns: 36px minmax(0,1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border: 0;
    border-radius: 10px;
    color: rgba(255,255,255,.90);
    background: transparent;
    cursor: pointer;
    text-align: left;
    transition: background .14s ease, transform .14s ease;
}
body.canvas-mode-active #canvas-panel .canvas-asset-manager-item:hover,
body.canvas-mode-active #canvas-panel .canvas-asset-manager-item.active {
    background: rgba(255,255,255,.105);
}
body.canvas-mode-active #canvas-panel .canvas-asset-manager-item:active {
    transform: scale(.992);
}
body.canvas-mode-active #canvas-panel .canvas-asset-manager-thumb {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 8px;
    background: rgba(0,0,0,.45);
    border: 1px solid rgba(255,255,255,.10);
    color: rgba(255,255,255,.82);
    font-size: 16px;
    font-weight: 900;
}
body.canvas-mode-active #canvas-panel .canvas-asset-manager-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
body.canvas-mode-active #canvas-panel .canvas-asset-manager-thumb.video {
    position: relative;
}
body.canvas-mode-active #canvas-panel .canvas-asset-manager-thumb.video::after {
    content: "";
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 11px solid rgba(255,255,255,.92);
    filter: drop-shadow(0 1px 5px rgba(0,0,0,.42));
}
body.canvas-mode-active #canvas-panel .canvas-asset-manager-thumb.video.has-poster::after {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-40%, -50%);
}
body.canvas-mode-active #canvas-panel .canvas-asset-manager-copy {
    min-width: 0;
    display: grid;
    grid-template-rows: auto auto;
    align-content: center;
    gap: 2px;
    overflow: hidden;
}
body.canvas-mode-active #canvas-panel .canvas-asset-manager-title {
    display: block;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 13px;
    font-weight: 850;
    line-height: 1.35;
}
body.canvas-mode-active #canvas-panel .canvas-asset-manager-meta {
    display: block;
    min-width: 0;
    margin-top: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: rgba(255,255,255,.46);
    font-size: 11px;
    font-weight: 750;
    line-height: 1.3;
}
body.canvas-mode-active #canvas-panel .canvas-asset-manager-more {
    width: 28px;
    height: 28px;
    display: inline-grid;
    place-items: center;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: rgba(255,255,255,.46);
    font-size: 17px;
    line-height: 1;
    font-weight: 900;
    cursor: pointer;
}
body.canvas-mode-active #canvas-panel .canvas-asset-manager-more:hover,
body.canvas-mode-active #canvas-panel .canvas-asset-manager-more.active {
    background: rgba(255,255,255,.16);
    color: #fff;
}
body.canvas-mode-active #canvas-panel .canvas-asset-manager-node-menu {
    position: absolute;
    z-index: 1345;
    width: 156px;
    display: none;
    padding: 7px;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 12px;
    background: rgba(27,27,28,.98);
    box-shadow: 0 20px 48px rgba(0,0,0,.42);
    backdrop-filter: blur(16px);
}
body.canvas-mode-active #canvas-panel .canvas-asset-manager-node-menu.show {
    display: grid;
    gap: 2px;
}
body.canvas-mode-active #canvas-panel .canvas-asset-manager-node-menu button {
    height: 36px;
    padding: 0 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: rgba(255,255,255,.90);
    cursor: pointer;
    text-align: left;
    font-size: 13px;
    font-weight: 850;
}
body.canvas-mode-active #canvas-panel .canvas-asset-manager-node-menu button:hover {
    background: rgba(255,255,255,.11);
    color: #fff;
}
body.canvas-mode-active #canvas-panel .canvas-asset-manager-empty {
    margin: 18px 10px;
    padding: 18px 14px;
    border: 1px dashed rgba(255,255,255,.16);
    border-radius: 12px;
    color: rgba(255,255,255,.50);
    font-size: 13px;
    line-height: 1.6;
    text-align: center;
}
body.canvas-mode-active #canvas-panel .canvas-asset-manager-foot {
    height: 42px;
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 13px;
    border-top: 1px solid rgba(255,255,255,.10);
    color: rgba(255,255,255,.50);
    font-size: 12px;
    font-weight: 800;
}
body.canvas-mode-active #canvas-panel .canvas-asset-manager-collapse {
    width: 30px;
    height: 30px;
    position: relative;
    flex: 0 0 30px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 8px;
    color: rgba(255,255,255,.56);
    background: transparent;
    cursor: pointer;
}
body.canvas-mode-active #canvas-panel .canvas-asset-manager-collapse:hover {
    color: #fff;
    background: rgba(255,255,255,.10);
}
body.canvas-mode-active #canvas-panel .canvas-asset-manager-collapse::before {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
}
body.canvas-mode-active #canvas-panel .canvas-asset-manager-collapse::after {
    content: "";
    position: absolute;
    left: 8px;
    top: 14px;
    width: 13px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
}
@media (max-width: 720px) {
    body.canvas-mode-active #canvas-panel .canvas-asset-manager-panel {
        width: min(86vw, 306px);
    }
}

/* Keep the workspace sidebar mounted off-canvas, allowing the open and close actions to animate. */
body.canvas-mode-active:not(.canvas-project-home-active) .sidebar {
    display: flex !important;
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 268px !important;
    height: 100vh !important;
    z-index: 2147483600 !important;
    transform: translateX(-282px) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: transform .34s cubic-bezier(.22, 1, .36, 1), opacity .2s ease, visibility 0s linear .34s, box-shadow .34s cubic-bezier(.22, 1, .36, 1) !important;
    will-change: transform, opacity;
}
body.canvas-mode-active:not(.canvas-project-home-active).canvas-creator-sidebar-open .sidebar {
    transform: translateX(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: transform .34s cubic-bezier(.22, 1, .36, 1), opacity .2s ease, visibility 0s, box-shadow .34s cubic-bezier(.22, 1, .36, 1) !important;
}
body.canvas-mode-active:not(.canvas-project-home-active).canvas-creator-sidebar-open #canvas-panel .canvas-creator-sidebar-toggle {
    transform: translate(268px, -50%);
}

body.canvas-mode-active #canvas-panel .canvas-redraw-panel textarea.canvas-redraw-prompt,
body.canvas-mode-active #canvas-panel .canvas-redraw-panel textarea.canvas-redraw-prompt:focus,
body.canvas-mode-active #canvas-panel .canvas-redraw-panel textarea.canvas-redraw-prompt:active {
    color: rgba(255,255,255,.92) !important;
    -webkit-text-fill-color: rgba(255,255,255,.92) !important;
    caret-color: #fff !important;
}
body.canvas-mode-active #canvas-panel .canvas-redraw-panel textarea.canvas-redraw-prompt::placeholder,
body.canvas-mode-active #canvas-panel .canvas-redraw-panel textarea.canvas-redraw-prompt:focus::placeholder {
    color: rgba(255,255,255,.38) !important;
    -webkit-text-fill-color: rgba(255,255,255,.38) !important;
    opacity: 1 !important;
}
body.canvas-mode-active #canvas-panel .canvas-redraw-panel textarea.canvas-redraw-prompt::-webkit-input-placeholder {
    color: rgba(255,255,255,.38) !important;
    -webkit-text-fill-color: rgba(255,255,255,.38) !important;
    opacity: 1 !important;
}

body.canvas-mode-active #canvas-panel .canvas-stage {
    transform-origin: 0 0 !important;
    will-change: transform;
    backface-visibility: hidden;
    contain: layout style;
}
body.canvas-mode-active #canvas-panel .canvas-stage-wrap {
    overscroll-behavior: none;
    touch-action: none;
}
body.canvas-mode-active.canvas-lite-effects #canvas-panel .canvas-node {
    box-shadow: 0 8px 24px rgba(0,0,0,.28) !important;
}
body.canvas-mode-active.canvas-lite-effects #canvas-panel .canvas-node.selected {
    box-shadow: 0 0 0 2px rgba(183,255,241,.18), 0 10px 26px rgba(0,0,0,.30) !important;
}
body.canvas-mode-active.canvas-lite-effects #canvas-panel :is(
    .canvas-lib-media-toolbar,
    .canvas-lib-text-toolbar,
    .canvas-lib-script-table-toolbar,
    .canvas-media-edit-toolbar,
    .canvas-erase-toolbar,
    .canvas-lib-media-tool-menu,
    .canvas-node-gen-panel,
    .canvas-script-gen-panel,
    .canvas-add-node-menu,
    .canvas-context-menu,
    .canvas-lib-toolbox,
    .canvas-minimap,
    .canvas-multi-selection-toolbar,
    .canvas-asset-manager-panel,
    .canvas-asset-manager-filter-menu,
    .canvas-asset-manager-node-menu,
    .canvas-lib-bottom-bar
) {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.34) !important;
}
body.canvas-mode-active.canvas-lite-effects #canvas-panel :is(
    .canvas-link-path,
    .canvas-link-particle,
    .canvas-lib-video-option-icon,
    .canvas-connection-cut-button
) {
    filter: none !important;
}
body.canvas-mode-active:is(.canvas-interacting, .canvas-node-dragging, .canvas-connection-dragging) #canvas-panel * {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
}
body.canvas-mode-active:is(.canvas-interacting, .canvas-node-dragging, .canvas-connection-dragging) #canvas-panel :is(
    .canvas-lib-media-toolbar,
    .canvas-lib-text-toolbar,
    .canvas-lib-script-table-toolbar,
    .canvas-media-edit-toolbar,
    .canvas-erase-toolbar,
    .canvas-lib-media-tool-menu,
    .canvas-node-gen-panel,
    .canvas-script-gen-panel,
    .canvas-add-node-menu,
    .canvas-context-menu,
    .canvas-lib-toolbox,
    .canvas-minimap,
    .canvas-multi-selection-toolbar,
    .canvas-asset-manager-panel,
    .canvas-asset-manager-filter-menu,
    .canvas-asset-manager-node-menu,
    .canvas-lib-bottom-bar
) {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: 0 6px 18px rgba(0,0,0,.28) !important;
}
body.canvas-mode-active:is(.canvas-interacting, .canvas-node-dragging, .canvas-connection-dragging) #canvas-panel :is(
    .canvas-link-path,
    .canvas-link-particle,
    .canvas-lib-video-option-icon,
    .canvas-connection-cut-button
) {
    filter: none !important;
}

body.canvas-mode-active #canvas-panel .canvas-node:focus,
body.canvas-mode-active #canvas-panel .canvas-node:focus-visible,
body.canvas-mode-active #canvas-panel .canvas-node:focus-within,
body.canvas-mode-active #canvas-panel .canvas-node .canvas-lib-media-frame:focus,
body.canvas-mode-active #canvas-panel .canvas-node .canvas-lib-media-frame:focus-visible,
body.canvas-mode-active #canvas-panel .canvas-node .canvas-lib-media-content:focus,
body.canvas-mode-active #canvas-panel .canvas-node .canvas-lib-media-content:focus-visible {
    outline: none !important;
}

body.canvas-mode-active #canvas-panel .canvas-node .canvas-lib-media-frame:focus,
body.canvas-mode-active #canvas-panel .canvas-node .canvas-lib-media-frame:focus-visible,
body.canvas-mode-active #canvas-panel .canvas-node .canvas-lib-media-content:focus,
body.canvas-mode-active #canvas-panel .canvas-node .canvas-lib-media-content:focus-visible {
    box-shadow: none !important;
}

body.canvas-mode-active #canvas-panel .canvas-node.selected {
    border-color: rgba(255,255,255,.34) !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 18px 44px rgba(0,0,0,.40) !important;
}

body.canvas-mode-active.canvas-lite-effects #canvas-panel .canvas-node.selected {
    border-color: rgba(255,255,255,.30) !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,.10), 0 10px 26px rgba(0,0,0,.30) !important;
}

body.canvas-mode-active #canvas-panel .canvas-node.video.selected,
body.canvas-mode-active #canvas-panel .canvas-node.lib-image-node.selected,
body.canvas-mode-active #canvas-panel .canvas-node.lib-video-node.selected,
body.canvas-mode-active #canvas-panel .canvas-node.lib-media-node.selected {
    border-color: transparent !important;
    box-shadow: none !important;
}

body.canvas-mode-active #canvas-panel .canvas-node.video.selected .canvas-node-body,
body.canvas-mode-active #canvas-panel .canvas-node.video.selected video,
body.canvas-mode-active #canvas-panel .canvas-node.lib-media-node.selected .canvas-lib-image-frame,
body.canvas-mode-active #canvas-panel .canvas-node.lib-media-node.selected .canvas-lib-media-frame {
    border-color: rgba(255,255,255,.56) !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 16px 40px rgba(0,0,0,.32) !important;
}

.canvas-lib-view-tabs {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 10px;
    background: rgba(255,255,255,.035);
}
.canvas-lib-view-tabs button {
    min-width: 72px;
    height: 30px;
    padding: 0 14px;
    border: 0;
    border-radius: 7px;
    color: rgba(255,255,255,.58);
    background: transparent;
    font-size: 13px;
    cursor: pointer;
}
.canvas-lib-view-tabs button:hover { color: rgba(255,255,255,.88); }
.canvas-lib-view-tabs button.active {
    color: #fff;
    background: rgba(255,255,255,.11);
    box-shadow: 0 1px 8px rgba(0,0,0,.22);
}
.canvas-storyboard-panel {
    position: absolute;
    inset: 58px 0 0;
    z-index: 205;
    display: none;
    overflow: auto;
    padding: 28px 34px 40px;
    color: #f4f4f5;
    background: #111214;
}
body.canvas-mode-active.canvas-storyboard-view:not(.canvas-project-home-active) #canvas-panel .canvas-storyboard-panel { display: block; }
.canvas-storyboard-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin: 0 auto 22px;
    max-width: 1500px;
}
.canvas-storyboard-head > div { display: flex; align-items: baseline; gap: 12px; }
.canvas-storyboard-head strong { font-size: 24px; }
.canvas-storyboard-head span,
.canvas-storyboard-head p { color: rgba(255,255,255,.48); font-size: 12px; }
.canvas-storyboard-head p { margin: 0; }
.canvas-storyboard-columns {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    max-width: 1500px;
    margin: 0 auto;
}
.canvas-storyboard-column {
    min-height: 460px;
    padding: 14px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    background: rgba(255,255,255,.025);
}
.canvas-storyboard-column > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px 2px 12px;
}
.canvas-storyboard-column h3 { margin: 0; font-size: 15px; }
.canvas-storyboard-column header span {
    min-width: 24px;
    padding: 2px 7px;
    border-radius: 999px;
    color: rgba(255,255,255,.58);
    background: rgba(255,255,255,.08);
    text-align: center;
    font-size: 11px;
}
.canvas-storyboard-list { display: grid; gap: 10px; }
.canvas-storyboard-card {
    display: grid;
    width: 100%;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 11px;
    color: inherit;
    background: rgba(255,255,255,.035);
    text-align: left;
    cursor: pointer;
}
.canvas-storyboard-card:hover {
    border-color: rgba(167,255,226,.36);
    background: rgba(255,255,255,.06);
}
.canvas-storyboard-media { display: block; aspect-ratio: 16 / 9; background: #08090a; }
.canvas-storyboard-media img,
.canvas-storyboard-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.canvas-storyboard-card-copy { display: grid; gap: 5px; padding: 12px; }
.canvas-storyboard-card-copy strong { font-size: 13px; }
.canvas-storyboard-card-copy small {
    overflow: hidden;
    color: rgba(255,255,255,.50);
    font-size: 11px;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}
.canvas-storyboard-empty {
    display: grid;
    place-items: center;
    min-height: 160px;
    border: 1px dashed rgba(255,255,255,.09);
    border-radius: 10px;
    color: rgba(255,255,255,.34);
    font-size: 12px;
}
.canvas-connections-visibility-icon { font-size: 19px; line-height: 1; transform: rotate(-12deg); }

/* Project-scoped Agent sidebar. The panel is a client for the existing safe Agent module. */
.canvas-agent-top-button {
    height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 12px;
    border: 1px solid rgba(177,255,229,.24);
    border-radius: 10px;
    background: rgba(127,255,212,.09);
    color: #d9fff2;
    font-size: 12px;
    cursor: pointer;
}
.canvas-agent-top-button span { font-size: 15px; }
.canvas-agent-top-button b { font-weight: 850; }
.canvas-agent-top-button:hover,
.canvas-agent-top-button.active {
    border-color: rgba(177,255,229,.52);
    background: rgba(127,255,212,.17);
    color: #fff;
}
.canvas-agent-sidebar {
    --canvas-agent-sidebar-width: 430px;
    position: fixed;
    z-index: 1410;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--canvas-agent-sidebar-width);
    min-width: 350px;
    max-width: min(680px, 76vw);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: visible;
    border-left: 1px solid rgba(255,255,255,.10);
    background: rgba(17,18,20,.985);
    color: #f5f7f7;
    box-shadow: -24px 0 60px rgba(0,0,0,.34);
    transform: translateX(104%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform .28s cubic-bezier(.22,1,.36,1), opacity .18s ease, visibility 0s linear .28s;
}
#canvas-panel.canvas-agent-sidebar-open .canvas-agent-sidebar {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: transform .28s cubic-bezier(.22,1,.36,1), opacity .18s ease, visibility 0s;
}
#canvas-panel.canvas-project-home-open .canvas-agent-sidebar,
#canvas-panel.canvas-project-home-open .canvas-agent-top-button { display: none; }
.canvas-agent-resizer {
    position: absolute;
    left: -5px;
    top: 0;
    bottom: 0;
    width: 10px;
    cursor: col-resize;
    touch-action: none;
}
.canvas-agent-resizer::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: transparent;
}
.canvas-agent-resizer:hover::before { background: rgba(177,255,229,.46); }
.canvas-agent-sidebar-head {
    min-height: 62px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 14px 0 18px;
    border-bottom: 1px solid rgba(255,255,255,.09);
}
.canvas-agent-sidebar-head > div { display: flex; align-items: center; gap: 10px; min-width: 0; }
.canvas-agent-sidebar-mark {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    flex: 0 0 30px;
    border-radius: 9px;
    color: #07110e;
    background: linear-gradient(135deg,#d5fff2,#79eac5);
    box-shadow: 0 8px 20px rgba(74,222,170,.18);
}
.canvas-agent-sidebar-head strong,
.canvas-agent-sidebar-head small { display: block; }
.canvas-agent-sidebar-head strong { font-size: 14px; }
.canvas-agent-sidebar-head small {
    max-width: 210px;
    margin-top: 2px;
    overflow: hidden;
    color: rgba(255,255,255,.42);
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.canvas-agent-sidebar-head nav { display: flex; gap: 4px; }
.canvas-agent-sidebar-head nav button,
.canvas-agent-history-panel header button {
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: rgba(255,255,255,.58);
    font-size: 17px;
    cursor: pointer;
}
.canvas-agent-sidebar-head nav button:hover,
.canvas-agent-sidebar-head nav button.active,
.canvas-agent-history-panel header button:hover { color: #fff; background: rgba(255,255,255,.10); }
.canvas-agent-sidebar-body {
    min-height: 0;
    overflow: auto;
    padding: 18px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.18) transparent;
}
.canvas-agent-welcome { display: grid; justify-items: center; padding: 26px 2px 14px; text-align: center; }
.canvas-agent-welcome.hidden { display: none; }
.canvas-agent-orbit {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(177,255,229,.25);
    border-radius: 16px;
    color: #caffed;
    background: radial-gradient(circle at 35% 30%,rgba(177,255,229,.18),rgba(177,255,229,.035));
    font-size: 22px;
}
.canvas-agent-welcome h3 { margin: 15px 0 7px; font-size: 17px; }
.canvas-agent-welcome p { max-width: 340px; margin: 0; color: rgba(255,255,255,.48); font-size: 12px; line-height: 1.65; }
.canvas-agent-suggestions { width: 100%; display: grid; gap: 8px; margin-top: 22px; }
.canvas-agent-suggestions button {
    display: grid;
    gap: 4px;
    width: 100%;
    padding: 12px 13px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 11px;
    background: rgba(255,255,255,.035);
    color: #f3f5f5;
    text-align: left;
    cursor: pointer;
}
.canvas-agent-suggestions button:hover { border-color: rgba(177,255,229,.28); background: rgba(177,255,229,.055); }
.canvas-agent-suggestions strong { font-size: 12px; }
.canvas-agent-suggestions small { color: rgba(255,255,255,.42); font-size: 10px; }
.canvas-agent-messages { display: grid; gap: 12px; }
.canvas-agent-message { display: grid; gap: 6px; }
.canvas-agent-message.user { justify-items: end; }
.canvas-agent-message > div {
    max-width: 92%;
    padding: 10px 12px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 12px;
    background: rgba(255,255,255,.045);
    color: rgba(255,255,255,.86);
    font-size: 12px;
    line-height: 1.58;
    white-space: pre-wrap;
}
.canvas-agent-message.user > div { background: rgba(132,242,205,.13); border-color: rgba(132,242,205,.22); }
.canvas-agent-message small { color: rgba(255,255,255,.34); font-size: 10px; }
.canvas-agent-message-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.canvas-agent-message-actions button {
    min-height: 30px;
    padding: 0 10px;
    border: 1px solid rgba(177,255,229,.24);
    border-radius: 8px;
    background: rgba(177,255,229,.08);
    color: #d7fff2;
    font-size: 11px;
    cursor: pointer;
}
.canvas-agent-results {
    display: grid;
    gap: 9px;
    padding: 11px;
    border: 1px solid rgba(130,186,255,.16);
    border-radius: 12px;
    background: linear-gradient(145deg,rgba(130,186,255,.055),rgba(255,255,255,.025));
}
.canvas-agent-results > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.canvas-agent-results > header strong { font-size: 12px; }
.canvas-agent-results > header span { color: rgba(255,255,255,.42); font-size: 10px; }
.canvas-agent-results > div { display: grid; gap: 7px; }
.canvas-agent-result-card {
    display: grid;
    grid-template-columns: 48px minmax(0,1fr) auto;
    align-items: center;
    gap: 9px;
    min-height: 58px;
    padding: 6px;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 10px;
    background: rgba(255,255,255,.035);
    cursor: pointer;
}
.canvas-agent-result-card:hover { border-color: rgba(130,186,255,.28); background: rgba(130,186,255,.055); }
.canvas-agent-result-media {
    position: relative;
    width: 48px;
    height: 46px;
    overflow: hidden;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: rgba(0,0,0,.26);
}
.canvas-agent-result-media img,
.canvas-agent-result-media video { width: 100%; height: 100%; object-fit: cover; }
.canvas-agent-result-media em {
    position: absolute;
    left: 3px;
    right: 3px;
    bottom: 3px;
    padding: 2px 3px;
    border-radius: 4px;
    background: rgba(8,11,12,.82);
    color: #ffe2a7;
    font-size: 7px;
    font-style: normal;
    text-align: center;
}
.canvas-agent-result-kind { color: #b8d8ff; font-size: 17px; font-weight: 800; }
.canvas-agent-result-kind.audio { color: #caffed; font-size: 22px; }
.canvas-agent-result-copy { min-width: 0; display: grid; gap: 3px; }
.canvas-agent-result-copy strong,
.canvas-agent-result-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.canvas-agent-result-copy strong { color: rgba(255,255,255,.86); font-size: 11px; }
.canvas-agent-result-copy small { color: rgba(255,255,255,.38); font-size: 9px; }
.canvas-agent-result-actions { display: grid; gap: 4px; }
.canvas-agent-result-actions button {
    min-width: 42px;
    min-height: 23px;
    padding: 0 6px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 6px;
    background: rgba(255,255,255,.04);
    color: rgba(255,255,255,.62);
    font-size: 9px;
    cursor: pointer;
}
.canvas-agent-result-actions button:hover { color: #fff; border-color: rgba(130,186,255,.28); }
.canvas-agent-team-card {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(177,255,229,.16);
    border-radius: 12px;
    background: linear-gradient(145deg,rgba(177,255,229,.055),rgba(255,255,255,.025));
}
.canvas-agent-team-card > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.canvas-agent-team-card > header strong { font-size: 12px; }
.canvas-agent-team-card > header span,
.canvas-agent-team-card > p { margin: 0; color: rgba(255,255,255,.46); font-size: 10px; line-height: 1.5; }
.canvas-agent-team-card > ul { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.canvas-agent-team-card > ul li {
    display: grid;
    grid-template-columns: 8px minmax(0,1fr) auto;
    align-items: center;
    gap: 7px;
    min-height: 28px;
    padding: 0 8px;
    border-radius: 8px;
    background: rgba(255,255,255,.035);
    color: rgba(255,255,255,.78);
    font-size: 10px;
}
.canvas-agent-team-card > ul li i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.28); }
.canvas-agent-team-card > ul li.done i { background: #7ee7bd; }
.canvas-agent-team-card > ul li.running i { background: #82baff; box-shadow: 0 0 0 4px rgba(130,186,255,.10); }
.canvas-agent-team-card > ul li.error i { background: #ff8f8f; }
.canvas-agent-team-card > ul li small { color: rgba(255,255,255,.36); }
.canvas-agent-team-card > footer { display: flex; justify-content: flex-end; }
.canvas-agent-team-card > footer button {
    min-height: 31px;
    padding: 0 11px;
    border: 1px solid rgba(177,255,229,.25);
    border-radius: 8px;
    background: rgba(177,255,229,.09);
    color: #d7fff2;
    font-size: 10px;
    cursor: pointer;
}
.canvas-agent-team-card > footer button.danger { border-color: rgba(255,143,143,.25); background: rgba(255,143,143,.08); color: #ffd8d8; }
.canvas-agent-team-card.error { border-color: rgba(255,143,143,.24); }
.canvas-agent-composer {
    position: relative;
    display: grid;
    gap: 9px;
    padding: 12px 14px 14px;
    border-top: 1px solid rgba(255,255,255,.09);
    background: rgba(13,14,15,.98);
}
.canvas-agent-file-input { display: none !important; }
.canvas-agent-upload-status { display: none; min-height: 18px; color: rgba(255,255,255,.44); font-size: 10px; }
.canvas-agent-upload-status:not(:empty) { display: block; }
.canvas-agent-upload-status.uploading { color: #b8d8ff; }
.canvas-agent-upload-status.success { color: #9ce9ce; }
.canvas-agent-upload-status.error { color: #ffb2b2; }
.canvas-agent-composer textarea {
    width: 100%;
    min-height: 82px;
    max-height: 180px;
    resize: vertical;
    box-sizing: border-box;
    padding: 11px 12px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 11px;
    outline: none;
    background: rgba(255,255,255,.045);
    color: #f4f7f6;
    caret-color: #fff;
    font: inherit;
    font-size: 12px;
    line-height: 1.55;
}
.canvas-agent-composer textarea:focus { border-color: rgba(177,255,229,.42); box-shadow: 0 0 0 3px rgba(177,255,229,.06); }
.canvas-agent-composer textarea::placeholder { color: rgba(255,255,255,.30); }
.canvas-agent-composer-tools { display: flex; align-items: center; gap: 7px; min-width: 0; }
.canvas-agent-composer-tools > button,
.canvas-agent-composer-tools label,
.canvas-agent-route {
    min-height: 29px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 9px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 8px;
    background: rgba(255,255,255,.035);
    color: rgba(255,255,255,.62);
    font-size: 10px;
}
.canvas-agent-composer-tools > button { cursor: pointer; }
.canvas-agent-composer-tools > button:disabled { opacity: .45; cursor: wait; }
.canvas-agent-composer-tools > button:hover,
.canvas-agent-composer-tools > button.active { color: #e5fff6; border-color: rgba(177,255,229,.30); }
.canvas-agent-composer-tools label { flex: 1; min-width: 0; }
.canvas-agent-composer-tools select {
    min-width: 0;
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    color: #eff7f4;
    font: inherit;
}
.canvas-agent-route { flex: 0 0 auto; }
.canvas-agent-safety { display: flex; align-items: flex-start; gap: 7px; color: rgba(255,255,255,.42); font-size: 10px; line-height: 1.45; }
.canvas-agent-safety > span:first-child { color: #85e8c4; }
.canvas-agent-send {
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 12px 0 14px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(135deg,#caffed,#76e4bd);
    color: #07120e;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}
.canvas-agent-send:disabled { opacity: .42; cursor: wait; }
.canvas-agent-send b { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 7px; background: rgba(0,0,0,.10); }
.canvas-agent-reference-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.canvas-agent-reference-chips:empty { display: none; }
.canvas-agent-reference-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    padding: 4px 7px;
    border: 1px solid rgba(177,255,229,.18);
    border-radius: 999px;
    color: #d9fff2;
    background: rgba(177,255,229,.07);
    font-size: 10px;
}
.canvas-agent-reference-chip span { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.canvas-agent-reference-chip button { border: 0; padding: 0; background: transparent; color: rgba(255,255,255,.52); cursor: pointer; }
.canvas-agent-reference-picker,
.canvas-agent-history-panel {
    position: absolute;
    left: 12px;
    right: 12px;
    z-index: 4;
    display: none;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 12px;
    background: rgba(27,28,30,.99);
    box-shadow: 0 20px 52px rgba(0,0,0,.42);
}
.canvas-agent-reference-picker { bottom: calc(100% - 10px); max-height: min(430px, 55vh); padding: 10px; }
.canvas-agent-history-panel { top: 54px; bottom: 14px; left: 14px; right: 14px; z-index: 6; padding: 10px; }
.canvas-agent-reference-picker.show,
.canvas-agent-history-panel.show { display: grid; grid-template-rows: auto auto minmax(0,1fr); gap: 8px; }
.canvas-agent-history-panel.show { grid-template-rows: auto minmax(0,1fr); }
.canvas-agent-reference-picker header,
.canvas-agent-history-panel header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.canvas-agent-reference-picker header small { color: rgba(255,255,255,.38); }
.canvas-agent-reference-picker input {
    height: 34px;
    padding: 0 10px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 8px;
    outline: 0;
    background: rgba(255,255,255,.05);
    color: #fff;
}
#canvasAgentReferenceList,
#canvasAgentHistoryList { min-height: 0; display: grid; align-content: start; gap: 5px; overflow: auto; }
.canvas-agent-reference-row,
.canvas-agent-history-row {
    width: 100%;
    display: grid;
    gap: 3px;
    padding: 9px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: rgba(255,255,255,.84);
    text-align: left;
    cursor: pointer;
}
.canvas-agent-reference-row { grid-template-columns: 22px minmax(0,1fr) auto; align-items: center; }
.canvas-agent-reference-row:hover,
.canvas-agent-reference-row.selected,
.canvas-agent-history-row:hover { background: rgba(255,255,255,.075); }
.canvas-agent-reference-row small,
.canvas-agent-history-row small { color: rgba(255,255,255,.38); font-size: 10px; }
.canvas-agent-reference-row i { color: #9ce9ce; font-style: normal; }
.canvas-agent-history-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.canvas-agent-muted { padding: 16px 10px; color: rgba(255,255,255,.38); font-size: 11px; text-align: center; }
body.canvas-mode-active #canvas-panel.canvas-agent-sidebar-open .canvas-workspace,
body.canvas-mode-active #canvas-panel.canvas-agent-sidebar-open .canvas-stage-wrap {
    width: calc(100dvw - var(--canvas-agent-sidebar-active-width, 430px)) !important;
    min-width: 0 !important;
    max-width: calc(100dvw - var(--canvas-agent-sidebar-active-width, 430px)) !important;
}
body.canvas-mode-active #canvas-panel.canvas-agent-sidebar-open .canvas-lib-top {
    right: calc(var(--canvas-agent-sidebar-active-width, 430px) + 18px);
}
@media (max-width: 820px) {
    .canvas-agent-sidebar { --canvas-agent-sidebar-width: min(92vw, 430px); min-width: 0; max-width: 92vw; }
    body.canvas-mode-active #canvas-panel.canvas-agent-sidebar-open .canvas-workspace,
    body.canvas-mode-active #canvas-panel.canvas-agent-sidebar-open .canvas-stage-wrap { width: 100dvw !important; max-width: 100dvw !important; }
    body.canvas-mode-active #canvas-panel.canvas-agent-sidebar-open .canvas-lib-top { right: 18px; }
    .canvas-agent-resizer { display: none; }
    .canvas-agent-top-button b { display: none; }
}
@media (max-width: 900px) {
    .canvas-lib-view-tabs { left: 46%; }
    .canvas-storyboard-panel { padding: 22px 16px 34px; }
    .canvas-storyboard-head { align-items: flex-start; flex-direction: column; gap: 8px; }
    .canvas-storyboard-columns { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    body.canvas-mode-active:not(.canvas-project-home-active) .sidebar,
    .canvas-creator-sidebar-toggle,
    body.canvas-mode-active #canvas-panel * {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}