/* Neon green & purple theme */
:root{
  --bg:#07060a;
  --card:#0d0c13;
  --glow-green: rgba(19, 250, 115, 0.82);
  --glow-purple: rgba(155, 124, 255, 0.95);
  --bg-blob1: rgba(48, 240, 128, 0.87);
  --bg-blob2: rgba(155,124,255,0.06);
  --accent-glow: 0 12px 40px rgba(124,255,178,0.08), 0 0 48px rgba(155, 124, 255, 0.877);
  --pulse-duration: 2.6s;
  --text-main: #01ff95;
  --text-muted: rgb(143, 101, 241);
  --card-border-opacity: 0.02;
  --accent1: #7CFFB2; /* green */
  --accent2: #9B7CFF; /* purple */
  --glass: rgba(255,255,255,0.03);
}

/* hide file input visually (label/button triggers it) */
#file-input{display:none}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: var(--bg);
  color:var(--text-main);
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding:28px;
  /* animated glowing blobs layered behind content */
  position:relative;
}

/* moving blurred blobs to give the page more life */
body::before, body::after{
  content:'';position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:0;filter:blur(80px);mix-blend-mode:screen;opacity:0.85;
  width:900px;height:600px;border-radius:40%;
}
body::before{background:radial-gradient(circle at 20% 20%, var(--bg-blob2), transparent 20%);animation:blobMove1 18s linear infinite;}
body::after{background:radial-gradient(circle at 80% 80%, var(--bg-blob1), transparent 18%);animation:blobMove2 22s linear infinite;}

@keyframes blobMove1{ 0%{transform:translate(-60%,-50%) scale(1);} 50%{transform:translate(-40%,-60%) scale(1.06);} 100%{transform:translate(-60%,-50%) scale(1);} }
@keyframes blobMove2{ 0%{transform:translate(-40%,-40%) scale(1);} 50%{transform:translate(-20%,-30%) scale(1.08);} 100%{transform:translate(-40%,-40%) scale(1);} }

.player-root{max-width:1100px;margin:0 auto}
.player-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.brand{display:flex;align-items:center;gap:12px}
.brand .logo{width:44px;height:44px;border-radius:10px;background:linear-gradient(135deg,var(--accent1),var(--accent2));display:flex;align-items:center;justify-content:center;color:#07060a;font-weight:700;box-shadow:0 4px 30px rgba(155,124,255,0.12),0 0 20px rgba(124,255,178,0.06)}
.brand h1{font-size:20px;margin:0}
.header-actions .btn{margin-left:8px}

.content{display:grid;grid-template-columns:320px 1fr;gap:20px}
.playlist{background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);padding:18px;border-radius:14px;box-shadow:0 6px 24px rgba(0,0,0,0.6),0 0 30px var(--glow-purple);border:1px solid rgba(255,255,255,0.03)}
.playlist{position:relative;z-index:1}
.playlist::before{content:'';position:absolute;inset:-2px;border-radius:16px;padding:2px;background:linear-gradient(90deg,var(--accent1),var(--accent2));filter:blur(18px);opacity:0.12;pointer-events:none;z-index:-1;transition:opacity .25s ease}
.playlist:hover::before{opacity:0.22}
.playlist{-webkit-backdrop-filter: blur(6px);backdrop-filter: blur(6px)}
.playlist h2{margin:0 0 12px 0}
.cards{display:flex;flex-direction:column;gap:10px;max-height:58vh;overflow:auto;padding-right:6px}
.hint{font-size:12px;opacity:0.7;margin-top:10px}

.card{display:flex;align-items:center;gap:12px;padding:10px;border-radius:12px;background:linear-gradient(135deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00));border:1px solid rgba(255,255,255,calc(var(--card-border-opacity)));cursor:pointer;transition:transform .22s cubic-bezier(.2,.9,.2,1), box-shadow .25s ease, filter .25s ease}
.card:hover{transform:translateY(-6px) rotateX(1deg);box-shadow:0 14px 44px rgba(124,255,178,0.07),0 0 48px rgba(155,124,255,0.09);filter:brightness(1.03)}
.card::before{content:'';position:absolute;inset:-2px;border-radius:14px;padding:2px;background:linear-gradient(90deg,var(--accent1),var(--accent2));filter:blur(14px);opacity:0;pointer-events:none;transition:opacity .25s ease,transform .4s ease}
.card::after{content:'';position:absolute;inset:0;border-radius:12px;pointer-events:none;box-shadow:0 0 0 rgba(0,0,0,0);opacity:0;transition:opacity .2s ease}
.card{position:relative;overflow:visible}

/* make the border glow on hover and for playing state */
.card:hover::before{opacity:0.22;transform:scale(1.02)}
.card.playing::before{opacity:0.34;transform:scale(1.04)}

/* playing state (JS can toggle .playing on the active card) */
.card.playing{transform:translateY(-6px);box-shadow:var(--accent-glow);}
.card.playing::after{opacity:1;box-shadow:0 30px 80px rgba(124,255,178,0.06),0 0 60px rgba(155,124,255,0.06);animation:pulseGlow var(--pulse-duration) ease-in-out infinite}

@keyframes pulseGlow{0%{box-shadow:0 12px 36px rgba(124,255,178,0.04),0 0 30px rgba(155,124,255,0.04)}50%{box-shadow:0 18px 54px rgba(124,255,178,0.08),0 0 48px rgba(155,124,255,0.08)}100%{box-shadow:0 12px 36px rgba(124,255,178,0.04),0 0 30px rgba(155,124,255,0.04)}}
.card .meta{flex:1}
.card .title{font-weight:700;line-height:1.05;margin-bottom:2px;color:var(--text-main);background:linear-gradient(90deg,var(--accent1),var(--accent2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 2px 10px rgba(124,255,178,0.02)}
.card .sub{font-size:12px;color:var(--text-muted)}

/* thumbnail in playlist card */
.card .thumb{width:56px;height:56px;border-radius:8px;object-fit:cover;flex:0 0 56px;box-shadow:0 6px 18px rgba(0,0,0,0.6);transition:transform .32s cubic-bezier(.2,.9,.2,1),box-shadow .28s ease}
.card:hover .thumb{transform:scale(1.07)}
.card.playing .thumb{transform:scale(1.12);box-shadow:0 28px 72px rgba(124,255,178,0.08)}

/* animated equalizer preview overlay inside thumbnail */
.thumb-wrap{position:relative;display:inline-block}
.thumb-eq{position:absolute;inset:6px;border-radius:6px;pointer-events:none;opacity:0;transition:opacity .22s}
.card:hover .thumb-eq{opacity:1}
.thumb-eq .bar{width:6px;height:100%;display:inline-block;margin-right:3px;background:linear-gradient(180deg,var(--accent2),var(--accent1));border-radius:3px;opacity:0.9}

/* animated bars inside thumbnail (subtle looping) */
.thumb-eq .bar{animation:thumbPulse 900ms ease-in-out infinite}
.thumb-eq .bar:nth-child(1){animation-delay:0ms}
.thumb-eq .bar:nth-child(2){animation-delay:120ms}
.thumb-eq .bar:nth-child(3){animation-delay:240ms}
@keyframes thumbPulse{
  0%{transform:scaleY(0.45)}
  50%{transform:scaleY(1)}
  100%{transform:scaleY(0.45)}
}

.now{display:flex;align-items:flex-start}
.now-card{background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);padding:22px;border-radius:16px;box-shadow:0 10px 36px rgba(0,0,0,0.6),0 0 60px var(--glow-green);border:1px solid rgba(255,255,255,0.03);width:100%}
.now-card{-webkit-backdrop-filter: blur(8px);backdrop-filter: blur(8px)}
.album-art{width:200px;height:200px;border-radius:18px;overflow:hidden;margin-bottom:16px;box-shadow:0 12px 40px rgba(124,255,178,0.06),inset 0 1px 0 rgba(255,255,255,0.03);}
.art-svg{width:100%;height:100%;display:block}
.track-info{margin-bottom:8px}
.track-info .title{font-size:20px;font-weight:700}
.track-info .artist{font-size:13px;opacity:0.8}

.controls{display:flex;align-items:center;gap:12px;margin-top:12px}
.btn{background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));color:var(--accent1);border:1px solid rgba(255,255,255,0.04);padding:8px 12px;border-radius:10px;cursor:pointer;-webkit-backdrop-filter: blur(6px);backdrop-filter: blur(6px)}
.btn.small{padding:6px 8px;border-radius:8px;font-size:13px}
.btn.ghost{background:transparent;border:1px dashed rgba(255,255,255,0.04);color:rgba(233,238,248,0.95)}
.btn.big{font-size:20px;padding:14px 18px;border-radius:16px}

/* Neon glow for special buttons */
.btn.neon{position:relative;color:#0b0b0b;background:linear-gradient(90deg,var(--accent1),var(--accent2));box-shadow:0 6px 24px rgba(155,124,255,0.08),0 0 32px var(--glow-green);border:none}
.btn.neon::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;background:linear-gradient(90deg,var(--accent1),var(--accent2));filter:blur(18px);opacity:0.45;z-index:-1}

.volume input{width:110px}
.toggles{display:flex;gap:8px;margin-left:10px}

.progress-row{display:flex;align-items:center;gap:12px;margin-top:14px}
.progress-row input[type=range]{flex:1}

.visualizer{width:100%;height:120px;display:block;margin:8px 0 0;background:transparent}
.visualizer{position:relative;overflow:hidden}
.visualizer::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg, rgba(124,255,178,0.02), rgba(155,124,255,0.02));pointer-events:none;mix-blend-mode:overlay;animation:vizShift 8s linear infinite}
@keyframes vizShift{0%{transform:translateX(-10%)}50%{transform:translateX(10%)}100%{transform:translateX(-10%)}}

.visual-controls{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.visual-controls label{font-size:13px;opacity:0.85;margin-right:6px}
.viz-schemes{display:flex;gap:6px}
.viz-schemes .scheme{opacity:0.9}
.viz-schemes .scheme.active{box-shadow:0 8px 26px rgba(124,255,178,0.06);opacity:1}

.player-footer{margin-top:18px;text-align:center;opacity:0.65}

/* card entrance animation */
.cards .card{animation:cardEnter .42s cubic-bezier(.2,.9,.2,1) both}
@keyframes cardEnter{from{transform:translateY(6px) scale(.995);opacity:0} to{transform:translateY(0) scale(1);opacity:1}}

/* muted text and headings */
h1,h2,h3,h4{color:var(--text-main)}
p,small,li,label,button{color:var(--text-muted)}

/* prefer reduced motion */
@media (prefers-reduced-motion: reduce){
  .cards .card, .visualizer::before, body::before, body::after{animation:none !important;transition:none !important}
}

/* small utilities */
.flex{display:flex;align-items:center}

/* Glowing animated equalizer bars used as hover effect on album art */
.album-art:hover{transform:translateY(-6px);transition:transform .3s}

/* subtle highlight for the currently playing card when JS can't add a class (fallback to inline style used by script) */
.card[style*="box-shadow"]{outline:2px solid rgba(124,255,178,0.02);}

/* Scrollbar styling */
.cards::-webkit-scrollbar{width:8px}
.cards::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--accent2),var(--accent1));border-radius:8px;opacity:0.9}

/* Responsive */
@media (max-width:880px){
  .content{grid-template-columns:1fr;}
  .album-art{width:160px;height:160px}
}