.st21-wrapper { display:flex; justify-content:center; padding:18px; box-sizing:border-box; }
.st21-card { width:100%; max-width:560px; background:#ffffff; border-radius:12px; box-shadow: 0 8px 24px rgba(5,31,69,0.08); overflow:hidden; border:1px solid rgba(5,31,69,0.06); font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; }
.st21-head { padding:20px 22px; background: linear-gradient(90deg, rgba(5,31,69,0.05), rgba(5,31,69,0.02)); }
.st21-head h3 { margin:0; font-size:20px; color:#051F45; letter-spacing:0.2px; }
.st21-sub { margin:6px 0 0 0; font-size:13px; color:#47607f; }

.st21-body { padding:18px 22px; }
.st21-row { display:flex; gap:8px; align-items:center; }
#st21_code { flex:1; padding:12px 14px; border-radius:8px; border:1px solid #e6eef6; font-size:15px; box-shadow: inset 0 1px 0 rgba(0,0,0,0.02); }
#st21_code:focus { outline: none; border-color: rgba(5,31,69,0.2); box-shadow: 0 0 0 4px rgba(5,31,69,0.04); }

#st21-search-btn { background: #051F45; color:#fff; padding:10px 16px; border-radius:8px; border:none; cursor:pointer; display:flex; align-items:center; gap:8px; transition: transform .08s ease, box-shadow .12s ease; box-shadow: 0 6px 14px rgba(5,31,69,0.12); }
#st21-search-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(5,31,69,0.16); }
#st21-search-btn:disabled { opacity:0.6; cursor:not-allowed; transform:none; box-shadow:none; }

.st21-spinner { width:18px; height:18px; border-radius:50%; border:2px solid rgba(255,255,255,0.18); border-top-color:rgba(255,255,255,0.9); display:inline-block; opacity:0; transform:scale(0.8); transition: all .18s ease; }
.st21-spinner.active { opacity:1; transform:scale(1); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.st21-result { margin-top:14px; min-height:54px; }

.st21-card-result { padding:14px; border-radius:10px; background:#fbfdff; border:1px solid rgba(5,31,69,0.04); box-shadow: 0 6px 20px rgba(9,30,63,0.02); }
.st21-line { display:flex; gap:8px; align-items:flex-start; margin-bottom:8px; }
.st21-line .label { min-width:130px; font-weight:600; color:#23394f; }
.st21-line .value { color:#0b2233; }

.status-processing { border-left:6px solid #F59E0B; }
.status-delivered { border-left:6px solid #16A34A; }
.status-ready { border-left:6px solid #0EA5E9; }
.status-rejected { border-left:6px solid #EF4444; }
.status-hold { border-left:6px solid #9CA3AF; }

.st21-notfound .st21-msg, .st21-error .st21-msg { padding:12px; border-radius:8px; background:#fff6f6; border:1px solid rgba(239,68,68,0.08); color:#7b1f1f; }
.st21-found .st21-card-result { animation: fadeInUp .28s ease both; }
@keyframes fadeInUp { from { opacity:0; transform: translateY(8px); } to { opacity:1; transform:none; } }

.st21-foot { padding:10px 16px; font-size:12px; color:#6b7b8f; background:transparent; text-align:right; }

@media (max-width:600px){
  .st21-card { border-radius:8px; }
  .st21-head h3 { font-size:18px; }
  .st21-row { flex-direction: column; align-items:stretch; }
  #st21_code { width:100%; }
  #st21-search-btn { width:100%; justify-content:center; padding:12px; }
  .st21-line .label { min-width:110px; font-size:13px; }
}