.auth-shell { display: grid; min-height: 100dvh; align-content: center; gap: var(--space-xl); padding: var(--space-xl) 0; }
.auth-brand { width: fit-content; }
.auth-card { display: grid; gap: var(--space-md); max-width: 30rem; padding: var(--space-xl); border: 1px solid var(--glass-border); border-radius: var(--radius-xl); background: var(--glass-2); box-shadow: var(--shadow-modal); -webkit-backdrop-filter: var(--glass-2-blur); backdrop-filter: var(--glass-2-blur); }
.auth-card > p:not(.eyebrow) { color: var(--on-surface-variant); font: var(--body-lg); }
.auth-form { display: grid; gap: var(--space-sm); margin-top: var(--space-sm); }
.auth-form label { font: var(--label-md); text-transform: uppercase; letter-spacing: var(--letter-spacing-label); }
.auth-form input { width: 100%; min-height: 3rem; border: 0; border-bottom: 1px solid var(--outline); border-radius: var(--radius-default); background: color-mix(in srgb, var(--surface-container-low) 24%, transparent); color: var(--on-surface); padding: 0.75rem; }
.auth-form input:focus { border-color: var(--on-surface); outline: 0; }
.code-input { font: var(--headline-lg-mobile); letter-spacing: 0.35em; text-align: center; }
.handle-field { display: flex; align-items: center; border-bottom: 1px solid var(--outline); border-radius: var(--radius-default); background: color-mix(in srgb, var(--surface-container-low) 24%, transparent); padding-left: 0.75rem; color: var(--on-surface-variant); }
.handle-field input { border: 0; background: transparent; }
.auth-form select { width: 100%; min-height: 3rem; border: 0; border-bottom: 1px solid var(--outline); border-radius: var(--radius-default); background: color-mix(in srgb, var(--surface-container-low) 24%, transparent); color: var(--on-surface); padding: 0.75rem; appearance: none; -webkit-appearance: none; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23747676" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>'); background-repeat: no-repeat; background-position: right 0.75rem center; padding-right: 2.5rem; cursor: pointer; }
.auth-form select:focus { border-color: var(--on-surface); outline: 0; }