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

:root{
  --border:#EEF2F7;
  --acc:#2563EB;
}

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

body.login-page{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  font-family:'Outfit',sans-serif;
  background:radial-gradient(ellipse at 50% 60%, #f5f9ff 0%, #eef4fb 60%, #e9f1fb 100%);
}

.login-orb{
  position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none;
  animation:orbFloat 8s ease-in-out infinite;
}
.login-orb-1{
  width:520px;height:520px;
  background:radial-gradient(circle, rgba(30,80,200,0.18) 0%, transparent 70%);
  top:-120px;left:-100px;
}
.login-orb-2{
  width:400px;height:400px;
  background:radial-gradient(circle, rgba(50,120,255,0.12) 0%, transparent 70%);
  bottom:-80px;right:-80px;animation-delay:-4s;
}
@keyframes orbFloat{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-30px) scale(1.06)}
}

.login-box{
  position:relative;z-index:2;width:100%;max-width:400px;padding:44px 40px 36px;
  border-radius:20px;background:#fff;border:1px solid var(--border);
  box-shadow:0 1px 2px rgba(15,23,42,.05),0 16px 32px rgba(15,23,42,.08);
  animation:cardEntrance .7s cubic-bezier(.16,1,.3,1) both;
}
@keyframes cardEntrance{
  from{opacity:0;transform:translateY(28px) scale(.97)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

.login-logo{
  width:52px;height:52px;border-radius:14px;background:rgba(59,130,246,.08);
  color:#2563EB;display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:700;letter-spacing:-.02em;margin-bottom:18px;
}
.login-title{font-size:28px;font-weight:700;color:#111827;letter-spacing:-.03em}
.login-subtitle{margin-top:8px;font-size:15px;color:#6B7280;line-height:1.5;margin-bottom:24px}
.login-error{
  margin-bottom:16px;padding:10px 12px;border-radius:10px;
  background:#FEF2F2;border:1px solid rgba(220,38,38,.2);color:#DC2626;
  font-size:13px;font-weight:600;
}
.login-form{display:flex;flex-direction:column;gap:14px}
.form-group label{display:block;font-size:12px;font-weight:600;color:#6B7280;margin-bottom:6px}
.form-group input{
  width:100%;height:46px;border:1px solid #E5E7EB;border-radius:12px;
  padding:0 14px;font:500 14px Outfit,system-ui,sans-serif;color:#111827;outline:none;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.form-group input:focus{border-color:#BFDBFE;box-shadow:0 0 0 4px rgba(37,99,235,.12)}
.login-btn{
  margin-top:8px;height:46px;border:none;border-radius:12px;background:#2563EB;color:#fff;
  font:600 15px Outfit,system-ui,sans-serif;cursor:pointer;
  transition:background .2s ease,transform .15s ease;
}
.login-btn:hover{background:#1D4ED8}
.login-btn:active{transform:scale(.98)}