/* ===== RESET ===== */
* {margin:0; padding:0; box-sizing:border-box; font-family:'Poppins',sans-serif;}
body {
  background: var(--bg-color);
  color: var(--text-color);
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:100vh;
  transition: background 0.6s ease, color 0.3s ease;
}

/* ===== HEADER ===== */
header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;

  background: var(--header-bg);
  backdrop-filter: blur(10px);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
}

header .logo-area {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-color);
  font-weight: 700;
  font-size: 1.2rem;
}

header nav {
  display: flex;
  gap: 20px;
  transition: all 0.3s ease;
}

header nav a {
  color: var(--text-color);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s;
}

header nav a:hover {
  color: var(--accent-color);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 15px;
}

/* ===== HAMBURGER ===== */
.hamburger {
  display: none;
  font-size: 1.6rem;
  background: none;
  border: none;
  color: var(--text-color);
  cursor: pointer;
  transition: transform 0.3s ease;
}
.hamburger.active {
  transform: rotate(90deg);
}

.login-btn {
  background: var(--accent-color);
  color: #fff;
  padding: 8px 16px;
  border-radius: 8px;
  text-decoration: none;
  transition: 0.3s;
}
.login-btn:hover {
  background: #00c6ff;
}

/* ===== LOGIN CARD ===== */
.login-card {
  width:90%;
  max-width:380px;
  background: color-mix(in srgb, var(--header-bg) 90%, transparent);
  color:var(--text-color);
  border-radius:18px;
  padding:40px 30px;
  text-align:center;
  box-shadow:0 8px 25px rgba(0,0,0,0.3);
  animation:fadeIn 0.8s ease;
  backdrop-filter: blur(10px);
  position:relative;
  margin-top: 100px;
}

/* ===== LOGO ===== */
.login-card img {
  width:80px;
  margin-bottom:15px;
  border-radius:50%;
  box-shadow:0 0 12px var(--accent-color);
  transition: transform 0.3s ease;
}
.login-card img:hover {transform:scale(1.05);}

/* ===== HEADINGS ===== */
h2 {font-size:1.7em;margin-bottom:8px;}
p.desc {font-size:0.9em;opacity:0.8;margin-bottom:25px;}

/* ===== INPUT FIELDS ===== */
.input-box {
  position:relative;
  margin-bottom:20px;
}
.input-box input {
  width:100%;
  padding:12px 45px 12px 15px;
  border:none;
  border-radius:10px;
  outline:none;
  background: color-mix(in srgb, var(--accent-color) 15%, var(--bg-color));
  color: var(--text-color);
  font-size:15px;
  transition:all 0.3s ease;
}
.input-box input:focus {
  background: color-mix(in srgb, var(--accent-color) 25%, var(--bg-color));
  box-shadow:0 0 6px var(--accent-color);
}
.input-box i {
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  cursor:pointer;
  font-size:18px;
  opacity:0.8;
}

/* ===== REMEMBER + FORGOT ===== */
.options {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:0.85em;
  margin-bottom:20px;
}
.options a {
  text-decoration:none;
  color:var(--accent-color);
  font-weight:500;
}
.options a:hover {text-decoration:underline;}

/* ===== BUTTON ===== */
.btn {
  width:100%;
  background:var(--accent-color);
  color:#fff;
  border:none;
  font-weight:bold;
  padding:12px;
  border-radius:10px;
  cursor:pointer;
  transition:all 0.3s ease;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
}


#theme-toggle {
  background: none;
  border: none;
  color: var(--text-color);
  font-size: 1.5rem;
  cursor: pointer;
  transition: color 0.3s ease, transform 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

#theme-toggle:hover {
  color: var(--accent-color);
  transform: rotate(20deg);
}

button {
      padding: 1rem;
      border: none;
      border-radius: 8px;
      background: var(--accent-color);
      color: #fff;
      font-weight: 600;
      cursor: pointer;
      transition: 0.3s;
    }
.btn:hover {transform:scale(1.03); filter: brightness(1.1);}

/* ===== FOOTER LINK ===== */
.footer-link {
  margin-top:15px;
  font-size:0.9em;
}
.footer-link a {
  color:var(--accent-color);
  text-decoration:none;
  font-weight:500;
}
.footer-link a:hover {text-decoration:underline;}

/* ===== ANIMATION ===== */
@keyframes fadeIn {
  from {opacity:0; transform:translateY(25px);}
  to {opacity:1; transform:translateY(0);}
}

/* ===== RESPONSIVE NAV ===== */
@media (max-width: 768px) {
  header nav {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 70px;
    right: 0;
    width: 100%;
    background: var(--header-bg);
    text-align: center;
    padding: 15px 0;
  }
  header nav.show {
    display: flex;
    animation: slideDown 0.4s ease;
  }

  @keyframes slideDown {
    from {opacity:0; transform:translateY(-10px);}
    to {opacity:1; transform:translateY(0);}
  }

  .hamburger {
    display: block;
  }
}