/* ── Membership & Tier Permission Styles ── */

/* Modal */
.modal{
  position:fixed; inset:0; z-index:1000;
  display:none; align-items:center; justify-content:center;
}
.modal.isOpen{display:flex}
.modal__backdrop{
  position:absolute; inset:0;
  background:rgba(0,0,0,0.72);
  backdrop-filter:blur(8px);
}
.modal__dialog{
  position:relative;
  width:min(440px, calc(100% - 32px));
  max-height:calc(100vh - 64px);
  overflow-y:auto;
  background: linear-gradient(180deg, rgba(10,16,34,0.98), rgba(7,10,18,0.98));
  border:1px solid rgba(255,255,255,0.14);
  border-radius:var(--radius2);
  padding:32px 28px;
  box-shadow:0 40px 120px rgba(0,0,0,0.6);
}
.modal__close{
  position:absolute; top:14px; right:14px;
  width:36px; height:36px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.05);
  color:var(--text);
  font-size:20px;
  cursor:pointer;
  display:grid; place-items:center;
}
.modal__close:hover{background:rgba(255,255,255,0.10)}
.modal__icon{
  width:56px; height:56px;
  border-radius:18px;
  display:grid; place-items:center;
  font-size:24px;
  background: radial-gradient(circle at 30% 30%, rgba(124,92,255,0.25), rgba(51,227,255,0.12));
  border:1px solid rgba(255,255,255,0.14);
  margin:0 auto 16px;
}
.modal__title{margin:0 0 8px; font-size:22px; text-align:center}
.modal__desc{margin:0 0 20px; color:var(--muted); font-size:14px; line-height:1.6; text-align:center}

/* Tier Badges */
.tierBadge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:var(--mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:0.6px;
  text-transform:uppercase;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(0,0,0,0.20);
}
.tierBadge--free{color:#48E6A6; border-color:rgba(72,230,166,0.30)}
.tierBadge--premium{color:#F6D37A; border-color:rgba(246,211,122,0.35)}
.tierBadge--inner-circle{color:#F6D37A; border-color:rgba(246,211,122,0.35)}
.tierBadge--collector{color:#F6D37A; border-color:rgba(246,211,122,0.35)}

/* Tier Permissions List */
.tierPerms{
  display:flex; flex-wrap:wrap; gap:6px;
  justify-content:center;
  margin:14px 0;
}
.tierPerm{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:12px;
  color:rgba(255,255,255,0.72);
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.04);
}
.tierPerm--small{font-size:11px; padding:3px 8px}

/* Nav Member Button */
.nav__member{display:flex; align-items:center; position:relative; margin-left:6px}
.memberBtn{
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.05);
  color:var(--text);
  cursor:pointer;
  font-family:var(--mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:0.4px;
}
.memberBtn:hover{background:rgba(255,255,255,0.08)}
.memberBtn__arrow{font-size:10px; color:var(--faint)}
.btn--small{padding:8px 12px; font-size:12px}

/* Member Dropdown */
.memberDropdown{
  display:none;
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  width:280px;
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(10,16,34,0.96);
  backdrop-filter:blur(18px);
  box-shadow:0 22px 70px rgba(0,0,0,0.55);
  padding:16px;
  z-index:100;
}
.memberDropdown.isOpen{display:block}
.memberDropdown__header{margin-bottom:12px}
.memberDropdown__email{font-size:12px; color:var(--faint); margin-bottom:6px; word-break:break-all}
.memberDropdown__perms{display:flex; flex-wrap:wrap; gap:4px; margin-bottom:12px}
.memberDropdown__actions{display:flex; gap:8px}

/* Gated Content Overlay */
.gated{overflow:hidden}
.gated > *:not(.gateOverlay){filter:blur(6px); pointer-events:none; user-select:none}
.gateOverlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(7,10,18,0.80);
  backdrop-filter:blur(4px);
  border-radius:inherit;
  z-index:10;
}
.gateOverlay__inner{
  text-align:center;
  padding:24px;
  max-width:320px;
}
.gateOverlay__icon{font-size:32px; margin-bottom:12px}
.gateOverlay__title{font-size:16px; font-weight:800; margin-bottom:6px}
.gateOverlay__desc{font-size:13px; color:var(--muted); line-height:1.5; margin-bottom:16px}

/* Membership Section Enhancements */
.panel--tier{position:relative; overflow:hidden; transition:transform 0.2s, box-shadow 0.2s}
.panel--tier:hover{transform:translateY(-2px); box-shadow:0 24px 60px rgba(0,0,0,0.3)}
.panel--current{
  border-color:rgba(72,230,166,0.40) !important;
  box-shadow:0 0 0 2px rgba(72,230,166,0.15), 0 22px 60px rgba(0,0,0,0.3);
}
.panel--current::after{
  content:'CURRENT';
  position:absolute;
  top:12px; right:12px;
  font-family:var(--mono);
  font-size:10px;
  font-weight:700;
  letter-spacing:0.8px;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(72,230,166,0.18);
  border:1px solid rgba(72,230,166,0.30);
  color:#48E6A6;
}

/* Responsive */
@media (max-width: 760px){
  .modal__dialog{padding:24px 20px}
  .memberDropdown{width:260px; right:-40px}
  .nav__member{margin-left:0}
}