:root{--color-bg:#0b2340;--color-panel:#0f3560;--color-panel-alt:#143c6e;--color-accent:#ffc107;--color-accent-dark:#c90;--color-text:#f5f7fa;--color-text-dim:#8a9bb0;--color-success:#2ecc71;--color-danger:#e74c3c;--color-border:#f5f7fa1f;--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: ;--lightningcss-dark:initial;color-scheme:dark}*{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;padding:24px 20px 100px;overflow-y:auto}.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-panel);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text);padding:16px;font-size:16px}.field__input--textarea{resize:vertical;min-height:88px;font-family:var(--font-body)}.btn{border-radius:var(--radius-md);padding:16px 20px;font-size:16px;font-weight:600;transition:transform .1s,opacity .2s}.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)}.btn--full{width:100%}.btn--primary{background:var(--color-accent);color:#1a1200}.btn--secondary{background:var(--color-panel);color:var(--color-text);border:1px solid var(--color-border);margin-top:12px}.btn--ghost{color:var(--color-text-dim);border:1px solid var(--color-border);background:0 0}.login-page{flex-direction:column;flex:1;justify-content:center;gap:40px;display:flex}.login-page__brand{text-align:center}.login-page__logo{border-radius:var(--radius-md);background:var(--color-accent);color:#1a1200;width:72px;height:72px;font-family:var(--font-display);justify-content:center;align-items:center;margin-bottom:20px;font-size:18px;font-weight:700;display:inline-flex}.login-page__title{font-family:var(--font-display);margin:0 0 4px;font-size:28px}.login-page__subtitle{color:var(--color-text-dim);margin:0;font-size:15px}.login-page__form{flex-direction:column;display:flex}.login-page__error{color:var(--color-danger);margin:-4px 0 16px;font-size:14px}.beranda-page{flex-direction:column;gap:24px;display:flex}.beranda-page__header{justify-content:space-between;align-items:flex-start;display:flex}.beranda-page__greeting{margin:0;font-size:18px;font-weight:600}.beranda-page__jabatan{color:var(--color-text-dim);margin:2px 0 0;font-size:14px}.beranda-page__logout{color:var(--color-text-dim);border-radius:var(--radius-sm);border:1px solid var(--color-border);padding:8px 12px;font-size:14px}.beranda-page__clock{text-align:center;padding:20px 0}.beranda-page__clock-time{font-family:var(--font-mono);letter-spacing:1px;margin:0;font-size:48px;font-weight:700}.beranda-page__clock-date{color:var(--color-text-dim);text-transform:capitalize;margin:4px 0 0;font-size:14px}.beranda-page__main{flex-direction:column;align-items:center;gap:20px;display:flex}.beranda-page__loading{text-align:center;color:var(--color-text-dim)}.beranda-page__sejak{color:var(--color-text-dim);margin:-8px 0 0;font-size:14px}.beranda-page__error{color:var(--color-danger);text-align:center;font-size:14px}.status-badge{border-radius:999px;padding:8px 18px;font-size:14px;font-weight:600}.status-badge--idle{background:var(--color-panel);color:var(--color-text-dim)}.status-badge--active{color:var(--color-success);background:#2ecc7126}.clock-button{width:220px;height:220px;font-family:var(--font-display);border-radius:50%;justify-content:center;align-items:center;font-size:24px;font-weight:700;transition:transform .15s;display:flex;box-shadow:0 0 0 8px #ffffff08}.clock-button:active{transform:scale(.96)}.clock-button--start{background:var(--color-accent);color:#1a1200}.clock-button--stop{background:var(--color-danger);color:#fff}.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}.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}