:root {
  color-scheme: light;
  --font-ui: "Segoe UI", Arial, sans-serif;
  --font-mono: Consolas, "Courier New", monospace;
  --text-strong: #172033;
  --text: #354158;
  --text-muted: #667085;
  --text-faint: #8b95a5;
  --app-bg: #eef2f6;
  --sidebar-bg: #f8fafc;
  --surface: #ffffff;
  --surface-subtle: #f6f8fb;
  --surface-hover: #f0f4f8;
  --border: #d7dee8;
  --border-strong: #c4cedb;
  --accent: #1463df;
  --accent-hover: #0f56c7;
  --accent-soft: #e9f1ff;
  --success: #16845b;
  --success-soft: #e2f5ed;
  --warning: #a96308;
  --warning-soft: #fff2d8;
  --danger: #c9363e;
  --danger-soft: #fde9eb;
  --info: #2c70c9;
  --info-soft: #e7f0fc;
  --surface-raised: #ffffff;
  --surface-inset: #f2f4f7;
  --row-hover: #f6f8fb;
  --row-selected: #e9f1ff;
  --thead-bg: #f7f9fc;
  --badge-online-bg: #e2f5ed;
  --badge-online-text: #0f5c40;
  --badge-online-border: #b9dfd0;
  --badge-offline-bg: #fde9eb;
  --badge-offline-text: #96262d;
  --badge-offline-border: #efc0c5;
  --badge-warning-bg: #fff2d8;
  --badge-warning-text: #7a4705;
  --badge-warning-border: #ead19b;
  --badge-neutral-bg: #eef1f5;
  --badge-neutral-text: #4a5568;
  --badge-neutral-border: #d7dee8;
  --on-accent: #ffffff;
  --scrollbar-thumb: #c4cedb;
  --scrollbar-track: transparent;
  --focus-ring: #0b68e8;
  --overlay-scrim: rgba(23, 32, 51, 0.34);
  --shadow-colour: rgba(23, 32, 51, 0.1);
  --radius: 6px;
  --radius-sm: 4px;
  --topbar-h: 50px;
  --health-h: 50px;
  --context-h: 48px;
  --fixed-top-h: 148px;
  --sidebar-w: 232px;
  --sidebar-collapsed-w: 64px;
  --drawer-w: 360px;
  --shadow-panel: 0 16px 40px rgba(23, 32, 51, 0.16);
  --shadow-toast: 0 10px 26px rgba(23, 32, 51, 0.18);
}

*, *::before, *::after { box-sizing: border-box; }

html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }

body {
  color: var(--text);
  font: 13px/1.45 var(--font-ui);
  letter-spacing: 0;
  background: var(--app-bg);
}

button, input, select, textarea { color: inherit; font: inherit; letter-spacing: 0; }
button, summary, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.icon { width: 17px; height: 17px; flex: 0 0 auto; }
.eyebrow { color: var(--text-muted); font-size: 10px; font-weight: 700; text-transform: uppercase; }

:root[data-theme="dark"] {
  color-scheme: dark;
  --text-strong: #f2f5f9;
  --text: #d3dae5;
  --text-muted: #98a4b6;
  --text-faint: #7a8798;
  --app-bg: #131922;
  --sidebar-bg: #172030;
  --surface: #1b2534;
  --surface-raised: #212d3f;
  --surface-subtle: #18212f;
  --surface-inset: #141c28;
  --surface-hover: #222e40;
  --row-hover: #212c3d;
  --row-selected: #1d3454;
  --thead-bg: #18212f;
  --border: #2b3a4f;
  --border-strong: #3d4b60;
  --accent: #5c9cff;
  --accent-hover: #7cb0ff;
  --accent-soft: #1c2f4d;
  --success: #46c391;
  --success-soft: #14332a;
  --warning: #e0a94a;
  --warning-soft: #33280f;
  --danger: #ff7a83;
  --danger-soft: #3a1c21;
  --info: #6aa9f0;
  --info-soft: #17293f;
  --badge-online-bg: #14332a;
  --badge-online-text: #6fdcae;
  --badge-online-border: #23573f;
  --badge-offline-bg: #3a1c21;
  --badge-offline-text: #ff9aa1;
  --badge-offline-border: #5e2b32;
  --badge-warning-bg: #33280f;
  --badge-warning-text: #f0c169;
  --badge-warning-border: #55421a;
  --badge-neutral-bg: #212c3d;
  --badge-neutral-text: #a8b4c6;
  --badge-neutral-border: #34425a;
  --on-accent: #0d1420;
  --scrollbar-thumb: #3d4b60;
  --scrollbar-track: transparent;
  --focus-ring: #7cb0ff;
  --overlay-scrim: rgba(6, 10, 16, 0.62);
  --shadow-colour: rgba(0, 0, 0, 0.5);
  --shadow-panel: 0 16px 40px rgba(0, 0, 0, 0.55);
  --shadow-toast: 0 10px 26px rgba(0, 0, 0, 0.5);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    color-scheme: dark;
    --text-strong: #f2f5f9;
    --text: #d3dae5;
    --text-muted: #98a4b6;
    --text-faint: #7a8798;
    --app-bg: #131922;
    --sidebar-bg: #172030;
    --surface: #1b2534;
    --surface-raised: #212d3f;
    --surface-subtle: #18212f;
    --surface-inset: #141c28;
    --surface-hover: #222e40;
    --row-hover: #212c3d;
    --row-selected: #1d3454;
    --thead-bg: #18212f;
    --border: #2b3a4f;
    --border-strong: #3d4b60;
    --accent: #5c9cff;
    --accent-hover: #7cb0ff;
    --accent-soft: #1c2f4d;
    --success: #46c391;
    --success-soft: #14332a;
    --warning: #e0a94a;
    --warning-soft: #33280f;
    --danger: #ff7a83;
    --danger-soft: #3a1c21;
    --info: #6aa9f0;
    --info-soft: #17293f;
    --badge-online-bg: #14332a;
    --badge-online-text: #6fdcae;
    --badge-online-border: #23573f;
    --badge-offline-bg: #3a1c21;
    --badge-offline-text: #ff9aa1;
    --badge-offline-border: #5e2b32;
    --badge-warning-bg: #33280f;
    --badge-warning-text: #f0c169;
    --badge-warning-border: #55421a;
    --badge-neutral-bg: #212c3d;
    --badge-neutral-text: #a8b4c6;
    --badge-neutral-border: #34425a;
    --on-accent: #0d1420;
    --scrollbar-thumb: #3d4b60;
    --scrollbar-track: transparent;
    --focus-ring: #7cb0ff;
    --overlay-scrim: rgba(6, 10, 16, 0.62);
    --shadow-colour: rgba(0, 0, 0, 0.5);
    --shadow-panel: 0 16px 40px rgba(0, 0, 0, 0.55);
    --shadow-toast: 0 10px 26px rgba(0, 0, 0, 0.5);
  }
}

* {
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
  scrollbar-width: thin;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border: 2px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
}