body, .canvas-container, .pdf-page, .pdf-canvas {
        -webkit-user-select: none !important;
        -moz-user-select: none !important;
        -ms-user-select: none !important;
        user-select: none !important;
    }

    :root {
        /* Viewer now uses the platform semantic tokens (--surface/--text/etc.)
           so branding + theme flow through it like every other surface.
           Only viewer-specific NON-color knobs remain here. */
        --v-header-h: 64px;
        --viewer-zoom: 1.0; /* runtime zoom factor */
        /* On-screen watermark colour + opacity; overridden at runtime from the live
           watermark settings (viewer.html sets these on documentElement). */
        --viewer-wm-color: var(--text);
        --viewer-wm-opacity: 0.08;
        /* A4 page inner margin for the DOM paginator (view-paged.js). */
        --doc-page-pad: 56px;
    }

    /* Semantic Viewer Utility Classes */
    .v-text-bright {
        color: var(--text);
    }
    .v-text-muted {
        color: var(--text-muted);
    }
    .viewer-header h1 {
        margin: 0;
        font-weight: var(--fw-700);
        font-variation-settings: 'wght' var(--fw-700);
        color: var(--text);
    }
    /* Brand block (logo + name on one row) shown in the viewer header. */
    .viewer-brand { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
    .viewer-brand-logo { height: 26px; width: auto; max-width: 140px; display: block; object-fit: contain; }
    .viewer-brand-logo-default { color: var(--text); }
    .viewer-brand-name { font-size: var(--fs-3); font-weight: var(--fw-700); color: var(--text); white-space: nowrap; }
    /* Folder mode: the brand doubles as the sidebar toggle (logo replaces the old
       hamburger). Give it the affordance — pointer + subtle hover hit-area. */
    .viewer-brand-toggle { cursor: pointer; border-radius: var(--radius-control); padding: var(--sp-1) var(--sp-2); margin: calc(-1 * var(--sp-1)) calc(-1 * var(--sp-2)); transition: var(--transition); user-select: none; }
    .viewer-brand-toggle:hover { background: var(--hover-light); }
    .viewer-brand-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
    /* Single-file view: file name sits next to the brand, smaller + muted. */
    .viewer-file-name {
        font-size: var(--fs-2);
        font-weight: var(--fw-600);
        color: var(--text-muted);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 38vw;
        padding-left: var(--sp-3);
        margin-left: var(--sp-1);
        border-left: 1px solid var(--border);
    }
    .header-tool-group {
        background: var(--hover-light);
        padding: var(--sp-1);
        border-radius: var(--radius-control);
    }
    #zoom-level {
        font-size: var(--fs-1);
        font-weight: var(--fw-600);
        width: 40px;
        text-align: center;
        color: var(--text-muted);
    }
    #page-nav {
        background: var(--hover-light);
        padding: calc(var(--sp-2) / 2) var(--sp-3);
        border-radius: var(--radius-control);
    }
    #page-nav span {
        font-size: var(--fs-1);
        color: var(--text);
        font-weight: var(--fw-600);
    }
    #page-current {
        color: var(--text);
        font-weight: var(--fw-700);
    }
    #page-nav .sep {
        color: var(--text-muted);
    }
    #page-count {
        color: var(--text);
    }
    .header-divider {
        height: var(--sp-4);
        width: 1px;
        background: var(--hover-light);
    }
    .protected-badge {
        color: var(--success-border);
        font-size: var(--fs-1);
        font-weight: var(--fw-700);
        letter-spacing: 0.05em;
    }
    .nda-container {
        display: flex;
        /* safe center: vertically centered when the card fits, but falls back to
           top-aligned when it's taller than the viewport — plain `center` would push
           the header (brand + title) above the scroll origin and clip it unreachably. */
        align-items: safe center;
        justify-content: center;
        min-height: 100%;
        width: 100%;
        padding: var(--sp-5) var(--sp-4);
        overflow-y: auto;
    }
    .nda-card.card {
        max-width: 800px;
        width: 100%;
        background: var(--surface-sunken);
        border: none;
        border-radius: var(--radius-card);
        padding: var(--sp-5);
        box-shadow: 0 0 30px var(--overlay), 0 0 20px var(--accent-surface);
        color: var(--text);
    }
    .nda-header {
        text-align: center;
        margin-bottom: var(--sp-5);
    }
    .nda-brand {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--sp-2);
        margin: 0 auto var(--sp-4);
    }
    .nda-brand-logo,
    .nda-brand-logo-default {
        max-width: 220px;
        max-height: 64px;
        width: auto;
        object-fit: contain;
    }
    .nda-brand-logo-default {
        color: var(--text);
    }
    .nda-brand-name {
        font-size: var(--fs-3);
        font-weight: var(--fw-700);
        color: var(--text);
    }
    .nda-card h1 {
        margin-bottom: var(--sp-2);
        color: var(--text);
        font-weight: var(--fw-700);
        font-size: var(--fs-5);
    }
    .nda-card p {
        color: var(--text-muted);
        font-size: var(--fs-3);
    }
    #guest-nda-canvas-container {
        position: relative;
        width: 100%;
        min-height: 420px;
        max-height: 500px;
        overflow-y: auto;
        background: var(--paper);
        border-radius: var(--radius-control);
        padding: var(--sp-5);
        color: var(--ink);
        margin-bottom: var(--sp-5);
        text-align: left;
        box-shadow: inset 0 0 10px color-mix(in srgb, var(--n-950) 10%, transparent);
    }
    .nda-doc-header {
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid var(--border);
        padding-bottom: var(--sp-2);
        margin-bottom: var(--sp-4);
    }
    .nda-doc-title {
        font-size: var(--fs-0);
        font-weight: var(--fw-700);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--text-muted);
    }
    #nda-today-date {
        font-size: var(--fs-0);
        color: var(--text-muted);
    }
    #nda-text-content {
        font-size: var(--fs-2);
        line-height: 1.6;
        white-space: pre-wrap;
        font-family: var(--font-sans);
    }
    #guest-signature-field {
        position: absolute;
        border: 2px dashed var(--accent);
        background: var(--accent-surface);
        color: var(--accent);
        border-radius: var(--radius-control);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: var(--fs-0);
        font-weight: var(--fw-600);
        cursor: pointer;
        user-select: none;
        transition: var(--transition);
        box-shadow: 0 4px 12px var(--accent-surface);
    }
    #sig-field-placeholder {
        display: block;
    }
    #sig-field-img {
        display: none;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        pointer-events: none;
    }
    .nda-content-simple {
        background: var(--surface);
        border: 1px solid var(--hover-light);
        border-radius: var(--radius-control);
        padding: var(--sp-5);
        height: 350px;
        overflow-y: auto;
        margin-bottom: var(--sp-5);
        font-size: var(--fs-3);
        line-height: 1.6;
        color: var(--text);
        text-align: left;
    }
    .nda-content-simple h3 {
        margin-top: 0;
        font-weight: var(--fw-700);
        color: var(--text);
    }
    #nda-text-content-simple {
        white-space: pre-wrap;
        margin-top: var(--sp-4);
    }
    .nda-content-simple p {
        margin-top: var(--sp-5);
    }
    .nda-actions {
        display: flex;
        gap: var(--sp-4);
        justify-content: center;
        margin-top: var(--sp-5);
    }
    .premium-empty-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        text-align: center;
        color: var(--text-muted);
        padding: var(--sp-5);
    }
    .empty-state-icon-bg {
        margin-bottom: var(--sp-4);
        padding: var(--sp-4);
        background: var(--hover-light);
        border-radius: 50%;
    }
    .empty-state-icon-bg .icon {
        width: 48px;
        height: 48px;
        opacity: 0.3;
    }
    .premium-empty-state h3 {
        color: var(--text);
        margin: 0 0 var(--sp-2) 0;
        font-weight: var(--fw-600);
    }
    .premium-empty-state p {
        margin: 0;
        font-size: var(--fs-2);
        max-width: 320px;
    }
    #viewer-progress {
        position: fixed;
        top: 0;
        left: 0;
        height: 3px;
        background: var(--accent);
        z-index: 10001;
        width: 0%;
        display: none;
        transition: width 0.4s ease;
    }
    .sig-modal-overlay {
        display: none;
        align-items: center;
        justify-content: center;
        z-index: 10005;
        background: var(--overlay);
    }
    .sig-modal-content {
        /* Wide enough for three standard-min-width (.btn) buttons + gaps in one centered row. */
        max-width: 560px;
        width: 90%;
        border-radius: var(--radius-control);
        box-shadow: var(--sh-3);
        background: var(--surface);
        border: none;
        padding: 0;
        overflow: hidden;
    }
    .sig-modal-header {
        padding: var(--sp-4) var(--sp-5);
        border-bottom: 1px solid var(--border);
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: var(--surface-raised);
    }
    .sig-modal-body {
        padding: var(--sp-5);
        display: flex;
        flex-direction: column;
        gap: var(--sp-4);
    }
    .sig-canvas-wrapper {
        position: relative;
        width: 100%;
        height: 180px;
        background: var(--paper);
        border: 1px solid var(--border);
        border-radius: var(--radius-control);
        overflow: hidden;
    }
    #signature-pad-canvas {
        width: 100%;
        height: 100%;
        touch-action: none;
        background: var(--paper);
        cursor: crosshair;
    }
    .sig-modal-actions {
        display: flex;
        /* One centered row of standard-size buttons with a single uniform gap — no nested
           group, no space-between, so spacing can't go uneven. */
        gap: var(--sp-2);
        justify-content: center;
    }

    .sig-modal-header h3 {
        margin: 0;
        font-size: var(--fs-4);
        color: var(--text);
    }

    #post-processor-guard {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        opacity: 0.005;
        pointer-events: none;
        z-index: 9999;
        overflow: hidden;
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;
        gap: var(--sp-5);
        padding: var(--sp-4);
        font-family: var(--font-mono, monospace);
        font-size: var(--fs-0);
        color: var(--text);
        user-select: none;
    }

    .hidden {
        display: none !important;
    }

    body { 
        background: var(--surface-sunken); 
        color: var(--nav-text); 
        margin: 0; 
        overflow: hidden; 
        font-family: var(--font-sans); 
        font-variation-settings: 'wght' var(--fw-400);
        -webkit-font-smoothing: antialiased;
    }

    body:has(.viewer-layout), body.viewer-active {
        background: var(--surface-sunken);
        overflow: hidden !important;
    }

    /* Executive Scrollbars (Viewer) */
    .canvas-container::-webkit-scrollbar { width: 4px; }
    .canvas-container::-webkit-scrollbar-track { background: transparent; }
    .canvas-container::-webkit-scrollbar-thumb { background: var(--hover-light); border-radius: var(--radius-card); }
    .canvas-container::-webkit-scrollbar-thumb:hover { background: var(--hover-light); }

    h1 { font-size: var(--fs-5);  font-weight: var(--fw-600); font-variation-settings: 'wght' var(--fw-600); margin: 0; }

    .viewer-layout {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        z-index: 999;
        display: flex;
        flex-direction: column;
        background: var(--surface-sunken);
    }
    
    .viewer-header {
        height: var(--v-header-h);
        background: var(--surface-sunken);
        border-bottom: 1px solid var(--hover-light);
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 var(--sp-4);
        z-index: 1000;
        box-shadow: 0 4px 6px -1px var(--overlay);
    }

    .viewer-body { display: flex; flex: 1; overflow: hidden; }



    /* Perfectly centered canvas container with scroll flex layout */
    .canvas-container {
        flex: 1;
        overflow: auto;
        background: var(--n-950); 
        scroll-behavior: smooth;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
    }

    .viewer-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: var(--sp-4);
        padding: var(--sp-5);
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        margin: auto;
    }

    /* Premium centered pages scaling gracefully with custom zoom property */
    .pdf-page {
        background: var(--surface);
        box-shadow: 0 20px 25px -5px var(--overlay);
        margin: 0 auto var(--sp-5) auto;
        position: relative;
        border-radius: var(--radius-control);
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        /* Base = the fitted width (min of 95% container or 850px); zoom multiplies
           THAT, so zooming in grows past the fit (was min(95%, 850px*zoom), which
           clamped to 95% and made zoom-in do nothing once the page filled the view). */
        width: calc(min(95%, 850px) * var(--viewer-zoom, 1.0));
        height: auto;
        transition: width 0.2s ease-out;
    }

    .pdf-canvas, .pdf-page img {
        width: 100%;
        height: auto;
        display: block;
    }

    .viewer-blurred canvas { filter: blur(40px); }

    /* Header tools use the canonical ghost icon button (.btn .btn-ghost
       .btn-icon) — same as the modal/page icon buttons outside the viewer.
       Only a couple of viewer-scoped tweaks remain (see below). */
    .viewer-header .btn-ghost.btn-icon:disabled { opacity: 0.2; }



    /* icon sizing comes from the canonical svg.icon-* scale (comp_styles.html);
       viewer hero/fallback icons are sized by their containers. No local dupes. */

    /* Heartbeat Pulse Indicator with Borderless Glow-Shade Paradigm */
    .heartbeat-pulse {
        width: 8px;
        height: 8px;
        background: var(--success);
        border-radius: 50%;
        border: none; /* Borderless glow paradigm */
        box-shadow: 0 0 10px color-mix(in srgb, var(--success) 70%, transparent);
        transition: all 0.3s ease;
    }
    .heartbeat-pulse.pulsing {
        animation: pulse-green 1.2s infinite;
    }
    @keyframes pulse-green {
        0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 70%, transparent); }
        70% { box-shadow: 0 0 0 10px transparent; }
        100% { box-shadow: 0 0 0 0 transparent; }
    }

    /* Dynamic barely visible watermark overlay (opacity 0.05 - 0.1) */
    /* Static tiled watermark layer over the document surface (replaces the old
       mouse-following stamp). Diagonal, repeating, visible-but-subtle, and
       always present in the DOM — so even if a canvas hasn't drawn yet (or an
       image fails to load) the page is still visibly watermarked. */
    .watermark-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 10;
        overflow: hidden;
        display: flex;
        flex-wrap: wrap;
        align-content: center;
        justify-content: center;
        gap: var(--sp-5) var(--sp-5);
        padding: var(--sp-5);
        transform: rotate(-30deg) scale(1.4);
        font-family: var(--font-sans);
        font-weight: var(--fw-700);
        font-size: var(--fs-2);
        /* Colour + opacity come from the live watermark settings (set as CSS vars on
           the viewer root), so the opacity slider drives EVERY on-screen overlay —
           PDF/image canvases, doc/convertible views, and the zip browser alike. */
        color: var(--viewer-wm-color, var(--text));
        opacity: var(--viewer-wm-opacity, 0.08);
        white-space: nowrap;
        user-select: none;
    }

    .viewer-main-container {
        max-width: none;
        padding: 0;
        margin: 0;
        width: 100vw;
        height: 100vh;
        overflow: hidden !important;
    }

    .v-flex-col {
        display: flex;
        flex-direction: column;
    }
    .v-flex-gap-2 {
        display: flex;
        align-items: center;
        gap: var(--sp-2);
    }
    .v-flex-gap-4 {
        display: flex;
        align-items: center;
        gap: var(--sp-4);
    }
    .v-flex-gap-1 {
        display: flex;
        align-items: center;
        gap: var(--sp-1);
    }

    /* Premium Executive Left Sidebar (Viewer Sidebar) */
    .viewer-sidebar {
        width: 280px;
        background: var(--surface-sunken);
        border-right: 1px solid var(--hover-light);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        flex-shrink: 0;
        transition: width 0.2s ease;
    }

    /* ── Mid-tier icon rail (mirrors the main nav .sidebar.collapsed). The
       file-nav shrinks to file-type icons; the folder header stays as the
       expand toggle. Driven by applyViewerNav()/toggleViewerSidebar(). */
    .viewer-sidebar.collapsed { width: 76px; }
    .viewer-sidebar.collapsed .sidebar-folder-title,
    .viewer-sidebar.collapsed .sidebar-search-container,
    .viewer-sidebar.collapsed .expiry-badge-text,
    .viewer-sidebar.collapsed .sidebar-row-info,
    .viewer-sidebar.collapsed .sidebar-nested-toc { display: none; }
    .viewer-sidebar.collapsed .sidebar-header { padding: var(--sp-4) var(--sp-2); }
    .viewer-sidebar.collapsed .folders-row-layout,
    .viewer-sidebar.collapsed .sidebar-row-main { justify-content: center; }
    .viewer-sidebar.collapsed .expiry-badge-card {
        justify-content: center;
        margin: var(--sp-2);
        padding: var(--sp-2);
    }
    .viewer-sidebar.collapsed .sidebar-files-list { padding: var(--sp-2); align-items: center; }
    .viewer-sidebar.collapsed .viewer-sidebar-row { padding: var(--sp-2); width: 100%; }

    /* Scoped under .viewer-sidebar (0,2,0) so padding + border win over the
       button.unbutton reset (0,1,1) — the header is a <button class="unbutton …">,
       and .unbutton zeroes padding/border. An unscoped `.sidebar-header` (0,1,0)
       loses to .unbutton, which is why the title used to sit flush and the 32px
       folder icon overflowed the collapsed ~20px header and got clipped. The
       collapsed rule below already scopes under .viewer-sidebar for the same reason. */
    .viewer-sidebar .sidebar-header {
        /* One full empty row (--row-h) of breathing room above the folder title, so it
           doesn't sit flush against the viewer header — matches the main nav, which puts
           a --row-h .brand-spacer between the brand and the nav. */
        padding: var(--row-h) var(--sp-4) var(--sp-4);
        border-bottom: 1px solid var(--hover-light);
    }
    /* The folder header doubles as the collapse/expand toggle (like the main
       nav brand row). */
    .sidebar-header-toggle { cursor: pointer; transition: var(--transition); }
    .sidebar-header-toggle:hover { background: var(--hover-light); }

    .folders-row-layout {
        display: flex;
        align-items: center;
        gap: var(--sp-2);
    }

    .folder-icon-container {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border-radius: var(--radius-control);
        background: var(--hover-light);
        color: var(--accent);
    }

    .sidebar-folder-title {
        margin: 0;
        font-size: var(--fs-2);
        font-weight: var(--fw-700);
        color: var(--text);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 200px;
    }

    /* Expiry Timer Badge in Sidebar - Borderless Glowing-Shade Paradigm */
    .expiry-badge-card {
        margin: var(--sp-4);
        padding: var(--sp-2) var(--sp-4);
        border: none; /* Borderless */
        border-radius: var(--radius-control);
        background: var(--surface-raised);
        box-shadow: 0 0 15px var(--surface-raised); /* Soft glow */
        display: flex;
        align-items: center;
        gap: var(--sp-2);
        font-size: var(--fs-1);
    }

    .expiry-badge-text {
        color: var(--text-muted);
        font-weight: var(--fw-500);
    }

    .expiry-badge-timer {
        color: var(--warning);
        font-weight: var(--fw-700);
        text-shadow: 0 0 4px color-mix(in srgb, var(--warning) 40%, transparent);
    }

    /* Compact Search Container */
    .sidebar-search-container {
        padding: 0 var(--sp-4) var(--sp-4) var(--sp-4);
        border-bottom: 1px solid var(--hover-light);
    }

    .sidebar-search-input {
        width: 100%;
        background: var(--hover-light);
        border: 1px solid var(--hover-light);
        border-radius: var(--radius-control);
        padding: var(--sp-2) var(--sp-4);
        color: var(--n-0);
        font-size: var(--fs-2);
        outline: none;
        transition: var(--transition);
        box-sizing: border-box;
    }

    .sidebar-search-input:focus {
        border-color: var(--accent);
        background: var(--hover-light);
        box-shadow: 0 0 10px var(--accent-surface);
    }

    /* Scrollable File List */
    .sidebar-files-list {
        flex: 1;
        overflow-y: auto;
        padding: var(--sp-4);
        display: flex;
        flex-direction: column;
        gap: var(--sp-1);
        scrollbar-color: var(--hover-light) transparent;
        scrollbar-width: thin;
    }

    @supports not (scrollbar-color: auto) {
        .sidebar-files-list::-webkit-scrollbar {
            width: 4px;
        }
        .sidebar-files-list::-webkit-scrollbar-track {
            background: transparent;
        }
        .sidebar-files-list::-webkit-scrollbar-thumb {
            background: var(--hover-light);
            border-radius: var(--radius-card);
        }
    }

    /* Interactive File Row */
    .viewer-sidebar-row {
        padding: var(--sp-2) var(--sp-4);
        background: var(--hover-light);
        border: none;
        border-radius: var(--radius-control);
        cursor: pointer;
        transition: var(--transition);
        box-sizing: border-box;
    }

    .viewer-sidebar-row:hover {
        background: var(--hover-light);
        transform: translateY(-1px);
    }

    .viewer-sidebar-row.active {
        background: var(--accent-surface);
        box-shadow: inset 3px 0 0 var(--accent), 0 0 15px var(--accent-surface); /* Ambient inner indicator + soft glow */
    }

    .sidebar-row-main {
        display: flex;
        align-items: center;
        gap: var(--sp-2);
    }

    .row-icon-container {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        border-radius: var(--radius-control);
        background: var(--hover-light);
        color: var(--text-muted);
    }

    .viewer-sidebar-row.active .row-icon-container {
        color: var(--accent);
    }

    .sidebar-row-info {
        flex: 1;
        min-width: 0;
    }

    .sidebar-file-name {
        font-size: var(--fs-2);
        font-weight: var(--fw-500);
        color: var(--text);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-bottom: var(--sp-1);
    }

    .viewer-sidebar-row.active .sidebar-file-name {
        color: var(--accent);
        font-weight: var(--fw-600);
    }

    .sidebar-file-meta {
        display: flex;
        align-items: center;
        gap: var(--sp-1);
    }

    .badge-neutral {
        background: var(--hover-light);
        color: var(--text-muted);
        border: none;
    }

    .sidebar-nested-toc {
        margin-top: var(--sp-2);
        padding-left: calc(var(--sp-5) + var(--sp-2));
        display: none;
        flex-direction: column;
        gap: var(--sp-1);
        transition: var(--transition);
    }
    .viewer-sidebar-row.active .sidebar-nested-toc {
        display: flex;
    }
    /* Clicking the already-open file collapses its page list without reloading. */
    .viewer-sidebar-row.active.toc-collapsed .sidebar-nested-toc {
        display: none;
    }
    .sidebar-toc-item {
        font-size: var(--fs-1);
        padding: var(--sp-1) var(--sp-2);
        color: var(--text-muted);
        border-radius: var(--radius-control);
        transition: var(--transition);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .sidebar-toc-item:hover {
        background: var(--hover-light);
        color: var(--n-0);
    }
    .sidebar-toc-item.active {
        background: var(--accent-surface);
        color: var(--accent);
        font-weight: var(--fw-600);
        box-shadow: 0 0 10px var(--accent-surface);
    }

    /* Task 7.8 Zero-Lag Blur Focus Guard overlay style */
    .viewer-blurred {
        filter: blur(20px);
        pointer-events: none;
        transition: filter 0.2s ease-in-out;
        will-change: filter;
        transform: translateZ(0); /* Hardware acceleration */
    }

    /* Task 7.2 Opaque Fallback Card styling (Borderless Glowing-Shade Alert Paradigm) */
    .opaque-fallback-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        max-width: 480px;
        width: 100%;
        background: var(--surface);
        border: none;
        border-radius: var(--radius-card);
        padding: var(--sp-5);
        box-shadow: 0 10px 40px var(--overlay), 0 0 30px hsla(220, 95%, 50%, 0.15);
        color: var(--text);
        text-align: center;
        margin: auto;
    }
    .opaque-fallback-icon-container {
        width: 56px;
        height: 56px;
        background: var(--hover-light);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: var(--sp-4);
        box-shadow: 0 0 15px var(--hover-light);
    }
    .opaque-fallback-icon-container svg {
        width: 28px;
        height: 28px;
        color: var(--accent);
    }
    .opaque-fallback-card h3 {
        margin: 0 0 var(--sp-2) 0;
        font-weight: var(--fw-700);
        font-size: var(--fs-4);
        color: var(--text);
    }
    .opaque-fallback-card p {
        font-size: var(--fs-2);
        color: var(--text-muted);
        margin: 0 0 var(--sp-5) 0;
        line-height: 1.5;
    }
    /* Download CTA on the opaque-format fallback card (was inline JS styles). */
    .opaque-fallback-download {
        display: inline-flex;
        align-items: center;
        gap: var(--sp-2);
        margin: 0 auto;
        padding: var(--sp-2) var(--sp-5);
        font-weight: var(--fw-600);
        cursor: pointer;
    }

    /* Premium Borderless Glowing-Shade Warning & Expiration Card Overlays */
    .security-alert-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: var(--overlay);
        backdrop-filter: blur(8px);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 20000;
        animation: securityFadeIn 0.3s ease-out forwards;
    }

    .security-alert-card {
        max-width: 460px;
        width: 90%;
        background: var(--surface-sunken); /* Deep executive slate dark fill */
        border: none; /* Strictly borderless */
        border-radius: var(--radius-card);
        padding: var(--sp-5);
        color: var(--n-100);
        text-align: center;
        box-shadow: 0 10px 40px var(--overlay), 0 0 30px hsla(0, 95%, 50%, 0.25); /* Premium glowing-shade red shadow */
        transform: scale(0.95);
        opacity: 0;
        animation: securityScaleUpIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    .security-alert-icon-container {
        width: 56px;
        height: 56px;
        background: var(--surface-raised);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto var(--sp-4);
        box-shadow: 0 0 20px var(--surface-raised);
    }

    .security-alert-icon-container svg {
        width: 28px;
        height: 28px;
        color: var(--danger);
    }

    .security-alert-card h2 {
        margin: 0 0 var(--sp-2) 0;
        font-size: var(--fs-4);
        font-weight: var(--fw-700);
        color: var(--n-0);
        line-height: 1.4;
    }

    .security-alert-card p {
        font-size: var(--fs-2);
        color: var(--text-muted);
        margin: 0 0 var(--sp-5) 0;
        line-height: 1.6;
    }

    .security-alert-card .btn {
        width: 100%;
        justify-content: center;
        padding: var(--sp-3) var(--sp-5);
        font-weight: var(--fw-600);
    }

    @keyframes securityFadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    @keyframes securityScaleUpIn {
        from { transform: scale(0.95); opacity: 0; }
        to { transform: scale(1); opacity: 1; }
    }

    /* Expired Card CSS Styles to avoid inline style attributes */
    .viewer-expired-overlay {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100%;
        padding: var(--sp-5);
        width: 100%;
    }

    .viewer-expired-card {
        max-width: 500px;
        width: 100%;
        background: var(--surface-sunken);
        border: none;
        border-radius: var(--radius-card);
        padding: var(--sp-5);
        box-shadow: 0 10px 40px var(--overlay), 0 0 30px hsla(0, 95%, 50%, 0.25);
        text-align: center;
        color: var(--danger-text);
    }

    .viewer-expired-icon-container {
        width: 48px;
        height: 48px;
        background: var(--surface-raised);
        color: var(--danger);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto var(--sp-4);
        box-shadow: 0 0 20px var(--surface-raised);
    }

    .viewer-expired-icon-container svg {
        width: 24px;
        height: 24px;
    }

    .viewer-expired-card h2 {
        font-weight: var(--fw-700);
        color: var(--n-0);
        margin-bottom: var(--sp-2);
    }

    .viewer-expired-card p {
        color: var(--text-muted);
        font-size: var(--fs-2);
        line-height: 1.6;
    }

    .print-disabled-overlay {
        display: none;
    }
    @media print {
        body {
            background: var(--n-950);
            display: block !important;
        }
        .viewer-layout, #post-processor-guard {
            display: none !important;
        }
        .print-disabled-overlay {
            display: flex !important;
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: var(--n-950);
            color: var(--n-0);
            align-items: center;
            justify-content: center;
            text-align: center;
            font-family: var(--font-sans);
            z-index: 9999999;
        }
        .print-disabled-card {
            padding: var(--sp-5);
            border: none;
            border-radius: var(--radius-control);
            background: var(--surface-sunken);
            max-width: 500px;
            margin: auto;
            box-shadow: 0 10px 40px var(--overlay), 0 0 30px hsla(0, 95%, 50%, 0.25);
        }
        .print-disabled-card h1 {
            color: var(--danger);
            margin-bottom: var(--sp-4);
            font-size: var(--fs-5);
            font-weight: bold;
        }
        .print-disabled-card p {
            color: var(--text-muted);
            font-size: var(--fs-2);
        }
    }

    /* Mobile / responsive polish. The file-nav 3-tier (full / rail / drawer)
       is driven by applyViewerNav(); the off-canvas drawer lives in the ≤640
       block below, the rail covers 641–1100, full panel above. */
    .viewer-sidebar-toggle {
        display: none !important;
    }

    /* Small screens: compact the header + document (the rail stays usable). */
    @media (max-width: 768px) {
        .viewer-container {
            padding: var(--sp-2);
            gap: var(--sp-2);
        }

        .pdf-page {
            width: 98%;
            margin-bottom: var(--sp-4);
            box-shadow: 0 4px 15px var(--overlay);
        }

        /* Hide non-essential header items to prevent overflow */
        .header-tool-group,
        .viewer-header .btn-icon[title="Full Screen"],
        .header-divider {
            display: none !important;
        }

        /* Reduce header title size and constrain width to prevent truncation wrap */
        .viewer-header h1 {
            font-size: var(--fs-3);
            font-weight: var(--fw-600);
            max-width: 140px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* Compact info layouts */
        #page-nav {
            font-size: var(--fs-1);
        }

        .protected-badge {
            font-size: var(--fs-0);
            gap: var(--sp-1);
        }

        /* NDA Card Mobile Responsive Padding & Typography */
        .nda-card.card {
            padding: var(--sp-4);
            border-radius: var(--radius-card);
            margin: var(--sp-4);
        }

        .nda-card h1 {
            font-size: var(--fs-4);
        }

        .nda-card p {
            font-size: var(--fs-2);
        }

        .nda-container {
            padding: var(--sp-4);
        }
    }

    /* True mobile (≤640): file-nav goes off-canvas, toggled by the header
       button — mirrors the main nav's mobile drawer. */
    @media (max-width: 640px) {
        .viewer-sidebar-toggle {
            display: inline-flex !important;
            color: var(--text-muted);
            transition: var(--transition);
        }
        .viewer-sidebar-toggle:hover {
            color: var(--n-0);
            background: var(--hover-light);
        }

        .viewer-sidebar,
        .viewer-sidebar.collapsed {
            position: fixed;
            top: var(--v-header-h);
            left: 0;
            bottom: 0;
            z-index: 1001;
            width: 280px;
            transform: translateX(-100%);
            transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            box-shadow: 10px 0 30px var(--overlay);
            background: var(--surface-sunken);
        }

        .viewer-sidebar.open {
            transform: translateX(0);
        }

        /* Document surface spans the viewport; the drawer floats above it. */
        .canvas-container {
            width: 100vw;
            padding: 0;
        }
        /* Stack the ZIP browser on small screens. */
        .zip-browser { flex-direction: column; }
        .zip-tree { width: auto; max-height: 40vh; border-right: none; border-bottom: 1px solid var(--border); }
    }

    /* ---- ZIP browser (view-zip.js): file tree + inline preview ---- */
    .zip-browser { display: flex; align-items: stretch; width: 100%; min-height: 70vh; background: var(--surface); }
    .zip-tree {
        width: 280px; flex-shrink: 0; overflow: auto;
        border-right: 1px solid var(--border); padding: var(--sp-2) 0;
        background: var(--surface-sunken);
    }
    .zip-preview { flex: 1; min-width: 0; overflow: auto; padding: var(--sp-4); }
    .zip-node {
        display: flex; align-items: center; gap: var(--sp-1);
        padding: var(--sp-1) var(--sp-3); cursor: pointer; color: var(--text);
        font-size: var(--text-label); line-height: 1.4; user-select: none;
        border: none; background: none; width: 100%; text-align: left;
    }
    .zip-node:hover { background: var(--surface); }
    .zip-file.is-active { background: var(--accent-surface); color: var(--accent); font-weight: var(--fw-600); }
    .zip-icn { width: var(--sp-4); height: var(--sp-4); flex-shrink: 0; opacity: 0.7; }
    .zip-caret { width: var(--sp-3); height: var(--sp-3); flex-shrink: 0; transition: transform 0.15s; }
    .zip-folder[open] > summary .zip-caret { transform: rotate(90deg); }
    .zip-folder summary { list-style: none; }
    .zip-folder summary::-webkit-details-marker { display: none; }
    .zip-node-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .zip-image { max-width: 100%; height: auto; display: block; margin: 0 auto; box-shadow: var(--sh-1); }
    .zip-text {
        margin: 0; font-family: var(--font-mono); font-size: var(--text-label);
        white-space: pre-wrap; overflow-wrap: break-word; color: var(--text);
    }
    .zip-doc { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); }
    .zip-loading { color: var(--text-muted); padding: var(--sp-5); text-align: center; }
    .zip-unsupported { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); padding: var(--sp-5) var(--sp-4); text-align: center; color: var(--text-muted); background: var(--surface); border-radius: var(--radius-control); max-width: 520px; margin: var(--sp-5) auto; box-shadow: 0 20px 25px -5px var(--overlay); }
    .zip-unsupported-icon { width: 56px; height: 56px; opacity: 0.4; }
    .zip-unsupported h3 { margin: var(--sp-2) 0 0; color: var(--text); }
    .zip-unsupported p { margin: 0; }

    /* ---- ZIP tree mounted in the viewer LEFT NAV (sidebar) ---- */
    /* The archive's inner files replace the page list in the sidebar; the selected
       file renders in the main canvas. Reuses the .zip-node/.zip-file/.zip-folder
       atoms above; only the container + canvas-side padding differ. */
    .zip-nav { display: flex; flex-direction: column; padding: var(--sp-1) 0; }
    /* Single content host per inner file: position:relative so the watermark overlay
       (inset:0) stretches to the full content height (every PDF page / long text). */
    .zip-content { position: relative; padding: var(--sp-4); min-height: 100%; }
    /* Plain-text/code inner files get a light page (PDFs/images/office self-surface). */
    .zip-paper {
        background: var(--surface); color: var(--text);
        max-width: 850px; margin-left: auto; margin-right: auto;
        border-radius: var(--radius-control); box-shadow: 0 20px 25px -5px var(--overlay);
    }

    /* ---- Shared A4 paginator (view-paged.js) ---- */
    /* White A4 pages on the dark canvas, matching pdf.js pages; each carries a
       per-page watermark canvas drawn with the SAME geometry as the PDF viewer. */
    .doc-a4-page {
        position: relative;
        width: 794px;
        background: var(--surface);
        box-shadow: 0 20px 25px -5px var(--overlay);
        border-radius: var(--radius-control);
        margin: 0 auto var(--sp-5);
        overflow: hidden;
    }
    .doc-a4-body {
        height: 1123px;
        padding: var(--doc-page-pad);
        box-sizing: border-box;
        overflow: hidden;
        color: var(--text);
        font-family: var(--font-sans);
        font-size: var(--fs-2);
        line-height: 1.55;
    }
    .doc-wm-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; }
    .doc-pre { font-family: var(--font-mono); font-size: var(--fs-1); white-space: pre-wrap; overflow-wrap: break-word; margin: 0; color: var(--text); }

    /* GitHub-flavoured markdown (marked.js output), scoped to the rendered root. */
    .md-root { color: var(--text); }
    .md-root > :first-child { margin-top: 0; }
    .md-root h1, .md-root h2, .md-root h3, .md-root h4 { font-weight: var(--fw-600); line-height: 1.25; margin: 1.2em 0 .6em; }
    .md-root h1 { font-size: 1.9em; border-bottom: 1px solid var(--border); padding-bottom: .3em; }
    .md-root h2 { font-size: 1.5em; border-bottom: 1px solid var(--border); padding-bottom: .3em; }
    .md-root h3 { font-size: 1.25em; }
    .md-root h4 { font-size: 1.05em; }
    .md-root p { margin: 0 0 1em; }
    .md-root ul, .md-root ol { margin: 0 0 1em; padding-left: 2em; }
    .md-root li { margin: .25em 0; }
    .md-root code { font-family: var(--font-mono); font-size: .9em; background: var(--surface-sunken); padding: .15em .35em; border-radius: var(--radius-control); }
    .md-root pre { background: var(--surface-sunken); padding: var(--sp-3); border-radius: var(--radius-control); overflow: auto; }
    .md-root pre code { background: none; padding: 0; }
    .md-root blockquote { margin: 0 0 1em; padding: 0 1em; color: var(--text-muted); border-left: 3px solid var(--border); }
    .md-root table { border-collapse: collapse; width: 100%; margin: 0 0 1em; }
    .md-root th, .md-root td { border: 1px solid var(--border); padding: var(--sp-1) var(--sp-2); text-align: left; }
    .md-root th { background: var(--surface-sunken); font-weight: var(--fw-600); }
    .md-root a { color: var(--accent); }
    .md-root img { max-width: 100%; }
    .md-root hr { border: 0; border-top: 1px solid var(--border); margin: 1.5em 0; }