/* Z Natmasters Quick Sketch: scoped editor UI. Document export and browser recovery are supported. */
.znmqs {
  --qs-navy:var(--znm-ui-color-navy,#17263a);
  --qs-gold:var(--znm-ui-highlight-gold,#e8c77d);
  --qs-edge:var(--znm-ui-color-border,#d9e1e8);
  --qs-ink:var(--znm-ui-color-text,#16293d);
  --qs-gutter:clamp(16px,2.4vw,34px);
  box-sizing:border-box;
  width:min(1800px,calc(100vw - 2 * var(--qs-gutter)));
  max-width:none;
  position:relative;left:50%;transform:translateX(-50%);
  margin:0;
  font:400 15px/1.45 var(--znm-ui-font-family,system-ui,-apple-system,"Segoe UI",sans-serif);
  color:var(--qs-ink);
}
.znmqs *, .znmqs *::before,.znmqs *::after{box-sizing:border-box}
.znmqs button,.znmqs input{font:inherit}
.znmqs button{cursor:pointer}
.znmqs button:disabled{opacity:1;cursor:not-allowed;box-shadow:none;text-shadow:none}
.znmqs button:focus-visible,.znmqs input:focus-visible,.znmqs__svg:focus-visible{outline:3px solid #ae8e30;outline-offset:2px}
.znmqs [hidden]{display:none}
.znmqs__workspace{position:relative;min-width:0}
.znmqs__stage{display:grid;grid-template-rows:auto minmax(0,1fr) auto;border:1px solid var(--qs-edge);border-radius:8px;overflow:hidden;background:#fff;min-width:0}
.znmqs__stage-head{position:relative;z-index:5;min-height:56px;display:flex;justify-content:flex-start;align-items:center;padding:5px 10px;background:#f4f7fa;border-bottom:1px solid var(--qs-edge);column-gap:10px;row-gap:3px;flex-wrap:wrap}
.znmqs__stage-info{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:0;flex:0 0 auto;margin-left:auto}
.znmqs__stage-info strong{font-size:14px}.znmqs__stage-info span{font-size:12px;color:#62788d}
.znmqs__board{position:relative;height:clamp(450px,67vh,810px);min-width:0;background:#fbfdff}
.znmqs__svg{display:block;width:100%;height:100%;touch-action:none;user-select:none;cursor:crosshair}
.znmqs__svg.is-edit{cursor:default}.znmqs__svg.is-move{cursor:move}
.znmqs__svg .qs-hit{stroke:transparent;stroke-width:22;cursor:pointer}
.znmqs__svg .qs-node-hit{fill:transparent;cursor:grab}
.znmqs__length-dialog,.znmqs__connect-dialog{position:absolute;z-index:7;left:50%;bottom:20px;transform:translateX(-50%);display:grid;gap:9px;width:min(360px,calc(100% - 20px));padding:15px;background:#fff;border:1px solid #c9af63;border-radius:8px;box-shadow:0 16px 35px #14263a42}
.znmqs__connect-dialog strong{font-weight:750;font-size:15px;color:var(--qs-ink)}
.znmqs__connect-dialog p{margin:0;font-size:13px;color:#60738a}
.znmqs__length-dialog label{font-weight:750;font-size:14px;color:var(--qs-ink)}
.znmqs__length-dialog input{height:45px;width:100%;min-width:0;border:1px solid #a2b2c3;border-radius:5px;padding:8px 12px;font-size:20px;font-variant-numeric:tabular-nums;background:#fff;color:#14263a}
.znmqs__length-dialog p{margin:0;font-size:12px;color:#60738a}
.znmqs__form-actions{display:flex;gap:8px;flex-wrap:wrap}
/* Dialog actions have a single explicit appearance in every interaction state.
 * The selector is limited to this shortcode's section so theme button states cannot recolor it. */
section.znmqs button.znmqs__button{
  appearance:none;min-height:42px;border-radius:5px;border:1px solid #a8b9c8;
  padding:8px 14px;background:#f5f8fb;color:#1b3854;font-weight:700;
  box-shadow:none;text-shadow:none;
}
section.znmqs button.znmqs__button:is(:hover,:focus,:active){
  background:#e8eef5;border-color:#90a9bf;color:#18314c;box-shadow:none;
}
section.znmqs button.znmqs__button--accent{
  background:var(--qs-gold);border-color:#c5a14a;color:#17273d;
}
section.znmqs button.znmqs__button--accent:is(:hover,:focus,:active){
  background:#f3daa0;border-color:#b48d31;color:#17273d;box-shadow:none;
}
/* Disabled is a legible state, not opacity applied to the entire button. */
section.znmqs button.znmqs__button:disabled,
section.znmqs button.znmqs__button--accent:disabled,
section.znmqs button.znmqs__button:disabled:is(:hover,:focus,:active){
  opacity:1;background:#e9eef2;border-color:#becbd5;color:#4d6074;
  box-shadow:none;text-shadow:none;cursor:not-allowed;
}
.znmqs__hint{position:absolute;left:14px;top:12px;font-size:13px;color:#62758b;pointer-events:none;background:#ffffffc9;padding:5px 8px;border-radius:4px;max-width:calc(100% - 28px)}
.znmqs__stage-foot{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;min-width:0;width:100%;min-height:60px;padding:8px 12px;border-top:1px solid var(--qs-edge);font-size:12px;color:#546e86}
.znmqs__stage-foot [data-snap-label]{color:#967324;font-weight:700}
.znmqs__tools{display:flex;align-items:center;gap:6px;min-width:0}
.znmqs__tool{width:48px;min-height:48px;display:grid;place-items:center;padding:9px;border:1px solid #b5c5d4;border-radius:7px;background:#e9f0f7;color:#173f61}
.znmqs__tool svg{width:27px;height:27px;stroke:currentColor;stroke-width:2.05;fill:none;stroke-linejoin:round;stroke-linecap:round}
.znmqs__tool:hover{background:#dce8f3;border-color:#7294b4}
.znmqs__tool.is-active{background:#f5d789;border:2px solid #bb8617;color:#172b40;box-shadow:0 2px 0 #bb861735}
.znmqs__mark-tool{position:relative;flex:0 0 auto}
@media(max-width:560px){
  .znmqs{--qs-gutter:16px}
  .znmqs__board{height:clamp(360px,61vh,600px)}
  .znmqs__stage-head{padding:5px 8px;gap:2px}
  .znmqs__tools{gap:3px}
  .znmqs__stage-info{width:100%;justify-content:space-between;padding:0 4px 3px}
  .znmqs__tool{width:42px;min-height:42px;padding:7px}.znmqs__tool svg{width:25px;height:25px}
  .znmqs__length-dialog,.znmqs__connect-dialog{padding:12px;bottom:12px}
  .znmqs__stage-foot{font-size:11px}
  .znmqs__hint{font-size:11px}
}

/* One generic point-mark tool with a dozen vector symbols; no linked products or semantics. */
.znmqs__mark-palette{position:absolute;z-index:9;left:0;top:calc(100% + 7px);width:170px;display:grid;gap:4px;padding:8px;border:1px solid var(--qs-edge);border-radius:7px;background:#fff;box-shadow:0 8px 24px #1323382e}
.znmqs__mark-choice{display:flex;align-items:center;gap:9px;min-height:42px;padding:7px 9px;border:1px solid transparent;border-radius:4px;background:#fff;text-align:left;color:var(--qs-ink)}
.znmqs__mark-choice svg{width:23px;height:23px;stroke:currentColor;stroke-width:2;fill:none}
.znmqs__mark-choice:hover,.znmqs__mark-choice.is-active{background:#f9e7b7;border-color:#c5a34a}
.znmqs__svg .qs-mark-hit{fill:transparent;cursor:grab}

/* Move remains a dedicated drawing mode. Selection actions are contextual, in the footer. */
/* A fixed-height control strip prevents mode changes from resizing the canvas.
 * Long context/fill groups scroll locally; global actions remain accessible. */
.znmqs__footer-info{display:flex;flex:0 1 210px;flex-direction:column;align-items:flex-start;justify-content:center;gap:0;min-width:0;height:40px;overflow:hidden}
.znmqs__footer-info [data-status],.znmqs__footer-info [data-snap-label]{display:block;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.znmqs__footer-actions{display:flex;align-items:center;justify-content:flex-end;flex-wrap:nowrap;gap:5px;flex:1 1 0;min-width:0;max-width:100%;overflow:hidden;height:40px}
.znmqs__context-actions,.znmqs__footer-global{display:flex;flex-wrap:nowrap;align-items:center;gap:4px}
.znmqs__footer-global{flex:0 0 auto;margin-left:auto}
.znmqs__context-actions{flex:0 1 auto;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:#adbccc transparent}
.znmqs__context-actions{padding:1px 5px;border:1px solid #d8e2ea;border-radius:8px;background:#f8fafc}
.znmqs__context-actions .znmqs__footer-button{background:#f4f7fb;border:1px solid #d3dfe9;color:#47647f}
.znmqs__context-actions .znmqs__footer-button[aria-pressed="true"]{background:#f9e7b7;border-color:#b78b24;color:#14263a}
.znmqs__footer-button{flex:0 0 auto;display:grid;place-items:center;min-height:36px;width:36px;padding:7px;border:1px solid transparent;border-radius:5px;background:transparent;color:#284d6f}
.znmqs__footer-button svg{width:21px;height:21px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.znmqs__footer-button:hover,.znmqs__footer-button.is-active{background:#e9f0f8;border-color:#8daac3;color:#1d496d}
.znmqs__footer-button.is-mixed{background:#eef4fa;border-color:#a3b9ce;color:#284d6f}
.znmqs__footer-button--danger:hover{color:#a82d34;background:#fceced;border-color:#cf777e}
@media(max-width:560px){
  .znmqs__stage-foot{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:30px 40px;min-height:88px;padding:8px;gap:2px}
  .znmqs__footer-info{height:30px;max-width:none;width:100%;font-size:11px}
  .znmqs__footer-actions{width:100%;height:40px;justify-content:flex-start;gap:4px}
  .znmqs__context-actions,.znmqs__footer-global{gap:2px}
  .znmqs__footer-button{width:34px;min-height:34px;padding:6px}
  .znmqs__context-actions{padding:1px 3px}
}
.znmqs__placement-dialog{
  position:absolute;z-index:10;left:50%;bottom:16px;transform:translateX(-50%);
  display:grid;gap:9px;width:min(360px,calc(100% - 20px));
  padding:14px;background:#fff;border:1px solid #c9af63;border-radius:7px;
  box-shadow:0 16px 35px #14263a42;
}
.znmqs__placement-dialog strong{font-size:16px}
.znmqs__placement-dialog p{margin:0;color:#526b83;font-size:12px}
.znmqs__placement-dialog label{font-weight:700;font-size:13px}
.znmqs__placement-dialog input{height:43px;width:100%;min-width:0;padding:7px 10px;border:1px solid #a2b2c3;border-radius:4px;background:#fff;color:#14263a}
.znmqs__offset-caption{font-size:13px;font-weight:700;color:#18314c}
.znmqs__offset-directions{display:grid;grid-template-columns:repeat(3,48px);gap:5px;justify-content:center}
.znmqs__offset-directions button{display:grid;place-items:center;width:48px;min-height:43px;border:1px solid #bccbd7;border-radius:5px;background:#f5f8fb;font-size:24px;line-height:1;color:#254b70}
.znmqs__offset-directions button:hover,.znmqs__offset-directions button[aria-pressed="true"]{background:#f9e7b7;border-color:#b78b24;color:#14263a}
.znmqs__offset-directions button[data-offset-dir="center"]{font-size:20px;color:#6a7d8d}
.znmqs__offset-entry{display:grid;gap:7px;padding-top:7px;border-top:1px solid #e3e8ef}
.znmqs__offset-entry-row{display:flex;gap:8px;align-items:center}
.znmqs__offset-entry-row input{flex:1 1 90px;width:40%;min-width:0}
@media(max-width:560px){
  .znmqs__placement-dialog{padding:10px;bottom:10px}
  .znmqs__placement-dialog .znmqs__button{font-size:12px;padding:7px 9px}
}

/* Contextual alignment: independent geometry, available only in Move mode. */
.znmqs__align-dialog{position:absolute;z-index:11;top:12px;right:12px;display:grid;gap:12px;width:min(365px,calc(100% - 24px));max-height:calc(100% - 24px);overflow:auto;padding:15px;border:1px solid var(--qs-edge);border-radius:7px;background:#fff;box-shadow:0 14px 35px #14263a35;color:var(--qs-ink)}
.znmqs__align-heading{display:flex;justify-content:space-between;align-items:center;gap:8px}
.znmqs__align-heading strong{font-size:15px}.znmqs__align-heading button{width:36px;height:36px;font-size:26px;line-height:1;background:#f4f7fa;border:1px solid var(--qs-edge);border-radius:5px}
.znmqs__align-ref,.znmqs__align-block{display:grid;gap:7px}
.znmqs__align-ref label,.znmqs__align-block>span{font-weight:700;font-size:13px}
.znmqs__align-ref select{width:100%;min-width:0;height:40px;padding:6px 9px;background:#fff;border:1px solid #a9b9c9;border-radius:5px;color:var(--qs-ink)}
.znmqs__align-ref small,.znmqs__align-note{font-size:12px;color:#64788e}
.znmqs__align-note{margin:0}
.znmqs__align-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
.znmqs__align-options--grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.znmqs__align-options button{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px;min-width:0;min-height:57px;padding:5px 3px;font-size:12px;border:1px solid #b8c7d5;border-radius:5px;background:#f5f8fb;color:#204765;font-weight:650}
.znmqs__align-options button:hover,.znmqs__align-options button:focus-visible{background:#f9e7b7;border-color:#b99432}
section.znmqs .znmqs__align-options button:disabled,
section.znmqs .znmqs__align-options button:disabled:is(:hover,:focus,:active){
  opacity:1;background:#eef2f5;border-color:#c6d1db;color:#53687a;cursor:not-allowed;
}
@media(max-width:560px){.znmqs__align-dialog{top:6px;right:6px;width:min(320px,calc(100% - 12px));max-height:calc(100% - 12px);padding:10px;gap:9px}}

/* One mode-aware settings popover; no legacy size panels or global theme overrides. */
.znmqs__settings-popover{position:absolute;z-index:12;top:calc(100% - 1px);right:8px;width:min(300px,calc(100% - 16px));padding:12px;display:grid;gap:9px;background:#fff;border:1px solid var(--qs-edge);border-radius:6px;box-shadow:0 12px 30px #152e4b36}
.znmqs__settings-popover strong{font-size:14px}
.znmqs__settings-popover label{font-size:12px;font-weight:650;color:var(--qs-ink)}
.znmqs__settings-popover select,.znmqs__settings-popover input{min-width:0;width:100%;height:40px;border:1px solid #a8b9c8;border-radius:5px;background:#fff;color:var(--qs-ink);padding:7px 9px;font-size:15px}
.znmqs__settings-controls{display:grid;grid-template-columns:42px minmax(0,1fr) 42px;gap:8px;align-items:center}
.znmqs__settings-controls button{height:42px;background:#f4f7fa;border:1px solid #a8b9c8;border-radius:5px;font-size:23px;font-weight:700;color:#204664}
.znmqs__settings-scale{display:grid;gap:6px}
.znmqs__settings-scale>span{font-size:12px;font-weight:650;color:var(--qs-ink)}
.znmqs__settings-scale-toggle{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.znmqs__settings-scale-toggle button{display:flex;align-items:center;justify-content:center;gap:7px;min-height:42px;padding:8px 10px;background:#f5f8fb;border:1px solid #b6c5d3;border-radius:6px;color:#244767;font-size:13px;font-weight:650}
.znmqs__settings-scale-toggle button[aria-pressed="true"]{background:#fff0c8;border-color:#bc9037;color:#16344f;box-shadow:inset 0 -2px 0 #cbab5f}
.znmqs__settings-scale-toggle button span[aria-hidden]{font-size:16px;line-height:1}

.znmqs__settings-section{display:grid;gap:7px}
.znmqs__settings-caption{font-size:12px;font-weight:700;color:var(--qs-ink)}
.znmqs__settings-kind-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.znmqs__settings-kind-choice,.znmqs__settings-symbol-choice{display:flex;align-items:center;gap:8px;min-height:44px;padding:8px 9px;background:#f7fafc;border:1px solid #c7d5e0;border-radius:7px;color:#234766;text-align:left}
.znmqs__settings-kind-choice{flex-direction:column;justify-content:center;gap:6px;min-height:72px;padding:8px 6px}
.znmqs__settings-kind-choice svg,.znmqs__settings-symbol-choice svg,.znmqs__settings-preview-box svg{width:24px;height:24px;stroke:currentColor;stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round}
.znmqs__settings-kind-choice span{font-size:11px;line-height:1.2;text-align:center}
.znmqs__settings-kind-choice[aria-pressed="true"],.znmqs__settings-symbol-choice[aria-pressed="true"]{background:#fff0c8;border-color:#bc9037;color:#16344f;box-shadow:inset 0 -2px 0 #cbab5f}
.znmqs__settings-symbol-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;max-height:180px;overflow:auto;padding-right:2px}
.znmqs__settings-symbol-choice{justify-content:flex-start}
.znmqs__settings-symbol-choice span{font-size:12px;line-height:1.2}
.znmqs__settings-preview{display:grid;gap:7px}
.znmqs__settings-preview-box{display:grid;grid-template-columns:78px minmax(0,1fr);gap:10px;align-items:center;padding:10px;border:1px solid #d4dee7;border-radius:7px;background:#f8fafc}
.znmqs__settings-preview-figure{display:grid;place-items:center;min-height:66px;border:1px dashed #c5d2dd;border-radius:6px;background:#fff;color:#244767}
.znmqs__settings-preview-figure svg{width:64px;height:46px}
.znmqs__settings-preview-meta{display:grid;gap:4px;min-width:0}
.znmqs__settings-preview-meta strong{font-size:13px;color:#183750}
.znmqs__settings-preview-meta span{font-size:12px;line-height:1.3;color:#61758b}
.znmqs__settings-preview-tag{display:inline-flex;align-items:center;justify-content:center;min-height:24px;padding:3px 8px;border:1px solid #c7d5e0;border-radius:7px;background:#fff;color:#244767;font-size:12px;font-weight:700}
.znmqs__settings-preview-line{display:grid;place-items:center;width:100%;height:100%}
.znmqs__settings-preview-line svg{width:64px;height:42px}
.znmqs__settings-preview-line text{font-size:9px;fill:#244767;stroke:none;font-weight:700;font-family:Arial,sans-serif}
.znmqs__settings-preview-line rect{fill:#fff;stroke:#bfd0de}

.znmqs__settings-apply{width:100%}
.znmqs__reference-pick{position:absolute;z-index:10;top:10px;left:10px;max-width:calc(100% - 20px);display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:10px;background:#fff;border:1px solid var(--qs-edge);border-radius:6px;box-shadow:0 8px 26px #152e4b28;font-size:13px;color:var(--qs-ink)}
.znmqs__reference-pick button{padding:8px 10px;min-height:38px;border:1px solid #bf9a43;border-radius:5px;background:#ffefc8;font-weight:650}

/* Header groups: creation modes left, visibility/settings as one group on the right. */
.znmqs__header-actions{position:relative;display:flex;align-items:center;gap:5px;margin-left:auto;flex:0 0 auto}
.znmqs__header-actions .znmqs__tool{background:transparent;border:1px solid transparent;color:#2b4b6b}
.znmqs__header-actions .znmqs__tool:hover{background:#e8eef5;border-color:#cbd5df}
.znmqs__header-actions .znmqs__tool[aria-pressed="true"]{background:#eef3f8;border-color:#b9c8d7;color:#183e5e;box-shadow:inset 0 -3px 0 #c3a255}
.znmqs__header-actions .znmqs__tool[aria-expanded="true"]{background:#eef3f8;border-color:#a5b8c9;box-shadow:inset 0 -3px 0 #7c9bb4}
@media(max-width:750px){.znmqs__stage-info{order:3;width:100%;margin-left:0;justify-content:flex-end;padding-right:3px}.znmqs__header-actions{margin-left:auto}}
@media(max-width:380px){.znmqs__stage-head{padding-inline:5px}.znmqs__tools{gap:1px}.znmqs__header-actions{gap:1px}.znmqs__tool{width:36px;min-height:38px;padding:6px}}
/* Corel-style mini diagrams show which edge or axis is chosen. Selection is only a proposal. */
.znmqs__align-options button svg{display:block;width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.znmqs__align-options button[aria-pressed="true"]{background:#f9e7b7;border-color:#b99432;color:#14263a}
.znmqs__align-selected{font-size:12px;min-height:19px;color:#516c82}
/* Keep Apply and Close on the same compact row, including narrow phones. */
.znmqs__align-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;align-items:stretch}
.znmqs__align-actions .znmqs__button{min-width:0;width:100%;padding-inline:7px;white-space:nowrap}

/* Symbol chooser: one gallery for creating and changing neutral point marks. */
.znmqs__mark-palette{width:min(345px,calc(100vw - 56px));max-height:min(74vh,470px);overflow-y:auto;gap:9px}
.znmqs__mark-palette>strong{font-size:13px;color:var(--qs-ink)}
.znmqs__mark-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
.znmqs__mark-gallery .znmqs__mark-choice{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-width:0;min-height:76px;padding:7px 3px;border:1px solid #d5dee8;text-align:center}
.znmqs__mark-gallery .znmqs__mark-choice svg{width:30px;height:30px;flex-shrink:0;stroke-width:1.8}
.znmqs__mark-gallery .znmqs__mark-choice span{font-size:11px;line-height:1.2;overflow-wrap:anywhere}
.znmqs__settings-buttons{display:flex;gap:7px;flex-wrap:wrap}
.znmqs__settings-buttons .znmqs__button{flex:1;min-width:90px}
.znmqs [data-settings-symbol-row]{display:grid;gap:7px}

@media(max-width:560px){
  .znmqs__mark-palette{left:-44px;width:min(310px,calc(100vw - 32px))}
}

/* Contextual snap settings share the editor footer, without a new permanent sidebar. */
.znmqs__stage-foot{position:relative}
.znmqs__snap-dialog{position:absolute;z-index:15;right:8px;bottom:calc(100% + 10px);
  width:min(330px,calc(100vw - 36px));max-height:min(78vh,520px);overflow-y:auto;
  padding:13px;background:#fff;border:1px solid var(--qs-edge);border-radius:7px;
  box-shadow:0 12px 32px #132a4638;display:grid;gap:11px;color:var(--qs-ink)}
.znmqs__snap-dialog strong{font-size:15px}
.znmqs__snap-kinds{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
/* A compact pictogram and a full, unbroken name for every snap behavior. */
.znmqs__snap-kinds .znmqs__snap-choice{position:relative;display:grid;
  grid-template-columns:24px minmax(0,1fr);grid-template-rows:27px auto;
  align-items:center;justify-items:center;gap:4px;min-height:77px;padding:6px;
  border:1px solid #d7e1e9;border-radius:5px;background:#f9fbfd;color:#1b3854;
  font-size:12px;font-weight:600;line-height:1.2;cursor:pointer}
.znmqs__snap-choice:has(input:checked){background:#fff4d8;border-color:#c49a47}
.znmqs__snap-choice svg{grid-column:2;grid-row:1;width:27px;height:27px;stroke:#294f70;stroke-width:1.7;
  fill:none;stroke-linejoin:round;stroke-linecap:round}
.znmqs__snap-choice svg circle{fill:#fff4d8;stroke:#a17a28}
.znmqs__snap-choice span{grid-column:1/-1;grid-row:2;text-align:center;white-space:normal}

.znmqs__snap-kinds input{grid-column:1;grid-row:1;justify-self:center;
  width:18px;height:18px;margin:0;accent-color:#b78b24}
.znmqs__snap-caption{font-weight:700;font-size:13px}
.znmqs__snap-angles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
.znmqs__snap-angles button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-width:0;min-height:58px;padding:6px 1px;background:#f5f8fb;color:#1c3954;
  border:1px solid #b9c8d7;border-radius:4px;font-size:12px;font-weight:650}
.znmqs__snap-angles svg{width:24px;height:24px;flex-shrink:0;stroke:#294f70;stroke-width:1.7;
  fill:none;stroke-linejoin:round;stroke-linecap:round}
.znmqs__snap-angles button[aria-pressed="true"]{background:#fff0c7;border-color:#b58a2d;color:#17324c;font-weight:700}
.znmqs__snap-dialog small{font-size:12px;color:#61778c}
.znmqs__snap-actions{display:flex;gap:7px;flex-wrap:wrap}
.znmqs__snap-actions button{flex:1 1 auto}

/* Compact object appearance tools. Layout belongs to Quick Sketch; UI colors follow its foundation tokens. */
.znmqs__style-dialog{position:absolute;z-index:16;right:8px;bottom:calc(100% + 10px);width:min(272px,calc(100vw - 36px));max-height:min(65vh,360px);overflow:auto;padding:12px;display:grid;gap:12px;background:var(--znm-ui-color-surface,#fff);color:var(--qs-ink);border:1px solid var(--qs-edge);border-radius:7px;box-shadow:0 12px 30px #152e4b30}
.znmqs__style-dialog>div{display:grid;gap:9px}
.znmqs__style-dialog strong{font-size:13px}
.znmqs__ink-choices{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px}
.znmqs__ink-choices button{min-width:0;width:32px;height:34px;padding:3px;border:2px solid #a8bbc9;border-radius:5px;background:var(--ink)}
.znmqs__ink-choices button[aria-pressed="true"]{outline:2px solid #c39843;outline-offset:2px}
.znmqs__weight-choices{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
.znmqs__weight-choices button{min-width:0;height:37px;padding:4px 0;font-size:12px;font-weight:700;color:var(--qs-ink);background:#f6f8fb;border:1px solid #b9c8d5;border-radius:4px}
.znmqs__weight-choices button[aria-pressed="true"]{background:#fae8b6;border-color:#b48a34}


/* Unified inspector for the selected object/group. Quick buttons and this panel
 * edit the same model fields; the inspector is not a second style store. */
.znmqs__object-inspector{position:absolute;z-index:18;right:8px;bottom:calc(100% + 10px);width:min(330px,calc(100vw - 36px));max-height:min(76vh,560px);overflow:auto;padding:13px;display:grid;gap:12px;background:#fff;border:1px solid var(--qs-edge);border-radius:8px;box-shadow:0 12px 32px #132a4638;color:var(--qs-ink)}
.znmqs__object-inspector[hidden]{display:none!important}
.znmqs__object-inspector-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.znmqs__object-inspector-head>div{display:grid;gap:2px}
.znmqs__object-inspector-head strong{font-size:15px}
.znmqs__object-inspector-head span{font-size:12px;color:#667b8e}
.znmqs__object-inspector-head button{width:32px;height:32px;border:1px solid #c4d1dc;border-radius:6px;background:#f6f9fb;color:#36546e;font-size:21px;line-height:1}
.znmqs__object-inspector-section{display:grid;gap:9px;padding-top:2px}
.znmqs__object-inspector-section+.znmqs__object-inspector-section{padding-top:11px;border-top:1px solid #e0e7ec}
.znmqs__object-inspector-caption{font-size:12px;font-weight:750;color:#244767}
.znmqs__object-preview{min-height:68px;display:grid;place-items:center;border:1px solid #d5e0e8;border-radius:7px;background:#f8fafc;overflow:hidden}
.znmqs__object-preview svg{width:100%;height:64px}
.znmqs__object-preview-fill{position:relative;width:calc(100% - 24px);height:44px;border:1px solid #b9c8d5;border-radius:6px;overflow:hidden;background-color:color-mix(in srgb,var(--preview-fill) calc(var(--preview-alpha)*100%),transparent)}
.znmqs__object-preview-fill::before{content:"";position:absolute;inset:0;opacity:var(--preview-alpha);background-color:var(--preview-fill)}
.znmqs__object-preview-fill[data-pattern="hatch"]::after,.znmqs__object-preview-fill[data-pattern="cross"]::after{content:"";position:absolute;inset:0;opacity:var(--preview-alpha);background-image:repeating-linear-gradient(135deg,transparent 0 7px,var(--preview-fill) 7px 9px)}
.znmqs__object-preview-fill[data-pattern="cross"]::after{background-image:repeating-linear-gradient(135deg,transparent 0 7px,var(--preview-fill) 7px 9px),repeating-linear-gradient(45deg,transparent 0 7px,var(--preview-fill) 7px 9px)}
.znmqs__object-preview-fill[data-pattern="dots"]::after{content:"";position:absolute;inset:0;opacity:var(--preview-alpha);background-image:radial-gradient(circle,var(--preview-fill) 1.5px,transparent 1.8px);background-size:10px 10px}
.znmqs__object-preview-fill>span{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);padding:3px 7px;border-radius:5px;background:#ffffffd9;color:#294b68;font-size:11px;font-weight:700;white-space:nowrap}
.znmqs__object-preview text{font-family:Arial,sans-serif;fill:#5f7386;font-size:10px}
.znmqs__object-color-row,.znmqs__object-weight-row,.znmqs__object-opacity-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;font-size:12px;font-weight:650}
.znmqs__object-color-row input[type=color]{width:72px;height:38px;padding:3px;border:1px solid #b8c8d5;border-radius:6px;background:#fff}
.znmqs__object-weight-row input{width:88px;height:38px;border:1px solid #b8c8d5;border-radius:6px;padding:6px 8px;color:#183750;background:#fff}
.znmqs__object-swatches{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px}
.znmqs__object-swatches button{height:30px;min-width:0;border:2px solid #c0cfda;border-radius:6px;background:var(--swatch)}
.znmqs__object-swatches button[aria-pressed=true]{outline:2px solid #bb8a26;outline-offset:1px}
.znmqs__object-fill-options{display:grid;gap:9px}
.znmqs__object-fill-options>span{font-size:12px;font-weight:650}
.znmqs__object-patterns{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.znmqs__object-patterns button{height:38px;border:1px solid #b8c8d5;border-radius:6px;background:#fff;color:#315774}
.znmqs__object-patterns button svg{width:22px;height:22px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.znmqs__object-patterns button[aria-pressed=true]{background:#fff0c9;border-color:#b98c30;box-shadow:inset 0 -2px 0 #ccb064}
.znmqs__object-opacity-row{grid-template-columns:minmax(0,1fr) 110px 42px}
.znmqs__object-opacity-row input{width:110px}
.znmqs__object-opacity-row strong{font-size:12px;text-align:right}
.znmqs__object-assignment-state{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 10px;background:#f7f9fb;border:1px solid #d8e1e8;border-radius:7px;font-size:12px}
.znmqs__object-assignment-state strong{color:#677c90;font-size:12px}
.znmqs__object-assignment small{font-size:11px;line-height:1.35;color:#718496}
@media(max-width:560px){.znmqs__object-inspector{right:6px;width:min(320px,calc(100vw - 12px));padding:11px}.znmqs__object-opacity-row{grid-template-columns:1fr 96px 38px}.znmqs__object-opacity-row input{width:96px}}

/* Fullscreen is scoped to the editor, not the page. Native Fullscreen API first;
   a fixed, body-level fallback supports mobile browsers without element fullscreen. */
.znmqs:is(:fullscreen, .is-pseudo-fullscreen){
  position:fixed;inset:0;left:0;transform:none;margin:0;padding:0;
  width:100%;max-width:none;height:100vh;height:100dvh;
  z-index:2147483640;background:#fff;overflow:hidden;
}
.znmqs:is(:fullscreen, .is-pseudo-fullscreen) .znmqs__workspace,
.znmqs:is(:fullscreen, .is-pseudo-fullscreen) .znmqs__stage{height:100%;min-height:0}
.znmqs:is(:fullscreen, .is-pseudo-fullscreen) .znmqs__stage{
  border:0;border-radius:0;grid-template-rows:auto minmax(0,1fr) auto;
}
.znmqs:is(:fullscreen, .is-pseudo-fullscreen) .znmqs__board{
  height:auto;min-height:0;overflow:hidden;
}
.znmqs:is(:fullscreen, .is-pseudo-fullscreen) .znmqs__stage-head{
  padding-top:max(5px,env(safe-area-inset-top));
  padding-left:max(8px,env(safe-area-inset-left));
  padding-right:max(8px,env(safe-area-inset-right));
}
.znmqs:is(:fullscreen, .is-pseudo-fullscreen) .znmqs__stage-foot{
  padding-bottom:max(8px,env(safe-area-inset-bottom));
  padding-left:max(10px,env(safe-area-inset-left));
  padding-right:max(10px,env(safe-area-inset-right));
}
/* Document-level menu, deliberately separate from drawing tools. */
.znmqs__main-menu{position:absolute;z-index:30;top:calc(100% + 6px);right:0;width:min(312px,calc(100vw - 32px));padding:9px;background:#fff;border:1px solid #b7c6d4;border-radius:8px;box-shadow:0 12px 32px #132c4850;display:flex;flex-direction:column;gap:4px}
.znmqs__main-menu[hidden]{display:none!important}
.znmqs__main-menu strong{padding:7px 9px 4px;font-size:13px;color:#183750}
.znmqs__main-menu button{width:100%;text-align:left;background:#fff;border:0;border-radius:7px;padding:9px 10px;font:inherit;font-size:13px;color:#183750;cursor:pointer}
.znmqs__main-menu button:hover,.znmqs__main-menu button:focus-visible{background:#edf3f8}
.znmqs__menu-item{display:flex;align-items:center;justify-content:space-between;gap:10px}
.znmqs__menu-item-main{display:flex;align-items:center;gap:10px;min-width:0}
.znmqs__menu-item-icon{width:20px;height:20px;display:grid;place-items:center;flex:0 0 auto;color:#355a79}
.znmqs__menu-item-icon svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.znmqs__menu-state{display:inline-flex;align-items:center;gap:6px;padding:3px 7px;border-radius:999px;background:#eef4f8;color:#5b7488;font-size:11px;font-weight:700;white-space:nowrap}
.znmqs__menu-state-icon{font-size:12px;line-height:1}
.znmqs__main-menu [data-layer-toggle][aria-pressed="true"] .znmqs__menu-state{background:#fff0cc;color:#8b6713}
.znmqs__main-menu [data-layer-toggle][aria-pressed="false"]{color:#60788d}
.znmqs__main-menu [data-layer-toggle][aria-pressed="false"] .znmqs__menu-state{background:#eef2f5;color:#72879a}
.znmqs__main-menu-separator{height:1px;background:#e0e7ec;margin:5px 0}

/* Context-sensitive actions follow the pointer; no bottom-center fixed placement. */
.znmqs__board .znmqs__dialog--at-pointer {
  left:0;top:0;bottom:auto;right:auto;transform:none;
  max-width:calc(100% - 16px);
}

@media(max-width:560px){.znmqs__tools{gap:3px}}
@media(max-width:380px){.znmqs__tools .znmqs__tool{width:37px;min-height:40px;padding:6px}}

/* Reuse the placement dialog for precise node alignment. */
.znmqs__node-align-controls{display:grid;gap:8px;font-size:13px;font-weight:700}
.znmqs__node-align-controls>div{display:flex;gap:7px}
.znmqs__node-align-controls button{flex:1;min-height:39px;border:1px solid #aebfd0;border-radius:5px;background:#f4f7fa;color:#204765;font-weight:700}
.znmqs__node-align-controls button[aria-pressed="true"]{background:#f8e6b5;border-color:#b58a32}

/* Fill mode belongs to the primary tool group; parameters remain secondary. */
.znmqs__fill-controls{display:flex;align-items:center;flex:1 1 0;min-width:0;flex-wrap:nowrap;gap:8px;padding:4px 8px;border-radius:9px;background:#edf3f7;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:#adbccc transparent;height:38px}
.znmqs__fill-controls[hidden]{display:none!important}
.znmqs__fill-caption{flex:0 0 auto;font-size:12px;font-weight:700;color:#244969}
.znmqs__fill-picker{flex:0 0 auto;width:28px;height:28px;padding:3px;border:1px solid #b8cad8;border-radius:6px;background:#fff;color:#2f5a80;cursor:pointer}
.znmqs__fill-picker svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.znmqs__fill-picker[aria-pressed=true]{outline:2px solid #9a6d12;outline-offset:1px;background:#fff7df}
.znmqs__svg .qs-fill-selected{fill:none;stroke:#d09b24;stroke-width:3;stroke-dasharray:7 5;pointer-events:none}
.znmqs__fill-colors,.znmqs__fill-patterns{display:flex;flex:0 0 auto;gap:4px}
.znmqs__fill-colors button{width:26px;height:26px;border:2px solid #c4d2de;border-radius:6px;background:var(--fill);cursor:pointer}
.znmqs__fill-colors button[aria-pressed=true],.znmqs__fill-patterns button[aria-pressed=true]{outline:2px solid #9a6d12;outline-offset:1px}
.znmqs__fill-patterns button{min-width:28px;height:28px;padding:2px;border:1px solid #b8cad8;border-radius:6px;background:white;font-size:16px;color:#2f5a80;cursor:pointer}
.znmqs__fill-alpha{display:flex;align-items:center;flex:0 0 auto;gap:5px;font-size:12px;color:#244969;white-space:nowrap}
.znmqs__fill-alpha input{width:78px}

.znmqs__fill-patterns svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* Active edit context is named explicitly; actions remain subordinate to the main mode bar. */
.znmqs__context-caption{flex:0 0 auto;display:inline-flex;align-items:center;min-height:28px;padding:3px 8px;border-radius:999px;background:#e8eef4;color:#294b69;font-weight:750;font-size:11px;letter-spacing:.01em;white-space:nowrap}
.znmqs__context-caption[hidden]{display:none!important}