/*
 * Shared tool-page heading.
 *
 * This file is intentionally loaded after the individual tool styles.  Tool
 * pages may own their working area, but their identity/header area should not
 * change from one tool to the next.
 */
:root {
    --tool-heading-ink: #0f1934;
    --tool-heading-copy: #53627d;
    --tool-heading-purple: #5937f5;
    --tool-heading-border: #cbbfff;
    --tool-heading-surface: #fbfaff;
    --tool-content-caption: .76rem;
    --tool-content-control: .8rem;
    --tool-content-body: .84rem;
    --tool-content-title: .9rem;
    --tool-content-gap: 14px;
}

/* Once an image has been accepted, the compact file row owns replacement and
   removal. Explicitly honor hidden across legacy dropzone display rules. */
:is(.crop-image-dropzone, .blur-dropzone, .image-dropzone, .image-pdf-upload)[hidden] {
    display: none !important;
}

.image-pdf-files > header > span {
    display: flex;
    align-items: center;
    gap: 7px;
}

.image-pdf-files > header #imagePdfAdd {
    border-color: #d9d0ff;
    color: #5936f5;
}

.tool-detail-page {
    padding-top: 4px !important;
}

.tool-detail-breadcrumb {
    margin: 0 !important;
}

@media (min-width: 1051px) {
    .tool-detail-sidebar {
        position: relative;
        padding-top: 30px;
    }

    .tool-detail-sidebar > .tool-detail-breadcrumb {
        position: absolute;
        top: 0;
        left: 0;
        width: max-content;
        max-width: 100%;
    }

    .tool-detail-sidebar > .tool-detail-breadcrumb > :is(span:last-of-type, strong) {
        display: none;
    }
}

/* A single readable content scale for legacy and current tool interfaces. */
.tool-detail-main {
    font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
}

.tool-detail-main :where(button, input, select, textarea, summary) {
    font-family: inherit !important;
    font-size: var(--tool-content-control) !important;
}

.tool-detail-main :where(p, li, dt, dd, label, small) {
    font-family: inherit !important;
    font-size: var(--tool-content-caption) !important;
    line-height: 1.5 !important;
}

.tool-detail-main :where(h2, h3) {
    font-family: "Space Grotesk", "Plus Jakarta Sans", system-ui, sans-serif !important;
    font-size: var(--tool-content-title) !important;
    line-height: 1.35 !important;
}

.tool-detail-main :where([class$="-workspace"], [class$="-layout"], [class$="-grid"]) {
    column-gap: var(--tool-content-gap);
}

/* Custom tools must not inherit the old generic framed workspace. */
.tool-detail-workspace:has(> :is(
    .text-image-app,
    .word-counter-app,
    .random-word-app,
    .palette-app,
    .gradient-app,
    .picker-app,
    .color-converter-app,
    .replace-text-app,
    .unit-app,
    .barcode-generator,
    .qr-generator,
    .base64-modern,
    .image-base64-modern,
    .hash-modern,
    .hash-verifier-modern,
    .uuid-modern,
    .uuid-verifier-modern,
    .jwt-encoder-modern,
    .jwt-decoder-modern,
    .password-generator-modern,
    .url-codec-modern,
    .crop-image-modern,
    .resize-image-modern,
    .compress-image-modern,
    .convert-image-modern,
    .remove-bg-modern,
    .blur-image-app,
    .passport-photo-app,
    .image-pdf-modern,
    .pdf-image-modern,
    .timestamp-modern,
    .timezone-modern,
    .age-modern,
    .case-modern,
    .loan-modern,
    .discount-modern,
    .scientific-modern,
    .merge-pdf-shell,
    .split-pdf-shell,
    .pdf-word-shell,
    .word-pdf-shell,
    .ai-sql-modern
)) {
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Illustration-led tools keep their useful diagram, but use the same header
   surface, spacing, and type scale as the compact tool headers. */
:is(
    .base64-hero,
    .image-base64-hero,
    .hash-hero,
    .uuid-hero,
    .jwt-hero,
    .jwt-decoder-hero
) {
    min-height: 104px !important;
    margin-top: 0 !important;
    margin-bottom: 18px !important;
    padding: 14px 18px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background:
        radial-gradient(circle at 85% 24%, rgba(92, 54, 242, .075), transparent 34%),
        #fff !important;
    box-shadow: none !important;
}

:is(
    .base64-hero-copy,
    .image-base64-hero-copy,
    .hash-hero-copy,
    .uuid-hero-copy,
    .jwt-hero > div:first-child,
    .jwt-decoder-hero > div:first-child
) h1 {
    margin: 0 !important;
    color: var(--tool-heading-ink) !important;
    font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
    font-size: clamp(1.55rem, 2vw, 1.82rem) !important;
    font-weight: 750 !important;
    line-height: 1.14 !important;
    letter-spacing: -.035em !important;
}

:is(
    .base64-hero-copy,
    .image-base64-hero-copy,
    .hash-hero-copy,
    .uuid-hero-copy,
    .jwt-hero > div:first-child,
    .jwt-decoder-hero > div:first-child
) p {
    max-width: 760px;
    margin: 6px 0 0 !important;
    color: var(--tool-heading-copy) !important;
    font-size: .9rem !important;
    font-weight: 450 !important;
    line-height: 1.48 !important;
}

/* The shared heading rendered by the tool-page wrapper gives every current
   and newly added tool the same identity treatment. */
.tool-detail-heading {
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 15px !important;
    min-height: 88px !important;
    margin: 0 0 12px !important;
    padding: 10px 14px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background:
        radial-gradient(circle at 85% 24%, rgba(92, 54, 242, .075), transparent 34%),
        #fff !important;
    box-shadow: none !important;
}

.tool-detail-heading .tool-detail-icon {
    box-sizing: border-box !important;
    display: grid !important;
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    place-items: center !important;
    margin: 0 !important;
    padding: 8px !important;
    border: 1px solid var(--tool-heading-border) !important;
    border-radius: 13px !important;
    color: var(--tool-heading-purple) !important;
    background: var(--tool-heading-surface) !important;
    box-shadow: none !important;
}

.tool-detail-heading .tool-detail-icon svg {
    width: 30px !important;
    height: 30px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.75 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

.tool-detail-heading h1 {
    margin: 0 !important;
    color: var(--tool-heading-ink) !important;
    font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
    font-size: clamp(1.42rem, 1.8vw, 1.65rem) !important;
    font-weight: 750 !important;
    line-height: 1.14 !important;
    letter-spacing: -.035em !important;
}

.tool-detail-heading p {
    max-width: 760px;
    margin: 4px 0 0 !important;
    color: var(--tool-heading-copy) !important;
    font-size: .82rem !important;
    font-weight: 450 !important;
    line-height: 1.48 !important;
}
/* Headers whose icon, copy and action are direct children. */
:is(
    .text-image-hero,
    .wc-hero,
    .random-word-hero,
    .palette-hero,
    .gradient-hero,
    .picker-hero,
    .converter-hero,
    .replace-text-hero,
    .unit-hero,
    .barcode-hero
) {
    display: grid !important;
    grid-template-columns: 64px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 18px !important;
    min-height: 104px !important;
    margin: 0 0 18px !important;
    padding: 14px 18px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background:
        radial-gradient(circle at 85% 24%, rgba(92, 54, 242, .075), transparent 34%),
        #fff !important;
    box-shadow: none !important;
}

/* Headers with an inner title wrapper and a separate page action. */
:is(.case-hero, .loan-hero, .discount-hero, .scientific-hero, .qr-hero) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 18px !important;
    min-height: 104px !important;
    margin: 0 0 18px !important;
    padding: 14px 18px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background:
        radial-gradient(circle at 85% 24%, rgba(92, 54, 242, .075), transparent 34%),
        #fff !important;
    box-shadow: none !important;
}

/* Security/identifier tools keep their useful information card, but their
   identity block follows the same 64px icon and copy rhythm. */
:is(.password-hero, .uuid-verify-hero, .hash-verifier-hero) {
    min-height: 104px !important;
    margin: 0 0 18px !important;
    padding: 14px 18px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background:
        radial-gradient(circle at 85% 24%, rgba(92, 54, 242, .075), transparent 34%),
        #fff !important;
    box-shadow: none !important;
}

:is(.password-hero, .uuid-verify-hero, .hash-verifier-hero) > div:first-child {
    display: grid !important;
    grid-template-columns: 64px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 18px !important;
    min-width: 0;
}

:is(.password-hero, .uuid-verify-hero, .hash-verifier-hero) > div:first-child > span {
    box-sizing: border-box !important;
    display: grid !important;
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    place-items: center !important;
    margin: 0 !important;
    padding: 10px !important;
    border: 1px solid var(--tool-heading-border) !important;
    border-radius: 13px !important;
    color: var(--tool-heading-purple) !important;
    background: var(--tool-heading-surface) !important;
    box-shadow: none !important;
}

:is(.password-hero, .uuid-verify-hero, .hash-verifier-hero) > div:first-child > span svg {
    width: 38px !important;
    height: 38px !important;
}

:is(.password-hero, .uuid-verify-hero, .hash-verifier-hero) h1 {
    margin: 0 !important;
    color: var(--tool-heading-ink) !important;
    font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
    font-size: clamp(1.55rem, 2vw, 1.82rem) !important;
    font-weight: 750 !important;
    line-height: 1.14 !important;
    letter-spacing: -.035em !important;
}

:is(.password-hero, .uuid-verify-hero, .hash-verifier-hero) > div:first-child p {
    margin: 6px 0 0 !important;
    color: var(--tool-heading-copy) !important;
    font-size: .9rem !important;
    line-height: 1.48 !important;
}

:is(.case-title, .loan-title, .discount-title, .scientific-title, .qr-title) {
    display: grid !important;
    grid-template-columns: 64px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 18px !important;
    min-width: 0;
}

/* Pages that keep their instructions below/beside the working area.  Only the
   actual title receives the common identity treatment. */
:is(
    .crop-image-title,
    .image-pdf-title,
    .pdf-image-title,
    .age-title,
    .timestamp-title,
    .timezone-title,
    .url-codec-title,
    .ai-sql-title,
    .merge-pdf-title,
    .split-pdf-title,
    .pdf-word-title
) {
    display: grid !important;
    grid-template-columns: 64px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 18px !important;
    min-width: 0;
    min-height: 92px;
    padding: 10px 0;
}

/* The larger hero shells share the same calm background without changing the
   page-specific position of their instruction card. */
:is(
    .crop-image-hero,
    .image-pdf-hero,
    .pdf-image-hero,
    .age-hero,
    .timestamp-hero,
    .timezone-hero,
    .url-codec-hero,
    .ai-sql-hero
) {
    margin-top: 0 !important;
    margin-bottom: 18px !important;
    padding-top: 6px !important;
    padding-bottom: 10px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background:
        radial-gradient(circle at 85% 24%, rgba(92, 54, 242, .075), transparent 34%),
        #fff !important;
    box-shadow: none !important;
}

/* Standard icon tile. */
:is(
    .text-image-hero,
    .wc-hero,
    .random-word-hero,
    .palette-hero,
    .gradient-hero,
    .picker-hero,
    .converter-hero,
    .replace-text-hero,
    .unit-hero,
    .barcode-hero
) > span,
:is(
    .case-title,
    .loan-title,
    .discount-title,
    .scientific-title,
    .qr-title,
    .crop-image-title,
    .image-pdf-title,
    .pdf-image-title,
    .age-title,
    .timestamp-title,
    .timezone-title,
    .url-codec-title,
    .ai-sql-title,
    .merge-pdf-title,
    .split-pdf-title,
    .pdf-word-title
) > span {
    box-sizing: border-box !important;
    display: grid !important;
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    place-items: center !important;
    margin: 0 !important;
    padding: 10px !important;
    overflow: hidden;
    border: 1px solid var(--tool-heading-border) !important;
    border-radius: 13px !important;
    color: var(--tool-heading-purple) !important;
    background: var(--tool-heading-surface) !important;
    box-shadow: none !important;
}

:is(
    .text-image-hero,
    .wc-hero,
    .random-word-hero,
    .palette-hero,
    .gradient-hero,
    .picker-hero,
    .converter-hero,
    .replace-text-hero,
    .unit-hero,
    .barcode-hero,
    .case-title,
    .loan-title,
    .discount-title,
    .scientific-title,
    .qr-title,
    .crop-image-title,
    .image-pdf-title,
    .pdf-image-title,
    .age-title,
    .timestamp-title,
    .timezone-title,
    .url-codec-title,
    .ai-sql-title,
    .merge-pdf-title,
    .split-pdf-title,
    .pdf-word-title
) > span svg {
    width: 38px !important;
    height: 38px !important;
    max-width: 100%;
    max-height: 100%;
}

/* One typography scale for all custom tool identities. */
:is(
    .text-image-hero,
    .wc-hero,
    .random-word-hero,
    .palette-hero,
    .gradient-hero,
    .picker-hero,
    .converter-hero,
    .replace-text-hero,
    .unit-hero,
    .barcode-hero,
    .case-title,
    .loan-title,
    .discount-title,
    .scientific-title,
    .qr-title,
    .crop-image-title,
    .image-pdf-title,
    .pdf-image-title,
    .age-title,
    .timestamp-title,
    .timezone-title,
    .url-codec-title,
    .ai-sql-title,
    .merge-pdf-title,
    .split-pdf-title,
    .pdf-word-title
) h1 {
    margin: 0 !important;
    color: var(--tool-heading-ink) !important;
    font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
    font-size: clamp(1.55rem, 2vw, 1.82rem) !important;
    font-weight: 750 !important;
    line-height: 1.14 !important;
    letter-spacing: -.035em !important;
}

:is(
    .text-image-hero,
    .wc-hero,
    .random-word-hero,
    .palette-hero,
    .gradient-hero,
    .picker-hero,
    .converter-hero,
    .replace-text-hero,
    .unit-hero,
    .barcode-hero,
    .case-title,
    .loan-title,
    .discount-title,
    .scientific-title,
    .qr-title,
    .crop-image-title,
    .image-pdf-title,
    .pdf-image-title,
    .age-title,
    .timestamp-title,
    .timezone-title,
    .url-codec-title,
    .ai-sql-title,
    .merge-pdf-title,
    .split-pdf-title,
    .pdf-word-title
) p {
    margin: 6px 0 0 !important;
    color: var(--tool-heading-copy) !important;
    font-size: .9rem !important;
    font-weight: 450 !important;
    line-height: 1.48 !important;
}

:is(
    .text-image-hero,
    .wc-hero,
    .random-word-hero,
    .crop-image-title,
    .image-pdf-title,
    .pdf-image-title,
    .age-title,
    .timestamp-title,
    .timezone-title,
    .merge-pdf-title,
    .split-pdf-title,
    .pdf-word-title
) small {
    display: block;
    margin-top: 3px !important;
    color: #65738d !important;
    font-size: .8rem !important;
    line-height: 1.42 !important;
}

/* Header actions use the same size, icon rhythm and contrast. */
:is(
    .text-image-hero,
    .wc-hero-actions,
    .random-word-hero,
    .palette-hero,
    .gradient-hero,
    .picker-hero,
    .converter-hero,
    .replace-text-hero,
    .unit-hero,
    .case-hero,
    .loan-hero,
    .discount-hero,
    .scientific-hero
) button {
    min-height: 44px !important;
    padding: 0 17px !important;
    border: 1px solid #d7dfeb !important;
    border-radius: 9px !important;
    color: #15213c !important;
    background: #fff !important;
    font-size: .84rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    box-shadow: none !important;
}

:is(
    .text-image-hero,
    .wc-hero-actions,
    .random-word-hero,
    .palette-hero,
    .gradient-hero,
    .picker-hero,
    .converter-hero,
    .replace-text-hero,
    .unit-hero,
    .case-hero,
    .loan-hero,
    .discount-hero,
    .scientific-hero
) button svg {
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
}

@media (max-width: 760px) {
    :is(
        .base64-hero,
        .image-base64-hero,
        .hash-hero,
        .uuid-hero,
        .jwt-hero,
        .jwt-decoder-hero
    ) {
        min-height: 0 !important;
        padding: 13px 10px 15px !important;
    }

    :is(
        .base64-hero-copy,
        .image-base64-hero-copy,
        .hash-hero-copy,
        .uuid-hero-copy,
        .jwt-hero > div:first-child,
        .jwt-decoder-hero > div:first-child
    ) h1 {
        font-size: 1.42rem !important;
    }

    .tool-detail-heading {
        grid-template-columns: 56px minmax(0, 1fr) !important;
        gap: 13px !important;
        min-height: 0 !important;
        padding: 13px 10px 15px !important;
    }

    .tool-detail-heading .tool-detail-icon {
        width: 56px !important;
        height: 56px !important;
        min-width: 56px !important;
        padding: 9px !important;
    }

    .tool-detail-heading h1 {
        font-size: 1.42rem !important;
    }

    :is(
        .text-image-hero,
        .wc-hero,
        .random-word-hero,
        .palette-hero,
        .gradient-hero,
        .picker-hero,
        .converter-hero,
        .replace-text-hero,
        .unit-hero,
        .barcode-hero
    ) {
        grid-template-columns: 56px minmax(0, 1fr) !important;
        gap: 13px !important;
        min-height: 0 !important;
        padding: 13px 10px 15px !important;
    }

    :is(.case-hero, .loan-hero, .discount-hero, .scientific-hero, .qr-hero) {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 12px !important;
        min-height: 0 !important;
        padding: 13px 10px 15px !important;
    }

    :is(.password-hero, .uuid-verify-hero, .hash-verifier-hero) {
        padding: 13px 10px 15px !important;
    }

    :is(.password-hero, .uuid-verify-hero, .hash-verifier-hero) > div:first-child {
        grid-template-columns: 56px minmax(0, 1fr) !important;
        gap: 13px !important;
    }

    :is(.password-hero, .uuid-verify-hero, .hash-verifier-hero) > div:first-child > span {
        width: 56px !important;
        height: 56px !important;
        min-width: 56px !important;
        padding: 9px !important;
    }

    :is(.password-hero, .uuid-verify-hero, .hash-verifier-hero) h1 {
        font-size: 1.42rem !important;
    }

    :is(
        .case-title,
        .loan-title,
        .discount-title,
        .scientific-title,
        .qr-title,
        .crop-image-title,
        .image-pdf-title,
        .pdf-image-title,
        .age-title,
        .timestamp-title,
        .timezone-title,
        .url-codec-title,
        .ai-sql-title,
        .merge-pdf-title,
        .split-pdf-title,
        .pdf-word-title
    ) {
        grid-template-columns: 56px minmax(0, 1fr) !important;
        gap: 13px !important;
        min-height: 78px;
    }

    :is(
        .text-image-hero,
        .wc-hero,
        .random-word-hero,
        .palette-hero,
        .gradient-hero,
        .picker-hero,
        .converter-hero,
        .replace-text-hero,
        .unit-hero,
        .barcode-hero
    ) > span,
    :is(
        .case-title,
        .loan-title,
        .discount-title,
        .scientific-title,
        .qr-title,
        .crop-image-title,
        .image-pdf-title,
        .pdf-image-title,
        .age-title,
        .timestamp-title,
        .timezone-title,
        .url-codec-title,
        .ai-sql-title,
        .merge-pdf-title,
        .split-pdf-title,
        .pdf-word-title
    ) > span {
        width: 56px !important;
        height: 56px !important;
        min-width: 56px !important;
        padding: 9px !important;
    }

    :is(
        .text-image-hero,
        .wc-hero,
        .random-word-hero,
        .palette-hero,
        .gradient-hero,
        .picker-hero,
        .converter-hero,
        .replace-text-hero,
        .unit-hero,
        .barcode-hero,
        .case-title,
        .loan-title,
        .discount-title,
        .scientific-title,
        .qr-title,
        .crop-image-title,
        .image-pdf-title,
        .pdf-image-title,
        .age-title,
        .timestamp-title,
        .timezone-title,
        .url-codec-title,
        .ai-sql-title,
        .merge-pdf-title,
        .split-pdf-title,
        .pdf-word-title
    ) h1 {
        font-size: 1.42rem !important;
    }

    .text-image-hero > button,
    .random-word-hero > button,
    .palette-hero > button,
    .gradient-hero > button,
    .picker-hero > button,
    .converter-hero > button,
    .replace-text-hero > button,
    .unit-hero > button,
    .wc-hero > .wc-hero-actions {
        grid-column: 1 / -1 !important;
        justify-self: start !important;
    }
}

/* Keep these visibility rules last so page-specific hero declarations cannot
   reintroduce a second title after the shared heading. */
:is(
    .barcode-hero, .qr-hero, .base64-hero, .image-base64-hero,
    .hash-hero, .uuid-hero, .jwt-hero, .jwt-decoder-hero,
    .merge-pdf-title, .split-pdf-title, .pdf-word-title
) {
    display: none !important;
}

:is(
    .text-image-hero, .wc-hero, .random-word-hero, .palette-hero,
    .gradient-hero, .picker-hero, .converter-hero, .replace-text-hero,
    .unit-hero, .case-hero, .loan-hero, .discount-hero, .scientific-hero
) {
    display: flex !important;
    justify-content: flex-end !important;
    min-height: 0 !important;
    margin: -6px 0 14px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

:is(
    .text-image-hero, .wc-hero, .random-word-hero, .palette-hero,
    .gradient-hero, .picker-hero, .converter-hero, .replace-text-hero,
    .unit-hero
) > span,
:is(
    .text-image-hero, .random-word-hero, .palette-hero, .gradient-hero,
    .picker-hero, .converter-hero, .replace-text-hero, .unit-hero
) > div,
.wc-hero > :not(.wc-hero-actions),
:is(.case-hero, .loan-hero, .discount-hero, .scientific-hero) > div:first-child {
    display: none !important;
}

:is(
    .crop-image-hero, .image-pdf-hero, .pdf-image-hero, .age-hero,
    .timestamp-hero, .timezone-hero, .url-codec-hero, .ai-sql-hero,
    .password-hero, .uuid-verify-hero, .hash-verifier-hero
) {
    display: flex !important;
    justify-content: flex-end !important;
    min-height: 0 !important;
    margin: -6px 0 14px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

:is(
    .crop-image-hero, .image-pdf-hero, .pdf-image-hero, .age-hero,
    .timestamp-hero, .timezone-hero, .url-codec-hero, .ai-sql-hero,
    .password-hero, .uuid-verify-hero, .hash-verifier-hero
) > div:first-child {
    display: none !important;
}

:is(
    .crop-image-hero, .image-pdf-hero, .pdf-image-hero, .age-hero,
    .timestamp-hero, .timezone-hero, .url-codec-hero, .ai-sql-hero,
    .password-hero, .uuid-verify-hero, .hash-verifier-hero
) > :is(article, aside) {
    width: min(100%, 430px) !important;
}

/* Image-tool guidance and information form one Barcode-style card row after
   the complete workspace. The partial wrappers are flattened so all four
   existing cards participate in the same responsive grid. */
:is(.crop-image-modern, .image-pdf-modern) {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 16px !important;
}

.crop-image-modern > :is(.crop-image-hero, .crop-image-page-grid),
.crop-image-modern .crop-image-info,
.image-pdf-modern > :is(.image-pdf-hero, .image-pdf-layout),
.image-pdf-modern .image-pdf-aside {
    display: contents !important;
}

.crop-image-modern > .crop-image-hero > .crop-image-how,
.crop-image-modern .crop-image-info > article,
.image-pdf-modern > .image-pdf-hero > .image-pdf-how,
.image-pdf-modern .image-pdf-aside > article {
    min-width: 0 !important;
    width: auto !important;
    height: 100% !important;
    margin: 0 !important;
    order: 3 !important;
}

@media (max-width: 900px) {
    :is(.crop-image-modern, .image-pdf-modern) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 620px) {
    :is(.crop-image-modern, .image-pdf-modern) {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* Date & Time tools use the same information hierarchy as Barcode and Image
   tools: the complete interactive workspace comes first, followed by one
   balanced row containing guidance, privacy, examples, and supporting facts. */
:is(.age-modern, .timestamp-modern, .timezone-modern) {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 16px !important;
}

:is(.age-modern, .timestamp-modern, .timezone-modern) > :is(
    .age-hero,
    .timestamp-hero,
    .timezone-hero,
    .age-layout,
    .timestamp-layout,
    .timezone-layout
),
:is(.age-aside, .timestamp-aside, .timezone-aside) {
    display: contents !important;
}

:is(.age-layout, .timestamp-layout, .timezone-layout) > :is(main, section) {
    grid-column: 1 / -1 !important;
    order: 1 !important;
}

:is(.age-how, .timestamp-how, .timezone-how),
:is(.age-aside, .timestamp-aside, .timezone-aside) > article {
    min-width: 0 !important;
    width: auto !important;
    height: 100% !important;
    margin: 0 !important;
    order: 2 !important;
}

/* Time Zone Converter: two compact setup rows on wide screens. */
.timezone-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 12px 14px !important;
}

.timezone-card > .timezone-fields,
.timezone-card > :is(.timezone-result, .timezone-tip) {
    grid-column: 1 / -1 !important;
}

.timezone-card > .timezone-zone {
    padding-top: 0 !important;
}

.timezone-card > .timezone-swap {
    align-self: center !important;
    margin: 29px auto 0 !important;
}

.timezone-card > :is(.timezone-result, .timezone-tip) {
    margin-top: 0 !important;
}

/* Age Calculator: compact paired setup cards instead of one stretched form. */
.age-card {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px 14px !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}

.age-card > .age-section {
    min-width: 0 !important;
    padding: 14px !important;
    border: 1px solid #dce4ef !important;
    border-radius: 10px !important;
    background: #fff !important;
}

.age-birth-fields,
.age-compare-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

.age-birth-fields > .age-field-group,
.age-compare-fields > .age-time-toggle {
    grid-column: 1 / -1 !important;
}

.age-card > :is(.age-actions, .age-error, .age-results, .age-about) {
    grid-column: 1 / -1 !important;
}

.age-card > .age-actions {
    display: flex !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 0 !important;
}

.age-card > .age-actions button {
    flex: 0 1 220px !important;
    min-height: 40px !important;
}

.age-card > .age-error {
    min-height: 0 !important;
    margin: 0 !important;
}

.age-card > .age-error:empty {
    display: none !important;
}

.age-card > .age-results {
    padding: 14px !important;
    border: 1px solid #dce4ef !important;
    border-radius: 10px !important;
    background: #fff !important;
}

.age-card > .age-about {
    margin: 0 !important;
}

/* Timestamp Converter: two focused conversion cards with compact controls. */
.timestamp-panel {
    padding: 14px !important;
    background: #f9faff !important;
}

.timestamp-conversion-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: 14px !important;
}

.timestamp-conversion-card {
    min-width: 0 !important;
    padding: 14px !important;
    border: 1px solid #dce4ef !important;
    border-radius: 10px !important;
    background: #fff !important;
}

.timestamp-conversion-card .timestamp-panel-heading {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 7px !important;
}

.timestamp-conversion-card .timestamp-input-row {
    grid-template-columns: minmax(0, 1fr) 132px !important;
}

.timestamp-conversion-card .timestamp-input-row > input {
    grid-column: 1 / -1 !important;
}

.timestamp-conversion-card .timestamp-error {
    min-height: 0 !important;
    margin: 7px 0 0 !important;
}

.timestamp-conversion-card .timestamp-error:empty {
    display: none !important;
}

.timestamp-conversion-card .timestamp-result {
    margin-top: 12px !important;
}

.timestamp-conversion-card .timestamp-date-section {
    padding: 0 !important;
}

.timestamp-conversion-card .timestamp-formats {
    padding-top: 16px !important;
}

.timestamp-conversion-card .timestamp-formats > div {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.timestamp-conversion-card .timestamp-formats article {
    padding: 10px 7px !important;
    gap: 6px !important;
}

@media (max-width: 1000px) {
    .timestamp-conversion-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

@media (max-width: 900px) {
    .age-card {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .age-card > :is(.age-section, .age-actions, .age-error, .age-results, .age-about) {
        grid-column: 1 !important;
    }
}

@media (max-width: 900px) {
    .timezone-card {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .timezone-card > :is(.timezone-fields, .timezone-zone, .timezone-swap, .timezone-result, .timezone-tip) {
        grid-column: 1 !important;
    }

    .timezone-card > .timezone-swap {
        margin: 0 auto !important;
    }
}

@media (max-width: 900px) {
    :is(.age-modern, .timestamp-modern, .timezone-modern) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 620px) {
    :is(.age-modern, .timestamp-modern, .timezone-modern) {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* Legacy Developer/AI heroes placed a single explanatory card beside a title
   that is now supplied by the shared page heading. Flatten those redundant
   hero wrappers and place the useful explanation after the complete tool. */
:is(
    .url-codec-modern,
    .hash-verifier-modern,
    .uuid-verifier-modern,
    .password-generator-modern,
    .ai-sql-modern
) {
    display: flex !important;
    flex-direction: column !important;
}

:is(
    .url-codec-hero,
    .hash-verifier-hero,
    .uuid-verify-hero,
    .password-hero,
    .ai-sql-hero
) {
    display: contents !important;
}

:is(
    .url-codec-hero,
    .hash-verifier-hero,
    .uuid-verify-hero,
    .password-hero,
    .ai-sql-hero
) > :is(aside, article) {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 16px 0 0 !important;
    order: 99 !important;
}

/* Page-level Clear and Reset controls belong inside the shared heading. The
   original hero wrappers become layout-neutral so they no longer leave an
   empty action row above the workspace. */
.tool-detail-main {
    position: relative;
}

.tool-detail-workspace :is(
    .text-image-hero,
    .wc-hero,
    .random-word-hero,
    .palette-hero,
    .gradient-hero,
    .picker-hero,
    .converter-hero,
    .replace-text-hero,
    .unit-hero,
    .case-hero,
    .loan-hero,
    .discount-hero,
    .scientific-hero
) {
    display: contents !important;
}

.tool-detail-main:has(:is(
    #textImageClear,
    #randomWordClear,
    #randomNumberClear,
    #randomColorClear,
    #paletteClear,
    #gradientClear,
    #pickerClear,
    #converterReset,
    #replaceTextClear,
    #unitClear,
    #caseReset,
    #loanReset,
    #discountReset,
    #scientificReset
)) > .tool-detail-heading {
    padding-right: 165px !important;
}

:is(
    #textImageClear,
    #randomWordClear,
    #randomNumberClear,
    #randomColorClear,
    #paletteClear,
    #gradientClear,
    #pickerClear,
    #converterReset,
    #replaceTextClear,
    #unitClear,
    #caseReset,
    #loanReset,
    #discountReset,
    #scientificReset
) {
    position: absolute !important;
    z-index: 2 !important;
    top: 22px !important;
    right: 14px !important;
    min-height: 42px !important;
    margin: 0 !important;
}

.tool-detail-main:has(.wc-hero-actions) > .tool-detail-heading {
    padding-right: 330px !important;
}

.wc-hero-actions {
    position: absolute !important;
    z-index: 2 !important;
    top: 22px !important;
    right: 14px !important;
    margin: 0 !important;
}

@media (max-width: 760px) {
    .tool-detail-main:has(:is(
        #textImageClear,
        #randomWordClear,
        #randomNumberClear,
        #randomColorClear,
        #paletteClear,
        #gradientClear,
        #pickerClear,
        #converterReset,
        #replaceTextClear,
        #unitClear,
        #caseReset,
        #loanReset,
        #discountReset,
        #scientificReset,
        .wc-hero-actions
    )) > .tool-detail-heading {
        padding-right: 10px !important;
        padding-bottom: 70px !important;
    }

    :is(
        #textImageClear,
        #randomWordClear,
        #randomNumberClear,
        #randomColorClear,
        #paletteClear,
        #gradientClear,
        #pickerClear,
        #converterReset,
        #replaceTextClear,
        #unitClear,
        #caseReset,
        #loanReset,
        #discountReset,
        #scientificReset
    ) {
        top: 84px !important;
        right: 10px !important;
    }

    .wc-hero-actions {
        top: 84px !important;
        right: 10px !important;
        left: 10px !important;
        justify-content: flex-end !important;
    }
}