*{margin:0;padding:0;box-sizing:border-box}

body{
font-family: Inter, system-ui, Arial;
background:linear-gradient(180deg,#f8fafc,#eef2f7);
height:100vh;
display:flex;
align-items:center;
justify-content:center;

}

/* WRAP */
.auth-wrap{
width:100%;
display:flex;
align-items:center;
justify-content:center;
}

/* CARD */
.auth-card{
width:420px;
background:#ffffff;
border-radius:18px;
padding:38px;
box-shadow:
0 10px 30px rgba(0,0,0,.08),
0 1px 2px rgba(0,0,0,.04);
border:1px solid #eef0f4;
}

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

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

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

.logo-sub{
font-size:12px;
color:#64748b;
margin-top:2px;
}

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

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

/* FORM */
.form-row{
margin-bottom:18px;
}

.form-row label{
font-size:13px;
font-weight:600;
margin-bottom:6px;
display:block;
}

.input {
    width: 100%;
    padding: 13px 14px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    font-size: 14px;
    outline: none;
    transition: .2s;
    background: #f9fafb;
}

.input:focus{
border:1px solid #16a34a;
background:#fff;
box-shadow:0 0 0 3px rgba(22,163,74,.12);
}

/* FORGOT */
.forgot{
text-align:right;
margin-top:6px;
margin-bottom:10px;
}

.forgot a{
font-size:13px;
text-decoration:none;
color:#16a34a;
font-weight:600;
}

/* BUTTON */
.btn{
width:100%;
background:#16a34a;
border:none;
color:#fff;
padding:14px;
border-radius:10px;
font-weight:700;
font-size:15px;
cursor:pointer;
margin-top:8px;
transition:.2s;
}

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

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

/* FOOT */
.auth-bottom{
text-align:center;
margin-top:18px;
font-size:14px;
color:#64748b;
}

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

/* MOBILE */
@media(max-width:480px){
.auth-card{
width:92%;
padding:28px;
}
}