/* ============================================================
   亮听 · 三主题皮肤
   html[data-theme="ios"]     浅色系统风
   html[data-theme="aurora"]  极光深色（默认）
   html[data-theme="ink"]     米色黑胶杂志
   ============================================================ */

/* ---------------- 主题切换按钮 ---------------- */
.theme-wrap{position:relative;flex:none}
.theme-btn{
  width:36px;height:36px;border-radius:11px;display:grid;place-items:center;
  background:var(--panel);border:1px solid var(--line);transition:.18s;
}
.theme-btn:hover{background:var(--panel-2)}
.theme-btn .rings{display:flex;align-items:center;gap:2.5px}
.theme-btn .rings i{display:block;width:6px;height:6px;border-radius:50%}
.theme-btn .rings i:nth-child(1){background:#0A84FF}
.theme-btn .rings i:nth-child(2){background:#FF3B4E}
.theme-btn .rings i:nth-child(3){background:#B4552D}

.theme-menu{
  position:absolute;right:0;top:44px;width:258px;padding:8px;border-radius:16px;z-index:60;
  background:var(--bg2);border:1px solid var(--line);
  box-shadow:0 24px 60px rgba(0,0,0,.45);
  opacity:0;transform:translateY(-6px) scale(.98);pointer-events:none;transition:.18s;
}
.theme-menu.show{opacity:1;transform:none;pointer-events:auto}
.tm-title{font-size:10.5px;letter-spacing:1.4px;color:var(--dim2);padding:6px 8px 8px}
.tm-item{
  width:100%;display:flex;align-items:center;gap:11px;padding:9px 9px;border-radius:11px;
  text-align:left;transition:.15s;color:var(--text);
}
.tm-item:hover{background:var(--panel)}
.tm-item.on{background:var(--panel-2)}
.tm-swatch{width:34px;height:34px;border-radius:9px;flex:none;display:flex;overflow:hidden;border:1px solid var(--line)}
.tm-swatch i{flex:1}
.tm-swatch.ios i:nth-child(1){background:#FFFFFF}
.tm-swatch.ios i:nth-child(2){background:#F2F2F7}
.tm-swatch.ios i:nth-child(3){background:#0A84FF}
.tm-swatch.aurora i:nth-child(1){background:#0A0B12}
.tm-swatch.aurora i:nth-child(2){background:#FF3B4E}
.tm-swatch.aurora i:nth-child(3){background:#F7783C}
.tm-swatch.ink i:nth-child(1){background:#F4EFE6}
.tm-swatch.ink i:nth-child(2){background:#1B1A17}
.tm-swatch.ink i:nth-child(3){background:#B4552D}
.tm-txt{flex:1;min-width:0}
.tm-txt b{display:block;font-size:13px;font-weight:600}
.tm-txt em{display:block;font-size:11px;color:var(--dim2);font-style:normal;margin-top:1px}
.tm-check{font-size:13px;color:var(--accent);opacity:0}
.tm-item.on .tm-check{opacity:1}

/* ============================================================
   THEME · iOS 浅色
   ============================================================ */
html[data-theme="ios"]{
  --bg:#F2F2F7; --bg2:#FFFFFF;
  --panel:rgba(118,118,128,.09); --panel-2:rgba(118,118,128,.16);
  --line:rgba(60,60,67,.12);
  --text:#1C1C1E; --dim:#8E8E93; --dim2:#A1A1A6;
  --accent:#0A84FF; --accent2:#5AC8FA; --pink:#FF375F;
  --ok:#30D158; --warn:#FF9F0A; --r:14px;
}
html[data-theme="ios"] body{background:#F2F2F7;color:#1C1C1E}
html[data-theme="ios"] body::before{display:none}
html[data-theme="ios"] .sidebar{background:#F5F5F7;border-right:1px solid var(--line);backdrop-filter:none}
html[data-theme="ios"] .brand h1{color:#1C1C1E;letter-spacing:.2px}
html[data-theme="ios"] .brand small{color:#A1A1A6}
html[data-theme="ios"] .logo{box-shadow:0 4px 12px rgba(0,0,0,.16)}
html[data-theme="ios"] .nav button{color:#3A3A3C}
html[data-theme="ios"] .nav button:hover{background:rgba(118,118,128,.12)}
html[data-theme="ios"] .nav button.on{background:#E4E4EA;color:#000;box-shadow:none;font-weight:600}
html[data-theme="ios"] .pl-head{color:#A1A1A6}
html[data-theme="ios"] .pl-list li{color:#3A3A3C}
html[data-theme="ios"] .pl-list li:hover{background:rgba(118,118,128,.12)}
html[data-theme="ios"] .pl-list li.on{background:#E4E4EA;color:#000;font-weight:600}
html[data-theme="ios"] .side-foot{color:#8E8E93}
html[data-theme="ios"] .topbar{background:transparent}
html[data-theme="ios"] .searchbox{background:rgba(118,118,128,.12);border:1px solid transparent}
html[data-theme="ios"] .searchbox:focus-within{border-color:rgba(10,132,255,.5);box-shadow:0 0 0 4px rgba(10,132,255,.1)}
html[data-theme="ios"] #kw::placeholder{color:#A1A1A6}
html[data-theme="ios"] .searchbox select,html[data-theme="ios"] .quality select{background:#fff;border-color:var(--line);color:#1C1C1E}
html[data-theme="ios"] .btn{background:#0A84FF;box-shadow:0 6px 16px rgba(10,132,255,.24)}
html[data-theme="ios"] .btn.ghost{background:rgba(118,118,128,.12);color:#3A3A3C;box-shadow:none}

html[data-theme="ios"] .hero{background:linear-gradient(115deg,#E9F1FF,#F7FAFF 60%,#EFF6FF);border-color:rgba(10,132,255,.14)}
html[data-theme="ios"] .hero h2{color:#0B1220}
html[data-theme="ios"] .hero .stat b{background:linear-gradient(135deg,#0A84FF,#5AC8FA);-webkit-background-clip:text;background-clip:text;color:transparent}
html[data-theme="ios"] .sec-title{color:#1C1C1E}
html[data-theme="ios"] .sec-title .bar{background:#0A84FF}
html[data-theme="ios"] .sec-title .count{color:#A1A1A6}

html[data-theme="ios"] .tracks{background:#fff;border-radius:14px;padding:4px 0;
  box-shadow:0 1px 2px rgba(0,0,0,.05),0 6px 20px rgba(0,0,0,.05)}
html[data-theme="ios"] .tr{padding:8px 14px;border-radius:0;border-color:transparent}
html[data-theme="ios"] .tr+.tr{border-top:1px solid rgba(60,60,67,.09)}
html[data-theme="ios"] .tr:hover{background:#F7F7F9;border-color:transparent}
html[data-theme="ios"] .tr.on{background:#EAF3FF;border-color:transparent}
html[data-theme="ios"] .tr .idx{color:#A1A1A6}
html[data-theme="ios"] .tr .title{color:#1C1C1E}
html[data-theme="ios"] .tr .sub{color:#8E8E93}
html[data-theme="ios"] .tr .alb{color:#A1A1A6}
html[data-theme="ios"] .tr .dur{color:#A1A1A6}
html[data-theme="ios"] .tr .cov{border-radius:9px;box-shadow:0 1px 3px rgba(0,0,0,.14)}
html[data-theme="ios"] .icon-btn{background:rgba(118,118,128,.1);color:#3A3A3C}
html[data-theme="ios"] .icon-btn:hover{background:rgba(118,118,128,.2);color:#000}
html[data-theme="ios"] .icon-btn.dl:hover{background:#0A84FF;color:#fff}
html[data-theme="ios"] .tag{background:rgba(48,209,88,.14);color:#1E9E45;border-color:rgba(48,209,88,.3)}
html[data-theme="ios"] .tag.ne{background:rgba(90,200,250,.16);color:#0A84FF;border-color:rgba(90,200,250,.32)}
html[data-theme="ios"] .tag.kg{background:rgba(10,132,255,.12);color:#0A84FF;border-color:rgba(10,132,255,.3)}
html[data-theme="ios"] .vip{background:linear-gradient(135deg,#FF9F0A,#FF375F);color:#fff}
html[data-theme="ios"] .empty{color:#A1A1A6}
html[data-theme="ios"] .sk{background:linear-gradient(90deg,#ECECF1,#F6F6FA,#ECECF1)}

html[data-theme="ios"] .lyric-panel{background:#FBFBFD;border-left:1px solid var(--line)}
html[data-theme="ios"] .tr .acts{opacity:.55}
html[data-theme="ios"] .tr:hover .acts{opacity:1}
html[data-theme="ios"] .lyric-head{color:#A1A1A6}
html[data-theme="ios"] .lyric-box{color:#A1A1A6}
html[data-theme="ios"] .lyric-box p.cur{color:#0A84FF;text-shadow:none}
html[data-theme="ios"] .lyric-box p.near{color:#6E6E73}
html[data-theme="ios"] .now-card{background:transparent;border-top:1px solid var(--line)}
html[data-theme="ios"] .now-card .t{color:#1C1C1E}
html[data-theme="ios"] .badge-src{background:rgba(48,209,88,.14);color:#1E9E45;border-color:rgba(48,209,88,.3)}
html[data-theme="ios"] .lyric-empty .disc{background:radial-gradient(circle at 50% 50%,#E4E4EA 0 18%,#fff 19% 22%,#EFEFF4 23% 100%);box-shadow:0 12px 30px rgba(0,0,0,.08)}

html[data-theme="ios"] .player{background:rgba(255,255,255,.82);backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);border-top:1px solid var(--line)}
html[data-theme="ios"] .p-name{color:#1C1C1E}
html[data-theme="ios"] .p-artist{color:#8E8E93}
html[data-theme="ios"] .p-btns .big{background:#1C1C1E;color:#fff;box-shadow:0 8px 20px rgba(0,0,0,.18)}
html[data-theme="ios"] .p-btns .mini{color:#3A3A3C}
html[data-theme="ios"] .p-btns .mini:hover{background:rgba(118,118,128,.14);color:#000}
html[data-theme="ios"] .bar{background:rgba(60,60,67,.16)}
html[data-theme="ios"] .bar .fill{background:#1C1C1E}
html[data-theme="ios"] .prog{color:#8E8E93}
html[data-theme="ios"] .p-cov{border-radius:10px}
html[data-theme="ios"] .mini{color:#3A3A3C}

html[data-theme="ios"] .toast{background:rgba(28,28,30,.92);color:#fff;border-color:transparent}
html[data-theme="ios"] .modal{background:#fff;border-color:var(--line)}
html[data-theme="ios"] .modal h3{color:#1C1C1E}
html[data-theme="ios"] .modal input{background:#F2F2F7;border-color:var(--line);color:#1C1C1E}
html[data-theme="ios"] .row,.modal [data-to]{color:#1C1C1E}
html[data-theme="ios"] .modal [style*="rgba(255,255,255,.04)"]{background:rgba(118,118,128,.1)!important}


/* ============================================================
   THEME · 极光深色（默认皮肤增强）
   ============================================================ */
html[data-theme="aurora"] .app{grid-template-rows:1fr}
html[data-theme="aurora"] .main{padding-bottom:104px}
html[data-theme="aurora"] .player{
  position:fixed;left:236px;right:320px;bottom:18px;margin:0 auto;max-width:880px;
  border-radius:22px;border:1px solid rgba(255,255,255,.1);
  background:rgba(18,20,32,.72);backdrop-filter:blur(26px) saturate(150%);
  box-shadow:0 26px 60px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.07);
  z-index:40;
}
@media (max-width:1180px) and (min-width:821px){
  html[data-theme="aurora"] .player{left:216px;right:18px;max-width:none}
}
/* 歌词收起时悬浮播放器跟着变宽 */
html[data-theme="aurora"] .app.lyrics-collapsed .player{right:20px}
@media (max-width:820px){
  html[data-theme="aurora"] .app{grid-template-rows:1fr auto}
  html[data-theme="aurora"] .main{padding-bottom:0}
  html[data-theme="aurora"] .player{position:relative;left:0;right:0;bottom:0;margin:0;border-radius:0;
    max-width:none;border-left:0;border-right:0;border-bottom:0;box-shadow:none;background:rgba(9,10,18,.82)}
}

/* ============================================================
   THEME · 米色黑胶杂志
   ============================================================ */
html[data-theme="ink"]{
  --bg:#F4EFE6; --bg2:#EFE9DE;
  --panel:rgba(27,26,23,.045); --panel-2:rgba(27,26,23,.08);
  --line:rgba(27,26,23,.14);
  --text:#1B1A17; --dim:#8A8272; --dim2:#A2967F;
  --accent:#B4552D; --accent2:#8F3F1D; --pink:#B4552D;
  --ok:#5F6B4C; --warn:#B4552D; --r:2px;
}
html[data-theme="ink"] body{background:#F4EFE6;color:#1B1A17;
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif}
html[data-theme="ink"] body::before{display:none}
html[data-theme="ink"] .sidebar{background:#EFE9DE;border-right:1px solid var(--line);backdrop-filter:none}
html[data-theme="ink"] .brand h1{font-family:"Songti SC","STSong","Noto Serif SC",Georgia,serif;
  letter-spacing:5px;font-weight:700;font-size:17px}
html[data-theme="ink"] .brand small{color:#A2967F;letter-spacing:2.2px}
html[data-theme="ink"] .logo{box-shadow:none;border-radius:4px;filter:grayscale(1) contrast(1.15)}
html[data-theme="ink"] .nav button{color:#6B6456;border-radius:0}
html[data-theme="ink"] .nav button:hover{background:rgba(27,26,23,.05)}
html[data-theme="ink"] .nav button.on{background:none;color:#1B1A17;font-weight:600;
  box-shadow:inset 2px 0 0 #B4552D;padding-left:14px}
html[data-theme="ink"] .pl-head{color:#A2967F;letter-spacing:2px}
html[data-theme="ink"] .pl-head button{background:none;border:1px solid rgba(27,26,23,.2);border-radius:50%}
html[data-theme="ink"] .pl-list li{border-radius:0;color:#6B6456}
html[data-theme="ink"] .pl-list li:hover{background:rgba(27,26,23,.04)}
html[data-theme="ink"] .pl-list li.on{background:rgba(180,85,45,.08);color:#B4552D}
html[data-theme="ink"] .side-foot{color:#A2967F;border-top:1px solid var(--line)}
html[data-theme="ink"] .dot{background:#B4552D;box-shadow:none}

html[data-theme="ink"] .topbar{gap:14px}
html[data-theme="ink"] .searchbox{background:none;border:0;border-bottom:1px solid rgba(27,26,23,.24);
  border-radius:0;padding-left:0}
html[data-theme="ink"] .searchbox:focus-within{border-bottom-color:#B4552D;box-shadow:none}
html[data-theme="ink"] .searchbox select,html[data-theme="ink"] .quality select{
  background:none;border:0;border-bottom:1px solid rgba(27,26,23,.2);border-radius:0;color:#1B1A17}
html[data-theme="ink"] .btn{background:#1B1A17;border-radius:0;box-shadow:none;letter-spacing:1px;font-size:12.5px}
html[data-theme="ink"] .btn.ghost{background:none;border:1px solid rgba(27,26,23,.24);color:#3A362E;border-radius:0}
html[data-theme="ink"] .btn.ghost:hover{background:rgba(27,26,23,.05);color:#000}

html[data-theme="ink"] .hero{background:none;border:0;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);border-radius:0;padding:18px 4px}
html[data-theme="ink"] .hero h2{font-family:"Songti SC","STSong",Georgia,serif;letter-spacing:2px;font-size:22px}
html[data-theme="ink"] .hero p{color:#8A8272}
html[data-theme="ink"] .hero .stat b{background:none;color:#B4552D;-webkit-text-fill-color:#B4552D}
html[data-theme="ink"] .hero .stat span{color:#A2967F;letter-spacing:1.4px}
html[data-theme="ink"] .sec-title{font-family:"Songti SC","STSong",Georgia,serif;letter-spacing:2.4px;font-weight:600}
html[data-theme="ink"] .sec-title .bar{width:1px;height:16px;background:#B4552D;border-radius:0}
html[data-theme="ink"] .sec-title .count{color:#A2967F;letter-spacing:1.2px}

html[data-theme="ink"] .tracks{background:none}
html[data-theme="ink"] .tr{border-radius:0;border:0;border-bottom:1px solid rgba(27,26,23,.1);
  padding:12px 4px;grid-template-columns:34px 44px minmax(0,1fr) 150px 62px 108px}
html[data-theme="ink"] .tr:hover{background:rgba(27,26,23,.03);border-color:rgba(27,26,23,.1)}
html[data-theme="ink"] .tr.on{background:rgba(180,85,45,.055);border-color:rgba(27,26,23,.1)}
html[data-theme="ink"] .tr .idx{color:#B0A69A;letter-spacing:1px}
html[data-theme="ink"] .tr.on .idx{color:#B4552D;font-weight:700}
html[data-theme="ink"] .tr .title{font-family:"Songti SC","STSong",Georgia,serif;font-size:15.5px;letter-spacing:.3px}
html[data-theme="ink"] .tr.on .title{color:#B4552D}
html[data-theme="ink"] .tr .sub{color:#8A8272;letter-spacing:.3px}
html[data-theme="ink"] .tr .alb{color:#A2967F}
html[data-theme="ink"] .tr .dur{color:#A2967F}
html[data-theme="ink"] .tr .cov{border-radius:2px;box-shadow:none;filter:grayscale(.15)}
html[data-theme="ink"] .icon-btn{background:none;border:1px solid rgba(27,26,23,.16);border-radius:50%;color:#3A362E}
html[data-theme="ink"] .icon-btn:hover{background:rgba(27,26,23,.06);color:#000;transform:none}
html[data-theme="ink"] .vip{background:none;border:1px solid rgba(180,85,45,.55);color:#B4552D;letter-spacing:1px}
html[data-theme="ink"] .tag{background:none;border:1px solid rgba(27,26,23,.24);color:#6B6456;letter-spacing:.8px}
html[data-theme="ink"] .tag.kg{border-color:rgba(27,26,23,.24);color:#6B6456}
html[data-theme="ink"] .empty{color:#A2967F}
html[data-theme="ink"] .sk{background:linear-gradient(90deg,#EDE7DB,#F6F2EA,#EDE7DB)}

html[data-theme="ink"] .lyric-panel{background:#EFE9DE;border-left:1px solid var(--line)}
html[data-theme="ink"] .lyric-head{color:#A2967F;letter-spacing:2px}
html[data-theme="ink"] .lyric-box{color:#A2967F;font-family:"Songti SC","STSong",Georgia,serif}
html[data-theme="ink"] .lyric-box p.cur{color:#B4552D;text-shadow:none;font-weight:600}
html[data-theme="ink"] .lyric-box p.near{color:#6B6456}
html[data-theme="ink"] .now-card{border-top:1px solid var(--line)}
html[data-theme="ink"] .now-card .t{font-family:"Songti SC",Georgia,serif}
html[data-theme="ink"] .badge-src{background:none;border:1px solid rgba(27,26,23,.22);color:#6B6456}
html[data-theme="ink"] .lyric-empty .disc{background:radial-gradient(circle at 50% 50%,#1B1A17 0 18%,#F4EFE6 19% 22%,#E6DFD2 23% 100%);box-shadow:0 14px 34px rgba(27,26,23,.18)}

html[data-theme="ink"] .player{background:#EFE9DE;border-top:1px solid rgba(27,26,23,.2);backdrop-filter:none}
html[data-theme="ink"] .p-name{font-family:"Songti SC",Georgia,serif;letter-spacing:.5px}
html[data-theme="ink"] .p-artist{color:#8A8272}
html[data-theme="ink"] .p-cov{border-radius:50%;box-shadow:0 6px 18px rgba(27,26,23,.25);
  border:4px solid #1B1A17;background:#1B1A17}
html[data-theme="ink"] .p-cov.rotating{animation:spin 26s linear infinite}
html[data-theme="ink"] .p-btns .big{background:#1B1A17;color:#F4EFE6;box-shadow:none}
html[data-theme="ink"] .p-btns .mini{color:#3A362E}
html[data-theme="ink"] .p-btns .mini:hover{background:rgba(27,26,23,.07);color:#000}
html[data-theme="ink"] .bar{background:rgba(27,26,23,.16);border-radius:0;height:1px}
html[data-theme="ink"] .bar .fill{background:#B4552D;border-radius:0}
html[data-theme="ink"] .bar .fill::after{display:none}
html[data-theme="ink"] .prog{color:#A2967F;letter-spacing:.6px}
html[data-theme="ink"] .vol .bar{height:1px}
html[data-theme="ink"] .mini{color:#3A362E}

html[data-theme="ink"] .toast{background:#1B1A17;color:#F4EFE6;border-color:transparent;border-radius:2px}
html[data-theme="ink"] .modal{background:#F4EFE6;border:1px solid rgba(27,26,23,.2);border-radius:2px}
html[data-theme="ink"] .modal h3{font-family:"Songti SC",Georgia,serif;letter-spacing:1.5px}
html[data-theme="ink"] .modal input{background:none;border:0;border-bottom:1px solid rgba(27,26,23,.3);border-radius:0;color:#1B1A17}
html[data-theme="ink"] .modal .pl-row{background:none!important;border:1px solid rgba(27,26,23,.14);border-radius:2px}
html[data-theme="ink"] .modal-mask{background:rgba(244,239,230,.7)}


/* 移动端：主题按钮与菜单 */
@media (max-width:820px){
  .theme-menu{position:fixed;right:12px;top:60px}
  .theme-btn{width:34px;height:34px}
}