@layer components {
  .topnav {
    height: 52px;
    background: var(--ink-950);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--s6);
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 100;
  }

  .topnav-name {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 500;
    color: #fff;
  }

  .topnav-right {
    display: flex;
    align-items: center;
    gap: 14px;
  }

  .topnav-user {
    display: flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
  }

  .topnav-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--forest-700);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 500;
    color: #fff;
  }

  .topnav-username {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.55);
  }

  .topnav-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }

  .topnav-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Hamburger toggle — hidden on desktop */
  .mobile-nav-toggle {
    display: none;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    padding: var(--s2);
    margin: calc(-1 * var(--s2));
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
  }

  .mobile-nav-toggle:hover {
    color: #fff;
  }

  @media (max-width: 768px) {
    .topnav {
      padding: 0 var(--s3);
    }

    .mobile-nav-toggle {
      display: flex;
    }

    .topnav-username {
      display: none;
    }

    .topnav-name {
      font-size: 14px;
    }
  }
}