:root{
  --chrome:#f0f0f0;
  --chrome-line:#c8c8c8;
  --hover:#dcdfe3;
  --active:#c9cfd6;
  --desk:#9fa4a9;
  --paper:#ffffff;
  --edge:#5f6570;
  --ink:#1a1a1a;
  --muted:#6a7079;
  --ink-blue:#16325c;
  --sel:#cfe0f5;
  --ui:'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--desk); color:var(--ink);
  font-family:var(--ui); font-size:12px; line-height:1.4;
  overflow:hidden; display:flex; flex-direction:column;
  -webkit-font-smoothing:antialiased;
}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
input,select{font:inherit; color:inherit}
:focus-visible{outline:1px dotted #333; outline-offset:1px}
.vh{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}
.grow{flex:1}
[hidden]{display:none !important}
#printframe{position:fixed; width:0; height:0; border:0; visibility:hidden}

/* ---------------- toolbar ---------------- */
.toolbar{
  flex:0 0 auto; display:flex; align-items:center; gap:1px;
  height:32px; padding:0 4px;
  background:var(--chrome); border-bottom:1px solid var(--chrome-line);
  user-select:none; z-index:20; overflow-x:auto; overflow-y:hidden; scrollbar-width:none;
}
.toolbar::-webkit-scrollbar{display:none}
.tb{
  flex:0 0 auto; height:24px; min-width:24px; padding:0 3px;
  display:inline-flex; align-items:center; justify-content:center; gap:5px;
  border:1px solid transparent; border-radius:3px; color:#2b3038;
}
.tb svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round}
.tb:hover:not(:disabled){background:var(--hover); border-color:#b8bec6}
.tb:active:not(:disabled){background:var(--active)}
.tb:disabled{opacity:.35; cursor:default}
.tb.on{background:#fff; border-color:#9aa3ad}
.tb.on svg{stroke:var(--ink-blue)}
.tb.save{padding:0 8px; font-weight:600}
.tb.wide{min-width:30px}

.sep{flex:0 0 auto; width:1px; height:18px; background:var(--chrome-line); margin:0 5px}

.pagebox{
  width:38px; height:20px; text-align:center; margin:0 2px;
  border:1px solid #9aa3ad; border-radius:2px; background:#fff;
  font-variant-numeric:tabular-nums;
}
.of{color:#4a5058; margin-right:2px; white-space:nowrap; font-variant-numeric:tabular-nums}
.zoomsel{height:20px; border:1px solid #9aa3ad; border-radius:2px; background:#fff; padding:0 2px; max-width:104px}

.tools{display:flex; align-items:center; gap:1px}
.swatch{width:14px; height:14px; margin-left:3px; border-radius:2px; border:1px solid rgba(0,0,0,.35); box-shadow:0 0 0 1px transparent}
.swatch.on{box-shadow:0 0 0 2px #fff, 0 0 0 3px #5b6270}
.sigthumb{height:16px; max-width:44px; object-fit:contain; display:block}

/* ---------------- account ---------------- */
/* Pinned to the right edge so it stays reachable even when the toolbar
   overflows horizontally at default zoom (the scrollbar is hidden). */
.acct{position:sticky; right:0; flex:0 0 auto; z-index:3; background:var(--chrome); padding-left:5px; box-shadow:-8px 0 8px -6px rgba(20,24,28,.18)}
.acctbtn{gap:5px; max-width:200px}
.acctbtn #acctlabel{max-width:156px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.acctbtn.in svg{stroke:var(--ink-blue)}
.acctmenu{
  position:fixed; min-width:160px; max-width:240px; padding:4px;
  background:#fff; border:1px solid #9aa3ad; border-radius:3px;
  box-shadow:0 4px 14px rgba(0,0,0,.25); z-index:70;
}
.acctnote{padding:6px 8px; color:var(--muted); white-space:normal; line-height:1.35}
.acctemail{padding:5px 8px; color:var(--muted); border-bottom:1px solid #e2e2e2; margin-bottom:2px; max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.acctitem{display:block; width:100%; text-align:left; padding:6px 8px; border-radius:3px; color:#22262c}
.acctitem:hover{background:var(--hover)}
.acctsep{height:1px; background:#e2e2e2; margin:3px 0}

/* ---------------- alt-hold shortcut badges ---------------- */
.kbadge{
  position:absolute; bottom:0; right:0; min-width:11px; height:11px; padding:0 2px;
  display:none; align-items:center; justify-content:center;
  font-size:8px; font-weight:700; line-height:1; color:#fff; background:var(--ink-blue);
  border:1px solid #fff; border-radius:2px; pointer-events:none;
}
.tb{position:relative}
body.altdown .kbadge{display:inline-flex}

/* ---------------- keyboard shortcuts sheet ---------------- */
.kbdmodal{width:min(720px,100%)}
.kbdbody{display:grid; grid-template-columns:repeat(3,1fr); gap:0 22px; padding:12px}
.kbdgroup h3{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin:10px 0 5px}
.kbdgroup h3:first-child{margin-top:0}
.kbdrow{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:3px 0; min-height:20px}
.kbdrow>span:first-child{color:#22262c}
.kbdkeys{display:inline-flex; align-items:center; gap:3px; flex:0 0 auto}
.kbor{color:var(--muted); font-size:10px; margin:0 1px}
kbd{
  display:inline-flex; align-items:center; justify-content:center; min-width:16px; height:17px; padding:0 4px;
  font-family:var(--ui); font-size:10px; font-weight:600; color:#22262c;
  background:#fff; border:1px solid #b8bec6; border-bottom-width:2px; border-radius:3px;
}
#perfpanel{
  position:fixed; left:10px; bottom:10px; z-index:9999; max-width:340px;
  background:rgba(20,24,28,.9); color:#eaf0f6; padding:8px 10px; border-radius:5px;
  font:11px/1.5 ui-monospace,Menlo,Consolas,monospace; pointer-events:none;
  box-shadow:0 4px 14px rgba(0,0,0,.35);
}
#perfpanel b{display:block; color:#8fc7ff; margin-bottom:3px; font-weight:700}
.kbdhint{color:var(--muted)}
.kbdhint kbd{height:15px; min-width:14px}
@media (max-width:640px){ .kbdbody{grid-template-columns:1fr} }

/* ---------------- stats for nerds ---------------- */
.statsmodal{width:min(560px,100%)}
.statsbody{padding:12px}
.statsloading{padding:20px; text-align:center}
.statsgroup{margin-bottom:14px}
.statsgroup:last-child{margin-bottom:0}
.statsgroup h3{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin:0 0 6px}
.statcards{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.statcard{background:#fff; border:1px solid #d7dce2; border-radius:4px; padding:8px 10px}
.statcard .n{font-size:20px; font-weight:700; color:var(--ink-blue); line-height:1.1; font-variant-numeric:tabular-nums}
.statcard .l{color:var(--muted); font-size:11px; margin-top:2px}
.stattable{width:100%; border-collapse:collapse; background:#fff; border:1px solid #d7dce2; border-radius:4px; overflow:hidden}
.stattable th,.stattable td{padding:5px 10px; text-align:right; font-variant-numeric:tabular-nums}
.stattable th:first-child,.stattable td:first-child{text-align:left; color:#22262c}
.stattable thead th{color:var(--muted); font-weight:600; font-size:11px; border-bottom:1px solid #e2e2e2; background:var(--chrome)}
.stattable tbody tr+tr td{border-top:1px solid #eef0f2}
.stattable tfoot td{border-top:1px solid #d7dce2; font-weight:700; color:var(--ink)}
@media (max-width:520px){ .statcards{grid-template-columns:1fr 1fr} }

.find{display:flex; align-items:center; gap:1px; flex:0 0 auto}
.findlabel{color:#4a5058; margin-right:3px}
.findbox{width:130px; height:20px; padding:0 5px; border:1px solid #9aa3ad; border-radius:2px; background:#fff}
.findbox.miss{background:#ffe2e2; border-color:#d08b8b}
.findcount{color:#4a5058; margin-left:4px; min-width:52px; font-variant-numeric:tabular-nums}

/* ---------------- layout ---------------- */
.main{flex:1; display:flex; min-height:0}
.side{
  flex:0 0 auto; width:240px; min-width:120px; max-width:60vw;
  background:#fafafa; border-right:1px solid var(--chrome-line);
  display:flex; flex-direction:column; min-height:0;
}
.sidehead{flex:0 0 auto; padding:6px 10px; font-weight:600; color:#41474f; border-bottom:1px solid #e2e2e2; background:var(--chrome)}
.tree{flex:1; overflow:auto; padding:6px 4px 20px}
.node{display:block; width:100%; text-align:left; padding:3px 6px; border-radius:3px; color:#22262c}
.node:hover{background:var(--hover)}
.node.on{background:var(--sel)}
.kids{margin-left:11px; border-left:1px solid #e0e0e0; padding-left:4px}
.splitter{flex:0 0 auto; width:4px; cursor:col-resize; background:transparent}
.splitter:hover{background:#b9bec4}

.viewer{flex:1; overflow:auto; position:relative; padding:12px 12px 60px; overscroll-behavior:contain}
.doc{display:flex; flex-direction:column; align-items:center; gap:10px; margin:0 auto}
.doc.single > .page{display:none}
.doc.single > .page.cur{display:block}

.page{position:relative; background:var(--paper); border:1px solid var(--edge); box-shadow:2px 2px 4px rgba(0,0,0,.22)}
.page canvas{display:block; width:100%; height:100%}

.findlayer{position:absolute; inset:0; pointer-events:none; z-index:1}
.hit{position:absolute; background:rgba(255,224,102,.55); border-radius:1px}
.hit.cur{background:rgba(255,157,61,.65); box-shadow:0 0 0 1px rgba(120,60,0,.4)}

/* ---------------- text layer (select & copy) ---------------- */
.textlayer{
  position:absolute; inset:0; overflow:hidden; z-index:2;
  line-height:1; text-align:initial; forced-color-adjust:none;
  pointer-events:none; user-select:none;
}
.textlayer span, .textlayer br{
  position:absolute; color:transparent; white-space:pre;
  transform-origin:0% 0%; cursor:text;
}
.textlayer .endOfContent{display:none}
.textlayer ::selection{background:rgba(22,90,190,.35); color:transparent}
.viewer.pick-text .textlayer{pointer-events:auto; user-select:text}
.viewer.pick-text .layer{pointer-events:none}

.layer{position:absolute; inset:0; z-index:3; cursor:crosshair}
.viewer.hand .layer{cursor:grab}
.viewer.hand .layer:active{cursor:grabbing}

/* ---------------- form fields (AcroForm) ---------------- */
.fieldlayer{position:absolute; inset:0; z-index:4; pointer-events:none}
.fieldlayer .ff{position:absolute; pointer-events:auto; margin:0; font-family:Helvetica, Arial, sans-serif}
.ff-text,.ff-area,.ff-select{
  padding:0 2px; color:var(--ink); border:1px solid rgba(22,90,190,.4);
  background:rgba(22,90,190,.07); border-radius:1px; line-height:1.1;
}
.ff-area{resize:none; overflow:hidden; padding:1px 2px}
.ff-select{padding:0 1px}
.ff-check{accent-color:var(--ink-blue); cursor:pointer}
.ff:focus{outline:1px solid var(--ink-blue); outline-offset:0; background:rgba(22,90,190,.12)}
.ff:disabled{background:rgba(120,120,120,.08); border-color:rgba(120,120,120,.3)}
body.hidefields .fieldlayer{opacity:0; pointer-events:none}
body.hidefields .fieldlayer .ff{pointer-events:none}

/* ---------------- annotations ---------------- */
.ann{position:absolute; touch-action:none}
.ann .bd{
  min-width:10px; min-height:1em; outline:none; white-space:pre-wrap;
  font-family:Helvetica, Arial, sans-serif; line-height:1.2; padding:0; margin:0; cursor:text;
}
.ann.sig .bd, .ann.mark .bd{cursor:grab}
.ann::before{content:''; position:absolute; inset:-3px -4px; border:1px dashed transparent; pointer-events:none}
.ann:hover::before{border-color:#8e99a5}
.ann.sel::before{border:1px solid var(--ink-blue); background:rgba(22,50,92,.05)}
.ann img{display:block; width:100%; height:100%; pointer-events:none}
.ann svg{display:block; width:100%; height:100%; overflow:visible; fill:none}

.chip{
  position:absolute; left:50%; top:-30px; transform:translateX(-50%);
  display:none; align-items:center; gap:1px; padding:2px;
  background:var(--chrome); border:1px solid #9aa3ad; border-radius:3px;
  box-shadow:0 2px 6px rgba(0,0,0,.25); white-space:nowrap; z-index:5;
}
.ann.sel .chip{display:flex}
.chip button{width:22px; height:20px; border-radius:2px; display:grid; place-items:center; color:#2b3038; border:1px solid transparent}
.chip button:hover{background:var(--hover); border-color:#b8bec6}
.chip .del:hover{background:#f6d6d6; border-color:#c99; color:#8c2b2b}
.chip svg{width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round}
.chip .grip svg{fill:currentColor; stroke:none}
.chip .sep{width:1px; height:13px; background:#b8bec6; margin:0 2px}

/* ---------------- redaction ---------------- */
.ann.redact{touch-action:none}
.ann.redact .bd{width:100%; height:100%; min-width:0; min-height:0; background:#000; cursor:move}
.ann.redact::before{inset:-1px}
.ann.redact.sel::before{background:transparent}
.ann.redact.drawing .bd{opacity:.65}
.ann.redact .rz{
  position:absolute; right:-5px; bottom:-5px; width:12px; height:12px;
  background:#fff; border:1px solid var(--ink-blue); border-radius:2px;
  cursor:nwse-resize; display:none; z-index:6;
}
.ann.redact.sel .rz{display:block}

/* ---------------- empty state ---------------- */
.empty{position:absolute; inset:0; display:grid; place-items:center; padding:20px}
.drop{
  width:min(430px,100%); background:var(--paper);
  border:1px solid var(--edge); box-shadow:2px 2px 4px rgba(0,0,0,.22);
  padding:34px 34px 28px; text-align:center;
}
.drop h1{font-size:19px; font-weight:600; margin:0 0 4px}
.drop p{color:var(--muted); margin:0 0 20px}
.open{height:28px; padding:0 14px; border:1px solid #7d858f; border-radius:3px; background:linear-gradient(#fff,#e9ecef); font-weight:600}
.open:hover{background:linear-gradient(#fff,#dfe3e8)}
.open:disabled{opacity:.45; cursor:default}
.open.ghost{font-weight:400}
.open.small{height:26px}
.drop .hint{margin-top:10px; color:var(--muted)}
.dragover .drop{border-color:var(--ink-blue); box-shadow:0 0 0 2px rgba(22,50,92,.25)}
.keys{margin:22px auto 0; border-top:1px solid #e2e2e2; padding-top:12px; color:var(--muted); border-collapse:collapse; width:100%}
.keys td{padding:2px 6px; text-align:left}
.keys td:nth-child(odd){font-family:Consolas,'SF Mono',monospace; color:#2b3038; white-space:nowrap; width:1%}

/* ---------------- presentation ---------------- */
body.present{background:#111}
body.present .toolbar, body.present .side, body.present .splitter{display:none}
body.present .viewer{padding:0; display:grid; place-items:center}
body.present .page{border-color:#000}

/* ---------------- signature modal ---------------- */
.scrim{position:fixed; inset:0; background:rgba(20,24,28,.45); display:none; place-items:center; z-index:60; padding:16px}
.scrim.open{display:grid}
.modal{width:min(520px,100%); background:var(--chrome); border:1px solid #7d858f; box-shadow:0 8px 30px rgba(0,0,0,.35)}
.modal header{display:flex; align-items:center; gap:10px; padding:8px 10px; border-bottom:1px solid var(--chrome-line)}
.modal header h2{font-size:13px; font-weight:600; margin:0}
.tabs{display:flex; gap:1px; margin-left:auto}
.tabs button{padding:4px 10px; border:1px solid transparent; border-radius:3px; color:#41474f}
.tabs button:hover{background:var(--hover); border-color:#b8bec6}
.tabs button.on{background:#fff; border-color:#9aa3ad; font-weight:600; color:var(--ink)}
.pane{padding:12px; display:none; background:#fff}
.pane.on{display:block}
#pad{width:100%; height:180px; border:1px solid #9aa3ad; background:#fff; touch-action:none; display:block; cursor:crosshair}
.padnote{display:flex; justify-content:space-between; align-items:center; margin-top:6px; color:var(--muted)}
.link{color:var(--ink-blue); text-decoration:underline}
.field{width:100%; height:28px; padding:0 8px; border:1px solid #9aa3ad; border-radius:2px; background:#fff}
.fonts{display:grid; grid-template-columns:repeat(2,1fr); gap:6px; margin-top:10px}
.fopt{border:1px solid #c3c9d0; border-radius:3px; height:58px; display:grid; place-items:center; overflow:hidden; color:var(--ink-blue); background:#fff}
.fopt.on{border-color:var(--ink-blue); background:#eef3fa; box-shadow:inset 0 0 0 1px var(--ink-blue)}
.fopt span{font-size:24px; line-height:1; white-space:nowrap; overflow:hidden}
.drophere{border:1px dashed #b8bec6; padding:26px; text-align:center}
.note{color:var(--muted)}
.drophere .note{margin-top:8px}
#uprev{margin-top:10px; text-align:center}
#uprev img{max-height:84px; max-width:100%}
.modal footer{display:flex; align-items:center; gap:8px; padding:8px 10px; border-top:1px solid var(--chrome-line)}
.savename{width:130px; height:26px}

/* ---------------- split / reduce dialogs ---------------- */
.modal.small{width:min(400px,100%)}
.dlglabel{display:block; color:var(--muted); font-size:11px; margin-bottom:4px}
.pane .note{margin-top:8px}
.opt{display:flex; gap:8px; align-items:flex-start; padding:8px; border:1px solid #c3c9d0; border-radius:4px; margin-bottom:8px; cursor:pointer; background:#fff}
.opt:hover{border-color:var(--ink-blue)}
.opt input{margin-top:2px}
.opt span{font-size:12px; line-height:1.35}
.opt b{font-weight:600}
.strongopts{padding:2px 2px 4px}
.strongopts input[type=range]{width:100%}

/* ---------------- saved signatures ---------------- */
.siglib{display:grid; grid-template-columns:repeat(2,1fr); gap:8px; max-height:230px; overflow:auto}
.sigitem{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:10px 8px; background:#fff; border:1px solid #c3c9d0; border-radius:4px; cursor:pointer;
}
.sigitem:hover{border-color:var(--ink-blue); box-shadow:inset 0 0 0 1px var(--ink-blue)}
.sigitem img{max-height:54px; max-width:100%; object-fit:contain; pointer-events:none}
.signame{font-size:11px; color:#41474f; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sigdel{
  position:absolute; top:2px; right:2px; width:18px; height:18px; border-radius:3px;
  display:grid; place-items:center; color:#8c2b2b; font-size:15px; line-height:1;
}
.sigdel:hover{background:#f6d6d6}
.signedout{text-align:center; padding:26px 12px}
.signedout .open{margin-top:12px}

/* ---------------- profile ---------------- */
.profile{display:grid; grid-template-columns:1fr 1fr; gap:10px 12px}
.pfield{display:flex; flex-direction:column; gap:3px}
.pfield.wide{grid-column:1 / -1}
.pfield label{color:var(--muted); font-size:11px}
.pactions{grid-column:1 / -1; display:flex; justify-content:flex-end; margin-top:2px}

/* ---------------- profile popover ---------------- */
.popover{
  position:fixed; z-index:65; min-width:150px; max-width:230px; padding:4px;
  background:#fff; border:1px solid #9aa3ad; border-radius:4px;
  box-shadow:0 6px 20px rgba(0,0,0,.28);
}
.popover .pophead{padding:4px 8px; color:var(--muted); border-bottom:1px solid #e2e2e2; margin-bottom:2px}
.popitem{display:block; width:100%; text-align:left; padding:5px 8px; border-radius:3px; color:#22262c; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.popitem:hover{background:var(--hover)}
.popitem .k{color:var(--muted); margin-right:6px}

/* ---------------- toast ---------------- */
.toast{
  position:fixed; left:50%; bottom:20px; transform:translate(-50%,10px);
  background:#22262c; color:#fff; padding:6px 12px; border-radius:3px;
  box-shadow:0 4px 14px rgba(0,0,0,.35); opacity:0; pointer-events:none;
  transition:opacity .15s ease, transform .15s ease; z-index:70; max-width:90vw; text-align:center;
}
.toast.on{opacity:1; transform:translate(-50%,0)}

@media (max-width:820px){
  .findlabel, .of, .tb.save span{display:none}
  .findbox{width:88px}
  .side{position:absolute; z-index:15; height:100%; box-shadow:2px 0 8px rgba(0,0,0,.25)}
  .splitter{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important}}