:root {
      --brand-50:#eef6ff; --brand-100:#dbeafe; --brand-200:#bfdbfe; --brand-300:#93c5fd;
      --brand-400:#60a5fa; --brand-500:#3b82f6; --brand-600:#2563eb; --brand-700:#1d4ed8;
      --brand-800:#1e40af; --brand-900:#1e3a8a;
    }
    body { 
      font-family: "Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
      background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
      min-height: 100vh;
    }
    
    .login-bg {
      background: radial-gradient(90rem 90rem at 20% 30%, rgba(59,130,246,.12), transparent),
                  radial-gradient(70rem 70rem at 80% 70%, rgba(99,102,241,.15), transparent);
    }
    
    .glass {
      backdrop-filter: blur(16px);
      background: rgba(255,255,255,0.95);
      border: 1px solid rgba(255,255,255,0.2);
      box-shadow: 0 25px 50px rgba(0,0,0,0.15);
    }
    
    .input-field {
      transition: all 0.3s ease;
      border: 2px solid #e2e8f0;
    }
    
    .input-field:focus {
      border-color: var(--brand-500);
      box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
      outline: none;
    }
    
    .btn-primary {
      background: linear-gradient(135deg, var(--brand-600), var(--brand-500));
      transition: all 0.3s ease;
    }
    
    .btn-primary:hover {
      background: linear-gradient(135deg, var(--brand-700), var(--brand-600));
      transform: translateY(-1px);
      box-shadow: 0 10px 25px rgba(37,99,235,0.3);
    }
    
    .floating-shapes {
      position: absolute;
      width: 100%;
      height: 100%;
      overflow: hidden;
      pointer-events: none;
    }
    
    .shape {
      position: absolute;
      border-radius: 50%;
      background: rgba(59,130,246,0.1);
      animation: float 6s ease-in-out infinite;
    }
    
    .shape:nth-child(1) { width: 80px; height: 80px; top: 20%; left: 10%; animation-delay: 0s; }
    .shape:nth-child(2) { width: 120px; height: 120px; top: 60%; right: 15%; animation-delay: 2s; }
    .shape:nth-child(3) { width: 60px; height: 60px; bottom: 30%; left: 20%; animation-delay: 4s; }
    
    @keyframes float {
      0%, 100% { transform: translateY(0px) rotate(0deg); }
      50% { transform: translateY(-20px) rotate(180deg); }
    }
    
    .fade-in { animation: fadeIn 0.8s ease both; }
    .slide-up { animation: slideUp 0.9s ease both; }
    
    @keyframes fadeIn { from{opacity:0} to{opacity:1} }
    @keyframes slideUp { from{opacity:0; transform: translateY(30px)} to{opacity:1; transform: translateY(0)} }