/* PDF Editor (croppers/new_ui/editor.html, landing/js/new-ui/editor.js). The landing part is the shared
   tool-page design: the hero band (.th), its drop card (.dropcard, .dropzone), the done card (.done) and
   the guide sections (.hsteps, .toollist, .faq) all come from tool.css, so this file only adds what is the
   editor's own. The editor itself is a full-screen layer over the site while a file is open.
   Tokens from desk.css, light and dark. */
.editor-page .th__copy h1 em { font-style: normal; color: var(--primary-text); }

/* ── The header over the hero ──────────────────────────────────────────────────────────────────
   tool.css turns .sc-header clear at the top of the page and relies on the page's own script to put
   the band back on the first scroll. tool.css keys its own "hero gone" rule to #stageEmpty, which
   this page does not have, so the same thing is said here with the band this page hides: while a
   file is open (or the download screen is up) there is no hero for the header to show through. */
body.editor-active .sc-header,
body:has(#edHero[hidden]) .sc-header { background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: saturate(1.4) blur(8px); border-bottom-color: var(--border); box-shadow: 0 10px 26px -22px rgba(10,29,41,.6); }

/* The tools this editor has, under the drop area: what the page offers, before a word is read */
.ed-drop__tools { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; }
.ed-drop__tools span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: var(--surface-alt); border: 1px solid var(--border); font-size: var(--fs-label); font-weight: var(--fw-semibold); color: var(--text-muted); }
.ed-drop__tools svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ed-features .tool-card { cursor: default; }
/* The drop card holds the picker, the chips and the three steps, so its drop area is taller than
   the shared one; the chips keep the card from running past the hero copy beside it. */
.editor-page .ed-drop { padding-bottom: 22px; }
.editor-page .ed-drop__tools { margin-top: 16px; }
.editor-page #edDone { border: none; margin: 10px auto 0; }
.editor-page #edDone .done__actions .btn svg { width: 16px; height: 16px; }
body.editor-active { overflow: hidden; }

/* ── The full-screen editor ─────────────────────────────── */
.editor { position: fixed; inset: 0; z-index: 1500; display: flex; flex-direction: column; background: var(--bg); color: var(--text); font-size: var(--fs-body); }
.editor[hidden] { display: none !important; }
.editor svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Top bar */
.ed-top { height: 52px; flex-shrink: 0; display: flex; align-items: center; gap: 6px; padding: 0 12px 0 8px; background: var(--surface); border-bottom: 1px solid var(--border); }
.ed-top__btn { width: 34px; height: 34px; border: 1px solid transparent; border-radius: var(--r-sm); background: transparent; color: var(--text-muted); display: inline-grid; place-items: center; cursor: pointer; font: inherit; font-size: 18px; line-height: 1; }
.ed-top__btn svg { width: 17px; height: 17px; }
.ed-top__btn:hover:not(:disabled) { background: var(--primary-soft); border-color: var(--primary-soft-border); color: var(--primary-text); }
.ed-top__btn:disabled { opacity: .35; cursor: default; }
.ed-top__close svg { width: 15px; height: 15px; stroke-width: 2.4; }
.ed-top__brand img { width: 26px; height: 26px; border-radius: 7px; }
.ed-top__file { display: flex; flex-direction: column; min-width: 0; max-width: 260px; margin-right: 8px; }
.ed-top__name { font-weight: var(--fw-bold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-body-lg); }
.ed-top__meta { font-size: var(--fs-small); color: var(--text-faint); white-space: nowrap; }
.ed-top__group { display: inline-flex; align-items: center; gap: 2px; padding: 0 4px; border-left: 1px solid var(--border); }
.ed-top__pageno { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-label); font-weight: var(--fw-semibold); color: var(--text-muted); white-space: nowrap; }
.ed-top__pageno input { width: 44px; height: 30px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--input-bg); color: var(--text); font: inherit; font-weight: var(--fw-bold); text-align: center; -moz-appearance: textfield; }
.ed-top__pageno input::-webkit-outer-spin-button, .ed-top__pageno input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ed-top__pageno input:focus { outline: none; border-color: var(--primary); }
.ed-top__pageno b { color: var(--text); }
.ed-top__zoomlbl { min-width: 52px; height: 30px; border: 1px solid transparent; border-radius: var(--r-sm); background: transparent; color: var(--text); font: inherit; font-size: var(--fs-label); font-weight: var(--fw-bold); cursor: pointer; }
.ed-top__zoomlbl:hover { background: var(--primary-soft); color: var(--primary-text); }
.ed-top__spacer { flex: 1; }
.ed-plan { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 16px; border: 1px solid var(--border-strong); background: var(--surface-alt); color: var(--text-muted); font: inherit; font-size: var(--fs-label); cursor: pointer; white-space: nowrap; }
.ed-plan svg { width: 15px; height: 15px; color: var(--accent); }
.ed-plan b { color: var(--primary-text); }
.ed-plan:hover { border-color: var(--primary); }
.ed-plan[data-unlocked="1"] { background: var(--accent-soft); border-color: var(--accent); color: var(--warning-text); }
.ed-save { height: 36px; border-radius: 18px; padding: 0 18px; font-size: var(--fs-body-lg); }
.ed-save svg { width: 16px; height: 16px; }

/* Body: tool rail, stage, side panel */
.ed-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 72px minmax(0, 1fr) 300px; }
.ed-rail { display: flex; flex-direction: column; align-items: stretch; gap: 2px; padding: 8px 6px; background: var(--surface); border-right: 1px solid var(--border); overflow-y: auto; scrollbar-width: none; }
.ed-rail::-webkit-scrollbar { display: none; }
.ed-tool { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 2px 6px; border: 1px solid transparent; border-radius: var(--r-sm); background: transparent; color: var(--text-muted); font: inherit; font-size: 10px; font-weight: var(--fw-semibold); cursor: pointer; }
.ed-tool svg { width: 20px; height: 20px; stroke-width: 1.8; }
.ed-tool:hover { background: var(--surface-alt); color: var(--text); }
.ed-tool.is-on { background: var(--primary-soft); border-color: var(--primary-soft-border); color: var(--primary-text); }
.ed-rail__sep { height: 1px; margin: 4px 6px; background: var(--border); }

.ed-stage { position: relative; overflow: auto; background: var(--surface-alt); outline: none; scrollbar-width: thin; }
.ed-stage.is-dragging-file { box-shadow: inset 0 0 0 3px var(--primary); }
.ed-pages { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 22px 22px 90px; min-width: max-content; margin: 0 auto; }
.ed-page { position: relative; background: #fff; box-shadow: 0 6px 24px -10px rgba(0,0,0,.45), 0 0 0 1px var(--border); flex-shrink: 0; }
.ed-page.is-current { box-shadow: 0 6px 24px -10px rgba(0,0,0,.45), 0 0 0 2px var(--primary); }
.ed-page__canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.ed-page__num { position: absolute; left: 0; right: 0; bottom: -18px; text-align: center; font-size: var(--fs-small); color: var(--text-faint); pointer-events: none; }
.ed-page__forms, .ed-page__layer, .ed-page__draw, .ed-page__text { position: absolute; inset: 0; }
.ed-page__forms { z-index: 2; pointer-events: none; }
.ed-page__text { z-index: 3; pointer-events: none; }
.ed-page__layer { z-index: 4; pointer-events: none; }
.ed-field, .ed-obj, .ed-marquee { pointer-events: auto; }
body:not(.ed-tool-select) .ed-field { pointer-events: none; }
.ed-field--moving { background: rgba(3, 61, 99, .12); border: 1.5px solid var(--primary); cursor: move; }
.ed-field--moving .ed-handle { pointer-events: auto; }
.ed-page__draw { z-index: 5; pointer-events: none; width: 100%; height: 100%; overflow: visible; }
.ed-page[data-cursor="cross"] { cursor: crosshair; }
.ed-page[data-cursor="text"] { cursor: text; }
.ed-page[data-cursor="pen"] { cursor: crosshair; }

/* Existing form fields (pdf.js widget annotations) drawn as inputs over the page */
.ed-field { position: absolute; box-sizing: border-box; font-family: Helvetica, Arial, sans-serif; color: #000; background: rgba(17, 154, 212, .12); border: 1px solid rgba(17, 154, 212, .55); border-radius: 2px; padding: 0 3px; outline: none; }
.ed-field:focus, .ed-field.is-focus { background: rgba(255, 255, 255, .9); border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft); }
.ed-field[readonly], .ed-field[disabled] { background: rgba(120, 130, 140, .12); border-style: dashed; }
textarea.ed-field { resize: none; line-height: 1.25; padding: 2px 3px; }
select.ed-field { padding: 0 2px; }
.ed-field--check { display: grid; place-items: center; padding: 0; cursor: pointer; }
.ed-field--check input { appearance: none; -webkit-appearance: none; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.ed-field--check input:checked { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 80% no-repeat; }
.ed-field--radio input:checked { background: radial-gradient(circle, #000 38%, transparent 42%); }
.ed-field--radio { border-radius: 50%; }
.ed-field.is-selected { box-shadow: 0 0 0 2px var(--primary); }
body.ed-tool-select .ed-page__forms .ed-field { pointer-events: auto; }

/* Objects placed by the user */
.ed-obj { position: absolute; box-sizing: border-box; touch-action: none; }
.ed-obj__inner { position: absolute; left: 50%; top: 50%; transform-origin: center; }
.ed-obj.is-selected { outline: 1.5px solid var(--primary); outline-offset: 1px; }
.ed-obj:hover:not(.is-selected) { outline: 1px dashed var(--primary-soft-border); outline-offset: 1px; }
.ed-obj--text .ed-obj__text { width: 100%; height: 100%; white-space: pre-wrap; word-wrap: break-word; overflow: hidden; outline: none; cursor: text; }
.ed-obj--text.is-editing { outline: 1.5px solid var(--focus); background: rgba(255,255,255,.35); }
.ed-obj--image img, .ed-obj--sign img { width: 100%; height: 100%; display: block; object-fit: fill; pointer-events: none; user-select: none; }
.ed-obj--highlight { mix-blend-mode: multiply; }
.ed-obj--whiteout { background: #fff; }
.ed-obj--redact { background: #111; }
.ed-obj--redact::after { content: "REDACT"; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; color: #ff5e5e; font-size: 9px; font-weight: 800; letter-spacing: .12em; pointer-events: none; opacity: .9; }
.ed-obj--link { border: 1.5px dashed #2f7fd1; background: rgba(47, 127, 209, .08); }
.ed-obj--link::after { content: ""; position: absolute; right: -6px; top: -6px; width: 14px; height: 14px; border-radius: 50%; background: #2f7fd1 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E") center / 9px no-repeat; }
.ed-obj--shape svg, .ed-obj--ink svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ed-obj--field { background: rgba(230, 148, 76, .14); border: 1px solid var(--accent); border-radius: 2px; font-family: Helvetica, Arial, sans-serif; color: #000; overflow: hidden; }
.ed-obj--field .ed-obj__lbl { position: absolute; left: 0; top: -14px; font-size: 9px; font-weight: 700; color: var(--warning-text); white-space: nowrap; background: var(--surface); padding: 0 4px; border-radius: 3px; border: 1px solid var(--border); }
.ed-obj--field[data-kind="checkbox"], .ed-obj--field[data-kind="radio"] { display: grid; place-items: center; }
.ed-obj--field[data-kind="radio"] { border-radius: 50%; }
.ed-obj--field[data-kind="text"] > span, .ed-obj--field[data-kind="dropdown"] > span { position: absolute; left: 3px; right: 3px; top: 50%; transform: translateY(-50%); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ed-obj--field[data-kind="dropdown"]::after { content: "▾"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 10px; }
.ed-handle { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 1.5px solid var(--primary); box-shadow: 0 1px 3px rgba(0,0,0,.25); z-index: 6; }
.ed-handle[data-h="nw"] { left: -6px; top: -6px; cursor: nwse-resize; } .ed-handle[data-h="n"] { left: calc(50% - 5px); top: -6px; cursor: ns-resize; } .ed-handle[data-h="ne"] { right: -6px; top: -6px; cursor: nesw-resize; }
.ed-handle[data-h="e"] { right: -6px; top: calc(50% - 5px); cursor: ew-resize; } .ed-handle[data-h="se"] { right: -6px; bottom: -6px; cursor: nwse-resize; } .ed-handle[data-h="s"] { left: calc(50% - 5px); bottom: -6px; cursor: ns-resize; }
.ed-handle[data-h="sw"] { left: -6px; bottom: -6px; cursor: nesw-resize; } .ed-handle[data-h="w"] { left: -6px; top: calc(50% - 5px); cursor: ew-resize; }
.ed-obj--line .ed-handle { display: none; } .ed-obj--line .ed-handle[data-h="p1"], .ed-obj--line .ed-handle[data-h="p2"] { display: block; cursor: move; }
.ed-page__text .ed-run { position: absolute; border: 1px dashed transparent; border-radius: 2px; pointer-events: auto; cursor: text; }
.ed-page__text .ed-run:hover { border-color: var(--focus); background: rgba(17, 154, 212, .1); }
body.ed-tool-text .ed-page__text { pointer-events: auto; }
.ed-marquee { position: absolute; border: 1.5px dashed var(--primary); background: rgba(3, 61, 99, .08); pointer-events: none !important; z-index: 7; }

/* Side panel */
.ed-side { display: flex; flex-direction: column; min-height: 0; background: var(--surface); border-left: 1px solid var(--border); }
.ed-side__head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 10px; border-bottom: 1px solid var(--border); }
.ed-side__head h2 { font-size: var(--fs-body-lg); font-weight: var(--fw-bold); }
.ed-side__close { display: none; width: 28px; height: 28px; border: none; border-radius: 50%; background: transparent; color: var(--text-muted); cursor: pointer; }
.ed-side__close svg { width: 14px; height: 14px; }
.ed-side__body { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 14px 20px; display: flex; flex-direction: column; gap: 12px; scrollbar-width: thin; }
.ed-side__foot { flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; padding: 10px 14px 12px; border-top: 1px solid var(--border); }
.ed-side__premium { justify-content: center; }
.ed-side__premium svg { width: 14px; height: 14px; }
.ed-side .field-label { font-size: var(--fs-caption); font-weight: var(--fw-bold); letter-spacing: .08em; color: var(--text-faint); }
.ed-prop { display: grid; gap: 6px; }
.ed-prop--row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ed-prop--row .field-label { flex: 1; }
.ed-prop .input, .ed-prop .select { height: 32px; }
.ed-prop textarea.input { height: 84px; }
.ed-prop input[type="color"] { width: 34px; height: 28px; padding: 0; border: 1px solid var(--border-strong); border-radius: 7px; background: var(--input-bg); cursor: pointer; }
.ed-prop input[type="range"] { flex: 1; accent-color: var(--primary); }
.ed-prop output { min-width: 36px; text-align: right; font-size: var(--fs-label); font-weight: var(--fw-semibold); }
.ed-swatches { display: flex; gap: 6px; flex-wrap: wrap; }
.ed-swatch { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--border-strong); cursor: pointer; }
.ed-swatch.is-on { box-shadow: 0 0 0 2px var(--primary); }
.ed-swatch--none { background: linear-gradient(135deg, transparent 45%, var(--danger) 45%, var(--danger) 55%, transparent 55%); }
.ed-seg { display: flex; background: var(--surface-alt); border: 1px solid var(--border); border-radius: 17px; padding: 3px; gap: 3px; }
.ed-seg button { flex: 1; height: 26px; border: none; border-radius: 13px; background: transparent; font: inherit; font-size: var(--fs-label); font-weight: var(--fw-medium); color: var(--text-muted); cursor: pointer; display: inline-grid; place-items: center; }
.ed-seg button svg { width: 15px; height: 15px; }
.ed-seg button.on { background: var(--surface); color: var(--primary-text); font-weight: var(--fw-semibold); box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.ed-hint { font-size: var(--fs-label); color: var(--text-muted); line-height: 1.5; padding: 9px 11px; border-radius: var(--r-sm); background: var(--primary-soft); color: var(--primary-text); display: flex; gap: 8px; align-items: flex-start; }
.ed-hint svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 1px; }
.ed-hint--warn { background: var(--warning-soft); color: var(--warning-text); }
.ed-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.ed-actions .btn { flex: 1; min-width: 0; }
.ed-side .btn--danger { color: var(--danger-text); border-color: var(--danger); }
.ed-side .btn--danger:hover { background: var(--danger-soft); }
.ed-kinds { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ed-kinds button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 9px 4px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-alt); color: var(--text-muted); font: inherit; font-size: var(--fs-small); font-weight: var(--fw-semibold); cursor: pointer; }
.ed-kinds button svg { width: 18px; height: 18px; }
.ed-kinds button.on { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-text); }
.ed-kinds button:hover { border-color: var(--primary-soft-border); }
.ed-fieldlist { display: grid; gap: 4px; }
.ed-fieldlist button { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); font: inherit; font-size: var(--fs-label); color: var(--text); cursor: pointer; text-align: left; }
.ed-fieldlist button:hover { border-color: var(--primary-soft-border); background: var(--primary-soft); }
.ed-fieldlist button span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-fieldlist button small { color: var(--text-faint); }
.ed-summary { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; font-size: var(--fs-label); background: var(--surface-alt); border-radius: var(--r-md); padding: 10px 12px; }
.ed-summary span:nth-child(odd) { color: var(--text-muted); }
.ed-summary span:nth-child(even) { font-weight: var(--fw-bold); text-align: right; }

/* Pages panel: thumbnails */
.ed-thumbs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ed-thumb { position: relative; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-alt); padding: 6px 6px 4px; cursor: pointer; }
.ed-thumb.is-current { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft); }
.ed-thumb.is-drop { border-color: var(--primary); border-style: dashed; }
.ed-thumb.is-dragging { opacity: .4; }
.ed-thumb__img { width: 100%; aspect-ratio: 3 / 4; background: #fff; border: 1px solid var(--border); display: grid; place-items: center; overflow: hidden; }
.ed-thumb__img canvas { max-width: 100%; max-height: 100%; }
.ed-thumb__num { text-align: center; font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--text-muted); margin-top: 4px; }
.ed-thumb__acts { position: absolute; top: 8px; right: 8px; display: none; gap: 2px; }
.ed-thumb:hover .ed-thumb__acts, .ed-thumb.is-current .ed-thumb__acts { display: flex; }
.ed-thumb__acts button { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); display: grid; place-items: center; cursor: pointer; }
.ed-thumb__acts button svg { width: 11px; height: 11px; }
.ed-thumb__acts button:hover { color: var(--primary-text); border-color: var(--primary); }

/* Status line and dialogs */
.ed-status { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 20; max-width: min(92vw, 560px); padding: 7px 14px; border-radius: 10px; background: rgba(10, 29, 41, .92); color: #fff; font-size: var(--fs-label); font-weight: var(--fw-semibold); pointer-events: none; opacity: 0; transition: opacity .15s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ed-status.is-on { opacity: 1; }
.ed-status.is-err { background: var(--danger); }
.ed-props-toggle { display: none; }
.ed-busy { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; background: rgba(8, 20, 33, .45); }
.ed-busy[hidden] { display: none; }
.ed-busy__box { display: grid; gap: 14px; justify-items: center; padding: 26px 30px; border-radius: var(--r-lg); background: var(--surface); box-shadow: 0 24px 60px rgba(0,0,0,.3); font-weight: var(--fw-semibold); }
.ed-modal { position: fixed; inset: 0; z-index: 1600; display: grid; place-items: center; padding: 16px; background: rgba(8, 20, 33, .55); }
.ed-modal[hidden] { display: none; }
.ed-modal__box { position: relative; width: min(560px, 100%); max-height: 92vh; overflow-y: auto; border-radius: var(--r-lg); background: var(--surface); color: var(--text); box-shadow: 0 24px 60px rgba(0,0,0,.3); display: grid; gap: 14px; }
.ed-modal__box h2 { font-size: 20px; font-weight: var(--fw-bold); }
.ed-modal__close { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--text-muted); cursor: pointer; }
.ed-modal__close:hover { background: var(--surface-alt); color: var(--text); }
.ed-modal__close svg { width: 15px; height: 15px; }
.ed-modal__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ed-modal__actions .grow { flex: 1; }
.ed-modal .check { font-size: var(--fs-label); }
.ed-sig__pane { display: grid; gap: 10px; }
#edSigCanvas { width: 100%; height: auto; border: 1px dashed var(--border-strong); border-radius: var(--r-md); background: #fff; touch-action: none; cursor: crosshair; }
.ed-sig__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: var(--fs-label); color: var(--text-muted); }
.ed-sig__row input[type="color"] { width: 30px; height: 24px; padding: 0; border: 1px solid var(--border-strong); border-radius: 6px; margin-left: 6px; vertical-align: middle; }
.ed-sig__fonts { display: grid; gap: 8px; }
.ed-sig__font { height: 64px; border: 1px solid var(--border); border-radius: var(--r-md); background: #fff; color: #0a1d29; display: grid; place-items: center; font-size: 30px; cursor: pointer; overflow: hidden; }
.ed-sig__font.is-on { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft); }
.ed-sig__preview { min-height: 90px; border: 1px dashed var(--border-strong); border-radius: var(--r-md); display: grid; place-items: center; background: repeating-conic-gradient(#eee 0 25%, #fff 0 50%) 0 0 / 16px 16px; }
.ed-sig__preview img { max-width: 100%; max-height: 160px; }
.ed-sig__saved { display: flex; gap: 8px; flex-wrap: wrap; }
.ed-sig__saved:empty { display: none; }
.ed-sig__chip { position: relative; height: 48px; padding: 4px 8px; border: 1px solid var(--border); border-radius: var(--r-sm); background: #fff; cursor: pointer; }
.ed-sig__chip img { height: 100%; }
.ed-sig__chip.is-on { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft); }
.ed-sig__chip button { position: absolute; top: -7px; right: -7px; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); font-size: 11px; line-height: 1; cursor: pointer; }
.ed-insert__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ed-insert__opt { display: grid; justify-items: center; gap: 4px; padding: 16px 10px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-alt); color: var(--text); font: inherit; cursor: pointer; text-align: center; }
.ed-insert__opt svg { width: 22px; height: 22px; color: var(--primary-text); }
.ed-insert__opt small { color: var(--text-muted); font-size: var(--fs-small); }
.ed-insert__opt:hover { border-color: var(--primary); background: var(--primary-soft); }
.ed-modal__box--plans { width: min(640px, 100%); }
.ed-plans__head { text-align: center; display: grid; gap: 6px; justify-items: center; }
.ed-plans__head p { max-width: 460px; line-height: 1.5; }
.ed-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ed-plans--one { grid-template-columns: minmax(0, 380px); justify-content: center; }
.ed-plans__card { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 18px 16px 16px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-alt); }
.ed-plans__card.is-best { border-color: var(--accent); }
.ed-plans__badge { position: absolute; top: -10px; left: 14px; padding: 2px 9px; border-radius: 999px; background: var(--badge-bg); border: 1px solid var(--badge-border); color: var(--badge-text); font-size: 10px; font-weight: var(--fw-bold); letter-spacing: .04em; }
.ed-plans__card .plan__name { font-size: var(--fs-body-lg); font-weight: var(--fw-bold); }
.ed-plans__card .plan__price { display: flex; align-items: baseline; gap: 6px; }
.ed-plans__card .plan__price b { font-size: 30px; font-weight: var(--fw-bold); letter-spacing: -.02em; }
.ed-plans__card .plan__price span { color: var(--text-muted); font-size: var(--fs-label); }
.ed-plans__card ul { list-style: none; display: grid; gap: 6px; flex: 1; }
.ed-plans__card li { display: flex; gap: 7px; align-items: center; font-size: var(--fs-label); }
.ed-plans__card li svg { width: 14px; height: 14px; color: var(--success); flex-shrink: 0; }
.ed-plans__card .btn { width: 100%; }
.ed-plans__note { font-size: var(--fs-small); color: var(--text-faint); text-align: center; line-height: 1.5; }
.ed-toast { position: fixed; left: 50%; top: 14px; transform: translateX(-50%); z-index: 1700; padding: 10px 16px; border-radius: 10px; background: var(--success); color: #fff; font-weight: var(--fw-semibold); box-shadow: 0 10px 30px -10px rgba(0,0,0,.4); }
.ed-toast--warn { background: var(--danger); }

/* Phones and small tablets: the rail becomes a bottom strip, the side panel a sheet */
@media (max-width: 900px) {
  .ed-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .ed-rail { order: 2; flex-direction: row; overflow-x: auto; overflow-y: hidden; border-right: 0; border-top: 1px solid var(--border); padding: 6px 8px; gap: 4px; }
  .ed-tool { min-width: 58px; }
  .ed-rail__sep { width: 1px; height: auto; margin: 6px 2px; }
  .ed-side { position: fixed; left: 0; right: 0; bottom: 64px; max-height: 55vh; z-index: 25; border-left: 0; border-top: 1px solid var(--border); border-radius: 16px 16px 0 0; box-shadow: 0 -10px 30px -10px rgba(0,0,0,.35); transform: translateY(110%); transition: transform .18s; }
  .ed-side.is-open { transform: none; }
  .ed-side__close { display: grid; place-items: center; }
  .ed-props-toggle { display: grid; place-items: center; position: fixed; right: 14px; bottom: 78px; z-index: 24; width: 46px; height: 46px; border-radius: 50%; border: none; background: var(--grad); color: var(--on-primary); box-shadow: 0 8px 20px -6px rgba(0,0,0,.4); cursor: pointer; }
  .ed-props-toggle svg { width: 20px; height: 20px; }
  .ed-top { gap: 4px; padding: 0 8px; }
  .ed-top__file, .ed-top__pages, .ed-plan span { display: none; }
  .ed-plan { padding: 0 8px; }
  .ed-pages { padding: 14px 12px 60px; gap: 12px; }
  .ed-status { bottom: 72px; }
  .ed-plans, .ed-insert__grid, .ed-thumbs { grid-template-columns: 1fr; }
}