  html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; background: #222; overscroll-behavior: none; }

/* --- Multi-document tab bar (enableTabbedMode) --- */
.doc-tab-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 32px;
    z-index: 100000;
    display: flex;
    align-items: stretch;
    gap: 2px;
    padding: 0 4px 0 6px;
    background: #1a1a1a;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.25) transparent;
}
.doc-tab-bar[hidden] { display: none !important; }
.doc-tab-bar::-webkit-scrollbar { height: 3px; }
.doc-tab-bar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.25); border-radius: 2px; }

.doc-tab {
    flex: 0 1 auto;
    max-width: 200px;
    min-width: 72px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 4px 0 0;
    padding: 0 8px 0 10px;
    border: none;
    border-radius: 6px 6px 0 0;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.72);
    font: 12px/1.2 system-ui, Segoe UI, sans-serif;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.doc-tab:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.doc-tab.is-active {
    background: rgba(0, 170, 255, 0.18);
    color: #fff;
    box-shadow: inset 0 -2px 0 #0af;
}
.doc-tab-label {
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1 1 auto;
    text-align: left;
}
.doc-tab-close {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    line-height: 16px;
    border-radius: 4px;
    text-align: center;
    font-size: 14px;
    opacity: 0.65;
}
.doc-tab-close:hover { opacity: 1; background: rgba(255, 80, 80, 0.35); }
.doc-tab-add {
    flex: 0 0 auto;
    width: 28px;
    margin: 4px 0 0 2px;
    border: none;
    border-radius: 6px 6px 0 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    font-size: 16px;
    cursor: pointer;
}
.doc-tab-add:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }

/* Offset chrome when tabs are visible */
body.has-doc-tabs #headerBar { top: 32px; }
body.has-doc-tabs #workspaceRoot,
body.has-doc-tabs .doc-viewer {
    /* header 40 + tabs 32 */
    padding-top: 0;
    top: 72px;
    height: calc(100% - 72px);
}
/* Pages/History flyout must clear tab bar (32) + header (40) — not only the old 50px header gap */
body.has-doc-tabs #historySidebar {
    top: 72px;
}

#workspaceRoot {
    position: absolute;
    top: 40px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}

/* Each document keeps its own scrollable viewer (hidden when inactive) */
.doc-viewer,
#viewer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    /* When zoomed past viewport width, allow panning sideways */
    overflow-x: auto;
    padding-top: 12px;
    box-sizing: border-box;
    overscroll-behavior: none;
    background: #222;
}
.doc-viewer:not(.is-active-doc),
.doc-viewer[hidden] {
    /* Keep off the hit-test tree so only the active tab receives tools/marquee */
    visibility: hidden;
    pointer-events: none !important;
    z-index: 0;
}
.doc-viewer.is-active-doc:not([hidden]) {
    visibility: visible;
    pointer-events: auto;
    z-index: 1;
}

/* legacy single #viewer without workspaceRoot still works */
body:not(.has-doc-tabs) #viewer {
    top: 0;
    height: 100%;
    padding-top: 52px; /* under fixed header */
}

.render-pixelated {
    image-rendering: -moz-crisp-edges !important;         /* Firefox */
    image-rendering: -webkit-optimize-contrast !important; /* Safari */
    image-rendering: crisp-edges !important;               /* Standard */
    image-rendering: pixelated !important;                 /* Chrome/Edge */
}

.pageCanvas { 
    width: 100%; 
    height: auto; 
    display: block; 
    image-rendering: auto; 
    pointer-events: none; /* Never steal clicks from the text */
}

.textLayer {
    position: absolute; left: 0; top: 0;
    overflow: hidden; 
    line-height: 1; 
    z-index: 10; 
    pointer-events: auto; 
    transform-origin: top left;
    font-family: sans-serif; 

    width: 100% !important;
    height: 100% !important;
}

/* --- Native PDF form widgets (PDF.js AnnotationLayer) --- */
.pageContainer {
    position: relative;
}
.annotationLayer {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    /* Above page text/images, but form designer shells (z=120) stay on top */
    z-index: 100;
    transform-origin: 0 0;
    pointer-events: none; /* only widget sections capture */
    overflow: visible;
    --scale-factor: 1;
}
.annotationLayer section {
    position: absolute;
    text-align: initial;
    pointer-events: auto;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    transform-origin: 0 0;
}
.annotationLayer .linkAnnotation > a,
.annotationLayer .buttonWidgetAnnotation.pushButton > a {
    position: absolute;
    inset: 0;
}
/* Inputs must fill the section — PDF.js sizes the <section>, not the control */
.annotationLayer :is(
    .textWidgetAnnotation input,
    .textWidgetAnnotation textarea,
    .choiceWidgetAnnotation select,
    .buttonWidgetAnnotation.checkBox input,
    .buttonWidgetAnnotation.radioButton input
) {
    background-color: rgba(255, 255, 255, 0.01);
    border: 1px solid transparent;
    box-sizing: border-box;
    /* Do NOT set font-size here — PDF.js applies DA size via inline style.
       A hard-coded font shorthand was overriding field font sizes. */
    font-family: sans-serif;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0 2px;
    vertical-align: top;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    color: #111;
}
/* Fallback only when PDF.js did not inject a size (auto /Helv 0 Tf still gets a size) */
.annotationLayer .textWidgetAnnotation input:not([style*="font-size"]),
.annotationLayer .textWidgetAnnotation textarea:not([style*="font-size"]),
.annotationLayer .choiceWidgetAnnotation select:not([style*="font-size"]) {
    font-size: calc(10px * var(--scale-factor, 1));
}
.annotationLayer .textWidgetAnnotation textarea {
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-y: auto;
    line-height: 1.25;
    resize: none;
}
.annotationLayer .textWidgetAnnotation input:hover,
.annotationLayer .textWidgetAnnotation textarea:hover,
.annotationLayer .choiceWidgetAnnotation select:hover {
    border: 1px solid rgba(0, 170, 255, 0.55);
    background: rgba(255, 255, 255, 0.45);
}
.annotationLayer .textWidgetAnnotation input:focus,
.annotationLayer .textWidgetAnnotation textarea:focus,
.annotationLayer .choiceWidgetAnnotation select:focus {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid #0af;
    outline: none;
}
.annotationLayer .buttonWidgetAnnotation.checkBox input,
.annotationLayer .buttonWidgetAnnotation.radioButton input {
    appearance: auto;
    -webkit-appearance: auto;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}
.annotationLayer .popupAnnotation,
.annotationLayer .popupWrapper {
    display: none !important;
}

/*
 * Fill only in Editor + Pointer tool.
 * IMPORTANT: use .tool-nonselect only — never :not(.tool-select).
 * If tool-select is briefly missing on load/tab switch, :not(.tool-select)
 * would block ALL native form hits (looks "non-interactive").
 * Non-pointer / Form: DIM native widgets (still visible for layout).
 */
body.workspace-editor .annotationLayer {
    opacity: 1;
}
body.workspace-editor .annotationLayer section {
    pointer-events: auto;
}
body.workspace-editor.tool-nonselect .annotationLayer {
    opacity: 0.38;
}
body.workspace-editor.tool-nonselect .annotationLayer section {
    pointer-events: none !important;
}
/* Form mode: page + non-form layers stay fully visible (like flattened ink).
   Only hit-testing is disabled — not opacity (opacity looked like X-ray). */
body.workspace-form .annotationLayer {
    opacity: 1;
    pointer-events: none !important;
}
body.workspace-form .annotationLayer section {
    pointer-events: none !important;
}

/* Print / export / capture: no dimming baked into snapshots */
body.capture-safe .annotationLayer,
body.capture-safe .annotationLayer section {
    opacity: 1 !important;
}

.textLayer span, .textLayer br {
    position: absolute; 
    white-space: pre; 
    cursor: text;
    transform-origin: 0% 0%; 
    color: transparent !important;
    background-color: rgba(255, 255, 255, 0.001); /* Ghost mass for hit-testing */
    
    /* ✨ THE TEXT SIZING FIX: Restore the PDF.js math for the individual words!
       We use a fallback of '1' just in case PDF.js forgets to inject the variable. */
    font-size: calc(var(--font-height) * var(--scale-factor, 1));
    transform: scaleX(var(--scale-x, 1));
    
    margin: 0;
	margin-left: -2px;	
    padding: 0 2px;
    display: block; 
    box-sizing: content-box;
    pointer-events: auto; 
}

/* ✨ Force the browser to visibly highlight transparent PDF text */
.textLayer::selection,
.textLayer span::selection,
.textLayer br::selection {
    background: rgba(0, 170, 255, 0.4) !important;
    color: transparent !important;
}

/* Ensure the background trick also works on Firefox */
.textLayer::-moz-selection,
.textLayer span::-moz-selection,
.textLayer br::-moz-selection {
    background: rgba(0, 170, 255, 0.4) !important;
    color: transparent !important;
}

.overlayImg { 
    position: absolute; 
    cursor: move; 
    background-size: 100% 100%; 
    z-index: 10; /* ✨ THE FIX: Pulls it above the text layer */
    box-sizing: border-box; 
}

/* --- ACTIVE SELECTION INDICATORS ---
 * Outline only — do NOT force z-index here. Stack order is style.zIndex
 * (new objects = max+1; user [ / ] to push back / bring forward).
 */
.overlayImg.overlay-active, .textOverlay.overlay-active { outline: 2px dashed #0af; outline-offset: 0px; }
.shapeOverlay.overlay-active { outline: 2px dashed #0af; outline-offset: 0px; }
.formFieldOverlay.overlay-active { outline: 2px dashed #7c3aed; outline-offset: 0px; }

/* --- WORKSPACE: EDITOR vs FORM --- */
/*
 * Editor: fill via designer .form-field-fill (including imported AcroForm twins).
 * Native AnnotationLayer widgets are hidden after import so they don't steal hits
 * or sit at stale geometry under the designer shells.
 * Form mode: design chrome (move/resize/rename); fill surface off.
 *
 * z-index policy: form fields must never paint under text/images/shapes/annotation
 * (textLayer=10, overlays=10, annotation=12, active non-form=99).
 */
body.workspace-editor .formFieldOverlay {
    display: block !important;
    cursor: default;
    /* z-index from inline stack (assignOverlayZIndex), not a hard pin */
}
/* Imported twins stay visible in Editor for filling (not display:none) */
body.workspace-editor .formFieldOverlay[data-imported-native="1"] {
    display: block !important;
}
body.workspace-form .formFieldOverlay[data-imported-native="1"] {
    display: block !important;
}
/* Hide design chrome while filling in Editor */
body.workspace-editor .formFieldOverlay .form-field-body,
body.workspace-editor .formFieldOverlay .textControls,
body.workspace-editor .formFieldOverlay .textDragHandle,
body.workspace-editor .formFieldOverlay .resizeHandle,
body.workspace-editor .formFieldOverlay .deleteHandle {
    display: none !important;
    pointer-events: none !important;
}
/*
 * Fill surface: interactive by default in Editor.
 * Dim + no hit-test only when an explicit non-pointer tool is active.
 */
body.workspace-editor .formFieldOverlay .form-field-fill {
    display: flex !important;
    pointer-events: auto !important;
    opacity: 1;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(0, 170, 255, 0.65);
}
body.workspace-editor.tool-nonselect .formFieldOverlay .form-field-fill {
    pointer-events: none !important;
    opacity: 0.4;
}
body.workspace-editor .formFieldOverlay.overlay-active {
    outline: none; /* fill mode: no design outline */
}
body.capture-safe .formFieldOverlay .form-field-fill {
    opacity: 1 !important;
}

/* After import / project restore: native AcroForm sections suppressed (designer is source of truth) */
.annotationLayer section.native-widget[data-hidden-by-designer="1"],
.annotationLayer section[data-hidden-by-designer="1"] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
}
.annotationLayer section[data-hidden-by-designer="1"] input,
.annotationLayer section[data-hidden-by-designer="1"] select,
.annotationLayer section[data-hidden-by-designer="1"] textarea,
.annotationLayer section[data-hidden-by-designer="1"] button,
.annotationLayer section[data-hidden-by-designer="1"] a {
    pointer-events: none !important;
    display: none !important;
}

/*
 * Form mode: editor stamps/shapes/images behave as if already flattened into the page —
 * full opacity (no ghosting under field chrome), no hit-testing, chrome hidden below.
 * Only form-field overlays remain interactive for design.
 * Stencil boxes stay interactive — marquee multi-select / group-drag of form fields.
 */
body.workspace-form .textOverlay,
body.workspace-form .shapeOverlay,
body.workspace-form .overlayImg {
    pointer-events: none !important;
    opacity: 1;
}
body.workspace-form .stencil-box {
    pointer-events: auto !important;
    opacity: 1;
}
body.capture-safe .textOverlay,
body.capture-safe .shapeOverlay,
body.capture-safe .overlayImg,
body.capture-safe .stencil-box {
    opacity: 1 !important;
}
/* Only hide editor-layer chrome — form field handles must stay usable for sizing */
body.workspace-form .textOverlay .textControls,
body.workspace-form .shapeOverlay .textControls,
body.workspace-form .textOverlay .textDragHandle,
body.workspace-form .shapeOverlay .textDragHandle,
body.workspace-form .overlayImg .textDragHandle,
body.workspace-form .textOverlay .resizeHandle,
body.workspace-form .shapeOverlay .resizeHandle,
body.workspace-form .overlayImg .resizeHandle,
body.workspace-form .textOverlay .deleteHandle,
body.workspace-form .shapeOverlay .deleteHandle,
body.workspace-form .overlayImg .deleteHandle,
body.workspace-form .textOverlay .rotateHandle,
body.workspace-form .shapeOverlay .rotateHandle,
body.workspace-form .overlayImg .rotateHandle {
    display: none !important;
    pointer-events: none !important;
}
body.workspace-form .formFieldOverlay {
    display: block;
    pointer-events: auto;
    opacity: 1;
    cursor: move;
}
/* Design chrome on; fill surface off in Form mode */
body.workspace-form .formFieldOverlay .form-field-fill {
    display: none !important;
    pointer-events: none !important;
}
body.workspace-form .formFieldOverlay .form-field-body {
    display: flex;
    pointer-events: none;
}
/* Form field resize handle: always interactive when selected */
body.workspace-form .formFieldOverlay.overlay-active .resizeHandle,
body.workspace-form .formFieldOverlay.overlay-active .textDragHandle,
body.workspace-form .formFieldOverlay.overlay-active .deleteHandle {
    display: block !important;
    pointer-events: auto !important;
}
body.workspace-form .formFieldOverlay.overlay-active .textControls {
    display: flex !important;
    pointer-events: auto !important;
}

/* Fill surface (Editor) — default off; Editor rules above force flex + dim/full */
.form-field-fill {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: none;
    align-items: stretch;
    justify-content: stretch;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(0, 170, 255, 0.45);
    border-radius: 2px;
    transition: opacity 0.12s ease;
}
.form-field-fill-control {
    width: 100%;
    height: 100%;
    margin: 0;
    border: none;
    background: transparent;
    box-sizing: border-box;
    font-family: system-ui, sans-serif;
    padding: 2px 4px;
    outline: none;
}
.form-field-fill-control:focus {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: inset 0 0 0 1px #0af;
}
textarea.form-field-fill-control {
    resize: none;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-y: auto;
    line-height: 1.25;
}
input[type="checkbox"].form-field-fill-control,
input[type="radio"].form-field-fill-control {
    width: 70%;
    height: 70%;
    margin: auto;
    align-self: center;
    justify-self: center;
}
.form-field-checkbox .form-field-fill,
.form-field-radio .form-field-fill {
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.35);
}
.form-field-fill-sig {
    cursor: pointer;
    color: #0b4f6c;
    font-size: 12px;
    font-weight: 600;
}
/*
 * Signature fill (Editor): keep a real hit target.
 * Absolute-only children collapsed the fill to a 1px line under flex !important.
 * Column flex: ink grows; caption is a short strip that does not steal the box.
 */
body.workspace-editor .formFieldOverlay.form-field-signature {
    min-height: 56px;
}
/* Signed: room for ink + 3-line caption (not a hard layout for unsigned fields) */
body.workspace-editor .formFieldOverlay.form-field-signature[data-sig-attestation] {
    min-height: 72px;
}
body.workspace-editor .form-field-signature .form-field-fill {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    justify-content: stretch;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: inherit;
    padding: 0;
    overflow: hidden;
    box-sizing: border-box;
}
body.workspace-editor .form-field-signature .form-field-fill-sig {
    position: relative;
    flex: 1 1 auto;
    align-self: stretch;
    width: 100%;
    min-height: 36px;
    height: auto;
    z-index: 1;
    margin: 0;
    border: none;
    box-sizing: border-box;
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
}
body.workspace-editor .form-field-signature .form-field-sig-attestation {
    position: relative;
    flex: 0 0 auto;
    z-index: 2;
    margin: 0;
    padding: 3px 5px 3px;
    border-top: 1px solid rgba(15, 23, 42, 0.12);
    font-family: system-ui, "Segoe UI", sans-serif;
    font-size: 7px;
    line-height: 1.25;
    letter-spacing: 0.01em;
    color: #334155;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.9) 0%,
        rgba(241, 245, 249, 0.97) 100%
    );
    border-radius: 0 0 1px 1px;
    user-select: text;
    /* Hover → body popover (full hashes + copy); click re-opens sign */
    pointer-events: auto;
    cursor: help;
    overflow: hidden;
}
body.workspace-editor .form-field-signature .form-field-sig-attestation:hover {
    background: linear-gradient(
        180deg,
        rgba(236, 253, 245, 0.95) 0%,
        rgba(224, 242, 254, 0.98) 100%
    );
}
.form-field-sig-attestation .sig-att-primary {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 7.5px;
    color: #1e293b;
}
.form-field-sig-attestation .sig-att-name {
    font-weight: 700;
    font-style: italic;
    color: #0f172a;
}
.form-field-sig-attestation .sig-att-confirm {
    color: #0f766e;
    font-weight: 700;
}
.form-field-sig-attestation .sig-att-meta {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 6.5px;
    color: #64748b;
    margin-top: 1px;
}

/*
 * Signature attestation popover — body-level so it escapes field overflow:hidden.
 * Shows full originHash / attestationHash with one-click copy.
 */
.sig-att-popover {
    position: fixed;
    z-index: 100002;
    min-width: 280px;
    max-width: min(420px, calc(100vw - 16px));
    padding: 10px 12px 8px;
    border-radius: 8px;
    border: 1px solid rgba(15, 23, 42, 0.14);
    background: #0f172a;
    color: #e2e8f0;
    box-shadow:
        0 12px 28px rgba(15, 23, 42, 0.28),
        0 2px 6px rgba(15, 23, 42, 0.18);
    font-family: system-ui, "Segoe UI", sans-serif;
    font-size: 12px;
    line-height: 1.35;
    pointer-events: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s;
}
.sig-att-popover.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.sig-att-popover[data-place="below"] {
    transform: translateY(-4px);
}
.sig-att-popover[data-place="below"].is-visible {
    transform: translateY(0);
}
.sig-att-pop-head {
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.25);
}
.sig-att-pop-name {
    font-weight: 700;
    font-style: italic;
    color: #f8fafc;
    font-size: 13px;
}
.sig-att-pop-ok {
    color: #5eead4;
    font-weight: 600;
    font-size: 11px;
    margin-left: 4px;
}
.sig-att-pop-when {
    margin-top: 2px;
    color: #94a3b8;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}
.sig-att-pop-row {
    margin-bottom: 8px;
}
.sig-att-pop-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #94a3b8;
    margin-bottom: 3px;
}
.sig-att-pop-hash-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.sig-att-pop-hash {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 5px 7px;
    border-radius: 4px;
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(148, 163, 184, 0.2);
    color: #cbd5e1;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 10.5px;
    line-height: 1.4;
    word-break: break-all;
    user-select: all;
}
.sig-att-pop-copy {
    flex: 0 0 auto;
    align-self: stretch;
    min-width: 58px;
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid rgba(94, 234, 212, 0.35);
    background: rgba(15, 118, 110, 0.35);
    color: #ccfbf1;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}
.sig-att-pop-copy:hover {
    background: rgba(15, 118, 110, 0.55);
    border-color: rgba(94, 234, 212, 0.55);
}
.sig-att-pop-copy.is-ok {
    background: rgba(16, 185, 129, 0.45);
    border-color: #34d399;
    color: #ecfdf5;
}
.sig-att-pop-copy.is-err {
    background: rgba(185, 28, 28, 0.4);
    border-color: #f87171;
    color: #fef2f2;
}
.sig-att-pop-empty {
    color: #94a3b8;
    font-size: 11px;
    font-style: italic;
}
.sig-att-pop-foot {
    margin-top: 2px;
    padding-top: 6px;
    border-top: 1px solid rgba(148, 163, 184, 0.18);
    font-size: 10px;
    color: #64748b;
}

/*
 * Sliding Editor / Form workspace switch (mock style):
 *  - Soft tinted track (light blue / light purple)
 *  - Solid circle knob slides left ↔ right
 *  - Active mode name sits on the opposite side of the knob
 */
.workspace-switch {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 2px;
    cursor: pointer;
    vertical-align: middle;
    -webkit-tap-highlight-color: transparent;
    box-shadow: none !important;
    outline: none;
}
.workspace-switch-track {
    position: relative;
    display: inline-block;
    width: 108px;
    height: 32px;
    border-radius: 999px;
    box-sizing: border-box;
    box-shadow:
        inset 0 1px 2px rgba(255,255,255,0.55),
        0 1px 2px rgba(0,0,0,0.18);
    transition: background 0.22s ease, box-shadow 0.22s ease;
    user-select: none;
    overflow: hidden;
}
/* Editor: light cyan track */
.workspace-switch.is-editor .workspace-switch-track {
    background: linear-gradient(180deg, #b8ecff 0%, #7ad8f5 100%);
}
/* Form: light purple track */
.workspace-switch.is-form .workspace-switch-track {
    background: linear-gradient(180deg, #ddd6fe 0%, #c4b5fd 100%);
}
/* Single label — text content set via ::after from state */
.workspace-switch-label {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.01em;
    pointer-events: none;
    z-index: 1;
    transition: left 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
                right 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
                color 0.22s ease;
}
/* Knob on left → label on right ("Editor") */
.workspace-switch.is-editor .workspace-switch-label {
    left: auto;
    right: 12px;
    color: #0b4f6c;
}
.workspace-switch.is-editor .workspace-switch-label::after {
    content: "Editor";
}
/* Knob on right → label on left ("Forms") */
.workspace-switch.is-form .workspace-switch-label {
    left: 12px;
    right: auto;
    color: #4c1d95;
}
.workspace-switch.is-form .workspace-switch-label::after {
    content: "Forms";
}
/* Circular knob */
.workspace-switch-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    z-index: 2;
    transition:
        transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
        background 0.22s ease,
        box-shadow 0.22s ease;
    box-shadow:
        0 1px 3px rgba(0,0,0,0.28),
        inset 0 1px 1px rgba(255,255,255,0.35);
}
.workspace-switch.is-editor .workspace-switch-knob {
    transform: translateX(0);
    background: radial-gradient(circle at 35% 30%, #5ecfff 0%, #0099cc 55%, #0077aa 100%);
}
.workspace-switch.is-form .workspace-switch-knob {
    /* track 108 - padding 3 - knob 26 = 79 */
    transform: translateX(76px);
    background: radial-gradient(circle at 35% 30%, #a78bfa 0%, #7c3aed 55%, #5b21b6 100%);
}
.workspace-switch:hover .workspace-switch-track {
    filter: brightness(1.04);
}
.workspace-switch:focus-visible .workspace-switch-track {
    outline: 2px solid #fff;
    outline-offset: 2px;
}
.workspace-switch:active .workspace-switch-knob {
    transform: scale(0.96);
}
.workspace-switch.is-form:active .workspace-switch-knob {
    transform: translateX(76px) scale(0.96);
}

/* Size inputs on form field toolbar */
.form-field-size-input {
    width: 48px !important;
    font-size: 12px;
    padding: 2px 4px;
    border: 1px solid #ccc;
    border-radius: 3px;
}
.form-field-size-label {
    font-size: 11px;
    font-weight: 700;
    color: #555;
    margin-right: 1px;
}

/* --- FILLABLE FORM FIELD DESIGNER --- */
.formFieldOverlay {
    position: absolute;
    /* Fallback only; real order is inline style.zIndex from the page stack */
    z-index: 10;
    box-sizing: border-box;
    cursor: move;
    min-width: 0;
    min-height: 0;
}
.form-field-body {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: 1.5px solid #7c3aed;
    /* Mostly solid so page text/stamps don't bleed through the widget chrome */
    background: rgba(245, 243, 255, 0.94);
    border-radius: 3px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    overflow: hidden;
    pointer-events: none;
    font-family: system-ui, sans-serif;
    z-index: 1;
}
/* Form design: read as a widget on a finished page, not a translucent selection */
body.workspace-form .form-field-body {
    background: rgba(245, 243, 255, 0.97);
    box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.12);
}
.form-field-checkbox .form-field-body,
.form-field-radio .form-field-body {
    justify-content: center;
    padding: 0;
    background: rgba(124, 58, 237, 0.12);
}
.form-field-check-box {
    width: 60%;
    height: 60%;
    border: 2px solid #5b21b6;
    border-radius: 2px;
    background: #fff;
    box-sizing: border-box;
}
.form-field-radio-dot {
    width: 55%;
    height: 55%;
    border: 2px solid #5b21b6;
    border-radius: 50%;
    background: #fff;
    box-sizing: border-box;
    position: relative;
}
.form-field-radio-dot::after {
    content: "";
    position: absolute;
    inset: 22%;
    border-radius: 50%;
    background: #7c3aed;
    opacity: 0.35;
}
.form-field-signature .form-field-body {
    border-style: dashed;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    background: repeating-linear-gradient(
        -45deg,
        rgba(124, 58, 237, 0.06),
        rgba(124, 58, 237, 0.06) 8px,
        rgba(124, 58, 237, 0.12) 8px,
        rgba(124, 58, 237, 0.12) 16px
    );
}
.form-field-signature .form-field-hint {
    width: 100%;
    border-top: 1px solid #a78bfa;
    margin-top: 4px;
    padding-top: 2px;
    font-style: italic;
}
.form-field-badge {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 800;
    color: #5b21b6;
    background: #ede9fe;
    border-radius: 3px;
    padding: 0 4px;
    line-height: 1.4;
}
.form-field-label {
    font-size: 10px;
    font-weight: 700;
    color: #5b21b6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 45%;
}
.form-field-hint {
    font-size: 11px;
    color: #6d28d9;
    opacity: 0.75;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}
.form-field-chevron {
    margin-left: auto;
    font-size: 9px;
    color: #5b21b6;
    flex-shrink: 0;
}
.formFieldOverlay.overlay-active .textControls { display: flex; }
.form-field-controls {
    gap: 6px;
    flex-wrap: wrap;
    max-width: min(420px, 70vw);
}
.form-field-controls input[type="text"],
.form-field-controls input[type="number"] {
    font-size: 12px;
    padding: 2px 4px;
    border: 1px solid #ccc;
    border-radius: 3px;
}
.form-field-check-label {
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
    user-select: none;
}
.form-field-opts-btn {
    font-size: 12px;
    font-weight: 600;
    padding: 2px 8px;
    border: 1px solid #7c3aed;
    background: #ede9fe;
    color: #5b21b6;
    border-radius: 4px;
    cursor: pointer;
}
.form-field-opts-btn:hover { background: #ddd6fe; }

.resizeHandle {
    position: absolute; background: #fff; border: 1px solid #000; cursor: se-resize; display: none;
    /* handle on outer box (OD), not padding edge */
    right: calc(-7px * var(--ui-inverse-scale, 1) - var(--od-br, 0px));
    bottom: calc(-7px * var(--ui-inverse-scale, 1) - var(--od-bb, 0px));
    width: calc(14px * var(--ui-inverse-scale, 1));
    height: calc(14px * var(--ui-inverse-scale, 1));
	z-index: 1;
    transform: rotate(var(--chrome-counter-rot, 0deg));
}
.overlay-active .resizeHandle { display: block; }

/* --- TEXT & SHAPE OVERLAY STYLES --- */
.textOverlay, .shapeOverlay { position: absolute; z-index: 10; box-sizing: border-box; }
.textOverlay { 
    font-family: Arial, sans-serif; 
    min-width: 10px; 
    min-height: 12px; 
}

.textControls {
    position: absolute;
    bottom: calc(100% + var(--od-bt, 0px));
    left: calc(0px - var(--od-bl, 0px));
    margin-block: 6px;
    background: #fff; border: 1px solid #ccc; border-radius: 4px; display: none; padding: 4px 8px; gap: 8px; 
    align-items: center; box-shadow: 0 2px 4px rgba(0,0,0,0.2); z-index: 100; width: max-content;
    /* inverse zoom + counter-rotate when parent rotates */
    transform: rotate(var(--chrome-counter-rot, 0deg)) scale(var(--ui-inverse-scale, 1));
    transform-origin: bottom left;
}
/* Only show shape controls when the shape is clicked */
.shapeOverlay.overlay-active .textControls { display: flex; }

/* text toolbar only while editing */
.textOverlay.overlay-active:focus-within .textControls { display: flex; }

/* hide chrome while dragging */
.is-dragging .textControls,
.is-dragging .deleteHandle,
.is-dragging .resizeHandle {
    display: none !important;
}

.textContent { 
    outline: none; 
    min-height: 12px; 
    min-width: 100%; 
    cursor: text; 
    padding: 2px; 
    box-sizing: border-box; 
}
.textContent:empty::before { content: "\200B"; }

.textDragHandle {
    position: absolute;
    top: calc(0px - var(--od-bt, 0px));
    background: #0af; color: #fff; cursor: move; display: none; 
    align-items: center; justify-content: center; border-radius: 0; user-select: none; z-index: 100;
    left: calc(-24px * var(--ui-inverse-scale, 1) - var(--od-bl, 0px));
    width: calc(24px * var(--ui-inverse-scale, 1));
    height: calc(24px * var(--ui-inverse-scale, 1));
    font-size: calc(14px * var(--ui-inverse-scale, 1));
    transform: rotate(var(--chrome-counter-rot, 0deg));
}
.textOverlay.overlay-active .textDragHandle, .shapeOverlay.overlay-active .textDragHandle, .overlayImg.overlay-active .textDragHandle { display: flex; }

/* --- HEADER BAR (Merged Glassmorphism + Pro Alignment) --- */
#headerBar {
    position: fixed; top: 0; left: 0; right: 0; height: 40px; 
    display: flex; align-items: center;
    padding: 0 6px; gap: 5px;
    z-index: 99999; 
    background: rgba(34, 34, 34, 0.45); 
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15); 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: background 0.25s ease, border-color 0.25s ease;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    /* Thin scrollbar if forced to scroll on very narrow screens */
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.35) transparent;
}
#headerBar::-webkit-scrollbar { height: 4px; }
#headerBar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.35); border-radius: 2px; }

#headerBar:hover { 
    background: rgba(34, 34, 34, 0.95); 
    border-bottom: 1px solid rgba(255, 255, 255, 0.3); 
}

.header-divider { 
    width: 1px; height: 22px; 
    flex: 0 0 auto;
    background: rgba(255,255,255,0.28); 
    margin: 0 3px; 
}

/* Base style for ALL buttons to keep text on one line */
#headerBar button, 
#headerBar select {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px; 
    height: 28px; 
    padding: 0 8px;
    font-size: 14px; 
    font-family: Arial, sans-serif;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    white-space: nowrap; /* Stops text from stacking! */
    box-sizing: border-box;
    transition: filter 0.1s;
    background: #fff; /* Default background for un-targeted buttons */
    color: #333;
    flex: 0 0 auto;
}

/* Undo / Redo / Pages — full labels by default; icons only when narrow */
#headerBar .header-action-btn {
    gap: 5px;
    padding: 0 10px;
    font-size: 13px;
    font-weight: 600;
}
#headerBar .header-action-btn .btn-icon {
    font-size: 15px;
    line-height: 1;
}
#headerBar .header-action-btn .btn-label {
    display: inline;
}

/* Zoom / help stay icon-sized always */
#headerBar .header-icon-btn {
    width: 30px;
    min-width: 30px;
    padding: 0;
    font-size: 15px;
    line-height: 1;
}
#headerBar .header-icon-btn.zoom-btn {
    font-size: 18px;
    font-weight: bold;
}
#headerBar #zoomLabel {
    color: #fff;
    font-weight: bold;
    min-width: 2.6em;
    text-align: center;
    font-family: system-ui, sans-serif;
    font-size: 12px;
    flex: 0 0 auto;
    user-select: none;
}
#headerBar .help-btn {
    border-radius: 50% !important;
    width: 26px;
    min-width: 26px;
    min-height: 26px;
    height: 26px;
    font-weight: bold;
    font-family: serif;
    font-size: 15px;
    background: #555 !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.3) !important;
}

/* OCR: full label on wide bars; short "OCR" when tight */
#headerBar .header-ocr-btn .label-short { display: none; }
#headerBar .header-ocr-btn .label-full { display: inline; }

/* ✨ THE FIX: Use brightness for hover! 
   This lets the Green/Blue/Purple buttons keep their color when you hover! */
#headerBar button:hover, 
#headerBar select:hover {
    filter: brightness(0.70); /* Darkens the button slightly */
}
#headerBar button:active, 
#headerBar select:active {
    filter: brightness(0.50); /* Darkens more when clicked */
}

/* --- YOUR SPECIFIC BUTTON COLORS & POSITIONS --- */
#headerBar #openPdfBtn { 
    font-weight: bold; 
    background: #f8f9fa; 
	margin-left:15px;
}

#headerBar #fileMenuSelect { 
    font-weight: bold; 
    background: #f8f9fa; 
    margin-left: 8px;
    width: 85px; /* closed width only — open list still shows full option text */
}

#headerBar #toolModeSelect { 
    font-weight: bold; 
    background: #0af; /* JS: select=blue, editor-tool=pastel coral, form-tool=soft violet */
    color: white; 
    /* Wide enough for "Pointer / Move" without clipping the closed control */
	width: 148px;
    min-width: 148px;
}
/* Soften native open list a bit where the browser allows (closed control still driven by JS colors) */
#headerBar #toolModeSelect option {
    background: #fff8f3;
    color: #3d2a1f;
}
#headerBar #toolModeSelect optgroup {
    background: #fff1e6;
    color: #5c4033;
    font-weight: 700;
}

/* Workspace switch: kill the default white header-button chrome */
#headerBar #workspaceModeSwitch.workspace-switch,
#headerBar button.workspace-switch {
    background: transparent !important;
    color: inherit;
    height: auto;
    min-height: 0;
    padding: 0;
    margin: 0 2px;
    border: none;
    border-radius: 0;
    box-shadow: none;
    gap: 0;
    filter: none !important;
}
#headerBar #workspaceModeSwitch.workspace-switch:hover,
#headerBar #workspaceModeSwitch.workspace-switch:active {
    filter: none !important;
    background: transparent !important;
}

#headerBar #printBtn { 
    background: #28a745; 
    color: white; 
    font-weight: bold;
	margin-right:15px;
}

#headerBar #ocrBtn {
    background: #6f42c1;
    color: white;
    font-weight: bold;
    padding: 0 10px;
}

/*
 * Responsive header density:
 *  - Default = FULL labels (Undo / Redo / Pages & History / Scan OCR)
 *  - .is-compact is toggled by JS when #headerBar would overflow (works with
 *    Windows DPI scaling and non-maximized windows — pure max-width media
 *    queries were wrong for “wide monitor, scaled CSS px < 1400”).
 */
#headerBar.is-compact {
    gap: 4px;
    padding: 0 4px;
}
#headerBar.is-compact .header-action-btn .btn-label {
    display: none;
}
#headerBar.is-compact .header-action-btn {
    width: 30px;
    min-width: 30px;
    padding: 0;
}
#headerBar.is-compact .header-ocr-btn .label-full {
    display: none;
}
#headerBar.is-compact .header-ocr-btn .label-short {
    display: inline;
}
#headerBar.is-compact #ocrBtn {
    padding: 0 8px;
}
#headerBar.is-compact .header-divider {
    margin: 0 2px;
}
#headerBar.is-compact #toolModeSelect {
    width: 136px;
    min-width: 136px;
}

/* Mild layout tweaks only — do NOT hide action labels here */
@media (max-width: 1280px) {
    #headerBar #fileMenuSelect {
        width: 78px;
        margin-left: 4px;
    }
    #headerBar #toolModeSelect {
        width: 130px;
        min-width: 130px;
        font-size: 13px;
    }
    .workspace-switch-track {
        width: 96px;
        height: 30px;
    }
    .workspace-switch-knob {
        width: 24px;
        height: 24px;
        top: 3px;
        left: 3px;
    }
    .workspace-switch.is-form .workspace-switch-knob {
        transform: translateX(69px);
    }
    .workspace-switch.is-form:active .workspace-switch-knob {
        transform: translateX(69px) scale(0.96);
    }
    .workspace-switch-label {
        font-size: 12px;
    }
    .workspace-switch.is-editor .workspace-switch-label { right: 10px; }
    .workspace-switch.is-form .workspace-switch-label { left: 10px; }
}

@media (max-width: 1100px) {
    #headerBar .header-divider:not(.header-divider-end) {
        display: none;
    }
    #headerBar #toolModeSelect {
        width: 120px;
        min-width: 120px;
    }
    .workspace-switch-track {
        width: 88px;
    }
    .workspace-switch.is-form .workspace-switch-knob {
        transform: translateX(61px);
    }
    .workspace-switch.is-form:active .workspace-switch-knob {
        transform: translateX(61px) scale(0.96);
    }
    .workspace-switch.is-editor .workspace-switch-label::after {
        content: "Edit";
    }
    .workspace-switch.is-form .workspace-switch-label::after {
        content: "Form";
    }
}

/* Push zoom cluster to the right edge of the bar */
#zoomOutBtn {
    margin-left: auto; 
}

/* --- SIGNATURE MODAL --- */
#sigModal {
    position: fixed; top: 60px; left: 20px; background: #fff; padding: 15px; border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3); z-index: 100000; width: 300px; display: flex; flex-direction: column; gap: 10px;
}
#sigModalHeader { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
#sigModalHeader h3 { margin: 0; color: #333; }
#closeSigBtn { background: none; border: none; font-size: 18px; cursor: pointer; }

#sigInput { padding: 8px; font-size: 16px; border: 1px solid #ccc; border-radius: 4px; outline: none; }
.sig-attestation-block {
    margin: 10px 0 6px;
    padding: 10px 12px;
    background: #f5f3ff;
    border: 1px solid #c4b5fd;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.45;
    color: #3730a3;
}
.sig-attestation-label {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    cursor: pointer;
    user-select: none;
}
.sig-attestation-label input { margin-top: 3px; flex-shrink: 0; }
.sig-attestation-hint {
    margin: 8px 0 0;
    font-size: 11px;
    color: #6d28d9;
    opacity: 0.9;
}
#sigPreviews { display: flex; flex-direction: column; gap: 10px; max-height: 250px; overflow-y: auto; }
.sig-preview-img { border: 1px solid #eee; border-radius: 4px; cursor: crosshair; padding: 5px; background: #fdfdfd; transition: background 0.2s, border-color 0.2s; width: 100%; box-sizing: border-box; }
.sig-preview-img:hover { background: #f0f8ff; border-color: #0af; }

.pageWrapper { 
    position: relative; 
    margin: 20px auto; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.3); 
    background-color: #fff;
    /*transition: width 0.15s ease, height 0.15s ease;*/
	content-visibility: auto;
    contain-intrinsic-size: var(--base-height);
}
.pageContainer { 
    position: absolute; 
    top: 0; left: 0;
    margin: 0; width: 100%; height: 100%;
    box-shadow: none; background-color: transparent;
    transform-origin: top left;
    /*transition: transform 0.15s ease;*/
}

/* ==========================================
   RICH TEXT TOOLBAR STYLES
   ========================================== */
.rt-toolbar {
    display: flex; flex-wrap: wrap; gap: 6px; align-items: center; 
    background: #f4f6f8; padding: 6px 8px; border-radius: 4px; 
    border: 1px solid #ddd; margin-bottom: 4px;
}
.rt-divider { width: 1px; height: 24px; background: #ccc; margin: 0 2px; }
.rt-select { 
    padding: 4px; border-radius: 4px; border: 1px solid #ccc; 
    cursor: pointer; outline: none; background: #fff; flex-grow: 1; 
}
.rt-input { 
    width: 45px; padding: 4px; border-radius: 4px; 
    border: 1px solid #ccc; outline: none; cursor: text;
}
.rt-color-wrap { 
    display: flex; align-items: center; border: 1px solid #ccc; 
    border-radius: 4px; padding: 0 4px; height: 26px; background: #fff; 
}
.rt-color-picker { 
    cursor: pointer; padding: 0; border: none; width: 22px; 
    height: 20px; background: transparent; outline: none; 
}
.rt-icon { font-size: 14px; color: #555; margin-right: 4px; }
.rt-icon.serif { font-weight: bold; font-family: serif; color: #333; }
.rt-btn { 
    padding: 4px 8px; border: 1px solid #ccc; border-radius: 4px; 
    cursor: pointer; background: #fff; display: flex; 
    align-items: center; justify-content: center; color: #555; 
}
.rt-btn:hover { background: #e2e6ea; }
.rt-btn.clear-btn { 
    border: none; border-left: 1px solid #ccc; padding: 0 6px; 
    margin-left: 4px; font-weight: bold; font-size: 16px; height: 100%; border-radius: 0;
}
.rt-btn.btn-i { font-style: italic; font-weight: bold; font-family: serif; width: 26px; }
.rt-btn.btn-u { text-decoration: underline; font-weight: bold; font-family: serif; width: 26px; }
.rt-input-bare { width: 45px; padding: 0; border: none; outline: none; background: transparent; }

/* --- NATIVE PRINT STYLES --- */
@media print {
    /* ✨ THE GHOSTBUSTER NUKE: Hide absolutely everything in the body EXCEPT the print area */
    body > *:not(#printArea) { 
        display: none !important; 
    }
    body, 
    .pageContainer, 
    .textOverlay, 
    .shapeOverlay,
    .overlayImg {
        /* Force the browser to render background colors and images */
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        
        /* Legacy Firefox support */
        color-adjust: exact !important; 
    }
    @page { 
        size: auto; 
        margin: 0mm !important; 
    }
    
    html, body { 
        height: max-content !important; 
        margin: 0 !important; 
        padding: 0 !important; 
        overflow: visible !important; 
        background: #fff !important; 
    }

    #printArea { 
        display: block !important; 
        margin: 0 !important; 
        padding: 0 !important; 
        font-size: 0; 
        line-height: 0; 
    }

    .print-page-wrapper { 
        position: relative; 
        width: 100%; 
        display: block; 
        /* Keep pages together and force breaks AFTER each one */
        page-break-inside: avoid; 
        break-inside: avoid;
        page-break-after: always; 
        break-after: page; 
        margin: 0 !important; 
        padding: 0 !important; 
    }

    /* ✨ Cancel the page break strictly on the LAST page so it doesn't spawn an empty trailing sheet */
    .print-page-wrapper:last-of-type {
        page-break-after: auto !important;
        break-after: auto !important;
    }

    .print-page-img { 
        width: 100% !important; 
        height: auto; 
        display: block; 
        margin: 0 auto;
    }
}

.deleteHandle {
    position: absolute;
    top: calc(0px - var(--od-bt, 0px));
    background: #ff4444; color: #fff; cursor: pointer; display: none; 
    align-items: center; justify-content: center; border-radius: 4px 0 0 4px; user-select: none; z-index: 100; line-height: 1;
    left: calc(-48px * var(--ui-inverse-scale, 1) - var(--od-bl, 0px));
    width: calc(24px * var(--ui-inverse-scale, 1));
    height: calc(24px * var(--ui-inverse-scale, 1));
    font-size: calc(18px * var(--ui-inverse-scale, 1));
    transform: rotate(var(--chrome-counter-rot, 0deg));
}
.overlay-active .deleteHandle { display: flex; }
.deleteHandle:hover { background: #cc0000; }
/* --- EDIT TEXT MODAL --- */
#editModal {
    display: none; 
    position: fixed; 
    top: 50%; left: 50%; 
    transform: translate(-50%, -50%); 
    background: #fff; 
    padding: 20px; 
    border-radius: 6px; 
    box-shadow: 0 4px 20px rgba(0,0,0,0.4); 
    z-index: 100001; 
    
    min-width: 300px; 
    width: 800px; 
    max-width: 90vw; 
    
    flex-direction: column; 
    gap: 10px;
}
#editModalHeader { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }
#editModalHeader h3 { margin: 0; color: #333; }
#closeEditModalBtn { background: none; border: none; font-size: 18px; cursor: pointer; }

/* --- EDIT TEXT MODAL --- */
#editModalTextWrapper {
    width: 100%; 
    /* ✨ THE CEILING LOCK: Hard-code the exact height so it NEVER shapeshifts! */
    height: 180px; 
    border: 1px solid #ccc; 
    border-radius: 4px; 
    overflow: auto; /* Enables BOTH vertical and horizontal scrollbars natively */
    background: #fff; 
    box-sizing: border-box;
}

#editModalText {
    min-height: 80px; 
    min-width: 100%;
    width: max-content; 
    white-space: nowrap; 
    padding: 6px; 
    font-size: 14px; 
    box-sizing: border-box; 
    outline: none; 
    zoom: 1.5; 
}

.editModalControls { display: flex; justify-content: space-evenly; align-items: center; font-size: 13px; margin: 5px 0; }
.editModalControls label { display: flex; align-items: center; gap: 5px; cursor: pointer; }
.editModalControls input[type="color"], .editModalControls input[type="checkbox"] { cursor: pointer; }

#applyEditModalBtn {
    background: #0af; color: white; padding: 10px; border: none; 
    border-radius: 4px; font-weight: bold; cursor: pointer; margin-top: 5px;
}
#editModal, #sigModal, #helpModal {
    cursor: grab;
    user-select: none;
    box-sizing: border-box; /* ✨ THE FIX: Forces padding to live inside the width! */
}
#editModal:active, #sigModal:active, #helpModal:active {
    cursor: grabbing;
}
/* Reset cursor for interactive elements inside the modal */
#editModalText, .editModalControls, #sigPreviews, button, input, select, label {
    cursor: auto; 
    user-select: auto;
}
#applyEditModalBtn:hover { background: #0099e6; }

/* --- ALIGNMENT GUIDES --- */
.snap-guide { position: absolute; background: #0af; pointer-events: none; display: none; z-index: 9999; }
#guide-vertical { top: 0; bottom: 0; width: 1px; }
#guide-horizontal { left: 0; right: 0; height: 1px; }
/* --- HISTORY SIDEBAR --- */
#historySidebar {
	border-left: 1px solid #cbd5e1;
    position: fixed;
    top: 40px; /* Under #headerBar (height 40px); tabbed mode overrides to 72px */
    right: -320px; /* Hidden off-screen by default */
    width: 300px;
    bottom: 0;
    background: #fff;
    box-shadow: -12px 0 30px rgba(0, 0, 0, 0.15), 
                -2px 0 8px rgba(0, 0, 0, 0.08);
    z-index: 99998; /* below header (99999) and tab bar (100000) */
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Smooth slide */
    display: flex;
    flex-direction: column;
	border-bottom-left-radius: 8px;
}
#historySidebar.sidebar-open { right: 0; }

.history-header {
    padding: 15px; background: #f8f9fa; border-bottom: 1px solid #ddd;
    display: flex; justify-content: space-between; align-items: center;
}
.history-header h3 { margin: 0; color: #333; font-family: sans-serif; }
#closeHistoryBtn { background: none; border: none; font-size: 24px; line-height: 1; cursor: pointer; color: #666; }
#closeHistoryBtn:hover { color: #000; }

#historyList { flex-grow: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 6px; }

.history-item {
    padding: 10px 12px; border-radius: 4px; cursor: pointer; font-size: 14px;
    font-family: sans-serif; transition: background 0.2s, transform 0.1s;
    user-select: none;
}
.history-item:active { transform: scale(0.98); }

/* The 3 States of Time Travel */
.history-item.future-state { background: #fdfdfd; color: #aaa; border-left: 4px solid #ddd; }
.history-item.future-state:hover { background: #f5f5f5; color: #888; }

.history-item.current-state { background: #0af; color: white; font-weight: bold; cursor: default; box-shadow: 0 2px 6px rgba(0, 170, 255, 0.4); }

.history-item.past-state { background: #f4f6f8; color: #333; border-left: 4px solid #28a745; }
.history-item.past-state:hover { background: #e2e6ea; }
/* ==========================================
   HELP / HOTKEY MODAL
   ========================================== */
#helpModal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    padding: 0;
    border-radius: 12px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(0, 0, 0, 0.04);
    z-index: 100001;
    width: 880px;
    max-width: 94vw;
    max-height: 88vh;
    overflow: hidden;
    display: none;
    flex-direction: column;
    cursor: grab;
    user-select: none;
}
#helpModal:active { cursor: grabbing; }
#helpModal.modal { display: none; } /* hidden until JS sets flex */
#helpModal .help-modal-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: 88vh;
    min-height: 0;
    cursor: auto;
    user-select: auto;
}

#helpModalHeader {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 22px 16px;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid #e2e8f0;
}
.help-header-text { min-width: 0; }
#helpModalHeader h3 {
    margin: 0;
    color: #0f172a;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.help-header-sub {
    margin: 4px 0 0;
    font-size: 12.5px;
    color: #64748b;
    font-weight: 500;
}
#closeHelpBtn {
    background: transparent;
    border: none;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    color: #94a3b8;
    padding: 2px 8px;
    border-radius: 6px;
    flex-shrink: 0;
}
#closeHelpBtn:hover {
    color: #0f172a;
    background: rgba(15, 23, 42, 0.06);
}

#hotkeysContainer {
    padding: 18px 20px 8px;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: #fff;
}

.help-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 22px;
    align-items: start;
}
.help-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.help-section {
    border: 1px solid #e8eef4;
    border-radius: 10px;
    padding: 12px 14px 6px;
    background: #fafbfc;
}
.help-section-head {
    margin-bottom: 6px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eef2f6;
}
.help-section-title {
    margin: 0;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #0af;
}
.help-section-hint {
    margin: 4px 0 0;
    font-size: 11.5px;
    line-height: 1.35;
    color: #94a3b8;
    font-weight: 500;
}

/* Accent per category */
.help-tone-cyan .help-section-title { color: #0891b2; }
.help-tone-violet .help-section-title { color: #7c3aed; }
.help-tone-violet {
    background: linear-gradient(180deg, #faf8ff 0%, #f8fafc 100%);
    border-color: #e9e2f8;
}
.help-tone-coral .help-section-title { color: #c27850; }
.help-tone-amber .help-section-title { color: #b45309; }
.help-tone-slate .help-section-title { color: #475569; }

.help-rows {
    list-style: none;
    margin: 0;
    padding: 0;
}
.help-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px solid #f1f5f9;
}
.help-row:last-child { border-bottom: none; }
.help-action {
    flex: 1 1 auto;
    min-width: 0;
    color: #334155;
    font-size: 13px;
    line-height: 1.35;
    font-weight: 500;
}
.help-keys {
    flex: 0 0 auto;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    max-width: 52%;
}
.help-key-sep {
    font-size: 10px;
    font-weight: 600;
    color: #94a3b8;
    text-transform: lowercase;
    padding: 0 1px;
}

kbd,
.help-kbd {
    display: inline-block;
    background: #fff;
    border: 1px solid #d1d5db;
    border-bottom-width: 2px;
    border-radius: 5px;
    padding: 2px 7px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11.5px;
    font-weight: 650;
    color: #374151;
    min-width: 1.1em;
    text-align: center;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
    white-space: nowrap;
    line-height: 1.4;
}

.help-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 8px;
    padding: 12px 18px;
    text-align: center;
    border-top: 1px solid #e2e8f0;
    color: #64748b;
    font-size: 12.5px;
    background: #f8fafc;
    line-height: 1.4;
}
.help-footer-sep { color: #cbd5e1; user-select: none; }
.help-footer .help-kbd { font-size: 11px; padding: 1px 6px; }
.help-howto-link {
    display: inline-flex;
    align-items: center;
    font-weight: 700;
    font-size: 12.5px;
    color: #0054a4;
    text-decoration: none;
    padding: 3px 10px;
    border-radius: 999px;
    background: #e8f1fa;
    border: 1px solid #cfe0f2;
}
.help-howto-link:hover {
    background: #d5e6f6;
    color: #0b3d6e;
}

@media (max-width: 720px) {
    .help-grid { grid-template-columns: 1fr; }
    .help-keys { max-width: 48%; }
}
/* --- TABBED SIDE PANEL UPGRADES --- */
.panel-tabs {
    display: flex; background: #f8f9fa; border-bottom: 1px solid #ddd;
}
.panel-tab {
    flex-grow: 1; padding: 12px 10px; background: none; border: none; border-bottom: 3px solid transparent;
    font-weight: bold; color: #666; cursor: pointer; font-size: 14px; outline: none;
}
.panel-tab.active { color: #0af; border-bottom-color: #0af; background: #fff; }
.panel-tab:hover:not(.active) { background: #eee; }

.panel-content { display: none; flex-direction: column; flex-grow: 1; overflow-y: auto; padding: 10px; }
.panel-content.active { display: flex; }

/* --- PAGE THUMBNAILS --- */
#pageThumbList { display: flex; flex-direction: column; gap: 10px; padding-bottom: 20px; }

.thumb-item {
    position: relative; background: #f4f6f8; border: 2px solid #ddd; border-radius: 6px;
    padding: 8px; display: flex; flex-direction: column; align-items: center; cursor: grab;
    transition: transform 0.1s, border-color 0.2s; user-select: none;
}
.thumb-item:active { cursor: grabbing; transform: scale(0.98); }
.thumb-item.drag-over { border-color: #0af; background: #e6f7ff; transform: scale(1.02); }

.thumb-item canvas {
    max-width: 100px; height: auto; border: 1px solid #ccc; background: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); pointer-events: none;
}
.thumb-label { 
    margin-top: 8px; font-family: sans-serif; font-size: 13px; font-weight: bold; color: #555; 
    padding: 2px 4px; border: 1px solid transparent; transition: all 0.1s; 
    /* pointer-events: none; <-- REMOVED THIS SO WE CAN DOUBLE CLICK IT! */
}
/* ✨ The Editable States */
.thumb-label:hover { background: rgba(0,0,0,0.05); border-radius: 4px; cursor: text; }
.thumb-label[contenteditable="true"] { 
    background: #fff; border-color: #0af; outline: none; 
    border-radius: 4px; cursor: text; box-shadow: 0 2px 4px rgba(0,0,0,0.1); 
    white-space: normal; /* ✨ Lets long titles wrap while typing */
    word-break: break-word; /* ✨ Prevents giant words from breaking the layout */
}

.thumb-delete {
    position: absolute; top: -6px; right: -6px; background: #ff4444; color: white; border: none;
    border-radius: 50%; width: 22px; height: 22px; font-size: 12px; font-weight: bold;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3); opacity: 0; transition: opacity 0.2s;
}
.thumb-item:hover .thumb-delete { opacity: 1; }
.thumb-delete:hover { background: #cc0000; transform: scale(1.1); }
/* --- DRAG & DROP UPGRADES --- */
#dragOverlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0, 170, 255, 0.15); border: 8px dashed #0af;
    z-index: 999999; display: flex; align-items: center; justify-content: center;
    /* ✨ CRITICAL: pointer-events: none lets the mouse "see" the sidebar underneath! */
    pointer-events: none; 
    box-sizing: border-box; transition: background 0.2s, border-color 0.2s;
}
#dragOverlayText {
    background: white; padding: 20px 40px; border-radius: 12px; font-family: sans-serif;
    font-size: 28px; font-weight: bold; color: #0af; box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    transition: color 0.2s;
}

/* Export modal password block is inline-styled; ensure modal class flex works with left-aligned content */
#exportQualityModal.modal { align-items: center; justify-content: center; }

#dropChoiceModal, #insertChoiceModal, #pendingProjectModal, #alertModal, #confirmModal, #passwordModal, #saveAsModal, #exportQualityModal, #formOptionsModal {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0,0,0,0.6); z-index: 1000000;
    display: flex; align-items: center; justify-content: center;
}

.form-option-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.form-option-row input[type="text"] {
    flex: 1;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    box-sizing: border-box;
}
.form-option-row .form-option-remove {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 4px;
    background: #fee2e2;
    color: #b91c1c;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
}
.form-option-row .form-option-remove:hover { background: #fecaca; }
.form-option-row .form-option-grip {
    color: #94a3b8;
    font-size: 14px;
    user-select: none;
}
.drop-modal-content {
    background: #fff; padding: 25px; border-radius: 8px; text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5); font-family: sans-serif;
}
.drop-modal-content h3 { margin-top: 0; margin-bottom: 20px; color: #333; }
.drop-btn-group { display: flex; gap: 10px; justify-content: center; }
.drop-btn {
    padding: 10px 15px; border: none; border-radius: 4px; font-size: 14px;
    font-weight: bold; cursor: pointer; color: white; transition: transform 0.1s;
}
.drop-btn:active { transform: scale(0.95); }
.drop-btn.success { background: #28a745; }
.drop-btn.success:hover { background: #218838; }
.drop-btn.primary { background: #007bff; }
.drop-btn.primary:hover { background: #0069d9; }
.drop-btn.danger { background: #dc3545; }
.drop-btn.danger:hover { background: #c82333; }
/* --- X-RAY MODE --- */
/* Let the mouse pass through inactive overlays, but keep the active one solid! */
body.xray-mode .textOverlay:not(.overlay-active),
body.xray-mode .shapeOverlay:not(.overlay-active),
body.xray-mode .overlayImg:not(.overlay-active),
body.xray-mode .formFieldOverlay:not(.overlay-active) {
    pointer-events: none !important;
    opacity: 0.4 !important;
    transition: opacity 0.1s;
}
/* --- X-Ray HUD Indicator --- */
#xrayIndicator {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background: rgba(34, 34, 34, 0.9);
    color: #0af;
    padding: 8px 16px;
    border-radius: 20px;
    font-family: sans-serif;
    font-size: 14px;
    font-weight: bold;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    border: 2px solid #0af;
    z-index: 100000;
    pointer-events: none; /* Let the mouse pass through the HUD */
    display: none; /* Hidden by default */
}

body.xray-mode #xrayIndicator { 
    display: block; 
    animation: pulseXray 2s infinite;
}

@keyframes pulseXray {
    0% { box-shadow: 0 0 0 0 rgba(0, 170, 255, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(0, 170, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 170, 255, 0); }
}

.grid-container {
    pointer-events: none;
    z-index: 1; /* Keep it below the UI handles */
}

.table-cell {
    pointer-events: none;
}

/* The Ghost Box */
.selection-marquee {
    position: absolute;
    border: 1px dashed #0af;
    background: rgba(0, 170, 255, 0.1);
    z-index: 99999; /* Always on top while drawing */
    pointer-events: none; /* Let the mouse pass through it */
}

/* The Multi-Select Highlight (Orange to distinguish from single blue selection) */
.multi-selected {
    outline: 2px dashed #ff9900 !important;
    outline-offset: 3px;
}
/* ✨ The Floating Page Preview */
.thumb-preview-popover {
    position: fixed;
    z-index: 999999;
    background: #fff;
    border: 1px solid #cbd5e1;
    box-shadow: -8px 8px 24px rgba(0, 0, 0, 0.15);
    border-radius: 6px;
    padding: 6px;
    pointer-events: none; 
    display: none;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}
/* ✨ The Floating HUD Group Control Panel */
.group-toolbar {
    position: fixed; 
    /* Removed bottom, left, and transform! JS handles it now. */
    background: #1e293b;
    padding: 8px 12px;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    display: none; 
    gap: 6px;
    z-index: 999999;
    align-items: center;
}

.group-toolbar button {
    background: transparent;
    border: none;
    color: #cbd5e1;
    font-size: 16px;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 4px;
    transition: all 0.1s;
}

.group-toolbar button:hover {
    background: #334155;
    color: #fff;
}

.group-toolbar .divider {
    width: 1px;
    height: 24px;
    background: #475569;
    margin: 0 4px;
}
/* ✨ The Solid Stencil Shield */
.stencil-box {
    position: absolute;
    border: 1px dashed #0af;
    background: rgba(0, 170, 255, 0.05); /* Slight tint so you know it's a solid clickable zone */
    z-index: 99998;
    pointer-events: auto; /* Catch ALL clicks inside the box! */
    cursor: grab;
}

.stencil-box:active {
    cursor: grabbing;
}

.stencil-drag-handle {
    position: absolute;
    top: -1px; /* Snaps flush to the top edge */
    left: -24px; /* Pushes it exactly its own width outside the left edge */
    width: 24px;
    height: 24px;
    background: #0af;
    color: white;
    border-radius: 4px 0 0 4px; /* Rounded on the left, flat on the right to connect to the box */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: grab;
    
    /* ✨ CRUCIAL: Since it sits outside the box, it must catch its own clicks 
       and bubble them up to the Stencil Shield! */
    pointer-events: auto; 
}

.stencil-drag-handle:active {
    cursor: grabbing;
}
/* --- FILE DROPDOWN MENU --- */
.file-dropdown { position: relative; display: inline-block; }
.file-dropdown-content {
    display: none; position: absolute; background-color: #fff;
    min-width: 180px; box-shadow: 0px 8px 16px rgba(0,0,0,0.3);
    z-index: 100000; border-radius: 4px; top: 100%; left: 0;
    overflow: hidden; border: 1px solid #ccc;
}
.file-dropdown-content a {
    color: #333; padding: 10px 16px; text-decoration: none;
    display: block; font-family: sans-serif; font-size: 14px; font-weight: bold;
}
.file-dropdown-content a:hover { background-color: #f0f8ff; color: #0af; }
.file-dropdown:hover .file-dropdown-content { display: block; }
/* 1. Base style for all handles (Top center) — OD-anchored via --od-* */
.rotateHandle {
    position: absolute;
    top: calc(-40px * var(--ui-inverse-scale, 1) - var(--od-bt, 0px));
    left: 50%;
    transform: translateX(-50%) rotate(var(--chrome-counter-rot, 0deg));
    width: calc(24px * var(--ui-inverse-scale, 1));
    height: calc(24px * var(--ui-inverse-scale, 1));
    font-size: calc(16px * var(--ui-inverse-scale, 1));
    background-color: #007bff;
    color: white;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: grab;
    z-index: 100;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    user-select: none;
}

.rotateHandle:active {
    cursor: grabbing;
}

/* 2. Show the handle when active */
.textOverlay.overlay-active .rotateHandle,
.overlayImg.overlay-active .rotateHandle,
.shapeOverlay.overlay-active .rotateHandle {
    display: flex;
}

.textOverlay.overlay-active:focus-within .rotateHandle {
    display: none;
}

/* rect/circle: rotate handle top-right */
.shape-rect .rotateHandle,
.shape-circle .rotateHandle {
    top: calc(-20px * var(--ui-inverse-scale, 1) - var(--od-bt, 0px));
    right: calc(-20px * var(--ui-inverse-scale, 1) - var(--od-br, 0px));
    left: auto;
    transform: rotate(var(--chrome-counter-rot, 0deg));
}

/* Circle / ellipse — same box model as rect; radius makes ink round */
.shape-circle {
    border-radius: 50%;
}