/* ── Theme tokens ──────────────────────────────────────────── */
:root {
  --bg-page:        #f8fafc;
  --bg-card:        #ffffff;
  --bg-subtle:      #f1f5f9;
  --bg-input:       #ffffff;
  --bg-tertiary:    #e2e8f0;
  --text-primary:   #0f172a;
  --text-secondary: #64748b;
  --border-color:   #d0d7de;
  --border-subtle:  #eef2f7;
  --accent-color:   #2563eb;
  --danger-color:   #dc2626;
  --success-color:  #16a34a;
  --warning-color:  #f59e0b;
  --shadow-sm:      0 1px 2px rgba(0,0,0,.06);
  --shadow-md:      0 6px 18px rgba(15,23,42,.08);

  --btn-secondary-bg:     #eef2ff;
  --btn-secondary-color:  #1e293b;
  --btn-secondary-border: #cbd5e1;
  --btn-danger-bg:        #fee2e2;
  --btn-danger-color:     #991b1b;
  --btn-danger-border:    #fecaca;
  --btn-success-bg:       #dcfce7;
  --btn-success-color:    #166534;
  --btn-success-border:   #bbf7d0;

  --loading-bg:     #e2e8f0;
  --loading-border: #cbd5e1;

  --pdf-nav-bg:    #1e293b;
  --pdf-nav-color: #f1f5f9;

  --crop-scroll-bg:  #e2e8f0;
  --crop-zoom-bg:    #1e293b;
  --crop-zoom-color: #cbd5e1;

  --diff-bg:         #ffffff;
  --diff-header-bg:  #f6f8fa;
  --diff-border:     #d0d7de;
  --diff-text:       #1e293b;

  --source-banner-bg:     #eff6ff;
  --source-banner-border: #bfdbfe;
  --source-banner-color:  #1e3a8a;
}

[data-theme="dark"] {
  --bg-page:        #0f172a;
  --bg-card:        #1e293b;
  --bg-subtle:      #162032;
  --bg-input:       #0f172a;
  --bg-tertiary:    #0b1120;
  --text-primary:   #e2e8f0;
  --text-secondary: #94a3b8;
  --border-color:   #334155;
  --border-subtle:  #1e293b;
  --accent-color:   #3b82f6;
  --danger-color:   #f87171;
  --success-color:  #4ade80;
  --warning-color:  #fbbf24;
  --shadow-sm:      0 1px 3px rgba(0,0,0,.4);
  --shadow-md:      0 6px 18px rgba(0,0,0,.5);

  --btn-secondary-bg:     #1e293b;
  --btn-secondary-color:  #e2e8f0;
  --btn-secondary-border: #334155;
  --btn-danger-bg:        #450a0a;
  --btn-danger-color:     #fca5a5;
  --btn-danger-border:    #7f1d1d;
  --btn-success-bg:       #052e16;
  --btn-success-color:    #86efac;
  --btn-success-border:   #14532d;

  --loading-bg:     #1e293b;
  --loading-border: #334155;

  --pdf-nav-bg:    #0b1120;
  --pdf-nav-color: #e2e8f0;

  --crop-scroll-bg:  #0b1120;
  --crop-zoom-bg:    #0b1120;
  --crop-zoom-color: #94a3b8;

  --diff-bg:         #1e293b;
  --diff-header-bg:  #162032;
  --diff-border:     #334155;
  --diff-text:       #e2e8f0;

  --source-banner-bg:     #172554;
  --source-banner-border: #1e40af;
  --source-banner-color:  #bfdbfe;
}

/* ── Reset ─────────────────────────────────────────────────── */
* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg-page);
  color: var(--text-primary);
  transition: background .2s, color .2s;
}
body { min-height: 100vh; }
a    { color: inherit; }
button, input, select, textarea { font: inherit; }

/* ── Buttons ─────────────────────────────────────────────────── */
button {
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 0.65rem 1rem;
  cursor: pointer;
  transition: background .18s, border-color .18s, color .18s, transform .18s;
  background: var(--bg-card);
  color: var(--text-primary);
}
button:hover    { transform: translateY(-1px); }
button:disabled { opacity: .5; cursor: not-allowed; transform: none; }

button.secondary {
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-color);
  border-color: var(--btn-secondary-border);
}
button.danger {
  background: var(--btn-danger-bg);
  color: var(--btn-danger-color);
  border-color: var(--btn-danger-border);
}
button.success {
  background: var(--btn-success-bg);
  color: var(--btn-success-color);
  border-color: var(--btn-success-border);
}
#compareBtn {
  background: var(--accent-color);
  color: #fff;
  border-color: var(--accent-color);
}

/* ── Theme toggle ─────────────────────────────────────────────── */
#themeToggleBtn {
  background: none;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: .45rem .75rem;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  color: var(--text-primary);
  transition: background .18s, border-color .18s;
}
#themeToggleBtn:hover { background: var(--bg-subtle); transform: none; }

/* ── Skip link ──────────────────────────────────────────────── */
.skip-link { position: absolute; left: -9999px; top: auto; }
.skip-link:focus {
  left: 1rem; top: 1rem; z-index: 10000;
  background: var(--bg-card);
  color: var(--text-primary);
  padding: .75rem 1rem; border-radius: 8px;
  box-shadow: var(--shadow-md);
}

/* ── Header ──────────────────────────────────────────────────── */
header {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-color);
  position: sticky; top: 0; z-index: 100;
  transition: background .2s, border-color .2s;
}
.header-content {
  max-width: 1440px; margin: 0 auto;
  padding: 1rem 1.25rem;
  display: flex; align-items: center;
  justify-content: space-between; gap: 1rem;
}
.header-content h1 { margin: 0; font-size: 1.4rem; }
.header-right { display: flex; align-items: center; gap: .6rem; }

/* ── Main layout ─────────────────────────────────────────────── */
main { max-width: 1440px; margin: 0 auto; padding: 1rem 1.25rem 2rem; }

.controls {
  display: flex; align-items: center;
  gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem;
}

/* ── Loading ─────────────────────────────────────────────────── */
.loading {
  margin-left: auto; display: none;
  align-items: center; gap: .5rem;
  padding: .5rem .75rem; border-radius: 8px;
  background: var(--loading-bg);
  border: 1px solid var(--loading-border);
  color: var(--text-secondary);
  transition: background .2s;
}

/* ── Stats ───────────────────────────────────────────────────── */
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .75rem; margin-bottom: 1rem;
}
.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px; padding: 1rem;
  text-align: center; box-shadow: var(--shadow-sm);
  transition: background .2s, border-color .2s;
}
.stat-value { font-weight: 800; font-size: 1.35rem; }
.stat-label { margin-top: .3rem; color: var(--text-secondary); font-size: .9rem; }

/* ── Viewer ──────────────────────────────────────────────────── */
.viewer-container {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1rem; align-items: start;
}
.viewer-pane {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 14px; overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: background .2s, border-color .2s;
}
.viewer-header {
  display: flex; align-items: center;
  justify-content: space-between; gap: 1rem;
  padding: 1rem 1rem .75rem;
  border-bottom: 1px solid var(--border-subtle);
  transition: border-color .2s;
}
.viewer-header h3 { margin: 0; font-size: 1.05rem; }
.viewer-pane-controls {
  display: flex; flex-wrap: wrap; gap: .75rem 1rem;
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-subtle);
  transition: background .2s, border-color .2s;
}
.control-group { display: flex; flex-direction: column; gap: .4rem; min-width: 180px; }
.control-group label { font-size: .9rem; font-weight: 600; }

select,
input[type="file"],
input[type="search"],
input[type="text"],
textarea {
  width: 100%;
  border: 1px solid var(--border-color);
  border-radius: 8px; padding: .7rem .8rem;
  background: var(--bg-input);
  color: var(--text-primary);
  transition: background .2s, border-color .2s, color .2s;
}
.file-input-wrap { position: relative; }
.file-input-wrap.drag-over input[type="file"] {
  outline: 2px dashed var(--accent-color);
  border-radius: 4px;
}

.viewer-content {
  min-height: 360px; max-height: 760px;
  overflow: auto; padding: 1rem;
  background: var(--bg-subtle);
  transition: background .2s;
}

/* ── Doc live layer ──────────────────────────────────────────── */
.doc-live-layer {
  background: var(--bg-card);
  padding: 2rem; border-radius: 4px;
  color: var(--text-primary);
  white-space: pre-wrap; word-wrap: break-word;
  line-height: 1.6;
  user-select: text; -webkit-user-select: text;
  min-height: 100%;
  transition: background .2s, color .2s;
}
.doc-live-layer mark,
.live-text-highlight {
  background: rgba(253,224,71,.55);
  color: inherit; border-radius: 2px; padding: 0;
}
[data-theme="dark"] .doc-live-layer mark,
[data-theme="dark"] .live-text-highlight {
  background: rgba(234,179,8,.45);
}

/* ── PDF ─────────────────────────────────────────────────────── */
.pdf-canvas-wrap {
  position: relative; display: inline-block;
  max-width: 100%; line-height: 1;
}
.pdf-canvas-wrap canvas {
  display: block; position: relative;
  z-index: 1; max-width: 100%; height: auto;
}
.pdf-text-layer {
  position: absolute; inset: 0; overflow: hidden;
  line-height: 1; pointer-events: auto;
  user-select: text; -webkit-user-select: text; z-index: 2;
}
.pdf-text-layer span,
.pdf-text-layer div {
  color: transparent; position: absolute; white-space: pre;
  cursor: text; transform-origin: 0% 0%;
  user-select: text; -webkit-user-select: text;
}
.pdf-text-layer span::selection,
.pdf-text-layer div::selection {
  background: rgba(59,130,246,.35); color: transparent;
}
.pdf-text-layer mark.live-text-highlight {
  background: rgba(253,224,71,.48);
  color: transparent; border-radius: 2px; padding: 0;
}
[data-theme="dark"] .pdf-text-layer mark.live-text-highlight {
  background: rgba(234,179,8,.45);
}
.pdf-nav {
  display: flex; align-items: center; justify-content: center;
  gap: .75rem; padding: .5rem .75rem;
  background: var(--pdf-nav-bg);
  border-bottom: 1px solid var(--border-color);
  font-size: .875rem; font-weight: 600;
  color: var(--pdf-nav-color);
  transition: background .2s;
}
.pdf-nav button { padding: .3rem .75rem; }

/* ── OCR ─────────────────────────────────────────────────────── */
.ocr-overlay-wrap { position: relative; display: inline-block; max-width: 100%; }
.ocr-overlay-wrap img,
.ocr-overlay-wrap canvas { display: block; max-width: 100%; height: auto; }
.ocr-text-overlay { position: absolute; inset: 0; pointer-events: none; }
.ocr-word-box {
  position: absolute;
  background: rgba(253,224,71,.18);
  border: 1px solid rgba(234,179,8,.5);
  box-sizing: border-box; border-radius: 2px;
}
[data-theme="dark"] .ocr-word-box {
  background: rgba(234,179,8,.2);
  border-color: rgba(234,179,8,.6);
}

/* ── Crop ────────────────────────────────────────────────────── */
.crop-card {
  margin-top: 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 14px; padding: 1rem;
  box-shadow: var(--shadow-md);
  transition: background .2s, border-color .2s;
}
.crop-card h3 { margin-top: 0; }
.crop-page-nav, .crop-actions {
  display: flex; gap: .75rem;
  align-items: center; flex-wrap: wrap; margin-bottom: .75rem;
}
.crop-page-info { font-weight: 700; }
.crop-zoom-bar {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding: .5rem .75rem;
  background: var(--crop-zoom-bg);
  border: 1px solid var(--border-color);
  border-radius: 6px; font-size: .8rem;
  color: var(--crop-zoom-color);
  margin-bottom: .5rem;
  transition: background .2s;
}
#cropZoomLabel { font-weight: 700; min-width: 3rem; text-align: center; color: #fff; }
.crop-scroll {
  width: 100%; height: 500px; overflow: auto;
  background: var(--crop-scroll-bg);
  border: 1px solid var(--border-color);
  border-radius: 6px; cursor: crosshair;
  transition: background .2s;
}
#cropCanvas { display: block; }
.crop-info { margin: .75rem 0; color: var(--text-secondary); }
.crop-preview { margin: 1rem 0; }
#cropPreviewImg {
  max-width: 100%;
  border: 1px solid var(--border-color); border-radius: 4px;
}

/* ── Results ─────────────────────────────────────────────────── */
.results-section {
  margin-top: 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 14px; padding: 1rem;
  box-shadow: var(--shadow-md);
  transition: background .2s, border-color .2s;
}
.comparison-source-banner {
  background: var(--source-banner-bg);
  border: 1px solid var(--source-banner-border);
  color: var(--source-banner-color);
  padding: 1rem; border-radius: 10px; margin-bottom: 1rem;
  transition: background .2s, color .2s;
}
.results-toolbar {
  display: flex; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem;
}
.results-toolbar-left,
.results-toolbar-right { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.toolbar-label { font-weight: 600; }
.toolbar-text  { color: var(--text-secondary); font-size: .9rem; }

/* ── Diff viewer ─────────────────────────────────────────────── */
.diff-viewer {
  display: flex; flex-direction: column;
  border: 1px solid var(--diff-border);
  border-radius: 8px; overflow: hidden;
  background: var(--diff-bg);
  transition: background .2s, border-color .2s;
}
.diff-header {
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--diff-header-bg);
  border-bottom: 1px solid var(--diff-border);
  flex-shrink: 0; transition: background .2s;
}
.diff-header-side {
  padding: .75rem 1rem;
  display: flex; align-items: center;
  justify-content: space-between; gap: 1rem;
  font-size: .875rem; font-weight: 600;
  color: var(--text-primary);
  border-right: 1px solid var(--diff-border);
}
.diff-header-side:last-child { border-right: none; }
.diff-body { display: grid; grid-template-columns: 1fr 1fr; min-width: 0; }
.diff-column {
  padding: 1.5rem 2rem;
  overflow-x: hidden; overflow-y: auto; max-height: 600px;
  font-size: .875rem; line-height: 1.8;
  white-space: normal; word-break: break-word; overflow-wrap: break-word;
  background: var(--diff-bg); color: var(--diff-text); min-width: 0;
  transition: background .2s, color .2s;
}
.diff-column:first-child { border-right: 1px solid var(--diff-border); }

.diff-delete {
  background: #fee2e2; color: #991b1b;
  text-decoration: line-through;
  padding: 2px 4px; border-radius: 3px; font-weight: 500;
}
.diff-add {
  background: #dcfce7; color: #166534;
  padding: 2px 4px; border-radius: 3px; font-weight: 500;
}
[data-theme="dark"] .diff-delete { background: #450a0a; color: #fca5a5; }
[data-theme="dark"] .diff-add    { background: #052e16; color: #86efac; }

.diff-unchanged { background: transparent; color: var(--diff-text); }

.search-highlight         { background: #fef08a; border-radius: 2px; padding: 1px 2px; }
.search-highlight-current { background: #fbbf24; border-radius: 2px; padding: 1px 2px; }
[data-theme="dark"] .search-highlight         { background: #713f12; color: #fef3c7; }
[data-theme="dark"] .search-highlight-current { background: #92400e; color: #fef9c3; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 900px) {
  .viewer-container, .diff-header, .diff-body, .stats { grid-template-columns: 1fr; }
  .diff-header-side:first-child,
  .diff-column:first-child { border-right: none; border-bottom: 1px solid var(--diff-border); }
  .diff-column { padding: 1rem; max-height: none; }
  .loading { margin-left: 0; }
}