@import"https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap";:root{font-family:DM Sans,sans-serif;color:#e8edf4;background:#0a0d12;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-width:1100px;background:radial-gradient(circle at 50% -20%,#1b2636 0,#0a0d12 42%)}button,input{font:inherit}.app-shell{min-height:100vh;display:grid;grid-template-rows:72px 1fr 42px}header{display:flex;align-items:center;justify-content:space-between;padding:0 24px;border-bottom:1px solid #252c36;background:#0d1118d9;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.brand{display:flex;align-items:center;gap:11px;width:300px}.brand-mark{height:38px;width:38px;display:grid;place-items:center;border-radius:11px;background:linear-gradient(145deg,#ff9f43,#f15b2a);font-family:Space Grotesk;font-weight:700;color:#18100b}.brand strong{font:600 18px Space Grotesk;display:block}.brand span{font-size:9px;letter-spacing:2.5px;color:#7f8b9c}.header-status{display:flex;align-items:center;gap:10px}.header-status strong,.header-status small{display:block}.header-status small{color:#7f8b9c;font-size:11px}.status-dot{width:9px;height:9px;border-radius:50%;background:#748092;box-shadow:0 0 12px #748092}.status-dot.playing{background:#41d68d;box-shadow:0 0 14px #41d68d}.status-dot.error{background:#f26060}.ghost{border:1px solid #2b3441;background:#141a23;color:#cfd6e2;border-radius:9px;padding:9px 13px;display:flex;gap:8px;align-items:center}main{display:grid;grid-template-columns:265px minmax(500px,1fr) 330px;gap:12px;padding:12px;min-height:0}.panel{background:#10151d;border:1px solid #242c37;border-radius:13px;overflow:hidden}.panel-title{height:50px;padding:0 15px;border-bottom:1px solid #242c37;display:flex;align-items:center;justify-content:space-between;font-weight:600}.panel-title>span{display:flex;align-items:center;gap:8px}.panel-title em{font-style:normal;font-size:10px;color:#738093}.library,.queue{display:flex;flex-direction:column;min-height:0}.search{margin:12px;display:flex;align-items:center;gap:8px;padding:9px 10px;border:1px solid #2b3441;border-radius:8px;background:#0a0e14;color:#667182}.search input{width:100%;border:0;outline:0;color:#dce2ec;background:transparent;font-size:12px}.category-list{overflow:auto;padding:0 7px 15px}.category-list p{padding:11px 8px 3px;margin:0;color:#5f6b7d;font-size:9px;font-weight:700;letter-spacing:1.3px}.category-list button{width:100%;border:0;background:transparent;color:#aeb8c7;padding:8px 9px;border-radius:7px;display:flex;justify-content:space-between;text-align:left;cursor:pointer}.category-list button:hover,.category-list button.active{background:#1c2430;color:#fff}.category-list button.active{box-shadow:inset 3px 0 #ff8b3d}.category-list small{color:#647185}.workspace{display:grid;grid-template-rows:auto minmax(260px,1fr);gap:12px;min-height:0}.now-playing{padding:22px 26px}.eyebrow{font-size:9px;color:#ff974f;letter-spacing:1.8px;font-weight:700}.track-hero{display:flex;gap:15px;align-items:center;margin:14px 0}.album-art{width:55px;height:55px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(145deg,#253143,#131923);color:#ff944d}.track-hero h1{font:600 22px Space Grotesk;margin:0 0 4px;white-space:nowrap;max-width:650px;overflow:hidden;text-overflow:ellipsis}.track-hero p{margin:0;color:#748196;font-size:11px}.timeline{accent-color:#ff8840;width:100%}.time{display:flex;justify-content:space-between;font-size:10px;color:#718095}.transport{display:flex;justify-content:center;align-items:center;gap:9px;margin:5px 0 16px}.transport button,.round{height:35px;width:35px;border:1px solid #2d3745;border-radius:50%;background:#181f29;color:#b9c3d1;display:grid;place-items:center;cursor:pointer}.transport .primary-play{height:49px;width:49px;border:0;background:#ff8840;color:#17100b;box-shadow:0 6px 20px #ff884033}.mix-readout{border-top:1px solid #232b36;padding-top:14px;display:grid;grid-template-columns:repeat(4,1fr)}.mix-readout div{padding-left:15px;border-left:1px solid #242c37}.mix-readout div:first-child{padding-left:0;border:0}.mix-readout span,.mix-readout strong{display:block}.mix-readout span{font-size:9px;text-transform:uppercase;color:#667387}.mix-readout strong{font-size:12px;margin-top:3px}.browser{min-height:0;display:flex;flex-direction:column}.track-list,.queue-list{overflow:auto;min-height:0}.track-row{display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:8px;padding:8px 14px;border-bottom:1px solid #1e2530}.track-row:hover{background:#151c25}.track-row strong,.track-row small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-row strong{font-size:12px}.track-row small{font-size:9px;color:#667387;margin-top:2px;text-transform:uppercase}.round{height:28px;width:28px}.add{border:1px solid #303a48;background:transparent;color:#aab5c4;border-radius:6px;padding:6px 9px;font-size:10px}.add.accent{border-color:#80502e;color:#ff9a55}.queue-list{flex:1}.queue-row{display:grid;grid-template-columns:24px minmax(0,1fr) 25px;align-items:center;gap:8px;padding:11px 12px;border-bottom:1px solid #1f2732}.queue-row.current{background:#17211e;border-left:3px solid #41d68d}.queue-row>span{font:500 10px Space Grotesk;color:#647185}.queue-row strong,.queue-row small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.queue-row strong{font-size:11px}.queue-row small{font-size:8px;color:#647185;margin-top:3px}.queue-row button{background:transparent;border:0;color:#627084}.queue-footer{padding:12px;border-top:1px solid #242c37}.queue-footer button{width:100%;padding:8px;background:#171d26;color:#8591a2;border:1px solid #28313e;border-radius:7px}.empty{text-align:center;color:#667387;padding:35px 15px;font-size:12px;line-height:1.7}footer{border-top:1px solid #252c36;background:#0c1016;display:flex;align-items:center;justify-content:space-between;padding:0 19px;color:#6f7c8e;font-size:10px}footer>div{display:flex;align-items:center;gap:7px}.online-dot{width:6px;height:6px;background:#41d68d;border-radius:50%}footer input{width:100px;accent-color:#ff8840}.overlay{position:fixed;inset:0;background:#05070aaa;z-index:10}.drawer{position:absolute;right:0;top:0;bottom:0;width:480px;background:#121821;border-left:1px solid #313a47;padding:24px;overflow:auto;box-shadow:-25px 0 80px #0008}.drawer-head{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:1px solid #29313d;padding-bottom:18px;margin-bottom:20px}.drawer-head h2{font:600 21px Space Grotesk;margin:0}.drawer-head p{color:#748196;font-size:11px}.drawer-head button{background:transparent;border:0;color:#8290a2}.drawer label{display:block;color:#8995a6;font-size:11px;margin-bottom:14px}.drawer input{display:block;width:100%;margin-top:6px;padding:10px;border-radius:7px;border:1px solid #303a48;background:#0b1016;color:#e7ebf2}.drawer h3{font:600 13px Space Grotesk;margin:23px 0 12px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}.drawer-actions{display:flex;justify-content:space-between;margin-top:28px;padding-top:18px;border-top:1px solid #29313d}.drawer-actions button{padding:10px 15px;border:1px solid #303a48;border-radius:7px;background:#171e28;color:#9ba7b7}.drawer-actions .save{border:0;background:#ff8840;color:#1b110a;font-weight:700}@media(max-width:1250px){main{grid-template-columns:235px minmax(480px,1fr) 285px}.track-hero h1{max-width:420px}}main{grid-template-columns:minmax(620px,1fr) 330px}.workspace{grid-template-rows:auto minmax(300px,1fr)}.library{display:flex;flex-direction:column;min-height:0;overflow:hidden}.search input:disabled{cursor:not-allowed;opacity:.58}.accordion-list{overflow:auto;min-height:0;padding:0 12px 16px}.section-label{padding:11px 8px 6px;margin:0;color:#5f6b7d;font-size:9px;font-weight:700;letter-spacing:1.3px}.category-group{border-bottom:1px solid #202834}.category-group.open{margin:0 -4px;border:1px solid #2c3542;border-radius:9px;background:#0d1219;overflow:hidden}.category-row{width:100%;border:0;background:transparent;color:#b9c3d1;padding:10px 9px;display:flex;align-items:center;justify-content:space-between;text-align:left;cursor:pointer}.category-row:hover,.category-group.open>.category-row{background:#1a222d;color:#fff}.category-group.open>.category-row{box-shadow:inset 3px 0 #ff8b3d}.category-row span{display:flex;align-items:center;gap:7px;min-width:0}.category-row strong{font-size:13px;font-weight:500}.category-row small{color:#6980a0;font-size:11px}.category-tracks{background:#0b1016;border-top:1px solid #242c37}.nested-track{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:8px;padding:8px 12px 8px 30px;border-bottom:1px solid #1d2530}.nested-track:last-child{border-bottom:0}.nested-track:hover{background:#131a23}.nested-track strong,.nested-track small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.nested-track strong{font-size:12px}.nested-track small{margin-top:2px;color:#607087;font-size:8px}.loading-row{padding:18px 30px;color:#69778a;font-size:11px}@media(max-width:1250px){main{grid-template-columns:minmax(560px,1fr) 285px}.track-hero h1{max-width:520px}}html,body,#root{height:100%;overflow:hidden}.app-shell{width:100%;height:100vh;min-height:0;overflow:hidden}main{min-height:0;overflow:hidden}.workspace,.queue{height:100%;min-height:0;overflow:hidden}.workspace{grid-template-rows:auto minmax(0,1fr)}.library{height:100%}.accordion-list,.queue-list{min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}footer{position:relative;z-index:2}.accordion-list,.queue-list,.drawer{scrollbar-width:thin;scrollbar-color:#465160 transparent}.accordion-list::-webkit-scrollbar,.queue-list::-webkit-scrollbar,.drawer::-webkit-scrollbar{width:7px;height:7px}.accordion-list::-webkit-scrollbar-track,.queue-list::-webkit-scrollbar-track,.drawer::-webkit-scrollbar-track{background:transparent}.accordion-list::-webkit-scrollbar-thumb,.queue-list::-webkit-scrollbar-thumb,.drawer::-webkit-scrollbar-thumb{min-height:44px;border:2px solid transparent;border-radius:999px;background:#465160;background-clip:padding-box}.accordion-list::-webkit-scrollbar-thumb:hover,.queue-list::-webkit-scrollbar-thumb:hover,.drawer::-webkit-scrollbar-thumb:hover{background:#687587;background-clip:padding-box}:root{color:#f4f6fa;background:#0c111b;--studio-blue: #3f65a8;--studio-blue-active: #5b82c6;--studio-blue-soft: #8fa9d4;--studio-panel: #121a27;--studio-panel-raised: #182235;--studio-border: #29364a;--studio-muted: #9daabc}body{background:radial-gradient(circle at 50% -20%,#223454 0,#0c111b 45%)}header,footer{border-color:#29364a;background:#0c111bf0}.panel{border-color:#29364a;background:#121a27}.panel-title,.queue-footer,.mix-readout{border-color:#29364a}.library-tabs{min-height:50px;display:flex;align-items:stretch;border-bottom:1px solid #29364a}.library-tabs button{position:relative;min-width:150px;padding:0 17px;border:0;background:transparent;color:#8998ad;display:flex;align-items:center;gap:8px;cursor:pointer;font-weight:600}.library-tabs button:hover{color:#dce6f5;background:#3f65a814}.library-tabs button.active{color:#fff;background:#182235}.library-tabs button.active:after{content:"";position:absolute;right:12px;bottom:0;left:12px;height:3px;border-radius:3px 3px 0 0;background:#5b82c6}.library-tabs small{padding:2px 6px;border-radius:999px;background:#243550;color:#9eb6dc;font-size:9px}.brand-mark{overflow:hidden;color:#f4f6fa;background:transparent;box-shadow:0 6px 18px #3f65a838}.brand-mark img{display:block;width:100%;height:100%;object-fit:contain;image-rendering:auto}.brand span,.header-status small,.track-hero p,.time,footer{color:#9daabc}.header-center{display:flex;align-items:center;gap:18px}.header-divider{width:1px;height:34px;background:#354663}.header-clock{min-width:178px}.header-clock strong,.header-clock small{display:block}.header-clock strong{color:#f4f6fa;font:600 19px Space Grotesk;letter-spacing:.04em;line-height:1.05}.header-clock small{margin-top:3px;color:#8fa0b8;font-size:10px}.ghost{border-color:#354663;background:#182235;color:#e9eef7}.ghost:hover{border-color:#5b82c6;background:#202e46}.eyebrow{color:#8fa9d4}.album-art{color:#9db8e5;background:linear-gradient(145deg,#253a60,#17243a)}.audio-spectrum{position:relative;height:48px;margin:2px 0 7px;overflow:hidden;border:1px solid rgba(63,101,168,.2);border-radius:7px;background:linear-gradient(180deg,rgba(91,130,198,.055),transparent),repeating-linear-gradient(90deg,transparent 0,transparent 39px,rgba(143,169,212,.035) 40px);box-shadow:inset 0 -1px #8fa9d414}.audio-spectrum:after{content:"";position:absolute;right:0;bottom:0;left:0;height:1px;background:#8fa9d433}.audio-spectrum canvas{display:block;width:100%;height:100%}.timeline,footer input{accent-color:#5b82c6}.developer-credit a{color:#8fa9d4;text-decoration:none;transition:color .16s ease}.developer-credit a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}.footer-status,.footer-status>span,.whatsapp-support{display:flex;align-items:center}.footer-status>span,.whatsapp-support{gap:7px}.footer-separator{width:1px;height:15px;margin:0 4px;background:#354663}.whatsapp-support{color:#9daabc;text-decoration:none;transition:color .16s ease}.whatsapp-support svg{color:#35c96f;filter:drop-shadow(0 0 4px rgba(53,201,111,.22))}.whatsapp-support:hover{color:#fff}.transport button,.round{border-color:#354663;background:#182235;color:#c8d5e8}.transport button{width:39px;height:39px;transition:color .16s ease,border-color .16s ease,background .16s ease,transform .16s ease}.transport button:hover{transform:translateY(-1px)}.transport button:hover,.round:hover{border-color:#5b82c6;color:#fff}.transport .primary-play{width:52px;height:52px;color:#fff;background:#3f65a8;box-shadow:0 7px 22px #3f65a866}.transport .primary-play svg{margin-left:2px}.transport .primary-play svg[data-lucide=pause]{margin-left:0}.transport .stop-button{color:#9fb0c8}.transport .primary-play:hover{background:#5b82c6}.mix-readout div{border-color:#29364a}.mix-readout span,.section-label,.nested-track small,.queue-row small{color:#788aa4}.search{border-color:#354663;background:#0c131f;color:#7890b3}.search:focus-within{border-color:#5b82c6;box-shadow:0 0 0 3px #5b82c61f}.category-group,.nested-track,.track-row,.queue-row{border-color:#243249}.category-group.open{border-color:#3d5274;background:#0e1624}.category-row:hover,.category-group.open>.category-row{background:#1b2940}.category-group.open>.category-row{box-shadow:inset 3px 0 #5b82c6}.category-row small{color:#8fa9d4}.category-tracks{border-color:#29364a;background:#0c131f}.nested-track:hover,.track-row:hover{background:#172237}.add{border-color:#3c4f6d;color:#b9c9df}.add:hover,.add.accent{border-color:#5b82c6;color:#a9c3ef;background:#3f65a81a}.queue-row.current{border-left-color:#5b82c6;background:#17283a}.queue-footer button{border-color:#354663;background:#182235;color:#aebbd0}.queue-footer button:hover{border-color:#5b82c6;color:#fff}.queue-title-actions{display:flex;align-items:center;gap:9px}.clear-queue{width:28px;height:28px;padding:0;display:grid;place-items:center;border:1px solid transparent;border-radius:6px;background:transparent;color:#77879d;cursor:pointer;transition:color .16s ease,border-color .16s ease,background .16s ease}.clear-queue:hover:not(:disabled){border-color:#e05b6761;background:#e05b671a;color:#ef7b85}.clear-queue:disabled{opacity:.3;cursor:default}.drawer{border-color:#3a4d6c;background:#121a27}.drawer input{border-color:#354663;background:#0c131f}.drawer input:focus{border-color:#5b82c6;outline:0}.access-key-status{display:block;margin-top:7px;font-size:10px}.access-key-status.valid{color:#58d995}.access-key-status.invalid{color:#d7838b}.drawer-actions .save{color:#fff;background:#3f65a8}.drawer-actions .save:hover{background:#5b82c6}.accordion-list,.queue-list,.drawer{scrollbar-color:#405778 transparent}.accordion-list::-webkit-scrollbar-thumb,.queue-list::-webkit-scrollbar-thumb,.drawer::-webkit-scrollbar-thumb{background:#405778;background-clip:padding-box}.accordion-list::-webkit-scrollbar-thumb:hover,.queue-list::-webkit-scrollbar-thumb:hover,.drawer::-webkit-scrollbar-thumb:hover{background:#5b7193;background-clip:padding-box}.nested-track strong{font-size:13px;font-weight:500;line-height:1.35;letter-spacing:.005em}.queue-row strong{font-size:12px;font-weight:500;line-height:1.35;letter-spacing:.005em}