:root {
    --app-background: #f5f5fa;
    --app-text: #30313a;
    --app-muted: #747680;
    --app-border: #dedfe7;
}

html {
    scroll-behavior: smooth;
}

body {
    color: var(--app-text);
    background: white;
}

.site-header {
    z-index: 1035;
}

.navbar {
    min-height: 72px;
}

.navbar-brand {
    display: inline-flex;
    align-items: center;
    padding-block: 0.35rem;
}

.brand-logo {
    display: block;
    width: auto;
    height: 2.55rem;
    object-fit: contain;
}

.nav-link {
    color: #17181c;
    font-weight: 500;
    padding-inline: 1rem !important;
}

.nav-link:hover,
.nav-link:focus {
    color: #0d6efd;
}

.mega-menu {
    width: 100%;
    top: calc(100% - 1px) !important;
    left: 0 !important;
    background: #ffffff;
}

.convert-menu {
    width: min(32rem, 90vw);
}

.mega-heading,
.footer-heading {
    color: var(--app-muted);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
}

.mega-tool-link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.42rem;
    border-radius: 0.45rem;
    color: #202126;
    font-size: 0.88rem;
    font-weight: 500;
    text-decoration: none;
}

.mega-tool-link:not(.planned-tool):hover,
.mega-tool-link:not(.planned-tool):focus-visible {
    color: #111217;
    background: #f3f4f8;
}

.planned-tool {
    color: #777984;
    cursor: default;
}

.planned-badge {
    margin-left: auto;
    padding: 0.12rem 0.38rem;
    border-radius: 999px;
    background: #ececf2;
    color: #656772;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.mini-tool-icon {
    width: 1.75rem;
    height: 1.75rem;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 0.3rem;
}

.tools-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 8% 10%, rgba(255, 126, 103, 0.10), transparent 24%),
        radial-gradient(circle at 92% 8%, rgba(153, 120, 255, 0.10), transparent 25%),
        var(--app-background);
}

.tools-intro {
    max-width: 58rem;
}

.pdf-tool-card {
    min-height: 11.8rem;
    display: flex;
    flex-direction: column;
    padding: 1.35rem;
    border: 1px solid var(--app-border);
    border-radius: 0.85rem;
    background: white;
    transition:
        transform 150ms ease,
        box-shadow 150ms ease,
        border-color 150ms ease;
}

.tool-card-link:hover .pdf-tool-card,
.tool-card-link:focus-visible .pdf-tool-card {
    transform: translateY(-0.2rem);
    border-color: #c8cad5;
    box-shadow: 0 0.8rem 1.8rem rgba(32, 33, 38, 0.08);
}

.tool-card-link:focus-visible {
    border-radius: 0.85rem;
    outline: 0.2rem solid rgba(13, 110, 253, 0.35);
    outline-offset: 0.16rem;
}

.tool-card-icon {
    width: 2.65rem;
    height: 2.65rem;
    display: grid;
    place-items: center;
    border-radius: 0.45rem;
    font-size: 1.2rem;
}

.tool-card-title {
    margin: 1rem 0 0.45rem;
    font-size: 1rem;
    font-weight: 700;
}

.tool-card-description {
    margin: 0;
    color: var(--app-muted);
    font-size: 0.82rem;
    line-height: 1.45;
}

.available-tool-label,
.planned-card-label {
    align-self: flex-start;
    margin-top: auto;
    padding-top: 1rem;
    color: #17643a;
    font-size: 0.75rem;
    font-weight: 700;
}

.planned-preview-note {
    display: inline-block;
    padding: 0.5rem 0.8rem;
    border: 1px solid #d7d2e9;
    border-radius: 0.65rem;
    color: #5e536f;
    background: rgba(255, 255, 255, 0.72);
    font-size: 0.88rem;
}

.planned-tool-card {
    border-style: dashed;
    background: rgba(255, 255, 255, 0.7);
    color: #686a74;
}

.planned-card-label {
    color: #775a16;
}

.tone-coral {
    color: #ef6b56;
    background: #ffe6df;
}

.tone-green {
    color: #5d9d45;
    background: #e6f4df;
}

.tone-yellow {
    color: #d99f00;
    background: #fff3c4;
}

.tone-blue {
    color: #4779bd;
    background: #e3edfb;
}

.tone-orange {
    color: #e56f40;
    background: #ffe5d9;
}

.tone-purple {
    color: #a2558b;
    background: #f2dfec;
}

.tone-steel {
    color: #507ba8;
    background: #e2ecf6;
}

.tone-violet {
    color: #7152d8;
    background: #e9e2ff;
}

.work-card {
    min-height: 23rem;
    padding: 2rem;
    border-radius: 1rem;
}

.work-card h3 {
    margin-top: 1.6rem;
    font-size: 1.1rem;
    font-weight: 700;
}

.work-card p {
    color: var(--app-muted);
}

.work-card-peach {
    background: #fff0eb;
}

.work-card-blue {
    background: #ecf3ff;
}

.work-card-violet {
    background: #f2edff;
}

.work-illustration {
    min-height: 13rem;
    display: grid;
    place-items: center;
    border-radius: 0.8rem;
    background: rgba(255, 255, 255, 0.68);
    font-size: 5rem;
}

.trust-section {
    background: #fafafa;
}

.trust-copy {
    max-width: 47rem;
}

.trust-item {
    display: grid;
    justify-items: center;
    gap: 0.45rem;
}

.trust-item i {
    color: #0d6efd;
    font-size: 1.7rem;
}

.trust-item strong {
    font-size: 0.95rem;
}

.trust-item span {
    color: var(--app-muted);
    font-size: 0.85rem;
}

.site-footer {
    border-top: 1px solid #343640;
    background:
        radial-gradient(circle at 90% 0, rgba(72, 91, 142, 0.2), transparent 34rem),
        #25262e;
    color: #f4f5f8;
}

.footer-brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.footer-brand:hover,
.footer-brand:focus-visible {
    color: #ffffff;
}

.footer-brand-logo-shell {
    display: inline-flex;
    padding: 0.3rem 0.55rem;
    border-radius: 0.7rem;
    background: #ffffff;
}

.footer-brand-logo {
    display: block;
    width: auto;
    height: 2.15rem;
    object-fit: contain;
}

.site-footer-directory {
    display: grid;
    grid-template-columns: minmax(230px, 1.6fr) repeat(5, minmax(112px, 1fr));
    gap: 2.5rem 2rem;
}

.site-footer-intro p {
    max-width: 21rem;
    color: #c7c9d1;
    font-size: 0.92rem;
    line-height: 1.65;
}

.footer-tool-count {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: #9bc2ff;
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
}

.footer-tool-count:hover,
.footer-tool-count:focus-visible {
    color: #d6e7ff;
}

.site-footer .footer-heading {
    color: #f5f6fa;
    letter-spacing: 0.055em;
}

.footer-link-list {
    display: grid;
    gap: 0.7rem;
    margin-top: 1rem;
}

.footer-link {
    width: fit-content;
    color: #c7c9d1;
    font-size: 0.84rem;
    text-decoration: none;
}

.footer-link:hover,
.footer-link:focus-visible {
    color: #ffffff;
    text-decoration: underline;
    text-underline-offset: 0.2rem;
}

.site-footer-capabilities {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-top: 2.5rem;
    padding-block: 1.35rem;
    border-top: 1px solid #42444f;
    border-bottom: 1px solid #42444f;
}

.site-footer-capabilities span {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid #484b57;
    border-radius: 999px;
    color: #d5d7de;
    background: rgba(255, 255, 255, 0.035);
    font-size: 0.78rem;
    font-weight: 600;
}

.site-footer-capabilities i {
    color: #86b7ff;
}

.site-footer-bottom {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1.25rem;
    color: #aeb1bb;
}

.site-footer-bottom-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}

.site-footer-bottom a {
    color: #d5d7de;
    font-size: 0.8rem;
    text-decoration: none;
}

.site-footer-bottom a:hover,
.site-footer-bottom a:focus-visible {
    color: #ffffff;
    text-decoration: underline;
}

.tool-workspace-page.workspace-active .site-footer {
    display: none;
}

@media (max-width: 1199.98px) {
    .site-footer-directory {
        grid-template-columns: minmax(230px, 1.4fr) repeat(3, minmax(140px, 1fr));
    }
}

@media (max-width: 767.98px) {
    .site-footer-directory {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2rem 1.5rem;
    }

    .site-footer-intro {
        grid-column: 1 / -1;
    }

    .site-footer-bottom {
        flex-direction: column;
    }
}

@media (max-width: 399.98px) {
    .site-footer-directory {
        grid-template-columns: 1fr;
    }

    .site-footer-intro {
        grid-column: auto;
    }

    .site-footer-capabilities {
        align-items: stretch;
        flex-direction: column;
    }

    .site-footer-capabilities span {
        border-radius: 0.7rem;
    }
}

@media (max-width: 1199.98px) {
    .mega-menu {
        position: static !important;
        box-shadow: none !important;
    }

    .convert-menu {
        width: 100%;
    }

    .navbar-nav {
        max-height: calc(100vh - 6rem);
        overflow-y: auto;
    }
}

@media (max-width: 575.98px) {
    .tools-hero .display-5 {
        font-size: 2rem;
    }

    .pdf-tool-card {
        min-height: 10.5rem;
        padding: 1rem;
    }

    .tool-card-description {
        font-size: 0.76rem;
    }
}
/* SHARED BROWSER TOOL UPLOADER START */

.browser-tool-landing {
    min-height: calc(100dvh - 72px);
    padding: 0 0 clamp(3rem, 6vw, 5rem);
    background: #f4f4f8;
}

.browser-tool-container {
    max-width: 1280px;
    padding-inline: clamp(1rem, 3vw, 2rem);
}

.browser-tool-breadcrumb {
    padding-top: 1rem;
}

.browser-tool-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 0;
    padding: 0;
    color: var(--app-muted);
    font-size: 0.8rem;
    list-style: none;
}

.browser-tool-breadcrumb li + li::before {
    margin-right: 0.45rem;
    content: "›";
}

.browser-tool-breadcrumb a {
    color: inherit;
    text-decoration: none;
}

.browser-tool-breadcrumb a:hover,
.browser-tool-breadcrumb a:focus-visible {
    color: #0d6efd;
    text-decoration: underline;
}

.browser-tool-intro {
    max-width: 1120px;
    padding-top: clamp(1.5rem, 4vw, 3rem);
}

.browser-tool-intro > .lead {
    max-width: 800px;
    margin-inline: auto;
}

.browser-uploader-panel {
    position: relative;
    isolation: isolate;
    width: min(100%, 980px);
    min-height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    overflow: hidden;
    padding: clamp(2rem, 5vw, 3.5rem) 1rem;
    border-radius: 1rem;
    color: #fff;
    box-shadow: 0 1rem 2.5rem rgba(46, 39, 88, 0.14);
    transition:
        box-shadow 150ms ease,
        transform 150ms ease;
}

.browser-uploader-panel::before {
    position: absolute;
    z-index: -1;
    inset: 0.65rem;
    border: 1px dashed rgba(255, 255, 255, 0.8);
    border-radius: 0.7rem;
    content: "";
    pointer-events: none;
}

.browser-tool-tone-organize .browser-uploader-panel {
    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(255, 255, 255, 0.18),
            transparent 30%
        ),
        linear-gradient(135deg, #6855df, #4c3dbb);
}

.browser-tool-tone-convert .browser-uploader-panel {
    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(255, 255, 255, 0.2),
            transparent 30%
        ),
        linear-gradient(135deg, #efa900, #dc7d00);
}

.site-header .navbar-nav,
.site-header .nav-link {
    min-width: 0;
}

.site-header .nav-link {
    padding-inline: 0.7rem !important;
    white-space: nowrap;
}

.browser-tool-tone-edit .browser-uploader-panel {
    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(255, 255, 255, 0.18),
            transparent 30%
        ),
        linear-gradient(135deg, #9a4c86, #6d356e);
}

.browser-tool-tone-security .browser-uploader-panel {
    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(255, 255, 255, 0.18),
            transparent 30%
        ),
        linear-gradient(135deg, #087f8c, #075b67);
}

.browser-tool-landing:is(
    .is-file-drag-over,
    .is-drag-over
) .browser-uploader-panel {
    box-shadow:
        0 0 0 4px rgba(13, 110, 253, 0.22),
        0 1.25rem 3rem rgba(46, 39, 88, 0.2);
    transform: translateY(-0.2rem);
}

.browser-uploader-icon {
    width: 4.5rem;
    height: 4.5rem;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.12);
    font-size: 2.25rem;
}

.browser-uploader-action {
    min-width: min(100%, 330px);
    min-height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    padding: 0.85rem 1.5rem;
    border: 0;
    border-radius: 0.65rem;
    color: #24252b;
    background: #fff;
    box-shadow: 0 0.5rem 1.25rem rgba(20, 20, 25, 0.16);
    font-size: 1.05rem;
    font-weight: 700;
}

.browser-uploader-action:hover {
    color: #0d5ec7;
    background: #f8fbff;
}

.browser-uploader-action:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
    box-shadow: 0 0 0 6px rgba(15, 40, 90, 0.5);
}

.browser-uploader-action:disabled {
    cursor: not-allowed;
    opacity: 0.62;
}

.browser-uploader-drop {
    font-size: 0.95rem;
    font-weight: 600;
}

.browser-uploader-limit {
    color: rgba(255, 255, 255, 0.86);
    font-size: 0.8rem;
}

.browser-uploader-assurances {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem 1.5rem;
    margin-top: 1.25rem;
    color: #17643a;
    font-size: 0.88rem;
    font-weight: 650;
}

.browser-uploader-assurances span {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.browser-tool-guide {
    max-width: 1040px;
    margin: clamp(2.5rem, 6vw, 4.5rem) auto 0;
}

.browser-tool-guide-card {
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 1px solid var(--app-border);
    border-radius: 1rem;
    background: #fff;
}

.browser-tool-guide-card h2 {
    margin-bottom: 1rem;
    font-size: 1.15rem;
    font-weight: 700;
}

.browser-tool-guide-card li + li {
    margin-top: 0.65rem;
}

.browser-tool-guide-card details {
    border-top: 1px solid var(--app-border);
}

.browser-tool-guide-card summary {
    min-height: 44px;
    display: flex;
    align-items: center;
    font-weight: 600;
    cursor: pointer;
}

.browser-tool-guide-card details p {
    color: var(--app-muted);
    font-size: 0.9rem;
}

.browser-tool-education {
    max-width: 1040px;
    margin: clamp(2rem, 5vw, 4rem) auto 0;
    padding: clamp(1.5rem, 4vw, 2.75rem);
    border: 1px solid var(--app-border);
    border-radius: 1.25rem;
    background:
        radial-gradient(
            circle at 92% 8%,
            rgba(104, 85, 223, 0.09),
            transparent 34%
        ),
        #fff;
}

.browser-tool-education-intro {
    max-width: 780px;
}

.browser-tool-education-kicker {
    display: block;
    margin-bottom: 0.55rem;
    color: #5a48c8;
    font-size: 0.78rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.browser-tool-education h2 {
    margin-bottom: 0.75rem;
    font-size: clamp(1.45rem, 3vw, 2rem);
    font-weight: 750;
}

.browser-tool-education-intro p {
    margin-bottom: 0;
    color: var(--app-muted);
    line-height: 1.7;
}

.browser-tool-education-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1.75rem;
}

.browser-tool-education-grid article {
    padding: 1.25rem;
    border-radius: 0.9rem;
    background: #f7f7fb;
}

.browser-tool-education-grid h3 {
    margin-bottom: 0.8rem;
    font-size: 1rem;
    font-weight: 750;
}

.browser-tool-education-grid ul {
    margin: 0;
    padding-left: 1.15rem;
    color: var(--app-muted);
}

.browser-tool-education-grid li + li {
    margin-top: 0.55rem;
}

@media (max-width: 575.98px) {
    .browser-tool-intro {
        padding-top: 1.25rem;
    }

    .browser-tool-intro .display-4 {
        font-size: 2.25rem;
    }

    .browser-tool-intro > .lead {
        font-size: 1rem;
    }

    .browser-uploader-panel {
        min-height: 280px;
        border-radius: 0.8rem;
    }

    .browser-uploader-panel::before {
        inset: 0.5rem;
    }

    .browser-uploader-action {
        width: min(100%, 300px);
        min-width: 0;
    }

    .browser-uploader-assurances {
        display: grid;
        justify-content: start;
        width: fit-content;
        margin-inline: auto;
        text-align: left;
    }

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

@media (prefers-reduced-motion: reduce) {
    .browser-uploader-panel {
        transition: none;
    }
}

/* SHARED BROWSER TOOL UPLOADER END */

/* JPG TOOL WORKSPACE START */

.tool-workspace-page.workspace-active {
    overflow-x: hidden;
    overflow-y: auto;
}

/* SHARED DOCUMENT THUMBNAILS START */

.pdf-thumbnail-frame {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 0.45rem;
    background: #eef1f6;
    color: #656a78;
}

.pdf-thumbnail-frame canvas {
    max-width: 100%;
    max-height: 100%;
    display: block;
    background: #fff;
    box-shadow: 0 0.25rem 0.8rem rgba(32, 33, 38, 0.16);
}

.pdf-thumbnail-placeholder {
    min-width: 0;
    display: grid;
    place-items: center;
    gap: 0.45rem;
    padding: 0.75rem;
    color: inherit;
    text-align: center;
    font-size: 0.75rem;
}

.pdf-thumbnail-placeholder .bi {
    color: #dc3545;
    font-size: 1.8rem;
}

.pdf-thumbnail-frame.is-loading .pdf-thumbnail-placeholder {
    opacity: 0.75;
}

.pdf-thumbnail-frame.is-unavailable {
    background: #f2f2f4;
    color: #767985;
}

/* SHARED DOCUMENT THUMBNAILS END */

.jpg-tool-shell {
    min-height: calc(100dvh - 72px);
    background: #f4f4f8;
}

.jpg-workspace {
    min-height: calc(100dvh - 72px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    align-items: start;
}

.jpg-workspace-main {
    min-width: 0;
    display: grid;
    grid-template-rows: auto auto;
}

.jpg-workspace-toolbar {
    min-height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--app-border);
    background: white;
}

.jpg-file-stage {
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(
        auto-fill,
        minmax(min(100%, 190px), 1fr)
    );
    align-content: flex-start;
    gap: 1.25rem;
    overflow: visible;
    padding: 2rem;
}

.jpg-file-card {
    position: relative;
    width: 100%;
    overflow: hidden;
    border: 1px solid var(--app-border);
    border-radius: 0.75rem;
    background: white;
    box-shadow: 0 0.4rem 1rem rgba(32, 33, 38, 0.07);
    cursor: grab;
    transition:
        border-color 120ms ease,
        opacity 120ms ease,
        transform 120ms ease;
}

.jpg-file-card:active {
    cursor: grabbing;
}

.jpg-file-card.is-dragging {
    opacity: 0.45;
}

.jpg-file-card.is-drag-target {
    border-color: #0d6efd;
    transform: translateY(-0.2rem);
}

.jpg-file-preview {
    width: 100%;
    aspect-ratio: 0.78;
    height: auto;
    display: block;
    object-fit: contain;
    background: #fafafa;
}

.jpg-file-actions {
    display: flex;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.65rem 0.5rem;
}

.jpg-file-actions .btn {
    min-width: 44px;
    min-height: 44px;
    display: inline-grid;
    place-items: center;
}

.jpg-drag-handle {
    padding: 0.45rem;
    border-top: 1px solid var(--app-border);
    color: var(--app-muted);
    text-align: center;
    font-size: 0.75rem;
}

.jpg-options-panel {
    min-width: 0;
    position: sticky;
    top: 72px;
    max-height: calc(100dvh - 72px);
    overflow: auto;
    padding: 1.25rem;
    border-left: 1px solid var(--app-border);
    background: white;
}

.option-tile {
    min-height: 88px;
    display: grid;
    place-items: center;
    gap: 0.25rem;
    padding: 0.65rem;
    border: 2px solid transparent;
    border-radius: 0.75rem;
    background: #f5f5f8;
    color: var(--app-muted);
    text-align: center;
    cursor: pointer;
}

.option-tile-small {
    min-height: 88px;
    font-size: 0.8rem;
}

.btn-check:checked + .option-tile {
    border-color: #0d6efd;
    background: #f1f6ff;
    color: #0d6efd;
}

.btn-check:disabled + .option-tile,
fieldset:disabled .option-tile {
    cursor: not-allowed;
    opacity: 0.58;
}

.jpg-convert-button {
    position: sticky;
    bottom: 0;
    box-shadow: 0 -0.5rem 1.5rem rgba(255, 255, 255, 0.92);
}

.jpg-tool-message {
    position: fixed;
    top: 86px;
    left: 50%;
    z-index: 1090;
    width: min(calc(100% - 2rem), 620px);
    transform: translateX(-50%);
    white-space: pre-line;
}

.is-file-drag-over {
    outline: 3px dashed #0d6efd;
    outline-offset: -0.5rem;
    background-color: rgba(13, 110, 253, 0.06);
}

.jpg-processing-overlay {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(244, 244, 248, 0.88);
    backdrop-filter: blur(5px);
}

.jpg-processing-card {
    width: min(100%, 360px);
    padding: 2rem;
    border: 1px solid var(--app-border);
    border-radius: 1rem;
    background: white;
    box-shadow: 0 1.5rem 4rem rgba(32, 33, 38, 0.15);
}

.jpg-result-screen {
    min-height: calc(100dvh - 72px);
    display: grid;
    place-items: center;
    padding: 2rem;
}

.jpg-result-card {
    width: min(100%, 760px);
    padding: clamp(2rem, 6vw, 4.5rem);
    border: 1px solid var(--app-border);
    border-radius: 1.25rem;
    background: white;
    box-shadow: 0 1.5rem 4rem rgba(32, 33, 38, 0.10);
}

.jpg-result-icon {
    width: 84px;
    height: 84px;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    background: #e7f7ec;
    color: #198754;
    font-size: 2.5rem;
}

.jpg-result-filename {
    width: min(100%, 32rem);
}

.jpg-result-filename .form-control {
    min-width: 0;
}

.jpg-output-extension {
    min-width: 4.25rem;
    justify-content: center;
}

@media (max-width: 991.98px) {
    .tool-workspace-page.workspace-active {
        overflow: auto;
    }

    .jpg-workspace {
        height: auto;
        min-height: calc(100dvh - 72px);
        grid-template-columns: 1fr;
    }

    .jpg-file-stage {
        min-height: 420px;
        overflow: visible;
        padding: 1rem;
    }

    .jpg-options-panel {
        position: static;
        max-height: none;
        overflow: visible;
        border-top: 1px solid var(--app-border);
        border-left: 0;
    }
}

@media (max-width: 575.98px) {
    .jpg-workspace-toolbar {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .jpg-file-stage {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
        padding-inline: 0.75rem;
    }

    .jpg-file-card {
        width: 100%;
    }

    .jpg-result-screen {
        padding: 1rem;
    }

    .jpg-options-panel {
        padding-inline: 0.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .jpg-file-card {
        transition: none;
    }
}

/* JPG TOOL WORKSPACE END */

/* MERGE PDF WORKSPACE START */

.merge-tool-shell {
    min-height: calc(100dvh - 72px);
    background: #f4f4f8;
}

.merge-workspace {
    min-height: calc(100dvh - 72px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    align-items: start;
}

.merge-workspace-main {
    min-width: 0;
    display: grid;
    grid-template-rows: auto auto;
}

.merge-workspace-toolbar {
    min-height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--app-border);
    background: #fff;
}

.merge-add-button {
    min-height: 44px;
    flex: 0 0 auto;
}

.merge-file-stage {
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(
        auto-fill,
        minmax(min(100%, 190px), 1fr)
    );
    align-content: flex-start;
    gap: 1rem;
    overflow: visible;
    padding: clamp(1rem, 3vw, 2rem);
}

.merge-file-card {
    position: relative;
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "thumbnail"
        "details"
        "actions"
        "handle";
    align-content: start;
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--app-border);
    border-radius: 0.85rem;
    background: #fff;
    box-shadow: 0 0.4rem 1rem rgba(32, 33, 38, 0.06);
    cursor: grab;
    transition:
        border-color 120ms ease,
        opacity 120ms ease,
        transform 120ms ease;
}

.merge-file-card:active {
    cursor: grabbing;
}

.merge-file-card.is-dragging {
    opacity: 0.45;
}

.merge-file-card.is-drag-target {
    border-color: #0d6efd;
    transform: translateY(-0.15rem);
}

.merge-file-order {
    position: absolute;
    top: 0.65rem;
    left: 0.65rem;
    z-index: 2;
    width: 2.25rem;
    height: 2.25rem;
    display: grid;
    place-items: center;
    box-shadow: 0 0.2rem 0.55rem rgba(32, 33, 38, 0.16);
    border-radius: 50%;
    background: #e8f1ff;
    color: #135db4;
    font-weight: 700;
}

.merge-file-thumbnail {
    grid-area: thumbnail;
    aspect-ratio: 0.78;
    border-radius: 0;
}

.merge-file-details {
    grid-area: details;
    min-width: 0;
    padding: 0.8rem 0.75rem 0.65rem;
}

.merge-file-name {
    margin: 0 0 0.25rem;
    overflow: hidden;
    font-size: 0.9rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.merge-file-meta,
.merge-file-origin {
    color: var(--app-muted);
    font-size: 0.8rem;
}

.merge-file-actions {
    grid-area: actions;
    display: grid;
    grid-template-columns: repeat(3, minmax(44px, 1fr));
    gap: 0.35rem;
    padding: 0 0.65rem 0.65rem;
}

.merge-file-actions .btn {
    min-width: 44px;
    min-height: 44px;
    display: inline-grid;
    place-items: center;
}

.merge-drag-handle {
    grid-area: handle;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    border-top: 1px solid var(--app-border);
    color: var(--app-muted);
    background: #fafafa;
    font-size: 0.78rem;
}

.merge-action-panel {
    min-width: 0;
    position: sticky;
    top: 72px;
    max-height: calc(100dvh - 72px);
    overflow: auto;
    padding: 1.5rem;
    border-left: 1px solid var(--app-border);
    background: #fff;
}

.merge-summary-list {
    margin: 1.5rem 0;
}

.merge-summary-list div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--app-border);
}

.merge-summary-list dt {
    color: var(--app-muted);
    font-weight: 500;
}

.merge-summary-list dd {
    margin: 0;
    font-weight: 700;
}

.merge-submit-button {
    min-height: 52px;
}

.merge-tool-message {
    position: fixed;
    top: 86px;
    left: 50%;
    z-index: 1090;
    width: min(calc(100% - 2rem), 720px);
    max-height: min(50dvh, 28rem);
    overflow: auto;
    transform: translateX(-50%);
    white-space: pre-line;
}

.merge-processing-overlay {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(244, 244, 248, 0.9);
    backdrop-filter: blur(5px);
}

.merge-processing-card {
    width: min(100%, 420px);
    padding: 2rem;
    border: 1px solid var(--app-border);
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 1.5rem 4rem rgba(32, 33, 38, 0.15);
}

.merge-processing-card .progress {
    height: 0.65rem;
}

.merge-processing-card .btn {
    min-height: 44px;
}

.merge-result-screen {
    min-height: calc(100dvh - 72px);
    display: grid;
    place-items: center;
    padding: 2rem;
}

.merge-result-card {
    width: min(100%, 760px);
    padding: clamp(2rem, 6vw, 4.5rem);
    border: 1px solid var(--app-border);
    border-radius: 1.25rem;
    background: #fff;
    box-shadow: 0 1.5rem 4rem rgba(32, 33, 38, 0.1);
}

.merge-result-icon {
    width: 84px;
    height: 84px;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    background: #e7f7ec;
    color: #198754;
    font-size: 2.5rem;
}

.merge-result-filename {
    width: min(100%, 32rem);
}

.merge-result-filename .form-control {
    min-width: 0;
}

.merge-output-extension {
    min-width: 4.25rem;
    justify-content: center;
}

.merge-result-card .btn {
    min-height: 44px;
}

@media (max-width: 991.98px) {
    .tool-workspace-page.workspace-active {
        overflow: auto;
    }

    .merge-workspace {
        height: auto;
        min-height: calc(100dvh - 72px);
        grid-template-columns: 1fr;
    }

    .merge-file-stage {
        min-height: 360px;
        overflow: visible;
    }

    .merge-action-panel {
        position: static;
        max-height: none;
        overflow: visible;
        border-top: 1px solid var(--app-border);
        border-left: 0;
    }
}

@media (max-width: 575.98px) {
    .merge-workspace-toolbar {
        align-items: flex-start;
        flex-wrap: wrap;
        padding-inline: 0.75rem;
    }

    .merge-file-stage {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
        padding-inline: 0.75rem;
    }

    .merge-file-details {
        padding-inline: 0.6rem;
    }

    .merge-file-actions {
        padding-inline: 0.5rem;
    }

    .merge-action-panel {
        padding-inline: 0.75rem;
    }

    .merge-result-screen {
        padding: 1rem;
    }

    .merge-result-card {
        padding-inline: 1rem;
    }

    .merge-result-filename .input-group {
        flex-wrap: nowrap;
    }
}

@media (prefers-reduced-motion: reduce) {
    .merge-file-card {
        transition: none;
    }
}

/* MERGE PDF WORKSPACE END */

/* SPLIT PDF WORKSPACE START */

.split-workspace {
    min-height: calc(100dvh - 72px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) 390px;
    align-items: start;
}

.split-workspace-main {
    min-width: 0;
    display: grid;
    grid-template-rows: auto auto;
}

.split-document-stage {
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 1.25rem;
    overflow: visible;
    padding: clamp(1rem, 3vw, 2rem);
}

.split-source-card {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(110px, 160px) minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    border: 1px solid var(--app-border);
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 0.4rem 1rem rgba(32, 33, 38, 0.06);
}

.split-source-thumbnail {
    aspect-ratio: 0.78;
}

.split-source-details {
    min-width: 0;
}

.split-source-name {
    margin: 0 0 0.25rem;
    overflow: hidden;
    font-size: 1rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.split-preview-card {
    min-width: 0;
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 1px solid var(--app-border);
    border-radius: 1rem;
    background: #fff;
}

.split-part-count {
    flex: 0 0 auto;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    background: #fff0ee;
    color: #a52d25;
    font-size: 0.8rem;
    font-weight: 700;
}

.split-part-preview {
    display: grid;
    grid-template-columns: repeat(
        auto-fit,
        minmax(min(100%, 220px), 1fr)
    );
    gap: 0.75rem;
    padding: 0;
    list-style: none;
}

.split-part-preview li {
    min-width: 0;
    padding: 0.9rem 1rem;
    border: 1px solid #f0cbc8;
    border-radius: 0.75rem;
    background: #fff8f7;
    color: #5c3030;
    font-size: 0.9rem;
    font-weight: 600;
}

.split-action-panel {
    min-width: 0;
}

.split-mode-options {
    display: grid;
    gap: 0.75rem;
}

.split-mode-option {
    min-height: 44px;
    margin: 0;
    padding: 0.9rem 0.9rem 0.9rem 2.5rem;
    border: 1px solid var(--app-border);
    border-radius: 0.75rem;
}

.split-mode-option:has(.form-check-input:checked) {
    border-color: #8fb5eb;
    background: #f2f7ff;
}

.split-mode-option .form-check-input {
    margin-left: -1.6rem;
}

.split-mode-option .form-check-label {
    display: grid;
    gap: 0.2rem;
    cursor: pointer;
}

.split-mode-option .form-check-label span {
    color: var(--app-muted);
    font-size: 0.8rem;
}

.split-plan-error {
    min-height: 1.5rem;
    color: #b02a37;
    font-size: 0.85rem;
}

.split-result-card {
    width: min(100%, 820px);
}

.split-download-list {
    display: grid;
    gap: 0.75rem;
}

.split-download-item {
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.9rem;
    padding: 0.85rem;
    border: 1px solid var(--app-border);
    border-radius: 0.85rem;
    background: #fafafa;
}

.split-download-icon {
    width: 2.75rem;
    height: 2.75rem;
    display: grid;
    place-items: center;
    border-radius: 0.65rem;
    background: #fff0ee;
    color: #dc3545;
    font-size: 1.3rem;
}

.split-download-details {
    min-width: 0;
}

.split-download-name {
    margin: 0 0 0.15rem;
    overflow: hidden;
    font-size: 0.95rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.split-download-item .btn {
    min-height: 44px;
}

@media (max-width: 991.98px) {
    .split-workspace {
        min-height: calc(100dvh - 72px);
        grid-template-columns: 1fr;
    }

    .split-document-stage {
        overflow: visible;
    }

    .split-action-panel {
        border-top: 1px solid var(--app-border);
        border-left: 0;
    }
}

@media (max-width: 575.98px) {
    .split-document-stage {
        padding-inline: 0.75rem;
    }

    .split-action-panel {
        padding-inline: 0.75rem;
    }

    .split-source-card {
        grid-template-columns: 110px minmax(0, 1fr);
        gap: 0.75rem;
        padding: 0.75rem;
    }

    .split-download-item {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .split-download-item .btn {
        grid-column: 1 / -1;
        width: 100%;
    }
}

/* SPLIT PDF WORKSPACE END */

/* ORGANIZE PDF WORKSPACE START */

.organize-page-stage {
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(
        auto-fill,
        minmax(min(100%, 190px), 1fr)
    );
    align-content: start;
    gap: 1rem;
    overflow: visible;
    margin: 0;
    padding: clamp(1rem, 3vw, 2rem);
    list-style: none;
}

.organize-page-card {
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 0.65rem;
    padding: 0.75rem;
    border: 1px solid var(--app-border);
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 0.4rem 1rem rgba(32, 33, 38, 0.06);
    cursor: grab;
    transition:
        border-color 150ms ease,
        box-shadow 150ms ease,
        opacity 150ms ease;
}

.organize-page-card:hover {
    border-color: #9eb9df;
    box-shadow: 0 0.7rem 1.5rem rgba(32, 33, 38, 0.1);
}

.organize-page-card.is-dragging {
    opacity: 0.45;
}

.organize-page-sheet {
    position: relative;
    width: 100%;
    aspect-ratio: 0.74;
    display: grid;
    place-items: center;
    justify-self: center;
    overflow: hidden;
    padding: 0;
    border: 1px solid #d6d8e0;
    border-radius: 0.45rem;
    background: #eef1f6;
    color: #343640;
    text-align: center;
}

.organize-page-sheet.is-landscape {
    width: 100%;
    aspect-ratio: 1.35;
}

.organize-page-position {
    position: absolute;
    top: 0.45rem;
    left: 0.45rem;
    min-width: 1.8rem;
    min-height: 1.8rem;
    display: grid;
    place-items: center;
    padding-inline: 0.35rem;
    border-radius: 999px;
    color: #fff;
    background: #5542c2;
    font-size: 0.75rem;
    font-weight: 700;
    box-shadow: 0 0.2rem 0.55rem rgba(32, 33, 38, 0.18);
}

.organize-page-thumbnail {
    position: absolute;
    inset: 0;
    border-radius: 0;
}

.organize-page-caption {
    position: absolute;
    right: 0.35rem;
    bottom: 0.35rem;
    left: 0.35rem;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    padding: 0.3rem 0.45rem;
    border-radius: 0.35rem;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 0.15rem 0.45rem rgba(32, 33, 38, 0.12);
    font-size: 0.72rem;
}

.organize-page-rotation {
    color: var(--app-muted);
    font-size: 0.72rem;
}

.organize-page-details {
    min-width: 0;
    display: grid;
    gap: 0.15rem;
    text-align: center;
}

.organize-page-source {
    overflow: hidden;
    font-size: 0.86rem;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.organize-page-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(44px, 1fr));
    gap: 0.35rem;
}

.organize-page-actions .btn {
    min-width: 44px;
    min-height: 44px;
    display: inline-grid;
    place-items: center;
    padding: 0.45rem;
}

@media (max-width: 991.98px) {
    .organize-workspace {
        height: auto;
        min-height: calc(100dvh - 72px);
    }

    .organize-page-stage {
        overflow: visible;
    }

    .organize-action-panel {
        border-top: 1px solid var(--app-border);
        border-left: 0;
    }
}

@media (max-width: 575.98px) {
    .organize-page-stage {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
        padding-inline: 0.75rem;
    }

    .organize-action-panel {
        padding-inline: 0.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .organize-page-card {
        transition: none;
    }
}

/* ORGANIZE PDF WORKSPACE END */

/* ROTATE PDF WORKSPACE START */

.rotate-page-card {
    cursor: default;
}

.rotate-page-card.is-selected {
    border-color: #6f9ee4;
    background: #f5f9ff;
    box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.12);
}

.rotate-page-card.is-changed .organize-page-position {
    background: #0d6efd;
}

.rotate-page-select {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin: -0.35rem -0.35rem 0;
    padding: 0.35rem;
    border-radius: 0.55rem;
    font-size: 0.86rem;
    font-weight: 650;
    cursor: pointer;
}

.rotate-page-select .form-check-input {
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 auto;
    margin: 0;
}

.rotate-page-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(44px, 1fr));
    gap: 0.35rem;
}

.rotate-page-actions .btn {
    min-width: 44px;
    min-height: 44px;
    display: inline-grid;
    place-items: center;
    padding: 0.45rem;
}

.rotate-batch-actions {
    display: grid;
    gap: 0.5rem;
}

.rotate-batch-actions .btn {
    min-height: 44px;
}

.rotate-change-help {
    min-height: 3rem;
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    padding: 0.75rem;
    border-radius: 0.65rem;
    color: #4f5260;
    background: #f4f4f8;
    font-size: 0.86rem;
}

@media (prefers-reduced-motion: reduce) {
    .rotate-page-card {
        transition: none;
    }
}

/* ROTATE PDF WORKSPACE END */

/* REMOVE PAGES WORKSPACE START */

.remove-page-card {
    cursor: default;
}

.remove-page-card.is-selected {
    border-color: #dc3545;
    background: #fff5f5;
    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.12);
}

.remove-page-card.is-selected .organize-page-sheet {
    border-color: #dc3545;
    background:
        linear-gradient(
            135deg,
            transparent 0 84%,
            #f8d7da 84% 100%
        ),
        #fff5f5;
}

.remove-page-card.is-selected .organize-page-position {
    background: #dc3545;
}

.remove-page-card.is-selected .organize-page-icon {
    opacity: 0.55;
}

.remove-page-select {
    color: #343640;
}

.remove-page-card.is-selected .remove-page-select {
    color: #b02a37;
}

.remove-pages-action-panel .btn {
    min-height: 44px;
}

@media (max-width: 991.98px) {
    .remove-pages-workspace {
        height: auto;
        min-height: calc(100dvh - 72px);
    }

    .remove-pages-stage {
        overflow: visible;
    }

    .remove-pages-action-panel {
        border-top: 1px solid var(--app-border);
        border-left: 0;
    }
}

@media (max-width: 575.98px) {
    .remove-pages-stage {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding-inline: 0.75rem;
    }

    .remove-pages-action-panel {
        padding-inline: 0.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .remove-page-card {
        transition: none;
    }
}

/* REMOVE PAGES WORKSPACE END */

/* PDF READER WORKSPACE START */

.pdf-reader-tool-shell {
    min-height: calc(100dvh - 72px);
    background: #f4f4f8;
}

.pdf-reader-workspace {
    height: calc(100dvh - 72px);
    min-height: 560px;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
    background: #eef1f7;
}

.pdf-reader-workspace:fullscreen {
    width: 100vw;
    height: 100dvh;
    min-height: 0;
}

.pdf-reader-toolbar {
    position: relative;
    z-index: 4;
    min-width: 0;
    min-height: 72px;
    display: grid;
    grid-template-columns: minmax(210px, 1fr) auto minmax(310px, 1fr);
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--app-border);
    background: #fff;
    box-shadow: 0 0.15rem 0.55rem rgba(32, 33, 38, 0.07);
}

.pdf-reader-file-actions,
.pdf-reader-page-controls,
.pdf-reader-view-controls {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.pdf-reader-file-actions .btn,
.pdf-reader-page-controls .btn,
.pdf-reader-view-controls .btn {
    min-width: 44px;
    min-height: 44px;
}

.pdf-reader-filename {
    min-width: 0;
    overflow: hidden;
    color: #4f5260;
    font-size: 0.86rem;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pdf-reader-page-controls {
    justify-content: center;
}

.pdf-reader-page-input-label {
    width: 4.75rem;
    margin: 0;
}

.pdf-reader-page-input-label .form-control {
    min-height: 44px;
    padding-inline: 0.45rem;
    text-align: center;
}

.pdf-reader-page-total {
    min-width: 3.75rem;
    color: #5f626d;
    font-size: 0.88rem;
    white-space: nowrap;
}

.pdf-reader-view-controls {
    justify-content: flex-end;
}

.pdf-reader-zoom-select {
    width: 7.5rem;
    min-height: 44px;
}

.pdf-reader-body {
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
}

.pdf-reader-sidebar {
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
    border-right: 1px solid var(--app-border);
    background: #fff;
}

.pdf-reader-sidebar-heading {
    padding: 1rem;
    border-bottom: 1px solid var(--app-border);
}

.pdf-reader-thumbnail-list {
    min-width: 0;
    min-height: 0;
    display: grid;
    align-content: start;
    gap: 0.75rem;
    overflow-x: hidden;
    overflow-y: auto;
    margin: 0;
    padding: 0.85rem;
    list-style: none;
    scrollbar-gutter: stable;
}

.pdf-reader-thumbnail-item {
    min-width: 0;
}

.pdf-reader-thumbnail-button {
    width: 100%;
    min-width: 0;
    display: grid;
    gap: 0.45rem;
    padding: 0.55rem;
    border: 2px solid transparent;
    border-radius: 0.7rem;
    color: #3f424d;
    background: #f5f6f9;
    text-align: center;
}

.pdf-reader-thumbnail-button:hover {
    border-color: #b9c7dd;
    background: #eef4ff;
}

.pdf-reader-thumbnail-button:focus-visible {
    outline: 3px solid rgba(13, 110, 253, 0.35);
    outline-offset: 2px;
}

.pdf-reader-thumbnail-button.is-active {
    border-color: #0d6efd;
    background: #e8f1ff;
    box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.12);
}

.pdf-reader-thumbnail-frame {
    width: 100%;
    aspect-ratio: 0.76;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid #d5d8e1;
    border-radius: 0.4rem;
    background: #e8ebf1;
}

.pdf-reader-thumbnail-frame canvas {
    max-width: 100%;
    max-height: 100%;
    display: block;
}

.pdf-reader-thumbnail-label {
    overflow: hidden;
    font-size: 0.78rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pdf-reader-stage {
    position: relative;
    min-width: 0;
    min-height: 0;
    display: grid;
    place-content: safe center;
    place-items: center;
    overflow: auto;
    padding: 1.5rem;
    outline: none;
    background:
        radial-gradient(circle at 50% 10%, #f9faff, transparent 45%),
        #e5e8ef;
    scrollbar-gutter: stable both-edges;
}

.pdf-reader-stage:focus-visible {
    box-shadow: inset 0 0 0 3px rgba(13, 110, 253, 0.38);
}

.pdf-reader-canvas {
    display: block;
    grid-area: 1 / 1;
    max-width: none;
    max-height: none;
    background: #fff;
    box-shadow: 0 0.8rem 2.5rem rgba(25, 28, 38, 0.2);
}

.pdf-reader-page-status,
.pdf-reader-page-error {
    grid-area: 1 / 1;
    align-self: center;
    justify-self: center;
}

.pdf-reader-page-status {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.8rem 1rem;
    border: 1px solid var(--app-border);
    border-radius: 0.7rem;
    background: rgba(255, 255, 255, 0.94);
    color: #4c4f5b;
    box-shadow: 0 0.4rem 1.2rem rgba(32, 33, 38, 0.08);
}

.pdf-reader-page-error {
    width: min(100%, 34rem);
    margin: 0;
}

.pdf-reader-workspace.is-dragging,
.pdf-reader-workspace.is-drag-over {
    box-shadow: inset 0 0 0 4px rgba(13, 110, 253, 0.35);
}

@media (max-width: 1199.98px) {
    .pdf-reader-toolbar {
        grid-template-columns: minmax(180px, 1fr) auto;
    }

    .pdf-reader-view-controls {
        grid-column: 1 / -1;
        justify-content: center;
    }
}

@media (max-width: 767.98px) {
    .pdf-reader-workspace {
        height: auto;
        min-height: calc(100dvh - 72px);
        overflow: visible;
    }

    .pdf-reader-toolbar {
        grid-template-columns: 1fr;
        padding-inline: 0.75rem;
    }

    .pdf-reader-file-actions,
    .pdf-reader-page-controls,
    .pdf-reader-view-controls {
        justify-content: center;
    }

    .pdf-reader-file-actions {
        flex-wrap: wrap;
    }

    .pdf-reader-filename {
        max-width: min(55vw, 22rem);
    }

    .pdf-reader-view-controls {
        grid-column: auto;
        flex-wrap: wrap;
    }

    .pdf-reader-body {
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(480px, 65dvh);
    }

    .pdf-reader-sidebar {
        grid-template-rows: auto auto;
        border-right: 0;
        border-bottom: 1px solid var(--app-border);
    }

    .pdf-reader-sidebar-heading {
        padding: 0.75rem;
    }

    .pdf-reader-thumbnail-list {
        grid-auto-flow: column;
        grid-auto-columns: 118px;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 0.65rem 0.75rem;
        scrollbar-gutter: auto;
    }

    .pdf-reader-stage {
        min-height: 480px;
        padding: 1rem;
        scrollbar-gutter: auto;
    }
}

@media (max-width: 399.98px) {
    .pdf-reader-toolbar {
        padding-inline: 0.5rem;
    }

    .pdf-reader-file-actions .btn {
        flex: 1 1 100%;
    }

    .pdf-reader-filename {
        max-width: calc(100vw - 1rem);
    }

    .pdf-reader-view-controls {
        gap: 0.35rem;
    }

    .pdf-reader-zoom-select {
        width: 7rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pdf-reader-thumbnail-button {
        scroll-behavior: auto;
    }
}

/* PDF READER WORKSPACE END */

/* PDF TO IMAGES WORKSPACE START */

.pdf-image-page-card {
    cursor: default;
}

.pdf-image-page-card.is-selected {
    border-color: #f0a700;
    box-shadow: 0 0 0 3px rgba(240, 167, 0, 0.16);
}

.pdf-image-page-card.is-selected .organize-page-position {
    color: #6b4900;
    background: #fff0b7;
}

.pdf-to-images-action-panel .form-select,
.pdf-images-archive-panel .form-control,
.pdf-images-archive-panel .input-group-text {
    min-height: 44px;
}

.pdf-images-result-screen {
    min-height: calc(100dvh - 72px);
    background:
        radial-gradient(circle at 50% 0, rgba(255, 193, 7, 0.11), transparent 34rem),
        #f5f5fa;
}

.pdf-images-result-container {
    width: min(100%, 1180px);
    margin-inline: auto;
    padding: 2.25rem 1.25rem 4rem;
}

.pdf-images-result-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
    align-items: center;
    gap: 2rem;
    margin-bottom: 2rem;
    padding: 1.5rem;
    border: 1px solid var(--app-border);
    border-radius: 1rem;
    background: #ffffff;
    box-shadow: 0 1rem 2.8rem rgba(32, 33, 38, 0.08);
}

.pdf-images-archive-panel {
    padding: 1.15rem;
    border: 1px solid #dce2eb;
    border-radius: 0.8rem;
    background: #f8faff;
}

.pdf-images-result-list {
    display: grid;
    gap: 0.85rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pdf-images-result-item {
    min-width: 0;
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem;
    border: 1px solid var(--app-border);
    border-radius: 0.8rem;
    background: #ffffff;
}

.pdf-images-result-preview-wrap {
    width: 92px;
    height: 74px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid #dfe2e9;
    border-radius: 0.45rem;
    background: #eef1f6;
}

.pdf-images-result-preview {
    max-width: 100%;
    max-height: 100%;
    display: block;
}

.pdf-images-result-details {
    min-width: 0;
    display: grid;
    gap: 0.25rem;
}

.pdf-images-result-details strong,
.pdf-images-result-details span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    .pdf-images-result-header {
        grid-template-columns: 1fr;
        padding: 1rem;
    }

    .pdf-images-result-container {
        padding-inline: 0.75rem;
    }

    .pdf-images-result-item {
        grid-template-columns: 72px minmax(0, 1fr);
    }

    .pdf-images-result-preview-wrap {
        width: 72px;
        height: 64px;
    }

    .pdf-images-result-item .btn {
        grid-column: 1 / -1;
        min-height: 44px;
    }
}

/* PDF TO IMAGES WORKSPACE END */

/* SHARED PDF TRANSFORM WORKSPACE START */

.pdf-transform-page-stage {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
}

.pdf-transform-page-card {
    min-width: 0;
}

.pdf-transform-page-card.is-selected {
    border-color: #7a4de8;
    box-shadow: 0 0 0 3px rgba(122, 77, 232, 0.16);
}

.pdf-transform-page-button {
    width: 100%;
    height: 100%;
    display: block;
    padding: 0;
    border: 0;
    border-radius: inherit;
    color: inherit;
    background: transparent;
    text-align: inherit;
}

.pdf-transform-page-button:focus-visible {
    outline: 3px solid rgba(13, 110, 253, 0.42);
    outline-offset: 3px;
}

.pdf-transform-page-card.is-selected .organize-page-position {
    color: #40227f;
    background: #ece3ff;
}

.pdf-transform-action-panel {
    overflow-y: auto;
}

.pdf-transform-fieldset {
    min-width: 0;
    margin: 0 0 1rem;
    padding: 0;
    border: 0;
}

.pdf-transform-fieldset legend {
    margin-bottom: 0.65rem;
    font-size: 0.9rem;
    font-weight: 700;
}

.pdf-transform-two-grid,
.pdf-transform-four-grid {
    display: grid;
    gap: 0.85rem;
    margin-bottom: 1rem;
}

.pdf-transform-two-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pdf-transform-four-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pdf-transform-two-grid label,
.pdf-transform-four-grid label {
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 0.4rem;
    font-size: 0.82rem;
    font-weight: 650;
}

.pdf-transform-action-panel .form-control,
.pdf-transform-action-panel .form-select,
.pdf-transform-action-panel .input-group-text {
    min-height: 44px;
}

.crop-editor-canvas {
    min-width: 0;
    min-height: calc(100dvh - 150px);
    display: grid;
    grid-template-columns: 144px minmax(0, 1fr);
    overflow: hidden;
    background: #edf1f9;
}

.crop-page-rail {
    min-width: 0;
    overflow-y: auto;
    border-right: 1px solid var(--app-border);
    background: #e8edf8;
}

.crop-page-rail .pdf-transform-page-stage {
    grid-template-columns: 1fr;
    gap: 0.75rem;
    padding: 0.75rem;
}

.crop-page-rail .pdf-transform-page-card {
    padding: 0.4rem;
    border-radius: 0.65rem;
}

.crop-page-rail .organize-page-caption {
    display: grid;
    justify-content: center;
    text-align: center;
}

.crop-page-retained {
    display: block;
    color: var(--app-muted);
    font-size: 0.68rem;
    font-weight: 500;
    line-height: 1.25;
}

.crop-live-stage {
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-rows: minmax(480px, 1fr) auto;
    place-items: center;
    gap: 1rem;
    overflow: auto;
    padding: clamp(1rem, 2.5vw, 2rem);
}

.crop-live-page {
    position: relative;
    width: min(100%, 720px);
    height: min(72dvh, 820px);
    min-height: 480px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid #cfd5e2;
    border-radius: 0.35rem;
    background: #dfe5f0;
    box-shadow: 0 1rem 2.5rem rgba(30, 42, 70, 0.14);
}

.crop-active-thumbnail {
    grid-area: 1 / 1;
    border-radius: 0;
}

.crop-visual-layer {
    position: absolute;
    z-index: 3;
    display: none;
    overflow: hidden;
    touch-action: none;
}

.crop-visual-layer.is-ready {
    display: block;
}

.crop-selection {
    position: absolute;
    min-width: 1px;
    min-height: 1px;
    border: 2px solid #1677ff;
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 0 0 9999px rgba(18, 27, 43, 0.52);
    cursor: move;
    outline: 0;
    touch-action: none;
}

.crop-selection:focus-visible {
    border-color: #074fc4;
    box-shadow:
        0 0 0 9999px rgba(18, 27, 43, 0.52),
        0 0 0 4px rgba(13, 110, 253, 0.32);
}

.crop-selection.is-interacting {
    border-color: #005bd7;
}

.crop-handle {
    position: absolute;
    z-index: 2;
    width: 14px;
    height: 14px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #1677ff;
    box-shadow: 0 1px 4px rgba(12, 42, 88, 0.35);
}

.crop-handle-nw,
.crop-handle-n,
.crop-handle-ne { top: 0; }

.crop-handle-sw,
.crop-handle-s,
.crop-handle-se { bottom: 0; }

.crop-handle-nw,
.crop-handle-w,
.crop-handle-sw { left: 0; }

.crop-handle-ne,
.crop-handle-e,
.crop-handle-se { right: 0; }

.crop-handle-n,
.crop-handle-s { left: 50%; }

.crop-handle-w,
.crop-handle-e { top: 50%; }

.crop-handle-nw { cursor: nwse-resize; transform: translate(-50%, -50%); }
.crop-handle-n { cursor: ns-resize; transform: translate(-50%, -50%); }
.crop-handle-ne { cursor: nesw-resize; transform: translate(50%, -50%); }
.crop-handle-e { cursor: ew-resize; transform: translate(50%, -50%); }
.crop-handle-se { cursor: nwse-resize; transform: translate(50%, 50%); }
.crop-handle-s { cursor: ns-resize; transform: translate(-50%, 50%); }
.crop-handle-sw { cursor: nesw-resize; transform: translate(-50%, 50%); }
.crop-handle-w { cursor: ew-resize; transform: translate(-50%, -50%); }

.crop-page-navigation {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.35rem 0.55rem;
    border: 1px solid #d6dbe6;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 0.35rem 1rem rgba(30, 42, 70, 0.12);
    font-size: 0.9rem;
    font-weight: 650;
}

.crop-page-navigation .btn {
    width: 40px;
    height: 40px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    border-radius: 50%;
}

.crop-scope-options {
    display: grid;
    gap: 0.65rem;
    margin-bottom: 1rem;
}

.crop-scope-options label {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.9rem;
    font-weight: 650;
}

.crop-visible-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
    padding: 0.75rem;
    border: 1px solid #d5dce9;
    border-radius: 0.65rem;
    background: #f7f9fc;
    font-size: 0.82rem;
}

.crop-visible-summary strong {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.crop-reset-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.7rem;
}

.crop-reset-actions .btn {
    min-height: 40px;
}

.watermark-editor-canvas {
    min-width: 0;
    min-height: calc(100dvh - 150px);
    display: grid;
    grid-template-columns: 144px minmax(0, 1fr);
    overflow: hidden;
    background: #edf1f9;
}

.watermark-page-rail {
    min-width: 0;
    overflow-y: auto;
    border-right: 1px solid var(--app-border);
    background: #e8edf8;
}

.watermark-page-rail .pdf-transform-page-stage {
    grid-template-columns: 1fr;
    gap: 0.75rem;
    padding: 0.75rem;
}

.watermark-page-rail .pdf-transform-page-card {
    padding: 0.4rem;
    border-radius: 0.65rem;
}

.watermark-page-rail .organize-page-caption {
    justify-content: center;
}

.watermark-live-stage {
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-rows: minmax(480px, 1fr) auto;
    place-items: center;
    gap: 1rem;
    overflow: auto;
    padding: clamp(1rem, 2.5vw, 2rem);
}

.watermark-live-page {
    position: relative;
    width: min(100%, 720px);
    height: min(72dvh, 820px);
    min-height: 480px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid #cfd5e2;
    border-radius: 0.35rem;
    background: #dfe5f0;
    box-shadow: 0 1rem 2.5rem rgba(30, 42, 70, 0.14);
}

.watermark-active-thumbnail,
.watermark-live-text {
    grid-area: 1 / 1;
}

.watermark-active-thumbnail {
    border-radius: 0;
}

.watermark-live-text {
    position: absolute;
    z-index: 3;
    max-width: 86%;
    margin: 0;
    overflow: hidden;
    font-weight: 700;
    line-height: 1.05;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
    transform-origin: center;
    user-select: none;
}

.watermark-page-navigation {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.35rem 0.55rem;
    border: 1px solid #d6dbe6;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 0.35rem 1rem rgba(30, 42, 70, 0.12);
    font-size: 0.9rem;
    font-weight: 650;
}

.watermark-page-navigation .btn {
    width: 40px;
    height: 40px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    border-radius: 50%;
}

.watermark-control-stack {
    display: grid;
    gap: 1rem;
}

.watermark-color-input {
    width: 100%;
    padding: 0.35rem;
}

.watermark-range-label {
    display: grid;
    gap: 0.4rem;
    font-size: 0.82rem;
    font-weight: 650;
}

.watermark-range-label > span {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.watermark-range-label output {
    color: var(--app-muted);
    font-variant-numeric: tabular-nums;
}

.pdf-signature-input {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.15rem;
    font-style: italic;
}

.pdf-form-fields {
    display: grid;
    gap: 1rem;
    max-height: min(48dvh, 520px);
    overflow-y: auto;
    margin-bottom: 1rem;
    padding-right: 0.35rem;
    scrollbar-gutter: stable;
}

.pdf-form-field {
    min-width: 0;
    padding: 0.85rem;
    border: 1px solid #dfe2e9;
    border-radius: 0.65rem;
    background: #fafbfe;
}

.pdf-form-field.is-unsupported {
    border-style: dashed;
    background: #f4f4f6;
}

.pdf-form-checkbox {
    width: 1.35rem;
    height: 1.35rem;
}

.pdf-transform-result {
    min-height: calc(100dvh - 72px);
    display: grid;
    place-items: center;
    padding: 2rem 1rem;
    background:
        radial-gradient(circle at 50% 10%, rgba(122, 77, 232, 0.12), transparent 34rem),
        #f5f5fa;
}

.pdf-transform-result-card {
    width: min(100%, 650px);
    padding: clamp(1.5rem, 5vw, 3rem);
    border: 1px solid var(--app-border);
    border-radius: 1rem;
    background: #ffffff;
    box-shadow: 0 1.5rem 4rem rgba(32, 33, 38, 0.11);
}

/* VISUAL SIGNATURE WORKSPACE START */

.sign-pdf-shell {
    min-height: calc(100dvh - 72px);
    background: #f4f5f8;
}

.sign-workspace {
    min-height: calc(100dvh - 72px);
}

.sign-workspace-toolbar {
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--app-border);
    background: #fff;
}

.sign-workspace-grid {
    min-height: calc(100dvh - 148px);
    display: grid;
    grid-template-columns: 150px minmax(360px, 1fr) 340px;
    align-items: start;
}

.sign-page-rail {
    position: sticky;
    top: 72px;
    max-height: calc(100dvh - 72px);
    overflow-y: auto;
    padding: 1rem 0.75rem;
    border-right: 1px solid var(--app-border);
    background: #eef1f7;
}

.sign-page-rail ol {
    display: grid;
    gap: 0.8rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sign-page-rail button {
    width: 100%;
    display: grid;
    gap: 0.45rem;
    padding: 0.5rem;
    border: 2px solid transparent;
    border-radius: 0.65rem;
    background: transparent;
    color: var(--app-ink);
    font-size: 0.75rem;
}

.sign-page-rail button[aria-current="page"] {
    border-color: #0d6efd;
    background: #e8f1ff;
}

.sign-page-rail [data-page-preview] {
    min-height: 126px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 0.35rem;
    background: #fff;
}

.sign-page-rail [data-page-preview] canvas {
    max-width: 100%;
    max-height: 145px;
}

.sign-document-area {
    min-width: 0;
    padding: clamp(1rem, 3vw, 2rem);
}

.sign-page-stage {
    position: relative;
    max-width: 100%;
    margin-inline: auto;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 0.6rem 2rem rgba(32, 33, 38, 0.18);
}

.sign-page-stage > canvas {
    display: block;
    max-width: 100%;
}

.sign-mark-layer {
    position: absolute;
    inset: 0;
    touch-action: none;
}

.sign-mark {
    position: absolute;
    min-width: 44px;
    min-height: 28px;
    border: 2px solid #0d6efd;
    background: rgba(255, 255, 255, 0.3);
    cursor: move;
    touch-action: none;
}

.sign-mark:focus-visible {
    outline: 3px solid rgba(13, 110, 253, 0.35);
    outline-offset: 3px;
}

.sign-mark img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: fill;
    pointer-events: none;
}

.sign-mark-delete {
    position: absolute;
    top: -0.8rem;
    right: -0.8rem;
    width: 1.7rem;
    height: 1.7rem;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #dc3545;
    color: #fff;
    font-size: 0.75rem;
}

.sign-mark-resize {
    position: absolute;
    right: -0.45rem;
    bottom: -0.45rem;
    width: 1rem;
    height: 1rem;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #0d6efd;
    box-shadow: 0 0 0 1px #0d6efd;
    cursor: nwse-resize;
}

.sign-options-panel {
    position: sticky;
    top: 72px;
    max-height: calc(100dvh - 72px);
    overflow-y: auto;
    padding: 1.25rem;
    border-left: 1px solid var(--app-border);
    background: #fff;
}

.sign-editor-dialog {
    width: min(94vw, 820px);
    max-height: 92dvh;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 1rem;
    box-shadow: 0 1.5rem 5rem rgba(20, 23, 31, 0.35);
}

.sign-editor-dialog::backdrop {
    background: rgba(20, 23, 31, 0.68);
}

.sign-editor-card {
    max-height: 92dvh;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
}

.sign-editor-header,
.sign-editor-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--app-border);
}

.sign-editor-footer {
    justify-content: flex-end;
    border-top: 1px solid var(--app-border);
    border-bottom: 0;
}

.sign-editor-tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-bottom: 1px solid var(--app-border);
}

.sign-editor-tabs button {
    min-height: 48px;
    border: 0;
    border-bottom: 3px solid transparent;
    background: #fff;
    font-weight: 700;
}

.sign-editor-tabs button[aria-selected="true"] {
    border-color: #0d6efd;
    color: #0d6efd;
}

.sign-editor-body {
    overflow-y: auto;
    padding: 1.25rem;
}

.sign-style-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
}

.sign-style-grid button {
    min-height: 58px;
    overflow: hidden;
    border: 1px solid var(--app-border);
    border-radius: 0.65rem;
    background: #fff;
    font-size: 1.45rem;
}

.sign-style-grid button:nth-child(1) { font-family: cursive; font-style: italic; }
.sign-style-grid button:nth-child(2) { font-family: Georgia, serif; font-style: italic; }
.sign-style-grid button:nth-child(3) { font-family: "Trebuchet MS", sans-serif; font-style: italic; }
.sign-style-grid button:nth-child(4) { font-family: "Segoe UI", sans-serif; }

.sign-style-grid button[aria-pressed="true"] {
    border-color: #0d6efd;
    box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.15);
}

.sign-draw-canvas,
[data-mobile-canvas] {
    width: 100%;
    display: block;
    border: 2px dashed #9aabc3;
    border-radius: 0.75rem;
    background: #fff;
    touch-action: none;
}

.sign-upload-box {
    min-height: 190px;
    display: grid;
    place-items: center;
    gap: 0.5rem;
    padding: 1.5rem;
    border: 2px dashed #9aabc3;
    border-radius: 0.75rem;
    background: #f7f9fc;
    text-align: center;
    cursor: pointer;
}

.sign-upload-box .bi {
    color: #0d6efd;
    font-size: 2rem;
}

.sign-color-choices {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0;
    border: 0;
}

.sign-color-choices legend {
    width: auto;
    margin: 0 0.25rem 0 0;
    font-size: 0.9rem;
    font-weight: 700;
}

.sign-color-choices button {
    width: 2rem;
    height: 2rem;
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px #7a8291;
}

.sign-color-choices button[aria-pressed="true"] {
    box-shadow: 0 0 0 3px #0d6efd;
}

.sign-editor-preview {
    min-height: 100px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    border: 1px solid var(--app-border);
    border-radius: 0.75rem;
    background: #f7f9fc;
}

.sign-editor-preview img {
    max-width: 100%;
    max-height: 90px;
    justify-self: center;
}

.sign-mobile-pairing {
    display: grid;
    justify-items: center;
    gap: 0.5rem;
    text-align: center;
}

.sign-mobile-pairing img {
    width: min(100%, 232px);
    height: auto;
    border: 0.75rem solid #fff;
    box-shadow: 0 0 0 1px var(--app-border);
}

.mobile-signature-page {
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: #f1f4f9;
}

.mobile-signature-card {
    width: min(100%, 700px);
    padding: clamp(1.25rem, 5vw, 2.5rem);
    border: 1px solid var(--app-border);
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 1rem 3rem rgba(32, 33, 38, 0.12);
}

.mobile-brand {
    display: inline-flex;
    align-items: center;
}

.mobile-brand-logo {
    display: block;
    width: auto;
    height: 2.55rem;
    object-fit: contain;
}

@media (max-width: 1199.98px) {
    .sign-workspace-grid {
        grid-template-columns: 130px minmax(320px, 1fr);
    }

    .sign-options-panel {
        position: static;
        grid-column: 1 / -1;
        max-height: none;
        border-top: 1px solid var(--app-border);
        border-left: 0;
    }
}

@media (max-width: 767.98px) {
    .sign-workspace-toolbar {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .sign-workspace-grid {
        display: block;
    }

    .sign-page-rail {
        position: static;
        max-height: none;
        overflow-x: auto;
        border-right: 0;
        border-bottom: 1px solid var(--app-border);
    }

    .sign-page-rail ol {
        width: max-content;
        display: flex;
    }

    .sign-page-rail li {
        width: 104px;
    }

    .sign-page-rail [data-page-preview] {
        min-height: 116px;
    }

    .sign-document-area {
        padding: 1rem 0.5rem;
    }

    .sign-editor-tabs button {
        min-width: 0;
        font-size: 0.85rem;
    }

    .sign-editor-header {
        align-items: flex-start;
    }
}

/* VISUAL SIGNATURE WORKSPACE END */

@media (max-width: 575.98px) {
    .pdf-transform-two-grid,
    .pdf-transform-four-grid {
        grid-template-columns: 1fr;
    }

    .pdf-transform-page-stage {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .crop-editor-canvas {
        min-height: auto;
        grid-template-columns: 1fr;
    }

    .crop-page-rail {
        overflow-x: auto;
        overflow-y: hidden;
        border-right: 0;
        border-bottom: 1px solid var(--app-border);
    }

    .crop-page-rail .pdf-transform-page-stage {
        width: max-content;
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 104px;
    }

    .crop-live-stage {
        grid-template-rows: minmax(390px, 62dvh) auto;
        padding-inline: 0.75rem;
    }

    .crop-live-page {
        min-height: 390px;
        height: 62dvh;
    }

    .watermark-editor-canvas {
        min-height: auto;
        grid-template-columns: 1fr;
    }

    .watermark-page-rail {
        overflow-x: auto;
        overflow-y: hidden;
        border-right: 0;
        border-bottom: 1px solid var(--app-border);
    }

    .watermark-page-rail .pdf-transform-page-stage {
        width: max-content;
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 104px;
    }

    .watermark-live-stage {
        grid-template-rows: minmax(390px, 62dvh) auto;
        padding-inline: 0.75rem;
    }

    .watermark-live-page {
        min-height: 390px;
        height: 62dvh;
    }
}

/* SHARED PDF TRANSFORM WORKSPACE END */

/* TEXT CONVERSION WORKSPACES START */

.text-conversion-workspace {
    min-height: calc(100dvh - 72px);
}

.text-conversion-main {
    min-width: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
}

.text-editor-wrap {
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(320px, 1fr) auto;
    padding: clamp(1rem, 3vw, 2rem);
}

.text-conversion-editor,
.text-conversion-preview {
    width: 100%;
    min-width: 0;
    resize: vertical;
    font-family: "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
    line-height: 1.55;
}

.text-conversion-editor {
    min-height: min(62dvh, 760px);
}

.text-conversion-preview {
    min-height: min(42dvh, 480px);
    background: #f8f9fc;
}

.text-conversion-editor-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding-top: 0.6rem;
    color: var(--app-muted);
    font-size: 0.82rem;
}

.text-conversion-action-panel {
    overflow-y: auto;
}

.text-conversion-action-panel .form-control,
.text-conversion-action-panel .form-select,
.text-conversion-action-panel .input-group-text {
    min-height: 44px;
}

.text-conversion-options-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
    margin-bottom: 1rem;
}

.text-conversion-options-grid label {
    min-width: 0;
    display: grid;
    gap: 0.4rem;
    font-size: 0.84rem;
    font-weight: 650;
}

.text-conversion-result {
    min-height: calc(100dvh - 72px);
    display: grid;
    place-items: center;
    padding: 2rem 1rem;
    background:
        radial-gradient(circle at 50% 10%, rgba(13, 110, 253, 0.12), transparent 34rem),
        #f5f5fa;
}

.text-conversion-result-card {
    width: min(100%, 760px);
    padding: clamp(1.25rem, 5vw, 3rem);
    border: 1px solid var(--app-border);
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 1.5rem 4rem rgba(32, 33, 38, 0.11);
}

.text-extraction-page-stage {
    grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
}

.text-extraction-page-card {
    cursor: default;
}

@media (max-width: 991.98px) {
    .text-conversion-workspace {
        height: auto;
    }

    .text-conversion-action-panel {
        border-top: 1px solid var(--app-border);
        border-left: 0;
    }
}

@media (max-width: 575.98px) {
    .text-editor-wrap,
    .text-conversion-action-panel {
        padding-inline: 0.75rem;
    }

    .text-conversion-options-grid {
        grid-template-columns: 1fr;
    }

    .text-extraction-page-stage {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding-inline: 0.75rem;
    }

    .text-conversion-result {
        padding-inline: 0.75rem;
    }
}

/* TEXT CONVERSION WORKSPACES END */

/* IMAGE SIZE WORKSPACE */

.image-resize-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem);
    min-height: calc(100vh - 4.5rem);
    background: var(--app-surface-muted);
    overflow: hidden;
}

.merge-page-rotate-button {
    position: absolute;
    top: 0.65rem;
    right: 0.65rem;
    z-index: 2;
    width: 2.25rem;
    height: 2.25rem;
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--app-border);
    box-shadow: 0 0.2rem 0.55rem rgba(32, 33, 38, 0.16);
}

.image-resize-preview-card {
    min-width: 0;
    background:
        radial-gradient(circle at 20% 10%, rgb(255 231 226 / 60%), transparent 28rem),
        radial-gradient(circle at 80% 80%, rgb(235 231 255 / 75%), transparent 30rem),
        #f8f9fc;
}

.image-resize-preview-wrap {
    display: grid;
    min-height: 32rem;
    padding: 2rem;
    place-items: center;
    overflow: hidden;
}

.image-resize-preview-wrap img,
.image-resize-result-preview {
    display: block;
    max-width: 100%;
    max-height: 60vh;
    border-radius: 0.75rem;
    box-shadow: 0 1rem 2.5rem rgb(31 41 55 / 14%);
    object-fit: contain;
}

.image-resize-options {
    padding: 2rem;
    border-left: 1px solid var(--app-border);
    background: #fff;
    box-shadow: -0.75rem 0 2rem rgb(31 41 55 / 5%);
}

.image-resize-options .input-group-text {
    min-width: 3.5rem;
    justify-content: center;
    font-weight: 700;
}

.image-resize-modes {
    display: grid;
    gap: 0.65rem;
    margin: 1.25rem 0;
}

.image-resize-mode {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 0.8rem;
    padding: 0.85rem 0.9rem;
    border: 1px solid var(--app-border);
    border-radius: 0.8rem;
    background: #fff;
    color: var(--app-text);
    text-align: left;
    transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

.image-resize-mode:hover,
.image-resize-mode:focus-visible {
    border-color: #86b7fe;
}

.image-resize-mode.active {
    border-color: #0d6efd;
    background: #f1f6ff;
    box-shadow: 0 0 0 0.2rem rgb(13 110 253 / 10%);
}

.image-resize-mode > i {
    display: grid;
    width: 2.35rem;
    height: 2.35rem;
    flex: 0 0 auto;
    border-radius: 0.65rem;
    background: #eaf2ff;
    color: #0d6efd;
    font-size: 1.15rem;
    place-items: center;
}

.image-resize-mode span,
.image-resize-mode small {
    display: block;
}

.image-resize-mode small {
    margin-top: 0.1rem;
    color: var(--app-muted);
}

.image-resize-mode-panel {
    margin-bottom: 1.25rem;
    padding: 1rem;
    border: 1px solid var(--app-border);
    border-radius: 0.8rem;
    background: #fafbfe;
}

.image-resize-smart-note {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.image-resize-smart-note > i {
    color: #198754;
    font-size: 1.35rem;
}

.image-resize-smart-note strong,
.image-resize-smart-note span {
    display: block;
}

.image-resize-smart-note span {
    margin-top: 0.25rem;
    color: var(--app-muted);
    font-size: 0.88rem;
}

.image-resize-output-note {
    margin: 0 0 1rem;
    color: var(--app-muted);
    font-size: 0.8rem;
}

.image-resize-quick-label {
    margin-bottom: 0.55rem;
    color: var(--app-muted);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.image-resize-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.image-resize-presets .btn {
    min-width: 4.25rem;
    border-radius: 999px;
}

.image-resize-presets .btn.active {
    border-color: #0d6efd;
    background: #0d6efd;
    color: #fff;
}

.image-resize-result {
    display: grid;
    min-height: calc(100vh - 4.5rem);
    padding: 2rem 1rem;
    background: var(--app-surface-muted);
    place-items: center;
}

.image-resize-result-card {
    width: min(44rem, 100%);
    padding: 2rem;
    border: 1px solid var(--app-border);
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 1rem 2.5rem rgb(31 41 55 / 10%);
}

.image-resize-result-preview {
    margin: 1.5rem auto 0;
}

@media (max-width: 991.98px) {
    .image-resize-workspace {
        grid-template-columns: 1fr;
    }

    .image-resize-options {
        border-top: 1px solid var(--app-border);
        border-left: 0;
    }

    .image-resize-preview-wrap {
        min-height: 20rem;
    }
}

@media (max-width: 575.98px) {
    .image-resize-preview-wrap,
    .image-resize-options,
    .image-resize-result-card {
        padding: 1rem;
    }
}

/* IMAGE SIZE WORKSPACE END */

/* ADVANCED BROWSER TOOLS START */

.advanced-tool-workspace,
.advanced-html-editor {
    min-height: calc(100vh - 4.5rem);
    background: var(--app-surface-muted);
}

.advanced-tool-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 25rem);
    gap: 1.5rem;
    align-items: start;
}

.advanced-tool-file-card,
.advanced-tool-options,
.advanced-compare-files article,
.advanced-tool-result-card {
    border: 1px solid var(--app-border);
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 0.75rem 2rem rgb(31 41 55 / 7%);
}

.advanced-tool-file-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    min-height: 12rem;
    padding: 1.5rem;
}

.advanced-tool-file-icon {
    display: grid;
    width: 4rem;
    height: 4rem;
    border-radius: 1rem;
    background: #fee9e5;
    color: #e25343;
    font-size: 2rem;
    place-items: center;
}

.advanced-tool-options {
    width: 100%;
    max-width: 46rem;
    padding: 1.5rem;
}

.advanced-tool-result {
    display: grid;
    min-height: calc(100vh - 4.5rem);
    padding: 2rem 1rem;
    background: var(--app-surface-muted);
    place-items: center;
}

.advanced-tool-result-card {
    width: min(46rem, 100%);
    padding: 2rem;
}

.advanced-compare-files {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
}

.advanced-compare-files article {
    min-width: 0;
    padding: 1.25rem;
}

.advanced-compare-files span,
.advanced-compare-files strong {
    display: block;
}

.advanced-compare-files span {
    margin-bottom: 0.4rem;
    color: var(--app-muted);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
}

.advanced-compare-files strong {
    overflow-wrap: anywhere;
}

.advanced-report-preview,
.advanced-html-source {
    min-height: 18rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

@media (max-width: 767.98px) {
    .advanced-tool-grid,
    .advanced-compare-files {
        grid-template-columns: 1fr;
    }

    .advanced-compare-files > i {
        transform: rotate(90deg);
        text-align: center;
    }

    .advanced-tool-file-card {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .advanced-tool-file-card .btn {
        grid-column: 1 / -1;
    }

    .advanced-tool-options,
    .advanced-tool-result-card {
        padding: 1rem;
    }
}

/* ADVANCED BROWSER TOOLS END */