.registration-card { width: min(480px, calc(100% - 32px)); margin: 32px auto; }
.registration-card form { display: grid; gap: 16px; }
.registration-card label { display: grid; gap: 8px; font-size: 14px; color: var(--tx); }
.registration-card input { font-size: 16px; min-width: 0; width: 100%; caret-color: var(--pri); }
.registration-card input::placeholder { color: var(--tx2); opacity: 1; }
.registration-card :is(input, button, a, summary):focus-visible { outline: 2px solid var(--pri); outline-offset: 3px; }
.registration-card :is(a, summary) { text-underline-offset: 4px; }
.registration-card .registration-code-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: stretch; }
.registration-card .registration-code-row .field { min-width: 0; margin: 0; }
.registration-card .registration-code-row button { min-width: 118px; min-height: 44px; }
.registration-card .registration-hint { color: var(--tx2); font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; margin: 0; }
.registration-card .registration-extra { border-top: 1px solid var(--line); padding-top: 12px; }
.registration-card .registration-extra summary { cursor: pointer; color: var(--tx2); padding: 8px 0; }
.registration-card .registration-extra label { margin-top: 12px; }
.registration-card .registration-submit { width: 100%; min-height: 46px; }
.registration-card .registration-login { margin: 20px 0 0; text-align: center; }
.registration-card :is(.live-error, .registration-hint):empty { display: none; }
.registration-card .live-error { overflow-wrap: anywhere; margin: 0; }
.registration-card button:disabled { cursor: not-allowed; opacity: .65; }
@media (max-width: 520px) { .registration-card { padding: 24px 20px; margin: 20px auto; } .registration-card h1 { font-size: 28px; } }