:root{--bg:#f5f6fa;--card:#fff;--ink:#1c2233;--mut:#6b7385;--line:#e4e7ef;--pri:#2457e6;--pri2:#1b44b8;--ok:#14915a;--warn:#c77a05;--bad:#d23a3a;--r:12px}
@media (prefers-color-scheme:dark){:root{--bg:#10131b;--card:#181c27;--ink:#e8ebf3;--mut:#9099ad;--line:#272d3c;--pri:#5b86ff;--pri2:#7a9cff}}
*{box-sizing:border-box}
body{margin:0;font:15px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--ink)}
h1,h2,h3{margin:0 0 .5em;line-height:1.2}
a{color:var(--pri)}
.wrap{max-width:1100px;margin:0 auto;padding:16px}
.top{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.top b{font-size:17px}.top .sp{flex:1}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin-bottom:16px}
.grid{display:grid;gap:12px}.g4{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.g2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.stat{padding:14px;border-radius:var(--r);border:1px solid var(--line);background:var(--card)}
.stat .n{font-size:30px;font-weight:700}.stat .l{color:var(--mut);font-size:13px}
button,.btn{font:inherit;border:1px solid var(--line);background:var(--card);color:var(--ink);padding:8px 14px;border-radius:9px;cursor:pointer}
button:hover{border-color:var(--pri)}
button.pri{background:var(--pri);border-color:var(--pri);color:#fff}button.pri:hover{background:var(--pri2)}
button.bad{color:var(--bad)}button:disabled{opacity:.55;cursor:wait}
button.sm{padding:4px 9px;font-size:13px}
input,select{font:inherit;padding:8px 10px;border:1px solid var(--line);border-radius:9px;background:var(--bg);color:var(--ink);width:100%}
label{display:block;font-size:13px;color:var(--mut);margin-bottom:10px}
label input,label select{margin-top:4px}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:9px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--mut)}
.scroll{overflow-x:auto}
.tag{display:inline-block;padding:2px 9px;border-radius:99px;font-size:12px;font-weight:600}
.t-present{background:#14915a22;color:var(--ok)}.t-late{background:#c77a0522;color:var(--warn)}.t-absent{background:#d23a3a22;color:var(--bad)}.t-in{background:#2457e622;color:var(--pri)}.t-out{background:#6b738522;color:var(--mut)}
.tabs{display:flex;gap:4px;margin-bottom:16px;flex-wrap:wrap}
.tabs button{border-radius:99px}.tabs button.on{background:var(--pri);color:#fff;border-color:var(--pri)}
.row{display:flex;gap:10px;align-items:end;flex-wrap:wrap}.row>*{flex:1;min-width:140px}.row>button{flex:0 0 auto}
.mut{color:var(--mut)}.err{color:var(--bad);min-height:1.3em}.okmsg{color:var(--ok)}
.login{max-width:380px;margin:12vh auto}
#map,.map{height:340px;border-radius:var(--r);border:1px solid var(--line);margin-bottom:12px}
.punch{width:100%;padding:26px;font-size:20px;font-weight:700;border-radius:18px}
.big-clock{font-size:42px;font-weight:700;text-align:center}
.toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 18px;border-radius:99px;z-index:50;max-width:90vw}
.modal{position:fixed;inset:0;background:#0007;display:flex;align-items:center;justify-content:center;padding:16px;z-index:20}
.modal>div{background:var(--card);border-radius:var(--r);padding:20px;width:100%;max-width:520px;max-height:90vh;overflow:auto}
@media(max-width:640px){th:nth-child(n+5),td:nth-child(n+5){white-space:nowrap}}