/* ==========================================
   LOGIN.CSS
   PART 1
========================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Inter',sans-serif;
}

body{

background:#050816;

color:#fff;

overflow:hidden;

display:flex;

justify-content:center;

align-items:center;

min-height:100vh;

}

/* ===========================
Background Glow
=========================== */

.glow{

position:fixed;

width:450px;

height:450px;

border-radius:50%;

filter:blur(150px);

z-index:-1;

}

.glow1{

top:-120px;

left:-120px;

background:rgba(37,99,235,.28);

}

.glow2{

bottom:-120px;

right:-120px;

background:rgba(6,182,212,.22);

}

/* ===========================
Container
=========================== */

.login-container{

width:1150px;

max-width:95%;

display:grid;

grid-template-columns:1.1fr .9fr;

background:rgba(17,24,39,.90);

border:1px solid rgba(255,255,255,.08);

border-radius:28px;

backdrop-filter:blur(22px);

overflow:hidden;

box-shadow:0 30px 70px rgba(0,0,0,.35);

}

/* ===========================
Left Panel
=========================== */

.login-left{

padding:60px;

display:flex;

flex-direction:column;

justify-content:center;

}

.tag{

display:inline-block;

width:max-content;

padding:10px 18px;

border-radius:30px;

background:rgba(37,99,235,.15);

border:1px solid rgba(37,99,235,.35);

color:#60A5FA;

font-weight:700;

margin-bottom:25px;

}

.login-left h1{

font-size:54px;

line-height:1.2;

margin-bottom:20px;

font-weight:800;

}

.login-left h1 span{

color:#38BDF8;

}

.login-left p{

font-size:17px;

line-height:1.9;

color:#94A3B8;

margin-bottom:35px;

}

/* ===========================
Features
=========================== */

.features{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:16px;

}

.feature{

padding:16px;

background:#111827;

border:1px solid rgba(255,255,255,.06);

border-radius:14px;

font-weight:600;

transition:.3s;

}

.feature:hover{

transform:translateY(-4px);

border-color:#2563EB;

}

/* ==========================================
   LOGIN.CSS
   PART 2
========================================== */

/* ===========================
Login Card
=========================== */

.login-card{

padding:60px 50px;

display:flex;

flex-direction:column;

justify-content:center;

background:#0F172A;

}

.login-card h2{

font-size:34px;

font-weight:800;

margin-bottom:10px;

}

.login-card p{

color:#94A3B8;

margin-bottom:30px;

line-height:1.7;

}

/* ===========================
Input Group
=========================== */

.input-group{

margin-bottom:22px;

}

.input-group label{

display:block;

margin-bottom:8px;

font-weight:600;

color:#CBD5E1;

}

.input-group input{

width:100%;

padding:15px 18px;

background:#111827;

border:1px solid rgba(255,255,255,.08);

border-radius:14px;

color:white;

font-size:15px;

outline:none;

transition:.3s;

}

.input-group input:focus{

border-color:#2563EB;

box-shadow:0 0 0 4px rgba(37,99,235,.15);

}

/* ===========================
Password Box
=========================== */

.password-box{

position:relative;

}

.password-box input{

padding-right:55px;

}

.show-btn{

position:absolute;

right:12px;

top:50%;

transform:translateY(-50%);

background:none;

border:none;

font-size:18px;

cursor:pointer;

color:#94A3B8;

}

/* ===========================
Options
=========================== */

.login-options{

display:flex;

justify-content:space-between;

align-items:center;

margin:15px 0 25px;

font-size:14px;

}

.login-options a{

color:#38BDF8;

text-decoration:none;

font-weight:600;

}

.login-options a:hover{

text-decoration:underline;

}

/* ===========================
Login Button
=========================== */

.login-btn{

width:100%;

padding:16px;

border:none;

border-radius:14px;

background:linear-gradient(135deg,#2563EB,#06B6D4);

color:white;

font-size:16px;

font-weight:700;

cursor:pointer;

transition:.3s;

box-shadow:0 15px 35px rgba(37,99,235,.30);

}

.login-btn:hover{

transform:translateY(-3px);

box-shadow:0 20px 45px rgba(37,99,235,.45);

}

/* ==========================================
   LOGIN.CSS
   PART 3 (FINAL)
========================================== */

/* ===========================
Divider
=========================== */

.divider{

display:flex;
align-items:center;
justify-content:center;

margin:25px 0;

position:relative;

}

.divider::before,
.divider::after{

content:"";

flex:1;

height:1px;

background:rgba(255,255,255,.08);

}

.divider span{

padding:0 15px;

color:#94A3B8;

font-size:14px;

}

/* ===========================
Google Button
=========================== */

.google-btn{

width:100%;

display:flex;

align-items:center;

justify-content:center;

gap:12px;

padding:15px;

border-radius:14px;

background:#111827;

border:1px solid rgba(255,255,255,.08);

color:#fff;

font-weight:600;

cursor:pointer;

transition:.3s;

}

.google-btn:hover{

background:#1E293B;

border-color:#2563EB;

}

/* ===========================
Signup Text
=========================== */

.signup-text{

text-align:center;

margin-top:25px;

color:#94A3B8;

}

.signup-text a{

color:#38BDF8;

font-weight:700;

text-decoration:none;

}

.signup-text a:hover{

text-decoration:underline;

}

/* ===========================
Footer
=========================== */

.login-footer{

margin-top:35px;

text-align:center;

}

.login-footer p{

font-weight:700;

color:#fff;

margin-bottom:8px;

}

.login-footer span{

font-size:14px;

color:#94A3B8;

}

/* ===========================
Responsive
=========================== */

@media(max-width:900px){

.login-container{

grid-template-columns:1fr;

}

.login-left{

display:none;

}

.login-card{

padding:40px 30px;

}

}

@media(max-width:500px){

body{

padding:15px;

}

.login-card{

padding:30px 20px;

}

.login-card h2{

font-size:28px;

}

.login-btn,
.google-btn{

font-size:15px;

padding:14px;

}

.input-group input{

font-size:14px;

}

}