/**
 * HomeOS AI — auth.css
 * Strony logowania i rejestracji
 * ============================================================
 */

.auth-page {
    display:         flex;
    align-items:     center;
    justify-content: center;
    min-height:      100vh;
    width:           100%;
    padding:         1.5rem;
    background:      var(--md-background);
    background-image: radial-gradient(
        ellipse at 50% 0%,
        rgba(103, 80, 164, .15) 0%,
        transparent 60%
    );
}

.auth-card {
    width:         100%;
    max-width:     440px;
    background:    var(--md-surface-1);
    border-radius: var(--md-shape-extra-large);
    padding:       2.5rem 2rem;
    box-shadow:    var(--md-elevation-2);
    animation:     fadeInUp var(--md-motion-medium3) var(--md-easing-decelerate) both;
}

/* ---- Logo ---- */
.auth-card__logo {
    display:         flex;
    align-items:     center;
    gap:             .75rem;
    justify-content: center;
    margin-bottom:   2rem;
}

.auth-card__logo-icon {
    width:         48px;
    height:        48px;
    border-radius: var(--md-shape-medium);
    background:    var(--md-primary);
    color:         var(--md-on-primary);
    display:       flex;
    align-items:   center;
    justify-content: center;
}
.auth-card__logo-icon .material-symbols-rounded { font-size: 28px; }

.auth-card__logo-text {
    display:     flex;
    align-items: baseline;
    gap:         .25rem;
}
.auth-card__logo-name {
    font-size:   var(--md-headline-small);
    font-weight: 500;
    color:       var(--md-on-surface);
}
.auth-card__logo-badge {
    font-size:     var(--md-label-small);
    font-weight:   500;
    background:    var(--md-primary);
    color:         var(--md-on-primary);
    padding:       .15em .5em;
    border-radius: var(--md-shape-full);
}

/* ---- Tytuł ---- */
.auth-card__title {
    font-size:    var(--md-headline-small);
    font-weight:  400;
    text-align:   center;
    color:        var(--md-on-surface);
    margin-bottom: .5rem;
}
.auth-card__subtitle {
    font-size:     var(--md-body-medium);
    text-align:    center;
    color:         var(--md-on-surface-variant);
    margin-bottom: 1.75rem;
}

/* ---- Form ---- */
.auth-form {
    display:        flex;
    flex-direction: column;
    gap:            1.25rem;
}

.auth-form .btn--full { margin-top: .25rem; }

/* ---- Footer ---- */
.auth-card__footer-text {
    text-align:  center;
    font-size:   var(--md-body-medium);
    color:       var(--md-on-surface-variant);
    margin-top:  1.5rem;
}
.auth-card__footer-link {
    color:       var(--md-primary);
    font-weight: 500;
}

/* ---- Alert ---- */
.auth-card .alert { margin-bottom: 1rem; }

/* ---- Responsive ---- */
@media (max-width: 480px) {
    .auth-card {
        padding:       1.75rem 1.25rem;
        border-radius: var(--md-shape-extra-large);
    }
}