:root {
    --bg-color: #FFFFFF;
    --text-color: #353531;
    --text-light: #666666;
    --primary-gradient-start: #262626;
    --primary-gradient-end: #4C4C4C;
    --accent-color: #001378;
    --border-color: #D6D6D6;
    --font-family: 'Inter', sans-serif;
    --glass-bg: rgba(255, 255, 255, 0.85);
    --glass-border: var(--border-color);
}

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

body {
    font-family: var(--font-family);
    background: var(--bg-color);
    color: var(--text-color);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow-x: hidden;
}

/* Digical Background Orbs */
/* Background orbs
   Drawn as radial gradients, not as blurred circles. A CSS blur of 250px
   forces Safari (macOS and iOS) to rasterise a huge filter kernel before the
   first paint and again on every scroll, which made the page feel very slow
   there; Chrome hides the cost on the GPU. It was worse here than on the
   homepage, because the orbs are position: fixed and sit under two
   backdrop-filter layers (the sticky header and the glass panels), so Safari
   re-composited the blur continuously. A gradient paints for free everywhere
   and looks the same: a soft glow with the same centre, reach and intensity
   as the old 500px orb with 250px blur. `left`/`top` (or `right`) give the
   centre of the glow; the translate shifts the box so it sits on that point.
   Same fix as digical-homepage d9aca06. */
.background-orb {
    position: fixed;
    width: 1500px;
    height: 1500px;
    border-radius: 50%;
    background: radial-gradient(circle,
            rgba(0, 19, 120, 0.2) 0%,
            rgba(0, 19, 120, 0.12) 25%,
            rgba(0, 19, 120, 0.04) 50%,
            rgba(0, 19, 120, 0) 70%);
    z-index: -1;
    pointer-events: none;
}

.orb-left {
    left: 114px;
    top: 243px;
    transform: translate(-50%, -50%);
}

.orb-right {
    right: 82px;
    top: 684px;
    transform: translate(50%, -50%);
}

.app-container {
    width: 100%;
    max-width: 1000px;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    z-index: 10;
}

header {
    height: 92px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
    position: sticky;
    top: 0;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    z-index: 1000;
    margin-bottom: 2rem;
    width: 100%;
}

header .logo-container {
    display: flex;
    align-items: center;
    gap: 1rem;
}

header .logo-container img {
    height: 48px;
    width: auto;
}

header h1 {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    color: var(--text-color);
}

header p {
    color: var(--text-light);
    font-size: 0.9rem;
    margin: 0;
}

.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.glass-panel.hidden {
    display: none;
    opacity: 0;
    transform: translateY(20px);
}

.glass-panel h2 {
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
    font-weight: 600;
    color: var(--text-color);
    border-bottom: 1px solid var(--glass-border);
    padding-bottom: 0.75rem;
}

/* Drop Zone */
.drop-zone {
    height: 150px;
    border: 2px dashed var(--border-color);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: rgba(0, 19, 120, 0.03);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.drop-zone:hover, .drop-zone.drop-zone--over {
    background: rgba(0, 19, 120, 0.08);
    border-color: var(--accent-color);
}

.drop-zone__prompt {
    font-size: 1.1rem;
    color: var(--accent-color);
    pointer-events: none;
    font-weight: 500;
}

.drop-zone input {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

#upload-status {
    margin-top: 1rem;
    font-size: 0.95rem;
    color: var(--text-light);
    text-align: center;
}

/* Controls */
.controls {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: flex-end;
}

.control-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
    min-width: 250px;
}

.control-group label {
    font-size: 0.9rem;
    color: var(--text-light);
    font-weight: 500;
}

select {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    background: #FFFFFF;
    border: 1px solid var(--glass-border);
    color: var(--text-color);
    font-family: var(--font-family);
    font-size: 1rem;
    outline: none;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}

select:focus {
    border-color: var(--accent-color);
}

/* Buttons */
button {
    font-family: var(--font-family);
    font-weight: 500;
    cursor: pointer;
    border: none;
    border-radius: 8px;
    padding: 0.75rem 1.5rem;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary-gradient-start), var(--primary-gradient-end));
    color: white;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #1a1a1a, #333333);
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

.btn-secondary {
    background: #FFFFFF;
    color: var(--text-color);
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}

.btn-secondary:hover {
    background: #f9fafa;
    border-color: #bbbbbb;
}

.vis-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--glass-border);
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
}

.vis-header h2 {
    border: none;
    margin: 0;
    padding: 0;
}

.chart-container {
    position: relative;
    height: 400px;
    width: 100%;
}

/* Report Builder Blocks */
.report-block {
    position: relative;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 1rem;
    background: #FFFFFF;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    transition: box-shadow 0.2s ease;
}

.report-block:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.report-block-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #eee;
}

.report-block-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.report-block-title .block-icon {
    font-size: 1.1rem;
}

.report-block-remove {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid #ddd;
    background: #fff;
    color: #999;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 0.2s;
}

.report-block-remove:hover {
    background: #fff0f0;
    color: #ef4444;
    border-color: #ef4444;
}

/* Info Card Key-Value Pairs */
.info-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.75rem;
}

.info-card-item {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.info-card-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.info-card-value {
    font-size: 0.95rem;
    color: var(--text-color);
    font-weight: 500;
}

/* Data Table */
.data-table-wrapper {
    overflow-x: auto;
    margin-top: 0.5rem;
}

.data-table-filter {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-family: var(--font-family);
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
    outline: none;
}

.data-table-filter:focus {
    border-color: var(--accent-color);
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.data-table th {
    text-align: left;
    padding: 0.6rem 0.75rem;
    background: #f5f5f5;
    border-bottom: 2px solid var(--border-color);
    font-weight: 600;
    color: var(--text-color);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.data-table th:hover {
    background: #eee;
}

.data-table th .sort-indicator {
    margin-left: 0.3rem;
    font-size: 0.7rem;
    color: #999;
}

.data-table td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #eee;
    color: var(--text-color);
}

.data-table tbody tr:nth-child(even) {
    background: #fafafa;
}

.data-table tbody tr:hover {
    background: rgba(0, 19, 120, 0.03);
}

/* PDF export and print: units that must not be sliced at a page boundary.
   html2pdf reads these (pagebreak mode 'css') and its `avoid` list names the
   same selectors; browsers honour them for print as well. A card taller than
   a page cannot stay whole, so its inner units carry the rule too and it is
   given .pdf-new-page at export time so at least it starts on a fresh page. */
.report-block,
.report-block-header,
.info-card-item,
.statement-block,
.condition-block,
.chart-container,
.data-table tr {
    break-inside: avoid;
    page-break-inside: avoid;
}

.report-block-header {
    break-after: avoid;
    page-break-after: avoid;
}

.pdf-new-page {
    break-before: page;
    page-break-before: always;
}

/* PDF export: body.pdf-export is set for the duration of the capture.
   Interface goes away, report content stays, and the glass panel loses the
   frame that used to be cut at every page break. */
body.pdf-export #upload-section,
body.pdf-export .background-orb,
body.pdf-export #report-builder-toggle,
body.pdf-export #language-selector-container,
body.pdf-export #report-builder-content > .controls,
body.pdf-export #export-notice,
body.pdf-export .table-config,
body.pdf-export .data-table-filter,
body.pdf-export .graph-config,
body.pdf-export .graph-reset-zoom,
body.pdf-export .report-block-remove,
body.pdf-export #post-export-cta {
    display: none !important;
}

body.pdf-export .app-container {
    background: #FFFFFF;
}

body.pdf-export #report-builder-section {
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 0;
}

body.pdf-export #report-builder-content,
body.pdf-export #report-preview {
    margin-top: 0 !important;
}

body.pdf-export .report-block {
    box-shadow: none;
}

/* Conformity badge */
.conformity-pass {
    display: inline-block;
    background: #dcfce7;
    color: #166534;
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
}

.conformity-fail {
    display: inline-block;
    background: #fef2f2;
    color: #991b1b;
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
}

/* =================================================================
   Upload meta: privacy note + example loader
   ================================================================= */
.upload-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1rem;
}

.upload-note {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--text-light);
    max-width: 46ch;
}

.upload-note svg {
    flex-shrink: 0;
    color: var(--accent-color);
}

.btn-example {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    white-space: nowrap;
}

.btn-example svg {
    flex-shrink: 0;
    color: var(--accent-color);
}

.btn-example:disabled {
    opacity: 0.6;
    cursor: default;
    transform: none;
}

/* =================================================================
   Post-export call to action
   ================================================================= */
.cta-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 2rem;
    padding: 2rem;
    border-radius: 16px;
    border: 1px solid rgba(0, 19, 120, 0.18);
    background: linear-gradient(135deg, rgba(0, 19, 120, 0.05), rgba(0, 19, 120, 0.02));
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.cta-panel.hidden {
    display: none;
    opacity: 0;
    transform: translateY(20px);
}

.cta-panel__text {
    flex: 1 1 380px;
    min-width: 0;
}

.cta-panel__text h2 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-color);
    margin: 0 0 0.6rem;
}

.cta-panel__text p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--text-light);
}

.cta-panel__text strong {
    color: var(--text-color);
    font-weight: 600;
}

.cta-panel__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
    flex-shrink: 0;
}

.cta-panel__actions .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-family: var(--font-family);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.cta-panel__link {
    text-align: center;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--accent-color);
    text-decoration: none;
}

.cta-panel__link:hover {
    text-decoration: underline;
}


@media (max-width: 640px) {
    .upload-meta { flex-direction: column; align-items: flex-start; }
    .btn-example { width: 100%; justify-content: center; }
    .cta-panel { flex-direction: column; align-items: stretch; padding: 1.5rem; }

    /* The glow is huge on a phone; rein it in so it doesn't wash out text */
    .orb-left,
    .orb-right {
        width: 960px;
        height: 960px;
    }
    .orb-left  { left: 24px; top: 153px; }
    .orb-right { right: -8px; top: 594px; }
}

@media (prefers-reduced-motion: reduce) {
    .cta-panel, .btn-example, .cta-panel__actions .btn-primary { transition: none; }
}

/* =================================================================
   Header: logo links home, quiet return path on the right
   ================================================================= */
header .logo-container {
    text-decoration: none;
    color: inherit;
}

header .logo-container:hover h1 {
    text-decoration: underline;
}

.header-link {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-light);
    text-decoration: none;
    white-space: nowrap;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.header-link:hover {
    color: var(--accent-color);
    background: rgba(0, 19, 120, 0.05);
}

header a:focus-visible,
.drop-zone:focus-visible,
button:focus-visible,
.cta-panel a:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

@media (max-width: 560px) {
    header {
        height: auto;
        padding: 0.75rem 1rem;
        gap: 0.75rem;
    }

    header .logo-container img {
        height: 36px;
    }

    header h1 {
        font-size: 1.15rem;
    }

    .header-link {
        font-size: 0.8rem;
        padding: 0.4rem 0.5rem;
    }
}

/* =================================================================
   Interface language switch — same pattern as digical.net so the two
   properties look like one product. Separate from the report language,
   which follows the languages the uploaded certificate declares.
   ================================================================= */
.header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.language-switcher {
    position: relative;
}

.lang-current {
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 6px;
    transition: background 0.2s;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--border-color);
    background: #fff;
}

.lang-current:hover {
    background: rgba(0, 0, 0, 0.05);
}

.current-flag {
    display: block;
}

.dropdown-arrow {
    font-size: 10px;
    color: #666;
    transition: transform 0.2s;
}

.language-switcher.open .dropdown-arrow {
    transform: rotate(180deg);
}

.lang-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    display: none;
    min-width: 150px;
    z-index: 1100;
    overflow: hidden;
}

/* Invisible bridge so the pointer can travel into the panel */
.lang-dropdown::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 0;
    width: 100%;
    height: 8px;
    background: transparent;
}

.language-switcher:hover .lang-dropdown,
.language-switcher.open .lang-dropdown {
    display: block;
}

.lang-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    cursor: pointer;
    transition: background 0.2s;
    color: var(--text-color);
    font-size: 14px;
}

.lang-option:hover {
    background: #f5f5f5;
}

.lang-option.active {
    background: #f0f0f0;
    font-weight: 600;
}

.flag-icon {
    display: block;
    flex-shrink: 0;
}

@media (max-width: 560px) {
    .header-actions {
        gap: 0.4rem;
    }

    .lang-current {
        padding: 5px 9px;
    }
}

/* =================================================================
   Collapse/expand toggle
   ================================================================= */

/* line-height:1 is what actually centres the glyph: without it the span
   inherits the browser default (~1.2), so the line box is taller than the
   circle's content area and the "+" sits off-centre despite the flex
   centring. */
.panel-toggle-icon {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1;
    color: var(--accent-color);
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    user-select: none;
    transition: background 0.2s ease, border-color 0.2s ease;
}

[id$="-toggle"]:hover .panel-toggle-icon {
    background: rgba(0, 19, 120, 0.06);
    border-color: var(--accent-color);
}