/* AlphaPDF Precision — shared business design system */
:root {
  --ink: #0f172a;
  --muted: #526071;
  --paper: #f6f8fb;
  --paper-deep: #eef2f6;
  --white: #ffffff;
  --coral: #2563eb;
  --coral-dark: #1d4ed8;
  --violet: #7c3aed;
  --blue: #2563eb;
  --green: #15803d;
  --amber: #b45309;
  --pink: #be185d;
  --line: #d8e0ea;
  --shadow: 0 16px 44px rgba(15,23,42,.1);
  --radius: 12px;
  --surface-subtle: #f6f8fb;
  --surface-blue: #eff6ff;
  --canvas: #e4e9f0;
  --toolbar: #111827;
  --danger: #dc2626;
  --success: #15803d;
}

body { color: var(--ink); background: var(--paper); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body::selection { color: #0f172a; background: #bfdbfe; }
.shell { width: min(1200px, calc(100% - 48px)); }
.narrow-shell { width: min(780px, calc(100% - 48px)); }

/* Navigation and shared components */
.site-header { position: relative; border-color: var(--line); background: rgba(248,250,252,.94); box-shadow: 0 1px 0 rgba(15,23,42,.03); }
.nav-wrap { height: 64px; }
.brand { gap: 9px; font-size: 17px; font-weight: 760; letter-spacing: -.035em; }
.brand-mark { width: 29px; height: 32px; border-radius: 7px; color: #fff; background: var(--coral); box-shadow: 0 5px 12px rgba(37,99,235,.22); transform: none; }
.brand-mark svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.main-nav { gap: 28px; color: #475569; font-size: 15px; font-weight: 650; }
.main-nav a, .text-link { padding: 8px 0; }
.main-nav a::after, .text-link::after { bottom: 2px; height: 2px; border-radius: 99px; background: var(--coral); }
.account-nav { gap: 14px; color: #475569; font-size: 15px; font-weight: 650; }
.account-name { color: var(--muted); }
.menu-button span { background: var(--ink); }

.button { min-height: 40px; gap: 10px; padding: 11px 17px; border-radius: 8px; font-size: 15px; font-weight: 720; transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, color .16s ease; }
.button:hover { transform: none; }
.button-primary { color: #fff; background: var(--coral); box-shadow: 0 4px 10px rgba(37,99,235,.2); }
.button-primary:hover { background: var(--coral-dark); box-shadow: 0 5px 13px rgba(37,99,235,.24); }
.button-dark { color: #fff; background: #1e293b; }.button-dark:hover { background: #0f172a; box-shadow: none; }
.button-ghost { border-color: var(--line); background: #fff; }.button-ghost:hover { border-color: #b8c4d3; background: #f8fafc; }
.button-small { min-height: 35px; padding: 8px 13px; font-size: 14px; }
.button-large { padding: 15px 21px; }
.button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.quiet-link { gap: 8px; padding-bottom: 3px; border-color: #94a3b8; color: #334155; font-size: 15px; font-weight: 700; }
.eyebrow { gap: 9px; color: #475569; letter-spacing: .11em; font-size: 14px; font-weight: 800; }.eyebrow > span { width: 20px; height: 2px; border-radius: 99px; background: var(--coral); }
.step-label { color: #7c899a; letter-spacing: .09em; font-size: 13px; font-weight: 800; }
.secure-chip { padding: 6px 9px; border: 1px solid #bbf7d0; border-radius: 999px; color: #166534; background: #f0fdf4; font-size: 13px; font-weight: 750; }
.file-badge { width: 36px; height: 42px; border: 1px solid #bfdbfe; border-radius: 6px; color: var(--coral-dark); background: var(--surface-blue); font-size: 13px; letter-spacing: .04em; }

.field-group > label, .form-grid > div > label { color: #334155; font-size: 14px; font-weight: 700; }
.field-group input, .field-group textarea, .field-group select { border-color: var(--line); border-radius: 7px; color: var(--ink); background: #fff; font-size: 15px; }
.field-group input:focus, .field-group textarea:focus, .field-group select:focus { border-color: var(--coral); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.filename-input { border-color: var(--line); border-radius: 7px; }.filename-input:focus-within { border-color: var(--coral); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }.filename-input input:focus { box-shadow: none; }
.field-error, .errorlist, .form-alert { color: #991b1b; }.form-alert { border: 1px solid #fecaca; border-radius: 8px; background: #fef2f2; }
.selected-file { border: 1px solid var(--line); border-radius: 7px; background: #f8fafc; }.selected-file i { color: var(--coral); }
.form-footnote span { color: var(--coral); }

/* Landing and upload workspace */
.unified-landing { background: radial-gradient(circle at 8% 12%, rgba(219,234,254,.9), transparent 33%), linear-gradient(180deg, #f8fafc 0%, #f4f7fb 100%); }
.unified-hero { min-height: 620px; grid-template-columns: .94fr 1.06fr; gap: 82px; padding-block: 70px; }
.unified-copy h1 { margin: 22px 0 25px; font: 720 clamp(55px,6.3vw,82px)/.98 Inter,ui-sans-serif,sans-serif; letter-spacing: -.065em; }
.unified-copy h1 em { color: var(--coral); font-style: normal; font-weight: 720; }
.unified-copy > p { max-width: 570px; color: var(--muted); font-size: 16px; line-height: 1.7; }
.capability-row { gap: 7px; margin-top: 28px; }.capability-row span { padding: 7px 10px; border-color: var(--line); border-radius: 6px; color: #475569; background: rgba(255,255,255,.78); font-size: 14px; font-weight: 700; }
.unified-upload-card { padding: 25px; border-color: var(--line); border-radius: 12px; background: #fff; box-shadow: 0 18px 50px rgba(15,23,42,.1); transform: none; }
.upload-card-heading { margin-bottom: 18px; }.upload-card-heading h2 { margin-top: 5px; font: 720 23px/1.1 Inter,ui-sans-serif,sans-serif; letter-spacing: -.03em; }
.dropzone, .unified-dropzone { min-height: 270px; border: 1.5px dashed #a8b5c5; border-radius: 9px; background: #f8fafc; transform: none; }
.dropzone:hover, .dropzone.is-dragging, .unified-dropzone:hover, .unified-dropzone.is-dragging { border-color: var(--coral); background: var(--surface-blue); box-shadow: inset 0 0 0 1px rgba(37,99,235,.12); transform: none; }
.dropzone strong { font: 700 17px Inter,ui-sans-serif,sans-serif; letter-spacing: -.02em; }.dropzone > span:not(.upload-icon):not(.upload-stack-icon) { color: var(--muted); font-size: 15px; }.dropzone small { color: #7c899a; font-size: 13px; letter-spacing: .05em; }
.upload-stack-icon { width: 70px; height: 65px; margin-bottom: 16px; }.upload-stack-icon i { width: 42px; height: 54px; border: 1.5px solid #93a4b8; border-radius: 5px; background: #e8eef6; }.upload-stack-icon i:first-child { transform: translate(-2px,2px); }.upload-stack-icon i:nth-child(2) { background: #fff; border-color: #93c5fd; transform: translate(2px,-1px); }.upload-stack-icon b { width: 30px; height: 30px; color: #fff; background: var(--coral); box-shadow: 0 5px 10px rgba(37,99,235,.2); }
.button-submit { margin-top: 20px; padding: 14px 17px; }
.editor-promise-strip { border-color: var(--line); background: #fff; }.editor-promise-strip article, .editor-promise-strip article:first-child { border-color: var(--line); }.editor-promise-strip b { color: var(--coral); font: 750 15px Inter,sans-serif; }.editor-promise-strip span { color: var(--muted); }.editor-promise-strip strong { color: var(--ink); font-size: 15px; }

.visual-proof { padding: 100px 0 115px; background: var(--paper); }
.section-heading { margin-bottom: 38px; }.section-heading h2, .promise-copy h2 { margin-top: 15px; font: 720 clamp(38px,4.6vw,58px)/1.05 Inter,ui-sans-serif,sans-serif; letter-spacing: -.055em; }.section-heading > p { color: var(--muted); font-size: 16px; }
.proof-window { border-color: var(--line); border-radius: 12px; background: var(--canvas); box-shadow: var(--shadow); }
.proof-toolbar { height: 56px; background: var(--toolbar); }.proof-toolbar > span { width: 7px; height: 7px; background: #64748b; }.proof-toolbar > span:first-child { background: #60a5fa; }.proof-toolbar i { padding: 7px 10px; border-color: #334155; border-radius: 6px; color: #cbd5e1; font-size: 13px; font-weight: 650; }
.proof-body { min-height: 450px; grid-template-columns: 145px 1fr 220px; background: #e4e9f0; }.proof-pages span { border: 1px solid var(--line); border-radius: 3px; box-shadow: 0 3px 10px rgba(15,23,42,.08); }.proof-pages span.active { outline: 2px solid var(--coral); outline-offset: 2px; }.proof-page { box-shadow: 0 16px 40px rgba(15,23,42,.14); }.proof-page b { font: 720 23px Inter,sans-serif; letter-spacing: -.03em; }.proof-page i { background: #d8e0ea; }.proof-page em { color: var(--coral-dark); border-color: #93c5fd; border-radius: 4px; background: var(--surface-blue); transform: none; font: 700 13px Inter,sans-serif; }.proof-panel { border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.recent-section { padding: 78px 0; background: #fff; }.editor-recents { padding-top: 78px; }.recent-card { border-color: var(--line); border-radius: 9px; background: #fff; transition: border-color .16s ease, box-shadow .16s ease; }.recent-card:hover { border-color: #93c5fd; box-shadow: 0 8px 20px rgba(15,23,42,.07); }.recent-card > b { color: var(--coral); }

/* Live PDF editor */
.editor-page { min-height: calc(100vh - 64px); background: var(--canvas); }
.editor-document-bar { height: 68px; padding: 0 18px; border-color: var(--line); background: #fff; }
.editor-doc-identity, .editor-doc-actions { gap: 12px; }
.editor-back { width: 34px; height: 34px; border-color: var(--line); border-radius: 8px; }.editor-back:hover { border-color: #b8c4d3; background: #f8fafc; }.editor-back svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.editor-file-icon { width: 34px; height: 39px; display: grid; flex: none; place-items: center; border: 1px solid #bfdbfe; border-radius: 7px; color: var(--coral); background: var(--surface-blue); }.editor-file-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.editor-doc-identity h1 { margin-top: 4px; font: 730 16px Inter,ui-sans-serif,sans-serif; letter-spacing: -.02em; }.editor-doc-identity h1 small { color: #475569; background: #eef2f7; font: 750 13px Inter,sans-serif; }
.autosave-note { color: var(--success); font-size: 14px; }.autosave-note i { width: 6px; height: 6px; background: #22c55e; }.autosave-note.has-changes { color: #92400e; }.autosave-note.has-changes i { background: #f59e0b; }
.editor-toolbar { min-height: 56px; gap: 8px; padding: 5px 12px; border-color: #293244; background: var(--toolbar); }
.toolbar-group { gap: 2px; }.toolbar-divider { height: 30px; margin: 0 4px; background: #334155; }
.tool-button { min-width: 53px; height: 42px; padding: 4px 7px; border-radius: 7px; color: #aeb8c7; font-size: 13px; font-weight: 650; }.tool-button span { height: 21px; color: #f1f5f9; font: inherit; }.tool-button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }.tool-button:hover { color: #fff; background: #263143; }.tool-button.is-active { color: #fff; background: #243c67; box-shadow: inset 0 0 0 1px #3b82f6; }.tool-button.is-active span { color: #93c5fd; }.danger-tool:hover { background: #4d2026; }.danger-tool:hover span { color: #fda4af; }
.add-pdf-button { min-height: 34px; padding: 0 11px; border-color: #475569; border-radius: 7px; color: #f8fafc; background: #1e293b; font-size: 14px; font-weight: 700; }.add-pdf-button:hover { border-color: #64748b; background: #273449; }.add-pdf-button span { height: 16px; color: #93c5fd; }.add-pdf-button svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.editor-layout { height: calc(100vh - 188px); min-height: 580px; grid-template-columns: 205px minmax(420px,1fr) 296px; }
.page-rail { border-color: var(--line); background: var(--surface-subtle); }.rail-heading { height: 42px; align-items: center; padding: 0 14px; color: #334155; letter-spacing: .08em; font-size: 14px; font-weight: 800; }.rail-heading b { min-width: 24px; padding: 3px 6px; border-radius: 999px; color: var(--muted); background: #e8edf3; text-align: center; font-size: 13px; }
.page-strip { gap: 17px; padding: 7px 28px 25px; }.page-thumb-image { border-color: #cbd5e1; border-radius: 3px; box-shadow: 0 4px 10px rgba(15,23,42,.08); }.page-thumb.is-active .page-thumb-image { outline: 2px solid var(--coral); outline-offset: 2px; }.page-thumb-number { color: #7c899a; }.page-thumb-number b { color: #334155; }.page-thumb-grip { border-color: var(--line); color: #8491a2; }.page-thumb-grip:hover { border-color: var(--coral); color: #fff; background: var(--coral); }.page-thumb-edited { background: var(--coral); }
.rail-sort-banner > span { background: var(--coral); }.rail-sort-banner small { color: var(--coral-dark); }.is-sorting-pages .page-rail { background: #f5f9ff; box-shadow: inset -2px 0 0 rgba(37,99,235,.5); }.is-sorting-pages .rail-sort-banner { border-color: #93c5fd; background: var(--surface-blue); }.page-thumb.is-drag-target::before, .page-thumb.is-drag-target::after { background: var(--coral); }.page-thumb.is-drag-target::before { box-shadow: 0 0 0 3px rgba(37,99,235,.14); }.page-thumb.is-drag-target .page-thumb-image { outline-color: var(--coral); }
.rail-hint { border-color: var(--line); color: #7c899a; background: #f8fafc; }
.canvas-workspace { background-color: var(--canvas); background-image: radial-gradient(#b8c2cf 1px, transparent 1px); background-size: 19px 19px; }.canvas-topline { height: 42px; border-color: #d0d8e2; color: var(--muted); background: rgba(248,250,252,.95); }.canvas-topline > span:first-child { color: var(--ink); }.canvas-topline kbd { border-color: var(--line); border-radius: 4px; }.page-stage { box-shadow: 0 16px 44px rgba(15,23,42,.14); }.page-loading span { border-color: #d8e0ea; border-top-color: var(--coral); }.canvas-annotation:hover { outline-color: var(--coral); }.checkbox-square { border-color: #334155; }.annotation-delete { background: var(--danger); }.annotation-resize { background: var(--coral); box-shadow: 0 0 0 1px var(--coral); }.placement-cursor { border-radius: 6px; background: #1e293b; }.zoom-control { height: 42px; border-color: #d0d8e2; background: rgba(248,250,252,.96); }.zoom-control button { width: 26px; height: 26px; border-color: var(--line); border-radius: 6px; }.zoom-control button:hover { border-color: #b8c4d3; background: #f8fafc; }.zoom-control input, .editor-inspector input[type=range] { accent-color: var(--coral); }
.editor-inspector { border-color: var(--line); background: #fff; }.inspector-head { min-height: 65px; padding: 0 16px; border-color: var(--line); }.inspector-head h2 { margin-top: 4px; font: 730 16px Inter,sans-serif; letter-spacing: -.02em; }.selected-page-badge { width: 28px; height: 28px; border-radius: 7px; background: #334155; font: 700 14px Inter,sans-serif; }.inspector-panel { padding: 16px; }.page-summary { border-color: var(--line); }.inspector-tip { margin-top: 16px; padding: 11px; border: 1px solid #dbeafe; border-radius: 8px; background: var(--surface-blue); }.inspector-tip > span { color: var(--coral); background: #dbeafe; }.inspector-tip p { color: #526071; }.inspector-tip strong { color: #243247; }.editor-inspector output { color: var(--coral-dark); }.inspector-place-button { border-radius: 7px; }.export-settings { border-color: var(--line); }

/* History, results, and account surfaces */
.history-section { min-height: calc(100vh - 64px); padding: 72px 0 100px; }.history-heading { margin-bottom: 36px; }.history-heading h1 { margin: 17px 0 12px; font: 730 clamp(42px,5vw,62px)/1.02 Inter,sans-serif; letter-spacing: -.055em; }.history-heading p { color: var(--muted); font-size: 16px; }
.history-table-wrap { border-color: var(--line); border-radius: 10px; background: #fff; box-shadow: 0 10px 32px rgba(15,23,42,.06); }.history-table th { padding: 14px 18px; color: #64748b; letter-spacing: .08em; background: #f8fafc; }.history-table td { padding: 15px 18px; border-color: var(--line); }.history-table tbody tr:hover { background: #f8fbff; }.round-arrow { width: 32px; height: 32px; border-color: var(--line); border-radius: 7px; }.round-arrow:hover { border-color: var(--coral); color: #fff; background: var(--coral); }
.job-status { padding: 5px 8px; font-size: 13px; letter-spacing: .04em; }.status-complete { color: #166534; background: #f0fdf4; }.status-complete::before { background: #22c55e; }.status-failed { color: #991b1b; background: #fef2f2; }.status-failed::before { background: #ef4444; }.status-processing { color: #92400e; background: #fffbeb; }.status-processing::before { background: #f59e0b; }.status-draft { color: #1e40af; background: var(--surface-blue); }.status-draft::before { background: var(--coral); }
.empty-state { padding: 78px 20px; border-color: #b8c4d3; border-radius: 12px; background: #fff; }.empty-pages span { border: 1.5px solid #94a3b8; border-radius: 4px; transform: none !important; }.empty-pages span:first-child { background: #e8eef6; }.empty-pages span:nth-child(2) { background: var(--surface-blue); }.empty-pages b { background: var(--coral); }.empty-state h2 { font: 730 27px Inter,sans-serif; letter-spacing: -.03em; }

.result-section { min-height: calc(100vh - 64px); padding: 72px 0 100px; }.result-celebration { width: 58px; height: 58px; margin-bottom: 18px; border: 0; border-radius: 12px; color: #fff; background: var(--success); box-shadow: 0 8px 18px rgba(21,128,61,.18); font-size: 25px; transform: none; }.result-celebration.failed { background: var(--danger); }.result-heading h1 { margin: 15px 0 12px; font: 730 clamp(39px,5vw,56px)/1.04 Inter,sans-serif; letter-spacing: -.055em; }.result-heading > p { color: var(--muted); font-size: 16px; }.result-card { padding: 20px; border-color: var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(15,23,42,.07); }.result-file-icon { width: 54px; height: 65px; border-color: #bfdbfe; border-radius: 7px; color: var(--coral); background: var(--surface-blue); }.result-file-icon b { color: var(--coral-dark); }.result-file-icon span { background: var(--success); }.originals-card { border-color: var(--line); border-radius: 10px; background: #fff; }.originals-heading h2 { font: 720 16px Inter,sans-serif; }.originals-heading span { letter-spacing: .06em; }.account-callout { border: 1px solid #bfdbfe; border-radius: 10px; background: var(--surface-blue); }.mini-logo { color: #fff; background: var(--coral); }.result-actions { gap: 30px; }

.auth-section { min-height: calc(100vh - 64px); background: #fff; }.auth-shell { min-height: calc(100vh - 64px); grid-template-columns: .9fr 1.1fr; }.auth-panel { padding: 58px clamp(36px,6vw,92px); }.auth-copy { background: linear-gradient(155deg,#0f172a 0%,#172554 100%); }.auth-copy::after { content: ""; width: 420px; height: 420px; right: -190px; bottom: -210px; border: 1px solid rgba(147,197,253,.15); border-radius: 50%; }.auth-copy h1 { max-width: 590px; margin: 21px 0; font: 730 clamp(39px,4.5vw,58px)/1.03 Inter,sans-serif; letter-spacing: -.055em; }.auth-copy > div > p { color: #b8c4d6; }.auth-copy blockquote { padding-top: 18px; border-top: 1px solid rgba(255,255,255,.14); color: #cbd5e1; font: 600 15px/1.6 Inter,sans-serif; }.auth-kicker { color: var(--coral); letter-spacing: .11em; }.auth-form-wrap h2 { font: 730 39px Inter,sans-serif; letter-spacing: -.045em; }.auth-form-wrap a { color: var(--coral-dark); }.auth-benefits { color: #dbe4f0; }.auth-benefits i { color: #93c5fd; }.terms-note { color: var(--muted); }

/* Legacy tool template remains visually consistent if accessed internally. */
.tool-hero { min-height: calc(100vh - 64px); padding: 64px 0 90px; }.tool-hero::before { display: none; }.tool-hero-grid { grid-template-columns: .82fr 1.18fr; gap: 70px; }.back-link { color: var(--muted); }.back-link:hover { color: var(--coral); }.tool-intro h1 { font: 730 clamp(44px,4.8vw,62px)/1.02 Inter,sans-serif; letter-spacing: -.055em; }.tool-proof { border-color: var(--line); }.tool-proof > span { border-radius: 7px; color: var(--coral); background: var(--surface-blue); font: 750 13px Inter,sans-serif; }.workspace-card { border-color: var(--line); border-radius: 12px; box-shadow: var(--shadow); }.workspace-heading { border-color: var(--line); }.workspace-heading h2 { font: 720 23px Inter,sans-serif; }.upload-icon { color: #fff; background: var(--coral); box-shadow: none; }

.toast-stack { top: 78px; }.toast { padding: 12px 14px; border: 1px solid #334155; border-radius: 8px; color: #fff; background: #1e293b; box-shadow: 0 14px 35px rgba(15,23,42,.18); font-size: 15px; }.toast-success { border-left: 4px solid #22c55e; }.toast-error { border-left: 4px solid #ef4444; }.toast-warning { border-left: 4px solid #f59e0b; }
.site-footer { padding: 45px 0; border-color: #263244; background: #0f172a; }.footer-grid p { color: #94a3b8; font: 500 14px/1.5 Inter,sans-serif; }.footer-status { color: #aeb9c8; }.footer-meta { color: #8290a3; }

@media (max-width: 1050px) {
  .unified-hero { gap: 45px; }.editor-layout { grid-template-columns: 170px minmax(390px,1fr) 260px; }.page-strip { padding-inline: 22px; }
}

@media (max-width: 820px) {
  .nav-wrap { height: 60px; }.main-nav, .account-nav { background: #f8fafc; }
  .unified-hero { grid-template-columns: 1fr; padding-block: 55px; }.unified-copy { text-align: left; }.unified-copy .eyebrow, .capability-row { justify-content: flex-start; }.unified-copy > p { margin-inline: 0; }.unified-upload-card { width: 100%; }
  .editor-layout { height: auto; grid-template-columns: 120px minmax(0,1fr); }.editor-inspector { border-color: var(--line); }.page-strip { padding-inline: 14px; }
  .proof-body { grid-template-columns: 110px 1fr; }.auth-shell { grid-template-columns: 1fr; }.auth-copy { min-height: 430px; }.auth-form-panel { min-height: 590px; }
}

@media (max-width: 640px) {
  .shell, .narrow-shell { width: min(100% - 28px,1200px); }.unified-copy h1 { font-size: 47px; }.unified-copy > p { font-size: 14px; }.unified-upload-card { padding: 15px; }.unified-dropzone { min-height: 235px; }
  .visual-proof { padding: 70px 0 80px; }.section-heading h2 { font-size: 36px; }.proof-window { margin-inline: 0; }.proof-body { min-height: 360px; grid-template-columns: 62px 1fr; padding: 24px 16px; }.proof-page { width: 215px; height: 315px; padding: 30px 24px; }
  .editor-doc-identity h1 { max-width: 150px; }.editor-file-icon { display: none; }.editor-layout { grid-template-columns: 86px minmax(0,1fr); }.page-strip { padding-inline: 9px; }.tool-button { min-width: 49px; }.editor-toolbar { padding-inline: 7px; }
  .history-section, .result-section { padding: 52px 0 75px; }.history-heading h1 { font-size: 42px; }.result-heading h1 { font-size: 38px; }.history-table th, .history-table td { padding: 13px; }
  .auth-panel { padding: 42px 23px; }.auth-copy h1 { font-size: 40px; }.auth-form-wrap h2 { font-size: 34px; }
  .site-footer { padding: 38px 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; }
}

/* Direct-manipulation editor controls */
.page-canvas-scroller { overflow: auto; place-items: center; padding: 24px; }
.page-thumb { padding: 7px; border: 1px solid transparent; border-radius: 9px; }
.page-thumb.is-active { border-color: #2563eb; background: #fff; box-shadow: 0 4px 14px rgba(37,99,235,.14); }
.page-thumb.is-active .page-thumb-image,.page-thumb.is-selected .page-thumb-image { outline: 0; box-shadow: 0 4px 10px rgba(15,23,42,.08); }
.page-thumb.is-selected .page-thumb-select { box-shadow: 0 0 0 3px rgba(37,99,235,.2); }
.crop-frame { position:absolute;z-index:4;display:none;border:2px solid #2563eb;box-shadow:0 0 0 1px rgba(255,255,255,.9);cursor:move;touch-action:none }
.page-stage.is-cropping .crop-frame { display:block }
.crop-frame button { position:absolute;width:16px;height:16px;padding:0;border:2px solid #fff;border-radius:50%;background:#2563eb;box-shadow:0 1px 4px rgba(15,23,42,.35);touch-action:none }
.crop-frame [data-crop-handle=n]{left:50%;top:-9px;transform:translateX(-50%);cursor:ns-resize}.crop-frame [data-crop-handle=ne]{right:-9px;top:-9px;cursor:nesw-resize}.crop-frame [data-crop-handle=e]{right:-9px;top:50%;transform:translateY(-50%);cursor:ew-resize}.crop-frame [data-crop-handle=se]{right:-9px;bottom:-9px;cursor:nwse-resize}.crop-frame [data-crop-handle=s]{left:50%;bottom:-9px;transform:translateX(-50%);cursor:ns-resize}.crop-frame [data-crop-handle=sw]{left:-9px;bottom:-9px;cursor:nesw-resize}.crop-frame [data-crop-handle=w]{left:-9px;top:50%;transform:translateY(-50%);cursor:ew-resize}.crop-frame [data-crop-handle=nw]{left:-9px;top:-9px;cursor:nwse-resize}
.crop-summary { padding:11px;border:1px solid #bfdbfe;border-radius:8px;color:#1e40af;background:#eff6ff;font-weight:750 }
.canvas-annotation { cursor:move;touch-action:none }.canvas-annotation.is-selected { outline:2px solid #2563eb!important;outline-offset:5px }.canvas-annotation.is-selected .annotation-delete { display:grid }
.canvas-annotation[data-font=sans]{font-family:Inter,Arial,sans-serif}.canvas-annotation[data-font=sans-bold]{font-family:Inter,Arial,sans-serif;font-weight:800}.canvas-annotation[data-font=serif],.canvas-annotation[data-font=serif-bold]{font-family:Georgia,"Times New Roman",serif}.canvas-annotation[data-font=serif-bold]{font-weight:800}.canvas-annotation[data-font=mono],.canvas-annotation[data-font=mono-bold]{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.canvas-annotation[data-font=mono-bold]{font-weight:800}
[data-font=handwritten]{font-family:"Brush Script MT","Segoe Script",cursive!important}[data-font=elegant]{font-family:Georgia,"Times New Roman",serif!important;font-style:italic}[data-font=modern]{font-family:Inter,Arial,sans-serif!important;font-style:italic}[data-font=classic]{font-family:"Courier New",monospace!important;font-style:italic}
.tool-button:disabled { opacity:.38;cursor:not-allowed }.history-controls { flex:none }
.color-control { display:grid;gap:8px;margin:12px 0 }.color-control-label{color:#475569;font-size:13px;font-weight:800}.color-swatches { display:flex;gap:7px;flex-wrap:wrap }.color-swatch { width:29px;height:29px;padding:0;border:2px solid #fff;border-radius:50%;background:var(--swatch);box-shadow:0 0 0 1px #cbd5e1;cursor:pointer }.color-swatch.is-active { box-shadow:0 0 0 3px #93c5fd }.color-hex-field { display:flex!important;align-items:center;gap:8px;color:#64748b;font-size:13px;font-weight:750 }.color-hex-field input { width:105px!important;padding:7px 9px!important;border:1px solid #cbd5e1!important;border-radius:7px!important;font:600 13px ui-monospace,monospace!important;text-transform:uppercase }.color-hex-field input[aria-invalid=true]{border-color:#dc2626!important;background:#fef2f2!important}
.export-dialog { width:min(650px,calc(100% - 28px));max-height:calc(100vh - 40px);padding:0;border:0;border-radius:14px;background:#fff;box-shadow:0 28px 90px rgba(15,23,42,.3) }.export-dialog::backdrop { background:rgba(15,23,42,.52);backdrop-filter:blur(3px) }.export-dialog .export-settings { margin:0;padding:0 24px 24px;border:0;overflow:auto }.export-dialog-head { position:sticky;z-index:2;top:0;display:flex;align-items:center;justify-content:space-between;margin:0 -24px;padding:18px 24px;border-bottom:1px solid var(--line);background:#fff }.export-dialog-head h2{margin:3px 0 0;font-size:22px}.dialog-close{width:36px;height:36px;padding:0;border:1px solid var(--line);border-radius:8px;background:#fff;cursor:pointer;font-size:24px}.export-dialog-actions{position:sticky;bottom:-24px;display:flex;justify-content:flex-end;gap:9px;margin:22px -24px -24px;padding:15px 24px;border-top:1px solid var(--line);background:#fff}
@media(max-width:640px){.page-canvas-scroller{padding:14px 8px}.export-dialog{max-height:100vh;width:100%;border-radius:12px 12px 0 0}.history-controls{display:flex}}

/* Editable object properties and export quality previews */
.object-properties[hidden],.object-properties [hidden]{display:none}.object-properties-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.object-properties-head h3{margin:4px 0 0;font-size:18px}.object-properties-head button{padding:6px 9px;border:1px solid #fecaca;border-radius:7px;color:#b91c1c;background:#fff;cursor:pointer;font-size:13px;font-weight:750}.object-properties>div[data-object-field]{display:grid;gap:7px;margin-top:14px}.object-properties>div[data-object-field]>label{color:#475569;font-size:13px;font-weight:800}.object-properties textarea,.object-properties input[type=text],.object-properties select{width:100%;padding:9px 10px;border:1px solid var(--line);border-radius:8px;background:#fff;font:inherit}.object-properties input[type=range]{width:100%;accent-color:#2563eb}.object-properties output{float:right;color:#1d4ed8}.object-move-hint{margin:17px 0 0;padding:10px;border-radius:8px;color:#475569;background:#f1f5f9;font-size:13px;line-height:1.45}
.quality-settings{display:block}.quality-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.compression-settings .quality-option{position:relative;display:block;padding:8px;border:2px solid var(--line);border-radius:10px;background:#fff;transition:border-color .15s,box-shadow .15s}.compression-settings .quality-option:has(input:checked){border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.12)}.quality-option>input{position:absolute;opacity:0;pointer-events:none}.quality-preview{position:relative;aspect-ratio:1.55;display:block;overflow:hidden;border:1px solid #cbd5e1;border-radius:7px;background:#eef2f7}.quality-preview img{width:100%;height:100%;display:block;object-fit:cover;object-position:top center;transform:scale(1.02)}.quality-preview i{position:absolute;right:8px;bottom:8px;width:31px;height:22px;border:1px solid rgba(15,23,42,.28);background:repeating-linear-gradient(to bottom,rgba(15,23,42,.75) 0 2px,transparent 2px 5px),rgba(255,255,255,.88);box-shadow:0 1px 4px rgba(15,23,42,.2)}.quality-balanced .quality-preview img,.quality-balanced .quality-preview i{filter:blur(.45px)}.quality-smallest .quality-preview img,.quality-smallest .quality-preview i{filter:blur(1.15px);transform:scale(1.04)}.quality-option>span:last-child{display:block;padding:9px 2px 2px}.quality-option strong,.quality-option small,.quality-option b{display:block}.quality-option strong{font-size:14px}.quality-option small{min-height:32px;margin-top:3px}.quality-option b{margin-top:5px;color:#64748b;font-size:12px;font-weight:750}.quality-option:has(input:checked)>span:last-child b{color:#1d4ed8}
.advanced-export>summary{list-style:none}.advanced-export>summary::-webkit-details-marker{display:none}.advanced-export>summary span{display:block}.advanced-export>summary strong,.advanced-export>summary small{display:block}.advanced-export>summary small{margin-top:3px;color:var(--muted);font-weight:500}.advanced-export>summary::after{content:"+";float:right;margin-top:-29px;color:#2563eb;font-size:22px}.advanced-export[open]>summary::after{content:"−"}.advanced-export-body{padding:0 12px 14px}.advanced-section{padding:16px 0;border-top:1px solid var(--line)}.advanced-section:first-child{border-top:0}.advanced-section h3{margin:0 0 9px;font-size:15px}.advanced-section .field-group:first-of-type{margin-top:8px}.advanced-section .digital-sign-settings{margin-top:0}
@media(max-width:640px){.quality-grid{grid-template-columns:1fr}.quality-option{display:grid!important;grid-template-columns:126px 1fr;gap:10px}.quality-option>span:last-child{padding:2px}.quality-option small{min-height:0}}

.quota-register-modal{width:min(520px,calc(100% - 28px));padding:34px;border:0;border-radius:18px;background:#fff;box-shadow:0 30px 100px rgba(15,23,42,.32)}.quota-register-modal::backdrop{background:rgba(15,23,42,.58);backdrop-filter:blur(4px)}.quota-register-copy h2{margin:12px 0 8px;font:730 34px/1.08 Inter,sans-serif;letter-spacing:-.04em}.quota-register-copy>p{margin:0;color:var(--muted);font-size:15px;line-height:1.6}.quota-register-modal .field-group{margin-top:24px}.quota-register-modal .button-submit{margin-top:18px}.quota-register-error{margin:12px 0 0;padding:10px;border-radius:8px;color:#991b1b;background:#fef2f2;font-size:13px;line-height:1.45}.quota-register-error[hidden]{display:none}.quota-register-terms{margin:16px 0 0;color:#64748b;font-size:12px;line-height:1.5}.quota-register-terms a{color:#334155}.quota-register-modal .modal-close{top:12px;right:12px}@media(max-width:560px){.quota-register-modal{padding:28px 20px}.quota-register-copy h2{font-size:29px}}

/* Mobile containment: nothing inside the workspace may widen the page */
body { overflow-x: clip; }  /* belt and braces; the toolbar containment below is the actual fix */
.selected-files { min-width: 0; }
.selected-file { grid-template-columns: auto minmax(0,1fr) auto; }
.selected-file strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.selected-file span { white-space: nowrap; }
.dropzone { padding: 22px 18px; text-align: center; }

/* The tool rail scrolls on its own, with a fade on whichever side has more tools */
.editor-toolbar { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; scroll-padding-inline: 14px;
  /* `overflow` alone does NOT stop this row's 1100px of buttons from counting
     towards the document's scrollable width, which makes a phone browser zoom
     out to fit a page twice the width of its content. Containment does. */
  contain: layout; }
.editor-toolbar::-webkit-scrollbar { height: 0; }
.toolbar-group, .toolbar-divider, .add-pdf-form { flex: none; }
.editor-toolbar.can-scroll-right { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent 100%); mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent 100%); }
.editor-toolbar.can-scroll-left { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 34px); mask-image: linear-gradient(90deg, transparent 0, #000 34px); }
.editor-toolbar.can-scroll-left.can-scroll-right { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 34px, #000 calc(100% - 34px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 34px, #000 calc(100% - 34px), transparent 100%); }
.premium-tool { padding-right: 9px; }
.premium-tool b { top: 2px; right: 2px; padding: 1px 4px; border-radius: 4px; background: var(--coral); font: 800 10px/1.4 Inter,ui-sans-serif,sans-serif; letter-spacing: .03em; }

/* Small screens: keep the dropzone copy off the dashed border and centred */
@media (max-width: 640px) {
  .dropzone, .unified-dropzone { min-height: 240px; padding: 30px 22px; text-align: center; }
  .tool-upload-panel .dropzone { min-height: 250px; }
  .dropzone strong { font-size: 16px; }
  .dropzone > span:not(.upload-icon):not(.upload-stack-icon) { font-size: 14px; }
  .dropzone small { margin-top: 11px; font-size: 12px; letter-spacing: .05em; line-height: 1.5; }
  .form-footnote { display: block; margin-top: 18px; text-align: center; line-height: 1.55; text-wrap: balance; }
  .form-footnote span { margin-right: 7px; }
}

/* Page rail thumbnails: the wrapper is a <span>, so it needs an explicit block
   display for its aspect-ratio box and for the select/edited badges pinned inside it */
.page-thumb-image { display: block; }
.page-thumb-image img { display: block; }

/* No viewport-unit floor on the page: on iOS 100vh is the LARGE viewport, so a
   `min-height` in vh makes the document taller than the screen and leaves a band of
   background below the footer that you can scroll into. Height comes from content. */

@media (max-width: 820px) {
  /* The inspector hugs its content, and the Export bar rides the bottom of the editor
     itself: it pins while the editor is on screen and settles above the footer at the
     end of it, so it never floats over the footer or adds height to the page */
  .editor-inspector { min-height: 0; padding-bottom: 20px; }
  .editor-page { min-height: 0; }
  .mobile-editor-actions { position: sticky; left: auto; right: auto; bottom: 0; z-index: 20; display: block; padding: 10px 14px; border-top: 1px solid var(--line); background: rgba(255,255,255,.95); backdrop-filter: blur(12px); }
  .export-settings { margin-bottom: 0; }
}

/* Size the editor against the *visible* viewport, never the large one */
@supports (height: 100svh) {
  @media (max-width: 820px) {
    .editor-layout { grid-template-rows: 58svh auto; }
    .export-dialog { max-height: 100svh; }
  }
}

@media (max-width: 640px) {
  .editor-layout { grid-template-columns: 96px minmax(0,1fr); }
  .page-strip { gap: 14px; padding-inline: 8px; }
  .page-thumb-select { width: 20px; height: 20px; border-width: 1.5px; }
  .page-thumb-number { padding-top: 6px; font-size: 12px; }
  .page-thumb-grip { width: 22px; height: 18px; }
  .page-split-toggle { margin-top: 5px; padding: 4px 5px; font-size: 11px; letter-spacing: -.01em; }
  .canvas-topline { padding-inline: 12px; font-size: 13px; }
  .zoom-control { gap: 7px; padding-inline: 10px; }
  .zoom-control input { width: 74px; }
}

/* Upgrade pricing dialog: fit the small-screen viewport and scale the type down */
@media (max-width: 640px) {
  .upgrade-modal { width: calc(100vw - 20px); max-width: 760px; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); padding: 22px 16px; border-radius: 14px; overflow-y: auto; }
  .upgrade-modal .modal-close { top: 8px; right: 8px; }
  .upgrade-modal-copy .pro-pill { padding: 5px 9px; font-size: 11px; letter-spacing: .1em; }
  .upgrade-modal-copy h2 { margin: 12px 0 6px; font-size: 24px; line-height: 1.15; }
  .upgrade-modal-copy p { font-size: 14px; }
  .upgrade-benefits { gap: 8px 14px; margin: 16px 0; font-size: 13px; }
  .upgrade-benefits span { gap: 6px; }
  .upgrade-plans { gap: 10px; }
  .upgrade-plan { padding: 14px; }
  .upgrade-plan > div > span { font-size: 14px; }
  .upgrade-plan > div > b { font-size: 11px; }
  .upgrade-plan > strong { margin: 8px 0 12px; font-size: 26px; }
  .upgrade-plan > strong small { font-size: 13px; }
  .upgrade-fineprint { margin-top: 14px; font-size: 12px; line-height: 1.45; }
}

/* The stage carries a hard 500px default width until the preview loads and the JS
   fit runs (updateStageSize bails while naturalWidth is 0). On a narrow canvas that
   default is wider than the scroller, and a centred grid item that overflows spills
   equally off BOTH edges, with the left half unreachable. Fit it by default, and let
   alignment fall back to start whenever the stage is wider than the canvas. */
.page-stage { width: min(500px, 100%); }
.page-canvas-scroller { place-items: center; place-items: safe center; }

/* Failed page preview: replace the spinner with a message and a retry */
.page-loading.has-error { flex-direction: column; gap: 12px; color: #991b1b; text-align: center; padding: 16px; }
.page-loading.has-error span { display: none; }
.page-loading.has-error button { padding: 7px 13px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: #fff; cursor: pointer; font-size: 14px; font-weight: 700; }
.page-loading.has-error button:hover { border-color: #b8c4d3; background: #f8fafc; }

/* A quality preview with no source yet shows its empty frame, never broken-image alt text */
.quality-preview img:not([src]) { visibility: hidden; }

/* Crop panel: say what the crop will do, and give it an explicit commit */
.crop-summary { margin: 14px 0 16px; line-height: 1.5; font-weight: 650; }
.crop-summary.is-empty { border-color: var(--line); color: var(--muted); background: #f8fafc; font-weight: 500; }
.inspector-panel[data-panel="crop"] .button + .button { margin-top: 9px; }
.inspector-panel[data-panel="crop"] .button { width: 100%; justify-content: center; }
.inspector-panel[data-panel="crop"] .button:disabled { opacity: .5; cursor: not-allowed; }

/* No backdrop-filter on the crop shade: it forces a composited layer per mask,
   which leaves stale pixels behind while scrolling, and the greyscale is not
   visible under the dark overlay in any case. */
.crop-mask { backdrop-filter: none; }

/* The editor layout is a grid with a fixed height, but a grid item defaults to
   min-height:auto, so each column refused to shrink below its own content and
   pushed past the bottom of the layout box, painting over the footer on short
   viewports. Let the columns shrink so their own scrollers take over instead. */
.editor-layout > * { min-height: 0; }
.page-rail, .page-strip, .canvas-workspace, .page-canvas-scroller, .editor-inspector { min-height: 0; }

/* Toasts: space them, make room for the dismiss button, and fade on the way out */
.toast-stack { display: grid; gap: 10px; }
.toast { position: relative; padding-right: 40px; transition: opacity .25s ease, transform .25s ease; }
.toast.is-leaving { opacity: 0; transform: translateX(14px); pointer-events: none; }
.toast-close { position: absolute; top: 5px; right: 5px; width: 27px; height: 27px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 7px; color: inherit; background: none; opacity: .68; cursor: pointer; font-size: 19px; line-height: 1; }
.toast-close:hover { opacity: 1; background: rgba(255,255,255,.13); }
.toast-close:focus-visible { outline: 2px solid #93c5fd; outline-offset: 1px; }

/* Back links: the arrow was an inline SVG sitting on the text baseline, so it
   rode low against its label. Align them on a centre line instead. */
.back-link { display: inline-flex; align-items: center; gap: 7px; }
/* Match the arrow's weight to the 800-weight label so it does not read as a
   stray hairline next to the text. */
.back-link .icon { width: 18px; height: 18px; stroke-width: 2.4; vertical-align: 0; }

/* Modal close button: the glyph sat on its text baseline inside a grey disc that
   matched nothing else in the UI. Centre it, and use the same bordered square as
   the export dialog's close. */
.modal-close { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); background: #fff; font-size: 21px; line-height: 1; transition: border-color .16s ease, background .16s ease, color .16s ease; }
.modal-close:hover { border-color: #b8c4d3; color: var(--ink); background: #f8fafc; }
.modal-close:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }

/* Once the stage is sized to the page, drop the empty-state height floor */
.page-stage.is-sized { min-height: 0; }