:root {
  --page: #f9f9f7;
  --surface-1: #fcfcfb;
  --text-primary: #0b0b0b;
  --text-secondary: #52514e;
  --text-muted: #898781;
  --border: rgba(11, 11, 11, 0.10);
  --hairline: #e1e0d9;
  --accent: #2a78d6;
  --status-good: #0ca30c;
  --status-warning: #fab219;
  --status-critical: #d03b3b;
  --good-text: #006300;
}
@media (prefers-color-scheme: dark) {
  :root {
    --page: #0d0d0d;
    --surface-1: #1a1a19;
    --text-primary: #ffffff;
    --text-secondary: #c3c2b7;
    --text-muted: #898781;
    --border: rgba(255, 255, 255, 0.10);
    --hairline: #2c2c2a;
    --accent: #3987e5;
    --good-text: #0ca30c;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--page);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
}
h1 { font-size: 26px; }
a { color: var(--accent); }

.btn {
  display: inline-block;
  appearance: none;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
}
.btn.secondary {
  background: var(--surface-1);
  color: var(--text-primary);
  border-color: var(--border);
}
.btn:disabled { opacity: 0.5; cursor: default; }

input, select {
  font-family: inherit;
  font-size: 15px;
  padding: 10px 12px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface-1);
  color: var(--text-primary);
}

.card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
}

.status-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: baseline;
}
.status-dot.working { background: var(--status-good); }
.status-dot.lunch { background: var(--status-warning); }
.status-dot.off { background: var(--text-muted); }