:root {
    --accent:#2563eb; --bg:#f8fafc; --card:#fff; --muted:#6b7280; --highlight:#dbeafe;
  }
  body {
    margin:0; font-family:-apple-system,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif;
    background:var(--bg); color:#111;
  }
  header {
    background:var(--accent); color:#fff; text-align:center; padding:12px 8px; font-size:18px; font-weight:600;
  }
  .menu { display:flex; gap:8px; padding:10px; justify-content:center; background:#eef2ff; }
  .menu button { background:var(--card); border:1px solid #e5e7eb; padding:8px 12px; border-radius:8px; cursor:pointer; }
  .menu button.active { background:var(--accent); color:#fff; border-color:var(--accent); }
  #player { position:fixed; top:-9999px; }
  .container { padding:12px; max-width:900px; margin:0 auto; }
  ul.song-list { list-style:none; padding:0; margin:12px 0 80px 0; display:block; }
  li.song-item { padding:10px 12px; background:var(--card); border:1px solid #e6e6e6; margin-bottom:8px; border-radius:8px; display:flex; justify-content:space-between; align-items:center; cursor:pointer; }
  li.song-item:hover { background:#f1faff; }
  li.song-item.playing { background:var(--highlight); border-color:#93c5fd; font-weight:600; }
  .song-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:75%; }

  /* 底部悬浮播放栏 */
  .mini-player { position:fixed; bottom:16px; left:50%; transform:translateX(-50%); background:var(--card); border:1px solid #e6e6e6; border-radius:30px; box-shadow:0 4px 20px rgba(0,0,0,0.15); z-index:1000; padding-bottom:env(safe-area-inset-bottom); width:calc(100% - 32px); max-width:900px; }
  .mini-player-content { display:flex; align-items:center; padding:12px 20px; gap:16px; }
  .control-btn { width:40px; height:40px; border-radius:10px; border:none; background:transparent; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.2s; color:#666; }
  .control-btn:hover { background:#f0f0f0; color:var(--accent); }
  .control-btn.active { background:var(--accent); color:#fff; }

  .play-control-wrapper { position:relative; width:48px; height:48px; flex-shrink:0; }
  .play-pause-btn { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:40px; height:40px; border-radius:50%; border:none; background:var(--accent); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:2; transition:all 0.2s; }
  .play-pause-btn:hover { background:#1d4ed8; transform:translate(-50%, -50%) scale(1.05); }
  .play-pause-btn.playing { background:#ef4444; }
  .play-pause-btn.playing:hover { background:#dc2626; }
  .play-icon, .pause-icon { width:22px; height:22px; }

  .progress-ring { position:absolute; top:0; left:0; width:48px; height:48px; }
  .progress-svg { width:100%; height:100%; transform:rotate(-90deg); }
  .progress-bg { fill:none; stroke:#e5e7eb; stroke-width:2; }
  .progress-fill { fill:none; stroke:var(--accent); stroke-width:2.5; stroke-linecap:round; transition:stroke-dasharray 0.3s; stroke-dasharray: 0 100; }

  .song-info-scroll { flex:1; overflow:hidden; min-width:0; }
  .song-info-content { font-size:14px; font-weight:500; white-space:nowrap; animation:scroll-text 15s linear infinite; color:#111; }

  @keyframes scroll-text {
    0%, 20% { transform:translateX(0); }
    80%, 100% { transform:translateX(-100%); }
  }
  .song-info-scroll:hover .song-info-content { animation-play-state:paused; }

  /* 最近播放列表弹窗 */
  .recent-list-panel, .timer-panel { position:fixed; bottom:75px; right:16px; width:280px; max-height:400px; background:var(--card); border:1px solid #e6e6e6; border-radius:16px; box-shadow:0 4px 20px rgba(0,0,0,0.15); display:none; flex-direction:column; z-index:1001; }
  .recent-list-panel.show, .timer-panel.show { display:flex; animation:slideUp 0.3s ease-out; }
  @keyframes slideUp {
    from { opacity:0; transform:translateY(10px); }
    to { opacity:1; transform:translateY(0); }
  }
  .recent-list-header, .timer-header { display:flex; justify-content:space-between; align-items:center; padding:12px 16px; border-bottom:1px solid #e6e6e6; }
  .recent-list-header h3, .timer-header h3 { margin:0; font-size:16px; font-weight:600; }
  .close-btn { width:24px; height:24px; border:none; background:transparent; font-size:24px; cursor:pointer; color:#999; display:flex; align-items:center; justify-content:center; }
  .recent-list { list-style:none; padding:0; margin:0; overflow-y:auto; max-height:300px; }
  .recent-list-item { padding:8px 16px; cursor:pointer; border-bottom:1px solid #f0f0f0; display:flex; align-items:center; gap:8px; }
  .recent-list-item:hover { background:#f9fafb; }
  .recent-list-item.playing { background:var(--highlight); color:var(--accent); font-weight:600; }

  /* 定时设置弹窗 */
  .timer-content { padding:16px; }
  .timer-options { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:16px; }
  .timer-option-btn { padding:10px 16px; border:1px solid #e6e6e6; border-radius:8px; background:var(--card); cursor:pointer; transition:all 0.2s; font-size:14px; }
  .timer-option-btn:hover { background:#f0f0f0; border-color:var(--accent); }
  .timer-option-btn.active { background:var(--accent); color:#fff; border-color:var(--accent); }
  .timer-status { text-align:center; color:#666; font-size:14px; margin-bottom:12px; min-height:20px; }
  .timer-cancel-btn { width:100%; padding:10px; border:none; border-radius:8px; background:#ef4444; color:#fff; cursor:pointer; font-size:14px; transition:all 0.2s; }
  .timer-cancel-btn:hover { background:#dc2626; }

  @media (max-width:480px) {
    .song-info-scroll { max-width:150px; }
    .mini-player-content { padding:8px 12px; gap:8px; }
    .play-mode-btn, .recent-list-btn { width:36px; height:36px; font-size:18px; }
  }