/* ════ PDF Toolkit (pdk-) v2 — page-level workspace.
   Layout: lively compact hero → job chips → BIG drop zone (empty board) →
   three panes once pages exist: pages rail (top→bottom, drag to reorder) |
   large preview with text/image/comment tools | settings rail.
   All client-side: pdf-lib writes, pdf.js reads — lazy-loaded from /lib/pdf/. ════ */
.pdk-app{display:flex;flex-direction:column;gap:22px}
.pdk-app .panel{padding:22px}

/* ── hero — compact, with floating page cards for life (no photo asset needed) ── */
.pdk-hero-band{display:flex;align-items:center;position:relative;overflow:hidden;border-radius:22px;padding:0 clamp(14px,3vw,40px);min-height:190px;
  border:1px solid #f3dede;
  background:linear-gradient(115deg,#fdf7f7 0%,#fbeeee 30%,#f6e3e8 62%,#eed7e2 100%)}
html.dark .pdk-hero-band{border-color:#3a2a2e;background:linear-gradient(115deg,#1d1416 0%,#221518 40%,#251a20 100%)}
.pdk-hero-widget{position:relative;z-index:2;width:min(640px,100%);margin:20px 0;display:flex;flex-direction:column;gap:10px}
.pdk-hero-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;row-gap:6px;min-width:0}
.pdk-hero-title{margin:0;white-space:nowrap}
.pdk-hero-tools>.pdk-hero-title{order:1;margin-right:auto!important}
.pdk-hero-tools>.dl-upsell{order:2}
.pdk-hero-band>.dl-help-corner{top:12px;right:14px}
/* the corner Help floats over the widget's first row — below ~900px the row can
   no longer clear it sideways, so start the widget under the button instead */
@media(max-width:900px){.pdk-hero-widget{margin-top:56px}}
.pdk-hero-lead{font-size:13px;line-height:1.5;color:#6b5457;margin:0;max-width:60ch}
html.dark .pdk-hero-lead{color:#c3adb2}
.pdk-hero-badges{display:flex;flex-wrap:wrap;gap:7px}
.pdk-hb{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:800;color:#8a4a5c;
  background:rgba(255,255,255,.55);border:1px solid rgba(194,48,78,.18);border-radius:999px;padding:4px 10px;white-space:nowrap}
.pdk-hb i{color:#c2304e;font-size:10px}
html.dark .pdk-hb{background:rgba(255,255,255,.06);border-color:rgba(247,162,182,.2);color:#d9aab6}
/* floating page cards, right side of the band */
.pdk-hero-art{position:absolute;inset:0;pointer-events:none;z-index:1}
/* deliberately STATIC — a always-on hero animation costs compositor work on every
   frame for the whole time the tool is open; the cards carry the look on their own */
.pdk-fly{position:absolute;border-radius:10px;background:#fff;box-shadow:0 14px 34px -12px rgba(90,20,40,.35);
  display:grid;place-items:center;color:#c2304e;border:1px solid #f3dee4}
.pdk-fly i{font-size:20px}
.pdk-fly.f1{width:74px;height:96px;right:14%;top:22%;transform:rotate(-8deg)}
.pdk-fly.f2{width:60px;height:78px;right:6%;top:46%;transform:rotate(7deg);color:#0ea5e9}
.pdk-fly.f3{width:52px;height:68px;right:22%;top:54%;transform:rotate(3deg);color:#16a34a}
.pdk-fly.f4{width:26px;height:34px;right:29%;top:26%;transform:rotate(14deg);opacity:.55}
.pdk-fly.f5{width:20px;height:26px;right:4%;top:26%;transform:rotate(-12deg);opacity:.4}
html.dark .pdk-fly{background:#232028;border-color:#3a2f36}
@media(max-width:760px){.pdk-hero-art{display:none}}

/* ── job chips — persistent selector, coloured per job ── */
.pdk-modes{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.pdk-modes button{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line,#e6e8ec);background:var(--bg1,#fff);
  border-radius:10px;padding:8px 13px;cursor:pointer;font:inherit;font-size:12px;font-weight:800;color:var(--ink,#1f2430);
  white-space:nowrap;transition:.15s}
.pdk-modes button:hover{transform:translateY(-1px);box-shadow:0 4px 12px -4px rgba(20,30,60,.18)}
.pdk-modes i{flex:none;width:22px;height:22px;border-radius:7px;display:grid;place-items:center;color:#fff;font-size:11px}
.pdk-modes [data-m="merge"] i{background:#4f46e5}
.pdk-modes [data-m="img2pdf"] i{background:#0ea5e9}
.pdk-modes [data-m="pdf2img"] i{background:#7c3aed}
.pdk-modes [data-m="split"] i{background:#f59e0b}
.pdk-modes [data-m="shrink"] i{background:#0d9488}
.pdk-modes [data-m="ocr"] i{background:#16a34a}
.pdk-modes [data-m="wm"] i{background:#e11d48}
.pdk-modes [data-m="mix"] i{background:#475569}
.pdk-modes button.is-on{border-color:#c2304e;background:#fdf0f3;color:#c2304e;box-shadow:0 1px 4px rgba(194,48,78,.18)}
html.dark .pdk-modes button{background:#171b22;border-color:#2a3038;color:#e6eaf2}
html.dark .pdk-modes button.is-on{background:#2a1720;border-color:#c2304e;color:#f7a2b6}

/* ── the big drop zone (empty board only) ── */
.pdk-drop{padding:52px 24px;text-align:center;border-radius:18px;transition:border-color .2s,background .2s}
.pdk-drop.drag{border-color:#c2304e;background:rgba(225,29,72,.045)}
.pdk-drop-orb{width:74px;height:74px;border-radius:50%;margin:0 auto 16px;display:grid;place-items:center;font-size:28px;color:#fff;
  background:radial-gradient(circle at 32% 28%,#f0718f 0%,#e11d48 55%,#9a1030 100%);
  box-shadow:0 16px 40px -12px rgba(225,29,72,.55);transition:transform .2s}
.pdk-drop:hover .pdk-drop-orb{transform:translateY(-3px) scale(1.04)}
.pdk-drop-title{font-size:19px;font-weight:800;color:var(--ink,#1f2430)}
html.dark .pdk-drop-title{color:#e6eaf2}
.pdk-drop-sub{font-size:12px;color:var(--muted,#94a3b8);margin:7px 0}
.pdk-drop-btn{font-size:13.5px;padding:11px 22px}
.pdk-drop-fmts{display:flex;justify-content:center;gap:7px;margin-top:16px;flex-wrap:wrap}
.pdk-drop-fmts span{font-size:10px;font-weight:800;letter-spacing:.05em;border-radius:7px;padding:3px 9px;
  background:var(--bg2,#f1f3f7);color:#5b6780;border:1px solid var(--line,#e6e8ec)}
.pdk-drop-fmts span:first-child{background:#fdeaee;color:#c2304e;border-color:#f5cdd7}
.pdk-drop-mini{font-size:11.5px;color:var(--muted,#94a3b8);margin-top:12px}
html.dark .pdk-drop-fmts span{background:#12161d;border-color:#2a3038;color:#8b95a8}
html.dark .pdk-drop-fmts span:first-child{background:rgba(214,46,84,.18);color:#f7a2b6;border-color:#4c2b36}

/* ── the three-pane workspace ── */
.pdk-work{display:flex;gap:16px;align-items:stretch}
.pdk-work[hidden]{display:none}
.pdk-rail-col{width:172px;flex:none;display:flex;flex-direction:column;gap:9px}
.pdk-center{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px}
.pdk-side{width:262px;flex:none;display:flex;flex-direction:column;gap:9px}
@media(max-width:1100px){.pdk-work{flex-wrap:wrap}.pdk-center{order:1;flex-basis:100%}.pdk-rail-col{order:2;width:auto;flex:1;min-width:220px}.pdk-side{order:3;flex:1;width:auto;min-width:240px}}

/* pages rail */
.pdk-rail-head{display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:800;color:var(--ink,#1f2430)}
html.dark .pdk-rail-head{color:#e6eaf2}
.pdk-clear{border:1px solid var(--line,#e6e8ec);background:var(--bg1,#fff);color:#b42318;font:inherit;font-size:12px;border-radius:8px;width:28px;height:28px;cursor:pointer;transition:.15s}
.pdk-clear:hover{background:#fef2f1;border-color:#f2c7c2}
html.dark .pdk-clear{background:#171b22;border-color:#2a3038;color:#f0918a}
.pdk-add-mini{display:flex;align-items:center;justify-content:center;gap:7px;border:1.5px dashed #d8bfc8;background:transparent;
  color:#c2304e;font:inherit;font-size:12px;font-weight:800;border-radius:11px;padding:10px;cursor:pointer;transition:.15s}
.pdk-add-mini:hover{background:rgba(225,29,72,.05);border-color:#c2304e}
html.dark .pdk-add-mini{border-color:#4c2b36;color:#f7a2b6}
.pdk-rail{display:flex;flex-direction:column;gap:7px;overflow-y:auto;max-height:640px;padding:2px;scrollbar-width:thin}
.pdk-file-head{font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#7c879b;
  padding:5px 3px 1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pdk-pg{position:relative;border:1px solid var(--line,#e6e8ec);border-radius:11px;background:var(--bg1,#fff);padding:7px;cursor:grab;
  transition:box-shadow .15s,border-color .15s,transform .12s}
.pdk-pg:hover{transform:translateY(-1px);box-shadow:0 5px 14px -6px rgba(20,30,60,.22)}
.pdk-pg:active{cursor:grabbing}
.pdk-pg.is-sel{border-color:#c2304e;box-shadow:0 0 0 2px rgba(194,48,78,.22)}
.pdk-pg.pdk-drag-src{opacity:.4}
.pdk-pg.pdk-drop-above{box-shadow:0 -5px 0 -2px #2563eb}
.pdk-pg.pdk-drop-below{box-shadow:0 5px 0 -2px #2563eb}
html.dark .pdk-pg{background:#171b22;border-color:#2a3038}
.pdk-pg-thumbwrap{height:96px;border-radius:8px;background:var(--bg2,#f5f6fa);display:grid;place-items:center;overflow:hidden;margin-bottom:6px}
html.dark .pdk-pg-thumbwrap{background:#12161d}
.pdk-pg-thumb{max-width:100%;max-height:100%;display:block;transition:transform .18s}
.pdk-pg-no{position:absolute;top:11px;left:11px;font-size:9px;font-weight:800;border-radius:6px;padding:2px 6px;background:rgba(15,20,35,.62);color:#fff}
.pdk-pg-meta{display:flex;align-items:center;gap:5px;font-size:9.5px;color:var(--muted,#94a3b8);font-weight:700}
.pdk-pg-meta .src{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.pdk-pg-acts{margin-left:auto;display:flex;gap:3px;opacity:0;transition:.15s}
.pdk-pg:hover .pdk-pg-acts,.pdk-pg.is-sel .pdk-pg-acts{opacity:1}
.pdk-pg-acts button{width:20px;height:20px;border:1px solid var(--line,#e6e8ec);background:var(--bg1,#fff);border-radius:6px;
  font-size:10px;color:#5b6780;cursor:pointer;display:grid;place-items:center;padding:0}
.pdk-pg-acts button:hover{color:#c2304e;border-color:#e8b6c2}
html.dark .pdk-pg-acts button{background:#12161d;border-color:#2a3038;color:#8b95a8}
.pdk-pg-badge{position:absolute;top:11px;right:11px;display:flex;gap:3px}
.pdk-pg-badge span{font-size:8.5px;font-weight:800;border-radius:5px;padding:1px 5px;background:#e11d48;color:#fff}
.pdk-pg-badge span.ed{background:#2563eb}

/* preview */
.pdk-pv-bar{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.pdk-pv-name{font-size:12.5px;font-weight:800;color:var(--ink,#1f2430);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
html.dark .pdk-pv-name{color:#e6eaf2}
.pdk-pv-pager{display:flex;align-items:center;gap:7px;margin-left:auto}
.pdk-pv-pager button{width:26px;height:26px;border:1px solid var(--line,#e6e8ec);background:var(--bg1,#fff);border-radius:8px;cursor:pointer;font-size:15px;line-height:1;color:#5b6780}
.pdk-pv-pager button:disabled{opacity:.35;cursor:default}
#pdkPvPage{font-size:11.5px;font-weight:800;color:var(--muted,#64748b)}
html.dark .pdk-pv-pager button{background:#171b22;border-color:#2a3038;color:#8b95a8}
.pdk-pv-cbtn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line,#e6e8ec);background:var(--bg1,#fff);
  color:#5b6780;font:inherit;font-size:11.5px;font-weight:800;border-radius:8px;padding:6px 11px;cursor:pointer;transition:.15s}
.pdk-pv-cbtn.is-on{background:#c2304e;border-color:#c2304e;color:#fff}
html.dark .pdk-pv-cbtn{background:#171b22;border-color:#2a3038;color:#8b95a8}
html.dark .pdk-pv-cbtn.is-on{background:#c2304e;border-color:#c2304e;color:#fff}
.pdk-pv-stage{display:grid;place-items:center;min-height:300px;max-height:560px;overflow:auto;border-radius:14px;padding:22px;
  background:var(--bg2,#f5f6fa);
  background-image:radial-gradient(circle,rgba(120,130,160,.18) 1px,transparent 1px);background-size:16px 16px}
html.dark .pdk-pv-stage{background-color:#12161d;background-image:radial-gradient(circle,rgba(255,255,255,.05) 1px,transparent 1px)}
.pdk-pv-wrap{position:relative;display:inline-block;line-height:0}
.pdk-pv-wrap.is-cmt #pdkPvCanvas{cursor:crosshair}
#pdkPvCanvas{max-width:100%;height:auto;display:block;background:#fff;box-shadow:0 10px 30px -10px rgba(24,32,60,.35),0 1px 3px rgba(24,32,60,.14)}
.pdk-pv-pins{position:absolute;inset:0;pointer-events:none}
.pdk-pin{position:absolute;transform:translate(-50%,-50%);width:22px;height:22px;border-radius:50%;background:#e11d48;color:#fff;
  font-size:11px;font-weight:800;display:grid;place-items:center;box-shadow:0 2px 7px rgba(0,0,0,.35);border:2px solid #fff;pointer-events:auto;cursor:pointer}
.pdk-pv-pop{position:absolute;z-index:5;width:230px;background:var(--bg1,#fff);border:1px solid var(--line,#e6e8ec);border-radius:11px;
  box-shadow:0 14px 40px -10px rgba(15,25,55,.4);padding:9px;pointer-events:auto}
html.dark .pdk-pv-pop{background:#171b22;border-color:#2a3038}
.pdk-pv-pop textarea{width:100%;border:1px solid var(--line,#e6e8ec);border-radius:8px;background:var(--bg2,#f7f8fa);font:inherit;font-size:12px;padding:7px 9px;resize:vertical;min-height:52px;color:var(--ink,#1f2430)}
html.dark .pdk-pv-pop textarea{background:#12161d;border-color:#2a3038;color:#e6eaf2}
.pdk-pv-pop-btns{display:flex;gap:7px;justify-content:flex-end;margin-top:7px}
.pdk-pv-pop-btns button{border:1px solid var(--line,#e6e8ec);background:var(--bg1,#fff);border-radius:8px;font:inherit;font-size:11.5px;font-weight:800;padding:5px 12px;cursor:pointer;color:#5b6780}
html.dark .pdk-pv-pop-btns button:not(.go){background:#12161d;border-color:#2a3038;color:#8b95a8}
.pdk-pv-pop-btns .go{background:#c2304e;border-color:#c2304e;color:#fff}
.pdk-pv-comments{display:flex;flex-direction:column;gap:6px}
.pdk-pv-comments[hidden]{display:none}
.pdk-cmt{display:flex;align-items:flex-start;gap:9px;background:var(--bg1,#fff);border:1px solid var(--line,#e6e8ec);border-radius:10px;padding:8px 11px;font-size:12px;color:var(--ink,#374151);cursor:pointer}
html.dark .pdk-cmt{background:#171b22;border-color:#2a3038;color:#c9d1e0}
.pdk-cmt-n{flex:none;width:19px;height:19px;border-radius:50%;background:#e11d48;color:#fff;font-size:10px;font-weight:800;display:grid;place-items:center;margin-top:1px}
.pdk-cmt-where{font-size:10px;color:var(--muted,#94a3b8);font-weight:700}
.pdk-cmt-x{margin-left:auto;flex:none;border:0;background:none;color:#b0b8c8;font-size:14px;cursor:pointer;padding:0 3px}
.pdk-cmt-x:hover{color:#e11d48}

/* placed elements */
.pdk-el{position:absolute;pointer-events:auto;cursor:move;user-select:none;-webkit-user-select:none}
.pdk-el.is-text{white-space:pre;font-weight:700;line-height:1.2;font-family:Helvetica,Arial,sans-serif}
.pdk-el.is-img{transform:translate(-50%,-50%)}
.pdk-el.is-img img{display:block;width:100%;height:auto;pointer-events:none}
.pdk-el.is-sel{outline:2px dashed #2563eb;outline-offset:2px}
.pdk-el-bar{position:absolute;z-index:6;display:flex;align-items:center;gap:6px;background:var(--bg1,#fff);
  border:1px solid var(--line,#e6e8ec);border-radius:9px;box-shadow:0 10px 30px -8px rgba(15,25,55,.35);padding:5px 7px;pointer-events:auto}
html.dark .pdk-el-bar{background:#171b22;border-color:#2a3038}
.pdk-el-bar select,.pdk-el-bar input[type=color]{border:1px solid var(--line,#e6e8ec);border-radius:6px;background:var(--bg2,#f7f8fa);font:inherit;font-size:11px;padding:2px 4px;height:24px}
.pdk-el-bar input[type=range]{width:90px}
.pdk-el-bar button{border:1px solid var(--line,#e6e8ec);background:var(--bg2,#f7f8fa);border-radius:6px;font:inherit;font-size:11px;font-weight:700;padding:3px 8px;cursor:pointer;color:#5b6780}
.pdk-el-bar button.del{color:#b42318}
html.dark .pdk-el-bar select,html.dark .pdk-el-bar button{background:#12161d;border-color:#2a3038;color:#8b95a8}

/* settings rail */
.pdk-side-h{font-size:13px;font-weight:800;color:var(--ink,#1f2430);display:flex;align-items:center;gap:8px;margin:0}
.pdk-side-h i{color:#c2304e}
html.dark .pdk-side-h{color:#e6eaf2}
.pdk-side-sub{font-size:10px;font-weight:700;color:var(--muted,#94a3b8);margin-left:auto}
.pdk-lbl{font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted,#7c879b);margin-top:3px}
.pdk-lbl span{text-transform:none;letter-spacing:0}
.pdk-sel{width:100%;border:1px solid var(--line,#e6e8ec);border-radius:9px;background:var(--bg1,#fff);font:inherit;font-size:12.5px;padding:8px 10px;color:var(--ink,#1f2430)}
html.dark .pdk-sel{background:#171b22;border-color:#2a3038;color:#e6eaf2}
.pdk-in{width:100%;border:1px solid var(--line,#e6e8ec);border-radius:9px;background:var(--bg1,#fff);font:inherit;font-size:12.5px;padding:8px 10px;color:var(--ink,#1f2430)}
.pdk-in::placeholder{color:#a8b0c0}
html.dark .pdk-in{background:#171b22;border-color:#2a3038;color:#e6eaf2}
.pdk-seg{display:flex;background:var(--bg2,#eef0f4);border-radius:9px;padding:3px;gap:3px}
.pdk-seg button{flex:1;border:0;background:none;font:inherit;font-size:11.5px;font-weight:700;color:#64748b;padding:6px 4px;border-radius:7px;cursor:pointer;transition:.15s}
.pdk-seg button.is-on{background:var(--bg1,#fff);color:var(--indigo,#4f46e5);box-shadow:0 1px 3px rgba(20,30,50,.14)}
html.dark .pdk-seg{background:#12161d}
html.dark .pdk-seg button.is-on{background:#232936;color:#a5b4fc}
.pdk-stamp-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pdk-cbtn{border:1px solid var(--line,#e6e8ec);background:var(--bg2,#f7f8fa);color:#5b6780;border-radius:7px;font:inherit;font-size:11.5px;font-weight:700;cursor:pointer;transition:.15s}
.pdk-cbtn:hover{color:var(--indigo,#4f46e5);border-color:#c7cdf5}
html.dark .pdk-cbtn{background:#12161d;border-color:#2a3038;color:#8b95a8}
.pdk-stamp-pick{flex:none;padding:6px 11px}
.pdk-stamp-thumb{position:relative;width:40px;height:40px;border:1px solid var(--line,#e6e8ec);border-radius:8px;background:var(--bg2,#f7f8fa);display:grid;place-items:center}
.pdk-stamp-thumb img{max-width:34px;max-height:34px;display:block}
.pdk-stamp-thumb button{position:absolute;top:-7px;right:-7px;width:17px;height:17px;border:0;border-radius:50%;background:#0f1423;color:#fff;font-size:11px;line-height:1;cursor:pointer}
.pdk-stamp-pos{flex:1;min-width:120px}
html.dark .pdk-stamp-thumb{background:#12161d;border-color:#2a3038}
.pdk-check{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--ink,#374151);margin-top:5px;cursor:pointer}
.pdk-check input{accent-color:#c2304e}
.pdk-check span{font-weight:600;color:var(--muted,#94a3b8);font-size:10.5px}
html.dark .pdk-check{color:#e6eaf2}
.pdk-create{width:100%;justify-content:center;margin-top:8px}
.pdk-export{width:100%;justify-content:center}
.pdk-create:disabled,.pdk-export:disabled{opacity:.5;cursor:default}
.pdk-create-sub{font-size:11px;font-weight:700;color:var(--muted,#7c879b);text-align:center;margin:5px 0 0}
.pdk-create-sub[hidden]{display:none}
.pdk-divider{height:1px;background:var(--line,#e6e8ec);margin:8px 0 2px}
html.dark .pdk-divider{background:#2a3038}
.pdk-two{display:flex;gap:9px}
.pdk-two>div{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.pdk-note{font-size:11px;line-height:1.5;color:var(--muted,#94a3b8);margin:4px 0 0}
.pdk-note i{margin-right:5px;color:#c2304e}
.pdk-note b{color:var(--ink,#374151)}
/* busy overlay reuses .ap-prog-* from Ad Preview's sheet (same page, always loaded) */