:root{color-scheme:dark;--bg:#211e30;--pink:#ca1749;--text:#e2dfe7;--muted:#a9a3b5}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 85% 5%,#4b304b80,transparent 55%),radial-gradient(ellipse at 10% 80%,#30395660,transparent 65%),var(--bg);font:15px/1.55 system-ui,-apple-system,Segoe UI,sans-serif;color:var(--text);min-height:100vh}.shell{max-width:1100px;margin:auto;padding:36px 32px}header{display:flex;align-items:center;gap:24px;margin-bottom:64px}.tag{border-left:1px solid #ffffff25;padding-left:24px;color:var(--muted);font-size:13px}main{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}.intro{padding:30px 24px 30px 0}.eyebrow{color:#ee7196;font-size:11px;letter-spacing:2px;font-weight:700}h1{font-size:44px;line-height:1.16;letter-spacing:-1.5px;margin:16px 0 22px}h2{margin:0 0 10px;font-size:23px;letter-spacing:-.5px}p{margin:0 0 18px}.intro p{color:var(--muted);font-size:17px;max-width:410px}.steps{display:grid;gap:16px;margin-top:40px;font-size:13px;color:#cec8da}.panel{background:linear-gradient(145deg,#393246de,#2b2639ed);border:1px solid #ffffff15;border-radius:20px;padding:30px;box-shadow:0 20px 60px #0d0b1633}.muted{color:var(--muted);font-size:13px}label{display:block;font-size:12px;font-weight:600;margin:18px 0 7px}input,select{width:100%;background:#211d2e8f;border:1px solid #ffffff25;border-radius:9px;padding:12px 14px;color:var(--text);font:inherit;min-width:0}input:focus,select:focus{outline:2px solid #ca174980;outline-offset:2px;border-color:var(--pink)}input::placeholder{color:#827b91}button{cursor:pointer;font:inherit;border-radius:9px;border:0;padding:12px 18px;font-weight:600}.primary{display:flex;justify-content:space-between;width:100%;margin-top:24px;color:white;background:var(--pink);box-shadow:0 6px 25px #ca17491a}.primary:hover{background:#df2358}button:focus-visible{outline:2px solid white;outline-offset:3px}.footnote{color:#9690a3;font-size:11px;margin:18px 0 0}.message{background:#83d6ae12;border:1px solid #83d6ae45;color:#a3e4c0;border-radius:9px;padding:12px;font-size:13px}.error{background:#ffae8212;border-color:#ffae8245;color:#ffc1a0}.connected{grid-column:1/-1;display:flex;justify-content:space-between;gap:24px;align-items:center}.connected h1{font-size:30px;margin:10px 0}.device-id{color:var(--muted);font-size:14px;letter-spacing:2px}.connection{display:flex;gap:16px;align-items:center}.subtle{background:#ffffff0c;border:1px solid #ffffff20;color:#cec8da;padding:8px 16px}.pill{display:inline-block;border:1px solid #ffffff20;background:#ffffff08;padding:5px 10px;border-radius:20px;font-size:11px;white-space:nowrap}.pill.applied{color:#83d6ae;background:#83d6ae10;border-color:#83d6ae30}.pill.failed,.pill.expired{color:#ffba92}.delivery{display:flex;gap:16px;justify-content:space-between;align-items:center;border-bottom:1px solid #ffffff0b;padding:16px 0}.delivery strong{font-size:14px;overflow-wrap:anywhere}.delivery small{display:block;color:#9690a3;font-size:11px;margin-top:4px}.empty{font-size:13px;color:var(--muted);padding:24px 0}footer{margin-top:64px;color:#7c748d;font-size:11px}[hidden]{display:none!important}@media(max-width:720px){.shell{padding:24px 20px}header{margin-bottom:30px}main{grid-template-columns:1fr;gap:24px}.intro{padding:0}.intro h1{font-size:34px}.steps{margin-top:24px;gap:10px}.panel{padding:24px}.connected{flex-wrap:wrap;gap:10px}.connected h1{font-size:25px}.device-id{font-size:12px}.history{order:3}footer{margin-top:32px}}
.playlists{grid-column:1/-1}.playlist-row{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:15px 0;border-bottom:1px solid #ffffff0b}.playlist-row:last-child{border-bottom:0}.playlist-row strong{font-size:14px;overflow-wrap:anywhere}.playlist-row small{display:block;font-size:11px;color:var(--muted);margin-top:4px}.row-actions{display:flex;gap:8px;flex-wrap:wrap}.row-actions .subtle{font-size:12px;padding:7px 12px;text-decoration:none;white-space:nowrap}.danger{color:#ffb1bb;border-color:#dd526345}.delivery-actions{display:grid;justify-items:end;gap:8px}.delivery-actions button{font-size:10px;padding:4px 8px}.cancel{display:inline-block;margin-top:14px;color:var(--muted)}@media(max-width:560px){.playlist-row{align-items:flex-start;flex-direction:column;gap:10px}.delivery{gap:10px}.delivery-actions{min-width:95px}}
.icon-button{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:8px;border:0;border-radius:8px;background:transparent;color:#f5f2f8;text-decoration:none;transition:background .15s,color .15s}.icon-button:hover{background:#ffffff12}.icon-button.danger{color:#ff626c}.icon-button.danger:hover{background:#ff626c18}.icon-button:disabled{opacity:.28;cursor:default}.active-indicator{opacity:.3;cursor:default}.active-indicator.is-active{opacity:1}.active-indicator:hover{background:transparent}.action-icon{display:block;width:20px;height:20px;background:currentColor;mask-position:center;mask-size:contain;mask-repeat:no-repeat}.icon-check{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' fill-rule='evenodd' d='M12 0a12 12 0 1 0 0 24A12 12 0 0 0 12 0Zm6.7 6.3-8.8 10.5-4.6-4.6 1.4-1.4 3 3 7.6-9.1Z'/%3E%3C/svg%3E")}.icon-refresh{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M17.6 6.4A8 8 0 1 0 20 12h-3a5 5 0 1 1-1.5-3.6L12 12h10V2Z'/%3E%3C/svg%3E")}.icon-edit{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M3 17.3V21h3.7L17.6 10.1l-3.7-3.7ZM20.7 7a1 1 0 0 0 0-1.4l-2.3-2.3a1 1 0 0 0-1.4 0l-1.8 1.8 3.7 3.7Z'/%3E%3C/svg%3E")}.icon-delete{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 2h6l1 2h5v2H3V4h5ZM5 8h2v12h10V8h2v14H5Z'/%3E%3C/svg%3E")}.row-actions{gap:6px;align-items:center;flex-wrap:nowrap}.delivery-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;max-width:145px}.delivery-actions button.icon-button{padding:8px;font-size:inherit}.delivery-actions .pill{flex-basis:100%;text-align:center}@media(max-width:560px){.row-actions{align-self:flex-end}.icon-button{width:40px;height:40px}}