:root{--bg:#0d132b;--bg2:#151d3f;--text:#eef2ff;--muted:#b2bcdf;--line:rgba(255,255,255,.14);--p:#6d5efc;--p2:#8e83ff;--ok:#2dcf88;--warn:#ffcc7a}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;color:var(--text);background:radial-gradient(1000px 500px at 10% -10%,#2c3574 0%,transparent 50%),radial-gradient(900px 500px at 100% 0,#442a74 0%,transparent 50%),linear-gradient(180deg,var(--bg),var(--bg2));}
.site{max-width:1220px;margin:0 auto;padding:0 20px}
.top{position:sticky;top:0;z-index:100;background:rgba(13,19,43,.78);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top-in{min-height:72px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 0}
.brand{font-weight:800;font-size:23px;text-decoration:none;color:var(--text)}
.nav{display:flex;gap:8px;flex-wrap:wrap}
.btn{border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--text);padding:10px 14px;border-radius:12px;text-decoration:none;font-weight:600;display:inline-flex;justify-content:center;align-items:center;cursor:pointer}
.btn:disabled{opacity:.6;cursor:not-allowed}
.btn.primary{background:linear-gradient(135deg,var(--p),var(--p2));border-color:transparent}
.hero{padding:34px 0 16px;display:grid;grid-template-columns:1.1fr .9fr;gap:16px}
.hero h1{font-size:clamp(30px,4vw,44px);line-height:1.1;margin:0 0 10px}
.muted{color:var(--muted)}
.card,.panel{border:1px solid var(--line);border-radius:16px;padding:16px;background:rgba(255,255,255,.03)}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.title{font-size:22px;font-weight:700;margin:0 0 8px}
.input,.select,.textarea{width:100%;border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--text);padding:12px;border-radius:12px;outline:none}
.textarea{min-height:90px;resize:vertical}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:12px;margin-top:12px}
.track{border:1px solid var(--line);border-radius:14px;padding:14px;background:rgba(255,255,255,.03);display:flex;flex-direction:column;gap:8px;height:100%}
.track-head{min-height:68px}
.track h4{margin:0 0 5px;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.4em}
.artist,.small{color:var(--muted)}
.artist{line-height:1.3;min-height:1.3em}
.row{display:flex;justify-content:space-between;margin:6px 0 8px;color:var(--muted);align-items:baseline;gap:10px}
.list-box{display:grid;gap:8px;margin-top:10px}
.item{border:1px solid var(--line);border-radius:10px;padding:10px}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.tab{padding:8px 12px;border:1px solid var(--line);border-radius:999px;color:var(--muted);cursor:pointer}
.tab.active{color:var(--text);background:rgba(255,255,255,.08)}
.version-picker{margin:0;padding:10px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.03);min-height:76px}
.version-label{display:block;margin-bottom:6px;color:var(--muted);font-size:12px;font-weight:700;letter-spacing:.01em}
.version-row{display:block}
.version-select{padding:10px 36px 10px 12px;border-radius:10px;font-size:14px;font-weight:600;background-color:rgba(255,255,255,.06)}
.version-select:focus{border-color:rgba(142,131,255,.9);box-shadow:0 0 0 2px rgba(142,131,255,.25)}
.version-current{margin:0;font-weight:600;min-height:20px}
.track-player{margin-top:2px}
.buy-btn{margin-top:auto;align-self:flex-start}
.actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.empty{border:1px dashed var(--line);padding:18px;border-radius:12px;color:var(--muted);text-align:center}
.foot{padding:26px 0 36px;text-align:center;color:var(--muted)}
.ok{color:var(--ok)}
.warn{color:var(--warn)}
@media(max-width:940px){.hero,.grid,.actions{grid-template-columns:1fr}}