:root{font-family:Arial,Helvetica,sans-serif;color:#202b3b;background:#f5f7fa;font-size:14px;--blue:#2265e5;--line:#e5e9f0;--muted:#8390a1}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button,select,input,textarea{border:1px solid var(--line);border-radius:7px;background:#fff;color:inherit}button{padding:10px 14px;cursor:pointer;white-space:nowrap}button:hover{background:#f0f5ff;border-color:#c4d4f7}button:disabled{opacity:.4;cursor:default}.primary{background:var(--blue);border-color:var(--blue);color:white}.primary:hover{background:#1854c4;color:white}input,select,textarea{padding:9px 10px;max-width:100%}input:focus,textarea:focus,select:focus{outline:2px solid #a7c6ff;border-color:var(--blue)}button:focus-visible{outline:2px solid #2265e5;outline-offset:2px}input[type=checkbox]{accent-color:var(--blue)}header{height:72px;display:flex;align-items:center;gap:16px;padding:0 28px;border-bottom:1px solid var(--line);background:white}.brand{display:flex;gap:9px;align-items:center;font-weight:800;font-size:20px;color:#172b46;text-decoration:none}.brand-light{font-weight:400;color:#728398}.divider{height:22px;width:1px;background:var(--line);margin:0 3px}.spacer{flex:1}.muted{color:var(--muted);font-weight:400}.badge{font-size:10px;letter-spacing:1.1px;font-weight:700;background:#edf3ff;color:#5275ad;padding:6px 8px;border-radius:4px}.topbar{padding:22px 28px;display:flex;align-items:center;gap:18px}.eyebrow{font-size:10px;letter-spacing:1.6px;font-weight:700;color:#8491a3}h1{font-size:21px;margin:7px 0 0;font-weight:600}h1 .muted{padding:0 8px}h1 #sizeTitle{font-size:16px;font-weight:400;color:#63748b}label{display:flex;flex-direction:column;gap:7px;font-size:12px;color:#6b7789}.topbar label{min-width:150px}main{margin:0 20px 20px;display:grid;grid-template-columns:245px minmax(320px,1fr) 270px;height:calc(100vh - 192px);min-height:560px;background:white;border:1px solid var(--line);border-radius:12px;overflow:hidden}aside.layers,aside.properties{padding:20px 16px;overflow:auto}.layers{border-right:1px solid var(--line);display:flex;flex-direction:column}.properties{border-left:1px solid var(--line)}.panel-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}h2{font-size:15px;margin:0;font-weight:600}.pill{font-size:11px;padding:4px 7px;background:#edf2f9;border-radius:5px;color:#70809a}.add{width:100%;margin-bottom:24px}.subhead{font-size:10px;font-weight:bold;letter-spacing:1px;display:flex;justify-content:space-between;color:#7c899b;margin-bottom:12px}.subhead span{font-weight:400;letter-spacing:0;font-size:10px}.layer{display:flex;align-items:center;border:1px solid transparent;border-radius:7px;margin:5px 0;padding:5px;gap:8px}.layer.active{background:#edf4ff;border-color:#c8dcff;color:#195eca}.layer .select-layer{border:0;background:none;text-align:left;flex:1;padding:7px 0;overflow:hidden;text-overflow:ellipsis}.layer .symbol{font-size:15px;color:#748399;width:24px;text-align:center}.layer .delete{border:0;background:none;padding:5px;color:#9da8b9}.text-button{border:0;background:none;font-size:12px;color:#6f8099;padding:15px 0;text-align:left}.left-bottom{margin-top:auto;padding:24px 4px 0;color:#8a96a7;font-size:11px;line-height:1.65}.left-bottom b{font-size:12px;color:#63758c;font-weight:500}.key{display:inline-block;background:#f3f5f8;border:1px solid #e3e8f0;padding:0 4px;border-radius:3px;margin-right:4px}.workspace{display:flex;flex-direction:column;min-width:0;background:#eef1f6}.canvas-toolbar{display:flex;align-items:center;gap:9px;padding:10px 16px;border-bottom:1px solid var(--line);background:white}.canvas-toolbar button{padding:5px 8px;font-size:13px}.canvas-toolbar .inline{flex-direction:row;align-items:center;gap:3px;font-size:11px}.canvas-toolbar #zoomText{font-size:11px;min-width:34px;text-align:center}.source{padding:16px 22px;display:flex;align-items:center;gap:10px;color:#8794a5;font-size:11px}.source select{border:0;background:transparent;color:#5a6b81;font-size:12px;padding:6px;min-width:0;max-width:280px}#stage{position:relative;display:flex;align-items:center;justify-content:center;flex:1;min-height:0;overflow:auto;padding:36px;background-image:radial-gradient(#ccd4df .7px,transparent .7px);background-size:12px 12px}#boardWrap{position:relative;flex-shrink:0;margin:auto}#dimension{position:absolute;top:-23px;left:0;width:100%;text-align:center;font-size:10px;color:#8b99ac;letter-spacing:1px}#board{display:block;background:white;box-shadow:0 5px 20px #23344a17,0 1px 3px #23344a20;touch-action:none;user-select:none;border-radius:2px}#board .block{cursor:move}#board .handle{cursor:nwse-resize}footer{display:flex;gap:10px;padding:14px 18px;color:#8090a5;font-size:10px;border-top:1px solid #dfe5ee}.prop-heading{display:flex;align-items:center;gap:10px;background:#f5f8fc;padding:12px;border-radius:7px;margin-bottom:20px;font-weight:600}.prop-section{border-top:1px solid var(--line);padding-top:18px;margin-top:20px}.prop-section h3{font-size:11px;letter-spacing:.7px;text-transform:uppercase;margin:0 0 14px;color:#718198}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px 12px}.properties input,.properties select{width:100%;font-size:13px}.properties textarea{width:100%;min-height:75px;resize:vertical;font-size:13px}.properties .inline{flex-direction:row;align-items:center;margin:12px 0;font-size:12px}.properties input[type=checkbox]{width:auto}.buttons{display:flex;gap:6px;margin-top:12px}.buttons button{flex:1;padding:8px}.buttons .on{background:#eaf2ff;color:var(--blue);border-color:#bcd3fc}.hint{font-size:12px;color:#8b98aa;line-height:1.65}.small-icon{color:#9ba8b9}dialog{padding:0;border:1px solid #e1e7ef;border-radius:16px;width:860px;max-width:95vw;height:680px;max-height:90vh;box-shadow:0 25px 100px #10274433;color:#202b3b}dialog[open]{display:grid;grid-template-columns:1fr 280px}dialog::backdrop{background:#18293c66;backdrop-filter:blur(3px)}.modal-main{display:flex;flex-direction:column;padding:30px;min-height:0}.modal-heading h2{font-size:25px;margin-top:9px}.modal-heading p{color:#8b96a5;font-size:13px;margin-bottom:22px}#tabs{display:flex;border-bottom:1px solid var(--line);margin-bottom:18px;gap:6px}#tabs button{padding:11px 7px;border:0;border-bottom:2px solid transparent;border-radius:0;font-size:12px;background:none}#tabs button.active{border-color:var(--blue);color:var(--blue)}#search{width:100%;margin-bottom:12px;background:#f8faff}#catalog{overflow:auto;flex:1;min-height:0;margin-bottom:20px}.catalog-item{width:100%;display:flex;text-align:left;align-items:center;padding:12px 10px;border-radius:6px;border:1px solid transparent;border-bottom-color:#edf0f5;gap:13px;margin-bottom:3px;font-size:13px}.catalog-item.selected{background:#edf4ff;border-color:#d2e2ff}.catalog-item .ci-icon{font-size:17px;width:28px;color:#647c99;text-align:center}.catalog-item .tick{margin-left:auto;border:1px solid #d9e1ed;width:19px;height:19px;border-radius:5px;text-align:center;color:var(--blue)}.chosen{position:relative;padding:34px 24px;background:#f4f7fc;display:flex;flex-direction:column}.chosen h3{font-size:14px;margin:5px 0 24px}.close{position:absolute;top:9px;right:10px;border:0;background:none;padding:2px 7px;font-size:22px;color:#8d9aae}#chosen{overflow:auto}.chosen-item{display:flex;align-items:center;justify-content:space-between;font-size:12px;border:1px solid #dce5f2;background:white;border-radius:7px;padding:7px 10px;margin-bottom:8px}.chosen-item button{padding:2px 5px;border:0;color:#9aa6b6}.modal-note{color:#8a98ab;font-size:12px;line-height:1.7;margin-top:auto;padding-top:25px}.chosen .primary{font-size:12px}#toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,20px);background:#1d314f;color:white;padding:12px 22px;border-radius:9px;opacity:0;pointer-events:none;transition:.2s;font-size:13px}#toast.visible{opacity:1;transform:translate(-50%,0)}@media(max-width:1100px){main{grid-template-columns:205px minmax(280px,1fr) 235px;margin:0 10px 10px}.source>span:first-child{display:none}header{padding:0 18px}.canvas-toolbar{gap:4px;padding:10px}.topbar{padding:18px}.brand{font-size:17px}header>span:not(.badge):not(.spacer){display:none}}@media(max-width:760px){header{gap:8px;height:62px}.brand-light,header>.badge,header>span{display:none}header button{font-size:11px;padding:8px}h1{font-size:18px}.topbar{flex-wrap:wrap;gap:10px}.topbar>div{width:100%}.topbar>.spacer{display:none}.topbar label{min-width:110px;flex:1}main{height:auto;min-height:0;display:flex;flex-wrap:wrap}.layers{width:100%;max-height:210px;border-bottom:1px solid var(--line)}.layers .panel-title,.left-bottom,.subhead,.layers .text-button{display:none}.add{margin-bottom:6px}#layers{display:flex;overflow:auto;flex-shrink:0}.layer{min-width:130px}.layer .delete{display:none}.workspace{width:100%;height:440px}.properties{width:100%;border-left:0}.source{padding:10px}footer{font-size:9px}.canvas-toolbar .inline{font-size:10px}dialog[open]{grid-template-columns:1fr;height:90vh}.modal-main{padding:22px;height:56vh}.chosen{padding:16px 22px;min-height:0}.chosen h3{margin:0 0 10px}.modal-note{display:none}#chosen{display:flex;gap:5px;margin-bottom:8px}.chosen-item{flex-shrink:0}.chosen .close{top:8px}.modal-heading h2{font-size:21px}#tabs button{font-size:11px;padding:8px 5px}}
/* Roomier library and bounded physical-label preview. */
dialog{width:1080px;height:800px;max-width:calc(100vw - 56px);max-height:calc(100dvh - 64px)}dialog[open]{grid-template-columns:minmax(0,1fr) 310px}.modal-main{padding:32px}.modal-heading h2{font-size:27px}#catalog .catalog-item{min-height:55px;font-size:14px;padding:10px 12px;gap:16px}.catalog-item .ci-icon{width:38px;flex-shrink:0;display:flex;align-items:center;justify-content:center}.catalog-item .tick{flex-shrink:0}.layer .symbol{flex-shrink:0;display:flex;justify-content:center;align-items:center}.symbol-preview{display:flex;align-items:center;justify-content:center;padding:20px;background:#f8faff;border:1px solid var(--line);border-radius:8px}#board{border-radius:7px;overflow:hidden}.prop-heading .small-icon{display:flex}#tabs button{font-size:14px;padding:12px 10px}
@media(min-width:1600px){main{max-width:1560px;margin-left:auto;margin-right:auto}.topbar{max-width:1600px;margin-left:auto;margin-right:auto}}
@media(max-width:760px){dialog{max-width:calc(100vw - 20px);max-height:calc(100dvh - 24px)}dialog[open]{grid-template-columns:1fr}.modal-main{padding:20px;height:58dvh}.modal-heading h2{font-size:22px}#tabs button{font-size:11px;padding:10px 5px}.chosen{min-height:140px}#catalog .catalog-item{font-size:12px}}
/* Keep the label visible near the top, including tall desktop windows. */
main{width:calc(100% - 40px);max-width:1400px;margin-left:auto;margin-right:auto;height:clamp(480px,calc(100dvh - 192px),820px);min-height:0}
.topbar{max-width:1440px;margin-left:auto;margin-right:auto}
#stage{align-items:flex-start;padding-top:42px}
#boardWrap{margin:0 auto}
@media(max-width:1100px){main{width:calc(100% - 20px)}}
@media(max-width:760px){main{height:auto;min-height:0}#stage{padding-top:34px}}
/* Larger, immediately available controls; use the browser's available height. */
main{max-width:1640px;grid-template-columns:280px minmax(300px,1fr) 350px;height:calc(100dvh - 192px);min-height:560px}
.topbar{max-width:1680px}
aside.layers,aside.properties{padding:22px 20px;min-height:0}
.panel-title h2{font-size:17px}.panel-title{margin-bottom:20px}
.add{min-height:56px;font-size:16px;margin-bottom:24px;flex-shrink:0}
.layer{min-height:54px;margin:6px 0;padding:6px 8px;flex-shrink:0}.layer .select-layer{font-size:15px;padding:10px 0}.layer .delete{padding:8px;font-size:19px}.layer .symbol{width:28px}
#layers{flex-shrink:0}.subhead{font-size:11px}.subhead span{font-size:11px}
.prop-heading{font-size:15px;padding:13px;margin-bottom:16px}.properties label,.control-label{font-size:13px;color:#68788e}.control-label{display:block;line-height:1.3}
.properties textarea{min-height:58px;height:58px;font-size:14px}.prop-section{padding-top:16px;margin-top:17px}.prop-section h3{font-size:12px;margin-bottom:13px}.form-grid{gap:14px 12px}.properties .inline{font-size:13px}
.stepper{display:flex;align-items:stretch;border:1px solid #e0e7f1;background:#f3f6fb;border-radius:8px;min-width:0;height:44px;overflow:hidden}.stepper button{border:0;border-radius:0;flex:0 0 34px;padding:0;font-size:23px;color:#557aaa;background:transparent}.stepper input{min-width:0;padding:4px 0;width:100%;text-align:center;border:0;border-radius:0;background:transparent;font-size:15px;color:#243751;-moz-appearance:textfield;appearance:textfield}.stepper input::-webkit-inner-spin-button,.stepper input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.stepper button:hover{background:#e1ecff}.stepper:focus-within{outline:2px solid #adcaff}
.quick-controls{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:17px}.quick-controls .buttons,.text-alignment{margin-top:7px;gap:4px}.properties .buttons button{min-height:42px;font-size:14px;padding:7px;display:flex;align-items:center;justify-content:center}.quick-controls .buttons button{font-size:21px;min-width:0}.quick-controls [data-action="rotate-reset"]{font-size:14px}.text-alignment button{min-width:0}.properties .hint{font-size:12px}.left-bottom{font-size:12px}.left-bottom b{font-size:13px}
@media(min-width:1101px) and (max-width:1390px){main{grid-template-columns:250px minmax(300px,1fr) 330px}aside.layers,aside.properties{padding:20px 16px}}
@media(min-width:901px) and (max-width:1100px){main{grid-template-columns:215px minmax(260px,1fr) 310px}aside.layers,aside.properties{padding:18px 12px}.add{font-size:14px}.panel-title h2{font-size:15px}.source .badge{display:none}}
@media(max-width:900px){main{height:auto;min-height:0;display:flex;flex-wrap:wrap}.layers{width:100%;max-height:235px;border-bottom:1px solid var(--line)}.layers .panel-title,.left-bottom,.subhead,.layers .text-button{display:none}.add{margin-bottom:10px}#layers{display:flex;overflow:auto;flex-shrink:0}.layer{min-width:145px}.layer .delete{display:none}.workspace{width:100%;height:480px}.properties{width:100%;border-left:0}.source{padding:10px}.properties .form-grid,.quick-controls{max-width:600px}.stepper{height:48px}.properties .buttons button{min-height:46px}.properties textarea{height:64px}}
.formatbar{width:calc(100% - 40px);max-width:1640px;margin:0 auto 14px;display:flex;align-items:center;gap:16px;padding:14px 18px;background:#fff;border:1px solid var(--line);border-radius:10px;flex-wrap:wrap}.format-label{font-size:14px;font-weight:600}.format-presets{display:flex;gap:6px}.format-presets button{padding:10px 12px;font-size:13px}.format-presets .on{background:#edf4ff;color:#195eca;border-color:#b9d1ff}.formatbar form{display:flex;align-items:end;gap:9px;margin-left:auto}.formatbar label{font-size:11px;gap:5px}.formatbar input{width:88px;height:38px;font-size:14px}.formatbar form button{height:38px;padding:8px 12px}.format-hint{font-size:11px;color:#8491a3}.topbar{padding-top:18px;padding-bottom:18px}
@media(max-width:1300px){.format-hint{display:none}.formatbar{gap:12px}.format-label{display:none}}
@media(max-width:1100px){.formatbar{width:calc(100% - 20px)}.format-presets button{padding:9px 8px}}
@media(max-width:760px){.formatbar{gap:12px;padding:12px}.format-presets{width:100%;justify-content:space-between}.formatbar form{margin-left:0;width:100%;gap:6px;justify-content:space-between}.formatbar input{width:76px}.formatbar form button{padding:8px}.format-presets button{font-size:12px}.topbar label{min-width:125px}}
/* Compact document toolbar and category-based template library. */
header{height:62px}header .badge{font-size:10px}header #saved{font-size:12px}.compact-top{padding:16px 20px;gap:12px;max-width:1680px}.template-trigger{display:flex;gap:13px;align-items:center;text-align:left;padding:10px 14px;min-width:310px;max-width:60%;background:#fff}.template-trigger strong{display:block;font-size:15px;font-weight:600}.template-trigger small{display:block;font-size:12px;color:#8290a3;margin-top:5px}.template-icon{font-size:23px;color:#4872b2}.template-trigger>span:nth-child(2){flex:1;white-space:normal}.compact-top #formatSettings{padding:12px 16px;font-size:14px}.compact-top #fullscreen{height:42px}.source>span:first-child{font-size:12px}.source [hidden]{display:none}#formatDialog{width:440px;height:auto;max-height:90dvh;padding:26px;overflow:auto}#formatDialog[open]{display:block}#formatDialog h2{font-size:20px;margin-bottom:22px}#formatDialog .formatbar{border:0;margin:0;padding:0;width:100%;display:grid;grid-template-columns:1fr 1fr;gap:20px}#formatDialog .formatbar label{font-size:13px;display:flex}#formatDialog select{width:100%;font-size:14px}#formatDialog .formatbar form{grid-column:1/-1;margin:0;flex-wrap:wrap;gap:10px}#formatDialog input{width:108px}#formatDialog .hint{grid-column:1/-1;margin:0}#formatDialog #applySize{width:100%;margin-top:7px;background:var(--blue);color:white}#templateDialog{width:1160px;height:820px;padding:0;max-height:calc(100dvh - 48px)}#templateDialog[open]{display:flex;flex-direction:column}.template-dialog-head{display:flex;align-items:center;justify-content:space-between;padding:24px 28px;border-bottom:1px solid var(--line)}.template-dialog-head h2{font-size:23px}.template-dialog-head p{font-size:13px;color:#8190a4;margin:8px 0 0}.template-dialog-head button{font-size:23px;padding:5px 12px;border:0}.template-library{display:grid;grid-template-columns:235px minmax(0,1fr);flex:1;min-height:0}.template-library>aside{padding:20px 14px;background:#f7f9fc;border-right:1px solid var(--line);overflow:auto}.template-library input{width:100%;font-size:13px;margin-bottom:12px}.template-library>section{padding:20px 24px;overflow:auto}#templateCategories button{width:100%;white-space:normal;text-align:left;border:0;background:none;padding:12px;margin:2px 0;font-size:14px}#templateCategories button[aria-pressed=true]{background:#e8f0ff;color:#1d5cc6}.template-library-toolbar{display:flex;align-items:center;gap:15px;justify-content:space-between;margin-bottom:20px}.template-library-toolbar h3{font-size:17px;margin:0}.template-library-toolbar select{font-size:13px;max-width:230px}#templateCards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.template-card{display:flex;flex-direction:column;white-space:normal;text-align:left;min-width:0;padding:12px;background:#fff;border:1px solid #dfe6f0;border-radius:10px}.template-card:hover{border-color:#5590ed;background:#f7faff}.template-thumb{background:#eef1f6;border-radius:6px;display:flex;align-items:center;justify-content:center;padding:18px;width:100%;aspect-ratio:1.7;margin-bottom:14px;overflow:hidden}.template-thumb>svg{width:100%;height:100%;max-width:270px;max-height:170px;box-shadow:0 2px 8px #00000012;background:white;border-radius:3px}.template-card strong{font-size:14px;font-weight:600}.template-card>span{font-size:12px;color:#8290a4;margin-top:6px}.template-dialog-foot{padding:16px 28px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:15px;font-size:12px;color:#7f8fa5}.unavailable{opacity:.5}.compact-top~main{min-height:480px}
@media(max-width:1100px){.source>span:first-child{display:inline}.template-trigger{min-width:260px}}
@media(max-width:760px){header{padding:0 12px}header #saved,header>.badge{display:none}.compact-top{padding:12px 10px;flex-wrap:nowrap;gap:7px}.compact-top>.spacer{display:none}.template-trigger{min-width:0;max-width:none;flex:1;padding:10px;gap:8px}.template-trigger strong{font-size:13px}.template-trigger small{font-size:10px}.template-icon{display:none}.compact-top #formatSettings{padding:10px;font-size:12px}.compact-top #fullscreen{display:none}#templateDialog{max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px)}.template-dialog-head{padding:18px}.template-dialog-head h2{font-size:20px}.template-library{display:flex;flex-direction:column}.template-library>aside{padding:12px;border-right:0;max-height:145px;flex-shrink:0}#templateCategories{display:flex;overflow:auto}#templateCategories button{width:auto;white-space:nowrap;margin-right:5px;padding:9px}.template-library input{margin-bottom:5px}.template-library>section{padding:14px}.template-library-toolbar{flex-wrap:wrap;gap:10px}.template-library-toolbar h3{font-size:15px}#templateCards{gap:10px}.template-card{padding:8px}.template-thumb{padding:8px;margin-bottom:10px}.template-card strong{font-size:12px}.template-card>span{font-size:10px}.template-dialog-foot{padding:12px;font-size:11px}.template-dialog-foot>span:last-child{display:none}.source{gap:5px}.source>span:first-child{font-size:11px}#formatDialog input{width:100px}}
/* Visible paper and size settings; connected hover for layers and canvas. */
.paper-size-panel{display:flex;align-items:end;gap:18px;padding:12px 16px;background:white;border:1px solid var(--line);border-radius:10px}.setting-label{display:block;font-size:14px;font-weight:500;color:#52647d;margin-bottom:8px}.paper-segments{display:flex;background:#f1f5fb;border:1px solid #e0e7f1;border-radius:8px;padding:3px;gap:3px;height:46px}.paper-segments button{border:0;background:none;font-size:15px;padding:7px 14px;color:#667890}.paper-segments [aria-pressed=true]{background:#2265e5;color:white;box-shadow:0 1px 3px #1750a923}.size-control{gap:0;min-width:176px}.size-control select{height:46px;font-size:16px;padding:10px 13px;background:#f6f8fc;border-color:#e0e7f1}.compact-top .paper-size-panel #formatSettings{height:46px;width:42px;padding:8px;font-size:20px;background:#f6f8fc}.compact-top #fullscreen{height:46px;width:46px;font-size:22px}.compact-top .paper-size-panel [hidden]{display:none}
#layers .layer{border:1px solid #e1e7f0;background:#fbfcfe;border-radius:9px;margin:8px 0;min-height:56px;transition:background .14s,border-color .14s,box-shadow .14s}#layers .layer:hover,#layers .layer.hovered{border-color:#a6c7f9;background:#edf5ff;box-shadow:0 0 0 1px #dbeaff}#layers .layer.active{background:#eaf2ff;border-color:#e1e7f0;box-shadow:none;color:#1757b9}#layers .layer.active:hover,#layers .layer.active.hovered{background:#dfecff;border-color:#e1e7f0;box-shadow:none}#board .block.hovered .block-outline{stroke:#4488ed;fill:#4488ed0c;stroke-dasharray:3 2;vector-effect:non-scaling-stroke}#formatDialog .formatbar>label{grid-column:1/-1}
@media(max-width:1100px){.paper-size-panel{gap:12px;padding:10px 12px}.paper-segments button{padding:7px 10px}.template-trigger{min-width:230px}.compact-top{gap:10px}}
@media(max-width:900px){.compact-top{flex-wrap:wrap}.compact-top .template-trigger{max-width:none;flex:1}.compact-top>.spacer{display:none}.paper-size-panel{order:3;width:100%;justify-content:space-between}.compact-top #fullscreen{display:block}.paper-control{flex:1}.paper-segments button:first-child{flex:1}.size-control{flex:1}}
@media(max-width:480px){.paper-size-panel{gap:8px;padding:10px}.setting-label{font-size:12px;margin-bottom:7px}.paper-segments button{padding:7px;font-size:13px}.paper-segments,.size-control select{height:44px}.size-control{min-width:0}.size-control select{font-size:14px;width:100%;padding:8px}.paper-control{flex:1.2;min-width:0}.compact-top .paper-size-panel #formatSettings{width:34px;height:44px;font-size:18px;flex-shrink:0}#layers .layer{margin:4px;min-height:56px}}
#board .block.hovered .block-outline{stroke-width:1.5px}
@media(max-width:480px){.canvas-toolbar{gap:4px;padding:8px}.canvas-toolbar button{padding:5px 6px}.canvas-toolbar .inline{font-size:10px;gap:0}.canvas-toolbar .divider{margin:0}}
.inline-text-editor{position:absolute;z-index:10;display:block;resize:none;margin:0;padding:0 2px;border:1.5px solid #2265e5;border-radius:3px;background:#fff;box-shadow:0 0 0 3px #2265e51a;color:#111;font-family:Arial,Helvetica,sans-serif;line-height:1.15;overflow:auto;min-width:0;max-width:none;outline:none}.inline-text-editor:focus{outline:none;border-color:#2265e5}
.library-format-controls{display:flex;align-items:end;gap:24px;padding:16px 28px;border-bottom:1px solid var(--line);background:#fafbfd}.library-format-controls label{font-size:13px;min-width:180px}.library-format-controls select{font-size:15px;min-height:42px}.orientation-toggle{display:flex;gap:5px;margin-top:7px}.orientation-toggle button{font-size:14px;min-height:42px;padding:8px 13px}.orientation-toggle [aria-pressed=true]{background:#eaf2ff;border-color:#aac8f6;color:#1c5ecb}.library-notice{font-size:14px;line-height:1.6;color:#6c7c91;background:#f4f7fc;border:1px solid var(--line);border-radius:8px;padding:18px}.library-notice[hidden]{display:none}.portrait-templates .template-thumb{aspect-ratio:1.2;min-height:220px}.portrait-templates .template-thumb>svg{max-height:230px}.compact-top .paper-size-panel #canvasOrientation{height:46px;min-width:38px;padding:8px;font-size:20px;background:#f6f8fc}
@media(max-width:760px){.library-format-controls{padding:12px 14px;gap:12px;flex-wrap:wrap}.library-format-controls label{min-width:0;flex:1}.library-format-controls .control-label{font-size:12px}.orientation-toggle button{font-size:12px;padding:7px;min-height:38px}.library-format-controls select{font-size:13px;min-height:38px}.portrait-templates .template-thumb{min-height:140px}.portrait-templates .template-thumb>svg{max-height:160px}.template-dialog-head p{font-size:11px}.compact-top .paper-size-panel #canvasOrientation{width:30px;min-width:30px;padding:5px;font-size:18px}}
@media(max-width:480px){.paper-size-panel{flex-wrap:wrap}.size-control{flex:1;min-width:110px}.paper-control{flex:1.3}.paper-size-panel #canvasOrientation{align-self:end}.compact-top .paper-size-panel #formatSettings{align-self:end}.library-format-controls{gap:10px}.library-format-controls>div{width:100%}.orientation-toggle button{flex:1}.portrait-templates .template-thumb{min-height:150px}}

.code-control{gap:0;min-width:156px}.code-control select{height:46px;font-size:16px;background:#f6f8fc}.code-error{color:#b52d35;font-size:13px;line-height:1.5}.paper-size-panel{flex-wrap:wrap}.compact-top .paper-size-panel{min-width:0}.code-control{flex:1}@media(max-width:1200px){.compact-top{flex-wrap:wrap}.compact-top .paper-size-panel{order:3;width:100%}.compact-top>.spacer{display:none}.compact-top .template-trigger{flex:1}}@media(max-width:480px){.code-control{flex:1 1 100%;min-width:0}.code-control select{width:100%;height:44px;font-size:14px}}

@media(max-width:600px){.compact-top .paper-size-panel{display:grid;grid-template-columns:minmax(0,1fr) 34px 34px;gap:12px 8px}.compact-top .paper-size-panel .code-control,.compact-top .paper-size-panel .paper-control{grid-column:1/-1;width:100%;min-width:0}.compact-top .paper-size-panel .size-control{grid-column:1;min-width:0}.compact-top .paper-size-panel select{width:100%}.compact-top .paper-size-panel .setting-label{white-space:normal}}

.library-format-controls{flex-wrap:wrap;gap:14px}.library-format-controls label{min-width:145px;flex:1}.compact-top .paper-size-panel{gap:12px}.compact-top .code-control{min-width:156px;flex:1}@media(min-width:1201px){.compact-top .template-trigger{min-width:205px;max-width:230px}.compact-top{gap:12px}.compact-top .paper-size-panel{flex:1}.compact-top>.spacer{display:none}}

.download-menu{position:relative}.download-menu summary{list-style:none;cursor:pointer;padding:11px 15px;border-radius:7px;white-space:nowrap}.download-menu summary::-webkit-details-marker{display:none}.download-options{position:absolute;z-index:20;right:0;top:45px;min-width:235px;padding:8px;display:grid;gap:5px;background:white;border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 30px #20304022}.download-options button{text-align:left}#a4Capacity{display:block;color:#2265e5;font-size:12px;margin-top:7px;line-height:1.4}#a4Capacity[hidden],#previewA4[hidden]{display:none}#sheetDialog[open]{display:flex;flex-direction:column;width:850px;height:92vh;max-height:1000px}.sheet-heading{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;border-bottom:1px solid var(--line)}.sheet-heading h2{font-size:20px}.sheet-heading p{margin:8px 0 0;font-size:13px;color:#6b7789}.sheet-heading button{font-size:23px;border:0}#sheetPreview{flex:1;overflow:auto;min-height:0;padding:24px;background:#e9edf3;text-align:center}#sheetPreview>svg{display:block;background:white;width:auto;max-width:100%;height:100%;min-height:300px;margin:0 auto;box-shadow:0 2px 12px #26384922}.sheet-actions{padding:16px 24px;display:flex;gap:10px;align-items:center;border-top:1px solid var(--line)}.sheet-actions span{font-size:12px;color:#718198;flex:1}@media(max-width:600px){header{padding:0 10px;flex-wrap:wrap;height:auto;min-height:62px;gap:7px}header .brand{font-size:14px}header #saved{display:none}.download-menu summary{font-size:12px;padding:9px}.sheet-heading,.sheet-actions{padding:12px}.sheet-actions{flex-wrap:wrap}.sheet-actions span{flex:1 1 100%}.canvas-toolbar{flex-wrap:wrap}}

/* An identifiable, borderless entry to the editable template library. */
.compact-top .template-trigger{border:0;background:#e4edfc;color:#204f9a;border-radius:12px;min-height:100px;padding:18px;box-shadow:none;transition:background .15s}.compact-top .template-trigger:hover{background:#d7e5fb;border:0;box-shadow:none}.template-trigger strong{font-size:17px;line-height:1.3}.template-trigger small{color:#59759f;line-height:1.45;font-size:12px}.template-trigger .template-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0}.compact-top .template-trigger:focus-visible{outline:2px solid #2265e5;outline-offset:3px}
@media(min-width:1201px){.compact-top{--template-field-width:clamp(200px,16vw,260px);align-items:stretch}.compact-top .template-trigger{width:var(--template-field-width);min-width:var(--template-field-width);max-width:var(--template-field-width);flex:0 0 var(--template-field-width)}.compact-top .paper-size-panel>.code-control:first-child{width:var(--template-field-width);min-width:var(--template-field-width);flex:0 0 var(--template-field-width)}.compact-top #fullscreen{align-self:center}}
@media(max-width:1200px){.compact-top .template-trigger{min-height:90px;max-width:none}}@media(max-width:600px){.compact-top .template-trigger{min-height:86px;padding:14px}.template-trigger strong{font-size:16px}.template-trigger small{font-size:12px}.template-trigger .template-icon{display:flex}}

/* Consistent, non-shrinking interface icons. */
.ui-icon{display:inline-block;width:20px;height:20px;min-width:20px;min-height:20px;flex:0 0 20px;vertical-align:middle;pointer-events:none}
button:has(>.ui-icon),summary:has(>.ui-icon){display:inline-flex;align-items:center;justify-content:center;gap:7px;line-height:1.2}
.compact-top #chooseTemplate{display:flex;align-items:center;gap:12px}.template-trigger>.template-icon{width:36px;height:36px;min-width:36px;flex:0 0 36px;color:#3972c8}.template-trigger .template-icon svg{display:block;width:32px;height:32px;min-width:32px;flex:0 0 32px}.template-trigger>span:last-child{display:flex;align-items:center;justify-content:center;width:20px;min-width:20px;flex:0 0 20px}.template-trigger>span:nth-child(2){min-width:0}
select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236a7d98' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right 10px center!important;background-size:20px 20px!important;padding-right:38px!important}
.stepper button:has(.ui-icon){padding:0}.stepper button .ui-icon{width:18px;height:18px;min-width:18px;min-height:18px;flex-basis:18px}.download-menu summary{display:flex;align-items:center;justify-content:center}.canvas-toolbar button:has(.ui-icon){min-width:30px;min-height:30px}

.layers #empty{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:48px;flex-shrink:0;padding:12px 14px;margin:0 0 12px;border:0;border-radius:9px;background:#edf3fc;color:#365d91;font-size:13px;line-height:1.4;text-align:center;white-space:normal}.layers #empty span{min-width:0}.layers #empty:hover{background:#e0ebfb}:root[data-theme=dark] .layers #empty{background:#243c59;color:#c6dfff}:root[data-theme=dark] .layers #empty:hover{background:#2d4b70}@media(max-width:900px){.layers #empty{min-height:44px;margin-bottom:8px;padding:10px 12px}}

.alignment-inset{display:block;font-size:11px;font-weight:400;margin-top:4px;color:inherit;opacity:.85}

/* Inline text shares SVG metrics: no border/padding stealing text width. */
.inline-text-editor{box-sizing:border-box;padding:0;border:0;border-radius:0;outline:1.5px solid #2265e5;white-space:pre;overflow:hidden;word-break:normal;overflow-wrap:normal;min-height:0;background:#fff;letter-spacing:normal}.inline-text-editor:focus{outline:1.5px solid #2265e5}.inline-text-prefix{position:absolute;z-index:11;pointer-events:none;color:#111;font-family:Arial,sans-serif;white-space:pre}

/* The format popover sizes to its controls, not the library dialog height. */
#formatDialog,#formatDialog[open]{height:fit-content;min-height:0;max-height:calc(100dvh - 32px);margin:auto;overflow:auto}
#formatDialog h2{margin:0 36px 22px 0}
#formatDialog #canvasSizeForm{display:grid;grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr);align-items:end;width:100%}
#formatDialog #canvasSizeForm input{width:100%;min-width:0}
#formatDialog #applySize{grid-column:1/-1}
@media(max-width:480px){#formatDialog{padding:22px;max-width:calc(100vw - 24px)}}

.chosen-symbol{display:inline-flex;align-items:center;justify-content:center;flex:0 0 28px;margin-right:8px}.ci-icon>svg,.chosen-symbol>svg{display:block;flex-shrink:0}

.content-field-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}.content-field-actions{display:flex;align-items:center;gap:5px}.content-field-actions button{padding:5px 8px;font-size:12px;min-height:30px}.content-field-actions button span{font-size:17px;line-height:1;vertical-align:-1px}.content-field textarea{display:block;width:100%;min-height:76px;resize:vertical}.content-field-heading label{font-size:12px}

/* Content actions live inside the field, matching the main generator. */
.content-field>label{margin-bottom:8px}.content-input-wrap{position:relative}.content-input-wrap textarea{padding:12px 76px 12px 12px;min-height:86px}.content-input-wrap .content-field-actions{position:absolute;right:8px;top:9px;gap:2px}.content-input-wrap .content-field-actions button{display:flex;align-items:center;justify-content:center;width:30px;height:30px;min-height:30px;padding:5px;border:0;background:transparent;color:#77879e;border-radius:5px}.content-input-wrap .content-field-actions button:hover{background:#edf3fc;color:#2265e5}.content-field-actions svg{display:block;width:20px;height:20px;flex-shrink:0}:root[data-theme=dark] .content-input-wrap .content-field-actions button{color:#afc0d7}:root[data-theme=dark] .content-input-wrap .content-field-actions button:hover{background:#29415e;color:#e8f0fb}

.content-input-wrap textarea{height:60px;min-height:60px;padding-top:10px;padding-bottom:10px}.content-input-wrap #clearContent[hidden]{display:none}.content-input-wrap #pasteContent{visibility:hidden;opacity:0;pointer-events:none}.content-input-wrap:hover #pasteContent,.content-input-wrap:focus-within #pasteContent{visibility:visible;opacity:1;pointer-events:auto}.content-input-wrap .content-field-actions{top:7px}