:root{--ink:#111;--muted:#6f6f6f;--line:#e4e4e4;--bg:#f7f6f4;--ok:#0a7d3f;--err:#b3261e;--warn:#b06f00}
*{box-sizing:border-box}
body{margin:0;font:16px/1.5 "Inter",-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);
  background:var(--bg);-webkit-tap-highlight-color:transparent}
.hidden{display:none!important}
.logo{height:44px}.logo.sm{height:24px}
.screen{min-height:100vh;display:grid;place-items:center;padding:20px}
.card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;margin-bottom:12px}
#login .card{width:330px;text-align:center}
#login label{text-align:left}
.sub{color:var(--muted);font-size:13px;margin:6px 0 16px}
label{display:block;margin:10px 0;font-size:13px;color:var(--muted)}
input,select,textarea{width:100%;font:inherit;padding:12px;border:1px solid var(--line);
  border-radius:10px;margin-top:5px;background:#fff}
button{font:inherit;padding:12px 16px;border-radius:10px;border:1px solid var(--ink);
  background:var(--ink);color:#fff;cursor:pointer}
button.ghost{background:#fff;color:var(--ink)}
button.sm{padding:7px 11px;font-size:14px}
button.wide{width:100%}
button:disabled{opacity:.5}
header{display:flex;gap:12px;align-items:center;padding:12px 14px;background:#fff;
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
header b{font-size:15px}
.spacer{flex:1}
.muted{color:var(--muted);font-size:12.5px}
#view{padding:14px;padding-bottom:86px}
#tabs{position:fixed;bottom:0;left:0;right:0;display:flex;background:#fff;
  border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
#tabs button{flex:1;border:none;background:#fff;color:var(--muted);border-radius:0;
  padding:13px 4px;font-size:13px}
#tabs button.on{color:var(--ink);font-weight:700;box-shadow:inset 0 2px 0 var(--ink)}
.shiftbar{padding:10px 14px;display:flex;gap:10px;align-items:center;background:#fff;
  border-bottom:1px solid var(--line);font-size:14px}
.dot{width:9px;height:9px;border-radius:50%;background:#bbb;display:inline-block;margin-right:7px}
.dot.on{background:var(--ok)}
.job{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.job:last-child{border:none}
.time{font-weight:700;min-width:74px}
.pill{display:inline-block;font-size:11px;padding:2px 8px;border-radius:20px;background:var(--bg);
  color:var(--muted);margin-left:6px}
.pill.home{background:#eef3ff;color:#2b57d6}
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:12px;padding:13px}
.kpi span{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.kpi b{display:block;font-size:21px;margin-top:3px}
h3{font-size:14px;text-transform:uppercase;letter-spacing:.05em;margin:0 0 10px}
table{width:100%;border-collapse:collapse;font-size:14px}
td,th{padding:7px 4px;border-bottom:1px solid var(--line);text-align:left}
th{font-size:11px;text-transform:uppercase;color:var(--muted)}
.err{color:var(--err);font-size:13px;margin-top:8px;min-height:18px}
.ok{color:var(--ok);font-size:14px;margin-top:8px}
.row{display:flex;gap:8px;align-items:center}
.chip{padding:6px 11px;border:1px solid var(--line);border-radius:20px;background:#fff;font-size:13px}
.chip.ok{border-color:var(--ok);color:var(--ok)}
.chip.warn{border-color:var(--warn);color:var(--warn)}