* {
    margin: 0;
    padding: 0;
}

/* ============================================================
   RESPONSIVE FOUNDATION
   ============================================================ */

/* Every explicit width on this site was written as if padding and
   borders were included in it — the layout was tuned by eye against
   the default content-box, so a box declared 300px wide actually
   occupied 304px once its 2px border was counted. That slack is where
   most of the horizontal overflow came from: enough boxes each a few
   pixels wider than declared, side by side in a flex row, and the row
   no longer fits. border-box makes the declared width the real width,
   so the arithmetic in the media queries below is trustworthy.

   The handful of rules that were sized around the old model have had
   their declared sizes adjusted to their previously rendered values,
   so this changes the box model without changing the rendering. */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Replaced media never widens its column. Height is deliberately left
   alone: several images here are sized by height with width:auto, and
   forcing height:auto would collapse them. */
img,
svg,
video,
canvas,
iframe {
    max-width: 100%;
}

/* Ad slots state their size as a ceiling, never as a commitment. A slot
   that insists on 728px inside a 584px column does not overflow quietly
   — it drags the whole page wider, which is exactly what happened
   between 769px and about 1100px, where the leaderboard was still at
   its full desktop width but the column had already narrowed. The
   declared width stays the size to *ask* an ad network for; the
   max-width is what the page can actually give. */
.ad-728,
.ad-box {
    max-width: 100%;
}

/* A single unbroken string — a pasted URL, a long filename, a base64
   blob in an error message — is one atomic box to the layout engine
   and will push the page wider than the screen no matter what the
   container says. Allowing a break inside it is the only thing that
   prevents that. */
body {
    overflow-wrap: break-word;
}

/* Smooth scrolling site-wide. The tool scripts already animate their own
   jumps (to the file list, the download button, back to the top), but
   every *other* scroll — the "Go to Homepage" link, in-page anchors, and
   any scrollIntoView() called without an explicit behavior — was landing
   instantly. Setting it here makes all of them consistent instead of
   each page deciding for itself.

   scroll-padding-top keeps a target from being hidden underneath the
   sticky navbar when it is scrolled to; without it the top of the
   element ends up behind the bar. */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 92px;   /* navbar height (76px) + breathing room */
}

/* Respect the OS "reduce motion" setting: animated scrolling is a common
   migraine/vestibular trigger, so anyone who has asked for less motion
   gets an instant jump instead. */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 50%, #ede9fe 100%);
    background-attachment: fixed;
    min-height: 100vh;

    /* The page is a column: navbar, content, footer. `min-height: 100vh`
       above only guaranteed the BODY reached the bottom of the window —
       the footer still sat directly after the content, so on a short page
       (a tool with nothing uploaded yet) it landed mid-screen with the
       background showing beneath it. Making the body a flex column lets
       the content region take up the slack instead. */
    display: flex;
    flex-direction: column;
}

/* The content region between navbar and footer absorbs whatever height is
   left over, which puts the footer on the bottom edge of a short page and
   directly after the content on a long one.
   `flex-shrink: 0` so a tall page still scrolls rather than being squeezed
   into the viewport. Everything else that sits at body level — toasts,
   drop overlays, modal backdrops — is positioned out of flow and is not
   matched here. */
body > .pagebox,
body > .container {
    flex: 1 0 auto;
}

/* ============================================================
   NAVBAR — redesigned (CSS only; components/navbar.html markup is
   untouched). Kept the site's existing orange brand colour rather
   than switching palettes — a warm gradient + a deep warm-brown
   accent for text/hover instead of flat orange + black, which reads
   noticeably more designed without looking like a different site.

   A note on the accent colour: white text was the obvious "modern
   navbar" instinct here, but white-on-this-orange only measures
   ~2.9:1 contrast (WCAG AA needs 4.5:1 for normal text) — worse than
   the black text this replaced. #2a1400 against the gradient's
   midtone measures ~6:1, so legibility actually improves rather than
   just changing look.
   ============================================================ */
.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 40px;
    height: 76px;
    background: linear-gradient(120deg, #ff7a1a 0%, #ff6600 55%, #f25c00 100%);
    box-shadow: 0 4px 20px rgba(194, 65, 12, 0.28);
    position: sticky;
    top: 0;
    z-index: 100;
}

.logo {
    height: 52px;
    background-color: none;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    transition: transform 0.2s ease;
}

.nav > a:first-child:hover .logo {
    transform: scale(1.05);
}

.atr {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 15.5px;
}

a {
    color: inherit;
    text-decoration: none;
}

/* Top-level triggers only ("PDF Tools", "Image Tools", "Barcode & QR")
   — .dropdown a below is styled separately so this can't leak into
   the dropdown panels nested inside the same .nav-item. */
.atr > .nav-item > a {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border-radius: 999px;
    color: #2a1400;
    font-weight: 700;
    letter-spacing: 0.2px;
    transition: background 0.2s ease, color 0.2s ease;
}

.atr > .nav-item:hover > a,
.atr > .nav-item > a:hover {
    background: #2a1400;
    color: #fff;
}

.navbtn {
    display: flex;
    align-items: center;
    gap: 10px;
}

.navbtn button {
    border-radius: 999px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    border: 1.5px solid #2a1400;
    background: transparent;
    color: #2a1400;
    transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.navbtn button:hover {
    background: #2a1400;
    color: #fff;
    transform: translateY(-1px);
}

/* Signup — the primary action, so it reads as filled/solid rather
   than ghost like API/Login. */
.navbtn button:last-child {
    background: #2a1400;
    color: #fff;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.22);
}

.navbtn button:last-child:hover {
    background: #40200a;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}

/* ------------------------------------------------------------------
   MOBILE NAVIGATION

   The previous approach here was to let the bar wrap: every link and
   button stayed on screen, just on more rows. It was honest about its
   limits ("no markup changes to work with"), but it had two problems
   that only measuring the page revealed. The hover dropdowns are 251px
   wide panels anchored to the centre of their trigger, so on a 320px
   screen each one hung 24–48px past the edge and dragged the whole
   document sideways — every page on the site scrolled horizontally, on
   every phone. And a menu that only opens on :hover has no open state
   at all on a touch screen.

   So the markup now carries a toggle button and a wrapper, and this
   becomes a real drawer. Above 900px none of it applies and the bar is
   exactly what it was.
   ------------------------------------------------------------------ */

/* The wrapper is invisible to layout on desktop: .atr and .navbtn stay
   direct flex children of .nav, so the desktop bar is unchanged. */
.nav-menu {
    display: contents;
}

.nav-toggle {
    display: none;
    /* 44px touch target, per the mobile guidance — the visible bars are
       smaller but the hit area is not. */
    width: 44px;
    height: 44px;
    padding: 10px;
    border: 1.5px solid #2a1400;
    border-radius: 12px;
    background: transparent;
    color: #2a1400;
    cursor: pointer;
    flex-shrink: 0;
}

.nav-toggle-box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 100%;
}

.nav-toggle-bar {
    display: block;
    height: 2px;
    width: 100%;
    border-radius: 2px;
    background: currentColor;
    transition: transform 0.25s ease, opacity 0.2s ease;
}

/* Open state: the outer bars cross, the middle one goes. Driven by
   aria-expanded so the visual state and the state screen readers are
   told can never disagree. */
/* 11px, not 6: the bar box is 24px tall (44px button less 10px padding
   each side) with the three bars spaced to 0, 11 and 22. Each outer bar
   has to travel the full 11px to the centre line or the two strokes
   cross off-centre and the X comes out looking like a chevron. */
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
    transform: translateY(11px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
    opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
    transform: translateY(-11px) rotate(-45deg);
}

.nav-toggle:focus-visible,
.nav-trigger:focus-visible,
.dropdown a:focus-visible,
.navbtn button:focus-visible {
    outline: 3px solid #2a1400;
    outline-offset: 2px;
}


.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 30px auto;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    gap: 15px;
    text-align: center;
    background: linear-gradient(135deg, rgba(255, 122, 26, 0.05) 0%, rgba(255, 102, 0, 0.05) 100%);
    padding: 35px 60px;
    border-radius: 16px;
    box-shadow: 0 2px 15px rgba(194, 65, 12, 0.08);
    max-width: 1020px;   /* was 900px — 60px side padding */
}

.container h1 {
    font-size: 40px;
    font-weight: 800;
    background: linear-gradient(135deg, #ff7a1a 0%, #ff6600 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 5px;
    letter-spacing: -0.5px;
}

.container p {
    font-size: 16px;
    color: #475569;
    line-height: 1.7;
    max-width: 750px;
    font-weight: 500;
}

.tools {
    margin: 35px auto;
    border-top: 2px solid #e2e8f0;
    padding-top: 35px;
    padding-bottom: 20px;
    max-width: 1200px;
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
}

.tools h2 {
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 25px;
    font-size: 28px;
    position: relative;
    display: inline-block;
    left: 50%;
    transform: translateX(-50%);
    padding-bottom: 10px;
}

.tools h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 3px;
    background: linear-gradient(90deg, #ff7a1a, #ff6600);
    border-radius: 2px;
}

/* HORIZONTAL ADS */
.ad-horizontal {
    display: flex;
    justify-content: center;
    margin: 40px auto;
}

.ad-728 {
    width: 728px;
    height: 90px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #64748b;
    font-weight: 600;
    transition: all 0.3s ease;
}

.ad-728:hover {
    border-color: #ff7a1a;
    box-shadow: 0 4px 20px rgba(255, 122, 26, 0.1);
    background: linear-gradient(135deg, #fff8f4 0%, #ffe8d9 100%);
}

@media (max-width: 768px) {
    .ad-728 {
        width: 100%;
        height: auto;
        padding: 20px;
        margin: 0 20px;
    }
}

.icon {
    height: 214px;   /* was 180px — 16px padding + 1px border */
    width: 194px;   /* was 160px — 16px padding + 1px border */
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #f1f5f9;
    font-size: 13px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 16px;
    gap: 8px;
    text-align: center;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.icon::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #ff7a1a, #ff6600);
    transform: scaleX(0);
    transition: transform 0.4s ease;
    transform-origin: left;
}

.icon:hover::before {
    transform: scaleX(1);
}

.icon:hover {
    transform: translateY(-10px);
    box-shadow: 0 14px 35px rgba(255, 122, 26, 0.18);
    border-color: #ffe8d9;
}

.pdflist, .image_tools {
    display: flex;
    gap: 25px;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0 20px;
}

.icon img {
    height: 70px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.05));
    transition: transform 0.3s ease;
}

.icon:hover img {
    transform: scale(1.06);
}

.icon .text-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.icon .text-content h1,
.icon .text-content h3 {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 4px;
    line-height: 1.2;
}

.icon .text-content p {
    font-size: 11px;
    color: #64748b;
    line-height: 1.3;
    margin: 0;
}

.pagebox {
    display: flex;
    font-size: large;
}

/* Laid out as a centred wrapping row like .pdflist and .image_tools. It was
   a single column back when this section held one card; with more than one
   tool in it, a column left most of the row empty. The ::before heading below
   is width:100%, so it still takes a line of its own above the cards. */
.text_tools {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px;
    width: 100%;
}

/* Add header for text_tools section */
.text_tools::before {
    content: 'Other Tools';
    font-weight: 800;
    color: #1e293b;
    font-size: 28px;
    text-align: center;
    width: 100%;
    padding-bottom: 15px;
    border-bottom: 3px solid;
    border-image: linear-gradient(90deg, #ff7a1a, #ff6600) 0 0 1 0;
    margin-bottom: 10px;
}

/* ------------------------------------------------------------------
   BACK TO HOMEPAGE

   One definition, in one place. This button previously had two
   competing rule blocks a couple of thousand lines apart — one giving
   it a fixed 254px width and a purple-on-blue hover, the other a blue
   rounded rectangle — and the cascade quietly decided which parts of
   each survived. Anyone changing it had to find both.

   The pill is the <a>, not the wrapper. Before, the padding belonged to
   the surrounding div, so the visible button was bigger than the link
   inside it and a click near its edge did nothing at all. Moving the
   box onto the anchor makes the whole shape the target — which is also
   what lets it meet the 44px touch minimum on a phone.

   It is also no longer a fixed 254px slab: it is sized by its own
   label, so translations or a longer word cannot overflow it and it
   does not reserve empty width when the text is short.

   The button used to be `position: absolute`, which took it out of the
   flow — so the ad block below it was laid out as if the button were
   not there and the button painted straight over it. Nothing can sit
   "below" an out-of-flow element, so it flows normally now and the ad
   follows it. See the .tnd margin note below for the knock-on change.
   ------------------------------------------------------------------ */
.backtohome {
    display: flex;          /* keeps the pill shrink-wrapped, not full width */
    margin: 20px 0;
}

.backtohome a {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    padding: 11px 20px;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #fff;

    color: #334155;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;    /* "Go to / Homepage" on two lines reads as broken */

    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    transition: background 0.25s ease, border-color 0.25s ease,
                color 0.25s ease, box-shadow 0.25s ease;
}

/* The arrow carries the brand colour and does the moving. Sliding the
   whole button on hover shifts the ad block's neighbour by a couple of
   pixels; sliding just the arrow gives the same "going back" cue and
   moves nothing that has to stay still. */
.backtohome a i {
    color: #ff7a1a;
    font-size: 13px;
    transition: transform 0.25s ease;
}

.backtohome a:hover {
    background: #fff8f4;
    border-color: #ff7a1a;
    color: #c2410c;
    box-shadow: 0 4px 14px rgba(255, 122, 26, 0.18);
}

.backtohome a:hover i {
    transform: translateX(-4px);
}

.backtohome a:active {
    box-shadow: 0 1px 2px rgba(255, 122, 26, 0.2);
}

/* Keyboard users get the same clear ring the rest of the site uses. */
.backtohome a:focus-visible {
    outline: 3px solid #2a1400;
    outline-offset: 2px;
}

.tnd {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    height: auto;
    width: 50vw;

    /* The indent and the width have to agree with each other. Several
       tool pages override the width to 100% of the column, and 100% of
       the column plus a 100px indent is 100px wider than the column —
       which is where the constant 84px of horizontal overflow on every
       one of those pages came from. Capping the width at "the column
       minus the indent" makes the pair add up at any viewport, so the
       tool page can no longer be pushed off its own edge.

       50vw is also a viewport measure being used for a column that is
       not the viewport; the cap keeps it honest when the column is
       narrower than half the screen. */
    max-width: calc(100% - 100px);

    /* Was 90px purely to clear the absolutely positioned .backtohome.
       The button occupies real height now, so that reservation is dead
       space; 40px matches the ad block's own margin and puts the tool
       content back where it sat before. */
    margin-top: 40px;
    margin-left: 100px;
}

.tnd h4,
.tnd h1 {
    font-family: sans-serif;
    font-size: 40px;
}

.tnd p {
    font-family: serif;
    font-size: 20px;
}

.upload-box {
    border: 2px dashed gray;
    padding: 40px;
    text-align: center;
    border-radius: 10px;
    cursor: pointer;
}

.upload-box:hover {
    background: #f1f5f9;
}

/* PAGE LAYOUT */
.pagebox {
    display: flex;
    justify-content: space-between;
    padding: 20px 60px;
}

/* LEFT TOOL AREA */
.tool-area {
    flex: 3;

    /* A flex item's default `min-width: auto` means it refuses to shrink
       below the widest thing inside it. One 728px ad slot in this column
       was therefore enough to hold the whole row open and shove the
       300px sidebar off the right edge — the row could not compress
       because this item would not. `0` lets the column narrow and hand
       the constraint down to its children, where max-width can deal
       with it. */
    min-width: 0;
}

/* RIGHT ADS */
.sidebar-ads {
    width: 300px;
    /* Fixed rail: it should keep its width and let the tool column take
       the remainder, rather than the two fighting over the shortfall. */
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-left: 20px;
}

/* AD BOX */
.ad-box {
    width: 300px;
    height: 250px;
    background: #f1f5f9;
    border: 2px dashed gray;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* UPLOAD BOX */
.upload-box {
    border: 2px dashed gray;
    padding: 40px;
    border-radius: 10px;
    cursor: pointer;
    text-align: center;
}

.upload-box:hover {
    background: #e2e8f0;
}

#fileList {
    margin-top: 20px;
    width: 100%;
}

.file-item {
    background: #f1f5f9;
    padding: 10px;
    margin: 5px 0;
    border-radius: 6px;
}

.btn-group {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

/* #mergeBtn and #downloadBtn are now styled via the shared
   .utl-process-btn / .utl-download-btn classes (see the bottom of
   this file) rather than these bare id rules. */


#loader {
    margin-top: 10px;
    font-size: 14px;
    color: gray;
}

.file-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.file-item {
    position: relative;
    width: 202px;   /* was 200px — 1px border */
    height: 302px;   /* was 300px — 1px border */
    background: white;
    border-radius: 12px;
    border: 1px solid #ccc;
    overflow: hidden;
    cursor: grab;
}

.file-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.file-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.rotate-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 6px;
    border-radius: 50%;
    display: none;
}

.file-item:hover .rotate-btn {
    display: block;
}

.file-size {
    position: absolute;
    bottom: 10px;
    left: 10px;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 3px 6px;
    border-radius: 6px;
}

.total-size {
    margin-top: 10px;
    font-weight: bold;
}

/* Merge loading */
.loading-btn {
    background: gray !important;
    color: transparent;
    position: relative;
}

.loading-btn::after {
    content: "";
    width: 26px;   /* was 20px — 3px border */
    height: 26px;   /* was 20px — 3px border */
    border: 3px solid white;
    border-top: 3px solid transparent;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: spin 1s linear infinite;
}

@keyframes spin {
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.file-name {
    flex: 1;
}

.delete-btn {
    color: red;
    cursor: pointer;
    margin-left: 10px;
}

.file-item.dragging {
    opacity: 0.5;
}

footer {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    padding: 0;
    margin-top: 50px;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    padding: 20px 60px;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

.footer-section h3 {
    font-size: 20px;
    font-weight: 800;
    background: linear-gradient(135deg, #ff7a1a 0%, #ff6600 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 4px 0;
    letter-spacing: -0.5px;
}

.footer-section p {
    color: #cbd5e1;
    font-size: 11px;
    line-height: 1.4;
    max-width: 300px;
    margin: 0;
}

.footer-links {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
    align-items: center;
}

.footer-links a {
    color: #cbd5e1;
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.3s ease;
    position: relative;
    padding-bottom: 3px;
}

.footer-links a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #ff7a1a, #ff6600);
    transition: width 0.3s ease;
}

.footer-links a:hover {
    color: #ff7a1a;
}

.footer-links a:hover::after {
    width: 100%;
}

.footer-bottom {
    padding: 10px 60px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
}

.footer-bottom p {
    color: #94a3b8;
    font-size: 11px;
    margin: 0;
    font-weight: 500;
}

.page-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 15px;
    margin-top: 20px;
    grid-auto-rows: 270px;
}

.page-item {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    width: 100%;
    height: 100%;
}

/* canvas */
.page-item canvas {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    max-width: 100%;
    max-height: 100%;
}

/* 🔥 overlay ALWAYS visible */
.page-overlay {
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    display: flex;
    justify-content: space-between;
    z-index: 10;
}

/* icons */
.page-overlay i,
.page-overlay input {
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 6px;
    border-radius: 5px;
    cursor: pointer;
}

/* checkbox */
.page-check {
    transform: scale(1.2);
}

/* page number */
.page-number {
    position: absolute;
    bottom: 5px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 3px;
}

/* selected highlight (🔥 new) */
.page-item.selected {
    outline: 3px solid #4CAF50;
}

.select-all-bar {
    margin-top: 15px;
    margin-bottom: 10px;
    font-weight: 600;
}

.select-all-bar input {
    transform: scale(1.2);
    margin-right: 6px;
}

.action-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
}

#actionButtons {
    display: flex;
    gap: 10px;
}


/* .atr itself is defined once now, up with the rest of the navbar
   redesign near the top of this file — this used to redeclare it a
   second time here with a different gap, which only "worked" because
   the cascade happened to pick a mix of properties from both rules. */

.nav-item {
    position: relative;
}

.dropdown {
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    transform: translate(-50%, 8px);
    background: #fff;
    min-width: 251px;   /* was 235px — 8px padding */
    max-width: fit-content;
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(42, 20, 0, 0.2);
    padding: 8px;

    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;

    /* A closed panel must not take up room in the document.
       `visibility: hidden` hides it but LEAVES IT LAID OUT, and an
       absolutely positioned box still counts towards the page's
       scrollable area even when nobody can see it. The PDF Tools menu is
       952px tall, so every page on the site scrolled about 190px past its
       own footer into empty background — which reads as "the footer is
       not at the bottom", though the footer was never the problem.
       Collapsing it to nothing while closed removes that height; the
       panel is clipped rather than shrunk, so its contents keep their
       real size and nothing reflows when it opens. */
    max-height: 0;
    overflow: hidden;
}

.dropdown a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 10px;
    text-decoration: none;
    color: #333;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.15s ease, color 0.15s ease, padding-left 0.15s ease;
}

.dropdown a img {
    height: 34px;   /* was 26px — 4px padding */
    width: 34px;   /* was 26px — 4px padding */
    object-fit: contain;
    padding: 4px;
    background: #fff1e2;
    border-radius: 8px;
    flex-shrink: 0;
    margin-right: 0;
}

.dropdown a:hover {
    background: #fff1e2;
    color: #c2410c;
    padding-left: 16px;
}

/* Desktop only, and deliberately fenced off by a media query rather
   than overridden further down.

   This rule is three classes deep (.nav-item + :hover + .dropdown), so
   it outranks any plain `.dropdown` rule regardless of what order the
   file puts them in. Inside the mobile drawer that meant its
   `translate(-50%, 0)` still applied on hover and slid the open panel
   half its own width off the left of the screen — the menu appeared to
   run away from the pointer. Overriding it property by property is a
   fight that has to be re-won every time a declaration is added here,
   so the rule simply does not exist below the desktop breakpoint. */
@media (min-width: 901px) {
    .nav-item:hover .dropdown {
        opacity: 1;
        visibility: visible;
        transform: translate(-50%, 0);
        /* Released the moment the panel opens. `none` rather than a
           pixel figure so a menu that grows later cannot quietly get cut
           off, and the clipping goes with it so the shadow is not
           sliced. */
        max-height: none;
        overflow: visible;
    }
}

.nav-item i {
    display: inline-block;
    font-size: 13px;
    color: #2a1400;
    opacity: 0.7;
    transition: transform 0.3s ease;
    /* smooth animation */
}

/* Desktop only, for the same reason as the panel above: in the drawer
   the chevron follows aria-expanded, and a hover state that outranks it
   leaves the arrow pointing down at a section that is shut. */
@media (min-width: 901px) {
    .nav-item:hover i {
        transform: rotate(90deg);
        /* right → down */
    }
}

.compress-options {
    display: flex;
    flex-direction: column;
}

.preview-container {
    margin-top: 15px;
}

.preview-item {
    width: 100%;
    height: 200px;
    overflow: hidden;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.preview-item canvas {
    height: 100%;
    width: auto;
    /* maintain ratio */
}

.tt-page-header {
    margin: 24px 0 28px;
}

.tt-page-title {
    font-size: 28px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 8px;
}

.tt-page-sub {
    font-size: 15px;
    color: #64748b;
    line-height: 1.6;
    max-width: 680px;
}

/* ── Section wrapper ────────────────────────────────────────*/
.tt-section {
    margin-bottom: 36px;
}

.tt-section-title {
    font-size: 17px;
    font-weight: 700;
    color: #334155;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid #e2e8f0;
}

/* ── Toolbar ─────────────────────────────────────────────── */
.tt-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

/* ── Shared button base ──────────────────────────────────── */
.tt-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 500;
    font-family: sans-serif;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #ffffff;
    color: #334155;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.1s, box-shadow 0.15s;
    white-space: nowrap;
}

.tt-btn:hover {
    background: #e0f2fe;
    border-color: #38bdf8;
    color: #0369a1;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(56, 189, 248, .2);
}

.tt-btn:active {
    transform: translateY(0);
}

.tt-btn-primary {
    background: #38bdf8;
    border-color: #38bdf8;
    color: #fff;
}

.tt-btn-primary:hover {
    background: #0ea5e9;
    border-color: #0ea5e9;
    color: #fff;
}

.tt-btn-danger {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #dc2626;
}

.tt-btn-danger:hover {
    background: #dc2626;
    border-color: #dc2626;
    color: #fff;
}

.tt-btn-ghost {
    background: transparent;
    border-color: transparent;
    color: #94a3b8;
}

.tt-btn-ghost:hover {
    background: #f1f5f9;
    color: #334155;
    border-color: #e2e8f0;
}

.tt-link-btn {
    background: none;
    border: none;
    color: #0ea5e9;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    text-decoration: underline;
    padding: 0 4px;
    font-family: sans-serif;
}

.tt-link-muted {
    color: #94a3b8;
}

/* ── Textarea ────────────────────────────────────────────── */
.tt-textarea-wrap {
    position: relative;
    border: 2px solid #cbd5e1;
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.15s, box-shadow 0.15s;
    background: #fff;
}

.tt-textarea-wrap:focus-within {
    border-color: #38bdf8;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, .15);
}

.tt-textarea-wrap.drag-over {
    border-color: #38bdf8;
    box-shadow: 0 0 0 4px rgba(56, 189, 248, .2);
}

.tt-textarea {
    width: 100%;
    min-height: 312px;   /* was 280px — 16px padding */
    max-height: 520px;
    padding: 16px;
    font-family: 'Cascadia Code', 'Consolas', monospace;
    font-size: 14px;
    line-height: 1.7;
    border: none;
    background: #fff;
    color: #1e293b;
    resize: vertical;
    display: block;
}

.tt-textarea:focus {
    outline: none;
}

.tt-drop-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 700;
    color: #0ea5e9;
    background: rgba(224, 242, 254, .85);
    backdrop-filter: blur(3px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
}

.tt-textarea-wrap.drag-over .tt-drop-overlay {
    opacity: 1;
}

/* ── Restore banner ──────────────────────────────────────── */
.tt-restore-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 10px 14px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    font-size: 13px;
    color: #1d4ed8;
}

[hidden] {
    display: none !important;
}

/* ── Stats grid ──────────────────────────────────────────── */
.tt-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}

.tt-stat {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px 12px;
    text-align: center;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}

.tt-stat:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(56, 189, 248, .2);
    border-color: #38bdf8;
}

.tt-stat-val {
    font-size: 22px;
    font-weight: 800;
    color: #0ea5e9;
    line-height: 1.1;
    margin-bottom: 3px;
    word-break: break-all;
}

.tt-stat-lbl {
    font-size: 11px;
    color: #94a3b8;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* ── Tool search ─────────────────────────────────────────── */
.tt-search-wrap {
    position: relative;
    margin-bottom: 16px;
    max-width: 420px;
}

.tt-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 14px;
    pointer-events: none;
}

.tt-search-input {
    width: 100%;
    padding: 10px 14px 10px 36px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    font-size: 14px;
    font-family: sans-serif;
    background: #fff;
    color: #1e293b;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.tt-search-input:focus {
    outline: none;
    border-color: #38bdf8;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, .12);
}

.tt-search-results {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .1);
    max-height: 302px;   /* was 300px — 1px border */
    overflow-y: auto;
    z-index: 500;
    display: none;
}

.tt-search-results.open {
    display: block;
}

.tt-search-result-item {
    padding: 9px 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    transition: background 0.12s;
}

.tt-search-result-item:hover {
    background: #f0f9ff;
    color: #0369a1;
}

.tt-search-cat-badge {
    font-size: 11px;
    color: #94a3b8;
    background: #f1f5f9;
    padding: 2px 7px;
    border-radius: 99px;
}

/* ── Category tabs ───────────────────────────────────────── */
.tt-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 18px;
}

.tt-tab {
    padding: 6px 14px;
    border-radius: 99px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #64748b;
    font-size: 12.5px;
    font-weight: 600;
    font-family: sans-serif;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.tt-tab:hover {
    background: #e0f2fe;
    color: #0369a1;
    border-color: #38bdf8;
}

.tt-tab.active {
    background: #38bdf8;
    color: #fff;
    border-color: #38bdf8;
    box-shadow: 0 2px 8px rgba(56, 189, 248, .35);
}

/* ── Tool panels ─────────────────────────────────────────── */
.tt-panels {
    position: relative;
}

.tt-panel {
    display: none;
}

.tt-panel.active {
    display: block;
}

.tt-tool-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}

.tt-tool-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px 16px;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    position: relative;
    overflow: hidden;
}

.tt-tool-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: #38bdf8;
    opacity: 0;
    transition: opacity 0.15s;
}

.tt-tool-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(56, 189, 248, .18);
    border-color: #38bdf8;
}

.tt-tool-card:hover::before {
    opacity: 1;
}

.tt-tool-card:active {
    transform: translateY(0);
}

.tt-tool-icon {
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 1px;
}

.tt-tool-name {
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 2px;
    line-height: 1.3;
}

.tt-tool-desc {
    font-size: 11.5px;
    color: #94a3b8;
    line-height: 1.4;
}

/* ── Find & Replace panel ────────────────────────────────── */
.tt-fr {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    max-width: 602px;   /* was 560px — 20px padding + 1px border */
}

.tt-fr-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
}

.tt-fr-row label {
    width: 58px;
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    flex-shrink: 0;
}

.tt-fr-row input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 14px;
    font-family: sans-serif;
    background: #fff;
    color: #1e293b;
    transition: border-color 0.15s;
}

.tt-fr-row input:focus {
    outline: none;
    border-color: #38bdf8;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, .1);
}

.tt-fr-opts {
    display: flex;
    gap: 20px;
    margin-bottom: 14px;
}

.tt-fr-opts label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #64748b;
    cursor: pointer;
}

.tt-fr-btns {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.tt-fr-result {
    font-size: 13px;
    color: #64748b;
    min-height: 1.4em;
}

/* ── Output panel ────────────────────────────────────────── */
.tt-output-section {
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 14px;
    padding: 20px;
}

.tt-output-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 10px;
}

.tt-output-header .tt-section-title {
    margin-bottom: 0;
    border: none;
    padding: 0;
}

.tt-output-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.tt-output-textarea {
    width: 100%;
    min-height: 190px;   /* was 160px — 14px padding + 1px border */
    padding: 14px;
    font-family: 'Cascadia Code', 'Consolas', monospace;
    font-size: 13px;
    line-height: 1.7;
    background: #fff;
    color: #1e293b;
    border: 1px solid #bae6fd;
    border-radius: 10px;
    resize: vertical;
}

.tt-output-textarea:focus {
    outline: none;
}

/* ── Toast notifications ─────────────────────────────────── */
.tt-toasts {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 18px;
    background: #1e293b;
    color: #fff;
    border-left: 4px solid #38bdf8;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .2);
    font-size: 13px;
    font-family: sans-serif;
    font-weight: 500;
    pointer-events: auto;
    max-width: 356px;   /* was 320px — 18px side padding */
    animation: ttToastIn 0.22s ease forwards;
}

.toast.success {
    border-left-color: #22c55e;
}

.toast.error {
    border-left-color: #ef4444;
}

.toast.hiding {
    animation: ttToastOut 0.22s ease forwards;
}

@keyframes ttToastIn {
    from {
        opacity: 0;
        transform: translateX(60px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes ttToastOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(60px);
    }
}

/* ── Modal ───────────────────────────────────────────────── */
.tt-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 8888;
    background: rgba(0, 0, 0, .45);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: ttFadeIn 0.18s ease;
}

.tt-modal-backdrop[hidden] {
    display: none;
}

.tt-modal-box {
    background: #fff;
    border-radius: 16px;
    max-width: 520px;
    width: 100%;
    box-shadow: 0 16px 48px rgba(0, 0, 0, .15);
    animation: ttSlideUp 0.22s ease;
    overflow: hidden;
}

.tt-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid #e2e8f0;
}

.tt-modal-title {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
}

.tt-modal-close {
    width: 34px;   /* was 32px — 1px border */
    height: 34px;   /* was 32px — 1px border */
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    color: #64748b;
    transition: all 0.15s;
    font-size: 14px;
}

.tt-modal-close:hover {
    background: #fee2e2;
    color: #dc2626;
    border-color: #fca5a5;
}

.tt-modal-body {
    padding: 20px 22px;
    font-size: 14px;
    color: #64748b;
    line-height: 1.7;
}

@keyframes ttFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes ttSlideUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Responsive ─────────────────────────────────────────────*/
@media (max-width: 900px) {

    /* Hide sidebar on tablet/mobile – match Utiloot's pattern */
    .pagebox {
        flex-direction: column;
        padding: 16px;
    }

    .sidebar-ads {
        display: none;
    }

    /* The 100px indent is a desktop gesture. Below this width the column
       is the whole screen, so an indent that size is a tenth of the page
       spent on nothing — and it is the difference between the tool
       fitting and not fitting at 320px. The tool takes the full column
       instead, which is also the single-column order the spec asks for. */
    .tnd {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    .tt-stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .tt-tool-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .container {
        margin: 25px auto;
        padding: 30px 40px;
    }

    .container h1 {
        font-size: 32px;
    }

    .container p {
        font-size: 15px;
    }

    .tools {
        margin: 30px auto;
        padding-top: 30px;
        padding-bottom: 15px;
    }

    .tools h2 {
        font-size: 24px;
        margin-bottom: 20px;
    }

    .pdflist, .image_tools, .text_tools {
        gap: 16px;
    }

    .icon {
        width: 150px;
        height: 170px;
    }

    .icon img {
        height: 65px;
    }

    .icon .text-content h1,
    .icon .text-content h3 {
        font-size: 13px;
    }

    .icon .text-content p {
        font-size: 10px;
    }

    .footer-content {
        flex-direction: column;
        gap: 15px;
        padding: 20px 35px;
    }

    .footer-section h3 {
        font-size: 18px;
        margin-bottom: 4px;
    }

    .footer-section p {
        max-width: 100%;
        font-size: 11px;
    }

    .footer-links {
        gap: 15px;
        justify-content: center;
    }

    .footer-links a {
        font-size: 12px;
    }

    .footer-bottom {
        padding: 10px 35px;
    }

    .footer-bottom p {
        font-size: 11px;
    }
}

@media (max-width: 560px) {
    .tt-page-title {
        font-size: 22px;
    }

    .tt-toolbar {
        gap: 4px;
    }

    .tt-btn {
        padding: 6px 10px;
        font-size: 12px;
    }

    .tt-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .tt-stat-val {
        font-size: 18px;
    }

    .tt-tool-grid {
        grid-template-columns: 1fr;
    }

    .tt-tabs {
        gap: 4px;
    }

    .tt-tab {
        padding: 5px 10px;
        font-size: 11.5px;
    }

    .tt-toasts {
        bottom: 12px;
        right: 12px;
        left: 12px;
    }

    .toast {
        max-width: 100%;
    }

    .container {
        margin: 20px auto;
        padding: 20px 25px;
    }

    .container h1 {
        font-size: 24px;
    }

    .container p {
        font-size: 13px;
    }

    .tools {
        margin: 20px auto;
        padding-top: 20px;
        padding-bottom: 10px;
    }

    .tools h2 {
        font-size: 20px;
        margin-bottom: 15px;
    }

    .pdflist, .image_tools, .text_tools {
        gap: 12px;
        padding: 0 8px;
    }

    .icon {
        width: 140px;
        height: 165px;
        padding: 12px;
    }

    .icon img {
        height: 60px;
    }

    .icon .text-content h1,
    .icon .text-content h3 {
        font-size: 12px;
        margin-bottom: 3px;
    }

    .icon .text-content p {
        font-size: 9px;
    }

    .ad-728 {
        width: calc(100% - 40px);
        margin: 0 20px;
    }

    .footer-content {
        flex-direction: column;
        gap: 12px;
        padding: 18px 20px;
    }

    .footer-section h3 {
        font-size: 16px;
        margin-bottom: 3px;
    }

    .footer-section p {
        font-size: 10px;
    }

    .footer-links {
        gap: 15px;
        justify-content: center;
    }

    .footer-links a {
        font-size: 11px;
    }

    .footer-bottom {
        padding: 8px 20px;
    }

    .footer-bottom p {
        font-size: 10px;
    }
}

#addMoreBtn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    padding: 10px 20px;
    background: #ffffff;
    color: #0369a1;
    font-size: 14px;
    font-weight: 600;
    font-family: sans-serif;
    border: 2px dashed #38bdf8;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, transform 0.15s, box-shadow 0.2s;
}

#addMoreBtn:hover {
    background: #e0f2fe;
    border-color: #0ea5e9;
    border-style: solid;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.2);
}

#addMoreBtn:active {
    transform: translateY(0);
    box-shadow: none;
}

#addMoreBtn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* ── Download buttons wrapper ── */
#downloadChoice {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
}

/* ── Shared base for both download buttons ── */
#downloadSingleBtn,
#downloadSeparateBtn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 22px;
    font-size: 14px;
    font-weight: 600;
    font-family: sans-serif;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}

/* ── Single Excel button — green (matches your footer/downloadBtn) ── */
#downloadSingleBtn {
    background: #22c55e;
    color: #ffffff;
    box-shadow: 0 2px 10px rgba(34, 197, 94, 0.3);
}

#downloadSingleBtn:hover {
    background: #16a34a;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(34, 197, 94, 0.35);
}

#downloadSingleBtn:active {
    transform: translateY(0);
    box-shadow: none;
}

/* ── Separate ZIP button — blue (secondary action) ── */
#downloadSeparateBtn {
    background: #38bdf8;
    color: #ffffff;
    box-shadow: 0 2px 10px rgba(56, 189, 248, 0.3);
}

#downloadSeparateBtn:hover {
    background: #0ea5e9;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(56, 189, 248, 0.35);
}

#downloadSeparateBtn:active {
    transform: translateY(0);
    box-shadow: none;
}

/* ── Disabled state (during conversion) ── */
#downloadSingleBtn:disabled,
#downloadSeparateBtn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ── Responsive: stack on small screens ── */
@media (max-width: 480px) {
    #downloadChoice {
        flex-direction: column;
    }

    #downloadSingleBtn,
    #downloadSeparateBtn {
        width: 100%;
        justify-content: center;
    }
}

/* ── Download choice wrapper ── */
#downloadChoice {
    display: none;
    /* JS sets this to flex when files are selected */
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
}

/* ── Shared base ── */
#downloadSingleBtn,
#downloadSeparateBtn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 22px;
    font-size: 14px;
    font-weight: 600;
    font-family: sans-serif;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}

/* ── Green — primary action, matches your footer + #downloadBtn ── */
#downloadSingleBtn {
    background: #22c55e;
    color: #ffffff;
    box-shadow: 0 2px 10px rgba(34, 197, 94, 0.3);
}

#downloadSingleBtn:hover {
    background: #16a34a;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(34, 197, 94, 0.35);
}

#downloadSingleBtn:active {
    transform: translateY(0);
    box-shadow: none;
}

/* ── Blue — secondary action, matches your #mergeBtn ── */
#downloadSeparateBtn {
    background: #38bdf8;
    color: #ffffff;
    box-shadow: 0 2px 10px rgba(56, 189, 248, 0.3);
}

#downloadSeparateBtn:hover {
    background: #0ea5e9;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(56, 189, 248, 0.35);
}

#downloadSeparateBtn:active {
    transform: translateY(0);
    box-shadow: none;
}

/* ── Disabled during conversion ── */
#downloadSingleBtn:disabled,
#downloadSeparateBtn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ── Stack vertically on mobile ── */
@media (max-width: 480px) {
    #downloadChoice {
        flex-direction: column;
    }

    #downloadSingleBtn,
    #downloadSeparateBtn {
        width: 100%;
        justify-content: center;
    }
}

#downloadBtn {
    background: #22c55e;
    color: #ffffff;
    padding: 11px 32px;
    font-size: 15px;
    font-weight: 600;
    font-family: sans-serif;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto;           /* prevents full-width stretch */
    min-width: 224px;   /* was 160px — 32px side padding */      /* consistent size */
    max-width: fit-content;
    box-shadow: 0 2px 10px rgba(34, 197, 94, 0.3);
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
    white-space: nowrap;
    margin-top: 10px;
    margin-bottom: 10px;
    height: 82px;   /* was 60px — 11px padding */
    
}

#downloadBtn:hover {
    background: #16a34a;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(34, 197, 94, 0.35);
}

#downloadBtn:active {
    transform: translateY(0);
    box-shadow: none;
}

.btn-group {
    display: flex;
    gap: 10px;
    margin-top: 15px;
    margin-bottom: 15px;

    align-items: center;
    flex-wrap: wrap;
    width: fit-content;
}

/* =========================================================
   UTILOOOT IMAGE COMPRESSOR
   ========================================================= */


/* ---------------------------------------------------------
   Upload Box
   --------------------------------------------------------- */

.tnd .upload-box {
    width: 100%;
    max-width: 720px;
    min-height: 220px;

    margin: 25px auto;

    border: 2px dashed #cfcfcf;
    border-radius: 12px;

    background: #fafafa;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;

    cursor: pointer;

    box-sizing: border-box;

    transition:
        border-color 0.25s ease,
        background 0.25s ease,
        transform 0.25s ease;
}


.tnd .upload-box:hover {
    border-color: orangered;

    background: #fff8f4;

    transform: translateY(-2px);
}


/* Drag-and-drop feedback. `drag-active` was already being toggled by
   scripts/image-to-pdf.js but had no rule anywhere, so dragging a file
   over the box gave no feedback at all. Defined here so every tool that
   supports dropping a file shows the same thing. */
.upload-box.drag-active,
.tnd .upload-box.drag-active {
    border-color: orangered;
    border-style: solid;
    background: #fff1e2;
    transform: translateY(-2px);
}


.tnd .upload-box i {
    font-size: 45px;

    color: orangered;

    margin-bottom: 12px;
}


.tnd .upload-box p {
    margin: 5px 0;

    font-size: 18px;

    font-weight: 600;

    color: #222;
}


.tnd .upload-box small {
    color: #777;

    font-size: 13px;
}


/* ---------------------------------------------------------
   Uploaded Image Preview
   --------------------------------------------------------- */

#imagePreviewContainer {
    width: 100%;
    max-width: 720px;

    margin: 15px auto;

    text-align: center;

    box-sizing: border-box;
}


#imagePreviewContainer img {
    display: block;

    max-width: 100%;

    max-height: 280px;

    width: auto;
    height: auto;

    margin: 0 auto;

    object-fit: contain;

    border-radius: 8px;
}


/* ---------------------------------------------------------
   File Information
   --------------------------------------------------------- */

#imageFileInfo {
    width: 100%;
    max-width: 720px;

    margin: 8px auto 20px;

    text-align: center;

    color: #666;

    font-size: 14px;
}


/* ---------------------------------------------------------
   Format Selector
   --------------------------------------------------------- */

.format-selector {
    width: 100%;
    max-width: 720px;

    margin: 20px auto;

    padding: 15px 18px;

    border: 1px solid #e3e3e3;

    border-radius: 10px;

    background: #fafafa;

    box-sizing: border-box;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;
}


.format-selector label {
    font-size: 15px;

    font-weight: 700;

    color: #333;
}


#outputFormat {
    min-width: 156px;   /* was 130px — 12px side padding + 1px border */

    padding: 9px 12px;

    border: 1px solid #d5d5d5;

    border-radius: 7px;

    background: white;

    color: #333;

    font-size: 14px;

    cursor: pointer;

    outline: none;
}


#outputFormat:focus {
    border-color: orangered;
}


/* ---------------------------------------------------------
   Compression Settings
   --------------------------------------------------------- */

.compression-settings {
    width: 100%;
    max-width: 720px;

    margin: 20px auto;

    padding: 18px 20px;

    border: 1px solid #e3e3e3;

    border-radius: 10px;

    background: #fafafa;

    box-sizing: border-box;
}


.compression-settings label {
    display: block;

    margin-bottom: 15px;

    font-size: 15px;

    font-weight: 700;

    color: #333;

    text-align: left;
}


/* ---------------------------------------------------------
   Quality Slider
   --------------------------------------------------------- */

.quality-control {
    display: flex;

    align-items: center;

    gap: 12px;

    width: 100%;
}


.quality-control span {
    font-size: 12px;

    color: #777;

    white-space: nowrap;
}


#compressionQuality {
    flex: 1;

    width: 100%;

    height: 6px;

    appearance: none;

    -webkit-appearance: none;

    background: #ddd;

    border-radius: 10px;

    outline: none;

    cursor: pointer;
}


/* Chrome / Edge / Safari */

#compressionQuality::-webkit-slider-thumb {
    appearance: none;

    -webkit-appearance: none;

    width: 18px;
    height: 18px;

    border-radius: 50%;

    background: orangered;

    cursor: pointer;

    border: 2px solid white;

    box-shadow:
        0 1px 4px rgba(0, 0, 0, 0.25);
}


/* Firefox */

#compressionQuality::-moz-range-thumb {
    width: 18px;
    height: 18px;

    border-radius: 50%;

    background: orangered;

    cursor: pointer;

    border: 2px solid white;
}


/* Quality value */

.quality-value {
    margin-top: 12px;

    text-align: center;

    font-size: 14px;

    color: #555;
}


.quality-value strong {
    color: orangered;
}


/* ---------------------------------------------------------
   Action Row
   --------------------------------------------------------- */

.tnd .action-row {
    width: 100%;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 10px;

    margin: 20px auto;
}


/* ---------------------------------------------------------
   Compress Button
   --------------------------------------------------------- */

#compressImageBtn {
    padding: 10px 24px;

    border: none;

    border-radius: 20px;

    background: #0887bd;

    color: white;

    font-size: 15px;

    font-weight: 600;

    cursor: pointer;

    transition:
        background 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


#compressImageBtn:hover {
    background: #06749f;

    transform: translateY(-1px);

    box-shadow:
        0 4px 12px rgba(8, 135, 189, 0.25);
}


#compressImageBtn i {
    margin-right: 7px;
}


#compressImageBtn:disabled {
    opacity: 0.55;

    cursor: not-allowed;

    transform: none;

    box-shadow: none;
}


/* ---------------------------------------------------------
   Loader
   --------------------------------------------------------- */

#imageLoader {
    margin: 20px auto;

    text-align: center;

    color: orangered;

    font-size: 14px;
}


#imageLoadingText {
    margin: 0;

    color: #555;
}


/* ---------------------------------------------------------
   Status
   --------------------------------------------------------- */

#imageStatus {
    width: 100%;
    max-width: 720px;

    margin: 15px auto;

    text-align: center;

    font-size: 14px;

    line-height: 1.5;
}


/* ---------------------------------------------------------
   Result Area
   --------------------------------------------------------- */

#imageResult {
    width: 100%;
    max-width: 900px;

    margin: 35px auto 20px;

    padding: 25px;

    box-sizing: border-box;

    border-top: 1px solid #ddd;
}


#imageResult h3 {
    margin: 0 0 25px;

    text-align: center;

    font-size: 21px;

    color: #333;
}


/* ---------------------------------------------------------
   Before / After Comparison
   --------------------------------------------------------- */

.image-comparison {
    width: 100%;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 20px;
}


/* ---------------------------------------------------------
   Preview Cards
   --------------------------------------------------------- */

.image-preview-card {
    min-width: 0;

    padding: 15px;

    border: 1px solid #e2e2e2;

    border-radius: 10px;

    background: #fafafa;

    box-sizing: border-box;
}


.image-preview-card h4 {
    margin: 0 0 12px;

    text-align: center;

    font-size: 15px;

    color: #444;
}


/* ---------------------------------------------------------
   Image Preview
   --------------------------------------------------------- */

.image-preview {
    width: 100%;

    height: 280px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    border-radius: 7px;

    background:
        linear-gradient(
            45deg,
            #eeeeee 25%,
            transparent 25%
        ),
        linear-gradient(
            -45deg,
            #eeeeee 25%,
            transparent 25%
        ),
        linear-gradient(
            45deg,
            transparent 75%,
            #eeeeee 75%
        ),
        linear-gradient(
            -45deg,
            transparent 75%,
            #eeeeee 75%
        );

    background-size: 20px 20px;

    background-position:
        0 0,
        0 10px,
        10px -10px,
        -10px 0;
}


/* ---------------------------------------------------------
   Preview Images
   --------------------------------------------------------- */

.image-preview img {
    max-width: 100%;

    max-height: 100%;

    width: auto;

    height: auto;

    object-fit: contain;

    display: block;
}


/* ---------------------------------------------------------
   Image Size Information
   --------------------------------------------------------- */

.image-preview-card p {
    margin: 12px 0 0;

    text-align: center;

    font-size: 13px;

    color: #666;
}


/* ---------------------------------------------------------
   Compression Summary
   --------------------------------------------------------- */

.compression-summary {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 15px;

    margin: 25px 0;
}


.compression-summary > div {
    padding: 15px;

    border: 1px solid #e5e5e5;

    border-radius: 8px;

    background: white;

    text-align: center;
}


.compression-summary span {
    display: block;

    margin-bottom: 7px;

    font-size: 12px;

    color: #777;
}


.compression-summary strong {
    display: block;

    font-size: 17px;

    color: #333;
}


/* Highlight saved percentage */

#compressionPercentage {
    color: orangered;
}


/* ---------------------------------------------------------
   Download Button
   --------------------------------------------------------- */

#downloadCompressed {
    display: block;

    margin: 10px auto 0;

    padding: 10px 25px;

    border: none;

    border-radius: 20px;

    background: rgb(138, 255, 138);

    color: #222;

    font-size: 15px;

    font-weight: 600;

    cursor: pointer;

    transition:
        background 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


#downloadCompressed:hover {
    background: rgb(110, 240, 110);

    transform: translateY(-1px);

    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.12);
}


#downloadCompressed i {
    margin-right: 7px;
}


/* ---------------------------------------------------------
   Responsive - Tablet
   --------------------------------------------------------- */

@media (max-width: 768px) {

    .tnd .upload-box {
        min-height: 190px;
    }


    .image-comparison {
        grid-template-columns: 1fr;
    }


    .image-preview {
        height: 260px;
    }


    .compression-summary {
        grid-template-columns: 1fr;
    }


    .format-selector {
        align-items: stretch;

        flex-direction: column;
    }


    #outputFormat {
        width: 100%;
    }

}


/* ---------------------------------------------------------
   Responsive - Mobile
   --------------------------------------------------------- */

@media (max-width: 480px) {

    .tnd .upload-box {
        min-height: 170px;

        padding: 20px;

        box-sizing: border-box;
    }


    .tnd .upload-box i {
        font-size: 38px;
    }


    .tnd .upload-box p {
        font-size: 16px;
    }


    .quality-control {
        gap: 7px;
    }


    #imageResult {
        padding: 15px;
    }


    .image-preview {
        height: 220px;
    }


    #compressImageBtn,
    #downloadCompressed {
        width: 100%;
    }
}

/* ═══════════════════════════════════════════════════════════════
   SHARED: upload/processing progress bars + restyled download
   button, used across the PDF tools (Word, Merge, Split, Compress,
   Excel). Matches the Image Tools' green pill download button.
   ═══════════════════════════════════════════════════════════════ */

.utl-progress-wrap {
    display: none;
    flex-direction: column;
    gap: 14px;
    margin-top: 16px;
    max-width: 480px;
}

.utl-progress-block { display: none; flex-direction: column; gap: 6px; }

.utl-progress-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
}

.utl-progress-row .utl-progress-pct {
    color: #64748b;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.utl-progress-track {
    width: 100%;
    height: 10px;
    background: #e2e8f0;
    border-radius: 999px;
    overflow: hidden;
}

.utl-progress-fill {
    height: 100%;
    width: 0%;
    border-radius: 999px;
    transition: width .25s ease;
}

.utl-progress-fill.utl-upload {
    background: linear-gradient(90deg, #38bdf8, #0ea5e9);
}

.utl-progress-fill.utl-processing {
    background: linear-gradient(90deg, #fb923c, #f97316, #fb923c);
    background-size: 200% 100%;
    animation: utl-progress-shimmer 1.4s linear infinite;
}

@keyframes utl-progress-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Re-styled download button — matches Image Tools' download button */
.utl-download-btn {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 16px;
    padding: 12px 26px;
    background: linear-gradient(135deg, #8aff8a, #48d948) !important;
    color: #111 !important;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    border: none !important;
    border-radius: 10px !important;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 2px 10px rgba(72, 217, 72, 0.28);
    transition: transform .18s ease, box-shadow .18s ease;
}

.utl-download-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(72, 217, 72, 0.35);
}

.utl-download-btn:active { transform: translateY(0); }

.utl-download-btn:disabled {
    opacity: .6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Process/trigger button — Merge, Split, Compress, Convert, etc.
   Same polish level as .utl-download-btn (gradient, lift, shadow),
   in the site's blue accent so it reads as "start", not "success". */
.utl-process-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 26px;
    background: linear-gradient(135deg, #38bdf8, #0ea5e9) !important;
    color: #fff !important;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    border: none !important;
    border-radius: 10px !important;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 2px 10px rgba(14, 165, 233, 0.3);
    transition: transform .18s ease, box-shadow .18s ease, background .2s ease;
}

.utl-process-btn:hover {
    background: linear-gradient(135deg, #0ea5e9, #0284c7) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(14, 165, 233, 0.4);
}

.utl-process-btn:active { transform: translateY(0); }

.utl-process-btn:disabled {
    opacity: .6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Secondary variant — a second, less-prominent choice sitting next
   to a primary .utl-process-btn (e.g. "merge & download" next to
   "download separated"). */
.utl-process-btn.utl-process-secondary {
    background: linear-gradient(135deg, #64748b, #475569) !important;
    box-shadow: 0 2px 10px rgba(71, 85, 105, 0.3);
}

.utl-process-btn.utl-process-secondary:hover {
    background: linear-gradient(135deg, #475569, #334155) !important;
    box-shadow: 0 8px 18px rgba(71, 85, 105, 0.4);
}

/* Upload-error banner — a file rejected before it's added to the page
   (too large, wrong type) previously only showed as small text wherever
   a status paragraph happened to sit, which is easy to miss or entirely
   off-screen when nothing else on the page has changed yet to reveal
   it. This is deliberately loud and gets scrolled into view by
   utlShowUploadError() in scripts/upload-progress.js, so a rejection is
   never silent. */
.utl-upload-error {
    display: none;
    align-items: flex-start;
    gap: 10px;
    margin-top: 14px;
    padding: 12px 16px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-left: 4px solid #ef4444;
    border-radius: 8px;
    color: #b91c1c;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    max-width: 594px;   /* was 560px — 16px side padding + 1px border */
}

.utl-upload-error i {
    flex-shrink: 0;
    font-size: 16px;
    margin-top: 1px;
}

/* ═══════════════════════════════════════════════════════════════
   PRIVACY POLICY & CONTACT PAGE STYLING
   ═══════════════════════════════════════════════════════════════ */

.legal-body, .contact-body {
    padding: 20px;
}

.tt-page-header {
    margin: 24px 0 20px !important;
}

.tt-page-title {
    font-size: 32px;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 10px !important;
}

.tt-page-sub {
    font-size: 16px;
    color: #64748b;
    line-height: 1.6;
    margin: 0;
}

.legal-updated {
    color: #94a3b8;
    font-size: 13px;
    margin-bottom: 30px !important;
}

.tt-section {
    margin-bottom: 28px !important;
}

.tt-section-title {
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 12px !important;
    padding-bottom: 8px;
    border-bottom: 2px solid #e2e8f0 !important;
}

.legal-body p, .legal-body li, .contact-body p {
    color: #475569;
    line-height: 1.7;
    font-size: 14.5px;
    margin-bottom: 12px;
}

.legal-body ul {
    padding-left: 24px;
    margin-bottom: 16px;
}

.legal-body li {
    margin-bottom: 10px;
}

.legal-body strong {
    color: #1e293b;
    font-weight: 600;
}

.legal-note {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 1px solid #bae6fd;
    border-left: 4px solid #38bdf8;
    border-radius: 10px;
    padding: 14px 16px;
    font-size: 13.5px;
    color: #0369a1;
    margin: 20px 0;
}

.legal-note i {
    margin-right: 8px;
}

/* Contact page specific */
.contact-card {
    background: linear-gradient(135deg, #fff 0%, #f8fafc 100%);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    margin-top: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.contact-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    border-color: #cbd5e1;
}

.contact-icon {
    background: linear-gradient(135deg, #fff1e2 0%, #ffe8d9 100%);
    color: #ff6600;
}

.contact-email {
    color: #1e293b;
    font-weight: 700;
}

.contact-btn-primary {
    background: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 100%);
}

.contact-hint {
    color: #94a3b8;
    font-size: 12.5px;
    margin-top: 12px;
}

/* The second .backtohome block that used to sit here has been folded
   into the single definition next to the page-layout rules, so the
   button is described in one place instead of two that overrode each
   other from opposite ends of the file. */

/* Placed at the end of the file on purpose. These rules override the
   desktop .dropdown / .nav-item declarations, which appear much later
   in this file than the navbar block does. At equal specificity the
   last rule wins, so while this lived up beside the other nav CSS the
   desktop .dropdown rule quietly beat it and the mobile panel kept the
   desktop's 251px width and absolute positioning inside the drawer. */
@media (max-width: 900px) {
    .nav {
        padding: 0 16px;
        gap: 12px;
    }

    .nav-toggle {
        display: block;
    }

    /* The drawer. Fixed below the bar and scrollable in its own right,
       so a long menu never pushes the page around and never needs the
       page behind it to scroll. */
    .nav-menu {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;

        position: fixed;
        top: 76px;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 99;

        /* Longhands, not the shorthand: Chrome dropped padding-top and
           padding-bottom entirely when a calc(env(...)) term appeared in
           the `padding` shorthand, leaving the drawer with no top or
           bottom padding at all. The safe-area insets keep the first and
           last rows clear of a notch or a home indicator in landscape. */
        padding-top: 12px;
        padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
        padding-left: calc(16px + env(safe-area-inset-left, 0px));
        padding-right: calc(16px + env(safe-area-inset-right, 0px));

        background: #fff;
        box-shadow: 0 18px 40px rgba(42, 20, 0, 0.18);
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;

        /* Closed: off to the side and inert. `visibility` is what takes
           it out of the focus order — a panel that is merely translated
           is still tabbable, which strands keyboard users in a menu
           they cannot see. */
        transform: translateX(100%);
        visibility: hidden;
        transition: transform 0.28s ease, visibility 0.28s;
    }

    .nav-menu.is-open {
        transform: translateX(0);
        visibility: visible;
    }

    .atr {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 2px;
        font-size: 16px;
    }

    .nav-item {
        border-bottom: 1px solid #f1f5f9;
    }

    /* Full-width rows with the chevron pushed to the trailing edge —
       the standard "section, tap to expand" affordance. */
    .atr > .nav-item > a {
        justify-content: space-between;
        padding: 14px 12px;
        border-radius: 10px;
        min-height: 48px;
        color: #2a1400;
    }

    .atr > .nav-item > a:hover,
    .atr > .nav-item:hover > a {
        background: #fff1e2;
        color: #c2410c;
    }

    /* Accordion, not a floating panel. This is the rule that stops the
       menu hanging off the side of the screen: in the drawer the
       dropdown is an ordinary in-flow block at full width, with none of
       the absolute positioning or fixed 251px width it has on desktop. */
    .dropdown {
        position: static;
        transform: none;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        box-shadow: none;
        border-radius: 0;
        opacity: 1;
        visibility: visible;
        transition: none;
        max-height: 0;
        overflow: hidden;

        /* No padding while collapsed. `max-height: 0` cannot squeeze
           padding away, so a closed section with padding still occupies
           its padding — leaving a stack of 8px slivers between the menu
           rows. The padding belongs to the open state. */
        padding: 0;
    }

    /* One rule decides whether a section is open, and it is the state
       the button reports. There is no hover variant to keep in step,
       because the desktop hover rules are now fenced inside their own
       min-width query instead of being overridden here — hover cannot
       open, move or half-open anything in the drawer. */
    .nav-item > a[aria-expanded="true"] + .dropdown {
        max-height: none;
        overflow: visible;
        padding: 0 0 8px 8px;
    }

    /* The chevron follows the same single source of truth as the panel.
       No hover counterpart is needed: on a touch screen hover sticks
       after a tap, and the desktop rotate rule is fenced into its own
       min-width query so it cannot reach the drawer. */
    .nav-item > a[aria-expanded="true"] i {
        transform: rotate(90deg);
    }

    .dropdown a {
        min-height: 44px;
        font-size: 15px;
        padding: 10px 12px;
    }

    .navbtn {
        width: 100%;
        justify-content: stretch;
        flex-direction: column;
        gap: 10px;
        margin-top: 18px;
    }

    .navbtn button {
        width: 100%;
        min-height: 48px;
        font-size: 15px;
    }

    /* While the drawer is open the page behind it must not scroll, or
       the user swipes the menu and the article moves. Set on <html> as
       well because iOS Safari ignores it on body alone. */
    html.nav-open,
    body.nav-open {
        overflow: hidden;
    }
}
@media (max-width: 480px) {
    .logo {
        height: 42px;
    }
}

/* ==================================================================
   MOBILE COMPONENTS

   Everything below is measured, not guessed: each rule exists because
   the mobile audit found a specific control under the 44px touch
   minimum, a field small enough to trigger iOS zoom-on-focus, or a box
   wider than the column it sits in. Placed last so it wins against the
   desktop declarations it overrides, which are spread through the file.
   ================================================================== */

@media (max-width: 900px) {

    /* --- Touch targets ------------------------------------------
       A control has to be big enough to hit with a thumb. These are
       the site's interactive primitives; the tools compose their UI
       out of them, so setting the floor here covers the controls that
       only appear after a file is chosen too — file rows, download
       buttons, per-page actions — without having to restate it in
       every tool's stylesheet. */
    button,
    .tt-btn,
    .tdl-btn,
    .inv-btn,
    .contact-btn,
    .utl-btn,
    [role="button"],
    a.backtohome,
    .backtohome a {
        min-height: 44px;
    }

    /* Icon-only controls need width as well — a 32px round × button is
       the classic miss-target. */
    .tt-modal-close,
    .inv-icon-btn,
    .o2p-file-remove,
    .pw-del,
    .tdl-clear {
        min-width: 44px;
        min-height: 44px;
    }

    /* Compact on a phone: sized to its label rather than spanning the
       column, and a little tighter than the desktop pill, so it reads as
       a quiet way back rather than a primary action competing with the
       tool below it. It keeps the 44px height from the touch rule above,
       so it is still comfortably tappable at this smaller size. */
    .backtohome {
        max-width: 100%;
        margin: 14px 0;
    }

    .backtohome a {
        padding: 9px 16px;
        font-size: 13px;
        gap: 8px;
    }

    .backtohome a i {
        font-size: 12px;
    }

    /* Hover does not exist on touch, and a hover shadow that sticks
       after a tap makes the button look permanently pressed. */
    /* Hover does not exist on touch, and a hover shadow that sticks
       after a tap makes the button look permanently pressed. */
    .backtohome a:hover {
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    }

    /* A <summary> is the whole disclosure control, so it carries the
       same minimum as a button. */
    summary {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    /* --- Fields ---------------------------------------------------
       16px is not a style choice. Below it, iOS Safari zooms the page
       when the field takes focus, and it does not zoom back out — the
       user is left in a magnified, sideways-scrolling layout that
       looks exactly like the broken mobile site this work set out to
       fix. Checkboxes, radios, ranges and colour swatches are excluded
       because they render no text and resizing them only distorts the
       controls. */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="hidden"]),
    select,
    textarea {
        font-size: 16px;
        max-width: 100%;
    }

    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="hidden"]),
    select {
        min-height: 44px;
    }

    /* --- Toolbars -------------------------------------------------
       Rows of actions wrap onto more lines rather than forcing the
       page sideways. The scroll, where one is needed, belongs to the
       toolbar and not to the document. */
    .tt-toolbar,
    .action-row,
    .contact-actions,
    .tdl-card-actions,
    .compress-options {
        flex-wrap: wrap;
    }

    /* --- Long strings ---------------------------------------------
       Filenames, URLs and pasted tokens are single unbreakable words
       to the layout engine. These are the places the site displays
       one. */
    .pw-file-name,
    .file-item,
    .o2p-file-name,
    .tdl-card-title,
    .utl-upload-error,
    .contact-email {
        overflow-wrap: anywhere;
        word-break: break-word;
        min-width: 0;
    }

    /* --- Notifications --------------------------------------------
       A fixed-width toast is wider than a small phone. */
    .toast,
    .tt-toasts {
        max-width: calc(100vw - 32px);
    }

    /* --- Tables ----------------------------------------------------
       Genuinely wide tables scroll inside their own box. The rule is
       on the table's wrapper so the page itself never scrolls. */
    .table-wrapper,
    .tt-table-wrap,
    .inv-doc-table-wrap {
        overflow-x: auto;
        max-width: 100%;
        -webkit-overflow-scrolling: touch;
    }

    /* --- Media and canvases ---------------------------------------
       Display size is capped to the column; the drawing buffer, which
       is what gets exported, is untouched — a smaller screen must not
       mean a smaller output file. */
    canvas,
    .image-preview img,
    .tdl-card-preview img,
    #p2i-thumbs canvas {
        max-width: 100%;
        height: auto;
    }
}

/* The invoice preview is a fixed 780px page — it is a picture of a
   sheet of paper, so it cannot reflow like the rest of the UI. Below
   the width where it fits, it scrolls inside its own frame instead of
   dragging the document sideways. */
@media (max-width: 900px) {
    .inv-preview-wrap,
    #invPreviewDoc {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 900px) {

    /* The logo is a link home — the site's most-used escape hatch — so
       it gets the same 44px floor as any other control. The image keeps
       its own height; the extra is hit area around it. */
    .nav > a:first-child {
        display: flex;
        align-items: center;
        min-height: 44px;
    }

    /* A native range is ~16px tall, which is hard to grab accurately.
       The added height is hit area; the track and knob stay centred in
       it at their own size. */
    input[type="range"] {
        height: 44px;
    }

    /* A 16px checkbox is below any reasonable touch minimum, but a 44px
       one looks broken. The usual resolution is to make the row the
       target: the box grows a little, and the label wrapping it becomes
       a full-height tap area that toggles the same control. */
    input[type="checkbox"],
    input[type="radio"] {
        width: 20px;
        height: 20px;
    }

    label:has(> input[type="checkbox"]),
    label:has(> input[type="radio"]) {
        display: flex;
        align-items: center;
        gap: 8px;
        min-height: 44px;
    }
}

@media (max-width: 900px) {

    /* Footer links are navigation, not prose, so they carry the same
       44px floor as the rest of the site's controls. Stacked with room
       between them rather than sitting shoulder to shoulder, which is
       what made them a row of 18px-tall targets. */
    .footer-links {
        flex-direction: column;
        align-items: center;
        gap: 4px;
    }

    .footer-links a {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        width: 100%;
    }

    /* Class selector, because main.css's bare `textarea` rule loses to
       .tt-textarea on specificity no matter where it sits in the file.
       Same 16px iOS zoom threshold as every other field. */
    .tt-textarea,
    .tt-output-textarea {
        font-size: 16px;
    }
}

/* .tnd centres its children, and `align-items: center` means they are
   sized to their content rather than stretched to the column. That is
   fine for a heading, but a file row containing an unbroken 90-character
   filename asks for its full natural width and gets it — the row grew to
   873px inside a 375px screen and took the page sideways with it. The
   cap costs nothing to anything already narrower than the column, and it
   is what lets the filename's own ellipsis rule take over. */
.tnd > * {
    max-width: 100%;
}

/* Drawer backdrop. Never shown on desktop, where there is no drawer. */
.nav-backdrop {
    display: none;
}

@media (max-width: 900px) {

    .nav-backdrop {
        display: block;
        position: fixed;
        top: 76px;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 98;            /* under the panel (99), over the page */
        background: rgba(20, 10, 0, 0.42);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.28s ease, visibility 0.28s;
    }

    .nav-backdrop.is-open {
        opacity: 1;
        visibility: visible;
    }
}

/* Between roughly a large phone and the desktop breakpoint there is
   enough width that covering the entire screen with a menu reads as
   heavy-handed. The drawer becomes a right-hand panel instead, which is
   also why the backdrop above matters: from here up, a real part of the
   page stays visible beside it. */
@media (min-width: 601px) and (max-width: 900px) {
    .nav-menu {
        left: auto;
        width: 420px;
        max-width: 86vw;
    }
}

/* ═══════════════════════════════════════════════════════════
   PDF Tools mega-menu

   Appended rather than woven into the .dropdown rules above, so the
   Image, Other and Calculators panels keep exactly the behaviour they
   have always had. Everything here is gated behind .dd-mega, which
   only the PDF panel carries.

   The problem it solves: forty links in one 251px column made a panel
   around 1,700px tall — more than twice the height of the screen it
   opened on. The bottom half was unreachable, and a floating menu you
   have to scroll is a menu whose last items may as well not exist.
   Three balanced columns bring the same forty links down to roughly
   600px, which fits every screen the site is used on.
   ═══════════════════════════════════════════════════════════ */

@media (min-width: 901px) {

    /* Anchored to the viewport, not to the "PDF Tools" link.
       The panel is far wider than its trigger, and `left: 50%` of a
       130px nav item would hang most of it off the left edge of the
       screen. `position: fixed` re-anchors it to the viewport so
       `left: 50%` centres the panel itself. No ancestor is transformed
       — the sticky header carries no transform — so `fixed` really is
       viewport-relative here. */
    .dropdown.dd-mega {
        position: fixed;
        /* Flush with the bottom of the 76px sticky header rather than
           floating 12px below it. A gap the pointer has to cross is a
           gap the menu closes in — the narrow panels get away with it
           because they hang directly under their own trigger, but this
           one is 1,180px wide and the pointer travels much further. Its
           own top padding gives the same visual breathing room, and the
           panel can now be scrolled at any viewport height without
           clipping a hover bridge. */
        top: 76px;
        left: 50%;
        width: min(1180px, calc(100vw - 32px));
        min-width: 0;
        max-width: none;
        padding: 20px 18px 18px;
        display: block;
    }

    /* Columns, not a 3 x 2 grid. The groups are 9, 4, 9, 5, 7 and 6
       links long; in a grid every cell in a row is as tall as the
       tallest one in it, so the four-link group would sit above a
       five-row hole. Multi-column packs them end to end and balances
       the three columns by height, and break-inside keeps each group
       whole rather than splitting one across a gap.

       This sits on an inner wrapper rather than on the panel itself,
       and that separation is load-bearing. A multi-column box that is
       ALSO height-constrained does not scroll: it fills columns 1-3 to
       that height and then lays the remainder out in columns 4, 5, 6...
       to the right of the box, where the panel's `overflow-x: hidden`
       clips them out of existence. With the cap on the panel and the
       columns on this wrapper, the column layout is never constrained,
       so all forty links are always laid out — and the panel scrolls
       normally if the window is too short to show them at once. */
    .dd-mega-inner {
        column-count: 3;
        column-gap: 22px;
    }

    .dd-mega .dd-group {
        -webkit-column-break-inside: avoid;
        page-break-inside: avoid;
        break-inside: avoid;
        padding-bottom: 10px;
    }

    /* The open state has to out-rank `.nav-item:hover .dropdown`
       (0,3,0) from earlier in the file, hence the extra class.

       Six groups come to roughly 630px, so on any ordinary screen this
       cap is never reached and nothing scrolls. It exists so that a
       genuinely short viewport — a laptop in landscape at 600px — gets
       a scrollable panel rather than links clipped off the bottom of
       one, which is the failure this redesign is fixing. */
    .nav-item:hover .dropdown.dd-mega {
        transform: translate(-50%, 0);
        max-height: calc(100vh - 92px);
        overflow-y: auto;
        overflow-x: hidden;
    }

    .dd-mega .dd-group-title {
        margin: 0 0 4px;
        padding: 6px 10px 7px;
        font-size: 11.5px;
        font-weight: 700;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: #9a3412;
        border-bottom: 1px solid #ffe6d0;
    }

    /* Denser than the single-column panels — forty rows have to fit on
       one screen — but still a 34px target, well above the 24px the
       pointer needs. */
    .dd-mega a {
        gap: 9px;
        padding: 6px 10px;
        font-size: 13.5px;
        border-radius: 9px;
        line-height: 1.25;
    }

    .dd-mega a img {
        height: 26px;
        width: 26px;
        padding: 3px;
        border-radius: 7px;
    }

    /* The 16px indent the narrow panels use shifts a three-column grid
       noticeably as the pointer travels down it. A background and a
       colour change read just as clearly and hold the row still. */
    .dd-mega a:hover {
        padding-left: 10px;
    }

    /* Three columns all the way down to the 901px drawer breakpoint.
       At that width the panel is 869px wide, which still leaves each
       column about 263px — comfortably more than the longest name
       ("Image/PDF to Text (OCR)") needs on one line. Dropping to two
       columns there would make the panel half as wide but nearly 900px
       tall, which is the problem this menu was redesigned to avoid. */
}

/* In the drawer the mega-menu is not columns at all — it is the same
   accordion every other section is, with the group titles left in as
   headings. `column-count: auto` has to be stated because the desktop
   rule above would otherwise still split the list into columns inside
   a phone-width panel. */
@media (max-width: 900px) {
    .dropdown.dd-mega {
        display: block;
    }

    .dd-mega-inner {
        column-count: auto;
    }

    .dd-mega .dd-group + .dd-group {
        margin-top: 6px;
    }

    .dd-mega .dd-group-title {
        margin: 0;
        padding: 10px 12px 6px;
        font-size: 11.5px;
        font-weight: 700;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: #9a3412;
    }
}

/* ═══════════════════════════════════════════════════════════
   SEO content blocks

   The How to Use, Features, FAQ and Related Tools sections that sit
   below each tool. Deliberately quiet: the tool is the reason for the
   page, and this is supporting reading matter underneath it.

   Appended and scoped to .seo-*, so nothing above changes.
   ═══════════════════════════════════════════════════════════ */

.seo-wrap {
    max-width: 860px;
    margin: 10px auto 60px;
    padding: 0 20px;
    box-sizing: border-box;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: #334155;
    line-height: 1.65;
}

.seo-block {
    margin: 34px 0 0;
}

.seo-wrap h2 {
    font-size: 21px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e2e8f0;
}

.seo-wrap h3 {
    font-size: 16px;
    font-weight: 650;
    color: #1e293b;
    margin: 0 0 4px;
}

.seo-wrap p {
    margin: 0 0 14px;
    font-size: 15.5px;
}

.seo-steps,
.seo-list {
    margin: 0;
    padding-left: 22px;
    font-size: 15.5px;
}

.seo-steps li,
.seo-list li {
    margin-bottom: 8px;
}

.seo-faq {
    margin-bottom: 18px;
}

/* A note, not a banner: it should be readable without shouting. */
.seo-note {
    margin: 26px 0 0;
    padding: 12px 16px;
    border-left: 3px solid #cbd5e1;
    background: #f8fafc;
    font-size: 14.5px;
    color: #475569;
}

.seo-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.seo-links a {
    display: inline-block;
    padding: 8px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #fff;
    color: #1d4ed8;
    font-size: 14.5px;
    text-decoration: none;
}

.seo-links a:hover,
.seo-links a:focus-visible {
    border-color: #93c5fd;
    background: #eff6ff;
    text-decoration: underline;
}

@media (max-width: 640px) {
    .seo-wrap { padding: 0 16px; margin-bottom: 40px; }
    .seo-wrap h2 { font-size: 19px; }
    .seo-wrap p,
    .seo-steps,
    .seo-list { font-size: 15px; }
}

/* The image tools label their result panel with a heading. It used to
   be an h3 sitting directly under the h1, which skipped a level in the
   outline, so it is now an h2 carrying the same look. */
#imageResult h2 {
    margin: 0 0 25px;
    text-align: center;
    font-size: 21px;
    color: #333;
}

/* Before/after labels inside the result cards, promoted from h4 so the
   heading outline runs h1, h2, h3 without a gap. Same look as before. */
.image-preview-card h3 {
    margin: 0 0 12px;
    text-align: center;
    font-size: 15px;
    color: #444;
}