:root{--bg:#0a110d;--card:rgba(20,30,25,.55);--border:rgba(255,255,255,.1);--muted:#94a3b8;--primary:#10b981;--grad:linear-gradient(135deg,#059669 0%,#34d399 100%);--grad-warning:linear-gradient(135deg,#f59e0b 0%,#d97706 100%);--danger:#f43f5e;--warn:#f59e0b}
*{box-sizing:border-box;margin:0;padding:0;font-family:'Poppins',sans-serif}
body{background:var(--bg);background-image:radial-gradient(circle at 15% 50%,rgba(16,185,129,.08),transparent 40%),radial-gradient(circle at 85% 30%,rgba(5,150,105,.08),transparent 40%);color:#f8fafc;min-height:100vh}
#app{max-width:480px;margin:0 auto;padding:18px}
.header{text-align:center;margin-bottom:16px}
.header h1{font-size:20px;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.header p{color:var(--muted);font-size:12px;margin-top:4px}
.link-gas{font-size:11px;color:var(--primary);text-decoration:none}
.card{background:var(--card);backdrop-filter:blur(16px);border:1px solid var(--border);border-radius:16px;padding:18px}
label{font-size:12px;color:var(--muted);display:block;margin:10px 0 6px}
label .muted{font-weight:400}
input[type=text],input[type=number],input[type=datetime-local],input[type=time]{width:100%;padding:12px;border:1px solid var(--border);border-radius:8px;background:rgba(255,255,255,.05);color:#fff;font-size:14px}
input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 10px rgba(16,185,129,.15)}
input[type=time]::-webkit-calendar-picker-indicator{filter:invert(1) brightness(2); cursor:pointer}
input[type=datetime-local]::-webkit-calendar-picker-indicator{filter:invert(1) brightness(2); cursor:pointer}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.btn-row{display:flex;gap:8px;margin-top:10px}
.btn{padding:10px 14px;border:none;border-radius:8px;cursor:pointer;font-weight:600;font-size:13px;transition:.2s;color:#fff;flex:1}
.btn-primary{background:var(--grad);box-shadow:0 4px 15px rgba(16,185,129,.25)}
.btn-success{background:linear-gradient(135deg,#10b981 0%,#059669 100%)}
.btn-warning{background:linear-gradient(135deg,#f59e0b 0%,#d97706 100%) !important;box-shadow:0 4px 15px rgba(245,158,11,.3) !important;color:#fff !important;border:none !important}
.btn-ghost{background:transparent;border:1px solid var(--border);color:var(--muted)}
.btn:disabled{opacity:.45;cursor:not-allowed}
#map{height:260px;border-radius:10px;margin-top:12px;border:1px solid var(--border)}
.zona{margin-top:8px;padding:8px 10px;border-radius:8px;font-size:12px;text-align:center;border:1px solid var(--border)}
.zona.dalam{background:rgba(16,185,129,.12);color:var(--primary);border-color:var(--primary)}
.zona.luar{background:rgba(244,63,94,.12);color:var(--danger);border-color:var(--danger)}
.opsi-absen{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
.opsi-absen label{background:rgba(255,255,255,.05);border:1px solid var(--border);padding:12px 8px;text-align:center;border-radius:10px;font-size:13px;cursor:pointer;color:var(--muted);display:flex;align-items:center;justify-content:center}
.opsi-absen input{display:none}
.opsi-absen input:checked+label{background:var(--grad);color:#fff;border-color:transparent}
.hybrid{display:grid;gap:10px;margin-top:16px}
.help{margin-top:14px;font-size:11px;color:var(--muted)}
.help summary{cursor:pointer}
.log{margin-top:12px;font-size:11px;white-space:pre-wrap;color:var(--muted);max-height:260px;overflow:auto;border:1px solid var(--border);border-radius:8px;padding:8px;background:rgba(0,0,0,.15)}
.toast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%) translateY(80px);background:#111;border:1px solid var(--border);padding:10px 16px;border-radius:8px;font-size:12px;opacity:0;transition:.3s;max-width:90%;text-align:center}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:18px}
.modal.show{display:flex}
.modal-box{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:18px;max-width:520px;width:100%}
.modal-box h3{font-size:14px;margin-bottom:8px}
.modal-box p{font-size:11px;color:var(--muted);margin-bottom:8px}
.modal-box pre{background:rgba(0,0,0,.4);padding:10px;border-radius:8px;font-size:11px;white-space:pre-wrap;word-break:break-all;border:1px solid var(--border)}
.muted{color:var(--muted)}