*{box-sizing:border-box} html,body{height:100%}
body{margin:0; font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:var(--text); background: radial-gradient(1200px 800px at 80% -10%, rgba(232,77,122,.12), transparent 60%), linear-gradient(180deg,var(--bg),var(--bg2));
  overflow-x:hidden;
}
.wrap{max-width:960px; margin:0 auto; padding:28px 16px 60px}
.backdrop{position:fixed; inset:0; z-index:-2}
.pattern{position:absolute; inset:0; opacity:var(--patternOpacity, .35);
  background-image: radial-gradient(circle at 25px 25px, rgba(255,255,255,.06) 2px, transparent 0);
  background-size:50px 50px; animation: patternMove 26s linear infinite; animation-play-state: calc(var(--animate) * 1) == 1 ? running : paused;
}
.glow{position:absolute; inset:-20%; background: radial-gradient(600px 400px at 10% 0%, rgba(232,77,122,.25), transparent 60%);
  filter:blur(16px); animation: glowShift 18s ease-in-out infinite alternate;
}
.swarm{position:absolute; inset:0; pointer-events:none}
@keyframes patternMove{from{transform:translateY(0)} to{transform:translateY(50px)}}
@keyframes glowShift{from{transform:translate(0,0)} to{transform:translate(4%, -3%)}}

.card{background:var(--glass); border:1px solid rgba(255,255,255,.09); border-radius:18px; padding:18px; box-shadow:0 10px 30px rgba(0,0,0,.35)}
.profile{display:grid; grid-template-columns:108px 1fr; gap:18px; align-items:center; margin-top:18px}
.avatar{width:108px; height:108px; border-radius:50%; background:linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.02)); display:grid; place-items:center; overflow:hidden; position:relative}
.avatar img{width:100%; height:100%; object-fit:cover}
.avatar.placeholder::after{content:'Add avatar'; color:var(--muted); font-weight:600}
.meta h1{margin:0 0 6px; font-size:28px}
.row{display:flex; gap:12px; align-items:center; color:var(--muted)}
.status .dot{display:inline-block; width:8px; height:8px; background:#4caf50; border-radius:50%; margin-right:6px}
.bio{color:var(--muted); margin:8px 0 12px}
.details .item{color:var(--muted)}
.details a{color:var(--text); text-decoration:none; border-bottom:1px dashed rgba(255,255,255,.18)}
.socials{display:flex; flex-wrap:wrap; gap:10px; margin-top:10px}
.chip{padding:8px 10px; border-radius:999px; background:rgba(255,255,255,.06); color:var(--text); text-decoration:none; border:1px solid rgba(255,255,255,.12)}
.chip:hover{border-color:var(--accent)}

.stories{margin-top:18px}
.stories header h2{margin:0 0 8px}
.rail{display:grid; grid-auto-flow:column; grid-auto-columns: minmax(180px, 1fr); gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px}
.story{position:relative; height:280px; border-radius:14px; overflow:hidden; scroll-snap-align:start; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.03)}
.story img, .story video{width:100%; height:100%; object-fit:cover; display:block}
.cap{position:absolute; left:0; right:0; bottom:0; padding:8px 10px; font-weight:600; background:linear-gradient(180deg, transparent, rgba(0,0,0,.55));}
.rail-controls{display:flex; justify-content:space-between; gap:8px; margin-top:6px}
.scroll{background:transparent; border:1px solid rgba(255,255,255,.12); color:var(--text); padding:8px 10px; border-radius:10px; cursor:pointer}
.empty{color:var(--muted); padding:6px 0}

.player{margin-top:18px}
.player header{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px}
.player h2{margin:0}
.controls button{background:transparent; border:1px solid rgba(255,255,255,.12); color:var(--text); padding:8px 10px; border-radius:10px; cursor:pointer; margin-left:6px}
.controls button.active{border-color:var(--accent); color:var(--accent)}

.box{display:grid; grid-template-columns:140px 1fr; gap:18px; align-items:center}
.cover{height:140px; border-radius:14px; background:linear-gradient(135deg, rgba(232,77,122,.35), rgba(255,255,255,.06)); border:1px solid rgba(255,255,255,.12)}
.info .title{font-weight:800; font-size:20px}
.info .artist{color:var(--muted); margin-bottom:8px}
.progress{display:grid; grid-template-columns:36px 1fr 36px; gap:8px; align-items:center}
.progress input[type="range"]{width:100%}
.buttons{display:flex; align-items:center; gap:10px; margin-top:6px}
.buttons button{background:transparent; border:1px solid rgba(255,255,255,.12); color:var(--text); padding:10px 12px; border-radius:12px; cursor:pointer}
.buttons button.primary{background:linear-gradient(135deg, var(--accent), #ff7aa9); border:none; color:white}
#volume{width:120px}

.playlist{list-style:none; margin:14px 0 0; padding:0; border-top:1px dashed rgba(255,255,255,.14)}
.playlist li{display:flex; justify-content:space-between; align-items:center; padding:10px 6px; border-bottom:1px dashed rgba(255,255,255,.06); cursor:pointer}
.playlist li:hover{background:rgba(255,255,255,.04)}
.playlist .meta{display:flex; gap:8px}
.playing{color:var(--accent)}

.foot{display:flex; justify-content:center; margin-top:20px; color:var(--muted)}
@media (max-width:700px){ .profile{grid-template-columns:88px 1fr} .box{grid-template-columns:1fr} .cover{height:110px} }


/* --- Stories responsive improvements & badges --- */
.rail{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(160px, 48%); gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; padding:6px 4px 10px; -webkit-overflow-scrolling:touch}
@media (min-width:700px){ .rail{grid-auto-columns: minmax(220px, 30%);} }
@media (min-width:1100px){ .rail{grid-auto-columns: minmax(240px, 1fr);} }
.story{position:relative; height:300px; border-radius:14px; overflow:hidden; scroll-snap-align:start; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.03)}
.story img, .story video{width:100%; height:100%; object-fit:cover; display:block}
.story video{filter:saturate(1.05) contrast(1.03)}
.story::before{content:''; position:absolute; inset:0; box-shadow:inset 0 -80px 100px -60px rgba(0,0,0,.85); pointer-events:none}
.badge{position:absolute; top:8px; right:8px; padding:4px 8px; font-size:12px; border-radius:999px; background:rgba(0,0,0,.6); border:1px solid rgba(255,255,255,.2)}

/* --- Lightbox (modal) --- */
.lightbox{position:fixed; inset:0; z-index:60; display:grid; place-items:center}
.lightbox.hidden{display:none}
.lb-backdrop{position:absolute; inset:0; background:rgba(0,0,0,.65); backdrop-filter:blur(2px)}
.lb-body{position:relative; width:min(1080px, 92vw); height:min(88vh, 900px); display:grid; grid-template-rows:1fr auto; gap:8px}
.viewer{margin:0; border-radius:16px; overflow:hidden; background:#000; display:grid; place-items:center; border:1px solid rgba(255,255,255,.12)}
.viewer img, .viewer video{max-width:100%; max-height:100%; object-fit:contain; width:auto; height:auto; background:#000; display:block}
.lb-cap{color:var(--text); text-align:center; opacity:.85}
.lb-close{position:absolute; top:-8px; right:-8px; background:#111; color:#fff; border:1px solid rgba(255,255,255,.2); border-radius:999px; width:40px; height:40px; cursor:pointer}
.lb-nav{position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.2); color:#fff; border-radius:12px; padding:10px 14px; cursor:pointer}
.lb-nav.prev{left:-4px} .lb-nav.next{right:-4px}

/* v4 — Stories grid (3 per row), responsive thumbnails */
.grid-stories{display:grid; gap:12px; grid-template-columns:1fr}
@media (min-width:640px){ .grid-stories{grid-template-columns:repeat(2,1fr)} }
@media (min-width:980px){ .grid-stories{grid-template-columns:repeat(3,1fr)} }
.story{position:relative; border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.03)}
.story .thumb{width:100%; aspect-ratio:16/9; overflow:hidden; display:block; background:#0b0d14}
.story img, .story video{width:100%; height:100%; object-fit:cover; display:block}
.cap{padding:8px 10px; font-weight:600; color:var(--text); opacity:.9; background:linear-gradient(180deg, transparent, rgba(0,0,0,.55)); position:absolute; left:0; right:0; bottom:0}

/* Modal controls fixed and visible */
.lightbox .lb-body{width:min(1040px, 96vw); height:min(90vh, 900px);}
.lb-close{top:8px; right:8px; z-index:2}
.lb-nav.prev{left:8px} .lb-nav.next{right:8px}
.viewer{position:relative}
.viewer img, .viewer video{max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain}

.story:hover{outline:1px solid rgba(255,255,255,.18); transform:translateY(-1px); transition:.15s}


/* v6: ensure modal sits above everything and buttons are visible */
.lightbox{z-index:9999}
.lb-backdrop{background:rgba(0,0,0,.75)}
.lb-body{width:min(1080px, 96vw); height:min(90vh, 900px)}
.lb-close, .lb-nav{box-shadow:0 6px 18px rgba(0,0,0,.35)}
.story{cursor:pointer}


/* v7 — Responsive modal media + open animation */
.lightbox:not(.hidden) .lb-backdrop{animation: lbFade .18s ease-out both}
.lb-body{transform:scale(.96); opacity:0; animation: lbPop .22s cubic-bezier(.18,.9,.18,1.0) .02s forwards}
@keyframes lbFade{from{opacity:0} to{opacity:1}}
@keyframes lbPop{from{transform:scale(.96); opacity:0} to{transform:scale(1); opacity:1}}

.viewer{margin:0; border-radius:16px; overflow:hidden; background:#000; display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.12)}
.viewer img, .viewer video{width:100%; height:auto; max-height:72vh; object-fit:contain}
@media (max-width:640px){
  .lb-body{width:96vw; height:auto; grid-template-rows:1fr auto}
  .viewer img, .viewer video{max-height:70vh}
  .lb-close{top:6px; right:6px}
  .lb-nav.prev{left:6px} .lb-nav.next{right:6px}
}


/* v8 — Robust responsive modal layout */
.lightbox{position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; padding:16px; box-sizing:border-box}
.lb-backdrop{position:absolute; inset:0; background:rgba(0,0,0,.75);}
.lb-body{position:relative; width:min(980px, 96vw); max-height:92vh; display:flex; flex-direction:column; gap:10px}
.viewer{flex:1 1 auto; min-height:0; display:flex; align-items:center; justify-content:center; background:#000; border-radius:16px; overflow:hidden; border:1px solid rgba(255,255,255,.12)}
.viewer img, .viewer video{max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; display:block}
.lb-cap{color:var(--text); text-align:center; opacity:.85; padding:2px 6px}
.lb-close{position:absolute; top:8px; right:8px; background:#111; color:#fff; border:1px solid rgba(255,255,255,.2); border-radius:999px; width:40px; height:40px; cursor:pointer}
.lb-nav{position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.2); color:#fff; border-radius:12px; padding:10px 14px; cursor:pointer}
.lb-nav.prev{left:8px} .lb-nav.next{right:8px}

@media (max-width:640px){
  .lb-body{width:96vw; max-height:90vh}
  .lb-close{top:6px; right:6px; width:36px; height:36px}
  .lb-nav.prev{left:6px} .lb-nav.next{right:6px}
}

/* v8 — Opening animation */
.lightbox:not(.hidden) .lb-backdrop{animation: lbFade .18s ease-out both}
.lb-body{transform:scale(.96); opacity:0; animation: lbPop .22s cubic-bezier(.18,.9,.18,1.0) .02s forwards}
@keyframes lbFade{from{opacity:0} to{opacity:1}}
@keyframes lbPop{from{transform:scale(.96); opacity:0} to{transform:scale(1); opacity:1}}