:root{--bg:#0b0b10;--bg2:#15151d;--bg3:#1f1f2a;--fg:#f2f2f5;--mut:#9a9aaa;--acc:#ff3d6e;--acc2:#7c5cff;--r:12px;
  --safe-b:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);font:15px/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input{font:inherit}
.hidden{display:none!important}

/* login */
.login{min-height:100%;display:flex;align-items:center;justify-content:center;padding:20px}
.login-box{width:100%;max-width:340px;text-align:center}
.logo{font-size:56px;width:96px;height:96px;margin:0 auto 8px;border-radius:24px;background:linear-gradient(135deg,var(--acc),var(--acc2));display:flex;align-items:center;justify-content:center}
.login-box input{display:block;width:100%;padding:14px;margin:10px 0;border-radius:var(--r);border:1px solid #2a2a36;background:var(--bg2);color:var(--fg)}
.login-box button{width:100%;padding:14px;border-radius:var(--r);background:var(--acc);font-weight:600;margin-top:6px}
.err{color:#ff7b7b;margin-top:12px;min-height:20px}

/* layout */
.app{display:grid;grid-template-columns:230px 1fr;height:100%}
.side{background:#08080c;padding:18px 12px;display:flex;flex-direction:column;border-right:1px solid #1a1a22}
.brand{font-size:20px;font-weight:700;padding:0 10px 18px}
.side nav a{display:flex;gap:12px;align-items:center;padding:10px 12px;border-radius:10px;color:var(--mut)}
.side nav a i{font-style:normal;width:20px;text-align:center}
.side nav a.on,.side nav a:hover{background:var(--bg3);color:var(--fg)}
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:8px;padding:10px 12px;color:var(--mut);font-size:13px}
.main{overflow-y:auto;padding-bottom:110px}
.top{position:sticky;top:0;z-index:5;padding:14px 22px;background:linear-gradient(var(--bg) 70%,transparent)}
#search{width:100%;max-width:520px;padding:11px 16px;border-radius:999px;border:1px solid #262632;background:var(--bg2);color:var(--fg)}
.view{padding:0 22px 20px}
h2.sec{font-size:22px;margin:22px 0 12px}
.row-head{display:flex;align-items:center;justify-content:space-between}
.empty{color:var(--mut);padding:30px 0;text-align:center}

/* grids */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:18px}
.card{cursor:pointer;min-width:0}
.card .art{aspect-ratio:1;border-radius:10px}
.card b{display:block;margin-top:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card span{display:block;color:var(--mut);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .pbar{height:3px;background:#333;border-radius:2px;margin-top:6px}
.card .pbar div{height:100%;background:var(--acc);border-radius:2px}
.hscroll{display:grid;grid-auto-flow:column;grid-auto-columns:150px;gap:16px;overflow-x:auto;padding-bottom:6px;scrollbar-width:none}
.art{width:100%;object-fit:cover;background:linear-gradient(135deg,#2a2a3a,#1a1a24);display:flex;align-items:center;justify-content:center;color:#555;font-size:40px}
img.art{display:block}

/* lists */
.list{display:flex;flex-direction:column}
.trk{display:grid;grid-template-columns:44px 1fr auto auto;gap:12px;align-items:center;padding:8px 6px;border-radius:8px;cursor:pointer}
.trk:hover{background:var(--bg2)}
.trk.on b{color:var(--acc)}
.trk .art{width:44px;height:44px;border-radius:6px;font-size:18px}
.trk .no{width:44px;text-align:center;color:var(--mut)}
.trk b,.trk span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trk span{color:var(--mut);font-size:13px}
.trk .d{color:var(--mut);font-size:13px}
.trk .more{padding:8px;color:var(--mut);font-size:18px}

/* album / detail header */
.hero{display:flex;gap:22px;align-items:flex-end;margin:10px 0 18px}
.hero .art{width:200px;height:200px;border-radius:12px;flex:none;box-shadow:0 10px 40px #0008}
.hero h1{margin:4px 0;font-size:30px}
.hero p{margin:0;color:var(--mut)}
.btns{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.btn{padding:10px 18px;border-radius:999px;background:var(--bg3);font-weight:600}
.btn.pri{background:var(--acc)}

/* mini player */
.mini{position:fixed;left:230px;right:0;bottom:0;z-index:20;display:flex;align-items:center;gap:12px;padding:10px 18px calc(10px + var(--safe-b));background:#121219f2;backdrop-filter:blur(14px);border-top:1px solid #222}
.mini-bar{position:absolute;left:0;right:0;top:0;height:2px;background:#2a2a35}
#miniFill{height:100%;width:0;background:var(--acc)}
#miniArt{width:46px;height:46px;border-radius:6px;object-fit:cover;background:var(--bg3)}
.mini-info{flex:1;min-width:0;cursor:pointer}
.mini-info b,.mini-info span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-info span{color:var(--mut);font-size:13px}
.ic{font-size:22px;padding:8px;line-height:1;border-radius:50%}
.ic.big{font-size:26px}

/* full player */
.full{position:fixed;inset:0;z-index:40;background:linear-gradient(#2a1a2e,var(--bg) 60%);padding:14px 22px calc(20px + var(--safe-b));display:flex;flex-direction:column;align-items:center;overflow-y:auto}
.full>*{width:100%;max-width:440px}
.full-top{display:flex;justify-content:space-between;align-items:center;color:var(--mut);font-size:13px;text-transform:uppercase;letter-spacing:1px}
.full-art{aspect-ratio:1;border-radius:14px;object-fit:cover;margin:18px 0;background:var(--bg3);box-shadow:0 20px 60px #000a}
.full-meta{display:flex;align-items:center;gap:10px}
.full-meta>div{flex:1;min-width:0}
.full-meta h2{margin:0;font-size:22px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.full-meta p{margin:4px 0 0;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fav.on{color:var(--acc)}
#seek{width:100%;margin:18px 0 4px;accent-color:var(--acc)}
.times{display:flex;justify-content:space-between;color:var(--mut);font-size:12px}
.controls{display:flex;justify-content:space-between;align-items:center;margin:14px 0}
.controls .ic{font-size:30px}
.controls .ic.sm{font-size:16px;font-weight:700;color:var(--mut)}
.controls .ic.sm.on{color:var(--acc)}
.controls .play{width:72px;height:72px;background:var(--fg);color:#000;font-size:30px}
.extras{display:flex;justify-content:center;gap:10px}
.extras button{padding:8px 14px;border-radius:999px;background:#ffffff14;font-size:14px}
.full.book .music-only,.full:not(.book) .book-only,.full:not(.video) .video-only{display:none}
.full-vid{width:100%;aspect-ratio:16/9;max-height:56vh;object-fit:contain;background:#000;border-radius:12px;margin:18px 0;box-shadow:0 20px 60px #000a}
.full.video>*{max-width:860px}
.full.video .full-art{display:none}
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px}
.vgrid .art,.vscroll .art{aspect-ratio:16/9;font-size:34px}
.vscroll{display:grid;grid-auto-flow:column;grid-auto-columns:240px;gap:16px;overflow-x:auto;padding-bottom:6px;scrollbar-width:none}
.vcard .dur{position:relative}
.vcard .dur em{position:absolute;right:6px;bottom:6px;background:#000c;font-style:normal;font-size:12px;padding:1px 6px;border-radius:4px}
.queue{margin-top:20px}

/* sheet (menus) */
.sheet{position:fixed;inset:0;z-index:60;background:#0009;display:flex;align-items:flex-end;justify-content:center}
.sheet-box{width:100%;max-width:480px;background:var(--bg2);border-radius:18px 18px 0 0;padding:10px 0 calc(16px + var(--safe-b));max-height:75vh;overflow-y:auto}
.sheet-box h3{margin:10px 20px;font-size:16px}
.sheet-box button,.sheet-box .opt{display:block;width:100%;text-align:left;padding:14px 20px;font-size:15px}
.sheet-box button:hover{background:var(--bg3)}
.sheet-box input{width:calc(100% - 40px);margin:6px 20px;padding:12px;border-radius:10px;border:1px solid #333;background:var(--bg);color:var(--fg)}

.toast{position:fixed;left:50%;bottom:120px;transform:translateX(-50%);background:#333;padding:10px 18px;border-radius:999px;opacity:0;transition:opacity .25s;pointer-events:none;z-index:80}
.toast.on{opacity:1}
.tabs{display:none}

/* phone layout */
@media (max-width:760px){
  .app{grid-template-columns:1fr}
  .side{display:none}
  .top{padding:12px 14px}
  .view{padding:0 14px 20px}
  .main{padding-bottom:150px}
  .grid{grid-template-columns:repeat(2,1fr);gap:14px}
  .vgrid{grid-template-columns:1fr;gap:16px}
  .vscroll{grid-auto-columns:78%}
  .hero{flex-direction:column;align-items:center;text-align:center}
  .hero .art{width:220px;height:220px}
  .btns{justify-content:center}
  .mini{left:8px;right:8px;bottom:calc(62px + var(--safe-b));border-radius:12px;border:0;padding:8px 10px;background:#24202ef5}
  .mini .desk{display:none}
  .tabs{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:15;background:#0b0b10f5;border-top:1px solid #1d1d26;padding-bottom:var(--safe-b)}
  .tabs a{flex:1;display:flex;flex-direction:column;align-items:center;padding:8px 0 6px;color:var(--mut);font-size:11px}
  .tabs a i{font-style:normal;font-size:20px}
  .tabs a.on{color:var(--fg)}
}
/* v15: browse chips, smart lists */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 8px}
.chip{display:inline-block;padding:7px 14px;border-radius:20px;background:var(--bg3);color:var(--fg);font-size:14px;cursor:pointer;text-decoration:none;white-space:nowrap}
.chip small{color:var(--mut);margin-left:4px}
.chip:hover,.chip.on{background:var(--acc);color:#fff}
.chip.on small{color:#fff}
.chips.big .chip{padding:10px 18px;font-size:15px}
.card.smart .art,.art.big-ic{font-size:54px;color:#fff}
.sm-most{background:linear-gradient(135deg,#ff3d6e,#ff9a3d)!important}
.sm-new{background:linear-gradient(135deg,#3dd6ff,#7c5cff)!important}
.sm-forgotten{background:linear-gradient(135deg,#7c5cff,#2a2a3a)!important}
.art.big-ic:not([class*="sm-"]){background:linear-gradient(135deg,var(--acc2),var(--acc))}
.trk .d small{color:var(--mut)}