/* =========================
   AUTH PAGE
========================= */

.auth-page{
min-height:100vh;
display:flex;
align-items:center;
justify-content:center;
padding:24px;
background:#f8fafc
}

/* =========================
   CARD
========================= */

.auth-card{
width:100%;
max-width:460px;
background:#fff;
border:1px solid #e5e7eb;
border-radius:20px;
padding:32px;
box-shadow:
0 10px 30px rgba(0,0,0,.04)
}

.auth-logo{
text-align:center;
font-size:32px;
font-weight:800;
margin-bottom:10px
}

.auth-subtitle{
text-align:center;
color:#64748b;
margin-bottom:28px
}

/* =========================
   FORM
========================= */

.auth-form{
display:flex;
flex-direction:column;
gap:16px
}

.auth-form button{
width:100%
}

/* =========================
   MESSAGE
========================= */

.message{
display:none;
margin-top:16px;
padding:14px;
border-radius:12px;
font-size:14px
}

.message.error{
display:block;
background:#fee2e2;
color:#991b1b;
border:1px solid #fecaca
}

.message.success{
display:block;
background:#dcfce7;
color:#166534;
border:1px solid #bbf7d0
}

/* =========================
   FOOTER
========================= */

.auth-footer{
margin-top:22px;
text-align:center;
font-size:14px;
color:#64748b
}

.auth-footer a{
font-weight:600;
color:#111827
}

.auth-footer a:hover{
text-decoration:underline
}

/* =========================
   INFO BOX
========================= */

.auth-info{
padding:12px;
border-radius:12px;
background:#f8fafc;
border:1px solid #e5e7eb;
font-size:14px;
color:#64748b
}

/* =========================
   LOADING
========================= */

.btn-loading{
opacity:.7;
pointer-events:none
}

/* =========================
   DARK MODE
========================= */

@media(prefers-color-scheme:dark){

.auth-page{
background:#020617
}

.auth-card{
background:#0f172a;
border-color:#1e293b
}

.auth-logo{
color:#fff
}

.auth-subtitle,
.auth-footer,
.auth-info{
color:#94a3b8
}

.auth-info{
background:#111827;
border-color:#1f2937
}

input,
textarea{
background:#111827;
border-color:#1f2937;
color:#fff
}

.auth-footer a{
color:#fff
}

}

/* =========================
   MOBILE
========================= */

@media(max-width:480px){

.auth-page{
padding:16px
}

.auth-card{
padding:24px
}

.auth-logo{
font-size:28px
}

}