/* Xtractor visual system. Functional layout and source-word geometry live in ui.css. */
@font-face { font-family: 'Inter'; src: url('/fonts/InterVariable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
:root {
  --ink:#202735; --muted:#697386; --line:#e5e8ef; --panel:#fff; --canvas:#f7f8fb;
  --brand:#365ce8; --brand-dark:#274acb; --brand-soft:#eef2ff; --accent:#365ce8;
  --danger:#c33745; --warning:#93651b; --shadow:0 2px 8px #16244304;
  --rail:216px; --page-pad:32px; font-family:'Inter',ui-sans-serif,system-ui,sans-serif;
  font-size:14px; font-feature-settings:'cv11','ss01';
}
body { background:var(--canvas); color:var(--ink); -webkit-font-smoothing:antialiased; }
button,input,textarea,select { font-family:inherit; }
button,a,input,select,textarea,summary { -webkit-tap-highlight-color:transparent; }
button { font-size:13px; }
button:disabled { cursor:not-allowed; opacity:.5; }
:focus-visible { outline:3px solid #7b98ff; outline-offset:3px; }
a { text-underline-offset:3px; }
p { line-height:1.6; }
h1,h2,h3,h4 { letter-spacing:-.025em; }
h2 { font-size:18px; font-weight:650; }
h3 { font-size:15px; font-weight:650; }
.ui-icon { display:block; flex-shrink:0; }
.skip-link { position:fixed; z-index:1100; top:8px; left:8px; padding:12px 18px; border-radius:8px; background:#fff; clip-path:inset(50%); transform:translateY(-180%); }
.skip-link:focus { clip-path:none; transform:none; }

/* Shared navigation */
.app-layout .topbar { position:fixed; inset:0 auto 0 0; width:var(--rail); height:100dvh; min-height:0; display:flex; flex-direction:column; align-items:stretch; flex-wrap:nowrap; gap:0; padding:28px 14px 14px; border:0; background:#141c2d; color:#e9edf7; z-index:30; backdrop-filter:none; }
.app-layout .topbar { overflow-y:auto; }
.topbar .brand { margin:0 8px; gap:10px; min-height:38px; flex-shrink:0; }
.topbar .brand strong { font-size:20px; letter-spacing:-.6px; font-weight:650; }
.brand-mark { width:34px; height:34px; border-radius:10px; background:#4267f0; box-shadow:0 3px 10px #0002; color:white; }
.brand-mark .ui-icon { width:23px; height:23px; }
.nav-caption { margin:35px 12px 11px; font-size:10px; color:#8c9ab4; letter-spacing:.12em; text-transform:uppercase; font-weight:600; }
.app-layout .topbar nav { display:flex; flex-direction:column; align-self:stretch; flex-wrap:nowrap; gap:5px; }
.app-layout .topbar nav a { position:relative; display:flex; justify-content:flex-start; gap:11px; align-items:center; min-height:43px; padding:11px 12px; border:0; border-radius:8px; color:#b4bed2; font-size:12.5px; font-weight:500; white-space:nowrap; transition:background .15s,color .15s; }
.topbar nav a .ui-icon { width:18px; height:18px; color:#8c9bb6; }
.app-layout .topbar nav a:hover { background:#202c42; color:#fff; }
.app-layout .topbar nav a.active { color:#fff; background:#2a3b61; box-shadow:inset 0 0 0 1px #819fe918; }
.topbar nav a.active .ui-icon { color:#9ab6ff; }
.nav-footer { margin-top:auto; padding:16px 9px 0; display:grid; grid-template-columns:32px minmax(0,1fr); gap:10px; align-items:center; }
.workspace-avatar { width:32px; height:32px; display:grid; place-items:center; background:#2d3951; color:#bac7e1; border:1px solid #40516c; border-radius:9px; font-weight:600; font-size:12px; }
.nav-footer > div { min-width:0; display:grid; gap:3px; }
.nav-footer small { font-size:10px; color:#9ba9c1; }
.nav-footer strong { color:#e3e9f5; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; font-weight:500; }
.nav-logout { grid-column:1/-1; display:flex; align-items:center; gap:10px; margin-top:9px; padding:13px 0 3px; color:#a6b3ca; border:0; border-top:1px solid #2a3549; background:transparent; text-align:left; font-size:12px; }
.nav-logout .ui-icon { width:16px; height:16px; }
.nav-logout:hover { color:#fff; }

/* Page hierarchy */
.app-layout .page-shell { width:auto; max-width:none; margin:0 0 0 var(--rail); padding:0 var(--page-pad) 40px; }
.app-context { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:70px; margin:0 calc(-1 * var(--page-pad)) 28px; padding:0 var(--page-pad); border-bottom:1px solid var(--line); background:#ffffffa6; }
.app-breadcrumb { display:flex; align-items:center; gap:12px; font-size:12px; color:var(--muted); }
.app-breadcrumb strong { color:var(--ink); font-weight:500; }
.context-help { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); }
.context-help .ui-icon { width:15px; height:15px; }
.page-heading { margin-bottom:8px; align-items:center; gap:16px; }
.page-heading h1 { font-size:29px; line-height:1.25; font-weight:650; letter-spacing:-1px; margin-bottom:7px; }
.page-heading p:not(.eyebrow) { font-size:13px; color:var(--muted); line-height:1.6; }
.eyebrow,.step-label { color:#78829a; text-transform:uppercase; letter-spacing:.1em; font-weight:600; font-size:10px; margin-bottom:7px; }
.page-heading .eyebrow { display:none; }
.page-tools { display:flex; justify-content:flex-end; min-height:35px; margin-bottom:16px; }
.workspace-switcher { border:0; margin:0; max-width:100%; }
.workspace-switcher > summary { padding:3px 0; font-size:11px; font-weight:500; color:var(--muted); margin-left:auto; }
.workspace-switcher[open] { flex:1; }
.workspace-switcher .context-row { padding:14px; margin:7px 0 0; border:1px solid var(--line); border-radius:9px; background:#fff; }
.workspace-switcher .context-row label { flex:1; min-width:140px; max-width:300px; }
.context-row > span { flex:1; font-size:11px; }
.status-pill { gap:6px; padding:5px 9px; border:1px solid #e1e5ed; color:#647086; background:#f5f7fa; font-size:10px; font-weight:600; border-radius:6px; line-height:1.3; }
.status-pill::before { content:''; width:5px; height:5px; border-radius:50%; background:currentColor; }
.status-pill.success { color:#187555; background:#eef9f3; border-color:#d5ecdf; }
.status-pill.running { color:#946019; background:#fff8e9; border-color:#f4e5bf; }
.status-pill.danger { color:#bc3442; background:#fff0f2; border-color:#f6d7de; }

/* Controls and surfaces */
label { font-size:11px; color:#536075; font-weight:550; gap:7px; }
label small { color:#7b8495; font-size:10px; font-weight:400; line-height:1.5; }
input,select,textarea { padding:10px 12px; border:1px solid #dce1ea; border-radius:7px; font-size:12px; background:#fff; font-weight:400; }
input::placeholder,textarea::placeholder { color:#929aaa; }
input:focus,select:focus,textarea:focus { border-color:#7790ef; box-shadow:0 0 0 3px #365ce80c; }
input[type=checkbox],input[type=range] { accent-color:var(--brand); }
.primary-button,.secondary-button,.text-button,.icon-button { border-radius:7px; font-size:12px; font-weight:550; transition:background .15s,border-color .15s; }
.primary-button { padding:10px 15px; box-shadow:0 1px 2px #1b30752b; background:var(--brand); }
.primary-button:hover { transform:none; background:var(--brand-dark); }
.secondary-button { padding:9px 13px; color:#4d586d; border:1px solid #dce1ea; background:white; }
.secondary-button:hover { background:#f6f8fc; border-color:#c6cfdf; }
.primary-button,.secondary-button { max-width:100%; white-space:normal; overflow-wrap:anywhere; line-height:1.4; }
.primary-button:disabled:hover { background:var(--brand); transform:none; }
.secondary-button:disabled:hover { background:white; border-color:#dce1ea; }
.text-button { color:var(--brand); padding:5px 7px; }
.text-button:hover { background:var(--brand-soft); }
.icon-button { width:30px; height:30px; border-radius:6px; }
.icon-button:hover { background:#eef1f6; }
.large-action { min-height:43px; padding:11px 14px; }
.search-select-trigger { padding:10px 30px 10px 12px; border-color:#dce1ea; border-radius:7px; font-size:12px; font-weight:400; min-height:37px; }
.search-select-trigger::after { top:8px; }
.search-select-popup { border-color:#dce1ea; border-radius:10px; box-shadow:0 12px 36px #18233f24,0 2px 6px #18233f0a; color:var(--ink); font-size:12px; padding:6px; }
.search-select-popup input { background:#f8f9fc; border-color:#e6e9ef; }
.search-select-options [role=option] { padding:9px 10px; font-weight:400; }
.search-select-options [aria-selected=true] { color:var(--brand); background:#edf1ff; font-weight:550; }
.search-select-options .highlighted,.search-select-options [role=option]:hover { background:#f0f3fb; }
.panel { padding:0; border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); }
.panel-heading { padding:18px 22px; margin:0; min-height:80px; border-bottom:1px solid var(--line); }
.panel-heading h2 { font-size:16px; }
.panel-heading .step-label { display:block; font-size:9px; margin-bottom:5px; color:#8490a6; }
.stack-form { padding:20px 22px; gap:18px; }
.segmented { background:#f0f2f7; padding:3px; border-radius:8px; gap:3px; }
.segmented button { padding:8px; border-radius:6px; font-size:11px; font-weight:500; }
.segmented button.active { box-shadow:0 1px 4px #1f2f4d12; }
.workspace-grid { grid-template-columns:clamp(300px,27vw,365px) minmax(0,1fr); gap:18px; align-items:start; }
.input-panel .panel-heading { min-height:66px; padding:14px 18px; }
.input-panel .stack-form { padding:16px 18px; gap:14px; }
.workspace-grid.review-expanded { grid-template-columns:minmax(0,1fr); }
.review-expanded > .input-panel { display:none; }
.result-panel-actions { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:8px; }
.review-expand { font-size:10px; }
.workspace-tabs { gap:20px; margin:0 0 16px; border-color:var(--line); }
.workspace-tabs button { flex:0 0 auto; padding:11px 2px; font-size:12px; font-weight:500; }
.workspace-tabs button[aria-selected=true] { color:var(--brand); font-weight:600; }
.file-drop { min-height:156px; background:#fafbff; border:1px dashed #c9d3e8; border-radius:10px; padding:15px 10px; gap:3px; }
.file-drop:hover,.file-drop.dragging { transform:none; background:#f2f5ff; border-color:#8299ed; }
.file-drop strong { color:#39445a; font-size:13px; font-weight:550; }
.file-drop small { font-size:10px; font-weight:400; max-width:235px; line-height:1.6; margin:3px 0 10px; }
.upload-icon { width:36px; height:36px; border-radius:10px; border:1px solid #e5eaf9; background:#fff; color:var(--brand); margin-bottom:6px; box-shadow:0 2px 4px #26396205; }
.upload-icon .ui-icon { width:22px; height:22px; }
.browse-button { color:var(--brand); padding:7px 12px; font-size:11px; border:1px solid #d6def9; border-radius:6px; background:#fff; }
.upload-options { margin:14px 0 0; font-size:11px; }
.upload-options summary { cursor:pointer; color:#657188; }
.upload-options summary .muted { font-size:10px; margin-left:5px; }
.upload-options label { margin-top:12px; }
.result-panel { min-height:574px; }
.empty-state { min-height:450px; padding:30px; }
.empty-state > strong { color:#35415a; font-size:16px; font-weight:550; }
.empty-state p { font-size:12px; line-height:1.7; max-width:330px; color:#7b8598; }
.empty-state.compact { min-height:230px; gap:7px; }
.empty-state.compact .secondary-button { margin-top:8px; }
.empty-document-preview { position:relative; width:210px; height:160px; margin:0 0 22px; }
.preview-paper { position:absolute; top:4px; left:8px; width:118px; height:144px; border:1px solid #dfe5f0; border-radius:10px; background:#fff; padding:18px; transform:rotate(-7deg); box-shadow:0 6px 18px #1f315409; }
.preview-paper svg { color:#9dadca; width:24px; height:24px; margin-bottom:17px; }
.preview-paper i { display:block; width:100%; height:5px; background:#edf0f6; border-radius:3px; margin:8px 0; }
.preview-paper i:last-child { width:62%; }
.preview-fields { position:absolute; top:48px; right:0; width:121px; border:1px solid #dce4f8; background:#fff; padding:9px; border-radius:9px; box-shadow:0 5px 18px #1f31540c; transform:rotate(4deg); }
.preview-fields > div { display:flex; align-items:center; gap:8px; padding:9px 2px; border-bottom:1px solid #f0f2f8; }
.preview-fields > div:last-child { border:0; }
.preview-fields svg { color:#7894e9; width:12px; height:12px; }
.preview-fields i { height:5px; width:58px; background:#e9eefb; border-radius:3px; }
.preview-fields > div:nth-child(2) i { width:40px; }
#resultContent { padding:18px 22px; container-type:inline-size; }
.result-workspace { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; align-items:start; }
.result-document,.result-output { min-width:0; }
.result-output { max-height:calc(75vh + 54px); overflow:auto; scrollbar-gutter:stable; padding:0 4px 8px; overflow-wrap:anywhere; }
.result-output:focus-visible { outline:2px solid var(--brand); outline-offset:3px; }
@container (max-width:640px) {
  .result-workspace { grid-template-columns:minmax(0,1fr); }
  .result-output { max-height:none; overflow:visible; scrollbar-gutter:auto; padding:0; }
}
.input-preview { min-width:0; }
.input-preview-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:12px; }
.input-preview-name { flex:1; min-width:0; font-size:13px; overflow-wrap:anywhere; }
.input-preview-picker { flex:1 1 220px; min-width:0; }
.input-preview-toolbar .secondary-button { font-size:11px; }
.input-preview-notice { color:var(--muted); font-size:12px; line-height:1.5; margin:10px 0; }
.input-preview-notice:empty { display:none; }
.input-preview-body { min-width:0; overflow:auto; max-height:75vh; border-radius:8px; background:#edf0f7; }
.input-preview-body:empty { display:none; }
.input-preview-pdf { display:block; width:100%; height:72vh; min-height:380px; border:0; }
.input-preview-image { display:block; max-width:100%; height:auto; margin:auto; }
.input-preview-text { min-height:300px; margin:0; padding:20px; color:var(--ink); background:white; font:12px/1.65 monospace; white-space:pre; overflow:auto; }
.result-summary { display:flex; gap:0; margin:0 0 18px; padding:0; background:#fff; border:1px solid var(--line); border-radius:9px; overflow:hidden; }
.result-summary > div { flex:1; padding:13px 17px; }
.result-summary > div:last-child { border:0; }
.result-summary strong { font-size:20px; font-weight:600; letter-spacing:-.5px; }
.result-summary span { color:#8490a5; font-size:9px; letter-spacing:.05em; margin-top:4px; }
.review-heading,.review-list,.review-actions { padding-left:0; padding-right:0; }
.review-row { border-radius:7px; }
.native-record,.native-training-preview { border-color:var(--line); background:#fcfdff; border-radius:9px; }
.native-table th { background:#f8f9fc; color:#6a7891; font-size:11px; font-weight:500; }
.native-table td { font-size:12px; border-color:var(--line); }
.native-grouped-table { margin:22px 0; }
.native-grouped-table > h3 { margin-bottom:4px; }
.native-grouped-table > .muted { margin:0 0 10px; }
.native-grouped-table .native-table { min-width:100%; width:max-content; max-width:100%; }
.native-grouped-table th:not(:first-child),.native-grouped-table td:not(:first-child) { min-width:110px; max-width:260px; }
.native-grouped-table[data-table-kind="table"] th:first-child,.native-grouped-table[data-table-kind="table"] td:first-child { min-width:44px; white-space:nowrap; }
.native-cell-values > details + details { margin-top:6px; padding-top:6px; border-top:1px dashed var(--line); }
.native-cell-conflict { border-left:2px solid #c28b29; padding-left:8px; }
.native-grouping-note { font-size:11px; line-height:1.5; color:#805b1a; background:#fff8e9; border-radius:6px; padding:8px 10px; }
.native-source summary,.json-details summary { color:var(--muted); font-size:11px; }
.native-source summary { color:var(--ink); font-size:12px; font-weight:500; }
#glinerResult h3 { font-size:14px; }
#glinerResult > .muted,#glinerResult > details { font-size:11px; }
#glinerResult button,#downloadPrediction,#downloadAnnotationDraft { margin:5px 6px 5px 0; }

/* Administration: horizontal sections, browsable types, compact detail pane. */
.admin-layout { display:block; }
.side-tabs { position:static; display:flex; gap:22px; padding:0; margin:0 0 22px; border-bottom:1px solid var(--line); }
.side-tabs button { display:block; border:0; border-bottom:2px solid transparent; border-radius:0; padding:12px 2px; font-size:12px; }
.side-tabs button > span,.side-tabs button small { display:none; }
.side-tabs button div { display:block; }
.side-tabs button strong { font-size:12px; font-weight:500; }
.side-tabs button:hover,.side-tabs button.active { background:transparent; box-shadow:none; color:var(--brand); }
.side-tabs button.active { border-bottom-color:var(--brand); }
.side-tabs button.active strong { font-weight:600; }
.admin-section { min-height:500px; padding:24px; border-radius:12px; box-shadow:var(--shadow); }
.section-heading { gap:14px; padding-bottom:20px; }
.section-heading .step-label { display:none; }
.section-heading p:last-child { font-size:12px; }
.section-heading h2 { font-size:17px; margin-bottom:5px; }
.schema-grid { grid-template-columns:minmax(200px,.75fr) minmax(0,1.7fr); gap:24px; margin-top:22px; }
.type-browser { min-width:0; border:1px solid var(--line); border-radius:9px; overflow:hidden; background:#fbfcfe; }
.type-search { padding:14px 12px; border-bottom:1px solid var(--line); background:white; }
.type-search input { background:#f8f9fc; }
.item-list { gap:2px; padding:8px; max-height:530px; }
.list-item { grid-template-columns:30px minmax(0,1fr) 12px; gap:9px; padding:10px 8px; border:1px solid transparent; border-radius:6px; background:transparent; }
.list-item:hover { background:#f0f3f9; border-color:transparent; }
.list-item.active { background:#eef2ff; border-color:#e0e6fc; }
.list-item strong { font-size:11px; font-weight:550; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.list-item small { font-size:9px; font-weight:400; color:#8893a6; margin-top:3px; }
.type-icon { width:29px; height:32px; font-size:11px; font-weight:500; background:#fff; color:#7991bd; border:1px solid #e1e7f2; border-radius:5px; }
#typeSearchEmpty { margin:15px; font-size:11px; }
.schema-detail { min-width:0; }
.detail-heading { align-items:center; margin-bottom:17px; gap:10px; }
.detail-heading code { font-size:10px; color:#8790a0; background:#f2f4f8; border-radius:4px; padding:3px 5px; }
.field-list { gap:8px; }
.field-card { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:7px 10px; align-items:center; padding:14px; border:1px solid var(--line); border-radius:8px; box-shadow:none; }
.field-card > div { display:grid; gap:4px; min-width:0; }
.field-card strong { font-size:12px; font-weight:550; }
.field-card code { font-size:10px; color:#929bac; overflow-wrap:anywhere; }
.field-card p { grid-row:2; grid-column:1/-1; margin:0; color:#8a94a6; font-size:10px; }
.field-edit { position:static; grid-column:3; grid-row:1; }
.value-badge { padding:4px 7px; background:#f1f4fa; color:#72829c; font-size:9px; font-weight:500; border:1px solid #e8ecf4; border-radius:5px; }
.filter-row { padding:16px 0 4px; margin:0; gap:14px; }
.filter-row label { flex:1; min-width:170px; max-width:320px; }
.table-wrap { border-color:var(--line); border-radius:8px; }
th { background:#f8f9fc; text-align:left; color:#7b869a; font-size:10px; font-weight:550; padding:12px; }
td { padding:13px 12px; border-bottom:1px solid var(--line); font-size:11px; }
tbody tr:last-child td { border-bottom:0; }
tbody tr:hover { background:#fafbfe; }
.native-training-form { max-width:820px; gap:12px; }
.sample-source { padding:14px; border:1px solid var(--line); border-radius:8px; background:#fbfcfe; gap:12px; }
.sample-source span { font-size:11px; }
.adjustment-strength { padding:20px; border-color:var(--line); border-radius:10px; margin:6px 0; background:#fbfcff; }
.adjustment-strength legend { font-size:12px; font-weight:600; padding:0 8px; }
.adjustment-strength label { font-size:11px; }
.adjustment-strength output { color:var(--brand); }
.adjustment-strength input[type=range] { padding:12px 0; border:0; box-shadow:none; background:transparent; }
.adjustment-labels { font-size:10px; color:#6c7b97; gap:4px; }
.adjustment-strength p { font-size:11px; color:#768299; margin:16px 0 6px; }
.adjustment-strength small { font-size:10px; }
.native-training-validation,.native-training-preview p { font-size:12px; }
.native-job-card { padding:16px; border:1px solid var(--line); border-radius:9px; box-shadow:none; }
.native-job-card h4 { font-size:12px; font-weight:600; }
.native-job-card p { font-size:11px; color:#69768d; }
.training-eta { color:var(--brand) !important; font-variant-numeric:tabular-nums; }
.learning-grid { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(280px,.85fr); align-items:start; gap:28px; margin-top:24px; }
.learning-setup,.learning-history { min-width:0; }
.learning-setup > .form-row { display:block; }
.learning-help { font-size:11px; color:var(--brand); justify-self:start; }
.learning-history { padding:18px; background:#fafbfe; border:1px solid var(--line); border-radius:10px; }
.learning-history .section-subheading { margin-top:0; margin-bottom:16px; gap:8px; }
.learning-history .section-subheading h3 { font-size:13px; }
.learning-history .job-list { font-size:12px; }

/* Editors and annotation */
dialog { border:1px solid #e5e9f2; border-radius:14px; box-shadow:0 28px 90px #101a393b; }
dialog { max-height:calc(100dvh - 2rem); overflow-y:auto; }
.dialog-form { min-width:0; }
.dialog-form > label { min-width:0; }
.dialog-form .button-row { justify-content:flex-end; align-items:center; }
.dialog-form .form-error { overflow-wrap:anywhere; }
dialog::backdrop { background:#17213866; backdrop-filter:blur(3px); }
#entityDialog .dialog-heading { padding:20px 24px; }
#entityDialog .dialog-heading h2 { font-size:20px; }
#entityDialog .entity-columns { padding:24px; }
#entityDialog.field-dialog .entity-columns { gap:30px; }
.entity-rule-region { padding-left:24px; border-left:1px solid var(--line); }
.entity-rule-region h3 { font-size:13px; }
#entityDialog .dialog-actions { padding:15px 24px; background:#fafbfe; }
.entity-basics { gap:17px; }
.value-list > strong { font-size:11px; font-weight:550; color:#536075; }
.rule-heading strong { font-size:11px; font-weight:600; }
.rule-card { background:#fafbfe; padding:12px; border-color:#e6eaf3; border-radius:8px; }
.rule-controls { gap:10px; }
.rule-controls label > span { font-size:10px; }
.rule-add { padding-top:6px; }
.rule-list > p { font-size:11px; padding:18px 14px; background:#f7f9fd; border:1px dashed #dbe3f2; border-radius:8px; }
.schema-editor { padding:0; margin:0; border:0; background:transparent; }
.schema-editor > summary { font-size:12px; }
.schema-preset-row { padding:14px; background:#f8faff; border:1px solid #e6ebf7; border-radius:8px; }
.schema-tools { gap:3px; }
.schema-field { border-radius:7px; border-color:var(--line); }
.schema-field > summary { font-size:11px; padding:12px; }
.schema-field-kind { font-size:9px; }
.schema-fields { max-height:52vh; }
.field-labeling { margin:0; padding:0; border:0; container:labels / inline-size; }
.label-workspace { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:16px; }
.label-source,.label-sidebar { min-width:0; }
.label-source-toolbar { display:flex; align-items:center; gap:6px; min-height:38px; margin-bottom:10px; }
.label-source-toolbar > .search-select { flex:1; min-width:0; max-width:145px; }
.label-source-toolbar button { padding:7px 9px; font-size:11px; }
.label-help { display:inline-grid; place-items:center; flex:none; width:22px; height:22px; border-radius:50%; color:var(--brand); background:var(--brand-soft); font-size:12px; cursor:help; }
.label-sidebar { border:1px solid var(--line); border-radius:10px; padding:12px; background:#fafbfe; }
.label-sidebar-heading { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:12px; }
.label-sidebar-heading h3 { margin:0; font-size:14px; }
.label-sidebar-heading button { font-size:11px; padding:8px 10px; color:var(--brand); }
.label-sidebar .label-toolbar { display:grid; padding:0; border:0; background:none; gap:10px; }
.label-sidebar .label-toolbar > label:not(.check-label) { display:grid; gap:5px; font-size:11px; color:var(--muted); }
.label-sidebar .label-toolbar .search-select { width:100%; min-width:0; }
.label-selection-actions { display:flex; flex-wrap:wrap; gap:6px; }
.label-selection-actions button { font-size:11px; padding:7px 9px; }
.label-feedback { font-size:11px; line-height:1.5; padding:9px; margin:0 0 12px; border-radius:6px; background:var(--brand-soft); color:#394d86; }
.label-sidebar .muted { font-size:11px; margin:0; }
.label-sidebar .label-occurrences { max-height:310px; overflow:auto; }
.label-sidebar .label-occurrence { align-items:start; }
.label-sidebar .label-occurrence button:first-child { flex:1; min-width:0; text-align:left; white-space:normal; overflow-wrap:anywhere; line-height:1.5; }
.label-sidebar .label-occurrence button { padding:6px; }
.label-sidebar .label-save-actions { display:grid; gap:8px; border-top:1px solid var(--line); margin-top:12px; }
.label-sidebar > details { font-size:11px; }
.label-sidebar input[type=file] { width:100%; min-width:0; }
.label-sidebar pre { max-width:100%; overflow:auto; }
.label-source .label-viewport { margin:0; max-height:min(72vh,800px); min-height:260px; }
@container labels (max-width:520px) {
  .label-workspace { grid-template-columns:minmax(0,1fr); }
  .label-source .label-viewport { min-height:180px; max-height:50vh; }
  .label-sidebar .label-occurrences { max-height:200px; }
}
.label-toolbar { padding:10px; background:#f7f9fd; border:1px solid var(--line); border-radius:8px; gap:7px; }
.label-toolbar > .search-select { flex:1 1 180px; width:auto; }
.label-toolbar > button { font-size:10px; padding:7px 9px; }
.label-toolbar .search-select-trigger { font-size:11px; }
.label-viewport { background:#edf0f7; border-color:#dfe4f0; border-radius:9px; }
.label-page { box-shadow:0 2px 10px #1624430c; }
.label-occurrences { margin-top:12px; }
.label-occurrence { border:1px solid var(--line); border-radius:7px; padding:6px; background:#fff; }
.label-occurrence button { font-size:11px; }
.label-save-actions { padding:12px 0; }
.label-save-actions .check-label { font-size:11px; }
.label-word { font-family:Arial,sans-serif; }

/* Queue, schema library and guides */
.queue-panel { padding:24px; }
.queue-header { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.queue-header h2 { margin:0; }
.queue-help { font-size:11px; margin:8px 0 22px; }
.queue-tools { gap:14px; padding:15px; background:#f8f9fc; border:1px solid var(--line); border-radius:8px; }
.queue-tools label { min-width:140px; }
#queueSummary { margin:18px 0 12px; font-size:11px; color:#79869c; }
.queue-table { font-size:11px; }
.queue-table td,.queue-table th { padding:14px 12px; border-color:var(--line); }
.queue-table small { font-size:10px; margin-top:5px; }
.queue-actions { min-width:225px; }
.queue-actions > * { font-size:10px; padding:6px 8px; }
.library-page > .page-heading { margin-bottom:28px; }
.library-content { display:grid; grid-template-columns:minmax(260px,.75fr) minmax(0,1.3fr); align-items:start; gap:24px; }
.library-content > section { padding:24px; background:white; border:1px solid var(--line); border-radius:12px; }
.library-content p { font-size:12px; }
.library-content h2 { font-size:17px; margin:12px 0 8px; }
.library-number { width:28px; height:28px; display:grid; place-items:center; color:var(--brand); background:#edf2ff; border-radius:7px; font-size:10px; font-weight:600; }
.library-start .form-row { display:flex; align-items:stretch; flex-direction:column; gap:12px; }
.library-start > button { margin:8px 6px 0 0; }
.library-json summary { cursor:pointer; font-size:11px; color:var(--muted); }
.library-json textarea { font-size:10px; }
#libraryStatus { margin:16px 0; color:#7b879c; font-size:10px; line-height:1.65; }
.guide-page > h1 { font-size:29px; font-weight:650; margin:0 0 15px; }
.guide-page > p { max-width:1000px; font-size:13px; }
.guide-page > section { padding:24px 28px; background:white; border:1px solid var(--line); border-radius:11px; margin:18px 0; max-width:1000px; scroll-margin-top:20px; }
.guide-page section h2 { margin-bottom:13px; font-size:17px; }
.guide-page section p,.guide-page li,.guide-page dd { font-size:12px; line-height:1.8; color:#6c778c; }
.guide-page li { padding:5px 0 5px 4px; }
.guide-page strong { color:#35425a; font-weight:600; }
.guide-page a:not(.context-help) { color:var(--brand); }
.guide-page > nav { display:flex; flex-wrap:wrap; gap:8px 18px; margin:20px 0; }
.guide-page > nav a { font-size:12px; }
.guide-page > h2 { margin-top:28px; }
.guide-page dt { margin-top:15px; }
.guide-page dd { margin:6px 0 18px; }
.guide-page code { font-size:11px; overflow-wrap:anywhere; background:#edf0f7; padding:2px 4px; border-radius:3px; }
.guide-page pre { white-space:pre-wrap; overflow-wrap:anywhere; }
.toast { background:#233252; border:1px solid #435577; box-shadow:0 6px 24px #15223f26; font-size:12px; padding:14px 18px; border-radius:9px; }
.toast.error { background:#97303f; border-color:#bf5867; }

@media(min-width:1750px) { :root { --page-pad:48px; } .workspace-grid { grid-template-columns:385px minmax(0,1fr); } }
@media(max-width:1180px) { :root { --page-pad:24px; --rail:190px; } .workspace-grid { gap:16px; grid-template-columns:290px minmax(0,1fr); } .stack-form,#resultContent { padding:18px; } .panel-heading { padding:16px 18px; } .schema-grid { gap:18px; } .library-content { gap:16px; } }
@media(max-width:1000px) {
  :root { --rail:72px; --page-pad:22px; }
  .app-layout .topbar { padding:22px 10px 14px; }
  .topbar .brand { margin:0; justify-content:center; }
  .topbar .brand > strong,.nav-caption,.nav-footer > div,.nav-footer .workspace-avatar { display:none; }
  .app-layout .topbar nav { margin-top:32px; gap:10px; }
  .app-layout .topbar nav a { justify-content:center; padding:12px; }
  .topbar nav a > span,.nav-logout span { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .nav-footer { display:flex; justify-content:center; padding:0; }
  .nav-logout { border:0; padding:13px; }
  .schema-grid { grid-template-columns:minmax(200px,.8fr) minmax(0,1.4fr); }
  .learning-grid { grid-template-columns:minmax(0,1fr); }
}
@media(max-width:800px) {
  .workspace-grid,.library-content { grid-template-columns:minmax(0,1fr); }
  .result-panel { min-height:0; }
  .empty-state { min-height:330px; }
  .schema-grid { grid-template-columns:minmax(0,1fr); }
  .item-list { max-height:230px; }
  .page-heading h1 { font-size:25px; }
  .admin-section { padding:18px; }
}
@media(max-width:640px) {
  :root { --page-pad:16px; --rail:0px; }
  .app-layout .topbar { position:relative; width:100%; height:auto; inset:auto; padding:14px 16px 9px; }
  .topbar .brand { justify-content:flex-start; min-height:32px; }
  .topbar .brand > strong { display:block; font-size:19px; }
  .brand-mark { width:29px; height:29px; border-radius:8px; }
  .app-layout .topbar nav { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); margin-top:14px; gap:7px; }
  .app-layout .topbar nav a { min-height:49px; padding:7px 3px; flex-direction:column; gap:5px; }
  .app-layout .topbar nav a::after { content:attr(data-short-label); font-size:9px; font-weight:500; }
  .nav-footer { position:absolute; top:14px; right:16px; margin:0; }
  .nav-logout { margin:0; padding:7px; }
  .app-context { min-height:48px; margin-bottom:21px; }
  .app-breadcrumb { gap:8px; font-size:10px; }
  .context-help { font-size:10px; }
  .page-heading { flex-direction:row; align-items:flex-start; gap:8px; }
  .page-heading h1 { font-size:24px; }
  .page-heading p:not(.eyebrow) { font-size:11px; }
  .page-heading > .status-pill { margin-top:4px; }
  .page-tools { margin-bottom:12px; min-height:28px; }
  .stack-form,#resultContent,.panel-heading { padding:16px; }
  .panel-heading h2 { font-size:15px; }
  .file-drop { min-height:150px; }
  .section-heading { flex-wrap:wrap; gap:12px; }
  .section-heading p:last-child { font-size:11px; }
  .admin-section,.queue-panel,.library-content > section { padding:16px; }
  .side-tabs { margin-bottom:16px; }
  .field-card { gap:8px; padding:12px; }
  .filter-row label,.queue-tools label { min-width:0; width:100%; flex-basis:100%; }
  .queue-header { flex-wrap:wrap; }
  .queue-header h2 { font-size:16px; }
  .queue-actions { min-width:180px; }
  .rule-add { flex-wrap:wrap; }
  .entity-rule-region { padding:20px 0 0; border-left:0; border-top:1px solid var(--line); }
  #entityDialog.field-dialog .entity-columns { grid-template-columns:minmax(0,1fr); gap:20px; }
  #entityDialog .entity-columns { padding:16px; }
  .adjustment-strength { padding:14px; }
  .adjustment-labels { font-size:9px; }
  .guide-page > section { padding:20px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition:none !important; scroll-behavior:auto !important; } }

/* Sign-in */
.login-page { display:block; place-items:normal; padding:0; background:#fff; }
.login-layout { width:100%; min-height:100dvh; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); }
.login-intro { position:relative; display:flex; flex-direction:column; padding:42px 9%; background:#141c2d; color:white; overflow:hidden; }
.login-intro::before { content:''; position:absolute; width:600px; height:600px; border:1px solid #354d7629; border-radius:50%; bottom:-360px; left:-100px; pointer-events:none; box-shadow:0 0 0 80px #30496c0b,0 0 0 160px #30496c0b; }
.login-brand { display:flex; gap:11px; align-items:center; font-size:23px; letter-spacing:-.7px; }
.login-brand strong { font-weight:600; }
.login-message { position:relative; margin:auto 0; padding:60px 0; }
.login-message .eyebrow { color:#8faaff; margin-bottom:20px; font-size:10px; }
.login-message h1 { font-size:clamp(32px,3.2vw,48px); font-weight:550; line-height:1.2; letter-spacing:-1.7px; margin-bottom:23px; }
.login-message > p:not(.eyebrow) { color:#9eacc4; font-size:13px; line-height:1.85; }
.login-footer { color:#7c8ba5; margin:0; font-size:11px; }
.login-card { width:min(410px,100%); margin:auto; padding:35px; border:0; background:transparent; border-radius:0; box-shadow:none; }
.login-form-heading .eyebrow { color:#8c95a7; margin-bottom:12px; }
.login-form-heading h2 { font-size:25px; line-height:1.3; font-weight:600; letter-spacing:-.8px; margin-bottom:10px; }
.login-form-heading p.muted { font-size:12px; margin-bottom:28px; }
.login-card .stack-form { gap:20px; padding:0; }
.login-card input { padding:13px; font-size:12px; }
.login-card .primary-button { min-height:43px; }
.login-assistance { text-align:center; font-size:10px; color:#8c96a8; margin:22px 0 0; }
.login-flow { display:flex; align-items:center; gap:24px; margin:40px 0 0; }
.login-document { background:#24304a; width:111px; height:136px; border:1px solid #3b4b69; border-radius:10px; padding:18px; transform:rotate(-5deg); }
.login-document span { font-size:8px; letter-spacing:.13em; color:#a1b4db; }
.login-document i { display:block; background:#435578; width:100%; height:5px; border-radius:3px; margin-top:12px; }
.login-document i:last-child { width:60%; }
.flow-arrow { color:#61779d; font-size:26px; }
.login-fields { width:133px; padding:10px; background:#263755; border:1px solid #415b86; border-radius:10px; transform:rotate(3deg); }
.login-fields div { display:flex; gap:16px; align-items:center; padding:10px 3px; border-bottom:1px solid #3b4d6c; }
.login-fields div:last-child { border:0; }
.login-fields i { background:#5573a4; height:5px; border-radius:2px; width:60px; }
.login-fields b { font-size:10px; color:#a2b9f2; }
@media(max-width:800px) {
  .login-layout { grid-template-columns:1fr; }
  .login-intro { padding:25px 28px; }
  .login-message { padding:38px 0 15px; }
  .login-message h1 { font-size:32px; }
  .login-message > p:not(.eyebrow) { font-size:11px; }
  .login-flow,.login-footer { display:none; }
  .login-card { padding:35px 28px; margin:0 auto; }
  .login-form-heading h2 { font-size:23px; }
}

/* Compact field help: visible on hover, keyboard focus and tap. */
.help-info { display:inline-grid; place-items:center; width:17px; height:17px; min-width:17px; padding:0!important; margin-left:6px; border:1px solid #bec8d9!important; border-radius:50%!important; background:#f6f8fc!important; color:#526784!important; font-size:11px!important; font-style:normal; line-height:1; vertical-align:middle; cursor:help; }
.help-info:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
.help-tooltip { position:fixed; z-index:10000; width:max-content; max-width:min(340px,calc(100vw - 24px)); padding:11px 14px; border-radius:8px; background:#24324a; color:white; box-shadow:0 8px 24px #17233830; font-size:12px; line-height:1.6; font-weight:400; text-align:left; white-space:normal; }
.help-tooltip[hidden] { display:none!important; }
.library-field-list { display:grid; gap:4px; max-height:60vh; overflow:auto; margin-top:14px; }
.library-field-list button { text-align:left; overflow-wrap:anywhere; }
.library-field-list button[aria-current=true] { color:var(--brand); background:#edf2ff; border-color:#b8c8fa; }
.library-edit .schema-fields { max-height:none; }
.library-edit .schema-field-body { grid-template-columns:repeat(2,minmax(0,1fr)); }
.library-edit .schema-field-body > .schema-advanced,.library-edit .schema-field-actions { grid-column:1/-1; }
.library-start { position:sticky; top:20px; }
.guide-tabs { display:flex; flex-wrap:wrap; gap:6px; margin:20px 0; }
.guide-tabs button { border:1px solid var(--line); padding:9px 14px; border-radius:8px; background:white; color:#53617a; }
.guide-tabs button[aria-selected=true] { color:white; background:var(--brand); border-color:var(--brand); }
.guide-page > section[hidden] { display:none!important; }
@media(max-width:800px) { .library-start { position:static; } .library-field-list { max-height:230px; } .library-edit .schema-field-body { grid-template-columns:1fr; } }

.schema-fields > .schema-mode { display:flex; align-items:center; gap:8px; margin:8px 0 12px; }
.schema-fields > .schema-mode input[type=checkbox], .rule-controls input[type=checkbox] { width:auto; min-height:0; margin:0; }
.rule-controls label:has(> input[type=checkbox]) { display:flex; align-items:center; gap:8px; }
.library-edit .schema-field-body > .rule-controls { grid-column:1/-1; }

.help-tooltip { pointer-events:none; }

.ocr-upload { display:flex; align-items:end; flex-wrap:wrap; gap:12px; padding:16px 0; }
.ocr-upload label { flex:1; min-width:220px; }
.ocr-workspace { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.ocr-workspace > .panel { min-width:0; padding:16px; }
.ocr-workspace h2 { font-size:15px; margin:0 0 12px; }
.ocr-result-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; }
#ocrWords { height:65vh; overflow:auto; }
#ocrWordDetail { overflow-wrap:anywhere; }
#ocrCanvas { position:relative; }
.ocr-settings { padding:24px; max-width:800px; margin-top:16px; display:grid; gap:16px; }
.ocr-settings .form-row { margin-top:0; }
@media(max-width:900px) { .ocr-workspace { grid-template-columns:minmax(0,1fr); } }