*{box-sizing:border-box}body{margin:0;background:#f3f5f9;color:#182230;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;line-height:1.5}.container{max-width:1000px;margin:0 auto;padding:28px 18px 50px}.narrow{max-width:620px;padding-top:8vh}header{margin:10px 0 24px}.eyebrow{font-size:12px;font-weight:800;letter-spacing:.12em;color:#52627a}h1{font-size:clamp(26px,4vw,36px);line-height:1.15;margin:8px 0 10px}h2{font-size:19px;margin:0 0 16px}.card{background:#fff;border:1px solid #e1e6ef;border-radius:16px;padding:22px;margin:16px 0;box-shadow:0 6px 20px #17203308}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.wide{grid-column:1/-1}label{display:block;font-size:14px;font-weight:650;margin-bottom:12px}input,select,textarea{display:block;width:100%;margin-top:7px;padding:12px 13px;border:1px solid #cbd4e1;border-radius:9px;background:white;color:#182230;font:inherit}input:focus,select:focus,textarea:focus{outline:2px solid #c7d7fe;border-color:#4778e6}small,.muted,.hint{color:#65748b;font-size:13px}.hint{margin-bottom:0}canvas{display:block;width:100%;height:180px;border:1px dashed #9aa9bc;border-radius:10px;background:#fff;touch-action:none}.actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:16px}.button{display:inline-flex;justify-content:center;align-items:center;border:0;border-radius:9px;background:#2458d3;color:#fff;text-decoration:none;font:inherit;font-weight:700;padding:11px 16px;cursor:pointer}.button:hover{filter:brightness(.95)}.button.secondary{background:#e9eef7;color:#263750}.button.danger{background:#b42318;color:#fff}.alert{padding:12px 14px;border-radius:9px;margin:12px 0}.alert.error{background:#fff0ef;color:#a51e18}.alert.success{background:#e8f8ef;color:#17683b}.honeypot{position:absolute;left:-10000px;top:auto;width:1px;height:1px}.success-card{text-align:center;padding:34px}.success-icon{margin:auto;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:#d9fbe6;color:#147a42;font-size:32px;font-weight:800}.ref{background:#f2f5fa;padding:12px;border-radius:9px;word-break:break-word}.topbar{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:18px}.table-wrap{overflow-x:auto;background:white;border:1px solid #e1e6ef;border-radius:12px}table{width:100%;border-collapse:collapse;min-width:800px}th,td{text-align:left;padding:12px;border-bottom:1px solid #edf0f5;font-size:13px}th{background:#f8f9fc;color:#52627a}td a{font-weight:700;color:#2458d3}.badge{display:inline-block;padding:5px 8px;border-radius:20px;background:#edf2ff;color:#2348a0;font-size:12px;font-weight:700}.ok{color:#167747}.warn{color:#9a5b00}.detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.detail-grid div{padding:10px;background:#f8f9fc;border-radius:8px;min-width:0}.detail-grid small,.detail-grid strong{display:block}.detail-grid strong{overflow-wrap:anywhere}.detail-grid .full{grid-column:1/-1}.signature-block{margin-top:18px}footer{text-align:center;color:#65748b;font-size:12px;margin-top:26px}@media(max-width:650px){.grid,.detail-grid{grid-template-columns:1fr}.wide,.detail-grid .full{grid-column:auto}.card{padding:17px}.topbar{align-items:flex-start}.container{padding:18px 12px 36px}.actions .button{flex:1}.narrow{padding-top:25px}}
/* Detail pembatalan: satu isian per baris sesuai urutan proses. */
.vertical-fields{grid-template-columns:minmax(0,1fr)}
.vertical-fields .wide{grid-column:auto}