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

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;font-family:'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased}

/* ===== ANIMATED BACKGROUND ===== */
.login-bg{
  min-height:100vh;display:grid;grid-template-columns:1fr 1fr;
  background:linear-gradient(135deg,#052e16 0%,#0f4022 35%,#166534 65%,#052e16 100%);
  position:relative;overflow:hidden;
}
@media(max-width:768px){.login-bg{grid-template-columns:1fr}}

/* animated particles */
.login-bg::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 20% 50%, rgba(67,176,42,.15) 0%, transparent 60%),
             radial-gradient(ellipse at 80% 20%, rgba(34,193,63,.1) 0%, transparent 50%);
  animation:bgShift 8s ease-in-out infinite alternate;
}
@keyframes bgShift{0%{opacity:1}100%{opacity:.6;transform:scale(1.05)}}

/* floating circles */
.bg-shape{position:absolute;border-radius:50%;opacity:.06;animation:floatUp linear infinite}
.bg-shape:nth-child(1){width:80px;height:80px;background:#43B02A;left:10%;animation-duration:18s;animation-delay:0s;bottom:-80px}
.bg-shape:nth-child(2){width:140px;height:140px;background:#22c55e;left:25%;animation-duration:22s;animation-delay:3s;bottom:-140px}
.bg-shape:nth-child(3){width:60px;height:60px;background:#86efac;left:60%;animation-duration:16s;animation-delay:1s;bottom:-60px}
.bg-shape:nth-child(4){width:100px;height:100px;background:#43B02A;left:75%;animation-duration:20s;animation-delay:5s;bottom:-100px}
.bg-shape:nth-child(5){width:50px;height:50px;background:#4ade80;left:88%;animation-duration:14s;animation-delay:2s;bottom:-50px}
@keyframes floatUp{0%{transform:translateY(0) rotate(0deg);opacity:.06}100%{transform:translateY(-110vh) rotate(720deg);opacity:0}}

/* ===== BIRD ANIMATION PANEL (LEFT) ===== */
.login-hero{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:3rem;z-index:2;
}
@media(max-width:768px){.login-hero{display:none}}
.hero-bird{animation:birdFloat 4s ease-in-out infinite}
.hero-bird svg{width:180px;height:180px;filter:drop-shadow(0 20px 40px rgba(0,0,0,.4))}
@keyframes birdFloat{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-18px) rotate(2deg)}}

.hero-tagline{margin-top:2rem;text-align:center}
.hero-tagline h2{font-size:2rem;font-weight:800;color:#fff;line-height:1.2;text-shadow:0 2px 20px rgba(0,0,0,.3)}
.hero-tagline p{margin-top:.75rem;color:rgba(255,255,255,.65);font-size:1rem;max-width:320px}

/* ===== LOGIN CARD PANEL (RIGHT) ===== */
.login-panel{
  display:flex;align-items:center;justify-content:center;padding:2rem;z-index:2;
  position:relative;
}
.login-card{
  background:#fff;border-radius:1.5rem;box-shadow:0 40px 80px rgba(0,0,0,.35);
  padding:2.5rem;width:100%;max-width:430px;
  animation:cardPop .6s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes cardPop{from{opacity:0;transform:scale(.9) translateY(30px)}to{opacity:1;transform:scale(1) translateY(0)}}

.login-logo{display:flex;align-items:center;gap:.75rem;margin-bottom:1.75rem}
.login-logo img{width:44px;height:44px;object-fit:contain}
.login-logo-text{line-height:1.1}
.login-logo-name{font-size:1.25rem;font-weight:800;color:#0f4022;letter-spacing:-.02em}
.login-logo-sub{font-size:.65rem;color:#64748b;text-transform:uppercase;letter-spacing:.1em}
.login-title{font-size:1.5rem;font-weight:800;color:#0f172a;margin-bottom:.4rem}
.login-sub{color:#64748b;font-size:.875rem;margin-bottom:2rem}

.login-field{margin-bottom:1.1rem}
.login-label{display:block;font-size:.8rem;font-weight:600;color:#334155;margin-bottom:.4rem}
.login-input-wrap{position:relative}
.login-input-icon{position:absolute;left:.85rem;top:50%;transform:translateY(-50%);color:#94a3b8;width:18px;height:18px}
.login-input{
  width:100%;padding:.7rem .85rem .7rem 2.6rem;
  border:2px solid #e2e8f0;border-radius:.625rem;
  font-size:.9rem;color:#0f172a;background:#f8fafc;
  font-family:'Inter',sans-serif;outline:none;transition:all .2s;
}
.login-input:focus{border-color:#1B6B3A;background:#fff;box-shadow:0 0 0 4px rgba(27,107,58,.1)}
.login-input::placeholder{color:#94a3b8}

.login-btn{
  width:100%;padding:.85rem;background:linear-gradient(135deg,#1B6B3A,#22913f);
  color:#fff;font-size:1rem;font-weight:700;border:none;border-radius:.625rem;
  cursor:pointer;transition:all .25s;margin-top:.5rem;font-family:'Inter',sans-serif;
  position:relative;overflow:hidden;
}
.login-btn::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,#22913f,#43B02A);opacity:0;transition:opacity .25s}
.login-btn:hover::after{opacity:1}
.login-btn span{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:.5rem}
.login-btn:hover{box-shadow:0 8px 25px rgba(27,107,58,.45);transform:translateY(-2px)}
.login-btn:active{transform:translateY(0)}
.login-btn svg{width:18px;height:18px}

.login-error{background:#fef2f2;border:1px solid #fecaca;color:#dc2626;border-radius:.625rem;padding:.75rem 1rem;font-size:.85rem;margin-bottom:1rem;display:flex;align-items:center;gap:.5rem}
.login-error svg{width:16px;height:16px;flex-shrink:0}
.login-footer{margin-top:1.5rem;text-align:center;font-size:.75rem;color:#94a3b8}

/* ripple */
.ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.3);transform:scale(0);animation:ripple .6s linear;pointer-events:none}
@keyframes ripple{to{transform:scale(4);opacity:0}}