:root{--pink:#ff2aa1;--pink-600:#e51c8d;--ink:#0f0f14;--card:#14141d;--muted:#9aa0a6;--ring: rgba(255,42,161,.35);--success:#22c55e;--offline:#4b5563;--gradient: linear-gradient(135deg, rgba(255,42,161,.12), rgba(99,102,241,.12));--glass: rgba(255,255,255,.06)}
*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--ink);color:#fff;font-family:Inter, ui-sans-serif, system-ui}
a{color:inherit;text-decoration:none}img{display:block;max-width:100%;height:auto}.container{max-width:1200px;margin:0 auto;padding:24px}
.btn{padding:12px 18px;border-radius:16px;border:1px solid transparent;background:var(--pink);font-weight:600;box-shadow:0 10px 30px rgba(255,42,161,.25);transition:all .2s ease; display:inline-flex; align-items:center; gap:8px}
.btn:hover{transform:translateY(-1px); background:var(--pink-600)}.btn.secondary{background:transparent;border-color:#2a2a35}.btn.ghost{background:transparent;border-color:transparent}
.badge{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:9999px; background:var(--glass); border:1px solid #242433}
.badge .dot{width:10px;height:10px;border-radius:50%}.badge.online .dot{background:var(--success)}.badge.offline .dot{background:var(--offline)}
.nav{position:sticky; top:0; z-index:10; backdrop-filter:saturate(180%) blur(12px);background:linear-gradient(0deg, rgba(15,15,20,0) 0%, rgba(15,15,20,.85) 100%);border-bottom:1px solid #1f1f2a}
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding:16px 24px}.logo{display:flex; align-items:center; gap:10px; font-weight:800}
.logo-mark{width:40px;height:40px;border-radius:10px;background:radial-gradient(circle at 30% 20%, #fff 0%, #ffd1ea 10%, #ff55b2 40%, #6f4af8 100%)}
.hero{background: radial-gradient(80% 60% at 20% 0%, rgba(255, 42, 161, .18) 0%, rgba(255, 42, 161, 0) 70%),radial-gradient(60% 40% at 80% 0%, rgba(99,102,241,.18) 0%, rgba(99,102,241,0) 70%);border-bottom:1px solid #1e1e29}
.hero-grid{display:grid; grid-template-columns: 1.2fr .8fr; gap:28px; align-items:center}
.grid{display:grid; gap:18px;grid-template-columns: repeat(4, minmax(0,1fr))}
@media (max-width: 1024px){.hero-grid{grid-template-columns: 1fr}.grid{grid-template-columns: repeat(2, minmax(0,1fr))}}
@media (max-width: 640px){.grid{grid-template-columns: 1fr}}
.card{background: var(--gradient);border:1px solid #26263a;border-radius:22px;overflow:hidden;position:relative;transition:transform .15s ease, box-shadow .15s ease;min-height: 340px}
.card:hover{transform:translateY(-3px); box-shadow:0 20px 60px rgba(15,10,35,.35)}
.card-media{position:relative; overflow:hidden; aspect-ratio: 16/11;background:#0f0f18}.card-media img{width:100%; height:100%; object-fit:cover;filter:saturate(1.05) contrast(1.02)}
.card-body{padding:16px 16px 18px; display:flex; flex-direction:column; gap:10px}.card-title{display:flex; align-items:flex-start; justify-content:space-between; gap:10px}
.card-title h3{margin:0;font-size:18px}.card-meta{display:flex; gap:8px; flex-wrap:wrap; color:#c9cbd1; font-size:14px}
.status-dot{width:10px;height:10px;border-radius:50%}.status-dot.online{background:var(--success)}.status-dot.offline{background:var(--offline)}
.pill{padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid #2a2a3a;font-size:12px}.actions{margin-top:auto; display:flex; gap:10px}
.footer{border-top:1px solid #1f1f29;color:#aeb3bb}.footer-inner{display:flex; justify-content:space-between; padding:28px 0; gap:20px; flex-wrap:wrap}
.ribbon{position:absolute; top:12px; left:12px; z-index:2;background:rgba(15,15,20,.7); border:1px solid #2b2b3b; padding:8px 12px; border-radius:12px; backdrop-filter: blur(6px);font-weight:600}
.search{display:flex; gap:10px; background:#101019; border:1px solid #232339; border-radius:18px; padding:10px}
.search input{flex:1;background:transparent;border:0;outline:0;color:#fff;font-size:16px;padding:10px 12px}
.modal-backdrop{position:fixed; inset:0; background:rgba(2,2,4,.66); display:none; place-items:center; z-index:50; backdrop-filter: blur(4px)}
.modal{width:min(520px, 94vw); background:#0f0f18; border:1px solid #26263a; border-radius:22px; overflow:hidden}

/* Creator Portal helpers */
.hidden{display:none;}
.thumb{width:100%; height:160px; object-fit:cover; border-radius:.75rem;}
.btn.primary{background: var(--accent,#111827); color:#fff;}
.muted{color:#6b7280;}

.members-page .card {
    background: var(--card, #14141d);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .3);
}






/*
 * Made by Erik Terwan
 * 24th of November 2015
 * MIT License
 *
 *
 * If you are thinking of using this in
 * production code, beware of the browser
 * prefixes.
 */





/* Menu code starts here */

#menuToggle
{
  display: block;
  /* You can also use relative/absolute here if you want to stay on the top */
  position: fixed;
  top: 80px;
  left: 50px;
  
  z-index: 1;
  
  -webkit-user-select: none;
  user-select: none;
}

#menuToggle a
{
  text-decoration: none;
  color: #e41087;
  
  transition: color 0.3s ease;
}

#menuToggle a:hover
{
  color: tomato;
}


#menuToggle input
{
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  
  cursor: pointer;
  
  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger */
  
  -webkit-touch-callout: none;
}

/*
 * Just a quick hamburger
 */
#menuToggle span
{
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  
  background: #cdcdcd;
  border-radius: 3px;
  
  z-index: 1;
  
  transform-origin: 4px 0px;
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}

/* 
 * Transform all the slices of hamburger
 * into a crossmark.
 */
#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #232323;
}

/*
 * But let's hide the middle one.
 */
#menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

/*
 * Ohyeah and the last one should go the other direction
 */
#menuToggle input:checked ~ span:nth-last-child(2)
{
  transform: rotate(-45deg) translate(0, -1px);
}

/*
 * Make this absolute positioned
 * at the top left of the screen
 */
#menu
{
  position: absolute;
  max-width: 400px;
  width: 100vw;
  max-height: 100vh;
  margin: -100px 0 0 -50px;
  padding: 50px;
  padding-top: 125px;
  box-sizing: border-box;
  overflow-y: auto;
  background: #ededed;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */
  
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#menu li
{
  padding: 10px 0;
  font-size: 22px;
}

#menu li label
{
  cursor: pointer;
}

/*
 * And let's slide it in from the left
 */
#menuToggle input:checked ~ ul
{
  transform: none;
}







/* SAFE: logo-mark image fallback (2025-09-21) */
.logo-mark{background-image:url('../assets/img/logo-mark.png');background-position:center;background-repeat:no-repeat;background-size:contain}

.live-chat-messages{
  /* Fill available space within the chat box and scroll when overflowing */
  flex: 1 1 auto;
  min-height: 220px;
  overflow-y: auto;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

@media (max-width:768px){.live-chat-messages{flex:1 1 auto;min-height:30vh;}}

#liveChatMessages{margin-bottom:auto;}