.measurement-guide-tools { display:flex; justify-content:flex-end; margin:4px 0; }
.measurement-guide-tools button { border:1px solid #dce1e5; background:white; border-radius:4px; }
.measurement-zoom-dialog { width:min(1080px,calc(100vw - 32px)); height:min(880px,calc(100dvh - 32px)); padding:0; border:1px solid #d6dce1; border-radius:6px; color:#263238; background:white; }
.measurement-zoom-dialog::backdrop { background:rgb(8 15 18 / 65%); }
body:has(.measurement-zoom-dialog[open]) { overflow:hidden; }
.measurement-zoom-dialog[open] { display:flex; flex-direction:column; }
.measurement-zoom-dialog > header,.measurement-zoom-dialog > footer { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 18px; flex-shrink:0; }
.measurement-zoom-dialog > header { border-bottom:1px solid #e4e7eb; }
.measurement-zoom-dialog h2 { font-size:18px; margin:0; }
.measurement-zoom-dialog h3 { font-size:16px; margin:16px 0 10px; }
.measurement-zoom-dialog > footer { justify-content:flex-end; border-top:1px solid #e4e7eb; }
.measurement-zoom-dialog .icon-button { width:34px; height:34px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; padding:6px; border:1px solid #dce1e5; background:#fff; border-radius:4px; }
.measurement-zoom-dialog .icon-button svg,.measurement-guide-tools svg { width:18px; height:18px; }
.measurement-zoom-layout { flex:1; min-height:0; display:grid; grid-template-columns:minmax(0,1fr) 280px; }
.measurement-zoom-image { min-width:0; min-height:0; display:flex; flex-direction:column; background:#f4f6f7; }
.measurement-zoom-tools { display:flex; align-items:center; gap:8px; padding:8px 12px; background:#fff; border-bottom:1px solid #e4e7eb; }
.measurement-zoom-tools input { flex:1; width:0; min-width:40px; accent-color:#a57a03; }
.measurement-zoom-tools output { width:40px; font-size:12px; font-variant-numeric:tabular-nums; }
#measurement-zoom-canvas { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; }
#measurement-zoom-canvas .measurement-live-diagram { width:var(--measurement-zoom,100%); max-width:none; margin:0 auto; }
.measurement-zoom-detail { min-width:0; padding:18px; border-left:1px solid #e4e7eb; overflow-y:auto; font-size:13px; line-height:1.5; }
.measurement-zoom-detail label { display:grid; gap:7px; }
.measurement-zoom-detail select,.measurement-zoom-detail input { width:100%; min-width:0; padding:10px; background:white; color:#263238; border:1px solid #cfd8dc; border-radius:4px; font-size:14px; }
.measurement-zoom-detail input:focus { outline:2px solid #1769aa; outline-offset:1px; }
.measurement-zoom-detail input[aria-invalid=true] { border-color:#b42335; }
.measurement-zoom-detail input[aria-invalid=true]:focus { outline-color:#b42335; }
@media(max-width:700px) { .measurement-zoom-dialog { width:calc(100vw - 16px); height:calc(100dvh - 16px); }.measurement-zoom-layout { display:flex; flex-direction:column; overflow-y:auto; }.measurement-zoom-image { flex:1 0 46%; min-height:220px; }.measurement-zoom-detail { overflow:visible; border-left:0; border-top:1px solid #e4e7eb; padding:12px; }.measurement-zoom-detail input,.measurement-zoom-detail select { font-size:16px; }.measurement-zoom-detail h3 { margin:8px 0; }.measurement-zoom-detail p { margin:8px 0; } }