:root{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:#0a0f16;color:#edf2f7;
}
*{box-sizing:border-box} body{margin:0;min-width:320px;min-height:100vh}
button,input,select{font:inherit}
button{
  border:1px solid #2d3b4d;background:#172131;color:#f6f8fb;border-radius:10px;
  padding:10px 14px;cursor:pointer
}
button:hover{background:#223149} button:disabled{opacity:.55;cursor:wait}
button.primary{background:#8a1118;border-color:#a91d24;font-weight:800}
button.danger{background:#5a1f24;border-color:#80323a}
button.ghost{background:transparent}
button.small{padding:7px 10px;font-size:12px}
input,select{
  width:100%;background:#111a25;color:#f3f6fa;border:1px solid #2a394c;border-radius:9px;padding:10px 12px
}
label{font-size:12px;color:#9aa8b9;display:grid;gap:6px}
.center,.login-page{min-height:100vh;display:grid;place-items:center;padding:20px}
.login-card,.modal-card{
  width:min(460px,100%);background:#111925;border:1px solid #27364a;border-radius:18px;padding:30px
}
.logo{width:58px;height:58px;margin:0 auto 16px;border-radius:14px;background:#8a1118;display:grid;place-items:center;font-weight:900}
.login-card{text-align:center}.login-card h1{margin:0 0 6px;font-size:30px}.login-card p{color:#92a0b2}
.form-grid{display:grid;gap:12px;text-align:left}.form-grid.two{grid-template-columns:1fr 1fr}
.error,.success,.notice{
  padding:12px 14px;border-radius:10px;margin:12px 0;font-size:13px
}
.error{background:#3d1e23;border:1px solid #6c3139;color:#ffc1c8}
.success{background:#173825;border:1px solid #2b6340;color:#a9e7bd}
.notice{background:#233248;border:1px solid #3b5474;color:#c7ddfb}
.topbar{
  position:sticky;top:0;z-index:10;background:#0d141e;border-bottom:1px solid #1e2936;
  padding:16px 24px;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap
}
.brand{display:flex;align-items:center;gap:12px}.brand-mark{width:40px;height:40px;border-radius:10px;background:#8a1118;display:grid;place-items:center;font-weight:900}
.brand h1{margin:0;font-size:21px}.eyebrow{font-size:10px;letter-spacing:.15em;color:#8290a3;font-weight:800}
.nav{display:flex;gap:8px;flex-wrap:wrap}.nav button.active{background:#8a1118;border-color:#a91d24}
.userbox{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.subtle{font-size:11px;color:#8290a3}
main{padding:24px;max-width:1750px;margin:auto}
.toolbar{display:flex;justify-content:space-between;gap:12px;align-items:end;flex-wrap:wrap;margin-bottom:18px}
.toolbar .left,.toolbar .right{display:flex;gap:10px;align-items:end;flex-wrap:wrap}
.metrics{display:grid;grid-template-columns:repeat(6,minmax(150px,1fr));gap:12px;margin-bottom:18px}
.metric{background:#111a25;border:1px solid #202d3d;border-radius:14px;padding:17px}
.metric.warn{border-color:#6d561b}.metric.danger{border-color:#6b2d34}
.metric-label{font-size:12px;color:#91a0b3}.metric-value{font-size:26px;font-weight:850;margin-top:6px}.metric-sub{font-size:10px;color:#7c899b;margin-top:5px}
.panel{background:#101822;border:1px solid #202d3d;border-radius:15px;overflow:hidden;margin-top:18px}
.panel-title-row{padding:16px 18px;border-bottom:1px solid #202d3d;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.panel h2{font-size:16px;margin:0}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:12px 14px;border-bottom:1px solid #1b2634;white-space:nowrap}
th{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#7f8da0;background:#0f1721}
td{font-size:13px}tr:last-child td{border-bottom:0}tr.clickable:hover{background:#142131;cursor:pointer}
.money,.hours{font-weight:850}
.pill{display:inline-block;padding:5px 8px;border-radius:999px;font-size:10px;font-weight:850;background:#233244}
.pill.active,.pill.working{background:#123d2b;color:#8be2af}.pill.inactive{background:#4a2227;color:#ffb1ba}
.pill.lunch{background:#4b3812;color:#f6d178}.pill.break{background:#203957;color:#9ec5ff}
.pill.overtime{background:#5a2525;color:#ffabab}.pill.approaching{background:#594511;color:#ffd779}
.empty{text-align:center;padding:35px;color:#7e8b9c}.notes{color:#738196;font-size:11px;margin:16px 3px;line-height:1.5}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{background:#111a25;border:1px solid #202d3d;border-radius:14px;padding:16px}
.card h3{margin:0 0 12px;font-size:15px}
.checkbox-list{display:grid;grid-template-columns:repeat(3,minmax(180px,1fr));gap:8px;max-height:320px;overflow:auto;padding:6px}
.checkrow{display:flex;gap:9px;align-items:center;background:#0e1621;border:1px solid #1e2a39;border-radius:9px;padding:9px}
.checkrow input{width:auto}.checkrow label{display:block;font-size:12px;color:#dbe2ea}
.actions{display:flex;gap:8px;flex-wrap:wrap}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.72);display:grid;place-items:center;padding:20px;z-index:50}
.modal-card{width:min(760px,100%);max-height:90vh;overflow:auto}.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.modal-head h2{margin:0}.tabs{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.audit-detail{max-width:460px;white-space:normal;word-break:break-word}
@media(max-width:1200px){.metrics{grid-template-columns:repeat(3,1fr)}.checkbox-list{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){main,.topbar{padding-left:14px;padding-right:14px}.metrics{grid-template-columns:repeat(2,1fr)}.grid-2,.grid-3,.form-grid.two{grid-template-columns:1fr}.checkbox-list{grid-template-columns:1fr}}