:root{--color-header:#0b2340;--color-header-alt:#0f3560;--color-bg:#f4f6f8;--color-surface:#fff;--color-panel:#f4f6f8;--color-panel-alt:#eef1f4;--color-accent:#ffc107;--color-accent-dark:#c90;--color-text:#17202a;--color-text-on-header:#f5f7fa;--color-text-dim:#6b7684;--color-text-dim-on-header:#a9b7c6;--color-success:#16a34a;--color-success-dark:#0f7a37;--color-danger:#dc2626;--color-danger-dark:#a91d1d;--color-warning-bg:#fde8e8;--color-warning-text:#b42318;--color-ok-bg:#e8f7ee;--color-ok-text:#0f7a37;--color-border:#17202a1a;--font-display:"Space Grotesk", "Segoe UI", sans-serif;--font-body:"Inter", "Segoe UI", sans-serif;--font-mono:"JetBrains Mono", "Courier New", monospace;--radius-lg:24px;--radius-md:14px;--radius-sm:8px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box}html,body{background:var(--color-bg);color:var(--color-text);font-family:var(--font-body);-webkit-tap-highlight-color:transparent;overscroll-behavior-y:contain;margin:0;padding:0}#root{flex-direction:column;min-height:100dvh;display:flex}button,input,textarea{font-family:inherit}button{cursor:pointer;color:inherit;background:0 0;border:none}button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid var(--color-accent);outline-offset:2px}a{color:inherit}::selection{background:var(--color-accent);color:var(--color-bg)}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}.app-shell{flex-direction:column;width:100%;max-width:480px;min-height:100dvh;margin:0 auto;display:flex;position:relative}.app-shell__main{flex:1;overflow-y:auto}.app-shell__main--padded{padding:24px 20px 100px}.field{flex-direction:column;gap:8px;margin-bottom:18px;display:flex}.field__label{color:var(--color-text-dim);font-size:14px;font-weight:500}.field__input{background:var(--color-surface);border:1.5px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text);padding:14px 16px;font-size:16px;transition:border-color .15s,box-shadow .15s}.field__input:focus{border-color:var(--color-header);outline:none;box-shadow:0 0 0 3px #0b234014}.field__input--textarea{resize:vertical;min-height:88px;font-family:var(--font-body)}.btn{border-radius:var(--radius-md);padding:15px 20px;font-size:16px;font-weight:600;transition:transform .1s,opacity .2s,box-shadow .15s}.btn:active{transform:scale(.98)}.btn:disabled{opacity:1;cursor:not-allowed;background:var(--color-panel-alt);color:var(--color-text-dim);border:1px solid var(--color-border);box-shadow:none}.btn--full{width:100%}.btn--primary{background:var(--color-header);color:#fff;box-shadow:0 6px 16px -6px #0b234066}.btn--secondary{background:var(--color-surface);color:var(--color-text);border:1.5px solid var(--color-border);margin-top:12px}.btn--ghost{color:var(--color-text-dim);border:1.5px solid var(--color-border);background:0 0}.login-page{flex-direction:column;flex:1;justify-content:center;gap:36px;display:flex}.login-page__brand{text-align:center}.login-page__logo{background:var(--color-header);border-radius:20px;justify-content:center;align-items:center;width:64px;height:64px;margin-bottom:22px;display:inline-flex;box-shadow:0 8px 20px -6px #0b234059}.login-page__title{font-family:var(--font-display);color:var(--color-text);margin:0 0 6px;font-size:26px;font-weight:700}.login-page__subtitle{color:var(--color-text-dim);margin:0;font-size:14px}.login-page__form{flex-direction:column;display:flex}.login-page__error{color:var(--color-danger);background:var(--color-warning-bg);border-radius:var(--radius-sm);margin:-6px 0 16px;padding:10px 14px;font-size:13px}.field__password-wrap{align-items:center;display:flex;position:relative}.field__input--password{width:100%;padding-right:46px}.field__toggle-password{color:var(--color-text-dim);border-radius:var(--radius-sm);justify-content:center;align-items:center;padding:6px;display:flex;position:absolute;right:12px}.field__toggle-password:hover{color:var(--color-text)}.beranda-page{flex-direction:column;min-height:100%;display:flex}.beranda-header{background:var(--color-header);color:var(--color-text-on-header);border-radius:0 0 28px 28px;padding:20px 20px 28px}.beranda-header__top{justify-content:space-between;align-items:flex-start;margin-bottom:22px;display:flex}.beranda-header__title{font-family:var(--font-display);margin:0;font-size:22px;font-weight:700}.beranda-header__greeting{color:var(--color-text-dim-on-header);margin:2px 0 0;font-size:13px}.beranda-header__logout{color:var(--color-text-on-header);border-radius:var(--radius-sm);border:1px solid #f5f7fa40;padding:6px 12px;font-size:13px}.beranda-header__bottom{justify-content:space-between;align-items:flex-end;display:flex}.beranda-header__tanggal{color:var(--color-text-dim-on-header);text-transform:capitalize;margin:0 0 2px;font-size:13px}.beranda-header__jam{font-family:var(--font-mono);letter-spacing:1px;margin:0;font-size:38px;font-weight:700}.beranda-header__lokasi-badge{background:var(--color-header-alt);color:var(--color-text-on-header);border-radius:var(--radius-sm);text-align:right;max-width:160px;padding:8px 14px;font-size:13px;font-weight:600}.beranda-page__content{flex-direction:column;flex:1;gap:16px;padding:20px 20px 100px;display:flex}.beranda-page__loading{text-align:center;color:var(--color-text-dim);padding:40px 0}.beranda-page__error{color:var(--color-danger);text-align:center;font-size:14px}.field--lokasi{margin-bottom:0}.lokasi-status{border-radius:var(--radius-md);text-align:center;padding:14px 16px}.lokasi-status--warn{background:var(--color-warning-bg)}.lokasi-status--ok{background:var(--color-ok-bg)}.lokasi-status__title{margin:0;font-size:14px;font-weight:600}.lokasi-status--warn .lokasi-status__title,.lokasi-status--warn .lokasi-status__detail{color:var(--color-warning-text)}.lokasi-status--ok .lokasi-status__title,.lokasi-status--ok .lokasi-status__detail{color:var(--color-ok-text)}.lokasi-status__detail{margin:4px 0 0;font-size:13px}.lokasi-status__retry{color:inherit;margin-top:10px;font-size:13px;font-weight:600;text-decoration:underline}.clock-buttons{gap:12px;display:flex}.clock-btn{border-radius:999px;flex:1;justify-content:center;align-items:center;gap:8px;padding:16px;font-size:16px;font-weight:700;transition:transform .1s,opacity .2s;display:flex}.clock-btn:active{transform:scale(.97)}.clock-btn:disabled{opacity:.4;cursor:not-allowed}.clock-btn--in{background:var(--color-success);color:#fff}.clock-btn--out{background:var(--color-danger);color:#fff}.clock-btn__icon{font-size:18px}.foto-step{flex-direction:column;gap:16px;width:100%;display:flex}.foto-step__actions{gap:12px;display:flex}.foto-step__actions .btn{flex:1}.camera-capture{flex-direction:column;gap:10px;margin-bottom:18px;display:flex}.camera-capture__label{color:var(--color-text-dim);margin:0;font-size:14px;font-weight:500}.camera-capture__start-btn{background:var(--color-panel);border:1px dashed var(--color-border);border-radius:var(--radius-md);color:var(--color-text-dim);justify-content:center;align-items:center;gap:8px;padding:24px;font-size:15px;display:flex}.camera-capture__icon{font-size:20px}.camera-capture__error{color:var(--color-danger);font-size:13px}.camera-capture__live{border-radius:var(--radius-md);background:#000;position:relative;overflow:hidden}.camera-capture__video{aspect-ratio:4/3;object-fit:cover;width:100%;display:block}.camera-capture__shutter{background:#ffffff40;border:3px solid #fff;border-radius:50%;justify-content:center;align-items:center;width:64px;height:64px;display:flex;position:absolute;bottom:16px;left:50%;transform:translate(-50%)}.camera-capture__shutter-inner{background:#fff;border-radius:50%;width:48px;height:48px}.camera-capture__shutter:disabled{opacity:.4}.camera-capture__preparing{color:#fff;background:#00000080;border-radius:999px;margin:0;padding:8px 14px;font-size:13px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.camera-capture__preview{border-radius:var(--radius-md);position:relative;overflow:hidden}.camera-capture__preview-img{aspect-ratio:4/3;object-fit:cover;width:100%;display:block}.camera-capture__retake-btn{color:#fff;border:1px solid var(--color-border);background:#0b2340d9;border-radius:999px;padding:8px 14px;font-size:13px;position:absolute;bottom:12px;right:12px}.pekerjaan-page,.riwayat-page{flex-direction:column;gap:4px;display:flex}.pekerjaan-page__header,.riwayat-page__header{align-items:center;gap:14px;margin-bottom:20px;display:flex}.pekerjaan-page__back,.riwayat-page__back{color:var(--color-text-dim);font-size:15px}.pekerjaan-page__title,.riwayat-page__title{font-family:var(--font-display);margin:0;font-size:20px}.pekerjaan-page__error{color:var(--color-danger);margin-bottom:12px;font-size:14px}.pekerjaan-page__success{background:var(--color-panel);border-radius:var(--radius-md);text-align:center;padding:24px}.pekerjaan-page__success-actions{flex-direction:column;gap:10px;margin-top:16px;display:flex}.pekerjaan-page__waiting{background:var(--color-panel);border-radius:var(--radius-md);border:1px solid var(--color-border);padding:24px}.pekerjaan-page__waiting-title{color:var(--color-success);margin:0 0 8px;font-weight:600}.pekerjaan-page__waiting-desc{color:var(--color-text-dim);margin:0;font-size:14px;line-height:1.6}.pekerjaan-page__waiting-actions{flex-direction:column;gap:10px;margin-top:20px;display:flex}.pekerjaan-page__desk-recap{color:var(--color-text-dim);background:var(--color-panel);border-radius:var(--radius-sm);margin:0 0 18px;padding:12px 16px;font-size:14px}.riwayat-page__loading,.riwayat-page__empty{color:var(--color-text-dim);text-align:center;padding:40px 0}.riwayat-page__error{color:var(--color-danger);font-size:14px}.riwayat-list{flex-direction:column;gap:12px;margin:0;padding:0;list-style:none;display:flex}.riwayat-card{background:var(--color-panel);border-radius:var(--radius-md);border:1px solid var(--color-border);padding:16px}.riwayat-card__top{justify-content:space-between;align-items:center;margin-bottom:8px;display:flex}.riwayat-card__lokasi{font-size:15px;font-weight:600}.riwayat-card__status{border-radius:999px;padding:4px 10px;font-size:12px;font-weight:600}.riwayat-card__status--pending{color:var(--color-accent);background:#ffc10726}.riwayat-card__status--approved{color:var(--color-success);background:#2ecc7126}.riwayat-card__status--rejected{color:var(--color-danger);background:#e74c3c26}.riwayat-card__waktu{color:var(--color-text-dim);flex-direction:column;gap:2px;font-size:13px;display:flex}.riwayat-card__durasi{color:var(--color-text-dim);margin:8px 0 0;font-size:13px}.riwayat-card__catatan{color:var(--color-text-dim);margin:6px 0 0;font-size:13px;font-style:italic}.bottom-nav{background:var(--color-panel);border-top:1px solid var(--color-border);width:100%;max-width:480px;padding:10px 0 max(10px, env(safe-area-inset-bottom));display:flex;position:fixed;bottom:0;left:50%;transform:translate(-50%)}.bottom-nav__item{color:var(--color-text-dim);flex-direction:column;flex:1;align-items:center;gap:4px;padding:6px 0;font-size:12px;text-decoration:none;display:flex}.bottom-nav__item--active{color:var(--color-accent)}.bottom-nav__icon{font-size:20px}.protected-route__loading{color:var(--color-text-dim);flex:1;justify-content:center;align-items:center;display:flex}