.member-media-page {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 28px 0 80px;
}

.member-media-nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.member-media-nav a {
  color: #c4b5fd;
  text-decoration: none;
}

.member-media-hero,
.member-media-panel {
  border: 1px solid rgba(168, 85, 247, .34);
  border-radius: 26px;
  background: rgba(17, 15, 28, .95);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .26);
}

.member-media-hero {
  padding: 30px;
}

.member-media-hero h1 {
  margin: 8px 0 12px;
  font-family: var(--ui-font-body);
  font-size: clamp(48px, 8vw, 82px);
}

.member-media-hero p:last-child {
  max-width: 650px;
  color: rgba(255, 255, 255, .68);
  line-height: 1.65;
}

.member-media-panel {
  margin-top: 18px;
  padding: 24px;
}

.member-media-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 16px;
}

.member-media-panel-head h2 {
  margin: 8px 0 0;
  font-family: var(--ui-font-body);
  font-size: clamp(30px, 4vw, 46px);
}

.member-media-panel-head button {
  padding: 10px 16px;
  border: 1px solid rgba(168, 85, 247, .5);
  border-radius: 999px;
  color: #d8b4fe;
  background: rgba(168, 85, 247, .08);
  font-weight: 800;
  cursor: pointer;
}

.member-media-message {
  min-height: 22px;
  color: #c4b5fd;
}

.member-media-message.success {
  color: #9cf0c0;
}

.member-media-message.error {
  color: #ffb4b4;
}

.member-media-grid {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.member-media-card {
  overflow: hidden;
  border: 1px solid rgba(168, 85, 247, .28);
  border-radius: 20px;
  background: rgba(28, 21, 42, .78);
}

.member-media-preview {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 0;
  background: #08070d;
  cursor: pointer;
}

.member-media-preview img,
.member-media-preview video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .25s ease;
}

.member-media-preview:hover img,
.member-media-preview:hover video {
  transform: scale(1.035);
}

.member-media-play {
  position: absolute;
  inset: 50% auto auto 50%;
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 50%;
  color: white;
  background: rgba(0,0,0,.55);
  transform: translate(-50%, -50%);
}

.member-media-details {
  display: grid;
  gap: 5px;
  padding: 14px;
}

.member-media-details strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.member-media-details span {
  color: rgba(255, 255, 255, .56);
  font-size: 12px;
}

.member-media-empty {
  grid-column: 1 / -1;
  padding: 28px;
  border: 1px solid rgba(168, 85, 247, .26);
  border-radius: 18px;
  color: rgba(255, 255, 255, .66);
}

.member-media-lightbox {
  position: fixed;
  z-index: 9999;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 30px;
  background: rgba(4, 3, 9, .94);
}

.member-media-lightbox button {
  position: fixed;
  top: 20px;
  right: 22px;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 50%;
  color: white;
  background: rgba(255,255,255,.08);
  font-size: 28px;
  cursor: pointer;
}

#member-media-lightbox-content {
  display: grid;
  max-width: min(1100px, 94vw);
  max-height: 88vh;
  place-items: center;
}

#member-media-lightbox-content img,
#member-media-lightbox-content video {
  max-width: 100%;
  max-height: 88vh;
  border-radius: 16px;
}

.media-lightbox-open {
  overflow: hidden;
}

.hidden {
  display: none !important;
}

@media (max-width: 880px) {
  .member-media-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .member-media-page {
    width: min(100% - 18px, 1180px);
  }

  .member-media-grid {
    grid-template-columns: 1fr;
  }

  .member-media-lightbox {
    padding: 16px;
  }
}

/* Separate image and video lightbox rendering */

.member-media-lightbox.is-video-lightbox
#member-media-lightbox-content {
  width: min(1180px, 88vw);
  height: min(82vh, 760px);
}

.member-media-lightbox.is-image-lightbox
#member-media-lightbox-content {
  width: auto;
  height: auto;
}

.member-lightbox-video {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 1180px;
  max-height: 82vh;
  border-radius: 16px;
  background: #000;
  object-fit: contain;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .5);
}

.member-lightbox-image {
  display: block;
  max-width: min(1100px, 88vw);
  max-height: 82vh;
  border-radius: 16px;
  object-fit: contain;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .5);
}

.member-media-lightbox-nav {
  position: fixed !important;
  z-index: 10002;
  top: 50% !important;
  width: 56px !important;
  height: 56px !important;
  border: 1px solid rgba(255, 255, 255, .3) !important;
  border-radius: 50% !important;
  color: white !important;
  background: rgba(13, 10, 23, .76) !important;
  font-size: 42px !important;
  line-height: 1 !important;
  cursor: pointer;
  transform: translateY(-50%);
  backdrop-filter: blur(12px);
}

.member-media-lightbox-prev {
  right: auto !important;
  left: 22px !important;
}

.member-media-lightbox-next {
  right: 22px !important;
  left: auto !important;
}

.member-media-lightbox-caption {
  position: fixed;
  z-index: 10001;
  left: 50%;
  bottom: 20px;
  display: grid;
  gap: 4px;
  min-width: 220px;
  max-width: calc(100vw - 160px);
  padding: 11px 16px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 14px;
  color: white;
  background: rgba(13, 10, 23, .78);
  text-align: center;
  transform: translateX(-50%);
  backdrop-filter: blur(12px);
}

.member-media-lightbox-caption strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.member-media-lightbox-caption span {
  color: rgba(255, 255, 255, .6);
  font-size: 12px;
}

.member-media-preview video {
  opacity: 0;
  transition:
    opacity .22s ease,
    transform .25s ease;
}

.member-media-preview video.member-video-preview-ready {
  opacity: 1;
}

.member-media-preview video.member-video-preview-failed {
  opacity: 0;
}

@media (max-width: 760px) {
  .member-media-lightbox.is-video-lightbox
  #member-media-lightbox-content {
    width: 94vw;
    height: 72vh;
  }

  .member-lightbox-video {
    max-height: 72vh;
  }
}

@media (max-width: 640px) {
  .member-media-lightbox-nav {
    top: auto !important;
    bottom: 18px;
    width: 48px !important;
    height: 48px !important;
    font-size: 36px !important;
    transform: none;
  }

  .member-media-lightbox-prev {
    left: 16px !important;
  }

  .member-media-lightbox-next {
    right: 16px !important;
  }

  .member-media-lightbox-caption {
    bottom: 78px;
    max-width: calc(100vw - 32px);
  }

  .member-media-lightbox.is-video-lightbox
  #member-media-lightbox-content {
    height: 64vh;
  }

  .member-lightbox-video {
    max-height: 64vh;
  }
}


.member-media-description {
  margin: 4px 0 0;
  color: rgba(255,255,255,.68);
  font-size: 12px;
  line-height: 1.45;
}

.member-media-hashtags,
.member-lightbox-hashtags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.member-media-hashtags span,
.member-lightbox-hashtags span {
  padding: 4px 7px;
  border: 1px solid rgba(168,85,247,.3);
  border-radius: 999px;
  color: #d8b4fe;
  background: rgba(168,85,247,.08);
  font-size: 10px;
  font-weight: 800;
}

.member-media-lightbox-caption p {
  margin: 4px 0;
  color: rgba(255,255,255,.72);
  font-size: 12px;
  line-height: 1.4;
}

.member-media-lightbox-caption:has(strong[hidden]) {
  min-width: 160px;
}

.member-media-discovery{display:grid;grid-template-columns:minmax(220px,1fr) minmax(150px,.45fr) minmax(150px,.45fr) auto;gap:12px;align-items:end;margin:20px 0 12px;padding:15px;border:1px solid rgba(168,85,247,.25);border-radius:16px;background:rgba(8,7,13,.34)}
.member-media-discovery label{display:grid;gap:7px;color:#d8b4fe;font-size:11px;font-weight:800;text-transform:uppercase}
.member-media-discovery input,.member-media-discovery select{min-height:42px;padding:9px 11px;border:1px solid rgba(168,85,247,.32);border-radius:11px;color:#fff;background:#171320}
.member-media-discovery button{min-height:42px;padding:9px 14px;border:1px solid rgba(168,85,247,.42);border-radius:999px;color:#d8b4fe;background:rgba(168,85,247,.08);font-weight:800}
.member-media-active-tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}.member-media-active-tags button{padding:6px 10px;border:1px solid rgba(168,85,247,.32);border-radius:999px;color:#d8b4fe;background:rgba(168,85,247,.07);font-size:11px;font-weight:800}
@media(max-width:780px){.member-media-discovery{grid-template-columns:repeat(2,1fr)}}@media(max-width:560px){.member-media-discovery{grid-template-columns:1fr}}


.member-media-discovery {
  grid-template-columns:
    minmax(220px,1fr)
    minmax(140px,.4fr)
    minmax(160px,.45fr)
    minmax(150px,.4fr)
    auto;
}

.member-media-collection {
  justify-self: start;
  padding: 5px 8px;
  border: 1px solid rgba(239,68,68,.3);
  border-radius: 999px;
  color: #fecaca !important;
  background: rgba(239,68,68,.08);
  font-size: 10px !important;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.member-collection-overview{margin:18px 0;padding:18px;border:1px solid rgba(168,85,247,.26);border-radius:18px;background:rgba(8,7,13,.34)}
.member-collection-overview h3{margin:7px 0 14px;font-family:var(--ui-font-body);font-size:28px}
.member-collection-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.member-collection-card{overflow:hidden;padding:0;border:1px solid rgba(168,85,247,.28);border-radius:16px;color:#fff;background:rgba(28,21,42,.78);text-align:left;cursor:pointer}
.member-collection-cover{aspect-ratio:16/10;background:#08070d}.member-collection-cover img,.member-collection-cover video{width:100%;height:100%;object-fit:cover}
.member-collection-body{display:grid;gap:4px;padding:12px}.member-collection-body span{color:rgba(255,255,255,.56);font-size:11px}
.member-media-pinned{position:absolute;z-index:4;top:10px;left:10px;padding:6px 9px;border-radius:999px;color:#fff;background:rgba(168,85,247,.8);font-size:10px;font-weight:900;text-transform:uppercase}
@media(max-width:950px){.member-collection-cards{grid-template-columns:repeat(2,1fr)}}@media(max-width:540px){.member-collection-cards{grid-template-columns:1fr}}

.member-media-hashtags span{cursor:pointer;transition:.18s}.member-media-hashtags span:hover,.member-media-hashtags span:focus{color:#fff;border-color:#a855f7;background:rgba(168,85,247,.22);outline:none}

.member-media-pinned-filter{display:flex!important;align-items:center;gap:7px!important;min-height:42px;color:#d8b4fe!important}.member-media-pinned-filter input{width:auto}
.member-media-lightbox-info{position:fixed;z-index:10003;top:24px;right:24px;bottom:24px;width:min(390px,34vw);overflow:auto;padding:20px;border:1px solid rgba(168,85,247,.3);border-radius:20px;color:#fff;background:rgba(13,10,23,.92);backdrop-filter:blur(18px)}
.member-media-lightbox-info h2{margin:8px 0 0;font-family:var(--ui-font-body);font-size:clamp(28px,3vw,42px)}.member-media-lightbox-info p{color:rgba(255,255,255,.72);line-height:1.55}
.member-media-lightbox-collection{padding:8px 11px;border:1px solid rgba(239,68,68,.4);border-radius:999px;color:#fecaca;background:rgba(239,68,68,.1);font-weight:800}.member-media-lightbox-hashtags{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.member-media-lightbox-hashtags button{padding:7px 10px;border:1px solid rgba(168,85,247,.35);border-radius:999px;color:#d8b4fe;background:rgba(168,85,247,.1);font-weight:800}
.member-media-lightbox-date{display:block;margin-top:12px;color:rgba(255,255,255,.5);font-size:12px}.member-media-lightbox-pinned{display:inline-block;padding:6px 9px;border-radius:999px;background:rgba(168,85,247,.8);font-size:10px;font-weight:900;text-transform:uppercase}
.member-media-related{margin-top:22px;padding-top:18px;border-top:1px solid rgba(168,85,247,.22)}.member-media-related h3{margin:0 0 12px;font-size:16px}.member-media-related-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.member-media-related-card{overflow:hidden;padding:0;border:1px solid rgba(168,85,247,.25);border-radius:12px;color:#fff;background:rgba(20,16,31,.78);text-align:left}.member-media-related-card img,.member-media-related-card video{width:100%;aspect-ratio:4/3;object-fit:cover}.member-media-related-card span{display:block;overflow:hidden;padding:8px;text-overflow:ellipsis;white-space:nowrap;font-size:11px}
.member-media-lightbox.is-image-lightbox #member-media-lightbox-content,.member-media-lightbox.is-video-lightbox #member-media-lightbox-content{max-width:calc(100vw - min(430px,38vw));margin-right:min(410px,36vw)}.member-media-lightbox-caption{display:none!important}
@media(max-width:900px){.member-media-lightbox-info{top:auto;left:12px;right:12px;bottom:12px;width:auto;max-height:42vh}.member-media-lightbox.is-image-lightbox #member-media-lightbox-content,.member-media-lightbox.is-video-lightbox #member-media-lightbox-content{max-width:94vw;max-height:52vh;margin:0 auto 42vh}}


.member-media-card-engagement {
  position: absolute;
  z-index: 5;
  right: 10px;
  bottom: 10px;
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 6px 8px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  color: white;
  background: rgba(8,7,13,.76);
  font-size: 10px;
  backdrop-filter: blur(10px);
}

.member-media-card-engagement button {
  padding: 0;
  border: 0;
  color: white;
  background: transparent;
  font-size: 18px;
  cursor: pointer;
}

.member-media-card-engagement button.active {
  color: #fb7185;
}

.member-media-lightbox-engagement {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 14px;
}

.member-media-lightbox-engagement button {
  padding: 9px 12px;
  border: 1px solid rgba(244,63,94,.38);
  border-radius: 999px;
  color: #fecdd3;
  background: rgba(244,63,94,.08);
  font-weight: 900;
  cursor: pointer;
}

.member-media-lightbox-engagement button.active {
  color: white;
  background: rgba(244,63,94,.7);
}

.member-media-lightbox-engagement span {
  color: rgba(255,255,255,.55);
  font-size: 12px;
}


/* Lightbox info controls must not inherit the fixed close-button layout. */
.member-media-lightbox-info button,
.member-media-lightbox-info .member-media-lightbox-collection,
.member-media-lightbox-info .member-media-lightbox-hashtags button,
.member-media-lightbox-info .member-media-lightbox-engagement button,
.member-media-lightbox-info .member-media-related-card {
  position: static !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  width: auto !important;
  height: auto !important;
  transform: none !important;
}

.member-media-lightbox-info {
  display: block;
}

.member-media-lightbox-hashtags {
  align-items: center;
}

.member-media-lightbox-engagement {
  position: static;
  width: 100%;
}

.member-media-lightbox-engagement button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 92px;
  min-height: 40px;
}

.member-media-related-card {
  display: block;
  width: 100% !important;
}

.member-media-lightbox-close {
  z-index: 10005;
}

@media (max-width: 900px) {
  .member-media-lightbox-engagement {
    padding-bottom: 4px;
  }
}


.member-favorites-summary {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(244,63,94,.2);
  border-radius: 14px;
  background: rgba(244,63,94,.05);
}

.member-favorites-summary span {
  color: #fecdd3;
  font-weight: 800;
}

.member-favorites-summary button {
  position: static !important;
  width: auto !important;
  height: auto !important;
  padding: 8px 12px;
  border: 1px solid rgba(244,63,94,.35);
  border-radius: 999px;
  color: #fecdd3;
  background: rgba(244,63,94,.08);
  font-weight: 800;
  cursor: pointer;
}

@media (max-width: 600px) {
  .member-favorites-summary {
    align-items: stretch;
    flex-direction: column;
  }
}