.auth-wrapper{
    min-height: calc(100vh - 64px);
    display: grid;
    place-items: center;
    padding: clamp(16px, 3vw, 28px);
}

.auth-card{
    background: var(--p-card);
    width: 100%;
    max-width: 680px;
    border-radius: 20px;
    border: 1px solid var(--p-border);
    box-shadow: 0 18px 38px rgba(61, 43, 36, .12);
    overflow: hidden;
}

.auth-header{
    background: linear-gradient(135deg, var(--p-accent), var(--p-accent-2));
    padding: 18px 20px;
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 12px;
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,.45);
}

.auth-header h1{
    font-family: 'Playfair Display', serif;
    font-size: 1.4rem;
    margin: 0;
}

.brand-circle{
    width:52px; height:52px; border-radius:50%;
    background:#fff; display:grid; place-items:center;
    border:2px solid rgba(255,255,255,.7);
    font-weight: 800; color:#4a342c;
}

.auth-body{ padding: 20px; }

.form-label{ font-size:.82rem; color: var(--p-muted); margin-bottom: .4rem; line-height: 1.2; }
.form-control{
    border-radius: 12px; border:1px solid var(--p-border); height: 42px;
}
.form-control:focus{ border-color: var(--p-primary); box-shadow: var(--ring); }
.input-group > .form-control{ height: 42px; }
.input-group > .btn{ height: 42px; padding: 0 .6rem; border-radius: 0 12px 12px 0; }
.input-group > .form-control{ border-radius: 12px 0 0 12px; }
.input-group > .btn:focus{ box-shadow: var(--ring); }

.remember-me .form-check-input{
    width: 18px; height: 18px; margin-top: 0;
}
.small-link{
    color: var(--p-primary); text-decoration: none; font-weight: 600; font-size:.9rem;
}
.small-link:hover{ text-decoration: underline; }

.btn-primary{
    background: var(--p-primary); border:none; border-radius: 12px;
    font-weight: 700; height: 44px;
    box-shadow: 0 10px 22px rgba(138, 91, 60, .2);
}
.btn-primary:focus{ box-shadow: var(--ring); }

.alert{ border-radius: 12px; padding: 10px 12px; font-size:.9rem; }

.js-password-toggle-btn svg{ width:16px; height:16px; }
.input-group .btn.js-password-toggle-btn{ padding-inline: .5rem; }
.login-links .small-link{ line-height: 1.2; }

.auth-card--spacious .auth-body{ padding: 26px; }
.auth-card--spacious .mb-2{ margin-bottom: 1rem !important; }
.auth-card--spacious .mb-3{ margin-bottom: 1.25rem !important; }
.auth-card--spacious .form-label{ margin-bottom: .45rem; }
.auth-card--spacious .btn-primary{ height: 46px; }

.auth-card--compact .auth-header{ padding: 14px 16px; grid-template-columns: 44px 1fr; }
.auth-card--compact .brand-circle{ width:44px; height:44px; font-size:.9rem; }
.auth-card--compact .auth-body{ padding: 18px; }
.auth-card--compact .form-control{ height: 38px; }
.auth-card--compact .input-group > .form-control{ height: 38px; }
.auth-card--compact .input-group > .btn{ height: 38px; padding: 0 .5rem; }
.auth-card--compact .mb-2{ margin-bottom: .6rem !important; }
.auth-card--compact .mb-3{ margin-bottom: .75rem !important; }
.auth-card--compact .btn-primary{ height: 40px; }
.auth-card--compact .form-label{ margin-bottom: .55rem; }
.auth-card--compact .row.g-2{ row-gap: .85rem; }
.auth-card--compact .small-link{ font-size: .85rem; }

@media (max-width: 420px){
    .auth-header{ grid-template-columns: 40px 1fr; }
    .brand-circle{ width:40px; height:40px; font-size:.9rem; }
}