*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;background:#f6f8f7;color:#0f172a;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}.app-device{width:min(100%,430px);min-height:100vh;margin:0 auto;background:#f6f8f7;position:relative;overflow-x:hidden}.app-main{min-height:100vh;padding:calc(14px + env(safe-area-inset-top)) 16px calc(92px + env(safe-area-inset-bottom))}.login-main{padding-bottom:28px}.topbar{position:sticky;top:0;z-index:30;margin:calc(-14px - env(safe-area-inset-top)) -16px 14px;padding:calc(14px + env(safe-area-inset-top)) 16px 12px;background:rgba(246,248,247,.9);backdrop-filter:blur(16px);border-bottom:1px solid #e7ece9}.topbar-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.brand{display:flex;align-items:center;gap:10px;min-width:0}.brand-logo{width:42px;height:42px;border-radius:15px;background:#fff;display:grid;place-items:center;box-shadow:0 4px 18px rgba(15,23,42,.07);border:1px solid #e7ece9}.brand-logo img{width:34px;height:34px;object-fit:contain}.page-title{font-size:19px;font-weight:900;line-height:1.1;letter-spacing:-.02em}.page-subtitle{font-size:12px;font-weight:700;color:#64748b;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.logout-btn{width:40px;height:40px;border-radius:14px;background:#0f766e;color:#fff;display:grid;place-items:center;font-size:13px;font-weight:900;text-decoration:none}.bottom-nav{position:fixed;left:50%;bottom:0;transform:translateX(-50%);z-index:45;width:min(100%,430px);padding:8px 10px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.94);backdrop-filter:blur(16px);border-top:1px solid #e7ece9;box-shadow:0 -14px 30px rgba(15,23,42,.08)}.bottom-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.nav-item{min-height:56px;border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-decoration:none;color:#64748b;font-size:11px;font-weight:800}.nav-item .ico{font-size:19px;line-height:1}.nav-item.active{background:#0f766e;color:#fff}.card{background:#fff;border:1px solid #e7ece9;border-radius:22px;box-shadow:0 8px 24px rgba(15,23,42,.055)}.pad{padding:16px}.hero{background:linear-gradient(135deg,#0f766e,#12816f);border-radius:24px;color:#fff;padding:18px;box-shadow:0 14px 34px rgba(15,118,110,.22);overflow:hidden;position:relative}.hero:after{content:"";position:absolute;width:150px;height:150px;border-radius:999px;right:-70px;top:-70px;background:rgba(255,255,255,.14)}.hero>*{position:relative;z-index:1}.hero-small{font-size:12px;font-weight:800;color:rgba(255,255,255,.78)}.hero-title{font-size:26px;font-weight:950;letter-spacing:-.04em;line-height:1.05;margin-top:4px}.hero-text{font-size:13px;font-weight:650;color:rgba(255,255,255,.82);margin-top:6px}.section-title{font-size:17px;font-weight:950;letter-spacing:-.02em;margin:0}.muted{color:#64748b}.small{font-size:12px}.tiny{font-size:11px}.fw{font-weight:800}.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.menu-card{display:flex;align-items:center;gap:12px;text-decoration:none;color:#0f172a;padding:14px;border-radius:22px;background:#fff;border:1px solid #e7ece9;box-shadow:0 8px 20px rgba(15,23,42,.05)}.menu-icon{width:48px;height:48px;border-radius:17px;background:#ecfdf5;color:#0f766e;display:grid;place-items:center;font-size:24px;font-weight:900;flex:0 0 auto}.menu-title{font-size:15px;font-weight:950}.menu-sub{font-size:12px;color:#64748b;font-weight:700;margin-top:2px}.stat{padding:14px;border-radius:20px;background:#fff;border:1px solid #e7ece9}.stat-number{font-size:24px;font-weight:950;line-height:1}.stat-label{font-size:11px;font-weight:800;color:#64748b;margin-top:4px}.btn{border:0;border-radius:17px;min-height:52px;padding:0 16px;font-weight:950;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;cursor:pointer}.btn-primary{width:100%;background:#0f766e;color:#fff;box-shadow:0 10px 24px rgba(15,118,110,.22)}.btn-light{background:#ecfdf5;color:#0f766e;border:1px solid #bbf7d0}.btn-dark{background:#111827;color:#fff}.input,.select,.textarea{width:100%;border:1px solid #dfe7e3;border-radius:17px;background:#fff;padding:13px 14px;font-size:15px;font-weight:750;color:#0f172a;outline:none}.select{height:50px}.textarea{min-height:92px;resize:vertical}.input:focus,.select:focus,.textarea:focus{border-color:#0f766e;box-shadow:0 0 0 4px rgba(15,118,110,.10)}.label{display:block;font-size:12px;font-weight:900;color:#334155;margin-bottom:7px}.field{margin-bottom:13px}.choice-row{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.choice{display:block;position:relative}.choice input{position:absolute;opacity:0;pointer-events:none}.choice span{display:flex;align-items:center;justify-content:center;min-height:64px;border-radius:20px;border:1px solid #dfe7e3;background:#fff;font-size:16px;font-weight:950;color:#334155}.choice input:checked+span{background:#0f766e;color:#fff;border-color:#0f766e;box-shadow:0 10px 22px rgba(15,118,110,.20)}.gps-box{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center}.gps-status{font-size:12px;font-weight:800;color:#64748b}.gps-data{margin-top:10px;display:grid;gap:6px}.gps-line{font-size:11px;font-weight:800;color:#64748b;background:#f8fafc;border:1px solid #eef2f7;border-radius:13px;padding:8px 10px;word-break:break-all}.list{display:grid;gap:10px}.item{background:#fff;border:1px solid #e7ece9;border-radius:20px;padding:14px}.item-title{font-size:15px;font-weight:950;line-height:1.25}.item-meta{font-size:12px;color:#64748b;font-weight:750;margin-top:4px}.badge{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:5px 10px;font-size:11px;font-weight:950;border:1px solid transparent}.status-todo{background:#f1f5f9;color:#475569}.status-progress{background:#fef3c7;color:#a16207}.status-done{background:#dcfce7;color:#15803d}.status-masuk{background:#dcfce7;color:#15803d}.status-keluar{background:#ffe4e6;color:#be123c}.flash{margin-bottom:12px;border-radius:17px;padding:12px 14px;font-size:13px;font-weight:900}.flash-success{background:#dcfce7;color:#15803d;border:1px solid #bbf7d0}.flash-error{background:#ffe4e6;color:#be123c;border:1px solid #fecdd3}.mt-10{margin-top:10px}.mt-12{margin-top:12px}.mt-14{margin-top:14px}.mt-16{margin-top:16px}.mt-18{margin-top:18px}.mt-22{margin-top:22px}.mb-10{margin-bottom:10px}.between{display:flex;align-items:center;justify-content:space-between;gap:10px}.tap:active{transform:scale(.98)}#splash{position:fixed;inset:0;z-index:80;background:#f6f8f7;display:grid;place-items:center;transition:opacity .35s ease}.splash-card{width:min(86vw,300px);background:#fff;border:1px solid #e7ece9;border-radius:28px;text-align:center;padding:26px;box-shadow:0 20px 50px rgba(15,23,42,.10);animation:pop .45s ease both}.splash-logo{width:82px;height:82px;border-radius:24px;margin:0 auto 12px;background:#ecfdf5;display:grid;place-items:center}.splash-logo img{width:66px;height:66px;object-fit:contain}.splash-name{font-size:24px;font-weight:950;letter-spacing:-.04em}.loading-line{height:5px;border-radius:999px;background:#e7ece9;overflow:hidden;margin:18px auto 0;width:150px}.loading-line:after{content:"";display:block;height:100%;width:40%;border-radius:999px;background:#0f766e;animation:slide 1s ease-in-out infinite}.page-loader{position:fixed;left:0;right:0;top:0;z-index:70;height:3px;background:transparent;opacity:0}.page-loader:after{content:"";display:block;height:100%;width:45%;background:#0f766e;border-radius:999px;animation:slide 1s ease-in-out infinite}.page-loader.show{opacity:1}.shimmer{position:relative;overflow:hidden;background:#edf2ef}.shimmer:after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);animation:shimmer 1.2s infinite}.loading-button{position:relative;color:transparent!important;pointer-events:none}.loading-button:after{content:"";position:absolute;width:20px;height:20px;border-radius:999px;border:3px solid rgba(255,255,255,.5);border-top-color:#fff;animation:spin .7s linear infinite}@keyframes pop{from{opacity:0;transform:scale(.96) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes slide{0%{transform:translateX(-80%)}50%{transform:translateX(180%)}100%{transform:translateX(360%)}}@keyframes shimmer{100%{transform:translateX(100%)}}@keyframes spin{to{transform:rotate(360deg)}}.login-wrap{min-height:100vh;display:flex;flex-direction:column;justify-content:center}.login-card{background:#fff;border:1px solid #e7ece9;border-radius:28px;padding:22px;box-shadow:0 18px 45px rgba(15,23,42,.08)}.login-logo{width:90px;height:90px;border-radius:28px;background:#ecfdf5;display:grid;place-items:center;margin:0 auto 14px}.login-logo img{width:72px;height:72px;object-fit:contain}.login-title{text-align:center;font-size:28px;font-weight:950;letter-spacing:-.04em}.login-sub{text-align:center;font-size:13px;font-weight:800;color:#64748b;margin-top:4px}.empty{text-align:center;padding:26px 16px;color:#64748b;font-weight:800}.admin-links{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.admin-links a{border-radius:18px;padding:13px;text-align:center;background:#111827;color:#fff;text-decoration:none;font-weight:900;font-size:13px}@media (min-width:700px){body{background:#eef3f1}.app-device{box-shadow:0 0 0 1px #e7ece9}}
/* Muhammadiyahku: simple mobile step form */
.form-block{margin-bottom:18px}.blue-label{color:#2563eb;font-weight:800;margin-bottom:8px}.small-label{font-size:12px;display:block}.radio-list{display:grid;gap:9px}.radio-card{min-height:56px;width:100%;display:flex;align-items:center;gap:13px;background:#fff;border:1px solid #edf2f7;border-radius:15px;padding:13px 14px;box-shadow:0 5px 10px rgba(15,23,42,.10);position:relative;overflow:hidden}.radio-card input{position:absolute;opacity:0;pointer-events:none}.radio-dot{width:22px;height:22px;border-radius:999px;border:3px solid #6b7280;background:#fff;display:grid;place-items:center;flex:0 0 auto}.radio-dot:after{content:"";width:10px;height:10px;border-radius:999px;background:#3b82f6;opacity:0;transform:scale(.55);transition:.18s}.radio-text{font-size:13px;font-weight:850;color:#111827;line-height:1.25}.radio-card:has(input:checked){border-color:#dbeafe;background:#fff}.radio-card input:checked+.radio-dot{border-color:#3b82f6}.radio-card input:checked+.radio-dot:after{opacity:1;transform:scale(1)}.step-hidden{display:none!important}.step-show{animation:stepFade .22s ease both}.simple-input-card{background:#fff;border:1px solid #edf2f7;border-radius:15px;padding:13px 14px;margin-bottom:10px;box-shadow:0 5px 10px rgba(15,23,42,.10)}.plain-input,.plain-textarea{width:100%;border:0;outline:0;padding:5px 0 0;background:transparent;color:#0f172a;font-size:14px;font-weight:750}.plain-input::placeholder,.plain-textarea::placeholder{color:#6b7280;font-weight:650}.plain-textarea{min-height:96px;resize:vertical}.simple-location-card{background:#fff;border:1px solid #edf2f7;border-radius:5px;padding:15px 17px;box-shadow:0 5px 10px rgba(15,23,42,.10);margin-top:8px}.location-grid{display:grid;grid-template-columns:auto 14px 1fr;gap:4px 7px;align-items:start;color:#64748b;font-size:11px;font-weight:850}.location-labels,.location-separators,.location-values{display:grid;gap:4px}.location-values{word-break:break-all;color:#334155}.mini-refresh{margin-top:10px;border:0;border-radius:5px;background:#38bdf8;color:#fff;text-transform:uppercase;letter-spacing:.08em;font-size:10px;font-weight:950;padding:9px 13px;box-shadow:0 6px 12px rgba(56,189,248,.30)}@keyframes stepFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
/* Profile page */
.profile-chip{width:44px;height:44px;border-radius:16px;background:#ecfdf5;color:#0f766e;display:grid;place-items:center;text-decoration:none;font-weight:950;border:1px solid rgba(15,118,110,.12);overflow:hidden;box-shadow:0 8px 18px rgba(15,23,42,.07)}
.profile-chip img{width:100%;height:100%;object-fit:cover}.profile-chip span{font-size:13px}.profile-hero-card{background:linear-gradient(135deg,#0f766e,#14b8a6);border-radius:26px;padding:24px 18px;text-align:center;color:#fff;box-shadow:0 18px 40px rgba(15,118,110,.22)}.profile-avatar-xl{width:94px;height:94px;border-radius:30px;background:rgba(255,255,255,.18);border:3px solid rgba(255,255,255,.35);display:grid;place-items:center;margin:0 auto 14px;overflow:hidden}.profile-avatar-xl img{width:100%;height:100%;object-fit:cover}.profile-avatar-xl span{font-size:30px;font-weight:950}.profile-name{font-size:20px;font-weight:950;line-height:1.15}.profile-code{font-size:12px;font-weight:850;opacity:.9;margin-top:6px}.btn-danger{background:#ef4444;color:#fff;border:0;box-shadow:0 10px 24px rgba(239,68,68,.22);text-decoration:none}.file-input{padding:11px 14px;height:auto}.logout-btn{display:none}
.attendance-radius-box{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px}.attendance-radius-box>div{background:#f8fafc;border:1px solid #e5e7eb;border-radius:14px;padding:10px 12px}.attendance-radius-box span{display:block;font-size:11px;color:#64748b;font-weight:800}.attendance-radius-box strong{display:block;margin-top:4px;font-size:13px;color:#0f172a}.attendance-radius-box .full-radius-row{grid-column:1/-1}.radius-status{margin-top:10px;padding:10px 12px;border-radius:13px;font-size:12px;font-weight:900}.radius-status.waiting{background:#f8fafc;color:#64748b;border:1px solid #e2e8f0}.radius-status.inside{background:#dcfce7;color:#15803d;border:1px solid #bbf7d0}.radius-status.outside{background:#fee2e2;color:#b91c1c;border:1px solid #fecaca}.radius-status.disabled{background:#fef3c7;color:#a16207;border:1px solid #fde68a}.btn:disabled{opacity:.55;cursor:not-allowed;filter:grayscale(.25)}