/* The whole visual language of mbp-server. Every first-party page loads this file; a redesign is
   editing this file (then screenshot /ui/gallery). Light by default, dark by system setting, and
   data-theme="light|dark" on <html> forces one. Palette carried over from the old monitor page. */
:root {
  color-scheme: light;
  --page: #f9f9f7; --surface: #fcfcfb; --surface-2: #f1f0ec;
  --ink: #0b0b0b; --ink-2: #52514e; --muted: #898781;
  --grid: #e1e0d9; --axis: #c3c2b7; --border: rgba(11,11,11,0.10);
  --accent: #2a78d6; --accent-ink: #ffffff;
  --good: #0ca30c; --warn: #fab219; --crit: #d03b3b; --none: #898781;
  --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100;

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;
  --radius-sm: 6px; --radius: 8px; --radius-lg: 12px; --radius-pill: 999px;
  --font: system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --fs-xs: 11px; --fs-sm: 12px; --fs-md: 14px; --fs-lg: 15px; --fs-xl: 18px; --fs-num: 24px;
  --lh: 1.4;
  --shadow-1: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-2: 0 4px 16px rgba(0,0,0,0.12);
  --maxw: 1100px;
  --tabbar-h: 56px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page: #0d0d0d; --surface: #1a1a19; --surface-2: #242423;
    --ink: #ffffff; --ink-2: #c3c2b7; --muted: #898781;
    --grid: #2c2c2a; --axis: #383835; --border: rgba(255,255,255,0.10);
    --accent: #3987e5; --accent-ink: #ffffff;
    --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500;
    --shadow-1: none; --shadow-2: 0 4px 16px rgba(0,0,0,0.5);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0d0d0d; --surface: #1a1a19; --surface-2: #242423;
  --ink: #ffffff; --ink-2: #c3c2b7; --muted: #898781;
  --grid: #2c2c2a; --axis: #383835; --border: rgba(255,255,255,0.10);
  --accent: #3987e5; --accent-ink: #ffffff;
  --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500;
  --shadow-1: none; --shadow-2: 0 4px 16px rgba(0,0,0,0.5);
}

/* Page basics any service gets for free by loading this file. */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--page); color: var(--ink); font: var(--fs-md)/var(--lh) var(--font); }
a { color: var(--accent); }
code { font-family: var(--mono); font-size: 0.92em; }
h1 { font-size: var(--fs-xl); font-weight: 600; margin: 0 0 var(--sp-1); }
h2 { font-size: var(--fs-lg); font-weight: 600; margin: 0 0 var(--sp-2); }
.hub-page { max-width: var(--maxw); margin: 0 auto; padding: var(--sp-5) var(--sp-4) var(--sp-8); }
.hub-sub { color: var(--ink-2); margin: 0 0 var(--sp-4); }
.hub-hint { color: var(--muted); font-size: var(--fs-sm); margin-top: 6px; }
.hub-section { margin-top: var(--sp-5); }
.hub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: var(--sp-3); }
.hub-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
@media (max-width: 480px) { .hub-tiles { grid-template-columns: repeat(2, 1fr); } }