/* The HUD and settings previews share the same geometry and styling. */
#crosshair{pointer-events:none;filter:none;--gap:7px;--ring-scale:.7}
.crosshair-svg{position:absolute;left:50%;top:50%;margin:-128px 0 0 -128px;overflow:visible;pointer-events:none;color:var(--crosshair-color,#e6fff8)}
.crosshair-geometry{transform:scale(var(--crosshair-size,1))}
.crosshair-svg path,.crosshair-svg circle{fill:none;stroke:currentColor;stroke-width:var(--crosshair-thickness,2px);stroke-linecap:butt;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.crosshair-svg .crosshair-outline{color:#08151ee6}
.crosshair-outline path,.crosshair-outline circle{stroke-width:calc(var(--crosshair-thickness,2px) + 2px)}
.crosshair-svg .crosshair-dot{fill:currentColor;stroke-width:0}
.crosshair-outline .crosshair-dot{stroke-width:2px}
.crosshair-top{transform:translateY(calc(-1 * var(--gap,7px)))}
.crosshair-bottom{transform:translateY(var(--gap,7px))}
.crosshair-left{transform:translateX(calc(-1 * var(--gap,7px)))}
.crosshair-right{transform:translateX(var(--gap,7px))}
.crosshair-ring{transform:scale(var(--ring-scale,.7))}
.crosshair-settings{padding:18px;margin-bottom:14px;border:1px solid #77a6ba40;border-radius:8px;background:#0b23359c}
.crosshair-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:16px}
.crosshair-heading h3{font-size:12px;letter-spacing:1.5px;margin:0 0 8px;color:#e7f5f7}
.crosshair-heading p,.crosshair-note{font-size:10px;line-height:1.65;color:#a0bdca;margin:0}
.crosshair-preview{position:relative;flex:0 0 104px;height:76px;border:1px solid #7b9aa947;border-radius:6px;overflow:hidden;background:radial-gradient(ellipse at 70% 10%,#96a99e55,transparent 65%),linear-gradient(164deg,#304f5f 48%,#152d39 49%)}
.crosshair-presets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.crosshair-preset{min-height:74px;border:1px solid #8eb5c52b;border-radius:5px;background:#17374a;color:#bad0da;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:9px;padding:8px 4px}
.crosshair-preset:hover{background:#23495d;border-color:#9bcbd575}
.crosshair-preset[aria-pressed=true]{border-color:var(--mint);background:#1b464f;color:#e6fffa}
.crosshair-swatch{display:block;position:relative;width:44px;height:38px;overflow:hidden;--crosshair-size:1;--crosshair-thickness:2px}
.crosshair-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 22px;margin-top:12px}
.crosshair-options input[type=color]{width:38px;height:23px;padding:0;border:1px solid #8caab6;background:transparent;border-radius:3px;cursor:pointer}
.crosshair-colors{display:flex;gap:9px;margin-top:12px}
.crosshair-colors button{width:23px;height:23px;min-height:23px;padding:0;border:2px solid #0b2335;border-radius:50%;background:var(--swatch);box-shadow:0 0 0 1px #8ab3c440}
.crosshair-colors button[aria-pressed=true]{box-shadow:0 0 0 2px #efffff}
.crosshair-settings button:focus-visible{outline:2px solid #e6fff8;outline-offset:3px}
.crosshair-note{margin-top:15px;font-size:9px}
@media(max-width:540px){.crosshair-settings{padding:12px}.crosshair-presets{grid-template-columns:repeat(2,minmax(0,1fr))}.crosshair-options{gap:4px 14px}.crosshair-heading{gap:12px}.crosshair-preview{flex-basis:80px}.crosshair-colors{gap:5px}.crosshair-colors button{width:20px;height:20px;min-height:20px}}