:root{
  --mrt-blue:#003D7E; --mrt-blue-2:#0055B8; --mrt-blue-soft:#E8F0FB;
  --green:#00A859; --green-soft:#E6F7EE; --green-line:#12b76a;
  --gray:#C9D2DE; --gray-soft:#EEF2F7;
  --bg:#F4F7FB; --surface:#fff; --border:#E3E8F0; --text:#0F1B2D; --text-mut:#6B7891;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  color:var(--text); min-height:100vh; display:flex; flex-direction:column;
  background:
    radial-gradient(900px 460px at 12% -5%, var(--mrt-blue-soft), transparent 60%),
    radial-gradient(900px 460px at 100% 105%, var(--green-soft), transparent 60%),
    var(--bg);
}
.wrap{flex:1; width:100%; max-width:760px; margin:0 auto; padding:28px 16px 44px;}
.brand{display:flex; align-items:center; gap:12px; justify-content:center; margin:12px 0 4px}
.brand img{width:50px; height:50px; border-radius:12px; box-shadow:0 6px 18px rgba(0,61,126,.18)}
.brand .bt{font-weight:800; font-size:21px; letter-spacing:.3px}
.brand .bt span{color:var(--green)}
.subtitle{text-align:center; color:var(--text-mut); font-size:13.5px; margin:2px 0 20px}
.card{background:var(--surface); border:1px solid var(--border); border-radius:18px;
  box-shadow:0 18px 40px rgba(2,32,71,.08); padding:20px;}
.card h1{font-size:18px; margin:0 0 4px; display:flex; align-items:center; gap:8px}
.card h1 .material-symbols-rounded{color:var(--mrt-blue-2)}
.card .lead{color:var(--text-mut); font-size:13px; margin:0 0 14px}
.searchbar{display:flex; gap:10px}
.input{flex:1; border:1px solid var(--border); border-radius:12px; padding:13px 14px;
  font-size:15px; font-family:inherit; color:var(--text); outline:none; transition:.15s; background:#fff}
.input:focus{border-color:var(--mrt-blue-2); box-shadow:0 0 0 3px var(--mrt-blue-soft)}
.btn{border:none; border-radius:12px; padding:0 18px; font-weight:700; font-size:15px; cursor:pointer;
  font-family:inherit; display:inline-flex; align-items:center; gap:6px; background:var(--mrt-blue-2); color:#fff; transition:.15s}
.btn:hover{background:var(--mrt-blue)}
.btn:disabled{opacity:.6; cursor:default}
.btn.accent{background:var(--green)}
.result{margin-top:16px; display:none}
.result.show{display:block}

/* ===== Shopee-style order header ===== */
.ord-head{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  padding:12px 2px 16px; border-bottom:1px solid var(--border); margin-bottom:22px}
.ord-no{font-size:13.5px; color:var(--text-mut)}
.ord-no b{color:var(--text); letter-spacing:.4px}
.ord-status{font-size:14px; font-weight:800; color:var(--green); text-transform:uppercase; letter-spacing:.4px}
.ord-status.rej{color:#DC2626}

/* ===== Shopee-style horizontal stepper ===== */
.track{display:flex; align-items:flex-start; padding:6px 4px 4px; overflow-x:auto}
.tstep{flex:1 0 0; min-width:96px; display:flex; flex-direction:column; align-items:center; position:relative; text-align:center}
.tstep::before{content:''; position:absolute; top:29px; left:-50%; width:100%; height:4px; background:var(--gray); z-index:0; border-radius:2px}
.tstep:first-child::before{display:none}
.tstep.done::before, .tstep.current::before{background:var(--green-line)}
.tcircle{width:58px; height:58px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:#fff; border:2px solid var(--gray); color:#B4BECC; position:relative; z-index:1; transition:.2s}
.tcircle .material-symbols-rounded{font-size:28px}
.tstep.done .tcircle{border-color:var(--green); color:var(--green); background:var(--green-soft)}
.tstep.current .tcircle{border-color:var(--green); background:var(--green); color:#fff; box-shadow:0 6px 16px rgba(0,168,89,.35)}
.tlabel{margin-top:10px; font-size:12.5px; font-weight:700; color:var(--text); line-height:1.25; max-width:120px}
.tstep:not(.done):not(.current) .tlabel{color:var(--text-mut)}
.ttime{margin-top:3px; font-size:11px; color:var(--text-mut)}

/* rejected/cancel banner */
.rejbox{margin:6px 0 18px; padding:16px; border-radius:12px; text-align:center; font-weight:700}
.rejbox.rej{background:#FEF2F2; border:1px solid #FCA5A5; color:#991B1B}
.rejbox.cancel{background:#FFF7ED; border:1px solid #FED7AA; color:#9A3412}

.est{margin:16px 0 4px; padding:12px 14px; border-radius:12px; background:#FFFBEB; border:1px solid #FDE68A;
  color:#92400E; font-size:13px; display:flex; gap:8px; align-items:center}

.rows{margin-top:18px}
.row{display:grid; grid-template-columns:150px 1fr; gap:6px 14px; padding:9px 0; border-bottom:1px dashed var(--border); font-size:14px}
.row:last-child{border-bottom:none}
.row .k{color:var(--text-mut); font-weight:500}
.row .v{font-weight:600; word-break:break-word}
.row .v.pre{white-space:pre-wrap}
.code-pill{display:inline-block; background:var(--mrt-blue-soft); color:var(--mrt-blue); font-weight:700;
  padding:3px 10px; border-radius:8px; letter-spacing:.4px; font-size:13px}
.badge{display:inline-flex; align-items:center; padding:4px 11px; border-radius:999px; font-size:12px; font-weight:700; white-space:nowrap}
.status-belum{background:#FEF3C7; color:#92400E}
.status-mencari{background:#DBEAFE; color:#1E40AF}
.status-disiapkan{background:#E0E7FF; color:#3730A3}
.status-tersedia{background:#CFFAFE; color:#155E75}
.status-selesai{background:var(--green-soft); color:#065F46}
.status-ditolak{background:#FEE2E2; color:#991B1B}
.notice{padding:14px 16px; border-radius:12px; font-size:14px}
.notice.err{background:#FEF2F2; border:1px solid #FECACA; color:#991B1B}
.notice.muted{background:#F8FAFC; border:1px solid var(--border); color:var(--text-mut)}
.cta{margin-top:16px}
footer{padding:22px 18px; text-align:center; color:var(--text-mut); font-size:12.5px;
  border-top:1px solid var(--border); background:rgba(255,255,255,.6)}
footer a{color:var(--mrt-blue-2); text-decoration:none; font-weight:600}
@media(max-width:560px){
  .row{grid-template-columns:1fr; gap:2px}
  .row .k{margin-top:4px}
  .searchbar{flex-direction:column}
  .btn{padding:12px; justify-content:center}
  .tcircle{width:50px;height:50px}
  .tcircle .material-symbols-rounded{font-size:24px}
  .tstep::before{top:25px}
  .tlabel{font-size:11.5px}
}