:root{
  --bg:#05060a; --fg:#eef1f7; --dim:#8b93a7; --line:rgba(255,255,255,.09);
  --glass:rgba(16,19,28,.62); --accent:#7c9cff; --accent2:#c58cff; --ok:#43d19e; --warn:#ffb454;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  overflow:hidden; -webkit-font-smoothing:antialiased;
}
#sky{position:fixed; inset:0; width:100%; height:100%; display:block; opacity:.9}
#sky.dim{opacity:.25}

.top{
  position:fixed; top:0; left:0; right:0; display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; z-index:5; pointer-events:none;
}
.top > *{pointer-events:auto}
.brand{display:flex; align-items:center; gap:10px; font-size:15px; letter-spacing:.02em}
.brand b{font-weight:650}
.brand .sub{color:var(--dim); font-size:12.5px; margin-left:2px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 12px var(--ok)}
.ghost{
  background:rgba(255,255,255,.05); color:var(--fg); border:1px solid var(--line);
  padding:7px 12px; border-radius:10px; font-size:13px; cursor:pointer; backdrop-filter:blur(8px);
}
.ghost:hover{background:rgba(255,255,255,.1)}

.stage{
  position:relative; z-index:3; height:100%; display:flex; align-items:center; justify-content:center;
  padding:80px 20px 70px;
}
.card{
  width:min(520px,100%); padding:26px 26px 18px; border-radius:22px;
  background:var(--glass); border:1px solid var(--line);
  box-shadow:0 30px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(18px) saturate(120%);
}
.station-head{display:flex; gap:14px; align-items:center; min-height:56px}
.favicon{
  width:52px;height:52px;border-radius:14px;object-fit:cover;background:rgba(255,255,255,.06);flex:none;
}
.favicon[hidden]{display:none}
.meta{min-width:0}
h1{font-size:20px; line-height:1.25; margin:0; font-weight:620; letter-spacing:-.01em;
   overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}
.loc{color:var(--dim); font-size:13px; margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

.nowplaying{margin:22px 0 18px; padding:14px 16px; border-radius:14px; background:rgba(255,255,255,.04); border:1px solid var(--line)}
.np-label{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim)}
.np-title{font-size:16px; margin-top:6px; font-weight:560; word-break:break-word}
.np-links{display:flex; gap:10px; margin-top:8px; flex-wrap:wrap}
.np-links a{color:var(--accent); font-size:12.5px; text-decoration:none}
.np-links a:hover{text-decoration:underline}

.controls{display:flex; align-items:center; gap:12px; margin-top:6px}
#btnFav{margin-left:auto}
.play{
  width:56px;height:56px;border-radius:50%; border:none; cursor:pointer; flex:none;
  background:linear-gradient(145deg,var(--accent),var(--accent2)); color:#0b0d14;
  display:grid; place-items:center; box-shadow:0 10px 30px rgba(124,156,255,.35);
}
.play svg{width:26px;height:26px;fill:#0b0d14}
.play:active{transform:scale(.97)}
.next{
  display:flex; align-items:center; gap:6px; padding:13px 18px; border-radius:14px; cursor:pointer;
  background:rgba(255,255,255,.07); color:var(--fg); border:1px solid var(--line); font-size:14px;
}
.next svg{width:18px;height:18px;fill:currentColor}
.next:hover{background:rgba(255,255,255,.12)}
.icon{
  width:44px;height:44px;border-radius:12px;border:1px solid var(--line); background:rgba(255,255,255,.04);
  color:var(--fg); font-size:18px; cursor:pointer;
}
.icon:hover{background:rgba(255,255,255,.1)}
.icon.on{color:#ff7ba8; border-color:rgba(255,123,168,.4)}

.chips{display:flex; gap:8px; flex-wrap:wrap; margin-top:16px}
.chip{font-size:12px; color:var(--dim); border:1px solid var(--line); padding:4px 9px; border-radius:999px}
.chip.hl{color:var(--fg); background:rgba(255,255,255,.06)}
.status{margin-top:12px; font-size:12.5px; color:var(--dim); min-height:18px}
.status.err{color:var(--warn)}

.panel{
  position:fixed; top:0; right:0; height:100%; width:min(390px,92vw); z-index:9;
  background:rgba(10,12,18,.92); border-left:1px solid var(--line); backdrop-filter:blur(20px);
  transform:translateX(100%); transition:transform .28s cubic-bezier(.4,0,.2,1);
}
.panel.open{transform:none}
.panel-inner{padding:18px 18px 30px; height:100%; overflow:auto}
.tabs{display:flex; gap:6px; margin-bottom:14px; position:sticky; top:-18px; background:rgba(10,12,18,.96); padding:10px 0}
.tab{flex:1; padding:9px; border-radius:10px; border:1px solid transparent; background:transparent; color:var(--dim); cursor:pointer; font-size:13.5px}
.tab.active{background:rgba(255,255,255,.07); color:var(--fg); border-color:var(--line)}
.badge{background:rgba(255,255,255,.12); border-radius:999px; padding:1px 7px; font-size:11px}
.field{display:flex; align-items:center; justify-content:space-between; gap:10px; margin:10px 0}
.field.col{display:block}
.field > span{font-size:13px; color:var(--dim)}
select,.search{
  background:rgba(255,255,255,.06); color:var(--fg); border:1px solid var(--line); border-radius:10px;
  padding:9px 10px; font-size:13.5px; outline:none; min-width:150px;
}
.search{width:100%; min-width:0}
.tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px}
.tag{font-size:12px; padding:5px 10px; border-radius:999px; border:1px solid var(--line); background:transparent; color:var(--dim); cursor:pointer}
.tag.on{background:rgba(124,156,255,.18); border-color:rgba(124,156,255,.5); color:var(--fg)}
.primary{
  width:100%; margin-top:16px; padding:12px; border-radius:12px; border:none; cursor:pointer;
  background:linear-gradient(145deg,var(--accent),var(--accent2)); color:#0b0d14; font-weight:600;
}
.hint{margin-top:10px; font-size:12.5px; color:var(--dim)}
.results{margin-top:12px; display:flex; flex-direction:column; gap:6px}
.row{
  display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:10px; cursor:pointer;
  border:1px solid transparent;
}
.row:hover{background:rgba(255,255,255,.06); border-color:var(--line)}
.row img{width:26px;height:26px;border-radius:7px;object-fit:cover;background:rgba(255,255,255,.06)}
.row .t{min-width:0}
.row .t b{display:block; font-size:13.5px; font-weight:520; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.row .t small{color:var(--dim); font-size:11.5px}
.empty{color:var(--dim); font-size:13px; padding:20px 4px}

.toast{
  position:fixed; left:50%; bottom:90px; transform:translate(-50%,20px); z-index:20;
  background:rgba(20,24,34,.95); border:1px solid var(--line); color:var(--fg);
  padding:9px 14px; border-radius:10px; font-size:13px; opacity:0; pointer-events:none; transition:.25s;
}
.toast.show{opacity:1; transform:translate(-50%,0)}

.foot{
  position:fixed; bottom:12px; left:0; right:0; text-align:center; font-size:11.5px; color:#5b6377; z-index:4;
}
.sep{margin:0 6px}

@media (max-width:520px){
  .card{padding:20px 18px 14px; border-radius:18px}
  h1{font-size:18px}
  .brand .sub{display:none}
  .stage{padding:72px 14px 66px}
  .foot{font-size:11px}
}