/* Shared semantic palette. White button text and QR/image artwork stay literal. */
:root {
  color-scheme: dark;
  --bg: #0d1117;
  --panel: #161b22;
  --surface: #21262d;
  --border: #30363d;
  --text: #c9d1d9;
  --text-muted: #8b949e;
  --text-faint: #484f58;
  --link: #58a6ff;
  --primary: #1f6feb;
  --success: #2dd4bf;
  --danger: #f87171;
  --warning: #fbbf24;
  --success-bg: #1b4332;
  --danger-bg: #3b1219;
  --warning-bg: #3b3510;
  --info-bg: #0c2d48;
  --info: #60a5fa;
  --danger-strong: #f85149;
  --green: #3fb950;
  --gold: #d29922;
  --violet: #a5a2ff;
  --purple: #bc8cff;
  --cyan: #56d4dd;
  --orange: #ffa657;
  --pink: #f778ba;
  --on-success: #04201d;
  --highlight: #e6fffb;
  --neutral: #6e7681;
  --purple-alt: #a78bfa;
  --slate: #444c56;
  --blue-pale: #a5d6ff;
  --green-pale: #8ddb8c;
  --purple-pale: #c297ff;
  --yellow-pale: #ffd060;
  --orange-strong: #f0883e;
  --coral: #ff7b72;
  --blue-soft: #79c0ff;
  --gold-soft: #e3b341;
  --pink-soft: #ff9eb5;
  --salmon: #f78166;
  --surface-hover: #262c36;
  --control-hover: #30363d;
  --orange-bg: #3a2008;
  --violet-bg: #1e1b4b;
  --button-green: #238636;
  --button-green-hover: #2ea043;
  --claude: #d97757;
  --claude-bg: #2a1f20;
  --claude-border: #5f3a31;
  --openai: #10a37f;
  --openai-bg: #0d2526;
  --openai-border: #0e4b41;
  --gemini: #8ab4f8;
  --gemini-bg: #1e2837;
  --gemini-border: #3f5271;
  --purple-bg: #262237;
  --purple-border: #534274;
  --teal-bg: #0b2a2a;
  --surface-raised: #282d35;
  --surface-inset: #13181e;
  --tooltip: #1c2128;
  --violet-strong: #a371f7;
  --magenta: #db61a2;
  --amber: #bf8700;
  --lime: #7ee787;
  --lavender: #d2a8ff;
  --success-subtle: #132f26;
  --border-subtle: #21262d;
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f6f8;
  --panel: #ffffff;
  --surface: #e8edf2;
  --border: #8996a5;
  --text: #1f2937;
  --text-muted: #4b5969;
  --text-faint: #596675;
  --link: #075cb8;
  --primary: #0960cc;
  --success: #08776b;
  --danger: #b4232c;
  --warning: #855600;
  --success-bg: #ddf4e8;
  --danger-bg: #ffe9e9;
  --warning-bg: #fff1c2;
  --info-bg: #e3efff;
  --info: #145eb0;
  --danger-strong: #b42318;
  --green: #187a32;
  --gold: #805600;
  --violet: #6250b4;
  --purple: #7040b0;
  --cyan: #086b78;
  --orange: #934600;
  --pink: #a02b67;
  --on-success: #ffffff;
  --highlight: #08776b;
  --neutral: #556271;
  --purple-alt: #6940ba;
  --slate: #667586;
  --blue-pale: #265d8c;
  --green-pale: #267433;
  --purple-pale: #7541a9;
  --yellow-pale: #805900;
  --orange-strong: #a24d0c;
  --coral: #b83832;
  --blue-soft: #1968a3;
  --gold-soft: #826200;
  --pink-soft: #a12d54;
  --salmon: #ac4027;
  --surface-hover: #dce3ea;
  --control-hover: #dce3ea;
  --orange-bg: #fff0df;
  --violet-bg: #edeaff;
  --button-green: #1b762e;
  --button-green-hover: #196b2a;
  --claude: #9f472c;
  --claude-bg: #f9eae5;
  --claude-border: #c78d7c;
  --openai: #087660;
  --openai-bg: #e0f3ee;
  --openai-border: #74a99b;
  --gemini: #235aaa;
  --gemini-bg: #e5edfc;
  --gemini-border: #829cc3;
  --purple-bg: #f0eafa;
  --purple-border: #aa94c9;
  --teal-bg: #def3ee;
  --surface-raised: #e2e8ee;
  --surface-inset: #f1f4f7;
  --tooltip: #ffffff;
  --violet-strong: #703abd;
  --magenta: #9e2465;
  --amber: #805800;
  --lime: #247c2d;
  --lavender: #74409b;
  --success-subtle: #e2f3e9;
  --border-subtle: #cad3dd;
}

.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  min-height: 44px; padding: 8px 12px; gap: 6px; border-radius: 6px;
  background: var(--panel); color: var(--text); border: 1px solid var(--border);
  font: 600 13px/1.2 -apple-system, 'Segoe UI', Roboto, sans-serif; cursor: pointer;
}
.theme-toggle:hover { background: var(--surface); }
.theme-toggle:focus-visible { outline: 3px solid var(--link); outline-offset: 3px; }
.theme-toggle[aria-pressed="true"] { border-color: var(--link); }
.auth-theme { display: flex; justify-content: flex-end; margin-bottom: 12px; }
body > header { flex-wrap: wrap; gap: 12px; }
body > header .header-navigation { flex-wrap: wrap; }
@media (max-width: 768px) {
  body > header { padding: 12px; }
  body > header .header-navigation { width: 100%; gap: 8px !important; }
  body > header .header-navigation h1 { margin-right: auto; font-size: 18px; }
  body > header .meta { width: 100%; }
  body > header .theme-toggle { padding: 8px; }
}
:root[data-theme="light"] #tokensCard .kpi-muted,
:root[data-theme="light"] .flow-step.is-skipped .flow-step-text,
:root[data-theme="light"] .agent-chip.is-idle,
:root[data-theme="light"] .assignee-chip.is-locked,
:root[data-theme="light"] .limit-card.is-stale { opacity: 1; }