feat(t219): show pending-payment reconciliation

backend-api/internal/transport/webui/static/admin.css

@@ -813,6 +813,87 @@ tbody tr:last-child td {
   font-weight: 800;
 }
 
+.order-state-banner {
+  margin-bottom: 18px;
+  padding: 18px;
+  border-left: 5px solid var(--info);
+  background: var(--info-soft);
+}
+
+.order-state-banner h2,
+.order-state-banner p {
+  margin-top: 0;
+}
+
+.order-state-heading {
+  display: flex;
+  align-items: start;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.order-state-label {
+  margin-bottom: 3px;
+  color: var(--success);
+  font-size: 13px;
+  font-weight: 800;
+}
+
+.order-state-payment {
+  border-left-color: var(--success);
+  background: var(--success-soft);
+}
+
+.order-state-manual {
+  border-left-color: var(--warn);
+  background: var(--warn-soft);
+}
+
+.order-state-reconciling {
+  border-left-color: var(--info);
+  background: var(--info-soft);
+}
+
+.order-state-instruction {
+  margin-bottom: 16px;
+  font-weight: 700;
+}
+
+.pending-payment-layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1.4fr) minmax(220px, 0.6fr);
+  gap: 20px;
+  align-items: start;
+}
+
+.pending-payment-details {
+  margin: 0;
+}
+
+.order-number {
+  overflow-wrap: anywhere;
+  font: 700 15px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace;
+}
+
+.pending-payment-evidence {
+  margin: 0;
+}
+
+.pending-payment-evidence img {
+  display: block;
+  width: 100%;
+  max-height: 300px;
+  object-fit: contain;
+  border: 1px solid var(--line);
+  background: var(--surface);
+}
+
+.pending-payment-evidence figcaption {
+  margin-top: 6px;
+  color: var(--muted);
+  font-size: 12px;
+}
+
 .detail-layout {
   display: grid;
   grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
@@ -1053,6 +1134,7 @@ tbody tr:last-child td {
   .upload-layout,
   .detail-layout,
   .requirement-layout,
+  .pending-payment-layout,
   .authorization-reasons {
     grid-template-columns: 1fr;
   }