.ruler-controls{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;margin-bottom:1.5rem}.unit-selector{display:flex;align-items:center;gap:.5rem}.unit-selector select{padding:.5rem;border-radius:6px;border:1px solid var(--border-color, #ddd);background:var(--bg-secondary, #f5f5f5);font-size:.875rem}.ppi-config{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;padding:1rem;background:var(--bg-secondary, #f5f5f5);border-radius:8px;margin-bottom:1rem}.ppi-config input{width:80px;padding:.5rem;border-radius:6px;border:1px solid var(--border-color, #ddd);text-align:center}.ppi-hint{font-size:.75rem;color:var(--text-secondary, #666)}.measurement-results{display:flex;flex-wrap:wrap;gap:1.5rem;padding:1rem;background:var(--bg-secondary, #f5f5f5);border-radius:8px;margin-bottom:1rem}.result-item{display:flex;flex-direction:column;gap:.25rem}.result-label{font-size:.75rem;color:var(--text-secondary, #666);text-transform:uppercase}.result-value{font-size:1.5rem;font-weight:600;color:var(--primary, #4361ee)}.measure-area{position:relative;width:100%;min-height:400px;border:2px dashed var(--border-color, #ddd);border-radius:8px;background:var(--bg-secondary, #f8f9fa);cursor:default;overflow:hidden;margin-bottom:1.5rem}.measure-area.active{border-color:var(--primary, #4361ee);cursor:crosshair;background:linear-gradient(45deg,transparent 48%,var(--border-color, #e0e0e0) 49%,var(--border-color, #e0e0e0) 51%,transparent 52%);background-size:20px 20px}.placeholder-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;color:var(--text-secondary, #666)}.placeholder-text p{margin:.5rem 0}.start-marker,.end-marker{position:absolute;width:12px;height:12px;background:var(--primary, #4361ee);border:2px solid white;border-radius:50%;transform:translate(-50%,-50%);z-index:10;box-shadow:0 2px 4px #0003}.end-marker{background:var(--success, #22c55e)}.measure-line{position:absolute;height:2px;background:var(--primary, #4361ee);z-index:5}.measure-box{position:absolute;border:1px dashed var(--primary, #4361ee);background:#4361ee0d;z-index:4;pointer-events:none}.ruler-edge{position:absolute;background:var(--bg-secondary, rgba(255, 255, 255, .95));z-index:5}.ruler-edge.horizontal{top:-16px;left:0;right:0;height:16px;border-bottom:1px solid var(--primary, #4361ee);display:flex}.ruler-edge.vertical{left:-16px;top:0;bottom:0;width:16px;border-right:1px solid var(--primary, #4361ee)}.area-ruler-edge{position:absolute;background:var(--bg-secondary, rgba(255, 255, 255, .95));z-index:3;pointer-events:none}.area-ruler-edge.horizontal{top:0;left:20px;right:0;height:20px;border-bottom:1px solid var(--primary, #4361ee)}.area-ruler-edge.vertical{left:0;top:20px;bottom:0;width:20px;border-right:1px solid var(--primary, #4361ee)}.ruler-tick{position:absolute;background:var(--primary, #4361ee)}.ruler-edge.horizontal .ruler-tick{width:1px;bottom:0}.ruler-edge.horizontal .ruler-tick.major{height:10px}.ruler-edge.horizontal .ruler-tick.minor{height:5px}.ruler-edge.vertical .ruler-tick{height:1px;right:0}.ruler-edge.vertical .ruler-tick.major{width:10px}.ruler-edge.vertical .ruler-tick.minor{width:5px}.area-ruler-edge.horizontal .ruler-tick{width:1px;bottom:0}.area-ruler-edge.horizontal .ruler-tick.major{height:12px}.area-ruler-edge.horizontal .ruler-tick.minor{height:6px}.area-ruler-edge.vertical .ruler-tick{height:1px;right:0}.area-ruler-edge.vertical .ruler-tick.major{width:12px}.area-ruler-edge.vertical .ruler-tick.minor{width:6px}.area-ruler-edge.horizontal .ruler-label{top:2px;left:3px;font-size:11px;font-weight:600;color:var(--primary, #4361ee);background:var(--bg-secondary, rgba(255, 255, 255, .9));padding:0 2px;border-radius:2px}.area-ruler-edge.vertical .ruler-label{left:2px;top:3px;writing-mode:vertical-lr;text-orientation:mixed;transform:rotate(180deg);font-size:11px;font-weight:600;color:var(--primary, #4361ee);background:var(--bg-secondary, rgba(255, 255, 255, .9));padding:0 2px;border-radius:2px}.ruler-label{position:absolute;font-size:10px;font-weight:500;color:var(--primary, #4361ee);white-space:nowrap;-webkit-user-select:none;user-select:none;background:var(--bg-secondary, rgba(255, 255, 255, .85));padding:0 2px;border-radius:2px}.ruler-edge.horizontal .ruler-label{top:1px;left:2px}.ruler-edge.vertical .ruler-label{left:1px;top:2px;writing-mode:vertical-lr;text-orientation:mixed;transform:rotate(180deg)}.info-box{background:var(--bg-secondary, #f5f5f5);border-radius:8px;padding:1rem;margin-bottom:1rem}.info-box h4{margin:0 0 .75rem;font-size:1rem}.info-box ul{margin:0;padding-left:1.25rem}.info-box li{margin:.25rem 0;color:var(--text-secondary, #666);font-size:.875rem}.privacy-note{text-align:center;padding:.75rem;background:#4caf501a;color:var(--success, #4caf50);border-radius:8px;font-size:.875rem}@media(max-width:640px){.ruler-controls{flex-direction:column;align-items:stretch}.measurement-results{flex-direction:column;gap:.75rem}.result-item{flex-direction:row;justify-content:space-between;align-items:center}.result-value{font-size:1.25rem}.measure-area{min-height:300px}}