/* =========================================
   NAVBAR
========================================= */

.navbar {

  position: sticky;

  top: 0;
  padding: 0 12px;

  z-index: 1000;

  background: rgba(255,255,255,0.92);

  backdrop-filter: blur(12px);

  border-bottom:
    1px solid rgba(15,23,42,0.06);

  box-shadow:
    0 4px 20px rgba(15,23,42,0.04);
}


/* =========================================
   NAV CONTAINER
========================================= */

.nav-container {

  max-width: 1280px;

  margin: 0 auto;

  height: 76px;

  display: flex;

  align-items: center;

  gap: 40px;

  padding: 0 24px;
}


/* =========================================
   LOGO
========================================= */

.logo {

  flex-shrink: 0;
}


.logo-wrap {

  display: flex;

  align-items: center;

  gap:
    12px;

  text-decoration: none;
}


.logo-wrap img {

  width: 46px;

  height: 46px;

  object-fit: contain;

  display: block;
}


.brand-text {

  font-size:
    1.25rem;

  font-weight:
    var(--font-bold);

  color:
    var(--color-text);

  letter-spacing: 0;
}


/* =========================================
   NAVIGATION
========================================= */

.nav-links {

  display: flex;

  align-items: center;

  gap: 32px;

  margin-left: auto;
}


.nav-links a {

  position: relative;

  color:
    var(--color-text-light);

  text-decoration: none;

  font-weight: 600;
  letter-spacing: -0.01em;

  transition:
    color var(--transition-fast);
}


.nav-links a:hover {

  color:
    var(--color-primary);
}


/* =========================================
   NAV ACTIONS
========================================= */

.nav-actions {

  display: flex;

  align-items: center;

  margin-left: 8px;
}


.auth-buttons {

  display: flex;

  align-items: center;

  gap:
    var(--space-3);
}

.profile-btn {

  display: flex;

  align-items: center;

  gap: 10px;

  padding: 8px 12px;

  border-radius: 14px;

  border:
    1px solid rgba(15,23,42,0.08);

  background: rgba(255,255,255,0.82);

  transition: all 0.2s ease;
}


.profile-btn:hover {

  background: #f8fafc;

  border-color:
    rgba(37,99,235,0.16);

  transform: translateY(-1px);
}

.profile-avatar {

  width: 36px;

  height: 36px;

  border-radius: 50%;

  background: linear-gradient(
    135deg,
    #2563eb,
    #1d4ed8
  );

  color: white;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 15px;

  font-weight: 800;

  letter-spacing: 0.02em;

  box-shadow:
    0 8px 18px rgba(37,99,235,0.22);
}

.profile-chevron {

  font-size: 11px;

  color: #64748b;

  transform: translateY(1px);
}


.dropdown-label {

  font-size: 12px;

  color: var(--color-text-muted);

  margin-bottom: 4px;

  font-weight: 500;
}


/* =========================================
   LOGIN BUTTON
========================================= */

.login-link {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding:
    10px 18px;

  border-radius:
    var(--radius-md);

  background:
    var(--color-primary);

  color:
    white;

  text-decoration: none;

  font-weight:
    var(--font-semibold);

  transition:
    all var(--transition-fast);
}


.login-link:hover {

  background:
    var(--color-primary-dark);

  transform:
    translateY(-1px);
}


/* =========================================
   USER MENU
========================================= */

.user-menu {

  position: relative;
}


.user-menu-button {

  width: 42px;

  height: 42px;

  border: none;

  border-radius:
    50%;

  background:
    var(--color-primary);

  color:
    white;

  font-weight:
    var(--font-semibold);

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;
}


.user-menu-panel {

  position: absolute;

  top:
    calc(100% + 12px);

  right: 0;

  min-width: 240px;

  background:
    white;

  border:
    1px solid var(--color-border);

  border-radius:
    var(--radius-lg);

  box-shadow:
    var(--shadow-lg);

  padding:
    8px;

  display: none;
}


.user-menu.open .user-menu-panel {

  display: block;
}


.user-menu-header {

  padding:
    12px;

  border-bottom:
    1px solid var(--color-border);

  margin-bottom:
    6px;
}


.user-menu-header strong,
.user-menu-header span {

  display: block;
}


.user-menu-header span {

  margin-top:
    4px;

  font-size:
    var(--text-sm);

  color:
    var(--color-text-muted);
}


.user-menu-panel a,
.user-menu-panel button {

  width: 100%;

  border: none;

  background: transparent;

  padding:
    12px;

  border-radius:
    var(--radius-md);

  display: flex;

  align-items: center;

  text-align: left;

  color:
    var(--color-text);

  font-size:
    var(--text-sm);

  font-weight:
    var(--font-medium);

  cursor: pointer;

  transition:
    background var(--transition-fast);
}


.user-menu-panel a:hover,
.user-menu-panel button:hover {

  background:
    var(--color-primary-soft);

  color:
    var(--color-primary-dark);
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 900px) {

  .nav-container {

    flex-wrap: wrap;

    padding-top:
      14px;

    padding-bottom:
      14px;
  }

  .nav-links {

    width: 100%;

    justify-content: center;

    flex-wrap: wrap;

    gap:
      var(--space-4);

    margin-left: 0;
  }

  .nav-actions {

    width: 100%;

    justify-content: center;

    margin-left: 0;
  }

  .auth-buttons {

    width: 100%;

    justify-content: center;
  }
}


@media (max-width: 768px) {

  .brand-text {

    font-size:
      1.1rem;
  }

  .logo-wrap img {

    width: 40px;

    height: 40px;
  }

  .nav-links {

    font-size:
      0.95rem;
  }
}