*{box-sizing:border-box}html,body{margin:0;padding:0}body{font-family:Inter,Arial,sans-serif;background:#0a0f18;color:#eef2ff;line-height:1.65}
.container{width:min(1100px,calc(100% - 32px));margin:0 auto}.site-header{border-bottom:1px solid rgba(255,255,255,.08);background:rgba(7,10,17,.88)}
.site-header__inner{min-height:80px;display:flex;align-items:center}.brand__title{display:block;font-size:1.2rem;font-weight:800}.brand__subtitle{display:block;color:#b8c4dd}
.hero{padding:72px 0 26px;background:radial-gradient(circle at top right,rgba(59,130,246,.15),transparent 30%),radial-gradient(circle at top left,rgba(168,85,247,.15),transparent 30%)}
.eyebrow{display:inline-block;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.08);font-size:.82rem;margin-bottom:14px}
h1{font-size:clamp(2rem,5vw,3.4rem);line-height:1.04;margin:0 0 12px}h2{font-size:1.6rem;margin:0 0 14px}.lead,.now-playing,span,p,small{color:#c5cee2}
.section{padding:24px 0 40px}.tools-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.music-layout{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.player-card,.playlist-card,.tool-card{background:rgba(10,15,24,.86);border:1px solid rgba(255,255,255,.08);border-radius:22px;padding:24px}
.now-playing{margin-top:14px}.track-list{display:grid;gap:10px}
.track-item{width:100%;text-align:left;padding:14px 16px;border-radius:16px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);color:#fff;cursor:pointer}
.track-item strong{display:block;font-size:1rem}.track-item span,.track-item small{display:block;font-size:.92rem}
.track-item:hover,.track-item.is-active{background:rgba(139,92,246,.18);border-color:rgba(139,92,246,.35)}
.action-button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:#fff;cursor:pointer}
.action-button--primary{background:linear-gradient(135deg,#8b5cf6,#60a5fa);border:none}
.upload-form{display:grid;gap:12px}.field-label{display:block;margin-bottom:6px}.notice{padding:12px 14px;border-radius:14px;margin-bottom:14px}.notice--success{background:rgba(34,197,94,.15);border:1px solid rgba(34,197,94,.35)}.notice--error{background:rgba(239,68,68,.15);border:1px solid rgba(239,68,68,.35)}
.empty-state{padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.04);color:#c5cee2}
code{background:rgba(255,255,255,.08);padding:2px 6px;border-radius:8px}
@media(max-width:900px){.music-layout,.tools-grid{grid-template-columns:1fr}}