/* PDF Editor v3 — полный клон smallpdf функционала (19 инструментов) */
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&family=Caveat:wght@700&family=Allura&family=Great+Vibes&display=swap');

/* Светлый SaaS-фон страницы (перекрывает тёмный base из HEAD_HTML) */
body { background:#F8FAFF !important; color:#0B1026 !important; }

/* Фоновый радиальный градиент-блик — лёгкий SaaS */
body::before {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(ellipse at top, rgba(139,92,246,0.06) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 100%, rgba(37,99,235,0.05) 0%, transparent 55%);
}

.pe-wrap { max-width:1500px; width:96%; margin:0 auto; padding:24px 16px 60px; position:relative; z-index:1; }
.pe-back-btn { display:inline-block; margin-bottom:18px; text-decoration:none; background:#fff; color:#5B6478;
  border:1px solid #E5E7EB; border-radius:10px; padding:8px 14px; font-size:13px; font-weight:600; transition:all .2s; box-shadow:0 1px 4px rgba(15,23,42,.04); }
.pe-back-btn:hover { background:#F3F4F6; color:#2563EB; transform:translateY(-1px); }

.pe-header {
  margin-bottom:20px; padding:22px 24px; border-radius:16px;
  background:#fff; border:1px solid #E5E7EB;
  box-shadow:0 2px 16px rgba(15,23,42,.06);
}
.pe-title { font-size:32px; font-weight:900; letter-spacing:-0.5px; margin:0 0 6px;
  background:linear-gradient(135deg,#8B5CF6 0%,#2563EB 100%); -webkit-background-clip:text;
  -webkit-text-fill-color:transparent; background-clip:text; }
.pe-subtitle { color:#5B6478; font-size:14px; margin:0; }

/* ───── Upload zone ───── */
.pe-upload-zone {
  border:2px dashed #C9B8F5; border-radius:20px; padding:60px 24px; text-align:center;
  cursor:pointer; transition:all 0.3s ease; background:#F8F6FF; position:relative; margin-bottom:24px;
}
.pe-upload-zone:hover, .pe-upload-zone.drag-over {
  border-color:#7C3AED; background:#F3F0FF;
}
.pe-upload-zone input { position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%; }
.pe-upload-text { font-size:18px; font-weight:700; color:#0B1026; margin-bottom:8px; }
.pe-upload-hint { font-size:13px; color:#9AA3B2; }

/* ───── Toolbar ───── */
.pe-toolbar {
  display:none; gap:6px; padding:10px 14px; background:rgba(255,255,255,0.92);
  border:1px solid #E5E7EB; border-radius:14px; margin-bottom:16px;
  align-items:center; flex-wrap:wrap; position:sticky; top:8px; z-index:50;
  backdrop-filter:blur(8px); box-shadow:0 2px 12px rgba(15,23,42,.05);
}
.pe-tb-group { display:flex; gap:4px; align-items:center; }
.pe-tb-btn {
  background:#F8FAFF; color:#3D4358;
  border:1px solid #E5E7EB; border-radius:10px;
  padding:8px 12px; font-size:13px; font-weight:600; cursor:pointer;
  transition:all 0.18s; white-space:nowrap; line-height:1; min-height:36px;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
}
.pe-tb-btn:hover { background:#F3F0FF; border-color:#E9D5FF; color:#7C3AED; transform:translateY(-1px); }
.pe-tb-btn.active { background:linear-gradient(135deg,#8B5CF6,#2563EB); color:#fff; border-color:transparent;
  box-shadow:0 4px 14px rgba(124,58,237,.25); }
.pe-tb-btn.primary { background:linear-gradient(135deg,#8B5CF6 0%,#2563EB 100%); color:#fff; border-color:transparent; box-shadow:0 4px 16px rgba(124,58,237,0.3); }
.pe-tb-btn:disabled { opacity:0.4; cursor:not-allowed; }
.pe-tb-input { background:#fff; color:#0B1026; border:1px solid #E5E7EB;
  border-radius:10px; padding:7px 10px; font-size:13px; outline:none; min-height:36px; }
.pe-tb-input.num { width:64px; text-align:center; }
.pe-tb-color { width:36px; height:36px; padding:2px; border-radius:10px; cursor:pointer; background:#fff;
  border:1px solid #E5E7EB; }
.pe-tb-sep { width:1px; height:24px; background:#E5E7EB; margin:0 4px; }
.pe-tb-page-info { color:#3D4358; font-size:13px; font-weight:600; padding:0 8px; min-width:60px; text-align:center; }
.pe-export-wrap { display:flex; gap:4px; }

/* ───── Main layout ───── */
.pe-layout { display:none; gap:16px; align-items:flex-start; }
.pe-stage-wrap { flex:1; min-width:0; background:#EEF1F6; border:1px solid #E5E7EB;
  border-radius:16px; padding:20px; overflow:auto; max-height:calc(100vh - 220px); }
.pe-stage { display:flex; justify-content:center; min-height:200px; padding:40px 0; }
.pe-page-wrap { position:relative; box-shadow:0 8px 40px rgba(0,0,0,.5); background:#fff;
  transition:transform .35s cubic-bezier(0.4,0,0.2,1); transform-origin:center center; }
.pe-page-wrap canvas { display:block; }

/* SVG overlay для фигур/маркапа/рисования */
.pe-svg-layer { position:absolute; left:0; top:0; pointer-events:auto; z-index:4; }
.pe-svg-layer.no-tool { pointer-events:none; }
.pe-svg-layer.no-tool .pe-svg-obj { pointer-events:auto; }
.pe-svg-obj { cursor:move; }
.pe-svg-obj.selected { filter:drop-shadow(0 0 6px rgba(0,188,212,.85)); }

/* ───── Edit text layer (PDF content) ───── */
.pe-text-layer {
  position:absolute; left:0; top:0; pointer-events:auto; overflow:visible; z-index:5;
}
.pe-text-layer.disabled { pointer-events:none; }
.pe-text-item {
  position:absolute; box-sizing:content-box;
  background:#ffffff; color:#000;
  white-space:pre; cursor:text; user-select:text;
  outline:1px solid transparent;
  transition:outline-color 0.12s ease, background-color 0.12s ease;
  line-height:1; letter-spacing:0; font-feature-settings:"kern" 1;
  padding:0 1px; margin:0; overflow:visible; transform-origin:0% 0%;
}
.pe-text-item:hover { outline-color:rgba(0,188,212,0.55); background:#fffce6; }
.pe-text-item:focus { outline:2px solid #00bcd4; background:#fffce6; z-index:6; }
.pe-text-item.touched { background:#e6fff4; }

/* ───── New text annotations ───── */
.text-box-wrap { position:absolute; z-index:7; }
.text-box {
  min-width:40px; padding:2px 6px; cursor:move;
  border:1px dashed transparent; white-space:pre-wrap; outline:none;
  user-select:text; line-height:1.25; box-sizing:border-box;
  min-height:1.25em; color:#111; background:transparent;
}
.text-box:hover { border-color:rgba(0,188,212,0.6); }
.text-box.selected { border-color:#00bcd4; box-shadow:0 0 0 1px rgba(0,188,212,0.3); }
.text-box.editing { cursor:text; border-color:#e91e8c; background:rgba(255,255,255,0.85); }

/* ───── Widget controls ───── */
.pe-widget-del {
  position:absolute; top:-12px; right:-12px; width:22px; height:22px;
  background:#ef4444; color:#fff; border-radius:50%; font-size:14px;
  line-height:22px; text-align:center; cursor:pointer; display:none;
  border:2px solid #fff; font-weight:700; z-index:11;
}
.selected > .pe-widget-del,
.pe-widget-wrap.selected > .pe-widget-del,
.text-box-wrap.selected .pe-widget-del,
.pe-image-wrap.selected > .pe-widget-del,
.pe-sticky-wrap.selected > .pe-widget-del,
.pe-signature-wrap.selected > .pe-widget-del { display:block; }

.pe-handle { position:absolute; width:12px; height:12px; background:#00bcd4;
  border:2px solid #fff; border-radius:50%; display:none; z-index:10; }
.pe-handle.h-nw { left:-6px; top:-6px; cursor:nwse-resize; }
.pe-handle.h-ne { right:-6px; top:-6px; cursor:nesw-resize; }
.pe-handle.h-sw { left:-6px; bottom:-6px; cursor:nesw-resize; }
.pe-handle.h-se { right:-6px; bottom:-6px; cursor:nwse-resize; }
.pe-handle.h-n  { left:50%; top:-6px; margin-left:-6px; cursor:ns-resize; }
.pe-handle.h-s  { left:50%; bottom:-6px; margin-left:-6px; cursor:ns-resize; }
.pe-handle.h-w  { left:-6px; top:50%; margin-top:-6px; cursor:ew-resize; }
.pe-handle.h-e  { right:-6px; top:50%; margin-top:-6px; cursor:ew-resize; }
.pe-handle.h-rot {
  left:50%; top:-32px; margin-left:-8px;
  background:#e91e8c; cursor:grab; width:16px; height:16px;
}
.pe-handle.h-rot::after {
  content:""; position:absolute; left:50%; top:14px; transform:translateX(-50%);
  width:2px; height:18px; background:#e91e8c; pointer-events:none;
}
.selected .pe-handle,
.pe-image-wrap.selected .pe-handle,
.pe-sticky-wrap.selected .pe-handle,
.pe-signature-wrap.selected .pe-handle { display:block; }

/* ───── Image annotation ───── */
.pe-image-wrap {
  position:absolute; cursor:move; z-index:6; transform-origin:center center;
}
.pe-image-wrap img { display:block; width:100%; height:100%; user-select:none; -webkit-user-drag:none; pointer-events:none; }
.pe-image-wrap.selected { outline:2px dashed #00bcd4; outline-offset:2px; }

/* ───── Sticky note ───── */
.pe-sticky-wrap {
  position:absolute; cursor:move; z-index:8;
  background:#fff59d; border:1px solid #fbc02d; box-shadow:2px 3px 8px rgba(0,0,0,.18);
  padding:8px 10px; min-width:120px; min-height:60px; border-radius:3px;
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
}
.pe-sticky-wrap.selected { outline:2px dashed #00bcd4; outline-offset:2px; }
.pe-sticky-wrap textarea {
  width:100%; height:100%; min-height:48px; resize:none; border:none; background:transparent;
  outline:none; font-size:13px; color:#3e2723; line-height:1.4; font-family:inherit;
}
.pe-sticky-pin {
  position:absolute; top:-6px; left:-6px; width:18px; height:18px; background:#e91e8c;
  border-radius:50%; box-shadow:0 1px 3px rgba(0,0,0,.4); border:2px solid #fff;
}

/* ───── Signature widget ───── */
.pe-signature-wrap {
  position:absolute; cursor:move; z-index:6;
}
.pe-signature-wrap img { display:block; width:100%; height:100%; pointer-events:none; }
.pe-signature-wrap.selected { outline:2px dashed #00bcd4; outline-offset:2px; }

/* ───── Sidebar ───── */
.pe-sidebar {
  width:200px; flex-shrink:0; background:#fff;
  border:1px solid #E5E7EB; border-radius:16px; padding:14px;
  max-height:calc(100vh - 220px); overflow:auto; box-shadow:0 2px 12px rgba(15,23,42,.05);
}
.pe-sidebar-title { font-size:11px; font-weight:700; color:#9AA3B2;
  letter-spacing:1.5px; margin-bottom:12px; }
.pe-thumb-item {
  position:relative; margin-bottom:14px; border:2px solid transparent;
  border-radius:8px; transition:all 0.2s; cursor:grab; padding:4px; background:#F3F4F6;
}
.pe-thumb-item:hover { border-color:#E9D5FF; }
.pe-thumb-item.active { border-color:#7C3AED; box-shadow:0 0 0 2px rgba(124,58,237,0.18); }
.pe-thumb-item.dragging { opacity:0.4; }
.pe-thumb-item.drag-over { border-color:#2563EB; border-style:dashed; }
.pe-thumb-canvas {
  width:100%; display:block; background:#fff; border-radius:4px;
  transition:transform .35s cubic-bezier(0.4,0,0.2,1); transform-origin:center center;
}
.pe-thumb-num { position:absolute; top:6px; left:6px; background:rgba(11,16,38,.72); color:#fff;
  font-size:11px; font-weight:700; padding:2px 6px; border-radius:4px; z-index:2; }
.pe-thumb-actions { display:flex; gap:4px; margin-top:6px; opacity:0; transition:opacity .15s; }
.pe-thumb-item:hover .pe-thumb-actions, .pe-thumb-item.active .pe-thumb-actions { opacity:1; }
.pe-thumb-act {
  flex:1; background:#F3F0FF; border:1px solid #E9D5FF;
  color:#7C3AED; border-radius:6px; font-size:11px; padding:4px 0; cursor:pointer; font-weight:600;
}
.pe-thumb-act:hover { background:#E9D5FF; }
.pe-thumb-act.danger { background:#FEECEC; border-color:#F7C9C9; color:#DC2626; }
.pe-thumb-act.danger:hover { background:#FBD5D5; }

.pe-info { margin-top:14px; padding-top:14px; border-top:1px solid #E5E7EB;
  font-size:12px; color:#5B6478; line-height:1.6; }
.pe-info strong { color:#0B1026; }

/* ───── Toast ───── */
.pe-toast { position:fixed; bottom:28px; right:28px; background:#fff;
  border:1px solid #E5E7EB; border-radius:14px; padding:14px 20px 14px 24px;
  color:#0B1026; font-size:14px; font-weight:600; z-index:9998;
  transform:translateY(80px); opacity:0; transition:all 0.35s cubic-bezier(0.34,1.56,0.64,1);
  pointer-events:none; max-width:420px; box-shadow:0 8px 28px rgba(15,23,42,.14);
  border-left:4px solid #7C3AED; }
.pe-toast.show { transform:translateY(0); opacity:1; }
.pe-toast.success { border-left-color:#16A34A; }
.pe-toast.error { border-left-color:#DC2626; }

/* ───── Modal ───── */
.pe-modal { position:fixed; inset:0; background:rgba(11,16,38,0.45); display:none;
  align-items:center; justify-content:center; z-index:9999; backdrop-filter:blur(6px); }
.pe-modal.open { display:flex; }
.pe-modal-card { background:#fff;
  border:1px solid #E5E7EB; border-radius:18px; padding:28px;
  width:560px; max-width:94%; max-height:90vh; overflow:auto; box-shadow:0 20px 60px rgba(15,23,42,.22); }
.pe-modal-card h3 { margin:0 0 16px; color:#0B1026; font-size:20px; }
.pe-modal-card input[type=text], .pe-modal-card input[type=email] {
  width:100%; padding:12px 14px; background:#F8FAFF;
  border:1px solid #E5E7EB; border-radius:10px; color:#0B1026;
  font-size:14px; outline:none; margin-bottom:12px; box-sizing:border-box; }
.pe-modal-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:12px; padding-top:14px;
  border-top:1px solid #E5E7EB; }

/* ───── Signature modal ───── */
.pe-sig-card { width:640px; }
.pe-sig-tabs { display:flex; gap:4px; margin-bottom:14px; background:#F3F4F6;
  padding:4px; border-radius:10px; }
.pe-sig-tab { flex:1; background:transparent; border:none; color:#5B6478; padding:8px 12px;
  border-radius:7px; cursor:pointer; font-weight:600; font-size:13px; }
.pe-sig-tab.active { background:linear-gradient(135deg,#8B5CF6,#2563EB); color:#fff; }
.pe-sig-pane { min-height:200px; }
#peSigCanvas { background:#fff; border:1px dashed #C9B8F5; border-radius:10px;
  cursor:crosshair; width:100%; display:block; touch-action:none; }
.pe-sig-pane button { margin-top:10px; }
.pe-sig-pane input[type=text] { font-size:16px; }
.pe-sig-pane select { width:100%; padding:10px; background:#F8FAFF;
  border:1px solid #E5E7EB; border-radius:10px; color:#0B1026; margin-bottom:12px; }
.pe-sig-preview { background:#fff; border:1px dashed #C9B8F5; border-radius:10px;
  min-height:140px; display:flex; align-items:center; justify-content:center; padding:12px;
  font-size:48px; color:#111; overflow:hidden; line-height:1; }
.pe-sig-preview img { max-width:100%; max-height:160px; }
.pe-sig-preview.empty::before { content:"Предпросмотр появится здесь"; font-size:13px; color:#999; }
.pe-sig-saved { margin-top:14px; padding-top:14px; border-top:1px solid #E5E7EB; }
#peSigList { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.pe-sig-saved-item { width:140px; height:60px; background:#fff; border-radius:6px;
  border:2px solid transparent; cursor:pointer; padding:4px; position:relative; }
.pe-sig-saved-item:hover { border-color:rgba(0,188,212,.5); }
.pe-sig-saved-item.sel { border-color:#00bcd4; }
.pe-sig-saved-item img { width:100%; height:100%; object-fit:contain; }
.pe-sig-saved-item .x { position:absolute; top:-6px; right:-6px; width:18px; height:18px;
  background:#ef4444; color:#fff; border-radius:50%; font-size:11px; line-height:18px;
  text-align:center; cursor:pointer; border:1px solid #fff; }

.pe-sig-style-1 { font-family:'Dancing Script', cursive; font-weight:700; }
.pe-sig-style-2 { font-family:'Caveat', cursive; font-weight:700; }
.pe-sig-style-3 { font-family:'Allura', cursive; }
.pe-sig-style-4 { font-family:'Great Vibes', cursive; }

/* Cursor по инструменту */
body.pe-tool-text .pe-page-wrap { cursor:text; }
body.pe-tool-rect .pe-page-wrap,
body.pe-tool-ellipse .pe-page-wrap,
body.pe-tool-line .pe-page-wrap,
body.pe-tool-arrow .pe-page-wrap,
body.pe-tool-highlight .pe-page-wrap,
body.pe-tool-underline .pe-page-wrap,
body.pe-tool-strikethrough .pe-page-wrap { cursor:crosshair; }
body.pe-tool-freehand .pe-page-wrap { cursor:crosshair; }
body.pe-tool-sticky .pe-page-wrap { cursor:cell; }
body.pe-tool-image .pe-page-wrap { cursor:copy; }
body.pe-tool-signature .pe-page-wrap { cursor:copy; }

.pe-help-banner {
  background:#F3F0FF; border:1px solid #E9D5FF;
  border-radius:10px; padding:10px 14px; color:#5B6478; font-size:13px;
  margin-bottom:12px; display:none;
}
.pe-help-banner.show { display:block; }

@media (max-width: 1100px) {
  .pe-layout { flex-direction:column-reverse; }
  .pe-sidebar { width:auto; max-height:240px; }
}