/* Theme tokens and light-mode overrides for the shared UI shell and components. */
:root {
  --bg-base: #060915;
  --bg-mid: #09121f;
  --bg-tail: #070b18;
  --bg-glow-1: rgba(90, 164, 255, 0.24);
  --bg-glow-2: rgba(76, 211, 182, 0.2);
  --bg-elev: rgba(8, 16, 34, 0.8);
  --line: rgba(130, 180, 255, 0.35);
  --line-soft: rgba(130, 180, 255, 0.2);
  --text-main: #e9efff;
  --text-soft: #a7b6d8;
  --title-color: #cbe2ff;
  --chip-bg: rgba(10, 17, 35, 0.58);
  --accent: #4cd3b6;
  --accent-2: #5aa4ff;
  --panel-divider: rgba(130, 180, 255, 0.18);
  --range-track-bg: linear-gradient(180deg, rgba(27, 45, 78, 0.88), rgba(16, 31, 59, 0.9));
  --range-track-border: rgba(113, 162, 245, 0.3);
  --range-thumb-focus: rgba(76, 211, 182, 0.34);
  --nav-h: 72px;
  --top-offset-h: var(--nav-h);
}

body[data-theme="light"] {
  --bg-base: #e9eef8;
  --bg-mid: #dbe4f3;
  --bg-tail: #d0daee;
  --bg-glow-1: rgba(120, 156, 216, 0.32);
  --bg-glow-2: rgba(73, 166, 186, 0.2);
  --bg-elev: rgba(243, 247, 255, 0.9);
  --line: rgba(103, 130, 176, 0.35);
  --line-soft: rgba(103, 130, 176, 0.2);
  --text-main: #1d2a43;
  --text-soft: #5a6b8b;
  --title-color: #30466e;
  --chip-bg: rgba(228, 236, 250, 0.92);
  --accent: #2f9fa0;
  --accent-2: #4a7fd5;
  --panel-divider: rgba(103, 130, 176, 0.24);
  --range-track-bg: linear-gradient(180deg, rgba(196, 210, 235, 0.92), rgba(182, 199, 230, 0.92));
  --range-track-border: rgba(106, 132, 177, 0.36);
  --range-thumb-focus: rgba(74, 127, 213, 0.3);
}

body[data-theme="light"] .top-nav {
  background: linear-gradient(90deg, rgba(234, 241, 253, 0.95), rgba(224, 234, 250, 0.88));
}

body[data-theme="light"] .mobile-panel-bar {
  background: linear-gradient(90deg, rgba(234, 241, 253, 0.95), rgba(224, 234, 250, 0.88));
}

body[data-theme="light"] .mobile-current-applet {
  background: transparent;
  color: #30466e;
}

body[data-theme="light"] .mobile-nav-backdrop {
  background: rgba(209, 222, 244, 0.42);
}

body[data-theme="light"] .mobile-nav-drawer {
  background: linear-gradient(90deg, rgba(234, 241, 253, 0.96), rgba(224, 234, 250, 0.9));
}

body[data-theme="light"] .launcher-overlay {
  background:
    radial-gradient(circle at 18% 20%, rgba(94, 130, 198, 0.24), transparent 40%),
    radial-gradient(circle at 82% 78%, rgba(80, 169, 180, 0.18), transparent 44%),
    linear-gradient(160deg, rgba(224, 233, 248, 0.94), rgba(214, 226, 246, 0.96));
}

body[data-theme="light"] .launcher-surface {
  background: transparent;
  border-color: transparent;
}

body[data-theme="light"] .launcher-card {
  background: rgba(231, 240, 253, 0.72);
}

body[data-theme="light"] .launcher-group-title {
  background: transparent;
}

body[data-theme="light"] .launcher-card.is-opened {
  background: rgba(216, 236, 245, 0.88);
}

body[data-theme="light"] .launcher-card-close {
  color: #62759a;
  background: rgba(226, 236, 250, 0.92);
  border-color: rgba(104, 132, 178, 0.32);
}

body[data-theme="light"] .launcher-card-close:hover,
body[data-theme="light"] .launcher-card-close:focus-visible {
  color: #2f8b8c;
  background: rgba(209, 224, 246, 0.96);
  border-color: rgba(98, 126, 173, 0.7);
}

body[data-theme="light"] .launcher-card-thumb {
  background: rgba(223, 233, 248, 0.9);
  border-color: rgba(104, 132, 178, 0.28);
}

body[data-theme="light"] .launcher-card-thumb-icon {
  color: #3a5d8f;
}

body[data-theme="light"] .launcher-card-thumb-img {
  filter: saturate(0.78) contrast(0.96) brightness(0.9);
}

body[data-theme="dark"] .launcher-card-thumb-img,
body:not([data-theme]) .launcher-card-thumb-img {
  filter: saturate(1) contrast(1.06) brightness(1.04);
}

body[data-theme="light"] .applet-nav-current {
  border-color: transparent;
  background: transparent;
}

body[data-theme="light"] .applet-nav-current:hover,
body[data-theme="light"] .applet-nav-current:focus-visible {
  border-color: #4a7fd5;
  background: transparent;
}

body[data-theme="light"] .applet-nav-add {
  color: #3f77c7;
}

body[data-theme="light"] .applet-nav-add:hover,
body[data-theme="light"] .applet-nav-add:focus-visible {
  background: transparent;
  border-color: transparent;
  color: #2d5ea4;
}

body[data-theme="light"] .opened-apps-menu {
  border-color: rgba(104, 132, 178, 0.32);
  background: linear-gradient(170deg, rgba(238, 246, 255, 0.95), rgba(229, 239, 253, 0.93));
}

body[data-theme="light"] .opened-apps-menu-open,
body[data-theme="light"] .opened-apps-menu-close {
  background: rgba(220, 232, 250, 0.88);
  color: #2f486f;
}

body[data-theme="light"] .opened-apps-menu-open:hover,
body[data-theme="light"] .opened-apps-menu-open:focus-visible,
body[data-theme="light"] .opened-apps-menu-close:hover,
body[data-theme="light"] .opened-apps-menu-close:focus-visible {
  background: rgba(209, 224, 246, 0.96);
}

body[data-theme="light"] .export-preview-wrap {
  background: rgba(224, 235, 252, 0.86);
  border-color: rgba(104, 132, 178, 0.32);
}

body[data-theme="light"] .export-preview-head,
body[data-theme="light"] .export-preview-lines {
  border-color: rgba(104, 132, 178, 0.32);
  background: rgba(216, 228, 248, 0.84);
}

body[data-theme="light"] .export-preview-code {
  background: rgba(231, 239, 252, 0.88);
  color: #2a3f62;
}

body[data-theme="light"] .site-credit {
  border-color: rgba(104, 132, 178, 0.34);
  background: rgba(230, 238, 251, 0.92);
  color: #51668a;
}

body[data-theme="light"] .mobile-applet-tab {
  background: transparent;
  color: #5a6b8b;
}

body[data-theme="light"] .mobile-applet-tab.is-active {
  background: transparent;
  color: #30466e;
  border-bottom-color: #4a7fd5;
}

body[data-theme="light"] .mobile-applet-close {
  color: #62759a;
  background: rgba(226, 236, 250, 0.92);
  border-color: rgba(104, 132, 178, 0.32);
}

body[data-theme="light"] .mobile-applet-close:hover,
body[data-theme="light"] .mobile-applet-close:focus-visible {
  color: #2f8b8c;
  background: rgba(209, 224, 246, 0.96);
  border-color: rgba(98, 126, 173, 0.7);
}

body[data-theme="light"] .mobile-panel-btn {
  background: rgba(226, 236, 250, 0.92);
  border-color: rgba(96, 126, 177, 0.3);
  color: #2a3f63;
}

body[data-theme="light"] .mobile-panel-btn.is-active {
  background: rgba(209, 224, 246, 0.98);
  border-color: rgba(71, 104, 160, 0.78);
}

body[data-theme="light"] .chip-button:hover,
body[data-theme="light"] .chip-button:focus-visible {
  color: #21324f;
  border-color: rgba(98, 126, 173, 0.7);
  background: rgba(214, 225, 243, 0.95);
}

body[data-theme="light"] .information-panel {
  scrollbar-color: rgba(112, 140, 188, 0.78) rgba(205, 218, 239, 0.95);
}

body[data-theme="light"] .panel,
body[data-theme="light"] .viewport-panel {
  background: linear-gradient(180deg, rgba(236, 244, 255, 0.94), rgba(227, 237, 252, 0.9));
}

body[data-theme="light"] .information-panel::-webkit-scrollbar-track {
  background: linear-gradient(180deg, rgba(216, 227, 245, 0.96), rgba(205, 219, 242, 0.96));
  border-left: 1px solid rgba(104, 131, 174, 0.24);
}

body[data-theme="light"] .information-panel::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(108, 181, 177, 0.82), rgba(101, 142, 206, 0.84));
  border: 2px solid rgba(216, 227, 245, 0.98);
}

body[data-theme="light"] .information-panel::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(91, 170, 165, 0.88), rgba(84, 130, 198, 0.9));
}

body[data-theme="light"] .controls-panel {
  scrollbar-color: rgba(112, 140, 188, 0.78) rgba(205, 218, 239, 0.95);
}

body[data-theme="light"] .controls-panel::-webkit-scrollbar-track {
  background: linear-gradient(180deg, rgba(216, 227, 245, 0.98), rgba(205, 219, 242, 0.98));
  border-left: 1px solid rgba(104, 131, 174, 0.24);
}

body[data-theme="light"] .controls-panel::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(108, 181, 177, 0.84), rgba(101, 142, 206, 0.86));
  border: 2px solid rgba(216, 227, 245, 0.98);
}

body[data-theme="light"] .controls-panel::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(91, 170, 165, 0.9), rgba(84, 130, 198, 0.92));
}

body[data-theme="light"] .panel-resizer {
  background: linear-gradient(180deg, rgba(219, 231, 251, 0.92), rgba(208, 223, 247, 0.88));
}

body[data-theme="light"] .middle-resizer {
  background: linear-gradient(90deg, rgba(219, 231, 251, 0.92), rgba(208, 223, 247, 0.88));
}

body[data-theme="light"] .icon-btn {
  background: rgba(219, 229, 247, 0.9);
  color: #27406a;
}

body[data-theme="light"] .icon-btn:hover,
body[data-theme="light"] .icon-btn:focus-visible {
  border-color: rgba(98, 126, 173, 0.7);
  background: rgba(210, 221, 243, 0.98);
}

body[data-theme="light"] .stat-card {
  background: linear-gradient(180deg, rgba(241, 247, 255, 0.96), rgba(233, 242, 255, 0.94));
  border-color: rgba(110, 140, 186, 0.34);
}

body[data-theme="light"] .model-box {
  background: rgba(232, 241, 255, 0.72);
  border-color: rgba(108, 135, 179, 0.34);
}

body[data-theme="light"] .chart-card {
  background: linear-gradient(180deg, rgba(241, 247, 255, 0.96), rgba(233, 242, 255, 0.94));
  border-color: rgba(110, 140, 186, 0.34);
}

body[data-theme="light"] .equation-card {
  background: rgba(236, 244, 255, 0.86);
  border-color: rgba(110, 140, 186, 0.34);
}

body[data-theme="light"] .chart-toggle-btn:hover,
body[data-theme="light"] .chart-toggle-btn:focus-visible {
  background: rgba(208, 221, 244, 0.76);
}

body[data-theme="light"] .chart-mode-btn {
  background: rgba(223, 234, 249, 0.8);
  border-color: rgba(110, 140, 186, 0.34);
  color: #4a6290;
}

body[data-theme="light"] .chart-mode-btn:hover,
body[data-theme="light"] .chart-mode-btn:focus-visible {
  background: rgba(204, 220, 243, 0.9);
}

body[data-theme="light"] .chart-mode-btn.is-active {
  background: rgba(89, 203, 187, 0.22);
}

body[data-theme="light"] .trend-chart {
  background:
    linear-gradient(180deg, rgba(226, 236, 252, 0.98), rgba(216, 229, 248, 0.98)),
    repeating-linear-gradient(
      to right,
      rgba(108, 138, 187, 0.16) 0,
      rgba(108, 138, 187, 0.16) 1px,
      transparent 1px,
      transparent 28px
    );
}

body[data-theme="light"] .chart-title,
body[data-theme="light"] .chart-toggle-icon {
  color: #3f5783;
}

body[data-theme="light"] #scene-host::after {
  background-image: none;
}

body[data-theme="light"] .applet-empty-state {
  background:
    radial-gradient(circle at 32% 28%, rgba(101, 136, 198, 0.16), transparent 52%),
    radial-gradient(circle at 72% 70%, rgba(65, 153, 169, 0.12), transparent 54%),
    linear-gradient(160deg, rgba(229, 238, 251, 0.96), rgba(218, 231, 249, 0.94));
}

body[data-theme="light"] .overlay-corner {
  color: #24406e;
  background: rgba(233, 240, 252, 0.87);
}

body[data-theme="light"] .spaceship-hud {
  color: #234266;
}

body[data-theme="light"] .spaceship-hud-scope {
  background: transparent;
}

body[data-theme="light"] .spaceship-hud-foot {
  background: rgba(233, 241, 253, 0.9);
  border-color: rgba(95, 122, 168, 0.34);
}

body[data-theme="light"] .spaceship-speed-chip {
  color: #1f3e62;
  background: rgba(220, 231, 248, 0.86);
  border-color: rgba(95, 122, 168, 0.34);
}

body[data-theme="light"] .spaceship-hud-action-btn.is-active {
  border-color: rgba(60, 131, 132, 0.74);
  background: rgba(165, 218, 214, 0.62);
  color: #1f4f57;
}

body[data-theme="light"] .spaceship-hud-action-btn.is-off {
  border-color: rgba(95, 122, 168, 0.34);
  background: rgba(220, 231, 248, 0.62);
  color: #5a6b8b;
}

body[data-theme="light"] .viewport-tool-btn {
  background: rgba(235, 243, 255, 0.9);
  color: #2f476f;
}

body[data-theme="light"] .viewport-tool-btn:hover,
body[data-theme="light"] .viewport-tool-btn:focus-visible {
  border-color: rgba(92, 124, 178, 0.72);
  background: rgba(224, 236, 253, 0.98);
  color: #22385c;
}

body[data-theme="light"] .controls-panel .form-label .label-value {
  background: rgba(211, 222, 241, 0.76);
  border-color: rgba(96, 126, 177, 0.24);
}

body[data-theme="light"] .color-chip {
  background: rgba(211, 222, 241, 0.76);
  border-color: rgba(96, 126, 177, 0.24);
}

body[data-theme="light"] .section-slider-hub {
  background: rgba(220, 231, 249, 0.78);
  border-color: rgba(97, 126, 175, 0.26);
}

body[data-theme="light"] .controls-panel .form-label .label-value.compact-value-trigger:hover,
body[data-theme="light"] .controls-panel .form-label .label-value.compact-value-trigger:focus-visible {
  color: #1f4f8f;
  border-color: rgba(72, 114, 184, 0.58);
}

body[data-theme="light"] .controls-panel .form-label .label-value.compact-value-trigger.is-active-control {
  color: #1f4f8f;
  border-color: rgba(72, 114, 184, 0.8);
}

body[data-theme="light"] .theme-select {
  background-color: rgba(226, 236, 250, 0.92);
}

body[data-theme="light"] .colormap-legend {
  background: rgba(228, 238, 253, 0.86);
  border-color: rgba(99, 126, 172, 0.3);
}

body[data-theme="light"] .colormap-legend-bar {
  border-color: rgba(95, 122, 168, 0.38);
}

body[data-theme="light"] .form-switch .form-check-input {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23506a96'/%3e%3c/svg%3e");
  background-color: rgba(154, 175, 211, 0.6);
}

body[data-theme="light"] .form-check-input:checked {
  background-color: #63d8c8;
  border-color: #63d8c8;
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23224a75'/%3e%3c/svg%3e");
}

body[data-theme="light"] .form-check-input:focus {
  border-color: rgba(74, 118, 188, 0.85);
  box-shadow: 0 0 0 0.14rem rgba(74, 118, 188, 0.18);
}

body[data-theme="light"] .section-toggle {
  background: linear-gradient(180deg, rgba(221, 231, 248, 0.92), rgba(214, 226, 246, 0.88));
}

body[data-theme="light"] .section-toggle:hover,
body[data-theme="light"] .section-toggle:focus-visible {
  background: linear-gradient(180deg, rgba(213, 226, 246, 0.96), rgba(203, 218, 242, 0.92));
}

body[data-theme="light"] .btn-outline-theme {
  border-color: rgba(90, 119, 165, 0.55);
  background: linear-gradient(180deg, rgba(236, 244, 255, 0.95), rgba(226, 237, 252, 0.94));
}

body[data-theme="light"] .btn-outline-theme:hover,
body[data-theme="light"] .btn-outline-theme:focus-visible {
  border-color: rgba(71, 104, 160, 0.78);
  background: linear-gradient(180deg, rgba(224, 236, 253, 0.98), rgba(212, 228, 249, 0.98));
}

body[data-theme="light"] .simulation-order-btn {
  border-radius: 0.18rem;
}

body[data-theme="light"] .controls-modal {
  background: linear-gradient(170deg, rgba(240, 246, 255, 0.98), rgba(233, 241, 253, 0.95));
}

body[data-theme="light"] .controls-table-wrap {
  background: rgba(228, 238, 253, 0.9);
  border-color: rgba(99, 126, 172, 0.3);
}

body[data-theme="light"] .controls-table thead th {
  background: rgba(214, 226, 246, 0.9);
}

body[data-theme="light"] .controls-table tbody tr:nth-child(even) th,
body[data-theme="light"] .controls-table tbody tr:nth-child(even) td {
  background: rgba(220, 231, 249, 0.74);
}

body[data-theme="light"] .keycap {
  background: rgba(236, 244, 255, 0.96);
  border-color: rgba(99, 126, 172, 0.42);
  color: #2f486f;
}

body[data-theme="light"] .share-link-input {
  background: rgba(236, 244, 255, 0.96);
  border-color: rgba(110, 140, 186, 0.38);
}

body[data-theme="light"] .camera-dof-card {
  background: linear-gradient(180deg, rgba(241, 247, 255, 0.96), rgba(233, 242, 255, 0.94));
  border-color: rgba(110, 140, 186, 0.34);
}

body[data-theme="light"] .screenshot-preview-card {
  background-color: rgba(210, 223, 244, 0.95);
  background-image:
    linear-gradient(
      45deg,
      rgba(70, 95, 138, 0.14) 25%,
      transparent 25%,
      transparent 75%,
      rgba(70, 95, 138, 0.14) 75%,
      rgba(70, 95, 138, 0.14)
    ),
    linear-gradient(
      45deg,
      rgba(70, 95, 138, 0.14) 25%,
      transparent 25%,
      transparent 75%,
      rgba(70, 95, 138, 0.14) 75%,
      rgba(70, 95, 138, 0.14)
    );
}