
/* Ø§Ù„Ø£Ù†Ù…Ø§Ø· Ø§Ù„Ø£ØµÙ„ÙŠØ© Ø¨Ø¯ÙˆÙ† ØªØ¹Ø¯ÙŠÙ„ */
* {
  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;
}