/* Dropbeep brand for server pages (admin dashboard, billing). Same tokens as extension/src/styles/tokens.css */
@font-face { font-family: 'Inter Variable'; src: url(/static/fonts/inter.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }
:root {
  color-scheme: light dark;
  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter Variable', system-ui, sans-serif;
  --mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace;
  --paper: #f2f2f7; --surface: rgba(255,255,255,.72); --surface-2: #fff; --sunken: rgba(116,116,128,.08); --line: rgba(60,60,67,.14); --line-strong: rgba(60,60,67,.29);
  --ink: #000; --ink-2: rgba(60,60,67,.6); --ink-3: rgba(60,60,67,.36); --accent: #007aff; --accent-soft: rgba(0,122,255,.12);
  --mint: #34c759; --coral: #ff3b30; --amber: #ff9500;
  --glass-blur: saturate(190%) blur(26px);
  /* chart roles (validated: blue single series; fixed status palette with icon + label) */
  --series-1: #2a78d6; --good: #0ca30c; --warning: #fab219; --critical: #d03b3b;
}
@media (prefers-color-scheme: dark) {
  :root { --paper: #000; --surface: rgba(36,36,40,.6); --surface-2: #1c1c1e; --sunken: rgba(118,118,128,.18); --line: rgba(255,255,255,.08); --line-strong: rgba(84,84,88,.65);
    --ink: #fff; --ink-2: rgba(235,235,245,.6); --ink-3: rgba(235,235,245,.32); --accent: #0a84ff; --accent-soft: rgba(10,132,255,.18);
    --mint: #30d158; --coral: #ff453a; --amber: #ff9f0a; --series-1: #3987e5; }
}
* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(900px 600px at 10% -10%, rgba(0,122,255,.14), transparent 60%), radial-gradient(800px 600px at 100% 0%, rgba(88,86,214,.12), transparent 60%), var(--paper); background-attachment: fixed; color: var(--ink); font: 400 14px/1.45 var(--font); -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-decoration: none; }
h1 { font: 700 26px/1.15 var(--font); letter-spacing: -0.022em; margin: 0; }
h2 { font: 600 16px/1.3 var(--font); letter-spacing: -0.01em; margin: 0; }
.muted { color: var(--ink-2); }
.label { font: 400 12px/1.3 var(--font); letter-spacing: .01em; text-transform: uppercase; color: var(--ink-2); }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.card { background: var(--surface); border: 0; box-shadow: inset 0 0 0 .5px var(--line); border-radius: 16px; padding: 18px; backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
.center-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.narrow { max-width: 420px; width: 100%; text-align: center; display: grid; gap: 12px; justify-items: center; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font: 600 14px var(--font); cursor: pointer; width: 100%; }
.btn { border-radius: 12px; } .btn-filled { background: var(--accent); border-color: transparent; color: #fff; }
input[type=password], input[type=text] { width: 100%; height: 42px; border-radius: 10px; border: 1px solid var(--line); background: var(--sunken);
  color: var(--ink); padding: 0 12px; font: 14px var(--mono); }
.error { color: var(--coral); font-size: 13px; }