/* Design tokens uit het Claude Design-ontwerp "Wie is De Slimste Collega?" */
:root {
  --bg: #0B1220;
  --panel: #121B2E;
  --panel-2: #1A2540;
  --monitor: #0E1729;
  --grid: #0A1222;
  --line: #2A3654;
  --line-2: #24304A;
  --text: #F4F7FB;
  --soft: #D5DCE8;
  --muted: #A9B4C8;
  --dim: #3D475C;
  --accent: #FFD23F;
  --ecg: var(--accent);
  --alarm: #FF4D5E;
  --off: #5B6782;
  --radius: 16px;
  font-family: Inter, system-ui, -apple-system, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
.display { font-family: Archivo, Inter, sans-serif; }
button {
  font: inherit; color: inherit; background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 10px; padding: .6em 1em; cursor: pointer;
}
button:hover:not(:disabled) { border-color: var(--accent); }
button:disabled { opacity: .4; cursor: default; }
button.primary { background: var(--accent); color: var(--bg); border-color: transparent; font-weight: 800; }
button.danger { border-color: var(--alarm); color: var(--alarm); background: transparent; }
input, select, textarea {
  font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line);
  border-radius: 8px; padding: .4em .6em;
}
.muted { color: var(--muted); }

/* Hartmonitor-klok. Maten per formaat, toestand via klasse. */
.mon {
  --c: #2EC4A6; --rand: var(--line-2); --cijferkleur: var(--text);
  width: 100%; display: flex; align-items: stretch; background: var(--monitor);
  border: 3px solid var(--rand); font-family: Archivo, Inter, sans-serif; color: var(--text);
  transition: box-shadow .2s, border-color .2s;
}
.mon .body { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.mon .top { display: flex; align-items: center; gap: .45em; min-width: 0; }
.mon .dot { border-radius: 999px; background: var(--c); flex: none; }
.mon .name { font-weight: 800; font-stretch: 112%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; line-height: 1.1; }
.mon .graph {
  position: relative; flex: 1 1 auto; min-height: 0; border-radius: 12px; overflow: hidden; background-color: var(--grid);
  background-image: linear-gradient(rgba(120,150,200,.10) 1px, transparent 1px), linear-gradient(90deg, rgba(120,150,200,.10) 1px, transparent 1px);
  background-size: 24px 24px;
}
.mon .graph svg { width: 100%; height: 100%; display: block; }
.mon .badge {
  position: absolute; top: 8px; right: 8px; padding: 3px 12px; border-radius: 999px; font-weight: 800;
  letter-spacing: .06em; white-space: nowrap; background: var(--c); color: var(--bg);
}
.mon .num { flex: none; display: flex; justify-content: center; }
.mon .secs { line-height: .9; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--cijferkleur); }
.mon .unit { font-weight: 800; color: var(--muted); letter-spacing: .12em; }

.mon.klein { height: 200px; padding: 18px 24px; border-radius: 24px; gap: 24px; }
.mon.klein .body { gap: 10px; } .mon.klein .name { font-size: 32px; } .mon.klein .dot { width: 20px; height: 20px; }
.mon.klein .badge { font-size: 20px; } .mon.klein .num { flex-direction: column; align-items: flex-end; min-width: 160px; gap: 10px; }
.mon.klein .secs { font-size: 108px; } .mon.klein .unit { font-size: 22px; }

.mon.groot { height: 600px; padding: 32px 36px; border-radius: 32px; flex-direction: column; gap: 24px; }
.mon.groot .body { gap: 16px; } .mon.groot .name { font-size: 44px; } .mon.groot .dot { width: 28px; height: 28px; }
.mon.groot .badge { font-size: 24px; } .mon.groot .num { flex-direction: row; align-items: baseline; gap: 12px; }
.mon.groot .secs { font-size: 176px; } .mon.groot .unit { font-size: 32px; }

.mon.mini { height: 112px; padding: 10px 14px; border-radius: 18px; gap: 12px; }
.mon.mini .body { gap: 6px; } .mon.mini .name { font-size: 17px; } .mon.mini .dot { width: 12px; height: 12px; }
.mon.mini .badge { font-size: 11px; top: 4px; right: 4px; padding: 2px 8px; } .mon.mini .num { flex-direction: column; align-items: flex-end; min-width: 70px; gap: 4px; }
.mon.mini .secs { font-size: 54px; } .mon.mini .unit { font-size: 12px; }

.mon.buzz { --rand: var(--c); box-shadow: 0 0 0 6px color-mix(in srgb, var(--c) 33%, transparent), 0 0 56px color-mix(in srgb, var(--c) 60%, transparent); }
.mon.beurt { --rand: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 25%, transparent); }
.mon.laag { --rand: var(--alarm); --cijferkleur: var(--alarm); box-shadow: 0 0 44px color-mix(in srgb, var(--alarm) 47%, transparent); }
.mon.laag .badge { background: var(--alarm); }
.mon.uit { opacity: .6; --cijferkleur: var(--muted); }
.mon.uit .badge { background: var(--line); color: var(--text); }