{% extends "base.html" %}
  {% block title %}PDF Editor – Free Online PDF Editor{% endblock %}
  {% block description %}Edit PDF files online for free. Add text, sign, draw, highlight, add images and more without losing quality.{% endblock %}

  {% block extra_head %}
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Dancing+Script:wght@500;700&family=Pacifico&display=swap" rel="stylesheet">
  <style>
    /* ── Design tokens ────────────────────────────────────── */
    :root {
      --primary: #3758F9;
      --primary-hover: #2645e0;
      --primary-light: #EBEEFF;
      --primary-border: #BEC9FF;
      --canvas-bg: #F0F0F7;
      --thumb-bg: #fff;
      --font: 'Inter', system-ui, sans-serif;
    }

    /* ── Shimmer animation ───────────────────────────────── */
    @keyframes shimmer {
      0%   { background-position: -600px 0; }
      100% { background-position: 600px 0; }
    }
    .shimmer {
      background: linear-gradient(90deg, #e8ecff 25%, #d4daff 50%, #e8ecff 75%);
      background-size: 600px 100%;
      animation: shimmer 1.5s infinite linear;
      border-radius: 6px;
    }

    #pdf-editor-root {
      display: flex; flex-direction: column;
      width: 100%;
      background: var(--canvas-bg);
      font-family: var(--font);
    }
    /* ── Sticky header wrapper ─────────────────────────────── */
    #sticky-header {
      position: sticky; top: 60px; z-index: 50;
      display: flex; flex-direction: column;
    }
    /* ── Top toolbar ─────────────────────────────────────── */
    #toolbar {
      display: flex; align-items: stretch; gap: 0;
      background: #fff; border-bottom: 1px solid #e0e5ff;
      padding: 0; flex-shrink: 0; flex-wrap: nowrap;
      overflow-x: auto; height: 80px;
      box-shadow: 0 1px 4px rgba(55,88,249,.07);
    }
    .tb-sep { width: 1px; height: 40px; background: #e2e8f0; margin: 0 2px; flex-shrink: 0; align-self: center; }
    .tb-zoom-group {
      display: flex; align-items: center; gap: 2px; background: #f4f6ff;
      border: 1px solid #e0e5ff; border-radius: 6px; padding: 2px 8px; height: 32px;
    }
    .tb-zoom-btn {
      display: flex; align-items: center; justify-content: center;
      width: 22px; height: 22px; border: none; background: transparent;
      color: #4C5E7F; border-radius: 4px; cursor: pointer;
    }
    .tb-zoom-btn:hover { background: var(--primary-light); color: var(--primary); }
    .tb-zoom-label {
      font-size: 12px; font-weight: 600; color: #3758F9;
      min-width: 38px; text-align: center; cursor: default;
    }
    .tb-btn {
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      min-width: 52px; width: auto; height: 80px; padding: 0 8px; border-radius: 0;
      border: none; cursor: pointer; background: transparent; color: #374151; flex-shrink: 0;
      transition: background .15s, color .15s; position: relative; gap: 4px;
    }
    .tb-btn i { font-size: 16px; flex-shrink: 0; }
    .tb-btn span {
      display: block; font-size: 10px; font-weight: 500;
      white-space: nowrap; line-height: 1; color: inherit; font-family: var(--font);
    }
    .tb-btn .tb-caret { font-size: 7px; opacity: .6; margin-top: -2px; }
    .tb-btn:hover { background: #f0f4ff; color: #1e293b; }
    .tb-btn.active { background: var(--primary); color: #fff; }
    .tb-btn.active svg { stroke: #fff; }
    .tb-btn.active i { color: #fff; }
    .tb-btn:disabled { opacity: .4; cursor: default; }
    /* ── Context bar (tool-sensitive formatting row) ─────── */
    #ctx-bar {
      display: none; align-items: center; gap: 4px; flex-wrap: nowrap;
      background: #f7f8fc; border-bottom: 1px solid #e0e5ff;
      padding: 0 10px; flex-shrink: 0; overflow-x: auto; height: 40px;
    }
    #ctx-bar.visible { display: flex; }
    #ctx-bar > div { display: none; align-items: center; gap: 4px; }
    #ctx-bar > div.ctx-active { display: flex; }
    .ctx-sep { width: 1px; height: 22px; background: #e0e5ff; flex-shrink: 0; margin: 0 2px; }
    .ctx-btn {
      display: flex; align-items: center; justify-content: center;
      width: 28px; height: 28px; border-radius: 5px; border: 1px solid #e0e5ff;
      background: #fff; color: #374151; cursor: pointer; flex-shrink: 0;
      transition: background .12s; padding: 0; font-size: 12px; font-weight: 700;
      font-family: var(--font);
    }
    .ctx-btn:hover { background: var(--primary-light); color: var(--primary); border-color: var(--primary-border); }
    .ctx-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
    .ctx-select {
      height: 28px; border: 1px solid #e0e5ff; border-radius: 5px;
      font-size: 12px; background: #fff; color: #374151; padding: 0 6px;
      font-family: var(--font); cursor: pointer; outline: none;
    }
    .ctx-number {
      width: 44px; height: 28px; border: 1px solid #e0e5ff; border-radius: 5px;
      font-size: 12px; background: #fff; color: #374151; text-align: center;
      padding: 0 4px; font-family: var(--font); outline: none;
    }
    .ctx-label {
      font-size: 11px; color: #64748b; font-weight: 600; white-space: nowrap; font-family: var(--font);
    }
    .fc-btn {
      border: 1px solid #c7d0ff; border-radius: 5px; padding: 3px 9px; cursor: pointer;
      background: #f8f9ff; color: #1e293b; font-weight: 700; font-size: 14px;
      height: 30px; transition: background .15s; font-family: var(--font);
    }
    .fc-btn:hover { background: var(--primary-light); color: var(--primary); }
    .fc-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
    /* keep font-bar hidden; ctx-bar replaces it */
    #font-bar { display: none !important; }
    /* ── Action buttons ──────────────────────────────────── */
    #action-btns { margin-left: auto; display: flex; align-items: center; gap: 4px; flex-shrink: 0; padding: 0 6px; }
    .btn-cancel {
      padding: 8px 20px; border: 1.5px solid #BEC9FF; border-radius: 6px;
      background: #fff; color: #4C5E7F; cursor: pointer; font-size: 14px; font-weight: 500;
      font-family: var(--font); transition: background .15s, border-color .15s;
    }
    .btn-cancel:hover { background: var(--primary-light); border-color: var(--primary); color: var(--primary); }
    .btn-save {
      padding: 8px 22px; border: none; border-radius: 6px;
      background: #3758F9; color: #fff; cursor: pointer;
      font-size: 14px; font-weight: 700; font-family: var(--font);
      transition: background .15s; box-shadow: 0 3px 12px rgba(55,88,249,.3);
      display: flex; align-items: center; gap: 7px;
    }
    .btn-save:hover { background: #2443D7; box-shadow: 0 4px 16px rgba(55,88,249,.4); }
    /* ── Editor body ─────────────────────────────────────── */
    #editor-body { display: flex; align-items: flex-start; }
    /* ── Thumbnail panel ─────────────────────────────────── */
    #thumb-panel {
      width: 220px; background: var(--thumb-bg); overflow-y: auto;
      display: flex; flex-direction: column; gap: 10px; padding: 12px 10px;
      flex-shrink: 0; border-right: 1px solid var(--primary-border);
      position: sticky; top: var(--sticky-h, 116px); align-self: flex-start;
      max-height: calc(100vh - var(--sticky-h, 116px));
      box-shadow: 2px 0 8px rgba(55,88,249,.06);
    }
    /* ── Right properties panel ──────────────────────────── */
    #props-panel {
      width: 260px; flex-shrink: 0; border-left: 1px solid var(--primary-border);
      background: #fff; overflow-y: auto;
      position: sticky; top: var(--sticky-h, 116px); align-self: flex-start;
      max-height: calc(100vh - var(--sticky-h, 116px));
      padding: 16px 14px; display: none; flex-direction: column; gap: 14px;
      box-shadow: -2px 0 8px rgba(55,88,249,.06);
    }
    #props-panel.visible { display: flex; }
    .pp-section { display: flex; flex-direction: column; gap: 8px; }
    .pp-label { font-size: 11px; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: .06em; }
    .pp-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
    .pp-select {
      flex: 1; padding: 7px 10px; border: 1.5px solid #e0e5ff; border-radius: 7px;
      font-size: 13px; font-family: var(--font); background: #fafbff; color: #374151;
      cursor: pointer; min-width: 0;
    }
    .pp-number {
      width: 58px; padding: 7px 8px; border: 1.5px solid #e0e5ff; border-radius: 7px;
      font-size: 13px; font-family: var(--font); background: #fafbff; color: #374151; text-align: center;
    }
    .pp-toggle {
      padding: 6px 10px; border: 1.5px solid #e0e5ff; border-radius: 7px;
      background: #fafbff; cursor: pointer; font-size: 13px; font-weight: 700;
      color: #374151; font-family: var(--font); transition: background .12s, border-color .12s;
    }
    .pp-toggle.active { background: var(--primary); border-color: var(--primary); color: #fff; }
    .pp-color {
      width: 36px; height: 32px; padding: 2px; border: 1.5px solid #e0e5ff;
      border-radius: 7px; cursor: pointer;
    }
    .pp-align-row { display: flex; gap: 4px; }
    .pp-align-btn {
      flex: 1; padding: 6px; border: 1.5px solid #e0e5ff; border-radius: 7px;
      background: #fafbff; cursor: pointer; font-size: 13px; color: #374151; transition: background .12s;
    }
    .pp-align-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }
    .pp-sep { height: 1px; background: #e0e5ff; margin: 2px 0; }
    .pp-title { font-size: 14px; font-weight: 700; color: #0f172a; margin-bottom: 4px; }
    #thumb-panel.hidden { display: none; }
    .thumb-item {
      cursor: pointer; border-radius: 6px; overflow: hidden;
      border: 2px solid transparent; transition: border-color .15s;
      position: relative; background: #fff;
      box-shadow: 0 2px 6px rgba(55,88,249,.1);
    }
    .thumb-item.active { border-color: var(--primary); }
    .thumb-item canvas { display: block; width: 100%; }
    .thumb-item .page-num {
      position: absolute; bottom: 0; width: 100%; text-align: center;
      font-size: 10px; background: rgba(55,88,249,.7); color: #fff; padding: 2px 0;
    }
    /* ── Canvas area ─────────────────────────────────────── */
    #canvas-area {
      flex: 1; display: flex; flex-direction: column;
      align-items: center; padding: 24px; gap: 20px;
      background: var(--canvas-bg); min-width: 0;
    }
    .page-container {
      position: relative; box-shadow: 0 4px 24px rgba(55,88,249,.15);
      background: #fff; border-radius: 8px; flex-shrink: 0; overflow: hidden;
      cursor: crosshair;
    }
    .page-container canvas { display: block; }
    .page-container .overlay-canvas {
      position: absolute; top: 0; left: 0; pointer-events: all; touch-action: none;
    }
    /* ── Bottom page nav ─────────────────────────────────── */
    #page-nav {
      position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
      background: rgba(22,25,35,.88); backdrop-filter: blur(10px);
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 28px; padding: 0 6px;
      display: flex; align-items: center; gap: 0; z-index: 100;
      color: #e2e8f0; font-size: 13px;
      box-shadow: 0 4px 20px rgba(0,0,0,.35);
      height: 40px;
    }
    #page-nav button {
      background: none; border: none; color: #cbd5e1; cursor: pointer; font-size: 13px;
      width: 32px; height: 40px; display: flex; align-items: center;
      justify-content: center; transition: color .15s, background .15s; border-radius: 6px;
    }
    #page-nav button:hover { color: #fff; background: rgba(255,255,255,.12); }
    #page-nav .page-label { display: flex; align-items: center; gap: 5px; padding: 0 6px; color: #e2e8f0; }
    #page-nav .page-sep { width: 1px; height: 18px; background: rgba(255,255,255,.18); flex-shrink: 0; }
    #page-input {
      background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.25);
      color: #fff; width: 28px; text-align: center;
      font-size: 13px; padding: 2px; font-family: var(--font); outline: none; border-radius: 4px;
    }
    /* ── Text boxes ──────────────────────────────────────── */
    .pdf-text-overlay {
      position: absolute; border: 1px dashed transparent; cursor: text;
      box-sizing: border-box; padding: 2px 3px; line-height: 1.2;
      background: transparent; transition: border-color .1s;
      white-space: pre-wrap; overflow: hidden;
      user-select: none; -webkit-user-select: none;
    }
    .pdf-text-overlay:hover { border-color: rgba(55,88,249,.35); }
    .pdf-text-overlay.text-block-selected { outline: none; border-color: transparent; }
    .pdf-text-overlay.selected {
      border: 2px solid var(--primary) !important; outline: none; cursor: text !important;
    }
    .pdf-para-selection-box {
      position: absolute; border: 2px solid #3758F9; border-radius: 2px;
      pointer-events: none; z-index: 14; background: transparent; box-sizing: border-box;
    }
    .pdf-para-edit-single {
      position: absolute; z-index: 20; cursor: text;
      white-space: pre-wrap; word-break: break-word; overflow: visible;
      box-sizing: border-box; padding: 0; margin: 0; outline: none;
      background: transparent; user-select: text; -webkit-user-select: text;
    }
    .edit-resize-handle {
      position: absolute; width: 10px; height: 10px; border-radius: 50%;
      background: #3758F9; top: 50%; transform: translateY(-50%);
      cursor: ew-resize; z-index: 22; box-shadow: 0 1px 3px rgba(0,0,0,.35);
    }
    .edit-resize-L { left: -5px; }
    .edit-resize-R { right: -5px; }
    .para-sel-mini-toolbar {
      position: fixed; z-index: 9999; display: none; align-items: center; gap: 2px;
      background: #1e293b; border-radius: 6px; padding: 4px 6px;
      box-shadow: 0 4px 16px rgba(0,0,0,.35);
    }
    .para-sel-mini-toolbar button {
      background: none; border: none; color: #fff; padding: 3px 7px;
      border-radius: 4px; cursor: pointer; font-size: 13px; line-height: 1;
      min-width: 28px;
    }
    .para-sel-mini-toolbar button:hover { background: rgba(255,255,255,.15); }
    .add-text-float-bar {
      position: absolute; z-index: 25; display: none; align-items: center;
      gap: 6px; background: #3758F9; border-radius: 4px;
      padding: 3px 8px; font-size: 12px; color: #fff;
      box-shadow: 0 2px 8px rgba(55,88,249,.4); pointer-events: all; user-select: none;
    }
    .atfb-move-handle {
      cursor: move; font-weight: 500; display: flex; align-items: center; gap: 3px;
    }
    .atfb-delete-btn {
      background: rgba(255,255,255,.18); border: none; color: #fff;
      border-radius: 3px; padding: 2px 7px; font-size: 12px; cursor: pointer;
    }
    .atfb-delete-btn:hover { background: rgba(255,60,60,.7); }
    .pdf-text-overlay[contenteditable=true] {
      cursor: text; user-select: text; -webkit-user-select: text;
    }
    .pdf-text-cover {
      position: absolute; background: #ffffff; z-index: 4; pointer-events: none;
    }
    .pdf-text-overlay[contenteditable="true"] { outline: none; cursor: text; overflow: visible; }
    .pdf-edit-move-handle {
      position: absolute; top: -22px; left: -2px;
      background: var(--primary); color: #fff;
      border-radius: 4px 4px 0 0; padding: 2px 10px;
      font-size: 11px; font-family: var(--font);
      cursor: move; user-select: none; white-space: nowrap;
      pointer-events: all; line-height: 18px; z-index: 1;
      display: flex; align-items: center; gap: 4px;
    }
    /* ── Add-text box ────────────────────────────────────── */
    .add-text-box {
      position: absolute; border: 2px solid var(--primary); background: rgba(255,255,255,.9);
      min-width: 100px; min-height: 24px; padding: 3px 5px;
      font-size: 16px; cursor: text; box-sizing: border-box; outline: none;
      white-space: pre-wrap; line-height: 1.3; border-radius: 2px;
    }
    /* ── Signature canvas ────────────────────────────────── */
    #sign-canvas-wrap {
      display: none; position: fixed; inset: 0; background: rgba(30,41,59,.4);
      z-index: 10000; align-items: center; justify-content: center;
      backdrop-filter: blur(4px);
    }
    #sign-canvas-wrap.open { display: flex; }
    #sign-modal {
      background: #fff; border-radius: 16px; padding: 28px; width: 520px; max-width: 96vw;
      box-shadow: 0 20px 60px rgba(55,88,249,.2);
    }
    #sign-canvas {
      border: 1.5px solid var(--primary-border); border-radius: 8px; cursor: crosshair;
      touch-action: none; display: block; width: 100%;
      background: #fafbff;
    }
    /* ── Limit bar ───────────────────────────────────────── */
    #limit-bar {
      background: #f0f2ff; color: #64748b; font-size: 12px;
      text-align: center; padding: 4px 12px; flex-shrink: 0;
      border-bottom: 1px solid var(--primary-border);
      font-family: var(--font);
    }
    #limit-bar.warn { background: #fff1f0; color: #dc2626; border-color: #fca5a5; }
    /* ── Limit overlay ───────────────────────────────────── */
    #limit-overlay {
      display: none; position: fixed; inset: 0;
      background: rgba(30,41,59,.5); z-index: 10001;
      align-items: center; justify-content: center; backdrop-filter: blur(4px);
    }
    #limit-overlay.open { display: flex; }
    #limit-modal {
      background: #fff; border-radius: 16px; padding: 36px; max-width: 420px;
      text-align: center; box-shadow: 0 20px 60px rgba(55,88,249,.2);
    }
    /* ── Search panel ────────────────────────────────────── */
    #search-panel {
      display: none; position: fixed; top: 70px; right: 20px;
      background: #fff; border: 1px solid var(--primary-border); border-radius: 12px;
      box-shadow: 0 8px 30px rgba(55,88,249,.15); padding: 14px 16px; z-index: 500;
      width: 280px;
    }
    #search-panel.open { display: block; }
    #search-panel input {
      width: 100%; border: 1px solid #c7d0ff; border-radius: 6px; padding: 6px 10px;
      font-size: 13px; outline: none; box-sizing: border-box; font-family: var(--font);
    }
    #search-panel input:focus { border-color: var(--primary); }
    .search-highlight {
      position: absolute; background: rgba(253,224,71,.5); pointer-events: none;
      border-radius: 2px; z-index: 2;
    }
    .stamp-color-row {
      display: flex; gap: 6px; align-items: center; margin-bottom: 14px; flex-wrap: wrap;
    }
    .stamp-color-swatch {
      width: 24px; height: 24px; border-radius: 50%; border: 2.5px solid transparent;
      cursor: pointer; transition: border-color .12s, transform .12s; flex-shrink: 0;
    }
    .stamp-color-swatch:hover { transform: scale(1.15); }
    .stamp-color-swatch.swatch-selected { border-color: #1e293b; }
    .stamp-color-custom {
      width: 24px; height: 24px; border-radius: 50%; border: 2px dashed #94a3b8;
      cursor: pointer; padding: 0; overflow: hidden; flex-shrink: 0;
      background: none; position: relative;
    }
    .stamp-color-custom input[type=color] {
      position: absolute; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px);
      opacity: 0; cursor: pointer; border: none; padding: 0;
    }
    /* ── Manage pages overlay ────────────────────────────── */
    #manage-pages-overlay {
      display: none; position: fixed; inset: 0; background: rgba(30,41,59,.45);
      z-index: 10002; align-items: flex-start; justify-content: center;
      padding-top: 60px; backdrop-filter: blur(4px);
    }
    #manage-pages-overlay.open { display: flex; }
    #manage-pages-modal {
      background: #fff; border-radius: 16px; padding: 24px;
      max-width: 700px; width: 96vw; max-height: 80vh; overflow-y: auto;
      box-shadow: 0 20px 60px rgba(55,88,249,.2);
    }
    .mp-thumb {
      display: inline-flex; flex-direction: column; align-items: center;
      gap: 6px; cursor: pointer; user-select: none;
    }
    .mp-thumb canvas { border: 2px solid #e0e5ff; border-radius: 4px; }
    .mp-thumb:hover canvas { border-color: var(--primary); }
    .mp-btns { display: flex; gap: 6px; margin-top: 4px; }
    .mp-btn {
      font-size: 11px; padding: 3px 8px; border-radius: 5px; border: 1px solid #e0e5ff;
      background: #f8f9ff; cursor: pointer; transition: background .15s;
      font-family: var(--font);
    }
    .mp-btn:hover { background: var(--primary-light); color: var(--primary); }
    .mp-btn.danger { color: #dc2626; }
    .mp-btn.danger:hover { background: #fee2e2; border-color: #dc2626; }
    /* ── Stamp picker modal ──────────────────────────────── */
    #stamp-overlay {
      display: none; position: fixed; inset: 0; background: rgba(30,41,59,.45);
      z-index: 10000; align-items: center; justify-content: center; backdrop-filter: blur(4px);
    }
    #stamp-overlay.open { display: flex; }
    #stamp-modal {
      background: #fff; border-radius: 16px; padding: 0; width: 520px; max-width: 96vw;
      box-shadow: 0 20px 60px rgba(55,88,249,.2); overflow: hidden;
    }
    .stamp-modal-header {
      display: flex; align-items: center; padding: 0 20px;
      border-bottom: 2px solid #e0e5ff; justify-content: space-between;
    }
    .stamp-tabs { display: flex; }
    .stamp-tab {
      padding: 15px 18px; border: none; background: none; cursor: pointer;
      font-size: 14px; font-weight: 600; color: #64748b;
      border-bottom: 2px solid transparent; margin-bottom: -2px;
      font-family: var(--font); transition: color .15s;
    }
    .stamp-tab.active { color: var(--primary); border-color: var(--primary); }
    .stamp-view { display: none; padding: 18px 20px 20px; }
    .stamp-view.active { display: block; }
    .stamp-preset-grid {
      display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 16px;
    }
    .stamp-preset-btn {
      padding: 10px 14px; border: 2.5px solid var(--stamp-color, #ef4444); border-radius: 6px;
      color: var(--stamp-color, #ef4444); font-weight: 800; font-size: 12px; cursor: pointer;
      background: #fff; transition: background .15s, color .15s;
      letter-spacing: .06em; font-family: var(--font); text-align: center;
    }
    .stamp-preset-btn:hover, .stamp-preset-btn.selected {
      background: var(--stamp-color, #ef4444); color: #fff;
    }
    .custom-stamp-preview {
      border: 2px solid #e0e5ff; border-radius: 8px; padding: 18px;
      text-align: center; margin-bottom: 14px;
      display: flex; align-items: center; justify-content: center; min-height: 64px;
    }
    #custom-stamp-preview-text {
      font-weight: 800; font-size: 20px; letter-spacing: .08em;
      color: var(--stamp-color, #ef4444);
      border: 3px solid var(--stamp-color, #ef4444);
      padding: 4px 16px; border-radius: 4px; display: inline-block;
    }
    /* ── Toolbar dropdown system (Shapes / Draw / More) ──── */
    .tb-dropdown { position: relative; flex-shrink: 0; }
    .tb-dropdown-menu {
      display: none; position: absolute; top: calc(100% + 6px); left: 0;
      background: #fff; border: 1px solid #e0e5ff; border-radius: 10px;
      box-shadow: 0 8px 28px rgba(55,88,249,.15); padding: 6px;
      z-index: 300; min-width: 170px;
    }
    .tb-dropdown-menu.open { display: block; }
    .tb-dropdown-menu button {
      display: flex; align-items: center; gap: 10px; width: 100%;
      padding: 8px 12px; border: none; background: none; cursor: pointer;
      font-size: 13px; font-weight: 500; color: #374151; border-radius: 6px;
      transition: background .12s; font-family: var(--font); text-align: left;
    }
    .tb-dropdown-menu button:hover { background: var(--primary-light); color: var(--primary); }
    .tb-dropdown-menu button.active { background: var(--primary); color: #fff; }
    .tb-dropdown-menu button i, .tb-dropdown-menu button svg { font-size: 14px; flex-shrink: 0; }
    .tb-dropdown-menu .menu-sep { height: 1px; background: #e0e5ff; margin: 4px 0; }
    /* ── Watermark modal ─────────────────────────────────── */
    #watermark-overlay {
      display: none; position: fixed; inset: 0; background: rgba(30,41,59,.45);
      z-index: 10001; align-items: center; justify-content: center; backdrop-filter: blur(4px);
    }
    #watermark-overlay.open { display: flex; }
    #watermark-modal {
      background: #fff; border-radius: 16px; padding: 28px; width: 400px; max-width: 96vw;
      box-shadow: 0 20px 60px rgba(55,88,249,.2);
    }
    /* ── 3-tab Signature modal ───────────────────────────── */
    .sign-tabs { display: flex; gap: 0; border-bottom: 2px solid #e0e5ff; margin-bottom: 18px; }
    .sign-tab {
      padding: 8px 18px; border: none; background: none; cursor: pointer;
      font-size: 14px; font-weight: 600; color: #64748b; border-bottom: 2px solid transparent;
      margin-bottom: -2px; font-family: var(--font); transition: color .15s, border-color .15s;
    }
    .sign-tab.active { color: var(--primary); border-color: var(--primary); }
    .sign-tab-panel { display: none; }
    .sign-tab-panel.active { display: block; }
    /* ── Type-signature fonts ────────────────────────────── */
    .type-sig-font-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
    .type-sig-font-btn {
      padding: 6px 12px; border: 2px solid #e0e5ff; border-radius: 8px; cursor: pointer;
      background: #f8f9ff; font-size: 16px; transition: border-color .12s, background .12s;
    }
    .type-sig-font-btn.active { border-color: var(--primary); background: var(--primary-light); }
    /* ── Sub-panel system ────────────────────────────────── */
    #toolbar { position: relative; }
    .sub-panel {
      display: none; position: fixed;
      background: #fff; border: 1px solid #e0e5ff; border-radius: 12px;
      box-shadow: 0 8px 28px rgba(55,88,249,.15); padding: 14px 16px;
      z-index: 200; min-width: 240px;
    }
    .sub-panel::before {
      content: ''; position: absolute; top: -7px; left: 22px;
      width: 12px; height: 12px; background: #fff;
      border-left: 1px solid #e0e5ff; border-top: 1px solid #e0e5ff;
      transform: rotate(45deg);
    }
    .sub-panel.sp-open { display: block; }
    .sp-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
    .sp-row:last-child { margin-bottom: 0; }
    .sp-label { font-size: 11px; color: #64748b; font-weight: 600; white-space: nowrap; min-width: 50px; }
    .sp-swatches { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
    .sp-swatch {
      width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid transparent;
      cursor: pointer; transition: border-color .12s, transform .12s; padding: 0; outline: none;
    }
    .sp-swatch:hover { transform: scale(1.15); }
    .sp-swatch.active { border-color: var(--primary); }
    .el-selected {
      outline: 2px dashed var(--primary, #3758F9) !important;
      outline-offset: 3px;
    }
    .sp-swatch-custom {
      width: 22px; height: 22px; border-radius: 50%; border: 2px dashed #94a3b8;
      cursor: pointer; overflow: hidden; position: relative; flex-shrink: 0; background: none;
    }
    .sp-swatch-custom input[type=color] {
      position: absolute; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px);
      opacity: 0; cursor: pointer; border: none; padding: 0;
    }
    .sp-swatch-none {
      width: 22px; height: 22px; border-radius: 50%; border: 2px solid #e0e5ff;
      background: #f8f9ff; cursor: pointer; display: flex; align-items: center;
      justify-content: center; font-size: 13px; color: #94a3b8; padding: 0;
      transition: border-color .12s;
    }
    .sp-swatch-none.active { border-color: var(--primary); color: var(--primary); }
    .sp-mode-btns { display: flex; gap: 4px; flex-wrap: wrap; }
    .sp-mode-btn {
      padding: 5px 10px; border: 1px solid #e0e5ff; border-radius: 6px;
      background: #f8f9ff; cursor: pointer; font-size: 13px; color: #475569;
      transition: background .12s, color .12s; font-family: var(--font);
      display: flex; align-items: center; justify-content: center; gap: 5px;
    }
    .sp-mode-btn:hover { background: var(--primary-light); color: var(--primary); }
    .sp-mode-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
    .sp-range-group { display: flex; align-items: center; gap: 6px; }
    .sp-range-group input[type=range] { width: 110px; accent-color: var(--primary); }
    .sp-range-val { font-size: 11px; color: #64748b; min-width: 28px; text-align: right; }
    .sp-section-title {
      font-size: 10px; font-weight: 700; color: #8899d0; letter-spacing: .05em;
      text-transform: uppercase; margin-bottom: 8px;
    }


    /* ── Upload prompt — thebestpdf.com two-column style ──── */
    #upload-prompt {
      width: 100%; display: flex; align-items: center; justify-content: center;
      min-height: 520px; padding: 40px 24px; box-sizing: border-box;
    }
    .upload-inner {
      display: flex; gap: 64px; align-items: center;
      max-width: 880px; width: 100%;
    }
    .upload-left {
      flex: 1; min-width: 0;
    }
    .upload-left h1 {
      font-size: 36px; font-weight: 800; color: #0f172a; margin: 0 0 14px;
      line-height: 1.2; font-family: var(--font);
    }
    .upload-left .upload-desc {
      color: #64748b; font-size: 16px; margin: 0 0 28px; line-height: 1.6;
    }
    .upload-features {
      list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-direction: column; gap: 14px;
    }
    .upload-features-check li {
      display: flex; align-items: flex-start; gap: 12px;
      font-size: 15px; color: #374151; line-height: 1.5;
    }
    .feat-check { flex-shrink: 0; margin-top: 2px; }
    .upload-steps { display: flex; align-items: center; gap: 0; margin-top: 24px; }
    .upload-step { display: flex; flex-direction: column; align-items: center; gap: 6px; }
    .step-circle {
      width: 42px; height: 42px; border-radius: 50%;
      background: #3758F9; display: flex; align-items: center; justify-content: center;
      font-size: 16px; font-weight: 700; color: #fff;
      font-family: var(--font); flex-shrink: 0;
    }
    .step-label { font-size: 12px; color: #4C5E7F; font-family: var(--font); text-align: center; white-space: nowrap; }
    .upload-step-line { flex: 1; height: 2px; background: #BEC9FF; min-width: 24px; margin-bottom: 20px; }
    .upload-right {
      flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 0;
    }
    #drop-zone {
      width: 360px; padding: 36px 32px 28px; border: 2px dashed #3758F9;
      border-radius: 12px; background: #fff; cursor: pointer;
      transition: border-color .2s, background .2s, box-shadow .2s;
      display: flex; flex-direction: column; align-items: center; gap: 14px;
      text-align: center; box-shadow: 0 4px 24px rgba(55,88,249,.08);
      user-select: none;
    }
    #drop-zone:hover, #drop-zone.drag-over {
      background: #f5f7ff;
      border-color: #2443D7;
      box-shadow: 0 8px 32px rgba(55,88,249,.18);
    }
    .drop-icon {
      width: 96px; height: 96px;
      display: flex; align-items: center; justify-content: center;
    }
    .drop-icon svg { width: 80px; height: 80px; }
    .drop-title {
      font-size: 18px; font-weight: 700; color: #0f172a; margin: 0;
      font-family: var(--font);
    }
    /* "or" divider */
    .drop-or-divider {
      display: flex; align-items: center; gap: 10px; width: 100%;
    }
    .drop-or-line {
      flex: 1; height: 1px; background: #e0e5ff;
    }
    .drop-or-text {
      font-size: 13px; color: #94a3b8; font-weight: 500;
    }
    /* Upload PDF button — full-width blue, thebestpdf.com style */
    .drop-btn-upload {
      display: block; width: 100%; box-sizing: border-box;
      padding: 14px 20px; background: #3758F9; color: #fff;
      border-radius: 5px; font-size: 16px; font-weight: 700;
      cursor: pointer; border: none; font-family: var(--font);
      box-shadow: 0 4px 16px rgba(55,88,249,.3);
      transition: background .15s, box-shadow .15s;
      text-align: center; text-decoration: none; letter-spacing: .01em;
    }
    .drop-btn-upload:hover {
      background: #2443D7;
      box-shadow: 0 6px 22px rgba(55,88,249,.42);
    }
    .drop-size-note {
      font-size: 12px; color: #b0b8d4; margin: 0;
    }

    @media (max-width: 700px) {
      .upload-inner { flex-direction: column; gap: 32px; }
      .upload-left h1 { font-size: 24px; }
      #drop-zone { width: 100%; }
    }
  }
  </style>
  {% endblock %}

  {% block content %}
  <div id="pdf-editor-root">
    <!-- Sticky header -->
    <div id="sticky-header">

    <!-- Limit bar (hidden until PDF is loaded) -->
    <div id="limit-bar" style="display:none">
      {% if limit_info.is_unlimited %}
        PDF Editor — Unlimited edits
      {% else %}
        PDF Editor — {{ limit_info.used }} / {{ limit_info.limit }} edits used today ({{ limit_info.plan_name }} plan)
      {% endif %}
    </div>

    <!-- Top toolbar (hidden until PDF is loaded) — PSPDFKit order -->
    <div id="toolbar" style="display:none">

      <!-- 1. Thumbnails dropdown -->
      <div class="tb-dropdown">
        <button class="tb-btn active" id="btn-thumbnails" onclick="toggleDropdown('thumbnails-menu', event)" title="Toggle Thumbnails">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="18" rx="1"/><rect x="13" y="3" width="8" height="4" rx="1"/><rect x="13" y="10" width="8" height="4" rx="1"/><rect x="13" y="17" width="8" height="4" rx="1"/></svg>
          <span>Thumbnails <i class="fa fa-caret-down tb-caret"></i></span>
        </button>
        <div class="tb-dropdown-menu" id="thumbnails-menu">
          <button onclick="toggleThumbs(); closeAllDropdowns()">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="18" rx="1"/><rect x="13" y="3" width="8" height="4" rx="1"/><rect x="13" y="10" width="8" height="4" rx="1"/><rect x="13" y="17" width="8" height="4" rx="1"/></svg> Thumbnails
          </button>
          <button onclick="showToast('Outline coming soon'); closeAllDropdowns()">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg> Outline
          </button>
          <button onclick="showToast('Annotations panel coming soon'); closeAllDropdowns()">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg> Annotations
          </button>
          <button onclick="showToast('Bookmarks coming soon'); closeAllDropdowns()">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></svg> Bookmarks
          </button>
        </div>
      </div>

      <!-- 2. Move -->
      <button class="tb-btn" id="btn-pan" onclick="setTool('pan')" title="Move / Pan">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 11V7a2 2 0 0 0-2-2 2 2 0 0 0-2 2"/><path d="M14 10V5a2 2 0 0 0-2-2 2 2 0 0 0-2 2v1"/><path d="M10 10.5V5a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7"/><path d="M6 14a2 2 0 0 0-2 2v0a8 8 0 0 0 8 8h4a8 8 0 0 0 8-8v-5a2 2 0 0 0-2-2 2 2 0 0 0-2 2"/></svg>
        <span>Move</span>
      </button>

      <!-- 3. Undo / Redo -->
      <button class="tb-btn" id="btn-undo" onclick="historyUndo()" title="Undo" disabled>
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7v6h6"/><path d="M3 13A9 9 0 1 0 5.12 6.4"/></svg>
        <span>Undo</span>
      </button>
      <button class="tb-btn" id="btn-redo" onclick="historyRedo()" title="Redo" disabled>
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 7v6h-6"/><path d="M21 13A9 9 0 1 1 18.88 6.4"/></svg>
        <span>Redo</span>
      </button>
      <div class="tb-sep"></div>

      <!-- 4. Add Text / Edit Text -->
      <button class="tb-btn" id="btn-add-text" onclick="setTool('add-text')" title="Add Text">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7V5h16v2M9 5v14M15 5v14M9 19h6"/></svg>
        <span>Add Text</span>
      </button>
      <button class="tb-btn" id="btn-edit-text" onclick="setTool('edit-text')" title="Edit Text">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4z"/></svg>
        <span>Edit Text</span>
      </button>
      <div class="tb-sep"></div>

      <!-- 5. Eraser dropdown -->
      <div class="tb-dropdown">
        <button class="tb-btn" id="btn-eraser" onclick="setTool('eraser'); toggleDropdown('eraser-menu', event)" title="Eraser">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 20H7L3 16l11-11 7 7z"/><path d="M6 11l7 7"/></svg>
          <span>Eraser <i class="fa fa-caret-down tb-caret"></i></span>
        </button>
        <div class="tb-dropdown-menu" id="eraser-menu">
          <button onclick="setTool('eraser'); closeAllDropdowns()">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M20 20H7L3 16l11-11 7 7z"/><path d="M6 11l7 7"/></svg> Eraser
          </button>
          <button onclick="resetAllAnnotations(); closeAllDropdowns()">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/></svg> Erase Drawing
          </button>
        </div>
      </div>

      <!-- 6. Highlight -->
      <button class="tb-btn" id="btn-highlight" onclick="setTool('highlight')" title="Highlight">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 11l-1 9 4-2 4 2-1-9"/><rect x="5" y="3" width="14" height="8" rx="1" fill="currentColor" opacity=".3"/></svg>
        <span>Highlight</span>
      </button>

      <!-- 7. Pencil -->
      <button class="tb-btn" id="btn-draw" onclick="setTool('draw')" title="Pencil / Draw">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4z"/></svg>
        <span>Pencil</span>
      </button>
      <div class="tb-sep"></div>

      <!-- 8. Image dropdown -->
      <div class="tb-dropdown">
        <button class="tb-btn" id="btn-image-dd" onclick="toggleDropdown('image-menu', event)" title="Image / Stamp">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="M21 15l-5-5L5 21"/></svg>
          <span>Image <i class="fa fa-caret-down tb-caret"></i></span>
        </button>
        <div class="tb-dropdown-menu" id="image-menu">
          <button onclick="insertImage(); closeAllDropdowns()">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="M21 15l-5-5L5 21"/></svg> Image
          </button>
          <button onclick="setTool('stamp'); closeAllDropdowns()">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M14 3H6a2 2 0 0 0-2 2v2a5 5 0 0 0 10 0V5a2 2 0 0 0-2-2z"/><path d="M12 11v3M4 21h16M9 17h6"/></svg> Stamp
          </button>
        </div>
      </div>

      <!-- 9. Ellipse / Shapes dropdown -->
      <div class="tb-dropdown">
        <button class="tb-btn" id="btn-shapes" onclick="toggleDropdown('ellipse-menu', event)" title="Shapes">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/></svg>
          <span>Ellipse <i class="fa fa-caret-down tb-caret"></i></span>
        </button>
        <div class="tb-dropdown-menu" id="ellipse-menu">
          <button onclick="setShapeType(null,'ellipse'); setTool('shapes'); closeAllDropdowns()">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/></svg> Ellipse
          </button>
          <button onclick="setDrawMode(null,'line'); setTool('draw'); closeAllDropdowns()">
            <svg width="14" height="14" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5" fill="none"><line x1="2" y1="12" x2="22" y2="12"/></svg> Line
          </button>
          <button onclick="setDrawMode(null,'arrow'); setTool('draw'); closeAllDropdowns()">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg> Arrow
          </button>
          <button onclick="setShapeType(null,'rect'); setTool('shapes'); closeAllDropdowns()">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="5" width="18" height="14" rx="1"/></svg> Rectangle
          </button>
          <button onclick="showToast('Polygon tool coming soon'); closeAllDropdowns()">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="12 2 22 8.5 22 15.5 12 22 2 15.5 2 8.5"/></svg> Polygon
          </button>
          <button onclick="showToast('Polyline tool coming soon'); closeAllDropdowns()">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 17 8 11 13 14 18 8 21 10"/></svg> Polyline
          </button>
        </div>
      </div>

      <!-- 10. Cross / Check -->
      <button class="tb-btn" id="btn-cross" onclick="placeSymbolAnnotation('cross')" title="Cross mark">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="5" y1="5" x2="19" y2="19"/><line x1="19" y1="5" x2="5" y2="19"/></svg>
        <span>Cross</span>
      </button>
      <button class="tb-btn" id="btn-check" onclick="placeSymbolAnnotation('check')" title="Check mark">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
        <span>Check</span>
      </button>
      <div class="tb-sep"></div>

      <!-- 11. Sign -->
      <button class="tb-btn" id="btn-sign" onclick="openSignModal()" title="Signature">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 17c3.3-3.3 5-5 5-8 0-1.7-1.3-3-3-3S3 7.3 3 9c0 3.3 2 5 5 8H3"/><path d="M12 20h9"/></svg>
        <span>Sign</span>
      </button>

      <!-- 12. Annotations -->
      <button class="tb-btn" id="btn-annotations" onclick="showToast('Annotations panel coming soon')" title="Annotations">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
        <span>Annotations</span>
      </button>

      <!-- 13. Links -->
      <button class="tb-btn" id="btn-link" onclick="setTool('link')" title="Add Link">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
        <span>Links</span>
      </button>

      <!-- 14. More tools dropdown -->
      <div class="tb-dropdown">
        <button class="tb-btn" id="btn-more" onclick="toggleDropdown('more-menu', event)" title="More tools">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><circle cx="5" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="19" cy="12" r="2"/></svg>
          <span>More tools <i class="fa fa-caret-down tb-caret"></i></span>
        </button>
        <div class="tb-dropdown-menu" id="more-menu" style="right:0;left:auto;">
          <button onclick="zoomIn(); closeAllDropdowns()">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/><line x1="11" y1="8" x2="11" y2="14"/><line x1="8" y1="11" x2="14" y2="11"/></svg> Zoom in
          </button>
          <button onclick="zoomOut(); closeAllDropdowns()">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/><line x1="8" y1="11" x2="14" y2="11"/></svg> Zoom out
          </button>
          <div class="menu-sep"></div>
          <button onclick="showToast('Document Crop coming soon'); closeAllDropdowns()">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 2v14a2 2 0 0 0 2 2h14"/><path d="M18 22V8a2 2 0 0 0-2-2H2"/></svg> Document Crop
          </button>
          <div class="menu-sep"></div>
          <button onclick="setTool('whiteout'); closeAllDropdowns()"><i class="fa fa-eraser"></i> Redact</button>
          <button onclick="addNote(); closeAllDropdowns()">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg> Note
          </button>
          <button onclick="openWatermarkModal(); closeAllDropdowns()">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5M2 12l10 5 10-5"/></svg> Watermark
          </button>
        </div>
      </div>

      <!-- Right section -->
      <div id="action-btns">
        <!-- Page layout dropdown -->
        <div class="tb-dropdown">
          <button class="tb-btn" id="btn-pagelayout" onclick="toggleDropdown('pagelayout-menu', event)" title="Page layout" style="min-width:76px;">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="8" height="18" rx="1"/><rect x="13" y="3" width="9" height="8" rx="1"/><rect x="13" y="14" width="9" height="7" rx="1"/></svg>
            <span>Page layout <i class="fa fa-caret-down tb-caret"></i></span>
          </button>
          <div class="tb-dropdown-menu" id="pagelayout-menu" style="right:0;left:auto;min-width:220px;">
            <div style="padding:6px 12px 2px;font-size:10px;font-weight:700;color:#8899d0;letter-spacing:.05em;text-transform:uppercase;">Page Mode</div>
            <div style="display:flex;gap:6px;padding:4px 12px 8px;">
              <button onclick="showToast('Single page mode'); closeAllDropdowns()" title="Single page" style="flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 4px;border:1px solid #e0e5ff;border-radius:6px;background:#f8f9ff;cursor:pointer;font-size:10px;color:#374151;">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="4" y="2" width="16" height="20" rx="1"/></svg>
                Single
              </button>
              <button onclick="showToast('Double page facing mode'); closeAllDropdowns()" title="Double page facing" style="flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 4px;border:1px solid #e0e5ff;border-radius:6px;background:#f8f9ff;cursor:pointer;font-size:10px;color:#374151;">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="1" y="2" width="10" height="20" rx="1"/><rect x="13" y="2" width="10" height="20" rx="1"/></svg>
                Facing
              </button>
              <button onclick="showToast('Book mode'); closeAllDropdowns()" title="Book" style="flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 4px;border:1px solid #e0e5ff;border-radius:6px;background:#f8f9ff;cursor:pointer;font-size:10px;color:#374151;">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg>
                Book
              </button>
            </div>
            <div class="menu-sep"></div>
            <div style="padding:6px 12px 2px;font-size:10px;font-weight:700;color:#8899d0;letter-spacing:.05em;text-transform:uppercase;">Page Transition</div>
            <div style="display:flex;gap:6px;padding:4px 12px 8px;">
              <button onclick="showToast('Scroll transition'); closeAllDropdowns()" title="Scroll" style="flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 4px;border:1px solid #e0e5ff;border-radius:6px;background:#f8f9ff;cursor:pointer;font-size:10px;color:#374151;">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg>
                Scroll
              </button>
              <button onclick="showToast('Flip transition'); closeAllDropdowns()" title="Page flip" style="flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 4px;border:1px solid #e0e5ff;border-radius:6px;background:#f8f9ff;cursor:pointer;font-size:10px;color:#374151;">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 3L3 12l9 9M3 12h18"/></svg>
                Flip
              </button>
            </div>
            <div class="menu-sep"></div>
            <div style="padding:6px 12px 2px;font-size:10px;font-weight:700;color:#8899d0;letter-spacing:.05em;text-transform:uppercase;">Page Rotation</div>
            <button onclick="rotateCurrentPageCW(); closeAllDropdowns()">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M21 2v6h-6"/><path d="M3 12a9 9 0 0 1 15-6.7L21 8"/></svg> Rotate Clockwise
            </button>
            <button onclick="rotateCurrentPageCCW(); closeAllDropdowns()">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M3 2v6h6"/><path d="M21 12a9 9 0 0 0-15-6.7L3 8"/></svg> Rotate Counter-CW
            </button>
          </div>
        </div>

        <!-- Manage Pages -->
        <button class="tb-btn" onclick="openManagePages()" title="Manage Pages" style="min-width:58px;">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 7V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2"/><line x1="12" y1="12" x2="12" y2="16"/><line x1="10" y1="14" x2="14" y2="14"/></svg>
          <span>Manage</span>
        </button>
        <div class="tb-sep"></div>

        <!-- Search / Print -->
        <button class="tb-btn" onclick="toggleSearch()" title="Find in document" style="min-width:52px;">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
          <span>Search</span>
        </button>
        <button class="tb-btn" onclick="printPdf()" title="Print" style="min-width:46px;">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 6 2 18 2 18 9"/><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/><rect x="6" y="14" width="12" height="8"/></svg>
          <span>Print</span>
        </button>
        <button class="tb-btn" onclick="downloadPdf()" title="Download PDF" style="min-width:52px;">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
          <span>Download</span>
        </button>
        <button class="btn-cancel" onclick="savePdf()" style="border:1.5px solid var(--primary);color:var(--primary);background:#fff;">Save</button>
        <button class="btn-save" onclick="saveAndClose()">Done</button>
      </div>
    </div>

    <!-- Context bar: tool-sensitive formatting (replaces sub-panels + font-bar) -->
    <div id="ctx-bar">
      <!-- Text context: Add Text / Edit Text -->
      <!-- Add Text context bar -->
      <div id="ctx-add-text">
        <button class="ctx-btn" onclick="deleteSelectedTextBox()" title="Delete" style="color:#ef4444;">
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14H6L5 6"/><path d="M9 6V4h6v2"/></svg>
        </button>
        <div class="ctx-sep"></div>
        <span class="ctx-label">Fill</span>
        <input type="color" id="text-bg-color" value="#ffffff" title="Fill" onchange="applyFontToSelected()" style="width:24px;height:24px;padding:2px;border:1px solid #e0e5ff;border-radius:4px;cursor:pointer;">
        <button class="ctx-btn" id="btn-text-bg-none" onclick="toggleTextBgNone()" title="No fill">&#x2205;</button>
        <span class="ctx-label">Color</span>
        <input type="color" id="text-color" value="#000000" title="Text color" onchange="applyFontToSelected()" style="width:24px;height:24px;padding:2px;border:1px solid #e0e5ff;border-radius:4px;cursor:pointer;">
        <div class="ctx-sep"></div>
        <button class="ctx-btn" onclick="duplicateSelectedTextBox()" title="Copy">
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg>
        </button>
        <span class="ctx-label">Opacity</span>
        <input type="range" id="text-box-opacity" min="10" max="100" value="100" oninput="setTextBoxOpacity(this.value)" style="width:60px;accent-color:var(--primary);">
        <span id="text-box-opacity-val" class="ctx-label">100%</span>
        <div class="ctx-sep"></div>
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="opacity:.6;flex-shrink:0;"><path d="M4 7V5h16v2M9 5v14M15 5v14M9 19h6"/></svg>
        <select class="ctx-select" id="font-family" onchange="applyFontToSelected()" style="width:120px;">
          <option value="Liberation Sans">Liberation Sans</option>
          <option value="Liberation Serif">Liberation Serif</option>
          <option value="Helvetica">Helvetica</option>
          <option value="Times New Roman">Times New Roman</option>
          <option value="Courier New">Courier New</option>
          <option value="Arial">Arial</option>
          <option value="Georgia">Georgia</option>
          <option value="Verdana">Verdana</option>
        </select>
        <input class="ctx-number" id="font-size" type="number" min="6" max="144" value="16" onchange="applyFontToSelected()" style="width:44px;">
        <div class="ctx-sep"></div>
        <button class="ctx-btn" id="btn-align-left" onclick="setTextAlign('left')" title="Align left"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="21" y1="6" x2="3" y2="6"/><line x1="15" y1="12" x2="3" y2="12"/><line x1="17" y1="18" x2="3" y2="18"/></svg></button>
        <button class="ctx-btn" id="btn-align-center" onclick="setTextAlign('center')" title="Center"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="21" y1="6" x2="3" y2="6"/><line x1="17" y1="12" x2="7" y2="12"/><line x1="19" y1="18" x2="5" y2="18"/></svg></button>
        <button class="ctx-btn" id="btn-align-right" onclick="setTextAlign('right')" title="Align right"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="21" y1="6" x2="3" y2="6"/><line x1="21" y1="12" x2="9" y2="12"/><line x1="21" y1="18" x2="7" y2="18"/></svg></button>
        <div class="ctx-sep"></div>
        <button class="ctx-btn" id="btn-underline" onclick="toggleUnderline()" title="Underline"><span style="text-decoration:underline;font-size:12px;font-weight:600;">U</span></button>
        <button class="ctx-btn" id="btn-strikethrough" onclick="toggleStrikethrough()" title="Strikethrough"><span style="text-decoration:line-through;font-size:12px;font-weight:600;">S</span></button>
        <div class="ctx-sep"></div>
        <button class="ctx-btn" id="btn-valign-top" onclick="setVerticalAlign('top')" title="Top"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="3" y1="4" x2="21" y2="4"/><rect x="9" y="8" width="6" height="12" rx="1"/></svg></button>
        <button class="ctx-btn" id="btn-valign-mid" onclick="setVerticalAlign('mid')" title="Middle"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="3" y1="12" x2="21" y2="12"/><rect x="9" y="6" width="6" height="12" rx="1"/></svg></button>
        <button class="ctx-btn" id="btn-valign-bot" onclick="setVerticalAlign('bot')" title="Bottom"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="3" y1="20" x2="21" y2="20"/><rect x="9" y="4" width="6" height="12" rx="1"/></svg></button>
      </div>
      <!-- Edit Text context bar -->
      <div id="ctx-edit-text">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="opacity:.6;flex-shrink:0;"><path d="M4 7V5h16v2M9 5v14M15 5v14M9 19h6"/></svg>
        <div class="ctx-sep"></div>
        <span class="ctx-label">Color</span>
        <input type="color" id="text-color2" value="#000000" title="Text color" onchange="applyFontColor(this.value)" style="width:24px;height:24px;padding:2px;border:1px solid #e0e5ff;border-radius:4px;cursor:pointer;">
        <div class="ctx-sep"></div>
        <select class="ctx-select" id="font-family2" onchange="applyFontFamily2(this.value)" style="width:120px;">
          <option value="Liberation Sans">Liberation Sans</option>
          <option value="Liberation Serif">Liberation Serif</option>
          <option value="Helvetica">Helvetica</option>
          <option value="Times New Roman">Times New Roman</option>
          <option value="Courier New">Courier New</option>
          <option value="Arial">Arial</option>
          <option value="Georgia">Georgia</option>
          <option value="Verdana">Verdana</option>
        </select>
        <input class="ctx-number" id="font-size2" type="number" min="6" max="144" value="16" onchange="applyFontSize2(this.value)" style="width:44px;">
        <div class="ctx-sep"></div>
        <button class="ctx-btn" id="btn-bold" onclick="toggleBold()" title="Bold"><b>B</b></button>
        <button class="ctx-btn" id="btn-italic" onclick="toggleItalic()" title="Italic"><i>I</i></button>
        <div class="ctx-sep"></div>
        <button class="ctx-btn" onclick="deleteSelectedTextBox()" title="Delete" style="color:#ef4444;">
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14H6L5 6"/><path d="M9 6V4h6v2"/></svg>
        </button>
      </div>

      <!-- Draw / Pencil context -->
      <div id="ctx-draw">
        <span class="ctx-label">Color</span>
        <div class="sp-swatches" id="sp-draw-swatches">
          <button class="sp-swatch active" data-color="#000000" style="background:#000" onclick="setDrawColor(this,'#000000')"></button>
          <button class="sp-swatch" data-color="#dc2626" style="background:#dc2626" onclick="setDrawColor(this,'#dc2626')"></button>
          <button class="sp-swatch" data-color="#2563eb" style="background:#2563eb" onclick="setDrawColor(this,'#2563eb')"></button>
          <button class="sp-swatch" data-color="#16a34a" style="background:#16a34a" onclick="setDrawColor(this,'#16a34a')"></button>
          <button class="sp-swatch" data-color="#f97316" style="background:#f97316" onclick="setDrawColor(this,'#f97316')"></button>
          <label class="sp-swatch-custom"><input type="color" id="draw-color" value="#000000" onchange="setDrawColor(null,this.value,true)"></label>
        </div>
        <div class="ctx-sep"></div>
        <span class="ctx-label">Width</span>
        <input type="range" id="draw-width" min="1" max="20" value="4" oninput="setDrawWidth(this.value)" style="width:90px;accent-color:var(--primary);">
        <span class="ctx-label" id="draw-width-val">4px</span>
        <div class="ctx-sep"></div>
        <div class="sp-mode-btns" id="sp-draw-modes">
          <button class="sp-mode-btn active" data-mode="pen" onclick="setDrawMode(this,'pen')"><i class="fa fa-pencil-alt"></i> Pen</button>
          <button class="sp-mode-btn" data-mode="line" onclick="setDrawMode(this,'line')"><i class="fa fa-minus"></i> Line</button>
          <button class="sp-mode-btn" data-mode="arrow" onclick="setDrawMode(this,'arrow')"><i class="fa fa-long-arrow-alt-right"></i> Arrow</button>
          <button class="sp-mode-btn" data-mode="dashed" onclick="setDrawMode(this,'dashed')"><i class="fa fa-ellipsis-h"></i> Dashed</button>
        </div>
      </div>

      <!-- Highlight context -->
      <div id="ctx-highlight">
        <span class="ctx-label">Color</span>
        <div class="sp-swatches" id="sp-hl-swatches">
          <button class="sp-swatch active" data-color="#fbbf24" style="background:#fbbf24" onclick="setHighlightColor(this,'#fbbf24')"></button>
          <button class="sp-swatch" data-color="#4ade80" style="background:#4ade80" onclick="setHighlightColor(this,'#4ade80')"></button>
          <button class="sp-swatch" data-color="#67e8f9" style="background:#67e8f9" onclick="setHighlightColor(this,'#67e8f9')"></button>
          <button class="sp-swatch" data-color="#f9a8d4" style="background:#f9a8d4" onclick="setHighlightColor(this,'#f9a8d4')"></button>
          <button class="sp-swatch" data-color="#a78bfa" style="background:#a78bfa" onclick="setHighlightColor(this,'#a78bfa')"></button>
          <label class="sp-swatch-custom"><input type="color" id="highlight-color" value="#fbbf24" onchange="setHighlightColor(null,this.value,true)"></label>
        </div>
        <div class="ctx-sep"></div>
        <span class="ctx-label">Opacity</span>
        <input type="range" id="highlight-opacity" min="20" max="80" value="35" oninput="setHighlightOpacity(this.value)" style="width:90px;accent-color:var(--primary);">
        <span class="ctx-label" id="highlight-opacity-val">35%</span>
      </div>

      <!-- Eraser context -->
      <div id="ctx-eraser">
        <span class="ctx-label">Size</span>
        <input type="range" id="eraser-size" min="5" max="50" value="15" oninput="setEraserSize(this.value)" style="width:110px;accent-color:var(--primary);">
        <span class="ctx-label" id="eraser-size-val">15px</span>
      </div>

      <!-- Shapes context -->
      <div id="ctx-shapes">
        <div class="sp-mode-btns" id="sp-shape-types">
          <button class="sp-mode-btn active" data-shape="rect" onclick="setShapeType(this,'rect')"><i class="far fa-square"></i></button>
          <button class="sp-mode-btn" data-shape="filled-rect" onclick="setShapeType(this,'filled-rect')"><i class="fa fa-square"></i></button>
          <button class="sp-mode-btn" data-shape="ellipse" onclick="setShapeType(this,'ellipse')"><i class="far fa-circle"></i></button>
          <button class="sp-mode-btn" data-shape="filled-ellipse" onclick="setShapeType(this,'filled-ellipse')"><i class="fa fa-circle"></i></button>
          <button class="sp-mode-btn" data-shape="arrow" onclick="setShapeType(this,'arrow')"><i class="fa fa-long-arrow-alt-right"></i></button>
          <button class="sp-mode-btn" data-shape="line" onclick="setShapeType(this,'line')"><i class="fa fa-minus"></i></button>
        </div>
        <div class="ctx-sep"></div>
        <span class="ctx-label">Stroke</span>
        <div class="sp-swatches" id="sp-shape-stroke-swatches">
          <button class="sp-swatch active" data-color="#1e293b" style="background:#1e293b" onclick="setShapeStroke(this,'#1e293b')"></button>
          <button class="sp-swatch" data-color="#dc2626" style="background:#dc2626" onclick="setShapeStroke(this,'#dc2626')"></button>
          <button class="sp-swatch" data-color="#2563eb" style="background:#2563eb" onclick="setShapeStroke(this,'#2563eb')"></button>
          <button class="sp-swatch" data-color="#16a34a" style="background:#16a34a" onclick="setShapeStroke(this,'#16a34a')"></button>
          <label class="sp-swatch-custom"><input type="color" id="shape-stroke-color" value="#1e293b" onchange="setShapeStroke(null,this.value,true)"></label>
        </div>
        <div class="ctx-sep"></div>
        <span class="ctx-label">Fill</span>
        <div class="sp-swatches" id="sp-shape-fill-swatches">
          <button class="sp-swatch-none active" data-fill="none" onclick="setShapeFill(this,'none')">&#x2205;</button>
          <button class="sp-swatch" data-color="#fef08a" style="background:#fef08a" onclick="setShapeFill(this,'#fef08a')"></button>
          <button class="sp-swatch" data-color="#bfdbfe" style="background:#bfdbfe" onclick="setShapeFill(this,'#bfdbfe')"></button>
          <button class="sp-swatch" data-color="#bbf7d0" style="background:#bbf7d0" onclick="setShapeFill(this,'#bbf7d0')"></button>
          <label class="sp-swatch-custom"><input type="color" id="shape-fill-color" value="#fef08a" onchange="setShapeFill(null,this.value,true)"></label>
        </div>
        <div class="ctx-sep"></div>
        <span class="ctx-label">Width</span>
        <input type="range" id="shape-width" min="1" max="20" value="2" oninput="setShapeWidth(this.value)" style="width:80px;accent-color:var(--primary);">
        <span class="ctx-label" id="shape-width-val">2px</span>
        <div class="ctx-sep"></div>
        <span class="ctx-label">Opacity</span>
        <input type="range" id="shape-opacity" min="10" max="100" value="100" oninput="applyShapeOpacity(this.value)" style="width:60px;accent-color:var(--primary);">
        <span id="shape-opacity-val" class="ctx-label">100%</span>
        <div class="ctx-sep"></div>
        <span class="ctx-label">Dash</span>
        <select class="ctx-select" id="shape-dash-pattern" onchange="applyShapeDash(this.value)" style="width:80px;">
          <option value="solid">Solid</option>
          <option value="dashed">Dashed</option>
          <option value="dotted">Dotted</option>
          <option value="dash-dot">Dash·Dot</option>
        </select>
        <div class="ctx-sep"></div>
        <button class="ctx-btn" onclick="deleteSelectedEl()" title="Delete shape" style="color:#ef4444;">
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14H6L5 6"/><path d="M9 6V4h6v2"/></svg>
        </button>
      </div>
      <!-- Section: element selected -->
      <div id="ctx-select">
        <span class="ctx-label" id="ctx-select-type-label">Object</span>
        <div class="ctx-sep"></div>
        <button class="ctx-btn" onclick="duplicateSelectedEl()" title="Duplicate">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg>
          <span style="font-size:11px;margin-left:2px;">Copy</span>
        </button>
        <button class="ctx-btn" onclick="deleteSelectedEl()" title="Delete" style="color:#ef4444;">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6"/><path d="M10 11v6M14 11v6"/><path d="M9 6V4h6v2"/></svg>
          <span style="font-size:11px;margin-left:2px;">Delete</span>
        </button>
        <div class="ctx-sep"></div>
        <span class="ctx-label">Opacity</span>
        <input type="range" id="sel-opacity" min="10" max="100" value="100" oninput="setSelectedOpacity(this.value)" style="width:70px;accent-color:var(--primary);">
        <span id="sel-opacity-val" class="ctx-label">100%</span>
        <div class="ctx-sep"></div>
        <button class="ctx-btn" onclick="bringForward()" title="Bring Forward">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="8" width="13" height="13" rx="1"/><rect x="8" y="3" width="13" height="13" rx="1" fill="white" stroke="currentColor"/></svg>
        </button>
        <button class="ctx-btn" onclick="sendBackward()" title="Send Backward">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="8" y="8" width="13" height="13" rx="1"/><rect x="3" y="3" width="13" height="13" rx="1" fill="white" stroke="currentColor"/></svg>
        </button>
      </div>
    </div>

    <!-- Hidden stub panels for JS backward-compat (do not remove) -->
    <div id="sp-draw" class="sub-panel" style="display:none!important"></div>
    <div id="sp-highlight" class="sub-panel" style="display:none!important"></div>
    <div id="sp-eraser" class="sub-panel" style="display:none!important"></div>
    <div id="sp-shapes" class="sub-panel" style="display:none!important"></div>
    <div id="font-bar" style="display:none!important"></div>

    </div><!-- /#sticky-header -->


    <!-- Editor body -->
    <div id="editor-body">
      <!-- Thumbnail panel (hidden until PDF is loaded) -->
      <div id="thumb-panel" style="display:none"></div>

      <!-- Main canvas area -->
      <div id="canvas-area">
        <!-- Upload prompt — thebestpdf.com style two-column layout -->
        <div id="upload-prompt">
          <div class="upload-inner">
            <!-- Left column: heading + checkbox feature bullets -->
            <div class="upload-left">
              <h1>Edit your PDF</h1>
              <p class="upload-desc">
                Add text, images, shapes, and signatures to any PDF — free and in your browser.
              </p>
              <ul class="upload-features upload-features-check">
                <li>
                  <span class="feat-check">
                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none"><rect width="20" height="20" rx="4" fill="#3758F9"/><path d="M5 10.5l3.5 3.5L15 7" stroke="#fff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                  </span>
                  <span><strong>Easy Edits:</strong> Modify text, images, and links effortlessly.</span>
                </li>
                <li>
                  <span class="feat-check">
                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none"><rect width="20" height="20" rx="4" fill="#3758F9"/><path d="M5 10.5l3.5 3.5L15 7" stroke="#fff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                  </span>
                  <span><strong>Annotate &amp; Highlight:</strong> Add comments and highlights quickly.</span>
                </li>
                <li>
                  <span class="feat-check">
                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none"><rect width="20" height="20" rx="4" fill="#3758F9"/><path d="M5 10.5l3.5 3.5L15 7" stroke="#fff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                  </span>
                  <span><strong>Custom Formatting:</strong> Adjust fonts, colors, and layouts easily.</span>
                </li>
              </ul>
              <!-- Numbered step circles — thebestpdf.com style -->
              <div class="upload-steps">
                <div class="upload-step">
                  <span class="step-circle">1</span>
                  <span class="step-label">Upload your PDF</span>
                </div>
                <div class="upload-step-line"></div>
                <div class="upload-step">
                  <span class="step-circle">2</span>
                  <span class="step-label">Edit &amp; annotate</span>
                </div>
                <div class="upload-step-line"></div>
                <div class="upload-step">
                  <span class="step-circle">3</span>
                  <span class="step-label">Download</span>
                </div>
              </div>
            </div>

            <!-- Right column: drop zone card -->
            <div class="upload-right">
              <div id="drop-zone">
                <div class="drop-icon">
                  <!-- Stacked documents illustration -->
                  <svg viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <rect x="18" y="18" width="48" height="54" rx="4" fill="#EBEEFF" stroke="#BEC9FF" stroke-width="1.5"/>
                    <rect x="10" y="10" width="48" height="54" rx="4" fill="#e8f0fe" stroke="#BEC9FF" stroke-width="1.5"/>
                    <rect x="14" y="14" width="48" height="54" rx="4" fill="#fff" stroke="#c7d0ff" stroke-width="1.5"/>
                    <path d="M48 14l14 14h-14V14z" fill="#EBEEFF" stroke="#c7d0ff" stroke-width="1.2" stroke-linejoin="round"/>
                    <rect x="22" y="36" width="24" height="2.5" rx="1.25" fill="#3758F9" opacity=".35"/>
                    <rect x="22" y="42" width="18" height="2.5" rx="1.25" fill="#3758F9" opacity=".35"/>
                    <rect x="22" y="48" width="20" height="2.5" rx="1.25" fill="#3758F9" opacity=".35"/>
                    <circle cx="60" cy="60" r="14" fill="#3758F9"/>
                    <path d="M60 53v14M53 60h14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/>
                  </svg>
                </div>
                <p class="drop-title">Drag &amp; drop your file</p>
                <div class="drop-or-divider">
                  <span class="drop-or-line"></span>
                  <span class="drop-or-text">or</span>
                  <span class="drop-or-line"></span>
                </div>
                <label class="drop-btn-upload">
                  Upload PDF
                  <input type="file" id="file-input" accept=".pdf" style="display:none" onchange="loadPdfFromFile(this)">
                </label>
                <p class="drop-size-note">Size up to 100 MB</p>
                {% if limit_info and not limit_info.is_unlimited %}
                <p style="color:#94a3b8;font-size:12px;margin:0;">
                  {{ limit_info.used }} / {{ limit_info.limit }} edits used today
                  {% if limit_info.used >= limit_info.limit %}
                  &mdash; <a href="{{ full_url('/pricing') }}" style="color:var(--primary);">Upgrade</a>
                  {% endif %}
                </p>
                {% endif %}
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Right properties panel — visible when text/annotation tool is active -->
      <div id="props-panel">
        <div class="pp-title" id="pp-title">Text Properties</div>
        <div class="pp-sep"></div>

        <!-- Font family + size -->
        <div class="pp-section">
          <div class="pp-label">Font</div>
          <div class="pp-row">
            <select class="pp-select" id="pp-font-family" onchange="ppSetFont()">
              <option value="Arial">Arial</option>
              <option value="Times New Roman">Times New Roman</option>
              <option value="Courier New">Courier New</option>
              <option value="Georgia">Georgia</option>
              <option value="Verdana">Verdana</option>
              <option value="Helvetica">Helvetica</option>
              <option value="Trebuchet MS">Trebuchet MS</option>
              <option value="Impact">Impact</option>
            </select>
            <input class="pp-number" id="pp-font-size" type="number" min="6" max="144" value="12" onchange="ppSetFont()">
          </div>
        </div>

        <!-- Bold / Italic / Underline -->
        <div class="pp-section">
          <div class="pp-label">Style</div>
          <div class="pp-row">
            <button class="pp-toggle" id="pp-bold" onclick="ppToggleStyle('bold')" title="Bold"><b>B</b></button>
            <button class="pp-toggle" id="pp-italic" onclick="ppToggleStyle('italic')" title="Italic"><i>I</i></button>
            <button class="pp-toggle" id="pp-underline" onclick="ppToggleStyle('underline')" title="Underline"><u>U</u></button>
          </div>
        </div>

        <!-- Text color / Background -->
        <div class="pp-section">
          <div class="pp-label">Color</div>
          <div class="pp-row">
            <input class="pp-color" type="color" id="pp-text-color" value="#000000" onchange="ppSetColor()" title="Text color">
            <span style="font-size:12px;color:#64748b;">Text</span>
            <input class="pp-color" type="color" id="pp-bg-color" value="#ffffff" onchange="ppSetBgColor()" title="Background">
            <span style="font-size:12px;color:#64748b;">BG</span>
          </div>
        </div>

        <!-- Alignment -->
        <div class="pp-section">
          <div class="pp-label">Alignment</div>
          <div class="pp-align-row" id="pp-align-row">
            <button class="pp-align-btn active" data-align="left" onclick="ppSetAlign('left')" title="Align left">&#9776;</button>
            <button class="pp-align-btn" data-align="center" onclick="ppSetAlign('center')" title="Align center">&#9632;</button>
            <button class="pp-align-btn" data-align="right" onclick="ppSetAlign('right')" title="Align right">&#8801;</button>
          </div>
        </div>

        <div class="pp-sep"></div>

        <!-- Opacity -->
        <div class="pp-section">
          <div class="pp-label">Opacity</div>
          <div class="pp-row">
            <input type="range" min="10" max="100" value="100" id="pp-opacity" oninput="ppSetOpacity(this.value)" style="flex:1;">
            <span id="pp-opacity-val" style="font-size:12px;color:#475569;min-width:34px;">100%</span>
          </div>
        </div>
      </div>
    </div>

    <!-- Page navigator — dark pill -->
    <div id="page-nav" style="display:none;">
      <button onclick="zoomOut()" title="Zoom out">
        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><line x1="8" y1="11" x2="14" y2="11"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
      </button>
      <div class="page-sep"></div>
      <button onclick="prevPage()" title="Previous page">
        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="18 15 12 9 6 15"/></svg>
      </button>
      <div class="page-label">
        <span style="font-size:12px;opacity:.7;">Page</span>
        <input id="page-input" type="number" min="1" value="1" onchange="jumpToPage(this.value)">
        <span style="opacity:.5;">/</span>
        <span id="page-total">1</span>
      </div>
      <button onclick="nextPage()" title="Next page">
        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
      </button>
      <div class="page-sep"></div>
      <button onclick="zoomIn()" title="Zoom in">
        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><line x1="11" y1="8" x2="11" y2="14"/><line x1="8" y1="11" x2="14" y2="11"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
      </button>
      <button onclick="setTool('pan')" title="Hand / Pan tool">
        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 11V7a2 2 0 0 0-2-2 2 2 0 0 0-2 2"/><path d="M14 10V5a2 2 0 0 0-2-2 2 2 0 0 0-2 2v1"/><path d="M10 10.5V5a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7"/><path d="M6 14a2 2 0 0 0-2 2v0a8 8 0 0 0 8 8h4a8 8 0 0 0 8-8v-5a2 2 0 0 0-2-2 2 2 0 0 0-2 2"/></svg>
      </button>
    </div>
  </div>




  <!-- 3-tab Signature modal -->
  <div id="sign-canvas-wrap">
    <div id="sign-modal">
      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;">
        <h3 style="margin:0;font-size:18px;font-weight:700;color:#0f172a;">Signature</h3>
        <button onclick="closeSignModal()" style="border:none;background:none;font-size:22px;cursor:pointer;color:#94a3b8;line-height:1;">&times;</button>
      </div>

      <!-- Tabs -->
      <div class="sign-tabs">
        <button class="sign-tab active" onclick="switchSignTab('draw',this)">Draw</button>
        <button class="sign-tab" onclick="switchSignTab('type',this)">Type</button>
        <button class="sign-tab" onclick="switchSignTab('upload',this)">Upload</button>
      </div>

      <!-- Draw tab -->
      <div class="sign-tab-panel active" id="sign-tab-draw">
        <canvas id="sign-canvas" width="460" height="160" style="border:1.5px solid #e0e5ff;border-radius:8px;display:block;cursor:crosshair;touch-action:none;"></canvas>
        <div style="display:flex;gap:10px;margin-top:16px;justify-content:space-between;">
          <button onclick="clearSign()" style="padding:8px 18px;border:1px solid #e0e5ff;border-radius:8px;background:#f8f9ff;cursor:pointer;font-family:inherit;">Clear</button>
          <button onclick="applySign()" style="padding:8px 18px;border:none;border-radius:8px;background:var(--primary);color:#fff;cursor:pointer;font-weight:600;font-family:inherit;box-shadow:0 2px 8px rgba(55,88,249,.25);">Apply Signature</button>
        </div>
      </div>

      <!-- Type tab -->
      <div class="sign-tab-panel" id="sign-tab-type">
        <input type="text" id="sign-type-input" placeholder="Type your name…" maxlength="60"
          oninput="renderTypeSignature()"
          style="width:100%;padding:10px 14px;font-size:16px;border:1.5px solid #e0e5ff;border-radius:8px;font-family:inherit;box-sizing:border-box;margin-bottom:12px;outline:none;">
        <div class="type-sig-font-row" id="type-sig-fonts">
          <button class="type-sig-font-btn active" data-font="'Dancing Script', cursive" onclick="setTypeSigFont(this)"><span style="font-family:'Dancing Script',cursive">Your Name</span></button>
          <button class="type-sig-font-btn" data-font="'Pacifico', cursive" onclick="setTypeSigFont(this)"><span style="font-family:'Pacifico',cursive">Your Name</span></button>
          <button class="type-sig-font-btn" data-font="Georgia, serif" onclick="setTypeSigFont(this)"><span style="font-family:Georgia,serif">Your Name</span></button>
          <button class="type-sig-font-btn" data-font="'Courier New', monospace" onclick="setTypeSigFont(this)"><span style="font-family:'Courier New',monospace">Your Name</span></button>
        </div>
        <canvas id="sign-type-canvas" width="460" height="110" style="border:1.5px solid #e0e5ff;border-radius:8px;display:block;background:#f8f9ff;"></canvas>
        <div style="display:flex;gap:10px;margin-top:14px;justify-content:flex-end;">
          <button onclick="applyTypeSignature()" style="padding:8px 18px;border:none;border-radius:8px;background:var(--primary);color:#fff;cursor:pointer;font-weight:600;font-family:inherit;box-shadow:0 2px 8px rgba(55,88,249,.25);">Apply Signature</button>
        </div>
      </div>

      <!-- Upload tab -->
      <div class="sign-tab-panel" id="sign-tab-upload">
        <label style="display:flex;flex-direction:column;align-items:center;justify-content:center;border:2px dashed #c7d0ff;border-radius:10px;padding:32px 20px;cursor:pointer;background:#f8f9ff;gap:12px;">
          <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#3758F9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="M21 15l-5-5L5 21"/></svg>
          <span style="font-size:14px;color:#64748b;">Click to upload a signature image (PNG/JPG)</span>
          <input type="file" id="sign-upload-input" accept="image/*" style="display:none" onchange="applyUploadedSignature(this)">
        </label>
      </div>
    </div>
  </div>

  <!-- Watermark modal -->
  <div id="watermark-overlay">
    <div id="watermark-modal">
      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;">
        <h3 style="margin:0;font-size:18px;font-weight:700;color:#0f172a;">Add Watermark</h3>
        <button onclick="closeWatermarkModal()" style="border:none;background:none;font-size:22px;cursor:pointer;color:#94a3b8;line-height:1;">&times;</button>
      </div>
      <div style="display:flex;flex-direction:column;gap:14px;">
        <div>
          <label style="display:block;font-size:12px;font-weight:600;color:#64748b;margin-bottom:6px;text-transform:uppercase;letter-spacing:.04em;">Watermark Text</label>
          <input id="wm-text" type="text" value="CONFIDENTIAL" maxlength="40"
            style="width:100%;padding:10px 14px;font-size:15px;border:1.5px solid #e0e5ff;border-radius:8px;font-family:inherit;box-sizing:border-box;outline:none;">
        </div>
        <div>
          <label style="display:block;font-size:12px;font-weight:600;color:#64748b;margin-bottom:6px;text-transform:uppercase;letter-spacing:.04em;">Color</label>
          <input id="wm-color" type="color" value="#cccccc" style="width:44px;height:36px;border:1px solid #e0e5ff;border-radius:6px;padding:2px;cursor:pointer;">
        </div>
        <div>
          <label style="display:block;font-size:12px;font-weight:600;color:#64748b;margin-bottom:6px;text-transform:uppercase;letter-spacing:.04em;">Opacity: <span id="wm-opacity-val">25%</span></label>
          <input id="wm-opacity" type="range" min="5" max="80" value="25"
            oninput="document.getElementById('wm-opacity-val').textContent=this.value+'%'"
            style="width:100%;">
        </div>
      </div>
      <div style="display:flex;gap:10px;margin-top:20px;justify-content:flex-end;">
        <button onclick="closeWatermarkModal()" style="padding:8px 18px;border:1px solid #e0e5ff;border-radius:8px;background:#f8f9ff;cursor:pointer;font-family:inherit;">Cancel</button>
        <button onclick="applyWatermark()" style="padding:8px 20px;border:none;border-radius:8px;background:var(--primary);color:#fff;cursor:pointer;font-weight:600;font-family:inherit;box-shadow:0 2px 8px rgba(55,88,249,.25);">Apply Watermark</button>
      </div>
    </div>
  </div>

  <!-- Stamp picker modal -->
  <!-- Stamp modal — two views: Stamp presets & Custom stamp -->
  <div id="stamp-overlay">
    <div id="stamp-modal">
      <!-- Header: title + Custom Stamp toggle + X -->
      <div class="stamp-modal-header">
        <span id="stamp-modal-title" style="font-size:15px;font-weight:700;color:#1e293b;">Use an existing stamp design</span>
        <button id="btn-switch-stamp-view" onclick="switchStampTab('custom')"
          style="margin-left:auto;padding:5px 12px;border:1.5px solid var(--primary);border-radius:8px;background:#fff;color:var(--primary);font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;">
          Custom Stamp
        </button>
        <button onclick="closeStampModal()" style="border:none;background:none;font-size:22px;cursor:pointer;color:#94a3b8;line-height:1;margin-left:8px;">&times;</button>
      </div>

      <!-- View 1: Stamp presets -->
      <div class="stamp-view active" id="stamp-view-presets">
        <div class="stamp-preset-grid" id="stamp-preset-list">
          <button class="stamp-preset-btn" data-stamp-color="#22c55e" onclick="applyPresetStamp(this)">APPROVED</button>
          <button class="stamp-preset-btn" data-stamp-color="#ef4444" onclick="applyPresetStamp(this)">NOT APPROVED</button>
          <button class="stamp-preset-btn" data-stamp-color="#3758F9" onclick="applyPresetStamp(this)">DRAFT</button>
          <button class="stamp-preset-btn" data-stamp-color="#22c55e" onclick="applyPresetStamp(this)">FINAL</button>
          <button class="stamp-preset-btn" data-stamp-color="#22c55e" onclick="applyPresetStamp(this)">COMPLETED</button>
          <button class="stamp-preset-btn" data-stamp-color="#8b5cf6" onclick="applyPresetStamp(this)">CONFIDENTIAL</button>
          <button class="stamp-preset-btn" data-stamp-color="#3758F9" onclick="applyPresetStamp(this)" style="font-size:10px;">FOR PUBLIC RELEASE</button>
          <button class="stamp-preset-btn" data-stamp-color="#8b5cf6" onclick="applyPresetStamp(this)" style="font-size:10px;">NOT FOR PUBLIC RELEASE</button>
        </div>
      </div>

      <!-- View 2: Custom stamp builder -->
      <div class="stamp-view" id="stamp-view-custom">
        <div class="custom-stamp-preview">
          <span id="custom-stamp-preview-text">CUSTOM</span>
        </div>
        <div style="margin-bottom:10px;">
          <label style="display:block;font-size:11px;font-weight:600;color:#64748b;margin-bottom:6px;text-transform:uppercase;letter-spacing:.05em;">Stamp text</label>
          <input id="stamp-custom-input" type="text" placeholder="e.g. VOID, PAID, FOR REVIEW…"
            style="width:100%;box-sizing:border-box;border:1px solid #c7d0ff;border-radius:8px;padding:8px 12px;font-size:14px;outline:none;font-family:inherit;"
            oninput="onStampCustomInput(this.value)"
            onkeydown="if(event.key==='Enter')applyStamp();if(event.key==='Escape')closeStampModal();">
        </div>
        <div style="display:flex;gap:16px;margin-bottom:14px;">
          <label style="display:flex;align-items:center;gap:6px;font-size:12px;color:#374151;cursor:pointer;">
            <input type="checkbox" id="stamp-include-date" checked onchange="_updateCustomStampPreview()" style="accent-color:var(--primary);">
            Include Date
          </label>
          <label style="display:flex;align-items:center;gap:6px;font-size:12px;color:#374151;cursor:pointer;">
            <input type="checkbox" id="stamp-include-time" onchange="_updateCustomStampPreview()" style="accent-color:var(--primary);">
            Include Time
          </label>
        </div>
        <div class="stamp-color-row" id="stamp-color-row" style="margin-bottom:14px;">
          <button class="stamp-color-swatch swatch-selected" data-color="#ef4444" style="background:#ef4444" onclick="setStampColor('#ef4444')"></button>
          <button class="stamp-color-swatch" data-color="#f97316" style="background:#f97316" onclick="setStampColor('#f97316')"></button>
          <button class="stamp-color-swatch" data-color="#22c55e" style="background:#22c55e" onclick="setStampColor('#22c55e')"></button>
          <button class="stamp-color-swatch" data-color="#3758F9" style="background:#3758F9" onclick="setStampColor('#3758F9')"></button>
          <button class="stamp-color-swatch" data-color="#eab308" style="background:#eab308" onclick="setStampColor('#eab308')"></button>
          <button class="stamp-color-swatch" data-color="#ec4899" style="background:#ec4899" onclick="setStampColor('#ec4899')"></button>
          <label class="stamp-color-custom"><input type="color" id="stamp-color-custom-input" oninput="setStampColor(this.value)"/></label>
        </div>
        <div style="display:flex;gap:10px;justify-content:flex-end;">
          <button onclick="closeStampModal()" style="padding:8px 18px;border:1px solid #e0e5ff;border-radius:8px;background:#f8f9ff;cursor:pointer;font-family:inherit;">Cancel</button>
          <button onclick="applyStamp()" style="padding:8px 18px;border:none;border-radius:8px;background:var(--primary);color:#fff;cursor:pointer;font-weight:600;font-family:inherit;">Create Stamp</button>
        </div>
      </div>
    </div>
  </div>

  <!-- Search panel -->
  <div id="search-panel">
    <div style="display:flex;gap:8px;align-items:center;margin-bottom:10px;">
      <input id="search-input" type="text" placeholder="Search text..." oninput="searchText(this.value)">
      <button onclick="toggleSearch()" style="border:none;background:none;font-size:18px;cursor:pointer;color:#94a3b8;">&times;</button>
    </div>
    <div id="search-results" style="font-size:12px;color:#64748b;"></div>
  </div>

  <!-- Limit reached overlay -->
  <div id="limit-overlay">
    <div id="limit-modal">
      <div style="font-size:48px;margin-bottom:12px;">&#9888;&#65039;</div>
      <h2 style="font-size:20px;font-weight:700;color:#0f172a;margin:0 0 8px;">Daily Limit Reached</h2>
      <p style="color:#64748b;font-size:14px;margin:0 0 20px;" id="limit-msg">
        You've used all your PDF editor edits for today.
      </p>
      <div style="display:flex;gap:10px;justify-content:center;flex-wrap:wrap;">      <a href="{{ full_url('/pricing') }}" style="padding:10px 24px;background:var(--primary);color:#fff;border-radius:9px;font-weight:600;text-decoration:none;font-size:14px;box-shadow:0 2px 8px rgba(55,88,249,.25);">Upgrade Plan</a>
        <button onclick="document.getElementById('limit-overlay').classList.remove('open')" style="padding:10px 24px;border:1px solid #e0e5ff;border-radius:9px;background:#fff;cursor:pointer;font-size:14px;">Dismiss</button>
      </div>
    </div>
  </div>

  <!-- Manage pages overlay -->
  <div id="manage-pages-overlay">
    <div id="manage-pages-modal">
      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;">
        <h3 style="margin:0;font-size:18px;font-weight:700;color:#0f172a;">Manage Pages</h3>
        <button onclick="closeManagePages()" style="border:none;background:none;font-size:22px;cursor:pointer;color:#94a3b8;line-height:1;">&times;</button>
      </div>
      <div id="manage-pages-grid" style="display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start;"></div>
      <div style="display:flex;gap:8px;margin-top:20px;border-top:1px solid #e0e5ff;padding-top:16px;">
        <label style="display:flex;align-items:center;gap:6px;padding:8px 14px;border:1px solid #c7d0ff;border-radius:8px;background:var(--primary-light);cursor:pointer;font-size:13px;font-weight:500;color:var(--primary);">
          <i class="fa fa-plus mr-1"></i>Insert Pages
          <input type="file" accept=".pdf" style="display:none" onchange="insertPages(this)">
        </label>
        <button onclick="closeManagePages()" style="padding:8px 16px;border:1px solid #e0e5ff;border-radius:8px;background:#fff;cursor:pointer;font-size:13px;">Done</button>
      </div>
    </div>
  </div>

  <!-- Hidden file inputs -->
  <input type="file" id="img-input" accept="image/*" style="display:none" onchange="insertImageFromFile(this)">

  <!-- PDF.js and PDF-lib from CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
<script src="https://unpkg.com/pdf-lib@1.17.1/dist/pdf-lib.min.js"></script>
<!-- Fabric.js (canvas annotation), SortableJS (drag-to-reorder), JSZip (client-side zip) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.1/fabric.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.15.0/Sortable.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>

<script>
  // Runtime config (Jinja2 vars passed from server)
  window.PDF_EDITOR_CONFIG = {
    homeUrl: '{{ full_url("/") }}',
    pricingUrl: '{{ full_url("/pricing") }}',
    limitUsed: {{ limit_info.used }},
    limitMax: {{ limit_info.limit }},
    planName: '{{ limit_info.plan_name }}'
  };
</script>
<script src="{{ url_for('static', filename='js/pdf-editor-3.js') }}"></script>
{% if limit_info and not limit_info.is_unlimited and not limit_info.allowed %}
<script>
document.addEventListener('DOMContentLoaded', function() {
  var lm = document.getElementById('limit-msg');
  if (lm) lm.textContent = "You've used all " + ((window.PDF_EDITOR_CONFIG && window.PDF_EDITOR_CONFIG.limitMax) || 0) + " of your daily PDF editor sessions. Upgrade your plan to edit more PDFs today.";
  var lo = document.getElementById('limit-overlay');
  if (lo) lo.classList.add('open');
  document.querySelectorAll('.btn-save').forEach(function(b) {
    b.disabled = true; b.title = 'Daily limit reached — please upgrade';
    b.style.opacity = '0.5'; b.style.cursor = 'not-allowed';
  });
  var fi = document.getElementById('file-input');
  if (fi) fi.disabled = true;
});
</script>
{% endif %}
{% if limit_info and not limit_info.is_unlimited %}
<script>
if ((window.PDF_EDITOR_CONFIG && window.PDF_EDITOR_CONFIG.limitUsed || 0) >= (window.PDF_EDITOR_CONFIG && window.PDF_EDITOR_CONFIG.limitMax || 9999)) {
  var lb = document.getElementById('limit-bar');
  if (lb) lb.classList.add('warn');
}
</script>
{% endif %}
{% endblock %}