:root{
  --backwater:#061521;
  --backwater-deep:#020a11;
  --palm:#0a1d2b;
  --gold:#16d5ef;
  --gold-bright:#69ecff;
  --ivory:#edf8ff;
  --ivory-dim:#8ca9bc;
  --line:rgba(63,176,207,.16);
  --player:rgba(16,30,45,.92);
}

html,body{
  min-height:100%;
  height:auto;
  background-color:var(--backwater-deep);
}

body{
  background:var(--backwater-deep);
  color:var(--ivory);
  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(91,185,214,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(91,185,214,.055) 1px,transparent 1px);
  background-size:118px 118px;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.75) 70%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.75) 70%,transparent 100%);
}

.particle-field{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}

.particle{
  position:absolute;
  left:var(--x);
  top:var(--y);
  width:var(--size);
  height:var(--size);
  border-radius:50%;
  opacity:var(--opacity);
  background:#20cfff;
  box-shadow:0 0 9px rgba(31,207,255,.85),0 0 20px rgba(31,207,255,.35);
  animation:particle-drift var(--duration) ease-in-out var(--delay) infinite alternate;
  will-change:transform,opacity;
}

@keyframes particle-drift{
  0%{transform:translate3d(0,0,0) scale(.82);opacity:.2;}
  50%{opacity:var(--opacity);}
  100%{transform:translate3d(var(--drift-x),var(--drift-y),0) scale(1.16);opacity:.38;}
}

header,main,.transport,.ad-slot{position:relative;z-index:1;}

.ad-slot{
  left:50%;
  display:grid;
  width:100vw;
  min-height:82px;
  margin:0;
  transform:translateX(-50%);
  place-items:center;
  overflow:hidden;
  background:rgba(20,34,45,.92);
  border-top:1px solid rgba(120,178,202,.08);
  border-bottom:1px solid rgba(120,178,202,.08);
}

.ad-placeholder{
  color:#698394;
  font-size:10px;
  letter-spacing:.2em;
  text-transform:uppercase;
}

.ad-slot.ad-ready{background:transparent;}
.adsbygoogle{width:100%;min-height:82px;}
.inline-ad{margin:5px 0;}

header{
  padding:30px max(24px,6vw) 22px;
  border-bottom:1px solid var(--line);
  overflow:visible;
}

header::before{display:none;}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  width:100%;
  max-width:900px;
  margin:0 auto;
}

header h1{
  display:flex;
  align-items:center;
  gap:18px;
  margin:0;
  max-width:none;
  color:#6beeff;
  font-family:"Noto Sans Malayalam","Segoe UI",Arial,sans-serif;
  font-size:clamp(17px,3vw,22px);
  font-weight:400;
  letter-spacing:.08em;
  line-height:1.3;
  text-transform:none;
  text-shadow:0 0 15px rgba(33,211,239,.42);
}

.install-btn{
  flex:0 0 auto;
  min-height:40px;
  padding:0 18px;
  border:1px solid rgba(43,219,239,.7);
  border-radius:22px;
  background:linear-gradient(135deg,rgba(14,194,222,.2),rgba(7,48,62,.72));
  color:#62ebf6;
  font-size:11px;
  font-weight:700;
  letter-spacing:.12em;
  box-shadow:0 0 18px rgba(23,207,255,.12),inset 0 1px 0 rgba(255,255,255,.06);
}

.install-btn:hover,
.install-btn:focus-visible{
  border-color:#31ddec;
  background:linear-gradient(135deg,rgba(22,211,235,.3),rgba(8,61,76,.8));
  color:#e9fdff;
}

.install-btn[hidden]{display:none;}

header h1::before{
  content:"";
  width:62px;
  height:3px;
  flex:0 0 auto;
  border-radius:10px;
  background:#19d7ec;
  box-shadow:0 0 12px rgba(25,215,236,.5);
}

main{
  max-width:900px;
  padding:46px max(24px,6vw) 190px;
}

.count-row{
  align-items:center;
  gap:24px;
  margin-bottom:30px;
}

.count-row .n{
  flex:0 0 auto;
  font-size:14px;
  letter-spacing:.17em;
  color:#a5bfd0;
}

.count-row .n b{color:#a5bfd0;font-weight:500;}

#searchBox{
  width:min(46%,430px);
  min-width:220px;
  height:48px;
  padding:0 26px;
  border-color:rgba(77,181,211,.2);
  border-radius:28px;
  background:rgba(2,12,20,.22);
  color:#eaf8ff;
  font-size:16px;
  box-shadow:inset 0 0 22px rgba(0,0,0,.16);
}

#searchBox:focus{
  width:min(46%,430px);
  border-color:rgba(41,215,239,.72);
  box-shadow:0 0 0 3px rgba(41,215,239,.08),inset 0 0 22px rgba(0,0,0,.16);
}

ul.playlist{border-top:0;}

.track{
  grid-template-columns:58px minmax(0,1fr) 26px;
  gap:20px;
  min-height:74px;
  padding:17px 18px;
  border-bottom:1px solid rgba(65,174,203,.16);
  border-radius:0;
  transition:background .2s,box-shadow .2s,transform .15s;
}

.track:hover{background:rgba(25,100,118,.12);}

.track:active{transform:scale(.993);}

.track.active{
  margin:0 0 5px;
  background:linear-gradient(90deg,rgba(39,67,62,.72),rgba(31,61,63,.62));
  box-shadow:inset 0 0 0 1px rgba(76,218,223,.08),0 10px 28px rgba(0,0,0,.14);
}

.idx{
  padding:0;
  color:#7694a8;
  font-size:15px;
  text-align:center;
}

.track.active .idx{color:#38ddec;}

.title{
  color:#ecf7fd;
  font-size:clamp(16px,2.3vw,20px);
  font-weight:400;
}

.track.active .title{color:#32e0ee;text-shadow:0 0 10px rgba(50,224,238,.28);}

.eq{height:22px;gap:4px;justify-content:center;}
.eq span{width:4px;background:#27e1ee;box-shadow:0 0 6px rgba(39,225,238,.6);animation-play-state:paused;}
.track.active.playing .eq span{animation-play-state:running;}

.transport{
  position:fixed;
  left:50%;
  right:auto;
  bottom:max(12px,env(safe-area-inset-bottom));
  width:min(900px,calc(100% - 24px));
  transform:translateX(-50%);
  padding:18px 24px 20px;
  border:1px solid rgba(125,199,222,.1);
  border-radius:38px;
  background:linear-gradient(135deg,rgba(24,42,59,.95),rgba(9,22,34,.94));
  box-shadow:0 18px 55px rgba(0,0,0,.52),inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  z-index:20;
}

.transport-inner{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  max-width:none;
}

.progress-wrap{
  display:grid;
  grid-template-columns:1fr;
  gap:7px;
  width:100%;
}

.time-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.time{
  width:auto;
  color:#9eb4c4;
  font-size:13px;
  font-variant-numeric:tabular-nums;
}

input[type=range]{height:4px;background:rgba(136,174,195,.17);}

input[type=range]::-webkit-slider-thumb{
  width:19px;
  height:19px;
  background:#17cfff;
  box-shadow:0 0 0 3px rgba(23,207,255,.08),0 0 12px rgba(23,207,255,.6);
}

input[type=range]::-moz-range-thumb{
  width:19px;
  height:19px;
  border:0;
  border-radius:50%;
  background:#17cfff;
  box-shadow:0 0 0 3px rgba(23,207,255,.08),0 0 12px rgba(23,207,255,.6);
}

#seek{background:linear-gradient(to right,#17cfff 0%,#17cfff 0%,rgba(136,174,195,.17) 0%);}

.controls{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  align-items:center;
  gap:0;
  width:100%;
}

.btn{
  justify-self:center;
  width:46px;
  height:46px;
  padding:0;
  border:0;
  background:transparent;
  color:#edf8ff;
}

.btn:hover{border:0;background:rgba(39,213,236,.08);}
.btn svg{width:25px;height:25px;}

.btn.play{
  justify-self:center;
  width:50px;
  height:50px;
  background:linear-gradient(145deg,#12c8ef,#13e0d5);
  border:0;
  color:#031019;
  box-shadow:0 0 25px rgba(20,215,229,.24);
}

.btn.play:hover{border:0;background:linear-gradient(145deg,#40d9f7,#37eadf);}
.btn.play svg{width:24px;height:24px;}

.btn.bt{
  width:46px;
  color:#7d9eb3;
  border:0;
}

.btn.bt:hover{border:0;background:rgba(39,213,236,.08);color:#35d8ee;}

.btn.stop{
  width:72px;
  color:#ff5c67;
  font-size:15px;
  font-weight:700;
  letter-spacing:.04em;
}

.btn.stop:hover{color:#ff7a82;background:rgba(255,92,103,.08);}

@media (max-width:640px){
  body::before{background-size:92px 92px;}
  header{padding:24px 22px 18px;}
  .header-inner{gap:10px;}
  header h1{gap:13px;font-size:17px;}
  header h1::before{width:42px;height:2px;}
  .install-btn{min-height:36px;padding:0 12px;font-size:9px;letter-spacing:.09em;}
  main{padding:30px 20px 182px;}
  .count-row{gap:14px;margin-bottom:20px;}
  .count-row .n{font-size:11px;letter-spacing:.13em;}
  #searchBox,#searchBox:focus{width:53%;min-width:0;height:42px;padding:0 16px;font-size:14px;}
  .track{grid-template-columns:42px minmax(0,1fr) 22px;gap:12px;min-height:64px;padding:14px 10px;}
  .idx{font-size:13px;}
  .title{font-size:16px;}
  .transport{width:calc(100% - 18px);padding:14px 16px 16px;border-radius:32px;}
  .transport-inner{gap:7px;}
  .controls{grid-template-columns:repeat(5,minmax(0,1fr));gap:0;}
  .btn,.btn.bt{width:40px;height:40px;}
  .btn svg{width:22px;height:22px;}
  .btn.play{width:48px;height:48px;}
  .btn.stop{width:60px;font-size:14px;}
  .time{font-size:12px;}
  .ad-slot,.adsbygoogle{min-height:70px;}
}

@media (prefers-reduced-motion:reduce){
  .particle{animation:none;}
  .eq span{animation:none;}
}