/**
 * Global dark / light theme. Set early via inline script in layout + localStorage key site-theme.
 * html[data-site-theme="dark"] | html[data-site-theme="light"]
 */
html {
  color-scheme: dark;
  --site-page-bg: #0b1020;
  --site-page-text: #f3f4f6;
  --site-page-text-soft: rgba(243, 244, 246, 0.88);
  --site-muted: rgba(255, 255, 255, 0.68);
  --site-panel: rgba(255, 255, 255, 0.06);
  --site-border: rgba(255, 255, 255, 0.1);
  --site-border-medium: rgba(255, 255, 255, 0.12);
  --site-border-strong: rgba(255, 255, 255, 0.2);
  --site-fill-subtle: rgba(255, 255, 255, 0.04);
  --site-fill-control: rgba(255, 255, 255, 0.05);
  --site-input-bg: rgba(0, 0, 0, 0.2);
  --site-table-head-bg: rgba(255, 255, 255, 0.06);
  --site-table-row-border: rgba(255, 255, 255, 0.08);
  --site-surface-deep: rgba(0, 0, 0, 0.25);
  --site-text-heading: rgba(255, 255, 255, 0.96);
  --site-text-cell: rgba(255, 255, 255, 0.84);
  --site-kv-label: rgba(255, 255, 255, 0.68);
  --site-accent: #38bdf8;
  --site-danger: #fb7185;
  --site-grad-spot-1: rgba(56, 189, 248, 0.22);
  --site-grad-spot-2: rgba(251, 113, 133, 0.18);
  --site-shadow-panel: 0 10px 30px rgba(0, 0, 0, 0.25);
  --chrome-nav-bg: rgba(11, 16, 32, 0.98);
  --chrome-nav-border: rgba(255, 255, 255, 0.1);
  --chrome-link-text: rgba(255, 255, 255, 0.92);
  --chrome-link-border: rgba(255, 255, 255, 0.2);
  --chrome-link-bg: rgba(255, 255, 255, 0.05);
  --chrome-link-active-border: rgba(125, 211, 252, 0.65);
  --chrome-link-active-bg: rgba(56, 189, 248, 0.18);
  --chrome-btn-text: rgba(255, 255, 255, 0.92);
  --chrome-btn-border: rgba(255, 255, 255, 0.2);
  --chrome-btn-bg: rgba(255, 255, 255, 0.05);
  --chrome-toggle-text: rgba(255, 255, 255, 0.82);
  --chrome-toggle-bg: rgba(255, 255, 255, 0.06);
  --chrome-toggle-border: rgba(255, 255, 255, 0.18);
  --chrome-toggle-hover-bg: rgba(255, 255, 255, 0.1);
  --chrome-chevron: rgba(255, 255, 255, 0.45);
  --chrome-footer-border: rgba(255, 255, 255, 0.1);
  --chrome-footer-text: rgba(255, 255, 255, 0.55);
  --chrome-footer-btn-text: rgba(255, 255, 255, 0.88);
  --chrome-header-border: rgba(255, 255, 255, 0.08);
  --chrome-h1: rgba(255, 255, 255, 0.95);
  --chrome-sub: rgba(255, 255, 255, 0.68);
  --chrome-metric-border: rgba(255, 255, 255, 0.14);
  --chrome-metric-bg: rgba(255, 255, 255, 0.06);
  --chrome-metric-text: rgba(255, 255, 255, 0.68);
  --chrome-metric-strong: #38bdf8;
  --chrome-select-border: rgba(255, 255, 255, 0.2);
  --chrome-select-bg: rgba(0, 0, 0, 0.2);
  --chrome-select-text: rgba(255, 255, 255, 0.92);
  --chrome-theme-toggle-bg: rgba(255, 255, 255, 0.08);
  --chrome-theme-toggle-border: rgba(255, 255, 255, 0.2);
  --chrome-theme-toggle-text: rgba(255, 255, 255, 0.9);
  --strat-msg-ok-border: rgba(56, 189, 248, 0.45);
  --strat-msg-ok-bg: rgba(56, 189, 248, 0.12);
  --strat-msg-ok-text: #7dd3fc;
  --strat-msg-err-border: rgba(251, 113, 133, 0.45);
  --strat-msg-err-bg: rgba(251, 113, 133, 0.12);
  --strat-msg-err-text: #fda4af;
  /* header metrics — overridden by site-chrome.css per-element */
  --chrome-metric-label: rgba(255, 255, 255, 0.52);
  --chrome-metric-profit: #4ade80;
}

html[data-site-theme="light"] {
  color-scheme: light;
  --site-page-bg: #f1f5f9;
  --site-page-text: #0f172a;
  --site-page-text-soft: rgba(15, 23, 42, 0.9);
  --site-muted: #64748b;
  --site-panel: #ffffff;
  --site-border: rgba(15, 23, 42, 0.1);
  --site-border-medium: rgba(15, 23, 42, 0.12);
  --site-border-strong: rgba(15, 23, 42, 0.2);
  --site-fill-subtle: rgba(15, 23, 42, 0.04);
  --site-fill-control: rgba(15, 23, 42, 0.05);
  --site-input-bg: #ffffff;
  --site-table-head-bg: rgba(15, 23, 42, 0.06);
  --site-table-row-border: rgba(15, 23, 42, 0.08);
  --site-surface-deep: #e2e8f0;
  --site-text-heading: rgba(15, 23, 42, 0.96);
  --site-text-cell: rgba(15, 23, 42, 0.84);
  --site-kv-label: #64748b;
  --site-accent: #0284c7;
  --site-danger: #e11d48;
  --site-grad-spot-1: rgba(2, 132, 199, 0.12);
  --site-grad-spot-2: rgba(225, 29, 72, 0.08);
  --site-shadow-panel: 0 8px 24px rgba(15, 23, 42, 0.08);
  --chrome-nav-bg: #e8ecf4;
  --chrome-nav-border: rgba(15, 23, 42, 0.12);
  --chrome-link-text: #0f172a;
  --chrome-link-border: rgba(15, 23, 42, 0.18);
  --chrome-link-bg: #ffffff;
  --chrome-link-active-border: rgba(2, 132, 199, 0.55);
  --chrome-link-active-bg: rgba(56, 189, 248, 0.2);
  --chrome-btn-text: #0f172a;
  --chrome-btn-border: rgba(15, 23, 42, 0.18);
  --chrome-btn-bg: #ffffff;
  --chrome-toggle-text: #0f172a;
  --chrome-toggle-bg: #ffffff;
  --chrome-toggle-border: rgba(15, 23, 42, 0.15);
  --chrome-toggle-hover-bg: #f1f5f9;
  --chrome-chevron: rgba(15, 23, 42, 0.45);
  --chrome-footer-border: rgba(15, 23, 42, 0.1);
  --chrome-footer-text: #64748b;
  --chrome-footer-btn-text: #0f172a;
  --chrome-header-border: rgba(15, 23, 42, 0.1);
  --chrome-h1: #0f172a;
  --chrome-sub: #475569;
  --chrome-metric-border: rgba(15, 23, 42, 0.12);
  --chrome-metric-bg: #ffffff;
  --chrome-metric-text: #64748b;
  --chrome-metric-strong: #0284c7;
  --chrome-select-border: rgba(15, 23, 42, 0.2);
  --chrome-select-bg: #ffffff;
  --chrome-select-text: #0f172a;
  --chrome-theme-toggle-bg: #ffffff;
  --chrome-theme-toggle-border: rgba(15, 23, 42, 0.15);
  --chrome-theme-toggle-text: #0f172a;
  --strat-msg-ok-border: rgba(2, 132, 199, 0.35);
  --strat-msg-ok-bg: rgba(56, 189, 248, 0.12);
  --strat-msg-ok-text: #0369a1;
  --strat-msg-err-border: rgba(225, 29, 72, 0.35);
  --strat-msg-err-bg: rgba(251, 113, 133, 0.12);
  --strat-msg-err-text: #be123c;
  --chrome-metric-label: #64748b;
  --chrome-metric-profit: #16a34a;
}

/**
 * Installed as a home-screen app (iOS standalone): the translucent status bar
 * lets content slide under the notch — pad by the device safe areas.
 */
@media (display-mode: standalone) {
  body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}

.site-theme-toggle {
  flex-shrink: 0;
  border: 1px solid var(--chrome-theme-toggle-border);
  background: var(--chrome-theme-toggle-bg);
  color: var(--chrome-theme-toggle-text);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}
.site-theme-toggle:hover {
  filter: brightness(1.05);
}

/**
 * Mobile Safari often zooms and jumps scroll when focused inputs use below 16px.
 * Applies to dashboard pages that load site-theme before per-page styles (most inputs inherit 16px).
 */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]),
select,
textarea {
  font-size: max(16px, 1rem);
  line-height: 1.35;
}
input[type="number"] {
  -moz-appearance: textfield;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.site-field-input,
.site-field-select {
  font-size: max(16px, 1rem);
}
.field-select-hint {
  font-size: 12px;
  line-height: 1.45;
  color: var(--site-muted);
  margin-top: 6px;
  white-space: normal;
  direction: rtl;
  text-align: right;
}
.site-number-shell {
  display: flex;
  align-items: stretch;
  gap: 6px;
}
.site-number-shell .site-field-input--number {
  flex: 1;
  min-width: 0;
}
.site-number-step-btn {
  border: 1px solid var(--site-border-strong);
  background: var(--site-panel);
  color: var(--site-page-text);
  border-radius: 8px;
  min-width: 36px;
  padding: 0 10px;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.site-number-step-btn:hover {
  filter: brightness(1.08);
}