:root{--bg:#0b0d0c;--panel:#181b19;--panel2:#242824;--text:#f4f5f3;--muted:#a7ada8;--green:#1ed760;--line:#2b302c}*{box-sizing:border-box}body{margin:0;background:linear-gradient(135deg,#0b0d0c,#121613 55%,#0b0d0c);color:var(--text);font:16px 'DM Sans',sans-serif}.app-shell{display:flex;min-height:calc(100vh - 96px)}.sidebar{width:250px;padding:28px 18px;background:#080a09;display:flex;flex-direction:column}.brand{font:700 25px 'Space Grotesk';display:flex;align-items:center;gap:10px;margin:0 14px 44px}.brand-mark{display:grid;place-items:center;background:var(--green);color:#081008;width:32px;height:32px;border-radius:50%;font-size:22px}.main-nav,.playlist-nav{display:grid;gap:7px}.nav-item,.playlist-nav a{color:var(--muted);text-decoration:none;padding:12px 14px;border-radius:8px;display:flex;gap:13px;align-items:center}.nav-item{font-weight:600}.nav-item.active,.nav-item:hover,.playlist-nav a:hover{background:var(--panel2);color:var(--text)}.nav-item.active{color:var(--green)}.nav-item span{font-size:21px;width:20px;text-align:center}.nav-label{font-size:11px;letter-spacing:1.5px;color:#69716b;text-transform:uppercase;margin:39px 14px 12px}.playlist-nav a{font-size:14px;padding:10px 14px}.sidebar-bottom{margin-top:auto}.add-playlist{background:none;border:0;color:var(--muted);font:inherit;padding:14px;cursor:pointer}.add-playlist span{color:var(--green);font-size:21px;margin-right:9px}.profile{border-top:1px solid var(--line);padding:18px 5px 0;display:flex;align-items:center;gap:10px;font-size:13px}.avatar,.user-chip{background:#b1c5da;color:#17202a;border-radius:50%;width:34px;height:34px;display:grid;place-items:center;font-size:11px;font-weight:700}.profile small{display:block;color:var(--muted);margin-top:2px}.dots{color:var(--muted);margin-left:auto}.main-content{flex:1;padding:0 52px 140px;max-width:1420px;margin:auto;width:100%}.topbar{height:82px;display:flex;align-items:center;justify-content:space-between}.search{background:#242824;border:0;border-radius:24px;width:min(430px,60%);height:46px;display:flex;align-items:center;padding:0 17px;color:var(--muted)}.search span{font-size:25px;margin-right:10px}.search input{background:none;border:0;outline:none;color:var(--text);font:inherit;width:100%}.top-actions{display:flex;align-items:center;gap:20px}.icon-btn,.control,.heart{border:0;background:none;color:var(--muted);font-size:22px;cursor:pointer}.user-chip{border:2px solid #30402f;background:var(--green);color:#111}.mobile-menu{display:none}.hero{min-height:275px;background:linear-gradient(110deg,#1a3324,#234d2e 52%,#326b3f);border-radius:12px;padding:42px 48px;display:flex;justify-content:space-between;overflow:hidden}.eyebrow{font-size:11px;letter-spacing:2px;color:#c8d8cc;margin:0 0 16px}.hero h1{font:600 48px/1.02 'Space Grotesk';letter-spacing:-2px;margin:0}.hero h1 em{font-style:normal;color:var(--green)}.hero-copy{color:#c1d1c5;margin-top:16px}.hero-orb{width:240px;height:240px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#6eff9c,#1ed760 35%,#216739 68%,transparent 69%);display:grid;place-items:center;align-self:center;margin-right:60px;transform:rotate(-15deg)}.hero-orb span{font-size:100px;color:#163a22;opacity:.8}.section{margin-top:36px}.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:17px}.section h2{font:600 22px 'Space Grotesk';margin:0}.text-btn{border:0;background:none;color:var(--muted);cursor:pointer}.recent-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:17px}.recent-card{background:var(--panel);border-radius:8px;padding:14px;cursor:pointer;transition:.2s}.recent-card:hover{background:#252a26;transform:translateY(-2px)}.cover{aspect-ratio:1;border-radius:5px;display:grid;place-items:center;font:700 42px 'Space Grotesk';color:#10120f;margin-bottom:12px}.cover-neon{background:linear-gradient(140deg,#d5f34b,#5c8f3c)}.cover-sand{background:linear-gradient(140deg,#f4b967,#bf5b45)}.cover-blue{background:linear-gradient(140deg,#8fd4e3,#4564a8)}.cover-pink{background:linear-gradient(140deg,#f195bb,#744898)}.recent-card strong,.album strong{display:block;font-size:14px}.recent-card small,.album small{color:var(--muted);font-size:12px}.split-section{display:grid;grid-template-columns:1.2fr 1fr;gap:60px}.made-for,.favorites{display:grid;gap:8px}.album,.track{display:flex;gap:13px;align-items:center;padding:9px;border-radius:7px}.album:hover,.track:hover{background:var(--panel2)}.album .cover{width:50px;margin:0;font-size:20px}.album-info,.track-info{flex:1}.album .play-small{color:var(--green);font-size:18px}.track-num{width:19px;color:#667061;font-size:13px}.track .cover{width:40px;margin:0;font-size:17px}.track-info strong{display:block;font-size:14px}.track-info small{color:var(--muted);font-size:12px}.track-time{color:var(--muted);font-size:12px}.player{position:fixed;bottom:0;left:0;right:0;height:96px;background:#161917;border-top:1px solid #30362c;display:flex;align-items:center;padding:0 26px;gap:30px;z-index:5}.now-playing{width:28%;display:flex;align-items:center;gap:12px}.now-playing .cover{width:50px;margin:0;font-size:19px}.now-playing strong,.now-playing small{display:block}.now-playing small{color:var(--muted);font-size:12px;margin-top:3px}.heart{margin-left:10px;color:var(--green)}.player-center{flex:1;max-width:500px;margin:auto}.controls{display:flex;justify-content:center;align-items:center;gap:24px;margin-bottom:6px}.play{border:0;background:var(--green);color:#10120f;border-radius:50%;height:34px;width:34px;cursor:pointer}.progress-row{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:10px}.progress-row input,.player-right input{accent-color:var(--green);height:4px}.progress-row input{flex:1}.player-right{width:22%;display:flex;align-items:center;justify-content:flex-end;gap:12px;color:var(--muted)}.player-right input{width:90px}.catalog-results,.external-player{display:none;background:#161a17;border-radius:10px;padding:20px;margin:0 0 30px}.catalog-results.show,.external-player{display:block}.catalog-track{width:100%;display:flex;align-items:center;gap:15px;background:transparent;color:var(--text);border:0;border-bottom:1px solid #2b302c;padding:13px 8px;text-align:left;cursor:pointer}.catalog-track:hover{background:#242a25}.catalog-track strong,.catalog-track small{display:block}.catalog-track small{color:var(--muted);font-size:12px}.catalog-track em{margin-left:auto;color:var(--muted);font-style:normal;font-size:12px}.catalog-btn{border:0;background:#252a26;color:var(--muted);padding:6px 10px;border-radius:14px;cursor:pointer}.catalog-btn.active{background:var(--green);color:#071008}.external-player iframe{width:100%;min-height:166px;border:0;border-radius:8px}@media(max-width:800px){.sidebar{display:none}.main-content{padding:0 20px 125px}.mobile-menu{display:block;background:none;border:0;color:var(--text);font-size:20px}.topbar{height:72px}.search{width:70%;margin:auto}.top-actions{display:none}.hero{padding:28px 25px;min-height:240px}.hero h1{font-size:37px}.hero-orb{width:145px;height:145px;margin-right:-35px}.hero-orb span{font-size:70px}.recent-grid{grid-template-columns:repeat(2,1fr)}.split-section{grid-template-columns:1fr;gap:30px}.player{padding:0 15px;height:78px;gap:10px}.now-playing{width:46%}.now-playing .heart,.player-right{display:none}.player-center{width:54%}.control{display:none}.controls{margin:0 0 2px}.progress-row{font-size:9px}.now-playing strong{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.now-playing small{font-size:11px}}