/* ==========================================================================
   main.css — hand-written styles for PDFTURA.
   Class names match the view templates exactly (BEM-ish). Layout order per the
   PRD: compact hero -> tools grid -> supporting sections -> footer tool index.
   Mobile-first; the tool grid collapses 4 -> 2 -> 1.
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    color: var(--c-ink);
    background: var(--c-surface-2);
    /* Sticky footer: on short pages (e.g. empty History) the footer used to
       sit mid-window with background showing beneath it. */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main#main { flex: 1 0 auto; }

h1, h2, h3, p { margin: 0 0 var(--s-3); }
h1 { font-size: var(--fs-3xl); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-2xl); line-height: var(--lh-tight); }
h3 { font-size: var(--fs-lg); }

a { color: var(--c-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

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

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

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

.section-title { text-align: center; margin-bottom: var(--s-5); }
.section-lead { text-align: center; color: var(--c-muted); max-width: 60ch; margin: 0 auto var(--s-5); }

/* --- Buttons -------------------------------------------------------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
    padding: var(--s-3) var(--s-5);
    border: 1px solid transparent; border-radius: var(--r-md);
    font-size: var(--fs-sm); font-weight: 600; cursor: pointer;
    transition: background .15s, border-color .15s, color .15s, transform .1s;
    text-decoration: none; font-family: inherit;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn--primary { background: var(--c-accent); color: #fff; }
.btn--primary:hover:not(:disabled) { background: var(--c-accent-dark); text-decoration: none; }
.btn--ghost { background: transparent; border-color: var(--c-line); color: var(--c-ink); }
.btn--ghost:hover:not(:disabled) { background: var(--c-surface-3); text-decoration: none; }
.btn--outline { background: transparent; border-color: var(--c-accent); color: var(--c-accent); }
.btn--outline:hover:not(:disabled) { background: var(--c-accent-soft); text-decoration: none; }
.btn--block { width: 100%; }
.btn--sm { padding: var(--s-2) var(--s-4); font-size: var(--fs-sm); }

/* "Add more" in the tool workspace: a premium soft-accent pill that flips to
   the brand gradient on hover. Distinct, but never louder than the main CTA. */
.btn--addmore {
    background: var(--c-accent-soft); color: var(--c-accent);
    border: 1px solid transparent; border-radius: var(--r-full);
    font-weight: 700; box-shadow: var(--sh-sm);
}
.btn--addmore svg { stroke-width: 2.5; }
.btn--addmore:hover:not(:disabled) {
    background: linear-gradient(120deg, var(--c-accent), #8b3fe0);
    color: #fff; text-decoration: none;
    box-shadow: var(--sh-md); transform: translateY(-1px);
}

/* --- Header --------------------------------------------------------------- */
.site-header {
    position: sticky; top: 0; z-index: 50;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: saturate(1.4) blur(8px);
    border-bottom: 1px solid var(--c-line);
}
.site-header__inner {
    display: flex; align-items: center; gap: var(--s-5);
    height: var(--header-h);
}
.brand {
    display: inline-flex; align-items: center; gap: var(--s-2);
    font-weight: 800; font-size: var(--fs-lg); color: var(--c-ink);
    letter-spacing: -0.02em;
}
.brand:hover { text-decoration: none; }
.brand__mark {
    display: inline-flex; align-items: center; line-height: 0;
    flex: none;
}
.brand__mark svg { display: block; border-radius: 9px; }
.brand__name { font-weight: 800; letter-spacing: -0.02em; }
/* Desktop nav: pushed to the right (margin-left:auto). The top-level links are
   styled like the reference site — uppercase, bold, letter-spaced. Scoped to
   direct children so the mega-menu panel below keeps normal (title) casing. */
/* Sits toward the left (a fixed gap after the brand), with the free space
   pushed to the right and wider spacing between links. */
.site-nav { display: flex; align-items: center; gap: var(--s-6); margin-left: var(--s-7); margin-right: auto; }
.site-nav > a {
    color: var(--c-ink); font-size: var(--fs-sm); font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.site-nav > a:hover { color: var(--c-accent); text-decoration: none; }

/* The account cluster no longer needs to claim the right edge (the nav does),
   but keep a small gap from the nav. */
.header-account { margin-left: var(--s-5); }

/* --- Tools mega-menu ------------------------------------------------------ */
/* Static so the full-width panel positions against the (sticky, positioned)
   .site-header, letting it span the container instead of the narrow trigger. */
.mega { position: static; }
.mega__trigger {
    display: inline-flex; align-items: center; gap: 4px;
    border: 0; background: transparent; cursor: pointer;
    color: var(--c-ink); font-size: var(--fs-sm); font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em;
    font-family: inherit; padding: 0;
}
.mega__trigger:hover { color: var(--c-accent); }
.mega__caret { transition: transform .18s ease; }
.mega[data-open] .mega__caret { transform: rotate(180deg); }
.mega[data-open] .mega__trigger { color: var(--c-ink); }

/* Full-width panel so every category (all 9, including AI Tools) is visible.
   Pinned to the container edges rather than the trigger, and laid out as a
   responsive grid that never clips columns. */
.mega__panel {
    position: absolute; top: calc(100% + 12px); left: 0; right: 0;
    width: min(var(--container), calc(100vw - var(--s-5) * 2));
    margin-inline: auto;
    background: #fff; border: 1px solid var(--c-line);
    border-radius: var(--r-lg); box-shadow: var(--sh-lg);
    padding: var(--s-5); z-index: 60;
    /* Never taller than the space below the header; scroll inside if the full
       set of categories doesn't fit, so no column row gets clipped off-screen. */
    max-height: calc(100vh - var(--header-h) - 24px);
    overflow-y: auto;
}
.mega__panel[hidden] { display: none; }
.mega__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--s-5);
}
.mega__col-title {
    display: flex; align-items: center; gap: var(--s-2);
    color: var(--c-ink); font-weight: 700;
    font-size: 0.875rem; margin-bottom: var(--s-3);
}
.mega__col-title:hover { color: var(--c-accent); text-decoration: none; }
/* Category icon: a small rounded colour tile (same palette as tool cards). */
.mega__col-ic {
    flex: none; width: 26px; height: 26px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
}
.mega__links { list-style: none; padding: 0; margin: 0; }
.mega__links li { margin-bottom: 2px; }
.mega__links a {
    display: flex; align-items: center; gap: var(--s-2);
    color: var(--c-ink-soft); font-size: var(--fs-xs); font-weight: 500;
    padding: 3px 0; border-radius: 8px;
    transition: color .12s ease, transform .12s ease;
}
.mega__links a:hover { color: var(--c-accent); text-decoration: none; transform: translateX(2px); }
/* Per-tool icon: a tiny colour tile matching the tool's card colour. */
.mega__tool-ic {
    flex: none; width: 22px; height: 22px; border-radius: 6px;
    display: inline-flex; align-items: center; justify-content: center;
}
/* "All <category> →" aligns with the tool names (icon width + gap). */
.mega__more { color: var(--c-accent) !important; font-weight: 600; padding-left: 30px !important; }

/* Account links / login state in the header. */
.header-account { display: flex; align-items: center; gap: var(--s-3); flex: 0 0 auto; margin-left: auto; }
.header-account__link {
    display: inline-flex; align-items: center; gap: var(--s-2);
    color: var(--c-ink); font-size: var(--fs-sm); font-weight: 600;
}
.header-account__avatar { border-radius: var(--r-full); }
.header-account__logout { color: var(--c-ink-soft); font-size: var(--fs-sm); font-weight: 600; }

/* --- Avatar (shared: header, dashboard, settings) ------------------------- */
.avatar { border-radius: var(--r-full); display: block; flex: none; }
.avatar--photo { object-fit: cover; }

/* --- User menu (avatar + first name + three-dot dropdown) ----------------- */
.usermenu { position: relative; }
.usermenu__trigger {
    display: inline-flex; align-items: center; gap: var(--s-2);
    background: transparent; border: 1px solid transparent; cursor: pointer;
    padding: 4px 6px; border-radius: var(--r-full);
    font: inherit; color: var(--c-ink);
}
.usermenu__trigger:hover { background: var(--c-surface-3); }
.usermenu__name { font-size: var(--fs-sm); font-weight: 600; }
.usermenu__dots { display: none; color: var(--c-ink-soft); }
.usermenu__grid { display: none; color: var(--c-ink-soft); }

/* Square icon button (mobile hamburger + profile grid). Hidden on desktop. */
.iconbtn {
    display: none; align-items: center; justify-content: center;
    width: 42px; height: 42px; padding: 0;
    background: transparent; border: 1px solid var(--c-line);
    border-radius: var(--r-md); cursor: pointer; color: var(--c-ink);
}
.iconbtn:hover { background: var(--c-surface-3); }
/* The mobile nav (hamburger) menu wrapper is hidden on desktop. */
.navmenu { display: none; }
/* Left-anchored dropdown (the hamburger panel opens under the left edge). */
.usermenu__panel--left { right: auto; left: 0; }
.usermenu__panel--left::before { right: auto; left: 18px; }
.usermenu__panel {
    position: absolute; top: calc(100% + 10px); right: 0;
    min-width: 248px; background: #fff; border: 1px solid var(--c-line);
    border-radius: var(--r-lg); box-shadow: var(--sh-lg);
    padding: var(--s-2); z-index: 60; display: grid; gap: 2px;
}
.usermenu__panel[hidden] { display: none; }
/* Little caret/pointer joining the panel to its trigger, like the reference. */
.usermenu__panel::before {
    content: ""; position: absolute; top: -6px; right: 18px;
    width: 11px; height: 11px; background: #fff;
    border-left: 1px solid var(--c-line); border-top: 1px solid var(--c-line);
    transform: rotate(45deg);
}
.usermenu__panel a {
    display: flex; align-items: center; gap: var(--s-3);
    padding: var(--s-2) var(--s-3); border-radius: var(--r-md);
    font-size: var(--fs-sm); font-weight: 500; color: var(--c-ink);
}
.usermenu__panel a:hover { background: var(--c-accent-soft); color: var(--c-accent); text-decoration: none; }
/* Menu-item icons: muted by default, tint to accent on row hover. */
.usermenu__ic { flex: none; color: var(--c-muted); transition: color .12s; }
.usermenu__panel a:hover .usermenu__ic { color: var(--c-accent); }
.usermenu__sep { height: 1px; background: var(--c-line); margin: var(--s-1) 0; }

/* Profile block at the top of the logged-in dropdown. */
.usermenu__profile {
    display: flex; align-items: center; gap: var(--s-3);
    padding: var(--s-2) var(--s-3) var(--s-3);
}
.usermenu__profile-text { display: grid; gap: 1px; min-width: 0; }
.usermenu__profile-name { font-weight: 700; color: var(--c-ink); font-size: var(--fs-sm); }
.usermenu__profile-email {
    color: var(--c-muted); font-size: var(--fs-xs, 0.78rem);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Guest dropdown auth buttons (Log in outlined + Sign up filled), stacked. */
.usermenu__auth { display: grid; gap: var(--s-2); padding: var(--s-2) var(--s-2) var(--s-1); }
.usermenu__auth .btn { width: 100%; }

/* The mobile-only category separator is hidden on desktop (logged-in menu). */
.usermenu__sep--mobile { display: none; }
/* The guest three-dot menu and the mobile-only category links are hidden on
   desktop; the responsive block reveals them on small screens. */
.usermenu--guest { display: none; }
.usermenu__mobilenav { display: none; }

/* --- Avatar picker (settings) --------------------------------------------- */
.avatar-current { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3); }
.avatar-picker { margin-bottom: var(--s-5); }
.avatar-choices { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-bottom: var(--s-3); }
.avatar-choice {
    position: relative; cursor: pointer; border-radius: var(--r-full);
    padding: 3px; border: 2px solid transparent; line-height: 0;
}
.avatar-choice:hover { border-color: var(--c-line); }
.avatar-choice.is-selected { border-color: var(--c-accent); }
.avatar-choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.avatar-choice:focus-within { border-color: var(--c-accent); }

/* --- Compact hero (<= 30vh) ---------------------------------------------- */
.hero {
    position: relative;
    padding: var(--s-7) 0 var(--s-6);
    text-align: center;
    overflow: hidden;
    /* Layered soft glows: the brand indigo up top, plus warm rose + pink
       auras drifting in from the sides for a premium, lit-from-within feel. */
    background:
        radial-gradient(680px 300px at 18% -10%, rgba(225, 29, 99, 0.10), transparent 70%),
        radial-gradient(620px 280px at 84% 0%, rgba(219, 39, 119, 0.10), transparent 72%),
        radial-gradient(1200px 260px at 50% -60px, var(--c-accent-soft), transparent 70%),
        linear-gradient(180deg, #fff, var(--c-surface-2));
}
/* A faint, blurred pink orb that sits behind the headline for extra depth,
   without touching the layout (pointer-events off, decorative only). */
.hero::before {
    content: ""; position: absolute; z-index: 0;
    top: -120px; left: 50%; width: 520px; height: 320px;
    transform: translateX(-50%);
    background: radial-gradient(closest-side, rgba(244, 114, 182, 0.18), transparent 70%);
    filter: blur(24px); pointer-events: none;
}
.hero .container { position: relative; z-index: 1; }
.hero__title {
    font-size: clamp(1.8rem, 3.4vw, var(--fs-3xl));
    margin-bottom: var(--s-2);
    letter-spacing: -0.025em;
    /* "Free. Private." picks up a subtle indigo→pink gradient via a span. */
}
.hero__title .accent {
    background: linear-gradient(100deg, var(--c-accent) 10%, #db2777 90%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.hero__subtitle { color: var(--c-ink-soft); margin: 0 auto var(--s-5); max-width: 52ch; font-size: var(--fs-lg); }
.hero__search { display: flex; max-width: 580px; margin: 0 auto; }
.hero__search-input {
    flex: 1; padding: var(--s-4) var(--s-5);
    border: 1px solid var(--c-line); border-radius: var(--r-full);
    font-size: var(--fs-base); outline: none; background: #fff;
    box-shadow: var(--sh-md), 0 8px 30px rgba(225, 29, 99, 0.06);
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.hero__search-input::placeholder { color: var(--c-muted); }
.hero__search-input:focus {
    border-color: var(--c-accent);
    box-shadow: 0 0 0 4px var(--c-accent-soft), 0 10px 34px rgba(91, 75, 255, 0.12);
}

/* --- Tools section + filters --------------------------------------------- */
.tools { padding: var(--s-6) 0; }
.tools__filters {
    display: flex; flex-wrap: wrap; gap: var(--s-2);
    justify-content: center; margin-bottom: var(--s-5);
}
.chip {
    padding: var(--s-2) var(--s-4); border-radius: var(--r-full);
    border: 1px solid var(--c-line); background: #fff;
    font-size: var(--fs-sm); font-weight: 600; color: var(--c-ink-soft);
    cursor: pointer; font-family: inherit;
}
.chip:hover { border-color: var(--c-accent); }
.chip--active { background: var(--c-accent); color: #fff; border-color: var(--c-accent); }
.tools__empty { text-align: center; color: var(--c-muted); padding: var(--s-5) 0; }

/* --- Category groups (used on category hub pages) ------------------------- */
.tool-group { margin-bottom: var(--s-6); }
.tool-group > h2 { margin-bottom: var(--s-1); }
.tool-group__desc { color: var(--c-muted); font-size: var(--fs-sm); margin-bottom: var(--s-4); }

/* --- Tool grid (one flat, full-width grid) -------------------------------- */
.tool-grid {
    display: grid; gap: var(--s-4);
    grid-template-columns: repeat(5, 1fr);
    list-style: none; padding: 0; margin: 0;
}
/* On category pages each card sits in an <li>; stretch both so every card in a
   row is the same height regardless of description length. */
.tool-grid > li { display: flex; }
.tool-grid > li > .tool-card { width: 100%; height: 100%; }
.tool-card {
    position: relative;
    display: flex; flex-direction: column; gap: var(--s-2);
    padding: var(--s-5) var(--s-4);
    background: var(--c-surface); border: 1px solid var(--c-line);
    border-radius: var(--r-lg); box-shadow: var(--sh-sm);
    transition: transform .12s, box-shadow .12s, border-color .12s;
}
.tool-card:hover {
    transform: translateY(-2px); box-shadow: var(--sh-md);
    border-color: var(--c-accent); text-decoration: none;
}
/* Filtered-out cards (search + chips). Uses a class so we never clobber the
   grid's own display value. */
.tool-card.is-hidden { display: none; }
.tool-card__icon {
    width: 44px; height: 44px; border-radius: var(--r-md);
    display: grid; place-items: center;
    background: var(--c-accent-soft); color: var(--c-accent);
    margin-bottom: var(--s-1);
}
/* Per-tool colour tiles. Each .ico--{name} sets a soft tinted background with a
   matching saturated glyph colour, so every card reads distinctly (like the
   reference sites) instead of one flat purple everywhere. The class lives on
   the icon tile; if a tool has no colour mapping it falls back to accent. */
.ico--red    { background: #fdeaea; color: #e02f2f; }
.ico--orange { background: #fdefe0; color: #e07b1a; }
.ico--amber  { background: #fdf6da; color: #c79008; }
.ico--green  { background: #e4f7ec; color: #17924b; }
.ico--teal   { background: #ddf5f4; color: #0ea5a4; }
.ico--sky    { background: #e3f1fd; color: #1f81d6; }
.ico--blue   { background: #e6ecfe; color: #2f57e0; }
.ico--indigo { background: #eceafe; color: #5b4bff; }
.ico--violet { background: #f2e9fd; color: #8b3fe0; }
.ico--pink   { background: #fce7f3; color: #db2777; }
.ico--rose   { background: #fde7ec; color: #d6336c; }
.ico--slate  { background: #eaeef4; color: #4a6079; }
.tool-card__name { font-weight: 700; color: var(--c-ink); font-size: var(--fs-lg); line-height: 1.25; }
.tool-card__desc {
    color: var(--c-muted); font-size: var(--fs-sm); line-height: 1.5;
    /* Clamp to 3 lines so a long SEO blurb can't stretch a card to 6 lines and
       break the grid's visual rhythm. The full text still lives on the tool
       page; here it's just a teaser. */
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
    line-clamp: 3; overflow: hidden;
}
.tool-card__badges { position: absolute; top: var(--s-3); right: var(--s-3); display: flex; gap: 4px; }

/* --- Badges --------------------------------------------------------------- */
.badge {
    font-size: 0.65rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; padding: 2px 6px; border-radius: var(--r-full); color: #fff;
}
.badge--new { background: var(--c-badge-new); }
.badge--beta { background: var(--c-badge-beta); }
.badge--featured { background: var(--c-badge-featured); }
.badge--popular { background: var(--c-badge-popular); }

/* --- "Why" / trust points ------------------------------------------------- */
.why { padding: var(--s-6) 0; }
.why-grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(4, 1fr); }
.why-card {
    background: #fff; border: 1px solid var(--c-line);
    border-radius: var(--r-lg); padding: var(--s-4); text-align: center;
}
.why-card h3 { margin-bottom: var(--s-1); }
.why-card p { color: var(--c-muted); font-size: var(--fs-sm); margin: 0; }

/* --- How it works --------------------------------------------------------- */
.how { padding: var(--s-6) 0; }
.how-steps {
    display: grid; gap: var(--s-4); grid-template-columns: repeat(3, 1fr);
    list-style: none; padding: 0; margin: 0; counter-reset: step;
}
.how-steps li {
    background: #fff; border: 1px solid var(--c-line);
    border-radius: var(--r-lg); padding: var(--s-4); text-align: center;
}
.how-steps__num {
    display: inline-grid; place-items: center;
    width: 32px; height: 32px; margin-bottom: var(--s-2);
    border-radius: var(--r-full); background: var(--c-accent); color: #fff; font-weight: 700;
}

/* --- Popular / AI highlight ----------------------------------------------- */
.popular, .ai-highlight { padding: var(--s-6) 0; }

/* --- FAQ ------------------------------------------------------------------ */
.faq { padding: var(--s-6) 0; }
.faq .container { max-width: 820px; }
.faq-item, .faq details {
    background: #fff; border: 1px solid var(--c-line);
    border-radius: var(--r-md); padding: var(--s-3) var(--s-4); margin-bottom: var(--s-3);
}
.faq-item summary, .faq summary { font-weight: 600; cursor: pointer; }
.faq-item p, .faq p { margin: var(--s-2) 0 0; color: var(--c-ink-soft); }

/* --- Trust bar (stats) ---------------------------------------------------- */
.trust-bar { padding: var(--s-5) 0; background: var(--c-accent-soft); }
.trust-bar__grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4);
    text-align: center;
}
.trust-stat { display: flex; flex-direction: column; gap: 2px; }
.trust-stat__num { font-size: var(--fs-2xl); font-weight: 800; color: var(--c-accent); line-height: 1; }
.trust-stat__label { font-size: var(--fs-sm); color: var(--c-ink-soft); font-weight: 600; }

/* --- Use cases ------------------------------------------------------------ */
.usecases { padding: var(--s-6) 0; }
.usecase-grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(4, 1fr); }
.usecase-card {
    background: #fff; border: 1px solid var(--c-line);
    border-radius: var(--r-lg); padding: var(--s-5) var(--s-4);
}
.usecase-card h3 { margin-bottom: var(--s-2); }
.usecase-card p { color: var(--c-muted); font-size: var(--fs-sm); margin: 0; }

/* --- Testimonials --------------------------------------------------------- */
.testimonials { padding: var(--s-6) 0; }
.testimonial-grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(3, 1fr); }
.testimonial {
    background: #fff; border: 1px solid var(--c-line);
    border-radius: var(--r-lg); padding: var(--s-5); margin: 0;
}
.testimonial blockquote { margin: 0 0 var(--s-3); font-size: var(--fs-lg); line-height: 1.4; color: var(--c-ink); }
.testimonial figcaption { color: var(--c-muted); font-size: var(--fs-sm); font-weight: 600; }

/* --- Final CTA ------------------------------------------------------------ */
.cta { padding: var(--s-6) 0 var(--s-7); }
.cta__box {
    background: linear-gradient(135deg, var(--c-accent), var(--c-accent-dark));
    border-radius: var(--r-lg); padding: var(--s-7) var(--s-5);
    text-align: center; color: #fff;
}
.cta__box h2 { color: #fff; }
.cta__box p { color: rgba(255,255,255,.9); margin-bottom: var(--s-5); }
.cta__box .btn--primary { background: #fff; color: var(--c-accent); border-color: #fff; }
.cta__box .btn--primary:hover { background: rgba(255,255,255,.9); }
.btn--lg { padding: var(--s-3) var(--s-6); font-size: var(--fs-lg); }

/* --- Footer --------------------------------------------------------------- */
.site-footer {
    background: var(--c-ink); color: #c9c9db;
    padding: var(--s-7) 0 var(--s-5); margin-top: var(--s-7);
}
.site-footer a { color: #c9c9db; }
.site-footer a:hover { color: #fff; }
.footer-top {
    display: grid; gap: var(--s-5);
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    margin-bottom: var(--s-5);
}
.footer-brand__logo {
    display: inline-flex; align-items: center; gap: var(--s-2);
    color: #fff; font-weight: 800; font-size: var(--fs-lg);
}
.footer-brand__logo:hover { text-decoration: none; }
.footer-brand__tag {
    margin: var(--s-3) 0 0; max-width: 32ch;
    font-size: var(--fs-sm); line-height: 1.6; color: #9a9ab0;
}
.footer-col__title {
    color: #fff; font-size: var(--fs-sm); font-weight: 700;
    margin: 0 0 var(--s-3);
}
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: var(--s-2); font-size: var(--fs-sm); }
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,.12); padding-top: var(--s-4);
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s-3);
    font-size: var(--fs-sm); color: var(--c-muted);
}
.footer-copy { margin: 0; }
.footer-mail { color: #c9c9db; }

/* Social links under the footer brand blurb. Muted chips that brighten and
   lift to the accent on hover; icons inherit color via currentColor. */
.footer-social {
    list-style: none; padding: 0; margin: var(--s-4) 0 0;
    display: flex; flex-wrap: wrap; gap: var(--s-2);
}
.footer-social__link {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: var(--r-full);
    color: #c9c9db;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .10);
    transition: color .15s ease, background .15s ease, border-color .15s ease, transform .15s ease;
}
.footer-social__link:hover {
    color: #fff;
    background: var(--c-accent);
    border-color: var(--c-accent);
    transform: translateY(-2px);
}
.footer-social__link svg { display: block; }

/* Minimal footer (account pages): just the copyright bar, so drop the divider
   line and tighten the vertical padding. */
.site-footer--minimal { padding: var(--s-5) 0; }
.site-footer--minimal .footer-bottom { border-top: 0; padding-top: 0; }

/* --- Announcement bar (set from admin Settings) ---------------------------- */
.announce-bar {
    background: linear-gradient(120deg, var(--c-accent), #8b3fe0);
    color: #fff; text-align: center; font-size: 11px; font-weight: 600;
    padding: 4px var(--s-4);
}
.announce-bar__link {
    color: #fff; text-decoration: none;
    display: inline-flex; align-items: center; gap: var(--s-2);
}
.announce-bar__link:hover { text-decoration: underline; }
.announce-bar__cta {
    background: rgba(255,255,255,.2); border-radius: var(--r-full);
    padding: 1px var(--s-3); font-size: 10px; font-weight: 700;
    white-space: nowrap;
}
/* Cycling: only the active slide is visible; others are hidden in place. */
.announce-bar--cycle { position: relative; }
.announce-slide { display: none; }
.announce-slide.is-active { display: block; }

/* --- Contact form ---------------------------------------------------------- */
.contact-form {
    display: grid; gap: var(--s-4);
    background: #fff; border: 1px solid var(--c-line);
    border-radius: var(--r-lg); box-shadow: var(--sh-sm);
    padding: var(--s-5); margin-bottom: var(--s-6);
}
.contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.contact-form .opt-field input, .contact-form .opt-field textarea {
    width: 100%; padding: var(--s-3);
    border: 1px solid var(--c-line); border-radius: var(--r-md);
    font: inherit; font-size: var(--fs-sm); font-weight: 400; outline: none;
}
.contact-form .opt-field input:focus, .contact-form .opt-field textarea:focus { border-color: var(--c-accent); }
/* Inline validation: red border on the box + a small message right under it. */
.contact-form .is-invalid,
.contact-form .is-invalid:focus { border-color: #dc2626; }
.field-error { color: #dc2626; font-size: var(--fs-xs); line-height: 1.35; }

/* --- Promotion popup (once per browser session) ---------------------------- */
.promo {
    position: fixed; inset: 0; z-index: 200;
    display: flex; align-items: center; justify-content: center;
    padding: var(--s-4);
}
/* Critical: a class selector's `display:flex` beats the browser's default
   `[hidden]{display:none}`, so without this the overlay stays on screen (just
   invisible) whenever JS sets `hidden` — e.g. on repeat visits where the promo
   cookie is already set. The invisible full-screen layer then swallows every
   click, and its centered image-link navigates to the promo URL. This rule
   makes the `hidden` attribute truly hide (and un-clickable) the popup. */
.promo[hidden] { display: none !important; }
.promo__backdrop {
    position: absolute; inset: 0;
    background: rgba(15, 15, 35, .55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0; transition: opacity .22s ease;
}
.promo__card {
    position: relative; width: 100%; max-width: 440px;
    background: #fff; border-radius: 22px; overflow: hidden;
    box-shadow:
        0 1px 2px rgba(15, 15, 35, .10),
        0 12px 28px rgba(15, 15, 35, .22),
        0 32px 72px rgba(15, 15, 35, .30);
    opacity: 0; transform: translateY(14px) scale(.94);
    transition: opacity .22s ease, transform .26s cubic-bezier(.2, .9, .3, 1.15);
}
.promo.is-open .promo__backdrop { opacity: 1; }
.promo.is-open .promo__card { opacity: 1; transform: translateY(0) scale(1); }
.promo__close {
    position: absolute; top: 10px; right: 10px; z-index: 2;
    width: 34px; height: 34px; border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, .92); color: var(--c-ink);
    font-size: 22px; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(15, 15, 35, .25);
    transition: transform .15s ease, background .15s ease;
}
.promo__close:hover { transform: rotate(90deg); background: #fff; }
.promo__media { display: block; line-height: 0; }
.promo__media img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.promo__body { padding: var(--s-4) var(--s-5) var(--s-5); text-align: center; }
.promo__title {
    margin: 0 0 var(--s-2); font-size: var(--fs-xl); line-height: var(--lh-tight);
    letter-spacing: -0.01em;
}
.promo__text { margin: 0 0 var(--s-4); color: var(--c-ink-soft); font-size: var(--fs-sm); }
.promo__cta { min-width: 60%; }
@media (max-width: 480px) {
    .promo__card { max-width: 340px; }
    .promo__body { padding: var(--s-4); }
}
.contact-form .opt-field textarea { resize: vertical; min-height: 140px; }
.contact-form__bar {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--s-3); flex-wrap: wrap;
}
/* Honeypot lives off-screen; display:none would tip off smarter bots. */
.contact-form__hp {
    position: absolute; left: -9999px; top: -9999px;
    height: 1px; width: 1px; overflow: hidden;
}
@media (max-width: 560px) {
    .contact-form__row { grid-template-columns: 1fr; }
}

/* --- Static doc pages (About, Contact, Privacy, Terms, Security) ---------- */
.doc-page { max-width: 760px; margin: 0 auto; padding: var(--s-6) var(--s-4) var(--s-7); }
.doc-head { margin-bottom: var(--s-5); padding-bottom: var(--s-4); border-bottom: 1px solid var(--c-line); }
.doc-head h1 { font-size: var(--fs-2xl); margin: 0 0 var(--s-2); }
.doc-lede { color: var(--c-ink-soft); font-size: var(--fs-lg); margin: 0; }
.doc-updated { color: var(--c-muted); font-size: var(--fs-sm); margin-top: var(--s-2); }
.doc-body h2 { font-size: var(--fs-lg); margin: var(--s-5) 0 var(--s-2); }
.doc-body p, .doc-body li { color: var(--c-ink-soft); line-height: var(--lh-base); }
.doc-body ul { padding-left: var(--s-5); margin: var(--s-3) 0; }
.doc-body li { margin-bottom: var(--s-2); }
.doc-body a { color: var(--c-accent); }

/* --- Breadcrumb ----------------------------------------------------------- */
.breadcrumb {
    max-width: var(--container); margin: 0 auto; padding: var(--s-4) var(--s-4) 0;
    font-size: var(--fs-sm); color: var(--c-muted);
    display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap;
}

/* --- Tool page ------------------------------------------------------------ */
.tool-page { max-width: 1140px; margin: 0 auto; padding: var(--s-3) var(--s-4) var(--s-7);
    display: flex; flex-direction: column; }

/* The single in-content ad. By default (empty state) it sits BELOW the tool;
   once the runtime adds .is-loaded it moves ABOVE the tool. Everything else
   keeps its natural document order (order: 0). The hero (.tool-head) is
   collapsed on load, so "above the tool" reads as the top of the page. */
.tool-page > .ad-slot { order: 3; margin: var(--s-4) auto 0; width: fit-content; max-width: 100%; }
.tool-page.is-loaded > .ad-slot { order: -1; margin: 0 auto var(--s-4); }
.tool-page > .tool-head { order: 1; }
.tool-page > .tool-workspace,
.tool-page > .tool-app,
.tool-page > .ai-tool,
.tool-page > .util-tool,
.tool-page > .tool-workarea { order: 2; }
.tool-page > .tool-info,
.tool-page > .related-tools { order: 4; }
.tool-head { text-align: center; margin-bottom: var(--s-3); max-width: 720px; margin-left: auto; margin-right: auto; }
.tool-head h1 { font-size: clamp(1.6rem, 4vw, 2.3rem); line-height: 1.15; margin-bottom: var(--s-2); }
.tool-badges { display: flex; gap: 4px; justify-content: center; margin-bottom: var(--s-3); }
.tool-lede { color: var(--c-ink-soft); max-width: 60ch; margin: 0 auto; }

/* Once files are loaded the hero (title + badges + lede) is redundant — the
   sidebar carries the tool name — so we collapse it to reclaim vertical space. */
.tool-page.is-loaded .tool-head { display: none; }

/* The workspace spans the wide container, but the supporting reading content
   (intro, how-to steps, FAQs) stays narrow and centered for legibility. */
.tool-info { max-width: 820px; margin-left: auto; margin-right: auto; }
.tool-workarea { margin-bottom: var(--s-6); }
.tool-info__intro { color: var(--c-ink-soft); max-width: 70ch; margin: var(--s-5) 0 0; line-height: 1.7; }
.tool-info h2 { margin-top: var(--s-6); }
.tool-info .steps { list-style: none; padding: 0; counter-reset: s; }
.tool-info .steps li { padding: var(--s-2) 0; border-bottom: 1px solid var(--c-line); }

/* --- Tool workspace (two-column: canvas + settings sidebar) ---------------
   Class names here match exactly what the tool page (tool.php) and the client
   modules render at runtime. Keep them in sync with runtime.js / the modules.

   Layout: a CSS grid with the file canvas on the left and a settings sidebar on
   the right. The sidebar collapses below the canvas on narrow screens. Tools
   that need a big visual editor add .tool-workspace--wide to stack everything
   into one full-width column. */
.tool-workspace {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: var(--s-4);
    align-items: start;
    margin-bottom: var(--s-6);
}
.tool-workspace--wide { grid-template-columns: 1fr; }

/* When there are no files yet, the sidebar is hidden and the dropzone should
   span the whole width for a generous drop target. */
.tool-workspace .tool-sidebar[hidden] + noscript,
.tool-workspace:has(.tool-sidebar[hidden]) .tool-canvas { grid-column: 1 / -1; }

/* Empty-state dropzone must be an IDENTICAL size on every tool page (client,
   server, wide-editor) — the workspace grid state used to vary per tool type,
   leaving Merge/Compress/Repair with different-width boxes, and server tools
   (Protect/Repair) render less inner content so they came out shorter too.
   Force the same centered width AND height everywhere. */
.tool-workspace .dropzone,
.tool-workspace--wide .dropzone {
    max-width: 560px; width: 100%; margin-left: auto; margin-right: auto;
    min-height: 200px;
}

.tool-canvas { min-width: 0; display: flex; flex-direction: column; gap: var(--s-4); }

.dropzone {
    border: 2px dashed var(--c-line); border-radius: var(--r-lg);
    background: #fff; padding: var(--s-6) var(--s-5); text-align: center;
    cursor: pointer; transition: border-color .15s, background .15s;
    min-height: 170px; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    max-width: 640px; margin-left: auto; margin-right: auto;
}
.dropzone--over { border-color: var(--c-accent); background: var(--c-accent-soft); }
/* .dropzone sets display:flex, which would silently defeat the hidden attribute
   (author display beats the UA's [hidden] rule) — that left TWO upload zones on
   screen after a file was added. Force hidden to win. */
.dropzone[hidden] { display: none; }
.dropzone--soon { cursor: default; }
.dropzone:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.dropzone__inner { max-width: 520px; margin: 0 auto; }
.dropzone__icon { color: var(--c-accent); margin: 0 auto var(--s-3); }
.dropzone__title { font-size: var(--fs-lg); font-weight: 700; margin-bottom: var(--s-1); }
.dropzone__hint { color: var(--c-muted); font-size: var(--fs-sm); margin-bottom: 0; }

/* Empty-state picker: the prominent "Select PDF file" CTA, sitting above the
   "or drop PDF here" hint, like the reference design. */
.dropzone__select { box-shadow: var(--sh-md); margin-bottom: var(--s-3); }

/* --- In-content ad slot ---------------------------------------------------
   A reserved, labelled box for the admin's in-content ad unit. min-height
   holds space so the tool UI doesn't jump when the ad fills in. Rendered only
   when ads are enabled and a snippet exists (see layout/_ad.php). */
.ad-slot {
    display: block; text-align: center;
    width: fit-content; max-width: 100%;
    margin-left: auto; margin-right: auto;
    border: 2px solid #9a9ab0;
    padding: 0; font-size: 0;
    overflow: hidden;
}
.ad-slot__label { display: none; }
.ad-slot__unit { display: flex; align-items: center; justify-content: center; }
.ad-slot__unit > * { max-width: 100%; }

/* An inline "browse" trigger styled like a link but semantically a button. */
.linklike {
    border: 0; background: none; padding: 0; font: inherit;
    color: var(--c-accent); cursor: pointer; text-decoration: underline;
}

/* File preview area (left canvas, after files are added) */
.tool-files {
    background: var(--c-surface-2); border: 1px solid var(--c-line);
    border-radius: var(--r-lg); padding: var(--s-4);
}
.tool-files__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--s-3); margin-bottom: var(--s-3);
}
.tool-files__label { font-size: var(--fs-sm); font-weight: 700; color: var(--c-ink-soft); }

/* Selected-files preview grid (built by runtime.js). Small visual cards —
   image/PDF-page thumbnail on top, name + size below, remove on hover — laid
   out 4-up like the reference design. */
.file-list {
    list-style: none; padding: 0; margin: 0;
    display: grid; gap: var(--s-3);
    grid-template-columns: repeat(4, 1fr);
}
/* A single uploaded file should sit centered in the canvas, not pinned to the
   far-left column with an empty gap beside it. When the list holds exactly one
   card, collapse to a single centered column and cap the card's width. */
.file-list:has(.file-card:only-child) {
    grid-template-columns: minmax(0, 240px);
    justify-content: center;
}
.file-card {
    position: relative;
    background: #fff; border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    display: flex; flex-direction: column;
}
.file-card__thumb {
    min-height: 150px; display: grid; place-items: center;
    background: #fff; color: var(--c-muted);
    border-bottom: 1px solid var(--c-line); overflow: hidden;
    border-radius: var(--r-md) var(--r-md) 0 0;
}
.file-card__img { width: 100%; height: auto; display: block; }
.file-card__thumb canvas { width: 100%; height: auto; display: block; }
.file-card__meta { padding: var(--s-2); display: grid; gap: 1px; min-width: 0; }
.file-card__name {
    font-size: var(--fs-xs); font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.file-card__size { font-size: var(--fs-xs); color: var(--c-muted); }
.file-card__remove {
    position: absolute; top: 6px; right: 6px;
    width: 24px; height: 24px; border-radius: var(--r-full);
    border: 0; background: rgba(26, 26, 46, .55); color: #fff;
    font-size: var(--fs-sm); line-height: 1; cursor: pointer;
    display: grid; place-items: center;
    opacity: 0; transition: opacity .12s;
}
.file-card:hover .file-card__remove,
.file-card__remove:focus-visible { opacity: 1; }
.file-card__remove:hover { background: var(--c-danger); }

/* Hover tooltip pill: size + page count, centered over the thumbnail. Purely
   decorative — the same text is mirrored into the card's title attribute for
   keyboard/native access. */
.file-card__tip {
    position: absolute; left: 50%; top: -12px; transform: translate(-50%, -4px);
    z-index: 4; pointer-events: none; white-space: nowrap;
    padding: 3px 9px; border-radius: var(--r-full);
    background: rgba(26, 26, 46, .88); color: #fff;
    font-size: var(--fs-xs); font-weight: 600; line-height: 1.3;
    box-shadow: 0 2px 8px rgba(15, 15, 35, .25);
    opacity: 0; transition: opacity .12s, transform .12s;
}
.file-card:hover .file-card__tip,
.file-card:focus-within .file-card__tip { opacity: 1; transform: translate(-50%, 0); }

/* "See more" card at the end of a long list. */
.file-card--more { border-style: dashed; }
.file-card__more-btn {
    flex: 1; min-height: 200px; border: 0; background: transparent;
    font: inherit; font-size: var(--fs-sm); font-weight: 600;
    color: var(--c-accent); cursor: pointer;
}
.file-card__more-btn:hover { background: var(--c-accent-soft); }

/* Legacy horizontal rows (server-tool.js still renders these). */
.file-list__item {
    display: flex; align-items: center; gap: var(--s-3);
    background: #fff; border: 1px solid var(--c-line);
    border-radius: var(--r-md); padding: var(--s-3);
    grid-column: 1 / -1;
}
.file-list__name { flex: 1; font-size: var(--fs-sm); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-list__size { font-size: var(--fs-xs); color: var(--c-muted); }
.file-list__remove {
    border: 0; background: transparent; color: var(--c-muted);
    cursor: pointer; font-size: var(--fs-lg); line-height: 1; padding: 0 var(--s-2);
}
.file-list__remove:hover { color: var(--c-danger); }

/* --- Settings sidebar ----------------------------------------------------- */
.tool-sidebar {
    background: #fff; border: 1px solid var(--c-line);
    border-radius: var(--r-lg); box-shadow: var(--sh-sm);
    position: sticky; top: calc(var(--header-h, 64px) + var(--s-3));
    /* Cap the box to the viewport so the title header and the action bar stay
       visible even when the option list is long — the body scrolls between
       them rather than pushing the run button off-screen. */
    max-height: calc(100vh - var(--header-h, 64px) - var(--s-5));
    display: flex; flex-direction: column; overflow: hidden;
}
/* Same [hidden]-vs-display trap as the dropzone: keep the sidebar truly gone
   until runtime.js reveals it. */
.tool-sidebar[hidden] { display: none; }
/* Pinned header — never scrolls. */
.tool-sidebar__title {
    flex: 0 0 auto; margin: 0; padding: var(--s-4) var(--s-4) var(--s-3);
    font-size: var(--fs-lg); font-weight: 700;
    border-bottom: 1px solid var(--c-line);
}
/* Scrollable middle — the only part that moves when options overflow. */
.tool-sidebar__body {
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
    padding: var(--s-4);
}
.tool-sidebar__body:empty { display: none; }
/* Pinned footer — the primary action stays reachable at all times. */
.tool-sidebar__actions {
    flex: 0 0 auto;
    padding: var(--s-4); border-top: 1px solid var(--c-line);
    background: var(--c-surface-2); display: grid; gap: var(--s-2);
}

/* In the wide-editor layout the sidebar is only title + action bar; let it sit
   as a normal (non-sticky) full-width strip below the editor, with no viewport
   cap and the title inline rather than a pinned header. */
.tool-workspace--wide .tool-sidebar {
    position: static; max-height: none;
    flex-direction: row; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: var(--s-3);
}
.tool-workspace--wide .tool-sidebar__title { border-bottom: 0; padding: var(--s-4); }
.tool-workspace--wide .tool-sidebar__actions {
    border-top: 0; background: transparent; padding: var(--s-4);
    grid-auto-flow: column; justify-content: flex-end;
}
.tool-workspace--wide .tool-sidebar__actions .btn--block { width: auto; }

/* Options + per-tool option controls (opt-*) */
.tool-options { display: grid; gap: var(--s-4); }
.tool-options:empty { display: none; }
.opt-group { border: 1px solid var(--c-line); border-radius: var(--r-md); padding: var(--s-3) var(--s-4); margin: 0; }
.opt-group legend { font-size: var(--fs-sm); font-weight: 700; padding: 0 var(--s-2); }
.opt-radio, .opt-check { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); padding: var(--s-1) 0; cursor: pointer; }
.opt-field { display: grid; gap: var(--s-2); font-size: var(--fs-sm); font-weight: 600; }
.opt-field input[type="text"], .opt-field input[type="number"], .opt-field input[type="password"], .opt-field select, .opt-field input[type="range"] {
    width: 100%;
    padding: var(--s-2) var(--s-3); border: 1px solid var(--c-line);
    border-radius: var(--r-md); font-size: var(--fs-sm); font-family: inherit; outline: none; font-weight: 400;
}
.opt-field input:focus, .opt-field select:focus { border-color: var(--c-accent); }
/* Paired option inputs (e.g. crop X/Y, width/height) sit side by side. */
.opt-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.opt-note, .tool-note { font-size: var(--fs-sm); color: var(--c-muted); margin: 0; }

/* --- Split PDF — advanced options ----------------------------------------
   Only split.js renders `.split-*`, so nothing here can reach another tool.
   Sized for the 340px sidebar: the from/to pair sits two-up and the number
   inputs drop their own borders in favour of one on the wrapping label. */
.split-opts { display: grid; gap: var(--s-3); }

.split-modes { display: grid; gap: 2px; }
.split-mode {
    display: flex; align-items: flex-start; gap: var(--s-2);
    padding: var(--s-2); border-radius: var(--r-md);
    cursor: pointer; transition: background .12s ease;
}
.split-mode:hover { background: var(--c-surface-2); }
.split-mode input { flex: none; margin: 3px 0 0; accent-color: var(--c-accent); cursor: pointer; }
.split-mode__txt { display: grid; gap: 1px; }
.split-mode__t { font-size: var(--fs-sm); font-weight: 600; color: var(--c-ink); }
.split-mode__d { font-size: var(--fs-xs); font-weight: 400; color: var(--c-muted); line-height: 1.35; }
/* Highlight the chosen mode so the active panel below has a clear owner. */
.split-mode:has(input:checked) { background: var(--c-surface-2); }
.split-mode:has(input:checked) .split-mode__t { color: var(--c-accent); }

.split-panel { display: grid; gap: var(--s-3); }
.split-panel[hidden] { display: none; }

.split-ranges { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.split-range {
    border: 1px solid var(--c-line); border-radius: var(--r-md);
    background: var(--c-surface-2); padding: var(--s-2) var(--s-3);
}
.split-range__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--s-2); margin-bottom: var(--s-2);
}
.split-range__n {
    font-size: var(--fs-xs); font-weight: 700; color: var(--c-ink-soft);
    text-transform: uppercase; letter-spacing: .04em;
}
.split-range__del {
    border: 0; background: none; cursor: pointer; color: var(--c-muted);
    font-size: var(--fs-base); line-height: 1; padding: 2px 7px;
    border-radius: var(--r-sm);
}
.split-range__del:hover { color: var(--c-danger); background: #fff; }
.split-range__del[hidden] { display: none; }
.split-range__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }

.split-num {
    display: flex; align-items: center; gap: var(--s-2);
    background: #fff; border: 1px solid var(--c-line);
    border-radius: var(--r-md); padding: 4px var(--s-2); min-width: 0;
    cursor: text;
}
.split-num:focus-within { border-color: var(--c-accent); }
.split-num span { flex: none; font-size: var(--fs-xs); color: var(--c-muted); }
.split-num input {
    width: 100%; min-width: 0; border: 0; outline: none; background: transparent;
    font: inherit; font-size: var(--fs-sm); font-weight: 600; color: var(--c-ink);
    text-align: right; padding: 2px 0;
}

.split-add {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
    width: 100%; padding: var(--s-2) var(--s-3);
    border: 1px dashed color-mix(in srgb, var(--c-accent) 45%, var(--c-line));
    border-radius: var(--r-md); background: #fff;
    font: inherit; font-size: var(--fs-sm); font-weight: 600;
    color: var(--c-accent); cursor: pointer;
    transition: background .12s ease, border-color .12s ease;
}
.split-add:hover:not(:disabled) {
    background: color-mix(in srgb, var(--c-accent) 8%, #fff);
    border-color: var(--c-accent);
}
.split-add:disabled { opacity: .5; cursor: not-allowed; }
.split-add__plus { font-size: var(--fs-base); line-height: 1; }

.split-summary { margin: 0; font-size: var(--fs-xs); color: var(--c-muted); line-height: 1.45; }
.split-summary b { color: var(--c-ink); font-weight: 700; }

/* Compress image — live size display */
.compress-sizes {
    display: flex; align-items: center; gap: var(--s-3);
    padding: var(--s-2) var(--s-3);
    background: var(--c-surface-2); border-radius: var(--r-md);
    font-size: var(--fs-sm); color: var(--c-ink-soft);
}
.compress-size-item { display: flex; align-items: center; gap: var(--s-1); }
.compress-size-item strong { color: var(--c-ink); font-weight: 600; }
.compress-size-sep { color: var(--c-muted); font-size: var(--fs-xs); }

/* Rotate tool — Right/Left step buttons + angle display */
.rotate-controls {
    display: flex; align-items: center; gap: var(--s-3);
    margin-top: var(--s-2);
}
.rotate-btn {
    display: inline-flex; align-items: center; gap: var(--s-2);
    padding: var(--s-2) var(--s-4); border-radius: var(--r-full);
    border: 1.5px solid var(--c-line); background: var(--c-surface);
    color: var(--c-ink); font-size: var(--fs-sm); font-weight: 600;
    cursor: pointer; transition: background .15s, border-color .15s, color .15s;
}
.rotate-btn:hover { background: var(--c-accent-soft); border-color: var(--c-accent); color: var(--c-accent); }
.rotate-display {
    flex: 1; text-align: center; font-size: var(--fs-sm);
    font-weight: 700; color: var(--c-ink-soft); min-width: 70px;
}

/* Progress + spinner */
.tool-progress { text-align: center; padding: var(--s-6) 0; }
.spinner {
    width: 36px; height: 36px; margin: 0 auto var(--s-3);
    border: 3px solid var(--c-surface-3); border-top-color: var(--c-accent);
    border-radius: 50%; animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Result / downloads */
.tool-result {
    background: var(--c-accent-soft); border: 1px solid var(--c-accent);
    border-radius: var(--r-lg); padding: var(--s-6) var(--s-5); text-align: center;
}
.tool-result__check { color: var(--c-success); margin: 0 auto var(--s-2); }
.tool-result__msg { font-weight: 600; margin-bottom: var(--s-4); }
.tool-result__downloads { display: grid; gap: var(--s-2); justify-content: center; margin-bottom: var(--s-4); }
.download-link { text-decoration: none; }

/* Two-stage result: a short "processing" screen (reads like moving to a
   download page) that swaps to the ready/download screen. */
.tool-result__stage[hidden] { display: none; }
.tool-result__status {
    font-weight: 600; color: var(--c-ink-soft);
    margin-top: var(--s-3);
}
.tool-result__auto {
    font-size: var(--fs-sm); color: var(--c-ink-soft); margin: 0;
}

/* Error banner */
.tool-error {
    background: #fde8e8; color: #9b1c1c; border: 1px solid #f8b4b4;
    border-radius: var(--r-md); padding: var(--s-3) var(--s-4); margin: var(--s-3) 0; font-size: var(--fs-sm);
}

/* Organize: visual page grid */
.page-grid { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.page-cell {
    border: 1px solid var(--c-line); border-radius: var(--r-md);
    background: #fff; overflow: hidden; cursor: grab;
}
.page-cell--dragging { opacity: .4; }
.page-cell--deleted { opacity: .4; outline: 2px solid var(--c-danger); }
.page-cell__thumb { display: grid; place-items: center; padding: var(--s-2); background: var(--c-surface-2); }
.page-cell__thumb canvas { max-width: 100%; height: auto; box-shadow: var(--sh-sm); }
.page-cell__bar { display: flex; align-items: center; gap: var(--s-1); padding: var(--s-1) var(--s-2); }
.page-cell__num { flex: 1; font-size: var(--fs-xs); color: var(--c-muted); }
.page-cell__btn { border: 0; background: transparent; cursor: pointer; font-size: var(--fs-base); line-height: 1; padding: 2px 4px; color: var(--c-ink-soft); }
.page-cell__btn:hover { color: var(--c-accent); }

.is-hidden { display: none !important; }

/* --- Visual PDF editors (Edit / Annotate / Redact / Fill & Sign) ----------- */
.pdfed-bar {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2);
    background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-md);
    padding: var(--s-2) var(--s-3); margin-bottom: var(--s-3);
    position: sticky; top: calc(var(--header-h, 64px) + 8px); z-index: 5;
}
.pdfed-tool {
    border: 1px solid var(--c-line); background: #fff; border-radius: var(--r-full);
    padding: var(--s-1) var(--s-3); font: inherit; font-size: var(--fs-sm);
    font-weight: 600; cursor: pointer; color: var(--c-ink-soft);
}
.pdfed-tool:hover { background: var(--c-surface-3); }
.pdfed-tool.is-active { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
.pdfed-opt { display: inline-flex; align-items: center; gap: var(--s-1); font-size: var(--fs-xs); font-weight: 600; color: var(--c-muted); }
.pdfed-opt input { font: inherit; }

.pdfed-pages { display: grid; gap: var(--s-4); justify-items: center; }
.pdfed-page {
    position: relative; box-shadow: var(--sh-md); border-radius: 4px; overflow: hidden;
    background: #fff; max-width: 100%;
}
.pdfed-page canvas { display: block; max-width: 100%; height: auto; }
.pdfed-overlay { position: absolute; inset: 0; cursor: crosshair; touch-action: none; }
.pdfed-pagenum {
    position: absolute; top: 6px; left: 8px; z-index: 2;
    background: rgba(26,26,46,.65); color: #fff; font-size: var(--fs-xs);
    padding: 2px 8px; border-radius: var(--r-full); pointer-events: none;
}

/* Fill & Sign signature pad */
.pdfed-signpad {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3);
    background: #fff; border: 1px dashed var(--c-line); border-radius: var(--r-md);
    padding: var(--s-3); margin-bottom: var(--s-3);
}
.pdfed-signpad__label { font-size: var(--fs-sm); font-weight: 700; color: var(--c-ink-soft); }
.pdfed-signpad canvas {
    border: 1px solid var(--c-line); border-radius: var(--r-sm);
    background: #fcfcff; cursor: crosshair; touch-action: none; max-width: 100%;
}

/* --- Category page head --------------------------------------------------- */
.section-head { text-align: center; padding: var(--s-6) var(--s-4) var(--s-4); }
.section-head p { color: var(--c-muted); }
.tool-card__badge { align-self: flex-start; }

/* --- Error pages ---------------------------------------------------------- */
.error-page { text-align: center; padding: var(--s-8) var(--s-4); max-width: 560px; margin: 0 auto; }
.error-code { font-size: 4rem; font-weight: 800; color: var(--c-accent); line-height: 1; margin: 0; }

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 1100px) {
    .tool-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 900px) {
    .tool-grid { grid-template-columns: repeat(3, 1fr); }
    /* Tool workspace: sidebar drops below the canvas as a normal block. */
    .tool-workspace { grid-template-columns: 1fr; }
    .tool-sidebar { position: static; }
    .file-list { grid-template-columns: repeat(3, 1fr); }
    .why-grid { grid-template-columns: repeat(2, 1fr); }
    .usecase-grid { grid-template-columns: repeat(2, 1fr); }
    .testimonial-grid { grid-template-columns: 1fr; }
    .trust-bar__grid { grid-template-columns: repeat(2, 1fr); }
    .how-steps { grid-template-columns: 1fr; }
    /* Mobile header = two icon buttons: a hamburger (left) for nav options and
       a grid icon (right) for the profile/account. Hide the inline desktop nav
       and the avatar+name trigger label. */
    .site-nav { display: none; }
    .footer-top { grid-template-columns: 1fr 1fr; }
    .footer-brand { grid-column: 1 / -1; }

    /* Hamburger (nav options) sits on the far left, before the brand; the grid
       (profile) sits on the far right. Two clearly separated parts, like the
       reference. Flex order moves the hamburger ahead of the logo. */
    .navmenu { display: block; order: -1; }
    .navmenu .iconbtn { display: inline-flex; }
    .header-account { margin-left: auto; }  /* push the profile side to the right */

    /* Logged-in: show the user's real avatar (logo or Google photo) as the
       tap target — hide only the name and the generic fallback glyph, so a
       logo change in Settings shows up here too. */
    .usermenu__name { display: none; }
    .usermenu:not(.usermenu--guest) .usermenu__grid { display: none; }
    .usermenu__trigger { border: 0; background: transparent; width: 42px; height: 42px; justify-content: center; padding: 0; border-radius: 50%; }
    .usermenu__trigger .avatar { display: block; width: 32px; height: 32px; border-radius: 50%; }
    /* Guests still need the profile glyph (they have no avatar). */
    .usermenu--guest .usermenu__grid { display: inline-flex; align-items: center; justify-content: center; color: var(--c-ink-soft); }

    /* Guest: hide inline log in / sign up, show the grid icon menu. */
    .header-account > .header-account__link,
    .header-account > .btn { display: none; }
    .usermenu--guest { display: block; }
    .usermenu--guest .iconbtn { display: inline-flex; }
}
@media (max-width: 560px) {
    /* File preview cards: two per row on phones. */
    .file-list { grid-template-columns: repeat(2, 1fr); }
    /* One card per row. Each card lays out horizontally — icon top-left, title
       beside it, description spanning the full width below — so nothing wraps
       awkwardly or gets clipped. */
    .tool-grid { grid-template-columns: 1fr; }
    .tool-card {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "icon name"
            "desc desc";
        column-gap: var(--s-3); row-gap: var(--s-2);
        align-items: center;
        padding: var(--s-4);
    }
    .tool-card__icon { grid-area: icon; margin-bottom: 0; width: 40px; height: 40px; }
    .tool-card__name { grid-area: name; font-size: var(--fs-base); padding-right: 64px; }
    .tool-card__desc { grid-area: desc; }

    .why-grid { grid-template-columns: 1fr; }
    .usecase-grid { grid-template-columns: 1fr; }
    .footer-bottom { flex-direction: column; }
    .footer-top { grid-template-columns: 1fr; }
    .mega__panel {
        position: fixed; left: var(--s-3); right: var(--s-3);
        width: auto; top: calc(var(--header-h) + 4px);
    }
    .mega__grid { grid-template-columns: 1fr 1fr; }
}

/* --- Header account links ------------------------------------------------- */
.site-account { display: flex; align-items: center; gap: var(--s-3); margin-left: var(--s-3); }
.site-account a { font-size: var(--fs-sm); font-weight: 600; color: var(--c-ink-soft); }
.site-account .btn { padding: var(--s-1) var(--s-3); }

/* --- Auth pages (login / signup / forgot / reset) ------------------------- */
/* --- Full-page auth layout (Login / Create account) ----------------------- */
body.auth-page {
    min-height: 100vh; background: var(--c-surface-2);
    display: flex; align-items: center; justify-content: center;
}
.auth-page__wrap {
    width: 100%; max-width: 460px; padding: var(--s-5) var(--s-4);
    display: flex; flex-direction: column; align-items: center; gap: var(--s-4);
}
.auth-page__brand {
    font-size: var(--fs-xl); font-weight: 800; color: var(--c-ink);
    letter-spacing: -0.02em; text-decoration: none; align-self: flex-start;
}
.auth-page__brand:hover { color: var(--c-accent); }
.auth-page__main { width: 100%; }
.auth-page__footer { font-size: var(--fs-xs); color: var(--c-muted); text-align: center; }
.auth-page__footer a { color: var(--c-muted); }
.authp {
    background: #fff; border: 1px solid var(--c-line);
    border-radius: var(--r-lg); box-shadow: var(--sh-md);
    padding: var(--s-6) var(--s-5); display: grid; gap: var(--s-4);
}
.authp__title { font-size: var(--fs-xl); font-weight: 800; margin: 0; text-align: center; }
.authp__sub { color: var(--c-muted); font-size: var(--fs-sm); margin: 0; text-align: center; }
.authp__or {
    display: flex; align-items: center; gap: var(--s-3);
    color: var(--c-muted); font-size: var(--fs-sm);
}
.authp__or::before, .authp__or::after { content: ''; flex: 1; height: 1px; background: var(--c-line); }
.authp__links {
    text-align: center; font-size: var(--fs-sm); color: var(--c-muted);
    display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: center;
}
.authp__links a { color: var(--c-accent); }

/* --- Auth (old .auth class — forgot/reset/message pages) ------------------ */
.auth-card {
    background: #fff; border: 1px solid var(--c-line);
    border-radius: var(--r-lg); box-shadow: var(--sh-sm); padding: var(--s-6) var(--s-5);
}
.auth-card h1 { text-align: center; margin-bottom: var(--s-2); }
.auth-sub { text-align: center; color: var(--c-muted); font-size: var(--fs-sm); margin-bottom: var(--s-5); }
.auth-form { display: grid; gap: var(--s-4); }
.auth-form label { display: grid; gap: var(--s-1); font-size: var(--fs-sm); font-weight: 600; }
.auth-form input[type="text"], .auth-form input[type="email"], .auth-form input[type="password"] {
    padding: var(--s-3); border: 1px solid var(--c-line); border-radius: var(--r-md);
    font-size: var(--fs-base); font-family: inherit; outline: none; font-weight: 400;
}
.auth-form input:focus { border-color: var(--c-accent); }
.auth-form input:disabled { background: var(--c-surface-3); color: var(--c-muted); }
.auth-check { display: flex !important; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: var(--s-2) !important; font-weight: 400 !important; }
.auth-check span { flex: 0 0 auto; order: 1; }
.auth-check input { width: auto; flex: 0 0 auto; order: 2; margin: 0; }
.auth-hint { font-weight: 400; color: var(--c-muted); font-size: var(--fs-xs); }
.auth-links { text-align: center; font-size: var(--fs-sm); margin-top: var(--s-4); display: flex; gap: var(--s-2); justify-content: center; }
.auth-links span { color: var(--c-line); }
.auth-or { display: flex; align-items: center; gap: var(--s-3); color: var(--c-muted); font-size: var(--fs-sm); margin: var(--s-4) 0; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--c-line); }
.auth-card--center { text-align: center; }
.auth-status {
    width: 56px; height: 56px; margin: 0 auto var(--s-4);
    display: grid; place-items: center; border-radius: var(--r-full);
    font-size: var(--fs-2xl); font-weight: 800;
}
.auth-status.is-ok { background: #ecfdf3; color: var(--c-success); }
.auth-status.is-error { background: #fde8e8; color: var(--c-danger); }

/* --- Notice card (unsubscribe / resubscribe confirmation) ----------------- */
.doc-page--narrow { max-width: 560px; }
.notice-card {
    background: #fff; border: 1px solid var(--c-line);
    border-radius: var(--r-lg); box-shadow: var(--sh-sm);
    padding: var(--s-7) var(--s-5); text-align: center; margin: var(--s-6) auto;
}
.notice-card h1 { margin: 0 0 var(--s-3); font-size: var(--fs-xl); }
.notice-card p { color: var(--c-ink-soft); font-size: var(--fs-sm); line-height: 1.6; margin: 0 auto var(--s-3); max-width: 40ch; }
.notice-card__icon {
    width: 60px; height: 60px; margin: 0 auto var(--s-4);
    display: grid; place-items: center; border-radius: var(--r-full);
    font-size: 28px; font-weight: 800;
}
.notice-card__icon--ok { background: #ecfdf3; color: #05603a; }
.notice-card__icon--warn { background: #fef3c7; color: #92400e; }
.notice-card__sub { font-size: var(--fs-sm); }
.notice-card__home { margin-top: var(--s-5) !important; }
.notice-card__home a { color: var(--c-accent); font-weight: 600; }

.btn--block { width: 100%; justify-content: center; }
.btn--google { width: 100%; justify-content: center; background: #fff; border-color: var(--c-line); color: var(--c-ink); }
.btn--google:hover { background: var(--c-surface-3); text-decoration: none; }
.btn--danger { background: var(--c-danger); color: #fff; }
.btn--danger:hover { background: #b91c1c; text-decoration: none; }

.alert { border-radius: var(--r-md); padding: var(--s-3) var(--s-4); font-size: var(--fs-sm); margin-bottom: var(--s-4); }
.alert--ok { background: #ecfdf3; color: #05603a; border: 1px solid #a6f4c5; }
.alert--error { background: #fde8e8; color: #9b1c1c; border: 1px solid #f8b4b4; }

/* --- Account area (dashboard / history / settings) ------------------------ */
.account {
    max-width: var(--container); margin: 0 auto; padding: var(--s-6) var(--s-4);
    display: grid; grid-template-columns: 200px 1fr; gap: var(--s-6); align-items: start;
}
.account-nav {
    display: grid; gap: var(--s-1); position: sticky; top: calc(var(--s-6) + 60px);
    background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg);
    padding: var(--s-3); box-shadow: var(--sh-sm);
}
.account-nav a {
    padding: var(--s-2) var(--s-3); border-radius: var(--r-md);
    color: var(--c-ink-soft); font-weight: 600; font-size: var(--fs-sm);
}
.account-nav a:hover { background: var(--c-surface-3); text-decoration: none; }
.account-nav a.is-active { background: var(--c-accent-soft); color: var(--c-accent); }

/* Profile hero — gradient banner with the avatar overlapping its lower edge. */
.profile-hero {
    background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg);
    overflow: hidden; box-shadow: var(--sh-sm); margin-bottom: var(--s-5);
}
.profile-hero__banner {
    height: 96px;
    background: linear-gradient(120deg, var(--c-accent), #8b3fe0 55%, #db2777);
}
.profile-hero__body {
    display: flex; align-items: flex-end; gap: var(--s-4);
    padding: 0 var(--s-5) var(--s-4); margin-top: -40px; flex-wrap: wrap;
}
.profile-hero__avatar { flex: none; }
.profile-hero__avatar .avatar {
    width: 96px; height: 96px; border: 4px solid #fff; border-radius: var(--r-full);
    box-shadow: var(--sh-sm);
}
.profile-hero__info { flex: 1 1 auto; padding-bottom: var(--s-1); }
.profile-hero__name { margin: 0; font-size: var(--fs-xl); }
.profile-hero__email {
    margin: var(--s-1) 0 0; color: var(--c-muted); font-size: var(--fs-sm);
    display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
}
.profile-hero__plan {
    align-self: center; margin-left: auto;
    background: var(--c-accent-soft); color: var(--c-accent);
    font-weight: 700; font-size: var(--fs-xs); text-transform: uppercase;
    letter-spacing: .04em; padding: var(--s-2) var(--s-3); border-radius: var(--r-full);
}
.account-main h2 { margin-top: var(--s-6); }
.account-main h2:first-of-type { margin-top: var(--s-4); }
.account-note { color: var(--c-muted); font-size: var(--fs-sm); }
.account-danger-title { color: var(--c-danger); }
.account-form { display: grid; gap: var(--s-4); max-width: 420px; }

/* Account dashboard tiles */
.account-cards { display: grid; gap: var(--s-4); grid-template-columns: repeat(3, 1fr); margin-bottom: var(--s-5); }
.account-tile {
    background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg);
    padding: var(--s-4); display: grid; gap: var(--s-1);
    transition: transform .12s, box-shadow .12s;
}
.account-tile:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }
.account-tile__ic {
    width: 38px; height: 38px; border-radius: var(--r-md);
    display: grid; place-items: center; margin-bottom: var(--s-2);
}
.account-tile__label { font-size: var(--fs-xs); color: var(--c-muted); text-transform: uppercase; letter-spacing: .04em; }
.account-tile__value { font-size: var(--fs-lg); font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.account-empty { color: var(--c-muted); font-size: var(--fs-sm); }

/* Recent-activity table (metadata only) */
.table-wrap { overflow-x: auto; }
.account-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.account-table th, .account-table td { text-align: left; padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--c-line); white-space: nowrap; }
.account-table th { color: var(--c-muted); font-weight: 600; }

/* Badge variants used in account/admin (warn/ok) */
.badge--warn { background: var(--c-warning); color: #fff; }
.badge--ok { background: var(--c-success); color: #fff; }

/* --- AI tool UI (text in, text out) ---------------------------------------
   Centered at a comfortable reading width so the textarea and its action bar
   don't sprawl across the full page on desktop (which pushed the Summarize
   button far off to the right). Matches the utility card width for a
   consistent workspace size across tool types. */
.ai-tool { display: grid; gap: var(--s-4); margin-bottom: var(--s-6);
    max-width: 820px; margin-left: auto; margin-right: auto; width: 100%; }

/* Extra controls (translate's from/to, etc.) sit in a neat responsive row. */
.ai-tool__extra { max-width: 340px; }
/* When a tool has more than one extra (e.g. Translate: from + to), let them
   sit side by side on wider screens instead of stacking full-width. */
.ai-tool__extra + .ai-tool__extra { margin-top: 0; }
@media (min-width: 560px) {
    .ai-tool__extra { max-width: none; }
    .ai-tool:has(.ai-tool__extra + .ai-tool__extra) .ai-tool__extra {
        display: inline-grid; width: calc(50% - (var(--s-3) / 2));
        vertical-align: top;
    }
    .ai-tool:has(.ai-tool__extra + .ai-tool__extra) .ai-tool__extra:first-of-type {
        margin-right: var(--s-3);
    }
}
.ai-tool .opt-field {
    display: grid; gap: var(--s-2);
    font-size: var(--fs-sm); font-weight: 600; color: var(--c-ink);
}
.ai-tool select,
.ai-tool input[type="text"] {
    width: 100%; padding: var(--s-3);
    border: 1px solid var(--c-line); border-radius: var(--r-md);
    font: inherit; background: #fff; outline: none;
    transition: border-color .15s, box-shadow .15s;
}

/* The main text box: roomier, softer, with a clear focus ring. */
.ai-tool textarea {
    width: 100%; padding: var(--s-4); min-height: 220px;
    border: 1px solid var(--c-line); border-radius: var(--r-lg);
    background: var(--c-surface-2, #fbfbfd);
    font: inherit; line-height: 1.65; resize: vertical; outline: none;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.ai-tool textarea::placeholder { color: var(--c-muted); }
.ai-tool textarea:focus,
.ai-tool select:focus,
.ai-tool input[type="text"]:focus {
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent) 18%, transparent);
    background: #fff;
}

.ai-tool__bar {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--s-3); flex-wrap: wrap;
}
.ai-tool__hint { color: var(--c-muted); font-size: var(--fs-xs); flex: 1; min-width: 200px; }
.ai-tool__bar .btn { min-width: 140px; }

/* Result card: accent-tinted header bar, generous body, subtle lift. */
.ai-tool__output {
    border: 1px solid var(--c-line); border-radius: var(--r-lg);
    background: #fff; overflow: hidden; box-shadow: var(--sh-sm);
}
.ai-tool__output-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--s-3) var(--s-4);
    background: color-mix(in srgb, var(--c-accent) 8%, #fff);
    border-bottom: 1px solid var(--c-line);
    font-size: var(--fs-sm); font-weight: 700; color: var(--c-ink);
}
.ai-tool__result {
    padding: var(--s-4) var(--s-5); word-wrap: break-word; overflow-wrap: anywhere;
    line-height: 1.7; font-size: var(--fs-base); color: var(--c-ink);
}
/* Rendered Markdown inside the result panel (headings, lists, bold, rules). */
.ai-tool__result > *:first-child { margin-top: 0; }
.ai-tool__result > *:last-child { margin-bottom: 0; }
.ai-tool__result p { margin: 0 0 var(--s-3); }
.ai-tool__result h1,
.ai-tool__result h2,
.ai-tool__result h3,
.ai-tool__result h4,
.ai-tool__result h5,
.ai-tool__result h6 {
    margin: var(--s-5) 0 var(--s-2); line-height: 1.3; font-weight: 700; color: var(--c-ink);
}
.ai-tool__result h1 { font-size: var(--fs-xl); }
.ai-tool__result h2 { font-size: var(--fs-lg); }
.ai-tool__result h3,
.ai-tool__result h4,
.ai-tool__result h5,
.ai-tool__result h6 { font-size: var(--fs-base); }
.ai-tool__result ul,
.ai-tool__result ol { margin: 0 0 var(--s-3); padding-left: 1.4em; }
.ai-tool__result li { margin: 0 0 var(--s-1); }
.ai-tool__result strong { font-weight: 700; }
.ai-tool__result em { font-style: italic; }
.ai-tool__result code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9em; background: color-mix(in srgb, var(--c-ink) 8%, transparent);
    padding: 0.1em 0.35em; border-radius: 4px;
}
.ai-tool__result a { color: var(--c-accent); text-decoration: underline; }
.ai-tool__result hr {
    border: 0; border-top: 1px solid var(--c-line);
    margin: var(--s-4) 0;
}

/* --- Utility widgets (Phase 5) -------------------------------------------
   Utilities build their own UI inside .util-tool. It's now a white card so the
   controls read as a tidy panel instead of loose elements on the page. */
.util-tool {
    /* width:100% is required: .tool-page is a flex column, and margin:0 auto on
       a flex item cancels the default cross-axis stretch — without an explicit
       width the card collapses to its content (~315px) instead of filling up to
       the 820px cap. */
    max-width: 820px; width: 100%; margin: 0 auto;
    background: #fff; border: 1px solid var(--c-line);
    border-radius: var(--r-lg); box-shadow: var(--sh-sm);
    padding: var(--s-5);
}
/* Safety net: no control may exceed the card. File inputs in particular have an
   intrinsic width (the "Choose File / No file chosen" text) that ignores
   width:100%, so cap it here to stop right-side overflow on phones. */
.util-tool input, .util-tool select, .util-tool textarea { max-width: 100%; }
.util-tool input[type="file"] { width: 100%; }
/* Keep the label-over-control grid (with a real gap) inside utility tools.
   This was display:block before, which glued every label to its input across
   ALL utility tools (QR, Loan/EMI, Age/Date, Password, …). */
.util-tool .opt-field {
    display: grid; gap: var(--s-2);
    margin-bottom: var(--s-4); font-size: var(--fs-sm); font-weight: 600;
}
/* Rows several util modules render but that had no CSS (hence the mess):
   a two-up field row and a compact inline input. */
.util-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); margin-bottom: var(--s-3); }
.util-input-sm {
    width: 100%; padding: var(--s-2) var(--s-3);
    border: 1px solid var(--c-line); border-radius: var(--r-md);
    font-size: var(--fs-sm); font-family: inherit; outline: none;
    background: #fff; color: var(--c-ink);
}
.util-input-sm:focus { border-color: var(--c-accent); }

/* Stat cards (Word Counter and friends): a tidy grid of number-over-label
   tiles spanning the full card width. These classes were rendered by the
   modules but never styled — which is why the stats collapsed into a corner. */
.util-stats {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: var(--s-3); margin-bottom: var(--s-4);
}
.util-stat {
    background: var(--c-surface-2); border: 1px solid var(--c-line);
    border-radius: var(--r-md); padding: var(--s-3);
    display: grid; gap: 2px; text-align: center; min-width: 0;
}
.util-stat__num {
    font-size: var(--fs-xl); font-weight: 800; color: var(--c-accent);
    line-height: 1.15; font-variant-numeric: tabular-nums;
    min-width: 0; overflow-wrap: anywhere;
}
.util-stat__label { font-size: var(--fs-xs); color: var(--c-muted); font-weight: 600; }

/* Stopwatch / Timer: centered clock layout. The display is the hero — a big
   tabular-numerals readout on a soft panel — with mode tabs above and the
   Start/Reset actions below, all centered so the card has no dead space. */
.util-tabs {
    display: flex; justify-content: center; gap: var(--s-2);
    margin-bottom: var(--s-4);
}
.util-timer__display {
    font-size: clamp(3rem, 9vw, 4.5rem); font-weight: 800;
    font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
    color: var(--c-ink); text-align: center; line-height: 1.1;
    background: var(--c-surface-2); border: 1px solid var(--c-line);
    border-radius: var(--r-lg); padding: var(--s-6) var(--s-4);
    margin-bottom: var(--s-4);
}
.util-actions {
    display: flex; justify-content: center; gap: var(--s-3);
}
.util-actions .btn { min-width: 120px; justify-content: center; }
/* Countdown minutes/seconds inputs sit centered above the clock. */
.util-tool .util-row { justify-content: center; max-width: 320px; margin: 0 auto var(--s-3); }

/* Unit Converter: Category row with air below it, then FROM ⇅ TO columns with
   real spacing, then the live result banner. */
.uc-category { margin-bottom: var(--s-5) !important; }
/* Gap between the "Category" label text and its dropdown (the .opt-field grid
   gap is overridden by .util-tool's display:block, so restore it here). */
.uc-category select { margin-top: var(--s-2); }
.uc-grid {
    display: grid; grid-template-columns: 1fr auto 1fr;
    gap: var(--s-4); align-items: center; margin-bottom: var(--s-4);
}
.uc-side { display: grid; gap: var(--s-3); min-width: 0; }
.uc-swap {
    width: 44px; height: 44px; border-radius: var(--r-full);
    border: 1px solid var(--c-line); background: var(--c-accent-soft);
    color: var(--c-accent); font-size: var(--fs-lg); font-weight: 700;
    cursor: pointer; align-self: center; justify-self: center;
    transition: background .15s, color .15s, transform .1s;
}
.uc-swap:hover { background: var(--c-accent); color: #fff; transform: scale(1.06); }

@media (max-width: 560px) {
    .uc-grid { grid-template-columns: 1fr; }
    .uc-swap { transform: rotate(0); margin: calc(var(--s-2) * -1) auto; }
}
.util-input {
    width: 100%; padding: var(--s-3);
    border: 1px solid var(--c-line); border-radius: var(--r-md);
    font-size: var(--fs-base); font-family: inherit; outline: none;
    background: #fff; color: var(--c-ink);
}
.util-input:focus { border-color: var(--c-accent); }
textarea.util-input { min-height: 120px; resize: vertical; }
.util-mono { font-family: var(--font-mono); font-size: var(--fs-sm); }
.util-select {
    width: 100%; padding: var(--s-3);
    border: 1px solid var(--c-line); border-radius: var(--r-md);
    font-size: var(--fs-base); background: #fff; outline: none;
}
.util-select:focus { border-color: var(--c-accent); }
.util-output {
    padding: var(--s-4); background: var(--c-surface-3);
    border-radius: var(--r-md); text-align: center;
    font-size: var(--fs-lg); font-weight: 700; color: var(--c-ink);
}
.util-status { font-size: var(--fs-sm); font-weight: 600; margin: var(--s-2) 0; min-height: 1.2em; }
.util-status.is-ok { color: var(--c-success); }
.util-status.is-error { color: var(--c-danger); }
.util-btn-row { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-3) 0; }
.util-grid { display: grid; gap: var(--s-3); grid-template-columns: 1fr 1fr; }
.util-check { display: flex; align-items: center; gap: var(--s-2); font-weight: 500; }
/* Checkbox group (Password Generator): two tidy columns with real row gaps,
   and clear space before whatever follows (the Generate button). */
.util-checks {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-2) var(--s-4); margin: var(--s-4) 0 var(--s-5);
}
/* Output + Copy pairs: the value takes the width, the button stays compact. */
.util-copyrow {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--s-3); align-items: center; margin-bottom: var(--s-4);
}
/* Buttons rendered directly into a utility card never touch the control
   above them. */
.util-tool > div > .btn, .util-tool [data-role="mount"] > div > .btn { margin-top: var(--s-2); }
.util-check input { width: auto; }

/* QR / barcode output */
.util-qr__out {
    display: flex; justify-content: center; padding: var(--s-5);
    background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-md);
    margin: var(--s-4) 0; min-height: 80px; overflow: hidden;
}
/* qrcodejs renders a canvas at the literal pixel size (up to 512px). Constrain
   it so it never overflows a narrow phone screen. */
.util-qr__out canvas, .util-qr__out img { max-width: 100%; height: auto; }

/* Hash results */
.util-hash-results { display: grid; gap: var(--s-2); margin: var(--s-4) 0; }
.util-hash-row {
    display: grid; grid-template-columns: 70px 1fr auto; gap: var(--s-2);
    align-items: center; padding: var(--s-2);
    background: var(--c-surface-3); border-radius: var(--r-sm);
}
.util-hash-name { font-weight: 700; font-size: var(--fs-xs); text-transform: uppercase; color: var(--c-muted); }
.util-hash-val { font-family: var(--font-mono); font-size: var(--fs-xs); word-break: break-all; }

/* Color picker */
.cp-canvas { display: block; width: 100%; max-width: 100%; height: auto; border-radius: var(--r-md); border: 1px solid var(--c-line); cursor: crosshair; }
.cp-native { width: 60px; height: 40px; border: 1px solid var(--c-line); border-radius: var(--r-sm); background: none; cursor: pointer; }
.cp-readout { display: flex; align-items: center; gap: var(--s-4); margin: var(--s-4) 0; }
.cp-swatch { width: 64px; height: 64px; border-radius: var(--r-md); border: 1px solid var(--c-line); flex: none; }
.cp-out { font-family: var(--font-mono); font-size: var(--fs-sm); }
.cp-fields { display: grid; gap: var(--s-2); }
.cp-row { display: flex; align-items: center; gap: var(--s-2); }

@media (max-width: 560px) {
    .util-grid { grid-template-columns: 1fr; }
    .util-row { grid-template-columns: 1fr; }
    /* Stat tiles: stack in a SINGLE column on phones. Two-up squeezed the long
       figures (e.g. EMI's "12,165,836.57") wider than their tile, so the boxes
       spilled outside the card. One column gives each tile the full card width
       and keeps everything inside the box. */
    .util-stats { grid-template-columns: 1fr !important; }
    .util-stat__num { font-size: var(--fs-lg); }
    .util-hash-row { grid-template-columns: 60px 1fr; }
    /* Color picker: stack swatch + fields vertically on narrow screens. */
    .cp-readout { flex-wrap: wrap; }
    .cp-swatch { width: 48px; height: 48px; }
}

/* --- Content pages: blog + how-to (Phase 6) ------------------------------ */
.content-page { max-width: 760px; margin: 0 auto; padding: var(--s-5) 0; }
.content-head { margin-bottom: var(--s-5); }
.content-head h1 { margin-bottom: var(--s-2); }
.content-meta { color: var(--c-muted); font-size: var(--fs-sm); }
.content-hero {
    width: 100%; border-radius: var(--r-lg);
    margin: var(--s-4) 0; border: 1px solid var(--c-line);
}
.content-body { line-height: var(--lh-base); color: var(--c-ink); font-size: var(--fs-lg); }
.content-body h2 { margin-top: var(--s-6); }
.content-body h3 { margin-top: var(--s-5); }
.content-body p, .content-body ul, .content-body ol { margin-bottom: var(--s-4); }
.content-body ul, .content-body ol { padding-left: var(--s-5); }
.content-body li { margin-bottom: var(--s-2); }
.content-body pre {
    background: var(--c-ink); color: #e6e6ef; padding: var(--s-4);
    border-radius: var(--r-md); overflow-x: auto; font-family: var(--font-mono);
    font-size: var(--fs-sm); margin-bottom: var(--s-4);
}
.content-body code {
    font-family: var(--font-mono); font-size: 0.9em;
    background: var(--c-surface-3); padding: 1px 5px; border-radius: var(--r-sm);
}
.content-body pre code { background: none; padding: 0; }
.content-body blockquote {
    border-left: 3px solid var(--c-accent); margin: 0 0 var(--s-4);
    padding-left: var(--s-4); color: var(--c-ink-soft);
}
.content-body a { text-decoration: underline; }

/* Blog index post list */
.post-list { display: grid; gap: var(--s-4); max-width: 760px; margin: 0 auto; }
.post-card {
    background: #fff; border: 1px solid var(--c-line);
    border-radius: var(--r-lg); padding: var(--s-5); box-shadow: var(--sh-sm);
}
.post-card__title { margin-bottom: var(--s-1); }
.post-card__title a { color: var(--c-ink); }
.post-card__meta { color: var(--c-muted); font-size: var(--fs-sm); margin-bottom: var(--s-2); }
.post-card__excerpt { color: var(--c-ink-soft); margin-bottom: var(--s-3); }
.post-card__more { font-weight: 600; }

/* Related-tools module on tool pages */
.related-tools { margin-top: var(--s-7); }
.related-tools h2 { margin-bottom: var(--s-4); }

/* --- Reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition: none !important; }
}

@media (max-width: 700px) {
    .account { grid-template-columns: 1fr; gap: var(--s-4); padding: var(--s-4) var(--s-3); }
    .account-main { min-width: 0; }
    .account-nav { display: none; }
    .account-cards { grid-template-columns: repeat(2, 1fr); gap: var(--s-3); }
    .profile-hero__body { justify-content: center; text-align: center; }
    .profile-hero__info { flex-basis: 100%; }
    .profile-hero__email { justify-content: center; }
    .profile-hero__plan { margin-left: 0; }
    .verify-banner { flex-direction: column; gap: var(--s-3); }
    .verify-banner__action { width: 100%; }
    .verify-banner__action .btn { width: 100%; }
    .avatar-choices { gap: var(--s-2); }
    .banner-choices { gap: var(--s-2); }
    .banner-swatch { width: 72px; }
    .auth-form, .admin-form { max-width: 100%; }
}

@media (max-width: 400px) {
    .account-cards { grid-template-columns: 1fr; }
}

/* --- Account: verify-email banner, plan card, Pro/VIP extras -------------- */

/* Prompt shown to unverified users on their profile (verify => free Pro). */
.verify-banner {
    display: flex; align-items: flex-start; gap: var(--s-4);
    background: linear-gradient(120deg, color-mix(in srgb, var(--c-accent) 10%, #fff), #fff);
    border: 1px solid color-mix(in srgb, var(--c-accent) 30%, var(--c-line));
    border-radius: var(--r-lg); padding: var(--s-4) var(--s-5);
    margin-bottom: var(--s-5); box-shadow: var(--sh-sm); flex-wrap: wrap;
}
.verify-banner__ic {
    flex: none; width: 40px; height: 40px; border-radius: var(--r-md);
    display: grid; place-items: center;
    background: var(--c-accent-soft); color: var(--c-accent);
}
.verify-banner__body { flex: 1 1 260px; }
.verify-banner__body strong { display: block; font-size: var(--fs-base); margin-bottom: 2px; }
.verify-banner__body p { margin: 0; color: var(--c-muted); font-size: var(--fs-sm); }
.verify-banner__action { flex: none; align-self: center; }

/* Plan summary card on the Plan & usage page. */
.plan-card {
    background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg);
    padding: var(--s-5); box-shadow: var(--sh-sm); margin-bottom: var(--s-5);
}
.plan-card--pro {
    border-color: transparent;
    background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(120deg, #f59e0b, #db2777) border-box;
    border: 1.5px solid transparent;
}
.plan-card__head { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3); }
.plan-card__badge {
    background: var(--c-accent-soft); color: var(--c-accent);
    font-weight: 800; font-size: var(--fs-xs); text-transform: uppercase;
    letter-spacing: .05em; padding: var(--s-2) var(--s-3); border-radius: var(--r-full);
}
.plan-card__badge--pro { background: linear-gradient(120deg, #f59e0b, #db2777); color: #fff; }
.plan-card__tag {
    font-size: var(--fs-xs); font-weight: 800; letter-spacing: .08em;
    color: #b45309;
}
.plan-card__lead { margin: 0 0 var(--s-3); color: var(--c-ink); font-size: var(--fs-base); }
.plan-card__lead:last-child { margin-bottom: 0; }
/* Breathing room between the card's CTA button and the usage tiles below. */
.plan-card form { margin-top: var(--s-4); margin-bottom: 0; }
.plan-card { margin-bottom: var(--s-6); }

/* Recent-activity list: fold long histories behind a "Show all" toggle. */
.runs-block .run-row--extra { display: none; }
.runs-toggle-input:checked ~ .account-table .run-row--extra { display: table-row; }
.runs-toggle {
    display: inline-block; margin-top: var(--s-4); cursor: pointer;
    color: var(--c-accent); font-weight: 700; font-size: var(--fs-sm);
    user-select: none;
}
.runs-toggle:hover { text-decoration: underline; }
.runs-toggle .runs-toggle__less { display: none; }
.runs-toggle-input:checked ~ .runs-toggle .runs-toggle__more { display: none; }
.runs-toggle-input:checked ~ .runs-toggle .runs-toggle__less { display: inline; }

/* Daily-AI usage meter (free tier). */
.usage-meter { margin: 0 0 var(--s-5); }
.usage-meter__bar {
    height: 8px; border-radius: var(--r-full); background: var(--c-surface-3);
    overflow: hidden; margin-bottom: var(--s-2);
}
.usage-meter__bar span {
    display: block; height: 100%;
    background: linear-gradient(90deg, var(--c-accent), #db2777);
}
.usage-meter__note { margin: 0; color: var(--c-muted); font-size: var(--fs-sm); }

/* "Pro" pill next to VIP settings headings. */
.badge--pro {
    background: linear-gradient(120deg, #f59e0b, #db2777); color: #fff;
    font-size: var(--fs-xs); font-weight: 800; letter-spacing: .04em;
    padding: 2px 8px; border-radius: var(--r-full); vertical-align: middle;
    text-transform: uppercase;
}

/* VIP logo swatches get a subtle gold ring so they read as premium. */
.avatar-choice--vip.is-selected { border-color: #f59e0b; }
.avatar-choice--vip:focus-within { border-color: #f59e0b; }

/* VIP profile banner (applied inline via style attr) — a touch taller. */
.profile-hero__banner--vip { height: 110px; }

/* VIP banner picker swatches. */
.banner-choices { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-bottom: var(--s-3); }
.banner-choice {
    position: relative; cursor: pointer; border: 2px solid transparent;
    border-radius: var(--r-md); padding: 3px; display: grid; gap: 4px; justify-items: center;
}
.banner-choice.is-selected { border-color: #f59e0b; }
.banner-choice:focus-within { border-color: #f59e0b; }
.banner-choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.banner-swatch {
    width: 96px; height: 40px; border-radius: var(--r-sm); border: 1px solid var(--c-line);
    display: block;
}
.banner-swatch--default { background: linear-gradient(120deg, var(--c-accent), #8b3fe0 55%, #db2777); }
.banner-choice__label { font-size: var(--fs-xs); color: var(--c-muted); font-weight: 600; }