:root{--bg:#f3f5f4;--card:#fff;--ink:#17201d;--muted:#5f6b67;--brand:#1f6f5c;--brand-ink:#fff;--good:#e5f4ee;--good-ink:#145c46;--bad:#fdecea;--bad-ink:#9b2c1f;--line:#dde3e0}
@media (prefers-color-scheme:dark){:root{--bg:#111614;--card:#1b2220;--ink:#e8eeec;--muted:#9aa7a2;--brand:#2f9a80;--good:#163329;--good-ink:#8fe0c2;--bad:#3a1d19;--bad-ink:#ffb4a8;--line:#2c3532}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-text-size-adjust:100%}
#app{max-width:480px;margin:0 auto;padding:12px 16px calc(24px + env(safe-area-inset-bottom))}
.wide #app{max-width:1100px}
.top{display:flex;justify-content:space-between;align-items:center;padding:6px 0 12px}
.brand{font-weight:700;font-size:20px;color:var(--brand)}
.clock{font-variant-numeric:tabular-nums;color:var(--muted)}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;margin:0 0 12px}
.center{text-align:center}
.muted{color:var(--muted);font-size:14px}
label{display:block;margin:0 0 12px;font-size:14px;color:var(--muted)}
select,input{display:block;width:100%;margin-top:6px;padding:12px;font-size:17px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink)}
button{font:inherit;cursor:pointer;border-radius:12px;border:1px solid var(--line);padding:10px 14px;background:var(--card);color:var(--ink)}
button.primary{display:block;width:100%;background:var(--brand);color:var(--brand-ink);border:0;font-weight:600;padding:14px}
button.big{font-size:20px;padding:18px;margin:0 0 12px}
.two{display:flex;gap:10px}.two button{flex:1}
button.alt{background:#2b5f8a}
button.dim{opacity:.55}
.shifts{font-size:18px;font-weight:600;font-variant-numeric:tabular-nums;margin-top:4px}
.form-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:0 12px}
.shift-row{display:flex;gap:6px;align-items:center;margin-bottom:6px}
.shift-row select,.shift-row input{width:auto;flex:1 1 70px;margin:0;padding:8px}
.warn{color:var(--bad-ink)}
.sum{font-size:22px;font-weight:700}
button.ghost{display:block;width:100%;margin-top:8px;background:transparent}
button:disabled{opacity:.45;cursor:not-allowed}
.msg{color:var(--bad-ink);min-height:1.4em;margin:10px 0 0}
.status.good{background:var(--good);color:var(--good-ink);border-color:transparent}
.status.bad{background:var(--bad);color:var(--bad-ink);border-color:transparent}
.status a{color:inherit;font-weight:600}
.hello{font-size:18px}
.today{font-size:22px;font-weight:600;font-variant-numeric:tabular-nums;margin-top:4px}
.cam{position:relative;border-radius:16px;overflow:hidden;background:#000;aspect-ratio:3/4;margin-bottom:10px}
.cam video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.oval{position:absolute;inset:12% 18%;border:3px dashed rgba(255,255,255,.7);border-radius:50%}
.ok{font-size:48px}
.bigtime{font-size:56px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--brand)}
.thumb{width:140px;border-radius:12px;margin:12px auto;display:block}
.foot{text-align:center}.foot a{color:var(--muted)}
a{color:var(--brand)}
/* admin */
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.tabs button{flex:1 1 auto}.tabs button.on{background:var(--brand);color:var(--brand-ink);border-color:var(--brand)}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.row input,.row select{width:auto;flex:1 1 140px;margin:0}
.tbl{width:100%;overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:14px}
th,td{text-align:left;padding:8px 6px;border-bottom:1px solid var(--line);vertical-align:top}
th{color:var(--muted);font-weight:600;white-space:nowrap}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.pill{display:inline-block;padding:1px 8px;border-radius:99px;font-size:12px;white-space:nowrap}
.p-dung_gio{background:var(--good);color:var(--good-ink)}.p-tre,.p-chua_cham{background:var(--bad);color:var(--bad-ink)}
.p-cong_ty,.p-app{background:var(--line);color:var(--ink)}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.gallery figure{margin:0;background:var(--bg);border-radius:10px;overflow:hidden;border:1px solid var(--line)}
.gallery img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;cursor:zoom-in}
.gallery figcaption{padding:6px 8px;font-size:13px}
.lb{position:fixed;inset:0;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;z-index:9}
.lb img{max-width:96vw;max-height:92vh;border-radius:8px}