.workspace{grid-template-columns:250px minmax(0,1fr);gap:24px;padding-left:26px;padding-right:26px;max-width:1800px}.image-tools{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;background:#202b36;border-bottom:1px solid #34404a;padding:9px 12px}.tool-group{display:flex;align-items:center;gap:3px}.image-tools button{background:none;border:1px solid transparent;color:#acbac7;font-size:10px;padding:7px;border-radius:5px;white-space:nowrap}.image-tools button span{font-size:16px;vertical-align:-1px;margin-right:3px}.image-tools button:hover{background:#34414d;color:white}.image-tools button[aria-pressed=true],#displayToggle[aria-expanded=true]{background:#35534f;color:#c3f0df;border-color:#476c61}.view-tools{gap:0}.view-tools button{padding:7px 6px}#zoomLevel{font-size:10px;min-width:42px;text-align:center;color:#a8b8c5}.image-workspace{display:flex;min-width:0}.image-stage{flex:1;min-width:0;padding:0;overflow:hidden;touch-action:none;outline-offset:-3px;cursor:grab}.image-stage[data-tool=rect],.image-stage[data-tool=ellipse],.image-stage[data-tool=polygon],.image-stage[data-tool=line]{cursor:crosshair}.image-plane{position:absolute;top:0;left:0;transform-origin:0 0;will-change:transform}.image-plane #canvas{width:100%;height:100%;max-width:none;max-height:none;box-shadow:none}.roi-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:hidden}.image-dimensions{pointer-events:none;z-index:1;text-shadow:0 1px 4px #000}.display-panel{flex:0 0 248px;padding:17px;background:#f9fbfa;color:#37454d;border-left:1px solid #dce3e3;font-size:11px}.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}.panel-heading h2{margin:0;font-size:12px}.panel-heading button{background:none;border:0;color:#7a8790;font-size:13px;padding:3px 5px}.display-panel input[type=number]{height:33px;padding:7px;font-size:11px}.display-range{grid-template-columns:1fr 1fr;gap:8px}.display-slider{margin-top:16px;font-size:11px}.display-slider input{width:100%;height:4px;accent-color:#127a67;margin:8px 0}.display-actions{display:flex;gap:8px;margin:18px 0}.display-actions button{flex:1;padding:7px;background:white;border:1px solid #dce5e1;border-radius:5px;color:#45595a;font-size:11px}.display-panel select{margin-bottom:9px;height:34px;font-size:11px}.check-label{flex-direction:row;align-items:center;gap:7px;margin:8px 0}.check-label input{accent-color:#127a67}.display-note{font-size:10px;line-height:1.6;color:#82928c;margin-top:20px}#displayError{font-size:10px;color:#b44e44}#histogram{width:100%;height:82px;background:#e8eeea;border-radius:4px;box-shadow:none}.hist-labels{display:flex;justify-content:space-between;font-size:9px;color:#7b8c83;margin:6px 0 18px}.image-readout{background:#18212a;border-top:1px solid #263440;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:9px 15px;font-size:10px;color:#8fa3b3;font-variant-numeric:tabular-nums;min-height:31px}#pixelReadout{white-space:pre-wrap}#toolHint{color:#6f8494}.frame-jump input[type=number]{width:64px;background:#202c36;color:#b7c6d0;border-color:#35434f;font-size:11px;height:29px;padding:4px 6px}.frame-jump input:disabled{opacity:.35}.analysis-panel{margin-top:18px;background:white;border:1px solid #e2e7eb;border-radius:10px;overflow:hidden}.analysis-panel>summary{padding:17px 20px;font-size:13px;font-weight:550;color:#465866}.analysis-panel>summary>span:first-child{float:none;font-size:13px;color:#465866}.analysis-panel>summary>span:last-child{font-size:10px;font-weight:400;color:#8594a1}.analysis-body{display:grid;grid-template-columns:194px minmax(0,1fr);border-top:1px solid #edf0f2}.roi-manager{padding:16px;border-right:1px solid #edf0f2}.roi-manager label{margin-top:12px}.roi-manager input{width:100%;min-width:0;height:30px;border:1px solid #dce3e8;border-radius:5px;padding:6px;font-size:11px}.roi-manager .secondary{height:31px;margin-top:16px;font-size:10px}.roi-manager .text-button{font-size:10px}.roi-item{width:100%;display:flex;align-items:center;gap:6px;border:1px solid transparent;border-radius:5px;background:none;padding:8px 5px;color:#4b5b68;text-align:left}.roi-item[aria-pressed=true]{background:#f0f6f3;border-color:#d8e8de}.roi-item i{width:7px;height:7px;border-radius:50%;flex-shrink:0}.roi-item span{font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.roi-item small{margin-left:auto;font-size:9px;color:#92a09f;white-space:nowrap}#roiList{max-height:235px;overflow:auto}#roiList p{font-size:11px;color:#8d9a9f}.measurement-chart{min-width:0;padding:17px 20px}.chart-header{display:flex;align-items:center;justify-content:space-between;gap:8px}.chart-header button{background:none;border:0;color:#8a98a3;font-size:11px;padding:7px 10px}.chart-header button[aria-selected=true]{color:#127a67;background:#edf6f2;border-radius:5px}.measurement-chart svg{width:100%;height:auto;min-height:180px;margin-top:13px;display:block}.measurement-chart p{color:#82919d;font-size:10px;line-height:1.6;margin:10px 0 0}.viewer-card:fullscreen .image-workspace{flex:1;min-height:0}.viewer-card:fullscreen .image-stage{height:auto}.viewer-card:fullscreen .image-plane #canvas{max-height:none}#emptyState{padding:20px;pointer-events:none}
@media(max-width:1200px){.workspace{grid-template-columns:225px minmax(0,1fr);gap:18px;padding:22px}.display-panel{flex-basis:220px;padding:13px}.image-tools button{font-size:9px;padding:6px 4px}.analysis-body{grid-template-columns:170px minmax(0,1fr)}.metrics strong{font-size:16px}}@media(max-width:850px){.image-workspace{flex-wrap:wrap}.display-panel{flex-basis:100%;border-left:0;border-top:1px solid #dce3e3;display:grid;grid-template-columns:1fr 1fr;gap:10px 16px}.display-panel .panel-heading,.display-panel .display-note,.display-panel #displayError{grid-column:1/-1}.display-panel .hist-labels{margin:0;align-items:center}.display-panel .display-actions{margin:0;align-items:center}.display-panel .display-slider{margin:0}.display-panel .display-note{margin:0}.analysis-body{grid-template-columns:1fr}.roi-manager{border-right:0;border-bottom:1px solid #edf0f2}#roiList{display:flex;flex-wrap:wrap;gap:6px;max-height:120px}.roi-item{width:auto}.roi-manager #selectionSettings{display:flex;align-items:end;gap:10px}.roi-manager #selectionSettings label{max-width:140px}.measurement-chart{padding:14px}.image-readout{font-size:9px}#toolHint{display:none}}@media(max-width:720px){.workspace{grid-template-columns:1fr;padding:18px 14px}.image-tools{padding:8px;gap:4px}.tool-group{flex-wrap:wrap}.image-tools button{font-size:10px;padding:6px 5px}.image-stage{height:390px;flex-basis:100%}.analysis-panel>summary>span:last-child{float:none;display:block;margin-top:7px}.playback{gap:7px}#frameLabel{min-width:68px;font-size:9px}.frame-jump input[type=number]{width:51px}#slider{min-width:25px}.measurement-chart svg{min-height:135px}.viewer-toolbar>div:first-child{min-width:0}#viewTitle{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:165px}}
.workspace{padding-top:16px;padding-bottom:16px;max-width:none;grid-template-columns:210px minmax(0,1fr);gap:20px}
.sidebar-title p{margin-bottom:18px}.sidebar-title h1{font-size:20px}.sidebar .control-section{padding:15px 0}.sidebar-footer{padding-top:18px}
.view-column{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:14px;align-items:start}
.viewer-card{grid-column:1;grid-row:1}.metrics{grid-column:1;grid-row:2;margin-top:0;padding:14px 0}
.metrics>div{padding:0 14px}.metrics strong{font-size:16px}
.image-stage{height:clamp(300px,calc(100dvh - 300px),780px)}
.image-workspace{position:relative}.display-panel{position:absolute;right:0;top:0;bottom:0;width:230px;z-index:3;overflow-y:auto;box-shadow:-8px 0 24px #0002}
.analysis-panel{grid-column:2;grid-row:1 / span 2;margin:0;position:sticky;top:16px;max-height:calc(100dvh - 32px);overflow:auto}
.analysis-panel>summary{padding:16px}.analysis-panel>summary>span:last-child{float:none;display:block;margin-top:5px}
.analysis-body{display:flex;flex-direction:column}.measurement-chart{order:0;padding:14px 12px;border-bottom:1px solid #edf0f2}.measurement-chart svg{height:240px;min-height:0;margin-top:6px}.measurement-chart p{font-size:10px}
.chart-header button{padding:7px 8px}.roi-manager{order:1;border-right:0;padding:14px}.roi-manager #roiList{max-height:145px}
.roi-manager #selectionSettings{display:flex;flex-wrap:wrap;align-items:end;gap:8px}.roi-manager #selectionSettings label{flex:1;min-width:90px}.roi-manager #removeRoi{padding-bottom:8px}.roi-manager .secondary{margin-top:10px}
@media(max-width:1100px){.workspace{grid-template-columns:190px minmax(0,1fr);padding:16px;gap:16px}.view-column{grid-template-columns:minmax(0,1fr)}.analysis-panel{grid-column:1;grid-row:3;position:static;max-height:none}.analysis-body{display:grid;grid-template-columns:180px minmax(0,1fr)}.roi-manager{order:0}.measurement-chart{order:1;border-left:1px solid #edf0f2}.image-stage{height:clamp(300px,48vh,520px)}}
@media(max-width:850px){.display-panel{display:block;position:absolute;width:220px;border-top:0}.display-panel .display-slider{margin:16px 0}.display-panel .display-actions{margin:15px 0}.analysis-body{grid-template-columns:1fr}.measurement-chart{order:0;border-left:0}.roi-manager{order:1}.roi-manager #roiList{max-height:120px}}
@media(max-width:720px){.workspace{grid-template-columns:1fr;padding:14px}.image-stage{height:390px}.view-column{gap:12px}.analysis-panel>summary{padding:14px}.metrics>div{padding:0 12px}}
.loading-mode{margin-top:14px}.loading-mode .field-note:empty{display:none}.loading-mode select{font-size:12px}