:root{--bg: #f5f6f8;--card: #ffffff;--fg: #15181d;--muted: #6a7280;--line: #dfe3e9;--accent: #d6291f;--accent-fg: #ffffff;--focus: #1c62b9}@media (prefers-color-scheme: dark){:root{--bg: #111317;--card: #1a1d23;--fg: #eceef2;--muted: #8e97a6;--line: #2b303a;--accent: #ff5148;--accent-fg: #111317;--focus: #3ea6ff;color-scheme:dark}}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.5 system-ui,sans-serif}main{max-width:860px;margin:0 auto;padding:24px 16px 48px;display:grid;gap:16px}h1{font-size:1.4rem;margin:0}h2{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px}.row{display:flex;gap:8px;flex-wrap:wrap}input[type=text]{flex:1 1 260px;min-width:0;padding:10px 12px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--fg);font:inherit}button{padding:10px 14px;border-radius:8px;border:1px solid var(--line);background:var(--card);color:var(--fg);font:inherit;cursor:pointer}button.primary{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.stage{position:fixed;left:-9999px;top:0;width:200px;height:200px;pointer-events:none}.controls{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center;margin-top:12px}.seek{width:100%}input[type=range]{accent-color:var(--accent)}label{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:.9rem}.time{font-variant-numeric:tabular-nums;color:var(--muted);font-size:.9rem}.err{color:var(--accent);margin:0}ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}button:disabled{opacity:.6;cursor:default}.tracks li button{display:flex;gap:12px;align-items:center;width:100%;text-align:left;padding:8px}.tracks img,.now img{width:96px;aspect-ratio:16 / 9;object-fit:cover;border-radius:6px;flex:none}.meta{display:grid;min-width:0}.title{font-weight:600;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.channel{color:var(--muted);font-size:.85rem}.label{color:var(--accent);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase}.now{display:flex;gap:14px;align-items:center}.now img{width:128px}.searchbar{display:flex}.search{position:relative;flex:1;min-width:0}.search-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--fg);pointer-events:none}.search input[type=text]{width:100%;height:42px;padding:0 16px 0 46px;border-radius:999px 0 0 999px}.search input[type=text]:focus-visible{outline:none;border-color:var(--focus)}.searchbtn{flex:none;width:64px;height:42px;padding:0;display:grid;place-items:center;border-radius:0 999px 999px 0;border-left:0;background:var(--card)}.searchbtn .spinner{margin:0}.suggest{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:20;gap:0;padding:8px 0;max-height:380px;overflow-y:auto;background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:0 8px 28px #0000004d}.suggest li{display:flex;align-items:center}.suggest li.active,.suggest li:hover{background:var(--bg)}.suggest .pick{flex:1;display:flex;align-items:center;gap:16px;min-width:0;padding:8px 8px 8px 16px;border:0;border-radius:0;background:transparent;text-align:left;font-weight:500}.suggest .pick>span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.suggest .pick svg{flex:none}.suggest-thumb{flex:none;width:66px;height:38px;object-fit:cover;border-radius:6px}.suggest .remove{flex:none;align-self:stretch;padding:0 14px;border:0;border-radius:0;background:transparent;color:var(--muted);font-size:1.3rem;line-height:1}.suggest .remove:hover{color:var(--accent)}.spinner{display:inline-block;width:.9em;height:.9em;margin-right:6px;vertical-align:-1px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion: reduce){.spinner{animation-duration:3s}}