:root {
  --bg: #0f1115; --card: #1a1e27; --line: #2a3040;
  --text: #e8eaf0; --dim: #8b93a7; --accent: #4f9cff;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; } /* 防止组件 display 规则覆盖 hidden 属性 */
html, body { margin: 0; background: var(--bg); color: var(--text);
  font-family: system-ui, "Microsoft YaHei", sans-serif; }
button { background: none; border: none; color: var(--text); cursor: pointer; }

#topbar { position: sticky; top: 0; z-index: 5; background: var(--bg);
  padding: 10px 14px calc(10px + env(safe-area-inset-top)); border-bottom: 1px solid var(--line); }
#topbar h1 { font-size: 18px; margin: 0 0 10px; }
#search { width: 100%; padding: 12px 14px; font-size: 16px; color: var(--text);
  background: var(--card); border: 1px solid var(--line); border-radius: 10px; outline: none; }
#search:focus { border-color: var(--accent); }

#list { padding: 4px 0 96px; }
.group-header { padding: 14px 16px 6px; font-size: 13px; color: var(--accent); font-weight: 600; }
.song { display: flex; align-items: center; gap: 12px; padding: 10px 16px; min-height: 64px; }
.song:active { background: var(--card); }
.song img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; background: var(--card); flex: none; }
.song-info { min-width: 0; }
.song-title { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.song-artist { font-size: 13px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.song.current .song-title { color: var(--accent); }
.empty { padding: 40px 16px; text-align: center; color: var(--dim); }
#retry { margin-top: 12px; padding: 10px 24px; background: var(--accent); color: #fff; border-radius: 8px; font-size: 15px; }

#mini { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; display: flex; align-items: center;
  gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: var(--card); border-top: 1px solid var(--line); }
#mini-cover { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; background: var(--bg); flex: none; }
#mini-info { flex: 1; min-width: 0; cursor: pointer; }
#mini-title { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#mini-artist { font-size: 12px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

#player { position: fixed; inset: 0; z-index: 10; background: var(--bg);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding: 20px 24px calc(40px + env(safe-area-inset-bottom)); }
#pl-close { position: absolute; top: calc(12px + env(safe-area-inset-top)); left: 16px; font-size: 26px; }
#pl-cover { width: min(78vw, 340px); height: min(78vw, 340px); border-radius: 16px;
  object-fit: cover; background: var(--card); margin-bottom: 28px; box-shadow: 0 12px 40px rgba(0,0,0,.5); }
#pl-title { font-size: 20px; font-weight: 600; align-self: stretch; text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#pl-artist { font-size: 14px; color: var(--dim); margin: 6px 0 30px; }
.progress { display: flex; align-items: center; gap: 10px; width: 100%; }
.progress span { font-size: 12px; color: var(--dim); min-width: 40px; }
#pl-seek { flex: 1; height: 32px; }
.controls { display: flex; align-items: center; gap: 18px; margin-top: 18px; }
.btn-icon { font-size: 22px; padding: 10px; }
.controls .big { font-size: 30px; background: var(--card); border-radius: 50%;
  width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }
.controls .big:active { background: var(--line); }
#pl-play { background: var(--accent) !important; }

#toast { position: fixed; left: 50%; bottom: 110px; transform: translateX(-50%); z-index: 20;
  background: rgba(0,0,0,.85); color: #fff; padding: 10px 18px; border-radius: 8px;
  font-size: 14px; max-width: 86vw; text-align: center; }

#compat-banner { position: relative; margin: 10px 14px 0; padding: 12px 40px 12px 14px;
  background: #3a2b12; border: 1px solid #8a6a2f; border-radius: 10px;
  color: #ffd98a; font-size: 13px; line-height: 1.6; }
#banner-close { position: absolute; top: 6px; right: 8px; font-size: 18px; color: #ffd98a; padding: 4px 8px; }