@keyframes meshDrift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
  @keyframes iconPulse{0%,100%{box-shadow:0 0 0 0 rgba(99,102,241,.45)}70%{box-shadow:0 0 0 18px rgba(99,102,241,0)}}
  @keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
  @keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
  #loginScreen{
    background:linear-gradient(135deg,#0b0d14,#12102b 25%,#0f1117 50%,#141028 75%,#0b0d14);
    background-size:300% 300%;animation:meshDrift 12s ease infinite;
    position:relative;overflow:hidden;
  }
  #loginScreen::before{
    content:'';position:absolute;width:480px;height:480px;border-radius:50%;
    background:radial-gradient(circle,rgba(99,102,241,.08) 0%,transparent 70%);
    top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;
  }
  .login-card{
    animation:fadeUp .5s ease;
    background:rgba(22,24,33,.65);backdrop-filter:blur(24px) saturate(1.4);
    border:1px solid rgba(255,255,255,.07);border-radius:20px;
    padding:40px 36px 36px;width:100%;max-width:400px;
    box-shadow:0 8px 48px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.03) inset;
  }
  .login-icon-ring{
    width:68px;height:68px;border-radius:18px;
    background:linear-gradient(135deg,rgba(99,102,241,.2),rgba(139,92,246,.2));
    display:flex;align-items:center;justify-content:center;margin:0 auto 24px;
    animation:iconPulse 2.5s ease infinite;position:relative;
  }
  .login-icon-ring::after{
    content:'';position:absolute;inset:-2px;border-radius:20px;
    background:linear-gradient(135deg,rgba(99,102,241,.5),rgba(139,92,246,.3),rgba(99,102,241,.1));
    z-index:-1;opacity:.6;filter:blur(1px);
  }
  .login-field{position:relative;margin-bottom:20px}
  .login-field input{
    width:100%;padding:14px 16px 14px 44px;font-size:15px;
    background:rgba(15,17,23,.7);border:1px solid rgba(255,255,255,.08);
    border-radius:12px;color:#e5e7eb;transition:all .2s;
    font-family:Inter,system-ui,sans-serif;
  }
  .login-field input:focus{
    border-color:#6366f1;background:rgba(15,17,23,.9);
    box-shadow:0 0 0 3px rgba(99,102,241,.12),0 0 20px rgba(99,102,241,.06);
    outline:none;
  }
  .login-field input::placeholder{color:#4b5563;font-weight:400}
  .login-field .field-icon{
    position:absolute;left:14px;top:50%;transform:translateY(-50%);
    color:#4b5563;pointer-events:none;transition:color .2s;
  }
  .login-field:focus-within .field-icon{color:#818cf8}
  .login-btn{
    width:100%;padding:14px;border:none;border-radius:12px;
    font-size:15px;font-weight:600;font-family:Inter,system-ui,sans-serif;
    color:#fff;cursor:pointer;transition:all .2s;position:relative;overflow:hidden;
    background:linear-gradient(135deg,#6366f1,#8b5cf6);
    box-shadow:0 4px 16px rgba(99,102,241,.3);
  }
  .login-btn:hover{
    transform:translateY(-1px);
    box-shadow:0 6px 24px rgba(99,102,241,.4);
    background:linear-gradient(135deg,#818cf8,#a78bfa);
  }
  .login-btn:active{transform:translateY(0);box-shadow:0 2px 8px rgba(99,102,241,.3)}
  .login-btn::before{
    content:'';position:absolute;inset:0;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);
    background-size:200% 100%;animation:shimmer 2.5s linear infinite;
  }
  .login-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
  .login-btn:disabled::before{animation:none}
  .login-error{
    background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.15);
    border-radius:10px;padding:10px 14px;font-size:13px;color:#f87171;
    display:flex;align-items:center;gap:8px;margin-bottom:16px;
  }
  .login-divider{
    display:flex;align-items:center;gap:12px;margin:24px 0 8px;
    font-size:12px;color:#4b5563;
  }
  .login-divider::before,.login-divider::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.06)}