/* ================================================================
 * TowerOCR Workspace | Modern responsive redesign
 * Non-destructive visual layer: data and controls remain in app.css
 * ================================================================ */
:root {
  --blue:#1574ee; --blue-dark:#095bd2; --blue-light:#eaf3ff;
  --ink:#162c49; --muted:#7a8ca4; --border:#e4eaf3; --canvas:#f3f7fd;
  --shadow:0 5px 28px rgba(33,75,131,.075);
}
html,body {font-family:Inter,"Segoe UI","Microsoft YaHei UI","Microsoft YaHei",sans-serif;font-size:13px;color:var(--ink);background:#f5f7fb}
button,input,textarea{font:inherit}
button:focus-visible,input:focus-visible,textarea:focus-visible {outline:3px solid rgba(38,126,247,.23);outline-offset:2px}
#app{inset:0!important;max-width:none;border:0;box-shadow:none;background:#f5f8fe}
#titlebar{height:76px;flex:0 0 76px;background:#fff;border-bottom:1px solid var(--border);padding:0 28px;box-shadow:none;-webkit-app-region:no-drag;gap:14px;z-index:4}
#brand{padding:0;gap:12px;height:auto;color:var(--ink);letter-spacing:0;font-weight:500;align-items:center}
.brand-logo{height:46px;width:46px;flex:0 0 46px;border-radius:14px;background:linear-gradient(140deg,#308cff 0%,#0061d9 100%);box-shadow:0 5px 14px rgba(20,111,225,.24);color:#fff;display:grid;place-items:center}
.brand-logo svg{width:30px;height:30px}
.brand-words{display:flex;flex-direction:column;gap:3px;min-width:0}
.brand-words strong{font-size:21px;font-weight:800;letter-spacing:.5px;white-space:nowrap;line-height:1.2}
.brand-words small{font-size:10px;letter-spacing:1.15px;color:#8194ae;font-weight:600;white-space:nowrap}
.brand-sep{color:#bed0e6;margin:0 3px}
.header-right{display:flex;align-items:center;gap:18px}
.header-version{color:#587caa;border-radius:99px;background:#eff5fe;border:1px solid #e0eafa;padding:7px 12px;white-space:nowrap;font-size:11px;font-weight:600}
.header-divider{height:24px;width:1px;background:#e7edf6}
.header-help{display:flex;align-items:center;gap:7px;border:none;background:transparent;color:#60738d;cursor:pointer;font-size:12px;font-weight:600;padding:8px 2px}
.header-help:hover{color:#075fda}
.header-help::first-letter{font-weight:800}
#titlebar .winbtn{display:none}
.mobileNav{width:38px;height:38px;flex:0 0 38px;border:1px solid var(--border);border-radius:11px;background:#f8faff;display:none;align-items:center;justify-content:center;cursor:pointer;color:var(--ink)}
.mobileNav svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
#toolbar{height:74px;flex:0 0 74px;background:#fff;padding:12px 24px;gap:15px;border-bottom:1px solid var(--border);overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;box-shadow:0 3px 12px rgba(31,69,117,.025);z-index:3}
.toolbar-group{display:flex;align-items:center;flex:0 0 auto;gap:8px}
.tool-divider{height:27px;flex:0 0 1px;background:#e7edf5}
.toolbar-spacer{flex:1 1 auto;min-width:5px}
.tbtn{height:38px;min-width:0;padding:0 14px;border-radius:9px;background:#fff;border:1px solid #e2e9f3;color:#455b76;font-size:12px;font-weight:600;box-shadow:0 1px 2px rgba(24,63,124,.025);transition:background .16s,border-color .16s,transform .16s,box-shadow .16s}
.tbtn:hover:not(:disabled){background:#f1f7ff;border-color:#b7d3f8;color:#125cc2;transform:translateY(-1px);box-shadow:0 3px 10px rgba(8,76,165,.08)}
.tbtn:active:not(:disabled){transform:none}
.tbtn.primary,.tbtn.extract{background:linear-gradient(135deg,#2587ff,#0a62dc);color:#fff;border-color:#1374ec;box-shadow:0 5px 11px rgba(13,103,221,.18)}
.tbtn.primary:hover:not(:disabled),.tbtn.extract:hover:not(:disabled){background:linear-gradient(135deg,#1578ed,#0652bc);color:#fff;border-color:#1766d0}
.tbtn.export{color:#1368d7;border-color:#cce0fa;background:#eff6ff}
.tbtn.export:hover{background:#e4f1ff}
.tbtn:disabled{opacity:.45;box-shadow:none}
.btn-icon{font-size:17px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;min-width:16px;margin-right:6px;line-height:1;color:inherit}
.key-hint{font-size:10px;font-weight:500;opacity:.7;margin-left:7px}
.search-wrap{display:flex;align-items:center;flex:0 0 210px;max-width:210px;height:38px;padding:0 11px;background:#f7faff;border:1px solid #e3ebf6;border-radius:9px;transition:border-color .18s}
.search-wrap:focus-within{border-color:#75aeff;box-shadow:0 0 0 3px rgba(22,116,237,.08)}
.search-icon{font-size:21px;color:#a0b2c9;line-height:1;margin-right:4px}
#search{width:100%;height:100%;flex:1;min-width:0;border:0;border-radius:0;box-shadow:none!important;outline:0;background:transparent;color:var(--ink);margin:0;padding:0;font-size:12px}
#search::placeholder{color:#98a8bd}
#cancelButton{height:38px;padding:0 14px;flex:0 0 auto;border-radius:9px;border-color:#e1e8f3;color:#61748e;background:#fff;font-weight:600}
#cancelButton:not(:disabled):hover{background:#fff2f2;color:#db4352;border-color:#f5c0c6}
#body{background:#f4f7fc}
#sidebar{width:284px;flex:0 0 284px;min-width:185px;background:#fff;border-right:0}
#sidebarHeading{height:94px;flex:0 0 94px;padding:23px 19px 19px;display:flex;justify-content:space-between;align-items:flex-end;background:#fff;color:var(--ink);border-bottom:1px solid #edf1f6}
#sidebarHeading>div{display:flex;flex-direction:column;gap:8px}
.eyebrow{font-size:10px;letter-spacing:1.4px;color:#96a8bf;font-weight:700}
#sidebarHeading strong{font-size:17px;font-weight:800;letter-spacing:.3px}
.sidebarCount{font-size:11px;border-radius:6px;background:#eaf3ff;color:#2879da;padding:5px 8px;font-weight:700;white-space:nowrap}
#tree{background:#fff;padding:16px 9px 20px}
.tnode{height:37px;border-radius:8px;margin:1px 0;padding-right:9px;color:#52677f;font-size:12px;cursor:pointer;transition:background .15s}
.tnode:hover{background:#f3f8ff}
.tnode.selected{background:#e8f2ff;color:#086be6;font-weight:700}
.tnode-root{background:#f5f8fd;color:#2f4766;font-weight:700;margin-bottom:7px}
.tnode.hasTable{color:#176bca}
.tnode .twist{width:21px;flex:0 0 21px;color:#9caac0;font-size:10px}
.tnode .badge{font-size:10px;color:#1f75ce;background:#e7f1ff;padding:2px 5px;border-radius:5px;font-weight:700}
.tnode-collapsed{font-size:11px}
.sidebar-bottom{border-top:1px solid #edf1f6;min-height:78px;display:flex;align-items:center;gap:12px;padding:13px 18px;color:#6c7f99;background:#fbfdff}
.sidebar-bottom-icon{width:35px;height:35px;display:grid;place-items:center;background:#eaf3ff;color:#2278e7;border-radius:10px;font-size:21px}
.sidebar-bottom>div{display:flex;flex-direction:column;gap:5px;min-width:0}
.sidebar-bottom strong{font-size:12px;color:#395876}
.sidebar-bottom span:last-child{font-size:11px;color:#93a3b6}
#splitter{width:5px;flex:0 0 5px;background:#f3f7fc;border-left:1px solid #ebf0f6;border-right:1px solid #ebf0f6}
#splitter:hover{background:#cfe3ff}
#work{min-width:0;background:#f5f8fd}
#workTop{position:absolute;z-index:2;left:0;right:0;top:0;height:59px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 25px;background:#fff;border-bottom:1px solid #e6ecf5}
.work-name{display:flex;align-items:center;gap:11px;min-width:0}
.work-name strong{font-size:14px;font-weight:800;white-space:nowrap;color:#263e5c}
.work-subtitle{font-size:11px;color:#91a2b7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.workspace-mark{width:8px;height:8px;flex:0 0 8px;border-radius:50%;background:#2889fb;box-shadow:0 0 0 4px #e3f0ff}
.workspace-tag{font-size:11px;color:#20a67d;background:#e9f9f3;border:1px solid #d8f4e8;border-radius:99px;padding:7px 12px;font-weight:600;white-space:nowrap}
#viewer,#compare{top:59px;bottom:0;left:0;right:0}
#viewer{background-color:#f5f8fd;background-image:radial-gradient(#d8e5f5 .85px,transparent .85px);background-size:19px 19px}
#viewerCanvas { box-shadow:inset -0.5px 0 #dfe7ef; }
#viewerHint{z-index:2;position:absolute;left:50%;top:49%;transform:translate(-50%,-50%);width:min(730px,calc(100% - 48px));padding:40px 30px 38px;box-shadow:0 22px 70px rgba(34,86,154,.09);border:1px solid #e6edf8;border-radius:22px;background:#fff;text-align:center;color:var(--ink);pointer-events:auto}
.hint-illustration{width:180px;height:132px;margin:0 auto 20px;position:relative;filter:drop-shadow(0 12px 13px rgba(46,118,219,.12))}
.preview-sheet{position:absolute;left:36px;top:6px;width:114px;height:121px;background:#fff;border:1px solid #d4e4f8;border-radius:10px;box-shadow:0 5px 16px rgba(43,97,173,.1);transform:rotate(-3deg);padding:15px 13px;overflow:hidden}
.preview-sheet-head{width:44px;height:7px;border-radius:4px;background:#227fff;margin-bottom:10px}
.preview-line{height:4px;background:#dde9fa;border-radius:2px;margin-top:6px}
.preview-line.w75{width:75%}.preview-line.w60{width:60%}
.preview-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:9px;gap:1px;margin-top:13px;border:1px solid #c9ddf6;background:#d7e7f9}
.preview-grid i{background:#eff5fd;display:block}
.preview-grid i:nth-child(3n+2){background:#dcedfe}
.preview-selection{position:absolute;left:8px;top:65px;width:99px;height:44px;background:rgba(46,144,255,.1);border:2px dashed #2382fa;display:grid;place-items:center;color:#197ce9}
.preview-selection span{font-size:23px}
.preview-corner{position:absolute;width:28px;height:28px;border-radius:9px;background:#e9f3ff;border:1px solid #cde4ff}
.preview-corner.pc1{left:10px;top:38px;transform:rotate(15deg)}.preview-corner.pc2{right:7px;top:48px;transform:rotate(-19deg)}.preview-corner.pc3{right:24px;bottom:-1px;width:16px;height:16px;border-radius:5px;background:#2d8bff}
.hint-eyebrow{color:#297feb;font-size:10px;font-weight:800;letter-spacing:1.7px;margin-bottom:10px}
#viewerHint .h1{font-size:24px;font-weight:800;letter-spacing:.2px;line-height:1.45;margin:0 0 12px;color:#193456}
#viewerHint .h2{font-size:13px;color:#8494ac;line-height:1.8;white-space:normal;max-width:490px;margin:0 auto}
.hint-actions{display:flex;align-items:center;justify-content:center;gap:12px;margin:23px 0 26px}
.hint-actions button{height:43px;display:flex;align-items:center;gap:9px;cursor:pointer;font-size:13px;font-weight:700;transition:background .15s,transform .15s;white-space:nowrap}
.hint-actions button:hover{transform:translateY(-1px)}
.hint-upload{padding:0 23px;border:1px solid #1376ed;border-radius:10px;background:linear-gradient(135deg,#308cff,#0965dd);color:#fff;box-shadow:0 6px 14px rgba(11,103,229,.22)}
.hint-upload:hover{background:#075ac6}
.hint-upload span{font-size:20px}
.hint-sample{padding:0 16px;border:1px solid #d6e6fa;background:#f4f9ff;border-radius:10px;color:#3177cf}
.hint-sample:hover{background:#e9f3ff}
.hint-sample span{font-size:17px}
.hint-guide{display:flex;justify-content:center;flex-wrap:wrap;gap:20px;padding-top:21px;border-top:1px solid #edf1f7;font-size:11px;color:#91a3ba}
#zoomLabel{left:auto;right:16px;bottom:14px;height:29px;line-height:29px;text-align:center;padding:0;width:73px;border:1px solid #dfebf7;border-radius:8px;background:rgba(255,255,255,.94);color:#44617e;font-weight:700;box-shadow:var(--shadow)}
#selHint{background:#116cda;border-radius:6px;padding:6px 10px;box-shadow:0 3px 10px rgba(22,109,221,.15)}
#compare{background:#fff}
#summaryBar{height:44px;flex:0 0 44px;background:#f5f9ff;border-bottom:1px solid #e5edf7;padding:0 18px;color:#38608e;font-size:12px;font-weight:650}
.cbtn{height:34px;padding:0 12px;border:1px solid #e0e8f2;border-radius:8px;color:#416181;font-size:11px;font-weight:650}
.cbtn:hover:not(:disabled){background:#f0f7ff;border-color:#bad7f5;color:#1f6ec8}
#compareSplit{background:#fff}
#gridWrap{min-width:250px}
table.bomgrid{font-size:12px;color:#315070}
table.bomgrid th{height:44px;color:#396188;background:#f1f7ff;font-weight:700;border-bottom:1px solid #dae8f7;border-right:1px solid #e4edf7}
table.bomgrid td{height:34px;border-color:#edf1f6}
table.bomgrid tr.alt td{background:#f8fbff}
table.bomgrid tr:hover td{background:#f1f8ff}
table.bomgrid tr.selected td{background:#d9ecff!important}
table.bomgrid tr.warn td{background:#fff4dc!important}
td.cell-edit input{height:32px;font-size:12px}
#sourceWrap{border-left:5px solid #edf3fb}
#sourceVScroll{background:#f2f6fc;border-color:#e3eaf4}
#footer{height:39px;flex:0 0 39px;background:#fff;padding:0 18px;border-top:1px solid #e4ebf3;font-size:11px;color:#657b96;z-index:3}
.status-led{height:7px;width:7px;border-radius:50%;background:#21b98b;box-shadow:0 0 0 4px #e2f9f0;flex:0 0 7px;margin-right:12px}
#engineStatus{border-left:1px solid #e7eef6;color:#67809d;padding:0 15px}
#progressOuter{height:8px;width:98px;flex:0 0 98px;border:none;background:#e9eff7;border-radius:99px}
#progressBar{background:linear-gradient(90deg,#49b0fd,#1873ee);border-radius:99px}
#footer .grip{display:none}
.ctxmenu{border-radius:10px;padding:6px 0;border-color:#e3ebf5;background:#fff;box-shadow:0 14px 33px rgba(23,59,107,.18);min-width:165px;overflow:hidden}
.ctxmenu .item{padding:9px 16px;color:#49617c;cursor:pointer}
.ctxmenu .item:hover{background:#edf5ff;color:#116bd3}
.modal-backdrop{background:rgba(15,30,55,.48);backdrop-filter:blur(3px);padding:16px}
.modal{max-width:calc(100vw - 32px);border-radius:15px;border:1px solid #e4eaf3;box-shadow:0 22px 70px rgba(8,37,79,.25);overflow:hidden}
.modal-head{height:52px;flex:0 0 52px;padding-left:22px;background:#fff;border-bottom:1px solid var(--border);font-size:14px;font-weight:800;color:#274667}
.modal-head .x{height:36px;width:36px;margin-right:11px;border-radius:8px;font-size:18px}
.modal-head .x:hover{background:#fff1f1;color:#d54d59}
.modal-body{padding:22px 24px}
.modal-foot{padding:13px 21px 20px}
.btn{height:36px;padding:0 18px;border:1px solid #dfe7f1;border-radius:8px;color:#506780;font-weight:650;font-size:12px}
.btn:hover{background:#f2f7ff}
.btn.primary{background:linear-gradient(135deg,#308cff,#0c63d9);border-color:#176fe1}
.btn.primary:hover{background:#0759c7}
#licenseModal{width:720px}
#licenseModal .lic-head{height:112px;flex:0 0 112px;background:linear-gradient(110deg,#0d65dd,#298fff);padding:22px 27px}
#licenseModal .lic-head h2{font-size:25px}
#licenseModal .lic-head p{font-size:12px;color:#e1efff;margin-top:11px}
#licenseModal .lic-body{padding:22px 27px 24px;gap:15px}
.machineRow{background:#f4f8ff;border:1px solid #e1ebf9;border-radius:10px;padding:13px}
#licenseInput{border-radius:9px;background:#fcfdff}
#reviewModal{width:min(1080px,95vw)}
#reviewList .ritem{padding:12px 14px}
#reviewList .ritem.selected{background:#eaf3ff;color:#126aca;font-weight:700}
#reviewText{padding:14px;background:#fbfcff}
#alertModal,#confirmModal{width:min(460px,94vw)}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:#f2f6fc}
::-webkit-scrollbar-thumb{border:2px solid #f2f6fc;background:#c4d4e8;border-radius:9px}
::-webkit-scrollbar-thumb:hover{background:#a8c4e2}
#app.sidebar-collapsed #sidebar,#app.sidebar-collapsed #splitter{display:none}
@media(max-width:1320px){
  #toolbar{gap:11px;padding:12px 16px}
  .tbtn{padding:0 10px}
  .key-hint{display:none}
  #sidebar{width:244px;flex-basis:244px}
  .search-wrap{flex-basis:166px;max-width:166px}
}
@media(max-width:1080px){
  .mobileNav{display:flex}
  #titlebar{padding:0 17px;height:65px;flex-basis:65px}
  #toolbar{height:64px;flex-basis:64px}
  #sidebar{width:213px;flex-basis:213px}
  #viewerHint{padding:29px 22px}
  #viewerHint .h1{font-size:20px}
  .hint-illustration{margin-bottom:11px;transform:scale(.86);height:119px}
}
@media(max-width:720px){
  #titlebar{gap:8px}
  .brand-logo{width:37px;height:37px;flex-basis:37px;border-radius:11px}
  .brand-logo svg{width:25px;height:25px}
  .brand-words strong{font-size:16px}
  .brand-words small{font-size:8px;letter-spacing:.2px}
  .header-version,.header-divider,.header-help span{display:none}
  #toolbar{gap:8px;padding:10px 12px}
  .tool-divider{display:none}
  .search-wrap{flex-basis:145px}
  #sidebar{position:absolute;top:0;bottom:0;left:0;z-index:6;box-shadow:12px 0 30px rgba(22,68,126,.12);display:none;width:260px}
  #splitter{display:none}
  #app:not(.sidebar-collapsed) #sidebar{display:flex}
  #app.sidebar-collapsed #sidebar{display:none}
  #workTop{padding:0 13px}
  .work-subtitle,.workspace-tag{display:none}
  #viewerHint{width:calc(100% - 25px);padding:22px 16px;border-radius:15px;max-height:calc(100% - 24px);overflow:auto}
  #viewerHint .h1{font-size:18px}
  #viewerHint .h2{font-size:12px}
  .hint-illustration{display:none}
  .hint-guide{gap:10px}
  .hint-actions{gap:6px;flex-wrap:wrap}
  #footer{padding:0 10px}
  #engineStatus{padding:0 5px;max-width:114px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #progressOuter{display:none}
  #reviewList{width:140px;flex-basis:140px}
}

/* Shared vertical scrolling and aspect-preserving row comparison. */
#gridScroll { min-height:0; overflow-x:scroll; overflow-y:hidden; }
table.bomgrid thead, table.bomgrid thead tr, table.bomgrid th {
  height:44px; min-height:44px; max-height:44px;
}
table.bomgrid th { box-sizing:border-box; padding-top:0; padding-bottom:0; }
#sourceWrap { flex:1 1 0; min-width:0; position:relative; }
#sourceColumn { flex:1 1 0; min-width:0; min-height:0; display:flex; flex-direction:column; }
#sourceHeader {
  flex:0 0 44px; height:44px; min-height:44px; max-height:44px;
  display:flex; align-items:center; justify-content:center;
  color:#396188; background:#f1f7ff; font-size:12px; font-weight:700;
  border-bottom:1px solid #dae8f7; white-space:nowrap;
}
#sourceScroll { min-width:0; min-height:0; overflow-x:hidden; overflow-y:hidden; }
#sourceCanvas { display:block; max-width:none; }
#sourceVScroll { flex:0 0 18px; width:18px; margin-top:44px; overflow-x:hidden; overflow-y:scroll; }
#sourceVSpacer { width:1px; pointer-events:none; }

/* Darker material table grid lines. */
table.bomgrid th { border-right-color:#8fa8c5; border-bottom-color:#829fbe; }
table.bomgrid td { border-right-color:#a0b4cb; border-bottom-color:#a0b4cb; }
table.bomgrid { box-shadow:inset 1px 0 #a0b4cb; }

/* Top-level navigation shared by future web tools. */
#brand { flex:0 0 auto; }
#toolNav { display:flex; align-items:center; gap:28px; margin-left:46px; flex:1 1 auto; min-width:0; height:100%; }
#toolNavLinks { display:flex; align-items:center; height:100%; gap:30px; }
.tool-nav-link { position:relative; height:100%; display:flex; align-items:center; gap:5px; text-decoration:none; color:#51647b; font-size:14px; font-weight:600; white-space:nowrap; }
.tool-nav-link.active { color:#126bea; }
.tool-nav-link.active::after { content:''; position:absolute; bottom:0; left:0; right:0; height:3px; border-radius:3px 3px 0 0; background:#1673ee; }
.tool-nav-link:hover { color:#126bea; }
.tool-nav-link.pending { color:#8999ac; }
.tool-nav-link em,.tool-card em { font-style:normal; font-size:9px; padding:2px 5px; border-radius:4px; background:#f1f4f8; color:#91a0b3; font-weight:400; }
.tool-directory { position:relative; }
#btnToolDirectory { display:flex; align-items:center; gap:8px; border:0; padding:10px 0; background:transparent; color:#425b7a; font-weight:600; cursor:pointer; white-space:nowrap; }
#btnToolDirectory[aria-expanded="true"] { color:#126bea; }
#toolDirectory { position:absolute; top:calc(100% + 17px); left:-190px; width:500px; padding:22px; border:1px solid #e4eaf3; border-radius:14px; background:#fff; box-shadow:0 15px 45px rgba(25,56,93,.16); z-index:20; }
#toolDirectory[hidden] { display:none; }
.tool-directory-heading { display:flex; justify-content:space-between; align-items:center; color:#203b5e; font-size:15px; font-weight:700; padding-bottom:17px; border-bottom:1px solid #edf1f7; }
.tool-directory-heading span { color:#97a5b7; font-size:11px; font-weight:400; }
#toolDirectoryGroups { display:grid; grid-template-columns:1fr 1fr; gap:18px 16px; padding-top:18px; }
#toolDirectoryGroups h3 { font-size:11px; letter-spacing:.5px; color:#8c9db3; margin:0 0 9px; font-weight:600; }
.tool-card { position:relative; display:flex; flex-direction:column; gap:7px; border-radius:8px; padding:12px; text-decoration:none; color:#3d5674; background:#f7f9fc; font-size:13px; font-weight:600; }
.tool-card small { color:#8798ae; font-size:10px; font-weight:400; }
.tool-card.active { background:#edf5ff; color:#126bea; }
.tool-card:hover:not(.pending) { background:#e4efff; }
.tool-card em { position:absolute; top:12px; right:9px; }
@media(max-width:1280px) { #toolNav { margin-left:22px; gap:20px; } #toolNavLinks { gap:18px; } .header-version { display:none; } }
@media(max-width:960px) { #toolNavLinks .pending { display:none; } #toolNav { margin-left:18px; gap:24px; } }
@media(max-width:720px) {
  #toolNav { margin-left:auto; flex:0 0 auto; gap:0; }
  #toolNavLinks { display:none; }
  #btnToolDirectory { font-size:12px; }
  #toolDirectory { position:fixed; top:65px; left:12px; right:12px; width:auto; max-height:calc(100vh - 80px); overflow-y:auto; padding:18px; }
  .header-right { margin-left:8px; }
  .brand-words small { display:none; }
  .tool-directory-heading span { font-size:10px; }
}

#titlebar { z-index:8; }

/* Brand SVG keeps its intrinsic ratio; never stretch either axis. */
#brand .brand-image { display:block; width:252px; height:auto; max-height:66px; object-fit:contain; flex:0 0 auto; }
@media(max-width:1080px) { #brand .brand-image { width:216px; max-height:55px; } }
@media(max-width:720px) { #brand .brand-image { width:180px; max-height:46px; } }
@media(max-width:380px) { #brand .brand-image { width:145px; } }

#brand .brand-image { width:auto; height:64px; max-height:64px; }
@media(max-width:1080px) { #brand .brand-image { width:auto; height:54px; max-height:54px; } }
@media(max-width:720px) { #brand .brand-image { width:auto; height:46px; max-height:46px; } }
@media(max-width:380px) { #brand .brand-image { width:auto; height:40px; max-height:40px; } }

/* Workspace heading and recognition summary share one 30px row. */
#workTop { height:30px; min-height:30px; padding:0 10px; gap:12px; justify-content:flex-start; }
#viewer, #compare { top:30px; }
#workTop .work-name { flex:0 0 auto; gap:7px; }
#workTop .work-name strong { font-size:12px; }
#workTop .workspace-tag { margin-left:auto; font-size:10px; padding:3px 7px; }
#workTop #summaryBar {
  display:none; height:29px; min-height:0; flex:1 1 auto; min-width:0;
  padding:0; border:0; background:transparent; font-size:11px;
}
#work:has(#compare.visible) #summaryBar { display:flex; }
#work:has(#compare.visible) #workTop .work-subtitle,
#work:has(#compare.visible) #workTop .workspace-tag { display:none; }

/* Compact comparison toolbar and matching headers. */
table.bomgrid thead, table.bomgrid thead tr, table.bomgrid th {
  height:34px; min-height:34px; max-height:34px;
}
#sourceHeader { flex:0 0 34px; height:34px; min-height:34px; max-height:34px; }
#sourceVScroll { margin-top:34px; }

#toolbar { height:60px; min-height:60px; flex:0 0 60px; padding-top:8px; padding-bottom:8px; }

table.bomgrid td.part-warning, table.bomgrid tr.selected td.part-warning { background:#ffe496!important; }
#selectedRowStatus { display:none; flex:0 0 auto; max-width:42%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:3px 8px; border-radius:4px; background:#eaf8f0; color:#248259; font-size:11px; }
#work:has(#compare.visible) #selectedRowStatus { display:block; }
#selectedRowStatus.warning { background:#fff2d2; color:#9a651c; }

/* ================================================================
   Full-width site frame + centered 1280px OCR operations area.
   Restore the flat website layout; the site header/banner remain full bleed.
   ================================================================ */
html, body { min-width:0; }
body {
  display:block;
  padding:0;
  background:#f5f8fe;
}
#app {
  position:fixed;
  inset:0!important;
  width:100%;
  max-width:none;
  height:100vh;
  min-height:0;
  margin:0;
  border:0;
  border-radius:0;
  box-shadow:none;
  background:#f5f8fe;
}
#app > .site-header-spacer {
  width:100%;
  height:68px;
  flex:0 0 68px;
}
/* Navigation content intentionally uses full viewport width; only workspace-shell is capped. */
.workspace-shell {
  display:flex;
  flex:1 1 auto;
  flex-direction:column;
  width:min(1280px, 100%);
  max-width:1280px;
  min-height:0;
  margin:0 auto;
  background:#f5f8fe;
}
#toolbar {
  width:100%;
  height:64px;
  min-height:64px;
  flex:0 0 64px;
  margin:0 auto;
  padding-left:22px;
  padding-right:22px;
  background:#fff;
}
#body { position:relative; flex:1 1 auto; min-height:0; }
#sidebar { width:220px; flex-basis:220px; }
#workTop {
  height:48px;
  min-height:48px;
  padding:0 16px;
  gap:14px;
  background:linear-gradient(180deg,#fff 0%,#fbfdff 100%);
}
#workTop .work-name { gap:10px; }
#workTop .work-name strong { font-size:13px; }
#workTop .workspace-tag { padding:5px 10px; }
#viewer, #compare { top:48px; }
#work { background:#f2f6fc; }
#viewer { background-color:#f3f7fc; }
#footer {
  width:100%;
  height:40px;
  flex:0 0 40px;
  margin:0 auto;
}
@media(max-width:760px) {
  #toolbar { padding-left:12px; padding-right:12px; }
}
@media(max-width:620px) {
  #workTop { height:42px; min-height:42px; padding:0 12px; }
  #viewer, #compare { top:42px; }
  #footer { height:36px; flex-basis:36px; }
}

/* Two-thirds-height controls; the header stays fixed above a 68px flow spacer. */
#toolbar {
  height:43px;
  min-height:43px;
  flex:0 0 43px;
  box-sizing:border-box;
  padding:8px 14px;
  gap:8px;
}
#toolbar .toolbar-group { gap:6px; }
#toolbar .tool-divider { height:18px; }
#toolbar .tbtn {
  height:25px;
  padding:0 8px;
  border-radius:6px;
  font-size:10px;
  line-height:1;
}
#toolbar .btn-icon { min-width:12px; margin-right:4px; font-size:12px; }
#toolbar .key-hint { margin-left:4px; font-size:9px; }
#toolbar .search-wrap {
  flex-basis:170px;
  max-width:170px;
  height:25px;
  padding:0 7px;
  border-radius:6px;
}
#toolbar .search-icon { font-size:15px; margin-right:3px; }
#toolbar #search { font-size:10px; }
#toolbar #cancelButton {
  height:25px;
  padding:0 9px;
  border-radius:6px;
  font-size:10px;
}
#workTop {
  height:42px;
  min-height:42px;
  box-sizing:border-box;
  padding:0 12px;
  gap:8px;
}
#viewer, #compare { top:42px; }
#workTop .work-name { gap:7px; }
#workTop .work-name strong { font-size:11px; line-height:1.1; }
#workTop .work-subtitle { font-size:10px; line-height:1; }
#workTop .workspace-mark {
  width:6px;
  height:6px;
  flex:0 0 6px;
  box-shadow:0 0 0 2px #e3f0ff;
}
#workTop .workspace-tag {
  padding:3px 6px;
  font-size:9px;
  line-height:1;
}
#workTop #summaryBar {
  height:42px;
  min-height:0;
  max-height:42px;
  box-sizing:border-box;
  font-size:10px;
}
@media(max-width:760px) {
  #toolbar { padding-left:8px; padding-right:8px; }
}
@media(max-width:620px) {
  #workTop { height:42px; min-height:42px; padding:0 10px; }
  #viewer, #compare { top:42px; }
}

/* Distribute drawing controls beside the workspace title and above the project list. */
#sidebarActions {
  display:flex;
  flex:0 0 auto;
  align-items:center;
  gap:7px;
  padding:10px 12px 0;
  background:#fff;
}
#sidebarActions .tbtn {
  flex:1 1 0;
  min-width:0;
  height:33px;
  padding:0 6px;
  border-radius:6px;
  font-size:12px;
  white-space:nowrap;
}
#sidebarActions .btn-icon { min-width:13px; margin-right:3px; font-size:13px; }
#workTop {
  justify-content:flex-start;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
}
#workTop::-webkit-scrollbar { display:none; }
#workTop .work-name { flex:0 0 auto; }
#workActions {
  display:flex;
  flex:0 0 auto;
  align-items:center;
  gap:4px;
  min-width:max-content;
  white-space:nowrap;
}
#workActions .tbtn {
  flex:0 0 auto;
  height:25px;
  padding:0 6px;
  border-radius:5px;
  font-size:10px;
  white-space:nowrap;
}
#workActions .btn-icon { min-width:11px; margin-right:3px; font-size:12px; }
#workActions .search-wrap {
  flex:0 0 145px;
  width:145px;
  max-width:145px;
  min-width:110px;
  height:25px;
  padding:0 6px;
  border-radius:5px;
}
#workActions .search-icon { font-size:14px; }
#workActions #search { font-size:10px; }
#workActions #cancelButton {
  height:25px;
  padding:0 7px;
  border-radius:5px;
  font-size:10px;
  white-space:nowrap;
}
#workTop .workspace-tag { flex:0 0 auto; margin-left:auto; }
#workTop #summaryBar { flex:1 1 110px; min-width:80px; }
#workTop #selectedRowStatus { flex:0 1 190px; max-width:190px; }

/* Larger recognition text remains inside the existing fixed-height, scrollable grid. */
table.bomgrid { font-size:16px; }
table.bomgrid th { font-size:13px; }
td.cell-edit input { font-size:16px; }

@media(max-width:1080px) {
  #workTop .work-subtitle { display:none; }
  #workActions .search-wrap { flex-basis:130px; width:130px; max-width:130px; }
}
@media(max-width:720px) {
  #sidebarActions { gap:5px; padding:9px 9px 0; }
  #sidebarActions .tbtn { padding:0 4px; font-size:11px; }
  #workTop { gap:7px; }
  #workTop .work-name { gap:6px; }
  #workTop .workspace-tag { display:none; }
  #workActions { gap:3px; }
  #workActions .tbtn { padding:0 5px; }
  #workActions .search-wrap { flex-basis:118px; width:118px; max-width:118px; min-width:118px; }
}

/* Compare-mode actions live in workTop; source alignment controls live with the source header. */
#compareTopActions {
  display:none;
  flex:0 0 auto;
  align-items:center;
  gap:4px;
  min-width:max-content;
  white-space:nowrap;
}
#compareTopActions .cbtn {
  height:25px;
  padding:0 7px;
  border-radius:5px;
  font-size:10px;
}
#work:has(#compare.visible) #workActions { display:none; }
#work:has(#compare.visible) #compareTopActions { display:flex; }
#sourceHeader {
  justify-content:space-between;
  gap:8px;
  padding:0 8px;
  overflow-x:auto;
  scrollbar-width:none;
}
#sourceHeader::-webkit-scrollbar { display:none; }
.source-header-title {
  flex:0 0 auto;
  margin-right:auto;
  padding:0 2px;
  font-size:10px;
  white-space:nowrap;
}
#sourceHeaderActions {
  display:flex;
  flex:0 0 auto;
  align-items:center;
  gap:3px;
  min-width:max-content;
}
#sourceHeaderActions .cbtn {
  height:25px;
  padding:0 5px;
  border-radius:5px;
  font-size:9px;
}
@media(max-width:760px) {
  #sourceHeader { justify-content:flex-end; }
  .source-header-title { display:none; }
  #sourceHeaderActions { margin-left:auto; }
}

/* Field-level inference warnings; failed prefix inference remains a full-row warning. */
table.bomgrid td.part-warning,
table.bomgrid td.material-warning,
table.bomgrid td.spec-warning,
table.bomgrid tr.selected td.part-warning,
table.bomgrid tr.selected td.material-warning,
table.bomgrid tr.selected td.spec-warning {
  background:#ffe496!important;
}
@media(max-width:720px) {
  #sidebar { width:260px; flex-basis:260px; }
}

/* Fit the widest text plus 10px; center content without fixed side padding. */
table.bomgrid col.dynamic-fit-column { min-width:0; }
table.bomgrid th.dynamic-fit-cell,
table.bomgrid td.dynamic-fit-cell,
table.bomgrid td.dynamic-fit-cell input {
  padding-left:0;
  padding-right:0;
  text-align:center;
}

/* Keep the source image fitted to its pane and preserve row-to-image alignment. */
table.bomgrid tbody td {
  height:var(--compare-row-height,34px);
  min-height:0;
  line-height:1;
  font-size:var(--compare-cell-font-size,16px);
}
table.bomgrid tbody td.cell-edit input {
  height:100%;
  line-height:1;
  font-size:var(--compare-cell-font-size,16px);
}