:root { 
        --brand: #8b0000; 
        --page-bg: #fdfbf7; 
        --text-main: #2c2c2c; 
        --text-light: #777; 
        --border-color: #d4cfc5; 
        --sidebar-bg: #f4f1ea; 
        --grid-item-size: 140px; 
        --danger-color: #d32f2f; 
        --select-highlight: #e8f5e9; 
        --link-red: #8b0000; 
        --success-color: #2e7d32; 
        --visited-color: #8a4b85;
        --paper-bg: #fdfbf7;
        --paper-texture: #f4f1ea;
        --ink-color: #2c2c2c;
        --accent: #8b0000;
        --paper-texture-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
        /* === ICON SYSTEM (inline SVG, Phosphor-style outline) === */
        --icon-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 256 256'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='16' d='M128 216S28 160 28 92a52 52 0 0 1 100-20h0a52 52 0 0 1 100 20c0 68-100 124-100 124Z'/%3E%3C/svg%3E");
        --icon-heart-fill: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 256 256'%3E%3Cpath fill='%238b0000' d='M240 94c0 70-112 130-112 130S16 164 16 94a64 64 0 0 1 112-41h0A64 64 0 0 1 240 94Z'/%3E%3C/svg%3E");
        --icon-folder: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 256 256'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='16' d='M216 72H131.31L104 44.69A15.86 15.86 0 0 0 92.69 40H40a16 16 0 0 0-16 16v144.62A15.4 15.4 0 0 0 39.38 216h177.51A15.13 15.13 0 0 0 232 200.89V88a16 16 0 0 0-16-16Z'/%3E%3C/svg%3E");
        --icon-edit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 256 256'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='16' d='M92.69 216H48a8 8 0 0 1-8-8v-44.69a8 8 0 0 1 2.34-5.66l120-120a8 8 0 0 1 11.32 0l44.69 44.69a8 8 0 0 1 0 11.32Z'/%3E%3Cline fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='16' x1='136' y1='64' x2='192' y2='120'/%3E%3C/svg%3E");
        --icon-delete: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 256 256'%3E%3Cline fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='16' x1='216' y1='56' x2='40' y2='56'/%3E%3Cline fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='16' x1='104' y1='104' x2='104' y2='168'/%3E%3Cline fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='16' x1='152' y1='104' x2='152' y2='168'/%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='16' d='M200 56V208a8 8 0 0 1-8 8H64a8 8 0 0 1-8-8V56'/%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='16' d='M168 56V40a16 16 0 0 0-16-16h-48a16 16 0 0 0-16 16v16'/%3E%3C/svg%3E");
        --icon-share: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 256 256'%3E%3Cpolyline fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='16' points='176 104 224 56 176 8'/%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='16' d='M176 200H40V88h48'/%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='16' d='M224 56H128a48 48 0 0 0-48 48v16'/%3E%3C/svg%3E");
        --icon-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 256 256'%3E%3Crect x='32' y='48' width='192' height='160' rx='8' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='16' d='m32 168 50.34-50.34a8 8 0 0 1 11.32 0L136 160l34.34-34.34a8 8 0 0 1 11.32 0L224 168'/%3E%3Ccircle cx='156' cy='100' r='12' fill='currentColor'/%3E%3C/svg%3E");
        --icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 256 256'%3E%3Cline fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='16' x1='200' y1='56' x2='56' y2='200'/%3E%3Cline fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='16' x1='200' y1='200' x2='56' y2='56'/%3E%3C/svg%3E");
        --icon-back: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 256 256'%3E%3Cpolyline fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='16' points='160 208 80 128 160 48'/%3E%3C/svg%3E");
        --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 256 256'%3E%3Cpolyline fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='16' points='40 144 96 200 216 80'/%3E%3C/svg%3E");
        --icon-settings: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 256 256'%3E%3Ccircle cx='128' cy='128' r='40' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='16' d='M130.05 206.11c-1.34 0-2.69 0-4 0L117 228a103.92 103.92 0 0 1-34.11-19.2l6.88-22a4 4 0 0 0-2.54-4.94l-.22-.08a4 4 0 0 0-5 1.53l-12.8 18.44A104.13 104.13 0 0 1 49.2 175.1l18.44-12.8a4 4 0 0 0 .75-5.87 4 4 0 0 0-.75-.75l-.22-.16a4 4 0 0 0-4.76-.38L40.22 149A103.84 103.84 0 0 1 28 128v-.06L50.65 119a4 4 0 0 0 2.54-4.94l-.08-.22a4 4 0 0 0-4.22-2.72L26.45 112.8a104.13 104.13 0 0 1 7.58-37.85L56.47 81.83a4 4 0 0 0 5.6-1A4 4 0 0 0 63 78.9l.08-.22A4 4 0 0 0 61.62 74L49.2 55.1a104.13 104.13 0 0 1 20.91-26.88l18.44 12.8a4 4 0 0 0 5.88-.76l.08-.14a4 4 0 0 0 .38-4.76L88.01 13.12A104.13 104.13 0 0 1 125.86 5.54l1.68 22.44a4 4 0 0 0 4.22 3.69h.28a4 4 0 0 0 3.86-4.13v-.28L137 5.12A103.92 103.92 0 0 1 171.11 24.32l-6.88 22a4 4 0 0 0 2.54 4.94l.22.08a4 4 0 0 0 5 -1.53l12.8-18.44a104.13 104.13 0 0 1 20.91 26.73l-18.44 12.8a4 4 0 0 0-.75 5.87 4 4 0 0 0 .75.75l.22.16a4 4 0 0 0 4.76.38l22.44-6.88A103.84 103.84 0 0 1 228 128v.06l-22.65 9a4 4 0 0 0-2.54 4.94l.08.22a4 4 0 0 0 4.22 2.72l22.44-1.68a104.13 104.13 0 0 1-7.58 37.85l-22.44-6.88a4 4 0 0 0-5.6 1l-.9 1.9-.08.22a4 4 0 0 0 1.46 4.86l12.42 18.9a104.13 104.13 0 0 1-20.91 26.88l-18.44-12.8a4 4 0 0 0-5.88.76l-.08.14a4 4 0 0 0-.38 4.76l6.88 22.44a104.13 104.13 0 0 1-37.85 7.58Z'/%3E%3C/svg%3E");
        --icon-annotation: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 256 256'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='16' d='M92.69 216H48a8 8 0 0 1-8-8v-44.69a8 8 0 0 1 2.34-5.66l120-120a8 8 0 0 1 11.32 0l44.69 44.69a8 8 0 0 1 0 11.32l-120 120a8 8 0 0 1-5.66 2.34Z'/%3E%3Cline fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='16' x1='136' y1='64' x2='192' y2='120'/%3E%3Cline fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='16' x1='44' y1='156' x2='100' y2='212'/%3E%3C/svg%3E");
        --icon-cloud: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 256 256'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='16' d='M80 128a80 80 0 1 1 144 48H80a48 48 0 0 1 0-96c1.1 0 2.2 0 3.29.1'/%3E%3C/svg%3E");
        --icon-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 256 256'%3E%3Crect x='40' y='88' width='176' height='128' rx='8' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='16' d='M92 88V60a36 36 0 0 1 72 0v28'/%3E%3Ccircle cx='128' cy='152' r='12' fill='currentColor'/%3E%3C/svg%3E");

        /* Card warm white */
        --card-bg: #fffbf6;
        /* Soft brand shadow */
        --shadow-sm: 0 1px 3px rgba(139, 0, 0, 0.06);
        --shadow-md: 0 4px 12px rgba(139, 0, 0, 0.08);
        --shadow-lg: 0 8px 24px rgba(139, 0, 0, 0.10);

    }
    

    ::-webkit-scrollbar { width: 6px; height: 6px; }
    ::-webkit-scrollbar-thumb { background: #dcd6ce; border-radius: 3px; }
    * {
        box-sizing: border-box;
    }
    
    html, body { 
        height: auto; 
        margin: 0; 
        overflow: auto; 
        scroll-behavior: smooth; 
    }
    
    body { 
        background-color: var(--paper-texture);
        background-image: var(--paper-texture-svg);
        padding: 56px 16px 80px 16px; 
        color: var(--ink-color); 
        font-family: 'Lora', serif; 
    }
    
    .book-container { 
        display: flex; 
        flex-direction: column; 
        height: auto; 
        max-width: 1200px; 
        margin: 0 auto; 
    }
    
    /* --- HEADER STYLES --- */
    .main-header { 
        text-align: center; 
        margin-bottom: 0; /* Убираем margin, чтобы не было двойного отступа */
        margin-top: 50px;
        padding-bottom: 40px; /* Внутренний отступ 40px */
        border-bottom: none; /* Убираем линию */
    }
    
    .main-header h1 { 
        font-family: 'Playfair Display', serif;
        font-size: 60px; 
        font-weight: 900; 
        line-height: 1.1; 
        margin: 0 0 20px 0; 
        color: var(--ink-color);
        letter-spacing: -1px;
    }
    
    .header-link-row { 
        font-size: 1rem; 
        font-weight: 400; 
        margin-bottom: 8px; 
        color: var(--ink-color);
    }
    
    .header-link-row.description { 
        color: #888;
        font-size: 0.9rem;
    }
    
    .header-link-row a { 
        color: var(--accent); 
        text-decoration: none; 
        font-weight: 600;
        border-bottom: 1px solid transparent;
        transition: border-color 0.2s;
    }
    
    .header-link-row a:hover { 
        border-bottom-color: var(--accent);
    }

    /* === FEATURE CARDS === */
    .feature-cards {
        max-width: 1200px;
        margin: 0 auto;
        padding: 40px 24px 20px;
        text-align: center;
    }
    .feature-cards-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        margin-bottom: 24px;
        padding-top: 40px;
    }
    .feature-card {
        background: var(--card-bg);
        border: 1px solid var(--border-color);
        border-radius: 10px;
        padding: 20px;
        text-align: left;
        transition: border-color 0.2s, box-shadow 0.2s;
    }
    .feature-card:hover {
        border-color: var(--brand);
        box-shadow: 0 4px 16px rgba(139, 0, 0, 0.08);
    }
    .feature-card-header {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 10px;
    }
    .feature-card-icon {
        width: 36px;
        height: 36px;
        border-radius: 8px;
        background: #fdf5f5;
        border: 1px solid #f0dada;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
    .feature-card-icon svg {
        width: 20px;
        height: 20px;
        color: var(--brand);
    }
    .feature-card h3 {
        font-family: 'Playfair Display', serif;
        font-size: 1rem;
        font-weight: 700;
        color: var(--ink-color);
        margin: 0;
    }
    .feature-card p {
        font-size: 0.85rem;
        line-height: 1.5;
        color: var(--text-light);
        margin: 0;
    }
    .scroll-down-arrow {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        border: 1px solid var(--border-color);
        background: var(--card-bg);
        cursor: pointer;
        transition: all 0.2s;
        animation: bounceArrow 2s ease-in-out infinite;
    }
    .scroll-down-arrow:hover {
        border-color: var(--brand);
        background: #fdf5f5;
    }
    .scroll-down-arrow svg {
        width: 22px;
        height: 22px;
        color: var(--brand);
    }
    @keyframes bounceArrow {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(6px); }
    }

    /* In sidebar mode, feature cards scroll away with header */
    body.has-sidebar .feature-cards {
        max-width: none;
        padding: 0 70px 20px;
    }

    /* Mobile: single column */
    @media (max-width: 600px) {
        .feature-cards-grid {
            grid-template-columns: 1fr;
        }
    }

    .page-container { 
        background: var(--paper-bg); 
        background-image: var(--paper-texture-svg);
        border-radius: 4px; 
        border: 1px solid #c9c1b3;
        box-shadow: var(--shadow-md);
        display: flex; 
        flex-direction: column; 
    }
    
    .inner-pad { 
        padding: 24px; 
        display: flex; 
        flex-direction: column; 
    }
    
    main.content { 
        display: flex; 
        flex-direction: column; 
    }
    
    #file-list { 
        height: auto; 
        min-height: 40vh; 
        overflow-y: visible; 
        border: 1px solid var(--border-color); 
        border-radius: 4px; 
        position: relative; 
        background: var(--card-bg);
        background-image: var(--paper-texture-svg);
        scrollbar-width: thin; 
        scrollbar-color: #dcd6ce var(--sidebar-bg);
    }
    
    #file-list::-webkit-scrollbar {
        width: 10px;
    }
    
    #file-list::-webkit-scrollbar-track {
        background: var(--sidebar-bg); 
        border-radius: 5px;
    }
    
    #file-list::-webkit-scrollbar-thumb {
        background-color: #dcd6ce;
        border-radius: 3px; 
        border: none;
    }
    
    .archival-search { 
        background-color: #fff; 
        background-image: var(--paper-texture-svg);
        border: 1px solid var(--border-color); 
        border-radius: 4px; 
        padding: 16px; 
        margin-bottom: 24px;
        box-shadow: inset 0 1px 3px rgba(0,0,0,0.04);
    }
    
    .archival-search-form { 
        margin-top: 0; 
    }
    
    .archival-search-form .button-group { 
        display: flex; 
        gap: 8px; 
        flex-shrink: 0; 
    }
    
    .archival-search-form button { 
        width: auto; 
        height: 40px; 
        border-radius: 8px; 
        border: 1px solid var(--border-color); 
        background: var(--card-bg); 
        cursor: pointer; 
        font-family:'Lora',serif; 
        font-size:.95rem; 
        padding: 0 16px; 
        white-space: nowrap; 
        display: flex; 
        align-items: center; 
        justify-content: center; 
    }
    
    .archival-search-form button:disabled { 
        opacity: 0.5; 
        cursor: not-allowed; 
    }
    
    .archival-search-form button.primary { 
        background: var(--brand);
        border-color: var(--brand); 
        color: #fff;
        font-weight: 600;
        transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
    }
    .archival-search-form button.primary:hover:not(:disabled) {
        background: #6a0000;
    }
    
    .search-row-wrapper { 
        display: flex; 
        flex-wrap: nowrap; 
        gap: 12px; 
        align-items: center; 
    }
    
    .search-row-wrapper .input-group { 
        flex: 1 1 0; 
        min-width: 120px; 
        display: flex; 
        flex-direction: column; 
    }
    
    .search-row-wrapper .button-group { 
        flex-shrink: 0; 
        flex-wrap: nowrap; 
    }
    
    .input-group label { 
        margin-bottom: 4px; 
    }
    
    .input-group-skeleton { 
        position: relative; 
    }
    
    .input-group-skeleton .choices { 
        visibility: hidden; 
    }
    
    .input-group-skeleton.is-loaded .choices { 
        visibility: visible; 
    }
    
    .input-group-skeleton.is-loaded .skeleton-loader { 
        display: none; 
    }
    
    .skeleton-loader { 
        height: 40px; 
        width: 100%; 
        border-radius: 8px; 
        background: linear-gradient(90deg, #e0e0e0 25%, #f0f0e0 50%, #e0e0e0 75%); 
        background-size: 200% 100%; 
        animation: shimmer 1.5s infinite; 
    }
    
    @keyframes shimmer { 
        0% { background-position: 200% 0; } 
        100% { background-position: -200% 0; } 
    }
    
    /* MODIFIED CSS FOR DROPDOWNS */
    .choices__inner { 
        border-radius: 4px !important; 
        border: 1px solid var(--border-color) !important; 
        min-height: 40px !important; 
        height: auto !important; 
        padding: 4px 12px !important; 
        display: flex !important; 
        align-items: center !important; 
        font-family: 'Lora', serif !important; 
        font-size: .95rem !important; 
        background: #fff !important; 
    }
    
    .choices.is-disabled .choices__inner { 
        background-color: #f5f5f5 !important; 
        color: #999 !important; 
    }
    
    .choices__list--dropdown { 
        border: 1px solid var(--border-color) !important; 
        border-top: none !important; 
        border-radius: 0 0 4px 4px !important; 
        box-shadow: var(--shadow-md) !important; 
        font-family: 'Lora', serif !important; 
        z-index: 10 !important; 
    }
    
    /* Styles for Index Search Panel inputs (Tomsk specific) */
    #index-search-panel input.choices__inner, 
    #index-search-panel select.choices__inner { 
        width: 100%; 
        box-sizing: border-box; 
        outline: none; 
        transition: border-color 0.2s; 
        height: 40px !important; 
    }
    
    #index-search-panel input.choices__inner:focus { 
        border-color: var(--brand) !important; 
    }
    
    .topbar { 
        position: sticky; 
        top: 0; 
        z-index: 5; 
        background: var(--paper-bg);
        background-image: var(--paper-texture-svg);
        padding-bottom: 16px; 
        margin-bottom: 16px; 
        border-bottom: 2px solid var(--ink-color); 
    }
    
    .controls-row { 
        display: flex; 
        gap: 8px; 
        align-items: center; 
    }
    
    .search-area { 
        display: flex; 
        flex-grow: 1; 
        gap: 8px; 
        align-items: center; 
        min-width: 0; 
    }

    .archive-picker {
        position: relative;
        flex-shrink: 0;
    }

    .archive-picker-btn {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        height: 48px;
        padding: 0 12px;
        border: 1px solid var(--border-color);
        border-radius: 4px;
        background: var(--card-bg);
        color: var(--text-main);
        font-family: Lora, serif;
        font-size: 0.85rem;
        font-weight: 600;
        cursor: pointer;
        white-space: nowrap;
        max-width: 200px;
    }

    .archive-picker-btn:hover {
        border-color: var(--brand);
        color: var(--brand);
    }

    .archive-picker-dropdown {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 1000;
        min-width: 240px;
        max-height: 400px;
        overflow-y: auto;
        background: var(--card-bg);
        border: 1px solid var(--border-color);
        border-radius: 6px;
        box-shadow: 0 8px 24px rgba(0,0,0,0.12);
        margin-top: 4px;
    }

    .ap-group {
        padding: 8px 12px 4px;
        font-size: 0.7rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--text-light);
        font-family: 'Cormorant Garamond', Georgia, serif;
    }

    .ap-item {
        padding: 8px 12px;
        font-size: 0.85rem;
        font-family: Lora, serif;
        cursor: pointer;
        color: var(--text-main);
    }

    .ap-item:hover {
        background: rgba(139, 0, 0, 0.06);
        color: var(--brand);
    }

    .ap-sub {
        padding-left: 24px;
    }

    .ap-reset {
        color: var(--text-light);
        font-style: italic;
        border-bottom: 1px solid var(--border-color);
    }
    
    #searchInput { 
        width: 100%; 
        height: 48px; 
        padding: 0 14px; 
        border: 1px solid var(--border-color); 
        border-radius: 4px; 
        font-family: 'Lora',serif; 
        font-size: .95rem; 
        background: var(--card-bg); 
        box-shadow: inset 0 1px 3px rgba(0,0,0,.04);
        transition: border-color 0.2s;
    }
    #searchInput:focus {
        outline: none;
        border-color: var(--accent);
    }
    
    #searchInput:disabled { 
        background-color: #f5f5f5; 
        cursor: not-allowed; 
    }
    
    .view-controls { 
        display: flex; 
        flex-shrink: 0; 
    }
    
    .view-controls button { 
        background: var(--card-bg); 
        border: 1px solid var(--border-color); 
        padding: 10px; 
        cursor: pointer; 
        display: flex; 
        align-items: center; 
        justify-content: center; 
        transition: background-color 0.2s; 
    }
    
    .view-controls button:hover { 
        background-color: var(--sidebar-bg); 
    }
    
    .view-controls button.active { 
        background-color: var(--brand); 
        color: #fff; 
        border-color: var(--brand); 
    }
    
    .view-controls svg { 
        width: 24px; 
        height: 24px; 
    }
    
    #view-list-btn { 
        border-radius: 4px 0 0 4px; 
        border-right: none; 
    }
    
    #view-grid-btn { 
        border-radius: 0; 
    }
    
    .zoom-controls { 
        display: none; 
    }
    
    .zoom-controls button { 
        border-left: none; 
    }
    
    .zoom-controls button:last-child { 
        border-radius: 0 8px 8px 0; 
    }
    
    #breadcrumbs-bar { 
        display: flex; 
        align-items: center; 
        justify-content: space-between; 
        padding-top: 16px; 
        flex-wrap: nowrap; 
        gap: 16px; 
        width: 100%; 
    }
    
    #breadcrumbs { 
        font-size: 0.9rem; 
        color: var(--text-light); 
        white-space: nowrap; 
        overflow-x: auto; 
        scrollbar-width: none; 
        flex: 1; 
        min-width: 0; 
    }
    
    #folderFilterInput { 
        width: 220px; 
        height: 36px; 
        padding: 0 12px; 
        border: 1px solid var(--border-color); 
        border-radius: 4px; 
        font-family: 'Lora', serif; 
        font-size: .9rem; 
        background: var(--card-bg); 
        box-shadow: var(--shadow-sm); 
        flex-shrink: 0; 
    }
    
    #breadcrumbs a { 
        color: var(--brand); 
        text-decoration: none; 
        cursor: pointer; 
    }
    
    #breadcrumbs a:hover { 
        text-decoration: underline; 
    }
    
    #breadcrumbs span:not(.separator) { 
        color: var(--text-main); 
        font-weight: 600; 
    }
    
    #breadcrumbs .separator { 
        margin: 0 8px; 
    }
    
    .search-hints {
        font-size: 0.85rem; 
        color: var(--text-light); 
        text-align: center; 
        margin-top: 12px;
    }
    
    .search-hints code {
        background-color: var(--sidebar-bg); 
        border: 1px solid var(--border-color); 
        border-radius: 4px; 
        padding: 2px 5px; 
        font-family: monospace;
    }
    
    .search-help-btn {
        width: 28px;
        height: 28px;
        border: 1px solid var(--border-color);
        border-radius: 50%;
        background: var(--card-bg);
        color: var(--text-light);
        font-family: 'Lora', serif;
        font-size: 0.85rem;
        font-weight: 700;
        cursor: pointer;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.15s;
        padding: 0;
    }
    .search-help-btn:hover {
        border-color: var(--brand);
        color: var(--brand);
    }
    
    /* Breadcrumbs: prevent overflow on long paths */
    #breadcrumbs span:not(.separator):last-child {
        display: inline-block;
        max-width: 360px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: bottom;
    }
    
    /* --- SELECT CHECKBOXES --- */
    .item-select-checkbox {
        appearance: none; 
        -webkit-appearance: none;
        width: 20px; 
        height: 20px; 
        border: 2px solid var(--border-color); 
        border-radius: 4px;
        background-color: #fff; 
        cursor: pointer; 
        flex-shrink: 0; 
        position: relative;
        transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
        margin-right: 12px; 
        z-index: 5;
    }
    
    .item-select-checkbox:checked { 
        background-color: var(--brand); 
        border-color: var(--brand); 
    }
    
    .item-select-checkbox:checked::after {
        content: ''; 
        position: absolute; 
        left: 6px; 
        top: 2px; 
        width: 5px; 
        height: 10px;
        border: solid white; 
        border-width: 0 2px 2px 0; 
        transform: rotate(45deg);
    }
    
    .list-item.selected { 
        background-color: var(--select-highlight) !important; 
    }

    /* List Items */
    #file-list.view-list .list-item {
        display: flex; 
        align-items: flex-start; 
        padding: 12px 15px; 
        border-bottom: 1px solid var(--border-color); 
        font-size: 1rem; 
        transition: background-color 0.2s;
    }
    
    #file-list.view-list .list-item:last-child {
        border-bottom: none;
    }
    
    #file-list.view-list .list-item.clickable:hover {
        background-color: #efe9de;
        box-shadow: inset 3px 0 0 var(--brand);
    }
    
    /* Visited State Styling */
    .list-item.is-visited .film-number-col,
    .list-item.is-visited .item-name,
    .list-item.is-visited .list-item-icon {
        color: var(--visited-color);
    }
    
    .list-item-icon {
        width: 24px; 
        height: 24px; 
        margin-right: 15px; 
        flex-shrink: 0; 
        color: var(--brand); 
        display: flex; 
        align-items: center; 
        justify-content: center; 
        margin-top: 4px;
    }
    
    .list-item-icon svg {
        width: 20px; 
        height: 20px;
    }
    
    .list-item-icon .flag-icon {
        width: 24px; 
        height: auto; 
        border-radius: 3px; 
        box-shadow: 0 0 2px rgba(0,0,0,0.3);
    }
    
    /* Download Row Style */
    .download-row { 
        background-color: rgba(109, 95, 81, 0.08) !important; 
        color: var(--brand); 
        font-weight: 600; 
        align-items: center !important; 
    }
    
    .download-row:hover { 
        background-color: rgba(109, 95, 81, 0.15) !important; 
    }
    
    .download-row .list-item-icon { 
        color: var(--brand); 
    }

    .back-row {
        background-color: transparent !important;
        color: var(--text-light);
        font-size: 0.85rem;
        border-bottom: 1px dashed var(--border-color) !important;
    }

    .back-row:hover {
        background-color: rgba(109, 95, 81, 0.06) !important;
        color: var(--text-main);
    }

    .list-item.list-item-group-header {
        background-color: var(--sidebar-bg); 
        font-weight: 600; 
        color: var(--text-main); 
        cursor: default; 
        padding: 14px; 
        border-top: 1px solid var(--border-color); 
        border-bottom: 2px solid var(--border-color); 
        align-items: center !important;
    }
    
    #file-list.view-list .list-item.list-item-group-header:first-child {
        border-top: none;
    }
    
    .list-item.list-item-group-header:not(:first-child) {
        margin-top: -1px;
    }
    
    .item-details-wrapper {
        display: flex; 
        align-items: flex-start; 
        flex-grow: 1; 
        gap: 16px; 
        min-width: 0;
    }
    
    .film-number-col {
        flex-basis: 120px; 
        flex-shrink: 0; 
        font-weight: 600; 
        color: var(--brand); 
        margin-top: 4px;
    }
    
    .item-number-col {
        flex-basis: 80px; 
        flex-shrink: 0; 
        color: var(--text-light); 
        font-style: italic;
    }
    
    .item-number-col div:not(:last-child) {
        margin-bottom: 5px;
    }
    
    .delo-col {
        flex: 1 1 180px; 
        min-width: 0;
    }
    
    .description-col {
        flex: 2 1 300px; 
        min-width: 0;
    }
    
    .description-col div:not(:last-child) {
        margin-bottom: 5px;
    }
    
    .item-details-wrapper.single-column-layout .film-number-col {
        flex-basis: auto; 
        flex-grow: 1; 
        color: var(--text-main); 
        font-weight: normal;
    }
    
    /* --- NEW STYLES FOR PEOPLE & INDEXING (FROM CODE 2) --- */
    .dgs-col {
        flex-basis: 110px; 
        flex-shrink: 0; 
        font-weight: 600; 
        color: var(--brand); 
        font-size: 0.9rem; 
        display: flex; 
        align-items: center; 
        gap: 6px; 
        background: rgba(0,0,0,0.03); 
        padding: 4px 8px; 
        border-radius: 4px; 
        margin-right: 8px; 
        align-self: flex-start;
    }
    .dgs-col:empty {
        display: none;
    }
    
    .dgs-col svg {
        width: 14px; 
        height: 14px; 
        opacity: 0.7;
    }
    
    .people-col {
        flex: 3 1 400px; 
        min-width: 0; 
        font-size: 0.95rem; 
        color: #444; 
        display: flex; 
        flex-direction: column; 
        gap: 8px; 
        line-height: 1.4; 
        padding-top: 2px;
    }
    
    .person-entry {
        display: flex; 
        flex-direction: column; 
        padding-bottom: 6px; 
        border-bottom: 1px dashed rgba(0,0,0,0.05);
    }
    
    .person-entry:last-child {
        border-bottom: none;
    }
    
    .person-main-row {
        display: flex; 
        align-items: baseline; 
        flex-wrap: wrap; 
        gap: 6px;
    }
    
    .person-entry .event-emoji {
        margin-right: 4px; 
        width: 18px; 
        height: 18px; 
        flex-shrink: 0; 
        display: inline-block; 
        vertical-align: text-bottom;
    }
    
    .person-entry .event-emoji svg {
        width: 100%; 
        height: 100%; 
        display: block;
    }
    
    .person-name {
        font-weight: 700; 
        color: var(--text-main);
    }
    
    .person-date {
        color: var(--text-main); 
        font-weight: 500; 
        font-size: 0.9em; 
        background-color: #f0f0f0; 
        padding: 1px 5px; 
        border-radius: 4px;
    }
    
    .person-details-row {
        font-size: 0.85em; 
        color: var(--text-light); 
        margin-left: 24px; 
        line-height: 1.4;
    }
    
    .person-meta-item:not(:last-child)::after {
        content: " • "; 
        opacity: 0.5;
    }
    
    .indexed-badge {
        margin-left: auto; 
        color: var(--success-color); 
        font-size: 0.75rem; 
        font-weight: 600; 
        display: flex; 
        align-items: center; 
        gap: 4px; 
        background: rgba(46,125,50,0.1); 
        padding: 2px 8px; 
        border-radius: 10px; 
        white-space: nowrap; 
        border: 1px solid rgba(46,125,50,0.2);
    }
    
    .indexed-badge svg {
        width: 14px; 
        height: 14px; 
        flex-shrink: 0;
    }

    .list-item-right-adornment {
        margin-left: auto; 
        padding-left: 15px; 
        display: flex; 
        align-items: center; 
        flex-shrink: 0; 
        gap: 12px; 
        align-self: center;
    }
    
    .search-result-path {
        font-size: 12px; 
        color: var(--text-light); 
        text-align: right;
    }
    
    #file-list.view-grid {
        display: grid; 
        grid-template-columns: repeat(auto-fill, minmax(var(--grid-item-size), 1fr)); 
        gap: 16px; 
        padding: 16px;
    }
    #file-list.view-grid #nav-tabs,
    #file-list.view-grid .download-row,
    #file-list.view-grid .back-row,
    #file-list.view-grid #bookmarks-container,
    #file-list.view-grid #user-folders-container,
    #file-list.view-grid #user-folders-section,
    #file-list.view-grid .message {
        grid-column: 1 / -1;
    }
    
    #file-list.view-grid .list-item {
        display: flex; 
        flex-direction: column; 
        text-align: center; 
        border: 1px solid transparent; 
        border-radius: 8px; 
        transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s; 
        padding: 8px; 
        position: relative; 
        align-items: center;
    }
    
    #file-list.view-grid .list-item:hover {
        background-color: var(--sidebar-bg); 
        border-color: var(--accent);
    }
    
    #file-list.view-grid .thumbnail-container {
        width: 100%; 
        padding-top: 75%; 
        position: relative; 
        background-color: var(--sidebar-bg); 
        border: 1px solid var(--border-color); 
        border-radius: 6px; 
        display: flex; 
        align-items: center; 
        justify-content: center; 
        margin-bottom: 8px; 
        overflow: hidden;
    }
    
    #file-list.view-grid .thumbnail-container img, 
    #file-list.view-grid .thumbnail-container svg {
        position: absolute; 
        top: 0; 
        left: 0; 
        width: 100%; 
        height: 100%; 
        object-fit: cover; 
        transition: opacity 0.4s ease-in-out;
    }
    
    #file-list.view-grid .thumbnail-container img.lazy-load {
        opacity: 0;
    }
    
    #file-list.view-grid .thumbnail-container svg {
        padding: 20%; 
        color: var(--text-light);
    }
    
    #file-list.view-grid .item-name {
        font-size: 0.85rem; 
        line-height: 1.3; 
        word-break: break-word;
    }
    
    #file-list.view-grid .item-select-checkbox {
        position: absolute; 
        top: 12px; 
        left: 12px; 
        margin: 0;
        background-color: rgba(255,255,255,0.9);
        box-shadow: var(--shadow-sm);
    }
    
    .list-item.clickable {
        cursor: pointer;
    }
    
    /* mark styles consolidated below (line ~3518) */
    
    .message {
        text-align: center; 
        padding: 40px 20px; 
        color: var(--text-light);
    }
    
    /* Progress Bar */
    #progress-container {
        display: flex; 
        flex-direction: column; 
        justify-content: center; 
        align-items: center; 
        gap: 16px; 
        padding: 40px;
    }
    
    #progress-label {
        font-size: 1rem; 
        color: var(--text-main); 
        font-weight: 600;
    }
    
    #progress-bar-outer {
        width: 80%; 
        max-width: 400px; 
        height: 16px; 
        background-color: #e0e0e0; 
        border-radius: 8px; 
        overflow: hidden; 
        border: 1px solid var(--border-color);
    }
    
    #progress-bar-inner {
        width: 0%; 
        height: 100%; 
        background: var(--brand);
        border-radius: 8px; 
        transition: width 0.3s ease-out;
    }
    
    #progress-bar-inner.yandex-loading {
        background-color: #ffcc00;
    }
    
    #progress-details {
        font-size: 0.85rem; 
        color: var(--text-light); 
        min-height: 1.2em;
    }
    
    /* Danger/Cancel Button */
    .danger-btn {
        background-color: #fff; 
        border: 1px solid var(--danger-color); 
        color: var(--danger-color);
        padding: 8px 24px; 
        border-radius: 6px; 
        cursor: pointer; 
        font-family: 'Lora', serif; 
        font-size: 0.9rem;
        transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s; 
        margin-top: 8px;
    }
    
    .danger-btn:hover { 
        background-color: var(--danger-color); 
        color: #fff; 
    }
    
    #cancel-download-btn { 
        display: none; 
    }

    /* --- STICKY SELECTION BAR --- */
    #selection-bar {
        position: fixed; 
        bottom: -100px; 
        left: 0; 
        width: 100%;
        background: var(--brand);
        color: #fff;
        display: flex; 
        align-items: center; 
        justify-content: space-between;
        padding: 12px 24px; 
        box-shadow: 0 -4px 12px rgba(0,0,0,0.2);
        z-index: 1000; 
        transition: bottom 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
    
    #selection-bar.visible { 
        bottom: 0; 
    }
    
    .selection-info { 
        font-weight: 600; 
        display: flex; 
        align-items: center; 
        gap: 12px; 
    }
    
    .selection-actions { 
        display: flex; 
        gap: 12px; 
    }
    
    .selection-btn {
        background: rgba(255,255,255,0.2); 
        border: 1px solid rgba(255,255,255,0.4);
        color: #fff; 
        padding: 8px 16px; 
        border-radius: 6px; 
        cursor: pointer;
        font-family: 'Lora', serif; 
        font-size: 0.9rem; 
        transition: background 0.2s;
        display: flex; 
        align-items: center; 
        gap: 6px;
    }
    
    .selection-btn:hover { 
        background: rgba(255,255,255,0.3); 
    }
    
    .selection-btn.download-btn { 
        background: var(--card-bg); 
        color: var(--brand); 
        border-color: #fff; 
        font-weight: bold; 
    }
    
    .selection-btn.download-btn:hover { 
        background: #f0f0f0; 
    }

    /* --- VIEWER STYLES (ENHANCED FOR SIDEBAR) --- */
    /* ======= DUAL-PANE LAYOUT ======= */
    body.dual-mode { overflow: hidden; padding: 0; }
    body.dual-mode .book-container { max-width: 100%; margin: 0; display: flex; flex-direction: row; height: 100vh; overflow: hidden; }
    body.dual-mode .auth-bar { position: absolute !important; left: -9999px !important; top: -9999px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
    body.dual-mode .main-header { display: none !important; }
    body.dual-mode .page-container { display: none !important; }
    body.dual-mode #selection-bar { display: none !important; }
    
    /* Hide viewer sidebar in dual-mode */
    body.dual-mode .viewer-sidebar {
        display: none !important;
    }
    body.dual-mode #toggle-sidebar-btn {
        display: none !important;
    }
    body.dual-mode .sidebar-toggle-btn {
        display: none !important;
    }
    
    /* Viewer thumbnails in dual-mode */
    body.dual-mode .viewer-thumbnails {
        max-width: 100%;
    }
    
    #react-left-panel {
        width: 420px;
        min-width: 320px;
        max-width: 600px;
        flex-shrink: 0;
        display: none;
        flex-direction: column;
        height: 100vh;
        overflow: hidden;
        background: var(--paper-bg);
        background-image: var(--paper-texture-svg);
        border-right: 1px solid var(--border-color);
    }
    body.dual-mode #react-left-panel { display: flex; }
    
    #dual-right-pane {
        flex: 1;
        display: none;
        flex-direction: column;
        height: 100vh;
        background: #1a1a1e;
        overflow: hidden;
        position: relative;
    }
    body.dual-mode #dual-right-pane { display: flex; }
    
    #dual-viewer-slot {
        flex: 1;
        display: flex;
        overflow: hidden;
        position: relative;
    }
    
    #dual-empty-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex: 1;
        background: var(--paper-bg);
        background-image: var(--paper-texture-svg);
        font-family: 'Playfair Display', serif;
    }
    #dual-empty-state .empty-icon { font-size: 64px; opacity: 0.3; margin-bottom: 20px; }
    #dual-empty-state .empty-title { font-size: 18px; font-weight: 700; color: #8b6914; margin-bottom: 8px; }
    #dual-empty-state .empty-hint { font-size: 13px; color: #999; text-align: center; line-height: 1.6; }
    
    /* Hide empty state when viewer is visible */
    body.dual-mode #dual-viewer-slot #dual-empty-state { display: flex; }
    body.dual-mode #dual-viewer-slot #image-viewer.visible ~ #dual-empty-state { display: none; }
    body.dual-mode #dual-viewer-slot:has(#image-viewer.visible) #dual-empty-state { display: none; }
    #ann-toolbar { display: none !important; }
    body.dual-mode #ann-toolbar,
    body.has-sidebar #ann-toolbar { display: flex !important; }
    
    /* Resizer */
    #dual-resizer {
        width: 5px;
        cursor: col-resize;
        background: var(--border-color);
        transition: background 0.2s;
        flex-shrink: 0;
        display: none;
    }
    body.dual-mode #dual-resizer { display: block; }
    #dual-resizer:hover, #dual-resizer.active { background: var(--brand); }
    
    /* Right pane toolbar */
    .dual-toolbar {
        display: none !important;
    }
    body.dual-mode #dual-right-pane {
        /* Right pane is just the viewer, no toolbar */
    }
    
    /* In dual-mode, hide viewer top bar for more space */
    body.dual-mode .viewer-header {
        display: flex !important;
        background: #f8f6f2 !important;
        color: #333 !important;
        text-shadow: none !important;
        padding: 6px 12px !important;
        font-size: 0.8rem !important;
        border-bottom: 1px solid #e0dcd5 !important;
        justify-content: flex-start !important;
        gap: 8px;
        align-items: center;
    }
    body.dual-mode .viewer-header .current-image-name {
        color: #333 !important;
        font-weight: 600;
    }
    
    /* In dual-mode, hide viewer bottom bar (thumbnails + controls) — controls move to left panel */
    body.dual-mode .viewer-footer-controls {
        padding: 4px 8px;
    }
    .dual-toolbar .nav-group { display: flex; align-items: center; gap: 4px; }
    .dual-toolbar button {
        background: none; border: 1px solid #444; color: #ccc; border-radius: 4px;
        cursor: pointer; padding: 4px 8px; font-size: 0.85rem; font-family: 'Lora', serif;
        transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s; display: flex; align-items: center; gap: 4px;
    }
    .dual-toolbar button:hover { background: #333; color: #fff; }
    .dual-toolbar button:disabled { opacity: 0.3; cursor: default; }
    .dual-toolbar button svg { width: 18px; height: 18px; }
    .dual-toolbar .page-info { color: #999; font-size: 0.85rem; display: flex; align-items: center; gap: 4px; }
    .dual-toolbar .page-info input {
        width: 50px; background: #333; border: 1px solid #555; color: #fff;
        border-radius: 4px; text-align: center; font-family: 'Lora', serif; font-size: 0.85rem; padding: 3px;
    }
    .dual-toolbar .file-title { color: #eee; font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 400px; }
    
    .dual-img-container {
        flex: 1; display: flex; align-items: center; justify-content: center;
        overflow: hidden; position: relative;
    }
    .dual-img-container img {
        max-width: 100%; max-height: 100%; object-fit: contain;
        transition: transform 0.2s ease-out; transform-origin: center center;
        will-change: transform;
    }
    .dual-img-container img.is-zoomed { cursor: grab; }
    .dual-img-container img.is-zoomed:active { cursor: grabbing; }
    .dual-loader { 
        position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
        width: 40px; height: 40px; border: 3px solid #333; border-top-color: var(--brand);
        border-radius: 50%; animation: dualspin 0.8s linear infinite;
    }
    @keyframes dualspin { to { transform: translate(-50%,-50%) rotate(360deg); } }
    
    /* Card styles (from yarchiver) */
    @keyframes cardAppear { 0% { opacity:0; transform:translateY(-10px); } 100% { opacity:1; transform:translateY(0); } }
    .doc-type-badge {
        display: inline-flex; align-items: center; gap: 4px;
        padding: 2px 8px; border-radius: 4px; font-size: 9px; font-weight: 700;
        text-transform: uppercase; letter-spacing: 0.5px;
    }
    .doc-type-archive { background: #f0e8d8; color: #8b6914; border: 1px solid #d4c4a8; }
    .doc-type-image { background: #e4e4ee; color: #4a4a6a; border: 1px solid #b8b8d4; }
    .doc-type-folder { background: #e0ece0; color: #2d5a2d; border: 1px solid #b8d4b8; }
    .doc-type-annotation { background: #fff0d8; color: #e65100; border: 1px solid #ffcc80; }
    
    .bg-texture { background-image: var(--paper-texture-svg); }
    .font-display { font-family: 'Playfair Display', serif; }
    
    /* Mobile: hide dual pane, show normal */
    @media (max-width: 768px) {
        body.dual-mode { overflow: hidden; padding: 0; padding-bottom: 0; }
        body.dual-mode .book-container { flex-direction: column; height: 100vh; max-width: 100%; margin: 0; overflow: hidden; }
        body.dual-mode .main-header { display: none !important; }
        body.dual-mode .auth-bar { position: absolute !important; left: -9999px !important; top: -9999px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
        body.dual-mode .page-container { display: none !important; }
        body.dual-mode .archival-search { display: none !important; }
        /* On mobile dual-mode: show ONLY react panel full-width */
        body.dual-mode #react-left-panel { 
            display: flex !important; 
            width: 100% !important; 
            min-width: 100% !important;
            height: 100vh !important;
            position: fixed !important;
            inset: 0 !important;
            z-index: 100 !important;
            background: var(--paper-bg) !important;
        }
        body.dual-mode #dual-resizer { display: none !important; }
        body.dual-mode #dual-right-pane { display: none !important; }
        
        /* Mobile: hide original viewer in dual-mode */
        body.dual-mode #image-viewer {
            display: none !important;
        }
    }
    
    /* Mobile sheet (yarchiver-style bottom sheet) */
    .mobile-sheet-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.5);
        z-index: 9998;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s;
    }
    .mobile-sheet-backdrop.open {
        opacity: 1;
        pointer-events: auto;
    }
    .mobile-sheet {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 85vh;
        max-height: calc(100dvh - 20px);
        background: var(--paper-bg);
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        box-shadow: 0 -10px 40px rgba(0,0,0,0.3);
        z-index: 9999;
        transform: translateY(100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    .mobile-sheet.open {
        transform: translateY(0);
    }
    .sheet-handle {
        width: 100%;
        padding: 10px 0 6px;
        display: flex;
        justify-content: center;
        cursor: grab;
        touch-action: none;
        background: #111;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        flex-shrink: 0;
    }
    .sheet-handle-bar {
        width: 40px;
        height: 5px;
        background: rgba(255,255,255,0.3);
        border-radius: 3px;
    }
    .sheet-header-mobile {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 16px;
        background: var(--paper-bg);
        border-bottom: 1px solid #e0dcd3;
        flex-shrink: 0;
    }
    .sheet-header-mobile .sheet-path {
        font-family: 'Lora', serif;
        font-size: 11px;
        color: #aaa;
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .sheet-header-mobile .sheet-actions {
        display: flex;
        gap: 6px;
        flex-shrink: 0;
    }
    .sheet-header-mobile .sheet-actions button {
        background: none;
        border: 1px solid #444;
        color: #ccc;
        width: 32px;
        height: 32px;
        border-radius: 6px;
        font-size: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }
    .sheet-header-mobile .sheet-actions button:active {
        background: #333;
    }
    /* .sheet-image-area old definition removed — see active definition below */
    .sheet-nav-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 44px;
        height: 64px;
        background: rgba(0,0,0,0.15);
        border: none;
        border-radius: 8px;
        color: #333;
        font-size: 24px;
        cursor: pointer;
        z-index: 10;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .sheet-nav-btn:active { background: rgba(0,0,0,0.25); }
    .sheet-nav-prev { left: 8px; }
    .sheet-nav-next { right: 8px; }
    .sheet-counter {
        position: absolute;
        bottom: 12px;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(0,0,0,0.5);
        color: #fff;
        font-size: 11px;
        padding: 4px 12px;
        border-radius: 12px;
        font-family: 'Lora', serif;
    }
    .sheet-controls-bar {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 8px 12px;
        background: var(--card-bg);
        border-bottom: 1px solid #e0e0e0;
        flex-shrink: 0;
    }
    .sheet-nav-overlay {
        position: absolute;
        bottom: 80px;
        left: 0;
        right: 0;
        display: flex;
        justify-content: space-between;
        padding: 0 8px;
        pointer-events: none;
        z-index: 10;
    }
    .sheet-nav-overlay .sheet-nav-btn {
        pointer-events: auto;
        position: static;
        transform: none;
    }
    .sheet-image-area {
        flex: 1;
        overflow: auto;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        position: relative;
        background: #e8e4dc;
        background-image: var(--paper-texture-svg);
        -webkit-overflow-scrolling: touch;
        padding: 8px;
    }
    .sheet-image-area img {
        display: block;
    }

    #image-viewer {
        position: fixed; 
        inset: 0; 
        background-color: rgba(0,0,0,0.95); 
        z-index: 9999; 
        display: flex; 
        flex-direction: column; 
        justify-content: space-between; 
        opacity: 0; 
        visibility: hidden; 
        transition: opacity 0.3s, visibility 0.3s; 
        overflow: hidden;
    }
    
    #image-viewer.visible {
        opacity: 1; 
        visibility: visible;
    }
    
    /* DUAL-MODE: image-viewer becomes inline in right pane */
    @media (min-width: 769px) {
        body.dual-mode #image-viewer {
            position: relative !important;
            inset: auto !important;
            z-index: 1 !important;
            flex: 1;
            opacity: 0;
            visibility: hidden;
            display: flex !important;
            transition: none !important;
            background-color: rgba(0,0,0,0.95);
            width: 100%;
            height: 100%;
        }
        body.dual-mode #image-viewer.visible {
            opacity: 1 !important;
            visibility: visible !important;
        }
    }
    
    body.dual-mode #image-viewer .close-btn {
        /* Keep visible in dual-mode header - acts as exit dual */
    }
    #image-viewer .toggle-sidebar-btn,
    #image-viewer #toggle-sidebar-btn,
    #image-viewer .sidebar-toggle-btn {
        display: none !important;
    }
    
    /* Fav and annotation buttons in viewer header bar */
    .fav-btn-viewer {
        position: static;
        background: none;
        border: 1px solid var(--border-color);
        color: var(--brand);
        font-size: 16px;
        width: 28px;
        height: 28px;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        padding: 0;
        box-shadow: none;
        flex-shrink: 0;
    }
    .fav-btn-viewer:hover {
        background: #fbe8e8;
    }
    
    body.dual-mode .ann-toolbar,
    body.has-sidebar .ann-toolbar {
        position: static;
        background: none;
        border: none;
        padding: 0;
        margin: 0;
        box-shadow: none;
        gap: 4px;
        align-items: center;
        flex-shrink: 0;
    }
    #ann-draw-btn {
        background: none !important;
        border: 1px solid var(--border-color) !important;
        color: #555 !important;
        font-size: 11px !important;
        padding: 4px 8px !important;
        border-radius: 4px !important;
        cursor: pointer;
        font-family: 'Lora', serif;
    }
    #ann-draw-btn:hover {
        background: #fff3e0 !important;
        border-color: #ff9800 !important;
    }
    .ann-count {
        font-size: 10px !important;
        color: #999 !important;
    }
    
    /* Collection button in viewer header */
    .viewer-col-btn {
        background: rgba(0,0,0,0.5) !important;
        border: 1px solid rgba(255,255,255,0.3) !important;
        color: #fff !important;
        font-size: 12px !important;
        height: 32px !important;
        width: auto !important;
        border-radius: 6px !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        padding: 0 10px !important;
        gap: 5px;
        flex-shrink: 0;
        transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
        font-family: 'Lora', serif;
    }
    .viewer-col-btn:hover {
        background: rgba(139,0,0,0.7) !important;
        border-color: rgba(255,255,255,0.5) !important;
    }
    .viewer-col-menu {
        position: static !important;
        display: flex !important;
        align-items: center;
        flex-shrink: 0;
    }
    .viewer-col-dropdown {
        position: absolute;
        top: 100%;
        right: 0;
        margin-top: 4px;
        width: 240px;
        background: var(--card-bg);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        box-shadow: var(--shadow-lg);
        z-index: 100;
        max-height: 300px;
        overflow-y: auto;
    }
    .viewer-col-dropdown .col-dd-item {
        padding: 10px 14px;
        cursor: pointer;
        border-bottom: 1px solid #f0ece4;
        font-size: 13px;
        font-family: 'Lora', serif;
        color: #333;
        transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
    }
    .viewer-col-dropdown .col-dd-item:last-child { border-bottom: none; }
    .viewer-col-dropdown .col-dd-item:hover { background: #fef6e6; color: var(--brand); }
    .viewer-col-dropdown .col-dd-item.col-dd-added {
        color: #4caf50;
        background: #f0fff0;
        pointer-events: none;
    }
    .viewer-col-dropdown .col-dd-empty {
        padding: 16px;
        text-align: center;
        color: #999;
        font-size: 12px;
    }
    
    body.dual-mode #image-viewer .viewer-header .viewer-title {
        /* shown in dual-mode */
    }
    
    #image-viewer .viewer-header {
        color: #333; 
        text-shadow: none; 
        text-align: left; 
        padding: 6px 12px; 
        width: 100%; 
        flex-shrink: 0; 
        position: relative; 
        z-index: 10; 
        background: #f8f6f2;
        border-bottom: 1px solid #e0dcd5;
        font-size: 0.8rem; 
        white-space: nowrap; 
        overflow: hidden; 
        text-overflow: ellipsis; 
        display: flex; 
        align-items: center; 
        justify-content: flex-start;
        gap: 8px;
    }
    
    .viewer-header .current-image-name {
        font-weight: 600; 
        color: #333;
    }
    
    .viewer-body {
        display: flex; 
        flex-grow: 1; 
        overflow: hidden; 
        position: relative; 
        width: 100%; 
        height: 100%;
    }

    /* Image Container */
    #image-viewer .viewer-image-container {
        flex-grow: 1; 
        position: relative; 
        display: flex; 
        align-items: center; 
        justify-content: center; 
        overflow: hidden; 
        padding: 20px;
    }
    
    #image-viewer img {
        max-width: 100%; 
        max-height: 100%; 
        object-fit: contain; 
        box-shadow: 0 10px 40px rgba(0,0,0,0.5); 
        border-radius: 2px; 
        transition: transform 0.2s ease-out; 
        transform-origin: center center; 
        will-change: transform; 
        backface-visibility: hidden;
    }
    
    #image-viewer img.is-zoomed {
        cursor: grab;
    }
    
    #image-viewer img.is-zoomed:active {
        cursor: grabbing;
    }
    
    #image-viewer .close-btn, 
    #image-viewer .sidebar-toggle-btn {
        position: absolute; 
        top: 0; 
        height: 50px; 
        width: 50px; 
        background: none; 
        border: none; 
        color: white; 
        cursor: pointer; 
        z-index: 20; 
        display: flex; 
        align-items: center; 
        justify-content: center; 
        transition: background-color 0.2s;
    }
    
    #image-viewer .close-btn {
        right: 0; 
        font-size: 2.5rem; 
        line-height: 1;
    }
    
    #image-viewer .sidebar-toggle-btn {
        right: 50px;
    }
    
    #image-viewer .close-btn:hover, 
    #image-viewer .sidebar-toggle-btn:hover {
        background-color: rgba(255,255,255,0.1);
    }
    
    #image-viewer .sidebar-toggle-btn svg {
        width: 24px; 
        height: 24px; 
        fill: white;
    }

    /* --- SIDEBAR STYLES --- */
    .viewer-sidebar {
        width: 380px; 
        background-color: var(--paper-bg);
        background-image: var(--paper-texture-svg); 
        border-left: 1px solid #444; 
        display: flex; 
        flex-direction: column; 
        transition: margin-right 0.3s ease; 
        flex-shrink: 0; 
        z-index: 15;
    }
    
    .viewer-sidebar.collapsed {
        margin-right: -380px; 
        display: none;
    }
    
    .sidebar-content {
        flex-grow: 1; 
        overflow-y: auto; 
        padding: 16px; 
        color: #eee; 
        scrollbar-width: thin; 
        scrollbar-color: #555 #222;
    }
    
    .sidebar-content::-webkit-scrollbar {
        width: 8px;
    }
    
    .sidebar-content::-webkit-scrollbar-track {
        background: #222;
    }
    
    .sidebar-content::-webkit-scrollbar-thumb {
        background-color: #555; 
        border-radius: 4px;
    }
    
    .sidebar-title {
        font-family: 'Playfair Display', serif;
        font-size: 0.8rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        color: var(--accent, #8b0000);
        padding: 14px 16px 8px;
        border-bottom: 1px solid #e8e2d9;
        margin-bottom: 8px;
    }
    
    .sidebar-message {
        padding: 20px 16px;
        color: #a09890;
        font-size: 0.85rem;
        text-align: center;
        font-style: italic;
    }
    
    .viewer-sidebar .person-entry {
        border-bottom: 1px solid #e8e2d9; 
        padding-bottom: 8px; 
        margin-bottom: 8px;
    }
    
    .viewer-sidebar .person-entry:last-child {
        border-bottom: none;
    }
    
    .viewer-sidebar .person-name {
        color: var(--ink-color, #2c2c2c);
        font-weight: 700;
    }
    
    .viewer-sidebar .person-date {
        background-color: #333; 
        color: #ddd;
    }
    
    .viewer-sidebar .person-details-row {
        color: #5c534a;
        font-size: 0.82rem;
        line-height: 1.5;
    }
    
    .viewer-sidebar .person-entry .event-emoji {
        display: inline-block;
        margin-right: 4px;
        font-size: 1rem;
    }

    /* --- BOTTOM PANEL GROUP --- */
    .viewer-bottom-panel {
        width: 100%;
        flex-shrink: 0;
        z-index: 20;
        position: relative;
        background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.7) 100%);
        display: flex;
        flex-direction: column;
        transition: transform 0.3s ease;
    }
    
    /* Toggle Button (Show/Hide) */
    .toggle-thumbs-btn {
        position: absolute;
        top: -24px;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(0,0,0,0.7);
        border: 1px solid rgba(255,255,255,0.2);
        border-bottom: none;
        color: #fff;
        width: 40px;
        height: 24px;
        border-radius: 8px 8px 0 0;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 25;
        transition: background 0.2s;
    }
    
    .toggle-thumbs-btn:hover { 
        background: rgba(0,0,0,0.9); 
    }
    
    .toggle-thumbs-btn svg { 
        width: 16px; 
        height: 16px; 
        transition: transform 0.3s; 
    }

    /* Thumbnail Strip */
    .viewer-thumbnails {
        width: 100%;
        height: 90px;
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 0 16px;
        overflow-x: auto;
        flex-shrink: 0;
        scrollbar-width: thin;
        scrollbar-color: rgba(255,255,255,0.3) transparent;
        transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
    }
    
    .viewer-thumbnails::-webkit-scrollbar { 
        height: 6px; 
    }
    
    .viewer-thumbnails::-webkit-scrollbar-track { 
        background: transparent; 
    }
    
    .viewer-thumbnails::-webkit-scrollbar-thumb { 
        background-color: rgba(255,255,255,0.3); 
        border-radius: 3px; 
    }

    .viewer-thumb-item {
        height: 70px;
        width: 100px; /* FIXED WIDTH FOR SCROLL PERFORMANCE */
        object-fit: cover;
        border-radius: 4px;
        cursor: pointer;
        opacity: 0.5;
        border: 2px solid transparent;
        transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
        flex-shrink: 0;
        background-color: rgba(255,255,255,0.1); /* PLACEHOLDER BG */
    }
    
    .viewer-thumb-item:hover { 
        opacity: 0.8; 
    }
    
    .viewer-thumb-item.active { 
        opacity: 1; 
        border-color: var(--accent); 
        transform: scale(1.05); 
        box-shadow: 0 0 12px rgba(139,0,0,0.4); 
    }

    .viewer-footer {
        display: flex; 
        justify-content: center; 
        align-items: center; 
        gap: 8px; 
        font-size: 1rem;
        color: #fff; 
        text-shadow: 0 1px 3px rgba(0,0,0,0.5);
        padding: 3px 10px; 
        width: 100%; 
        flex-shrink: 0;
    }
    
    .viewer-footer .page-jump-input {
        width: 60px; 
        height: 30px; 
        border: 1px solid #555; 
        background: #222; 
        color: #fff; 
        border-radius: 6px; 
        text-align: center; 
        font-family:'Lora',serif; 
        font-size: 1rem; 
        -moz-appearance: textfield;
    }
    
    .viewer-footer button {
        background: none; 
        border: none; 
        color: #fff; 
        cursor: pointer; 
        padding: 5px;
    }
    
    .viewer-footer button svg {
        width: 22px; 
        height: 22px;
    }
    
    /* --- Hidden State Styles (Enhanced with !important) --- */
    #image-viewer.thumbs-hidden .viewer-thumbnails {
        height: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        opacity: 0;
        pointer-events: none;
    }
    
    #image-viewer.thumbs-hidden .toggle-thumbs-btn svg {
        transform: rotate(180deg);
    }
    
    .nav-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background-color: rgba(0,0,0,0.3);
        border: 1px solid rgba(255,255,255,0.2);
        color: white;
        font-size: 3rem;
        font-weight: 100;
        width: 50px;
        height: 80px;
        border-radius: 8px;
        cursor: pointer;
        z-index: 100; 
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background-color 0.2s;
    }
    
    .nav-btn:hover {
        background-color: rgba(0,0,0,0.5);
    }
    
    .nav-btn[hidden] {
        display: none;
    }
    
    .prev-btn { 
        left: 20px; 
    }
    
    .next-btn { 
        right: 20px; 
    }

    #pagination-controls {
        display: none; 
        justify-content: center; 
        align-items: center; 
        gap: 16px; 
        margin-top: 20px; 
        font-size: 0.95rem;
    }
    
    #pagination-controls button {
        background: var(--card-bg); 
        border: 1px solid var(--border-color); 
        border-radius: 8px; 
        padding: 8px 16px; 
        cursor: pointer; 
        font-family: 'Lora', serif;
    }
    
    #pagination-controls button:disabled {
        opacity: 0.5; 
        cursor: not-allowed;
    }
    
    .page-indicator-text {
        display: flex; 
        align-items: center; 
        gap: 8px;
    }
    
    #page-jump-input {
        width: 50px; 
        height: 34px; 
        text-align: center; 
        border: 1px solid var(--border-color); 
        border-radius: 6px; 
        font-family: 'Lora', serif; 
        font-size: 0.9rem; 
        -moz-appearance: textfield;
    }

    #search-scope-container {
        flex-shrink: 0;
    }
    
    #search-scope-container:empty {
        display: none;
    }
    
    .search-scope-tag {
        display: flex; 
        align-items: center; 
        background-color: var(--sidebar-bg); 
        border: 1px solid var(--border-color); 
        border-radius: 10px; 
        height: 48px; 
        padding: 0 12px; 
        font-size: 0.9rem; 
        color: var(--text-main);
    }
    
    .search-scope-tag .close-scope-btn {
        cursor: pointer; 
        margin-left: 8px; 
        background: none; 
        border: none; 
        font-size: 1.5rem; 
        line-height: 1; 
        color: var(--text-light); 
        padding: 0 4px;
    }
    
    .search-scope-tag .close-scope-btn:hover {
        color: var(--text-main);
    }

    .hidden {
        display: none !important;
    }
    
    #file-list.is-loading > *:not(#list-loader) {
        opacity: 0.6; 
        pointer-events: none; 
        transition: opacity 0.2s;
    }
    
    #list-loader {
        position: absolute; 
        top: 45%; 
        left: 50%; 
        transform: translate(-50%, -50%); 
        width: 40px; 
        height: 40px; 
        border: 4px solid var(--border-color); 
        border-top-color: var(--brand); 
        border-radius: 50%; 
        animation: spin 1s linear infinite; 
        z-index: 10;
    }
    
    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
    
    .file-count-badge {
        display: inline-flex; 
        align-items: center; 
        font-size: 0.75rem; 
        font-weight: 600; 
        padding: 2px 6px; 
        border-radius: 6px; 
        white-space: nowrap;
    }
    
    .file-count-badge svg {
        width: 0.8em; 
        height: 0.8em; 
        margin-right: 4px;
    }
    
    #file-list.view-list .file-count-badge {
        background-color: var(--sidebar-bg); 
        color: var(--text-light); 
        border: 1px solid var(--border-color); 
        flex-shrink: 0;
    }
    
    #file-list.view-grid .file-count-badge {
        position: absolute; 
        top: 6px; 
        right: 6px; 
        z-index: 2; 
        background-color: rgba(45,40,35,0.6); 
        color: #fff; 
        border: 1px solid rgba(255,255,255,0.2); 
        backdrop-filter: blur(2px); 
        box-shadow: var(--shadow-sm);
    }
    
    /* --- NEW HORIZONTAL VIEWER LOADER --- */
    .viewer-loader-container {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 50;
        display: none;
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }
    
    .viewer-loader-paper {
        width: 36px;
        height: 45px;
        border: 3px solid var(--card-bg);
        animation: flipPaper 1.5s infinite ease-in-out;
    }
    
    @keyframes flipPaper {
        0% { transform: perspective(120px) rotateX(0deg); }
        50% { transform: perspective(120px) rotateX(-180.1deg); }
        100% { transform: perspective(120px) rotateX(-180deg); }
    }
    
    .viewer-loader-text {
        font-size: 12px;
        color: rgba(255,255,255,0.6);
        font-family: 'Lora', serif;
    }
    
    /* === FAVORITES === */
    /* .fav-btn-viewer overlay styles removed — button is display:none in HTML */
    /* Active style kept for header context */
    .fav-btn-viewer.active { color: #ff3333; }
    .fav-filter-btn {
        background: var(--card-bg);
        border: 1px solid var(--border-color);
        border-radius: 4px;
        padding: 0 12px;
        height: 48px;
        cursor: pointer;
        font-family: 'Lora', serif;
        font-size: 0.9rem;
        display: flex;
        align-items: center;
        gap: 6px;
        white-space: nowrap;
        transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
        color: var(--text-light);
        flex-shrink: 0;
    }
    .fav-filter-btn:hover { border-color: var(--brand); }
    .fav-filter-btn.active { background: #fbe8e8; border-color: var(--accent); color: var(--accent); }
    .fav-card {
        animation: fadeIn 0.2s ease;
        display: flex;
        gap: 16px;
        padding: 14px 16px;
        border-bottom: 1px solid var(--border-color);
        cursor: pointer;
        transition: background 0.15s;
        position: relative;
    }
    .fav-card:hover { background: var(--sidebar-bg); }
    .fav-card-thumb {
        width: 120px;
        height: 90px;
        flex-shrink: 0;
        border-radius: 3px;
        overflow: hidden;
        background: var(--sidebar-bg);
        border: 1px solid var(--border-color);
    }
    .fav-card-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .fav-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
    .fav-card-title { font-weight: 600; color: var(--text-main); font-size: 0.95rem; }
    .fav-card-path { font-size: 0.8rem; color: var(--text-light); }
    .fav-card-date { font-size: 0.75rem; color: var(--text-light); opacity: 0.7; margin-top: auto; }
    .fav-card-type {
        font-size: 0.7rem;
        padding: 2px 8px;
        border-radius: 10px;
        display: inline-block;
        margin-bottom: 2px;
    }
    .fav-card-type.folder {
        background: rgba(109,95,81,0.1);
        color: var(--brand);
    }
    .fav-card-type.image {
        background: rgba(76,175,80,0.08);
        color: var(--success-color);
    }
    .fav-card-thumb.folder-thumb {
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--sidebar-bg);
    }
    .fav-card-thumb.folder-thumb svg {
        width: 40px;
        height: 40px;
        color: var(--brand);
    }
    .fav-folder-btn {
        background: none;
        border: 1px solid var(--border-color);
        border-radius: 6px;
        padding: 4px 10px;
        cursor: pointer;
        font-family: 'Lora', serif;
        font-size: 0.8rem;
        color: var(--text-light);
        transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
        white-space: nowrap;
        display: flex;
        align-items: center;
        gap: 4px;
    }
    .fav-folder-btn:hover { border-color: var(--brand); color: var(--brand); }
    .fav-folder-btn.active { color: #e53935; border-color: #e53935; }
    .bookmark-folder-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: none; border-radius: 4px; background: none; cursor: pointer; color: #ccc; padding: 0; transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s; margin-right: 2px; }
    .bookmark-folder-btn:hover { color: #d4a017; }
    .bookmark-folder-btn.active { color: #d4a017; }
    .ann-edit-btn {
        position: absolute;
        top: -8px;
        right: 12px;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: #e8ddb8;
        color: #5a4a20;
        border: 1px solid #c9b97a;
        font-size: 10px;
        cursor: pointer;
        display: none;
        align-items: center;
        justify-content: center;
    }
    .annotation-rect:hover .ann-edit-btn { display: flex; }
    .fav-card-remove {
        position: absolute;
        top: 8px;
        right: 8px;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        border: none;
        background: rgba(0,0,0,0.05);
        cursor: pointer;
        font-size: 16px;
        color: #e53935;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.2s;
    }
    .fav-card-remove:hover { background: rgba(229,57,53,0.1); }

    /* === ANNOTATIONS === */
    .annotation-layer {
        position: absolute;
        z-index: 30;
        pointer-events: none;
        transform-origin: center center;
    }
    .annotation-layer.drawing { pointer-events: auto; cursor: crosshair; }
    .annotation-rect {
        position: absolute;
        border: 1.5px solid #c9b97a;
        background: rgba(253,248,230,0.12);
        cursor: pointer;
        pointer-events: auto;
        border-radius: 2px;
        box-shadow: 0 0 0 1px rgba(139,105,20,0.1);
    }
    .annotation-rect:hover { background: rgba(253,248,230,0.25); border-color: #a08840; }
    .annotation-rect .ann-label {
        position: absolute;
        top: 100%;
        left: -1px;
        background: #fdf8e6;
        background-image: linear-gradient(135deg, #fdf8e6 0%, #f5edd0 100%);
        color: #5a4a20;
        font-size: 11px;
        padding: 3px 10px 4px;
        border-radius: 0 0 5px 5px;
        white-space: normal;
        max-width: 280px;
        min-width: 60px;
        word-wrap: break-word;
        overflow-wrap: break-word;
        line-height: 1.4;
        font-family: 'Lora', serif;
        font-style: italic;
        font-weight: 500;
        border: 1px solid #d4c48a;
        border-top: none;
        box-shadow: 0 2px 6px rgba(90,74,32,0.15);
        letter-spacing: 0.01em;
    }
    .annotation-rect .ann-delete {
        position: absolute;
        top: -8px;
        right: -8px;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: #d32f2f;
        color: #fff;
        border: none;
        font-size: 11px;
        cursor: pointer;
        display: none;
        align-items: center;
        justify-content: center;
    }
    .annotation-rect:hover .ann-delete { display: flex; }
    body:not(.dual-mode):not(.has-sidebar) .ann-toolbar {
        position: absolute;
        top: 8px;
        left: 54px;
        z-index: 50;
        display: flex;
        gap: 8px;
        background: rgba(0,0,0,0.6);
        padding: 6px 12px;
        border-radius: 10px;
        border: 1px solid rgba(255,255,255,0.15);
    }
    .ann-toolbar button {
        background: rgba(255,255,255,0.15);
        border: 1px solid rgba(255,255,255,0.25);
        color: #fff;
        padding: 6px 14px;
        border-radius: 6px;
        cursor: pointer;
        font-family: 'Lora', serif;
        font-size: 0.85rem;
    }
    .ann-toolbar button:hover { background: rgba(255,255,255,0.25); }
    .ann-toolbar button.active { background: #ff6f00; border-color: #ff6f00; }
    .ann-toolbar .ann-count { color: rgba(255,255,255,0.6); font-size: 0.8rem; display: flex; align-items: center; }
    /* Annotation cards in list */
    .ann-card {
        display: flex;
        gap: 14px;
        padding: 12px 16px;
        border-bottom: 1px solid var(--border-color);
        cursor: pointer;
        transition: background 0.15s;
        position: relative;
        align-items: flex-start;
    }
    .ann-card:hover { background: var(--sidebar-bg); }
    .ann-card-thumb {
        width: 100px;
        height: 75px;
        flex-shrink: 0;
        border-radius: 6px;
        overflow: hidden;
        background: var(--sidebar-bg);
        border: 1px solid var(--border-color);
        position: relative;
    }
    .ann-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
    .ann-card-thumb .ann-card-overlay {
        position: absolute;
        border: 2px solid #ff6f00;
        background: rgba(255,111,0,0.15);
        border-radius: 1px;
    }
    .ann-card-body { flex: 1; min-width: 0; }
    .ann-card-text { font-weight: 600; color: var(--text-main); font-size: 0.95rem; margin-bottom: 3px; }
    .ann-card-file { font-size: 0.8rem; color: var(--text-light); }
    .ann-card-date { font-size: 0.75rem; color: var(--text-light); opacity: 0.7; margin-top: 2px; }
    .ann-card-delete {
        position: absolute; top: 8px; right: 8px;
        width: 24px; height: 24px; border-radius: 50%;
        border: none; background: rgba(0,0,0,0.06);
        cursor: pointer; font-size: 14px; color: #d32f2f;
        display: flex; align-items: center; justify-content: center;
    }
    .ann-card-delete:hover { background: rgba(211,47,47,0.1); }
    .ann-filter-btn {
        background: var(--card-bg);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding: 0 12px;
        height: 48px;
        cursor: pointer;
        font-family: 'Lora', serif;
        font-size: 0.9rem;
        display: flex;
        align-items: center;
        gap: 6px;
        white-space: nowrap;
        transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
        color: var(--text-light);
        flex-shrink: 0;
    }
    .ann-filter-btn:hover { border-color: #ff6f00; }
    .ann-filter-btn.active { background: #fff3e0; border-color: #ff6f00; color: #ff6f00; }
    .ann-search-input {
        width: 100%;
        padding: 10px 14px;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        font-family: 'Lora', serif;
        font-size: 0.95rem;
        margin-bottom: 12px;
        background: var(--card-bg);
    }
    .ann-search-input:focus { border-color: #ff6f00; outline: none; }
    .ann-input-popup {
        position: fixed;
        top: 50%; left: 50%;
        transform: translate(-50%, -50%);
        background: var(--card-bg);
        padding: 20px;
        border-radius: 12px;
        box-shadow: 0 8px 32px rgba(0,0,0,0.3);
        z-index: 10000;
        width: 360px;
        font-family: 'Lora', serif;
    }
    .ann-input-popup h3 { margin: 0 0 12px; font-size: 1rem; }
    .ann-input-popup input {
        width: 100%;
        padding: 10px;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        font-family: 'Lora', serif;
        font-size: 0.95rem;
        margin-bottom: 12px;
        box-sizing: border-box;
    }
    .ann-input-popup .ann-popup-btns { display: flex; gap: 8px; justify-content: flex-end; }
    .ann-input-popup .ann-popup-btns button {
        padding: 8px 18px;
        border-radius: 8px;
        border: 1px solid var(--border-color);
        background: var(--card-bg);
        cursor: pointer;
        font-family: 'Lora', serif;
    }
    .ann-input-popup .ann-popup-btns button.primary { background: var(--brand); color: #fff; border-color: var(--brand); }
    .ann-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 9999; }

    @media (max-width: 768px) {
        body {
            padding: 0; 
            padding-bottom: 0;
        }
        
        .inner-pad {
            padding: 10px;
        }
        .book-container {
            padding-top: 48px;
        }
        
        .search-row-wrapper {
            flex-wrap: wrap;
        }
        
        .search-row-wrapper .input-group {
            min-width: 120px;
        }
        
        /* Hide sidebar completely on mobile */
        .viewer-sidebar {
            display: none !important;
        }
        
        .viewer-sidebar.collapsed {
            display: none !important;
        }
        
        #toggle-sidebar-btn {
            display: none !important;
        }

        .nav-btn {
            width: 36px; 
            height: 50px; 
            font-size: 1.5rem;
        }
        
        .prev-btn {
            left: 0; 
            border-radius: 0 8px 8px 0;
        }
        
        .next-btn {
            right: 0; 
            border-radius: 8px 0 0 8px;
        }

        .controls-row {
            display: flex !important;
            flex-wrap: nowrap;
            gap: 6px;
            align-items: center;
        }
        
        .search-area {
            display: flex !important;
            flex: 1 1 0;
            min-width: 0;
            gap: 6px;
            align-items: center;
            flex-wrap: wrap;
        }
        
        .search-area #search-scope-container {
            flex: 1 1 100%;
        }

        .search-area #searchInput {
            flex: 1 1 0;
            min-width: 0;
            height: 36px !important;
            font-size: 0.85rem !important;
            padding: 0 10px !important;
        }

        .archive-picker-btn {
            height: 36px !important;
            padding: 0 8px !important;
            font-size: 0.75rem !important;
            max-width: 140px;
        }

        .archive-picker-btn #archive-picker-label {
            max-width: 80px;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .archive-picker-dropdown {
            min-width: 200px;
            max-height: 60vh;
        }
        
        .view-controls {
            flex-shrink: 0;
        }
        
        .search-scope-tag {
            height: 36px;
            padding: 0 8px;
            font-size: 0.8rem;
            border-radius: 8px;
        }
        
        .search-scope-tag .close-scope-btn {
            font-size: 1.2rem;
            margin-left: 4px;
        }
        
        .view-controls button {
            width: 34px !important;
            height: 34px !important;
        }
        
        /* Nav tabs in one row */
        #nav-tabs {
            flex-wrap: nowrap !important;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }
        
        #nav-tabs button {
            white-space: nowrap;
            padding: 8px 12px !important;
            font-size: 12px !important;
        }
        
        .item-details-wrapper {
            flex-direction: column; 
            align-items: flex-start; 
            gap: 6px; 
            width: 100%;
        }
        
        .item-details-wrapper .film-number-col,
        .item-details-wrapper .delo-col,
        .item-details-wrapper .item-number-col,
        .item-details-wrapper .description-col,
        .item-details-wrapper .dgs-col,
        .item-details-wrapper .people-col {
            flex-basis: auto; 
            width: 100%;
        }
        
        .item-details-wrapper .film-number-col {
            font-weight: 700; 
            color: var(--text-main); 
            margin-bottom: 4px;
        }
        
        .item-details-wrapper .delo-col,
        .item-details-wrapper .item-number-col,
        .item-details-wrapper .description-col,
        .item-details-wrapper .people-col,
        .item-details-wrapper .dgs-col {
            padding-left: 10px; 
            font-size: 0.9rem;
        }
        
        .item-details-wrapper .delo-col {
            color: var(--text-light);
        }
        
        /* HEADER MOBILE ADJUSTMENTS */
        .main-header h1 { 
            font-size: 36px; 
            margin-bottom: 15px; 
        }
        
        .header-link-row { 
            font-size: 1rem; 
        }
        
        #breadcrumbs-bar {
            flex-wrap: wrap;
        }
        
        #folderFilterInput {
            width: 100%; 
            margin-top: 8px;
        }

        #selection-bar {
            flex-direction: row;
            padding: 12px 16px;
            font-size: 0.85rem;
        }
        
        .selection-btn {
            padding: 6px 10px;
            font-size: 0.85rem;
        }
        
        #file-list.view-list .list-item {
            position: relative; 
            padding-bottom: 34px;
        }
        
        .list-item-right-adornment {
            position: static;
            gap: 6px;
        }
        
        .list-item-right-adornment > svg {
            position: absolute; 
            right: 10px; 
            top: 50%; 
            transform: translateY(-100%);
        }
        
        .list-item-right-adornment > .bookmark-folder-btn {
            position: static;
            transform: none;
        }
        
        .list-item-right-adornment > .bookmark-folder-btn svg {
            position: static;
            transform: none;
        }
        
        .indexed-badge {
            position: absolute; 
            bottom: 8px; 
            left: 48px; 
            margin: 0; 
            background: none; 
            border: none; 
            padding: 0; 
            font-size: 0.8rem;
        }
    }


    /* Hide fav/ann from controls row - only show in auth-bar */
    .controls-row > .search-area > .fav-filter-btn,
    .controls-row > .search-area > .ann-filter-btn {
        display: none !important;
    }
    /* Auth bar sticky */
    .auth-bar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        background: var(--paper-bg);
        background-image: var(--paper-texture-svg);
        box-shadow: var(--shadow-md);
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 24px;
        gap: 12px;
        flex-wrap: wrap;
        border-bottom: 3px double var(--border-color);
    }

    /* === AUTH BAR === */

    .auth-bar-left {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .auth-bar-right {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .auth-user-info {
        display: none;
        align-items: center;
        gap: 8px;
        font-size: 0.9rem;
    }
    .auth-user-info img {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        border: 1px solid var(--border-color);
    }
    .auth-user-name {
        font-weight: 600;
        color: var(--text-main);
    }
    .auth-logout-btn {
        background: none;
        border: 1px solid var(--border-color);
        border-radius: 6px;
        padding: 4px 10px;
        cursor: pointer;
        font-family: 'Lora', serif;
        font-size: 0.8rem;
        color: var(--text-light);
        transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
    }
    .auth-logout-btn:hover {
        border-color: var(--danger-color);
        color: var(--danger-color);
    }
    .auth-login-container {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 0.85rem;
        color: var(--text-light);
    }
    .auth-hint {
        font-size: 0.8rem;
        color: var(--text-light);
        opacity: 0.7;
    }



    /* === TABBED SIDEBAR (yarchiver style) === */
    .sidebar-tabs {
        display: flex;
        border-bottom: 3px double var(--border-color);
        background: var(--card-bg);
        flex-shrink: 0;
    }
    .sidebar-tab {
        flex: 1;
        padding: 10px 4px;
        background: none;
        border: none;
        color: #a09890;
        cursor: pointer;
        font-size: 16px;
        text-align: center;
        transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
        border-bottom: 2px solid transparent;
        font-family: 'Lora', serif;
    }
    .sidebar-tab:hover { color: var(--ink-color, #2c2c2c); background: rgba(139,0,0,0.03); }
    .sidebar-tab.active {
        color: var(--accent, #8b0000);
        border-bottom-color: var(--accent, #8b0000);
        background: rgba(139,0,0,0.04);
        font-weight: 600;
    }
    .sidebar-tab-label {
        display: block;
        font-size: 9px;
        margin-top: 2px;
        letter-spacing: 0.5px;
        text-transform: uppercase;
    }
    .sidebar-tab-panel {
        display: none;
        flex: 1;
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: #dcd6ce #fdfbf7;
    }
    .sidebar-tab-panel.active { display: flex; flex-direction: column; }
    .sidebar-tab-panel::-webkit-scrollbar { width: 6px; }
    .sidebar-tab-panel::-webkit-scrollbar-track { background: var(--paper-bg); }
    .sidebar-tab-panel::-webkit-scrollbar-thumb { background: #dcd6ce; border-radius: 3px; }

    .sidebar-section {
        padding: 14px 16px;
        border-bottom: 1px solid #e8e2d9;
    }
    .sidebar-section:last-child { border-bottom: none; }
    .sidebar-section-title {
        font-family: 'Playfair Display', serif;
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        color: #a09890;
        margin-bottom: 10px;
        font-weight: 700;
    }
    .sidebar-info-row {
        display: flex;
        gap: 8px;
        margin-bottom: 6px;
        font-size: 0.85rem;
        color: var(--ink-color, #2c2c2c);
        line-height: 1.5;
    }
    .sidebar-info-label {
        color: #a09890;
        flex-shrink: 0;
        min-width: 60px;
        font-size: 0.8rem;
    }
    .sidebar-info-value {
        word-break: break-all;
        color: #3d352d;
    }

    /* Annotation cards in sidebar — yarchiver card style */
    .sidebar-ann-card {
        padding: 12px 14px;
        margin-bottom: 8px;
        background: var(--card-bg);
        border: 1px solid #e8e2d9;
        border-radius: 4px;
        cursor: pointer;
        transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
        box-shadow: var(--shadow-sm);
    }
    .sidebar-ann-card:hover {
        border-color: var(--accent, #8b0000);
        box-shadow: 0 2px 8px rgba(139,0,0,0.08);
        background: #fffbfb;
    }
    .sidebar-ann-text {
        color: var(--ink-color, #2c2c2c);
        font-size: 0.85rem;
        margin-bottom: 4px;
        line-height: 1.5;
    }
    .sidebar-ann-meta {
        font-size: 0.7rem;
        color: #a09890;
    }
    .sidebar-ann-delete {
        float: right;
        background: none;
        border: none;
        color: #ccc;
        cursor: pointer;
        font-size: 14px;
        padding: 0 4px;
        transition: color 0.15s;
    }
    .sidebar-ann-delete:hover { color: #e53935; }

    /* Search in sidebar — paper style */
    .sidebar-search {
        padding: 10px 16px;
        border-bottom: 1px solid #e8e2d9;
        background: var(--card-bg);
    }
    .sidebar-search input {
        width: 100%;
        padding: 10px 12px;
        border: 1px solid #e8e2d9;
        border-radius: 4px;
        background: var(--paper-bg);
        color: var(--ink-color, #2c2c2c);
        font-family: 'Lora', serif;
        font-size: 0.85rem;
        box-sizing: border-box;
    }
    .sidebar-search input:focus {
        outline: none;
        border-color: var(--accent, #8b0000);
        box-shadow: 0 0 0 2px rgba(139,0,0,0.08);
    }
    .sidebar-search input::placeholder { color: #c0b8ae; }

    /* Frame list in sidebar — warm style */
    .sidebar-frame-item {
        padding: 8px 16px;
        color: #5c534a;
        font-size: 0.82rem;
        cursor: pointer;
        transition: background-color 0.12s, border-color 0.12s, color 0.12s;
        display: flex;
        align-items: center;
        gap: 8px;
        border-bottom: 1px solid #f0ebe4;
    }
    .sidebar-frame-item:hover { background: rgba(139,0,0,0.03); color: var(--ink-color, #2c2c2c); }
    .sidebar-frame-item.active {
        background: rgba(139,0,0,0.06);
        color: var(--accent, #8b0000);
        font-weight: 700;
        border-left: 3px solid var(--accent, #8b0000);
    }
    .sidebar-frame-num {
        color: #c0b8ae;
        font-size: 0.7rem;
        min-width: 28px;
        text-align: right;
        font-variant-numeric: tabular-nums;
    }
    .sidebar-frame-name {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .sidebar-frame-badge {
        font-size: 10px;
        opacity: 0.6;
    }

    /* Collection action in sidebar — warm paper buttons */
    .sidebar-col-btn {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        padding: 12px 14px;
        background: var(--card-bg);
        border: 1px solid #e8e2d9;
        border-radius: 4px;
        color: #5c534a;
        cursor: pointer;
        font-family: 'Lora', serif;
        font-size: 0.85rem;
        transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
        margin-bottom: 8px;
        box-shadow: var(--shadow-sm);
    }
    .sidebar-col-btn:hover {
        border-color: var(--accent, #8b0000);
        color: var(--accent, #8b0000);
        box-shadow: 0 2px 6px rgba(139,0,0,0.08);
    }

    /* === COLLECTIONS === */
    .col-filter-btn {
        background: var(--card-bg);
        border: 1px solid var(--border-color);
        border-radius: 4px;
        padding: 0 12px;
        height: 48px;
        cursor: pointer;
        font-family: 'Lora', serif;
        font-size: 0.9rem;
        display: flex;
        align-items: center;
        gap: 6px;
        white-space: nowrap;
        transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
        color: var(--text-light);
        flex-shrink: 0;
    }
    .col-filter-btn:hover { border-color: var(--accent); }
    .col-filter-btn.active { background: #fbe8e8; border-color: var(--accent); color: var(--accent); }

    .col-list-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px;
        border-bottom: 2px solid var(--border-color);
        background: var(--sidebar-bg);
    }
    .col-list-header h3 {
        margin: 0;
        font-family: 'Playfair Display', serif;
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--ink-color);
    }
    .col-create-btn {
        background: var(--brand);
        color: #fff;
        border: none;
        border-radius: 4px;
        padding: 8px 16px;
        cursor: pointer;
        font-family: 'Lora', serif;
        font-size: 0.85rem;
        font-weight: 600;
        transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
    }
    .col-create-btn:hover { background: #6a0000; }

    .col-card {
        animation: fadeIn 0.2s ease;
        display: flex;
        gap: 16px;
        padding: 16px;
        border-bottom: 1px solid var(--border-color);
        cursor: pointer;
        transition: background 0.15s;
        position: relative;
    }
    .col-card:hover { background: var(--sidebar-bg); }
    .col-card-cover {
        width: 120px;
        height: 90px;
        flex-shrink: 0;
        border-radius: 3px;
        overflow: hidden;
        background: var(--sidebar-bg);
        border: 1px solid var(--border-color);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .col-card-cover img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .col-card-cover .col-placeholder {
        font-size: 32px;
        opacity: 0.4;
    }
    .col-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
    .col-card-title {
        font-family: 'Playfair Display', serif;
        font-weight: 700;
        color: var(--ink-color);
        font-size: 1rem;
    }
    .col-card-subtitle { font-size: 0.85rem; color: var(--text-light); }
    .col-card-meta {
        font-size: 0.75rem;
        color: var(--text-light);
        opacity: 0.7;
        margin-top: auto;
        display: flex;
        gap: 12px;
    }
    .col-card-actions {
        position: absolute;
        top: 12px;
        right: 12px;
        display: flex;
        gap: 6px;
        opacity: 0;
        transition: opacity 0.15s;
    }
    .col-card:hover .col-card-actions { opacity: 1; }
    .col-action-btn {
        width: 28px;
        height: 28px;
        border-radius: 4px;
        border: 1px solid var(--border-color);
        background: var(--card-bg);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
    }
    .col-action-btn:hover { border-color: var(--accent); color: var(--accent); }
    .col-action-btn.danger:hover { border-color: var(--danger-color); color: var(--danger-color); }
    .col-shared-badge {
        font-size: 0.7rem;
        padding: 2px 8px;
        border-radius: 10px;
        background: rgba(46,125,50,0.1);
        color: var(--success-color);
        border: 1px solid rgba(46,125,50,0.2);
        font-weight: 600;
    }
    .col-item-count {
        font-size: 0.7rem;
        padding: 2px 8px;
        border-radius: 10px;
        background: rgba(0,0,0,0.04);
        color: var(--text-light);
        border: 1px solid var(--border-color);
    }

    /* Collection detail view */
    .col-detail-header {
        padding: 16px;
        border-bottom: 2px solid var(--border-color);
        background: var(--sidebar-bg);
    }
    .col-detail-header .col-back-btn {
        background: none;
        border: none;
        cursor: pointer;
        font-size: 0.9rem;
        color: var(--accent);
        font-family: 'Lora', serif;
        padding: 0;
        margin-bottom: 8px;
        display: flex;
        align-items: center;
        gap: 4px;
    }
    .col-detail-header .col-back-btn:hover { text-decoration: underline; }
    .col-detail-title {
        font-family: 'Playfair Display', serif;
        font-size: 1.3rem;
        font-weight: 700;
        color: var(--ink-color);
        margin: 4px 0;
    }
    .col-detail-subtitle {
        font-size: 0.9rem;
        color: var(--text-light);
    }
    .col-detail-actions {
        display: flex;
        gap: 8px;
        margin-top: 8px;
    }
    .col-detail-actions button {
        background: var(--card-bg);
        border: 1px solid var(--border-color);
        border-radius: 4px;
        padding: 6px 12px;
        cursor: pointer;
        font-family: 'Lora', serif;
        font-size: 0.8rem;
        transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
    }
    .col-detail-actions button:hover { border-color: var(--accent); color: var(--accent); }

    /* Add-to-collection modal */
    .col-modal-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.6);
        z-index: 10000;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        visibility: hidden;
        transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
    }
    .col-modal-overlay.visible { opacity: 1; visibility: visible; }
    .col-modal {
        background: var(--paper-bg);
        background-image: var(--paper-texture-svg);
        border-radius: 4px;
        width: 400px;
        max-width: 90vw;
        max-height: 80vh;
        overflow-y: auto;
        box-shadow: 0 20px 60px rgba(0,0,0,0.3);
        border: 1px solid var(--border-color);
    }
    .col-modal-header {
        padding: 16px;
        border-bottom: 1px solid var(--border-color);
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .col-modal-header h3 {
        margin: 0;
        font-family: 'Playfair Display', serif;
        font-size: 1rem;
        font-weight: 700;
    }
    .col-modal-close {
        background: none;
        border: none;
        font-size: 1.5rem;
        cursor: pointer;
        color: var(--text-light);
        line-height: 1;
    }
    .col-modal-body { padding: 12px 16px; }
    .col-modal-item {
        padding: 10px 12px;
        border: 1px solid var(--border-color);
        border-radius: 4px;
        margin-bottom: 8px;
        cursor: pointer;
        transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .col-modal-item:hover { border-color: var(--accent); background: rgba(139,0,0,0.03); }
    .col-modal-item.in-collection {
        opacity: 0.5;
        pointer-events: none;
    }
    .col-modal-item .col-modal-item-name {
        font-weight: 600;
        font-size: 0.9rem;
    }
    .col-modal-item .col-modal-item-count {
        font-size: 0.75rem;
        color: var(--text-light);
    }
    .col-modal-new {
        display: flex;
        gap: 8px;
        padding: 12px 16px;
        border-top: 1px solid var(--border-color);
    }
    .col-modal-new input {
        flex: 1;
        padding: 8px 12px;
        border: 1px solid var(--border-color);
        border-radius: 4px;
        font-family: 'Lora', serif;
        font-size: 0.85rem;
    }
    .col-modal-new input:focus { outline: none; border-color: var(--accent); }
    .col-modal-new button {
        background: var(--brand);
        color: #fff;
        border: none;
        border-radius: 4px;
        padding: 8px 14px;
        cursor: pointer;
        font-family: 'Lora', serif;
        font-size: 0.85rem;
        font-weight: 600;
        white-space: nowrap;
    }


    /* === MOBILE COMPREHENSIVE FIXES === */
    @media (max-width: 768px) {
        /* Compact header */
        .main-header {
            padding: 8px 12px !important;
        }
        .main-header h1 {
            font-size: 1.2rem !important;
        }
        .main-header .subtitle {
            font-size: 0.6rem !important;
        }
        
        /* Auth bar compact */
        .auth-bar {
            padding: 6px 10px !important;
            font-size: 12px !important;
            flex-wrap: nowrap !important;
            gap: 6px !important;
        }
        .auth-bar img {
            width: 24px !important;
            height: 24px !important;
        }
        .auth-bar-left {
            gap: 6px !important;
            flex-shrink: 0;
        }
        .auth-bar-right {
            gap: 4px !important;
            flex-shrink: 0;
            margin-left: auto;
        }
        .auth-bar .auth-user-name {
            max-width: 80px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 11px !important;
        }
        .auth-bar .col-filter-btn,
        .auth-bar .fav-filter-btn,
        .auth-bar .ann-filter-btn {
            height: 28px !important;
            padding: 0 6px !important;
            font-size: 0.7rem !important;
        }
        .auth-bar .col-filter-btn .icon,
        .auth-bar .fav-filter-btn .icon,
        .auth-bar .ann-filter-btn .icon {
            width: 14px !important;
            height: 14px !important;
        }
        .auth-bar .auth-logout-btn {
            padding: 2px 6px !important;
        }
        .auth-bar .auth-logout-btn svg {
            width: 16px !important;
            height: 16px !important;
        }
        .auth-hint {
            display: none !important;
        }
        
        /* Archival search — collapse by default on mobile */
        .archival-search {
            padding: 8px 12px !important;
        }
        .archival-search .inner-pad {
            padding: 0 !important;
        }
        .archival-search-form {
            flex-direction: column !important;
            gap: 6px !important;
        }
        .archival-search-form .button-group {
            flex-wrap: wrap !important;
        }
        .archival-search-form button {
            padding: 6px 10px !important;
            font-size: 11px !important;
        }
        
        /* File list items compact */
        #file-list .list-item {
            padding: 8px 10px !important;
            font-size: 13px !important;
        }
        
        /* Page container no extra padding */
        .page-container {
            padding: 0 !important;
        }
        .book-container {
            padding: 0 !important;
            margin: 0 !important;
        }
        
        /* Viewer header compact */
        .viewer-header {
            padding: 6px 10px !important;
            gap: 6px !important;
        }
        #viewer-header-path {
            font-size: 11px !important;
        }
        #viewer-header-actions {
            gap: 4px !important;
        }
        #viewer-header-actions button,
        #viewer-header-actions .fav-btn-viewer,
        #viewer-header-actions .ann-toolbar button {
            font-size: 11px !important;
            height: 26px !important;
            padding: 0 6px !important;
        }
        
        /* Viewer thumbnails compact */
        .viewer-thumbnails-strip {
            height: 50px !important;
            padding: 4px !important;
        }
        .viewer-thumb-item {
            height: 42px !important;
            width: 56px !important;
        }
        
        /* Collections button on main page */
        .col-filter-btn {
            font-size: 0.7rem !important;
            height: 30px !important;
            padding: 0 8px !important;
        }
        
        /* Breadcrumbs compact */
        .breadcrumbs {
            font-size: 11px !important;
            padding: 6px 10px !important;
        }
        
        /* Controls row */
        .controls-row {
            padding: 6px 10px !important;
            gap: 6px !important;
        }
        
        /* User folders section */
        #user-folders-section {
            margin-top: 16px !important;
            padding-top: 12px !important;
        }
        
        /* Pagination */
        .pagination-controls {
            padding: 6px !important;
            font-size: 12px !important;
        }
        
        /* Modal fixes */
        .col-modal {
            width: 95% !important;
            max-width: none !important;
            margin: 10px !important;
        }
        
        /* Auth bar mobile */
        .auth-bar-right {
            gap: 4px !important;
        }
        .auth-bar-right a[href="/collections"] {
            padding: 0 6px !important;
            font-size: 0.65rem !important;
        }
        
        /* Collection detail header mobile */
        .col-detail-actions button {
            padding: 6px 10px !important;
            font-size: 0.75rem !important;
        }
        
        /* Annotation overlay mobile */
        .ann-overlay .ann-edit-container {
            width: 95vw !important;
            max-width: none !important;
        }
    }

    /* === Mobile modals — bottom-sheet style on small screens === */
    @media (max-width: 480px) {
        .fsf-modal-overlay {
            align-items: flex-end !important;
        }
        .fsf-modal-content {
            max-width: 100% !important;
            width: 100% !important;
            border-radius: 16px 16px 0 0 !important;
            margin: 0 !important;
            max-height: 85vh !important;
            overflow-y: auto !important;
            padding: 20px !important;
        }
    }

    /* Create collection form */
    .col-create-form {
        padding: 16px;
        background: var(--sidebar-bg);
        border-bottom: 1px solid var(--border-color);
    }
    .col-create-form input, .col-create-form textarea {
        width: 100%;
        padding: 10px 12px;
        border: 1px solid var(--border-color);
        border-radius: 4px;
        font-family: 'Lora', serif;
        font-size: 0.9rem;
        margin-bottom: 8px;
        box-sizing: border-box;
        background: var(--card-bg);
    }
    .col-create-form textarea { height: 60px; resize: vertical; }
    .col-create-form input:focus, .col-create-form textarea:focus { outline: none; border-color: var(--accent); }
    .col-create-form-actions {
        display: flex;
        gap: 8px;
        justify-content: flex-end;
    }
    .col-create-form-actions button {
        padding: 8px 16px;
        border-radius: 4px;
        cursor: pointer;
        font-family: 'Lora', serif;
        font-size: 0.85rem;
        font-weight: 600;
    }

  
    /* === ICON UTILITY === */
    .icon { display: inline-block; width: 18px; height: 18px; vertical-align: middle; background-size: contain; background-repeat: no-repeat; background-position: center; flex-shrink: 0; }
    .icon-heart { -webkit-mask: var(--icon-heart); mask: var(--icon-heart); -webkit-mask-size: contain; mask-size: contain; background: var(--text-light); }
    .icon-heart.active { -webkit-mask: var(--icon-heart-fill); mask: var(--icon-heart-fill); background: var(--brand); }
    .icon-folder { -webkit-mask: var(--icon-folder); mask: var(--icon-folder); -webkit-mask-size: contain; mask-size: contain; background: var(--text-light); }
    .icon-edit { -webkit-mask: var(--icon-edit); mask: var(--icon-edit); -webkit-mask-size: contain; mask-size: contain; background: var(--text-light); }
    .icon-delete { -webkit-mask: var(--icon-delete); mask: var(--icon-delete); -webkit-mask-size: contain; mask-size: contain; background: var(--danger-color); }
    .icon-share { -webkit-mask: var(--icon-share); mask: var(--icon-share); -webkit-mask-size: contain; mask-size: contain; background: var(--text-light); }
    .icon-image { -webkit-mask: var(--icon-image); mask: var(--icon-image); -webkit-mask-size: contain; mask-size: contain; background: var(--text-light); }
    .icon-close { -webkit-mask: var(--icon-close); mask: var(--icon-close); -webkit-mask-size: contain; mask-size: contain; background: var(--text-light); }
    .icon-back { -webkit-mask: var(--icon-back); mask: var(--icon-back); -webkit-mask-size: contain; mask-size: contain; background: var(--text-light); }
    .icon-check { -webkit-mask: var(--icon-check); mask: var(--icon-check); -webkit-mask-size: contain; mask-size: contain; background: var(--success-color); }
    .icon-annotation { -webkit-mask: var(--icon-annotation); mask: var(--icon-annotation); -webkit-mask-size: contain; mask-size: contain; background: var(--text-light); }

    /* === MICRO INTERACTIONS === */
    button, a, .col-card, .fav-card, .ann-card, .sidebar-tab, .file-item, .grid-item {
        transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
    }
    input, select {
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }
    @keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes scaleIn { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }
    .fav-btn-viewer:active, .fav-btn-viewer.animating { transform: scale(1.15); }

    /* === FLAT BUTTONS === */
    .btn-primary { background: var(--brand); color: #fff; border: none; border-radius: 6px; padding: 8px 16px; font-family: 'Lora', serif; font-size: 0.85rem; cursor: pointer; font-weight: 600; letter-spacing: 0.02em; }
    .btn-primary:hover { background: #6a0000; }
    .btn-secondary { background: transparent; color: var(--text-main); border: 1px solid var(--border-color); border-radius: 6px; padding: 8px 16px; font-family: 'Lora', serif; font-size: 0.85rem; cursor: pointer; }
    .btn-secondary:hover { border-color: var(--brand); color: var(--brand); }

    /* === CLEAN INPUTS === */
    input[type="text"], input[type="search"], input[type="number"], select, textarea {
        font-family: 'Lora', serif;
        border: 1px solid var(--border-color);
        border-radius: 6px;
        padding: 8px 12px;
        background: var(--card-bg);
        color: var(--text-main);
        outline: none;
        transition: border-color 0.2s, box-shadow 0.2s;
    }
    input[type="text"]:focus, input[type="search"]:focus, input[type="number"]:focus, select:focus, textarea:focus {
        border-color: var(--brand);
        box-shadow: 0 0 0 3px rgba(139, 0, 0, 0.08);
    }

    
    mark { background: rgba(139, 0, 0, 0.15); color: var(--brand); padding: 0 2px; border-radius: 2px; }



    /* === TEST6: COLLECTIONS SIDEBAR MODE === */
    @media (min-width: 769px) {
        body.has-sidebar {
            overflow-y: auto;
            padding: 0;
            margin: 0;
        }
        
        body.has-sidebar .book-container {
            display: flex;
            flex-direction: row;
            position: sticky;
            top: 0;
            height: 100vh;
            max-width: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        
        body.has-sidebar #react-left-panel {
            display: flex;
            width: 390px;
            min-width: 300px;
            max-width: 560px;
            border-right: none;
            transition: width 0.25s ease, min-width 0.25s ease;
        }
        
        /* Collapse button */
        #sidebar-collapse-btn {
            position: absolute;
            right: 8px;
            top: 50%;
            transform: translateY(-50%);
            width: 24px;
            height: 24px;
            border: 1px solid var(--border-color);
            border-radius: 4px;
            background: var(--paper-bg);
            color: var(--text-light);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            transition: all 0.15s;
            z-index: 5;
        }
        #sidebar-collapse-btn:hover {
            border-color: var(--brand);
            color: var(--brand);
            background: #faf6f0;
        }
        
        /* === SIDEBAR COLLAPSED STATE === */
        body.sidebar-collapsed #react-left-panel {
            width: 44px !important;
            min-width: 44px !important;
            max-width: 44px !important;
            overflow: hidden;
        }
        body.sidebar-collapsed #react-left-panel > * {
            visibility: hidden;
        }
        body.sidebar-collapsed #react-left-panel .border-double {
            visibility: visible;
            padding: 0 !important;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 48px;
        }
        body.sidebar-collapsed #react-left-panel .border-double > *:not(#sidebar-collapse-btn) {
            display: none;
        }
        body.sidebar-collapsed #sidebar-collapse-btn {
            position: static;
            transform: none;
            margin: 0;
        }
        body.sidebar-collapsed #dual-resizer {
            display: none !important;
        }
        
        body.has-sidebar #dual-resizer {
            display: block;
            width: 3px;
            cursor: col-resize;
            background: #e8e4dc;
            flex-shrink: 0;
            transition: background-color 0.15s;
            z-index: 31;
        }
        
        body.has-sidebar #dual-resizer:hover,
        body.has-sidebar #dual-resizer.active {
            background: var(--brand);
        }
        
        /* Hide right viewer pane — not used in sidebar mode */
        body.has-sidebar #dual-right-pane {
            display: none;
        }
        
        /* Right content area fills remaining space */
        body.has-sidebar .right-content {
            flex: 1;
            min-width: 0;
            overflow-y: auto;
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        
        body.has-sidebar .main-header {
            display: block !important;
            text-align: center;
            margin: 0;
            padding: 40px 48px 40px; /* Нижний отступ изменен на 40px */
            border-bottom: none; /* Линия убрана */
            background: var(--paper-bg);
            background-image: var(--paper-texture-svg);
            display: block !important;
        }
        body.has-sidebar .main-header h1 {
            font-size: 48px;
            margin: 0 0 14px 0;
            letter-spacing: -1px;
        }
        body.has-sidebar .main-header h1 br { display: none; }
        body.has-sidebar .main-header .header-link-row {
            display: block;
            font-size: 0.95rem;
            margin: 0 0 6px 0;
            color: var(--text-light);
        }
        body.has-sidebar .main-header .header-link-row.description {
            display: block;
        }
        
        body.has-sidebar .right-content .page-container {
            flex: 1;
        }
        
        body.has-sidebar .right-content .page-container .inner-pad {
            max-width: none;
            margin: 0;
            padding: 0 70px 0 70px;
        }
        
        body.has-sidebar .right-content .topbar {
            position: sticky;
            top: 0;
            z-index: 50;
            background: var(--paper-bg);
            background-image: var(--paper-texture-svg);
            margin-top: 0 !important;
            margin-bottom: 0 !important;
            padding-top: 6px;
            padding-bottom: 8px;
            margin-left: -70px;
            margin-right: -70px;
            padding-left: 70px;
            padding-right: 70px;
            border-bottom: 3px double var(--border-color);
        }
        
        /* Tighten breadcrumbs spacing */
        body.has-sidebar #breadcrumbs-bar {
            padding-top: 8px;
            gap: 8px;
        }
        /* Breadcrumbs truncation in sidebar mode */
        body.has-sidebar #breadcrumbs span:not(.separator):last-child {
            max-width: 240px;
        }
        
        /* Search hints toggle */
        body.has-sidebar .search-hints {
            margin-top: 6px;
            font-size: 0.8rem;
        }
        
        /* Eliminate margin collapse between topbar and content */
        body.has-sidebar .right-content .content {
            margin-top: 0 !important;
            padding-top: 16px;
        }
        
        /* Uniform width for all tab containers */
        body.has-sidebar #user-folders-container,
        body.has-sidebar #bookmarks-container {
            padding-left: 15px;
            padding-right: 15px;
        }
        
        /* Keep archival search fixed at top when scrolling */
        body.has-sidebar .right-content .archival-search {
            position: sticky;
            top: 0;
            z-index: 49;
            background: var(--paper-bg);
            background-image: var(--paper-texture-svg);
        }
    }
    
    @media (max-width: 768px) {
        body.has-sidebar #react-left-panel { display: none !important; }
        body.has-sidebar #dual-resizer { display: none !important; }
    }

    /* === TEST6: Viewer inside right-content === */
    @media (min-width: 769px) {
        body.has-sidebar .right-content {
            position: relative;
        }
        
        body.has-sidebar #image-viewer {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 60;
            width: 100%;
            height: 100%;
        }
        
        body.has-sidebar #image-viewer .close-btn {
            display: flex;
        }
        
        body.has-sidebar #image-viewer .viewer-header {
            position: sticky;
            top: 0;
        }
    }


    /* In sidebar mode: auth row hidden by JS (hamburger moved to title row) */

    /* === LEFT PANEL HEADER (yarchiver style) === */
    @media (min-width: 769px) {
        /* Hide vanilla auth-bar completely in sidebar mode */
        body.has-sidebar > .auth-bar,
        body.has-sidebar #auth-bar {
            position: absolute !important;
            left: -9999px !important;
            top: -9999px !important;
            width: 1px !important;
            height: 1px !important;
            overflow: hidden !important;
        }
        
        /* Style React's own auth row like yarchiver */
        body.has-sidebar #react-left-panel .bg-stone-50.border-b.border-stone-200 {
            background: #faf9f6 !important;
            border-bottom: 1px solid #e8e4dc !important;
            padding: 5px 10px !important;
            min-height: 38px;
        }
        
        /* Home button in React auth row — small like yarchiver */
        body.has-sidebar #react-left-panel .bg-stone-50.border-b.border-stone-200 > .flex > button:first-child {
            color: #999;
            border-radius: 4px;
            transition: all 0.15s;
            padding: 4px;
        }
        body.has-sidebar #react-left-panel .bg-stone-50.border-b.border-stone-200 > .flex > button:first-child svg {
            width: 16px;
            height: 16px;
        }
        body.has-sidebar #react-left-panel .bg-stone-50.border-b.border-stone-200 > .flex > button:first-child:hover {
            color: var(--brand);
            background: rgba(139, 0, 0, 0.06);
        }
        
        /* User avatar in auth row — smaller like yarchiver */
        body.has-sidebar #react-left-panel .bg-stone-50.border-b.border-stone-200 img {
            width: 24px !important;
            height: 24px !important;
            border-radius: 50%;
            border: 1px solid #e8e4dc;
        }
        
        /* User name — smaller like yarchiver */
        body.has-sidebar #react-left-panel .bg-stone-50.border-b.border-stone-200 .text-\[10px\].text-stone-600 {
            font-size: 0.8rem !important;
            font-weight: 500;
            color: #555 !important;
            max-width: 100px !important;
            font-family: 'Lora', serif;
        }
        
        /* Logout button — smaller like yarchiver */
        body.has-sidebar #react-left-panel .bg-stone-50.border-b.border-stone-200 .text-\[9px\].text-stone-400 {
            font-size: 0.7rem !important;
            color: #999 !important;
            text-transform: none !important;
            font-family: 'Lora', serif;
            letter-spacing: normal !important;
        }
        body.has-sidebar #react-left-panel .bg-stone-50.border-b.border-stone-200 .text-\[9px\].text-stone-400:hover {
            color: var(--brand) !important;
        }
        
        /* Login button */
        body.has-sidebar #react-left-panel .bg-stone-50.border-b.border-stone-200 .bg-\[\#54a9eb\] {
            font-size: 0.75rem !important;
            padding: 4px 10px !important;
        }
        
        /* Collections button in React auth row */
        body.has-sidebar #react-left-panel .bg-stone-50.border-b.border-stone-200 .relative > button {
            color: #999 !important;
            border: none;
            border-radius: 4px;
            padding: 4px 6px;
            transition: all 0.15s;
            font-size: 10px;
        }
        body.has-sidebar #react-left-panel .bg-stone-50.border-b.border-stone-200 .relative > button:hover {
            color: var(--brand) !important;
            background: rgba(139, 0, 0, 0.06);
        }
        
        /* Hide share button from title row */
        body.has-sidebar #react-left-panel .border-double button[title="Поделиться"] {
            display: none !important;
        }
        
        /* Viewer header in right panel */
        body.has-sidebar #image-viewer .viewer-header {
            display: flex !important;
            background: var(--paper-bg) !important;
            border-bottom: 1px solid var(--border-color) !important;
            color: var(--text-main) !important;
            padding: 4px 12px !important;
            font-size: 0.75rem !important;
            min-height: 38px !important;
            align-items: center !important;
            text-shadow: none !important;
            justify-content: flex-start !important;
        }
        
        body.has-sidebar #image-viewer .viewer-header .close-btn {
            display: flex;
            order: 99;
            width: 24px !important;
            height: 24px !important;
            font-size: 15px !important;
        }
        body.has-sidebar #image-viewer .viewer-header button {
            padding: 2px 4px !important;
        }
        body.has-sidebar #image-viewer .viewer-header svg {
            width: 14px !important;
            height: 14px !important;
        }
        
        /* Thumbnails: smaller in sidebar mode */
        body.has-sidebar .viewer-thumbnails {
            height: 50px !important;
            gap: 4px !important;
            padding: 0 10px !important;
        }
        body.has-sidebar .viewer-thumb-item {
            height: 40px !important;
            width: 56px !important;
        }
        
        /* Body scrolls to allow header to scroll away, panels stay sticky */
        
        body.has-sidebar .right-content {
            overflow: hidden;
        }
        
        body.has-sidebar .right-content .page-container {
            overflow-y: auto;
            height: 100%;
            max-height: 100%;
            border: none;
            border-radius: 0;
            box-shadow: none;
            display: flex !important;
            flex-direction: column;
        }
        
        /* main-header is now visible above panels — styled inline above */
        
        /* === SHARED COLLECTION MODE: hide editing UI === */
        body.viewing-shared-collection .ann-toolbar {
            display: none !important;
        }
        body.viewing-shared-collection .viewer-col-menu {
            display: none !important;
        }
        body.viewing-shared-collection .annotation-rect .ann-delete,
        body.viewing-shared-collection .annotation-rect .ann-edit-btn {
            display: none !important;
        }
        
        /* === YARCHIVER-STYLE PANEL TITLE ROW === */
        body.has-sidebar #react-left-panel .border-double {
            padding: 12px 16px;
            border-bottom-width: 3px;
            border-bottom-color: var(--border-color) !important;
        }
        
        /* Title styling — matches yarchiver СИМОНТОВКА style */
        body.has-sidebar #react-left-panel .border-double h1 {
            font-family: 'Playfair Display', serif;
            font-size: 1.25rem;
            font-weight: 900;
            text-transform: uppercase;
            color: var(--ink-color);
            line-height: 1.2;
            letter-spacing: 0.02em;
        }
        
        /* Search row — matches yarchiver Поиск... + ВСЕ ГОДЫ */
        body.has-sidebar #react-left-panel .border-stone-100 {
            padding: 8px 16px;
        }
        
        body.has-sidebar #react-left-panel .border-stone-100 input[placeholder="Поиск..."] {
            font-family: 'Lora', serif;
            font-size: 0.9rem;
            color: var(--ink-color);
        }
        
        body.has-sidebar #react-left-panel .border-stone-100 input[placeholder="Поиск..."]::placeholder {
            color: #bbb;
            font-style: italic;
        }
        
        /* Filter count — like yarchiver's "ВСЕ ГОДЫ (12)" */
        body.has-sidebar #react-left-panel .border-stone-100 .text-\[10px\] {
            font-family: 'Playfair Display', serif;
            font-weight: 700;
            font-size: 11px;
            letter-spacing: 0.02em;
        }
        
        /* Filter toggle buttons — matches yarchiver По изданиям / По годам */
        body.has-sidebar #react-left-panel .bg-stone-100.rounded-lg {
            background: #f0ece4;
            border-radius: 8px;
        }
        
        body.has-sidebar #react-left-panel .bg-stone-100.rounded-lg button {
            font-family: 'Lora', serif;
            font-size: 11px;
            border-radius: 6px;
            padding: 4px 10px;
        }
        
        /* Card container area */
        body.has-sidebar #react-left-panel .flex-1.overflow-y-auto {
            background-color: var(--paper-texture);
            background-image: var(--paper-texture-svg);
        }
        
        /* Group headers — matches yarchiver АРХИВ Г. СЕВАСТОПОЛЯ style */
        body.has-sidebar #react-left-panel .border.border-stone-200.rounded-lg {
            border-color: #e0dcd3;
            border-radius: 8px;
            overflow: hidden;
        }
        
        body.has-sidebar #react-left-panel .sticky.top-0.bg-\[\#fffefb\] {
            font-family: 'Playfair Display', serif;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: var(--ink-color);
            padding: 10px 14px;
            background: #fffefb;
            border-bottom-color: #e0dcd3;
        }
        
        /* Group count badge */
        body.has-sidebar #react-left-panel .bg-\[\#8b0000\].rounded-full {
            background: var(--brand);
            font-size: 10px;
            min-width: 22px;
            padding: 2px 6px;
        }
        
        /* Cards — match yarchiver's text-focused card style */
        body.has-sidebar #react-left-panel .group.relative.p-3 {
            padding: 12px 14px;
            border-radius: 8px;
            border-color: #e8e4dc;
            transition: all 0.15s;
        }
        
        body.has-sidebar #react-left-panel .group.relative.p-3:hover {
            border-color: rgba(139, 0, 0, 0.3);
            box-shadow: 0 2px 8px rgba(139, 0, 0, 0.08);
        }
        
        /* Active card — yarchiver style with brand border */
        body.has-sidebar #react-left-panel .group.relative.p-3.border-\[\#8b0000\] {
            border-color: var(--brand);
            box-shadow: 0 2px 8px rgba(139, 0, 0, 0.12);
            background: #fffbfb;
        }
        
        /* Card filename text */
        body.has-sidebar #react-left-panel .font-bold.text-stone-900.text-\[13px\] {
            font-family: 'Lora', serif;
            font-size: 13px;
            font-weight: 700;
            color: var(--ink-color);
            line-height: 1.3;
        }
        
        /* Card path text */
        body.has-sidebar #react-left-panel .text-\[10px\].text-stone-400.mt-1.truncate.font-mono {
            font-family: 'Lora', serif;
            font-size: 10px;
            color: #999;
            border-top: 1px solid #f0ece4;
            padding-top: 6px;
            margin-top: 6px;
        }
        
        /* Doc type badges — match yarchiver */
        body.has-sidebar .doc-type-badge {
            display: inline-flex;
            align-items: center;
            gap: 3px;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 9px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        /* Login container in sidebar auth bar */
        body.has-sidebar #react-left-panel .bg-stone-50.border-b.border-stone-200 .auth-login-container {
            font-size: 0.8rem;
            color: var(--text-light);
        }
        
        /* Ensure user info shows in sidebar */
        body.has-sidebar #react-left-panel .bg-stone-50.border-b.border-stone-200 .auth-user-info {
            display: flex;
        }
    }

    /* Collection management modal — centered overlay */
    .fsf-modal-overlay {
        z-index: 10001 !important;
    }
    
    /* Hamburger dropdown in sidebar — fix positioning */
    @media (min-width: 769px) {
        body.has-sidebar #react-left-panel .bg-stone-50.border-b.border-stone-200 .absolute.right-0 {
            right: 0;
            max-width: 260px;
            z-index: 100;
        }
    }
    
    /* Mobile: hamburger dropdown fix */
    @media (max-width: 768px) {
        #react-left-panel .absolute.right-0.top-full {
            right: 0 !important;
            left: auto !important;
            max-width: calc(100vw - 32px);
            z-index: 1000;
        }
    }