body,html {
      margin: 0; padding: 0; height: 100%; width: 100%;
      font-family: 'Cairo', sans-serif;
      overflow: hidden;
    }
    /* Particles background */
    #particles-js {
      position: absolute; width: 100%; height: 100%;
      background: linear-gradient(135deg,#0d1b2a,#1b263b,#415a77);
      z-index: 0;
    }
    .login-box {
      position: relative; z-index: 1;
      background: rgba(255,255,255,0.1); backdrop-filter: blur(10px);
      border-radius: 15px; padding: 2rem; width: 350px;
      box-shadow: 0 8px 25px rgba(0,0,0,0.3);
      color: #fff; text-align: center; margin: auto;
      top: 50%; transform: translateY(-50%);
    }
    .logo {
      width: 100px; height: 100px;
      border-radius: 50%; object-fit: cover;
      margin-bottom: 1rem; border: 2px solid #00c6ff;
    }
    h2 { margin-bottom: 1.5rem; }
    .input-group { position: relative; margin: 1rem 0; }
    .input-group input {
      width: 85%; padding: 12px 40px 12px 12px;
      border: none; border-radius: 8px;
      background: rgba(255,255,255,0.15);
      color: #fff; font-size: 14px;
    }
    .input-group label {
      position: absolute; top: 50%; right: 12px;
      transform: translateY(-50%);
      font-size: 14px; color: #ddd; pointer-events: none;
      transition: 0.3s ease;
    }
    .input-group input:focus + label,
    .input-group input:not(:placeholder-shown) + label {
      top: -8px; right: 8px; font-size: 12px; color: #00c6ff;
    }
    .toggle-pass {
      position: absolute; left: 10px; top: 50%;
      transform: translateY(-50%); cursor: pointer;
      font-size: 16px; color: #ccc;
    }
    button {
      margin-top: 1rem; width: 100%; padding: 12px;
      border: none; border-radius: 8px;
      background: linear-gradient(45deg,#00c6ff,#0072ff);
      color: #fff; font-size: 16px; cursor: pointer;
      transition: 0.3s; font-weight: bold;
    }
    button:hover { transform: scale(1.03); }
    .error { color: #ff6b6b; margin-top: 10px; font-size: 14px; }