:root {
  --brand: #6C5CE7;
  --brand-dark: #4a148c;
  --bg: #f4f4f7;
  --ink: #2d2d3a;
  --muted: #8a8a99;
  --line: #ececf1;
  --radius: 16px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

body {
  min-height: 100dvh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 14px calc(24px + env(safe-area-inset-bottom));
}

.card {
  width: 100%;
  max-width: 460px;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 6px 30px rgba(20, 20, 40, .08);
  overflow: hidden;
}

.brand {
  background: var(--brand);
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
  padding: 22px 26px;
  display: flex;
  align-items: center;
  min-height: 64px;
}
.brand__name { color: #fff; font-size: 20px; font-weight: 800; letter-spacing: .4px; }
.brand__logo { max-height: 34px; max-width: 190px; display: block; }

.summary { padding: 22px 26px 4px; text-align: center; }
.summary__label { font-size: 13px; color: var(--muted); }
.summary__amount { font-size: 30px; font-weight: 800; color: var(--ink); margin-top: 2px; }

#sumup-card { padding: 14px 22px 6px; min-height: 40px; }

.state { padding: 34px 26px; text-align: center; color: var(--muted); }
.state p { margin: 10px 0 0; font-size: 15px; }
.state .muted { font-size: 13px; color: var(--muted); }
.state__icon {
  width: 52px; height: 52px; border-radius: 50%; margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; font-weight: 800; color: #fff;
}
.state__icon--error { background: #e5484d; }

.spinner {
  width: 40px; height: 40px; margin: 0 auto;
  border: 4px solid var(--line);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.foot {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 16px 26px 24px;
  border-top: 1px solid var(--line);
  color: var(--muted); font-size: 12px; line-height: 18px;
}
.foot .lock { font-size: 14px; }

/* Success / fail landing pages reuse .card + these */
.result { padding: 40px 28px; text-align: center; }
.result__icon {
  width: 68px; height: 68px; border-radius: 50%; margin: 0 auto 18px;
  display: flex; align-items: center; justify-content: center; font-size: 38px; color: #fff;
}
.result__icon--ok { background: #30a46c; }
.result__icon--ko { background: #e5484d; }
.result h1 { font-size: 22px; margin: 0 0 8px; color: var(--ink); }
.result p { font-size: 15px; color: var(--muted); margin: 0 auto; max-width: 320px; line-height: 22px; }