/* Custom polished range input track and thumb */
input[type=range] { -webkit-appearance: none; appearance: none; background: transparent; }
input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 9999px; background: #334155; cursor: pointer; }
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; height: 18px; width: 18px; border-radius: 50%;
  background: #3b82f6; border: 2px solid #ffffff; margin-top: -6px;
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.6); cursor: pointer; transition: transform 0.15s ease, background 0.15s;
}
input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.15); background: #60a5fa; }
input[type=range]::-moz-range-track { height: 6px; border-radius: 9999px; background: #334155; }
input[type=range]::-moz-range-thumb { height: 14px; width: 14px; border-radius: 50%; background: #3b82f6; border: 2px solid #fff; }

/* Subtle CAD coordinate background pattern */
.cad-viewport-grid {
  background-color: #3b506d;
  background-image:
    radial-gradient(circle at center, rgba(82, 110, 147, 0.4) 0%, rgba(30, 41, 59, 0.85) 100%),
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 100% 100%, 32px 32px, 32px 32px;
}
.perspective-grid {
  transform: perspective(600px) rotateX(60deg);
  background-image:
    linear-gradient(rgba(56, 189, 248, 0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 189, 248, 0.18) 1px, transparent 1px);
  background-size: 28px 28px;
}

/* Measurement button states (mockup: selected = sky border-2, others dimmed to 80%) */
.measure-btn[data-state="idle"] { opacity: .8; }
.measure-btn[data-state="drawing"] { opacity: 1; border-width: 2px; border-color: #0ea5e9 !important; background: rgb(8 47 73 / .6) !important; }
.measure-btn[data-state="used"] { opacity: 1; }

.toolbar-btn[aria-pressed="true"] { color: #38bdf8; background: rgb(30 41 59); }
#canvas { touch-action: none; }