:root{
  --bg:#06060a; --bg2:#0a0a12; --card:#11111c; --line:#23232f; --line2:#2e2e3d;
  --ink:#f4f4f8; --muted:#9a9ab0; --faint:#6a6a80;
  --copper:#9dae50; --copper-d:#59642a; --green:#6f9a3a; --yellow:#ffd23f;
  --rail:300px;
}
/* ---------- embedded fonts (Liberation = métriques Arial/Times/Courier) ----------
   loaded lazily by the browser only when an annotation uses the family, so the
   on-canvas preview is pixel-faithful to the exported PDF. */
@font-face{font-family:LibSans;font-weight:400;font-style:normal;font-display:swap;src:url(/vendor/LiberationSans-Regular.ttf)}
@font-face{font-family:LibSans;font-weight:700;font-style:normal;font-display:swap;src:url(/vendor/LiberationSans-Bold.ttf)}
@font-face{font-family:LibSans;font-weight:400;font-style:italic;font-display:swap;src:url(/vendor/LiberationSans-Italic.ttf)}
@font-face{font-family:LibSans;font-weight:700;font-style:italic;font-display:swap;src:url(/vendor/LiberationSans-BoldItalic.ttf)}
@font-face{font-family:LibSerif;font-weight:400;font-style:normal;font-display:swap;src:url(/vendor/LiberationSerif-Regular.ttf)}
@font-face{font-family:LibSerif;font-weight:700;font-style:normal;font-display:swap;src:url(/vendor/LiberationSerif-Bold.ttf)}
@font-face{font-family:LibSerif;font-weight:400;font-style:italic;font-display:swap;src:url(/vendor/LiberationSerif-Italic.ttf)}
@font-face{font-family:LibSerif;font-weight:700;font-style:italic;font-display:swap;src:url(/vendor/LiberationSerif-BoldItalic.ttf)}
@font-face{font-family:LibMono;font-weight:400;font-style:normal;font-display:swap;src:url(/vendor/LiberationMono-Regular.ttf)}
@font-face{font-family:LibMono;font-weight:700;font-style:normal;font-display:swap;src:url(/vendor/LiberationMono-Bold.ttf)}
@font-face{font-family:LibMono;font-weight:400;font-style:italic;font-display:swap;src:url(/vendor/LiberationMono-Italic.ttf)}
@font-face{font-family:LibMono;font-weight:700;font-style:italic;font-display:swap;src:url(/vendor/LiberationMono-BoldItalic.ttf)}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--bg);color:var(--ink);font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;overflow:hidden}
a{color:var(--copper);text-decoration:none}
button{font-family:inherit}
.hide{display:none!important}

/* ---------- top bar ---------- */
.topbar{position:relative;z-index:5;display:flex;align-items:center;gap:18px;height:60px;padding:0 18px;background:rgba(10,10,18,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:11px;flex-shrink:0}
.mark{width:36px;height:36px;border-radius:6px;display:grid;place-items:center;background:linear-gradient(135deg,var(--copper),var(--copper-d));font-weight:900;font-size:19px;color:#0a0a0f}
.brand h1{font-size:17px;font-weight:800;letter-spacing:-.3px;line-height:1}
.brand small{display:block;color:var(--muted);font-size:11.5px;font-weight:600;margin-top:1px}
.spacer{flex:1}
.grp{display:flex;align-items:center;gap:8px}
.tb{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border-radius:5px;border:1px solid var(--line2);background:var(--card);color:var(--ink);font-weight:700;font-size:14px;cursor:pointer;white-space:nowrap}
.tb:hover{border-color:var(--copper);background:#16161f}
.tb:disabled{opacity:.4;cursor:default;border-color:var(--line);background:var(--card)}
.tb svg{width:17px;height:17px}
.tb.primary{background:linear-gradient(135deg,var(--copper),var(--copper-d));border:0;color:#0a0a0f;font-weight:800}
.tb.primary:hover{filter:brightness(1.08)}
.tb.icon{padding:0;width:38px;justify-content:center}

/* ---------- tool ribbon ---------- */
.ribbon{position:relative;z-index:4;display:flex;align-items:center;gap:6px;height:54px;padding:0 14px;background:rgba(17,17,28,.7);border-bottom:1px solid var(--line);overflow-x:auto}
.tool{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:62px;height:44px;border-radius:5px;border:1px solid transparent;background:transparent;color:var(--muted);font-size:11px;font-weight:700;cursor:pointer}
.tool svg{width:19px;height:19px}
.tool:hover{background:#191923;color:var(--ink)}
.tool.on{background:rgba(157,174,80,.16);border-color:var(--copper);color:var(--copper)}
.sep{width:1px;height:30px;background:var(--line2);margin:0 6px;flex-shrink:0}
.ribtools{display:flex;align-items:center;gap:6px}
.grp .glabel{display:inline-flex;align-items:center;gap:3px}
.grp .car{font-size:9px;opacity:.55;margin-top:1px}
.menu button.on{color:var(--copper)}
.menu button.on svg{color:var(--copper)}
.opts{display:flex;align-items:center;gap:12px;margin-left:6px;padding-left:12px;border-left:1px solid var(--line2)}
.opt{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted);font-weight:600;white-space:nowrap}
.opt input[type=range]{width:96px;accent-color:var(--copper)}
.seg{display:inline-flex;border:1px solid var(--line2);border-radius:5px;overflow:hidden}
.segb{border:0;background:var(--card);color:var(--muted);font-size:12.5px;font-weight:700;padding:7px 12px;cursor:pointer;border-right:1px solid var(--line2)}
.segb:last-child{border-right:0}
.segb:hover{color:var(--ink);background:#191923}
.segb.on{background:var(--copper);color:#0a0a0f}
.opt select.fontsel{height:32px;background:var(--card);border:1px solid var(--line2);color:var(--ink);border-radius:5px;padding:0 8px;font-size:13px;font-weight:700;cursor:pointer}
.tgl{display:inline-flex;gap:4px}
.tglb{width:32px;height:32px;border-radius:5px;border:1px solid var(--line2);background:var(--card);color:var(--muted);font-size:15px;cursor:pointer;display:grid;place-items:center;line-height:1}
.tglb:hover{color:var(--ink);border-color:var(--copper)}
.tglb.on{background:rgba(157,174,80,.16);border-color:var(--copper);color:var(--copper)}
.tglb.b{font-weight:800}
.tglb.i{font-style:italic;font-family:Georgia,serif}
.swatches{display:flex;gap:5px}
.sw{width:22px;height:22px;border-radius:5px;border:2px solid transparent;cursor:pointer}
.sw.on{border-color:#fff;box-shadow:0 0 0 1px #000}
input[type=color].sw{padding:0;background:none}

/* ---------- stage ---------- */
.stage{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;z-index:2}
.stage.with-bars{top:114px}
.stage.no-ribbon{top:60px}

/* rail */
.rail{width:var(--rail);flex-shrink:0;background:rgba(8,8,14,.78);border-right:1px solid var(--line);display:flex;flex-direction:column}
.rail-head{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--line);font-size:12.5px;color:var(--muted);font-weight:700}
.rail-head .mini{margin-left:auto;display:flex;gap:6px}
.mini-b{height:28px;padding:0 9px;border-radius:5px;border:1px solid var(--line2);background:var(--card);color:var(--muted);font-size:11.5px;font-weight:700;cursor:pointer}
.mini-b:hover{color:var(--ink);border-color:var(--copper)}
.thumbs{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:12px}
.thumb{position:relative;border:2px solid var(--line);border-radius:5px;background:#fff;cursor:pointer;transition:border-color .12s}
.thumb.active{border-color:var(--copper)}
.thumb.sel{border-color:var(--green)}
.thumb.drag-over{border-color:var(--yellow)}
.thumb canvas{display:block;width:100%;border-radius:5px}
.thumb .pn{position:absolute;left:6px;bottom:6px;background:rgba(6,6,10,.82);color:#fff;font-size:11px;font-weight:700;padding:2px 7px;border-radius:5px}
.thumb .chk{position:absolute;top:6px;left:6px;width:20px;height:20px;border-radius:5px;border:2px solid rgba(6,6,10,.5);background:rgba(255,255,255,.85);display:grid;place-items:center;font-size:13px;color:transparent}
.thumb.sel .chk{background:var(--green);border-color:var(--green);color:#fff}
.thumb .acts{position:absolute;top:6px;right:6px;display:flex;gap:4px;opacity:0;transition:opacity .12s}
.thumb:hover .acts{opacity:1}
.thumb .acts button{width:26px;height:26px;border-radius:5px;border:0;background:rgba(6,6,10,.82);color:#fff;cursor:pointer;display:grid;place-items:center}
.thumb .acts button:hover{background:var(--copper);color:#0a0a0f}
.thumb .acts svg{width:14px;height:14px}
.rail-foot{padding:10px 12px;border-top:1px solid var(--line);display:flex;gap:8px}
.rail-foot .tb{flex:1;justify-content:center;height:34px;font-size:12.5px;padding:0 8px}

/* viewer */
.viewer{flex:1;position:relative;overflow:auto;background:repeating-conic-gradient(#0d0d15 0% 25%,#0a0a12 0% 50%) 50%/26px 26px}
.canvas-wrap{min-height:100%;display:flex;align-items:flex-start;justify-content:center;padding:30px}
.page-host{position:relative;box-shadow:0 18px 60px rgba(0,0,0,.55);background:#fff}
.page-host canvas.page{display:block}
.overlay{position:absolute;inset:0}
.overlay svg.vec{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.an{position:absolute;cursor:move;user-select:none}
.an.text{white-space:pre;line-height:1.15;padding:1px 2px}
.an.text[contenteditable=true]{outline:2px solid var(--copper);cursor:text;background:rgba(255,255,255,.6)}
.an.image img{display:block;width:100%;height:100%;pointer-events:none}
.an.mask{overflow:hidden;background-clip:padding-box}
.an.mask canvas{pointer-events:none}
.ttargets{position:absolute;inset:0}
.ttarget{position:absolute;border:1px dashed rgba(157,174,80,.5);background:rgba(157,174,80,.07);border-radius:3px;cursor:text}
.ttarget:hover{background:rgba(157,174,80,.2);border-color:var(--copper);border-style:solid}
.an.sel{outline:2px dashed var(--copper);outline-offset:1px}
.an .h{position:absolute;width:11px;height:11px;background:#fff;border:2px solid var(--copper);border-radius:50%;right:-6px;bottom:-6px;cursor:nwse-resize}
.rh{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;background:#fff;border:2px solid var(--copper);border-radius:3px;z-index:6;box-shadow:0 1px 4px rgba(0,0,0,.45);touch-action:none}
.rh.end{width:13px;height:13px;margin:-6.5px 0 0 -6.5px;border-radius:50%}
.rh:hover{background:var(--copper)}
.vec-an{cursor:move}
.vec-an.sel{outline:none}

/* empty / welcome */
.welcome{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;padding:24px}
.drop{width:min(680px,92vw);border:2px dashed var(--line2);border-radius:9px;background:rgba(17,17,28,.6);padding:54px 40px;text-align:center;backdrop-filter:blur(6px)}
.drop.over{border-color:var(--copper);background:rgba(157,174,80,.07)}
.drop .big{width:84px;height:84px;border-radius:9px;margin:0 auto 22px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(157,174,80,.22),rgba(111,154,58,.16));border:1px solid var(--line2)}
.drop .big svg{width:42px;height:42px;color:var(--copper)}
.drop h2{font-size:clamp(26px,4vw,38px);font-weight:800;letter-spacing:-1px;line-height:1.08}
.drop h2 .g{background:linear-gradient(90deg,var(--copper),var(--green));-webkit-background-clip:text;background-clip:text;color:transparent}
.drop p{color:var(--muted);font-size:16px;margin:12px auto 26px;max-width:440px}
.drop .cta{display:inline-flex;align-items:center;gap:9px;height:48px;padding:0 26px;border-radius:6px;background:var(--copper);color:#11140a;font-weight:800;font-size:16px;cursor:pointer;border:0;white-space:nowrap}
.drop .cta svg{width:20px;height:20px;flex-shrink:0}
.drop .cta:hover{filter:brightness(1.08)}
.drop .priv{margin-top:22px;font-size:13px;color:var(--faint);display:flex;align-items:center;justify-content:center;gap:7px}
.drop .priv svg{width:15px;height:15px;color:var(--green)}
.feats{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:26px}
.feats span{font-size:12.5px;color:var(--muted);background:#0c0c14;border:1px solid var(--line);border-radius:999px;padding:6px 13px;font-weight:600}

/* page nav floating */
.pnav{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:4;display:flex;align-items:center;gap:4px;background:rgba(10,10,18,.9);border:1px solid var(--line2);border-radius:6px;padding:5px;backdrop-filter:blur(8px)}
.pnav button{width:34px;height:34px;border-radius:5px;border:0;background:transparent;color:var(--ink);cursor:pointer;display:grid;place-items:center}
.pnav button:hover{background:#1c1c28}
.pnav button:disabled{opacity:.35;cursor:default}
.pnav .lbl{font-size:13px;color:var(--muted);font-weight:700;padding:0 8px;min-width:74px;text-align:center}
.pnav .zoom{font-size:12.5px;color:var(--muted);font-weight:700;min-width:46px;text-align:center}

/* ---------- modal ---------- */
.modal-bg{position:fixed;inset:0;z-index:20;background:rgba(4,4,8,.66);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:24px}
.modal{width:min(460px,94vw);max-height:88vh;overflow:auto;background:var(--card);border:1px solid var(--line2);border-radius:9px;padding:24px}
.modal h3{font-size:20px;font-weight:800;margin-bottom:4px}
.modal .sub{color:var(--muted);font-size:13.5px;margin-bottom:18px}
.field{margin-bottom:15px}
.field label{display:block;font-size:12.5px;color:var(--muted);font-weight:700;margin-bottom:6px}
.field input[type=text],.field input[type=number],.field select{width:100%;height:42px;background:var(--bg2);border:1px solid var(--line2);color:var(--ink);border-radius:6px;padding:0 13px;font-size:15px}
.field.row{display:flex;gap:12px}
.field.row>div{flex:1}
.pos-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.pos-grid button{height:42px;border-radius:5px;border:1px solid var(--line2);background:var(--bg2);color:var(--muted);cursor:pointer;font-size:18px;font-weight:700}
.pos-grid button.on{border-color:var(--copper);color:var(--copper);background:rgba(157,174,80,.12)}
.modal-foot{display:flex;gap:10px;margin-top:22px}
.modal-foot .tb{flex:1;justify-content:center;height:44px}

/* toast */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:40;background:#16161f;border:1px solid var(--line2);color:var(--ink);padding:12px 20px;border-radius:6px;font-weight:600;font-size:14px;box-shadow:0 10px 40px rgba(0,0,0,.5);opacity:0;transition:opacity .2s,transform .2s;pointer-events:none}
.toast.show{opacity:1;transform:translateX(-50%) translateY(-4px)}
.toast.ok{border-color:var(--green)}
.toast.err{border-color:var(--copper)}

/* dropdown menu */
.menu{position:absolute;z-index:30;background:var(--card);border:1px solid var(--line2);border-radius:6px;padding:6px;min-width:210px;box-shadow:0 14px 50px rgba(0,0,0,.55)}
.menu button{display:flex;align-items:center;gap:11px;width:100%;text-align:left;padding:10px 11px;border:0;background:transparent;color:var(--ink);border-radius:5px;cursor:pointer;font-size:14px;font-weight:600}
.menu button:hover{background:#1c1c28}
.menu button svg{width:17px;height:17px;color:var(--muted)}
.menu .div{height:1px;background:var(--line);margin:5px 4px}

.spin{display:inline-block;width:15px;height:15px;border:2px solid rgba(255,255,255,.25);border-top-color:#fff;border-radius:50%;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-thumb{background:#26263400;border-radius:5px}
.viewer::-webkit-scrollbar-thumb,.thumbs::-webkit-scrollbar-thumb,.modal::-webkit-scrollbar-thumb{background:#2a2a38}
.viewer::-webkit-scrollbar-thumb:hover{background:#363648}

/* ---------- DOCZ promo card (public/banner.js) ----------
   Floating, dismissible, and it disappears on its own once a document is
   open — the editor must never fight a cross-promo for attention. */
.docz-promo{
  position:fixed; right:16px; bottom:16px; z-index:60;
  display:flex; align-items:center; gap:12px;
  max-width:430px; padding:12px 14px;
  background:linear-gradient(180deg,var(--card),var(--bg2));
  border:1px solid var(--line2); border-radius:16px;
  box-shadow:0 18px 40px rgba(0,0,0,.5);
  opacity:0; transform:translateY(14px) scale(.98);
  transition:opacity .26s ease, transform .26s cubic-bezier(.2,.8,.2,1);
}
.docz-promo.in{opacity:1; transform:none}
.docz-mark{position:relative; flex:0 0 30px; width:30px; height:30px}
.docz-mark i{position:absolute; inset:0; border-radius:5px;
  border:1.5px solid var(--faint); background:var(--bg)}
.docz-mark i:nth-child(1){transform:translate(5px,4px) rotate(-8deg); background:#2a2a1c}
.docz-mark i:nth-child(2){transform:translate(2px,2px) rotate(-3deg)}
.docz-mark i:nth-child(3){transform:rotate(4deg); border-color:var(--ink)}
.docz-mark i:nth-child(3)::after{content:""; position:absolute; left:5px; right:11px;
  bottom:5px; height:3px; border-radius:2px; background:var(--copper)}
.docz-txt{display:flex; flex-direction:column; gap:2px; min-width:0}
.docz-txt strong{font-size:13.5px; color:var(--ink); letter-spacing:.1px}
.docz-txt span{font-size:12px; line-height:1.4; color:var(--muted)}
.docz-cta{
  flex:0 0 auto; padding:8px 13px; border-radius:10px;
  background:var(--copper); color:#0b0b10; font-size:12.5px; font-weight:700;
  text-decoration:none; transition:background .15s, transform .15s;
}
.docz-cta:hover{background:#b3c65e; transform:translateY(-1px)}
.docz-x{
  position:absolute; top:-9px; right:-9px; width:24px; height:24px;
  display:grid; place-items:center; padding:0; cursor:pointer;
  border:1px solid var(--line2); border-radius:50%;
  background:var(--card); color:var(--muted); font-size:16px; line-height:1;
}
.docz-x:hover{color:var(--ink); border-color:var(--faint)}
@media (max-width:560px){
  /* Sit above the one-time analytics notice (bottom-left) instead of on it. */
  .docz-promo{left:12px; right:12px; bottom:80px; max-width:none}
  .docz-txt span{font-size:11.5px}
}
@media (prefers-reduced-motion:reduce){
  .docz-promo{transition:none}
}