:root{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#26382f;background:#f9faf8;font-size:13px;--green:#2f5847;--line:#e3e8e2;--muted:#7a867d}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer;border:1px solid var(--line);border-radius:7px;background:#fff;color:#314138;padding:9px 12px;transition:background .12s}button:hover{background:#f0f4ef}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid #85b699;outline-offset:2px}button:disabled{opacity:.35;cursor:default}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline}[hidden]{display:none!important}.app{height:100dvh;min-height:600px;display:flex;flex-direction:column}.topbar{height:76px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:16px;padding:0 25px;flex:none}.brand{font-size:30px;font-weight:800;letter-spacing:-1.5px;line-height:1}.brand span{display:block;font-size:10px;font-weight:400;letter-spacing:.8px;margin-top:7px}.dev-badge{font-size:9px;letter-spacing:1px;border:1px solid #cedbcc;background:#f0f5ed;border-radius:5px;padding:5px 7px;color:#597152}.document-title{margin-left:24px;font-size:13px;font-weight:550}.document-title span{display:block;color:var(--muted);font-size:10px;font-weight:400;margin-top:5px}.topbar nav{margin-left:auto;display:flex;align-items:center;gap:12px}.topbar nav a{font-size:11px;color:var(--muted);margin-right:8px}.primary{background:var(--green);border-color:var(--green);color:#fff}.primary:hover{background:#244937;color:#fff}.wide{width:100%}.editor-layout{display:grid;grid-template-columns:76px 248px minmax(360px,1fr) 244px;flex:1;min-height:0}.rail{background:white;border-right:1px solid var(--line);display:flex;flex-direction:column;padding-top:16px;gap:9px}.rail>button{font-size:10px;font-weight:500;border:0;border-radius:0;background:transparent;padding:10px 2px;position:relative;line-height:1.6;color:#7a867d}.rail>button span{display:block;font-size:25px;font-weight:400;line-height:1.5}.rail>button.active{color:#2f5847;background:#f1f5ef}.rail>button.active:before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;background:var(--green);border-radius:0 3px 3px 0}.rail-foot{margin-top:auto;text-align:center;font-size:9px;letter-spacing:2px;color:#a4ada3;line-height:1.5;padding:20px}.left-panel{background:#fff;border-right:1px solid var(--line);padding:27px 19px;overflow:auto}.eyebrow{font-size:9px;letter-spacing:1.8px;font-weight:600;color:#8b958c;margin-bottom:12px}h1,h2{font-size:19px;font-weight:600;letter-spacing:-.6px;line-height:1.25;margin:0 0 10px}.muted{font-size:11px;line-height:1.7;color:var(--muted);margin:9px 0 19px}.product-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:24px}.product-card{padding:9px 8px 10px;background:#fafbf9;display:flex;flex-direction:column;align-items:center;gap:7px;min-height:100px;border:1px solid transparent}.product-card img{height:65px;width:80px;object-fit:contain;mix-blend-mode:multiply}.product-card span{font-size:10px}.product-card.active{border-color:#6e9275;background:#f1f5ed;box-shadow:0 0 0 1px #6e92751a}.divider{height:1px;background:var(--line);margin:22px 0}label{display:block;font-size:11px;color:#627366;margin:14px 0}input:not([type=checkbox]),select,textarea{display:block;width:100%;background:#fff;border:1px solid #dce3da;border-radius:6px;color:#2f4235;padding:9px 10px;margin-top:7px;min-width:0}textarea{resize:vertical;line-height:1.5}input[type=color]{height:37px;padding:4px}select{cursor:pointer}.source-note{font-size:10px;line-height:1.6;background:#f6f8f3;padding:12px;border-radius:6px;color:#87917f;margin-top:22px}.center-panel{display:flex;flex-direction:column;min-width:0;min-height:0;background:#eef1eb}.canvas-toolbar{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;flex:none;border-bottom:1px solid #e0e5db;background:#f7f9f4}.segmented{display:flex;padding:3px;background:#e8eee3;border-radius:7px}.segmented button{border:0;background:transparent;color:#84907e;font-size:11px;min-width:62px;padding:7px 12px}.segmented button.active{background:#fff;color:#334a38;box-shadow:0 1px 4px #1830100b}.toolbar-right{display:flex;gap:7px;align-items:center}.toolbar-right button{font-size:21px;padding:3px 9px;background:transparent;border-color:transparent}.toolbar-right select{margin:0;width:130px;font-size:10px;background:transparent;border-color:#dce5d8}.workspace{position:relative;flex:1;min-height:0;overflow:auto;display:grid;align-items:center;justify-items:center;padding:38px 44px;background-color:#edf0e9;background-image:radial-gradient(#cfd7c9 .7px,transparent .7px);background-size:15px 15px}.stage{position:relative;flex-shrink:0;isolation:isolate;margin:auto}.stage .canvas-container{position:absolute!important;inset:0}.stage .lower-canvas{position:absolute;inset:0;z-index:2}.stage .upper-canvas{z-index:5}.product-color{position:absolute;inset:0;z-index:1;mask-size:contain;mask-position:center;mask-repeat:no-repeat}.product-overlay{visibility:hidden;position:absolute;inset:0;z-index:3;width:100%;height:100%;pointer-events:none;object-fit:contain}.print-area{position:absolute;z-index:4;pointer-events:none;border:1px dashed #5b876d8c}.print-area>span{position:absolute;top:-19px;left:0;font-size:7px;letter-spacing:1.4px;color:#618166;white-space:nowrap}.guide{pointer-events:none;position:absolute;background:#dc79a4;z-index:6}.guide-x{top:0;bottom:0;width:1px}.guide-y{left:0;right:0;height:1px}.focus-print .product-color{background:white!important;mask-image:none!important}.focus-print .product-overlay{display:none}.focus-print{box-shadow:0 8px 30px #354d3220}.canvas-footer{height:63px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 24px;background:#f7f9f4;border-top:1px solid #dfe6da;font-size:11px}.canvas-footer>span{position:relative;padding-left:15px;font-size:10px}.canvas-footer small{display:block;font-size:9px;color:#8b9884;margin-top:3px}.green-dot{position:absolute;width:6px;height:6px;left:0;top:3px;background:#6b9573;border-radius:100%}.canvas-footer>div{display:flex;gap:3px;align-items:center}.canvas-footer button{background:none;border:none;padding:5px 8px;font-size:12px}.canvas-footer select{width:54px;padding:5px 3px;margin:0;font-size:10px;background:transparent}.canvas-footer #focus-print{font-size:10px;margin-right:10px}.properties-panel{background:white;border-left:1px solid var(--line);padding:27px 20px 20px;overflow:auto;display:flex;flex-direction:column}.properties-panel h2{font-size:17px}.selection-symbol{font-size:44px;color:#9aaa98;margin-bottom:5px}#selection-empty{text-align:center;color:#84907f;padding-top:70px;font-size:13px;line-height:1.6}#selection-empty small{font-size:10px;color:#a1ac9b}.properties-bottom{margin-top:auto;padding-top:40px;display:flex;flex-direction:column;gap:13px;color:#94a08c}.properties-bottom small{font-size:9px;line-height:1.7}.properties-bottom button{font-size:10px}.check{display:flex;align-items:center;gap:7px;margin:0;font-size:10px}input[type=checkbox]{accent-color:var(--green);margin:0}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.field-row label{margin:0 0 12px}.button-pair{display:flex;gap:7px;margin:9px 0}.button-pair button{font-size:10px;flex:1;padding:8px 4px}.danger{color:#b05249}.control-label{font-size:10px;color:#899381}.statusbar{height:29px;flex:none;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 18px;background:white;border-top:1px solid var(--line);font-size:10px;color:#8b9685}.statusbar .error{color:#b14e40}.statusbar #status{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.statusbar #object-count{flex:none}.tip{font-size:11px;line-height:1.7;background:#f4f7f0;color:#7f8d75;padding:14px;border-radius:7px;margin-top:20px}.upload-card{width:100%;display:flex;align-items:center;flex-direction:column;padding:24px 10px;margin:17px 0;border-style:dashed;background:#f8faf6;gap:9px}.upload-card>span{font-size:32px;color:#82967b}.upload-card b{font-size:12px;font-weight:500}.upload-card small{font-size:9px;color:#93a08a}.shape-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:25px}.shape-grid button{font-size:10px;background:#f7f9f4;padding:20px 0}.shape-grid span{font-size:36px;display:block;color:#8eaa82;margin-bottom:12px}.text-link{font-size:11px;text-decoration:underline}.layer{display:flex;gap:2px;align-items:center;padding:5px 1px;border-bottom:1px solid #e5ebe1}.layer.selected{background:#f0f5ed;border-radius:6px}.layer button{border:0;padding:5px 3px;font-size:10px;background:transparent}.layer .layer-name{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:110px}.loading{position:absolute;inset:0;z-index:10;display:grid;place-items:center;background:#edf0e9;color:#78886e;font-size:14px}.busy .center-panel,.busy .left-panel,.busy .properties-panel{pointer-events:none;cursor:wait}.busy #stage{opacity:.7}.busy .topbar button{pointer-events:none;opacity:.6}dialog{border:1px solid var(--line);border-radius:12px;padding:24px;width:min(600px,90vw);box-shadow:0 25px 80px #132a2630}dialog::backdrop{background:#2137274d}.dialog-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.dialog-heading button{border:0;font-size:22px}.saved-design{display:block;width:100%;text-align:left;margin:9px 0;font-size:12px}
@media(min-width:1650px){.editor-layout{grid-template-columns:84px 280px minmax(360px,1fr) 270px}.left-panel,.properties-panel{padding-left:24px;padding-right:24px}.product-card img{height:78px}.product-card{min-height:116px}}
@media(max-width:1200px){.editor-layout{grid-template-columns:64px 210px minmax(300px,1fr) 205px}.topbar{padding:0 16px}.document-title{margin-left:0}.left-panel,.properties-panel{padding:22px 13px}.canvas-toolbar,.canvas-footer{padding-left:12px;padding-right:12px}.topbar nav{gap:7px}.product-card img{width:65px;height:60px}.rail>button{font-size:9px}}

/* Central templates and native group editing. */
#templates-search-form .wide{margin-top:12px}#templates-list{display:grid;gap:8px}.template-card{display:grid;grid-template-columns:42px 1fr;column-gap:10px;text-align:left;padding:11px;align-items:center;min-width:0}.template-card strong{font-size:11px;font-weight:500;overflow-wrap:anywhere}.template-card small{grid-column:2;color:var(--muted);font-size:9px;margin-top:4px}.template-icon{grid-row:1/3;height:42px;display:grid;place-items:center;background:#f0f4ec;border-radius:5px;font-size:24px;color:#89a080}.template-icon img{width:100%;height:100%;object-fit:contain}#templates-more,#refresh-fonts{margin-top:18px}.group-context{flex:none;display:flex;align-items:center;gap:9px;padding:8px 18px;background:#e5ede2;border-bottom:1px solid #d5e0d0;font-size:11px;min-width:0}.group-context button{font-size:10px;padding:6px 9px}.group-context span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.text-effects{margin:16px 0;color:var(--muted);font-size:11px}.text-effects summary{cursor:pointer;padding:7px 0}.text-effects .check{margin:10px 0}.import-warnings{color:#886125;background:#fcf7eb;border-radius:7px;font-size:12px;line-height:1.6}.import-warnings:empty{display:none}.import-warnings p{padding:10px 14px;margin:0}#import-preview{display:block;max-width:100%;width:100%;height:220px;object-fit:contain;background-color:#f4f5f2;background-image:linear-gradient(45deg,#e6eae380 25%,transparent 25%),linear-gradient(-45deg,#e6eae380 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e6eae380 75%),linear-gradient(-45deg,transparent 75%,#e6eae380 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0;border-radius:8px}#import-dialog .button-pair button{font-size:12px;padding:12px}.rail{gap:4px}.rail>button{padding-top:7px;padding-bottom:7px}
/* Preview artwork stays in protected img documents, outside the editor model. */
#templates-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.template-card{display:flex;flex-direction:column;align-items:stretch;padding:7px;gap:7px}.template-card strong{font-size:11px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.template-card small{margin-top:auto;font-size:9px}.template-icon{position:relative;width:100%;height:105px;flex:none;border:1px solid #dce3d7;background-color:#eef0eb;background-image:linear-gradient(45deg,#ffffff80 25%,transparent 25%),linear-gradient(-45deg,#ffffff80 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ffffff80 75%),linear-gradient(-45deg,transparent 75%,#ffffff80 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0;overflow:hidden}.template-icon img{position:absolute;inset:0;padding:5px}.preview-placeholder{font-size:10px;color:#687662}.preview-loaded .preview-placeholder{display:none}.preview-failed .preview-placeholder{font-size:0}.preview-failed .preview-placeholder:after{content:'Без прев’ю';font-size:10px}.template-text-controls{padding:12px;background:#f0f6ed;border:1px solid #d7e4d1;border-radius:8px;margin-bottom:17px}.template-text-controls label{margin-bottom:9px}.template-text-controls small{display:block;font-size:10px;line-height:1.5;color:#60745b;margin-top:8px}#ready-print-note{margin-top:0;margin-bottom:16px}#ready-print-note p{margin:7px 0 10px}

/* Viewport and compact sheets: layout space belongs to one panel at a time. */
html,body{height:100%;overflow:hidden}
.app{height:var(--app-height,100dvh);min-height:0}
.sheet-heading,.compact-selection{display:none}
.selection-toolbar{display:flex;align-items:center;gap:8px;padding:8px 18px;background:#f7f9f4;border-bottom:1px solid var(--line);flex:none;min-width:0}
.selection-toolbar>button{font-size:11px}
#selection-mode-help{font-size:10px;color:var(--muted);line-height:1.5}
.rail .rail-label{font-size:10px;line-height:1.4;letter-spacing:0}
dialog{max-height:calc(var(--app-height,100dvh) - 32px);overflow:auto;overscroll-behavior:contain}
.workspace{overscroll-behavior:contain;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);align-items:safe center;justify-items:safe center}
.workspace .upper-canvas{touch-action:none}

@media(max-width:1100px){
  :root{font-size:14px}
  .compact-layout{position:fixed;top:var(--visual-top,0px);left:0;right:0;height:var(--app-height,100dvh)}
  .topbar{height:62px;padding:0 18px;gap:14px}
  .brand{font-size:27px}
  .brand span{font-size:9px}
  .document-title,.dev-badge,.topbar nav a{display:none}
  .topbar nav{gap:8px}
  .topbar nav button{min-height:44px;font-size:13px;padding:8px 12px}
  .editor-layout{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto auto;overflow:hidden}
  .center-panel{grid-column:1;grid-row:1;min-height:0}
  .rail{grid-column:1;grid-row:3;display:flex;flex-direction:row;align-items:stretch;justify-content:space-around;gap:0;padding:4px max(8px,env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));border:0;border-top:1px solid var(--line);min-width:0;background:#fff;z-index:3}
  .rail>button{flex:1;min-width:0;min-height:58px;padding:5px 2px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border-radius:8px;font-size:11px;line-height:1.3}
  .rail>button span{font-size:inherit;line-height:1.3}
  .rail>button .icon{width:22px;height:22px;flex:none}
  .rail .rail-label{font-size:11px}
  .rail>button.active{background:transparent}
  .rail>button[aria-expanded=true]{background:#edf4e9;color:var(--green)}
  .rail>button.active:before,.rail-foot{display:none}
  .left-panel,.properties-panel{display:none;position:relative;inset:auto;grid-column:1;grid-row:2;width:auto;height:var(--sheet-height,300px);max-height:none;min-height:0;padding:0 22px 18px;border:0;border-top:1px solid #d4decf;border-radius:16px 16px 0 0;box-shadow:0 -5px 18px #243c340a;overflow:auto;overscroll-behavior:contain;scroll-padding-top:62px;scroll-padding-bottom:18px;z-index:2}
  .compact-layout[data-sheet=tools] .left-panel,.compact-layout[data-sheet=properties] .properties-panel{display:block}
  .sheet-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;position:sticky;top:0;z-index:3;min-height:60px;padding:8px 0;background:#fff;border-bottom:1px solid var(--line);margin-bottom:16px}
  .sheet-heading strong{font-size:15px;font-weight:600}
  .sheet-heading button{min-width:76px;min-height:44px;border:0;background:#edf4e9;color:#2f5847;font-size:14px}
  .properties-panel>.eyebrow,.left-panel section>.eyebrow{display:none}
  .properties-panel h2,.left-panel h1,.left-panel h2{font-size:19px}
  #selection-empty{padding:10px 0}
  .properties-bottom{margin-top:20px;padding-top:15px}
  .canvas-toolbar{height:auto;min-height:54px;padding:5px 18px;gap:10px}
  .segmented button{min-height:44px;padding:7px 12px;font-size:13px}
  .toolbar-right{gap:4px}
  .toolbar-right button{min-width:44px;min-height:44px}
  .toolbar-right select{height:44px;width:135px;font-size:13px}
  .selection-toolbar{gap:8px;padding:5px 18px}
  .selection-toolbar>button{min-height:44px;font-size:12px}
  .compact-selection{display:flex;margin-left:auto;flex:none}
  .compact-selection button{min-height:44px;font-size:12px;background:#edf4e9;border-color:#ceddc6}
  #selection-mode-help{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .group-context{padding:4px 18px;gap:8px}
  .group-context button{min-height:38px;font-size:12px}
  .workspace{padding:24px 24px 12px}
  .canvas-footer{height:50px;padding:0 18px;gap:8px}
  .canvas-footer>span{font-size:10px}
  .canvas-footer button{min-width:42px;min-height:44px;font-size:14px}
  .canvas-footer #focus-print{display:block;font-size:12px;margin-right:3px;white-space:nowrap}
  .canvas-footer select{height:44px;width:66px;font-size:13px}
  .statusbar{height:27px;padding:0 14px;font-size:11px}
  .statusbar #object-count{display:none}
  .product-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:16px}
  .product-card{min-height:100px;padding:10px;gap:8px}
  .product-card img{width:84px;max-width:100%;height:65px}
  .product-card span{font-size:13px}
  #product-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  #templates-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .template-card{padding:10px;gap:9px}
  .template-icon{height:125px}
  .template-card strong{font-size:13px}
  .template-card small{font-size:11px}
  .muted,.tip,.check{font-size:13px}
  label{font-size:13px;margin:13px 0}
  input:not([type=checkbox]),select,textarea{font-size:16px;min-height:44px;padding:10px 12px}
  input[type=checkbox]{width:20px;height:20px;flex:none}
  input[type=color]{height:44px;padding:5px}
  textarea{resize:none;min-height:96px}
  .wide,.button-pair button,.text-effects summary{min-height:44px;font-size:14px}
  .text-effects summary{display:flex;align-items:center}
  .upload-card{padding:20px 12px;margin:14px 0}
  .upload-card b{font-size:15px}.upload-card small{font-size:12px}
  .shape-grid{margin-top:16px}.shape-grid button{font-size:14px;min-height:94px}
  .layer{min-height:48px}.layer button{min-width:40px;min-height:44px;font-size:12px;padding:7px}
  .layer .layer-name{min-width:0;max-width:none;font-size:13px}
  .template-text-controls{padding:12px}.template-text-controls small{font-size:12px}
  .dialog-heading button{min-width:44px;min-height:44px}
  dialog{padding:18px;width:min(600px,calc(100vw - 24px));max-height:calc(var(--app-height,100dvh) - 24px)}
  .saved-design{font-size:14px;min-height:48px}
  .keyboard-open .rail,.keyboard-open .statusbar,.keyboard-open .canvas-footer{display:none}
  .keyboard-open .left-panel,.keyboard-open .properties-panel{padding-bottom:12px}
  .keyboard-open #text-content{height:76px;min-height:76px}
  .keyboard-open .sheet-heading{min-height:52px;margin-bottom:10px;padding:4px 0}
  .short-landscape .editor-layout{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto}
  .short-landscape[data-sheet=tools] .editor-layout,.short-landscape[data-sheet=properties] .editor-layout{grid-template-columns:minmax(0,1fr) minmax(280px,42%)}
  .short-landscape .left-panel,.short-landscape .properties-panel{grid-column:2;grid-row:1;height:auto;border-radius:0;border-top:0;border-left:1px solid var(--line);padding-left:14px;padding-right:14px}
  .short-landscape .rail{grid-column:1/-1;grid-row:2}
  .short-landscape .canvas-footer,.short-landscape .statusbar{display:none}
  .short-landscape .product-grid,.short-landscape #templates-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .short-landscape #product-options{grid-template-columns:1fr}
}

@media(max-width:600px){
  .topbar{height:58px;padding:0 12px;gap:8px}
  .brand{font-size:24px}.brand span{font-size:8px;letter-spacing:.4px;margin-top:4px}
  .topbar nav{gap:6px}.topbar nav button{font-size:12px;padding:8px 10px}
  .rail{padding-left:4px;padding-right:4px}.rail .rail-label{font-size:10px}
  .left-panel,.properties-panel{padding-left:16px;padding-right:16px;border-radius:14px 14px 0 0}
  .canvas-toolbar{padding:4px 10px;gap:4px;min-height:52px}
  .segmented{padding:2px}.segmented button{min-width:44px;padding:7px 8px;font-size:12px}
  .toolbar-right{gap:0}.toolbar-right select{width:112px;font-size:12px;padding:8px 6px}
  .toolbar-right button{width:44px;min-width:44px;padding:7px}
  .selection-toolbar{padding:4px 10px;gap:5px}
  .selection-toolbar>button,.selection-toolbar .compact-selection{flex:1;min-width:0;margin:0}
  .selection-toolbar button{font-size:11px;padding:6px;line-height:1.3;min-height:44px}
  .selection-toolbar .with-icon{gap:4px}.selection-toolbar .icon{width:17px;height:17px;flex:none}
  .compact-selection button{width:100%}
  .group-context{padding:3px 10px;gap:5px;font-size:10px}
  .group-context button{font-size:11px;padding:6px;min-height:34px}
  .workspace{padding:20px 14px 10px}
  .canvas-footer{padding:0 9px;gap:4px;height:47px}
  .canvas-footer>span{display:none}.canvas-footer>div{width:100%;justify-content:center}
  .canvas-footer #focus-print{margin-right:auto;font-size:12px}
  .canvas-footer button{min-width:44px}
  .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  #templates-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .template-icon{height:120px}
  .product-card img{width:90px;height:72px}
  .layer button{min-width:36px;padding:5px}
  .statusbar{font-size:10px;height:25px}
  #import-preview{height:min(190px,25dvh)}
  #import-dialog .button-pair{flex-direction:column}
  #import-dialog .button-pair button{min-height:48px;font-size:14px}
}

@media(min-width:900px) and (max-width:1100px){
 .short-landscape[data-sheet=tools] .editor-layout,.short-landscape[data-sheet=properties] .editor-layout{grid-template-columns:minmax(0,1fr) 320px}
}

@media(max-width:1100px) and (max-height:580px){
  .topbar{height:50px}.topbar .brand span{display:none}
  .statusbar,.canvas-footer{display:none}
  .workspace{padding-top:16px;padding-bottom:8px}
  .sheet-heading{min-height:52px;margin-bottom:10px;padding:4px 0}
}

/* Nested layer names and actions use separate rows, leaving room for labels. */
.layer{display:grid;grid-template-columns:24px minmax(0,1fr);gap:2px 4px;padding:5px 2px;min-width:0}
.layer .layer-expand{grid-column:1;min-width:22px;width:22px;padding:3px}
.layer .layer-name{grid-column:2;display:flex;align-items:center;gap:6px;max-width:none;min-width:0;width:100%;overflow:hidden}
.layer .layer-name .icon{flex:none;width:17px;height:17px}
.layer .layer-name span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:0}
.layer .layer-tools{grid-column:1/-1;display:flex;justify-content:flex-end;gap:4px}
.layer .layer-tools button{min-width:29px;min-height:29px}
.layer:not(.selected):not(.contains-selected) .layer-tools{display:none}
.layer.contains-selected{background:#f6f8f3;border-radius:6px}
@media(max-width:1100px){
  .layer{grid-template-columns:44px minmax(0,1fr);gap:2px 5px}
  .layer .layer-expand{width:44px;min-width:44px;min-height:44px;padding:10px}
  .layer .layer-name{min-height:44px;padding:7px 4px}
  .layer .layer-tools button{min-width:44px;min-height:44px;padding:10px}
  .layer .layer-name .icon{width:20px;height:20px}
}
/* One consistent icon language for tools, actions and layer rows. */
.icon{display:block;width:20px;height:20px;flex:none;vertical-align:middle;pointer-events:none}
[data-icon]{display:inline-flex;align-items:center;justify-content:center;flex:none}
.with-icon{display:inline-flex;align-items:center;justify-content:center;gap:7px}
.rail>button>[data-icon]{display:flex;justify-content:center;margin:0 auto 6px}
.rail>button>[data-icon] .icon{width:24px;height:24px}
.toolbar-right button,.dialog-heading button{display:inline-flex;align-items:center;justify-content:center}
.upload-card>[data-icon] .icon{width:30px;height:30px}
.shape-grid button>[data-icon]{display:flex;margin:0 auto 12px}
.shape-grid [data-icon] .icon{width:34px;height:34px}
.selection-symbol{display:flex;justify-content:center}.selection-symbol .icon{width:42px;height:42px}
.selection-toolbar button[aria-pressed=true]{background:#e8f1e7;border-color:#7d9b7f;color:#244b35}
.text-format{margin:16px 0}.text-format>summary,.layer-advanced>summary{cursor:pointer;color:#546e5c;padding:10px 0;font-size:12px;list-style-position:inside}
.text-format .text-effects{margin-bottom:0}
.layer-advanced{margin:12px 0}.layer-multi-select{margin:15px 0}
@media(min-width:1101px){.muted,.tip{font-size:12px}.properties-panel label{font-size:12px}.properties-panel input,.properties-panel select,.properties-panel textarea{font-size:13px}.layer .layer-name{font-size:12px}.rail>button{padding-top:12px;padding-bottom:12px}.sheet-heading{display:none}.topbar nav button{min-height:40px}}
@media(max-width:1100px){.rail>button>[data-icon]{margin-bottom:0}.desktop-hint{display:none}.text-format>summary,.layer-advanced>summary{min-height:44px;font-size:14px;display:flex;align-items:center}.topbar .with-icon>.icon{width:18px;height:18px}}
@media(max-width:420px){.topbar nav button .icon{display:none}.topbar nav button{padding-left:8px;padding-right:8px}.topbar nav button{gap:0}}
.layer .layer-name .layer-preview{position:relative;display:grid;place-items:center;flex:none;width:38px;height:38px;border:1px solid #dfe7dc;border-radius:6px;background:#eef2ec;overflow:hidden}
.layer-preview img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.layer-preview.has-preview>.icon{visibility:hidden}
.print-colors{margin:18px 0;padding:14px 12px;border:1px solid #dce6d8;border-radius:12px;background:#f6f8f2}
.print-colors h3{margin:0 0 12px;font-size:13px;font-weight:650;color:#284436}
.print-color-swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:10px}
.print-colors .print-color-swatch{margin:0;gap:4px;font-size:10px;text-align:center}
.print-colors input[type=color]{height:38px;min-width:0;width:100%;padding:3px;border-radius:8px;cursor:pointer;background:#fff}
.print-colors .check{font-size:12px;margin:14px 0 8px;align-items:flex-start}
.print-colors small{display:block;font-size:11px;line-height:1.5;color:#627164;margin-top:10px}
.stage.color-rendering .upper-canvas{pointer-events:none}
.return-to-print{margin:0 0 14px;background:#edf3e9;border-color:#d5e2ce;color:#355441}
.topbar .brand{display:flex;align-items:center;flex:none;line-height:0}
.topbar .brand img{display:block;width:54px;height:54px;object-fit:contain;mix-blend-mode:multiply}
@media(max-width:600px){.topbar .brand img{width:44px;height:44px}}
@media(max-width:1100px){.print-colors input[type=color]{height:44px}.print-colors h3{font-size:15px}.print-colors .check{font-size:14px}.print-colors small{font-size:12px}}
.layer .layer-name>span:last-child{flex:1}
@media(max-width:1100px){.layer .layer-name .layer-preview{width:44px;height:44px}}
/* Visual review: balanced action labels and more canvas space while choosing tools. */
.topbar button,.button-pair button,.wide:has([data-icon]),.selection-toolbar button,.group-context button,.sheet-heading button,.canvas-footer button{display:inline-flex;align-items:center;justify-content:center;gap:7px}
.shape-grid button>span:not([data-icon]){font-size:13px;line-height:1.4;margin:0;color:#4f6756;overflow-wrap:anywhere}
.layer-actions{margin:14px 0}.layer-actions>summary{cursor:pointer;font-size:12px;color:#546e5c;padding:10px 0}
@media(max-width:1100px){
 .compact-layout:not([data-sheet=none]) .selection-toolbar,.compact-layout:not([data-sheet=none]) .canvas-footer,.compact-layout:not([data-sheet=none]) .group-context{display:none}
 .left-panel section>h1,.left-panel section>h2{display:none}
 .left-panel section>.muted:first-of-type{margin-top:0}
 .shape-grid button>span:not([data-icon]){font-size:14px}
 .layer-actions>summary{min-height:44px;font-size:14px;display:flex;align-items:center}
}

/* One contextual picker, with the detailed palette explicitly opt-in. */
.zgh-group-color-label{margin:0 0 12px!important}
.zgh-group-color-label>span{display:block;font-size:12px;color:#546e5c}
.zgh-group-color-label input[type=color]{height:44px!important}
.zgh-print-colors-advanced{margin-top:12px}
.zgh-print-colors-advanced>summary{cursor:pointer;font-size:12px;line-height:1.5;padding:9px 0;color:#546e5c}
.zgh-print-colors-advanced[open] .print-color-swatches{margin-top:10px}
#template-text-controls{flex:none}
#zgh-recover-template-text{margin:6px 0 12px}
.zgh-editable-comparison{margin:15px 0;border:1px solid #dce6d8;border-radius:8px;padding:12px}
.zgh-editable-comparison h3{font-size:13px;line-height:1.5;margin:0 0 10px}
.zgh-editable-comparison img{display:block;width:100%;height:220px;object-fit:contain;background:#f4f5f2}
@media(max-width:1100px){.zgh-print-colors-advanced>summary{min-height:44px;font-size:14px}.zgh-group-color-label>span{font-size:14px}.zgh-editable-comparison img{height:170px}}

/* Palette harmony UI: no modal artwork export, no rasterization of the print. */
.zgh-harmony-enabled .zgh-group-color-label{display:none!important}
.zgh-current-palette{height:19px;margin:10px 0 13px;border:1px solid #d4ddcf}
.zgh-palette-strip{display:flex;overflow:hidden;border-radius:7px;width:100%}
.zgh-palette-strip i{display:block;flex:1;min-width:0;height:100%}
.zgh-open-harmony{font-size:12px;min-height:40px}
dialog.zgh-harmony{margin:18px 18px 18px auto;padding:0;width:360px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 36px);border-radius:16px;overflow:hidden;color:#26382f;background:#fff;box-shadow:0 12px 64px #152b2333}
dialog.zgh-harmony[open]{display:flex;flex-direction:column}
dialog.zgh-harmony::backdrop{background:#142a211a}
.zgh-harmony-header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:13px 16px;border-bottom:1px solid #e3e8e2;flex:none}
.zgh-harmony-header h2{font-size:17px;margin:0;letter-spacing:-.3px}
.zgh-harmony-close{border:0;background:none;font-size:25px;padding:0;min-width:36px;min-height:36px}
.zgh-harmony-body{padding:0 18px 12px;overflow:auto;min-height:0;overscroll-behavior:contain}
.zgh-harmony-help,.zgh-harmony-message{font-size:11px;line-height:1.6;color:#67786c;margin:12px 0}
.zgh-harmony-wheel{position:relative;width:min(100%,248px);aspect-ratio:1;margin:3px auto 12px;touch-action:none;border-radius:50%;user-select:none}
.zgh-harmony-wheel>canvas,.zgh-harmony-wheel>svg,.zgh-harmony-points{position:absolute;inset:0;width:100%;height:100%;display:block}
.zgh-harmony-wheel>svg{pointer-events:none;stroke:#22392cc4;stroke-width:1.5}
.zgh-harmony-dot{position:absolute;transform:translate(-50%,-50%);width:21px;height:21px;min-height:0;padding:0;border:2px solid white;outline:1px solid #364b40;border-radius:50%;box-shadow:0 1px 3px #0003;cursor:grab;touch-action:none}
.zgh-harmony-dot[aria-pressed=true]{outline:3px solid #273d32;z-index:1}
.zgh-harmony .check{font-size:12px;gap:8px;margin:10px 0;line-height:1.4}
.zgh-harmony input[type=checkbox]{width:17px;height:17px;flex:none}
.zgh-harmony-chips{display:flex;gap:6px;justify-content:center;margin:15px 0 10px;flex-wrap:wrap}
.zgh-harmony-chip{width:29px;height:29px;min-height:0;flex:1;max-width:40px;border:2px solid #fff;border-radius:6px;padding:0;outline:1px solid #cad4cb}
.zgh-harmony-chip[aria-pressed=true]{outline:2px solid #304f3d}
.zgh-harmony-picked{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12px;margin:10px 0}
.zgh-harmony-picked input[type=color]{width:65px;height:33px;min-height:0;margin:0;flex:none;padding:3px}
.zgh-harmony-sliders label{display:block;font-size:12px;margin:12px 0 0}
.zgh-harmony-sliders output{float:right;font-size:11px;font-variant-numeric:tabular-nums;color:#617765}
.zgh-harmony-sliders input[type=range]{display:block;width:100%;padding:0;border:0;background:transparent;height:25px;min-height:25px;margin:3px 0;accent-color:#2f5847;cursor:pointer}
.zgh-harmony-variants-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:13px 0 8px}
.zgh-harmony-variants-head h3{font-size:12px;line-height:1.4;margin:0}
.zgh-harmony-variants-head button{font-size:11px;white-space:nowrap;padding:7px 8px}
.zgh-harmony-variants{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.zgh-harmony-variant{display:flex;flex-direction:column;gap:7px;align-items:stretch;padding:8px;font-size:11px}
.zgh-harmony-variant .zgh-palette-strip{height:21px}
.zgh-harmony-footer{display:flex;align-items:center;gap:6px;padding:12px 13px;border-top:1px solid #e3e8e2;background:#f8faf6;flex:none}
.zgh-harmony-footer button{font-size:12px;min-height:40px;padding:7px 9px;flex:1}
@media(max-width:700px){
 dialog.zgh-harmony{width:100%;max-width:100%;margin:auto 0 0;max-height:72dvh;border-radius:17px 17px 0 0;border-bottom:0}
 .zgh-harmony-body{padding-left:20px;padding-right:20px}
 .zgh-harmony-wheel{width:210px}
 .zgh-harmony-header{padding:8px 16px}
 .zgh-harmony-header h2{font-size:16px}
 .zgh-harmony-close{min-width:44px;min-height:44px}
 .zgh-harmony-footer{padding-bottom:calc(10px + env(safe-area-inset-bottom))}
 .zgh-harmony-footer button{min-height:44px}
 .zgh-harmony .check{min-height:30px;font-size:13px}
 .zgh-harmony-dot{width:24px;height:24px}
 .zgh-harmony-variants-head button{min-height:38px}
 .zgh-harmony-chip{height:34px}
}

/* The data controls remain for saved-state compatibility, not for customer UI. */
#properties-panel.zgh-direct-text #template-text-controls,
#properties-panel.zgh-direct-text .zgh-object-name-field,
#font-family[aria-hidden=true]{display:none!important}
.zgh-direct-text #text-properties>label:first-child{margin-top:0}
.zgh-direct-text #select-parent-print{margin-top:14px}
.zgh-font-picker-trigger{display:flex;width:100%;align-items:center;justify-content:space-between;gap:10px;text-align:left;min-height:48px;margin-top:7px;padding:10px 12px;border:1px solid #dce3da;background:#fff;border-radius:7px}
.zgh-font-sample{display:block;min-width:0;flex:1;white-space:nowrap;overflow:hidden;line-height:1.5;font-size:24px;letter-spacing:normal;text-transform:none}
.zgh-font-chevron{flex:none;font-size:20px;font-family:system-ui,sans-serif}
dialog.zgh-font-dialog{width:340px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 40px);padding:0;border:1px solid #dce3da;border-radius:14px;background:white;color:#26382f;box-shadow:0 15px 60px #19332533;margin:20px 18px 20px auto;overflow:hidden}
dialog.zgh-font-dialog[open]{display:flex;flex-direction:column}
dialog.zgh-font-dialog::backdrop{background:#142a2126}
.zgh-font-dialog-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid #e3e8e2;flex:none}
.zgh-font-dialog-header h2{font-size:17px;margin:0}
.zgh-font-dialog-header button{min-height:44px;min-width:72px;font-size:13px;border:0;background:#edf4e9}
.zgh-font-options{min-height:0;overflow:auto;overscroll-behavior:contain;padding:8px;scroll-padding:8px}
.zgh-font-option{display:flex;align-items:center;gap:8px;width:100%;min-height:62px;padding:10px 12px;margin:3px 0;text-align:left;border:1px solid transparent;background:white;border-radius:8px}
.zgh-font-option:hover{background:#f1f5ef}
.zgh-font-option[aria-selected=true]{border-color:#6e9275;background:#edf4e9}
.zgh-font-tick{visibility:hidden;flex:none;font:18px system-ui,sans-serif;width:18px;color:#2f5847}
.zgh-font-option[aria-selected=true] .zgh-font-tick{visibility:visible}
.zgh-font-option .zgh-font-sample{font-size:26px}
.zgh-font-loading{font:12px/1.5 system-ui,sans-serif;color:#748576;white-space:normal}
.zgh-font-option.font-error .zgh-font-loading{color:#9a473c}
.zgh-font-message{font:12px/1.5 system-ui,sans-serif;color:#65766c;margin:0;padding:10px 16px;border-top:1px solid #e3e8e2;flex:none}
.zgh-font-message:empty{display:none}
@media(max-width:700px){
 dialog.zgh-font-dialog{width:100%;max-width:100%;margin:auto 0 0;max-height:70dvh;border-radius:17px 17px 0 0;border-bottom:0;padding-bottom:env(safe-area-inset-bottom)}
 .zgh-font-picker-trigger{min-height:50px}
 .zgh-font-options{padding:8px 12px}
 .zgh-font-option{min-height:64px}
}

/* Zghadka Constructor V2 — black interface text/icons, 20260920.1.
 * UI-only: no background, artwork, palette swatch or canvas changes.
 * Disabled-state opacity and semantic warning/error colours stay intact.
 */
:root {
  --muted: #000000;
  color: #000000;
}
:is(#app, dialog.zgh-harmony, dialog.zgh-font-dialog) {
  --muted: #000000;
  color: #000000;
}
:is(#app, dialog.zgh-harmony, dialog.zgh-font-dialog)
:is(button, a, :where(input:not([type="color"])), select, textarea, label, summary,
    small, p, h1, h2, h3, output, span, .eyebrow, .muted, .tip,
    .source-note, .control-label, .rail-foot, .document-title,
    .properties-bottom, .selection-symbol, .loading, .text-effects,
    .statusbar, .group-context, .canvas-footer, .template-icon,
    .preview-placeholder, .zgh-harmony-help, .zgh-harmony-message,
    .zgh-font-message) {
  color: #000000;
}
/* Only UI icons use currentColor; SVG artwork and the colour wheel do not. */
:is(#app, dialog.zgh-harmony, dialog.zgh-font-dialog) svg.icon {
  color: inherit;
  stroke: currentColor;
}
:is(#app, dialog.zgh-harmony, dialog.zgh-font-dialog)
:is(input, textarea)::placeholder {
  color: #000000;
  opacity: 1;
}
/* Keep a readable light label/icon on the existing dark action buttons. */
:is(#app, dialog.zgh-harmony, dialog.zgh-font-dialog) button.primary,
:is(#app, dialog.zgh-harmony, dialog.zgh-font-dialog)
button.primary :is(span, svg.icon, [data-icon]) {
  color: #ffffff;
}
/* Destructive actions and actual errors are not ordinary muted labels. */
:is(#app, dialog.zgh-harmony, dialog.zgh-font-dialog) .danger,
:is(#app, dialog.zgh-harmony, dialog.zgh-font-dialog)
.danger :is(span, svg.icon, [data-icon]) {
  color: #b05249;
}
:is(#app, dialog.zgh-harmony, dialog.zgh-font-dialog) .error {
  color: #b14e40;
}
#app .import-warnings,
#app .import-warnings p {
  color: #886125;
}
:is(#app, dialog.zgh-font-dialog) .zgh-font-option.font-error .zgh-font-loading {
  color: #9a473c;
}

/* ZGH_V2_SITE_BRAND_20260921_1
 * Source: active zghadka/theme.json and assets/site-copy.css.
 * UI only. Never recolor canvas artwork, product colours or palette swatches.
 */
:root {
  --zgh-brand-accent: #97ea90;
  --zgh-brand-ink: #000000;
  --zgh-brand-paper: #ffffff;
  --zgh-brand-soft: #f5f7f3;
  --zgh-brand-line: #dce2d9;
  --green: var(--zgh-brand-accent);
  --line: var(--zgh-brand-line);
  --muted: var(--zgh-brand-ink);
  color: var(--zgh-brand-ink);
  background: var(--zgh-brand-paper);
  color-scheme: light;
}
:is(#app, dialog.zgh-harmony, dialog.zgh-font-dialog) {
  --green: var(--zgh-brand-accent);
  --line: var(--zgh-brand-line);
  --muted: var(--zgh-brand-ink);
  color: var(--zgh-brand-ink);
}
#app :is(.topbar,.rail,.left-panel,.properties-panel,.statusbar,.sheet-heading) {
  background-color: var(--zgh-brand-paper);
  border-color: var(--zgh-brand-line);
}
#app :is(.center-panel,.canvas-toolbar,.canvas-footer,.selection-toolbar,.loading) {
  background-color: var(--zgh-brand-soft);
  border-color: var(--zgh-brand-line);
  color: var(--zgh-brand-ink);
}
#app .workspace {
  background-color: var(--zgh-brand-soft);
  background-image: radial-gradient(var(--zgh-brand-line) .7px, transparent .7px);
}
#app :is(.tip,.source-note,.group-context,.template-text-controls,.print-colors,.return-to-print) {
  background: var(--zgh-brand-soft);
  color: var(--zgh-brand-ink);
  border-color: var(--zgh-brand-line);
}
#app :is(.dev-badge,.zgh-font-dialog-header button,.sheet-heading button,.compact-selection button) {
  background: var(--zgh-brand-accent);
  border-color: var(--zgh-brand-ink);
  color: var(--zgh-brand-ink);
}
#app .rail>button {color:var(--zgh-brand-ink);}
#app .rail>button:is(.active,[aria-expanded=true]) {
  background: var(--zgh-brand-accent);
  color: var(--zgh-brand-ink);
}
#app .rail>button.active:before {background:var(--zgh-brand-ink);}
#app .segmented {background:var(--zgh-brand-soft);}
#app .segmented button {color:var(--zgh-brand-ink);}
#app .segmented button.active {
  background: var(--zgh-brand-accent);
  color: var(--zgh-brand-ink);
  box-shadow: 0 0 0 1px var(--zgh-brand-ink);
}
:is(#app, dialog.zgh-harmony, dialog.zgh-font-dialog) button.primary,
#app .zv2-review-body>button.primary {
  background: var(--zgh-brand-accent) !important;
  border-color: var(--zgh-brand-accent) !important;
  color: var(--zgh-brand-ink) !important;
}
:is(#app, dialog.zgh-harmony, dialog.zgh-font-dialog) button.primary :is(span,svg.icon,[data-icon]),
#app .zv2-review-body>button.primary :is(span,svg.icon,[data-icon]) {color:inherit !important;}
:is(#app, dialog.zgh-harmony, dialog.zgh-font-dialog) button.primary:hover:not(:disabled),
#app .zv2-review-body>button.primary:hover:not(:disabled) {
  background: var(--zgh-brand-ink) !important;
  border-color: var(--zgh-brand-ink) !important;
  color: var(--zgh-brand-paper) !important;
}
:is(#app, dialog.zgh-harmony, dialog.zgh-font-dialog)
:is(button,a,input,select,textarea,summary):focus-visible {
  outline: 2px solid var(--zgh-brand-ink) !important;
  outline-offset: 3px;
}
:is(#app, dialog.zgh-harmony, dialog.zgh-font-dialog) :is(input[type=checkbox],input[type=radio],input[type=range]) {
  accent-color: var(--zgh-brand-accent) !important;
}
:is(#app, dialog.zgh-harmony, dialog.zgh-font-dialog) ::selection {background:var(--zgh-brand-accent);color:var(--zgh-brand-ink);}
#app :is(input:not([type=color]),textarea,select) {color:var(--zgh-brand-ink);border-color:var(--zgh-brand-line);}
#app :is(.product-card,.template-card,.upload-card,.shape-grid button,.zv2-library-card,.saved-design) {
  background: var(--zgh-brand-paper);
  border-color: var(--zgh-brand-line);
  color: var(--zgh-brand-ink);
}
#app :is(.product-card,.template-card,.upload-card,.shape-grid button,.zv2-library-card,.saved-design):hover:not(:disabled) {
  background: var(--zgh-brand-soft);
  border-color: var(--zgh-brand-ink);
}
#app .product-card.active {
  background: var(--zgh-brand-accent);
  border-color: var(--zgh-brand-ink);
  box-shadow: 0 0 0 1px var(--zgh-brand-ink);
}
#app :is(.selection-toolbar>button[aria-pressed=true],.zv2-format-buttons button[aria-pressed=true],.layer.selected) {
  background: var(--zgh-brand-accent);
  border-color: var(--zgh-brand-ink);
  color: var(--zgh-brand-ink);
}
#app .layer {border-color:var(--zgh-brand-line);}
#app .layer.contains-selected {background:var(--zgh-brand-soft);}
#app :is(.layer-preview,.layer .layer-name .layer-preview,.template-icon) {
  border-color: var(--zgh-brand-line);
  background-color: var(--zgh-brand-soft);
  color: var(--zgh-brand-ink);
}
#app :is(.shape-grid button>span:not([data-icon]),.template-text-controls small,.print-colors h3,
 .print-colors small,.text-format>summary,.layer-actions>summary,.layer-advanced>summary,
 .zgh-group-color-label>span,.zgh-print-colors-advanced>summary,.print-area>span) {color:var(--zgh-brand-ink);}
#app .print-area {border-color:var(--zgh-brand-ink);}
#app .guide {background:var(--zgh-brand-ink);}
#app .green-dot {background:var(--zgh-brand-accent);box-shadow:0 0 0 1px var(--zgh-brand-ink);}
#app .focus-print {box-shadow:0 8px 30px #00000020;}
/* External marquee belongs to the workspace UI, not the print scene. */
#app #workspace>div[aria-hidden=true] {border-color:var(--zgh-brand-ink) !important;background:rgba(151,234,144,.18) !important;}
#app dialog,dialog.zgh-harmony,dialog.zgh-font-dialog {
  border-color: var(--zgh-brand-line);
  background: var(--zgh-brand-paper);
  color: var(--zgh-brand-ink);
  box-shadow: 0 16px 60px #00000026;
}
#app dialog::backdrop,dialog.zgh-harmony::backdrop,dialog.zgh-font-dialog::backdrop {background:#0000003d;}
:is(#app,dialog.zgh-harmony) :is(.zgh-current-palette,.zgh-harmony-header,.zgh-harmony-footer) {border-color:var(--zgh-brand-line);}
:is(#app,dialog.zgh-harmony) .zgh-harmony-footer {background:var(--zgh-brand-soft);}
:is(#app,dialog.zgh-harmony) .zgh-harmony-wheel>svg {stroke:var(--zgh-brand-ink);}
:is(#app,dialog.zgh-harmony) :is(.zgh-harmony-dot,.zgh-harmony-chip) {outline-color:var(--zgh-brand-ink);}
:is(#app,dialog.zgh-harmony) :is(.zgh-harmony-dot,.zgh-harmony-chip)[aria-pressed=true] {outline-color:var(--zgh-brand-ink);}
:is(#app,dialog.zgh-harmony) :is(.zgh-harmony-help,.zgh-harmony-message,.zgh-harmony-sliders output) {color:var(--zgh-brand-ink);}
:is(#app,dialog.zgh-font-dialog) :is(.zgh-font-picker-trigger,.zgh-font-dialog-header,.zgh-font-message) {border-color:var(--zgh-brand-line);}
:is(#app,dialog.zgh-font-dialog) .zgh-font-dialog-header button {background:var(--zgh-brand-accent);color:var(--zgh-brand-ink);}
:is(#app,dialog.zgh-font-dialog) .zgh-font-option:hover {background:var(--zgh-brand-soft);}
:is(#app,dialog.zgh-font-dialog) .zgh-font-option[aria-selected=true] {background:var(--zgh-brand-accent);border-color:var(--zgh-brand-ink);}
:is(#app,dialog.zgh-font-dialog) :is(.zgh-font-tick,.zgh-font-loading,.zgh-font-message) {color:var(--zgh-brand-ink);}
#app :is(.zgh-editable-comparison,.zv2-review-header,.zv2-review-summary,.zv2-review-gallery figure) {border-color:var(--zgh-brand-line);}
#app :is(.zgh-editable-comparison img,.zv2-review-gallery figure) {background:var(--zgh-brand-soft);}
#app #import-preview {background-color:var(--zgh-brand-soft);}
/* Preserve semantic error colours, including messages inside modal dialogs. */
#app .error {color:#b14e40;}
:is(#app,dialog.zgh-font-dialog) .zgh-font-option.font-error .zgh-font-loading {color:#9a473c;}
@media(max-width:1100px){
 #app :is(.left-panel,.properties-panel){border-color:var(--zgh-brand-line);box-shadow:0 -5px 18px #0000000a;}
}

/* Dynamic panels load after editor.css: keep site states authoritative. */
#app .zv2-format-buttons button[aria-pressed=true] {
  background: var(--zgh-brand-accent) !important;
  border-color: var(--zgh-brand-ink) !important;
  color: var(--zgh-brand-ink) !important;
}
#app .zv2-review-gallery figure {background:var(--zgh-brand-soft) !important;}
:is(#app dialog,dialog.zgh-harmony,dialog.zgh-font-dialog) {
  box-shadow:0 16px 60px #00000026;
  background:var(--zgh-brand-paper);
  color:var(--zgh-brand-ink);
  border-color:var(--zgh-brand-line);
}
:is(#app dialog,dialog.zgh-harmony,dialog.zgh-font-dialog)::backdrop {background:#0000003d;}
/* Neutral hover on standard UI buttons only; palette chips keep their real colours. */
:where(#app,dialog.zgh-harmony,dialog.zgh-font-dialog)
button:where(:not(.primary,.zgh-harmony-chip,.zgh-harmony-dot,.zgh-harmony-variant)):hover {
  background-color:var(--zgh-brand-soft);
}

/* ZGH_V2_NEUTRAL_PRODUCT_CARDS_20260921_1
 * Product photography stays on white in every state. Brand colour belongs to
 * interface controls, never to the photo backdrop. No artwork data is changed.
 */
#app #products .product-card,
#app #products .product-card:is(.active,:hover,:focus,:active) {
  background: #ffffff;
  color: #000000;
}
#app #products .product-card {
  border-color: var(--zgh-brand-line, #dce2d9);
  box-shadow: none;
}
#app #products .product-card:hover:not(:disabled) {
  border-color: #000000;
}
#app #products .product-card.active {
  border-color: #000000;
  box-shadow: 0 0 0 1px #000000;
}
#app #products .product-card img {
  mix-blend-mode: normal;
  background: #ffffff;
  filter: none;
  opacity: 1;
}

/* ZGH_V2_CUSTOMER_EXPERIENCE_20260921: customer tools, never production files. */
#app #upload-svg,#app #templates-more,#app .zv2-media-policy,#app .zv2-media-dialog {display:none!important;}
#app .zv2-template-end {min-height:24px;padding:14px 2px;font-size:12px;line-height:1.6;color:#000;overflow-wrap:anywhere;}
#app .zv2-photo-progress {font-size:12px;line-height:1.6;color:#000;margin:12px 0;}
#app.zv2-customer-editor .zv2-review-gallery details:has(.zv2-print-only) {display:none!important;}
@media(max-width:1100px){#app .zv2-template-end,#app .zv2-photo-progress{font-size:13px;}}

/* ZGH_V2_CLEAN_PREVIEW_20260921_1: guides are screen decoration, not print data. */
#app #print-area > span { display: none !important; }
#app:not(.zv2-editing-artwork) #print-area,
#app:not(.zv2-editing-artwork) #guide-x,
#app:not(.zv2-editing-artwork) #guide-y { visibility: hidden !important; }

/* ZGH_V2_RAIL_MOBILE_20260921: keep both history buttons in the narrow viewport.
 * Only the orientation control width changes; artwork and product imagery are untouched.
 */
@media (max-width: 360px) {
  #app .canvas-toolbar .toolbar-right select { width: 96px; min-width: 0; }
}