:root {
  --cursor-size: 14px;
  --cursor-color: #ff2bd6;
  --cursor-glow: rgba(255, 43, 214, 0.7);
  --cursor-trail-color: rgba(255, 43, 214, 0.6);
}

/* Global cursor hide - guarantees system cursor is invisible everywhere */
html, body, *, dialog, dialog *, dialog::backdrop {
  cursor: none !important;
}

/* Wrapper and Canvas overlays */
.gc-wrap,
.gc-trail-canvas,
.gc-wrap[popover],
.gc-trail-canvas[popover] {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  outline: none !important;
  pointer-events: none !important;
  overflow: visible !important;
  z-index: 2147483647 !important;
}

.gc-wrap::backdrop,
.gc-trail-canvas::backdrop {
  display: none !important;
  background: transparent !important;
  pointer-events: none !important;
}

/* Core glowing neon ball cursor */
.gc-core {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--cursor-size);
  height: var(--cursor-size);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffffff 0%, #ff62c6 45%, #ff2bd6 100%);
  pointer-events: none;
  z-index: 2147483647;
  transform: translate(-50%, -50%);
  transition: width .2s cubic-bezier(.2,.9,.3,1.2),
              height .2s cubic-bezier(.2,.9,.3,1.2),
              border-color .15s ease,
              box-shadow .2s ease,
              border-radius .2s ease,
              transform .15s ease;
  will-change: transform, width, height, box-shadow;
  box-shadow: 0 0 10px #ff2bd6, 0 0 22px rgba(255, 43, 214, 0.8), 0 0 40px rgba(255, 43, 214, 0.35);
}

/* Outer smooth ring / halo */
.gc-ring {
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 43, 214, 0.5);
  box-shadow: 0 0 10px rgba(255, 43, 214, 0.3);
  pointer-events: none;
  transition: all .22s cubic-bezier(.2,.9,.3,1.2);
}

/* Hover state on interactive buttons, links, etc. */
.gc-core.hover {
  width: 26px;
  height: 26px;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.95), rgba(255, 98, 198, 0.7) 45%, rgba(255, 43, 214, 0.45) 100%);
  border: 1.5px solid #ffffff;
  box-shadow: 0 0 22px #ff2bd6, 0 0 45px rgba(255, 43, 214, 0.75), inset 0 0 10px rgba(255, 255, 255, 0.6);
}
.gc-core.hover .gc-ring {
  inset: -10px;
  border-color: rgba(255, 255, 255, 0.75);
  box-shadow: 0 0 16px rgba(255, 43, 214, 0.6);
  transform: scale(1.08);
}

/* Click state */
.gc-core.click {
  width: 10px;
  height: 10px;
  transform: translate(-50%, -50%) scale(0.75);
  box-shadow: 0 0 25px #ff2bd6, 0 0 50px #ff62c6, inset 0 0 6px #fff;
}
.gc-core.click .gc-ring {
  inset: -4px;
  border-color: #ffffff;
  opacity: 0.9;
}

/* Typing state inside text fields */
.gc-core.typing {
  width: 4px;
  height: 22px;
  border-radius: 3px;
  background: #ff2bd6;
  box-shadow: 0 0 16px #ff2bd6, 0 0 30px rgba(255, 43, 214, 0.8);
}
.gc-core.typing .gc-ring {
  opacity: 0;
  transform: scale(0.5);
}

/* Drag state */
.gc-core.drag {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  transform: translate(-50%, -50%) rotate(45deg);
  box-shadow: 0 0 25px var(--cursor-glow);
}