:root{
    --bg:#eef1f6;
    --surface:#ffffff;
    --surface-2:#f4f6fa;
    --border:#d9dfe9;
    --ink-900:#161a22;
    --ink-700:#3d4553;
    --ink-500:#68738b;
    --accent:#2a4f9e;
    --accent-hover:#1e3d80;
    --accent-soft:#e3ebfb;
    --danger:#ad4030;
    --danger-soft:#f7e6e2;
    --ok:#2f7d5a;
    --ok-soft:#e2f2ea;
    --shadow:rgba(23,30,48,.14);
    --paper-shadow:rgba(23,30,48,.22);

    --rail-bg:#161b26;
    --rail-fg:#e8ebf2;
    --rail-fg-dim:#8890a3;
    --rail-active:#232b3d;
    --rail-accent:#89a8ee;

    /* Glass + layered-depth tokens. Kept separate from the tokens above
       (never redefining them) so nothing that already reads --surface,
       --border etc. changes meaning — these are additive, used only by
       the rail/topbar/button/app-shell rules below. */
    --glass-rail-bg:rgba(17,21,31,.74);
    --glass-rail-border:rgba(255,255,255,.09);
    --glass-topbar-bg:rgba(255,255,255,.68);
    --glass-topbar-border:rgba(22,26,34,.06);
    --accent-glow:rgba(42,79,158,.32);
    --shadow-sm:0 1px 2px rgba(23,30,48,.06), 0 1px 1px rgba(23,30,48,.04);
    --shadow-md:0 8px 24px -8px rgba(23,30,48,.18), 0 2px 6px -2px rgba(23,30,48,.10);
    --shadow-lg:0 24px 60px -16px rgba(23,30,48,.28), 0 8px 20px -8px rgba(23,30,48,.14);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#10141b;
      --surface:#171c26;
      --surface-2:#1d2330;
      --border:#2b3244;
      --ink-900:#eef1f7;
      --ink-700:#c4cbda;
      --ink-500:#8b93a8;
      --accent:#84a6ec;
      --accent-hover:#a5bff2;
      --accent-soft:#22314f;
      --danger:#e2836b;
      --danger-soft:#3a2420;
      --ok:#7cc7a4;
      --ok-soft:#1e3229;
      --shadow:rgba(0,0,0,.5);
      --paper-shadow:rgba(0,0,0,.6);
      --glass-rail-bg:rgba(10,13,20,.68);
      --glass-rail-border:rgba(255,255,255,.07);
      --glass-topbar-bg:rgba(23,28,38,.62);
      --glass-topbar-border:rgba(255,255,255,.07);
      --accent-glow:rgba(132,166,236,.28);
      --shadow-sm:0 1px 2px rgba(0,0,0,.3), 0 1px 1px rgba(0,0,0,.2);
      --shadow-md:0 8px 24px -8px rgba(0,0,0,.55), 0 2px 6px -2px rgba(0,0,0,.35);
      --shadow-lg:0 24px 60px -16px rgba(0,0,0,.7), 0 8px 20px -8px rgba(0,0,0,.4);
    }
  }
  :root[data-theme="dark"]{
    --bg:#10141b;
    --surface:#171c26;
    --surface-2:#1d2330;
    --border:#2b3244;
    --ink-900:#eef1f7;
    --ink-700:#c4cbda;
    --ink-500:#8b93a8;
    --accent:#84a6ec;
    --accent-hover:#a5bff2;
    --accent-soft:#22314f;
    --danger:#e2836b;
    --danger-soft:#3a2420;
    --ok:#7cc7a4;
    --ok-soft:#1e3229;
    --glass-rail-bg:rgba(10,13,20,.68);
    --glass-rail-border:rgba(255,255,255,.07);
    --glass-topbar-bg:rgba(23,28,38,.62);
    --glass-topbar-border:rgba(255,255,255,.07);
    --accent-glow:rgba(132,166,236,.28);
    --shadow-sm:0 1px 2px rgba(0,0,0,.3), 0 1px 1px rgba(0,0,0,.2);
    --shadow-md:0 8px 24px -8px rgba(0,0,0,.55), 0 2px 6px -2px rgba(0,0,0,.35);
    --shadow-lg:0 24px 60px -16px rgba(0,0,0,.7), 0 8px 20px -8px rgba(0,0,0,.4);
    --shadow:rgba(0,0,0,.5);
    --paper-shadow:rgba(0,0,0,.6);
  }

  *{box-sizing:border-box;}
  html,body{height:100%;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink-900);
    font-family:'Inter',system-ui,sans-serif;
    font-variant-numeric:tabular-nums;
    -webkit-font-smoothing:antialiased;
  }
  button{font-family:inherit;}
  ::selection{background:var(--accent-soft);}

  /* position:relative so #rail (position:absolute) anchors to the tool's
     own box instead of the browser viewport — needed now that the tool
     sits embedded partway down a scrollable landing page rather than
     filling the whole window by itself. #app's own height (not 100vh) is
     what makes the tool read as a distinct "app" section on the page. */
  #app{
    display:flex;
    position:relative;
    height:94vh;
    min-height:640px;
    max-height:1300px;
    overflow:hidden;
    border-radius:16px;
    background:var(--surface);
    box-shadow:var(--shadow-lg);
  }

  /* ---------- rail ---------- */
  /* position:absolute (relative to #app, not the viewport) so the rail
     stays put and its own size never changes no matter how the PDF stage
     scrolls or zooms internally — without pinning it to the browser
     window, which would make it float over the page's hero/SEO sections
     too whenever they scroll into view. Translucent + backdrop-filter for
     the "frosted glass control center" look; -webkit- prefix needed for
     Safari, which doesn't support the unprefixed property yet. */
  #rail{
    flex:0 0 64px;
    position:absolute;
    top:0;left:0;
    height:100%;
    border-radius:16px 0 0 16px;
    background:var(--glass-rail-bg);
    -webkit-backdrop-filter:blur(20px) saturate(160%);
    backdrop-filter:blur(20px) saturate(160%);
    border-right:1px solid var(--glass-rail-border);
    color:var(--rail-fg);
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:16px 0;
    gap:6px;
    z-index:40;
  }
  .brand{
    width:34px;height:34px;margin-bottom:14px;
    display:flex;align-items:center;justify-content:center;
    border-radius:9px;
    background:linear-gradient(160deg,#2a4f9e,#16305c);
    color:#fff;
  }
  .brand svg{width:19px;height:19px;}
  .rail-btn{
    width:44px;height:44px;
    display:flex;align-items:center;justify-content:center;
    background:transparent;border:none;border-radius:10px;
    color:var(--rail-fg-dim);
    cursor:pointer;
    position:relative;
    transition:background .16s cubic-bezier(.4,0,.2,1),color .16s cubic-bezier(.4,0,.2,1),transform .12s cubic-bezier(.4,0,.2,1);
  }
  .rail-btn svg{width:20px;height:20px;}
  .rail-btn:hover{background:var(--rail-active);color:var(--rail-fg);}
  .rail-btn:active{transform:scale(.92);}
  .rail-btn.active{background:var(--rail-active);color:var(--rail-accent);box-shadow:inset 0 0 0 1px rgba(137,168,238,.22);}
  .rail-btn:disabled{opacity:.35;cursor:default;}
  .rail-btn:disabled:hover{background:transparent;color:var(--rail-fg-dim);}
  .rail-btn:disabled:active{transform:none;}
  .rail-sep{width:28px;height:1px;background:#2a3145;margin:8px 0;}
  .rail-spacer{flex:1;}
  .rail-btn[data-tip]::after{
    content:attr(data-tip);
    position:absolute;left:56px;top:50%;transform:translateY(-50%);
    background:#0c0f16;color:#f2f4f9;
    font-size:12px;font-weight:500;
    padding:5px 9px;border-radius:6px;
    white-space:nowrap;
    opacity:0;pointer-events:none;
    transition:opacity .12s ease;
    z-index:50;
  }
  .rail-btn[data-tip]:hover::after{opacity:1;}

  /* ---------- main column ---------- */
  #main{flex:1;display:flex;flex-direction:column;min-width:0;margin-left:64px;}

  #topbar{
    flex:0 0 auto;
    display:flex;align-items:center;gap:14px;
    padding:10px 20px;
    background:var(--glass-topbar-bg);
    -webkit-backdrop-filter:blur(16px) saturate(160%);
    backdrop-filter:blur(16px) saturate(160%);
    border-bottom:1px solid var(--glass-topbar-border);
  }
  .wordmark{
    display:flex;align-items:baseline;gap:7px;
    font-family:'Fraunces',serif;
    font-weight:600;font-size:19px;letter-spacing:.2px;
    color:var(--ink-900);
    white-space:nowrap;
  }
  .wordmark-flourish{width:34px;height:10px;color:var(--accent);opacity:.8;flex:0 0 auto;}
  .filepill{
    display:flex;align-items:center;gap:8px;
    padding:6px 10px 6px 8px;
    background:var(--surface-2);
    border:1px solid var(--border);
    border-radius:8px;
    font-size:13px;color:var(--ink-700);
    max-width:260px;
  }
  .filepill svg{width:15px;height:15px;flex:0 0 auto;color:var(--ink-500);}
  .filepill span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .filepill-close{
    flex:0 0 auto;width:18px;height:18px;margin-left:2px;border:none;border-radius:5px;
    background:transparent;color:var(--ink-500);cursor:pointer;
    display:flex;align-items:center;justify-content:center;
  }
  .filepill-close svg{width:11px;height:11px;}
  .filepill-close:hover{background:var(--danger-soft);color:var(--danger);}
  .btn{
    display:inline-flex;align-items:center;gap:7px;
    padding:8px 14px;
    border-radius:8px;border:1px solid var(--border);
    background:var(--surface);color:var(--ink-700);
    font-size:13.5px;font-weight:600;
    cursor:pointer;
    transition:background .16s cubic-bezier(.4,0,.2,1),border-color .16s cubic-bezier(.4,0,.2,1),
      color .16s cubic-bezier(.4,0,.2,1),transform .16s cubic-bezier(.4,0,.2,1),
      box-shadow .16s cubic-bezier(.4,0,.2,1);
  }
  .btn svg{width:15px;height:15px;}
  .btn:hover{background:var(--surface-2);}
  .btn:active{transform:scale(.97);}
  .btn.ghost{background:transparent;border-color:transparent;}
  .btn.ghost:hover{background:var(--surface-2);}
  .btn.primary{
    background:var(--accent);border-color:var(--accent);color:#fff;
    box-shadow:0 1px 2px rgba(23,30,48,.08), 0 4px 14px -4px var(--accent-glow);
  }
  .btn.primary:hover{
    background:var(--accent-hover);border-color:var(--accent-hover);
    transform:translateY(-1px);
    box-shadow:0 2px 4px rgba(23,30,48,.1), 0 10px 24px -6px var(--accent-glow);
  }
  .btn.primary:active{transform:translateY(0) scale(.98);}
  .btn.primary:disabled{opacity:.55;cursor:default;transform:none;box-shadow:none;}
  .btn.small{padding:5px 9px;font-size:12.5px;}

  .dl-group{position:relative;display:flex;}
  .dl-group .dl-main{border-top-right-radius:0;border-bottom-right-radius:0;}
  .dl-group .dl-caret{
    border-top-left-radius:0;border-bottom-left-radius:0;
    padding:8px 9px;border-left:1px solid rgba(255,255,255,.28);
  }
  .dl-group .dl-caret svg{width:13px;height:13px;transition:transform .16s cubic-bezier(.4,0,.2,1);}
  .dl-group .dl-caret[aria-expanded="true"] svg{transform:rotate(180deg);}
  .dl-quality-pop{
    position:absolute;top:calc(100% + 8px);right:0;z-index:40;
    width:272px;padding:12px;
    background:var(--surface);border:1px solid var(--border);border-radius:12px;
    box-shadow:var(--shadow-lg);
  }
  .dl-quality-pop.hidden{display:none;}
  .dl-quality-title{font-size:12.5px;font-weight:700;color:var(--ink-700);margin-bottom:8px;}
  .dl-quality-opt{
    display:flex;flex-direction:column;align-items:flex-start;gap:2px;
    width:100%;padding:8px 10px;margin-bottom:6px;
    border:1px solid var(--border);border-radius:9px;background:var(--surface-2);
    cursor:pointer;text-align:left;
    transition:background .14s cubic-bezier(.4,0,.2,1),border-color .14s cubic-bezier(.4,0,.2,1);
  }
  .dl-quality-opt:last-of-type{margin-bottom:0;}
  .dl-quality-opt:hover{border-color:var(--accent);}
  .dl-quality-opt.on{background:var(--accent-soft);border-color:var(--accent-soft);}
  .dl-quality-row{display:flex;align-items:baseline;justify-content:space-between;width:100%;gap:8px;}
  .dl-quality-name{font-size:13px;font-weight:700;color:var(--ink-900);}
  .dl-quality-opt.on .dl-quality-name{color:var(--accent);}
  .dl-quality-size{font-size:12px;font-weight:700;color:var(--ink-500);white-space:nowrap;font-variant-numeric:tabular-nums;}
  .dl-quality-opt.on .dl-quality-size{color:var(--accent);}
  .dl-quality-hint{font-size:11.5px;color:var(--ink-500);}
  .dl-quality-note{margin:10px 2px 0;font-size:11px;line-height:1.5;color:var(--ink-500);}

  /* Quality picker inside the "Bilder → PDF" modal reuses .split-mode but
     stacks label + estimated size instead of a single line of text. */
  .split-mode-q{display:flex;flex-direction:column;align-items:center;gap:2px;}
  .split-mode-label{font-size:12.5px;font-weight:600;}
  .split-mode-size{font-size:11px;font-weight:700;color:var(--ink-500);font-variant-numeric:tabular-nums;}
  .split-mode-q.on .split-mode-size{color:var(--accent);}

  .topbar-spacer{flex:1;}

  .pager{
    display:flex;align-items:center;gap:6px;
    background:var(--surface-2);border:1px solid var(--border);
    border-radius:8px;padding:4px;
  }
  .pager button{
    width:26px;height:26px;border:none;background:transparent;border-radius:6px;
    color:var(--ink-700);display:flex;align-items:center;justify-content:center;cursor:pointer;
    transition:background .14s cubic-bezier(.4,0,.2,1);
  }
  .pager button:hover{background:var(--surface);}
  .pager button:disabled{opacity:.3;cursor:default;}
  .pager button:disabled:hover{background:transparent;}
  .pager svg{width:14px;height:14px;}
  .pager .count{font-size:12.5px;color:var(--ink-700);padding:0 4px;font-weight:600;}

  .zoomer{display:flex;align-items:center;gap:2px;background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:4px;}
  .zoomer button{width:26px;height:26px;border:none;background:transparent;border-radius:6px;color:var(--ink-700);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .14s cubic-bezier(.4,0,.2,1);}
  .zoomer button:hover{background:var(--surface);}
  .zoomer .pct{font-size:12.5px;color:var(--ink-700);font-weight:600;width:42px;text-align:center;}
  .zoomer svg{width:13px;height:13px;}

  #hint{
    flex:0 0 auto;
    padding:7px 20px;
    font-size:12.5px;color:var(--ink-500);
    background:var(--surface-2);
    border-bottom:1px solid var(--border);
    display:flex;align-items:center;gap:6px;
  }
  #hint b{color:var(--ink-700);font-weight:600;}
  #hint.hidden{display:none;}

  /* ---------- stage ---------- */
  /* all pages are rendered at once, stacked vertically, so the whole
     document scrolls continuously instead of paging one canvas at a time */
  #stage{
    flex:1;
    overflow:auto;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:38px 24px 60px;
    gap:28px;
  }
  #stage.empty{justify-content:center;}

  #pageslist{display:flex;flex-direction:column;align-items:center;gap:28px;}
  #pageslist.hidden{display:none;}

  .pagewrap{
    position:relative;
    flex:0 0 auto;
    box-shadow:0 10px 34px var(--paper-shadow), 0 1px 0 var(--paper-shadow);
    background:#fff;
  }
  .pagewrap canvas{display:block;}
  .overlay{
    position:absolute;inset:0 0 0 0;top:0;left:0;
  }
  .overlay.tool-text{cursor:text;}
  .overlay.tool-sign{cursor:default;}
  .overlay.tool-cover{cursor:crosshair;}
  .overlay.tool-snip{cursor:crosshair;}

  .annot{position:absolute;}
  .annot.text{
    outline:none;
    /* em-based, not px, so the padding's contribution to the glyph's
       on-screen position is a fixed proportion of font-size at every zoom
       level — a fixed px padding would instead be a bigger share of the
       box at low zoom and a smaller share at high zoom, throwing off the
       (necessarily zoom-independent) PDF export math that has to predict
       where the glyph sits from ann.fontSize alone. */
    padding:0.125em 0.1875em;
    line-height:1.28;
    white-space:pre;
    min-width:14px;
    min-height:1.2em;
    border-radius:3px;
    cursor:move;
  }
  .annot.text.selected{box-shadow:0 0 0 1.5px var(--accent);background:rgba(42,79,158,.06);}
  .annot.text.editing{box-shadow:0 0 0 1.5px var(--accent);background:transparent;cursor:text;}
  .annot.text.placeholder::before{
    content:attr(data-placeholder);
    color:#9aa3b5;
    pointer-events:none;
  }
  .annot.sign{cursor:move;touch-action:none;}
  .annot.sign img{display:block;width:100%;height:100%;pointer-events:none;user-select:none;}
  .annot.sign.selected{box-shadow:0 0 0 1.5px var(--accent);}
  /* dashed outline is an editor-only affordance so cover boxes stay visible
     against a same-colour page — it is never drawn in the exported PDF,
     which only ever gets a plain page.drawRectangle() fill */
  .annot.cover{cursor:move;touch-action:none;outline:1.5px dashed rgba(0,0,0,.4);outline-offset:-1.5px;}
  .annot.cover.selected{box-shadow:0 0 0 1.5px var(--accent);}
  .snip-preview{
    position:absolute;pointer-events:none;
    outline:1.5px dashed var(--accent);outline-offset:-1.5px;
    background:var(--accent-soft);
  }
  .resize-handle{
    position:absolute;right:-6px;bottom:-6px;width:12px;height:12px;
    background:var(--accent);border:2px solid #fff;border-radius:3px;
    cursor:nwse-resize;
    z-index:5;
  }

  #textghost{
    position:fixed;display:none;align-items:center;gap:4px;
    pointer-events:none;z-index:15;
  }
  #textghost .care{width:1.5px;height:18px;background:var(--accent);opacity:.85;}
  #textghost .tag{
    font-size:10px;font-weight:700;color:var(--accent);
    background:var(--accent-soft);padding:1px 5px;border-radius:4px;
    letter-spacing:.2px;
  }

  .ann-toolbar{
    position:absolute;
    display:flex;align-items:center;gap:2px;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:9px;
    padding:4px;
    box-shadow:0 6px 18px var(--shadow);
    z-index:30;
  }
  .ann-toolbar button{
    width:27px;height:27px;border:none;background:transparent;border-radius:6px;
    display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink-700);
  }
  .ann-toolbar button:hover{background:var(--surface-2);}
  .ann-toolbar svg{width:14px;height:14px;}
  .ann-toolbar .grip{cursor:grab;color:var(--ink-500);}
  .ann-toolbar .grip:active{cursor:grabbing;}
  .ann-toolbar .sep{width:1px;height:18px;background:var(--border);margin:0 2px;}
  .ann-toolbar .fsize{font-size:12px;font-weight:700;color:var(--ink-700);width:22px;text-align:center;}
  .fsize-input{
    width:36px;height:25px;border:1px solid var(--border);border-radius:6px;
    font-size:12px;font-weight:700;color:var(--ink-700);text-align:center;
    background:var(--surface-2);padding:0;font-family:inherit;
  }
  .fsize-input:focus{outline:none;border-color:var(--accent);}
  .fsize-input::-webkit-inner-spin-button,.fsize-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}
  .fsize-input{-moz-appearance:textfield;}
  .swatch{width:16px;height:16px;border-radius:50%;border:1.5px solid rgba(0,0,0,.12);cursor:pointer;}
  .swatch.on{box-shadow:0 0 0 2px var(--surface),0 0 0 3.5px var(--accent);}
  .ann-toolbar button.danger:hover{background:var(--danger-soft);color:var(--danger);}

  /* Same look as the per-annotation floating toolbar, but fixed to the
     viewport (not positioned relative to any one element) since it applies
     to every selected text field on the page at once, wherever they are. */
  #bulkToolbar{position:fixed;left:50%;top:78px;transform:translateX(-50%);z-index:40;}
  #bulkToolbar.hidden{display:none;}
  #bulkToolbar .bulk-count{font-size:12.5px;font-weight:700;color:var(--ink-700);padding:0 8px 0 6px;white-space:nowrap;}
  .bulk-swatches{display:flex;gap:2px;}

  /* ---------- empty state ---------- */
  #dropzone{
    position:relative;
    max-width:460px;width:100%;
    background:var(--surface);
    border:1.5px dashed var(--border);
    border-radius:16px;
    padding:44px 34px;
    text-align:center;
  }
  #dropzone.hidden{display:none;}
  .easter-egg{
    position:absolute;right:-16px;bottom:-18px;width:76px;height:auto;
    transform:rotate(-8deg);
    filter:drop-shadow(0 6px 12px var(--shadow));
    cursor:default;
    transition:transform .2s ease;
  }
  .easter-egg:hover{transform:rotate(-2deg) scale(1.06);}
  #dropzone.drag{border-color:var(--accent);background:var(--accent-soft);}
  #dropzone .illustration{margin:0 auto 20px;display:flex;align-items:center;justify-content:center;}
  #dropzone .illustration svg{width:176px;height:auto;overflow:visible;}
  #dropzone h1{
    font-family:'Fraunces',serif;font-weight:600;font-size:22px;margin:0 0 8px;color:var(--ink-900);
    text-wrap:balance;
  }
  #dropzone p{margin:0 0 22px;color:var(--ink-500);font-size:14px;line-height:1.55;text-wrap:balance;}

  /* ---------- toast ---------- */
  #toastwrap{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;gap:8px;align-items:center;}
  .toast{
    padding:10px 16px;border-radius:9px;background:var(--ink-900);color:var(--surface);
    font-size:13px;font-weight:500;box-shadow:0 8px 24px var(--shadow);
    display:flex;align-items:center;gap:8px;
    animation:toastin .15s ease;
  }
  .toast.err{background:var(--danger);}
  .toast.ok{background:var(--ok);}
  @keyframes toastin{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

  /* ---------- signature modal ---------- */
  #modalback{
    position:fixed;inset:0;background:rgba(12,15,22,.45);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
    display:flex;align-items:center;justify-content:center;
    z-index:100;padding:20px;
  }
  #modalback.hidden{display:none;}
  #signmodal{
    width:100%;max-width:520px;
    background:var(--surface);border-radius:16px;
    box-shadow:0 24px 60px var(--shadow);
    overflow:hidden;
  }
  .modal-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 0;}
  .modal-title{display:flex;align-items:center;gap:11px;}
  .modal-icon{
    width:36px;height:36px;flex:0 0 auto;border-radius:10px;
    background:var(--accent-soft);color:var(--accent);
    display:flex;align-items:center;justify-content:center;
  }
  .modal-icon svg{width:18px;height:18px;}
  .modal-head h2{font-family:'Fraunces',serif;font-size:19px;font-weight:600;margin:0;color:var(--ink-900);}
  .modal-close{width:30px;height:30px;border:none;background:var(--surface-2);border-radius:8px;color:var(--ink-700);cursor:pointer;display:flex;align-items:center;justify-content:center;}
  .modal-close svg{width:14px;height:14px;}

  .lastsign-row{padding:14px 20px 0;}
  .lastsign-row.hidden{display:none;}
  .lastsign-btn{
    width:100%;display:flex;align-items:center;gap:10px;
    padding:8px 10px;border:1px solid var(--border);border-radius:10px;
    background:var(--surface-2);cursor:pointer;text-align:left;
  }
  .lastsign-btn:hover{border-color:var(--accent);background:var(--accent-soft);}
  .lastsign-btn img{height:30px;max-width:120px;object-fit:contain;}
  .lastsign-btn span{font-size:12.5px;font-weight:600;color:var(--ink-700);}

  .tabs{display:flex;gap:4px;padding:16px 20px 0;}
  .tab-btn{
    flex:1;padding:9px 0;text-align:center;font-size:13px;font-weight:600;
    background:var(--surface-2);color:var(--ink-500);border:1px solid var(--border);
    cursor:pointer;
  }
  .tab-btn:first-child{border-radius:8px 0 0 8px;}
  .tab-btn:last-child{border-radius:0 8px 8px 0;border-left:none;}
  .tab-btn.on{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-soft);}

  .tab-pane{padding:18px 20px 6px;}
  .tab-pane.hidden{display:none;}

  #signcanvas{
    width:100%;height:180px;
    background:
      linear-gradient(var(--surface-2) 1px, transparent 1px) 0 100%/100% 100%,
      var(--surface-2);
    border:1px solid var(--border);border-radius:10px;
    touch-action:none;cursor:crosshair;
    display:block;
  }
  .draw-row{display:flex;justify-content:space-between;align-items:center;margin-top:10px;}
  .draw-row .muted{font-size:12px;color:var(--ink-500);}

  #signtext, #stampText{
    width:100%;padding:11px 12px;font-size:15px;font-family:inherit;
    border:1px solid var(--border);border-radius:9px;background:var(--surface-2);color:var(--ink-900);
    margin-bottom:14px;
  }
  #signtext:focus, #stampText:focus{outline:none;border-color:var(--accent);}
  .style-cards{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;}
  .style-card{
    border:1.5px solid var(--border);border-radius:10px;padding:14px 6px 10px;
    text-align:center;cursor:pointer;background:var(--surface-2);
    min-height:64px;display:flex;align-items:center;justify-content:center;overflow:hidden;
  }
  .style-card.on{border-color:var(--accent);background:var(--accent-soft);}
  .style-card span{font-size:24px;color:var(--ink-900);white-space:nowrap;}

  .sign-upload-area{min-height:150px;display:flex;align-items:center;justify-content:center;}
  .sign-upload-empty{
    width:100%;display:flex;flex-direction:column;align-items:center;gap:10px;
    padding:20px;border:1.5px dashed var(--border);border-radius:10px;
    color:var(--ink-500);text-align:center;
  }
  .sign-upload-empty svg{width:22px;height:22px;color:var(--ink-500);}
  .sign-upload-empty p{margin:0;font-size:13px;}
  .sign-upload-preview{
    width:100%;display:flex;flex-direction:column;align-items:center;gap:12px;
  }
  .sign-upload-preview.hidden{display:none;}
  .sign-upload-empty.hidden{display:none;}
  .sign-upload-preview img{
    max-width:100%;max-height:150px;border:1px solid var(--border);border-radius:8px;
    background:repeating-conic-gradient(#f0f1f4 0% 25%, #fff 0% 50%) 50%/16px 16px;
    padding:8px;object-fit:contain;
  }

  .modal-foot{display:flex;justify-content:flex-end;align-items:center;gap:8px;padding:16px 20px 20px;}
  .modal-foot .btn.small{margin-right:auto;}
  .btn:disabled{opacity:.45;cursor:default;}
  .btn.danger{color:var(--danger);border-color:var(--danger-soft);}
  .btn.danger:hover{background:var(--danger-soft);}

  /* ---------- organize pages modal ---------- */
  #organizeback{
    position:fixed;inset:0;background:rgba(12,15,22,.5);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
    display:flex;align-items:center;justify-content:center;
    z-index:110;padding:20px;
  }
  #organizeback.hidden{display:none;}
  #organizemodal{
    width:100%;max-width:920px;max-height:88vh;
    background:var(--surface);border-radius:16px;
    box-shadow:0 24px 60px var(--shadow);
    display:flex;flex-direction:column;overflow:hidden;
  }
  .org-toolbar{
    display:flex;align-items:center;gap:8px;flex:0 0 auto;flex-wrap:wrap;row-gap:8px;
    padding:14px 20px;border-bottom:1px solid var(--border);
  }
  .org-count{font-size:12.5px;color:var(--ink-500);font-weight:600;white-space:nowrap;}
  .org-grid{
    flex:1;overflow:auto;align-content:start;
    display:grid;grid-template-columns:repeat(auto-fill,minmax(122px,1fr));
    gap:16px;padding:20px;
  }
  .org-loading{grid-column:1/-1;padding:60px 20px;text-align:center;color:var(--ink-500);font-size:13.5px;}
  .org-card{
    position:relative;cursor:grab;user-select:none;
    border:2px solid transparent;border-radius:10px;
    background:var(--surface-2);padding:8px 8px 6px;
    transition:border-color .12s ease,opacity .12s ease;
  }
  .org-card:active{cursor:grabbing;}
  .org-card.dragging{opacity:.4;}
  .org-card.dragover{border-color:var(--accent);}
  .org-card.selected{border-color:var(--accent);background:var(--accent-soft);}
  .org-thumb{
    aspect-ratio:3/4;border-radius:6px;overflow:hidden;
    background:var(--surface);border:1px solid var(--border);
    display:flex;align-items:center;justify-content:center;
  }
  .org-thumb img{max-width:100%;max-height:100%;transition:transform .15s ease;}
  .org-check{
    position:absolute;top:12px;left:12px;width:20px;height:20px;border-radius:6px;
    background:var(--surface);border:1.5px solid var(--border);color:transparent;
    display:flex;align-items:center;justify-content:center;
    transition:background .12s ease,border-color .12s ease,color .12s ease;
  }
  .org-check svg{width:12px;height:12px;}
  .org-card.selected .org-check{background:var(--accent);border-color:var(--accent);color:#fff;}
  .org-num{margin-top:6px;text-align:center;font-size:11.5px;font-weight:700;color:var(--ink-500);}
  .org-badge{
    position:absolute;top:12px;right:12px;
    background:var(--accent);color:#fff;
    font-size:10px;font-weight:700;letter-spacing:.2px;
    padding:2px 6px;border-radius:5px;
  }

  /* ---------- combine & split modal ---------- */
  #combineback{
    position:fixed;inset:0;background:rgba(12,15,22,.5);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
    display:flex;align-items:center;justify-content:center;
    z-index:110;padding:20px;
  }
  #combineback.hidden{display:none;}
  #combinemodal{
    width:100%;max-width:640px;max-height:88vh;
    background:var(--surface);border-radius:16px;
    box-shadow:0 24px 60px var(--shadow);
    display:flex;flex-direction:column;overflow:hidden;
  }
  #combinemodal .tab-pane{overflow:auto;max-height:50vh;}

  .cf-include-row{margin-bottom:12px;}
  .cf-include-row.hidden{display:none;}
  .cf-include-row label{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--ink-700);cursor:pointer;}
  .cf-include-row input[type="checkbox"]{width:15px;height:15px;accent-color:var(--accent);cursor:pointer;}

  .cf-list{display:flex;flex-direction:column;gap:8px;margin-bottom:14px;}
  .cf-empty{padding:26px 10px;text-align:center;color:var(--ink-500);font-size:13px;border:1.5px dashed var(--border);border-radius:10px;}
  .cf-row{
    display:flex;align-items:center;gap:10px;
    padding:9px 10px;border:1px solid var(--border);border-radius:10px;
    background:var(--surface-2);cursor:grab;
  }
  .cf-row:active{cursor:grabbing;}
  .cf-row.dragging{opacity:.4;}
  .cf-row.dragover{border-color:var(--accent);}
  .cf-row .grip{color:var(--ink-500);flex:0 0 auto;display:flex;}
  .cf-row .grip svg{width:14px;height:14px;}
  .cf-icon{width:30px;height:30px;flex:0 0 auto;border-radius:8px;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;}
  .cf-icon svg{width:15px;height:15px;}
  .cf-info{flex:1;min-width:0;}
  .cf-name{font-size:13px;font-weight:600;color:var(--ink-900);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .cf-meta{font-size:11.5px;color:var(--ink-500);margin-top:1px;}
  .cf-remove{
    flex:0 0 auto;width:24px;height:24px;border:none;border-radius:6px;
    background:transparent;color:var(--ink-500);cursor:pointer;
    display:flex;align-items:center;justify-content:center;
  }
  .cf-remove svg{width:12px;height:12px;}
  .cf-remove:hover{background:var(--danger-soft);color:var(--danger);}
  .cf-add-row{
    display:flex;align-items:center;justify-content:center;gap:7px;
    width:100%;padding:11px;border:1.5px dashed var(--border);border-radius:10px;
    background:transparent;color:var(--ink-700);font-size:13px;font-weight:600;cursor:pointer;
  }
  .cf-add-row:hover{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);}
  .cf-add-row svg{width:15px;height:15px;}

  .split-empty{padding:30px 10px;text-align:center;color:var(--ink-500);font-size:13.5px;line-height:1.5;}
  .split-empty.hidden{display:none;}
  #splitBody.hidden{display:none;}
  .split-modes{display:flex;gap:8px;margin-bottom:14px;}
  .split-mode{
    flex:1;padding:9px 6px;text-align:center;font-size:12.5px;font-weight:600;
    background:var(--surface-2);color:var(--ink-500);border:1px solid var(--border);border-radius:8px;
    cursor:pointer;
  }
  .split-mode.on{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-soft);}
  .split-field.hidden{display:none;}
  .split-field label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-700);margin-bottom:6px;}
  .split-field input[type="number"]{
    width:100px;padding:8px 10px;font-size:13.5px;font-family:inherit;
    border:1px solid var(--border);border-radius:8px;background:var(--surface-2);color:var(--ink-900);
  }
  .split-field input[type="text"]{
    width:100%;padding:9px 11px;font-size:13.5px;font-family:inherit;
    border:1px solid var(--border);border-radius:8px;background:var(--surface-2);color:var(--ink-900);
  }
  .split-field input:focus{outline:none;border-color:var(--accent);}
  .split-hint{font-size:11.5px;color:var(--ink-500);margin-top:6px;}
  .split-status{font-size:12.5px;color:var(--ink-500);padding:0 20px 4px;}
  .split-status.hidden{display:none;}

  /* ---------- pdf to image & text modal ---------- */
  #convertback{
    position:fixed;inset:0;background:rgba(12,15,22,.5);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
    display:flex;align-items:center;justify-content:center;
    z-index:110;padding:20px;
  }
  #convertback.hidden{display:none;}
  #convertmodal{
    width:100%;max-width:640px;max-height:88vh;
    background:var(--surface);border-radius:16px;
    box-shadow:0 24px 60px var(--shadow);
    display:flex;flex-direction:column;overflow:hidden;
  }
  #convertmodal .tab-pane{overflow:auto;max-height:56vh;}
  .conv-body.hidden{display:none;}

  /* ---------- watermark modal ---------- */
  #watermarkback{
    position:fixed;inset:0;background:rgba(12,15,22,.5);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
    display:flex;align-items:center;justify-content:center;
    z-index:110;padding:20px;
  }
  #watermarkback.hidden{display:none;}
  #watermarkmodal{
    width:100%;max-width:480px;max-height:88vh;
    background:var(--surface);border-radius:16px;
    box-shadow:0 24px 60px var(--shadow);
    display:flex;flex-direction:column;overflow:hidden;
  }
  #watermarkmodal .tab-pane{overflow:auto;max-height:64vh;}
  .wm-body.hidden{display:none;}
  .wm-swatches{display:flex;gap:10px;}
  .wm-swatches button{background:none;border:none;padding:0;cursor:pointer;display:flex;}
  .wm-swatches .swatch{width:24px;height:24px;}
  #wmOpacityInput{width:100%;accent-color:var(--accent);}
  .wm-opacity-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;}
  .wm-opacity-row span{font-size:12.5px;font-weight:700;color:var(--ink-700);}

  /* ---------- metadata modal ---------- */
  #metaback{
    position:fixed;inset:0;background:rgba(12,15,22,.5);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
    display:flex;align-items:center;justify-content:center;
    z-index:110;padding:20px;
  }
  #metaback.hidden{display:none;}
  #metamodal{
    width:100%;max-width:480px;max-height:88vh;
    background:var(--surface);border-radius:16px;
    box-shadow:0 24px 60px var(--shadow);
    display:flex;flex-direction:column;overflow:hidden;
  }
  #metamodal .tab-pane{overflow:auto;max-height:64vh;}

  /* ---------- form-field detection prompt & loading overlay ---------- */
  #formpromptback{
    position:fixed;inset:0;background:rgba(12,15,22,.5);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
    display:flex;align-items:center;justify-content:center;
    z-index:120;padding:20px;
  }
  #formpromptback.hidden{display:none;}
  #formpromptmodal{
    width:100%;max-width:420px;
    background:var(--surface);border-radius:16px;
    box-shadow:0 24px 60px var(--shadow);
    overflow:hidden;
  }
  #formpromptmodal .tab-pane{padding-top:4px;}
  #formpromptmodal p{margin:0;color:var(--ink-500);font-size:13.5px;line-height:1.55;}

  #detectOverlayBack{
    position:fixed;inset:0;background:rgba(12,15,22,.35);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
    display:flex;align-items:center;justify-content:center;
    z-index:160;
  }
  #detectOverlayBack.hidden{display:none;}
  #detectOverlayBox{
    background:var(--surface);border-radius:12px;
    padding:16px 22px;box-shadow:0 16px 40px var(--shadow);
    font-size:13px;font-weight:600;color:var(--ink-700);
    display:flex;align-items:center;gap:10px;
  }
  #detectOverlayBox svg{width:16px;height:16px;color:var(--accent);animation:detectspin 1s linear infinite;flex:0 0 auto;}
  @keyframes detectspin{to{transform:rotate(360deg);}}

  /* ---------- ad slots ----------
     Two reserved placements, both deliberately OUTSIDE #app so ads can
     never shrink the actual PDF working area: a slim banner above the tool
     (#adSlotTop) and a second banner below it (#adSlotBottom). Both are
     hidden entirely while ADS.enabled is false in app.js, so a launch
     before ads are wired up doesn't show empty placeholder boxes to real
     visitors — see initAds() and the "Werbung integrieren" section in
     README.md. */
  .ad-slot{
    flex:0 0 auto;
    display:flex;align-items:center;justify-content:center;
    min-height:44px;
    margin:8px 20px 0;
    background:var(--surface-2);
    border:1px dashed var(--border);
    border-radius:8px;
  }
  .ad-slot-label{
    font-size:10.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
    color:var(--ink-500);
  }

  #adsConsentBanner{
    position:fixed;left:50%;bottom:20px;transform:translateX(-50%);
    z-index:200;
    width:min(560px, calc(100vw - 40px));
    background:var(--surface);border:1px solid var(--border);border-radius:12px;
    box-shadow:0 16px 40px var(--shadow);
    padding:16px 18px;
    display:flex;flex-direction:column;gap:12px;
  }
  #adsConsentBanner p{margin:0;font-size:13px;line-height:1.5;color:var(--ink-700);}
  .ads-consent-actions{display:flex;justify-content:flex-end;gap:8px;}

  /* ---------- images to pdf modal ---------- */
  #img2pdfback{
    position:fixed;inset:0;background:rgba(12,15,22,.5);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
    display:flex;align-items:center;justify-content:center;
    z-index:110;padding:20px;
  }
  #img2pdfback.hidden{display:none;}
  #img2pdfmodal{
    width:100%;max-width:820px;max-height:88vh;
    background:var(--surface);border-radius:16px;
    box-shadow:0 24px 60px var(--shadow);
    display:flex;flex-direction:column;overflow:hidden;
  }
  #img2pdfmodal .tab-pane{overflow:auto;max-height:72vh;}
  .img2pdf-name{
    margin-top:6px;font-size:11px;color:var(--ink-500);text-align:center;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .img2pdf-card-actions{display:flex;gap:6px;margin-top:6px;}
  .img2pdf-card-actions button{
    flex:1;display:flex;align-items:center;justify-content:center;
    padding:5px 4px;border:1px solid var(--border);border-radius:7px;
    background:var(--surface);color:var(--ink-700);cursor:pointer;
  }
  .img2pdf-card-actions button:hover{border-color:var(--accent);color:var(--accent);}
  .img2pdf-card-actions .img2pdf-remove:hover{border-color:var(--danger);color:var(--danger);background:var(--danger-soft);}
  .img2pdf-card-actions svg{width:13px;height:13px;}