

    /* الأنماط الأصلية بدون تعديل */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
      background-size: 400% 400%;
      animation: gradientBG 15s ease infinite;
    }

    @keyframes gradientBG {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }

    .login-container {
      background: rgba(255, 255, 255, 0.95);
      padding: 40px;
      border-radius: 20px;
      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
      width: 400px;
      transition: all 0.3s ease;
    }

    .login-container:hover {
      transform: translateY(-5px);
    }

    .header {
      text-align: center;
      margin-bottom: 40px;
    }

    .header h1 {
      color: #2d3436;
      font-size: 2em;
      margin-bottom: 10px;
    }

    .header p {
      color: #636e72;
    }

    .input-group {
      margin-bottom: 25px;
      position: relative;
    }

    .input-group input {
      width: 100%;
      padding: 15px;
      border: none;
      background: #f5f6fa;
      border-radius: 10px;
      font-size: 16px;
      padding-right: 45px;
      transition: all 0.3s ease;
    }

    .input-group input:focus {
      outline: none;
      background: #fff;
      box-shadow: 0 0 10px rgba(78, 205, 196, 0.2);
    }

    .input-group i {
      position: absolute;
      left: 15px;
      top: 50%;
      transform: translateY(-50%);
      color: #636e72;
    }

    .remember-forgot {
      display: flex;
      justify-content: space-between;
      margin-bottom: 25px;
      font-size: 14px;
    }

    .remember-forgot a {
      color: #4ecdc4;
      text-decoration: none;
    }

    .login-btn {
      width: 100%;
      padding: 15px;
      background: linear-gradient(45deg, #4ecdc4, #45b7af);
      border: none;
      border-radius: 10px;
      color: white;
      font-size: 16px;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .login-btn:hover {
      background: linear-gradient(45deg, #45b7af, #3da89f);
      transform: translateY(-2px);
    }

    .social-login {
      margin-top: 30px;
      text-align: center;
    }

    .social-login p {
      margin-bottom: 15px;
      color: #636e72;
    }

    .social-icons a {
      display: inline-block;
      margin: 0 10px;
      width: 40px;
      height: 40px;
      line-height: 40px;
      border-radius: 50%;
      color: white;
      transition: all 0.3s ease;
    }

    .facebook { background: #3b5998; }
    .google { background: #dd4b39; }
    .twitter { background: #1da1f2; }

    .social-icons a:hover {
      transform: translateY(-3px);
    }

    .signup-link {
      text-align: center;
      margin-top: 25px;
    }

    .signup-link a {
      color: #4ecdc4;
      text-decoration: none;
      font-weight: 500;
    }

    @media (max-width: 480px) {
      .login-container {
        width: 90%;
        padding: 25px;
      }
    }

    /* إضافات الوضع الليلي مع الحفاظ على الحركة */
    .theme-toggle {
      position: fixed;
      top: 20px;
      left: 20px;
      cursor: pointer;
      z-index: 1000;
      background: rgba(255,255,255,0.9);
      padding: 10px;
      border-radius: 50%;
      box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    }

    body.dark-mode {
      background: linear-gradient(45deg,
      rgba(33, 33, 33, 0.9),
      rgba(136, 30, 207, 0.9)),
      url('data:image/svg+xml,<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><path fill="%2300000020" d="M44.8,-76.3C56.2,-69,62.4,-53.9,71.1,-39.3C79.8,-24.7,91,-10.6,90.8,3C90.6,16.6,79,33.3,68.5,49.2C58,65.1,48.6,80.3,35.6,84.8C22.6,89.4,6.1,83.3,-10.8,79.2C-27.7,75.1,-45.1,73.1,-56.5,64.1C-68,55.1,-73.4,39.2,-77.9,23.5C-82.3,7.9,-85.8,-7.4,-80.7,-19.7C-75.6,-32,-61.8,-41.3,-48.4,-47.7C-35,-54.1,-22,-57.6,-7.4,-53.2C7.3,-48.8,14.6,-36.5,24.5,-27.2C34.4,-17.8,46.9,-11.3,44.8,-76.3Z"/></svg>');
      /*background: linear-gradient(45deg, #518cc1, #8c5a9e);*/

      /*background-size: 400% 400%;*/
      /*animation: gradientBG 15s ease infinite;*/
    }

    body.dark-mode .login-container {
      background: rgba(45, 52, 54, 0.95);
      color: #fff;
    }

    body.dark-mode .header h1 {
      color: #fff;
    }

    body.dark-mode .header p {
      color: #ddd;
    }

    body.dark-mode .input-group input {
      background: rgba(255,255,255,0.1);
      color: #fff;
    }

    body.dark-mode .input-group i {
      color: #ddd;
    }

    body.dark-mode .remember-forgot {
      color: #ddd;
    }

    body.dark-mode .social-login p {
      color: #ddd;
    }

    body.dark-mode .signup-link a {
      color: #4ecdc4;
    }

  