:root{--ink:#232a27;--muted:#788079;--paper:#f8f7f3;--line:#e4e7e0;--accent:#e76543;--green:#e5ece5;--white:#fff;--font:Arial,Helvetica,sans-serif;color-scheme:light;font-family:var(--font);color:var(--ink);font-synthesis:none}*{box-sizing:border-box}body{margin:0;background:var(--paper);font-size:13px}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:default;opacity:.38}button,input,select,textarea{outline-offset:3px}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent)}button{border:0;background:none;color:inherit}button:hover:not(:disabled){filter:brightness(.94)}[hidden]{display:none!important}.topbar{height:80px;background:var(--white);display:flex;align-items:center;padding:0 28px;gap:32px;border-bottom:1px solid var(--line);position:relative;z-index:2}.brand{display:flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none;font-size:25px;font-weight:800;letter-spacing:-1.3px;min-width:205px}.brand-mark{display:block;text-align:center;width:42px;height:42px;border:2px solid var(--ink);border-radius:12px;font-size:34px;line-height:36px;font-family:Georgia,serif;letter-spacing:-4px}.brand-mark span{color:var(--accent)}.brand-studio{display:block;font-size:10px;font-weight:400;letter-spacing:4.3px;line-height:10px;text-transform:uppercase}.document-heading{display:flex;flex-direction:column;gap:5px;flex:1;min-width:110px}.document-heading input{border:0;padding:0;background:none;font-size:14px;font-weight:600;color:var(--ink);width:100%;min-width:0}.save-status{font-size:10px;color:var(--muted)}.save-status:before{content:'✓ ';color:#51775b}.header-actions{display:flex;align-items:center;gap:9px}.icon-button{font-size:25px;width:32px;height:36px;font-weight:400}.divider{width:1px;height:26px;background:var(--line);margin:0 7px}.quiet-button{padding:10px 11px;font-size:11px;font-weight:600;white-space:nowrap;border-radius:6px}.primary-button{background:var(--ink);color:white;padding:14px 17px;border-radius:7px;font-size:12px;font-weight:600;white-space:nowrap}.primary-button span{margin-left:12px;color:#b9cbbd}.export-actions{display:flex;gap:6px;align-items:center;margin-left:8px}.studio{display:grid;grid-template-columns:260px minmax(350px,1fr) 272px;height:calc(100dvh - 80px);min-height:630px}.library{background:var(--white);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:27px 21px 20px;overflow:auto}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:7px}.eyebrow{font-size:9px;letter-spacing:1.6px;font-weight:600;color:var(--muted)}.pill{font-size:8px;letter-spacing:.8px;background:#edf1eb;border-radius:3px;color:#577361;padding:4px 5px}h1{font-family:Georgia,serif;font-weight:400;font-size:32px;letter-spacing:-1.1px;line-height:1.12;margin:24px 0 13px}h1 span{color:var(--accent)}.intro{font-size:11px;line-height:1.65;color:var(--muted);margin:0 0 25px}.sidebar-tabs{display:flex;border-bottom:1px solid var(--line);margin-bottom:17px}.sidebar-tabs button{flex:1;padding:12px 0;font-size:12px;font-weight:600;border-bottom:2px solid transparent}.sidebar-tabs button[aria-selected=true]{border-bottom-color:var(--ink)}.templates{display:flex;flex-direction:column;gap:15px}.template-button{text-align:left;padding:0;border-radius:6px}.template-preview{height:112px;background:#f0eee8;border:1px solid var(--line);border-radius:6px;display:flex;align-items:center;justify-content:center;overflow:hidden}.template-preview svg{display:block;width:auto;height:94px;max-width:90%;filter:drop-shadow(0 3px 3px #232a2718)}.template-button strong{display:block;font-size:11px;margin-top:8px;font-weight:600}.template-button small{display:block;color:var(--muted);font-size:9px;margin-top:4px}.template-button:hover .template-preview{border-color:#b8c5b7}.blank-design{border:1px dashed #bbc5b9;border-radius:5px;margin-top:20px;width:100%;padding:12px 8px;font-size:10px}.sidebar-note{color:var(--muted);font-size:9px;line-height:1.65;margin:15px 0 18px}.library-footer{margin-top:auto;display:flex;align-items:center;gap:9px;border-top:1px solid var(--line);padding-top:17px}.local-dot,.canvas-dot{background:#7c9b7d;width:7px;height:7px;border-radius:50%;display:inline-block;flex-shrink:0}.library-footer strong{display:block;font-size:9px;font-weight:600}.library-footer div span{display:block;font-size:9px;color:var(--muted);margin-top:4px}.library-footer button{margin-left:auto;border:1px solid var(--line);border-radius:50%;width:22px;height:22px;font-size:10px}.panel-hint{color:var(--muted);font-size:9px;line-height:1.6;margin:0 0 15px}.element-buttons{display:grid;grid-template-columns:1fr 1fr;gap:12px}.element-buttons button{border:1px solid var(--line);border-radius:8px;padding:20px 9px 13px;background:#fbfbf8;text-align:left}.tool-glyph{display:flex;height:35px;font-size:32px;margin-bottom:13px;font-family:Georgia,serif;align-items:center}.rectangle-glyph{background:#a8bcae;width:32px;height:26px;margin:5px 0 17px;border-radius:2px}.circle-glyph{background:#e76543;width:31px;height:31px;border-radius:50%;margin:2px 0 15px}.element-buttons strong{font-size:11px;display:block}.element-buttons small{font-size:8px;display:block;color:var(--muted);margin-top:5px}.workspace{display:flex;flex-direction:column;min-width:0;overflow:hidden}.workspace-top{height:54px;display:flex;align-items:center;justify-content:space-between;padding:0 25px;flex-shrink:0;background:#f8f7f3;border-bottom:1px solid #eaece5;gap:10px}.workspace-top>div{display:flex;align-items:center;gap:8px;white-space:nowrap}.workspace-top strong{font-size:11px;font-weight:500}.muted{color:var(--muted);font-size:10px}.workspace-top .muted{margin-left:4px;font-size:9px}.workspace-hint{font-size:9px;color:#90978f;white-space:nowrap}.canvas-area{flex:1;min-height:0;overflow:auto;background-color:#f0f1ec;background-image:radial-gradient(#d9ddd5 .8px,transparent .8px);background-size:12px 12px;display:flex;align-items:center;justify-content:center;padding:38px;position:relative}.canvas-mount{flex:none;line-height:0;box-shadow:0 8px 30px #232a2720;touch-action:none}.canvas-mount svg{display:block;overflow:hidden;touch-action:none}.design-element{cursor:move}.selection-outline{fill:none;stroke:#6852a1;stroke-width:1.5;vector-effect:non-scaling-stroke;pointer-events:none}.resize-handle{fill:white;stroke:#6852a1;stroke-width:1.4;vector-effect:non-scaling-stroke;cursor:nwse-resize;pointer-events:all}.workspace-bottom{height:64px;border-top:1px solid var(--line);background:var(--white);display:flex;align-items:center;gap:8px;padding:0 19px;flex-shrink:0}.pages{display:flex;gap:6px;overflow-x:auto;max-width:calc(100% - 190px)}.page-tab{border:1px solid var(--line);background:#fafbf8;border-radius:5px;padding:9px 11px;font-size:10px;white-space:nowrap;min-width:40px}.page-tab[aria-current=true]{border-color:#8ea18f;background:#edf1eb;font-weight:600}.add-page{border:1px dashed #c0c8bd;border-radius:5px;width:30px;height:30px;font-size:17px;flex-shrink:0}.zoom-tools{display:flex;align-items:center;gap:8px;margin-left:auto;font-size:10px}.zoom-tools button{font-size:13px;padding:7px 5px}.zoom-tools button:first-child{font-size:9px;font-weight:600;padding:6px 8px;border:1px solid var(--line);border-radius:4px}.zoom-tools span{min-width:32px;text-align:center}.inspector{background:var(--white);border-left:1px solid var(--line);padding:27px 21px 20px;overflow:auto}.inspector-heading{margin-bottom:24px}.inspector h2{font-family:Georgia,serif;font-size:25px;font-weight:400;margin:11px 0 0}.property-field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}.property-field>span{font-size:10px;font-weight:600}.property-field input:not([type=color]),.property-field select,.property-field textarea{border:1px solid var(--line);border-radius:5px;padding:10px 9px;background:#fafbf8;width:100%;min-width:0;color:var(--ink);font-size:11px}.property-field textarea{resize:vertical;min-height:92px;line-height:1.5}.property-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.property-grid .property-field{min-width:0}.colour-field{border:1px solid var(--line);border-radius:5px;display:flex;align-items:center;padding:5px 9px;background:#fafbf8;gap:10px}.colour-field input[type=color]{border:0;width:26px;height:28px;padding:0;background:none;cursor:pointer}.colour-field input::-webkit-color-swatch-wrapper{padding:4px 0}.colour-field input::-webkit-color-swatch{border:0;border-radius:3px}.colour-field code{font-size:10px;color:#737b73}.selection-actions{display:flex;gap:6px;margin-bottom:20px}.selection-actions button{border:1px solid var(--line);border-radius:5px;padding:8px;font-size:10px;flex:1}.danger{color:#b9553d}.layers-section{border-top:1px solid var(--line);margin-top:22px;padding-top:22px}.layers-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.layers-heading h3{font-size:12px;margin:0;font-weight:600}.layers{display:flex;flex-direction:column;gap:5px}.layer-row{display:flex;align-items:center;border:1px solid transparent;border-radius:5px;padding:3px 4px;gap:4px;background:#fafbf8}.layer-row.selected{border-color:#b6c3b4;background:#edf1eb}.layer-select{text-align:left;display:flex;gap:9px;align-items:center;flex:1;min-width:0;padding:7px 3px}.layer-symbol{width:19px;height:19px;border-radius:3px;display:grid;place-content:center;font-size:11px;flex-shrink:0}.layer-symbol.shape{background:var(--layer-fill)}.layer-name{font-size:10px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.layer-actions{display:flex;align-items:center}.layer-actions button{font-size:10px;padding:5px 3px;color:#7c857b}.empty-layers{background:#fafbf8;border:1px dashed var(--line);padding:20px 10px;text-align:center;color:var(--muted);font-size:10px;line-height:1.6}.page-actions{display:flex;gap:4px;border-top:1px solid var(--line);padding-top:14px;margin-top:21px}.page-actions button{font-size:9px;padding:9px 5px}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:var(--ink);color:white;border-radius:8px;padding:13px 20px;box-shadow:0 8px 25px #0002;z-index:10;font-size:12px;max-width:90vw;line-height:1.5}#toast.error{background:#963e30}dialog{border:1px solid var(--line);border-radius:16px;padding:35px;color:var(--ink);max-width:440px;box-shadow:0 20px 90px #0003}dialog::backdrop{background:#232a2755;backdrop-filter:blur(3px)}dialog h2{font-family:Georgia,serif;font-weight:400;font-size:28px;margin:12px 0 25px}dialog p{color:var(--muted);font-size:11px;line-height:1.6}dialog dl{display:grid;grid-template-columns:1fr auto;gap:15px 25px;font-size:11px;margin-bottom:25px}dialog dt{font-weight:600}dialog dd{margin:0;color:var(--muted)}.dialog-close{position:absolute;top:13px;right:16px;font-size:22px}@media(min-width:1600px){.studio{grid-template-columns:280px minmax(350px,1fr) 290px}.template-preview{height:135px}.template-preview svg{height:115px}.library,.inspector{padding-left:26px;padding-right:26px}}@media(max-width:1150px){.studio{grid-template-columns:224px minmax(300px,1fr) 232px}.topbar{padding:0 20px;gap:20px}.brand{min-width:180px}.header-actions{gap:3px}.quiet-button{padding:9px 7px}.primary-button{padding:12px}.workspace-hint{display:none}.library,.inspector{padding-left:17px;padding-right:17px}.eyebrow{font-size:8px;letter-spacing:1px}.workspace-top{padding:0 18px}.canvas-area{padding:24px}.property-grid{gap:8px}}@media(max-width:900px){.topbar{height:auto;min-height:112px;padding:15px 20px;flex-wrap:wrap;gap:12px 22px}.brand{min-width:170px}.document-heading{flex:1}.header-actions{width:100%;justify-content:flex-end;gap:7px}.studio{grid-template-columns:190px minmax(260px,1fr) 210px;height:calc(100dvh - 125px);min-height:650px}.library,.inspector{padding:20px 14px}.section-heading .eyebrow{font-size:7px}.section-heading .pill{display:none}h1{font-size:28px}.intro{font-size:10px}.workspace-top{padding:0 12px}.workspace-top .muted{display:none}.workspace-bottom{padding:0 9px}.zoom-tools{gap:3px}.canvas-area{padding:18px}.layers .layer-actions button{padding:5px 2px}.property-grid{gap:7px}}@media(max-width:700px){.topbar{padding:12px 14px;gap:10px 12px}.brand{min-width:140px;font-size:23px}.brand-mark{width:36px;height:36px;line-height:30px}.document-heading input{font-size:12px}.save-status{font-size:8px}.header-actions{gap:2px}.quiet-button{font-size:9px;padding:7px}.primary-button{font-size:10px;padding:10px}.primary-button span{margin-left:5px}.divider{margin:0 2px}.icon-button{width:25px}.studio{display:grid;grid-template-columns:1fr;height:auto;min-height:0}.library{border-right:0;padding:18px;border-bottom:1px solid var(--line)}.section-heading,h1,.intro,.library-footer,.sidebar-note{display:none}.sidebar-tabs{margin:0 0 12px}.templates{flex-direction:row;gap:10px}.template-button{flex:1;min-width:0}.template-preview{height:78px}.template-preview svg{height:66px}.template-button strong{font-size:9px;line-height:1.4}.template-button small{font-size:8px}.blank-design{margin-top:12px;padding:9px}.element-buttons{grid-template-columns:repeat(4,1fr);gap:7px}.element-buttons button{padding:12px 7px}.tool-glyph{font-size:24px;height:24px;margin-bottom:8px}.rectangle-glyph{height:20px;width:24px;margin:3px 0 9px}.circle-glyph{height:24px;width:24px;margin:1px 0 7px}.element-buttons strong{font-size:9px}.element-buttons small{display:none}.workspace{height:550px;min-height:400px}.workspace-top .muted{display:inline}.workspace-bottom{padding:0 14px}.canvas-area{padding:24px}.inspector{border-left:0;border-top:1px solid var(--line);padding:22px;display:grid;grid-template-columns:1fr 1fr;gap:0 25px}.inspector-heading{grid-column:1/-1;margin-bottom:18px}.inspector h2{font-size:23px}.layers-section{margin:0;padding:0;border:0;min-width:0}.page-actions{grid-column:1/-1}.property-field{margin-bottom:12px}.property-grid{gap:10px}}@media(prefers-reduced-motion:no-preference){button{transition:background .15s,border-color .15s,filter .15s}.template-button .template-preview{transition:border-color .15s}}@media print{body{background:white}.topbar,.library,.inspector,.workspace-top,.workspace-bottom,#toast{display:none}.studio{display:block;height:auto}.workspace{overflow:visible;height:auto}.canvas-area{display:block;padding:0;background:none;overflow:visible}.canvas-mount{box-shadow:none;max-width:100%;height:auto!important;width:100%!important}.canvas-mount svg{width:100%!important;height:auto!important}.selection-outline,.resize-handle{display:none}}
/* Expanded local design workflows. */
.topbar{gap:20px;padding-left:22px;padding-right:22px}.brand{min-width:170px}.header-actions{gap:4px}.quiet-button{padding-left:8px;padding-right:8px}.export-actions{margin-left:4px;gap:3px}.sidebar-tabs button{font-size:10px}.template-preview{height:100px}.template-preview svg{height:85px}.editing-toolbar{display:flex;align-items:center;gap:5px;padding:7px 15px;border-bottom:1px solid var(--line);background:white;min-height:40px;flex-wrap:wrap}.editing-toolbar button{font-size:9px;padding:6px 8px;border:1px solid var(--line);border-radius:4px}.editing-toolbar button[aria-pressed=true]{background:#edf1eb;border-color:#a5b8a6}.editing-toolbar span{margin-left:auto;font-size:9px;color:var(--muted)}.element-extras{display:flex;flex-direction:column;gap:8px;margin-top:16px}.element-extras button{font-size:10px;text-align:left;padding:10px 12px;border:1px solid var(--line);border-radius:5px}.library-controls{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:16px}.library-controls .primary-button{width:100%;font-size:11px}.saved-design{border:1px solid var(--line);padding:12px;border-radius:7px;margin-bottom:11px;background:#fafbf8}.saved-design .saved-open{text-align:left;font-size:11px;font-weight:600;display:block;width:100%;padding:0;margin-bottom:7px;word-break:break-word}.saved-design small{display:block;color:var(--muted);font-size:9px;margin-bottom:9px}.saved-design-actions{display:flex;justify-content:space-between;gap:4px}.saved-design-actions button{font-size:9px;color:var(--muted);padding:5px 0}.alignment-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:12px}.alignment-buttons button{padding:8px 4px;border:1px solid var(--line);border-radius:4px;font-size:9px}.property-section-title{font-size:10px;font-weight:600;margin:18px 0 12px;padding-top:14px;border-top:1px solid var(--line)}.checkbox-field{display:flex;align-items:center;gap:7px;font-size:10px;margin-bottom:10px}.checkbox-field input{accent-color:#6852a1}.selection-controls{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:15px}.selection-controls button{font-size:9px;padding:7px;border:1px solid var(--line);border-radius:4px;flex:1}.brand-swatches{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px}.brand-swatches button{width:24px;height:24px;border-radius:50%;border:1px solid #232a2720;background:var(--swatch);font-size:0}.brand-settings{border-top:1px solid var(--line);margin-top:18px;padding-top:17px}.snap-guide{stroke:#e76543;stroke-width:1;stroke-dasharray:5 4;vector-effect:non-scaling-stroke;pointer-events:none}.marquee{fill:#6852a115;stroke:#6852a1;stroke-width:1;vector-effect:non-scaling-stroke;pointer-events:none}.layer-row.locked .layer-name:after{content:' · locked';font-size:8px;color:var(--muted)}.layer-row.hidden-layer{opacity:.58}.layer-actions{gap:1px}.layer-actions button{min-width:14px;padding:5px 2px}.layer-actions button.active{color:#6852a1;font-weight:700}.layers-section .panel-hint{font-size:8px}.dialog-actions{display:flex;align-items:center;justify-content:space-between;gap:12px}#bulk-dialog,#table-dialog{width:min(540px,92vw);max-width:540px}#bulk-csv,#tool-csv{font-family:'Courier New',monospace;font-size:12px}#presentation-dialog{padding:0;border-radius:10px;background:#232a27;color:white;width:min(1200px,98vw);max-width:98vw;height:min(880px,95dvh);max-height:95dvh;overflow:hidden}#presentation-dialog:fullscreen{width:100vw;height:100dvh;max-width:none;max-height:none;border:0;border-radius:0}.presentation-header{height:50px;display:flex;align-items:center;justify-content:space-between;padding:0 24px}.presentation-header strong{font-size:12px;font-weight:400}.presentation-header button{font-size:25px;color:white}#slide-art{height:calc(100% - 110px);display:flex;align-items:center;justify-content:center;padding:12px 30px}#slide-art svg{max-width:100%;max-height:100%;width:auto;height:auto;box-shadow:0 5px 30px #0003}.presentation-controls{display:flex;align-items:center;justify-content:center;gap:25px;height:60px;font-size:12px}.presentation-controls button{color:white;font-size:14px}.presentation-controls button:disabled{opacity:.3}#fullscreen-presentation{margin-left:25px;border:1px solid #ffffff44;padding:8px;border-radius:4px;font-size:10px}.selection-summary{font-size:11px;line-height:1.5;color:var(--muted);margin-bottom:18px}.brand-colours-input{font-family:'Courier New',monospace;font-size:10px!important}.template-filter{border:1px solid var(--line);padding:8px;width:100%;border-radius:4px;margin-bottom:14px;background:#fafbf8;font-size:10px}.print-page{break-after:page;page-break-after:always}.print-page:last-child{break-after:auto;page-break-after:auto}@media(max-width:1350px){.topbar{height:auto;min-height:105px;flex-wrap:wrap;gap:10px 22px;padding-top:12px;padding-bottom:12px}.document-heading{min-width:200px}.header-actions{justify-content:flex-end;width:100%;gap:5px}.studio{height:calc(100dvh - 117px)}.topbar .brand{min-width:205px}}@media(max-width:900px){.header-actions{flex-wrap:wrap}.studio{height:calc(100dvh - 138px)}.editing-toolbar{gap:4px;padding:6px 8px}.editing-toolbar button{padding:5px;font-size:8px}.editing-toolbar span{display:none}}@media(max-width:700px){.topbar{min-height:130px}.topbar .brand{min-width:145px}.document-heading{min-width:100px}.header-actions{justify-content:flex-start;gap:3px}.export-actions{margin-left:0}.studio{height:auto}.library .templates{overflow-x:auto;padding-bottom:6px}.template-button{min-width:105px;flex:0 0 105px}.template-preview{height:80px}.template-preview svg{height:66px}.library #library-panel .sidebar-note{display:block}.saved-design{display:inline-block;vertical-align:top;width:calc(50% - 7px);margin-right:7px}.element-extras{flex-direction:row;gap:5px;margin-top:9px}.element-extras button{flex:1;font-size:9px;padding:8px 6px}.brand-settings{grid-column:1/-1}.inspector .layers-section{grid-column:2;grid-row:2}.editing-toolbar{justify-content:flex-start}.workspace{height:590px}.library-controls .primary-button{width:auto}.selection-controls button{font-size:8px}#slide-art{padding:10px}#fullscreen-presentation{margin-left:0}.presentation-controls{gap:14px}}@media print{body>*{display:none!important}#print-pages{display:block!important;margin:0}#print-pages .print-page{width:100%;height:auto;display:flex;align-items:center;justify-content:center}#print-pages svg{max-width:100%;max-height:98vh;width:100%;height:auto;display:block}#print-pages .print-page:last-child{break-after:auto}}

#ai-dialog,#background-dialog{width:min(560px,94vw);max-width:560px;max-height:92dvh;overflow:auto}.ai-result-field{margin-top:20px}.transparency-preview{margin:20px 0;min-height:50px;max-height:280px;overflow:auto;background-color:#fff;background-image:linear-gradient(45deg,#ddd 25%,transparent 25%),linear-gradient(-45deg,#ddd 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ddd 75%),linear-gradient(-45deg,transparent 75%,#ddd 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0}.transparency-preview img{display:block;max-width:100%;max-height:280px;margin:auto}.header-actions{flex-wrap:wrap}.library-footer div span{font-size:8px}

#video-dialog,#share-dialog{width:min(620px,94vw);max-width:620px;max-height:92dvh;overflow:auto}#video-result video{display:block;width:100%;max-height:350px;margin-top:18px;background:#232a27}.permission-row{display:flex;align-items:center;gap:12px;font-size:11px;margin:15px 0}.permission-row span{color:var(--muted);margin-left:auto}.shared-comment{padding:12px;background:#fafbf8;border:1px solid var(--line);border-radius:6px;margin-bottom:8px}.shared-comment strong{font-size:11px}.shared-comment p{white-space:pre-wrap;word-break:break-word;color:var(--ink);margin:8px 0;font-size:12px}.shared-comment small{font-size:9px;color:var(--muted)}.revision-button{display:block;text-align:left;font-size:10px;padding:9px;width:100%;border-bottom:1px solid var(--line)}

#video-live-preview{display:block;max-width:100%;max-height:280px;width:auto;height:auto;margin:15px auto;background:#232a27}.video-preview-controls{display:flex;align-items:center;gap:5px;flex-wrap:wrap}.video-preview-controls input{flex:1;min-width:100px;accent-color:#6852a1}.video-preview-controls button{font-size:10px}
.header-actions{min-width:0}.export-actions{flex-wrap:wrap;max-width:100%}@media(max-width:700px){.header-actions .export-actions{width:100%;gap:3px}.topbar{align-items:center}}

/* A compact studio header and readable editing controls. */
:root {
  --muted: #697269;
  --header-height: 80px;
  --muted: #626b63;
}

.topbar {
  display: grid;
  grid-template-columns: 170px minmax(140px, 1fr) max-content;
  align-items: center;
  height: var(--header-height);
  min-height: 0;
  padding: 0 24px;
  gap: 20px;
  overflow: visible;
  z-index: 20;
}
.topbar .brand { min-width: 0; }
.document-heading { min-width: 0; }
.save-status { font-size: 11px; }
.header-actions {
  width: auto;
  min-width: 0;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 5px;
}
.header-actions .icon-button { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 5px; }
.history-actions { display: flex; align-items: center; flex: 0 0 auto; gap: 1px; }
.header-actions > .quiet-button { min-height: 36px; padding: 0 10px; }
.quiet-button { min-height: 36px; font-size: 12px; }
.primary-button { font-size: 12px; }
.header-actions .divider { margin: 0 5px; flex: 0 0 1px; }

.action-menu { position: relative; flex: 0 0 auto; }
.action-menu > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 11px;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  list-style: none;
  cursor: pointer;
  outline-offset: 3px;
}
.action-menu > summary::-webkit-details-marker { display: none; }
.action-menu > summary::marker { content: ''; }
.action-menu > summary > span { color: var(--muted); font-size: 13px; line-height: 1; }
.action-menu > summary:focus-visible { outline: 2px solid var(--accent); }
.action-menu > summary:hover, .action-menu[open] > summary { background: #f0f2ed; }
.action-menu[open] { z-index: 1; }
.action-menu-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 240px;
  max-width: calc(100vw - 28px);
  max-height: calc(100dvh - var(--header-height) - 24px);
  padding: 6px;
  overflow-y: auto;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 9px 28px #232a2724;
}
.action-menu-panel button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  width: 100%;
  min-height: 36px;
  padding: 8px 10px;
  border-radius: 4px;
  background: transparent;
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
}
.action-menu-panel button:hover:not(:disabled) { background: #f0f2ed; filter: none; }
.action-menu-panel button span { color: var(--muted); }
.action-menu-panel button small { color: var(--muted); font-size: 12px; font-weight: 400; line-height: 1.4; white-space: normal; }
.menu-caption { padding: 8px 10px 5px; color: var(--muted); font-size: 9px; letter-spacing: 1.2px; }
.download-menu > summary { background: var(--ink); color: var(--white); padding: 0 14px; }
.download-menu > summary > span { color: #c6d4c9; }
.download-menu > summary:hover, .download-menu[open] > summary { background: #354039; }

.studio { height: calc(100dvh - var(--header-height)); }
.sidebar-tabs { flex-wrap: wrap; column-gap: 6px; row-gap: 2px; }
.sidebar-tabs button { flex: 1 1 auto; min-width: max-content; min-height: 40px; font-size: 12px; white-space: nowrap; }
.panel-hint, .sidebar-note, .intro, .selection-summary { font-size: 12px; }
.element-buttons strong, .element-extras button { font-size: 12px; }
.template-filter { min-height: 36px; font-size: 12px; }
.editing-toolbar { min-height: 48px; padding: 7px 12px; gap: 6px; }
.editing-toolbar button {
  min-width: 32px;
  min-height: 32px;
  padding: 6px 9px;
  font-size: 12px;
  line-height: 1.25;
}
.editing-toolbar span { font-size: 12px; }
.editing-toolbar button:hover:not(:disabled), .alignment-buttons button:hover:not(:disabled),
.selection-controls button:hover:not(:disabled), .selection-actions button:hover:not(:disabled) { background: #f0f2ed; }
.canvas-area {
  background-color: #f0f1ed;
  background-image: radial-gradient(#232a2711 .65px, transparent .65px);
  background-size: 16px 16px;
}
.workspace-top > div { min-width: 0; }
.workspace-top strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.property-field > span, .checkbox-field, .property-section-title { font-size: 12px; }
.property-field input:not([type=color]), .property-field select, .property-field textarea {
  min-height: 36px;
  font-size: 12px;
}
.colour-field code { font-size: 12px; }
.checkbox-field { min-height: 32px; line-height: 1.4; }
.checkbox-field input { width: 16px; height: 16px; flex: 0 0 16px; }
.alignment-buttons { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.alignment-buttons button, .selection-controls button, .selection-actions button {
  min-height: 32px;
  font-size: 12px;
  line-height: 1.3;
}
.selection-controls button { flex: 1 1 85px; }
.selection-actions { flex-wrap: wrap; }
.selection-actions button { flex: 1 1 70px; }
.brand-swatches button { width: 32px; height: 32px; }
.brand-settings > .property-section-title { margin-top: 0; padding-top: 0; border-top: 0; }
.layer-row { flex-wrap: wrap; padding: 4px 6px; gap: 2px; }
.layer-select { flex: 1 1 100%; min-height: 32px; padding: 5px 3px; }
.layer-name { font-size: 12px; line-height: 1.4; }
.layer-row.locked .layer-name:after { font-size: 11px; }
.layer-actions { flex: 1 1 100%; flex-wrap: wrap; justify-content: flex-end; gap: 2px; }
.layer-actions button, .layers .layer-actions button {
  flex: 1 0 32px;
  min-width: 32px;
  min-height: 32px;
  padding: 5px;
  border-radius: 4px;
  font-size: 14px;
  color: #58645a;
}
.layer-actions button:hover:not(:disabled) { background: #e6ebe3; }
.layer-actions button.active { color: #6852a1; background: #6852a10c; }
.layers-section .panel-hint { font-size: 12px; }
.page-actions { flex-wrap: wrap; }
.page-actions button { flex: 1 1 85px; min-height: 32px; font-size: 12px; white-space: normal; }
.workspace-bottom { min-width: 0; padding: 0 16px; gap: 6px; }
.pages {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
  min-height: 36px;
  align-items: center;
  overflow-x: auto;
  padding: 3px;
  scroll-padding-inline: 3px;
  scrollbar-width: thin;
}
.page-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  min-width: 36px;
  max-width: 144px;
  min-height: 32px;
  padding: 6px 9px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  line-height: 1.3;
}
.page-number { flex: 0 0 auto; font-weight: 600; }
.page-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-tab[aria-current=true] { border-color: var(--accent); background: #fff1eb; color: var(--ink); }
.add-page { width: 32px; height: 32px; }
.zoom-tools { flex: 0 0 auto; gap: 2px; margin-left: 0; font-size: 12px; }
.zoom-tools button, .zoom-tools button:first-child { min-width: 32px; min-height: 32px; padding: 5px; font-size: 12px; }
.zoom-tools span { min-width: 38px; }

@media (max-width: 1099px) {
  :root { --header-height: 112px; }
  .topbar {
    grid-template-columns: 170px minmax(0, 1fr);
    grid-template-rows: 42px 44px;
    gap: 6px 20px;
    padding: 10px 20px;
  }
  .header-actions { grid-column: 1 / -1; width: 100%; gap: 6px; }
  .header-actions .divider { display: none; }
  .header-actions .icon-button { width: 44px; height: 44px; flex-basis: 44px; }
  .header-actions > .quiet-button, .action-menu > summary { min-height: 44px; }
  .page-tab { max-width: 124px; }
}

@media (max-width: 700px), (pointer: coarse) {
  .editing-toolbar button, .alignment-buttons button, .selection-controls button,
  .selection-actions button, .page-actions button, .element-extras button,
  .library-controls button, .saved-design-actions button, .sidebar-tabs button,
  .quiet-button, .primary-button, .action-menu-panel button { min-height: 44px; }
  .layer-select { min-height: 44px; }
  .layer-actions button, .layers .layer-actions button { min-width: 44px; min-height: 44px; flex-basis: 44px; }
  .brand-swatches button { width: 44px; height: 44px; }
  .property-field input:not([type=color]), .property-field select { min-height: 44px; }
  .checkbox-field { min-height: 44px; }
  .page-tab { min-width: 44px; min-height: 44px; }
  .add-page { width: 44px; height: 44px; }
  .zoom-tools button, .zoom-tools button:first-child { min-width: 44px; min-height: 44px; }
  .action-menu > summary { min-height: 44px; }
}

@media (max-width: 700px) {
  :root { --header-height: 114px; }
  .topbar { grid-template-columns: 142px minmax(0, 1fr); gap: 8px 12px; padding: 10px 14px; }
  .topbar .brand { font-size: 23px; min-width: 0; gap: 9px; }
  .document-heading input { font-size: 12px; }
  .save-status { font-size: 10px; }
  .header-actions { justify-content: space-between; gap: 3px; position: relative; }
  .header-actions > .quiet-button, .action-menu > summary { min-width: 44px; padding: 0 8px; }
  .action-menu > summary > span { display: none; }
  .action-menu { position: static; }
  .action-menu .action-menu-panel { left: 0; right: auto; transform: none; }
  .studio { height: auto; }
  .editing-toolbar { padding: 7px 10px; gap: 6px; }
  .editing-toolbar span { display: none; }
  .element-extras { flex-wrap: wrap; }
  .element-extras button { flex: 1 1 100px; font-size: 12px; }
  .workspace-bottom { padding: 0 14px; }
  .page-tab { max-width: 120px; }
  .inspector { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .selection-controls button { font-size: 12px; }
}

@media (max-width: 500px) {
  .inspector { display: block; padding: 22px; }
  .inspector .layers-section { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
  .page-tab { max-width: 112px; }
}

@media (max-width: 360px) {
  .topbar { grid-template-columns: 130px minmax(0, 1fr); }
  .topbar .brand { font-size: 21px; }
  .header-actions { gap: 0; }
  .header-actions > .quiet-button, .action-menu > summary { padding-left: 4px; padding-right: 4px; }
}

/* Precision and retained data tools stay close to the canvas. */
.canvas-mount { position: relative; }
.canvas-mount.transparent-page { background-color: #fff; background-image: conic-gradient(#e9ece7 25%, #fff 0 50%, #e9ece7 0 75%, #fff 0); background-size: 20px 20px; }
.canvas-ruler { position: absolute; overflow: hidden; cursor: crosshair; user-select: none; }
.canvas-ruler rect { fill: #f8faf6; }
.canvas-ruler line { stroke: #9da89e; stroke-width: 1; }
.canvas-ruler text { fill: #4e5b52; font: 10px Arial, sans-serif; }
.canvas-ruler:focus-visible { outline: 2px solid var(--accent); }
.ruler-horizontal { top: -22px; left: 0; }
.ruler-vertical { top: 0; left: -22px; }
.manual-guide { cursor: move; }
.guide-line { stroke: #c25436; stroke-width: 1; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; pointer-events: none; }
.guide-hit { stroke: transparent; stroke-width: 12; vector-effect: non-scaling-stroke; pointer-events: stroke; }
.page-order { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line); }
.page-order > span { display: block; border: 0; padding: 0; margin: 0 0 12px; }
.page-order-input { display: flex; align-items: center; gap: 7px; }
.page-order-input input { min-width: 0; width: 100%; }
.page-order-input button { min-height: 36px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 4px; font-size: 12px; }
#table-dialog, #guides-dialog { width: min(720px, 94vw); max-width: 720px; max-height: 92dvh; overflow: auto; box-sizing: border-box; }
#table-dialog p, #guides-dialog p, .data-csv-panel summary { font-size: 12px; }
.data-grid { width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: 5px; }
.data-grid table { border-collapse: collapse; width: 100%; }
.data-grid th, .data-grid td { padding: 4px; text-align: left; font-size: 12px; }
.data-grid th { background: #f0f2ed; font-weight: 600; }
.data-grid input, .data-grid textarea { display: block; width: 100%; min-width: 110px; min-height: 36px; padding: 7px; box-sizing: border-box; font: 12px Arial, sans-serif; color: var(--ink); background: white; border: 1px solid var(--line); border-radius: 3px; }
.data-grid button { min-width: 32px; min-height: 36px; color: #a74a32; font-size: 20px; }
.data-structure-controls { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0 16px; }
.data-csv-panel { padding: 12px 0; margin-bottom: 16px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.data-csv-panel summary { cursor: pointer; min-height: 32px; line-height: 32px; }
.data-csv-panel .property-field { margin-top: 12px; }
.guide-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.guide-add { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; border-top: 1px solid var(--line); padding-top: 18px; }
.guide-add label { flex: 1 1 140px; min-width: 0; margin-bottom: 0; }
.guide-add button { flex: 0 0 auto; min-height: 36px; }
#guide-list { margin-top: 20px; }
.guide-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 12px; }
.guide-row > span { flex: 1 1 auto; }
.earlier-copy-row { flex-wrap: wrap; }
.earlier-copy-row > span { flex-basis: 100%; }
.earlier-copy-row > button { min-height: 44px; }
.guide-row label { flex: 0 1 110px; min-width: 0; }
.guide-row input { min-height: 36px; width: 100%; padding: 7px; border: 1px solid var(--line); border-radius: 4px; box-sizing: border-box; font-size: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 700px), (pointer: coarse) {
  .data-grid input, .data-grid textarea, .data-grid button, .page-order-input button, .guide-row input, .guide-add button { min-height: 44px; }
  .data-grid button { min-width: 44px; }
  .data-csv-panel summary { min-height: 44px; line-height: 44px; }
  .guide-options { grid-template-columns: minmax(0, 1fr); }
  #table-dialog, #guides-dialog { padding: 28px 18px; }
}

.data-grid textarea { resize: vertical; line-height: 1.45; }
.asset-intake { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 14px; }
.asset-intake > button { width: 100%; border: 1px dashed #a4b1a5; text-align: left; min-height: 40px; }
.asset-intake p { font-size: 12px; line-height: 1.6; color: var(--muted); }
.asset-intake .intake-status { margin-bottom: 0; font-size: 11px; }
.intake-status.error { color: #963e30; }
.canvas-area.accepting-drop { outline: 2px dashed var(--accent); outline-offset: -10px; }
.intake-overlay { position: absolute; inset: 16px; z-index: 4; border: 2px dashed #dc7958; border-radius: 8px; background: #f6f1e7ed; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 12px; padding: 24px; text-align: center; pointer-events: none; }
.intake-overlay[hidden] { display: none; }
.intake-overlay strong { font-family: Georgia, serif; font-size: 26px; font-weight: 400; }
.intake-overlay span { font-size: 12px; color: #626b63; }
.intake-overlay button { pointer-events: auto; border: 1px solid #a4b1a5; min-height: 40px; }
.intake-overlay.preparing { inset: auto 14px 14px; padding: 14px; border-style: solid; border-width: 1px; gap: 8px; }
.intake-overlay.preparing strong { font-family: Arial, sans-serif; font-size: 14px; font-weight: 600; }
@media (max-width:700px) { .asset-intake { margin-top: 12px; padding-top: 10px; } .asset-intake > button, .intake-overlay button { min-height: 44px; } .asset-intake p { font-size: 12px; margin: 8px 0; } .intake-overlay { inset: 10px; padding: 16px; } .intake-overlay strong { font-size: 23px; } }

/* Blank creation, native drawing and visible layer ordering. */
.header-actions .new-design-button { min-height: 36px; padding: 0 12px; white-space: nowrap; flex: 0 0 auto; }
.brush-settings { padding: 10px 14px; background: #f8f7f3; border-bottom: 1px solid var(--line); display: flex; align-items: center; flex-wrap: wrap; gap: 12px; font-size: 12px; }
.brush-settings[hidden] { display: none; }
.brush-settings label { display: flex; align-items: center; gap: 7px; }
.brush-settings input[type=number] { width: 70px; padding: 7px; border: 1px solid var(--line); border-radius: 5px; }
.brush-settings input[type=color] { width: 32px; height: 32px; padding: 0; border: 0; background: none; }
.brush-settings span { color: var(--muted); font-size: 11px; flex: 1 1 180px; }
.canvas-mount.drawing, .canvas-mount.drawing .design-element { cursor: crosshair; }
.layer-row[draggable=true] { cursor: grab; }
.layer-row.dragging { opacity: .45; }
.layer-row.drop-target { outline: 2px solid #6852a1; }
#new-design-dialog { width: min(480px, 94vw); max-width: 480px; max-height: 92dvh; overflow: auto; box-sizing: border-box; }
.new-design-error { color: #963e30; }
@media(max-width:1100px) { .topbar { grid-template-columns: 170px minmax(120px, 1fr); height: auto; min-height: 112px; padding-top: 12px; padding-bottom: 12px; } .header-actions { grid-column: 1 / -1; justify-content: flex-end; } .studio { height: calc(100dvh - 124px); } }
@media(max-width:700px) { .topbar { grid-template-rows: 42px auto; } .header-actions { flex-wrap: wrap; justify-content: flex-start; gap: 5px; } .header-actions .new-design-button { min-height: 44px; padding: 0 10px; } .studio { height: auto; } .element-buttons { grid-template-columns: repeat(5, minmax(0, 1fr)); } .element-buttons button { min-width: 0; } }
@media(max-width:390px) { .element-buttons { grid-template-columns: repeat(3, minmax(0, 1fr)); } #new-design-dialog { padding: 28px 18px; } }

.inspector .layers-section { margin: 0 0 20px; padding: 0 0 14px; border-top: 0; border-bottom: 1px solid var(--line); }
.layers { max-height: 240px; overflow-y: auto; overscroll-behavior: contain; }
@media(max-width:700px) { .inspector .layers-section { margin-bottom: 20px; } .layers { max-height: 260px; } }

.layer-actions svg { display: block; pointer-events: none; margin: auto; }
@media(max-width:700px), (pointer:coarse) {
  .brush-settings label { min-height: 44px; }
  .brush-settings input[type=color] { width: 44px; height: 44px; }
  .brush-settings input[type=number] { min-height: 44px; }
  #new-design-dialog .dialog-close { width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; display: grid; place-items: center; top: 8px; right: 8px; }
}
/* A small, optional asset shelf alongside the tools. */
.asset-heading{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:4px 0 16px}.asset-heading h2{margin:0;font-family:Georgia,serif;font-size:21px;font-weight:400;letter-spacing:-.6px}.asset-credit-button{padding:8px 0;color:#566158;text-decoration:underline;text-underline-offset:3px;font-size:11px}.asset-search-field{display:grid;gap:7px;margin-bottom:12px}.asset-search-field>span,.asset-filters label>span{font-size:10px;text-transform:uppercase;letter-spacing:.7px;color:#58645b}.asset-search-field input,.asset-filters select{width:100%;min-width:0;border:1px solid #d7ddd4;border-radius:7px;background:#fff;color:var(--ink);padding:10px;font-size:12px;min-height:42px}.asset-filters{display:grid;grid-template-columns:1fr;gap:10px}.asset-filters label{display:grid;gap:6px}.asset-colour-field{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:11px;color:#566158;margin:12px 0 0}.asset-colour-field input{width:40px;height:36px;padding:2px;border:1px solid #d7ddd4;border-radius:6px;background:#fff}.asset-status{font-size:11px;line-height:1.5;color:#566158;min-height:34px;margin:14px 0 12px}.asset-status.error{color:#a6442a}.asset-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.asset-card{min-width:0;padding:6px 3px 7px;border:1px solid #e0e5dc;border-radius:8px;background:#fff;text-align:center;display:flex;flex-direction:column;gap:5px;align-items:center}.asset-card:hover,.asset-card:focus-visible{border-color:var(--accent);background:#fff9f2}.asset-card[aria-busy="true"]{border-color:var(--accent);opacity:.65}.asset-preview{display:flex;align-items:center;justify-content:center;width:100%;height:55px;overflow:hidden}.asset-preview img{width:100%;height:100%;object-fit:contain}.asset-preview.icon img{width:35px;height:35px}.asset-preview.unavailable{font-size:8px;color:#a6442a}.asset-name{font-size:10px;line-height:1.3;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:26px;max-width:100%}.asset-grid.illustrations{grid-template-columns:repeat(2,minmax(0,1fr))}.asset-grid.illustrations .asset-preview{height:92px}.asset-empty{grid-column:1/-1;padding:20px 4px;line-height:1.6;color:#566158}.asset-pagination{display:flex;align-items:center;justify-content:space-between;gap:6px;margin:16px 0;font-size:10px}.asset-pagination button{min-height:42px;padding:6px 4px;border:1px solid #e0e5dc;border-radius:6px;background:#fff}.asset-pagination span{white-space:nowrap;color:#566158}.asset-credit-source{margin:20px 0;line-height:1.6}.asset-credit-source h3{font-size:15px;margin:0 0 4px}.asset-credit-source p{margin:0 0 5px}.asset-credit-source a{color:#a6442a}.sidebar-tabs [role="tab"]:focus-visible{outline-offset:-3px}
@media(max-width:700px){.asset-grid{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:max-content;max-height:min(360px,45dvh);overflow-y:auto;overscroll-behavior:contain;padding:6px}.asset-preview{height:62px}.asset-filters{grid-template-columns:1fr 1fr}.asset-heading h2{font-size:23px}.asset-credit-button{min-height:44px;font-size:12px}.asset-pagination button{min-height:44px}.asset-colour-field input{height:44px;width:48px}.asset-search-field input,.asset-filters select{min-height:44px}.asset-name{font-size:11px}.asset-grid.illustrations .asset-preview{height:120px}}
@media(max-width:350px){.asset-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Named designs are a separate shelf from the free artwork collection. */
.header-actions .designs-button { border: 1px solid var(--line); border-radius: 6px; }
.designs-button.has-unsaved-design::after { content: ''; display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-radius: 50%; background: var(--accent); vertical-align: middle; }
.designs-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 4px 0 16px; }
.designs-heading h2 { font: 400 23px Georgia, serif; letter-spacing: -.5px; margin: 0; }
.design-count { padding: 4px 7px; border-radius: 5px; background: #eef1e9; color: #526451; font-size: 11px; white-space: nowrap; }
#library-panel .library-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 16px; }
#library-panel .library-controls .primary-button { grid-column: 1 / -1; width: 100%; min-height: 40px; }
#library-panel .library-controls .quiet-button { border: 1px solid var(--line); background: #fff; white-space: normal; font-size: 11px; padding: 8px; min-height: 40px; }
.design-search { display: grid; gap: 7px; margin: 0 0 10px; }
.design-search > span, .design-sort > span { font-size: 10px; color: #58645b; }
.design-search input, .design-sort select { width: 100%; min-width: 0; border: 1px solid #d7ddd4; border-radius: 7px; background: #fff; color: var(--ink); padding: 10px; font-size: 12px; min-height: 40px; }
.design-sort { display: flex; align-items: center; gap: 10px; }
.design-sort select { padding: 7px 10px; }
.library-status { font-size: 11px; color: #566158; line-height: 1.5; margin: 12px 0; }
.library-status.error { color: #963e30; }
.saved-design-grid { display: grid; gap: 12px; }
.saved-design-grid .saved-design { display: block; width: 100%; min-width: 0; margin: 0; padding: 8px; background: #fff; border-radius: 9px; }
.saved-design.current-design { border-color: #a8bda3; background: #f3f6f0; }
.saved-design-grid .saved-open { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 0; padding: 0; text-align: left; width: 100%; }
.saved-design-preview { display: flex; align-items: center; justify-content: center; width: 100%; height: 130px; padding: 10px; background: #eeeee7; border-radius: 5px; overflow: hidden; }
.saved-design-preview svg { max-width: 100%; max-height: 100%; width: auto; height: auto; filter: drop-shadow(0 2px 3px #232a271c); }
.saved-design-title { display: block; padding-top: 3px; font-size: 13px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.saved-design-meta, .saved-design-date { color: #68736a; font-size: 10px; font-weight: 400; line-height: 1.4; }
.saved-design-badge { position: absolute; top: 5px; right: 5px; background: #f8fcf2; color: #4c6949; border: 1px solid #cedbc4; border-radius: 4px; font-size: 9px; padding: 4px 5px; }
.saved-open-label { display: flex; justify-content: space-between; width: 100%; color: #345943; font-size: 11px; padding: 5px 0 7px; }
.saved-design-actions { display: flex; gap: 4px; border-top: 1px solid var(--line); }
.saved-design-actions button { flex: 1; color: #566158; padding: 8px 3px; min-height: 36px; font-size: 10px; border-radius: 4px; }
.saved-design-actions button.danger { color: #a6442c; }
.design-empty { padding: 25px 14px; border: 1px dashed #cdd7c7; border-radius: 8px; background: #f8faf5; text-align: center; }
.design-empty > span { display: block; font-size: 28px; color: #a1b39b; margin-bottom: 9px; }
.design-empty strong { font-size: 13px; font-weight: 500; }
.design-empty p, .library-backups p { font-size: 11px; line-height: 1.6; color: #566158; }
.library-backups { border-top: 1px solid var(--line); margin-top: 20px; padding-top: 12px; }
.library-backups summary { cursor: pointer; font-size: 11px; line-height: 1.6; min-height: 36px; padding: 8px 0; }
#library-panel .library-backups .library-controls { display: flex; flex-wrap: wrap; gap: 8px; }
.library-backups .library-controls > button { flex: 1 1 110px; }
#design-name-dialog { width: min(420px, 94vw); max-height: 92dvh; overflow: auto; }
#design-name-error:empty { display: none; }
@media (min-width: 1101px) and (max-width: 1280px) { .topbar { grid-template-columns: 150px minmax(80px, 1fr) max-content; gap: 12px; padding-left: 16px; padding-right: 16px; } .topbar .brand { font-size: 23px; gap: 8px; } }
@media (max-width: 700px) {
  #library-panel .library-controls .primary-button, #library-panel .library-controls .quiet-button, .design-search input, .design-sort select, .saved-design-actions button, .library-backups summary { min-height: 44px; }
  #library-panel .library-controls { grid-template-columns: 1fr 1fr 1fr; }
  #library-panel .library-controls .primary-button { grid-column: auto; }
  #library-panel .saved-design-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: min(430px, 55dvh); overflow-y: auto; padding: 4px; overscroll-behavior: contain; }
  .saved-design-preview { height: 145px; }
  .saved-design-actions { flex-wrap: wrap; }
  .saved-design-actions button { min-width: 44px; font-size: 11px; }
  .design-sort { justify-content: flex-end; }
  .design-sort select { width: auto; }
  #design-name-dialog { padding: 28px 20px; }
  #design-name-dialog .dialog-close { width: 44px; height: 44px; padding: 0; top: 8px; right: 8px; }
}
@media (max-width: 350px) { #library-panel .saved-design-grid { grid-template-columns: 1fr; } .saved-design-preview { height: 155px; } }

/* The expanded toolbox keeps the editor's quiet, practical rhythm. */
.property-details { border-top: 1px solid var(--line); margin: 12px 0; padding-top: 10px; }
.property-details summary, .media-shelf summary, .uploads-shelf summary { cursor: pointer; font-weight: 650; min-height: 36px; display: flex; align-items: center; }
.frame-tool { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 7px; padding-top: 12px; margin-top: 8px; border-top: 1px solid var(--line); }
.frame-tool > span { grid-column: 1 / -1; font-size: 12px; font-weight: 650; color: #566158; }
.frame-tool select, .design-library-filters select { width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: 6px; background: white; padding: 8px; }
.frame-tool button { border: 1px solid var(--line); background: #f6f1e7; padding: 8px; border-radius: 6px; font-size: 12px; }
.media-shelf, .uploads-shelf { border-bottom: 1px solid var(--line); padding: 0 0 14px; margin-bottom: 14px; }
.design-library-filters { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 8px; margin: 12px 0; }
.design-library-filters .property-field { margin: 0; }
.library-views { display: flex; padding: 3px; background: #eee9df; border-radius: 7px; gap: 3px; margin: 12px 0; }
.library-views button { flex: 1; padding: 8px 4px; border-radius: 5px; font-size: 12px; min-height: 36px; color: #566158; }
.library-views button[aria-pressed=true] { background: white; color: var(--ink); box-shadow: 0 1px 3px #232a2712; }
.saved-design-actions { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); padding: 4px; }
.saved-design-actions button { min-width: 0; font-size: 11px; min-height: 36px; }
.saved-design-actions button[aria-pressed=true] { color: #a64829; background: #f6f1e7; }
.saved-design-tags { color: #6852a1; font-size: 10px; display: block; white-space: normal; overflow-wrap: anywhere; }
.library-pagination { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; justify-content: space-between; margin: 10px 0; font-size: 12px; }
.library-pagination button { padding: 8px 6px; min-height: 36px; border: 1px solid var(--line); border-radius: 6px; }
.folder-create { display: flex; gap: 8px; margin: 20px 0; }
.folder-create input, .folder-row input, #upload-search, .upload-card input { min-width: 0; width: 100%; border: 1px solid var(--line); border-radius: 6px; padding: 10px; background: white; }
.folder-row { display: grid; grid-template-columns: minmax(0,1fr) auto auto auto; align-items: center; gap: 6px; margin-bottom: 10px; }
.folder-row button, .upload-card button { padding: 8px; border-radius: 6px; font-size: 12px; }
.folder-row span { font-size: 12px; color: #566158; }
.version-row { display: flex; gap: 12px; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.version-row div { min-width: 0; overflow-wrap: anywhere; }
.version-row strong, .version-row span { display: block; }
.version-row span { font-size: 12px; color: #566158; margin-top: 5px; }
.version-row button { flex-shrink: 0; border: 1px solid var(--line); padding: 10px; border-radius: 6px; }
.uploads-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; max-height: 440px; overflow-y: auto; margin-top: 12px; }
.upload-card { min-width: 0; border: 1px solid var(--line); border-radius: 8px; padding: 4px; background: white; }
.upload-card > button { display: block; width: 100%; text-align: left; }
.upload-card img { display: block; width: 100%; height: 88px; object-fit: cover; border-radius: 5px; }
.upload-card strong { display: block; overflow-wrap: anywhere; font-size: 12px; margin-top: 6px; }
.upload-card form { display: flex; gap: 2px; }
.upload-card form input { font-size: 11px; padding: 6px; }
.saved-audio { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 12px 0; overflow-wrap: anywhere; }
@media(max-width:700px), (pointer:coarse) { .frame-tool button,.frame-tool select,.library-views button,.saved-design-actions button,.library-pagination button,.folder-row button,.folder-create button,.folder-row input,.folder-create input,.version-row button,.upload-card button,.upload-card input,.media-shelf summary,.uploads-shelf summary { min-height:44px; } }
@media(max-width:390px) { .folder-create { flex-wrap:wrap; } .folder-create button { width:100%; } .folder-row { grid-template-columns:minmax(0,1fr) auto; } .folder-row input { grid-column:1 / -1; } .version-row { flex-wrap:wrap; } .version-row button { width:100%; } .saved-audio { flex-wrap:wrap; } }

.gradient-fields { border:0; margin:0; padding:0; min-width:0; }
.gradient-fields:disabled { opacity:.5; }
#canvas-mount svg text,.template-preview svg text,.saved-design-preview svg text,#print-pages svg text { font-synthesis:style; }

#toast{pointer-events:none}
.template-search-field{margin-bottom:10px}
#template-count{margin-bottom:12px}
.resize-size-group{border:0;border-top:1px solid var(--line);padding:13px 0 5px;margin:14px 0;min-width:0}
.resize-size-group legend{font-size:11px;font-weight:600;padding:0 8px 0 0}
.resize-size-group .checkbox-field{align-items:flex-start;padding:6px 0;gap:10px;min-height:44px}
.resize-size-group small{display:block;color:var(--muted);font-size:10px;margin-top:4px}
#image-export-summary,#image-export-status{overflow-wrap:anywhere;line-height:1.55}
#image-export-status:empty{display:none}
@media(max-width:700px),(pointer:coarse){#template-search,#template-category,#image-export-dialog select,#image-export-dialog button{min-height:44px}}

/* A paper-and-sticker workbench. Artwork stays inside the untouched SVG canvas. */
@font-face {
  font-family: 'Stencil UI';
  src: url('./public/fonts/dm-sans-400-700-latin.woff2') format('woff2');
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}
:root {
  --font: 'Stencil UI', 'DM Sans', Arial, sans-serif;
  --ink: #243c34;
  --muted: #5c6b61;
  --paper: #faf8f1;
  --line: #e0e5da;
  --green: #e5eee3;
  --studio-teal: #30675b;
  --studio-coral: #e98a6c;
  --studio-yellow: #f4d98a;
  --studio-mint: #e4eee1;
  --studio-radius: 10px;
  --studio-motion: 180ms;
}
.topbar { background: #fffdf8; border-bottom-color: #dfe4d8; }
.brand-mark {
  background: #fff4cd;
  border-color: var(--studio-teal);
  border-radius: 11px;
  box-shadow: 2px 3px 0 #dfe9dc;
  transform: rotate(-5deg);
}
.brand-mark span { color: #b84d31; }
.new-design-button { background: var(--studio-teal); border-radius: 9px; }
.download-menu > summary { border-radius: 9px; }
.save-status::before { color: var(--studio-teal); }
.library, .inspector { background: #fffdf8; }
.toolbox-intro { position: relative; }
.toolbox-intro h1 { position: relative; z-index: 1; max-width: 138px; }
.toolbox-intro h1 span { color: #b84d31; }
.toolbox-sketch {
  position: absolute;
  width: 85px;
  height: auto;
  top: 10px;
  right: -5px;
  pointer-events: none;
}
.toolbox-intro .intro { position: relative; max-width: 29ch; margin-bottom: 18px; }
.pill { color: #3c6653; background: #e8efe1; border-radius: 5px; }
.sidebar-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; border-bottom-color: #cdd9cb; }
.sidebar-tabs button { padding-inline: 4px; border-radius: 8px 8px 0 0; }
.sidebar-tabs button[aria-selected=true] { color: #245c4d; background: var(--studio-mint); border-bottom-color: var(--studio-teal); }
.sidebar-tabs button:hover:not(:disabled) { background: #edf2e7; filter: none; }
.element-buttons { gap: 10px; }
.element-buttons button {
  --tool-paper: #edf2e6;
  background: var(--tool-paper);
  border-color: #dce3d4;
  border-radius: var(--studio-radius);
  box-shadow: 0 2px 0 #dfe5d8;
}
.element-buttons button:nth-child(3n+2) { --tool-paper: #fff4d5; }
.element-buttons button:nth-child(3n) { --tool-paper: #fae9df; }
.tool-glyph { color: var(--studio-teal); }
.rectangle-glyph { background: #83aa8d; border: 1px solid #698c73; border-radius: 3px; transform: rotate(-6deg); }
.circle-glyph { background: #df7655; border: 1px solid #cf6548; }
#add-star .tool-glyph { color: #996326; }
#add-diamond .tool-glyph { color: #c15b3f; }
.element-extras > button, .frame-tool button { border-radius: 8px; background: #fffdf5; }
.frame-tool button { background: #f8edc9; }
.blank-design { min-height: 44px; font-size: 12px; border-color: #86a185; background: #f3f6e9; border-radius: 9px; }
.templates { gap: 12px; }
.template-button {
  --template-mat: #e5eee1;
  --template-tilt: -1deg;
  border: 1px solid transparent;
  border-radius: 13px;
  padding: 6px;
  margin-inline: -6px;
}
.template-button:nth-child(3n+2) { --template-mat: #fff1cb; --template-tilt: 1deg; }
.template-button:nth-child(3n) { --template-mat: #f7e6db; --template-tilt: -.7deg; }
.template-preview {
  position: relative;
  height: 132px;
  padding: 12px;
  background: var(--template-mat);
  border: 1px solid #243c3410;
  border-radius: var(--studio-radius);
}
.template-preview::before {
  content: '';
  position: absolute;
  top: 7px;
  left: 10px;
  width: 27px;
  height: 9px;
  background: #fffdf79e;
  border: 1px solid #fffdf7c9;
  transform: rotate(-12deg);
  pointer-events: none;
}
.template-preview svg { height: 106px; max-width: 92%; transform: rotate(var(--template-tilt)); filter: drop-shadow(0 3px 3px #243c3424); }
.template-button strong { font-size: 12px; line-height: 1.35; margin-top: 9px; }
.template-button small { font-size: 11px; line-height: 1.4; }
.template-button:focus-visible { outline: 3px solid var(--studio-teal); outline-offset: 2px; background: #f2f5e9; }
.template-search-field input, #template-category { background: #fffdf8; border-color: #ccd8c9; border-radius: 8px; }
.workspace-top { background: #faf8f0; }
.workspace-hint { color: #5e7062; }
.canvas-area {
  background-color: #eeeee4;
  background-image: radial-gradient(#3c65531c .75px, transparent .75px);
  background-size: 16px 16px;
}
.canvas-mount { box-shadow: 0 1px 0 #315c4e20, 0 12px 32px #243c341f; }
.canvas-start-note { display: none; max-width: 172px; color: #48685b; font-size: 11px; line-height: 1.35; pointer-events: none; }
@supports selector(:has(*)) {
  .workspace:has(#canvas-mount svg):not(:has(#canvas-mount .design-element)) .canvas-start-note { display: inline-flex; align-items: center; gap: 7px; }
  .workspace:has(#canvas-mount svg):not(:has(#canvas-mount .design-element)) .workspace-hint { display: none; }
}
.canvas-start-note::before { content: ''; width: 9px; height: 12px; flex: 0 0 9px; border-radius: 3px; background: var(--studio-yellow); transform: rotate(-10deg); }
.editing-toolbar, .workspace-bottom { background: #fffdf8; }
.editing-toolbar button { border-radius: 7px; }
.editing-toolbar button[aria-pressed=true] { background: #e0edde; color: #245c4d; border-color: #90ad91; }
#draw-tool:not([aria-pressed=true]) { background: #fff3cf; border-color: #e2d5ab; }
.page-tab { border-radius: 7px; background: #f7f8ee; }
.page-tab[aria-current=true] { color: #245c4d; background: #e5efdf; border-color: #739578; }
.add-page { background: #f5f5df; border-color: #99ad90; border-radius: 8px; }
.inspector-heading h2 { color: #30675b; }
.inspector-heading h2::after { content: ''; display: block; width: 34px; height: 3px; margin-top: 9px; background: var(--studio-yellow); border-radius: 60% 30% 50% 40%; transform: rotate(-3deg); }
.empty-layers { background: #fff5d6; border-color: #ded1a4; border-radius: 9px 12px 14px 9px; color: #5c654f; font-size: 12px; }
.layer-row.selected { background: #e6efdf; border-color: #9bb693; }
.library-footer button { width: 32px; height: 32px; background: #f3edce; border-color: #dcd2a8; color: #536e52; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid var(--studio-teal); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .element-buttons button:hover:not(:disabled) { border-color: #8fa585; filter: none; transform: translateY(-2px); }
  .template-button:hover:not(:disabled) { background: #f2f5e9; filter: none; }
  .template-button:hover .template-preview svg { transform: rotate(0deg) translateY(-2px); }
}
@media (prefers-reduced-motion: no-preference) {
  .element-buttons button, .template-preview svg { transition: transform var(--studio-motion) ease-out; }
}
@media (prefers-reduced-motion: reduce) {
  .element-buttons button, .template-preview svg { transition: none; }
  .element-buttons button:hover:not(:disabled) { transform: none; }
  .template-button:hover .template-preview svg { transform: rotate(var(--template-tilt)); }
}
@media (max-width: 900px) and (min-width: 701px) {
  .canvas-start-note { max-width: 135px; }
  .workspace-top { padding-inline: 15px; }
}
@media (max-width: 700px) {
  .library { max-height: min(340px, 38dvh); padding: 10px 14px 14px; overscroll-behavior: contain; scrollbar-width: thin; }
  .toolbox-intro { display: none; }
  .library .sidebar-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); position: sticky; top: -10px; z-index: 3; padding-top: 6px; margin-bottom: 12px; background: #fffdf8; box-shadow: 0 4px 0 #fffdf8; }
  .sidebar-tabs button { min-height: 44px; font-size: 12px; }
  .element-buttons { gap: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .element-buttons button { min-height: 66px; padding: 8px 7px; }
  .element-buttons strong { font-size: 12px; }
  .tool-glyph { height: 21px; font-size: 26px; margin-bottom: 6px; }
  .rectangle-glyph { width: 25px; height: 19px; margin: 2px 0 6px; }
  .circle-glyph { width: 23px; height: 23px; margin: 0 0 6px; }
  .element-extras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
  .element-extras > button { min-width: 0; min-height: 44px; padding: 8px; }
  .frame-tool { grid-column: 1 / -1; grid-template-columns: minmax(74px, .8fr) minmax(0, 1fr) auto; align-items: center; gap: 7px; border-top: 0; padding: 0; margin: 0; }
  .frame-tool > span { grid-column: auto; font-size: 11px; }
  .frame-tool select { grid-column: auto; min-width: 0; width: 100%; min-height: 44px; padding: 6px; }
  .frame-tool button { min-height: 44px; padding: 7px; }
  #bulk-create { grid-column: 1 / -1; }
  .library-footer { padding-top: 12px; }
  .library-footer button { width: 44px; height: 44px; }
  .template-preview { height: 112px; padding: 9px; }
  .template-preview svg { height: 89px; }
  .template-button strong { font-size: 12px; }
  .template-button small { font-size: 11px; }
  .template-button { margin-inline: 0; padding: 4px; }
  .editing-toolbar { padding: 6px 10px; gap: 5px; }
  .editing-toolbar button { min-height: 44px; padding-inline: 6px; }
  .workspace-top { padding-inline: 14px; gap: 8px; }
  .workspace-top > div { flex: 1 1 auto; }
  .canvas-start-note { flex: 0 1 112px; font-size: 10px; }
}
@media print {
  .canvas-start-note, .toolbox-sketch { display: none !important; }
}