[v-cloak] { display: none; }
body { background: var(--color-background); }

.nav { display: flex; align-items: center; gap: var(--space-3); height: auto; min-height: 64px; flex-wrap: wrap;
       padding: var(--space-3) var(--space-6); border-bottom: 1px solid var(--color-border);
       background: var(--color-surface); }
.nav-brand { display: flex; align-items: center; gap: var(--space-3); font-weight: 600; }
.nav-mark { width: 28px; height: 28px; border-radius: var(--radius-md); background: var(--color-primary);
            color: #fff; display: grid; place-items: center; font-size: 0.75rem; font-weight: 700; }
.nav-spacer { flex: 1; }

@media (max-width: 640px) {
  .nav { padding-inline: var(--space-4); }
}