/* ── Top bar ─────────────────────────────────────────────────────────── */
  .nav-row { display: flex; align-items: center; gap: 1.5rem; height: 3.75rem; min-width: 0 }
  .nav-brand-text { font-weight: 700; font-size: .9375rem; letter-spacing: -.02em; color: var(--text) }
  .nav-links { display: none; align-items: center; gap: .125rem; flex: 1; min-width: 0 }
  .nav-hamburger { display: inline-flex; position: relative; order: 99 } /* push to end of right group on mobile */
  .nav-right { display: flex; align-items: center; gap: .375rem; margin-left: auto; flex-shrink: 0 }
  .nav-account-pill { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted) }
  .nav-auth-desktop { display: none }      /* Login + Sign up live in the drawer on mobile */
  @media (min-width: 640px) {
    .nav-links { display: flex }
    .nav-hamburger { display: none }
    .nav-account-pill { max-width: 150px }
    .nav-auth-desktop { display: inline-flex }
  }
  @media (max-width: 380px) {
    .nav-row { gap: .5rem }
    .nav-right { gap: .25rem }
    .nav-brand-text { display: none }
  }

  /* ── Mobile drawer ───────────────────────────────────────────────────── */
  .drawer { position: fixed; inset: 0; z-index: 200; pointer-events: none; visibility: hidden }
  .drawer[data-open="true"] { pointer-events: auto; visibility: visible }
  .drawer-backdrop {
    position: absolute; inset: 0;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0; transition: opacity .22s ease;
  }
  .drawer[data-open="true"] .drawer-backdrop { opacity: 1 }
  .drawer-panel {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: min(88vw, 360px);
    background: var(--bg-card);
    border-left: 1px solid rgba(255,255,255,.06);
    transform: translateX(100%);
    transition: transform .26s cubic-bezier(.4,0,.2,1);
    display: flex; flex-direction: column;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .drawer[data-open="true"] .drawer-panel { transform: translateX(0) }

  .drawer-header {
    display: flex; align-items: center; gap: .75rem;
    padding: 1rem 1rem 1rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,.05);
    position: sticky; top: 0;
    background: var(--bg-card);
    z-index: 1;
  }
  .drawer-title {
    font-size: 1rem; font-weight: 600; color: var(--text);
    flex: 1; min-width: 0;
  }
  .drawer-close {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    background: transparent; border: 0; cursor: pointer;
    color: var(--muted); border-radius: .5rem;
    transition: color .12s, background .12s;
  }
  .drawer-close:hover { color: var(--text); background: rgba(255,255,255,.05) }
  .drawer-cta {
    display: inline-flex; align-items: center; gap: .375rem;
    padding: .5rem .875rem;
    background: var(--accent); color: #fff; font-weight: 600; font-size: .8125rem;
    border-radius: 999px; text-decoration: none;
    transition: background .12s;
    flex-shrink: 0;
  }
  .drawer-cta:hover { background: var(--accent-dk) }
  .drawer-user {
    display: flex; align-items: center; gap: .5rem;
    color: var(--muted); font-size: .8125rem;
    max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  .drawer-section { padding: 1rem 0 .25rem }
  .drawer-section-label {
    display: block;
    padding: 0 1.25rem .375rem;
    font-size: .6875rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .1em;
    color: var(--dim);
  }
  .drawer-item {
    display: flex; align-items: center; gap: .75rem;
    padding: .75rem 1rem;
    margin: 0 .5rem;
    border-radius: .625rem;
    color: var(--text); text-decoration: none;
    font-size: .9375rem; font-weight: 500;
    transition: background .12s, color .12s;
    background: transparent;
    border: 1px solid transparent;
    width: calc(100% - 1rem); text-align: left;
    cursor: pointer;
    box-sizing: border-box;
  }
  .drawer-item:hover { background: rgba(255,255,255,.04) }
  .drawer-item-active {
    background: var(--bg-input);
    border-color: rgba(255,255,255,.06);
  }
  .drawer-item svg { flex-shrink: 0; color: var(--muted) }
  .drawer-item-active svg { color: var(--accent) }
  .drawer-item-danger { color: #ef9a4d }
  .drawer-item-danger svg { color: #ef9a4d }
  .drawer-item-trail {
    margin-left: auto;
    font-size: .6875rem; font-weight: 700;
    background: var(--accent); color: #fff;
    padding: .125rem .4375rem; border-radius: 999px;
    line-height: 1; min-width: 18px; text-align: center;
  }

  body[data-drawer-open="true"] { overflow: hidden }