:root{--ink:#1c2430;--mut:#667085;--line:#d9dee7;--bg:#f5f6f8;--pri:#1f5fbf;--warn:#9a5b00;--err:#b3261e}*{box-sizing:border-box}body{color:var(--ink);background:var(--bg);margin:0;font:15px/1.6 Microsoft YaHei,Meiryo,Hiragino Sans,system-ui,sans-serif}header{border-bottom:1px solid var(--line);background:#fff;flex-wrap:wrap;align-items:center;gap:8px 20px;padding:10px 20px;display:flex}header nav{flex-wrap:wrap;flex:1;gap:4px 16px;display:flex}header a{color:var(--ink);padding:4px 0;text-decoration:none}header a:hover{color:var(--pri)}.sep{color:var(--mut);border-left:1px solid var(--line);padding-left:16px}.who{color:var(--mut);align-items:center;gap:10px;margin:0;display:flex}main{max-width:1400px;margin:0 auto;padding:20px}.narrow{max-width:760px;margin:0 auto}.login{border:1px solid var(--line);background:#fff;border-radius:10px;max-width:380px;margin:8vh auto;padding:28px}h1{margin:0 0 16px;font-size:22px}h1 small{color:var(--mut);font-size:14px;font-weight:400}h2{margin:0 0 10px;font-size:17px}h3{margin:0 0 6px;font-size:15px}.muted{color:var(--mut)}.help{font-size:13px}.card{border:1px solid var(--line);background:#fff;border-radius:10px;margin:14px 0;padding:18px}.note{background:#eef4ff;border:1px solid #c9daf8;border-radius:8px;margin:12px 0;padding:10px 14px}.note p{margin:4px 0}.note.warn{color:var(--warn);background:#fff7e6;border-color:#f1d49a}.note.err{color:var(--err);background:#fdecea;border-color:#f3b9b3}input,select,textarea,button{font:inherit}input,select,textarea{background:#fff;border:1px solid #b9c0cc;border-radius:6px;max-width:100%;padding:6px 8px}textarea{width:100%}button{cursor:pointer;border:1px solid var(--pri);background:var(--pri);color:#fff;border-radius:8px}button:disabled{opacity:.5;cursor:default}button.big{min-width:220px;padding:14px 26px;font-size:18px;font-weight:600}button.big.alt,button.small{color:var(--pri);background:#fff}button.small{padding:4px 12px}.stack{gap:12px;display:grid}.stack label{gap:4px;display:grid}.filter{flex-wrap:wrap;align-items:end;gap:10px 14px;margin:0 0 14px;display:flex}.filter label{color:var(--mut);gap:2px;font-size:13px;display:grid}.clock{flex-wrap:wrap;gap:12px;margin-bottom:14px;display:flex}.clock>div{border:1px solid var(--line);background:#fff;border-radius:10px;flex:1;min-width:150px;padding:12px 16px;display:grid}.clock b{font-variant-numeric:tabular-nums;font-size:28px}.st-working{color:#0a7a3d}.st-overtime{color:#b54708}.st-off,.st-done{color:var(--mut)}.kv{border:1px solid var(--line);border-spacing:0;background:#fff;border-radius:10px;width:100%;margin:12px 0}.kv th{text-align:left;color:var(--mut);width:40%;font-weight:400}.kv th,.kv td{border-bottom:1px solid #eef0f4;padding:8px 16px}.kv tr:last-child>*{border-bottom:0}.actions{justify-items:start;gap:12px;margin:18px 0;display:grid}.actions.row{flex-wrap:wrap;align-items:center;display:flex}.sec{border-top:1px solid #eef0f4;margin:16px 0;padding-top:12px}.rows{border-spacing:4px;margin:0 -4px 6px}.rows th{color:var(--mut);text-align:left;font-size:13px;font-weight:400}.rows input{width:130px}.rows input.num{width:70px}.thumb{border:1px solid var(--line);max-width:240px;margin-top:8px;display:block}.modal{z-index:10;background:#0f172a99;place-items:center;display:grid;position:fixed;inset:0}.modal-box{background:#fff;border-radius:12px;justify-items:start;gap:8px;width:calc(100% - 32px);max-width:460px;padding:28px;display:grid}.scroll{border:1px solid var(--line);background:#fff;border-radius:10px;overflow-x:auto}.grid{border-collapse:collapse;white-space:nowrap;width:100%;font-size:14px}.grid th,.grid td{text-align:left;vertical-align:top;border-bottom:1px solid #eef0f4;padding:7px 10px}.grid th{background:#f8f9fb;font-weight:600}.grid tr.bad td{background:#fff8f7}.grid tr.total td{background:#f8f9fb;font-weight:600}.grid details form{white-space:normal;min-width:240px;margin-top:8px}.tag{border:1px solid var(--line);border-radius:4px;margin-right:4px;padding:0 6px;font-size:12px;display:inline-block}.tag.late{color:var(--err);border-color:#f3b9b3}.shots{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;display:grid}.shots figure{border:1px solid var(--line);background:#fff;border-radius:8px;margin:0;overflow:hidden}.shots img{object-fit:cover;width:100%;height:140px;display:block}.shots figcaption{padding:6px 10px;font-size:13px}.cols{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;display:grid}.pick a{margin-right:10px}.pick a.on{font-weight:700}@media (max-width:640px){main{padding:12px}button.big{width:100%}}