.invitation-shell { min-height: 100dvh; display: flex; flex-direction: column; }
.invitation-main { flex: 1; display: grid; align-items: center; width: min(100%, 720px); margin: 48px auto; }
.invitation-main .login-panel { width: 100%; min-width: 0; }
.invitation-main h1 { font-size: clamp(28px, 5vw, 40px); overflow-wrap: anywhere; }
.invitation-main [hidden] { display: none !important; }
.invitation-main form { display: grid; gap: 16px; }
.invitation-main form > p { margin: 0; }
.invite-feedback:empty { display: none; }
.invite-passwords { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.invite-passwords label { display: grid; gap: 8px; min-width: 0; }
.invite-passwords input { min-width: 0; width: 100%; }
.invite-feedback { line-height: 1.5; overflow-wrap: anywhere; }
.invite-feedback.is-error { color: #ffaaa0; }
.invite-hint { color: var(--muted, #bcc4d2); font-size: .9rem; line-height: 1.5; margin: 0; }
#inviteIdentity { overflow-wrap: anywhere; }
.invitation-main .btn { width: fit-content; max-width: 100%; }
@media (max-width: 540px) { .invitation-main { margin: 28px auto; } .invite-passwords { grid-template-columns: 1fr; } .invitation-shell .topbar { height: auto; min-height: 68px; flex-wrap: wrap; gap: 12px; padding: 12px; } }