/* Shared topbar (logo + nav + lang + Connect Wallet + Download) for every
   public page except landing.html, which keeps its own inline copy of these
   same rules (it can't link this file without a flash-of-unstyled-header on
   first paint, since its <style> is inline). Keep both in sync by hand. */
:root {
  --lsh-bg: #161826;
  --lsh-surface: #232532;
  --lsh-text: #e9e9ed;
  --lsh-accent: #9184d9;
  --lsh-divider: color-mix(in srgb, #e9e9ed 16%, transparent);
  --lsh-font: "Inter", system-ui, sans-serif;
}
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--lsh-bg) 82%, transparent);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--lsh-divider);
}
.topbar-inner { display: flex; align-items: center; max-width: 1280px; margin: 0 auto; padding: 14px 24px; }
.topbar .brand {
  display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--lsh-text);
  font-family: var(--lsh-font); font-weight: 600; font-size: 17px;
}
.topbar .brand:hover { color: var(--lsh-text); }
.topbar .brand-text span { color: var(--lsh-accent); }
.topbar .brand-mark {
  width: 38px; height: 38px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--lsh-divider); border-radius: 8px;
  background: color-mix(in srgb, var(--lsh-accent) 14%, transparent);
  color: var(--lsh-accent);
}
.topbar .brand-mark svg { width: 23px; height: 23px; }
.topbar nav { display: flex; gap: 20px; margin-left: auto; }
.topbar nav a { color: var(--lsh-text); opacity: .7; font-size: 13.5px; text-decoration: none; white-space: nowrap; }
.topbar nav a:hover { opacity: 1; }
.topbar .lang-select {
  background: var(--lsh-surface); color: var(--lsh-text);
  border: 1px solid var(--lsh-divider); border-radius: 8px;
  font-family: var(--lsh-font); font-size: 12.5px; padding: 6px 26px 6px 10px;
  margin-left: 18px; cursor: pointer; appearance: none;
  width: 150px; flex: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239184d9' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 6px center; background-size: 14px;
}
.topbar .lang-select:hover { border-color: var(--lsh-accent); }
.topbar .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--lsh-font); font-weight: 500; font-size: 14px; line-height: 1.2;
  color: var(--lsh-text); background: transparent; border: 1px solid transparent;
  padding: 6px 10px; border-radius: 8px;
}
.topbar .btn-primary { color: var(--lsh-accent); border-color: var(--lsh-accent); }
.topbar .btn-primary:hover { background: color-mix(in srgb, var(--lsh-accent) 12%, transparent); }
.topbar .btn-secondary { border-color: var(--lsh-divider); }
.topbar .btn-secondary:hover { background: color-mix(in srgb, var(--lsh-text) 7%, transparent); color: var(--lsh-text); }
@media (max-width: 720px) {
  .topbar nav { display: none; }
  .topbar #connect-wallet-btn { display: none; }
  .topbar #wallet-balance { display: none; }
}
/* Nav + wallet controls compete for the same row above 720px too — give
   the wallet-balance pill its own earlier breakpoint so nav links never
   wrap mid-word on laptop-width windows (mirrors landing.html). */
@media (max-width: 980px) {
  .topbar #wallet-balance { display: none; }
}