@import url("./shell.css");
@import url("../components/auth-modal.css");
@import url("../components/ui-select.css");

:is(
    .agent-use-btn,
    .workflow-use-btn,
    .workflow-projects-btn,
    .btn-primary,
    .btn-hero,
    .btn-cta-primary,
    .btn-cta-secondary,
    .cn-step4-action-btn,
    #cn-share-link-btn,
    #reset-scenes,
    #generate-scenes,
    #next-step,
    #step-1-next,
    #step-2-prev,
    #step-3-prev,
    #step-3-next,
    #step-4-prev,
    #step4-export-jianying,
    button[id^="step-"]
):not(.ui-btn-secondary):not(.ui-btn-soft):not(.ui-btn-success):not(.ui-btn-ghost) i {
    color: var(--button-primary-fg);
}

:is(.scope-workflow-draw, .scope-workflow-comic) select optgroup {
    background: var(--bg-elevated);
    color: var(--text-main);
}

:is(.scope-workflow-draw, .scope-workflow-comic) :is(input, textarea)::placeholder {
    color: var(--text-muted);
}

:is(.scope-workflow-draw, .scope-workflow-comic) select:hover {
    border-color: var(--brand-500);
    background: var(--bg-elevated);
}

:is(.scope-workflow-draw, .scope-workflow-comic) :is(input, textarea, select):focus {
    outline: none;
    border-color: var(--brand-500);
    box-shadow: var(--app-shell-focus-ring);
}



/* Keep white labels on primary auth buttons. */
:is(
    .app-topbar .app-topbar-user > a.bg-blue-700.text-white,
    #modalLoginForm button[type="submit"],
    #modalRegisterForm button[type="submit"]
) {
    color: var(--button-primary-fg);
}

:is(.scope-workflow-draw, .scope-workflow-comic) :is(
    .bg-blue-500\/10,
    .bg-blue-500\/20,
    .bg-purple-500\/10,
    .bg-purple-500\/20,
    .bg-green-500\/10,
    .bg-green-500\/20,
    .bg-yellow-500\/20,
    .bg-orange-500\/10,
    .bg-red-500\/10
) {
    background-color: var(--brand-soft);
}

:is(.scope-workflow-draw, .scope-workflow-comic) :is(
    .hover\:bg-blue-700:hover,
    .hover\:bg-blue-600:hover,
    .hover\:bg-indigo-700:hover,
    .hover\:bg-indigo-600:hover,
    .hover\:bg-green-700:hover,
    .hover\:bg-green-600:hover,
    .hover\:bg-purple-700:hover,
    .hover\:bg-purple-600:hover,
    .hover\:bg-red-700:hover,
    .hover\:bg-red-600:hover
) {
    background-color: var(--brand-600);
}

:is(.scope-workflow-draw, .scope-workflow-comic) :is(
    .text-blue-400,
    .text-blue-500,
    .text-blue-600,
    .text-indigo-400,
    .text-purple-400,
    .text-purple-500,
    .text-green-400,
    .text-yellow-400,
    .text-orange-400
) {
    color: var(--brand-500);
}

:is(.scope-workflow-draw, .scope-workflow-comic) :is(
    .border-blue-500,
    .border-blue-400,
    .border-indigo-500,
    .border-purple-500,
    .border-green-500
) {
    border-color: var(--brand-500);
}

:is(.scope-workflow-draw, .scope-workflow-comic) :is(
    .focus\:ring-blue-500:focus,
    .focus\:ring-indigo-500:focus,
    .focus\:ring-purple-500:focus
) {
    --tw-ring-color: rgba(37, 99, 235, 0.28);
}

:is(
    .agent-use-btn,
    #submitBtn,
    .workflow-use-btn,
    .workflow-projects-btn,
    .batch-action-btn-primary,
    .btn-primary,
    .btn-hero,
    .btn-cta-primary,
    .btn-cta-secondary,
    .cn-step4-action-btn,
    #cn-share-link-btn,
    #reset-scenes,
    #generate-scenes,
    #next-step,
    #step-1-next,
    #step-2-prev,
    #step-3-prev,
    #step-3-next,
    #step-4-prev,
    #step4-export-jianying,
    button[id^="step-"]
):not(.ui-btn-secondary):not(.ui-btn-soft):not(.ui-btn-success):not(.ui-btn-ghost) {
    background-image: none;
    background-color: var(--brand-500);
    border: 1px solid var(--brand-600);
    color: var(--button-primary-fg);
    box-shadow: none;
}

:is(
    .agent-use-btn,
    #submitBtn,
    .workflow-use-btn,
    .workflow-projects-btn,
    .batch-action-btn-primary,
    .cn-step4-action-btn,
    #cn-share-link-btn,
    #reset-scenes,
    #generate-scenes,
    #next-step,
    #step-1-next,
    #step-2-prev,
    #step-3-prev,
    #step-3-next,
    #step-4-prev,
    #step4-export-jianying,
    button[id^="step-"]
):not(.ui-btn-secondary):not(.ui-btn-soft):not(.ui-btn-success):not(.ui-btn-ghost):hover {
    background-color: var(--brand-600);
    transform: none;
}

.btn-secondary,
.batch-action-btn-muted {
    background: var(--bg-surface-2);
    border: 1px solid var(--border-main);
    color: var(--text-strong);
}

.btn-secondary:hover,
.batch-action-btn-muted:hover {
    background: var(--bg-elevated);
    border-color: var(--brand-500);
    color: var(--brand-500);
}

.btn-secondary i,
.batch-action-btn-muted i {
    color: inherit;
}

#clearBtn {
    background: var(--bg-surface-2);
    border: 1px solid var(--border-main);
    color: var(--text-strong);
}

#clearBtn:hover {
    background: var(--bg-elevated);
    border-color: var(--brand-500);
    color: var(--brand-500);
}

#logoutBtn,
.text-red-400,
.hover\:text-red-300:hover {
    color: var(--danger-500);
}

.scope-workflow-comic.cn-shell {
    background: var(--bg-canvas);
    color: var(--text-main);
}

.scope-workflow-comic .cn-topbar,
.scope-workflow-comic #smartwizard.cn-wizard-shell,
.scope-workflow-comic .cn-card,
.scope-workflow-comic .cn-toolbar,
.scope-workflow-comic .scene-card,
.scope-workflow-comic .cn-table-wrap,
.scope-workflow-comic .cn-step4-toolbar,
.scope-workflow-comic .cn-media-item,
.scope-workflow-comic .cn-media-preview-dialog,
.scope-workflow-comic .cn-jianying-export-dialog {
    background: var(--bg-surface);
    border-color: var(--border-main);
    color: var(--text-main);
    box-shadow: var(--shadow-sm);
}

.scope-workflow-comic #smartwizard .nav::before,
.scope-workflow-comic #smartwizard .nav .nav-item:not(:last-child)::after {
    background: var(--border-main);
    opacity: 0.45;
}

.scope-workflow-comic #smartwizard .nav .nav-link {
    background: var(--bg-elevated);
    border-color: var(--border-main);
    color: var(--text-main);
}

.scope-workflow-comic #smartwizard .nav .nav-link .num {
    background: var(--bg-surface-2);
    color: var(--text-main);
}

.scope-workflow-comic #smartwizard .nav .nav-link.active {
    background: var(--brand-500);
    border-color: var(--brand-600);
    color: var(--button-primary-fg);
}

.scope-workflow-comic #smartwizard .nav .nav-link.active .step-title,
.scope-workflow-comic #smartwizard .nav .nav-link.active i {
    color: var(--button-primary-fg);
}

.scope-workflow-comic #smartwizard .nav .nav-link.active .num {
    background: var(--button-primary-fg);
    color: var(--brand-600);
}

.scope-workflow-comic #smartwizard .progress {
    background: var(--bg-surface-2);
}

.scope-workflow-comic #smartwizard .progress .progress-bar {
    background: var(--brand-500);
    box-shadow: none;
    animation: none;
}

.scope-workflow-comic .upload-area,
.scope-workflow-comic .cn-dropzone,
.scope-workflow-comic .cn-empty,
.scope-workflow-comic #local-split-config input,
.scope-workflow-comic #smartwizard input,
.scope-workflow-comic #smartwizard textarea,
.scope-workflow-comic #smartwizard select {
    background: var(--bg-elevated);
    border-color: var(--border-main);
    color: var(--text-main);
}

.scope-workflow-comic #smartwizard input:focus,
.scope-workflow-comic #smartwizard textarea:focus,
.scope-workflow-comic #smartwizard select:focus,
.scope-workflow-comic #local-split-config input:focus {
    border-color: var(--brand-500);
    box-shadow: var(--app-shell-focus-ring);
}

.scope-workflow-comic .timeline-item.active,
.scope-workflow-comic .subtitle-item:hover,
.scope-workflow-comic .cn-scene-row-selected td,
.scope-workflow-comic .cn-media-item.is-selected {
    background: var(--brand-soft);
    border-color: var(--brand-500);
    color: var(--text-strong);
    box-shadow: none;
}

.scope-workflow-comic .cn-card:hover,
.scope-workflow-comic .cn-toolbar:hover,
.scope-workflow-comic .scene-card:hover,
.scope-workflow-comic .cn-media-item:hover {
    background: var(--comic-card-hover-bg);
    border-color: var(--comic-card-hover-border);
}


/* 解说漫主题收口到 token。 */
.cn-share-page .cn-topbar #project-name {
    color: var(--comic-share-project-name);
}

.cn-share-page .cn-topbar .inline-flex.items-center.rounded-full {
    background: var(--comic-share-badge-bg);
    border-color: var(--comic-share-badge-border);
    color: var(--comic-share-badge-text);
}

.scope-workflow-comic .cn-jianying-export-title {
    color: var(--comic-export-title);
}

.scope-workflow-comic .cn-jianying-export-label {
    color: var(--comic-export-label);
}

.scope-workflow-comic .cn-jianying-export-hint {
    color: var(--comic-export-hint);
}

.scope-workflow-comic .cn-jianying-export-input {
    background: var(--comic-export-input-bg);
    border-color: var(--comic-export-input-border);
    color: var(--comic-export-input-text);
}

.scope-workflow-comic .cn-jianying-export-input::placeholder {
    color: var(--comic-export-input-placeholder);
    opacity: 1;
}

.scope-workflow-comic .cn-jianying-export-input[readonly] {
    background: var(--comic-export-input-readonly-bg);
    color: var(--comic-export-input-readonly-text);
}

.scope-workflow-comic .cn-jianying-export-cancel-btn {
    color: var(--comic-export-cancel-text);
    border-color: var(--comic-export-cancel-border);
    background: var(--comic-export-cancel-bg);
}

.scope-workflow-comic .cn-jianying-export-cancel-btn:hover {
    color: var(--comic-export-cancel-hover-text);
    border-color: var(--comic-export-cancel-hover-border);
    background: var(--comic-export-cancel-hover-bg);
}

.scope-workflow-comic #smartwizard input,
.scope-workflow-comic #smartwizard select,
.scope-workflow-comic #smartwizard textarea,
.scope-workflow-comic #local-split-config input {
    background: var(--comic-form-control-bg) !important;
    border: 1px solid var(--comic-form-control-border) !important;
    color: var(--comic-form-control-text) !important;
    color-scheme: inherit !important;
}

.scope-workflow-comic #smartwizard input:focus,
.scope-workflow-comic #smartwizard select:focus,
.scope-workflow-comic #smartwizard textarea:focus,
.scope-workflow-comic #local-split-config input:focus {
    background: var(--comic-form-control-focus-bg) !important;
    border-color: var(--comic-form-control-focus-border) !important;
    box-shadow: 0 0 0 2px var(--comic-form-control-focus-ring) !important;
}

.scope-workflow-comic #smartwizard select option {
    background: var(--comic-form-option-bg) !important;
    color: var(--comic-form-option-text) !important;
}

.scope-workflow-comic #smartwizard select option:checked {
    background: var(--comic-form-option-checked-bg) !important;
    color: var(--comic-form-option-checked-text) !important;
}

.scope-workflow-comic .upload-area,
.scope-workflow-comic .cn-dropzone,
.scope-workflow-comic .cn-empty,
.scope-workflow-comic #subtitle-preview-content,
.scope-workflow-comic .subtitle-stats,
.scope-workflow-comic #subtitle-summary,
.scope-workflow-comic .scene-card,
.scope-workflow-comic .scene-subtitles,
.scope-workflow-comic .subtitle-item {
    background: var(--comic-surface-bg) !important;
    border-color: var(--comic-surface-border) !important;
}

.scope-workflow-comic .subtitle-item:hover,
.scope-workflow-comic .scene-card:hover {
    background: var(--comic-surface-hover-bg) !important;
    border-color: var(--comic-surface-hover-border) !important;
}

.scope-workflow-comic .subtitle-text,
.scope-workflow-comic .scene-time,
.scope-workflow-comic .timeline-text,
.scope-workflow-comic .timeline-time,
.scope-workflow-comic .scene-subtitle-count {
    color: var(--comic-surface-text-muted) !important;
}

.scope-workflow-comic #step-4 .cn-step4-table-wrap {
    background: var(--comic-step4-wrap-bg);
    border-color: var(--comic-step4-wrap-border);
    box-shadow: var(--comic-step4-wrap-shadow);
}

.scope-workflow-comic #step-4 .cn-scene-table thead {
    background: var(--comic-step4-thead-bg);
}

.scope-workflow-comic #step-4 .cn-scene-table thead th {
    color: var(--comic-step4-thead-text);
    border-bottom-color: var(--comic-step4-wrap-border);
}

.scope-workflow-comic #step-4 .cn-scene-row {
    background: var(--comic-step4-row-bg);
}

.scope-workflow-comic #step-4 .cn-scene-row:hover {
    background: var(--comic-step4-row-hover-bg);
}

.scope-workflow-comic #step-4 .cn-scene-row td {
    border-bottom-color: var(--comic-step4-row-border);
}

.scope-workflow-comic #step-4 .cn-scene-table td[data-col="image"] .cn-media-list,
.scope-workflow-comic #step-4 .cn-scene-table td[data-col="video"] .cn-media-list {
    background: var(--comic-step4-media-list-bg);
    border: 1px solid var(--comic-step4-media-list-border);
    box-shadow: var(--comic-step4-media-list-shadow);
}

.scope-workflow-comic .cn-media-item,
.scope-workflow-comic .cn-media-video-item {
    background: var(--comic-media-bg);
    border-color: var(--comic-media-border);
    box-shadow: var(--comic-media-shadow);
}

.scope-workflow-comic .cn-media-item:hover,
.scope-workflow-comic .cn-media-video-item:hover,
.scope-workflow-comic .cn-media-item:focus-within,
.scope-workflow-comic .cn-media-video-item:focus-within {
    border-color: var(--comic-media-hover-border);
    box-shadow: var(--comic-media-hover-shadow);
}

.scope-workflow-comic .cn-media-item-upload {
    border-style: dashed;
    border-color: var(--comic-media-upload-border);
    background: var(--comic-media-upload-bg);
}

.scope-workflow-comic .cn-media-upload-trigger {
    color: var(--comic-media-upload-trigger);
}

.scope-workflow-comic .cn-media-item-upload:hover .cn-media-upload-trigger {
    background: var(--comic-media-upload-trigger-hover-bg);
    color: var(--comic-media-upload-trigger-hover-text);
}

.scope-workflow-comic .cn-media-item-upload-combined .cn-media-combined-btn {
    background: var(--comic-media-combined-bg);
    border-color: var(--comic-media-combined-border);
    color: var(--comic-media-combined-text);
}

.scope-workflow-comic .cn-media-item-upload-combined .cn-media-combined-btn:hover {
    background: var(--comic-media-combined-hover-bg);
    border-color: var(--comic-media-combined-hover-border);
    color: var(--comic-media-combined-hover-text);
}

.scope-workflow-comic .cn-media-item-upload-combined .cn-media-generate-trigger {
    background: var(--comic-media-generate-combined-bg);
    border-color: var(--comic-media-generate-combined-border);
    color: var(--comic-media-generate-combined-text);
}

.scope-workflow-comic .cn-media-item-generate-image {
    border-color: var(--comic-media-generate-image-border);
    background: var(--comic-media-generate-image-bg);
}

.scope-workflow-comic .cn-media-item-generate-video {
    border-color: var(--comic-media-generate-video-border);
    background: var(--comic-media-generate-video-bg);
}

.scope-workflow-comic .cn-media-item-generate .cn-media-generate-trigger {
    color: var(--comic-media-generate-text);
}

.scope-workflow-comic .cn-media-item.is-selected,
.scope-workflow-comic .cn-media-video-item.is-selected {
    background: var(--comic-media-selected-bg);
    border-color: var(--comic-media-selected-border);
    box-shadow: var(--comic-media-selected-shadow);
}

.scope-workflow-comic .cn-media-thumb,
.scope-workflow-comic .cn-media-video-item .cn-media-thumb-video {
    background: var(--comic-media-thumb-bg);
}

.scope-workflow-comic .cn-media-overlay {
    background: color-mix(in srgb, var(--overlay) 72%, transparent);
}

.scope-workflow-comic .cn-media-icon-btn {
    background: var(--comic-media-icon-bg);
    border-color: var(--comic-media-icon-border);
    color: var(--comic-media-icon-text);
    box-shadow: var(--comic-media-icon-shadow);
}

.scope-workflow-comic .cn-media-icon-btn:hover {
    background: var(--comic-media-icon-hover-bg);
    border-color: var(--comic-media-icon-hover-border);
    color: var(--comic-media-icon-hover-text);
}

.scope-workflow-comic .cn-media-icon-btn.is-active {
    background: var(--comic-media-icon-active-bg);
    border-color: var(--comic-media-icon-active-border);
    color: var(--comic-media-icon-active-text);
}

.scope-workflow-comic .cn-media-selected-badge {
    background: var(--comic-media-selected-badge-bg);
    border-color: var(--comic-media-selected-badge-border);
    color: var(--comic-media-selected-badge-text);
    box-shadow: var(--comic-media-selected-badge-shadow);
}

.cn-topbar,
#toolbar,
#project-title,
#help-tooltip,
#workflowTaskList,
.workflow-task-list-header,
.workflow-task-item {
    border-color: var(--border-main);
}

.canvas-viewport {
    background: var(--canvas-bg);
}

.canvas-viewport.with-grid {
    background-image: radial-gradient(var(--canvas-dot) 1px, transparent 1px);
}

.scope-workflow-draw .canvas-viewport,
.scope-workflow-draw .canvas-viewport.with-grid {
    background-color: var(--canvas-bg);
    background-image: radial-gradient(var(--canvas-dot) 1px, transparent 1px);
    background-size: 20px 20px;
    background-position: 0 0;
}

.scope-workflow-draw #toolbar button[data-action="resetView"] {
    background: var(--bg-surface-2);
    border: 1px solid var(--border-main);
    color: var(--text-strong);
}

.scope-workflow-draw #toolbar button[data-action="resetView"]:hover {
    background: var(--bg-elevated);
    border-color: var(--brand-500);
    color: var(--brand-500);
}

.scope-workflow-draw #toolbar #toolbar-node-lists-toggle {
    background: var(--bg-surface-2);
    color: var(--brand-500);
    border-color: var(--brand-500);
}

.scope-workflow-draw #toolbar #toolbar-node-lists-toggle:hover {
    color: var(--brand-600);
    border-color: var(--brand-600);
    background: var(--brand-soft);
}

.scope-workflow-draw #toolbar .draw-toolbar-theme-toggle {
    color: var(--text-strong);
    border-color: var(--border-main);
    background: var(--bg-surface-2);
}

.scope-workflow-draw #toolbar .draw-toolbar-theme-toggle i {
    color: inherit;
}

.cn-flow-btn-secondary i,
#step-2-prev i,
#step-3-prev i,
#reset-scenes i,
.scope-workflow-draw #toolbar button[data-action="resetView"] i,
.scope-workflow-draw #toolbar #toolbar-node-lists-toggle i {
    color: inherit;
}

.scope-workflow-draw #toolbar button[data-action="handleSaveCanvas"] {
    background: var(--bg-surface-2);
    border: 1px solid var(--border-main);
    color: var(--text-strong);
    min-width: 34px;
    width: 34px;
}

.scope-workflow-draw #toolbar button[data-action="handleSaveCanvas"]:hover {
    background: var(--bg-elevated);
    border-color: var(--brand-500);
    color: var(--brand-500);
}

.scope-workflow-draw #edit-project-name-btn {
    background: transparent;
    border: none;
    box-shadow: none;
    color: var(--text-muted);
    padding: 0;
    min-width: auto;
}

.scope-workflow-draw #edit-project-name-btn:hover {
    color: var(--brand-500);
}

#edit-project-name-btn {
    background: transparent;
    border: none;
    box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ===== Theme Fine Tune (comic nav hover / recharge entry) ===== */
.scope-workflow-comic #smartwizard .nav .nav-link:hover {
    background: var(--bg-surface-2);
    border-color: var(--brand-500);
    color: var(--text-strong);
}

.scope-workflow-comic #smartwizard .nav .nav-link:hover .step-title {
    color: var(--text-strong);
}

.scope-workflow-comic #smartwizard .nav .nav-link.active:hover {
    background: var(--brand-500);
    border-color: var(--brand-600);
    color: var(--button-primary-fg);
}

.scope-workflow-comic #smartwizard .nav .nav-link.active:hover .step-title,
.scope-workflow-comic #smartwizard .nav .nav-link.active:hover i {
    color: var(--button-primary-fg);
}

.scope-workflow-comic #smartwizard .nav .nav-link.disabled,
.scope-workflow-comic #smartwizard .nav .nav-link.disabled:hover,
.scope-workflow-comic #smartwizard .nav .nav-link.cn-nav-locked,
.scope-workflow-comic #smartwizard .nav .nav-link.cn-nav-locked:hover {
    background: var(--bg-elevated);
    border-color: var(--border-main);
    color: var(--text-muted);
    opacity: 0.78;
}