@media (max-width: 560px) {
  .topbar {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 10px;
  }

  .brand {
    min-width: 170px;
  }

  .topbar nav {
    order: 3;
    width: 100%;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-top: 6px;
  }

  .topbar nav a {
    flex: 0 0 auto;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, .06);
    padding: 9px 11px;
    font-size: .92rem;
    white-space: nowrap;
  }

  .login-link {
    margin-left: auto;
  }

  .topbar > form {
    display: flex;
    gap: 8px;
    align-items: center;
    max-width: 100%;
  }

  .topbar > form span {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}