@font-face{font-family:"Montserrat";font-style:normal;font-weight:100 900;font-display:swap;src:url(/tools/vendor/fonts/montserrat-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:100 900;font-display:swap;src:url(/tools/vendor/fonts/montserrat-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  color-scheme:light;
  --bg:#ffffff;--card:#ffffff;--ink:#14141f;--mute:#5f5f73;--line:#e6e6ef;--soft:#f6f6fb;
  --brand:#e70d5e;--brand-d:#c40a50;--brand-ink:#ffffff;--dark:#111111;--on-dark:#ffffff;--ok:#12805c;--warn:#b45309;--bad:#c62828;--chip:#fde8f0;--chip-ink:#c40a50;
  --radius:14px;--shadow:0 10px 30px rgba(30,20,80,.08)
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 "Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased}
input,select,textarea,button{font-family:inherit}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{line-height:1.15;margin:0 0 .5em;font-weight:800;letter-spacing:-.02em}
.wrap{max-width:1500px;margin:0 auto;padding:0 24px}
header.top{background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
header.top .wrap{display:flex;align-items:center;gap:14px;min-height:58px;flex-wrap:wrap}
.brand,.brand:hover,.brand:focus{text-decoration:none}
.brand{font-weight:800;text-decoration:none;color:var(--ink);letter-spacing:-.02em;font-size:1.1rem;display:flex;align-items:center;gap:8px}
nav.main{display:flex;gap:4px;margin-left:8px;flex-wrap:wrap}
nav.main a{padding:6px 12px;border-radius:99px;text-decoration:none;color:var(--mute);font-weight:600;font-size:.92rem}
nav.main a:hover,nav.main a[aria-current]{background:var(--soft);color:var(--ink)}
.who{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:.88rem}
.chip{display:inline-block;background:var(--chip);color:var(--brand);border-radius:999px;padding:2px 10px;font-size:.78rem;font-weight:700;white-space:nowrap}
.chip.ok{background:#e3f6ee;color:#12805c}.chip.warn{background:#fdf0dc;color:#8a4b08}.chip.mute{background:var(--soft);color:var(--mute)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);background:var(--card);color:var(--ink);padding:.65em 1.3em;border-radius:99px;font:inherit;font-weight:600;cursor:pointer;text-decoration:none}
.btn:hover{background:var(--card);border-color:var(--brand);text-decoration:none}
.btn.primary{background:var(--dark);border-color:var(--dark);color:var(--on-dark)}
.btn.primary:hover{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.sm{padding:.4em .95em;font-size:.86rem}
.btn[disabled]{opacity:.55;cursor:not-allowed}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.hero{padding:34px 0 10px}
.hero h1{font-size:clamp(1.8rem,5vw,2.9rem)}
.hero p{color:var(--mute);max-width:640px;margin:0 0 18px}
.search{width:100%;max-width:520px;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--ink);font:inherit}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:16px 0}
.tabs button{border:1px solid var(--line);background:var(--card);color:var(--ink);padding:6px 14px;border-radius:999px;font:inherit;font-weight:600;cursor:pointer}
.tabs button[aria-pressed="true"]{background:var(--brand);color:var(--brand-ink);border-color:var(--brand)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;padding-bottom:40px}
.tcard{display:flex;flex-direction:column;gap:6px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px;text-decoration:none;color:var(--ink);box-shadow:var(--shadow);min-height:104px}
a.tcard:hover{border-color:var(--brand);transform:translateY(-1px)}
.tcard b{font-size:1rem}
.tcard span.d{color:var(--mute);font-size:.86rem;flex:1}
.tcard.off{opacity:.62;box-shadow:none}
.tcard .tags{display:flex;gap:6px;flex-wrap:wrap}
.sechead{display:flex;align-items:baseline;gap:10px;margin:22px 0 10px}
.sechead h2{margin:0;font-size:1.15rem}.sechead small{color:var(--mute)}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);margin:14px 0}
.crumbs{font-size:.88rem;color:var(--mute);margin:18px 0 6px}
.crumbs a{color:var(--mute)}
.crumbs a:hover{color:var(--brand)}
.drop{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;border:2px dashed #d8d8e6;border-radius:18px;padding:46px 20px;background:var(--soft);cursor:pointer;color:var(--mute);transition:border-color .15s,background .15s}
.drop:hover,.drop.over{border-color:var(--brand);background:var(--chip)}
.drop b{display:block;color:var(--ink);font-size:1.15rem}
.drop .dz-ic{color:var(--brand);display:inline-flex}
.drop .btn{margin-top:12px;pointer-events:none}
.files{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:6px}
.files li{display:flex;align-items:center;gap:8px;background:var(--soft);border-radius:10px;padding:6px 10px;font-size:.92rem}
.files li span.n{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.files li small{color:var(--mute)}
.files button{border:0;background:transparent;color:var(--mute);cursor:pointer;font-size:1rem;padding:2px 6px;border-radius:6px}
.files button:hover{background:var(--line);color:var(--ink)}
textarea.in{width:100%;min-height:150px;padding:12px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--ink);font:inherit;resize:vertical}
.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px 16px;margin:16px 0}
.opts{align-items:start}
.opts label{display:grid;gap:4px;font-weight:600;font-size:.88rem;align-content:start}
.opts input,.opts select{padding:8px 10px;border-radius:9px;border:1px solid var(--line);background:var(--card);color:var(--ink);font:inherit;min-width:0}
.opts select,.opts input:not([type=checkbox]):not([type=range]){height:40px}
.opts input[type=checkbox]{width:18px;height:18px;padding:0}
.opts label.chk{display:flex;align-items:center;gap:8px}
.opts input[type=range]{padding:0}
.opts input[type=color]{padding:2px;height:38px}
.opts small{font-weight:400;color:var(--mute)}
.limits{display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:.88rem;color:var(--mute);margin:6px 0 0}
.msg{border-radius:12px;padding:12px 14px;margin:12px 0;font-size:.95rem;border:1px solid var(--line);background:var(--soft)}
.msg.bad{border-color:var(--bad);color:var(--bad)}
.msg.warn{border-color:var(--warn);color:var(--warn)}
.msg.ok{border-color:var(--ok)}
.msg .row{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
progress{width:100%;height:10px;accent-color:var(--brand)}
.results{display:grid;gap:10px;margin-top:14px}
.res{display:flex;gap:12px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:10px;background:var(--card)}
.res img{width:72px;height:72px;object-fit:cover;border-radius:8px;background:repeating-conic-gradient(#ddd 0 25%,#fff 0 50%) 0 0/14px 14px;flex:none}
.res .t{flex:1;min-width:0}
.res .t b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.res .t small{color:var(--mute)}
pre.out{white-space:pre-wrap;word-break:break-word;background:var(--soft);padding:12px;border-radius:10px;max-height:300px;overflow:auto;margin:6px 0 0;font:.88rem/1.45 ui-monospace,Consolas,monospace}
.stat{font-size:.85rem;color:var(--mute);margin-top:10px;font-variant-numeric:tabular-nums}
table.t{width:100%;border-collapse:collapse;font-size:.9rem;font-variant-numeric:tabular-nums}
table.t th,table.t td{text-align:left;padding:7px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
table.t th{color:var(--mute);font-weight:650}
.tw{overflow-x:auto}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin:18px 0}
.plan{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.plan.cur{border-color:var(--brand);outline:2px solid var(--brand)}
.plan h2{margin:0}.plan .price{font-size:1.9rem;font-weight:800;margin:6px 0}
.plan ul{padding-left:18px;color:var(--mute);margin:10px 0}
.form{display:grid;gap:12px;max-width:380px}
.form input{padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--ink);font:inherit}
footer.bot{border-top:1px solid var(--line);color:var(--mute);font-size:.86rem;padding:22px 0;margin-top:30px}
.spark{display:flex;align-items:flex-end;gap:2px;height:46px}
.spark i{flex:1;background:var(--brand);opacity:.75;min-width:2px;border-radius:2px 2px 0 0}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.kpi{background:var(--soft);border-radius:12px;padding:10px 12px}.kpi b{font-size:1.35rem;display:block;font-variant-numeric:tabular-nums}.kpi small{color:var(--mute)}
@media (max-width:560px){.panel{padding:14px}.res img{width:56px;height:56px}}

/* ---------- PDF editor ---------- */
.ed{margin:12px 0 30px}
.ed-work{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);overflow:hidden;height:max(640px,calc(100vh - 140px))}
.ed-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:8px 10px;border-bottom:1px solid var(--line)}
.ed-tools{display:flex;gap:2px;flex-wrap:wrap}
.tl{display:flex;flex-direction:column;align-items:center;gap:1px;border:1px solid transparent;background:transparent;color:var(--ink);padding:5px 6px;border-radius:9px;cursor:pointer;font:inherit;min-width:54px}
.tl .tlt{font-size:.66rem;color:var(--mute);white-space:nowrap}
.tl:hover{background:var(--soft)}
.tl[aria-pressed=true]{background:var(--brand);color:var(--brand-ink)}
.tl[aria-pressed=true] .tlt{color:inherit}
.ed-ctl{display:flex;gap:6px;align-items:center;margin-left:auto;flex-wrap:wrap}
.vsep{width:1px;height:22px;background:var(--line)}
.zl{font-size:.85rem;color:var(--mute);font-variant-numeric:tabular-nums;min-width:44px;text-align:center}
.ic{display:inline-flex;align-items:center}
.ed-props{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:8px 12px;border-bottom:1px solid var(--line);background:var(--soft);min-height:50px}
.pc{display:flex;align-items:center;gap:6px;font-size:.85rem;font-weight:600}
.pc input[type=color]{width:34px;height:28px;padding:1px;border:1px solid var(--line);border-radius:6px;background:var(--card)}
.pc input,.pc select{padding:4px 6px;border-radius:7px;border:1px solid var(--line);background:var(--card);color:var(--ink);font:inherit}
.pc input[type=checkbox]{width:18px;height:18px}
.sw{width:20px;height:20px;border-radius:50%;border:1px solid var(--line);cursor:pointer;padding:0}
.ed-props .sp{flex:1}
.hint{color:var(--mute);font-size:.88rem;margin:0}
.ed-main{display:flex;flex:1;min-height:0}
.ed-side{width:176px;flex:none;border-right:1px solid var(--line);overflow:auto;padding:8px;background:var(--card)}
.tabs.sm{display:flex;gap:4px;margin:0 0 8px}
.tabs.sm button,.sigdlg .tabs button{border:1px solid var(--line);background:var(--card);color:var(--ink);padding:3px 10px;font:inherit;font-size:.8rem;font-weight:600;border-radius:999px;cursor:pointer}
.tabs.sm button[aria-pressed=true],.sigdlg .tabs button[aria-pressed=true]{background:var(--brand);color:var(--brand-ink);border-color:var(--brand)}
.thumb{position:relative;margin:0 0 10px;border:2px solid var(--line);border-radius:8px;padding:4px;cursor:pointer;background:var(--soft)}
.thumb canvas{width:100%;height:auto;display:block;background:#fff}
.thumb .tn{text-align:center;font-size:.75rem;color:var(--mute)}
.thumb .ta{display:flex;flex-wrap:wrap;gap:2px;justify-content:center;margin-top:3px}
.thumb .ta button{border:0;background:var(--card);border-radius:6px;padding:3px;cursor:pointer;color:var(--ink);font-size:.62rem;display:inline-flex;align-items:center}
.thumb .ta button:disabled{opacity:.3;cursor:default}
.thumb.over{border-color:var(--brand)}
.thumb.drag{opacity:.45}
.ed-stage{flex:1;overflow:auto;background:#eef0f6;padding:16px;display:flex;flex-direction:column;align-items:safe center}
.pg{position:relative;flex:none;margin:0 0 16px;background:#fff;box-shadow:0 1px 3px rgba(20,20,40,.18),0 10px 28px rgba(20,20,40,.12)}
.pg .bg{display:block}
.pgn{position:absolute;left:6px;top:4px;font-size:.7rem;color:#fff;background:rgba(20,20,31,.55);padding:0 6px;border-radius:999px;pointer-events:none}
.ov{position:absolute;inset:0;user-select:none;-webkit-user-select:none}
.ov[data-tool=text]{cursor:text}
.ov[data-tool=pen],.ov[data-tool=hl],.ov[data-tool=rect],.ov[data-tool=ellipse],.ov[data-tool=line],.ov[data-tool=arrow],.ov[data-tool=white],.ov[data-tool=stamp]{cursor:crosshair}
.ob{position:absolute;box-sizing:border-box;touch-action:none}
.ob.vec{left:0;top:0;width:0;height:0}
.ob.sel{outline:1.5px dashed var(--brand);outline-offset:2px}
.ob.vec.sel{outline:none}
.ob-text .tx{white-space:pre;cursor:move;outline:none;box-sizing:content-box}
.ob.editing .tx{cursor:text;background:rgba(255,255,255,.55)}
.ob-img img{width:100%;height:100%;display:block;pointer-events:none}
.ob-stamp .stm{width:100%;height:100%}
.hd{position:absolute;width:11px;height:11px;margin:-6px 0 0 -6px;border-radius:3px;background:#fff;border:2px solid var(--brand);z-index:3;touch-action:none}
.hd[data-hx="-1"][data-hy="-1"],.hd[data-hx="1"][data-hy="1"]{cursor:nwse-resize}
.hd[data-hx="1"][data-hy="-1"],.hd[data-hx="-1"][data-hy="1"]{cursor:nesw-resize}
.hd[data-hx="0"]{cursor:ns-resize}
.hd[data-hy="0"]{cursor:ew-resize}
.hd.end{border-radius:50%;cursor:move}
.th{position:absolute;background:rgba(231,13,94,.12);outline:1.5px solid var(--brand);pointer-events:none}
.ed-foot{display:flex;gap:10px;align-items:center;padding:6px 10px;border-top:1px solid var(--line);flex-wrap:wrap}
.ed-status{flex:1;font-size:.88rem;color:var(--mute);min-height:1.3em}
.ed-status.bad{color:var(--bad)}
.ed-note .msg{margin:8px 10px}
.forms .ff{display:grid;gap:3px;font-size:.82rem;font-weight:600;margin-bottom:8px}
.forms input[type=text],.forms select{padding:5px 7px;border:1px solid var(--line);border-radius:7px;background:var(--card);color:var(--ink);font:inherit;min-width:0;width:100%}
.forms .chk{display:flex;gap:6px;align-items:center;font-size:.82rem;margin-bottom:8px}
dialog.sigdlg{border:1px solid var(--line);border-radius:14px;padding:18px;background:var(--card);color:var(--ink);width:min(680px,94vw)}
dialog::backdrop{background:rgba(0,0,0,.45)}
.sigdlg h2{margin:0 0 10px;font-size:1.1rem}
.sigdlg .tabs{display:flex;gap:6px;margin-bottom:10px}
.sigpad,.sigprev{width:100%;height:auto;border:1px dashed var(--line);border-radius:10px;background:#fff;display:block}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:8px 0}
.row.end{justify-content:flex-end}
.sigdlg input[type=text]{padding:8px 10px;border:1px solid var(--line);border-radius:9px;background:var(--card);color:var(--ink);font:inherit;flex:1;min-width:140px}
@media (max-width:760px){.ed-side{width:100px}.tl .tlt{display:none}.tl{min-width:40px}.ed-work{height:calc(100vh - 130px)}.ed-ctl{margin-left:0}}

.tgrp{display:flex;gap:2px;padding-right:8px;margin-right:6px;border-right:1px solid var(--line)}
.tgrp:last-child{border-right:0;margin-right:0;padding-right:0}
.ov[data-tool=select]{cursor:default}
.ob{cursor:move}


/* ---------- centred layout: every tool page ---------- */
.hero{text-align:center}
.hero p{margin-left:auto;margin-right:auto}
.search{display:block;margin:0 auto}
.tabs{justify-content:center}
main#app>.crumbs,main#app>h1,main#app>p,main#app>.limits{text-align:center;justify-content:center}
main#app>.panel,.ed-start{max-width:880px;margin:18px auto}
.hero label.chk{display:inline-flex;align-items:center;gap:8px}
.ed.loaded{position:relative;left:50%;width:min(1500px,calc(100vw - 32px));transform:translateX(-50%)}
.ed-work{border-radius:var(--radius)}
.pg-toggle{display:none}
footer.bot{padding-bottom:max(22px,env(safe-area-inset-bottom))}

/* ---------- touch screens ---------- */
@media (pointer:coarse){
  .btn,.tabs button,.tl,.opts select,.opts input:not([type=checkbox]):not([type=range]),.files button,.thumb .ta button{min-height:44px}
  .btn.sm{min-height:40px}
  .files button{min-width:44px}
  .opts input[type=checkbox]{width:24px;height:24px}
  .opts input[type=range]{min-height:36px}
  .hd{width:24px;height:24px;margin:-12px 0 0 -12px}
  .thumb .ta button{min-width:36px;justify-content:center}
  .sw{width:28px;height:28px}
  .pc input[type=number],.pc select{min-height:40px}
}

/* ---------- phones and small tablets ---------- */
@media (max-width:760px){
  .wrap{padding:0 14px}
  header.top .wrap{gap:8px;padding-top:8px;padding-bottom:8px;min-height:0}
  nav.main{order:3;width:100%;margin:0;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  nav.main a{white-space:nowrap}
  .who{gap:6px}
  .who .chip{max-width:48vw;overflow:hidden;text-overflow:ellipsis}
  .hero{padding:22px 0 6px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
  .tcard{padding:12px;min-height:96px}
  .tcard span.d{font-size:.8rem}
  main#app>.panel{padding:14px;margin:14px 0}
  .ed-start{margin:14px 0}
  .drop{padding:34px 14px}
  .opts{grid-template-columns:1fr}
  input,select,textarea{font-size:16px}
  .res{flex-wrap:wrap}
  .res .t{flex:1 1 calc(100% - 90px)}
  .res>div:last-child{width:100%;display:flex;gap:8px}
  .res>div:last-child .btn{flex:1}
  .plans{grid-template-columns:1fr}
  .kpis{grid-template-columns:1fr 1fr}
  .form{max-width:none}
  dialog.sigdlg{padding:14px}
  .row.end{justify-content:stretch}
  .row.end .btn{flex:1}

  /* editor */
  .ed.loaded{left:0;width:auto;transform:none}
  .ed-work{height:calc(100vh - 150px);height:calc(100dvh - 150px);min-height:480px}
  .ed-bar{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:6px 8px;gap:6px}
  .ed-tools{flex-wrap:nowrap}
  .ed-ctl{flex-wrap:nowrap;margin-left:0}
  .tl{min-width:44px;padding:5px}
  .tl .tlt{display:none}
  .tgrp{flex:none}
  .ed-ctl>*{flex:none}
  .ed-props{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:6px 10px}
  .ed-props .pc,.ed-props .btn{flex:none}
  .ed-props .hint{white-space:normal;min-width:260px}
  .ed-main{position:relative}
  .pg-toggle{display:inline-flex}
  .ed-side{position:absolute;left:0;top:0;bottom:0;z-index:6;width:150px;transform:translateX(-102%);transition:transform .2s;box-shadow:6px 0 24px rgba(20,20,40,.18)}
  .ed-side.open{transform:none}
  .ed-stage{padding:10px 6px}
  .pgn{display:none}
  .ed-foot{padding:6px 8px}
}
@media (prefers-reduced-motion:reduce){.ed-side{transition:none}.drop{transition:none}}

/* phone editor: tools scroll on one row, the main controls (incl. Download) stay visible on the next; title block shrinks once a PDF is open */
@media (max-width:760px){
  .ed-bar{flex-wrap:wrap;overflow:visible}
  .ed-tools{width:100%;overflow-x:auto;scrollbar-width:none}
  .ed-ctl{width:100%;flex-wrap:wrap;gap:6px}
  .ed-ctl .vsep,.ed-ctl .zl:last-of-type{display:none}
  .ed-ctl .btn.primary{margin-left:auto}
  main#app:has(.ed.loaded)>.crumbs,main#app:has(.ed.loaded)>p,main#app:has(.ed.loaded)>.limits{display:none}
  main#app:has(.ed.loaded)>h1{font-size:1.15rem;margin:10px 0 8px}
  .ed-work{height:calc(100vh - 110px);height:calc(100dvh - 110px)}
}

.pc .btn[aria-pressed=true]{background:var(--chip);border-color:var(--brand);color:var(--brand)}
.pc .btn.sm{padding:.3em .6em}

/* ---------- e-signatures ---------- */
.center{text-align:center}
.prose h2{margin-top:1.4em;font-size:1.15rem}.prose p,.prose li{color:var(--ink)}.prose ul{padding-left:20px}
.steps{display:flex;gap:6px;list-style:none;margin:0 0 14px;padding:0;flex-wrap:wrap;justify-content:center}
.steps li{display:flex;align-items:center;gap:6px;padding:6px 12px 6px 6px;border-radius:99px;background:var(--soft);color:var(--mute);font-weight:600;font-size:.86rem}
.steps li span{width:22px;height:22px;border-radius:50%;background:var(--line);color:var(--ink);display:inline-grid;place-items:center;font-size:.75rem}
.steps li.on{background:var(--chip);color:var(--brand)}.steps li.on span{background:var(--brand);color:#fff}.steps li.done span{background:var(--ok);color:#fff}
.sgrow{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line);flex-wrap:wrap}
.sgrow .sgn{flex:1;min-width:180px;display:grid}.sgrow small,.sgn small{color:var(--mute)}
.sgh{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;margin-bottom:8px}
.sgedit{display:grid;grid-template-columns:auto 1fr 1.2fr auto;gap:8px;align-items:center;margin:8px 0}
.sgedit input{padding:9px 12px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--ink);font:inherit;min-width:0}
.dot{width:12px;height:12px;border-radius:50%;display:inline-block;flex:none}
.esign-top .kpis{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.fld-bar{display:grid;gap:8px;margin:10px 0}
.fld-who,.fld-kinds{display:flex;gap:6px;flex-wrap:wrap}
.fld-who .btn[aria-pressed=true],.fld-kinds .btn[aria-pressed=true]{border-color:var(--c,var(--brand));background:var(--chip);color:var(--ink)}
.fld-host{margin-top:10px;background:#eef0f6;padding:12px;border-radius:12px}
.fld-host .pg{position:relative;flex:none;background:#fff;box-shadow:0 1px 3px rgba(20,20,40,.18),0 10px 28px rgba(20,20,40,.1)}
.fld-host .bg{display:block;width:100%;height:100%}
.fld-host .ov{position:absolute;inset:0;cursor:crosshair}
.fld{position:absolute;border:2px solid var(--c);background:color-mix(in srgb,var(--c) 14%,transparent);border-radius:6px;cursor:move;touch-action:none;display:flex;align-items:center;font-size:.68rem;color:var(--c);font-weight:700;padding:0 6px;overflow:hidden}
.fld .fl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;max-width:calc(100% - 22px)}
.fld .fx{position:absolute;right:1px;top:1px;width:18px;height:18px;border:0;border-radius:50%;background:var(--c);color:#fff;cursor:pointer;font-size:13px;line-height:1;padding:0}
.fld .fr{position:absolute;right:0;bottom:0;width:16px;height:16px;cursor:nwse-resize;background:var(--c);border-radius:8px 0 4px 0;touch-action:none}
.sfld{position:absolute;border:2px dashed var(--brand);background:rgba(231,13,94,.08);border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;font:inherit;color:var(--brand);font-weight:700;overflow:hidden;min-height:20px}
.sfld.filled{border-style:solid;border-color:var(--ok);background:rgba(18,128,92,.07)}
.sfld img{max-width:100%;max-height:100%;object-fit:contain}
.sfld .sl{font-size:.78rem}.sfld .sv{color:#14141f;font-size:.8rem;font-weight:600}
.sinp{width:100%;height:100%;border:0;background:#fff;font:inherit;font-size:.85rem;padding:0 6px;min-width:0}
.ofld{position:absolute;border:1.5px dashed #9aa0b8;background:rgba(120,120,150,.08);border-radius:6px;font-size:.66rem;color:#6b7089;display:flex;align-items:center;padding:0 5px;overflow:hidden}
.sign-host .ov{cursor:default}
.sign-bar{position:sticky;bottom:0;background:var(--card);border-top:1px solid var(--line);margin:14px -14px 0;padding:10px 14px;z-index:4;box-shadow:0 -8px 24px rgba(20,20,40,.08)}
.sign-bar-in{max-width:1000px;margin:0 auto;display:grid;gap:8px}
.sb-l{display:flex;gap:10px;align-items:center;justify-content:space-between}
.sign-bar .chk{display:flex;gap:8px;align-items:flex-start;font-size:.86rem}
.consent{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border:2px solid var(--line);border-radius:14px;background:var(--soft);cursor:pointer;transition:border-color .15s,background .15s}
.consent:hover{border-color:color-mix(in srgb,var(--brand) 40%,var(--line))}
.consent input{flex:none;width:26px;height:26px;margin:1px 0 0;accent-color:var(--brand);cursor:pointer}
.consent-t b{display:block;font-size:1rem}.consent-t small{display:block;color:var(--mute);font-size:.88rem;line-height:1.45;margin-top:2px}
.consent.ok{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 7%,#fff)}
.consent.bad{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 7%,#fff);animation:cnshake .4s}
.consent-msg{color:var(--bad);font-weight:600;font-size:.92rem;margin:-2px 0 0}
.sf-nudge{outline:3px solid var(--bad)!important;outline-offset:3px;animation:cnshake .4s}
@keyframes cnshake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
@media (prefers-reduced-motion:reduce){.consent.bad,.sf-nudge{animation:none}}
.sig-wrap{position:relative}
.sig-guide{position:absolute;left:12px;right:12px;bottom:34px;text-align:center;color:#b9bbcb;font-size:.88rem;border-top:1px solid #e3e4ee;pointer-events:none;padding-top:3px}
@media (max-width:760px){.sgedit{grid-template-columns:auto 1fr}.sgedit input[type=email]{grid-column:1 / -1}.fld-host{padding:6px}.sign-bar{margin:14px -14px 0}}

/* ---------- e-sign option in the signing pop-up ---------- */
.email-pane{padding:4px 2px}
.email-pane .how{margin:10px 0 8px;padding-left:22px;display:grid;gap:6px}
.ticks{list-style:none;padding:0;margin:14px auto;max-width:560px;text-align:left}.ticks li{padding:6px 0 6px 26px;position:relative}.ticks li:before{content:"\2713";position:absolute;left:0;color:var(--ok);font-weight:800}
.deliv{margin-top:10px}.deliv .sgrow{padding:6px 0}

/* ---------- SEO sections under every tool ---------- */
.seo{border-top:1px solid var(--line);margin-top:36px;padding:8px 16px 30px}
.seo-in{max-width:880px;margin:0 auto}
.seo h2{font-size:1.3rem;margin:1.7em 0 .6em}
.seo p,.seo li{color:var(--ink)}
.seo ol,.seo ul{padding-left:22px;display:grid;gap:7px}
.faq details{border:1px solid var(--line);border-radius:12px;padding:12px 16px;margin:8px 0;background:var(--card)}
.faq summary{cursor:pointer;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--brand);font-weight:800;font-size:1.2rem;line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq details p{margin:.7em 0 0;color:var(--mute)}
.rel{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.rel a{display:grid;gap:3px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);height:100%}
.rel a:hover{border-color:var(--brand);text-decoration:none}.rel a span{font-size:.82rem;color:var(--mute)}
.dir{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px}
.seo-note{margin-top:2em;color:var(--mute);font-size:.9rem}
.cat-grid{margin-top:18px}

/* ---------- the focused workspace (a file is open) ---------- */
.focusbar{position:fixed;top:0;left:0;right:0;height:46px;display:flex;align-items:center;gap:12px;padding:0 12px;background:var(--card);border-bottom:1px solid var(--line);z-index:80}
.focusbar .sp{flex:1}
body.focus{padding-top:46px}
body.focus header.top,body.focus footer.bot,body.focus #seo-after,body.focus main#app>.crumbs,body.focus main#app>h1,body.focus main#app>p,body.focus main#app>.limits,body.focus main#app>noscript{display:none}
body.focus-editor{overflow:hidden}
body.focus .ed.loaded{position:fixed;left:0;right:0;top:46px;bottom:0;width:auto;transform:none;margin:0;z-index:60;background:var(--card)}
body.focus .ed-work{height:100%;border-radius:0;border-left:0;border-right:0;border-bottom:0}
body.focus main#app>.panel{margin-top:18px}

/* ---------- pop-ups ---------- */
dialog.modal{border:1px solid var(--line);border-radius:16px;padding:0;width:min(560px,94vw);max-height:92vh;overflow:auto;background:var(--card);color:var(--ink)}
dialog.modal.wide{width:min(1080px,96vw)}
dialog.modal::backdrop{background:rgba(0,0,0,.45)}
.modal-head{position:sticky;top:0;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 18px;background:var(--card);border-bottom:1px solid var(--line);z-index:5}
.modal-head h2{margin:0;font-size:1.1rem}
.modal-body{padding:18px}
.modal .panel{border:0;box-shadow:none;padding:0;margin:12px 0}
.modal .form{margin:0 auto}
.modal .plans{margin:14px 0}

/* ---------- typed signature styles ---------- */
.sig-color{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:4px 0 10px;font-size:.86rem;font-weight:600}
.sig-color .sw{width:26px;height:26px}
.sig-color .sw.on{outline:2px solid var(--brand);outline-offset:2px}
.sig-color input[type=color]{width:34px;height:28px;padding:1px;border:1px solid var(--line);border-radius:8px;background:var(--card);cursor:pointer}
.sig-type .inputs{display:grid;grid-template-columns:2fr 1fr;gap:10px}
.sig-type .inputs label{display:grid;gap:4px;font-weight:600;font-size:.85rem}
.sig-type .inputs input{padding:10px 12px;border:1px solid var(--line);border-radius:10px;font:inherit;background:var(--card);color:var(--ink);min-width:0}
.sig-sub{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:12px 0 6px;flex-wrap:wrap}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:99px;overflow:hidden}
.seg button{border:0;background:var(--card);color:var(--ink);padding:5px 14px;font:inherit;font-size:.84rem;font-weight:600;cursor:pointer}
.seg button[aria-pressed=true]{background:var(--brand);color:#fff}
.fontlist{--sig:#111;max-height:min(44vh,340px);overflow:auto;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.fontrow{display:grid;grid-template-columns:auto minmax(0,1.7fr) minmax(0,1fr);align-items:center;gap:6px 14px;padding:8px 14px;border-bottom:1px solid var(--line);cursor:pointer}
.fontrow:last-child{border-bottom:0}
.fontrow:hover{background:var(--soft)}
.fontrow.on{background:var(--chip)}
.fontrow input{accent-color:var(--brand);width:18px;height:18px}
.fr-n,.fr-i{color:var(--sig);line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fr-l{grid-column:2 / 4;color:var(--mute);font-size:.68rem;margin-top:-4px}
@media (max-width:560px){.sig-type .inputs{grid-template-columns:1fr}.fontrow{grid-template-columns:auto minmax(0,1fr) auto}}

/* ---------- export pop-up ---------- */
.xgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.xcard{border:1px solid var(--line);border-radius:14px;padding:14px;display:grid;gap:8px;align-content:start;background:var(--card)}
.xcard.locked{background:var(--soft)}
.xcard p{margin:0;color:var(--mute);font-size:.88rem}
.xcard select{padding:7px 10px;border:1px solid var(--line);border-radius:9px;background:var(--card);color:var(--ink);font:inherit;max-width:180px}
.xh{display:flex;justify-content:space-between;align-items:center;gap:8px}
.xup{margin:16px 0 8px;color:var(--ink);font-size:.9rem}
@media (max-width:560px){.xgrid{grid-template-columns:1fr}}

/* ---------- signing pop-up: one size for every tab, small buttons pinned at the bottom ---------- */
dialog.sigdlg{padding:0;overflow:hidden;width:min(680px,94vw);height:min(600px,92vh)}
dialog.sigdlg[open]{display:flex;flex-direction:column}
.sig-head{flex:none;padding:16px 18px 6px}
.sig-head h2{margin:0 0 10px;font-size:1.1rem}
.sig-head .tabs{margin-bottom:0}
.sig-body{flex:1;overflow:auto;padding:6px 18px 10px}
.sig-foot{flex:none;display:flex;justify-content:flex-end;align-items:center;gap:8px;padding:10px 18px;border-top:1px solid var(--line);background:var(--card)}
.preview-note{margin:0 0 12px}

/* ---------- request wizard: Back/Next and the field tools stay at the bottom ---------- */
.wiz-dock{position:sticky;bottom:0;z-index:6;background:var(--card);border-top:1px solid var(--line);margin-top:14px;padding:10px 0}
.modal .wiz-dock{margin:14px -18px -18px;padding:10px 18px}
.wiz-nav{display:flex;justify-content:flex-end;align-items:center;gap:8px}
.wiz-dock .fld-bar{margin:0 0 10px}
.fld-kinds{align-items:center}
.fld-page{margin-left:auto;font-size:.8rem;color:var(--mute);font-variant-numeric:tabular-nums}

.fld-opts{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;padding:8px 10px;margin-bottom:8px;border:1px solid var(--line);border-radius:12px;background:var(--soft)}
.fld-opts b{font-size:.82rem}
.fld-opts input[type=text]{flex:1;min-width:200px;padding:6px 10px;border:1px solid var(--line);border-radius:9px;font:inherit;background:var(--card);color:var(--ink)}
.fld-opts .chk{display:flex;align-items:center;gap:6px;font-size:.84rem}
.fld.sel{outline:3px solid var(--c);outline-offset:2px;z-index:2}

.fld-opts{flex-wrap:nowrap;padding:6px 10px;margin-bottom:6px}.fld-opts b{white-space:nowrap}.fld-opts input[type=text]{min-width:0}.fld-opts .chk{white-space:nowrap}.fld-opts .btn{white-space:nowrap}@media(max-width:560px){.fld-opts{flex-wrap:wrap}}

/* ---------- signer status (sent / opened / signed), resign, signed-copy box ---------- */
.sgblock{border-top:1px solid var(--line);padding:6px 0 10px}
.stline{display:flex;flex-wrap:wrap;gap:6px 8px;margin:2px 0 4px}
.st{display:inline-flex;flex-direction:column;border-radius:12px;padding:5px 12px;background:var(--soft);color:var(--mute);min-width:128px}
.st b{font-size:.82rem}.st small{font-size:.74rem;opacity:.9}
.st.ok{background:#e3f6ee;color:#12805c}.st.bad{background:#fde7e7;color:var(--bad)}
.sg-more{margin-top:6px}
.resign{display:grid;gap:8px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--soft);margin-top:6px}
.resign textarea{width:100%}
.review{display:grid;gap:4px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--soft)}
.rv{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding:4px 0;font-size:.88rem}.rv span{color:var(--mute)}
.copybox{display:grid;gap:8px;margin:14px 0;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--soft)}
.copybox .in{padding:8px 12px;border:1px solid var(--line);border-radius:10px;font:inherit;background:var(--card);color:var(--ink)}
.tiers{display:flex;gap:10px;flex-wrap:wrap}.tier{display:grid;padding:8px 14px;border:1px solid var(--line);border-radius:12px;background:var(--card);min-width:150px}.tier small{color:var(--mute)}

/* the field tools are pinned at the top (just under the title bar); only Back/Next are pinned at the bottom */
.wiz-tools{position:sticky;top:0;z-index:6;background:var(--card);padding:8px 0 10px;margin:0 0 10px;border-bottom:1px solid var(--line)}
.modal .wiz-tools{margin:0 -18px 10px;padding:8px 18px 10px}
.wiz-tools .fld-bar{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin:0}
.wiz-tools .fld-opts{flex:1 1 100%;margin:0}
.wiz-tools .fld-kinds{flex:1 1 auto}

/* field options: two rows (label, then size / font / format / pre-text) */
.fld-opts{display:grid;gap:6px;flex-wrap:nowrap}
.fld-opts .r{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center}
.fld-opts .r:first-child input[type=text]{flex:1;min-width:140px}
.fld-opts .lab{font-size:.8rem;font-weight:600;color:var(--mute)}
.fld-opts .num{display:inline-flex;align-items:center;gap:5px;font-size:.8rem;color:var(--mute)}
.fld-opts .num input[type=number]{width:64px;padding:5px 6px;border:1px solid var(--line);border-radius:8px;font:inherit;background:var(--card);color:var(--ink)}
.fld-opts .num select{padding:5px 6px;border:1px solid var(--line);border-radius:8px;font:inherit;background:var(--card);color:var(--ink);max-width:220px}
.fld-opts .num.grow{flex:1 1 200px}.fld-opts .num.grow input{flex:1;min-width:0;width:auto;padding:5px 10px;border:1px solid var(--line);border-radius:8px;font:inherit;background:var(--card);color:var(--ink)}

/* builder boxes look like the signer's "Sign here" boxes: dotted border, dotted line, text at the chosen size */
.fld-host .ov,.sign-host .ov{container-type:inline-size}
.fld{border-style:dashed;align-items:stretch}
.fld .ln{position:absolute;left:6px;right:24px;bottom:30%;border-bottom:2px dotted var(--c);opacity:.85;pointer-events:none}
.fld .fl{position:absolute;left:6px;bottom:calc(30% + 3px);max-width:calc(100% - 30px);line-height:1.15}
.fld .fw{position:absolute;left:6px;top:2px;font-size:.58rem;font-weight:600;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 28px);pointer-events:none}
/* the signer name is always shown on the box (with the size when it is a date or text box) */
.fld.k-date .fl,.fld.k-text .fl{font-family:Helvetica,Arial,sans-serif;font-weight:600} /* the signed PDF prints in Helvetica, so the preview matches its width */
.fld-opts .num select{max-width:340px}

.fld .fw{background:rgba(255,255,255,.9);padding:0 5px;border-radius:5px;top:3px;font-size:.62rem;line-height:1.35}
.fld .fw{top:auto;bottom:1px}

/* ---------- Review & send: clean card layout ---------- */
.rv-lead{margin:-4px 0 14px}
.rv{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:14px;align-items:start}
.rv-col{display:grid;gap:14px;min-width:0}
.rv-card,.copybox.rv-card{border:1px solid var(--line);border-radius:14px;padding:14px 16px;background:var(--card);margin:0}
.rv-h{margin:0 0 12px;font-size:.74rem;letter-spacing:.07em;text-transform:uppercase;color:var(--mute);font-weight:700}
.rv-doc{display:flex;align-items:center;gap:12px;padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid var(--line)}
.rv-ico{display:grid;place-items:center;width:38px;height:46px;border-radius:8px;background:var(--chip);color:var(--chip-ink);font-size:.66rem;font-weight:800;letter-spacing:.04em;flex:none}
.rv-doc .sgn{min-width:0}.rv-doc .sgn b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rv-row{display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:12px}
.rv-f{display:grid;gap:5px;font-size:.8rem;font-weight:600;color:var(--mute)}
.rv-f input,.rv-f select,.rv-f textarea{font:inherit;font-size:.95rem;font-weight:500;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:10px;padding:9px 12px;width:100%;box-sizing:border-box}
.rv-f textarea{resize:vertical;min-height:84px}
.rv-seq{display:flex;gap:10px;align-items:flex-start;margin-top:12px;padding:10px 12px;border-radius:10px;background:var(--soft);cursor:pointer}
.rv-seq input{margin-top:3px}.rv-seq span{display:grid}.rv-seq b{font-size:.9rem}.rv-seq small{color:var(--mute)}
.rv-signers{list-style:none;margin:0;padding:0}
.rv-signers li{display:flex;align-items:center;gap:12px;padding:9px 0;border-top:1px solid var(--line)}
.rv-signers li:first-child{border-top:0;padding-top:0}.rv-signers li:last-child{padding-bottom:0}
.rv-signers .sgn{flex:1;min-width:0;display:grid}.rv-signers .sgn b,.rv-signers .sgn small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rv-av{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;color:#fff;font-weight:700;font-size:.85rem;flex:none}
.rv-pill{font-size:.74rem;font-weight:700;padding:3px 9px;border-radius:99px;background:var(--chip);color:var(--chip-ink);white-space:nowrap}.rv-pill.soft{background:var(--soft);color:var(--mute)}
.copybox.rv-card .rv-h{margin-bottom:2px}
.rv-count{margin:14px 2px 10px;font-size:.84rem}
.rv-consent{padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--soft);font-size:.86rem;color:var(--mute)}
.rv-consent a{color:var(--brand)}
@media (max-width:760px){.rv{grid-template-columns:1fr}.rv-row{grid-template-columns:1fr}}

.rv-doc .sgn{display:grid;gap:2px}.rv-doc .sgn b{display:block}
.copybox.rv-card .chk{font-size:.92rem}

.rv-signers .rv-av{color:#fff !important;text-shadow:0 1px 1px rgba(0,0,0,.25)}

.rv-inline{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.rv-inline select{flex:1 1 170px;width:auto}.rv-inline input[type=number]{width:88px;flex:none}
.rv-card .rv-f + .rv-f,.rv-card .rv-f + .rv-f + small,.rv-card .rv-inline{margin-top:0}.rv-card .rv-f{margin-top:12px}.rv-card .rv-f:first-of-type{margin-top:0}

/* signature pop-up tabs: a larger, segmented control */
dialog.sigdlg .sig-head{padding:18px 20px 8px}
dialog.sigdlg .sig-head .tabs{display:flex;gap:4px;padding:4px;margin:0;background:var(--soft);border:1px solid var(--line);border-radius:14px;justify-content:stretch}
dialog.sigdlg .sig-head .tabs button{flex:1 1 0;min-height:46px;padding:0 12px;border:0;border-radius:10px;background:transparent;color:var(--mute);font-size:1rem;font-weight:700;letter-spacing:.01em;transition:background .12s,color .12s,box-shadow .12s}
dialog.sigdlg .sig-head .tabs button:hover{color:var(--ink);background:rgba(20,20,40,.05)}
dialog.sigdlg .sig-head .tabs button[aria-pressed=true]{background:var(--brand);color:var(--brand-ink);box-shadow:0 2px 6px rgba(231,13,94,.32)}
dialog.sigdlg .sig-head .tabs button:focus-visible{outline:3px solid color-mix(in srgb,var(--brand) 45%,transparent);outline-offset:1px}
@media (max-width:480px){dialog.sigdlg .sig-head .tabs button{font-size:.88rem;padding:0 4px}dialog.sigdlg .sig-head{padding:14px 14px 6px}}
dialog.sigdlg .sig-body{padding-top:14px}
dialog.sigdlg .sig-head .tabs button{white-space:nowrap}
@media (max-width:480px){dialog.sigdlg .sig-head .tabs button{font-size:.8rem;padding:0 2px}}

/* tool cards: no underline on hover; a soft lift with a pink-tinted edge and glow */
.tcard{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
a.tcard:hover,a.tcard:focus-visible{text-decoration:none;transform:translateY(-3px);border-color:color-mix(in srgb,var(--brand) 55%,var(--line));box-shadow:0 12px 28px rgba(231,13,94,.12),0 2px 6px rgba(20,20,40,.06)}
a.tcard:hover *,a.tcard:focus-visible *{text-decoration:none}
a.tcard:hover b,a.tcard:focus-visible b{color:var(--brand)}
a.tcard:focus-visible{outline:3px solid color-mix(in srgb,var(--brand) 40%,transparent);outline-offset:2px}
a.tcard:active{transform:translateY(-1px)}
a.tcard.off:hover{transform:none;box-shadow:none;border-color:var(--line)}a.tcard.off:hover b{color:var(--ink)}
@media (prefers-reduced-motion:reduce){.tcard{transition:none}a.tcard:hover{transform:none}}

/* calm chips for plan and token labels (not red) */
.chip.plus{background:#eaeefc;color:#3447b8}.chip.soft{background:var(--soft);color:#4a4a63}

/* live preview on the tool page */
.live{margin:14px 0 4px;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--soft)}
.live-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.live figure{margin:0;display:grid;gap:6px;text-align:center;justify-items:center;min-width:0}
.live canvas{max-width:100%;max-height:340px;width:auto;height:auto;border-radius:10px;background:#fff;box-shadow:0 1px 3px rgba(20,20,40,.14)}
.live figcaption{font-size:.74rem;font-weight:700;color:var(--mute);text-transform:uppercase;letter-spacing:.07em}
.live .hint{display:block;margin-top:10px;text-align:center}

/* live preview: one pair per picture */
.live-list{display:grid;gap:14px;grid-template-columns:1fr}
.live-list.many{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.live .pv{display:grid;gap:8px;min-width:0;padding:10px;border-radius:12px;background:var(--card);border:1px solid var(--line)}
.live-list:not(.many) .pv{background:transparent;border:0;padding:0}.live-list:not(.many) .pv-name{display:none}
.live .pv-name{font-size:.82rem;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.live-list.many canvas{max-height:230px}

/* edit together / separately */
.live-mode{display:flex;align-items:center;gap:6px;margin:0 0 12px;flex-wrap:wrap;justify-content:center}
.live-mode span{font-size:.8rem;font-weight:700;color:var(--mute);margin-right:4px}
.live-mode button{border:1px solid var(--line);background:var(--card);color:var(--ink);padding:7px 16px;border-radius:999px;font:inherit;font-size:.88rem;font-weight:700;cursor:pointer}
.live-mode button[aria-pressed=true]{background:var(--brand);color:var(--brand-ink);border-color:var(--brand)}
.pv-ctl{display:grid;gap:6px;padding-top:8px;border-top:1px solid var(--line)}
.pv-ctl label{display:grid;gap:3px;font-size:.8rem;font-weight:600;color:var(--mute)}.pv-ctl label.chk{display:flex;gap:6px;align-items:center}
.pv-ctl select{padding:6px 8px;border:1px solid var(--line);border-radius:8px;font:inherit;background:var(--card);color:var(--ink)}

/* live preview: a large stage with a draggable before/after divider */
.cmp{position:relative;margin:0 auto;width:fit-content;max-width:100%;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 1px 3px rgba(20,20,40,.16);cursor:ew-resize;user-select:none;-webkit-user-select:none;touch-action:pan-y}
.cmp canvas{display:block;max-width:100%;max-height:min(70vh,640px);width:auto;height:auto}
.cmp .cb{position:absolute;inset:0;width:100%;height:100%;max-height:none;pointer-events:none}
.cmp-tag{position:absolute;bottom:10px;padding:3px 11px;border-radius:99px;background:rgba(17,17,17,.74);color:#fff;font-size:.7rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;pointer-events:none}.cmp-tag.l{left:10px}.cmp-tag.r{right:10px}
.cmp-handle{position:absolute;top:0;bottom:0;left:50%;width:0;border-left:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.22);outline:none}
.cmp-handle .knob{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:1.05rem;font-weight:800;box-shadow:0 2px 10px rgba(0,0,0,.35)}
.cmp-handle:focus-visible .knob{outline:3px solid rgba(231,13,94,.45);outline-offset:2px}
.cmp.split{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;cursor:default;background:transparent;box-shadow:none;overflow:visible;touch-action:auto}
.cmp.split canvas{justify-self:center;border-radius:10px;background:#fff;box-shadow:0 1px 3px rgba(20,20,40,.16)}
.cmp.split .cb{position:static;grid-column:1;grid-row:1;width:auto;height:auto;max-height:min(70vh,640px);clip-path:none !important}.cmp.split .ca{grid-column:2;grid-row:1}
.cmp.split .cmp-tag{position:static;grid-row:2;background:none;color:var(--mute);justify-self:center;padding:0}.cmp.split .cmp-tag.l{grid-column:1}.cmp.split .cmp-tag.r{grid-column:2}.cmp.split .cmp-handle{display:none}
.strip{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:12px}
.strip button{display:grid;gap:4px;justify-items:center;width:96px;border:2px solid transparent;border-radius:12px;background:var(--card);padding:6px;cursor:pointer;font:inherit;color:var(--ink)}
.strip button:hover{border-color:var(--line)}.strip button[aria-pressed=true]{border-color:var(--brand);box-shadow:0 3px 10px rgba(231,13,94,.16)}
.strip canvas{width:80px;height:58px;object-fit:cover;border-radius:6px;background:#fff}.strip span{font-size:.7rem;max-width:84px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--mute)}
.pv-own{margin-top:12px;padding:12px 16px;border-radius:12px;background:var(--card);border:1px solid var(--line);display:grid;gap:8px}
.pv-own .pv-name{font-size:.84rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pv-own .pv-ctl{border-top:0;padding-top:0}
.cmp.split canvas{align-self:center}

/* ---------- crop workspace ---------- */
.toolui{margin-top:14px}
.crop{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start}
.crop-main{min-width:0}
.crop-ratio-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.crop-ratios{display:flex;gap:6px;flex-wrap:wrap}
.crop-ratios button{border:1px solid var(--line);background:var(--card);color:var(--ink);padding:7px 14px;border-radius:999px;font:inherit;font-size:.86rem;font-weight:700;cursor:pointer}
.crop-ratios button:hover{border-color:var(--brand)}
.crop-ratios button[aria-pressed=true]{background:var(--brand);color:var(--brand-ink);border-color:var(--brand)}
.crop-custom{display:inline-flex;align-items:center;gap:4px}.crop-custom input{width:58px;padding:6px 8px;border:1px solid var(--line);border-radius:9px;font:inherit}
.crop-stage{display:grid;place-items:center;background:#eef0f6;border-radius:14px;padding:12px;min-height:200px}
.crop-canvas{display:block;max-width:100%;border-radius:6px;touch-action:none;outline:none;box-shadow:0 1px 4px rgba(20,20,40,.2);cursor:crosshair}
.crop-canvas:focus-visible{outline:3px solid rgba(231,13,94,.45);outline-offset:3px}
.crop-side{display:grid;gap:12px;min-width:0}
.crop-card{border:1px solid var(--line);border-radius:14px;padding:12px 14px;background:var(--card);display:grid;gap:10px}
.crop-card .rv-h{margin:0}
.crop-checker{display:grid;place-items:center;padding:10px;border-radius:10px;background-color:#fff;background-image:linear-gradient(45deg,#e6e8ef 25%,transparent 25%,transparent 75%,#e6e8ef 75%),linear-gradient(45deg,#e6e8ef 25%,transparent 25%,transparent 75%,#e6e8ef 75%);background-size:16px 16px;background-position:0 0,8px 8px}
.crop-result{max-width:100%;max-height:220px;width:auto;height:auto}
.crop-info{display:grid;gap:2px;text-align:center}.crop-info small{color:var(--mute)}
.crop-fields{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.crop-fields label,.crop-card>label{display:grid;gap:4px;font-size:.78rem;font-weight:600;color:var(--mute)}
.crop-fields input,.crop-card select,.crop-card>input[type=number]{padding:7px 9px;border:1px solid var(--line);border-radius:9px;font:inherit;background:var(--card);color:var(--ink);width:100%;box-sizing:border-box}
.crop-btns{display:flex;gap:6px;flex-wrap:wrap}
.crop-strip{margin-top:12px}
@media (max-width:900px){.crop{grid-template-columns:1fr}.crop-fields{grid-template-columns:repeat(4,1fr)}}
@media (max-width:520px){.crop-fields{grid-template-columns:1fr 1fr}.crop-stage{padding:6px}}

main#app>.panel.wide{max-width:none}

/* ---------- arrange workspace: page gallery ---------- */
.has-arrange .files{display:none}
.arr-bar{display:flex;gap:10px 18px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-bottom:10px}
.arr-sort{display:flex;gap:6px;flex-wrap:wrap;align-items:center}.arr-sort>span{font-size:.8rem;font-weight:700;color:var(--mute);margin-right:2px}
.arr-out{margin:0}
.arr-sum{margin:0 0 12px;color:var(--mute);font-size:.92rem}
.arr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:14px}
.arr-card{position:relative;display:grid;gap:6px;justify-items:center;padding:12px 10px 10px;border:1px solid var(--line);border-radius:14px;background:var(--card);cursor:grab;transition:box-shadow .15s,transform .15s}
.arr-card:hover{box-shadow:0 8px 22px rgba(20,20,40,.1)}
.arr-card.drag{opacity:.35;cursor:grabbing}
.arr-card.over-before{box-shadow:-5px 0 0 0 var(--brand)}.arr-card.over-after{box-shadow:5px 0 0 0 var(--brand)}
.arr-num{position:absolute;top:8px;left:8px;min-width:24px;height:24px;padding:0 7px;border-radius:99px;background:var(--dark);color:#fff;font-size:.78rem;font-weight:700;display:grid;place-items:center;z-index:1}
.arr-thumb{display:grid;place-items:center;min-height:196px;width:100%;background:#eef0f6;border-radius:10px}
.arr-page{display:block;background:#fff;box-shadow:0 1px 4px rgba(20,20,40,.25)}
.arr-name{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.84rem;font-weight:700}
.arr-card small{color:var(--mute)}
.arr-btns{display:flex;gap:4px;flex-wrap:wrap;justify-content:center}.arr-btns .btn{min-width:34px;padding:.35em .6em}
@media (max-width:520px){.arr-grid{grid-template-columns:repeat(2,1fr);gap:10px}.arr-thumb{min-height:150px}}

/* ---------- /tools/esign: animated demo landing ---------- */
.es-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px);gap:36px;align-items:center;padding:30px 0 22px}
.es-copy{text-align:left}
.es-kicker{display:inline-block;background:var(--chip);color:var(--chip-ink);font-weight:800;font-size:.76rem;padding:4px 12px;border-radius:99px;letter-spacing:.07em;text-transform:uppercase}
.es-copy h1{font-size:clamp(2rem,4.4vw,3.1rem);line-height:1.08;margin:.25em 0 .35em;text-align:left}
.es-copy>p{color:var(--mute);font-size:1.04rem;max-width:560px;margin:0}
.es-cta{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0 14px}
.es-points{list-style:none;padding:0;margin:0;display:flex;gap:6px 18px;flex-wrap:wrap;color:var(--mute);font-size:.86rem}.es-points li:before{content:"\2713";color:var(--ok);font-weight:800;margin-right:6px}
.es-options{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:8px 0 34px}
.es-opt{border:1px solid var(--line);border-radius:18px;padding:22px;background:var(--card);box-shadow:var(--shadow);display:grid;gap:8px;align-content:start}
.es-opt.paid{border-color:color-mix(in srgb,var(--brand) 38%,var(--line))}
.es-opt-h{display:flex;justify-content:space-between;align-items:center;gap:10px}.es-opt h2{margin:0;font-size:1.35rem}
.es-sub{margin:0;color:var(--mute)}.es-opt .ticks{margin:6px 0;max-width:none}
.es-price{display:flex;gap:8px;flex-wrap:wrap;margin:2px 0 4px}.es-price .chip{font-size:.8rem}
.es-opt-f{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:6px}
.es-how h2{text-align:center;margin:0 0 16px}
.es-how ol{list-style:none;padding:0;margin:0 0 10px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.es-how li{display:grid;gap:4px;padding:16px;border:1px solid var(--line);border-radius:16px;background:var(--card);align-content:start}
.es-how li span{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--brand);color:#fff;font-weight:800;margin-bottom:4px}
.es-how li small{color:var(--mute)}
.es-dash-h{margin:10px 0 0}
.js-rise{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease}.js-rise.in{opacity:1;transform:none}
@media (max-width:900px){.es-hero{grid-template-columns:1fr;text-align:center}.es-copy,.es-copy h1{text-align:center}.es-copy>p{margin:0 auto}.es-cta,.es-points{justify-content:center}.es-options{grid-template-columns:1fr}.es-how ol{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.es-how ol{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.js-rise{opacity:1;transform:none;transition:none}}

/* the demo itself (a 560 x 420 picture scaled to fit) */
.dm{display:grid;gap:12px;min-width:0}
.dm-tabs{display:flex;gap:4px;padding:4px;background:var(--soft);border:1px solid var(--line);border-radius:14px}
.dm-tabs button{flex:1 1 0;min-height:42px;border:0;border-radius:10px;background:transparent;color:var(--mute);font:inherit;font-size:.9rem;font-weight:700;cursor:pointer;padding:0 8px}
.dm-tabs button.on{background:var(--brand);color:var(--brand-ink);box-shadow:0 2px 8px rgba(231,13,94,.3)}
.dm-view{position:relative;width:100%;height:420px}
.dm-frame{position:absolute;left:0;top:0;width:560px;height:420px;transform-origin:0 0;transform:scale(var(--k,1));background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 50px rgba(20,20,40,.15);overflow:hidden}
.dm-bar{height:34px;display:flex;align-items:center;gap:6px;padding:0 14px;background:var(--soft);border-bottom:1px solid var(--line)}.dm-bar i{width:10px;height:10px;border-radius:50%;background:#d9dbe6}.dm-title{margin-left:10px;font-size:11px;font-weight:700;color:var(--mute)}
.dm-stage{position:absolute;left:0;top:34px;width:560px;height:386px;background:linear-gradient(160deg,#f7f7fb,#eef0f6);overflow:hidden}
.dm-cap{margin:0;text-align:center;color:var(--mute);font-size:.9rem;min-height:2.9em}
.dm-scene,.dm-body{position:absolute;inset:0}
.dm-paper{position:absolute;background:#fff;border-radius:6px;box-shadow:0 4px 18px rgba(20,20,40,.14);padding:20px 24px;box-sizing:border-box}
.dm-doc{display:block;font-size:15px;margin-bottom:14px}
.dm-lines i{display:block;height:7px;border-radius:4px;background:#e6e8ef;margin:0 0 10px}
.dm svg{display:block}.dm svg path{stroke-dasharray:1;stroke-dashoffset:0}
.dm-cursor{position:absolute;left:-5px;top:-3px;opacity:0;z-index:9;filter:drop-shadow(0 2px 3px rgba(0,0,0,.3))}
.a-ripple{position:absolute;width:30px;height:30px;border-radius:50%;border:3px solid var(--brand);opacity:0;z-index:8}
.dm .st{min-width:0;padding:3px 9px}.dm .st b{font-size:10px;white-space:nowrap}

/* scene A: sign it yourself (10 s loop) */
.a-paper{left:115px;top:14px;width:330px;height:358px}
.a-field{position:absolute;left:24px;top:262px;width:170px;height:54px;border:2px solid #12805c;border-radius:8px;background:rgba(18,128,92,.08);display:grid;place-items:center}
.a-label{position:absolute;font-size:13px;font-weight:700;color:var(--brand);opacity:0}
.a-ink2{position:absolute;left:8px;top:2px}
.a-date{position:absolute;left:210px;top:276px;width:100px;height:30px;border:2px solid #12805c;border-radius:8px;background:rgba(18,128,92,.08);display:grid;place-items:center;font-size:11px;font-weight:700}
.a-dlg{position:absolute;left:150px;top:70px;width:260px;height:230px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 44px rgba(20,20,40,.3);padding:14px;box-sizing:border-box;opacity:0;z-index:6}
.dlg-h{font-weight:800;font-size:14px;margin-bottom:8px}
.dlg-tabs{display:flex;gap:4px;padding:3px;background:var(--soft);border-radius:10px;margin-bottom:10px}.dlg-tabs span{flex:1;text-align:center;font-size:11px;font-weight:700;padding:6px 0;border-radius:8px;color:var(--mute)}.dlg-tabs .on{background:var(--brand);color:#fff}
.dlg-pad{height:100px;border:1px dashed var(--line);border-radius:10px;display:grid;place-items:center;background:#fcfcfe}
.dlg-f{position:absolute;right:14px;bottom:14px;display:flex;gap:8px}.dlg-f span{font-size:11px;font-weight:700;padding:7px 14px;border-radius:99px;border:1px solid var(--line)}.dlg-f .go{background:#111;color:#fff;border-color:#111}
.a-ripple.r1{left:209px;top:288px}.a-ripple.r2{left:333px;top:258px}
.a-badge{position:absolute;right:22px;top:22px;background:#fff;border:1px solid #bfe6d6;color:#12805c;font-weight:800;font-size:14px;padding:8px 16px;border-radius:99px;box-shadow:0 8px 24px rgba(18,128,92,.22);z-index:7}.a-badge small{font-size:10px;background:#e3f6ee;border-radius:99px;padding:2px 8px;margin-left:6px}.tick{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#12805c;color:#fff;font-size:11px;margin-right:4px}

/* scene B: send by email */
.b-paper{left:22px;top:14px;width:322px;height:358px}
.b-field{position:absolute;top:258px;width:136px;height:50px;border:2px solid #12805c;border-radius:8px;background:rgba(18,128,92,.08);display:grid;place-items:center}.b-field.ada{left:18px}.b-field.bob{left:166px}
.b-label{position:absolute;left:6px;top:2px;font-size:9px;font-weight:800;color:#12805c}.b-field svg{position:absolute;left:10px;top:7px}
.b-panel{position:absolute;left:358px;top:14px;width:182px;height:358px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 4px 18px rgba(20,20,40,.12);padding:12px;box-sizing:border-box}
.b-h{font-weight:800;font-size:12px}.b-file{font-size:10px;color:var(--mute);margin-top:4px;padding:6px 8px;background:var(--soft);border-radius:8px}
.b-row{display:flex;gap:8px;align-items:flex-start;margin-top:16px}.b-row b{font-size:11px}.av{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;color:#fff;font-size:11px;font-weight:800;flex:none}
.b-st{position:relative;height:24px;width:128px;margin-top:3px}.b-st .s,.b-st .t{position:absolute;left:0;top:0;opacity:0}.b-st .s4,.b-st .t4{opacity:1}
.b-send{position:absolute;left:12px;right:12px;bottom:14px;background:#111;color:#fff;text-align:center;font-size:11px;font-weight:700;padding:9px;border-radius:99px}
.b-env{position:absolute;left:0;top:0;opacity:0;z-index:7}
.a-ripple.b-r{left:434px;top:328px}
.b-done{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);background:#fff;border:1px solid #bfe6d6;color:#12805c;font-weight:800;font-size:13px;padding:8px 16px;border-radius:14px;box-shadow:0 8px 24px rgba(18,128,92,.22);white-space:nowrap;z-index:7}.b-done small{display:block;font-weight:600;font-size:10px;color:var(--mute);margin-left:22px}

.dm-scene *{animation-duration:10s;animation-iteration-count:infinite;animation-timing-function:linear}
.dm-scene .dm-body{animation-name:dm-wrap}
.dm.paused *{animation-play-state:paused !important}
@keyframes dm-wrap{0%{opacity:0}3%{opacity:1}93%{opacity:1}98%,100%{opacity:0}}
/* A */
.a-cursor{animation-name:a-cursor}
@keyframes a-cursor{0%,2%{opacity:0;transform:translate(500px,360px)}6%{opacity:1;transform:translate(500px,360px)}15%{opacity:1;transform:translate(224px,303px)}17%{transform:translate(224px,303px) scale(.82)}19%{transform:translate(224px,303px) scale(1)}40%{opacity:1;transform:translate(224px,303px)}50%{opacity:1;transform:translate(348px,272px)}52%{transform:translate(348px,272px) scale(.82)}54%{transform:translate(348px,272px) scale(1)}62%{opacity:1;transform:translate(348px,272px)}68%,100%{opacity:0;transform:translate(348px,272px)}}
.a-ripple.r1{animation-name:a-rip1}.a-ripple.r2{animation-name:a-rip2}
@keyframes a-rip1{0%,16%{opacity:0;transform:scale(.3)}17%{opacity:.9;transform:scale(.3)}23%,100%{opacity:0;transform:scale(1.7)}}
@keyframes a-rip2{0%,50%{opacity:0;transform:scale(.3)}51%{opacity:.9;transform:scale(.3)}57%,100%{opacity:0;transform:scale(1.7)}}
.a-dlg{animation-name:a-dlg}
@keyframes a-dlg{0%,19%{opacity:0;transform:translateY(8px) scale(.96)}22%{opacity:1;transform:none}52%{opacity:1;transform:none}56%,100%{opacity:0;transform:translateY(4px) scale(.98)}}
.a-ink1 path{animation:a-ink1 10s linear infinite}.a-ink2 path{animation:a-ink2 10s linear infinite}
@keyframes a-ink1{0%,24%{stroke-dashoffset:1}44%,100%{stroke-dashoffset:0}}
@keyframes a-ink2{0%,56%{stroke-dashoffset:1}66%,100%{stroke-dashoffset:0}}
.a-label{animation-name:a-label}@keyframes a-label{0%,54%{opacity:1}58%,100%{opacity:0}}
.a-field,.a-date{animation-name:a-box}
@keyframes a-box{0%,66%{border-color:var(--brand);border-style:dotted;background:rgba(231,13,94,.06)}67%,100%{border-color:#12805c;border-style:solid;background:rgba(18,128,92,.08)}}
.a-date span{animation:a-type 10s steps(14) infinite}
@keyframes a-type{0%,70%{clip-path:inset(0 100% 0 0)}80%,100%{clip-path:inset(0 0 0 0)}}
.a-badge{animation-name:a-badge}@keyframes a-badge{0%,78%{opacity:0;transform:scale(.6)}83%{opacity:1;transform:scale(1.08)}86%,100%{opacity:1;transform:scale(1)}}
/* B */
.b-cursor{animation-name:b-cursor}
@keyframes b-cursor{0%,2%{opacity:0;transform:translate(520px,380px)}5%{opacity:1;transform:translate(520px,380px)}11%{opacity:1;transform:translate(449px,343px)}12%{transform:translate(449px,343px) scale(.82)}14%{transform:translate(449px,343px) scale(1)}18%{opacity:1}22%,100%{opacity:0;transform:translate(449px,343px)}}
.b-r{animation-name:b-rip}@keyframes b-rip{0%,11%{opacity:0;transform:scale(.3)}12%{opacity:.9;transform:scale(.3)}18%,100%{opacity:0;transform:scale(1.7)}}
.b-send{animation-name:b-press}@keyframes b-press{0%,11%{transform:none;background:#111}12%{transform:scale(.95);background:var(--brand)}15%,100%{transform:none;background:#111}}
.b-env{animation-name:b-env}@keyframes b-env{0%,12%{opacity:0;transform:translate(432px,322px) scale(.6)}14%{opacity:1;transform:translate(440px,300px) scale(.9)}26%{opacity:1;transform:translate(500px,40px) scale(1)}30%,100%{opacity:0;transform:translate(520px,18px) scale(1)}}
.b-st .s0{animation-name:sa0}.b-st .s1{animation-name:sa1}.b-st .s2{animation-name:sa2}.b-st .s3{animation-name:sa3}.b-st .s4{animation-name:sa4}
.b-st .t0{animation-name:sb0}.b-st .t1{animation-name:sb1}.b-st .t2{animation-name:sb2}.b-st .t3{animation-name:sb3}.b-st .t4{animation-name:sb4}
@keyframes sa0{0%,25%{opacity:1}27%,100%{opacity:0}}@keyframes sa1{0%,25%{opacity:0}27%,32%{opacity:1}34%,100%{opacity:0}}@keyframes sa2{0%,32%{opacity:0}34%,45%{opacity:1}47%,100%{opacity:0}}@keyframes sa3{0%,45%{opacity:0}47%,59%{opacity:1}61%,100%{opacity:0}}@keyframes sa4{0%,59%{opacity:0}61%,100%{opacity:1}}
@keyframes sb0{0%,29%{opacity:1}31%,100%{opacity:0}}@keyframes sb1{0%,29%{opacity:0}31%,36%{opacity:1}38%,100%{opacity:0}}@keyframes sb2{0%,36%{opacity:0}38%,61%{opacity:1}63%,100%{opacity:0}}@keyframes sb3{0%,61%{opacity:0}63%,73%{opacity:1}75%,100%{opacity:0}}@keyframes sb4{0%,73%{opacity:0}75%,100%{opacity:1}}
.b-inkA path{animation:b-inkA 10s linear infinite}.b-inkB path{animation:b-inkB 10s linear infinite}
@keyframes b-inkA{0%,60%{stroke-dashoffset:1}68%,100%{stroke-dashoffset:0}}@keyframes b-inkB{0%,75%{stroke-dashoffset:1}83%,100%{stroke-dashoffset:0}}
.b-field.ada{animation-name:b-boxA}.b-field.bob{animation-name:b-boxB}
@keyframes b-boxA{0%,68%{border-color:#e70d5e;border-style:dotted;background:rgba(231,13,94,.06)}69%,100%{border-color:#12805c;border-style:solid;background:rgba(18,128,92,.08)}}
@keyframes b-boxB{0%,83%{border-color:#2563eb;border-style:dotted;background:rgba(37,99,235,.06)}84%,100%{border-color:#12805c;border-style:solid;background:rgba(18,128,92,.08)}}
.b-done{animation-name:b-done}@keyframes b-done{0%,86%{opacity:0;transform:translate(-50%,14px)}90%,100%{opacity:1;transform:translate(-50%,0)}}
@media (prefers-reduced-motion:reduce){.dm-scene *,.dm-scene .dm-body{animation:none !important}}

.a-date{left:204px;width:112px;white-space:nowrap}
.b-label{color:var(--mute)}
.es-opt{display:flex;flex-direction:column}.es-opt-f{margin-top:auto;padding-top:12px}

/* ---------- rotate workspace ---------- */
.rot-bar{display:grid;gap:10px;margin-bottom:10px}
.rot-row{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.rot-row .lab{font-size:.8rem;font-weight:700;color:var(--mute);margin-right:4px}
.rot-range{display:inline-flex;gap:6px;margin-left:6px}.rot-range input{width:124px;padding:6px 10px;border:1px solid var(--line);border-radius:9px;font:inherit;font-size:.86rem}
.rot-size{margin-left:auto;display:inline-flex;gap:4px;padding:3px;background:var(--soft);border-radius:99px}
.rot-size button{border:0;background:transparent;padding:5px 12px;border-radius:99px;font:inherit;font-size:.8rem;font-weight:700;cursor:pointer;color:var(--mute)}.rot-size button[aria-pressed=true]{background:var(--brand);color:var(--brand-ink)}
.rot-sum{margin:0 0 12px;color:var(--mute);font-size:.92rem}
.rot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--w,210px),1fr));gap:14px}
.rot-card{display:grid;gap:8px;justify-items:center;padding:10px;border:2px solid var(--line);border-radius:14px;background:var(--card);transition:border-color .15s,box-shadow .15s}
.rot-card.sel{border-color:var(--brand);box-shadow:0 3px 12px rgba(231,13,94,.14)}
.rot-chk{display:flex;gap:6px;align-items:center;justify-self:start;font-size:.82rem;font-weight:700;cursor:pointer}
.rot-box{position:relative;overflow:hidden;background:#eef0f6;border-radius:10px;cursor:pointer}
.rot-cv{position:absolute;left:50%;top:50%;background:#fff;box-shadow:0 1px 4px rgba(20,20,40,.25);transition:transform .28s cubic-bezier(.3,.7,.3,1);max-width:none;transform-origin:center}
.rot-badge{position:absolute;left:6px;bottom:6px;background:rgba(17,17,17,.78);color:#fff;font-size:.68rem;font-weight:700;padding:2px 8px;border-radius:99px;pointer-events:none;z-index:2}
.rot-btns{display:flex;gap:6px}.rot-btns .btn{min-width:40px}
dialog.rot-dlg{width:min(1000px,96vw);max-height:94vh}
.rot-bigbox{position:relative;width:100%;height:min(64vh,660px);background:#eef0f6;border-radius:12px;overflow:hidden}
.rot-big{position:absolute;left:50%;top:50%;background:#fff;box-shadow:0 2px 10px rgba(20,20,40,.3);max-width:none;transition:transform .28s cubic-bezier(.3,.7,.3,1);transform-origin:center}
.rot-bigbtn{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;align-items:center;margin:12px 0 8px}
@media (max-width:520px){.rot-size{margin-left:0}}
@media (prefers-reduced-motion:reduce){.rot-cv,.rot-big{transition:none}}

/* ---------- pricing page: comparison and tool costs ---------- */
.pr{margin:34px 0}
.pr-head{margin-bottom:14px}.pr-head h2{margin:0 0 4px;font-size:1.5rem}.pr-head .hint{margin:0;max-width:720px}
.pr-note{margin:12px 2px 0;font-size:.86rem;color:var(--mute)}
table.cmp{width:100%;border-collapse:separate;border-spacing:0;background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;font-size:.94rem}
table.cmp th,table.cmp td{text-align:left;padding:13px 18px;border-bottom:1px solid var(--line);vertical-align:middle}
table.cmp tbody tr:last-child th,table.cmp tbody tr:last-child td{border-bottom:0}
table.cmp thead th{background:var(--soft);font-weight:700;padding:16px 18px;border-bottom:1px solid var(--line)}
table.cmp tbody th{font-weight:600;color:var(--ink);width:34%}
table.cmp .cmp-name{display:block;font-size:1.05rem}.cmp-col small{display:block;color:var(--mute);font-weight:500;font-size:.78rem;margin-top:2px}
table.cmp td.plus,table.cmp th.plus{background:color-mix(in srgb,var(--brand) 4%,var(--card))}table.cmp thead th.plus{background:color-mix(in srgb,var(--brand) 9%,var(--soft))}
.cmp-price{font-size:1.1rem}
.cmp-yes{display:inline-flex;align-items:center;gap:8px}.cmp-yes i{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#e3f6ee;color:#12805c;font-style:normal;font-size:.72rem;font-weight:800;flex:none}
.cmp-no{color:#a3a3b8;font-weight:700}
.pr-bar{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin:6px 0 6px}
.pr-filters{display:flex;gap:6px;flex-wrap:wrap}
.pr-filters button{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--card);color:var(--ink);padding:8px 14px;border-radius:999px;font:inherit;font-size:.88rem;font-weight:700;cursor:pointer}
.pr-filters button small{font-size:.74rem;font-weight:700;color:var(--mute);background:var(--soft);border-radius:99px;padding:1px 8px}
.pr-filters button:hover{border-color:var(--brand)}.pr-filters button[aria-pressed=true]{background:var(--brand);color:var(--brand-ink);border-color:var(--brand)}.pr-filters button[aria-pressed=true] small{background:rgba(255,255,255,.25);color:#fff}
.pr-q{flex:0 1 260px;min-width:170px;padding:9px 14px;border:1px solid var(--line);border-radius:99px;font:inherit;background:var(--card);color:var(--ink)}
.pr-count{margin:4px 2px 10px}
.cg{margin:0 0 22px}.cg h3{margin:0 0 8px;font-size:1.02rem}
.cr{display:grid;grid-template-columns:minmax(180px,1.5fr) repeat(3,minmax(0,1fr));gap:12px;align-items:center;padding:11px 16px;background:var(--card);border:1px solid var(--line);border-top:0}
.cg .cr:nth-child(2){border-top:1px solid var(--line);border-radius:14px 14px 0 0}.cg .cr:last-child{border-radius:0 0 14px 14px}.cg .cr:nth-child(2):last-child{border-radius:14px}
.cr-h{background:var(--soft);font-size:.78rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);padding-top:9px;padding-bottom:9px}
.cr:not(.cr-h):hover{background:color-mix(in srgb,var(--brand) 3%,var(--card))}
.cr-n{font-weight:700;color:var(--ink);text-decoration:none;min-width:0}a.cr-n:hover{color:var(--brand);text-decoration:none}
.cc{display:grid;gap:1px;min-width:0}.cc b{font-size:.9rem;font-weight:700}.cc small{font-size:.74rem;color:var(--mute);font-weight:500}
.cc.ok b{color:#12805c}.cc.mute b{color:#8a8aa3;font-weight:600}.cc.tok b,.cc.plan b{color:#3447b8}
@media (max-width:760px){
  .cr{grid-template-columns:1fr 1fr 1fr;gap:6px 10px;padding:12px 14px}
  .cr .cr-n{grid-column:1 / -1;font-size:.98rem}
  .cr-h{display:none}
  .cc::before{content:attr(data-label);font-size:.68rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
  .cg .cr:nth-child(2){border-radius:14px 14px 0 0}
  table.cmp th,table.cmp td{padding:11px 12px;font-size:.86rem}table.cmp tbody th{width:auto}
}
@media (max-width:520px){.cr{grid-template-columns:1fr 1fr}.cr .cc:last-child{grid-column:1 / -1}}
@media (max-width:760px){.cr{grid-template-columns:1fr}.cr .cc{grid-template-columns:64px 1fr;column-gap:10px;align-items:baseline}.cr .cc::before{grid-row:1 / span 2}.cr .cc small{grid-column:2}.cr .cc:last-child{grid-column:auto}}

/* ---------- plan cards ---------- */
.cc.quota b{color:#3447b8}
.plans{grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:20px;align-items:stretch;margin:22px 0}
.plan{display:flex;flex-direction:column;padding:28px 26px 26px;border:1px solid var(--line);border-radius:22px;background:var(--card);box-shadow:var(--shadow);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.plan:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(20,20,40,.1)}
.plan.paid{border-color:color-mix(in srgb,var(--brand) 22%,var(--line))}
.plan.cur{border-color:var(--brand);outline:0;box-shadow:0 0 0 4px rgba(231,13,94,.1),var(--shadow)}
.pl-top{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:30px}.plan h2{margin:0;font-size:1.3rem}
.pl-cur{background:var(--chip);color:var(--chip-ink);font-size:.74rem;font-weight:800;letter-spacing:.04em;padding:4px 11px;border-radius:99px;white-space:nowrap}
.pl-tag{margin:2px 0 18px;color:var(--mute);font-size:.92rem;min-height:2.6em}
.plan .price{display:flex;align-items:baseline;gap:8px;margin:0 0 20px;font-size:2.6rem;font-weight:800;line-height:1;letter-spacing:-.02em}
.plan .price small{font-size:.92rem;font-weight:500;color:var(--mute);letter-spacing:0}
.pl-feats{list-style:none;margin:0 0 26px;padding:20px 0 0;border-top:1px solid var(--line);display:grid;gap:13px}
.pl-feats li{display:flex;gap:11px;align-items:flex-start;color:var(--ink);font-size:.94rem;line-height:1.45}
.pl-feats i{flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#e3f6ee;color:#12805c;font-style:normal;font-size:.7rem;font-weight:800;margin-top:1px}
.pl-feats li b{font-weight:800}
.pl-feats li.off{color:#9a9ab0}.pl-feats li.off i{background:var(--soft);color:#a3a3b8}
.pl-cta{margin-top:auto}.pl-cta .btn{width:100%;justify-content:center;box-sizing:border-box}
.modal .plans{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}.modal .plan{padding:22px 20px}.modal .plan .price{font-size:2.1rem}
@media (prefers-reduced-motion:reduce){.plan{transition:none}.plan:hover{transform:none}}
.plan .pl-feats{padding:20px 0 0;margin:0 0 26px;color:var(--ink)}
.pl-tag{min-height:0;margin-bottom:16px}

/* ---------- front page: browse by category (links for search engines) ---------- */
.hub-seo .seo-in{max-width:1452px}.hub-seo h2{margin:1.4em 0 .8em;font-size:1.5rem}
.hub-cats{display:grid;gap:14px}
.hub-cat{display:grid;grid-template-columns:230px 1fr;gap:10px 28px;align-items:center;padding:22px 26px;border-radius:22px;background:var(--soft);border:1px solid transparent;transition:border-color .18s,box-shadow .18s,background .18s}
.hub-cat:hover{background:#fff;border-color:color-mix(in srgb,var(--brand) 30%,var(--line));box-shadow:0 10px 28px rgba(20,20,40,.07)}
.hub-cat h3{margin:0;font-size:1.15rem;display:flex;align-items:center;gap:10px}
.hub-cat h3 a{color:var(--ink)}.hub-cat h3 a:hover{color:var(--brand);text-decoration:none}
.hub-cat h3 span{background:var(--brand);color:#fff;border-radius:99px;font-size:.72rem;font-weight:800;padding:2px 9px}
.hub-cat p{margin:4px 0 0;color:var(--mute);font-size:.88rem;grid-column:1;grid-row:2}
.hub-cat .hub-h{grid-column:1;grid-row:1}
.seo .hub-cat ul{grid-column:2;grid-row:1 / span 2;list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.hub-cat li a{display:inline-block;padding:7px 14px;border-radius:99px;background:#fff;border:1px solid var(--line);color:var(--ink);font-size:.88rem;font-weight:600;transition:all .15s}
.hub-cat li a:hover{background:var(--brand);border-color:var(--brand);color:#fff;text-decoration:none;transform:translateY(-1px)}
@media (max-width:760px){.hub-cat{grid-template-columns:1fr;padding:18px}.hub-cat ul,.seo .hub-cat ul{grid-column:1;grid-row:auto}.hub-cat p{grid-row:auto}}
.hub-cat h3{align-self:end}.hub-cat p{align-self:start}.seo .hub-cat ul{align-self:center}

/* ---------- e-sign page option cards ---------- */
.es-options{gap:22px}
.es-opt{padding:28px 28px 26px;border-radius:22px;gap:0}
.es-opt:hover{box-shadow:0 16px 36px rgba(20,20,40,.1)}
.es-opt.paid{box-shadow:0 0 0 4px rgba(231,13,94,.07),var(--shadow)}
.es-opt-h{min-height:34px}.es-opt h2{font-size:1.45rem}
.es-opt .es-sub{margin:4px 0 18px}
.es-opt .ticks{margin:0 0 22px;padding:20px 0 0;border-top:1px solid var(--line);display:grid;gap:13px}
.es-opt .ticks li{padding:0 0 0 32px;font-size:.95rem;line-height:1.45}
.es-opt .ticks li:before{content:"\2713";left:0;top:1px;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#e3f6ee;color:#12805c;font-size:.7rem}
.es-opt .es-price{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:0 0 22px}
.es-pt{display:grid;gap:2px;padding:14px 16px;border-radius:16px;background:var(--soft);border:1px solid var(--line)}
.es-pt small{font-weight:800;font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;color:var(--mute)}
.es-pt b{font-size:1.55rem;font-weight:800;letter-spacing:-.02em;line-height:1.15}.es-pt b i{font-style:normal;font-size:.8rem;font-weight:500;color:var(--mute)}
.es-pt span{font-size:.84rem;color:var(--mute)}
.es-pt.free{grid-column:1/-1}
.es-opt-f{padding-top:0;margin-top:auto}
.es-opt-f .btn{flex:1 1 auto;justify-content:center;text-align:center}.es-opt-f .hint{flex-basis:100%;text-align:center}
.es-opt .es-price{margin-top:auto}.es-opt-f{margin-top:0}

/* ---------- tool icons: [icon] Title ---------- */
.tc-h{display:flex;align-items:center;gap:11px;min-width:0}
.tc-h b{min-width:0}
.ti{flex:none;display:inline-grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--chip);color:var(--brand);transition:background .18s,color .18s}
.ti-svg{display:block}
a.tcard:hover .ti,a.tcard:focus-visible .ti,.rel a:hover .ti{background:var(--brand);color:#fff}
.tcard.off .ti{background:var(--soft);color:#9a9ab0}
.rel .tc-h{align-items:center}.rel a:hover b{color:var(--brand)}
.hub-cat li a svg{width:16px;height:16px;margin:-3px 7px -3px -2px;color:var(--brand);vertical-align:middle;transition:color .15s}
.hub-cat li a:hover svg{color:#fff}
/* smaller icons */
.tc-h{gap:9px}
.ti{width:28px;height:28px;border-radius:9px}
.ti .ti-svg{width:16px;height:16px;stroke-width:2}
.tcard .tc-h b{font-size:.98rem}
/* browse-by-category pills: icon beside the name, on one line */
.hub-cat li a{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.hub-cat li a svg{display:block;flex:none;width:16px;height:16px;margin:0}

/* ---------- crop workspace: full screen, like the PDF editor ---------- */
.runrow{margin-top:14px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
body.focus-crop{overflow:hidden}
.crop.full{position:fixed;top:46px;left:0;right:0;bottom:0;z-index:60;background:var(--soft);display:grid;grid-template-columns:minmax(0,1fr) 360px;grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"top top" "main side" "foot side";gap:0;align-items:stretch}
.crop.full .crop-top{grid-area:top;display:flex;gap:10px;align-items:center;padding:10px 16px;background:var(--card);border-bottom:1px solid var(--line);overflow-x:auto}
.crop.full .crop-ratios{flex-wrap:nowrap}.crop.full .crop-ratios button{white-space:nowrap;padding:6px 13px}
.crop.full .crop-top .btn,.crop.full .crop-custom{flex:none}
.crop.full .crop-main{grid-area:main;display:flex;flex-direction:column;min-width:0;min-height:0;padding:14px 16px 0}
.crop.full .crop-stage{flex:1;min-height:0;position:relative;overflow:hidden;padding:0;background:#e6e8f0;border-radius:18px}
.crop.full .crop-canvas{box-shadow:none;border-radius:0;max-width:none;cursor:crosshair}
.crop.full .crop-hint{margin:8px 0 0;font-size:.8rem}
.crop.full .crop-bar{display:flex;align-items:center;gap:12px;padding:10px 0 12px;overflow-x:auto;min-height:38px}
.crop.full .crop-bar .strip{margin:0;flex-wrap:nowrap;justify-content:flex-start}.crop.full .crop-bar .strip button{flex:none}
.crop.full .crop-bar .live-mode{margin:0;flex:none}.crop-add{flex:none}
.crop.full .crop-foot{grid-area:foot;max-height:34vh;overflow:auto;padding:0 16px}
.crop.full .crop-foot:not(:empty){padding-bottom:14px}
.crop.full .crop-side{grid-area:side;display:flex;flex-direction:column;min-height:0;background:var(--card);border-left:1px solid var(--line)}
.crop.full .crop-scroll{flex:1;overflow:auto;padding:14px;display:grid;gap:12px;align-content:start}
.crop-card .opts{margin:0;grid-template-columns:1fr}
.crop-dock{padding:12px 14px 14px;border-top:1px solid var(--line);background:var(--card)}
.crop-dock .runrow{margin:0;flex-direction:column;align-items:stretch;gap:8px}
.crop-dock .btn.primary{width:100%;justify-content:center;min-height:48px;font-size:1.02rem}
.crop-dock .limits{font-size:.76rem;text-align:center;justify-content:center;margin:0}
.crop-shapes{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.crop-shapes button{display:grid;place-items:center;height:46px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);cursor:pointer;padding:0;transition:border-color .15s,background .15s,color .15s}
.crop-shapes button:hover{border-color:var(--brand);color:var(--brand)}
.crop-shapes button[aria-pressed=true]{background:var(--brand);border-color:var(--brand);color:#fff}
.crop-tilt{display:grid;gap:10px}.crop-tilt-row{display:flex;gap:12px;align-items:center}.crop-tilt-row input[type=range]{flex:1;min-width:0;accent-color:var(--brand)}
.crop-deg{display:inline-flex;align-items:center;gap:3px;font-weight:700}.crop-deg input{width:70px;padding:6px 8px;border:1px solid var(--line);border-radius:9px;font:inherit}
@media (max-width:900px){
  .crop.full{display:block;overflow:auto;-webkit-overflow-scrolling:touch}
  .crop.full .crop-top{position:sticky;top:0;z-index:3}
  .crop.full .crop-main{display:block;padding:10px}
  .crop.full .crop-stage{height:58vh;min-height:300px}
  .crop.full .crop-side{display:block;border-left:0;border-top:1px solid var(--line)}
  .crop.full .crop-scroll{overflow:visible}
  .crop.full .crop-dock{position:sticky;bottom:0;z-index:3;box-shadow:0 -8px 18px rgba(20,20,40,.1)}
  .crop.full .crop-foot{max-height:none;padding:0 10px}
  .crop-shapes{grid-template-columns:repeat(5,1fr)}
}

/* ---------- crop: tilt switch and Advanced shapes ---------- */
.crop-sp{flex:1}
.crop-advbtn{flex:none;white-space:nowrap}.crop-advbtn[aria-pressed=true]{background:var(--brand);border-color:var(--brand);color:#fff}
.crop-tiltimg{display:flex;align-items:center;gap:8px;font-size:.86rem;font-weight:600;cursor:pointer}.crop-tiltimg input{width:18px;height:18px;accent-color:var(--brand)}
.crop-tilthint{margin:0;font-size:.76rem}
.crop.adv .crop-ratios,.crop.adv .crop-custom,.crop.adv .crop-top .btn:not(.crop-advbtn),.crop.adv .crop-tiltimg,.crop.adv .crop-tilthint{display:none}
.crop-parts{display:grid;gap:6px}.crop-parts:empty{display:none}
.crop-part{display:flex;align-items:center;justify-content:space-between;gap:6px;border:1px solid var(--line);border-radius:12px;padding:4px 6px 4px 4px;background:var(--card)}
.crop-part.on{border-color:var(--brand);box-shadow:0 0 0 3px rgba(231,13,94,.1)}
.crop-part-n{display:flex;align-items:center;gap:8px;border:0;background:transparent;padding:6px 8px;font:inherit;font-weight:700;font-size:.88rem;color:var(--ink);cursor:pointer;flex:1;text-align:left;min-width:0}
.crop-part-ic{display:inline-grid;color:var(--brand)}
.crop-part-act{display:flex;gap:2px}.crop-part-act button{border:0;background:transparent;width:28px;height:28px;border-radius:8px;cursor:pointer;color:var(--mute);font-size:.95rem}.crop-part-act button:hover:not(:disabled){background:var(--soft);color:var(--ink)}.crop-part-act button:disabled{opacity:.3;cursor:default}
.crop-ops{display:flex;gap:4px;padding:4px;background:var(--soft);border-radius:12px}
.crop-ops button{flex:1;border:0;background:transparent;padding:7px 4px;border-radius:9px;font:inherit;font-size:.8rem;font-weight:700;color:var(--mute);cursor:pointer}
.crop-ops button[aria-pressed=true]{background:var(--card);color:var(--brand);box-shadow:0 1px 4px rgba(20,20,40,.12)}

/* ---------- photo editor: full screen, like the PDF editor ---------- */
.pe.full{position:fixed;top:46px;left:0;right:0;bottom:0;z-index:60;background:var(--soft);display:grid;grid-template-columns:78px minmax(0,1fr) 350px;grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"top top side" "rail main side" "rail foot side";gap:0;align-items:stretch}
.pe-top{grid-area:top;display:flex;align-items:center;gap:8px;padding:9px 14px;background:var(--card);border-bottom:1px solid var(--line);overflow-x:auto}.pe-sp{flex:1}.pe-size{font-size:.8rem;font-weight:700;color:var(--mute);margin-right:6px;white-space:nowrap}
.pe-top .btn{flex:none}.pe-top .btn:disabled{opacity:.4}
.pe-rail{grid-area:rail;display:flex;flex-direction:column;gap:4px;padding:10px 6px;background:var(--card);border-right:1px solid var(--line);overflow-y:auto}
.pe-rail button{display:grid;justify-items:center;gap:3px;border:0;background:transparent;border-radius:12px;padding:8px 2px;font:inherit;color:var(--mute);cursor:pointer;font-size:.68rem;font-weight:700}
.pe-rail button:hover{background:var(--soft);color:var(--ink)}.pe-rail button[aria-pressed=true]{background:var(--chip);color:var(--brand)}
.pe-main{grid-area:main;display:flex;flex-direction:column;min-width:0;min-height:0;padding:14px 16px 0}
.pe-stage{flex:1;min-height:0;overflow:auto;background:#e6e8f0;border-radius:18px;display:grid;place-items:center}.pe-stage.over{outline:3px dashed var(--brand);outline-offset:-6px}
.pe-canvas{display:block;touch-action:none;outline:none;max-width:none}.pe-canvas:focus-visible{outline:3px solid rgba(231,13,94,.4);outline-offset:-3px}
.pe-hint{margin:8px 0 10px;font-size:.8rem}
.pe .crop-foot{grid-area:foot;max-height:34vh;overflow:auto;padding:0 16px}.pe .crop-foot:not(:empty){padding-bottom:14px}
.pe-side{grid-area:side;display:flex;flex-direction:column;min-height:0;background:var(--card);border-left:1px solid var(--line)}
.pe-scroll{flex:1;overflow:auto;padding:14px;display:grid;gap:12px;align-content:start}
.pe-panel{display:grid;gap:12px}.pe-panel:empty{display:none}
.pe-lab{display:grid;gap:5px;font-size:.8rem;font-weight:700;color:var(--mute)}.pe-lab select,.pe-lab input[type=number],.pe-lab textarea{padding:7px 9px;border:1px solid var(--line);border-radius:9px;font:inherit;background:var(--card);color:var(--ink);width:100%;box-sizing:border-box}
.pe-panel textarea{padding:8px 10px;border:1px solid var(--line);border-radius:10px;font:inherit;width:100%;box-sizing:border-box;resize:vertical;background:var(--card);color:var(--ink)}
.pe-sl span{display:flex;justify-content:space-between}.pe-sl output{color:var(--ink)}.pe-sl input[type=range]{width:100%;accent-color:var(--brand)}
.pe-co{display:flex;align-items:center;justify-content:space-between}.pe-co input{width:44px;height:30px;padding:0;border:1px solid var(--line);border-radius:8px;background:var(--card)}
.pe-chk{display:flex;align-items:center;gap:8px;font-size:.86rem;font-weight:600;cursor:pointer}.pe-chk input{width:18px;height:18px;accent-color:var(--brand)}
.pe-seg,.pe-seg2{display:flex;gap:4px;padding:4px;background:var(--soft);border-radius:12px}.pe-seg2 .pe-seg{flex:1;padding:0;background:transparent}
.pe-seg button,.pe-tg{flex:1;border:0;background:transparent;padding:7px 8px;border-radius:9px;font:inherit;font-size:.82rem;font-weight:700;color:var(--mute);cursor:pointer}
.pe-seg button[aria-pressed=true],.pe-tg[aria-pressed=true]{background:var(--card);color:var(--brand);box-shadow:0 1px 4px rgba(20,20,40,.12)}.pe-tg{flex:none;width:34px}
.pe-h4{margin:6px 0 0;font-size:.76rem;letter-spacing:.05em;text-transform:uppercase;color:var(--mute)}
.pe-chips{display:flex;flex-wrap:wrap;gap:6px}.pe-chips button{border:1px solid var(--line);background:var(--card);color:var(--ink);padding:6px 12px;border-radius:99px;font:inherit;font-size:.82rem;font-weight:700;cursor:pointer}.pe-chips button[aria-pressed=true]{background:var(--brand);border-color:var(--brand);color:#fff}
.pe-fxgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pe-fx{display:grid;gap:4px;justify-items:center;border:2px solid transparent;background:var(--card);border-radius:12px;padding:4px;cursor:pointer;font:inherit;color:var(--ink)}.pe-fx canvas{width:100%;height:auto;border-radius:8px;background:#eef0f6}.pe-fx span{font-size:.7rem;font-weight:700;color:var(--mute)}
.pe-fx:hover{border-color:var(--line)}.pe-fx[aria-pressed=true]{border-color:var(--brand)}
.pe-emoji{display:grid;grid-template-columns:repeat(6,1fr);gap:4px}.pe-emoji button{border:0;background:var(--soft);border-radius:10px;font-size:1.5rem;padding:6px 0;cursor:pointer}.pe-emoji button:hover{background:var(--chip)}
.pe-swatches{display:flex;gap:8px;flex-wrap:wrap}.pe-swatches button{width:28px;height:28px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--line);cursor:pointer;padding:0}
.pe .crop-shapes button[aria-pressed=true]{background:var(--brand);border-color:var(--brand);color:#fff}
.pe-layers{display:grid;gap:6px}.pe-layers:empty{display:none}
.pe-layer{display:flex;align-items:center;justify-content:space-between;gap:4px;border:1px solid var(--line);border-radius:12px;padding:4px 4px 4px 4px;background:var(--card)}.pe-layer.on{border-color:var(--brand);box-shadow:0 0 0 3px rgba(231,13,94,.1)}.pe-layer.off{opacity:.55}
.pe-layer-n{display:flex;align-items:center;gap:8px;border:0;background:transparent;padding:2px 6px 2px 2px;font:inherit;font-weight:700;font-size:.84rem;color:var(--ink);cursor:pointer;flex:1;min-width:0;text-align:left}.pe-layer-n span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pe-layer-n canvas{width:34px;height:34px;border-radius:7px;flex:none}
.pe-layer-act{display:flex}.pe-layer-act button{border:0;background:transparent;width:26px;height:28px;border-radius:7px;cursor:pointer;color:var(--mute);font-size:.82rem;padding:0}.pe-layer-act button:hover{background:var(--soft);color:var(--ink)}
@media (max-width:900px){
  .pe.full{display:block;overflow:auto;-webkit-overflow-scrolling:touch}
  .pe-top{position:sticky;top:0;z-index:4}
  .pe-rail{flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line);position:sticky;top:51px;z-index:3}.pe-rail button{min-width:62px;flex:none}
  .pe-main{display:block;padding:10px}.pe-stage{height:56vh;min-height:300px}
  .pe-side{display:block;border-left:0;border-top:1px solid var(--line)}.pe-scroll{overflow:visible}
  .pe .crop-dock{position:sticky;bottom:0;z-index:3;box-shadow:0 -8px 18px rgba(20,20,40,.1)}.pe .crop-foot{max-height:none;padding:0 10px}
}

/* the right-hand panels fit their column (no sideways scroll) */
.pe-scroll,.crop.full .crop-scroll,.pe-panel{grid-template-columns:minmax(0,1fr)}
.pe-scroll>*,.pe-panel>*,.pe .crop-card,.crop .crop-card{min-width:0;box-sizing:border-box;max-width:100%}
.pe-scroll,.crop.full .crop-scroll{overflow-x:hidden}
.pe .crop-card>*,.crop .crop-card>*{min-width:0;max-width:100%}
.pe-seg2{flex-wrap:wrap}.pe-chips,.crop-btns{min-width:0}

/* layers list: name and eye/lock on one line, the other actions under the selected layer */
.pe-layer{display:grid;gap:4px;padding:6px 8px 6px 6px}
.pe-layer-top{display:flex;align-items:center;gap:6px;min-width:0}
.pe-layer-top .pe-layer-n{flex:1;min-width:0;padding:2px 4px 2px 2px;font-size:.86rem}.pe-layer-n span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.pe-layer-n canvas{width:38px;height:38px}
.pe-layer-vis{display:flex;flex:none;gap:2px}
.pe-layer-vis button,.pe-layer-act button{display:inline-grid;place-items:center;width:30px;height:30px;border:0;background:transparent;border-radius:8px;cursor:pointer;color:var(--mute);padding:0}
.pe-layer-vis button:hover,.pe-layer-act button:hover{background:var(--soft);color:var(--ink)}.pe-layer-act button.pe-del:hover{background:#fdecec;color:#c62828}
.pe-layer-act{display:flex;justify-content:flex-end;gap:2px;padding-top:4px;border-top:1px solid var(--line)}

/* ---------- check before you go (the pop-up before any tool runs), compact ---------- */
dialog.modal:has(.rc-grid) .modal-head{padding:10px 18px}dialog.modal:has(.rc-grid) .modal-head h2{font-size:1.02rem}
dialog.modal:has(.rc-grid) .modal-body{padding:14px 18px 0}
.rc-grid{display:grid;gap:14px}.rc-grid.two{grid-template-columns:230px minmax(0,1fr);align-items:start}
.rc-left{display:grid}
.rc-prev{display:grid;justify-items:center;gap:8px;padding:10px;border-radius:12px;border:1px solid var(--line);background-color:#fff;background-image:linear-gradient(45deg,#eceef4 25%,transparent 25%,transparent 75%,#eceef4 75%),linear-gradient(45deg,#eceef4 25%,transparent 25%,transparent 75%,#eceef4 75%);background-size:14px 14px;background-position:0 0,7px 7px}
.rc-prev canvas{max-width:100%;height:auto;border-radius:4px;box-shadow:0 1px 5px rgba(20,20,40,.25)}
.rc-info{font-size:.74rem;font-weight:700;text-align:center;background:rgba(255,255,255,.94);padding:3px 9px;border-radius:99px;line-height:1.3}
.rc-right{display:grid;gap:10px;min-width:0}
.rc-sum{display:grid;grid-template-columns:auto 1fr;gap:3px 14px;margin:0;padding:9px 12px;background:var(--soft);border-radius:10px;font-size:.82rem;line-height:1.35}
.rc-sum dt{color:var(--mute);font-weight:600}.rc-sum dd{margin:0;font-weight:700;text-align:right;word-break:break-word}
.rc-opts{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:8px 10px}.rc-opts:empty{display:none}
.rc-opts label{display:grid;gap:3px;font-size:.76rem;font-weight:700;color:var(--mute)}
.rc-opts label:has(input[type=range]),.rc-opts label:has(input[type=text]),.rc-opts label.chk{grid-column:1/-1}
.rc-opts select,.rc-opts input:not([type=range]):not([type=checkbox]){height:34px;padding:4px 9px;font-size:.86rem;color:var(--ink)}
.rc-opts input[type=range]{accent-color:var(--brand);height:18px;margin:0}
.rc-note{margin:0;padding:7px 11px;border-radius:9px;background:#fdf0dc;color:#7a4a08;font-size:.78rem;font-weight:600;line-height:1.35}
.rc-foot{position:sticky;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:14px -18px 0;padding:10px 18px;background:var(--card);border-top:1px solid var(--line);z-index:2}
.rc-skip{margin:0;font-size:.78rem;color:var(--mute);display:flex;align-items:center;gap:6px;cursor:pointer}.rc-skip input{width:15px;height:15px;accent-color:var(--brand)}
.rc-btns{display:flex;gap:8px;margin-left:auto}.rc-btns .btn{min-width:96px;min-height:38px;justify-content:center;padding:8px 16px;font-size:.9rem}.rc-btns .btn.primary{min-width:130px}
@media (max-width:620px){.rc-grid.two{grid-template-columns:1fr}.rc-left{max-width:260px;margin:0 auto;width:100%}.rc-foot{margin:12px -18px 0}.rc-btns{width:100%}.rc-btns .btn{flex:1}}
.rc-opts input[type=range],.opts input[type=range]{accent-color:var(--brand)}

/* cookie cutter tiles */
.pe-cutters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pe-cut{display:grid;gap:4px;justify-items:center;border:2px solid transparent;background:var(--soft);border-radius:12px;padding:6px 4px 5px;cursor:pointer;font:inherit;color:var(--ink);min-width:0}
.pe-cut canvas,.pe-cut-none{width:100%;aspect-ratio:1;height:auto;border-radius:8px;background:#eef0f6;display:grid;place-items:center;font-size:1.6rem;color:var(--mute)}
.pe-cut small{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.7rem;font-weight:700;color:var(--mute)}
.pe-cut:hover{border-color:var(--line)}.pe-cut[aria-pressed=true]{border-color:var(--brand);background:var(--chip)}
.pe-panel label.pe-chk{display:flex;flex-direction:row;align-items:center;gap:8px}
.rc-opts label:has(input[type=range]){order:5}

/* owner dashboard */
.t.lim td{vertical-align:top}.lim-f{display:inline-flex;align-items:center;gap:6px}.lim-f input{width:96px;padding:7px 9px;border:1px solid var(--line);border-radius:9px;font:inherit}.lim-f span{font-size:.8rem;color:var(--mute);font-weight:600}
.lim-n{display:block;margin-top:4px;color:var(--mute);font-size:.74rem}
.lim-srv{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:8px 24px}.lim-row{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:.9rem}
#where .pr-filters{display:flex;gap:6px;flex-wrap:wrap}#where .pr-filters button{border:1px solid var(--line);background:var(--card);color:var(--ink);padding:6px 14px;border-radius:99px;font:inherit;font-size:.84rem;font-weight:700;cursor:pointer}#where .pr-filters button[aria-pressed=true]{background:var(--brand);border-color:var(--brand);color:#fff}
#where-t td:last-child{white-space:normal;min-width:240px;max-width:520px;font-size:.84rem;color:var(--mute)}#where-t td:first-child{white-space:nowrap}

/* Photo Editor: the Mask card (right side, under Layers), mask badges in the layer rows, crop shapes list */
.pe-maskcard{display:grid;gap:10px}
.pe-mm-st{margin:0;font-size:.8rem;color:var(--mute);line-height:1.35}.pe-mm-st.on{color:var(--brand);font-weight:700}
.pe-mms{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.pe-mm{display:grid;justify-items:center;gap:3px;border:1px solid var(--line);background:var(--soft);border-radius:12px;padding:8px 2px 6px;font:inherit;font-size:.7rem;font-weight:700;color:var(--mute);cursor:pointer;min-width:0}
.pe-mm:hover:not(:disabled){color:var(--ink);border-color:#d5d8e2}.pe-mm[aria-pressed=true]{background:var(--chip);border-color:var(--brand);color:var(--brand)}.pe-mm:disabled{opacity:.4;cursor:default}
.pe-mmb{display:grid;gap:10px;padding-top:10px;border-top:1px solid var(--line);min-width:0}.pe-mmb>*{min-width:0}
.pe-layer-n .pe-layer-tx{display:grid;gap:1px;min-width:0}.pe-layer-tx b{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pe-layer-sub{font-size:.68rem;font-weight:700;color:var(--brand);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pe-layer-mk{flex:none;display:grid;place-items:center;border:2px solid var(--brand);background:transparent;border-radius:8px;padding:0;width:30px;height:30px;cursor:pointer;overflow:hidden}.pe-layer-mk canvas{width:100%;height:100%;display:block}
.pe-parts{display:flex;flex-wrap:wrap;gap:6px}
.pe-part{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--soft);border-radius:999px;padding:5px 10px;font:inherit;font-size:.76rem;font-weight:700;color:var(--mute);cursor:pointer}.pe-part[aria-pressed=true]{background:var(--chip);border-color:var(--brand);color:var(--brand)}
.pe-ltools{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}.pe-ltools .btn{flex:1 1 auto;min-width:0;padding-left:10px;padding-right:10px}.pe-ltools .btn:disabled{opacity:.45}
.pe-final .crop-btns{display:flex;flex-wrap:wrap;gap:6px}

/* the All tools menu (opens on hover): a compact card, categories on the left, the chosen category's tools on the right */
.navdrop{display:inline-flex;position:relative}
nav.main a .chev{display:inline-flex;margin-left:6px;vertical-align:-1px;transition:transform .16s ease}
nav.main a.open{background:var(--soft);color:var(--ink)}nav.main a.open .chev{transform:rotate(180deg)}
.mega{position:absolute;left:-8px;top:calc(100% + 8px);width:min(700px,92vw);background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:0 16px 40px rgba(30,20,80,.14);z-index:6;opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .13s ease,transform .13s ease,visibility 0s linear .13s}
.mega::before{content:'';position:absolute;left:0;right:0;top:-10px;height:10px}
.mega.open{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.mega-in{display:grid;grid-template-columns:196px minmax(0,1fr);min-height:0}
.mega-rail{display:flex;flex-direction:column;gap:2px;padding:10px;background:var(--soft);border-radius:16px 0 0 16px;border-right:1px solid var(--line)}
.mega-cat{display:flex;align-items:center;justify-content:space-between;gap:8px;border:0;background:transparent;border-radius:10px;padding:7px 10px;font:inherit;font-size:.86rem;font-weight:700;color:var(--ink);cursor:pointer;text-align:left;white-space:nowrap}
.mega-cat small{font-size:.7rem;font-weight:700;color:var(--mute);background:var(--card);border-radius:99px;padding:0 7px;line-height:18px}
.mega-cat[aria-selected=true]{background:var(--card);color:var(--brand);box-shadow:0 1px 4px rgba(20,20,40,.1)}.mega-cat:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.mega-browse{margin-top:auto;padding:10px 10px 4px;white-space:nowrap;font-size:.78rem;font-weight:700;text-decoration:none;color:var(--mute)}.mega-browse:hover{color:var(--brand);text-decoration:none}
.mega-panes{padding:10px 12px 8px;min-width:0;display:grid}.mega-pane{grid-area:1/1;min-width:0}.mega-pane[hidden]{display:block !important;visibility:hidden}
.mega-pane ul{list-style:none;margin:0;padding:0;columns:2;column-gap:8px}.mega-pane li{break-inside:avoid}
.mega-pane li a{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:9px;color:var(--ink);font-size:.84rem;font-weight:600;text-decoration:none;white-space:nowrap;overflow:hidden}
.mega-pane li a span:last-child{overflow:hidden;text-overflow:ellipsis}
.mega-pane li a:hover,.mega-pane li a:focus-visible{background:var(--soft);color:var(--brand);outline:none;text-decoration:none}.mega-pane li a[aria-current]{color:var(--brand)}
.mega-pane .ti{display:inline-grid;place-items:center;width:20px;height:20px;flex:none;color:var(--brand)}.mega-pane .ti svg{width:16px;height:16px}
.mega-all{display:inline-block;margin:6px 8px 2px;font-size:.76rem;font-weight:700;color:var(--mute);text-decoration:none}.mega-all:hover{color:var(--brand);text-decoration:none}
@media (max-width:760px){.mega{display:none}nav.main a .chev{display:none}}
@media (prefers-reduced-motion:reduce){.mega,.chev{transition:none}}
.pr-login{margin:0 0 12px;text-align:center;font-size:.88rem;color:var(--mute)}.pr-login a{font-weight:700}

/* the Close / title / Full screen bar of a workspace: one line on every screen, long file names are cut with "..." */
.focusbar{gap:10px;min-width:0}
.focusbar .btn{flex:none;white-space:nowrap;padding:.35em .95em;min-height:34px;font-size:.86rem;line-height:1.2}
.focusbar #fb-title{flex:none;white-space:nowrap;font-size:.95rem}
.focusbar #fb-file{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.84rem}
.focusbar .sp{flex:1 1 0;min-width:0}
@media (max-width:520px){
  .focusbar{gap:8px;padding:0 8px}
  .focusbar .btn{padding:.3em .75em;font-size:.8rem}
  .focusbar #fb-title{font-size:.88rem}
  .focusbar #fb-file{flex:1 1 0}.focusbar .sp{flex:0 0 0}
}

/* ---------- Images to PDF / Merge PDF: full screen gallery, like the photo editor ---------- */
.ar.full{position:fixed;top:46px;left:0;right:0;bottom:0;z-index:60;background:var(--soft);display:grid;grid-template-columns:minmax(0,1fr) 350px;grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"top side" "main side" "foot side";gap:0;align-items:stretch}
.ar .ar-top{grid-area:top}.ar .ar-main{grid-area:main}.ar .pe-side{grid-area:side}
.ar .crop-foot{grid-area:foot;max-height:34vh;overflow:auto;padding:0 16px}.ar .crop-foot:not(:empty){padding-bottom:14px}
.ar-top .arr-sort{flex-wrap:nowrap;flex:none}.ar-top .arr-sort .btn{white-space:nowrap}.ar-top .btn{display:inline-flex;align-items:center;gap:6px}
.ar-stage{flex:1;min-height:0;overflow:auto;background:#e6e8f0;border-radius:18px;padding:18px;outline:none}.ar-stage.over{outline:3px dashed var(--brand);outline-offset:-6px}.ar-stage:focus-visible{box-shadow:inset 0 0 0 2px rgba(231,13,94,.35)}
.ar .arr-grid{grid-template-columns:repeat(auto-fill,minmax(calc(var(--az,188px) + 30px),1fr));gap:16px}
.ar .arr-card{cursor:pointer;padding:12px 10px 10px}
.ar .arr-card.sel{border-color:var(--brand);box-shadow:0 0 0 3px rgba(231,13,94,.16)}
.ar .arr-thumb{min-height:calc(var(--az,188px) * 1.1 + 12px)}
.ar .arr-btns{position:absolute;top:8px;right:8px;display:flex;gap:3px;opacity:0;transition:opacity .12s ease;flex-wrap:nowrap}
.ar .arr-card:hover .arr-btns,.ar .arr-card:focus-within .arr-btns,.ar .arr-card.sel .arr-btns{opacity:1}
@media (hover:none){.ar .arr-btns{opacity:1}}
.arr-ib{width:28px;height:28px;border-radius:50%;border:1px solid var(--line);background:#fff;display:grid;place-items:center;color:var(--ink);cursor:pointer;padding:0;box-shadow:0 1px 4px rgba(20,20,40,.18)}
.arr-ib:hover:not(:disabled){background:var(--chip);color:var(--brand);border-color:var(--brand)}.arr-ib:disabled{opacity:.35;cursor:default}.arr-ib.arr-del:hover:not(:disabled){background:#fdecec;color:#c62828;border-color:#c62828}
.ar-bigwrap{display:grid;place-items:center;background:#eef0f6;border-radius:12px;padding:14px;min-height:180px}.ar-big{box-shadow:0 2px 10px rgba(20,20,40,.25);max-width:100%}
.ar-bigname{font-weight:700;font-size:.9rem;margin-top:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ar-acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.ar-act{display:inline-flex;align-items:center;gap:5px;padding:.35em .7em}
.ar-kv{display:flex;justify-content:space-between;gap:10px;font-size:.82rem;padding:6px 0;border-top:1px solid var(--line)}.ar-kv span{color:var(--mute)}.ar-kv b{text-align:right;min-width:0}
.ar .arr-sum{margin:0 0 8px;font-size:.88rem}
.ar .arr-out{display:grid;gap:6px;margin:0;justify-content:stretch}.ar .arr-out button{border-radius:12px;text-align:left;padding:9px 12px}
.ar .crop-card .opts{display:grid;gap:10px}
@media (max-width:900px){
  .ar.full{display:block;overflow:auto;-webkit-overflow-scrolling:touch}
  .ar .ar-top{position:sticky;top:0;z-index:4}
  .ar .ar-main{display:block;padding:10px}.ar-stage{height:52vh;min-height:280px}
  .ar .pe-side{display:block;border-left:0;border-top:1px solid var(--line)}.ar .pe-scroll{overflow:visible}
  .ar .crop-dock{position:sticky;bottom:0;z-index:3;box-shadow:0 -8px 18px rgba(20,20,40,.1)}.ar .crop-foot{max-height:none;padding:0 10px}
}

/* reading the pages of a PDF: a stepper in the side panel and a full-window reader */
.ar-pnav{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:10px}.ar-plab{flex:1;text-align:center;font-size:.84rem;font-weight:700;min-width:80px}.ar-pnav .btn.primary{width:100%;justify-content:center}
.ar .arr-read:hover:not(:disabled){background:var(--chip);color:var(--brand)}
.ar-reader{position:fixed;inset:0;z-index:95;background:rgba(20,20,32,.78);display:flex;flex-direction:column}
.ar-rbar{display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--card);border-bottom:1px solid var(--line);flex:none}
.ar-rtitle{max-width:34vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.95rem}.ar-rlab{font-size:.84rem;font-weight:700;color:var(--mute);white-space:nowrap}
.ar-rbar .btn{flex:none}
.ar-rscroll{flex:1;min-height:0;overflow:auto;padding:16px 0 40px;display:flex;flex-direction:column;align-items:center;gap:14px;outline:none;-webkit-overflow-scrolling:touch}
.ar-rpage{position:relative;flex:none;background:#fff;box-shadow:0 4px 18px rgba(0,0,0,.35);border-radius:3px}.ar-rpage canvas{display:block;width:100%;height:100%}
.ar-rn{position:absolute;top:8px;left:-4px;transform:translateX(-100%);display:none;font-size:.74rem;color:#fff}
.ar-rpage.bad::after{content:"This page could not be drawn";position:absolute;inset:0;display:grid;place-items:center;color:var(--mute);font-size:.9rem}
@media (max-width:600px){.ar-rtitle{max-width:28vw}.ar-rbar{padding:8px 10px;gap:6px}}

/* ---------- Split PDF: full screen page workspace ---------- */
.sp.full{position:fixed;top:46px;left:0;right:0;bottom:0;z-index:60;background:var(--soft);display:grid;grid-template-columns:minmax(0,1fr) 350px;grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"top side" "main side" "foot side";gap:0;align-items:stretch}
.sp .ar-top{grid-area:top}.sp .ar-main{grid-area:main}.sp .pe-side{grid-area:side}
.sp .crop-foot{grid-area:foot;max-height:34vh;overflow:auto;padding:0 16px}.sp .crop-foot:not(:empty){padding-bottom:14px}
.sp-file{max-width:46vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.95rem}
.sp-stage{padding:22px 18px}
.sp-grid{display:flex;flex-wrap:wrap;gap:18px 0;align-content:flex-start}
.sp-cell{display:flex;align-items:stretch}
.sp-card{position:relative;width:var(--sw,122px);display:grid;gap:6px;cursor:pointer;border-radius:8px;transition:opacity .15s ease}
.sp-card.dim{opacity:.38}
.sp-thumb{position:relative;background:#fff;box-shadow:0 1px 5px rgba(20,20,40,.28);border-radius:3px;overflow:hidden;border-bottom:4px solid var(--fc,transparent);box-sizing:border-box}
.sp-thumb canvas{display:block;width:100%;height:100%}
.sp-card:hover .sp-thumb{box-shadow:0 4px 14px rgba(20,20,40,.35)}
.sp-card.on .sp-thumb{outline:3px solid var(--brand);outline-offset:1px}
.sp-n{text-align:center;font-size:.76rem;font-weight:700;color:var(--mute)}
.sp-f{position:absolute;top:6px;left:6px;color:#fff;font-size:.68rem;font-weight:800;padding:2px 8px;border-radius:99px;box-shadow:0 1px 3px rgba(0,0,0,.3)}.sp-f[hidden]{display:none}
.sp-tick{position:absolute;top:6px;right:6px;width:22px;height:22px;border-radius:50%;background:var(--brand);color:#fff;display:none;place-items:center;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.sp-grid.pick .sp-card.on .sp-tick{display:grid}
.sp-eye{position:absolute;bottom:30px;right:6px;opacity:0;transition:opacity .12s ease}.sp-card:hover .sp-eye,.sp-eye:focus-visible{opacity:1}.sp-grid.pick .sp-eye{top:6px;bottom:auto;right:34px}
@media (hover:none){.sp-eye{opacity:1}}
.sp-cut{position:relative;width:12px;border:0;background:transparent;padding:0;cursor:default;color:var(--brand)}
.sp-cut::before{content:"";position:absolute;top:0;bottom:22px;left:50%;border-left:2px dashed transparent}
.sp-cut svg{position:absolute;top:calc(50% - 20px);left:50%;transform:translate(-50%,-50%) rotate(-90deg);background:var(--soft);border-radius:50%;opacity:0;transition:opacity .12s ease}
.sp-grid.cuts .sp-cut{width:24px;cursor:pointer}
.sp-grid.cuts .sp-cut::before{border-left-color:#c9cde0}
.sp-grid.cuts .sp-cut:hover::before,.sp-grid.cuts .sp-cut:focus-visible::before{border-left-color:var(--brand)}
.sp-grid.cuts .sp-cut:hover svg,.sp-grid.cuts .sp-cut:focus-visible svg{opacity:1}
.sp-grid.cuts .sp-cut.on::before{border-left:2px solid var(--brand)}.sp-grid.cuts .sp-cut.on svg{opacity:1}
.sp-cut:focus-visible{outline:none}
.sp-modes{display:grid;gap:6px}
.sp-mode{display:grid;gap:1px;text-align:left;border:1px solid var(--line);background:var(--card);border-radius:12px;padding:9px 12px;font:inherit;cursor:pointer;color:var(--ink)}
.sp-mode b{font-size:.88rem}.sp-mode small{color:var(--mute);font-size:.76rem}
.sp-mode:hover{border-color:#d5d8e2}.sp-mode[aria-pressed=true]{border-color:var(--brand);background:var(--chip)}.sp-mode[aria-pressed=true] b{color:var(--brand)}
.sp-step{display:flex;gap:6px;align-items:center}.sp-step input{flex:1;min-width:0;text-align:center;padding:7px 9px;border:1px solid var(--line);border-radius:10px;font:inherit}
.sp-sum{margin:0 0 8px;font-size:.88rem;font-weight:700}
.sp-res{list-style:none;margin:0;padding:0;display:grid;gap:6px;max-height:260px;overflow:auto}
.sp-res li{display:grid;grid-template-columns:auto 1fr;column-gap:8px;align-items:center;font-size:.8rem}.sp-res b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sp-res small{grid-column:2;color:var(--mute)}
.sp-dot{width:10px;height:10px;border-radius:50%;grid-row:span 2}
.sp-err{margin:0}
.sp-vwrap{width:min(760px,calc(100vw - 40px));background:#fff;box-shadow:0 4px 18px rgba(0,0,0,.35);border-radius:3px;margin:0 auto}.sp-vcv{display:block;width:100%;height:auto}
@media (max-width:900px){
  .sp.full{display:block;overflow:auto;-webkit-overflow-scrolling:touch}
  .sp .ar-top{position:sticky;top:0;z-index:4}
  .sp .ar-main{display:block;padding:10px}.sp-stage{height:56vh;min-height:280px}
  .sp .pe-side{display:block;border-left:0;border-top:1px solid var(--line)}.sp .pe-scroll{overflow:visible}
  .sp .crop-dock{position:sticky;bottom:0;z-index:3;box-shadow:0 -8px 18px rgba(20,20,40,.1)}.sp .crop-foot{max-height:none;padding:0 10px}
}

/* the upload page of a tool that opens a full-screen workspace: just the drop zone (the options and the main button live in the workspace) */
.panel.has-ui:not(.has-files)>.opts,.panel.has-ui:not(.has-files)>.runrow,.panel.has-ui:not(.has-files)>.stat{display:none}

/* the PDF editor's Export pop-up: six cards, three across; everything free except Send for signature */
dialog.modal.md{width:min(780px,94vw)}
.xsub{margin:0 0 4px}.xfree{margin:0 0 14px;font-size:.9rem}.xfree b{color:var(--ok)}
.xgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
.xcard{align-content:stretch;grid-template-rows:auto 1fr auto;gap:8px}
.xh{justify-content:flex-start;gap:9px}.xh .chip{margin-left:auto}.xh b{font-size:1.02rem}
.xi{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--chip);color:var(--brand);flex:none}
.xcard.sign{background:var(--soft)}.xcard.sign .xi{background:#fff}
.xact{display:grid;gap:8px;align-self:end}.xact .btn{justify-content:center;width:100%}.xact select{max-width:none;width:100%}
.xlink{border:0;background:transparent;color:var(--brand);font:inherit;font-size:.8rem;font-weight:700;cursor:pointer;padding:0;text-align:center}.xlink:hover{text-decoration:underline}
@media (max-width:700px){.xgrid{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.xgrid{grid-template-columns:1fr}}

/* PDF Page Deleter: pages marked for deletion */
.dl-x{position:absolute;top:50%;left:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:#c62828;color:#fff;display:none;place-items:center;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.dl-card.gone .dl-x{display:grid}
.dl-card.gone .sp-thumb{outline:3px solid #c62828;outline-offset:1px}.dl-card.gone .sp-thumb canvas{opacity:.3;filter:grayscale(1)}
.dl-card.gone .sp-n{color:#c62828;text-decoration:line-through}
.sp-stage:focus-within .sp-card.cur .sp-thumb{box-shadow:0 0 0 3px rgba(231,13,94,.55)}
.sp-card:focus-visible{outline:none}
.pe-lab input[type=text]{padding:8px 11px;border:1px solid var(--line);border-radius:10px;font:inherit;font-weight:600;color:var(--ink);background:var(--card);width:100%;box-sizing:border-box}.pe-lab input[type=text]:focus{outline:2px solid rgba(231,13,94,.35);border-color:var(--brand)}

/* PDF Page Deleter: the Read view (big pages, a page rail, the delete button where you read) */
.dl-reader{flex:1;min-height:0;display:flex;background:#e6e8f0;border-radius:18px;overflow:hidden}.dl-reader[hidden]{display:none}
.dl-rail{width:132px;flex:none;overflow:auto;padding:10px 12px;display:flex;flex-direction:column;gap:10px;background:#dcdfea;border-right:1px solid var(--line)}
.dl-rt{position:relative;display:block;width:100%;border:3px solid transparent;border-radius:6px;background:#fff;padding:0;cursor:pointer;box-shadow:0 1px 4px rgba(20,20,40,.25);flex:none}
.dl-rt canvas{display:block;width:100%}
.dl-rn{position:absolute;left:50%;bottom:4px;transform:translateX(-50%);background:rgba(17,17,17,.78);color:#fff;font-size:.68rem;font-weight:700;padding:0 7px;border-radius:99px;line-height:17px}
.dl-rt:hover{border-color:#bfc4d6}.dl-rt.cur{border-color:var(--brand)}
.dl-rt.gone canvas{opacity:.3;filter:grayscale(1)}.dl-rt.gone{border-color:#c62828}.dl-rt.gone .dl-rn{background:#c62828}
.dl-center{flex:1;min-width:0;display:flex;flex-direction:column}
.dl-head{display:flex;align-items:center;gap:8px;padding:9px 14px;background:var(--card);border-bottom:1px solid var(--line);flex-wrap:wrap}
.dl-hl{font-size:.92rem;min-width:96px;text-align:center}.dl-hint{font-size:.76rem;color:var(--mute);white-space:nowrap}
.dl-mark.danger,.dl-pbtn.danger{background:#c62828;border-color:#c62828;color:#fff}.dl-mark.danger:hover,.dl-pbtn.danger:hover{background:#a81f1f;border-color:#a81f1f}
.dl-mark{min-width:150px}
.dl-pages{flex:1;min-height:0;overflow:auto;padding:18px 0 48px;display:flex;flex-direction:column;align-items:center;gap:18px;outline:none;-webkit-overflow-scrolling:touch}
.dl-pages:focus-visible{box-shadow:inset 0 0 0 2px rgba(231,13,94,.35)}
.dl-page{position:relative;flex:none;background:#fff;box-shadow:0 3px 14px rgba(20,20,40,.32);border-radius:3px}
.dl-page canvas{display:block;width:100%;height:100%}
.dl-pl{position:absolute;top:10px;left:10px;background:rgba(17,17,17,.78);color:#fff;font-size:.74rem;font-weight:700;padding:2px 10px;border-radius:99px}
.dl-pbtn{position:absolute;top:8px;right:8px;box-shadow:0 1px 6px rgba(0,0,0,.28)}
.dl-page.gone{outline:4px solid #c62828;outline-offset:0}
.dl-page.gone::after{content:"";position:absolute;inset:0;background:rgba(198,40,40,.13);pointer-events:none}
.dl-ban{display:none;position:absolute;left:50%;top:14px;transform:translateX(-50%);background:#c62828;color:#fff;font-weight:800;font-size:.82rem;padding:5px 14px;border-radius:99px;align-items:center;gap:7px;box-shadow:0 2px 8px rgba(0,0,0,.35);z-index:2;pointer-events:none}
.dl-page.gone .dl-ban{display:inline-flex}
.dl-views{margin:0 6px 0 0;flex:none}.dl-views button{padding:6px 14px}
@media (max-width:900px){.dl-reader{height:62vh;min-height:320px}}
@media (max-width:760px){.dl-rail{display:none}.dl-hint{display:none}.dl-mark{min-width:0}}

/* Rotate PDF: Read view and Overview (turned pages) */
.rt-box{position:relative;overflow:hidden;background:#fff;box-shadow:0 1px 5px rgba(20,20,40,.28);border-radius:3px;margin:0 auto;flex:none}
.rt-page{overflow:hidden}
.rt-pl{position:absolute;top:10px;left:10px;z-index:2;display:inline-flex;align-items:center;gap:6px;background:rgba(17,17,17,.8);color:#fff;font-size:.74rem;font-weight:700;padding:2px 11px 2px 8px;border-radius:99px;cursor:pointer}.rt-pl input,.rt-pl2 input{accent-color:var(--brand);width:15px;height:15px;margin:0;cursor:pointer}
.rt-pc{position:absolute;top:8px;right:8px;z-index:2;display:flex;gap:6px}
.rt-badge{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);z-index:2;background:var(--brand);color:#fff;font-size:.72rem;font-weight:800;padding:3px 11px;border-radius:99px;box-shadow:0 1px 5px rgba(0,0,0,.3);white-space:nowrap}.rt-badge[hidden]{display:none}
.rt-hb{background:var(--chip);color:var(--brand);font-size:.74rem;font-weight:800;padding:3px 10px;border-radius:99px;white-space:nowrap}
.dl-page.rt-page.sel{outline:3px solid rgba(231,13,94,.5)}
.dl-rt.sel{box-shadow:0 0 0 2px #fff,0 0 0 4px rgba(231,13,94,.45)}.dl-rt.turned .dl-rn{background:var(--brand)}
.rt-rt .rt-box{box-shadow:none;border-radius:2px}
.rotws .sp-card.rt-card{width:auto;max-width:calc(var(--sw,124px) + 24px);padding:8px 10px 8px;background:var(--card);border-radius:12px;box-shadow:0 1px 4px rgba(20,20,40,.1);align-content:start;border:2px solid transparent}
.rotws .sp-card.rt-card.sel{border-color:var(--brand);background:var(--chip)}
.rotws .sp-card.rt-card:hover{box-shadow:0 4px 14px rgba(20,20,40,.18)}
.rt-pl2{display:flex;align-items:center;gap:6px;font-size:.78rem;font-weight:700;cursor:pointer}
.rt-wrapbox{position:relative;display:flex;justify-content:center;align-items:center}
.rt-btns{display:flex;gap:6px;justify-content:center}
.rotws .sp-card.rt-card .rt-badge{bottom:6px;font-size:.66rem;padding:2px 8px}
.sp-stage:focus-within .sp-cell.cur .rt-card{outline:3px solid rgba(231,13,94,.45)}
.rotws .sp-grid{gap:16px 12px}

/* Rotate PDF: easy select / unselect on the page list */
.rt-railhead{position:sticky;top:-10px;z-index:3;background:#dcdfea;margin:-10px -12px 0;padding:10px 12px 8px;display:grid;gap:6px;border-bottom:1px solid var(--line)}
.rt-railhead b{font-size:.74rem;color:var(--ink);line-height:1.2}
.rt-railbtns{display:flex;gap:6px}.rt-railbtns .btn{flex:1;padding:.25em .4em;font-size:.76rem;min-height:30px}
.rt-go{display:block;position:relative;width:100%;border:0;background:transparent;padding:0;cursor:pointer;border-radius:3px}
.rt-rchk{position:absolute;top:6px;left:6px;width:20px;height:20px;margin:0;z-index:2;accent-color:var(--brand);cursor:pointer;box-shadow:0 0 0 2px #fff;border-radius:4px;background:#fff}

/* Rotate PDF: pages turn smoothly */
.rt-box canvas,.rt-page canvas{transition:transform .42s cubic-bezier(.3,.75,.25,1);transform-origin:center center;will-change:transform}
.rt-box,.rt-page{transition:height .42s cubic-bezier(.3,.75,.25,1)}
.rt-badge{transition:opacity .2s ease}
@media (prefers-reduced-motion:reduce){.rt-box canvas,.rt-page canvas,.rt-box,.rt-page,.rt-badge{transition:none !important}}
.rt-rt{padding-bottom:4px}
.rt-rlab{display:flex;align-items:center;gap:7px;padding:6px 6px 2px;font-size:.76rem;font-weight:700;color:var(--ink);cursor:pointer}
.rt-rt .rt-rchk{position:static;width:17px;height:17px;box-shadow:none;border-radius:4px;flex:none}
.dl-rt.turned .rt-rlab span{color:var(--brand)}

.panel.has-ui>textarea.in{display:none}

/* Convert tools: the data workspace (editable grid / JSON editor on the left, the live result on the right) */
.cv-panes{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.cv-pane{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.cv-head{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--line);flex:none;overflow-x:auto;background:var(--card)}
.cv-head b{font-size:.9rem;white-space:nowrap}.cv-head .btn{flex:none;display:inline-flex;align-items:center;gap:5px;padding:.3em .75em}
.cv-sub{font-size:.78rem;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46%}.cv-sub.ok{color:var(--ok);font-weight:700}.cv-sub.bad{color:#c62828;font-weight:700}
.cv-scroll{position:relative;flex:1;min-height:0;overflow:auto;background:#fff;outline:none}
.cv-colhead{position:sticky;top:0;z-index:3;display:flex;height:30px;background:#f3f4f9;border-bottom:1px solid var(--line)}
.cv-corner{flex:none;border-right:1px solid var(--line);background:#f3f4f9}
.cv-ch{flex:none;border:0;border-right:1px solid var(--line);background:transparent;font:inherit;font-size:.74rem;font-weight:700;color:var(--mute);cursor:pointer;padding:0}
.cv-ch.on{background:var(--chip);color:var(--brand)}
.cv-spacer{position:relative}
.cv-row{position:absolute;left:0;display:flex;border-bottom:1px solid #eef0f6;box-sizing:border-box}
.cv-rn{flex:none;border:0;border-right:1px solid var(--line);background:#f7f8fb;color:var(--mute);font:inherit;font-size:.72rem;font-weight:700;cursor:pointer;padding:0}
.cv-row.on .cv-rn{background:var(--chip);color:var(--brand)}
.cv-c{flex:none;border:0;border-right:1px solid #eef0f6;padding:0 9px;font:inherit;font-size:.86rem;color:var(--ink);background:transparent;height:100%;box-sizing:border-box;min-width:0;text-overflow:ellipsis}
.cv-c:focus{outline:2px solid var(--brand);outline-offset:-2px;background:#fff7fa;position:relative;z-index:1}
.cv-row.hdr .cv-c{font-weight:800;background:#f6f6fb}
.cv-json{flex:1;min-height:0;width:100%;border:0;resize:none;padding:12px 14px;font:13px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--ink);background:#fff;outline:none;box-sizing:border-box;tab-size:2}
.cv-outbody{flex:1;min-height:0;overflow:auto;background:#fff;display:flex;flex-direction:column}
.cv-pre{margin:0;padding:12px 14px;font:13px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre;color:var(--ink);outline:none;flex:1}
.cv-err{margin:12px}
.cv-xwrap{flex:1;overflow:auto;min-height:0}
.cv-xls{border-collapse:collapse;font-size:.84rem;font-family:Calibri,"Segoe UI",system-ui,sans-serif}
.cv-xls th{background:#f1f3f8;color:var(--mute);font-weight:600;border:1px solid #d8dbe6;padding:2px 10px;position:sticky;top:0;z-index:1;text-align:center}
.cv-xls tr>th:first-child{left:0;z-index:2;min-width:42px}.cv-xls th.corner{z-index:3}
.cv-xls td{border:1px solid #e3e6ef;padding:3px 10px;min-width:96px;white-space:nowrap;max-width:260px;overflow:hidden;text-overflow:ellipsis}.cv-xls td.num{text-align:right}
.cv-tab{flex:none;align-self:flex-start;margin:0 0 0 12px;padding:5px 18px;background:#fff;border:1px solid var(--line);border-top:3px solid #217346;border-radius:0 0 6px 6px;font-weight:700;color:#217346;font-size:.8rem}
.cv-views{display:none;margin:0 6px 0 0}
@media (max-width:900px){
  .cvws .cv-panes{display:block;height:64vh;min-height:340px}.cvws .cv-pane{height:100%}
  .cvws[data-view=edit] .cv-result{display:none}.cvws[data-view=result] .cv-edit{display:none}
  .cv-views{display:inline-flex}.cvws .cv-head .btn span{display:none}
}
.cv-edit .cv-head{flex-wrap:wrap;row-gap:6px}.cv-edit .cv-head .btn{padding:.25em .65em;font-size:.8rem}

/* Black & White: full screen picture editor */
.bw-stage{flex:1;min-height:0;overflow:auto;background:#e6e8f0;border-radius:18px;display:grid;place-items:center;padding:18px;box-sizing:border-box}
.bw-canvas{display:block;max-width:none;box-shadow:0 2px 14px rgba(20,20,40,.3);background:#fff;touch-action:none}
.bw-strip{display:flex;gap:10px;align-items:flex-start;overflow-x:auto;padding:10px 2px 4px;flex:none;min-height:96px}
.bw-th{position:relative;flex:none;width:96px;display:grid;gap:4px;justify-items:center;padding:6px 6px 5px;border:2px solid transparent;border-radius:12px;background:var(--card);cursor:pointer;box-shadow:0 1px 4px rgba(20,20,40,.12)}
.bw-th canvas{display:block;max-width:100%;max-height:60px;border-radius:4px;background:#eef0f6}
.bw-th.on{border-color:var(--brand)}
.bw-tn{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.68rem;font-weight:700;color:var(--mute)}
.bw-tx{position:absolute;top:-6px;right:-6px;width:20px;height:20px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--mute);display:none;place-items:center;padding:0;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.2)}.bw-th:hover .bw-tx,.bw-th:focus-within .bw-tx{display:grid}.bw-tx:hover{color:#c62828}
@media (hover:none){.bw-tx{display:grid}}
.bw-add{flex:none;width:76px;height:84px;border:2px dashed #c9cde0;border-radius:12px;background:transparent;color:var(--mute);display:grid;place-items:center;align-content:center;gap:2px;font:inherit;font-size:.72rem;font-weight:700;cursor:pointer}.bw-add:hover{border-color:var(--brand);color:var(--brand)}
.bw-look{min-width:0}
.bw-cmp button{padding:6px 14px}
@media (max-width:900px){.bwws .bw-stage{height:52vh;min-height:280px;flex:none}}
/* the sp-workspace grid applies to the Black & White root too */
.bwws .ar-top{grid-area:top}.bwws .ar-main{grid-area:main}.bwws .pe-side{grid-area:side}

/* the owner's admin page */
.adm-tabs{display:flex;gap:4px;margin:0 0 16px;flex-wrap:wrap;width:fit-content;max-width:100%}
.adm-tabs button{border:0;background:transparent;padding:9px 18px;border-radius:9px;font:inherit;font-size:.9rem;font-weight:700;color:var(--mute);cursor:pointer}
.adm-tabs button:hover{color:var(--ink)}.adm-tabs button[aria-selected=true]{background:var(--card);color:var(--brand);box-shadow:0 1px 4px rgba(20,20,40,.12)}
.adm-lead{color:var(--mute);margin-top:0}.adm-hint{display:block;color:var(--mute);font-weight:500;font-size:.74rem;line-height:1.3}
.adm-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.adm-f{display:grid;gap:5px;font-size:.84rem;font-weight:700;color:var(--mute);align-content:start}.adm-f small{font-weight:500;font-size:.74rem}
.adm-f input,.adm-f select,.adm-n{padding:9px 11px;border:1px solid var(--line);border-radius:10px;font:inherit;font-weight:600;color:var(--ink);background:var(--card);box-sizing:border-box;width:100%}.adm-f input:focus,.adm-f select:focus,.adm-n:focus{outline:2px solid rgba(231,13,94,.35);border-color:var(--brand)}
.adm-n{width:92px;padding:6px 8px;border-radius:8px}
.adm-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:14px}.adm-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:10px}.adm-bar .pr-q{max-width:320px}
.adm-msg.ok{color:var(--ok);font-weight:700}.adm-msg.bad{color:#c62828;font-weight:700}
.adm-plans th[scope=row]{text-align:left;font-weight:700;min-width:210px}.adm-plans .lim-f input{width:110px}
.adm-tools td{vertical-align:middle}.adm-tools tr.dirty{background:var(--chip)}.adm-tools small{display:block}
.adm-made{margin-top:12px}.adm-made textarea{width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid var(--line);border-radius:10px;font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:var(--soft)}
.adm-acts{display:flex;gap:6px;flex-wrap:wrap}

#rd-form input{flex:1;min-width:200px;max-width:340px;padding:10px 13px;border:1px solid var(--line);border-radius:999px;font:inherit;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);background:var(--card)}#rd-form input:focus{outline:2px solid rgba(231,13,94,.35);border-color:var(--brand)}.stat.bad{color:#c62828;font-weight:700}.stat.ok{color:var(--ok);font-weight:700}
.adm-tabs button{white-space:nowrap;flex:none}.adm-tabs{overflow-x:auto}

/* Resize Image: full screen */
.rs-stage{padding:18px}.rs-wrap{position:relative;display:grid;place-items:center}
.rs-canvas{max-width:none}
.rs-label{position:absolute;left:8px;bottom:8px;background:rgba(17,17,17,.8);color:#fff;font-size:.74rem;font-weight:700;padding:3px 11px;border-radius:99px;white-space:nowrap;pointer-events:none}.rs-label.big{background:#b45309}
.rs-ts{font-size:.68rem;font-weight:700;color:var(--brand);white-space:nowrap}
.rs-presets{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.rs-preset{display:grid;gap:1px;text-align:left;border:1px solid var(--line);background:var(--card);border-radius:12px;padding:8px 10px;font:inherit;cursor:pointer;color:var(--ink);min-width:0}
.rs-preset b{font-size:.8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rs-preset small{color:var(--mute);font-size:.72rem}
.rs-preset:hover{border-color:#d5d8e2}.rs-preset[aria-pressed=true]{border-color:var(--brand);background:var(--chip)}.rs-preset[aria-pressed=true] b{color:var(--brand)}
.rs-bg{display:grid;gap:8px;margin-top:4px}
.rsws .bw-th{width:104px}
@media (max-width:900px){.rsws .bw-stage{height:52vh;min-height:280px;flex:none}}

/* Word Counter: full screen writing */
.wc-stage{flex:1;min-height:0;display:flex;background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.wc-text{flex:1;width:100%;border:0;resize:none;outline:none;padding:28px clamp(18px,5vw,56px);font:1.06rem/1.8 "Montserrat",system-ui,sans-serif;color:var(--ink);background:var(--card);box-sizing:border-box}
.wc-sel{margin:0 0 10px;padding:10px 14px;border-radius:12px;background:var(--chip);color:var(--brand);font-size:.86rem}.wc-sel b{font-weight:800}.wc-sel small{font-weight:700}
.wc-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.wc-kpi{display:grid;gap:1px;background:var(--soft);border-radius:12px;padding:9px 10px;min-width:0}.wc-kpi b{font-size:1.2rem;line-height:1.2;overflow:hidden;text-overflow:ellipsis}.wc-kpi small{color:var(--mute);font-size:.7rem;font-weight:700}
.wc-times{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}.wc-times div{display:grid;background:var(--soft);border-radius:12px;padding:8px 10px}.wc-times small{color:var(--mute);font-size:.7rem;font-weight:700}.wc-times b{font-size:.98rem}
.wc-goalrow{display:grid;grid-template-columns:1fr 1fr;gap:8px}.wc-goalrow input,.wc-goalrow select{padding:8px 10px;border:1px solid var(--line);border-radius:10px;font:inherit;font-weight:600;color:var(--ink);background:var(--card);min-width:0;width:100%;box-sizing:border-box}
.wc-goal p{margin:6px 0 0;font-size:.86rem;font-weight:700}.wc-bar{height:10px;border-radius:99px;background:var(--soft);overflow:hidden}.wc-bar i{display:block;height:100%;border-radius:99px;background:var(--ok);transition:width .15s ease}
.wc-goal.near .wc-bar i{background:#d97706}.wc-goal.over .wc-bar i{background:#c62828}.wc-goal.over p{color:#c62828}
.wc-top{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:5px}.wc-top li{position:relative;display:flex;justify-content:space-between;gap:8px;padding:5px 9px;border-radius:9px;background:var(--soft);font-size:.84rem;overflow:hidden}
.wc-top li i{position:absolute;left:0;top:0;bottom:0;background:var(--chip);z-index:0;border-radius:9px}.wc-top .wc-w,.wc-top .wc-c{position:relative;z-index:1}.wc-w{font-weight:700;overflow:hidden;text-overflow:ellipsis}.wc-c{color:var(--mute);white-space:nowrap}
.wc-phr{margin:8px 0 0;font-size:.8rem;color:var(--mute)}
@media (max-width:900px){.wcws .wc-stage{height:52vh;min-height:280px;flex:none}.wc-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.rs-warn{margin:8px 0 0;color:#b45309;font-weight:700;font-size:.84rem;line-height:1.4}

/* Resize: position the picture in the new size */
.rs-posrow{display:flex;gap:14px;align-items:center;flex-wrap:wrap}.rs-zoomf{flex:1;min-width:140px}
.rs-posgrid{display:grid;grid-template-columns:repeat(3,30px);gap:4px;padding:6px;background:var(--soft);border-radius:12px}
.rs-pos{width:30px;height:30px;border:1px solid var(--line);background:var(--card);border-radius:8px;cursor:pointer;display:grid;place-items:center;padding:0}.rs-pos i{width:8px;height:8px;border-radius:50%;background:#b7bccf}
.rs-pos:hover{border-color:var(--brand)}.rs-pos[aria-pressed=true]{background:var(--chip);border-color:var(--brand)}.rs-pos[aria-pressed=true] i{background:var(--brand)}
.rs-canvas{touch-action:none}

/* Video and audio tools: full screen player, waveform and trim */
.md-stage{flex:1;min-height:0;overflow:auto;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:12px}
.md-mediabox{display:grid;place-items:center;background:#0f0f18;border-radius:12px;overflow:hidden;max-height:42vh;min-height:120px}.md-video{display:block;max-width:100%;max-height:42vh}
.md-wave{display:block;width:100%;height:170px;border-radius:12px;background:#f6f6fb;outline:none;cursor:pointer;touch-action:none}.md-wave:focus-visible{box-shadow:0 0 0 3px rgba(231,13,94,.35)}
.md-times{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:.84rem;font-weight:700;color:var(--mute)}.md-sel{color:var(--brand)}
.md-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.md-bar .btn{display:inline-flex;align-items:center;gap:6px}.md-selonly{margin-left:6px;font-size:.84rem}
.md-err{margin:0}
.md-th{width:132px}.md-ico{font-size:1.4rem;color:var(--brand);line-height:1}
@media (max-width:900px){.medws .md-stage{height:auto;flex:none}.md-mediabox{max-height:30vh}.md-video{max-height:30vh}}
.md-err{margin:0;padding:10px 14px;border-radius:12px;background:#fff4e0;color:#8a4b08;font-size:.86rem;font-weight:600}.md-err[hidden]{display:none}

/* Video Editor and Audio Editor */
.vd-stage{align-items:stretch}
.vd-wrap{flex:1;min-height:160px;display:grid;place-items:center;background:#0f0f18;border-radius:12px;overflow:hidden;padding:8px}
.vd-view{position:relative;display:inline-block;line-height:0;max-width:100%}
.vd-cv{display:block;max-width:100%;height:auto;width:auto;background:#000}
.vd-cv[hidden]{display:none}
.vd-src{position:absolute;width:2px;height:2px;opacity:0;pointer-events:none;left:0;top:0}
.vd-crop{position:absolute;box-shadow:0 0 0 9999px rgba(0,0,0,.5);border:2px solid #fff;cursor:move;touch-action:none;box-sizing:border-box}
.vd-crop::before,.vd-crop::after{content:"";position:absolute;pointer-events:none;border:0 solid rgba(255,255,255,.35)}
.vd-crop::before{left:33.3%;right:33.3%;top:0;bottom:0;border-left-width:1px;border-right-width:1px}
.vd-crop::after{top:33.3%;bottom:33.3%;left:0;right:0;border-top-width:1px;border-bottom-width:1px}
.vd-h{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;background:var(--brand);border:2px solid #fff;border-radius:50%;box-sizing:border-box}
.vd-h-nw{left:0;top:0;cursor:nwse-resize}.vd-h-n{left:50%;top:0;cursor:ns-resize}.vd-h-ne{left:100%;top:0;cursor:nesw-resize}.vd-h-e{left:100%;top:50%;cursor:ew-resize}
.vd-h-se{left:100%;top:100%;cursor:nwse-resize}.vd-h-s{left:50%;top:100%;cursor:ns-resize}.vd-h-sw{left:0;top:100%;cursor:nesw-resize}.vd-h-w{left:0;top:50%;cursor:ew-resize}
.vd-crop.lock .vd-h-n,.vd-crop.lock .vd-h-e,.vd-crop.lock .vd-h-s,.vd-crop.lock .vd-h-w{display:none}
.vd-line{display:block;width:100%;height:72px;border-radius:10px;background:#e8e8f0;outline:none;cursor:pointer;touch-action:none}.vd-line:focus-visible{box-shadow:0 0 0 3px rgba(231,13,94,.35)}
.btn.sm.on,.btn.sm[aria-pressed="true"]{border-color:var(--brand);color:var(--brand)}
.btn.danger{border-color:#d33;color:#d33}
.au-wave{height:260px}
.au-tools{padding-top:2px}
.au-clips{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:6px;max-height:190px;overflow:auto}
.au-clip{display:flex;justify-content:space-between;gap:8px;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:12px;cursor:pointer;background:var(--card);font-size:.86rem}
.au-clip b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.au-clip small{color:var(--mute);white-space:nowrap}
.au-clip.on{border-color:var(--brand);background:#fff}.au-clip:focus-visible{outline:2px solid var(--brand)}
.au-cc{margin-top:6px}
@media (max-width:900px){.vidws .md-stage,.audws .md-stage{height:auto;flex:none}.vd-wrap{min-height:120px}.au-wave{height:200px}}

/* Lanes (layers) in the Video Editor and Audio Editor */
.vd-ib{position:absolute;border:2px dashed var(--brand);box-sizing:border-box;cursor:move;touch-action:none}
.vd-ib[hidden]{display:none}
.vd-ib .vd-h-se{cursor:nwse-resize}
.vd-lanes,.au-lanes{display:flex;gap:6px;align-items:stretch;background:#f1f1f7;border-radius:10px;padding:6px;overflow:hidden}
.vd-lanes[hidden],.au-lanes[hidden]{display:none}
.vd-labels{display:flex;flex-direction:column;gap:2px;width:52px;flex:none}
.vd-lab{height:30px;line-height:30px;font-size:.68rem;font-weight:700;color:var(--mute);white-space:nowrap}
.vd-tracks{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;touch-action:none;cursor:pointer}
.vd-track{position:relative;height:30px;background:#fff;border-radius:6px}
.vd-track.base{background:#e4e4ee}
.vd-it{position:absolute;top:2px;bottom:2px;border-radius:6px;display:flex;align-items:center;min-width:6px;overflow:hidden;font-size:.7rem;font-weight:700;color:#fff;cursor:grab;background:#4b3df2;box-sizing:border-box;border:2px solid transparent}
.vd-it span{padding:0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.vd-it.k-image{background:#0f9d8a}.vd-it.k-text{background:#e08a00}.vd-it.k-audio{background:#4b3df2}.vd-it.k-video{background:#4b3df2}
.vd-it.main{background:#8e93ad;cursor:pointer}
.vd-it.on{border-color:#111;box-shadow:0 0 0 2px var(--brand)}
.vd-e{position:absolute;top:0;bottom:0;width:8px;cursor:ew-resize;background:rgba(255,255,255,.35)}.vd-e.l{left:0}.vd-e.r{right:0}
.vd-ph{position:absolute;top:-2px;bottom:-2px;width:2px;background:#111;pointer-events:none;margin-left:-1px;z-index:3}
@media (max-width:900px){.vd-labels{width:40px}}
.vd-it.k-audio{background:#0b7285}
.vd-panel-note{margin:0}
/* the stage behind the video is a light checkerboard, so the video frame (even a black one) stands out from it */
.vd-wrap{background:#e6e6ef;background-image:linear-gradient(45deg,#dcdce8 25%,transparent 25%,transparent 75%,#dcdce8 75%),linear-gradient(45deg,#dcdce8 25%,transparent 25%,transparent 75%,#dcdce8 75%);background-size:20px 20px;background-position:0 0,10px 10px}
.vd-cv{outline:2px solid rgba(17,17,17,.55);outline-offset:0;box-shadow:0 8px 28px rgba(17,17,17,.28)}
.vd-view{border-radius:2px}

/* QR Code Generator and Create Zip workspaces */
.panel.auto-open>.drop,.panel.auto-open .files{display:none}
.qr-stage{align-items:center;gap:14px}
.qr-view{display:grid;place-items:center;width:100%;min-height:200px;padding:22px;border-radius:14px;background:#f1f1f7}
.qr-view.clear{background-color:#fff;background-image:linear-gradient(45deg,#e4e4ee 25%,transparent 25%,transparent 75%,#e4e4ee 75%),linear-gradient(45deg,#e4e4ee 25%,transparent 25%,transparent 75%,#e4e4ee 75%);background-size:20px 20px;background-position:0 0,10px 10px}
.qr-cv{display:block;width:min(100%,520px);height:auto;aspect-ratio:1;image-rendering:pixelated;box-shadow:0 8px 28px rgba(17,17,17,.18);border-radius:6px;background:#fff}
.qr-cv[hidden],.qr-empty[hidden]{display:none}
.qr-empty{margin:40px 0;color:var(--mute);font-weight:600}
.qr-meta{width:100%;display:grid;gap:4px}.qr-lab{font-size:.72rem;font-weight:700;color:var(--mute);text-transform:uppercase;letter-spacing:.04em;display:block;margin:8px 0 2px}.qr-meta .qr-lab{margin:0}
.qr-payload{margin:0;max-height:92px;overflow:auto;white-space:pre-wrap;word-break:break-all;background:#f6f6fb;border:1px solid var(--line);border-radius:10px;padding:8px 10px;font:600 .8rem/1.35 ui-monospace,Menlo,Consolas,monospace}
.qr-warn{color:#b45309!important}
.pe-lab textarea,.pe-lab select{width:100%;font:inherit;border:1px solid var(--line);border-radius:12px;padding:8px 10px;background:#fff;box-sizing:border-box}
.pe-lab input[type=color]{width:100%;height:38px;padding:2px;border:1px solid var(--line);border-radius:10px;background:#fff}
.zp-stage{gap:8px}
.zp-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.zp-tools input[type=search]{flex:1;min-width:140px;font:inherit;border:1px solid var(--line);border-radius:999px;padding:7px 14px;background:#fff}
.zp-tools select{font:inherit;border:1px solid var(--line);border-radius:999px;padding:7px 12px;background:#fff}
.zp-head,.zp-row{display:grid;grid-template-columns:34px 38px minmax(0,1fr) 78px 30px;gap:8px;align-items:center}
.zp-head{font-size:.7rem;font-weight:700;color:var(--mute);text-transform:uppercase;letter-spacing:.04em;padding:4px 8px 0}
.zp-head span:first-child{grid-column:1 / 3}.zp-head span:nth-child(2){grid-column:3}.zp-head span:nth-child(3){grid-column:4;text-align:right}
.zp-rows{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:6px}
.zp-row{padding:6px 8px;border:1px solid var(--line);border-radius:12px;background:#fff}
.zp-row.off{opacity:.5}
.zp-c{display:grid;place-items:center}.zp-c input{width:18px;height:18px;accent-color:var(--brand)}
.zp-th{width:36px;height:36px;object-fit:cover;border-radius:8px;background:#eee}
.zp-ext{width:36px;height:36px;border-radius:8px;color:#fff;font-size:.62rem;font-weight:800;display:grid;place-items:center;letter-spacing:.02em}
.zp-n{min-width:0;display:grid;gap:2px}
.zp-name{width:100%;font:600 .86rem Montserrat,system-ui,sans-serif;border:1px solid transparent;border-radius:8px;padding:5px 8px;background:transparent;box-sizing:border-box;text-overflow:ellipsis}
.zp-name:hover{border-color:var(--line)}.zp-name:focus{border-color:var(--brand);background:#fff;outline:none}
.zp-n small{font-size:.7rem;padding-left:8px}
.zp-s{font-size:.78rem;font-weight:700;color:var(--mute);text-align:right;white-space:nowrap}
.zp-x{position:static!important;width:26px;height:26px;border:0;border-radius:50%;background:#f1f1f7;cursor:pointer}
.zp-namebox{display:flex;align-items:center;gap:6px}.zp-namebox input{flex:1}.zp-namebox i{font-style:normal;font-weight:700;color:var(--mute)}
@media (max-width:900px){.zp-head,.zp-row{grid-template-columns:30px 34px minmax(0,1fr) 62px 28px}.qr-view{padding:12px}.zpws .md-stage,.qrws .md-stage{height:auto;flex:none}}

/* Tokens tab (account page) and the admin page inside the store's staff dashboard */
body.embed{background:#fff}body.embed .wrap{max-width:none;padding:12px}
.tk-bars{display:grid;gap:10px;margin-top:10px}
.tk-bar{display:grid;grid-template-columns:minmax(120px,200px) 1fr;gap:4px 12px;align-items:center}
.tk-bar span{font-weight:700;font-size:.88rem}.tk-bar i{display:block;height:10px;border-radius:999px;background:var(--brand)}.tk-bar small{grid-column:2;color:var(--mute);font-size:.78rem}
.tk-costs{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px;margin-top:10px}
.tk-cost{display:grid;gap:2px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:#fff}.tk-cost span{font-weight:700;font-size:.86rem}.tk-cost small{color:var(--mute);font-size:.76rem}
.tk-tiers{margin:18px 0}.tk-tiers h2{margin:0 0 10px}
.tk-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.tk-tier{position:relative;display:flex;flex-direction:column;gap:6px;padding:18px;border:1px solid var(--line);border-radius:18px;background:#fff}
.tk-tier.pop{border-color:var(--brand);box-shadow:0 8px 24px rgba(231,13,94,.12)}.tk-tier.on{background:#fafafe}
.tk-tier em{position:absolute;top:-10px;right:14px;background:var(--brand);color:#fff;font-style:normal;font-size:.7rem;font-weight:800;padding:3px 10px;border-radius:999px}
.tk-tier h3{margin:0}.tk-price{font-size:1.5rem}.tk-tier ul{list-style:none;margin:6px 0 10px;padding:0;display:grid;gap:6px;flex:1}.tk-tier li{font-size:.88rem;padding-left:20px;position:relative}.tk-tier li::before{content:"\2713";position:absolute;left:0;color:var(--brand);font-weight:800}
.tk-here{margin:0;font-weight:800;color:var(--brand)}
.tk-tier ul{align-content:start}

/* The store's own header and footer around the tools (only when the server says STORE_FRAME): the tools menu becomes a sub navigation under it */
:root{--ffs-h:73px}
header.ffs{position:sticky;top:0;z-index:40;background:#e70d5e;font-family:Montserrat,system-ui,sans-serif;line-height:20px}
header.ffs a,header.ffs a:hover,header.ffs button{text-decoration:none}
.ffs-in{max-width:1500px;margin:0 auto;padding:0 24px;display:flex;align-items:center;height:var(--ffs-h)}
.ffs-brand{display:flex;align-items:center;gap:8px;height:100%;text-decoration:none}.ffs-brand img{height:100%;width:auto;display:block}
.ffs-word{font-size:25px;font-weight:600;color:#fff;line-height:1}
.ffs-right{margin-left:auto;display:flex;align-items:center;gap:16px}
.ffs-nav{display:none;align-items:center;gap:32px;font-size:14px;font-weight:700}
.ffs-l{color:rgba(255,255,255,.5);text-transform:uppercase;text-decoration:none;transition:color .15s}.ffs-l:hover{color:#fff}.ffs-l.on{color:#f7f9ff}
.ffs-pill{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;line-height:20px;display:none;background:#000;color:#fff;border-radius:999px;padding:8px 16px;font-size:14px;font-weight:600;text-transform:uppercase;text-decoration:none;transition:background .15s}.ffs-pill:hover{background:rgba(0,0,0,.8)}
.ffs-cart{font-family:Montserrat,system-ui,sans-serif;line-height:20px;cursor:pointer;gap:6px;display:inline-flex;align-items:center;background:#fff;border:1px solid rgba(255,255,255,.2);color:#333;border-radius:999px;padding:8px 16px;font-size:14px;font-weight:600;text-transform:uppercase;text-decoration:none}.ffs-cart:hover{background:rgba(255,255,255,.9)}
.ffs-badge{display:inline-flex;align-items:center;justify-content:center;height:16px;min-width:16px;padding:0 4px;border-radius:999px;background:#e70d5e;color:#fff;font-size:10px;font-weight:600;line-height:1}
.ffs-badge[hidden]{display:none}
.ffs-cartframe{position:fixed;inset:0;width:100%;height:100%;border:0;background:transparent;z-index:2147483000;color-scheme:light}.ffs-cartframe[hidden]{display:none}
.ffs-burger{display:flex;width:36px;height:36px;flex:none;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:transparent;color:#fff;align-items:center;justify-content:center;cursor:pointer}.ffs-burger:hover{background:rgba(255,255,255,.1)}
.ffs-mobile{border-top:1px solid rgba(255,255,255,.15);background:#e70d5e;padding:12px 24px;display:flex;flex-direction:column;gap:4px}.ffs-mobile[hidden]{display:none}
.ffs-m{color:rgba(255,255,255,.9);padding:10px 12px;border-radius:8px;font-size:14px;font-weight:700;text-transform:uppercase;text-decoration:none}.ffs-m.on{color:#f7f9ff}.ffs-m:hover{background:rgba(255,255,255,.1)}
@media(min-width:640px){.ffs-right{gap:32px}.ffs-nav{display:flex}.ffs-pill{display:inline-block}.ffs-burger,.ffs-mobile{display:none!important}}
body.ffs-on header.top{top:var(--ffs-h)}
footer.ffs-foot{border-top:1px solid rgba(0,0,0,.1);background:#f1f1f1}
.ffs-fin{max-width:1500px;margin:0 auto;padding:56px 24px}
.ffs-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:32px}.ffs-first{grid-column:span 2}
@media(min-width:640px){.ffs-grid{grid-template-columns:repeat(5,1fr)}.ffs-first{grid-column:span 1}}
.ffs-mono{font:600 18px ui-monospace,Menlo,Consolas,monospace;color:#e70d5e;letter-spacing:-.025em}
.ffs-first p{margin:12px 0 0;max-width:220px;font-size:14px;color:#3b3b3b}
.ffs-grid h3{margin:0;font-size:14px;font-weight:600;color:#333}
.ffs-grid ul{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px;font-size:14px}.ffs-grid a{color:#3b3b3b;text-decoration:none}.ffs-grid a:hover{color:#000}
.ffs-bar{border-top:1px solid rgba(0,0,0,.1);background:#272727}.ffs-bin{max-width:1500px;margin:0 auto;padding:24px;display:flex;flex-direction:column;align-items:center;gap:16px;font-size:14px;color:#999}.ffs-bin p{margin:0}.ffs-bin a{color:#999;text-decoration:none}
@media(min-width:640px){.ffs-bin{flex-direction:row;justify-content:space-between}}
body.focus header.ffs,body.focus footer.ffs-foot,body.focus-crop header.ffs,body.focus-crop footer.ffs-foot{display:none}

/* ---------- /tools/pricing/checkout ---------- */
.co{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:32px;align-items:start;max-width:1080px;margin:0 auto;padding:36px 0 64px}
.co-main h1,.co-end h1{margin:0 0 18px;font-size:2rem;line-height:1.15;letter-spacing:-.02em;text-align:left}
.co-back{margin:0 0 10px;font-size:.88rem}.co-back a{color:var(--mute);text-decoration:none;font-weight:600}.co-back a:hover{color:var(--brand);text-decoration:none}
.co-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px;margin:0 0 16px;box-shadow:0 1px 2px rgba(20,20,40,.03)}
.co-h{display:flex;gap:14px;align-items:flex-start;margin:0 0 16px}.co-h h2{margin:0;font-size:1.05rem;line-height:1.3}
.co-n{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--chip);color:var(--brand);font-weight:700;font-size:.82rem}
.co-sub{margin:2px 0 0;color:var(--mute);font-size:.88rem}
.co-acct{display:flex;align-items:center;gap:14px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--soft)}
.co-av{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--brand);color:#fff;font-weight:700}
.co-acct-t{min-width:0;flex:1}.co-acct-t b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.95rem}.co-acct-t small{color:var(--mute);font-size:.8rem}
.co-link{background:none;border:0;padding:0;font:inherit;font-size:.86rem;font-weight:600;color:var(--brand);cursor:pointer;text-decoration:none;white-space:nowrap}.co-link:hover{text-decoration:underline}
.co-login p{margin:0 0 12px;color:var(--mute);font-size:.9rem}
.co-plans{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.co-plan{display:flex;align-items:center;gap:12px;text-align:left;padding:14px 16px;border:1.5px solid var(--line);border-radius:14px;background:#fff;font:inherit;color:var(--ink);cursor:pointer;transition:border-color .15s,background .15s}
.co-plan:hover{border-color:color-mix(in srgb,var(--brand) 45%,var(--line))}.co-plan.on{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 5%,#fff)}
.co-radio{flex:none;width:18px;height:18px;border-radius:50%;border:2px solid #c9c9d6;position:relative}.co-plan.on .co-radio{border-color:var(--brand)}.co-plan.on .co-radio::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--brand)}
.co-plan-b{flex:1;min-width:0}.co-plan-b b,.co-plan-p b{display:block;font-size:1rem}.co-plan-b small,.co-plan-p small{display:block;color:var(--mute);font-size:.78rem;line-height:1.35}.co-plan-p{text-align:right}
.co-promo{display:flex;gap:10px}.co-input{flex:1;min-width:0;padding:.7em 1em;border:1px solid var(--line);border-radius:12px;font:inherit;text-transform:uppercase;letter-spacing:.04em;background:#fff;color:var(--ink)}
.co-input::placeholder{text-transform:none;letter-spacing:0;color:#9a9aae}.co-input:focus{outline:2px solid color-mix(in srgb,var(--brand) 45%,transparent);outline-offset:1px;border-color:var(--brand)}
.co-pmsg{margin:8px 0 0;font-size:.84rem;min-height:1.2em}.co-pmsg.bad{color:var(--bad)}
.co-applied{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;border:1px solid color-mix(in srgb,var(--ok) 35%,var(--line));background:color-mix(in srgb,var(--ok) 7%,#fff);border-radius:12px}
.co-chip{display:flex;align-items:center;gap:8px;font-size:.88rem;color:var(--ok);flex-wrap:wrap}.co-chip svg{width:16px;height:16px}.co-chip b{letter-spacing:.04em}.co-chip span{color:var(--ink)}
.co-pay{min-height:72px}.co-pmsg:empty{display:none}.co-pay.off{opacity:.45;pointer-events:none;border:1px dashed var(--line);border-radius:14px;min-height:96px;background:var(--soft)}
.co-hold{margin:10px 0 0;color:var(--mute);font-size:.88rem}.co-err{margin:12px 0 0;color:var(--bad);font-size:.9rem}.co-err:empty{display:none}
.co-side{position:sticky;top:calc(var(--ffs-h,0px) + 76px);background:var(--soft);border:1px solid var(--line);border-radius:18px;padding:22px}
.co-side h2{margin:0 0 14px;font-size:1.05rem}
.co-sum-h{display:flex;align-items:center;gap:12px}.co-sum-h b{display:block;font-size:1rem}.co-sum-h small{color:var(--mute);font-size:.8rem}
.co-sum-ic{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--brand);color:#fff;font-weight:800;font-size:1.15rem}
.co-perks{list-style:none;margin:16px 0;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;gap:8px;font-size:.86rem}
.co-perks li{display:flex;gap:8px;align-items:flex-start}.co-perks svg{flex:none;width:16px;height:16px;margin-top:3px;color:var(--ok)}.co-perks.center{max-width:420px;margin:20px auto;text-align:left}
.co-lines{margin:0;display:grid;gap:8px;font-size:.92rem}.co-lines div{display:flex;justify-content:space-between;gap:12px}.co-lines dt{color:var(--mute)}.co-lines dd{margin:0;font-weight:600}
.co-lines .disc dd{color:var(--ok)}.co-lines .total{margin-top:6px;padding-top:12px;border-top:1px solid var(--line);font-size:1.1rem}.co-lines .total dt{color:var(--ink);font-weight:700}.co-lines .total dd{font-weight:800}
.co-then{margin:12px 0 16px;color:var(--mute);font-size:.8rem;line-height:1.5}
.btn.co-go{width:100%;padding:.9em 1.2em;font-size:1rem}.btn.co-go:disabled{opacity:.55;cursor:not-allowed}
.co-secure{display:flex;gap:8px;align-items:flex-start;margin:14px 0 0;color:var(--mute);font-size:.78rem;line-height:1.45}.co-secure svg{flex:none;width:15px;height:15px;margin-top:2px}
.co-legal{margin:10px 0 0;color:var(--mute);font-size:.75rem;line-height:1.5}.co-legal a{color:var(--mute);text-decoration:underline}.co-legal a:hover{color:var(--brand)}
.co-up{display:flex;align-items:center;gap:14px}.co-up>div{flex:1;padding:14px 16px;border:1.5px solid var(--line);border-radius:14px;background:#fff}.co-up-to{border-color:var(--brand)!important;background:color-mix(in srgb,var(--brand) 5%,#fff)!important}
.co-up small{display:block;color:var(--mute);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase}.co-up b{display:block;font-size:1.05rem}.co-up span{color:var(--mute);font-size:.85rem}.co-up-arrow{flex:none;color:var(--mute);font-size:1.3rem}
@media(max-width:520px){.co-up{flex-direction:column;align-items:stretch}.co-up-arrow{transform:rotate(90deg);align-self:center}}
.co-end{max-width:560px;margin:0 auto;padding:72px 0 88px;text-align:center}.co-end h1{text-align:center}.co-end .co-sub{font-size:1rem}
.co-ok{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:color-mix(in srgb,var(--ok) 12%,#fff);color:var(--ok);margin:0 auto 18px}.co-ok svg{width:30px;height:30px}
.co-end-b{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:22px}
@media(max-width:880px){.co{grid-template-columns:minmax(0,1fr);gap:8px;padding-top:22px}.co-side{position:static}.co-main h1{font-size:1.6rem}}
@media(max-width:520px){.co-plans{grid-template-columns:1fr}.co-card,.co-side{padding:18px}.co-promo{flex-direction:column}}
.co-av svg{width:18px;height:18px}