:root{
  --primary:#f70264;
  --accent:#22d3ee;
  --bg:#090311;
  --text:#f7f2ff;
  --muted:rgba(247,242,255,.72);
  --card:rgba(18,14,32,.82);
  --card-strong:rgba(14,10,28,.92);
  --line:rgba(255,255,255,.1);
  --shadow:0 20px 60px rgba(0,0,0,.4);
  --shadow-soft:0 10px 35px rgba(0,0,0,.28);
  --radius:24px;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%}
body{
  font-family:Arial,Helvetica,sans-serif;
  background:
    radial-gradient(circle at top, rgba(247,2,100,.18), transparent 28%),
    radial-gradient(circle at 80% 15%, rgba(34,211,238,.12), transparent 24%),
    linear-gradient(180deg,#06020a 0%,#0a0513 45%,#040208 100%);
  color:var(--text);
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,textarea,select{font:inherit}
button{border:0;background:none;color:inherit}
input,textarea,select{
  width:100%;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  color:var(--text);
  border-radius:16px;
  padding:.95rem 1rem;
  outline:none;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
textarea{resize:vertical;min-height:110px}
input::placeholder,textarea::placeholder{color:rgba(247,242,255,.45)}
input:focus,textarea:focus,select:focus{
  border-color:rgba(34,211,238,.55);
  box-shadow:0 0 0 4px rgba(34,211,238,.12);
}
select option{background:#140d23;color:#fff}

.app{
  min-height:100vh;
  position:relative;
  background-image:
    linear-gradient(rgba(2,2,8,.78), rgba(6,3,12,.92)),
    var(--bg-image);
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
}
.app::before,.app::after{
  content:"";
  position:fixed;
  pointer-events:none;
  filter:blur(60px);
  opacity:.65;
  z-index:0;
}
.app::before{width:220px;height:220px;left:-40px;top:80px;background:rgba(247,2,100,.28);animation:floatblob 14s ease-in-out infinite}
.app::after{width:260px;height:260px;right:-60px;top:220px;background:rgba(34,211,238,.16);animation:floatblob 18s ease-in-out infinite reverse}
.app-header,.app-main{position:relative;z-index:2;max-width:1120px;margin:0 auto}
.app-header{padding:1rem 1rem .35rem 4.7rem;min-height:84px}
.app-title{font-size:clamp(1.5rem,2vw + .8rem,2.35rem);line-height:1.05;letter-spacing:.06em;text-transform:uppercase}
.glow{text-shadow:0 0 18px rgba(247,2,100,.28),0 0 35px rgba(34,211,238,.14)}
.top-user{margin-top:.35rem;color:var(--muted)}
.live-pill{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.45rem .85rem;border-radius:999px;
  margin-bottom:.65rem;
  font-size:.8rem;font-weight:700;letter-spacing:.12em;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:var(--shadow-soft);
}
.dot{width:.7rem;height:.7rem;border-radius:50%;background:#ff5858;box-shadow:0 0 0 0 rgba(255,88,88,.85);animation:pulse 1.8s infinite}

.app-main{padding:1rem 1rem 1.8rem}
.tab-content{display:none;animation:fadeIn .28s ease}
.tab-content.active{display:block}
.tab-content > h2{font-size:1.55rem;margin-bottom:1rem;letter-spacing:.03em}
.section-subtitle,.tiny{color:var(--muted)}
.tiny{font-size:.88rem;line-height:1.45}
.center{text-align:center}

.menu-toggle{
  position:absolute;left:1rem;top:.8rem;width:50px;height:50px;border:none;border-radius:16px;
  background:rgba(255,255,255,.08);color:var(--text);font-size:1.25rem;cursor:pointer;
  box-shadow:var(--shadow);z-index:26;backdrop-filter:blur(12px);transition:transform .2s ease, background .2s ease;
}
.menu-toggle:hover,.menu-close:hover,.btn-outline:hover,.social-icon:hover{transform:translateY(-2px)}
.menu-overlay{position:fixed;inset:0;background:rgba(3,4,10,.55);backdrop-filter:blur(4px);opacity:0;visibility:hidden;transition:opacity .28s ease;z-index:24}
.side-drawer{
  position:fixed;left:0;top:0;bottom:0;width:min(84vw,310px);padding:1rem .9rem 1.2rem;
  background:linear-gradient(180deg,rgba(13,10,24,.97),rgba(7,5,16,.98));
  border-right:1px solid rgba(255,255,255,.08);box-shadow:24px 0 80px rgba(0,0,0,.45);
  transform:translateX(-104%);transition:transform .28s ease;z-index:25;display:flex;flex-direction:column;gap:1rem
}
.drawer-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.2rem .2rem .9rem;border-bottom:1px solid rgba(255,255,255,.08)}
.drawer-kicker{text-transform:uppercase;letter-spacing:.18em;font-size:.68rem;opacity:.68;margin-bottom:.18rem}
.menu-close{width:40px;height:40px;border:none;border-radius:14px;background:rgba(255,255,255,.08);color:var(--text);cursor:pointer;backdrop-filter:blur(10px)}
.drawer-links{display:flex;flex-direction:column;gap:.6rem;overflow:auto;padding-right:.2rem}
.drawer-tab{width:100%;justify-content:flex-start;border-radius:18px;padding:.95rem 1rem;text-align:left;background:rgba(255,255,255,.045)}
.tab-btn{display:inline-flex;align-items:center;gap:.65rem;flex:0 0 auto;border:none;border-radius:999px;padding:.8rem 1rem;background:rgba(255,255,255,.06);color:var(--text);cursor:pointer;transition:transform .2s ease,background .2s ease,box-shadow .2s ease;white-space:nowrap}
.tab-btn.active{background:linear-gradient(135deg,rgba(247,2,100,.95),rgba(34,211,238,.9));box-shadow:0 10px 25px rgba(247,2,100,.25)}
body.drawer-open .side-drawer{transform:translateX(0)}
body.drawer-open .menu-overlay{opacity:1;visibility:visible}

.glass-panel,.card,.settings-group,.feature-card,.profile-card{
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  backdrop-filter:blur(18px);
}
.hero-panel{
  position:relative;
  display:grid;
  gap:1rem;
  padding:1.25rem;
  border-radius:32px;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:var(--shadow);
}
.ambient-orb{position:absolute;border-radius:50%;filter:blur(6px);opacity:.85;pointer-events:none;animation:floatblob 12s ease-in-out infinite}
.orb-one{width:180px;height:180px;background:radial-gradient(circle, rgba(247,2,100,.38), transparent 70%);top:-35px;right:-25px}
.orb-two{width:150px;height:150px;background:radial-gradient(circle, rgba(34,211,238,.28), transparent 68%);left:-40px;bottom:18%}
.orb-three{width:120px;height:120px;background:radial-gradient(circle, rgba(255,255,255,.15), transparent 70%);right:18%;bottom:-28px}
.music-notes{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.music-note{position:absolute;bottom:-2rem;color:rgba(255,255,255,.18);animation:riseNote linear forwards;filter:drop-shadow(0 0 10px rgba(34,211,238,.28))}

.np-art-wrapper{
  position:relative;
  width:min(100%, 340px);
  margin:0 auto;
  min-height:290px;
  display:grid;
  place-items:center;
}
.np-art{
  width:min(68vw,260px);
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:50%;
  border:10px solid rgba(255,255,255,.08);
  box-shadow:0 18px 60px rgba(0,0,0,.4),0 0 0 8px rgba(255,255,255,.02);
  position:relative;z-index:2;
}
.spin-slow{animation:spin 18s linear infinite}
.audio-paused .spin-slow{animation-play-state:paused}
.vinyl-ring,.vinyl-glow{position:absolute;border-radius:50%;pointer-events:none}
.vinyl-ring{width:min(78vw,300px);aspect-ratio:1/1;border:1px solid rgba(255,255,255,.18);box-shadow:inset 0 0 0 12px rgba(255,255,255,.02), inset 0 0 0 26px rgba(255,255,255,.03)}
.vinyl-glow{width:min(88vw,340px);aspect-ratio:1/1;background:radial-gradient(circle, rgba(247,2,100,.20), rgba(34,211,238,.10) 42%, transparent 72%);animation:halo 4s ease-in-out infinite}

.np-info,.player-controls,.listeners,.visualizer-shell,.history-widget,.settings-group{padding:1rem 1.1rem}
.np-info{text-align:center}
.np-label{text-transform:uppercase;letter-spacing:.22em;font-size:.72rem;color:rgba(247,242,255,.65);margin-bottom:.45rem}
.np-title{font-size:clamp(1.15rem,1.2vw + .95rem,1.8rem);font-weight:800;line-height:1.2}
.np-dj{margin-top:.45rem;color:var(--muted)}
.player-controls{display:flex;align-items:center;gap:1rem}
.btn-play{
  width:76px;height:76px;border-radius:50%;cursor:pointer;
  background:linear-gradient(135deg,var(--primary),var(--accent));
  color:white;font-size:1.75rem;font-weight:700;box-shadow:0 16px 36px rgba(247,2,100,.28)
}
.volume-wrap{flex:1}
input[type="range"]{padding:0;height:6px;background:transparent;border:0;box-shadow:none}
input[type="range"]::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:linear-gradient(90deg,var(--primary),var(--accent))}
input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:#fff;margin-top:-7px;box-shadow:0 4px 12px rgba(0,0,0,.32)}
input[type="range"]::-moz-range-track{height:6px;border-radius:999px;background:linear-gradient(90deg,var(--primary),var(--accent))}
input[type="range"]::-moz-range-thumb{width:20px;height:20px;border:none;border-radius:50%;background:#fff;box-shadow:0 4px 12px rgba(0,0,0,.32)}
.listeners{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-weight:700;color:rgba(247,242,255,.92)}

.visualizer-shell{position:relative;overflow:hidden}
.equalizer{display:flex;align-items:flex-end;gap:.45rem;height:60px;margin-bottom:.75rem}
.equalizer span{display:block;flex:1;border-radius:999px;background:linear-gradient(180deg,var(--accent),var(--primary));animation:bounce 1s ease-in-out infinite}
.equalizer span:nth-child(2){animation-delay:.08s}.equalizer span:nth-child(3){animation-delay:.16s}.equalizer span:nth-child(4){animation-delay:.24s}.equalizer span:nth-child(5){animation-delay:.32s}.equalizer span:nth-child(6){animation-delay:.4s}.equalizer span:nth-child(7){animation-delay:.48s}.equalizer span:nth-child(8){animation-delay:.56s}
.audio-paused .equalizer span{animation-duration:2.4s;opacity:.6}
#visualizer-canvas{display:block;width:100%;height:180px;border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015))}
.history-widget h2{font-size:1.05rem;margin-bottom:.8rem}
#np-history{list-style:none;display:grid;gap:.65rem}
#np-history li{padding:.85rem 1rem;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}

.record-wrapper{display:grid;place-items:center;padding:1.2rem 0}
.record-spin{
  width:min(72vw,260px);aspect-ratio:1/1;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.15) 0 9%, #111 10% 12%, #222 12.5% 15%, #090909 15.5% 100%);
  box-shadow:0 20px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.08) inset;
  animation:spin 16s linear infinite;
}
.record-inner{width:34%;aspect-ratio:1/1;border-radius:50%;overflow:hidden;border:4px solid rgba(255,255,255,.1)}
.about-text{max-width:760px;margin:0 auto 1.4rem;text-align:center;line-height:1.8;color:rgba(247,242,255,.84)}
.socials{display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem;margin-bottom:1.2rem}
.social-icon{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08);font-weight:800;box-shadow:var(--shadow-soft)}
.feature-list,.card-list,.feed-grid,.grid-two,.profile-grid{display:grid;gap:1rem}
.feature-list{margin-top:1rem}
.feature-card{padding:1.1rem 1.15rem}
.feature-card h3{margin-bottom:.45rem}
.feature-card p{color:var(--muted);line-height:1.6}

.card-list{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{overflow:hidden}
.card-img{height:190px;background-size:cover;background-position:center;position:relative}
.card-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(0,0,0,.32))}
.card-body{padding:1rem 1.1rem 1.15rem}
.card-body h3{font-size:1.15rem;margin-bottom:.45rem}
.card-body p{line-height:1.65;color:rgba(247,242,255,.84)}
.card-meta{margin-bottom:.7rem;color:rgba(247,242,255,.64);font-size:.9rem}
.interaction-bar{display:flex;gap:1rem;flex-wrap:wrap;margin:1rem 0 .85rem;font-size:.95rem;color:rgba(247,242,255,.76)}
.comment{padding:.85rem 1rem;border-radius:18px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);line-height:1.55;margin-top:.7rem}

.feed-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.feed-item{display:flex;flex-direction:column;gap:.35rem;padding:.85rem 0;border-top:1px solid rgba(255,255,255,.07)}
.feed-item:first-of-type{border-top:0;padding-top:.15rem}
.feed-item strong{line-height:1.45}
.feed-item span{color:rgba(247,242,255,.56);font-size:.86rem}

.profile-grid{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.profile-card{padding:1rem}
.profile-card.compact{padding:1rem .95rem}
.profile-card img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:20px;margin-bottom:.85rem;background:rgba(255,255,255,.04)}
.profile-card h3{margin-bottom:.4rem}
.profile-card p{line-height:1.6;color:rgba(247,242,255,.8)}
.profile-card .btn-outline{margin-top:.8rem}

.settings-group{display:grid;gap:.9rem}
.settings-group h3{font-size:1.05rem}
.stack-form{display:grid;gap:.8rem}
.inline-actions{margin-bottom:.8rem}
.btn-outline,.inline-link{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  min-height:46px;padding:.85rem 1.05rem;border-radius:16px;cursor:pointer;
  background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.11);color:var(--text);font-weight:700;
  box-shadow:var(--shadow-soft);transition:transform .2s ease, border-color .2s ease, background .2s ease;
}
.btn-outline:hover,.inline-link:hover{border-color:rgba(34,211,238,.34)}
.upload-label{
  display:grid;gap:.6rem;padding:1rem;border-radius:20px;border:1px dashed rgba(255,255,255,.16);
  background:rgba(255,255,255,.035);color:rgba(247,242,255,.86)
}
.artist-only{display:grid;gap:.8rem}
.mini-list{display:grid;gap:.7rem}
.mini-item{padding:.85rem 1rem;border-radius:16px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08)}

.flash{padding:1rem 1.15rem;border-radius:18px;margin-bottom:1rem;font-weight:700;border:1px solid rgba(255,255,255,.1);box-shadow:var(--shadow-soft)}
.flash.success{background:rgba(28,179,114,.18);color:#d6ffea;border-color:rgba(28,179,114,.35)}
.flash.error{background:rgba(255,95,122,.18);color:#ffe3ea;border-color:rgba(255,95,122,.34)}

.splash{position:fixed;inset:0;display:grid;place-items:center;background:radial-gradient(circle at center,#160616,#050109 64%);z-index:40;transition:opacity .4s ease,visibility .4s ease}
.splash.hidden{opacity:0;visibility:hidden}
.splash-inner{text-align:center}
.splash-record{width:120px;height:120px;border-radius:50%;overflow:hidden;border:6px solid var(--primary);margin:0 auto 1rem;animation:spin 7s linear infinite}
.splash-title{font-size:2rem;letter-spacing:.18em;text-align:center}
.rew{color:#fff}.uk{color:var(--primary)}

@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{70%{box-shadow:0 0 0 12px rgba(255,71,71,0)}100%{box-shadow:0 0 0 0 rgba(255,71,71,0)}}
@keyframes bounce{0%,100%{height:14px}50%{height:52px}}
@keyframes halo{0%,100%{transform:scale(.96);opacity:.7}50%{transform:scale(1.04);opacity:1}}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes floatblob{0%,100%{transform:translate3d(0,0,0)}33%{transform:translate3d(18px,-18px,0)}66%{transform:translate3d(-12px,15px,0)}}
@keyframes riseNote{0%{transform:translateY(0) scale(.8);opacity:0}10%,70%{opacity:.22}100%{transform:translateY(-125vh) scale(1.2);opacity:0}}

@media (min-width:700px){
  .feature-list,.grid-two{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:960px){
  .hero-panel{grid-template-columns:1.1fr 1fr;align-items:center}
  .np-art-wrapper{grid-row:span 3}
  .visualizer-shell{grid-column:1/-1}
}
@media (max-width:699px){
  .app-header{padding:1rem .95rem .25rem 4.3rem}
  .app-main{padding:.9rem .9rem 1.2rem}
  .listeners{flex-direction:column;gap:.35rem}
  .player-controls{flex-direction:column}
  .btn-play{width:68px;height:68px}
  .record-spin{width:190px;height:190px}
  .hero-panel{padding:1rem}
  .np-art-wrapper{min-height:235px}
  #visualizer-canvas{height:150px}
  .menu-toggle{left:.5rem;top:.6rem}
}