:root{
  --panel:#1f2531; --panel-2:#2a3140; --line:#353d4d;
  --txt:#e7ebf3; --muted:#9aa6bd;
  --accent:#3d6bf0; --accent-hover:#2f5be0; --danger:#ef5a6f;
  --work:#f0f1f5; --page:#ffffff; --hl:#ffd23f;
  --toolbar-h:52px; --panel-w:300px;
  --shadow:0 6px 24px rgba(15,23,42,.18);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--txt); background:var(--work); overflow:hidden;
}

/* ============================ TOOLBAR ============================ */
.toolbar{
  height:var(--toolbar-h); display:flex; align-items:center; gap:6px; padding:0 10px;
  background:var(--panel); border-bottom:1px solid var(--line); position:relative; z-index:30;
  user-select:none; overflow-x:auto;
}
.tb-group{display:flex; align-items:center; gap:4px}
.tb-sep{width:1px; height:26px; background:var(--line); margin:0 4px; flex:none}
.tb-spacer{flex:1}
.brand-mini{margin-right:2px}
.logo-badge{
  display:inline-grid; place-items:center; width:34px; height:28px; border-radius:7px;
  font-weight:800; font-size:12px; letter-spacing:.5px; color:#fff;
  background:linear-gradient(135deg,#4f7cff,#6a5cff); box-shadow:0 2px 8px rgba(79,124,255,.4);
}

.btn{
  display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 11px;
  background:var(--panel-2); color:var(--txt); border:1px solid var(--line); border-radius:8px;
  font-size:13px; font-weight:500; cursor:pointer; white-space:nowrap; transition:.12s;
}
.btn:hover{background:#323a4b; border-color:#3f4860}
.btn:disabled{opacity:.4; cursor:not-allowed}
.btn.lg{height:42px; padding:0 20px; font-size:14px}
.btn-accent{background:var(--accent); border-color:var(--accent); color:#fff}
.btn-accent:hover{background:var(--accent-hover); border-color:var(--accent-hover)}
.icon-btn{padding:0; width:34px; justify-content:center; font-size:16px}
.btn.danger:hover{background:rgba(239,90,111,.16); border-color:var(--danger); color:#ffb3bf}
.ic{width:18px; height:18px; fill:currentColor; flex:none}
.ic.mini{width:15px; height:15px; opacity:.8}

.toggle.on{background:var(--accent); border-color:var(--accent); color:#fff}

/* zoom */
.zoom{gap:2px}
.zoom .icon-btn{width:30px; height:30px; font-size:18px; line-height:1}
.zoom-label{min-width:46px; text-align:center; font-size:12px; color:var(--muted)}

/* tools */
.tools{gap:3px}
.tool{
  width:36px; height:36px; display:grid; place-items:center; cursor:pointer;
  background:transparent; border:1px solid transparent; border-radius:8px; color:var(--muted); transition:.12s;
}
.tool:hover{background:var(--panel-2); color:var(--txt)}
.tool.active{background:rgba(61,107,240,.16); border-color:rgba(61,107,240,.5); color:#9db8ff}
.tool .ic{width:19px; height:19px}

/* props */
.props{gap:6px}
.prop{display:inline-flex; align-items:center; gap:5px}
.color-prop{position:relative; width:34px; height:34px; border:1px solid var(--line); border-radius:8px; overflow:hidden; cursor:pointer; background:var(--panel-2)}
.color-prop input[type=color]{position:absolute; inset:-4px; width:calc(100% + 8px); height:calc(100% + 8px); border:0; padding:0; cursor:pointer; opacity:0}
.swatch{position:absolute; inset:6px; border-radius:5px; background:#1f2937; pointer-events:none; box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.size-prop{height:34px; padding:0 8px; background:var(--panel-2); border:1px solid var(--line); border-radius:8px}
#sizeInput{width:42px; background:transparent; border:0; color:var(--txt); font-size:13px; text-align:center; outline:none}
#sizeInput::-webkit-inner-spin-button{opacity:.5}
.font-prop select{
  height:34px; max-width:150px; background:var(--panel-2); color:var(--txt); border:1px solid var(--line);
  border-radius:8px; padding:0 8px; font-size:13px; cursor:pointer; outline:none;
}

/* ============================ MAIN ============================ */
.main{display:flex; height:calc(100% - var(--toolbar-h)); position:relative}
.workspace{flex:1; overflow:auto; position:relative; padding:28px 0 60px}
.pages{display:flex; flex-direction:column; align-items:center; gap:22px; min-height:100%}

/* dropzone / empty state */
.dropzone{position:absolute; inset:0; display:grid; place-items:center; padding:24px}
.dropzone.hidden{display:none}
.dropzone.drag .dz-card{border-color:var(--accent); background:#fff; transform:scale(1.01)}
.dz-card{
  width:min(460px,90%); text-align:center; padding:40px 32px; background:#fbfcfe;
  border:2px dashed #c5ccdb; border-radius:18px; color:#3a4253; transition:.15s;
}
.dz-logo{
  width:64px; height:64px; margin:0 auto 18px; border-radius:16px; display:grid; place-items:center;
  font-weight:800; color:#fff; font-size:20px; letter-spacing:.5px;
  background:linear-gradient(135deg,#4f7cff,#6a5cff); box-shadow:0 8px 24px rgba(79,124,255,.4);
}
.dz-card h2{margin:0 0 4px; font-size:20px; color:#1f2937}
.dz-card p{margin:6px 0; color:#6b7488}
.dz-hint{font-size:12.5px; color:#94a0b5; margin-top:16px; line-height:1.5}

/* page + overlay */
.page-wrap{position:relative; background:var(--page); box-shadow:var(--shadow); border-radius:2px; line-height:0}
.page-canvas{display:block; border-radius:2px}
.page-num{
  position:absolute; top:-22px; left:0; font-size:11px; color:#94a0b5; line-height:1;
  font-weight:500; letter-spacing:.3px;
}
.overlay{position:absolute; inset:0; line-height:normal}
.overlay.tool-select{cursor:default}
.overlay.tool-text{cursor:text}
.overlay.tool-draw,.overlay.tool-highlight,.overlay.tool-rect,.overlay.tool-erase{cursor:crosshair}
.overlay.tool-image{cursor:copy}

/* editable elements */
.el{position:absolute; box-sizing:border-box; z-index:3}
/* masks/covers always beneath real content (text/images) so later edits show on top */
.el.coverlayer{z-index:1 !important}
.el.text{
  min-width:8px; min-height:1em; white-space:pre; overflow:visible; outline:none;
  line-height:1.25; cursor:move; padding:0; border:0; transform-origin:top left;
  caret-color:var(--accent);
}
.el.text.editing{cursor:text; outline:1px solid rgba(61,107,240,.6); outline-offset:0; min-width:24px}
.el.text.editing:empty::before{content:"Текст"; color:#9aa3b2; opacity:.6; pointer-events:none}
.el.image img{width:100%; height:100%; display:block; pointer-events:none}
.el.image,.el.rect,.el.highlight{cursor:move}
.el.draw{pointer-events:none}
.el.draw polyline{pointer-events:stroke; cursor:move; fill:none; stroke-linecap:round; stroke-linejoin:round}

.el.selected{outline:1.5px solid var(--accent); outline-offset:1px}

/* resize handles */
.handle{
  position:absolute; width:10px; height:10px; background:#fff; border:1.5px solid var(--accent);
  border-radius:2px; z-index:5;
}
.handle.nw{left:-5px; top:-5px; cursor:nwse-resize}
.handle.ne{right:-5px; top:-5px; cursor:nesw-resize}
.handle.sw{left:-5px; bottom:-5px; cursor:nesw-resize}
.handle.se{right:-5px; bottom:-5px; cursor:nwse-resize}
.handle.n{left:50%; top:-5px; margin-left:-5px; cursor:ns-resize}
.handle.s{left:50%; bottom:-5px; margin-left:-5px; cursor:ns-resize}
.handle.w{left:-5px; top:50%; margin-top:-5px; cursor:ew-resize}
.handle.e{right:-5px; top:50%; margin-top:-5px; cursor:ew-resize}

/* floating delete (✕) badge on the selected element */
.del-btn{
  position:absolute; width:22px; height:22px; transform:translate(-50%,-50%);
  display:grid; place-items:center; padding:0; z-index:8; line-height:1;
  background:var(--danger); color:#fff; border:2px solid #fff; border-radius:50%;
  font-size:11px; font-weight:700; cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,.35);
}
.del-btn:hover{background:#d83a50}

/* marquee preview while drawing a shape */
.marquee{position:absolute; border:1.5px dashed var(--accent); background:rgba(61,107,240,.08); pointer-events:none; z-index:6}
.marquee.select{border-style:solid; border-width:1px; background:rgba(61,107,240,.10)}
/* recognise-blocks overlay (smallpdf-style outlines) */
/* format painter armed: copy cursor over the page + highlighted text boxes */
body.style-painter .overlay{cursor:copy}
body.style-painter .el.text{cursor:copy !important; outline:1.5px dashed rgba(61,107,240,.6)}
/* deletion cover (eraser / recognised-graphic delete): object disappears under the
   sampled background; a faint dashed border marks it as removable/undoable */
.el.erase-mark{border:1px dashed rgba(208,40,40,.55); border-radius:2px}
.blocks-layer{position:absolute; inset:0; pointer-events:none}
.block-box{position:absolute; box-sizing:border-box; pointer-events:auto; cursor:pointer; border:1.5px dashed rgba(61,107,240,.7); background:rgba(61,107,240,.04); border-radius:2px; transition:background .08s}
.block-box:hover{background:rgba(61,107,240,.14)}
.block-box.graphic{border-color:rgba(232,140,40,.85); background:rgba(232,140,40,.05)}
.block-box.graphic:hover{background:rgba(232,140,40,.18)}

/* ============================ FONTS PANEL ============================ */
.fonts-panel{
  width:var(--panel-w); flex:none; background:var(--panel); border-left:1px solid var(--line);
  display:flex; flex-direction:column; overflow:hidden; transition:margin-right .2s ease;
}
.fonts-panel.collapsed{margin-right:calc(-1 * var(--panel-w))}
.fp-header{display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--line)}
.fp-header h3{margin:0; font-size:15px}
.icon-btn.ghost{background:transparent; border:0; color:var(--muted); font-size:14px; cursor:pointer; width:28px; height:28px; border-radius:6px}
.icon-btn.ghost:hover{background:var(--panel-2); color:var(--txt)}
.fonts-panel{overflow-y:auto}
.fp-section{padding:16px; border-bottom:1px solid var(--line)}
.fp-title{font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:var(--muted); margin-bottom:8px}
.fp-note{font-size:12px; color:var(--muted); line-height:1.5; margin-bottom:10px}
.fp-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px}
.fp-item{
  display:flex; align-items:center; justify-content:space-between; gap:8px; padding:9px 11px;
  background:var(--panel-2); border:1px solid var(--line); border-radius:8px; font-size:13px;
}
.fp-item .fname{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.fp-item .fmeta{font-size:11px; color:var(--muted); display:block; margin-top:2px}
.fp-item button{
  flex:none; font-size:11.5px; padding:5px 10px; border-radius:6px; border:1px solid var(--line);
  background:#323a4b; color:var(--txt); cursor:pointer;
}
.fp-item button:hover{background:var(--accent); border-color:var(--accent); color:#fff}
.badge{font-size:10px; padding:2px 6px; border-radius:5px; font-weight:600; flex:none}
.badge.ok{background:rgba(45,201,135,.16); color:#5fe0a8}
.badge.warn{background:rgba(255,210,63,.16); color:#ffd86a}
.badge.sub{background:rgba(61,107,240,.16); color:#9db8ff}
.fp-add{display:flex; gap:6px}
.fp-add input{
  flex:1; height:34px; background:var(--panel-2); border:1px solid var(--line); border-radius:8px;
  color:var(--txt); padding:0 10px; font-size:13px; outline:none;
}
.fp-add input:focus{border-color:var(--accent)}
.fp-status{font-size:12px; margin-top:8px; min-height:16px; line-height:1.5}
.fp-status.ok{color:#5fe0a8}
.fp-status.err{color:#ff9aa8}
.fp-status.load{color:var(--muted)}
.fp-foot{padding:14px 16px; font-size:11.5px; color:var(--muted); line-height:1.5}

/* ============================ TOAST / BUSY ============================ */
.toast-wrap{position:fixed; bottom:20px; left:50%; transform:translateX(-50%); z-index:60; display:flex; flex-direction:column; gap:8px; align-items:center}
.toast{
  background:var(--panel-2); color:var(--txt); border:1px solid var(--line); border-left:3px solid var(--accent);
  padding:11px 16px; border-radius:9px; font-size:13px; box-shadow:0 8px 28px rgba(0,0,0,.35);
  max-width:520px; animation:slideUp .2s ease;
}
.toast.err{border-left-color:var(--danger)}
.toast.ok{border-left-color:#2dc987}
@keyframes slideUp{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}

/* ============================ MODAL (signature) ============================ */
.modal-wrap{position:fixed; inset:0; background:rgba(15,19,28,.55); display:flex; align-items:center; justify-content:center; z-index:80}
.modal-wrap[hidden]{display:none} /* class display:flex would otherwise defeat [hidden] */
.modal{width:min(620px,92%); background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:18px; box-shadow:0 20px 60px rgba(0,0,0,.5)}
.modal-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:6px}
.modal-head h3{margin:0; font-size:16px}
.modal-note{font-size:12.5px; color:var(--muted); margin:4px 0 12px}
.sign-canvas{width:100%; height:220px; background:#fff; border:1px dashed #c5ccdb; border-radius:10px; touch-action:none; cursor:crosshair; display:block}
.modal-actions{display:flex; align-items:center; gap:10px; margin-top:14px}
.modal-spacer{flex:1}
.sign-color{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--muted)}
.sign-color input[type=color]{width:30px; height:30px; border:1px solid var(--line); border-radius:6px; background:none; cursor:pointer; padding:0}

.busy{position:fixed; inset:0; background:rgba(15,19,28,.55); display:flex; flex-direction:column; gap:14px; align-items:center; justify-content:center; z-index:70; color:#fff; font-size:14px}
/* The class rule above otherwise defeats the [hidden] attribute (same specificity,
   author>UA), leaving the spinner permanently covering the whole UI. */
.busy[hidden]{display:none}
.spinner{width:38px; height:38px; border:3px solid rgba(255,255,255,.2); border-top-color:#fff; border-radius:50%; animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

::-webkit-scrollbar{width:12px; height:12px}
::-webkit-scrollbar-thumb{background:#c3cad8; border-radius:6px; border:3px solid var(--work)}
.fonts-panel::-webkit-scrollbar-thumb{background:#3a4257; border-color:var(--panel)}
.toolbar::-webkit-scrollbar{height:0}