.attendance-period{display:flex;gap:12px;align-items:end;flex-wrap:wrap}.attendance-period .field{margin:0;min-width:160px}.attendance-period .btn{margin-bottom:1px}.attendance-onshift{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.attendance-onshift>div{display:flex;align-items:center;gap:12px;background:#fafcfa;border:1px solid #e8efe8;padding:15px;border-radius:10px}.attendance-onshift strong{font-size:12px}.attendance-onshift small{display:block;font-size:9px;line-height:1.7;margin-top:6px}.attendance-onshift .pill{margin-left:auto}.attendance-pairing{padding:24px;margin:0 0 25px;background:#fffaf4;border-color:#f6d5b8;display:flex;align-items:center;gap:28px}.attendance-pairing>div:first-child{flex:1;min-width:0}.attendance-pairing h2{font-size:17px}.attendance-pairing p{font-size:11px;line-height:1.7;color:var(--muted);margin:9px 0 13px}.attendance-pairing input{width:100%;padding:10px;border:1px solid #ecd9c9;background:white;border-radius:7px;font-size:11px}.attendance-pairing .actions{flex-wrap:wrap;max-width:260px}.attendance-photo{display:block;width:100%;max-height:55vh;object-fit:contain;background:#f2f4f6;border-radius:10px}[data-att-company][hidden]{display:none}.clock-body{background:#faf8f4}.clock-preview{background:#80623e;color:#fff8eb;text-align:center;font-size:11px;padding:10px 18px}.clock-header{padding:25px 40px;display:flex;justify-content:space-between;align-items:center;gap:20px;border-bottom:1px solid #ede6dc;background:#fffdf9}.clock-header>div:last-child{text-align:right}.clock-header>div:last-child strong{font-size:13px;display:block}.clock-header>div:last-child small{font-size:10px;display:block;margin-top:6px}.clock-shell{max-width:1050px;margin:0 auto;padding:35px 28px 50px;min-height:calc(100vh - 175px)}.clock-readout{text-align:center}.clock-readout time{display:block;font-size:61px;letter-spacing:-2px;font-weight:650;line-height:1.2;font-variant-numeric:tabular-nums}.clock-readout p{color:#88909c;font-size:14px;margin-top:12px}.clock-readout small{font-size:10px;margin-top:8px;display:block;color:#9e988d}.clock-welcome{text-align:center;margin:35px auto 28px;max-width:720px}.clock-welcome h1{font-size:31px;letter-spacing:-1px}.clock-welcome p{font-size:13px;line-height:1.9;color:#89919e;margin-top:11px}.clock-actions{display:grid;grid-template-columns:1fr 1fr;gap:23px;max-width:740px;margin:30px auto}.clock-action{display:flex;flex-direction:column;align-items:center;padding:38px 25px;border:1px solid #f0c79c;border-radius:19px;background:linear-gradient(140deg,#fff1df,#fff8ef);box-shadow:0 8px 30px #85572308}.clock-action svg{width:43px;height:43px;margin-bottom:20px;color:#db7d31}.clock-action strong{font-size:25px;letter-spacing:-.4px}.clock-action span{font-size:12px;color:#ac855e;margin-top:9px}.clock-out{background:linear-gradient(140deg,#edf4ef,#f7faf7);border-color:#d5e5d9}.clock-out svg{color:#629071}.clock-out span{color:#7b9984}.clock-action:hover{box-shadow:0 9px 24px #85572318;transform:translateY(-2px)}.clock-help{text-align:center;color:#9197a0;font-size:11px;line-height:1.8;margin-top:18px}.clock-footer{display:flex;justify-content:center;align-items:center;gap:10px;font-size:10px;color:#979389;padding:20px 24px;border-top:1px solid #eee6da;text-align:center;line-height:1.8}.clock-footer svg{width:17px;height:17px;flex-shrink:0}.clock-form-heading{display:flex;gap:35px;align-items:center;margin:5px 0 32px}.clock-form-heading h1{font-size:34px}.clock-form-heading p{color:#9198a2;font-size:12px;margin-top:8px}.clock-capture-layout{display:grid;grid-template-columns:1.2fr 1fr;gap:45px;background:white;padding:30px;border:1px solid #ebe6df;border-radius:20px}.clock-camera{text-align:center}.clock-camera-window{aspect-ratio:4/3;position:relative;background:#f7f4ef;border-radius:14px;overflow:hidden;border:1px solid #eee3d4}.clock-camera-window video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}.camera-guide{position:absolute;left:28%;top:14%;width:44%;height:70%;border:2px dashed #fff7;border-radius:48%}.camera-label{position:absolute;bottom:15px;left:50%;transform:translateX(-50%);white-space:nowrap;background:#30271ac9;color:white;font-size:10px;padding:8px 12px;border-radius:20px}.sample-camera{height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;background:radial-gradient(ellipse at center,#fff8e9,#f3e6d3);color:#bd9664}.sample-camera svg{width:62px;height:62px;stroke-width:1.1}.sample-camera strong{font-size:18px;margin-top:18px;color:#96734a}.sample-camera span{font-size:11px;margin-top:9px}.clock-camera>.btn{margin-top:14px}.clock-pin-panel>label{display:block;font-size:12px;font-weight:600;margin-bottom:12px}.clock-pin-panel>input{width:100%;padding:14px 20px;border:1px solid #e5e8ec;border-radius:9px;font-size:30px;letter-spacing:12px;text-align:center;min-width:0}.clock-pin-panel>p{font-size:10px;color:#99a0aa;line-height:1.8;margin-top:10px}.clock-keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:20px 0}.clock-keypad button{height:54px;border:1px solid #e6e9ee;border-radius:9px;background:#fcfcfc;font-size:22px;color:#687588}.clock-keypad button[data-digit=clear]{font-size:11px}.clock-keypad button:hover{background:#fff2e5;border-color:#efc5a3}.clock-pin-panel>.btn{width:100%;min-height:48px;font-size:12px}.clock-pin-panel .notice{margin-top:15px}.clock-success{text-align:center;padding:40px 20px;max-width:650px;margin:0 auto}.clock-success-icon{display:grid;place-items:center;background:#e8f5ec;color:#69a17b;border-radius:50%;width:85px;height:85px;margin:0 auto 26px}.clock-success-icon svg{width:42px;height:42px}.clock-success h1{font-size:39px}.clock-success>p{font-size:21px;margin-top:17px}.clock-success time{display:block;margin-top:26px;font-size:30px;font-variant-numeric:tabular-nums}.clock-success>small{display:block;font-size:12px;margin-top:8px}.clock-photo-saved{display:flex;justify-content:center;gap:8px;align-items:center;background:#f0f6ef;padding:13px 18px;border-radius:9px;color:#75916a;font-size:11px;margin:27px auto;width:fit-content}.clock-photo-saved svg{width:17px}.clock-success>.clock-help{font-size:12px}.clock-pin-panel input:focus{outline:2px solid #efb47f;outline-offset:2px}
@media(max-width:1000px){.attendance-onshift{grid-template-columns:1fr 1fr}.attendance-pairing{align-items:flex-start;flex-direction:column}.attendance-pairing .actions{max-width:none}.attendance-pairing>div:first-child{width:100%}}
@media(max-width:700px){.clock-header{padding:18px 20px}.clock-header .brand small{font-size:8px}.clock-header>div:last-child strong{font-size:11px}.clock-shell{padding:28px 18px 35px}.clock-readout time{font-size:43px}.clock-welcome{margin:30px auto 22px}.clock-welcome h1{font-size:26px}.clock-actions{gap:13px}.clock-action{padding:29px 12px}.clock-action strong{font-size:23px}.clock-action span{font-size:10px}.clock-form-heading{gap:20px;margin-bottom:24px}.clock-form-heading h1{font-size:29px}.clock-capture-layout{grid-template-columns:1fr;gap:24px;padding:20px}.clock-camera-window{max-width:380px;margin:auto}.clock-keypad button{height:52px}.clock-footer{font-size:9px}.attendance-onshift{grid-template-columns:1fr}.attendance-period .field{min-width:125px;flex:1}.clock-success h1{font-size:33px}.clock-header .brand strong{font-size:18px}}