body {
  height: 100%;
}
*{margin:0;padding:0;box-sizing:border-box;font-family:Arial,sans-serif;}
  body,html{min-height:100vh;background:linear-gradient(to bottom right,#ebf8ff,#ffffff,#dbeafe);position:relative;overflow-x:hidden;}

  /* Background Shapes */
  .bg-shape{
    position:absolute;/*border-radius:50%; filter:blur(120px);*/
    animation:scaleRotate 20s ease-in-out infinite;
  }
  .shape1{width:384px;height:384px;top:-160px;right:-160px;background:linear-gradient(to bottom right, rgba(59,130,246,0.2), rgba(37,99,235,0.2));}
  .shape2{width:384px;height:384px;bottom:-160px;left:-160px;background:linear-gradient(to top right, rgba(139,92,246,0.2), rgba(139,92,246,0.2));animation-duration:25s;}
  .shape3{width:600px;height:600px;top:50%;left:50%;transform:translate(-50%,-50%);background:linear-gradient(to right, rgba(6,182,212,0.1), rgba(59,130,246,0.1));animation-duration:15s;}

  @keyframes scaleRotate{
    0%{transform:scale(1) rotate(0deg);}
    50%{transform:scale(1.2) rotate(90deg);}
    100%{transform:scale(1) rotate(0deg);}
  }

  /* Grid pattern */
  .grid-pattern{position:absolute;inset:0;opacity:0.05;background-image:linear-gradient(0deg,#3b82f6 1px,transparent 1px),linear-gradient(90deg,#3b82f6 1px,transparent 1px);background-size:40px 40px;pointer-events:none;}

  /* Layout */
  .container{position:relative;min-height:100vh;display:flex;justify-content:center;align-items:center;padding:3rem 1rem;}
  .grid{display:grid;grid-template-columns:1fr;max-width:1200px;width:100%;gap:3rem;align-items:center;}
  @media(min-width:1024px){.grid{grid-template-columns:repeat(2,1fr);}}

  /* Left Side */
  .welcome{color:#1e293b;opacity:0;animation:fadeIn 0.6s forwards;}
  .welcome-badge{display:inline-flex;align-items:center;gap:0.5rem;background:rgba(255,255,255,0.8);backdrop-filter:blur(5px);padding:0.5rem 1rem;border-radius:999px;box-shadow:0 2px 6px rgba(0,0,0,0.1);margin-bottom:1.5rem;animation:fadeInUp 0.6s forwards 0.2s;}
  .welcome-badge svg{width:20px;height:20px;color:#FCD600;}
  .welcome h1{font-size:2rem;line-height:1.2;margin-bottom:1rem;background:linear-gradient(to right,#1c1c56,#1c1c56);-webkit-background-clip:text;-webkit-text-fill-color:transparent;opacity:0;animation:fadeInUp 0.6s forwards 0.3s;}
  .welcome p{font-size:1.25rem;color:#475569;max-width:400px;margin-bottom:2rem;opacity:0;animation:fadeInUp 0.6s forwards 0.4s;}

  .feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;opacity:0;animation:fadeInUp 0.6s forwards 0.5s;}
  .feature{display:flex;gap:0.75rem;align-items:flex-start;}
  .feature-icon{width:48px;height:48px;border-radius:1rem;background:linear-gradient(to bottom right,#FCD600,#FCD600);display:flex;justify-content:center;align-items:center;box-shadow:0 10px 20px rgba(59,130,246,0.3);}
  .feature h3{font-weight:600;color:#1e293b;margin-bottom:0.25rem;font-size:1rem;}
  .feature p{font-size:0.875rem;color:#64748b;}

  /* Right Side Login */
  .login-card{
    background:rgba(255,255,255,0.8);backdrop-filter:blur(20px);border-radius:2rem;padding:3rem;box-shadow:0 20px 40px rgba(59,130,246,0.1);border:1px solid rgba(255,255,255,0.2);opacity:0;transform:scale(0.95);animation:fadeInScale 0.6s forwards 0.2s;
  }
  .login-card h2{font-size:2rem;color:#1e293b;margin-bottom:0.5rem;}
  .login-card p{color:#64748b;margin-bottom:2rem;}
  form{display:flex;flex-direction:column;gap:1.5rem;position:relative;}
  label{display:block;font-size:0.875rem;color:#475569;margin-bottom:0.25rem;}

  .input-wrapper{position:relative;display:flex;align-items:center;}
  .input-wrapper input{width:100%;padding:0.75rem 1rem;padding-left:3rem;border-radius:1rem;border:1px solid #e5e7eb;outline:none;font-size:1rem;transition:all 0.2s;}
  .input-wrapper input:focus{border-color:#3b82f6;box-shadow:0 0 0 2px rgba(59,130,246,0.3);}
  .input-icon{position:absolute;left:0.75rem;width:20px;height:20px;color:#9ca3af;}
  .toggle-password{position:absolute;right:0.75rem;cursor:pointer;color:#9ca3af;}

  .options{display:flex;justify-content:space-between;align-items:center;font-size:0.875rem;}
  .options input[type="checkbox"]{width:1.25rem;height:1.25rem;cursor:pointer;}
  .options a{text-decoration:none;color:#3b82f6;transition:color 0.2s;}
  .options a:hover{color:#1c1c56;text-decoration:underline;}

  .btn-login{background:linear-gradient(to right,#FCD600,#FCD600);color:#1C1C56;padding:1rem;border-radius:1rem;font-weight:bold;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:0.5rem;transition:transform 0.2s,box-shadow 0.2s;    border-color: #FCD600; border-right: #FCD600;border-bottom: #FCD600; }
  .btn-login:hover{transform:scale(1.02);box-shadow:0 15px 30px rgba(59,130,246,0.4);}
  .btn-login span:last-child{transition:transform 0.2s;}
  .btn-login:hover span:last-child{transform:translateX(4px);}

  /* Footer */
  footer{position:absolute;bottom:1.5rem;width:100%;text-align:center;font-size:0.875rem;color:#94a3b8;opacity:0;animation:fadeIn 0.6s forwards 1s;}

  /* Animations */
  @keyframes fadeInUp{0%{opacity:0;transform:translateY(20px);}100%{opacity:1;transform:translateY(0);}}
  @keyframes fadeInScale{0%{opacity:0;transform:scale(0.95);}100%{opacity:1;transform:scale(1);}}
  @keyframes fadeIn{0%{opacity:0;}100%{opacity:1;}}