:root {
  --bg:#eef1f6; --app:#fff; --panel:#f7f9fc; --panel-2:#eef1f6;
  --ink:#10151f; --ink-2:#3d4756; --ink-3:#6b7686; --ink-4:#9aa4b2;
  --line:#e2e7f0; --line-2:#d3dae6; --accent:#1f5fd6; --accent-soft:#e7effc; --accent-ink:#1a4fb0;
  --online:#16a06a; --online-bg:#e4f4ec; --idle:#cf8f1f; --idle-bg:#f9efd9;
  --offline:#8892a2; --offline-bg:#eceff4; --break:#6b52d6; --break-bg:#ece8fb;
  --danger:#cf3b52; --danger-bg:#fbe8eb;
  --mono:ui-monospace,"Cascadia Code","Consolas",monospace;
  --sans:ui-sans-serif,system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#090c12; --app:#10151d; --panel:#161d28; --panel-2:#1b2330;
    --ink:#eef2f8; --ink-2:#b3bdcc; --ink-3:#808b9c; --ink-4:#5f6a7a;
    --line:#232d3b; --line-2:#2e394a; --accent:#5b8def; --accent-soft:#172740; --accent-ink:#9dbcf5;
    --online:#35c48a; --online-bg:#12271f; --idle:#e6ad4b; --idle-bg:#2a2313;
    --offline:#7f8b9c; --offline-bg:#1c232e; --break:#9784ea; --break-bg:#201c33;
    --danger:#e5687c; --danger-bg:#2c1620;
  }
}
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans);
  -webkit-font-smoothing:antialiased; font-size:14px; }
.wrap { max-width:1080px; margin:0 auto; padding:26px 22px 60px; }
a { color:var(--accent); }
header { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px; }
.brand { display:flex; align-items:center; gap:11px; }
.brand .logo { width:34px; height:34px; border-radius:9px; background:var(--accent); color:#fff;
  display:grid; place-items:center; font-weight:800; font-size:15px; }
.brand b { font-size:17px; letter-spacing:-.01em; display:block; }
.brand small { color:var(--ink-4); font-size:12px; }
.tabs { display:flex; gap:4px; margin-bottom:18px; }
.tabs a { padding:7px 14px; border-radius:8px; font-size:13px; font-weight:600; text-decoration:none;
  color:var(--ink-3); border:1px solid transparent; }
.tabs a.on { background:var(--accent-soft); color:var(--accent-ink); }
.tabs a:hover:not(.on){ background:var(--panel); color:var(--ink); }
.back { font-size:13px; font-weight:600; text-decoration:none; color:var(--ink-3); display:inline-flex;
  align-items:center; gap:5px; margin-bottom:14px; }
.back:hover { color:var(--ink); }

.kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:20px; }
.kpi { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px 16px; }
.kpi .lbl { font-size:11.5px; color:var(--ink-3); font-weight:600; text-transform:uppercase;
  letter-spacing:.04em; display:flex; align-items:center; gap:7px; }
.kpi .val { font-size:26px; font-weight:800; margin-top:6px; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; }
.kpi .val small { font-size:14px; color:var(--ink-4); font-weight:600; }
.dot { width:8px; height:8px; border-radius:50%; display:inline-block; }

.card { background:var(--app); border:1px solid var(--line); border-radius:12px; overflow:hidden; margin-bottom:18px; }
.card-h { padding:13px 16px; border-bottom:1px solid var(--line); display:flex;
  align-items:center; justify-content:space-between; }
.card-h b { font-size:13.5px; }
.pad { padding:16px; }
table { width:100%; border-collapse:collapse; }
th { text-align:left; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-4); font-weight:700; padding:9px 14px; border-bottom:1px solid var(--line); }
td { padding:12px 14px; border-bottom:1px solid var(--line); font-size:13.5px; vertical-align:middle; }
tr:last-child td { border-bottom:0; }
tr.clk { cursor:pointer; }
tr.clk:hover td { background:var(--panel); }
.who { display:flex; align-items:center; gap:10px; }
.av { width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  font-size:11px; font-weight:700; color:#fff; flex:0 0 auto; }
.who b { font-weight:600; font-size:13.5px; display:block; }
.who small { color:var(--ink-4); font-size:11.5px; }
.mono { font-family:var(--mono); font-variant-numeric:tabular-nums; color:var(--ink-2); }
.muted { color:var(--ink-4); }
.pill { display:inline-flex; align-items:center; gap:6px; padding:3px 9px; border-radius:999px;
  font-size:12px; font-weight:600; white-space:nowrap; }
.s-working,.s-on_time { background:var(--online-bg); color:var(--online); }
.s-idle,.s-late { background:var(--idle-bg); color:var(--idle); }
.s-break { background:var(--break-bg); color:var(--break); }
.s-offline,.s-off { background:var(--offline-bg); color:var(--offline); }
.s-absent { background:var(--danger-bg); color:var(--danger); }
.s-unenrolled { background:var(--panel-2); color:var(--ink-4); }
.bar { height:6px; border-radius:4px; background:var(--panel-2); overflow:hidden; }
.bar i { display:block; height:100%; border-radius:4px; }
.note { background:var(--idle-bg); border:1px solid var(--idle); border-radius:10px;
  padding:11px 15px; font-size:12.5px; color:var(--ink-2); display:flex; gap:10px; margin-top:6px; }
.note b { color:var(--idle); }
@media (max-width:720px){ .kpis{grid-template-columns:repeat(2,1fr)} .hide-sm{display:none} }