:root{
  --fdz-border: #e9ecef;
  --fdz-gray: #f8f9fa;
  --fdz-slate: #64748b;
  --fdz-dark: #1c2a41;
  --primary: #0d6efd;
  --radius-lg: 1rem;
  --radius-md: .75rem;
  --shadow-soft: 0 8px 24px rgba(0,0,0,.06);
}
.card-form, .card-status, .card-result, .card-tips, .card-faq, .pay-hint{
  border:1px solid var(--fdz-border);
  border-radius: var(--radius-lg);
  background:#fff;
  box-shadow: var(--shadow-soft);
  transition: transform .25s ease, box-shadow .25s ease;
}
.card-form:hover{ transform: translateY(-3px); }
.badge-hero{
  display:inline-flex;align-items:center;gap:.5rem;
  background:#fff;color:var(--primary);
  padding:.5rem 1rem;border-radius:999px;
  border:1px solid var(--fdz-border);
}
.status-steps{
  display:flex;align-items:center;gap:.75rem;justify-content:space-between;
  padding:1rem;border:1px dashed var(--fdz-border);border-radius:.9rem;background:linear-gradient(180deg,#fff,#fdfefe);
}
.status-steps .line{
  flex:1;height:2px;background:linear-gradient(90deg,#e9ecef 0,#dfe6ff 100%);
  border-radius:2px;opacity:.7;
}
.status-steps .step{
  display:flex;flex-direction:column;align-items:center;gap:.35rem;min-width:110px;text-align:center;
}
.status-steps .step .dot{
  width:38px;height:38px;border-radius:999px;display:grid;place-items:center;
  background:linear-gradient(180deg,#f3f6ff,#e9f2ff);color:#0d6efd;border:1px solid #dbe5ff;
  box-shadow:0 6px 18px rgba(13,110,253,.12);
}
.status-steps .step .label{ font-size:.8rem;color:var(--fdz-slate); }
.status-steps .step.active .dot{ background:linear-gradient(180deg,#0d6efd,#00c6ff); color:#fff;border-color:#0d6efd; }
.status-steps .step.active .label{ color:var(--fdz-dark);font-weight:600; }
.status-steps .step.done .dot{ background:linear-gradient(180deg,#22c55e,#a7f3d0); color:#fff;border-color:#22c55e; }
@media (max-width: 576px){
  .status-steps{
    display:grid; grid-template-columns: 1fr 1fr; gap:.75rem; padding:.9rem;
  }
  .status-steps .line{ display:none; }
  .status-steps .step{ min-width:unset; background:#ffffff; border:1px solid var(--fdz-border); border-radius:.75rem; padding:.5rem .2rem; }
}
.pm-badges{ display:flex; gap:.5rem; flex-wrap:wrap; }
.pm{
  display:inline-flex;align-items:center;justify-content:center;
  height:28px;padding:0 .75rem;border-radius:999px;
  background:#f1f5f9;border:1px solid var(--fdz-border);
  font-size:.8rem;font-weight:600;color:#334155;
}
.pm-bank{ border-color:#b6e0fe;background:#eaf6ff;color:#0b5ed7; }
.pm-ew{ border-color:#ffd6a5;background:#fff7e6;color:#b45309; }
.pm-qris{ border-color:#ffc2c2;background:#fff0f0;color:#b91c1c; }
.pm-retail{ border-color:#cdeccf;background:#f1fff1;color:#166534; }
.pay-actions{ display:flex; gap:.5rem; align-items:center; }
.pay-actions .btn{ border-radius:.75rem; white-space:nowrap; }
#btnOpenPaymentInline.disabled,
#btnOpenPayment.disabled{
  pointer-events:none; opacity:.6;
}
@media (max-width: 576px){
  .pay-actions{ width:100%; flex-direction:column; align-items:stretch; }
  .pay-actions .btn{ width:100%; }
}
.timeline{ position:relative;padding:1rem;border:1px solid var(--fdz-border);border-radius:.9rem;background:#fff; }
.timeline .t-item{ display:flex; gap:.75rem; margin:.6rem 0; position:relative; padding-left:1.25rem; }
.timeline .t-item::before{
  content:""; position:absolute; left:.2rem; top:.2rem; bottom:.2rem; width:2px; background: #dbe4ff; border-radius:2px;
}
.timeline .t-dot{
  position:absolute; left:-.1rem; top:.2rem; width:12px; height:12px; border-radius:50%;
  background:#0d6efd; box-shadow:0 0 0 4px rgba(13,110,253,.15);
}
.timeline .t-item:nth-child(2) .t-dot{ background:#f59e0b; box-shadow:0 0 0 4px rgba(245,158,11,.15); }
.timeline .t-item:nth-child(3) .t-dot{ background:#22c55e; box-shadow:0 0 0 4px rgba(34,197,94,.15); }
.timeline .t-content .t-title{ font-weight:600;color:var(--fdz-dark); }
.timeline .t-content .t-desc{ font-size:.9rem;color:var(--fdz-slate); }
.account-details-grid{ display:grid;grid-template-columns:1fr;gap:.75rem; }
@media(min-width:576px){ .account-details-grid{ grid-template-columns:repeat(2,1fr); } }
.detail-item{
  background:var(--fdz-gray);border:1px solid var(--fdz-border);border-radius:.65rem;padding:.65rem .9rem;
}
.detail-item .k{ display:block;font-size:.75rem;color:var(--fdz-slate);margin-bottom:2px; }
.detail-item .v{ font-weight:600;color:var(--fdz-dark);word-break:break-all; }
.detail-item.uuid{ grid-column:1/-1; }
.cfg-block{ background:#0f172a;color:#cbd5e1;border:1px solid #273449;border-radius:.65rem;padding:.6rem .75rem; }
.cfg-title{ font-size:.75rem;color:#60a5fa;font-weight:700;margin-bottom:.25rem; }
.cfg-row{ display:flex;align-items:center;gap:.5rem; }
.cfg-code{
  width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;font-size:.85rem;color:#e5e7eb;
}
.cfg-copy{ border:1px solid #334155;color:#94a3b8;border-radius:.5rem; }
.cfg-copy:hover{ background:#1e293b;color:#fff; }
.badge-pulse{ position:relative; }
.badge-pulse::after{
  content:"";position:absolute;inset:-6px;border-radius:999px;border:2px solid rgba(13,110,253,.2);
  animation:stPulse 1.7s ease-out infinite;
}
@keyframes stPulse{ 0%{opacity:.7;transform:scale(1)} 70%{opacity:0;transform:scale(1.35)} 100%{opacity:0;transform:scale(1.35)} }
#btnOpenPayment{ border-radius:.75rem; }
#errorBox .alert, #errorBoxRight .alert{ border-radius:.75rem; }
.spinner-border{ width:1.8rem;height:1.8rem;border-width:.2rem; }
.card-body{ overflow:visible; }
@media (max-width: 576px){
  .card-tips, .card-faq{ margin-top: .5rem; }
}
.accordion-button{ border-radius:.5rem; }
.accordion-item{ border: 1px solid var(--fdz-border); border-radius:.75rem; overflow:hidden; }