.ocr-page {
  background:
    radial-gradient(circle at 84% 4%, rgba(154, 190, 211, .3), transparent 28rem),
    radial-gradient(circle at 7% 45%, rgba(218, 180, 215, .18), transparent 24rem),
    #f4f1ea;
}
.back-home { justify-self: end; color: var(--ink); text-decoration: none; font-size: 13px; font-weight: 750; }
.back-home span { color: var(--coral); margin-left: 4px; }
.ocr-main { width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: 70px 0 110px; }
.ocr-hero { display: grid; grid-template-columns: minmax(0, 1fr) 330px; align-items: center; gap: 60px; margin-bottom: 46px; }
.ocr-hero h1 { margin: 24px 0 17px; font-size: clamp(48px, 6vw, 76px); line-height: 1.02; letter-spacing: -.065em; }
.ocr-hero h1 em { color: #477d9b; font-family: Georgia, "Songti SC", serif; font-weight: 500; }
.ocr-hero > div > p { max-width: 700px; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.75; }
.ocr-visual { min-height: 210px; position: relative; }
.scan-paper, .text-paper { position: absolute; width: 166px; height: 192px; border: 1px solid rgba(75,91,102,.17); border-radius: 17px; padding: 18px; background: rgba(255,254,250,.88); box-shadow: 0 20px 50px rgba(48,57,63,.11); }
.scan-paper { left: 2px; top: 10px; display: grid; align-content: center; gap: 10px; transform: rotate(-5deg); }
.scan-paper i { display: block; height: 7px; border-radius: 99px; background: #d9dfe1; }
.scan-paper i:nth-child(2) { width: 78%; }.scan-paper i:nth-child(3) { width: 91%; }.scan-paper i:nth-child(4) { width: 62%; }
.scan-paper span { position: absolute; left: 16px; bottom: 14px; color: #59839a; font-size: 7px; font-weight: 850; letter-spacing: .1em; }
.scan-paper::after { content: ""; position: absolute; left: 12px; right: 12px; top: 48%; height: 2px; background: #74a9c3; box-shadow: 0 0 18px #74a9c3; }
.text-paper { right: 0; top: 1px; transform: rotate(4deg); }
.text-paper b { font-size: 13px; }.text-paper p { margin: 18px 0; color: #67645f; font: 10px/1.75 ui-monospace, SFMono-Regular, Menlo, monospace; }
.text-paper em { position: absolute; right: 14px; bottom: 14px; border-radius: 7px; padding: 6px 7px; color: #fff; background: #557f98; font-size: 7px; font-style: normal; font-weight: 850; }
.visual-arrow { position: absolute; left: 50%; top: 48%; z-index: 2; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #252321; box-shadow: 0 8px 20px rgba(0,0,0,.16); font-size: 15px; transform: translate(-50%, -50%); }

.ocr-workbench { padding: 27px; border: 1px solid rgba(105,98,88,.2); border-radius: 28px; background: rgba(255,254,250,.84); box-shadow: 0 28px 75px rgba(54,47,37,.1), inset 0 1px #fff; backdrop-filter: blur(14px); }
.workbench-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 3px 4px 22px; }
.workbench-heading > div:first-child { display: grid; gap: 5px; }.workbench-heading > div:first-child > span { color: #477d9b; font-size: 9px; font-weight: 850; letter-spacing: .16em; }
.workbench-heading h2 { margin: 0; font-size: 26px; letter-spacing: -.04em; }
.local-note { display: inline-flex; align-items: center; gap: 7px; color: #8c867e; font-size: 10px; }.local-note i { width: 6px; height: 6px; border-radius: 50%; background: #4da57e; }
.ocr-toolbar { display: grid; grid-template-columns: 170px 150px 1fr auto; align-items: end; gap: 10px; padding: 13px; border-radius: 15px; background: #eeebe5; }
.ocr-toolbar > label:not(.embedded-toggle) { display: grid; gap: 6px; color: #777169; font-size: 8px; font-weight: 800; }
.ocr-toolbar select { width: 100%; height: 37px; border: 1px solid #d8d2c8; border-radius: 9px; outline: 0; padding: 0 9px; color: #57524b; background: #fffefa; font-size: 9px; }
.embedded-toggle { min-height: 37px; display: flex; align-items: center; gap: 8px; border-radius: 9px; padding: 6px 10px; background: rgba(255,255,255,.57); cursor: pointer; }.embedded-toggle input { accent-color: #477d9b; }.embedded-toggle span { display: grid; gap: 2px; }.embedded-toggle b { color: #5d5851; font-size: 8px; }.embedded-toggle small { color: #989188; font-size: 7px; }
.toolbar-actions { display: flex; gap: 6px; }.toolbar-actions button { height: 37px; border: 0; border-radius: 9px; padding: 0 16px; font-size: 9px; font-weight: 850; cursor: pointer; }.toolbar-actions .primary-action { color: #fff; background: #292725; }.toolbar-actions .secondary-action { color: #79483d; background: #f1dcd5; }.toolbar-actions button:disabled { opacity: .42; cursor: default; }

.ocr-drop-zone { min-height: 190px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1.5px dashed #bdc3c2; border-radius: 20px; margin-top: 12px; padding: 24px; background: rgba(248,250,249,.7); text-align: center; cursor: pointer; transition: border-color .18s, background .18s, transform .18s; }
.ocr-drop-zone:hover, .ocr-drop-zone.dragging { border-color: #6091aa; background: #f1f7f9; transform: translateY(-1px); }.ocr-drop-zone input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ocr-drop-zone.has-files { min-height: 88px; flex-direction: row; justify-content: flex-start; gap: 13px; padding: 15px 18px; text-align: left; }
.ocr-drop-zone.has-files .drop-icons { margin: 0; }.ocr-drop-zone.has-files p, .ocr-drop-zone.has-files > small { display: none; }.ocr-drop-zone.has-files .select-files { margin-left: auto; }
.drop-icons { display: flex; align-items: center; margin-bottom: 12px; }.drop-icons i { width: 40px; height: 40px; display: grid; place-items: center; border: 3px solid #f8f7f3; border-radius: 12px; color: #31576d; background: #b7d2df; font-size: 10px; font-style: normal; font-weight: 850; transform: rotate(-5deg); }.drop-icons i + i { margin-left: -7px; color: #fff; background: #748daa; font-size: 8px; transform: rotate(5deg); }
.ocr-drop-zone strong { font-size: 15px; }.ocr-drop-zone p { margin: 7px 0 13px; color: #8a847b; font-size: 10px; }.select-files { border-radius: 9px; padding: 9px 13px; color: #fff; background: #477d9b; font-size: 9px; font-weight: 850; }.ocr-drop-zone small { margin-top: 10px; color: #aaa39a; font-size: 8px; }
.import-message { min-height: 17px; margin: 7px 4px 0; color: #bb503c; font-size: 9px; }
.import-message.success { color: #3f7e61; }

.ocr-layout { display: grid; grid-template-columns: 1.2fr .8fr; align-items: start; gap: 12px; margin-top: 3px; }
.page-list-panel, .ocr-result-panel { min-width: 0; border: 1px solid #e1dcd3; border-radius: 19px; padding: 21px; background: #fffefa; }
.list-heading, .result-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }.list-heading > div:first-child, .result-heading > div:first-child { display: grid; gap: 4px; }.list-heading > div:first-child > span, .result-heading > div:first-child > span { color: #477d9b; font-size: 8px; font-weight: 850; letter-spacing: .14em; }.list-heading h3, .result-heading h3 { margin: 0; font-size: 17px; }
.list-heading > div:last-child { display: flex; align-items: center; gap: 8px; }.list-heading em, .result-heading em { color: #8e8880; font-size: 8px; font-style: normal; }.list-heading button { border: 0; border-radius: 7px; padding: 6px 8px; color: #756f67; background: #efebe5; font-size: 7px; font-weight: 800; cursor: pointer; }.list-heading button:disabled { opacity: .4; }
.empty-pages { min-height: 322px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #aaa49c; text-align: center; }.empty-pages > span { width: 42px; height: 42px; display: grid; place-items: center; border: 1px dashed #bbb5ac; border-radius: 50%; margin-bottom: 12px; color: #6091aa; font-size: 20px; }.empty-pages strong { color: #777169; font-size: 11px; }.empty-pages p { margin: 6px 0 0; font-size: 8px; }
.empty-pages[hidden], .ocr-page-grid[hidden] { display: none; }
.ocr-page-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 17px; }.ocr-page-card { min-width: 0; position: relative; border: 1px solid #e2ddd5; border-radius: 13px; padding: 7px; background: #f8f6f1; }.ocr-page-card img { width: 100%; aspect-ratio: 4 / 3; display: block; object-fit: contain; border-radius: 8px; background: #e8e5df; }.ocr-page-card h4 { overflow: hidden; margin: 9px 2px 4px; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }.ocr-page-card p { overflow: hidden; margin: 0 2px; color: #969087; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }.ocr-page-card .page-status { display: inline-flex; align-items: center; gap: 4px; margin: 8px 2px 1px; border-radius: 99px; padding: 4px 6px; color: #746f68; background: #ebe7e0; font-size: 6px; font-weight: 850; }.ocr-page-card .page-status::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: #999188; }.ocr-page-card.done .page-status, .ocr-page-card.embedded .page-status { color: #3b775c; background: #e4f0e9; }.ocr-page-card.done .page-status::before, .ocr-page-card.embedded .page-status::before { background: #4a9a73; }.ocr-page-card.processing { border-color: #7faac0; box-shadow: 0 0 0 3px rgba(88,139,164,.1); }.ocr-page-card.processing .page-status { color: #3c718b; background: #e5f0f5; }.ocr-page-card.processing .page-status::before { background: #518da9; animation: pagePulse 1s infinite; }.ocr-page-card.error .page-status { color: #a04939; background: #f5e6e2; }.ocr-page-card.error .page-status::before { background: #ca6653; }.remove-ocr-page { position: absolute; right: 10px; top: 10px; width: 22px; height: 22px; display: grid; place-items: center; border: 0; border-radius: 50%; color: #fff; background: rgba(32,31,29,.78); font-size: 13px; cursor: pointer; }
@keyframes pagePulse { 50% { opacity: .25; } }

.ocr-result-panel { position: sticky; top: 14px; }.result-heading em { border-radius: 99px; padding: 5px 7px; color: #4e7387; background: #e8f1f5; font-weight: 800; }.ocr-progress { margin-top: 16px; border-radius: 11px; padding: 11px; background: #edf4f7; }.ocr-progress > div:first-child { display: flex; justify-content: space-between; gap: 10px; color: #4d6470; font-size: 8px; font-weight: 800; }.ocr-progress strong { color: #477d9b; }.ocr-progress-track { height: 5px; overflow: hidden; border-radius: 99px; margin-top: 8px; background: #d6e0e4; }.ocr-progress-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #477d9b, #83b7cf); transition: width .2s; }.ocr-progress p { margin: 6px 0 0; color: #82929a; font-size: 7px; }
#ocrResult { width: 100%; min-height: 344px; resize: vertical; border: 1px solid #ddd7ce; border-radius: 12px; outline: 0; margin-top: 16px; padding: 14px; color: #3e4548; background: #f5f8f9; font: 10px/1.7 ui-monospace, SFMono-Regular, Menlo, monospace; }.ocr-result-panel textarea:focus { border-color: #6091aa; box-shadow: 0 0 0 4px rgba(96,145,170,.09); }
.result-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-top: 7px; }.result-stats span { display: grid; gap: 3px; border-radius: 8px; padding: 8px; color: #9a948c; background: #f1eee8; font-size: 6px; }.result-stats b { color: #55514b; font-size: 9px; }.result-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }.result-actions button { min-height: 39px; border: 1px solid #d8d2c8; border-radius: 9px; color: #625c55; background: #f6f3ed; font-size: 9px; font-weight: 800; cursor: pointer; }.result-actions .primary-action { border-color: #292725; color: #fff; background: #292725; }.result-actions button:disabled { opacity: .4; cursor: default; }.ocr-result-panel > p { margin: 12px 2px 0; color: #a09991; font-size: 8px; line-height: 1.6; }
.ocr-benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; }.ocr-benefits article { min-height: 154px; padding: 21px; border: 1px solid rgba(111,103,92,.17); border-radius: 17px; background: rgba(255,254,250,.48); }.ocr-benefits span { color: #477d9b; font: italic 11px Georgia, serif; }.ocr-benefits strong { display: block; margin: 23px 0 7px; font-size: 14px; }.ocr-benefits p { margin: 0; color: #7f7970; font-size: 11px; line-height: 1.65; }
.toast { position: fixed; left: 50%; bottom: 28px; z-index: 30; padding: 11px 15px; border-radius: 10px; color: #fff; background: #242220; box-shadow: 0 12px 36px rgba(0,0,0,.2); font-size: 11px; font-weight: 750; opacity: 0; pointer-events: none; transform: translate(-50%, 14px); transition: opacity .2s, transform .2s; }.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 1020px) { .ocr-layout { grid-template-columns: 1fr; }.ocr-result-panel { position: static; }.ocr-toolbar { grid-template-columns: 1fr 1fr; }.embedded-toggle { order: 3; }.toolbar-actions { order: 4; justify-content: flex-end; } }
@media (max-width: 780px) { .ocr-hero { grid-template-columns: 1fr; }.ocr-visual { display: none; }.ocr-page-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .ocr-main { width: calc(100% - 24px); padding: 48px 0 76px; }.ocr-hero { margin-bottom: 30px; }.ocr-hero h1 { font-size: clamp(43px, 13vw, 61px); }.ocr-hero > div > p { font-size: 14px; }.ocr-workbench { padding: 13px; border-radius: 21px; }.workbench-heading { align-items: flex-start; flex-direction: column; padding: 8px 4px 17px; }.ocr-toolbar { grid-template-columns: 1fr; }.embedded-toggle, .toolbar-actions { order: initial; }.toolbar-actions button { flex: 1; }.ocr-drop-zone { min-height: 210px; padding: 20px 14px; }.ocr-drop-zone.has-files { min-height: 104px; flex-wrap: wrap; }.ocr-drop-zone.has-files .select-files { margin-left: 0; }.page-list-panel, .ocr-result-panel { padding: 16px; }.list-heading { align-items: flex-start; flex-direction: column; }.result-stats { grid-template-columns: 1fr 1fr 1fr; }.ocr-benefits { grid-template-columns: 1fr; }.ocr-benefits article { min-height: 130px; } }
@media (max-width: 420px) { .ocr-page-grid { grid-template-columns: 1fr; }.result-actions { grid-template-columns: 1fr; }.back-home { display: none; } }