:root{
  --bg:#0b0e17; --card:#141a2b; --card2:#0f1729; --border:#232c42;
  --text:#f1f5f9; --muted:#8891a5; --blue:#3b6cf4; --green:#16c784; --red:#ef4444; --orange:#f59e0b;
}
*{box-sizing:border-box;}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--text);font-family:'Segoe UI',Inter,system-ui,-apple-system,sans-serif;}
.wrap{max-width:480px;margin:0 auto;padding:24px 20px 100px;min-height:100vh;position:relative;}
.brand{display:flex;align-items:center;gap:12px;margin-bottom:28px;}
.brand .logo{width:44px;height:44px;border-radius:10px;background:var(--blue);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px;flex-shrink:0;}
.brand .name{font-weight:700;font-size:16px;}
.brand .sub{font-size:11px;color:var(--muted);letter-spacing:.05em;}
h1.title{font-size:24px;margin:0 0 6px;}
p.desc{color:#9aa4bb;font-size:14px;margin:0 0 20px;}
input[type=text],input[type=date],input[type=time],select,textarea{
  width:100%;background:#fff;color:#111;border:none;border-radius:12px;padding:15px 16px;font-size:14.5px;font-family:inherit;
}
textarea{resize:vertical;min-height:90px;}
.field{margin-bottom:14px;}
.field label{display:block;font-size:12px;color:var(--muted);margin-bottom:6px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;}
.btn{display:block;width:100%;text-align:center;text-decoration:none;border:none;border-radius:12px;padding:15px;font-size:15px;font-weight:700;cursor:pointer;}
.btn-blue{background:var(--blue);color:#fff;}
.btn-blue:disabled{background:#2a3350;color:#6b7690;cursor:not-allowed;}
.btn-outline{background:transparent;border:1px solid var(--border);color:var(--text);}
.btn-green{background:var(--green);color:#04231a;}
.header-portal{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:18px;}
.header-portal .idbadge{font-size:11px;color:var(--muted);letter-spacing:.05em;}
.header-portal .idbadge b{color:var(--text);}
.btn-keluar{background:transparent;border:1px solid var(--border);color:var(--text);padding:8px 16px;border-radius:10px;font-size:13px;text-decoration:none;}
.clock-big{text-align:center;font-size:44px;font-weight:700;margin:8px 0 2px;}
.date-sub{text-align:center;color:var(--muted);font-size:13px;margin-bottom:20px;}
.camera-circle{width:230px;height:230px;border-radius:50%;border:4px solid #4b5673;margin:0 auto 14px;overflow:hidden;position:relative;background:#000;transition:border-color .3s;}
.camera-circle.ready{border-color:var(--green);}
.camera-circle video, .camera-circle img{width:100%;height:100%;object-fit:cover;}
.camera-status{text-align:center;margin-bottom:18px;}
.camera-status .pill{display:inline-block;padding:6px 16px;border-radius:20px;font-size:13px;font-weight:600;background:#1c2b24;color:#7fd8ab;}
.camera-status .pill.off{background:#2b1c1c;color:#e07a7a;}
.loc-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px;margin-bottom:16px;}
.loc-card .row{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px;}
.loc-card .row .found{color:var(--green);text-transform:none;font-weight:600;}
.loc-card .row .searching{color:var(--orange);text-transform:none;font-weight:600;}
.loc-card .coords{font-size:14px;}
.warn-text{text-align:center;color:var(--orange);font-size:13px;margin:10px 0 0;}
.card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:18px;margin-bottom:14px;}
.card h3{margin:0 0 4px;font-size:16px;}
.section-title{font-size:20px;font-weight:700;margin:0 0 16px;}
table{width:100%;border-collapse:collapse;font-size:13px;}
th{text-align:left;color:var(--muted);font-weight:600;font-size:11px;text-transform:uppercase;padding:8px 6px;border-bottom:1px solid var(--border);}
td{padding:10px 6px;border-bottom:1px solid var(--border);}
.badge{display:inline-block;padding:2px 10px;border-radius:20px;font-size:11px;font-weight:700;}
.badge.h{background:#123626;color:#4ade80;} .badge.i{background:#152a4a;color:#7aa6ff;}
.badge.s{background:#3a2c10;color:#f5c469;} .badge.a{background:#3a1414;color:#f5a3a3;}
.empty{text-align:center;color:var(--muted);padding:40px 10px;}
.alert{padding:12px 16px;border-radius:10px;margin-bottom:16px;font-size:13.5px;}
.alert-success{background:#123626;color:#4ade80;}
.alert-error{background:#3a1414;color:#f5a3a3;}
.bottom-nav{position:fixed;bottom:0;left:0;right:0;background:#0f1729;border-top:1px solid var(--border);display:flex;max-width:480px;margin:0 auto;}
.bottom-nav a{flex:1;text-align:center;padding:12px 4px 10px;color:var(--muted);text-decoration:none;font-size:11.5px;}
.bottom-nav a.active{color:var(--blue);}
.bottom-nav .ic{display:block;font-size:18px;margin-bottom:2px;}