.topbar {
  height: var(--topbar-h); display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--sp-4); border-bottom: 1px solid var(--border);
  background: var(--surface-glass); backdrop-filter: var(--blur);
  position: sticky; top: 0; z-index: 10;
}
.topbar { border-bottom: 1px solid var(--accent-soft); }
.brand { display: flex; align-items: center; gap: var(--sp-3); color: var(--text); }
.brand:hover { color: var(--text); }
.brand-logo { height: 54px; width: auto; display: block; }
.brand-mark { height: 38px; width: auto; display: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name { font-family: var(--font-display); font-size: 20px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: #fff; }
.brand-sub { font-size: 9px; letter-spacing: .45em; text-transform: uppercase; color: var(--accent); margin-top: 2px; }
.login-logo { display: block; width: 100%; max-width: 280px; height: auto; margin: 0 auto var(--sp-4); }
.login-brand { justify-content: center; margin-bottom: var(--sp-4); }
@media (max-width: 640px) {
  .brand-name { font-size: 15px; letter-spacing: .1em; }
  .brand-sub { font-size: 8px; }
  .brand-logo { display: none; }
  .brand-mark { display: block; height: 36px; }
  .nav { gap: var(--sp-3); }
}
.content { max-width: 920px; margin: 0 auto; padding: var(--sp-4); }
.content.wide { max-width: none; }
.nav { display: flex; align-items: center; gap: var(--sp-4); }
.nav a:not(.btn) { color: var(--text-dim); font-size: var(--fs-sm); }
.nav a:not(.btn):hover { color: var(--accent); }
.row { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.grow { flex: 1; min-width: 200px; }
.login-box { max-width: 380px; margin: 12vh auto 0; padding: 0 var(--sp-4); }
.stack > * + * { margin-top: var(--sp-3); }