*{box-sizing:border-box;}

/* ===== Upload screen ===== */
.drop-zone{border:2px dashed #294577;border-radius:20px;padding:60px 20px;text-align:center;cursor:pointer;transition:0.25s;background:#0b1730;}
.drop-zone:hover, .drop-zone.dragover{border-color:#3b82f6;background:#0f1d3b;}
.drop-zone i{font-size:56px;color:#3b82f6;margin-bottom:16px;}
.dz-title{font-size:18px;font-weight:700;color:#e2e8f0;margin-bottom:6px;}
.dz-sub{font-size:13px;color:#94a3b8;}

/* ===== Editor shell ===== */
.editor-wrap{display:flex;flex-direction:column;gap:14px;}

.editor-toolbar{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px;
  background:#0b1730;border:1px solid #24467f;border-radius:16px;padding:10px 14px;
}
.tool-group{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}

.tool-btn{
  width:52px;height:44px;border-radius:12px;border:1px solid #24467f;background:#0f1d3b;
  color:#94a3b8;cursor:pointer;font-size:15px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;transition:0.2s;padding:4px 2px;
}
.tool-btn:hover{border-color:#3b82f6;color:white;}
.tool-btn.active{background:#2563eb;border-color:#2563eb;color:white;}

.icon-btn{
  width:48px;height:44px;border-radius:10px;border:1px solid #24467f;background:#0f1d3b;
  color:#cbd5e1;cursor:pointer;font-size:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;transition:0.2s;padding:4px 2px;
}
.icon-btn:hover{border-color:#3b82f6;color:white;}
.icon-btn.danger:hover{border-color:#ef4444;color:#fca5a5;}
.icon-btn:disabled{opacity:0.35;cursor:not-allowed;}

.tool-btn-label{font-size:8.5px;font-weight:600;line-height:1;letter-spacing:0.01em;white-space:nowrap;color:inherit;}

.zoom-label{font-size:12px;color:#94a3b8;min-width:44px;text-align:center;}

.ctx-item{display:flex;align-items:center;gap:6px;font-size:12px;color:#94a3b8;white-space:nowrap;}
.ctx-item input[type="color"]{width:30px;height:30px;border:none;background:transparent;cursor:pointer;padding:0;border-radius:6px;}
.ctx-item input[type="range"]{width:74px;accent-color:#3b82f6;}
.ctx-item input[type="checkbox"]{width:16px;height:16px;accent-color:#3b82f6;cursor:pointer;}
.ctx-item select{background:#0f1d3b;border:1px solid #24467f;color:white;border-radius:8px;padding:6px 8px;font-size:12px;}
.ctx-item input[type="number"]{background:#0f1d3b;border:1px solid #24467f;color:white;border-radius:8px;padding:6px 8px;font-size:12px;}
.ctx-btn{background:#0f1d3b;border:1px solid #24467f;color:#cbd5e1;border-radius:8px;padding:7px 12px;font-size:12px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:0.2s;}
.ctx-btn:hover{border-color:#3b82f6;color:white;}
.ctx-btn.danger{border-color:#7f1d1d;color:#fca5a5;}
.ctx-sep{width:1px;height:24px;background:#24467f;margin:0 2px;}
.ctx-icon-btn{width:30px;height:30px;border-radius:8px;border:1px solid #24467f;background:#0f1d3b;color:#cbd5e1;cursor:pointer;font-size:12px;display:flex;align-items:center;justify-content:center;}
.ctx-icon-btn:hover{border-color:#3b82f6;color:white;}
.ctx-icon-btn.active-toggle{background:#2563eb;border-color:#2563eb;color:white;}

/* ===== Doc-level action row ===== */
.doc-toolbar{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  background:#0b1730;border:1px solid #24467f;border-radius:14px;padding:10px 14px;
}
.doc-hint{margin-left:auto;font-size:12px;color:#64748b;display:flex;align-items:center;gap:6px;}

.editor-main{display:flex;gap:14px;align-items:flex-start;}

.side-panel-title{font-size:11px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:#64748b;padding:0 2px;display:flex;align-items:center;gap:6px;}

.pages-panel{display:flex;flex-direction:column;gap:8px;flex-shrink:0;}

.thumb-rail{
  width:110px;flex-shrink:0;max-height:640px;overflow-y:auto;
  display:flex;flex-direction:column;gap:10px;padding:4px;
  background:#0b1730;border:1px solid #24467f;border-radius:14px;
}
.thumb-item{position:relative;border:2px solid transparent;border-radius:10px;overflow:hidden;cursor:grab;background:#fff;transition:0.15s;}
.thumb-item.active{border-color:#3b82f6;}
.thumb-item.drag-over{border-color:#facc15;}
.thumb-item.dragging{opacity:0.35;}
.thumb-item canvas{width:100%;display:block;pointer-events:none;}
.thumb-item .thumb-num{position:absolute;bottom:4px;right:6px;background:rgba(2,8,23,0.75);color:white;font-size:10px;padding:1px 6px;border-radius:6px;pointer-events:none;}
.thumb-item .thumb-drag-handle{position:absolute;top:2px;left:2px;background:rgba(2,8,23,0.6);color:#cbd5e1;font-size:9px;padding:2px 4px;border-radius:4px;pointer-events:none;}
.thumb-add-btn{
  border:2px dashed #294577;border-radius:10px;background:transparent;color:#64748b;
  padding:16px 4px;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;transition:0.2s;
}
.thumb-add-btn:hover{border-color:#3b82f6;color:#3b82f6;}

.stage-wrap{
  flex:1;min-width:0;min-height:520px;max-height:640px;overflow:auto;
  background:#0b1730;border:1px solid #24467f;border-radius:14px;padding:24px;
  display:flex;justify-content:center;align-items:flex-start;
  overscroll-behavior:contain;
}
.page-stage{position:relative;flex:0 0 auto;background:#fff;box-shadow:0 8px 30px rgba(0,0,0,0.35);height:fit-content;min-width:1px;min-height:1px;}

/* ===== Properties panel (right column) ===== */
.properties-panel{display:flex;flex-direction:column;gap:8px;flex-shrink:0;width:230px;}
.properties-body{
  flex:1;display:flex;flex-wrap:wrap;align-content:flex-start;align-items:center;gap:10px;
  background:#0b1730;border:1px solid #24467f;border-radius:14px;padding:12px;
  max-height:640px;overflow-y:auto;min-height:120px;
}
.properties-body .ctx-item{width:100%;justify-content:space-between;}
.properties-body .ctx-item select,
.properties-body .ctx-item input[type="range"]{flex:1;margin-left:8px;}
.properties-body > span.ctx-item{width:auto;color:#64748b;font-size:12.5px;line-height:1.5;white-space:normal;justify-content:flex-start;}
.properties-body .ctx-url-input{
  width:100%;background:#0f1d3b;border:1px solid #24467f;color:#fff;border-radius:8px;
  padding:8px 10px;font-size:12.5px;
}
.properties-body .ctx-hint{width:100%;font-size:11.5px;color:#64748b;line-height:1.4;}
.properties-body .ctx-full-btn{width:100%;justify-content:center;}
#pdfCanvas, #drawCanvas{display:block;position:absolute;top:0;left:0;max-width:none;max-height:none;}
#drawCanvas{pointer-events:none;}
.overlay-layer{position:absolute;top:0;left:0;}
.overlay-layer.drawing-mode .ov-el{cursor:crosshair;}

.ov-el{
  position:absolute;border:1px dashed transparent;cursor:move;user-select:none;
}
.ov-el.selected{border-color:#3b82f6;}
.ov-el .ov-del{
  position:absolute;top:-12px;right:-12px;width:22px;height:22px;border-radius:50%;
  background:#ef4444;color:white;font-size:11px;display:none;align-items:center;justify-content:center;
  cursor:pointer;border:2px solid #fff;z-index:5;
}
.ov-el.selected .ov-del{display:flex;}
.ov-el .ov-resize{
  position:absolute;bottom:-7px;right:-7px;width:14px;height:14px;border-radius:3px;
  background:#3b82f6;border:2px solid #fff;cursor:nwse-resize;display:none;z-index:5;
}
.ov-el.selected .ov-resize{display:block;}

.ov-text{outline:none;white-space:pre-wrap;word-break:break-word;line-height:1.2;padding:2px;}
.ov-image img{width:100%;height:100%;display:block;pointer-events:none;}
.ov-rect{background:transparent;}
.ov-ellipse{background:transparent;border-radius:50%;}

/* Sticky notes */
.ov-note{border:none !important;box-shadow:0 4px 14px rgba(0,0,0,0.25);}
.ov-note .note-body{
  width:100%;height:100%;padding:8px 10px;font-size:12px;line-height:1.35;overflow:hidden;
  border-radius:2px 10px 10px 10px;outline:none;color:#1a1a1a;font-family:Arial,Helvetica,sans-serif;
}
.ov-note::after{content:"";position:absolute;bottom:0;right:0;width:0;height:0;
  border-style:solid;border-width:0 0 12px 12px;border-color:transparent transparent rgba(0,0,0,0.18) transparent;}

/* Lines / arrows */
.ov-line{background:transparent !important;}
.ov-line svg{width:100%;height:100%;display:block;overflow:visible;}
.ov-line .line-hit{cursor:move;}

/* Checkmark stamp */
.ov-check{background:transparent;}
.ov-check svg{width:100%;height:100%;display:block;overflow:visible;}

/* Hyperlink guide box (editor-only, invisible in the exported PDF) */
.ov-link{
  background:rgba(37,99,235,0.14) !important;border:1.5px dashed #2563eb !important;
  display:flex;align-items:center;justify-content:center;color:#93c5fd;font-size:13px;
}
.ov-link i{pointer-events:none;}

/* Crop guide box */
.ov-crop{background:rgba(34,211,238,0.10) !important;border:1.5px dashed #22d3ee !important;}

/* Encrypted-source notice */
.enc-notice{
  display:flex;align-items:center;gap:8px;background:#132a17;border:1px solid #16a34a;
  color:#86efac;border-radius:10px;padding:8px 12px;font-size:12.5px;
}

/* Password modal */
.pw-error{color:#fca5a5;font-size:12.5px;min-height:16px;margin-top:6px;}
.pw-input{
  width:100%;background:#0f1d3b;border:1px solid #24467f;color:#fff;border-radius:8px;
  padding:10px 12px;font-size:14px;
}

.editor-footer{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;}
.page-nav{display:flex;align-items:center;gap:12px;font-size:13px;color:#cbd5e1;}
.footer-actions{display:flex;gap:12px;flex-wrap:wrap;flex:1;justify-content:flex-end;min-width:0;}
.footer-actions .btn{padding:12px 22px;min-width:auto;flex:none;}

/* ===== Modals ===== */
.modal-backdrop{
  position:fixed;inset:0;background:rgba(2,8,23,0.72);z-index:1000;
  display:flex;align-items:center;justify-content:center;padding:16px;
}
.modal-box{
  background:#0b1730;border:1px solid #24467f;border-radius:18px;padding:20px;
  width:100%;max-width:560px;max-height:90vh;overflow-y:auto;
}
.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.modal-head h3{margin:0;font-size:16px;color:#e2e8f0;display:flex;align-items:center;gap:8px;}
.modal-close{background:transparent;border:none;color:#94a3b8;font-size:16px;cursor:pointer;width:32px;height:32px;border-radius:8px;}
.modal-close:hover{background:#1a2c50;color:white;}
.modal-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin:12px 0;}
.modal-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:12px 0;}
.modal-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:16px;}
.modal-actions .btn{flex:none;min-width:120px;padding:10px 18px;}

.sig-pad-wrap{background:#fff;border-radius:12px;overflow:hidden;border:1px solid #24467f;}
#sigPadCanvas{display:block;width:100%;height:auto;touch-action:none;cursor:crosshair;}

@media(max-width:900px){
  .editor-main{flex-direction:column;}
  .pages-panel{width:100%;}
  .thumb-rail{width:100%;flex-direction:row;overflow-x:auto;max-height:none;}
  .thumb-item{width:70px;flex-shrink:0;}
  .thumb-add-btn{width:70px;flex-shrink:0;}
  .stage-wrap{max-height:480px;width:100%;}
  .properties-panel{width:100%;}
  .properties-body{max-height:280px;}
  .modal-grid{grid-template-columns:1fr;}
  .doc-hint{margin-left:0;width:100%;}
  .doc-toolbar .ctx-btn{flex:1 1 auto;justify-content:center;}
}
@media(max-width:600px){
  .editor-toolbar{justify-content:center;}
  .tool-btn{width:46px;height:40px;}
  .icon-btn{width:42px;height:40px;}
  .tool-btn-label{font-size:7.5px;}
  .editor-footer{flex-direction:column;align-items:stretch;}
  .page-nav{justify-content:center;}
  .footer-actions{width:100%;justify-content:stretch;}
  .footer-actions .btn{flex:1 1 0;padding:12px 10px;white-space:nowrap;}
}
/* Stable zoom geometry: never let flexbox or CSS auto-sizing change the page aspect ratio. */
#pdfCanvas, #drawCanvas, .overlay-layer, .page-stage { box-sizing:border-box; }
.stage-wrap { contain: layout paint; }
@media(max-width:900px){ .stage-wrap{min-width:0;max-width:100%;} }