:root{--navy:#02203f;--blue:#1b6fa8;--ink:#142230;--muted:#5d6b79;--line:#dbe3eb;--bg:#f4f7fb;--star:#f2b01e}
*{box-sizing:border-box}
body{margin:0;font:15.5px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);background:var(--bg)}
header{display:flex;align-items:center;gap:10px;padding:14px 18px;background:var(--navy);color:#fff}
header b{font-size:16px}.hs{font-size:12.5px;color:#b9cde0}
.logo{width:34px;height:34px;border-radius:9px;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;overflow:hidden;flex:none}
.logo img{width:100%;height:100%;object-fit:cover}
main{max-width:560px;margin:14px auto;padding:0 14px 30px;display:flex;flex-direction:column;gap:12px}
.card{background:#fff;border:1px solid #e3e9f0;border-radius:16px;padding:16px;box-shadow:0 10px 30px rgba(15,61,94,.08)}
h1{font-size:21px;margin:0 0 4px;line-height:1.3}.muted{color:var(--muted)}.small{font-size:13px}
.ctx{background:#eef5fb;border-radius:10px;padding:10px 12px;font-size:14.5px}
.q{margin-top:18px}.q>b{display:block;margin-bottom:6px}
.stars{display:flex;gap:4px}.stars button{font-size:34px;line-height:1;border:0;background:none;color:#cfd7df;padding:2px 3px;cursor:pointer;min-width:44px;min-height:44px}
.stars button.on{color:var(--star)}.stars button:focus-visible{outline:2px solid var(--blue);border-radius:8px}
.slab{font-size:12.5px;color:var(--muted);min-height:18px}
.nps{display:grid;grid-template-columns:repeat(11,1fr);gap:3px}.nps button{border:1px solid #cfd8e1;background:#fff;border-radius:7px;padding:9px 0;font:inherit;font-size:14px;cursor:pointer;color:var(--ink);min-height:40px}
.nps button.on{background:var(--blue);border-color:var(--blue);color:#fff}
.lbl{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-top:3px}
textarea{width:100%;font:inherit;padding:10px 12px;border:1px solid #cfd8e1;border-radius:10px;min-height:84px;resize:vertical}
.ck{display:flex;gap:10px;align-items:flex-start;margin-top:16px;font-weight:600}.ck input{width:20px;height:20px;margin-top:2px}
.topics{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.topics label{border:1px solid #cfd8e1;border-radius:20px;padding:7px 12px;font-size:14px;cursor:pointer}
.topics input{display:none}.topics label:has(input:checked){background:#eaf3fa;border-color:var(--blue);color:var(--blue);font-weight:600}
button.primary{font:inherit;font-weight:650;border-radius:10px;padding:13px 16px;border:0;background:var(--blue);color:#fff;width:100%;margin-top:18px;cursor:pointer;min-height:48px}
button.primary:disabled{opacity:.55;cursor:wait}
.err{background:#fdecea;color:#7d1f1a;border-radius:10px;padding:10px 12px;margin-top:12px;font-size:14px}
.done{text-align:center;padding:26px 10px}.done .big{font-size:52px}
.al{border-radius:12px;padding:12px 14px;border-left:4px solid}.al b{display:block}
.al.gangguan{background:#fdecea;border-color:#d64541}.al.pemeliharaan{background:#fff6e0;border-color:#e0a100}.al.info{background:#eaf3fa;border-color:var(--blue)}.al.selesai{background:#e8f6ee;border-color:#2e9e5b}
.al .t{font-size:12.5px;color:var(--muted);margin-top:4px}
#ts{margin-top:12px}
footer{max-width:560px;margin:0 auto;padding:0 18px 30px;font-size:12.5px;color:var(--muted);text-align:center}
.hidden{display:none}