/* Pictures workspace: owner-approved October 2026 design. */
#app-shell :is(#view-photos,#view-video).view-page { --picture-surface:#171720; --picture-line:#343141; padding:0; }
#app-shell :is(#view-photos,#view-video).view-page .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 :is(#view-photos,#view-video).view-page .page-banner picture { height:100%; display:block; }
#app-shell :is(#view-photos,#view-video).view-page .page-banner picture img { width:100%; height:100%; object-fit:fill; }
#app-shell :is(#view-photos,#view-video).view-page .pictures-workspace { display:grid; grid-template-columns:minmax(175px, .85fr) minmax(360px,2.5fr) minmax(235px,1.08fr); gap:12px; border:0; background:none; padding:0 0 20px; height:auto; min-height:0; align-items:stretch; }
#app-shell :is(#view-photos,#view-video).view-page .brand-panel { border:1px solid #ffffff06; border-radius:10px; background:linear-gradient(125deg,#181820,#13131d); box-shadow:none; min-width:0; }
#app-shell :is(#view-photos,#view-video).view-page .pictures-left, #app-shell :is(#view-photos,#view-video).view-page .pictures-right { padding:16px; overflow:visible; }
#app-shell :is(#view-photos,#view-video).view-page .pictures-centre { background:none; border:0; display:flex; flex-direction:column; gap:12px; padding:0; overflow:visible; }
#app-shell :is(#view-photos,#view-video).view-page .pictures-fold, #app-shell :is(#view-photos,#view-video).view-page .pictures-fold-body, #app-shell :is(#view-photos,#view-video).view-page .creations-block { border:0; padding:0; background:none; }
#app-shell :is(#view-photos,#view-video).view-page .pictures-fold-summary, #app-shell :is(#view-photos,#view-video).view-page .pictures-desktop-mode-row, #app-shell :is(#view-photos,#view-video).view-page .pictures-mobile-mode-host { display:none!important; }
#app-shell :is(#view-photos,#view-video).view-page .creations-heading-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
#app-shell :is(#view-photos,#view-video).view-page h3 { font-size:18px; margin:0 0 14px; }
#app-shell :is(#view-photos,#view-video).view-page .creations-heading-row h3 { margin:0; }
#app-shell :is(#view-photos,#view-video).view-page #btn-creations-select-all { padding:4px; min-height:30px; border:0; background:none; color:#cbb8ff; font-size:14px; }
#app-shell :is(#view-photos,#view-video).view-page .creations-list { border:0; padding:0; margin:0; overflow:auto; max-height:660px; min-height:0; display:flex; flex-direction:column; gap:16px; }
#app-shell :is(#view-photos,#view-video).view-page .creations-list li { display:block; position:relative; padding:3px; border:2px solid transparent; border-radius:10px; background:transparent; cursor:pointer; }
#app-shell :is(#view-photos,#view-video).view-page .creations-list li.preview-focus { border-color:#a975ff; background:#272032; }
#app-shell :is(#view-photos,#view-video).view-page .creations-list li.selected { background:#312343; }
#app-shell :is(#view-photos,#view-video).view-page .creation-thumb { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:7px; background:#252132; }
#app-shell :is(#view-photos,#view-video).view-page .creation-label { display:block; padding:7px 3px 3px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:14px; }
#app-shell :is(#view-photos,#view-video).view-page .creation-check { position:absolute; top:12px; left:12px; width:18px; height:18px; z-index:2; opacity:0; }
#app-shell :is(#view-photos,#view-video).view-page .creation-check:focus-visible, #app-shell :is(#view-photos,#view-video).view-page .creations-list li:hover .creation-check, #app-shell :is(#view-photos,#view-video).view-page .creation-check:checked { opacity:1; }
#app-shell :is(#view-photos,#view-video).view-page .creation-menu { position:absolute; right:10px; top:10px; border:0; border-radius:50%; background:#12131bc9; width:32px; height:32px; min-height:0; padding:0; }
#app-shell :is(#view-photos,#view-video).view-page .creations-selection-count { font-size:12px; margin:0 0 8px; }
#app-shell :is(#view-photos,#view-video).view-page .creations-actions { gap:8px; margin-top:16px; }
#app-shell :is(#view-photos,#view-video).view-page .creations-actions button { border-color:var(--picture-line); font-size:13px; padding:8px; }
#app-shell :is(#view-photos,#view-video).view-page .pictures-canvas { width:100%; height:auto!important; min-height:0; aspect-ratio:16/9; border:0; border-radius:10px 10px 0 0; background:#111119; padding:12px 12px 0; box-sizing:border-box; }
#app-shell :is(#view-photos,#view-video).view-page #canvas-art { width:100%; height:100%; object-fit:contain; border-radius:8px; }
#app-shell :is(#view-photos,#view-video).view-page .modern-preview-actions { display:flex; gap:8px; background:var(--picture-surface); padding:12px; margin-top:-12px; border-radius:0 0 10px 10px; }
#app-shell :is(#view-photos,#view-video).view-page .modern-preview-actions button { border:1px solid var(--picture-line); border-radius:7px; background:#20202b; font-size:14px; min-height:40px; padding:8px 14px; }
#app-shell :is(#view-photos,#view-video).view-page .prompt-dock { border:0; padding:0; background:none; }
#app-shell :is(#view-photos,#view-video).view-page #picture-composer { background:linear-gradient(120deg,#191922,#14141e); border:1px solid #ffffff08; border-radius:10px; padding:16px; display:flex; flex-direction:column; min-height:160px; box-shadow:none; }
#app-shell :is(#view-photos,#view-video).view-page #photo-prompt { width:100%; min-height:80px; flex:1; padding:3px; font:15px/1.6 Arial,sans-serif; background:none; border:0; resize:vertical; box-shadow:none; }
#app-shell :is(#view-photos,#view-video).view-page .ask-composer-tools { display:flex; width:100%; justify-content:space-between; align-items:center; position:static; }
#app-shell :is(#view-photos,#view-video).view-page .modern-modes { display:flex; padding:3px; background:#101019; border-radius:9px; }
#app-shell :is(#view-photos,#view-video).view-page .modern-modes .mode-stack { display:contents; }
#app-shell :is(#view-photos,#view-video).view-page .modern-modes button { border:0; border-radius:7px; padding:10px 25px; min-height:40px; background:#20202c; font-size:14px; }
#app-shell :is(#view-photos,#view-video).view-page .modern-modes button.active { background:#6e36bc; color:white; }
#app-shell :is(#view-photos,#view-video).view-page .picture-composer-actions { display:flex; gap:6px; }
#app-shell :is(#view-photos,#view-video).view-page #btn-generate { background:linear-gradient(110deg,#9753f5,#8544e8); border:0; border-radius:8px; min-width:150px; font-size:15px; padding:12px 18px; }
#app-shell :is(#view-photos,#view-video).view-page #btn-cancel-job:disabled { display:none; }
#app-shell :is(#view-photos,#view-video).view-page .options-heading { margin:0 0 20px; }
#app-shell :is(#view-photos,#view-video).view-page .options-group { border:0; padding:0; margin:0 0 16px; }
#app-shell :is(#view-photos,#view-video).view-page .options-group > summary { display:none; }
#app-shell :is(#view-photos,#view-video).view-page label, #app-shell :is(#view-photos,#view-video).view-page .modern-label { font-size:14px; font-weight:400; color:#c7c1d5; margin:14px 0 8px; display:block; }
#app-shell :is(#view-photos,#view-video).view-page select { height:42px; padding:8px 12px; background:#22212f; border:1px solid #373244; border-radius:7px; font-size:14px; }
#app-shell :is(#view-photos,#view-video).view-page .modern-styles { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
#app-shell :is(#view-photos,#view-video).view-page .modern-styles button { padding:0; border:0; background:none; font-size:12px; border-radius:7px; }
#app-shell :is(#view-photos,#view-video).view-page .modern-styles img { width:100%; aspect-ratio:1.3; object-fit:cover; border-radius:7px; border:2px solid transparent; }
#app-shell :is(#view-photos,#view-video).view-page .modern-styles button[aria-pressed=true] img { border-color:#a879f8; }
#app-shell :is(#view-photos,#view-video).view-page .modern-segments { display:flex; gap:8px; }
#app-shell :is(#view-photos,#view-video).view-page .modern-segments button { flex:1; border:1px solid #383247; background:#22212f; border-radius:6px; min-height:38px; padding:6px; }
#app-shell :is(#view-photos,#view-video).view-page .modern-segments button[aria-pressed=true] { background:#743bc4; border-color:#b188ff; }
#app-shell :is(#view-photos,#view-video).view-page .modern-advanced { margin-top:18px; border-top:1px solid #34303d; padding-top:16px; }
#app-shell :is(#view-photos,#view-video).view-page .modern-advanced {display:block;width:100%;text-align:left;background:transparent;border-radius:0;border-inline:0;border-bottom:0;color:#c7c1d5;padding-bottom:16px;cursor:pointer;}
#app-shell :is(#view-photos,#view-video).view-page .modern-advanced-dialog {box-sizing:border-box;width:min(560px,calc(100vw - 32px));max-height:calc(100dvh - 40px);padding:24px;border:1px solid #343141;border-radius:16px;background:#171720;color:#f6f4ff;box-shadow:0 24px 90px #0009;overflow:auto;}
#app-shell :is(#view-photos,#view-video).view-page .modern-advanced-dialog::backdrop {background:#050509bd;backdrop-filter:blur(5px);}
#app-shell :is(#view-photos,#view-video).view-page .modern-advanced-dialog .phantom-style-heading {display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px;}
#app-shell :is(#view-photos,#view-video).view-page .modern-advanced-dialog h2 {font-size:22px;margin:0;}
#app-shell :is(#view-photos,#view-video).view-page .modern-advanced-dialog .phantom-style-heading button {border:1px solid #51435f;border-radius:8px;background:#22212f;color:#f6f4ff;padding:8px 16px;min-height:40px;font:inherit;cursor:pointer;}
#app-shell :is(#view-photos,#view-video).view-page .modern-advanced-dialog a {color:#cbb8ff;}
#app-shell :is(#view-photos,#view-video).view-page .modern-advanced-dialog :focus-visible {outline:2px solid #cbb8ff;outline-offset:3px;}
#app-shell :is(#view-photos,#view-video).view-page .modern-advanced-dialog label {display:block;margin:16px 0 8px;}
#app-shell :is(#view-photos,#view-video).view-page .modern-advanced-dialog select {display:block!important;width:100%;}
#app-shell :is(#view-photos,#view-video).view-page .modern-reference { margin-top:18px; padding-top:16px; border-top:1px solid #34303d; }
#app-shell :is(#view-photos,#view-video).view-page .modern-reference button { width:100%; margin-top:8px; min-height:76px; border:1px dashed #51465d; border-radius:8px; background:#1c1b27; text-align:left; padding:14px; }
#app-shell :is(#view-photos,#view-video).view-page .modern-reference img { max-height:100px; max-width:100%; border-radius:6px; }
#app-shell :is(#view-photos,#view-video).view-page .modern-size-caption { color:#a39bac; text-align:center; font-size:12px; margin:7px 0; }
#app-shell :is(#view-photos,#view-video).view-page .modern-banner-title { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; pointer-events:none; font-family:Georgia,serif; font-weight:bold; font-size:clamp(30px,3.7vw,62px); line-height:.96; text-shadow:0 2px 12px #000; }
@media(max-width:1100px) { #app-shell :is(#view-photos,#view-video).view-page .pictures-workspace { grid-template-columns:150px minmax(260px,1fr) 220px; gap:8px; padding:0 6px 16px; } #app-shell :is(#view-photos,#view-video).view-page .pictures-left,#app-shell :is(#view-photos,#view-video).view-page .pictures-right { padding:10px; } #app-shell :is(#view-photos,#view-video).view-page .modern-modes button {padding:8px 14px;} }
@media(max-width:760px) { #app-shell :is(#view-photos,#view-video).view-page .pictures-workspace { display:flex; flex-direction:column; } #app-shell :is(#view-photos,#view-video).view-page .pictures-centre { order:0; } #app-shell :is(#view-photos,#view-video).view-page .pictures-left { order:1; position:static!important; transform:none!important; width:auto!important; max-height:none; visibility:visible!important; } #app-shell :is(#view-photos,#view-video).view-page .pictures-right { order:2; position:static!important; transform:none!important; width:auto!important; visibility:visible!important; } #app-shell :is(#view-photos,#view-video).view-page .creations-list { display:grid; grid-template-columns:repeat(3,1fr); max-height:none; } #app-shell :is(#view-photos,#view-video).view-page .picture-drawer-toolbar, #btn-picture-options, #btn-picture-history {display:none!important;} #app-shell :is(#view-photos,#view-video).view-page .page-banner {height:110px;} }

/* Override the old fixed-height workspace and native control resets. */
#app-shell :is(#view-photos,#view-video).view-page .pictures-workspace {overflow:visible!important; max-height:none!important; height:auto!important;}
#app-shell :is(#view-photos,#view-video).view-page .pictures-left,#app-shell :is(#view-photos,#view-video).view-page .pictures-right,#app-shell :is(#view-photos,#view-video).view-page .pictures-centre {max-height:none!important; height:auto!important;}
#app-shell :is(#view-photos,#view-video).view-page .pictures-fold,#app-shell :is(#view-photos,#view-video).view-page .pictures-fold-body,#app-shell :is(#view-photos,#view-video).view-page .creations-block {height:auto!important;max-height:none!important;overflow:visible!important;flex:none!important;}
#app-shell :is(#view-photos,#view-video).view-page .creations-list {height:auto!important;max-height:650px!important;background:none!important;}
#app-shell :is(#view-photos,#view-video).view-page .creations-list li {flex:none!important;min-height:0!important;color:#f6f4ff!important;}
#app-shell :is(#view-photos,#view-video).view-page .creation-label {visibility:visible!important;color:#f6f4ff!important;}
#app-shell :is(#view-photos,#view-video).view-page .options-group {background:none!important;}
#app-shell :is(#view-photos,#view-video).view-page button {color:#f6f4ff;}
#app-shell :is(#view-photos,#view-video).view-page .options-heading {color:#f6f4ff;}
#app-shell :is(#view-photos,#view-video).view-page .pictures-canvas {border:0!important;outline:0!important;flex:none!important;}
#app-shell :is(#view-photos,#view-video).view-page .picture-composer-actions {width:auto!important;flex:none!important;}
#app-shell :is(#view-photos,#view-video).view-page .modern-modes {flex:none!important;}

#app-shell :is(#view-photos,#view-video).view-page {overflow-y:auto!important;overflow-x:hidden!important;}
#app-shell :is(#view-photos,#view-video).view-page .pictures-workspace {flex:0 0 auto!important;align-items:stretch;}
#app-shell :is(#view-photos,#view-video).view-page .pictures-right .options-group {margin:0 0 12px!important;padding:0!important;}
#app-shell :is(#view-photos,#view-video).view-page .options-heading {padding:0!important;margin:0 0 14px!important;}
#app-shell :is(#view-photos,#view-video).view-page .creations-list {max-height:580px!important;scrollbar-width:thin;scrollbar-color:#51435f transparent;}
#app-shell :is(#view-photos,#view-video).view-page .modern-reference button {white-space:pre-line;}
#app-shell :is(#view-photos,#view-video).view-page .modern-reference button:last-child:not(:first-child) {min-height:34px;}
#app-shell :is(#view-photos,#view-video).view-page .modern-styles button {font-family:inherit;}
#app-shell :is(#view-photos,#view-video).view-page .canvas-overlay {pointer-events:none;}
#app-shell :is(#view-photos,#view-video).view-page #canvas-subhero {display:none;}

#app-shell :is(#view-photos,#view-video).view-page .options-heading {min-height:0!important;height:auto!important;line-height:1.4!important;}
#app-shell :is(#view-photos,#view-video).view-page #photo-style-hint:empty {display:none!important;}
#app-shell :is(#view-photos,#view-video).view-page .modern-reference button[hidden] {display:none!important;}

#app-shell :is(#view-photos,#view-video).view-page #picture-composer {position:relative;}
#app-shell :is(#view-photos,#view-video).view-page #photo-prompt {padding-right:70px;box-sizing:border-box;}
#app-shell :is(#view-photos,#view-video).view-page .modern-prompt-count {position:absolute;right:20px;top:22px;color:#a9a1bb;font-size:12px;pointer-events:none;}

@media(max-width:760px) {
 #app-shell :is(#view-photos,#view-video).view-page .modern-preview-actions {flex-wrap:wrap;}
 #app-shell :is(#view-photos,#view-video).view-page .ask-composer-tools {flex-wrap:wrap;gap:12px;}
 #app-shell :is(#view-photos,#view-video).view-page .modern-modes button {padding:8px 16px;}
 #app-shell :is(#view-photos,#view-video).view-page .pictures-left,#app-shell :is(#view-photos,#view-video).view-page .pictures-right {inset:auto!important;display:block!important;z-index:auto!important;}
 #app-shell :is(#view-photos,#view-video).view-page .page-banner::before,#app-shell :is(#view-photos,#view-video).view-page .page-banner::after {max-width:48%;}
}

@media(max-width:760px) {
 #app-shell :is(#view-photos,#view-video).view-page .pictures-left,#app-shell :is(#view-photos,#view-video).view-page .pictures-right {flex:0 0 auto!important;pointer-events:auto!important;}
}

#app-shell :is(#view-photos,#view-video).view-page .pictures-left,#app-shell :is(#view-photos,#view-video).view-page .pictures-right {border:1px solid #ffffff06!important;}
#app-shell :is(#view-photos,#view-video).view-page #pictures-canvas[data-state="result"] #canvas-stage {display:none;}
#app-shell :is(#view-photos,#view-video).view-page .creations-selection-count[hidden] {display:none!important;}
#app-shell :is(#view-photos,#view-video).view-page .creations-actions:not(:has(button:not(:disabled))) {display:none!important;}

/* The banner and workspace share one outer edge at every breakpoint. */
#app-shell :is(#view-photos,#view-video).view-page .pictures-workspace {padding-inline:0;}
#app-shell :is(#view-photos,#view-video).view-page #photo-style[hidden] {display:none!important;}
#app-shell :is(#view-photos,#view-video).view-page .modern-style-heading {display:flex;align-items:center;justify-content:space-between;gap:12px;margin:14px 0 8px;}
#app-shell :is(#view-photos,#view-video).view-page .modern-style-heading .modern-label {margin:0;}
#app-shell :is(#view-photos,#view-video).view-page .modern-show-styles {border:0;background:none;color:#cbb8ff;padding:4px 0;min-height:32px;font-size:14px;}
#app-shell :is(#view-photos,#view-video).view-page .modern-style-current {font-size:12px;color:#c7c1d5;margin:8px 0 0;}
.phantom-style-dialog {box-sizing:border-box;width:min(900px,calc(100vw - 32px));max-height:calc(100dvh - 40px);padding:24px;border:1px solid #343141;border-radius:16px;background:#171720;color:#f6f4ff;box-shadow:0 24px 90px #0009;overflow:auto;}
.phantom-style-dialog::backdrop {background:#050509bd;backdrop-filter:blur(5px);}
.phantom-style-dialog[open] {display:flex;flex-direction:column;overflow:hidden;}
.phantom-style-dialog .phantom-style-heading {display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px;}
.phantom-style-dialog h2 {font:600 22px/1.3 Arial,sans-serif;margin:0;}
.phantom-style-dialog .phantom-style-heading button {border:1px solid #51435f;border-radius:8px;background:#22212f;color:#f6f4ff;padding:8px 16px;min-height:40px;}
.phantom-style-dialog .phantom-style-grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;min-height:0;max-height:calc(100dvh - 160px);overflow:auto;padding:4px;scrollbar-width:thin;scrollbar-color:#51435f transparent;}
.phantom-style-dialog .phantom-style-grid button {display:flex;flex-direction:column;gap:8px;align-items:stretch;min-width:0;padding:5px;border:2px solid transparent;border-radius:10px;background:#20202b;color:#f6f4ff;font:14px/1.4 Arial,sans-serif;text-align:left;cursor:pointer;}
.phantom-style-dialog .phantom-style-grid button > span:last-child {padding:0 4px 4px;}
.phantom-style-dialog .phantom-style-grid button[aria-pressed=true] {border-color:#a975ff;background:#312343;}
.phantom-style-dialog button:focus-visible {outline:2px solid #cbb8ff;outline-offset:3px;}
.phantom-style-dialog .phantom-style-grid button:hover {background:#30283e;}
.phantom-style-dialog .phantom-style-grid button:disabled {opacity:.5;cursor:not-allowed;}
.phantom-style-thumb {display:block;width:100%;aspect-ratio:1;border-radius:6px;background-image:url('assets/pictures-samples/style-atlas.webp');background-size:600% 400%;background-repeat:no-repeat;}
.phantom-style-thumb-fallback {background-image:linear-gradient(135deg,#312343,#8b5cf6);background-size:100%;}
@media(max-width:600px) {.phantom-style-dialog {padding:16px;}.phantom-style-dialog .phantom-style-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}}
@media(hover:none) {#app-shell :is(#view-photos,#view-video).view-page .creation-check {opacity:1;}}