/* Appearance only: no trading state, layout replacement, or remote settings. */
:root, :root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0c1119;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei UI", "Microsoft YaHei", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Microsoft YaHei UI", "Microsoft YaHei", monospace;
  --card: #131c28;
  --raised: #1c2736;
  --border: #2a394b;
  --border-strong: #42556d;
  --text: #eaf0f6;
  --muted: #acb8c9;
  --dim: #93a2b6;
  --cyan: #74c5df;
  --blue: #94bcff;
  --green: #6cdcb1;
  --red: #ff9ca8;
  --amber: #f5c46d;
  --primary: #176b8a;
  --primary-hover: #125a75;
  --on-primary: #ffffff;
  --on-accent: #0c1119;
  --info-bg: #162f40;
  --info-border: #30576e;
  --success-bg: #17382f;
  --success-border: #31634f;
  --danger-bg: #38232e;
  --danger-border: #75414e;
  --warning-bg: #372f20;
  --warning-border: #6d5735;
  --scrim: rgba(4, 8, 14, .72);
  --loading-scrim: rgba(12, 17, 25, .88);
  --shadow: 0 5px 18px rgba(0, 0, 0, .13);
  --modal-shadow: 0 20px 65px rgba(0, 0, 0, .35);
  --chart-bg: #131c28;
  --chart-text: #acb8c9;
  --chart-grid: #223143;
  --chart-border: #42556d;
  --chart-line: #74c5df;
  --chart-fill-top: rgba(116, 197, 223, .20);
  --chart-fill-bottom: rgba(116, 197, 223, .01);
}
:root[data-theme="light"] {
  color-scheme: light;
  --page: #f3f6fa;
  --card: #ffffff;
  --raised: #edf2f7;
  --border: #d3dde9;
  --border-strong: #aebed0;
  --text: #17283e;
  --muted: #4b617a;
  --dim: #586c83;
  --cyan: #0e6682;
  --blue: #245bb8;
  --green: #06734f;
  --red: #b52b3c;
  --amber: #805000;
  --primary: #126887;
  --primary-hover: #0b526c;
  --on-primary: #ffffff;
  --on-accent: #ffffff;
  --info-bg: #eaf4f9;
  --info-border: #accfdf;
  --success-bg: #e8f5ee;
  --success-border: #a7d4bd;
  --danger-bg: #fceef0;
  --danger-border: #e2aeb8;
  --warning-bg: #fff4dc;
  --warning-border: #ddc28a;
  --scrim: rgba(24, 39, 58, .38);
  --loading-scrim: rgba(243, 246, 250, .90);
  --shadow: 0 4px 16px rgba(31, 54, 82, .04);
  --modal-shadow: 0 20px 65px rgba(31, 54, 82, .18);
  --chart-bg: #ffffff;
  --chart-text: #4b617a;
  --chart-grid: #e6ecf3;
  --chart-border: #b9c7d8;
  --chart-line: #126f96;
  --chart-fill-top: rgba(18, 111, 150, .15);
  --chart-fill-bottom: rgba(18, 111, 150, .01);
}
html { min-width: 0; scrollbar-color: var(--border-strong) var(--page); }
body:has(.modal-overlay:not([hidden]), .kline-overlay:not([hidden])) { overflow: hidden; }
button, .cockpit-button.primary, button.entry-limit-submit {
  color: var(--on-primary); background: var(--primary); box-shadow: none;
}
button:hover:not(:disabled), .cockpit-button.primary:hover:not(:disabled), button.entry-limit-submit:hover:not(:disabled) {
  background: var(--primary-hover);
}
button:disabled { cursor: not-allowed; }
button.secondary, .cockpit-button.secondary, .icon-button {
  color: var(--text); background: var(--raised); border-color: var(--border-strong);
}
button.secondary:hover:not(:disabled), .cockpit-button.secondary:hover:not(:disabled), .icon-button:hover:not(:disabled) {
  color: var(--text); background: var(--border);
}
.identity-row h1, .login-box h1 { color: var(--text); background: none; letter-spacing: .025em; }
.cockpit-card, .metric-card, .terminal-card, .login-box { box-shadow: var(--shadow); }
.runtime-health, .equity-tooltip { background: var(--card); }
.metric-card strong, .section-heading h2, .trade-title-row h2, .position-cell, .signal-symbol, .audit-cell b { color: var(--text); }
.cash-card strong { color: var(--cyan); }
.metric-card.cash-card strong .metric-pct { color: var(--cyan); background: var(--info-bg); }
.position-value-card strong, .position-empty strong { color: var(--muted); }
.metric-card.pnl-card.neg { border-color: var(--danger-border); box-shadow: var(--shadow); }
.metric-card.pnl-card.pos { border-color: var(--success-border); box-shadow: var(--shadow); }
.metric-card strong .metric-pct { background: var(--danger-bg); }
.metric-card.pos strong .metric-pct { background: var(--success-bg); }
.section-rail, .health-dot, .live-pulse i { box-shadow: none; }
.section-rail.blue { color: var(--blue); }
.section-rail.green { color: var(--green); }
.chart-period, .position-empty, .position-row { background: var(--page); }
.chart-period button { color: var(--muted); background: transparent; }
.chart-period button:hover:not(:disabled) { color: var(--text); background: var(--raised); }
.chart-period button[aria-pressed="true"], .chart-period button[aria-pressed="true"]:hover {
  color: var(--on-primary); background: var(--primary); box-shadow: none;
}
.chart-reset { color: var(--muted); background: var(--raised); }
.chart-reset:hover:not(:disabled), .kline-bars button.active, .kline-bars button:hover:not(:disabled) {
  color: var(--cyan); border-color: var(--info-border); background: var(--info-bg);
}
.asset-chart { background: var(--chart-bg); border-color: var(--border); }
.equity-tooltip { box-shadow: var(--shadow); }
.position-empty .empty-icon { background: var(--raised); box-shadow: none; }
.empty-skeleton { color: var(--dim); border-color: var(--border); }
.position-empty.attention { background: var(--warning-bg); border-color: var(--warning-border); }
.position-empty.attention strong { color: var(--amber); }
.position-empty.waiting { border-color: var(--info-border); }
.signal-card { background: var(--raised); }
.signal-card.risk { background: var(--danger-bg); border-color: var(--danger-border); }
.signal-card.selected, .signal-card.ready { border-color: var(--success-border); box-shadow: none; }
.status-badge { color: var(--text); background: var(--border); }
.status-badge.risk { color: var(--red); background: var(--danger-bg); border: 1px solid var(--danger-border); }
.status-badge.selected, .status-badge.ready { color: var(--on-accent); background: var(--green); }
.signal-count, .execution-status { color: var(--blue); background: var(--info-bg); border-color: var(--info-border); }
.signal-note-row { border-color: var(--border); }
.trade-filter button { color: var(--muted); background: transparent; }
.trade-filter button:hover:not(:disabled), .trade-filter button.active { color: var(--text); background: var(--raised); border-color: var(--border-strong); }
.audit-trade-card { box-shadow: none; }
.audit-side { color: var(--on-accent); }
.audit-cell.fee b { color: var(--amber); }
.audit-pnl { background: transparent; }
.kline-bars button { color: var(--muted); background: var(--raised); }
.loading-overlay { background: var(--loading-scrim); }
.kline-overlay, .modal-overlay { background: var(--scrim); backdrop-filter: blur(4px); }
.kline-panel, .modal { box-shadow: var(--modal-shadow); }
.error-banner { color: var(--red); background: var(--danger-bg); border-color: var(--danger-border); box-shadow: var(--shadow); }
.success-banner { color: var(--green); background: var(--success-bg); border-color: var(--success-border); box-shadow: var(--shadow); }
.manual-close-confirm { color: var(--text); background: var(--raised); }
.live-badge.mode-demo, .meta-entry-limit.limited, .meta-position-limit.limited, .manual-close-risk {
  color: var(--cyan); background: var(--info-bg); border-color: var(--info-border);
}
.meta-entry-limit.limited:hover:not(:disabled), .meta-position-limit.limited:hover:not(:disabled), .live-badge.mode-demo:hover:not(:disabled) {
  color: var(--cyan); background: var(--info-bg); border-color: var(--cyan);
}
.mode-summary.is-live, .live-badge.mode-live, .meta-live {
  color: var(--green); background: var(--success-bg); border-color: var(--success-border);
}
.live-badge.mode-live:hover:not(:disabled), .meta-live:hover:not(:disabled) { color: var(--green); background: var(--success-bg); border-color: var(--green); }
.meta-entry-limit.relaxed, .meta-position-limit.relaxed, .entry-limit-risk.relaxed {
  color: var(--amber); background: var(--warning-bg); border-color: var(--warning-border);
}
.meta-entry-limit.relaxed:hover:not(:disabled), .meta-position-limit.relaxed:hover:not(:disabled) { color: var(--amber); background: var(--warning-bg); border-color: var(--amber); }
.freshness-badge.stale, .health-stale, .account-sync-status.sync-warning { color: var(--amber); }
.cockpit-button.danger, button.manual-close-button, .manual-close-risk.live {
  color: var(--red); background: var(--danger-bg); border-color: var(--danger-border);
}
.cockpit-button.danger:hover:not(:disabled), button.manual-close-button:hover:not(:disabled) { color: var(--red); background: var(--danger-bg); border-color: var(--red); }
button.manual-close-submit { color: #fff; background: #b52b3c; border-color: #b52b3c; }
button.manual-close-submit:hover:not(:disabled) { background: #962132; }
button.entry-limit-submit.is-relaxing { color: #fff; background: #87520a; border-color: #87520a; }
button.entry-limit-submit.is-relaxing:hover:not(:disabled) { background: #704308; }
input, select { border-color: var(--border-strong); }
input::placeholder { color: var(--dim); opacity: 1; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--primary); }
.theme-settings { padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.theme-picker { min-width: 0; margin: 0; padding: 0; border: 0; }
.theme-picker legend { margin-bottom: 10px; padding: 0; font-size: 14px; font-weight: 700; }
.theme-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.theme-option { display: flex; min-height: 48px; padding: 10px; align-items: center; justify-content: center; gap: 7px; color: var(--muted); background: var(--page); border: 1px solid var(--border-strong); border-radius: 9px; cursor: pointer; font-size: 13px; font-weight: 650; }
.theme-option:has(input:checked) { color: var(--cyan); background: var(--info-bg); border-color: var(--cyan); }
.theme-option:has(input:focus-visible) { outline: 2px solid var(--cyan); outline-offset: 2px; }
.theme-option input { width: 16px; height: 16px; min-height: 16px; margin: 0; padding: 0; flex-shrink: 0; }
.theme-schedule { margin-top: 14px; padding: 14px; border-radius: 10px; background: var(--page); border: 1px solid var(--border); }
.theme-schedule-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.theme-schedule-form label { display: grid; gap: 6px; min-width: 0; color: var(--muted); font-size: 12px; }
.theme-schedule-form input { min-width: 0; background: var(--card); font-family: var(--mono); }
.theme-schedule-form button { min-height: 44px; padding: 8px 18px; grid-column: 1/-1; justify-self: start; }
.settings-body .theme-status { margin-bottom: 0; min-height: 20px; color: var(--muted); }
.settings-body .theme-status.is-error { color: var(--red); }
.settings-body .theme-status.is-warning { color: var(--amber); }
@media (max-width: 420px) {
  .theme-options { gap: 6px; }
  .theme-option { padding: 9px 4px; gap: 5px; font-size: 12px; }
  .theme-schedule { padding: 10px; }
  .theme-schedule-form { gap: 10px; }
}