/* ============================================================
   pdf-a.com - Stylesheet (ricalcato da emlviewer.app)
   Author: CAPITA S.R.L.
   ============================================================ */

/* ----- CSS Custom Properties ----- */
:root {
    /* Colors */
    --color-primary: #1565C0;
    --color-primary-light: #1976D2;
    --color-primary-dark: #0D47A1;
    --color-primary-bg: #E3F2FD;
    --color-primary-bg-hover: #BBDEFB;

    --color-success: #2E7D32;
    --color-success-bg: #E8F5E9;
    --color-warning: #E65100;
    --color-warning-bg: #FFF3E0;
    --color-error: #C62828;
    --color-error-bg: #FFEBEE;

    /* Surfaces */
    --bg-primary: #FFFFFF;
    --bg-secondary: #F5F7FA;
    --bg-tertiary: #EAEFF5;
    --bg-elevated: #FFFFFF;

    /* Text */
    --text-primary: #1A2332;
    --text-secondary: #546E7A;
    --text-tertiary: #55707C; /* era #90A4AE (2,56:1); ora >= 4,5:1 su tutti gli sfondi chiari */
    --text-inverse: #FFFFFF;

    /* Borders */
    --border-color: #E0E6ED;
    --border-color-hover: #B0BEC5;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.05);
    --shadow-focus: 0 0 0 3px rgba(21, 101, 192, 0.25);

    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;

    /* Radii */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;

    /* Typography */
    --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono: 'SF Mono', SFMono-Regular, 'Cascadia Code', 'Fira Code', Consolas, monospace;

    /* Layout */
    --container-max: 1200px;
    --header-height: 64px;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms ease;
}

/* ----- Dark Mode ----- */
@media (prefers-color-scheme: dark) {
    :root {
        --color-primary: #64B5F6;
        --color-primary-light: #90CAF9;
        --color-primary-dark: #42A5F5;
        --color-primary-bg: rgba(100, 181, 246, 0.12);
        --color-primary-bg-hover: rgba(100, 181, 246, 0.2);

        --color-success: #66BB6A;
        --color-success-bg: rgba(102, 187, 106, 0.12);
        --color-warning: #FFB74D;
        --color-warning-bg: rgba(255, 183, 77, 0.12);
        --color-error: #EF5350;
        --color-error-bg: rgba(239, 83, 80, 0.12);

        --bg-primary: #0d1b2a;
        --bg-secondary: #132238;
        --bg-tertiary: #1a2d45;
        --bg-elevated: #1a2d45;

        --text-primary: #E8EDF3;
        --text-secondary: #9BB0C4;
        --text-tertiary: #7F97AC; /* era #5E7A91 (3,1-3,9:1) */
        --text-inverse: #0d1b2a;

        --border-color: #243447;
        --border-color-hover: #3a5068;

        --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2);
        --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25);
        --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.35);
        --shadow-focus: 0 0 0 3px rgba(100, 181, 246, 0.3);
    }
}

/* ----- Reset & Base ----- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

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

body {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-primary);
    background: var(--bg-secondary);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-primary-dark);
}

a:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 2px;
}

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

button {
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    border: none;
    background: none;
    color: inherit;
}

button:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* ----- Container ----- */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-md);
}

@media (min-width: 768px) {
    .container {
        padding: 0 var(--space-xl);
    }
}

/* ----- iOS Download Hint ----- */
.ios-download-hint {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(140%);
    background: #1b2838;
    color: #e0e0e0;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.45);
    z-index: 9998;
    width: min(380px, calc(100vw - 32px));
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ios-download-hint.visible {
    transform: translateX(-50%) translateY(0);
}
.ios-hint-content {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.ios-hint-icon {
    font-size: 22px;
    flex-shrink: 0;
    line-height: 1.3;
}
.ios-hint-text {
    flex: 1;
    font-size: 14px;
    line-height: 1.55;
}
.ios-hint-text strong {
    color: #fff;
}
.ios-hint-close {
    background: none;
    border: none;
    color: #7a8a9e;
    cursor: pointer;
    font-size: 18px;
    padding: 0;
    flex-shrink: 0;
    line-height: 1;
}
.ios-hint-close:hover { color: #e0e0e0; }

/* ----- Success Toast ----- */
.success-toast {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(-120%);
    background: #1a7a4a;
    color: #fff;
    padding: 14px 20px 14px 16px;
    border-radius: 10px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.35);
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    font-weight: 500;
    z-index: 9999;
    max-width: calc(100vw - 40px);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: auto;
}
.success-toast.visible {
    transform: translateX(-50%) translateY(0);
}
.success-toast-icon {
    font-size: 20px;
    flex-shrink: 0;
    line-height: 1;
}
.success-toast-text {
    flex: 1;
    line-height: 1.35;
}
.success-toast-close {
    background: none;
    border: none;
    color: rgba(255,255,255,0.75);
    cursor: pointer;
    font-size: 18px;
    padding: 0 0 0 8px;
    line-height: 1;
    flex-shrink: 0;
}
.success-toast-close:hover {
    color: #fff;
}

/* ----- Privacy Banner ----- */
.privacy-banner {
    background: var(--color-primary-bg);
    border-bottom: 1px solid var(--border-color);
    padding: var(--space-sm) 0;
    font-size: 13px;
    color: var(--text-secondary);
    position: relative;
    z-index: 100;
}

.privacy-banner-content {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-md);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.privacy-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--color-primary);
}

.privacy-banner-content span {
    flex: 1;
}

.privacy-dismiss {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    color: var(--text-tertiary);
    transition: all var(--transition-fast);
}

.privacy-dismiss:hover {
    background: var(--color-primary-bg-hover);
    color: var(--text-primary);
}

.privacy-dismiss svg {
    width: 14px;
    height: 14px;
}

.privacy-banner.hidden {
    display: none;
}

/* ----- Header ----- */
.header {
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
    height: var(--header-height);
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 50;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

@supports (backdrop-filter: blur(12px)) {
    .header {
        background: rgba(255, 255, 255, 0.85);
    }
    @media (prefers-color-scheme: dark) {
        .header {
            background: rgba(13, 27, 42, 0.85);
        }
    }
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.logo {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.logo-icon svg {
    width: 36px;
    height: 36px;
}

.logo-text .logo-name {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.logo-badge {
    font-size: 10px;
    font-weight: 600;
    background: var(--color-primary);
    color: white;
    padding: 1px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    vertical-align: middle;
}

@media (prefers-color-scheme: dark) {
    .logo-badge {
        background: var(--color-primary-dark);
        color: var(--bg-primary);
    }
}

.logo-tagline {
    font-size: 12px;
    color: var(--text-tertiary);
    line-height: 1;
}

.header-nav {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.nav-link {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.nav-link:hover {
    color: var(--text-primary);
    background: var(--bg-tertiary);
}

.nav-link-app {
    color: var(--color-primary);
    font-weight: 600;
}

.nav-link-app:hover {
    background: var(--color-primary-bg);
    color: var(--color-primary-dark);
}

@media (max-width: 480px) {
    .nav-link:not(.nav-link-app) {
        display: none;
    }
}

/* ----- Buttons ----- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    font-size: 14px;
    font-weight: 600;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    white-space: nowrap;
    user-select: none;
}

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

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

.btn-primary:hover {
    background: var(--color-primary-dark);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.btn-primary:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

@media (prefers-color-scheme: dark) {
    .btn-primary {
        background: var(--color-primary-dark);
        color: var(--bg-primary);
    }
    .btn-primary:hover {
        background: var(--color-primary);
    }
}

.btn-ghost {
    color: var(--text-secondary);
    padding: var(--space-sm) var(--space-md);
}

.btn-ghost:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.btn-icon {
    width: 36px;
    height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
}

.btn-icon:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.btn-block {
    width: 100%;
    justify-content: center;
    padding: var(--space-md);
}

/* ----- Main Content ----- */
.main {
    flex: 1;
    padding: var(--space-xl) 0;
}

/* ----- Drop Zone Section ----- */
.drop-zone-section {
    max-width: 720px;
    margin: 0 auto;
}

.drop-zone {
    position: relative;
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-xl);
    padding: var(--space-3xl) var(--space-xl);
    text-align: center;
    background: var(--bg-primary);
    cursor: pointer;
    transition: all var(--transition-base);
    overflow: hidden;
}

.drop-zone:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-bg);
}

.drop-zone:focus-visible {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

.drop-zone.dragover {
    border-color: var(--color-primary);
    background: var(--color-primary-bg);
    border-style: solid;
}

.drop-zone-content {
    position: relative;
    z-index: 1;
}

.drop-zone-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto var(--space-lg);
    color: var(--color-primary);
    transition: transform var(--transition-base);
}

.drop-zone:hover .drop-zone-icon {
    transform: scale(1.05);
}

.drop-zone-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: var(--space-sm);
}

.drop-zone-subtitle {
    font-size: 15px;
    color: var(--text-secondary);
    margin-bottom: var(--space-sm);
}

.drop-zone-browse {
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.drop-zone-browse:hover {
    color: var(--color-primary-dark);
}

.drop-zone-hint {
    font-size: 13px;
    color: var(--text-tertiary);
}

/* Drop Overlay */
.drop-zone-dragover {
    position: absolute;
    inset: 0;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    background: var(--color-primary-bg);
    z-index: 10;
    font-size: 18px;
    font-weight: 600;
    color: var(--color-primary);
}

.drop-zone-dragover svg {
    width: 48px;
    height: 48px;
    animation: bounceDown 1s ease infinite;
}

.drop-zone.dragover .drop-zone-dragover {
    display: flex;
}

.drop-zone.dragover .drop-zone-content {
    opacity: 0;
}

@keyframes bounceDown {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(8px); }
}

/* ----- Info Section ----- */
.info-section {
    margin-top: var(--space-2xl);
}

.info-section-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: var(--space-lg);
    text-align: center;
    color: var(--text-secondary);
}

.info-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
}

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

.info-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    transition: all var(--transition-base);
}

.info-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.info-card-icon {
    width: 40px;
    height: 40px;
    background: var(--color-primary-bg);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-md);
    color: var(--color-primary);
}

.info-card-icon svg {
    width: 20px;
    height: 20px;
}

.info-card h2, .info-card h3, .info-card h4 {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: var(--space-xs);
}

.info-card p {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* ----- Viewer Section ----- */
.viewer-section {
    animation: fadeIn 0.3s ease;
}

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

.viewer-topbar {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
    flex-wrap: wrap;
}

.viewer-filename {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    text-align: center;
}

@media (max-width: 640px) {
    .viewer-topbar .btn-primary {
        display: none;
    }
    .viewer-filename {
        order: -1;
        flex-basis: 100%;
        text-align: left;
    }
}

.download-mobile {
    display: none;
}

@media (max-width: 640px) {
    .download-mobile {
        display: flex;
    }
}

.viewer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
}

@media (min-width: 900px) {
    .viewer-grid {
        grid-template-columns: 1fr 380px;
    }
}

/* ----- Preview Area ----- */
.viewer-preview {
    min-height: 400px;
}

.preview-container {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    min-height: 400px;
    display: flex;
    flex-direction: column;
}

/* Loading */
.preview-loading {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    padding: var(--space-2xl);
    color: var(--text-secondary);
}

.spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--border-color);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* PDF Preview */
.preview-pdf {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.pdf-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.pdf-page-info {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    min-width: 120px;
    text-align: center;
}

.pdf-canvas-wrapper {
    position: relative;
    flex: 1;
    overflow: auto;
    display: flex;
    justify-content: center;
    padding: var(--space-md);
    background: var(--bg-tertiary);
    min-height: 500px;
}

.pdf-canvas-wrapper canvas {
    max-width: 100%;
    height: auto;
    box-shadow: var(--shadow-lg);
    background: white;
}

/* XML Preview */
.preview-xml {
    flex: 1;
    overflow: auto;
    max-height: 600px;
}

.preview-xml pre {
    padding: var(--space-lg);
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.7;
    white-space: pre-wrap;
    word-break: break-all;
    color: var(--text-primary);
}

/* Generic Preview */
.preview-generic {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3xl);
}

.preview-generic-content {
    text-align: center;
    color: var(--text-secondary);
}

.preview-generic-content svg {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--space-lg);
    opacity: 0.5;
}

.preview-generic-content p {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: var(--space-xs);
}

.preview-generic-hint {
    font-size: 13px;
    color: var(--text-tertiary);
    font-weight: 400 !important;
}

/* Error */
.preview-error {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-3xl);
    text-align: center;
    gap: var(--space-md);
    color: var(--color-error);
}

.preview-error svg {
    width: 48px;
    height: 48px;
    opacity: 0.7;
}

.preview-error p {
    font-size: 15px;
    font-weight: 500;
    max-width: 400px;
}

/* ----- Sidebar ----- */
.viewer-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

/* Signature Badge */
.signature-badge {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-lg);
    border: 1px solid;
}

.signature-badge.valid {
    background: var(--color-success-bg);
    border-color: var(--color-success);
}

.signature-badge.expired {
    background: var(--color-warning-bg);
    border-color: var(--color-warning);
}

.signature-badge.invalid {
    background: var(--color-error-bg);
    border-color: var(--color-error);
}

.badge-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 20px;
}

.signature-badge.valid .badge-icon {
    background: var(--color-success);
    color: white;
}

.signature-badge.expired .badge-icon {
    background: var(--color-warning);
    color: white;
}

.signature-badge.invalid .badge-icon {
    background: var(--color-error);
    color: white;
}

.badge-text {
    display: flex;
    flex-direction: column;
}

.badge-status {
    font-size: 15px;
    font-weight: 700;
}

.signature-badge.valid .badge-status { color: var(--color-success); }
.signature-badge.expired .badge-status { color: var(--color-warning); }
.signature-badge.invalid .badge-status { color: var(--color-error); }

.badge-detail {
    font-size: 12px;
    color: var(--text-secondary);
}

/* Signer Card */
.signer-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.signer-card-header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.signer-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-primary-bg);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    flex-shrink: 0;
}

.signer-name {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
}

.signer-org {
    font-size: 12px;
    color: var(--text-secondary);
}

.signer-card-body {
    padding: var(--space-md) var(--space-lg);
}

.signer-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--border-color);
    gap: var(--space-md);
}

.signer-row:last-child {
    border-bottom: none;
}

.signer-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.signer-value {
    font-size: 13px;
    color: var(--text-primary);
    text-align: right;
    word-break: break-word;
}

.signer-value.expired-text {
    color: var(--color-warning);
    font-weight: 600;
}

/* Meta Card */
.meta-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
}

.meta-card-title {
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
    color: var(--text-secondary);
}

.meta-card-title svg {
    width: 18px;
    height: 18px;
}

.meta-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.meta-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    padding: var(--space-xs) 0;
}

.meta-item-label {
    color: var(--text-tertiary);
}

.meta-item-value {
    color: var(--text-primary);
    font-weight: 500;
    font-family: var(--font-mono);
    font-size: 12px;
}

/* ----- App Section ----- */
.app-section {
    background: var(--bg-primary);
    border-top: 1px solid var(--border-color);
    padding: var(--space-3xl) 0;
}

.app-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2xl);
    flex-wrap: wrap;
}

.app-text {
    flex: 1;
    min-width: 280px;
}

.app-text h2 {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: var(--space-sm);
}

.app-text > p {
    font-size: 15px;
    color: var(--text-secondary);
    margin-bottom: var(--space-lg);
}

.app-features {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.app-feature {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 14px;
    color: var(--text-secondary);
}

.app-feature svg {
    width: 18px;
    height: 18px;
    color: var(--color-primary);
    flex-shrink: 0;
}

.app-badges {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.store-badge {
    display: block;
    transition: all var(--transition-fast);
    color: var(--text-primary);
    border-radius: var(--radius-sm);
}

.store-badge:hover {
    transform: scale(1.03);
    opacity: 0.9;
}

.store-badge-svg {
    width: 160px;
    height: 54px;
}

.store-badge-img {
    height: 54px;
    width: auto;
}

/* ----- Mobile App Banner (sticky, mobile only) ----- */
.mobile-app-banner {
    display: none;
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--color-primary);
    padding: 10px 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

.mobile-app-banner-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 600px;
    margin: 0 auto;
}

.mobile-app-banner-text {
    display: flex;
    flex-direction: column;
    color: white;
    line-height: 1.3;
}

.mobile-app-banner-text strong {
    font-size: 0.95rem;
}

.mobile-app-banner-text span {
    font-size: 0.8rem;
    opacity: 0.9;
}

.mobile-app-banner-btn {
    background: white;
    color: var(--color-primary);
    padding: 8px 20px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.85rem;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .mobile-app-banner {
        display: block;
    }
    .nav-hide-mobile {
        display: none;
    }
}

/* ----- Info Card Links ----- */
.info-card-link {
    text-decoration: none;
    color: inherit;
}

.info-card-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* ----- Footer SEO Links ----- */
.footer-links-seo {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-md);
    margin-bottom: var(--space-sm);
}

.footer-links-seo a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.85rem;
}

.footer-links-seo a:hover {
    color: var(--color-primary);
}

/* ----- Footer ----- */
.footer {
    background: var(--bg-primary);
    border-top: 1px solid var(--border-color);
    padding: var(--space-lg) 0;
}

.footer-inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.footer-logo {
    font-size: 16px;
    font-weight: 800;
    color: var(--text-primary);
}

.footer-copy {
    font-size: 12px;
    color: var(--text-tertiary);
}

.footer-links {
    display: flex;
    gap: var(--space-lg);
    flex-wrap: wrap;
}

.footer-links a {
    font-size: 13px;
    color: var(--text-secondary);
}

.footer-links a:hover {
    color: var(--color-primary);
}

/* ----- Utility: Hidden Elements ----- */
[hidden] {
    display: none !important;
}

/* ----- PRO Button ----- */
.btn-pro {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.crown-icon {
    width: 16px;
    height: 16px;
    color: #F59E0B;
    flex-shrink: 0;
}

/* ----- Paywall Modal ----- */
.paywall-overlay {
    position: fixed;
    inset: 0;
    z-index: 3500; /* sopra il banner dei cookie (3000), che copriva il modulo di ripristino */
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    backdrop-filter: blur(4px);
}

.paywall-overlay[hidden] {
    display: none !important;
}

.paywall-modal {
    background: var(--bg-primary);
    border-radius: 16px;
    padding: 32px;
    max-width: 420px;
    width: 100%;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    animation: fadeIn 0.2s ease;
}

.paywall-close {
    position: absolute;
    top: 12px;
    right: 16px;
    background: none;
    border: none;
    font-size: 28px;
    color: var(--text-tertiary);
    cursor: pointer;
    line-height: 1;
}

.paywall-close:hover {
    color: var(--text-primary);
}

.paywall-header {
    text-align: center;
    margin-bottom: 24px;
}

.paywall-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 12px;
}

.paywall-emoji {
    font-size: 40px;
    display: block;
    margin-bottom: 8px;
}

.paywall-header h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.paywall-header p {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.paywall-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.paywall-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-primary);
    cursor: pointer;
    transition: all 0.15s ease;
    gap: 4px;
}

.paywall-option:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-bg);
}

.paywall-option-pro {
    border-color: var(--color-primary);
    background: var(--color-primary-bg);
}

.paywall-option-badge {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-primary);
}

.paywall-option-pro .paywall-option-badge {
    background: var(--color-primary);
    color: white;
    padding: 2px 10px;
    border-radius: 10px;
}

.paywall-option-price {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-primary);
}

.paywall-option-price span {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.paywall-option-desc {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* Casella "acquisto con partita IVA": solo chi la spunta vede i campi fiscali su Stripe.

   Era un contenitore flex con tre figli — casella, testo, <em> — quindi testo
   e nota erano due colonne: il tedesco «Kauf als Unternehmen» andava a capo
   dentro la propria colonna stretta, e il portoghese occupava tre righe.
   Accorciare i testi risolveva una lingua alla volta.
   Ora e' un blocco normale con la casella flottante: testo e nota scorrono
   come un unico paragrafo e vanno a capo dove serve, in qualunque lingua. */
.paywall-business,
.pricing-business {
    display: block;
    margin: 12px auto 6px;
    padding: 0 16px;
    max-width: 100%;
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--text-secondary);
    cursor: pointer;
    text-align: left;
}

.pricing-business {
    margin-top: 20px;
}

.paywall-business input,
.pricing-business input {
    float: left;
    margin: 4px 8px 0 0;
}

.paywall-business em,
.pricing-business em {
    font-style: normal;
    color: var(--text-tertiary);
}

.paywall-footer-text {
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

.paywall-restore {
    text-align: center;
    margin-top: 12px;
}

.paywall-restore-toggle {
    background: none;
    border: none;
    color: var(--color-primary);
    font-size: 0.8rem;
    cursor: pointer;
    text-decoration: underline;
}

.paywall-restore-form {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

.paywall-restore-input {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.9rem;
    outline: none;
    background: var(--bg-primary);
    color: var(--text-primary);
}

.paywall-restore-input:focus {
    border-color: var(--color-primary);
}

.paywall-restore-btn {
    background: var(--color-primary);
    color: white;
    border: none;
    padding: 8px 24px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

.paywall-restore-msg {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* ----- PDF Pro Overlay ----- */
.pdf-pro-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.95) 40%, rgba(255,255,255,1) 100%);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 32px;
    pointer-events: all;
    z-index: 10;
}

@media (prefers-color-scheme: dark) {
    .pdf-pro-overlay {
        background: linear-gradient(to bottom, rgba(13,27,42,0) 0%, rgba(13,27,42,0.95) 40%, rgba(13,27,42,1) 100%);
    }
}

.pdf-pro-overlay-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.pdf-pro-overlay-content p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.pdf-pro-overlay-content p strong {
    color: var(--text-primary);
    font-size: 1rem;
}

.pdf-pro-overlay-btn {
    margin-top: 8px;
    background: var(--color-primary);
    color: white;
    border: none;
    padding: 10px 28px;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
}

.pdf-pro-overlay-btn:hover {
    background: var(--color-primary-dark);
}

/* ----- Cookie Consent Banner ----- */
#cookieConsentBanner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 3000;
    background: var(--bg-elevated);
    border-top: 1px solid var(--border-color);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
    padding: 16px 24px;
}

.cookie-banner-content {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.cookie-banner-content p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    flex: 1;
    min-width: 200px;
    margin: 0;
    line-height: 1.5;
}

.cookie-banner-content a {
    color: var(--color-primary);
    text-decoration: underline;
}

.cookie-banner-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.cookie-btn {
    padding: 8px 20px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
}

/* Accetta e Rifiuta con la stessa evidenza (Linee guida cookie del
   Garante, 10/6/2021): nessuna delle due e' suggerita dal colore. */
.cookie-btn-accept,
.cookie-btn-reject {
    background: var(--color-primary);
    color: white;
}

/* ----- Animations ----- */
.fade-in {
    animation: fadeIn 0.3s ease;
}

/* ----- Print Styles ----- */
@media print {
    .privacy-banner,
    .header,
    .viewer-topbar,
    .app-section,
    .footer,
    .download-mobile,
    .viewer-sidebar {
        display: none !important;
    }
    .viewer-grid {
        grid-template-columns: 1fr !important;
    }
    .preview-container {
        border: none !important;
    }
}

/* ----- Accessibility: Reduced Motion ----- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    html {
        scroll-behavior: auto;
    }
}

/* ----- Scrollbar ----- */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--border-color-hover);
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}

/* SR-only / visually-hidden utility for accessibility */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ===============================================================
   EML Viewer — componenti specifici della vista email
   =============================================================== */

.privacy-banner-close {
    background: none; border: 0; color: inherit; font-size: 1.4rem;
    line-height: 1; cursor: pointer; padding: 0 .25rem; opacity: .7;
}
.privacy-banner-close:hover { opacity: 1; }

.email-view { display: flex; flex-direction: column; height: 100%; }

.email-headers {
    padding: var(--space-md);
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
}
.email-subject {
    font-size: 1.15rem; font-weight: 700; color: var(--text-primary);
    margin-bottom: .6rem; line-height: 1.35;
}
.email-header-row { display: flex; gap: .6rem; font-size: .88rem; margin-top: .2rem; }
.email-header-label {
    flex: 0 0 3.2rem; color: var(--text-secondary); font-weight: 600;
}
.email-header-value { color: var(--text-primary); word-break: break-word; }

.email-body-wrap { position: relative; flex: 1; min-height: 320px; }
.email-body-frame {
    width: 100%; height: 100%; min-height: 320px;
    border: 0; background: #fff; display: block;
}
.email-body-lock {
    position: absolute; left: 0; right: 0; bottom: 0; top: 40%;
    display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
    gap: .6rem; padding: var(--space-md);
    background: linear-gradient(to bottom, rgba(255,255,255,0), var(--bg-primary) 55%);
    text-align: center;
}
.email-body-lock svg { width: 28px; height: 28px; color: var(--color-primary); }
.email-body-lock-title { font-weight: 600; color: var(--text-primary); margin: 0; }

.attachment-list { list-style: none; margin: 0; padding: 0; }
.attachment-item {
    display: flex; align-items: center; gap: .5rem;
    padding: .55rem 0; border-bottom: 1px solid var(--border-color);
    font-size: .88rem;
}
.attachment-item:last-child { border-bottom: 0; }
.attachment-name {
    flex: 1; color: var(--text-primary); word-break: break-all;
}
.attachment-size { color: var(--text-secondary); font-size: .8rem; white-space: nowrap; }
.attachment-btn {
    flex: 0 0 auto; border: 1px solid var(--color-primary);
    background: transparent; color: var(--color-primary);
    border-radius: 6px; padding: .25rem .6rem; font-size: .8rem;
    font-weight: 600; cursor: pointer;
}
.attachment-btn:hover { background: var(--color-primary-bg); }

.meta-item { display: flex; justify-content: space-between; gap: .75rem; padding: .35rem 0; font-size: .85rem; }
.meta-label { color: var(--text-secondary); }
.meta-value { color: var(--text-primary); text-align: right; word-break: break-all; }

.signature-badge.badge-valid {
    border-color: var(--color-success); background: var(--color-success-bg);
}

@media (max-width: 720px) {
    .email-header-label { flex-basis: 2.6rem; }
    .email-body-frame { min-height: 260px; }
}

/* Badge store disegnati in locale: i badge ufficiali sono immagini remote e
   la nostra CSP le blocca di proposito (img-src senza https:). Questi non
   fanno richieste a terzi, sono coerenti col posizionamento e caricano prima. */
.app-badges { display: flex; gap: var(--space-sm); flex-wrap: wrap; align-items: center; }
.store-badge {
    display: inline-flex; align-items: center; gap: .6rem;
    padding: .6rem 1rem; border-radius: 10px; text-decoration: none;
    background: var(--text-primary); color: var(--bg-primary);
    border: 1px solid var(--text-primary);
    transition: transform .15s ease, box-shadow .15s ease;
}
.store-badge:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.store-badge svg { width: 22px; height: 22px; flex: 0 0 auto; }
.store-badge span { display: flex; flex-direction: column; line-height: 1.15; font-weight: 700; font-size: .95rem; }
.store-badge small { font-weight: 500; font-size: .68rem; opacity: .8; }

/* Dati identificativi in footer — obbligatori per una societa' di capitali
   che vende online (art. 2250 c.c., D.Lgs. 70/2003 art. 7). */
.footer-legal {
    display: block;
    margin-top: .35rem;
    font-size: .78rem;
    line-height: 1.45;
    color: var(--text-tertiary);
}

/* ----- Intestazioni tecniche del messaggio -----
   Gratuite: sono l'informazione per cui una persona apre un .eml invece di
   leggere la mail nel proprio client, ed e' cio' che le pagine su spoofing e
   header promettono. Il paywall resta su export, allegati e copia. */
.headers-toggle { cursor: pointer; list-style: none; }
.headers-toggle::-webkit-details-marker { display: none; }
.headers-toggle::after { content: ' ▾'; opacity: .55; font-weight: 400; }
#headersCard details[open] .headers-toggle::after { content: ' ▴'; }

.auth-row {
    display: flex; align-items: baseline; gap: .5rem;
    padding: .3rem 0; font-size: .82rem;
}
.auth-name { font-weight: 700; min-width: 3.6rem; color: var(--text-secondary); }
.auth-esito { font-weight: 700; }
.auth-pass { color: #2E7D32; }
.auth-fail { color: #C62828; }
.auth-none { color: var(--text-tertiary); }
.auth-nota {
    font-size: .76rem; color: var(--text-tertiary);
    line-height: 1.45; margin: .4rem 0 .7rem;
}
.headers-raw {
    max-height: 260px; overflow: auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .72rem; line-height: 1.5;
    background: var(--bg-secondary); border: 1px solid var(--border-color);
    border-radius: 8px; padding: .6rem .7rem; margin-top: .5rem;
    word-break: break-word;
}
.headers-raw .hk { color: var(--text-secondary); font-weight: 700; }
.headers-raw .hv { color: var(--text-primary); }

/* ------------------------------------------------------------------
   Selettore di lingua.

   Su desktop e' una riga di sei bandiere; sotto i 760 px diventa un menu
   <details> che mostra solo la lingua corrente e si apre al tocco. Sei
   bandiere in riga occupano 204 px e accanto al logo mandavano la pagina in
   scorrimento orizzontale su quattro lingue su sei a 360 px.

   Le bandiere sono <svg> inline: nessuna richiesta esterna (la CSP vieta
   img-src verso domini terzi) e nessuna dipendenza dal font di sistema. Le
   emoji regional-indicator erano la scelta precedente, ma le disegna il
   sistema operativo: su Apple escono ondulate e ombreggiate, su Windows non
   esistono e restano le due lettere del codice paese. Il nome della lingua
   resta in title e aria-label, perche' una bandiera indica un paese e non una
   lingua.
   ------------------------------------------------------------------ */
.lang-menu {
    margin-left: auto;
    position: relative;
    display: flex;
    align-items: center;
}
/* Il controllo e' una checkbox nascosta con la sua label, non un <details>:
   un <details> chiuso non contribuisce alla propria larghezza, e su desktop
   — dove la linguetta e' nascosta — il <nav> traboccava fuori dall'header.
   A 1280 px quattro bandiere su sei finivano oltre il bordo destro. */
.lang-toggle { position: absolute; opacity: 0; pointer-events: none; }
.lang-sum { display: none; }                  /* su desktop il menu e' sempre aperto */

.lang-flags {
    display: flex;
    align-items: center;
    gap: 2px;
    padding-left: var(--space-md, 16px);
}

.lang-flags a,
.lang-flags span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    /* Il <nav> non ha larghezza propria: senza questo i riquadri si
       restringono a contenuto e le bandiere spariscono. Con le emoji non si
       vedeva perche' un glifo ha una larghezza minima, un <svg> no. */
    flex: 0 0 auto;
    border-radius: 7px;
    text-decoration: none;
    transition: background-color .15s ease;
}

.lang-flags a:hover,
.lang-flags a:focus-visible {
    opacity: 1;
    background: var(--bg-secondary, rgba(0,0,0,.06));
}

.lang-flags .lang-current {
    opacity: 1;
    background: var(--bg-secondary, rgba(0,0,0,.08));
    box-shadow: inset 0 0 0 1.5px var(--color-primary, #1565C0);
    cursor: default;
}

@media (max-width: 760px) {
    .lang-sum {
        display: inline-flex;
        align-items: center;
        gap: 2px;
        width: 46px;
        height: 40px;
        justify-content: center;
        border-radius: 9px;
        cursor: pointer;
        box-shadow: inset 0 0 0 1.5px var(--border-color, rgba(0,0,0,.12));
    }
    .lang-toggle:focus-visible + .lang-sum {
        outline: 2px solid var(--color-primary, #1565C0);
        outline-offset: 2px;
    }
    .lang-caret { font-size: 11px; opacity: .55; }

    /* aperto: le sei bandiere cadono sotto, non spingono l'header */
    .lang-flags { display: none; }
    .lang-toggle:checked ~ .lang-flags {
        display: flex;
        position: absolute;
        right: 0;
        top: calc(100% + 6px);
        z-index: 60;
        padding: 6px;
        gap: 2px;
        background: var(--bg-primary, #fff);
        border: 1px solid var(--border-color, rgba(0,0,0,.12));
        border-radius: 12px;
        box-shadow: 0 8px 24px rgba(0,0,0,.14);
    }

    /* nel menu aperto i bersagli sono pieni: 40 px */
    .lang-flags a,
    .lang-flags span { width: 40px; height: 40px; border-radius: 9px; }
    .lang-flags .flag { width: 27px; height: 20.25px; }
}

/* Bandiera di una lingua in cui questa pagina non esiste: porta alla home di
   quella lingua, non a una traduzione. Si distingue a vista, altrimenti
   promette qualcosa che non c'e'. */
.lang-flags a.lang-home {
    opacity: .35;
    filter: grayscale(.55);
}
.lang-flags a.lang-home:hover,
.lang-flags a.lang-home:focus-visible {
    opacity: .85;
    filter: none;
}

/* ------------------------------------------------------------------
   Header delle pagine generate (guide SEO).

   La home avvolge tutto in .header-inner, che e' flex. Le pagine generate
   hanno logo, menu e selettore come figli diretti di .container, che flex
   non e': si impilavano uno sotto l'altro a sinistra.
   (Regole riscritte: la riorganizzazione del selettore di lingua le aveva
   cancellate perche' stavano fra i due blocchi sostituiti.)
   ------------------------------------------------------------------ */
.header > .container {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.header > .container > .header-inner { flex: 1 1 auto; }

.header > .container > .logo {
    flex: 0 0 auto;
    font-weight: 700;
    font-size: 1.15rem;
    text-decoration: none;
    color: inherit;
    white-space: nowrap;
}

.header > .container > .header-nav { flex: 1 1 auto; }

@media (max-width: 760px) {
    .header > .container { gap: 8px; }
    .header > .container > .logo { font-size: 1rem; }
    .header > .container > .header-nav { gap: 10px; overflow: hidden; }
    .header > .container > .header-nav a { white-space: nowrap; }
}

@media (max-width: 520px) {
    /* il menu secondario cede il posto: logo e selettore di lingua bastano */
    .header > .container > .header-nav { display: none; }
}

/* Le bandiere non vengono piu' schiarite in attesa: con le emoji l'opacita'
   .62 serviva a distinguere la lingua attiva, sugli SVG spegne i colori (la
   Spagna leggeva rosa invece che rossa) e lo stato attivo e' gia' marcato
   dall'anello arancione.

   Le bandiere sono SVG 4:3 inline. Il bordo tenue serve alle bandiere con il
   bianco sul lato (Italia, Francia): senza, su fondo chiaro perdono il
   contorno e sembrano tagliate. */
.flag {
    /* la regola globale `img, svg { max-width: 100% }` la risolverebbe
       contro un contenitore di larghezza zero */
    max-width: none;
    width: 21px;
    height: 15.75px;
    display: block;
    border-radius: 2px;
    box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .22);
}
.lang-menu > summary .flag { width: 22px; height: 16.5px; }

/* ----- pdf-a.com: aggiunte al markup di emlviewer.app ----- */
.bozza { border: 1px dashed var(--color-warning); background: var(--color-warning-bg); color: var(--text-secondary);
         padding: var(--space-sm) var(--space-md); border-radius: var(--radius-sm); font-size: 14px; }
.bozza-centrata { max-width: 760px; margin: 0 auto var(--space-md); text-align: center; }
.article-subtitle.bozza { display: inline-block; }

/* scelta del profilo sotto la zona di trascinamento */
.profilo-scelta { margin-top: var(--space-md); text-align: left; }
.profilo-scelta label { display: block; font-size: 14px; font-weight: 600; color: var(--text-secondary); margin-bottom: var(--space-xs); }
.profilo-scelta select { display: block; width: 100%; max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis;
    font: inherit; font-size: 15px; color: var(--text-primary); background: var(--bg-primary);
    padding: 10px 12px; border: 1px solid var(--border-color); border-radius: var(--radius-md); }
.profilo-scelta select:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-color: var(--color-primary); }

/* anteprima della pagina convertita */
.anteprima-schede { display: inline-flex; gap: 2px; padding: 3px; margin-bottom: var(--space-sm); background: var(--bg-tertiary); border-radius: var(--radius-md); }
.anteprima-schede .scheda { font: inherit; font-size: 13px; padding: 6px 14px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-secondary); cursor: pointer; }
.anteprima-schede .scheda.attiva { background: var(--bg-primary); color: var(--text-primary); box-shadow: var(--shadow-sm); }
.anteprima-canvas { display: block; width: 100%; height: auto; background: #fff; }
.anteprima-pagine { display: flex; justify-content: center; align-items: center; gap: var(--space-md); margin-top: var(--space-sm); font-size: 13px; color: var(--text-secondary); }
.preview-loading progress { width: 60%; margin-top: var(--space-sm); }

/* card del consenso e liste nella barra laterale */
.consenso-card { border-color: var(--color-warning); }
.meta-card-testo { font-size: 13px; color: var(--text-secondary); margin: 0 0 var(--space-sm); }
.lista-perdite { margin: 0; padding-left: 18px; font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.lista-perdite li + li { margin-top: 4px; }
.consenso-card .opzione { display: block; font-size: 13px; margin-top: var(--space-sm); color: var(--text-secondary); }
.consenso-card .opzione input[type=number] { width: 70px; font: inherit; padding: 2px 6px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); }
.consenso-azioni { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-md); }

/* la vista risultato scorre sotto l'header fisso: si ferma prima */
#viewerSection, #dropZoneSection { scroll-margin-top: calc(var(--header-height) + var(--space-lg)); }
/* su schermi stretti esito e download vengono prima dell'anteprima: e' cio' che serve */
@media (max-width: 768px) { .viewer-sidebar { order: -1; } }
/* nelle pagine articolo il convertitore non deve toccare l'indice che segue */
.seo-article .drop-zone-section { margin-bottom: var(--space-2xl); }

/* ----- Paywall pdf-a.com: tre piani, nota valuta, codice licenza ----- */
.paywall-overlay .paywall-modal { max-height: calc(100vh - 32px); overflow-y: auto; }
.nota-valuta-paywall { font-size: .82em; opacity: .75; text-align: center; margin: .6rem 0 0; }
.chiave-licenza { text-transform: uppercase; letter-spacing: 1px; }
.licenza-codice { text-align: center; margin: 8px 0 16px; }
.licenza-codice code { font-size: 1.4rem; font-weight: 800; letter-spacing: 3px; color: var(--text-primary); }
.paywall-option:disabled { opacity: .6; cursor: progress; }
#copyLicenseBtn { display: block; margin: 0 auto 8px; }
@media (max-width: 480px) { .paywall-overlay .paywall-modal { padding: 24px 18px; } }
/* scheda di consenso: opzioni tecniche chiuse, con lo stesso peso del testo della scheda */
.consenso-avanzate { margin-top: var(--space-sm); }
.consenso-avanzate summary { font-size: 13px; color: var(--text-secondary); cursor: pointer; }
.consenso-avanzate summary:hover { color: var(--text-primary); }
.consenso-card .opzione select { font: inherit; padding: 2px 6px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--bg-primary); color: var(--text-primary); }
.consenso-perche { margin-bottom: var(--space-xs); }