.profile-avatar{display:grid;place-items:center;width:46px;height:46px;flex:0 0 46px;border-radius:50%;background:linear-gradient(145deg,#d9cfc0,#79786f);color:#363734;border:1px solid #ffffff35;padding:0;overflow:hidden}
.profile-avatar svg{width:34px;height:34px;fill:currentColor;stroke:none;margin-top:6px}
#profile-button{margin-left:4px}
#profile-button[aria-expanded=true]{outline:2px solid white;outline-offset:4px}
.device-profile-menu{position:absolute;z-index:20;top:100px;right:var(--gutter);width:360px;max-width:calc(100vw - 40px);padding:24px;border:1px solid #ffffff24;border-radius:18px;background:#252529cc;backdrop-filter:blur(30px) saturate(140%);-webkit-backdrop-filter:blur(30px) saturate(140%);box-shadow:0 20px 60px #0005}
.profile-menu-heading{display:flex;align-items:center;gap:12px;padding-bottom:24px}
.profile-menu-heading .profile-avatar{width:42px;height:42px;flex-basis:42px}
.profile-menu-heading>div{flex:1;min-width:0}
.profile-menu-heading h2{font-size:16px;letter-spacing:-.3px;margin:0 0 6px;font-weight:550}
.profile-menu-heading p{font-size:11px;color:#aaaab4;margin:0}
.account-plan{font-size:10px;color:#bbbcc7;padding:5px 8px;border:1px solid #ffffff20;border-radius:6px}
.account-plan.is-pro{color:#eee1bc;border-color:#ddc78b55;background:#ddc78b12}
.device-license{padding:20px 0;border-block:1px solid #ffffff13;display:flex;flex-direction:column;gap:24px}
.device-license>div:first-child{display:flex;align-items:center;justify-content:space-between;gap:12px}
.device-license span{font-size:12px;color:#a5a5b0}
.device-license strong{font-size:12px;font-weight:500;color:#e6e6ec}
.device-identity{display:flex;flex-direction:column;gap:8px}
.device-identity strong{font-family:ui-monospace,SFMono-Regular,monospace;font-size:19px;letter-spacing:1px}
.device-identity small{font-size:10px;color:#85858f;line-height:1.5}
.profile-menu-action{display:flex;align-items:center;text-align:left;gap:12px;width:100%;padding:20px 0;font-size:13px}
.profile-menu-action>span{flex:1}.profile-menu-action svg{width:18px;height:18px;color:#aaaab5}.profile-menu-action svg:last-child{width:14px}
.profile-upgrade{display:flex;align-items:center;justify-content:space-between;width:100%;padding:15px 16px;min-height:48px;background:#f1f1f4;color:#202023;border-radius:10px;font-size:14px;font-weight:550}
.profile-upgrade svg{width:15px;height:15px}.profile-caption{font-size:10px;color:#888893;text-align:center;margin:14px 0 0}
.upgrade-dialog{width:min(920px,calc(100vw - 48px));max-height:calc(100vh - 48px);padding:64px;overflow:auto;background:radial-gradient(ellipse at 100% 0,#373737,#1d1d20 65%);border-radius:24px}
.upgrade-dialog[open]{display:grid;grid-template-columns:1fr 280px;gap:64px;align-items:center}
.upgrade-brand{display:flex;align-items:center;gap:12px;font-size:30px;font-weight:700;letter-spacing:-1.5px}
.upgrade-brand b{font-size:11px;letter-spacing:1px;font-weight:550;color:#ded4ba;border:1px solid #d0c6ac55;border-radius:5px;padding:5px 7px}
.upgrade-copy h2{font-size:42px;line-height:1.12;letter-spacing:-1.5px;font-weight:550;margin:32px 0 20px}
.upgrade-copy>p{font-size:15px;line-height:1.7;color:#b0b0ba;margin:0}
.upgrade-device{display:flex;flex-direction:column;gap:10px;margin:32px 0 20px;padding-top:24px;border-top:1px solid #ffffff18}
.upgrade-device span{color:#92929e;font-size:11px}.upgrade-device strong{font-family:ui-monospace,SFMono-Regular,monospace;font-size:23px;font-weight:500;letter-spacing:1px}.upgrade-device small{font-size:11px;color:#888893}
.upgrade-copy .upgrade-footnote{font-size:11px;color:#85858f;line-height:1.6}
.upgrade-qr-side{text-align:center}.upgrade-qr-frame{background:#fff;border-radius:18px;padding:20px 20px 16px;color:#666}
#upgrade-qr{width:240px;max-width:100%;margin:auto}#upgrade-qr svg{display:block;width:100%;height:auto;stroke:none;fill:none;opacity:1}
.upgrade-qr-frame>span{font-size:10px;letter-spacing:.3px}
.upgrade-qr-side h3{font-size:17px;letter-spacing:-.3px;margin:24px 0 10px;font-weight:550}
.upgrade-qr-side p{font-size:12px;line-height:1.7;color:#aaaab4;margin:0 0 16px}
.upgrade-draft{font-size:10px;color:#81818d}
@media(min-width:1700px){.device-profile-menu{top:116px}.profile-avatar{width:50px;height:50px;flex-basis:50px}}
@media(max-width:700px){.header-actions{gap:6px}.app-header{gap:12px}.app-header .playlist-selector{width:132px;max-width:34vw}.profile-avatar{width:36px;height:36px;flex-basis:36px}.profile-avatar svg{width:28px;height:28px}.header-search{width:48px;flex-basis:48px}.app-header .brand{font-size:25px}#profile-button{margin-left:0}.device-profile-menu{right:20px;top:86px;padding:20px}.upgrade-dialog{padding:40px 28px;width:calc(100vw - 24px);max-height:calc(100vh - 24px)}.upgrade-dialog[open]{grid-template-columns:1fr;gap:32px}.upgrade-copy h2{font-size:34px;margin:24px 0 16px}.upgrade-brand{font-size:27px}.upgrade-qr-side{max-width:280px;margin:auto}.upgrade-device{margin:24px 0 16px}}
/* Profiles are playlist entry points; activation belongs to the device. */
.choosing-profile>.app-header,.choosing-profile>.app-dock,.choosing-profile>#main,.choosing-profile>#profile-menu{display:none}
.choosing-profile #toast{display:none}
.profile-launcher{min-height:100vh;display:flex;flex-direction:column;align-items:center;background:radial-gradient(ellipse at 50% 35%,#24242b 0%,#121214 62%);padding:40px var(--gutter) 32px}
.launcher-brand{align-self:flex-start;font-size:36px;letter-spacing:-2px;font-weight:750;line-height:1}.launcher-brand>span{color:#e6e6e9}
.launcher-content{width:100%;max-width:1420px;flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:80px 0 56px}
.launcher-content h1{font-size:clamp(28px,3.1vw,52px);font-weight:500;letter-spacing:-1.5px;margin:0 0 64px}
.playlist-profiles{display:flex;justify-content:center;flex-wrap:wrap;gap:40px 28px;width:100%}
.playlist-profile{display:flex;flex-direction:column;align-items:center;gap:20px;width:160px;padding:8px;border-radius:16px;text-align:center}
.playlist-profile-art{position:relative;display:grid;place-items:center;width:136px;height:136px;border-radius:50%;background:radial-gradient(circle at 30% 20%,hsl(var(--avatar-hue) 30% 70%),hsl(var(--avatar-hue) 24% 34%) 80%);box-shadow:inset 0 1px 1px #ffffff38,0 8px 28px #0002;overflow:hidden}

.avatar-initial{font-weight:500;line-height:1;font-size:inherit;color:#ffffffeb;letter-spacing:-1px}
.playlist-profile-art .avatar-initial{font-size:60px;text-shadow:0 3px 15px #0002}
.playlist-profile strong{font-size:15px;font-weight:450;line-height:1.4;color:#b4b4bf;max-width:100%;overflow-wrap:anywhere}
.playlist-profile:hover .playlist-profile-art{box-shadow:0 0 0 3px #ffffff90,0 8px 28px #0002}
.playlist-profile:focus-visible{outline:0}
.playlist-profile:focus-visible .playlist-profile-art{outline:3px solid white;outline-offset:7px}
.playlist-profile:focus-visible strong,.playlist-profile:hover strong{color:white}
.add-playlist-profile .playlist-profile-art{background:#ffffff05;box-shadow:none;border:1px solid #ffffff25;color:#9999a7}
.add-playlist-profile .playlist-profile-art:before{display:none}.add-playlist-profile svg{width:40px;height:40px;stroke-width:1}
.launcher-device{display:flex;flex-direction:column;align-items:center;gap:10px;padding:24px 32px 0;min-width:260px;border-top:1px solid #ffffff10;text-align:center}
.launcher-device>span{font-size:11px;color:#9595a0}.launcher-device>strong{font-size:20px;font-family:ui-monospace,SFMono-Regular,monospace;font-weight:500;letter-spacing:1.5px}.launcher-device small{font-size:10px;color:#696974}
#profile-button,.profile-menu-heading>.profile-avatar{background:radial-gradient(circle at 30% 20%,hsl(var(--avatar-hue,30) 30% 70%),hsl(var(--avatar-hue,30) 24% 34%) 80%);font-size:21px}
.profile-menu-heading h2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.profile-menu-heading>div{max-width:175px}.profile-menu-action+.profile-menu-action{padding-top:0}
@media(min-width:1700px){.playlist-profile{width:184px}.playlist-profile-art{width:156px;height:156px}.playlist-profile strong{font-size:18px}.playlist-profiles{gap:40px}.playlist-profile-art .avatar-initial{font-size:68px}}
@media(max-width:700px){.profile-launcher{padding:28px 20px}.launcher-brand{font-size:29px}.launcher-content{padding:60px 0 40px}.launcher-content h1{font-size:28px;max-width:330px;letter-spacing:-.8px;margin-bottom:40px}.playlist-profiles{gap:24px 16px}.playlist-profile{width:128px;gap:16px}.playlist-profile-art{width:104px;height:104px}.playlist-profile-art .avatar-initial{font-size:48px}.playlist-profile strong{font-size:13px}.launcher-device{min-width:230px}}
.launcher-plan-row{display:flex;align-items:center;gap:12px;margin-bottom:14px;color:#9999a5;font-size:11px}
.launcher-plan-row #launcher-upgrade{display:flex;align-items:center;gap:8px;margin-left:12px;padding:8px 0;color:#d8d8df;font-size:11px}.launcher-plan-row svg{width:12px;height:12px}
@media(min-width:701px) and (max-width:1699px){.playlist-profiles{display:grid;grid-template-columns:repeat(auto-fit,160px);gap:32px 24px}.launcher-content{padding:56px 0 40px}.launcher-content h1{margin-bottom:48px}}
.playlist-profile{justify-content:flex-start}
/* Device information is read from the sofa, at the same distance as profile names. */
@media(min-width:701px){
 .launcher-device{gap:12px;padding:24px 40px 0}
 .launcher-device>span,.launcher-plan-row{font-size:20px;color:#b8b8c2;line-height:1.4}
 .launcher-device>strong{font-size:28px;line-height:1.4}
 .launcher-plan-row{gap:16px;margin-bottom:8px}
 .launcher-plan-row .account-plan{font-size:18px;padding:6px 12px;line-height:1.3}
 .launcher-plan-row #launcher-upgrade{font-size:20px;min-height:48px;padding:8px 12px;border-radius:8px;margin-left:8px}
 .launcher-plan-row svg{width:18px;height:18px}
}
@media(min-width:1700px){
 .launcher-device{gap:16px;padding-top:28px}
 .launcher-device>span,.launcher-plan-row,.launcher-plan-row #launcher-upgrade{font-size:21.6px}
 .launcher-device>strong{font-size:28.8px}
 .launcher-plan-row .account-plan{font-size:19.8px}
 .launcher-plan-row #launcher-upgrade{min-height:56px}
 .launcher-plan-row svg{width:22px;height:22px}
 .launcher-device small{font-size:12px}
}

.profile-avatar{position:relative}
.playlist-profile-art .avatar-pattern,.profile-avatar .avatar-pattern{position:absolute;inset:0;display:block;width:100%;height:100%;margin:0;fill:none;stroke:none;opacity:1;pointer-events:none}
.avatar-initial{position:relative;z-index:1}

/* Flat, saturated avatar colors without patterns, gradients or glow. */
.playlist-profile-art,#profile-button,.profile-menu-heading>.profile-avatar{background:var(--avatar-color,#CF44C4);box-shadow:none;border:0}
.playlist-profile-art .avatar-initial{color:#fff;text-shadow:none}
.playlist-profile:hover .playlist-profile-art{box-shadow:none;outline:2px solid #ffffffa6;outline-offset:6px}
.playlist-profile:focus-visible .playlist-profile-art{box-shadow:none;outline:3px solid #fff;outline-offset:7px}
.add-playlist-profile .playlist-profile-art{background:transparent;border:1px solid #ffffff30;box-shadow:none}

/* Original soip+ wordmark, with its native aspect ratio. */
.brand-logo{display:block;width:116px;height:auto;object-fit:contain}
.launcher-brand{align-self:center;line-height:0}
.launcher-brand .brand-logo{width:156px}
.upgrade-brand .brand-logo{width:104px}
@media(min-width:1700px){.app-header .brand-logo{width:138px}.launcher-brand .brand-logo{width:184px}}
@media(max-width:700px){.app-header .brand-logo{width:80px}.launcher-brand .brand-logo{width:138px}}