/* PROSOCHE studio - lightweight customer theme, help, and compact desktop layout. */
.studio-quickbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.studio-quickbar button{background:#1e2a39;color:#fff5d7;border:1px solid #4d5a66;padding:8px 10px;border-radius:9px;font-size:12px;font-weight:800;white-space:nowrap}
.studio-quickbar button:hover,.studio-quickbar button:focus-visible{border-color:#f6c05a}
.studio-quickbar button[aria-pressed=true]{color:#161f29;background:#f8d177;border-color:#f8d177}
.studio-tutorial-dialog{padding:20px;border:0;border-radius:18px;background:#fff;color:#172330;max-width:min(720px,94vw);width:100%;box-shadow:0 26px 90px #0008}
.studio-tutorial-dialog::backdrop{background:#07101cce}
.studio-tutorial-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.studio-tutorial-head h2{font-size:clamp(18px,3vw,26px);margin:4px 0 12px}
#studioCloseHelp{border:1px solid #bdc4cc;background:#f7f8fa;border-radius:10px;width:40px;height:40px}
#studioTutorialVideo{display:block;aspect-ratio:16/9;background:#0a121c;border-radius:12px;max-width:100%}
.studio-tutorial-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:14px 0}
.studio-tutorial-steps>div{font-size:12px;background:#f4f5f7;border-radius:9px;padding:10px;color:#172230}
.studio-tutorial-steps b{display:inline-grid;place-items:center;width:23px;height:23px;margin-right:6px;background:#efba49;border-radius:50%}
.studio-grid{align-items:start!important}
.studio-grid>.whitebox{min-width:0}
/* Product chooser is always visible. Design buttons live in the tool panel. */
.tool-rail .product-choices{margin:0;padding:0;background:transparent}
.tool-rail .product-choices h3{font-size:18px;line-height:1.2;margin-bottom:2px}
.tool-rail .product-choices>.muted{font-size:11px;margin:0 0 11px}
.tool-rail .products{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.tool-rail .product-option{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:4px;padding:7px 5px;min-height:114px;font-size:12px;text-align:center;line-height:1.15}
.tool-rail .product-option img,.tool-rail .product-vector-thumb{width:100%;height:72px;object-fit:contain;background:#f4f4f4}
.tool-rail .product-option span:last-child{flex:initial}
.tool-rail .product-option small{display:none}
.tool-rail .info-card{display:none}
.tool-rail .product-settings{margin:16px 0 0;padding:12px;border-radius:12px;background:#f7f8fa;border:1px solid #e5e6e9}
.tool-rail .product-settings h4{font-size:14px;margin-bottom:5px}
.tool-rail .rail-heading{margin-bottom:13px}
.tool-rail .rail-heading h3{font-size:18px}
.tool-rail .rail-heading p{display:none}
.tool-rail .rail-foot{display:none}
.controls-panel>.tool-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;margin-bottom:15px}
.controls-panel>.tool-nav .tool-group-title,.controls-panel>.tool-nav .more-tools{grid-column:1/-1}
.controls-panel>.tool-nav .tool-choice{min-width:0;min-height:43px;display:flex;flex-direction:row;text-align:left;font-size:11px;padding:7px;gap:6px}
.controls-panel>.tool-nav .tool-icon{width:26px;height:26px;flex:none}
.controls-panel>.tool-nav .tool-more-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.controls-panel>.tool-nav .tool-more-list .tool-choice{width:100%}
.controls-panel #toolTitle{border-top:1px solid #dce1e7;padding-top:11px;margin-top:8px;font-size:17px}
.alignment-tools.studio-persistent-guides{margin:0 0 15px;padding:12px}
.alignment-tools.studio-persistent-guides h4{font-size:14px;margin-bottom:2px}
.alignment-tools.studio-persistent-guides p{font-size:10px}
.studio-persistent-guides .guide-toggles{gap:8px}
.studio-persistent-guides .guide-toggles label{font-size:11px!important}
.studio-persistent-guides .align-quick button{font-size:11px}
.studio-persistent-guides #guideStatus{font-size:10px}
.studio-grid .visual-panel{padding:13px}
.studio-grid .stage{width:100%}
.studio-grid .visual-panel .view-foot{flex-wrap:wrap}
@media(min-width:1101px){
 main{max-width:1600px;padding-inline:16px}
 .studio-grid{grid-template-columns:minmax(240px,25%) minmax(390px,1fr) minmax(300px,27%)!important;gap:11px;display:grid!important;align-items:start!important}
 .studio-grid>.tool-rail{grid-column:1!important;grid-row:1!important;position:sticky;top:10px}
 .studio-grid>.visual-panel{grid-column:2!important;grid-row:1!important}
 .studio-grid>.controls-panel{grid-column:3!important;grid-row:1!important;position:sticky;top:10px}
 .studio-grid .preview-background{aspect-ratio:1/1.03}
 .tool-rail .product-option img,.tool-rail .product-vector-thumb{height:84px}
}
@media(max-width:1100px){
 .studio-grid{display:flex!important;flex-direction:column!important;gap:10px}
 .studio-grid>.tool-rail{order:1!important;width:100%}
 .studio-grid>.visual-panel{order:2!important;width:100%}
 .studio-grid>.controls-panel{order:3!important;width:100%}
 .studio-grid>.tool-rail .products{grid-template-columns:repeat(4,minmax(0,1fr))}
 .studio-grid>.tool-rail .product-option{min-height:88px}
 .studio-grid>.tool-rail .product-option img,.studio-grid>.tool-rail .product-vector-thumb{height:65px}
 .studio-grid>.tool-rail .product-settings{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
 .studio-grid>.tool-rail .product-settings .swatches{min-width:100px}
 .studio-grid>.controls-panel>.tool-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow:visible}
 .studio-grid>.controls-panel>.tool-nav .more-tools{grid-column:1/-1}
 .studio-grid>.controls-panel>.tool-nav .tool-choice{flex-direction:row;min-width:0;width:auto;text-align:left}
 .studio-grid>.controls-panel>.tool-nav .tool-group-title{grid-column:1/-1}
}
@media(max-width:650px){
 .topnav{flex-wrap:wrap;gap:5px;padding:10px 12px}.topnav .brand span{font-size:20px}.navlinks{display:none}
 .studio-quickbar{width:100%;justify-content:space-between}.studio-quickbar button{flex:1;padding:10px 4px;font-size:11px}
 .studio-grid>.tool-rail .products{grid-template-columns:repeat(2,minmax(0,1fr))}
 .studio-grid>.tool-rail .product-settings{display:block}
 .studio-grid>.controls-panel>.tool-nav{grid-template-columns:repeat(2,minmax(0,1fr))}
 .studio-tutorial-steps{grid-template-columns:1fr}
}
/* Dark setting styles only studio panels; preserve garment photos and gallery image colors. */
body[data-studio-theme="dark"]{--canvas:#0d1620;--ink:#edf2f7;--muted:#b0bbc8;--border:#3b4653;--paper:#132231;background:#0d1620;color:#e9edf3}
body[data-studio-theme="dark"] .whitebox{background:#172432;border-color:#374656;color:#eaf0f6;box-shadow:0 5px 18px #0004}
body[data-studio-theme="dark"] .choose-section .path-card{background:#1a2a39;color:#f1f5f9;border-color:#45505c}
body[data-studio-theme="dark"] .path-copy p,body[data-studio-theme="dark"] .section-heading p{color:#c2cbd5}
body[data-studio-theme="dark"] .path-action.outline{background:#354558;color:#fff}
body[data-studio-theme="dark"] .tool-rail .product-option{background:#1a2b3b;border-color:#435161;color:#f1f4f7}
body[data-studio-theme="dark"] .tool-rail .product-option.active{background:#4d3919;border-color:#f2c45d}
body[data-studio-theme="dark"] .tool-rail .product-settings{background:#111e2a;border-color:#465564;color:#eaf0f6}
body[data-studio-theme="dark"] .product-settings label,body[data-studio-theme="dark"] .product-settings h4{color:#e7edf3}
body[data-studio-theme="dark"] .secondary,body[data-studio-theme="dark"] .tool-choice,body[data-studio-theme="dark"] .controls-panel input:not([type=range]),body[data-studio-theme="dark"] .controls-panel select,body[data-studio-theme="dark"] .controls-panel textarea{background:#213345;border-color:#506075;color:#f5f7f9}
body[data-studio-theme="dark"] .tool-choice.active{background:#f4c461!important;color:#10202d!important}
body[data-studio-theme="dark"] .more-tools summary{background:#253749;border-color:#516478;color:#f0f4f8}
body[data-studio-theme="dark"] .control-tip,body[data-studio-theme="dark"] .alignment-tools,body[data-studio-theme="dark"] .bg-removal-block{background:#263344;border-color:#5e5238;color:#f4f5f6}
body[data-studio-theme="dark"] .control-tip *,body[data-studio-theme="dark"] .alignment-tools *,body[data-studio-theme="dark"] .bg-removal-block *{color:inherit}
body[data-studio-theme="dark"] .view-buttons button:not(.active){background:#263748;color:#f2f5f9;border-color:#485968}
body[data-studio-theme="dark"] .view-foot button{background:#263748;color:#f2f5f9}
body[data-studio-theme="dark"] .side-guidance{background:#263749;color:#e7eaf1}
body[data-studio-theme="dark"] .visual-panel .pill{background:#243747;color:#f2f3f5}
body[data-studio-theme="dark"] #toolTitle{border-color:#425266}
body[data-studio-theme="dark"] .editor-help,body[data-studio-theme="dark"] .review-mini{color:#e3eaf0}
body[data-studio-theme="dark"] .price-box,body[data-studio-theme="dark"] .info-card{background:#263548;color:#fff;border-color:#4f6072}
body[data-studio-theme="dark"] .range-ends span,body[data-studio-theme="dark"] .range-heading label,body[data-studio-theme="dark"] .slider-description{color:#d5dde5!important}
body[data-studio-theme="dark"] .section-heading h2{color:#f6f7f9}
body[data-studio-theme="dark"] .gallery-section{color:#ecf0f5}
body[data-studio-theme="dark"] .gallery-section .design-card{background:#172432;border-color:#3c5060;color:#f4f4f4}
body[data-studio-theme="dark"] .studio-tutorial-dialog{background:#182636;color:#f4f6f9}
body[data-studio-theme="dark"] .studio-tutorial-steps>div{background:#273749;color:#f5f7f9}
/* Keep introduction concise so customers reach the actual studio quickly. */
@media(min-width:800px){
 .hero{min-height:174px;padding:24px 22px}
 .hero h1{font-size:clamp(39px,4vw,57px);margin:3px 0 6px}
 .hero p:not(.overline){font-size:13px;margin-bottom:9px}
 .choose-section{margin-top:-10px}
 .path-card{min-height:130px;padding:14px 19px;border-radius:14px}
 .path-icon{width:40px;height:40px;font-size:25px}
 .path-copy h2{font-size:19px;margin:2px 0 4px}
 .path-copy p{font-size:12px;margin-bottom:9px}
 .path-action{font-size:10px;padding:7px 10px}
 .path-shirt{width:90px;height:90px;padding-top:29px;font-size:12px;right:30px}
 .mini-gallery img{width:60px;height:78px}
 .section-heading{margin:16px 0 10px}
 .section-heading h2{font-size:24px;margin:2px 0}
}
/* Always readable in dark theme, including upload controls. */
body[data-studio-theme="dark"] .editor-help{background:#263746;color:#ecf1f6;border-radius:10px;padding:10px}
body[data-studio-theme="dark"] .upload-zone{background:#243849;color:#f6f6f6;border-color:#7d91a4}
body[data-studio-theme="dark"] .upload-zone strong,
body[data-studio-theme="dark"] .upload-zone small,
body[data-studio-theme="dark"] .upload-zone .upload-icon{color:#e7eff8}
body[data-studio-theme="dark"] .upload-zone .small-btn{background:#f1c15b;color:#142332}
body[data-studio-theme="dark"] .bg-removal-block{background:#223444;color:#e8f0f4}
body[data-studio-theme="dark"] .bg-removal-block strong{color:#f7f7f7}
body[data-studio-theme="dark"] .bg-removal-block p{color:#dae2ea}
body[data-studio-theme="dark"] .control-tip strong,body[data-studio-theme="dark"] .control-tip p{color:#eaf0f7}
.handheld-layout .studio-grid>.tool-rail,.handheld-layout .studio-grid>.controls-panel{position:static!important}