:root{color-scheme:dark;--bg: #0b0b10;--bg-2: #111321;--bg-3: #1b1f38;--ink: #eef1ff;--ink-muted: #9aa4c7;--accent: #23d5ab;--accent-2: #3a7bd5;--accent-3: #f5af19;--danger: #ff5468;--card: rgba(16, 20, 35, .78);--stroke: rgba(255, 255, 255, .08);--glow: 0 20px 60px rgba(35, 213, 171, .18);--radius: 18px;font-family:Space Grotesk,Trebuchet MS,system-ui,sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{min-height:100vh;background:var(--bg);color:var(--ink);overflow-x:hidden}.bg-gradient{position:fixed;inset:0;background:radial-gradient(circle at top left,rgba(58,123,213,.3),transparent 55%),radial-gradient(circle at 20% 70%,rgba(35,213,171,.25),transparent 50%),linear-gradient(135deg,#07070b,#0f1320 35%,#121735);z-index:-1}.site-header{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px;padding:28px clamp(18px,4vw,48px)}.brand{display:flex;align-items:center;gap:16px}.brand-mark{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(140deg,var(--accent),var(--accent-2));font-weight:700;letter-spacing:1px;color:#091018;box-shadow:var(--glow)}.brand-title{font-size:clamp(1.4rem,2vw,1.8rem);font-weight:600}.brand-subtitle{color:var(--ink-muted);font-size:.95rem}.genre-nav{display:flex;flex-wrap:wrap;gap:12px}.header-nav{display:flex;align-items:center;gap:12px}.nav-button{display:flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;border:1px solid var(--stroke);background:#0f1423e6;color:var(--ink);cursor:pointer;font-weight:600;font-size:.95rem;text-decoration:none;transition:transform .2s ease,border-color .2s ease}.nav-button:hover,.nav-button:focus-visible{transform:translateY(-2px);border-color:#23d5ab99;outline:none}.nav-button svg{flex-shrink:0}.auth-bar{display:flex;align-items:center;gap:12px;color:var(--ink-muted);font-size:.95rem}.auth-bar button{padding:8px 14px;border-radius:999px;border:1px solid var(--stroke);background:#0f1423e6;color:var(--ink);cursor:pointer;font-weight:600}.auth-bar button:hover,.auth-bar button:focus-visible{border-color:#3a7bd599;outline:none}.genre-button{position:relative;padding:10px 16px;border-radius:999px;background:var(--card);border:1px solid var(--stroke);color:var(--ink);cursor:pointer;font-weight:600;transition:transform .2s ease,border-color .2s ease,background .2s ease}.genre-button:hover,.genre-button:focus-visible{transform:translateY(-2px);border-color:#23d5ab99;outline:none}.dropdown{position:absolute;top:calc(100% + 12px);left:0;min-width:220px;background:#080a14f2;border:1px solid var(--stroke);border-radius:16px;box-shadow:0 24px 60px #0006;padding:12px;display:none;z-index:10}.genre-button[aria-expanded=true] .dropdown{display:block;animation:fadeIn .2s ease}.dropdown button{width:100%;background:transparent;border:none;color:var(--ink);text-align:left;padding:10px 12px;border-radius:12px;cursor:pointer;font-size:.95rem;transition:background .2s ease}.dropdown button:hover,.dropdown button:focus-visible{background:#3a7bd52e;outline:none}.layout{display:flex;justify-content:center;gap:24px;padding:0 clamp(18px,4vw,48px) 48px;max-width:1400px;margin:0 auto}.album-detail{background:var(--card);border:1px solid var(--stroke);border-radius:var(--radius);padding:24px;flex:1;max-width:900px}.ad-sidebar{width:300px;flex-shrink:0}.ad-container{background:var(--card);border:1px solid var(--stroke);border-radius:var(--radius);padding:20px;position:sticky;top:24px;max-height:calc(100vh - 48px);overflow-y:auto}.ad-label{text-transform:uppercase;letter-spacing:2px;font-size:.75rem;color:var(--accent-3);margin-bottom:16px;font-weight:700}.ad-content{display:flex;flex-direction:column;gap:16px}.ad-title{font-size:1.3rem;font-weight:700;color:var(--ink);margin-bottom:12px;line-height:1.3}.ad-description{color:var(--ink-muted);font-size:.95rem;line-height:1.6;margin-bottom:16px}.ad-image{width:100%;aspect-ratio:16/9;border-radius:12px;background:var(--bg-2);display:flex;align-items:center;justify-content:center;font-size:3rem;margin-bottom:16px;border:1px solid var(--stroke)}.ad-cta{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border-radius:999px;background:linear-gradient(140deg,var(--accent),var(--accent-2));color:#091018;font-weight:700;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease;box-shadow:var(--glow);justify-content:center}.ad-cta:hover,.ad-cta:focus-visible{transform:translateY(-2px);box-shadow:0 25px 70px #23d5ab40;outline:none}.ad-category{display:inline-block;padding:4px 10px;border-radius:999px;background:#3a7bd533;color:var(--accent-2);font-size:.8rem;font-weight:600;margin-bottom:12px}.album-detail .genre-nav{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:24px 0;padding-top:24px;border-top:1px solid var(--stroke)}.album-hero{display:flex;gap:24px;align-items:center;flex-wrap:wrap;margin-bottom:20px}.cover-wrap{width:160px;height:160px;border-radius:18px;overflow:hidden;background:var(--bg-2);flex-shrink:0;box-shadow:0 15px 35px #0006}.cover-wrap img{width:100%;height:100%;object-fit:cover}.album-genre{text-transform:uppercase;letter-spacing:2px;color:var(--accent-3);font-size:.75rem;margin-bottom:8px}.album-title{font-size:clamp(1.6rem,2.6vw,2.4rem);margin-bottom:10px}.album-actions{display:flex;align-items:center;gap:12px;color:var(--ink-muted)}.status-pill{padding:6px 12px;border-radius:999px;background:#23d5ab2e;color:var(--accent);font-weight:600}.tracklist{display:grid;gap:14px}.track{display:grid;grid-template-columns:auto 1fr;gap:14px;padding:14px 16px;border-radius:16px;border:1px solid transparent;background:#0a0c18cc;transition:border-color .2s ease,transform .2s ease}.track.is-playing{border-color:#23d5abb3;transform:translateY(-1px)}.track-number{font-weight:600;color:var(--ink-muted)}.track-info{display:grid;gap:8px}.track-title{font-weight:600}.player{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px}.player button{background:linear-gradient(140deg,var(--accent),var(--accent-2));border:none;color:#08121b;padding:8px 14px;border-radius:999px;font-weight:700;cursor:pointer}.player button:disabled{opacity:.6;cursor:not-allowed}.progress{position:relative;height:6px;border-radius:999px;background:#ffffff1a;overflow:hidden}.progress-bar{position:absolute;inset:0;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-2))}.player-time{font-size:.85rem;color:var(--ink-muted);min-width:88px;text-align:right}.volume{width:90px}.volume input{width:100%}.site-footer{padding:26px clamp(18px,4vw,48px) 40px;color:var(--ink-muted);border-top:1px solid var(--stroke)}.toast{position:fixed;bottom:30px;right:30px;padding:12px 18px;background:#0f1423f2;border:1px solid var(--stroke);border-radius:999px;opacity:0;transform:translateY(10px);transition:opacity .2s ease,transform .2s ease;pointer-events:none}.toast.show{opacity:1;transform:translateY(0)}.no-select{user-select:none}@keyframes fadeIn{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 1100px){.ad-sidebar{display:none!important}.layout{justify-content:center}.album-detail{max-width:900px}}@media (max-width: 600px){.site-header{flex-direction:column;align-items:flex-start}.player{grid-template-columns:1fr}.player-time{text-align:left}.volume{width:100%}}