:root{color-scheme:dark;font-family:system-ui,-apple-system,sans-serif;background:#081426;color:#edf3ff}
*{box-sizing:border-box}
body{margin:0}
header{display:flex;align-items:center;gap:12px;padding:16px max(16px,calc((100vw - 1120px)/2));background:#102442;border-bottom:1px solid #2b4261}
header img{width:58px;height:58px;object-fit:cover;border-radius:12px;flex-shrink:0}
h1{font-size:clamp(20px,4vw,26px);margin:3px 0;line-height:1.2}
small,.muted,.foot,.heading span{color:#abc0dc}
header small{font-size:10px;letter-spacing:1.3px}
header p{margin:3px 0 0;color:#abc0dc;font-size:12px;line-height:1.4}
main{max-width:1160px;margin:auto;padding:16px}
#login{max-width:460px;margin:20px auto;padding:20px;background:#11243e;border:1px solid #2a4260;border-radius:14px}
nav{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
nav span{margin-right:auto;font-size:13px}
nav button{min-height:40px;padding:9px 12px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));gap:12px;align-items:start}
.card{padding:16px;background:#11243e;border:1px solid #2a4260;border-radius:14px;min-width:0}
.cardTop,.heading{display:flex;justify-content:space-between;align-items:center;gap:10px}
.heading{margin:12px 0}
.heading h2{font-size:21px;margin:0}
.heading span{font-size:12px}
.card h3{margin:0;font-size:21px;overflow-wrap:anywhere}
.badge{font-size:11px;padding:5px 9px;background:#203550;border-radius:30px;white-space:nowrap}
.active{color:#7ff1c2;background:#133f3b}
.metrics{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0 10px}
.metrics div{background:#0b1b30;padding:10px 12px;border-radius:10px}
.metrics strong{font-size:24px;display:block;line-height:1.2}
.metrics span{color:#abc0dc;font-size:10px;line-height:1.3;display:block;margin-top:4px}
.punchTimes{font-size:13px;line-height:1.65;margin:8px 0 10px;font-variant-numeric:tabular-nums}
.due{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #2a4260;padding:10px 0;gap:10px}
.due span{font-size:14px;line-height:1.4}
.due small{font-size:12px}
.due strong{font-size:28px;color:#7ff1c2;overflow-wrap:anywhere}
.actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
button{font:inherit;font-size:15px;font-weight:650;border:0;border-radius:9px;background:#377ff1;color:white;min-height:44px;padding:10px 12px;cursor:pointer;line-height:1.25}
button:hover{filter:brightness(1.12)}
button:disabled{opacity:.35;cursor:default}
.out{background:#304766}
.secondary{background:#213750;font-size:13px}
.wide{width:100%;margin-top:8px}
.pay{background:#176653}
.cardTools{display:grid;grid-template-columns:repeat(auto-fit,minmax(125px,1fr));gap:8px;margin-top:8px}
.cardTools button{padding:9px 8px;font-size:12px}
.card>p:not(.punchTimes){font-size:13px;line-height:1.45;margin:8px 0}
.foot{text-align:center;font-size:11px;margin:22px 0 8px}
label{display:block;font-size:14px;margin:14px 0;color:#bfd0e7}
input,select,textarea{display:block;width:100%;min-height:44px;margin-top:6px;background:#091a30;color:white;border:1px solid #45607f;border-radius:8px;padding:10px;font:inherit}
input[type=checkbox]{width:22px;min-height:22px;display:inline;vertical-align:middle;margin-right:8px}
dialog{max-width:640px;width:calc(100% - 24px);max-height:90vh;background:#11243e;color:#edf3ff;border:1px solid #45607f;border-radius:14px;padding:20px}
dialog::backdrop{background:#020a17ce}
dialog h2{font-size:21px;margin:0 0 12px}
dialog p{font-size:14px;line-height:1.5}
#close{margin-top:12px}
#notice:not(:empty),#policy:not(:empty){padding:10px 12px;border-radius:9px;background:#263b55;margin-bottom:12px;font-size:14px}
#notice.error{background:#632d36}
#notice.success{background:#164c42}
table{border-collapse:collapse;width:100%;font-size:12px}
td,th{padding:8px;border-bottom:1px solid #304766;text-align:left;white-space:nowrap}
.scroll{overflow-x:auto}
.period{padding:12px 0;border-bottom:1px solid #304766}
details{margin-top:6px}
summary{cursor:pointer;color:#b3cced;font-size:13px;min-height:40px;align-content:center;padding:8px 0;line-height:1.4}
button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #a6caff;outline-offset:3px}
@media(max-width:600px){header{padding:12px;gap:10px}header img{width:48px;height:48px}main{padding:12px}nav{display:grid;grid-template-columns:1fr 1fr}nav span{grid-column:1/-1}nav button{font-size:12px;white-space:nowrap}.card{padding:14px}.cardTools{grid-template-columns:1fr 1fr}.metrics span{font-size:10px}}
@media(max-width:350px){header small{letter-spacing:.6px;font-size:9px}.punchTimes{font-size:12px}.badge{font-size:10px}.cardTools button{font-size:11px}.metrics div{padding:9px}.due strong{font-size:25px}}
[hidden]{display:none!important}

.cardTools .manualTime{grid-column:1/-1}
#formError{background:#632d36;border-radius:8px;padding:10px 12px}

.approval{font-size:12px;line-height:1.4;padding:7px 9px;margin:7px 0;background:#203550;border-radius:7px}.approval small{display:block;margin-top:3px;color:inherit;font-size:10px}.approval.approved{background:#133f3b;color:#7ff1c2}.approval.pending{background:#493d22;color:#ffe3a1}.approvalSummary{color:#b9cbe2;font-size:12px!important}.review{background:#315cb0}