:root{
  --royal:#007BFF;
  --royal-soft:#4da3ff;
  --navy:#002b54;
  --glass:rgba(255,255,255,0.9);
}

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

body{
  margin:0;
  min-height:100vh;
  font-family:'Poppins',sans-serif;
  background:
    radial-gradient(circle at 20% 20%,#0e5bd9,#041a33),
    radial-gradient(circle at 80% 80%,#0a3f88,#020b18);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  padding:20px;
}

/* ===== BACKGROUND ORBS ===== */
.orb{
  position:absolute;
  border-radius:50%;
  filter:blur(50px);
  opacity:.45;
  animation:orbFloat 12s ease-in-out infinite;
}
.orb.one{
  width:320px;height:320px;
  background:#1b7cff;
  top:-80px;left:-80px;
  animation:orbFloat 15s ease-in-out infinite, orbPulse 8s infinite alternate;
}
.orb.two{
  width:240px;height:240px;
  background:#004caa;
  bottom:-60px;right:-60px;
  animation:orbFloat 18s ease-in-out infinite 3s, orbPulse 10s infinite alternate 1s;
}
.orb.three{
  width:180px;height:180px;
  background:#66b2ff;
  top:40%;left:45%;
  animation:orbFloat 14s ease-in-out infinite 6s, orbPulse 7s infinite alternate 2s;
}

@keyframes orbFloat{
  0%, 100%{transform:translate(0, 0) rotate(0deg);}
  25%{transform:translate(30px, -40px) rotate(90deg);}
  50%{transform:translate(-20px, 20px) rotate(180deg);}
  75%{transform:translate(40px, 10px) rotate(270deg);}
}

@keyframes orbPulse{
  0%{opacity:0.25; transform:scale(1);}
  100%{opacity:0.6; transform:scale(1.1);}
}

/* ===== ENTRY ANIMATION ===== */
@keyframes cardEnter{
  from{
    opacity:0;
    transform:translateY(40px) scale(0.95);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

/* ===== FADE IN ANIMATION ===== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ===== INPUT FOCUS ANIMATION ===== */
@keyframes inputFocus {
  0% { box-shadow: 0 0 0 0 rgba(0,123,255,0); }
  70% { box-shadow: 0 0 0 10px rgba(0,123,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,123,255,0); }
}

/* ===== CARD ===== */
.card{
  width:900px;
  max-width: 80vw;
  height:470px;
  max-height: 80vh;
  background:var(--glass);
  backdrop-filter:blur(16px);
  border-radius:28px;
  display:grid;
  grid-template-columns:1.1fr 1fr;
  overflow:hidden;
  position:relative;

  animation:cardEnter .9s ease forwards;

  box-shadow:
    0 70px 140px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.7);
}

/* soft breathing glow */
.card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:28px;
  pointer-events:none;
  box-shadow:0 0 40px rgba(0,123,255,.25);
  animation:glow 4s ease-in-out infinite;
}

@keyframes glow{
  0%,100%{box-shadow:0 0 35px rgba(0,123,255,.25)}
  50%{box-shadow:0 0 55px rgba(0,123,255,.4)}
}

/* ===== LEFT ===== */
.left{
  background:linear-gradient(135deg,#007bff,#003b82);
  color:#fff;
  padding:70px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  position:relative;
  overflow: hidden;
}

.left h1{
  font-size:44px;
  margin:0 0 12px;
  letter-spacing:1px;
  animation: fadeInLeft 0.8s ease-out 0.3s both;
}

.left h3{
  margin:0 0 16px;
  font-weight:500;
  opacity:.9;
  animation: fadeInLeft 0.8s ease-out 0.5s both;
}

.left p{
  font-size:14px;
  opacity:.85;
  max-width:380px;
  animation: fadeInLeft 0.8s ease-out 0.7s both;
}

.circle{
  position:absolute;
  border-radius:50%;
  background:rgba(255,255,255,.25);
  animation: circleFloat 20s ease-in-out infinite;
}
.circle.c1{
  width:260px;height:260px;
  bottom:-90px;left:-80px;
  animation-delay: 0s;
}
.circle.c2{
  width:160px;height:160px;
  top:-60px;right:-40px;
  animation-delay: 2s;
}

@keyframes circleFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, -20px) scale(1.05); }
  66% { transform: translate(-20px, 15px) scale(0.95); }
}

/* ===== RIGHT ===== */
.right{
  padding:16px 56px 22px; /* ⬅ pulls everything UP */
  display:flex;
  flex-direction:column;
  position: relative;
  height: 100%;
}


.logo{
  width:160px;
  margin-bottom:10px;
  animation: fadeInUp 0.8s ease-out 0.3s both;
}

.right h2{
  font-size:24px;
  margin-top:2px;      /* ⬅ pulls text closer to logo */
  margin-bottom:4px;
  color:var(--navy);
  animation: fadeInUp 0.8s ease-out 0.5s both;
}

.right p{
  margin-bottom:10px;
  font-size:13px;
  line-height:1.35;
  color:#6b7280;
  animation: fadeInUp 0.8s ease-out 0.7s both;
}

/* ===== FORM CONTAINER ===== */
.form-container {
  flex: 1;
  display: flex;
  flex-direction: column;
}


/* ===== INPUTS ===== */
.field{
  margin-bottom:12px;
  position:relative;
  animation: fadeInRight 0.8s ease-out both;
}

.field:nth-child(1) { animation-delay: 0.9s; }
.field:nth-child(2) { animation-delay: 1.1s; }
.field:nth-child(3) { animation-delay: 1.3s; }

.field label{
  font-size:13px;
  font-weight:500;
  color:var(--navy);
  display: block;
  margin-bottom: 5px;
  transition: color 0.3s ease;
}

/* ===== FORCE PILL STYLE INPUTS (FINAL OVERRIDE) ===== */
.field input,
.field select{
  height:46px !important;
  padding:0 18px !important;

  border:none !important;                 /* 🔥 kills old border */
  border-radius:20px !important;          /* 🔥 pill shape */

  background:#ffffff !important;
  font-size:14px !important;
  font-weight:500 !important;

  box-shadow:
    0 12px 30px rgba(0,0,0,.10) !important;

  transition:all .25s ease !important;
}

/* 🔥 REMOVE CHROME AUTOFILL BLACK BORDER */
.field input:focus-visible,
.field select:focus-visible {
  outline: none !important;
  box-shadow:
    0 0 0 3px rgba(0,123,255,.18),
    0 14px 30px rgba(0,123,255,.25) !important;
}

/* Chrome autofill fix */
input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  box-shadow: 0 0 0 1000px #ffffff inset !important;
  -webkit-text-fill-color: #000 !important;
  border-radius:20px !important;
}



/* ===== BUTTON CONTAINER ===== */
.button-container {
  margin-top: 10px;
  animation: fadeInUp 0.8s ease-out 1.5s both;
  width: 100%;
}

/* ===== BUTTON ===== */
.login-btn{
  width: 100%;
  padding: 13px;              /* ⬅ reduced from 15px */
  border: none;
  border-radius: 16px;

  background: linear-gradient(180deg,var(--royal),#005fd1);
  color: #fff;

  font-weight: 800;
  font-size: 15px;

  cursor: pointer;
  position: relative;
  overflow: hidden;

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

  min-height: 48px;           /* ⬅ reduced from 50px */

  transition: transform .25s ease, box-shadow .25s ease;

  box-shadow:
    0 14px 28px rgba(0,123,255,.45),
    inset 0 1px 0 rgba(255,255,255,.4);
}


/* hover sweep */
.login-btn::before{
  content:"";
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.35),transparent);
  transition:.6s;
}
.login-btn:hover::before{
  left:100%;
}

.login-btn:hover {
  transform: translateY(-3px);
  box-shadow:
    0 18px 35px rgba(0,123,255,.55),
    inset 0 1px 0 rgba(255,255,255,.4);
}

.login-btn:active{
  transform:translateY(1px);
  box-shadow:0 8px 20px rgba(0,123,255,.35);
}

/* Button pulse animation */
@keyframes buttonPulse {
  0% { box-shadow: 0 15px 30px rgba(0,123,255,.45); }
  50% { box-shadow: 0 15px 30px rgba(0,123,255,.65); }
  100% { box-shadow: 0 15px 30px rgba(0,123,255,.45); }
}


/* ===== SUCCESS ANIMATION ===== */
@keyframes successCheck {
  0% { transform: scale(0); opacity: 0; }
  70% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* ===== LOADING SPINNER ===== */
.loading-spinner {
  display: none;
  width: 20px;
  height: 20px;
  border: 3px solid rgba(255,255,255,0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: loadingSpin 1s linear infinite;
}

.login-btn.loading {
  color: transparent;
}

.login-btn.loading .loading-spinner {
  display: block;
}

@keyframes loadingSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ===== RESPONSIVE ===== */
@media(max-width:1100px){
  .card{
    grid-template-columns:1fr;
    height:auto;
    width: 95%;
    max-width: 500px;
    margin: 20px;
    max-height: none;
  }
  .left{display:none}
  .right{
    padding: 45px 40px;
  }
 .logo{
  width:130px;
  margin-bottom:5px; /* ⬅ removes top empty space */
}
  .right h2 {
    font-size: 26px;
  }
  .button-container {
    margin-top: 14px;
  }
}

/* Small screen adjustments */
@media(max-width: 480px){
  .right{
    padding: 35px 30px;
  }
  .logo{
    width: 130px;
  }
  .right h2{
  font-size:23px;
  font-weight:600;
}

  .left h1 {
    font-size: 36px;
  }
  .card {
    border-radius: 20px;
  }
  .field input,
  .field select {
    padding: 13px 15px;
  }
  .login-btn {
    padding: 14px;
    font-size: 14px;
  }
}

/* ===== FLOATING PARTICLES ===== */
@keyframes floatParticle {
  0%, 100% { transform: translate(0, 0) rotate(0deg); opacity: 0.3; }
  25% { transform: translate(20px, -30px) rotate(90deg); opacity: 0.5; }
  50% { transform: translate(-15px, 25px) rotate(180deg); opacity: 0.7; }
  75% { transform: translate(25px, 15px) rotate(270deg); opacity: 0.5; }
}

/* FORCE LIGHT INPUT LIKE SECOND IMAGE */
.field input,
.field select{
  background:#f1f3f6 !important;
  color:#000 !important;
}

/* on focus keep light */
.field input:focus,
.field select:focus{
  background:#f1f3f6 !important;
}

/* placeholder color */
.field input::placeholder{
  color:#8b8b8b;
}