:root { --success-card: rgba(12, 31, 21, .92); }
body[data-state='success'] { --success-accent: var(--lime); }
body[data-state='pending'] { --success-accent: var(--yellow); }
body[data-state='error'] { --success-accent: #ff9a71; }
.success-shell { width: min(100% - 40px, 940px); min-height: 100vh; margin: 0 auto; padding: 28px 0 34px; display: flex; flex-direction: column; }
.success-header { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.success-code { color: var(--lime); font: 10px var(--mono); letter-spacing: .13em; }
.success-card { width: min(100%, 650px); margin: auto; padding: 62px 68px; position: relative; overflow: hidden; border: 1px solid rgba(216,255,51,.42); background: var(--success-card); box-shadow: 0 0 0 10px rgba(216,255,51,.025), 0 25px 80px rgba(0,0,0,.25); }
.success-card::before { content: ''; position: absolute; inset: 14px; border: 1px solid rgba(216,255,51,.1); pointer-events: none; }
.success-orbit { width: 420px; height: 420px; position: absolute; top: -220px; right: -150px; border: 1px solid rgba(216,255,51,.18); border-radius: 50%; box-shadow: 0 0 0 22px rgba(216,255,51,.025), 0 0 0 45px rgba(216,255,51,.02); transform: rotate(20deg); }
.success-card > *:not(.success-orbit) { position: relative; z-index: 1; }
.success-icon { width: 61px; height: 61px; display: grid; place-items: center; margin-bottom: 28px; border: 1px solid var(--success-accent, var(--lime)); color: var(--success-accent, var(--lime)); font: 500 31px var(--mono); box-shadow: 0 0 28px color-mix(in srgb, var(--success-accent, var(--lime)) 20%, transparent); }
.success-eyebrow { margin: 0 0 21px; color: var(--success-accent, var(--lime)); font: 10px var(--mono); letter-spacing: .17em; }
.success-card h1 { max-width: 520px; font-size: clamp(45px, 7vw, 76px); }
.success-card h1 span { color: var(--success-accent, var(--lime)); }
.success-message { max-width: 475px; margin: 24px 0 0; color: var(--muted); font-size: 15px; line-height: 1.6; }
.success-order { margin-top: 34px; padding: 20px; border: 1px solid rgba(216,255,51,.33); background: rgba(3,10,7,.48); }
.order-line { display: flex; justify-content: space-between; gap: 20px; padding: 10px 0; border-bottom: 1px solid rgba(216,255,51,.12); }
.order-line span { color: var(--muted); font: 9px var(--mono); letter-spacing: .08em; }
.order-line strong { color: var(--paper); font: 11px var(--mono); text-align: right; overflow-wrap: anywhere; }
.order-line:first-child strong { color: var(--lime); font-size: 14px; }
.order-confirm-copy { margin: 19px 0 16px; color: var(--muted); font: 10px var(--mono); line-height: 1.6; }
.success-whatsapp, .success-email { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px; font: 10px var(--mono); letter-spacing: .06em; }
.success-whatsapp { background: var(--lime); color: var(--ink); }
.success-email { margin-top: 8px; border: 1px solid rgba(216,255,51,.35); color: var(--lime); }
.success-actions { display: flex; justify-content: space-between; gap: 20px; margin-top: 25px; }
.success-actions a, .success-actions button { padding: 0; border: 0; background: transparent; color: var(--muted); cursor: pointer; font: 10px var(--mono); }
.success-actions button { color: var(--success-accent, var(--lime)); }
.success-actions a:hover, .success-actions button:hover { color: var(--paper); }
.success-footer { display: flex; justify-content: space-between; gap: 20px; color: #6f7e73; font: 9px var(--mono); letter-spacing: .1em; }
@media (max-width: 600px) {
  .success-shell { width: min(100% - 28px, 940px); padding-top: 18px; }
  .success-code { font-size: 8px; }
  .success-card { margin: 70px 0; padding: 45px 24px 28px; }
  .success-card::before { inset: 10px; }
  .success-icon { width: 52px; height: 52px; font-size: 26px; }
  .success-message { font-size: 14px; }
  .success-order { padding: 15px; }
  .order-line { gap: 10px; }
  .success-footer { flex-wrap: wrap; line-height: 1.5; }
  .success-footer span:first-child { width: 100%; }
}