.registration-shell { min-height: 100svh; }
.registration-panel { width: min(100%, 34rem); }
.registration-status { margin: .9rem 0; padding: .65rem .75rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); color: var(--muted); font-size: .72rem; line-height: 1.45; }
.registration-status.is-ready { border-color: #b7d8d2; background: #eef7f4; color: var(--teal-dark); }
.registration-status.is-error { border-color: #e5b6ab; background: #fcf1ed; color: var(--danger); }
.invite-summary { display: flex; align-items: center; gap: .65rem; margin: .85rem 0 1rem; padding: .65rem .75rem; border: 1px solid #b7d8d2; border-radius: var(--radius); background: #eef7f4; }
.invite-summary-icon { display: grid; flex: 0 0 auto; width: 1.8rem; height: 1.8rem; place-items: center; border-radius: 50%; background: var(--teal); color: #fff; font-weight: 800; }
.invite-summary div { display: grid; min-width: 0; gap: .1rem; }
.invite-summary strong { font-size: .76rem; }
.invite-summary span, .invite-summary small { color: var(--muted); font-size: .64rem; line-height: 1.35; overflow-wrap: anywhere; }
.registration-form { gap: .7rem; }
.registration-form label small { display: block; margin-top: .25rem; color: var(--muted); font-size: .6rem; line-height: 1.35; }
.registration-form input:disabled { cursor: not-allowed; opacity: .72; }
.registration-success { padding: .4rem 0; text-align: center; }
.success-mark { display: grid; width: 2.5rem; height: 2.5rem; margin: 0 auto .7rem; place-items: center; border-radius: 50%; background: var(--teal); color: #fff; font-size: 1.25rem; font-weight: 800; }
.registration-success h2 { margin: 0; font-size: 1.35rem; }
.registration-success .muted { margin: .5rem auto 1rem; }
.registration-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: .45rem; }
.registration-actions .button { flex: 1 1 9rem; }
.registration-footer { margin: 1rem 0 0; text-align: center; font-size: .68rem; }
.registration-footer a { color: var(--teal-dark); font-weight: 700; }

@media (max-width: 580px) {
  .registration-panel { width: 100%; }
  .registration-actions { align-items: stretch; flex-direction: column; }
  .registration-actions .button { width: 100%; }
}