/* XXX GOLD: живая панель на странице. Размеры — в «дизайн-единицах» окна плагина (--u = 1 единица в cqw). */
.gp { position: relative; width: 100%; container-type: inline-size; user-select: none; -webkit-user-select: none; --u: 0.11cqw; }
.gp > img { display: block; width: 100%; height: auto; border-radius: 6px; }
.gp-layer { position: absolute; inset: 0; }
.gp-hint { margin: 14px auto 0; text-align: center; color: var(--muted2, #8a857d); font-size: 13px; letter-spacing: 0.06em; }
.gp-hint b { color: #d9b76a; font-weight: 600; }

.gp-knob { position: absolute; width: calc(var(--u) * 50.6); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; cursor: grab; touch-action: none; outline: none; }
.gp-knob:active { cursor: grabbing; }
.gp-knob:focus-visible { box-shadow: 0 0 0 calc(var(--u) * 2.4) rgba(255, 214, 120, 0.85); }
.gp-knob svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

.gp-val { position: absolute; transform: translate(-50%, -50%); width: calc(var(--u) * 33); padding: calc(var(--u) * 1.2) 0; text-align: center; background: #060606; white-space: nowrap;
  font: 600 calc(var(--u) * 8.4)/1.1 'Inter', system-ui, sans-serif; color: #e9c870; letter-spacing: 0.01em; pointer-events: none; }
.gp-val.wide { width: calc(var(--u) * 33); }
.gp-clip { position: absolute; transform: translate(-50%, -50%); width: calc(var(--u) * 56); padding: calc(var(--u) * 1.4) 0; text-align: center; background: #1a1a1a; white-space: nowrap;
  font: 600 calc(var(--u) * 8.3)/1.1 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #ff3b30; pointer-events: none; }

.gp-lamp { position: absolute; width: calc(var(--u) * 17); aspect-ratio: 2.3; transform: translate(-50%, -50%); border-radius: calc(var(--u) * 3.4); cursor: pointer; border: 0; padding: 0;
  background: #17270f; box-shadow: 0 0 0 calc(var(--u) * 3.6) #040404, inset 0 calc(var(--u) * 1.2) calc(var(--u) * 2) rgba(0,0,0,0.65); transition: background 80ms, box-shadow 80ms; }
.gp-lamp.on { background: linear-gradient(180deg, #a6ff8c, #3cf21f 55%, #22b810); box-shadow: 0 0 0 calc(var(--u) * 3.6) #040404, 0 0 calc(var(--u) * 11) rgba(77, 255, 46, 0.8); }
.gp-lamp.round { width: calc(var(--u) * 9.6); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 38% 32%, #ffb3aa, #e32a1d 52%, #6c0f09); box-shadow: 0 0 calc(var(--u) * 6) rgba(255, 36, 24, 0.7); }
.gp-lamp.round.on { background: radial-gradient(circle at 38% 32%, #d4ffc4, #3fe820 52%, #137409); box-shadow: 0 0 calc(var(--u) * 8) rgba(77, 255, 46, 0.85); }
.gp-lamp.color { background: radial-gradient(circle at 38% 32%, #9b9b9b, #444 58%, #141414); box-shadow: none; }
.gp-lamp.color.on { background: radial-gradient(circle at 38% 32%, #fff4c9, #ffb800 52%, #8a5a00); box-shadow: 0 0 calc(var(--u) * 9) rgba(255, 184, 0, 0.85); }
.gp-lamp:focus-visible { outline: calc(var(--u) * 2.2) solid rgba(255, 214, 120, 0.95); outline-offset: calc(var(--u) * 1.4); }

.gp canvas { position: absolute; display: block; pointer-events: none; }