
:root{font-family:Arial,sans-serif;color:#f8f5fc;background:#080910}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 90% 0,#48206c,transparent 34%),#080910;min-height:100vh}.shell{max-width:1080px;margin:auto;padding:28px 20px 70px}.top{display:flex;justify-content:space-between;align-items:center;margin-bottom:60px}.brand{font-size:25px;font-weight:800}.brand span,.eyebrow{color:#cf9cff}.eyebrow{font-size:12px;font-weight:bold;letter-spacing:1.3px}.login{display:grid;grid-template-columns:1.3fr .7fr;gap:60px;align-items:center;min-height:55vh}h1{font-size:clamp(38px,6vw,64px);line-height:1;margin:8px 0 18px;letter-spacing:-3px}p{color:#bcb4c7;line-height:1.5}.card{background:#18151fdd;border:1px solid #393042;border-radius:18px;padding:26px;box-shadow:0 20px 60px #0006}label{display:block;margin:15px 0 7px;color:#ddd6e5;font-size:14px}input,select{display:block;width:100%;margin-top:7px;border:1px solid #574d61;border-radius:9px;padding:12px;background:#100e16;color:#fff;font:inherit}button{border:0;border-radius:10px;padding:12px 17px;color:#fff;background:linear-gradient(100deg,#8c31e7,#ef6b2b);font-weight:bold;cursor:pointer}.ghost{background:transparent;border:1px solid #5b5065}.hidden{display:none!important}.heading{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:28px}.heading h1{font-size:43px}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}.playlist h2{margin:0 0 7px;font-size:20px}.meta{display:flex;justify-content:space-between;gap:12px}.pill{padding:5px 9px;border-radius:99px;background:#2b2631;font-size:12px}.active{background:#173d35;color:#90e7c6}.actions{display:flex;gap:8px;margin-top:22px}.actions button{flex:1;padding:10px}.message{min-height:22px;color:#ffb39c}.ok{color:#90e7c6}dialog{width:min(540px,calc(100% - 28px));border:0;background:transparent;color:#fff}dialog::backdrop{background:#000b}.split{display:grid;grid-template-columns:1fr 1fr;gap:12px}@media(max-width:700px){.login{grid-template-columns:1fr;gap:28px}.heading{align-items:start;flex-direction:column}.heading button{width:100%}}
