:root {
  color-scheme: dark;
  --theme-shadow: 0 12px 32px rgba(0, 0, 0, .55);
  --theme-overlay: rgba(0, 0, 0, .6);
  --soft-surface: rgba(15, 20, 32, .45);
  --tooltip-bg: #101827;
  --info-text: #82adff;
  --danger-text: #ff8e86;
  --success-text: #82e9ac;
  --saving-from: #1d3a2a;
  --saving-to: var(--card);
  --total-from: #1b2f55;
  --total-to: var(--card);
  --control-bg: #22314a;
  --input-bg: #111a2a;
  --danger-bg: #52242a;
  --danger-border: #7a333b;
  --danger-soft: rgba(239, 68, 68, .13);
  --success-soft: rgba(46, 204, 113, .12);
  --hover-surface: rgba(79, 140, 255, .12);
  --na-text: #8893a5;
}

.login-title-row,
.boot-error-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.header-tools {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.theme-toggle {
  white-space: nowrap;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f7fb;
  --card: #ffffff;
  --card2: #eef3f8;
  --border: #cbd5e1;
  --line: #cbd5e1;
  --text: #172033;
  --muted: #526075;
  --accent: #2563eb;
  --blue: #2563eb;
  --green: #15803d;
  --warn: #b45309;
  --theme-shadow: 0 12px 32px rgba(15, 23, 42, .18);
  --theme-overlay: rgba(15, 23, 42, .48);
  --soft-surface: #eef3f8;
  --tooltip-bg: #ffffff;
  --info-text: #1d4ed8;
  --danger-text: #b42318;
  --success-text: #166534;
  --saving-from: #dcfce7;
  --saving-to: #ffffff;
  --total-from: #dbeafe;
  --total-to: #ffffff;
  --control-bg: #f8fafc;
  --input-bg: #ffffff;
  --danger-bg: #fee2e2;
  --danger-border: #dc2626;
  --danger-soft: #fef2f2;
  --success-soft: #f0fdf4;
  --hover-surface: #eff6ff;
  --na-text: #64748b;
}

:root[data-theme="light"] .sugg,
:root[data-theme="light"] .history-tip,
:root[data-theme="light"] .modalbox,
:root[data-theme="light"] dialog {
  background: #ffffff;
  color: var(--text);
}

:root[data-theme="light"] .history-tip {
  border-color: var(--accent);
  box-shadow: var(--theme-shadow);
}

:root[data-theme="light"] #q,
:root[data-theme="light"] input,
:root[data-theme="light"] select,
:root[data-theme="light"] textarea,
:root[data-theme="light"] .field input,
:root[data-theme="light"] .field select,
:root[data-theme="light"] .field textarea,
:root[data-theme="light"] .qty,
:root[data-theme="light"] .pair-search,
:root[data-theme="light"] .pair-qty input {
  background: var(--input-bg);
  color: var(--text);
  border-color: var(--border);
}

:root[data-theme="light"] button,
:root[data-theme="light"] .btn,
:root[data-theme="light"] .tab {
  background: var(--control-bg);
  color: var(--text);
  border-color: var(--border);
}

:root[data-theme="light"] button.primary,
:root[data-theme="light"] .btn.primary,
:root[data-theme="light"] .tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
}

:root[data-theme="light"] .tab.extension-tab.extension-update {
  background: #b45309;
  border-color: #f59e0b;
  color: #ffffff;
}

:root[data-theme="light"] button.danger {
  background: var(--danger-bg);
  border-color: var(--danger-border);
  color: var(--danger-text);
}

:root[data-theme="light"] .order-head,
:root[data-theme="light"] .pair-candidate,
:root[data-theme="light"] .pair-add,
:root[data-theme="light"] .pair-detach {
  background: transparent;
}

:root[data-theme="light"] .tenant-row.active {
  border-color: var(--blue);
}

:root[data-theme="light"] .pair-detach {
  background: transparent;
  border-color: var(--danger-border);
  color: var(--danger-text);
}

:root[data-theme="light"] .del {
  background: transparent;
  border: 0;
  color: var(--danger-text);
}

:root[data-theme="light"] .saving {
  background: linear-gradient(135deg, var(--saving-from), var(--saving-to));
  border-color: #86efac;
}

:root[data-theme="light"] .totalcard {
  background: linear-gradient(135deg, var(--total-from), var(--total-to));
  border-color: #93c5fd;
}

:root[data-theme="light"] .order-supplier,
:root[data-theme="light"] .termsbox {
  background: var(--soft-surface);
}

:root[data-theme="light"] .sg:hover,
:root[data-theme="light"] .mpitem:hover,
:root[data-theme="light"] .order-head:hover,
:root[data-theme="light"] .pair-candidate:hover,
:root[data-theme="light"] .pair-add:hover {
  background: var(--hover-surface);
}

:root[data-theme="light"] #action-status.error {
  color: var(--danger-text);
  background: var(--danger-soft);
  border-color: var(--danger-border);
}

:root[data-theme="light"] #action-status.success {
  color: var(--success-text);
  background: var(--success-soft);
  border-color: var(--green);
}

:root[data-theme="light"] .price-info,
:root[data-theme="light"] .pair-add {
  color: var(--info-text);
  border-color: var(--info-text);
}

:root[data-theme="light"] .na {
  color: var(--na-text);
}

:root[data-theme="light"] .staleflag,
:root[data-theme="light"] .markedflag {
  color: #422006;
  background: #fde68a;
}

:root[data-theme="light"] .btn.green {
  background: var(--green);
  border-color: var(--green);
  color: #ffffff;
}

:root[data-theme="light"] .btn:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, .2);
}

:root[data-theme="light"] .pair-detach:hover {
  background: var(--danger-soft);
  border-color: var(--danger-border);
  color: var(--danger-text);
}

:root[data-theme="light"] dialog::backdrop {
  background: var(--theme-overlay);
}

@media (max-width: 760px) {
  .header-tools {
    align-items: flex-start;
  }
}