.grok-steps{list-style:none;display:flex;gap:12px;padding:0;margin:0;color:#536479;font-size:14px;flex-wrap:wrap}
.grok-steps li{display:flex;align-items:center;gap:8px;flex:1;min-width:105px}
.grok-steps li span{display:grid;place-items:center;border:1px solid #dce7f8;border-radius:50%;width:28px;height:28px;flex-shrink:0}
.grok-steps li[aria-current=step]{color:#087857;font-weight:600}
.grok-steps li[aria-current=step] span{color:white;background:#087857;border-color:#087857}
.grok-plan-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.grok-plan-fields select{width:100%}
.grok-review-actions{display:flex;gap:12px;flex-wrap:wrap}
.grok-cookie-help{font-size:14px;color:#536479;line-height:1.6}
.grok-cookie-help summary{cursor:pointer;color:#1769e0}
.grok-recharge-grid .qr-side-body{overflow-wrap:anywhere}
.byj-tabs:has(button[data-grok]){grid-template-columns:repeat(6,minmax(0,1fr))}
@media(max-width:600px){.byj-tabs:has(button[data-grok]){grid-template-columns:repeat(3,minmax(0,1fr))}.grok-plan-fields{grid-template-columns:1fr}}

/* Match the supplied result cards without changing the recharge form. */
.qr-side-card.qr-result-card {
  min-width: 0;
  min-height: 0;
  padding: 22px;
  border: 1px solid #e6ebf2;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 2px 5px rgb(25 43 67 / 3%);
}
.qr-result-card .qr-side-header {
  margin: 0;
  padding-bottom: 14px;
  border-color: #edf1f6;
  color: #13263c;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
}
.qr-result-card .qr-side-body:has(.recharge-result) { padding: 0; justify-content: flex-start; align-items: stretch; }
.recharge-result { width: 100%; min-width: 0; text-align: left; }
.recharge-result-summary { padding: 30px 0 22px; text-align: center; }
.recharge-result-state { animation: recharge-result-enter 220ms cubic-bezier(.23, 1, .32, 1) both; }
.recharge-result-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 16px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #e8f6ef;
  color: #07916a;
}
.recharge-result-icon svg { width: 30px; height: 30px; }
.recharge-result.is-failed .recharge-result-icon { color: #df3c42; background: #fff0f1; }
.recharge-result.is-pending .recharge-result-icon { color: #658b2b; background: #eff5e7; }
.recharge-result.is-pending .recharge-result-icon svg { animation: recharge-result-spin 1s linear infinite; }
.recharge-result.is-success .recharge-result-mark { stroke-dasharray: 1; animation: recharge-result-check 240ms ease-out both; }
.recharge-result-summary h3 { margin: 0; font-size: 24px; font-weight: 700; line-height: 1.25; color: #13263c; }
.recharge-result-summary p { margin: 8px 0 0; color: #73869f; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.recharge-result.is-failed .recharge-result-summary { padding-bottom: 18px; }
.recharge-result-failure { margin: 0 0 20px; padding: 16px; display: grid; gap: 14px; border-radius: 14px; background: #fff5f5; }
.recharge-result-failure dt { margin-bottom: 4px; color: #73869f; font-size: 13px; line-height: 1.5; }
.recharge-result-failure > div:first-child dt { color: #bf3936; font-size: 14px; font-weight: 700; }
.recharge-result-failure dd { margin: 0; color: #20344c; font-size: 14px; line-height: 1.65; overflow-wrap: anywhere; }
.recharge-result-info { margin: 0 0 14px; padding-top: 18px; border-top: 1px solid #edf1f6; display: grid; gap: 10px; }
.recharge-result-info dt { margin-bottom: 4px; color: #73869f; font-size: 13px; line-height: 1.4; }
.recharge-result-info dd { margin: 0; color: #13263c; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.recharge-result-info .recharge-result-order-number dd { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; }
.recharge-result-history { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; max-width: 100%; padding: 8px 12px; border: 1px solid #e6edf5; border-radius: 10px; background: #fff; color: #425774; font-size: 14px; font-weight: 600; line-height: 1.5; text-decoration: none; transition: background-color 160ms ease-out, border-color 160ms ease-out, transform 160ms ease-out; }
.recharge-result-history svg { width: 15px; height: 15px; flex-shrink: 0; }
.recharge-result-history:focus-visible { outline: 2px solid #658b2b; outline-offset: 3px; }
.recharge-result-history:active { transform: scale(.98); }
.recharge-result-verification { margin-top: 16px; padding-top: 16px; border-top: 1px solid #edf1f6; }
@media (hover: hover) { .recharge-result-history:hover { background: #f5f8fc; border-color: #cdd8e6; } }
@keyframes recharge-result-spin { to { transform: rotate(360deg); } }
@keyframes recharge-result-enter { from { opacity: 0; transform: translateY(4px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes recharge-result-check { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .recharge-result-state, .recharge-result.is-pending .recharge-result-icon svg, .recharge-result.is-success .recharge-result-mark { animation: none; }
  .recharge-result-history { transition: none; }
}