/* One token palette for management, proxy tools, dialogs, and BLE controls. */
:root {
  color-scheme: light;
  --paper: #f3f6f5;
  --paper-2: #e9efed;
  --surface: #ffffff;
  --surface-raised: #f7faf9;
  --ink: #20332c;
  --muted: #60736a;
  --line: #dce5df;
  --green: #246b4d;
  --on-accent: #ffffff;
  --light: #e4f1e9;
  --red: #b03e45;
  --amber: #90650f;
  --warning-bg: #fbf2db;
  --card: var(--surface);
  --shadow: 0 8px 28px #1634260a;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #111b18;
  --paper-2: #1e2d27;
  --surface: #192620;
  --surface-raised: #213229;
  --ink: #e4eee8;
  --muted: #a3b6aa;
  --line: #34483b;
  --green: #9ed8b6;
  --on-accent: #173324;
  --light: #2b4635;
  --red: #f0a3a5;
  --amber: #e5c277;
  --warning-bg: #393322;
  --shadow: 0 8px 28px #0002;
}
html { min-width: 320px; background: var(--paper); }
body { background: var(--paper); color: var(--ink); }
[hidden] { display: none !important; }
a { color: var(--green); }
button, .button, input, select, textarea { border-radius: 9px; }
button, .button-dark { background: var(--green); color: var(--on-accent); }
button.quiet, button.danger, .button-outline, .button-quiet {
  background: var(--surface); color: var(--ink); border-color: var(--line);
}
button.danger { color: var(--red); }
button:hover { filter: brightness(.96); }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
:is(button, a, input, select, textarea):focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
input, select, textarea { background: var(--surface-raised); color: var(--ink); border: 1px solid var(--line); }
input::placeholder, textarea::placeholder { color: var(--muted); }
input[type="checkbox"] { accent-color: var(--green); }
header { background: var(--surface); }
.panel, .account-card, .device-card, dialog, .preview-card, .control-card {
  background: var(--surface); border-color: var(--line); box-shadow: var(--shadow);
}
dialog { color: var(--ink); }
.playlist-row, fieldset { border: 1px solid var(--line); border-radius: 12px; }
.empty { background: var(--surface); }
.notice { background: var(--warning-bg); border-color: var(--line); color: var(--ink); }
#admin-status { background: var(--light); }
main { max-width: 1440px; }
nav { gap: 8px; padding-bottom: 12px; }
nav button { border-radius: 9px; color: var(--muted); background: transparent; border: 1px solid transparent; }
nav button.active { background: var(--light); color: var(--green); border: 1px solid var(--line); }
.page-title h1 { font-size: 30px; }
.section-title { margin: 24px 0 18px; }
.section-title .actions { margin-top: 0; }
#toast { background: var(--green); color: var(--on-accent); }
.theme-login { position: absolute; top: 20px; right: 24px; }
.px-console {
  --px-bg: var(--paper);
  --px-rail: var(--surface);
  --px-panel: var(--surface);
  --px-card: var(--surface-raised);
  --px-line: var(--line);
  --px-text: var(--ink);
  --px-muted: var(--muted);
  --px-accent: var(--green);
  --px-on-accent: var(--on-accent);
  --px-selected: var(--light);
  --px-green: var(--green);
  --px-yellow: var(--amber);
  --px-red: var(--red);
  box-shadow: var(--shadow);
}
.px-console :is(input, select) { color-scheme: inherit; }
.px-dialog-note { background: var(--surface-raised); color: var(--muted); }
.px-profile-actions { gap: 8px; }
.ops-check { display: grid; grid-template-columns: minmax(110px, 160px) auto; gap: 6px 16px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.ops-check:last-child { border-bottom: 0; }
.ops-check p { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: 13px; }
.ops-check .state { justify-self: end; }
.state.warning { color: var(--amber); }
.state.error { color: var(--red); }
.ops-history-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 12px 0; border-bottom: 1px solid var(--line); }
.ops-history-row time { color: var(--muted); font-size: 12px; }
.ops-history-row button { margin-left: auto; }
.ops-history-row:last-child { border-bottom: 0; }
.button-dark:hover { background: var(--green); }
.button-outline:hover:not(:disabled) { background: var(--light); border-color: var(--green); }
body.control-page .topbar { background: transparent; }
body.control-page :is(.status-item, .fact-card, .transport-card, .log-panel, .notice, .device-tile, .small-state) { background: var(--surface-raised); color: var(--ink); }
body.control-page .frame-badge { background: var(--light); color: var(--green); }
body.control-page .device-icon, body.control-page .button-send { background: var(--green); color: var(--on-accent); }
body.control-page .button-send:hover:not(:disabled) { background: var(--green); }
body.control-page .eyebrow { color: var(--green); }
body.control-page :is(.switch input:checked + span, .progress-track i) { background: var(--green); }
body.control-page .progress-track { background: var(--paper-2); }
body.control-page .small-state[data-state="ok"] { color: var(--green); }
body.control-page .small-state[data-state="error"] { color: var(--red); }
@media (max-width: 780px) {
  main { padding: 24px 16px; }
  .user-actions { flex-wrap: wrap; justify-content: flex-end; }
  nav { gap: 4px; }
  nav button { flex-shrink: 0; }
  .page-title h1 { font-size: 26px; }
  .section-title { flex-wrap: wrap; align-items: flex-start; }
  .px-console { min-height: 0; }
  .px-workspace { padding: 16px 12px; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }

button.danger { color: var(--red); }
#version-info { font-size: 12px; }
#version-warning { margin-bottom: 16px; }