/* ===== PDF Translate Reader Styles ===== */

/* Reset */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; }
body {
    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: #F8FAFC;
    color: #1E293B;
    font-size: 16px;
    line-height: 1.6;
}

/* ===== Menu Page ===== */
.menu-page {
    position: fixed; inset: 0;
    background: linear-gradient(135deg, #0F172A 0%, #1E293B 50%, #334155 100%);
    display: flex; align-items: center; justify-content: center;
    z-index: 1000;
    padding: 20px;
    overflow-y: auto;
}

/* Subtle animated background pattern */
.menu-page::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
        radial-gradient(circle at 20% 80%, rgba(99,102,241,0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(139,92,246,0.15) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(59,130,246,0.08) 0%, transparent 60%);
    pointer-events: none;
}

.menu-card {
    background: rgba(255,255,255,0.98);
    border-radius: 24px;
    padding: 36px 28px;
    max-width: 460px;
    width: 100%;
    box-shadow: 0 32px 64px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.1);
    backdrop-filter: blur(20px);
    position: relative;
    z-index: 1;
    animation: cardSlideUp 0.4s ease-out;
}

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

.menu-header { text-align: center; margin-bottom: 28px; }
.menu-header h1 {
    font-size: 26px;
    background: linear-gradient(135deg, #6366F1, #8B5CF6, #3B82F6);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 6px;
    font-weight: 800;
    letter-spacing: -0.5px;
}
.menu-subtitle { color: #64748B; font-size: 13px; font-weight: 400; }

/* Menu Buttons */
.menu-buttons { display: flex; flex-direction: column; gap: 10px; }
.menu-btn {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 18px;
    border: 1.5px solid #E2E8F0;
    border-radius: 12px;
    background: white;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: left;
    width: 100%;
}
.menu-btn:hover {
    border-color: #6366F1; background: #F5F3FF;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(99,102,241,0.15);
}
.menu-btn:active { transform: translateY(0); }
.menu-btn.primary {
    border-color: #6366F1;
    background: linear-gradient(135deg, #6366F1, #8B5CF6);
    box-shadow: 0 4px 14px rgba(99,102,241,0.35);
}
.menu-btn.primary:hover {
    background: linear-gradient(135deg, #5558E5, #7C3AED);
    box-shadow: 0 6px 20px rgba(99,102,241,0.4);
}
.menu-btn.primary .menu-btn-text strong,
.menu-btn.primary .menu-btn-text small { color: white; }

.menu-btn-icon { font-size: 26px; flex-shrink: 0; }
.menu-btn-text { display: flex; flex-direction: column; }
.menu-btn-text strong { font-size: 14px; font-weight: 600; color: #1E293B; }
.menu-btn-text small { font-size: 12px; color: #94A3B8; margin-top: 1px; }

.menu-footer {
    margin-top: 16px; padding-top: 16px;
    border-top: 1px solid #E2E8F0;
    display: flex; flex-direction: column; align-items: center;
    gap: 10px;
}

/* Toggle Switch */
.pet-toggle-label {
    display: flex; align-items: center; gap: 12px;
    cursor: pointer; font-size: 14px; color: #64748B;
}
.toggle-slider {
    width: 44px; height: 24px;
    background: #CBD5E1; border-radius: 12px;
    position: relative; transition: background 0.3s;
}
.toggle-slider::after {
    content: ''; position: absolute;
    top: 2px; left: 2px; width: 20px; height: 20px;
    background: white; border-radius: 50%;
    transition: transform 0.3s;
}
.pet-toggle-label input { display: none; }
.pet-toggle-label input:checked + .toggle-slider { background: #6366F1; }
.pet-toggle-label input:checked + .toggle-slider::after { transform: translateX(20px); }

/* ===== PDF Management Section ===== */
.pdf-management-section {
    margin-bottom: 16px; padding-bottom: 16px;
    border-bottom: 1px solid #E2E8F0;
}
.backup-section-label {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 1.2px; color: #94A3B8;
    margin: 12px 0 8px; padding: 0 2px;
}
.backup-section-label:first-child { margin-top: 0; }
.backup-action-btn {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px;
    border: 1.5px solid #E2E8F0;
    border-radius: 10px;
    background: white;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: left;
    width: 100%;
    margin-bottom: 6px;
}
.backup-action-btn:hover {
    border-color: #6366F1; background: #F5F3FF;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(99,102,241,0.1);
}
.backup-action-btn.full-library-btn {
    background: linear-gradient(135deg, #FEF3C7, #FDE68A);
    border-color: #F59E0B;
}
.backup-action-btn.full-library-btn:hover {
    background: linear-gradient(135deg, #FDE68A, #FCD34D);
    border-color: #D97706;
    box-shadow: 0 2px 8px rgba(245,158,11,0.2);
}
.backup-action-btn > span { font-size: 13px; font-weight: 600; color: #1E293B; }
.backup-action-btn > small { font-size: 11px; color: #64748B; margin-left: auto; }
.pdf-list-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px;
}
.pdf-list-header h3 {
    font-size: 16px; color: #334155;
    margin: 0;
}
.pdf-empty-hint {
    color: #94A3B8; font-size: 13px;
    text-align: center; padding: 16px 0;
}
.pdf-list-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 14px;
    margin-bottom: 6px;
    background: #FAFBFC;
    border: 1.5px solid #E2E8F0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}
.pdf-list-item::before {
    content: '';
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 3px;
    background: transparent;
    transition: background 0.2s;
}
.pdf-list-item:hover {
    border-color: #6366F1; background: #F5F3FF;
    transform: translateX(2px);
    box-shadow: 0 2px 8px rgba(99,102,241,0.08);
}
.pdf-list-item:hover::before { background: #6366F1; }
.pdf-list-item.active {
    border-color: #6366F1; background: #EDE9FE;
}
.pdf-list-item.active::before { background: #6366F1; }
.pdf-item-info { flex: 1; min-width: 0; cursor: pointer; }
.pdf-item-name {
    font-size: 14px; font-weight: 600; color: #1E293B;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pdf-item-meta {
    font-size: 11px; color: #94A3B8;
}
.pdf-item-actions { display: flex; gap: 6px; flex-shrink: 0; margin-left: 8px; }
.pdf-item-actions button {
    padding: 4px 10px;
    border: 1px solid #E2E8F0; border-radius: 6px;
    background: white; cursor: pointer;
    font-size: 12px; color: #64748B;
    transition: all 0.15s;
}
.pdf-item-actions button:hover { border-color: #6366F1; color: #6366F1; }
.pdf-item-actions .pdf-rename-btn:hover { border-color: #3B82F6; color: #3B82F6; }
.pdf-item-actions .pdf-delete-btn { color: #EF4444; }
.pdf-item-actions .pdf-delete-btn:hover { border-color: #EF4444; color: #EF4444; background: #FEF2F2; }

/* Upload button styling */
.upload-btn {
    margin-top: 12px; margin-bottom: 12px;
    background: linear-gradient(135deg, #6366F1, #8B5CF6) !important;
    border-color: #6366F1 !important;
    box-shadow: 0 4px 14px rgba(99,102,241,0.3);
}
.upload-btn:hover {
    box-shadow: 0 6px 20px rgba(99,102,241,0.4) !important;
}
.upload-btn .menu-btn-icon { font-size: 22px; }
.upload-btn .menu-btn-text strong,
.upload-btn .menu-btn-text small { color: white !important; }

/* Drive link row */
.drive-link-row {
    display: flex; gap: 6px;
    margin-bottom: 8px;
}
.drive-link-row input {
    flex: 1; padding: 8px 12px;
    border: 1.5px solid #E2E8F0; border-radius: 8px;
    font-size: 12px; outline: none; transition: all 0.2s;
}
.drive-link-row input:focus { border-color: #6366F1; box-shadow: 0 0 0 3px rgba(99,102,241,0.1); }
.drive-add-btn {
    padding: 8px 16px;
    border: none; border-radius: 8px;
    background: #6366F1; color: white;
    font-size: 12px; font-weight: 600;
    cursor: pointer; transition: all 0.2s;
}
.drive-add-btn:hover { background: #5558E5; }
.drive-hint {
    font-size: 11px; color: #94A3B8;
    display: block; margin-bottom: 4px;
}

/* ===== Delete Confirmation Popup ===== */
.delete-confirm-info {
    padding: 12px;
    background: #FFF7ED; border-radius: 8px;
    font-size: 13px; color: #9A3412;
    margin-bottom: 16px;
}
.delete-code-display {
    text-align: center; margin-bottom: 16px;
    padding: 16px; background: #F1F5F9; border-radius: 8px;
}
.delete-code-label {
    display: block; font-size: 12px; color: #64748B; margin-bottom: 8px;
}
.delete-code-value {
    font-size: 32px; font-weight: 700; letter-spacing: 8px;
    color: #6366F1; font-family: monospace;
}
.delete-input-row { display: flex; gap: 8px; }
#delete-code-input {
    flex: 1; padding: 12px 16px;
    border: 2px solid #E2E8F0; border-radius: 8px;
    font-size: 18px; text-align: center; letter-spacing: 4px;
    font-family: monospace; outline: none;
}
#delete-code-input:focus { border-color: #EF4444; }
.delete-confirm-btn {
    padding: 12px 24px;
    background: #EF4444; color: white;
    border: none; border-radius: 8px;
    cursor: pointer; font-size: 14px; font-weight: 600;
    transition: background 0.2s;
}
.delete-confirm-btn:hover { background: #DC2626; }
.delete-error {
    margin-top: 12px; font-size: 12px; color: #EF4444; text-align: center;
    min-height: 16px;
}

/* ===== Rename Popup ===== */
.rename-input-row { display: flex; gap: 8px; margin-top: 8px; }
#rename-input {
    flex: 1; padding: 10px 14px;
    border: 2px solid #E2E8F0; border-radius: 8px;
    font-size: 14px; outline: none;
}
#rename-input:focus { border-color: #6366F1; }
.rename-confirm-btn {
    padding: 10px 20px;
    background: #6366F1; color: white;
    border: none; border-radius: 8px;
    cursor: pointer; font-size: 13px; font-weight: 600;
}
.rename-confirm-btn:hover { background: #4F46E5; }

.drive-link-row {
    display: flex; gap: 8px; margin-top: 10px;
}
.drive-link-row input {
    flex: 1; padding: 10px 14px;
    border: 2px solid #E2E8F0; border-radius: 10px;
    font-size: 13px; outline: none;
    transition: border-color 0.2s;
}
.drive-link-row input:focus { border-color: #6366F1; }
.drive-add-btn {
    padding: 10px 18px;
    background: #6366F1; color: white;
    border: none; border-radius: 10px;
    cursor: pointer; font-size: 13px; font-weight: 600;
    transition: background 0.2s;
}
.drive-add-btn:hover { background: #4F46E5; }
.drive-hint {
    display: block; margin-top: 6px;
    font-size: 11px; color: #94A3B8;
}

/* ===== Top Bar ===== */
.top-bar {
    position: fixed; top: 0; left: 0; right: 0;
    height: 56px;
    background: white;
    border-bottom: 1px solid #E2E8F0;
    display: flex; align-items: center;
    padding: 0 16px;
    z-index: 100;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.top-bar-left {
    display: flex; align-items: center; gap: 12px; flex-shrink: 0;
}
.top-bar-left h1 {
    font-size: 16px; font-weight: 700;
    color: #1E293B;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 180px;
}
.menu-btn-sm {
    padding: 8px 12px; border: 1px solid #E2E8F0; border-radius: 8px;
    background: white; cursor: pointer; font-size: 18px;
    transition: all 0.15s; flex-shrink: 0;
}
.menu-btn-sm:hover { background: #F1F5F9; }

.top-bar-center {
    flex: 1; display: flex; justify-content: center;
}
.page-indicator {
    font-size: 14px; color: #64748B;
    background: #F1F5F9; padding: 6px 14px;
    border-radius: 8px; font-weight: 500;
}

.top-bar-right {
    display: flex; align-items: center; gap: 6px; flex-shrink: 0;
}
.action-btn {
    padding: 6px 10px;
    border: 1px solid #E2E8F0; border-radius: 8px;
    background: white; cursor: pointer;
    font-size: 12px; color: #64748B;
    transition: all 0.15s; white-space: nowrap;
}
.action-btn:hover { border-color: #6366F1; color: #6366F1; }
.action-btn.bookmark-btn.is-bookmarked { color: #F59E0B; border-color: #F59E0B; }
.action-btn#btn-read-stop { border-color: #FCA5A5; color: #DC2626; }
.action-btn#btn-read-stop:hover { background: #FEF2F2; }

#goto-page {
    width: 50px; padding: 6px 8px;
    border: 1px solid #E2E8F0; border-radius: 8px;
    font-size: 12px; text-align: center; outline: none;
}
#goto-page:focus { border-color: #6366F1; }
.goto-btn {
    padding: 6px 10px;
    border: 1px solid #E2E8F0; border-radius: 8px;
    background: white; cursor: pointer; font-size: 14px;
    transition: all 0.15s;
}
.goto-btn:hover { border-color: #6366F1; color: #6366F1; }

/* ===== Main Content ===== */
.main-content {
    position: fixed;
    top: 56px; left: 0; right: 0; bottom: 0;
    display: flex;
    overflow: hidden;
}
.image-panel {
    flex: 1; display: flex; align-items: center; justify-content: center;
    background: #F1F5F9;
    overflow: hidden;
    position: relative;
    min-width: 0;
}
#pdf-canvas {
    max-width: 100%;
    max-height: calc(100vh - 56px);
    object-fit: contain;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.text-panel {
    width: 380px; flex-shrink: 0;
    background: white;
    border-left: 1px solid #E2E8F0;
    display: flex; flex-direction: column;
    overflow: hidden;
}
.text-panel-toolbar {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid #E2E8F0;
    background: #F8FAFC;
}
.text-panel-toolbar select {
    padding: 6px 10px;
    border: 1px solid #E2E8F0; border-radius: 6px;
    font-size: 12px; outline: none; background: white;
    cursor: pointer;
}
.text-panel-toolbar .arrow { color: #94A3B8; font-size: 14px; }
.text-panel-body {
    flex: 1; overflow-y: auto; padding: 16px;
}
.text-hint {
    color: #94A3B8; font-size: 13px;
    text-align: center; margin-top: 40px;
}
.text-sentence {
    padding: 10px 12px;
    margin-bottom: 8px;
    background: #F8FAFC;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
    line-height: 1.8;
}
.text-sentence:hover { background: #F1F5F9; }
.text-sentence.selected { background: #EDE9FE; border-left: 3px solid #6366F1; }
.text-word {
    display: inline; cursor: pointer;
    border-radius: 3px; padding: 1px 0;
    transition: background 0.1s;
}
.text-word:hover { background: #FEF3C7; }
.text-translation {
    display: block; margin-top: 4px;
    font-size: 12px; color: #6366F1;
    padding-top: 4px;
    border-top: 1px dashed #E2E8F0;
}
.text-loading {
    color: #94A3B8; font-size: 12px; font-style: italic;
}

/* ===== Loading Overlay ===== */
.loading-overlay {
    position: absolute; inset: 0;
    background: rgba(255,255,255,0.9);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    z-index: 10;
    transition: opacity 0.3s;
}
.loading-overlay.hidden { opacity: 0; pointer-events: none; }
.spinner {
    width: 40px; height: 40px;
    border: 4px solid #E2E8F0;
    border-top-color: #6366F1;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== Text Panel Loading Overlay ===== */
.text-loading-overlay {
    position: absolute; inset: 0;
    background: rgba(255,255,255,0.95);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    z-index: 10;
    transition: opacity 0.3s;
    border-radius: 8px;
}
.text-loading-overlay.hidden { opacity: 0; pointer-events: none; }
.text-loading-overlay .spinner { width: 32px; height: 32px; margin-bottom: 12px; }
.text-loading-overlay p { font-size: 14px; color: #64748B; }

/* ===== Floating Nav Buttons ===== */
.float-prev-btn, .float-next-btn {
    position: fixed;
    top: 50%; transform: translateY(-50%);
    width: 44px; height: 80px;
    border: none; border-radius: 0 12px 12px 0;
    background: rgba(99, 102, 241, 0.85);
    color: white; font-size: 20px;
    cursor: pointer;
    transition: background 0.2s;
    z-index: 50;
    display: flex; align-items: center; justify-content: center;
}
.float-prev-btn { left: 0; border-radius: 0 12px 12px 0; }
.float-next-btn { right: 0; border-radius: 12px 0 0 12px; }
.float-prev-btn:hover, .float-next-btn:hover { background: rgba(99, 102, 241, 1); }

/* ===== Word Popup ===== */
.word-popup {
    position: fixed;
    background: white;
    border: 2px solid #E2E8F0;
    border-radius: 14px;
    padding: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    z-index: 200;
    max-width: 300px;
    min-width: 200px;
}
.word-popup-content { position: relative; }
.popup-close {
    position: absolute; top: -8px; right: -8px;
    width: 24px; height: 24px;
    border-radius: 50%; border: none;
    background: #EF4444; color: white;
    font-size: 16px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.popup-word { font-size: 18px; font-weight: 700; color: #1E293B; margin-bottom: 6px; }
.popup-translation { font-size: 14px; color: #6366F1; margin-bottom: 12px; }
.popup-actions { display: flex; gap: 4px; flex-wrap: wrap; }
.popup-btn {
    flex: 1; min-width: 60px; padding: 6px 8px;
    border: 1px solid #E2E8F0; border-radius: 8px;
    background: white; cursor: pointer;
    font-size: 11px; transition: all 0.15s;
    white-space: nowrap;
}
.popup-btn:hover { border-color: #6366F1; color: #6366F1; }
.popup-btn.ingat-btn { background: #FEF2F2; border-color: #FCA5A5; color: #DC2626; }
.popup-btn.ingat-btn:hover { background: #FEE2E2; }
.popup-btn.extend-btn { background: #F0FDF4; border-color: #86EFAC; color: #16A34A; }
.popup-btn.extend-btn:hover { background: #DCFCE7; }

/* Word popup tag selector */
.word-tag-selector { margin-top: 10px; padding-top: 10px; border-top: 1px solid #E2E8F0; }
.tag-selector-title { font-size: 12px; font-weight: 600; color: #64748B; margin-bottom: 6px; }
.tag-chips { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 8px; }
.tag-chip {
    padding: 4px 10px; border: 1px solid #E2E8F0; border-radius: 16px;
    font-size: 11px; cursor: pointer; transition: all 0.15s;
    background: white; color: #64748B;
}
.tag-chip.active { background: #6366F1; border-color: #6366F1; color: white; }
.tag-chip:hover { border-color: #6366F1; }
.tag-chip-row { display: flex; gap: 4px; }

/* ===== Side Panels ===== */
.side-panel {
    position: fixed;
    right: 0; top: 56px; bottom: 0;
    width: 380px;
    background: white;
    border-left: 1px solid #E2E8F0;
    box-shadow: -4px 0 20px rgba(0,0,0,0.1);
    z-index: 90;
    display: flex; flex-direction: column;
}
.side-panel-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #E2E8F0;
}
.side-panel-header h3 { font-size: 16px; color: #1E293B; }
.panel-close {
    width: 32px; height: 32px;
    border: 1px solid #E2E8F0; border-radius: 8px;
    background: white; cursor: pointer;
    font-size: 18px; color: #64748B;
    display: flex; align-items: center; justify-content: center;
}
.panel-close:hover { background: #FEE2E2; color: #EF4444; border-color: #EF4444; }
.side-panel-body { flex: 1; overflow-y: auto; padding: 16px; }

/* ===== Notes ===== */
.notes-add-btn {
    width: 100%; padding: 12px;
    border: 2px dashed #CBD5E1; border-radius: 10px;
    background: transparent; cursor: pointer;
    font-size: 14px; color: #64748B;
    transition: all 0.2s; margin-bottom: 12px;
}
.notes-add-btn:hover { border-color: #6366F1; color: #6366F1; }
.notes-editor { margin-bottom: 16px; }
.notes-editor-page { margin-bottom: 8px; }
.notes-editor-page small { color: #94A3B8; font-size: 12px; }
/* Note color picker */
.notes-color-row { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.notes-color-label { font-size: 12px; color: #94A3B8; }
.notes-color-btn {
    width: 22px; height: 22px; border-radius: 50%;
    border: 2px solid #E2E8F0; cursor: pointer;
    padding: 0; transition: all 0.15s;
}
.notes-color-btn:hover { transform: scale(1.15); }
.notes-color-btn.active { border-color: #6366F1; box-shadow: 0 0 0 2px rgba(99,102,241,0.3); }
#notes-textarea {
    width: 100%; min-height: 120px;
    padding: 12px; border: 2px solid #E2E8F0;
    border-radius: 10px; font-size: 14px;
    font-family: inherit; resize: vertical;
    outline: none; transition: border-color 0.2s;
}
#notes-textarea:focus { border-color: #6366F1; }
.notes-editor-actions { display: flex; gap: 8px; margin-top: 8px; justify-content: flex-end; }
.notes-editor-save {
    padding: 8px 20px;
    background: #6366F1; color: white;
    border: none; border-radius: 8px;
    cursor: pointer; font-size: 13px;
}
.notes-editor-cancel {
    padding: 8px 20px;
    background: white; color: #64748B;
    border: 1px solid #E2E8F0; border-radius: 8px;
    cursor: pointer; font-size: 13px;
}
.notes-page-list { display: flex; flex-direction: column; gap: 8px; }
.notes-page-item {
    padding: 12px;
    background: #F8FAFC; border: 1px solid #E2E8F0;
    border-radius: 10px; cursor: pointer;
    transition: all 0.15s;
}
.notes-page-item:hover { border-color: #6366F1; }
.notes-page-item.has-color { border-left: 4px solid; }
.notes-page-item-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 6px;
}
.notes-page-num { font-weight: 600; font-size: 13px; color: #1E293B; }
.notes-page-date { font-size: 11px; color: #94A3B8; }
.notes-page-preview { font-size: 12px; color: #64748B; line-height: 1.5; }

/* ===== Perlu Diingat Panel ===== */
.remember-filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.remember-filter-chip {
    padding: 4px 12px;
    border: 1.5px solid #E2E8F0; border-radius: 20px;
    background: white; cursor: pointer;
    font-size: 11px; color: #64748B;
    transition: all 0.15s;
}
.remember-filter-chip:hover { border-color: #6366F1; }
.remember-filter-chip.active { background: #6366F1; color: white; border-color: #6366F1; }
.remember-view-toggle { display: flex; gap: 4px; margin-bottom: 12px; }
.remember-view-btn {
    flex: 1; padding: 6px;
    border: 1.5px solid #E2E8F0; border-radius: 8px;
    background: white; cursor: pointer;
    font-size: 11px; color: #64748B;
    transition: all 0.15s;
}
.remember-view-btn.active { background: #6366F1; color: white; border-color: #6366F1; }
.remember-list { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; max-height: calc(100vh - 200px); }
.remember-item {
    padding: 10px 12px;
    background: #FAFBFC; border: 1.5px solid #E2E8F0;
    border-radius: 10px;
    transition: all 0.15s;
}
.remember-item:hover { border-color: #6366F1; background: #F5F3FF; }
.remember-item-tag {
    display: inline-block; padding: 2px 8px;
    border-radius: 10px; font-size: 10px; font-weight: 600;
    margin-bottom: 4px;
}
.remember-item-tag.tidak-faham { background: #FEF2F2; color: #DC2626; }
.remember-item-tag.kena-ingat { background: #FEF3C7; color: #D97706; }
.remember-item-tag.semakan { background: #EFF6FF; color: #2563EB; }
.remember-item-word { font-size: 14px; font-weight: 600; color: #1E293B; }
.remember-item-translation { font-size: 12px; color: #6366F1; margin-top: 2px; }
.remember-item-meta { font-size: 10px; color: #94A3B8; margin-top: 4px; }
.remember-item-actions { display: flex; gap: 4px; margin-top: 6px; }
.remember-item-actions button {
    padding: 3px 8px;
    border: 1px solid #E2E8F0; border-radius: 6px;
    background: white; cursor: pointer;
    font-size: 11px; color: #64748B;
    transition: all 0.15s;
}
.remember-item-actions button:hover { border-color: #6366F1; color: #6366F1; }
.remember-item-actions .remember-remove-btn { color: #EF4444; }
.remember-item-actions .remember-remove-btn:hover { border-color: #EF4444; background: #FEF2F2; }

/* ===== Backup Panel ===== */
.share-link-box { margin-top: 12px; padding: 12px; background: #F8FAFC; border-radius: 10px; }
.share-link-label { font-size: 12px; color: #64748B; margin-bottom: 8px; }
.share-link-row { display: flex; gap: 8px; }
.share-link-row input {
    flex: 1; padding: 8px 12px;
    border: 1px solid #E2E8F0; border-radius: 8px;
    font-size: 12px; outline: none;
}
.copy-link-btn {
    padding: 8px 14px;
    background: #6366F1; color: white;
    border: none; border-radius: 8px;
    cursor: pointer; font-size: 12px;
}
.share-link-hint { display: block; margin-top: 6px; font-size: 11px; color: #94A3B8; }
.import-section { margin-top: 12px; }
.import-section label { font-size: 12px; color: #64748B; display: block; margin-bottom: 6px; }
.import-section input {
    width: 100%; padding: 10px 14px;
    border: 2px solid #E2E8F0; border-radius: 10px;
    font-size: 13px; outline: none; margin-bottom: 8px;
}
.import-section input:focus { border-color: #6366F1; }
.import-actions { display: flex; gap: 8px; }
.import-actions button {
    flex: 1; padding: 10px;
    border-radius: 8px; cursor: pointer; font-size: 13px;
}
.import-actions button:first-child { background: #6366F1; color: white; border: none; }
.btn-cancel {
    background: white; color: #64748B;
    border: 1px solid #E2E8F0;
}
.full-width { width: 100%; margin-top: 12px; }
.restore-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.restore-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px; background: #F8FAFC;
    border: 1px solid #E2E8F0; border-radius: 10px;
    cursor: pointer; transition: all 0.15s;
}
.restore-item:hover { border-color: #6366F1; }
.restore-item-info { flex: 1; }
.restore-item-remark { font-size: 13px; font-weight: 500; color: #1E293B; }
.restore-item-date { font-size: 11px; color: #94A3B8; }
.restore-item-account { font-size: 11px; color: #6366F1; }
.restore-item-delete {
    background: none; border: none; cursor: pointer;
    font-size: 16px; color: #94A3B8; padding: 4px;
}
.restore-item-delete:hover { color: #EF4444; }
.loading-spinner { text-align: center; color: #94A3B8; padding: 20px; }
.empty-restore { text-align: center; color: #94A3B8; padding: 20px; font-size: 13px; }

/* ===== Restore Popup ===== */
.restore-popup-content {
    padding: 20px;
}
.restore-popup-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px;
}
.restore-popup-header h4 { font-size: 16px; color: #1E293B; }
.tag-popup-close {
    width: 28px; height: 28px;
    border: 1px solid #E2E8F0; border-radius: 6px;
    background: white; cursor: pointer; font-size: 16px;
    display: flex; align-items: center; justify-content: center;
}
.restore-popup-info {
    padding: 12px;
    background: #F8FAFC; border-radius: 10px;
    margin-bottom: 16px; font-size: 13px;
}
.restore-detail-remark { font-weight: 600; color: #1E293B; margin-bottom: 4px; }
.restore-detail-date { font-size: 12px; color: #94A3B8; }
.restore-detail-account { font-size: 12px; color: #6366F1; }
.restore-detail-summary { font-size: 12px; color: #64748B; margin-top: 8px; }
.restore-popup-actions { display: flex; flex-direction: column; gap: 8px; }
.restore-btn {
    padding: 12px; border-radius: 10px;
    border: none; cursor: pointer;
    font-size: 14px; font-weight: 500;
    transition: all 0.15s;
}
.restore-btn.share { background: #3B82F6; color: white; }
.restore-btn.replace { background: #F59E0B; color: white; }
.restore-btn.merge { background: #6366F1; color: white; }
.restore-btn.cancel { background: #F1F5F9; color: #64748B; }

/* ===== Notes Badge ===== */
#notes-page-badge {
    display: inline-block;
    min-width: 18px; height: 18px;
    background: #EF4444; color: white;
    border-radius: 9px; font-size: 10px;
    text-align: center; line-height: 18px;
    margin-left: 4px;
}
#notes-page-badge:empty { display: none; }

.extracted-text {
    padding: 8px 0;
}
.text-paragraph {
    padding: 10px 12px;
    margin-bottom: 10px;
    background: #F8FAFC;
    border-radius: 8px;
    line-height: 1.8;
    font-size: 15px;
    transition: background 0.15s;
}
.text-paragraph:hover {
    background: #F1F5F9;
}
.extract-word {
    display: inline;
    cursor: pointer;
    border-radius: 3px;
    padding: 1px 0;
    transition: background 0.1s;
}
.extract-word:hover {
    background: #FEF3C7;
}
/* Chinese characters: tighter spacing */
.extract-cn {
    padding: 1px 1px;
    margin: 0 0;
}
.para-btns-left {
    display: flex; flex-direction: column; gap: 4px;
    position: absolute; left: 4px; top: 4px;
}
.para-btns-left button {
    width: 28px; height: 28px;
    border: 1px solid #E2E8F0; border-radius: 6px;
    background: white; cursor: pointer;
    font-size: 13px; transition: all 0.15s;
    display: flex; align-items: center; justify-content: center;
}
.para-btns-left .para-read-btn { color: #059669; }
.para-btns-left .para-read-btn:hover { background: #D1FAE5; }
.para-btns-left .para-ingat-btn { color: #DC2626; }
.para-btns-left .para-ingat-btn:hover { background: #FEE2E2; }
.text-paragraph {
    position: relative;
    padding: 8px 8px 8px 40px;
    border-bottom: 1px solid #F1F5F9;
    min-height: 40px;
}
.para-text-content { line-height: 1.7; }
.para-translation {
    margin-top: 8px;
    padding: 10px 12px;
    background: #EDE9FE;
    border-radius: 8px;
    font-size: 13px;
    color: #6366F1;
    line-height: 1.6;
}
.para-translation {
    margin-top: 8px;
    padding: 10px 12px;
    background: #EDE9FE;
    border-radius: 6px;
    font-size: 14px;
    color: #4C1D95;
    border-left: 3px solid #6366F1;
}
.manual-translate-section {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #E2E8F0;
}

/* ===== PDF Text Extractor Styles ===== */

/* ===== Responsive ===== */
@media (max-width: 900px) {
    .main-content { flex-direction: column; }
    .text-panel { width: 100%; height: 40%; border-left: none; border-top: 1px solid #E2E8F0; }
    .image-panel { height: 60%; }
    .side-panel { width: 100%; }
    .top-bar-left h1 { max-width: 120px; }
    .top-bar-right .action-btn span:not(#notes-page-badge) { display: none; }
}

/* Landscape mobile: prioritize image, minimize text panel */
@media (max-height: 500px) and (orientation: landscape) {
    .main-content { flex-direction: column; }
    .image-panel { height: 55%; min-height: 200px; }
    .text-panel { height: 45%; border-left: none; border-top: 1px solid #E2E8F0; overflow-y: auto; }
    .text-panel-toolbar { padding: 6px 12px; }
    .side-panel { width: 100%; top: 48px; }
    .top-bar { height: 44px; }
    .float-prev-btn { height: 50px; }
    .float-next-btn { height: 50px; }
}

@media (max-width: 480px) {
    .menu-card { padding: 24px 16px; }
    .top-bar { padding: 0 8px; }
    .top-bar-left h1 { max-width: 80px; font-size: 14px; }
    .goto-btn, #goto-page { display: none; }
    .float-prev-btn, .float-next-btn { width: 36px; height: 60px; font-size: 16px; }
}

/* Portrait mobile: stack image on top, text below, allow scrolling */
@media (max-height: 800px) and (orientation: portrait) and (max-width: 500px) {
    .image-panel { height: 50%; }
    .text-panel { height: 50%; }
}

/* ===== Print Button & Popup ===== */
.print-option-list {
    display: flex; flex-direction: column; gap: 12px;
    padding: 8px 0;
}
.print-section h5 {
    font-size: 12px; color: #94A3B8; text-transform: uppercase;
    letter-spacing: 0.5px; margin-bottom: 6px;
    padding-bottom: 4px; border-bottom: 1px solid #E2E8F0;
}
.print-option-btn {
    width: 100%; padding: 12px 16px;
    border: 1px solid #E2E8F0; border-radius: 8px;
    background: white; cursor: pointer;
    text-align: left; font-size: 13px; color: #1E293B;
    transition: all 0.15s; margin-bottom: 4px;
}
.print-option-btn:hover {
    border-color: #6366F1; background: #F5F3FF; color: #6366F1;
}

/* ===== Print Media Styles ===== */
@media print {
    body * { visibility: hidden; }
    #print-area, #print-area * { visibility: visible; }
    #print-area {
        position: absolute; left: 0; top: 0; width: 100%;
    }
}