/* ===== Topbar / Navbar ===== */

.topbar{
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 24px;
  background: var(--paper);
  border-bottom: 1px solid var(--border);
  padding: 14px 24px;
}
.topbar-toggle{
  display: none; background: none; border: none; cursor: pointer;
  font-size: 22px; color: var(--ink); padding: 4px; line-height: 1;
}
.brand{
  font-family: 'Inter', sans-serif;
  font-weight: 700; font-size: 19px;
  letter-spacing: -0.01em;
  color: var(--signal); cursor: pointer;
  transition: opacity 0.25s ease;
  width: fit-content;
}
.brand:hover{ opacity: 0.85; }
.topbar-nav{ display: flex; align-items: center; gap: 6px; padding: 0; justify-content: flex-start; }
.topbar-nav-center{ position: absolute; left: 50%; transform: translateX(-50%); }
.topbar-community .topbar-nav-center{ left: calc(50% - 130px); }
@media (max-width: 980px){ .topbar-community .topbar-nav-center{ left: 50%; } }
.topbar-link{
  padding: 8px 14px; border-radius: 8px;
  font-size: 14px; font-weight: 500; color: var(--ink-dim);
  white-space: nowrap; transition: all 0.15s;
}
.topbar-link:hover{ background: var(--surface); color: var(--ink); }
.topbar-link.active{ background: var(--signal-soft); color: var(--ink); font-weight: 600; }

.topbar-right{ display: flex; align-items: center; gap: 16px; margin-left: auto; }
.topbar-right .btn{
  font-size: 13px; font-weight: 600;
  padding: 8px 16px; border-radius: 8px;
}
.icon-btn{
  background: transparent; border: none; cursor: pointer;
  color: var(--ink-dim); width: 22px; height: 22px; padding: 0;
}
.icon-btn svg{ width: 100%; height: 100%; }
.avatar-top{ width: 34px; height: 34px; }

@media (max-width: 980px){
  .topbar{
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    gap: 6px 12px;
    padding: 8px 12px;
  }
  .topbar-toggle{ display: block; order: -1; }
  .brand{ order: 0; }
  .topbar-nav{
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--paper); border-bottom: 1px solid var(--border);
    flex-direction: column; gap: 2px; padding: 8px;
    box-shadow: 0 8px 20px rgba(7,17,32,0.08);
    z-index: 40;
    transform: none;
    grid-column: 1 / -1;
  }
  .topbar-nav.open{ display: flex; }
  .topbar-link{ font-size: 14px; padding: 12px 14px; border-radius: 8px; }
  .topbar-link:hover{ background: var(--surface); }
  .topbar-right{ justify-self: end; margin-left: 0; align-items: center; gap: 10px; }
  .topbar-right .btn{ font-size: 12px; padding: 7px 12px; }
}

/* Community logged-in mobile: brand above, hamburger+search+icons below */
@media (max-width: 980px){
  .topbar-community.topbar{
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 0 12px;
    padding: 8px 12px;
  }
  .topbar-community .brand{ grid-column: 1 / -1; grid-row: 1; margin-bottom: 6px; }
  .topbar-community .topbar-toggle{ grid-column: 1; grid-row: 2; display: block; }
  .topbar-community .topbar-nav{
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--paper); border-bottom: 1px solid var(--border);
    flex-direction: column; gap: 2px; padding: 8px;
    box-shadow: 0 8px 20px rgba(7,17,32,0.08);
    z-index: 40;
    transform: none;
    grid-column: 1 / -1;
  }
  .topbar-community .topbar-nav.open{ display: flex; }
  .topbar-community .topbar-link{ font-size: 14px; padding: 12px 14px; border-radius: 8px; }
  .topbar-community .topbar-link:hover{ background: var(--surface); }
  .topbar-community .topbar-right{ grid-column: 2; grid-row: 2; margin-left: 0; align-items: center; gap: 10px; }
  .topbar-community .topbar-search{ max-width: none; min-width: 0; }
}

@media (max-width: 640px){
  .topbar{ padding: 8px 12px; gap: 8px; }
  .topbar-toggle{ font-size: 20px; }
  .topbar-right{ gap: 8px; }
  .topbar-right .btn{ font-size: 12px; padding: 7px 12px; }
}