/* pdf.bolinwaiyu.com 样式 */
:root{--bg:#e9ebef;--bar:#fff;--line:#dfe3e8;--ink:#1f2937;--muted:#6b7280;--pri:#d9382b;--sel:#2563eb;--radius:10px;
  --font:"Helvetica Neue",Arial,"PingFang SC","Microsoft YaHei","Noto Sans CJK SC","Noto Sans SC",sans-serif;}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font-family:var(--font);background:var(--bg);color:var(--ink);display:flex;flex-direction:column;overflow:hidden;-webkit-text-size-adjust:100%}
button{font-family:inherit}
.hidden{display:none!important}
.muted{color:var(--muted)}

/* 顶栏 */
#top{display:flex;align-items:center;gap:10px;padding:6px 10px;background:var(--bar);border-bottom:1px solid var(--line);flex:0 0 auto;z-index:20}
.brand{display:flex;align-items:center;gap:6px;font-weight:700;white-space:nowrap}
.logo{background:var(--pri);color:#fff;font-size:12px;padding:3px 6px;border-radius:6px;letter-spacing:.5px}
.tools{display:flex;align-items:center;gap:4px;overflow-x:auto;flex:1;min-width:0;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tools::-webkit-scrollbar{display:none}
.tb{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-width:52px;height:44px;padding:2px 6px;border:1px solid transparent;border-radius:8px;background:none;color:var(--ink);cursor:pointer;font-size:11px;white-space:nowrap;flex:0 0 auto}
.tb i{font-style:normal;font-size:17px;line-height:1;font-weight:700}
.tb svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dz-ico svg{width:56px;height:56px;fill:none;stroke:#d9382b;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tb:hover{background:#f3f4f6}
.tb.on{background:#eef2ff;border-color:#c7d2fe;color:#3730a3}
.tb.primary{background:var(--pri);color:#fff}
.tb.primary:hover{background:#c22f23}
.tb:disabled{opacity:.4;cursor:default}
.sep{width:1px;height:28px;background:var(--line);margin:0 3px;flex:0 0 auto}
.zoomv{font-size:12px;min-width:42px;text-align:center;color:var(--muted)}

/* 属性条 */
.props{display:flex;align-items:center;gap:10px;padding:5px 12px;background:#fffbeb;border-bottom:1px solid #fde68a;font-size:13px;flex:0 0 auto;overflow-x:auto;white-space:nowrap}
.props .pname{font-weight:700}
.props .ptip{color:var(--muted);font-size:12px}
.props.idle .pname{color:var(--muted)}
.pf{display:flex;align-items:center;gap:5px}
.pf input[type=number]{width:62px;padding:3px 5px;border:1px solid #d1d5db;border-radius:6px;font-size:13px}
.pf input[type=color]{width:30px;height:24px;padding:0;border:1px solid #d1d5db;border-radius:6px;background:none}
.pf input[type=range]{width:90px}
.swatches{display:inline-flex;gap:4px;align-items:center}
.swatches b{width:18px;height:18px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #cbd5e1;cursor:pointer;display:inline-block}
.swatches b.on{box-shadow:0 0 0 2px var(--sel)}
.pb{padding:5px 11px;border:1px solid #d1d5db;border-radius:7px;background:#fff;cursor:pointer;font-size:13px;color:var(--ink)}
.pb:hover{background:#f3f4f6}
.pb.primary{background:var(--pri);color:#fff;border-color:var(--pri)}
.pb.danger{color:#b91c1c;border-color:#fecaca;background:#fff5f5}

/* 主区域 */
#main{flex:1;min-height:0;overflow:auto;position:relative;-webkit-overflow-scrolling:touch}
.drop{height:100%;display:flex;align-items:center;justify-content:center;padding:20px}
.dropin{background:#fff;border:2px dashed #cbd5e1;border-radius:16px;padding:40px 30px;text-align:center;max-width:560px;cursor:pointer;transition:.15s}
.dropin:hover,.drop.over .dropin{border-color:var(--pri);background:#fff8f7}
.dz-ico{line-height:0}
.dropin h1{font-size:19px;margin:10px 0 8px}
.dropin p{margin:6px 0;font-size:14px;color:#374151;line-height:1.6}
.pages{padding:14px 0 60px;display:flex;flex-direction:column;align-items:center;gap:14px}
.page{position:relative;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.18);flex:0 0 auto}
.page canvas{display:block;width:100%;height:100%}
.page.deleted canvas,.page.deleted .ov{opacity:.25;pointer-events:none}
.page .delmark{position:absolute;inset:0;display:none;align-items:center;justify-content:center;font-size:20px;color:#b91c1c;font-weight:700;z-index:5}
.page.deleted .delmark{display:flex}
.pnum{position:absolute;left:0;bottom:-16px;font-size:11px;color:var(--muted);display:flex;gap:8px;align-items:center}
.pnum button{border:none;background:none;color:#94a3b8;cursor:pointer;font-size:11px;padding:0}
.pnum button:hover{color:#b91c1c}
.ov{position:absolute;left:0;top:0;transform-origin:0 0}
.ov.draw{cursor:crosshair;touch-action:none}
.ov.addtext{cursor:text;touch-action:none}
.ov.stamp{cursor:copy;touch-action:none}
.tl{position:absolute;inset:0}
.tline{position:absolute;cursor:text;border:1px dashed transparent;border-radius:2px}
.ov.selmode .tline:hover{border-color:#60a5fa;background:rgba(96,165,250,.12)}
.tline.used{display:none}
body.noselect .tl{display:none}
.livesvg{position:absolute;left:0;top:0;pointer-events:none;overflow:visible}
/* 译文标注：只在网页上显示，不参与导出 */
.trs{position:absolute;inset:0;pointer-events:none}
.trl{position:absolute;color:#1e3a8a;background:rgba(255,250,205,.93);line-height:1.25;padding:0 3px 1px;border-radius:3px;white-space:normal;word-break:break-word;box-shadow:0 0 0 .5px rgba(0,0,0,.08);max-width:100%}
body.tr-off .trs{display:none}

/* 对象 */
.obj{position:absolute;touch-action:none;user-select:none;-webkit-user-select:none}
.obj.sel{outline:1.5px solid var(--sel);outline-offset:1px}
.obj .cover{position:absolute;pointer-events:none}
.obj.text,.obj.symbol{cursor:move}
.obj .ed{position:relative;font-family:var(--font);white-space:pre;min-width:.6em;min-height:1em;outline:none;cursor:move;user-select:none;-webkit-user-select:none}
.obj.editing .ed{cursor:text;user-select:text;-webkit-user-select:text}
.obj.editing{outline:1.5px solid var(--sel);background:rgba(255,255,255,.4)}
.obj.symbol .ed{font-family:"Segoe UI Symbol","Apple Symbols","Noto Sans Symbols2","Noto Sans Symbols","DejaVu Sans",var(--font)}
.obj.image img{display:block;width:100%;height:100%;pointer-events:none;-webkit-user-drag:none}
.obj.image,.obj.rect{cursor:move}
.obj.rect{box-shadow:inset 0 0 0 1px rgba(0,0,0,.04)}
.obj.ink svg{display:block;overflow:visible;pointer-events:none}
.obj.ink svg path{pointer-events:visibleStroke;cursor:move}
.obj.ink{pointer-events:none}
.obj.ink.sel{pointer-events:auto;outline:1.5px dashed var(--sel)}
.h{position:absolute;width:12px;height:12px;background:#fff;border:1.5px solid var(--sel);border-radius:3px;display:none;z-index:3}
.obj.sel .h{display:block}
.h.br{right:-7px;bottom:-7px;cursor:nwse-resize}
.grip{position:absolute;left:-14px;top:-14px;width:20px;height:20px;background:var(--sel);color:#fff;border-radius:50%;display:none;align-items:center;justify-content:center;font-size:12px;cursor:move;z-index:3;line-height:1}
.obj.sel .grip,.obj.editing .grip{display:flex}
.xdel{position:absolute;right:-14px;top:-14px;width:20px;height:20px;background:#ef4444;color:#fff;border-radius:50%;display:none;align-items:center;justify-content:center;font-size:12px;cursor:pointer;z-index:3;line-height:1}
.obj.sel .xdel,.obj.editing .xdel{display:flex}
@media (pointer:coarse){.h{width:18px;height:18px}.h.br{right:-10px;bottom:-10px}.grip,.xdel{width:26px;height:26px;font-size:14px}.grip{left:-18px;top:-18px}.xdel{right:-18px;top:-18px}}

/* 提示 */
.hint{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);background:#1f2937;color:#fff;padding:8px 14px;border-radius:999px;font-size:13px;z-index:30;box-shadow:0 4px 14px rgba(0,0,0,.25);max-width:92vw;text-align:center}
.hint button{margin-left:8px;background:#374151;border:none;color:#fff;border-radius:999px;padding:3px 10px;cursor:pointer;font-size:12px}
.toast{position:fixed;left:50%;top:70px;transform:translateX(-50%);background:#111827;color:#fff;padding:10px 16px;border-radius:10px;font-size:14px;z-index:60;box-shadow:0 6px 20px rgba(0,0,0,.3);max-width:90vw}
.toast.err{background:#b91c1c}
.toast.ok{background:#15803d}

/* 弹出面板 */
.pop{position:fixed;z-index:40;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.2);width:min(420px,94vw)}
.pop-h{padding:9px 12px;font-size:12px;color:var(--muted);border-bottom:1px solid var(--line)}
.pop-f{padding:8px 12px;border-top:1px solid var(--line);display:flex;gap:12px;align-items:center;font-size:13px;flex-wrap:wrap}
.pop-f input[type=number]{width:60px;padding:3px 5px;border:1px solid #d1d5db;border-radius:6px}
.pop-f input[type=color]{width:30px;height:24px;padding:0;border:1px solid #d1d5db;border-radius:6px;background:none}
.symgrid{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;padding:10px;max-height:50vh;overflow:auto}
.symgrid button{height:44px;font-size:22px;border:1px solid #e5e7eb;border-radius:8px;background:#fff;cursor:pointer;font-family:"Segoe UI Symbol","Apple Symbols","Noto Sans Symbols2","Noto Sans Symbols","DejaVu Sans",var(--font);line-height:1}
.symgrid button:hover{background:#eef2ff;border-color:#c7d2fe}
.symgrid button.on{background:#dbeafe;border-color:var(--sel)}
.symgrid button.big{color:#15803d}
.symgrid button.red{color:#d9382b}
.siglist{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;padding:10px;max-height:40vh;overflow:auto}
.siglist:empty::after{content:"还没有签名，点下面「手写新签名」";color:var(--muted);font-size:12px;grid-column:1/-1;padding:6px}
.sigitem{position:relative;border:1px solid #e5e7eb;border-radius:8px;height:64px;display:flex;align-items:center;justify-content:center;cursor:pointer;background:#fafafa}
.sigitem:hover{border-color:var(--sel)}
.sigitem img{max-width:90%;max-height:80%}
.sigitem .rm{position:absolute;right:2px;top:0;border:none;background:none;color:#9ca3af;cursor:pointer;font-size:14px}
.sigitem .rm:hover{color:#b91c1c}

/* 签名弹窗 */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:50;display:flex;align-items:center;justify-content:center;padding:12px}
.mbox{background:#fff;border-radius:14px;width:min(680px,100%);padding:14px;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.mh{font-weight:700;font-size:16px;margin-bottom:10px;display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:6px}
.mh .muted{font-weight:400;font-size:12px}
.padwrap{position:relative;border:1px solid #d1d5db;border-radius:10px;background:#fff;overflow:hidden}
#sigPad{display:block;width:100%;height:240px;touch-action:none;cursor:crosshair}
.padline{position:absolute;left:24px;right:24px;bottom:52px;border-bottom:1px dashed #d1d5db;pointer-events:none}
.mrow{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:13px;flex-wrap:wrap}
.mrow.end{justify-content:flex-end}
.mrow .grow{flex:1}
.mrow select{padding:4px 6px;border:1px solid #d1d5db;border-radius:6px}

@media (max-width:640px){
  .brand .bname{display:none}
  .tb{min-width:46px;height:42px;font-size:10px;padding:2px 4px}
  .tb i{font-size:16px}
  .pages{padding:8px 0 50px;gap:10px}
  .symgrid{grid-template-columns:repeat(6,1fr)}
  .pop{left:3vw!important;right:3vw;width:94vw}
  #sigPad{height:200px}
}