html, body { margin: 0; min-height: 100%; }
body { background: var(--ekyc-surface, #f5f5f4); color: var(--ekyc-on-surface, #1d1f20); font-family: Barlow, system-ui, sans-serif; }
#app { min-height: 100vh; display: grid; place-items: center; padding: 16px; box-sizing: border-box; }
.gw-card { max-width: 420px; width: 100%; text-align: center; }
.gw-card h1 { font-size: 1.375rem; font-weight: 600; margin: 16px 0 8px; }
.gw-card p { margin: 0 0 24px; line-height: 1.5; opacity: 0.8; }
.gw-button { min-height: 48px; padding: 0 24px; border: 0; border-radius: 8px; font: inherit; font-weight: 600;
  background: var(--ekyc-primary, #1d1f20); color: var(--ekyc-on-primary, #fff); cursor: pointer; }
.gw-button:focus-visible { outline: 3px solid var(--ekyc-primary, #1d1f20); outline-offset: 3px; }
.gw-spinner { width: 32px; height: 32px; margin: 0 auto; border-radius: 50%;
  border: 3px solid rgba(0, 0, 0, 0.12); border-top-color: var(--ekyc-primary, #1d1f20); animation: gw-spin 0.9s linear infinite; }
.gw-handoff { max-width: 600px; display: flex; gap: 32px; align-items: center; text-align: left; }
.gw-handoff h1 { margin-top: 0; }
.gw-handoff ol { margin: 0 0 16px; padding-left: 20px; line-height: 1.9; }
.gw-handoff .gw-note { margin: 0; font-size: 0.875rem; opacity: 0.65; }
.gw-qr { flex: none; width: 220px; height: 220px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
@media (max-width: 560px) {
  .gw-handoff { flex-direction: column; text-align: center; gap: 16px; }
  .gw-handoff ol { display: inline-block; text-align: left; }
}
@keyframes gw-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .gw-spinner { animation: none; } }