:root{
    --bg:#f6f4f1;
    --card:#ffffff;
    --text:#191715;
    --muted:#8d8780;
    --line:#eae6e1;
    --track:#e0dbd5;
    --accent:#b04a2f;
    --shadow:0 1px 2px rgba(40,26,12,.04), 0 10px 30px -12px rgba(40,26,12,.16);
    --radius:20px;
    --font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui,
            "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  }
  html[data-theme="dark"]{
    --bg:#131211;
    --card:#1c1a18;
    --text:#f1ede8;
    --muted:#8f8880;
    --line:#2a2724;
    --track:#393430;
    --accent:#e0795a;
    --shadow:0 1px 2px rgba(0,0,0,.35), 0 10px 30px -12px rgba(0,0,0,.6);
  }

  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  html{-webkit-text-size-adjust:100%}
  body{
    min-height:100dvh;
    background:var(--bg);
    color:var(--text);
    font:15px/1.6 var(--font);
    display:flex;
    justify-content:center;
    -webkit-font-smoothing:antialiased;
    -webkit-tap-highlight-color:transparent;
    transition:background .3s ease, color .3s ease;
  }

  .wrap{
    width:100%;
    max-width:600px;
    padding:44px 22px 60px;
    padding-top:calc(44px + env(safe-area-inset-top));
    padding-bottom:calc(60px + env(safe-area-inset-bottom));
  }

  /* ---------- header ---------- */
  header{position:relative;margin-bottom:26px;padding-right:52px}
  h1{
    margin:0 0 6px;
    font-size:26px;
    line-height:1.3;
    font-weight:650;
    letter-spacing:.01em;
  }
  .tagline{
    margin:0;
    font-size:13.5px;
    color:var(--muted);
    letter-spacing:.01em;
  }
  .theme-btn{
    position:absolute;
    top:0;right:0;
    width:36px;height:36px;
    display:grid;place-items:center;
    border-radius:50%;
    border:1px solid var(--line);
    background:var(--card);
    color:var(--muted);
    cursor:pointer;
    transition:color .2s, border-color .2s, transform .15s;
  }
  .theme-btn:hover{color:var(--text);border-color:var(--muted)}
  .theme-btn:active{transform:scale(.93)}
  .theme-btn svg{width:17px;height:17px}
  .i-moon{display:none}
  html[data-theme="dark"] .i-sun{display:none}
  html[data-theme="dark"] .i-moon{display:block}

  /* ---------- player ---------- */
  .player{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:24px 22px 20px;
    text-align:center;
    transition:background .3s, border-color .3s;
  }

  .cover{
    --c1:hsl(28 58% 76%);
    --c2:hsl(68 48% 44%);
    width:170px;
    height:170px;
    margin:0 auto 20px;
    border-radius:18px;
    position:relative;
    overflow:hidden;
    background:linear-gradient(145deg, var(--c1), var(--c2));
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.14), 0 14px 26px -18px rgba(0,0,0,.65);
    transition:background .5s ease;
  }
  .cover::before{
    content:"";
    position:absolute;inset:0;
    background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.10) 0 42%, transparent 43%),
               radial-gradient(circle at 50% 50%, rgba(0,0,0,.16) 0 6%, transparent 6.5%);
  }
  .cover::after{
    content:"";
    position:absolute;inset:-45%;
    background:conic-gradient(from 0deg,
      transparent 0 46%,
      rgba(255,255,255,.05) 58%,
      rgba(255,255,255,.13) 70%,
      rgba(255,255,255,.26) 80%,
      rgba(255,255,255,.13) 89%,
      rgba(255,255,255,.04) 96%,
      transparent 100%);
    opacity:0;
    transition:opacity .45s ease;
    animation:spin 6.5s linear infinite;
    animation-play-state:paused;
  }
  body.is-playing .cover::after{opacity:1;animation-play-state:running}
  @keyframes spin{to{transform:rotate(360deg)}}

  .now-title{
    margin:0 0 3px;
    font-size:16.5px;
    font-weight:600;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .now-artist{
    margin:0 0 18px;
    font-size:12.5px;
    color:var(--muted);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }

  /* ---------- range ---------- */
  .range{
    -webkit-appearance:none;appearance:none;
    display:block;width:100%;height:22px;margin:0;
    background:transparent;cursor:pointer;
    touch-action:none;
  }
  .range::-webkit-slider-runnable-track{
    height:4px;border-radius:2px;
    background:linear-gradient(to right, var(--accent) var(--p,0%), var(--track) var(--p,0%));
  }
  .range::-webkit-slider-thumb{
    -webkit-appearance:none;
    width:13px;height:13px;margin-top:-4.5px;
    border-radius:50%;background:var(--accent);
    box-shadow:0 1px 4px rgba(0,0,0,.22);
    transition:transform .12s;
  }
  .range:active::-webkit-slider-thumb{transform:scale(1.25)}
  .range::-moz-range-track{height:4px;border-radius:2px;background:var(--track)}
  .range::-moz-range-progress{height:4px;border-radius:2px;background:var(--accent)}
  .range::-moz-range-thumb{
    width:13px;height:13px;border:none;border-radius:50%;
    background:var(--accent);box-shadow:0 1px 4px rgba(0,0,0,.22);
  }

  .seek-row{
    display:flex;align-items:center;gap:10px;
    margin:0 0 8px;
  }
  .time{
    font-size:11px;
    color:var(--muted);
    font-variant-numeric:tabular-nums;
    letter-spacing:.02em;
    flex:none;
    width:34px;
  }
  .time.r{text-align:right}
  .seek-row .range{flex:1}

  /* ---------- controls ---------- */
  .controls{
    display:flex;align-items:center;justify-content:center;
    gap:20px;
    margin:2px 0 0;
  }
  .btn{
    display:grid;place-items:center;
    border:none;background:transparent;
    color:var(--text);
    width:44px;height:44px;
    border-radius:50%;
    cursor:pointer;
    transition:color .18s, background .18s, transform .12s;
  }
  .btn:hover{color:var(--accent)}
  .btn:active{transform:scale(.92)}
  .btn svg{width:21px;height:21px;display:block}
  .btn-play{
    width:58px;height:58px;
    background:var(--accent);
    color:#fff;
    box-shadow:0 10px 22px -12px var(--accent);
  }
  .btn-play:hover{color:#fff;filter:brightness(1.05)}
  .btn-play svg{width:23px;height:23px}
  .btn-play .ico-pause{display:none}
  body.is-playing .btn-play .ico-play{display:none}
  body.is-playing .btn-play .ico-pause{display:block}

  .volume-row{
    display:none;
    align-items:center;justify-content:center;
    gap:9px;
    margin-top:12px;
    color:var(--muted);
  }
  .volume-row svg{width:15px;height:15px;flex:none}
  .volume-row .range{width:92px;height:18px}
  .volume-row .range::-webkit-slider-runnable-track{height:3px}
  .volume-row .range::-webkit-slider-thumb{width:10px;height:10px;margin-top:-3.5px}
  @media (hover:hover) and (pointer:fine){
    .volume-row{display:flex}
  }

  /* ---------- list ---------- */
  .list-head{
    display:flex;align-items:center;justify-content:space-between;
    gap:12px;
    margin:32px 2px 10px;
  }
  .list-title{
    font-size:12px;
    letter-spacing:.1em;
    color:var(--muted);
    text-transform:uppercase;
  }
  .list-title em{
    font-style:normal;
    color:var(--text);
    font-variant-numeric:tabular-nums;
  }
  .list-actions{display:flex;align-items:center;gap:7px}
  .list-toggle{
    display:inline-flex;align-items:center;gap:5px;
    padding:5px 9px;
    border-radius:999px;
    border:1px solid var(--line);
    background:var(--card);
    color:var(--muted);
    font:inherit;font-size:11.5px;
    cursor:pointer;
    transition:color .18s,border-color .18s;
  }
  .list-toggle:hover{color:var(--text);border-color:var(--muted)}
  .list-toggle svg{
    width:12px;height:12px;
    transition:transform .22s ease;
  }
  .list-toggle[aria-expanded="false"] svg{transform:rotate(-90deg)}
  .mode-btn{
    display:inline-flex;align-items:center;gap:6px;
    padding:5px 10px 5px 8px;
    border-radius:999px;
    border:1px solid var(--line);
    background:var(--card);
    color:var(--muted);
    font:inherit;font-size:11.5px;
    cursor:pointer;
    transition:color .18s,border-color .18s;
  }
  .mode-btn:hover{color:var(--text);border-color:var(--muted)}
  .mode-btn svg{width:13px;height:13px;display:none}
  .mode-btn[data-mode="all"] .m-all,
  .mode-btn[data-mode="one"] .m-one,
  .mode-btn[data-mode="shuffle"] .m-shuffle{display:block}

  ol.tracks{
    list-style:none;margin:0;padding:0;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:16px;
    max-height:min(58vh,460px);
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-width:thin;
    scrollbar-color:var(--track) transparent;
    box-shadow:var(--shadow);
    transition:max-height .28s ease,opacity .2s ease,transform .28s ease,background .3s,border-color .3s,box-shadow .3s;
  }
  ol.tracks.collapsed{
    max-height:0;
    opacity:0;
    transform:translateY(-4px);
    border-color:transparent;
    box-shadow:none;
    overflow:hidden;
  }
  .tracks li{
    display:flex;align-items:center;gap:12px;
    padding:13px 16px;
    min-height:56px;
    cursor:pointer;
    border-top:1px solid var(--line);
    transition:background .15s;
  }
  .tracks li:first-child{border-top:none}
  .tracks li:hover{background:rgba(0,0,0,.022)}
  html[data-theme="dark"] .tracks li:hover{background:rgba(255,255,255,.035)}
  .tracks li:active{background:rgba(0,0,0,.045)}

  .t-idx{
    flex:none;width:20px;
    display:grid;place-items:center;
    font-size:11.5px;
    color:var(--muted);
    font-variant-numeric:tabular-nums;
  }
  .bars{display:none;align-items:flex-end;gap:2px;height:12px}
  .bars i{
    display:block;width:2px;border-radius:1px;
    background:var(--accent);
    animation:eq .95s ease-in-out infinite;
  }
  .bars i:nth-child(1){height:40%;animation-delay:-.1s}
  .bars i:nth-child(2){height:100%;animation-delay:-.45s}
  .bars i:nth-child(3){height:65%;animation-delay:-.75s}
  .tracks li.playing .num{display:none}
  .tracks li.playing .bars{display:flex}
  body:not(.is-playing) .tracks li.playing .bars i{animation-play-state:paused}
  @keyframes eq{
    0%,100%{transform:scaleY(.35)}
    50%{transform:scaleY(1)}
  }

  .t-name{flex:1;min-width:0}
  .t-name .n{
    display:block;font-size:14px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    transition:color .18s;
  }
  .t-name .a{
    display:block;font-size:11.5px;color:var(--muted);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    margin-top:1px;
  }
  .tracks li.playing .n{color:var(--accent);font-weight:600}
  .tracks li.missing .a::after{content:" · 文件缺失";color:var(--accent)}
  .t-dur{
    flex:none;
    font-size:11.5px;
    color:var(--muted);
    font-variant-numeric:tabular-nums;
  }

  /* ---------- footer ---------- */
  footer{
    margin-top:30px;
    text-align:center;
    font-size:11.5px;
    color:var(--muted);
    letter-spacing:.02em;
  }

  /* ---------- toast ---------- */
  .toast{
    position:fixed;
    left:50%;bottom:calc(28px + env(safe-area-inset-bottom));
    transform:translate(-50%, 10px);
    max-width:min(88vw, 420px);
    padding:10px 16px;
    border-radius:12px;
    background:rgba(24,22,20,.92);
    color:#fff;
    font-size:12.5px;
    line-height:1.5;
    opacity:0;
    pointer-events:none;
    transition:opacity .25s ease, transform .25s ease;
    z-index:99;
    backdrop-filter:blur(8px);
  }
  .toast.show{opacity:1;transform:translate(-50%,0)}

  /* ---------- mobile ---------- */
  @media (max-width:520px){
    .wrap{padding:34px 18px 48px;
          padding-top:calc(34px + env(safe-area-inset-top));
          padding-bottom:calc(48px + env(safe-area-inset-bottom));}
    h1{font-size:23px}
    .player{padding:22px 18px 16px;border-radius:18px}
    .cover{width:150px;height:150px;margin-bottom:18px}
    .now-title{font-size:15.5px}
    .controls{gap:26px}
    .btn{width:46px;height:46px}
    .btn-play{width:60px;height:60px}
    .tracks li{padding:12px 14px}
    .list-head{margin-top:26px}
    ol.tracks{max-height:min(54dvh,430px)}
  }
  @media (prefers-reduced-motion: reduce){
    *{animation-duration:.001ms !important;transition-duration:.001ms !important}
  }

  /* ---------- library integration ---------- */
  .header-actions{
    position:absolute;top:0;right:0;
    display:flex;align-items:center;gap:7px;
  }
  .header-actions .theme-btn{position:static}
  .text-btn{
    display:inline-flex;align-items:center;justify-content:center;
    height:36px;padding:0 13px;
    border-radius:999px;
    border:1px solid var(--line);
    background:var(--card);
    color:var(--muted);
    font:inherit;font-size:11.5px;
    text-decoration:none;
    cursor:pointer;
    transition:color .18s,border-color .18s,transform .15s;
  }
  .text-btn:hover{color:var(--text);border-color:var(--muted)}
  .text-btn:active{transform:scale(.95)}

  .state-panel,.login-panel{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
  }
  .state-panel{
    padding:34px 24px;
    text-align:center;
    color:var(--muted);
    font-size:13px;
  }
  .login-panel{
    padding:38px 30px 30px;
    text-align:center;
  }
  .eyebrow{
    margin:0 0 9px;
    color:var(--accent);
    font-size:10.5px;
    font-weight:600;
    letter-spacing:.17em;
  }
  .login-panel h2{
    margin:0 0 8px;
    font-size:23px;
    line-height:1.3;
    font-weight:650;
  }
  .login-copy{
    margin:0 0 25px;
    color:var(--muted);
    font-size:13px;
  }
  .login-panel form{
    display:flex;flex-direction:column;gap:10px;
  }
  .text-input{
    width:100%;height:48px;
    padding:0 16px;
    border:1px solid var(--line);
    border-radius:13px;
    outline:none;
    background:var(--bg);
    color:var(--text);
    font:inherit;font-size:14px;
    transition:border-color .18s,box-shadow .18s;
  }
  .text-input::placeholder{color:var(--muted)}
  .text-input:focus{
    border-color:var(--accent);
    box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 13%,transparent);
  }
  .primary-btn{
    width:100%;height:48px;
    border:none;border-radius:13px;
    background:var(--accent);
    color:#fff;
    font:inherit;font-size:14px;font-weight:600;
    cursor:pointer;
    transition:filter .18s,transform .15s;
  }
  .primary-btn:hover{filter:brightness(1.05)}
  .primary-btn:active{transform:scale(.985)}
  .primary-btn:disabled{opacity:.55;cursor:wait}
  .form-error,.library-error{
    min-height:20px;
    margin:13px 0 0;
    color:var(--accent);
    font-size:12px;
    line-height:1.6;
  }
  .library-error{text-align:center}
  .sr-only{
    position:absolute;width:1px;height:1px;
    padding:0;margin:-1px;overflow:hidden;
    clip:rect(0,0,0,0);white-space:nowrap;border:0;
  }

  .cover-button{
    display:block;
    width:170px;height:170px;
    margin:0 auto 20px;
    padding:0;
    border:none;border-radius:18px;
    background:transparent;
    color:#fff;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .cover-button:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:4px;
  }
  .cover-button .cover{
    width:100%;height:100%;margin:0;
    display:block;
  }
  .cover img{
    position:absolute;inset:0;z-index:2;
    display:block;
    width:100%;height:100%;
    object-fit:cover;
  }
  .cover img[hidden]{display:none}
  .cover-hint{
    position:absolute;right:11px;bottom:11px;z-index:3;
    display:grid;place-items:center;
    width:29px;height:29px;
    border-radius:50%;
    background:rgba(17,15,13,.48);
    color:#fff;
    font-size:11.5px;
    backdrop-filter:blur(8px);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
  }
  .now-album{
    min-height:18px;
    margin:0 0 17px;
    color:var(--muted);
    font-size:11px;
    letter-spacing:.02em;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .now-artist{margin-bottom:2px}

  .lyrics-trigger{
    display:inline-flex;align-items:center;gap:6px;
    margin-top:13px;padding:7px 13px;
    border:1px solid var(--line);
    border-radius:999px;
    background:transparent;
    color:var(--muted);
    font:inherit;font-size:11.5px;
    cursor:pointer;
    transition:color .18s,border-color .18s,background .18s;
  }
  .lyrics-trigger:hover{
    color:var(--accent);
    border-color:var(--accent);
    background:color-mix(in srgb,var(--accent) 6%,transparent);
  }
  .lyrics-trigger svg{width:14px;height:14px}

  .lyrics-panel{
    position:fixed;inset:0;z-index:80;
    display:flex;align-items:flex-end;justify-content:center;
    padding:28px 18px;
    background:rgba(22,18,15,.28);
    opacity:0;visibility:hidden;
    transition:opacity .25s ease,visibility .25s;
    backdrop-filter:blur(7px);
  }
  .lyrics-panel.open{opacity:1;visibility:visible}
  .lyrics-sheet{
    display:flex;flex-direction:column;
    width:min(100%,620px);height:min(72dvh,720px);
    padding:25px 25px 14px;
    border:1px solid var(--line);
    border-radius:24px;
    background:color-mix(in srgb,var(--card) 94%,transparent);
    color:var(--text);
    box-shadow:0 30px 80px -22px rgba(24,18,12,.48);
    transform:translateY(18px) scale(.985);
    transition:transform .28s cubic-bezier(.2,.8,.2,1);
  }
  .lyrics-panel.open .lyrics-sheet{transform:none}
  .lyrics-head{
    display:flex;align-items:flex-start;justify-content:space-between;
    gap:20px;padding:0 2px 17px;
    border-bottom:1px solid var(--line);
  }
  .lyrics-head .eyebrow{margin-bottom:5px}
  .lyrics-head h2{
    margin:0 0 3px;
    font-size:20px;font-weight:650;
    line-height:1.35;
  }
  .lyrics-album{
    min-height:17px;margin:0;
    color:var(--muted);font-size:11.5px;
  }
  .lyrics-close{
    flex:none;padding:6px 12px;
    border:1px solid var(--line);border-radius:999px;
    background:var(--bg);color:var(--muted);
    font:inherit;font-size:11.5px;
    cursor:pointer;
  }
  .lyrics-close:hover{color:var(--text)}
  .lyrics-scroll{
    flex:1;min-height:0;overflow-y:auto;
    padding:18px 23px 36px 4px;
    scrollbar-width:thin;
    scrollbar-color:var(--track) transparent;
    overscroll-behavior:contain;
  }
  .lyrics-list{
    display:flex;flex-direction:column;
    gap:13px;
    padding-top:8px;
  }
  .lyric-line{
    margin:0;
    color:var(--muted);
    font-size:15px;
    line-height:1.6;
    text-align:left;
    cursor:pointer;
    transition:color .2s,transform .2s;
  }
  .lyric-line:hover{color:var(--text)}
  .lyric-line.active{
    color:var(--accent);
    font-size:17px;
    font-weight:600;
    transform:translateX(5px);
  }
  .lyric-line.plain{cursor:default}
  .lyrics-message{
    margin:24px 0;
    color:var(--muted);
    font-size:13.5px;
    line-height:1.8;
    text-align:center;
  }
  body.lyrics-open{overflow:hidden}

  @media (max-width:520px){
    header{padding-right:0;padding-top:48px}
    .cover-button{width:150px;height:150px;margin-bottom:18px}
    .lyrics-panel{padding:0}
    .lyrics-sheet{
      width:100%;height:90dvh;
      padding:22px 18px 12px;
      border-radius:22px 22px 0 0;
      padding-bottom:calc(12px + env(safe-area-inset-bottom));
    }
    .lyrics-scroll{padding-right:12px}
    .lyric-line{font-size:14.5px}
    .lyric-line.active{font-size:16.5px}
  }