/* OpenFill — free PDF editor
   Design: warm paper background, ink text, green "go" accent.
   Everything has a visible label. Big targets. No jargon. */

:root{
  --paper:#f5f3ee;
  --ink:#1f2427;
  --muted:#6b7280;
  --accent:#1f7a53;       /* trustworthy green */
  --accent-hi:#27995f;
  --card:#ffffff;
  --line:#e2ded4;
  --sel:#2563eb;
  --shadow:0 2px 10px rgba(31,36,39,.08);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,sans-serif;
  display:flex;flex-direction:column;
}

/* ---------------- top bar ---------------- */
#topbar{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:1.1rem;flex-wrap:nowrap;overflow-x:auto;
  padding:.6rem 1.25rem;
  background:var(--card);
  border-bottom:1px solid var(--line);
  box-shadow:var(--shadow);
}
.brand{
  display:flex;align-items:center;gap:.55rem;flex:0 0 auto;
  font-size:1.5rem;font-weight:700;letter-spacing:-.015em;white-space:nowrap;
}
.brand-word{font-weight:700}
.brand b{color:var(--accent);font-weight:800}
.brand-mark{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:10px;
  background:linear-gradient(135deg,var(--accent),var(--accent-hi));
  color:#fff;font-size:1.2rem;box-shadow:0 3px 8px rgba(31,122,83,.35);
}

.toolbar{display:flex;align-items:center;gap:.9rem;flex-wrap:nowrap;flex:1;justify-content:flex-end}

/* ---------------- fixed sidebar (2-column tool palette) ---------------- */
#sidebar{
  position:fixed;left:0;bottom:0;z-index:40;width:204px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:.2rem;align-content:start;
  padding:.35rem .35rem .6rem;overflow-y:auto;
  background:var(--card);border-right:1px solid var(--line);
  box-shadow:2px 0 10px rgba(31,36,39,.05);
}
.sgroup{
  grid-column:1 / -1;font-size:.6rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;color:var(--muted);padding:.4rem .15rem .05rem;
}
.sgroup:first-child{padding-top:.15rem}
.sbtn{                                   /* borderless app-grid tile */
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:2px;
  padding:.32rem .1rem;min-height:48px;
  background:transparent;border:none;border-radius:10px;
  cursor:pointer;color:var(--ink);transition:background .12s,color .12s,transform .08s;
}
.sbtn:hover{background:#eef4f0}
.sbtn:active{transform:translateY(1px)}
.sbtn.active{background:#e7f3ec;color:var(--accent)}
.sbtn .ic{font-size:1.42rem;line-height:1}
.sbtn .lb{font-size:.63rem;font-weight:600;line-height:1.05;text-align:center;white-space:normal}
.sbtn-accent{color:var(--accent);background:#eaf5ef}   /* Date: gently emphasized */
.sbtn-accent .lb{font-weight:800}
/* tool clusters — borderless, no surrounding rectangle */
.tgroup{display:flex;align-items:center;gap:.15rem}
.tsep{display:none}

/* ---------------- per-PDF bar (fixed under the top bar) ---------------- */
#docbar{
  position:fixed;top:60px;left:208px;right:0;z-index:45;
  display:flex;align-items:center;gap:.7rem;
  padding:.4rem .95rem;background:var(--card);
  border-bottom:1px solid var(--line);box-shadow:0 2px 10px rgba(31,36,39,.06);
  font-size:.82rem;
}
.db-file{display:flex;align-items:center;gap:.5rem;min-width:0}
.db-name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px}
.db-count{color:var(--muted);font-size:.72rem}
/* floating arrows to switch between open PDFs */
.doc-arrow{
  position:fixed;top:50%;transform:translateY(-50%);z-index:44;
  width:42px;height:60px;border:none;border-radius:12px;
  background:rgba(31,36,39,.5);color:#fff;font-size:1.7rem;line-height:1;cursor:pointer;
  align-items:center;justify-content:center;box-shadow:0 3px 12px rgba(0,0,0,.25);
}
.doc-arrow:hover{background:rgba(31,36,39,.82)}
.doc-arrow-left{left:224px}
.doc-arrow-right{right:14px}
.db-page{color:var(--muted);font-size:.76rem;white-space:nowrap}
.db-tools{display:flex;align-items:center;gap:.4rem;margin-left:auto}
.db-btn{border:1px solid var(--line);background:var(--card);border-radius:7px;min-width:28px;height:28px;padding:0 .45rem;cursor:pointer;font-size:.95rem;line-height:1;color:var(--ink)}
.db-btn:hover{background:#f0ede5}
#docbar #zoomLabel{min-width:46px;text-align:center;color:var(--muted)}
.db-cancel{border:1px solid var(--line);background:#eceae4;color:var(--ink);border-radius:8px;padding:.38rem .75rem;cursor:pointer;font-size:.8rem;font-weight:600;white-space:nowrap}
.db-cancel:hover{background:#e2ded4}
.db-download{border:none;background:var(--accent);color:#fff;border-radius:8px;padding:.42rem .85rem;cursor:pointer;font-size:.8rem;font-weight:700;white-space:nowrap;box-shadow:0 3px 10px rgba(31,122,83,.3)}
.db-download:hover{background:var(--accent-hi)}
/* text-style controls, now living inside the per-PDF bar (per-document) */
.db-save{border:1px solid var(--accent);background:#eaf5ef;color:var(--accent);border-radius:8px;padding:.4rem .7rem;cursor:pointer;font-size:.8rem;font-weight:700;white-space:nowrap;margin-right:.3rem}
.db-save:hover:not(:disabled){background:#dcefe4}
.db-save:disabled{border-color:var(--line);background:var(--paper);color:var(--muted);cursor:default;opacity:.7}
.db-text{display:flex;align-items:center;gap:.3rem;padding-right:.5rem;margin-right:.25rem;border-right:1px solid var(--line)}
.db-text #colorPick{width:26px;height:26px;padding:0;border:1px solid var(--line);border-radius:6px;background:none;cursor:pointer}
.db-text #fontPick{font-size:.78rem;padding:.28rem .3rem;border:1px solid var(--line);border-radius:6px;background:var(--card);color:var(--ink);max-width:140px}
.db-text #sizePick{width:48px;font-size:.78rem;padding:.28rem .3rem;border:1px solid var(--line);border-radius:6px;background:var(--card);color:var(--ink)}
.db-mini{width:27px;height:27px;border:1px solid var(--line);border-radius:6px;background:var(--card);color:var(--ink);cursor:pointer;font-size:.85rem;line-height:1}
.db-mini:hover{background:#f0ede5}
.db-mini.active{background:#e7f3ec;border-color:var(--accent);color:var(--accent)}

.tbtn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:56px;padding:.35rem .5rem;
  background:transparent;border:1px solid transparent;border-radius:10px;
  cursor:pointer;color:var(--ink);
  transition:background .15s,border-color .15s;
}
.tbtn:hover{background:#f0ede5}
.tbtn.active{background:#e7f3ec;border-color:var(--accent);color:var(--accent)}
.tbtn .ic{font-size:1.15rem;line-height:1.2}
.tbtn .lb{font-size:.62rem;letter-spacing:.02em;color:inherit;margin-top:1px}
.tbtn.mini{min-width:34px;padding:.3rem;font-size:1.05rem;font-weight:700}

#zoomLabel{font-size:.75rem;min-width:44px;text-align:center;color:var(--muted)}

#colorPick{
  width:34px;height:34px;border:1px solid var(--line);border-radius:8px;
  background:var(--card);cursor:pointer;padding:2px;
}
#sizePick{
  height:34px;width:56px;border:1px solid var(--line);border-radius:8px;
  background:var(--card);padding:0 .4rem;font-size:.8rem;
}
#fontPick,#markStyle{
  height:34px;border:1px solid var(--line);border-radius:8px;
  background:var(--card);padding:0 .5rem;font-size:.8rem;cursor:pointer;
}
#boldBtn,#italicBtn{font-size:.95rem}
#boldBtn.active,#italicBtn.active{background:#e7f3ec;border-color:var(--accent);color:var(--accent)}
/* controls sit flush inside the toolbar pills */
.tgroup #colorPick,.tgroup #fontPick,.tgroup #sizePick,.tgroup #markStyle{background:var(--card)}

.download{
  margin-left:auto;
  background:var(--accent);color:#fff;border:none;border-radius:10px;
  padding:.7rem 1.3rem;font-size:.9rem;font-weight:700;cursor:pointer;
  box-shadow:0 3px 12px rgba(31,122,83,.35);
  transition:background .15s,transform .1s;
}
.download:hover{background:var(--accent-hi);transform:translateY(-1px)}

/* ---------------- empty state ---------------- */
#empty{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2rem;padding:2rem;
}
.drop{
  width:min(92vw,620px);
  border:2.5px dashed #c9c2b0;border-radius:22px;
  background:var(--card);
  padding:3.2rem 2rem;text-align:center;
  transition:border-color .2s,background .2s;
}
.drop.over{border-color:var(--accent);background:#f2f9f5}
.drop-ic{font-size:3.4rem}
.drop h1{font-size:1.7rem;margin:.6rem 0 .4rem;font-weight:700}
.drop p{color:var(--muted);margin:.4rem 0}
.bigbtn{
  background:var(--accent);color:#fff;border:none;border-radius:12px;
  padding:.9rem 2.2rem;font-size:1rem;font-weight:700;cursor:pointer;
  box-shadow:0 4px 14px rgba(31,122,83,.35);
  transition:background .15s,transform .1s;
}
.bigbtn:hover{background:var(--accent-hi);transform:translateY(-1px)}

.features{
  display:flex;gap:.6rem 1.4rem;flex-wrap:wrap;justify-content:center;
  color:var(--muted);font-size:.85rem;max-width:760px;
}

/* ---------------- viewer ---------------- */
#viewer{
  flex:1;overflow:auto;
  display:flex;flex-direction:column;align-items:center;
  gap:1.4rem;padding:1.6rem 1rem 5rem;
  margin-left:208px;   /* clear the fixed sidebar */
}
.page{
  position:relative;
  background:#fff;
  box-shadow:0 4px 22px rgba(31,36,39,.16);
  border-radius:2px;
}
.page canvas{display:block;border-radius:2px}

/* real PDF form fields we build ourselves */
.fieldLayer{position:absolute;inset:0;z-index:2;pointer-events:none}  /* container passes clicks through… */
.fieldLayer .pfield,.fieldLayer .pcheck{pointer-events:auto}         /* …but the actual inputs stay clickable */
.pfield{
  position:absolute;
  border:1.5px solid rgba(37,99,235,.45);
  background:rgba(219,234,254,.35);
  border-radius:3px;
  font-family:inherit;color:#111;
  padding:0 3px;outline:none;
  transition:border-color .15s,background .15s;
}
.pfield:focus{border-color:var(--sel);background:rgba(219,234,254,.6)}
textarea.pfield{resize:none;line-height:1.15}
.pcheck{
  position:absolute;cursor:pointer;
  border:1.5px solid rgba(37,99,235,.55);
  background:rgba(219,234,254,.35);border-radius:3px;
  display:flex;align-items:center;justify-content:center;
  font-weight:900;color:var(--ink);user-select:none;
}
.pcheck.on::after{content:'✓'}
select.pfield{cursor:pointer}

/* our annotation overlay */
.overlay{position:absolute;inset:0;z-index:3}
.overlay.crosshair{cursor:crosshair}
.overlay svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

.annot{
  position:absolute;user-select:none;
  border:1.5px dashed transparent;border-radius:3px;
}
.annot.selected{border-color:var(--sel)}
.annot .del{
  position:absolute;top:-13px;right:-13px;width:24px;height:24px;
  background:#e11d48;color:#fff;border:none;border-radius:50%;
  font-size:13px;font-weight:900;cursor:pointer;display:none;
  align-items:center;justify-content:center;line-height:1;
  box-shadow:0 2px 6px rgba(0,0,0,.3);
}
.annot.selected .del{display:flex}
.annot .grip{
  position:absolute;right:-8px;bottom:-8px;width:16px;height:16px;
  background:var(--sel);border:2px solid #fff;border-radius:50%;
  cursor:nwse-resize;display:none;box-shadow:0 1px 4px rgba(0,0,0,.3);
}
.annot.selected .grip{display:block}

.annot.text{cursor:move}
.annot.text .txt{
  outline:none;white-space:pre-wrap;min-width:12px;min-height:1em;
  line-height:1.25;cursor:text;
}
.annot.mark{display:flex;align-items:center;justify-content:center;cursor:move;font-weight:900;line-height:1}
.annot.hl{background:rgba(255,224,64,.45);cursor:move;border-radius:2px}
.annot.img{cursor:move}
.annot.img img{width:100%;height:100%;pointer-events:none}

/* shapes & white-out */
.annot.shape{cursor:move}
.annot.shape svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.annot.shape .box{position:absolute;inset:0;pointer-events:none}

/* fill-in field: label + line */
.annot.field{display:flex;align-items:flex-end;gap:6px;cursor:move;white-space:nowrap}
.annot.field .fl-label{outline:none;line-height:1.2;cursor:text}
.annot.field .fl-line{display:inline-block;height:0;flex:0 0 auto}

/* table */
.annot.table{cursor:move}
.fl-table{border-collapse:collapse;background:rgba(255,255,255,.6)}
.fl-table td{
  border:1px solid #444;min-width:26px;padding:2px 5px;
  outline:none;line-height:1.25;vertical-align:top;cursor:text;
  overflow:hidden;
}
.fl-table td:focus{background:rgba(37,99,235,.10)}
.fl-move{
  position:absolute;left:-14px;top:-14px;width:24px;height:24px;border-radius:6px;
  background:var(--sel);color:#fff;display:none;align-items:center;justify-content:center;
  cursor:move;font-size:13px;box-shadow:0 1px 5px rgba(0,0,0,.3);
}
.annot.table.selected .fl-move{display:flex}

/* insert-table modal */
.tbl-size{display:flex;gap:1.2rem;margin:.4rem 0 .2rem}
.tbl-size label{display:flex;flex-direction:column;gap:.3rem;font-size:.85rem;color:var(--muted)}
.tbl-size input{height:38px;width:110px;border:1px solid var(--line);border-radius:8px;padding:0 .5rem;font-size:1rem}

/* ---------------- page indicator ---------------- */
#pagebar{
  position:fixed;bottom:1rem;left:50%;transform:translateX(-50%);z-index:40;
  background:var(--ink);color:#fff;border-radius:99px;
  padding:.45rem 1.1rem;font-size:.78rem;opacity:.9;
}

/* ---------------- modal ---------------- */
.modal{
  position:fixed;inset:0;z-index:100;
  background:rgba(31,36,39,.55);
  display:flex;align-items:center;justify-content:center;padding:1rem;
}
.modal-card{
  background:var(--card);border-radius:18px;
  padding:1.6rem;box-shadow:0 20px 60px rgba(0,0,0,.35);
  width:min(94vw,640px);
  max-height:92vh;overflow:auto;
}
.modal-card{position:relative}
.modal-x{
  position:absolute;top:.7rem;right:.7rem;z-index:2;
  width:34px;height:34px;border:none;border-radius:50%;
  background:#f0ede5;color:var(--ink);font-size:1.5rem;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.modal-x:hover{background:#e11d48;color:#fff}
.sig-rec{display:inline-block;font-weight:800;font-size:.72rem;letter-spacing:.04em;
  color:var(--accent);background:#e7f3ec;border-radius:6px;padding:.2rem .5rem;margin-bottom:.4rem}
.modal-card h2{font-size:1.25rem;margin-bottom:.2rem}
.modal-sub{color:var(--muted);font-size:.85rem;margin-bottom:1rem}
#sigCanvas{
  width:100%;height:200px;
  border:2px dashed #c9c2b0;border-radius:12px;background:#fff;
  cursor:crosshair;touch-action:none;
}
.modal-actions{display:flex;gap:.6rem;margin-top:1rem;align-items:center}
.spacer{flex:1}
.ghost{
  background:transparent;border:1px solid var(--line);border-radius:10px;
  padding:.7rem 1.2rem;cursor:pointer;color:var(--ink);font-size:.85rem;
}
.ghost:hover{background:#f0ede5}

/* ---------------- toast ---------------- */
#toast{
  position:fixed;top:4.4rem;left:50%;transform:translateX(-50%) translateY(-8px);
  z-index:200;background:var(--ink);color:#fff;
  padding:.7rem 1.3rem;border-radius:12px;font-size:.85rem;
  opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;
  max-width:90vw;text-align:center;
}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------------- viewer slide (doc switch) ---------------- */
#viewer.sliding{opacity:0;transform:translateX(24px);transition:none}
#viewer{transition:opacity .18s ease,transform .18s ease}

/* ---------------- document navigation ---------------- */
#docNav{
  position:fixed;right:1rem;top:50%;transform:translateY(-50%);z-index:45;
  display:flex;flex-direction:column;align-items:center;gap:.4rem;
  background:var(--card);border:1px solid var(--line);border-radius:99px;
  padding:.5rem .35rem;box-shadow:var(--shadow);
}
#docNav button{
  width:38px;height:38px;border-radius:50%;border:none;cursor:pointer;
  background:var(--accent);color:#fff;font-size:1.4rem;line-height:1;
  display:flex;align-items:center;justify-content:center;
}
#docNav button:disabled{background:#cfd6d2;cursor:default}
#docInd{font-size:.72rem;color:var(--muted);writing-mode:vertical-rl;padding:.2rem 0}

/* ---------------- floating property bar ---------------- */
#floatbar{
  position:fixed;z-index:60;display:flex;align-items:center;gap:.3rem;
  background:var(--ink);color:#fff;border-radius:12px;
  padding:.35rem .45rem;box-shadow:0 6px 20px rgba(0,0,0,.35);
}
#floatbar select,#floatbar input[type=number]{
  height:30px;border:none;border-radius:7px;background:#fff;color:var(--ink);
  font-size:.8rem;padding:0 .3rem;
}
#floatbar input[type=number]{width:52px;text-align:center}
#floatbar input[type=color]{width:30px;height:30px;border:none;border-radius:7px;background:none;padding:0;cursor:pointer}
#floatbar button{
  min-width:30px;height:30px;border:none;border-radius:7px;cursor:pointer;
  background:#3a4147;color:#fff;font-size:.9rem;line-height:1;
}
#floatbar button:hover{background:#4a5259}
#floatbar button.on{background:var(--accent)}
#floatbar .fb-step{font-weight:700}
#floatbar input[type=range]{width:120px;accent-color:var(--accent-hi)}
#floatbar .fb-txt{color:#fff;font-size:.75rem;padding:0 .2rem}

/* tool hint bar with a "Done adding …" button */
#toolhint{
  position:fixed;top:4.4rem;left:50%;transform:translateX(-50%);z-index:65;
  display:flex;align-items:center;gap:.85rem;
  background:var(--ink);color:#fff;border-radius:12px;
  padding:.45rem .45rem .45rem 1rem;box-shadow:0 6px 20px rgba(0,0,0,.3);max-width:92vw;
}
#toolhint #toolhintText{font-size:.85rem;line-height:1.2}
#toolhint #toolhintDone{padding:.5rem 1.1rem;font-size:.82rem;box-shadow:none}
#toolhint #toolhintColor{display:inline-flex;align-items:center;gap:.4rem;font-size:.8rem}
#toolhint #toolhintColor input{width:26px;height:22px;padding:0;border:none;background:none;cursor:pointer}

/* offscreen text measuring probe */
#measure{
  position:fixed;left:-9999px;top:-9999px;visibility:hidden;
  white-space:pre;line-height:1.25;pointer-events:none;
  font-family:Helvetica,Arial,sans-serif;
}

/* ---------------- signature modal (tabs, upload, saved) ---------------- */
.tabs{display:flex;gap:.4rem;margin-bottom:1rem}
.sig-tab{
  flex:1;padding:.6rem;border:1px solid var(--line);border-radius:10px;
  background:var(--card);cursor:pointer;font-size:.85rem;color:var(--ink);
}
.sig-tab.active{background:#e7f3ec;border-color:var(--accent);color:var(--accent);font-weight:700}

.sig-drop{
  border:2.5px dashed #c9c2b0;border-radius:14px;background:#fff;
  padding:2rem 1rem;text-align:center;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:.3rem;
}
.sig-drop:hover{border-color:var(--accent);background:#f2f9f5}
.sig-drop .drop-ic{font-size:2.4rem}
.sig-drop p{margin:0;color:var(--ink)}

#sigCrop{
  max-width:100%;max-height:56vh;height:auto;margin:0 auto;
  border:1px solid var(--line);border-radius:10px;
  background:#fff;touch-action:none;cursor:crosshair;display:block;
}
.sig-controls{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;margin-top:.7rem}
.sig-controls label{font-size:.8rem;color:var(--muted);display:flex;align-items:center;gap:.4rem}
.sig-controls .chk{cursor:pointer}
.sig-controls #sigExtract{margin-left:auto;padding:.6rem 1.3rem}
.sig-controls select,.sig-controls input[type=text]{
  height:34px;border:1px solid var(--line);border-radius:8px;background:var(--card);
  padding:0 .5rem;font-size:.85rem;color:var(--ink);
}
.sig-controls input[type=text]{flex:1;min-width:180px}

/* photo guidance card + ChatGPT prompt */
.sig-guide{
  background:var(--paper);border:1px solid var(--line);border-radius:12px;
  padding:.9rem 1rem;margin-bottom:1rem;
}
.sig-guide h3{font-size:.95rem;margin-bottom:.5rem}
.sig-guide ul{margin:0 0 0 1.1rem;padding:0;font-size:.82rem;line-height:1.55}
.sig-guide li{margin-bottom:.22rem}
.sig-ai{margin-top:.75rem;border-top:1px dashed var(--line);padding-top:.75rem}
.sig-ai p{font-size:.82rem;margin-bottom:.5rem;line-height:1.5}
#sigPrompt{
  width:100%;border:1px solid var(--line);border-radius:8px;background:var(--card);
  padding:.5rem .6rem;font-size:.74rem;color:var(--muted);
  resize:vertical;font-family:inherit;line-height:1.45;
}
.sig-ai-actions{display:flex;gap:.5rem;margin-top:.5rem;flex-wrap:wrap}
.sig-drop-actions{display:flex;justify-content:center;margin-top:.6rem}

/* initials monogram grid */
.init-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
  gap:.6rem;margin-top:.9rem;
}
.init-cell{
  border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer;
  height:76px;display:flex;align-items:center;justify-content:center;padding:.3rem;
  transition:border-color .15s,transform .1s;
}
.init-cell:hover{border-color:var(--accent);transform:translateY(-1px)}
.init-cell img{max-width:100%;max-height:100%}
#sigDraw .chk{font-size:.8rem;color:var(--muted);display:flex;align-items:center;gap:.4rem;margin-left:.6rem}
.sig-preview{
  margin-top:.5rem;border-radius:10px;padding:.6rem;
  background:repeating-conic-gradient(#eee 0% 25%,#fff 0% 50%) 50% / 18px 18px;
  display:flex;justify-content:center;
}
.sig-preview img{max-height:120px;max-width:100%}

.sig-saved-row{margin-top:1rem;border-top:1px solid var(--line);padding-top:.8rem}
.sig-saved{display:flex;gap:.6rem;flex-wrap:wrap}
.sig-thumb{
  position:relative;width:120px;height:56px;border:1px solid var(--line);
  border-radius:8px;background:#fff;display:flex;align-items:center;justify-content:center;
  cursor:pointer;overflow:visible;
}
.sig-thumb img{max-width:100%;max-height:100%}
.sig-thumb:hover{border-color:var(--accent)}
.sig-del{
  position:absolute;top:-9px;right:-9px;width:24px;height:24px;border:2px solid #fff;
  background:#111;color:#fff;border-radius:50%;font-size:15px;font-weight:900;cursor:pointer;
  display:flex;align-items:center;justify-content:center;line-height:1;
  box-shadow:0 2px 6px rgba(0,0,0,.4);z-index:3;
}
.sig-del:hover{background:#000;transform:scale(1.08)}

/* ---------------- doc tools / conversions / organizer / find ---------------- */
.modal-card.wide{width:min(96vw,920px)}
.dt-sect{border:1px solid var(--line);border-radius:12px;padding:.8rem .9rem;margin-bottom:.8rem}
.dt-row{display:flex;align-items:center;gap:.5rem;font-size:.9rem}
.dt-grid{display:flex;gap:.9rem;flex-wrap:wrap;align-items:center;margin-top:.6rem}
.dt-grid label{display:flex;align-items:center;gap:.4rem;font-size:.8rem;color:var(--muted)}
.dt-grid input[type=text],.dt-grid select{
  height:36px;border:1px solid var(--line);border-radius:8px;background:var(--card);padding:0 .5rem;font-size:.85rem;
}
.dt-grid input[type=text]{min-width:180px}
.dt-grid input[type=number]{width:64px;height:36px;border:1px solid var(--line);border-radius:8px;padding:0 .4rem}

.pages-grid{
  display:flex;flex-wrap:wrap;gap:.7rem;max-height:60vh;overflow:auto;
  padding:.6rem;background:var(--paper);border-radius:12px;
}
.pg-cell{
  position:relative;width:118px;border:1px solid var(--line);border-radius:8px;background:#fff;
  padding:.3rem;cursor:grab;user-select:none;
}
.pg-cell.dragover{border-color:var(--accent);box-shadow:0 0 0 2px rgba(31,122,83,.3)}
.pg-cell canvas{width:100%;height:auto;display:block;border-radius:4px;pointer-events:none}
.pg-cell .pg-no{text-align:center;font-size:.72rem;color:var(--muted);margin-top:.2rem}
.pg-cell .pg-sel{position:absolute;top:6px;left:6px;transform:scale(1.2)}
.pg-acts{position:absolute;top:4px;right:4px;display:none;gap:2px}
.pg-cell:hover .pg-acts{display:flex}
.pg-acts button{width:22px;height:22px;border:none;border-radius:5px;background:rgba(31,36,39,.8);color:#fff;cursor:pointer;font-size:12px;line-height:1}

/* combine / assemble builder */
.cb-toolbar{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin:.3rem 0 .8rem}
.cb-total{font-size:.78rem;color:var(--muted);align-self:center}
.cb-toolbar .chk{display:flex;align-items:center;gap:.4rem;font-size:.85rem;color:var(--muted)}
.cb-normsize{font-size:.8rem;padding:.2rem .3rem;border:1px solid var(--line);border-radius:6px;background:var(--panel);color:var(--fg)}
.cb-normsize:disabled{opacity:.5}
.cb-split{display:flex;gap:.7rem;align-items:stretch}
.cb-files{flex:0 0 220px;display:flex;flex-direction:column;max-height:58vh;background:var(--paper);border-radius:12px;padding:.5rem;overflow:hidden}
.cb-files-head{font-size:.7rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;margin:.15rem .2rem .45rem}
#combineFilesList{overflow:auto;display:flex;flex-direction:column;gap:.35rem}
.cb-empty-sm{color:var(--muted);font-size:.8rem;text-align:center;padding:.6rem}
.cb-file{display:flex;align-items:center;gap:.4rem;padding:.4rem .5rem;background:#fff;border:1px solid var(--line);border-radius:8px;cursor:grab;user-select:none}
.cb-file.dragover{border-color:var(--accent);box-shadow:0 0 0 2px rgba(31,122,83,.3)}
.cb-file-n{font-size:.72rem;font-weight:700;color:var(--muted);min-width:1.1em}
.cb-file-nm{flex:1;font-size:.75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cb-file-sub{font-size:.62rem;color:var(--muted);white-space:nowrap}
.cb-file-acts{display:flex;gap:2px}
.cb-file-acts button{width:20px;height:20px;border:none;border-radius:5px;background:rgba(31,36,39,.72);color:#fff;cursor:pointer;font-size:11px;line-height:1}
.cb-grid{
  flex:1;display:flex;flex-wrap:wrap;gap:.7rem;min-height:120px;max-height:58vh;overflow:auto;
  padding:.7rem;background:var(--paper);border-radius:12px;align-content:flex-start;
}
.cb-empty{color:var(--muted);font-size:.9rem;margin:auto;text-align:center;width:100%}
.cb-cell{
  position:relative;width:110px;border:1px solid var(--line);border-radius:8px;background:#fff;
  padding:.3rem;cursor:grab;user-select:none;
}
.cb-cell.dragover{border-color:var(--accent);box-shadow:0 0 0 2px rgba(31,122,83,.3)}
.cb-thumb{height:130px;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:4px;background:#f6f4ef}
.cb-thumb img{max-width:100%;max-height:100%;pointer-events:none}
.cb-blank{width:80px;height:110px;background:#fff;border:1px dashed var(--line)}
.cb-page{width:84px;height:112px;background:#fff;border:1px solid var(--line);border-radius:3px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;padding:4px}
.cb-page b{font-size:.72rem}.cb-page small{font-size:.6rem;color:var(--muted)}
.cb-page.cb-div{justify-content:center;font-size:.72rem;font-weight:700;color:var(--accent)}
.cb-label{font-size:.62rem;color:var(--muted);text-align:center;margin-top:.25rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cb-acts{position:absolute;top:4px;right:4px;display:none;gap:2px}
.cb-cell:hover .cb-acts{display:flex}
.cb-acts button{width:22px;height:22px;border:none;border-radius:5px;background:rgba(31,36,39,.82);color:#fff;cursor:pointer;font-size:12px;line-height:1}

#findBar{
  position:fixed;top:4.5rem;right:1.2rem;z-index:70;display:flex;align-items:center;gap:.35rem;
  background:var(--card);border:1px solid var(--line);border-radius:12px;padding:.4rem .5rem;box-shadow:var(--shadow);
}
#findBar input{height:32px;border:1px solid var(--line);border-radius:8px;padding:0 .5rem;font-size:.85rem;width:190px}
#findBar span{font-size:.75rem;color:var(--muted);min-width:38px;text-align:center}
#findBar button{width:30px;height:30px;border:none;border-radius:7px;background:var(--paper);cursor:pointer;font-size:.85rem}
#findBar button:hover{background:#e7f3ec}
.find-hit{position:absolute;background:rgba(255,213,0,.45);border-radius:2px;pointer-events:none;z-index:2}
.find-hit.current{background:rgba(255,150,0,.6)}

/* selectable text layer */
.textLayer{position:absolute;inset:0;overflow:hidden;opacity:1;line-height:1;z-index:1}
.textLayer span{position:absolute;color:transparent;white-space:pre;cursor:text;transform-origin:0 0}
.textLayer ::selection{background:rgba(37,99,235,.3)}
.overlay.pass{pointer-events:none}
.overlay.pass .annot{pointer-events:auto}   /* annots still draggable while text is selectable */

/* staged file list (Add PDF removal) */
.stage-list{display:flex;flex-direction:column;gap:.3rem;margin:.4rem 0 .7rem;max-height:40vh;overflow:auto}
.stage-row{display:flex;align-items:center;gap:.5rem;padding:.4rem .5rem;border:1px solid var(--line);border-radius:8px;background:var(--paper);font-size:.82rem}
.stage-row .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stage-row .sz{color:var(--muted);font-size:.72rem}
.stage-row .rm{width:22px;height:22px;border:none;border-radius:50%;background:#e11d48;color:#fff;cursor:pointer;font-size:13px;line-height:1;flex:0 0 auto}
.stage-row .rm:hover{background:#b3123b}

/* ---------------- choice modals (add / download) ---------------- */
.modal-card.small{width:min(94vw,460px)}
.rename-input{width:100%;padding:.6rem .7rem;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--fg);font-size:1rem;margin-bottom:.4rem}
.imged-stage{display:flex;align-items:center;justify-content:center;background:var(--paper);border-radius:12px;padding:.6rem;min-height:260px;max-height:52vh;overflow:hidden}
.imged-stage canvas{max-width:100%;max-height:50vh;border-radius:6px;cursor:crosshair;touch-action:none;box-shadow:0 2px 10px rgba(0,0,0,.15)}
.imged-controls{margin:.7rem 0 .2rem;display:flex;flex-direction:column;gap:.5rem}
.imged-row{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.imged-lbl{font-size:.8rem;color:var(--muted)}
.imged-slider{display:flex;align-items:center;gap:.4rem;font-size:.8rem;color:var(--muted)}
.imged-slider input{width:130px}
.chipbtn{padding:.35rem .7rem;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--fg);font-size:.8rem;cursor:pointer}
.chipbtn.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.rename-input:focus{outline:2px solid var(--accent,#3b82f6);outline-offset:1px}
.choice-row{display:flex;gap:.7rem;margin:.6rem 0}
.choice{
  flex:1;border:1.5px solid var(--line);border-radius:14px;background:var(--card);
  padding:1rem .8rem;cursor:pointer;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:.3rem;color:var(--ink);
  transition:border-color .15s,background .15s;
}
.choice:hover{border-color:var(--accent);background:#f2f9f5}
.choice-ic{font-size:1.6rem}
.choice small{color:var(--muted);font-size:.72rem;line-height:1.3}

/* ---------------- small screens ---------------- */
@media (max-width:760px){
  .tbtn{min-width:46px}
  .tbtn .lb{font-size:.55rem}
  .download{padding:.6rem .9rem;font-size:.8rem}
  #viewer{padding:1rem .4rem 5rem}
  #docbar{left:0;flex-wrap:wrap;gap:.4rem}
  .db-name{max-width:130px}
  .doc-arrow-left{left:8px}
  .doc-arrow{width:34px;height:48px;font-size:1.3rem}
}