:root{--max-width: 720px;--accent: #6b5cff;--muted: #6b7280;--bg: #ffffff;--card: #f8f9fb;--text: #111827;--border: #e7eaf0;--panel: #ffffff;--progress-bg: #e6e9f3;--btn-bg: rgba(16, 24, 40, .04);--btn-border: rgba(16, 24, 40, .08);--btn-hover: rgba(99, 102, 241, .06);--btn-focus: rgba(95, 107, 214, .14);--time-color: rgba(17, 24, 39, .48);--seek-percent: 0%}.dark{--accent: #5f6bd6;--bg: #071422;--card: #0d1620;--panel: #0b1320;--text: #d7e6f5;--muted: #8793a0;--border: rgba(255, 255, 255, .04);--progress-bg: #0f2430;--btn-bg: rgba(255, 255, 255, .03);--btn-border: rgba(255, 255, 255, .08);--btn-hover: rgba(95, 107, 214, .07);--btn-focus: rgba(95, 107, 214, .14);--time-color: rgba(215, 230, 245, .62)}@media (prefers-color-scheme: dark){:root{--accent: #5f6bd6;--bg: #071422;--card: #0d1620;--panel: #0b1320;--text: #d7e6f5;--muted: #8793a0;--border: rgba(255, 255, 255, .04);--progress-bg: #0f2430;--btn-bg: rgba(255, 255, 255, .03);--btn-border: rgba(255, 255, 255, .08);--btn-hover: rgba(95, 107, 214, .07);--btn-focus: rgba(95, 107, 214, .14);--time-color: rgba(215, 230, 245, .62)}}*{box-sizing:border-box}body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial;color:var(--text);background:var(--bg);margin:0;padding:0}.app{max-width:var(--max-width);margin:0 auto 32px;padding:0 20px 20px}.header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.title{font-size:1.2rem;font-weight:700}.list{display:grid;grid-template-columns:1fr;gap:12px;padding:0;list-style:none}.song-item{background:var(--card);padding:12px;border-radius:10px;border:1px solid var(--border);cursor:pointer;transition:transform .12s ease,box-shadow .12s ease}.song-meta{color:var(--muted);font-size:.9rem}.player{background:var(--card);padding:16px;border-radius:12px;border:1px solid var(--border)}.controls{display:flex;align-items:center;gap:12px;margin-bottom:12px}.btn{background:var(--btn-bg);border:1px solid var(--btn-border);color:var(--text);padding:8px 10px;border-radius:8px;cursor:pointer;min-width:44px;height:40px;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;transition:background .12s ease,transform .08s ease,box-shadow .12s ease}.btn-icon{display:inline-flex;align-items:center;justify-content:center;line-height:1;font-size:18px;height:1em;width:1em;vertical-align:middle}.icon-pause{letter-spacing:-.12em}.icon-play{transform:translateY(.1em) translate(.1em)}.btn.small-text{font-size:13px;line-height:1}.btn:active{transform:translateY(0)}.btn:focus{outline:3px solid var(--btn-focus);outline-offset:2px}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:6px;background:transparent;border-radius:999px;outline:none}input[type=range]::-webkit-slider-runnable-track{height:6px;background:linear-gradient(90deg,var(--accent) 0%,var(--accent) var(--seek-percent),var(--progress-bg) var(--seek-percent),var(--progress-bg) 100%);border-radius:999px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent);box-shadow:0 4px 10px #0f172a4d;margin-top:-4px}input[type=range]::-moz-range-track{height:6px;background:transparent;border-radius:999px}input[type=range]::-moz-range-progress{background:var(--accent);height:6px;border-radius:999px}input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--accent);box-shadow:0 4px 10px #0f172a4d;border:none}.player audio{width:100%;display:block;margin-bottom:8px}.time{font-size:.72rem;color:var(--time-color)}.lyrics{white-space:pre-wrap;background:var(--panel);padding:12px;border-radius:8px;border:1px solid var(--border);margin-top:12px}.lyric-note{color:var(--muted);font-size:.95em;opacity:.9;margin:0 .15em}.back-btn{background:var(--panel);border:1px solid var(--border);padding:8px;border-radius:10px;color:var(--text);cursor:pointer;font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:8px;min-height:40px;box-shadow:0 1px #10182808;transition:transform .08s ease,box-shadow .12s ease}.back-btn:active{transform:translateY(0)}.back-btn:focus{outline:3px solid rgba(107,92,255,.16);outline-offset:2px}.empty{color:var(--muted);text-align:center;padding:24px}.footer{margin-top:18px;font-size:.85rem;color:var(--muted);text-align:center}@media (max-width: 480px){.app{padding:12px}.back-btn{padding:10px 14px;min-height:48px;border-radius:12px}}