/* Shared Phantom workspace system. Keep page-specific behaviour in its controller. */
body.session-restoring #auth-shell{display:none!important}
#session-restore-status{position:fixed;inset:0;display:grid;place-items:center;background:#100b1d;color:#fcf8ff;font-size:1.1rem;z-index:10000}
:root{--phantom-surface:#171720;--phantom-raised:#22212f;--phantom-line:#343141;--phantom-muted:#b9b2c9;--phantom-accent:#9656f4;--phantom-radius:12px;--phantom-gap:12px}
#app-shell #main .view-page{padding:0;min-width:0}
#app-shell #main .view-page :is(.page-banner,.phantom-page-banner){margin:0 0 8px;border:0;border-radius:0;height:clamp(115px,10vw,172px);min-height:0;aspect-ratio:auto;overflow:hidden}
#app-shell #main .view-page :is(.page-banner,.phantom-page-banner) picture{display:block;height:100%}
#app-shell #main .view-page :is(.page-banner,.phantom-page-banner) picture img{width:100%;height:100%;object-fit:fill}
#app-shell #main .view-page :is(.brand-panel,.panel,.social-panel,.lab-panel,.account-shell-destination-panel){border:1px solid #ffffff08;border-radius:var(--phantom-radius);background:linear-gradient(125deg,#181820,#13131d);box-shadow:none;min-width:0}
#app-shell #main .view-page :is(button.secondary,.account-shell-destination,.account-shell-action,.admin-shell-destination,.admin-shell-action){background:var(--phantom-raised);border:1px solid var(--phantom-line);border-radius:8px;color:#f6f4ff;min-height:40px}
#app-shell #main .view-page button:is([aria-pressed=true],[aria-current=page]){background:#6939ae;border-color:#a879f8}
#app-shell #main .view-page :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea){box-sizing:border-box;max-width:100%;background:#22212f;border:1px solid #3a3547;border-radius:8px;color:#f6f4ff;font-family:Arial,sans-serif}
#app-shell #main .view-page input:is([type=checkbox],[type=radio]){width:17px;min-width:17px;min-height:17px;height:17px;accent-color:#9656f4;flex:none}
#app-shell #main .view-page :is(.check,label:has(>input[type=checkbox])){display:flex;align-items:center;gap:9px;flex-direction:row;text-align:left}
#app-shell #main .view-page :is(.status,.muted){color:var(--phantom-muted)}
#app-shell #main .view-page :focus-visible,body dialog :focus-visible{outline:2px solid #cbb8ff;outline-offset:3px}
#app-shell #main .view-page :is(.account-shell-nav,.admin-shell-nav){border:0;background:#171720;padding:8px;gap:8px;border-radius:10px}
#app-shell #main .view-page :is(.account-shell-destination-panel,.settings-account-card){padding:20px;margin-bottom:12px}
#app-shell #main #view-settings .settings-account-card{background:#1b1a25;border:1px solid #343141;border-radius:10px}
#app-shell #main #view-settings .settings-account-card input:not([type=checkbox]){display:block;width:min(100%,420px)}
#app-shell #main :is(.library-controls-section,.library-gallery-section){border:0;background:none;padding:12px 0;margin:0}
#app-shell #main :is(.library-toolbar,.explore-toolbar){gap:10px;flex-wrap:wrap}
#app-shell #main :is(.library-grid,.gallery){gap:16px}
#app-shell #main :is(.gallery-card,.library-card,.explore-card){border:1px solid #ffffff0c;border-radius:12px;background:#171720;overflow:hidden;box-shadow:none}
#app-shell #main :is(.gallery-card,.library-card,.explore-card):hover{border-color:#65507f;background:#1e1c29}
#app-shell #main .social-dashboard{padding:0;gap:12px}
#app-shell #main .social-panel{padding:20px;margin:0}
#app-shell #main .social-grid{gap:12px}
#app-shell #main .social-metric{border:0;background:#22212f;border-radius:9px;padding:16px}
#app-shell #main .social-empty{padding:48px 24px;max-width:680px}
#app-shell #main :is(.qr-workspace,.contact-layout,.profile-layout){gap:12px}
#app-shell #main .qr-workspace>.brand-panel{padding:20px}
#app-shell #main .qr-output{display:flex;flex-direction:column;align-items:center;justify-content:flex-start}
#app-shell #main :is(.store-plan,.store-topup,.upgrade-membership-summary){border-color:#343141;border-radius:12px;background:#191822;padding:20px}
#app-shell #main table{border-collapse:collapse;width:100%}
#app-shell #main :is(th,td){border-color:#343141;padding:12px;text-align:left}
#app-shell #main th{background:#211e2c;color:#d7cee6}
#app-shell #main #view-lab-song .song-studio-workspace{display:grid;grid-template-columns:minmax(175px,.85fr) minmax(360px,2.5fr) minmax(235px,1.08fr);gap:12px;border:0;background:none;min-height:0;padding:0;align-items:start}
#app-shell #main #view-lab-song :is(.song-creations,.song-composer,.song-options){background:linear-gradient(125deg,#181820,#13131d);border:1px solid #ffffff08;border-radius:12px;padding:16px;min-width:0}
#app-shell #main #view-lab-song :is(.song-reference,.song-player){border:1px solid #343141;border-radius:10px;background:#201d2b}
#app-shell #main #view-lab-song .song-modebar{gap:4px;padding:0;border:0;box-shadow:none;border-radius:0;background:transparent}
#app-shell #main #view-lab-song .song-modebar button{border:0;border-radius:7px}
#app-shell #main #view-lab-song .song-track{border:1px solid transparent;border-radius:10px;padding:12px 8px;background:#211e2c;margin-bottom:8px}
#app-shell #main #view-lab-song .song-track.active{border-color:#a879f8}
#app-shell #main #view-lab-studio .studio-workspace{border:0;background:transparent;border-radius:12px}
#app-shell #main #view-lab-studio :is(.studio-toolbar,.studio-bin,.studio-inspector,.studio-viewer,.studio-timeline,.studio-dock>*){background:#171720;border:1px solid #ffffff08;border-radius:10px}
#app-shell #main #view-lab-studio .studio-columns{gap:12px;margin:12px 0}
#app-shell #main #view-lab-studio .studio-dock{gap:12px;margin-top:12px}
#app-shell #main #view-lab-studio :is(button,select,input:not([type=range]):not([type=checkbox])){border-color:#343141;border-radius:7px}
#app-shell #main #view-lab-studio .studio-controls{gap:8px;padding:10px}
#app-shell #main #view-lab-studio .studio-controls :is(button,label,.studio-clock){font-size:12px}
#app-shell #main .phantom-popup-trigger{display:block;width:100%;text-align:left;background:#22212f;color:#e9e1f5;border:1px solid #343141;border-radius:8px;min-height:44px;padding:10px 14px;margin:8px 0;cursor:pointer}
#app-shell #main .phantom-popup-source{border:0;padding:0;margin:0;background:none}
#app-shell #main .phantom-popup-source>summary{display:none!important}
body dialog:not([open]){display:none!important}
body dialog[open]{box-sizing:border-box;border:1px solid #3d354b;border-radius:16px;background:#171720;color:#f6f4ff;box-shadow:0 24px 90px #0009;max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);overflow:auto;padding:24px}
body dialog::backdrop{background:#050509bd;backdrop-filter:blur(5px)}
body dialog :is(h2,h3){color:#f6f4ff;margin-top:0}
body dialog button{font:inherit;border:1px solid #51435f;border-radius:8px;background:#22212f;color:#f6f4ff;min-height:40px;padding:8px 14px;cursor:pointer}
body dialog button.primary{background:#7c3aed;border-color:#a879f8}
body dialog :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea){box-sizing:border-box;max-width:100%;background:#22212f;border:1px solid #51435f;border-radius:8px;color:#f6f4ff;padding:10px;font:inherit}
body dialog a{color:#cbb8ff}
body dialog.phantom-options-popup{width:min(640px,calc(100vw - 32px))}
.phantom-popup-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:20px}
.phantom-popup-heading h2{margin:0;font-size:22px}
.phantom-popup-body{display:grid;gap:12px}
.phantom-popup-body>label{display:block}
.phantom-inspiration{padding:16px;background:#171720;border-radius:12px}
.phantom-inspiration h3{margin:0 0 12px;font-size:16px}
.phantom-inspiration-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.phantom-inspiration-grid button{border:1px solid transparent;background:#24202f;color:#f6f4ff;border-radius:9px;padding:8px;text-align:left;cursor:pointer;min-width:0}
.phantom-inspiration-grid img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:6px}
.phantom-inspiration-grid span{display:block;padding:6px 0 0;font-size:13px}
#app-shell #tab-lab-studio .nav-icon img{position:static;width:40px;height:40px;object-fit:contain}
#app-shell #main :is(.actions-menu-popup,.creations-context-menu){background:#211c2f;border:1px solid #51435f;border-radius:10px;box-shadow:0 12px 40px #0008;padding:6px}
@media(max-width:1100px){#app-shell #main #view-lab-song .song-studio-workspace{grid-template-columns:210px minmax(260px,1fr) 220px;gap:8px}}
@media(max-width:760px){#app-shell #main .view-page :is(.page-banner,.phantom-page-banner){height:110px}#app-shell #main #view-lab-song .song-studio-workspace{display:flex;flex-direction:column}#app-shell #main #view-lab-song .song-studio-workspace>*{width:100%}#app-shell #main :is(.social-grid,.qr-workspace,.contact-layout){grid-template-columns:1fr}body dialog[open]{padding:16px}.phantom-inspiration-grid{gap:6px}.phantom-inspiration-grid span{font-size:12px}}
/* Public reading and authentication surfaces use the same quiet surfaces. */
.legal-page{max-width:960px;margin:32px auto;padding:28px;border:1px solid #343141;border-radius:16px;background:#171720;color:#f6f4ff;font:16px/1.7 Arial,sans-serif}
.legal-page a{color:#cbb8ff}.legal-page :is(h1,h2,h3){line-height:1.3}.legal-page h2{margin-top:32px}
#auth-shell :is(input,button){border-radius:8px}#auth-shell input{border-color:#51435f}
@media(max-width:760px){.legal-page{margin:12px;padding:20px}}

#app-shell #main #view-video #video-workspace{display:grid;grid-template-columns:minmax(175px,.85fr) minmax(360px,2.5fr) minmax(235px,1.08fr);gap:12px;padding:0;align-items:stretch;border:0;background:none}
#app-shell #main #view-video #video-workspace>.pictures-centre{display:flex;flex-direction:column;gap:12px;background:none;border:0;padding:0}
#app-shell #main #view-video #video-workspace>:is(.pictures-left,.pictures-right){contain:none;height:auto;overflow:visible;padding:16px}
#app-shell #main #view-video .creations-list{max-height:660px;min-height:100px!important;flex:none!important}
#app-shell #main #view-video #video-mode-row{display:flex!important;gap:4px;background:#100e18;padding:4px;border-radius:9px;margin-bottom:12px;width:auto}
#app-shell #main #view-video #video-mode-row .mode-btn{border:0;border-radius:7px;flex:1;font-size:14px}
#app-shell #main #view-video #video-composer{display:flex;flex-wrap:wrap;background:#171720;border:1px solid #ffffff08;border-radius:10px;padding:16px;gap:10px}
#app-shell #main #view-video #video-composer textarea{width:100%;flex:1 1 100%;min-height:90px;border:0;background:transparent;padding:0}
#app-shell #main #view-video #video-canvas{padding:0;border-radius:10px;overflow:hidden}
#app-shell #main #view-video #video-canvas :is(img,video){object-fit:contain;width:100%;height:100%}
#app-shell #main #view-video #btn-video-cancel:disabled,#app-shell #main #view-video #btn-video-cancel[hidden]{display:none!important}
#app-shell #main #view-video .video-action-stack{display:flex;flex-direction:row;margin-left:auto}
#app-shell #main #view-video .ask-composer-tools{margin-left:auto;align-items:center}
#app-shell #main #view-qr .qr-workspace{border:0;background:none}
#app-shell #main #view-qr .qr-workspace>.brand-panel{border:1px solid #ffffff08}
#app-shell #main #view-video .creation-thumb{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#22212f}
@media(max-width:1100px){#app-shell #main #view-video #video-workspace{grid-template-columns:210px minmax(260px,1fr) 220px;gap:8px}}
@media(max-width:760px){#app-shell #main #view-video #video-workspace{display:flex;flex-direction:column}#app-shell #main #view-video #video-workspace>*{width:100%;box-sizing:border-box}.phantom-inspiration{padding:12px}}

#app-shell #main .view-page :is(.page-banner,.phantom-page-banner){container-type:size}
#app-shell #main .view-page :is(.page-banner,.phantom-page-banner)::before{top:2cqh;width:132cqh;height:44cqh;max-width:46cqw;left:50%;transform:translateX(-50%)}
#app-shell #main .view-page :is(.page-banner,.phantom-page-banner)::after{top:46cqh;width:132cqh;height:44cqh;max-width:46cqw;left:50%;transform:translateX(-50%)}
#app-shell #main #view-help .help-workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
#app-shell #main #view-help .help-workspace>.brand-panel{padding:24px}
#app-shell #main #view-help :is(input,textarea,select){width:100%;margin:8px 0 16px}
#app-shell #main #view-help label{display:block;color:#c7c1d5;font-size:14px}
#app-shell #main :is(.admin-card,.admin-metric-card,.admin-workspace-card,.admin-costs-card,.users-invites-card,.account-grant-card,.admin-wallet-card){border:1px solid #343141;border-radius:10px;background:#1c1926;padding:16px}
#app-shell #main :is(.profile-card,.profile-header,.profile-summary){border-color:#343141;background:#171720;border-radius:12px}
#landing-main .landing-panel{border:1px solid #ffffff16;border-radius:20px;background:#11101bcc;box-shadow:0 24px 80px #0008;padding:clamp(24px,4vw,48px);backdrop-filter:blur(16px)}
#landing-main .public-lead{line-height:1.65;color:#d6cde6}#landing-main :is(a,button){border-radius:9px}
@media(max-width:760px){#app-shell #main #view-help .help-workspace{grid-template-columns:1fr}}

/* Geometry is invariant across routes, overriding retired full-frame layouts. */
#app-shell main#main{padding:8px 12px!important;box-sizing:border-box}
#app-shell #main [data-view].view-page{margin:0!important;padding:0!important;width:100%;box-sizing:border-box}
#app-shell #main [data-view].view-page :is(.page-banner,.phantom-page-banner){height:clamp(115px,10vw,172px)!important;min-height:0!important;max-height:none!important;margin:0 0 8px!important;border:0!important;aspect-ratio:auto!important;width:100%!important;border-radius:0!important}
#app-shell #main [data-view].view-page :is(.page-banner,.phantom-page-banner)::before{top:-14cqh!important;width:195cqh!important;height:65cqh!important;max-width:48cqw!important}
#app-shell #main [data-view].view-page :is(.page-banner,.phantom-page-banner)::after{top:29cqh!important;width:195cqh!important;height:65cqh!important;max-width:48cqw!important}
#app-shell #main [data-view].view-page :is(.page-banner,.phantom-page-banner)>img{width:100%;height:100%;object-fit:fill}
#app-shell #tab-lab-studio .nav-icon{display:inline-flex;width:40px;min-width:40px;height:40px;overflow:visible}
#app-shell #tab-lab-studio .nav-icon img{width:40px!important;height:40px!important;max-width:40px!important;position:static!important;object-fit:contain!important}
#app-shell #main #view-projects :is(.library-controls-section,.library-gallery-section){padding:16px;border:0!important;background:#171720!important;margin:0 0 12px}
#app-shell #main #view-projects #library-items{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;justify-content:start;justify-items:stretch}
#app-shell #main #view-projects .library-card{width:auto!important;max-width:none!important;border:1px solid #343141!important;background:#201d2b!important;border-radius:10px}
#app-shell #main #view-projects .library-card.selected{border-color:#a879f8!important}
#app-shell #main #view-projects .library-card :is(img,video){aspect-ratio:16/9;object-fit:cover}
#app-shell #main #view-upgrade :is(.store-plan,.store-topup,.upgrade-membership-summary){box-shadow:none!important;border-radius:12px}
#app-shell #main #view-upgrade :is(h2,h3){font-family:Arial,sans-serif}
body dialog :is(.social-panel,.brand-panel,.admin-card){border:1px solid #343141;background:#201d2b;border-radius:10px;padding:16px;margin:12px 0}
#app-shell #main #view-lab-song .song-option-group{border-color:#343141}
#app-shell #main #view-lab-song :is(button,.song-track){border-color:#343141}
#app-shell #main #view-video #btn-video-creations-select-all{border:0;background:none;color:#cbb8ff;min-width:0;width:auto;padding:4px;flex:0 0 auto}
#app-shell #main #view-video .creations-selection-count:empty{display:none}
#app-shell #main #view-video #video-canvas-art{z-index:1}
@media(max-width:760px){#app-shell main#main{padding:8px!important}#app-shell #main [data-view].view-page :is(.page-banner,.phantom-page-banner){height:110px!important}#app-shell #main #view-projects #library-items{grid-template-columns:repeat(2,minmax(0,1fr))}}

#app-shell #main a{color:#cbb8ff}
body dialog[open]{background:#171720!important;border:1px solid #3d354b!important;border-radius:16px!important;color:#f6f4ff!important}
#app-shell #main dialog[open] :is(h2,h3){color:#f6f4ff}
#app-shell #main #view-upgrade :is(h4,.store-price,.store-price-unit){font-family:Arial,sans-serif}
#app-shell #main #view-upgrade .upgrade-page{padding:16px 0;background:none}
#app-shell #main #view-contact :is(.page-banner,.phantom-page-banner) picture{width:100%;height:100%}
#app-shell #main .view-page :is(.page-banner,.phantom-page-banner) picture img{object-fit:fill!important}

#app-shell #main #view-video .modern-styles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
#app-shell #main #view-video .modern-styles button{padding:0;border:0;background:none;min-width:0;font-size:12px}
#app-shell #main #view-video .modern-styles .phantom-style-thumb{display:block;width:100%;aspect-ratio:4/3;border-radius:8px;margin-bottom:6px}
#app-shell #main #view-video .modern-styles button[aria-pressed="true"] .phantom-style-thumb{outline:3px solid #a879f8}
#app-shell #main #view-video .modern-style-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
#app-shell #main #view-video .modern-style-heading button{background:none;border:0;color:#cbb8ff;padding:4px}
#app-shell #main #view-video .modern-style-current{font-size:12px;color:#b9b2c9;margin-top:10px}
#app-shell #main #view-lab-song .song-creations .song-select-all{border:0;background:none}

#app-shell #main #view-projects .library-thumb{aspect-ratio:16/9!important;height:auto!important}
#app-shell #main #view-projects .library-thumb :is(img,video){width:100%;height:100%;object-fit:cover}
#app-shell #main #view-projects .library-card{position:relative}
#app-shell #main .library-item-menu{position:absolute;right:8px;top:8px;z-index:5;border:0;border-radius:50%;width:32px;height:32px;padding:0;background:#15121fc9;color:white}

/* Stable dialog headers do not move when asynchronous content arrives. */
body dialog[open]{top:0!important;bottom:auto!important;margin:6dvh auto 0!important;max-height:88dvh!important}
body #admin-shell-dialog .admin-shell-dialog-header{background:#201d2b;border-bottom:1px solid #343141}
body #admin-shell-dialog .admin-card{border:1px solid #343141!important;background:#201d2b!important;border-radius:10px}
body #admin-shell-dialog{padding:0!important}

body dialog.phantom-media-preview{width:min(1060px,calc(100vw - 32px))}
.phantom-media-preview h2{font-size:18px;line-height:1.4;max-width:calc(100% - 90px);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.phantom-media-preview>img{display:block;width:100%;max-height:65dvh;object-fit:contain;border-radius:10px;background:#09090f}
.phantom-media-preview>audio{width:100%}
.phantom-preview-caption{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.5;margin:16px 0 0;max-height:24dvh;overflow:auto}
#app-shell #main .view-page h3{color:#f6f4ff}

/* A single page scroller keeps Pictures aligned with every other banner. */
#app-shell main#main:has(>#view-photos:not(.hidden)){overflow-y:auto!important}
#app-shell #main #view-photos.view-page{overflow:visible!important;height:auto!important;max-height:none!important;flex:none!important}

#app-shell #main #view-upgrade .store-plans-section .upgrade-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
#app-shell #main #view-upgrade .store-topups-section .upgrade-card-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media(max-width:900px){#app-shell #main #view-upgrade .store-plans-section .upgrade-card-grid{grid-template-columns:1fr}#app-shell #main #view-upgrade .store-topups-section .upgrade-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

#app-shell #main #explore-controls>summary{display:none}

#app-shell,body dialog{color-scheme:dark}
#app-shell *,body dialog *{scrollbar-width:thin;scrollbar-color:#51435f #13131d}
#app-shell #main #profile-stats-list>li{border:1px solid #343141!important;background:#22212f;border-radius:9px;padding:12px}

/* Keep matching creation headers on one baseline at every workspace width. */
#app-shell #main .creations-heading-row{flex-wrap:nowrap!important;align-items:center;gap:8px}
#app-shell #main .creations-heading-row h3{flex:1 1 auto!important;width:auto!important;min-width:0;margin:0}
#app-shell #main .creations-heading-row button{flex:0 0 auto!important;width:auto!important;white-space:nowrap}

@media(min-width:951px) and (max-width:1100px){#app-shell #main #view-photos .pictures-workspace{grid-template-columns:210px minmax(260px,1fr) 220px;gap:8px;padding-left:0;padding-right:0}}
@media(min-width:761px) and (max-width:950px){
#app-shell #main #view-photos .pictures-workspace,#app-shell #main #view-video #video-workspace,#app-shell #main #view-lab-song .song-studio-workspace{display:flex;flex-direction:column}
#app-shell #main :is(#view-photos,#view-video) :is(.pictures-left,.pictures-right),#app-shell #main #view-lab-song .song-studio-workspace>*{position:static!important;transform:none!important;width:100%!important;max-height:none;visibility:visible!important}
#app-shell #main :is(#view-photos,#view-video) .pictures-centre{order:0;width:100%}
#app-shell #main :is(#view-photos,#view-video) .pictures-left{order:1}
#app-shell #main :is(#view-photos,#view-video) .pictures-right{order:2}
#app-shell #main :is(#view-photos,#view-video) .creations-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-height:none}
}

body dialog input:is([type=checkbox],[type=radio]){width:17px!important;min-width:17px;max-width:17px;min-height:17px;height:17px;flex:none;accent-color:#9656f4;margin:0}
body dialog label:has(>input:is([type=checkbox],[type=radio])){display:flex!important;align-items:center;gap:9px;flex-direction:row;text-align:left}

/* Inspiration leads the workspace; history exposes another creation beside it. */
@media(min-width:951px){#app-shell #main :is(#view-photos,#view-video) .creations-list{max-height:760px!important}}

/* Let the picture canvas and composer set the desktop row height. History
   fills that row without its thumbnail count stretching the whole page. */
@media(min-width:951px){
 #app-shell #main #view-photos #pictures-history-drawer{contain:size;min-height:400px;display:flex;flex-direction:column}
 #app-shell #main #view-photos #pictures-history-fold,
 #app-shell #main #view-photos #pictures-history-fold[open]::details-content,
 #app-shell #main #view-photos #pictures-history-fold .pictures-fold-body,
 #app-shell #main #view-photos .creations-block{display:flex;flex-direction:column;flex:1 1 0!important;min-height:0;overflow:hidden!important}
 #app-shell #main #view-photos .creations-list{flex:1 1 0!important;min-height:0!important;max-height:none!important;overflow-y:auto}
 #app-shell #main #view-photos #creations-actions{flex:0 0 auto}
}

/* Phantom dialogs: illustrated violet header, quiet body and clear controls. */
body dialog[open]{background:radial-gradient(ellipse at 100% 0,#39204d66,transparent 65%),linear-gradient(145deg,#1b1727,#100e19)!important;border-color:#76529e88!important;box-shadow:0 24px 90px #000b,0 0 36px #873bef18!important}
body dialog::backdrop{background:#080411bf!important;backdrop-filter:blur(7px)!important}
body dialog :is(.phantom-style-heading,.phantom-popup-heading){box-sizing:border-box;min-height:100px;padding:20px;margin:-24px -24px 24px!important;border-bottom:1px solid #a56ae633;border-radius:15px 15px 0 0;background:linear-gradient(90deg,#21162eed 0%,#21162ed9 58%,#21162e55 100%),url('assets/compact-phantom-pictures-fullbleed-v1.svg') center/cover;gap:16px}
body dialog :is(.phantom-style-heading,.phantom-popup-heading) h2{color:#fcf8ff!important;text-shadow:0 2px 14px #000a;font-size:22px!important;letter-spacing:-.3px}
body dialog :is(.phantom-style-heading,.phantom-popup-heading) button{background:linear-gradient(135deg,#8c48e6,#6330ad)!important;border:1px solid #c594ff66!important;box-shadow:0 3px 14px #782de52e;color:#fff!important;flex:none}
body dialog :is(select,textarea,input:not([type=checkbox]):not([type=radio]):not([type=range])){background:#231b31!important;border-color:#6c4b854f!important}
body dialog :is(select,textarea,input,button):focus-visible{outline:2px solid #c99aff!important;outline-offset:3px}
body dialog label{color:#ded1ef}
@media(max-width:760px){body dialog :is(.phantom-style-heading,.phantom-popup-heading){margin:-16px -16px 20px!important;padding:16px;min-height:88px}}

/* One Pictures settings window, with stable left navigation and scrollable panels. */
body #app-shell #main dialog.picture-settings-dialog{width:min(1000px,calc(100vw - 32px))!important;height:min(740px,88dvh)!important;padding:0!important;overflow:hidden!important}
body dialog.picture-settings-dialog>.phantom-style-heading{margin:0!important;border-radius:15px 15px 0 0;min-height:100px;height:100px;padding:24px}
.picture-settings-body{display:grid;grid-template-columns:170px minmax(0,1fr);height:calc(100% - 100px);min-height:0}
.picture-settings-nav{padding:18px 12px;background:#150f21aa;border-right:1px solid #a56ae622;display:flex;flex-direction:column;gap:8px}
body dialog.picture-settings-dialog .picture-settings-nav button{width:100%;text-align:left;background:transparent;border-color:transparent;padding:12px;color:#d8c9e9}
body dialog.picture-settings-dialog .picture-settings-nav button[aria-selected=true]{background:linear-gradient(110deg,#7137b8,#472368);border-color:#b779ee66;color:#fff}
.picture-settings-panels{min-height:0;min-width:0;overflow:hidden}
.picture-settings-panel{height:100%;box-sizing:border-box;overflow:auto;padding:24px;scrollbar-width:thin;scrollbar-color:#785093 #171020}
.picture-settings-panel[hidden]{display:none!important}
body dialog.picture-settings-dialog .picture-settings-panel>h3{font-size:18px;margin:0 0 20px}
body dialog.picture-settings-dialog .phantom-style-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:max-content;align-content:start;gap:14px;max-height:none;overflow:visible;padding:3px}
body dialog.picture-settings-dialog .phantom-style-grid button{height:auto;min-height:0;display:flex;flex-direction:column;gap:8px;padding:7px;overflow:hidden}
body dialog.picture-settings-dialog .phantom-style-thumb{width:100%;flex:none;aspect-ratio:16/10}
body dialog.picture-settings-dialog .modern-reference{margin-top:0;border-top:0;padding-top:0}
body dialog.picture-settings-dialog .modern-reference>div:first-child{display:none}
@media(max-width:600px){.picture-settings-body{grid-template-columns:112px minmax(0,1fr)}.picture-settings-nav{padding:12px 6px}.picture-settings-panel{padding:16px 12px}body dialog.picture-settings-dialog .picture-settings-nav button{font-size:13px;padding:10px 8px}body dialog.picture-settings-dialog .phantom-style-grid{grid-template-columns:1fr}body dialog.picture-settings-dialog>.phantom-style-heading{padding:16px}}

/* Matching shortcuts and undistorted square atlas tiles. */
#app-shell #main :is(#view-photos,#view-video) .modern-style-heading button{appearance:none;border:0!important;background:none!important;box-shadow:none!important;color:#cbb8ff!important;padding:4px!important;font:inherit;min-height:30px;width:auto;outline:none}
#app-shell #main :is(#view-photos,#view-video) .modern-style-heading button:focus-visible{outline:2px solid #bd91ff;outline-offset:3px;border-radius:5px}
body dialog.picture-settings-dialog .phantom-style-thumb{aspect-ratio:1!important;height:auto!important}
#app-shell #main :is(#view-photos,#view-video) .modern-styles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 8px}
#app-shell #main :is(#view-photos,#view-video) .modern-styles .phantom-style-thumb{aspect-ratio:1!important;height:auto!important}
.picture-settings-panel>label{display:block;margin:22px 0 8px}
body dialog.phantom-image-editor{width:min(1180px,calc(100vw - 32px));padding:0!important;max-height:92dvh;overflow:hidden}
body dialog.phantom-image-editor>.phantom-style-heading{margin:0!important;padding:20px;display:flex;align-items:center;justify-content:space-between}
.editor-layout{display:grid;grid-template-columns:minmax(0,1fr) 290px;min-height:460px;max-height:calc(92dvh - 110px)}
.editor-work{min-width:0;display:flex;flex-direction:column;padding:16px;gap:14px;background:#0d0a14}
.editor-toolbar{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.editor-toolbar button,.editor-toolbar select{padding:8px 10px;min-height:36px}
.editor-toolbar button[aria-pressed=true]{background:#733eb7;border-color:#bf8fff}
.editor-scroll{overflow:auto;max-height:65dvh;min-height:200px}
.editor-stage{position:relative;width:100%;line-height:0}
.editor-stage img{width:100%;height:auto;display:block;object-fit:contain}
.editor-stage canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.45;touch-action:none;cursor:crosshair}
.editor-tools{padding:22px;overflow:auto;display:flex;flex-direction:column;gap:14px}
.editor-tools h3,.editor-tools p{margin:0}.editor-hint{font-size:13px;color:#bcb1cf;line-height:1.5}
.editor-tools textarea,.editor-tools select{width:100%;box-sizing:border-box}
.editor-tools>button{background:#793acc;color:white}.editor-tools label{font-size:14px}
.editor-library-grid{padding:24px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;max-height:65dvh;overflow:auto}
.editor-library-grid button{min-width:0;overflow:hidden}.editor-library-grid img{width:100%;aspect-ratio:16/9;object-fit:cover}.editor-library-grid span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:700px){.editor-layout{grid-template-columns:1fr;overflow:auto}.editor-scroll{max-height:40dvh}.editor-tools{overflow:visible}.editor-library-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
body dialog:is(.picture-settings-dialog,.phantom-image-editor)>.phantom-style-heading{background:#140d20 url('assets/pictures-samples/banner-strip.svg') center/cover no-repeat!important}
body dialog.phantom-image-editor>.phantom-style-heading{background-image:url('/app/assets/pictures-samples/banner-strip.svg')!important}
.editor-tool-panel{display:flex;flex-direction:column;gap:14px}.editor-tool-panel[hidden]{display:none!important}.editor-tool-panel input[type=range]{display:block;width:100%}
body dialog:is(.picture-settings-dialog,.phantom-image-editor)>.phantom-style-heading{background-position:center!important}
#app-shell #main :is(#view-photos,#view-video) .modern-styles img{aspect-ratio:1!important;height:auto!important;object-fit:cover}
.editor-toolbar select{width:auto!important;min-width:100px}.editor-stage canvas[hidden]{display:none!important}
@media(max-width:600px){body dialog:is(.picture-settings-dialog,.phantom-image-editor)>.phantom-style-heading{background-position:center!important}}
.editor-error{position:absolute;bottom:0;left:0;right:0;margin:0;padding:14px;background:#451f3f;color:#fff;z-index:5}

/* Navigation artwork is freestanding: selection belongs to the row, never the mascot. */
#app-shell #app-sidebar .nav-icon.nav-icon-img,
#app-shell #app-sidebar .nav-icon.nav-icon-img > img{border:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important}
#app-shell #tab-lab-studio .nav-icon{flex:0 0 40px;align-items:center;justify-content:center}
#app-shell #tab-lab-studio .nav-icon img{min-width:40px!important;flex:0 0 40px;object-fit:contain!important}
/* Detailed banner artwork retains its proportions at every viewport. */
#app-shell #main .view-page .phantom-rich-banner picture img,
#app-shell #main .view-page .phantom-rich-banner>img{object-fit:cover!important;object-position:center!important}

/* The same action and text hierarchy also applies to music and legacy dialogs. */
#app-shell :is(button,input,select,textarea),body dialog{font-family:Arial,sans-serif}
#app-shell #main #view-lab-song .song-creations-heading>button{border:0;background:none;box-shadow:none;padding:4px;color:#cbb8ff;min-width:0;min-height:32px;font-size:14px}
#app-shell #main #view-lab-song .song-creations-heading>button:disabled{opacity:.5}
#app-shell #main #view-lab-song :is(.song-actions[hidden],small[hidden]){display:none!important}
body dialog>h2:first-child{padding:24px 20px;min-height:54px;margin:-24px -24px 20px;background:#140d20 url('assets/pictures-samples/banner-strip.svg') center/cover no-repeat;border-bottom:1px solid #a56ae633;border-radius:15px 15px 0 0}
@media(max-width:760px){body dialog>h2:first-child{margin:-16px -16px 16px;padding:20px 16px}}

#app-shell #main #view-promote .social-empty{width:100%;max-width:none;box-sizing:border-box;text-align:left;padding:24px;margin:0;background:var(--phantom-surface);border-radius:12px}
#app-shell #main #view-promote .social-empty h2{margin:0 0 12px}
#app-shell #main #view-promote .social-empty p{max-width:760px;margin:0;line-height:1.6}
#app-shell #main #view-promote .social-toolbar{margin-bottom:0}
body dialog>header:not(.phantom-style-heading):not(.phantom-popup-heading){display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px;min-height:60px;margin:-24px -24px 20px;background:#140d20 url('assets/pictures-samples/banner-strip.svg') center/cover no-repeat;border-bottom:1px solid #a56ae633}
body dialog>header:not(.phantom-style-heading):not(.phantom-popup-heading)>button{background:#7436bf;border-color:#a879f8}
#app-shell #main dialog .settings-account-card{padding:0;margin:0;border:0;background:none}
#app-shell #main dialog .settings-account-card label{display:block;margin:12px 0 6px}
#app-shell #main dialog .settings-account-card label.check{display:flex}
#app-shell #main dialog .settings-account-card input:not([type=checkbox]){width:100%;max-width:none}
@media(max-width:760px){body dialog>header:not(.phantom-style-heading):not(.phantom-popup-heading){margin:-16px -16px 16px;padding:16px}}

#app-shell #main #view-admin :is(.admin-shell-destination-panel,.admin-shell-diagnostics){border:1px solid #ffffff08!important;background:var(--phantom-surface)!important;border-radius:12px;padding:20px}
#app-shell #main #view-admin .admin-card{border:1px solid var(--phantom-line)!important;background:var(--phantom-raised)!important;box-shadow:none!important}
#app-shell #main #view-admin .admin-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
#app-shell #main #view-settings dialog .settings-account-card{padding:0!important;margin:0!important;border:0!important;background:transparent!important}
#app-shell #main #view-settings dialog .settings-account-card input:not([type=checkbox]){width:100%;max-width:none}
body dialog .phantom-popup-heading{background:#140d20 url('assets/pictures-samples/banner-strip.svg') center/cover no-repeat!important}
body dialog .phantom-popup-heading :is(h2,h3){font-size:22px;margin:0}

#app-shell input.sr-only{width:1px!important;min-width:0!important;max-width:1px!important;height:1px!important;padding:0!important;border:0!important}

#app-shell #main #btn-library-select-all{border:0;background:none;box-shadow:none;color:#cbb8ff;padding:4px;min-height:32px}
#library-selection-count:empty{display:none}

/* Pictures / Video composer parity: one prompt, modes left, Create right. */
#app-shell #main #view-video #video-composer{position:relative;display:block;padding:20px;border:0}
#app-shell #main #view-video #video-composer textarea{display:block;width:100%;min-height:108px;padding-right:70px;box-sizing:border-box;resize:vertical}
#app-shell #main #view-video #video-composer .ask-composer-tools{display:flex;justify-content:space-between;align-items:center;width:100%;gap:12px;margin-top:10px}
#app-shell #main #view-video #video-mode-row{display:flex!important;width:auto;margin:0;padding:4px;background:#100e18;flex:none}
#app-shell #main #view-video #video-mode-row .mode-stack{display:flex;gap:4px;margin:0}
#app-shell #main #view-video #video-mode-row .mode-btn{padding:10px 18px;min-height:40px;width:auto;white-space:nowrap;border:0;border-radius:7px;background:#20202c;font-size:14px}
#app-shell #main #view-video #video-mode-row .mode-btn.active{background:#6e36bc;color:#fff}
#app-shell #main #view-video #btn-video-create{width:auto;min-width:150px;height:40px;min-height:40px;box-sizing:border-box;padding:10px 18px;font-size:15px;border:0;border-radius:8px;background:linear-gradient(110deg,#9753f5,#8544e8);opacity:1;box-shadow:none}
#app-shell #main #view-video .modern-styles{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:auto;max-height:none;overflow:visible}
#app-shell #main #view-video .modern-styles button{display:block!important}
#app-shell #main #view-video .modern-advanced{border:0!important;border-top:1px solid #34303d!important;box-shadow:none}
.editor-reference-preview img{max-width:100%;max-height:240px;object-fit:contain;border-radius:10px}
body dialog:is(.picture-settings-dialog,.phantom-image-editor)>.phantom-style-heading{min-height:124px;height:124px;background-color:#160f26!important;background-size:cover!important;background-position:center!important;position:relative}
body dialog:is(.picture-settings-dialog,.phantom-image-editor)>.phantom-style-heading h2{background:#130d20bc;border-radius:8px;padding:8px 12px;margin-left:-12px}
@media(max-width:760px){#app-shell #main #view-video #video-composer .ask-composer-tools{flex-wrap:wrap}#app-shell #main #view-video #video-mode-row .mode-btn{padding:10px 12px}#app-shell #main #view-video #video-composer .video-action-stack{margin-left:auto}}

.video-inspiration-card{min-width:0;background:#22212f;border:1px solid #514065;border-radius:10px;padding:8px;overflow:hidden}
.video-inspiration-card video{display:block;width:100%;aspect-ratio:16/9;object-fit:contain;background:#100e18;border-radius:7px}
#app-shell #main .video-inspiration-card button{display:block;width:100%;text-align:left;padding:8px 2px 2px;border:0;background:none;color:#f6f4ff}
body dialog.video-settings-dialog>.phantom-style-heading{background-image:url('assets/banner-video-unique-v2.svg')!important;background-size:cover!important}

#app-shell #main #view-video #video-mode-row .mode-stack{flex-direction:row!important;width:auto;align-items:stretch}
#app-shell #main #view-video #video-composer .ask-composer-tools{flex-wrap:wrap}
body dialog.video-settings-dialog>.phantom-style-heading{background-size:cover!important;background-repeat:no-repeat!important}
@media(max-width:600px){body dialog.video-settings-dialog>.phantom-style-heading{background-image:url('assets/banner-video-unique-mobile-v2.svg')!important;background-size:cover!important}}

/* Settings banners retain visible artwork across the full dialog width. */
body dialog:is(.picture-settings-dialog,.phantom-image-editor)>.phantom-style-heading{background-image:url('assets/pictures-samples/banner-strip.svg')!important;background-size:cover!important;background-repeat:no-repeat!important;background-position:center!important}
body dialog.video-settings-dialog>.phantom-style-heading{background-image:url('assets/banner-video-unique-v2.svg')!important}
body dialog:is(.picture-settings-dialog,.phantom-image-editor)>.phantom-style-heading h2{margin-left:clamp(100px,14vw,210px)!important;white-space:nowrap}
@media(max-width:600px){body dialog:is(.picture-settings-dialog,.phantom-image-editor)>.phantom-style-heading{background-size:cover!important}body dialog:is(.picture-settings-dialog,.phantom-image-editor)>.phantom-style-heading h2{margin-left:0!important;font-size:19px!important}body dialog.video-settings-dialog>.phantom-style-heading{background-image:url('assets/banner-video-unique-mobile-v2.svg')!important}}

/* Compact creation rails: no reserved row for an empty selection count. */
#app-shell #main :is(#view-photos,#view-video) .creations-heading-row{margin-bottom:8px!important}
#app-shell #main :is(#view-photos,#view-video) .creations-selection-count:empty{display:none!important;margin:0!important;min-height:0!important}
#app-shell #main :is(#view-photos,#view-video) .pictures-workspace{padding-bottom:8px!important}

/* Consistent interaction affordances across the app and portalled dialogs. */
:is(#app-shell,body dialog) :is(button,[role="button"],[role="tab"],[role="menuitem"],a[href],summary,input[type="button"],input[type="submit"],input[type="reset"],input[type="checkbox"],input[type="radio"],select):not(:disabled):not([aria-disabled="true"]){cursor:pointer!important}
:is(#app-shell,body dialog) :is(button,[role="button"],[role="tab"],[role="menuitem"],input,select):is(:disabled,[aria-disabled="true"]){cursor:not-allowed!important}
:is(#app-shell,body dialog) :is(textarea,input:not([type]),input[type="text"],input[type="email"],input[type="password"],input[type="search"],input[type="number"]):not(:disabled){cursor:text!important}
#app-shell #main :is(#photo-prompt,#video-prompt){background:#101018!important;border-radius:8px;padding:12px 70px 12px 12px!important;color:#f3effa}

/* Mode buttons stand alone; do not draw a second frame around the group. */
#app-shell #main :is(#view-photos,#view-video) :is(.modern-modes,#video-mode-row,#video-mode-row .mode-stack){background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;min-height:0!important;height:auto!important;gap:4px!important}
#app-shell #main :is(#view-photos,#view-video) :is(.modern-modes,#video-mode-row){margin:0!important;align-items:center!important;border-radius:0!important}
#app-shell #main :is(#view-photos,#view-video) :is(.modern-modes,#video-mode-row) button{border:0!important;box-shadow:none!important;min-height:40px;}

/* Preview playback and settings information follow the shared workspace hierarchy. */
#video-canvas{position:relative}
#video-canvas #video-transport{position:absolute;inset:auto 16px 16px;z-index:8;margin:0;padding:10px 14px;background:#100b1ee8;border:1px solid #9760d5;border-radius:12px;transition:opacity .25s ease}
#video-canvas #video-transport.is-idle{opacity:0;pointer-events:none}
#video-canvas #video-transport:has(:focus-visible){opacity:1;pointer-events:auto}
#video-canvas .video-transport-row{display:flex;align-items:center;gap:12px}
#video-canvas .video-transport-seek{min-width:0;flex:1}
.picture-settings-sidebar{display:flex;flex-direction:column;min-height:0;background:#150f21aa;border-right:1px solid #a56ae622}
.picture-settings-sidebar .picture-settings-nav{border:0;background:transparent}
.picture-settings-sidebar>.provider-note{margin:auto 12px 16px;padding:12px 4px 0;font-size:12px;line-height:1.5;color:#bcaed0}
body dialog.picture-settings-dialog .picture-settings-body{height:calc(100% - 124px)}
@media(prefers-reduced-motion:reduce){#video-canvas #video-transport{transition:none}}

body dialog.picture-settings-dialog>.phantom-style-heading{background-image:url('assets/image-settings-v3.png')!important;background-position:center!important;background-size:cover!important;justify-content:flex-end}
body dialog.video-settings-dialog>.phantom-style-heading{background-image:url('assets/video-settings-v3.png')!important}
body dialog.picture-settings-dialog>.phantom-style-heading h2.sr-only{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

body dialog.picture-settings-dialog .picture-settings-sidebar>.provider-note{margin-top:auto!important;margin-bottom:16px!important}
#view-video .modern-preview-actions[hidden]{display:none!important}
#video-canvas #video-transport{width:auto}
#video-canvas #video-transport.is-idle{opacity:0!important;pointer-events:none!important}
#video-canvas #video-transport:has(:focus-visible){opacity:1!important;pointer-events:auto!important}

body dialog.picture-settings-dialog>.phantom-style-heading>button{margin-left:auto!important}

/* Owner sign-off: preserve Pictures/Video; migrate remaining surfaces to their tokens. */
#app-shell #main .view-page .phantom-page-banner.phantom-artwork-title::before,
#app-shell #main .view-page .phantom-page-banner.phantom-artwork-title::after{content:none!important;display:none!important}
#app-shell #main .view-page:not(#view-photos):not(#view-video) :is(textarea,input:not([type]),input[type=text],input[type=email],input[type=password],input[type=search],input[type=number],input[type=url],input[type=tel]){background:#101018}
body dialog:not(.picture-settings-dialog):not(.video-settings-dialog) :is(textarea,input:not([type]),input[type=text],input[type=email],input[type=password],input[type=search],input[type=number],input[type=url],input[type=tel]){background:#101018!important}
#app-shell #main #view-lab-song .song-creation-list{margin:0;min-height:0;flex:0 1 auto}
#app-shell #main #view-lab-song .song-creations-heading{margin-bottom:8px}
#app-shell #main #view-lab-song .song-modebar button{background:#22212f;min-height:44px;border:0;box-shadow:none}
#app-shell #main #view-lab-song .song-modebar button[aria-pressed=true]{background:#7132bb}
#app-shell #main #view-lab-song .song-creations{align-self:start;contain:none}
#app-shell #main #view-lab-song .song-track.is-active{border-color:#a879f8;box-shadow:none}
body dialog :is(.phantom-popup-heading,.phantom-style-heading).phantom-secondary-artwork{position:relative;isolation:isolate;overflow:hidden;min-height:125px;background:#140d20!important;justify-content:flex-end}
body dialog .phantom-secondary-artwork .phantom-dialog-art{position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:cover;z-index:-1;border-radius:0;margin:0}
body dialog .phantom-secondary-artwork :is(h2,h3).sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important}
body dialog .phantom-secondary-artwork button{position:relative;margin:0;flex:none}
body #admin-shell-dialog .admin-shell-dialog-header.phantom-secondary-artwork,body dialog .story-viewer-sheet>header.phantom-secondary-artwork{margin:0!important;flex-shrink:0}
@media(max-width:600px){body dialog .phantom-secondary-artwork{min-height:110px!important;padding:12px!important}body dialog .phantom-secondary-artwork .phantom-dialog-art{object-fit:cover}}
@media(max-width:760px){
#app-shell #main .view-page :is(.account-shell-nav,.account-shell-actions){display:flex;flex-wrap:wrap;overflow:visible;white-space:normal}
#app-shell #main .view-page :is(.account-shell-destination,.account-shell-action){flex:0 1 auto;min-width:0;white-space:normal}
}
#app-shell #main #view-upgrade .store-cadence{background:none;border:0;box-shadow:none;padding:0;gap:4px}
#app-shell #main #view-upgrade .store-cadence-option{background:#22212f;border:0;border-radius:8px;box-shadow:none;min-height:44px}
#app-shell #main #view-upgrade .store-cadence-option[aria-pressed=true]{background:#7132bb;box-shadow:none}
@media(min-width:951px){
#app-shell #main #view-lab-song .song-creations{grid-column:1;grid-row:1;order:0}
#app-shell #main #view-lab-song .song-composer{grid-column:2;grid-row:1;order:0}
#app-shell #main #view-lab-song .song-options{grid-column:3;grid-row:1;order:0}
}
/* Keep the complete approved composition at intermediate widths: no cover crop of the mascot. */
#app-shell #main .view-page .phantom-page-banner.phantom-artwork-title{height:auto!important;aspect-ratio:1886/220!important}
@media(max-width:760px){#app-shell #main .view-page .phantom-page-banner.phantom-artwork-title{height:auto!important;aspect-ratio:760/220!important}}

/* Approved Song concept: artwork leads, controls stay compact and quiet. */
#app-shell #main #view-lab-song .song-studio-workspace{grid-template-columns:minmax(225px,1fr) minmax(440px,2.25fr) minmax(245px,1fr);align-items:stretch}
#app-shell #main #view-lab-song .song-composer{display:flex;flex-direction:column;gap:12px;padding:0;background:none;border:0}
#app-shell #main #view-lab-song :is(.song-inspirations,.song-create-panel,.song-player){background:#181820;border:1px solid #ffffff08;border-radius:12px;padding:16px;margin:0}
#app-shell #main #view-lab-song :is(.song-creations,.song-options){align-self:stretch;background:#181820}
#app-shell #main #view-lab-song h2,#app-shell #main #view-lab-song .song-creations-heading h3{font-size:18px;font-weight:650;margin:0 0 14px;color:#f5f2ff}
#app-shell #main #view-lab-song .song-creations-heading h3{margin:0}
#app-shell #main #view-lab-song .song-search{box-sizing:border-box;width:100%;padding:11px 12px;margin:0 0 12px;border:1px solid #343141;border-radius:8px;color:#f4f0ff;background:#101018;font:inherit;font-size:13px}
#app-shell #main #view-lab-song .song-track{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr) 32px 24px;gap:9px;padding:10px 5px;border:0;background:transparent;margin:0 0 4px;border-radius:8px;box-shadow:none}
#app-shell #main #view-lab-song .song-track.is-active{background:#2b2340}
#app-shell #main #view-lab-song .song-track>input[type=checkbox]{position:absolute;left:5px;top:10px;opacity:0;z-index:1}
#app-shell #main #view-lab-song .song-track:is(:hover,:focus-within)>input,#app-shell #main #view-lab-song .song-track>input:checked{opacity:1}
#app-shell #main #view-lab-song .song-track>div{font-size:13px;line-height:1.5}
#app-shell #main #view-lab-song .song-track small{font-size:12px}
#app-shell #main #view-lab-song .song-track button{border:0;background:transparent;min-height:32px;height:32px;padding:0;font-size:18px}
#app-shell #main #view-lab-song .song-track .song-track-play{border-radius:50%;background:#292735}
#app-shell #main #view-lab-song .song-track.is-active .song-track-play{background:#8045d8}
#app-shell #main #view-lab-song .song-art{display:block;background-image:url('assets/song-style-atlas-v1.webp');background-size:300% 200%;border-radius:7px;aspect-ratio:1;width:100%}
#app-shell #main #view-lab-song .song-track-cover{width:48px;height:48px}
#app-shell #main #view-lab-song .song-player{display:grid;grid-template-columns:112px minmax(0,1fr);gap:12px;align-items:start}
#app-shell #main #view-lab-song .song-player-main{min-width:0;display:flex;flex-direction:column;gap:6px}
#app-shell #main #view-lab-song .song-player-main>strong{font-size:16px;overflow-wrap:anywhere}
#app-shell #main #view-lab-song .song-player-main>small{font-size:12px}
#app-shell #main #view-lab-song .song-transport{display:flex;align-items:center;gap:10px}
#app-shell #main #view-lab-song .song-transport>button{border:0;border-radius:50%;background:#7840bd;font-size:20px;width:40px;height:40px;flex:none;padding:0}
#app-shell #main #view-lab-song .song-timeline{flex:1;min-width:0;display:flex;flex-direction:column}
#app-shell #main #view-lab-song .song-timeline canvas{width:100%;height:32px}
#app-shell #main #view-lab-song .song-timeline input{width:100%;margin:0;min-height:16px}
#app-shell #main #view-lab-song .song-timeline span{font-size:11px;color:#b9adcc}
#app-shell #main #view-lab-song .song-volume{display:flex;flex-direction:row;align-items:center;justify-content:flex-end;gap:8px;font-size:11px;color:#b9adcc;margin:0}
#app-shell #main #view-lab-song .song-volume input{width:85px;margin:0}
#app-shell #main #view-lab-song .song-player input[type=range]{appearance:none;height:4px;min-height:4px;border-radius:4px;background:#40374f;padding:0;cursor:pointer}
#app-shell #main #view-lab-song .song-player input[type=range]::-webkit-slider-thumb{appearance:none;width:12px;height:12px;border-radius:50%;background:#a879ff;border:2px solid #d4bcff}
#app-shell #main #view-lab-song .song-player input[type=range]::-moz-range-thumb{width:9px;height:9px;border-radius:50%;background:#a879ff;border:2px solid #d4bcff}
#app-shell #main #view-lab-song .song-timeline input{margin:4px 0 6px}
#app-shell #main #view-lab-song .song-player-actions{grid-column:1/-1;gap:8px}
#app-shell #main #view-lab-song .song-player-actions button{background:#1c1b26;border:1px solid #343141;min-height:38px}
#app-shell #main #view-lab-song .song-inspiration-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
#app-shell #main #view-lab-song .song-inspiration{padding:0;border:1px solid #343141;background:#101018;overflow:hidden;text-align:left;min-width:0}
#app-shell #main #view-lab-song .song-inspiration .song-art{aspect-ratio:1.9;border-radius:6px 6px 0 0}
#app-shell #main #view-lab-song .song-inspiration>span:last-child{display:block;padding:9px;font-size:12px;line-height:1.3}
#app-shell #main #view-lab-song .song-helper{font-size:13px;color:#b9adcc;margin:-7px 0 14px}
#app-shell #main #view-lab-song .song-field :is(input,textarea,select){border:1px solid #343141;border-radius:8px;background:#101018}
#app-shell #main #view-lab-song #song-brief{min-height:92px;padding:12px;font-size:14px}
#app-shell #main #view-lab-song .song-compose-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
#app-shell #main #view-lab-song .song-compose-footer .song-modebar{margin:0;flex:none}
#app-shell #main #view-lab-song .song-compose-footer button{height:40px;min-height:40px;width:auto;padding:0 14px;font-size:13px}
#app-shell #main #view-lab-song .song-compose-footer>.primary{margin-left:auto;border:0;border-radius:8px;min-width:150px;height:auto;min-height:44px;font-size:15px;padding:12px 18px;background:linear-gradient(110deg,#9753f5,#8544e8)}
#app-shell #main #view-lab-song .song-options>.song-option-group{border:0;padding:12px 0}
#app-shell #main #view-lab-song .song-options .song-modebar{margin:0}
#app-shell #main #view-lab-song .modern-style-heading{margin:14px 0 12px;display:flex;align-items:center;justify-content:space-between}
#app-shell #main #view-lab-song .modern-style-heading h3{margin:0}
#app-shell #main #view-lab-song .modern-style-heading button{border:0;background:none;padding:0;color:#cbb8ff}
#app-shell #main #view-lab-song .song-style-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 8px;margin-bottom:28px}
#app-shell #main #view-lab-song .song-style-tiles button{padding:0;border:0;background:none;font-size:12px;min-width:0;text-align:left}
#app-shell #main #view-lab-song .song-style-tiles button>span:last-child{display:block;padding-top:6px}
#app-shell #main #view-lab-song .song-style-tiles button[aria-pressed=true] .song-art{outline:2px solid #a879ff;outline-offset:2px}
#app-shell #main #view-lab-song .song-advanced-link{background:none;border:0;color:#cbb8ff;padding:6px 0;margin-top:6px}
#app-shell #main #view-lab-song .song-lyrics{margin-bottom:14px}
.song-settings-dialog .song-advanced-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding-top:16px}
.song-settings-dialog .song-advanced-fields>.song-reference{grid-column:1/-1}
.song-settings-dialog .song-field{display:flex;flex-direction:column;gap:6px;font-size:13px}
.song-settings-dialog input[type=checkbox]{width:18px}.song-settings-dialog .song-chips,.song-draft-actions{display:flex;flex-wrap:wrap;gap:6px}
.song-settings-dialog .song-auto,.song-settings-dialog .song-reference-rights{display:flex;align-items:center;gap:6px}
.song-dialog [hidden]{display:none!important}
#app-shell #main #view-lab-song .song-timeline canvas{background:transparent}
#app-shell #main #view-lab-song .song-cost{font-size:11px;color:#b9adcc;margin-left:auto}
@media(hover:none){#app-shell #main #view-lab-song .song-track>input[type=checkbox]{opacity:1}}
@media(min-width:761px) and (max-width:1200px){#app-shell #main #view-lab-song .song-studio-workspace{grid-template-columns:210px minmax(320px,1fr)}#app-shell #main #view-lab-song .song-options{grid-column:2;grid-row:2}#app-shell #main #view-lab-song .song-creations{grid-column:1;grid-row:1/3}#app-shell #main #view-lab-song .song-composer{grid-column:2;grid-row:1}}
@media(max-width:760px){#app-shell #main #view-lab-song .song-studio-workspace{display:flex;flex-direction:column}#app-shell #main #view-lab-song .song-composer{order:0}#app-shell #main #view-lab-song .song-creations{order:1}#app-shell #main #view-lab-song .song-options{order:2}.song-settings-dialog .song-advanced-fields{grid-template-columns:1fr}}
@media(max-width:450px){#app-shell #main #view-lab-song .song-player{grid-template-columns:72px minmax(0,1fr)}#app-shell #main #view-lab-song .song-inspiration-grid{gap:6px}#app-shell #main #view-lab-song .song-inspiration>span:last-child{font-size:11px;padding:7px}#app-shell #main #view-lab-song .song-compose-footer button{padding:0 11px}}
/* Song refinement: quiet controls, player first, right-hand Advanced tabs. */
.song-track-menu{z-index:12000;min-width:190px;display:grid;gap:3px;background:#211c2f;border:1px solid #51435f;border-radius:10px;padding:6px;box-shadow:0 12px 40px #0008}
.song-track-menu button{text-align:left;background:transparent;border:0;padding:10px 14px;cursor:pointer}
.song-track-menu button:hover,.song-track-menu button:focus-visible{background:#493068}
.song-settings-layout{display:grid;grid-template-columns:190px minmax(0,1fr);gap:24px;min-height:330px}
.song-settings-tabs{display:flex;flex-direction:column;gap:8px;border-right:1px solid #51435f;padding-right:16px}
.song-settings-tabs button{text-align:left;cursor:pointer}
.song-settings-tabs button[aria-selected=true]{background:#7435b5;color:white}
.song-settings-panels{min-width:0}.song-settings-panels [role=tabpanel]{display:grid;gap:16px}
.song-settings-panels [role=tabpanel][hidden]{display:none}
.song-settings-panels .song-reference{display:grid;gap:12px}
.song-settings-panels .song-field input,.song-settings-panels textarea{background:#101018}
.song-options input[type=range],.song-settings-panels input[type=range]{width:100%;accent-color:#a879ff}
.song-options output,.song-settings-panels output{display:block;margin-top:5px}
.song-compose-footer{justify-content:space-between;align-items:center}
@media(max-width:650px){.song-settings-layout{grid-template-columns:115px minmax(0,1fr);gap:10px}.song-settings-tabs{padding-right:8px}.song-settings-tabs button{padding:9px 6px;font-size:13px}}

.creation-inline-audio{position:absolute;left:8px;bottom:8px;width:calc(100% - 16px);height:40px;z-index:4;color-scheme:dark}
.creation-video-preview:has(.creation-inline-audio) .creation-video-badge { display: none; }

/* Keep the editor banner and Close visible when focus scrolls a long tool panel. */
body dialog.phantom-image-editor[open]{display:flex;flex-direction:column}
body dialog.phantom-image-editor>.phantom-style-heading{flex:0 0 auto}
body dialog.phantom-image-editor>.editor-layout{min-height:0;overflow:auto;flex:1 1 auto}

/* Story dialogs share the edge-to-edge header rather than an inset second frame. */
body dialog.story-collection-viewer{padding:0!important}
body dialog.story-collection-viewer .story-viewer-sheet{padding:0;max-height:calc(100dvh - 36px)}
body dialog.story-collection-viewer .story-viewer-controls{padding:8px 16px}
body #story-mode-dialog .story-heading-row.phantom-secondary-artwork{margin:0 0 16px!important}
body #story-mode-dialog .story-heading-row p{display:none}

/* Story uses the same edge-to-edge header even inside its legacy form. */
body #story-mode-dialog{padding:0!important}
body #story-mode-dialog .story-mode-sheet{padding:0!important;margin:0;max-height:calc(100dvh - 36px);overflow:hidden}
body #story-mode-dialog .story-scroll{padding:0 16px 16px;min-width:0;overflow-x:hidden}
body #story-mode-dialog .story-heading-row.phantom-secondary-artwork{width:100%;min-width:0;aspect-ratio:auto;height:125px;flex-shrink:0;box-sizing:border-box;border:0;border-radius:0;box-shadow:none;align-items:center}
body #story-mode-dialog .story-heading-row.phantom-secondary-artwork>div{padding:0;border:0;background:none;box-shadow:none;max-width:0}
body #story-mode-dialog .story-footer{padding:0 16px 16px}

/* Nested account and confirmation sheets share the same edge-to-edge artwork. */
body dialog.phantom-branded-sheet{padding:0!important}
body dialog.phantom-branded-sheet>.phantom-dialog-sheet{padding:24px;box-sizing:border-box;min-width:0}
body dialog.phantom-branded-sheet>.phantom-dialog-sheet>.phantom-secondary-artwork{flex-shrink:0}
@media(max-width:760px){body dialog.phantom-branded-sheet>.phantom-dialog-sheet{padding:16px}}

/* Keep scene controls and artwork independent, without scrolling the header away. */
body dialog.story-collection-viewer{height:min(760px,88dvh);overflow:hidden!important}
body dialog.story-collection-viewer .story-viewer-sheet{height:100%;max-height:100%;min-height:0;overflow:hidden;grid-template-rows:125px minmax(0,1fr) auto auto;box-sizing:border-box}
body dialog.story-collection-viewer .story-viewer-sheet>.story-scene-image{height:100%;max-height:100%;min-height:0;object-fit:contain}
@media(max-width:600px){body dialog.story-collection-viewer .story-viewer-sheet{grid-template-rows:110px minmax(0,1fr) auto auto}}

/* Keep engagement actions above playing media, clear of native bottom transport. */
.explore-card:is([data-media-kind="video"],[data-media-kind="song"]) .explore-card-actions{z-index:5;top:0;bottom:auto;padding:8px 10px 18px;background:linear-gradient(rgba(0,0,0,.72),transparent)}

/* Settings confirmation stays reachable while the options scroll. */
body dialog.picture-settings-dialog .picture-settings-body{height:calc(100% - 190px)}
.creation-settings-footer{height:66px;box-sizing:border-box;display:flex;align-items:center;justify-content:flex-end;padding:12px 20px;border-top:1px solid #49315c;background:#17121f}
.creation-settings-footer button{min-width:110px}
body dialog.song-settings-dialog>.song-actions{justify-content:flex-end;position:sticky;bottom:0;padding:12px 20px;background:#17121f;border-top:1px solid #49315c;z-index:2}
body dialog.song-settings-dialog>.song-actions>.primary{order:2;min-width:110px;background:linear-gradient(110deg,#9753f5,#8544e8);border:0;border-radius:8px;padding:12px 18px;color:#fff}
@media(max-width:650px){body dialog.song-settings-dialog .song-settings-tabs button{font-size:13px;padding:9px 6px;overflow-wrap:anywhere}}
#view-profile[data-profile-mode="other"] :is(.profile-focus-actions,#profile-shell-nav,#btn-profile-avatar,#profile-membership){display:none!important}
#profile-public-creations{padding:20px 0}
.creator-public-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.creator-public-grid .explore-card-media{position:relative;aspect-ratio:16/10;overflow:hidden}
.creator-public-grid .explore-card-media>img{width:100%;height:100%;object-fit:cover}
.creator-public-grid .explore-card-actions{position:absolute;bottom:8px;left:8px;z-index:3}
@media(max-width:900px){.creator-public-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.creator-public-grid{grid-template-columns:1fr}}

/* Shared multi-select creation filters: Community and Library stay identical. */
#app-shell #main :is(#view-projects,#view-explore) .explore-filter-row{display:flex;flex-wrap:wrap;gap:8px;max-width:100%}
#app-shell #main :is(#view-projects,#view-explore) .explore-filter-row button{min-height:44px;height:44px;padding:0 12px;border-radius:8px;box-sizing:border-box}
#app-shell #main #view-projects .explore-filter-row{margin:0}

/* Owner feedback: compact settings, unified Admin navigation, bottom media actions. */
body dialog:is(.song-settings-dialog,.picture-settings-dialog,.video-settings-dialog,.admin-shell-dialog){width:min(960px,calc(100vw - 32px))!important;max-width:960px!important;max-height:86dvh}
body dialog.song-dialog:not(.song-settings-dialog){width:min(520px,calc(100vw - 32px))!important}
.song-settings-layout{grid-template-columns:175px minmax(0,1fr);min-height:280px}
body #admin-shell-dialog-body{display:grid;grid-template-columns:180px minmax(0,1fr);gap:20px;align-items:start}
.admin-settings-tabs{display:grid;gap:8px;position:sticky;top:0}
.admin-settings-tabs button{text-align:left;white-space:normal;min-height:44px}
.admin-settings-tabs button[aria-pressed=true]{background:#7034b5;color:#fff}
.agreement-shortcuts{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.explore-card:is([data-media-kind="video"],[data-media-kind="song"]) .explore-card-actions{top:auto;bottom:0;padding:8px 10px;background:linear-gradient(transparent,rgba(0,0,0,.72))}
.explore-card .creation-video-badge{top:8px;right:8px;bottom:auto;left:auto}
.explore-card:is([data-media-kind="video"],[data-media-kind="song"]):has(.creation-inline-audio,.creation-inline-video) .explore-card-actions{bottom:48px}
@media(max-width:600px){body #admin-shell-dialog-body{grid-template-columns:115px minmax(0,1fr);gap:10px}.admin-settings-tabs button{padding:8px;font-size:13px}}

button.creation-sent{position:relative!important;background:#237c46!important;color:transparent!important;text-shadow:none!important}
button.creation-sent::after{content:"✓ Sent";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:15px}

@media(max-width:650px){.song-settings-layout{grid-template-columns:115px minmax(0,1fr);gap:10px}}

/* Account details use the same compact left-tab pattern as Admin sections. */
body #users-invites-detail[open]{display:grid;grid-template-columns:180px minmax(0,1fr);column-gap:20px;width:min(960px,calc(100vw - 32px))!important;max-width:960px!important;max-height:86dvh}
#users-invites-detail>.phantom-popup-heading,#users-invites-detail-status{grid-column:1/-1}
#users-invites-detail-status:empty{display:none}
body #users-invites-tabs{grid-column:1;display:flex;flex-direction:column;align-items:stretch;border:0;margin:0;padding:0;gap:8px}
body #users-invites-tabs button{text-align:left;border-radius:8px;white-space:normal;min-height:44px}
#users-invites-detail-body{grid-column:2;min-width:0}
#users-invites-detail-body .users-invites-dl{grid-template-columns:repeat(2,minmax(0,1fr))}
#users-invites-detail-body>button{margin:4px 6px 4px 0}
#users-invites-detail-body input{min-width:0;max-width:100%;box-sizing:border-box}
@media(max-width:600px){body #users-invites-detail[open]{grid-template-columns:110px minmax(0,1fr);column-gap:12px}body #users-invites-tabs button{padding:8px;font-size:13px}#users-invites-detail-body .users-invites-dl{grid-template-columns:minmax(0,1fr)}}

/* Owner correction: admitted creations run durably; composers never become Stop. */
#app-shell #btn-cancel-job, #app-shell #btn-video-cancel {display:none!important}

/* Creation type colours are shared by cards and filters on both galleries. */
:root {
  --creation-picture: #59c9c1;
  --creation-studio: #7dafff;
  --creation-video: #d5ad64;
  --creation-song: #df89c5;
  --creation-story: #ad8aff;
}
:is([data-media-kind="picture"], [data-library-type="picture"], [data-explore-type="picture"]) { --creation-colour: var(--creation-picture); }
:is([data-media-kind="video"], [data-library-type="video"], [data-explore-type="video"]) { --creation-colour: var(--creation-video); }
:is([data-media-kind="song"], [data-library-type="song"], [data-explore-type="song"]) { --creation-colour: var(--creation-song); }
:is([data-media-kind="story"], [data-library-type="story"], [data-explore-type="story"]) { --creation-colour: var(--creation-story); }
:is([data-media-kind="studio"], [data-library-type="studio"], [data-explore-type="studio"]) { --creation-colour: var(--creation-studio); }
#app-shell #main :is(#view-projects, #view-explore, #view-profile) :is(.library-card, .explore-card)[data-media-kind],
#app-shell #main :is(#view-projects, #view-explore) :is([data-library-type], [data-explore-type]) {
  border: 2px solid var(--creation-colour, var(--creation-story)) !important;
}
/* Selection is an additional ring; it must not replace the type border. */
#app-shell #main #view-projects .library-card.selected {
  box-shadow: 0 0 0 2px #171720, 0 0 0 4px var(--accent-bright, #b59bff);
}

/* Empty/loading Community states have no action; honour their hidden control. */
#app-shell #main #view-explore #explore-primary-state-action[hidden]{display:none!important}

/* Atmosphere belongs to bounded content panels, never the page or layout gaps. */
:root {--phantom-cloud-surface:linear-gradient(100deg,rgba(18,14,30,.88),rgba(20,18,36,.76)),url('assets/phantom-cloud-surface-20261014.webp');}
#app-shell #main .view-page :is(.brand-panel,.social-panel,.account-shell-destination-panel,.song-player,.song-create-panel,.studio-toolbar,.studio-bin,.studio-viewer,.studio-inspector,.studio-timeline,.song-creations,.song-options,.library-panel,.explore-filter-panel,.admin-card,.admin-metric-card,.admin-workspace-card,.users-invites-card,.settings-account-card,.store-plan,.store-topup,.upgrade-membership-summary,.card,.panel,.phantom-inspiration,.prompt-dock) {
 background-image:var(--phantom-cloud-surface)!important;background-size:cover!important;background-position:center!important;
}
/* These are layout containers, even when legacy markup calls them panels. */
#app-shell #main .view-page,
#app-shell #main .view-page :is(.upgrade-page,.lab-panel,.song-studio-workspace,.song-composer,.pictures-workspace,.pictures-centre,.studio-workspace,.studio-columns,.studio-dock,.qr-workspace,.social-dashboard,.profile-page-panel,.library-gallery-section,.explore-gallery-section) {
 background-image:none!important;background-color:#0d0b14!important;
}
#app-shell #main .view-page :is(.pictures-left,.pictures-right,.qr-content,.qr-output,.qr-appearance) {
 background-image:var(--phantom-cloud-surface)!important;background-size:cover!important;background-position:center!important;
}
#app-shell #main #view-upgrade :is(.store-plan,.store-topup,.upgrade-membership-summary) {background-image:var(--phantom-cloud-surface)!important;background-size:cover!important;background-position:center!important;}
#app-shell #main .view-page :is(.library-card,.explore-card,.social-metric,.song-reference) {background-image:var(--phantom-cloud-surface)!important;background-size:cover!important;background-position:center!important;}
body dialog[open] {background-image:var(--phantom-cloud-surface)!important;background-size:cover!important;background-position:center!important;}
.studio-settings-body input[type="range"] {margin-left:0!important;margin-right:0!important;max-width:100%;}
@media(forced-colors:active){body dialog[open],#app-shell #main .view-page,#app-shell #main .view-page *{background-image:none!important;}}

/* Admin destinations use the same bounded surfaces; the page itself stays plain. */
#app-shell #main #view-admin :is(.admin-card,.admin-metric-card,.admin-workspace-card,.admin-costs-card,.users-invites-card,.account-grant-card,.admin-wallet-card,.admin-shell-diagnostics),
body #admin-shell-dialog .admin-card {
  background:linear-gradient(#131020de,#131020de),url("assets/phantom-cloud-surface-20261014.webp") center/cover!important;
  border:1px solid #66517e!important;border-radius:12px;
}
#app-shell #main #view-admin .admin-shell-destination-panel{background:#100d18!important}
@media(forced-colors:active){#app-shell #main #view-admin :is(.admin-card,.admin-shell-diagnostics),body #admin-shell-dialog .admin-card{background-image:none!important}}

/* Shared creative settings: owner-approved Studio identity and quiet dividers. */
body dialog .picture-settings-sidebar,
body dialog .picture-settings-nav,
body dialog .song-settings-tabs,
body dialog .studio-settings-tabs,
body dialog .studio-inspector {border-right:0!important;}
body dialog .phantom-settings-identity {display:flex;align-items:center;gap:8px;margin:0 0 14px;min-width:0;color:#d2acff;font:600 13px/1.35 Arial,sans-serif;}
body dialog .phantom-settings-identity img {width:32px;height:32px;object-fit:contain;flex:none;}
body dialog .phantom-settings-identity strong {overflow-wrap:anywhere;}
body dialog .phantom-settings-icon {display:inline-block;width:20px;margin-right:7px;text-align:center;font-size:18px;line-height:1;vertical-align:middle;}
body dialog .creation-settings-footer,
body dialog.song-settings-dialog > .song-actions,
body dialog .studio-settings-footer {background:rgba(23,18,31,.55)!important;border-top:1px solid #70508c80;backdrop-filter:blur(8px);}
@media(max-width:650px){
 body dialog .phantom-settings-identity {gap:4px;font-size:11px;}
 body dialog .phantom-settings-identity img {width:26px;height:26px;}
 body dialog .phantom-settings-icon {width:14px;margin-right:4px;font-size:15px;}
}