/* ============================================================
   LottoIQ — Member Nav
   Sticky top navigation bar shared across all member pages.
   ============================================================ */

nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(10, 15, 30, 0.95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--navy-4);
  padding: 0 24px;
}

.nav-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 54px;
}

/* ── Logo ── */
/* "Lotto" = white, "IQ" = gold (via span), ".ca" = white */
.nav-logo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 19px;
  color: var(--text);
  text-decoration: none;
  letter-spacing: -0.03em;
  white-space: nowrap;
  flex-shrink: 0;
}

.nav-logo span { color: var(--gold); }

/* ── Right side controls ── */
.nav-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* Tier badge */
.tier-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  padding: 4px 11px;
  border-radius: 20px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.tier-badge.standard {
  background: rgba(138, 149, 170, 0.1);
  border: 1px solid var(--text-dim);
  color: var(--text-muted);
}

.tier-badge.insider {
  background: var(--gold-glow);
  border: 1px solid var(--gold-bd);
  color: var(--gold);
}

/* Upgrade pill */
.nav-upgrade {
  background:    var(--gold);
  color:         var(--navy);
  border:        none;
  font-family:   var(--font-display);
  font-size:     13px;
  font-weight:   700;
  padding:       6px 14px;
  border-radius: 20px;
  text-decoration: none;
  transition:    opacity 0.15s;
  white-space:   nowrap;
}

.nav-upgrade:hover { opacity: 0.85; }

/* Member avatar circle */
.nav-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--navy-3);
  border: 1px solid var(--navy-5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  cursor: default;
  user-select: none;
  flex-shrink: 0;
}

/* Sign out button */
.nav-logout {
  background:  none;
  border:      1px solid var(--navy-4);
  padding:     5px 12px;
  border-radius: 6px;
  font-family: var(--font-body);
  font-size:   13px;
  color:       var(--text-muted);
  cursor:      pointer;
  transition:  color 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.nav-logout:hover {
  color: var(--text);
  border-color: var(--navy-5);
}

/* Manage account link */
.nav-manage {
  font-size:       13px;
  color:           var(--text-muted);
  text-decoration: none;
  transition:      color 0.15s;
  white-space:     nowrap;
}

.nav-manage:hover { color: var(--text); }