:root{color-scheme:light;--red:#245b60;--ink:#292a27;--muted:#72756b;--line:#dddcd4}*{box-sizing:border-box}body{margin:0;font:14px system-ui,sans-serif;color:var(--ink);background:#f4f3ee}header{height:78px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:16px 28px}h1{font:700 24px Georgia,serif;margin:0;color:var(--red)}header p{margin:5px 0 0;font-size:12px;color:var(--muted);letter-spacing:.07em}header span{font-size:12px;border:1px solid var(--line);padding:8px 12px;border-radius:30px}main{display:grid;grid-template-columns:365px 1fr;height:calc(100vh - 78px)}aside{overflow:auto;background:#fafaf7;border-right:1px solid var(--line);padding:20px}section{margin-bottom:22px}h2{font-size:13px;text-transform:uppercase;letter-spacing:.09em;margin:0 0 13px}small,.hint{color:var(--muted);font-size:12px;line-height:1.5}.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}label{display:block;font-size:12px;line-height:1.4}input,select,button{font:inherit;color:#252723!important;background:#fff!important;border:1px solid #c7c9bf;border-radius:6px}input[type=number],select{display:block;width:100%;padding:9px;margin-top:4px;font-size:15px;font-variant-numeric:tabular-nums}input:focus{outline:2px solid #b56060;outline-offset:1px}input[type=file]{width:100%;padding:7px;font-size:11px;margin:10px 0}input[type=range]{width:100%;accent-color:var(--red)}button{padding:9px 11px;cursor:pointer}button:hover{border-color:var(--red);background:#f9eeee!important}button.primary{background:var(--red)!important;color:white!important;border-color:var(--red)}.wide{width:100%}.presets{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin:10px 0}.presets button{font-size:12px;padding:7px}.labelcard{background:#fff;border:1px solid var(--line);border-radius:10px;padding:13px;margin:10px 0}.labelcard h3{margin:0;font-size:15px}.check{display:flex;gap:7px;align-items:center;margin:10px 0}#stage{position:relative;min-width:0;overflow:hidden;background:radial-gradient(ellipse at 50% 42%,#fff 0,#f0f0e9 78%)}canvas#view{display:block;width:100%;height:100%;touch-action:none;cursor:grab}canvas#view:active{cursor:grabbing}.toolbar{position:absolute;top:18px;left:20px;right:20px;display:flex;gap:6px;flex-wrap:wrap}.toolbar button{font-size:12px;background:#fffffff2!important}.stats{position:absolute;bottom:22px;left:24px;right:24px;background:#ffffffee;border:1px solid var(--line);border-radius:10px;padding:15px;pointer-events:none}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.stat b{display:block;font-size:19px;font-weight:600;margin-top:3px}.stat span{font-size:11px;color:var(--muted)}#warnings{font-size:12px;color:#a44222;line-height:1.55;margin-top:9px}.instruction{position:absolute;top:65px;left:24px;font-size:12px;color:var(--muted);pointer-events:none}#viewname{position:absolute;right:24px;top:75px;color:var(--red);font-size:11px;text-transform:uppercase;letter-spacing:.1em}.legend{margin-top:10px;font-size:11px;color:var(--muted)}details{margin-top:12px;font-size:12px;line-height:1.6}summary{cursor:pointer}#error{position:absolute;inset:25%;background:#fff;padding:25px;display:none;color:#922d32}.foot{border-top:1px solid var(--line);padding-top:14px}.pill{color:var(--red);font-size:11px}#status{min-height:18px;font-size:12px;color:var(--red)}@media(max-width:850px){main{grid-template-columns:310px 1fr}aside{padding:12px}.stats-grid{grid-template-columns:1fr 1fr}.stat b{font-size:16px}.toolbar{left:10px;right:10px}.instruction{top:106px}}@media(max-width:620px){header{height:70px;padding:12px}header span{display:none}h1{font-size:21px}main{display:flex;flex-direction:column-reverse;height:auto}#stage{height:70vh;min-height:480px}aside{overflow:visible;border:0}.stats{bottom:12px;left:12px;right:12px;padding:10px}}

/* Visor con espacio propio: los controles nunca tapan el tarro. */
#stage{display:flex;flex-direction:column;min-height:0;padding:14px 18px;gap:8px}
.jar-switch{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.jar-switch button{font-size:12px;line-height:1.4;padding:8px 14px}
.jar-switch button[aria-pressed="true"]{background:var(--red)!important;color:white!important;border-color:var(--red)}
.toolbar{position:static;justify-content:center;flex-shrink:0;margin:0;gap:5px}
.toolbar button{min-height:36px}
.instruction{position:static;text-align:center;font-size:11px;flex-shrink:0}
#canvasframe{position:relative;flex:1;min-height:0;width:100%}
canvas#view{position:absolute;inset:0;width:100%;height:100%}
#viewname{top:10px;right:10px;pointer-events:none}
#zoomtools{position:absolute;bottom:8px;right:8px;display:flex;gap:4px}
#zoomtools button{min-width:38px;background:#ffffffd9!important;font-size:15px;padding:7px}
.stats{position:static;flex-shrink:0;padding:12px;pointer-events:auto;margin:0}
#statsToggle{display:none}
#mobileControls{display:none}
#stage.expanded{position:fixed;inset:0;z-index:1000;width:100%;height:100vh;height:100dvh;min-height:0;padding:12px;background:#f4f4ee}
body.viewer-open{overflow:hidden}
@media(max-width:920px){
header{height:60px;padding:9px 14px}header span{display:none}header h1{font-size:21px}header p{font-size:9px;margin-top:3px}
main{display:flex;flex-direction:column-reverse;height:auto}
aside{overflow:visible;border:0;padding:18px;scroll-margin-top:10px}
#stage{height:calc(100vh - 60px);height:calc(100svh - 60px);min-height:510px;padding:9px 10px;gap:7px;flex:none}
.jar-switch{gap:6px;flex-wrap:nowrap}.jar-switch button{flex:1;padding:7px 5px;font-size:12px}
.toolbar button{padding:6px 9px;font-size:12px;min-height:34px}
#mobileControls{display:block}
.stats{padding:7px 10px;border-radius:8px}
#statsToggle{display:block;font-size:12px;width:100%;padding:6px;background:transparent!important;border:0;text-align:left;color:var(--red)!important}
.stats-grid,.stats .legend{display:none}
.show-stats .stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.show-stats .stats .legend{display:block}
.stat b{font-size:16px}#warnings{font-size:11px;margin-top:4px;line-height:1.35}
input[type=number],select{font-size:16px}
#viewname{font-size:10px;top:2px;right:3px}
#stage.expanded{min-height:0;padding-top:max(8px,env(safe-area-inset-top));padding-bottom:max(8px,env(safe-area-inset-bottom))}
}
@media(max-height:520px) and (max-width:920px){
#stage{min-height:430px}#stage.expanded{min-height:0;gap:3px}.expanded .instruction,.expanded .stats{display:none}.expanded .jar-switch{position:absolute;left:8px;top:8px;flex-direction:column;width:135px;z-index:1}.expanded .toolbar{margin-left:145px}.expanded .jar-switch button{font-size:10px;padding:5px}.expanded #viewname{display:none}
}

details.panel,.labelcard{border:1px solid var(--line);border-radius:10px;background:#fff;padding:12px;margin:0 0 12px}details.panel>summary,.labelcard>summary{font-weight:650;font-size:14px;padding:3px 0 10px}details.panel[open]>summary{margin-bottom:8px;border-bottom:1px solid #eee}input[type=color]{width:100%;height:40px;margin-top:4px;padding:3px}input[type=file]{min-height:40px}#backdrop{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}#canvasframe{border-radius:12px;overflow:hidden;background:repeating-conic-gradient(#eee 0% 25%,#fff 0% 50%) 0/20px 20px}.image-note{word-break:break-word}#returnView{display:none}@media(max-width:920px){#returnView{display:block;position:sticky;bottom:10px;margin:10px auto;z-index:5;box-shadow:0 2px 15px #0002}summary{min-height:40px}button{min-height:40px}}
input.measure-slider{display:block;width:100%;height:28px;margin:4px 0 0;cursor:ew-resize;touch-action:pan-y;padding:0}input.measure-slider::-webkit-slider-thumb{cursor:grab}@media(max-width:920px){input.measure-slider{height:36px}}

:root{--ink:#243231;--line:#d8dfda}body{background:#f2f4f0}h1{font-family:system-ui,sans-serif;font-size:23px;letter-spacing:-.04em}header p{letter-spacing:.05em}main{grid-template-columns:385px 1fr}.brand-row{display:flex;align-items:center;gap:12px;min-width:0}.brand-row img{max-width:70px;max-height:44px;object-fit:contain}.brand-row>div{min-width:0}#headerTitle,#headerSubtitle{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#presentationToggle{flex-shrink:0;background:var(--red)!important;color:#fff!important;border-color:var(--red)}input[type=text],textarea{width:100%;background:white!important;color:#243231!important;font:inherit;padding:10px;border:1px solid #c7c9bf;border-radius:6px;display:block;margin:5px 0 12px}textarea{min-height:74px;resize:vertical}#savedConfigs{margin:12px 0}.jar-switch{align-items:center;flex-wrap:nowrap}.jar-switch select{width:min(320px,65%);margin:0;padding:8px;font-size:13px}.jar-switch span{font-size:12px;color:var(--muted)}.jar-switch label{font-weight:600}#clientNotes{display:none;padding:10px 24px;background:#fff;margin:0;white-space:pre-wrap;border-bottom:1px solid var(--line);max-height:100px;overflow:auto;font-size:13px}.client-only{display:none}.presentation aside,.presentation .jar-switch,.presentation #reset,.presentation #mobileControls{display:none!important}.presentation main{display:block;height:calc(100vh - 78px)}.presentation #stage{height:100%;min-height:420px}.presentation .client-only{display:inline-block}.presentation #clientNotes:not([hidden]){display:block}.presentation:has(#clientNotes:not([hidden])) main{height:calc(100vh - 148px)}.presentation #headerTitle{font-size:24px}
@media(max-width:920px){main{display:flex;grid-template-columns:none}.brand-row{max-width:calc(100% - 115px)}header{gap:10px}.brand-row img{max-width:38px;max-height:32px}.brand-row h1{font-size:18px}.brand-row p{font-size:8px}.jar-switch select{font-size:14px;width:70%}.jar-switch #activeGeometry{display:none}.presentation main{height:calc(100svh - 60px)}.presentation:has(#clientNotes:not([hidden])) main{height:calc(100svh - 130px)}.presentation #stage{min-height:420px}.presentation #headerTitle{font-size:18px}#clientNotes{padding:8px 12px}}

#historyBar{display:flex;justify-content:center;gap:6px;flex-shrink:0}#historyBar button{min-height:38px;font-size:12px;padding:7px 12px}.presentation #historyBar{display:none}#closureFitInfo{line-height:1.5}#packformaLogo{max-width:38vw}

#toast{position:fixed;bottom:16px;right:18px;max-width:min(420px,calc(100vw - 36px));background:#073c52;color:#fff;border-radius:8px;padding:12px 16px;z-index:1200;font-size:13px;box-shadow:0 4px 22px #001a3028;pointer-events:none}#toast:empty{display:none}

/* Packforma 2: product-specific navigation, quiet neutral work surface. */
:root{--red:#087e8b;--ink:#153443;--line:#d7e1e4;--muted:#627784}body{background:#edf1f3}header{height:82px;padding:8px 22px;gap:18px}#packformaLogo{width:220px;height:68px;object-fit:contain;background:transparent;border-radius:0}header .brand-row{flex:1}header h1{font-size:18px}header p{font-size:10px}main{height:calc(100dvh - 82px);grid-template-columns:360px 1fr}aside{background:#f3f6f7;padding:16px}#stage{background:#edf1f3}button:hover{background:#e6f4f5!important}input:focus-visible,button:focus-visible,select:focus-visible{outline:2px solid #069bac;outline-offset:2px}input[type=range]{accent-color:#087e8b}#familyNav{display:flex;justify-content:center;gap:4px;flex-shrink:0}#familyNav button{min-width:112px;padding:10px 24px;border-radius:8px;font-weight:650;letter-spacing:.04em;text-transform:uppercase;font-size:12px;background:#fff!important;border-color:#cedcdf}#familyNav button[aria-pressed=true]{color:#fff!important;background:#073c52!important;border-color:#073c52;box-shadow:inset 0 -3px #00d8c3}.add-zone{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:end;margin-bottom:12px}.add-zone button{min-height:42px}.labelcard{padding:12px}.labelcard select{font-size:13px;margin-bottom:8px}#error{z-index:20;inset:15%;border:1px solid #c7d5dc;border-radius:12px}.copyright{font-size:11px;color:#627784;text-align:center;margin:18px 0}.presentation-credit{font-size:10px;color:#627784;align-self:center;text-decoration:none}.presentation #familyNav{display:none}.presentation #packformaLogo{width:160px;height:54px}.presentation main{height:calc(100dvh - 82px)}.presentation:has(#clientNotes:not([hidden])) main{height:calc(100dvh - 152px)}[hidden]{display:none!important}.stats{font-size:12px}#warnings{max-height:68px;overflow:auto}#bodyColor,#lidColor{height:42px}
@media(max-width:920px){header{height:65px;padding:6px 10px;gap:10px}#packformaLogo{width:142px;height:48px}header .brand-row{display:none}.presentation header .brand-row{display:flex;max-width:50%;}.presentation #packformaLogo{width:100px;height:40px}#presentationToggle{padding:8px 10px;font-size:12px}main{height:auto;display:flex}#familyNav{gap:5px}#familyNav button{flex:1;min-width:0;padding:9px 14px;font-size:11px}#stage{height:calc(100svh - 65px);min-height:510px}#warnings{max-height:43px}#canvasframe{min-height:180px}.presentation main{height:calc(100svh - 65px)}.presentation:has(#clientNotes:not([hidden])) main{height:calc(100svh - 135px)}#returnView{color:#fff!important}.labelcard input[type=file]{font-size:12px}.presentation-credit{font-size:9px}}
@media(max-width:920px) and (max-height:520px){#stage{min-height:520px}.expanded #familyNav{max-width:330px;align-self:center}.expanded #canvasframe{min-height:120px}.expanded .presentation-credit{display:none}.expanded .jar-switch{left:auto;right:10px;top:8px;width:45%;max-width:320px;flex-direction:row}.expanded .jar-switch select{width:100%;font-size:12px}.expanded .jar-switch label{display:none}.expanded #familyNav{width:45%;align-self:flex-start}.expanded #familyNav button{padding:8px 10px}.expanded .toolbar{margin-left:0}}
/* 2.2: quiet branding, readable credit and one-row mobile navigation. */
body:not(.presentation) #headerTitle{display:none}
#headerSubtitle{font-size:12px;letter-spacing:.01em;color:#536b77}
#packformaLogo{width:235px;height:62px;object-fit:contain}
.presentation-credit{font-size:12px;line-height:1.45;color:#4b606e;flex-shrink:0;text-align:center}
.label-position{margin:10px 0}.label-position button{font-size:12px}
input:disabled{opacity:.6;cursor:not-allowed}
button:disabled{opacity:.45;cursor:default}
#mobileHeaderTools,#packformaIcon,#mobileActionMenu{display:none}
@media(max-width:920px){
 header{height:56px;padding:6px 8px;gap:6px;position:sticky;top:0;z-index:1002;justify-content:flex-start}
 header #packformaLogo,header .brand-row,.presentation header .brand-row{display:none}
 #packformaIcon{display:block;width:42px;height:42px;object-fit:contain;flex:none}
 #mobileHeaderTools{display:flex;align-items:center;gap:4px;flex:1;min-width:0}
 #mobileFamily{margin:0;flex:1;min-width:65px;max-width:180px;height:44px;padding:6px 8px;font-size:14px}
 #mobileHeaderTools button{flex:none;width:44px;height:44px;padding:0;font-size:25px;line-height:1}
 #mobileMenuToggle{margin-left:auto}
 #familyNav,#historyBar{display:none!important}
 #stage{height:calc(100svh - 56px);min-height:300px;padding:7px 8px;gap:6px}
 #stage>.instruction{display:none}
 #stage>.jar-switch{flex:none;height:44px;align-items:center;gap:5px}
 .jar-switch>label{display:none}.jar-switch select{margin:0;width:100%;height:44px;font-size:14px}
 #canvasframe{min-height:120px}
 .presentation-credit{font-size:11px;line-height:16px;white-space:normal}
 .stats{padding:3px 8px}
 #statsToggle{min-height:36px;font-size:12px}
 #zoomtools button{min-width:44px;min-height:44px;padding:6px 10px}
 #mobileActionMenu:not([hidden]){display:block;position:fixed;top:62px;left:8px;right:8px;z-index:1005;padding:12px;max-height:calc(100dvh - 76px);overflow:auto;background:#fff;border:1px solid #ccdadf;border-radius:12px;box-shadow:0 8px 35px #092e4430}
 .mobile-menu-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
 #mobileMenuClose{width:44px;height:44px;font-size:24px;padding:0}
 #mobileActionMenu .toolbar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));position:static;gap:6px;margin:0}
 #mobileActionMenu button{min-height:44px;font-size:13px}
 .mobile-extra-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px}
 #mobileActionMenu #presentationToggle{font-size:13px}
 #mobileControls{display:block}
 #stage.expanded{inset:56px 0 0;height:calc(100dvh - 56px);min-height:0;padding:6px 8px}
 body.viewer-open header{position:fixed;inset:0 0 auto}
 .expanded .jar-switch{position:static!important;max-width:none!important;width:100%!important;flex-direction:row!important}
 .expanded .jar-switch label{display:none!important}
 .expanded .presentation-credit{display:block}
 .presentation #mobileFamily,.presentation #undoEdit,.presentation #redoEdit{display:none}
 .presentation main,.presentation:has(#clientNotes:not([hidden])) main{height:calc(100svh - 56px)}
 .presentation #stage{height:100%;min-height:260px}
 .presentation #quickAddLabel{display:none}
 .presentation #mobileActionMenu .toolbar{display:grid}
 #toast{bottom:12px;font-size:12px;padding:10px 12px;max-width:calc(100vw - 24px);right:12px}
}
@media(max-width:920px) and (max-height:520px){
 #stage{min-height:260px}
 #stage>.jar-switch{height:38px}.jar-switch select{height:38px}
 .stats:not(.show-stats){padding:0;border:0;background:transparent}
 #statsToggle{min-height:30px;font-size:11px;padding:4px}
 .presentation-credit{font-size:10px;line-height:14px}
}
@media(max-width:920px){
 body.presentation{height:100svh;display:flex;flex-direction:column}
 body.presentation>header{flex:0 0 56px}
 .presentation #clientNotes{flex:none;max-height:70px}
 .presentation main,.presentation:has(#clientNotes:not([hidden])) main{height:auto;flex:1;min-height:0}
 .presentation #stage{height:100%;min-height:0}
}

@media(min-width:921px){body:not(.presentation) #headerTitle{display:block;font-size:15px;line-height:1.3}body:not(.presentation) #headerSubtitle{font-size:12px}}
#boxNetDialog{border:1px solid #b8cbd0;border-radius:12px;padding:16px;width:min(1080px,96vw);max-width:96vw;max-height:94dvh;color:#213941;background:#f5f7f8}#boxNetDialog::backdrop{background:#0926309c}.net-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.net-toolbar strong{margin-right:auto}.net-toolbar button{min-height:44px}.net-zoom{display:flex;align-items:center;gap:12px;max-width:380px}.net-zoom input{flex:1}#boxNetScroll{overflow:auto;max-height:66dvh;background:#dce5e8;padding:12px;overscroll-behavior:contain}#boxNetImage{margin:auto;background:white;min-width:180px}#boxNetImage svg{display:block;width:100%;height:auto}#familyNav button{min-width:0}body[data-family=box] #quickAddLabel{display:none!important}@media(max-width:920px){#boxNetDialog{padding:10px}.net-toolbar strong{width:100%}#boxNetScroll{max-height:58dvh}}

#boxPanel>details{margin:12px 0;border:1px solid #d5dfe1;border-radius:8px;padding:10px}#boxPanel>details>summary{font-weight:650;padding:5px 0}#boxStickerList details{margin:10px 0;border:1px solid #d4dfe0;border-radius:8px;padding:10px;background:#fff}#boxStickerList summary{padding:8px 0;font-weight:600}#boxStickerList input[type=text]{margin-bottom:8px}#boxStickerList button{min-height:42px}
#mobileBrand{display:none}
#mobileBrand span{display:block;font:inherit;color:inherit;padding:0;border:0;border-radius:0}
#autoRotation{position:absolute;left:8px;top:8px;z-index:3;min-height:36px;padding:6px 10px;border-radius:18px;background:#ffffffde!important;font-size:11px;color:#45606a}
#autoRotation[aria-pressed=true]{border-color:#087e8b;color:#076776}
@media(max-width:920px){
 #mobileBrand{display:flex;align-items:center;gap:4px;flex:none;white-space:nowrap;font-size:15px;font-weight:700;color:#073c52;letter-spacing:-.4px}
 #mobileBrand #packformaIcon{width:30px;height:30px}
 #mobileHeaderTools button{width:36px;font-size:23px}
 #mobileFamily{min-width:62px;padding:6px 3px;font-size:13px}
}
@media(max-width:360px){
 header{gap:4px}
 #mobileBrand{font-size:13px;gap:3px}
 #mobileBrand #packformaIcon{width:26px;height:26px}
 #mobileHeaderTools{gap:3px}
 #mobileHeaderTools button{width:34px}
 #mobileFamily{min-width:58px;font-size:12px}
}

:root{--app-bg:#edf1f3;--app-panel:#f7f9fa;--app-card:#fff;--app-input:#fff;--app-text:#223a46;--app-muted:#627784;--app-border:#d4dfe3;--app-hover:#e5f2f3;--app-accent:#087e8b}
html[data-theme=dark]{color-scheme:dark;--app-bg:#20262c;--app-panel:#272f36;--app-card:#2e3840;--app-input:#202930;--app-text:#e1e9ed;--app-muted:#abbcc5;--app-border:#47545e;--app-hover:#354d55;--app-accent:#41cebd;--ink:#e1e9ed;--muted:#abbcc5;--line:#47545e}
body{background:var(--app-bg);color:var(--app-text)}
header{height:56px;padding:6px 14px;gap:16px;background:var(--app-panel);border-color:var(--app-border)}
header #packformaLogo,header .brand-row{display:none!important}
header #mobileBrand{display:flex;gap:5px;align-items:center;white-space:nowrap;font-size:18px;color:var(--app-text);letter-spacing:-.4px;flex:none}
header #mobileBrand #packformaIcon{display:block;width:32px;height:32px}
#appActions,#appRight{display:flex;align-items:center;gap:5px}#appRight{margin-left:auto}
#appActions button{width:auto;margin:0;min-height:34px;padding:6px 10px;font-size:12px;white-space:nowrap}
#appRight #historyBar{display:flex!important;gap:3px;border-left:1px solid var(--app-border);padding-left:8px}
#appRight #historyBar button{width:34px;min-height:34px;padding:0;font-size:22px}
#appTheme{width:34px;min-height:34px;font-size:20px;padding:0}
#appSaveState{display:block;font-size:10px;border:0;padding:0 6px;color:var(--app-muted);white-space:nowrap}
#appSaveState[data-dirty=true]{color:var(--app-accent)}
#appToolbar{display:flex;align-items:center;gap:12px;padding:7px 14px;background:var(--app-panel);border-block:1px solid var(--app-border);flex:none;min-width:0}
.app-family-group{display:flex;align-items:center;gap:12px;flex:1;min-width:0}.app-view-group{display:flex;align-items:center;gap:7px;flex:none}
#appToolbar #familyNav{justify-content:flex-start;gap:3px;flex:none}
#appToolbar #familyNav button{min-width:0;min-height:34px;padding:7px 10px;font-size:11px;letter-spacing:0;text-transform:none;border-radius:5px}
#appToolbar .jar-switch{position:static!important;display:flex;align-items:center;gap:5px;flex:1;margin:0;min-width:230px;width:auto!important;max-width:none!important;padding-left:10px;border-left:1px solid var(--app-border)}
#appToolbar .jar-switch label{display:none}#appToolbar #activeGeometry{display:none}
#appToolbar .jar-switch select{flex:1;width:100%;min-width:0;max-width:none;margin:0;padding:6px 24px 6px 8px;font-size:12px;height:34px}
#appToolbar .toolbar{display:flex;flex-wrap:nowrap;justify-content:flex-start;gap:3px;margin:0!important;padding-left:8px;border-left:1px solid var(--app-border)}
#appToolbar button{white-space:nowrap}#appToolbar .toolbar button,#appToolbar #quickAddLabel{min-height:34px;padding:6px 8px;font-size:11px}
#appToolbar #autoRotation,#mobileActionMenu #autoRotation{position:static;border-radius:6px;min-height:34px;padding:6px 9px;white-space:nowrap;font-size:12px}
#appFileMenu{position:fixed;z-index:4500;width:280px;max-width:calc(100vw - 16px);max-height:70dvh;overflow:auto;padding:8px;background:var(--app-card);color:var(--app-text);border:1px solid var(--app-border);border-radius:8px;box-shadow:0 10px 36px #0003}
#appFileMenu button{display:block;width:100%;margin:0;text-align:left;white-space:normal;min-height:36px;padding:8px 10px;font-size:12px;border:0;background:transparent!important}
#appRecents{border-top:1px solid var(--app-border);margin-top:7px;padding-top:9px}#appRecents small{display:block;padding:0 10px 4px;color:var(--app-muted)}#appRecents p{font-size:11px;color:var(--app-muted);padding:0 10px}
aside{background:var(--app-panel);border-color:var(--app-border);scrollbar-width:thin;scrollbar-color:var(--app-border) transparent}
#controls .panel{border:0;border-bottom:1px solid var(--app-border);border-radius:0;padding:12px 4px;background:transparent;box-shadow:none;margin-bottom:3px}
#controls .panel>summary{font-size:12px;letter-spacing:.01em;padding:5px 3px;min-height:30px;color:var(--app-text)}
#controls .panel[open]>summary{border:0;margin-bottom:10px;font-weight:750}
#controls .labelcard,#boxStickerList details{border:1px solid var(--app-border);background:var(--app-card);border-radius:7px;padding:10px}
#controls .app-selected{border-color:var(--app-accent)!important;box-shadow:inset 3px 0 0 var(--app-accent)}
.app-lock{display:block;margin:0 0 8px auto!important;font-size:11px;padding:4px 8px;min-height:30px}
#appSelectionOutline{position:absolute;pointer-events:none;border:1px dashed #0ba99588;border-radius:2px;z-index:2}
#appSelectionCaption{position:absolute;left:-1px;bottom:100%;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:#126b72df;color:#fff;font:10px system-ui;padding:3px 5px;border-radius:3px 3px 0 0}
.presentation #appSelectionOutline{display:none!important}
html[data-theme] button,html[data-theme] input,html[data-theme] select,html[data-theme] textarea{background:var(--app-input)!important;color:var(--app-text)!important;border-color:var(--app-border)}
html[data-theme] button:hover{background:var(--app-hover)!important}
html[data-theme] button:disabled{opacity:.38;cursor:default}
html[data-theme] #familyNav button[aria-pressed=true],html[data-theme] [data-view][aria-pressed=true]{background:#0b626d!important;color:#f4ffff!important;border-color:#1ba9a7;box-shadow:inset 0 -2px #4de0c8}
html[data-theme] #autoRotation[aria-pressed=true]{color:var(--app-accent)!important;border-color:var(--app-accent)}
html[data-theme] .primary,html[data-theme] #presentationToggle{background:#087481!important;color:#fff!important;border-color:#087481!important}
html[data-theme=dark] h1,html[data-theme=dark] h2,html[data-theme=dark] h3,html[data-theme=dark] strong{color:var(--app-text)}
html[data-theme=dark] .hint,html[data-theme=dark] small,html[data-theme=dark] label,html[data-theme=dark] p{color:var(--app-muted)}
html[data-theme=dark] #stage,html[data-theme=dark] .stats,html[data-theme=dark] #clientNotes{background:var(--app-bg);color:var(--app-text);border-color:var(--app-border)}
html[data-theme=dark] .stat,html[data-theme=dark] #mobileActionMenu,html[data-theme=dark] dialog,html[data-theme=dark] #error{background:var(--app-card);color:var(--app-text);border-color:var(--app-border)}
html[data-theme=dark] #warnings{color:#b9ccbf!important}html[data-theme=dark] a{color:#69d9d1}
html[data-theme=dark] #boxPanel>details{border-color:var(--app-border)}html[data-theme=dark] #boxNetScroll{background:#192127}html[data-theme=dark] #boxNetImage{background:#fff}
html[data-theme=dark] .pf-legal-wrap,html[data-theme=dark] .pf-legal-card,html[data-theme=dark] .pf-legal-head{background:#272f36f5;color:var(--app-text);border-color:var(--app-border)}
html[data-theme=dark] .pf-legal-copy,html[data-theme=dark] .pf-legal-note,html[data-theme=dark] .pf-legal-body p,html[data-theme=dark] .pf-legal-body li{color:var(--app-muted)!important}
html[data-theme=dark] .pf-legal-warning{background:#293e44;border-color:#45616a;color:#dbe8ec!important}
html[data-theme=dark] .pf-legal-links button,html[data-theme=dark] .pf-stage-legal button{color:#c4d3db!important}

/* Dialogs for product naming and visible sharing actions. */
.pf-modal{width:min(520px,calc(100vw - 28px));max-width:none;padding:0;border:1px solid var(--app-border,#d4dfe3);border-radius:14px;background:var(--app-card,#fff);color:var(--app-text,#223a46);box-shadow:0 24px 80px #0005}
.pf-modal::backdrop{background:#10182099;backdrop-filter:blur(3px)}
.pf-modal-card{position:relative;padding:24px;display:grid;gap:12px}
.pf-modal-card h2{margin:0;font-size:20px;letter-spacing:0;text-transform:none;color:inherit}
.pf-modal-card p{margin:0;color:var(--app-muted,#627784);line-height:1.5}
.pf-modal-card label{font-weight:600}
.pf-modal-card input{width:100%;min-width:0;padding:11px 12px;margin:0;background:var(--app-input,#fff)!important;color:var(--app-text,#223a46)!important;border:1px solid var(--app-border,#d4dfe3);border-radius:8px;font:inherit}
.pf-modal-actions,.pf-share-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:5px}
.pf-modal-actions{justify-content:flex-end}
.pf-modal button,.pf-share-actions a{font:inherit;border:1px solid var(--app-border,#d4dfe3);border-radius:8px;padding:10px 13px;background:var(--app-input,#fff);color:var(--app-text,#223a46);text-decoration:none;cursor:pointer}
.pf-modal button.primary{background:#087481;color:#fff;border-color:#087481}
.pf-modal-close{position:absolute;right:14px;top:14px;padding:4px 10px!important;font-size:22px!important;line-height:1}
.pf-share-link{display:flex;gap:8px;align-items:stretch}
.pf-share-link input{flex:1}
.pf-share-link button{flex:none}
.pf-share-status{min-height:1.4em;color:var(--app-accent,#087e8b)!important;font-weight:600}
.pf-share-actions a{display:inline-flex;align-items:center;justify-content:center}
.pf-modal [hidden]{display:none!important}
html[data-theme] .pf-modal button,html[data-theme] .pf-modal .pf-share-actions a{background:var(--app-input,#fff)!important;color:var(--app-text,#223a46)!important;border-color:var(--app-border,#d4dfe3)!important}
html[data-theme] .pf-modal button.primary{background:#087481!important;color:#fff!important;border-color:#087481!important}
@media(max-width:520px){.pf-modal-card{padding:20px}.pf-share-link{flex-direction:column}.pf-share-link button{width:100%}.pf-share-actions>*{flex:1 1 calc(50% - 8px)}}
.presentation #appActions>button:not(#presentationToggle),.presentation #appRight{display:none!important}
.presentation #appActions{margin-left:auto}.presentation #appToolbar .app-family-group,.presentation #appToolbar #quickAddLabel{display:none!important}
.presentation #appToolbar{justify-content:center}
@media(min-width:921px){
 main{height:calc(100dvh - 56px - var(--app-toolbar-height,0px))}
 #stage>.instruction{display:none}
 #stage>#appToolbar{margin:-6px -6px 0;padding:6px;flex-wrap:wrap}
 .presentation main{height:calc(100dvh - 56px)}.presentation:has(#clientNotes:not([hidden])) main{height:calc(100dvh - 126px)}
}
@media(min-width:921px) and (max-width:1250px){
 #appToolbar{flex-wrap:wrap;gap:5px;padding:6px 12px}.app-family-group{flex-basis:100%}.app-view-group{width:100%;justify-content:flex-end}
 #appSaveState{display:none}header{gap:10px}#appActions button{padding:6px 8px}
}
@media(max-width:920px){
 header{height:56px;padding:6px 8px;gap:6px}header #mobileBrand{font-size:15px}header #mobileBrand #packformaIcon{width:30px;height:30px}
 #mobileFamily{max-width:none;min-width:132px;font-size:13px}#mobileHeaderTools{gap:4px}
 #mobileActionMenu #appActions{display:grid;grid-template-columns:1fr 1fr;gap:6px;grid-column:1/-1}
 #mobileActionMenu #appRight{display:flex;flex-wrap:wrap;justify-content:flex-end;grid-column:1/-1;margin:0}
 #mobileActionMenu #appSaveState{display:block;flex:1;font-size:11px}#mobileActionMenu #appRight #historyBar{display:flex!important}
 #mobileActionMenu #appActions button{min-height:44px;font-size:13px}#mobileActionMenu #autoRotation{min-height:44px;font-size:13px}
 .presentation #mobileActionMenu #appActions{display:flex}.presentation #mobileActionMenu #appRight{display:none!important}
}
@media(max-width:360px){header{gap:4px}header #mobileBrand{font-size:13px;gap:3px}header #mobileBrand #packformaIcon{width:26px;height:26px}#mobileFamily{min-width:125px;font-size:12px}}
html[data-theme] #familyNav button,html[data-theme] #autoRotation,html[data-theme] #zoomtools button{background:var(--app-input)!important;color:var(--app-text)!important;border-color:var(--app-border)}
html[data-theme] #familyNav button[aria-pressed=true]{background:#0b626d!important;color:#f4ffff!important}
html[data-theme] #autoRotation[aria-pressed=true]{color:var(--app-accent)!important;border-color:var(--app-accent)}
html[data-theme=dark] #boxNetDialog{background:var(--app-panel);color:var(--app-text);border-color:var(--app-border)}
html[data-theme] #familyNav button:hover,html[data-theme] #autoRotation:hover,html[data-theme] #zoomtools button:hover{background:var(--app-hover)!important}