/* © 2026 ToolsFlash.com — Image to Text (OCR) styles. All rights reserved. */

.ocr-preview-wrap { text-align: center; margin-bottom: 16px; }
.ocr-preview {
  max-width: 100%;
  max-height: 320px;
  border-radius: 10px;
  border: 1px solid var(--border, #e2e8f0);
  display: block;
  margin: 0 auto 10px;
}

.ocr-small-btn {
  border: 1px solid var(--border, #cbd5e1);
  background: var(--bg-card, #fff);
  color: var(--primary, #4f46e5);
  border-radius: 8px;
  padding: 7px 14px;
  font-weight: 600;
  font-size: 0.82rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.ocr-small-btn:hover { border-color: var(--primary, #4f46e5); background: rgba(79, 70, 229, 0.06); }
[data-theme="dark"] .ocr-small-btn { background: var(--bg-card, #1e293b); border-color: var(--border, #334155); color: #a5b4fc; }

.ocr-controls { margin-top: 14px; }
.ocr-btn-group label { visibility: hidden; }

.ocr-progress { margin-top: 16px; }
.ocr-bar-track {
  height: 10px;
  border-radius: 999px;
  background: var(--border, #e2e8f0);
  overflow: hidden;
}
.ocr-bar {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #4f46e5, #7c3aed);
  transition: width 0.25s ease;
}
.ocr-status { font-size: 0.82rem; color: var(--text-muted, #64748b); margin: 8px 0 0; }

.ocr-result { margin-top: 18px; }
.ocr-result-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.ocr-h { font-size: 1rem; font-weight: 700; margin: 0; }
.ocr-conf { font-size: 0.78rem; font-weight: 600; color: var(--text-muted, #64748b); }
.ocr-actions { display: flex; gap: 8px; }

#ocr-text {
  width: 100%;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  padding: 12px 14px;
  font: inherit;
  font-size: 0.92rem;
  line-height: 1.55;
  background: var(--bg-card, #fff);
  color: inherit;
  resize: vertical;
  min-height: 180px;
}
[data-theme="dark"] #ocr-text { background: var(--bg-card, #1e293b); border-color: var(--border, #334155); }

.notice { display: none; margin-top: 12px; }

.ocr-steps { padding-left: 20px; line-height: 1.7; }
.ocr-steps li { margin-bottom: 10px; }

@media (max-width: 560px) {
  .ocr-result-head { flex-direction: column; align-items: flex-start; }
  .ocr-actions { width: 100%; }
  .ocr-actions .ocr-small-btn { flex: 1; }
}