:root{--bg:#f5f6f8;--card:#fff;--ink:#1d2330;--muted:#6b7280;--accent:#c0392b;--ok:#1e8e3e;--line:#e5e7eb;--warn:#fff4e5}
*{box-sizing:border-box}body{margin:0;font-family:-apple-system,"PingFang SC","Segoe UI",Roboto,Arial,sans-serif;background:var(--bg);color:var(--ink)}
.top{background:#1d2330;color:#fff;padding:12px 16px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.top a{color:#fff;text-decoration:none}.brand{font-weight:700}.top nav{display:flex;flex-wrap:wrap;gap:14px;font-size:14px}
main{padding:16px;margin:0 auto}main.narrow{max-width:480px}main.wide{max-width:1100px}
.card{background:var(--card);border-radius:14px;padding:20px;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.center{text-align:center}h1{font-size:22px;margin:0 0 12px}h1 small{font-size:15px;color:var(--muted);font-weight:400}h2{font-size:18px;margin-top:28px}
label{display:block;font-size:14px;margin:14px 0 6px;color:#374151}
input,select{width:100%;padding:12px;font-size:16px;border:1px solid #d1d5db;border-radius:10px;background:#fff}
.btn{display:inline-block;background:var(--accent);color:#fff;border:0;border-radius:10px;padding:10px 16px;font-size:15px;text-decoration:none;cursor:pointer;margin-top:12px}
.btn.big{width:100%;padding:16px;font-size:18px;margin-top:20px}.btn.small{padding:7px 12px;font-size:14px;margin:0;vertical-align:middle}
.btn.danger{background:#6b7280;width:100%}.link{background:none;border:0;color:var(--accent);cursor:pointer}
.names{display:grid;gap:8px}.name-opt{margin:0}.name-opt input{display:none}
.name-opt span{display:flex;justify-content:space-between;align-items:center;padding:14px;border:2px solid var(--line);border-radius:12px;font-size:17px;background:#fff}
.name-opt input:checked+span{border-color:var(--accent);background:#fdf2f1}
.name-opt em{font-style:normal;font-size:12px;padding:3px 8px;border-radius:20px}.name-opt em.on{background:#e6f4ea;color:var(--ok)}.name-opt em.off{background:#f3f4f6;color:var(--muted)}
.clock-now{font-size:26px;font-weight:700;margin:6px 0 10px;font-variant-numeric:tabular-nums}
.big-status{font-size:22px;line-height:1.5}.done.in{border-top:6px solid var(--ok)}.done.out{border-top:6px solid #2563eb}
.flash{padding:12px 14px;border-radius:10px;margin-bottom:14px;background:#e6f4ea;color:#14532d}.flash.error{background:#fdecea;color:#7f1d1d}
.tip{background:#eef2ff;padding:12px 14px;border-radius:10px;margin-bottom:14px;font-size:14px}
.stats{display:flex;gap:12px;margin:12px 0}.stat{background:#fff;border-radius:12px;padding:14px 18px;flex:1}.stat b{font-size:28px;display:block}.stat span{color:var(--muted);font-size:13px}
table{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden;font-size:14px;margin-top:10px}
th,td{padding:10px;border-bottom:1px solid var(--line);text-align:left}th{background:#f9fafb;font-weight:600;font-size:13px}
tr.warn td,td.warn{background:var(--warn)}tr.inactive td{color:#9ca3af}tr.total td{background:#f9fafb;font-weight:600}
.muted{color:var(--muted);font-size:13px}.tag{background:#fef3c7;color:#92400e;font-size:11px;padding:2px 6px;border-radius:6px}
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 0}.filters input,.filters select{width:auto;padding:8px}
@media (max-width:700px){table{display:block;overflow-x:auto;white-space:nowrap}}
.badge{background:#e11d48;color:#fff;border-radius:10px;padding:1px 7px;font-size:12px;margin-left:2px}
tr.k-short td,td.bad,.stat.bad{background:#fde2e1}tr.k-short td:nth-child(7){color:#b91c1c;font-weight:600}
tr.k-missing td{background:var(--warn)}tr.k-ot td:nth-child(7){color:#1d4ed8}tr.k-off td{color:#9ca3af}
tr.k-working td:nth-child(7){color:#15803d}
main.full{max-width:none}
.grid-wrap{overflow-x:auto;background:#fff;border-radius:12px}
table.grid{font-size:12px;border-collapse:separate;border-spacing:0;margin:0}
table.grid th,table.grid td{padding:3px;border-bottom:1px solid var(--line);border-right:1px solid #f1f1f1;text-align:center;white-space:nowrap}
table.grid .sticky{position:sticky;left:0;background:#fff;z-index:1;text-align:left;min-width:120px}
table.grid th.we{background:#fff7e6}table.grid th.today{background:#fee2e2}
table.grid td.cell select{width:54px;padding:4px 2px;font-size:12px;border:0;background:transparent;text-align:center}
table.grid td.offcnt.over{background:#fde2e1;color:#b91c1c;font-weight:700}
table.grid tr.cnt td{background:#f9fafb;font-weight:600}
table.grid.view td{min-width:34px;font-weight:600}table.grid tr.mine td{outline:2px solid var(--accent)}
.chip{display:inline-block;padding:1px 6px;border-radius:6px;font-size:12px;font-weight:600}
.legend{font-size:13px}.today-shift{background:#f0fdf4;padding:10px;border-radius:10px}
tr.k-late td{background:#fff1f2}tr.k-late td:nth-child(7){color:#b91c1c}tr.k-absent td{background:#fde2e1;color:#b91c1c;font-weight:600}
.btn.save{position:sticky;bottom:10px;width:auto;padding:12px 36px;box-shadow:0 4px 12px rgba(0,0,0,.2)}
.me-btn{display:block;text-align:center;background:#1d4ed8;margin-top:16px}
.me-nav{display:flex;justify-content:space-between;align-items:center;margin:4px 0 10px}.me-nav a{color:var(--accent);text-decoration:none}
.stat b small{font-size:16px;color:var(--muted)}
.offchip{background:#e5e7eb;margin:2px 0}.offchip.past{opacity:.45}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin:12px 0}
.cal-h{text-align:center;font-size:12px;color:var(--muted)}
.cal-d{border-radius:8px;min-height:54px;padding:4px;display:flex;flex-direction:column;align-items:center;border:1px solid var(--line)}
.cal-d .n{font-size:11px;color:#374151}.cal-d .c{font-weight:700;font-size:13px}.cal-d .t{font-size:10px;color:#4b5563}
.cal-d.off{border:2px solid #6b7280}.cal-d.past{opacity:.5}.cal-d.today{outline:3px solid var(--accent)}
tr.rowfilled td.cell{box-shadow:inset 0 0 0 2px #e0a800}