/* User-level appearance modes. Dark remains the default; light uses a macOS-like soft neutral surface. */
html[data-theme="light"] {
    color-scheme: light;
    --color-bg: #f5f5f7;
    --color-surface: rgba(255, 255, 255, 0.76);
    --color-surface-hover: rgba(51, 46, 116, 0.08);
    --color-border: rgba(28, 28, 42, 0.14);
    --color-text: #1d1d1f;
    --color-text-secondary: #4f586a;
    --color-text-tertiary: #687287;
    --color-accent: #635bdb;
    --color-accent-glow: rgba(99, 91, 219, 0.2);
    --bg: #f5f5f7;
    --bg-elevated: rgba(255, 255, 255, 0.8);
    --bg-strong: rgba(53, 49, 116, 0.1);
    --border: rgba(28, 28, 42, 0.14);
    --text: #1d1d1f;
    --muted: #4f586a;
    --dim: #687287;
    --panel: rgba(255, 255, 255, 0.56);
    --platform-scroll-track: rgba(213, 215, 224, 0.72);
    --platform-scroll-thumb: rgba(109, 112, 132, 0.52);
    --platform-scroll-thumb-hover: rgba(99, 91, 219, 0.72);
}

html[data-theme="light"] body {
    background:
        radial-gradient(circle at 10% -10%, rgba(139, 124, 240, 0.24), transparent 34%),
        radial-gradient(circle at 100% 100%, rgba(82, 173, 226, 0.16), transparent 32%),
        #f4f4f7 !important;
    color: #1d1d1f;
}

html[data-theme="light"] .header {
    background: rgba(255, 255, 255, 0.78) !important;
    border-bottom-color: rgba(28, 28, 42, 0.1) !important;
}

html[data-theme="light"] .sidebar,
html[data-theme="light"] .chat-sidebar {
    background: rgba(249, 249, 252, 0.58) !important;
    border-color: rgba(28, 28, 42, 0.12) !important;
    backdrop-filter: blur(22px) saturate(1.15);
    -webkit-backdrop-filter: blur(22px) saturate(1.15);
}

html[data-theme="light"] :is(.card, .panel, .ui-panel, .ui-workspace-section, .asset-card, .timeline-card, .template-card, .summary-card, .result-card, .package-card, .agent-action-card) {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.7), rgba(250, 250, 253, 0.48)) !important;
    border-color: rgba(28, 28, 42, 0.13) !important;
    box-shadow: 0 10px 28px rgba(37, 35, 64, 0.055), inset 0 1px 0 rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(18px) saturate(1.12);
    -webkit-backdrop-filter: blur(18px) saturate(1.12);
}

html[data-theme="light"] :is(input, textarea, select, .mac-select-trigger, .mac-select-menu, .project-multi-menu, .asset-picker-menu, .chat-attach-menu) {
    background: rgba(255, 255, 255, 0.82) !important;
    border-color: rgba(28, 28, 42, 0.16) !important;
    color: #1d1d1f !important;
}

html[data-theme="light"] :is(input, textarea, select)::placeholder { color: #8a8e99 !important; }
html[data-theme="light"] :is(.mac-select-option, .project-check, .chat-attach-menu button) { color: #272733 !important; }
html[data-theme="light"] .mac-select-option:hover { background: rgba(99, 91, 219, 0.12); }
html[data-theme="light"] .mac-select-option.selected { background: rgba(99, 91, 219, 0.2); color: #302c7a !important; }

html[data-theme="light"] :is(.modal-card, .ui-modal-panel, .image-modal-panel, .video-modal-panel, .platform-auth-card, .platform-confirm-card) {
    background: rgba(250, 250, 252, 0.98) !important;
    border-color: rgba(28, 28, 42, 0.16) !important;
    color: #1d1d1f !important;
}

html[data-theme="light"] :is(.image-modal, .video-modal, .modal, .platform-auth-modal, .platform-confirm-modal) {
    background: rgba(30, 30, 40, 0.32) !important;
}

html[data-theme="light"] :is(.nav-link, .nav-links a, .logo, .card-title, .panel-title, h1, h2, h3) { color: #25252b; }
html[data-theme="light"] .nav-link-active,
html[data-theme="light"] .nav-links a.active { color: #4d46bf; background: rgba(99, 91, 219, 0.12); }

html[data-theme="light"] .bg-animation { opacity: 0.3; }
html[data-theme="light"] :is(.result-card-media, .asset-media, .timeline-media, .reference-thumb, .asset-detail-media) { background: #e8e9ef; }

html[data-theme="light"] :is(.hint, .muted, .step-kicker, .card-body, .asset-meta, .detail-label, .detail-value, .asset-prompt, .project-count, .stat span, .agent-action-desc, .asset-link-sub, .asset-preview-meta) {
    color: #596377 !important;
}

html[data-theme="light"] :is(label, .field label, .control-group label, .card-label, .agent-action-kicker, .help-box strong, .story-template-title) {
    color: #5149af !important;
}

html[data-theme="light"] :is(.btn, .tab, .grid-opt, .result-card-btn, .result-card-download, .asset-actions .btn, .timeline-actions .btn) {
    background: rgba(255, 255, 255, 0.66) !important;
    border-color: rgba(55, 54, 82, 0.16) !important;
    color: #454f63 !important;
}

html[data-theme="light"] :is(.btn.primary, .tab.active, .grid-opt.active):not(:disabled) {
    border-color: rgba(87, 75, 201, 0.58) !important;
    background: linear-gradient(135deg, #6b5be2, #8a70e7) !important;
    color: #fff !important;
    box-shadow: 0 6px 15px rgba(96, 79, 207, 0.18);
}

html[data-theme="light"] :is(.btn:not(.primary), .tab:not(.active), .grid-opt:not(.active), .result-card-btn, .result-card-download):hover:not(:disabled) {
    border-color: rgba(87, 75, 201, 0.42) !important;
    background: rgba(102, 86, 218, 0.12) !important;
    color: #4139aa !important;
}

html[data-theme="light"] :is(.project-item.active, .step-item.active, .mode-chip.active) {
    background: rgba(108, 91, 225, 0.15) !important;
    border-color: rgba(108, 91, 225, 0.42) !important;
    color: #4d43bd !important;
}

html[data-theme="light"] .platform-auth-menu {
    background: rgba(250, 250, 253, 0.96) !important;
    border-color: rgba(43, 42, 65, 0.16) !important;
    box-shadow: 0 18px 46px rgba(42, 39, 72, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
}

html[data-theme="light"] .platform-auth-btn {
    border-color: rgba(43, 42, 65, 0.16) !important;
    background: rgba(255, 255, 255, 0.76) !important;
    color: #30394a !important;
    font-weight: 650;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

html[data-theme="light"] .platform-auth-btn:hover,
html[data-theme="light"] .platform-auth-wrap.open .platform-auth-btn {
    border-color: rgba(99, 91, 219, 0.42) !important;
    background: rgba(99, 91, 219, 0.1) !important;
    color: #4139aa !important;
}

html[data-theme="light"] .platform-auth-meta {
    color: #4e586b !important;
    border-bottom-color: rgba(43, 42, 65, 0.1) !important;
}

html[data-theme="light"] .platform-auth-menu :is(button, a) {
    color: #2f3748 !important;
}

html[data-theme="light"] .platform-theme-menu-btn {
    border-top-color: rgba(43, 42, 65, 0.1) !important;
}

html[data-theme="light"] .hero.home-tech {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

html[data-theme="light"] .home-tech-background {
    background: transparent !important;
}

html[data-theme="light"] .home-tech-background::before {
    background: transparent !important;
}

html[data-theme="light"] .home-page {
    background:
        radial-gradient(ellipse at 50% 32%, rgba(105, 134, 212, 0.14), transparent 30%),
        linear-gradient(180deg, rgba(238, 241, 250, 0.5), rgba(229, 234, 247, 0.32));
}

html[data-theme="light"] .home-tech-canvas {
    opacity: 1 !important;
}

html[data-theme="light"] .hero.home-tech {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html[data-theme="light"] .modules .module-card {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.5), rgba(246, 248, 254, 0.28)) !important;
    border-color: rgba(62, 76, 120, 0.16) !important;
    box-shadow: 0 12px 28px rgba(46, 60, 103, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
}

html[data-theme="light"] .home-tech-title {
    color: #313982;
    text-shadow: 0 0 20px rgba(119, 130, 231, 0.32), 0 0 56px rgba(104, 177, 224, 0.2);
}

html[data-theme="light"] .home-tech-title {
    position: relative;
    z-index: 1;
}

html[data-theme="light"] .project-multi-trigger {
    background: rgba(255, 255, 255, 0.76) !important;
    border-color: rgba(55, 54, 82, 0.16) !important;
    color: #4d5668 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
}

html[data-theme="light"] .project-multi-trigger:hover,
html[data-theme="light"] .project-multi.open .project-multi-trigger {
    border-color: rgba(99, 91, 219, 0.42) !important;
    background: rgba(99, 91, 219, 0.09) !important;
    color: #4139aa !important;
}

html[data-theme="light"] .project-multi-menu {
    background: rgba(250, 250, 253, 0.97) !important;
    color: #31394a !important;
    box-shadow: 0 14px 34px rgba(42, 39, 72, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
}

html[data-theme="light"] .project-multi-menu .project-check {
    color: #4d5668 !important;
}

html[data-theme="light"] .platform-auth-menu :is(button, a):hover {
    background: rgba(99, 91, 219, 0.1) !important;
    color: #4139aa !important;
}

html[data-theme="light"] .task-table {
    color: #384255;
}

html[data-theme="light"] .task-table th {
    color: #586277 !important;
    background: rgba(238, 239, 247, 0.64) !important;
    border-bottom-color: rgba(45, 44, 67, 0.1) !important;
}

html[data-theme="light"] .task-table td {
    border-bottom-color: rgba(45, 44, 67, 0.08) !important;
}

html[data-theme="light"] .task-table tbody tr:hover {
    background: rgba(102, 86, 218, 0.055) !important;
}

html[data-theme="light"] .task-title { color: #242d3d !important; }
html[data-theme="light"] .task-sub,
html[data-theme="light"] .summary-label,
html[data-theme="light"] .drawer-subtitle,
html[data-theme="light"] .detail-label { color: #687287 !important; }
html[data-theme="light"] .task-table td:not(.task-select-col) { color: #3d4658; }

html[data-theme="light"] .status-chip.succeeded { color: #087b74; border-color: rgba(8, 123, 116, 0.26); background: rgba(13, 169, 153, 0.1); }
html[data-theme="light"] .status-chip.running,
html[data-theme="light"] .status-chip.polling { color: #1768b7; border-color: rgba(23, 104, 183, 0.24); background: rgba(44, 132, 219, 0.1); }
html[data-theme="light"] .status-chip.queued { color: #8a5a05; border-color: rgba(165, 111, 6, 0.24); background: rgba(236, 177, 30, 0.12); }
html[data-theme="light"] .status-chip.failed { color: #b3374d; border-color: rgba(179, 55, 77, 0.23); background: rgba(226, 83, 108, 0.1); }
html[data-theme="light"] .status-chip.canceled { color: #667085; border-color: rgba(102, 112, 133, 0.2); background: rgba(102, 112, 133, 0.08); }
html[data-theme="light"] .progress { background: rgba(86, 80, 128, 0.14); }
html[data-theme="light"] .task-batch-bar { background: rgba(105, 88, 224, 0.08); }

html[data-theme="light"] .asset-placeholder {
    background:
        radial-gradient(circle at 18% 18%, rgba(145, 128, 239, 0.17), transparent 34%),
        linear-gradient(145deg, rgba(252, 252, 255, 0.94), rgba(238, 241, 250, 0.88));
    color: #57518e;
}

html[data-theme="light"] .asset-placeholder-mark { border-color: rgba(82, 77, 147, 0.58); }
html[data-theme="light"] .asset-placeholder-mark::before,
html[data-theme="light"] .asset-placeholder-mark::after { border-color: rgba(82, 77, 147, 0.52); }

html[data-theme="light"] .hero,
html[data-theme="light"] .section,
html[data-theme="light"] .stat,
html[data-theme="light"] .asset-project-head,
html[data-theme="light"] .shot-send-bar {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.62), rgba(249, 250, 255, 0.38)) !important;
    border-color: rgba(28, 28, 42, 0.12) !important;
    backdrop-filter: blur(16px) saturate(1.1);
    -webkit-backdrop-filter: blur(16px) saturate(1.1);
}

/* Aurora light: a restrained editorial surface for the operational workspace. */
html[data-theme="light"] {
    --color-bg: #f2f3f8;
    --color-surface: rgba(255, 255, 255, 0.74);
    --color-surface-hover: rgba(91, 94, 204, 0.08);
    --color-border: rgba(44, 48, 76, 0.13);
    --color-border-hover: rgba(82, 86, 186, 0.34);
    --color-text: #202536;
    --color-text-secondary: #4d586c;
    --color-text-tertiary: #6e788d;
    --color-accent: #5d61cf;
    --color-accent-glow: rgba(93, 97, 207, 0.18);
    --bg: #f2f3f8;
    --bg-elevated: rgba(255, 255, 255, 0.82);
    --bg-strong: rgba(93, 97, 207, 0.1);
    --border: rgba(44, 48, 76, 0.13);
    --text: #202536;
    --muted: #4d586c;
    --dim: #6e788d;
    --panel: rgba(255, 255, 255, 0.62);
}

html[data-theme="light"] body {
    background:
        linear-gradient(180deg, #eceafa 0, #f3f4fa 230px, #f5f6f9 480px, #f2f3f7 100%) !important;
}

/* Page-specific animated backgrounds were designed for dark mode. The light theme uses one calm wash instead. */
html[data-theme="light"] .bg-animation {
    opacity: 0 !important;
}

html[data-theme="light"] .header {
    background: rgba(248, 249, 253, 0.76) !important;
    border-bottom-color: rgba(59, 61, 91, 0.1) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.72), 0 8px 28px rgba(58, 59, 93, 0.045);
}

html[data-theme="light"] .header .logo-text {
    background: none !important;
    -webkit-text-fill-color: #303679 !important;
    color: #303679 !important;
}

html[data-theme="light"] :is(.sidebar, .chat-sidebar) {
    background: rgba(250, 251, 254, 0.58) !important;
    border-color: rgba(59, 61, 91, 0.11) !important;
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.66);
}

html[data-theme="light"] :is(.card, .panel, .ui-panel, .ui-workspace-section, .asset-card, .timeline-card, .template-card, .summary-card, .result-card, .package-card, .agent-action-card, .module-card, .reference-column, .detail-section) {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.8), rgba(248, 249, 253, 0.58)) !important;
    border-color: rgba(52, 56, 88, 0.13) !important;
    box-shadow: 0 10px 28px rgba(45, 47, 79, 0.055), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

html[data-theme="light"] :is(.card, .panel, .ui-panel, .ui-workspace-section, .asset-card, .timeline-card, .template-card, .summary-card, .result-card, .package-card, .agent-action-card, .module-card, .reference-column) {
    transition: border-color 0.25s var(--platform-motion), background-color 0.25s var(--platform-motion), box-shadow 0.25s var(--platform-motion), transform 0.25s var(--platform-motion);
}

@media (hover: hover) and (pointer: fine) {
    html[data-theme="light"] :is(.card.clickable, .asset-card, .timeline-card, .template-card, .summary-card, .result-card, .package-card, .agent-action-card, .module-card):hover {
        border-color: rgba(86, 89, 192, 0.34) !important;
        background: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(242, 243, 255, 0.7)) !important;
        box-shadow: 0 16px 34px rgba(62, 61, 112, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.94) !important;
    }

    html[data-theme="light"] .platform-hover-card:hover {
        background-color: rgba(255, 255, 255, 0.72) !important;
        box-shadow: 0 15px 34px rgba(62, 61, 112, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.88) !important;
    }

    html[data-theme="light"] .platform-hover-row:hover {
        background-color: rgba(91, 94, 204, 0.07) !important;
    }
}

html[data-theme="light"] :is(.tabs, .tab-row, .mode-tabs, .filter-tabs, .segment-control) {
    border-color: rgba(53, 56, 86, 0.11) !important;
    background: rgba(237, 238, 246, 0.66) !important;
    box-shadow: inset 0 1px 2px rgba(47, 49, 84, 0.055), 0 1px 0 rgba(255, 255, 255, 0.62);
}

html[data-theme="light"] :is(.tab-btn, .tab, .grid-opt, .mode-chip, .project-item, .step-item) {
    color: #586276 !important;
}

html[data-theme="light"] :is(.tab-btn.active, .tab.active, .grid-opt.active, .mode-chip.active, .project-item.active, .step-item.active) {
    background: rgba(255, 255, 255, 0.86) !important;
    border-color: rgba(93, 97, 207, 0.26) !important;
    color: #4145a9 !important;
    box-shadow: 0 2px 7px rgba(68, 70, 136, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.94) !important;
}

html[data-theme="light"] :is(input, textarea, select, .model-select, .search, .select, .mac-select-trigger, .project-multi-trigger) {
    background: rgba(255, 255, 255, 0.76) !important;
    border-color: rgba(51, 55, 86, 0.15) !important;
    color: #2d374a !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86), 0 1px 2px rgba(45, 48, 79, 0.035);
    color-scheme: light;
}

html[data-theme="light"] :is(input, textarea, select, .model-select, .search, .select, .mac-select-trigger, .project-multi-trigger):hover {
    border-color: rgba(93, 97, 207, 0.34) !important;
}

html[data-theme="light"] :is(input, textarea, select, .model-select, .search, .select, .mac-select-trigger, .project-multi-trigger):focus,
html[data-theme="light"] .mac-select.open .mac-select-trigger {
    border-color: rgba(93, 97, 207, 0.62) !important;
    box-shadow: 0 0 0 3px rgba(93, 97, 207, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
    outline: none;
}

html[data-theme="light"] :is(select option, .mac-select-menu, .project-multi-menu, .asset-picker-menu, .chat-attach-menu) {
    background: rgba(250, 251, 254, 0.98) !important;
    color: #2e3749 !important;
}

html[data-theme="light"] :is(.btn, .result-card-btn, .result-card-download, .asset-actions .btn, .timeline-actions .btn) {
    background: rgba(255, 255, 255, 0.68) !important;
    border-color: rgba(53, 56, 88, 0.15) !important;
    color: #4d5870 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.83), 0 1px 2px rgba(47, 49, 84, 0.035);
}

html[data-theme="light"] :is(.btn.primary, .btn.generate, .generate-btn, .hero-actions .primary):not(:disabled) {
    border-color: rgba(78, 80, 188, 0.58) !important;
    background: linear-gradient(135deg, #5e62ca, #7475d9) !important;
    color: #fff !important;
    box-shadow: 0 7px 16px rgba(82, 84, 192, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

html[data-theme="light"] :is(.btn:not(.primary), .result-card-btn, .result-card-download, .asset-actions .btn, .timeline-actions .btn):hover:not(:disabled) {
    background: rgba(93, 97, 207, 0.09) !important;
    border-color: rgba(93, 97, 207, 0.38) !important;
    color: #3f43a2 !important;
}

html[data-theme="light"] :is(.hero, .section, .stat, .asset-project-head, .shot-send-bar, .workbench) {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(243, 244, 252, 0.52)) !important;
    border-color: rgba(52, 56, 88, 0.12) !important;
    box-shadow: 0 10px 30px rgba(45, 47, 79, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

html[data-theme="light"] :is(.panel-head, .reference-column-head, .modal-head, .drawer-head) {
    border-bottom-color: rgba(52, 56, 88, 0.1) !important;
    background: rgba(250, 251, 254, 0.38) !important;
}

html[data-theme="light"] :is(.panel-title, .card-title, .workbench-title, .reference-column-title, .detail-title) {
    color: #2a3147 !important;
}

/* Compact tools use the same translucent material as panels instead of dark utility blocks. */
html[data-theme="light"] :is(.asset-icon-btn, .asset-type-badge, .batch-check, .group-toggle, .project-delete, .reference-remove, .task-delete-btn) {
    border-color: rgba(56, 60, 100, 0.18) !important;
    background: rgba(255, 255, 255, 0.5) !important;
    color: #525d78 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86), 0 3px 10px rgba(47, 50, 82, 0.08) !important;
    backdrop-filter: blur(18px) saturate(1.5) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.5) !important;
}

html[data-theme="light"] .asset-type-badge {
    color: #4b4eb2 !important;
    font-weight: 760;
}

html[data-theme="light"] .asset-icon-btn:hover,
html[data-theme="light"] .group-toggle:hover,
html[data-theme="light"] .project-delete:hover {
    border-color: rgba(86, 89, 192, 0.48) !important;
    background: rgba(247, 247, 255, 0.76) !important;
    color: #4145aa !important;
    box-shadow: 0 5px 14px rgba(75, 77, 158, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.94) !important;
}

html[data-theme="light"] :is(.asset-icon-btn.danger, .reference-remove, .task-delete-btn) {
    color: #b84a5c !important;
    border-color: rgba(184, 74, 92, 0.24) !important;
    background: rgba(255, 247, 248, 0.54) !important;
}

html[data-theme="light"] :is(.asset-icon-btn.danger, .reference-remove, .task-delete-btn):hover {
    border-color: rgba(190, 61, 82, 0.52) !important;
    background: rgba(255, 233, 237, 0.76) !important;
    color: #a22d43 !important;
}

html[data-theme="light"] .batch-check span,
html[data-theme="light"] .fake-box {
    border-color: rgba(76, 81, 123, 0.38) !important;
    background: rgba(255, 255, 255, 0.48) !important;
}

html[data-theme="light"] .batch-check input:checked + span,
html[data-theme="light"] .project-check input:checked + .fake-box {
    border-color: rgba(81, 84, 191, 0.76) !important;
    background: rgba(91, 94, 204, 0.7) !important;
    box-shadow: inset 0 0 0 3px rgba(249, 250, 255, 0.92) !important;
}

html[data-theme="light"] :is(.asset-actions .btn, .timeline-actions .btn, .asset-project-tools .btn, .batch-actions .btn) {
    background: rgba(255, 255, 255, 0.48) !important;
    border-color: rgba(55, 59, 95, 0.16) !important;
    color: #4f5a73 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88), 0 2px 8px rgba(47, 50, 82, 0.055) !important;
    backdrop-filter: blur(16px) saturate(1.45) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.45) !important;
}

html[data-theme="light"] :is(.asset-actions .btn, .timeline-actions .btn, .asset-project-tools .btn, .batch-actions .btn):hover:not(:disabled) {
    background: rgba(250, 250, 255, 0.78) !important;
    border-color: rgba(86, 89, 192, 0.42) !important;
    color: #3e42a3 !important;
}

/* Small emphasized actions stay recognisable without becoming opaque purple blocks. */
html[data-theme="light"] :is(.asset-actions .btn.primary, .timeline-actions .btn.primary, .asset-project-tools .btn.primary, .batch-actions .btn.primary) {
    border-color: rgba(80, 83, 192, 0.42) !important;
    background: rgba(99, 101, 207, 0.17) !important;
    color: #4448b2 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62), 0 3px 11px rgba(75, 77, 164, 0.12) !important;
}

html[data-theme="light"] :is(.asset-actions .btn.primary, .timeline-actions .btn.primary, .asset-project-tools .btn.primary, .batch-actions .btn.primary):hover:not(:disabled) {
    background: rgba(92, 95, 204, 0.25) !important;
    border-color: rgba(80, 83, 192, 0.56) !important;
    color: #35399e !important;
}

/* Make the glass depth legible on the pale workspace without sacrificing text contrast. */
html[data-theme="light"] :is(.card, .panel, .ui-panel, .ui-workspace-section, .asset-card, .timeline-card, .template-card, .summary-card, .result-card, .package-card, .agent-action-card, .module-card, .reference-column, .detail-section) {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.68), rgba(246, 247, 253, 0.4)) !important;
    border-color: rgba(255, 255, 255, 0.72) !important;
    box-shadow: 0 12px 32px rgba(45, 47, 79, 0.075), inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 0 0 1px rgba(55, 59, 92, 0.085) !important;
    backdrop-filter: blur(22px) saturate(1.35) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.35) !important;
}

/* Dashboard status badges need stronger contrast than dark-mode pastel chips. */
html[data-theme="light"] .badge {
    border: 1px solid transparent;
    font-weight: 720;
}

html[data-theme="light"] .badge.ok {
    background: rgba(5, 150, 105, 0.15) !important;
    border-color: rgba(5, 120, 86, 0.28) !important;
    color: #076e52 !important;
}

html[data-theme="light"] .badge.warn {
    background: rgba(217, 119, 6, 0.15) !important;
    border-color: rgba(180, 93, 4, 0.28) !important;
    color: #8a4a05 !important;
}

html[data-theme="light"] .badge.err {
    background: rgba(190, 54, 80, 0.12) !important;
    border-color: rgba(170, 43, 67, 0.26) !important;
    color: #a12b43 !important;
}

html[data-theme="light"] .health-result.ok {
    background: rgba(5, 150, 105, 0.1) !important;
    border-color: rgba(5, 120, 86, 0.32) !important;
    color: #076e52 !important;
}

html[data-theme="light"] .health-result.err {
    background: rgba(190, 54, 80, 0.1) !important;
    border-color: rgba(170, 43, 67, 0.3) !important;
    color: #a12b43 !important;
}

/* Shared deep glass for project-oriented workspaces. Generation pages remain their own visual reference. */
html:not([data-theme="light"]) body[data-ui-feature="assets"],
html:not([data-theme="light"]) body[data-ui-feature="workflow"] {
    background:
        linear-gradient(126deg, rgba(117, 27, 102, 0.52) 0%, rgba(67, 23, 84, 0.31) 24%, transparent 52%),
        linear-gradient(312deg, rgba(38, 68, 151, 0.42) 0%, rgba(37, 33, 93, 0.22) 28%, transparent 55%),
        linear-gradient(180deg, #130d24 0%, #0a0a1a 48%, #100a20 100%) !important;
    background-attachment: fixed !important;
}

html:not([data-theme="light"]) body[data-ui-feature="assets"] .page,
html:not([data-theme="light"]) body[data-ui-feature="workflow"] .page {
    background:
        linear-gradient(110deg, rgba(159, 49, 126, 0.11), transparent 31%),
        linear-gradient(290deg, rgba(57, 92, 193, 0.1), transparent 35%) !important;
}

html:not([data-theme="light"]) body[data-ui-feature="assets"] :is(.sidebar, .panel, .ui-panel, .ui-workspace-section, .asset-card, .timeline-card, .summary-card, .reference-column, .card, .hero, .section, .detail-section),
html:not([data-theme="light"]) body[data-ui-feature="workflow"] :is(.sidebar, .panel, .ui-panel, .ui-workspace-section, .card, .hero, .section, .summary-card, .reference-column, .detail-section) {
    border-color: rgba(219, 216, 255, 0.13) !important;
    background: linear-gradient(145deg, rgba(42, 39, 69, 0.58), rgba(18, 18, 42, 0.46)) !important;
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
    backdrop-filter: blur(20px) saturate(1.24) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.24) !important;
}

html:not([data-theme="light"]) body[data-ui-feature="assets"] :is(.asset-project-head, .panel-head, .reference-column-head, .modal-head, .drawer-head),
html:not([data-theme="light"]) body[data-ui-feature="workflow"] :is(.panel-head, .modal-head, .drawer-head) {
    border-color: rgba(219, 216, 255, 0.1) !important;
    background: rgba(35, 32, 59, 0.48) !important;
    backdrop-filter: blur(18px) saturate(1.22) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.22) !important;
}

html:not([data-theme="light"]) body[data-ui-feature="assets"] :is(input, textarea, select, .search, .select, .model-select, .mac-select-trigger, .project-multi-trigger),
html:not([data-theme="light"]) body[data-ui-feature="workflow"] :is(input, textarea, select, .search, .select, .model-select, .mac-select-trigger) {
    border-color: rgba(212, 208, 255, 0.16) !important;
    background: rgba(28, 27, 55, 0.58) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    backdrop-filter: blur(14px) saturate(1.18) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.18) !important;
}

html:not([data-theme="light"]) body[data-ui-feature="assets"] :is(.btn, .asset-icon-btn, .group-toggle, .project-delete, .reference-remove, .task-delete-btn),
html:not([data-theme="light"]) body[data-ui-feature="workflow"] :is(.btn, .tab, .step-item, .project-item) {
    border-color: rgba(212, 208, 255, 0.15) !important;
    background: rgba(50, 46, 79, 0.42) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 2px 9px rgba(0, 0, 0, 0.08) !important;
    backdrop-filter: blur(14px) saturate(1.2) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.2) !important;
}

html:not([data-theme="light"]) body[data-ui-feature="assets"] :is(.btn.primary, .asset-actions .btn.primary, .timeline-actions .btn.primary),
html:not([data-theme="light"]) body[data-ui-feature="workflow"] :is(.btn.primary, .tab.active, .step-item.active, .project-item.active) {
    border-color: rgba(145, 128, 240, 0.42) !important;
    background: rgba(104, 77, 183, 0.32) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 5px 16px rgba(73, 47, 146, 0.18) !important;
}

@media (hover: hover) and (pointer: fine) {
    html:not([data-theme="light"]) body[data-ui-feature="assets"] :is(.asset-card, .timeline-card, .card.clickable, .btn, .asset-icon-btn, .group-toggle):hover,
    html:not([data-theme="light"]) body[data-ui-feature="workflow"] :is(.card.clickable, .card, .step-item, .project-item, .btn, .tab):hover {
        border-color: rgba(159, 137, 245, 0.38) !important;
        background-color: rgba(64, 53, 103, 0.58) !important;
        box-shadow: 0 16px 34px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
    }
}

html:not([data-theme="light"]) body[data-ui-feature="assets"] :is(.modal-card, .ui-modal-panel),
html:not([data-theme="light"]) body[data-ui-feature="workflow"] :is(.modal-card, .ui-modal-panel) {
    border-color: rgba(221, 217, 255, 0.16) !important;
    background: linear-gradient(145deg, rgba(45, 42, 75, 0.88), rgba(17, 17, 40, 0.84)) !important;
    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
    backdrop-filter: blur(24px) saturate(1.3) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.3) !important;
}

html[data-theme="light"] :is(.hero, .section, .stat, .asset-project-head, .shot-send-bar, .workbench) {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.62), rgba(242, 244, 252, 0.34)) !important;
    border-color: rgba(255, 255, 255, 0.72) !important;
    box-shadow: 0 12px 32px rgba(45, 47, 79, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 0 0 1px rgba(55, 59, 92, 0.08) !important;
    backdrop-filter: blur(22px) saturate(1.35) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.35) !important;
}