/* polar-ops-console tokens — Bag Recorder */
:root {
  --bg: #F4F6F7;
  --surface: #FFFFFF;
  --surface-muted: #F9FAFB;
  --border: #E2E6EA;
  --border-strong: #D0D6DD;
  --text-1: #1A2330;
  --text-2: #6B7785;
  --text-3: #9AA3AD;
  --accent: #0E7584;
  --accent-soft: #E6F3F5;
  --accent-rgb: 14, 117, 132;
  --online: #2F9B57;
  --warning: #E9A820;
  --offline: #D64545;
  --unknown: #9AA3AD;

  --bg-base: var(--bg);
  --surface-1: var(--surface);
  --surface-2: var(--surface-muted);
  --surface-3: #EEF1F4;
  --accent-strong: #0C6875;
  --success: var(--online);
  --danger: var(--offline);
  --ring: 0 0 0 3px rgba(var(--accent-rgb), .14);
  --shadow-1: 0 1px 2px rgba(26, 35, 48, .04), 0 8px 24px -16px rgba(26, 35, 48, .18);
  --shadow-2: 0 12px 32px -18px rgba(26, 35, 48, .28);
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --sans: "Geist Variable", "Geist", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --radius-card: 8px; --radius-control: 8px; --radius-badge: 999px;
  --topbar-h: 52px; --rail-w: 52px;
  --module-w: 248px; --detail-w: 340px;
  --z-modal: 50; --z-toast: 70;
  --zoom: 1;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

html.dark {
  --bg: #0F1419;
  --surface: #161C24;
  --surface-muted: #1C2430;
  --border: #2A3444;
  --border-strong: #3A4658;
  --text-1: #E8EEF6;
  --text-2: #8B9BB0;
  --text-3: #61738A;
  --accent: #3DB8C5;
  --accent-soft: rgba(61, 184, 197, .14);
  --accent-rgb: 61, 184, 197;
  --accent-strong: #3DB8C5;
  --online: #3DDC84;
  --warning: #FFB020;
  --offline: #F44336;
  --bg-base: var(--bg);
  --surface-1: var(--surface);
  --surface-2: var(--surface-muted);
  --surface-3: #223047;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 20px;
  color: var(--text-1);
  background: var(--bg);
  zoom: var(--zoom);
  -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); border: 0;
}
.hidden, .is-hidden { display: none !important; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

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