html,
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-size: 14px;
}

button,
input,
select,
textarea {
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

:where(.ui-btn) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 42px;
    padding: 0.625rem 1rem;
    border: 1px solid transparent;
    border-radius: var(--btn-radius);
    box-shadow: var(--shadow-sm);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
    text-decoration: none;
    outline: none;
    cursor: pointer;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, opacity 0.18s ease;
}

:where(.ui-btn):hover {
    text-decoration: none;
}

:where(.ui-btn):focus-visible {
    outline: none;
}

:where(.ui-btn):disabled,
:where(.ui-btn)[disabled] {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
}

:where(.ui-btn) i,
:where(.ui-btn) svg {
    color: currentColor;
    fill: currentColor;
}

:where(.ui-btn-primary) {
    color: #ffffff;
    background: var(--brand-500);
    border-color: transparent;
}

:where(.ui-btn-primary):hover {
    background: var(--brand-600);
}

:where(.ui-btn-primary):focus-visible {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-500) 20%, transparent), var(--shadow-sm);
}

:where(.ui-btn-success) {
    color: #ffffff;
    background: var(--ok-500);
    border-color: transparent;
}

:where(.ui-btn-success):hover {
    background: var(--ok-600);
}

:where(.ui-btn-success):focus-visible {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok-500) 20%, transparent), var(--shadow-sm);
}

:where(.ui-btn-secondary) {
    color: var(--text-body);
    background: var(--color-neutral-secondary-medium);
    border-color: var(--border-main);
}

:where(.ui-btn-secondary):hover {
    color: var(--text-heading);
    background: var(--color-neutral-tertiary-medium);
}

:where(.ui-btn-secondary):focus-visible {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--text-muted) 14%, transparent), var(--shadow-sm);
}

:where(.ui-btn-soft) {
    color: var(--text-body);
    background: var(--color-neutral-primary-soft);
    border-color: var(--border-soft);
}

:where(.ui-btn-soft):hover {
    color: var(--text-heading);
    background: var(--color-neutral-secondary-medium);
}

:where(.ui-btn-soft):focus-visible {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--border-main) 28%, transparent), var(--shadow-sm);
}

:where(.ui-btn-ghost) {
    color: var(--text-body);
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

:where(.ui-btn-ghost):hover {
    background: var(--color-neutral-secondary-medium);
}

:where(.ui-btn-ghost):focus-visible {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--text-muted) 14%, transparent);
}

:where(.ui-input),
:where(.ui-select),
:where(.ui-textarea) {
    display: block;
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--border-main);
    border-radius: var(--btn-radius);
    background: var(--color-neutral-secondary-medium);
    box-shadow: var(--shadow-sm);
    color: var(--text-heading);
    font-size: 0.875rem;
    line-height: 1.25rem;
    outline: none;
    box-sizing: border-box;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

:where(.ui-btn-field) {
    min-height: 0;
}

:where(.ui-input)::placeholder,
:where(.ui-textarea)::placeholder {
    color: var(--text-body);
}

:where(.ui-input):focus,
:where(.ui-select):focus,
:where(.ui-textarea):focus,
:where(.ui-input):focus-visible,
:where(.ui-select):focus-visible,
:where(.ui-textarea):focus-visible {
    border-color: var(--brand-500);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-500) 14%, transparent), var(--shadow-sm);
}

:where(.ui-select) {
    appearance: none;
    -webkit-appearance: none;
    color-scheme: inherit;
    padding-right: 2.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2380889e' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 0.75rem;
}

:where(.ui-select) option,
:where(.ui-select) optgroup {
    background: var(--ui-select-option-bg);
    color: var(--ui-select-option-text);
}

:where(.ui-select) option:checked {
    background: var(--ui-select-option-checked-bg);
    color: var(--ui-select-option-checked-text);
}

html.theme-light :where(.ui-select),
html.theme-auto.theme-light :where(.ui-select) {
    color-scheme: light;
}

html.theme-dark :where(.ui-select),
html.theme-auto.theme-dark :where(.ui-select) {
    color-scheme: dark;
}

.ui-field {
    position: relative;
    width: 100%;
}

.ui-field-control {
    width: 100%;
}

.ui-field-icon {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0.875rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-body);
    pointer-events: none;
    z-index: 1;
}

.ui-field-icon i,
.ui-field-icon svg {
    width: 0.875rem;
    height: 0.875rem;
}

.ui-field.ui-field-leading .ui-field-control {
    min-width: 0;
    padding-inline-start: 2.625rem;
}

/* 兼容仍未迁移的旧模板占位写法 */
:where(.ui-input).ps-9,
:where(.ui-select).ps-9 {
    padding-inline-start: 2.625rem;
}

:where(.ui-input).pe-9,
:where(.ui-select).pe-9 {
    padding-inline-end: 2.25rem;
}

:where(.ui-textarea) {
    min-height: 120px;
    resize: vertical;
}

:where(
    .group-card-pill,
    .project-group-tag,
    .group-count-badge,
    .project-default-badge,
    .project-shared-badge,
    .project-readonly-badge,
    .workflow-asset-library-project-badge,
    .draw-video-download-source-tag,
    .recharge-package-badge,
    .catalog-card-badge,
    .collection-list-page .category-badge
) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid transparent;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

:where(.group-card-pill) {
    font-size: 11px;
    padding: 0.28rem 0.55rem;
}

:where(.project-group-tag) {
    gap: 0.35rem;
    padding: 0.18rem 0.55rem;
    font-size: 11px;
    font-weight: 600;
}

:where(.group-count-badge) {
    padding: 0.18rem 0.6rem;
}

:where(.project-default-badge, .project-shared-badge, .project-readonly-badge) {
    padding: 0.2rem 0.55rem;
    font-size: 11px;
}

:where(.workflow-asset-library-project-badge) {
    flex-shrink: 0;
    padding: 0.125rem 0.375rem;
    font-size: 0.625rem;
}

:where(.draw-video-download-source-tag) {
    font-size: 10px;
    padding: 2px 6px;
}

:where(.recharge-package-badge) {
    font-size: 11px;
    padding: 4px 8px;
}

:where(.catalog-card-badge, .collection-list-page .category-badge) {
    min-height: 28px;
    padding: 0 0.72rem;
    font-size: 0.73rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

:where(.status-tag, .ag-asset-status) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    line-height: 1;
    white-space: nowrap;
}

:where(.ag-asset-status) {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
}

:where(.ag-asset-type-badge) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 5px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
    padding: 2px 7px;
    font-size: 10px;
    color: var(--button-primary-fg);
    letter-spacing: 0.04em;
}

:where(.cn-task-pending-badge, .cn-media-selected-badge) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid transparent;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
}

:where(.cn-media-status) {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.2;
}

:where(.cn-media-status-spinner) {
    border-radius: 999px;
    animation: cnButtonSpin 0.75s linear infinite;
}

:where(.workflow-asset-status) {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 36px;
    width: 100%;
    break-inside: avoid;
    column-span: all;
    color: var(--text-muted);
    border: 1px dashed var(--border-main);
    border-radius: 8px;
    background: var(--bg-elevated);
}

:where(.workflow-asset-status).no-more {
    border-style: solid;
}

:where(.status-tag.active, .project-default-badge, .project-shared-badge, .draw-video-download-source-tag, .recharge-package-badge.selected) {
    background: var(--chip-brand-bg);
    color: var(--chip-brand-text);
    border-color: var(--chip-brand-border);
}

:where(.status-tag.pending, .project-readonly-badge) {
    background: var(--chip-muted-bg);
    color: var(--chip-muted-text);
    border-color: var(--chip-muted-border);
}

:where(.ag-asset-status.active) {
    background: var(--chip-success-bg);
    color: var(--chip-success-text);
    border-color: var(--chip-success-border);
}

:where(.ag-asset-status.processing) {
    background: var(--chip-warning-bg);
    color: var(--chip-warning-text);
    border-color: var(--chip-warning-border);
}

:where(.ag-asset-status.failed) {
    background: var(--chip-danger-bg);
    color: var(--chip-danger-text);
    border-color: var(--chip-danger-border);
}

:where(.group-card-pill) {
    border-color: var(--workflow-project-group-pill-border);
    background: var(--workflow-project-group-pill-bg);
    color: var(--workflow-project-group-pill-text);
}

:where(.project-group-tag) {
    background: var(--workflow-project-tag-bg);
    color: var(--workflow-project-tag-text);
    border-color: var(--workflow-project-tag-border);
}

:where(.project-group-tag.project-group-tag-empty) {
    background: var(--chip-muted-bg);
    color: var(--chip-muted-text);
    border-color: var(--chip-muted-border);
}

:where(.group-count-badge) {
    border-color: var(--workflow-project-count-border);
    background: var(--workflow-project-count-bg);
    color: var(--workflow-project-count-text);
}

:where(.workflow-asset-library-project-badge) {
    color: var(--workflow-asset-project-badge-text);
    border-color: var(--workflow-asset-project-badge-border);
    background: var(--workflow-asset-project-badge-bg);
}

:where(.recharge-package-badge.default) {
    background: var(--brand-500);
    border-color: var(--brand-600);
    color: var(--button-primary-fg);
}

:where(.catalog-card-badge, .collection-list-page .category-badge) {
    border-color: var(--border-main);
    background: var(--bg-elevated);
    color: var(--brand-500);
}

:where(.ag-asset-type-badge.video) {
    background: var(--asset-type-video-badge-bg);
}

:where(.ag-asset-type-badge.audio) {
    background: var(--asset-type-audio-badge-bg);
}

:where(.cn-task-pending-badge--images) {
    color: var(--comic-task-pending-images-text);
    background: var(--comic-task-pending-images-bg);
    border-color: var(--comic-task-pending-images-border);
    box-shadow: var(--comic-task-pending-images-shadow);
}

:where(.cn-task-pending-badge--videos) {
    color: var(--comic-task-pending-videos-text);
    background: var(--comic-task-pending-videos-bg);
    border-color: var(--comic-task-pending-videos-border);
    box-shadow: var(--comic-task-pending-videos-shadow);
}

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

.scope-workflow-comic .cn-media-status-loading {
    background: var(--comic-media-status-loading-bg);
    border-color: var(--comic-media-status-loading-border);
    color: var(--comic-media-status-loading-text);
}

.scope-workflow-comic .cn-media-status-spinner {
    border-color: var(--comic-media-status-spinner-border);
    border-top-color: var(--comic-media-status-spinner-top);
}

.scope-workflow-comic .cn-media-status-failed {
    background: var(--comic-media-status-failed-bg);
    border-color: var(--comic-media-status-failed-border);
    color: var(--comic-media-status-failed-text);
}

.scope-workflow-comic .cn-media-status-text {
    color: inherit;
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

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

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

*::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border: 2px solid var(--scrollbar-thumb-border);
    border-radius: 999px;
}

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

:root {
    --font-body: "PingFang SC", "Microsoft YaHei", sans-serif;
    --font-heading: "PingFang SC", "Microsoft YaHei", sans-serif;

    --brand-500: #2563eb;
    --brand-600: #1d4ed8;
    --brand-700: #1e40af;
    --brand-soft: rgba(37, 99, 235, 0.14);

    --ok-500: #22c55e;
    --ok-600: #16a34a;
    --warn-500: #f59e0b;
    --warn-600: #d97706;
    --danger-500: #ef4444;
    --danger-600: #dc2626;
    --danger-700: #b91c1c;

    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 12px;
    --btn-radius: 8px;

    --shadow-sm: 0 2px 10px rgba(16, 24, 40, 0.06);
    --shadow-md: 0 8px 28px rgba(16, 24, 40, 0.12);
    --shadow-lg: 0 18px 48px rgba(16, 24, 40, 0.2);

    --topbar-height: 64px;
    --z-overlay-top: 9999;
    --z-modal-base: 10000;
    --z-modal-raised: 10010;
    --z-modal-raised-2: 10020;
    --z-modal-panel: 10030;
    --z-modal-panel-plus: 10035;
    --z-modal-panel-plus-2: 10036;
    --z-modal-top: 10040;
    --z-modal-max: 10060;

    --bg-canvas: #f4f7fb;
    --bg-surface: #ffffff;
    --bg-surface-2: #e9eff8;
    --bg-elevated: #f8fbff;

    --text-strong: #10213d;
    --text-heading: #10213d;
    --text-body: #334155;
    --text-main: #1f3357;
    --text-muted: #5a6e90;

    --border-main: #d5deec;
    --border-soft: #e6edf8;

    --overlay: rgba(10, 20, 35, 0.48);

    --canvas-bg: #eef3fb;
    --canvas-dot: rgba(16, 56, 130, 0.18);

    --color-neutral-primary-soft: #ffffff;
    --color-neutral-primary: #ffffff;
    --color-neutral-primary-medium: #ffffff;
    --color-neutral-secondary-soft: #f9fafb;
    --color-neutral-secondary: #f9fafb;
    --color-neutral-secondary-medium: #f9fafb;
    --color-neutral-tertiary-soft: #f3f4f6;
    --color-neutral-tertiary: #f3f4f6;
    --color-neutral-tertiary-medium: #f3f4f6;

    --button-primary-fg: #ffffff;

    --topbar-user-name: #1e3a5f;
    --topbar-user-level: #2563eb;
    --topbar-user-menu-trigger: #4b5f7f;
    --topbar-user-menu-trigger-hover: #1e3a5f;

    --scrollbar-track: #ffffff;
    --scrollbar-thumb: #b5c6e2;
    --scrollbar-thumb-hover: #8ea7cf;
    --scrollbar-thumb-border: #ffffff;

    --sw-theme-default-nav-bg: var(--bg-elevated);
    --sw-theme-default-nav-text-color: var(--text-main);
    --sw-theme-default-nav-active-bg: var(--brand-500);
    --sw-theme-default-nav-active-text-color: var(--button-primary-fg);
    --sw-theme-default-nav-done-bg: var(--brand-500);
    --sw-theme-default-nav-done-text-color: var(--button-primary-fg);
    --sw-theme-default-progress-bg: var(--bg-surface-2);
    --sw-theme-default-progress-bar-bg: var(--brand-500);
    --sw-theme-default-toolbar-bg: transparent;
    --sw-theme-default-toolbar-btn-text-color: var(--text-main);
    --sw-theme-default-toolbar-btn-bg: var(--bg-surface-2);
    --sw-theme-default-toolbar-btn-hover-bg: var(--bg-elevated);

    --comic-card-hover-bg: var(--bg-elevated);
    --comic-card-hover-border: var(--brand-500);

    --comic-share-project-name: #0f172a;
    --comic-share-badge-bg: rgba(37, 99, 235, 0.12);
    --comic-share-badge-border: rgba(37, 99, 235, 0.32);
    --comic-share-badge-text: #1d4ed8;

    --comic-export-title: #0f172a;
    --comic-export-label: #334155;
    --comic-export-hint: #64748b;
    --comic-export-input-bg: #f4f8ff;
    --comic-export-input-border: #c7d7ee;
    --comic-export-input-text: #0f172a;
    --comic-export-input-placeholder: #93a4be;
    --comic-export-input-readonly-bg: #eef4ff;
    --comic-export-input-readonly-text: #334155;
    --comic-export-cancel-bg: #eef2f7;
    --comic-export-cancel-border: #c7d2e2;
    --comic-export-cancel-text: #334155;
    --comic-export-cancel-hover-bg: #e2e8f0;
    --comic-export-cancel-hover-border: #a8bad6;
    --comic-export-cancel-hover-text: #0f172a;

    --comic-form-control-bg: #f8fbff;
    --comic-form-control-border: #d6e2f0;
    --comic-form-control-text: #0f172a;
    --comic-form-control-focus-bg: #ffffff;
    --comic-form-control-focus-border: #3b82f6;
    --comic-form-control-focus-ring: rgba(59, 130, 246, 0.14);
    --comic-form-option-bg: #ffffff;
    --comic-form-option-text: #0f172a;
    --comic-form-option-checked-bg: #dbeafe;
    --comic-form-option-checked-text: #0f172a;
    --ui-select-option-bg: #ffffff;
    --ui-select-option-text: #0f172a;
    --ui-select-option-checked-bg: #dbeafe;
    --ui-select-option-checked-text: #0f172a;

    --comic-surface-bg: #f8fbff;
    --comic-surface-border: #d6e2f0;
    --comic-surface-hover-bg: #f1f6fd;
    --comic-surface-hover-border: #9cc1ee;
    --comic-surface-text-muted: #334155;

    --comic-step4-wrap-bg: #ffffff;
    --comic-step4-wrap-border: #d7e3f1;
    --comic-step4-wrap-shadow: 0 14px 36px rgba(148, 163, 184, 0.14);
    --comic-step4-thead-bg: linear-gradient(180deg, #f8fbff 0%, #f1f6fd 100%);
    --comic-step4-thead-text: #475569;
    --comic-step4-row-bg: #ffffff;
    --comic-step4-row-hover-bg: #fbfdff;
    --comic-step4-row-border: #e5edf6;
    --comic-step4-media-list-bg: linear-gradient(180deg, #f8fbff 0%, #f3f7fc 100%);
    --comic-step4-media-list-border: #d9e5f2;
    --comic-step4-media-list-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);

    --comic-media-bg: #ffffff;
    --comic-media-border: #cfdceb;
    --comic-media-shadow: 0 8px 20px rgba(148, 163, 184, 0.12);
    --comic-media-hover-border: #8cb4ea;
    --comic-media-hover-shadow: 0 12px 26px rgba(59, 130, 246, 0.14);
    --comic-media-upload-border: #b8cae0;
    --comic-media-upload-bg: linear-gradient(180deg, #f8fbff 0%, #edf4fb 100%);
    --comic-media-upload-trigger: #52637a;
    --comic-media-upload-trigger-hover-bg: rgba(219, 234, 254, 0.42);
    --comic-media-upload-trigger-hover-text: #1e3a5f;
    --comic-media-combined-bg: #ffffff;
    --comic-media-combined-border: #cfdceb;
    --comic-media-combined-text: #52637a;
    --comic-media-combined-hover-bg: #f3f8ff;
    --comic-media-combined-hover-border: #9fc0e8;
    --comic-media-combined-hover-text: #1e3a5f;
    --comic-media-generate-combined-bg: linear-gradient(180deg, #edf6ff 0%, #e0efff 100%);
    --comic-media-generate-combined-border: #93c5fd;
    --comic-media-generate-combined-text: #1d4ed8;
    --comic-media-generate-image-bg: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
    --comic-media-generate-image-border: #93c5fd;
    --comic-media-generate-video-bg: linear-gradient(180deg, #f0fdf4 0%, #dcfce7 100%);
    --comic-media-generate-video-border: #86efac;
    --comic-media-generate-text: #0f172a;
    --comic-media-selected-bg: #eff6ff;
    --comic-media-selected-border: #3b82f6;
    --comic-media-selected-shadow: 0 0 0 1px rgba(59, 130, 246, 0.22), 0 14px 28px rgba(59, 130, 246, 0.16);
    --comic-media-thumb-bg: #eaf1f8;
    --comic-media-overlay-bg: linear-gradient(180deg, rgba(241, 245, 249, 0.1) 0%, rgba(226, 232, 240, 0.5) 45%, rgba(15, 23, 42, 0.2) 100%);
    --comic-media-icon-bg: rgba(255, 255, 255, 0.9);
    --comic-media-icon-border: rgba(148, 163, 184, 0.42);
    --comic-media-icon-text: #334155;
    --comic-media-icon-shadow: 0 6px 14px rgba(148, 163, 184, 0.2);
    --comic-media-icon-hover-bg: #ffffff;
    --comic-media-icon-hover-border: rgba(59, 130, 246, 0.46);
    --comic-media-icon-hover-text: #1d4ed8;
    --comic-media-icon-active-bg: #dbeafe;
    --comic-media-icon-active-border: #60a5fa;
    --comic-media-icon-active-text: #1d4ed8;
    --comic-media-selected-badge-bg: #16a34a;
    --comic-media-selected-badge-border: #86efac;
    --comic-media-selected-badge-text: #f0fdf4;
    --comic-media-selected-badge-shadow: 0 8px 16px rgba(22, 163, 74, 0.2);
    --comic-media-status-bg: linear-gradient(180deg, #f8fbff 0%, #edf4fb 100%);
    --comic-media-status-border: #cddaea;
    --comic-media-status-text: #52637a;
    --comic-media-status-loading-bg: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
    --comic-media-status-loading-border: #93c5fd;
    --comic-media-status-loading-text: #1d4ed8;
    --comic-media-status-spinner-border: rgba(147, 197, 253, 0.45);
    --comic-media-status-spinner-top: #3b82f6;
    --comic-media-status-failed-bg: linear-gradient(180deg, #fff7ed 0%, #ffedd5 100%);
    --comic-media-status-failed-border: #fdba74;
    --comic-media-status-failed-text: #9a3412;
    --comic-scene-row-selected-bg: rgba(2, 132, 199, 0.14);
    --comic-scene-divider: rgba(148, 163, 184, 0.42);
    --comic-scene-unsaved-border: rgba(239, 68, 68, 0.72);
    --comic-scene-unsaved-ring: rgba(239, 68, 68, 0.2);
    --comic-scene-action-summary-bg: rgba(15, 23, 42, 0.28);
    --comic-scene-action-summary-border: rgba(148, 163, 184, 0.32);
    --comic-scene-action-summary-text: rgba(226, 232, 240, 0.92);
    --comic-scene-action-summary-hover-bg: rgba(30, 41, 59, 0.38);
    --comic-scene-action-summary-hover-border: rgba(148, 163, 184, 0.55);
    --comic-scene-action-summary-hover-text: #f8fafc;
    --comic-scene-action-summary-focus-ring: rgba(56, 189, 248, 0.22);
    --comic-scene-action-summary-inset-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    --comic-scene-action-menu-bg: rgba(15, 23, 42, 0.96);
    --comic-scene-action-menu-border: rgba(100, 116, 139, 0.42);
    --comic-scene-action-menu-shadow: 0 10px 22px rgba(2, 6, 23, 0.4);
    --comic-scene-action-item-bg: rgba(30, 41, 59, 0.62);
    --comic-scene-action-item-border: rgba(100, 116, 139, 0.4);
    --comic-scene-action-item-text: #e2e8f0;
    --comic-scene-action-item-hover-bg: rgba(30, 41, 59, 0.88);
    --comic-scene-action-item-hover-border: rgba(56, 189, 248, 0.56);
    --comic-scene-action-item-hover-text: #f8fafc;
    --comic-scene-action-image-bg: rgba(14, 116, 144, 0.18);
    --comic-scene-action-image-border: rgba(56, 189, 248, 0.42);
    --comic-scene-action-image-text: #bae6fd;
    --comic-scene-action-video-bg: rgba(245, 158, 11, 0.08);
    --comic-scene-action-video-border: rgba(245, 158, 11, 0.38);
    --comic-scene-action-video-text: #9a3412;
    --comic-step4-image-list-bg: rgba(15, 23, 42, 0.08);
    --comic-step4-image-list-border: rgba(148, 163, 184, 0.28);
    --comic-step4-video-list-bg: rgba(15, 23, 42, 0.08);
    --comic-step4-video-list-border: rgba(148, 163, 184, 0.28);
    --comic-task-pending-images-bg: #16a34a;
    --comic-task-pending-images-border: #86efac;
    --comic-task-pending-images-text: #f0fdf4;
    --comic-task-pending-images-shadow: 0 4px 10px rgba(22, 163, 74, 0.18);
    --comic-task-pending-videos-bg: #ea580c;
    --comic-task-pending-videos-border: #fdba74;
    --comic-task-pending-videos-text: #fff7ed;
    --comic-task-pending-videos-shadow: 0 4px 10px rgba(234, 88, 12, 0.16);
    --comic-loading-spinner-border: rgba(255, 255, 255, 0.38);
    --comic-loading-spinner-top: #ffffff;
    --comic-share-preview-hint-bg: rgba(15, 23, 42, 0.52);
    --comic-share-preview-hint-border: rgba(148, 163, 184, 0.28);
    --comic-share-preview-hint-text: var(--text-strong);
    --comic-share-prompt-bg: var(--bg-elevated);
    --comic-share-prompt-border: var(--border-main);
    --comic-loading-overlay-bg: var(--overlay);
    --comic-loading-message: var(--text-strong);
    --comic-preview-overlay-bg: var(--overlay);
    --comic-preview-content-border: rgba(148, 163, 184, 0.38);
    --comic-preview-content-shadow: var(--shadow-lg);
    --comic-preview-video-bg: #000000;
    --comic-preview-close-bg: var(--bg-surface);
    --comic-preview-close-border: var(--border-main);
    --comic-preview-close-text: var(--text-strong);
    --comic-preview-close-hover-bg: var(--bg-elevated);

    --draw-select-scheme: light;
    --draw-loading-overlay-bg: rgba(244, 247, 251, 0.88);
    --draw-loading-overlay-filter: blur(10px) saturate(1.02);
    --draw-loading-step-bg: rgba(255, 255, 255, 0.86);
    --draw-loading-step-border: rgba(203, 213, 225, 0.9);
    --draw-loading-step-hover-bg: rgba(255, 255, 255, 0.96);
    --draw-loading-step-hover-border: rgba(59, 130, 246, 0.28);
    --draw-loading-step-hover-shadow: 0 12px 28px rgba(148, 163, 184, 0.14);
    --draw-loading-step-active-bg: rgba(219, 234, 254, 0.82);
    --draw-loading-step-active-border: rgba(59, 130, 246, 0.36);
    --draw-loading-step-active-shadow: 0 0 0 1px rgba(59, 130, 246, 0.12) inset;
    --draw-loading-step-complete-bg: rgba(220, 252, 231, 0.82);
    --draw-loading-step-complete-border: rgba(34, 197, 94, 0.32);
    --draw-node-border: rgba(148, 163, 184, 0.34);
    --draw-node-shadow: 0 8px 24px rgba(15, 23, 42, 0.1), 0 1px 4px rgba(15, 23, 42, 0.04);
    --draw-node-hover-border: rgba(59, 130, 246, 0.34);
    --draw-node-hover-shadow: 0 12px 28px rgba(15, 23, 42, 0.14), 0 2px 8px rgba(15, 23, 42, 0.06);
    --draw-node-selected-border: rgba(59, 130, 246, 0.68);
    --draw-node-selected-shadow: 0 0 0 1px rgba(59, 130, 246, 0.62), 0 0 0 4px rgba(59, 130, 246, 0.14), 0 14px 34px rgba(37, 99, 235, 0.16);
    --draw-node-status-queued-border: rgba(217, 119, 6, 0.42);
    --draw-node-status-queued-ring: rgba(217, 119, 6, 0.08);
    --draw-node-status-running-border: rgba(29, 78, 216, 0.44);
    --draw-node-status-running-ring: rgba(29, 78, 216, 0.08);
    --draw-node-status-running-pulse-border: rgba(37, 99, 235, 0.94);
    --draw-node-status-running-pulse-ring: rgba(29, 78, 216, 0.22);
    --draw-node-status-running-enter-border: rgba(37, 99, 235, 0.82);
    --draw-node-status-running-enter-ring: rgba(59, 130, 246, 0.22);
    --draw-node-status-success-border: rgba(5, 150, 105, 0.42);
    --draw-node-status-success-ring: rgba(5, 150, 105, 0.08);
    --draw-node-status-failed-border: rgba(220, 38, 38, 0.44);
    --draw-node-status-failed-ring: rgba(220, 38, 38, 0.08);
    --draw-node-status-failed-impact-border: rgba(239, 68, 68, 0.96);
    --draw-node-status-failed-impact-ring: rgba(220, 38, 38, 0.24);
    --draw-connection-color: rgba(90, 113, 152, 0.78);
    --draw-connection-temp-color: #4d78be;
    --draw-connection-delete-color: #dc2626;
    --draw-arrowhead-color: #5a7198;
    --draw-arrowhead-hover-color: #2563eb;
    --draw-arrowhead-delete-color: #dc2626;
    --draw-connection-delete-icon-color: #5a7198;
    --draw-connection-delete-icon-hover-color: #dc2626;
    --draw-minimap-bg: rgba(160, 182, 215, 0.24);
    --draw-minimap-selected-stroke: #1e3a5f;

    --recharge-text-muted-2: #5b7094;
    --recharge-text-strong-2: #1d3458;
    --recharge-order-status: #a16207;
    --recharge-order-countdown: #b45309;
    --recharge-package-price: #2563eb;
    --recharge-close-border: #c5d4e9;
    --recharge-close-bg: #eef4ff;
    --recharge-close-text: #3c587f;
    --recharge-close-hover-border: #8eb0df;
    --recharge-close-hover-bg: #e2ecfb;
    --recharge-close-hover-text: #1f467e;
    --recharge-qr-dark: #0f172a;
    --recharge-qr-light: #ffffff;
    --recharge-qr-shell-bg: #ffffff;
    --asset-audio-hover-bg: rgba(37, 99, 235, 0.08);
    --asset-audio-disc-start: #2563eb;
    --asset-audio-disc-end: #1d4ed8;
    --asset-audio-disc-shadow: 0 4px 16px rgba(37, 99, 235, 0.28);
    --asset-audio-disc-icon: #ffffff;
    --asset-type-video-badge-bg: rgba(37, 99, 235, 0.86);
    --asset-type-audio-badge-bg: rgba(14, 165, 233, 0.82);
    --task-status-queued-bg: rgba(251, 191, 36, 0.2);
    --task-status-queued-text: #fbbf24;
    --task-status-queued-border: rgba(251, 191, 36, 0.3);
    --task-status-running-bg: rgba(59, 130, 246, 0.2);
    --task-status-running-text: #3b82f6;
    --task-status-running-border: rgba(59, 130, 246, 0.3);
    --task-status-success-bg: rgba(34, 197, 94, 0.2);
    --task-status-success-text: #22c55e;
    --task-status-success-border: rgba(34, 197, 94, 0.3);
    --task-status-failed-bg: rgba(239, 68, 68, 0.2);
    --task-status-failed-text: #ef4444;
    --task-status-failed-border: rgba(239, 68, 68, 0.3);
    --task-status-cancelled-bg: rgba(14, 165, 233, 0.18);
    --task-status-cancelled-text: #38bdf8;
    --task-status-cancelled-border: rgba(14, 165, 233, 0.3);
    --task-status-idle-bg: rgba(148, 163, 184, 0.12);
    --task-status-idle-text: #64748b;
    --task-status-idle-border: rgba(100, 116, 139, 0.36);
    --task-status-queued-fill: rgba(251, 191, 36, 0.72);
    --task-status-running-fill: rgba(59, 130, 246, 0.78);
    --task-status-success-fill: rgba(16, 185, 129, 0.78);
    --task-status-failed-fill: rgba(239, 68, 68, 0.78);
    --task-status-idle-fill: rgba(148, 163, 184, 0.5);
    --chip-brand-bg: var(--brand-soft);
    --chip-brand-text: var(--brand-500);
    --chip-brand-border: color-mix(in srgb, var(--brand-500) 24%, transparent);
    --chip-muted-bg: color-mix(in srgb, var(--text-muted) 14%, transparent);
    --chip-muted-text: var(--text-muted);
    --chip-muted-border: color-mix(in srgb, var(--text-muted) 20%, transparent);
    --chip-warning-bg: var(--task-status-queued-bg);
    --chip-warning-text: var(--task-status-queued-text);
    --chip-warning-border: var(--task-status-queued-border);
    --chip-success-bg: var(--task-status-success-bg);
    --chip-success-text: var(--task-status-success-text);
    --chip-success-border: var(--task-status-success-border);
    --chip-danger-bg: var(--task-status-failed-bg);
    --chip-danger-text: var(--task-status-failed-text);
    --chip-danger-border: var(--task-status-failed-border);

    --workflow-asset-scroll-track: rgba(148, 163, 184, 0.24);
    --workflow-asset-scroll-thumb: rgba(59, 130, 246, 0.42);
    --workflow-asset-scroll-thumb-hover: rgba(59, 130, 246, 0.58);
    --workflow-asset-scroll-thumb-active: rgba(37, 99, 235, 0.76);
    --workflow-asset-type-border: rgba(255, 255, 255, 0.35);
    --workflow-project-header-glow: radial-gradient(circle, rgba(37, 99, 235, 0.18) 0%, rgba(37, 99, 235, 0) 70%);
    --workflow-project-context-border: rgba(37, 99, 235, 0.22);
    --workflow-project-context-bg: linear-gradient(120deg, rgba(37, 99, 235, 0.08), rgba(37, 99, 235, 0.02));
    --workflow-project-batch-border: rgba(37, 99, 235, 0.24);
    --workflow-project-batch-bg: rgba(37, 99, 235, 0.06);
    --workflow-project-card-hover-border: rgba(37, 99, 235, 0.28);
    --workflow-project-group-border: rgba(8, 145, 178, 0.34);
    --workflow-project-group-accent: rgba(8, 145, 178, 0.9);
    --workflow-project-group-highlight: radial-gradient(140px 100px at 96% 4%, rgba(8, 145, 178, 0.18), transparent 70%);
    --workflow-project-group-bg: linear-gradient(135deg, rgba(8, 145, 178, 0.18) 0%, rgba(8, 145, 178, 0.06) 42%, var(--bg-elevated) 100%);
    --workflow-project-group-inset: inset 0 0 0 1px rgba(8, 145, 178, 0.1);
    --workflow-project-group-shadow: 0 8px 18px rgba(8, 145, 178, 0.08);
    --workflow-project-group-pill-border: rgba(8, 145, 178, 0.42);
    --workflow-project-group-pill-bg: rgba(8, 145, 178, 0.16);
    --workflow-project-group-pill-text: #0e7490;
    --workflow-project-group-hover-border: rgba(8, 145, 178, 0.7);
    --workflow-project-group-hover-shadow: 0 12px 24px rgba(8, 145, 178, 0.16);
    --workflow-project-group-hover-inset: inset 0 0 0 1px rgba(8, 145, 178, 0.13);
    --workflow-project-group-icon-border: rgba(37, 99, 235, 0.32);
    --workflow-project-group-icon-bg: rgba(37, 99, 235, 0.12);
    --workflow-project-name-focus-outline: rgba(37, 99, 235, 0.55);
    --workflow-project-tag-bg: rgba(37, 99, 235, 0.12);
    --workflow-project-tag-border: rgba(37, 99, 235, 0.24);
    --workflow-project-tag-text: var(--brand-700);
    --workflow-project-count-bg: rgba(37, 99, 235, 0.1);
    --workflow-project-count-border: rgba(37, 99, 235, 0.2);
    --workflow-project-count-text: var(--brand-700);
    --workflow-side-panel-shadow-left: -12px 0 28px rgba(15, 23, 42, 0.1);
    --workflow-side-panel-shadow-right: 12px 0 28px rgba(15, 23, 42, 0.1);
    --workflow-asset-search-focus-border: var(--brand-500);
    --workflow-asset-search-focus-ring: 0 0 0 2px rgba(59, 130, 246, 0.2);
    --workflow-asset-search-clear-hover-bg: rgba(148, 163, 184, 0.2);
    --workflow-asset-project-active-text: var(--brand-600);
    --workflow-asset-project-badge-text: var(--brand-700);
    --workflow-asset-project-badge-border: rgba(147, 197, 253, 0.45);
    --workflow-asset-project-badge-bg: rgba(30, 64, 175, 0.35);
    --workflow-asset-type-text: #ffffff;
    --workflow-asset-type-bg: rgba(15, 23, 42, 0.75);
    --workflow-asset-type-image-bg: rgba(37, 99, 235, 0.72);
    --workflow-asset-type-video-bg: rgba(8, 145, 178, 0.78);
    --workflow-asset-readonly-border: rgba(248, 250, 252, 0.32);
    --workflow-asset-readonly-bg: rgba(30, 41, 59, 0.78);
    --workflow-asset-readonly-text: #f8fafc;
    --workflow-task-type-text-bg: rgba(156, 163, 175, 0.1);
    --workflow-task-type-image-text: #a855f7;
    --workflow-task-type-image-bg: rgba(168, 85, 247, 0.1);
    --workflow-task-type-video-text: #6366f1;
    --workflow-task-type-video-bg: rgba(99, 102, 241, 0.1);
    --workflow-task-result-download-bg: var(--brand-500);
    --workflow-task-result-download-border: var(--brand-600);
    --workflow-task-result-download-text: #ffffff;
    --workflow-task-result-download-shadow: 0 3px 10px rgba(15, 23, 42, 0.34);
    --workflow-task-result-download-hover-bg: var(--brand-600);
    --workflow-task-result-download-hover-border: var(--brand-700);
    --workflow-task-result-text-bg: var(--bg-elevated);
    --workflow-task-result-text-border: var(--border-main);
    --workflow-task-result-text-color: var(--text-main);
    --workflow-task-result-text-scrollbar-track: var(--brand-soft);
    --workflow-task-result-text-scrollbar-thumb: rgba(59, 130, 246, 0.3);
    --workflow-task-result-text-scrollbar-thumb-hover: rgba(59, 130, 246, 0.5);
    --task-type-text-color: #9ca3af;
    --task-type-image-color: #a855f7;
    --task-type-video-color: #6366f1;
    --agent-use-panel-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
    --agent-use-topbar-border: rgba(148, 163, 184, 0.12);
    --agent-use-app-icon-bg: linear-gradient(135deg, var(--brand-500) 0%, #7c3aed 100%);
    --agent-use-app-icon-fg: var(--button-primary-fg);
    --agent-use-tab-group-ring: inset 0 0 0 1px rgba(148, 163, 184, 0.14);
    --agent-use-tab-active-fg: var(--button-primary-fg);
    --agent-use-tab-active-shadow: 0 2px 8px rgba(99, 102, 241, 0.35);
    --agent-use-section-card-ring: inset 0 0 0 1px rgba(148, 163, 184, 0.14);
    --agent-use-section-card-hover-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.22), 0 10px 24px rgba(15, 23, 42, 0.06);
    --agent-use-preview-card-ring: inset 0 0 0 1px rgba(148, 163, 184, 0.14);
    --agent-use-overlay-btn-bg: rgba(0, 0, 0, 0.55);
    --agent-use-overlay-btn-fg: var(--button-primary-fg);
    --agent-use-overlay-btn-hover-bg: rgba(220, 38, 38, 0.85);
    --agent-use-dropdown-panel-shadow: 0 10px 28px rgba(15, 23, 42, 0.16);
    --agent-use-item-thumb-ring: inset 0 0 0 1px rgba(148, 163, 184, 0.14);
    --agent-use-task-item-ring: inset 0 0 0 1px rgba(148, 163, 184, 0.12);
    --agent-use-task-item-hover-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.18), 0 12px 24px rgba(15, 23, 42, 0.08);
    --agent-use-loading-divider: rgba(148, 163, 184, 0.12);
    --agent-use-back-btn-ring: inset 0 0 0 1px rgba(148, 163, 184, 0.14);
    --agent-use-back-btn-hover-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.18), 0 8px 20px rgba(15, 23, 42, 0.06);
    --agent-use-item-hover-shadow: 0 10px 20px rgba(15, 23, 42, 0.08);
    --agent-use-media-hover-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    --agent-use-utility-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --agent-use-text-card-ring: inset 0 0 0 1px rgba(148, 163, 184, 0.14);
    --agent-use-text-card-hover-ring: inset 0 0 0 1px rgba(37, 99, 235, 0.2);
    --app-shell-topbar-border: rgba(148, 163, 184, 0.08);
    --app-shell-sidebar-border: rgba(148, 163, 184, 0.06);
    --app-shell-sidebar-inset-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.008);
    --app-shell-disk-card-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
    --app-shell-disk-fill-warn: var(--warn-500);
    --app-shell-disk-fill-danger: var(--danger-500);
    --app-shell-sidebar-active-shadow: 0 10px 30px rgba(37, 99, 235, 0.12);
    --app-shell-logo-fg: var(--button-primary-fg);
    --app-shell-modal-close-hover-bg: rgba(148, 163, 184, 0.16);
    --app-shell-focus-ring: 0 0 0 2px rgba(37, 99, 235, 0.2);
    --app-shell-topbar-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
    --app-shell-user-recharge-shadow: 0 4px 8px rgba(37, 99, 235, 0.14);
    --app-shell-logout-hover-bg: rgba(239, 68, 68, 0.14);
    --overlay-float-text: #f8fafc;
    --overlay-float-border: rgba(148, 163, 184, 0.46);
    --overlay-float-bg: rgba(15, 23, 42, 0.76);
    --overlay-float-hover-text: #ffffff;
    --overlay-float-hover-border: rgba(203, 213, 225, 0.56);
    --overlay-float-hover-bg: rgba(30, 41, 59, 0.9);
    --overlay-counter-border: rgba(148, 163, 184, 0.42);
    --overlay-counter-bg: rgba(15, 23, 42, 0.72);
    --task-thumb-download-text: #f8fafc;
    --task-thumb-download-border: rgba(148, 163, 184, 0.48);
    --task-thumb-download-bg: rgba(15, 23, 42, 0.82);
    --task-thumb-download-shadow: 0 2px 6px rgba(15, 23, 42, 0.36);
    --task-thumb-download-hover-text: #ffffff;
    --task-thumb-download-hover-border: rgba(226, 232, 240, 0.64);
    --task-thumb-download-hover-bg: rgba(30, 41, 59, 0.92);
    --danger-btn-bg: var(--danger-600);
    --danger-btn-border: var(--danger-700);
    --danger-btn-text: var(--button-primary-fg);
    --danger-btn-hover-bg: #b91c1c;
    --danger-btn-hover-border: #991b1b;
    --feedback-ok-text: #15803d;
    --feedback-error-text: #b91c1c;

    --task-history-card-hover-border: rgba(96, 165, 250, 0.34);
    --task-history-card-hover-shadow: 0 16px 34px rgba(15, 23, 42, 0.1);
    --task-history-media-hover-border: rgba(96, 165, 250, 0.34);
    --task-history-media-hover-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
    --task-history-media-overlay-bg: linear-gradient(180deg, rgba(15, 23, 42, 0.04) 0%, rgba(15, 23, 42, 0.28) 100%);
    --task-history-media-overlay-video-bg: linear-gradient(180deg, rgba(15, 23, 42, 0.12) 0%, rgba(15, 23, 42, 0.3) 100%);
    --task-history-media-badge-bg: rgba(15, 23, 42, 0.48);
    --task-history-media-badge-hover-bg: rgba(15, 23, 42, 0.62);
    --task-history-media-badge-text: rgba(255, 255, 255, 0.92);
    --task-history-media-badge-shadow: 0 10px 28px rgba(15, 23, 42, 0.18);
    --task-history-text-result-hover-border: rgba(96, 165, 250, 0.32);
    --task-history-text-result-hover-shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
    --task-history-text-result-meta: rgba(59, 130, 246, 0.88);
    --task-history-action-hover-bg: rgba(255, 255, 255, 0.38);
    --task-history-action-hover-border: rgba(148, 163, 184, 0.22);
    --task-history-created-at: var(--text-body);
    --task-history-failed-border: rgba(194, 122, 122, 0.18);
    --task-history-failed-bg: linear-gradient(180deg, rgba(255, 251, 251, 0.9) 0%, rgba(246, 239, 239, 0.92) 100%);
    --task-history-failed-icon: rgba(164, 96, 96, 0.68);
    --task-history-failed-focus-shadow: 0 0 0 4px rgba(244, 114, 114, 0.12);
    --task-history-failed-tooltip-bg: rgba(34, 42, 60, 0.96);
    --task-history-failed-tooltip-text: rgba(255, 255, 255, 0.92);
    --task-history-failed-tooltip-shadow: 0 14px 30px rgba(15, 23, 42, 0.18);
    --task-history-failed-tooltip-arrow: rgba(34, 42, 60, 0.96);
    --task-history-processing-base: linear-gradient(180deg, rgba(251, 252, 255, 0.98) 0%, rgba(233, 239, 246, 0.98) 100%);
    --task-history-processing-color-1: rgba(68, 78, 102, 0.92);
    --task-history-processing-color-2: rgba(110, 140, 182, 0.88);
    --task-history-processing-color-3: rgba(188, 222, 255, 0.9);
    --task-history-processing-color-4: rgba(244, 236, 244, 0.84);
    --task-history-processing-color-5: rgba(116, 197, 247, 0.9);
    --task-history-processing-blob-1: rgba(183, 218, 255, 0.38);
    --task-history-processing-blob-2: rgba(255, 242, 249, 0.24);
    --task-history-processing-blob-3: rgba(129, 205, 255, 0.54);
    --task-history-processing-line-bg: rgba(255, 255, 255, 0.34);
    --task-history-processing-caption-bg: rgba(112, 147, 198, 0.22);
    --task-history-processing-caption-text: rgba(255, 255, 255, 0.96);
    --task-history-processing-caption-shadow: 0 10px 26px rgba(15, 23, 42, 0.1);
}

html.theme-light {
    color-scheme: light;
}

html.theme-auto {
    color-scheme: light dark;
}

html.theme-auto.theme-light {
    color-scheme: light;
}

html.theme-auto.theme-dark {
    color-scheme: dark;
}

html.theme-dark {
    color-scheme: dark;
    --bg-canvas: #0a1120;
    --bg-surface: #121d33;
    --bg-surface-2: #1b2a46;
    --bg-elevated: #16243d;

    --color-neutral-primary-soft: #15233d;
    --color-neutral-primary: #1b2a46;
    --color-neutral-primary-medium: #213252;
    --color-neutral-primary-strong: #2a3f63;
    --color-neutral-secondary-soft: #15233d;
    --color-neutral-secondary: #1b2a46;
    --color-neutral-secondary-medium: #213252;
    --color-neutral-secondary-strong: #2a3f63;
    --color-neutral-secondary-strongest: #334a72;
    --color-neutral-tertiary-soft: #1b2a46;
    --color-neutral-tertiary: #213252;
    --color-neutral-tertiary-medium: #2a3f63;

    --text-strong: #eef4ff;
    --text-heading: #eef4ff;
    --text-body: #d4e0f5;
    --text-main: #d4e0f5;
    --text-muted: #95a8c9;

    --border-main: #2a3f63;
    --border-soft: #223553;

    --overlay: rgba(2, 8, 18, 0.65);

    --canvas-bg: #0b1528;
    --canvas-dot: rgba(140, 166, 210, 0.25);

    --shadow-sm: 0 2px 12px rgba(2, 8, 18, 0.35);
    --shadow-md: 0 10px 32px rgba(2, 8, 18, 0.5);
    --shadow-lg: 0 20px 56px rgba(2, 8, 18, 0.7);

    --topbar-user-name: #eef4ff;
    --topbar-user-level: #60a5fa;
    --topbar-user-menu-trigger: #95a8c9;
    --topbar-user-menu-trigger-hover: #eef4ff;

    --scrollbar-track: transparent;
    --scrollbar-thumb: var(--border-main);
    --scrollbar-thumb-hover: var(--brand-500);
    --scrollbar-thumb-border: transparent;

    --comic-card-hover-bg: var(--bg-surface);
    --comic-card-hover-border: var(--brand-500);

    --comic-share-project-name: var(--text-strong);
    --comic-share-badge-bg: rgba(59, 130, 246, 0.18);
    --comic-share-badge-border: rgba(96, 165, 250, 0.32);
    --comic-share-badge-text: #bfdbfe;

    --comic-export-title: #f8fafc;
    --comic-export-label: #cbd5e1;
    --comic-export-hint: var(--text-muted);
    --comic-export-input-bg: rgba(15, 23, 42, 0.92);
    --comic-export-input-border: rgba(71, 85, 105, 0.62);
    --comic-export-input-text: #f8fafc;
    --comic-export-input-placeholder: #64748b;
    --comic-export-input-readonly-bg: rgba(15, 23, 42, 0.78);
    --comic-export-input-readonly-text: #e2e8f0;
    --comic-export-cancel-bg: rgba(30, 41, 59, 0.9);
    --comic-export-cancel-border: rgba(100, 116, 139, 0.62);
    --comic-export-cancel-text: #e2e8f0;
    --comic-export-cancel-hover-bg: rgba(51, 65, 85, 0.9);
    --comic-export-cancel-hover-border: rgba(100, 116, 139, 0.72);
    --comic-export-cancel-hover-text: #f8fafc;

    --comic-form-control-bg: var(--bg-elevated);
    --comic-form-control-border: var(--border-main);
    --comic-form-control-text: var(--text-main);
    --comic-form-control-focus-bg: var(--bg-elevated);
    --comic-form-control-focus-border: var(--brand-500);
    --comic-form-control-focus-ring: rgba(37, 99, 235, 0.16);
    --comic-form-option-bg: rgba(15, 23, 42, 0.92);
    --comic-form-option-text: var(--text-main);
    --comic-form-option-checked-bg: rgba(37, 99, 235, 0.18);
    --comic-form-option-checked-text: var(--text-strong);
    --ui-select-option-bg: rgba(15, 23, 42, 0.96);
    --ui-select-option-text: var(--text-main);
    --ui-select-option-checked-bg: rgba(37, 99, 235, 0.22);
    --ui-select-option-checked-text: var(--text-strong);

    --comic-surface-bg: var(--bg-elevated);
    --comic-surface-border: var(--border-main);
    --comic-surface-hover-bg: var(--bg-surface);
    --comic-surface-hover-border: var(--brand-500);
    --comic-surface-text-muted: var(--text-main);

    --comic-step4-wrap-bg: var(--bg-surface);
    --comic-step4-wrap-border: var(--border-main);
    --comic-step4-wrap-shadow: var(--shadow-sm);
    --comic-step4-thead-bg: var(--bg-surface-2);
    --comic-step4-thead-text: var(--text-main);
    --comic-step4-row-bg: var(--bg-surface);
    --comic-step4-row-hover-bg: var(--bg-elevated);
    --comic-step4-row-border: var(--border-soft);
    --comic-step4-media-list-bg: var(--bg-elevated);
    --comic-step4-media-list-border: var(--border-main);
    --comic-step4-media-list-shadow: none;

    --comic-media-bg: var(--bg-surface);
    --comic-media-border: rgba(100, 116, 139, 0.34);
    --comic-media-shadow: 0 8px 18px rgba(2, 6, 23, 0.35);
    --comic-media-hover-border: rgba(56, 189, 248, 0.72);
    --comic-media-hover-shadow: 0 10px 22px rgba(2, 132, 199, 0.2);
    --comic-media-upload-border: rgba(148, 163, 184, 0.42);
    --comic-media-upload-bg: linear-gradient(145deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.72));
    --comic-media-upload-trigger: rgba(226, 232, 240, 0.9);
    --comic-media-upload-trigger-hover-bg: rgba(51, 65, 85, 0.46);
    --comic-media-upload-trigger-hover-text: #f8fafc;
    --comic-media-combined-bg: rgba(15, 23, 42, 0.42);
    --comic-media-combined-border: rgba(148, 163, 184, 0.38);
    --comic-media-combined-text: rgba(226, 232, 240, 0.92);
    --comic-media-combined-hover-bg: rgba(30, 41, 59, 0.66);
    --comic-media-combined-hover-border: rgba(148, 163, 184, 0.5);
    --comic-media-combined-hover-text: rgba(226, 232, 240, 0.92);
    --comic-media-generate-combined-bg: rgba(15, 23, 42, 0.42);
    --comic-media-generate-combined-border: rgba(56, 189, 248, 0.5);
    --comic-media-generate-combined-text: #bae6fd;
    --comic-media-generate-image-bg: linear-gradient(145deg, rgba(14, 116, 144, 0.25), rgba(15, 23, 42, 0.9));
    --comic-media-generate-image-border: rgba(56, 189, 248, 0.56);
    --comic-media-generate-video-bg: linear-gradient(145deg, rgba(154, 52, 18, 0.24), rgba(15, 23, 42, 0.9));
    --comic-media-generate-video-border: rgba(251, 146, 60, 0.56);
    --comic-media-generate-text: rgba(241, 245, 249, 0.94);
    --comic-media-selected-bg: var(--brand-soft);
    --comic-media-selected-border: rgba(56, 189, 248, 0.88);
    --comic-media-selected-shadow: 0 0 0 1px rgba(56, 189, 248, 0.45), 0 12px 24px rgba(2, 132, 199, 0.2);
    --comic-media-thumb-bg: rgba(15, 23, 42, 0.68);
    --comic-media-overlay-bg: radial-gradient(circle at center, rgba(15, 23, 42, 0.34) 0%, rgba(15, 23, 42, 0.5) 62%, rgba(2, 6, 23, 0.64) 100%);
    --comic-media-icon-bg: rgba(15, 23, 42, 0.6);
    --comic-media-icon-border: rgba(203, 213, 225, 0.34);
    --comic-media-icon-text: rgba(226, 232, 240, 0.92);
    --comic-media-icon-shadow: none;
    --comic-media-icon-hover-bg: rgba(30, 41, 59, 0.74);
    --comic-media-icon-hover-border: rgba(203, 213, 225, 0.52);
    --comic-media-icon-hover-text: rgba(226, 232, 240, 0.92);
    --comic-media-icon-active-bg: rgba(22, 78, 99, 0.62);
    --comic-media-icon-active-border: rgba(203, 213, 225, 0.42);
    --comic-media-icon-active-text: rgba(224, 242, 254, 0.95);
    --comic-media-selected-badge-bg: rgba(6, 95, 70, 0.92);
    --comic-media-selected-badge-border: rgba(16, 185, 129, 0.62);
    --comic-media-selected-badge-text: #d1fae5;
    --comic-media-selected-badge-shadow: 0 4px 10px rgba(2, 6, 23, 0.34);
    --comic-media-status-bg: rgba(15, 23, 42, 0.76);
    --comic-media-status-border: rgba(148, 163, 184, 0.38);
    --comic-media-status-text: #cbd5e1;
    --comic-media-status-loading-bg: rgba(15, 23, 42, 0.76);
    --comic-media-status-loading-border: rgba(96, 165, 250, 0.62);
    --comic-media-status-loading-text: #dbeafe;
    --comic-media-status-spinner-border: rgba(219, 234, 254, 0.38);
    --comic-media-status-spinner-top: #60a5fa;
    --comic-media-status-failed-bg: rgba(127, 29, 29, 0.4);
    --comic-media-status-failed-border: rgba(248, 113, 113, 0.62);
    --comic-media-status-failed-text: #fee2e2;
    --comic-scene-row-selected-bg: rgba(2, 132, 199, 0.14);
    --comic-scene-divider: rgba(148, 163, 184, 0.42);
    --comic-scene-unsaved-border: rgba(239, 68, 68, 0.72);
    --comic-scene-unsaved-ring: rgba(239, 68, 68, 0.2);
    --comic-scene-action-summary-bg: rgba(15, 23, 42, 0.28);
    --comic-scene-action-summary-border: rgba(148, 163, 184, 0.32);
    --comic-scene-action-summary-text: rgba(226, 232, 240, 0.92);
    --comic-scene-action-summary-hover-bg: rgba(30, 41, 59, 0.38);
    --comic-scene-action-summary-hover-border: rgba(148, 163, 184, 0.55);
    --comic-scene-action-summary-hover-text: #f8fafc;
    --comic-scene-action-summary-focus-ring: rgba(56, 189, 248, 0.22);
    --comic-scene-action-summary-inset-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    --comic-scene-action-menu-bg: rgba(15, 23, 42, 0.96);
    --comic-scene-action-menu-border: rgba(100, 116, 139, 0.42);
    --comic-scene-action-menu-shadow: 0 10px 22px rgba(2, 6, 23, 0.4);
    --comic-scene-action-item-bg: rgba(30, 41, 59, 0.62);
    --comic-scene-action-item-border: rgba(100, 116, 139, 0.4);
    --comic-scene-action-item-text: #e2e8f0;
    --comic-scene-action-item-hover-bg: rgba(30, 41, 59, 0.88);
    --comic-scene-action-item-hover-border: rgba(56, 189, 248, 0.56);
    --comic-scene-action-item-hover-text: #f8fafc;
    --comic-scene-action-image-bg: rgba(14, 116, 144, 0.18);
    --comic-scene-action-image-border: rgba(56, 189, 248, 0.42);
    --comic-scene-action-image-text: #bae6fd;
    --comic-scene-action-video-bg: rgba(154, 52, 18, 0.16);
    --comic-scene-action-video-border: rgba(251, 146, 60, 0.42);
    --comic-scene-action-video-text: #fed7aa;
    --comic-step4-image-list-bg: rgba(15, 23, 42, 0.22);
    --comic-step4-image-list-border: rgba(100, 116, 139, 0.28);
    --comic-step4-video-list-bg: rgba(15, 23, 42, 0.22);
    --comic-step4-video-list-border: rgba(100, 116, 139, 0.28);
    --comic-task-pending-images-bg: rgba(6, 95, 70, 0.92);
    --comic-task-pending-images-border: rgba(16, 185, 129, 0.62);
    --comic-task-pending-images-text: #d1fae5;
    --comic-task-pending-images-shadow: 0 4px 10px rgba(2, 6, 23, 0.34);
    --comic-task-pending-videos-bg: rgba(154, 52, 18, 0.94);
    --comic-task-pending-videos-border: rgba(251, 146, 60, 0.64);
    --comic-task-pending-videos-text: #ffedd5;
    --comic-task-pending-videos-shadow: 0 4px 10px rgba(2, 6, 23, 0.34);
    --comic-loading-spinner-border: rgba(255, 255, 255, 0.38);
    --comic-loading-spinner-top: #ffffff;
    --comic-share-preview-hint-bg: rgba(2, 6, 23, 0.78);
    --comic-share-preview-hint-border: rgba(148, 163, 184, 0.4);
    --comic-share-preview-hint-text: #e2e8f0;
    --comic-share-prompt-bg: rgba(15, 23, 42, 0.32);
    --comic-share-prompt-border: rgba(148, 163, 184, 0.24);
    --comic-loading-overlay-bg: rgba(2, 6, 23, 0.8);
    --comic-loading-message: #f8fafc;
    --comic-preview-overlay-bg: rgba(2, 6, 23, 0.82);
    --comic-preview-content-border: rgba(148, 163, 184, 0.38);
    --comic-preview-content-shadow: 0 20px 56px rgba(15, 23, 42, 0.62);
    --comic-preview-video-bg: #000000;
    --comic-preview-close-bg: rgba(15, 23, 42, 0.92);
    --comic-preview-close-border: rgba(148, 163, 184, 0.45);
    --comic-preview-close-text: #f8fafc;
    --comic-preview-close-hover-bg: rgba(30, 41, 59, 0.95);

    --draw-select-scheme: dark;
    --draw-loading-overlay-bg: rgba(11, 14, 20, 0.8);
    --draw-loading-overlay-filter: blur(6px) saturate(1.05);
    --draw-loading-step-bg: rgba(27, 27, 30, 0.8);
    --draw-loading-step-border: rgba(63, 63, 70, 0.5);
    --draw-loading-step-hover-bg: rgba(39, 39, 42, 0.9);
    --draw-loading-step-hover-border: rgba(82, 82, 91, 0.8);
    --draw-loading-step-hover-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    --draw-loading-step-active-bg: rgba(30, 58, 138, 0.3);
    --draw-loading-step-active-border: rgba(59, 130, 246, 0.8);
    --draw-loading-step-active-shadow: 0 0 20px rgba(59, 130, 246, 0.4), 0 0 40px rgba(59, 130, 246, 0.2), inset 0 0 20px rgba(59, 130, 246, 0.1);
    --draw-loading-step-complete-bg: rgba(22, 101, 52, 0.3);
    --draw-loading-step-complete-border: rgba(34, 197, 94, 0.8);
    --draw-node-border: rgba(95, 121, 164, 0.28);
    --draw-node-shadow: 0 10px 24px rgba(2, 8, 18, 0.28), 0 1px 4px rgba(2, 8, 18, 0.16);
    --draw-node-hover-border: rgba(96, 165, 250, 0.42);
    --draw-node-hover-shadow: 0 14px 30px rgba(2, 8, 18, 0.34), 0 2px 8px rgba(2, 8, 18, 0.2);
    --draw-node-selected-border: rgba(96, 165, 250, 0.78);
    --draw-node-selected-shadow: 0 0 0 1px rgba(96, 165, 250, 0.72), 0 0 0 4px rgba(59, 130, 246, 0.12), 0 18px 32px rgba(2, 8, 18, 0.42);
    --draw-node-status-queued-border: rgba(245, 158, 11, 0.44);
    --draw-node-status-queued-ring: rgba(245, 158, 11, 0.1);
    --draw-node-status-running-border: rgba(59, 130, 246, 0.46);
    --draw-node-status-running-ring: rgba(59, 130, 246, 0.1);
    --draw-node-status-running-pulse-border: rgba(96, 165, 250, 0.92);
    --draw-node-status-running-pulse-ring: rgba(59, 130, 246, 0.24);
    --draw-node-status-running-enter-border: rgba(59, 130, 246, 0.82);
    --draw-node-status-running-enter-ring: rgba(59, 130, 246, 0.22);
    --draw-node-status-success-border: rgba(16, 185, 129, 0.42);
    --draw-node-status-success-ring: rgba(16, 185, 129, 0.1);
    --draw-node-status-failed-border: rgba(239, 68, 68, 0.46);
    --draw-node-status-failed-ring: rgba(239, 68, 68, 0.1);
    --draw-node-status-failed-impact-border: rgba(248, 113, 113, 0.96);
    --draw-node-status-failed-impact-ring: rgba(239, 68, 68, 0.26);
    --draw-connection-color: rgba(127, 146, 179, 0.74);
    --draw-connection-temp-color: #9bb0d3;
    --draw-connection-delete-color: #ef4444;
    --draw-arrowhead-color: #7f92b3;
    --draw-arrowhead-hover-color: #4caf50;
    --draw-arrowhead-delete-color: #ef4444;
    --draw-connection-delete-icon-color: #8aa5d2;
    --draw-connection-delete-icon-hover-color: #ef4444;
    --draw-minimap-bg: rgba(15, 23, 42, 0.22);
    --draw-minimap-selected-stroke: #f8fafc;

    --recharge-text-muted-2: var(--text-muted);
    --recharge-text-strong-2: var(--text-strong);
    --recharge-order-status: #fbbf24;
    --recharge-order-countdown: #fde68a;
    --recharge-package-price: #a7f3d0;
    --recharge-close-border: #4b5563;
    --recharge-close-bg: #1f2937;
    --recharge-close-text: #cbd5e1;
    --recharge-close-hover-border: #6b7280;
    --recharge-close-hover-bg: #374151;
    --recharge-close-hover-text: #f3f4f6;
    --recharge-qr-dark: #0f172a;
    --recharge-qr-light: #ffffff;
    --recharge-qr-shell-bg: #ffffff;
    --asset-audio-hover-bg: rgba(59, 130, 246, 0.14);
    --asset-audio-disc-start: #3b82f6;
    --asset-audio-disc-end: #2563eb;
    --asset-audio-disc-shadow: 0 8px 20px rgba(37, 99, 235, 0.32);
    --asset-audio-disc-icon: #ffffff;
    --asset-type-video-badge-bg: rgba(96, 165, 250, 0.82);
    --asset-type-audio-badge-bg: rgba(56, 189, 248, 0.82);
    --task-status-queued-bg: rgba(251, 191, 36, 0.2);
    --task-status-queued-text: #fbbf24;
    --task-status-queued-border: rgba(251, 191, 36, 0.3);
    --task-status-running-bg: rgba(59, 130, 246, 0.2);
    --task-status-running-text: #3b82f6;
    --task-status-running-border: rgba(59, 130, 246, 0.3);
    --task-status-success-bg: rgba(34, 197, 94, 0.2);
    --task-status-success-text: #22c55e;
    --task-status-success-border: rgba(34, 197, 94, 0.3);
    --task-status-failed-bg: rgba(239, 68, 68, 0.2);
    --task-status-failed-text: #ef4444;
    --task-status-failed-border: rgba(239, 68, 68, 0.3);
    --task-status-cancelled-bg: rgba(14, 165, 233, 0.18);
    --task-status-cancelled-text: #38bdf8;
    --task-status-cancelled-border: rgba(14, 165, 233, 0.3);
    --task-status-idle-bg: rgba(148, 163, 184, 0.14);
    --task-status-idle-text: #94a3b8;
    --task-status-idle-border: rgba(148, 163, 184, 0.35);
    --task-status-queued-fill: rgba(251, 191, 36, 0.72);
    --task-status-running-fill: rgba(59, 130, 246, 0.78);
    --task-status-success-fill: rgba(16, 185, 129, 0.78);
    --task-status-failed-fill: rgba(239, 68, 68, 0.78);
    --task-status-idle-fill: rgba(148, 163, 184, 0.5);
    --chip-brand-bg: var(--brand-soft);
    --chip-brand-text: var(--brand-500);
    --chip-brand-border: color-mix(in srgb, var(--brand-500) 24%, transparent);
    --chip-muted-bg: color-mix(in srgb, var(--text-muted) 14%, transparent);
    --chip-muted-text: var(--text-muted);
    --chip-muted-border: color-mix(in srgb, var(--text-muted) 20%, transparent);
    --chip-warning-bg: var(--task-status-queued-bg);
    --chip-warning-text: var(--task-status-queued-text);
    --chip-warning-border: var(--task-status-queued-border);
    --chip-success-bg: var(--task-status-success-bg);
    --chip-success-text: var(--task-status-success-text);
    --chip-success-border: var(--task-status-success-border);
    --chip-danger-bg: var(--task-status-failed-bg);
    --chip-danger-text: var(--task-status-failed-text);
    --chip-danger-border: var(--task-status-failed-border);

    --workflow-asset-scroll-track: rgba(15, 23, 42, 0.28);
    --workflow-asset-scroll-thumb: rgba(148, 163, 184, 0.44);
    --workflow-asset-scroll-thumb-hover: rgba(191, 219, 254, 0.62);
    --workflow-asset-scroll-thumb-active: rgba(219, 234, 254, 0.82);
    --workflow-asset-type-border: rgba(255, 255, 255, 0.16);
    --workflow-project-header-glow: radial-gradient(circle, rgba(59, 130, 246, 0.22) 0%, rgba(37, 99, 235, 0) 72%);
    --workflow-project-context-border: rgba(96, 165, 250, 0.26);
    --workflow-project-context-bg: linear-gradient(120deg, rgba(37, 99, 235, 0.16), rgba(30, 64, 175, 0.06));
    --workflow-project-batch-border: rgba(96, 165, 250, 0.28);
    --workflow-project-batch-bg: rgba(37, 99, 235, 0.12);
    --workflow-project-card-hover-border: rgba(96, 165, 250, 0.42);
    --workflow-project-group-border: rgba(56, 189, 248, 0.36);
    --workflow-project-group-accent: rgba(56, 189, 248, 0.82);
    --workflow-project-group-highlight: radial-gradient(140px 100px at 96% 4%, rgba(56, 189, 248, 0.22), transparent 70%);
    --workflow-project-group-bg: linear-gradient(135deg, rgba(8, 145, 178, 0.24) 0%, rgba(8, 145, 178, 0.1) 42%, var(--bg-elevated) 100%);
    --workflow-project-group-inset: inset 0 0 0 1px rgba(56, 189, 248, 0.12);
    --workflow-project-group-shadow: 0 10px 24px rgba(2, 132, 199, 0.16);
    --workflow-project-group-pill-border: rgba(103, 232, 249, 0.32);
    --workflow-project-group-pill-bg: rgba(8, 145, 178, 0.22);
    --workflow-project-group-pill-text: #a5f3fc;
    --workflow-project-group-hover-border: rgba(103, 232, 249, 0.5);
    --workflow-project-group-hover-shadow: 0 14px 28px rgba(8, 145, 178, 0.22);
    --workflow-project-group-hover-inset: inset 0 0 0 1px rgba(103, 232, 249, 0.14);
    --workflow-project-group-icon-border: rgba(96, 165, 250, 0.32);
    --workflow-project-group-icon-bg: rgba(37, 99, 235, 0.18);
    --workflow-project-name-focus-outline: rgba(96, 165, 250, 0.72);
    --workflow-project-tag-bg: rgba(37, 99, 235, 0.16);
    --workflow-project-tag-border: rgba(96, 165, 250, 0.3);
    --workflow-project-tag-text: #bfdbfe;
    --workflow-project-count-bg: rgba(37, 99, 235, 0.16);
    --workflow-project-count-border: rgba(96, 165, 250, 0.26);
    --workflow-project-count-text: #bfdbfe;
    --workflow-side-panel-shadow-left: -12px 0 28px rgba(0, 0, 0, 0.24);
    --workflow-side-panel-shadow-right: 12px 0 28px rgba(0, 0, 0, 0.24);
    --workflow-asset-search-focus-border: var(--brand-500);
    --workflow-asset-search-focus-ring: 0 0 0 2px rgba(37, 99, 235, 0.16);
    --workflow-asset-search-clear-hover-bg: rgba(148, 163, 184, 0.18);
    --workflow-asset-project-active-text: var(--brand-600);
    --workflow-asset-project-badge-text: #bfdbfe;
    --workflow-asset-project-badge-border: rgba(147, 197, 253, 0.45);
    --workflow-asset-project-badge-bg: rgba(30, 64, 175, 0.35);
    --workflow-asset-type-text: #ffffff;
    --workflow-asset-type-bg: rgba(15, 23, 42, 0.75);
    --workflow-asset-type-image-bg: rgba(37, 99, 235, 0.72);
    --workflow-asset-type-video-bg: rgba(8, 145, 178, 0.78);
    --workflow-asset-readonly-border: rgba(248, 250, 252, 0.32);
    --workflow-asset-readonly-bg: rgba(30, 41, 59, 0.78);
    --workflow-asset-readonly-text: #f8fafc;
    --workflow-task-type-text-bg: rgba(156, 163, 175, 0.1);
    --workflow-task-type-image-text: #c084fc;
    --workflow-task-type-image-bg: rgba(168, 85, 247, 0.14);
    --workflow-task-type-video-text: #818cf8;
    --workflow-task-type-video-bg: rgba(99, 102, 241, 0.14);
    --workflow-task-result-download-bg: var(--brand-500);
    --workflow-task-result-download-border: var(--brand-600);
    --workflow-task-result-download-text: #ffffff;
    --workflow-task-result-download-shadow: 0 3px 10px rgba(15, 23, 42, 0.34);
    --workflow-task-result-download-hover-bg: var(--brand-600);
    --workflow-task-result-download-hover-border: var(--brand-700);
    --workflow-task-result-text-bg: var(--bg-elevated);
    --workflow-task-result-text-border: var(--border-main);
    --workflow-task-result-text-color: var(--text-main);
    --workflow-task-result-text-scrollbar-track: var(--brand-soft);
    --workflow-task-result-text-scrollbar-thumb: rgba(59, 130, 246, 0.3);
    --workflow-task-result-text-scrollbar-thumb-hover: rgba(59, 130, 246, 0.5);
    --task-type-text-color: #94a3b8;
    --task-type-image-color: #c084fc;
    --task-type-video-color: #818cf8;
    --agent-use-panel-shadow: 0 10px 32px rgba(2, 8, 18, 0.5);
    --agent-use-topbar-border: rgba(148, 163, 184, 0.16);
    --agent-use-app-icon-bg: linear-gradient(135deg, var(--brand-500) 0%, #8b5cf6 100%);
    --agent-use-app-icon-fg: var(--button-primary-fg);
    --agent-use-tab-group-ring: inset 0 0 0 1px rgba(148, 163, 184, 0.18);
    --agent-use-tab-active-fg: var(--button-primary-fg);
    --agent-use-tab-active-shadow: 0 4px 10px rgba(37, 99, 235, 0.28);
    --agent-use-section-card-ring: inset 0 0 0 1px rgba(148, 163, 184, 0.18);
    --agent-use-section-card-hover-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.24), 0 12px 26px rgba(0, 0, 0, 0.22);
    --agent-use-preview-card-ring: inset 0 0 0 1px rgba(148, 163, 184, 0.18);
    --agent-use-overlay-btn-bg: rgba(15, 23, 42, 0.72);
    --agent-use-overlay-btn-fg: var(--button-primary-fg);
    --agent-use-overlay-btn-hover-bg: rgba(220, 38, 38, 0.88);
    --agent-use-dropdown-panel-shadow: 0 14px 32px rgba(0, 0, 0, 0.28);
    --agent-use-item-thumb-ring: inset 0 0 0 1px rgba(148, 163, 184, 0.18);
    --agent-use-task-item-ring: inset 0 0 0 1px rgba(148, 163, 184, 0.16);
    --agent-use-task-item-hover-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.24), 0 14px 28px rgba(0, 0, 0, 0.24);
    --agent-use-loading-divider: rgba(148, 163, 184, 0.16);
    --agent-use-back-btn-ring: inset 0 0 0 1px rgba(148, 163, 184, 0.18);
    --agent-use-back-btn-hover-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.24), 0 10px 24px rgba(2, 8, 18, 0.3);
    --agent-use-item-hover-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
    --agent-use-media-hover-shadow: 0 14px 28px rgba(0, 0, 0, 0.4);
    --agent-use-utility-shadow-2xl: 0 30px 56px -12px rgba(0, 0, 0, 0.42);
    --agent-use-text-card-ring: inset 0 0 0 1px rgba(148, 163, 184, 0.18);
    --agent-use-text-card-hover-ring: inset 0 0 0 1px rgba(96, 165, 250, 0.28);
    --app-shell-topbar-border: rgba(148, 163, 184, 0.14);
    --app-shell-sidebar-border: rgba(148, 163, 184, 0.12);
    --app-shell-sidebar-inset-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.02);
    --app-shell-disk-card-shadow: 0 12px 30px rgba(0, 0, 0, 0.24);
    --app-shell-disk-fill-warn: #fbbf24;
    --app-shell-disk-fill-danger: #f87171;
    --app-shell-sidebar-active-shadow: 0 12px 30px rgba(37, 99, 235, 0.22);
    --app-shell-logo-fg: var(--button-primary-fg);
    --app-shell-modal-close-hover-bg: rgba(148, 163, 184, 0.14);
    --app-shell-focus-ring: 0 0 0 2px rgba(37, 99, 235, 0.18);
    --app-shell-topbar-shadow: 0 12px 30px rgba(0, 0, 0, 0.24);
    --app-shell-user-recharge-shadow: 0 6px 12px rgba(37, 99, 235, 0.2);
    --app-shell-logout-hover-bg: rgba(239, 68, 68, 0.18);
    --overlay-float-text: #f8fafc;
    --overlay-float-border: rgba(148, 163, 184, 0.46);
    --overlay-float-bg: rgba(15, 23, 42, 0.76);
    --overlay-float-hover-text: #ffffff;
    --overlay-float-hover-border: rgba(203, 213, 225, 0.56);
    --overlay-float-hover-bg: rgba(30, 41, 59, 0.9);
    --overlay-counter-border: rgba(148, 163, 184, 0.42);
    --overlay-counter-bg: rgba(15, 23, 42, 0.72);
    --task-thumb-download-text: #f8fafc;
    --task-thumb-download-border: rgba(148, 163, 184, 0.48);
    --task-thumb-download-bg: rgba(15, 23, 42, 0.82);
    --task-thumb-download-shadow: 0 2px 6px rgba(15, 23, 42, 0.36);
    --task-thumb-download-hover-text: #ffffff;
    --task-thumb-download-hover-border: rgba(226, 232, 240, 0.64);
    --task-thumb-download-hover-bg: rgba(30, 41, 59, 0.92);
    --danger-btn-bg: var(--danger-600);
    --danger-btn-border: var(--danger-700);
    --danger-btn-text: var(--button-primary-fg);
    --danger-btn-hover-bg: #b91c1c;
    --danger-btn-hover-border: #991b1b;
    --feedback-ok-text: #86efac;
    --feedback-error-text: #fecaca;

    --task-history-card-hover-border: rgba(96, 165, 250, 0.28);
    --task-history-card-hover-shadow: 0 18px 36px rgba(0, 0, 0, 0.28);
    --task-history-media-hover-border: rgba(96, 165, 250, 0.28);
    --task-history-media-hover-shadow: 0 14px 28px rgba(0, 0, 0, 0.28);
    --task-history-media-overlay-bg: linear-gradient(180deg, rgba(8, 15, 30, 0.08) 0%, rgba(8, 15, 30, 0.42) 100%);
    --task-history-media-overlay-video-bg: linear-gradient(180deg, rgba(8, 15, 30, 0.18) 0%, rgba(8, 15, 30, 0.5) 100%);
    --task-history-media-badge-bg: rgba(8, 15, 30, 0.52);
    --task-history-media-badge-hover-bg: rgba(8, 15, 30, 0.68);
    --task-history-media-badge-text: rgba(255, 255, 255, 0.92);
    --task-history-media-badge-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
    --task-history-text-result-hover-border: rgba(96, 165, 250, 0.26);
    --task-history-text-result-hover-shadow: 0 12px 26px rgba(0, 0, 0, 0.24);
    --task-history-text-result-meta: rgba(125, 189, 255, 0.86);
    --task-history-action-hover-bg: rgba(255, 255, 255, 0.06);
    --task-history-action-hover-border: rgba(148, 163, 184, 0.14);
    --task-history-created-at: rgba(226, 232, 240, 0.92);
    --task-history-failed-border: rgba(178, 118, 118, 0.16);
    --task-history-failed-bg: linear-gradient(180deg, rgba(58, 37, 44, 0.52) 0%, rgba(42, 30, 35, 0.62) 100%);
    --task-history-failed-icon: rgba(220, 171, 171, 0.58);
    --task-history-failed-focus-shadow: 0 0 0 4px rgba(248, 113, 113, 0.14);
    --task-history-failed-tooltip-bg: rgba(12, 18, 30, 0.96);
    --task-history-failed-tooltip-text: rgba(241, 245, 249, 0.92);
    --task-history-failed-tooltip-shadow: 0 16px 32px rgba(0, 0, 0, 0.32);
    --task-history-failed-tooltip-arrow: rgba(12, 18, 30, 0.96);
    --task-history-processing-base: linear-gradient(180deg, rgba(23, 23, 28, 0.98) 0%, rgba(18, 18, 24, 0.98) 100%);
    --task-history-processing-color-1: rgba(26, 34, 50, 0.98);
    --task-history-processing-color-2: rgba(57, 92, 140, 0.86);
    --task-history-processing-color-3: rgba(115, 170, 219, 0.78);
    --task-history-processing-color-4: rgba(194, 177, 201, 0.58);
    --task-history-processing-color-5: rgba(66, 157, 214, 0.86);
    --task-history-processing-blob-1: rgba(125, 191, 255, 0.24);
    --task-history-processing-blob-2: rgba(255, 229, 243, 0.1);
    --task-history-processing-blob-3: rgba(96, 200, 255, 0.42);
    --task-history-processing-line-bg: rgba(255, 255, 255, 0.12);
    --task-history-processing-caption-bg: rgba(255, 255, 255, 0.08);
    --task-history-processing-caption-text: rgba(255, 255, 255, 0.74);
    --task-history-processing-caption-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
}

html,
body {
    min-height: 100%;
}

html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
    transition: none !important;
    animation: none !important;
}

body {
    font-family: var(--font-body);
    background: var(--bg-canvas);
    color: var(--text-main);
    transition: background-color 180ms ease, color 180ms ease;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    color: var(--text-strong);
}

.admin-page-title {
    color: var(--text-strong);
}

a {
    color: inherit;
}