:root { --primary:#6a11cb; --accent:#e63946; --bg:#ffffff; }
*{box-sizing:border-box;margin:0;padding:0}

body{
  font-family:"Poppins",sans-serif;
  background:linear-gradient(135deg,var(--primary),var(--accent));
  min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:1rem;
}

.container{
  display:flex;background:var(--bg);border-radius:20px;overflow:hidden;max-width:900px;width:100%;
  box-shadow:0 8px 25px rgba(0,0,0,.2);
}

.logo-section{flex:1;background:#fff;display:flex;justify-content:center;align-items:center;min-height:300px;padding:20px}
.logo-section img{max-width:100%;height:auto}

.login-card{flex:1.3;padding:40px;display:flex;flex-direction:column;justify-content:center;color:#333;background:var(--bg)}
.title{text-align:center;margin-bottom:20px;font-weight:800;font-size:clamp(1.6rem,2.5vw,2.2rem);color:var(--primary);position:relative}
.title::after{content:"";display:block;width:80px;height:3px;background:var(--accent);margin:10px auto 0;border-radius:5px}

form h3{margin-bottom:15px;font-weight:bold;font-size:1.2rem;color:var(--primary)}
.input-group{
  display:flex;align-items:center;margin-bottom:15px;background:rgba(106,17,203,.05);border-radius:10px;
  padding:12px;border:1px solid rgba(106,17,203,.2);transition:all .3s ease
}
.input-group:focus-within{border-color:var(--accent);box-shadow:0 0 8px rgba(230,57,70,.4)}
.input-group .icon{margin-right:10px;font-size:1.2rem;color:var(--primary)}
.input-group input{border:none;outline:none;flex:1;background:none;font-size:1em;color:#333}
.input-group input::placeholder{color:#777}

.login-btn{
  background:var(--accent);border:none;color:#fff;padding:14px;border-radius:10px;cursor:pointer;font-size:1em;font-weight:bold;width:100%;
  margin-top:10px;transition:transform .2s ease, box-shadow .2s ease
}
.login-btn:hover{transform:translateY(-2px);box-shadow:0 5px 15px rgba(230,57,70,.5)}

.premium-section{
  margin-top:20px;text-align:center;font-size:1rem;color:var(--primary);background:rgba(106,17,203,.08);
  border-left:5px solid var(--accent);padding:12px;border-radius:10px;font-weight:500
}
.premium-section strong{color:var(--accent)}

footer{margin-top:20px;text-align:center;font-size:.95em;color:#fff}
.social-links{margin-top:10px}
.social-links a{margin:0 8px;font-size:1.5em;color:#fff;transition:color .3s}
.social-links a:hover{color:var(--accent)}
.error{margin-top:10px;color:#e63946;font-size:.95rem;min-height:1.2em}

@media (max-width:768px){
  .container{flex-direction:column}
  .logo-section{min-height:200px}
  .login-card{padding:25px}
}