.container{padding-bottom:calc(16px + 92px + env(safe-area-inset-bottom))}
.input{
  flex:1 1 220px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
}
select.input{appearance:none}
.input:focus{
  border-color:var(--accent-border);
}
.input:focus-visible{outline:2px solid var(--accent-outline);outline-offset:2px}
.check{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--surface);
}
.check input{width:18px;height:18px}
.tabs{gap:8px}
.tools{gap:8px}
.tools .btn{min-height:40px}
.head-actions{gap:10px;flex-wrap:wrap;justify-content:flex-end}
.tabs{
  padding:4px;
  border-radius:14px;
  border:1px solid var(--border);
  background:var(--surface);
}
.tab{
  padding:10px 12px;
  border-radius:12px;
  border:1px solid transparent;
  background:transparent;
  min-height:40px;
}
.tab.active{
  border-color:var(--accent-border);
  background:var(--panel);
}
.list{
  display:grid;
  gap:10px;
}
.item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  cursor:pointer;
}
.item:focus-visible{outline:2px solid var(--accent-outline);outline-offset:2px}
.item.playing{border-color:var(--accent-border);background:var(--accent-bg)}
.item-main{min-width:0}
.item-title{font-weight:700}
.item-sub{margin-top:4px;font-size:13px}
.item-actions{display:flex;gap:8px;flex:0 0 auto}
.icon-btn{
  width:44px;
  padding:10px 0;
  font-size:18px;
  line-height:1;
}
.item-actions .icon-btn{width:42px}
.player{
  position:sticky;
  bottom:0;
  border-top:1px solid var(--border);
  background:rgba(246,247,249,.92);
}
.player .controls{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:flex-end}
.player .now{min-width:0}
.now-title{font-weight:800}
.now-sub{font-size:13px;margin-top:4px}
.vol{width:140px}
@media (max-width:520px){
  .meta-row{flex-direction:column;align-items:stretch}
  #info{width:100%}
  .head-actions{width:100%;justify-content:space-between}
  .tools{flex:1 1 100%;justify-content:flex-end}
  .input{flex:1 1 100%}
  .check{flex:1 1 100%;justify-content:space-between}
  #searchBtn{flex:1 1 100%}
  .tabs{width:100%;justify-content:space-between;gap:6px;padding:3px}
  .tab{flex:1 1 25%;padding:9px 6px;font-size:13px}
  .vol{width:100%}
  .player .controls{justify-content:space-between}
  .player .controls .btn{flex:0 0 auto}
}