*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--base:#35494d;--base-mid:#4a6b71;--base-light:#6b9198;--bg:#f0f4f5;--surface:#fff;--border:#c6d8db;--text:#1e2e30;--muted:#7a9ea3;--in:#2e7d5e;--in-bg:#e6f5ef;--out:#c0392b;--out-bg:#fdecea;--warn:#d68910;--warn-bg:#fef9ec;--late:#e67e22;--late-bg:#fef3e2}body{font-family:Inter,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden}.page{display:none;flex:1;flex-direction:column;align-items:center}.page.active{display:flex}#pageLogin{justify-content:flex-start;align-items:center;padding:0;background:var(--base);min-height:100vh}.login-wrap{display:flex;flex-direction:column;width:100%;max-width:600px;min-height:100vh;margin:0 auto}.login-left{background:var(--base);flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;padding:2rem 2rem 1.5rem}.ll-clock{font-family:JetBrains Mono,monospace;font-size:clamp(4.8rem,17.6vw,8.8rem);font-weight:600;color:#fff;letter-spacing:-.03em;line-height:1;display:flex;align-items:flex-start;gap:.25rem}.ll-clock-hm{line-height:1}.ll-secs{font-size:clamp(4.8rem,17.6vw,8.8rem);font-weight:600;color:#ffffff59;letter-spacing:-.03em}.ll-date{font-size:clamp(1rem,3vw,1.4rem);color:#fff9;font-weight:400;margin-top:.5rem}.login-right{background:var(--surface);flex:1;display:flex;flex-direction:column;padding:1.5rem 1.75rem 2rem;gap:.85rem;border-radius:28px 28px 0 0}.lr-label{font-size:.72rem;font-weight:600;color:var(--base);letter-spacing:.05em;text-transform:uppercase}.id-display{background:var(--bg);border:2px solid var(--border);border-radius:14px;padding:.85rem 1.25rem;display:flex;align-items:center;gap:.5rem;min-height:72px;transition:border-color .15s}.id-display.focus{border-color:var(--base)}.id-display.error{border-color:var(--out);animation:shake .3s ease}@keyframes shake{0%,to{transform:translate(0)}20%,60%{transform:translate(-6px)}40%,80%{transform:translate(6px)}}.id-text{font-family:JetBrains Mono,monospace;font-size:2.2rem;font-weight:600;color:var(--text);letter-spacing:.06em;flex:1}.id-text.placeholder{color:var(--border);font-size:1.25rem;font-weight:400}.err-badge{font-size:.75rem;color:var(--out);font-weight:500;display:none;background:var(--out-bg);padding:.25rem .7rem;border-radius:20px}.err-badge.show{display:inline-flex}.numpad{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;flex:1}.np-btn{height:76px;border:1.5px solid var(--border);border-radius:14px;background:var(--surface);font-family:Inter,sans-serif;font-size:1.75rem;font-weight:500;color:var(--text);cursor:pointer;transition:background .1s,border-color .1s,transform .08s;display:flex;align-items:center;justify-content:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.np-btn:hover{background:var(--bg);border-color:var(--base-light)}.np-btn:active{transform:scale(.93);background:var(--bg)}.np-del{background:var(--bg);color:var(--muted);font-size:1.5rem}.np-del:hover{background:#fdecea;border-color:#e8b4ae;color:var(--out)}.np-ok{background:var(--base);color:#fff;border-color:var(--base);font-size:1.1rem;font-weight:600}.np-ok:hover{background:var(--base-mid);border-color:var(--base-mid)}.np-ok:active{background:var(--base)}#pageAbsensi,#pagePengajuanLembur,#pagePengajuanCuti{padding:1.5rem 1rem 3rem;gap:1.25rem;background:var(--bg)}.content-wrap{width:100%;max-width:520px;display:flex;flex-direction:column;gap:1.25rem}.clock-card{background:var(--base);border-radius:16px;padding:1.1rem 1.25rem;display:flex;flex-direction:column;gap:.75rem}.clock-user-row{display:flex;align-items:center;gap:.75rem}.clock-avatar{width:40px;height:40px;border-radius:50%;background:#ffffff26;border:2px solid rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;font-size:.82rem;font-weight:700;color:#fff;flex-shrink:0}.clock-user-info{flex:1}.clock-uname{font-size:.92rem;font-weight:700;color:#fff;line-height:1.2}.clock-udept{font-size:.72rem;color:#ffffff80}.clock-logout{background:#c0392b;border:none;border-radius:8px;color:#fff;font-family:Inter,sans-serif;font-size:.82rem;font-weight:700;padding:.45rem 1rem;cursor:pointer;white-space:nowrap}.clock-main-row{display:flex;align-items:center;justify-content:space-between;gap:1rem}.clock-date-col{display:flex;flex-direction:column;gap:.15rem}.date-lbl{font-size:.65rem;color:#ffffff73;text-transform:uppercase;letter-spacing:.07em;font-weight:600}.date-val{font-size:.88rem;color:#ffffffd9;font-weight:500;line-height:1.3}.clock-big{font-family:JetBrains Mono,monospace;font-size:clamp(2.2rem,8vw,3rem);font-weight:600;color:#fff;letter-spacing:-.02em;line-height:1}.clock-s{font-size:1.1rem;opacity:.4;font-weight:400;vertical-align:super}.cuti-card{background:linear-gradient(135deg,var(--base) 0%,var(--base-mid) 100%);border-radius:16px;padding:1rem 1.15rem;display:flex;flex-direction:column;gap:.7rem;box-shadow:0 8px 24px #35494d2e}.cuti-top{display:flex;align-items:center;gap:.75rem}.cuti-icon-wrap{width:42px;height:42px;border-radius:12px;background:#ffffff26;border:1.5px solid rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff}.cuti-icon-wrap svg{width:22px;height:22px}.cuti-info{display:flex;flex-direction:column;gap:.15rem;flex:1;min-width:0}.cuti-lbl{font-size:.68rem;font-weight:700;color:#ffffffa6;text-transform:uppercase;letter-spacing:.06em}.cuti-period{font-size:.75rem;color:#ffffffd9;font-weight:500}.cuti-big{font-family:JetBrains Mono,monospace;font-size:1.9rem;font-weight:700;color:#fff;line-height:1;display:flex;align-items:baseline;gap:.3rem;flex-shrink:0}.cuti-unit{font-family:Inter,sans-serif;font-size:.72rem;font-weight:600;color:#fff9}.cuti-bar-track{width:100%;height:6px;border-radius:20px;background:#ffffff2e;overflow:hidden}.cuti-bar-fill{height:100%;border-radius:20px;background:#fff;transition:width .4s ease}.cuti-stats-row{display:flex;justify-content:space-between;font-size:.72rem;color:#ffffffbf}.cuti-stats-row b{color:#fff;font-weight:700}.cuti-card-low{background:linear-gradient(135deg,#c0392b,#e67e22);box-shadow:0 8px 24px #c0392b38}.cuti-card-low .cuti-bar-fill{background:#fff}.cuti-card-empty{flex-direction:row;align-items:center;background:var(--surface);border:1.5px dashed var(--border);box-shadow:none}.cuti-card-empty .cuti-icon-wrap{background:var(--bg);border-color:var(--border);color:var(--muted)}.cuti-empty-text{font-size:.78rem;color:var(--muted);font-weight:500;flex:1}.cuti-card-error{flex-direction:row;align-items:center;background:var(--warn-bg);border:1.5px solid #f0d590;box-shadow:none}.cuti-card-error .cuti-icon-wrap{background:#d689101f;border-color:#d6891040;color:var(--warn)}.cuti-card-error .cuti-empty-text{color:#8a5a00}.cuti-retry-btn{flex-shrink:0;border:1.5px solid var(--warn);background:transparent;color:var(--warn);font-family:Inter,sans-serif;font-size:.72rem;font-weight:700;padding:.4rem .8rem;border-radius:8px;cursor:pointer}.cuti-retry-btn:hover{background:#d689101a}.quota-retry-link{border:none;background:none;color:inherit;font-weight:700;text-decoration:underline;cursor:pointer;font-size:inherit;padding:0}.cuti-card-loading{flex-direction:row;align-items:center;background:var(--surface);border:1px solid var(--border);box-shadow:none}.cuti-card-loading .cuti-skel-icon{width:42px;height:42px;border-radius:12px;background:var(--bg);flex-shrink:0;animation:cutiPulse 1.3s ease-in-out infinite}.cuti-skel-lines{display:flex;flex-direction:column;gap:.4rem;flex:1}.cuti-skel-line{height:9px;border-radius:5px;background:var(--bg);animation:cutiPulse 1.3s ease-in-out infinite}@keyframes cutiPulse{0%,to{opacity:.5}50%{opacity:1}}.jadwal-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:1rem 1.25rem}.jadwal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.jadwal-title{font-size:.73rem;font-weight:600;color:var(--base);text-transform:uppercase;letter-spacing:.06em}.jadwal-shift{font-size:.72rem;background:#35494d14;color:var(--base);padding:.2rem .65rem;border-radius:20px;font-weight:600}.jadwal-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.5rem}.jadwal-item{display:flex;flex-direction:column;gap:.15rem}.jadwal-ilbl{font-size:.65rem;color:var(--muted);font-weight:500}.jadwal-ival{font-family:JetBrains Mono,monospace;font-size:1rem;font-weight:600;color:var(--text)}.jadwal-dur{border-left:3px solid var(--border);padding-left:.75rem}.status-strip{background:var(--surface);border:1px solid var(--border);border-radius:12px;display:grid;grid-template-columns:1fr 1px 1fr;overflow:hidden}.st-item{padding:.9rem 1.1rem;display:flex;flex-direction:column;gap:.2rem}.st-div{background:var(--border)}.st-lbl{font-size:.65rem;color:var(--muted);font-weight:500;text-transform:uppercase;letter-spacing:.06em}.st-time{font-family:JetBrains Mono,monospace;font-size:1.2rem;font-weight:600;color:var(--text)}.badge{display:inline-flex;align-items:center;gap:3px;font-size:.65rem;font-weight:600;padding:.18rem .5rem;border-radius:20px;width:-moz-fit-content;width:fit-content;margin-top:.1rem}.badge-in{background:var(--in-bg);color:var(--in)}.badge-out{background:var(--out-bg);color:var(--out)}.badge-none{background:var(--bg);color:var(--muted)}.badge-late{background:var(--late-bg);color:var(--late)}.action-area{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}.btn-abs{border:none;border-radius:14px;padding:.85rem 1rem;font-family:Inter,sans-serif;cursor:pointer;display:flex;flex-direction:column;align-items:stretch;transition:transform .12s,box-shadow .15s;position:relative;-webkit-tap-highlight-color:transparent;text-align:left;width:100%;min-width:0}.btn-main{display:flex;flex-direction:row;align-items:flex-start;gap:.75rem;width:100%;min-width:0}.btn-abs:active:not(:disabled){transform:scale(.96)}.btn-abs:disabled{opacity:.75;cursor:not-allowed;filter:saturate(.4)}.btn-abs.done{cursor:default;pointer-events:none}.btn-icon-wrap{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:.1rem}.btn-abs svg{width:20px;height:20px}.btn-content{display:flex;flex-direction:column;gap:.12rem;flex:1;min-width:0}.btn-label-main{font-size:.9rem;font-weight:700;letter-spacing:-.01em;line-height:1.2}.btn-jadwal-lbl{font-size:.57rem;font-weight:600;opacity:.5;text-transform:uppercase;letter-spacing:.06em}.btn-jadwal-val{font-family:JetBrains Mono,monospace;font-size:1.05rem;font-weight:700;line-height:1.2}.btn-divider{width:100%;height:1px;margin:.4rem 0 .3rem}.btn-aktual-row{display:flex;align-items:center;justify-content:space-between;gap:.5rem;width:100%}.btn-aktual-info{flex:1;min-width:0}.btn-aktual-row>:last-child{flex-shrink:0;white-space:nowrap}.bsub{font-family:JetBrains Mono,monospace;font-size:.82rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.btn-masuk .badge{background:#35494d14;color:var(--base);border:none}.btn-masuk .badge-none{background:var(--bg);color:var(--muted)}.btn-masuk.done .badge{background:#ffffff2e;color:#ffffffd9;border:none}.btn-masuk.done .badge-none{background:#ffffff1f;color:#fff9}.btn-masuk.done .badge-in{background:#fff3;color:#fff}.btn-masuk.done .badge-late{background:#b41e1e8c;color:#fff}.btn-masuk .btn-divider,.btn-pulang .btn-divider{background:var(--border)}.btn-masuk.done .btn-divider{background:#fff3}.btn-pulang .badge{background:transparent;color:var(--base);border:1.5px solid var(--border)}.btn-pulang .badge-none{background:transparent;color:var(--muted);border:1.5px solid var(--border)}.btn-pulang .badge-out{background:transparent;color:var(--out);border:1.5px solid var(--out)}.btn-masuk{background:var(--surface);color:var(--base);border:2px solid var(--border)}.btn-masuk:hover:not(:disabled){border-color:var(--base-mid);box-shadow:0 4px 16px #35494d1a}.btn-masuk .btn-icon-wrap{background:#35494d14}.btn-masuk.done{background:var(--in);color:#fff;border:none;box-shadow:0 6px 24px #2e7d5e4d}.btn-masuk.done:hover{box-shadow:0 10px 28px #2e7d5e66}.btn-masuk.done .btn-icon-wrap{background:#ffffff26}.btn-masuk.done:disabled{background:var(--muted);box-shadow:none;filter:none}.btn-masuk.done:disabled:hover{box-shadow:none}.btn-pulang{background:var(--surface);color:var(--base);border:2px solid var(--border)}.btn-pulang:hover:not(:disabled){border-color:var(--base-mid);box-shadow:0 4px 16px #35494d1f}.btn-pulang .btn-icon-wrap{background:#35494d14}.btn-pulang.done{background:var(--in);color:#fff;border:none;box-shadow:0 6px 24px #2e7d5e4d}.btn-pulang.done .btn-icon-wrap{background:#ffffff26}.btn-pulang.done .badge{background:#ffffff2e;color:#ffffffd9;border:none}.btn-pulang.done .badge-none{background:#ffffff1f;color:#fff9}.btn-pulang.done .badge-out{background:#fff3;color:#fff;border:none}.btn-pulang.done:disabled{background:var(--muted);box-shadow:none;filter:none}.btn-pulang.done:disabled:hover{box-shadow:none}.btn-pulang.done .btn-divider{background:#fff3}.btn-pulang.done .btn-jadwal-lbl{opacity:.6}.lembur-area{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}.btn-lembur{border:none;border-radius:14px;padding:.85rem 1rem;font-family:Inter,sans-serif;cursor:pointer;display:flex;flex-direction:column;align-items:stretch;transition:transform .12s,box-shadow .15s;-webkit-tap-highlight-color:transparent;text-align:left;width:100%;min-width:0}.btn-lembur:active:not(:disabled){transform:scale(.96)}.btn-lembur:disabled{opacity:.75;cursor:not-allowed}.btn-lembur.done{cursor:default;pointer-events:none}.btn-lembur .btn-icon-wrap{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:.1rem}.btn-lembur svg{width:20px;height:20px}.btn-mulai-lembur{background:#fff8ec;color:#8a5a00;border:2px dashed #f0b429}.btn-mulai-lembur .btn-icon-wrap{background:#f0b42926}.btn-mulai-lembur:hover:not(:disabled){border-color:#d4920e;box-shadow:0 4px 16px #f0b42933}.btn-mulai-lembur.done{background:#e67e22;color:#fff;border:none;box-shadow:0 6px 20px #e67e2259}.btn-mulai-lembur.done .btn-icon-wrap{background:#fff3}.btn-selesai-lembur{background:#fff8ec;color:#8a5a00;border:2px dashed #f0b429;opacity:.5}.btn-selesai-lembur .btn-icon-wrap{background:#f0b4291a}.btn-selesai-lembur:not(:disabled){opacity:1}.btn-selesai-lembur:hover:not(:disabled){border-color:#d4920e;box-shadow:0 4px 16px #f0b42933}.btn-selesai-lembur.done{background:#e67e22;color:#fff;border:none;box-shadow:0 6px 20px #e67e2259}.btn-selesai-lembur.done .btn-icon-wrap{background:#fff3}.btn-lembur .btn-jadwal-lbl{font-size:.57rem;font-weight:600;opacity:.55;text-transform:uppercase;letter-spacing:.06em}.btn-lembur .btn-label-main{font-size:.9rem;font-weight:700;letter-spacing:-.01em;line-height:1.2}.btn-lembur .btn-jadwal-val{font-family:JetBrains Mono,monospace;font-size:1.05rem;font-weight:700;line-height:1.2}.btn-lembur .btn-divider{width:100%;height:1px;margin:.4rem 0 .3rem;background:#f0b42940}.btn-lembur.done .btn-divider{background:#fff3}.btn-lembur .btn-aktual-row{display:flex;align-items:center;justify-content:space-between;gap:.5rem;width:100%}.btn-lembur .bsub{font-family:JetBrains Mono,monospace;font-size:.82rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.badge-lembur-none{background:#f0b4291f;color:#8a5a00;font-size:.63rem;font-weight:600;padding:.18rem .5rem;border-radius:20px}.badge-lembur-on{background:#ffffff38;color:#fff;font-size:.63rem;font-weight:600;padding:.18rem .5rem;border-radius:20px}.menu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem}.menu-item{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:.9rem .5rem .75rem;display:flex;flex-direction:column;align-items:center;gap:.55rem;cursor:pointer;font-family:Inter,sans-serif;transition:transform .1s,box-shadow .1s;-webkit-tap-highlight-color:transparent}.menu-item:hover{box-shadow:0 4px 16px #35494d1a;transform:translateY(-1px);border-color:var(--base-light)}.menu-item:active{transform:scale(.95)}.menu-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.menu-label{font-size:.72rem;font-weight:600;color:var(--text);text-align:center;line-height:1.4}.page-hdr{display:flex;align-items:center;gap:.75rem}.back-btn{width:38px;height:38px;border-radius:10px;border:1.5px solid var(--border);background:var(--surface);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--base);flex-shrink:0;transition:background .1s}.back-btn:hover{background:var(--bg)}.page-title{font-size:1.05rem;font-weight:700;color:var(--base)}.form-card{background:var(--surface);border-radius:16px;padding:1.1rem 1.25rem;display:flex;flex-direction:column;gap:.9rem}.form-group{display:flex;flex-direction:column;gap:.35rem}.form-label{font-size:.68rem;font-weight:600;color:var(--base);text-transform:uppercase;letter-spacing:.05em}.form-input,.form-textarea{border:1.5px solid var(--border);border-radius:10px;padding:.65rem .85rem;font-family:Inter,sans-serif;font-size:.88rem;color:var(--text);background:var(--surface);outline:none;transition:border-color .15s;width:100%}.form-input:focus,.form-textarea:focus{border-color:var(--base)}.form-textarea{resize:vertical;min-height:70px;font-family:Inter,sans-serif}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}.form-hint{font-size:.72rem;color:var(--muted)}.form-hint.quota-warn{color:var(--out);font-weight:600}.form-error{font-size:.78rem;color:var(--out);background:var(--out-bg);padding:.5rem .75rem;border-radius:8px}.form-submit{background:var(--base);color:#fff;border:none;border-radius:12px;padding:.85rem;font-size:.92rem;font-weight:600;cursor:pointer;transition:background .15s}.form-submit:hover:not(:disabled){background:var(--base-mid)}.form-submit:disabled{opacity:.6;cursor:not-allowed}.type-toggle{display:flex;gap:.5rem}.type-btn{flex:1;padding:.6rem .4rem;border-radius:10px;border:1.5px solid var(--border);background:var(--surface);font-size:.76rem;font-weight:600;color:var(--muted);cursor:pointer;transition:all .15s}.type-btn.active{background:var(--base);border-color:var(--base);color:#fff}.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:.5rem}.photo-thumb{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;border:1.5px solid var(--border)}.photo-thumb img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;display:block}.photo-remove{position:absolute;top:2px;right:2px;width:20px;height:20px;border-radius:50%;border:none;background:#0000008c;color:#fff;font-size:.65rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}.photo-add{aspect-ratio:1;border-radius:10px;border:1.5px dashed var(--border);display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:1.4rem;cursor:pointer;transition:border-color .15s,color .15s}.photo-add:hover{border-color:var(--base-light);color:var(--base)}.req-list{display:flex;flex-direction:column;gap:.6rem}.req-empty{font-size:.8rem;color:var(--muted);text-align:center;padding:1rem 0}.req-item{background:var(--surface);border-radius:14px;padding:.85rem 1rem;display:flex;flex-direction:column;gap:.4rem}.req-item-top{display:flex;justify-content:space-between;align-items:center}.req-date{font-weight:600;font-size:.85rem;color:var(--text)}.req-time{font-family:JetBrains Mono,monospace;font-size:.78rem;color:var(--muted)}.req-type{font-size:.65rem;font-weight:600;padding:.15rem .5rem;border-radius:20px;background:#35494d14;color:var(--base)}.req-desc{font-size:.78rem;color:var(--muted)}.req-badge{font-size:.65rem;font-weight:600;padding:.2rem .55rem;border-radius:20px}.req-badge.pending{background:var(--warn-bg);color:var(--warn)}.req-badge.approved{background:var(--in-bg);color:var(--in)}.req-badge.rejected{background:var(--out-bg);color:var(--out)}.req-realisasi{margin-top:.35rem;padding-top:.5rem;border-top:1px dashed var(--border);display:flex;flex-direction:column;gap:.3rem}.req-realisasi-row{display:flex;justify-content:space-between;align-items:center}.req-realisasi-label{font-size:.62rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}.sec-hdr{display:flex;justify-content:space-between;align-items:center}.sec-title{font-size:.75rem;font-weight:600;color:var(--base);text-transform:uppercase;letter-spacing:.07em}.tab-group{display:flex;gap:4px;background:#35494d12;border-radius:8px;padding:3px}.tab-btn{font-size:.7rem;font-weight:600;padding:.25rem .65rem;border-radius:6px;border:none;background:transparent;color:var(--muted);cursor:pointer;transition:all .15s}.tab-btn.active{background:var(--surface);color:var(--base);box-shadow:0 1px 4px #00000014}.cal-wrap{background:var(--surface);border:1px solid var(--border);border-radius:16px;overflow:hidden}.cal-head{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.25rem;background:var(--base)}.cal-nav{background:#ffffff1f;border:none;cursor:pointer;color:#fff;width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background .1s}.cal-nav:hover{background:#ffffff38}.cal-month{font-size:.95rem;font-weight:700;color:#fff;letter-spacing:.01em}.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;padding:10px}.cal-dow{font-size:.6rem;color:var(--muted);font-weight:700;text-align:center;padding:.4rem 0;text-transform:uppercase;letter-spacing:.04em}.cal-day{aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;border-radius:8px;transition:all .1s;position:relative;font-size:.8rem;font-weight:500;color:var(--text)}.cal-day:hover{background:var(--bg)}.cal-day.empty{cursor:default}.cal-day.today .cal-num{background:var(--base);color:#fff;border-radius:50%;width:26px;height:26px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.82rem}.cal-day.status-in{background:#e6f5ef;border-radius:8px}.cal-day.status-in .cal-num{color:var(--in);font-weight:700}.cal-day.status-late{background:#fef3e2;border-radius:8px}.cal-day.status-late .cal-num{color:var(--late);font-weight:700}.cal-day.status-libur{background:#fef9ec;border-radius:8px}.cal-day.status-libur .cal-num{color:var(--warn);font-weight:600}.cal-day.status-cuti{background:#35494d1a;border-radius:8px}.cal-day.status-cuti .cal-num{color:var(--base);font-weight:700}.cal-day.status-weekend{opacity:.45}.cal-day.disabled{opacity:.3;cursor:not-allowed}.cal-day.selected{background:var(--base)}.cal-day.selected .cal-num{color:#fff;font-weight:700}.cal-tag{font-size:.48rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;line-height:1;margin-top:1px}.cal-tag.in{color:var(--in)}.cal-tag.late{color:var(--late)}.cal-tag.libur{color:var(--warn)}.cal-tag.cuti{color:var(--base)}.cal-tag.lembur{color:#b07d00}.cal-lembur-dot{width:5px;height:5px;border-radius:50%;background:#f0b429;position:absolute;top:3px;right:4px}.cal-num{font-size:.8rem;line-height:1}.cal-detail{border-top:1px solid var(--border);padding:1rem 1.25rem;display:flex;flex-direction:column;gap:.6rem}.cd-date{font-size:.8rem;font-weight:700;color:var(--text)}.cd-grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}.cd-block{border-radius:10px;padding:.6rem .8rem;display:flex;flex-direction:column;gap:.15rem}.cd-block.jadwal{background:#35494d0f}.cd-block.aktual-ok{background:var(--in-bg)}.cd-block.aktual-late{background:var(--late-bg)}.cd-block.aktual-libur{background:var(--warn-bg)}.cd-block.aktual-empty{background:var(--bg)}.cd-lbl{font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;opacity:.6}.cd-val{font-family:JetBrains Mono,monospace;font-size:.9rem;font-weight:700}.cd-sub{font-size:.65rem;font-weight:600;margin-top:.1rem}.cd-empty{font-size:.78rem;color:var(--muted);font-style:italic}.cd-badge{font-size:.65rem;font-weight:700;padding:.2rem .6rem;border-radius:20px}.riwayat-list-wrap{width:100%}.riwayat-list{display:flex;flex-direction:column;gap:.6rem;width:100%}.rw-item{background:var(--surface);border-radius:14px;overflow:hidden;border:1px solid var(--border)}.rw-bar{height:4px;width:100%}.rw-bar.ok{background:var(--in)}.rw-bar.late{background:var(--late)}.rw-bar.libur{background:var(--warn)}.rw-bar.none{background:var(--border)}.rw-body{padding:.75rem 1rem;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.5rem}.rw-left{min-width:0}.rw-dow{font-size:.6rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}.rw-date{font-size:.88rem;font-weight:700;color:var(--text);margin:.05rem 0}.rw-dur{font-size:.7rem;color:var(--muted);font-weight:500}.rw-right{display:grid;grid-template-columns:repeat(3,minmax(46px,auto));align-items:center;gap:.35rem}.rw-pill{display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:8px;padding:.35rem .4rem;width:100%}.rw-pill-lbl{font-size:.53rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;opacity:.6;margin-bottom:2px}.rw-pill-val{font-family:JetBrains Mono,monospace;font-size:.82rem;font-weight:700;line-height:1}.rw-pill.in-ok{background:var(--in-bg);color:var(--in)}.rw-pill.in-late{background:var(--late-bg);color:var(--late)}.rw-pill.out{background:#35494d0f;color:var(--base)}.rw-badge{font-size:.6rem;font-weight:700;padding:.25rem .5rem;border-radius:20px;white-space:nowrap;text-align:center;width:100%}.rw-badge.ok{background:var(--in-bg);color:var(--in)}.rw-badge.late{background:var(--late-bg);color:var(--late)}.rw-badge.libur{background:var(--warn-bg);color:var(--warn)}.modal-bg{display:none;position:fixed;top:0;right:0;bottom:0;left:0;background:#000;z-index:200;flex-direction:column}.modal-bg.open{display:flex}.cam-modal{background:#000;position:relative;flex:1;overflow:hidden}.cam-video{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}canvas.cam-video{display:none}.cam-frame{position:absolute;top:46%;left:50%;transform:translate(-50%,-50%);width:min(64vw,300px);height:min(82vw,380px);max-height:52vh;border-radius:50%/45%;border:3px solid rgba(255,255,255,.85);box-shadow:0 0 0 9999px #0a10118c;pointer-events:none;z-index:1}.cam-topbar{position:absolute;top:0;left:0;right:0;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:.85rem 1.25rem;background:linear-gradient(rgba(0,0,0,.55),transparent)}.cam-title{font-size:.88rem;font-weight:600;color:#fff}.cam-close{background:#ffffff1f;border:none;color:#fff;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1.1rem}.cam-bottom{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;flex-direction:column;align-items:center;gap:1rem;padding:1.5rem 1rem 2rem;background:linear-gradient(transparent,#000000a6)}.cam-info{text-align:center}.cam-time-big{font-family:JetBrains Mono,monospace;font-size:2rem;font-weight:600;color:#fff}.cam-sub{font-size:.78rem;color:#ffffffb3;margin-top:.2rem}.cam-actions{display:flex;gap:.75rem;align-items:center}.btn-capture{width:64px;height:64px;border-radius:50%;border:3px solid rgba(255,255,255,.3);background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .1s}.btn-capture:active{transform:scale(.93)}.btn-capture svg{color:#333;width:28px;height:28px}.cam-hint{font-size:.72rem;color:#ffffff80;text-align:center}.success-overlay{display:none;position:fixed;top:0;right:0;bottom:0;left:0;background:#141e1ecc;z-index:300;flex-direction:column;align-items:center;justify-content:center;padding:2rem}.success-overlay.open{display:flex}.success-card{background:var(--surface);border-radius:20px;padding:2rem;width:100%;max-width:340px;display:flex;flex-direction:column;align-items:center;gap:1rem;text-align:center}.success-photo{width:80px;height:80px;border-radius:50%;overflow:hidden;border:3px solid var(--in);flex-shrink:0}.success-photo img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.success-icon{width:40px;height:40px;border-radius:50%;background:var(--in-bg);display:flex;align-items:center;justify-content:center;margin-bottom:.25rem}.success-title{font-size:1.05rem;font-weight:700;color:var(--text)}.success-msg{font-size:.82rem;color:var(--muted);line-height:1.55}.success-time{font-family:JetBrains Mono,monospace;font-size:2rem;font-weight:700;color:var(--base)}.status-pill{padding:.3rem .9rem;border-radius:20px;font-size:.78rem;font-weight:600}.pill-tepat{background:var(--in-bg);color:var(--in)}.pill-late{background:var(--late-bg);color:var(--late)}.btn-done{padding:.75rem 2rem;border-radius:10px;border:none;background:var(--base);color:#fff;font-family:Inter,sans-serif;font-size:.9rem;font-weight:600;cursor:pointer;width:100%;margin-top:.25rem}.spinner{width:42px;height:42px;border:4px solid var(--border);border-top-color:var(--base);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.modal-overlay{display:none;position:fixed;top:0;right:0;bottom:0;left:0;background:#1e2e308c;z-index:200;align-items:flex-end;justify-content:center;padding-bottom:0}.modal-overlay.open{display:flex}.modal-sheet{background:var(--surface);border-radius:20px 20px 0 0;width:100%;max-width:520px;padding:1.75rem 1.75rem 2rem;display:flex;flex-direction:column;gap:1rem;animation:slideUp .25s ease}@keyframes slideUp{0%{transform:translateY(40px);opacity:0}to{transform:translateY(0);opacity:1}}.sheet-handle{width:36px;height:4px;border-radius:2px;background:var(--border);margin:0 auto -.5rem}.sheet-icon{width:48px;height:48px;border-radius:50%;background:var(--out-bg);display:flex;align-items:center;justify-content:center}.sheet-title{font-size:1rem;font-weight:700}.sheet-desc{font-size:.82rem;color:var(--muted);line-height:1.55;margin-top:-.25rem}.sheet-time{font-family:JetBrains Mono,monospace;font-size:2rem;font-weight:700;color:var(--base)}.sheet-actions{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-top:.25rem}.btn-batal{padding:.75rem;border-radius:8px;border:1.5px solid var(--border);background:transparent;font-family:Inter,sans-serif;font-size:.83rem;font-weight:600;color:var(--muted);cursor:pointer}.btn-ok{padding:.75rem;border-radius:8px;border:none;background:var(--out);color:#fff;font-family:Inter,sans-serif;font-size:.83rem;font-weight:600;cursor:pointer}.toast{position:fixed;bottom:1.25rem;left:50%;transform:translate(-50%) translateY(80px);background:var(--base);color:#fff;padding:.65rem 1.25rem;border-radius:10px;font-size:.8rem;font-weight:500;box-shadow:0 8px 24px #0003;transition:transform .3s cubic-bezier(.34,1.56,.64,1);z-index:999;white-space:nowrap}.toast.show{transform:translate(-50%) translateY(0)}@media(max-width:380px){.action-area{grid-template-columns:1fr}.jadwal-grid{grid-template-columns:1fr 1fr}.rw-body{grid-template-columns:1fr}.rw-right{grid-template-columns:repeat(3,1fr);margin-top:.4rem}}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.visible{visibility:visible}.invisible{visibility:hidden}.fixed{position:fixed}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.hidden{display:none}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}body{line-height:1.5}