/* ===== 云音播放器 · 深色玻璃拟态主题 ===== */
:root{
  --bg-0:#0a0a12; --bg-1:#12121d; --bg-2:#1a1a28; --bg-3:#232333;
  --glass:rgba(255,255,255,.05); --glass-2:rgba(255,255,255,.08);
  --border:rgba(255,255,255,.08);
  --text:#f0f0f5; --text-2:#a0a0b8; --text-3:#6b6b80;
  --accent:#6366f1; --accent-2:#8b5cf6; --accent-grad:linear-gradient(135deg,#6366f1,#8b5cf6);
  --pink:#ec4899; --green:#22c55e;
  --radius:12px; --radius-sm:8px;
  --shadow:0 8px 32px rgba(0,0,0,.4);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  background:var(--bg-0); color:var(--text); user-select:none;
  -webkit-font-smoothing:antialiased;
}
#app{
  display:grid; grid-template-rows:64px 1fr 88px; height:100vh;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(139,92,246,.12), transparent 60%),
    radial-gradient(900px 500px at 10% 110%, rgba(99,102,241,.10), transparent 60%),
    var(--bg-0);
}

/* ===== 顶部栏 ===== */
.topbar{
  display:flex; align-items:center; gap:20px; padding:0 24px;
  background:rgba(18,18,29,.7); backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border); z-index:20;
}
.brand{display:flex;align-items:center;gap:10px;min-width:120px}
.brand-logo{
  width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  background:var(--accent-grad);color:#fff;box-shadow:0 4px 14px rgba(99,102,241,.4);
}
.brand-name{font-size:19px;font-weight:700;background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:1px}
.search-wrap{
  flex:1;max-width:560px;display:flex;align-items:center;gap:8px;
  background:var(--glass);border:1px solid var(--border);border-radius:999px;padding:8px 16px;
  transition:border-color .2s,background .2s;
}
.search-wrap:focus-within{border-color:var(--accent);background:var(--glass-2)}
.search-icon{color:var(--text-3);flex-shrink:0}
.search-wrap input{flex:1;background:none;border:none;outline:none;color:var(--text);font-size:14px}
.search-wrap input::placeholder{color:var(--text-3)}
.search-type{
  background:var(--bg-3);border:none;border-radius:999px;color:var(--text-2);
  font-size:12px;padding:4px 10px;outline:none;cursor:pointer;
}
.search-btn{
  display:flex;align-items:center;gap:5px;border:none;cursor:pointer;
  background:var(--accent-grad);color:#fff;font-size:13px;font-weight:600;
  padding:6px 16px;border-radius:999px;flex-shrink:0;transition:transform .15s,box-shadow .15s;
  box-shadow:0 3px 12px rgba(99,102,241,.35);
}
.search-btn:hover{transform:scale(1.05);box-shadow:0 4px 16px rgba(99,102,241,.5)}
.search-btn:active{transform:scale(.97)}
.top-actions{display:flex;align-items:center;gap:12px;margin-left:auto}
.quality-selector{display:flex;align-items:center;gap:8px;background:var(--glass);border:1px solid var(--border);border-radius:999px;padding:6px 14px}
.qlabel{font-size:12px;color:var(--text-3)}
.quality-selector select{background:none;border:none;color:var(--text);font-size:13px;outline:none;cursor:pointer}
.quality-selector select option{background:var(--bg-2)}

/* ===== 主布局 ===== */
.main-layout{display:grid;grid-template-columns:240px 1fr 0px;overflow:hidden;transition:grid-template-columns .35s ease}
.main-layout.lyrics-open{grid-template-columns:240px 1fr 340px}
.sidebar{
  background:rgba(18,18,29,.5);backdrop-filter:blur(10px);
  border-right:1px solid var(--border);overflow-y:auto;padding:16px 12px;
}
.nav-menu{display:flex;flex-direction:column;gap:4px;margin-bottom:20px}
.nav-item{
  display:flex;align-items:center;gap:12px;width:100%;padding:10px 14px;
  background:none;border:none;color:var(--text-2);font-size:14px;cursor:pointer;
  border-radius:var(--radius-sm);transition:all .2s;
}
.nav-item:hover{background:var(--glass);color:var(--text)}
.nav-item.active{background:var(--accent-grad);color:#fff;box-shadow:0 4px 12px rgba(99,102,241,.3)}
.sidebar-section{margin-top:8px}
.sidebar-title{font-size:11px;font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:1px;padding:0 14px 8px}
.queue-list{display:flex;flex-direction:column;gap:2px}
.queue-empty{color:var(--text-3);font-size:12px;padding:12px 14px;text-align:center}
.queue-item{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:var(--radius-sm);cursor:pointer;transition:background .15s}
.queue-item:hover{background:var(--glass)}
.queue-item.playing{background:var(--glass-2)}
.queue-item.playing .qi-name{color:var(--accent)}
.qi-idx{font-size:11px;color:var(--text-3);width:18px;text-align:center;flex-shrink:0}
.qi-name{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.qi-del{opacity:0;color:var(--text-3);background:none;border:none;cursor:pointer;padding:2px;transition:opacity .15s}
.queue-item:hover .qi-del{opacity:1}
.qi-del:hover{color:var(--pink)}

/* ===== 内容区 ===== */
.content{overflow-y:auto;padding:24px 28px 40px}
.content::-webkit-scrollbar,.sidebar::-webkit-scrollbar{width:8px}
.content::-webkit-scrollbar-thumb,.sidebar::-webkit-scrollbar-thumb{background:var(--bg-3);border-radius:4px}
.content::-webkit-scrollbar-thumb:hover{background:var(--text-3)}
.view-title{font-size:22px;font-weight:700;margin-bottom:18px;display:flex;align-items:center;gap:10px}
.section-title{font-size:15px;font-weight:600;color:var(--text-2);margin:24px 0 14px;letter-spacing:.5px}

/* 网格 */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:18px}
.card{cursor:pointer;transition:transform .2s}
.card:hover{transform:translateY(-4px)}
.card-cover{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:1;background:var(--bg-2);box-shadow:var(--shadow)}
.card-cover img{width:100%;height:100%;object-fit:cover;display:block}
.card-cover .play-overlay{
  position:absolute;inset:0;background:rgba(0,0,0,.4);display:grid;place-items:center;
  opacity:0;transition:opacity .2s;
}
.card:hover .play-overlay{opacity:1}
.play-overlay .play-circle{
  width:50px;height:50px;border-radius:50%;background:var(--accent-grad);
  display:grid;place-items:center;color:#fff;box-shadow:0 6px 20px rgba(99,102,241,.5);
  transform:scale(.8);transition:transform .2s;
}
.card:hover .play-overlay .play-circle{transform:scale(1)}
.card-title{font-size:13px;font-weight:500;margin-top:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-sub{font-size:12px;color:var(--text-3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 歌曲列表 */
.song-list{display:flex;flex-direction:column;gap:2px;margin-top:8px}
.song-row{
  display:grid;grid-template-columns:40px 1fr 1fr 60px 44px;align-items:center;gap:14px;
  padding:9px 14px;border-radius:var(--radius-sm);cursor:pointer;transition:background .15s;
}
.song-row:hover{background:var(--glass)}
.song-row.playing{background:var(--glass-2)}
.song-row.playing .sr-name{color:var(--accent)}
.sr-idx{font-size:13px;color:var(--text-3);text-align:center}
.song-row:hover .sr-idx{display:none}
.sr-play{display:none;color:var(--accent)}
.song-row:hover .sr-play{display:block}
.song-row.playing .sr-idx{display:none}
.song-row.playing .sr-play{display:block}
.sr-info{display:flex;align-items:center;gap:12px;min-width:0}
.sr-cover{width:42px;height:42px;border-radius:6px;object-fit:cover;flex-shrink:0;background:var(--bg-2)}
.sr-text{min-width:0}
.sr-name{font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr-artist{font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.sr-album{font-size:13px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr-dur{font-size:12px;color:var(--text-3);text-align:right}
.sr-actions{display:flex;justify-content:flex-end;gap:4px}
.sr-actions .icon-btn{padding:4px}

/* 骨架/空/加载 */
.loading-dots{display:flex;gap:6px;justify-content:center;padding:40px}
.loading-dots span{width:9px;height:9px;border-radius:50%;background:var(--accent);animation:bounce 1.2s infinite ease-in-out}
.loading-dots span:nth-child(2){animation-delay:.15s}
.loading-dots span:nth-child(3){animation-delay:.3s}
@keyframes bounce{0%,80%,100%{transform:scale(.5);opacity:.4}40%{transform:scale(1);opacity:1}}
.empty-state{text-align:center;padding:60px 20px;color:var(--text-3)}
.empty-state svg{opacity:.4;margin-bottom:14px}
.empty-state p{font-size:14px}

/* 分类标签 */
.tag-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.tag{
  padding:7px 16px;border-radius:999px;background:var(--glass);border:1px solid var(--border);
  color:var(--text-2);font-size:13px;cursor:pointer;transition:all .2s;
}
.tag:hover{border-color:var(--accent);color:var(--text)}
.tag.active{background:var(--accent-grad);border-color:transparent;color:#fff}

/* 歌单头部 */
.playlist-header{display:flex;gap:24px;margin-bottom:24px;align-items:flex-end}
.playlist-header .ph-cover{width:200px;height:200px;border-radius:var(--radius);object-fit:cover;box-shadow:var(--shadow);flex-shrink:0;background:var(--bg-2)}
.ph-info h2{font-size:30px;font-weight:800;margin-bottom:8px}
.ph-meta{color:var(--text-2);font-size:14px;margin-bottom:16px}
.ph-actions{display:flex;gap:10px}
.btn-primary{
  display:inline-flex;align-items:center;gap:8px;padding:11px 26px;border-radius:999px;
  background:var(--accent-grad);color:#fff;border:none;font-size:14px;font-weight:600;cursor:pointer;
  box-shadow:0 6px 20px rgba(99,102,241,.4);transition:transform .15s;
}
.btn-primary:hover{transform:scale(1.04)}
.btn-ghost{
  display:inline-flex;align-items:center;gap:8px;padding:11px 22px;border-radius:999px;
  background:var(--glass);color:var(--text);border:1px solid var(--border);font-size:14px;cursor:pointer;transition:background .15s;
}
.btn-ghost:hover{background:var(--glass-2)}

/* ===== 歌词面板 ===== */
.lyrics-panel{
  background:rgba(18,18,29,.5);backdrop-filter:blur(10px);border-left:1px solid var(--border);
  overflow:hidden;display:flex;flex-direction:column;width:0;transition:width .35s ease;
}
.main-layout.lyrics-open .lyrics-panel{width:340px}
.lyrics-header{
  display:flex;align-items:center;justify-content:space-between;padding:18px 20px;
  border-bottom:1px solid var(--border);font-weight:600;flex-shrink:0;
}
.lyrics-body{flex:1;overflow-y:auto;padding:30px 24px;mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent)}
.lyrics-body::-webkit-scrollbar{width:5px}
.lyrics-body::-webkit-scrollbar-thumb{background:var(--bg-3);border-radius:3px}
.lyric-line{padding:9px 0;font-size:14px;color:var(--text-3);text-align:center;line-height:1.7;transition:all .3s;cursor:pointer}
.lyric-line.active{color:var(--text);font-size:16px;font-weight:600;transform:scale(1.04)}
.lyric-line.passed{color:var(--text-3);opacity:.5}
.lyrics-placeholder{color:var(--text-3);text-align:center;padding:60px 0;font-size:14px}

/* ===== 播放器栏 ===== */
.player-bar{
  display:grid;grid-template-columns:1fr 2fr 1fr;align-items:center;gap:20px;padding:0 24px;
  background:rgba(12,12,20,.85);backdrop-filter:blur(20px);border-top:1px solid var(--border);z-index:20;
}
.now-playing{display:flex;align-items:center;gap:12px;min-width:0}
.np-cover{width:56px;height:56px;border-radius:8px;object-fit:cover;background:var(--bg-2);flex-shrink:0}
.np-info{min-width:0;flex:1}
.np-title{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.np-artist{font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.now-playing .icon-btn{flex-shrink:0}

.player-controls{display:flex;flex-direction:column;gap:8px;align-items:center}
.control-buttons{display:flex;align-items:center;gap:14px}
.play-btn{
  width:44px;height:44px;border-radius:50%;background:var(--accent-grad);color:#fff;border:none;
  display:grid;place-items:center;cursor:pointer;box-shadow:0 4px 16px rgba(99,102,241,.4);transition:transform .15s;
}
.play-btn:hover{transform:scale(1.08)}
.progress-wrap{display:flex;align-items:center;gap:12px;width:100%;max-width:560px}
.time{font-size:11px;color:var(--text-3);min-width:38px;text-align:center;font-variant-numeric:tabular-nums}
.progress-bar{flex:1;height:5px;background:var(--bg-3);border-radius:3px;position:relative;cursor:pointer}
.progress-fill{height:100%;background:var(--accent-grad);border-radius:3px;width:0%;position:relative}
.progress-thumb{
  position:absolute;top:50%;width:13px;height:13px;border-radius:50%;background:#fff;
  transform:translate(-50%,-50%);left:0%;opacity:0;transition:opacity .15s;box-shadow:0 2px 6px rgba(0,0,0,.4);
}
.progress-bar:hover .progress-thumb{opacity:1}

.player-extra{display:flex;justify-content:flex-end}
.volume-wrap{display:flex;align-items:center;gap:8px}
.volume-bar{width:90px;height:5px;background:var(--bg-3);border-radius:3px;cursor:pointer;position:relative}
.volume-fill{height:100%;background:var(--accent);border-radius:3px;width:80%}

.icon-btn{
  background:none;border:none;color:var(--text-2);cursor:pointer;padding:8px;border-radius:8px;
  display:grid;place-items:center;transition:color .15s,background .15s;
}
.icon-btn:hover{color:var(--text);background:var(--glass)}
.icon-btn.active{color:var(--accent)}

/* 旋转动画 */
.np-cover.playing{animation:spin 16s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Toast */
.toast{
  position:fixed;bottom:108px;left:50%;transform:translateX(-50%) translateY(20px);
  background:rgba(30,30,45,.95);backdrop-filter:blur(12px);color:var(--text);
  padding:11px 22px;border-radius:999px;border:1px solid var(--border);font-size:13px;
  opacity:0;pointer-events:none;transition:all .3s;z-index:100;box-shadow:var(--shadow);
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* 响应式 */
@media(max-width:900px){
  .main-layout{grid-template-columns:1fr !important}
  .sidebar,.lyrics-panel{display:none}
  .player-bar{grid-template-columns:1fr auto}
  .player-extra{display:none}
  .search-type{display:none}
  .quality-selector{display:none}
}
@media(max-width:600px){
  .topbar{padding:0 12px;gap:10px}
  .brand-name{display:none}
  .content{padding:16px}
  .card-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px}
  .song-row{grid-template-columns:36px 1fr 50px 36px}
  .sr-album{display:none}
}