@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');
:root{--bg:#f3f5f9;--surface:#fff;--border:#dfe4ec;--text:#111b2d;--muted:#66758b;--blue:#245de6;--blue-deep:#1949c4;--mint:#24aa8d;--dark:#111b30;--focus:#8ab0ff;--radius:0;font-family:'Poppins',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:var(--text)}
*,*::before,*::after{box-sizing:border-box;border-radius:0!important}
html,body,#app{margin:0;min-height:100%;width:100%}
body{background:var(--bg);font-family:inherit;font-size:13px;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.52}
button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
button:hover:not(:disabled){transition:background-color .18s,color .18s,border-color .18s}
.app-shell{min-height:100vh}
.top-bar{height:74px;background:var(--dark);display:flex;justify-content:space-between;align-items:center;padding:0 clamp(20px,4.5vw,76px);color:white;border-bottom:3px solid var(--blue)}
.brand{display:flex;align-items:center;gap:13px;letter-spacing:.025em;font-size:18px;font-weight:800}
.brand-square{display:inline-flex;justify-content:center;align-items:center;height:35px;width:35px;background:var(--blue);color:white;font-size:18px;font-weight:800}
.brand-accent{color:#8eaefe}
.brand-caption{border-left:1px solid #3a4960;margin-left:7px;padding-left:20px;font-size:10px;font-weight:500;letter-spacing:.15em;color:#91a0b9}
.top-right{display:flex;align-items:center;gap:27px;font-size:10px;font-weight:600;letter-spacing:.12em}
.privacy-indicator{color:#bce9d7;display:flex;align-items:center;gap:9px}
.live-dot,.status-dot{width:7px;height:7px;border-radius:50%!important;background:#38c69b;display:inline-block}
.version-label{color:#9ba8c2}
.workspace{max-width:1580px;margin:auto;padding:46px clamp(20px,4.5vw,76px) 0}
.heading-row{display:flex;justify-content:space-between;align-items:end;gap:25px;margin-bottom:32px}
.eyebrow,.field-caption,.tiny-label{font-size:10px;font-weight:700;color:var(--blue);letter-spacing:.16em}
.eyebrow-divider{color:#b9c6dc;margin:0 9px}
h1,h2,h3,p{margin-top:0}
h1{font-size:clamp(27px,2.45vw,38px);letter-spacing:-.045em;line-height:1.2;margin:9px 0 11px;font-weight:700}
.subtitle{color:var(--muted);font-size:12.5px;line-height:1.8;margin:0;max-width:700px}
.heading-aside{border-left:3px solid var(--mint);padding:6px 0 6px 16px;color:var(--muted);font-size:11px;line-height:1.8;max-width:240px}
.heading-aside-title{display:block;color:var(--text);font-size:10px;font-weight:700;letter-spacing:.07em}
.work-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.14fr);gap:21px;align-items:stretch}
.panel{background:var(--surface);border:1px solid var(--border);min-width:0;display:flex;flex-direction:column;min-height:675px;box-shadow:0 10px 40px rgba(23,40,80,.032)}
.panel-heading{height:77px;display:flex;align-items:center;justify-content:space-between;padding:0 25px;border-bottom:1px solid var(--border)}
.panel-heading>div{display:flex;align-items:center;gap:13px}
.section-index{height:29px;width:29px;background:#eaf0ff;color:var(--blue);display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:11px}
h2{font-size:15px;font-weight:700;margin:0;letter-spacing:-.025em}
.panel-subtitle{font-size:10px;font-weight:600;letter-spacing:.1em;color:#8c98ad;text-align:right}
.source-tabs{display:flex;border-bottom:1px solid var(--border)}
.source-tab{width:50%;height:50px;border:0;background:#fbfcff;color:var(--muted);font-size:11px;font-weight:600;border-bottom:2px solid transparent}
.source-tab+ .source-tab{border-left:1px solid var(--border)}
.source-tab.selected{background:white;color:var(--blue);border-bottom:2px solid var(--blue)}
.tab-icon{font-size:19px;vertical-align:middle;margin-right:7px}
.visually-hidden{position:absolute;opacity:0;width:1px;height:1px;overflow:hidden}
.drop-zone{margin:22px;flex:1;min-height:430px;border:1px dashed #b8c6d8;display:flex;flex-direction:column;background:#fcfdff}
.drop-zone.dragging{background:#eaf0ff;border-color:var(--blue)}
.upload-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:35px}
.upload-symbol{height:67px;width:67px;border:1px solid #d6e2fb;color:var(--blue);font-size:45px;line-height:61px;font-weight:300;margin-bottom:23px;background:#f2f6ff}
.upload-empty h3,.results-empty h3{font-size:17px;margin:0 0 8px;font-weight:700}
.upload-empty p,.results-empty p{font-size:11.5px;color:var(--muted);line-height:1.85;max-width:280px;margin:0 auto 25px}
.btn{border:1px solid transparent;min-height:41px;padding:0 17px;display:inline-flex;justify-content:center;align-items:center;gap:12px;font-weight:600;font-size:11px;white-space:nowrap}
.btn-primary{background:var(--blue);color:white;border-color:var(--blue)}
.btn-primary:hover:not(:disabled){background:var(--blue-deep);border-color:var(--blue-deep)}
.btn-outline{background:white;color:#273652;border-color:#cfdae8}
.btn-outline:hover:not(:disabled){background:#f0f5ff;border-color:var(--blue)}
.upload-empty small{font-size:9px;color:#8d9ab0;letter-spacing:.1em;font-weight:600;margin-top:25px}
.muted-divider{margin:0 8px;color:#c7d2e4}
.panel-bottom{display:flex;align-items:center;justify-content:space-between;min-height:59px;border-top:1px solid var(--border);padding:0 22px;background:#fcfdfe;gap:9px}
.info-pair{display:flex;gap:11px;align-items:center;font-size:10px}
.info-pair span{color:#8491a6;letter-spacing:.09em}
.info-pair strong{font-size:9px;color:#34445e;letter-spacing:.07em}
.info-pair strong.privacy-ok{color:#12846e}
.document-display{display:flex;flex:1;flex-direction:column;min-width:0}
.preview-toolbar{display:flex;align-items:center;justify-content:space-between;padding:12px 13px;border-bottom:1px solid var(--border);gap:9px;font-size:11px;color:#364967;font-weight:600}
.preview-toolbar>span{max-width:70%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.doc-dot{display:inline-block;width:7px;height:7px;background:var(--mint);margin-right:7px;border-radius:50%!important}
.small-link{border:0;padding:3px;background:transparent;color:var(--blue);font-size:10px;font-weight:700}
.preview-canvas{position:relative;width:100%;min-height:300px;max-height:570px;flex:1;display:flex;justify-content:center;align-items:center;overflow:auto;background:repeating-linear-gradient(45deg,#f2f5fa,#f2f5fa 7px,#edf1f7 7px,#edf1f7 14px)}
.preview-canvas img{display:block;width:auto;max-width:100%;max-height:540px;height:auto;object-fit:contain;user-select:none}
.ocr-overlay{position:absolute;width:100%;height:100%;inset:0;pointer-events:none}
.ocr-polygon{fill:rgba(36,93,230,.10);stroke:rgba(36,93,230,.68);stroke-width:2;pointer-events:all;cursor:pointer;vector-effect:non-scaling-stroke}
.ocr-polygon.focused,.ocr-polygon:hover{fill:rgba(36,93,230,.31);stroke:#1a52d8;stroke-width:3}
.preview-footer{display:flex;justify-content:space-between;padding:11px 13px;border-top:1px solid var(--border);color:#728097;font-size:9px;font-weight:600;letter-spacing:.06em}
.pages-strip{display:flex;gap:5px;padding:9px 12px;border-top:1px solid var(--border);overflow-x:auto}
.page-chip{border:1px solid var(--border);background:white;color:#728097;padding:6px 10px;white-space:nowrap;font-size:10px}
.page-chip.active{border-color:var(--blue);color:var(--blue);font-weight:700;background:#eef4ff}
.camera-zone{border-style:solid;background:#111b30}
.camera-stage{flex:1;min-height:360px;position:relative;display:flex;align-items:center;justify-content:center;background:#101a2a}
.camera-stage video{display:block;width:100%;max-height:470px;object-fit:contain}
.camera-hint{position:absolute;bottom:15px;color:white;background:rgba(0,0,0,.68);padding:9px 13px;font-size:11px}
.camera-actions{display:flex;justify-content:center;gap:9px;padding:18px;background:#fff}
.model-settings{padding:21px 25px;border-bottom:1px solid var(--border)}
.setting-top{display:flex;justify-content:space-between;gap:6px;align-items:center;margin-bottom:14px}
.engine-status{font-size:9px;color:#8190a9;font-weight:700;letter-spacing:.09em;display:flex;gap:7px;align-items:center}
.engine-status .status-dot{background:#bbc5d3}
.engine-status.is-ready{color:#12846e}
.engine-status.is-ready .status-dot{background:#12aa80}
.setting-row{display:flex;gap:10px;align-items:end}
.model-select-wrap{flex:1;min-width:0}
.tiny-label{display:block;color:#7c89a1;font-size:9px;margin-bottom:7px;letter-spacing:.08em}
select{display:block;width:100%;min-height:42px;padding:0 12px;border:1px solid #ccd6e5;background:white;color:#263752;appearance:auto;font-size:11px;font-weight:600}
.initialize-btn{min-height:42px}
.model-note{color:#8693a7;font-size:10px;line-height:1.75;margin:12px 0 0}
.run-controls{display:flex;gap:8px;padding:18px 25px;flex-wrap:wrap;border-bottom:1px solid var(--border)}
.run-button{justify-content:space-between;flex:1;padding:0 20px;min-width:185px;letter-spacing:.045em;height:46px}
.icon-action{height:46px;min-height:46px;padding:0 14px}
.activity-line{display:flex;align-items:center;gap:10px;padding:11px 25px;font-size:10px;color:#537399;background:#eff6ff;border-bottom:1px solid #deebfb}
.activity-icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;color:var(--blue);font-weight:700;font-size:16px}
.error-banner{padding:11px 16px;background:#fff1ee;border-bottom:1px solid #f4c3b8;color:#a83d2b;font-size:11px;display:flex;justify-content:space-between;gap:8px}
.error-banner button{border:0;background:transparent;color:inherit;font-size:19px;line-height:1}
.results-main{flex:1;min-height:265px;display:flex;flex-direction:column;overflow:hidden}
.results-empty{flex:1;min-height:280px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:25px}
.result-symbol{font-size:42px;display:flex;align-items:center;justify-content:center;width:61px;height:61px;background:#f1f4fa;color:#8ca1c6;margin-bottom:16px}
.results-empty p{margin-bottom:26px}
.empty-footer{display:flex;gap:12px;align-items:center;color:#9aa7bb;font-weight:700;font-size:9px;letter-spacing:.05em}
.results-summary{display:flex;justify-content:space-between;gap:15px;background:#f8faff;border-bottom:1px solid var(--border);padding:17px 24px}
.results-summary>div{display:flex;flex-direction:column;gap:4px}
.results-summary strong{font-size:19px;line-height:1.15}
.results-summary span{font-size:8.5px;color:#8794a8;font-weight:700;letter-spacing:.08em}
.result-heading{display:flex;justify-content:space-between;gap:8px;padding:12px 25px;border-bottom:1px solid var(--border);font-size:9px;color:#70809b;font-weight:700;letter-spacing:.08em}
.line-results{overflow-y:auto;max-height:405px;min-height:170px}
.line-item{width:100%;display:flex;align-items:start;gap:15px;padding:12px 22px;background:white;text-align:left;border:0;border-bottom:1px solid #edf0f5}
.line-item:hover,.line-item.selected-line{background:#eef4ff}
.line-item.selected-line{border-left:3px solid var(--blue);padding-left:19px}
.line-number{font-size:9px;color:#9cabc1;font-family:ui-monospace,monospace;line-height:21px}
.line-text{flex:1;min-width:0;font-size:12px;color:#29394f;line-height:1.65;overflow-wrap:anywhere}
.line-score{font-family:ui-monospace,monospace;font-size:10px;color:#6385ad;white-space:nowrap;line-height:21px}
.empty-page{padding:30px 25px;color:#8291a4}
.result-bottom{height:45px;display:flex;align-items:center;justify-content:space-between;padding:0 25px;border-top:1px solid var(--border);font-size:9px;font-weight:700;letter-spacing:.07em;color:#7f8da5;gap:6px}
.footer-icon{color:var(--blue);font-size:17px;vertical-align:middle;margin-right:5px}
.page-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:29px 0 35px;color:#99a4b7;letter-spacing:.07em;font-size:9px;font-weight:600}
.loading-backdrop{position:fixed;z-index:999;inset:0;background:rgba(14,24,42,.73);display:flex;align-items:center;justify-content:center;padding:22px;backdrop-filter:blur(3px)}
.loading-modal{width:min(100%,450px);background:#fff;border-top:4px solid var(--blue);padding:27px 30px 31px;box-shadow:0 20px 85px rgba(0,0,0,.24);text-align:center}
.modal-head{display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--border);padding-bottom:19px;text-align:left;font-size:11px;font-weight:700;letter-spacing:.09em}
.large-spinner{margin:34px auto 20px;height:50px;width:50px;border:4px solid #e6ecfa;border-top-color:var(--blue);border-radius:50%!important;animation:spin .9s linear infinite}
.loading-modal h2{font-size:19px;margin-bottom:8px}
.loading-modal p{color:#6a7a91;line-height:1.8;font-size:11px}
.progress-indeterminate{width:100%;height:4px;background:#e9eefa;overflow:hidden;margin:23px 0}
.progress-indeterminate:before{content:"";display:block;width:40%;height:100%;background:var(--blue);animation:progress 2.2s ease-in-out infinite}
.loading-modal small{display:block;color:#8a97a9;line-height:1.9;font-size:10px}
.boot-screen{height:100vh;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:17px}
.boot-logo{font-size:27px;letter-spacing:.06em;font-weight:800}
.boot-logo span{color:var(--blue)}
.boot-screen p{font-size:11px;color:var(--muted);letter-spacing:.06em}
.progress-line{height:3px;width:160px;background:linear-gradient(90deg,var(--blue) 0 40%,#e3e9f5 40%)}
#blazor-error-ui{display:none;position:fixed;bottom:0;left:0;right:0;background:#fff1ee;padding:10px 20px;color:#9c3022;border-top:1px solid #eeb9a5;z-index:1000}
#blazor-error-ui a{color:inherit;font-weight:700}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes progress{0%{transform:translateX(-120%)}100%{transform:translateX(360%)}}
@media(max-width:1150px){.work-grid{grid-template-columns:1fr}.panel{min-height:590px}.heading-aside{display:none}.preview-canvas{max-height:480px}}
@media(max-width:700px){.top-bar{padding:0 16px;height:65px}.brand{font-size:15px;gap:9px}.brand-square{width:30px;height:30px}.brand-caption,.version-label{display:none}.top-right{gap:0}.privacy-indicator{font-size:8px}.workspace{padding:29px 14px 0}.heading-row{margin-bottom:23px}h1{font-size:27px}.subtitle{font-size:11px}.panel-heading{padding:0 15px}.panel-subtitle{font-size:8px}.panel{min-height:510px}.drop-zone{margin:12px;min-height:390px}.upload-empty{padding:20px}.model-settings{padding:17px 14px}.setting-row{flex-direction:column;align-items:stretch}.initialize-btn{width:100%}.run-controls{padding:14px}.run-button{width:100%;flex:auto}.result-bottom{padding:0 14px}.page-footer{font-size:8px;line-height:1.8}.preview-toolbar{flex-wrap:wrap}.info-pair{gap:5px}.empty-footer{font-size:8px;gap:6px}}

.preview-image-frame{position:relative;display:inline-block;max-width:100%;max-height:540px;line-height:0}.preview-image-frame img{max-height:540px;max-width:100%}.preview-image-frame .ocr-overlay{position:absolute;inset:0;width:100%;height:100%}