/* * Global authenticated user themes. * * This asset is intentionally loaded after page-specific styles. The selected * value comes from User.ui_theme and is written to before * first paint, so navigation does not flash a different theme. */ html[data-theme="classic"] { color-scheme: light; --theme-brand-primary: #0b4f8d; --theme-brand-primary-strong: #083766; --theme-brand-accent: #ff7b36; --theme-brand-accent-soft: #ffb07a; --theme-page-bg: #eef3f9; --theme-shell-bg: #e2eaf3; --theme-workspace-bg: radial-gradient(circle at 88% -15%, rgba(11, 79, 141, 0.08) 0, transparent 34%), #eef3f9; --theme-surface: #ffffff; --theme-surface-muted: #f4f7fc; --theme-text: #172536; --theme-text-soft: #4d627c; --theme-text-muted: #70849e; --theme-line: #d8e3f1; --theme-line-strong: #b9cae0; --theme-topbar: linear-gradient(96deg, #062a50 0%, #0a4b83 70%, #0c5f9a 100%); --theme-topbar-border: rgba(255, 255, 255, 0.08); --theme-topbar-shadow: 0 8px 24px rgba(6, 33, 63, 0.28); --theme-topbar-text: #ffffff; --theme-topbar-muted: rgba(220, 235, 250, 0.76); --theme-topbar-control: rgba(255, 255, 255, 0.1); --theme-topbar-control-hover: rgba(255, 255, 255, 0.17); --theme-topbar-control-border: rgba(255, 255, 255, 0.24); --theme-topbar-control-border-hover: rgba(255, 255, 255, 0.42); --theme-sidebar: radial-gradient(circle at 18% -8%, rgba(255, 255, 255, 0.12), transparent 30%), linear-gradient(180deg, #062448 0%, #0a3f73 62%, #0b5a98 100%); --theme-sidebar-border: rgba(255, 255, 255, 0.14); --theme-sidebar-text: #d5e5ff; --theme-sidebar-muted: rgba(204, 218, 242, 0.62); --theme-sidebar-icon: rgba(217, 230, 255, 0.92); --theme-sidebar-section: rgba(255, 255, 255, 0.035); --theme-sidebar-section-border: rgba(255, 255, 255, 0.13); --theme-sidebar-hover: rgba(255, 255, 255, 0.11); --theme-sidebar-active: linear-gradient(90deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 100%); --theme-sidebar-active-border: rgba(255, 255, 255, 0.2); --theme-footer: linear-gradient(95deg, #062a50 0%, #0a4b83 100%); --theme-footer-border: rgba(255, 255, 255, 0.08); --theme-footer-text: rgba(255, 255, 255, 0.88); --theme-primary-button: linear-gradient(135deg, #0d5ea4 0%, #0a467a 100%); --theme-primary-button-hover: linear-gradient(135deg, #0b528f 0%, #083c69 100%); --theme-primary-button-border: #0a467a; --theme-primary-button-shadow: 0 10px 20px rgba(10, 70, 122, 0.25); --theme-metric: linear-gradient(135deg, #0a4e8b 0%, #133b67 100%); --theme-metric-text: #ffffff; --theme-metric-border: rgba(8, 55, 102, 0.22); --theme-hero: linear-gradient(135deg, #0a4e8b 0%, #062a50 100%); } html[data-theme="dark"] { color-scheme: light; --theme-brand-primary: #116466; --theme-brand-primary-strong: #0b3f42; --theme-brand-accent: #c77b16; --theme-brand-accent-soft: #f0c36a; --theme-page-bg: #f1f3f5; --theme-shell-bg: #e9edf1; --theme-workspace-bg: #f3f5f7; --theme-surface: #ffffff; --theme-surface-muted: #eef2f4; --theme-text: #182026; --theme-text-soft: #41505c; --theme-text-muted: #6b7884; --theme-line: #d8dee4; --theme-line-strong: #b8c2cc; --theme-topbar: #20262d; --theme-topbar-border: #313941; --theme-topbar-shadow: 0 1px 0 rgba(255, 255, 255, 0.04), 0 10px 26px rgba(15, 23, 42, 0.16); --theme-topbar-text: #f2f6fa; --theme-topbar-muted: #aeb9c4; --theme-topbar-control: #252d35; --theme-topbar-control-hover: #343d47; --theme-topbar-control-border: #48525d; --theme-topbar-control-border-hover: #65707c; --theme-sidebar: #252c33; --theme-sidebar-border: #3a434d; --theme-sidebar-text: #dce4ec; --theme-sidebar-muted: #8796a4; --theme-sidebar-icon: #bfcbd6; --theme-sidebar-section: rgba(255, 255, 255, 0.025); --theme-sidebar-section-border: #3a434d; --theme-sidebar-hover: #303943; --theme-sidebar-active: #0f4f52; --theme-sidebar-active-border: #1f7377; --theme-footer: #20262d; --theme-footer-border: #313941; --theme-footer-text: #d5dde5; --theme-primary-button: #116466; --theme-primary-button-hover: #0d5557; --theme-primary-button-border: #0b5557; --theme-primary-button-shadow: none; --theme-metric: #24313a; --theme-metric-text: #ffffff; --theme-metric-border: #35424d; --theme-hero: linear-gradient(135deg, rgba(17, 100, 102, 0.96), rgba(32, 38, 45, 0.98)); } html[data-theme="light"] { color-scheme: light; --theme-brand-primary: #0b4f8d; --theme-brand-primary-strong: #083766; --theme-brand-accent: #ff7b36; --theme-brand-accent-soft: #ffb07a; --theme-page-bg: #f5f8fc; --theme-shell-bg: #edf2f7; --theme-workspace-bg: radial-gradient(circle at 88% -15%, rgba(11, 79, 141, 0.05) 0, transparent 36%), #f6f9fc; --theme-surface: #ffffff; --theme-surface-muted: #f7f9fc; --theme-text: #172536; --theme-text-soft: #4d627c; --theme-text-muted: #70849e; --theme-line: #d9e3ee; --theme-line-strong: #bdccdc; --theme-topbar: linear-gradient(100deg, #ffffff 0%, #f4f8fc 100%); --theme-topbar-border: #d8e3ef; --theme-topbar-shadow: 0 8px 24px rgba(32, 58, 86, 0.12); --theme-topbar-text: #12385f; --theme-topbar-muted: #647a92; --theme-topbar-control: #ffffff; --theme-topbar-control-hover: #edf4fb; --theme-topbar-control-border: #c6d5e4; --theme-topbar-control-border-hover: #95aec7; --theme-sidebar: linear-gradient(180deg, #ffffff 0%, #eef4fa 100%); --theme-sidebar-border: #d3dfeb; --theme-sidebar-text: #294866; --theme-sidebar-muted: #70849a; --theme-sidebar-icon: #547594; --theme-sidebar-section: rgba(11, 79, 141, 0.025); --theme-sidebar-section-border: #d7e2ed; --theme-sidebar-hover: #e7f0f8; --theme-sidebar-active: linear-gradient(90deg, #dcecf9 0%, #edf5fb 100%); --theme-sidebar-active-border: #aac4dc; --theme-footer: linear-gradient(100deg, #ffffff 0%, #edf3f9 100%); --theme-footer-border: #d4e0eb; --theme-footer-text: #4d627c; --theme-primary-button: linear-gradient(135deg, #0d5ea4 0%, #0a467a 100%); --theme-primary-button-hover: linear-gradient(135deg, #0b528f 0%, #083c69 100%); --theme-primary-button-border: #0a467a; --theme-primary-button-shadow: 0 8px 18px rgba(10, 70, 122, 0.18); --theme-metric: linear-gradient(135deg, #ffffff 0%, #eaf3fb 100%); --theme-metric-text: #12385f; --theme-metric-border: #bfd1e2; --theme-hero: linear-gradient(135deg, #ffffff 0%, #e7f1fa 100%); } html[data-theme] body.app-auth { --brand-primary: var(--theme-brand-primary); --brand-primary-strong: var(--theme-brand-primary-strong); --brand-accent: var(--theme-brand-accent); --brand-accent-soft: var(--theme-brand-accent-soft); --bg: var(--theme-page-bg); --bg-panel: var(--theme-surface-muted); --surface: var(--theme-surface); --surface-muted: var(--theme-surface-muted); --text: var(--theme-text); --text-soft: var(--theme-text-soft); --text-muted: var(--theme-text-muted); --line: var(--theme-line); --line-strong: var(--theme-line-strong); --focus: 0 0 0 3px color-mix(in srgb, var(--theme-brand-accent) 28%, transparent); background: var(--theme-page-bg); color: var(--theme-text); } html[data-theme] body.app-auth .app-topbar { border-bottom-color: var(--theme-topbar-border); background: var(--theme-topbar); box-shadow: var(--theme-topbar-shadow); color: var(--theme-topbar-text); } html[data-theme] body.app-auth .app-topbar .brand > span, html[data-theme] body.app-auth .topbar-context-area { color: var(--theme-topbar-muted); } html[data-theme] body.app-auth .topbar-context-title, html[data-theme] body.app-auth .app-topbar .brand a { color: var(--theme-topbar-text); } html[data-theme] body.app-auth .app-topbar :is(.nav-toggle, .language-switcher select, .topbar-user-summary) { border-color: var(--theme-topbar-control-border); background: var(--theme-topbar-control); color: var(--theme-topbar-text); } html[data-theme] body.app-auth .app-topbar :is( .nav-toggle:hover, .language-switcher select:hover, .topbar-user-summary:hover ), html[data-theme] body.app-auth .topbar-user-menu[open] .topbar-user-summary { border-color: var(--theme-topbar-control-border-hover); background: var(--theme-topbar-control-hover); color: var(--theme-topbar-text); } html[data-theme="light"] body.app-auth .brand-logo img { filter: drop-shadow(0 3px 8px rgba(11, 79, 141, 0.14)); } html[data-theme] body.app-auth .app-shell { background: var(--theme-shell-bg); } html[data-theme] body.app-auth .sidebar { border-right-color: var(--theme-sidebar-border); background: var(--theme-sidebar); color: var(--theme-sidebar-text); } html[data-theme] body.app-auth .sidebar-section { border-color: var(--theme-sidebar-section-border); background: var(--theme-sidebar-section); } html[data-theme] body.app-auth .sidebar-section-summary:hover { background: var(--theme-sidebar-hover); } html[data-theme] body.app-auth :is(.sidebar-section-icon, .sidebar-icon) { color: var(--theme-sidebar-icon); } html[data-theme] body.app-auth :is(.sidebar-section-chevron, .sidebar-subgroup-label) { color: var(--theme-sidebar-muted); } html[data-theme] body.app-auth .sidebar-link { color: var(--theme-sidebar-text); } html[data-theme] body.app-auth .sidebar-link:hover { border-color: var(--theme-sidebar-active-border); background: var(--theme-sidebar-hover); color: var(--theme-sidebar-text); } html[data-theme] body.app-auth .sidebar-link.active { border-color: var(--theme-sidebar-active-border); background: var(--theme-sidebar-active); color: var(--theme-sidebar-text); box-shadow: inset 3px 0 0 var(--theme-brand-accent-soft), 0 8px 20px rgba(3, 21, 40, 0.14); } html[data-theme] body.app-auth .sidebar-footer { border-top-color: var(--theme-sidebar-section-border); color: var(--theme-sidebar-muted); } html[data-theme] body.app-auth .sidebar-footer-v2 small { border-color: var(--theme-sidebar-active-border); color: var(--theme-sidebar-muted); } html[data-theme] body.app-auth .workspace { background: var(--theme-workspace-bg); } html[data-theme] body.app-auth .footer { border-top-color: var(--theme-footer-border); background: var(--theme-footer); color: var(--theme-footer-text); } html[data-theme] body.app-auth :is( .card, .form-grid, .form-compact, .form-section, .dashboard-hero, .dashboard-section, .pattern-card, .pattern-figure, .account-card, .account-summary-card ) { border-color: var(--theme-line); background-color: var(--theme-surface); color: var(--theme-text); } html[data-theme] body.app-auth :is(input, select, textarea) { border-color: var(--theme-line-strong); background: var(--theme-surface); color: var(--theme-text); } html[data-theme] body.app-auth :is(input, select, textarea):hover { border-color: color-mix(in srgb, var(--theme-brand-primary) 48%, var(--theme-line-strong)); } html[data-theme] body.app-auth .btn-primary, html[data-theme] body.app-auth .project-header-actions .project-action-btn { border-color: var(--theme-primary-button-border); background: var(--theme-primary-button); color: #ffffff; box-shadow: var(--theme-primary-button-shadow); } html[data-theme] body.app-auth .btn-primary:hover, html[data-theme] body.app-auth .project-header-actions .project-action-btn:hover { border-color: var(--theme-brand-primary-strong); background: var(--theme-primary-button-hover); color: #ffffff; } html[data-theme] body.app-auth .btn { border-color: var(--theme-line-strong); background: var(--theme-surface-muted); color: var(--theme-brand-primary-strong); } html[data-theme] body.app-auth .btn:hover { border-color: color-mix(in srgb, var(--theme-brand-primary) 42%, var(--theme-line-strong)); background: color-mix(in srgb, var(--theme-brand-primary) 7%, var(--theme-surface)); color: var(--theme-brand-primary-strong); } html[data-theme] body.app-auth .table { border-color: var(--theme-line); background: var(--theme-surface); color: var(--theme-text); } html[data-theme] body.app-auth .table th { background: var(--theme-surface-muted); color: var(--theme-text-muted); } html[data-theme] body.app-auth .table td { border-bottom-color: var(--theme-line); color: var(--theme-text); } html[data-theme] body.app-auth .account-hero { border-color: var(--theme-line); background: var(--theme-hero); color: var(--theme-metric-text); } html[data-theme="light"] body.app-auth .account-hero :is(h1, p, strong, span), html[data-theme="light"] body.app-auth .account-kicker { color: var(--theme-text); } html[data-theme] body.app-auth .dashboard-v2 { --dashboard-brand-primary: var(--theme-brand-primary); --dashboard-brand-primary-strong: var(--theme-brand-primary-strong); --dashboard-brand-accent: var(--theme-brand-accent); --dashboard-surface-muted: var(--theme-surface-muted); --dashboard-line-strong: var(--theme-line-strong); } html[data-theme] body.app-auth .dashboard-v2 .metric-card { border-color: var(--theme-metric-border); background: var(--theme-metric); color: var(--theme-metric-text); box-shadow: var(--theme-primary-button-shadow); } html[data-theme] body.app-auth .dashboard-v2 .btn-primary { border-color: var(--theme-primary-button-border); background: var(--theme-primary-button); box-shadow: var(--theme-primary-button-shadow); } html[data-theme] body.app-auth .dashboard-v2 .btn-primary:hover { background: var(--theme-primary-button-hover); } /* Theme controls shared by the topbar and account page. */ .user-theme-control { display: grid; gap: 0.35rem; } .topbar-user-popover .user-theme-control { margin-top: 0.25rem; padding: 0.65rem; border-bottom: 1px solid var(--theme-line, #d8e3f1); } .user-theme-label { display: flex; align-items: center; gap: 0.45rem; color: var(--theme-text-soft, #4d627c); font-size: 0.78rem; font-weight: 800; } .user-theme-select { width: 100%; min-height: 38px; margin: 0; padding: 0.42rem 0.6rem; border: 1px solid var(--theme-line-strong, #b9cae0); border-radius: 7px; background: var(--theme-surface, #ffffff); color: var(--theme-text, #172536); font: inherit; font-weight: 700; cursor: pointer; } .user-theme-status { min-height: 1rem; color: var(--theme-text-muted, #70849e); font-size: 0.72rem; line-height: 1.2; } .user-theme-status[data-state="error"] { color: #b42318; } .user-theme-status[data-state="saved"] { color: #148a55; } .account-theme-card { grid-column: 1 / -1; } .account-theme-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin: 0; padding: 0; border: 0; } .account-theme-option { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.7rem; min-height: 88px; padding: 0.85rem; border: 1px solid var(--theme-line); border-radius: 10px; background: var(--theme-surface-muted); cursor: pointer; } .account-theme-option:has(input:checked) { border-color: var(--theme-brand-primary); box-shadow: inset 3px 0 0 var(--theme-brand-accent); } .account-theme-option input { margin: 0.15rem 0 0; accent-color: var(--theme-brand-primary); } .account-theme-option strong, .account-theme-option small { display: block; } .account-theme-option small { margin-top: 0.2rem; color: var(--theme-text-muted); } /* Standalone engineering workbenches receive the same persisted preference. */ html[data-theme] body.adt-standalone { --adt-bg: var(--theme-page-bg); --adt-surface: var(--theme-surface); --adt-panel: var(--theme-surface-muted); --adt-line: var(--theme-line-strong); --adt-line-soft: var(--theme-line); --adt-text: var(--theme-text); --adt-muted: var(--theme-text-muted); --adt-blue: var(--theme-brand-primary); background: var(--theme-page-bg); color: var(--theme-text); } html[data-theme] body.adt-standalone :is( .adt-titlebar, .adt-menubar, .adt-pane, .adt-card, .adt-diagram-card, .adt-plot-card, .adt-modal-panel ) { border-color: var(--theme-line); background: var(--theme-surface); color: var(--theme-text); } html[data-theme="classic"] body.adt-standalone .adt-titlebar { background: var(--theme-topbar); color: #ffffff; } html[data-theme="dark"] body.adt-standalone .adt-titlebar { background: #20262d; color: #ffffff; } html[data-theme] body:is(.hf-map-body, .mn-map-body) { background: var(--theme-page-bg); color: var(--theme-text); } html[data-theme] body:is(.hf-map-body, .mn-map-body) :is( .hf-map-toolbar, .mn-map-toolbar ) { border-color: var(--theme-topbar-border); background: var(--theme-topbar); color: var(--theme-topbar-text); } html[data-theme] body:is(.hf-map-body, .mn-map-body) :is( .hf-map-panel, .hf-operation-panel, .mn-map-panel, .mn-operation-panel ) { border-color: var(--theme-line); background: color-mix(in srgb, var(--theme-surface) 94%, transparent); color: var(--theme-text); } html[data-theme] body:is(.hf-map-body, .mn-map-body) :is(input, select, button) { border-color: var(--theme-line-strong); } html[data-theme="classic"] body .coverage-advanced-sidebar { border-right-color: rgba(255, 255, 255, 0.14); background: linear-gradient(180deg, #062448 0%, #0a3f73 100%); } html[data-theme="light"] body .coverage-advanced-sidebar { border-right-color: var(--theme-line); background: rgba(255, 255, 255, 0.96); color: var(--theme-text); } html[data-theme="light"] body .coverage-advanced-sidebar :is(h1, h2, label) { color: var(--theme-text); } html[data-theme="light"] body .coverage-advanced-sidebar :is(p, .coverage-status) { color: var(--theme-text-muted); } html[data-theme="light"] body .coverage-advanced-sidebar select { border-color: var(--theme-line-strong); background: var(--theme-surface); color: var(--theme-text); } html[data-theme="classic"] body:has(.viab-shell), html[data-theme="classic"] body:has(#topbar) { --bg: #07182b; --panel: #082b50; --accent: #1e88e5; --text: #f5f9ff; --muted: #c8d5f1; } html[data-theme="light"] body:has(.viab-shell), html[data-theme="light"] body:has(#topbar) { --bg: #eef3f9; --panel: #ffffff; --accent: #0b5f9e; --text: #172536; --muted: #647a92; } html[data-theme="light"] body:has(.viab-shell) :is(.viab-sidebar, .panel, .modal-box), html[data-theme="light"] body:has(#topbar) :is(#ctrl, .menu-dropdown) { border-color: var(--theme-line); background: var(--theme-surface); color: var(--theme-text); } html[data-theme="classic"] body:has(#topbar) #topbar { border-bottom-color: rgba(255, 255, 255, 0.14); background: rgba(6, 42, 80, 0.97); } html[data-theme="light"] body:has(#topbar) #topbar { border-bottom-color: var(--theme-line); background: rgba(255, 255, 255, 0.97); color: var(--theme-text); } @media (max-width: 720px) { .account-theme-options { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .user-theme-control *, .user-theme-control *::before, .user-theme-control *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; } }