:root{--bg:#eef3fa;--card:#fff;--ink:#142a48;--muted:#6a7b90;--border:#dce5ef;--primary:#234d80}*{box-sizing:border-box}body{margin:0;font:15px system-ui,sans-serif;background:var(--bg);color:var(--ink)}body.dark{--bg:#0d1727;--card:#17263b;--ink:#edf4ff;--muted:#a9b7cb;--border:#2a405a;--primary:#4377b4}aside{width:240px;background:#102846;color:#fff;position:fixed;inset:0 auto 0 0;padding:32px 22px;display:flex;flex-direction:column;gap:20px}.brand{font-size:30px;font-weight:800;letter-spacing:-1px}.brand span{color:#65c6c4}aside p{font-size:10px;letter-spacing:2px;color:#a3b8d0}nav{display:grid;gap:9px;flex:1;align-content:start}nav a{padding:13px 16px;border-radius:12px;color:#c5d3e6;text-decoration:none}nav a:hover,nav a.active{background:#25466b;color:white}.workspace{margin-left:240px;padding:32px 40px;max-width:1700px}header{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}h1{font-size:28px;margin:6px 0}p{color:var(--muted);line-height:1.6}.account{display:flex;align-items:center;gap:14px}.hero{background:linear-gradient(120deg,#17385e,#32689a);padding:30px;border-radius:24px;color:white}.hero h2{font-size:28px;max-width:520px}.hero p{color:#c2d8ed}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:24px 0}article,.box{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:24px}article strong{font-size:36px;display:block}article span{font-size:12px;color:var(--muted)}.quick{display:flex;gap:20px;flex-wrap:wrap}a{color:#447cbb}.toolbar{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}.toolbar form{display:flex;gap:10px}input,select{width:100%;padding:12px;border:1px solid var(--border);border-radius:10px;background:var(--bg);color:var(--ink);font:inherit}button{cursor:pointer;border:0;border-radius:10px;padding:12px 18px;color:white;background:var(--primary);font:inherit;white-space:nowrap}.secondary{background:var(--bg);color:var(--ink);border:1px solid var(--border)}label{display:block;margin:14px 0;font-weight:600}label input,label select{margin-top:7px;font-weight:400}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;white-space:nowrap}th{text-align:left;color:var(--muted);font-size:12px}th,td{padding:16px 12px;border-bottom:1px solid var(--border)}.pagination{display:flex;justify-content:space-between;margin-top:22px}.alert{padding:16px 20px;border-radius:12px;margin-bottom:20px}.success{background:#d5f0e6;color:#146347}.error{background:#ffe3e3;color:#9a2727}dialog{border:1px solid var(--border);border-radius:20px;width:min(540px,94vw);max-height:88vh;overflow:auto;padding:24px;background:var(--card);color:var(--ink)}dialog::backdrop{background:#0b1c38aa;backdrop-filter:blur(4px)}.dialog-head{display:flex;align-items:center;justify-content:space-between}.login{min-height:100vh;display:grid;place-items:center;background:radial-gradient(at top left,#cbdff4,transparent 65%),#eaf0f9;padding:24px}.login-card{width:min(430px,100%);padding:38px;background:#ffffffce;backdrop-filter:blur(20px);border:1px solid white;border-radius:26px;box-shadow:0 24px 70px #193b6620}.login-card h1{font-size:25px}.login-card button{width:100%;margin:16px 0}small{color:var(--muted)}@media(max-width:900px){aside{position:static;width:100%;padding:20px}nav{display:flex;overflow:auto;gap:5px}aside p,aside form{display:none}.workspace{margin:0;padding:22px}.stats{grid-template-columns:repeat(2,1fr)}header{gap:12px;flex-wrap:wrap}.account{font-size:13px}}@media(max-width:450px){.stats{gap:10px}article{padding:16px}.toolbar form{width:100%}.workspace{padding:16px}}

/* Tombol navigasi Akses cepat. */
.quick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.quick a{display:flex;align-items:center;justify-content:center;min-height:52px;padding:14px 20px;border:1px solid #ffffff26;border-radius:12px;background:linear-gradient(135deg,#245b9b,#173b6a);color:#fff;text-decoration:none;font-weight:600;line-height:1.4;text-align:center;box-shadow:0 5px 14px #10284618;transition:background .18s,box-shadow .18s}
.quick a:nth-child(2){background:linear-gradient(135deg,#087567,#075448)}
.quick a:nth-child(3){background:linear-gradient(135deg,#7045a1,#513078)}
.quick a:hover{box-shadow:0 7px 20px #10284635;filter:brightness(1.1)}
.quick a:focus-visible{outline:3px solid var(--ink);outline-offset:4px}
body.dark .quick a{border-color:#ffffff30;box-shadow:0 5px 14px #0003}
@media(max-width:600px){.quick{grid-template-columns:1fr}.quick a{min-height:48px}}
@media(prefers-reduced-motion:reduce){.quick a{transition:none}}

/* Gaya aksi konsisten pada semua halaman panel admin. */
button,.workspace a:not(.quick a){display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:12px 18px;border-radius:12px;font:inherit;font-weight:600;line-height:1.4;text-align:center;text-decoration:none;vertical-align:middle;transition:background .18s,box-shadow .18s}
.workspace a:not(.quick a){border:1px solid var(--border);background:var(--primary);color:#fff;box-shadow:0 3px 10px #10284614}
button{border:1px solid transparent;box-shadow:0 3px 10px #10284614}
button.secondary,.pagination a:not(.quick a),header>a:not(.quick a){background:var(--bg);color:var(--ink);border:1px solid var(--border);box-shadow:none}
button:hover:not(:disabled),.workspace a:not(.quick a):hover{filter:brightness(1.08);box-shadow:0 5px 14px #10284624}
button:focus-visible,.workspace a:focus-visible,nav a:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
aside button:focus-visible,nav a:focus-visible{outline-color:#fff}
button:disabled{cursor:wait;opacity:.6;box-shadow:none}
.toolbar{align-items:center}.toolbar>div{display:flex;flex-wrap:wrap;gap:8px}.toolbar form{align-items:center;flex-wrap:wrap}
.pagination{gap:12px;flex-wrap:wrap;justify-content:flex-end}
.dialog-head>[data-close]{min-width:44px;flex-shrink:0;padding:9px}
body.dark .workspace a:not(.quick a){border-color:#ffffff25}
body.dark button.secondary,body.dark .pagination a:not(.quick a),body.dark header>a:not(.quick a){border-color:var(--border)}
@media(max-width:600px){.toolbar>a,.toolbar>button{flex:1 1 auto}.toolbar form input{flex:1 1 150px;width:auto}.pagination a{flex:1}.quick a{width:100%}}
@media(prefers-reduced-motion:reduce){button,.workspace a{transition:none}}

/* Kontrol lihat/sembunyikan password pengguna. */
.password-field{position:relative;display:block;margin-top:7px}
label .password-field input{margin-top:0;padding-right:58px}
.password-field .password-toggle{position:absolute;right:4px;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;width:44px;height:40px;min-height:40px;padding:8px;border:0;background:transparent;color:var(--ink);box-shadow:none;border-radius:8px}
.password-field .password-toggle:hover{background:var(--border);box-shadow:none;filter:none}
.password-toggle svg{flex-shrink:0;pointer-events:none}
.password-toggle .eye-closed{display:none}
.password-toggle[aria-pressed="true"] .eye-open{display:none}
.password-toggle[aria-pressed="true"] .eye-closed{display:block}

.device-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.device-actions form{margin:0}
.device-action-approve{background:#126b50}.device-action-reject,.device-action-revoke{background:#a33443}
.device-status{display:inline-flex;align-items:center;padding:6px 11px;border-radius:999px;font-size:12px;font-weight:700;line-height:1.4}
.device-status-pending{background:#fff0c2;color:#6d4800}.device-status-active{background:#d5f0e6;color:#145c43}.device-status-rejected{background:#ffe0e6;color:#8f233a}.device-status-revoked{background:#e6eaf0;color:#34445c}
body.dark .device-status-pending{background:#493b19;color:#ffe29b}body.dark .device-status-active{background:#173f35;color:#a7ecd0}body.dark .device-status-rejected{background:#482636;color:#ffbccb}body.dark .device-status-revoked{background:#2e3b4f;color:#d0dbea}

.monitoring-filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px}.monitoring-filters label{min-width:0}.monitoring-filters select{min-width:0;text-overflow:ellipsis}.monitoring-filter-actions{grid-column:1/-1;display:flex;gap:10px;flex-wrap:wrap;margin:8px 0 12px}@media(max-width:650px){.monitoring-filters{grid-template-columns:1fr}}

textarea{display:block;width:100%;padding:12px;margin-top:7px;border:1px solid var(--border);border-radius:10px;background:var(--bg);color:var(--ink);font:inherit;resize:vertical}.apk-check{display:flex;align-items:flex-start;gap:10px;font-weight:400}.apk-check input{width:20px;height:20px;flex-shrink:0;margin:2px 0 0}