.hidden {
    display: none !important;
}

.hero {
    padding: 40px 40px 80px;
}

svg {
    fill: none;
}

/* ── Fullscreen drop zone (matches compress / OCR / organize) ── */
.drop-zone-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}
.drop-zone-overlay.active { opacity: 1; pointer-events: all; }
.dz-bg {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.92);
    box-sizing: border-box;
}
.dz-bg::before {
    content: '';
    position: absolute;
    inset: 14px;
    border-radius: 16px;
    background-image:
        repeating-linear-gradient(0deg,   #1f2937 0, #1f2937 8px, transparent 8px, transparent 16px),
        repeating-linear-gradient(90deg,  #1f2937 0, #1f2937 8px, transparent 8px, transparent 16px),
        repeating-linear-gradient(180deg, #1f2937 0, #1f2937 8px, transparent 8px, transparent 16px),
        repeating-linear-gradient(270deg, #1f2937 0, #1f2937 8px, transparent 8px, transparent 16px);
    background-size: 2px 100%, 100% 2px, 2px 100%, 100% 2px;
    background-position: 0 0, 0 0, 100% 0, 0 100%;
    background-repeat: no-repeat;
    opacity: 0.14;
    animation: dzMarch 0.8s linear infinite;
}
@keyframes dzMarch {
    to { background-position: 0 16px, -16px 0, 100% -16px, 16px 100%; }
}
.dz-pill {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: #1f2937;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.85rem;
    font-weight: 500;
    border-radius: 10px;
    transform: translateY(6px);
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
}
.dz-pill svg {
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    stroke: rgba(255, 255, 255, 0.7);
    animation: dzPulse 1.8s ease-in-out infinite;
}
.drop-zone-overlay.active .dz-pill { transform: translateY(0); opacity: 1; }
@keyframes dzPulse {
    0%, 100% { opacity: 0.7; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.1); }
}

/* Bottom-center toast (mirrors ocr-pdf's .ocr-toast). Used to inform the user
   when multiple PDFs were dropped — split is single-file, so we take the first
   and surface a non-blocking notice. */
.split-toast {
    position: fixed;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    background: #1f2937;
    border-radius: 12px;
    padding: 12px 20px;
    font-size: 0.85rem;
    font-weight: 500;
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
    z-index: 9000;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}
.split-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}
.split-toast svg { color: rgba(255,255,255,0.6); flex-shrink: 0; }

/* Locked-PDF state — modifier on the shared error modal (mirrors compress-pdf).
   Swaps the icon to a grey lock + amber badge, demotes the Cancel button to a
   secondary outline, and reveals an "Unlock PDF" primary CTA via
   #rateLimitActions. */
.error-modal-overlay.locked-pdf .error-modal-icon > svg {
    stroke: #9ca3af;
}
.error-modal-icon-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    background: #fff;
    border-radius: 8px;
    padding: 4px;
    box-sizing: content-box;
    width: 14px;
    height: 14px;
    color: #f59e0b;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
}
.error-modal-icon {
    position: relative;
}
.error-modal-icon-badge svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    animation: none;
}

/* Primary action injected into #rateLimitActions for the locked-PDF state. */
.rate-limit-actions {
    display: none;
    width: 100%;
    margin-bottom: 10px;
}
.rate-limit-actions.active { display: block; }
.upgrade-btn {
    display: inline-block;
    background: #1f2937;
    color: white;
    border: none;
    border-radius: 14px;
    padding: 12px;
    font-size: 0.88rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s;
    text-decoration: none;
    width: 100%;
    box-sizing: border-box;
}
.upgrade-btn:hover { background: #374151; }

/* In locked-PDF state the Cancel button drops to a secondary outline so the
   primary "Unlock PDF" CTA reads as the obvious action. */
.error-modal-overlay.locked-pdf .error-modal-btn {
    background: transparent;
    color: #6b7280;
    border: 2px solid #e5e7eb;
    box-shadow: none;
}
.error-modal-overlay.locked-pdf .error-modal-btn:hover {
    border-color: #ff6154;
    color: #ff6154;
    background: #fff5f4;
    box-shadow: none;
}

/* ── Wrong-format error modal (mirrors compress-pdf's showErrorModal) ── */
.error-modal-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}
.error-modal-overlay.active { opacity: 1; pointer-events: all; }
.error-modal {
    background: white;
    border-radius: 24px;
    padding: 32px;
    max-width: 340px;
    width: 90%;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.04);
    transform: scale(0.9);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.error-modal-overlay.active .error-modal { transform: scale(1); }
.error-modal-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}
.error-modal-icon svg {
    width: 40px;
    height: 40px;
    stroke: #f59e0b;
    animation: errorModalPulse 0.5s ease-out;
}
@keyframes errorModalPulse {
    0%   { transform: scale(0.8); opacity: 0; }
    50%  { transform: scale(1.1); }
    100% { transform: scale(1); opacity: 1; }
}
.error-modal-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 8px 0;
}
.error-modal-message {
    font-size: 0.88rem;
    color: #6b7280;
    line-height: 1.4;
    margin: 0 0 20px 0;
}
.error-modal-btn {
    background: #1f2937;
    color: white;
    border: none;
    border-radius: 14px;
    padding: 12px;
    font-size: 0.88rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s;
    width: 100%;
}
.error-modal-btn:hover { background: #374151; }

/* ── Tie-resolution modal — pick the reference size on an even split. ── */
.tie-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}
.tie-modal-overlay.active { opacity: 1; pointer-events: all; }
.tie-modal {
    background: #fff;
    border-radius: 22px;
    padding: 26px;
    max-width: 460px;
    width: 100%;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.04);
    transform: scale(0.92);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-sizing: border-box;
}
.tie-modal-overlay.active .tie-modal { transform: scale(1); }
.tie-modal-head { margin-bottom: 18px; }
.tie-modal-title {
    margin: 0 0 6px;
    font-size: 1.18rem;
    font-weight: 800;
    color: #1f2937;
    letter-spacing: -0.01em;
}
.tie-modal-sub {
    margin: 0;
    font-size: 0.88rem;
    color: #6b7280;
    line-height: 1.45;
}
.tie-modal-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 22px;
}
.tie-option {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1.5px solid #e5e7eb;
    border-radius: 14px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    text-align: left;
    background: #fff;
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
}
.tie-option:hover { border-color: #ffc9c3; background: #fff9f8; }
.tie-option.selected { border-color: #ff6154; background: #fff5f4; }
.tie-option-radio {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #d1d5db;
    position: relative;
    transition: border-color 0.15s;
}
.tie-option.selected .tie-option-radio {
    border-color: #ff6154;
}
.tie-option.selected .tie-option-radio::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: #ff6154;
}
.tie-option-body { flex: 1; min-width: 0; }
.tie-option-name {
    display: block;
    font-size: 0.98rem;
    font-weight: 700;
    color: #1f2937;
    line-height: 1.2;
}
.tie-option-meta {
    display: block;
    font-size: 0.8rem;
    color: #6b7280;
    font-variant-numeric: tabular-nums;
    margin-top: 2px;
}
.tie-option-rec {
    flex-shrink: 0;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: #ff6154;
    border: 1px solid #ffd9d4;
    border-radius: 999px;
    padding: 4px 9px;
    white-space: nowrap;
}
.tie-modal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}
.tie-modal-btn-secondary,
.tie-modal-btn-primary {
    border-radius: 12px;
    padding: 11px 18px;
    font-size: 0.9rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.tie-modal-btn-secondary {
    background: #fff;
    color: #6b7280;
    border: 1.5px solid #e5e7eb;
}
.tie-modal-btn-secondary:hover { border-color: #d1d5db; color: #374151; }
.tie-modal-btn-primary {
    background: #ff6154;
    color: #fff;
    border: 1.5px solid #ff6154;
}
.tie-modal-btn-primary:hover { background: #e5554a; border-color: #e5554a; }

body {
    overflow-x: hidden;
}

body.download-active {
    height: calc(100vh - 81px);
    overflow: hidden;
}

body.selection-active {
    overflow-y: hidden;
}

/* Loading Screen */
.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.loading-screen.active {
    opacity: 1;
    pointer-events: all;
}

.loading-center-group {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.loading-bar-container {
    width: 300px;
    height: 5px;
    background: #fff;
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}

.loading-bar {
    position: absolute;
    height: 100%;
    background: #ff6154;
    border-radius: 2px;
    width: 40%;
    will-change: transform;
    animation: loading 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes loading {
    0% {
        transform: translateX(-100%);
    }
    50% {
        transform: translateX(200%);
    }
    100% {
        transform: translateX(500%);
    }
}

.loading-text {
    font-size: 1.05rem;
    color: #1f2937;
    font-weight: 600;
    transition: opacity 0.3s ease;
}

.loading-subtext {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.8rem;
    color: #9ca3af;
    font-weight: 400;
    min-height: 18px;
    margin-top: 16px;
    white-space: nowrap;
    transition: opacity 0.3s ease;
}

.loading-percent {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 13px;
    color: #999;
    font-weight: 500;
    min-height: 18px;
    font-variant-numeric: tabular-nums;
    margin-top: 40px;
    white-space: nowrap;
}

/* Upload progress mode */
.loading-bar-container.progress-mode .loading-bar {
    animation: none;
    width: 0%;
    transition: width 0.2s ease;
}

.container {
    background-color: transparent;
    box-sizing: border-box;
    padding: 20px;
    border-radius: 16px;
    max-width: 1400px;
    width: 100%;
    margin: 0 auto 10px auto;
    overflow: visible;
}

/* Import-screen vertical centering — body becomes a flex column at
   step 1 with auto margins on hero + container so they're centered
   as a pair. Matches the visual rhythm of step-based tools (Flatten,
   Unlock, Protect, Repair, OCR) for cross-tool consistency. */
body:not(.selection-active):not(.download-active) {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
body:not(.selection-active):not(.download-active) .hero {
    margin-top: auto;
}
body:not(.selection-active):not(.download-active) .container {
    margin-bottom: auto;
}

/* Upload Area */
.upload-area {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1.5rem;
    gap: 12px;
    flex-wrap: wrap;
}

.file-input-label {
    display: inline-block;
    padding: 16px 48px;
    background-color: #ff6154;
    color: white;
    border-radius: 12px;
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: 600;
    transition: all 0.3s ease;
    border: none;
    text-align: center;
    flex-shrink: 0;
}

.file-input-label:hover {
    background: #e5554a;
    box-shadow: 0 4px 12px rgba(255, 97, 84, 0.4);
    transform: translateY(-1px);
}

#upload-label.drag-over {
    background-color: #e5554a;
    transform: scale(1.05);
}

#upload-label {
    outline: none;
}

.upload-content {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.upload-icon {
    position: absolute;
    width: 24px;
    height: 24px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.upload-text {
    font-size: 1.1rem;
    font-weight: 600;
    color: white;
    margin: 0;
    transition: opacity 0.3s ease;
}

.file-input-label:hover .upload-icon {
    opacity: 1;
}

.file-input-label:hover .upload-text {
    opacity: 0;
    visibility: hidden;
}

input[type="file"] {
    display: none;
}

/* Progress Bar */
#progress-container {
    margin-top: 1.5rem;
    width: 100%;
    max-width: 510px;
    margin-left: auto;
    margin-right: auto;
}

.progress-bar {
    width: 100%;
    height: 12px;
    background-color: transparent;
    border-radius: 20px;
    overflow: hidden;
    border: 2px solid #e5e7eb;
}

#progress-bar {
    width: 0;
    height: 100%;
    background-color: #ff6154;
    transition: width 0.3s ease;
}

#progress-text {
    text-align: center;
    margin-top: 8px;
    font-size: 0.875rem;
    color: #6b7280;
}

/* Selection Panel - Split View Layout */
.selection-panel {
    margin-top: 0;
    background: transparent;
    border: none;
    padding: 0;
    box-shadow: none;
    position: fixed;
    top: 81px;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: calc(100vh - 81px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.selection-panel.active {
    opacity: 1;
    visibility: visible;
}

.selection-content {
    display: flex;
    gap: 0;
    align-items: stretch;
    height: 100%;
    width: 100%;
    overflow: hidden;
    position: relative;
}

/* Left side - Pages Preview */
.pages-preview-section {
    flex: 1;
    background: none;
    padding: 45px;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    overflow-y: auto;
    margin-right: 420px;
    box-sizing: border-box;
}

.pages-header {
    margin-bottom: 28px;
    width: 100%;
    text-align: left;
}

.pages-header-top {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.pages-header h2 {
    margin: 0;
    font-size: 1.75rem;
    color: #1f2937;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.pages-count-chip {
    font-size: 0.78rem;
    font-weight: 700;
    color: #ff6154;
    background: transparent;
    border: 1px solid #ffd9d4;
    padding: 5px 12px;
    border-radius: 999px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.pages-count-chip:empty { display: none; }

.selection-subtitle {
    margin: 0;
    font-size: 1rem;
    color: #6b7280;
    font-weight: 400;
}

/* Preview Panel */
.preview-panel {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 24px 20px;
    width: 100%;
    margin-bottom: 40px;
    align-items: end;
}

/* Custom scrollbar for preview panel */
.preview-panel::-webkit-scrollbar {
    display: none;
}

/* Wrapper is just the column track — the BORDER lives on the page image only,
   not around the page-number/dimension details below it. */
.page-thumbnail-wrapper {
    --rel-scale: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    /* Relative-size visualization: matching pages render full width, smaller
       pages shrink toward 60%, so size differences are visible at a glance. */
    width: calc(100% * var(--rel-scale));
    margin: 0 auto;
    transition: transform 0.25s ease;
}
.page-thumbnail-wrapper:hover {
    z-index: 2;
    transform: translateY(-4px);
}

.page-thumbnail {
    position: relative;
    cursor: default;
    width: 100%;
    overflow: hidden;
    background: white;
    border: 1px solid #eceef1;
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(17, 24, 39, 0.08);
    transition: box-shadow 0.25s ease;
}
.page-thumbnail-wrapper:hover .page-thumbnail {
    box-shadow: 0 14px 26px rgba(17, 24, 39, 0.16);
}

/* Matching pages sit back slightly so outliers draw the eye. */
.page-thumbnail-wrapper:not(.is-outlier) .page-thumbnail {
    filter: saturate(0.92);
}

.page-thumbnail.selected {
    box-shadow: inset 0 0 0 3px #ff6154;
}

.page-thumbnail canvas {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

/* Lazy-render placeholder — a soft shimmer until the canvas is painted. */
.page-thumbnail.is-loading {
    background: #f3f4f6;
    background-image: linear-gradient(100deg, #f3f4f6 30%, #eceef1 50%, #f3f4f6 70%);
    background-size: 200% 100%;
    animation: thumbShimmer 1.2s ease-in-out infinite;
}
.page-thumbnail.is-loading canvas { opacity: 0; }
@keyframes thumbShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.page-checkbox {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 22px;
    height: 22px;
    cursor: pointer;
    border-radius: 4px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 2px solid #d1d5db;
    background: white;
    transition: all 0.2s ease;
}

.page-checkbox:checked {
    background: #ff6154;
    border-color: #ff6154;
}

.page-checkbox:checked::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Details below the page — page no. + dims only. No frame; sits plainly
   under the bordered page image. */
.thumbnail-footer {
    width: 100%;
    box-sizing: border-box;
    background: transparent;
    padding: 10px 2px 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.thumbnail-label {
    font-size: 0.85rem;
    color: #1f2937;
    font-weight: 700;
    line-height: 1.2;
}

/* Right side - Controls Panel (Fixed Overlay) */
.controls-panel {
    position: fixed;
    right: 0;
    top: 81px;
    width: 420px;
    box-sizing: border-box;
    padding: 40px;
    padding-bottom: 0;
    height: calc(100vh - 81px);
    background: white;
    border-left: 2px solid #e5e7eb;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.06);
    overflow-y: auto;
    z-index: 100;
    display: flex;
    flex-direction: column;
}
/* When the left preview section is scrollable, whiten the panel's left border
   so the divider visually blends with the scrolling content edge. */
.selection-content.left-scrollable .controls-panel {
    border-left-color: #fff;
}

.controls-sticky {
    padding: 40px 32px;
}

.page-count-badge {
    background: none;
    color: #000;
    padding: 0;
    margin-top: 10px;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
    justify-content: left;
}

.page-count-badge svg {
    width: 20px;
    height: 20px;
    stroke: #ff6154;
}

/* Control Sections */
.control-section {
    margin-bottom: 24px;
}

.control-section:last-child {
    margin-top: auto;
}

.control-section-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 10px 0;
}

.control-group-vertical {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.btn-control-full {
    width: 100%;
    background: white;
    color: #374151;
    border: 1.5px solid #e5e7eb;
    padding: 12px 16px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-control-full:hover {
    background: #fff5f4;
    border-color: #ff6154;
    color: #ff6154;
}

.btn-control-full svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    flex-shrink: 0;
}

/* Range Selection */
.range-selector-vertical {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.range-inputs-row {
    display: flex;
    gap: 12px;
    align-items: center;
}

.range-input-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 0;  /* allow shrinking — without this, child input's
                      intrinsic width can keep the column from
                      respecting flex: 1 on narrow containers. */
}

.range-input-group label {
    font-size: 0.85rem;
    color: #6b7280;
    font-weight: 600;
}

.range-input-full {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    font-size: 0.95rem;
    transition: border-color 0.2s ease;
    background: white;
    /* Without box-sizing: border-box, width: 100% + padding 28px +
       border 4px makes the input render wider than its flex: 1
       parent — pushing the To input into the From input visually
       on every viewport (desktop too). */
    box-sizing: border-box;
    min-width: 0;  /* allow shrinking inside flex: 1 parent */
}

.range-input-full:focus {
    outline: none;
    border-color: #ff6154;
}

.btn-apply {
    background: #ff6154;
    color: white;
    border-color: #ff6154;
}

.btn-apply:hover {
    background: #e5554a;
    border-color: #e5554a;
    color: white;
}

/* Controls Divider */
.controls-divider {
    height: 2px;
    background: linear-gradient(to right, #e5e7eb 0%, #e5e7eb 50%, transparent 50%);
    background-size: 8px 2px;
    margin: 24px 0;
}

/* Extract Actions Vertical */
.extract-actions-vertical {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.btn-extract {
    position: relative;
    width: 100%;
    padding: 20px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 16px;
    text-align: left;
}

.btn-extract.single {
    background-color: #ff6154;
    color: white;
}

.btn-extract.single:hover:not(:disabled) {
    background: #e5554a;
    box-shadow: 0 6px 16px rgba(255, 97, 84, 0.4);
    transform: translateY(-2px);
}

.btn-extract.separate {
    background-color: transparent;
    color: #374151;
    border: 2px solid #e5e7eb;
}

.btn-extract.separate .btn-arrow {
    stroke: #9ca3af;
}

.btn-extract.separate:hover:not(:disabled) {
    background: #fff5f4;
    border-color: #ff6154;
    color: #ff6154;
    box-shadow: 0 4px 12px rgba(255, 97, 84, 0.15);
    transform: translateY(-2px);
}

.btn-extract.separate:hover:not(:disabled) .btn-arrow {
    stroke: #ff6154;
}

.btn-extract:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Button spinner — shown while the run button is in its loading state.
   Mirrors compress-pdf's .btn-spinner pattern. */
.btn-spinner {
    display: none;
    width: 24px;
    height: 24px;
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}
.btn-extract.btn-loading {
    pointer-events: none;
}
.btn-extract.btn-loading:disabled {
    opacity: 1;
    cursor: default;
}
.btn-extract.btn-loading .btn-extract-content,
.btn-extract.btn-loading .btn-arrow {
    visibility: hidden;
}
.btn-extract.btn-loading .btn-spinner {
    display: block;
    animation: btn-spinner 0.7s linear infinite;
}
@keyframes btn-spinner {
    to { transform: rotate(360deg); }
}

.btn-arrow {
    width: 24px;
    height: 24px;
    stroke: white;
    flex-shrink: 0;
    margin-left: auto;
    transition: transform 0.2s ease;
}

.btn-extract:hover:not(:disabled) .btn-arrow {
    transform: translateX(4px);
}

.btn-extract-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.btn-extract-title {
    font-size: 1rem;
    font-weight: 700;
}

.btn-extract-desc {
    font-size: 0.8rem;
    opacity: 0.8;
    font-weight: 400;
}

.btn-extract.separate .btn-extract-desc {
    color: #6b7280;
}

.btn-extract.separate:hover:not(:disabled) .btn-extract-desc {
    color: #ff6154;
}

/* Loading State */
.loading-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 40px;
    color: #6b7280;
    grid-column: 1 / -1;
}

.loading-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid #e5e7eb;
    border-radius: 50%;
    border-top-color: #ff6154;
    animation: spin 0.8s linear infinite;
    margin-bottom: 20px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.loading-preview p {
    font-size: 1rem;
    font-weight: 500;
}

/* Download Screen Styles */
.download-screen {
    display: none;
    padding: 0;
    max-width: 100%;
    margin: 0;
    min-height: calc(100vh - 81px);
    background: #f8f9fa;
}

.download-screen.active.visible {
    display: block;
}

.download-content {
    display: flex;
    width: 100%;
    min-height: calc(100vh - 81px);
}

/* Left side - PDF Preview (scrollable) */
.pdf-preview-section {
    flex: 1;
    background: #f8f9fa;
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: auto;
    margin-right: 420px;
    height: calc(100vh - 81px);
    box-sizing: border-box;
}

.preview-canvas-container {
    width: 100%;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    margin-bottom: 20px;
    max-width: 700px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.preview-page-wrapper {
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    position: relative;
}

.preview-page-wrapper canvas {
    width: 100%;
    height: auto;
    display: block;
}

/* Lazy-render placeholder for download-preview pages — shimmer until painted.
   aspect-ratio (set inline from page dims) holds the box height pre-render. */
.preview-page-canvas.is-loading {
    width: 100%;
    height: auto;
    background: #f3f4f6;
    background-image: linear-gradient(100deg, #f3f4f6 30%, #eceef1 50%, #f3f4f6 70%);
    background-size: 200% 100%;
    animation: thumbShimmer 1.2s ease-in-out infinite;
}

.page-number-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    z-index: 10;
}

.preview-controls {
    display: none;
    align-items: center;
    gap: 16px;
    margin-top: 8px;
}

@media (max-width: 768px) {
    .preview-canvas-container {
        gap: 0;
    }
    
    .preview-page-wrapper {
        display: none;
    }
    
    .preview-page-wrapper.active {
        display: block;
    }
    
    .page-number-badge {
        display: none;
    }
    
    .preview-controls {
        display: flex;
    }
}

.preview-controls button {
    padding: 10px 18px;
    font-size: 0.9rem;
    background: white;
    border: 2px solid #e5e7eb;
    color: #374151;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    cursor: pointer;
}

.preview-controls button svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
}

.preview-controls button:hover:not(:disabled) {
    border-color: #ff6154;
    background: #fff5f4;
    color: #ff6154;
}

.preview-controls button:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.preview-page-info {
    color: #374151;
    font-size: 0.95rem;
    font-weight: 600;
    min-width: 60px;
    text-align: center;
}

/* Right side - Actions (Fixed Panel) */
.download-actions-section {
    position: fixed;
    right: 0;
    top: 81px;
    width: 420px;
    height: calc(100vh - 81px);
    background: white;
    border-left: 2px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    padding: 40px;
    overflow-y: auto;
    box-sizing: border-box;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.06);
}

.back-button {
    background: none;
    color: #8e96a7;
    border: none;
    padding: 0;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    font-weight: 500;
    position: absolute;
    margin-top: -10px;
    left: 40px;
    cursor: pointer;
    transition: color 0.15s ease;
}

.back-button:hover {
    background: none;
    color: #374151;
    box-shadow: none;
    transform: none;
}

.back-button svg {
    width: 18px;
    height: 18px;
    background: #f9f9f9;
    padding: 6px;
    border-radius: 8px;
    box-sizing: content-box;
    transition: background 0.15s ease;
}

.back-button:hover svg {
    background: #f0f0f0;
}

/* Files Preview List */
#download-files-list {
    margin-top: 50px;
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: calc(100vh - 400px);
    overflow-y: auto;
    padding-right: 8px;
}

#download-files-list::-webkit-scrollbar {
    width: 6px;
}

#download-files-list::-webkit-scrollbar-track {
    background: #f3f4f6;
    border-radius: 10px;
}

#download-files-list::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 10px;
}

#download-files-list::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* Single File Card */
.single-file-card {
    background: none;
    border: none;
    border-radius: 12px;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.single-file-thumb {
    width: 68px;
    height: 82px;
    background: white;
    border-radius: 6px;
    flex-shrink: 0;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.05);
}

.single-file-thumb canvas {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.single-file-details {
    flex: 1;
    text-align: left;
    min-width: 0;
}

.single-file-name-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.single-file-name {
    font-size: 1rem;
    font-weight: 600;
    color: #1f2937;
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    background: #f9f9f9;
    padding: 8px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
}

.single-file-name:hover {
    background: #f0f1f3;
}

.single-file-name-base {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.single-file-name-ext {
    white-space: nowrap;
    flex-shrink: 0;
    color: #9ca3af;
    margin-left: auto;
}

.single-file-info {
    font-size: 0.7rem;
    color: #9ca3af;
}

.done-button {
    background: #10b981;
    color: white;
    padding: 2px 7px;
    border-radius: 8px;
    font-size: 0.6rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-bottom: 3px;
}

.done-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: white;
}

.file-more-btn {
    background: #f9f9f9;
    border: none;
    border-radius: 8px;
    padding: 8px 6px;
    cursor: pointer;
    color: #9ca3af;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.file-more-btn:hover {
    background: #f3f4f6;
    color: #6b7280;
}

/* Multiple Files Card */
.file-preview-card {
    background: none;
    border: none;
    border-radius: 10px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: background 0.15s ease;
    cursor: pointer;
}

.file-preview-card:hover {
    background: #f5f5f5;
}

.file-preview-card.active {
    background: #f0f1f3;
}

.file-preview-thumb {
    width: 48px;
    height: 58px;
    background: white;
    border-radius: 4px;
    flex-shrink: 0;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.05);
}

.file-preview-thumb canvas {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.file-preview-details {
    flex: 1;
    text-align: left;
    min-width: 0;
}

.file-preview-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-preview-name-base {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-preview-name-ext {
    color: #9ca3af;
    flex-shrink: 0;
}

.file-preview-info {
    font-size: 0.8rem;
    color: #6b7280;
}

.file-download-btn {
    background: #f3f4f6;
    border: none;
    color: #6b7280;
    padding: 8px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.file-download-btn:hover {
    background: #e5e7eb;
    color: #374151;
}

.file-download-btn svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
}

/* Download Button */
.download-primary {
    width: 100%;
    padding: 18px 32px;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: #ff6154;
    color: white;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 600;
}

.download-primary:hover {
    background: #e5554a;
    box-shadow: 0 6px 16px rgba(255, 97, 84, 0.4);
    transform: translateY(-2px);
}

.download-primary svg {
    width: 20px;
    height: 20px;
    stroke: white;
    fill: none;
    transition: opacity 0.18s ease;
}

/* Loading state — same as flatten's "Download All" button:
   white background, hairline border, narrow coral progress line
   that fades in after the content fades out. */
.download-primary.loading {
    pointer-events: none;
    position: relative;
    background-color: #fff;
    box-shadow: 0 0 0 1px #e5e7eb;
    transform: none;
    color: transparent;
}
.download-primary.loading svg { opacity: 0; }
.download-primary.loading::after {
    content: '';
    position: absolute;
    left: 30%;
    width: 40%;
    height: 5px;
    background: #fff;
    border-radius: 4px;
    opacity: 0;
    animation: btnLoadingFadeIn 0.18s 0.15s ease forwards;
}
.download-primary.loading::before {
    content: '';
    position: absolute;
    left: 30%;
    width: 0%;
    height: 5px;
    background: #ff6154;
    z-index: 1;
    border-radius: 4px;
    opacity: 0;
    animation: btnLoadingFadeIn 0.18s 0.15s ease forwards,
               btnLoadingFill 2s 0.15s ease-out forwards;
}
@keyframes btnLoadingFadeIn { to { opacity: 1; } }
@keyframes btnLoadingFill {
    0%   { width: 0%; }
    30%  { width: 20%; }
    50%  { width: 28%; }
    70%  { width: 33%; }
    85%  { width: 36%; }
    100% { width: 40%; }
}

/* Another Button */
.extract-another-btn {
    width: 100%;
    padding: 14px 32px;
    background: transparent;
    color: #ff6154;
    border: 2px solid #ff6154;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.extract-another-btn:hover {
    background: #fff5f4;
    box-shadow: 0 4px 12px rgba(255, 97, 84, 0.2);
}

.another-btn-text {
    transition: opacity 0.25s ease;
}

.another-btn-arrow {
    position: absolute;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.extract-another-btn:hover .another-btn-text {
    opacity: 0;
}

.extract-another-btn:hover .another-btn-arrow {
    opacity: 1;
}

/* File More Action Sheet */
.file-more-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 2000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 16px;
    animation: modalFadeIn 0.15s ease;
}

.file-more-overlay.hidden {
    display: none !important;
}

.file-more-sheet {
    width: 100%;
    max-width: 340px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    animation: sheetSlideUp 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

@keyframes sheetSlideUp {
    from { opacity: 0; transform: translateY(100%); }
    to { opacity: 1; transform: translateY(0); }
}

.file-more-group {
    background: white;
    border-radius: 16px;
    overflow: hidden;
}

.file-more-action {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border: none;
    background: none;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: background 0.15s;
}

.file-more-action:hover {
    background: #f9fafb;
}

.file-more-action-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.file-more-action-icon svg {
    color: #374151;
}

.file-more-action-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.file-more-action-label {
    font-size: 0.92rem;
    font-weight: 600;
    color: #1f2937;
}

.file-more-action-desc {
    font-size: 0.75rem;
    color: #9ca3af;
}

.file-more-divider {
    height: 1px;
    background: #f3f4f6;
    margin: 0 18px;
}

.file-more-cancel {
    width: 100%;
    padding: 16px;
    border: none;
    border-radius: 16px;
    background: white;
    color: #6b7280;
    font-size: 0.92rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s;
}

.file-more-cancel:hover {
    background: #f9fafb;
    color: #374151;
}

/* Rename Modal */
.popup-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: modalFadeIn 0.15s ease;
}

.popup-modal-overlay.hidden {
    display: none !important;
}

.rename-modal-card {
    background: white;
    border-radius: 24px;
    padding: 24px;
    width: 320px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.04);
    animation: modalSlideUp 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.rename-modal-title {
    font-size: 1rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 16px;
}

.rename-modal-input-wrap {
    display: flex;
    align-items: center;
    background: #f5f6f8;
    border-radius: 12px;
    padding: 0;
    margin-bottom: 16px;
    overflow: hidden;
}

.rename-modal-input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 12px 14px;
    font-size: 0.92rem;
    font-weight: 600;
    font-family: inherit;
    color: #1f2937;
    outline: none;
    min-width: 0;
}

.rename-modal-ext {
    padding: 12px 14px 12px 0;
    font-size: 0.92rem;
    font-weight: 600;
    color: #9ca3af;
    flex-shrink: 0;
}

.rename-modal-actions {
    display: flex;
    gap: 8px;
}

.rename-modal-cancel {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 14px;
    background: #f5f6f8;
    color: #6b7280;
    font-size: 0.88rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s;
}

.rename-modal-cancel:hover {
    background: #f9fafb;
    color: #374151;
}

.rename-modal-save {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 14px;
    background: #1f2937;
    color: white;
    font-size: 0.88rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s;
}

.rename-modal-save:hover {
    background: #374151;
}

@keyframes modalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes modalSlideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Hide elements when showing download screen */
.content-hidden {
    display: none !important;
}

/* Custom scrollbar */
.controls-panel::-webkit-scrollbar,
.pages-preview-section::-webkit-scrollbar,
.pdf-preview-section::-webkit-scrollbar,
.download-actions-section::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.controls-panel::-webkit-scrollbar-track,
.pages-preview-section::-webkit-scrollbar-track,
.pdf-preview-section::-webkit-scrollbar-track,
.download-actions-section::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
*::-webkit-scrollbar-track {
    background: #f3f4f6;
}

.controls-panel::-webkit-scrollbar-thumb,
.pages-preview-section::-webkit-scrollbar-thumb,
.pdf-preview-section::-webkit-scrollbar-thumb,
.download-actions-section::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 10px;
}

.controls-panel::-webkit-scrollbar-thumb:hover,
.pages-preview-section::-webkit-scrollbar-thumb:hover,
.pdf-preview-section::-webkit-scrollbar-thumb:hover,
.download-actions-section::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
*::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .controls-panel {
        width: 380px;
    }
    
    .pages-preview-section {
        margin-right: 380px;
    }
    
    .download-actions-section {
        width: 380px;
    }
    
    .pdf-preview-section {
        margin-right: 380px;
    }
    
    .preview-panel {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 16px;
    }
}

@media (max-width: 968px) {
    body.selection-active {
        overflow-y: auto;
    }
    
    .selection-panel {
        position: relative;
        height: auto;
        min-height: calc(100vh - 81px);
    }
    
    .selection-content {
        flex-direction: column;
        height: auto;
    }
    
    .controls-panel {
        position: relative;
        width: 100%;
        height: auto;
        top: 0;
        border-left: none;
        border-bottom: 2px solid #e5e7eb;
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    }
    
    .controls-sticky {
        padding: 32px 24px;
    }
    
    .pages-preview-section {
        margin-right: 0;
        height: auto;
        order: 2;
        padding: 32px 24px;
        overflow-y: visible;
    }
    
    .controls-panel {
        order: 2;
    }
    
    .download-screen {
        position: relative;
        height: auto;
        min-height: calc(100vh - 81px);
    }
    
    .download-content {
        flex-direction: column;
        height: auto;
        min-height: calc(100vh - 81px);
    }
    
    .download-actions-section {
        position: relative;
        width: 100%;
        height: auto;
        border-left: none;
        border-top: 2px solid #e5e7eb;
        box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.06);
    }
    
    .pdf-preview-section {
        margin-right: 0;
        padding: 100px 20px 20px 20px;
        height: auto;
        min-height: 50vh;
    }
    
    .back-button {
        top: 20px;
        left: 20px;
    }
}

@media (max-width: 768px) {
    .container {
        padding: 16px;
    }
    
    .pages-preview-section {
        padding: 24px 16px 40px 16px;
        min-height: auto;
    }
    
    .pages-header {
        margin-bottom: 24px;
    }
    
    .pages-header h2 {
        font-size: 1.5rem;
    }
    
    .selection-subtitle {
        font-size: 0.9rem;
    }
    
    .controls-sticky {
        padding: 24px 16px;
    }
    
    .preview-panel {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 16px;
        margin-bottom: 24px;
    }
    
    .pdf-preview-section {
        padding: 80px 16px 24px 16px;
    }
    
    .download-actions-section {
        padding: 24px 16px;
    }
    
    .back-button {
        font-size: 0.9rem;
    }
    
    #download-files-list {
        max-height: none;
    }
}

@media (max-width: 640px) {
    .preview-panel {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 12px;
    }
    
    .page-count-badge {
        font-size: 0.9rem;
        padding: 12px 16px;
    }
    
    .control-section-title {
        font-size: 0.7rem;
    }
    
    .btn-control-full {
        font-size: 0.9rem;
        padding: 11px 16px;
    }
    
    .btn-extract {
        padding: 14px 16px;
    }
    
    .btn-extract-title {
        font-size: 0.95rem;
    }

    .btn-extract-desc {
        font-size: 0.75rem;
    }
}

/* ============================================================
   MOBILE & TABLET OVERRIDES — added 2026-05-06
   Desktop (≥1025px) is unaffected by anything below this line.
   See /var/www/html/MOBILE_OPTIMIZATION.md for the working
   agreement. Applies the merge-pdf / compress-pdf playbook.
   ============================================================ */

/* ---- Narrow desktop transition (≤1280px) ----
   The legacy 1200 rule simultaneously narrows .controls-panel
   (420→380) AND shrinks .preview-panel cells (minmax 160→140) at
   the same breakpoint. That double change creates a noticeable
   visual jump at exactly 1200px. Push both transitions up to
   ≤1280 so the visible layout shift happens earlier and the
   1200-1281 range stays consistent with what users see at ≤1200.
   No effect at >1280 — desktop layout is byte-identical. */
@media (max-width: 1280px) {
    .controls-panel { width: 380px; }
    .pages-preview-section { margin-right: 380px; }
    .download-actions-section { width: 380px; padding: 32px; }
    .pdf-preview-section { margin-right: 380px; }
    .preview-panel {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 16px;
    }
}

/* ---- Narrow desktop / sidebar download view (≤1200px) ----
   Match the absolutely-positioned back-button's left to align
   with the now-narrowed content edge (32px padding). */
@media (max-width: 1200px) {
    .back-button { left: 32px; }
}

/* ---- Tablet & narrow desktop — download view full-screen (≤970px) ----
   Hide preview canvas, hide hero, full-screen actions section,
   cap inner elements at 480px, in-flow back button. */
@media (max-width: 970px) {
    /* TOOL-SPECIFIC: hide PDF preview canvas. */
    .pdf-preview-section { display: none !important; }

    /* Hide page hero in download view — JS only hides container/
       selection-panel; hero would otherwise leave dead space
       above the back button. */
    body.download-active .hero { display: none !important; }

    /* STEP 2: layout order reversal — pages preview goes ON TOP,
       controls panel BELOW. Legacy 968 has it backwards (controls
       first), so users see "Quick Selection" before seeing the
       pages they're selecting from. */
    .pages-preview-section {
        order: 1 !important;
        /* Reset sidebar margin from my ≤1280 rule so the stacked
           layout doesn't leave 380px of dead space on the right.
           My override block is below the legacy 968 in source order,
           so this explicit reset is needed. */
        margin-right: 0 !important;
    }
    .controls-panel {
        order: 2 !important;
        /* Same reset reasoning as above — at ≤970 the panels are
           stacked column-wise, so the sidebar's fixed width and
           position from desktop must be unwound. */
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        top: 0 !important;
        border-left: none !important;
    }

    /* Full-screen download actions section. */
    .download-screen { background: white !important; }
    .download-content {
        flex-direction: column;
        height: auto;
        min-height: calc(100vh - 81px) !important;
        background: white;
    }
    .download-actions-section {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        min-height: calc(100vh - 81px) !important;
        padding: 32px 20px max(32px, env(safe-area-inset-bottom)) !important;
        border: none !important;
        box-shadow: none !important;
        background: white;
        display: flex !important;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        box-sizing: border-box;
    }

    /* Cap children at 480px so buttons + file rows don't stretch
       to the full section width on tablets. */
    .download-actions-section > * {
        width: 100%;
        max-width: 480px;
    }
    .download-primary,
    #download-files-list,
    .single-file-card,
    .extract-another-btn {
        max-width: 480px;
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
    }

    /* Back button: in-flow at top of content column. */
    .back-button {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        margin: 0 auto 32px !important;
        width: 100%;
        max-width: 480px !important;
        justify-content: flex-start;
    }

    /* Vertical rhythm:
         back → 32 → file row → 40 → Download → 12 → Extract Another */
    #download-files-list {
        margin-top: 0 !important;
        margin-bottom: 40px !important;
        /* Override desktop overflow: auto so the .single-file-thumb
           box-shadow renders on all sides. */
        overflow: visible !important;
        max-height: none !important;
        padding: 4px !important;
    }
    .single-file-card { margin: 0 !important; }
    .download-primary { margin-bottom: 0 !important; }
    .extract-another-btn { margin-top: 12px !important; }
}

/* ---- Tablet (≤1024px) ---- */
@media (max-width: 1024px) {
    /* Hero stepdown (40 40 80 → 32 32 48). */
    .hero { padding: 32px 32px 48px; }

    /* Container padding tighten. */
    .container { padding: 20px; }
}

/* ---- Phone (≤768px) ---- */
@media (max-width: 768px) {
    /* Hero on phone — keep h1 prominent. */
    .hero { padding: 24px 16px 32px; }
    .hero h1 { font-size: 2.4rem; line-height: 1.1; letter-spacing: -0.5px; }
    .hero p {
        font-size: 14px;
        line-height: 1.4;
        margin-bottom: 0;
    }

    /* Container padding consistent with merge/compress. */
    .container { padding: 12px; }

    /* Upload button = primary CTA, MORE prominent on phone. */
    .file-input-label,
    #upload-label {
        padding: 16px 44px;
        font-size: 1.15rem;
        border-radius: 14px;
    }

    /* iOS auto-zoom prevention — .range-input-full is below 16px. */
    input, textarea, select { font-size: 16px; }
    .range-input-full { font-size: 16px !important; }

    /* Step 2 layout — extra padding around pages-preview area. */
    .pages-preview-section {
        padding: 24px 16px 16px !important;
    }
    .controls-panel {
        padding: 16px 16px 32px !important;
        border-bottom: none !important;
        border-top: 1px solid #e5e7eb !important;
        box-shadow: none !important;
    }
    .pages-header { margin-bottom: 18px; }
    .pages-header h2 { font-size: 1.4rem; }

    /* Page thumbnails in selection grid — comfortable size on
       phone. Keep auto-fill since selection is a grid where
       more visible thumbs = better UX. */
    .preview-panel {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important;
        gap: 12px !important;
    }
    /* Disable hover-lift on touch — sticky :hover on iOS would
       leave a thumbnail translated up after tap. */
    .page-thumbnail:hover { transform: none; }

    /* Page-count badge — comfortable on phone. */
    .page-count-badge { font-size: 0.85rem; padding: 10px 14px; }

    /* Quick selection / range buttons. */
    .control-group-vertical { gap: 8px; }
    .range-inputs-row { gap: 10px; }
    .range-input-full { padding: 10px 12px; }

    /* Extract action buttons. */
    .btn-extract { padding: 16px 20px; min-height: 60px; }

    /* Modal full-bleed. */
    .error-modal,
    .rename-modal-card {
        max-width: 100% !important;
        width: calc(100% - 24px) !important;
        margin: 12px !important;
    }

    /* File-more bottom sheet safe-area. */
    .file-more-sheet {
        width: calc(100% - 16px);
        margin: 0 8px max(8px, env(safe-area-inset-bottom));
    }

    /* Tap targets. */
    .file-more-btn { min-width: 40px; min-height: 40px; }

    /* Download screen — keep .single-file-thumb at desktop 68×82. */
    .single-file-card { gap: 12px; align-items: center; }
    .single-file-name { font-size: 0.95rem; }
    .single-file-info { font-size: 0.78rem; }
    .done-button { font-size: 0.7rem; padding: 3px 10px; }
}

/* ---- Phone portrait (≤480px) ---- */
@media (max-width: 480px) {
    .hero { padding: 20px 12px 24px; }
    .hero h1 { font-size: 2rem; line-height: 1.1; letter-spacing: -0.4px; }
    .hero p { font-size: 13px; line-height: 1.35; }

    .container { padding: 10px; }

    /* Upload CTA tightest. */
    .file-input-label,
    #upload-label {
        padding: 14px 32px;
        font-size: 1.05rem;
        border-radius: 12px;
    }

    /* Step 2 layout tightest. */
    .pages-preview-section { padding: 20px 12px 12px !important; }
    .controls-panel { padding: 12px 12px 20px !important; }
    .pages-header h2 { font-size: 1.25rem; }

    /* Page thumbnails — auto-fill stays, smaller minmax for
       SE-class screens. Existing legacy 640 already does 100px;
       reinforce. */
    .preview-panel {
        grid-template-columns: repeat(auto-fill, minmax(95px, 1fr)) !important;
        gap: 10px !important;
    }

    /* Range inputs + buttons tightest. */
    .range-inputs-row { gap: 8px; }
    .range-input-full { padding: 9px 10px; }
    .btn-control-full { padding: 11px 14px; font-size: 0.88rem; }

    /* Extract buttons tightest. */
    .btn-extract { padding: 14px 18px; min-height: 56px; }
    .btn-extract-title { font-size: 1rem; }
    .btn-extract-desc { font-size: 0.78rem; }

    /* Single-file card tightest (keep thumb at desktop 68×82). */
    .single-file-card { gap: 10px; }
    .single-file-name { font-size: 0.9rem; }
}

/* ─────────────────────────────────────────────────────────────────────
   Resize-tool-specific styles: dimension labels on thumbnails, outlier
   highlight, detected-status card, target/mode/scope picker.
   ───────────────────────────────────────────────────────────────────── */

/* Hide the checkbox that came from the split-pdf scaffold — this tool
   doesn't use per-page selection. */
#pdf-preview .page-checkbox { display: none !important; }

/* Dimension label under each page thumbnail (footer, left column row 2). */
.thumbnail-dims {
    font-size: 0.72rem;
    color: #6b7280;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

/* Outlier emphasis — coral frame on the PAGE only; details below stay plain. */
.page-thumbnail-wrapper.is-outlier .page-thumbnail {
    border-color: #ff6154;
    box-shadow: 0 0 0 1px #ff6154, 0 8px 18px rgba(255, 97, 84, 0.06);
}
.page-thumbnail-wrapper.is-outlier .thumbnail-dims {
    color: #ff6154;
    font-weight: 700;
}
.outlier-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: #ff6154;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    padding: 4px 8px;
    border-radius: 6px;
    line-height: 1;
    box-shadow: 0 2px 4px rgba(255, 97, 84, 0.10);
}

/* ── Detected-status stat card — size name as the focal point, a
   match/differ proportion bar, and an actionable "to fix" pill. ── */
.detected-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 16px 18px;
}
.detected-card-label {
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #9ca3af;
    margin-bottom: 10px;
}
.detected-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.detected-size {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.detected-size-name {
    font-size: 1.4rem;
    font-weight: 800;
    color: #1f2937;
    letter-spacing: -0.01em;
    line-height: 1.1;
}
.detected-size-dims {
    font-size: 0.82rem;
    color: #6b7280;
    font-variant-numeric: tabular-nums;
}
.detected-bar {
    height: 8px;
    background: #f3f4f6;
    border-radius: 999px;
    overflow: hidden;
    margin: 16px 0 10px;
}
.detected-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #ff6154 0%, #ff7e72 100%);
    border-radius: 999px;
    transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.detected-card.all-match .detected-bar-fill {
    background: linear-gradient(90deg, #10b981 0%, #34d399 100%);
}
.detected-caption {
    font-size: 0.78rem;
    color: #6b7280;
    font-variant-numeric: tabular-nums;
    line-height: 1.4;
}
.detected-caption b { color: #1f2937; font-weight: 700; }

/* ── Custom dropdown — ported from pdf-to-pdfa / change-pdf-version so
   the resize tool's selectors match the site-wide control style. ── */
.custom-dropdown { position: relative; width: 100%; }
.custom-dropdown-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: #f8f9fa;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.custom-dropdown-trigger:hover { border-color: #ffc9c3; background: #fff5f4; }
.custom-dropdown.open .custom-dropdown-trigger { border-color: #ff6154; background: #fff5f4; }
.dropdown-selected { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dropdown-selected-text { font-size: 1rem; font-weight: 600; color: #1f2937; }
.dropdown-selected-desc { font-size: 0.8rem; color: #9ca3af; }
.dropdown-arrow { width: 20px; height: 20px; stroke: #6b7280; transition: transform 0.2s ease; flex-shrink: 0; }
.custom-dropdown.open .dropdown-arrow { transform: rotate(180deg); }
.custom-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 100;
    margin-top: 8px;
    display: none;
    max-height: 320px;
    overflow: hidden;
}
.custom-dropdown.open .custom-dropdown-menu { display: block; overflow-y: auto; }
.dropdown-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    cursor: pointer;
    transition: all 0.15s ease;
    border-bottom: 1px solid #f3f4f6;
}
.dropdown-option:last-child { border-bottom: none; }
.dropdown-option:hover { background: #f8f9fa; }
.dropdown-option.selected { background: #fff5f4; }
.dropdown-option-content { display: flex; flex-direction: column; gap: 2px; }
.dropdown-option-name { font-size: 0.95rem; font-weight: 600; color: #1f2937; }
.dropdown-option.selected .dropdown-option-name { color: #ff6154; }
.dropdown-option-desc { font-size: 0.8rem; color: #9ca3af; }
.custom-dropdown-menu::-webkit-scrollbar { width: 8px; }
.custom-dropdown-menu::-webkit-scrollbar-track { background: transparent; margin: 10px 0; }
.custom-dropdown-menu::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; border: 2px solid white; }
.custom-dropdown-menu::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* Custom W×H row (revealed when target == custom). */
.custom-size-row {
    margin-top: 14px;
    padding: 14px;
    background: #f8f9fa;
    border: 1px solid #eceef1;
    border-radius: 12px;
    display: grid;
    grid-template-columns: 1fr auto 1fr 86px;
    gap: 10px;
    align-items: end;
}
.custom-size-row[hidden] { display: none; }
.custom-size-field { min-width: 0; }
.custom-size-row label {
    display: block;
    font-size: 0.68rem;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: #9ca3af;
    margin-bottom: 6px;
    font-weight: 700;
}
.custom-size-row input {
    width: 100%;
    box-sizing: border-box;
    height: 42px;
    padding: 0 12px;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    background: #fff;
    color: #1f2937;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.custom-size-row input::placeholder { color: #c4c8ce; font-weight: 500; }
.custom-size-row input:focus {
    outline: none;
    border-color: #ff6154;
    background: #fff5f4;
}
/* "×" separator between width and height */
.custom-size-x {
    align-self: end;
    padding-bottom: 9px;
    color: #c4c8ce;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1;
    user-select: none;
}
/* Compact custom dropdown for the unit, sized to match the inputs */
.unit-dropdown .custom-dropdown-trigger {
    height: 42px;
    padding: 0 10px 0 12px;
    border-width: 1.5px;
    background: #fff;
}
.unit-dropdown .dropdown-selected-text { font-size: 0.95rem; font-weight: 600; }
.unit-dropdown .dropdown-arrow { width: 16px; height: 16px; }
.unit-dropdown .custom-dropdown-menu { min-width: 100%; }
.unit-dropdown .dropdown-option { padding: 9px 12px; }
.unit-dropdown .dropdown-option-name { font-size: 0.9rem; }

@media (max-width: 480px) {
    .custom-size-row {
        grid-template-columns: 1fr auto 1fr;
    }
    .custom-size-row .custom-size-field:last-child {
        grid-column: 1 / -1;
    }
}

/* ── Scope — segmented two-button control, on-brand pill style. ── */
.scope-segment {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.scope-segment-btn {
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-align: left;
    padding: 14px 16px;
    background: #f8f9fa;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.18s ease;
}
.scope-segment-btn:hover { border-color: #ffc9c3; background: #fff5f4; }
.scope-segment-btn.active { border-color: #ff6154; background: #fff5f4; }
.scope-segment-btn .seg-title {
    font-size: 0.92rem;
    font-weight: 600;
    color: #1f2937;
}
.scope-segment-btn.active .seg-title { color: #ff6154; }
.scope-segment-btn .seg-sub {
    font-size: 0.74rem;
    color: #9ca3af;
    line-height: 1.35;
}
.scope-segment-btn.active .seg-sub { color: #f0857b; }