:root{color-scheme:dark;font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;color:#eaf3fc;background:#091324}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at top,#173347 0,transparent 65%)}[hidden]{display:none!important}button,a.primary{font:inherit;cursor:pointer;border:1px solid #36516a;border-radius:12px;padding:12px 18px;background:#1c3147;color:#edf7ff;text-decoration:none}button:disabled{opacity:.45;cursor:not-allowed}a{color:#6de3d2;text-decoration:none}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid #8bebdc;outline-offset:3px}.app-header{display:flex;align-items:center;justify-content:space-between;gap:15px;max-width:1040px;margin:auto;padding:20px}.app-header>a{display:flex;align-items:center;gap:10px;color:#f5fbff;font-size:13px;letter-spacing:.09em}.app-header img{width:40px;height:40px}.app-header b{display:block;color:#71e2d4;font-size:11px;margin-top:3px}main{max-width:690px;margin:8px auto 0;padding:0 16px 30px}.clock-card,.panel{border:1px solid #2f465e;border-radius:24px;background:#152336;overflow:hidden}.panel{padding:22px;margin:20px 0}.panel>a{display:inline-block;margin:12px 8px 0 0}.identity{text-align:center;padding:26px 22px 20px;border-bottom:1px solid #2a4158;background:linear-gradient(125deg,#122637,#1b2c43)}.eyebrow{font-size:10px;letter-spacing:.18em;font-weight:700;color:#68e1d4}.identity h1{font-size:24px;margin:12px 0}.identity p{margin:8px 0}.muted,small{color:#a6bbd1}.identity select{display:block;width:100%;padding:10px;margin:8px 0;background:#101c2a;border:1px solid #3d586d;border-radius:8px;color:inherit}.clock{text-align:center;padding:24px 12px 18px}.clock time{font-size:clamp(40px,8vw,53px);font-weight:750;font-variant-numeric:tabular-nums;color:#54d3f2;letter-spacing:.07em}.clock p{margin:5px}.clock small{font-size:10px}.camera{position:relative;margin:0 24px;aspect-ratio:4/3;border:2px solid #1aa8cf;border-radius:20px;overflow:hidden;background:radial-gradient(ellipse,#203c52,#0a1421)}video{width:100%;height:100%;object-fit:cover}.face-guide{pointer-events:none;position:absolute;width:48%;height:76%;border:2px dashed #62e7d3;border-radius:50%;top:8%;left:26%;opacity:.75}#camera-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:25px;gap:8px;background:#0b1927d9}#camera-placeholder>span{font-size:62px;color:#6dddcf}#camera-placeholder p{font-size:13px;max-width:240px}#camera-label{position:absolute;bottom:14px;left:5%;width:90%;background:#071622d9;padding:8px;border-radius:20px;font-size:11px;color:#6fe6df;text-align:center}.identity-note{display:grid;gap:7px;text-align:center;padding:20px 24px 0;font-size:12px}#status{padding:12px 20px;margin:14px 24px;border-radius:10px;background:#0b1b2a;font-size:13px;line-height:1.5}#status.error{border:1px solid #c66868;color:#ffbaba}#capture-step{text-align:center;padding:0 24px 12px}#capture-step h2{font-size:20px;color:#7de9d7}#capture-step p{font-size:13px;line-height:1.5}#capture-step button{margin:4px}.primary{background:#6ddccc!important;color:#062d31!important;border-color:#6ddccc!important;font-weight:700}.punch-buttons{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 24px 22px}.punch-buttons button{min-height:62px;border:0;font-weight:750;font-size:16px}.in{background:#13865c}.break-out{background:#f4bb27!important;color:#20240b!important}.break-in{background:#18a9c5!important;color:#042c33!important}.out{background:#c94350!important}.alternative{margin:0 24px 24px;padding-top:15px;border-top:1px solid #30465d;font-size:12px}.alternative summary{cursor:pointer;color:#afc5d9}.alternative label{display:flex;align-items:center;gap:10px;margin:14px 0}.alternative input{width:20px;height:20px}.alternative p{color:#a3bad0;line-height:1.5}#stop-camera{display:block;margin:0 auto 22px;font-size:12px}.receipt{border-color:#4faf9c;background:#153b3c}.receipt h2{color:#82efca}.shortcuts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}.shortcuts a,.shortcuts button{display:grid;place-items:center;text-align:center;border:1px solid #304d66;background:#132438;border-radius:12px;padding:16px;font-size:13px;color:#dceef8}.section-heading{display:flex;gap:15px;align-items:center;justify-content:space-between}h2{font-size:17px}.section-heading button{font-size:11px;padding:8px 12px}#history{list-style:none;padding:0;margin:10px 0}#history li{display:flex;justify-content:space-between;gap:15px;padding:12px 0;border-bottom:1px solid #2c4257;font-size:13px}#history small{display:block;font-size:11px;margin-top:6px}footer{padding:20px 15px;font-size:11px;color:#94aec5;text-align:center;line-height:1.7}@media(max-width:430px){.app-header{padding:16px}.app-header>button{font-size:11px;padding:10px}main{padding:0 10px 20px}.identity{padding:20px 16px}.identity h1{font-size:20px}.camera{margin:0 16px}.punch-buttons{padding:0 16px 20px;gap:10px}.punch-buttons button{padding:12px 6px;font-size:14px}#status{margin:14px 16px;padding:12px}.alternative{margin:0 16px 20px}.panel{padding:18px}.clock small{font-size:9px}}
:is(#totem-options) label{display:block;text-align:left;line-height:1.6}#employee{display:block;width:100%;min-width:0;margin:8px 0;padding:12px;background:#101c2a;border:1px solid #3d586d;border-radius:8px;color:inherit;font:inherit}#totem-options a{padding:6px}#totem-mode{width:18px;height:18px;vertical-align:middle}
#history li{display:grid;grid-template-columns:1fr auto}#history .punch-row-actions{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px}#history .punch-row-actions button{font-size:11px;padding:8px 12px}.receipt button{margin:4px}
#camera-label{pointer-events:none}
.camera-tools{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:14px 24px 0}.camera-tools button{min-height:44px;flex:1 1 160px;white-space:normal;line-height:1.35}.camera{min-height:220px}.camera video{position:absolute;inset:0;object-fit:contain;background:#081522}#camera-placeholder{padding:20px 20px 52px;gap:8px}#camera-placeholder>span{font-size:48px;line-height:1}#camera-placeholder p{margin:8px 0;line-height:1.4}#camera-label{bottom:8px;border-radius:10px;line-height:1.35}.camera-tools+#mode-label{margin-top:12px}@media(max-width:430px){.camera-tools{margin-inline:16px;display:grid;grid-template-columns:1fr}.camera-tools button{width:100%}.camera{min-height:220px}#camera-placeholder>span{font-size:44px}}