[v-cloak] { display: none; }

body {
    font-family: 'Inter', sans-serif;
}

.animate-pulse-slow {
    animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .7; }
}

.ocr-header-action {
    align-items: center;
    color: #475569;
    display: inline-flex;
    font-size: .875rem;
    font-weight: 600;
    gap: .5rem;
}

.ocr-header-action:hover { color: #4338ca; }

.ocr-pending-badge {
    background: #e11d48;
    border-radius: 999px;
    color: white;
    font-size: .6875rem;
    line-height: 1;
    min-width: 1.25rem;
    padding: .3rem .4rem;
    text-align: center;
}

.ocr-corrections {
    --ocr-border: #dbe3ee;
    --ocr-muted: #64748b;
    color: #172033;
    margin: 0 auto;
    max-width: 76rem;
}

.ocr-corrections__header,
.ocr-toolbar,
.ocr-review-card__meta,
.ocr-actions,
.ocr-panel__heading,
.ocr-lexicon-form,
.ocr-lexicon-list li {
    align-items: center;
    display: flex;
}

.ocr-corrections__header {
    justify-content: space-between;
    margin-bottom: 1rem;
}

.ocr-corrections__header h2 {
    font-size: clamp(1.6rem, 3vw, 2.25rem);
    font-weight: 700;
    line-height: 1.15;
}

.ocr-corrections__eyebrow {
    color: #4f46e5;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.ocr-corrections__pending { color: var(--ocr-muted); margin-top: .25rem; }

.ocr-toolbar {
    background: #fff;
    border: 1px solid var(--ocr-border);
    border-radius: 1rem;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 1rem;
}

.ocr-toolbar label,
.ocr-editor label,
.ocr-lexicon-form label {
    color: #334155;
    display: grid;
    font-size: .75rem;
    font-weight: 650;
    gap: .35rem;
}

.ocr-toolbar label { flex: 1 1 15rem; }

.ocr-corrections input,
.ocr-corrections select,
.ocr-corrections textarea {
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: .55rem;
    color: #172033;
    font: inherit;
    font-size: .875rem;
    min-height: 2.5rem;
    padding: .55rem .7rem;
}

.ocr-corrections textarea { line-height: 1.5; resize: vertical; }

.ocr-corrections button:focus-visible,
.ocr-corrections input:focus-visible,
.ocr-corrections select:focus-visible,
.ocr-corrections textarea:focus-visible,
.ocr-header-action:focus-visible {
    outline: 3px solid #a5b4fc;
    outline-offset: 2px;
}

.ocr-button {
    align-items: center;
    border: 1px solid transparent;
    border-radius: .6rem;
    display: inline-flex;
    font-size: .875rem;
    font-weight: 650;
    gap: .45rem;
    justify-content: center;
    min-height: 2.5rem;
    padding: .55rem .9rem;
}

.ocr-button:disabled { cursor: wait; opacity: .55; }
.ocr-button--primary { background: #4f46e5; color: white; }
.ocr-button--primary:hover:not(:disabled) { background: #4338ca; }
.ocr-button--accept { background: #047857; color: white; }
.ocr-button--accept:hover:not(:disabled) { background: #065f46; }
.ocr-button--quiet { background: white; border-color: #cbd5e1; color: #334155; }
.ocr-button--quiet:hover:not(:disabled) { background: #f8fafc; }

.ocr-alert {
    align-items: center;
    border-radius: .75rem;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin: 1rem 0;
    padding: .8rem 1rem;
}

.ocr-alert--error { background: #fff1f2; color: #9f1239; }
.ocr-alert--warning { background: #fffbeb; color: #92400e; }
.ocr-alert--success { background: #ecfdf5; color: #065f46; }

.ocr-state {
    align-items: center;
    background: #fff;
    border: 1px solid var(--ocr-border);
    border-radius: 1rem;
    display: flex;
    gap: .75rem;
    justify-content: center;
    min-height: 15rem;
    padding: 2rem;
    text-align: center;
}

.ocr-state--empty { display: grid; }
.ocr-state--empty h3 { font-size: 1.1rem; font-weight: 700; }
.ocr-state--empty p { color: var(--ocr-muted); }

.ocr-spinner {
    animation: ocr-spin .8s linear infinite;
    border: 3px solid #c7d2fe;
    border-radius: 50%;
    border-top-color: #4f46e5;
    height: 1.5rem;
    width: 1.5rem;
}

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

.ocr-review-card,
.ocr-panel {
    background: #fff;
    border: 1px solid var(--ocr-border);
    border-radius: 1rem;
    box-shadow: 0 12px 35px rgb(15 23 42 / 6%);
}

.ocr-review-card { overflow: hidden; }

.ocr-review-card__meta {
    background: #f8fafc;
    border-bottom: 1px solid var(--ocr-border);
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    padding: 1rem 1.25rem;
}

.ocr-review-card__meta > div:first-child { display: grid; gap: .15rem; }
.ocr-review-card__meta span { color: var(--ocr-muted); font-size: .8rem; }

.ocr-reasons { display: flex; flex-wrap: wrap; gap: .35rem; }
.ocr-reasons span {
    background: #eef2ff;
    border-radius: 999px;
    color: #4338ca;
    font-weight: 600;
    padding: .3rem .55rem;
}

.ocr-review-guidance {
    border-bottom: 1px solid var(--ocr-border);
    color: #475569;
    font-size: .875rem;
    line-height: 1.5;
    margin: 0;
    padding: .8rem 1.25rem;
}

.ocr-image-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr) minmax(19rem, .8fr);
    padding: 1rem;
}

.ocr-image-grid figure,
.ocr-page-issue-image {
    background: #e2e8f0;
    border: 1px solid #cbd5e1;
    border-radius: .75rem;
    margin: 0;
    overflow: auto;
}

.ocr-image-grid figcaption,
.ocr-page-issue-image figcaption {
    background: #f8fafc;
    color: #475569;
    font-size: .75rem;
    font-weight: 650;
    padding: .55rem .75rem;
}

.ocr-image-grid img,
.ocr-page-issue-image img { display: block; height: auto; margin: 0 auto; max-width: 100%; }
.ocr-image-grid figure:first-child img { max-height: 42rem; object-fit: contain; }
.ocr-line-crop img { image-rendering: auto; min-width: min(100%, 32rem); width: 100%; }
.ocr-page-issue-image { margin: 1rem; text-align: center; }
.ocr-page-issue-image img { max-height: 56rem; }

.ocr-editor {
    align-items: end;
    border-top: 1px solid var(--ocr-border);
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(16rem, 2fr) minmax(10rem, 1fr) 6rem auto auto;
    padding: 1.25rem;
}

.ocr-editor__text small { color: var(--ocr-muted); font-weight: 400; }
.ocr-check { align-items: center; display: flex !important; min-height: 2.5rem; }
.ocr-check input { min-height: auto; }

.ocr-provenance {
    color: var(--ocr-muted);
    font-size: .78rem;
    padding: 0 1.25rem 1rem;
}

.ocr-actions { border-top: 1px solid var(--ocr-border); flex-wrap: wrap; gap: .65rem; padding: 1rem 1.25rem; }
.ocr-actions kbd { background: rgb(255 255 255 / 20%); border: 1px solid currentColor; border-radius: .25rem; font-size: .65rem; padding: .05rem .3rem; }
.ocr-button--quiet kbd { background: #f1f5f9; }

.ocr-page-issue-details,
.ocr-quality dl {
    display: grid;
    gap: .6rem 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0 1.25rem 1rem;
}

.ocr-page-issue-details div,
.ocr-quality dl div { display: grid; gap: .1rem; }
.ocr-page-issue-details dt,
.ocr-quality dt { color: var(--ocr-muted); font-size: .7rem; font-weight: 650; text-transform: uppercase; }
.ocr-page-issue-details dd,
.ocr-quality dd { font-size: .875rem; }

.ocr-support-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 1rem; }
.ocr-panel { padding: 1.25rem; }
.ocr-panel h3 { font-size: 1.05rem; font-weight: 700; }
.ocr-panel__heading { justify-content: space-between; }
.ocr-quality { border-top: 1px solid var(--ocr-border); margin-top: 1rem; padding-top: 1rem; }
.ocr-quality h4 { font-size: .85rem; font-weight: 700; margin-bottom: .6rem; }
.ocr-quality dl { padding: 0; }

.ocr-lexicon-form { align-items: end; gap: .75rem; margin: 1rem 0; }
.ocr-lexicon-form label { flex: 1; }
.ocr-lexicon-list { border-top: 1px solid var(--ocr-border); margin-top: 1rem; }
.ocr-lexicon-list li { border-bottom: 1px solid var(--ocr-border); gap: 1rem; justify-content: space-between; padding: .7rem 0; }
.ocr-lexicon-list li > div { display: grid; }
.ocr-lexicon-list small { color: var(--ocr-muted); }
.ocr-lexicon-list .is-disabled { color: var(--ocr-muted); }
.ocr-inline-error { color: #be123c; margin-top: .75rem; }
.ocr-muted { color: var(--ocr-muted); margin-top: .75rem; }

@media (max-width: 900px) {
    .ocr-image-grid,
    .ocr-support-grid { grid-template-columns: 1fr; }
    .ocr-editor { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ocr-editor__text { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
    .ocr-corrections__header { align-items: flex-start; }
    .ocr-toolbar { align-items: stretch; display: grid; }
    .ocr-editor,
    .ocr-page-issue-details,
    .ocr-quality dl { grid-template-columns: 1fr; }
    .ocr-actions .ocr-button { flex: 1 1 45%; }
    .ocr-image-grid { padding: .65rem; }
    .ocr-line-crop img { min-width: 26rem; }
}