:root {
  --color-fg: #eef1f6; --color-fg-muted: #8f98a8; --color-bg: #06070a; --color-panel: #131720;
  --color-border-line: #e2e5ea; --color-ok: #1a7f4b; --color-bad: #c4382f; --color-warn: #b7791f;
  --cds-gap-xs: .25rem; --cds-gap-sm: .5rem; --cds-gap-md: .75rem; --cds-gap-lg: 1.25rem;
  --cds-pad-xs: .25rem; --cds-pad-sm: .5rem; --cds-pad-md: .75rem; --cds-pad-lg: 1.25rem;
  --cds-radius: 8px; --cds-font-size-caption: .8125rem; --cds-font-size-body: .9375rem;
  --cds-font-size-heading: 1.125rem; --cds-font-size-title: 1.625rem; --cds-font-weight-medium: 600;
  --font-anthropic-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-anthropic-serif: Georgia, "Times New Roman", serif;
  --cds-chart-status-critical: #c4382f; --cds-chart-grid: #e8ebef; --cds-chart-axis: #8a929c; --cds-chart-muted: #b9bfc8;
  --cds-text-secondary: #626b76; --cds-surface-popover: #ffffff; --cds-border: #d5d9df;
  --cds-shadow-popover: 0 4px 16px rgba(0,0,0,.14); --cds-dur-slow: .3s;
}
@media (prefers-color-scheme: dark) {
  :root {
    --color-fg: #e8eaed; --color-fg-muted: #a0a8b3; --color-bg: #15171a; --color-panel: #1e2125;
    --color-border-line: #2e3238; --color-ok: #4cc38a; --color-bad: #ff7b72; --color-warn: #e3b341;
    --cds-chart-status-critical: #ff7b72; --cds-chart-grid: #2a2e34; --cds-chart-axis: #8a929c; --cds-chart-muted: #565d67;
    --cds-text-secondary: #a0a8b3; --cds-surface-popover: #24282d; --cds-border: #3a3f46; --cds-shadow-popover: 0 4px 16px rgba(0,0,0,.5);
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--color-bg); color: var(--color-fg); font-family: var(--font-anthropic-sans); }
.topbar { display: flex; gap: 1rem; justify-content: flex-end; align-items: center; padding: .5rem 1rem; font-size: .8125rem; color: var(--color-fg-muted); border-bottom: 1px solid var(--color-border-line); }
.topbar a { color: var(--color-fg); }
#dash-root { padding: 1rem; max-width: 1280px; margin: 0 auto; }
.dash-skeleton { color: transparent !important; background: linear-gradient(90deg, var(--color-panel), var(--color-border-line), var(--color-panel)); background-size: 200% 100%; animation: dsk 1.4s infinite; border-radius: 4px; }
@keyframes dsk { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.card { max-width: 380px; margin: 12vh auto; padding: 1.5rem; border: 1px solid var(--color-border-line); border-radius: 12px; background: var(--color-panel); }
.card h1 { font-family: var(--font-anthropic-serif); font-weight: 400; font-size: 1.4rem; margin: 0 0 1rem; }
.card label { display: block; font-size: .8125rem; color: var(--color-fg-muted); margin: .75rem 0 .25rem; }
.card input[type=text], .card input[type=password] { width: 100%; padding: .55rem .6rem; border: 1px solid var(--cds-border); border-radius: 6px; background: var(--color-bg); color: var(--color-fg); font: inherit; }
.card button, .btn { margin-top: 1rem; padding: .55rem 1rem; border: 0; border-radius: 6px; background: var(--color-fg); color: var(--color-bg); font: inherit; cursor: pointer; }
.btn.danger { background: var(--color-bad); color: #fff; margin: 0; padding: .3rem .6rem; font-size: .8125rem; }
.err { color: var(--color-bad); font-size: .875rem; margin-bottom: .5rem; }
.ok { color: var(--color-ok); font-size: .875rem; margin-bottom: .5rem; }
.wide { max-width: 720px; margin: 6vh auto; padding: 0 1rem; }
.wide table { width: 100%; border-collapse: collapse; font-size: .9rem; margin: 1rem 0; }
.wide th, .wide td { text-align: left; padding: .5rem; border-bottom: 1px solid var(--color-border-line); }
.wide form.inline { display: inline; }
.wide fieldset { border: 1px solid var(--color-border-line); border-radius: 8px; padding: 1rem; margin: 1rem 0; }
.wide input[type=text], .wide input[type=password], .wide select { padding: .45rem; border: 1px solid var(--cds-border); border-radius: 6px; background: var(--color-bg); color: var(--color-fg); font: inherit; margin-right: .5rem; }

html { background: #06070a; color-scheme: dark; }
body { background: #06070a; }
.topbar { background: #06070a; border-bottom: 1px solid rgba(255,255,255,.07); color: #8f98a8; }
.topbar a { color: #eef1f6; text-decoration: none; padding: .2rem .7rem; border-radius: 999px; background: rgba(255,255,255,.06); }
#dash-root { padding: 1rem; max-width: 1360px; }