:root {
  color-scheme: light;
  --bg: #f4f7f8;
  --surface: #ffffff;
  --surface2: #f8fafb;
  --line: #d7e0e5;
  --line2: #e8edf0;
  --text: #18232b;
  --muted: #64737d;
  --quiet: #839099;
  --green: #16815e;
  --green-hover: #0f6f50;
  --on-accent: #ffffff;
  --green2: #e6f3ed;
  --yellow: #9b6808;
  --red: #c5414f;
  --blue: #286fa3;
  --violet: #7255aa;
  --sidebar: #ffffff;
  --topbar: rgba(255, 255, 255, .96);
  --input: #ffffff;
  --raised: #f8fafb;
  --hover: #edf2f4;
  --active: #e4efea;
  --body-copy: #40505a;
  --heading-soft: #46545d;
  --logo-bg: #f1f8f6;
  --shadow: 0 18px 55px rgba(31, 45, 54, .14);
  --success-bg: #e7f4ee;
  --success-border: #9fcfbc;
  --warning-bg: #fbf2dc;
  --warning-border: #dec88e;
  --danger-bg: #fae9eb;
  --danger-border: #e3adb3;
  --info-bg: #e8f2f8;
  --info-border: #aac9dc;
  --backdrop: rgba(20, 31, 38, .5);
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0c0f12;
  --surface: #14181c;
  --surface2: #191e23;
  --line: #2b3239;
  --line2: #22282e;
  --text: #edf1f4;
  --muted: #929ca5;
  --quiet: #68727b;
  --green: #45d19a;
  --green-hover: #58dea8;
  --on-accent: #07130f;
  --green2: #173b30;
  --yellow: #e4b85b;
  --red: #ef777d;
  --blue: #71b7ef;
  --violet: #b5a1eb;
  --sidebar: #101316;
  --topbar: rgba(12, 15, 18, .96);
  --input: #101418;
  --raised: #111519;
  --hover: #20262b;
  --active: #20272b;
  --body-copy: #cbd2d6;
  --heading-soft: #c9d0d5;
  --logo-bg: #ffffff;
  --shadow: 0 24px 70px rgba(0, 0, 0, .46);
  --success-bg: #13241e;
  --success-border: #285343;
  --warning-bg: #282115;
  --warning-border: #5b4b2d;
  --danger-bg: #281719;
  --danger-border: #5a3034;
  --info-bg: #142331;
  --info-border: #30506a;
  --backdrop: rgba(5, 7, 9, .72);
}

body { background: var(--bg); color: var(--text); }
.mark, .brandmark { background: var(--logo-bg); border-color: var(--line); }
.theme-toggle svg { width: 17px; height: 17px; }

.login-page .theme-toggle {
  position: fixed;
  right: 18px;
  top: 18px;
  width: 38px;
  height: 38px;
  margin: 0;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--surface);
  color: var(--muted);
  box-shadow: none;
}
.login-page .theme-toggle:hover { background: var(--hover); color: var(--text); }
.login-page .panel { background: var(--surface); border-color: var(--line); box-shadow: var(--shadow); }
.login-page label { color: var(--muted); }
.login-page input { background: var(--input); color: var(--text); border-color: var(--line); }
.login-page #submit { color: var(--on-accent); }
.login-page #submit:hover { background: var(--green-hover); }
.login-page .foot { color: var(--quiet); }

.control-page .sidebar { background: var(--sidebar); border-color: var(--line); }
.control-page .nav button { color: var(--muted); }
.control-page .nav button:hover { background: var(--hover); color: var(--text); }
.control-page .nav button.active { background: var(--active); color: var(--text); }
.control-page .topbar { background: var(--topbar); border-color: var(--line); }
.control-page .iconbtn,
.control-page .toolbtn { background: var(--surface); border-color: var(--line); }
.control-page .iconbtn:hover,
.control-page .toolbtn:hover { background: var(--hover); border-color: var(--line); }
.control-page .panelhead h3 { color: var(--heading-soft); }
.control-page .sidefoot .env,
.control-page .tag { color: var(--muted); }
.control-page .route-node,
.control-page .segmented,
.control-page .memoryitem { background: var(--raised); }
.control-page .segmented button.active { background: var(--active); color: var(--text); }
.control-page .search,
.control-page .field input,
.control-page .field select,
.control-page .field textarea { background: var(--input); color: var(--text); border-color: var(--line); }
.control-page .actionicon { background: var(--surface2); border-color: var(--line); color: var(--text); }
.control-page .actionicon:hover { background: var(--hover); }
.control-page tbody tr:hover { background: var(--surface2); }
.control-page .meter { background: var(--line2); }
.control-page .chartgrid { stroke: var(--line2); }
.control-page .memoryitem p,
.control-page .dialogbody p { color: var(--body-copy); }
.control-page .tag.up,
.control-page .healthpill.up { color: var(--green); border-color: var(--success-border); background: var(--success-bg); }
.control-page .tag.wait { color: var(--yellow); border-color: var(--warning-border); background: var(--warning-bg); }
.control-page .tag.down,
.control-page .healthpill.down { color: var(--red); border-color: var(--danger-border); background: var(--danger-bg); }
.control-page .tag.info { color: var(--blue); border-color: var(--info-border); background: var(--info-bg); }
.control-page .dangerbtn { color: var(--red); border-color: var(--danger-border); background: var(--danger-bg); }
.control-page .primarybtn { color: var(--on-accent); }
.control-page .primarybtn:hover { background: var(--green-hover); }
.control-page dialog { background: var(--surface); color: var(--text); border-color: var(--line); box-shadow: var(--shadow); }
.control-page dialog::backdrop { background: var(--backdrop); }
.control-page .toast { color: var(--green); border-color: var(--success-border); background: var(--success-bg); box-shadow: var(--shadow); }
.control-page .toast.error { color: var(--red); border-color: var(--danger-border); background: var(--danger-bg); }

@media (max-width: 520px) {
  .login-page .theme-toggle { right: 12px; top: 12px; }
}