.measurement-tool { min-width:0; }
.measurement-columns { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px; }
.measurement-panel { min-width:0;padding:20px;border:1px solid var(--border);border-radius:20px;background:var(--surface); }
.measurement-panel legend { padding:0 8px; }
.measurement-panel h2,.measurement-result h2 { margin:0;font-size:1rem;line-height:1.5; }
.measurement-panel > .tool-note { margin-top:10px; }
.measurement-field { display:flex;flex-direction:column;gap:8px;margin:0 0 16px;min-width:0;color:var(--muted);font-size:.8125rem;font-weight:700; }
.measurement-field input:not([type=range]),.measurement-field select { display:block;box-sizing:border-box;min-width:0;width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:var(--bg);color:var(--ink);font:inherit;font-size:1rem; }
.measurement-field input[type=range] { width:100%;min-height:36px;margin:0;accent-color:var(--accent); }
.measurement-field input[aria-invalid=true] { border-color:#b75046; }
.measurement-pair { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px; }
.measurement-unit { width:min(240px,100%);margin-top:20px; }
.measurement-toolbar { display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:16px;margin:20px 0 0; }
.measurement-toolbar .measurement-unit { width:min(200px,100%);margin:0; }
.measurement-view-options { display:flex;flex-wrap:wrap;gap:8px; }
.measurement-view-options button { min-height:44px; }
.measurement-view-options button[aria-pressed=true] { color:var(--accent);background:var(--mint-soft);border-color:var(--ring); }
.measurement-legend { display:flex;justify-content:center;flex-wrap:wrap;gap:10px 24px;margin-top:24px;color:var(--muted);font-size:.8125rem;font-weight:700; }
.measurement-legend span { display:inline-flex;align-items:center;gap:8px; }
.measurement-legend span::before { content:'';width:20px;border-top:2px solid var(--accent); }
.measurement-legend .measurement-legend-1::before { border-color:var(--muted);border-top-style:dashed; }
.measurement-error { margin:8px 0 12px;color:#b75046;font-size:.875rem;line-height:1.6; }
.measurement-error:empty { display:none; }
.measurement-comparison { display:block;width:100%;max-height:310px;overflow:visible;margin-top:24px; }
.measurement-display-0 { fill:var(--mint);stroke:var(--accent);stroke-width:1.5;vector-effect:non-scaling-stroke; }
.measurement-display-1 { fill:var(--soft);stroke:var(--muted);stroke-width:1.5;vector-effect:non-scaling-stroke; }
.measurement-comparison[data-layout=overlay] .measurement-display-0 { fill:var(--accent);fill-opacity:.12; }
.measurement-comparison[data-layout=overlay] .measurement-display-1 { fill:var(--muted);fill-opacity:.12;stroke-dasharray:6 4; }
.measurement-display-label { fill:var(--ink);font-weight:800; }
.measurement-caption { margin:12px 0 20px;color:var(--muted);font-size:.8125rem;line-height:1.65; }
.measurement-summary { margin:20px 0;color:var(--accent);font-weight:700;line-height:1.65; }
.measurement-result { padding:20px;border-radius:18px;background:var(--surface);border:1px solid var(--border); }
.measurement-result dl { margin:12px 0 0; }
.measurement-result dl > div { display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 12px;margin-top:9px;font-size:.875rem; }
.measurement-result dt { color:var(--muted); }
.measurement-result dd { margin:0;font-weight:700;font-variant-numeric:tabular-nums; }
.measurement-adjust { margin:0 0 16px; }
.measurement-adjust button { min-width:80px; }
.measurement-reference-scroll { overflow:auto;max-width:100%;padding:8px 0 16px; }
.measurement-reference { box-sizing:border-box;display:flex;align-items:center;justify-content:center;flex-shrink:0;width:280px;height:92px;border-left:2px solid var(--accent);border-right:2px solid var(--accent);border-top:1px dashed var(--accent);border-bottom:1px dashed var(--accent);color:var(--accent);background:var(--mint-soft);font-weight:700;white-space:nowrap; }
.measurement-reference > span { padding:8px;background:var(--mint-soft); }
.measurement-ruler-area { box-sizing:border-box;width:100%;max-width:100%;min-width:0;overflow:auto;border-radius:12px;background:var(--surface); }
.measurement-ruler { display:block;max-width:none;flex-shrink:0;color:var(--ink); }
.measurement-ruler line { stroke:currentColor;stroke-width:1;shape-rendering:crispEdges; }
.measurement-ruler text { fill:currentColor;font-family:inherit;font-size:12px; }
.measurement-ruler-vertical { max-height:520px; }
.measurement-tool [hidden] { display:none!important; }
@media(max-width:480px) {
  .measurement-toolbar { align-items:stretch;gap:12px; }
  .measurement-toolbar .measurement-unit { width:100%; }
  .measurement-view-options { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%; }
  .measurement-view-options button { padding:9px 6px; }
  .measurement-columns { gap:10px; }
  .measurement-panel,.measurement-result { padding:16px 12px; }
  .measurement-panel .measurement-pair { grid-template-columns:1fr;gap:0; }
  .measurement-field input:not([type=range]),.measurement-field select { padding:9px 8px; }
  .measurement-result dl > div { flex-direction:column;gap:4px; }
}