header {
  padding-top: 20px !important;
}

header nav {
  gap: 12px !important;
  padding: 10px !important;
  border-radius: 26px !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.97), rgba(248,250,252,0.94)) !important;
  border: 1px solid rgba(148,163,184,0.22) !important;
  box-shadow: 0 20px 45px -28px rgba(15,23,42,0.28), 0 10px 24px -18px rgba(59,130,246,0.18) !important;
}

header nav a[href="/"],
header nav a[href="/login"] {
  min-width: 142px !important;
  justify-content: center !important;
  padding: 14px 18px !important;
  border-radius: 18px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  border: 1px solid rgba(226,232,240,0.95) !important;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
  color: #334155 !important;
  box-shadow: 0 8px 18px -16px rgba(15,23,42,0.2) !important;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease, color .2s ease !important;
}

header nav a[href="/"] {
  background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%) !important;
}

header nav a[href="/login"] {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
  color: #1d4ed8 !important;
  border-color: rgba(96,165,250,0.45) !important;
}

header nav a[href="/"]:hover,
header nav a[href="/login"]:hover {
  transform: translateY(-1px);
  border-color: rgba(59,130,246,0.35) !important;
  box-shadow: 0 14px 24px -18px rgba(59,130,246,0.35) !important;
}

header nav a[href="/"][aria-current="page"],
header nav a[href="/"][class*="bg-gray-100"] {
  background: linear-gradient(135deg, #111827 0%, #1f2937 100%) !important;
  color: #ffffff !important;
  border-color: rgba(15,23,42,0.92) !important;
  box-shadow: 0 18px 30px -20px rgba(15,23,42,0.35), 0 12px 26px -20px rgba(59,130,246,0.4) !important;
}

header nav a[href="/login"][aria-current="page"],
header nav a[href="/login"][class*="bg-gray-100"] {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
  color: #ffffff !important;
  border-color: rgba(37,99,235,0.92) !important;
  box-shadow: 0 18px 30px -20px rgba(29,78,216,0.42), 0 12px 26px -20px rgba(59,130,246,0.45) !important;
}

header nav a svg {
  width: 16px !important;
  height: 16px !important;
}

@media (max-width: 640px) {
  header {
    padding-top: 14px !important;
  }

  header nav {
    width: min(100%, 360px);
  }

  header nav a[href="/"],
  header nav a[href="/login"] {
    min-width: 0 !important;
    flex: 1 1 0%;
    padding: 12px 14px !important;
  }
}