/* ═══════════════════════════════════════════════
   Send2eReader — "Letterpress" Design System
   Editorial aesthetic inspired by bookshops
   and letterpress typography
   ═══════════════════════════════════════════════ */

/* Fonts loaded async via <link> in HTML to avoid render blocking */

:root {
    --font-display: 'Libre Baskerville', Georgia, serif;
    --font-body: 'Source Serif 4', 'Palatino Linotype', Palatino, serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;

    --color-cream: #f6f1eb;
    --color-paper: #efe8df;
    --color-parchment: #e8dfd4;
    --color-ink: #2c2418;
    --color-ink-light: #5a4e3c;
    --color-amber: #b57530;
    --color-amber-deep: #905a1c;
    --color-amber-glow: #d49240;
    --color-amber-faint: rgba(181, 117, 48, 0.12);
    --color-success: #4a7c59;
    --color-success-bg: #e8f2eb;
    --color-error: #9c3a3a;
    --color-error-bg: #f5e6e6;
    --color-rule: #d4c9b8;
    --color-input: #8a7e6c;
    --color-djvu: #6a5acd;
    --color-shadow: rgba(44, 36, 24, 0.08);
    --color-muted: #8a7e6c;
    --color-surface: #fff;

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2.5rem;
    --spacing-2xl: 4rem;
}

/* ── Reset & Base ─────────────────────────── */

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

html {
    font-size: 17px;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-body);
    color: var(--color-ink);
    background: var(--color-cream);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Subtle paper grain texture */
body::before {
    content: '';
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: -1;
}

a {
    color: var(--color-amber-deep);
    text-decoration-color: var(--color-parchment);
    text-underline-offset: 3px;
    transition: color 0.2s cubic-bezier(0.32, 0.72, 0, 1), text-decoration-color 0.2s cubic-bezier(0.32, 0.72, 0, 1);
}
a:hover {
    color: var(--color-amber);
    text-decoration-color: var(--color-amber);
}

/* ── Layout ───────────────────────────────── */

button,
a,
[role="button"] {
    touch-action: manipulation;
}

:target,
[id="downloads"],
[id="qrsection"],
[id="success-state"] {
    scroll-margin-top: 2rem;
}

.wrapper {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    padding: var(--spacing-xl) var(--spacing-lg);
}

/* ── Toolbar ──────────────────────────────── */

.toolbar {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-sm);
}

.toolbar__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--color-paper);
    border: 1px solid var(--color-rule);
    border-radius: 50%;
    cursor: pointer;
    color: var(--color-ink-light);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0;
    overflow: visible;
    position: relative;
    transition: background 0.2s cubic-bezier(0.32, 0.72, 0, 1),
                border-color 0.2s cubic-bezier(0.32, 0.72, 0, 1),
                color 0.2s cubic-bezier(0.32, 0.72, 0, 1),
                transform 0.2s cubic-bezier(0.32, 0.72, 0, 1);
}

.toolbar__btn:hover {
    background: var(--color-amber);
    border-color: var(--color-amber);
    color: #fff;
}

.toolbar__btn:active {
    transform: scale(0.93);
}

.toolbar__btn svg {
    width: 18px;
    height: 18px;
}

/* ── Header ───────────────────────────────── */

.site-header {
    text-align: center;
    margin-bottom: var(--spacing-2xl);
}

.site-header__icon {
    display: inline-block;
    width: 48px;
    height: 48px;
    margin-bottom: var(--spacing-md);
    color: var(--color-amber);
    animation: fadeDown 0.6s cubic-bezier(0.32, 0.72, 0, 1) both;
}

.site-header__title {
    font-family: var(--font-display);
    font-weight: 400;
    font-style: italic;
    font-size: 2rem;
    color: var(--color-ink);
    letter-spacing: -0.02em;
    text-wrap: balance;
    animation: fadeDown 0.6s cubic-bezier(0.32, 0.72, 0, 1) 0.1s both;
}

.site-header__subtitle {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--color-ink-light);
    margin-top: var(--spacing-xs);
    font-style: italic;
    animation: fadeDown 0.6s cubic-bezier(0.32, 0.72, 0, 1) 0.2s both;
}

/* ── Card ─────────────────────────────────── */

.card {
    background: var(--color-surface);
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    min-height: 320px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow:
        0 1px 3px var(--color-shadow),
        0 8px 24px var(--color-shadow);
    animation: fadeUp 0.5s cubic-bezier(0.32, 0.72, 0, 1) 0.3s both;
}

.card--form {
    min-height: 0;
    justify-content: flex-start;
}

.card + .card {
    margin-top: var(--spacing-lg);
}

.card__label {
    font-family: var(--font-display);
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-ink-light);
    margin-bottom: var(--spacing-sm);
}

/* ── Key Display (Download Page) ──────────── */

.key-display {
    text-align: center;
    padding: var(--spacing-lg) 0;
}

.key-display__label {
    font-family: var(--font-display);
    font-size: 0.85rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-ink-light);
    margin-bottom: var(--spacing-sm);
}

.key-display__value {
    font-family: var(--font-mono);
    font-size: clamp(1.8rem, 8vw, 3.5rem);
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--color-ink);
    text-transform: uppercase;
    line-height: 1;
    display: inline-block;
    vertical-align: middle;
    max-width: 100%;
}

/* Key display actions row (copy, share, refresh) */
.key-display__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
}

/* Shared button style for copy, share, refresh */
.key-display__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--color-paper);
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--color-ink-light);
    flex-shrink: 0;
    transition: background 0.2s cubic-bezier(0.32, 0.72, 0, 1),
                border-color 0.2s cubic-bezier(0.32, 0.72, 0, 1),
                color 0.2s cubic-bezier(0.32, 0.72, 0, 1),
                transform 0.2s cubic-bezier(0.32, 0.72, 0, 1);
}

.key-display__btn svg {
    width: 16px;
    height: 16px;
}

.key-display__btn:hover {
    background: var(--color-amber);
    border-color: var(--color-amber);
    color: #fff;
    transform: scale(1.05);
}

.key-display__btn:active {
    transform: scale(0.95);
}

.key-display__btn--copied {
    background: var(--color-success) !important;
    border-color: var(--color-success) !important;
    color: #fff !important;
}

.key-display__btn--shared {
    background: var(--color-success) !important;
    border-color: var(--color-success) !important;
    color: #fff !important;
}

.key-display__btn--refresh:hover {
    transform: scale(1.1);
}

.key-display__btn--refresh:active {
    transform: scale(0.93);
}

/* ── Download Section ─────────────────────── */

.download-section {
    display: none;
    margin-top: var(--spacing-lg);
    animation: fadeUp 0.4s cubic-bezier(0.32, 0.72, 0, 1);
}

.download-section__header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    font-family: var(--font-display);
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-success);
}

.download-section__check {
    width: 18px;
    height: 18px;
    color: var(--color-success);
    animation: fadeDown 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

.conversion-progress {
    display: none;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    margin-bottom: var(--spacing-sm);
    border-radius: var(--radius-md);
    background: var(--color-paper);
    font-size: 0.8rem;
    color: var(--color-ink-light);
    animation: fadeUp 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

.conversion-progress__spinner {
    width: 14px;
    height: 14px;
    border: 2px solid var(--color-rule);
    border-top-color: var(--color-amber);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    flex-shrink: 0;
}

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

.conversion-progress__text {
    flex: 1;
}

.conversion-progress__step {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--color-amber);
}

.download-section__label {
    font-family: var(--font-display);
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-success);
}

/* Download file card — mirrors upload file-item */
.download-file {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-rule);
    background: var(--color-surface);
    animation: download-file-enter 0.4s cubic-bezier(0.32, 0.72, 0, 1) both;
    transition: border-color 0.2s cubic-bezier(0.32, 0.72, 0, 1),
                background 0.2s cubic-bezier(0.32, 0.72, 0, 1),
                box-shadow 0.2s cubic-bezier(0.32, 0.72, 0, 1);
}

.download-file:hover {
    border-color: var(--color-amber);
    background: rgba(200, 135, 62, 0.03);
    box-shadow: 0 2px 8px rgba(200, 135, 62, 0.1);
}

.download-file + .download-file {
    margin-top: var(--spacing-sm);
}

@keyframes download-file-enter {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.download-file:nth-child(1) { animation-delay: 0ms; }
.download-file:nth-child(2) { animation-delay: 60ms; }
.download-file:nth-child(3) { animation-delay: 120ms; }
.download-file:nth-child(4) { animation-delay: 180ms; }
.download-file:nth-child(n+5) { animation-delay: 240ms; }

.download-file__icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    background: var(--color-cream);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s cubic-bezier(0.32, 0.72, 0, 1);
}

.download-file:hover .download-file__icon {
    background: var(--color-paper);
}

.download-file__icon svg {
    width: 20px;
    height: 20px;
}

/* File type colors in icon — mirrors upload file-item__type */
.download-file--epub .download-file__icon { color: var(--color-ink); }
.download-file--pdf .download-file__icon { color: var(--color-amber-deep); }
.download-file--djvu .download-file__icon { color: var(--color-djvu); }
.download-file--comic .download-file__icon { color: var(--color-success); }

.download-file__info {
    flex: 1;
    min-width: 0;
}

.download-file__name {
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.download-file__meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin-top: 2px;
}

.download-file__type {
    font-family: var(--font-mono);
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 1px 5px;
    border-radius: 2px;
    color: var(--color-ink-light);
    background: var(--color-paper);
}

.download-file__size {
    font-family: var(--font-mono);
    font-size: 0.55rem;
    color: var(--color-ink-light);
    margin-left: 4px;
}

.download-file--pdf .download-file__type { color: var(--color-amber-deep); }
.download-file--djvu .download-file__type { color: var(--color-djvu); }
.download-file--comic .download-file__type { color: var(--color-success); }

.download-file__size {
    font-family: var(--font-body);
    font-size: 0.7rem;
    color: var(--color-ink-light);
    font-style: italic;
}

.download-all-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    margin-top: var(--spacing-md);
    padding: 0.7em 1.2em;
    background: var(--color-cream);
    border: 2px solid var(--color-rule);
    border-radius: var(--radius-md);
    color: var(--color-muted);
    text-decoration: none;
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.2s;
}

.download-all-btn svg {
    width: 18px;
    height: 18px;
}

.download-all-btn:hover {
    border-color: var(--color-amber);
    color: var(--color-amber);
    background: rgba(200, 135, 62, 0.08);
}

/* Download action button */
.download-file__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-amber);
    color: #fff;
    text-decoration: none;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(200, 135, 62, 0.25);
    transition: background 0.2s cubic-bezier(0.32, 0.72, 0, 1),
                transform 0.2s cubic-bezier(0.32, 0.72, 0, 1),
                box-shadow 0.2s cubic-bezier(0.32, 0.72, 0, 1);
}

.download-file__action:hover {
    background: var(--color-amber-deep);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(200, 135, 62, 0.35);
    color: #fff;
}

.download-file__action:active {
    transform: translateY(0) scale(0.95);
}

.download-file__action svg {
    width: 18px;
    height: 18px;
}

/* Legacy download-btn kept for e-reader fallback page */
.download-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    background: var(--color-amber);
    color: #fff;
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 400;
    padding: 0.75em 1.5em;
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: background 0.2s cubic-bezier(0.32, 0.72, 0, 1),
                color 0.2s cubic-bezier(0.32, 0.72, 0, 1),
                transform 0.2s cubic-bezier(0.32, 0.72, 0, 1),
                box-shadow 0.2s cubic-bezier(0.32, 0.72, 0, 1);
    box-shadow: 0 2px 8px rgba(200, 135, 62, 0.3);
}

.download-btn:hover {
    background: var(--color-amber-deep);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(200, 135, 62, 0.4);
}

.download-btn:active {
    transform: translateY(0) scale(0.98);
}

.download-btn svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* ── URLs Section ─────────────────────────── */

.urls-section {
    text-align: center;
    margin-top: var(--spacing-lg);
}

.urls-section__label {
    font-family: var(--font-display);
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-ink-light);
    margin-bottom: var(--spacing-sm);
}

.url-link {
    display: block;
    padding: var(--spacing-sm) var(--spacing-md);
    margin: var(--spacing-xs) 0;
    background: var(--color-paper);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    word-break: break-all;
}

/* ── Form Elements ────────────────────────── */

.form-group {
    margin-bottom: var(--spacing-lg);
}

.form-group--center {
    text-align: center;
}

/* Key input: letterpress stamp treatment */
.form-group--key {
    position: relative;
    background: var(--color-cream);
    border: 2px dotted var(--color-rule);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg) var(--spacing-xl);
    margin-bottom: var(--spacing-lg);
    transition: border-color 0.25s cubic-bezier(0.32, 0.72, 0, 1), box-shadow 0.25s cubic-bezier(0.32, 0.72, 0, 1);
}

.form-group--key:focus-within {
    border-color: var(--color-amber);
    box-shadow: 0 0 0 3px rgba(200, 135, 62, 0.08);
}

.form-group--key .form-group__label {
    display: block;
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 700;
}

/* ── Paste Key Button ────────────────────── */

.key-input-wrap {
    position: relative;
    max-width: 320px;
    margin: 0 auto;
}

.key-paste-btn {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    background: transparent;
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    cursor: pointer;
    color: var(--color-muted);
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.key-paste-btn svg {
    width: 18px;
    height: 18px;
}

.key-paste-btn:hover {
    color: var(--color-amber);
    border-color: var(--color-amber);
    background: rgba(200, 135, 62, 0.08);
}

.form-group--key .form-group__hint {
    display: block;
    font-size: 0.75rem;
    color: var(--color-ink-light);
    font-style: italic;
    margin-top: var(--spacing-sm);
    text-align: center;
    opacity: 0.8;
}

/* Sections that appear/disappear dynamically */
.form-group--reveal {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    margin-bottom: 0;
    transition: max-height 0.4s cubic-bezier(0.32, 0.72, 0, 1),
                opacity 0.3s cubic-bezier(0.32, 0.72, 0, 1),
                margin-bottom 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

.form-group--reveal.open {
    max-height: 500px;
    opacity: 1;
    margin-bottom: var(--spacing-lg);
}

.form-group__label {
    display: block;
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-ink);
    margin-bottom: var(--spacing-sm);
}

.form-group__hint {
    font-size: 0.8rem;
    color: var(--color-ink-light);
    font-style: italic;
    margin-top: var(--spacing-xs);
}

.form-group__hint-inline {
    font-weight: 400;
    font-style: italic;
    font-size: 0.85em;
    color: var(--color-ink-light);
}

.form-input {
    width: 100%;
    padding: 0.7em 0.9em;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-ink);
    background: var(--color-surface);
    border: 1px solid var(--color-input);
    border-radius: var(--radius-md);
    transition: border-color 0.25s cubic-bezier(0.32, 0.72, 0, 1), box-shadow 0.25s cubic-bezier(0.32, 0.72, 0, 1);
}

.form-input:focus {
    border-color: var(--color-amber);
    box-shadow: 0 0 0 3px rgba(200, 135, 62, 0.15);
    outline: none;
}

@media (forced-colors: active) {
    .form-input:focus {
        outline: 2px solid Highlight;
        outline-offset: 1px;
    }
}

.form-input--key:valid:not(:placeholder-shown) {
    border-color: var(--color-success);
    box-shadow: none;
}

.form-input--key:invalid:not(:placeholder-shown):not(:focus) {
    border-color: var(--color-error);
    box-shadow: none;
}

.form-input--key {
    font-family: var(--font-mono);
    font-size: 2rem;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding: 0.3em 44px 0.3em 0.2em;
    width: 100%;
    display: block;
    background: transparent;
    border: none;
    border-bottom: 3px solid var(--color-rule);
    border-radius: 0;
    color: var(--color-ink);
    transition: border-color 0.25s cubic-bezier(0.32, 0.72, 0, 1);
}

.form-input--key:focus {
    border-color: var(--color-amber);
    box-shadow: none;
    outline: none;
}

@media (forced-colors: active) {
    .form-input--key:focus {
        outline: 2px solid Highlight;
        outline-offset: 1px;
    }
}

.form-input--key::placeholder {
    color: var(--color-muted);
    letter-spacing: 0.15em;
}

/* Key input: valid feedback */
.form-group--key .form-group__feedback {
    display: block;
    text-align: center;
    font-size: 0.75rem;
    font-style: italic;
    margin-top: var(--spacing-xs);
    min-height: 1.2em;
    transition: color 0.25s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.25s cubic-bezier(0.32, 0.72, 0, 1);
    opacity: 0;
}

.form-group--key .form-group__feedback.visible {
    opacity: 1;
}

.form-group--key .form-group__feedback.valid {
    color: var(--color-success);
    font-weight: 600;
    font-size: 0.85rem;
}

.form-group--key .form-group__feedback.invalid {
    color: var(--color-error);
    font-weight: 600;
    font-size: 0.85rem;
}

.form-group--key .form-group__feedback.checking {
    color: var(--color-amber);
    animation: key-pulse 1s ease infinite;
}

@keyframes key-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* ── Content Tabs (File / URL) ────────────── */

.content-tabs {
    display: flex;
    gap: 2px;
    background: var(--color-cream);
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-md);
    padding: 3px;
    margin-bottom: var(--spacing-md);
}

.content-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: 0.65em 0.8em;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-ink-light);
    cursor: pointer;
    transition: background 0.25s cubic-bezier(0.32, 0.72, 0, 1),
                color 0.25s cubic-bezier(0.32, 0.72, 0, 1),
                box-shadow 0.25s cubic-bezier(0.32, 0.72, 0, 1);
}

.content-tab:hover {
    color: var(--color-ink);
    background: rgba(200, 135, 62, 0.06);
}

.content-tab.active {
    background: var(--color-surface);
    color: var(--color-ink);
    box-shadow: 0 1px 3px var(--color-shadow);
}

.content-tab__icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.content-panel {
    display: none;
    animation: fadeUp 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

.content-panel.active {
    display: block;
}

/* URL panel */
.url-panel {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.url-panel .form-input {
    margin: 0;
}

.url-format-options {
    opacity: 1;
    transition: opacity 0.25s cubic-bezier(0.32, 0.72, 0, 1);
}

.url-format-options .form-group__label {
    margin-bottom: var(--spacing-sm);
}

/* ── File Picker ──────────────────────────── */

.file-picker {
    position: relative;
}

.file-picker__dropzone {
    position: relative;
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-md);
    padding: var(--spacing-xl) var(--spacing-lg);
    text-align: center;
    cursor: pointer;
    transition: border-color 0.25s cubic-bezier(0.32, 0.72, 0, 1), background 0.25s cubic-bezier(0.32, 0.72, 0, 1);
    background: var(--color-surface);
}

.file-picker__dropzone:hover,
.file-picker__dropzone.dragover {
    border-color: var(--color-amber);
    background: rgba(200, 135, 62, 0.05);
}

.file-picker__dropzone.has-file {
    display: none;
}

.file-picker__icon {
    width: 40px;
    height: 40px;
    margin: 0 auto var(--spacing-sm);
    color: var(--color-ink-light);
    transition: color 0.25s cubic-bezier(0.32, 0.72, 0, 1);
}

.file-picker__dropzone:hover .file-picker__icon {
    color: var(--color-amber);
}

.file-picker__text {
    font-size: 0.95rem;
    color: var(--color-ink-light);
}

.file-picker__text strong {
    color: var(--color-amber-deep);
}

.file-picker__formats {
    font-size: 0.75rem;
    color: var(--color-ink-light);
    margin-top: var(--spacing-sm);
    font-style: italic;
}

.file-picker__info {
    margin-top: var(--spacing-sm);
    font-size: 0.85rem;
    color: var(--color-ink);
    font-style: italic;
    min-height: 1.4em;
}

/* ── File Picker: File Selected State ────── */

.file-picker__selected {
    display: none;
    flex-direction: column;
    width: 100%;
    border: 2px solid var(--color-amber);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    overflow: hidden;
    animation: fadeUp 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

.file-picker__selected.visible {
    display: flex;
}

.file-picker__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-paper);
    border-bottom: 1px solid var(--color-rule);
    flex-shrink: 0;
}

.file-picker__summary {
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-ink-light);
}

.file-picker__actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.file-picker__add-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 700;
    color: #fff;
    background: var(--color-amber);
    border: none;
    border-radius: var(--radius-sm);
    padding: 0.3em 0.7em;
    cursor: pointer;
    transition: background 0.2s cubic-bezier(0.32, 0.72, 0, 1), transform 0.2s cubic-bezier(0.32, 0.72, 0, 1);
}

.file-picker__add-btn svg {
    width: 12px;
    height: 12px;
}

.file-picker__add-btn:hover {
    background: var(--color-amber-deep);
    transform: translateY(-1px);
}

.file-picker__add-btn:active {
    transform: scale(0.96);
}

.file-picker__clear-btn {
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--color-ink-light);
    background: transparent;
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-sm);
    padding: 0.3em 0.6em;
    cursor: pointer;
    transition: color 0.2s cubic-bezier(0.32, 0.72, 0, 1), border-color 0.2s cubic-bezier(0.32, 0.72, 0, 1), background 0.2s cubic-bezier(0.32, 0.72, 0, 1);
}

.file-picker__clear-btn:hover {
    color: var(--color-error);
    border-color: var(--color-error);
    background: var(--color-error-bg);
}

.file-picker__clear-btn:active {
    transform: scale(0.96);
}

.file-picker__selected-details {
    max-height: 220px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--color-rule) transparent;
}

.file-picker__selected-details::-webkit-scrollbar {
    width: 4px;
}

.file-picker__selected-details::-webkit-scrollbar-track {
    background: transparent;
}

.file-picker__selected-details::-webkit-scrollbar-thumb {
    background: var(--color-rule);
    border-radius: 2px;
}

/* ── File Items ──────────────────────────── */

.file-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    position: relative;
    overflow: hidden;
    transition: background 0.25s cubic-bezier(0.32, 0.72, 0, 1);
}

.file-item + .file-item {
    border-top: 1px solid var(--color-paper);
}

.file-item:hover {
    background: var(--color-cream);
}

/* Progress fill: ink soaking into paper */
.file-item__fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    background: linear-gradient(
        90deg,
        rgba(200, 135, 62, 0.08) 0%,
        rgba(200, 135, 62, 0.05) 100%
    );
    transition: width 0.4s cubic-bezier(0.32, 0.72, 0, 1);
    pointer-events: none;
    z-index: 0;
}

.file-item > *:not(.file-item__fill):not(.file-item__progress) {
    position: relative;
    z-index: 1;
}

.file-item--active .file-item__fill {
    width: 0;
}

.file-item--active {
    background: rgba(200, 135, 62, 0.04);
}

.file-item--done {
    background: var(--color-success-bg);
}

.file-item--done .file-item__fill {
    width: 100%;
    background: rgba(74, 124, 89, 0.06);
}

.file-item--done .file-item__name {
    color: var(--color-ink-light);
}

.file-item--error {
    background: var(--color-error-bg);
}

.file-item--error .file-item__fill {
    width: 100%;
    background: rgba(156, 58, 58, 0.06);
}

.file-item__status {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.file-item__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-rule);
    transition: background 0.2s cubic-bezier(0.32, 0.72, 0, 1), transform 0.2s cubic-bezier(0.32, 0.72, 0, 1);
}

.file-item--active .file-item__dot {
    background: var(--color-amber);
    animation: ink-press 1.2s ease infinite;
}

.file-item--done .file-item__dot {
    background: var(--color-success);
    transform: scale(1.1);
}

.file-item--error .file-item__dot {
    background: var(--color-error);
    transform: scale(1.1);
}

.file-item__check,
.file-item__cross {
    width: 16px;
    height: 16px;
}

.file-item__check {
    color: var(--color-success);
}

.file-item__cross {
    color: var(--color-error);
}

@keyframes ink-press {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.85); }
}

@keyframes file-enter {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.file-item {
    animation: file-enter 0.3s cubic-bezier(0.32, 0.72, 0, 1) both;
}

.file-item:nth-child(1) { animation-delay: 0ms; }
.file-item:nth-child(2) { animation-delay: 40ms; }
.file-item:nth-child(3) { animation-delay: 80ms; }
.file-item:nth-child(4) { animation-delay: 120ms; }
.file-item:nth-child(5) { animation-delay: 160ms; }
.file-item:nth-child(n+6) { animation-delay: 200ms; }

.file-item__main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.file-item__row {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.file-item__name {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
    transition: color 0.2s cubic-bezier(0.32, 0.72, 0, 1);
}

.file-item__type {
    font-family: var(--font-mono);
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 1px 5px;
    border-radius: 2px;
    flex-shrink: 0;
    color: var(--color-ink-light);
    background: var(--color-paper);
}

.file-item--pdf .file-item__type { color: var(--color-amber-deep); }
.file-item--djvu .file-item__type { color: var(--color-djvu); }
.file-item--comic .file-item__type { color: var(--color-success); }

.file-item--done .file-item__type { opacity: 0.5; }
.file-item--error .file-item__type { opacity: 0.5; }

/* ── Conversion steps per file (letterpress composer's marks) ── */

.file-item__steps {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    min-width: 0;
}

.file-item__step {
    font-family: var(--font-mono);
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-ink-light);
    background: var(--color-parchment);
    padding: 0px 4px;
    border-radius: 2px;
    border: 1px solid var(--color-rule);
    white-space: nowrap;
    line-height: 1.5;
}

.file-item--done .file-item__step {
    opacity: 0.5;
    border-color: transparent;
}

.file-item--error .file-item__step {
    opacity: 0.4;
    border-color: transparent;
}

.file-item__size {
    font-family: var(--font-body);
    font-size: 0.7rem;
    color: var(--color-ink-light);
    font-style: italic;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    white-space: nowrap;
}

.file-item__remove {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-sm);
    color: var(--color-ink-light);
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s cubic-bezier(0.32, 0.72, 0, 1), color 0.2s cubic-bezier(0.32, 0.72, 0, 1), border-color 0.2s cubic-bezier(0.32, 0.72, 0, 1), background 0.2s cubic-bezier(0.32, 0.72, 0, 1);
    padding: 0;
    font-family: var(--font-body);
    align-self: flex-start;
    margin-top: 1px;
}

.file-item:hover .file-item__remove {
    opacity: 1;
    border-color: transparent;
}

.file-item__remove:hover {
    background: var(--color-error-bg);
    border-color: var(--color-error);
    color: var(--color-error);
    opacity: 1;
}

.file-item__remove:active {
    transform: scale(0.9);
}

.file-item--active .file-item__remove,
.file-item--done .file-item__remove,
.file-item--error .file-item__remove {
    display: none;
}

.file-item__progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 0;
    background: var(--color-amber-glow);
    transition: width 0.3s cubic-bezier(0.32, 0.72, 0, 1), background 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    z-index: 2;
}

.file-item--done .file-item__progress {
    width: 100%;
    background: var(--color-success);
}

.file-item--error .file-item__progress {
    width: 100%;
    background: var(--color-error);
}

.file-picker input[type="file"] {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
}

/* ── Checkboxes ───────────────────────────── */

.options-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-sm);
}

/* PDF options with long descriptions: single column */
#pdfoptions .options-grid {
    grid-template-columns: 1fr;
}

.option {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    padding: 8px;
    margin: -4px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.15s cubic-bezier(0.32, 0.72, 0, 1);
}

.option:hover {
    background: var(--color-cream);
}

.option input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    border: 2px solid var(--color-input);
    border-radius: 3px;
    margin-top: 2px;
    flex-shrink: 0;
    cursor: pointer;
    transition: background 0.15s cubic-bezier(0.32, 0.72, 0, 1),
                border-color 0.15s cubic-bezier(0.32, 0.72, 0, 1);
    position: relative;
}

.option input[type="checkbox"]:checked {
    background: var(--color-amber);
    border-color: var(--color-amber);
}

.option input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--color-amber);
    outline-offset: 2px;
}

.option input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 5px;
    width: 5px;
    height: 9px;
    border: 2px solid #fff;
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
}

.option__text {
    font-size: 0.9rem;
    line-height: 1.4;
}

.option__text strong {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.85rem;
}

.option__text small {
    display: block;
    font-size: 0.75rem;
    color: var(--color-ink-light);
    margin-top: 0.15em;
}

.option__badge {
    display: inline-block;
    font-size: 0.65rem;
    font-family: var(--font-mono);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: var(--color-paper);
    color: var(--color-ink-light);
    padding: 1px 6px;
    border-radius: 3px;
    margin-left: 4px;
    vertical-align: middle;
}

/* ── Submit Row ──────────────────────────── */

.submit-row {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}

/* ── Submit Button ────────────────────────── */

.btn-submit {
    flex: 1;
    display: block;
    padding: 0.85em;
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    background: var(--color-amber);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background 0.2s cubic-bezier(0.32, 0.72, 0, 1),
                transform 0.2s cubic-bezier(0.32, 0.72, 0, 1),
                box-shadow 0.2s cubic-bezier(0.32, 0.72, 0, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(200, 135, 62, 0.25);
}

/* ── Cancel Button ───────────────────────── */

.btn-cancel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4em;
    padding: 0.85em 1.2em;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-muted);
    background: transparent;
    border: 2px solid var(--color-rule);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.btn-cancel svg {
    width: 1em;
    height: 1em;
}

.btn-cancel:hover {
    border-color: var(--color-error);
    color: var(--color-error);
    background: var(--color-error-bg);
}

.btn-cancel:active {
    transform: scale(0.97);
}

/* ── Key Suggestions ─────────────────────── */

.key-suggestions {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin-top: 4px;
    background: var(--color-surface);
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    z-index: 10;
    overflow: hidden;
}

.key-suggestions__label {
    padding: 0.4em 0.8em;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.key-suggestion {
    padding: 0.5em 0.8em;
    font-family: var(--font-mono);
    font-size: 0.95rem;
    letter-spacing: 0.15em;
    cursor: pointer;
    transition: background 0.15s;
    border-top: 1px solid var(--color-rule);
}

.key-suggestion:hover {
    background: var(--color-amber-faint);
}

.btn-submit:hover {
    background: var(--color-amber-deep);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(200, 135, 62, 0.35);
}

.btn-submit:active {
    transform: translateY(0) scale(0.98);
}

.btn-submit:disabled {
    cursor: not-allowed;
    opacity: 0.5;
    transform: none;
    box-shadow: none;
    background: var(--color-rule);
}

.btn-submit:not(:disabled) {
    opacity: 1;
}

/* ── Submit Hint ──────────────────────────── */

.submit-hint {
    display: block;
    text-align: center;
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-style: italic;
    color: var(--color-ink-light);
    margin-top: var(--spacing-sm);
    min-height: 1.2em;
    opacity: 0.92;
    transition: opacity 0.25s cubic-bezier(0.32, 0.72, 0, 1);
}

.submit-hint:empty {
    opacity: 0;
}

/* ── Progress Bar ─────────────────────────── */

.progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4px;
    background: var(--color-amber-glow);
    transition: width 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.progress-bar.processing {
    width: 100%;
    animation: progress-pulse 1.5s ease infinite;
}

@keyframes progress-pulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* ── Status Toast ─────────────────────────── */

.status-toast {
    margin-top: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-md);
    text-align: center;
    font-size: 0.9rem;
    cursor: pointer;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.3s cubic-bezier(0.32, 0.72, 0, 1), transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

.status-toast.visible {
    opacity: 1;
    transform: translateY(0);
}

.status-toast.success {
    background: var(--color-success-bg);
    border: 1px solid var(--color-success);
    color: var(--color-success);
}

.status-toast.error {
    background: var(--color-error-bg);
    border: 1px solid var(--color-error);
    color: var(--color-error);
}

/* ── Upload Success State ────────────────── */

.upload-done {
    text-align: center;
    padding: var(--spacing-xl) 0;
    animation: fadeUp 0.4s cubic-bezier(0.32, 0.72, 0, 1);
}

.upload-done__icon {
    display: block;
    width: 56px;
    height: 56px;
    margin: 0 auto var(--spacing-md);
    color: var(--color-success);
}

.upload-done__title {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 400;
    font-style: italic;
    color: var(--color-ink);
    text-wrap: balance;
    margin-bottom: var(--spacing-sm);
}

.upload-done__file {
    font-size: 0.9rem;
    color: var(--color-ink-light);
    font-style: italic;
    margin-bottom: var(--spacing-xl);
}

.btn-reset {
    display: inline-block;
    padding: 0.7em 1.5em;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-ink-light);
    background: transparent;
    border: 2px solid var(--color-rule);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background 0.2s cubic-bezier(0.32, 0.72, 0, 1),
                color 0.2s cubic-bezier(0.32, 0.72, 0, 1),
                border-color 0.2s cubic-bezier(0.32, 0.72, 0, 1),
                transform 0.2s cubic-bezier(0.32, 0.72, 0, 1);
}

.btn-reset:hover {
    background: var(--color-ink);
    border-color: var(--color-ink);
    color: #fff;
}

.btn-reset:active {
    transform: scale(0.97);
}

/* ── Divider ──────────────────────────────── */

.divider {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-rule), transparent);
    margin: var(--spacing-xl) 0;
}

/* ── Footer ───────────────────────────────── */

.site-footer {
    text-align: center;
    font-size: 0.8rem;
    color: var(--color-ink-light);
    line-height: 1.8;
    padding-bottom: var(--spacing-xl);
}

/* ── Quick FAQ (lives in the footer band on modern-browser pages) ─── */
body.paper-page .quick-faq {
    width: 100%;
    background: var(--paper-bg-soft);
    padding: 72px 64px 40px;
    box-sizing: border-box;
    color: var(--paper-ink);
    border-top: 1px solid var(--paper-rule-soft);
}
body.paper-page .quick-faq__inner {
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
}
body.paper-page .quick-faq__eyebrow {
    font-family: var(--paper-font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--paper-ink-soft);
    margin-bottom: 14px;
}
body.paper-page .quick-faq__title {
    margin: 0 0 36px;
    max-width: 720px;
    font-family: var(--paper-font-display);
    font-weight: 400;
    font-size: 48px;
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: var(--paper-ink);
}
body.paper-page .quick-faq__title em {
    font-style: italic;
    color: var(--paper-accent);
}
body.paper-page .quick-faq__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 56px;
    row-gap: 0;
}
body.paper-page .quick-faq__item {
    padding: 22px 0;
    border-top: 1px solid var(--paper-rule-soft);
}
body.paper-page .quick-faq__item > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    color: var(--paper-ink);
    font-size: 16px;
    font-weight: 500;
}
body.paper-page .quick-faq__item > summary::-webkit-details-marker { display: none; }
body.paper-page .quick-faq__item > summary:focus-visible {
    outline: 2px solid var(--paper-accent);
    outline-offset: 4px;
    border-radius: 2px;
}
body.paper-page .quick-faq__chev {
    color: var(--paper-ink-faint);
    font-size: 18px;
    transition: transform .15s ease, color .15s ease;
}
body.paper-page .quick-faq__item[open] > summary > .quick-faq__chev {
    transform: rotate(45deg);
    color: var(--paper-accent);
}
body.paper-page .quick-faq__answer {
    margin: 10px 0 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--paper-ink-soft);
    text-wrap: pretty;
}

@media (max-width: 760px) {
    body.paper-page .quick-faq { padding: 48px 22px 24px; }
    body.paper-page .quick-faq__title { font-size: 32px; margin-bottom: 24px; }
    body.paper-page .quick-faq__grid { grid-template-columns: 1fr; }
}

/* ── Postal footer (shared component) ───────
   Styled under .paper-page since that's the only host today.
   Uses --paper-* tokens (Instrument Serif display, JetBrains Mono).
   ───────────────────────────────────────── */
body.paper-page .site-footer {
    width: 100%;
    margin: 0;
    padding: 40px 64px 32px;
    background: var(--paper-bg-soft);
    color: var(--paper-ink);
    border-top: 1px dashed var(--paper-rule-soft);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    text-align: left;
    font-family: var(--paper-font-body);
    font-size: 14px;
    line-height: 1.6;
}
body.paper-page .site-footer__main {
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 56px;
    align-items: flex-start;
}

body.paper-page .site-footer__letter { position: relative; }

body.paper-page .site-footer__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--paper-font-mono);
    font-size: 10.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--paper-ink-soft);
    margin-bottom: 18px;
}
body.paper-page .site-footer__eyebrow-rule {
    width: 18px;
    height: 1px;
    background: var(--paper-ink-soft);
}

body.paper-page .site-footer__title {
    margin: 0;
    font-family: var(--paper-font-display);
    font-size: 32px;
    line-height: 1.15;
    font-weight: 400;
    letter-spacing: -0.01em;
    max-width: 540px;
    color: var(--paper-ink);
}

body.paper-page .site-footer__lede {
    margin: 14px 0 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--paper-ink-soft);
    max-width: 520px;
    text-wrap: pretty;
}

body.paper-page .site-footer__sign {
    margin-top: 18px;
    font-family: var(--paper-font-display);
    font-style: italic;
    font-size: 15px;
    color: var(--paper-ink-soft);
}

body.paper-page .site-footer__stamps {
    margin-top: 26px;
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
}

body.paper-page .site-footer__stamp {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border: 1px dashed var(--paper-rule);
    border-radius: 3px;
    font-family: var(--paper-font-mono);
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--paper-ink-soft);
    background: var(--paper-bg-elev);
}
body.paper-page .site-footer__stamp-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--color-success);
    transition: background .2s ease;
}
body.paper-page #footer-status[data-status="checking"] .site-footer__stamp-dot { background: var(--paper-ink-faint); }
body.paper-page #footer-status[data-status="degraded"] .site-footer__stamp-dot { background: var(--paper-accent); }
body.paper-page #footer-status[data-status="unreachable"] .site-footer__stamp-dot { background: var(--paper-ink-faint); }

body.paper-page .site-footer__stamp--button {
    padding: 0;
    border: 0;
    background: transparent;
}
body.paper-page .site-footer__stamp-btn {
    all: unset;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border: 1px dashed var(--paper-rule);
    border-radius: 3px;
    font-family: var(--paper-font-mono);
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--paper-ink-soft);
    background: var(--paper-bg-elev);
    transition: border-color .15s ease, color .15s ease;
}
body.paper-page .site-footer__stamp-btn:hover {
    border-color: var(--paper-ink-soft);
    color: var(--paper-ink);
}
body.paper-page .site-footer__stamp-btn:focus-visible {
    outline: 2px solid var(--paper-accent);
    outline-offset: 2px;
}

body.paper-page .site-footer__channels {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

body.paper-page .site-footer__channel {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 20px;
    background: var(--paper-bg-elev);
    border: 1px solid var(--paper-rule);
    border-radius: var(--paper-radius);
    color: var(--paper-ink);
    text-decoration: none;
    box-shadow: var(--paper-shadow-sm);
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
@media (hover: hover) and (pointer: fine) {
    body.paper-page .site-footer__channel:hover {
        transform: translateY(-1px);
        border-color: var(--paper-ink-soft);
        box-shadow: var(--paper-shadow-md);
    }
}
body.paper-page .site-footer__channel:focus-visible,
body.paper-page .site-footer__link:focus-visible,
body.paper-page .site-footer__logo:focus-visible {
    outline: 2px solid var(--paper-accent);
    outline-offset: 2px;
    border-radius: 2px;
}
body.paper-page .site-footer__channel--accent {
    background: var(--paper-accent);
    color: var(--paper-bg-elev);
    border-color: var(--paper-accent);
}
body.paper-page .site-footer__channel--accent:hover {
    background: var(--paper-accent-deep);
    border-color: var(--paper-accent-deep);
}

body.paper-page .site-footer__channel-text {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
}
body.paper-page .site-footer__channel-title {
    font-family: var(--paper-font-body);
    font-weight: 600;
    font-size: 14px;
}
body.paper-page .site-footer__channel-sub {
    font-size: 12px;
    font-weight: 400;
    color: var(--paper-ink-soft);
}
body.paper-page .site-footer__channel--accent .site-footer__channel-sub {
    color: inherit;
    opacity: .85;
}
body.paper-page .site-footer__channel-arrow {
    font-size: 18px;
    color: var(--paper-ink-soft);
    flex-shrink: 0;
}
body.paper-page .site-footer__channel--accent .site-footer__channel-arrow {
    color: inherit;
}

body.paper-page .site-footer__strip {
    max-width: 1280px;
    width: 100%;
    margin: 36px auto 0;
    padding-top: 18px;
    border-top: 1px solid var(--paper-rule-soft);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    font-family: var(--paper-font-mono);
    font-size: 11px;
    color: var(--paper-ink-soft);
    letter-spacing: .06em;
    text-transform: uppercase;
}

body.paper-page .site-footer__logo {
    display: inline-flex;
    align-items: baseline;
    gap: 9px;
    color: var(--paper-ink);
    text-decoration: none;
    font-family: var(--paper-font-display);
    font-size: 14px;
    letter-spacing: -0.01em;
    text-transform: none;
}
body.paper-page .site-footer__logo-badge {
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    background: var(--paper-accent);
    color: var(--paper-bg-elev);
    font-style: italic;
    font-size: 12px;
    font-weight: 500;
    text-transform: none;
}
body.paper-page .site-footer__logo-name { font-weight: 500; }
body.paper-page .site-footer__logo-tld { color: var(--paper-ink-soft); }

body.paper-page .site-footer__meta {
    display: inline-flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
}
body.paper-page .site-footer__link {
    color: var(--paper-ink-soft);
    text-decoration: none;
    transition: color .15s ease;
}
body.paper-page .site-footer__link:hover { color: var(--paper-ink); }
body.paper-page .site-footer__sep { color: var(--paper-rule); }

@media (max-width: 760px) {
    body.paper-page .site-footer {
        padding: 40px 22px 28px;
    }
    body.paper-page .site-footer__main {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    body.paper-page .site-footer__title { font-size: 26px; }
    body.paper-page .site-footer__channel { padding: 16px 18px; }
    body.paper-page .site-footer__channel-title { font-size: 15px; }
    body.paper-page .site-footer__strip {
        align-items: flex-end;
        flex-wrap: nowrap;
        gap: 14px;
    }
    body.paper-page .site-footer__logo { font-size: 13px; flex-shrink: 0; }
    body.paper-page .site-footer__logo .wordmark,
    body.paper-page .site-footer__logo-text { white-space: nowrap; }
    body.paper-page .site-footer__meta {
        justify-content: flex-end;
        flex: 1 1 auto;
        text-align: right;
        min-width: 0;
    }
}

/* ── Status modal (clicked from "Service operational" stamp) ─── */
body.paper-page .status-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    border: 1px solid var(--paper-rule);
    border-radius: var(--paper-radius);
    background: var(--paper-bg-elev);
    color: var(--paper-ink);
    padding: 0;
    max-width: 520px;
    width: calc(100vw - 32px);
    max-height: calc(100vh - 32px);
    overflow: auto;
    box-shadow: var(--paper-shadow-lg);
    font-family: var(--paper-font-body);
}
body.paper-page .status-modal::backdrop {
    background: rgba(20, 17, 13, .55);
}
body.paper-page .status-modal__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 18px 22px 12px;
    border-bottom: 1px solid var(--paper-rule-soft);
}
body.paper-page .status-modal__title {
    margin: 0;
    font-family: var(--paper-font-display);
    font-size: 22px;
    font-weight: 400;
    color: var(--paper-ink);
}
body.paper-page .status-modal__close {
    all: unset;
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    color: var(--paper-ink-soft);
    font-size: 22px;
    line-height: 1;
}
body.paper-page .status-modal__close:hover {
    background: var(--paper-bg-soft);
    color: var(--paper-ink);
}
body.paper-page .status-modal__close:focus-visible {
    outline: 2px solid var(--paper-accent);
    outline-offset: 2px;
}
body.paper-page .status-modal__body {
    padding: 18px 22px 22px;
    font-size: 14px;
    line-height: 1.55;
}
body.paper-page .status-overall {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border: 1px solid var(--paper-rule);
    border-radius: 999px;
    background: var(--paper-bg);
    font-family: var(--paper-font-mono);
    font-size: 11.5px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--paper-ink);
    margin-bottom: 16px;
}
body.paper-page .status-overall__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--paper-ink-faint);
}
body.paper-page .status-overall.is-ready .status-overall__dot { background: var(--color-success); }
body.paper-page .status-overall.is-degraded .status-overall__dot { background: var(--paper-accent); }
body.paper-page .status-overall.is-unreachable .status-overall__dot { background: var(--paper-ink-faint); }
body.paper-page .status-row {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid var(--paper-rule-soft);
}
body.paper-page .status-row--block { display: block; }
body.paper-page .status-row__label {
    font-family: var(--paper-font-mono);
    font-size: 10.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--paper-ink-soft);
}
body.paper-page .status-row--block .status-row__label { margin-bottom: 8px; }
body.paper-page .status-row__value { color: var(--paper-ink); }
body.paper-page .status-row.is-warn .status-row__value { color: var(--paper-accent); }
body.paper-page .status-row__warn {
    display: inline-block;
    margin-left: 6px;
    font-family: var(--paper-font-mono);
    font-size: 10.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--paper-accent);
}
body.paper-page .status-tools {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
}
body.paper-page .status-tool {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 9px;
    border-radius: 4px;
    background: var(--paper-bg);
    border: 1px solid var(--paper-rule-soft);
    font-family: var(--paper-font-mono);
    font-size: 11px;
    color: var(--paper-ink);
}
body.paper-page .status-tool__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--paper-ink-faint);
}
body.paper-page .status-tool.is-ok .status-tool__dot { background: var(--color-success); }
body.paper-page .status-tool.is-down {
    color: var(--paper-ink-soft);
    text-decoration: line-through;
}
body.paper-page .status-tool.is-down .status-tool__dot { background: var(--paper-accent); }

@media (max-width: 520px) {
    body.paper-page .status-row { grid-template-columns: 1fr; gap: 4px; }
}

/* ── Info Section ─────────────────────────── */

.info-section {
    margin-top: var(--spacing-lg);
    animation: fadeUp 0.5s cubic-bezier(0.32, 0.72, 0, 1) 0.4s both;
}

.info-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    background: none;
    border: none;
    font-family: var(--font-display);
    font-size: 0.85rem;
    color: var(--color-ink-light);
    cursor: pointer;
    padding: var(--spacing-sm) var(--spacing-md);
    margin: 0 auto;
    transition: color 0.2s cubic-bezier(0.32, 0.72, 0, 1);
}

.info-toggle:hover {
    color: var(--color-amber);
}

.info-toggle svg {
    width: 16px;
    height: 16px;
    transition: transform 0.2s cubic-bezier(0.32, 0.72, 0, 1);
}

.info-toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

.info-content {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    padding: 0 var(--spacing-lg);
    font-size: 0.85rem;
    color: var(--color-ink-light);
    line-height: 1.7;
    text-align: left;
    transition: max-height 0.4s cubic-bezier(0.32, 0.72, 0, 1),
                opacity 0.3s cubic-bezier(0.32, 0.72, 0, 1),
                padding 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

.info-content.open {
    max-height: 400px;
    opacity: 1;
    padding: var(--spacing-lg);
}

.info-content p + p {
    margin-top: var(--spacing-md);
}

/* ── Waiting state (Download Page) ────────── */

.waiting-message {
    text-align: center;
    padding: var(--spacing-lg) 0;
    color: var(--color-ink-light);
    font-style: italic;
    font-size: 0.95rem;
}

.waiting-dots::after {
    content: '';
    animation: dots 1.5s steps(4, end) infinite;
}

@keyframes dots {
    0%, 20% { content: ''; }
    40% { content: '.'; }
    60% { content: '..'; }
    80%, 100% { content: '...'; }
}

/* ── Animations (progressive enhancement) ─── */

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeDown {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Dark Theme ───────────────────────────── */

[data-theme="dark"] {
    --color-cream: #181410;
    --color-paper: #221e18;
    --color-parchment: #2a241c;
    --color-ink: #ddd0be;
    --color-ink-light: #a89880;
    --color-amber: #d49530;
    --color-amber-deep: #b87e20;
    --color-amber-glow: #e8a840;
    --color-amber-faint: rgba(212, 149, 48, 0.12);
    --color-success: #5a9a68;
    --color-success-bg: #1a261e;
    --color-error: #c04848;
    --color-error-bg: #2a1818;
    --color-rule: #362e24;
    --color-input: #5a5040;
    --color-djvu: #8a7acd;
    --color-shadow: rgba(0, 0, 0, 0.35);
    --color-muted: #9a8a74;
    --color-surface: #201c16;
}

[data-theme="dark"] a {
    text-decoration-color: var(--color-rule);
}

[data-theme="dark"] .btn-submit {
    background: var(--color-amber);
}

[data-theme="dark"] .btn-submit:hover {
    background: var(--color-amber-deep);
    box-shadow: 0 4px 16px rgba(212, 149, 48, 0.3);
}

[data-theme="dark"] .btn-cancel {
    border-color: var(--color-rule);
    color: var(--color-ink-light);
}

[data-theme="dark"] .btn-cancel:hover {
    border-color: var(--color-error);
    color: var(--color-error);
    background: var(--color-error-bg);
}

[data-theme="dark"] .key-suggestions {
    background: #252018;
    border-color: #3a3530;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .key-suggestion {
    border-top-color: #3a3530;
}

[data-theme="dark"] .key-suggestion:hover {
    background: rgba(212, 149, 48, 0.15);
}

[data-theme="dark"] .key-paste-btn {
    border-color: #444;
    color: #888;
}

[data-theme="dark"] .key-paste-btn:hover {
    color: var(--color-amber);
    border-color: var(--color-amber);
    background: rgba(212, 149, 48, 0.12);
}

[data-theme="dark"] .file-picker__dropzone:hover,
[data-theme="dark"] .file-picker__dropzone.dragover {
    background: rgba(212, 149, 48, 0.08);
}

[data-theme="dark"] .form-input:focus {
    box-shadow: 0 0 0 3px rgba(212, 149, 48, 0.2);
}

[data-theme="dark"] .form-group--key {
    background: var(--color-paper);
    border-color: var(--color-rule);
}

[data-theme="dark"] .form-group--key:focus-within {
    border-color: var(--color-amber);
    box-shadow: 0 0 0 3px rgba(212, 149, 48, 0.12);
}

[data-theme="dark"] .form-input--key {
    border-bottom-color: var(--color-ink-light);
    color: var(--color-ink);
}

[data-theme="dark"] .form-input--key:focus {
    border-bottom-color: var(--color-amber);
}

[data-theme="dark"] .option input[type="checkbox"] {
    border-color: var(--color-ink-light);
}

[data-theme="dark"] .file-item__fill {
    background: linear-gradient(
        90deg,
        rgba(212, 149, 48, 0.12) 0%,
        rgba(212, 149, 48, 0.06) 100%
    );
}

[data-theme="dark"] .file-item--active {
    background: rgba(212, 149, 48, 0.06);
}

[data-theme="dark"] .file-item--done .file-item__fill {
    background: rgba(90, 154, 104, 0.1);
}

[data-theme="dark"] .file-item--error .file-item__fill {
    background: rgba(192, 72, 72, 0.1);
}

[data-theme="dark"] .file-item__step {
    border-color: var(--color-ink-light);
    background: rgba(168, 152, 128, 0.08);
}

[data-theme="dark"] .content-tabs {
    background: var(--color-paper);
    border-color: var(--color-rule);
}

[data-theme="dark"] .content-tab {
    color: var(--color-ink-light);
}

[data-theme="dark"] .content-tab:hover {
    color: var(--color-ink);
    background: rgba(212, 149, 48, 0.08);
}

[data-theme="dark"] .content-tab.active {
    background: var(--color-surface);
    color: var(--color-ink);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .url-panel .form-input {
    background: var(--color-paper);
    border-color: var(--color-rule);
}

[data-theme="dark"] .url-panel .form-input:focus {
    background: var(--color-surface);
    border-color: var(--color-amber);
}

.history-item {
    border-bottom: 1px solid var(--color-rule);
}

.history-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.history-clear-btn {
    margin-top: 0.5em;
    font-size: 0.85rem;
    background: none;
    border: none;
    color: var(--color-ink-light);
    cursor: pointer;
    text-decoration: underline;
    transition: color 0.2s cubic-bezier(0.32, 0.72, 0, 1);
}

.history-clear-btn:hover {
    color: var(--color-error);
}

.history-meta {
    color: var(--color-ink-light);
}

[data-theme="dark"] .history-item {
    border-bottom-color: var(--color-rule);
}

[data-theme="dark"] .history-meta {
    color: var(--color-muted);
}

[data-theme="dark"] .file-picker__selected {
    border-color: var(--color-amber);
}

[data-theme="dark"] .file-picker__header {
    background: var(--color-paper);
    border-bottom-color: var(--color-rule);
}

[data-theme="dark"] .file-picker__add-btn {
    background: var(--color-amber);
}

[data-theme="dark"] .file-picker__add-btn:hover {
    background: var(--color-amber-deep);
}

[data-theme="dark"] .file-picker__clear-btn {
    color: var(--color-ink-light);
    border-color: var(--color-rule);
}

[data-theme="dark"] .file-picker__clear-btn:hover {
    color: var(--color-error);
    border-color: var(--color-error);
    background: var(--color-error-bg);
}

[data-theme="dark"] .file-item:hover {
    background: rgba(168, 152, 128, 0.06);
}

[data-theme="dark"] .download-file {
    border-color: var(--color-rule);
}

[data-theme="dark"] .download-file:hover {
    border-color: var(--color-amber);
    background: rgba(212, 149, 48, 0.04);
    box-shadow: 0 2px 8px rgba(212, 149, 48, 0.12);
}

[data-theme="dark"] .download-file__icon {
    background: var(--color-paper);
}

/* ── Responsive ───────────────────────────── */

@media (max-width: 480px) {
    html { font-size: 15px; }

    .wrapper { padding: var(--spacing-lg) var(--spacing-md); }

    .card { min-height: 260px; }

    .card { padding: var(--spacing-lg); }

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

    .key-display__value { font-size: 2rem; }

    .key-input-wrap { max-width: 280px; }
    .form-input--key { font-size: 1.6rem; padding-right: 36px; }
    .key-paste-btn { padding: 6px 8px; }
    .key-paste-btn svg { width: 14px; height: 14px; }
}

/* ── Accessibility ────────────────────────── */

:focus-visible {
    outline: 2px solid var(--color-amber);
    outline-offset: 2px;
}

.skip-link {
    position: absolute;
    top: -100%;
    left: var(--spacing-md);
    background: var(--color-ink);
    color: var(--color-surface);
    padding: calc(var(--spacing-sm) + 1px) var(--spacing-md);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 0.9rem;
    text-decoration: none;
    z-index: 100;
}

.skip-link:focus {
    top: var(--spacing-md);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ── E-ink Display Optimizations ──────────── */

@media (prefers-contrast: more) {
    :root, [data-theme] {
        --color-cream: #fff;
        --color-paper: #eee;
        --color-ink: #000;
        --color-ink-light: #333;
        --color-amber: #b86d10;
        --color-amber-deep: #8a5208;
        --color-rule: #999;
        --color-surface: #fff;
    }
    body::before { display: none; }
}

@media (update: slow) {
    *, *::before, *::after {
        transition: none !important;
        animation: none !important;
    }
    body::before { display: none; }

    /* E Ink Kaleido 3 color optimizations:
       - Higher saturation to compensate for washed-out colors
       - Stronger contrast for better readability at 150 PPI color
       - Simplified backgrounds (no gradients/textures) */
    :root, [data-theme] {
        --color-cream: #f5efe6;
        --color-paper: #ece3d5;
        --color-amber: #d4841a;
        --color-amber-deep: #b86d10;
        --color-amber-glow: #e89530;
        --color-success: #2d7a3a;
        --color-success-bg: #d6f0dc;
        --color-error: #b82020;
        --color-error-bg: #f5d4d4;
        --color-ink: #1a1208;
        --color-ink-light: #3d3020;
        --color-surface: #fff;
    }

    .download-btn {
        font-weight: 700;
        letter-spacing: 0.02em;
    }

    .divider {
        background: var(--color-rule);
    }
}

/* ── Receive Status (Listening Indicator) ─── */

.receive-status {
    text-align: center;
    padding: var(--spacing-lg) 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    animation: fadeUp 0.4s cubic-bezier(0.32, 0.72, 0, 1);
}

.receive-status__indicator {
    position: relative;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.receive-status__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-amber);
    animation: receive-breathe 2.5s cubic-bezier(0.32, 0.72, 0, 1) infinite;
}

.receive-status__ring {
    position: absolute;
    inset: 0;
    border: 2px solid var(--color-amber);
    border-radius: 50%;
    animation: receive-ping 2.5s cubic-bezier(0.32, 0.72, 0, 1) infinite;
}

@keyframes receive-breathe {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(0.8); opacity: 0.6; }
}

@keyframes receive-ping {
    0% { transform: scale(0.4); opacity: 0.5; }
    70% { transform: scale(1.1); opacity: 0; }
    100% { transform: scale(1.1); opacity: 0; }
}

/* Processing state: spinning ring */
.receive-status--converting .receive-status__dot {
    background: transparent;
    border: 2.5px solid var(--color-amber);
    border-top-color: transparent;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    animation: receive-spin 0.8s linear infinite;
}

.receive-status--converting .receive-status__ring {
    display: none;
}

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

.receive-status__text {
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-style: italic;
    color: var(--color-ink-light);
    letter-spacing: 0.02em;
    transition: font-style 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

.receive-status--converting .receive-status__text {
    font-style: normal;
    font-weight: 600;
    color: var(--color-ink);
}

.receive-status__step {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-ink-light);
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.3s cubic-bezier(0.32, 0.72, 0, 1),
                max-height 0.3s cubic-bezier(0.32, 0.72, 0, 1),
                margin 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    margin-top: 0;
}

.receive-status--converting .receive-status__step {
    opacity: 1;
    max-height: 2em;
    margin-top: var(--spacing-xs);
}

/* ── QR Code Section ───────────────────────── */

.qr-section {
    text-align: center;
    margin-top: var(--spacing-lg);
    animation: fadeUp 0.5s cubic-bezier(0.32, 0.72, 0, 1) 0.45s both;
}

.qr-section__label {
    font-family: var(--font-display);
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-ink-light);
    margin-bottom: var(--spacing-md);
}

#qrcode {
    display: inline-block;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-rule);
    background: var(--color-surface);
    transition: border-color 0.2s cubic-bezier(0.32, 0.72, 0, 1);
}

/* ── Debug logs (hidden) ──────────────────── */

#logs {
    display: none;
}

/* ═══════════════════════════════════════════════
   Paper theme — Enviar redesign (upload page only)
   Scoped under body.paper-page to avoid bleeding
   into receive.html / download.html
   ═══════════════════════════════════════════════ */

body.paper-page {
    --paper-bg:          #f1e9d8;
    --paper-bg-soft:     #ebe1cc;
    --paper-bg-elev:     #faf3e3;
    --paper-bg-deep:     #e3d6b9;
    --paper-ink:         #1c1610;
    --paper-ink-soft:    #5a4a36;
    --paper-ink-faint:   #6e5e46; /* AA 4.5:1 over --paper-bg-soft (#ebe1cc) */
    --paper-rule:        #cfbf9f;
    --paper-rule-soft:   #ddd0b3;
    --paper-accent:      #b8431f;
    --paper-accent-soft: #e8a079;
    --paper-accent-deep: #8a2f10;
    --paper-success:    #5a7a3a;
    --paper-warning:    #b88018;
    --paper-shadow-sm:  0 1px 2px rgba(60, 40, 20, .08);
    --paper-shadow-md:  0 4px 16px -4px rgba(60, 40, 20, .12);
    --paper-shadow-lg:  0 24px 60px -20px rgba(60, 40, 20, .25);
    --paper-radius-sm:  6px;
    --paper-radius:     10px;
    --paper-radius-lg:  16px;
    --paper-radius-xl:  22px;
    --paper-font-display: 'Instrument Serif', 'Newsreader', 'Libre Baskerville', serif;
    --paper-font-body:    'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif;
    --paper-font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;

    background: var(--paper-bg);
    color: var(--paper-ink);
    font-family: var(--paper-font-body);
    -webkit-font-smoothing: antialiased;
    font-feature-settings: 'ss01', 'ss02';
    transition: background-color .35s ease, color .35s ease;
    align-items: stretch;
    line-height: 1.5;
}
body.paper-page::before { display: none; } /* hide letterpress grain */

body.paper-page.paper-dark {
    --paper-bg:          #14110d;
    --paper-bg-soft:     #1c1813;
    --paper-bg-elev:     #221d16;
    --paper-bg-deep:     #0f0c09;
    --paper-ink:         #f0e4cf;
    --paper-ink-soft:    #b8a786;
    --paper-ink-faint:   #6b5e48;
    --paper-rule:        #3a3225;
    --paper-rule-soft:   #2a2419;
    --paper-accent:      #b8431f;
    --paper-accent-soft: #b8431f;
    --paper-accent-deep: #f4b896;
    --paper-success:    #a8c87c;
    --paper-warning:    #e8b878;
    --paper-shadow-sm:  0 1px 2px rgba(0, 0, 0, .4);
    --paper-shadow-md:  0 4px 16px -4px rgba(0, 0, 0, .5);
    --paper-shadow-lg:  0 24px 60px -20px rgba(0, 0, 0, .7);
}

/* Typography helpers */
body.paper-page .display {
    font-family: var(--paper-font-display);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.01em;
}
body.paper-page .display em {
    font-style: italic;
    color: var(--paper-accent);
}
body.paper-page .mono { font-family: var(--paper-font-mono); }
body.paper-page .eyebrow {
    font-family: var(--paper-font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--paper-ink-soft);
}

/* Chrome nav — same warm tone as the footer; the page center keeps --paper-bg
   so the functional area is visually distinct from the chrome. */
body.paper-page .chrome-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: color-mix(in oklab, var(--paper-bg-soft) 92%, transparent);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    backdrop-filter: blur(20px) saturate(140%);
    border-bottom: 1px solid var(--paper-rule-soft);
    width: 100%;
}
body.paper-page .chrome-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
body.paper-page .chrome-left { display: flex; align-items: center; gap: 24px; flex-shrink: 0; }
body.paper-page .chrome-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

body.paper-page .logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--paper-font-display);
    font-size: 22px;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    color: var(--paper-ink);
}
body.paper-page .logo .mark {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: var(--paper-accent);
    color: #f7efe0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--paper-font-display);
    font-size: 18px;
    font-style: italic;
    font-weight: 500;
    line-height: 1;
    flex-shrink: 0;
}
body.paper-page .logo .wordmark {
    display: inline-flex; align-items: baseline;
    letter-spacing: -0.005em;
    line-height: 1;
}
body.paper-page .logo .wordmark-name {
    color: var(--paper-ink);
    font-family: var(--paper-font-display);
    font-style: italic;
}
body.paper-page .logo .wordmark-tld {
    color: var(--paper-ink-soft);
    font-family: var(--paper-font-mono);
    font-weight: 500;
    font-size: 0.62em;
    letter-spacing: 0.02em;
    margin-left: 1px;
}

body.paper-page .lang-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--paper-font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    min-height: 48px;
    padding: 6px 14px;
    border-radius: 10px;
    border: 1px solid var(--paper-rule);
    background: transparent;
    color: var(--paper-ink-soft);
    cursor: pointer;
}
body.paper-page .lang-toggle span[data-active="true"] { color: var(--paper-ink); font-weight: 600; }

body.paper-page .icon-btn {
    width: 48px; height: 48px;
    border-radius: 10px;
    border: 1px solid var(--paper-rule);
    background: transparent;
    display: grid; place-items: center;
    color: var(--paper-ink-soft);
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
    flex-shrink: 0;
}
body.paper-page .icon-btn:hover { color: var(--paper-ink); border-color: var(--paper-ink-soft); }

@media (max-width: 1024px) {
    body.paper-page .chrome-inner { padding: 12px 20px; gap: 14px; }
    body.paper-page .chrome-left { gap: 16px; }
    body.paper-page .logo { font-size: 19px; }
    body.paper-page .logo .mark { width: 28px; height: 28px; font-size: 15px; }
}
@media (max-width: 820px) {
    body.paper-page .chrome-inner { padding: 10px 14px; gap: 10px; }
    body.paper-page .logo { font-size: 16px; gap: 8px; }
    body.paper-page .logo .mark { width: 24px; height: 24px; font-size: 13px; border-radius: 6px; }
}
@media (max-width: 420px) {
    body.paper-page .lang-toggle { padding: 6px 10px; font-size: 10px; }
}

/* Container + screen */
body.paper-page .enviar-main {
    padding: 56px 0 96px;
    width: 100%;
}
body.paper-page .enviar-container {
    max-width: 980px;
    margin: 0 auto;
    padding: 0 32px;
}
body.paper-page .enviar-hero {
    margin-bottom: 48px;
    max-width: 720px;
}
body.paper-page .enviar-hero .eyebrow { margin-bottom: 14px; display: block; }
body.paper-page .enviar-hero h1.display {
    font-size: clamp(40px, 5vw, 64px);
    margin: 0 0 18px;
}
body.paper-page .enviar-hero p {
    font-size: 17px;
    color: var(--paper-ink-soft);
    margin: 0;
    line-height: 1.55;
}

body.paper-page .enviar-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(280px, 360px);
    gap: 36px;
    align-items: start;
}
body.paper-page .enviar-form-col {
    display: flex;
    flex-direction: column;
    gap: 24px;
}


/* Cards */
body.paper-page .paper-card {
    background: var(--paper-bg-elev);
    border: 1px solid var(--paper-rule-soft);
    border-radius: var(--paper-radius-lg);
    box-shadow: var(--paper-shadow-sm);
    padding: 32px;
}
body.paper-page .paper-card--flush { padding: 0; overflow: hidden; }
body.paper-page .paper-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 22px;
    gap: 16px;
    flex-wrap: wrap;
}
body.paper-page .paper-card__head > div:first-child {
    flex: 1 1 0;
    min-width: 0;
}
body.paper-page .paper-card__title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    font-family: var(--paper-font-body);
    letter-spacing: -0.005em;
    color: var(--paper-ink);
}
body.paper-page .paper-card__num {
    color: var(--paper-accent);
    font-family: var(--paper-font-mono);
    margin-right: 8px;
    font-size: 14px;
    font-weight: 500;
}
body.paper-page .paper-card__hint {
    margin: 6px 0 0;
    font-size: 13px;
    color: var(--paper-ink-soft);
}

/* OTP cells */
body.paper-page .otp-row {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
}
body.paper-page .otp-cell {
    flex: 0 1 48px;
    min-width: 0;
    height: 64px;
    border: 1.5px solid var(--paper-rule);
    border-radius: var(--paper-radius);
    background: var(--paper-bg-elev);
    text-align: center;
    font-family: var(--paper-font-mono);
    font-size: 28px;
    font-weight: 500;
    color: var(--paper-ink);
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
    padding: 0;
    text-transform: uppercase;
    caret-color: var(--paper-accent);
}
body.paper-page .otp-cell:focus {
    outline: none;
    border-color: var(--paper-accent);
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--paper-accent) 18%, transparent);
}
body.paper-page .otp-cell[data-filled="true"] {
    background: var(--paper-bg-deep);
    border-color: var(--paper-ink-soft);
}
body.paper-page .otp-feedback {
    margin-top: 14px;
    min-height: 18px;
    font-size: 13px;
    text-align: center;
    color: var(--paper-ink-soft);
}
body.paper-page .otp-feedback.valid { color: var(--paper-success); }
body.paper-page .otp-feedback.invalid { color: var(--paper-accent-deep); }

/* Segmented (file / url tabs) */
body.paper-page .segmented {
    display: inline-flex;
    background: var(--paper-bg-soft);
    border: 1px solid var(--paper-rule-soft);
    border-radius: var(--paper-radius);
    padding: 3px;
    gap: 2px;
}
body.paper-page .segmented.content-tabs {
    display: flex;
    width: 100%;
    flex: 1 0 100%;
    margin-top: 12px;
}
body.paper-page .segmented.content-tabs button {
    flex: 1 1 0;
    justify-content: center;
}
body.paper-page .segmented button {
    min-height: 36px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 500;
    border-radius: calc(var(--paper-radius) - 3px);
    color: var(--paper-ink-soft);
    background: transparent;
    border: none;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}
body.paper-page .segmented button[aria-selected="true"] {
    background: var(--paper-bg-elev);
    color: var(--paper-ink);
    box-shadow: var(--paper-shadow-sm);
}

/* Dropzone */
body.paper-page .paper-dropzone {
    border: 1.5px dashed var(--paper-rule);
    border-radius: var(--paper-radius-lg);
    background: var(--paper-bg-soft);
    padding: 36px 24px;
    text-align: center;
    transition: border-color .2s ease, background .2s ease;
    cursor: pointer;
    position: relative;
}
body.paper-page .paper-dropzone:hover,
body.paper-page .paper-dropzone[data-dragging="true"] {
    border-color: var(--paper-accent);
    background: color-mix(in oklab, var(--paper-accent) 6%, var(--paper-bg-soft));
}
body.paper-page .paper-dropzone__icon-wrap {
    width: 56px; height: 56px;
    border-radius: 14px;
    background: var(--paper-bg-elev);
    border: 1px solid var(--paper-rule);
    display: grid; place-items: center;
    margin: 0 auto 20px;
    color: var(--paper-accent);
}
body.paper-page .paper-dropzone__title {
    font-family: var(--paper-font-display);
    font-size: 24px;
    margin-bottom: 6px;
    line-height: 1.05;
    letter-spacing: -0.01em;
}
body.paper-page .paper-dropzone__or {
    font-size: 14px;
    color: var(--paper-ink-soft);
    margin-bottom: 14px;
}
body.paper-page .paper-dropzone__formats {
    font-family: var(--paper-font-mono);
    font-size: 11px;
    color: var(--paper-ink-faint);
    letter-spacing: .05em;
}

/* URL input */
body.paper-page .url-field {
    width: 100%;
    padding: 14px 16px;
    border: 1.5px solid var(--paper-rule);
    border-radius: var(--paper-radius);
    background: var(--paper-bg-elev);
    font-size: 15px;
    font-family: var(--paper-font-mono);
    color: var(--paper-ink);
    transition: border-color .15s ease, box-shadow .15s ease;
}
body.paper-page .url-field:focus {
    outline: none;
    border-color: var(--paper-accent);
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--paper-accent) 18%, transparent);
}
body.paper-page .url-field-label {
    font-size: 13px;
    color: var(--paper-ink-soft);
    margin-bottom: 8px;
    display: block;
}
body.paper-page .url-choices {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 18px;
}
body.paper-page .url-choice {
    text-align: left;
    padding: 16px 18px;
    border: 1.5px solid var(--paper-rule);
    border-radius: var(--paper-radius);
    background: var(--paper-bg-elev);
    transition: border-color .15s ease, background .15s ease;
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: var(--paper-ink);
}
body.paper-page .url-choice:has(input:checked) {
    border-color: var(--paper-accent);
    background: color-mix(in oklab, var(--paper-accent) 6%, var(--paper-bg-elev));
}
body.paper-page .url-choice input { position: absolute; opacity: 0; pointer-events: none; }
body.paper-page .url-choice__radio {
    width: 16px; height: 16px;
    border-radius: 50%;
    border: 1.5px solid var(--paper-rule);
    flex-shrink: 0;
    margin-top: 3px;
    display: grid; place-items: center;
    transition: background .15s ease, border-color .15s ease;
}
body.paper-page .url-choice:has(input:checked) .url-choice__radio {
    border-color: var(--paper-accent);
    background: var(--paper-accent);
}
body.paper-page .url-choice:has(input:checked) .url-choice__radio::after {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--paper-bg-elev);
}
body.paper-page .url-choice__title { font-weight: 500; font-size: 14.5px; margin-bottom: 4px; display: block; }
body.paper-page .url-choice__desc { font-size: 12.5px; color: var(--paper-ink-soft); line-height: 1.45; display: block; }

/* Switch (used for advanced options) */
body.paper-page .switch-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 0;
    cursor: pointer;
}
body.paper-page .switch-row > input { position: absolute; opacity: 0; pointer-events: none; }
body.paper-page .switch {
    width: 36px; height: 20px;
    background: var(--paper-rule);
    border-radius: 999px;
    position: relative;
    transition: background .18s ease;
    flex-shrink: 0;
    margin-top: 1px;
}
body.paper-page .switch::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--paper-bg-elev);
    box-shadow: var(--paper-shadow-sm);
    transition: transform .18s ease;
}
body.paper-page .switch-row > input:checked + .switch { background: var(--paper-accent); }
body.paper-page .switch-row > input:checked + .switch::after { transform: translateX(16px); }
body.paper-page .switch-text { flex: 1; min-width: 0; }
body.paper-page .switch-label {
    font-weight: 500; font-size: 14px;
    color: var(--paper-ink);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
body.paper-page .switch-label .recommended {
    font-family: var(--paper-font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .1em;
    color: var(--paper-accent);
    text-transform: uppercase;
}
body.paper-page .switch-hint {
    font-size: 13px;
    color: var(--paper-ink-soft);
    margin-top: 3px;
    line-height: 1.5;
    display: block;
}

/* Disclosure (advanced options collapsible) */
body.paper-page .paper-disclosure__btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 32px;
    text-align: left;
    background: transparent;
    border: none;
    color: var(--paper-ink);
}
body.paper-page .paper-disclosure__chev {
    transition: transform .2s ease;
    color: var(--paper-ink-soft);
}
body.paper-page .paper-disclosure[open] .paper-disclosure__chev { transform: rotate(180deg); }
body.paper-page .paper-disclosure[data-disabled="true"] {
    opacity: 0.55;
    pointer-events: none;
}
body.paper-page .paper-disclosure[data-disabled="true"] summary {
    cursor: not-allowed;
}
body.paper-page .paper-disclosure__body {
    padding: 0 32px 24px;
    border-top: 1px solid var(--paper-rule-soft);
    animation: paperFadeIn .25s ease both;
}
body.paper-page .paper-disclosure__group + .paper-disclosure__group { margin-top: 14px; }
body.paper-page .paper-disclosure__group-label {
    font-family: var(--paper-font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--paper-ink-soft);
    padding: 14px 0 4px;
    display: block;
}
body.paper-page .paper-rule-soft { height: 1px; background: var(--paper-rule-soft); }

@keyframes paperFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Submit bar (lives in the side rail now, sits below Summary) */
body.paper-page .submit-bar {
    display: flex;
    align-items: stretch;
    gap: 10px;
}
body.paper-page .submit-bar--rail .btn-submit,
body.paper-page .submit-bar--rail .btn-cancel { flex: 1 1 auto; min-width: 0; width: 100%; }

body.paper-page .paper-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 28px;
    border-radius: var(--paper-radius);
    font-weight: 500;
    font-size: 15px;
    font-family: var(--paper-font-body);
    transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
    white-space: nowrap;
    border: 1px solid transparent;
    cursor: pointer;
    color: #fbf6ec;
    background: var(--paper-accent);
    min-width: 200px;
}
body.paper-page.paper-dark .paper-btn { color: var(--paper-bg-elev); }
body.paper-page .paper-btn:not(:disabled):hover { transform: translateY(-1px); box-shadow: var(--paper-shadow-md); }
body.paper-page .paper-btn:disabled { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none; }
body.paper-page .paper-btn--ink {
    background: var(--paper-ink);
    color: var(--paper-bg);
}
body.paper-page .paper-btn__spinner {
    display: inline-block;
    width: 14px; height: 14px;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-top-color: transparent;
    animation: paperSpin 0.8s linear infinite;
}
@keyframes paperSpin { to { transform: rotate(360deg); } }

/* Side rail */
body.paper-page .side-rail {
    position: sticky;
    top: 92px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-self: start;
}
body.paper-page .side-rail .paper-card { padding: 24px; }
body.paper-page .side-rail .eyebrow { margin-bottom: 0; display: block; }
body.paper-page .summary-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}
body.paper-page .summary-ready {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 8px;
    border-radius: 999px;
    background: var(--paper-bg-soft);
    border: 1px solid var(--paper-rule-soft);
    font-family: var(--paper-font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--paper-ink-soft);
    transition: color .2s ease, background .2s ease, border-color .2s ease;
}
body.paper-page .summary-ready__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--paper-ink-faint);
    transition: background .2s ease, box-shadow .2s ease;
}
body.paper-page .summary-ready[data-state="go"],
body.paper-page .summary-ready[data-state="sent"] {
    color: var(--paper-success);
    background: color-mix(in oklab, var(--paper-success) 12%, var(--paper-bg-elev));
    border-color: color-mix(in oklab, var(--paper-success) 28%, transparent);
}
body.paper-page .summary-ready[data-state="go"] .summary-ready__dot,
body.paper-page .summary-ready[data-state="sent"] .summary-ready__dot {
    background: var(--paper-success);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--paper-success) 18%, transparent);
}
body.paper-page .summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-size: 13.5px;
}
body.paper-page .summary-row + .summary-row { margin-top: 10px; }
body.paper-page .summary-row--stack {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding-top: 12px;
    margin-top: 14px !important;
    border-top: 1px solid var(--paper-rule-soft);
}
body.paper-page .summary-row__label { color: var(--paper-ink-soft); }
body.paper-page .summary-row__value {
    color: var(--paper-ink);
    font-weight: 500;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 160px;
}
body.paper-page .summary-row--stack .summary-row__value {
    text-align: left;
    max-width: 100%;
    white-space: normal;
    overflow: visible;
    line-height: 1.45;
    font-size: 12.5px;
}
body.paper-page .summary-row__value--soft { color: var(--paper-ink-soft); font-weight: 500; }
body.paper-page .summary-row__value.mono { font-family: var(--paper-font-mono); }
body.paper-page .summary-row__badge {
    display: inline-block;
    font-family: var(--paper-font-mono);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--paper-accent);
    background: color-mix(in oklab, var(--paper-accent) 12%, var(--paper-bg-elev));
    padding: 2px 6px;
    border-radius: 4px;
    margin-right: 6px;
    vertical-align: middle;
}
body.paper-page .summary-row__badge[hidden] { display: none; }

body.paper-page .recent-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    gap: 8px;
}
body.paper-page .recent-clear {
    font-size: 11px;
    color: var(--paper-ink-soft);
    background: transparent;
    border: 1px solid transparent;
    font-family: var(--paper-font-mono);
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
body.paper-page .recent-clear:focus-visible { border-color: var(--paper-ink-soft); outline: none; }
body.paper-page .recent-clear:hover { color: var(--paper-ink); }
body.paper-page .recent-empty {
    font-size: 13px;
    color: var(--paper-ink-faint);
    text-align: center;
    padding: 24px 0;
}
body.paper-page .recent-list { display: flex; flex-direction: column; }
body.paper-page .recent-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    align-items: center;
    padding: 12px 0;
}
body.paper-page .recent-item + .recent-item { border-top: 1px solid var(--paper-rule-soft); }
body.paper-page .recent-item__badge {
    width: 32px; height: 40px;
    border: 1px solid var(--paper-rule);
    background: var(--paper-bg-soft);
    border-radius: 3px;
    display: grid; place-items: center;
    font-family: var(--paper-font-mono);
    font-size: 8.5px;
    font-weight: 600;
    color: var(--paper-accent);
}
body.paper-page .recent-item__name {
    font-size: 13.5px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--paper-ink);
}
body.paper-page .recent-item__meta { font-size: 11.5px; color: var(--paper-ink-soft); margin-top: 2px; }

/* Selected file chip */
body.paper-page .file-chip {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px;
    border: 1px solid var(--paper-rule);
    border-radius: var(--paper-radius);
    background: var(--paper-bg-soft);
}
body.paper-page .file-chip__thumb {
    width: 52px; height: 64px;
    background: var(--paper-bg-elev);
    border: 1px solid var(--paper-rule);
    border-radius: 4px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    flex-shrink: 0;
}
body.paper-page .file-chip__ext {
    font-family: var(--paper-font-mono);
    font-size: 10px;
    font-weight: 600;
    color: var(--paper-accent);
    letter-spacing: .05em;
}
body.paper-page .file-chip__name {
    font-weight: 500;
    font-size: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.paper-page .file-chip__size {
    font-size: 13px;
    color: var(--paper-ink-soft);
    margin-top: 4px;
}
body.paper-page .file-chip__remove {
    margin-left: auto;
}

/* Success state */
body.paper-page .sent-success {
    text-align: center;
    padding: 64px 0;
    max-width: 540px;
    margin: 0 auto;
    animation: paperFadeIn .4s ease both;
}
body.paper-page .sent-success__check {
    width: 88px; height: 88px;
    border-radius: 50%;
    background: color-mix(in oklab, var(--paper-success) 18%, var(--paper-bg-elev));
    color: var(--paper-success);
    display: grid; place-items: center;
    margin: 0 auto 32px;
    animation: paperPop .5s cubic-bezier(.2,.8,.2,1.2) both;
}
@keyframes paperPop { 0% { transform: scale(.5); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
body.paper-page .sent-success__title {
    font-family: var(--paper-font-display);
    font-size: 56px;
    margin: 0 0 14px;
    line-height: 1.05;
}
body.paper-page .sent-success__sub {
    font-size: 17px;
    color: var(--paper-ink-soft);
    line-height: 1.55;
    margin: 0 0 32px;
}
body.paper-page .sent-success__file {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 22px;
    background: var(--paper-bg-elev);
    border: 1px solid var(--paper-rule);
    border-radius: var(--paper-radius);
    margin-bottom: 32px;
    font-weight: 500;
}

/* Tablet — keep 2-col but tighten the rail */
@media (max-width: 1023px) and (min-width: 721px) {
    body.paper-page .enviar-grid {
        grid-template-columns: minmax(0, 1fr) 240px;
        gap: 24px;
    }
    body.paper-page .enviar-container { padding: 0 24px; }
    body.paper-page .side-rail { gap: 16px; }
    body.paper-page .side-rail .paper-card { padding: 20px; }
    body.paper-page .paper-card { padding: 24px; }
    body.paper-page .summary-row { font-size: 12.5px; }
    body.paper-page .summary-row__value { max-width: 130px; }
    body.paper-page .enviar-hero { margin-bottom: 32px; }
    body.paper-page .enviar-hero h1.display { font-size: clamp(36px, 5.5vw, 48px); }
}

/* Mobile — collapse to single column, hide summary card */
@media (max-width: 720px) {
    body.paper-page .enviar-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    body.paper-page .side-rail { position: static; top: auto; }
    body.paper-page .summary-card { display: none; }
    body.paper-page .enviar-main { padding: 32px 0 80px; }
    body.paper-page .enviar-container { padding: 0 18px; }
    body.paper-page .paper-card { padding: 24px; }
    body.paper-page .paper-disclosure__btn { padding: 18px 22px; }
    body.paper-page .paper-disclosure__body { padding: 0 22px 18px; }
    body.paper-page .otp-row { gap: 6px; }
    body.paper-page .otp-cell { flex: 0 1 40px; height: 56px; font-size: 22px; }
    body.paper-page .submit-bar { flex-direction: row; align-items: stretch; }
    body.paper-page .submit-bar--rail .btn-submit { width: 100%; }
    body.paper-page .paper-btn { min-width: 0; }
    body.paper-page .enviar-hero h1.display { font-size: clamp(32px, 9vw, 48px); }
    body.paper-page .url-choices { grid-template-columns: 1fr; }
}

/* Very small viewports — squeeze OTP + paddings to avoid horizontal scroll */
@media (max-width: 420px) {
    body.paper-page .enviar-container { padding: 0 12px; }
    body.paper-page .paper-card { padding: 18px; }
    body.paper-page .paper-disclosure__btn { padding: 16px 18px; }
    body.paper-page .paper-disclosure__body { padding: 0 18px 16px; }
    body.paper-page .otp-row { gap: 4px; }
    body.paper-page .otp-cell { flex: 1 1 0; min-width: 0; height: 52px; font-size: 20px; }
    body.paper-page .enviar-hero h1.display { font-size: clamp(28px, 9vw, 42px); }
}

/* Info section + footer adjustments */
body.paper-page .paper-info {
    max-width: 980px;
    margin: 48px auto 0;
    padding: 0 32px;
}
body.paper-page .paper-info details {
    border-top: 1px solid var(--paper-rule-soft);
    padding: 18px 0;
}
body.paper-page .paper-info summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--paper-font-body);
    font-weight: 500;
    color: var(--paper-ink);
    font-size: 15px;
}
body.paper-page .paper-info summary::-webkit-details-marker { display: none; }
body.paper-page .paper-info summary svg { transition: transform .2s ease; }
body.paper-page .paper-info details[open] summary svg { transform: rotate(180deg); }
body.paper-page .paper-info .info-body {
    margin-top: 14px;
    font-size: 14px;
    color: var(--paper-ink-soft);
    line-height: 1.6;
}
body.paper-page .paper-info .info-body p + p { margin-top: 10px; }
/* .paper-footer legacy class kept on <footer> for sync-pages regex; layout
   now driven by .site-footer rules above. */

/* Skip link (a11y) override */
body.paper-page .skip-link {
    background: var(--paper-bg-elev);
    color: var(--paper-ink);
    border: 1px solid var(--paper-rule);
}

/* Hide PDF/comic option groups when not relevant */
body.paper-page .conv-group[hidden] { display: none; }

/* Override form-group--reveal inside paper details disclosure */
body.paper-page .form-group--reveal {
    max-height: none;
    overflow: visible;
    opacity: 1;
    margin-bottom: 0;
    transition: none;
}
body.paper-page .form-group--reveal:not(.open) { display: none; }
body.paper-page .form-group--reveal.open { display: block; max-height: none; opacity: 1; margin-bottom: 0; }
body.paper-page .form-group--reveal + .form-group--reveal.open { margin-top: 8px; }

/* Hide legacy toolbar artifacts if any leaked in */
body.paper-page .toolbar,
body.paper-page .site-header { display: none; }

/* Submit hint within Section 02 — explains what's missing */
body.paper-page .submit-hint {
    display: block;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--paper-rule-soft);
    text-align: center;
    color: var(--paper-ink-soft);
    font-size: 13px;
    line-height: 1.45;
    font-family: var(--paper-font-body);
}
body.paper-page .submit-hint:empty { display: none; }

/* Status toast — repaint for paper theme */
body.paper-page .status-toast {
    margin-top: 14px;
    background: var(--paper-bg-soft);
    border: 1px solid var(--paper-rule);
    color: var(--paper-ink);
    border-radius: var(--paper-radius);
    padding: 10px 14px;
    font-size: 13.5px;
    display: none;
}
body.paper-page .status-toast.visible { display: block; }
body.paper-page .status-toast.success { background: color-mix(in oklab, var(--paper-success) 10%, var(--paper-bg-soft)); border-color: var(--paper-success); }
body.paper-page .status-toast.error { background: color-mix(in oklab, var(--paper-accent) 10%, var(--paper-bg-soft)); border-color: var(--paper-accent); }

/* Selected file list / details — keep using existing styles but soften palette */
body.paper-page .file-picker__selected {
    margin-top: 16px;
    background: var(--paper-bg-soft);
    border: 1px solid var(--paper-rule-soft);
    border-radius: var(--paper-radius);
    padding: 14px 16px;
    display: none;
}
body.paper-page .file-picker__selected.visible { display: block; }
body.paper-page .file-picker:has(.file-picker__selected.visible) .file-picker__dropzone { display: none; }
body.paper-page .file-picker__header {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-bottom: 8px;
}
body.paper-page .file-picker__summary { font-weight: 500; font-size: 14px; color: var(--paper-ink); }
body.paper-page .file-picker__actions { display: flex; gap: 8px; }
body.paper-page .file-picker__add-btn,
body.paper-page .file-picker__clear-btn {
    background: var(--paper-bg-elev);
    border: 1px solid var(--paper-rule);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 12px;
    color: var(--paper-ink-soft);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-family: var(--paper-font-mono);
}
body.paper-page .file-picker__add-btn svg,
body.paper-page .file-picker__clear-btn svg { width: 12px; height: 12px; }
body.paper-page .file-picker__add-btn:hover,
body.paper-page .file-picker__clear-btn:hover { color: var(--paper-ink); border-color: var(--paper-ink-soft); }
body.paper-page #selected-details { display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--paper-ink-soft); }
body.paper-page #selected-details .file-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 8px 10px;
    background: var(--paper-bg-elev);
    border: 1px solid var(--paper-rule-soft);
    border-radius: 8px;
}
body.paper-page #selected-details .file-item--done { border-color: var(--paper-success); }
body.paper-page #selected-details .file-item--error { border-color: var(--paper-accent-deep); color: var(--paper-accent-deep); }
body.paper-page #selected-details .file-item--active { border-color: var(--paper-accent); }
body.paper-page .file-item__check { color: var(--paper-success); width: 16px; height: 16px; }
body.paper-page .file-item__cross { color: var(--paper-accent-deep); width: 16px; height: 16px; }
body.paper-page .file-item__dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--paper-ink-faint);
    display: inline-block;
}
body.paper-page #fileinfo { font-size: 12.5px; color: var(--paper-ink-soft); margin-top: 8px; }

/* Progress bar visual */
body.paper-page #progressbar {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 0;
    background: color-mix(in oklab, var(--paper-accent) 60%, transparent);
    transition: width .25s ease;
    border-radius: 0 0 var(--paper-radius) var(--paper-radius);
}
body.paper-page .paper-btn { position: relative; overflow: hidden; }

/* Hide native file input but keep it accessible for tab order */
body.paper-page #fileinput {
    position: absolute;
    opacity: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    z-index: 1;
}
body.paper-page .file-picker__label {
    position: relative;
    z-index: 0;
    display: block;
    cursor: pointer;
}

/* Key suggestions popover restyle */
body.paper-page .key-suggestions {
    margin-top: 10px;
    background: var(--paper-bg-elev);
    border: 1px solid var(--paper-rule);
    border-radius: var(--paper-radius);
    padding: 6px;
    font-family: var(--paper-font-mono);
    font-size: 12px;
}
body.paper-page .key-suggestions__label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--paper-ink-faint);
    padding: 4px 8px;
}
body.paper-page .key-suggestion {
    padding: 6px 8px;
    border-radius: 6px;
    color: var(--paper-ink);
    cursor: pointer;
}
body.paper-page .key-suggestion:hover { background: var(--paper-bg-soft); }

/* Focus-visible outlines for keyboard a11y (Paper page) */
body.paper-page .icon-btn:focus-visible,
body.paper-page .lang-toggle:focus-visible,
body.paper-page .segmented button:focus-visible,
body.paper-page .file-picker__add-btn:focus-visible,
body.paper-page .file-picker__clear-btn:focus-visible,
body.paper-page .paper-btn:focus-visible,
body.paper-page .url-choice:focus-within,
body.paper-page .file-picker__dropzone:focus-within {
    outline: 2px solid var(--paper-accent);
    outline-offset: 2px;
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
    body.paper-page * {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ═══════════════════════════════════════════════
   Recibir page — Paper theme
   Scoped under body.recibir-paper (plus body.paper-page tokens)
   ═══════════════════════════════════════════════ */

body.recibir-paper .recibir-main {
    padding: 56px 0 96px;
    width: 100%;
}
body.recibir-paper .recibir-container {
    max-width: 980px;
    margin: 0 auto;
    padding: 0 32px;
}

body.recibir-paper .recibir-hero {
    text-align: center;
    margin-bottom: 48px;
}
body.recibir-paper .recibir-hero .display {
    font-size: clamp(40px, 5vw, 64px);
    margin: 0 0 18px;
}
body.recibir-paper .recibir-hero p {
    font-size: 17px;
    color: var(--paper-ink-soft);
    max-width: 540px;
    margin: 0 auto;
    line-height: 1.55;
}
body.recibir-paper .recibir-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
body.recibir-paper .recibir-pulse {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--paper-success);
    animation: recibir-pulse 2s ease-in-out infinite;
}
@keyframes recibir-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.45; transform: scale(0.85); }
}

body.recibir-paper .recibir-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 28px;
    align-items: stretch;
}

/* Main code card */
body.recibir-paper .recibir-main-card {
    padding: 48px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    min-height: 460px;
    text-align: center;
}
body.recibir-paper .recibir-bg-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at 50% 30%,
        color-mix(in oklab, var(--paper-accent) 8%, transparent) 0%,
        transparent 70%
    );
    pointer-events: none;
}
body.recibir-paper .recibir-code-label {
    margin-bottom: 28px;
    position: relative;
}

/* Code display */
body.recibir-paper .recibir-code {
    position: relative;
    margin-bottom: 28px;
    width: 100%;
    max-width: 100%;
    padding: 0 12px;
    font-family: var(--paper-font-mono);
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--paper-ink);
    line-height: 1;
    display: flex;
    justify-content: center;
    gap: clamp(3px, 0.5vw, 10px);
    font-size: clamp(36px, 5.2vw, 62px);
}
body.recibir-paper .recibir-code[data-mode="text"] {
    display: block;
    text-align: center;
    border-bottom: none;
    font-size: clamp(28px, 4vw, 40px);
    color: var(--paper-ink-soft);
    padding: 12px 0 18px;
}
body.recibir-paper .recibir-code[data-length="6"] {
    font-size: clamp(48px, 6.5vw, 80px);
    gap: clamp(4px, 0.8vw, 10px);
}
body.recibir-paper .recibir-code[data-length="4"] {
    font-size: clamp(56px, 8vw, 96px);
    gap: clamp(6px, 1vw, 12px);
}
body.recibir-paper .recibir-code__cell {
    flex: 0 1 clamp(26px, 4.2vw, 46px);
    min-width: 0;
    text-align: center;
    border-bottom: 2px solid var(--paper-rule);
    padding-bottom: 6px;
}
body.recibir-paper .recibir-code[data-length="6"] .recibir-code__cell { flex-basis: clamp(36px, 5.5vw, 60px); }
body.recibir-paper .recibir-code[data-length="4"] .recibir-code__cell { flex-basis: clamp(44px, 7vw, 72px); }

/* Action chip row */
body.recibir-paper .recibir-actions {
    display: flex;
    gap: 8px;
    margin-bottom: 32px;
    position: relative;
    flex-wrap: wrap;
    justify-content: center;
}
body.recibir-paper .action-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    background: var(--paper-bg-elev);
    border: 1px solid var(--paper-rule);
    border-radius: 999px;
    color: var(--paper-ink);
    font-size: 13px;
    font-weight: 500;
    font-family: var(--paper-font-body);
    transition: border-color .15s ease, transform .15s ease, background .15s ease;
    cursor: pointer;
    min-height: 36px;
    position: relative;
}
/* Invisible hit area expands the touch target to ≥48px without altering the
   compact chip look (WCAG 2.5.5 / Material guideline). */
body.recibir-paper .action-chip::after {
    content: '';
    position: absolute;
    inset: -6px -2px;
}
body.recibir-paper .action-chip svg {
    color: var(--paper-ink-soft);
    flex-shrink: 0;
}
body.recibir-paper .action-chip:hover {
    border-color: var(--paper-ink-soft);
    transform: translateY(-1px);
}
body.recibir-paper .action-chip:focus-visible {
    outline: 2px solid var(--paper-accent);
    outline-offset: 2px;
}

/* Side rail: QR + help */
body.recibir-paper .recibir-side {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
body.recibir-paper .recibir-qr-card {
    padding: 28px;
    text-align: center;
}
body.recibir-paper .recibir-qr-card .eyebrow {
    margin-bottom: 18px;
    display: block;
}
body.recibir-paper .recibir-qr-frame {
    display: inline-block;
    padding: 14px;
    background: var(--paper-bg-elev);
    border: 1px solid var(--paper-rule);
    border-radius: var(--paper-radius);
}
body.recibir-paper .recibir-qr-frame canvas {
    display: block;
    max-width: 100%;
    height: auto;
}
body.recibir-paper .recibir-qr-url {
    margin-top: 18px;
    font-size: 12px;
    color: var(--paper-ink-soft);
    font-family: var(--paper-font-mono);
    letter-spacing: .05em;
    word-break: break-all;
}
body.recibir-paper .recibir-qr-url__key {
    color: var(--paper-accent);
}

body.paper-page .side-rail .help-card,
body.paper-page .recibir-side .help-card {
    padding: 28px;
}
body.paper-page .side-rail .help-card .eyebrow,
body.paper-page .recibir-side .help-card .eyebrow {
    margin-bottom: 12px;
    display: block;
}
body.paper-page .side-rail .help-card p,
body.paper-page .recibir-side .help-card p {
    margin: 0 0 10px;
    font-size: 13.5px;
    color: var(--paper-ink-soft);
    line-height: 1.6;
}
body.paper-page .side-rail .help-card p:last-child,
body.paper-page .recibir-side .help-card p:last-child { margin-bottom: 0; }

/* Override the receive-status block under Paper */
body.recibir-paper .receive-status {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 14px;
    position: relative;
    padding: 0;
    background: transparent;
    border: none;
    margin-bottom: 0;
    text-align: left;
}
body.recibir-paper .receive-status__indicator {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    position: relative;
}
body.recibir-paper .receive-status__ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--paper-accent);
    opacity: 0;
    animation: recibir-ping 1.8s ease-out infinite;
}
body.recibir-paper .receive-status__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--paper-accent);
    position: relative;
}
body.recibir-paper .receive-status__copy { text-align: left; }
body.recibir-paper .receive-status__text {
    margin: 0;
    font-weight: 600;
    font-size: 16px;
    color: var(--paper-ink);
}
body.recibir-paper .receive-status__step {
    margin: 2px 0 0;
    font-size: 13px;
    color: var(--paper-ink-soft);
}
@keyframes recibir-ping {
    0%   { transform: scale(.3); opacity: 1; }
    100% { transform: scale(1.5); opacity: 0; }
}

/* Download section under Paper */
body.recibir-paper .download-section {
    width: 100%;
    max-width: 460px;
    display: none;
    text-align: left;
}
body.recibir-paper .download-section__label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px;
    background: color-mix(in oklab, var(--paper-success) 18%, var(--paper-bg-elev));
    color: var(--paper-success);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin: 0 auto 16px;
    font-family: var(--paper-font-mono);
}
body.recibir-paper .download-section__check { width: 14px; height: 14px; }

body.recibir-paper .download-file {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    background: var(--paper-bg-elev);
    border: 1px solid var(--paper-rule);
    border-radius: var(--paper-radius);
    margin-bottom: 10px;
    text-align: left;
}
body.recibir-paper .download-file__icon {
    width: 42px;
    height: 54px;
    border: 1px solid var(--paper-rule);
    border-radius: 4px;
    background: var(--paper-bg-soft);
    display: grid;
    place-items: center;
    color: var(--paper-accent);
    flex-shrink: 0;
}
body.recibir-paper .download-file__icon svg { width: 22px; height: 22px; }
body.recibir-paper .download-file__info { flex: 1 1 0; min-width: 0; }
body.recibir-paper .download-file__name {
    font-weight: 500;
    font-size: 14px;
    color: var(--paper-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.recibir-paper .download-file__meta {
    margin-top: 3px;
    font-size: 12px;
    color: var(--paper-ink-soft);
    display: flex;
    gap: 10px;
}
body.recibir-paper .download-file__type {
    font-family: var(--paper-font-mono);
    color: var(--paper-accent);
    font-weight: 600;
}
body.recibir-paper .download-file__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--paper-radius);
    border: 1px solid var(--paper-rule);
    background: var(--paper-bg-elev);
    color: var(--paper-ink);
    text-decoration: none;
    transition: border-color .15s ease;
    flex-shrink: 0;
}
body.recibir-paper .download-file__action:hover { border-color: var(--paper-ink-soft); }
body.recibir-paper .download-file__action svg { width: 18px; height: 18px; }

body.recibir-paper .download-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 12px 18px;
    border-radius: var(--paper-radius);
    background: var(--paper-accent);
    color: #fbf6ec;
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease;
}
body.recibir-paper.paper-dark .download-all-btn { color: var(--paper-bg-elev); }
body.recibir-paper .download-all-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--paper-shadow-md);
}

body.recibir-paper .conversion-progress {
    display: none;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    font-size: 13px;
    color: var(--paper-ink-soft);
}
body.recibir-paper .conversion-progress__spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--paper-accent);
    border-top-color: transparent;
    animation: paperSpin .8s linear infinite;
}
body.recibir-paper .conversion-progress__step {
    margin-left: auto;
    font-family: var(--paper-font-mono);
    font-size: 12px;
    color: var(--paper-accent);
}

body.recibir-paper #urls.urls-section {
    margin-top: 16px;
    text-align: left;
}
body.recibir-paper .urls-section__label {
    font-family: var(--paper-font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--paper-ink-soft);
    margin-bottom: 8px;
}
body.recibir-paper .url-link {
    display: block;
    color: var(--paper-accent);
    text-decoration: none;
    font-size: 13.5px;
    padding: 6px 0;
    word-break: break-all;
}
body.recibir-paper .url-link:hover { text-decoration: underline; }

/* Responsive */
@media (max-width: 900px) {
    body.recibir-paper .recibir-grid { grid-template-columns: minmax(0, 1fr); }
    body.recibir-paper .recibir-main { padding: 32px 0 80px; }
    body.recibir-paper .recibir-container { padding: 0 18px; }
    body.recibir-paper .recibir-main-card { padding: 36px 24px; min-height: 0; }
    body.recibir-paper .recibir-qr-card,
    body.recibir-paper .recibir-help-card { padding: 24px; }
    body.recibir-paper .recibir-hero { margin-bottom: 32px; }
    body.recibir-paper .recibir-hero .display { font-size: clamp(32px, 9vw, 48px); }
}
@media (max-width: 420px) {
    body.recibir-paper .recibir-container { padding: 0 12px; }
    body.recibir-paper .recibir-main-card { padding: 28px 16px; }
    body.recibir-paper .recibir-code { padding: 0 4px; gap: 4px; }
    body.recibir-paper .recibir-code__cell { flex: 1 1 0; min-width: 0; }
    body.recibir-paper .action-chip { padding: 8px 12px; font-size: 12.5px; }
}

/* ─── Feedback pages ─────────────────────────── */
body.paper-page .feedback-main {
    padding: 56px 0 80px;
    background: var(--paper-bg);
}
body.paper-page .feedback-container {
    max-width: 640px;
    margin: 0 auto;
    padding: 0 24px;
}
body.paper-page .feedback-hero {
    margin-bottom: 32px;
}
body.paper-page .feedback-hero .display {
    margin: 0 0 12px;
    font-family: 'Instrument Serif', serif;
    font-size: clamp(40px, 7vw, 64px);
    line-height: 1.05;
    letter-spacing: -0.02em;
}
body.paper-page .feedback-intro {
    margin: 0;
    font-size: 17px;
    line-height: 1.55;
    color: var(--paper-ink-soft);
    max-width: 52ch;
}

/* Form */
body.paper-page .feedback-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 8px;
}
body.paper-page .feedback-honeypot {
    /* Hidden from sighted users + assistive tech (aria-hidden on parent). */
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
body.paper-page .feedback-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
body.paper-page .feedback-field label {
    font-weight: 500;
    font-size: 15px;
    color: var(--paper-ink);
}
body.paper-page .feedback-field textarea,
body.paper-page .feedback-field input[type="email"] {
    width: 100%;
    padding: 12px 14px;
    font: inherit;
    font-size: 16px;
    line-height: 1.5;
    color: var(--paper-ink);
    background: var(--paper-bg);
    border: 1px solid var(--paper-rule);
    border-radius: 8px;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
body.paper-page .feedback-field textarea {
    resize: vertical;
    min-height: 140px;
    font-family: 'Geist', system-ui, -apple-system, sans-serif;
}
body.paper-page .feedback-field textarea:focus,
body.paper-page .feedback-field input[type="email"]:focus {
    outline: none;
    border-color: var(--paper-ink);
    box-shadow: 0 0 0 3px rgba(20, 17, 13, 0.08);
}
body.paper-dark .feedback-field textarea:focus,
body.paper-dark .feedback-field input[type="email"]:focus {
    box-shadow: 0 0 0 3px rgba(241, 233, 216, 0.12);
}
body.paper-page .feedback-field textarea[aria-invalid="true"],
body.paper-page .feedback-field input[aria-invalid="true"] {
    border-color: #c0382b;
}
body.paper-page .feedback-field__help {
    font-size: 13px;
    color: var(--paper-ink-soft);
    margin-top: 2px;
}
body.paper-page .feedback-field__error {
    font-size: 13px;
    color: #c0382b;
    font-weight: 500;
}

/* Actions */
body.paper-page .feedback-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 8px;
    flex-wrap: wrap;
}
body.paper-page .feedback-submit {
    appearance: none;
    border: none;
    cursor: pointer;
    background: var(--paper-ink);
    color: var(--paper-bg-elev);
    padding: 12px 24px;
    font: inherit;
    font-size: 15px;
    font-weight: 500;
    border-radius: 8px;
    min-height: 44px;
    transition: opacity 0.15s ease, transform 0.05s ease;
}
body.paper-page .feedback-submit:hover { opacity: 0.88; }
body.paper-page .feedback-submit:active { transform: translateY(1px); }
body.paper-page .feedback-submit:focus-visible {
    outline: 2px solid var(--paper-accent);
    outline-offset: 2px;
}
body.paper-page .feedback-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
body.paper-page .feedback-back {
    color: var(--paper-ink-soft);
    text-decoration: none;
    font-size: 14px;
    padding: 8px 0;
}
body.paper-page .feedback-back:hover {
    color: var(--paper-ink);
    text-decoration: underline;
}
body.paper-page .feedback-back:focus-visible {
    outline: 2px solid var(--paper-accent);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Privacy notice */
body.paper-page .feedback-privacy {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--paper-ink-soft);
    line-height: 1.5;
}
body.paper-page .feedback-privacy a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}
body.paper-page .feedback-privacy a:hover { color: var(--paper-ink); }

/* Banner (success / error / noscript) */
body.paper-page .feedback-banner {
    margin-top: 24px;
    padding: 14px 16px;
    border-radius: 8px;
    font-size: 15px;
    line-height: 1.5;
    border: 1px solid;
}
body.paper-page .feedback-banner--success {
    border-color: rgba(46, 125, 50, 0.4);
    background: rgba(46, 125, 50, 0.08);
    color: #225f26;
}
body.paper-dark .feedback-banner--success {
    color: #81c784;
    background: rgba(129, 199, 132, 0.1);
    border-color: rgba(129, 199, 132, 0.3);
}
body.paper-page .feedback-banner--error {
    border-color: rgba(192, 56, 43, 0.4);
    background: rgba(192, 56, 43, 0.08);
    color: #c0382b;
}
body.paper-dark .feedback-banner--error {
    color: #ef9a9a;
    background: rgba(239, 154, 154, 0.1);
    border-color: rgba(239, 154, 154, 0.3);
}
body.paper-page .feedback-banner p {
    margin: 0;
}

@media (max-width: 540px) {
    body.paper-page .feedback-main { padding: 32px 0 60px; }
    body.paper-page .feedback-container { padding: 0 18px; }
    body.paper-page .feedback-hero { margin-bottom: 24px; }
    body.paper-page .feedback-hero .display { font-size: clamp(32px, 9vw, 48px); }
}