:root{
  --bg:#15161a; --panel:#22242b; --panel2:#2a2d35; --line:#383b44;
  --fg:#e8eaf0; --sub:#9aa0ad; --accent:#4f8cff; --accent2:#2f6fe0;
  --gold:#ffb347; --gold2:#ff9f1c;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  font:14px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif;
  background:var(--bg);color:var(--fg);overflow:hidden;
}
#app{display:flex;flex-direction:column;height:100%}

/* Toolbar */
#toolbar{display:flex;align-items:center;gap:6px;padding:8px 10px;
  background:var(--panel);border-bottom:1px solid var(--line);flex-wrap:wrap;
  position:relative;z-index:70}
.btn{
  display:inline-flex;align-items:center;gap:5px;
  padding:7px 11px;border:1px solid var(--line);border-radius:8px;
  background:var(--panel2);color:var(--fg);cursor:pointer;font-size:13px;
  user-select:none;white-space:nowrap;transition:background .12s,border-color .12s;
}
.btn:hover{background:#333742;border-color:#4a4e59}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.primary{background:var(--accent);border-color:var(--accent)}
.btn.primary:hover{background:var(--accent2)}
.btn.tool.active{background:var(--accent);border-color:var(--accent);color:#fff}
.spacer{flex:1}
.sep{width:1px;height:22px;background:var(--line);margin:0 4px}
#hint{font-size:12px;color:var(--sub);padding-right:6px}

/* Layout */
#main{flex:1;display:flex;min-height:0}
#sidebar{width:186px;flex:0 0 186px;background:var(--panel);
  border-right:1px solid var(--line);overflow-y:auto;padding:12px 10px}
#thumbs{display:flex;flex-direction:column;gap:12px;align-items:center}
.thumb{position:relative;cursor:pointer;border:2px solid transparent;
  border-radius:6px;padding:3px;line-height:0;background:#fff;transition:border-color .12s}
.thumb.active{border-color:var(--accent)}
.thumb canvas{display:block;border-radius:3px;max-width:100%}
.thumb .num{position:absolute;bottom:-7px;right:-7px;background:var(--panel2);
  color:var(--sub);font-size:11px;padding:1px 6px;border-radius:9px;
  line-height:1.5;border:1px solid var(--line)}

#viewer{flex:1;overflow:auto;background:#0f1013;position:relative}
#stage{position:relative;margin:24px auto;line-height:0;width:fit-content;
  box-shadow:0 8px 30px rgba(0,0,0,.55)}
#pdfCanvas{display:block;background:#fff}
#overlay{position:absolute;left:0;top:0;width:100%;height:100%;touch-action:none}
#overlay.tool-crosshair{cursor:crosshair}
#overlay.tool-move{cursor:default}
#empty{color:var(--sub);text-align:center;line-height:2;
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
#empty b{color:var(--fg)}

#cropBar{
  position:fixed;bottom:26px;left:50%;transform:translateX(-50%);
  background:var(--panel);border:1px solid var(--line);border-radius:11px;
  padding:9px 14px;display:flex;gap:8px;align-items:center;
  box-shadow:0 12px 34px rgba(0,0,0,.55);z-index:60;
  animation:pop .16s ease-out;
}
@keyframes pop{from{opacity:0;transform:translateX(-50%) translateY(8px)}}
#cropBar.hidden{display:none}
#cropBar .lbl{font-size:12px;color:var(--sub);margin-right:6px;white-space:nowrap}

/* Modal */
#modal{position:fixed;inset:0;background:rgba(0,0,0,.62);z-index:100;
  display:flex;align-items:center;justify-content:center;padding:16px}
#modal.hidden{display:none}
.dialog{background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:20px;width:430px;max-width:100%;max-height:90vh;overflow:auto;
  box-shadow:0 20px 60px rgba(0,0,0,.6)}
.dialog h3{margin:0 0 16px;font-size:16px}
.field{margin-bottom:12px}
.field>span{display:block;font-size:12px;color:var(--sub);margin-bottom:5px}
.row{display:flex;gap:10px}
.row>.field{flex:1}
input[type=text],input[type=number],textarea,select{
  background:#1a1c21;border:1px solid var(--line);color:var(--fg);
  border-radius:6px;padding:7px 9px;font:inherit;width:100%;outline:none}
input:focus,textarea:focus,select:focus{border-color:var(--accent)}
input[type=color]{width:100%;height:36px;padding:2px;background:#1a1c21;
  border:1px solid var(--line);border-radius:6px;cursor:pointer}
input[type=range]{width:100%;accent-color:var(--accent)}
.actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}
.tip{font-size:12px;color:var(--sub);margin:-4px 0 10px;line-height:1.6}

/* Status */
#loading{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  background:rgba(0,0,0,.82);border:1px solid var(--line);padding:10px 20px;
  border-radius:9px;font-size:13px;display:none;z-index:200}
#loading.on{display:block}
#toast{position:fixed;bottom:96px;left:50%;transform:translateX(-50%) translateY(10px);
  background:#2b2f3a;border:1px solid var(--line);padding:8px 18px;border-radius:20px;
  font-size:13px;opacity:0;pointer-events:none;transition:.25s;z-index:300}
#toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* Brand */
#brandWrap{position:relative;display:inline-flex}
#brand{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 11px 4px 6px;border-radius:8px;
  background:linear-gradient(135deg,rgba(255,179,71,.16),rgba(255,159,28,.04));
  border:1px solid rgba(255,179,71,.38);color:var(--fg);cursor:pointer;
  font:inherit;font-size:13px;transition:.12s;user-select:none;
}
#brand:hover{
  border-color:var(--gold);
  background:linear-gradient(135deg,rgba(255,179,71,.26),rgba(255,159,28,.08));
}
#brand:active{transform:translateY(1px)}
#brand .logo{
  width:20px;height:20px;border-radius:6px;flex:0 0 20px;
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:12px;color:#1a1206;
}
#brand .txt{display:flex;flex-direction:column;line-height:1.05;text-align:left}
#brand .txt b{font-size:12px;letter-spacing:.2px}
#brand .txt small{font-size:9.5px;color:var(--sub)}

#brandPanel{
  position:absolute;top:calc(100% + 10px);right:0;z-index:90;
  width:326px;max-width:calc(100vw - 32px);
  background:var(--panel);border:1px solid var(--line);border-radius:16px;
  box-shadow:0 24px 60px rgba(0,0,0,.7);overflow:hidden;
  transform-origin:top right;
  transition:opacity .16s ease,transform .16s ease;
}
#brandPanel.hidden{opacity:0;transform:scale(.94) translateY(-6px);pointer-events:none}

.bp-head{
  padding:16px 18px;display:flex;align-items:center;gap:11px;
  background:linear-gradient(135deg,rgba(255,179,71,.16),rgba(255,159,28,.05));
  border-bottom:1px solid var(--line);position:relative;
}
.bp-head .logo{
  width:38px;height:38px;border-radius:11px;flex:0 0 38px;
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:21px;color:#1a1206;
  box-shadow:0 4px 14px rgba(255,159,28,.35);
}
.bp-head .meta{flex:1;min-width:0}
.bp-head .meta b{display:block;font-size:15px;letter-spacing:.3px}
.bp-head .meta a{
  display:inline-block;font-size:12px;color:var(--gold);
  text-decoration:none;margin-top:1px;
}
.bp-head .meta a:hover{text-decoration:underline}
.bp-close{
  position:absolute;top:11px;right:11px;width:24px;height:24px;
  border:none;background:rgba(255,255,255,.06);color:var(--sub);
  border-radius:7px;cursor:pointer;font-size:15px;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:.12s;
}
.bp-close:hover{background:rgba(255,255,255,.13);color:var(--fg)}

.bp-body{padding:14px 18px 18px}

.bp-sec-title{
  font-size:11px;color:var(--sub);letter-spacing:1px;
  text-transform:uppercase;margin:4px 0 9px;
}

/* Collapse toggle */
.bp-toggle{
  font-size:11px;color:var(--sub);letter-spacing:1px;
  text-transform:uppercase;margin:16px 0 0;
  display:flex;align-items:center;justify-content:space-between;
  cursor:pointer;user-select:none;
  padding:5px 6px;border-radius:7px;
  transition:background .12s,color .12s;
}
.bp-toggle:hover{background:rgba(255,179,71,.07);color:var(--gold)}
.bp-toggle .ttl{display:flex;align-items:center;gap:6px}
.bp-toggle .arrow{
  font-size:11px;color:var(--sub);
  transition:transform .22s ease,color .12s;
  display:inline-block;
}
.bp-toggle:hover .arrow{color:var(--gold)}
.bp-toggle.open .arrow{transform:rotate(180deg)}

.bp-collapse{
  max-height:0;overflow:hidden;opacity:0;
  transition:max-height .3s ease,opacity .22s ease,margin-top .2s ease;
  margin-top:0;
}
.bp-collapse.open{
  opacity:1;margin-top:10px;
}
#contactWrap.open{max-height:220px}
#donateWrap.open{max-height:430px}
#statsWrap.open{max-height:190px}

.bp-url{
  display:flex;align-items:center;gap:8px;
  background:#1a1c21;border:1px solid var(--line);border-radius:9px;
  padding:8px 10px;font-size:13px;
}
.bp-url span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--gold)}
.bp-url button{
  border:1px solid var(--line);background:var(--panel2);color:var(--fg);
  border-radius:7px;padding:4px 10px;font-size:12px;cursor:pointer;transition:.12s;
  white-space:nowrap;
}
.bp-url button:hover{background:#333742;border-color:var(--gold)}

.bp-contact{display:flex;flex-direction:column;gap:7px}
.bp-contact .item{
  display:flex;align-items:center;gap:10px;
  background:#1a1c21;border:1px solid var(--line);border-radius:9px;
  padding:9px 11px;font-size:12.5px;
}
.bp-contact .item .ic{
  width:24px;height:24px;flex:0 0 24px;border-radius:7px;
  background:rgba(79,140,255,.15);color:var(--accent);
  display:flex;align-items:center;justify-content:center;font-size:13px;
}
.bp-contact .item .lab{color:var(--sub);flex:0 0 42px}
.bp-contact .item .val{flex:1;user-select:text;font-family:ui-monospace,Menlo,Consolas,monospace;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bp-contact .item button{
  border:1px solid var(--line);background:transparent;color:var(--sub);
  border-radius:6px;padding:2px 8px;font-size:11px;cursor:pointer;transition:.12s;
  flex:0 0 auto;
}
.bp-contact .item button:hover{color:var(--gold);border-color:var(--gold)}

.bp-donate{display:flex;gap:11px}
.bp-donate .qr{
  flex:1;background:#1a1c21;border:1px solid var(--line);border-radius:11px;
  padding:11px 9px 9px;text-align:center;
}
.bp-donate .qr .box{
  width:100%;aspect-ratio:1/1;border-radius:8px;overflow:hidden;
  background:#fff;display:flex;align-items:center;justify-content:center;
  margin-bottom:7px;
}
.bp-donate .qr .box img{width:100%;height:100%;object-fit:contain;display:block}
.bp-donate .qr .name{font-size:12px;color:var(--sub)}
.bp-donate .qr .name b{color:var(--gold);font-weight:600}

.bp-donate-tip{
  margin-top:11px;padding:9px 11px;
  background:rgba(255,179,71,.08);
  border:1px dashed rgba(255,179,71,.4);
  border-radius:9px;
  font-size:12px;color:var(--gold);
  text-align:center;line-height:1.7;
}
.bp-donate-tip b{color:#ffcf80;font-weight:600}

.bp-stats{
  display:flex;gap:11px;
}
.bp-stats .stat-item{
  flex:1;background:#1a1c21;
  border:1px solid var(--line);
  border-radius:11px;
  padding:14px 10px;text-align:center;
  overflow:hidden;
}
.bp-stats .stat-num{
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:15.5px;font-weight:700;
  color:var(--gold);
  font-variant-numeric:tabular-nums;
  letter-spacing:.3px;
  line-height:1.3;
  margin-bottom:7px;
  white-space:nowrap;
}
.bp-stats .stat-label{
  font-size:11.5px;color:var(--sub);
}

.bp-foot{
  margin-top:16px;padding-top:12px;border-top:1px dashed var(--line);
  text-align:center;font-size:11.5px;color:var(--sub);line-height:1.7;
}
.bp-foot b{color:var(--gold)}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#3a3d46;border-radius:6px}
::-webkit-scrollbar-track{background:transparent}


/* ============ 给团队留言 ============ */
#messageWrap.open{max-height:360px}

.bp-msg{
  display:flex;flex-direction:column;gap:8px;
}
.bp-msg input,
.bp-msg textarea{
  background:#1a1c21;border:1px solid var(--line);color:var(--fg);
  border-radius:7px;padding:8px 10px;font:inherit;font-size:12.5px;
  outline:none;resize:vertical;width:100%;
}
.bp-msg input:focus,
.bp-msg textarea:focus{border-color:var(--gold)}
.bp-msg input::placeholder,
.bp-msg textarea::placeholder{color:#5a5e6a}
.bp-msg textarea{min-height:70px;line-height:1.6;font-family:inherit}

.bp-msg-foot{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
}
.bp-msg-count{font-size:11px;color:var(--sub)}
.bp-msg-count b{color:var(--gold);font-weight:600}
.bp-msg-foot .btn{padding:6px 14px;font-size:12.5px}
.bp-msg-foot .btn:disabled{opacity:.6;cursor:not-allowed}




/* ============ 缩略图拖拽 ============ */
.thumb.dragging{opacity:.4;cursor:grabbing}
.thumb.drag-over{border-color:var(--gold)!important;background:rgba(255,179,71,.15)}
.thumb{cursor:grab}
.thumb:active{cursor:grabbing}

/* ============ 分享二维码 ============ */
.share-qr-wrap{text-align:center;padding:12px 0 6px}
.share-qr-box{
  width:220px;height:220px;margin:0 auto 10px;
  background:#fff;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  padding:8px;box-shadow:0 4px 20px rgba(0,0,0,.35);
}
.share-qr-box img{width:100%;height:100%;display:block;border-radius:6px;image-rendering:pixelated}
.share-qr-loading{color:#999;font-size:13px}
.share-qr-hint{font-size:12px;color:var(--sub);margin-bottom:14px}

.share-url-row{display:flex;gap:8px;align-items:center}
.share-url-row input{
  flex:1;background:#1a1c21;border:1px solid var(--line);color:var(--fg);
  border-radius:7px;padding:8px 10px;font:inherit;font-size:12px;
  font-family:ui-monospace,Menlo,Consolas,monospace;
  outline:none;overflow:hidden;text-overflow:ellipsis;
}
.share-url-row input:focus{border-color:var(--gold)}

#exportModal .row>.field{min-width:0}
#exportModal select,#exportModal input{width:100%}


/* 导出图片 / 分享 弹窗 */
#exportModal,
#shareModal{
  position:fixed;inset:0;background:rgba(0,0,0,.62);z-index:100;
  display:flex;align-items:center;justify-content:center;padding:16px;
}
#exportModal.hidden,
#shareModal.hidden{display:none}



/* ============ 缩放条 ============ */
#zoomBar{
  position:absolute;bottom:18px;right:18px;z-index:20;
  display:flex;align-items:center;gap:2px;
  background:var(--panel);border:1px solid var(--line);
  border-radius:10px;padding:4px;
  box-shadow:0 6px 20px rgba(0,0,0,.5);
  user-select:none;
}
#zoomBar button{
  width:32px;height:32px;border:none;background:transparent;
  color:var(--fg);font-size:15px;cursor:pointer;border-radius:7px;
  transition:background .12s;
  display:flex;align-items:center;justify-content:center;
  font-family:inherit;
}
#zoomBar button:hover{background:rgba(255,255,255,.08)}
#zoomBar button:active{background:rgba(255,255,255,.14)}
#zoomVal{
  font-size:12px;color:var(--sub);
  min-width:46px;text-align:center;cursor:pointer;
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-weight:600;
}
#zoomVal:hover{color:var(--gold)}



/* 版权声明 */
.bp-copyright{
  margin-top:10px;padding-top:10px;
  border-top:1px dashed var(--line);
  font-size:10.5px;color:#5a5e6a;
  line-height:1.7;
}

.page-footer{
  text-align:center;padding:16px 20px;
  font-size:11.5px;color:#5a5e6a;
  border-top:1px solid var(--line);
  background:var(--panel);
}
.page-footer a{
  color:var(--sub);text-decoration:none;
  border-bottom:1px dotted #454a56;
}
.page-footer a:hover{color:var(--gold);border-color:var(--gold)}


/* 5 个新弹窗通用 */
#splitModal, #pageNumModal, #signModal, #compressModal {
  position:fixed;inset:0;background:rgba(0,0,0,.62);z-index:100;
  display:flex;align-items:center;justify-content:center;padding:16px;
}
#splitModal.hidden, #pageNumModal.hidden,
#signModal.hidden, #compressModal.hidden { display:none; }

/* 手写板 */
.sign-pad-wrap{
  width:100%;aspect-ratio:16/7;
  background:#fff;border-radius:10px;
  overflow:hidden;margin-bottom:10px;
  border:1px solid var(--line);
  box-shadow:inset 0 2px 8px rgba(0,0,0,.15);
}
#signPad{
  display:block;width:100%;height:100%;
  cursor:crosshair;touch-action:none;
}

/* 手写签名弹窗 */
#signModal{
  position:fixed;inset:0;background:rgba(0,0,0,.62);z-index:100;
  display:flex;align-items:center;justify-content:center;padding:16px;
}
#signModal.hidden{display:none}

.sign-pad-wrap{
  width:100%;aspect-ratio:16/7;
  background:#fff;border-radius:10px;
  overflow:hidden;margin-bottom:10px;
  border:1px solid var(--line);
  box-shadow:inset 0 2px 8px rgba(0,0,0,.15);
}
#signPad{
  display:block;width:100%;height:100%;
  cursor:crosshair;touch-action:none;
}
#signPlaceBar{
  position:fixed;bottom:26px;left:50%;transform:translateX(-50%);
  background:var(--panel);border:1px solid var(--line);border-radius:11px;
  padding:9px 14px;display:flex;gap:8px;align-items:center;
  box-shadow:0 12px 34px rgba(0,0,0,.55);z-index:60;
  animation:pop .16s ease-out;
}
#signPlaceBar.hidden{display:none}
#signPlaceBar .lbl{font-size:12px;color:var(--sub);margin-right:6px;white-space:nowrap}