/* Visual direction only: the existing application, states and controls remain authoritative. */
@media screen{#app #page-capture .capture-media:has(#captureEmpty:not([hidden])){max-height:none;overflow:visible}}
@media screen{
:root{--studio-brand:#1432aa;--studio-brand-hover:#002060;--studio-brand-soft:#d9e1f2;--studio-ink:#404040;--studio-muted:#404040;--studio-border:#d9d9d9;--studio-bg:#f2f2f2}
body,#app button,#app input,#app select,#app textarea{font-family:'Aptos',Arial,sans-serif}
body{font-size:16px}
#app h1,#app h2,#app h3,#login h1,#studioOpening h1{font-family:'Aptos Display','Aptos','Arial Black',Arial,sans-serif;font-weight:700}
body{background:#f2f2f2}
#app>header{min-height:80px;padding:12px 28px;border-bottom:1px solid #d9d9d9;gap:20px}
#app .brand{gap:12px}#app .colorvision-logo{width:200px}
#app .studio-label{border-left:1px solid #d9d9d9;padding-left:12px;font-size:10px;letter-spacing:.14em;font-weight:700;color:#002060}
#app .pilot{border:0;background:#f0f2f7;color:#48516b}
#app .shell{grid-template-columns:210px minmax(0,1fr)}
#app aside{background:#002060;border:0;color:white;padding:26px 15px}
#app aside .workspace-label{color:#d9e1f2;font-size:11px;letter-spacing:.12em}
#app aside .nav{color:#ffffff;font-size:14px;font-weight:600;margin-bottom:4px;border:1px solid transparent;border-radius:6px;min-height:48px}
#app aside .nav:hover{background:#ffffff18;color:white}
#app aside .nav:focus-visible{outline-color:#fff}
#app aside .nav.active{color:#1432aa;background:#fff;border-color:#fff;box-shadow:none}
#app aside .navnum{opacity:.7;min-width:22px}
#app .session-card{border-color:#ffffff4d;color:#e4e9ff}
#app .session-card strong{color:#fff}#app .session-card .dot{background:#e81f63}
#app main{max-width:1660px;padding:34px 40px 56px}
#app .pagehead{margin-bottom:26px;align-items:end}
#app .pagehead h1,#app #page-ai .pagehead h1{font-size:clamp(28px,2.5vw,38px);line-height:1.1;letter-spacing:-.035em;color:#002060}
#app .pagehead p:last-child,#app #page-ai .pagehead p:last-child{font-size:15px;line-height:1.5;color:#404040}
#app .eyebrow{font-size:11px;letter-spacing:.12em;font-weight:700;color:#002060}
#app .small{font-size:14px;line-height:1.5}
#app .panel{border-color:#d9d9d9;border-radius:10px;box-shadow:none}
#app .primary{background:#1432aa;border-color:#1432aa}
#app .primary:not(:disabled):hover{background:#002060;border-color:#002060}
#app button:focus-visible,#app a:focus-visible,#app input:focus-visible,#app select:focus-visible,#app textarea:focus-visible,#app summary:focus-visible{outline:3px solid #e81f63;outline-offset:3px}
/* Capture: the import control remains available after a photo is selected. */
#app #page-capture .capture-layout{grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:start}
#app #page-capture .capture-stage{padding:20px 24px 16px;margin:0;background:white}
#app #page-capture .panel-label{font-size:11px;letter-spacing:.1em;font-weight:700;color:#404040;margin-bottom:14px}
#app #page-capture .capture-media{min-height:330px;background:#f2f2f2;border:1px solid #d9d9d9;border-radius:6px;box-shadow:none}
#app #captureEmpty{padding:24px 20px;max-width:460px;color:#404040}
#app #captureEmpty h2{font-size:25px;line-height:1.2;font-weight:700;letter-spacing:-.025em;margin:8px 0;color:#002060}
#app #captureEmpty p{font-size:15px;line-height:1.5;margin:0}
#app #captureEmpty .capture-overline{font-size:11px;font-weight:700;letter-spacing:.13em;color:#002060;margin-top:18px}
#app .capture-frame{position:relative;width:112px;height:112px;margin:0 auto;color:#1432aa}
#app .capture-frame span{position:absolute;width:23px;height:23px;border-color:#1432aa;border-style:solid}
#app .capture-frame span:nth-child(1){left:0;top:0;border-width:2px 0 0 2px}#app .capture-frame span:nth-child(2){right:0;top:0;border-width:2px 2px 0 0}#app .capture-frame span:nth-child(3){left:0;bottom:0;border-width:0 0 2px 2px}#app .capture-frame span:nth-child(4){right:0;bottom:0;border-width:0 2px 2px 0}
#app .capture-frame svg{position:absolute;inset:27px;width:58px;height:58px;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
#app .capture-primary{display:flex;align-items:center;gap:16px;padding:18px 0 2px;flex-wrap:wrap}
#app .capture-primary .filebutton{min-width:180px;margin:0;min-height:48px}
#app .capture-primary span{font-size:13px;color:#404040}
#app #page-capture .stagefooter{margin-top:14px;padding-top:12px;border-top:1px solid #d9d9d9;color:#404040;font-size:13px}
#app #page-capture .capture-controls .panel{padding:22px 0;margin:0;background:transparent;border:0;border-bottom:1px solid #d9d9d9;border-radius:0}
#app #page-capture .capture-controls .panel:first-child{padding-top:2px}
#app #page-capture .capture-controls h2{font-size:20px;letter-spacing:-.02em}
#app #page-capture .capture-controls p{font-size:14px;line-height:1.5}
#app #page-capture .capture-controls .button,#app #page-capture .capture-controls button{margin-top:8px}
#app #guestSelection{margin-top:24px}
/* Artwork: complete, generous contact-sheet tiles with literal review badges. */
#app #presetBrowser{padding:0;border:0;background:transparent}
#app .preset-filters{padding:12px;background:#fff;border:1px solid #d9d9d9;border-radius:8px;gap:16px}
#app #presetCollectionNote{margin:10px 0 5px;max-width:none}
#app #presetCount{font-size:14px;font-weight:650;color:#002060;margin-bottom:14px}
#app .preset-art-grid{grid-template-columns:repeat(auto-fit,minmax(205px,1fr));gap:18px}
#app .preset-art-card{min-width:0;padding:10px;background:white;border:2px solid #d9d9d9;border-radius:8px;gap:8px;text-align:left;align-items:stretch}
#app .preset-art-card img{width:100%;aspect-ratio:4/5;max-height:260px;object-fit:contain;background:#d9d9d9;border-radius:3px}
#app .preset-art-card strong{font-size:15px;line-height:1.25}
#app .preset-art-card span{font-size:13px;line-height:1.35}
#app .preset-art-card[aria-pressed=true]{border-color:#1432aa;background:#d9e1f2}
#app #presetPreview{background:#00133a;max-height:68dvh}
/* Review: a dark, neutral stage, the entire picture and clear white controls. */
#app #page-output .review-workspace{grid-template-columns:minmax(0,1fr) 350px;gap:24px}
#app #page-output .output-preview{padding:18px;border:0;background:#fff}
#app #page-output .output-preview .panel-label{font-size:14px}
#app #page-output #resultStage{background:#00133a;border:1px solid #00133a;border-radius:6px;min-height:0}
#app #page-output #resultPreview{max-height:calc(100dvh - 320px);object-fit:contain}
#app #page-output #resultStage .empty{color:#f0f3fa}#app #page-output #resultStage .empty h2{color:#fff}
#app #page-output .review-checklist{font-size:14px;line-height:1.45;margin:0 0 12px}
#app #page-output .review-approval h2{font-size:18px;margin-bottom:8px}
#app #page-output .review-approval .inspector-launch,#app #page-output .review-approval #approve{width:100%;margin-top:8px}
#app #page-output .review-actions .panel{border:1px solid #d9d9d9;background:white}
#app #page-output #approvalLabel{background:#d9e1f2;border-color:#a6a6a6;color:#002060}
#app #savedWorkGrid,#app #recentWork{gap:18px}
#app .saved-work-card img{object-fit:contain;background:#d9d9d9}
@media(max-width:1100px){#app #page-output .review-workspace{grid-template-columns:1fr}#app #page-output #resultPreview{max-height:65dvh}}
@media(max-width:960px){#app .shell{display:block}#app aside{padding:10px 16px;background:#002060}#app aside nav{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}#app aside .nav{min-width:0;white-space:normal;justify-content:center;margin:0}#app main{padding:24px 22px 48px}#app #page-capture .capture-layout{grid-template-columns:1fr}#app #page-capture .capture-controls{display:grid;grid-template-columns:1fr 1fr;gap:20px}#app #page-capture .capture-controls .panel{padding:16px 0}}
@media(max-width:600px){#app>header{padding:12px 16px;gap:8px}#app .brand{width:100%}#app .colorvision-logo{width:160px}#app .header-actions{width:100%;justify-content:flex-start;gap:4px 8px}#app aside nav{grid-template-columns:repeat(3,minmax(0,1fr))}#app aside .nav{font-size:13px;line-height:1.15;padding:8px 5px}#app main{padding:22px 16px 40px}#app .pagehead h1,#app #page-ai .pagehead h1{font-size:29px}#app #page-capture .capture-stage{padding:14px}#app #page-capture .capture-media{min-height:255px}#app #captureEmpty h2{font-size:22px}#app #page-capture .capture-controls{grid-template-columns:1fr;gap:0}#app .capture-primary{gap:8px}#app .capture-primary .filebutton{width:100%}#app .preset-art-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}#app .preset-art-card{padding:7px}#app #page-output .output-preview{padding:12px}#app #page-output #resultStage{min-height:250px}#app #page-output .review-actions{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){#app *,#app *::before,#app *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
}
@media screen{
/* A compact working header keeps the primary photo action in the first view. */
#app>header{min-height:68px;padding:8px 24px}
#app .colorvision-logo{width:152px}
#app main{padding-top:22px}
#app .pagehead{margin-bottom:18px}
#app .pagehead h1,#app #page-ai .pagehead h1{font-size:clamp(27px,2.2vw,34px);margin-bottom:5px}
#app #page-capture .capture-stage{padding:16px 18px 12px}
#app #page-capture .panel-label{margin-bottom:10px}
#app #page-capture .capture-media{position:relative;display:flex;flex-direction:column;min-height:0;background:#f2f2f2}
#app #page-capture .capture-media:has(#captureEmpty:not([hidden])){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);grid-template-areas:"copy art" "cta art";gap:0 26px;align-items:center;min-height:315px;padding:26px}
#app #captureEmpty:not([hidden]){display:contents}
#app .capture-copy{grid-area:copy;align-self:end;text-align:left;min-width:0}
#app #captureEmpty .capture-overline{margin:12px 0 4px;font-size:11px}
#app #captureEmpty .capture-copy h2{font-size:26px;margin:6px 0}
#app #captureEmpty .capture-copy>p:last-child{font-size:15px;max-width:31ch}
#app .capture-frame{width:50px;height:50px;margin:0}
#app .capture-frame span{width:13px;height:13px}
#app .capture-frame svg{inset:10px;width:30px;height:30px}
#app #page-capture .capture-primary{grid-area:cta;align-self:start;padding:16px 0 0;gap:8px 14px}
#app #page-capture .capture-primary .filebutton{min-width:160px}
#app .capture-examples{grid-area:art;min-width:0;align-self:center;text-align:left}
#app #captureEmpty .capture-examples>p{font-size:11px;font-weight:700;letter-spacing:.11em;color:#404040;margin:0 0 8px}
#app .capture-examples>span{display:block;color:#404040;font-size:12px;margin-top:8px}
#app .example-prints{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;align-items:center}
#app .example-prints img{display:block;width:100%;height:auto;max-height:215px;aspect-ratio:4/5;object-fit:contain;background:#d9d9d9;border:5px solid white;box-shadow:0 2px 7px #1c294520}
#app #page-capture .capture-media:has(#captureEmpty[hidden]) .capture-primary{padding:14px 18px;align-self:stretch;background:#fff}
#app #page-capture .capture-media:has(#captureEmpty[hidden]) #sourcePreview,#app #page-capture .capture-media:has(#captureEmpty[hidden]) #camera{width:100%;height:auto;max-height:62dvh;object-fit:contain}
@media(max-width:960px){#app #page-capture .capture-controls{grid-template-columns:1fr 1fr}}
@media(max-width:600px){#app>header{padding:8px 14px}#app .colorvision-logo{width:145px}#app main{padding-top:18px}#app #page-capture .capture-stage{padding:12px}#app #page-capture .capture-media:has(#captureEmpty:not([hidden])){grid-template-columns:1fr;grid-template-areas:"copy" "cta" "art";gap:0;padding:18px;min-height:0}#app .capture-copy{align-self:auto}#app .capture-frame{width:42px;height:42px}#app .capture-frame svg{inset:8px;width:26px;height:26px}#app #captureEmpty .capture-overline{margin:9px 0 3px}#app #captureEmpty .capture-copy h2{font-size:22px}#app #page-capture .capture-primary{padding:12px 0 0}#app #page-capture .capture-primary .filebutton{width:auto;min-width:155px}#app .capture-examples{margin-top:18px}#app .example-prints img{max-height:130px}#app #page-capture .capture-controls{grid-template-columns:1fr}}
}

@media screen {
#app .secondary{border-color:#7b8798!important}
#app .preset-art-card{position:relative}
#app .preset-art-card::before{content:"";position:absolute;top:0;left:0;width:26px;height:3px;background:#e81f63;border-radius:4px 0 0 0}
#app #page-output .output-preview{border-left:3px solid #e81f63}
@media(max-width:600px){
 body>.visual-preview-notice{padding:5px 10px!important;font-size:11px!important;line-height:1.25!important}
 #app>header{min-height:0;padding:6px 12px;gap:3px 6px}
 #app .brand{width:auto;display:flex;align-items:center;gap:7px;min-width:0}
 #app .colorvision-logo{width:126px;max-width:42vw}
 #app .studio-label{padding-left:7px;font-size:9px;letter-spacing:.1em;white-space:nowrap}
 #app .header-actions{width:100%;gap:2px 6px;justify-content:flex-start}
 #app .header-actions button,#app .header-actions .button{font-size:12px;min-height:44px;padding:6px 8px}
 #app aside{padding:6px 10px}
 #app aside nav{grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}
 #app aside nav .nav{min-height:44px;margin:0;padding:6px 3px;font-size:12px}
 #app aside nav .nav:nth-child(-n+3){grid-column:span 2}
 #app aside nav .nav:nth-child(n+4){grid-column:span 3}
 #app .preset-art-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
}

@media screen {
#app>header{background:#fff;border-color:#d9d9d9}
#app .studio-label{color:#002060;border-color:#d9d9d9}
#app .pilot{background:#f2f2f2;color:#404040}
#app main{color:#404040}
#app .pagehead h1,#app #page-ai .pagehead h1{color:#002060}
#app .pagehead p:last-child,#app #page-ai .pagehead p:last-child,#app .muted{color:#404040}
#app .eyebrow,#app .capture-overline{color:#002060}
#app .panel,#app .preset-filters{border-color:#d9d9d9;background-color:#fff}
#app .secondary{border-color:#7f7f7f!important}
#app .preset-art-card{border-color:#d9d9d9}
#app .preset-art-card[aria-pressed=true]{border-color:#1432aa;background:#d9e1f2}
#app .capture-media,#app .preset-art-card img,#app .saved-work-card img{background-color:#f2f2f2}
#app a:not(.button){color:#0070c0}
#app #page-output #approvalLabel{background:#d9e1f2;border-color:#a6a6a6;color:#002060}
#app .app-footer{font-size:12px;color:#404040;background:#fff;border-color:#d9d9d9}
}

@media screen{body>.visual-preview-notice{font-family:'Aptos',Arial,sans-serif!important}}

@media screen {
/* Authentic white marks: original SVG data, unchanged, on the guide's royal blue. */
#app>header{position:relative;background:#1432aa;border-color:#1432aa;padding-left:28px;padding-right:28px}
#app>header::before{content:"";position:absolute;top:5px;left:7px;width:12px;height:12px;border-top:2px solid #fff;border-left:2px solid #fff;pointer-events:none}
#app>header::after{content:"";position:absolute;right:0;top:50%;width:4px;height:28px;transform:translateY(-50%);background:#e81f63;pointer-events:none}
#app>header .brand{display:flex;align-items:center;gap:12px;min-width:0}
#app>header .colorvision-logo{display:block;width:160px;height:auto;max-width:100%}
#app>header .studio-label{color:#fff;border-left:1px solid #ffffff99;white-space:nowrap}
#app>header .dnp-logo{display:block;width:64px;max-width:40%;height:auto;margin-left:12px;object-fit:contain}
#app>header .header-actions button,#app>header .header-actions .button,#app>header #newSession{min-height:44px;color:#fff;background:transparent;border:1px solid #fff!important;box-shadow:none}
#app>header .header-actions button:not(:disabled):hover,#app>header .header-actions .button:hover{background:#ffffff24;color:#fff}
#app>header .header-actions button:focus-visible,#app>header .header-actions a:focus-visible{outline-color:#fff}
#app>header .pilot{color:#fff;background:transparent;border:1px solid #ffffffaa}
@media(max-width:600px){
 #app>header{padding:8px 14px;gap:4px 6px}
 #app>header .brand{width:100%;gap:8px;align-items:center;flex-wrap:nowrap}
 #app>header .colorvision-logo{width:145px;max-width:38vw}
 #app>header .studio-label{padding-left:8px;font-size:9px}
 #app>header .dnp-logo{width:52px;max-width:16vw;margin-left:12px;flex:none}
 #app>header .header-actions{width:100%;gap:4px 6px;justify-content:flex-start}
 #app>header .header-actions button,#app>header .header-actions .button{padding:6px 8px;min-height:44px;font-size:12px}
}
}
@media screen {
/* Keep the authentic marks in a single horizontal lockup. */
#app>header .brand{display:flex;flex-direction:row;align-items:center;gap:24px}
#app>header .dnp-logo{margin-left:0}
#app aside .session-card p,#app aside .session-card .small,#app aside #sourceName{color:#d9e1f2}
@media(max-width:600px){
 #app>header .brand{flex-direction:row;gap:16px}
 #app>header .colorvision-logo{width:136px;max-width:36vw}
 #app>header .studio-label{font-size:10px;letter-spacing:.04em;padding-left:8px}
 #app>header .dnp-logo{width:52px;max-width:14vw;margin-left:0}
}
}

@media screen {
/* Clear space around the unchanged marks and compact, accessible photo actions. */
#app>header{min-height:78px;padding-left:26px;padding-right:26px}
#app>header::before{content:none}
#app>header .brand{gap:26px}
#app>header .studio-label{font-size:12px}
#app aside .workspace-label,#app .eyebrow,#app .panel-label,#app #page-capture .panel-label,#app #captureEmpty .capture-examples>p{font-size:12px}
#app .capture-buttons{display:flex;flex-direction:column;gap:8px;align-items:stretch;min-width:170px}
#app #page-capture .capture-buttons .filebutton{width:100%;margin:0;min-height:44px}
@media(max-width:600px){
 #app>header{padding-left:22px;padding-right:22px}
 #app>header .brand{min-height:73px;gap:22px}
 #app>header .studio-label{font-size:12px;letter-spacing:0;padding-left:8px}
 #app .capture-buttons{width:100%}
}
}

@media screen and (max-width:360px){
 #app>header .brand{flex-wrap:wrap;column-gap:22px;row-gap:18px;padding:8px 0}
 #app>header .dnp-logo{flex-basis:auto;margin-right:calc(100% - 52px);width:44px;max-width:44px}
}

@media screen {
 #app #page-method .method-options{grid-template-columns:repeat(3,minmax(0,1fr))}
 #app #page-method .packets-coming-soon:disabled,#app #page-method .packets-coming-soon:disabled:hover,#app #page-method .packets-coming-soon:disabled:active{opacity:1;filter:none;cursor:default;background:#f0f1f4;border-color:#c9cfdd;color:#536174;transform:none;box-shadow:none}
 #app #page-method .packets-coming-soon>span{color:#687589}
 #app #page-method .packets-coming-soon .coming-soon-label{color:#E81F63;font-size:20px;font-weight:700;line-height:1.3}
 @media(max-width:1050px){#app #page-method .method-options{grid-template-columns:repeat(2,minmax(0,1fr))}}
 @media(max-width:640px){#app #page-method .method-options{grid-template-columns:1fr}}
}