/* cp-tools.css – extra pieces for the newer CleanPDF tools. Loaded after doc-tools.css. */
/* Liberation fonts (SIL OFL): same widths as the PDF standard fonts Helvetica, Times New Roman and Courier */
@font-face { font-family: "PE Sans"; src: url(/assets/fonts/editor/pe-sans-regular.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "PE Sans"; src: url(/assets/fonts/editor/pe-sans-bold.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "PE Sans"; src: url(/assets/fonts/editor/pe-sans-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "PE Sans"; src: url(/assets/fonts/editor/pe-sans-bolditalic.woff2) format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "PE Serif"; src: url(/assets/fonts/editor/pe-serif-regular.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "PE Serif"; src: url(/assets/fonts/editor/pe-serif-bold.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "PE Serif"; src: url(/assets/fonts/editor/pe-serif-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "PE Serif"; src: url(/assets/fonts/editor/pe-serif-bolditalic.woff2) format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "PE Mono"; src: url(/assets/fonts/editor/pe-mono-regular.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "PE Mono"; src: url(/assets/fonts/editor/pe-mono-bold.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "PE Mono"; src: url(/assets/fonts/editor/pe-mono-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "PE Mono"; src: url(/assets/fonts/editor/pe-mono-bolditalic.woff2) format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }
/* handwriting fonts (SIL OFL / Apache 2.0, see /assets/fonts/signature/LICENSES.txt) */
@font-face { font-family: "SG Dancing Script"; src: url(/assets/fonts/signature/dancing-script.woff) format("woff"); font-display: swap; }
@font-face { font-family: "SG Great Vibes"; src: url(/assets/fonts/signature/great-vibes.woff) format("woff"); font-display: swap; }
@font-face { font-family: "SG Allura"; src: url(/assets/fonts/signature/allura.woff) format("woff"); font-display: swap; }
@font-face { font-family: "SG Sacramento"; src: url(/assets/fonts/signature/sacramento.woff) format("woff"); font-display: swap; }
@font-face { font-family: "SG Satisfy"; src: url(/assets/fonts/signature/satisfy.woff) format("woff"); font-display: swap; }
@font-face { font-family: "SG Alex Brush"; src: url(/assets/fonts/signature/alex-brush.woff) format("woff"); font-display: swap; }
@font-face { font-family: "SG Mr Dafoe"; src: url(/assets/fonts/signature/mr-dafoe.woff) format("woff"); font-display: swap; }
@font-face { font-family: "SG Homemade Apple"; src: url(/assets/fonts/signature/homemade-apple.woff) format("woff"); font-display: swap; }
@font-face { font-family: "SG Cedarville Cursive"; src: url(/assets/fonts/signature/cedarville-cursive.woff) format("woff"); font-display: swap; }
.dt code, .cpa code { padding: 1px 5px; border-radius: 4px; background: #edf2f7; font-size: .88em; }

/* header & footer, Bates (st-) */
.st-slot3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.st-slot { display: flex; flex-direction: column; gap: 3px; font-size: .72rem; font-weight: 600; color: var(--dt-soft); min-width: 0; }
.st-slot input { width: 100%; min-width: 0; min-height: 36px; padding: 5px 7px; border: 1px solid #cbd5e0; border-radius: 8px; font: inherit; font-size: .84rem; font-weight: 500; color: var(--dt-ink); }
.st-slot input:focus { outline: 2px solid var(--dt-acc); outline-offset: 0; border-color: var(--dt-acc); }
.st-tokens { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; font-size: .78rem; color: var(--dt-soft); }
.st-tokens .dt-chip { min-height: 28px; padding: 0 9px; font-size: .74rem; }
.st-color { width: 100%; height: 38px; padding: 2px; border: 1px solid #cbd5e0; border-radius: 8px; background: #fff; cursor: pointer; }
.st-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow: auto; }
.st-item { display: flex; align-items: center; gap: 4px; border: 1px solid var(--dt-line); border-radius: 10px; padding: 2px 4px 2px 2px; }
.st-item.is-on { border-color: var(--dt-acc); background: var(--dt-acc-soft); }
.st-pick { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 6px 8px; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.st-pick b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .84rem; color: var(--dt-ink); }
.st-pick small { font-size: .74rem; color: var(--dt-soft); font-variant-numeric: tabular-nums; }
.st-itbtns { display: flex; flex: none; }
.st-itbtns .dt-tb { min-width: 28px; height: 30px; padding: 0 4px; font-size: .9rem; }
.st-posgrid { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid #cbd5e0; border-radius: 9px; overflow: hidden; }
.st-posgrid button { min-height: 38px; padding: 4px; border: 0; border-right: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0; background: #fff; font: inherit; font-size: .76rem; font-weight: 600; color: #2d3748; cursor: pointer; }
.st-posgrid button:nth-child(3n) { border-right: 0; }
.st-posgrid button:nth-child(n+4) { border-bottom: 0; }
.st-posgrid button.is-on { background: var(--dt-acc-soft); color: var(--dt-acc-dark); box-shadow: inset 0 -2px 0 var(--dt-acc); }
.st-sample { margin: 0; font-size: .84rem; color: var(--dt-muted); }
.st-sample b { font-family: "Courier New", monospace; color: var(--dt-ink); font-size: .95rem; }
@media (max-width: 420px) { .st-slot3 { grid-template-columns: 1fr; } }
.dt-check > span { flex: 1 1 0; min-width: 0; }
.dt-check > span small { padding-left: 0; margin-top: 2px; flex-basis: auto; }
/* metadata (md-) */
.md-sheet { max-width: 820px; margin: 0 auto; display: flex; gap: 22px; align-items: flex-start; padding: 18px; border-radius: 14px; background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, .12); }
.md-thumb { flex: none; line-height: 0; }
.md-thumb canvas { max-width: 220px; height: auto !important; box-shadow: 0 1px 4px rgba(15, 23, 42, .2), 0 8px 20px rgba(15, 23, 42, .08); }
.md-cols { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.md-dl { margin: 8px 0 0; display: flex; flex-direction: column; gap: 0; }
.md-dl > div { display: grid; grid-template-columns: 130px 1fr; gap: 10px; padding: 6px 0; border-bottom: 1px solid #edf2f7; font-size: .86rem; }
.md-dl dt { color: var(--dt-soft); font-weight: 600; }
.md-dl dd { margin: 0; color: var(--dt-ink); overflow-wrap: anywhere; }
.dt-f.is-changed input { border-color: var(--dt-acc); background: var(--dt-acc-soft); }
.dt-f .md-now { display: inline; margin-left: 6px; padding: 0; }
@media (max-width: 700px) { .md-sheet { flex-direction: column; align-items: center; } .md-dl > div { grid-template-columns: 110px 1fr; } }
/* insert pages (ip-) */
.ip-grid { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; }
.ip-card { position: relative; width: 132px; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 6px; border-radius: 12px; }
.ip-card.is-new { background: var(--dt-acc-soft); box-shadow: inset 0 0 0 2px var(--dt-acc); }
.ip-img { width: 100%; max-height: 170px; display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 2px; box-shadow: 0 1px 3px rgba(15, 23, 42, .2), 0 6px 14px rgba(15, 23, 42, .08); overflow: hidden; }
.ip-img canvas, .ip-img img { display: block; max-width: 100%; max-height: 170px; object-fit: contain; }
.ip-img .dt-thumb-ph { box-shadow: none; }
.ip-num { font-size: .8rem; font-weight: 700; color: var(--dt-muted); font-variant-numeric: tabular-nums; }
.ip-new { position: absolute; left: 10px; top: 10px; padding: 2px 7px; border-radius: 999px; background: var(--dt-acc); color: #fff; font-size: .66rem; font-weight: 700; }
.ip-rm { position: absolute; right: 2px; top: 2px; width: 28px; height: 28px; border: 0; border-radius: 50%; background: #c53030; color: #fff; font-size: .8rem; cursor: pointer; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
.ip-gap { align-self: stretch; width: 26px; min-height: 120px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; background: none; cursor: pointer; }
.ip-gap span { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; border: 1.5px dashed #a0aec0; color: #718096; font-weight: 700; line-height: 1; background: #fff; transition: transform .12s; }
.ip-gap:hover span { border-color: var(--dt-acc); color: var(--dt-acc); transform: scale(1.12); }
.ip-gap.is-on span { border: 0; background: var(--dt-acc); color: #fff; transform: scale(1.2); box-shadow: 0 0 0 5px rgba(54, 102, 209, .2); }
.ip-gap.is-on { background: linear-gradient(var(--dt-acc), var(--dt-acc)) center / 2px 100% no-repeat; }
.ip-where { margin: 0; font-size: .92rem; color: var(--dt-ink); }
.ip-row { display: flex; align-items: flex-end; gap: 8px; }
.ip-count { width: 90px; flex: none; }
.ip-row .dt-btn2 { flex: 1; }
@media (max-width: 900px) { .ip-card { width: 104px; } .ip-img, .ip-img canvas, .ip-img img { max-height: 135px; } .ip-gap { width: 22px; min-height: 100px; } }
/* extract images (xi-) */
.xi-count { font-size: .84rem; font-weight: 600; color: var(--dt-muted); }
.xi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.xi-card { position: relative; display: flex; flex-direction: column; border-radius: 12px; background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, .15); border: 2px solid transparent; overflow: hidden; }
.xi-card.is-sel { border-color: var(--dt-acc); }
.xi-pick { position: relative; display: block; padding: 0; border: 0; background: none; cursor: pointer; }
.xi-img { display: flex; align-items: center; justify-content: center; height: 160px; padding: 8px; background: #f8fafc; }
.xi-img.is-alpha { background: repeating-conic-gradient(#e2e8f0 0 25%, #fff 0 50%) 0 0 / 16px 16px; }
.xi-img img { display: block; max-width: 100%; max-height: 144px; }
.xi-tick { position: absolute; top: 8px; left: 8px; width: 26px; height: 26px; border-radius: 50%; border: 2px solid #cbd5e0; background: #fff; color: transparent; font-weight: 800; font-size: .8rem; display: flex; align-items: center; justify-content: center; }
.xi-card.is-sel .xi-tick { border-color: var(--dt-acc); background: var(--dt-acc); color: #fff; }
.xi-meta { display: flex; flex-direction: column; padding: 8px 44px 8px 10px; font-size: .82rem; }
.xi-meta b { color: var(--dt-ink); font-variant-numeric: tabular-nums; }
.xi-meta small { color: var(--dt-soft); }
.xi-one { position: absolute; right: 6px; bottom: 6px; }
.xi-empty { max-width: 560px; margin: 40px auto; padding: 18px 20px; border-radius: 12px; background: #fff; text-align: center; color: var(--dt-muted); }
#xi-app[data-fmt=png] .xi-q { display: none; }
@media (max-width: 900px) { .xi-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; } .xi-img { height: 130px; } .xi-img img { max-height: 114px; } }
/* text to PDF (tp-) */
.tp-pastebox { max-width: 860px; margin: 1.1rem auto 0; }
.tp-or { display: flex; align-items: center; gap: 10px; margin: 0 0 .7rem; color: var(--dt-soft); font-size: .86rem; font-weight: 600; }
.tp-or::before, .tp-or::after { content: ""; flex: 1; height: 1px; background: var(--dt-line); }
.tp-paste { width: 100%; min-height: 150px; padding: 12px 14px; border: 1.5px solid #cbd5e0; border-radius: 12px; font: 14px/1.5 ui-monospace, Menlo, Consolas, monospace; color: var(--dt-ink); resize: vertical; background: #fff; }
.tp-paste:focus { outline: 2px solid var(--dt-acc); border-color: var(--dt-acc); }
.tp-pastebar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-top: 10px; }
.tp-pastebar .dt-seg { flex: 1; min-width: 260px; max-width: 420px; }
.tp-pastego { padding: 0 26px; }
#tp-app:not([data-kind=txt]) .tp-only-txt { display: none; }
/* HEIC to PDF (hp-) */
.hp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
.hp-card { display: flex; flex-direction: column; border-radius: 12px; background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, .15), 0 6px 14px rgba(15, 23, 42, .06); overflow: hidden; cursor: grab; }
.hp-card.sortable-ghost { opacity: .35; }
.hp-img { height: 170px; display: flex; align-items: center; justify-content: center; padding: 8px; background: #f8fafc; overflow: hidden; }
.hp-img img { display: block; max-width: 100%; max-height: 154px; transition: transform .2s; box-shadow: 0 1px 3px rgba(15, 23, 42, .2); }
.hp-bar { display: flex; align-items: center; gap: 2px; padding: 4px 6px; border-top: 1px solid var(--dt-line); }
.hp-num { flex: none; min-width: 22px; font-size: .82rem; font-weight: 700; color: var(--dt-muted); }
.hp-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .76rem; color: var(--dt-soft); }
.hp-addcard { align-items: center; justify-content: center; min-height: 212px; border: 2px dashed var(--dt-acc-line, #a9bfef); background: #f7fbff; box-shadow: none; cursor: default; }
#hp-app[data-page=fit] .hp-margin { }
@media (max-width: 900px) { .hp-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; } .hp-img { height: 140px; } .hp-img img { max-height: 124px; } }
/* fill form (ff-) */
.ff-pages { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.ff-page { position: relative; width: 100%; background: #fff; box-shadow: 0 1px 4px rgba(15, 23, 42, .18), 0 8px 24px rgba(15, 23, 42, .1); }
.ff-canvas, .ff-layer { position: absolute; inset: 0; }
.ff-canvas canvas { display: block; }
.ff-in { position: absolute; box-sizing: border-box; margin: 0; padding: 0 2px; border: 1px solid transparent; border-radius: 2px; background: transparent; color: #0b1f5c; font-family: Helvetica, Arial, sans-serif; line-height: 1.15; }
.ff-hl .ff-in { background: rgba(54, 102, 209, .1); border-color: rgba(54, 102, 209, .35); }
.ff-in:focus, .ff-in:focus-within { outline: 2px solid var(--dt-acc); outline-offset: 0; background: rgba(54, 102, 209, .06); }
.ff-in:disabled { background: rgba(160, 174, 192, .12); color: #4a5568; }
textarea.ff-in { resize: none; padding: 2px; overflow: auto; }
.ff-s { padding: 0; appearance: auto; }
.ff-c { display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; }
.ff-c input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.ff-c span { width: 78%; height: 78%; display: flex; align-items: center; justify-content: center; }
.ff-c input:checked + span::after { content: "✓"; font-weight: 700; color: #0b1f5c; font-size: 1.1em; line-height: 1; }
.ff-r input:checked + span::after { content: ""; width: 55%; height: 55%; border-radius: 50%; background: #0b1f5c; }
.ff-r { border-radius: 50%; }
.ff-progress { margin: 0; font-size: .9rem; color: var(--dt-muted); }
.ff-progress b { color: var(--dt-ink); font-variant-numeric: tabular-nums; }
.ff-bar { height: 8px; border-radius: 99px; background: #edf2f7; overflow: hidden; }
.ff-bar i { display: block; height: 100%; width: 0; background: #38a169; transition: width .2s; }
.ff-none, .ff-xfa { margin: 10px 12px 0; }
/* add text & image (an-) */
.an-stage { align-items: flex-start; }
.an-view { position: relative; margin: 0 auto; touch-action: pan-x pan-y pinch-zoom; }
.an-view canvas { display: block; }
.an-layer { position: absolute; inset: 0; }
.an-obj { position: absolute; box-sizing: border-box; cursor: move; touch-action: none; user-select: none; -webkit-user-select: none; outline: 1px dashed rgba(54, 102, 209, .45); outline-offset: 1px; }
.an-obj.is-sel { outline: 2px solid var(--dt-acc); }
.an-line { white-space: pre; overflow: visible; }
.an-img img { display: block; width: 100%; height: 100%; pointer-events: none; }
.an-h { position: absolute; right: -9px; bottom: -9px; width: 18px; height: 18px; border-radius: 50%; background: var(--dt-acc); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .3); cursor: nwse-resize; display: none; touch-action: none; }
.an-obj.is-sel .an-h { display: block; }
.an-addbtn { min-height: 38px; }
.an-ta { width: 100%; min-height: 84px; padding: 8px 10px; border: 1px solid #cbd5e0; border-radius: 8px; font: inherit; font-weight: 500; color: var(--dt-ink); resize: vertical; }
.an-row { display: flex; gap: 18px; }
.an-del { color: #c53030; border-color: #feb2b2; }
@media (max-width: 900px) { .an-h { width: 24px; height: 24px; right: -12px; bottom: -12px; } .an-addbtn { padding: 0 10px; } }
/* PDF reader (rd-) */
.rd-work { flex-direction: column; height: calc(100vh - var(--header-h, 64px) - 24px); min-height: 520px; }
.rd-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 6px 8px; background: #fff; border-bottom: 1px solid var(--dt-line); }
.rd-grp { display: flex; align-items: center; gap: 2px; }
.rd-grp:first-child { flex: 1; min-width: 0; }
.rd-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .88rem; font-weight: 600; color: var(--dt-ink); padding-left: 4px; }
.rd-count { font-size: .86rem; color: var(--dt-muted); padding: 0 2px; }
.rd-zoomsel { height: 34px; border: 1px solid #cbd5e0; border-radius: 8px; background: #fff; font: inherit; font-size: .84rem; padding: 0 4px; }
.rd-zoompct { min-width: 40px; font-size: .76rem; color: var(--dt-soft); text-align: center; font-variant-numeric: tabular-nums; }
.rd-search { width: 170px; height: 34px; padding: 0 10px; border: 1px solid #cbd5e0; border-radius: 8px; font: inherit; font-size: .86rem; }
.rd-search:focus { outline: 2px solid var(--dt-acc); border-color: var(--dt-acc); }
.rd-hits { min-width: 0; font-size: .76rem; color: var(--dt-soft); padding: 0 4px; white-space: nowrap; }
.rd-tools [aria-pressed=true] { background: var(--dt-acc-soft); color: var(--dt-acc-dark); }
.rd-body { flex: 1; min-height: 0; display: flex; }
.rd-side { width: 0; flex: none; overflow: hidden; display: flex; flex-direction: column; background: #fff; border-right: 1px solid var(--dt-line); transition: width .2s; }
.rd.rd-side-open .rd-side { width: 190px; }
.rd-tabs { margin: 8px; flex: none; }
.rd-tabs button { min-height: 32px; font-size: .78rem; }
.rd-tabs button:disabled { opacity: .4; cursor: default; }
.rd-thumbs { flex: 1; overflow-y: auto; padding: 4px 22px 14px; display: flex; flex-direction: column; gap: 12px; }
.rd-thumb { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px; border: 2px solid transparent; border-radius: 6px; background: none; cursor: pointer; }
.rd-thumb.is-on { border-color: var(--dt-acc); background: var(--dt-acc-soft); }
.rd-tim { display: block; width: 100%; background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, .25); overflow: hidden; }
.rd-thumb small { font-size: .72rem; color: var(--dt-muted); font-weight: 600; }
.rd-outline { flex: 1; overflow-y: auto; padding: 0 8px 14px; font-size: .84rem; }
.rd-outline ul { margin: 0; padding-left: 12px; list-style: none; }
.rd-outline > ul { padding-left: 0; }
.rd-outline button { display: block; width: 100%; padding: 5px 6px; border: 0; border-radius: 6px; background: none; font: inherit; text-align: left; color: var(--dt-ink); cursor: pointer; line-height: 1.3; }
.rd-outline button:hover { background: #f1f5f9; color: var(--dt-acc-dark); }
.rd-viewer { position: relative; flex: 1; min-width: 0; overflow: auto; background: #e8ecf2; outline: none; }
.rd-pages { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 14px; min-width: min-content; }
.rd-page { position: relative; flex: none; background: #fff; box-shadow: 0 1px 4px rgba(15, 23, 42, .18), 0 6px 18px rgba(15, 23, 42, .08); }
.rd-page canvas { display: block; }
.rd-pnum { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #cbd5e0; font-size: 2rem; font-weight: 700; }
.rd-links { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.rd-links a { position: absolute; pointer-events: auto; }
.rd-links a:hover { background: rgba(255, 230, 0, .25); }
.rd .textLayer { position: absolute; inset: 0; overflow: hidden; line-height: 1; text-align: initial; -webkit-text-size-adjust: none; text-size-adjust: none; forced-color-adjust: none; transform-origin: 0 0; z-index: 2; opacity: 1; }
.rd .textLayer span, .rd .textLayer br { color: transparent; position: absolute; white-space: pre; cursor: text; transform-origin: 0% 0%; }
.rd .textLayer ::selection { background: rgba(0, 90, 255, .3); }
.rd .textLayer .endOfContent { display: block; position: absolute; inset: 100% 0 0; z-index: -1; cursor: default; user-select: none; }
.rd .textLayer .rd-hl { color: transparent; background: rgba(255, 200, 0, .45); border-radius: 2px; padding: 0; }
.rd .textLayer .rd-hl.is-cur { background: rgba(255, 120, 0, .6); box-shadow: 0 0 0 2px rgba(255, 120, 0, .5); }
.rd .textLayer .rd-hlspan { background: rgba(255, 200, 0, .35); }
.rd-night .rd-viewer { background: #111827; }
.rd-night .rd-page canvas { filter: invert(.92) hue-rotate(180deg); }
.rd-night .rd-page { background: #1f2937; }
.rd-max .rd-work, .rd-work:fullscreen { position: fixed; inset: 0; z-index: 4000; height: 100vh; border-radius: 0; }
.rd-work:fullscreen { height: 100%; }
@media (max-width: 900px) {
    .rd-work { height: calc(100vh - var(--header-h, 56px) - 8px); height: calc(100dvh - var(--header-h, 56px) - 8px); }
    .rd-side { position: absolute; z-index: 5; top: 0; bottom: 0; left: 0; box-shadow: 6px 0 18px rgba(0, 0, 0, .15); }
    .rd-body { position: relative; }
    .rd.rd-side-open .rd-side { width: 170px; }
    .rd-find { order: 9; flex: 1 1 100%; }
    .rd-search { flex: 1; width: auto; }
    .rd-zoompct, .rd-zoomsel { display: none; }
    .rd-pages { padding: 8px; gap: 10px; }
}
html.app-mode .rd-work { height: calc(100vh - var(--apx-top, 56px) - var(--apx-tabs, 62px) - 8px); }
/* placement engine (pl-): text, marks and images placed on pages */
.pl-page { position: relative; }
.pl-layer { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.pl-armed .pl-layer { pointer-events: auto; cursor: crosshair; }
.pl-obj { position: absolute; pointer-events: auto; cursor: move; touch-action: none; user-select: none; -webkit-user-select: none; box-sizing: content-box; }
.pl-obj:hover { outline: 1px dashed rgba(54, 102, 209, .6); }
.pl-obj.is-sel { outline: 2px solid var(--dt-acc); outline-offset: 1px; }
.pl-t { display: inline-block; margin: 0; padding: 0; white-space: pre; min-width: 3px; outline: none; vertical-align: top; }
.pl-obj.is-edit { cursor: text; }
.pl-t[contenteditable=true] { user-select: text; -webkit-user-select: text; cursor: text; caret-color: var(--dt-acc); }
.pl-mark svg { display: block; width: 100%; height: 100%; }
.pl-img img { display: block; width: 100%; height: 100%; pointer-events: none; }
.pl-h, .pl-x { position: absolute; display: none; padding: 0; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .3); }
.pl-h { right: -9px; bottom: -9px; width: 16px; height: 16px; border-radius: 50%; background: var(--dt-acc); cursor: nwse-resize; touch-action: none; }
.pl-x { right: -11px; top: -24px; width: 22px; height: 22px; border-radius: 50%; background: #c53030; color: #fff; font-size: 11px; line-height: 1; cursor: pointer; }
.pl-obj.is-sel .pl-h, .pl-obj.is-sel .pl-x { display: block; }
.pl-tools { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 10px; background: #fff; border-bottom: 1px solid var(--dt-line); }
.pl-tool { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 12px; border: 1px solid #cbd5e0; border-radius: 9px; background: #fff; font: inherit; font-size: .86rem; font-weight: 600; color: #2d3748; cursor: pointer; }
.pl-tool svg { width: 18px; height: 18px; }
.pl-tool:hover { border-color: var(--dt-acc); color: var(--dt-acc-dark); }
.pl-tool.is-on { background: var(--dt-acc); border-color: var(--dt-acc); color: #fff; }
.pl-armhint { margin: 0; padding: 7px 12px; background: #fffbea; border-bottom: 1px solid #f6e05e; color: #744210; font-size: .84rem; font-weight: 600; }
.pl-inks { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pl-ink { width: 28px; height: 28px; padding: 0; border-radius: 50%; border: 2px solid #fff; background: var(--ink); box-shadow: 0 0 0 1px #cbd5e0; cursor: pointer; }
.pl-ink.is-on { box-shadow: 0 0 0 2px var(--dt-acc); }
.pl-inks input[type=color] { width: 34px; height: 30px; padding: 1px; border: 1px solid #cbd5e0; border-radius: 8px; background: #fff; cursor: pointer; }
.pl-bi button { min-height: 36px; font-size: 1rem; }
.pl-bi button:disabled { opacity: .4; cursor: default; }
.an-view { touch-action: pan-x pan-y pinch-zoom; }
.an-view canvas { display: block; }
@media (max-width: 900px) { .pl-tool { padding: 0 9px; min-height: 36px; font-size: .8rem; } .pl-h { width: 22px; height: 22px; right: -12px; bottom: -12px; } .pl-x { width: 26px; height: 26px; top: -30px; } }
/* draggable header, footer and Bates labels */
.st-view { position: relative; }
.st-view canvas { display: block; }
.st-ov { position: absolute; inset: 0; }
.st-lab { position: absolute; white-space: pre; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; outline: 1px dashed rgba(54, 102, 209, .75); outline-offset: 2px; border-radius: 1px; }
.st-lab:hover, .st-lab.is-drag { outline: 2px solid var(--dt-acc); background: rgba(54, 102, 209, .08); }
.st-lab.is-drag { cursor: grabbing; }
.st-txt { position: relative; }
.st-box { position: absolute; background: #fff; border: 1px solid; box-sizing: border-box; }
.st-rule { position: absolute; height: 1px; pointer-events: none; }
.dt-hint .dt-link { display: inline; padding: 0; margin-left: 6px; font-size: inherit; }
.ff-info { margin: 10px 12px 0; padding: 12px 14px; border-radius: 10px; background: #ebf4ff; border: 1px solid #bee3f8; color: #2c5282; }
.ff-page .pl-layer { z-index: 5; }
.pl-t:empty::before { content: "Type here"; color: rgba(54, 102, 209, .55); }
.pl-t:empty { min-width: 4em; }