@import"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap";.app-container{min-height:100vh;background:linear-gradient(135deg,#1a1a2e,#16213e)}.login-wrapper[data-v-75db1119]{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;position:relative;overflow:hidden;background:linear-gradient(135deg,#0f0c29,#302b63,#24243e)}.bg-shapes[data-v-75db1119]{position:absolute;inset:0;overflow:hidden;z-index:0}.shape[data-v-75db1119]{position:absolute;border-radius:50%;filter:blur(60px);opacity:.5;animation:float-75db1119 20s ease-in-out infinite}.shape-1[data-v-75db1119]{width:400px;height:400px;background:linear-gradient(135deg,#667eea,#764ba2);top:-100px;left:-100px;animation-delay:0s}.shape-2[data-v-75db1119]{width:300px;height:300px;background:linear-gradient(135deg,#f093fb,#f5576c);top:50%;right:-100px;animation-delay:-5s}.shape-3[data-v-75db1119]{width:250px;height:250px;background:linear-gradient(135deg,#4facfe,#00f2fe);bottom:-50px;left:20%;animation-delay:-10s}.shape-4[data-v-75db1119]{width:200px;height:200px;background:linear-gradient(135deg,#43e97b,#38f9d7);top:30%;left:50%;animation-delay:-15s}@keyframes float-75db1119{0%,to{transform:translate(0) scale(1)}25%{transform:translate(30px,-30px) scale(1.1)}50%{transform:translate(-20px,20px) scale(.9)}75%{transform:translate(20px,30px) scale(1.05)}}.login-container[data-v-75db1119]{position:relative;z-index:1;width:100%;max-width:420px}.brand-section[data-v-75db1119]{text-align:center;margin-bottom:32px}.logo-container[data-v-75db1119]{display:inline-flex;align-items:center;justify-content:center;width:80px;height:80px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:24px;margin-bottom:16px;box-shadow:0 10px 40px #667eea66;animation:pulse-75db1119 3s ease-in-out infinite}@keyframes pulse-75db1119{0%,to{transform:scale(1);box-shadow:0 10px 40px #667eea66}50%{transform:scale(1.05);box-shadow:0 15px 50px #667eea99}}.logo-container.has-image[data-v-75db1119]{background:#fff;padding:8px}.logo-image[data-v-75db1119]{width:100%;height:100%;object-fit:contain;border-radius:16px}.logo-icon[data-v-75db1119]{width:44px;height:44px;color:#fff}.brand-title[data-v-75db1119]{font-size:32px;font-weight:700;color:#fff;margin:0 0 8px;letter-spacing:-.5px}.brand-subtitle[data-v-75db1119]{font-size:14px;color:#fff9;margin:0;letter-spacing:1px;text-transform:uppercase}.login-card[data-v-75db1119]{background:#ffffff14;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.1);border-radius:24px;padding:40px;box-shadow:0 25px 50px -12px #00000080,inset 0 1px #ffffff1a}.card-header[data-v-75db1119]{margin-bottom:32px}.card-header h2[data-v-75db1119]{font-size:24px;font-weight:600;color:#fff;margin:0 0 8px}.card-header p[data-v-75db1119]{font-size:14px;color:#fff9;margin:0}.login-form[data-v-75db1119]{display:flex;flex-direction:column;gap:20px}.input-group[data-v-75db1119]{position:relative;display:flex;align-items:center}.input-icon[data-v-75db1119]{position:absolute;left:16px;width:20px;height:20px;color:#fff6;pointer-events:none;transition:color .3s}.input-field[data-v-75db1119]{width:100%;background:#ffffff0f;border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:16px 48px;color:#fff;font-size:16px;transition:all .3s ease}.input-field[data-v-75db1119]::placeholder{color:#ffffff59}.input-field[data-v-75db1119]:focus{outline:none;border-color:#667eea99;background:#ffffff1a;box-shadow:0 0 0 4px #667eea26}.input-field:focus+.input-icon[data-v-75db1119],.input-group:focus-within .input-icon[data-v-75db1119]{color:#667eea}.toggle-password[data-v-75db1119]{position:absolute;right:16px;width:24px;height:24px;background:none;border:none;color:#fff6;cursor:pointer;padding:0;transition:color .3s}.toggle-password[data-v-75db1119]:hover{color:#fff}.error-alert[data-v-75db1119]{display:flex;align-items:center;gap:12px;background:#ef444426;border:1px solid rgba(239,68,68,.3);border-radius:12px;padding:14px 16px;color:#fca5a5;font-size:14px}.error-alert svg[data-v-75db1119]{width:20px;height:20px;flex-shrink:0}.shake-enter-active[data-v-75db1119]{animation:shake-75db1119 .5s ease}@keyframes shake-75db1119{0%,to{transform:translate(0)}20%,60%{transform:translate(-8px)}40%,80%{transform:translate(8px)}}.btn-submit[data-v-75db1119]{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:18px 24px;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:12px;color:#fff;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease;overflow:hidden}.btn-submit[data-v-75db1119]:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#764ba2,#667eea);opacity:0;transition:opacity .3s}.btn-submit[data-v-75db1119]:hover:before{opacity:1}.btn-submit[data-v-75db1119]:hover{transform:translateY(-2px);box-shadow:0 10px 30px #667eea66}.btn-submit[data-v-75db1119]:active{transform:translateY(0)}.btn-submit[data-v-75db1119]:disabled{cursor:not-allowed;opacity:.7}.btn-submit[data-v-75db1119]:disabled:hover{transform:none;box-shadow:none}.btn-text[data-v-75db1119]{position:relative;z-index:1;display:flex;align-items:center;gap:8px}.btn-text svg[data-v-75db1119]{width:20px;height:20px}.btn-loader[data-v-75db1119]{width:24px;height:24px;border:3px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin-75db1119 .8s linear infinite}@keyframes spin-75db1119{to{transform:rotate(360deg)}}.card-footer[data-v-75db1119]{margin-top:24px;text-align:center}.card-footer p[data-v-75db1119]{font-size:12px;color:#ffffff59;margin:0}@media(max-width:480px){.login-card[data-v-75db1119]{padding:32px 24px}.brand-title[data-v-75db1119]{font-size:28px}.logo-container[data-v-75db1119]{width:64px;height:64px;border-radius:20px}.logo-icon[data-v-75db1119]{width:36px;height:36px}}.home-wrapper[data-v-d5d96e3f]{min-height:100vh;position:relative;overflow:hidden}.bg-gradient[data-v-d5d96e3f]{position:fixed;inset:0;background:linear-gradient(135deg,#0f0c29,#302b63,#24243e);z-index:-1}.home-container[data-v-d5d96e3f]{position:relative;z-index:1;padding:0 20px 40px;max-width:480px;margin:0 auto}.header[data-v-d5d96e3f]{display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;background:#0f0c29cc;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);margin:0 -20px;padding:16px 20px;z-index:100}.header-left[data-v-d5d96e3f]{display:flex;align-items:center;gap:12px}.logo-mini[data-v-d5d96e3f]{width:32px;height:32px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff}.logo-mini-img[data-v-d5d96e3f]{width:32px;height:32px;border-radius:8px;overflow:hidden;background:#fff;display:flex;align-items:center;justify-content:center}.logo-mini-img img[data-v-d5d96e3f]{width:100%;height:100%;object-fit:contain}.logo-mini svg[data-v-d5d96e3f]{width:20px;height:20px}.app-name[data-v-d5d96e3f]{font-size:18px;font-weight:600;color:#fff}.btn-logout[data-v-d5d96e3f]{width:40px;height:40px;background:#ffffff1a;border:none;border-radius:12px;color:#ffffffb3;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s}.btn-logout[data-v-d5d96e3f]:hover{background:#ef444433;color:#fca5a5}.btn-logout svg[data-v-d5d96e3f]{width:20px;height:20px}.loading-container[data-v-d5d96e3f]{display:flex;flex-direction:column;align-items:center;justify-content:center;height:300px;gap:16px}.loader[data-v-d5d96e3f]{width:40px;height:40px;border:3px solid rgba(255,255,255,.1);border-top-color:#667eea;border-radius:50%;animation:spin-d5d96e3f 1s linear infinite}.loading-container p[data-v-d5d96e3f]{color:#fff9;font-size:14px}@keyframes spin-d5d96e3f{to{transform:rotate(360deg)}}.welcome-section[data-v-d5d96e3f]{padding:24px 0}.user-greeting[data-v-d5d96e3f]{display:flex;align-items:center;gap:16px;margin-bottom:24px}.avatar[data-v-d5d96e3f]{width:56px;height:56px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;color:#fff;box-shadow:0 8px 24px #667eea4d}.greeting-label[data-v-d5d96e3f]{font-size:14px;color:#ffffff80}.user-name[data-v-d5d96e3f]{font-size:24px;font-weight:600;color:#fff;margin:4px 0 0}.time-display[data-v-d5d96e3f]{background:#ffffff0d;border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:20px;text-align:center}.current-time[data-v-d5d96e3f]{font-size:48px;font-weight:700;color:#fff;letter-spacing:-2px;line-height:1}.current-date[data-v-d5d96e3f]{font-size:14px;color:#ffffff80;margin-top:8px}.status-section[data-v-d5d96e3f]{margin-bottom:32px}.status-card[data-v-d5d96e3f]{display:flex;align-items:center;gap:16px;background:#ef44441a;border:1px solid rgba(239,68,68,.2);border-radius:20px;padding:20px;transition:all .3s}.status-card.checked-in[data-v-d5d96e3f]{background:#4ade801a;border-color:#4ade8033}.indicator-ring[data-v-d5d96e3f]{width:48px;height:48px;border-radius:50%;background:#ef444433;display:flex;align-items:center;justify-content:center;color:#fca5a5}.indicator-ring.active[data-v-d5d96e3f]{background:#4ade8033;color:#4ade80}.indicator-ring svg[data-v-d5d96e3f]{width:24px;height:24px}.status-title[data-v-d5d96e3f]{font-size:16px;font-weight:600;color:#fff;margin:0 0 4px}.status-detail[data-v-d5d96e3f]{font-size:14px;color:#fff9;margin:0;display:flex;align-items:center;gap:8px}.status-badge[data-v-d5d96e3f]{display:inline-block;padding:2px 8px;border-radius:6px;font-size:12px;font-weight:600;text-transform:uppercase}.status-badge.hadir[data-v-d5d96e3f]{background:#4ade8033;color:#4ade80}.status-badge.telat[data-v-d5d96e3f]{background:#fbbf2433;color:#fbbf24}.check-time[data-v-d5d96e3f]{color:#ffffff80}.actions-section[data-v-d5d96e3f]{margin-bottom:24px}.section-title[data-v-d5d96e3f]{font-size:14px;font-weight:600;color:#ffffff80;text-transform:uppercase;letter-spacing:1px;margin:0 0 16px}.actions-grid[data-v-d5d96e3f]{display:flex;flex-direction:column;gap:12px}.action-card[data-v-d5d96e3f]{display:flex;align-items:center;gap:16px;background:#ffffff0d;border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:16px;cursor:pointer;transition:all .3s;text-align:left}.action-card[data-v-d5d96e3f]:hover:not(:disabled){background:#ffffff1a;transform:translate(4px)}.action-card[data-v-d5d96e3f]:disabled{opacity:.5;cursor:not-allowed}.action-card.action-primary[data-v-d5d96e3f]{background:linear-gradient(135deg,#667eea33,#764ba233);border-color:#667eea4d}.action-icon-container[data-v-d5d96e3f]{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.action-icon-container.primary[data-v-d5d96e3f]{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.action-icon-container.secondary[data-v-d5d96e3f]{background:#fbbf2433;color:#fbbf24}.action-icon-container.tertiary[data-v-d5d96e3f]{background:#22d3ee33;color:#22d3ee}.action-icon-container svg[data-v-d5d96e3f]{width:24px;height:24px}.action-content[data-v-d5d96e3f]{flex:1;display:flex;flex-direction:column;gap:2px}.action-title[data-v-d5d96e3f]{font-size:16px;font-weight:600;color:#fff}.action-subtitle[data-v-d5d96e3f]{font-size:13px;color:#ffffff80}.action-arrow[data-v-d5d96e3f]{width:20px;height:20px;color:#ffffff4d;flex-shrink:0}.attendance-container[data-v-f8750015]{min-height:100vh;padding:120px 20px 20px;display:flex;flex-direction:column}.full-height[data-v-f8750015]{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center}.camera-container[data-v-f8750015]{position:relative;width:100%;max-width:480px;aspect-ratio:4/3;background:#000;border-radius:16px;overflow:hidden;margin-bottom:20px}.camera-preview[data-v-f8750015]{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}.face-guide[data-v-f8750015]{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:60%;height:80%;border:2px solid rgba(74,222,128,.5);border-radius:50% 50% 40% 40%;box-shadow:0 0 0 9999px #00000080}.liveness-overlay[data-v-f8750015]{text-align:center;z-index:10}.status-message[data-v-f8750015]{color:#fbbf24;font-weight:500;margin-top:8px}.attendance-header[data-v-f8750015]{position:fixed;top:0;left:0;right:0;display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:16px 20px;background:#1a1a2ef2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:100;border-bottom:1px solid rgba(255,255,255,.1)}.nav-row[data-v-f8750015]{width:100%;display:flex;align-items:center}.btn-back[data-v-f8750015]{background:transparent;border:none;color:#fff9;font-size:14px;cursor:pointer;padding:0;display:flex;align-items:center;gap:6px}.btn-back[data-v-f8750015]:hover{color:#fff}.btn-back .icon[data-v-f8750015]{font-size:18px;font-style:normal}.attendance-header h1[data-v-f8750015]{color:#fff;font-size:24px;margin:0;font-weight:700}.progress-steps[data-v-f8750015]{display:flex;justify-content:center;gap:20px;margin-bottom:40px}.progress-step[data-v-f8750015]{width:36px;height:36px;border-radius:50%;background:#ffffff1a;display:flex;align-items:center;justify-content:center;position:relative}.progress-step.active[data-v-f8750015]{background:linear-gradient(135deg,#4ade80,#22c55e)}.progress-step.complete[data-v-f8750015]{background:#4ade804d}.step-number[data-v-f8750015]{color:#fff;font-weight:700}.success-card[data-v-f8750015],.error-card[data-v-f8750015],.warning-card[data-v-f8750015]{text-align:center;padding:40px 20px}.success-animation[data-v-f8750015]{margin-bottom:24px}.success-circle[data-v-f8750015]{width:100px;height:100px;margin:0 auto}.checkmark[data-v-f8750015]{width:100px;height:100px;border-radius:50%;display:block;stroke-width:2;stroke:#4ade80;stroke-miterlimit:10;animation:fill-f8750015 .4s ease-in-out .4s forwards,scale-f8750015 .3s ease-in-out .9s both}.checkmark-circle[data-v-f8750015]{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#4ade80;fill:#4ade801a;animation:stroke-f8750015 .6s cubic-bezier(.65,0,.45,1) forwards}.checkmark-check[data-v-f8750015]{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;stroke-width:3;animation:stroke-f8750015 .3s cubic-bezier(.65,0,.45,1) .8s forwards}@keyframes stroke-f8750015{to{stroke-dashoffset:0}}@keyframes scale-f8750015{0%,to{transform:none}50%{transform:scale3d(1.1,1.1,1)}}@keyframes fill-f8750015{to{box-shadow:inset 0 0 0 50px #4ade801a}}.success-title[data-v-f8750015]{color:#fff;font-size:24px;font-weight:700;margin-bottom:24px}.success-details[data-v-f8750015]{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:20px;margin-bottom:24px}.detail-row[data-v-f8750015]{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.08)}.detail-row[data-v-f8750015]:last-child{border-bottom:none}.detail-label[data-v-f8750015]{color:#fff9;font-size:14px}.detail-value[data-v-f8750015]{color:#fff;font-weight:500;font-size:14px}.time-value[data-v-f8750015]{font-size:20px;font-weight:700;color:#4ade80}.error-card[data-v-f8750015],.warning-card[data-v-f8750015]{padding:60px 20px}.success-icon[data-v-f8750015],.error-icon[data-v-f8750015],.warning-icon[data-v-f8750015]{width:80px;height:80px;border-radius:50%;margin:0 auto 24px;display:flex;align-items:center;justify-content:center;font-size:40px;color:#fff}.success-icon[data-v-f8750015]{background:linear-gradient(135deg,#4ade80,#22c55e)}.error-icon[data-v-f8750015]{background:linear-gradient(135deg,#ef4444,#dc2626)}.warning-icon[data-v-f8750015]{background:linear-gradient(135deg,#fbbf24,#f59e0b)}.success-card h2[data-v-f8750015],.error-card h2[data-v-f8750015],.warning-card h2[data-v-f8750015]{color:#fff;margin-bottom:16px}.success-card p[data-v-f8750015],.error-card p[data-v-f8750015],.warning-card p[data-v-f8750015]{color:#ffffffb3;margin-bottom:32px}.status-badge[data-v-f8750015]{display:inline-block;padding:8px 24px;border-radius:20px;font-weight:600;margin-bottom:32px}.status-badge.hadir[data-v-f8750015]{background:#4ade8033;color:#4ade80}.status-badge.telat[data-v-f8750015]{background:#fbbf2433;color:#fbbf24}.status-badge.pulang[data-v-f8750015]{background:#60a5fa33;color:#60a5fa}.btn-primary[data-v-f8750015]{background:linear-gradient(135deg,#4ade80,#22c55e);border:none;border-radius:8px;padding:16px 32px;color:#000;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s}.btn-primary.btn-large[data-v-f8750015]{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:18px 32px;font-size:17px;border-radius:12px}.btn-icon[data-v-f8750015]{width:22px;height:22px}.status-icon[data-v-f8750015]{margin-right:4px}.step-content[data-v-f8750015]{text-align:center;padding:40px 20px}.gps-status-box[data-v-f8750015]{display:flex;flex-direction:column;align-items:center;gap:12px;padding:20px;margin-bottom:16px}.gps-spinner[data-v-f8750015]{width:40px;height:40px;border:3px solid rgba(255,255,255,.2);border-top-color:#4ade80;border-radius:50%;animation:spin-f8750015 1s linear infinite}@keyframes spin-f8750015{to{transform:rotate(360deg)}}.gps-status-text[data-v-f8750015]{color:#fffc;font-size:14px;margin:0;text-align:center}.location-info p[data-v-f8750015]{color:#ffffffb3;margin:5px 0}.mt-4[data-v-f8750015]{margin-top:24px}.mt-2[data-v-f8750015]{margin-top:12px}.timer[data-v-f8750015]{font-size:48px;color:#4ade80;font-weight:700;margin:24px 0}.distance-status[data-v-f8750015]{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;border-radius:10px;margin-top:16px}.distance-status.valid[data-v-f8750015]{background:#4ade8026;border:1px solid rgba(74,222,128,.3)}.distance-status.invalid[data-v-f8750015]{background:#ef444426;border:1px solid rgba(239,68,68,.3)}.distance-icon[data-v-f8750015]{font-size:18px;font-weight:700}.distance-status.valid .distance-icon[data-v-f8750015]{color:#4ade80}.distance-status.invalid .distance-icon[data-v-f8750015]{color:#ef4444}.distance-text[data-v-f8750015]{font-size:14px;color:#ffffffe6}.location-error[data-v-f8750015]{color:#ef4444!important;font-size:13px;margin-top:12px}.btn-secondary[data-v-f8750015]{background:transparent;border:1px solid rgba(255,255,255,.3);border-radius:8px;padding:12px 24px;color:#fffc;font-size:14px;font-weight:500;cursor:pointer;transition:all .3s}.btn-secondary[data-v-f8750015]:hover{background:#ffffff1a;border-color:#ffffff80}.challenge-card[data-v-f8750015]{background:#ffffff1a;border-radius:16px;padding:24px;margin-top:24px}.challenge-label[data-v-f8750015]{font-size:20px;color:#fff;font-weight:600;margin-bottom:8px}.challenge-count[data-v-f8750015]{color:#ffffff80;margin-bottom:24px}.text-success[data-v-f8750015]{color:#4ade80!important}.info-banner[data-v-f8750015]{background:#3b82f633;border:1px solid rgba(59,130,246,.3);color:#93c5fd;padding:12px;border-radius:12px;margin-top:12px;font-size:14px;display:flex;align-items:center;gap:8px}.overtime-banner[data-v-f8750015]{background:#8b5cf633;border-color:#8b5cf64d;color:#c4b5fd}.shift-info-card[data-v-f8750015]{background:#ffffff14;border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:16px;margin-bottom:20px;text-align:left}.shift-header[data-v-f8750015]{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.office-name[data-v-f8750015]{font-weight:600;color:#fff;font-size:14px}.day-name[data-v-f8750015]{color:#fff9;font-size:12px}.matched-office-badge[data-v-f8750015]{background:#22c55e26;border:1px solid rgba(34,197,94,.3);border-radius:8px;padding:8px 12px;color:#22c55e;font-size:13px;text-align:center;margin-bottom:10px}.holiday-banner[data-v-f8750015]{background:#fbbf2426;border:1px solid rgba(251,191,36,.3);border-radius:8px;padding:10px 14px;color:#fbbf24;font-size:14px;text-align:center}.shift-times[data-v-f8750015]{display:flex;gap:12px}.time-block[data-v-f8750015]{flex:1;background:#ffffff0d;border-radius:8px;padding:10px 12px;text-align:center}.time-label[data-v-f8750015]{display:block;font-size:11px;color:#ffffff80;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}.time-value[data-v-f8750015]{display:block;font-size:14px;color:#4ade80;font-weight:600}.btn-primary[data-v-f8750015]:disabled{background:#64646480;color:#fff6;cursor:not-allowed}.history-container[data-v-4dd24459]{min-height:100vh;padding:120px 20px 20px}.history-header[data-v-4dd24459]{position:fixed;top:0;left:0;right:0;display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:16px 20px;background:#1a1a2ef2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:100;border-bottom:1px solid rgba(255,255,255,.1)}.nav-row[data-v-4dd24459]{width:100%;display:flex;align-items:center}.btn-back[data-v-4dd24459]{background:transparent;border:none;color:#fff9;font-size:14px;cursor:pointer;padding:0;display:flex;align-items:center;gap:6px}.btn-back[data-v-4dd24459]:hover{color:#fff}.btn-back .icon[data-v-4dd24459]{font-size:18px;font-style:normal}.history-header h1[data-v-4dd24459]{color:#fff;font-size:24px;margin:0;font-weight:700}.loading[data-v-4dd24459],.empty-state[data-v-4dd24459]{text-align:center;padding:40px;color:#ffffffb3}.history-list[data-v-4dd24459]{display:flex;flex-direction:column;gap:12px}.history-item[data-v-4dd24459]{display:flex;justify-content:space-between;align-items:center;background:#ffffff1a;border-radius:12px;padding:16px}.history-date[data-v-4dd24459]{display:flex;flex-direction:column}.history-date .day[data-v-4dd24459]{color:#fff;font-weight:500}.history-date .time[data-v-4dd24459]{color:#fff9;font-size:14px}.history-status[data-v-4dd24459]{padding:6px 16px;border-radius:20px;font-size:12px;font-weight:600;text-transform:uppercase}.history-status.hadir[data-v-4dd24459]{background:#4ade8033;color:#4ade80}.history-status.telat[data-v-4dd24459]{background:#fbbf2433;color:#fbbf24}.history-status.ditolak[data-v-4dd24459]{background:#ef444433;color:#ef4444}.face-enroll-wrapper[data-v-2a172366]{min-height:100vh;position:relative}.bg-gradient[data-v-2a172366]{position:fixed;inset:0;background:linear-gradient(135deg,#0f0c29,#302b63,#24243e);z-index:-1}.container[data-v-2a172366]{max-width:480px;margin:0 auto;padding:0 20px 40px}.header[data-v-2a172366]{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:16px 20px;position:sticky;top:0;background:#0f0c29f2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);margin:0 -20px;z-index:50;border-bottom:1px solid rgba(255,255,255,.1)}.nav-row[data-v-2a172366]{width:100%;display:flex;align-items:center}.btn-back[data-v-2a172366]{background:transparent;border:none;padding:0;color:#fff9;display:flex;align-items:center;gap:8px;cursor:pointer;width:auto;height:auto}.btn-back[data-v-2a172366]:hover{color:#fff}.btn-back svg[data-v-2a172366]{width:20px;height:20px}.back-text[data-v-2a172366]{font-size:14px;font-weight:500}.header h1[data-v-2a172366]{font-size:24px;font-weight:700;color:#fff;margin:0}.loading-state[data-v-2a172366]{display:flex;flex-direction:column;align-items:center;justify-content:center;height:300px;gap:16px}.loader[data-v-2a172366]{width:40px;height:40px;border:3px solid rgba(255,255,255,.1);border-top-color:#667eea;border-radius:50%;animation:spin-2a172366 1s linear infinite}.loader.large[data-v-2a172366]{width:60px;height:60px;border-width:4px}@keyframes spin-2a172366{to{transform:rotate(360deg)}}.loading-state p[data-v-2a172366]{color:#fff9}.content-section[data-v-2a172366]{padding-top:24px}.status-card[data-v-2a172366]{display:flex;align-items:center;gap:16px;background:#ef44441a;border:1px solid rgba(239,68,68,.2);border-radius:20px;padding:24px;margin-bottom:24px}.status-card.enrolled[data-v-2a172366]{background:#4ade801a;border-color:#4ade8033}.status-icon[data-v-2a172366]{width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.status-card:not(.enrolled) .status-icon[data-v-2a172366]{background:#ef444433;color:#fca5a5}.status-card.enrolled .status-icon[data-v-2a172366]{background:#4ade8033;color:#4ade80}.status-icon svg[data-v-2a172366]{width:28px;height:28px}.status-info h3[data-v-2a172366]{font-size:18px;font-weight:600;color:#fff;margin:0 0 4px}.status-info p[data-v-2a172366]{font-size:14px;color:#fff9;margin:0}.action-buttons[data-v-2a172366]{display:flex;flex-direction:column;gap:12px}.admin-notice[data-v-2a172366]{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:16px;display:flex;align-items:center;gap:12px}.notice-icon[data-v-2a172366]{color:#fff9;flex-shrink:0}.notice-icon svg[data-v-2a172366]{width:24px;height:24px}.admin-notice p[data-v-2a172366]{font-size:14px;color:#ffffffb3;margin:0;line-height:1.4}.btn-primary[data-v-2a172366],.btn-secondary[data-v-2a172366],.btn-danger[data-v-2a172366]{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:16px 24px;border:none;border-radius:14px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s}.btn-primary[data-v-2a172366]{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.btn-primary[data-v-2a172366]:hover{transform:translateY(-2px);box-shadow:0 10px 30px #667eea66}.btn-secondary[data-v-2a172366]{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#fff}.btn-danger[data-v-2a172366]{background:#ef444433;border:1px solid rgba(239,68,68,.3);color:#fca5a5}.btn-primary svg[data-v-2a172366],.btn-secondary svg[data-v-2a172366],.btn-danger svg[data-v-2a172366]{width:20px;height:20px}.camera-section[data-v-2a172366]{padding-top:16px}.camera-container[data-v-2a172366]{position:relative;width:100%;aspect-ratio:4/3;border-radius:20px;overflow:hidden;background:#000}.camera-video[data-v-2a172366]{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}.camera-overlay[data-v-2a172366]{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.camera-status[data-v-2a172366]{display:flex;align-items:center;justify-content:center;gap:8px;margin:16px 0;padding:12px 20px;background:#ef44441a;border:1px solid rgba(239,68,68,.2);border-radius:12px;transition:all .3s}.camera-status.valid[data-v-2a172366]{background:#4ade801a;border-color:#4ade8033}.status-dot[data-v-2a172366]{width:10px;height:10px;border-radius:50%;background:#ef4444;animation:pulse-2a172366 1.5s ease infinite}.camera-status.valid .status-dot[data-v-2a172366]{background:#4ade80}@keyframes pulse-2a172366{0%,to{opacity:1}50%{opacity:.5}}.camera-status span[data-v-2a172366]{color:#fff;font-size:14px;font-weight:500}.camera-actions[data-v-2a172366]{display:flex;gap:12px;margin-bottom:16px}.btn-cancel[data-v-2a172366]{flex:1;padding:14px;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:12px;color:#fff;font-size:16px;font-weight:500;cursor:pointer}.btn-capture[data-v-2a172366]{flex:2;display:flex;align-items:center;justify-content:center;gap:8px;padding:14px;background:linear-gradient(135deg,#4ade80,#22c55e);border:none;border-radius:12px;color:#000;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s}.btn-capture[data-v-2a172366]:disabled{opacity:.5;cursor:not-allowed}.btn-capture svg[data-v-2a172366]{width:24px;height:24px}.camera-hint[data-v-2a172366]{text-align:center;color:#ffffff80;font-size:13px}.result-section[data-v-2a172366]{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:400px;text-align:center;padding:40px 20px}.result-icon[data-v-2a172366]{width:80px;height:80px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:24px}.result-icon.success[data-v-2a172366]{background:linear-gradient(135deg,#4ade80,#22c55e);color:#fff}.result-icon.error[data-v-2a172366]{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff}.result-icon svg[data-v-2a172366]{width:40px;height:40px}.result-section h2[data-v-2a172366]{font-size:24px;font-weight:600;color:#fff;margin:0 0 8px}.result-section p[data-v-2a172366]{font-size:14px;color:#fff9;margin:0 0 32px}.result-section .btn-primary[data-v-2a172366]{width:auto;min-width:200px}.report-container[data-v-083ae96d]{min-height:100vh;background:linear-gradient(135deg,#0f0c29,#302b63,#24243e);padding:20px 20px 40px}.report-header[data-v-083ae96d]{margin-bottom:24px}.nav-row[data-v-083ae96d]{margin-bottom:16px}.btn-back[data-v-083ae96d]{background:#ffffff1a;border:none;color:#fff;padding:8px 16px;border-radius:8px;cursor:pointer;display:flex;align-items:center;gap:6px;font-size:14px}.report-header h1[data-v-083ae96d]{color:#fff;font-size:24px;font-weight:700;margin:0}.filter-section[data-v-083ae96d]{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:24px;background:#ffffff0d;padding:12px 16px;border-radius:12px}.nav-btn[data-v-083ae96d]{background:#ffffff1a;border:none;color:#fff;width:40px;height:40px;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center}.nav-btn[data-v-083ae96d]:disabled{opacity:.3;cursor:not-allowed}.nav-btn svg[data-v-083ae96d]{width:24px;height:24px}.filter-selects[data-v-083ae96d]{display:flex;gap:8px;flex:1;justify-content:center}.filter-select[data-v-083ae96d]{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#fff;padding:10px 14px;border-radius:8px;font-size:15px;cursor:pointer}.filter-select option[data-v-083ae96d]{background:#24243e;color:#fff}.loading[data-v-083ae96d]{display:flex;flex-direction:column;align-items:center;justify-content:center;height:200px;color:#ffffffb3}.loader[data-v-083ae96d]{width:40px;height:40px;border:3px solid rgba(255,255,255,.1);border-top-color:#667eea;border-radius:50%;animation:spin-083ae96d 1s linear infinite;margin-bottom:12px}@keyframes spin-083ae96d{to{transform:rotate(360deg)}}.summary-grid[data-v-083ae96d]{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:24px}.summary-card[data-v-083ae96d]{background:#ffffff0d;border-radius:12px;padding:16px 10px;text-align:center;border:1px solid rgba(255,255,255,.1)}.summary-card.hadir[data-v-083ae96d]{border-color:#4ade8080}.summary-card.telat[data-v-083ae96d]{border-color:#fbbf2480}.summary-card.alpha[data-v-083ae96d]{border-color:#ef444480}.summary-card.libur[data-v-083ae96d]{border-color:#9ca3af80}.summary-value[data-v-083ae96d]{display:block;font-size:28px;font-weight:700;color:#fff}.summary-card.hadir .summary-value[data-v-083ae96d]{color:#4ade80}.summary-card.telat .summary-value[data-v-083ae96d]{color:#fbbf24}.summary-card.alpha .summary-value[data-v-083ae96d]{color:#ef4444}.summary-card.libur .summary-value[data-v-083ae96d]{color:#9ca3af}.summary-label[data-v-083ae96d]{font-size:12px;color:#fff9;margin-top:4px}.calendar-list[data-v-083ae96d]{display:flex;flex-direction:column;gap:8px}.day-row[data-v-083ae96d]{display:flex;align-items:center;background:#ffffff0d;padding:14px 16px;border-radius:12px;gap:16px;border-left:4px solid transparent}.day-row.hadir[data-v-083ae96d]{border-left-color:#4ade80}.day-row.telat[data-v-083ae96d]{border-left-color:#fbbf24}.day-row.alpha[data-v-083ae96d]{border-left-color:#ef4444}.day-row.off[data-v-083ae96d]{background:#ffffff05}.day-row.future[data-v-083ae96d]{opacity:.4}.day-info[data-v-083ae96d]{min-width:50px;text-align:center}.day-number[data-v-083ae96d]{display:block;font-size:20px;font-weight:700;color:#fff}.day-name[data-v-083ae96d]{font-size:12px;color:#ffffff80}.day-times[data-v-083ae96d]{display:flex;gap:20px;flex:1}.time-block[data-v-083ae96d]{display:flex;flex-direction:column}.time-label[data-v-083ae96d]{font-size:11px;color:#fff6;margin-bottom:2px}.time-value[data-v-083ae96d]{font-size:16px;font-weight:600;color:#fff}.time-value.empty[data-v-083ae96d]{color:#ffffff4d}.day-status[data-v-083ae96d]{flex:1}.status-text[data-v-083ae96d]{font-size:13px;color:#ffffff80}.status-text.off[data-v-083ae96d]{color:#9ca3af}.status-badge-container[data-v-083ae96d]{min-width:70px;text-align:right}.status-badge[data-v-083ae96d]{display:inline-block;padding:4px 10px;border-radius:20px;font-size:11px;font-weight:600}.status-badge.hadir[data-v-083ae96d]{background:#4ade8033;color:#4ade80}.status-badge.telat[data-v-083ae96d]{background:#fbbf2433;color:#fbbf24}.status-badge.alpha[data-v-083ae96d]{background:#ef444433;color:#ef4444}.appeals-wrapper[data-v-7684a729]{min-height:100vh;position:relative}.bg-gradient[data-v-7684a729]{position:fixed;inset:0;background:linear-gradient(135deg,#0f0c29,#302b63,#24243e);z-index:-1}.appeals-container[data-v-7684a729]{position:relative;z-index:1;padding:0 20px 100px;max-width:480px;margin:0 auto}.header[data-v-7684a729]{display:flex;align-items:center;gap:16px;position:sticky;top:0;background:#0f0c29e6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);margin:0 -20px;padding:16px 20px;z-index:100}.header h1[data-v-7684a729]{font-size:18px;font-weight:600;color:#fff;margin:0}.btn-back[data-v-7684a729]{width:40px;height:40px;background:#ffffff1a;border:none;border-radius:12px;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}.btn-back svg[data-v-7684a729]{width:20px;height:20px}.loading-container[data-v-7684a729]{display:flex;flex-direction:column;align-items:center;justify-content:center;height:300px;gap:16px}.loader[data-v-7684a729]{width:40px;height:40px;border:3px solid rgba(255,255,255,.1);border-top-color:#667eea;border-radius:50%;animation:spin-7684a729 1s linear infinite}.loading-container p[data-v-7684a729]{color:#fff9;font-size:14px}@keyframes spin-7684a729{to{transform:rotate(360deg)}}.empty-state[data-v-7684a729]{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center}.empty-icon[data-v-7684a729]{width:80px;height:80px;background:#ffffff1a;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:20px}.empty-icon svg[data-v-7684a729]{width:40px;height:40px;color:#fff6}.empty-state h3[data-v-7684a729]{font-size:18px;font-weight:600;color:#fff;margin:0 0 8px}.empty-state p[data-v-7684a729]{font-size:14px;color:#ffffff80;margin:0}.appeal-list[data-v-7684a729]{display:flex;flex-direction:column;gap:16px;padding-top:20px}.appeal-card[data-v-7684a729]{background:#ffffff14;border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:16px;cursor:pointer;transition:transform .2s,background .2s}.appeal-card[data-v-7684a729]:hover{background:#ffffff1f;transform:translateY(-2px)}.appeal-header[data-v-7684a729]{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px}.appeal-date[data-v-7684a729]{font-size:16px;font-weight:600;color:#fff;margin:0 0 8px}.appeal-meta[data-v-7684a729]{display:flex;align-items:center;gap:10px}.type-badge[data-v-7684a729]{font-size:11px;font-weight:600;padding:4px 8px;border-radius:6px}.type-check_in[data-v-7684a729]{background:#667eea33;color:#a5b4fc}.type-check_out[data-v-7684a729]{background:#fbbf2433;color:#fbbf24}.type-izin_kerja[data-v-7684a729]{background:#38bdf833;color:#38bdf8}.type-cuti[data-v-7684a729]{background:#a8a29e33;color:#a8a29e}.appeal-time[data-v-7684a729]{font-size:13px;color:#ffffff80}.status-badge[data-v-7684a729]{font-size:11px;font-weight:600;padding:4px 10px;border-radius:20px}.status-pending[data-v-7684a729]{background:#fbbf2433;color:#fbbf24}.status-approved[data-v-7684a729]{background:#4ade8033;color:#4ade80}.status-rejected[data-v-7684a729]{background:#ef444433;color:#f87171}.appeal-description[data-v-7684a729]{font-size:14px;color:#ffffffb3;background:#ffffff0d;padding:12px;border-radius:10px;margin:0;line-height:1.5}.admin-note[data-v-7684a729]{margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.1)}.note-label[data-v-7684a729]{font-size:12px;font-weight:600;color:#f87171;margin:0 0 4px}.note-text[data-v-7684a729]{font-size:13px;color:#fff9;margin:0}.fab[data-v-7684a729]{position:fixed;bottom:30px;right:30px;width:56px;height:56px;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px #667eea66;transition:transform .2s,box-shadow .2s}.fab[data-v-7684a729]:hover{transform:scale(1.1);box-shadow:0 12px 32px #667eea80}.fab svg[data-v-7684a729]{width:24px;height:24px}.create-wrapper[data-v-bc4a492d]{min-height:100vh;position:relative}.bg-gradient[data-v-bc4a492d]{position:fixed;inset:0;background:linear-gradient(135deg,#0f0c29,#302b63,#24243e);z-index:-1}.create-container[data-v-bc4a492d]{position:relative;z-index:1;padding:0 20px 40px;max-width:480px;margin:0 auto}.header[data-v-bc4a492d]{display:flex;align-items:center;gap:16px;position:sticky;top:0;background:#0f0c29e6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);margin:0 -20px;padding:16px 20px;z-index:100}.header h1[data-v-bc4a492d]{font-size:18px;font-weight:600;color:#fff;margin:0}.btn-back[data-v-bc4a492d]{width:40px;height:40px;background:#ffffff1a;border:none;border-radius:12px;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}.btn-back svg[data-v-bc4a492d]{width:20px;height:20px}.form[data-v-bc4a492d]{display:flex;flex-direction:column;gap:20px;padding-top:20px}.form-group[data-v-bc4a492d]{display:flex;flex-direction:column;gap:8px}.form-group label[data-v-bc4a492d]{font-size:14px;font-weight:500;color:#ffffffb3}.file-limit[data-v-bc4a492d]{font-size:12px;font-weight:400;color:#fff6;margin-left:8px}.form-row[data-v-bc4a492d]{display:grid;grid-template-columns:1fr 1fr;gap:12px}.form-input[data-v-bc4a492d],.form-select[data-v-bc4a492d],.form-textarea[data-v-bc4a492d]{width:100%;padding:14px 16px;background:#ffffff14;border:1px solid rgba(255,255,255,.15);border-radius:12px;color:#fff;font-size:15px;outline:none;transition:border-color .2s,background .2s}.form-input[data-v-bc4a492d]:focus,.form-select[data-v-bc4a492d]:focus,.form-textarea[data-v-bc4a492d]:focus{border-color:#667eea;background:#ffffff1f}.form-select[data-v-bc4a492d]{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:16px;padding-right:40px}.form-select option[data-v-bc4a492d]{background:#1a1a2e;color:#fff}.form-textarea[data-v-bc4a492d]{resize:none;min-height:100px}.form-textarea[data-v-bc4a492d]::placeholder{color:#fff6}.photo-upload[data-v-bc4a492d]{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;border:2px dashed rgba(255,255,255,.2);border-radius:16px;background:#ffffff08;cursor:pointer;transition:border-color .2s,background .2s}.photo-upload[data-v-bc4a492d]:hover{border-color:#667eea80;background:#667eea1a}.photo-upload svg[data-v-bc4a492d]{width:48px;height:48px;color:#fff6;margin-bottom:12px}.photo-upload p[data-v-bc4a492d]{font-size:14px;color:#ffffff80;margin:0}.photo-preview[data-v-bc4a492d]{position:relative;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.1)}.photo-preview img[data-v-bc4a492d]{width:100%;height:200px;object-fit:cover}.btn-change-photo[data-v-bc4a492d]{position:absolute;bottom:12px;right:12px;padding:8px 16px;background:#000000b3;color:#fff;border:none;border-radius:20px;font-size:12px;font-weight:600;cursor:pointer;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.btn-submit[data-v-bc4a492d]{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:16px;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:14px;color:#fff;font-size:16px;font-weight:600;cursor:pointer;box-shadow:0 8px 24px #667eea4d;transition:transform .2s,box-shadow .2s;margin-top:10px}.btn-submit[data-v-bc4a492d]:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 12px 32px #667eea66}.btn-submit[data-v-bc4a492d]:disabled{opacity:.7;cursor:not-allowed}.spinner[data-v-bc4a492d]{width:20px;height:20px;animation:spin-bc4a492d 1s linear infinite}@keyframes spin-bc4a492d{to{transform:rotate(360deg)}}input[type=date][data-v-bc4a492d],input[type=time][data-v-bc4a492d]{color-scheme:dark}input[type=date][data-v-bc4a492d]::-webkit-calendar-picker-indicator,input[type=time][data-v-bc4a492d]::-webkit-calendar-picker-indicator{filter:invert(1);cursor:pointer}*{margin:0;padding:0;box-sizing:border-box}html,body{font-family:Poppins,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;background:linear-gradient(135deg,#0f0c29,#302b63,#24243e);color:#fff;min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:#ffffff0d}::-webkit-scrollbar-thumb{background:#fff3;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#ffffff4d}::selection{background:#667eea66;color:#fff}:focus-visible{outline:2px solid rgba(102,126,234,.6);outline-offset:2px}a,button{transition:all .2s ease}button{font-family:inherit}.glass{background:#ffffff14;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.1)}.gradient-primary{background:linear-gradient(135deg,#667eea,#764ba2)}.gradient-success{background:linear-gradient(135deg,#4ade80,#22c55e)}.gradient-danger{background:linear-gradient(135deg,#ef4444,#dc2626)}.text-muted{color:#fff9}@supports (padding-top: env(safe-area-inset-top)){.safe-area-top{padding-top:env(safe-area-inset-top)}.safe-area-bottom{padding-bottom:env(safe-area-inset-bottom)}}