/* =============================================================================
   Design system
   Hand-written CSS, no build step. Everything is driven by the custom
   properties below, so a rebrand is a change to this one block.
   ========================================================================== */

:root {
    /* Brand */
    --brand: #4f46e5;
    --brand-dark: #4338ca;
    --brand-light: #eef2ff;

    /* Neutrals */
    --ink: #0f172a;
    --ink-2: #334155;
    --ink-3: #64748b;
    --ink-4: #94a3b8;
    --line: #e2e8f0;
    --line-strong: #cbd5e1;
    --surface: #ffffff;
    --canvas: #f8fafc;
    --canvas-2: #f1f5f9;

    /* Feedback */
    --danger: #b91c1c;
    --danger-bg: #fef2f2;
    --danger-line: #fecaca;
    --success: #047857;

    /* Accent families, used by [data-accent] */
    --violet: #7c3aed;
    --violet-bg: #f5f3ff;
    --emerald: #059669;
    --emerald-bg: #ecfdf5;
    --sky: #0284c7;
    --sky-bg: #f0f9ff;
    --amber: #d97706;
    --amber-bg: #fffbeb;
    --rose: #e11d48;
    --rose-bg: #fff1f2;
    --teal: #0d9488;
    --teal-bg: #f0fdfa;
    --indigo: #4f46e5;
    --indigo-bg: #eef2ff;

    /* Type */
    --font: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.375rem;
    --text-2xl: 1.75rem;
    --text-3xl: 2.25rem;

    /* Space and shape */
    --gap: 1rem;
    --radius-sm: 0.5rem;
    --radius: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.25rem;
    --container: 78rem;

    --shadow-sm: 0 1px 2px rgb(15 23 42 / 0.06);
    --shadow: 0 4px 12px rgb(15 23 42 / 0.07);
    --shadow-lg: 0 12px 32px rgb(15 23 42 / 0.12);

    --header-height: 4rem;
}

/* -----------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-height) + 1rem);
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: var(--font);
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--ink);
    background: var(--canvas);
    -webkit-font-smoothing: antialiased;
}

img,
svg {
    display: block;
    max-width: 100%;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
    background: none;
    border: 0;
}

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

ul,
ol {
    list-style: none;
    padding: 0;
}

h1,
h2,
h3 {
    line-height: 1.2;
    letter-spacing: -0.02em;
    font-weight: 700;
}

:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: 4px;
}

[hidden] {
    display: none !important;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* -----------------------------------------------------------------------------
   Layout helpers
   -------------------------------------------------------------------------- */

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: 1rem;
}

.container--narrow {
    max-width: 46rem;
}

.container--wide {
    max-width: 72rem;
}

/* Wider than the site's normal 78rem cap, for the homepage tools grid
   only - not truly edge-to-edge (that read as too wide), just roomier. */
.container--full {
    max-width: 96rem;
}

.main {
    flex: 1;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.icon {
    width: 1.25rem;
    height: 1.25rem;
    flex: none;
}

.icon--sm {
    width: 1rem;
    height: 1rem;
}

.icon--xs {
    width: 0.875rem;
    height: 0.875rem;
}

.icon--lg {
    width: 1.75rem;
    height: 1.75rem;
}

/* Accent chips: one rule, coloured by the data attribute. */
.chip {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius);
    background: var(--canvas-2);
    color: var(--ink-2);
}

.chip--sm {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.375rem;
}

.chip--lg {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: var(--radius-lg);
}

[data-accent='violet'] {
    background: var(--violet-bg);
    color: var(--violet);
}
[data-accent='emerald'] {
    background: var(--emerald-bg);
    color: var(--emerald);
}
[data-accent='sky'] {
    background: var(--sky-bg);
    color: var(--sky);
}
[data-accent='amber'] {
    background: var(--amber-bg);
    color: var(--amber);
}
[data-accent='rose'] {
    background: var(--rose-bg);
    color: var(--rose);
}
[data-accent='teal'] {
    background: var(--teal-bg);
    color: var(--teal);
}
[data-accent='indigo'] {
    background: var(--indigo-bg);
    color: var(--indigo);
}

/* -----------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.7rem 1.25rem;
    border-radius: var(--radius);
    font-size: var(--text-sm);
    font-weight: 600;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn--primary {
    background: var(--brand);
    color: #fff;
    box-shadow: var(--shadow-sm);
}

.btn--primary:hover {
    background: var(--brand-dark);
}

.btn--dark {
    background: var(--ink);
    color: #fff;
}

.btn--dark:hover {
    background: var(--ink-2);
}

.btn--ghost {
    border: 1px solid var(--line-strong);
    background: var(--surface);
    color: var(--ink-2);
}

.btn--ghost:hover {
    border-color: var(--ink-4);
    color: var(--ink);
}

.btn--block {
    width: 100%;
    padding-block: 0.9rem;
}

.btn--lg {
    padding: 0.85rem 1.5rem;
}

/* -----------------------------------------------------------------------------
   Header and navigation
   -------------------------------------------------------------------------- */

.header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgb(255 255 255 / 0.92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
}

.nav {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    height: var(--header-height);
}

.brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: none;
    font-size: var(--text-lg);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.brand__mark {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-sm);
    background: var(--brand);
    color: #fff;
}

.brand__logo {
    max-height: 2.25rem;
    width: auto;
}

.nav__link {
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--ink-3);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.nav__link:hover {
    background: var(--canvas-2);
    color: var(--ink);
}

.nav__end {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-inline-start: auto;
}

/* Log in / Sign up / account menu: on phones these live in the left pages
   sidebar instead, so the top bar keeps only its toggles and the logo. */
.nav__auth {
    display: none;
}

@media (min-width: 48rem) {
    .nav__auth {
        display: inline-flex;
    }
}

.nav__toggle {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-sm);
    color: var(--ink-3);
}

.nav__toggle:hover {
    background: var(--canvas-2);
}

.nav__trigger {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--ink-3);
}

.nav__trigger:hover,
.nav__trigger[aria-expanded='true'] {
    background: var(--canvas-2);
    color: var(--ink);
}

.nav__chevron {
    transition: transform 0.2s ease;
}

[aria-expanded='true'] > .nav__chevron {
    transform: rotate(180deg);
}

/* Mega menu ---------------------------------------------------------------- */

.megamenu {
    display: none;
}

.megamenu__panel {
    position: fixed;
    inset-inline: 1rem;
    top: calc(var(--header-height) + 0.25rem);
    z-index: 50;
    max-width: var(--container);
    margin-inline: auto;
    padding: 1.5rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    max-height: calc(100vh - var(--header-height) - 2rem);
    overflow-y: auto;
}

.megamenu__panel:not([hidden]) {
    animation: panel-in 0.16s ease-out;
}

@keyframes panel-in {
    from {
        opacity: 0;
        transform: translateY(-0.35rem);
    }
}

.megamenu__grid {
    display: grid;
    gap: 1.25rem 2rem;
    grid-template-columns: 1fr;
}

.megamenu__heading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-4);
}

.megamenu__heading a:hover {
    text-decoration: underline;
}

.megamenu__link {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.4rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--ink-2);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.megamenu__link:hover {
    background: var(--canvas);
    color: var(--ink);
}

.megamenu__link .icon {
    color: var(--ink-4);
}

.megamenu__link:hover .icon {
    color: currentColor;
}

/* Mobile "pages" sidebar (left toggle) - same off-canvas shell as the
   tools sidebar, just a plain link list instead of the category grid. */
.pagesnav__list {
    display: grid;
    align-content: start;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pagesnav__list--account {
    padding-top: 1.25rem;
    border-top: 1px solid var(--line);
}

.pagesnav__link {
    display: block;
    width: 100%;
    padding: 0.625rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--ink-2);
    text-align: start;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.pagesnav__link--button {
    border: none;
    background: none;
    font: inherit;
    cursor: pointer;
}

.pagesnav__link:hover {
    background: var(--canvas-2);
    color: var(--ink);
}

/* Mobile panel - an off-canvas sidebar (slides in from the inline-start
   edge) with its own backdrop, not a dropdown under the header. ------- */

.mobilenav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(15, 23, 42, 0.5);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.mobilenav-backdrop.is-open {
    opacity: 1;
}

.mobilenav {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    z-index: 61;
    display: flex;
    flex-direction: column;
    width: min(85vw, 22rem);
    background: var(--surface);
    box-shadow: var(--shadow);
    transform: translateX(-100%);
    transition: transform 0.25s ease;
}

.mobilenav.is-open {
    transform: translateX(0);
}

[dir='rtl'] .mobilenav {
    transform: translateX(100%);
}

[dir='rtl'] .mobilenav.is-open {
    transform: translateX(0);
}

.mobilenav__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: none;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--line);
}

.mobilenav__close {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-sm);
    color: var(--ink-3);
}

.mobilenav__close:hover {
    background: var(--canvas-2);
    color: var(--ink);
}

.mobilenav__inner {
    display: grid;
    align-content: start;
    gap: 1.25rem;
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem;
}

/* Scroll-locks the page behind the open sidebar (toggled on <html> by
   app.js, not CSS-only, since it must exactly track the sidebar's own
   open/closed state). */
html.nav-locked {
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .mobilenav,
    .mobilenav-backdrop {
        transition: none;
    }
}

/* -----------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
    position: relative;
    overflow: hidden;
    background: var(--canvas);
    text-align: center;
}

.hero::before {
    content: '';
    position: absolute;
    inset-inline: 0;
    top: -10rem;
    height: 20rem;
    background: radial-gradient(ellipse at top, var(--brand-light), transparent 70%);
    pointer-events: none;
}

.hero__inner {
    position: relative;
    max-width: 52rem;
    margin-inline: auto;
    /* The same 1.5rem under the navbar as every other page's title. */
    padding-top: 1.5rem;
}

/* Full tools-grid width (see hero__tabs-wrap's markup comment), not the
   narrower hero__inner prose width above it. */
.hero__tabs-wrap {
    position: relative;
    padding-bottom: 1.5rem;
}

.hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--ink-3);
}

.hero__badge .icon {
    color: var(--brand);
}

.hero__title {
    margin-top: 1.5rem;
    font-size: var(--text-3xl);
}

.hero__lede {
    max-width: 38rem;
    margin: 1.25rem auto 0;
    font-size: var(--text-lg);
    color: var(--ink-3);
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 2rem;
}

.hero__tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 2rem;
}

@media (min-width: 48rem) {
    .hero__tabs {
        flex-wrap: wrap;
        justify-content: center;
        overflow-x: visible;
    }
}

.hero__tab {
    flex: none;
    padding: 0.5rem 1rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink-2);
    font-size: var(--text-sm);
    font-weight: 600;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.hero__tab:hover {
    border-color: var(--line-strong);
    color: var(--ink);
}

.hero__tab.is-active {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
}

/* -----------------------------------------------------------------------------
   Tool grid
   -------------------------------------------------------------------------- */

.section {
    padding-block: 4rem;
}

/* Tool pages start right under the navbar - the title is the first thing
   there, so the usual 4rem section gap (plus the tool-head's own margin)
   just pushed the tool down. */
.section--tool {
    padding-top: 1.5rem;
}

.section--tool .tool-head {
    margin-top: 0;
}

/* Same for every other page (blog, posts, pages, pricing, account...): the
   page's first section starts 1.5rem under the navbar, not 4rem. Later
   sections keep the full 4rem between them. */
.main > .section:first-child {
    padding-top: 1.5rem;
}

/* A page title that opens its block needs no gap above it. */
.main > .section:first-child > h1:first-of-type,
.main > .section:first-child > .prose:first-child,
.main > .section:first-child > .prose:first-child > h1:first-child,
.hero__title:first-child {
    margin-top: 0;
}

/* Blog post: the article sits just under its "Blog / title" breadcrumb. */
.breadcrumb + .prose {
    margin-top: 1rem;
}

.section__title {
    font-size: var(--text-2xl);
}

.section__lede {
    margin-top: 0.5rem;
    color: var(--ink-3);
}

.group {
    margin-top: 3rem;
}

.group__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.group__title {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: var(--text-xl);
}

.group__title a:hover {
    text-decoration: underline;
}

.group__view-all {
    flex: none;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--brand);
    white-space: nowrap;
}

/* How it works -------------------------------------------------------------- */

.how-it-works__head {
    text-align: center;
    max-width: 36rem;
    margin-inline: auto;
}

.how-it-works {
    display: grid;
    gap: 2rem;
    margin-top: 2.5rem;
    text-align: center;
}

.how-it-works__step {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.how-it-works__step .chip {
    margin-bottom: 1rem;
}

.how-it-works__title {
    font-size: var(--text-lg);
}

.how-it-works__desc {
    margin-top: 0.375rem;
    color: var(--ink-3);
}

@media (min-width: 48rem) {
    .how-it-works {
        grid-template-columns: repeat(3, 1fr);
    }
}

.group__view-all:hover {
    text-decoration: underline;
}

.cards {
    display: grid;
    gap: 1rem;
    margin-top: 1.25rem;
    grid-template-columns: 1fr;
}

.card {
    display: block;
    padding: 1.25rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.card:hover {
    border-color: var(--line-strong);
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}

.card__title {
    display: block;
    margin-top: 1rem;
    font-weight: 600;
}

.card__desc {
    display: block;
    margin-top: 0.375rem;
    font-size: var(--text-sm);
    color: var(--ink-3);
}

/* -----------------------------------------------------------------------------
   Homepage "Get more with Premium" promo band
   -------------------------------------------------------------------------- */

.premium-promo {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: center;
    padding: 2.5rem;
    background: var(--amber-bg);
    border: 1px solid var(--amber);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.premium-promo__text {
    flex: 1;
    min-width: 0;
}

.premium-promo__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    background: var(--surface);
    color: var(--amber);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.premium-promo__title {
    margin-top: 0.75rem;
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--ink);
}

.premium-promo__features {
    margin-top: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.premium-promo__features li {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    color: var(--ink-2);
}

.premium-promo__features .icon {
    flex: none;
    color: var(--amber);
}

.premium-promo__cta {
    margin-top: 1.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--amber);
}

.premium-promo__cta:hover {
    background: #b45309;
}

.premium-promo__visual {
    position: relative;
    display: none;
    flex: none;
    width: 10rem;
    height: 10rem;
    align-items: center;
    justify-content: center;
}

.premium-promo__ring {
    position: relative;
    display: grid;
    place-items: center;
    width: 6.5rem;
    height: 6.5rem;
    border-radius: 50%;
    background: var(--surface);
    box-shadow: var(--shadow);
    z-index: 1;
}

.premium-promo__icon {
    width: 3rem;
    height: 3rem;
    color: var(--amber);
    fill: var(--amber-bg);
}

.premium-promo__orb {
    position: absolute;
    border-radius: 50%;
    opacity: 0.7;
}

.premium-promo__orb--1 {
    top: -0.5rem;
    right: -0.5rem;
    width: 4rem;
    height: 4rem;
    background: #fde68a;
}

.premium-promo__orb--2 {
    bottom: -0.75rem;
    left: -0.25rem;
    width: 3rem;
    height: 3rem;
    background: #fbbf24;
}

@media (min-width: 48rem) {
    .premium-promo {
        flex-direction: row;
        text-align: start;
        padding: 3rem;
    }

    .premium-promo__visual {
        display: flex;
    }
}

/* -----------------------------------------------------------------------------
   Homepage "Recent posts" - a blog-flavoured variant of .cards/.card
   -------------------------------------------------------------------------- */

.blog-cards {
    display: grid;
    gap: 1.25rem;
    margin-top: 1.25rem;
    grid-template-columns: 1fr;
}

.blog-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.blog-card:hover {
    border-color: var(--line-strong);
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}

.blog-card__cover {
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 9;
    background: var(--canvas-2);
    color: var(--ink-4);
}

.blog-card__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-card__cover-icon {
    width: 2rem;
    height: 2rem;
}

.blog-card__body {
    display: flex;
    flex-direction: column;
    padding: 1.25rem;
}

.blog-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
}

.blog-search {
    flex: none;
    width: 100%;
}

.blog-search .input {
    width: 100%;
}

@media (min-width: 40rem) {
    .blog-search {
        width: 18rem;
    }
}

.blog-card__meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.blog-card__date {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--brand);
}

.blog-card__read-time {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: var(--text-xs);
    color: var(--ink-4);
}

.blog-card__title {
    margin-top: 0.5rem;
    font-weight: 600;
    line-height: 1.35;
}

.blog-card__desc {
    margin-top: 0.5rem;
    font-size: var(--text-sm);
    color: var(--ink-3);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

@media (min-width: 40rem) {
    .blog-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 64rem) {
    .blog-cards {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* -----------------------------------------------------------------------------
   Tool page
   -------------------------------------------------------------------------- */

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--text-sm);
    color: var(--ink-3);
}

.breadcrumb a:hover {
    color: var(--ink);
}

.tool-head {
    margin-top: 1.5rem;
    text-align: center;
}

/* Still used by categories/show.blade.php's icon fallback (when no
   thumbnail is set) - tools/show.blade.php no longer renders a chip here. */
.tool-head .chip {
    margin-inline: auto;
}

.tool-head__thumbnail {
    display: block;
    margin-inline: auto;
    max-width: 100%;
    max-height: 220px;
    border-radius: var(--radius-lg, 12px);
    object-fit: cover;
}

.tool-head__title {
    margin-top: 1.25rem;
    font-size: var(--text-3xl);
}

/* tools/show.blade.php no longer renders an icon above the title (unlike
   categories/show.blade.php, which still shares this class) - the space
   reserved for it would otherwise be an orphaned gap. */
.tool-head--no-icon .tool-head__title {
    margin-top: 0;
}

.tool-head__lede {
    max-width: 34rem;
    margin: 0.75rem auto 0;
    font-size: var(--text-lg);
    color: var(--ink-3);
}

.tool-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin-top: 1.5rem;
    text-align: left;
}

.tool-hero__text {
    flex: 1;
    min-width: 0;
}

.tool-hero__title {
    font-size: var(--text-3xl);
}

.tool-hero__lede {
    margin-top: 0.75rem;
    font-size: var(--text-lg);
    color: var(--ink-3);
}

.tool-hero__visual {
    flex: none;
}

.tool-hero__visual .format-flow {
    margin: 0;
}

/* Keeps the upload panel at the original width even when the surrounding
   container widens - only title/content/FAQ should get the extra room. */
.tool-form-wrap {
    max-width: 46rem;
    margin-inline: auto;
}

@media (max-width: 40rem) {
    .tool-hero {
        flex-direction: column;
        text-align: center;
    }

    .tool-hero__text {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

.format-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    margin: 1.75rem auto 0;
}

.format-flow__box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    min-width: 5.5rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
}

.format-flow__box--accent {
    border-color: var(--brand);
    color: var(--brand);
}

.format-flow__label {
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    color: inherit;
}

.format-flow__arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    color: var(--brand);
}

.format-flow__to {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--ink-3);
}

.format-flow__arrow-icon {
    animation: format-flow-pulse 1.6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .format-flow__arrow-icon {
        animation: none;
    }
}

@keyframes format-flow-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.6;
    }

    50% {
        transform: scale(1.2);
        opacity: 1;
    }
}

.panel {
    margin-top: 2rem;
    padding: 1.5rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.alert {
    margin-top: 2rem;
    padding: 1rem;
    border: 1px solid var(--danger-line);
    border-radius: var(--radius);
    background: var(--danger-bg);
    font-size: var(--text-sm);
    color: var(--danger);
}

/* Upload control ----------------------------------------------------------- */

.dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 2.5rem 1.5rem;
    text-align: center;
    cursor: pointer;
    border: 2px dashed var(--line-strong);
    border-radius: var(--radius);
    background: var(--canvas);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.dropzone:hover,
.dropzone:focus-within {
    border-color: var(--brand);
    background: var(--brand-light);
}

.dropzone__mark {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink-4);
    box-shadow: var(--shadow-sm);
}

.dropzone__title {
    font-weight: 600;
}

.dropzone__hint {
    font-size: var(--text-sm);
    color: var(--ink-3);
}

.dropzone__files {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--brand);
}

/* Fields ------------------------------------------------------------------- */

.fields {
    display: grid;
    gap: 1.25rem;
    margin-top: 1.5rem;
}

.field__label {
    display: block;
    font-size: var(--text-sm);
    font-weight: 600;
}

.field__hint {
    margin-top: 0.375rem;
    font-size: var(--text-xs);
    color: var(--ink-3);
}

.input,
.select {
    display: block;
    width: 100%;
    margin-top: 0.375rem;
    padding: 0.6rem 0.75rem;
    font-size: var(--text-sm);
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.input:focus,
.select:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-light);
}

.redactpad {
    position: relative;
    margin-top: 1rem;
    line-height: 0;
}

.redactpad img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
}

.redactpad canvas {
    position: absolute;
    top: 0;
    left: 0;
    cursor: crosshair;
}

.signaturepad {
    margin-top: 0.375rem;
}

.signaturepad__canvas {
    display: block;
    width: 100%;
    height: 150px;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    touch-action: none;
    cursor: crosshair;
}

.signaturepad .input {
    margin-top: 0.5rem;
}

.signaturepad__actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.5rem;
}

.form-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    margin-top: 1rem;
    font-size: var(--text-xs);
    color: var(--ink-3);
}

/* Prose and FAQ ------------------------------------------------------------ */

.prose {
    margin-top: 3rem;
    display: grid;
    gap: 1rem;
    color: var(--ink-2);
    max-width: 65ch;
}

.prose--wide {
    margin-top: 0;
    max-width: none;
}

/* Only inside the widened tool-page container (see .container--wide) -
   .prose's own 65ch cap is narrower than even the upload panel above it
   (46rem), so it looked stuck at the old width instead of using the extra
   room. Dropping the cap here lets it fill the wide container; elsewhere
   .prose keeps the 65ch readability limit since those containers are
   already narrower than that anyway. */
.container--wide .prose {
    max-width: none;
}

.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
    margin-top: 0.5rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ink);
}

.prose h1 { font-size: var(--text-3xl); }
.prose h2 { font-size: var(--text-2xl); }
.prose h3 { font-size: var(--text-xl); }
.prose h4 { font-size: var(--text-lg); }
.prose h5 { font-size: 1rem; }
.prose h6 { font-size: var(--text-sm); }

.prose ul {
    list-style: disc;
    padding-inline-start: 1.5rem;
}

.prose ol {
    list-style: decimal;
    padding-inline-start: 1.5rem;
}

.prose a {
    color: var(--brand);
    text-decoration: underline;
}

.prose img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}

.prose table {
    border-collapse: collapse;
    width: 100%;
    font-size: var(--text-sm);
}

.prose th,
.prose td {
    text-align: start;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--line);
    vertical-align: top;
}

.prose th {
    background: var(--surface);
}

.faq {
    margin-top: 3rem;
}

.faq__list {
    display: grid;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.faq__item {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.faq__item[open] {
    border-color: var(--line-strong);
    box-shadow: var(--shadow);
}

.faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
    list-style: none;
}

.faq__q::-webkit-details-marker {
    display: none;
}

.faq__q::after {
    content: '';
    flex: none;
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid var(--ink-3);
    border-bottom: 2px solid var(--ink-3);
    transform: rotate(45deg) translateY(-2px);
    transition: transform 0.2s ease;
}

.faq__item[open] .faq__q::after {
    transform: rotate(-135deg) translateY(-2px);
}

.faq__a {
    padding: 0 1.25rem 1.25rem;
    font-size: var(--text-sm);
    line-height: 1.7;
    color: var(--ink-2);
}

.faq__a > :first-child {
    margin-top: 0;
}

.faq__a > :last-child {
    margin-bottom: 0;
}

.faq__a p + p {
    margin-top: 0.75rem;
}

.related-tools {
    margin-top: 3rem;
}

.related-tools .cards {
    margin-top: 1.25rem;
}

.faq__q {
    font-weight: 600;
}

.faq__a {
    margin-top: 0.375rem;
    font-size: var(--text-sm);
    color: var(--ink-3);
}

/* -----------------------------------------------------------------------------
   Result page
   -------------------------------------------------------------------------- */

.result {
    max-width: 34rem;
    margin-inline: auto;
    text-align: center;
}

.result__status {
    font-size: var(--text-sm);
    color: var(--ink-3);
}

.result__downloads {
    display: grid;
    gap: 0.625rem;
    margin-top: 1.25rem;
}

.result__meta {
    margin-top: 1rem;
    font-size: var(--text-xs);
    color: var(--ink-4);
}

.spinner {
    width: 1.75rem;
    height: 1.75rem;
    margin: 0 auto 0.875rem;
    border: 2px solid var(--line);
    border-top-color: var(--brand);
    border-radius: 999px;
    animation: spin 0.7s linear infinite;
}

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

/* -----------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.footer {
    margin-top: 5rem;
    background: var(--surface);
    border-top: 1px solid var(--line);
}

.footer__grid {
    display: grid;
    gap: 2.5rem;
    padding-block: 3.5rem 0;
}

.footer__about {
    max-width: 24rem;
    margin-top: 0.75rem;
    font-size: var(--text-sm);
    color: var(--ink-3);
}

.footer__contact {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.75rem;
    font-size: var(--text-sm);
    color: var(--ink-3);
}

.footer__contact a {
    color: var(--ink-2);
}

.footer__contact a:hover {
    color: var(--brand);
}

.footer__social {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    margin-top: 0.75rem;
}

.footer__social a {
    font-size: var(--text-sm);
    color: var(--ink-3);
}

.footer__social a:hover {
    color: var(--ink);
}

.footer__title {
    font-size: var(--text-sm);
    font-weight: 600;
}

.footer__links {
    display: grid;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.footer__links a {
    font-size: var(--text-sm);
    color: var(--ink-3);
}

.footer__links a:hover {
    color: var(--ink);
}

.footer__bar {
    display: grid;
    gap: 1rem;
    margin-top: 3rem;
    padding-block: 1.5rem;
    border-top: 1px solid var(--line);
    font-size: var(--text-sm);
    color: var(--ink-3);
}

.footer__note {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.footer__note .icon {
    color: var(--ink-4);
}

/* -----------------------------------------------------------------------------
   Breakpoints
   -------------------------------------------------------------------------- */

@media (min-width: 40rem) {
    :root {
        --text-3xl: 3rem;
    }

    .container {
        padding-inline: 1.5rem;
    }

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

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

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

    .field--wide {
        grid-column: 1 / -1;
    }

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

    .footer__bar {
        grid-template-columns: 1fr auto;
        align-items: center;
    }
}

@media (min-width: 48rem) {
    .megamenu {
        display: block;
    }

    .mobilenav,
    .nav__toggle {
        display: none;
    }
}

@media (min-width: 64rem) {
    .cards {
        grid-template-columns: repeat(3, 1fr);
    }

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

    .footer__grid {
        grid-template-columns: 2fr 1fr 1fr 1fr;
    }
}

@media (min-width: 80rem) {
    .cards {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* -----------------------------------------------------------------------------
   Right-to-left
   Logical properties cover most of it; these are the exceptions.
   -------------------------------------------------------------------------- */

[dir='rtl'] .nav__chevron,
[dir='rtl'] .breadcrumb__sep {
    transform: scaleX(-1);
}

[dir='rtl'] [aria-expanded='true'] > .nav__chevron {
    transform: scaleX(-1) rotate(180deg);
}

/* -----------------------------------------------------------------------------
   Upload progress and inline results
   -------------------------------------------------------------------------- */

.progress {
    margin-top: 1.5rem;
}

.progress__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.progress__label {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--ink-2);
}

.progress__value {
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
    color: var(--ink-3);
}

.progress__track {
    position: relative;
    height: 0.5rem;
    overflow: hidden;
    background: var(--canvas-2);
    border-radius: 999px;
}

.progress__bar {
    width: 0;
    height: 100%;
    background: var(--brand);
    border-radius: inherit;
    transition: width 0.25s ease;
}

/* Queued work has no percentage to show, so the bar sweeps instead of lying. */
.progress__track--indeterminate .progress__bar {
    width: 40%;
    animation: sweep 1.1s ease-in-out infinite;
}

@keyframes sweep {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(250%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .progress__track--indeterminate .progress__bar {
        width: 100%;
        animation: none;
        opacity: 0.45;
    }
}

.results {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
    text-align: center;
}

.results__title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--success);
}

.results .btn--ghost {
    margin-top: 1rem;
}

[data-submit][disabled] {
    opacity: 0.6;
    cursor: progress;
}

/* A spinner in place of the label while a submit is in flight - driven by
   aria-busy, which every ajax-submitted form already sets either way. */
[data-submit][aria-busy='true'] {
    position: relative;
    color: transparent;
}

[data-submit][aria-busy='true']::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.1rem;
    height: 1.1rem;
    margin: -0.55rem 0 0 -0.55rem;
    border: 2px solid rgb(255 255 255 / 0.4);
    border-top-color: #fff;
    border-radius: 999px;
    animation: spin 0.7s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    [data-submit][aria-busy='true']::after {
        animation-duration: 1.4s;
    }
}

/* -----------------------------------------------------------------------------
   File queue
   -------------------------------------------------------------------------- */

.dropzone--over {
    border-color: var(--brand);
    background: var(--brand-light);
    transform: scale(1.01);
}

.filelist {
    display: grid;
    gap: 0.5rem;
    margin-top: 1rem;
}

.filelist__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}

.filelist__mark {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    flex: none;
    border-radius: 0.375rem;
    background: var(--canvas-2);
    color: var(--ink-3);
}

.filelist__index {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--brand);
}

.filelist__body {
    display: grid;
    min-width: 0;
    flex: 1;
}

.filelist__name {
    overflow: hidden;
    font-size: var(--text-sm);
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.filelist__size {
    font-size: var(--text-xs);
    color: var(--ink-3);
}

.filelist__controls {
    display: flex;
    gap: 0.25rem;
    flex: none;
}

.filelist__btn {
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.375rem;
    font-size: var(--text-sm);
    line-height: 1;
    color: var(--ink-3);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.filelist__btn:hover:not(:disabled) {
    background: var(--canvas-2);
    color: var(--ink);
}

.filelist__btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.filelist__btn--remove:hover:not(:disabled) {
    background: var(--danger-bg);
    color: var(--danger);
}

.filelist__summary {
    margin-top: 0.625rem;
    font-size: var(--text-xs);
    color: var(--ink-3);
    text-align: center;
}

/* Page-thumbnail grid (merge-pdf only, for now - see tools/show.blade.php) */

.filelist--grid {
    grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
    gap: 1rem;
}

.filelist__card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    padding: 0.75rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    cursor: grab;
}

.filelist__card:active {
    cursor: grabbing;
}

.filelist__card-preview {
    display: grid;
    place-items: center;
    width: 100%;
    height: 7rem;
    overflow: hidden;
    background: var(--canvas-2);
    border-radius: var(--radius-sm);
}

.filelist__card-thumb {
    max-width: 100%;
    max-height: 100%;
    box-shadow: var(--shadow-sm);
}

.filelist__card-fallback {
    color: var(--ink-3);
}

.filelist__card-spinner {
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid var(--line);
    border-top-color: var(--brand);
    border-radius: 50%;
    animation: filelist-card-spin 0.8s linear infinite;
}

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

.filelist__card-name {
    max-width: 100%;
    overflow: hidden;
    font-size: var(--text-xs);
    font-weight: 500;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.filelist__card-meta {
    font-size: var(--text-xs);
    color: var(--ink-3);
}

.filelist__card-remove {
    position: absolute;
    top: 0.375rem;
    right: 0.375rem;
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    color: var(--ink-3);
    line-height: 1;
}

.filelist__card-remove:hover {
    background: var(--danger-bg);
    color: var(--danger);
}

/* Two-column merge app shell (merge-pdf only, for now - see
   tools/partials/merge-layout.blade.php) */

.merge-app {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
    margin-top: 1.5rem;
}

.merge-canvas {
    position: relative;
    flex: 1;
    min-width: 0;
}

.merge-canvas__toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.75rem;
}

.merge-icon-btn {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--ink-3);
}

.merge-icon-btn:hover {
    border-color: var(--brand);
    color: var(--brand);
}

.merge-add {
    position: absolute;
    top: 0;
    right: -3.5rem;
}

.merge-add__button {
    position: relative;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    background: var(--brand);
    border-radius: 50%;
    color: #fff;
    box-shadow: var(--shadow-sm);
}

.merge-add__button:hover {
    background: var(--brand-dark, var(--brand));
}

.merge-add__badge {
    position: absolute;
    top: -0.375rem;
    right: -0.375rem;
    display: grid;
    place-items: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding-inline: 0.25rem;
    background: var(--ink);
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 700;
    color: #fff;
}

.merge-add__tooltip {
    position: absolute;
    top: 50%;
    right: calc(100% + 0.5rem);
    transform: translateY(-50%);
    padding: 0.375rem 0.625rem;
    background: var(--ink);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: 500;
    color: #fff;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.merge-add:hover .merge-add__tooltip,
.merge-add:focus-within .merge-add__tooltip {
    opacity: 1;
}

.merge-sidebar {
    display: flex;
    flex-direction: column;
    flex: none;
    width: 20rem;
    align-self: stretch;
    padding: 1.5rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
}

.merge-sidebar__title {
    font-size: var(--text-2xl);
}

.merge-sidebar__hint {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 0.75rem;
    background: var(--brand-light);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    color: var(--ink-2);
}

.merge-sidebar__hint .icon {
    flex: none;
    margin-top: 0.125rem;
    color: var(--brand);
}

/* Pushes the submit button toward the bottom of the sidebar when there is
   little else in it, without needing the sidebar to be position:sticky. */
.merge-sidebar__spacer {
    flex: 1;
    min-height: 2rem;
}

.merge-sidebar__submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.merge-sidebar__submit-icon {
    transform: rotate(-90deg);
}

@media (max-width: 48rem) {
    .merge-app {
        flex-direction: column;
    }

    .merge-sidebar {
        width: 100%;
    }

    .merge-add {
        right: 0;
        top: -3.5rem;
    }
}

/* -----------------------------------------------------------------------------
   Split PDF - Range / Pages / Size tabbed sidebar
   -------------------------------------------------------------------------- */

.split-app {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
    margin-top: 1.5rem;
}

.split-canvas {
    flex: 1;
    min-width: 0;
}

.split-sidebar {
    display: flex;
    flex-direction: column;
    flex: none;
    width: 22rem;
    align-self: stretch;
    padding: 1.5rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.split-sidebar__title {
    font-size: var(--text-2xl);
    margin-bottom: 1rem;
}

.split-tabs {
    display: flex;
    gap: 0.25rem;
    border-bottom: 1px solid var(--line);
    margin-bottom: 1.25rem;
}

.split-tab {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.25rem;
    border: none;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--ink-3);
    font-weight: 600;
    font-size: var(--text-sm);
    cursor: pointer;
}

.split-tab.is-active {
    color: var(--brand);
    border-bottom-color: var(--brand);
}

.split-tab__check {
    color: var(--brand);
}

.split-panel {
    display: none;
}

.split-panel.is-active {
    display: block;
}

.split-panel__label {
    font-weight: 600;
    font-size: var(--text-sm);
    margin-bottom: 0.5rem;
}

.split-pillgroup {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.split-pill {
    padding: 0.5rem 0.85rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink-2);
    font-size: var(--text-sm);
    cursor: pointer;
}

.split-pill.is-active {
    border-color: var(--brand);
    color: var(--brand);
}

.split-range {
    padding: 0.85rem;
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-sm);
    margin-bottom: 0.75rem;
}

.split-range__label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--text-sm);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.split-range__remove {
    margin-left: auto;
    border: none;
    background: none;
    color: var(--ink-3);
    cursor: pointer;
    font-size: var(--text-base);
    line-height: 1;
}

.split-range__fields {
    display: flex;
    gap: 0.75rem;
}

.split-range__field {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: var(--text-xs);
    color: var(--ink-3);
}

.split-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    font-size: var(--text-sm);
    color: var(--ink-2);
}

.split-hint {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 0.75rem;
    background: var(--brand-light);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    color: var(--ink-2);
}

.split-hint .icon {
    flex: none;
    margin-top: 0.125rem;
    color: var(--brand);
}

.split-size__row {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.split-size__row .input {
    max-width: 6rem;
}

.split-sidebar__spacer {
    flex: 1;
    min-height: 1.5rem;
}

.split-sidebar__submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.split-sidebar__submit-icon {
    transform: rotate(-90deg);
}

.btn--outline {
    border: 1px solid var(--brand);
    background: transparent;
    color: var(--brand);
}

.btn--outline:hover {
    background: var(--brand-light);
}

@media (max-width: 48rem) {
    .split-app {
        flex-direction: column;
    }

    .split-sidebar {
        width: 100%;
    }
}

/* -----------------------------------------------------------------------------
   Compress PDF - compression-level sidebar
   -------------------------------------------------------------------------- */

.compress-app {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
    margin-top: 1.5rem;
}

.compress-canvas {
    position: relative;
    flex: 1;
    min-width: 0;
}

.compress-sidebar {
    display: flex;
    flex-direction: column;
    flex: none;
    width: 20rem;
    align-self: stretch;
    padding: 1.5rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.compress-sidebar__title {
    font-size: var(--text-2xl);
    margin-bottom: 1rem;
}

.compress-levels {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.compress-level {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1rem;
    border: none;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
    text-align: left;
    cursor: pointer;
}

.compress-level:last-child {
    border-bottom: none;
}

.compress-level.is-active {
    background: var(--brand-light);
}

.compress-level__text {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.compress-level__name {
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--brand);
}

.compress-level__hint {
    font-size: var(--text-xs);
    color: var(--ink-3);
}

.compress-level__check {
    flex: none;
    color: var(--line-strong);
    visibility: hidden;
}

.compress-level.is-active .compress-level__check {
    color: #16a34a;
    visibility: visible;
}

.compress-sidebar__spacer {
    flex: 1;
    min-height: 2rem;
}

.compress-sidebar__submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.compress-sidebar__submit-icon {
    transform: rotate(-90deg);
}

@media (max-width: 48rem) {
    .compress-app {
        flex-direction: column;
    }

    .compress-sidebar {
        width: 100%;
    }
}

/* -----------------------------------------------------------------------------
   Delete PDF Pages - per-page removal grid
   -------------------------------------------------------------------------- */

.delete-app {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
    margin-top: 1.5rem;
}

.delete-canvas {
    flex: 1;
    min-width: 0;
}

.page-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    padding: 0.75rem;
    background: var(--surface);
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius);
    cursor: pointer;
}

.page-card__preview {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    height: 9rem;
    overflow: hidden;
    background: var(--canvas-2);
    border-radius: var(--radius-sm);
}

.page-card__thumb {
    max-width: 100%;
    max-height: 100%;
    box-shadow: var(--shadow-sm);
}

.page-card__remove-mark {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: var(--danger);
    background: rgba(255, 255, 255, 0.55);
}

.page-card__number {
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--ink-2);
}

.page-card.is-removed {
    border-style: solid;
    border-color: var(--danger);
}

.page-card.is-removed .page-card__remove-mark {
    display: flex;
}

.page-card.is-removed .page-card__thumb {
    opacity: 0.45;
}

.page-card.is-removed .page-card__number {
    color: var(--ink-4);
}

/* Extract PDF Pages reuses the same click/mark mechanics as Delete PDF
   Pages, but a clicked page means "keep this one" - shown in green
   rather than red so it doesn't read as a removal. */
.page-grid--extract .page-card.is-removed {
    border-color: #16a34a;
}

.page-grid--extract .page-card.is-removed .page-card__remove-mark {
    color: #16a34a;
    background: rgba(255, 255, 255, 0.35);
}

.page-grid--extract .page-card.is-removed .page-card__thumb {
    opacity: 1;
}

.delete-sidebar {
    display: flex;
    flex-direction: column;
    flex: none;
    width: 20rem;
    align-self: stretch;
    padding: 1.5rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.delete-sidebar__title {
    font-size: var(--text-2xl);
}

.delete-sidebar__hint {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 0.75rem;
    background: var(--brand-light);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    color: var(--ink-2);
}

.delete-sidebar__hint .icon {
    flex: none;
    margin-top: 0.125rem;
    color: var(--brand);
}

.delete-sidebar__total {
    margin-top: 1.25rem;
    font-size: var(--text-sm);
    color: var(--ink-2);
}

.delete-sidebar__field {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin-top: 1rem;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--ink-2);
}

.delete-sidebar__spacer {
    flex: 1;
    min-height: 2rem;
}

.delete-sidebar__submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.delete-sidebar__submit-icon {
    transform: rotate(-90deg);
}

@media (max-width: 48rem) {
    .delete-app {
        flex-direction: column;
    }

    .delete-sidebar {
        width: 100%;
    }
}

/* -----------------------------------------------------------------------------
   Organize PDF - drag-to-reorder grid with blank-page insertion
   -------------------------------------------------------------------------- */

.organize-app {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
    margin-top: 1.5rem;
}

.organize-canvas {
    flex: 1;
    min-width: 0;
}

.organize-grid {
    padding-inline: 1.5rem;
}

.organize-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    padding: 0.75rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    cursor: grab;
}

.organize-card.is-dragging {
    opacity: 0.4;
}

.organize-card__preview {
    display: grid;
    place-items: center;
    width: 100%;
    height: 9rem;
    overflow: hidden;
    background: var(--canvas-2);
    border-radius: var(--radius-sm);
}

.organize-card__preview--blank {
    border: 1px dashed var(--line-strong);
}

.organize-card__thumb {
    max-width: 100%;
    max-height: 100%;
    box-shadow: var(--shadow-sm);
}

.organize-card__number {
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--ink-2);
}

.organize-card__remove {
    position: absolute;
    top: 0.375rem;
    right: 0.375rem;
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border: none;
    border-radius: 50%;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    color: var(--ink-3);
    cursor: pointer;
    z-index: 1;
}

.organize-card__remove:hover {
    background: var(--danger-bg);
    color: var(--danger);
}

.organize-card__insert {
    position: absolute;
    top: 50%;
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border: none;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    opacity: 0;
    transform: translateY(-50%);
    transition: opacity 0.15s ease;
    z-index: 2;
}

.organize-card:hover .organize-card__insert {
    opacity: 1;
}

.organize-card__insert--before {
    left: -0.875rem;
    display: none;
}

.organize-card:first-child .organize-card__insert--before {
    display: grid;
}

.organize-card__insert--after {
    right: -0.875rem;
}

.organize-card__insert-icon {
    font-size: var(--text-sm);
    line-height: 1;
}

.organize-card__insert-tip {
    position: absolute;
    bottom: calc(100% + 0.5rem);
    left: 50%;
    transform: translateX(-50%);
    padding: 0.375rem 0.625rem;
    border-radius: var(--radius-sm);
    background: var(--ink);
    color: #fff;
    font-size: var(--text-xs);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.organize-card__insert:hover .organize-card__insert-tip {
    opacity: 1;
}

.organize-sidebar {
    display: flex;
    flex-direction: column;
    flex: none;
    width: 20rem;
    align-self: stretch;
    padding: 1.5rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.organize-sidebar__title {
    font-size: var(--text-2xl);
    margin-bottom: 1rem;
}

.organize-sidebar__files-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--ink-2);
}

.organize-sidebar__reset {
    border: none;
    background: none;
    color: var(--brand);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
}

.organize-sidebar__file {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.625rem 0.75rem;
    background: var(--danger-bg);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    color: var(--ink-2);
}

.organize-sidebar__spacer {
    flex: 1;
    min-height: 2rem;
}

.organize-sidebar__submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.organize-sidebar__submit-icon {
    transform: rotate(-90deg);
}

@media (max-width: 48rem) {
    .organize-app {
        flex-direction: column;
    }

    .organize-sidebar {
        width: 100%;
    }
}

/* -----------------------------------------------------------------------------
   Image to PDF options (jpg/png/webp/scan-to-pdf) - reuses .merge-app's
   canvas/thumbnail-grid layout, just with its own sidebar.
   -------------------------------------------------------------------------- */

.images-sidebar {
    display: flex;
    flex-direction: column;
    flex: none;
    width: 20rem;
    align-self: stretch;
    padding: 1.5rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.images-sidebar__title {
    font-size: var(--text-xl);
    margin-bottom: 1rem;
}

.images-sidebar__label {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--ink-2);
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
}

.images-sidebar__label:first-of-type {
    margin-top: 0;
}

.images-orientation {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.images-orientation__option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink-2);
    font-size: var(--text-sm);
    cursor: pointer;
}

.images-orientation__option.is-active {
    border-color: var(--brand);
    color: var(--brand);
}

.images-orientation__icon {
    display: block;
    border: 2px solid currentColor;
    border-radius: 2px;
}

.images-orientation__icon--portrait {
    width: 1.25rem;
    height: 1.75rem;
}

.images-orientation__icon--landscape {
    width: 1.75rem;
    height: 1.25rem;
}

.images-margin {
    display: flex;
    gap: 0.5rem;
}

.images-margin__option {
    flex: 1;
    padding: 0.5rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink-2);
    font-size: var(--text-sm);
    cursor: pointer;
}

.images-margin__option.is-active {
    border-color: var(--brand);
    color: var(--brand);
}

.images-sidebar__checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
    font-size: var(--text-sm);
    color: var(--ink-2);
}

.images-sidebar__spacer {
    flex: 1;
    min-height: 1.5rem;
}

.images-sidebar__submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.images-sidebar__submit-icon {
    transform: rotate(-90deg);
}

@media (max-width: 48rem) {
    .images-sidebar {
        width: 100%;
    }
}

/* -----------------------------------------------------------------------------
   PDF Text Extraction - inline text preview with copy
   -------------------------------------------------------------------------- */

.text-preview {
    margin-top: 1rem;
}

.text-preview__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.text-preview__label {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--ink-2);
}

.text-preview__copy {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.625rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink-2);
    font-size: var(--text-xs);
    font-weight: 600;
    cursor: pointer;
}

.text-preview__copy:hover {
    border-color: var(--brand);
    color: var(--brand);
}

.text-preview__textarea {
    width: 100%;
    min-height: 14rem;
    padding: 0.85rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--canvas-2);
    color: var(--ink);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--text-sm);
    line-height: 1.5;
    resize: vertical;
}

/* -----------------------------------------------------------------------------
   Cloud import - "Import from Google Drive" / "Import from Dropbox"
   -------------------------------------------------------------------------- */

.cloud-import {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 0.85rem;
}

.cloud-import__btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.85rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink-2);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
}

.cloud-import__btn:hover {
    border-color: var(--brand);
    color: var(--brand);
}

.cloud-import__btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* -----------------------------------------------------------------------------
   Rotate PDF - RIGHT / LEFT buttons (reuses .compress-app's canvas layout
   and several of Organize/Images-to-PDF's sidebar classes)
   -------------------------------------------------------------------------- */

.rotate-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.rotate-buttons__btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border: none;
    border-radius: var(--radius-sm);
    background: var(--canvas-2);
    color: var(--ink);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
}

.rotate-buttons__btn:hover {
    background: var(--brand-light);
}

.rotate-buttons__icon {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
}

.rotate-buttons__icon--left {
    transform: scaleX(-1);
}

/* -----------------------------------------------------------------------------
   Add Page Numbers - position grid (reuses .compress-app's canvas layout
   and Images-to-PDF's .images-sidebar__label / Split's .split-range__fields)
   -------------------------------------------------------------------------- */

.pn-position {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.25rem;
    width: 6.5rem;
    aspect-ratio: 1 / 1;
    padding: 0.375rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
}

.pn-position__cell {
    display: grid;
    place-items: center;
    border: 1px dashed var(--line);
    border-radius: 2px;
    background: none;
    cursor: pointer;
}

.pn-position__dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: transparent;
}

.pn-position__cell.is-active {
    border-color: var(--brand);
}

.pn-position__cell.is-active .pn-position__dot {
    background: var(--danger);
}

/* -----------------------------------------------------------------------------
   Sign PDF - click-or-drag placement editor
   -------------------------------------------------------------------------- */

.sign-app {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
    margin-top: 1.5rem;
}

.sign-canvas {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sign-pager {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--ink-2);
}

.sign-pager__btn {
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    background: var(--surface);
    cursor: pointer;
}

.sign-pager__btn:hover {
    border-color: var(--brand);
    color: var(--brand);
}

.sign-pager__icon--prev {
    transform: rotate(90deg);
}

.sign-pager__icon--next {
    transform: rotate(-90deg);
}

.sign-preview {
    position: relative;
    max-width: 100%;
    box-shadow: var(--shadow-sm);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.sign-preview canvas {
    display: block;
    max-width: 100%;
}

.sign-stamp {
    position: absolute;
    width: 30%;
    max-width: 9rem;
    transform: translate(-50%, -50%);
    cursor: grab;
    border: 1px dashed var(--brand);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.65);
    padding: 0.25rem;
    touch-action: none;
}

.sign-stamp:active {
    cursor: grabbing;
}

.sign-stamp img {
    display: block;
    width: 100%;
    pointer-events: none;
}

.sign-hint {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.85rem;
    font-size: var(--text-sm);
    color: var(--ink-3);
    text-align: center;
}

.dropzone--compact {
    padding: 1rem;
}

/* Meme Generator's live editor - captions drawn over the image, draggable. */
.meme-stage {
    position: relative;
    display: inline-block;
    max-width: 100%;
    box-shadow: var(--shadow-sm);
    border-radius: var(--radius-sm);
    overflow: hidden;
    line-height: 0;
}

.meme-stage__image {
    display: block;
    max-width: 100%;
    max-height: 70vh;
    user-select: none;
    -webkit-user-drag: none;
}

.meme-caption {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transform: translate(-50%, -50%);
    font-family: Impact, "Anton", "Arial Black", sans-serif;
    font-weight: 700;
    line-height: 1.05;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    overflow-wrap: anywhere;
    text-shadow:
        -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000,
        0 -2px 0 #000, 0 2px 0 #000, -2px 0 0 #000, 2px 0 0 #000;
    border: 1px dashed transparent;
    border-radius: var(--radius-sm);
    cursor: grab;
    user-select: none;
    touch-action: none;
}

.meme-caption:hover,
.meme-caption:focus-visible,
.meme-caption.is-dragging {
    border-color: rgba(255, 255, 255, 0.9);
    background: rgba(0, 0, 0, 0.12);
    outline: none;
}

.meme-caption.is-dragging {
    cursor: grabbing;
}

.meme-caption--empty {
    pointer-events: none;
}

@media (max-width: 48rem) {
    .sign-app {
        flex-direction: column;
    }
}

.btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* -----------------------------------------------------------------------------
   Language switcher
   -------------------------------------------------------------------------- */

.langswitch {
    position: relative;
    display: block;
}

.langswitch__current {
    max-width: 7rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Phones: globe + chevron only, the full native name would crowd the bar. */
@media (max-width: 39.99rem) {
    .langswitch__current {
        display: none;
    }
}

.langswitch__panel {
    position: absolute;
    inset-inline-end: 0;
    top: calc(100% + 0.5rem);
    z-index: 50;
    display: grid;
    gap: 0.125rem;
    width: 15rem;
    max-height: 20rem;
    overflow-y: auto;
    padding: 0.5rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
}

.langswitch__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.45rem 0.6rem;
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    color: var(--ink-2);
}

.langswitch__link:hover {
    background: var(--canvas);
    color: var(--ink);
}

.langswitch__link.is-current {
    background: var(--brand-light);
    color: var(--brand);
    font-weight: 600;
}

.langswitch__code {
    font-size: var(--text-xs);
    color: var(--ink-4);
}

@media (min-width: 40rem) {
    .langswitch {
        display: block;
    }
}

.accountmenu {
    position: relative;
}

.accountmenu__current {
    max-width: 7rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.accountmenu__panel {
    position: absolute;
    inset-inline-end: 0;
    top: calc(100% + 0.5rem);
    z-index: 50;
    display: grid;
    gap: 0.125rem;
    width: 12rem;
    padding: 0.5rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
}

.accountmenu__link {
    display: block;
    width: 100%;
    padding: 0.45rem 0.6rem;
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    color: var(--ink-2);
    text-align: start;
}

.accountmenu__link:hover {
    background: var(--canvas);
    color: var(--ink);
}

.accountmenu__link--button {
    background: none;
    border: none;
    font: inherit;
    cursor: pointer;
}

/* -----------------------------------------------------------------------------
   Accounts, usage and pricing
   -------------------------------------------------------------------------- */

.auth {
    max-width: 26rem;
    margin-inline: auto;
}

.auth__title {
    font-size: var(--text-2xl);
    text-align: center;
}

.auth__lede {
    margin-top: 0.5rem;
    text-align: center;
    color: var(--ink-3);
}

.auth__remember {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.85rem;
    font-size: var(--text-sm);
    color: var(--ink-3);
}

.auth__alt {
    margin-top: 1rem;
    text-align: center;
    font-size: var(--text-sm);
    color: var(--ink-3);
}

.auth__divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.25rem 0;
    color: var(--ink-4);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.auth__divider::before,
.auth__divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--line);
}

.auth__alt a {
    color: var(--brand);
    font-weight: 600;
}

.mt-lg {
    margin-top: 1.25rem;
}

.notice-inline {
    padding: 0.75rem 1rem;
    margin-top: 1rem;
    border: 1px solid #a7f3d0;
    border-radius: var(--radius-sm);
    background: #ecfdf5;
    font-size: var(--text-sm);
    color: var(--success);
}

.account__grid {
    display: grid;
    gap: 1.25rem;
    margin-top: 1.5rem;
}

.panel__title {
    font-size: var(--text-lg);
    margin-bottom: 0.75rem;
}

.usage__headline {
    font-size: var(--text-2xl);
    font-weight: 700;
}

.usage__of {
    font-size: var(--text-lg);
    font-weight: 500;
    color: var(--ink-4);
}

.usage__note {
    margin-top: 0.5rem;
    font-size: var(--text-sm);
    color: var(--ink-3);
}

.usage__headline + .progress__track {
    margin-top: 0.75rem;
}

.history__row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.6rem 0;
    border-top: 1px solid var(--line);
    font-size: var(--text-sm);
}

.history__row:first-of-type {
    border-top: 0;
}

.history__status,
.history__when {
    font-size: var(--text-xs);
    color: var(--ink-3);
}

/* Pricing ------------------------------------------------------------------ */

.pricing__head {
    text-align: center;
    max-width: 40rem;
    margin-inline: auto;
}

.pricing__grid {
    display: grid;
    gap: 1.25rem;
    max-width: 48rem;
    margin: 2.5rem auto 0;
}

.pricing__card {
    padding: 1.75rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    text-align: center;
}

.pricing__card.is-featured {
    border-color: var(--brand);
    box-shadow: var(--shadow);
}

.pricing__name {
    font-weight: 600;
    color: var(--ink-3);
}

.pricing__price {
    margin-top: 0.35rem;
    font-size: var(--text-2xl);
    font-weight: 700;
}

.pricing__desc,
.pricing__quota {
    margin-top: 0.5rem;
    font-size: var(--text-sm);
    color: var(--ink-3);
}

.pricing__quota {
    font-weight: 600;
    color: var(--ink);
}

.pricing__card .btn {
    margin-top: 1.25rem;
}

.pricing__current {
    display: block;
    margin-top: 1.25rem;
    font-size: var(--text-sm);
    color: var(--ink-4);
}

.pricing__foot {
    margin-top: 2rem;
    text-align: center;
    font-size: var(--text-sm);
    color: var(--ink-3);
}

.pricing__foot a {
    color: var(--brand);
    font-weight: 600;
}

@media (min-width: 40rem) {
    .account__grid {
        grid-template-columns: 1fr 1fr;
    }

    .pricing__grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* -----------------------------------------------------------------------------
   Error pages
   -------------------------------------------------------------------------- */

.errorpage {
    text-align: center;
    padding-block: 2rem;
}

.errorpage__code {
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--line-strong);
    letter-spacing: -0.04em;
}

.errorpage__title {
    margin-top: 0.5rem;
    font-size: var(--text-2xl);
}

.errorpage__lede {
    max-width: 34rem;
    margin: 0.75rem auto 0;
    color: var(--ink-3);
}

.errorpage__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 2rem;
}

.errorpage__suggest {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--line);
}

.errorpage__suggest-title {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-4);
}

.errorpage__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.errorpage__links a {
    display: inline-block;
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--ink-2);
    transition: border-color 0.15s ease, color 0.15s ease;
}

.errorpage__links a:hover {
    border-color: var(--brand);
    color: var(--brand);
}

/* Cookie notice ------------------------------------------------------------- */

.cookie-consent {
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    z-index: 60;
    max-width: 40rem;
    margin-inline: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--ink);
    color: var(--canvas);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 30px -10px rgb(0 0 0 / 0.4);
}

.cookie-consent p {
    flex: 1 1 16rem;
    margin: 0;
    font-size: var(--text-sm);
}

.cookie-consent a {
    color: var(--canvas);
    text-decoration: underline;
}

@media (prefers-reduced-motion: no-preference) {
    .cookie-consent {
        animation: cookie-consent-in 0.25s ease-out;
    }
}

@keyframes cookie-consent-in {
    from {
        opacity: 0;
        transform: translateY(0.5rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Toasts --------------------------------------------------------------------- */

.toast-region {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 70;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    max-width: min(22rem, calc(100vw - 2rem));
}

.toast {
    padding: 0.9rem 1.1rem;
    border-radius: var(--radius);
    background: var(--ink);
    color: var(--canvas);
    font-size: var(--text-sm);
    box-shadow: 0 10px 30px -10px rgb(0 0 0 / 0.4);
}

.toast--ok {
    background: var(--success);
}

.toast--bad {
    background: var(--danger);
}

@media (prefers-reduced-motion: no-preference) {
    .toast {
        animation: cookie-consent-in 0.2s ease-out;
    }
}

/* Inline field errors, shown by AJAX form submission ------------------------ */

.field__error {
    margin-top: 0.35rem;
    font-size: var(--text-xs);
    color: var(--danger);
}

.field--invalid .input {
    border-color: var(--danger-line);
}

/* Plan picker on the registration form -------------------------------------- */

.plan-options {
    display: grid;
    gap: 0.6rem;
    margin-top: 0.5rem;
}

.plan-option {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.plan-option:has(input:checked) {
    border-color: var(--brand);
    background: var(--brand-light);
}

.plan-option__name {
    font-weight: 600;
    flex: 1;
}

.plan-option__price {
    color: var(--ink-3);
    font-size: var(--text-sm);
}

/* Registration: plan cards on the left, the form on the right -------------- */

.register-layout {
    display: grid;
    gap: 1.5rem;
    margin-top: 1.5rem;
    align-items: start;
}

.register-layout__plans {
    display: grid;
    gap: 1rem;
}

.register-layout__plans.field--invalid {
    outline: 2px solid var(--danger-line);
    outline-offset: 0.5rem;
    border-radius: var(--radius-lg);
}

.register-layout__form .auth__alt:first-of-type {
    margin-top: 1.25rem;
}

.plan-card {
    display: block;
    padding: 1.5rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.plan-card:has(input:checked) {
    border-color: var(--brand);
    box-shadow: var(--shadow);
    background: var(--brand-light);
}

.plan-card__head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.plan-card__head input[type='radio'] {
    width: 1.1rem;
    height: 1.1rem;
    accent-color: var(--brand);
}

.plan-card__name {
    font-weight: 700;
    font-size: var(--text-lg);
    flex: 1;
}

.plan-card__price {
    font-weight: 700;
    color: var(--brand);
}

.plan-card__desc {
    margin-top: 0.5rem;
    font-size: var(--text-sm);
    color: var(--ink-3);
}

.plan-card__features {
    margin-top: 1rem;
    display: grid;
    gap: 0.5rem;
    font-size: var(--text-sm);
    color: var(--ink-2);
}

.plan-card__features li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.plan-card__features .icon {
    color: var(--success);
    flex-shrink: 0;
}

@media (min-width: 48rem) {
    .register-layout {
        grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
    }
}

.blog-post__cover {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--radius-lg);
}

.page-extra {
    margin-top: 3rem;
}

/* /tools - one card per category (categories/index.blade.php). */
.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 1rem;
    margin-top: 2rem;
}

.category-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    padding: 1.5rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

a.category-card:hover {
    border-color: var(--brand);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}

a.category-card:hover .category-card__title {
    color: var(--brand);
}

.category-card .chip,
.category-card__thumb {
    margin-bottom: 0.6rem;
}

.category-card__thumb {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-sm);
    object-fit: cover;
}

.category-card__title {
    font-weight: 700;
    font-size: 1.1rem;
}

.category-card__count {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--brand);
}

.category-card__desc {
    font-size: var(--text-sm);
    color: var(--ink-3);
    line-height: 1.5;
}

.category-grid + .prose {
    margin-top: 3rem;
}