:root{--bg: #0a0a0a;--panel: #141414;--panel2: #1d1d21;--line: #2a2a30;--text: #f2f2f4;--muted: #9a9aa5;--green: #2ee59d;--purple: #8b5cf6;--bar-h: 92px;--tabs-h: 58px}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}html,body,#root{height:100%}body{background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;overflow:hidden}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}button:focus-visible,input:focus-visible{outline:2px solid var(--green);outline-offset:2px}.app{height:100dvh;display:grid;grid-template-columns:232px 1fr 330px;grid-template-rows:1fr var(--bar-h);grid-template-areas:"side main now" "bar bar bar"}.side{grid-area:side;background:#000;padding:22px 14px;display:flex;flex-direction:column;gap:22px;border-right:1px solid var(--line)}.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px;letter-spacing:-.01em;padding:0 8px}.brand em{font-style:normal;color:var(--purple)}.logo{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:#04140d;background:linear-gradient(135deg,var(--green),var(--purple))}.navitem{display:flex;align-items:center;gap:12px;width:100%;padding:11px 12px;border-radius:10px;color:var(--muted);text-align:left}.navitem.active{background:var(--panel2);color:var(--text)}.import{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 18px;border-radius:999px;background:var(--green);color:#04140d;font-weight:650;transition:transform .15s,filter .15s}.import:hover{filter:brightness(1.08)}.import:active{transform:scale(.97)}.import:disabled{opacity:.6;cursor:wait}.side-import{margin-top:auto}.main{grid-area:main;overflow-y:auto;padding:28px 32px 24px;background:linear-gradient(180deg,#17122a 0,var(--bg) 280px)}.main header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:22px;gap:12px}h1{font-size:34px;letter-spacing:-.02em}.main header p{color:var(--muted);margin-top:4px;font-size:14px}.top-import{display:none}.notice{background:var(--panel2);border:1px solid var(--line);border-left:3px solid var(--purple);padding:10px 14px;border-radius:10px;font-size:14px;margin-bottom:16px;line-height:1.4}.empty{text-align:center;max-width:380px;margin:9vh auto 0;display:flex;flex-direction:column;align-items:center;gap:14px}.empty p{color:var(--muted);line-height:1.5;font-size:15px}.empty-cover{width:120px;height:120px;border-radius:24px;font-size:48px}.list{list-style:none;display:flex;flex-direction:column;gap:2px}.row{display:flex;align-items:center;gap:14px;width:100%;padding:8px 12px;border-radius:10px;text-align:left;transition:background .15s}.row:hover,.row.current{background:var(--panel2)}.row.current strong{color:var(--green)}.rt{display:flex;flex-direction:column;min-width:0;flex:1}.rt strong{font-weight:550;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rt small{color:var(--muted);font-size:12px;margin-top:2px}.dur{color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums}.cover{display:grid;place-items:center;color:#ffffffd9;font-weight:700;flex-shrink:0}.cover.mini{width:46px;height:46px;border-radius:8px;font-size:18px}.cover.huge{width:min(100%,280px);aspect-ratio:1;border-radius:16px;font-size:96px;box-shadow:0 18px 50px #8b5cf647}.now{grid-area:now;padding:28px 24px;border-left:1px solid var(--line);display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;overflow-y:auto}.now h2{margin-top:18px;font-size:20px;line-height:1.25;overflow-wrap:anywhere}.now p{color:var(--muted);font-size:14px}.now .hint{margin-top:40%}.bar{grid-area:bar;background:#000;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr minmax(320px,560px) 1fr;align-items:center;gap:16px;padding:0 20px}.info{display:flex;align-items:center;gap:12px;text-align:left;min-width:0}.center{display:flex;flex-direction:column;gap:6px;align-items:center}.controls{display:flex;align-items:center;gap:14px}.controls.big{gap:22px;margin-top:8px}.ic{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:var(--muted);position:relative;transition:color .15s,transform .15s}.ic:hover{color:var(--text)}.ic:active{transform:scale(.9)}.ic.on{color:var(--green)}.rep b{position:absolute;font-size:9px;right:8px;bottom:7px}.play{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--text);color:#000;transition:transform .15s}.play:hover{transform:scale(1.06)}.play:active{transform:scale(.94)}.big .play{width:72px;height:72px;background:var(--green)}.progress{display:flex;align-items:center;gap:10px;width:100%;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}.progress span{width:38px}.progress span:first-child{text-align:right}.vol{display:flex;align-items:center;gap:10px;justify-content:flex-end;color:var(--muted)}.vol input{width:110px}.mobile-play{display:none}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;flex:1;height:4px;border-radius:4px;cursor:pointer;background:linear-gradient(90deg,var(--green) var(--p, 0%),#3a3a42 var(--p, 0%))}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:#fff}input[type=range]::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:#fff}.tabs,.sheet{display:none}@media (max-width: 1100px){.app{grid-template-columns:220px 1fr;grid-template-areas:"side main" "bar bar"}.now{display:none}}@media (max-width: 760px){:root{--bar-h: 64px}.app{display:block}.side{display:none}.main{height:100dvh;padding:22px 16px calc(var(--bar-h) + var(--tabs-h) + env(safe-area-inset-bottom) + 16px)}h1{font-size:28px}.top-import{display:inline-flex;padding:9px 14px}.top-import span{display:none}.bar{position:fixed;left:8px;right:8px;bottom:calc(var(--tabs-h) + env(safe-area-inset-bottom) + 6px);height:var(--bar-h);border:1px solid var(--line);border-radius:14px;background:var(--panel2);display:flex;padding:0 12px 0 8px;gap:8px}.bar .center,.bar .vol{display:none}.info{flex:1}.mobile-play{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--text);color:#000}.tabs{display:flex;position:fixed;left:0;right:0;bottom:0;padding-bottom:env(safe-area-inset-bottom);height:calc(var(--tabs-h) + env(safe-area-inset-bottom));background:#000;border-top:1px solid var(--line)}.tabs button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:11px;color:var(--muted)}.tabs button.active{color:var(--green)}.sheet{display:flex;flex-direction:column;align-items:center;gap:8px;position:fixed;top:0;right:0;bottom:0;left:0;z-index:10;padding:calc(env(safe-area-inset-top) + 16px) 24px calc(env(safe-area-inset-bottom) + 28px);background:linear-gradient(180deg,#2a1b57 0,var(--bg) 70%);text-align:center;animation:rise .28s ease-out;overflow-y:auto}.sheet .close{align-self:flex-start;color:var(--text);margin-bottom:8px}.sheet .cover.huge{width:min(100%,340px);margin-top:4px}.sheet h2{margin-top:18px;font-size:22px;overflow-wrap:anywhere}.sheet p{color:var(--muted)}.sheet .progress{margin-top:22px}.sheet .ic{width:48px;height:48px}}@keyframes rise{0%{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}img.cover{object-fit:cover}.main h3{margin:26px 0 10px;font-size:16px;color:var(--muted);font-weight:600}.muted{color:var(--muted);line-height:1.5;font-size:14px;max-width:520px;margin-top:14px}.searchbar{display:flex;align-items:center;gap:10px;margin:18px 0 8px;padding:6px 6px 6px 14px;background:var(--panel2);border:1px solid var(--line);border-radius:999px;color:var(--muted);max-width:640px}.searchbar input{flex:1;min-width:0;background:none;border:0;color:var(--text);font:inherit;outline:none;height:38px}.rowwrap{display:flex;align-items:center;gap:4px}.rowwrap .row{flex:1;min-width:0}.heart.on{color:#ef4b8c}.badge{font-size:11px;padding:3px 8px;border-radius:999px;white-space:nowrap;border:1px solid var(--line)}.badge.jamendo{color:var(--green);border-color:#2ee59d66}.badge.youtube{color:#c4b0ff;border-color:#8b5cf680}.now .badge{margin-top:6px}.lic{color:var(--muted);font-size:12px;margin-top:8px}.videobox{display:none;position:fixed;z-index:20;background:#000;border-radius:12px;overflow:hidden;box-shadow:0 10px 40px #0009}.videobox iframe{width:100%;height:100%;border:0}.yt-on .videobox{display:block;right:12px;top:12px;width:306px;height:200px}.yt-on .now{padding-top:232px}.vspace{height:200px}@media (max-width: 1100px){.yt-on .videobox{right:12px;top:auto;bottom:calc(var(--bar-h) + 12px)}}@media (max-width: 760px){.rowwrap .badge{display:none}.yt-on .videobox{left:8px;right:8px;width:auto;height:200px;bottom:calc(var(--tabs-h) + var(--bar-h) + env(safe-area-inset-bottom) + 14px)}.yt-on .main{padding-bottom:calc(var(--bar-h) + var(--tabs-h) + 230px)}.yt-on.expanded .videobox{bottom:auto;top:calc(env(safe-area-inset-top) + 72px)}.main{padding-top:22px}}