/* Poofy — shared header used by every page (home, CRM, plan). Self-contained tokens so the CRM can load it alone. */
:root { --nav-ink: #0b0c10; --nav-ink-2: #15171e; --nav-chalk: #ffffff; --nav-dim: #9097a8; --nav-hair: rgba(255,255,255,.1); --nav-violet: #7b5cff;
  --nav-display: "Bricolage Grotesque", "Avenir Next", "Helvetica Neue", Arial, sans-serif; --nav-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --max: 1120px; --gutter: clamp(16px, 4vw, 40px); }
.container { max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }
.container.wide { max-width: none; }
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  background: rgba(11, 12, 16, 0.78); border-bottom: 1px solid var(--nav-hair); color: var(--nav-chalk); }
.nav .container { display: flex; align-items: center; gap: 20px; min-height: 64px; }
.logo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--nav-display); font-weight: 800; font-size: 1.35rem; letter-spacing: -0.03em; text-decoration: none; color: var(--nav-chalk); }
.logo svg { width: 28px; height: 28px; }
.logo small { font-family: var(--nav-mono); font-size: .72rem; font-weight: 400; letter-spacing: .08em; color: var(--nav-dim); text-transform: uppercase; }
.nav .links { display: flex; gap: 22px; margin-left: auto; }
.nav .links a { text-decoration: none; color: var(--nav-dim); font-size: 0.92rem; }
.nav .links a:hover { color: var(--nav-chalk); }
.nav .tools { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.nav .links + .tools { margin-left: 0; }
@media (max-width: 860px) { .nav .links { display: none; } }
.teambar { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--nav-ink-2); border: 1px solid var(--nav-hair); font-family: var(--nav-mono); font-size: 0.74rem; }
.teambar a { padding: 5px 11px; border-radius: 999px; text-decoration: none; color: var(--nav-dim); }
.teambar a:hover { color: var(--nav-chalk); }
.teambar a[aria-current] { background: var(--nav-chalk); color: var(--nav-ink); }
@media (max-width: 600px) {
  .nav .tools:has(.btn) .teambar { display: none; }
  .nav .container { gap: 12px; }
  .nav .btn { padding: 8px 13px; font-size: 0.82rem; }
}