*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,"Noto Sans";background:#0b1220;color:#e6e8ef}
header{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:16px 24px;background:#0f172a;border-bottom:1px solid #233;flex-wrap:wrap}
h1{font-size:20px;margin:0}
nav a{color:#9ec5ff;margin-right:12px;text-decoration:none}
nav a:hover{text-decoration:underline}
.user{margin-right:12px;color:#cde7ff}
main{padding:16px}
.cards{display:grid;grid-template-columns:1fr;gap:16px}
.card{background:#111827;border:1px solid #24303f;border-radius:16px;padding:16px;min-height:200px}
.row{display:flex;justify-content:space-between;align-items:center;padding:12px;border-bottom:1px dashed #2a3b4f}
.row:last-child{border-bottom:none}
.title{font-weight:600;font-size:16px}
.sub{font-size:12px;color:#9ca3af}
.col.mid{display:flex;gap:8px;align-items:center}
.dur{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,"Liberation Mono","Courier New",monospace}
.badge{padding:4px 8px;border-radius:999px;font-size:12px;border:1px solid #2a3b4f}
.badge-normal{background:#0b3621;color:#c9fdd7;border-color:#1f5136}
.badge-cukup{background:#332b09;color:#fff3c4;border-color:#55480f}
.badge-lama{background:#3a0d0d;color:#ffd7d7;border-color:#5b1515}
.badge-terlalu{background:#360b2d;color:#ffd7fb;border-color:#571548}
.badge-selesai{background:#0b2840;color:#cde7ff;border-color:#1b3850}
button{background:#2563eb;color:#fff;border:none;border-radius:10px;padding:8px 12px;cursor:pointer}
button.small{background:#374151}
button:hover{opacity:.9}
button#testAlarm.on{background:#16a34a}
.form{display:grid;gap:12px;max-width:520px;padding:16px;background:#111827;border:1px solid #24303f;border-radius:16px}
label{display:grid;gap:6px}
input, select{padding:10px;border-radius:10px;border:1px solid #2a3b4f;background:#0b1220;color:#fff}
.alert{padding:10px;border-radius:8px;margin-bottom:12px}
.alert.ok{background:#0b3621;color:#c9fdd7;border:1px solid #1f5136}
.alert.error{background:#3a0d0d;color:#ffd7d7;border:1px solid #5b1515}
.muted{color:#9ca3af;font-size:12px}
.blink{animation: bl 1s linear infinite}
@keyframes bl{0%{background:#111827}50%{background:#3a0d0d}100%{background:#111827}}
.kpi-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.kpi{background:#0b1220;border:1px solid #24303f;border-radius:12px;padding:12px}
.kpi-title{font-size:12px;color:#9ca3af}
.kpi-value{font-size:20px;font-weight:700;margin-top:6px}
.table{display:grid;gap:8px}
.thead,.trow{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding:8px;border-bottom:1px dashed #2a3b4f}
.thead{font-weight:700;color:#cde7ff}
.trow.two{grid-template-columns:repeat(2,1fr)}
.trow.seven{grid-template-columns:repeat(7,1fr)}
@media (max-width:1000px){.kpi-grid{grid-template-columns:repeat(2,1fr)} .trow.seven{grid-template-columns:1fr 1fr}}