/* ============================================================
   PDF EDITOR – Styles (mypdf.guru design system)
   ============================================================ */

body {
    background: linear-gradient(135deg, #0f1419 0%, #1a2332 50%, #0f1419 100%) !important;
    overflow-anchor: none;
    overflow-x: clip;
}

.pedit-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 20px 40px;
    color: var(--text-primary);
}

.header-section {
    text-align: center;
    margin-bottom: 36px;
}
.header-section h1 {
    font-size: 2.5rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 12px;
}
.header-section h1 i { color: #f79112; }
/* Visual-only badge via CSS — not in <title> / meta description. */
.header-section h1.pedit-page-title::after {
    content: '[beta v0.1]';
    font-size: 0.42em;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.55);
    vertical-align: super;
    line-height: 1;
    margin-left: 2px;
    align-self: flex-start;
    margin-top: 0.35em;
}
.subtitle { color: var(--text-secondary); font-size: 1.15rem; }

.upload-section {
    background: rgba(255,255,255,.05);
    border: 2px solid var(--primary-light);
    border-radius: 20px;
    padding: 30px;
    margin-bottom: 36px;
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-md);
}

.drop-zone-pdf {
    border: 3px dashed var(--primary-light);
    border-radius: 15px;
    padding: 40px 30px;
    text-align: center;
    cursor: pointer;
    transition: all .3s ease;
    background: rgba(255,255,255,.03);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Match PDF Watermark Adder drop-zone height/spacing */
    min-height: 310px;
    /* <label> reset — keep drop zone looking like a card, not form chrome */
    margin: 0;
    box-sizing: border-box;
    width: 100%;
}
.drop-zone-pdf.loading {
    pointer-events: none;
    cursor: default;
}
.drop-zone-pdf:hover {
    border-color: #f79112;
    background: rgba(247,145,18,.08);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(247,145,18,.25);
}
.drop-zone-pdf.drag-over {
    border-color: #f79112;
    background: rgba(247,145,18,.14);
    transform: scale(1.01);
}
.upload-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.upload-icon { margin-bottom: 20px; }
.upload-icon i { font-size: 3rem; color: #f79112; animation: pedit-bounce 2s infinite; }
@keyframes pedit-bounce {
    0%,100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}
.drop-zone-pdf h3 {
    color: var(--text-primary);
    font-size: 1.5rem;
    margin: 10px 0;
}
.drop-zone-pdf p {
    color: var(--text-secondary);
    font-size: 1rem;
    margin: 10px 0 20px;
}
.supported-formats { margin-top: 15px; }
.supported-formats small { color: #f79112; font-size: .9rem; }
.supported-formats i { margin-right: 5px; }

.upload-progress-container { width: 100%; margin-top: 18px; }
.upload-progress-bar {
    width: 100%; height: 28px;
    background: rgba(255,255,255,.05);
    border: 2px solid var(--primary-light);
    border-radius: 14px; overflow: hidden;
}
.upload-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-color), #f79112);
    transition: width .3s ease;
    border-radius: 14px;
}
.upload-progress-text { margin-top: 8px; font-weight: 600; font-size: .95rem; text-align: center; }

.editor-section {
    display: flex;
    flex-direction: column;
    animation: pedit-fadeInUp .4s ease;
    /* Full viewport width — break out of .pedit-container max-width */
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: 32px;
    padding-right: 32px;
    box-sizing: border-box;
}
/* Invisible layout pass while page 1 paints — upload progress stays visible.
   opacity+visibility so the gray #525659 wrap never flashes as an "empty editor". */
.editor-section.pedit-editor-preloading {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    max-width: 100vw;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: -1;
    animation: none !important;
}
/* Belt-and-suspenders: if canvas is still painting, don't show the empty gray shell. */
.pdf-canvas-wrap.pedit-awaiting-paint {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    min-height: 0;
}
@keyframes pedit-fadeInUp {
    /* No opacity fade — that stacked with the first canvas paint and looked
       like the preview was flickering on open. Keep a light rise only. */
    from { transform: translateY(12px); }
    to   { transform: translateY(0); }
}

/* Download strip + tools strip — sticks under the site navbar so tools stay
   reachable while scrolling the PDF. */
.editor-chrome {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
    position: sticky;
    /* Site .navbar is sticky at top:0 (~2rem logo + padding). Sit just under it. */
    top: 3.4rem;
    z-index: 50;
    background: linear-gradient(135deg, #0f1419 0%, #1a2332 50%, #0f1419 100%);
    padding-top: 4px;
    padding-bottom: 6px;
}

.editor-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255,255,255,.06);
    border: 2px solid var(--primary-light);
    border-radius: 14px;
    padding: 12px 18px;
    margin-bottom: 0;
    gap: 12px;
    flex-wrap: nowrap;
    backdrop-filter: blur(8px);
}
.toolbar-left  { display: flex; align-items: center; gap: 14px; flex-wrap: nowrap; min-width: 0; flex: 1 1 auto; }
.toolbar-right { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; flex-shrink: 0; }
.tb-filename { font-weight: 600; font-size: .95rem; display: flex; align-items: center; gap: 7px; min-width: 0; }
.tb-filename i { color: #f79112; flex-shrink: 0; }
.tb-filename span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-edit-count { color: var(--text-secondary); font-size: .85rem; white-space: nowrap; flex-shrink: 0; }
.tb-label { display: inline; }

.toolbar-btn.tb-icon-only {
    padding: 7px 10px;
    min-width: 36px;
    justify-content: center;
    gap: 0;
}

.toolbar-btn {
    background: rgba(255,255,255,.05);
    border: 2px solid var(--primary-light);
    border-radius: 8px;
    color: var(--text-primary);
    padding: 7px 14px;
    cursor: pointer;
    font-size: .9rem;
    font-weight: 600;
    transition: all .25s ease;
    display: flex; align-items: center; gap: 6px;
    font-family: inherit;
}
.toolbar-btn:hover:not(:disabled) { background: rgba(255,255,255,.1); border-color: #f79112; }
.toolbar-btn:disabled {
    opacity: .38;
    cursor: not-allowed;
    color: var(--text-secondary);
    border-color: rgba(255,255,255,.12);
    background: rgba(255,255,255,.02);
    box-shadow: none;
    transform: none;
}
.toolbar-btn.tb-icon-only:disabled {
    opacity: .32;
}
.tb-danger:hover { border-color: #f79112; color: #f79112; }

.btn-download-pedit {
    background: var(--accent-color);
    color: white; border: none;
    padding: 10px 22px; border-radius: 50px;
    cursor: pointer; font-size: 1rem; font-weight: 600;
    transition: all .3s ease;
    display: flex; align-items: center; gap: 8px;
    box-shadow: 0 4px 14px rgba(74,144,226,.35);
    font-family: inherit;
}
.btn-download-pedit:hover:not(:disabled) {
    background: #f79112;
    box-shadow: 0 6px 20px rgba(247,145,18,.55);
    transform: translateY(-2px);
}
.btn-download-pedit:disabled { opacity: .45; cursor: not-allowed; }

.editor-layout {
    display: flex;
    gap: 0;
    align-items: stretch;
    width: 100%;
}

.pedit-panel {
    display: none !important;
}

.pedit-panel-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 16px;
    display: flex; align-items: center; gap: 8px;
}
.pedit-panel-title i { color: #f79112; }

.pedit-mode-tabs {
    display: none;
}
.pedit-mode-tab {
    flex: 1;
    padding: 9px 8px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary);
    font-size: .84rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .25s ease;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    font-family: inherit;
}
.pedit-mode-tabs .pedit-mode-tab:hover { color: var(--text-primary); background: rgba(255,255,255,.06); }
.pedit-mode-tabs .pedit-mode-tab.active {
    background: linear-gradient(135deg, #f79112, #ff6b35);
    color: white;
    box-shadow: 0 2px 10px rgba(247,145,18,.35);
}

.pedit-mode-hint {
    background: rgba(74,144,226,.12);
    border: 1px solid rgba(74,144,226,.35);
    border-radius: 8px;
    padding: 10px 12px;
    color: #7eb8f0;
    font-size: .85rem;
    font-weight: 600;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 0;
    line-height: 1.45;
}
.pedit-mode-hint.add-mode {
    background: rgba(247,145,18,.12);
    border-color: rgba(247,145,18,.35);
    color: #f79112;
}

.pedit-label {
    display: block;
    font-size: .8rem;
    font-weight: 700;
    color: var(--text-secondary);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.pedit-text-input,
.pedit-add-input {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid var(--primary-light);
    border-radius: 10px;
    background: rgba(255,255,255,.96);
    color: #1a1a2e;
    font-size: .95rem;
    font-family: inherit;
    resize: vertical;
    margin-bottom: 14px;
    transition: border-color .2s ease;
    box-sizing: border-box;
}
.pedit-text-input:focus,
.pedit-add-input:focus {
    outline: none;
    border-color: #f79112;
    box-shadow: 0 0 0 3px rgba(247,145,18,.2);
}

.pedit-prop-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    font-weight: 700;
    font-size: .92rem;
}
.pedit-prop-header i { color: #f79112; margin-right: 6px; }
.pedit-link-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    display: flex; align-items: center; gap: 4px;
    font-family: inherit;
    padding: 4px 6px;
    border-radius: 6px;
    transition: all .2s ease;
}
.pedit-link-btn:hover { color: #f79112; background: rgba(247,145,18,.1); }

.pedit-font-row {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
}
.pedit-font-btn,
.pedit-add-font-btn {
    flex: 1;
    padding: 8px 4px;
    border: 2px solid var(--primary-light);
    border-radius: 8px;
    background: rgba(255,255,255,.04);
    color: var(--text-primary);
    font-size: .72rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s ease;
    font-family: inherit;
}
.pedit-font-btn:hover,
.pedit-add-font-btn:hover { border-color: #f79112; }
.pedit-font-btn.active,
.pedit-add-font-btn.active {
    border-color: #f79112;
    background: rgba(247,145,18,.15);
    color: #f79112;
}

.pedit-size-color-row {
    display: flex;
    gap: 12px;
    margin-bottom: 14px;
}
.pedit-size-wrap { flex: 1; }
.pedit-color-wrap { flex-shrink: 0; }
.pedit-size-wrap input[type="range"] {
    width: 100%;
    accent-color: #f79112;
    cursor: pointer;
}
.pedit-color-input {
    width: 44px;
    height: 36px;
    padding: 2px;
    border: 2px solid var(--primary-light);
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
}

.pedit-style-row {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
}
.pedit-style-btn {
    flex: 0 0 auto;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border: 2px solid var(--primary-light);
    border-radius: 8px;
    background: rgba(255,255,255,.04);
    color: var(--text-primary);
    font-size: .9rem;
    font-weight: 700;
    cursor: pointer;
    transition: all .2s ease;
    font-family: inherit;
    display: flex; align-items: center; justify-content: center; gap: 6px;
}
.pedit-style-btn:hover { border-color: #f79112; }
.pedit-style-btn.active {
    border-color: #f79112;
    background: rgba(247,145,18,.15);
    color: #f79112;
}
.pedit-delete-btn {
    flex: 1;
    font-size: .82rem;
    font-weight: 600;
}
.pedit-delete-btn:hover {
    border-color: #e74c3c;
    color: #e74c3c;
    background: rgba(231,76,60,.1);
}

#pedit-move-btn.dragging,
#pedit-move-btn.active {
    border-color: #f79112;
    background: rgba(247,145,18,.2);
    color: #f79112;
}

/* ─── Font dropdown ─────────────────────────────────────────── */
.pedit-font-select {
    width: 100%;
    padding: 9px 12px;
    border: 2px solid var(--primary-light);
    border-radius: 10px;
    background: rgba(255,255,255,.96);
    color: #1a1a2e;
    font-size: .9rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    margin-bottom: 14px;
    box-sizing: border-box;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.pedit-font-select:focus {
    outline: none;
    border-color: #f79112;
    box-shadow: 0 0 0 3px rgba(247,145,18,.2);
}

/* Custom font picker (hover preview — native <select> cannot do this on Windows) */
.pedit-font-picker {
    position: relative;
    width: 100%;
}
.pedit-font-picker--float {
    width: auto;
    flex-shrink: 0;
}
.pedit-font-native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
}
.pedit-font-picker-btn.pedit-font-select {
    width: 100%;
    text-align: left;
    margin-bottom: 14px;
}
.pedit-font-picker-list {
    position: absolute;
    z-index: 1200;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    max-height: 240px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid rgba(20,30,50,.14);
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(20,30,50,.16);
    padding: 4px;
}
.pedit-font-picker--float .pedit-font-picker-list {
    min-width: 168px;
}
.pedit-font-picker-item {
    display: block;
    width: 100%;
    border: none;
    background: transparent;
    text-align: left;
    padding: 7px 10px;
    border-radius: 7px;
    font-size: .86rem;
    font-weight: 600;
    color: #1a1a2e;
    cursor: pointer;
    font-family: inherit;
}
.pedit-font-picker-item:hover,
.pedit-font-picker-item:focus {
    background: rgba(247,145,18,.14);
    color: #d97706;
    outline: none;
}
.pedit-font-picker-item--disabled,
.pedit-font-picker-item:disabled {
    opacity: 0.42;
    cursor: not-allowed;
    color: #8a93a3;
}
.pedit-font-picker-item--disabled:hover,
.pedit-font-picker-item:disabled:hover,
.pedit-font-picker-item--disabled:focus,
.pedit-font-picker-item:disabled:focus {
    background: transparent;
    color: #8a93a3;
    outline: none;
}

.pedit-move-hint {
    background: rgba(74,144,226,.1);
    border: 1px dashed rgba(74,144,226,.4);
    border-radius: 8px;
    padding: 8px 10px;
    color: #7eb8f0;
    font-size: .76rem;
    line-height: 1.4;
    margin-top: 4px;
}
.pedit-move-hint i { color: #f79112; margin-right: 4px; }

/* ─── Floating quick-action toolbar (above the edited line) ─── */
.pedit-float-toolbar {
    position: absolute;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 5px 7px;
    background: #ffffff;
    border: 1px solid rgba(20,30,50,.14);
    border-radius: 10px;
    box-shadow: 0 6px 22px rgba(0,0,0,.22);
    pointer-events: auto;
    user-select: none;
    white-space: nowrap;
    animation: pedit-fadeIn .12s ease;
    overflow: visible;
}
.pedit-float-toolbar::after {
    content: '';
    position: absolute;
    left: var(--pft-arrow-x, 18px);
    bottom: -6px;
    width: 11px; height: 11px;
    background: #ffffff;
    border-right: 1px solid rgba(20,30,50,.14);
    border-bottom: 1px solid rgba(20,30,50,.14);
    transform: rotate(45deg);
}
.pedit-float-toolbar.pft-below::after {
    bottom: auto;
    top: -6px;
    transform: rotate(225deg);
}
.pft-btn {
    min-width: 30px;
    height: 30px;
    padding: 0 7px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: #2a3344;
    font-size: .9rem;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s ease, color .15s ease;
    font-family: inherit;
}
.pft-btn:hover { background: rgba(247,145,18,.14); color: #d97706; }
.pft-btn.active { background: rgba(247,145,18,.2); color: #d97706; }
.pft-btn:disabled,
.pft-btn.pft-disabled {
    opacity: 0.38;
    cursor: not-allowed;
    color: #8a93a3;
    background: transparent;
    pointer-events: auto; /* keep hover title/tooltip */
}
.pft-btn:disabled:hover,
.pft-btn.pft-disabled:hover {
    background: rgba(20, 30, 50, 0.06);
    color: #8a93a3;
}
.pft-btn.pft-danger:hover { background: rgba(231,76,60,.14); color: #e74c3c; }
.pft-btn.dragging { background: rgba(247,145,18,.25); color: #d97706; cursor: grabbing; }
.pft-btn[data-act="move"] { cursor: grab; }
.pft-sep {
    width: 1px;
    height: 20px;
    background: rgba(20,30,50,.12);
    margin: 0 2px;
}
.pft-font {
    height: 30px;
    min-width: 132px;
    max-width: 156px;
    width: auto;
    flex-shrink: 0;
    border: 1px solid rgba(20,30,50,.16);
    border-radius: 7px;
    background-color: #fff;
    color: #2a3344;
    font-size: .78rem;
    font-weight: 600;
    line-height: 28px;
    font-family: inherit;
    cursor: pointer;
    padding: 0 22px 0 8px;
    box-sizing: border-box;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%232a3344' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pft-font:focus { outline: none; border-color: #f79112; }
.pft-size {
    display: flex;
    align-items: center;
    border: 1px solid rgba(20,30,50,.16);
    border-radius: 7px;
    overflow: hidden;
    height: 30px;
}
.pft-step {
    width: 22px; height: 30px;
    border: none;
    background: #f3f5f8;
    color: #2a3344;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    font-family: inherit;
}
.pft-step:hover { background: rgba(247,145,18,.16); color: #d97706; }
.pft-size-input {
    width: 34px;
    height: 30px;
    border: none;
    text-align: center;
    font-size: .82rem;
    font-weight: 700;
    color: #2a3344;
    background: #fff;
    font-family: inherit;
    -moz-appearance: textfield;
}
.pft-size-input::-webkit-outer-spin-button,
.pft-size-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pft-size-input:focus { outline: none; }
.pft-color {
    position: relative;
    width: 30px; height: 30px;
    border-radius: 7px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    color: #2a3344;
}
.pft-color:hover { background: rgba(247,145,18,.14); color: #d97706; }
.pft-color input[type="color"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    width: 100%; height: 100%;
    border: none;
    cursor: pointer;
    padding: 0;
}

/* Movable affordance on page text */
.pdf-canvas-wrap.pedit-moving { cursor: grabbing !important; }
.pedit-text-hit.pedit-movable:hover { cursor: grab; }

@media (max-width: 600px) {
    .pedit-float-toolbar { gap: 1px; padding: 4px; }
    .pft-font { min-width: 108px; max-width: 132px; }
}

.pdf-viewer-panel { flex: 1; min-width: 0; width: 100%; }

.pdf-canvas-wrap {
    position: relative;
    border-radius: 12px;
    overflow: visible;
    border: 2px solid var(--primary-light);
    background: #525659;
    display: inline-block;
    width: 100%;
    box-shadow: var(--shadow-lg);
    /* Keep PDF canvas + overlay layers in one stacking context so whiteouts
       always paint above the bitmap (table cell edit ghosting). */
    isolation: isolate;
}
.pdf-canvas-wrap:focus { outline: none; }
.pdf-canvas-wrap.add-text-mode {
    cursor: crosshair;
    border-color: #f79112;
    box-shadow: 0 0 0 3px rgba(247,145,18,.3);
}

#pedit-render-canvas {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
    position: relative;
    z-index: 0;
    /* Avoid translateZ(0) — it promoted the bitmap above .pedit-white-cover
       so edited table cells showed original PDF ink under the preview text. */
    image-rendering: high-quality;
    image-rendering: -webkit-optimize-contrast;
    -webkit-font-smoothing: antialiased;
}

/* First-open / page paint: keep the gray shell for layout width, but do not
   flash a cleared / half-drawn canvas before the offscreen blit lands. */
.pdf-canvas-wrap.pedit-awaiting-paint #pedit-render-canvas,
.pdf-canvas-wrap.pedit-awaiting-paint .pedit-text-layer,
.pdf-canvas-wrap.pedit-awaiting-paint .pedit-preview-layer,
.pdf-canvas-wrap.pedit-awaiting-paint .pedit-shapes-layer,
.pdf-canvas-wrap.pedit-awaiting-paint .pedit-whiteouts-layer,
.pdf-canvas-wrap.pedit-awaiting-paint .pedit-images-layer,
.pdf-canvas-wrap.pedit-awaiting-paint .pedit-existing-images-layer,
.pdf-canvas-wrap.pedit-awaiting-paint .pedit-added-text-layer {
    opacity: 0;
}

.pedit-text-layer,
.pedit-preview-layer {
    position: absolute;
    top: 0; left: 0;
    pointer-events: none;
    /* Above .pedit-existing-images-layer (z21) so watermark / underlay hits
       never steal hover or edit from selectable text. Image-tool modes bump
       the existing-images layer back above text (see pdf-editor-images.css). */
    z-index: 22;
    /* Clip whiteouts/previews to the PDF page — pad-row covers used to spill
       past the canvas into the dark chrome after font changes. */
    overflow: hidden;
}

/* Interactive Add Text layer — above images so placed text stays draggable */
.pedit-added-text-layer {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 27;
    pointer-events: none;
    overflow: visible;
}

.pedit-added-text {
    position: absolute;
    pointer-events: auto;
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    /* Same chrome as .pedit-text-hit / .pedit-inline-editor — no offset “chip” box. */
    border: 0;
    outline: 1px solid transparent;
    outline-offset: 0;
    border-radius: 2px;
    background: transparent;
    min-width: 12px;
    z-index: 1;
    transition: none;
}

.pedit-added-text:hover {
    background: rgba(247, 145, 18, 0.14);
    outline-color: rgba(247, 145, 18, 0.5);
}

.pedit-added-text.is-selected {
    background: rgba(247, 145, 18, 0.14);
    outline-color: rgba(247, 145, 18, 0.5);
    z-index: 2;
}

.pedit-added-text.is-dragging {
    cursor: grabbing;
    opacity: 0.92;
    z-index: 3;
}

.pedit-added-text.is-editing {
    cursor: text;
    user-select: text;
    -webkit-user-select: text;
    /* Match .pedit-inline-editor:focus */
    background: rgba(247, 145, 18, 0.14);
    outline-color: rgba(247, 145, 18, 0.5);
    min-width: 40px;
}

.pdf-canvas-wrap.add-text-mode {
    cursor: crosshair;
}

.pdf-canvas-wrap.add-text-mode .pedit-text-hit {
    pointer-events: none !important;
}

.pdf-canvas-wrap.add-text-mode .pedit-existing-image-hit {
    pointer-events: none !important;
}

.pdf-canvas-wrap.add-text-mode .pedit-added-text {
    cursor: grab;
}

.pdf-canvas-wrap.add-text-mode .pedit-added-text.is-editing {
    cursor: text;
}

.pedit-white-cover {
    position: absolute;
    background: #ffffff;
    border-radius: 1px;
    pointer-events: none;
    z-index: 8;
}

/* Only hit targets receive clicks — never the full layer. */
.pedit-text-hit {
    position: absolute;
    pointer-events: auto;
    cursor: text;
    /* Outline (not border): 1px border + border-box inset editor glyphs ~1px
       vs PDF ink on hover, so click looked like a tiny text jump. */
    border: 0;
    outline: 1px solid transparent;
    outline-offset: 0;
    border-radius: 2px;
    /* Instant hover — a 150ms fade made the chrome feel laggy. */
    transition: none;
    box-sizing: border-box;
}

.pedit-selected-preview {
    background: rgba(255,255,255,.96);
    border: 2px solid var(--primary-light);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 14px;
    font-size: .88rem;
    color: #1a1a2e;
    line-height: 1.45;
    max-height: 72px;
    overflow-x: hidden;
    overflow-y: auto;
    word-break: break-word;
    white-space: pre-wrap;
}

.pedit-inline-editor {
    position: absolute;
    /* Above .pedit-existing-images-layer (z21). Watermark / embedded-image hit
       overlays used to sit on top of the editor and steal caret clicks. */
    z-index: 30;
    background: transparent;
    border: 0;
    outline: 1px solid transparent;
    outline-offset: 0;
    border-radius: 2px;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    word-break: break-word;
    line-height: 1.2;
    cursor: text;
    box-shadow: none;
    overflow: visible;
    pointer-events: auto;
    /* Orange caret matches edit chrome — a dark/pink caret looked like an
       injected thin glyph ("extra character") at the click point. */
    caret-color: #ea580c;
    /* No fade on open/focus — edit must snap in instantly. */
    transition: none;
}

.pedit-inline-editor:focus-visible {
    outline-color: rgba(247, 145, 18, 0.5);
    box-shadow: none;
}


.pedit-inline-editor.pedit-inline-spaced,
.pedit-preview-text.pedit-preview-spaced {
    min-height: 0;
}

.pedit-inline-editor .pedit-run {
    /* Per-run inline font-family/size/style must win (● Arial vs body Times).
       Do not force inherit — that wiped bullet faces back to the editor root. */
    font-size: inherit;
}

.pedit-preview-text .pedit-run {
    font-size: inherit;
}

/* Mono runs: never invent ligatures (PDF chips are discrete glyphs). */
.pedit-inline-editor .pedit-run-mono,
.pedit-preview-text .pedit-run-mono {
    font-variant-ligatures: none;
}

/* DOM chips while editing / after edit (pedit-dom-chips).
   host.js owns line-height: `0` for flow baseline-lock, or the block line box
   for absolute/spaced runs (top:0). Never force 1.15 here — that lifted mono
   chips on edit-open — and never force 0 !important (breaks absolute alignment).
   Also no negative vertical margin (that pulled chips up vs body).
   Keep vertical pad tiny so the grey chip hugs glyph ink like the PDF chip
   (large pad made chips look "floated" above the body baseline). */
.pedit-inline-editor.pedit-dom-chips .pedit-run-mono,
.pedit-preview-text.pedit-dom-chips .pedit-run-mono {
    background-color: #f3f4f6;
    border-radius: 0.28em;
    /* Horizontal pad only — any vertical pad/shadow shifted chip ink vs PDF. */
    padding: 0 0.16em;
    margin: 0;
    box-shadow: none;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    vertical-align: baseline;
}

.pedit-inline-editor .pedit-run-link {
    cursor: text;
}

.pedit-hit-overlay {
    pointer-events: auto;
    z-index: 25;
    cursor: text;
    background: transparent;
}

/* Match hover chrome exactly — no extra focus ring (looked like a jump). */
.pedit-inline-editor:focus {
    outline-color: rgba(247, 145, 18, 0.55);
    /* Same peach wash as .pedit-text-hit:hover so hover→edit does not make
       glyphs look heavier / “larger” from contrast alone. */
    background: rgba(247, 145, 18, 0.14);
    box-shadow: none;
}

/* Chip lines: keep wash off so PDF/DOM chip greys are not tinted peach. */
.pedit-inline-editor.pedit-chip-line:focus,
.pedit-inline-editor.pedit-chip-line:focus-visible {
    background: transparent;
}

/* When the canvas whiteout could NOT rebuild the real backdrop, keep a light
   wash so the user can still see the edit target over page white. */
.pedit-inline-editor.pedit-flat-backdrop:focus,
.pedit-inline-editor.pedit-flat-backdrop:focus-visible {
    background: linear-gradient(rgba(247, 145, 18, 0.14), rgba(247, 145, 18, 0.14));
}

.pedit-text-hit:hover {
    opacity: 1;
    background: rgba(247, 145, 18, 0.14);
    outline-color: rgba(247, 145, 18, 0.5);
}
.pedit-text-hit.selected {
    opacity: 1;
    background: rgba(247, 145, 18, 0.14);
    outline-color: rgba(247, 145, 18, 0.5);
    box-shadow: none;
}
/* Edited blocks stay invisible at rest — including while still selected right
   after the edit — but must keep their hover box. The :not(:hover) guard is
   load-bearing: this rule follows :hover at equal specificity, so without it an
   edited line can never be hovered again. */
.pedit-text-hit.edited:not(:hover) {
    background: transparent;
    outline-color: transparent;
}
.pedit-text-hit.deleted { opacity: 0.08; pointer-events: none; cursor: default; }

/* ── Table cells: frame the glyphs, not the font box ──────────────────────────
   A cell's box is sized to the PDF font box and height-capped to the row so it
   cannot cover the grid. That left every bit of slack above the text (~11px
   headroom vs ~2px below) and put the outline on the rule printed above the row.
   ::before re-aims the paint at the measured glyph band, which keeps the element
   box — and every width, baseline and caret rule that reads it — untouched.
   Vars come from applyCellHugFrame; z-index:-1 sits behind the glyphs but stays
   inside the overlay layer, so it still paints above the page canvas. */
.pedit-text-hit.pedit-cell-hug:hover,
.pedit-text-hit.pedit-cell-hug.selected,
.pedit-inline-editor.pedit-cell-hug:focus,
.pedit-inline-editor.pedit-cell-hug:focus-visible {
    background: transparent;
    outline-color: transparent;
}

.pedit-text-hit.pedit-cell-hug::before,
.pedit-inline-editor.pedit-cell-hug::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: var(--pedit-hug-top, 0px);
    height: var(--pedit-hug-h, 100%);
    border-radius: 2px;
    pointer-events: none;
    z-index: -1;
    background: transparent;
    outline: 1px solid transparent;
    outline-offset: 0;
}

.pedit-text-hit.pedit-cell-hug:hover::before,
.pedit-text-hit.pedit-cell-hug.selected::before,
.pedit-inline-editor.pedit-cell-hug:focus-visible::before {
    background: rgba(247, 145, 18, 0.14);
    outline-color: rgba(247, 145, 18, 0.5);
}

.pedit-inline-editor.pedit-cell-hug:focus::before {
    background: rgba(247, 145, 18, 0.14);
    outline-color: rgba(247, 145, 18, 0.55);
}

/* Could not rebuild the real backdrop — keep the wash so the target is visible. */
.pedit-inline-editor.pedit-cell-hug.pedit-flat-backdrop:focus::before,
.pedit-inline-editor.pedit-cell-hug.pedit-flat-backdrop:focus-visible::before {
    background: linear-gradient(rgba(247, 145, 18, 0.14), rgba(247, 145, 18, 0.14));
}

/* Chip lines: wash off so PDF/DOM chip greys are not tinted peach. */
.pedit-inline-editor.pedit-cell-hug.pedit-chip-line:focus::before,
.pedit-inline-editor.pedit-cell-hug.pedit-chip-line:focus-visible::before {
    background: transparent;
}

/* Same :not(:hover) guard as the un-hugged rule above — without it an edited
   cell could never show a hover frame again. */
.pedit-text-hit.pedit-cell-hug.edited:not(:hover)::before {
    background: transparent;
    outline-color: transparent;
}

.pedit-preview-text {
    position: absolute;
    pointer-events: none;
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.15;
    z-index: 12;
}

.pedit-preview-text.pedit-preview-rich {
    color: inherit;
}

.pedit-preview-text.pedit-preview-single {
    white-space: pre;
    word-break: normal;
}

.pedit-preview-text:not(.pedit-preview-single) {
    white-space: pre;
    word-break: normal;
}

.page-nav-bar {
    display: flex; align-items: center; justify-content: center; gap: 14px;
    padding: 14px 0 4px;
}
.page-nav-btn {
    background: rgba(255,255,255,.06);
    border: 2px solid var(--primary-light);
    border-radius: 8px;
    color: var(--text-primary);
    padding: 8px 18px; font-size: .9rem; font-weight: 600;
    cursor: pointer; transition: all .25s ease;
    display: flex; align-items: center; gap: 7px;
    font-family: inherit;
}
.page-nav-btn:hover:not(:disabled) { background: rgba(255,255,255,.12); border-color: #f79112; }
.page-nav-btn:disabled { opacity: .35; cursor: not-allowed; }
.page-nav-text { font-size: .95rem; font-weight: 500; display: flex; align-items: center; gap: 5px; }

.page-num-input {
    width: 2.8em;
    padding: 2px 4px;
    text-align: center;
    font-size: .95rem; font-weight: 700;
    color: #f79112;
    background: transparent;
    border: none;
    border-bottom: 2px solid rgba(247,145,18,.4);
    border-radius: 0;
    outline: none;
    font-family: inherit;
    cursor: text;
    transition: border-color .2s ease, background .2s ease;
    -moz-appearance: textfield;
}
.page-num-input::-webkit-outer-spin-button,
.page-num-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.page-num-input:focus {
    background: rgba(247,145,18,.1);
    border-bottom-color: #f79112;
    border-radius: 4px 4px 0 0;
}

.progress-container { margin-top: 24px; animation: pedit-fadeIn .3s ease; }
@keyframes pedit-fadeIn { from { opacity: 0; } to { opacity: 1; } }
.progress-bar {
    width: 100%; height: 28px;
    background: rgba(255,255,255,.05);
    border: 2px solid var(--primary-light);
    border-radius: 14px; overflow: hidden;
}
.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-color), #f79112);
    transition: width .3s ease;
    border-radius: 14px;
}
.progress-text { margin-top: 8px; font-weight: 600; font-size: .95rem; text-align: center; }

.pdf-modal-overlay {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(0,0,0,.65);
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(4px);
}
.pdf-modal {
    background: linear-gradient(145deg, #1e2a3a, #162030);
    border: 2px solid var(--primary-light);
    border-radius: 16px;
    max-width: 440px; width: 90%;
    box-shadow: 0 20px 60px rgba(0,0,0,.5);
    animation: pedit-modalIn .25s ease;
}
@keyframes pedit-modalIn {
    from { opacity: 0; transform: scale(.92) translateY(10px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
.pdf-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 20px 0;
}
.pdf-modal-title { font-size: 1.1rem; font-weight: 700; margin: 0; }
.pdf-modal-close {
    background: none; border: none; color: var(--text-secondary);
    font-size: 1.1rem; cursor: pointer; padding: 4px;
    transition: color .2s ease;
}
.pdf-modal-close:hover { color: #f79112; }
.pdf-modal-message { padding: 20px; color: var(--text-secondary); line-height: 1.6; }
.pdf-modal-actions { padding: 14px 20px 18px; text-align: right; }
.pdf-modal-actions .btn-primary {
    background: var(--accent-color); color: white; border: none;
    padding: 10px 24px; border-radius: 50px; cursor: pointer;
    font-weight: 600; font-family: inherit; transition: background .2s ease;
}
.pdf-modal-actions .btn-primary:hover { background: #f79112; }

.pedit-features-blog {
    background: rgba(255,255,255,.05);
    border: 2px solid var(--primary-light);
    border-radius: 20px;
    padding: 40px 36px;
    margin-top: 48px;
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-md);
}
.pedit-features-blog > h2 {
    font-size: 1.75rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    flex-wrap: wrap;
    text-align: left;
    margin: 0 0 14px;
}
.pedit-features-blog > h2 i { color: #f79112; }
.pedit-blog-lead {
    color: var(--text-secondary);
    font-size: 1.05rem;
    line-height: 1.7;
    text-align: left;
    max-width: none;
    margin: 0 0 28px;
}
.pedit-feature-block {
    margin-bottom: 30px;
    padding-bottom: 8px;
}
.pedit-feature-block h3 {
    font-size: 1.22rem;
    font-weight: 700;
    margin: 0 0 12px;
    line-height: 1.4;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.pedit-feature-block h3 i { color: #f79112; }
.pedit-feature-block p {
    color: var(--text-secondary);
    font-size: 1.02rem;
    line-height: 1.7;
    margin: 0 0 12px;
}
.pedit-feature-block p:last-child { margin-bottom: 0; }
.pedit-feature-block ul {
    margin: 0 0 12px;
    padding-left: 1.25rem;
    color: var(--text-secondary);
    line-height: 1.7;
}
.pedit-feature-block li { margin-bottom: 6px; }
.pedit-feature-block a { color: #f79112; text-decoration: underline; }
.pedit-feature-block a:hover { color: #ffb347; }
.pedit-feature-block strong { color: var(--text-primary); }

.pedit-shot {
    margin: 22px 0 28px;
}
.pedit-shot + .pedit-shot {
    margin-top: 8px;
}
.pedit-shot img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    border: 1px solid var(--primary-light);
    background: rgba(0,0,0,.25);
}
.pedit-shot figcaption {
    margin: 14px 4px 6px;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.06);
    font-size: .92rem;
    color: var(--text-secondary);
    line-height: 1.5;
}
.pedit-shot-placeholder {
    margin: 16px 0 8px;
}
.pedit-shot-box {
    border: 2px dashed rgba(247,145,18,.55);
    border-radius: 14px;
    background: rgba(247,145,18,.06);
    padding: 28px 20px;
    text-align: center;
    color: var(--text-secondary);
}
.pedit-shot-box i {
    display: block;
    font-size: 1.6rem;
    color: #f79112;
    margin-bottom: 10px;
}
.pedit-shot-box p {
    margin: 0;
    font-size: .98rem;
    line-height: 1.55;
    color: var(--text-secondary);
}
.pedit-shot-box strong { color: #f79112; }
.pedit-blog-outro {
    margin-top: 8px;
    padding-top: 18px;
    border-top: 1px solid var(--primary-light);
    color: var(--text-secondary);
    line-height: 1.7;
    font-size: 1.02rem;
}

.faq-section {
    background: rgba(255,255,255,.04);
    border: 2px solid var(--primary-light);
    border-radius: 20px;
    padding: 36px 32px;
    margin-top: 32px;
    backdrop-filter: blur(10px);
}
.faq-section h2 {
    font-size: 1.75rem; font-weight: 800;
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 24px;
}
.faq-section h2 i { color: #f79112; }
.faq-container { max-width: 900px; margin: 0 auto; }
.faq-item-pdf {
    margin-bottom: 15px;
    border: 2px solid var(--primary-light);
    border-radius: 8px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.03);
    transition: all 0.3s ease;
}
.faq-item-pdf:hover { border-color: #f79112; }
.faq-question-pdf {
    padding: 15px 15px 15px 40px;
    background-color: rgba(255, 255, 255, 0.05);
    cursor: pointer;
    font-weight: 600;
    color: var(--text-primary);
    position: relative;
    font-size: 1.1em;
    transition: all 0.3s ease;
}
.faq-question-pdf::before {
    content: '+';
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5em;
    font-weight: normal;
    line-height: 1;
    transition: transform 0.3s ease;
    color: #f79112;
}
.faq-item-pdf.active .faq-question-pdf {
    background-color: rgba(247, 145, 18, 0.2);
    color: var(--text-primary);
    border-bottom: 2px solid #f79112;
}
.faq-item-pdf.active .faq-question-pdf::before {
    content: '-';
    transform: translateY(-50%) rotate(180deg);
}
.faq-answer-pdf {
    background-color: rgba(255, 255, 255, 0.03);
    padding: 0 15px;
    max-height: 0;
    overflow: hidden;
    transition: all 0.5s ease;
}
.faq-item-pdf.active .faq-answer-pdf {
    padding: 15px;
    max-height: 1000px;
}
.faq-answer-pdf p { margin: 0; font-size: 1.05em; line-height: 1.6; color: var(--text-secondary); }
.faq-answer-pdf a { color: #f79112; text-decoration: underline; }
.faq-answer-pdf a:hover { color: #ffb347; }

.pedit-related-tools {
    background: rgba(255,255,255,.05);
    border: 2px solid var(--primary-light);
    border-radius: 20px;
    padding: 36px 32px;
    margin-top: 28px;
}
.pedit-related-tools h2 {
    font-size: 1.75rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}
.pedit-related-tools h2 i { color: #f79112; }
.pedit-related-tools > p {
    color: var(--text-secondary);
    margin: 0 0 22px;
    line-height: 1.55;
}
.pedit-related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
@media (max-width: 560px) {
    .pedit-related-grid { grid-template-columns: 1fr; }
}
.pedit-related-card {
    display: block;
    padding: 16px 18px;
    border-radius: 12px;
    border: 1px solid var(--primary-light);
    background: rgba(255,255,255,.03);
    text-decoration: none;
    color: inherit;
    transition: border-color .25s ease, background .25s ease, transform .2s ease;
}
.pedit-related-card:hover {
    border-color: #f79112;
    background: rgba(247,145,18,.1);
    transform: translateY(-2px);
}
.pedit-related-card i {
    color: #f79112;
    margin-right: 8px;
}
.pedit-related-card strong {
    display: block;
    margin: 4px 0 6px;
    font-size: 1.02rem;
}
.pedit-related-card span {
    display: block;
    font-size: .9rem;
    color: var(--text-secondary);
    line-height: 1.45;
}

@media (max-width: 1024px) {
    .pedit-panel { width: auto; }
}

@media (max-width: 900px) {
    .editor-layout { flex-direction: column; }
    .pdf-viewer-panel { width: 100%; }
    .pedit-related-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .header-section h1 { font-size: 1.9rem; flex-direction: column; gap: 8px; }
    .subtitle { font-size: 1rem; }
    .upload-section { padding: 20px; }
    .drop-zone-pdf {
        padding: 30px 20px;
        min-height: 200px;
    }
    .drop-zone-pdf h3 { font-size: 1.3rem; }
    /* Mobile/tablet: keep Download + tools ABOVE the PDF. Page nav stays
       under the canvas. Sticky itself is on .editor-chrome for all viewports. */
    .editor-chrome {
        order: 0;
        margin-top: 0;
        margin-bottom: 12px;
        /* Taller sticky navbar (min-height: 60px) on small screens. */
        top: 60px;
    }
    .editor-layout { order: 1; display: flex; flex-direction: column; }
    .pdf-viewer-panel { order: 1; }
    .editor-toolbar { flex-direction: column; align-items: stretch; }
    .toolbar-right .toolbar-btn { flex: 0 0 40px; width: 40px; height: 40px; padding: 0; border-radius: 50%; justify-content: center; }
    .toolbar-right .toolbar-btn .tb-label { display: none; }
    .toolbar-right .btn-download-pedit { flex: 1; justify-content: center; }
    #pedit-filename { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; display: inline-block; }
    .steps-container { grid-template-columns: 1fr; }
    .instructions-section, .faq-section, .pedit-related-tools, .pedit-features-blog { padding: 26px 18px; }
}

@media (max-width: 600px) {
    .pedit-container { padding: 16px 14px 32px; }
    .editor-section { padding-left: 14px; padding-right: 14px; }
    .header-section h1 { font-size: 1.75rem; }
    .upload-section { padding: 15px; }
    .drop-zone-pdf {
        padding: 25px 15px;
        min-height: 180px;
    }
    .pedit-font-row { flex-wrap: wrap; }
    .pedit-font-btn, .pedit-add-font-btn { min-width: calc(33% - 6px); }
}

@media (max-width: 480px) {
    .pedit-container { padding: 12px 10px 28px; }
    .editor-section { padding-left: 10px; padding-right: 10px; }
    .header-section h1 { font-size: 1.55rem; }
    .pedit-panel { padding: 14px; }
    .pedit-mode-tab { font-size: .78rem; padding: 8px 4px; }
    .instructions-section, .faq-section, .pedit-related-tools, .pedit-features-blog { padding: 20px 14px; backdrop-filter: none; }
    .pedit-features-blog > h2 { font-size: 1.4rem; }
    .pedit-feature-block h3 { font-size: 1.1rem; }
}

@media (max-width: 768px) {
    .btn-download-pedit:hover:not(:disabled) { transform: none; }
}