/* dash.restoyaar.in. Tokens follow docs/brand-bible.md §4.1: cool-grey canvas,
   white surfaces, hairline borders, green for action, blue for information only. */
:root {
  --canvas: hsl(210 17% 97%);
  --surface: #ffffff;
  --border: hsl(214 20% 89%);
  --text: hsl(222 39% 11%);
  --muted: hsl(215 16% 40%);
  --action: hsl(152 69% 26%);
  --action-hover: hsl(152 69% 21%);
  --info: hsl(221 83% 53%);
  --danger: hsl(0 72% 45%);
  --warn-bg: hsl(38 92% 92%);
  --warn: hsl(28 80% 28%);
  --radius: 8px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --canvas: hsl(222 30% 9%);
    --surface: hsl(222 25% 13%);
    --border: hsl(220 15% 24%);
    --text: hsl(210 20% 94%);
    --muted: hsl(215 14% 66%);
    --action: hsl(152 55% 38%);
    --action-hover: hsl(152 55% 33%);
    --info: hsl(217 90% 66%);
    --danger: hsl(0 75% 62%);
    --warn-bg: hsl(35 50% 18%);
    --warn: hsl(38 90% 70%);
  }
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--canvas); color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}
a { color: var(--info); }
header {
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.bar { max-width: 760px; margin: 0 auto; padding: 0 16px; height: 60px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand { font-weight: 700; font-size: 18px; color: var(--text); text-decoration: none; }
main { max-width: 760px; margin: 0 auto; padding: 24px 16px 48px; }
h1 { font-size: 26px; margin: 0 0 16px; letter-spacing: -0.01em; }
h2 { font-size: 19px; margin: 24px 0 12px; }
p { margin: 0 0 12px; }
.muted { color: var(--muted); }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; margin-bottom: 12px; }
.row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.name { font-weight: 600; font-size: 17px; }
.state { font-size: 15px; }
.ok { color: var(--action); font-weight: 600; }
.down { color: var(--warn); font-weight: 600; }
.bad { color: var(--danger); font-weight: 600; }
.error { background: var(--warn-bg); color: var(--warn); border-radius: var(--radius); padding: 10px 14px; margin-bottom: 14px; }
form.stack { display: grid; gap: 14px; max-width: 420px; }
label { display: grid; gap: 6px; font-weight: 500; }
input, select {
  font: inherit; color: var(--text); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); min-height: 44px; padding: 0 12px; width: 100%;
}
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px;
  border-radius: var(--radius); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
  border: 1px solid transparent; background: var(--action); color: #fff;
}
.btn:hover { background: var(--action-hover); }
.btn.ghost { background: var(--surface); color: var(--text); border-color: var(--border); }
.inline { display: inline; }
.qr { background: #fff; border-radius: var(--radius); padding: 8px; width: 220px; height: 220px; }
code, .mono { font-family: ui-monospace, monospace; word-break: break-all; }
.copy { background: var(--canvas); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px; }
a:focus-visible, .btn:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; }