/* ============================================================
 * OCR.AD merged stylesheet (2026-08-09 framework upgrade)
 * ============================================================
 * Order: 1) legacy /styles.css (foundation), 2) legacy /home.css (home overrides)
 * Loading: /assets/css/style.css?v=<filemtime>
 * ============================================================ */

/* ----- legacy /styles.css ----- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    background: #f5f7fa;
    min-height: 100vh;
    padding: 0;
    margin: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
    background-size: 200% 200%;
}

.container {
    background: rgba(255, 255, 255, 0.85);
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    padding: 30px;
    width: 100%;
    max-width: 1200px;
    margin: 30px auto;
}

.upload-area {
    position: relative;
    border: 2px dashed #d1d5db;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    background: white;
    cursor: pointer;
    transition: all 0.3s ease;
}

.upload-area:hover {
    border-color: #3b82f6;
    background: #f8fafc;
}

.upload-icon {
    font-size: 48px;
    color: #9ca3af;
    margin-bottom: 16px;
}

.upload-text {
    color: #4b5563;
    margin-bottom: 8px;
}

.upload-hint {
    color: #9ca3af;
    font-size: 14px;
}

.file-input {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
}

.upload-btn {
    background: #3b82f6;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    width: 100%;
    transition: background 0.3s ease;
    margin-bottom: 10px;
}

.upload-btn:hover {
    background: #2563eb;
}

.upload-btn:disabled {
    background: #9ca3af;
    cursor: not-allowed;
}

.file-counter {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #6b7280;
    font-size: 14px;
    margin-bottom: 10px;
}

.file-counter-add {
    background: #10b981;
    color: white;
    border: none;
    padding: 4px 8px;
    margin: 8px 2px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.3s ease;
}

.file-counter-add:hover {
    background: #059669;
}

.file-counter-add:disabled {
    background: #9ca3af;
    cursor: not-allowed;
}

#status {
    margin-top: 20px;
    padding: 12px;
    border-radius: 6px;
    display: none;
}

#status.success {
    display: block;
    background: #dcfce7;
    color: #166534;
}

#status.error {
    display: block;
    background: #fee2e2;
    color: #991b1b;
}

.empty-list {
    padding: 20px;
    text-align: center;
    color: #9ca3af;
    font-style: italic;
}

.ocr-result {
    margin-top: 10px;
    padding: 10px;
    background-color: #f8fafc;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    display: none;
}

.ocr-result.show {
    display: block;
}

.ocr-text {
    max-height: 150px;
    overflow-y: auto;
    white-space: pre-wrap;
    font-family: monospace;
    font-size: 12px;
    padding: 8px;
    background-color: #f1f5f9;
    border-radius: 4px;
    margin-bottom: 8px;
}

.ocr-meta {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #6b7280;
}

.ocr-meta-item {
    display: flex;
    align-items: center;
}

.ocr-meta-label {
    font-weight: 500;
    margin-right: 4px;
}

.ocr-meta-value {
    color: #1f2937;
}

.ocr-error {
    color: #ef4444;
    font-size: 12px;
    margin-top: 4px;
}

.status-refresh {
    background: none;
    border: none;
    color: #3b82f6;
    font-size: 12px;
    cursor: pointer;
    padding: 0;
    margin-left: 8px;
}

.status-refresh:hover {
    text-decoration: underline;
}

.status-refresh:disabled {
    color: #9ca3af;
    cursor: not-allowed;
}

.status-refresh-icon {
    display: inline-block;
    transform: translateY(-4px);
    width: 12px;
    height: 12px;
    margin-right: 4px;
    margin-left: 8px;
    vertical-align: middle;
}

.status-refresh-icon.spin {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Shared fade-in for any overlay/modal that mounts on top of the page.
   Used by .result-view, .image-preview-modal, and several other overlay
   surfaces — centralizing avoids a missing-animation no-op that would make
   the modal pop in instead of fading. */
@keyframes ocrFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.ocr-mode-selection {
    margin: 20px 0;
}

/* Header Styles */
header {
    background-color: rgba(52, 73, 94, 0.9);
    color: white;
    padding: 15px 0;
    margin-bottom: 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

nav ul {
    display: flex;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

nav ul li {
    margin: 0 15px;
}

nav ul li a {
    color: white;
    text-decoration: none;
    font-weight: bold;
    font-size: 18px;
    transition: color 0.3s ease;
}

nav ul li a:hover {
    color: #3498db;
}

/* Hero Section */
#hero {
    text-align: center;
    background: none;
    color: white;
    padding: 20px 20px;
    margin: 0;
    position: relative;
    z-index: 1;
}

#hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.35);
    z-index: -1;
}

#hero h1 {
    font-size: 2.5rem;
    margin-bottom: 20px;
    color: white;
}

#hero p {
    font-size: 1.2rem;
    margin-bottom: 30px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.cta-button {
    background-color: #ffcc00;
    color: #333;
    padding: 15px 30px;
    font-size: 1.2rem;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    display: inline-block;
}

.cta-button:hover {
    background-color: #3498db;
    color: white;
}

/* About Section */
#about {
    background-color: rgba(255, 255, 255, 0.85);
    padding: 50px 20px;
    text-align: center;
    margin: 0;
}

#about h2 {
    font-size: 2rem;
    margin-bottom: 20px;
    color: #333;
    text-align: left;
}

#about p {
    font-size: 1.1rem;
    color: #555;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

/* Features Section */
#features {
    background-color: rgba(249, 249, 249, 0.85);
    padding: 50px 20px;
    text-align: center;
    margin: 0;
}

#features h2 {
    font-size: 2rem;
    margin-bottom: 20px;
    color: #333;
    text-align: left;
}

#features ul {
    list-style: none;
    padding: 0;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

#features ul li {
    font-size: 1.2rem;
    margin: 15px 0;
    color: #555;
    text-align: left;
    padding-left: 20px;
}

#features ul li strong {
    color: #3498db;
}

/* Footer Section */
footer {
    background-color: rgba(52, 73, 94, 0.9);
    color: white;
    text-align: center;
    padding: 15px 0;
    width: 100%;
    margin: 0;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
}

footer a {
    margin: 0;
    color: white;
    font-size: 14px;
    text-decoration: none;
}

footer a:hover {
    margin: 0;
    color: rgb(232, 65, 179);
    font-size: 14px;
}

footer p {
    margin: 0;
    font-size: 14px;
}
/* 查询次数显示区域 */
.usage-info {
    background-color: rgba(245, 247, 250, 0.65);
    border-radius: 8px;
    padding: 5px 18px;
    margin-bottom: 25px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border: 1px solid rgba(230, 236, 240, 0.9);
}

.usage-count {
    padding: 0 15px;
    text-align: center;
    flex: 1;
    min-width: 120px;
}

.usage-label {
    font-size: 14px;
    color: #555;
    margin-bottom: 5px;
}

.usage-value {
    font-size: 24px;
    font-weight: bold;
    color: #34495e;
}

.usage-progress {
    flex: 2;
    padding: 0 20px;
    min-width: 200px;
}

.progress-bar {
    height: 10px;
    background-color: #e0e0e0;
    border-radius: 5px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background-color: #3498db;
    border-radius: 5px;
    transition: width 0.3s ease;
}

.usage-refresh {
    width: 100%;
    text-align: center;
    font-size: 12px;
    color: #777;
    margin-top: 10px;
}
.main-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 1rem;
    padding-bottom: 1rem;
    background-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 1rem;
}

.nav-logo a {
    display: flex;
    align-items: center;
    font-size: 1.25rem;
    font-weight: bold;
    color: #333;
    text-decoration: none;
}

.nav-logo img {
    height: 36px;
    width: auto;
    margin-right: 12px;
    display: block;
}

.nav-logo span {
    display: inline-block;
    vertical-align: middle;
}

.nav-links {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-links li {
    margin-left: 1.5rem;
    position: relative;
}

.nav-links li a {
    color: #444;
    text-decoration: none;
    font-weight: 500;
    padding: 0.5rem 0;
    display: block;
    transition: color 0.3s;
}

.nav-links li a:hover {
    color: #3b82f6;
}

.nav-links li.active a {
    color: #3b82f6;
}

.nav-links li.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #3b82f6;
    border-radius: 3px 3px 0 0;
}

@media (min-width: 1200px) {
    .main-nav {
        padding-left: calc((100vw - 1200px)/2 + 20px);
        padding-right: calc((100vw - 1200px)/2 + 20px);
    }
}
@media (max-width: 768px) {
    .main-nav {
        flex-direction: column;
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
}
.usage-info.floating-badge {
    position: fixed;
    top: 48px;
    right: 48px;
    z-index: 100;
    opacity: 1;
    min-width: 180px;
    max-width: 260px;
    font-size: 14px;
    padding: 12px 18px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(80,120,255,0.10);
    border: 1px solid #e5e7eb;
    margin-bottom: 0;
}
.usage-info.floating-badge:hover { opacity: 1; }
.usage-info .ocr-badge {
    position: static;
    display: inline-block;
    margin-bottom: 2px;
    margin-right: 0;
    font-size: 13px;
    padding: 2px 10px;
    border-radius: 8px;
    font-weight: bold;
    color: #fff;
    letter-spacing: 1px;
    z-index: 1;
    box-shadow: 0 2px 8px rgba(80,120,255,0.08);
    border: 1.2px solid #e0e7ef;
    opacity: 0.92;
}
.usage-info .ocr-badge.standard { background: #3cf; }
.usage-info .ocr-badge.advanced { background: #fa3; }
.badge-tooltip {
    background: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}
.usage-group {
    margin-bottom: 10px;
}
.usage-group:last-child {
    margin-bottom: 0;
}
.usage-detail {
    margin-left: 18px;
    font-size: 13px;
    color: #444;
    line-height: 1.7;
}

.progress-container {
    margin: 20px 0;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.progress-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 14px;
    color: #4a5568;
}

.progress-bar {
    height: 8px;
    background-color: #e2e8f0;
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: #3b82f6;
    width: 0;
    transition: width 0.3s ease;
}

.progress-stats {
    color: #718096;
}

/* Modal preview styles for image viewing */
.modal-preview {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    overflow: auto;
    align-items: center;
    justify-content: center;
}

.modal-preview-content {
    position: relative;
    max-width: 90%;
    max-height: 90%;
    margin: auto;
}

.modal-preview-image {
    max-width: 100%;
    max-height: 100vh;
    display: block;
    margin: 0 auto;
}

.modal-preview-close {
    position: absolute;
    top: 20px;
    right: 20px;
    color: #fff;
    font-size: 30px;
    font-weight: bold;
    cursor: pointer;
}

.fa-spin {
    animation: fa-spin 2s infinite linear;
}

@keyframes fa-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Responsive layout */
@media (max-width: 992px) {
    .file-item {
        width: calc(50% - 15px);
    }
}

@media (max-width: 768px) {
    .file-item {
        width: 100%;
    }
}

/* 添加查看结果按钮样式 */
.view-result-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 15px;
    background-color: rgba(76, 175, 80, 0.7);
    color: white;
    border-radius: 6px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.3px;
    transition: all 0.3s ease;
    border: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    text-align: center;
    margin-top: 10px;
}

.view-result-btn:hover {
    background-color: rgba(69, 160, 73, 0.9);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.view-result-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}

.view-result-btn i {
    margin-right: 6px;
    font-size: 13px;
    position: relative;
    top: 0;
}

.file-preview .view-result-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    background-color: rgba(76, 175, 80, 0.7);
    margin-top: 0;
}

.file-preview .view-result-btn:hover {
    background-color: rgba(76, 175, 80, 0.9);
    transform: translate(-50%, -50%) scale(1.05);
}

/* 主用量区卡片风格，确保Quota Usage直接显示 */
.usage-info .badge-tooltip {
    display: block !important;
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    padding: 16px 20px;
    margin: 0 auto 20px auto;
    width: 100%;
    max-width: 350px;
}

.usage-info .tooltip-header {
    background: none;
    color: #3498db;
    font-size: 16px;
    font-weight: bold;
    padding: 0 0 8px 0;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 10px;
}

.usage-info .tooltip-body {
    padding: 0;
}

.usage-info .tooltip-stats {
    font-size: 15px;
    color: #333;
    margin-top: 10px;
}

.usage-info .tooltip-stats div {
    margin-bottom: 6px;
}

.usage-info .progress-bar {
    margin: 10px 0;
}

/* ---------- 2. ocr-btn (legacy upload page, kept for compatibility) ---------- */
/* NOTE: the modern tool-page uses .ocr-btn from the modern block (line ~3278).
   These rules below only apply to the legacy upload-page layout. */

/* ---------- end ocr-btn legacy ---------- */

#uploadForm {
    text-align: center; /* Center inline/inline-block elements within the form */
}

.icon-standard {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%) !important;
}
.icon-document {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%) !important;
}
.icon-table {
  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%) !important;
}
.icon-ppt {
  background: linear-gradient(135deg, #ff6b6b 0%, #ffa502 100%) !important;
}

/* 保证结果弹层和下载按钮样式优先级最高 */
.result-view { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.35); }
.result-container { background: #fff; border-radius: 12px; box-shadow: 0 4px 24px rgba(0,0,0,0.18); padding: 30px; width: 100%; max-width: 1200px; position: relative; margin: 24px; }
@media (max-width: 768px) { .result-container { max-width: 98vw; padding: 10px; margin: 4px; } }
.result-info {display:flex;flex-wrap:wrap;gap:15px;background:#f3f4f6;padding:15px;border-radius:8px;margin-bottom:20px;}
.info-item {display:flex;flex-direction:column;}
.info-label {font-size:12px;color:#6b7280;}
.info-value {font-weight:500;color:#1f2937;}
.status-badge {display:inline-block;padding:4px 8px;border-radius:4px;font-size:12px;font-weight:500;}
.status-processing {background:#fef3c7;color:#92400e;}
.status-completed {background:#dcfce7;color:#166534;}
.status-failed {background:#fee2e2;color:#991b1b;}
.result-section {margin-bottom:20px; width:100%;}
.result-title {font-weight:600;color:#4b5563;margin-bottom:8px;}
.result-content {background:#f9fafb;padding:15px;border-radius:8px;border:1px solid #e5e7eb;white-space:pre-wrap;font-family:monospace;max-height:300px;overflow-y:auto;width: 100%;   display: block;    box-sizing: border-box;}
.download-buttons.artistic { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; background: linear-gradient(90deg, #f0f4ff 0%, #f9fafb 100%); border-radius: 16px; padding: 18px 18px 12px 18px; box-shadow: 0 2px 12px rgba(80,120,255,0.07); border: 1px solid #e5e7eb; margin-top: 24px; margin-bottom: 8px; }
.copy-block { flex: 0 0 auto; display: flex; align-items: center; }
.download-btn { display: flex; align-items: center; padding: 12px 22px; border-radius: 10px; background: #f3f4f6; color: #333; text-decoration: none !important; font-size: 16px; font-weight: 500; box-shadow: 0 2px 8px rgba(80,120,255,0.04); border: none; outline: none; transition: background 0.2s, color 0.2s, box-shadow 0.2s; gap: 10px; white-space: nowrap; cursor: pointer; }
.download-btn:hover { background: #e0e7ef; color: #222; box-shadow: 0 4px 16px rgba(80,120,255,0.09); text-decoration: none !important; }
.download-btn.copy.big { min-width: 180px; min-height: 56px; font-size: 20px; padding: 16px 36px; border-radius: 12px; background: linear-gradient(90deg, #4f8cff 0%, #3b82f6 100%); color: #fff; box-shadow: 0 4px 16px rgba(80,120,255,0.13); }
.download-btn.copy.big:hover { background: linear-gradient(90deg, #2563eb 0%, #1d4ed8 100%); color: #fff; }
.download-block { display: flex; flex-wrap: wrap; gap: 18px; max-width: 600px; }
.download-block .download-btn { flex: 1 1 180px; min-width: 180px; max-width: 220px; margin-bottom: 10px; }
@media (max-width: 900px) { .download-buttons.artistic { flex-direction: column; gap: 18px; padding: 12px 6px 8px 6px; } .copy-block { justify-content: center; margin-bottom: 10px; } .download-block { max-width: 100%; gap: 12px; } .download-block .download-btn { min-width: 120px; font-size: 15px; padding: 10px 12px; } }
.download-btn.txt i { color: #4b5563; }
.download-btn.docx i { color: #2563eb; }
.download-btn.odt i { color: #7c3aed; }
.download-btn.pdf i { color: #dc2626; }
.download-btn.epub i { color: #059669; }
.download-btn.mobi i { color: #d97706; }
.download-btn.copy i { color: #fff; }
.result-container h3 { font-size: 2rem; font-weight: 700; margin-bottom: 18px; color: #222; }
.result-section-flex { display: flex; align-items: flex-start; gap: 28px; width:100%;}
.result-preview-image { margin-top: 35px; max-width: 280px; max-height: 320px; border-radius: 8px; box-shadow: 0 2px 8px rgba(80,120,255,0.08); object-fit: contain; background: #f3f4f6; margin-bottom: 8px; }
@media (max-width: 900px) { .result-section-flex { flex-direction: column; gap: 10px; } .result-preview-image { max-width: 98vw; max-height: 180px; margin: 0 auto 8px auto; display: block; } }

/* 保证OCR识别模式选择区块样式优先级最高 */
.ocr-mode-card-wrapper {
    position: relative;
}
.ocr-mode-card-wrapper > .ocr-badge {
    position: absolute !important;
    top: 0px !important;
    right: 0px !important;
    z-index: 2;
    padding: 0 7px !important;
    border-radius: 7px !important;
    font-size: 0.78em !important;
    font-weight: bold;
    color: #fff;
    letter-spacing: 1px;
    box-shadow: 0 2px 8px rgba(80,120,255,0.08);
    pointer-events: none;
    opacity: 0.92;
    border: 1.2px solid #e0e7ef;
    margin: 0 !important;
}
.ocr-mode-card-wrapper > .ocr-badge.standard { background: #3cf !important; }
.ocr-mode-card-wrapper > .ocr-badge.advanced { background: #fa3 !important; }
.ocr-mode-card {
    position: relative;
    background: #fff;
    border-radius: 12px;
    border: 2px solid #b5dfff;
    box-shadow: none;
    height: 180px;
    min-height: 180px;
    min-width: 275px;
    padding: 12px;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: border 0.2s, background 0.2s;
}
.ocr-mode-option input[type="radio"]:checked + label .ocr-mode-card,
.ocr-mode-option label:hover .ocr-mode-card {
    border: 2px solid #3cf;
    background: #e3f1ff;
    box-shadow: none;
}
.ocr-mode-main {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 0;
}
.ocr-mode-icon {
    font-size: 1.8em;
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 0;
    margin-right: 12px;
    color:rgb(255, 255, 255);
    background: #e0f2fe;
    border-radius: 50%;
}
.ocr-mode-title {
    font-weight: bold;
    font-size: 1.15em;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #222;
    margin-bottom: 2px;
    margin-left:-10px;
}
.ocr-mode-desc {
    color: #888;
    font-size: 0.2em;
    margin-top: 10px;
    text-align: center;
}
.ocr-mode-options {
    display: flex;
    gap: 15px;
    justify-content: center;
    align-items: stretch;
    border-radius: 12px;
    padding: 0;
    margin: 0 0 32px 0;
    box-shadow: none;
    border: none;
}
.ocr-mode-option {
    flex: 1 1 0;
    min-width: 220px;
    max-width: 340px;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    background: none;
    box-shadow: none;
    border: none;
    position: relative;
}
.ocr-mode-option input[type=radio] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.ocr-mode-option label {
    display: block;
    cursor: pointer;
    height: 100%;
}
.ocr-mode-info-bar {
    margin-top: 16px;
}

/* 合并优化后的样式片段示例： */
.ocr-badge, .usage-info .ocr-badge, .ocr-mode-card-wrapper > .ocr-badge {
    display: inline-block;
    font-weight: bold;
    letter-spacing: 1px;
    border-radius: 8px;
    color: #fff;
    box-shadow: 0 2px 8px rgba(80,120,255,0.08);
    border: 1.2px solid #e0e7ef;
    opacity: 0.92;
    font-size: 13px;
    padding: 2px 10px;
    position: static;
    margin-bottom: 2px;
    margin-right: 0;
    z-index: 1;
}
.ocr-badge.standard { background: #3cf; }
.ocr-badge.advanced { background: #fa3; }

.download-btn {
    display: flex;
    align-items: center;
    padding: 12px 22px;
    border-radius: 10px;
    background: #f3f4f6;
    color: #333;
    text-decoration: none !important;
    font-size: 16px;
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(80,120,255,0.04);
    border: none;
    outline: none;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
    gap: 10px;
    white-space: nowrap;
    cursor: pointer;
}
.download-btn:hover {
    background: #e0e7ef;
    color: #222;
    box-shadow: 0 4px 16px rgba(80,120,255,0.09);
    text-decoration: none !important;
}
.download-btn.copy.big {
    min-width: 180px;
    min-height: 56px;
    font-size: 20px;
    padding: 16px 36px;
    border-radius: 12px;
    background: linear-gradient(90deg, #4f8cff 0%, #3b82f6 100%);
    color: #fff;
    box-shadow: 0 4px 16px rgba(80,120,255,0.13);
}
.download-btn.copy.big:hover {
    background: linear-gradient(90deg, #2563eb 0%, #1d4ed8 100%);
    color: #fff;
}

.usage-info.floating-badge {
    position: fixed;
    top: 48px;
    right: 48px;
    z-index: 100;
    opacity: 1;
    min-width: 180px;
    max-width: 260px;
    font-size: 14px;
    padding: 12px 18px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(80,120,255,0.10);
    border: 1px solid #e5e7eb;
    margin-bottom: 0;
}
.usage-info.floating-badge:hover { opacity: 1; }
.img-placeholder {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    text-align: center;
    background: #fff;
    border: 1.5px dashed #bbb;
}


/* ----- legacy /home.css ----- */

/* ============================================================
 * OCR.AD Home Page Stylesheet
 * 专业蓝白风格，覆盖 styles.css 中的部分视觉样式
 * 加载顺序：styles.css (基础) → home.css (增强)
 * ============================================================ */

:root {
  --ocr-primary: #2563eb;
  --ocr-primary-dark: #1d4ed8;
  --ocr-primary-light: #60a5fa;
  --ocr-primary-soft: #eff6ff;
  --ocr-bg: #f5f7fb;
  --ocr-surface: #ffffff;
  --ocr-surface-alt: #f8fafc;
  --ocr-text: #0f172a;
  --ocr-text-muted: #475569;
  --ocr-text-faint: #64748b;
  --ocr-text-soft: #64748b;
  --ocr-border: #e2e8f0;
  --ocr-border-strong: #cbd5e1;
  --ocr-success: #10b981;
  --ocr-success-dark: #047857;
  --ocr-success-soft: #d1fae5;
  --ocr-warning: #f59e0b;
  --ocr-warning-dark: #b45309;
  --ocr-warning-soft: #fef3c7;
  --ocr-danger: #ef4444;
  --ocr-danger-soft: #fef2f2;
  --ocr-info: #0891b2;
  --ocr-info-soft: #ecfeff;
  --ocr-brand: #4F46E5;
  --ocr-accent: #ec4899;
  --ocr-brand-soft: rgba(79,70,229,0.08);
  --ocr-bg-soft: #f7f8fb;
  --ocr-violet: #7c3aed;
  --ocr-violet-soft: #f5f3ff;
  --ocr-emerald: #16a34a;
  --ocr-emerald-soft: #f0fdf4;
  --ocr-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --ocr-shadow-sm: 0 2px 6px rgba(15, 23, 42, 0.05);
  --ocr-shadow-md: 0 6px 20px rgba(37, 99, 235, 0.08);
  --ocr-shadow-lg: 0 16px 40px rgba(37, 99, 235, 0.14);
  --ocr-radius-xs: 6px;
  --ocr-radius-sm: 8px;
  --ocr-radius-md: 12px;
  --ocr-radius-lg: 16px;
  --ocr-radius-xl: 20px;
  --ocr-font: 'Inter', 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --ocr-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', Menlo, Consolas, monospace;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 150ms;
  --duration: 220ms;
  --duration-slow: 400ms;
}

/* ============================================================
 * Global Reset / Base
 * ============================================================ */
html {
  scroll-behavior: smooth;
  /* Keep the page scrollbar always visible (reserve gutter) so it doesn't
     blink out for a frame when DOM height fluctuates during upload → process
     → result transitions (progress bar collapses, file-items mutate, etc.).
     `scrollbar-gutter: stable` reserves the gutter unconditionally so the
     scrollbar thumb never has to appear/disappear — only the page content
     scrolls behind the gutter. Combined with `scrollbar-gutter: stable` on
     inner scrollers this gives a stable right-edge across the whole flow. */
  overflow-y: scroll;
  scrollbar-gutter: stable;
}
body {
  background: var(--ocr-bg);
  color: var(--ocr-text);
  font-family: var(--ocr-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Disable JS random background (legacy scripts still set body.style.background) */
  background: var(--ocr-bg) !important;
  background-size: auto !important;
}

/* ============================================================
 * Skip Link (A11y)
 * ============================================================ */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ocr-primary);
  color: #fff;
  padding: 10px 16px;
  border-radius: 0 0 var(--ocr-radius-sm) 0;
  z-index: 99999;
  text-decoration: none;
  font-weight: 600;
}
.skip-link:focus { left: 0; outline: 3px solid var(--ocr-primary-light); outline-offset: 2px; }

/* ============================================================
 * Top Navigation
 * ============================================================ */
.main-nav {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--ocr-border);
  /* Stronger sticky-nav shadow so the floating nav reads as a clearly
     separate component from the hero card below. The previous
     --ocr-shadow-xs was so subtle on light backgrounds that the nav's
     bottom edge visually blended into the hero card's top edge,
     making the two feel glued together. Bumping to --ocr-shadow-sm
     creates a soft but visible drop-shadow that establishes the nav
     as a distinct layer when it floats on top of scrolled content. */
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
  position: sticky;
  top: 0;
  z-index: 10;
  z-index: 100;
  margin: 0 !important;
  padding: 0 !important;
  transition: box-shadow var(--duration) var(--ease-out);
}
.main-nav:hover { box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12); }
.nav-list {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 28px;
  list-style: none;
  gap: 14px;
}
.nav-logo a {
  display: inline-flex !important;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ocr-text);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  padding: 0 !important;
}
.nav-logo a:hover { background: transparent !important; color: var(--ocr-text) !important; }
.nav-logo img { height: 32px !important; width: auto !important; margin: 0 !important; }
.nav-link {
  color: var(--ocr-text-muted);
  font-weight: 500;
  font-size: 0.94rem;
  padding: 8px 14px;
  border-radius: var(--ocr-radius-sm);
  text-decoration: none;
  transition: background var(--duration-fast), color var(--duration-fast);
}
.nav-link:hover {
  color: var(--ocr-primary);
  background: var(--ocr-primary-soft);
  text-decoration: none !important;
}
.nav-cta {
  background: var(--ocr-primary);
  color: #fff !important;
  padding: 8px 18px;
  border-radius: var(--ocr-radius-sm);
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
}
.nav-cta:hover {
  background: var(--ocr-primary-dark);
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
  transform: translateY(-1px);
}

/* CTA 行动区：Start OCR 按钮 + 语言切换按钮组合，视觉上作为一个整体贴右 */
.nav-cta-group {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-shrink: 0;
}

/* lang-btn 进入 nav-cta-group 后，-dropdown 默认 right:0 仍有效 */
.nav-cta-group .lang-switcher {
  font-size: 0.875rem;
}

@media (max-width: 900px) {
  .nav-cta-group { display: none; }
}

/* ============================================================
 * Hero Section (used by index_en.php legacy home page)
 * ============================================================ */
.hero {
  max-width: 1200px;
  margin: 10px auto 0;
  padding: 24px 28px 16px;
  text-align: center;
  position: relative;
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(37, 99, 235, 0.07) 0%, transparent 70%),
    linear-gradient(180deg, #ffffff 0%, #f5f7fb 100%);
  border-radius: 20px;
  border: 1px solid var(--ocr-border);
  box-shadow: var(--ocr-shadow-sm);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 14% 28%, rgba(96, 165, 250, 0.16) 0%, transparent 18%),
    radial-gradient(circle at 86% 72%, rgba(124, 58, 237, 0.10) 0%, transparent 18%);
  pointer-events: none;
  border-radius: inherit;
  z-index: 0;
}
.hero > * { position: relative; z-index: 1; }
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #eff6ff 0%, #f0f9ff 100%);
  color: var(--ocr-primary);
  font-weight: 600;
  font-size: 0.82rem;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 12px;
  letter-spacing: 0.02em;
  border: 1px solid #dbeafe;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset;
}
.hero-title {
  font-size: clamp(1.65rem, 3.6vw, 2.4rem);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.025em;
  color: var(--ocr-text);
  margin: 0 0 10px;
}
.hero-title .accent {
  background: linear-gradient(135deg, var(--ocr-primary) 0%, var(--ocr-violet) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
}
.hero-subtitle {
  font-size: clamp(0.95rem, 1.3vw, 1.05rem);
  color: var(--ocr-text-muted);
  max-width: 640px;
  margin: 0 auto 16px;
  line-height: 1.55;
}
.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: linear-gradient(135deg, var(--ocr-primary), var(--ocr-primary-dark));
  color: #fff !important;
  font-weight: 600;
  font-size: 0.96rem;
  padding: 11px 24px;
  border-radius: 999px;
  text-decoration: none !important;
  box-shadow: 0 8px 22px rgba(37, 99, 235, 0.30);
  transition: transform var(--duration) var(--ease-out),
              box-shadow var(--duration) var(--ease-out);
  letter-spacing: 0.01em;
}
.hero-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.42);
  color: #fff !important;
  text-decoration: none !important;
}
.hero-cta-arrow { transition: transform var(--duration) var(--ease-out); }
.hero-cta:hover .hero-cta-arrow { transform: translateX(3px); }

/* ============================================================
 * Container / Upload Card
 * ============================================================ */
.container {
  background: var(--ocr-surface) !important;
  max-width: 1200px;
  margin: 28px auto !important;
  padding: 32px !important;
  border-radius: var(--ocr-radius-xl) !important;
  box-shadow: var(--ocr-shadow-md) !important;
  border: 1px solid var(--ocr-border);
  position: relative;
}
.container-header {
  margin: 0 0 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ocr-border);
}
.container-section-title {
  font-size: 1.32rem;
  font-weight: 700;
  color: var(--ocr-text);
  margin: 0 0 6px;
  display: flex;
  align-items: center;
  gap: 10px;
  letter-spacing: -0.01em;
}
.container-section-title i {
  color: var(--ocr-primary);
  font-size: 1.2rem;
}
.container-section-sub {
  color: var(--ocr-text-muted);
  margin: 0;
  font-size: 0.94rem;
}

/* Upload Area */
.upload-area {
  border: 2px dashed var(--ocr-border-strong) !important;
  border-radius: var(--ocr-radius-md) !important;
  padding: 36px 24px !important;
  background: linear-gradient(180deg, var(--ocr-surface-alt) 0%, #ffffff 100%) !important;
  transition: border-color var(--duration) var(--ease-out),
              background var(--duration) var(--ease-out),
              transform var(--duration) var(--ease-out),
              box-shadow var(--duration) var(--ease-out);
}
.upload-area:hover {
  border-color: var(--ocr-primary) !important;
  background: linear-gradient(180deg, var(--ocr-primary-soft) 0%, #ffffff 100%) !important;
  transform: translateY(-1px);
  box-shadow: var(--ocr-shadow-sm);
}
.upload-icon {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ocr-primary-soft) 0%, #dbeafe 100%);
  color: var(--ocr-primary);
  margin: 0 auto 18px;
  transition: transform var(--duration) var(--ease-out),
              box-shadow var(--duration) var(--ease-out);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.upload-area:hover .upload-icon {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.upload-text {
  font-size: 1.05rem !important;
  font-weight: 600;
  color: var(--ocr-text) !important;
  margin-bottom: 8px !important;
}
.upload-hint {
  font-size: 0.85rem !important;
  color: var(--ocr-text-faint);
  line-height: 1.6;
  max-width: 640px;
  margin: 0 auto;
}

/* File Counter */
.file-counter {
  margin: 22px 0 14px !important;
  font-size: 0.9rem;
  color: var(--ocr-text-muted);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
}
.file-counter > div { color: var(--ocr-text-muted); display: inline-flex; align-items: center; gap: 6px; }
.file-counter > div::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ocr-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}

/* ============================================================
 * OCR Mode Selection (Tab UI - replaces card grid)
 * ============================================================ */
.ocr-mode-selection {
  margin: 24px 0 20px !important;
}
.ocr-mode-title {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--ocr-text);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ocr-mode-title::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 16px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--ocr-primary), var(--ocr-primary-light));
}

.ocr-mode-tabs {
  display: inline-flex;
  gap: 4px;
  background: #f1f5f9;
  padding: 5px;
  border-radius: var(--ocr-radius-md);
  border: 1px solid var(--ocr-border);
  margin-bottom: 16px;
  width: 100%;
  box-shadow: var(--ocr-shadow-xs);
}
.ocr-mode-tab {
  flex: 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 14px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--ocr-radius-sm);
  color: var(--ocr-text-muted);
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--duration) var(--ease-out),
              color var(--duration) var(--ease-out),
              border-color var(--duration) var(--ease-out),
              box-shadow var(--duration) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
  font-family: inherit;
  position: relative;
}
.ocr-mode-tab:hover {
  color: var(--ocr-primary);
  background: rgba(255, 255, 255, 0.65);
}
.ocr-mode-tab:hover:not(.is-active) { transform: translateY(-1px); }
.ocr-mode-tab.is-active {
  background: #ffffff;
  color: var(--ocr-primary);
  border-color: var(--ocr-primary);
  box-shadow: 0 2px 10px rgba(37, 99, 235, 0.18);
}
.ocr-mode-tab i {
  font-size: 0.95rem;
  transition: transform var(--duration) var(--ease-out);
}
.ocr-mode-tab.is-active i { transform: scale(1.08); }
.ocr-mode-tab:focus-visible {
  outline: 3px solid var(--ocr-primary-light);
  outline-offset: 3px;
}
.ocr-tab-badge {
  font-style: normal;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 3px 7px;
  border-radius: 999px;
  text-transform: uppercase;
}
.ocr-tab-badge.free { background: var(--ocr-success-soft); color: var(--ocr-success-dark); }
.ocr-tab-badge.pro  { background: var(--ocr-warning-soft); color: var(--ocr-warning-dark); }
.ocr-mode-tab.is-active .ocr-tab-badge.free {
  background: var(--ocr-success-dark); color: #fff;
}
.ocr-mode-tab.is-active .ocr-tab-badge.pro {
  background: var(--ocr-warning-dark); color: #fff;
}

/* Tab Panel (animated) */
.ocr-mode-panel {
  display: none;
  background: linear-gradient(135deg, var(--ocr-surface-alt) 0%, #ffffff 100%);
  border: 1px solid var(--ocr-border);
  border-left: 3px solid var(--ocr-border-strong);
  border-radius: var(--ocr-radius-md);
  padding: 14px 18px;
  margin-bottom: 14px;
  gap: 14px;
  align-items: center;
  animation: ocrPanelIn var(--duration) var(--ease-out);
}
.ocr-mode-panel.is-active {
  display: flex;
  border-left-color: var(--ocr-primary);
}
.ocr-mode-panel[hidden] { display: none; }
.ocr-mode-panel[aria-labelledby="tab-document"].is-active { border-left-color: var(--ocr-info); }
.ocr-mode-panel[aria-labelledby="tab-table_ocr"].is-active { border-left-color: var(--ocr-emerald); }
@keyframes ocrPanelIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ocr-mode-panel-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--ocr-primary-soft);
  color: var(--ocr-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}
.ocr-mode-panel[aria-labelledby="tab-document"] .ocr-mode-panel-icon {
  background: var(--ocr-info-soft); color: var(--ocr-info);
}
.ocr-mode-panel[aria-labelledby="tab-table_ocr"] .ocr-mode-panel-icon {
  background: var(--ocr-emerald-soft); color: var(--ocr-emerald);
}
.ocr-mode-panel-body { flex: 1; min-width: 0; }
.ocr-mode-panel-title {
  font-weight: 700;
  font-size: 1rem;
  color: var(--ocr-text);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  letter-spacing: -0.005em;
}
.ocr-mode-tip-inline {
  font-style: normal;
  background: var(--ocr-success-soft);
  color: var(--ocr-success-dark);
  font-weight: 600;
  font-size: 0.7rem;
  padding: 3px 9px;
  border-radius: 6px;
  letter-spacing: 0.02em;
}
.ocr-mode-panel[aria-labelledby="tab-document"] .ocr-mode-tip-inline {
  background: var(--ocr-info-soft); color: var(--ocr-info);
}
.ocr-mode-panel[aria-labelledby="tab-table_ocr"] .ocr-mode-tip-inline {
  background: var(--ocr-emerald-soft); color: var(--ocr-emerald);
}
.ocr-mode-panel p {
  margin: 0;
  color: var(--ocr-text-muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

.ocr-mode-description {
  background: #f1f5f9 !important;
  border-left: 4px solid var(--ocr-primary) !important;
  border-radius: var(--ocr-radius-sm) !important;
  padding: 14px 18px !important;
  font-size: 0.92rem;
  color: var(--ocr-text-muted);
  margin-top: 12px;
  line-height: 1.6;
}

/* Hide legacy card classes */
.ocr-mode-options { display: none !important; }

/* ============================================================
 * CTA Button
 * ============================================================ */
/* (Legacy upload page — kept for compatibility with older page templates.
   Modern tool pages use .ocr-btn from section 7 below.) */
  width: auto;
  min-width: 220px;
  margin: 16px auto 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.01em;
  position: relative;
  overflow: hidden;
}
.ocr-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.2) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 600ms var(--ease-out);
}
.ocr-btn:hover:not(:disabled)::after { transform: translateX(100%); }
.ocr-btn:hover:not(:disabled) {
  box-shadow: 0 10px 28px rgba(37, 99, 235, 0.38) !important;
  transform: translateY(-1px);
}
.ocr-btn:active:not(:disabled) { transform: translateY(0); }
.ocr-btn:disabled {
  /* Neutral ghost-style disabled state: muted bg + readable text (contrast ~4.5).
     Was previously #f8fafc (near-white) on #cbd5e1 (light gray) — contrast 1.18,
     invisible on screen. */
  background: #e2e8f0 !important;
  color: #64748b !important;
  border: 1px solid #cbd5e1;
  box-shadow: none !important;
  cursor: not-allowed;
  opacity: 1;
}

/* Busy state — when OCR is running. Different button color so the user
   sees the action is in flight, plus a subtle "spinner" via .btn-icon
   rotation. Without this, the JS toggles .is-busy but the button looks
   identical to the idle state, which makes the dynamic transition feel
   dead. */
.ocr-btn.is-busy {
  background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
  cursor: progress !important;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.32) !important;
}
.ocr-btn.is-busy .btn-icon i { animation: ocr-btn-spin 1.2s linear infinite; }
@keyframes ocr-btn-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Completed state — all tasks finished. Visually distinct so the user
   sees "things are done" and the new "Start New OCR Task" trigger is
   clearly clickable. */
.ocr-btn.is-completed {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  box-shadow: 0 6px 18px rgba(16, 185, 129, 0.32) !important;
}
.ocr-btn.is-completed:hover:not(:disabled) {
  box-shadow: 0 8px 22px rgba(16, 185, 129, 0.42) !important;
}

/* Processing state — upload-create stage is over, but OCR tasks are still
   running on the server. Visually distinct from both is-busy (deep purple,
   spinning icon) and is-completed (green). Used to be missing, so the
   button stayed on "Recognizing..." forever after upload while the file
   rows correctly showed "OCR processing...". */
.ocr-btn.is-processing {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  cursor: progress !important;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.32) !important;
}
.ocr-btn.is-processing .btn-icon i { animation: ocr-btn-pulse 1.6s ease-in-out infinite; }
@keyframes ocr-btn-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.18); }
}
.ocr-btn .btn-icon { margin-right: 8px; transition: transform var(--duration) var(--ease-out); }
.ocr-btn:hover .btn-icon { transform: translateX(2px) rotate(-5deg); }
.ocr-btn .btn-status {
  margin-left: 10px;
  font-size: 0.85rem;
  font-weight: 500;
}
.ocr-btn .btn-status.error { color: #fca5a5; }
.ocr-btn .btn-status.success { color: #86efac; }
.ocr-btn .btn-status.warning { color: #fde68a; }
.ocr-btn .btn-status.info { color: #93c5fd; }

/* ============================================================
 * File List Section
 * ============================================================ */
.file-list-section {
  display: none;
  margin-top: 16px;
}
.file-list-section.has-files { display: block; }

/* ── Header ── */
.file-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.file-list-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.file-list-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ocr-text-secondary, #64748b);
  letter-spacing: 0.03em;
}
.file-list-count {
  width: 20px;
  height: 20px;
  background: var(--ocr-primary);
  color: #fff;
  border-radius: 50%;
  font-size: 0.72rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.file-list-clear-btn {
  background: transparent;
  border: 1px solid var(--ocr-border);
  color: var(--ocr-text-faint);
  border-radius: 6px;
  padding: 3px 10px;
  font-size: 0.76rem;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.file-list-clear-btn:hover {
  color: #ef4444;
  border-color: #ef4444;
}
.file-list-clear-btn .fas { font-size: 0.7rem; }

/* ── Grid ── */
.file-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

/* ── Empty state ── */
.file-list-empty {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 28px 20px;
  background: var(--ocr-surface-alt);
  border: 1px dashed var(--ocr-border);
  border-radius: 10px;
  color: var(--ocr-text-faint);
  font-size: 0.85rem;
}
.file-list-empty .fas { font-size: 2rem; opacity: 0.4; }

/* ============================================================
 * File Item Card
 * ============================================================ */
.file-item {
  position: relative;
  background: #fff;
  border: 1px solid var(--ocr-border);
  border-radius: 10px;
  /* Height bumped 76 → 88px so the larger view button (padding 16/22 + 48 min-height)
     fits cleanly when shown alone after task completion. */
  height: 88px;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 72px 10px 10px;
  box-sizing: border-box;
}

/* Thumbnail */
.file-preview {
  width: 54px;
  height: 54px;
  border-radius: 8px;
  background: var(--ocr-surface-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.file-preview .preview-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.file-preview .file-type-icon {
  font-size: 1.4rem;
  color: var(--ocr-text-faint);
}

/* Info block */
.file-item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  overflow: hidden;
}
.file-item-name {
  margin: 0;
  color: var(--ocr-text);
  font-weight: 600;
  font-size: 0.88rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.file-item-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.76rem;
  color: var(--ocr-text-faint);
  line-height: 1.3;
  margin: 0;
}
.file-item-size {
  color: var(--ocr-text-faint);
  font-size: 0.76rem;
}
.file-item-meta-sep { color: var(--ocr-border-strong); }
.file-item-status {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--ocr-text-faint);
  font-size: 0.76rem;
  white-space: nowrap;
}
.file-item-status .fas { font-size: 0.68rem; }

/* Per-file progress bar */
.file-progress-container {
  display: block;
  margin-top: 6px;
  height: 6px;
  background: var(--ocr-border);
  border-radius: 999px;
  position: relative;
  /* Stretch to fill the flex column parent (.file-item-info) — without
     this the container collapses to 0px wide inside a flex column. */
  align-self: stretch;
  width: 100%;
  box-sizing: border-box;
  /* Only fade opacity on completion — height + margin-top change instantly
     when is-done is toggled. Animating the height would briefly shrink the
     container during any momentary is-done blip (e.g. an xhr progress 100%
     event firing right before uploadFile resolves into PROCESSING), and
     even a 240ms mid-transition can make the surrounding 88px-tall file-item
     re-center and the page scrollbar flicker. Opacity still fades smoothly,
     so the visual fade-out feel is preserved. */
  transition: opacity 240ms ease-out;
  overflow: hidden;
}
.file-progress-container.is-done {
  opacity: 0;
  height: 0;
  margin-top: 0;
}

/* Determinate fill */
.file-progress-bar {
  height: 100%;
  width: var(--p, 0%);
  background-color: var(--ocr-primary);
  background-image: linear-gradient(90deg, var(--ocr-primary-light), var(--ocr-primary));
  background-size: 200% 100%;
  background-position: 0 0;
  border-radius: 999px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  overflow: hidden;
}

/* Indeterminate shimmer — JS animates background-positionX via setInterval
   (see __progressScrollManager in index.php). CSS only provides the gradient.
   background-size is 200% so one full bar-width shift (position 0 -> -barW)
   slides the dark band from the bar's right edge to the left edge; on
   reset the band reappears from the right edge, producing a seamless
   right-to-left loop. */
.file-progress-container.is-indeterminate .file-progress-bar {
  width: 100% !important;
  background-color: transparent;
  background-image: linear-gradient(
    90deg,
    transparent 0%,
    var(--ocr-primary) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  background-repeat: no-repeat;
  overflow: hidden;
}


/* Action buttons */
.file-item-actions {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
}
.file-item-actions .file-remove-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--ocr-text-faint);
  border-radius: 6px;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  font-size: 0.82rem;
  transition: color 0.15s, background 0.15s;
}
.file-item-actions .file-remove-btn:hover {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.08);
}
/* View result button — taller for clearer tap target + easier recognition.
   Padding increased 12px → 16px vertically and 16px → 22px horizontally;
   font-size 0.92rem → 1rem. min-height keeps the height consistent across
   locales where line-height varies. */
.file-item-actions .view-result-btn {
  background: var(--ocr-primary);
  color: #fff;
  border-radius: 8px;
  padding: 16px 22px;
  min-height: 48px;
  font-size: 1rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  white-space: nowrap;
  border: none;
  transition: background 180ms ease-out, transform 180ms ease-out,
              box-shadow 180ms ease-out;
  min-width: 90px;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.18);
}
.file-item-actions .view-result-btn:hover {
  background: var(--ocr-primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(37, 99, 235, 0.28);
}
.file-item-actions .view-result-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.22);
}

/* Hide the delete (trash) button once the task has completed — a completed
   file is no longer "remove from queue", it's "view the result". The view
   button stays as the sole action on the right. !important to defend against
   any later specificity collisions on .file-remove-btn. */
.file-item.has-result .file-remove-btn { display: none !important; }

/* ── Responsive ── */
@media (max-width: 640px) {
  .file-list { grid-template-columns: 1fr !important; }
  .file-item { padding-right: 64px; }
  .file-item-actions .view-result-btn {
    padding: 12px 18px;
    min-height: 42px;
    font-size: 0.94rem;
    min-width: 76px;
  }
}

/* ============================================================
 * View Result Button (file preview modal)
 * ============================================================ */
#imagePreviewModal .view-result-btn {
  background: rgba(37, 99, 235, 0.95);
  color: #fff;
  border-radius: 8px;
  font-weight: 600;
  padding: 8px 14px;
  font-size: 0.85rem;
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: background var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}
#imagePreviewModal .view-result-btn:hover {
  background: var(--ocr-primary-dark);
  transform: translateY(-1px);
}


/* ============================================================
 * Section Anchor Nav (Guide)
 * ============================================================ */
.section-anchor-nav.floating-anchor-nav {
  background: var(--ocr-surface) !important;
  border: 1px solid var(--ocr-border) !important;
  box-shadow: var(--ocr-shadow-md) !important;
  border-radius: var(--ocr-radius-md) !important;
  padding: 12px 16px !important;
  max-width: 1200px !important;
  width: 100%;
  margin: 24px auto 0 !important;
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px !important;
  overflow: hidden;
}
.section-anchor-nav.floating-anchor-nav > div {
  font-weight: 700 !important;
  color: var(--ocr-primary) !important;
  margin-right: 10px;
  font-size: 0.92rem;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
}
.section-anchor-nav.floating-anchor-nav > div::before {
  content: "\f02d";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: 0.85rem;
  color: var(--ocr-primary);
}
.anchor-link {
  font-size: 0.86rem !important;
  padding: 6px 12px !important;
  color: var(--ocr-text-muted) !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
  display: inline-block !important;
}
.anchor-link:hover {
  background: var(--ocr-primary-soft) !important;
  color: var(--ocr-primary) !important;
  text-decoration: none !important;
}

/* ============================================================
 * User Guide Section
 * ============================================================ */
.user-guide {
  max-width: 1200px !important;
  margin: 32px auto !important;
  padding: 44px 40px !important;
  background: var(--ocr-surface) !important;
  border: 1px solid var(--ocr-border);
  border-radius: var(--ocr-radius-xl) !important;
  box-shadow: var(--ocr-shadow-md) !important;
  scroll-margin-top: 90px;
}
.user-guide h2 {
  font-size: 1.45rem !important;
  font-weight: 700 !important;
  color: var(--ocr-text) !important;
  margin: 38px 0 14px !important;
  padding: 0 0 12px 18px !important;
  border-bottom: 2px solid var(--ocr-primary-soft);
  position: relative;
  letter-spacing: -0.01em;
  scroll-margin-top: 90px;
}
.user-guide h2:first-of-type { margin-top: 0 !important; }
.user-guide h2::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 64px;
  height: 3px;
  background: linear-gradient(90deg, var(--ocr-primary), var(--ocr-primary-light));
  border-radius: 2px;
}
.user-guide p {
  color: var(--ocr-text-muted);
  line-height: 1.75;
  margin: 0 0 16px;
  font-size: 0.96rem;
}
.user-guide ul {
  margin: 0 0 22px 0;
  padding-left: 0;
  list-style: none;
}
.user-guide ul li {
  position: relative;
  padding: 8px 0 8px 30px;
  color: var(--ocr-text-muted);
  line-height: 1.65;
  font-size: 0.95rem;
}
.user-guide ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 18px;
  height: 18px;
  background: var(--ocr-success-soft);
  color: var(--ocr-success-dark);
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: linear-gradient(135deg, var(--ocr-success-soft), #a7f3d0);
  box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.15);
}
.user-guide ul li > strong { color: var(--ocr-text); font-weight: 600; }
.user-guide ul li::after {
  content: "\f00c"; /* Font Awesome check */
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: 10px;
  color: var(--ocr-success-dark);
  position: absolute;
  left: 5px;
  top: 14px;
  z-index: 1;
}
.user-guide ul li:only-child::before,
.user-guide ul li:has(> strong):not(:has(ul))::before {
  /* The default ::before still shows the green check, but we want a check icon, not the gradient ball.
     Adjusted: keep gradient ball, put check via ::after */
}
.user-guide ul ul {
  margin: 8px 0 8px 0;
  padding-left: 18px;
}
.user-guide ul ul li {
  padding-left: 22px;
  font-size: 0.92rem;
  color: var(--ocr-text-faint);
}
.user-guide ul ul li::before {
  content: "";
  background: var(--ocr-primary);
  border-radius: 50%;
  width: 5px;
  height: 5px;
  top: 16px;
  left: 6px;
  box-shadow: 0 0 0 4px var(--ocr-primary-soft);
}
.user-guide ul ul li::after { content: none; }

.user-guide table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0;
  background: #fff !important;
  border: 1px solid var(--ocr-border) !important;
  border-radius: var(--ocr-radius-md) !important;
  overflow: hidden;
  margin-bottom: 26px !important;
  box-shadow: var(--ocr-shadow-xs);
}
.user-guide th, .user-guide td {
  padding: 13px 18px !important;
  text-align: left;
  border-bottom: 1px solid var(--ocr-border);
}
.user-guide th {
  background: var(--ocr-surface-alt) !important;
  color: var(--ocr-text) !important;
  font-weight: 700 !important;
  font-size: 0.84rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-right: 1px solid var(--ocr-border) !important;
}
.user-guide th:last-child { border-right: none !important; }
.user-guide td {
  color: var(--ocr-text-muted) !important;
  font-size: 0.95rem;
  border-right: 1px solid var(--ocr-border);
}
.user-guide td:last-child { border-right: none; }
.user-guide tbody tr:last-child td { border-bottom: none; }
.user-guide tbody tr {
  transition: background var(--duration-fast) var(--ease-out);
}
.user-guide tbody tr:hover {
  background: var(--ocr-surface-alt);
}

.feature-table-wrapper, .faq-table-wrapper {
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* ============================================================
 * Result View Modal
 * ============================================================ */
.result-view {
  background: rgba(15, 23, 42, 0.65) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: ocrFadeIn 200ms var(--ease-out);
}
.result-container {
  background: #fff !important;
  border-radius: var(--ocr-radius-lg) !important;
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.32) !important;
  max-width: 980px;
  width: 92%;
  max-height: 88vh;
  overflow: auto;
  padding: 36px 36px 32px !important;
  scrollbar-width: thin;
  scrollbar-color: var(--ocr-border-strong) transparent;
  /* Reserve scrollbar gutter so content doesn't shift when scrollbar appears/disappears.
     Critical for smoothness — every reflow mid-scroll causes a visible stutter. */
  scrollbar-gutter: stable;
  animation: ocrPanelIn 280ms var(--ease-out);
}
/* Scrollbar thumb: solid color, no transition.
   The previous gradient + `border:2px solid transparent` + `background-clip:padding-box`
   combo forced the browser to repaint the thumb on every hover frame (background
   transition is a paint property, not compositor-only). Removing the transition and
   gradient makes the hover change instant, which the browser composites without
   touching layout — visibly smoother on every scroll. */
.result-container::-webkit-scrollbar { width: 4px; height: 4px; }
.result-container::-webkit-scrollbar-thumb {
  background: var(--ocr-border-strong);
  border-radius: 2px;
}
.result-container::-webkit-scrollbar-thumb:hover {
  background: var(--ocr-primary);
}
.result-container::-webkit-scrollbar-track { background: transparent; }
.result-container h3 {
  margin: 0 0 22px;
  font-size: 1.3rem;
  color: var(--ocr-text);
  font-weight: 700;
  letter-spacing: -0.01em;
  padding-right: 40px;
}
.result-title {
  font-weight: 700;
  color: var(--ocr-text);
  margin-bottom: 10px;
  font-size: 1rem;
}
.result-content {
  background: var(--ocr-surface-alt);
  border: 1px solid var(--ocr-border);
  border-radius: var(--ocr-radius-sm);
  padding: 18px;
  color: var(--ocr-text);
  font-family: var(--ocr-mono);
  font-size: 0.92rem;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 380px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--ocr-border-strong) transparent;
  scrollbar-gutter: stable;
}
/* Same smoothness rationale as .result-container — solid color, no transition. */
.result-content::-webkit-scrollbar { width: 4px; height: 4px; }
.result-content::-webkit-scrollbar-thumb {
  background: var(--ocr-border-strong);
  border-radius: 2px;
}
.result-content::-webkit-scrollbar-thumb:hover {
  background: var(--ocr-primary);
}
/* Result view layout — match the compact, scannable look of tool-task-result.
   The legacy `artistic` gradient container was too heavy for a 4-button row
   and made each button stretch to fill the width (because .download-btn was
   flex:1 with min-width:180px). We drop the gradient and let the buttons
   size to their content, with breathing room around the row. */
.result-view .result-container .result-section-flex {
  display: flex;
  align-items: flex-start;
  gap: 28px;
  width: 100%;
  margin-bottom: 20px;
}
.result-view .result-container .result-preview-image {
  max-width: 280px;
  max-height: 280px;
  border-radius: var(--ocr-radius-sm);
  border: 1px solid var(--ocr-border);
  object-fit: contain;
  background: var(--ocr-surface-alt);
  flex-shrink: 0;
}
.result-view .result-container .result-section {
  flex: 1;
  min-width: 0;
  width: auto;
  margin-bottom: 0;
}

/* ----------------------------------------------------------------
   Action bar — split into View/Copy (primary) vs Download (secondary).
   Each button group has its own label so the difference between "I just
   want to see / grab the text" and "I want a file" is visually obvious.
   This replaces the single flat `.download-buttons.artistic` container
   that used to mix Copy + View + Download with the same chrome.
---------------------------------------------------------------- */
.result-actions {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 22px;
  margin-bottom: 8px;
  padding: 16px 16px 14px;
  background: var(--ocr-surface-alt);
  border: 1px solid var(--ocr-border);
  border-radius: var(--ocr-radius-md);
}
.result-actions__group {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.result-actions__group--download {
  padding-top: 14px;
  border-top: 1px dashed var(--ocr-border-strong);
}
.result-actions__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ocr-text-muted, #475569);
  min-width: 96px;
  flex-shrink: 0;
}
.result-actions__label i {
  font-size: 0.85rem;
  color: var(--ocr-primary);
}
.result-actions__group--download .result-actions__label i {
  color: var(--ocr-text-muted);
}
.result-actions__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.result-actions__buttons--download {
  align-items: stretch;
}

/* Shared action button — used by both View/Copy (no download) and Download
   groups. Compact, content-sized, with file-type icon color. */
.action-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 9px 14px !important;
  border-radius: var(--ocr-radius-sm) !important;
  background: var(--ocr-surface) !important;
  color: var(--ocr-text) !important;
  font-size: 0.86rem !important;
  font-weight: 600;
  border: 1px solid var(--ocr-border) !important;
  box-shadow: none !important;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none !important;
  flex: 0 0 auto !important;
  min-width: 0 !important;
  max-width: none !important;
  transition: background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}
.action-btn > i,
.action-btn i {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  transition: color var(--duration-fast) var(--ease-out);
}
.action-btn:hover {
  background: var(--ocr-bg-soft, #f7f8fb) !important;
  border-color: var(--ocr-border-strong) !important;
  color: var(--ocr-text) !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06) !important;
  text-decoration: none !important;
}
.action-btn:active { transform: translateY(0); }

/* Primary action — Copy Text (and similar no-download primary actions).
   Always the visually loudest button so users know it's the default. */
.action-btn--primary {
  background: linear-gradient(135deg, var(--ocr-primary), var(--ocr-primary-dark)) !important;
  color: #fff !important;
  border: none !important;
  font-size: 0.92rem !important;
  padding: 10px 18px !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.28) !important;
}
.action-btn--primary:hover {
  background: var(--ocr-primary-dark) !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.38) !important;
}
.action-btn--primary.copied {
  background: var(--ocr-success) !important;
  border-color: var(--ocr-success) !important;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
}
.action-btn--primary.copy-failed {
  background: var(--ocr-error, #dc2626) !important;
  border-color: var(--ocr-error, #dc2626) !important;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3) !important;
}
.action-btn--primary i { color: #fff !important; }

/* Download group: visual differentiation. Slightly muted so the eye lands
   on the Copy/View primary group first, then sweeps to the download row. */
.result-actions__group--download .action-btn {
  border-style: dashed !important;
  background: transparent !important;
}
.result-actions__group--download .action-btn:hover {
  background: var(--ocr-bg-soft, #f7f8fb) !important;
  border-style: solid !important;
}

/* File-type icon colors — distinguish TXT/DOCX/PDF/ODT/XLSX at a glance. */
.action-btn--dl i { color: var(--ocr-text-muted, #475569); }
.action-btn.txt   i { color: var(--ocr-text-muted, #475569); }
.action-btn.docx  i { color: #2563eb; }
.action-btn.odt   i { color: #7c3aed; }
.action-btn.pdf   i { color: #dc2626; }
.action-btn.xlsx  i { color: #16a34a; }
.action-btn:hover i { color: var(--ocr-primary) !important; }

@media (max-width: 640px) {
  .result-actions { padding: 12px; }
  .result-actions__group { flex-direction: column; align-items: stretch; gap: 8px; }
  .result-actions__label { min-width: 0; }
  .result-actions__buttons { width: 100%; justify-content: stretch; }
  .action-btn { width: 100%; justify-content: center; }
}

.download-buttons.artistic {
  /* Padding restored (was 0 !important) so buttons don't touch the modal edge.
     Background dropped — the gradient was too loud for a 4-button action row. */
  padding: 16px !important;
  background: var(--ocr-surface-alt) !important;
  border: 1px solid var(--ocr-border) !important;
  border-radius: var(--ocr-radius-md) !important;
  gap: 14px !important;
  box-shadow: none !important;
  margin-top: 20px !important;
  margin-bottom: 8px !important;
}
.download-buttons.artistic .copy-block {
  flex-shrink: 0;
}
.download-buttons.artistic .download-block {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-start;
  flex: 1;
  min-width: 0;
}

/* Buttons — compact, content-sized, with the file-type icon color as the
   primary accent. Pad is 0/14px so the button hugs its label. The previous
   `flex: 1 1 180px; min-width: 180px;` made each download button stretch
   to fill the row, producing the long bar look in the screenshot. */
.download-btn {
  display: inline-flex !important;
  align-items: center;
  padding: 9px 14px !important;
  border-radius: var(--ocr-radius-sm) !important;
  background: var(--ocr-surface) !important;
  color: var(--ocr-text) !important;
  font-size: 0.86rem !important;
  font-weight: 600;
  border: 1px solid var(--ocr-border) !important;
  box-shadow: none !important;
  gap: 8px;
  white-space: nowrap;
  cursor: pointer;
  flex: 0 0 auto !important;
  min-width: 0 !important;
  max-width: none !important;
  transition: background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}
.download-btn:hover {
  background: var(--ocr-bg-soft, #f7f8fb) !important;
  border-color: var(--ocr-border-strong) !important;
  color: var(--ocr-text) !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06) !important;
}
.download-btn:active { transform: translateY(0); }

/* Primary action — Copy Text, gradient brand button. Keep this as the only
   visually loud button so the eye lands on it first. */
.download-btn.copy.big {
  background: linear-gradient(135deg, var(--ocr-primary), var(--ocr-primary-dark)) !important;
  color: #fff !important;
  border: none !important;
  font-size: 0.92rem !important;
  padding: 11px 22px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.28) !important;
  border-radius: var(--ocr-radius-sm) !important;
}
.download-btn.copy.big:hover {
  background: var(--ocr-primary-dark) !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.38) !important;
}
.download-btn.copy.big.copied {
  background: var(--ocr-success) !important;
  border-color: var(--ocr-success) !important;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
}

/* File-type icon colors — the previously orange-hovered block in the
   screenshot was caused by the hover state overriding every icon color with
   var(--ocr-primary). Restore the per-type palette so users can identify
   TXT vs DOCX vs PDF at a glance. */
.download-btn { color: var(--ocr-text) !important; }
.download-btn i {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  transition: color var(--duration-fast) var(--ease-out);
}
.download-btn:hover i { color: var(--ocr-primary) !important; }
.download-btn.txt   i { color: var(--ocr-text-muted, #475569); }
.download-btn.docx  i { color: #2563eb; }
.download-btn.odt   i { color: #7c3aed; }
.download-btn.pdf   i { color: #dc2626; }
.download-btn.epub  i { color: #059669; }
.download-btn.mobi  i { color: #d97706; }
.download-btn.xlsx  i { color: #16a34a; }
.download-btn.view  i { color: var(--ocr-primary, #2563eb); }
.download-btn.copy i { color: #fff !important; }

/* Image preview modal — used by the "View Image" action in document /
   table_ocr result views. Distinct from .result-preview-image which is
   the inline thumb inside the result card. */
.image-preview-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: none;
  align-items: center;
  justify-content: center;
  animation: ocrFadeIn 200ms var(--ease-out);
}
.image-preview-modal__close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  border: none;
  color: var(--ocr-text);
  font-size: 1.1rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: background var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}
.image-preview-modal__close:hover {
  background: #fff;
  transform: rotate(90deg);
}
.modal-preview-image {
  max-width: 92vw;
  max-height: 90vh;
  border-radius: var(--ocr-radius-md);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
  background: #fff;
  object-fit: contain;
}
.download-btn.copy:hover i { color: #fff !important; }

@media (max-width: 640px) {
  .download-buttons.artistic {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
  .download-buttons.artistic .copy-block,
  .download-buttons.artistic .download-block {
    width: 100%;
    justify-content: center;
  }
  .download-btn.copy.big { width: 100%; justify-content: center; }
  .download-btn { width: 100%; justify-content: center; }
}
.close-result {
  background: #f1f5f9 !important;
  border-radius: 50% !important;
  width: 36px;
  height: 36px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  color: var(--ocr-text-muted) !important;
  font-size: 1.1rem !important;
  top: 14px !important;
  right: 14px !important;
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}
.close-result:hover {
  background: var(--ocr-danger) !important;
  color: #fff !important;
  transform: rotate(90deg);
}

/* ============================================================
 * Image Preview Modal
 * ============================================================ */
.modal-preview {
  background: rgba(15, 23, 42, 0.88) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: ocrFadeIn 200ms var(--ease-out);
}
.modal-preview-close {
  background: rgba(255, 255, 255, 0.92);
  color: var(--ocr-text);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  top: 24px;
  right: 24px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
  transition: transform var(--duration) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
}
.modal-preview-close:hover {
  background: var(--ocr-danger);
  color: #fff;
  transform: rotate(90deg);
}
.modal-preview-content {
  max-width: 92vw;
  max-height: 88vh;
  animation: ocrPanelIn 280ms var(--ease-out);
}
.modal-preview-image {
  max-width: 100%;
  max-height: 88vh;
  border-radius: var(--ocr-radius-sm);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
}

/* ============================================================
 * View Result Button (file preview overlay)
 * ============================================================ */
/* ============================================================
 * Footer
 * ============================================================ */
footer {
  background: linear-gradient(180deg, #0f172a 0%, #020617 100%);
  color: #cbd5e1;
  text-align: center;
  padding: 40px 24px;
  margin-top: 64px;
  font-size: 0.9rem;
  line-height: 1.7;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
footer a {
  color: #93c5fd;
  text-decoration: none;
  margin: 0 8px;
  transition: color var(--duration-fast) var(--ease-out);
}
footer a:hover { color: #fff; text-decoration: underline; }
footer p { margin: 0; }

/* ============================================================
 * Multi-column site footer (about / contact / privacy / home)
 * class="footer" — overrides the generic <footer> rules above
 * 2026-08-09: added because single-page templates use a 4-col grid
 *   (brand | Tools | Company | Resources) + footer-bottom bar.
 * ============================================================ */
footer.footer { text-align: left; padding: 48px 24px 24px; }
footer.footer .container {
  /* Override the card-style .container — footer is a full-width band */
  background: none !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  max-width: 1200px;
  margin: 0 auto !important;
  padding: 0 !important;
}
footer.footer .footer-content {
  display: grid;
  grid-template-columns: 1.4fr 2fr;
  gap: 48px;
  align-items: start;
}
@media (max-width: 768px) {
  footer.footer .footer-content { grid-template-columns: 1fr; gap: 32px; }
}
footer.footer .footer-brand__title {
  display: flex; align-items: center; gap: 10px;
  font-size: 1.1rem; font-weight: 600; color: #fff;
  margin-bottom: 12px;
}
footer.footer .footer-brand__title svg { flex-shrink: 0; }
footer.footer .footer-brand p {
  color: #94a3b8; margin: 0 0 16px; line-height: 1.6;
}
footer.footer .footer-brand__social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; margin-right: 8px;
  border-radius: 6px; background: rgba(255,255,255,0.06);
  color: #cbd5e1; transition: background 0.15s, color 0.15s;
}
footer.footer .footer-brand__social a:hover {
  background: rgba(79,70,229,0.3); color: #fff;
}
footer.footer .footer-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 600px) {
  footer.footer .footer-links { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 400px) {
  footer.footer .footer-links { grid-template-columns: 1fr; }
}
footer.footer .footer-col h4 {
  font-size: 0.85rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: #fff; margin: 0 0 12px;
}
footer.footer .footer-col a {
  display: block; color: #cbd5e1; font-size: 0.9rem;
  margin: 6px 0; text-decoration: none;
  transition: color 0.15s;
}
footer.footer .footer-col a:hover { color: #fff; text-decoration: underline; }
footer.footer .footer-bottom {
  margin-top: 32px; padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.08);
  text-align: center; color: #94a3b8; font-size: 0.85rem;
}
footer.footer .footer-bottom p { margin: 0; }

/* ----------------- Container reset helpers (2026-08-09) -----------------
 * .container is defined globally as a card-style box (used by home body).
 * Anywhere we want pure full-width gutters (navbar / breadcrumbs / footer band),
 * use .container-fluid instead so the card style doesn't apply.
 * ----------------------------------------------------------------------- */
.container-fluid {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: 0 !important;
}

/* Strip the card style from .container when it's a structural wrapper
 * for navbar / breadcrumbs / footer (not a content card).
 * 2026-08-09: home's index_en.php has its own .container via inline <style>;
 *             these four pages (about / contact / privacy / tool) use the
 *             shared header_frame + footer_frame, so we reset here. */
.navbar .container,
.breadcrumbs .container,
.site-footer .container,
.site-footer__inner {
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: 0 !important;
    padding: 0 24px !important;
    max-width: 1200px;
}

/* ----------------- Lang switcher slot (inside .main-nav) -------------- */
.nav-lang-slot {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-left: 8px;
}
@media (max-width: 900px) {
    .nav-lang-slot { display: none; }
}

/* ----------------- Skip link (a11y) ------------------------------------- */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--ocr-brand, #4F46E5);
    color: #ffffff;
    padding: 8px 16px;
    border-radius: 0 0 var(--ocr-radius-sm, 6px) var(--ocr-radius-sm, 6px);
    z-index: 100;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
}
.skip-link:focus {
    left: 24px;
}

/* ----------------- Breadcrumbs ----------------------------------------- */
.breadcrumbs {
    padding: 12px 0;
    background: var(--ocr-bg-soft, #f7f8fb);
    border-bottom: 1px solid var(--ocr-border, #e2e8f0);
    font-size: 0.875rem;
    color: var(--ocr-text-soft, #475569);
}
.breadcrumb {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
}
.breadcrumb li {
    display: inline-flex;
    align-items: center;
}
.breadcrumb li + li::before {
    content: '›';
    margin-right: 8px;
    color: var(--ocr-text-mute, #94a3b8);
    font-size: 1rem;
}
.breadcrumb a {
    color: var(--ocr-brand, #4F46E5);
    text-decoration: none;
}
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb span[aria-current="page"] {
    color: var(--ocr-text, #0f172a);
    font-weight: 500;
}

/* ----------------- Language switcher ------------------------------------ */
.lang-switcher {
    position: relative;
    display: inline-block;
    font-size: 0.875rem;
}
.lang-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-family: inherit;
    font-size: 0.875rem;
    color: var(--ocr-text-soft, #475569);
    background: var(--ocr-bg-soft, #f7f8fb);
    border: 1px solid var(--ocr-border, #e2e8f0);
    border-radius: var(--ocr-radius-md, 10px);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.lang-btn:hover {
    background: var(--ocr-surface, #ffffff);
    color: var(--ocr-text, #0f172a);
}
.lang-current { font-weight: 500; }
.lang-chevron { color: var(--ocr-text-mute, #94a3b8); transition: transform 0.15s ease; }
.lang-switcher.open .lang-chevron { transform: rotate(180deg); }
.lang-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 50;
    min-width: 360px;
    padding: 8px;
    background: var(--ocr-surface, #ffffff);
    border: 1px solid var(--ocr-border, #e2e8f0);
    border-radius: var(--ocr-radius-md, 10px);
    box-shadow: var(--ocr-shadow-lg);
    display: none;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px;
}
.lang-switcher.open .lang-dropdown { display: flex; }
.lang-dropdown a {
    display: block;
    flex: 1 1 calc(33.33% - 4px);
    padding: 7px 8px;
    border-radius: var(--ocr-radius-sm, 6px);
    color: var(--ocr-text, #0f172a);
    text-decoration: none;
    font-size: 0.8rem;
    transition: background 0.12s ease;
    text-align: center;
}
.lang-dropdown a:hover { background: var(--ocr-bg-soft, #f7f8fb); color: var(--ocr-brand, #4F46E5); }
.lang-dropdown a.active {
    background: var(--ocr-brand-soft, rgba(79,70,229,0.08));
    color: var(--ocr-brand, #4F46E5);
    font-weight: 500;
}

/* ============================================================
 * Site footer (multi-column) — 2026-08-09
 * Class names: .site-footer__inner / __grid / __brand / __cols / __col / __bottom
 * Used by content/_partials/footer_frame.php
 * ============================================================ */
.site-footer {
    background: linear-gradient(180deg, #0f172a 0%, #020617 100%);
    color: #cbd5e1;
    padding: 48px 24px 24px;
    margin-top: 64px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.site-footer__inner {
    max-width: 1200px;
    margin: 0 auto;
}
.site-footer__grid {
    display: grid;
    grid-template-columns: 1.4fr 2fr;
    gap: 48px;
    align-items: start;
}
@media (max-width: 768px) {
    .site-footer__grid { grid-template-columns: 1fr; gap: 32px; }
}
.site-footer__brand {
    /* inner block; subclasses below */
}
.site-footer__brand-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.0625rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 12px;
}
.site-footer__brand-logo svg { flex-shrink: 0; }
.site-footer__brand-desc {
    color: #94a3b8;
    font-size: 0.9375rem;
    line-height: 1.6;
    margin: 0 0 16px;
}
.site-footer__brand-social {
    display: inline-flex;
    gap: 8px;
}
.site-footer__brand-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: #cbd5e1;
    background: rgba(255,255,255,0.06);
    border-radius: 6px;
    transition: background-color 0.15s ease, color 0.15s ease;
    text-decoration: none;
}
.site-footer__brand-social a:hover {
    background: rgba(79,70,229,0.3);
    color: #ffffff;
}
.site-footer__cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
@media (max-width: 600px) { .site-footer__cols { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 400px) { .site-footer__cols { grid-template-columns: 1fr; } }
.site-footer__col-title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #ffffff;
    margin: 0 0 12px;
}
.site-footer__col-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.site-footer__col-list a {
    color: #cbd5e1;
    font-size: 0.875rem;
    text-decoration: none;
    transition: color 0.15s ease;
}
.site-footer__col-list a:hover {
    color: #ffffff;
    text-decoration: underline;
}
.site-footer__bottom {
    margin-top: 32px;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    color: #94a3b8;
    font-size: 0.8125rem;
    flex-wrap: wrap;
}
.site-footer__bottom p { margin: 0; }

/* ============================================================
 * OCR Suite — shared class namespace (2026-08-09 rewrite)
 *
 * Used by:
 *   - content/_pages/about.php      (.ocr-about, .ocr-page-header, .ocr-section, .ocr-card, .ocr-faq, .ocr-stats, .ocr-value-grid)
 *   - content/_pages/contact.php    (.ocr-contact, .ocr-form, .ocr-field, .ocr-channels, .ocr-faq)
 *   - content/_pages/privacy.php    (.ocr-prose)
 *   - content/_pages/tool.php       (.ocr-hero, .ocr-workbench, .ocr-dropzone, .ocr-btn, .ocr-queue, .ocr-controls,
 *                                     .ocr-lang-select, .ocr-result, .ocr-modal, .ocr-redact, .ocr-siblings,
 *                                     .ocr-content, .ocr-section, .ocr-features, .ocr-steps, .ocr-cases, .ocr-faq)
 *
 * Replaces the original .about-* / .contact-* / .privacy-* / .tool-* / .page-* / .section-* / .feature-card /
 * .step-card / .usecase-card / .faq-* / .tool-paste-modal / .tool-redact-* / .btn-tool / .contact-form / etc.
 * The original class names are intentionally abandoned — they were template-copied
 * and would mark this site as a fork in any external structural fingerprint.
 * ============================================================ */

/* ----------------- 1. ocr-page-header (page hero for static pages) ----------- */
.ocr-page-header {
    max-width: 800px;
    margin: 48px auto 32px;
    padding: 0 24px;
    text-align: left;
}
.ocr-page-header--centered { text-align: center; }
.ocr-page-header__eyebrow {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ocr-brand, #4F46E5);
    margin-bottom: 12px;
}
.ocr-page-header__title {
    font-size: clamp(1.875rem, 4vw, 2.75rem);
    font-weight: 700;
    line-height: 1.15;
    color: var(--ocr-text, #0f172a);
    margin: 0 0 16px;
}
.ocr-page-header__lead {
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--ocr-text-soft, #475569);
    margin: 0;
}

/* ----------------- 2. ocr-section (content section frame) ------------------- */
.ocr-section {
    max-width: 1100px;
    margin: 56px auto;
    padding: 0 24px;
}
.ocr-section__head {
    max-width: 720px;
    margin-bottom: 32px;
}
.ocr-section__head--center {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
.ocr-section__eyebrow {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ocr-brand, #4F46E5);
    margin-bottom: 8px;
}
.ocr-section__title {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    line-height: 1.25;
    color: var(--ocr-text, #0f172a);
    margin: 0;
}

/* ----------------- 3. ocr-stats (4-tile stat row) --------------------------- */
.ocr-stats {
    max-width: 1100px;
    margin: 32px auto;
    padding: 24px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    background: linear-gradient(135deg, rgba(79,70,229,0.06), rgba(236,72,153,0.04));
    border: 1px solid var(--ocr-border, #e2e8f0);
    border-radius: var(--ocr-radius-lg, 16px);
}
@media (max-width: 720px) {
    .ocr-stats { grid-template-columns: repeat(2, 1fr); }
}
.ocr-stat { text-align: center; padding: 8px; }
.ocr-stat__num {
    display: block;
    font-size: clamp(1.5rem, 3.5vw, 2.25rem);
    font-weight: 700;
    color: var(--ocr-brand, #4F46E5);
    line-height: 1.1;
}
.ocr-stat__label {
    display: block;
    margin-top: 6px;
    font-size: 0.875rem;
    color: var(--ocr-text-soft, #475569);
}

/* ----------------- 4. ocr-card (generic card; .ocr-card--value / etc.) ------- */
.ocr-card {
    background: var(--ocr-surface, #ffffff);
    border: 1px solid var(--ocr-border, #e2e8f0);
    border-radius: var(--ocr-radius-md, 10px);
    padding: 24px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ocr-card:hover { transform: translateY(-2px); box-shadow: var(--ocr-shadow-md); }
.ocr-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 12px;
    color: var(--ocr-brand, #4F46E5);
    background: var(--ocr-brand-soft, rgba(79,70,229,0.1));
    border-radius: var(--ocr-radius-sm, 6px);
}
.ocr-card__title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--ocr-text, #0f172a);
    margin: 0 0 8px;
}
.ocr-card__desc {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--ocr-text-soft, #475569);
    margin: 0;
}

/* about-story */
.ocr-about-story__grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 48px;
    align-items: start;
}
@media (max-width: 768px) {
    .ocr-about-story__grid { grid-template-columns: 1fr; gap: 24px; }
}
.ocr-about-story__text p {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--ocr-text-soft, #475569);
    margin: 0 0 16px;
}
.ocr-mission-card {
    background: linear-gradient(135deg, rgba(79,70,229,0.08), rgba(236,72,153,0.06));
    border: 1px solid var(--ocr-border, #e2e8f0);
    border-radius: var(--ocr-radius-lg, 16px);
    padding: 32px 24px;
    text-align: center;
}
.ocr-mission-card__icon { color: var(--ocr-brand, #4F46E5); margin-bottom: 12px; }
.ocr-mission-card__title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--ocr-text, #0f172a);
    margin: 0 0 8px;
}
.ocr-mission-card__desc {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--ocr-text-soft, #475569);
    margin: 0;
}

.ocr-value-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
@media (max-width: 920px) { .ocr-value-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ocr-value-grid { grid-template-columns: 1fr; } }

/* ----------------- 5. ocr-faq (accordion) ------------------------------------ */
.ocr-faq {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ocr-faq__item {
    background: var(--ocr-surface, #ffffff);
    border: 1px solid var(--ocr-border, #e2e8f0);
    border-radius: var(--ocr-radius-md, 10px);
    overflow: hidden;
}
.ocr-faq__q {
    list-style: none;
    cursor: pointer;
    padding: 16px 20px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--ocr-text, #0f172a);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    user-select: none;
}
.ocr-faq__q::-webkit-details-marker { display: none; }
.ocr-faq__q::after {
    content: '';
    width: 12px;
    height: 12px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}
.ocr-faq__item[open] .ocr-faq__q::after { transform: rotate(-135deg); }
.ocr-faq__a {
    padding: 0 20px 16px;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--ocr-text-soft, #475569);
}
.ocr-faq__a p { margin: 0; }
.ocr-faq__a a { color: var(--ocr-brand, #4F46E5); text-decoration: underline; }

/* ----------------- 6. ocr-contact / ocr-form / ocr-channels ----------------- */
.ocr-contact {
    /* extends .container behavior automatically */
}
.ocr-contact__form-wrap {
    max-width: 720px;
    margin: 32px auto 56px;
    padding: 0 24px;
}
.ocr-form-card {
    background: var(--ocr-surface, #ffffff);
    border: 1px solid var(--ocr-border, #e2e8f0);
    border-radius: var(--ocr-radius-lg, 16px);
    padding: 32px;
    box-shadow: var(--ocr-shadow-md);
}
@media (max-width: 540px) { .ocr-form-card { padding: 20px; } }
.ocr-form-card__head { margin-bottom: 20px; }
.ocr-form-card__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--ocr-text, #0f172a);
    margin: 0 0 6px;
}
.ocr-form-card__title svg { color: var(--ocr-brand, #4F46E5); flex-shrink: 0; }
.ocr-form-card__sub {
    font-size: 0.9375rem;
    color: var(--ocr-text-soft, #475569);
    margin: 0;
}

.ocr-form { display: flex; flex-direction: column; gap: 16px; }
.ocr-form__row { display: flex; flex-direction: column; gap: 16px; }
.ocr-form__row--split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
@media (max-width: 540px) { .ocr-form__row--split { grid-template-columns: 1fr; } }
.ocr-field { display: flex; flex-direction: column; gap: 6px; }
.ocr-field__label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ocr-text, #0f172a);
}
.ocr-field__input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    font-size: 0.9375rem;
    font-family: inherit;
    color: var(--ocr-text, #0f172a);
    background: var(--ocr-surface, #ffffff);
    border: 1px solid var(--ocr-border, #e2e8f0);
    border-radius: var(--ocr-radius-sm, 6px);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ocr-field__input:focus {
    outline: none;
    border-color: var(--ocr-brand, #4F46E5);
    box-shadow: 0 0 0 3px var(--ocr-brand-soft, rgba(79,70,229,0.18));
}
.ocr-field__textarea { resize: vertical; min-height: 120px; }
.ocr-field__select {
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}
.ocr-field--captcha .ocr-captcha-question {
    color: var(--ocr-brand, #4F46E5);
    margin: 0 2px;
}
.ocr-captcha-input { max-width: 120px; }
.ocr-form__actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.ocr-form__note {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--ocr-text-soft, #475569);
}
.ocr-form__msg {
    font-size: 0.875rem;
    min-height: 1.25rem;
    color: var(--ocr-text-soft, #475569);
}

/* ----------------- 7. ocr-btn (button system used everywhere) --------------- */
.ocr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 22px;
    font-size: 0.9375rem;
    font-weight: 600;
    font-family: inherit;
    line-height: 1;
    border-radius: var(--ocr-radius-md, 10px);
    border: 1px solid transparent;
    cursor: pointer;
    user-select: none;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s ease, transform 0.05s ease, box-shadow 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.ocr-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.ocr-btn:not(:disabled):active { transform: translateY(1px); }
.ocr-btn--primary {
    background: var(--ocr-brand, #4F46E5);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(79,70,229,0.3);
}
.ocr-btn--primary:hover:not(:disabled) {
    background: #4338ca;
    box-shadow: 0 6px 16px rgba(79,70,229,0.4);
}
/* Primary buttons keep their bright fill even when disabled, which makes users
   think they are still clickable. Override the brand colors with a neutral
   ghost-style palette so "this button has nothing to do right now" reads at a
   glance. Selector uses :disabled so it outranks the pure .ocr-btn--primary rule. */
.ocr-btn--primary:disabled,
.ocr-btn--primary:disabled:hover {
    background: var(--ocr-surface-alt, #f8fafc) !important;
    color: var(--ocr-text-faint, #94a3b8) !important;
    border-color: var(--ocr-border, #e2e8f0) !important;
    box-shadow: none !important;
    opacity: 0.55;
}
.ocr-btn--ghost {
    background: var(--ocr-bg-soft, #f7f8fb);
    color: #64748b;
    border-color: var(--ocr-border, #e2e8f0);
}
.ocr-btn--ghost:hover:not(:disabled) {
    background: #eef0f6;
    color: var(--ocr-text, #0f172a);
    border-color: #cbd5e1;
}
/* Success variant: solid-fill green used for end-of-batch "Start New". The chip
   next to it stays light-fill so the controls row has a clear primary→secondary
   hierarchy: heavy CTA first, lightweight confirmation second. Distinct from the
   brand primary (purple) so users can't confuse "Start New" with the main OCR
   action. */
.ocr-btn--success {
    background: #10b981;
    color: #ffffff;
    border-color: #059669;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
}
.ocr-btn--success:hover:not(:disabled) {
    background: #059669;
    color: #ffffff;
    border-color: #047857;
    box-shadow: 0 6px 16px rgba(5, 150, 105, 0.32);
}
.ocr-btn--success:active:not(:disabled) {
    background: #047857;
    box-shadow: 0 2px 6px rgba(4, 120, 87, 0.25);
}
.ocr-btn--lg { padding: 13px 28px; font-size: 1rem; }
.ocr-btn--sm { padding: 7px 14px; font-size: 0.875rem; }

/* ----------------- 8. ocr-channels (3-up channel cards) --------------------- */
.ocr-channels {
    max-width: 1100px;
    margin: 48px auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
@media (max-width: 820px) { .ocr-channels { grid-template-columns: 1fr; } }
.ocr-channel {
    background: var(--ocr-surface, #ffffff);
    border: 1px solid var(--ocr-border, #e2e8f0);
    border-radius: var(--ocr-radius-md, 10px);
    padding: 24px;
    text-align: center;
}
.ocr-channel__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 12px;
    color: var(--ocr-brand, #4F46E5);
    background: var(--ocr-brand-soft, rgba(79,70,229,0.1));
    border-radius: 50%;
}
.ocr-channel__title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--ocr-text, #0f172a);
    margin: 0 0 6px;
}
.ocr-channel__desc {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--ocr-text-soft, #475569);
    margin: 0 0 8px;
}
.ocr-channel__link {
    display: inline-block;
    color: var(--ocr-brand, #4F46E5);
    font-size: 0.9375rem;
    text-decoration: none;
    font-weight: 500;
}
.ocr-channel__link:hover { text-decoration: underline; }

/* ----------------- 9. ocr-privacy (long-form policy) ------------------------ */
.ocr-privacy__updated {
    margin-top: 12px;
    font-size: 0.875rem;
    color: var(--ocr-text-soft, #475569);
}
.ocr-privacy__highlights {
    max-width: 1100px;
    margin: 32px auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
@media (max-width: 720px) { .ocr-privacy__highlights { grid-template-columns: 1fr; } }
.ocr-highlight {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(16,185,129,0.06), rgba(16,185,129,0.02));
    border: 1px solid rgba(16,185,129,0.18);
    border-radius: var(--ocr-radius-md, 10px);
}
.ocr-highlight__icon {
    color: #10B981;
    margin-bottom: 4px;
}
.ocr-highlight__title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ocr-text, #0f172a);
    margin: 0;
}
.ocr-highlight__desc {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--ocr-text-soft, #475569);
    margin: 0;
}

.ocr-privacy__body {
    max-width: 900px;
    margin: 48px auto 64px;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 40px;
}
@media (max-width: 820px) {
    .ocr-privacy__body { grid-template-columns: 1fr; gap: 24px; }
}
.ocr-toc {
    position: sticky;
    top: 24px;
    align-self: start;
    background: var(--ocr-bg-soft, #f7f8fb);
    border: 1px solid var(--ocr-border, #e2e8f0);
    border-radius: var(--ocr-radius-md, 10px);
    padding: 16px;
}
@media (max-width: 820px) { .ocr-toc { position: static; } }
.ocr-toc__title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ocr-text-mute, #94a3b8);
    margin: 0 0 8px;
}
.ocr-toc__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ocr-toc__list a {
    font-size: 0.875rem;
    color: var(--ocr-text-soft, #475569);
    text-decoration: none;
    line-height: 1.4;
}
.ocr-toc__list a:hover { color: var(--ocr-brand, #4F46E5); }

.ocr-prose {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--ocr-text-soft, #475569);
}
.ocr-prose__section { margin-bottom: 32px; }
.ocr-prose h2 {
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--ocr-text, #0f172a);
    margin: 32px 0 12px;
    line-height: 1.3;
}
.ocr-prose h3 {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--ocr-text, #0f172a);
    margin: 20px 0 8px;
}
.ocr-prose p { margin: 0 0 12px; }
.ocr-prose ul {
    margin: 0 0 16px;
    padding-left: 24px;
}
.ocr-prose li { margin-bottom: 4px; }
.ocr-prose a { color: var(--ocr-brand, #4F46E5); text-decoration: underline; }
.ocr-prose strong { color: var(--ocr-text, #0f172a); }

/* ----------------- 10. ocr-tool (hero + workbench + queue + lang + result) -- */
.ocr-tool {
    /* layout managed via .container wrappers inside */
}

.ocr-hero {
    max-width: 1200px;
    margin: 28px auto 24px;
    padding: 24px 28px 16px;
    text-align: center;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 2px 12px rgba(79,70,229,0.06);
}
.ocr-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: var(--ocr-brand-soft, rgba(79,70,229,0.1));
    color: var(--ocr-brand, #4F46E5);
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 500;
    margin-bottom: 20px;
}
.ocr-hero__pulse {
    width: 8px;
    height: 8px;
    background: var(--ocr-brand, #4F46E5);
    border-radius: 50%;
    animation: ocr-pulse 1.6s ease-in-out infinite;
}
@keyframes ocr-pulse {
    0%, 100% { opacity: 0.4; transform: scale(0.85); }
    50% { opacity: 1; transform: scale(1.1); }
}
.ocr-hero__title {
    font-size: clamp(2rem, 5vw, 3.25rem);
    font-weight: 700;
    line-height: 1.1;
    color: var(--ocr-text, #0f172a);
    margin: 0 0 16px;
}
.ocr-hero__accent {
    background: linear-gradient(135deg, var(--ocr-brand, #4F46E5) 0%, var(--ocr-accent, #ec4899) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.ocr-hero__sub {
    font-size: 1.125rem;
    line-height: 1.65;
    color: var(--ocr-text, #0f172a);
    margin: 0 auto;
    opacity: 0.75;
}

/* Workbench panel */
.ocr-workbench {
    max-width: 1200px;
    margin: 32px auto 48px;
    padding: 0;
}
.ocr-workbench__panel {
    background: var(--ocr-surface, #ffffff);
    border: 1px solid var(--ocr-border, #e2e8f0);
    border-radius: var(--ocr-radius-xl, 24px);
    box-shadow: var(--ocr-shadow-lg);
    padding: 28px 32px;
}
@media (max-width: 540px) { .ocr-workbench__panel { padding: 16px; } }

/* Promise strip */
.ocr-promise {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px 16px;
    padding: 10px 0;
    margin-bottom: 16px;
    font-size: 0.8125rem;
    color: var(--ocr-text-soft, #64748b);
}
.ocr-promise__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ocr-text-soft, #475569);
}
.ocr-promise__chip svg { color: var(--ocr-success, #10B981); flex-shrink: 0; }
.ocr-promise__sep {
    display: none;
}

/* Dropzone */
.ocr-dropzone {
    position: relative;
    border: 2px dashed var(--ocr-border, #e2e8f0);
    border-radius: var(--ocr-radius-lg, 16px);
    background: var(--ocr-bg-soft, #f7f8fb);
    padding: 48px 24px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.ocr-dropzone:hover, .ocr-dropzone.drag-over {
    border-color: var(--ocr-brand, #4F46E5);
    background: var(--ocr-brand-soft, rgba(79,70,229,0.06));
}
.ocr-dropzone.is-ready { border-color: var(--ocr-success, #10B981); background: rgba(16,185,129,0.06); }
.ocr-dropzone__icon {
    display: inline-flex;
    color: var(--ocr-brand, #4F46E5);
    margin-bottom: 12px;
}
.ocr-dropzone__icon svg { width: 48px; height: 48px; }
.ocr-dropzone__label {
    margin: 0 0 4px;
    font-size: 1rem;
    color: var(--ocr-text, #0f172a);
}
.ocr-dropzone__meta {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--ocr-text-soft, #475569);
}

/* Paste row — below dropzone, centered */
.ocr-paste-row {
    display: flex;
    justify-content: center;
    margin-top: 12px;
}
.ocr-paste-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 18px;
    font-size: 0.875rem;
    font-family: inherit;
    color: var(--ocr-brand, #4F46E5);
    background: transparent;
    border: 1.5px dashed var(--ocr-border, #e2e8f0);
    border-radius: var(--ocr-radius-sm, 6px);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.ocr-paste-btn:hover { background: var(--ocr-brand-soft, rgba(79,70,229,0.06)); border-color: var(--ocr-brand, #4F46E5); }
.ocr-paste-btn kbd {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75rem;
    padding: 2px 6px;
    background: var(--ocr-bg-soft, #f7f8fb);
    border-radius: 4px;
    color: var(--ocr-text-soft, #475569);
}

/* Task queue */
.ocr-queue {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ocr-queue:empty { display: none; }

/* Queue item — emitted by tool.js renderTask().
   Mirrors the legacy .file-item / .file-preview / .file-item-info visual spec
   (54×54 rounded thumbnail, 88px row height, soft surface, ellipsis filename)
   but uses the new .tool-task BEM names that tool.js writes to the DOM.
   tool.js was updated 2026-08-19 but CSS was missed → images/svgs rendered
   at native size and the row collapsed to 0 height. */
.tool-task {
    position: relative;
    background: var(--ocr-surface, #ffffff);
    border: 1px solid var(--ocr-border, #e2e8f0);
    border-radius: var(--ocr-radius-md, 10px);
    min-height: 88px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 12px 156px 12px 12px; /* extra right padding to clear the action button cluster */
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    cursor: pointer;
}
.tool-task:hover {
    border-color: var(--ocr-border-strong, #cbd5e1);
    box-shadow: var(--ocr-shadow-sm, 0 2px 8px rgba(15, 23, 42, 0.06));
}
.tool-task:focus-visible {
    outline: 2px solid var(--ocr-primary, #2563eb);
    outline-offset: 2px;
}

/* Thumbnail */
.tool-task-preview {
    position: relative;
    width: 54px;
    height: 54px;
    border-radius: var(--ocr-radius-sm, 8px);
    background: var(--ocr-surface-alt, #f8fafc);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    cursor: zoom-in;
}
.tool-task-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.tool-task-preview .tool-empty {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ocr-text-faint, #94a3b8);
}
.tool-task-preview .tool-empty svg {
    width: 32px;
    height: 32px;
}
.tool-task-preview-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
    pointer-events: none;
}
.tool-task-preview-overlay svg {
    width: 22px;
    height: 22px;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.tool-task:hover .tool-task-preview-overlay { background: rgba(15, 23, 42, 0.45); }
.tool-task:hover .tool-task-preview-overlay svg { opacity: 1; }

/* Info block */
.tool-task-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    overflow: hidden;
}
.tool-task-filename {
    color: var(--ocr-text, #0f172a);
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tool-task-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    color: var(--ocr-text-faint, #64748b);
    line-height: 1.3;
    flex-wrap: wrap;
}
.tool-task-size { color: var(--ocr-text-faint, #64748b); }
.tool-task-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--ocr-text-faint, #64748b);
    white-space: nowrap;
}
.tool-task-status svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}
.tool-task-status.pending    { color: var(--ocr-text-faint, #64748b); }
.tool-task-status.uploading  { color: var(--ocr-primary, #2563eb); }
.tool-task-status.processing { color: var(--ocr-primary, #2563eb); }
.tool-task-status.polling    { color: var(--ocr-primary, #2563eb); }
.tool-task-status.completed  { color: var(--ocr-success-dark, #047857); }
.tool-task-status.failed     { color: #ef4444; }

.tool-task-error {
    margin-top: 4px;
    font-size: 0.78rem;
    color: #ef4444;
    background: rgba(239, 68, 68, 0.08);
    border-radius: 6px;
    padding: 4px 8px;
}

/* Progress bar */
.tool-task-progress {
    margin-top: 6px;
    height: 6px;
    background: var(--ocr-border, #e2e8f0);
    border-radius: 999px;
    overflow: hidden;
    align-self: stretch;
    width: 100%;
}
.tool-task-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--ocr-primary-light, #60a5fa), var(--ocr-primary, #2563eb));
    border-radius: 999px;
    transition: width 0.2s ease-out;
}

/* Result block — hidden by default. Only revealed when the row itself is
   .is-expanded (toggled by clicking the row, the chevron, or pressing Enter/Space
   on a focused row). This is the core change that keeps batch OCR screens
   compact: 5 completed tasks take ~5×88px instead of 5×(88+160)px. */
.tool-task-result {
    display: none;
    flex-basis: 100%;
    margin-top: 10px;
    padding: 12px;
    background: var(--ocr-surface-alt, #f8fafc);
    border: 1px solid var(--ocr-border, #e2e8f0);
    border-radius: var(--ocr-radius-sm, 8px);
    animation: ocr-result-reveal 0.3s ease-out;
}
.tool-task.is-expanded .tool-task-result { display: block; }
@keyframes ocr-result-reveal {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.tool-task-result-text-wrap {
    max-height: 160px;
    overflow: hidden;
    position: relative;
    transition: max-height 0.35s ease;
}
/* When the user clicks "Show full text" we drop the clamp by setting max-height
   to a generous value that comfortably covers long OCR results without ever
   snapping to "infinite". 1200px ≈ 50 lines at 0.86rem/1.6 line-height — well
   above any single-image OCR payload and short enough that the transition still
   feels snappy. */
.tool-task-result-text-wrap.is-expanded {
    max-height: 1200px;
}
/* Gradient mask — only visible in the collapsed state so users see "there's more
   below". Sits below the wrap and only takes effect when the parent is NOT
   expanded, using a sibling selector so we don't need an extra element. */
.tool-task-result-text-wrap::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 56px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.92) 75%, #ffffff 100%);
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.25s ease;
}
.tool-task-result-text-wrap.is-expanded::after { opacity: 0; }
.tool-task-result-text {
    font-size: 0.86rem;
    line-height: 1.6;
    color: var(--ocr-text, #0f172a);
    white-space: pre-wrap;
    word-break: break-word;
}
/* Short result marker: text is fully visible, no need for the toggle. */
.tool-task-result-text.is-short { /* nothing to toggle — purely a state hook for JS */ }
.tool-task-result-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
}
.tool-task-result-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px;
    background: var(--ocr-surface, #ffffff);
    color: var(--ocr-text, #0f172a);
    border: 1px solid var(--ocr-border, #e2e8f0);
    border-radius: var(--ocr-radius-sm, 8px);
    font-size: 0.82rem;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.tool-task-result-btn svg { width: 14px; height: 14px; }
.tool-task-result-btn:hover {
    background: var(--ocr-bg-soft, #f7f8fb);
    border-color: var(--ocr-border-strong, #cbd5e1);
}
.tool-task-result-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: 0;
    color: var(--ocr-primary, #2563eb);
    font-size: 0.82rem;
    font-family: inherit;
    cursor: pointer;
    padding: 0;
}
.tool-task-result-toggle[hidden] { display: none; }
.tool-task-result-toggle svg {
    width: 14px;
    height: 14px;
    transition: transform 0.25s ease;
}
/* Chevron flips 180° when expanded so the icon mirrors the state of the text. */
.tool-task-result-toggle.is-expanded svg { transform: rotate(180deg); }
.tool-task-result-toggle:hover { color: #1d4ed8; }

/* Action buttons (right side) */
.tool-task-actions {
    position: absolute;
    right: 10px;
    top: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.tool-task-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 30px;
    padding: 0 10px;
    background: transparent;
    border: 1px solid var(--ocr-border, #e2e8f0);
    border-radius: var(--ocr-radius-sm, 8px);
    color: var(--ocr-text-faint, #64748b);
    font-size: 0.8rem;
    font-family: inherit;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.tool-task-btn svg { width: 14px; height: 14px; }
.tool-task-btn:hover {
    color: var(--ocr-text, #0f172a);
    border-color: var(--ocr-border-strong, #cbd5e1);
}

/* Compact icon-only quick action (Copy / Download) in the row's right cluster.
   Sized to match .tool-task-btn height so the cluster feels uniform. Hidden by
   default (only reveal once the task has a result) so pending uploads don't
   show "Copy" / "Download" buttons that wouldn't do anything. */
.tool-task-quick-btn {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--ocr-border, #e2e8f0);
    border-radius: var(--ocr-radius-sm, 8px);
    color: var(--ocr-text-faint, #64748b);
    cursor: pointer;
    font-family: inherit;
    padding: 0;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.tool-task-quick-btn svg { width: 14px; height: 14px; }
.tool-task-quick-btn:hover {
    color: var(--ocr-text, #0f172a);
    border-color: var(--ocr-border-strong, #cbd5e1);
    background: var(--ocr-bg-soft, #f7f8fb);
}
.tool-task:not(.is-completed) .tool-task-quick-btn { display: none; }

/* Chevron — explicit affordance that the row is clickable. Rotates 180° when
   the row is expanded so the icon mirrors the state. */
.tool-task-chevron {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--ocr-border, #e2e8f0);
    border-radius: var(--ocr-radius-sm, 8px);
    color: var(--ocr-text-faint, #64748b);
    cursor: pointer;
    font-family: inherit;
    padding: 0;
    transition: color 0.15s, border-color 0.15s, background 0.15s, transform 0.25s ease;
}
.tool-task-chevron svg {
    width: 14px;
    height: 14px;
    transition: transform 0.25s ease;
}
.tool-task-chevron:hover {
    color: var(--ocr-primary, #2563eb);
    border-color: var(--ocr-primary, #2563eb);
    background: var(--ocr-primary-soft, #eff6ff);
}
.tool-task.is-expanded .tool-task-chevron svg { transform: rotate(180deg); }
/* Hide the chevron while the task is still working — there's nothing to expand
   yet. Copy/Download are also hidden via the quick-btn rule above. */
.tool-task:not(.is-completed) .tool-task-chevron { display: none; }
.tool-task-remove {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    color: var(--ocr-text-faint, #64748b);
    border-radius: var(--ocr-radius-sm, 8px);
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
    padding: 0;
}
.tool-task-remove:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.08);
}
/* After completion, only "Redact" + "Remove" sit on top-right; result block owns its own row */
.tool-task.is-completed .tool-task-actions { top: 12px; }

/* Responsive — collapse actions onto a row below when very narrow */
@media (max-width: 540px) {
    .tool-task { padding-right: 12px; flex-wrap: wrap; }
    .tool-task-actions {
        position: static;
        margin-left: auto;
    }
}

/* Controls row */
.ocr-controls {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}
.ocr-controls__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.ocr-controls__actions .ocr-btn {
    height: 42px;
    min-width: 165px;
    white-space: nowrap;
}
/* When the Convert button is hidden at end-of-batch the layout must collapse
   cleanly; flex children respect the hidden attribute by default, but we add
   an explicit rule so future style overrides can't accidentally un-hide it. */
.ocr-controls__actions .ocr-btn[hidden] { display: none; }
/* End-of-batch confirmation chip. Shown when every task is terminal so users get a
   positive visual confirmation (not just an empty controls row). Intentionally a
   *secondary* element: light neutral background with subdued green text so the
   adjacent "Start New" CTA (heavy solid green) reads as the dominant call to
   action. Inline-flex keeps the icon and label on one baseline. */
.ocr-controls__done-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 42px;
    padding: 0 16px;
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
    border-radius: var(--ocr-radius-md, 10px);
    font-size: 0.875rem;
    font-weight: 600;
    animation: ocr-done-chip-in 0.35s ease-out both;
}
.ocr-controls__done-chip svg { flex: none; color: #10b981; }
.ocr-controls__done-chip[hidden] { display: none; }
@keyframes ocr-done-chip-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Lang select */
.ocr-lang-select {
    position: relative;
    min-width: 220px;
}
.ocr-lang-select__trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    font-family: inherit;
    font-size: 0.875rem;
    color: var(--ocr-text, #0f172a);
    background: var(--ocr-surface, #ffffff);
    border: 1px solid var(--ocr-border, #e2e8f0);
    border-radius: var(--ocr-radius-md, 10px);
    cursor: pointer;
    text-align: left;
}
.ocr-lang-select__trigger:hover { background: var(--ocr-bg-soft, #f7f8fb); }
.ocr-lang-select__icon { color: var(--ocr-text-soft, #475569); flex-shrink: 0; }
.ocr-lang-select__placeholder { color: var(--ocr-text-mute, #94a3b8); }
.ocr-lang-select__current {
    margin-left: auto;
    font-weight: 500;
    color: var(--ocr-text, #0f172a);
}
.ocr-lang-select__arrow {
    width: 14px;
    height: 14px;
    color: var(--ocr-text-soft, #475569);
    transition: transform 0.15s ease;
}
.ocr-lang-select__trigger[aria-expanded="true"] .ocr-lang-select__arrow { transform: rotate(180deg); }

.ocr-lang-select__menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 30;
    margin: 0;
    padding: 4px;
    list-style: none;
    min-width: 260px;
    max-height: 320px;
    overflow-y: auto;
    background: var(--ocr-surface, #ffffff);
    border: 1px solid var(--ocr-border, #e2e8f0);
    border-radius: var(--ocr-radius-md, 10px);
    box-shadow: var(--ocr-shadow-lg);
    display: none;
}
.ocr-lang-select__menu.is-open { display: block; }
.ocr-lang-select__option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: var(--ocr-radius-sm, 6px);
    color: var(--ocr-text, #0f172a);
    text-decoration: none;
    font-size: 0.875rem;
    cursor: pointer;
}
.ocr-lang-select__option:hover { background: var(--ocr-bg-soft, #f7f8fb); }
.ocr-lang-select__option.is-selected {
    background: var(--ocr-brand-soft, rgba(79,70,229,0.08));
    color: var(--ocr-brand, #4F46E5);
    font-weight: 500;
}
.ocr-lang-select__option.is-disabled { color: var(--ocr-text-mute, #94a3b8); cursor: not-allowed; }
.ocr-lang-select__option-code {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--ocr-text-mute, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    width: 28px;
    flex-shrink: 0;
}
.ocr-lang-select__option-name { flex: 1; }
.ocr-lang-select__check {
    width: 14px;
    height: 14px;
    color: var(--ocr-brand, #4F46E5);
    opacity: 0;
}
.ocr-lang-select__option.is-selected .ocr-lang-select__check { opacity: 1; }

/* Result panel */
.ocr-result {
    margin-top: 20px;
    border: 1px solid var(--ocr-border, #e2e8f0);
    border-radius: var(--ocr-radius-md, 10px);
    background: var(--ocr-surface, #ffffff);
    overflow: hidden;
}
.ocr-result__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--ocr-border, #e2e8f0);
    background: var(--ocr-bg-soft, #f7f8fb);
}
.ocr-result__head-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ocr-text, #0f172a);
}
.ocr-result__head-actions {
    position: relative;
    display: flex;
    gap: 8px;
}
.ocr-download-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 30;
    min-width: 200px;
    padding: 4px;
    background: var(--ocr-surface, #ffffff);
    border: 1px solid var(--ocr-border, #e2e8f0);
    border-radius: var(--ocr-radius-md, 10px);
    box-shadow: var(--ocr-shadow-lg);
}
.ocr-download-menu__item {
    display: block;
    padding: 8px 10px;
    border-radius: var(--ocr-radius-sm, 6px);
    color: var(--ocr-text, #0f172a);
    text-decoration: none;
    font-size: 0.875rem;
}
.ocr-download-menu__item:hover { background: var(--ocr-bg-soft, #f7f8fb); color: var(--ocr-brand, #4F46E5); }
.ocr-result__textarea {
    display: block;
    width: 100%;
    min-height: 200px;
    padding: 16px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--ocr-text, #0f172a);
    background: var(--ocr-surface, #ffffff);
    border: 0;
    resize: vertical;
    box-sizing: border-box;
}
.ocr-result__textarea:focus { outline: none; }

/* Modal */
.ocr-modal {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ocr-modal[hidden] { display: none; }
.ocr-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15,23,42,0.6);
}
.ocr-modal__panel {
    position: relative;
    max-width: 420px;
    width: calc(100% - 32px);
    padding: 32px 24px;
    background: var(--ocr-surface, #ffffff);
    border-radius: var(--ocr-radius-lg, 16px);
    text-align: center;
    box-shadow: var(--ocr-shadow-lg);
}
.ocr-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    border-radius: 50%;
    color: var(--ocr-text-soft, #475569);
    cursor: pointer;
}
.ocr-modal__close:hover { background: var(--ocr-bg-soft, #f7f8fb); }
.ocr-modal__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 12px;
    color: var(--ocr-brand, #4F46E5);
    background: var(--ocr-brand-soft, rgba(79,70,229,0.1));
    border-radius: 50%;
}
.ocr-modal__icon svg { width: 28px; height: 28px; }
.ocr-modal__title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--ocr-text, #0f172a);
    margin: 0 0 6px;
}
.ocr-modal__desc {
    font-size: 0.9375rem;
    color: var(--ocr-text-soft, #475569);
    margin: 0 0 16px;
}
.ocr-modal__keys {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--ocr-bg-soft, #f7f8fb);
    border-radius: var(--ocr-radius-md, 10px);
    margin-bottom: 12px;
}
.ocr-modal__keys kbd {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.875rem;
    padding: 4px 8px;
    background: var(--ocr-surface, #ffffff);
    border: 1px solid var(--ocr-border, #e2e8f0);
    border-radius: 4px;
    color: var(--ocr-text, #0f172a);
}
.ocr-modal__keys span { color: var(--ocr-text-mute, #94a3b8); }
.ocr-modal__hint {
    font-size: 0.8125rem;
    color: var(--ocr-text-mute, #94a3b8);
    margin: 0;
}

/* Preview modal */
.ocr-preview-modal {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(15,23,42,0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
}
.ocr-preview-modal[hidden] { display: none; }
.ocr-preview-modal img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ocr-preview-modal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.1);
    color: white;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}
.ocr-preview-modal__close:hover { background: rgba(255,255,255,0.2); }

/* Redact overlay */
.ocr-redact {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(15,23,42,0.95);
    color: white;
    display: flex;
    flex-direction: column;
}
.ocr-redact[hidden] { display: none; }
.ocr-redact__head {
    padding: 12px 16px;
    background: rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.ocr-redact__title { font-size: 0.875rem; font-weight: 500; }
.ocr-redact__actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ocr-redact__tools {
    display: inline-flex;
    background: rgba(255,255,255,0.08);
    border-radius: var(--ocr-radius-md, 10px);
    overflow: hidden;
}
.ocr-redact__tool {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    font-size: 0.8125rem;
    font-family: inherit;
    color: inherit;
    background: transparent;
    color: rgba(255,255,255,0.7);
    border: 0;
    cursor: pointer;
}
.ocr-redact__tool:hover { color: white; }
.ocr-redact__tool.active { background: var(--ocr-brand, #4F46E5); color: white; }
.ocr-redact__buttons { display: inline-flex; gap: 6px; }
.ocr-redact__btn {
    padding: 6px 14px;
    font-size: 0.8125rem;
    font-family: inherit;
    background: rgba(255,255,255,0.1);
    color: white;
    border: 0;
    border-radius: var(--ocr-radius-sm, 6px);
    cursor: pointer;
}
.ocr-redact__btn--primary { background: var(--ocr-brand, #4F46E5); }
.ocr-redact__btn--primary:hover { background: #4338ca; }
.ocr-redact__canvas-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    overflow: auto;
}

/* Sub-tools siblings strip */
.ocr-siblings {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    max-width: 1100px;
    margin: 32px auto 0;
    padding: 12px 24px;
    font-size: 0.875rem;
}
.ocr-siblings__label {
    font-weight: 600;
    color: var(--ocr-text-soft, #475569);
    margin-right: 4px;
}
.ocr-siblings__link {
    color: var(--ocr-brand, #4F46E5);
    text-decoration: none;
}
.ocr-siblings__link:hover { text-decoration: underline; }
.ocr-siblings__sep { color: var(--ocr-text-mute, #94a3b8); }

/* Content (sections wrapper) */
.ocr-content {
    /* keeps section spacing consistent */
}

/* Features grid (3-col cards) */
.ocr-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
@media (max-width: 920px) { .ocr-features { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ocr-features { grid-template-columns: 1fr; } }
.ocr-feature {
    background: var(--ocr-surface, #ffffff);
    border: 1px solid var(--ocr-border, #e2e8f0);
    border-radius: var(--ocr-radius-md, 10px);
    padding: 24px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ocr-feature:hover { transform: translateY(-2px); box-shadow: var(--ocr-shadow-md); }
.ocr-feature__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 12px;
    border-radius: var(--ocr-radius-sm, 6px);
    background: var(--ocr-brand-soft, rgba(79,70,229,0.1));
    color: var(--ocr-brand, #4F46E5);
}
.ocr-feature__icon svg { width: 22px; height: 22px; }
.ocr-feature--green .ocr-feature__icon { background: rgba(16,185,129,0.1); color: var(--ocr-success, #10B981); }
.ocr-feature--amber .ocr-feature__icon { background: rgba(245,158,11,0.1); color: var(--ocr-warn, #F59E0B); }
.ocr-feature--rose .ocr-feature__icon  { background: rgba(239,68,68,0.1); color: var(--ocr-danger, #EF4444); }
.ocr-feature--blue .ocr-feature__icon  { background: var(--ocr-brand-soft, rgba(79,70,229,0.1)); color: var(--ocr-brand, #4F46E5); }
.ocr-feature__title {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--ocr-text, #0f172a);
    margin: 0 0 6px;
}
.ocr-feature__desc {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--ocr-text-soft, #475569);
    margin: 0;
}

/* Steps grid */
.ocr-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
@media (max-width: 920px) { .ocr-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .ocr-steps { grid-template-columns: 1fr; } }
.ocr-step {
    position: relative;
    padding: 24px 20px;
    background: var(--ocr-surface, #ffffff);
    border: 1px solid var(--ocr-border, #e2e8f0);
    border-radius: var(--ocr-radius-md, 10px);
}
.ocr-step__num {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ocr-brand, #4F46E5);
    margin-bottom: 6px;
    line-height: 1;
}
.ocr-step__title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ocr-text, #0f172a);
    margin: 0 0 6px;
}
.ocr-step__desc {
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--ocr-text-soft, #475569);
    margin: 0;
}

/* Cases grid */
.ocr-cases {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
@media (max-width: 720px) { .ocr-cases { grid-template-columns: 1fr; } }
.ocr-case {
    background: var(--ocr-surface, #ffffff);
    border: 1px solid var(--ocr-border, #e2e8f0);
    border-radius: var(--ocr-radius-md, 10px);
    padding: 24px;
}
.ocr-case__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}
.ocr-case__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--ocr-brand, #4F46E5);
    background: var(--ocr-brand-soft, rgba(79,70,229,0.1));
    border-radius: var(--ocr-radius-sm, 6px);
    flex-shrink: 0;
}
.ocr-case__icon svg { width: 18px; height: 18px; }
.ocr-case__title {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--ocr-text, #0f172a);
    margin: 0;
}
.ocr-case__desc {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--ocr-text-soft, #475569);
    margin: 0;
}

/* Trust card */
.ocr-trust-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 24px;
    background: linear-gradient(135deg, rgba(16,185,129,0.06), rgba(16,185,129,0.02));
    border: 1px solid rgba(16,185,129,0.18);
    border-radius: var(--ocr-radius-lg, 16px);
}
.ocr-trust-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: var(--ocr-success, #10B981);
    background: rgba(16,185,129,0.12);
    border-radius: 50%;
    flex-shrink: 0;
}
.ocr-trust-card__title {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--ocr-text, #0f172a);
    margin: 0 0 4px;
}
.ocr-trust-card__desc {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--ocr-text-soft, #475569);
    margin: 0;
}

/* ============================================================
 * Trust / Feature Highlight Section
 * ============================================================ */
.trust-bar {
  max-width: 1200px;
  /* Symmetric vertical margins, kept tight so the trust-bar reads as a
     visual bridge between hero and the upload container rather than a
     standalone block with extra air around it. Each side is sized
     independently: top adds 10px to hero's 16px padding-bottom (26px
     visible), and bottom adds 10px that collapses with upload-panel's
     18px margin-top (max wins -> 18px) + 8px padding-top = 26px.
     Both sides land on exactly 26px so the trust-bar feels centered. */
  margin: 10px auto;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 900px) {
  .trust-bar {
    grid-template-columns: repeat(2, 1fr);
    padding: 0 18px;
  }
}
@media (max-width: 600px) {
  .trust-bar {
    grid-template-columns: 1fr;
    padding: 0 16px;
  }
}
.trust-card {
  background: var(--ocr-surface);
  border: 1px solid var(--ocr-border);
  border-radius: var(--ocr-radius-md);
  padding: 12px 14px;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 11px;
  transition: transform var(--duration) var(--ease-out),
              box-shadow var(--duration) var(--ease-out),
              border-color var(--duration) var(--ease-out);
}
.trust-card-text { flex: 1; min-width: 0; }
.trust-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--ocr-shadow-md);
  border-color: var(--ocr-primary-light);
}
.trust-card-icon {
  width: 42px;
  height: 42px;
  border-radius: var(--ocr-radius-sm);
  background: var(--ocr-primary-soft);
  color: var(--ocr-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
  transition: transform var(--duration) var(--ease-out);
}
.trust-card:hover .trust-card-icon { transform: scale(1.08) rotate(-4deg); }
/* Per-card icon accent colors */
.trust-card:nth-child(1) .trust-card-icon {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  color: var(--ocr-warning-dark);
}
.trust-card:nth-child(2) .trust-card-icon {
  background: linear-gradient(135deg, var(--ocr-success-soft), #a7f3d0);
  color: var(--ocr-success-dark);
}
.trust-card:nth-child(3) .trust-card-icon {
  background: linear-gradient(135deg, var(--ocr-info-soft), #a5f3fc);
  color: var(--ocr-info);
}
.trust-card:nth-child(4) .trust-card-icon {
  background: linear-gradient(135deg, var(--ocr-violet-soft), #ddd6fe);
  color: var(--ocr-violet);
}
.trust-card h3 {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ocr-text);
  margin: 0 0 2px;
  letter-spacing: -0.005em;
  line-height: 1.3;
}
.trust-card p {
  font-size: 0.8rem;
  color: var(--ocr-text-muted);
  line-height: 1.45;
  margin: 0;
}

/* ============================================================
 * Responsive
 * ============================================================ */
@media (max-width: 900px) {
  .nav-list { gap: 6px; padding: 12px 16px; }
  .nav-link { padding: 6px 10px; font-size: 0.88rem; }
  .hero { padding: 24px 18px 10px; margin-top: 8px; }
  .container { padding: 26px 22px !important; margin: 22px auto !important; }
  .user-guide { padding: 30px 22px !important; }
  .trust-bar { padding: 0 18px; gap: 12px; }
  .trust-card { padding: 20px 18px; }
}
@media (max-width: 768px) {
  .nav-list { padding: 10px 14px; }
  .nav-logo a span { display: none; }
  .nav-cta { padding: 7px 14px; font-size: 0.85rem; }
  .user-guide h2 { font-size: 1.22rem !important; }
  .result-container { padding: 24px 20px !important; }
  .download-buttons.artistic { flex-direction: column; }
  .ocr-mode-tab { padding: 9px 10px; font-size: 0.85rem; gap: 5px; }
  .ocr-tab-badge { font-size: 0.58rem; padding: 2px 5px; }
}
@media (max-width: 600px) {
  .hero { padding: 20px 16px 8px; margin-top: 6px; }
  .hero-eyebrow { font-size: 0.75rem; padding: 6px 12px; }
  .hero-title { font-size: clamp(1.45rem, 6vw, 1.75rem); margin-bottom: 10px; }
  .hero-subtitle { margin-bottom: 16px; font-size: 0.92rem; }
  .hero-cta { padding: 10px 22px; font-size: 0.95rem; }
  .container { padding: 22px 16px !important; }
  .container-header { margin-bottom: 18px; padding-bottom: 14px; }
  .container-section-title { font-size: 1.15rem; }
  .upload-area { padding: 36px 16px !important; }
  .upload-text { font-size: 0.96rem !important; }
  .upload-hint { font-size: 0.78rem !important; }
  .ocr-btn { padding: 10px 20px !important; font-size: 0.92rem !important; min-width: 180px; }
  .user-guide { padding: 24px 16px !important; }
  .user-guide table, .user-guide th, .user-guide td { font-size: 0.85rem; padding: 10px !important; }
  .section-anchor-nav.floating-anchor-nav { padding: 10px 12px !important; }
  .anchor-link { font-size: 0.8rem !important; padding: 5px 9px !important; }
  .ocr-mode-panel { padding: 14px 16px; }
  .ocr-mode-panel-icon { width: 38px; height: 38px; font-size: 1rem; }
  .trust-card { padding: 16px 14px; }
  .trust-card-icon { width: 40px; height: 40px; }
}
@media (max-width: 380px) {
  .hero-title { font-size: 1.5rem; }
  .ocr-mode-tab span { display: none; }
  .ocr-mode-tab i { font-size: 1.1rem; }
  .ocr-mode-tab { padding: 12px; }
  .ocr-tab-badge { display: none; }
}

/* ============================================================
 * Focus Styles (A11y)
 * ============================================================ */
*:focus-visible {
  outline: 3px solid var(--ocr-primary-light);
  outline-offset: 2px;
  border-radius: 4px;
}
.ocr-btn:focus-visible { outline-offset: 4px; }
.nav-cta:focus-visible,
.ocr-mode-tab:focus-visible { outline-offset: 3px; }
input[type="file"]:focus-visible,
input[type="radio"]:focus-visible { outline: 3px solid var(--ocr-primary-light); outline-offset: 4px; }
input[type="radio"][hidden] { display: none !important; }

/* ============================================================
 * Page scrollbar (always visible — see html { overflow-y: scroll })
 * ============================================================
 * Match the slim 4px look used by .result-container / .result-content so the
 * whole page reads as one design language. Track is transparent so it blends
 * with the page bg; thumb uses --ocr-border-strong at rest and brightens on
 * hover (no transition — see smoothness rationale in the result-container
 * scrollbar comment). */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--ocr-border-strong) transparent;
}
html::-webkit-scrollbar { width: 8px; height: 8px; }
html::-webkit-scrollbar-track { background: transparent; }
html::-webkit-scrollbar-thumb {
  background: var(--ocr-border-strong);
  border-radius: 4px;
}
html::-webkit-scrollbar-thumb:hover {
  background: var(--ocr-primary);
}

/* ============================================================
 * Reduced Motion (A11y)
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
 * Print
 * ============================================================ */
@media print {
  .main-nav, .container, .section-anchor-nav, footer,
  .ocr-mode-tabs { display: none; }
  .user-guide { box-shadow: none; border: none; padding: 0; }
  body { background: #fff; }
}

/* ============================================================
 * Upload Panel (Minimal — single action focus)
 * ============================================================ */
.upload-panel {
  /* Reuses .container visual; tighten internal spacing */
  /* Pull the upload-panel up against the trust-bar so the gap between
     trust-bar bottom and "Upload & Recognize" title matches the gap
     between hero CTA and trust-bar top. Default .container brings
     margin: 28px auto and padding: 32px onto all four sides — we
     rein in both top values so the visible gap = max(10, 8) + 8 = 16px,
     matching the 16px hero padding-bottom + 10px trust-bar margin-top
     (also 26px... wait, that's 26). User wants 8px to land smaller so
     the trust-bar feels like a tight visual bridge, not a separate
     section. Override margin-top to 8px so the perceived bottom gap
     equals the trust-bar margin-top alone. */
  margin-top: 8px !important;
  padding-top: 8px !important;
}
.upload-panel-title {
  font-size: 1.18rem;
  font-weight: 700;
  color: var(--ocr-text);
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}

/* Underline tab style — light, single row */
.mode-tablist {
  display: flex;
  gap: 0;
  margin: 0 0 18px;
  border-bottom: 1px solid var(--ocr-border);
}
.mode-tab {
  background: transparent;
  border: 0;
  padding: 10px 16px;
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ocr-text-muted);
  cursor: pointer;
  font-family: inherit;
  position: relative;
  transition: color var(--duration) var(--ease-out);
}
.mode-tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: transparent;
  transition: background var(--duration) var(--ease-out);
}
.mode-tab:hover {
  color: var(--ocr-primary);
}
.mode-tab.is-active {
  color: var(--ocr-primary);
}
.mode-tab.is-active::after {
  background: var(--ocr-primary);
}
.mode-tab:focus-visible {
  outline: 3px solid var(--ocr-primary-light);
  outline-offset: -3px;
}

/* Dropzone — visual focus, large and inviting */
.upload-panel .upload-area {
  padding: 24px 20px !important;
  border: 2px dashed #94a3b8;
  background: #fafbfc;
  border-radius: var(--ocr-radius-md);
  transition: border-color var(--duration) var(--ease-out),
              background var(--duration) var(--ease-out);
}
.upload-panel .upload-area:hover,
.upload-panel .upload-area.dragover {
  border-color: var(--ocr-primary);
  background: var(--ocr-primary-soft);
}
.upload-panel .upload-area.has-file {
  border-color: var(--ocr-primary);
  background: var(--ocr-primary-soft);
  border-style: solid;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.06);
}
.upload-panel .upload-area.has-file .upload-text {
  color: var(--ocr-primary);
}
.upload-panel .upload-icon {
  width: 44px;
  height: 44px;
  font-size: 1.25rem;
  color: var(--ocr-primary);
  background: var(--ocr-primary-soft);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}
.upload-panel .upload-text {
  font-size: 1rem !important;
  margin-top: 8px;
  font-weight: 600;
  color: var(--ocr-text);
}
.upload-panel .upload-hint {
  font-size: 0.8rem;
  margin-top: 8px;
  color: var(--ocr-text-muted);
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.4;
}
.upload-panel .upload-mode-description {
  margin-top: 14px;
  padding: 12px 20px;
  background: #ffffff;
  border: 1px solid var(--ocr-border);
  border-radius: 10px;
  font-size: 0.85rem;
  color: var(--ocr-text-muted);
  line-height: 1.6;
  width: calc(100% - 32px);
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  transition: color var(--duration) var(--ease-out),
              border-color var(--duration) var(--ease-out);
}
.upload-panel .upload-mode-description strong {
  color: var(--ocr-primary);
  font-weight: 600;
}

/* Button — auto-width, centered pill so it reads as a button rather than
   a full-bleed panel. Dropzone is above; button is the primary CTA below
   it. The form parent is text-align:center so the inline-flex button
   actually centers horizontally (margin:auto on inline elements is a no-op). */
.upload-panel #uploadForm { text-align: center; }
.upload-panel .ocr-btn {
  margin-top: 16px;
  width: auto;
  display: inline-flex;
}

@media (max-width: 768px) {
  .upload-panel .upload-area {
    padding: 36px 16px !important;
  }
  .mode-tab {
    padding: 9px 10px;
    font-size: 0.88rem;
  }
}

/* ============================================================
 * Fix: ocr-page-header ocr-page-header--centered
 * /about and /privacy pages use a full-width background
 * card (via .container) but the header inside should be
 * borderless / shadowless / backgroundless so it reads as
 * plain text over the page background.
 * ============================================================ */
.ocr-page-header {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}
.ocr-page-header--centered {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  text-align: center;
}