/* Texts Browser Styles */
        .texts-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 2rem;
        }

        .texts-header {
            margin-bottom: 2rem;
        }

        .texts-header h1 {
            font-size: 1.75rem;
            color: var(--text-primary);
            margin-bottom: 0.5rem;
        }

        .texts-header p {
            color: var(--text-secondary);
        }

        /* Filter Bar */
        .filter-bar {
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
            align-items: center;
            margin-bottom: 1.5rem;
            padding: 1rem;
            background: var(--card-bg);
            border-radius: var(--radius-lg);
            border: 1px solid var(--border-color);
        }

        .filter-bar input,
        .filter-bar select {
            padding: 0.5rem 1rem;
            border: 2px solid var(--border-color);
            border-radius: var(--radius-md);
            font-size: 0.875rem;
            background: var(--card-bg);
        }

        .filter-bar input:focus,
        .filter-bar select:focus {
            outline: none;
            border-color: var(--primary-color);
        }

        .filter-bar input[type="search"] {
            flex: 1;
            min-width: 200px;
        }

        .filter-bar select {
            min-width: 120px;
        }

        .filter-bar .spacer {
            flex: 1;
        }

        /* Works Grid */
        .works-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 1.5rem;
        }

        .work-card {
            background: var(--card-bg);
            border-radius: var(--radius-lg);
            border: 1px solid var(--border-color);
            padding: 1.5rem;
            cursor: pointer;
            transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
            text-decoration: none;
            color: inherit;
            display: block;
        }

        .work-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            border-color: var(--primary-color);
        }

        .work-card-title {
            font-size: 1.125rem;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 0.25rem;
        }

        .work-card-author {
            color: var(--text-secondary);
            font-size: 0.875rem;
            margin-bottom: 0.75rem;
        }

        .work-card-meta {
            display: flex;
            gap: 0.75rem;
            flex-wrap: wrap;
            margin-bottom: 0.75rem;
        }

        .work-card-badge {
            display: inline-block;
            padding: 0.25rem 0.5rem;
            background: var(--primary-light);
            color: var(--primary-color);
            border-radius: var(--radius-sm);
            font-size: 0.75rem;
            font-weight: 500;
        }

        .work-card-stats {
            font-size: 0.75rem;
            color: var(--text-muted);
        }

        .work-card-description {
            font-size: 0.875rem;
            color: var(--text-secondary);
            line-height: 1.5;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        /* Work Detail View */
        .work-detail {
            display: none;
        }

        .work-detail.active {
            display: block;
        }

        .back-link {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            color: var(--primary-color);
            text-decoration: none;
            font-size: 0.875rem;
            margin-bottom: 1.5rem;
        }

        .back-link:hover {
            text-decoration: underline;
        }

        .work-header {
            background: var(--card-bg);
            border-radius: var(--radius-lg);
            border: 1px solid var(--border-color);
            padding: 2rem;
            margin-bottom: 1.5rem;
        }

        .work-header h1 {
            font-size: 2rem;
            color: var(--text-primary);
            margin-bottom: 0.5rem;
        }

        .work-header .author {
            font-size: 1.125rem;
            color: var(--text-secondary);
            margin-bottom: 1rem;
        }

        .work-header .year {
            color: var(--text-muted);
        }

        .work-header .description {
            color: var(--text-secondary);
            line-height: 1.6;
            margin-bottom: 1rem;
        }

        .work-header .stats {
            display: flex;
            gap: 2rem;
            flex-wrap: wrap;
            padding-top: 1rem;
            border-top: 1px solid var(--border-color);
        }

        .work-header .stat {
            text-align: center;
        }

        .work-header .stat-value {
            font-size: 1.5rem;
            font-weight: 600;
            color: var(--primary-color);
        }

        .work-header .stat-label {
            font-size: 0.75rem;
            color: var(--text-muted);
            text-transform: uppercase;
        }

        .work-actions {
            display: flex;
            gap: 1rem;
            margin-top: 1.5rem;
        }

        /* Table of Contents */
        .toc-section {
            background: var(--card-bg);
            border-radius: var(--radius-lg);
            border: 1px solid var(--border-color);
            padding: 1rem 1.5rem;
            margin-bottom: 1.5rem;
        }

        .toc-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            user-select: none;
        }

        .toc-header:hover {
            color: var(--primary-color);
        }

        .toc-section h2 {
            font-size: 1.125rem;
            color: var(--text-primary);
            margin: 0;
        }

        .toc-toggle {
            font-size: 0.875rem;
            color: var(--text-secondary);
            transition: transform 0.2s;
        }

        .toc-list {
            list-style: none;
            padding: 0;
            margin: 1rem 0 0 0;
            max-height: 500px;
            overflow-y: auto;
            transition: max-height 0.3s ease, margin 0.3s ease, opacity 0.3s ease;
        }

        .toc-section.collapsed .toc-list {
            max-height: 0;
            margin: 0;
            opacity: 0;
            overflow: hidden;
        }

        .toc-item {
            padding: 0.5rem 0;
            border-bottom: 1px solid var(--border-color);
        }

        .toc-item:last-child {
            border-bottom: none;
        }

        .toc-item a {
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: var(--text-primary);
            text-decoration: none;
            padding: 0.25rem 0;
        }

        .toc-item a:hover {
            color: var(--primary-color);
        }

        .toc-item.depth-1 {
            padding-left: 1.5rem;
        }

        .toc-item.depth-2 {
            padding-left: 3rem;
        }

        .toc-item .sentence-count {
            font-size: 0.75rem;
            color: var(--text-muted);
        }

        /* Reading View */
        .reading-view {
            display: none;
        }

        .reading-view.active {
            display: block;
        }

        .reading-header {
            background: var(--card-bg);
            border-radius: var(--radius-lg);
            border: 1px solid var(--border-color);
            padding: 1rem 1.5rem;
            margin-bottom: 1.5rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 1rem;
        }

        .reading-breadcrumb {
            font-size: 0.875rem;
            color: var(--text-secondary);
        }

        .reading-breadcrumb a {
            color: var(--primary-color);
            text-decoration: none;
        }

        .reading-breadcrumb a:hover {
            text-decoration: underline;
        }

        .reading-nav {
            display: flex;
            gap: 0.5rem;
        }

        .reading-nav button {
            padding: 0.5rem 1rem;
            border: 1px solid var(--border-color);
            background: var(--card-bg);
            border-radius: var(--radius-md);
            cursor: pointer;
            font-size: 0.875rem;
        }

        .reading-nav button:hover:not(:disabled) {
            background: var(--primary-light);
            border-color: var(--primary-color);
        }

        .reading-nav button:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .sentences-container {
            background: var(--card-bg);
            border-radius: var(--radius-lg);
            border: 1px solid var(--border-color);
            padding: 2rem;
        }

        .sentence {
            margin-bottom: 1rem;
            line-height: 1.8;
        }

        .sentence-text {
            color: var(--text-primary);
        }

        .sentence.has-speaker {
            margin-bottom: 0.5rem;
        }

        .sentence .speaker {
            font-weight: 600;
            color: var(--primary-color);
            margin-right: 0.5rem;
        }

        /* Continuation lines from the same speaker - no label, reduced margin */
        .sentence.speaker-continuation {
            margin-top: -0.25rem;
            margin-bottom: 0.5rem;
        }

        .sentence.stage-direction {
            font-style: italic;
            color: var(--text-muted);
            padding: 0.5rem 1rem;
            background: var(--background);
            border-radius: var(--radius-sm);
        }

        .sentence.stage-direction .sentence-text {
            color: var(--text-muted);
        }

        .part-title {
            font-size: 1.5rem;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 1.5rem;
            padding-bottom: 0.75rem;
            border-bottom: 2px solid var(--primary-color);
        }

        /* Pagination */
        .pagination {
            display: flex;
            justify-content: center;
            gap: 0.5rem;
            margin-top: 2rem;
        }

        .pagination button {
            padding: 0.5rem 1rem;
            border: 1px solid var(--border-color);
            background: var(--card-bg);
            border-radius: var(--radius-md);
            cursor: pointer;
        }

        .pagination button:hover:not(:disabled) {
            background: var(--primary-light);
            border-color: var(--primary-color);
        }

        .pagination button:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .pagination .current {
            padding: 0.5rem 1rem;
            color: var(--text-secondary);
        }

        /* Loading & Empty States */
        .loading {
            text-align: center;
            padding: 4rem 2rem;
            color: var(--text-secondary);
        }

        .loading-spinner {
            width: 40px;
            height: 40px;
            border: 3px solid var(--border-color);
            border-top-color: var(--primary-color);
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin: 0 auto 1rem;
        }

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

        .empty-state {
            text-align: center;
            padding: 4rem 2rem;
            color: var(--text-secondary);
        }

        .empty-state svg {
            width: 64px;
            height: 64px;
            margin-bottom: 1rem;
            opacity: 0.5;
        }

        /* Import Button (logged in only) */
        .import-btn {
            display: none;
        }

        .import-btn.visible {
            display: inline-flex;
        }

        /* Themes badge colors */
        .theme-badge {
            display: inline-block;
            padding: 0.2rem 0.5rem;
            background: var(--background);
            color: var(--text-secondary);
            border-radius: var(--radius-sm);
            font-size: 0.7rem;
            margin-right: 0.25rem;
            margin-bottom: 0.25rem;
        }

        /* Meta badges row */
        .meta-badges {
            display: flex;
            gap: 0.5rem;
            flex-wrap: wrap;
            align-items: center;
            margin-bottom: 0.75rem;
        }

        /* Category badges */
        .category-literary {
            background: #dbeafe;
            color: #1e40af;
        }

        .category-informational {
            background: #dcfce7;
            color: #166534;
        }

        /* License badge */
        .license-badge {
            display: inline-block;
            padding: 0.25rem 0.5rem;
            background: var(--background);
            color: var(--text-muted);
            border-radius: var(--radius-sm);
            font-size: 0.75rem;
            font-weight: 500;
        }

        .license-badge.pd {
            background: #fef3c7;
            color: #92400e;
        }

        /* Source link */
        .source-link {
            font-size: 0.75rem;
            color: var(--primary-color);
            text-decoration: none;
        }

        .source-link:hover {
            text-decoration: underline;
        }

        /* Inline text content section */
        .text-content-section {
            background: var(--card-bg);
            border-radius: var(--radius-lg);
            border: 1px solid var(--border-color);
            padding: 2rem;
            margin-bottom: 1.5rem;
        }

        .text-content {
            font-size: 1.0625rem;
            line-height: 1.8;
            color: var(--text-primary);
        }

        .text-content p {
            margin-bottom: 1.25rem;
        }

        .text-content p:last-child {
            margin-bottom: 0;
        }

        /* Inline sentences display (for simple texts without structure) */
        .inline-sentences {
            font-size: 1.0625rem;
            line-height: 1.8;
            color: var(--text-primary);
        }

        .inline-sentences .sentence {
            margin-bottom: 0.75rem;
        }

        .inline-sentences .sentence.has-speaker {
            margin-left: 1.5rem;
            text-indent: -1.5rem;
        }

        .inline-sentences .speaker {
            font-weight: 600;
            color: var(--primary-color);
            margin-right: 0.5rem;
        }

        .inline-sentences .stage-direction {
            color: var(--text-secondary);
            font-style: italic;
            margin-left: 2rem;
        }

        .inline-sentences .speaker-continuation {
            margin-left: 0;
            text-indent: 0;
        }

        .text-note {
            margin-top: 1.5rem;
            padding-top: 1rem;
            border-top: 1px solid var(--border-color);
            color: var(--text-secondary);
            font-size: 0.875rem;
        }

        .text-note a {
            color: var(--primary-color);
        }

        .error-state {
            color: var(--danger, #ef4444);
        }

        /* Grade level badge */
        .grade-badge {
            background: #ede9fe;
            color: #5b21b6;
        }

        /* Passage type badge */
        .passage-badge {
            background: #f3e8ff;
            color: #7e22ce;
        }

        /* ========================================
           TEXT ANNOTATION STYLES
           ======================================== */

        /* Annotated word highlighting */
        .annotated-word {
            background: linear-gradient(180deg, transparent 60%, #dce8f0 60%);
            cursor: pointer;
            border-radius: 2px;
            padding: 0 2px;
            margin: 0 -2px;
            transition: background 0.15s;
        }

        .annotated-word:hover {
            background: linear-gradient(180deg, transparent 40%, #fdba74 40%);
        }

        .annotated-word.archaic {
            background: linear-gradient(180deg, transparent 60%, #c4b5fd 60%);
        }

        .annotated-word.archaic:hover {
            background: linear-gradient(180deg, transparent 40%, #a78bfa 40%);
        }

        .annotated-word.false-friend {
            background: linear-gradient(180deg, transparent 60%, #fca5a5 60%);
        }

        .annotated-word.false-friend:hover {
            background: linear-gradient(180deg, transparent 40%, #f87171 40%);
        }

        /* Annotation Tooltip */
        .annotation-tooltip {
            position: absolute;
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-lg);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            padding: 1rem;
            max-width: 320px;
            z-index: 1000;
            display: none;
        }

        .annotation-tooltip.visible {
            display: block;
        }

        .annotation-tooltip .word {
            font-weight: 600;
            font-size: 1.125rem;
            color: var(--text-primary);
            margin-bottom: 0.25rem;
        }

        .annotation-tooltip .pronunciation {
            font-size: 0.875rem;
            color: var(--text-muted);
            font-style: italic;
            margin-bottom: 0.5rem;
        }

        .annotation-tooltip .definition {
            color: var(--text-secondary);
            font-size: 0.875rem;
            line-height: 1.5;
            margin-bottom: 0.5rem;
        }

        .annotation-tooltip .modern-equivalent {
            background: var(--primary-light);
            color: var(--primary-color);
            padding: 0.25rem 0.5rem;
            border-radius: var(--radius-sm);
            font-size: 0.8125rem;
            display: inline-block;
            margin-bottom: 0.5rem;
        }

        .annotation-tooltip .note {
            font-size: 0.8125rem;
            color: var(--text-muted);
            padding-top: 0.5rem;
            border-top: 1px solid var(--border-color);
            font-style: italic;
        }

        .annotation-tooltip .audio-btn {
            background: none;
            border: none;
            color: var(--primary-color);
            cursor: pointer;
            padding: 0.25rem;
            font-size: 1rem;
        }

        .annotation-tooltip .audio-btn:hover {
            color: var(--primary-hover);
        }

        /* Vocabulary Sidebar */
        .vocabulary-sidebar {
            position: fixed;
            right: 0;
            top: 60px;
            width: 320px;
            height: calc(100vh - 60px);
            background: var(--card-bg);
            border-left: 1px solid var(--border-color);
            padding: 1.5rem;
            overflow-y: auto;
            transform: translateX(100%);
            transition: transform 0.25s ease;
            z-index: 100;
        }

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

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

        .vocabulary-sidebar-header h3 {
            font-size: 1rem;
            color: var(--text-primary);
            margin: 0;
        }

        .vocabulary-sidebar-close {
            background: none;
            border: none;
            color: var(--text-muted);
            cursor: pointer;
            font-size: 1.25rem;
            padding: 0.25rem;
        }

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

        .vocabulary-list-item {
            padding: 0.75rem;
            border-bottom: 1px solid var(--border-color);
            cursor: pointer;
            transition: background 0.15s;
        }

        .vocabulary-list-item:hover {
            background: var(--background);
        }

        .vocabulary-list-item .word {
            font-weight: 600;
            color: var(--text-primary);
        }

        .vocabulary-list-item .definition-preview {
            font-size: 0.8125rem;
            color: var(--text-muted);
            margin-top: 0.25rem;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .vocabulary-list-item .frequency {
            font-size: 0.75rem;
            color: var(--primary-color);
            background: var(--primary-light);
            padding: 0.125rem 0.375rem;
            border-radius: var(--radius-sm);
            display: inline-block;
            margin-left: 0.5rem;
        }

        /* Annotation Toolbar */
        .annotation-toolbar {
            position: sticky;
            top: 60px;
            background: var(--card-bg);
            border-bottom: 1px solid var(--border-color);
            padding: 0.75rem 1.5rem;
            margin: -2rem -2rem 1.5rem -2rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 1rem;
            z-index: 50;
        }

        .annotation-toolbar-left {
            display: flex;
            gap: 0.75rem;
            align-items: center;
        }

        .annotation-toolbar-right {
            display: flex;
            gap: 0.5rem;
        }

        .annotation-toggle {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.875rem;
            color: var(--text-secondary);
        }

        .annotation-toggle input[type="checkbox"] {
            accent-color: var(--primary-color);
        }

        /* Annotation Selection Popup */
        .annotation-selection-popup {
            position: absolute;
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-lg);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            padding: 0.5rem;
            display: none;
            z-index: 1001;
        }

        .annotation-selection-popup.visible {
            display: flex;
            gap: 0.25rem;
        }

        .annotation-selection-popup button {
            padding: 0.5rem 0.75rem;
            border: none;
            background: var(--background);
            border-radius: var(--radius-sm);
            cursor: pointer;
            font-size: 0.8125rem;
            color: var(--text-secondary);
            white-space: nowrap;
        }

        .annotation-selection-popup button:hover {
            background: var(--primary-light);
            color: var(--primary-color);
        }

        /* Annotation Modal */
        .annotation-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 2000;
        }

        .annotation-modal-overlay.visible {
            display: flex;
        }

        .annotation-modal {
            background: var(--card-bg);
            border-radius: var(--radius-lg);
            width: 90%;
            max-width: 500px;
            max-height: 90vh;
            overflow-y: auto;
        }

        .annotation-modal-header {
            padding: 1.25rem 1.5rem;
            border-bottom: 1px solid var(--border-color);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .annotation-modal-header h2 {
            font-size: 1.125rem;
            color: var(--text-primary);
            margin: 0;
        }

        .annotation-modal-close {
            background: none;
            border: none;
            color: var(--text-muted);
            cursor: pointer;
            font-size: 1.5rem;
            line-height: 1;
        }

        .annotation-modal-body {
            padding: 1.5rem;
        }

        .annotation-form-group {
            margin-bottom: 1.25rem;
        }

        .annotation-form-group label {
            display: block;
            font-size: 0.875rem;
            font-weight: 500;
            color: var(--text-secondary);
            margin-bottom: 0.5rem;
        }

        .annotation-form-group input,
        .annotation-form-group textarea,
        .annotation-form-group select {
            width: 100%;
            padding: 0.625rem 0.875rem;
            border: 2px solid var(--border-color);
            border-radius: var(--radius-md);
            font-size: 0.9375rem;
            background: var(--card-bg);
        }

        .annotation-form-group input:focus,
        .annotation-form-group textarea:focus,
        .annotation-form-group select:focus {
            outline: none;
            border-color: var(--primary-color);
        }

        .annotation-form-group textarea {
            min-height: 80px;
            resize: vertical;
        }

        .annotation-form-group .selected-text {
            background: var(--primary-light);
            color: var(--primary-color);
            padding: 0.5rem 0.75rem;
            border-radius: var(--radius-md);
            font-weight: 500;
        }

        /* Definition Selection UI */
        .definition-selection-container {
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            background: var(--background);
            overflow: hidden;
        }

        #definition-cards {
            max-height: 250px;
            overflow-y: auto;
        }

        .def-select-item {
            display: flex;
            align-items: flex-start;
            padding: 0.75rem;
            gap: 0.75rem;
            cursor: pointer;
            border-bottom: 1px solid var(--border-color);
            transition: background 0.15s;
        }

        .def-select-item:last-child {
            border-bottom: none;
        }

        .def-select-item:hover {
            background: rgba(0, 0, 0, 0.03);
        }

        .def-select-item input[type="checkbox"] {
            margin-top: 2px;
            accent-color: var(--primary-color);
            flex-shrink: 0;
        }

        .def-select-content {
            flex: 1;
            min-width: 0;
        }

        .def-pos {
            display: inline-block;
            font-size: 0.75rem;
            font-weight: 600;
            color: var(--primary-color);
            background: var(--primary-light);
            padding: 0.125rem 0.375rem;
            border-radius: var(--radius-sm);
            margin-right: 0.5rem;
            text-transform: lowercase;
        }

        .def-text {
            display: block;
            margin-top: 0.25rem;
            color: var(--text-primary);
            line-height: 1.4;
        }

        .def-example {
            display: block;
            margin-top: 0.375rem;
            font-style: italic;
            font-size: 0.875rem;
            color: var(--text-muted);
        }

        .definition-selection-actions {
            display: flex;
            justify-content: flex-end;
            gap: 0.5rem;
            padding: 0.75rem;
            background: var(--card-bg);
            border-top: 1px solid var(--border-color);
        }

        .annotation-modal-footer {
            padding: 1rem 1.5rem;
            border-top: 1px solid var(--border-color);
            display: flex;
            justify-content: flex-end;
            gap: 0.75rem;
        }

        /* Vocabulary Extract Modal */
        .vocab-extract-list {
            max-height: 400px;
            overflow-y: auto;
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
        }

        .vocab-extract-item {
            display: flex;
            align-items: center;
            padding: 0.75rem 1rem;
            border-bottom: 1px solid var(--border-color);
        }

        .vocab-extract-item:last-child {
            border-bottom: none;
        }

        .vocab-extract-item input[type="checkbox"] {
            margin-right: 0.75rem;
            accent-color: var(--primary-color);
        }

        .vocab-extract-item .word-info {
            flex: 1;
        }

        .vocab-extract-item .word {
            font-weight: 600;
            color: var(--text-primary);
        }

        .vocab-extract-item .frequency {
            font-size: 0.75rem;
            color: var(--text-muted);
            margin-left: 0.5rem;
        }

        .vocab-extract-item.archaic .word::after {
            content: 'archaic';
            font-size: 0.625rem;
            background: #c4b5fd;
            color: #5b21b6;
            padding: 0.125rem 0.375rem;
            border-radius: var(--radius-sm);
            margin-left: 0.5rem;
            font-weight: 500;
        }

        /* Export Format Options */
        .export-format-options {
            display: flex;
            gap: 0.75rem;
            margin-bottom: 1rem;
        }

        .export-format-option {
            flex: 1;
            padding: 1rem;
            border: 2px solid var(--border-color);
            border-radius: var(--radius-md);
            cursor: pointer;
            text-align: center;
            transition: all 0.15s;
        }

        .export-format-option:hover {
            border-color: var(--primary-color);
        }

        .export-format-option.selected {
            border-color: var(--primary-color);
            background: var(--primary-light);
        }

        .export-format-option .format-name {
            font-weight: 600;
            color: var(--text-primary);
        }

        .export-format-option .format-desc {
            font-size: 0.75rem;
            color: var(--text-muted);
            margin-top: 0.25rem;
        }

        /* ========================================
           CHARACTER NOTES STYLES
           ======================================== */

        /* Character Notes Sidebar */
        .character-notes-sidebar {
            position: fixed;
            right: 0;
            top: 60px;
            width: 320px;
            height: calc(100vh - 60px);
            background: var(--card-bg);
            border-left: 1px solid var(--border-color);
            padding: 0;
            overflow-y: auto;
            transform: translateX(100%);
            transition: transform 0.25s ease;
            z-index: 100;
            display: flex;
            flex-direction: column;
        }

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

        .character-notes-sidebar-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem 1.5rem;
            border-bottom: 1px solid var(--border-color);
            background: var(--card-bg);
            position: sticky;
            top: 0;
        }

        .character-notes-sidebar-header h3 {
            font-size: 1rem;
            color: var(--text-primary);
            margin: 0;
        }

        .character-notes-sidebar-close {
            background: none;
            border: none;
            color: var(--text-muted);
            cursor: pointer;
            font-size: 1.25rem;
            padding: 0.25rem;
        }

        .character-notes-sidebar-close:hover {
            color: var(--text-primary);
        }

        #character-notes-list {
            flex: 1;
            overflow-y: auto;
        }

        .character-note-item {
            padding: 1rem 1.5rem;
            border-bottom: 1px solid var(--border-color);
            cursor: pointer;
            transition: background 0.15s;
        }

        .character-note-item:hover {
            background: var(--background);
        }

        .character-note-header {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-bottom: 0.375rem;
        }

        .character-note-item .character-name {
            font-weight: 600;
            color: var(--text-primary);
            font-size: 1rem;
        }

        .character-note-item .character-role {
            font-size: 0.6875rem;
            padding: 0.125rem 0.5rem;
            border-radius: 9999px;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.025em;
        }

        .character-role.protagonist {
            background: #dcfce7;
            color: #166534;
        }

        .character-role.antagonist {
            background: #fee2e2;
            color: #991b1b;
        }

        .character-role.supporting {
            background: #dbeafe;
            color: #1e40af;
        }

        .character-role.minor {
            background: #f3f4f6;
            color: #4b5563;
        }

        .character-role.narrator {
            background: #fef3c7;
            color: #92400e;
        }

        .character-role.other {
            background: #f3e8ff;
            color: #7e22ce;
        }

        .character-note-preview {
            font-size: 0.8125rem;
            color: var(--text-muted);
            line-height: 1.5;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        /* Selection Popup - Character button styling */
        .annotation-selection-popup .character-note-btn {
            background: #ede9fe;
            color: #5b21b6;
        }

        .annotation-selection-popup .character-note-btn:hover {
            background: #ddd6fe;
            color: #4c1d95;
        }

        /* ========================================
           IMPORT MODAL STYLES
           ======================================== */

        .import-modal-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
            padding: 1rem;
        }

        .import-modal {
            background: white;
            border-radius: 12px;
            max-width: 700px;
            width: 100%;
            max-height: 90vh;
            display: flex;
            flex-direction: column;
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
        }

        .import-modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1.25rem 1.5rem;
            border-bottom: 1px solid var(--border-color);
        }

        .import-modal-header h2 {
            font-size: 1.25rem;
            margin: 0;
            color: var(--text-primary);
        }

        .import-modal-close {
            background: none;
            border: none;
            font-size: 1.75rem;
            color: var(--text-muted);
            cursor: pointer;
            line-height: 1;
            padding: 0;
        }

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

        .import-modal-tabs {
            display: flex;
            border-bottom: 1px solid var(--border-color);
            padding: 0 1.5rem;
        }

        .import-modal-tabs .tab-btn {
            background: none;
            border: none;
            padding: 1rem 1.5rem;
            font-size: 0.9375rem;
            color: var(--text-muted);
            cursor: pointer;
            border-bottom: 2px solid transparent;
            margin-bottom: -1px;
            transition: color 0.2s, border-color 0.2s;
        }

        .import-modal-tabs .tab-btn:hover {
            color: var(--text-primary);
        }

        .import-modal-tabs .tab-btn.active {
            color: var(--primary-color);
            border-bottom-color: var(--primary-color);
            font-weight: 500;
        }

        .import-modal-body {
            padding: 1.5rem;
            overflow-y: auto;
            flex: 1;
        }

        .import-tab {
            display: none;
        }

        .import-tab.active {
            display: block;
        }

        .tab-description {
            color: var(--text-muted);
            font-size: 0.875rem;
            margin-bottom: 1rem;
        }

        .search-row {
            display: flex;
            gap: 0.75rem;
            margin-bottom: 1rem;
        }

        .search-row input {
            flex: 1;
            padding: 0.75rem 1rem;
            border: 1px solid var(--border-color);
            border-radius: 6px;
            font-size: 0.9375rem;
        }

        .search-row input:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px var(--primary-light);
        }

        .gutenberg-results {
            max-height: 350px;
            overflow-y: auto;
            border: 1px solid var(--border-color);
            border-radius: 8px;
        }

        .gutenberg-results .results-placeholder,
        .gutenberg-results .no-results,
        .gutenberg-results .error-message {
            padding: 2rem;
            text-align: center;
            color: var(--text-muted);
        }

        .gutenberg-results .error-message {
            color: var(--danger);
        }

        .gutenberg-book {
            padding: 1rem;
            border-bottom: 1px solid var(--border-color);
            cursor: pointer;
            transition: background 0.15s;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 1rem;
        }

        .gutenberg-book:last-child {
            border-bottom: none;
        }

        .gutenberg-book:hover {
            background: var(--background);
        }

        .gutenberg-book.selected {
            background: var(--primary-light);
            border-left: 3px solid var(--primary-color);
        }

        .gutenberg-book.no-text {
            opacity: 0.6;
        }

        .gutenberg-book .book-info {
            display: flex;
            flex-direction: column;
            gap: 0.25rem;
            flex: 1;
        }

        .gutenberg-book .book-title {
            color: var(--text-primary);
            font-size: 0.9375rem;
        }

        .gutenberg-book .book-author {
            color: var(--text-muted);
            font-size: 0.8125rem;
        }

        .gutenberg-book .book-subjects {
            color: var(--text-muted);
            font-size: 0.75rem;
            font-style: italic;
        }

        .gutenberg-book .book-meta {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 0.25rem;
        }

        .gutenberg-book .book-id {
            font-size: 0.75rem;
            color: var(--text-muted);
        }

        .gutenberg-book .no-text-badge {
            font-size: 0.6875rem;
            background: #fef3c7;
            color: #92400e;
            padding: 0.125rem 0.5rem;
            border-radius: 9999px;
        }

        .gutenberg-results .more-results {
            padding: 0.75rem;
            text-align: center;
            color: var(--text-muted);
            font-size: 0.8125rem;
            background: var(--background);
            border-top: 1px solid var(--border-color);
        }

        /* Gutenberg Preview Panel */
        .gutenberg-preview {
            padding: 0.5rem;
        }

        .preview-loading {
            text-align: center;
            padding: 3rem 2rem;
        }

        .preview-loading p {
            margin: 0.5rem 0 0;
            color: var(--text-primary);
        }

        .preview-loading-sub {
            font-size: 0.8125rem;
            color: var(--text-muted) !important;
        }

        .preview-error {
            text-align: center;
            padding: 2rem;
        }

        .preview-header {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 1rem;
            padding-bottom: 0.75rem;
            border-bottom: 1px solid var(--border-color);
        }

        .preview-title {
            margin: 0;
            font-size: 1.125rem;
            font-weight: 600;
            color: var(--text-primary);
        }

        .preview-meta {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1rem;
            margin-bottom: 1rem;
            padding: 0.75rem;
            background: var(--background);
            border-radius: 6px;
        }

        .meta-row {
            display: flex;
            flex-direction: column;
            gap: 0.125rem;
        }

        .meta-label {
            font-size: 0.6875rem;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .meta-value {
            font-size: 0.875rem;
            color: var(--text-primary);
        }

        .preview-warnings {
            margin-bottom: 1rem;
            padding: 0.75rem;
            background: #fef3c7;
            border: 1px solid #f0a030;
            border-radius: 6px;
        }

        .warning-item {
            padding: 0.25rem 0;
            color: #92400e;
            font-size: 0.875rem;
        }

        .preview-section {
            margin-bottom: 1rem;
        }

        .preview-section h4 {
            font-size: 0.875rem;
            font-weight: 600;
            color: var(--text-primary);
            margin: 0 0 0.5rem 0;
        }

        .preview-structure-summary {
            font-size: 0.875rem;
            color: var(--primary-color);
            font-weight: 500;
            margin-bottom: 0.5rem;
        }

        .structure-tree {
            max-height: 150px;
            overflow-y: auto;
            padding: 0.5rem;
            background: var(--background);
            border-radius: 6px;
            font-size: 0.8125rem;
        }

        .structure-tree ul {
            list-style: none;
            padding-left: 1rem;
            margin: 0;
        }

        .structure-tree > ul {
            padding-left: 0;
        }

        .structure-item {
            padding: 0.125rem 0;
        }

        .structure-type {
            font-size: 0.6875rem;
            text-transform: uppercase;
            color: var(--text-muted);
            margin-right: 0.5rem;
        }

        .structure-title-text {
            color: var(--text-primary);
        }

        .no-structure {
            color: var(--text-muted);
            font-style: italic;
            padding: 0.5rem;
        }

        .text-preview-content {
            max-height: 120px;
            overflow-y: auto;
            padding: 0.75rem;
            background: #f9fafb;
            border: 1px solid var(--border-color);
            border-radius: 6px;
            font-family: Georgia, serif;
            font-size: 0.8125rem;
            line-height: 1.6;
            white-space: pre-wrap;
        }

        .preview-options {
            padding-top: 0.75rem;
            border-top: 1px solid var(--border-color);
        }

        .option-checkbox {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.375rem 0;
            cursor: pointer;
            font-size: 0.875rem;
        }

        .option-checkbox input[type="checkbox"] {
            width: 1rem;
            height: 1rem;
            accent-color: var(--primary-color);
        }

        .option-checkbox input[type="checkbox"]:disabled {
            opacity: 0.5;
        }

        .loading-inline {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            padding: 2rem;
            color: var(--text-muted);
        }

        .loading-spinner.small {
            width: 16px;
            height: 16px;
            border-width: 2px;
            display: inline-block;
            vertical-align: middle;
        }

        /* Paste tab form styles */
        .import-tab .form-group {
            margin-bottom: 1rem;
        }

        .import-tab .form-group label {
            display: block;
            font-weight: 500;
            margin-bottom: 0.375rem;
            font-size: 0.875rem;
            color: var(--text-primary);
        }

        .import-tab .form-group .required {
            color: var(--danger);
        }

        .import-tab .form-group input,
        .import-tab .form-group select,
        .import-tab .form-group textarea {
            width: 100%;
            padding: 0.625rem 0.875rem;
            border: 1px solid var(--border-color);
            border-radius: 6px;
            font-size: 0.9375rem;
            font-family: inherit;
        }

        .import-tab .form-group input:focus,
        .import-tab .form-group select:focus,
        .import-tab .form-group textarea:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px var(--primary-light);
        }

        .import-tab .form-group textarea {
            resize: vertical;
            min-height: 150px;
            font-family: Georgia, 'Times New Roman', serif;
            line-height: 1.6;
        }

        .import-tab .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
        }

        .import-tab .char-count {
            display: block;
            text-align: right;
            font-size: 0.75rem;
            color: var(--text-muted);
            margin-top: 0.375rem;
        }

        .import-modal-footer {
            display: flex;
            justify-content: flex-end;
            gap: 0.75rem;
            padding: 1rem 1.5rem;
            border-top: 1px solid var(--border-color);
            background: var(--background);
            border-radius: 0 0 12px 12px;
        }

        /* Import button visibility */
        .import-btn {
            display: none;
        }

        .import-btn.visible {
            display: inline-flex;
        }

        /* Wide modal variant */
        .import-modal-wide {
            max-width: 800px;
        }

        /* Private notice banner */
        .private-notice {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.75rem 1rem;
            background: #f0f9ff;
            border: 1px solid #bae6fd;
            border-radius: var(--radius-md);
            color: #0369a1;
            font-size: 0.8125rem;
            margin-bottom: 1rem;
        }

        .private-notice svg {
            flex-shrink: 0;
            stroke: #0369a1;
        }

        /* File Upload Area */
        .upload-area {
            border: 2px dashed var(--border-color);
            border-radius: var(--radius-lg);
            padding: 3rem 2rem;
            text-align: center;
            cursor: pointer;
            transition: all 0.2s ease;
            background: var(--background);
        }

        .upload-area:hover {
            border-color: var(--primary-color);
            background: var(--primary-light);
        }

        .upload-area.dragover {
            border-color: var(--primary-color);
            background: var(--primary-light);
            transform: scale(1.01);
        }

        .upload-icon {
            margin-bottom: 1rem;
            color: var(--text-muted);
        }

        .upload-area:hover .upload-icon,
        .upload-area.dragover .upload-icon {
            color: var(--primary-color);
        }

        .upload-text {
            font-size: 1rem;
            color: var(--text-primary);
            margin-bottom: 0.5rem;
        }

        .upload-formats {
            font-size: 0.8125rem;
            color: var(--text-muted);
        }

        /* File Preview */
        .file-preview {
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            padding: 1rem;
            background: var(--card-bg);
            margin-bottom: 1rem;
        }

        .file-preview-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .file-info {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            color: var(--text-primary);
            font-weight: 500;
        }

        .file-info svg {
            color: var(--primary-color);
        }

        .file-size {
            color: var(--text-muted);
            font-weight: 400;
            font-size: 0.875rem;
        }

        /* Extract Status */
        .extract-status {
            margin-top: 0.75rem;
            padding: 0.5rem 0.75rem;
            border-radius: var(--radius-sm);
            font-size: 0.875rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .extract-status.loading {
            background: #f0f9ff;
            color: #0369a1;
        }

        .extract-status.success {
            background: #f0fdf4;
            color: #166534;
        }

        .extract-status.error {
            background: #fef2f2;
            color: #991b1b;
        }

        /* File/URL Metadata Form */
        .file-metadata,
        .url-metadata {
            border-top: 1px solid var(--border-color);
            padding-top: 1rem;
            margin-top: 1rem;
        }

        /* Text Preview */
        .text-preview {
            max-height: 150px;
            overflow-y: auto;
            padding: 0.75rem;
            background: var(--background);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            font-family: Georgia, 'Times New Roman', serif;
            font-size: 0.875rem;
            line-height: 1.6;
            color: var(--text-secondary);
            white-space: pre-wrap;
        }

        /* URL Preview */
        .url-preview {
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            padding: 1rem;
            background: var(--card-bg);
            margin-bottom: 1rem;
        }

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

        .url-title {
            font-weight: 600;
            color: var(--text-primary);
        }

        .url-char-count {
            font-size: 0.8125rem;
            color: var(--text-muted);
        }

        /* Button variations */
        .btn-sm {
            padding: 0.375rem 0.75rem;
            font-size: 0.8125rem;
        }

        .btn-danger-outline {
            background: transparent;
            border: 1px solid #ef4444;
            color: #ef4444;
        }

        .btn-danger-outline:hover {
            background: #ef4444;
            color: white;
        }

        .btn-danger {
            background: #ef4444;
            color: white;
            border-color: #ef4444;
        }

        .btn-danger:hover {
            background: #dc2626;
            border-color: #dc2626;
        }

        /* Owner Actions (Edit/Delete buttons) */
        .work-header-top {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 1rem;
        }

        .work-header-top h1 {
            margin: 0;
        }

        .owner-actions {
            display: flex;
            gap: 0.5rem;
            flex-shrink: 0;
        }

        .owner-actions .btn {
            display: inline-flex;
            align-items: center;
            gap: 0.375rem;
        }

        /* Modal styles for Edit/Delete */
        .modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            align-items: center;
            justify-content: center;
        }

        .modal-overlay.active {
            display: flex;
        }

        .modal {
            background: white;
            border-radius: var(--radius-lg);
            max-width: 500px;
            width: 90%;
            max-height: 90vh;
            overflow-y: auto;
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }

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

        .modal-header h2 {
            margin: 0;
            font-size: 1.25rem;
        }

        .modal-close {
            background: none;
            border: none;
            font-size: 1.5rem;
            cursor: pointer;
            color: var(--text-muted);
            line-height: 1;
            padding: 0;
        }

        .modal-close:hover {
            color: var(--text-dark);
        }

        .modal-body {
            padding: 1.5rem;
        }

        .modal-footer {
            display: flex;
            justify-content: flex-end;
            gap: 0.75rem;
            padding: 1rem 1.5rem;
            border-top: 1px solid var(--border-color);
        }

        /* Form elements in modal */
        .form-textarea {
            width: 100%;
            padding: 0.625rem 0.75rem;
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            font-family: inherit;
            font-size: 0.875rem;
            resize: vertical;
        }

        .form-textarea:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 2px rgba(194, 65, 12, 0.1);
        }

        .required {
            color: var(--danger);
        }

        /* Delete modal specific styles */
        .delete-modal .modal-body {
            text-align: center;
        }

        .delete-warning {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.75rem;
            font-size: 1.125rem;
            margin-bottom: 1rem;
        }

        .delete-warning svg {
            color: var(--danger);
            flex-shrink: 0;
        }

        .delete-note {
            color: var(--text-muted);
            font-size: 0.875rem;
            margin: 0;
        }

/* =====================================================
   SPEED READ (RSVP) MODAL
   ===================================================== */

.speed-read-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 1rem;
}

.speed-read-overlay.hidden {
    display: none;
}

.speed-read-modal {
    background: #1a1a1a;
    border-radius: 16px;
    width: 100%;
    max-width: 700px;
    color: #fff;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5);
}

.speed-read-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #333;
}

.speed-read-header h3 {
    margin: 0;
    font-size: 1rem;
    color: #ccc;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.speed-read-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #666;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.15s;
}

.speed-read-close:hover {
    color: #fff;
}

/* Word Display Area */
.speed-read-display {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    user-select: none;
}

/* Word container - fixed height box where the word displays */
.speed-read-word-container {
    position: relative;
    width: 100%;
    height: 100px;
}

/* Fixed center marker - vertical line with tick marks */
.speed-read-center-marker {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    transform: translateX(-50%);
    width: 2px;
    pointer-events: none;
    z-index: 1;
}

/* Top tick mark */
.speed-read-center-marker::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 0;
    width: 2px;
    height: 15px;
    background: var(--primary-color);
    opacity: 0.5;
}

/* Bottom tick mark */
.speed-read-center-marker::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 0;
    width: 2px;
    height: 15px;
    background: var(--primary-color);
    opacity: 0.5;
}

/* Word area - absolutely positioned, vertically centered */
.speed-read-word-area {
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 2.5rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    white-space: nowrap;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    z-index: 2;
    /* left position set dynamically by JS to align ORP at center */
}

/* Before part - flows right, text aligned right so it ends at ORP */
.speed-read-word-area .orp-before {
    color: #666;
    text-align: right;
    display: inline-block;
}

/* ORP letter - highlighted, this is the fixed point */
.speed-read-word-area .orp-letter {
    color: var(--primary-color);
    font-weight: 600;
    display: inline-block;
}

/* After part - flows left from ORP */
.speed-read-word-area .orp-after {
    color: #fff;
    display: inline-block;
}

/* Focus guides - subtle lines to center the eye */
.speed-read-focus-guides {
    position: relative;
    width: 100%;
    max-width: 400px;
    margin-bottom: 0.5rem;
}

.speed-read-focus-guides::before,
.speed-read-focus-guides::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 30px;
    height: 2px;
    background: #333;
}

.speed-read-focus-guides::before {
    left: 0;
}

.speed-read-focus-guides::after {
    right: 0;
}

/* Sentence Preview - fixed 3 lines, current word starts line 3 */
.speed-read-preview {
    margin-top: 1.5rem;
    padding: 1rem 1.25rem;
    background: #222;
    border-radius: 8px;
    max-width: 600px;
    text-align: center;
    width: 100%;
    height: 6em;
    overflow: hidden;
}

.speed-read-preview-text {
    color: #555;
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0;
}

.speed-read-preview-text .current-word {
    color: #888;
    font-weight: 500;
}

/* Controls Section */
.speed-read-controls {
    padding: 1.5rem;
    border-top: 1px solid #333;
    background: #151515;
    border-radius: 0 0 16px 16px;
}

/* Playback Controls */
.speed-read-playback {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.speed-read-btn {
    background: #333;
    border: none;
    color: #fff;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, transform 0.1s;
}

.speed-read-btn:hover {
    background: #444;
}

.speed-read-btn:active {
    transform: scale(0.95);
}

.speed-read-btn.play-pause {
    width: 56px;
    height: 56px;
    background: var(--primary-color);
    font-size: 1.25rem;
}

.speed-read-btn.play-pause:hover {
    background: var(--primary-hover);
}

/* Speed Control */
.speed-read-speed-control {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.speed-read-speed-label {
    color: #888;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.speed-read-wpm {
    color: var(--primary-color);
    font-size: 1.25rem;
    font-weight: 600;
    min-width: 80px;
    text-align: center;
}

.speed-read-slider {
    width: 200px;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    background: #333;
    border-radius: 3px;
    outline: none;
}

.speed-read-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    background: var(--primary-color);
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.1s;
}

.speed-read-slider::-webkit-slider-thumb:hover {
    transform: scale(1.1);
}

.speed-read-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: var(--primary-color);
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

/* Progress Slider */
.speed-read-progress {
    margin-bottom: 0.75rem;
}

.speed-read-progress-slider {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    height: 12px;
    background: #333;
    border-radius: 6px;
    outline: none;
    cursor: pointer;
}

.speed-read-progress-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    background: var(--primary-color);
    border-radius: 50%;
    cursor: grab;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    transition: transform 0.1s, box-shadow 0.1s;
}

.speed-read-progress-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
}

.speed-read-progress-slider::-webkit-slider-thumb:active {
    cursor: grabbing;
    transform: scale(1.1);
}

.speed-read-progress-slider::-moz-range-thumb {
    width: 24px;
    height: 24px;
    background: var(--primary-color);
    border-radius: 50%;
    cursor: grab;
    border: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.speed-read-progress-slider::-moz-range-thumb:hover {
    transform: scale(1.15);
}

.speed-read-progress-slider::-moz-range-track {
    height: 12px;
    background: #333;
    border-radius: 6px;
}

.speed-read-progress-info {
    display: flex;
    justify-content: space-between;
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: #666;
}

/* Settings Row */
.speed-read-settings {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid #333;
}

.speed-read-setting {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #888;
    font-size: 0.8rem;
    cursor: pointer;
}

.speed-read-setting input[type="checkbox"] {
    accent-color: var(--primary-color);
}

.speed-read-font-size {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.speed-read-font-size button {
    background: #333;
    border: none;
    color: #888;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
}

.speed-read-font-size button:hover {
    background: #444;
    color: #fff;
}

/* Mobile Responsive for Speed Read */
@media (max-width: 600px) {
    .speed-read-modal {
        max-width: 100%;
        border-radius: 12px;
        margin: 0.5rem;
    }

    .speed-read-display {
        padding: 3rem 1rem;
    }

    .speed-read-word-area {
        font-size: 2rem;
    }

    .speed-read-controls {
        padding: 1rem;
    }

    .speed-read-speed-control {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .speed-read-slider {
        width: 100%;
        order: 3;
    }

    .speed-read-settings {
        flex-wrap: wrap;
        gap: 1rem;
    }

    .speed-read-btn {
        width: 40px;
        height: 40px;
    }

    .speed-read-btn.play-pause {
        width: 50px;
        height: 50px;
    }
}

/* Speed Read Button on Cards */
.btn-speed-read {
    background: linear-gradient(135deg, #f0a030 0%, #f0a030 100%);
    color: white;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.btn-speed-read:hover {
    background: linear-gradient(135deg, #f0a030 0%, #d08520 100%);
}

        /* Responsive */
        @media (max-width: 768px) {
            .texts-container {
                padding: 1rem;
            }

            .filter-bar {
                flex-direction: column;
                align-items: stretch;
            }

            .filter-bar input[type="search"] {
                width: 100%;
            }

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

            .work-header {
                padding: 1.5rem;
            }

            .work-header h1 {
                font-size: 1.5rem;
            }

            .work-header .stats {
                gap: 1rem;
            }

            .sentences-container {
                padding: 1rem;
            }

            .import-modal {
                max-height: 95vh;
            }

            .import-tab .form-row {
                grid-template-columns: 1fr;
            }

            /* Speed Read responsive */
            .speed-read-modal {
                width: 100%;
            }

            .speed-read-display {
                padding: 2rem 1rem;
                min-height: 140px;
            }

            .speed-read-word {
                font-size: 2rem;
            }

            .speed-read-play-btn {
                width: 48px;
                height: 48px;
            }
        }

        /* System Text Badge */
        .system-badge {
            background: linear-gradient(135deg, #059669, #047857) !important;
            color: white !important;
            font-weight: 600;
        }

        /* Visibility Toggle in Edit Modal */
        .toggle-label {
            display: flex;
            align-items: center;
            gap: 1rem;
            cursor: pointer;
        }

        .toggle-label-text {
            font-weight: 500;
            min-width: 70px;
        }

        .toggle-switch {
            position: relative;
            width: 48px;
            height: 26px;
            flex-shrink: 0;
        }

        .toggle-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .toggle-slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: 0.3s;
            border-radius: 26px;
        }

        .toggle-slider:before {
            position: absolute;
            content: "";
            height: 20px;
            width: 20px;
            left: 3px;
            bottom: 3px;
            background-color: white;
            transition: 0.3s;
            border-radius: 50%;
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }

        .toggle-switch input:checked + .toggle-slider {
            background: linear-gradient(135deg, #059669, #047857);
        }

        .toggle-switch input:checked + .toggle-slider:before {
            transform: translateX(22px);
        }

        .toggle-switch input:focus + .toggle-slider {
            box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.2);
        }

        .visibility-label {
            font-size: 0.875rem;
            font-weight: 500;
            padding: 0.25rem 0.5rem;
            border-radius: 4px;
            transition: all 0.3s;
        }

        .visibility-label.system {
            color: #059669;
            background: #d1fae5;
        }

        .visibility-label.private {
            color: #6b7280;
            background: #f3f4f6;
        }

        .form-help {
            font-size: 0.75rem;
            color: var(--text-muted);
            margin-top: 0.5rem;
            line-height: 1.4;
        }

        #visibility-toggle-group {
            margin-top: 1rem;
            padding-top: 1rem;
            border-top: 1px solid var(--border-color);
        }

        /* Large Edit Modal */
        .edit-modal-large {
            max-width: 800px;
            width: 95%;
            max-height: 90vh;
            display: flex;
            flex-direction: column;
        }

        .edit-modal-large .modal-body {
            flex: 1;
            overflow-y: auto;
            max-height: calc(90vh - 180px);
        }

        /* Edit Modal Tabs */
        .edit-tabs {
            display: flex;
            border-bottom: 2px solid var(--border-color);
            padding: 0 1.5rem;
            background: var(--bg-secondary);
        }

        .edit-tab {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.75rem 1.25rem;
            border: none;
            background: none;
            color: var(--text-secondary);
            font-size: 0.9rem;
            font-weight: 500;
            cursor: pointer;
            border-bottom: 2px solid transparent;
            margin-bottom: -2px;
            transition: all 0.2s;
        }

        .edit-tab:hover {
            color: var(--text-primary);
        }

        .edit-tab.active {
            color: var(--primary-color);
            border-bottom-color: var(--primary-color);
        }

        .edit-tab svg {
            opacity: 0.7;
        }

        .edit-tab.active svg {
            opacity: 1;
        }

        .edit-tab-content {
            display: none;
        }

        .edit-tab-content.active {
            display: block;
        }

        /* Content Editor */
        .content-edit-info {
            background: #fef3c7;
            border: 1px solid #f0a030;
            border-radius: var(--radius-md);
            padding: 0.75rem 1rem;
            margin-bottom: 1rem;
        }

        .content-edit-info p {
            margin: 0;
            font-size: 0.875rem;
            color: #92400e;
        }

        .content-edit-info p + p {
            margin-top: 0.5rem;
        }

        .content-edit-cleanup {
            font-size: 0.8rem !important;
            opacity: 0.85;
        }

        .content-label-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 0.5rem;
        }

        .content-label-row label:first-child {
            font-weight: 500;
        }

        .force-reparse-label {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.875rem;
            color: var(--text-secondary);
            cursor: pointer;
        }

        .force-reparse-label input {
            cursor: pointer;
        }

        .text-content-editor {
            font-family: 'Georgia', 'Times New Roman', serif;
            font-size: 1rem;
            line-height: 1.7;
            min-height: 400px;
            resize: vertical;
        }

        .content-stats {
            display: flex;
            gap: 1.5rem;
            padding: 0.75rem 0;
            font-size: 0.875rem;
            color: var(--text-secondary);
        }

        .content-stats span {
            display: flex;
            align-items: center;
            gap: 0.25rem;
        }