*{box-sizing:border-box}
:root{
  --navy:#0f1727;
  --card:#172338;
  --card2:#142033;
  --blue:#123f7f;
  --accent:#1687ff;
  --cyan:#20d7ff;
  --text:#f6f8fb;
  --muted:#9da8ba;
  --line:#2b3950;
  --glow:rgba(22,135,255,.24);
}
html,body{margin:0;min-height:100%;background:var(--navy);font-family:Arial,Helvetica,sans-serif;color:var(--text)}
body{padding:18px 12px 34px}
.page{width:min(460px,100%);margin:0 auto}

.player-card{
  background:var(--card);
  border-radius:19px;
  padding:17px 18px 16px;
  box-shadow:0 14px 40px rgba(0,0,0,.30), 0 0 0 1px rgba(255,255,255,.025);
  position:relative;
  isolation:isolate;
  transition:box-shadow .35s ease, transform .35s ease;
}

.topbar{
  height:52px;
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:8px;
}
.brand-logo{
  width:66px;height:52px;flex:0 0 66px;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.brand-logo img{
  display:block;
  width:60px;height:60px;
  object-fit:contain;
}
.brand-name{
  font-size:23px;
  font-weight:900;
  letter-spacing:1.8px;
  white-space:nowrap;
  margin-left:auto;
}
.peak-meter{
  height:46px;
  flex:1 1 0;
  width:100%;
  min-width:90px;
  max-width:none;
  display:flex;
  align-items:stretch;
  justify-content:space-between;
  gap:2px;
  overflow:hidden;
  padding:3px 0 4px;
  position:relative;
  filter:drop-shadow(0 0 5px rgba(57,255,111,.12));
}
.peak-meter::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,rgba(54,255,105,.12),rgba(54,255,105,.6),rgba(54,255,105,.12));
}
.spectrum-column{
  display:flex;
  flex:1 1 0;
  min-width:2px;
  max-width:5px;
  flex-direction:column-reverse;
  justify-content:flex-start;
  gap:2px;
  height:100%;
}
.spectrum-segment{
  display:block;
  width:100%;
  flex:1 1 0;
  min-height:1px;
  border-radius:0;
  background:#153a22;
  opacity:.8;
  box-shadow:none;
}
.spectrum-segment.active{
  background:#5dff78;
  opacity:1;
  box-shadow:0 0 3px rgba(75,255,104,.35);
}
.spectrum-column .spectrum-segment:nth-child(n+7).active{background:#a1ff66}
.spectrum-column .spectrum-segment:nth-child(n+9).active{background:#e4ff66}

.art-wrap{
  width:100%;
  aspect-ratio:1/1;
  border-radius:12px;
  overflow:hidden;
  background:linear-gradient(145deg,#123f7f,#0b1424 72%);
  display:flex;
  position:relative;
  isolation:isolate;
  box-shadow:0 10px 28px rgba(0,0,0,.20);
  align-items:center;
  justify-content:center;
}
.art-wrap::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
  background:linear-gradient(145deg,rgba(255,255,255,.06),transparent 34%,transparent 72%,rgba(22,135,255,.07));
}
.art-wrap img{
  position:relative;z-index:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.art-wrap.placeholder img{
  object-fit:contain;
  padding:16%;
}

.station{display:none !important}
.now{text-align:center;padding:14px 4px 8px}
.artist,.title{overflow-wrap:anywhere;transition:opacity .25s ease;}
.artist{
  font-size:21px;
  line-height:1.22;
  font-weight:800;
  min-height:26px;
}
.title{
  font-size:16px;
  color:#c0c9d7;
  line-height:1.25;
  min-height:20px;
  margin-top:4px;
}

.controls{
  display:flex;
  align-items:center;
  gap:15px;
  padding-top:3px;
}
.play{
  flex:0 0 54px;
  width:54px;height:54px;border:0;border-radius:50%;
  background:linear-gradient(145deg,#fff,#dce9fb);color:#151c28;
  font-size:22px;font-weight:900;
  cursor:pointer;
  box-shadow:0 5px 18px rgba(22,135,255,.20),inset 0 1px 0 rgba(255,255,255,.9);
  transition:transform .18s ease, box-shadow .25s ease, background .25s ease;
}
.play:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(22,135,255,.32),inset 0 1px 0 rgba(255,255,255,.9)}
.play:focus-visible{outline:3px solid var(--cyan);outline-offset:4px}
.play:active{transform:scale(.96)}
.player-card.is-playing{box-shadow:0 14px 40px rgba(0,0,0,.30),0 0 30px rgba(22,135,255,.10)}
.player-card.is-playing .art-wrap{box-shadow:0 0 0 1px rgba(32,215,255,.22),0 12px 34px rgba(22,135,255,.16)}
.player-card.is-playing .brand-logo img{filter:drop-shadow(0 0 8px rgba(32,215,255,.18))}
.player-card.is-playing .play{background:linear-gradient(145deg,#20d7ff,#1687ff);color:#fff;box-shadow:0 0 0 5px rgba(22,135,255,.10),0 5px 24px rgba(22,135,255,.28)}
.live{position:relative}
.live::before{content:"";display:inline-block;width:6px;height:6px;margin-right:5px;border-radius:50%;background:#7e8a9d;vertical-align:1px}
.player-card.is-playing .live::before{background:#ff475f;box-shadow:0 0 0 0 rgba(255,71,95,.45);animation:live-pulse 1.8s infinite}
@keyframes live-pulse{0%{box-shadow:0 0 0 0 rgba(255,71,95,.42)}70%{box-shadow:0 0 0 6px rgba(255,71,95,0)}100%{box-shadow:0 0 0 0 rgba(255,71,95,0)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
#volume{
  flex:1;
  accent-color:var(--accent);
}
.live{
  font-size:12px;
  color:#c3cad6;
  min-width:34px;
  text-align:right;
}
footer{text-align:center;color:#7f899b;font-size:12px;margin-top:14px}

.history{
  padding:15px 4px 0;
}
.history h2{
  font-family:Georgia,"Times New Roman",serif;
  font-size:16px;
  margin:0 0 9px;
  letter-spacing:.2px;
}
.history-list{display:flex;flex-direction:column;gap:7px}
.history-item{
  display:flex;align-items:center;gap:10px;
  min-height:62px;
  padding:6px 8px;
  border-radius:10px;
  background:linear-gradient(110deg,#141f31,#172338);
  border:1px solid rgba(255,255,255,.045);
  transition:transform .18s ease,border-color .18s ease,background .18s ease;
}
.history-item:hover{transform:translateX(2px);border-color:rgba(32,215,255,.16)}
.history-thumb{
  width:48px;height:48px;flex:0 0 48px;
  border-radius:7px;object-fit:cover;background:#123f7f;
}
.history-no{
  width:20px;flex:0 0 20px;text-align:center;
  color:#788397;font-size:12px;
}
.history-text{min-width:0}
.history-artist{
  font-size:14px;font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.history-title{
  margin-top:3px;font-size:13px;color:#aeb7c6;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.history-empty{color:#788397;font-size:13px;padding:5px 0}

@media (max-width:390px){
  .player-card{padding:14px 14px 14px}
  .brand-logo{width:55px;flex-basis:55px}
  .brand-logo img{width:53px;height:53px}
  .brand-name{font-size:19px;letter-spacing:1.3px}
  .peak-meter{min-width:68px;gap:1px}
  .spectrum-column{gap:1px;max-width:4px}
  .artist{font-size:19px}
}

@media (min-width:700px){
  body{padding-top:36px}
}