/* Cross-page theme layer. Page-specific legacy CSS can keep its dark defaults;
   this layer translates the shared surfaces and controls when light mode is on. */
:root {
    --theme-light-bg: #f5f7fb;
    --theme-light-surface: #ffffff;
    --theme-light-surface-2: #eef1f7;
    --theme-light-text: #202334;
    --theme-light-muted: #5d6678;
    --theme-light-border: rgba(36, 45, 66, .16);
}

html[data-theme="light"], html.theme-light {
    color-scheme: light;
}

html[data-theme="light"] body,
html.theme-light body,
body.theme-light {
    --bg: var(--theme-light-bg);
    --bg-primary: var(--theme-light-bg);
    --bg-secondary: var(--theme-light-surface);
    --bg-tertiary: var(--theme-light-surface-2);
    --bg-card: var(--theme-light-surface);
    --card: var(--theme-light-surface);
    --card2: var(--theme-light-surface-2);
    --surface: var(--theme-light-surface);
    --surface-2: var(--theme-light-surface-2);
    --page-bg: var(--theme-light-bg);
    --page-card: var(--theme-light-surface);
    --page-card-hover: #f0f2f8;
    --text: var(--theme-light-text);
    --text-primary: var(--theme-light-text);
    --page-text: var(--theme-light-text);
    --text-dim: var(--theme-light-muted);
    --text-secondary: var(--theme-light-muted);
    --page-text-dim: var(--theme-light-muted);
    --text-muted: #7c879a;
    --page-text-muted: #7c879a;
    --muted: var(--theme-light-muted);
    --border: var(--theme-light-border);
    --page-border: var(--theme-light-border);
    --settings-bg: var(--theme-light-bg);
    --settings-card: var(--theme-light-surface);
    --settings-text: var(--theme-light-text);
    --settings-muted: var(--theme-light-muted);
    --settings-line: var(--theme-light-border);
    --primary: #5b5bd6;
    --primary-dark: #4f46b8;
    --primary-light: #7474e8;
    --secondary: #c026d3;
    --accent: #6c5ce7;
    --accent-hover: #5b4bd4;
    --accent-glow: rgba(108,92,231,.18);
    --success: #008f73;
    --warning: #a96500;
    --danger: #c2412d;
    --line: var(--theme-light-border);
    --muted: var(--theme-light-muted);
    background: var(--theme-light-bg) !important;
    color: var(--theme-light-text) !important;
}

html[data-theme="light"] body a,
html.theme-light body a { color: inherit; }

html[data-theme="light"] body input,
html[data-theme="light"] body textarea,
html[data-theme="light"] body select,
html.theme-light body input,
html.theme-light body textarea,
html.theme-light body select {
    background: var(--theme-light-surface) !important;
    color: var(--theme-light-text) !important;
    border-color: var(--theme-light-border) !important;
}

html[data-theme="light"] body input::placeholder,
html[data-theme="light"] body textarea::placeholder,
html.theme-light body input::placeholder,
html.theme-light body textarea::placeholder { color: #8a94a6 !important; }

html[data-theme="light"] body .app-sidebar,
html.theme-light body .app-sidebar,
html[data-theme="light"] body .nav,
html[data-theme="light"] body .top-nav,
html[data-theme="light"] body .topbar,
html.theme-light body .nav,
html.theme-light body .top-nav,
html.theme-light body .topbar {
    background: rgba(255,255,255,.96) !important;
    color: var(--theme-light-text) !important;
    border-color: var(--theme-light-border) !important;
    box-shadow: 0 8px 24px rgba(36,45,66,.08) !important;
}

html[data-theme="light"] body .app-sidebar__brand,
html[data-theme="light"] body .app-sidebar__link,
html[data-theme="light"] body .app-sidebar__action,
html.theme-light body .app-sidebar__brand,
html.theme-light body .app-sidebar__link,
html.theme-light body .app-sidebar__action { color: var(--theme-light-text) !important; border-color: transparent; }

html[data-theme="light"] body .app-sidebar__section,
html[data-theme="light"] body .app-sidebar__email,
html.theme-light body .app-sidebar__section,
html.theme-light body .app-sidebar__email { color: var(--theme-light-muted) !important; }

html[data-theme="light"] body .app-sidebar__link:hover,
html[data-theme="light"] body .app-sidebar__link.is-active,
html.theme-light body .app-sidebar__link:hover,
html.theme-light body .app-sidebar__link.is-active { background: rgba(108,92,231,.10) !important; color: #4f46b8 !important; border-color: rgba(108,92,231,.22) !important; }

html[data-theme="light"] body .app-sidebar__footer,
html[data-theme="light"] body .app-sidebar__brand,
html.theme-light body .app-sidebar__footer,
html.theme-light body .app-sidebar__brand { border-color: var(--theme-light-border) !important; }

html[data-theme="light"] body .panel,
html[data-theme="light"] body .card,
html[data-theme="light"] body .project-card,
html[data-theme="light"] body .settings-card,
html[data-theme="light"] body .settings-nav,
html[data-theme="light"] body .voice-card,
html[data-theme="light"] body .voice-row,
html[data-theme="light"] body .result,
html[data-theme="light"] body .seg-card,
html[data-theme="light"] body .feature-card,
html[data-theme="light"] body .guide-card,
html.theme-light body .panel,
html.theme-light body .card,
html.theme-light body .project-card,
html.theme-light body .settings-card,
html.theme-light body .settings-nav,
html.theme-light body .voice-card,
html.theme-light body .voice-row,
html.theme-light body .result,
html.theme-light body .seg-card,
html.theme-light body .feature-card,
html.theme-light body .guide-card {
    background: var(--theme-light-surface) !important;
    color: var(--theme-light-text) !important;
    border-color: var(--theme-light-border) !important;
    box-shadow: 0 5px 18px rgba(36,45,66,.06) !important;
}

html[data-theme="light"] body .auth-wrapper,
html[data-theme="light"] body .auth-card,
html[data-theme="light"] body .auth-tabs,
html[data-theme="light"] body .auth-form,
html.theme-light body .auth-wrapper,
html.theme-light body .auth-card,
html.theme-light body .auth-tabs,
html.theme-light body .auth-form {
    background: var(--theme-light-surface) !important;
    color: var(--theme-light-text) !important;
    border-color: var(--theme-light-border) !important;
}

html[data-theme="light"] body .auth-card input,
html[data-theme="light"] body .auth-card button,
html.theme-light body .auth-card input,
html.theme-light body .auth-card button { color: var(--theme-light-text) !important; }

html[data-theme="light"] body .profile-section,
html[data-theme="light"] body .wallet-card,
html[data-theme="light"] body .stat-card,
html[data-theme="light"] body .summary-card,
html[data-theme="light"] body .filter-card,
html[data-theme="light"] body .table-card,
html[data-theme="light"] body .guide-capability,
html[data-theme="light"] body .guide-start-card,
html[data-theme="light"] body .updated,
html.theme-light body .profile-section,
html.theme-light body .wallet-card,
html.theme-light body .stat-card,
html.theme-light body .summary-card,
html.theme-light body .filter-card,
html.theme-light body .table-card,
html.theme-light body .guide-capability,
html.theme-light body .guide-start-card,
html.theme-light body .updated {
    background: var(--theme-light-surface) !important;
    color: var(--theme-light-text) !important;
    border-color: var(--theme-light-border) !important;
}

html[data-theme="light"] body .card-banner,
html[data-theme="light"] body .skeleton-card,
html[data-theme="light"] body .skeleton-banner,
html[data-theme="light"] body .skeleton-body,
html[data-theme="light"] body .skeleton-line,
html[data-theme="light"] body .toast,
html.theme-light body .card-banner,
html.theme-light body .skeleton-card,
html.theme-light body .skeleton-banner,
html.theme-light body .skeleton-body,
html.theme-light body .skeleton-line,
html.theme-light body .toast {
    background: var(--theme-light-surface-2) !important;
    color: var(--theme-light-text) !important;
    border-color: var(--theme-light-border) !important;
}

html[data-theme="light"] body .wallet-card h3,
html[data-theme="light"] body .wallet-card strong,
html[data-theme="light"] body .wallet-metric strong,
html[data-theme="light"] body .btn-wallet,
html.theme-light body .wallet-card h3,
html.theme-light body .wallet-card strong,
html.theme-light body .wallet-metric strong,
html.theme-light body .btn-wallet { color: var(--theme-light-text) !important; }

html[data-theme="light"] body .wallet-eyebrow,
html[data-theme="light"] body .wallet-metric span,
html[data-theme="light"] body .wallet-metric small,
html[data-theme="light"] body .wallet-hint,
html[data-theme="light"] body .profile-header-note,
html[data-theme="light"] body .stat-label,
html.theme-light body .wallet-eyebrow,
html.theme-light body .wallet-metric span,
html.theme-light body .wallet-metric small,
html.theme-light body .wallet-hint,
html.theme-light body .profile-header-note,
html.theme-light body .stat-label { color: var(--theme-light-muted) !important; }

html[data-theme="light"] body .wallet-metric,
html[data-theme="light"] body .data-table,
html[data-theme="light"] body .data-table th,
html[data-theme="light"] body .data-table td,
html.theme-light body .wallet-metric,
html.theme-light body .data-table,
html.theme-light body .data-table th,
html.theme-light body .data-table td { background: var(--theme-light-surface) !important; border-color: var(--theme-light-border) !important; color: var(--theme-light-text) !important; }

/* Profile still carries a legacy inline dark secondary button. */
html[data-theme="light"] body .btn-secondary,
html.theme-light body .btn-secondary { background: var(--theme-light-surface-2) !important; color: var(--theme-light-text) !important; border-color: var(--theme-light-border) !important; }

html[data-theme="light"] body .qc-progress,
html[data-theme="light"] body .qc-card,
html[data-theme="light"] body .qc-select option,
html.theme-light body .qc-progress,
html.theme-light body .qc-card,
html.theme-light body .qc-select option { background: var(--theme-light-surface) !important; color: var(--theme-light-text) !important; border-color: var(--theme-light-border) !important; }

html[data-theme="light"] body .field label,
html[data-theme="light"] body .voice-desc,
html[data-theme="light"] body .result small,
html[data-theme="light"] body .result a,
html.theme-light body .field label,
html.theme-light body .voice-desc,
html.theme-light body .result small,
html.theme-light body .result a { color: var(--theme-light-muted) !important; }

html[data-theme="light"] body .seg-audio-player video,
html.theme-light body .seg-audio-player video { background: var(--theme-light-surface-2) !important; }

/* Usage logs historically shipped as a light-only page; restore dark mode for
   the same surfaces when the saved preference is dark. */
html:not([data-theme="light"]) body.usage-shell,
html:not([data-theme="light"]) body:has(.usage-shell) { background: #0a0a0f !important; color: #e8e8f0 !important; }
html:not([data-theme="light"]) body .summary-card,
html:not([data-theme="light"]) body .filter-card,
html:not([data-theme="light"]) body .table-card,
html:not([data-theme="light"]) body .usage-nav,
html:not([data-theme="light"]) body .usage-header,
html:not([data-theme="light"]) body .table-wrap { background: #1a1a2e !important; color: #e8e8f0 !important; border-color: rgba(255,255,255,.08) !important; }
html:not([data-theme="light"]) body .summary-card strong,
html:not([data-theme="light"]) body .summary-card strong small,
html:not([data-theme="light"]) body .filter-card input,
html:not([data-theme="light"]) body .filter-card select,
html:not([data-theme="light"]) body .filter-card option,
html:not([data-theme="light"]) body .usage-header h1,
html:not([data-theme="light"]) body .usage-nav a,
html:not([data-theme="light"]) body .table-card th,
html:not([data-theme="light"]) body .table-card td { color: #e8e8f0 !important; }
html:not([data-theme="light"]) body .usage-shell .filter-card input,
html:not([data-theme="light"]) body .usage-shell .filter-card select { background: #2a2b45 !important; border-color: rgba(255,255,255,.12) !important; }
html:not([data-theme="light"]) body .table-card th { background: #22233a !important; border-color: rgba(255,255,255,.10) !important; }
html:not([data-theme="light"]) body .table-card td { background: #1a1a2e !important; border-color: rgba(255,255,255,.08) !important; }
html:not([data-theme="light"]) body .usage-shell .btn-light { background: #2a2b45 !important; color: #e8e8f0 !important; border-color: rgba(255,255,255,.12) !important; }
html:not([data-theme="light"]) body .usage-shell .pill { background: rgba(108,92,231,.22) !important; color: #c9c9ff !important; }
html:not([data-theme="light"]) body .usage-shell .pill.success { background: rgba(22,128,60,.22) !important; color: #8ee7a8 !important; }
html:not([data-theme="light"]) body .usage-shell .pill.warn { background: rgba(154,103,0,.24) !important; color: #ffd88a !important; }
html:not([data-theme="light"]) body .usage-shell .pill.danger { background: rgba(192,57,43,.22) !important; color: #ffaaa0 !important; }
html:not([data-theme="light"]) body .summary-card .label,
html:not([data-theme="light"]) body .summary-card .muted,
html:not([data-theme="light"]) body .filter-card label,
html:not([data-theme="light"]) body .usage-header p { color: #aaa8bb !important; }

html:not([data-theme="light"]) body:has(.legal-page),
html:not([data-theme="light"]) body:has(.meta) { background: #0a0a0f !important; color: #e8e8f0 !important; }
html:not([data-theme="light"]) body:has(.meta) main { background: #1a1a2e !important; color: #e8e8f0 !important; box-shadow: 0 8px 30px rgba(0,0,0,.28) !important; }

html[data-theme="light"] body .seg-image,
html[data-theme="light"] body .seg-image img,
html[data-theme="light"] body .seg-audio-player,
html.theme-light body .seg-image,
html.theme-light body .seg-image img,
html.theme-light body .seg-audio-player {
    background: var(--theme-light-surface-2) !important;
}

html[data-theme="light"] body .guide-step,
html.theme-light body .guide-step { background: rgba(108,92,231,.08) !important; color: var(--theme-light-text) !important; }

html[data-theme="light"] body .footer-links a:hover,
html[data-theme="light"] body .top-links a:hover,
html.theme-light body .footer-links a:hover,
html.theme-light body .top-links a:hover { color: #4f46b8 !important; }

html[data-theme="light"] body .guide-note,
html.theme-light body .guide-note { color: #65531e !important; background: rgba(244,200,107,.16) !important; }

html[data-theme="light"] body .modal,
html[data-theme="light"] body .modal-overlay,
html.theme-light body .modal,
html.theme-light body .modal-overlay { background: rgba(36,45,66,.28) !important; }

html[data-theme="light"] body .modal-content,
html[data-theme="light"] body .modal-dialog,
html.theme-light body .modal-content,
html.theme-light body .modal-dialog { background: var(--theme-light-surface) !important; color: var(--theme-light-text) !important; border-color: var(--theme-light-border) !important; }

html[data-theme="light"] body .settings-nav button,
html[data-theme="light"] body .settings-card > p,
html[data-theme="light"] body .settings-row small,
html[data-theme="light"] body .settings-header p,
html[data-theme="light"] body .hint,
html[data-theme="light"] body .file-note,
html[data-theme="light"] body .empty,
html.theme-light body .settings-nav button,
html.theme-light body .settings-card > p,
html.theme-light body .settings-row small,
html.theme-light body .settings-header p,
html.theme-light body .hint,
html.theme-light body .file-note,
html.theme-light body .empty { color: var(--theme-light-muted) !important; }

html[data-theme="light"] body .settings-nav button:hover,
html[data-theme="light"] body .settings-nav button.is-active,
html.theme-light body .settings-nav button:hover,
html.theme-light body .settings-nav button.is-active { background: rgba(108,92,231,.10) !important; color: #4f46b8 !important; }

html[data-theme="light"] body .queue-status-bar,
html[data-theme="light"] body .queue-task-list,
html[data-theme="light"] body .project-library-toolbar,
html.theme-light body .queue-status-bar,
html.theme-light body .queue-task-list,
html.theme-light body .project-library-toolbar { background: var(--theme-light-surface) !important; border-color: var(--theme-light-border) !important; color: var(--theme-light-text) !important; }

/* Legacy inline dark literals used by tools/profile/older pages. */
html[data-theme="light"] body [style*="#0a0a0f"],
html[data-theme="light"] body [style*="#0f0f1a"],
html[data-theme="light"] body [style*="#10101c"],
html[data-theme="light"] body [style*="#11111d"],
html[data-theme="light"] body [style*="#171728"],
html[data-theme="light"] body [style*="#1a1a2e"],
html.theme-light body [style*="#0a0a0f"],
html.theme-light body [style*="#0f0f1a"],
html.theme-light body [style*="#10101c"],
html.theme-light body [style*="#11111d"],
html.theme-light body [style*="#171728"],
html.theme-light body [style*="#1a1a2e"] {
    background: var(--theme-light-surface) !important;
    color: var(--theme-light-text) !important;
}

html[data-theme="light"] body code,
html[data-theme="light"] body pre,
html.theme-light body code,
html.theme-light body pre { background: var(--theme-light-surface-2) !important; color: var(--theme-light-text) !important; }

html[data-theme="light"] body hr,
html.theme-light body hr { border-color: var(--theme-light-border) !important; }

/* Project workbench light theme: layered surfaces instead of white-on-white.
   Keep this scoped to the drive so other authenticated pages retain their
   existing light theme while the high-density project list remains readable. */
html[data-theme="light"] body #projectDrive,
html.theme-light body #projectDrive {
    --drive-light-bg: #ffffff;
    --drive-light-sidebar: #f6f8fb;
    --drive-light-subtle: #f8fafc;
    --drive-light-hover: #f2f6ff;
    --drive-light-active: #edf1ff;
    --drive-light-border: #dfe6ef;
    --drive-light-border-soft: #e8edf3;
    --drive-light-text: #202938;
    --drive-light-body: #536174;
    --drive-light-muted: #8490a2;
    --drive-light-accent: #4f46b8;
    --drive-light-accent-soft: rgba(79, 70, 184, .11);
    background: var(--drive-light-bg) !important;
    border-color: var(--drive-light-border) !important;
    box-shadow: 0 12px 30px rgba(31, 41, 55, .07) !important;
}

html[data-theme="light"] body #projectDrive .drive-sidebar,
html.theme-light body #projectDrive .drive-sidebar {
    background: var(--drive-light-sidebar) !important;
    border-right-color: var(--drive-light-border) !important;
}

html[data-theme="light"] body #projectDrive .drive-content,
html.theme-light body #projectDrive .drive-content { background: var(--drive-light-bg) !important; }

html[data-theme="light"] body #projectDrive .drive-sidebar-title,
html[data-theme="light"] body #projectDrive .drive-breadcrumb strong,
html[data-theme="light"] body #projectDrive .drive-name,
html.theme-light body #projectDrive .drive-sidebar-title,
html.theme-light body #projectDrive .drive-breadcrumb strong,
html.theme-light body #projectDrive .drive-name { color: var(--drive-light-text) !important; }

html[data-theme="light"] body #projectDrive .drive-nav-item,
html[data-theme="light"] body #projectDrive .drive-folder-item,
html.theme-light body #projectDrive .drive-nav-item,
html.theme-light body #projectDrive .drive-folder-item { color: var(--drive-light-body) !important; }

html[data-theme="light"] body #projectDrive .drive-nav-item:hover,
html[data-theme="light"] body #projectDrive .drive-folder-item:hover,
html.theme-light body #projectDrive .drive-nav-item:hover,
html.theme-light body #projectDrive .drive-folder-item:hover { background: var(--drive-light-hover) !important; color: var(--drive-light-text) !important; }

html[data-theme="light"] body #projectDrive .drive-nav-item.active,
html[data-theme="light"] body #projectDrive .drive-folder-item.active,
html.theme-light body #projectDrive .drive-nav-item.active,
html.theme-light body #projectDrive .drive-folder-item.active {
    background: var(--drive-light-active) !important;
    color: var(--drive-light-accent) !important;
    box-shadow: inset 3px 0 0 var(--drive-light-accent);
}

html[data-theme="light"] body #projectDrive .drive-nav-item.active i,
html[data-theme="light"] body #projectDrive .drive-folder-item.active i,
html.theme-light body #projectDrive .drive-nav-item.active i,
html.theme-light body #projectDrive .drive-folder-item.active i { color: var(--drive-light-accent) !important; }

html[data-theme="light"] body #projectDrive .drive-sidebar-section,
html[data-theme="light"] body #projectDrive .drive-sidebar-foot,
html[data-theme="light"] body #projectDrive .drive-breadcrumb,
html[data-theme="light"] body #projectDrive .drive-list-meta,
html.theme-light body #projectDrive .drive-sidebar-section,
html.theme-light body #projectDrive .drive-sidebar-foot,
html.theme-light body #projectDrive .drive-breadcrumb,
html.theme-light body #projectDrive .drive-list-meta { color: var(--drive-light-muted) !important; }

html[data-theme="light"] body #projectDrive .drive-icon-button,
html.theme-light body #projectDrive .drive-icon-button { color: var(--drive-light-body) !important; }

html[data-theme="light"] body #projectDrive .drive-icon-button:hover,
html.theme-light body #projectDrive .drive-icon-button:hover {
    background: var(--drive-light-hover) !important;
    border-color: var(--drive-light-border) !important;
    color: var(--drive-light-accent) !important;
}

html[data-theme="light"] body #projectDrive .drive-list-head,
html.theme-light body #projectDrive .drive-list-head {
    border-bottom-color: var(--drive-light-border) !important;
    color: var(--drive-light-muted) !important;
}

html[data-theme="light"] body #projectDrive .drive-file-row,
html[data-theme="light"] body #projectDrive .drive-folder-row,
html.theme-light body #projectDrive .drive-file-row,
html.theme-light body #projectDrive .drive-folder-row {
    background: transparent !important;
    border-bottom-color: var(--drive-light-border-soft) !important;
}

html[data-theme="light"] body #projectDrive .drive-file-row:hover,
html[data-theme="light"] body #projectDrive .drive-folder-row:hover,
html.theme-light body #projectDrive .drive-file-row:hover,
html.theme-light body #projectDrive .drive-folder-row:hover {
    background: var(--drive-light-hover) !important;
    box-shadow: inset 3px 0 0 var(--drive-light-accent) !important;
}

html[data-theme="light"] body #projectDrive .drive-subtitle,
html[data-theme="light"] body #projectDrive .drive-cell,
html[data-theme="light"] body #projectDrive .drive-row-actions button,
html.theme-light body #projectDrive .drive-subtitle,
html.theme-light body #projectDrive .drive-cell,
html.theme-light body #projectDrive .drive-row-actions button { color: var(--drive-light-body) !important; }

html[data-theme="light"] body #projectDrive .drive-file-icon,
html.theme-light body #projectDrive .drive-file-icon { background: #eef1ff !important; color: var(--drive-light-accent) !important; }

html[data-theme="light"] body #projectDrive .drive-folder-icon,
html.theme-light body #projectDrive .drive-folder-icon { background: #fff7e4 !important; color: #a86b00 !important; }

html[data-theme="light"] body #projectDrive .drive-row-actions button:hover,
html.theme-light body #projectDrive .drive-row-actions button:hover { background: var(--drive-light-subtle) !important; color: var(--drive-light-accent) !important; }

html[data-theme="light"] body #projectDrive .drive-search,
html[data-theme="light"] body #projectDrive .drive-sort,
html[data-theme="light"] body #projectDrive .drive-button,
html.theme-light body #projectDrive .drive-search,
html.theme-light body #projectDrive .drive-sort,
html.theme-light body #projectDrive .drive-button {
    background: var(--drive-light-subtle) !important;
    border-color: var(--drive-light-border) !important;
    color: var(--drive-light-body) !important;
}

html[data-theme="light"] body #projectDrive .drive-search:focus-within,
html.theme-light body #projectDrive .drive-search:focus-within {
    background: #fff !important;
    border-color: var(--drive-light-accent) !important;
    box-shadow: 0 0 0 3px var(--drive-light-accent-soft) !important;
}

html[data-theme="light"] body #projectDrive .drive-search input,
html.theme-light body #projectDrive .drive-search input { color: var(--drive-light-text) !important; }

html[data-theme="light"] body #projectDrive .drive-button:hover,
html.theme-light body #projectDrive .drive-button:hover {
    background: #fff !important;
    border-color: var(--drive-light-accent) !important;
    color: var(--drive-light-accent) !important;
}

html[data-theme="light"] body #projectDrive .drive-button-primary,
html.theme-light body #projectDrive .drive-button-primary {
    background: var(--drive-light-accent) !important;
    border-color: var(--drive-light-accent) !important;
    color: #fff !important;
}

html[data-theme="light"] body #projectDrive .drive-button-primary:hover,
html.theme-light body #projectDrive .drive-button-primary:hover { background: #3f3898 !important; color: #fff !important; }

html[data-theme="light"] body #projectDrive .drive-button-accent,
html.theme-light body #projectDrive .drive-button-accent {
    background: #fff4dd !important;
    border-color: #f0d79f !important;
    color: #8b5a00 !important;
}

html[data-theme="light"] body #projectDrive .drive-status,
html.theme-light body #projectDrive .drive-status { background: #f0f3f6 !important; color: var(--drive-light-body) !important; }

html[data-theme="light"] body #projectDrive .drive-status.done,
html.theme-light body #projectDrive .drive-status.done { background: #e8f7f0 !important; color: #087a57 !important; }

html[data-theme="light"] body #projectDrive .drive-status.progress,
html.theme-light body #projectDrive .drive-status.progress { background: #fff5dc !important; color: #986200 !important; }

html[data-theme="light"] body #projectDrive .drive-status.error,
html.theme-light body #projectDrive .drive-status.error { background: #fff0ed !important; color: #b93827 !important; }

html[data-theme="light"] body #projectDrive .drive-skeleton,
html.theme-light body #projectDrive .drive-skeleton {
    border-bottom-color: var(--drive-light-border-soft) !important;
    background: linear-gradient(90deg, #f0f3f7 25%, #e6ebf2 50%, #f0f3f7 75%) !important;
    background-size: 200% 100% !important;
}

html[data-theme="light"] body #projectDrive .drive-empty,
html.theme-light body #projectDrive .drive-empty { color: var(--drive-light-muted) !important; }

html[data-theme="light"] body #projectDrive .drive-empty strong,
html.theme-light body #projectDrive .drive-empty strong { color: var(--drive-light-text) !important; }

/* The shared sidebar belongs to this same light workbench. Keep it quiet so
   the project file list, rather than the navigation, carries visual emphasis. */
html[data-theme="light"] body.has-app-sidebar .app-sidebar,
html.theme-light body.has-app-sidebar .app-sidebar {
    background: #f7f9fc !important;
    border-right-color: #dfe6ef !important;
    box-shadow: 8px 0 24px rgba(31, 41, 55, .06) !important;
}

html[data-theme="light"] body.has-app-sidebar .app-sidebar__brand,
html.theme-light body.has-app-sidebar .app-sidebar__brand {
    color: #202938 !important;
    border-bottom-color: #dfe6ef !important;
}

html[data-theme="light"] body.has-app-sidebar .app-sidebar__link.is-primary,
html.theme-light body.has-app-sidebar .app-sidebar__link.is-primary {
    background: #4f46b8 !important;
    box-shadow: 0 5px 14px rgba(79, 70, 184, .18) !important;
}

/* Admin light theme: the existing admin page uses its own --admin-* tokens.
   Override those tokens on the page instead of rewriting its data/API code. */
html[data-theme="light"] body.admin-shell,
html.theme-light body.admin-shell {
    --admin-bg: #eef2f7 !important;
    --admin-card: #ffffff !important;
    --admin-card-hover: #f4f7fb !important;
    --admin-accent: #4f46b8 !important;
    --admin-accent-hover: #403895 !important;
    --admin-accent-glow: rgba(79, 70, 184, .11) !important;
    --admin-border: #dfe6ef !important;
    --admin-text: #202938 !important;
    --admin-text-dim: #536174 !important;
    --admin-text-muted: #8490a2 !important;
    --admin-success: #087a57 !important;
    --admin-warning: #986200 !important;
    --admin-danger: #b93827 !important;
    --admin-info: #1f6fb2 !important;
    background: #eef2f7 !important;
    color: #202938 !important;
}

html[data-theme="light"] body.admin-shell .top-nav,
html.theme-light body.admin-shell .top-nav {
    background: rgba(255, 255, 255, .96) !important;
    border-bottom-color: #dfe6ef !important;
    box-shadow: 0 5px 18px rgba(31, 41, 55, .06) !important;
}

html[data-theme="light"] body.admin-shell .nav-back,
html[data-theme="light"] body.admin-shell .nav-title,
html[data-theme="light"] body.admin-shell .nav-logo,
html.theme-light body.admin-shell .nav-back,
html.theme-light body.admin-shell .nav-title,
html.theme-light body.admin-shell .nav-logo { color: #202938 !important; }

html[data-theme="light"] body.admin-shell .nav-back:hover,
html.theme-light body.admin-shell .nav-back:hover { background: #f2f6ff !important; color: #4f46b8 !important; }

html[data-theme="light"] body.admin-shell .admin-sidebar,
html.theme-light body.admin-shell .admin-sidebar {
    background: #f7f9fc !important;
    border-right-color: #dfe6ef !important;
}

html[data-theme="light"] body.admin-shell .sidebar-label,
html.theme-light body.admin-shell .sidebar-label { color: #8490a2 !important; }

html[data-theme="light"] body.admin-shell .sidebar-item,
html.theme-light body.admin-shell .sidebar-item { color: #536174 !important; }

html[data-theme="light"] body.admin-shell .sidebar-item:hover,
html.theme-light body.admin-shell .sidebar-item:hover {
    background: #f2f6ff !important;
    color: #202938 !important;
}

html[data-theme="light"] body.admin-shell .sidebar-item.active,
html.theme-light body.admin-shell .sidebar-item.active {
    background: #edf1ff !important;
    color: #4f46b8 !important;
    box-shadow: inset 3px 0 0 #4f46b8;
}

html[data-theme="light"] body.admin-shell .stat-card,
html[data-theme="light"] body.admin-shell .data-table-wrapper,
html[data-theme="light"] body.admin-shell .api-stat-card,
html[data-theme="light"] body.admin-shell .gauge-card,
html[data-theme="light"] body.admin-shell .chart-container,
html[data-theme="light"] body.admin-shell .alert-item,
html[data-theme="light"] body.admin-shell .rule-card,
html[data-theme="light"] body.admin-shell .prompt-item,
html.theme-light body.admin-shell .stat-card,
html.theme-light body.admin-shell .data-table-wrapper,
html.theme-light body.admin-shell .api-stat-card,
html.theme-light body.admin-shell .gauge-card,
html.theme-light body.admin-shell .chart-container,
html.theme-light body.admin-shell .alert-item,
html.theme-light body.admin-shell .rule-card,
html.theme-light body.admin-shell .prompt-item {
    background: #ffffff !important;
    border-color: #dfe6ef !important;
    box-shadow: 0 8px 22px rgba(31, 41, 55, .055) !important;
}

html[data-theme="light"] body.admin-shell .stat-card:hover,
html[data-theme="light"] body.admin-shell .alert-item:hover,
html[data-theme="light"] body.admin-shell .prompt-item:hover,
html.theme-light body.admin-shell .stat-card:hover,
html.theme-light body.admin-shell .alert-item:hover,
html.theme-light body.admin-shell .prompt-item:hover {
    background: #f8faff !important;
    border-color: #b9c4ef !important;
    box-shadow: 0 10px 26px rgba(79, 70, 184, .09) !important;
}

html[data-theme="light"] body.admin-shell .data-table th,
html.theme-light body.admin-shell .data-table th { background: #f5f7fa !important; color: #8490a2 !important; }

html[data-theme="light"] body.admin-shell .data-table td,
html.theme-light body.admin-shell .data-table td { border-bottom-color: #e8edf3 !important; color: #202938 !important; }

html[data-theme="light"] body.admin-shell .data-table tr:hover td,
html.theme-light body.admin-shell .data-table tr:hover td { background: #f7faff !important; }

html[data-theme="light"] body.admin-shell .table-header,
html[data-theme="light"] body.admin-shell .modal-header,
html[data-theme="light"] body.admin-shell .modal-footer,
html.theme-light body.admin-shell .table-header,
html.theme-light body.admin-shell .modal-header,
html.theme-light body.admin-shell .modal-footer { border-color: #e3e9f0 !important; }

html[data-theme="light"] body.admin-shell .btn-secondary,
html[data-theme="light"] body.admin-shell .filter-chip,
html[data-theme="light"] body.admin-shell .page-btn,
html.theme-light body.admin-shell .btn-secondary,
html.theme-light body.admin-shell .filter-chip,
html.theme-light body.admin-shell .page-btn {
    background: #f7f9fc !important;
    border-color: #dfe6ef !important;
    color: #536174 !important;
}

html[data-theme="light"] body.admin-shell .btn-secondary:hover,
html[data-theme="light"] body.admin-shell .filter-chip:hover,
html[data-theme="light"] body.admin-shell .page-btn:hover,
html.theme-light body.admin-shell .btn-secondary:hover,
html.theme-light body.admin-shell .filter-chip:hover,
html.theme-light body.admin-shell .page-btn:hover { background: #f2f6ff !important; color: #4f46b8 !important; }

html[data-theme="light"] body.admin-shell .filter-chip.active,
html[data-theme="light"] body.admin-shell .page-btn.active,
html.theme-light body.admin-shell .filter-chip.active,
html.theme-light body.admin-shell .page-btn.active { background: #edf1ff !important; color: #4f46b8 !important; border-color: #9ea8df !important; }

html[data-theme="light"] body.admin-shell .form-input,
html[data-theme="light"] body.admin-shell .form-select,
html[data-theme="light"] body.admin-shell .prompt-editor,
html[data-theme="light"] body.admin-shell .code-display,
html.theme-light body.admin-shell .form-input,
html.theme-light body.admin-shell .form-select,
html.theme-light body.admin-shell .prompt-editor,
html.theme-light body.admin-shell .code-display {
    background: #f8fafc !important;
    border-color: #dfe6ef !important;
    color: #202938 !important;
}

html[data-theme="light"] body.admin-shell .form-input:focus,
html[data-theme="light"] body.admin-shell .form-select:focus,
html[data-theme="light"] body.admin-shell .prompt-editor:focus,
html.theme-light body.admin-shell .form-input:focus,
html.theme-light body.admin-shell .form-select:focus,
html.theme-light body.admin-shell .prompt-editor:focus {
    border-color: #4f46b8 !important;
    box-shadow: 0 0 0 3px rgba(79, 70, 184, .12) !important;
}

html[data-theme="light"] body.admin-shell .modal,
html.theme-light body.admin-shell .modal { background: #ffffff !important; border-color: #dfe6ef !important; box-shadow: 0 20px 55px rgba(31, 41, 55, .18) !important; }

html[data-theme="light"] body.admin-shell .modal-overlay,
html.theme-light body.admin-shell .modal-overlay { background: rgba(31, 41, 55, .28) !important; }

html[data-theme="light"] body.admin-shell .gauge-bar,
html.theme-light body.admin-shell .gauge-bar { background: #e7edf4 !important; }

html[data-theme="light"] body.admin-shell .badge-used,
html.theme-light body.admin-shell .badge-used { background: #f0f3f6 !important; color: #6c7787 !important; }

html[data-theme="light"] body.admin-shell .toggle-switch,
html.theme-light body.admin-shell .toggle-switch { background: #dce4ed !important; }

html[data-theme="light"] body.admin-shell .modal-close:hover,
html.theme-light body.admin-shell .modal-close:hover { background: #f2f6ff !important; color: #4f46b8 !important; }