.ruler-controls .button{width:100%;min-height:44px;height:auto;padding:11px 12px;white-space:normal;line-height:1.5}
.ruler-controls .control-hint{font-size:12px;line-height:1.6}
#ruler-point-info{white-space:pre-line;overflow-wrap:anywhere}
.ruler-controls .toggle-row{gap:12px;margin-top:14px;min-height:44px}
.ruler-mode{margin-top:14px}.ruler-mode select,.ruler-quick-mode select{width:100%;min-width:0;min-height:44px;padding:8px;border:1px solid var(--line);border-radius:7px;background:var(--surface);color:var(--ink);font:inherit;font-size:13px}
.ruler-quick-mode{display:flex;align-items:center;gap:8px;margin:8px 0;font-size:12px;text-align:left}.ruler-quick-mode select{flex:1}
.ruler-controls [aria-pressed=true]{background:var(--green);color:#fff;border-color:var(--green)}
.ruler-controls button:disabled,.ruler-tools button:disabled{cursor:default}
.ruler-picking canvas{cursor:crosshair}
.ruler-result{padding:16px;margin:16px 0;border:1px solid var(--line);border-radius:10px;background:var(--soft)}
.ruler-result>span{font-size:12px}.ruler-result>strong{display:block;margin:8px 0 14px;font-size:26px;color:var(--green);overflow-wrap:anywhere}
.ruler-result dl{display:grid;gap:8px;margin:0;font-size:12px}.ruler-result dl>div{display:flex;justify-content:space-between;gap:10px}.ruler-result dd{margin:0;font-variant-numeric:tabular-nums}
.ruler-tools{position:absolute;z-index:4;bottom:119px;left:50%;transform:translateX(-50%);width:400px;max-width:calc(100% - 24px);padding:12px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 5px 24px #3b301317;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.ruler-tools[hidden]{display:none}
.ruler-readout{grid-column:1/-1;grid-row:1;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:38px}
.ruler-readout>strong{font-size:18px;color:var(--green);white-space:nowrap;flex-shrink:0}
.ruler-bindings{display:flex;flex-direction:column;gap:2px;min-width:0;font-size:12px;line-height:18px;color:var(--ink)}
.ruler-quick-mode{grid-column:1;grid-row:2;margin:0;min-width:0}
.ruler-mode-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.ruler-tool-actions{grid-column:2;grid-row:2;display:flex;gap:8px}
.ruler-tool-actions .button{min-width:44px;min-height:44px;height:auto;padding:8px 12px;font-size:12px}
#ruler-clear-in-view{width:44px;padding:8px}#ruler-clear-in-view>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.ruler-tools>p{grid-column:1/-1;grid-row:3;font-size:12px;line-height:1.5;margin:0;color:var(--muted)}
.model-ruler{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;overflow:hidden;color:#9b4b0b}.model-ruler[hidden]{display:none}
.model-ruler path{fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke}.model-ruler .ruler-line-halo{stroke:#fff;stroke-width:6}.model-ruler .ruler-line{stroke:currentColor;stroke-width:2.5}
.model-ruler circle{fill:currentColor;stroke:#fff;stroke-width:2}.model-ruler text{fill:currentColor;font:600 14px Arial,sans-serif;text-anchor:middle;dominant-baseline:central;paint-order:stroke;stroke:#fff;stroke-width:3;stroke-linejoin:round}.model-ruler rect{fill:#fff;stroke:currentColor;stroke-width:1}
.model-ruler .ruler-preview circle{fill:#fff;stroke:currentColor;stroke-width:2;stroke-dasharray:3 2}.model-ruler .ruler-preview text{font-size:12px}
@media(max-width:900px){
  .ruler-readout{grid-row:2}.ruler-readout>strong{font-size:17px}
  .ruler-quick-mode,.ruler-tool-actions{grid-row:1}
  .ruler-quick-mode select{font-size:16px}
  .ruler-tools>p{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .ruler-tools.has-message>p{position:static;width:auto;height:auto;overflow:visible;clip-path:none;color:var(--ink)}
}
@media(max-height:650px) and (min-width:901px){.ruler-tools{bottom:89px}}