.app-shell {
    position: relative;
    z-index: 2;
}

.mobile-topbar {
    position: sticky;
    top: 0;
    z-index: 1040;
    backdrop-filter: blur(2px);
    background: rgba(8, 9, 12, 0.85);
    border-bottom: 1px solid var(--border-soft);
}

.register-shell {
    position: relative;
    z-index: 2;
}

.eyebrow {
    font-size: .8rem;
    color: var(--aged-gold);
}

.panel-title {
    color: #f4ead5;
}

.panel-subtitle {
    color: rgba(230, 223, 210, .8);
}

.sub-panel {
    border-radius: .95rem;
    border: 1px solid rgba(194, 164, 109, 0.22);
    background: rgba(8, 9, 12, 0.45);
    padding: 1rem;
}

.form-label {
    color: rgba(230, 223, 210, .9);
    font-weight: 600;
    margin-bottom: .4rem;
}

.form-control.is-invalid {
    border-color: rgba(211, 107, 129, 0.85);
    box-shadow: 0 0 0 0.22rem rgba(211, 107, 129, 0.2);
}

.form-control.is-valid {
    border-color: rgba(98, 193, 168, 0.75);
    box-shadow: 0 0 0 0.22rem rgba(98, 193, 168, 0.12);
}

.field-error {
    min-height: 1.1rem;
    margin-top: .38rem;
    font-size: .78rem;
    color: var(--error);
}

.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: .55;
    cursor: not-allowed;
}

.btn-loader {
    width: 1rem;
    height: 1rem;
    margin-left: .5rem;
    border: 2px solid rgba(245, 240, 228, .25);
    border-top-color: rgba(245, 240, 228, .95);
    border-radius: 50%;
    display: inline-block;
    animation: spin .8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.ui-feedback {
    border-radius: .8rem;
    border: 1px solid transparent;
    padding: .65rem .8rem;
    margin-bottom: 1rem;
    font-size: .9rem;
}

.ui-feedback.state-error {
    color: #ffd6df;
    border-color: rgba(211, 107, 129, 0.45);
    background: rgba(75, 30, 42, 0.45);
}

.ui-feedback.state-success {
    color: #ddfff6;
    border-color: rgba(98, 193, 168, 0.5);
    background: rgba(24, 50, 45, 0.45);
}

.ui-feedback.state-loading {
    color: #f5e9d0;
    border-color: rgba(194, 164, 109, 0.5);
    background: rgba(194, 164, 109, 0.12);
}

/* Pulsante mostra/nascondi password, attaccato al campo. */
.password-toggle {
    border: 1px solid rgba(194, 164, 109, 0.3);
    border-left: 0;
    color: var(--aged-gold);
    background: rgba(7, 9, 12, 0.78);
}

.password-toggle:hover,
.password-toggle:focus-visible {
    color: #f5e9d0;
    background: rgba(194, 164, 109, 0.12);
}

.verification-code {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.3em;
}

.helper-text {
    color: rgba(230, 223, 210, .75);
    font-size: .85rem;
}

.helper-link {
    color: var(--aged-gold);
    text-decoration: underline;
}

.helper-link:hover {
    color: #f5e9d0;
}

@media (min-width: 768px) {
    .register-panel { padding: 1.5rem; }
    .sub-panel { padding: 1.2rem; }
}

/* Campi e pulsanti un po' piu' grandi che nel gioco: colori e stati
   arrivano da theme.css. */
.register-panel .form-control {
    border-radius: var(--radius-md);
    padding: .7rem .85rem;
}

.register-panel .btn {
    min-height: 2.75rem;
}

.register-panel {
    max-width: 620px;
    padding: 1.1rem;
}