app/static/styles.css

:root{color-scheme:light;--ink:#202722;--muted:#7e8980;--faint:#a2aaa3;--line:#e7eae6;--panel:#fff;--canvas:#f2f4f1;--green:#2c694c;--green-dark:#23583e;--green-pale:#eaf4ed;--blue:#4b83d1;--red:#a24438;--shadow:0 10px 28px #202a2018;font-family:Inter,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--canvas);font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}.hidden{display:none!important}button,input,textarea,select{font-family:inherit}body{margin:0;min-width:360px;height:100vh;overflow:hidden;font-size:13px}.topbar{height:62px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 22px;position:relative;z-index:5}.brand{display:flex;gap:10px;align-items:center;color:inherit;text-decoration:none}.brand-icon{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:var(--green);color:#fff;font-weight:800;font-size:17px}.brand strong{display:block;font-size:14px;font-weight:750;letter-spacing:-.35px}.brand small{display:block;margin-top:2px;color:#8f9890;font-size:8px;font-weight:700;letter-spacing:1.25px}.top-actions,.toolbar-actions{display:flex;align-items:center;gap:9px}.button{height:36px;padding:0 14px;border:1px solid transparent;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:12px;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s,box-shadow .15s}.button:disabled,.square-button:disabled{opacity:.4;cursor:not-allowed}.button.primary{background:var(--green);color:#fff;box-shadow:0 2px 5px #183f2a1b}.button.primary:hover:not(:disabled){background:var(--green-dark)}.button.secondary{background:#fff;border-color:#dce2dc;color:#39433c}.button.secondary:hover:not(:disabled){background:#f7f9f7}.upload-button input,.welcome .button input{display:none}.app-shell{height:calc(100vh - 62px);display:grid;grid-template-columns:270px minmax(420px,1fr) 296px;min-width:0}.left-panel,.right-panel{background:var(--panel);min-height:0;display:flex;flex-direction:column;overflow:hidden}.left-panel{border-right:1px solid var(--line)}.right-panel{border-left:1px solid var(--line)}.document-heading{padding:19px 17px 16px;border-bottom:1px solid var(--line)}.eyebrow{font-size:9px;line-height:1.3;letter-spacing:1.1px;font-weight:750;color:#89948a}.document-heading h1{margin:7px 0 4px;font-size:14px;line-height:1.3;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.document-heading p{margin:0;color:#9aa29b;font-size:10px}.panel-section{padding:14px 14px 12px;border-bottom:1px solid var(--line);flex:0 0 auto}.section-heading{display:flex;align-items:center;justify-content:space-between}.tiny-muted{font-size:9px;color:#9da69e}.page-navigation{display:grid;grid-template-columns:30px 1fr 30px;gap:7px;margin-top:10px}.page-navigation select,.inspector-content select{height:31px;width:100%;border:1px solid var(--line);border-radius:6px;background:#fff;padding:0 8px;color:#414941;font-size:11px;font-weight:500}.square-button{height:30px;width:30px;padding:0;border:1px solid #e1e5e0;background:#fff;border-radius:6px;color:#555f57;font-size:16px;font-weight:500;cursor:pointer}.square-button:hover:not(:disabled){background:#f3f7f3;border-color:#cbd9ce}.region-section{max-height:220px;overflow:auto}.region-list{display:flex;flex-direction:column;gap:2px;margin-top:8px}.region-item{display:flex;align-items:center;gap:8px;width:100%;min-height:29px;padding:5px 7px;border:0;border-radius:5px;background:transparent;text-align:left;color:#5f6961;cursor:pointer;font-size:10px;font-weight:500}.region-item:hover{background:#f7f9f7}.region-item.active{color:#265f43;background:var(--green-pale)}.region-mark{flex:0 0 6px;height:6px;border-radius:2px;background:#83a993}.all-mark{background:#518263}.region-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:capitalize}.region-count{font-size:9px;color:#a0a9a1}.text-section{flex:1;min-height:120px;display:flex;flex-direction:column;overflow:hidden;border-bottom:0}.count{font-size:10px;color:#89948a}.search-field{height:31px;margin:10px 0 7px;display:flex;align-items:center;gap:7px;padding:0 8px;border:1px solid var(--line);border-radius:6px;color:#969e97}.search-field:focus-within{border-color:#a9c6b2;box-shadow:0 0 0 2px #edf5ef}.search-field span{font-size:16px}.search-field input{width:100%;border:0;outline:0;background:transparent;font-size:10px;color:var(--ink)}.search-field input::placeholder{color:#a1aaa2}.selection-toolbar{display:flex;align-items:center;justify-content:space-between;color:#89928b;font-size:9px;padding:2px 2px 5px}.selection-toolbar label{display:flex;align-items:center;gap:5px;cursor:pointer}.selection-toolbar input,.object-check{accent-color:var(--green)}.selection-toolbar input{margin:0}.object-list{flex:1;overflow:auto;margin:0 -5px;padding:0 2px 8px}.object-row{display:flex;align-items:center;gap:5px;min-height:31px;border-radius:5px}.object-row:hover{background:#f7f9f7}.object-row.active{background:#edf5ef}.object-check{width:12px;height:12px;margin:0 1px 0 6px;cursor:pointer}.object-item{width:100%;min-width:0;display:flex;align-items:center;gap:8px;padding:7px 7px 7px 0;border:0;background:transparent;text-align:left;color:#48524a;cursor:pointer;font-size:10px;font-weight:500}.object-text{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.deleted-row .object-text{text-decoration:line-through;color:#a0a6a1}.source-dot{width:5px;height:5px;border-radius:50%;flex:0 0 auto;background:#8da896}.source-dot.ocr-dot{background:#c69e54}.empty-note{margin:6px 2px;padding:6px 4px;color:#9ba49c;font-size:10px;line-height:1.5}.sidebar-footer{height:41px;display:flex;align-items:center;gap:8px;padding:0 15px;border-top:1px solid var(--line);font-size:9px;color:#879188;flex:0 0 auto}.privacy-dot{width:7px;height:7px;border-radius:50%;background:#64a57e;box-shadow:0 0 0 3px #eaf4ed;flex:0 0 auto}.workspace{display:flex;flex-direction:column;min-width:0;min-height:0}.toolbar{height:48px;flex:0 0 auto;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 17px}.breadcrumb{display:flex;align-items:center;gap:8px;color:#929b93;font-size:10px;min-width:0}.breadcrumb strong{max-width:240px;color:#455047;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.crumb-slash{color:#c8cec9}.toolbar-actions{gap:6px}.toolbar .button{height:30px;padding:0 10px;font-size:10px}.analyze-button{background:var(--green-pale);color:#265f43;border:1px solid #dbeadd;border-radius:6px;font-weight:650;cursor:pointer}.analyze-button:disabled{opacity:.5;cursor:not-allowed}.analyze-button:hover:not(:disabled){background:#e0efe4}.toolbar-divider{height:19px;width:1px;background:var(--line);margin:0 4px}.zoom-label{min-width:39px;text-align:center;color:#7b857d;font-size:10px}.toolbar .square-button{height:28px;width:28px;font-size:14px}.canvas-area{position:relative;flex:1;min-height:0;overflow:auto;display:flex;align-items:flex-start;justify-content:center;padding:30px 24px 42px;background:var(--canvas)}.welcome{width:min(430px,100%);align-self:center;text-align:center;transform:translateY(-10px)}.welcome.hidden{display:none}.welcome-icon{width:54px;height:54px;margin:0 auto 17px;border:1px solid #dceadf;border-radius:16px;background:#eaf4ed;color:#377151;display:grid;place-items:center;font-size:25px}.welcome .eyebrow{margin:0 0 8px}.welcome h2{margin:0;color:#29332c;font-size:22px;line-height:1.28;letter-spacing:-.75px;font-weight:730}.welcome p:not(.eyebrow):not(.file-note){max-width:350px;margin:10px auto 18px;color:#7e8980;font-size:12px;line-height:1.65}.welcome .button{height:36px}.file-note{margin-top:11px;color:#a1a9a1;font-size:9px}.page-wrap{position:relative;width:min(100%,920px);margin:0 auto;flex:0 0 auto;background:#fff;box-shadow:var(--shadow);line-height:0}.page-wrap.hidden{display:none}.page-wrap img{display:block;width:100%;height:auto;user-select:none}.overlay,.region-overlay,.preview-overlay{position:absolute;inset:0;pointer-events:none}.region-overlay{z-index:1}.preview-overlay{z-index:2;line-height:normal}.overlay{z-index:3}.preview-patch,.preview-text,.preview-image{position:absolute;pointer-events:none}.preview-patch{inset:auto}.preview-text{overflow:hidden;overflow-wrap:anywhere;white-space:pre-wrap;padding:0;margin:0;user-select:none;text-rendering:geometricPrecision}.preview-image{display:block;object-fit:fill;user-select:none;-webkit-user-drag:none}.text-hitbox{position:absolute;pointer-events:auto;border:1px solid transparent;border-radius:1px;background:transparent;padding:0;cursor:pointer;min-width:2px;min-height:2px;touch-action:none;user-select:none}.text-hitbox:hover{border-color:#4b83d1a8;background:#4b83d114}.text-hitbox.active{border:1.5px solid #347451;background:#3983571c;box-shadow:0 0 0 1px #fff9;cursor:move}.text-hitbox.image-hitbox{z-index:2;border:1px dashed #4678a7;background:#4b83d11a}.text-hitbox.image-hitbox.active{border:2px solid #347451;background:#3983572e}.text-hitbox.background-image-hitbox{z-index:0;border-color:transparent;background:transparent}.text-hitbox.background-image-hitbox:hover,.text-hitbox.background-image-hitbox.active{border-color:#347451;background:#39835712}.text-hitbox:not(.background-image-hitbox):not(.image-hitbox){z-index:3}.text-hitbox.deleted{display:none}.region-hitbox{position:absolute;border:1px dashed #518263;background:#63a57613;box-shadow:0 0 0 1px #fff9;pointer-events:none}.statusbar{height:29px;flex:0 0 auto;display:flex;align-items:center;gap:9px;padding:0 13px;background:#fff;border-top:1px solid var(--line);color:#8b958d;font-size:9px}.statusbar .privacy-dot{width:6px;height:6px;box-shadow:none}.status-message{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.status-message.error{color:var(--red)}.status-message.busy{color:#416c50}.status-spacer{flex:1}.model-status{max-width:45%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#9ba49d;font-size:8px}.inspector-heading{position:relative;padding:19px 16px 15px;border-bottom:1px solid var(--line)}.inspector-heading h2{margin:9px 0 4px;font-size:15px;letter-spacing:-.3px}.inspector-heading p{margin:0;color:#919a92;font-size:10px;line-height:1.5}.clear-selection{position:absolute;right:11px;top:13px;width:24px;height:24px;border:0;border-radius:5px;background:transparent;color:#8e9990;font-size:18px;line-height:1;cursor:pointer}.clear-selection:hover{background:#f2f5f2;color:#47524a}.selection-badge{float:right;margin-right:25px;margin-top:-1px;padding:4px 7px;border:1px solid #e7ebe7;border-radius:99px;color:#939c94;font-size:8px}.selection-badge.has-selection{background:#eef6f0;border-color:#dfece2;color:#397052}.inspector-content{flex:1;min-height:0;overflow:auto;padding:15px 16px}.inspector-content.empty-inspector{display:flex;align-items:flex-start;justify-content:center}.inspector-empty{padding:25px 15px;color:#9ba49c;text-align:center;font-size:10px;line-height:1.5}.inspector-empty.hidden{display:none}.empty-target{width:35px;height:35px;margin:0 auto 9px;display:grid;place-items:center;border:1px solid #e6eae6;border-radius:10px;color:#859188;font-size:16px}.inspector-empty p{margin:0}.original-text-card{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:29px;padding:0 9px;border-radius:5px;background:#f6f8f5}.field-caption{font-size:8px;letter-spacing:.8px;font-weight:700;color:#8e9990}.source-label{font-size:9px;color:#7e8980}.field-label{display:block;margin:14px 0 6px;color:#68736a;font-size:10px;font-weight:650}.inspector-content textarea,.inspector-content input[type=number],.batch-panel input[type=text]{width:100%;border:1px solid #dfe5df;border-radius:6px;padding:8px 9px;background:#fff;color:#303a33;font-size:11px;outline:none}.inspector-content textarea{resize:vertical;min-height:83px;line-height:1.5}.inspector-content textarea:focus,.inspector-content input:focus,.batch-panel input:focus{border-color:#94b29c;box-shadow:0 0 0 2px #edf5ef}.inspector-content :disabled,.batch-panel :disabled{opacity:.58;cursor:not-allowed}.control-section{margin-top:17px;padding-top:14px;border-top:1px solid #edf0ed}.control-section .section-heading{margin-bottom:1px}.inspector-content select{font-size:10px}.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.field-grid input[type=number]{height:31px}.field-grid input[type=color]{width:100%;height:31px;padding:3px;border:1px solid #dfe5df;border-radius:6px;background:#fff}.unit-input{position:relative;display:block}.unit-input input{padding-right:27px!important}.unit-input span{position:absolute;right:8px;top:9px;color:#a1aaa2;font-size:9px}.toggle-row{display:flex;gap:18px;margin:12px 0;color:#647067;font-size:10px}.toggle-row label{display:flex;align-items:center;gap:5px;cursor:pointer}.toggle-row input{margin:0;accent-color:var(--green)}.advanced-controls{margin-top:9px;padding:11px 0 2px;border-top:1px solid #edf0ed}.advanced-controls summary{color:#758077;font-size:10px;font-weight:600;cursor:pointer}.advanced-controls .field-grid{margin-top:8px}.font-info{margin-top:7px;color:#89948a;font-size:9px;line-height:1.45;overflow-wrap:anywhere}.image-controls{padding:8px 0 1px;color:#758077;font-size:10px;line-height:1.5}.image-controls p,.multi-controls p{margin:4px 0 9px}.aspect-lock{display:flex;align-items:center;gap:6px;color:#657067;font-size:10px}.aspect-lock input{margin:0;accent-color:var(--green)}.multi-controls{padding:12px 0;color:#657067;font-size:10px}.multi-controls .delete-button{margin-top:4px}.item-details{display:flex;justify-content:space-between;gap:7px;margin-top:13px;color:#949e95;font-size:8px}.delete-button{width:100%;height:32px;margin-top:16px;border:1px solid #efdfdc;border-radius:6px;background:#fff;color:var(--red);font-size:10px;font-weight:600;cursor:pointer}.delete-button:hover:not(:disabled){background:#fff8f7}.batch-panel{flex:0 0 auto;padding:14px 16px 16px;border-top:1px solid var(--line);background:#fbfcfb}.batch-panel p{margin:6px 0 10px;color:#919a92;font-size:9px}.batch-panel input[type=text]{height:31px;margin-bottom:7px;font-size:10px}.batch-panel .full-width{width:100%;height:31px;font-size:10px}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}@media(max-width:1080px){.app-shell{grid-template-columns:245px minmax(360px,1fr) 270px}.document-heading{padding-left:14px;padding-right:14px}.toolbar{padding:0 11px}.breadcrumb{display:none}.toolbar{justify-content:flex-end}.canvas-area{padding-left:17px;padding-right:17px}.inspector-heading,.inspector-content,.batch-panel{padding-left:13px;padding-right:13px}}@media(max-width:820px){body{min-width:340px}.app-shell{grid-template-columns:220px minmax(300px,1fr)}.right-panel{position:fixed;z-index:4;right:0;top:62px;bottom:0;width:min(310px,86vw);box-shadow:-12px 0 32px #1720171a;transform:translateX(0);transition:transform .18s}.right-panel:has(.empty-inspector:not(.hidden)){transform:translateX(calc(100% - 38px));opacity:.97}.right-panel:has(.empty-inspector:not(.hidden)):hover{transform:translateX(0)}.workspace{grid-column:2}.toolbar-actions{gap:4px}.toolbar .button{padding:0 7px}}@media(max-width:580px){.topbar{height:56px;padding:0 11px}.app-shell{height:calc(100vh - 56px);grid-template-columns:1fr;grid-template-rows:minmax(120px,30vh) 1fr}.left-panel{grid-row:1;border:0;border-bottom:1px solid var(--line)}.document-heading{padding:9px 13px 7px}.document-heading h1{margin:4px 0 2px;font-size:12px}.document-heading p{font-size:9px}.page-section{padding:7px 13px}.page-navigation{display:flex;margin-top:5px}.page-navigation select{flex:1;height:27px}.page-navigation .square-button{height:27px;width:27px}.region-section{display:none}.text-section{min-height:0;padding:8px 13px 4px}.search-field{height:27px;margin:5px 0 4px}.selection-toolbar{padding-bottom:2px}.object-list{display:flex;gap:5px;max-height:40px;overflow:auto}.object-row{min-width:160px;border:1px solid #edf0ed;padding-right:4px}.object-item{font-size:9px}.sidebar-footer{display:none}.workspace{grid-column:1;grid-row:2}.toolbar{height:43px;padding:0 8px}.toolbar .button{height:28px;font-size:9px}.toolbar-divider{margin:0 2px}.toolbar .square-button{height:26px;width:26px}.canvas-area{padding:13px 9px 24px}.statusbar{height:27px;padding:0 8px}.status-message{font-size:8px}.model-status{max-width:38%}.right-panel{top:56px;bottom:0;width:min(300px,88vw)}.welcome h2{font-size:19px}.welcome p:not(.eyebrow):not(.file-note){font-size:11px}}
:root{--live-preview-bg:#eaf4ed;--live-preview-border:#d1e5d7;--live-preview-ink:#2b6849}.preview-state{position:absolute;right:10px;top:10px;z-index:4;max-width:calc(100% - 20px);padding:6px 9px;border:1px solid var(--live-preview-border);border-radius:6px;background:#ffffffed;color:var(--live-preview-ink);font:600 10px/1.3 Inter,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;box-shadow:0 2px 8px #18251b18;pointer-events:none}
.tools-section{display:grid;grid-template-columns:1fr;gap:6px;padding-top:9px;padding-bottom:9px}.tools-section>.section-heading{margin-bottom:1px}.tools-section select{height:28px;width:100%;border:1px solid var(--line);border-radius:6px;background:#fff;padding:0 7px;color:#414941;font-size:10px}.tool-buttons{display:grid;grid-template-columns:1fr 1fr;gap:6px}.tool-button{height:28px;border:1px solid #dfe5df;border-radius:6px;background:#fff;color:#42604b;font-size:10px;font-weight:650;cursor:pointer}.tool-button:hover:not(:disabled),.tool-button.active{border-color:#b9d1bf;background:#edf6ef;color:#2f6e4b}.tool-button:disabled{opacity:.45;cursor:not-allowed}.behind-content{display:flex;align-items:center;gap:5px;color:#68736a;font-size:9px}.behind-content input{margin:0;accent-color:var(--green)}.tool-hint{margin:0;color:#919a92;font-size:8px;line-height:1.35}.page-wrap.place-text-mode,.page-wrap.place-image-mode{cursor:crosshair}.text-hitbox.selected-image-hitbox{overflow:visible}.resize-handle{position:absolute;right:-6px;bottom:-6px;width:13px;height:13px;border:2px solid #fff;border-radius:4px;background:#347451;box-shadow:0 1px 4px #15271d80;cursor:nwse-resize;touch-action:none;z-index:8}.resize-handle:focus-visible{outline:2px solid #4b83d1;outline-offset:2px}.table-move-hitbox:focus-visible{outline:3px solid #4b83d1;outline-offset:2px}
@media(max-width:580px){.app-shell{grid-template-rows:minmax(210px,40vh) 1fr}.left-panel{overflow-y:auto}.tools-section{grid-template-columns:1fr 1fr;padding:5px 13px}.tools-section>.section-heading,.tools-section select,.tool-hint{grid-column:1/-1}.tools-section>.section-heading{margin-bottom:0}.tools-section .tool-buttons{grid-column:1}.tools-section .behind-content{grid-column:2;align-self:center}.tools-section .tool-button{height:25px}.tools-section .behind-content{font-size:8px}}
.selected-image-hitbox::after{content:"";position:absolute;right:-6px;bottom:-6px;width:13px;height:13px;border:2px solid #fff;border-radius:4px;background:#347451;box-shadow:0 1px 4px #15271d80;pointer-events:none}
.left-panel{overflow-y:auto;overflow-x:hidden}
.view-toggle{height:28px;padding:0 9px;border:1px solid #e1e5e0;border-radius:6px;background:#fff;color:#667168;font-size:10px;font-weight:600;cursor:pointer;white-space:nowrap}.view-toggle:hover:not(:disabled),.view-toggle.active{border-color:#b9d1bf;background:#edf6ef;color:#2f6e4b}.view-toggle:disabled{opacity:.45;cursor:not-allowed}.grid-overlay{position:absolute;inset:0;z-index:1;pointer-events:none;background-image:linear-gradient(to right,#4c79501e 1px,transparent 1px),linear-gradient(to bottom,#4c79501e 1px,transparent 1px);background-size:var(--grid-step) var(--grid-step)}.original-overlay{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:visible}.original-position-marker{position:absolute;border:1px dashed #cf7139;background:#ed9a3512;box-shadow:0 0 0 1px #fff9}.original-position-marker::after{content:attr(data-label);position:absolute;left:-1px;top:-16px;padding:2px 5px;border-radius:3px;background:#a65328;color:#fff;font:600 8px/1.2 Inter,"Segoe UI",sans-serif;white-space:nowrap}.font-search{height:30px;width:100%;margin:0 0 6px;padding:0 8px;border:1px solid #dfe5df;border-radius:6px;background:#fff;color:#303a33;font-size:10px;outline:none}.font-search:focus{border-color:#94b29c;box-shadow:0 0 0 2px #edf5ef}.font-info{padding:7px 8px;border-radius:5px;background:#f5f7f5}.font-info.font-estimated{background:#fff8ea;color:#81673a}.region-overlay{z-index:2}
@media(max-width:580px){.view-toggle{width:28px;padding:0;font-size:12px}.view-toggle span{display:none}.toolbar-actions{gap:3px}.analyze-button{max-width:91px;overflow:hidden;white-space:nowrap}}
.tools-section select{font-size:12px}.tool-button{font-size:11px}.tool-hint{font-size:9px;line-height:1.4}.object-item{font-size:11px}.search-field input{font-size:11px}.selection-toolbar{font-size:10px}.font-search{font-size:11px}.font-info{font-size:10px}

.rotation-control{margin-top:12px}.rotation-input-row{display:grid;grid-template-columns:92px 1fr;gap:7px;align-items:center}.rotation-presets{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}.rotation-presets button{height:31px;border:1px solid #dfe5df;border-radius:6px;background:#fff;color:#657067;font-size:9px;font-weight:650;cursor:pointer}.rotation-presets button:hover:not(:disabled){border-color:#b9d1bf;background:#edf6ef;color:#2f6e4b}.rotation-presets button:disabled{opacity:.45;cursor:not-allowed}.text-hitbox{transform-origin:center center}