* { box-sizing: border-box; }
html, body { height: 100%; }
body { overflow: hidden; margin: 0; background: #f7fafb; color: #182126; font-family: var(--ops-font-sans); }
.signing-tool { display: flex; width: 100%; height: 100dvh; padding: 64px 0 0; flex-direction: column; overflow: hidden; }
.signing-tool__header { flex: none; }
.signing-tool__actions { display: flex; align-items: center; gap: 10px; }
.signing-tool__actions [hidden] { display: none; }
.signing-panel__label { display: block; color: #00997e; font-size: .68rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.signing-workspace { display: grid; width: 100%; min-height: 0; margin: 30px auto 20px; padding: 0 clamp(24px, 4vw, 60px); flex: 1; grid-template-columns: 360px minmax(0, 1fr); gap: 26px; overflow: hidden; }
.signing-panel { align-self: start; overflow: hidden; border: 1px solid var(--ops-color-line); border-radius: var(--ops-radius-md); background: #fff; box-shadow: 0 18px 46px rgba(0,31,48,.07); }
.signing-panel[hidden] + .signing-preview { grid-column: 1 / -1; }
.signing-panel__section { padding: 22px 24px; border-bottom: 1px solid var(--ops-color-line); }
.signing-panel__section:last-child { border-bottom: 0; }
.signing-panel label { color: #182126; font-size: .75rem; font-weight: 750; }
.signing-asset-toggles { display: grid; gap: 10px; margin-top: 14px; }
.signing-asset-toggle { display: grid; min-height: 50px; align-items: center; grid-template-columns: 22px 1fr; gap: 12px; padding: 10px 12px; border: 1px solid var(--ops-color-line); border-radius: 7px; background: #fff; cursor: pointer; }
.signing-asset-toggle:has(input:checked) { border-color: #32ccc4; background: #f0fbfa; box-shadow: 0 0 0 2px rgba(50,204,196,.13); }
.signing-asset-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.signing-asset-toggle__check { display: grid; width: 20px; height: 20px; place-items: center; border: 1px solid #a9c0c7; border-radius: 4px; background: #fff; }
.signing-asset-toggle input:checked + .signing-asset-toggle__check { border-color: #00997e; background: #00997e; color: #fff; }
.signing-asset-toggle input:checked + .signing-asset-toggle__check::after { content: "\2713"; font-size: .75rem; font-weight: 900; }
.signing-asset-toggle strong { display: block; }
.signing-asset-toggle strong { color: #00384d; font-size: .78rem; }
.signing-asset-toggle.is-unavailable { cursor: not-allowed; opacity: .5; }
.signing-preview { display: flex; min-width: 0; min-height: 0; overflow: hidden; flex-direction: column; border: 1px solid var(--ops-color-line); border-radius: var(--ops-radius-md); background: #fff; box-shadow: 0 18px 46px rgba(0,31,48,.07); }
.signing-preview__toolbar { display: flex; min-height: 64px; align-items: center; justify-content: space-between; gap: 20px; padding: 10px 18px; border-bottom: 1px solid var(--ops-color-line); }
.signing-preview__toolbar span { display: block; color: #66757b; font-size: .68rem; }
.signing-preview__toolbar strong { color: #005f81; font-size: .8rem; }
.signing-preview__document { display: flex; min-width: 0; align-items: center; }
.signing-preview__document > div { min-width: 0; }
.signing-preview__document strong { display: inline-block; max-width: min(46vw, 680px); overflow: hidden; text-overflow: ellipsis; vertical-align: middle; white-space: nowrap; }
.signing-preview__pages, .signing-preview__zoom { display: flex; align-items: center; gap: 8px; }
.signing-preview__toolbar button { display: grid; width: 34px; height: 34px; place-items: center; border: 0; border-radius: 50%; background: #edf4f6; color: #005f81; cursor: pointer; }
.signing-preview__toolbar button:disabled { cursor: default; opacity: .35; }
.signing-preview__pages span, .signing-preview__zoom output { color: #005f81; font-size: .76rem; font-weight: 750; }
.signing-stage { position: relative; display: grid; min-height: 0; flex: 1; overflow: auto; place-items: start center; padding: 30px; background: #eef3f4; }
.signing-empty { display: grid; width: min(520px, 100%); min-height: 230px; margin: auto; place-content: center; gap: 8px; border: 1px dashed #76cfc8; border-radius: 8px; background: rgba(255,255,255,.82); color: #66757b; text-align: center; cursor: pointer; transition: border-color var(--ceangal-motion-fast), background var(--ceangal-motion-fast), box-shadow var(--ceangal-motion-fast); }
.signing-empty:hover, .signing-empty:focus-within { border-color: #00997e; background: #fff; box-shadow: 0 14px 32px rgba(0,95,129,.1); }
.signing-empty[hidden] { display: none; }
.signing-empty strong { color: #00384d; font-size: 1.15rem; }
.signing-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.signing-drop-overlay { position: absolute; inset: 0; display: none; z-index: 20; place-content: center; gap: 8px; border: 2px dashed #00997e; background: rgba(240,251,250,.97); color: #66757b; text-align: center; pointer-events: none; }
.signing-drop-overlay strong { color: #00384d; font-size: 1.15rem; }
.signing-stage.is-dragging .signing-drop-overlay { display: grid; }
.signing-stage.is-dragging .signing-page, .signing-stage.is-dragging .signing-empty { visibility: hidden; }
.signing-page { position: relative; line-height: 0; box-shadow: 0 18px 54px rgba(0,31,48,.18); touch-action: none; }
.signing-page canvas { display: block; max-width: none; background: #fff; }
.placement-layer { position: absolute; inset: 0; overflow: hidden; }
.placement { position: absolute; border: 1px solid transparent; cursor: move; transform-origin: center; user-select: none; touch-action: none; }
.placement.selected { border-color: #008d85; box-shadow: 0 0 0 2px rgba(50,204,196,.22); }
.placement img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.placement__resize { position: absolute; right: -6px; bottom: -6px; display: none; width: 12px; height: 12px; border: 2px solid #fff; border-radius: 50%; background: #008d85; cursor: nwse-resize; }
.placement__rotate { position: absolute; left: 50%; top: -34px; display: none; width: 24px; height: 24px; align-items: center; justify-content: center; padding: 0; border: 2px solid #fff; border-radius: 50%; background: #005f81; box-shadow: 0 3px 10px rgba(0,31,48,.2); color: #fff; cursor: grab; font-size: .84rem; line-height: 1; translate: -50% 0; }
.placement__rotate::after { position: absolute; left: 50%; top: 22px; width: 1px; height: 10px; background: #008d85; content: ""; }
.placement.selected .placement__resize, .placement.selected .placement__rotate { display: flex; }
.signing-page-strip { display: flex; min-height: 74px; gap: 9px; overflow-x: auto; padding: 12px 16px; border-top: 1px solid var(--ops-color-line); background: #fff; }
.signing-page-strip button { position: relative; min-width: 54px; height: 48px; border: 1px solid var(--ops-color-line); border-radius: 6px; background: #f7fafb; color: #005f81; cursor: pointer; font-weight: 750; }
.signing-page-strip button.active { border-color: #32ccc4; box-shadow: 0 0 0 2px rgba(50,204,196,.16); }
.signing-page-strip i { position: absolute; right: 4px; bottom: 3px; color: #00997e; font-size: .58rem; font-style: normal; }
.toast { position: fixed; right: 24px; bottom: 24px; z-index: var(--ops-z-toast); padding: 13px 17px; border-radius: 7px; background: #00384d; color: #fff; opacity: 0; pointer-events: none; transform: translateY(10px); transition: .2s ease; }
.toast.show { opacity: 1; transform: none; }
@media (max-width: 980px) { body { overflow: auto; } .signing-tool { height: auto; min-height: 100dvh; overflow: visible; } .signing-workspace { flex: none; grid-template-columns: 1fr; overflow: visible; } .signing-panel { max-height: none; } .signing-stage { min-height: 520px; max-height: 70dvh; } }
@media (max-width: 620px) { .signing-tool__actions { width: 100%; } .signing-tool__header .ceangal-button { min-width: 0; flex: 1; } .signing-preview__toolbar { align-items: flex-start; flex-wrap: wrap; } .signing-stage { padding: 16px; } }