/* ===========================
   LIFFY LOGIN PAGE
=========================== */

.auth-body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 25px;
    background:
        radial-gradient(circle at top left, rgba(109, 60, 255, 0.18), transparent 35%),
        radial-gradient(circle at bottom right, rgba(255, 45, 117, 0.18), transparent 35%),
        #f6f7ff;
}

.auth-container {
    width: 100%;
    max-width: 430px;
    text-align: center;
}

.auth-logo {
    font-family: "Outfit", sans-serif;
    font-size: 42px;
    font-weight: 800;
    color: #6d3cff;
    margin-bottom: 20px;
}

.auth-logo span {
    color: #ff2d75;
}

.auth-container h1 {
    font-size: 32px;
    color: #11111b;
    margin-bottom: 10px;
}

.auth-subtitle {
    color: #77778a;
    margin-bottom: 28px;
    line-height: 1.6;
}

.auth-card {
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(18px);
    border-radius: 28px;
    padding: 35px 28px;
    box-shadow: 0 18px 45px rgba(70,40,150,.15);
}

.auth-card input {
    width: 100%;
    height: 56px;
    margin-bottom: 18px;
    padding: 0 18px;
    border: none;
    outline: none;
    border-radius: 16px;
    background: #f5f5fc;
    font-size: 15px;
    transition: .25s;
}

.auth-card input:focus {
    background: white;
    box-shadow: 0 0 0 3px rgba(109,60,255,.15);
}

.auth-btn {
    width: 100%;
    height: 56px;
    border: none;
    border-radius: 16px;
    background: linear-gradient(135deg,#6d3cff,#ff2d75);
    color: white;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
    transition: .25s;
}

.auth-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(109,60,255,.25);
}

.forgot-link {
    display: block;
    margin-top: 18px;
    color: #6d3cff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
}

.divider {
    display: flex;
    align-items: center;
    margin: 28px 0;
}

.divider::before,
.divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e7e7f2;
}

.divider span {
    padding: 0 12px;
    color: #888;
    font-size: 14px;
}

.register-text {
    color: #666;
    font-size: 15px;
}

.register-text a {
    color: #ff2d75;
    text-decoration: none;
    font-weight: 700;
}

@media (max-width:600px) {

    .auth-card {
        padding: 28px 20px;
    }

    .auth-container h1 {
        font-size: 28px;
    }

    .auth-logo {
        font-size: 38px;
    }

}

/* ===== PREMIUM LOGIN UPGRADE ===== */

.auth-card{
position:relative;
overflow:hidden;
}

.auth-card::before{
content:"";
position:absolute;
top:-120px;
right:-120px;
width:220px;
height:220px;
background:rgba(0,102,255,.08);
border-radius:50%;
}

.auth-card::after{
content:"";
position:absolute;
bottom:-100px;
left:-100px;
width:180px;
height:180px;
background:rgba(255,45,117,.08);
border-radius:50%;
}

.login-icon{
width:80px;
height:80px;
margin:0 auto 18px;
display:flex;
justify-content:center;
align-items:center;
font-size:38px;
background:linear-gradient(135deg,#0066ff,#4aa3ff);
color:white;
border-radius:22px;
box-shadow:0 12px 30px rgba(0,102,255,.35);
}

.card-title{
font-size:28px;
font-weight:700;
color:#11111b;
margin-bottom:8px;
}

.card-subtitle{
color:#77778a;
margin-bottom:25px;
}

.input-group{
display:flex;
align-items:center;
background:#f5f7ff;
border-radius:16px;
padding:0 16px;
margin-bottom:18px;
transition:.3s;
}

.input-group:focus-within{
background:white;
box-shadow:0 0 0 3px rgba(0,102,255,.15);
}

.input-icon{
font-size:20px;
margin-right:12px;
}

.input-group input{
margin:0;
padding:0;
height:56px;
background:transparent;
border:none;
box-shadow:none;
}

.input-group input:focus{
background:transparent;
box-shadow:none;
}