.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--navbar-height);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-inline: var(--container-padding);
  background-color: color-mix(in srgb, var(--color-bg), transparent 10%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border-subtle);
}

.navbar__brand {
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--color-on-surface);
  letter-spacing: -0.02em;
  margin-right: auto;
}

.navbar__dynamic_links{
  display: flex;
  align-items: center;
  gap: var(--space-2);  
}

.navbar__dynamic_links a{
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-on-surface);
  transition: color var(--transition-fast);
  background: var(--color-surface-raised);
  padding: var(--space-1-2) var(--space-3);
  border-radius: var(--radius-full);
}

.navbar__dynamic_links .material-symbols-rounded{
  font-size: var(--text-sm);
}

.navbar__dynamic_links a:hover{
  color: var(--color-primary);
}


.navbar__stats {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.stat-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  background: var(--color-surface-raised);
  border-radius: var(--radius-full);
  border: 2px solid transparent;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-on-surface);
  transition: border-color var(--transition-fast);
}

.stat-pill .material-symbols-rounded {
  font-size: 16px;
}

#pillStreak{
  background: #fde7d4;
  color: var(--always-black);
}

#pillHearts{
  background: #fdd4d4;
  color: var(--always-black);
}

#pillDots{
  background: #d4e8f8;
  color: var(--always-black);
}

#pillEnergy{
  background: #d4fde7;
  color: var(--always-black);
}

#pillStreak .material-symbols-rounded {
  color: #fb923c;
}

#pillHearts .material-symbols-rounded {
  color: #f87171;
}

#pillDots .material-symbols-rounded {
  color: #71b7f8;
}

#pillEnergy .material-symbols-rounded {
  color: #5aeb79;
}

.stat-pill--pro {
  background-color: var(--color-pro) !important;
  border-color: var(--color-pro-fg) !important;
}

.stat-pill--pro .material-symbols-rounded {
  color: var(--always-black);
}

#pillHearts.stat-pill--pro .material-symbols-rounded,
#pillEnergy.stat-pill--pro .material-symbols-rounded {
  color: var(--always-black);
}

.stat-pill--pro span {
  color: var(--always-black);
  
}

.navbar__avatar {
  display: flex;
  align-items: center;
  margin-left: var(--space-2);
  position: relative;
}

.avatar {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-full);
  background-color: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-on-surface);
  cursor: pointer;
  transition: border-color var(--transition-fast);
  overflow: hidden;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.avatar:hover {
  border-color: var(--color-muted-2);
}

.dropdown {
  position: absolute;
  top: calc(var(--navbar-height) - 8px);
  right: var(--container-padding);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  min-width: 180px;
  display: none;
  flex-direction: column;
}

.dropdown.open {
  display: flex;
}

.dropdown__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-muted);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.dropdown__item:hover {
  background-color: var(--color-surface-raised);
  color: var(--color-on-surface);
}

.dropdown__item .material-symbols-rounded {
  font-size: 18px;
}

.dropdown__item--danger {
  color: var(--color-danger);
}

.dropdown__item--danger:hover {
  background-color: rgba(248, 113, 113, 0.08);
  color: var(--color-danger);
}

.dropdown__divider {
  height: 1px;
  background-color: var(--color-border-subtle);
  margin: var(--space-2) 0;
}

@media (max-width: 560px) {
  .navbar{
    display: flex;
    justify-content: space-between;
  }

  .navbar__dynamic_links,
  .navbar__brand {
    display: none;
  }
}