/* ---------- Инструменты PDF ---------- */
@font-face { font-family: "NotoPdf"; src: url("/vendor/fonts/NotoSans-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "NotoPdf"; src: url("/vendor/fonts/NotoSans-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }

.tool-hero { text-align: center; padding: 40px 0 8px; }
.tool-hero .ticon { margin: 0 auto 16px; width: 60px; height: 60px; border-radius: 16px; }
.tool-hero h1 { font-size: clamp(30px, 4.4vw, 46px); margin-bottom: 12px; text-wrap: balance; }
.tool-hero .lead { margin: 0 auto; }
.tool-page.working .tool-hero { padding: 18px 0 0; }
.tool-page.working .tool-hero .lead, .tool-page.working .tool-hero .ticon { display: none; }
.tool-page.working .tool-hero h1 { font-size: 24px; margin: 0; }
.tool-stage { padding: 28px 24px 64px; }
@media (max-width: 600px) { .tool-stage { padding: 20px 12px 48px; } }

.dropzone.big { max-width: 760px; margin: 0 auto; padding: 56px 20px; background: var(--surface); box-shadow: var(--sh-md); border-color: rgba(17, 80, 168, .25); }
.dropzone.big strong { font-size: 21px; }
.dropzone.big .dz-btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.tool-stage > .errors { max-width: 760px; margin: 0 auto 16px; }

.btn-sm { padding: 8px 13px; font-size: 14px; border-radius: 10px; gap: 6px; }
.btn.danger { color: var(--bad); }

/* Рабочая область */
.ws { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
@media (max-width: 980px) { .ws { grid-template-columns: minmax(0, 1fr); } }
.ws-main { background: var(--surface); border-radius: var(--r); box-shadow: var(--sh-sm); padding: 14px; min-height: 360px; min-width: 0; }
.ws-main.over { outline: 3px dashed var(--accent); outline-offset: 4px; }
.ws-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.ws-count { color: var(--faint); font-size: 14px; font-variant-numeric: tabular-nums; }
.ws-tools { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.ws-body { min-width: 0; }
.ws-side { background: var(--surface); border-radius: var(--r); box-shadow: var(--sh-sm); padding: 20px; position: sticky; top: 84px; max-height: calc(100vh - 100px); overflow: auto; overscroll-behavior: contain; }
@media (max-width: 980px) { .ws-side { position: static; max-height: none; } }
.ws-side h2 { font-size: 20px; margin-bottom: 14px; }
.ws-side .cta { display: grid; gap: 10px; margin-top: 18px; }
.ws-side .run { width: 100%; }
.progress { height: 6px; border-radius: 3px; background: var(--bg-soft); overflow: hidden; }
.progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), #ffb14d); transition: width .25s; }
.status { font-size: 14px; color: var(--muted); min-height: 1.4em; }
.status.error { color: var(--bad); }
.privacy-note { font-size: 12.5px; color: var(--faint); }

/* Настройки */
.opts { display: grid; gap: 16px; }
.opt { display: grid; gap: 7px; }
.olbl { font-size: 14px; font-weight: 600; display: flex; justify-content: space-between; gap: 8px; }
.olbl output { color: var(--blue); font-variant-numeric: tabular-nums; }
.ofield { display: grid; gap: 7px; }
.ofield.orow { grid-template-columns: 1fr auto; align-items: center; }
.opt input[type=text], .opt input[type=number], .opt input[type=password], .opt select, .opt textarea, .ed-search input, .sigtext {
  width: 100%; border: 1px solid var(--line-2); border-radius: 10px; padding: 10px 12px; background: var(--surface); font-size: 15px; }
.opt textarea { resize: vertical; font: 14px/1.4 ui-monospace, Consolas, monospace; }
.opt input:focus, .opt select:focus, .opt textarea:focus { outline: 3px solid rgba(17, 80, 168, .2); border-color: var(--blue); }
.opt input[type=color] { width: 44px; height: 32px; border: 1px solid var(--line-2); border-radius: 8px; padding: 2px; background: var(--surface); cursor: pointer; }
.opt input[type=range] { width: 100%; accent-color: var(--accent); }
.ocheck { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; cursor: pointer; line-height: 1.4; }
.ocheck input { margin-top: 2px; width: 17px; height: 17px; accent-color: var(--blue); flex: none; }
.onote { font-size: 13.5px; color: var(--muted); background: var(--blue-wash); border-radius: 10px; padding: 10px 12px; line-height: 1.45; }
.ohint { color: var(--faint); font-size: 12.5px; }
.seg.wrapq { flex-wrap: wrap; }
.ocards { display: grid; gap: 8px; }
.ocard { text-align: left; border: 1.5px solid var(--line-2); border-radius: 12px; background: var(--surface); padding: 11px 14px; cursor: pointer; display: grid; gap: 2px; }
.ocard b { font-size: 15px; }
.ocard small { color: var(--muted); font-size: 13px; }
.ocard:hover { border-color: var(--blue); }
.ocard[aria-pressed=true] { border-color: var(--accent); background: var(--accent-wash); box-shadow: 0 0 0 1px var(--accent) inset; }
.oimg { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.oimg-name { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Список файлов */
.fgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.fcard { position: relative; background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 10px; display: grid; gap: 8px; cursor: grab; user-select: none; touch-action: manipulation; transition: box-shadow .2s, transform .2s; }
.fcard:hover { box-shadow: var(--sh-sm); }
.fcard.dragging, .pg.dragging { opacity: .55; transform: scale(.97); cursor: grabbing; }
.fthumb { height: 170px; display: grid; place-items: center; overflow: hidden; border-radius: 8px; background: #fff; }
.fthumb canvas { max-width: 100%; max-height: 100%; box-shadow: 0 1px 4px rgba(0, 0, 0, .15); transition: transform .25s var(--ease); }
.fext { font-weight: 800; color: var(--blue); font-size: 18px; letter-spacing: .05em; }
.fcap { display: grid; gap: 2px; min-width: 0; }
.fcap .fn { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fcap small { color: var(--faint); font-size: 12px; }
.fcap small.bad { color: var(--bad); }
.fbtn, .pg-btns { position: absolute; top: 6px; right: 6px; display: flex; gap: 4px; opacity: 0; transition: opacity .15s; }
.fcard:hover .fbtn, .pg:hover .pg-btns, .fcard:focus-within .fbtn, .pg:focus-within .pg-btns { opacity: 1; }
@media (hover: none) { .fbtn, .pg-btns { opacity: 1; } }
.mini { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface); display: grid; place-items: center; cursor: pointer; color: var(--ink); box-shadow: var(--sh-sm); padding: 0; }
.mini:hover { color: var(--blue); border-color: var(--blue); }

/* Сетка страниц */
.pgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 16px 14px; }
.pg { position: relative; display: grid; gap: 6px; justify-items: center; user-select: none; }
.pg-img { width: 100%; aspect-ratio: 3 / 4; display: grid; place-items: center; border-radius: 10px; background: var(--bg); border: 2px solid transparent; transition: border-color .15s, background .15s; overflow: hidden; }
.pg-img canvas { max-width: 92%; max-height: 92%; box-shadow: 0 1px 5px rgba(0, 0, 0, .18); background: #fff; transition: transform .25s var(--ease); }
.pg-n { font-size: 12.5px; color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.pg-blank { width: 70%; aspect-ratio: 210 / 297; background: #fff; box-shadow: 0 1px 5px rgba(0, 0, 0, .18); display: grid; place-items: center; color: var(--faint); font-size: 12px; }
.mode-select .pg { cursor: pointer; }
.mode-organize .pg { cursor: grab; touch-action: manipulation; }
.pg-check { position: absolute; top: 8px; left: 8px; width: 24px; height: 24px; border-radius: 7px; border: 2px solid var(--line-2); background: var(--surface); display: grid; place-items: center; color: transparent; }
.pg.sel .pg-check { background: var(--blue); border-color: var(--blue); color: #fff; }
.pg.sel .pg-img { border-color: var(--blue); background: var(--blue-wash); }
.mark-remove .pg.sel .pg-check { background: var(--bad); border-color: var(--bad); }
.mark-remove .pg.sel .pg-img { border-color: var(--bad); background: #fdeceb; }
.mark-remove .pg.sel canvas { opacity: .45; }
.pg-ins { position: absolute; right: -13px; top: 40%; width: 24px; height: 24px; border-radius: 50%; border: 0; background: var(--accent); color: #fff; display: grid; place-items: center; cursor: pointer; opacity: 0; transition: opacity .15s; z-index: 2; padding: 0; box-shadow: var(--sh-sm); }
.pg:hover .pg-ins { opacity: 1; }
@media (hover: none) { .pg-ins { opacity: .9; } }

/* Сравнение */
.cslots { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .cslots { grid-template-columns: 1fr; } }
.cslot { display: grid; gap: 8px; justify-items: center; text-align: center; padding: 26px 14px; border: 2px dashed var(--line-2); border-radius: 14px; cursor: pointer; background: var(--bg); }
.cslot.filled { border-style: solid; border-color: var(--blue); background: var(--blue-wash); }
.cslot.over { border-color: var(--accent); }
.cname { font-size: 13px; color: var(--muted); word-break: break-all; }
.compare-out { margin-top: 18px; }
.cmp-sum { margin-bottom: 14px; font-size: 15px; display: flex; gap: 10px; flex-wrap: wrap; }
.cmp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 760px) { .cmp-grid { grid-template-columns: 1fr; } }
.cmp-grid h3 { font-size: 14px; margin-bottom: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-col { background: var(--bg); border-radius: 10px; padding: 14px; font-size: 14px; line-height: 1.6; max-height: 70vh; overflow: auto; overflow-wrap: anywhere; }
.cmp-del { background: #fbd5d1; color: #8f1d12; text-decoration: line-through; border-radius: 3px; padding: 0 2px; }
.cmp-add { background: #c9efd5; color: #0d5a2a; border-radius: 3px; padding: 0 2px; }
.cmp-pages { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.cmp-page { margin: 0; display: grid; gap: 6px; }
.cmp-page canvas { width: 100%; height: auto; border: 1px solid var(--line); border-radius: 6px; }
.cmp-page.changed canvas { border-color: var(--bad); }
.cmp-page figcaption { font-size: 13px; color: var(--muted); }

/* Результат */
.result { max-width: 680px; margin: 0 auto; background: var(--surface); border-radius: 24px; box-shadow: var(--sh-lg); padding: 36px 28px; text-align: center; display: grid; gap: 14px; justify-items: center; }
.result-ok { width: 64px; height: 64px; border-radius: 50%; background: var(--ok); display: grid; place-items: center; box-shadow: 0 8px 22px rgba(21, 128, 64, .35); }
.result h2 { font-size: 30px; }
.result-meta { color: var(--muted); word-break: break-all; }
.result-ratio { font-weight: 650; color: var(--muted); }
.result-ratio.good { color: var(--ok); }
.result-btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.result-next { margin-top: 10px; display: grid; gap: 10px; justify-items: center; font-size: 14px; color: var(--faint); }
.chips-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.chips-row a { padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 14px; font-weight: 600; color: var(--ink); background: var(--surface); }
.chips-row a:hover { border-color: var(--accent); color: var(--accent-deep); text-decoration: none; }

/* Редактор */
.ed { display: grid; gap: 10px; }
.ed-tools { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ed-tool { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line-2); background: var(--surface); border-radius: 10px; padding: 7px 12px; font-size: 14px; font-weight: 600; cursor: pointer; }
.ed-tool:hover { border-color: var(--blue); }
.ed-tool[aria-pressed=true] { background: var(--blue); color: #fff; border-color: var(--blue); }
.ed-ico { font-size: 15px; min-width: 16px; text-align: center; }
.ed-search { display: flex; gap: 6px; flex: 1; min-width: 240px; }
.ed-search input { padding: 7px 10px; font-size: 14px; }
.ed-props { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; min-height: 38px; padding: 4px 10px; border-radius: 10px; background: var(--bg); font-size: 14px; }
.ed-hint { color: var(--muted); font-size: 13.5px; }
.ed-prop { display: inline-flex; gap: 6px; align-items: center; font-weight: 550; }
.ed-prop input[type=number] { width: 64px; border: 1px solid var(--line-2); border-radius: 8px; padding: 5px 6px; }
.ed-prop input[type=color] { width: 34px; height: 28px; padding: 1px; border: 1px solid var(--line-2); border-radius: 7px; background: #fff; }
.ed-b { width: 32px; height: 30px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface); font-weight: 800; cursor: pointer; }
.ed-b[aria-pressed=true] { background: var(--ink); color: #fff; }
.ed-sigs { display: inline-flex; gap: 6px; }
.ed-sig { height: 34px; padding: 3px 8px; border: 1px solid var(--line-2); border-radius: 8px; background: #fff; cursor: pointer; }
.ed-sig img { height: 100%; width: auto; }
.ed-stage { background: repeating-conic-gradient(#eef2f7 0 25%, #f6f8fb 0 50%) 0 0 / 22px 22px; border-radius: 12px; padding: 14px; display: grid; place-items: center; overflow: auto; min-height: 380px; }
.ed-page { position: relative; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .12), 0 18px 40px rgba(16, 35, 53, .14); max-width: 100%; }
.ed-canvas, .ed-canvas canvas { width: 100%; height: 100%; }
.ed-canvas canvas { display: block; }
.ed-layer { position: absolute; inset: 0; touch-action: none; --k: 1; overflow: hidden; }
.ed-layer[data-tool=text] { cursor: text; }
.ed-layer[data-tool=rect], .ed-layer[data-tool=white], .ed-layer[data-tool=redact], .ed-layer[data-tool=draw] { cursor: crosshair; }
.ed-nav { display: flex; gap: 10px; align-items: center; justify-content: center; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ed-ink { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }

.obj { position: absolute; cursor: move; box-sizing: border-box; }
.obj.sel { outline: 2px solid var(--blue); outline-offset: 1px; }
.obj:not(.sel):hover { outline: 1px dashed var(--blue); }
.obj-tx { font-family: "NotoPdf", "Noto Sans", Arial, sans-serif; line-height: 1.25; white-space: pre; outline: none; min-width: 1ch; padding: 0; cursor: text; }
.obj-image img { width: 100%; height: 100%; display: block; pointer-events: none; }
.obj-draw svg { width: 100%; height: 100%; overflow: visible; display: block; }
.obj-redact { background: #000; }
.obj-crop { cursor: move; outline: 2px solid var(--accent) !important; box-shadow: 0 0 0 9999px rgba(16, 35, 53, .45); }
.hnd { position: absolute; width: 14px; height: 14px; border-radius: 4px; background: #fff; border: 2px solid var(--blue); right: -8px; bottom: -8px; cursor: nwse-resize; }
.obj:not(.sel) .hnd { display: none; }
.obj-crop .hnd { display: block; border-color: var(--accent); }
.hnd-nw { left: -8px; top: -8px; right: auto; bottom: auto; }
.hnd-ne { right: -8px; top: -8px; bottom: auto; cursor: nesw-resize; }
.hnd-sw { left: -8px; bottom: -8px; right: auto; cursor: nesw-resize; }
@media (pointer: coarse) { .hnd { width: 22px; height: 22px; right: -12px; bottom: -12px; } .hnd-nw { left: -12px; top: -12px; } .hnd-ne { right: -12px; top: -12px; } .hnd-sw { left: -12px; bottom: -12px; } }

/* Подпись */
.sigdlg { width: min(640px, calc(100vw - 32px)); }
.sigbox { display: grid; gap: 12px; }
.sigbox h3 { font-size: 19px; }
.sigpane { display: grid; gap: 8px; }
.sigpad { width: 100%; height: auto; aspect-ratio: 3 / 1; border: 1.5px dashed var(--line-2); border-radius: 12px; background: #fff; touch-action: none; cursor: crosshair; }
.sigpane .link-btn { justify-self: end; }
.sigtext { font-size: 34px !important; padding: 14px !important; }
.sigfonts { display: flex; gap: 6px; flex-wrap: wrap; }
.sigfonts button { border: 1px solid var(--line-2); background: #fff; border-radius: 10px; padding: 6px 14px; font-size: 20px; cursor: pointer; }
.sigfonts button[aria-pressed=true] { border-color: var(--accent); background: var(--accent-wash); }
.sigcolors { display: flex; gap: 8px; }
.sigcolors button { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line-2); cursor: pointer; }

/* Диалог (как в сканере) */
.dlg { border: 0; border-radius: 18px; padding: 22px; box-shadow: var(--sh-lg); max-width: calc(100vw - 32px); }
.dlg::backdrop { background: rgba(16, 35, 53, .4); }
.dlg form { display: grid; gap: 14px; min-width: min(380px, 80vw); }
.dlg input[type=password], .dlg input[type=text] { border: 1px solid var(--line-2); border-radius: 10px; padding: 10px 12px; font-size: 16px; }
.dlg-btns { display: flex; gap: 8px; justify-content: flex-end; }

/* ---------- Каталог инструментов ---------- */
.hub-hero { text-align: center; padding: 48px 0 12px; }
.hub-hero h1 { font-size: clamp(32px, 5vw, 54px); margin-bottom: 14px; text-wrap: balance; }
.hub-hero .lead { margin: 0 auto; }
.hub-filter { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin: 28px 0 8px; }
.hub-filter button { border: 1px solid var(--line-2); background: var(--surface); border-radius: 999px; padding: 8px 16px; font-weight: 600; font-size: 14px; cursor: pointer; color: var(--muted); }
.hub-filter button[aria-pressed=true] { background: var(--ink); color: #fff; border-color: var(--ink); }
.tgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; padding: 24px 0 72px; }
.tcard { display: grid; gap: 10px; align-content: start; background: var(--surface); border-radius: var(--r); box-shadow: var(--sh-sm); padding: 22px; color: inherit; transition: box-shadow .2s, transform .2s var(--ease); }
.tcard:hover { box-shadow: var(--sh-md); transform: translateY(-3px); text-decoration: none; }
.tcard h2, .tcard h3 { font-size: 18px; margin: 4px 0 0; }
.tcard p { color: var(--muted); font-size: 14.5px; }
.tool-more { padding-bottom: 48px; }
.tool-more .tgrid { padding: 0; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.tool-more .tcard { padding: 16px; grid-template-columns: auto 1fr; align-items: center; }
.tool-more .tcard .ticon { width: 40px; height: 40px; }
.tool-more .tcard h3 { font-size: 15px; margin: 0; }
.dz-alt { display: flex; justify-content: center; margin-top: 14px; }