/* Photo Studio's shared interface system. Artwork colors are never filtered. */
:root{
  --studio-brand:#1432aa;--studio-brand-hover:#001d80;--studio-brand-soft:#edf1fc;--studio-accent:#e81f63;
  --studio-ink:#10162c;--studio-muted:#48516b;--studio-border:#c9cfdd;
  --studio-bg:#f5f7fa;--studio-surface:#fff;--studio-stage:#e9edf2;--studio-focus:#174bbf;
  --ink:var(--studio-ink);--muted:var(--studio-muted);--line:var(--studio-border);
  --cream:var(--studio-bg);--teal:var(--studio-brand);--navy:#142342;
}
body{background:var(--studio-bg);color:var(--studio-ink);font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
#app{min-width:0}
#app>header{height:auto;min-height:76px;padding:12px 24px;gap:16px;background:#fff;border:0;border-bottom:1px solid var(--studio-border);border-image:none;box-shadow:none;flex-wrap:wrap}
#app .brand{min-width:0;gap:4px}
#app .colorvision-logo{width:220px;max-width:100%;height:auto}
#app .studio-label{font-size:9px;letter-spacing:1.5px;color:var(--studio-muted)}
#app .header-actions{width:auto;display:flex;flex-wrap:wrap;gap:8px;margin-left:auto;justify-content:flex-end}
#app .pilot{background:#f3f5f8;border:1px solid var(--studio-border);color:var(--studio-muted);border-radius:5px;padding:4px 8px;font-size:11px;letter-spacing:0}
#app #newSession{background:white;border:1px solid var(--studio-border);color:var(--studio-ink)}
#app .shell{display:grid;grid-template-columns:200px minmax(0,1fr);min-height:calc(100dvh - 120px)}
#app aside{background:white;border-right:1px solid var(--studio-border);padding:24px 12px;box-shadow:none;color:var(--studio-ink)}
#app aside .workspace-label{color:var(--studio-muted);font-size:10px;margin-bottom:20px}
#app aside nav{display:block;overflow:visible}
#app aside .nav{width:100%;min-width:0;min-height:48px;height:auto;white-space:normal;justify-content:flex-start;text-align:left;padding:12px;gap:8px;margin:0 0 6px;font-size:14px;font-weight:600;color:var(--studio-muted);background:none;border:1px solid transparent;border-radius:8px;box-shadow:none}
#app aside .nav.active{background:var(--studio-brand-soft);color:var(--studio-brand);border-color:#c5d0f7;box-shadow:inset 3px 0 var(--studio-brand)}
#app aside .navnum{display:inline;font-size:12px;color:inherit;background:none;border:0;box-shadow:none;padding:0;min-width:18px}
#app aside .settings-nav{margin-top:20px}
#app .session-card{margin-top:24px;border:0;border-top:1px solid var(--studio-border);background:none;border-radius:0;padding:20px 8px;box-shadow:none;color:var(--studio-muted);font-size:13px}
#app .session-card strong{color:var(--studio-ink);font-size:13px}
#app .session-card .dot{background:var(--studio-brand)}
#app .sidebar-footer{display:none}
#app main{max-width:1600px;min-width:0;padding:24px 28px 40px}
#app h1,#login h1{font-family:inherit;font-size:clamp(24px,2.2vw,30px);font-weight:700;letter-spacing:-.025em;line-height:1.15}
#app h2{font-size:18px;line-height:1.3;font-weight:650}
#app .pagehead,#app #page-ai .pagehead{background:none;border:0;border-radius:0;box-shadow:none;padding:0;margin-bottom:24px;gap:16px}
#app .pagehead h1,#app #page-ai .pagehead h1{font-size:clamp(24px,2.2vw,30px);margin-bottom:8px}
#app .pagehead p:last-child,#app #page-ai .pagehead p:last-child{display:block;font-size:14px;max-width:72ch}
#app .eyebrow{color:var(--studio-muted);font-size:11px;letter-spacing:1.2px;margin-bottom:8px}
#app .panel{background:white;border:1px solid var(--studio-border);border-radius:12px;padding:20px;margin-bottom:20px;box-shadow:none}
#app .panel-label{color:var(--studio-muted);font-size:11px;letter-spacing:.7px}
#app button,#app .button,#app .filebutton,#login button{border-radius:8px;min-height:44px;box-shadow:none;text-shadow:none;transition:background-color .15s,border-color .15s;transform:none}
#app button:hover,#app .button:hover,#app button:active,#app .button:active,#login button:hover{transform:none;box-shadow:none;filter:none}
#app .primary,#login .primary{background:var(--studio-brand);border:1px solid var(--studio-brand);color:white}
#app .primary:not(:disabled):hover,#login .primary:not(:disabled):hover{background:var(--studio-brand-hover);border-color:var(--studio-brand-hover);transform:none;box-shadow:none}
#app .secondary{background:white;border-color:var(--studio-border)!important;color:var(--studio-ink)}
#app .secondary:not(:disabled):hover,#app .quiet:not(:disabled):hover{background:var(--studio-brand-soft)}
#app .quiet{background:none;color:var(--studio-muted);box-shadow:none}
#app input:not([type=checkbox]):not([type=range]),#app select,#app textarea,#login input{background:white;border:1px solid #7b8798;border-radius:8px;min-height:44px;box-shadow:none;color:var(--studio-ink)}
#app label{font-size:14px;font-weight:600;line-height:1.4}
#app .small{font-size:13px;line-height:1.5}
#app .checkline{font-weight:400}
#app button:focus-visible,#app a:focus-visible,#app input:focus-visible,#app select:focus-visible,#app textarea:focus-visible,#app summary:focus-visible,#login :focus-visible,.studio-admin-dialog :focus-visible{outline:3px solid var(--studio-focus);outline-offset:3px}
#app .filebutton:focus-within{outline:3px solid var(--studio-focus);outline-offset:3px}
#app .capture-media,#app .preview-wrap{background:var(--studio-stage);border:1px solid var(--studio-border);border-radius:8px;box-shadow:none}
#app .camera-icon{background:white;border-color:var(--studio-border);box-shadow:none;color:var(--studio-muted)}
#app .empty h2{font-family:inherit;font-size:22px;font-weight:650}
#app .capture-next{background:var(--studio-brand-soft);border:1px solid #ccd6fa;border-radius:8px;box-shadow:none}
#app #guestSelection{border-top:1px solid var(--studio-border)}
#app .chip,#app .face-choice,#app .provider-row{background:white;border:1px solid var(--studio-border)!important;box-shadow:none;border-radius:8px;color:var(--studio-ink)}
#app .chip[aria-pressed=true],#app .face-choice[aria-pressed=true],#app .provider-row:has(input:checked){background:var(--studio-brand-soft);border-color:var(--studio-brand)!important;color:var(--studio-brand);box-shadow:none}
#app .asset-card.selected{border-color:var(--studio-brand);background:var(--studio-brand-soft)}
#app .preset-art-card[aria-pressed=true],#app .library-card[aria-pressed=true]{border:2px solid var(--studio-brand);box-shadow:none;background:var(--studio-brand-soft)}
#app .library-icon{color:var(--studio-brand)}
#app .pill{background:#edf1f7;border-color:var(--studio-border);color:var(--studio-muted);border-radius:5px}
#app .status{border-radius:5px;font-size:12px}
#app .status.complete{background:#e9f5ed;color:#185a35}
#app .status.failed,#app .status.interrupted{background:#fcebed;color:#9d2036}
#app .job{background:white;border-color:var(--studio-border);border-radius:8px;box-shadow:none}
#app #artworkSetupStatus{background:var(--studio-brand-soft);border-radius:8px}
#app .ai-actionbar{left:200px;background:white;border-color:var(--studio-border);box-shadow:none}
#app .app-footer{background:white;color:var(--studio-muted);border-color:var(--studio-border)}
.activity-spinner{border-color:#d5ddeb;border-top-color:var(--studio-brand)}
.login-wrap{background:#e9eef8}.login-card{background:white;border:1px solid var(--studio-border);box-shadow:0 12px 32px #10162c14;border-radius:12px;padding:32px}
.login-activity{color:var(--studio-brand)}
.studio-admin-dialog{width:min(460px,calc(100vw - 32px));max-height:90dvh;overflow:auto;border:1px solid var(--studio-border);border-radius:12px;padding:24px;background:white;color:var(--studio-ink);box-shadow:0 12px 32px #10162c30}
.studio-admin-dialog::backdrop{background:#14234280}
.studio-admin-dialog h2{font-size:22px;margin:0 0 12px}.studio-admin-dialog p{margin-bottom:16px}.studio-admin-dialog .admin-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.studio-admin-dialog button{min-height:44px;border-radius:8px;box-shadow:none;text-shadow:none;transform:none}.studio-admin-dialog .primary{background:var(--studio-brand);color:white}.studio-admin-dialog input{width:100%;min-height:44px}.studio-admin-dialog .primary:not(:disabled):hover{background:var(--studio-brand-hover);box-shadow:none;transform:none}
@media(max-width:960px){
 #app .ai-actionbar{left:0}
 #app .shell{display:block}#app aside{padding:12px 16px;border-right:0;border-bottom:1px solid var(--studio-border)}
 #app aside .workspace-label,#app .session-card{display:none}
 #app aside nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;overflow:visible}
 #app aside .nav{margin:0;justify-content:center;text-align:center;padding:10px 8px;font-size:13px;flex-wrap:wrap}
 #app aside .settings-nav{margin-top:0}#app aside .navnum{display:none}
 #app .capture-layout,#app .artwork-layout,#app .output-layout{grid-template-columns:1fr}
 #app .editor,#app .output-preview{position:static}#app .capture-controls{order:0}
 #app main{padding:24px 20px 40px}
}
@media(max-width:600px){
 #app>header{padding:12px 16px;gap:12px}#app .colorvision-logo{width:170px}#app .brand{min-width:0}
 #app .header-actions{justify-content:flex-start;width:100%;margin-left:0}#app .header-actions button{font-size:13px;padding:8px 12px}
 #app aside nav{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}#app aside .nav{font-size:13px}
 #app main{padding:20px 16px 32px}#app .panel{padding:16px}#app .pagehead{margin-bottom:20px}
 #app .pagehead .eyebrow{display:block}#app .pagehead p:last-child{display:block}
 #app .capture-media{min-height:260px}#app .connections{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){#app *,#login *{transition:none!important;animation:none!important}}
@media print{.studio-admin-dialog{display:none!important}}

/* Mobile station controls: keep all actions and labels available. */
#app select {
  -webkit-appearance: none;
  appearance: none;
  min-height: 44px;
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 6l4.5 4.5L12.5 6' fill='none' stroke='%2348516b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right 12px center;
  background-repeat: no-repeat;
  background-size: 16px 16px;
}
@media (max-width: 450px) {
  #app > header { padding: 8px 12px; gap: 4px 8px; }
  #app .brand { width: 100%; }
  #app .colorvision-logo { width: 156px; }
  #app .header-actions { gap: 4px 8px; }
  #app .header-actions button, #app .header-actions .button { min-height: 44px; padding: 7px 9px; font-size: 13px; }
  #app .pilot { padding: 2px 5px; font-size: 10px; }
}

#app #refinementControls input[type="range"] { min-height: 44px; accent-color: #1432aa; cursor: pointer; }