:root{
  --black:#0a0a0a;
  --ink:#141414;
  --gray-900:#1f1f1f;
  --gray-600:#5a5a5a;
  --gray-400:#8c8c8c;
  --gray-200:#d9d9d9;
  --gray-100:#eeeeee;
  --white:#ffffff;
  --line:#141414;
  --radius:0;
  --accent:#1a73e8;
  --accent-dim:rgba(26,115,232,0.35);
  --accent-tint:rgba(26,115,232,0.06);
  --mono: "IBM Plex Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--black);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}
.hidden{display:none !important;}
button{font-family:inherit;cursor:pointer;}
input{font-family:inherit;}

.drop-screen{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:40px 20px;
  gap:14px;
}
.drop-mark{
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:0.3em;
  border:1px solid var(--black);
  padding:6px 14px;
  margin-bottom:8px;
}
.drop-screen h1{
  font-size:clamp(28px,4vw,44px);
  margin:0;
  font-weight:600;
  letter-spacing:-0.02em;
}
.drop-sub{
  max-width:480px;
  color:var(--gray-600);
  font-size:15px;
  line-height:1.5;
  margin:0 0 10px;
}
.drop-zone{
  margin-top:6px;
  border:1px dashed var(--gray-400);
  padding:22px 40px;
  font-size:13px;
  color:var(--gray-600);
  font-family:var(--mono);
}
.drop-zone.drag-over{
  border-color:var(--black);
  color:var(--black);
  background:var(--gray-100);
}
.error-text{color:#b00020;font-size:13px;min-height:18px;}

.btn{
  font-family:var(--sans);
  font-size:14px;
  font-weight:600;
  padding:11px 22px;
  border-radius:var(--radius);
  border:1px solid var(--black);
  background:var(--white);
  color:var(--black);
  display:inline-block;
  line-height:1;
}
.btn-primary{background:var(--black);color:var(--white);}
.btn-primary:hover{background:var(--ink);}
.btn-outline:hover{background:var(--gray-100);}

.editor-screen{
  display:flex;
  flex-direction:column;
  height:100vh;
}

.toolbar{
  display:flex;
  align-items:center;
  gap:18px;
  padding:10px 16px;
  border-bottom:1px solid var(--line);
  flex-wrap:wrap;
}
.tb-group{display:flex;align-items:center;gap:6px;}
.tb-tools{margin-left:auto;}
.tb-file{margin-right:auto;min-width:0;display:none;}
.doc-name{
  font-family:var(--mono);
  font-size:13px;
  color:var(--gray-600);
}

.tool-btn{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  border:1px solid transparent;
  background:none;
  padding:6px 10px;
  min-width:56px;
}
.tool-btn .ico{font-family:var(--mono);font-size:14px;font-weight:600;}
.tool-btn .lbl{font-size:10px;letter-spacing:0.03em;color:var(--gray-600);}
.tool-btn:hover{border-color:var(--gray-200);}
.tool-btn.active{border-color:var(--black);background:var(--black);}
.tool-btn.active .ico,.tool-btn.active .lbl{color:var(--white);}

.tb-dd{position:relative;display:flex;align-items:stretch;gap:0;}
.tb-dd-menu{
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  background:rgba(255,255,255,0.97);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid #e0e0e0;
  box-shadow:0 8px 28px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
  border-radius:12px;
  padding:6px;
  z-index:40;
  display:flex;
  flex-direction:column;
  min-width:160px;
}
.tb-dd-menu.hidden{display:none;}
.tb-dd-menu-wide{min-width:290px;}
.tb-dd-item{
  display:flex;
  align-items:center;
  gap:10px;
  border:none;
  background:none;
  text-align:left;
  padding:8px 10px;
  font-size:13px;
  font-weight:500;
  color:#374151;
  border-radius:8px;
  width:100%;
  font-family:var(--sans);
  transition:background 0.12s ease;
}
.tb-dd-item:hover{background:#f3f4f6;}
.tb-dd-ico{
  width:18px;height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#6b7280;
  flex-shrink:0;
}
.tb-dd-ico svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
.tb-dd-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:2px 2px 2px 0;
}
.tb-dd-row .tb-dd-item-inline{flex:1;padding:7px 8px;}
.tb-dd-swatches{display:flex;gap:5px;padding-right:6px;}
.tb-dd-swatch{
  width:16px;height:16px;border-radius:50%;
  border:1px solid var(--gray-200);padding:0;flex:none;
}
.tb-dd-swatch.active{box-shadow:0 0 0 2px var(--accent);}
.tb-dd-cat{
  font-family:var(--sans);
  font-size:10px;
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:#9ca3af;
  padding:10px 8px 4px;
}
.tb-dd-sep{height:1px;background:#e5e7eb;margin:6px 4px;}
.tb-dd-check{
  display:flex;
  align-items:center;
  gap:8px;
  padding:7px 8px;
  font-size:13px;
  font-weight:500;
  color:#374151;
  cursor:pointer;
  border-radius:6px;
  transition:background 0.12s;
}
.tb-dd-check:hover{background:#f3f4f6;}
.tb-dd-check input{cursor:pointer;accent-color:#2563eb;}

#textDD .tool-btn{min-width:44px;}
#textMenu{min-width:190px;}

.tb-dd-symbols{display:flex;gap:6px;padding:4px 4px 8px;}
.tb-dd-symbol{
  flex:1;
  border:1px solid #e5e7eb;
  background:#fff;
  padding:9px 0;
  font-family:var(--sans);
  font-size:15px;
  font-weight:500;
  border-radius:8px;
  cursor:pointer;
  transition:background 0.12s, border-color 0.12s, transform 0.12s;
  color:#374151;
}
.tb-dd-symbol:hover{background:#f3f4f6;border-color:#d1d5db;transform:scale(1.04);}
.tb-dd-formgrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5px;
  padding:4px;
}
.tb-dd-field{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  border:1px solid #e5e7eb;
  background:#fff;
  padding:8px 4px 7px;
  border-radius:8px;
  font-family:var(--sans);
  font-size:11px;
  font-weight:500;
  line-height:1.2;
  color:#374151;
  text-align:center;
  transition:background 0.12s, border-color 0.12s, transform 0.12s;
}
.tb-dd-field:hover{border-color:#93c5fd;background:#eff6ff;transform:scale(1.02);}
.tb-dd-field:hover .tb-dd-field-ico{color:#2563eb;}
.tb-dd-field.active{border-color:#2563eb;background:#eff6ff;}
.tb-dd-field-ico{
  display:flex;align-items:center;justify-content:center;
  width:26px;height:26px;
  color:#6b7280;
  transition:color 0.12s;
}
.tb-dd-field-ico svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
.tb-dd-field-label{padding:0 2px;}

.tb-dd-item[disabled]{
  color:#9ca3af;
  cursor:not-allowed;
  opacity:0.7;
}
.tb-dd-item[disabled]:hover{background:none;}
.tb-dd-soon{
  margin-left:auto;
  font-family:var(--sans);
  font-size:10px;
  font-weight:600;
  padding:2px 7px;
  border-radius:20px;
  background:#f3f4f6;
  color:#9ca3af;
  letter-spacing:0.02em;
}

.tb-dd-menu-sign{min-width:200px;padding:8px;gap:8px;}
.sign-preview-box{
  position:relative;
  border:1px solid #e5e7eb;
  border-radius:10px;
  background:#fff;
  padding:10px 8px;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:70px;
  cursor:pointer;
  transition:border-color 0.12s, background 0.12s;
}
.sign-preview-box:hover{border-color:#93c5fd;background:#eff6ff;}
.sign-preview-box img{max-width:100%;max-height:60px;display:block;}
.sign-preview-remove{
  position:absolute;
  top:4px;right:4px;
  width:18px;height:18px;
  display:flex;align-items:center;justify-content:center;
  border:none;background:none;
  color:var(--gray-400);
  font-size:13px;
  line-height:1;
  border-radius:50%;
}
.sign-preview-remove:hover{background:var(--gray-100);color:var(--black);}
.sign-new-btn{
  width:100%;
  text-align:center;
  font-size:13px;
  padding:9px 10px;
  border-color:var(--accent);
  color:var(--accent);
}
.sign-new-btn:hover{background:var(--accent-tint);}
.sign-empty-hint{
  font-size:12px;
  color:var(--gray-600);
  text-align:center;
  padding:4px 2px 2px;
}

.sig-tabs{display:flex;gap:4px;border-bottom:1px solid var(--gray-200);margin-bottom:2px;}
.sig-tab{
  border:none;background:none;
  padding:8px 4px;
  font-size:13px;
  font-weight:600;
  color:var(--gray-600);
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
}
.sig-tab.active{color:var(--black);border-bottom-color:var(--accent);}
.sig-pane.hidden{display:none;}
#sigCanvas{
  width:100%;
  height:180px;
  border:1px dashed var(--gray-400);
  border-radius:8px;
  background:var(--white);
  touch-action:none;
  cursor:crosshair;
  display:block;
}
.sig-pane-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:8px;
}
.sig-hint{font-size:12px;color:var(--gray-600);}
#sigTypeInput{
  border:1px solid var(--gray-200);
  border-radius:8px;
  padding:9px 11px;
  font-size:14px;
  width:100%;
  outline:none;
  margin-bottom:12px;
}
#sigTypeInput:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint);}
.sig-type-preview{
  min-height:90px;
  border:1px dashed var(--gray-400);
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:"Dancing Script", cursive;
  font-size:40px;
  color:var(--black);
  padding:8px 16px;
  text-align:center;
  word-break:break-word;
}

.modal-wide{width:min(480px, 92vw);}
.fr-row{display:flex;align-items:center;gap:8px;}
.fr-field{
  flex:1;
  display:flex;
  align-items:center;
  gap:7px;
  border:1px solid var(--gray-200);
  border-radius:8px;
  padding:0 10px;
  background:var(--white);
  transition:border-color .12s ease, box-shadow .12s ease;
  min-width:0;
}
.fr-field:focus-within{
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-tint);
}
.fr-field-ico{
  flex:none;
  font-size:13px;
  color:var(--gray-400);
  font-family:var(--mono);
}
.fr-field-ico-arrow{font-size:12px;}
.fr-field input{
  flex:1;
  min-width:0;
  border:none;
  outline:none;
  padding:9px 0;
  font-size:13px;
  font-family:var(--sans);
  background:none;
  color:var(--black);
}
.fr-status{font-size:12px;color:var(--gray-600);margin:6px 0 0;}
.fr-results{
  max-height:260px;
  overflow-y:auto;
  border:1px solid var(--gray-200);
  border-radius:8px;
  margin-top:6px;
}
.fr-results:empty{border:none;}
.fr-result{
  display:flex;
  align-items:center;
  gap:8px;
  padding:9px 10px;
  border-bottom:1px solid var(--gray-100);
  cursor:pointer;
  transition:background-color .1s ease;
}
.fr-result:first-child{border-top-left-radius:7px;border-top-right-radius:7px;}
.fr-result:last-child{border-bottom:none;border-bottom-left-radius:7px;border-bottom-right-radius:7px;}
.fr-result:hover{background:var(--gray-100);}
.fr-result-page{
  font-family:var(--mono);
  font-size:10px;
  color:var(--gray-400);
  flex:none;
  width:34px;
  text-align:center;
  background:var(--gray-100);
  border-radius:4px;
  padding:2px 0;
}
.fr-result:hover .fr-result-page{background:var(--white);}
.fr-result-text{
  font-size:12px;
  color:var(--black);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  flex:1;
}
.fr-result-text mark{background:#ffe58a;color:inherit;border-radius:2px;}
.fr-result-replace{
  flex:none;
  border:1px solid var(--gray-200);
  background:var(--white);
  font-size:11px;
  font-weight:600;
  padding:4px 9px;
  border-radius:5px;
}
.fr-result-replace:hover{background:var(--black);color:var(--white);border-color:var(--black);}
.span-box.flash-match{
  outline:2px solid var(--accent, #1a73e8);
  outline-offset:1px;
  border-radius:3px;
}

.stamp-box{
  position:absolute;
  cursor:move;
  border:1px solid transparent;
  border-radius:4px;
  transition:border-color .08s ease, background-color .08s ease;
}
.stamp-box:hover{
  border:1.5px dashed var(--accent);
  background:var(--accent-tint);
}
.stamp-box.dragging{
  cursor:grabbing;
  z-index:30;
  border:1.5px dashed var(--accent);
  background:var(--accent-tint);
}

.stamp-remove-btn{
  position:absolute;
  top:-9px;right:-9px;
  width:20px;height:20px;
  display:flex;align-items:center;justify-content:center;
  padding:0;
  border:1.5px solid var(--white);
  border-radius:50%;
  background:#d93025;
  color:var(--white);
  cursor:pointer;
  box-shadow:0 1px 3px rgba(0,0,0,.25);
  opacity:0;
  transform:scale(.85);
  transition:opacity .08s ease, transform .08s ease, background-color .08s ease;
  z-index:31;
}
.stamp-remove-btn svg{width:12px;height:12px;}
.stamp-remove-btn:hover{background:#b0201a;}
.stamp-box:hover .stamp-remove-btn,
.stamp-box.dragging .stamp-remove-btn{
  opacity:1;
  transform:scale(1);
}

.icon-btn{
  border:1px solid var(--black);
  background:var(--white);
  padding:7px 12px;
  font-size:13px;
}
.icon-btn:hover{background:var(--gray-100);}

.zoom-control{
  display:flex;align-items:center;gap:8px;
  border:1px solid var(--black);
  padding:0 4px;
}
.zoom-control .icon-btn{border:none;padding:6px 8px;}
#zoomLabel{font-family:var(--mono);font-size:12px;min-width:40px;text-align:center;}

.editor-body{
  flex:1;
  display:flex;
  overflow:hidden;
}

.thumb-rail{
  width:190px;
  border-right:1px solid var(--line);
  overflow-y:auto;
  padding:12px 8px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.thumb{
  border:1px solid var(--gray-200);
  cursor:pointer;
  position:relative;
  aspect-ratio:0.75;
  flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--gray-100);
  font-family:var(--mono);
  font-size:11px;
  color:var(--gray-600);
}
.thumb.active{border-color:var(--black);border-width:2px;}
.thumb canvas{display:block;width:100%;height:auto;border-radius:2px;}
.thumb .num{position:absolute;bottom:2px;right:4px;font-size:10px;background:var(--white);padding:0 3px;}

.viewport{
  flex:1;
  overflow:auto;
  background:var(--gray-100);
  display:flex;
  justify-content:center;
  padding:32px;
}
.page-stage{
  position:relative;
  background:var(--white);
  box-shadow:0 0 0 1px var(--gray-200);
  height:fit-content;
}
#pdfCanvas{display:block;}
.overlay-layer{
  position:absolute;
  inset:0;
  cursor:default;
}
.overlay-layer.mode-select{cursor:text;}
.overlay-layer.mode-addtext{cursor:crosshair;}
.overlay-layer.mode-whiteout,
.overlay-layer.mode-shape-rect,
.overlay-layer.mode-shape-ellipse,
.overlay-layer.mode-shape-line,
.overlay-layer.mode-shape-arrow,
.overlay-layer.mode-annotate-highlight,
.overlay-layer.mode-annotate-strike,
.overlay-layer.mode-annotate-underline,
.overlay-layer.mode-annotate-freehand-highlight,
.overlay-layer.mode-annotate-draw,
.overlay-layer.mode-stamp,
.overlay-layer.mode-sign,
.overlay-layer.mode-form-text,
.overlay-layer.mode-form-multiline,
.overlay-layer.mode-form-dropdown,
.overlay-layer.mode-form-radio,
.overlay-layer.mode-form-checkbox,
.overlay-layer.mode-form-signature{cursor:crosshair;}

.tool-preview-svg{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:15;
  overflow:visible;
}
.shape-overlay-svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:18;
  overflow:visible;
  pointer-events:none;
}
.shape-overlay-svg .shape-el{cursor:pointer;pointer-events:all;}
.shape-overlay-svg .shape-el.selected{opacity:0.7;}
.shape-overlay-svg .sel-handle{
  fill:#fff;
  stroke:#2563eb;
  stroke-width:1.5;
  cursor:pointer;
  pointer-events:all;
}
.shape-overlay-svg .sel-handle.nw{cursor:nw-resize;}
.shape-overlay-svg .sel-handle.ne{cursor:ne-resize;}
.shape-overlay-svg .sel-handle.sw{cursor:sw-resize;}
.shape-overlay-svg .sel-handle.se{cursor:se-resize;}
.shape-overlay-svg .sel-handle.n{cursor:n-resize;}
.shape-overlay-svg .sel-handle.s{cursor:s-resize;}
.shape-overlay-svg .sel-handle.w{cursor:w-resize;}
.shape-overlay-svg .sel-handle.e{cursor:e-resize;}

.form-field-overlay-svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:19;
  overflow:visible;
  pointer-events:none;
}
.form-field-overlay-svg .ff-el{cursor:pointer;pointer-events:all;}
.form-field-overlay-svg .ff-el.selected{opacity:0.85;}
.form-field-overlay-svg .ff-sel-handle{
  fill:#fff;
  stroke:#2563eb;
  stroke-width:1.5;
  cursor:pointer;
  pointer-events:all;
}
.form-field-overlay-svg .ff-sel-handle.nw{cursor:nw-resize;}
.form-field-overlay-svg .ff-sel-handle.ne{cursor:ne-resize;}
.form-field-overlay-svg .ff-sel-handle.sw{cursor:sw-resize;}
.form-field-overlay-svg .ff-sel-handle.se{cursor:se-resize;}
.form-field-overlay-svg .ff-sel-handle.n{cursor:n-resize;}
.form-field-overlay-svg .ff-sel-handle.s{cursor:s-resize;}
.form-field-overlay-svg .ff-sel-handle.w{cursor:w-resize;}
.form-field-overlay-svg .ff-sel-handle.e{cursor:e-resize;}

.ff-edit-block{
  position:absolute;
  display:block;
  margin:0;
  padding:4px 6px;
  background:rgba(255,255,255,0.95);
  outline:none;
  border:2px solid #2563eb;
  border-radius:3px;
  font-family:var(--sans) !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:clip;
  cursor:text;
  z-index:20;
  box-sizing:border-box;
  box-shadow:0 2px 8px rgba(37,99,235,0.15);
}
.ff-edit-block::selection{background:#bfdbfe;}
.ff-edit-block:empty::before{
  content:"Type here...";
  color:#9ca3af;
  pointer-events:none;
}
.ff-edit-block.ff-multiline{
  white-space:pre-wrap !important;
  overflow-y:auto !important;
  word-break:break-word !important;
  overflow-wrap:break-word !important;
}

.ff-settings-inner{
  padding:8px 0;
  min-width:180px;
}
.ff-settings-label{
  display:block;
  font-size:11px;
  font-weight:600;
  color:#374151;
  margin-bottom:4px;
}
.ff-settings-input{
  display:block;
  width:100%;
  padding:5px 8px;
  border:1px solid #d1d5db;
  border-radius:4px;
  font-size:12px;
  font-family:var(--sans);
  outline:none;
  box-sizing:border-box;
}
.ff-settings-input:focus{
  border-color:#2563eb;
  box-shadow:0 0 0 2px rgba(37,99,235,0.15);
}
.ff-settings-check{
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:8px;
  font-size:12px;
  color:#374151;
  cursor:pointer;
}
.ff-settings-check input[type="checkbox"]{
  width:14px;
  height:14px;
  accent-color:#2563eb;
}
.ff-settings-textarea{
  display:block;
  width:100%;
  padding:5px 8px;
  border:1px solid #d1d5db;
  border-radius:4px;
  font-size:12px;
  font-family:var(--sans);
  outline:none;
  box-sizing:border-box;
  resize:vertical;
  line-height:1.4;
}
.ff-settings-textarea:focus{
  border-color:#2563eb;
  box-shadow:0 0 0 2px rgba(37,99,235,0.15);
}

.ff-dropdown-menu{
  position:absolute;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:6px;
  box-shadow:0 8px 24px rgba(0,0,0,0.15);
  z-index:25;
  max-height:200px;
  overflow-y:auto;
  padding:4px 0;
}
.ff-dropdown-item{
  padding:6px 10px;
  font-size:13px;
  font-family:var(--sans);
  color:#374151;
  cursor:pointer;
  white-space:nowrap;
}
.ff-dropdown-item:hover{
  background:#f3f4f6;
}
.ff-dropdown-item.selected{
  background:#eff6ff;
  color:#2563eb;
  font-weight:500;
}

.span-box{
  position:absolute;
  border:1px solid transparent;
  border-radius:2px;
  transition:border-color .08s ease, background-color .08s ease;
}
.span-box:hover{
  border:1.5px dashed var(--accent);
  background:var(--accent-tint);
  cursor:move;
}
.span-box.dragging{
  cursor:grabbing;
  z-index:30;
  background:var(--accent-tint);
  border:1.5px dashed var(--accent);
}

.edit-block{
  position:absolute;
  margin:0;
  padding:0;
  background:var(--white);
  outline:none;
  border:none;
  font-family:var(--sans);
  white-space:pre-wrap;
  overflow-wrap:break-word;
  overflow:visible;
  cursor:text;
}
.edit-block::selection{background:var(--accent-dim);}
.edit-block.new-text-block:empty::before{
  content:"Type text…";
  color:var(--gray-400);
  pointer-events:none;
}

.float-toolbar{
  position:absolute;
  display:flex;
  align-items:center;
  background:rgba(255,255,255,0.96);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid #e0e0e0;
  box-shadow:0 6px 20px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.06);
  border-radius:12px;
  padding:4px 5px;
  gap:1px;
  z-index:20;
  user-select:none;
}
.ft-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:3px;
  min-width:32px;
  height:32px;
  padding:0 8px;
  border:none;
  background:none;
  border-radius:8px;
  color:#374151;
  font-family:var(--sans);
  font-size:14px;
  font-weight:500;
  line-height:1;
  position:relative;
  transition:background 0.15s ease, color 0.15s ease;
}
.ft-btn svg{width:15px;height:15px;display:block;opacity:0.65;transition:opacity 0.15s;}
.ft-btn:hover{background:#f3f4f6;}
.ft-btn:hover svg{opacity:0.9;}
.ft-btn.active{background:#eff6ff;color:#2563eb;box-shadow:inset 0 0 0 1px rgba(37,99,235,0.15);}
.ft-btn.ft-bold{font-weight:800;font-size:15px;letter-spacing:-0.3px;}
.ft-btn.ft-italic{font-style:italic;font-family:Georgia,'Times New Roman',serif;font-size:15px;}
.ft-btn .caret{font-size:9px;margin-left:2px;color:#9ca3af;transition:color 0.15s;}
.ft-btn:hover .caret{color:#6b7280;}
.ft-sep{width:1px;height:18px;margin:0 3px;background:#e5e7eb;border-radius:1px;flex-shrink:0;}
.ft-btn.ft-danger{color:#6b7280;}
.ft-btn.ft-danger:hover{background:#fef2f2;color:#dc2626;}
.ft-btn.ft-danger:hover svg{opacity:1;}

.ft-panel{
  position:absolute;
  top:0;
  left:calc(100% + 8px);
  background:rgba(255,255,255,0.97);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid #e0e0e0;
  box-shadow:0 8px 28px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
  border-radius:12px;
  padding:6px;
  z-index:21;
  display:flex;
  flex-direction:column;
  min-width:120px;
  max-height:min(320px, 70vh);
  overflow-y:auto;
}
.ft-panel.flip-left{
  left:auto;
  right:calc(100% + 8px);
}
.ft-panel.flip-up{
  top:auto;
  bottom:0;
}
.ft-panel.hidden{display:none;}
.ft-panel button{
  border:none;background:none;text-align:left;
  padding:7px 10px;font-size:13px;font-weight:500;
  border-radius:8px;color:var(--black);
  font-family:var(--sans);
  transition:background 0.12s ease;
}
.ft-panel button:hover{background:#f3f4f6;}
.ft-swatches{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:6px;}
.ft-swatch{
  width:28px;height:28px;border-radius:50%;
  border:2px solid transparent;padding:0;
  transition:border-color 0.15s, transform 0.15s, box-shadow 0.15s;
  cursor:pointer;justify-self:center;
}
.ft-swatch:hover{transform:scale(1.15);box-shadow:0 2px 8px rgba(0,0,0,0.15);}
.ft-swatch.active{border-color:#2563eb;box-shadow:0 0 0 2px rgba(37,99,235,0.25);}
.ft-color-custom{
  width:28px;height:28px;padding:0;
  border:2px dashed #d1d5db;
  border-radius:50%;overflow:hidden;background:none;
  cursor:pointer;justify-self:center;
  transition:border-color 0.15s, transform 0.15s;
  position:relative;
}
.ft-color-custom:hover{border-color:#9ca3af;transform:scale(1.15);}
.ft-color-custom input[type=color]{
  width:36px;height:36px;margin:-4px;border:none;padding:0;cursor:pointer;
  position:absolute;top:0;left:0;
}
.ft-color-custom input[type=color]{
  width:28px;height:28px;margin:-4px;border:none;padding:0;cursor:pointer;
}

.statusbar{
  display:flex;
  justify-content:space-between;
  padding:8px 16px;
  border-top:1px solid var(--line);
  font-family:var(--mono);
  font-size:12px;
  color:var(--gray-600);
}
.status-msg{color:var(--black);}

.modal-backdrop{
  position:fixed;inset:0;
  background:rgba(10,10,10,0.55);
  backdrop-filter:blur(2px);
  display:flex;align-items:center;justify-content:center;
  z-index:50;
  animation:modal-backdrop-in .12s ease-out;
}
@keyframes modal-backdrop-in{from{opacity:0;}to{opacity:1;}}
.modal{
  background:var(--white);
  border:1px solid var(--gray-200);
  border-radius:14px;
  box-shadow:0 20px 48px rgba(10,10,10,0.22), 0 2px 6px rgba(10,10,10,0.08);
  padding:22px;
  width:340px;
  max-width:90vw;
  display:flex;
  flex-direction:column;
  gap:12px;
  animation:modal-in .14s cubic-bezier(.2,.9,.3,1.1);
}
@keyframes modal-in{from{opacity:0;transform:translateY(6px) scale(.98);}to{opacity:1;transform:none;}}
.modal h3{margin:0 0 4px;font-size:16px;font-weight:700;letter-spacing:-0.01em;}
.modal label{
  display:flex;
  flex-direction:column;
  gap:5px;
  font-size:12px;
  color:var(--gray-600);
}
.modal input[type=text],.modal input[type=number],.modal input[type=password]{
  border:1px solid var(--gray-200);
  border-radius:8px;
  padding:9px 11px;
  font-size:14px;
  color:var(--black);
  outline:none;
  transition:border-color .12s ease, box-shadow .12s ease;
}
.modal input[type=text]:focus,.modal input[type=number]:focus,.modal input[type=password]:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-tint);
}
.modal input[type=color]{width:100%;height:32px;border:1px solid var(--gray-200);border-radius:8px;padding:2px;}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:6px;}
.modal hr{border:none;border-top:1px solid var(--gray-200);margin:6px 0;width:100%;}

.modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:2px;
}
.modal-head h3{
  margin:0;
  display:flex;
  align-items:center;
  gap:8px;
}
.modal-head-ico{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:26px;height:26px;
  border-radius:7px;
  background:var(--accent-tint);
  color:var(--accent);
  flex:none;
}
.modal-head-ico svg{width:16px;height:16px;}
.modal-x{
  flex:none;
  width:26px;height:26px;
  display:flex;align-items:center;justify-content:center;
  border:none;
  background:none;
  border-radius:7px;
  color:var(--gray-400);
  cursor:pointer;
  transition:background 0.12s, color 0.12s;
}
.modal-x:hover{background:var(--gray-100);color:var(--black);}

@media (max-width: 720px){
  .thumb-rail{display:none;}
  .tool-btn .lbl{display:none;}
  .doc-name{display:none;}
}

/* ===== Shape floating toolbar panels ===== */
.ft-shape-panel{
  position:absolute;
  top:calc(100% + 6px);
  left:50%;
  transform:translateX(-50%);
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,0.12);
  padding:10px;
  z-index:100;
  min-width:160px;
}
.ft-shape-panel.hidden{display:none;}
.ft-shape-panel.ff-settings-panel{
  left:auto;
  right:0;
  transform:none;
  min-width:200px;
}
.ft-shape-panel.flip-up{
  top:auto;
  bottom:calc(100% + 6px);
}
.ft-shape-swatch-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:6px;
  padding:4px 0;
}
.ft-shape-swatch{
  width:32px;height:32px;
  border-radius:8px;
  border:2px solid transparent;
  cursor:pointer;
  transition:transform 0.12s ease, box-shadow 0.12s ease;
}
.ft-shape-swatch:hover{transform:scale(1.12);box-shadow:0 3px 10px rgba(0,0,0,0.16);}
.ft-shape-swatch.active{border-color:#2563eb;box-shadow:0 0 0 2px rgba(37,99,235,0.25);}
.ft-shape-no-fill{
  width:32px;height:32px;
  border-radius:8px;
  border:2px solid transparent;
  cursor:pointer;
  position:relative;
  background:#fff;
  transition:transform 0.12s ease;
}
.ft-shape-no-fill:hover{transform:scale(1.12);}
.ft-shape-no-fill.active{border-color:#2563eb;box-shadow:0 0 0 2px rgba(37,99,235,0.25);}
.ft-shape-no-fill::after{
  content:"";
  position:absolute;
  left:5px;right:5px;top:50%;
  height:2px;
  background:#dc2626;
  transform:rotate(-45deg);
  border-radius:1px;
}
/* ===== Rich color picker (Shapes stroke/fill, Forms border/text) ===== */
.ft-color-panel{
  min-width:236px;
  padding:8px;
}
.ft-color-grid{
  display:grid;
  grid-template-columns:repeat(10,1fr);
  gap:2px;
}
.ft-color-gray-row{
  margin-top:5px;
}
.ft-color-cell{
  width:20px;height:20px;
  border-radius:3px;
  cursor:pointer;
  border:1px solid rgba(0,0,0,0.06);
  transition:transform 0.1s ease, box-shadow 0.1s ease;
}
.ft-color-cell:hover{transform:scale(1.22);z-index:2;position:relative;box-shadow:0 2px 6px rgba(0,0,0,0.25);}
.ft-color-cell.selected{
  box-shadow:0 0 0 2px #fff, 0 0 0 3.5px #2563eb;
  transform:scale(1.1);
  position:relative;
  z-index:1;
}
.ft-color-none{
  width:20px;height:20px;
  border-radius:3px;
  cursor:pointer;
  position:relative;
  background:#fff;
  border:1px solid #e5e7eb;
  flex:none;
  transition:transform 0.1s ease;
}
.ft-color-none:hover{transform:scale(1.15);}
.ft-color-none.selected{box-shadow:0 0 0 2px #fff, 0 0 0 3.5px #2563eb;}
.ft-color-none::after{
  content:"";
  position:absolute;
  left:3px;right:3px;top:50%;
  height:2px;
  background:#dc2626;
  transform:rotate(-45deg);
  border-radius:1px;
}
.ft-color-footer{
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:8px;
  padding-top:8px;
  border-top:1px solid #eee;
}
.ft-color-footer-btn{
  width:24px;height:24px;
  flex:none;
  display:flex;align-items:center;justify-content:center;
  border:1px solid #e5e7eb;
  border-radius:6px;
  background:#fff;
  color:#6b7280;
  font-size:11px;
  font-family:var(--mono);
  cursor:pointer;
  transition:background 0.12s,color 0.12s;
}
.ft-color-footer-btn:hover{background:#f3f4f6;color:#111827;}
.ft-color-current{
  width:20px;height:20px;
  flex:none;
  border-radius:5px;
  border:1px solid #e5e7eb;
  background-image:linear-gradient(45deg,#eee 25%,transparent 25%),linear-gradient(-45deg,#eee 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#eee 75%),linear-gradient(-45deg,transparent 75%,#eee 75%);
  background-size:6px 6px;
  background-position:0 0,0 3px,3px -3px,-3px 0;
}
.ft-color-native-input{
  position:absolute;
  width:1px;height:1px;
  opacity:0;
  pointer-events:none;
}
.ft-color-hex-row{
  display:flex;
  gap:6px;
  margin-top:6px;
}
.ft-color-hex-row.hidden{display:none;}
.ft-color-hex-input{
  flex:1;
  min-width:0;
  height:26px;
  padding:0 8px;
  border:1px solid #e5e7eb;
  border-radius:6px;
  font-family:var(--mono);
  font-size:12px;
  text-transform:uppercase;
}
.ft-color-hex-input:focus{outline:none;border-color:#2563eb;}
.ft-color-hex-apply{
  flex:none;
  height:26px;
  padding:0 10px;
  border:none;
  border-radius:6px;
  background:#2563eb;
  color:#fff;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
}
.ft-color-hex-apply:hover{background:#1d4ed8;}

.ft-shape-width-opt{
  display:flex;align-items:center;justify-content:center;
  width:36px;height:30px;
  border-radius:6px;
  border:none;
  background:#f9fafb;
  cursor:pointer;
  transition:background 0.12s;
}
.ft-shape-width-opt:hover{background:#e5e7eb;}
.ft-shape-width-opt.active{background:#eff6ff;box-shadow:inset 0 0 0 1.5px #2563eb;}
.ft-shape-width-opt .bar{
  background:#1a1a1a;
  border-radius:2px;
}

/* Image overlay */
.image-overlay{
  position:absolute;
  top:0;left:0;
  width:100%;height:100%;
  pointer-events:none;
  z-index:22;
}
.img-el{
  position:absolute;
  box-sizing:border-box;
  pointer-events:all;
  cursor:move;
  outline:1.5px solid transparent;
  outline-offset:0;
  border-radius:2px;
  transition:outline-color .12s ease, box-shadow .12s ease;
  user-select:none;
}
.img-el:hover{outline:1.5px dashed rgba(37,99,235,.55);}
.img-el.selected{
  outline:2px solid #2563eb;
  box-shadow:0 0 0 4px rgba(37,99,235,.12);
  z-index:2;
}
.img-el.dragging{box-shadow:0 10px 28px -6px rgba(17,24,39,.35), 0 0 0 4px rgba(37,99,235,.14);}
.img-inner{
  position:absolute;
  left:50%;top:50%;
  pointer-events:none;
  transform-origin:center center;
}
.img-el img{
  display:block;
  width:100%;height:100%;
  object-fit:fill;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
}
.img-handle{
  position:absolute;
  box-sizing:border-box;
  width:12px;height:12px;
  background:#fff;
  border:2px solid #2563eb;
  border-radius:50%;
  box-shadow:0 1px 4px rgba(17,24,39,.28);
  z-index:5;
  pointer-events:all;
  transition:transform .1s ease, background .1s ease;
}
.img-handle:hover{background:#2563eb;transform:scale(1.25);}
.img-handle.tm,.img-handle.bm{width:20px;height:8px;border-radius:5px;}
.img-handle.ml,.img-handle.mr{width:8px;height:20px;border-radius:5px;}
.img-handle.tl{top:-7px;left:-7px;cursor:nwse-resize;}
.img-handle.tr{top:-7px;right:-7px;cursor:nesw-resize;}
.img-handle.bl{bottom:-7px;left:-7px;cursor:nesw-resize;}
.img-handle.br{bottom:-7px;right:-7px;cursor:nwse-resize;}
.img-handle.tm{top:-5px;left:50%;margin-left:-10px;cursor:ns-resize;}
.img-handle.bm{bottom:-5px;left:50%;margin-left:-10px;cursor:ns-resize;}
.img-handle.ml{top:50%;margin-top:-10px;left:-5px;cursor:ew-resize;}
.img-handle.mr{top:50%;margin-top:-10px;right:-5px;cursor:ew-resize;}
.img-handle.tm:hover,.img-handle.bm:hover,.img-handle.ml:hover,.img-handle.mr:hover{transform:none;}

.image-ghost{
  position:absolute;
  pointer-events:none;
  z-index:25;
  opacity:0.7;
  border:2px dashed #2563eb;
  border-radius:4px;
}
.image-ghost img{
  width:100%;height:100%;
  object-fit:contain;
  display:block;
}

/* Bundled fonts: same files the server draws edited text with (live preview = saved PDF) */
@font-face{font-family:'Liberation Sans';font-weight:400;font-style:normal;font-display:swap;src:url('/api/editor/font/LiberationSans-Regular.ttf') format('truetype');}
@font-face{font-family:'Liberation Sans';font-weight:700;font-style:normal;font-display:swap;src:url('/api/editor/font/LiberationSans-Bold.ttf') format('truetype');}
@font-face{font-family:'Liberation Sans';font-weight:400;font-style:italic;font-display:swap;src:url('/api/editor/font/LiberationSans-Italic.ttf') format('truetype');}
@font-face{font-family:'Liberation Sans';font-weight:700;font-style:italic;font-display:swap;src:url('/api/editor/font/LiberationSans-BoldItalic.ttf') format('truetype');}
@font-face{font-family:'Liberation Serif';font-weight:400;font-style:normal;font-display:swap;src:url('/api/editor/font/LiberationSerif-Regular.ttf') format('truetype');}
@font-face{font-family:'Liberation Serif';font-weight:700;font-style:normal;font-display:swap;src:url('/api/editor/font/LiberationSerif-Bold.ttf') format('truetype');}
@font-face{font-family:'Liberation Serif';font-weight:400;font-style:italic;font-display:swap;src:url('/api/editor/font/LiberationSerif-Italic.ttf') format('truetype');}
@font-face{font-family:'Liberation Serif';font-weight:700;font-style:italic;font-display:swap;src:url('/api/editor/font/LiberationSerif-BoldItalic.ttf') format('truetype');}
@font-face{font-family:'Liberation Mono';font-weight:400;font-style:normal;font-display:swap;src:url('/api/editor/font/LiberationMono-Regular.ttf') format('truetype');}
@font-face{font-family:'Liberation Mono';font-weight:700;font-style:normal;font-display:swap;src:url('/api/editor/font/LiberationMono-Bold.ttf') format('truetype');}
@font-face{font-family:'Liberation Mono';font-weight:400;font-style:italic;font-display:swap;src:url('/api/editor/font/LiberationMono-Italic.ttf') format('truetype');}
@font-face{font-family:'Liberation Mono';font-weight:700;font-style:italic;font-display:swap;src:url('/api/editor/font/LiberationMono-BoldItalic.ttf') format('truetype');}
@font-face{font-family:'Carlito';font-weight:400;font-style:normal;font-display:swap;src:url('/api/editor/font/Carlito-Regular.ttf') format('truetype');}
@font-face{font-family:'Carlito';font-weight:700;font-style:normal;font-display:swap;src:url('/api/editor/font/Carlito-Bold.ttf') format('truetype');}
@font-face{font-family:'Carlito';font-weight:400;font-style:italic;font-display:swap;src:url('/api/editor/font/Carlito-Italic.ttf') format('truetype');}
@font-face{font-family:'Carlito';font-weight:700;font-style:italic;font-display:swap;src:url('/api/editor/font/Carlito-BoldItalic.ttf') format('truetype');}
@font-face{font-family:'Caladea';font-weight:400;font-style:normal;font-display:swap;src:url('/api/editor/font/Caladea-Regular.ttf') format('truetype');}
@font-face{font-family:'Caladea';font-weight:700;font-style:normal;font-display:swap;src:url('/api/editor/font/Caladea-Bold.ttf') format('truetype');}
@font-face{font-family:'Caladea';font-weight:400;font-style:italic;font-display:swap;src:url('/api/editor/font/Caladea-Italic.ttf') format('truetype');}
@font-face{font-family:'Caladea';font-weight:700;font-style:italic;font-display:swap;src:url('/api/editor/font/Caladea-BoldItalic.ttf') format('truetype');}
@font-face{font-family:'Noto Sans';font-weight:400;font-style:normal;font-display:swap;src:url('/api/editor/font/NotoSans-Regular.ttf') format('truetype');}
@font-face{font-family:'Noto Sans';font-weight:700;font-style:normal;font-display:swap;src:url('/api/editor/font/NotoSans-Bold.ttf') format('truetype');}
@font-face{font-family:'Noto Sans';font-weight:400;font-style:italic;font-display:swap;src:url('/api/editor/font/NotoSans-Italic.ttf') format('truetype');}
@font-face{font-family:'Noto Sans';font-weight:700;font-style:italic;font-display:swap;src:url('/api/editor/font/NotoSans-BoldItalic.ttf') format('truetype');}
@font-face{font-family:'Noto Serif';font-weight:400;font-style:normal;font-display:swap;src:url('/api/editor/font/NotoSerif-Regular.ttf') format('truetype');}
@font-face{font-family:'Noto Serif';font-weight:700;font-style:normal;font-display:swap;src:url('/api/editor/font/NotoSerif-Bold.ttf') format('truetype');}
@font-face{font-family:'Noto Serif';font-weight:400;font-style:italic;font-display:swap;src:url('/api/editor/font/NotoSerif-Italic.ttf') format('truetype');}
@font-face{font-family:'Noto Serif';font-weight:700;font-style:italic;font-display:swap;src:url('/api/editor/font/NotoSerif-BoldItalic.ttf') format('truetype');}
@font-face{font-family:'Noto Sans Bengali';font-weight:400;font-display:swap;src:url('/api/editor/font/NotoSansBengali-Regular.ttf') format('truetype');}
@font-face{font-family:'Noto Sans Bengali';font-weight:700;font-display:swap;src:url('/api/editor/font/NotoSansBengali-Bold.ttf') format('truetype');}
@font-face{font-family:'Noto Serif Bengali';font-weight:400;font-display:swap;src:url('/api/editor/font/NotoSerifBengali-Regular.ttf') format('truetype');}
@font-face{font-family:'Noto Serif Bengali';font-weight:700;font-display:swap;src:url('/api/editor/font/NotoSerifBengali-Bold.ttf') format('truetype');}
/* Script fonts for the live preview -- same files the server draws with (see SCRIPT_FONTS in fontkit.py). */
@font-face{font-family:'Noto Sans Devanagari';font-weight:400;font-display:swap;src:url('/api/editor/font/NotoSansDevanagari-Regular.ttf') format('truetype');}
@font-face{font-family:'Noto Sans Devanagari';font-weight:700;font-display:swap;src:url('/api/editor/font/NotoSansDevanagari-Bold.ttf') format('truetype');}
@font-face{font-family:'Noto Sans Gurmukhi';font-weight:400;font-display:swap;src:url('/api/editor/font/NotoSansGurmukhi-Regular.ttf') format('truetype');}
@font-face{font-family:'Noto Sans Gurmukhi';font-weight:700;font-display:swap;src:url('/api/editor/font/NotoSansGurmukhi-Bold.ttf') format('truetype');}
@font-face{font-family:'Noto Sans Gujarati';font-weight:400;font-display:swap;src:url('/api/editor/font/NotoSansGujarati-Regular.ttf') format('truetype');}
@font-face{font-family:'Noto Sans Gujarati';font-weight:700;font-display:swap;src:url('/api/editor/font/NotoSansGujarati-Bold.ttf') format('truetype');}
@font-face{font-family:'Noto Sans Oriya';font-weight:400;font-display:swap;src:url('/api/editor/font/NotoSansOriya-Regular.ttf') format('truetype');}
@font-face{font-family:'Noto Sans Oriya';font-weight:700;font-display:swap;src:url('/api/editor/font/NotoSansOriya-Bold.ttf') format('truetype');}
@font-face{font-family:'Noto Sans Tamil';font-weight:400;font-display:swap;src:url('/api/editor/font/NotoSansTamil-Regular.ttf') format('truetype');}
@font-face{font-family:'Noto Sans Tamil';font-weight:700;font-display:swap;src:url('/api/editor/font/NotoSansTamil-Bold.ttf') format('truetype');}
@font-face{font-family:'Noto Sans Telugu';font-weight:400;font-display:swap;src:url('/api/editor/font/NotoSansTelugu-Regular.ttf') format('truetype');}
@font-face{font-family:'Noto Sans Telugu';font-weight:700;font-display:swap;src:url('/api/editor/font/NotoSansTelugu-Bold.ttf') format('truetype');}
@font-face{font-family:'Noto Sans Kannada';font-weight:400;font-display:swap;src:url('/api/editor/font/NotoSansKannada-Regular.ttf') format('truetype');}
@font-face{font-family:'Noto Sans Kannada';font-weight:700;font-display:swap;src:url('/api/editor/font/NotoSansKannada-Bold.ttf') format('truetype');}
@font-face{font-family:'Noto Sans Malayalam';font-weight:400;font-display:swap;src:url('/api/editor/font/NotoSansMalayalam-Regular.ttf') format('truetype');}
@font-face{font-family:'Noto Sans Malayalam';font-weight:700;font-display:swap;src:url('/api/editor/font/NotoSansMalayalam-Bold.ttf') format('truetype');}
@font-face{font-family:'Noto Sans Sinhala';font-weight:400;font-display:swap;src:url('/api/editor/font/NotoSansSinhala-Regular.ttf') format('truetype');}
@font-face{font-family:'Noto Sans Sinhala';font-weight:700;font-display:swap;src:url('/api/editor/font/NotoSansSinhala-Bold.ttf') format('truetype');}
@font-face{font-family:'Noto Sans Thai';font-weight:400;font-display:swap;src:url('/api/editor/font/NotoSansThai-Regular.ttf') format('truetype');}
@font-face{font-family:'Noto Sans Thai';font-weight:700;font-display:swap;src:url('/api/editor/font/NotoSansThai-Bold.ttf') format('truetype');}
@font-face{font-family:'Noto Sans Lao';font-weight:400;font-display:swap;src:url('/api/editor/font/NotoSansLao-Regular.ttf') format('truetype');}
@font-face{font-family:'Noto Sans Lao';font-weight:700;font-display:swap;src:url('/api/editor/font/NotoSansLao-Bold.ttf') format('truetype');}
@font-face{font-family:'Noto Sans Myanmar';font-weight:400;font-display:swap;src:url('/api/editor/font/NotoSansMyanmar-Regular.ttf') format('truetype');}
@font-face{font-family:'Noto Sans Myanmar';font-weight:700;font-display:swap;src:url('/api/editor/font/NotoSansMyanmar-Bold.ttf') format('truetype');}
@font-face{font-family:'Noto Sans Khmer';font-weight:400;font-display:swap;src:url('/api/editor/font/NotoSansKhmer-Regular.ttf') format('truetype');}
@font-face{font-family:'Noto Sans Khmer';font-weight:700;font-display:swap;src:url('/api/editor/font/NotoSansKhmer-Bold.ttf') format('truetype');}
@font-face{font-family:'Noto Sans Georgian';font-weight:400;font-display:swap;src:url('/api/editor/font/NotoSansGeorgian-Regular.ttf') format('truetype');}
@font-face{font-family:'Noto Sans Georgian';font-weight:700;font-display:swap;src:url('/api/editor/font/NotoSansGeorgian-Bold.ttf') format('truetype');}
@font-face{font-family:'Noto Sans Armenian';font-weight:400;font-display:swap;src:url('/api/editor/font/NotoSansArmenian-Regular.ttf') format('truetype');}
@font-face{font-family:'Noto Sans Armenian';font-weight:700;font-display:swap;src:url('/api/editor/font/NotoSansArmenian-Bold.ttf') format('truetype');}
@font-face{font-family:'Noto Sans Hebrew';font-weight:400;font-display:swap;src:url('/api/editor/font/NotoSansHebrew-Regular.ttf') format('truetype');}
@font-face{font-family:'Noto Sans Hebrew';font-weight:700;font-display:swap;src:url('/api/editor/font/NotoSansHebrew-Bold.ttf') format('truetype');}
@font-face{font-family:'Noto Sans Ethiopic';font-weight:400;font-display:swap;src:url('/api/editor/font/NotoSansEthiopic-Regular.ttf') format('truetype');}
@font-face{font-family:'Noto Sans Ethiopic';font-weight:700;font-display:swap;src:url('/api/editor/font/NotoSansEthiopic-Bold.ttf') format('truetype');}
@font-face{font-family:'Noto Sans Arabic';font-weight:400;font-display:swap;src:url('/api/editor/font/NotoSansArabic-Regular.ttf') format('truetype');}
@font-face{font-family:'Noto Sans Arabic';font-weight:700;font-display:swap;src:url('/api/editor/font/NotoSansArabic-Bold.ttf') format('truetype');}

/* =========================================================================
   Text editing toolbar  (click-to-edit a line  /  "Add line")
   Built by createTextToolbar() in pdf-editor.js.
   Prefixed with #editorScreen so these win over the page's inline resets.
   The colour popover is intentionally NOT restyled: it is the exact same
   .ft-shape-panel.ft-color-panel grid the Shapes toolbar uses.
   ========================================================================= */
#editorScreen .float-toolbar.ft-text-toolbar{
  gap:2px;
  padding:5px 6px;
  border:1px solid rgba(17,24,39,0.08);
  border-radius:14px;
  background:rgba(255,255,255,0.98);
  box-shadow:0 12px 32px -8px rgba(17,24,39,0.22), 0 2px 8px rgba(17,24,39,0.06);
  white-space:nowrap;
  animation:ftToolbarIn .14s ease-out;
}
@keyframes ftToolbarIn{
  from{opacity:0;transform:translateY(4px) scale(0.98);}
  to{opacity:1;transform:none;}
}
#editorScreen .ft-text-toolbar .ft-btn{
  height:32px;
  min-width:32px;
  padding:0 8px;
  border-radius:9px;
  color:#374151;
  cursor:pointer;
  transition:background .14s ease, color .14s ease, box-shadow .14s ease, transform .08s ease;
}
#editorScreen .ft-text-toolbar .ft-btn:hover{background:#f3f4f6;color:#111827;}
#editorScreen .ft-text-toolbar .ft-btn:active{transform:scale(0.94);}
#editorScreen .ft-text-toolbar .ft-btn:focus-visible{outline:2px solid #93c5fd;outline-offset:1px;}
#editorScreen .ft-text-toolbar .ft-btn.active{
  background:#eff6ff;
  color:#2563eb;
  box-shadow:inset 0 0 0 1px rgba(37,99,235,0.30);
}
#editorScreen .ft-text-toolbar .ft-btn.open{
  background:#f3f4f6;
  box-shadow:inset 0 0 0 1px #e5e7eb;
}
#editorScreen .ft-text-toolbar .ft-btn.ft-danger:hover{background:#fef2f2;color:#dc2626;}
#editorScreen .ft-text-toolbar .ft-btn.ft-move{cursor:grab;}
#editorScreen .ft-text-toolbar .ft-btn.ft-move:active{cursor:grabbing;}
#editorScreen .ft-text-toolbar .ft-btn svg{width:16px;height:16px;opacity:0.7;}
#editorScreen .ft-text-toolbar .ft-btn:hover svg{opacity:1;}
#editorScreen .ft-text-toolbar .ft-sep{height:20px;margin:0 4px;background:#e5e7eb;}

.ft-dd{position:relative;display:flex;}

/* size button: current value + caret */
#editorScreen .ft-text-toolbar .ft-btn-size{
  min-width:54px;
  gap:5px;
  font-size:13px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
}
#editorScreen .ft-text-toolbar .ft-btn svg.ft-caret{
  width:10px;
  height:10px;
  opacity:0.45;
  transition:transform .15s ease, opacity .15s ease;
}
#editorScreen .ft-text-toolbar .ft-btn.open svg.ft-caret{transform:rotate(180deg);opacity:0.8;}

/* color button: "A" with the current color underneath */
#editorScreen .ft-text-toolbar .ft-btn-color{gap:5px;}
.ft-color-a{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  font-size:15px;
  font-weight:800;
  line-height:1;
}
.ft-color-bar{
  display:block;
  width:16px;
  height:4px;
  border-radius:2px;
  background:#000;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,0.16);
}

/* font-size popover (same chrome as the Shapes panels) */
.ft-size-panel{min-width:184px;padding:10px;}
.ft-size-head{display:flex;align-items:center;gap:6px;margin-bottom:8px;}
.ft-step{
  flex:none;
  width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid #e5e7eb;
  border-radius:9px;
  background:#fff;
  color:#374151;
  font-size:18px;
  line-height:1;
  cursor:pointer;
  transition:background .12s ease, border-color .12s ease, transform .08s ease;
}
.ft-step:hover{background:#f3f4f6;border-color:#d1d5db;}
.ft-step:active{transform:scale(0.92);}
.ft-size-input{
  flex:1;
  width:0;
  min-width:0;
  height:32px;
  padding:0 6px;
  text-align:center;
  border:1px solid #e5e7eb;
  border-radius:9px;
  background:#fff;
  color:#111827;
  font-size:14px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
}
.ft-size-input:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,0.12);}
.ft-size-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;}
.ft-size-opt{
  height:30px;
  border:none;
  border-radius:8px;
  background:#f9fafb;
  color:#374151;
  font-size:12.5px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
  cursor:pointer;
  transition:background .12s ease, color .12s ease;
}
.ft-size-opt:hover{background:#e5e7eb;}
.ft-size-opt.active{background:#eff6ff;color:#2563eb;box-shadow:inset 0 0 0 1.5px #2563eb;}

/* text alignment popover (left / center / right) */
.ft-btn-align{display:flex;align-items:center;gap:2px;}
.ft-btn-align .ft-align-ico{display:flex;align-items:center;justify-content:center;}
.ft-btn-align .ft-align-ico svg{width:16px;height:16px;opacity:.85;}
.ft-align-panel{
  display:flex;gap:4px;
  min-width:0;
  padding:6px;
}
.ft-align-panel.hidden{display:none;}
.ft-align-opt{
  width:36px;height:34px;
  display:flex;align-items:center;justify-content:center;
  border:none;
  border-radius:8px;
  background:#f9fafb;
  color:#374151;
  cursor:pointer;
  transition:background .12s ease, color .12s ease;
}
.ft-align-opt svg{width:17px;height:17px;}
.ft-align-opt:hover{background:#e5e7eb;}
.ft-align-opt.active{background:#eff6ff;color:#2563eb;box-shadow:inset 0 0 0 1.5px #2563eb;}

@media (prefers-reduced-motion:reduce){
  #editorScreen .float-toolbar.ft-text-toolbar{animation:none;}
}


/* =========================================================================
   Unified floating toolbars  (Image, Sign, Shape, Form field, Text)
   One look for every object toolbar: soft white pill, icon buttons, labelled
   tooltips, live colour swatches.
   ========================================================================= */

/* THE image-toolbar fix: .image-overlay is pointer-events:none (so clicks
   reach the page underneath) and pointer-events is inherited -- the toolbar
   must opt back in or none of its buttons can ever be clicked. */
.image-overlay .float-toolbar{pointer-events:auto;}

#editorScreen .float-toolbar{
  gap:2px;
  padding:5px 6px;
  width:max-content;
  max-width:none;
  border:1px solid rgba(17,24,39,0.08);
  border-radius:14px;
  background:rgba(255,255,255,0.98);
  box-shadow:0 14px 34px -10px rgba(17,24,39,0.28), 0 2px 8px rgba(17,24,39,0.07);
  white-space:nowrap;
  animation:ftToolbarIn .14s ease-out;
}
#editorScreen .float-toolbar .ft-btn{
  height:32px;
  min-width:32px;
  padding:0 8px;
  border-radius:9px;
  color:#374151;
  cursor:pointer;
  transition:background .14s ease, color .14s ease, box-shadow .14s ease, transform .08s ease;
}
#editorScreen .float-toolbar .ft-btn:hover{background:#f3f4f6;color:#111827;}
#editorScreen .float-toolbar .ft-btn:active{transform:scale(0.93);}
#editorScreen .float-toolbar .ft-btn:focus-visible{outline:2px solid #93c5fd;outline-offset:1px;}
#editorScreen .float-toolbar .ft-btn.active{background:#eff6ff;color:#2563eb;box-shadow:inset 0 0 0 1px rgba(37,99,235,0.30);}
#editorScreen .float-toolbar .ft-btn.ft-danger:hover{background:#fef2f2;color:#dc2626;}
#editorScreen .float-toolbar .ft-btn svg{width:16px;height:16px;opacity:0.72;}
#editorScreen .float-toolbar .ft-btn:hover svg{opacity:1;}
#editorScreen .float-toolbar .ft-sep{height:20px;margin:0 4px;background:#e5e7eb;}
#editorScreen .float-toolbar .ft-btn .caret{font-size:9px;margin-left:1px;color:#9ca3af;}

/* size read-out between the - and + buttons */
#editorScreen .float-toolbar .ft-btn.ft-pct{
  min-width:50px;
  font-size:12.5px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  color:#2563eb;
  background:#eff6ff;
}
#editorScreen .float-toolbar .ft-btn.ft-pct:hover{background:#dbeafe;color:#1d4ed8;}

/* icon + live colour bar (stroke / fill / text colour buttons) */
.ft-ico-stack{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  line-height:1;
  pointer-events:none;
}
.ft-ico-stack svg{width:15px !important;height:15px !important;}
.ft-ico-stack .ft-color-bar{width:16px;height:3.5px;border-radius:2px;}
.ft-color-bar.is-none{
  background:repeating-linear-gradient(135deg,#fff 0 3px,#ef4444 3px 4.5px) !important;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,0.18);
}
#editorScreen .float-toolbar .ft-btn .ft-btn-label{font-size:12px;font-weight:600;pointer-events:none;}

@media (prefers-reduced-motion:reduce){
  #editorScreen .float-toolbar{animation:none;}
}

/* ===== Forms menu: symbols grid, marks, field toolbar, tab-order dialog ===== */
#editorScreen .tb-dd-symgrid { grid-template-columns: repeat(4, 1fr); }
#editorScreen .tb-dd-field-ico svg.ico-solid { fill: currentColor; stroke: none; }
.stamp-box.is-mark:hover { border:1.5px dashed var(--accent); }
.stamp-box.selected {
  border:1.5px solid var(--accent);
  background:var(--accent-tint);
  box-shadow:0 0 0 3px rgba(37,99,235,.14);
}
.stamp-box.selected .stamp-remove-btn { opacity:1; transform:scale(1); }
.ft-size-presets { display:grid; grid-template-columns:repeat(4,1fr); gap:4px; }
.ft-size-preset, .ff-opt {
  padding:4px 6px; border:1px solid #d1d5db; border-radius:6px; background:#fff;
  font-size:11px; cursor:pointer; color:#374151;
}
.ft-size-preset:hover, .ff-opt:hover { background:#f3f4f6; }
.ff-opt.active { background:#eff6ff; border-color:#93c5fd; color:#1d4ed8; }
.ff-size-grid { grid-template-columns:repeat(5,1fr) !important; gap:4px; }
.ff-align-row { display:flex; gap:4px; }
.form-field-overlay-svg .ff-el.is-existing { cursor:move; }
.form-field-overlay-svg .ff-el.selected rect:first-of-type,
.form-field-overlay-svg .ff-el.selected ellipse:first-of-type { stroke-dasharray:none; filter:drop-shadow(0 0 2px rgba(37,99,235,.55)); }
.form-field-overlay-svg .ff-el.selected { opacity:1; }
.ft-ff-toolbar .ft-dd { position:relative; display:flex; }
.to-hint { margin:0 0 10px; color:#6b7280; font-size:13px; }
.to-list { list-style:none; margin:0 0 6px; padding:0; max-height:50vh; overflow:auto; display:flex; flex-direction:column; gap:6px; }
.to-row { display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid #e5e7eb; border-radius:10px; background:#fff; }
.to-num { width:22px; height:22px; border-radius:50%; background:#eff6ff; color:#1d4ed8; font-size:12px; font-weight:600; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.to-ico { width:18px; height:18px; color:#6b7280; flex-shrink:0; }
.to-ico svg { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.6; }
.to-name { flex:1; min-width:0; font-size:13px; font-weight:500; color:#111827; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.to-name small { display:block; font-size:11px; font-weight:400; color:#9ca3af; }
.to-btn { width:28px; height:28px; border:1px solid #e5e7eb; border-radius:8px; background:#fff; cursor:pointer; font-size:14px; }
.to-btn:hover:not(:disabled) { background:#f3f4f6; }
.to-btn:disabled { opacity:.35; cursor:default; }
.form-field-overlay-svg.tool-inactive .ff-el,
.form-field-overlay-svg.tool-inactive .ff-sel-handle { pointer-events:none; }

/* ===== Signature fonts (self-hosted, used by the Type tab) ===== */
@font-face{font-family:'Dancing Script';font-style:normal;font-weight:600;font-display:swap;src:url('../../fonts/dancing-script-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'Great Vibes';font-style:normal;font-weight:400;font-display:swap;src:url('../../fonts/great-vibes-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Caveat';font-style:normal;font-weight:600;font-display:swap;src:url('../../fonts/caveat-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'Allura';font-style:normal;font-weight:400;font-display:swap;src:url('../../fonts/allura-latin-400-normal.woff2') format('woff2');}

/* ===== Signature dialog (Draw / Type / Upload) ===== */
#signatureModal.modal-wide{width:min(580px,94vw);}
.sig-saved{display:flex;align-items:center;gap:12px;padding:10px 12px;margin:2px 0 12px;border:1px solid var(--gray-200);border-radius:10px;background:#f8fafc;}
.sig-saved.hidden{display:none;}
.sig-saved img{height:44px;max-width:160px;object-fit:contain;background:#fff;border:1px solid var(--gray-200);border-radius:6px;padding:2px 6px;}
.sig-saved-txt{flex:1;font-size:12.5px;color:var(--gray-600);line-height:1.35;}
.sig-saved-txt strong{display:block;color:var(--black);font-size:13px;}
.sig-saved .btn{padding:7px 12px;font-size:13px;}
.sig-ink-row{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:12px;color:var(--gray-600);}
.sig-ink{width:22px;height:22px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--gray-300,#d1d5db);cursor:pointer;padding:0;}
.sig-ink.active{box-shadow:0 0 0 2px var(--accent);}
.sig-ink-row .sig-spacer{flex:1;}
#sigCanvas{border:1px solid var(--gray-200);background:
  linear-gradient(to bottom,transparent calc(100% - 46px),#cbd5e1 calc(100% - 46px),#cbd5e1 calc(100% - 45px),transparent calc(100% - 45px)),#fff;}
.sig-x{position:absolute;left:14px;bottom:50px;font-size:16px;color:#94a3b8;pointer-events:none;font-family:Georgia,serif;}
.sig-canvas-wrap{position:relative;}
.sig-fonts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:2px;}
.sig-font-card{border:1.5px solid var(--gray-200);border-radius:10px;background:#fff;padding:6px 10px;min-height:64px;display:flex;align-items:center;justify-content:center;font-size:30px;line-height:1.2;color:var(--black);cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.sig-font-card:hover{border-color:var(--gray-400);}
.sig-font-card.active{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint);}
.sig-upload{border:1.5px dashed var(--gray-400);border-radius:10px;min-height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:14px;cursor:pointer;background:#fafafa;color:var(--gray-600);font-size:13px;}
.sig-upload:hover,.sig-upload.drag{border-color:var(--accent);background:var(--accent-tint);}
.sig-upload img{max-width:100%;max-height:110px;object-fit:contain;}
.sig-upload strong{color:var(--black);font-size:14px;}
#signatureModal .sig-check{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:8px;width:100%;text-align:left;font-size:13px;font-weight:400;color:var(--gray-600);margin:12px 0 4px;cursor:pointer;}
#signatureModal .sig-check input{width:15px;height:15px;flex:none;margin:0;}

/* Signature box on the page (Forms > Signature box) */
.form-field-overlay-svg .ff-sign-cta{cursor:pointer;}
.form-field-overlay-svg .ff-sign-cta:hover rect{fill:#1558c0;}

/* ---- Font picker (text toolbar) ------------------------------------------------------------------------- */
.ft-btn-font { min-width: 92px; max-width: 150px; justify-content: space-between; gap: 6px; }
.ft-btn-font .ft-font-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 600; }
.ft-font-panel { width: 272px; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.ft-font-panel.hidden { display: none; }
.ft-font-search { width: 100%; box-sizing: border-box; padding: 7px 9px; border: 1px solid var(--border, #d6dae1); border-radius: 8px; font: inherit; font-size: 13px; background: var(--bg, #fff); color: inherit; }
.ft-font-chips { display: flex; flex-wrap: wrap; gap: 4px; max-height: 64px; overflow-y: auto; }
.ft-font-chip { border: 1px solid var(--border, #d6dae1); background: transparent; color: inherit; border-radius: 999px; padding: 2px 9px; font-size: 11.5px; cursor: pointer; line-height: 1.6; }
.ft-font-chip.active { background: #1a73e8; border-color: #1a73e8; color: #fff; }
.ft-font-list { max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; border-top: 1px solid var(--border, #e5e8ee); padding-top: 4px; }
.ft-font-opt { display: flex; justify-content: space-between; align-items: center; gap: 8px; text-align: left; border: 0; background: transparent; color: inherit; padding: 6px 8px; border-radius: 6px; font-size: 13px; cursor: pointer; }
.ft-font-opt:hover { background: rgba(26,115,232,.10); }
.ft-font-opt.active { background: rgba(26,115,232,.16); font-weight: 600; }
.ft-font-opt em { font-style: normal; font-size: 10.5px; opacity: .6; }
.ft-font-empty { padding: 10px; font-size: 12.5px; opacity: .7; text-align: center; }