:root{
  --bg:#0b0b0f; --card:#16161d; --line:#24242e; --text:#f3f3f7; --mute:#8d8d9b;
  --accent:#ff4d6d; --accent-2:#ff8a4d;
  --sat:env(safe-area-inset-top); --sab:env(safe-area-inset-bottom);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);
  font:16px/1.35 -apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;
  overscroll-behavior:none;-webkit-user-select:none;user-select:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
#app{position:fixed;inset:0;display:flex;flex-direction:column}

.top{display:flex;align-items:flex-end;justify-content:space-between;
  padding:calc(var(--sat) + 14px) 16px 8px}
.top h1{margin:0;font-size:32px;letter-spacing:-.02em}
.top-actions{display:flex;gap:8px}
.chip{padding:8px 14px;border-radius:999px;background:var(--card);border:1px solid var(--line);font-weight:600;font-size:14px}
.chip.accent{background:var(--accent);border-color:var(--accent);color:#fff}
.chip[hidden]{display:none}

.search{padding:4px 16px 8px}
.search input{width:100%;height:40px;border-radius:12px;border:1px solid var(--line);
  background:var(--card);color:var(--text);padding:0 14px;font-size:16px;outline:none;-webkit-user-select:text;user-select:text}
.search[hidden]{display:none}

main{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:4px 0 24px}

.row{display:flex;align-items:center;gap:12px;padding:8px 16px;min-height:64px}
.row:active{background:var(--card)}
.row img,.row .ph{width:48px;height:48px;border-radius:8px;object-fit:cover;background:var(--card);flex:none}
.row .ph{display:grid;place-items:center;color:var(--mute);font-size:20px}
.row .txt{flex:1;min-width:0;text-align:left}
.row .txt b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .txt span{display:block;color:var(--mute);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row.now .txt b{color:var(--accent)}
.row .more{width:40px;height:40px;display:grid;place-items:center;color:var(--mute);font-size:22px;letter-spacing:2px}
.row .dur{color:var(--mute);font-size:13px;font-variant-numeric:tabular-nums}

.dsearch{display:flex;gap:8px;padding:4px 16px 6px}
.dsearch input{flex:1;height:40px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--text);padding:0 14px;font-size:16px;outline:none;-webkit-user-select:text;user-select:text}
.dnote{margin:0;padding:0 16px 8px;color:var(--mute);font-size:13px}
.row .tag{display:inline-block;margin-right:6px;padding:1px 6px;border-radius:6px;background:var(--line);color:var(--mute);font-size:11px}
.empty{padding:64px 32px;text-align:center;color:var(--mute)}
.empty h3{color:var(--text);margin:0 0 6px;font-size:20px}
.empty p{margin:0 0 18px}

.set{padding:8px 16px}
.set .box{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;margin-bottom:12px}
.set h4{margin:0 0 6px}
.set p{margin:0 0 10px;color:var(--mute);font-size:14px}
.bar{height:8px;border-radius:99px;background:var(--line);overflow:hidden}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2))}

.mini{display:flex;align-items:center;gap:10px;margin:0 10px 6px;padding:8px 10px;
  background:var(--card);border:1px solid var(--line);border-radius:16px}
.mini[hidden]{display:none}
.mini img{width:44px;height:44px;border-radius:8px;object-fit:cover;background:var(--line)}
.mini-text{flex:1;min-width:0}
.mini-text b,.mini-text span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-text span{color:var(--mute);font-size:13px}

.tabs{display:flex;border-top:1px solid var(--line);background:rgba(11,11,15,.92);
  padding-bottom:var(--sab)}
.tabs button{flex:1;padding:14px 0 12px;color:var(--mute);font-weight:600;font-size:14px}
.tabs button.on{color:var(--text)}

.icon{width:44px;height:44px;display:grid;place-items:center}
.icon svg{width:26px;height:26px;fill:currentColor}
.icon.sm{width:40px;height:40px;color:var(--mute)}
.icon.sm svg{width:22px;height:22px}
.icon.sm.on{color:var(--accent)}
.icon.big{width:76px;height:76px;border-radius:50%;background:var(--text);color:#000}
.icon.big svg{width:34px;height:34px}

.player{position:fixed;inset:0;z-index:20;background:linear-gradient(180deg,#1b1b25,#0b0b0f 70%);
  display:flex;flex-direction:column;align-items:center;
  padding:calc(var(--sat) + 12px) 24px calc(var(--sab) + 24px);
  transform:translateY(0);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.player[hidden]{display:flex;transform:translateY(100%);visibility:hidden}
.p-close{align-self:center;width:48px;height:24px;display:grid;place-items:center;color:var(--mute)}
.p-close svg{width:28px;height:28px;fill:currentColor}
.p-art{width:min(100%,360px);aspect-ratio:1;border-radius:16px;object-fit:cover;background:var(--card);
  margin:auto 0 20px;box-shadow:0 20px 50px rgba(0,0,0,.5)}
.p-meta{width:100%;text-align:left;margin-bottom:12px}
.p-meta h2{margin:0;font-size:22px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-meta p{margin:2px 0 0;color:var(--mute)}
.p-seek{width:100%}
.p-seek input{width:100%;accent-color:var(--accent)}
.p-times{display:flex;justify-content:space-between;color:var(--mute);font-size:12px;font-variant-numeric:tabular-nums}
.p-ctrl{width:100%;display:flex;align-items:center;justify-content:space-between;margin:12px 0 auto}

.sheet{position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.55);display:flex;align-items:flex-end}
.sheet[hidden]{display:none}
.sheet-card{width:100%;background:var(--card);border-radius:20px 20px 0 0;padding:12px 8px calc(var(--sab) + 12px);
  max-height:75vh;overflow-y:auto}
.sheet-card h5{margin:8px 12px;color:var(--mute);font-size:13px;font-weight:600}
.sheet-card button{display:block;width:100%;text-align:left;padding:14px 12px;font-size:17px;border-radius:10px}
.sheet-card button:active{background:var(--line)}
.sheet-card button.danger{color:#ff6b6b}
.sheet-card input{width:calc(100% - 24px);margin:8px 12px;height:44px;border-radius:12px;border:1px solid var(--line);
  background:var(--bg);color:var(--text);padding:0 14px;font-size:16px;-webkit-user-select:text;user-select:text}

.toast{position:fixed;left:50%;bottom:calc(var(--sab) + 130px);transform:translateX(-50%);z-index:60;
  background:var(--text);color:#000;padding:10px 16px;border-radius:999px;font-weight:600;font-size:14px;max-width:90%}
.toast[hidden]{display:none}