/* RESET */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}

body{
font-family:Inter,Arial;
background:#f6f8fb;
display:flex;
align-items:center;
justify-content:center;
min-height:100vh;
color:#0f172a;
}

/* CONTAINER */
.auth-container{
width:100%;
display:flex;
align-items:center;
justify-content:center;
padding:40px 20px;
}

/* CARD */
.auth-card{
width:100%;
max-width:420px;
background:#fff;
padding:36px 36px 30px;
border-radius:18px;
box-shadow:0 10px 30px rgba(0,0,0,.08);
border:1px solid #eef0f4;
}

/* LOGO */
.auth-logo{
display:flex;
align-items:center;
gap:12px;
margin-bottom:25px;
}

.auth-logo-icon{
width:44px;
height:44px;
background:#16a34a;
color:#fff;
border-radius:12px;
display:flex;
align-items:center;
justify-content:center;
font-weight:800;
font-size:18px;
}

.auth-logo-title{
font-weight:800;
font-size:16px;
}

.auth-logo-subtitle{
font-size:12px;
color:#64748b;
}

/* TITLE */
.auth-title{
font-size:26px;
font-weight:800;
margin-bottom:6px;
}

.auth-subtitle{
color:#64748b;
font-size:14px;
margin-bottom:22px;
}

/* ERROR */
.auth-error{
background:#fee2e2;
color:#991b1b;
padding:12px;
border-radius:10px;
font-size:14px;
margin-bottom:18px;
}

/* FORM */
.auth-form{margin-top:10px}

.form-row{
margin-bottom:18px;
display:flex;
flex-direction:column;
}

.form-row label{
font-size:13px;
font-weight:600;
margin-bottom:6px;
color:#334155;
}

.input{
padding:14px;
border-radius:12px;
border:1px solid #dbe2ea;
font-size:15px;
outline:none;
transition:.2s;
width:100%;
}

.input:focus{
border-color:#16a34a;
box-shadow:0 0 0 3px rgba(22,163,74,.15);
}

/* BUTTON */
.btn{
padding:14px;
border-radius:12px;
border:none;
font-weight:700;
cursor:pointer;
font-size:16px;
width:100%;
}

.btn-primary{
background:#16a34a;
color:#fff;
transition:.2s;
}

.btn-primary:hover{
background:#15803d;
}

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

.auth-footer a{
color:#16a34a;
font-weight:600;
text-decoration:none;
}

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


/* ================= MOBILE FIX ================= */
@media(max-width:600px){

body{
align-items:flex-start;
padding-top:40px;
}

.auth-container{
padding:20px 14px;
}

.auth-card{
max-width:100%;
padding:26px 18px;
border-radius:14px;
}

.auth-title{
font-size:22px;
}

.input{
font-size:16px; /* prevents iphone zoom */
padding:15px;
}

.btn{
padding:15px;
font-size:16px;
}

}

/* EXTRA SMALL PHONES */
@media(max-width:380px){

.auth-card{
padding:22px 14px;
}

.auth-title{
font-size:20px;
}

.auth-logo-title{
font-size:14px;
}

}