/* ============================================================
   360 — CURSOR.CSS V.2.0.3
   ============================================================ */

/* Hide on touch devices */
@media (hover: none) and (pointer: coarse) {
  html, body, * { cursor: auto !important; }
  .cursor-dot, .cursor-trail,
  .cursor-crosshair, .cursor-blob { display: none !important; }
}

/* Hide system cursor on desktop */
@media (hover: hover) {
  html, body, * { cursor: none !important; }
}

/* Base */
.cursor-dot,
.cursor-trail,
.cursor-crosshair,
.cursor-blob {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: calc(infinity);
  transform: translate(-50%, -50%);
  will-change: left, top;
}

/* DEFAULT */
.cursor-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--cursor-color, #3b82f6);
  box-shadow: 0 0 10px var(--cursor-color, #3b82f6);
}

.cursor-trail {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--cursor-color, rgba(59,130,246,0.5));
  background: transparent;
}

.cursor-crosshair {
  width: 20px;
  height: 20px;
  display: none;
}

.cursor-crosshair::before,
.cursor-crosshair::after {
  content: "";
  display: block;
  position: absolute;
  background: var(--cursor-color, #3b82f6);
  border-radius: 2px;
}
.cursor-crosshair::before { width: 20px; height: 2px; top: 9px; left: 0; }
.cursor-crosshair::after  { width: 2px; height: 20px; top: 0; left: 9px; }

.cursor-blob {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--cursor-color, #3b82f6);
  opacity: 0.3;
  filter: blur(8px);
  display: none;
}

/* VARIANTS */
[data-cursor="dot"] .cursor-trail     { display: none !important; }
[data-cursor="dot"] .cursor-crosshair { display: none !important; }
[data-cursor="dot"] .cursor-blob      { display: none !important; }

[data-cursor="ring"] .cursor-dot      { display: none !important; }
[data-cursor="ring"] .cursor-trail    { width: 24px; height: 24px; }
[data-cursor="ring"] .cursor-crosshair { display: none !important; }
[data-cursor="ring"] .cursor-blob     { display: none !important; }

[data-cursor="crosshair"] .cursor-dot       { display: none !important; }
[data-cursor="crosshair"] .cursor-trail     { display: none !important; }
[data-cursor="crosshair"] .cursor-crosshair { display: block !important; }
[data-cursor="crosshair"] .cursor-blob      { display: none !important; }

[data-cursor="blob"] .cursor-dot       { display: none !important; }
[data-cursor="blob"] .cursor-trail     { display: none !important; }
[data-cursor="blob"] .cursor-crosshair { display: none !important; }
[data-cursor="blob"] .cursor-blob      { display: block !important; }

[data-cursor="system"] .cursor-dot,
[data-cursor="system"] .cursor-trail,
[data-cursor="system"] .cursor-crosshair,
[data-cursor="system"] .cursor-blob { display: none !important; }
[data-cursor="system"],
[data-cursor="system"] * { cursor: auto !important; }

/* ============================================================
   SETTINGS UI
   ============================================================ */
.cursor-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 8px;
}

.cursor-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 10px 6px;
  border-radius: 10px;
  border: 1.5px solid var(--br);
  transition: .2s;
  font-size: 11px;
  color: var(--mut);
  text-align: center;
  user-select: none;
}
body.dark .cursor-option { color: var(--mutd); }
.cursor-option:hover { background: rgba(148,163,184,.1); border-color: var(--a); }
.cursor-option.active { border-color: var(--a); background: rgba(59,130,246,.1); color: var(--a); font-weight: 600; }

/* Preview container */
.cursor-preview {
  width: 28px;
  height: 28px;
  position: relative;
  display: block;
}

/* DEFAULT preview — dot + ring */
.preview-default::before {
  content: "";
  display: block;
  position: absolute;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--a, #3b82f6);
  box-shadow: 0 0 5px var(--a, #3b82f6);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
.preview-default::after {
  content: "";
  display: block;
  position: absolute;
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--a, #3b82f6);
  opacity: .5;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

/* DOT preview */
.preview-dot::before {
  content: "";
  display: block;
  position: absolute;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--a, #3b82f6);
  box-shadow: 0 0 5px var(--a, #3b82f6);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

/* RING preview */
.preview-ring::before {
  content: "";
  display: block;
  position: absolute;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid var(--a, #3b82f6);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

/* CROSSHAIR preview */
.preview-crosshair::before {
  content: "";
  display: block;
  position: absolute;
  width: 20px; height: 2px;
  background: var(--a, #3b82f6);
  border-radius: 999px;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
.preview-crosshair::after {
  content: "";
  display: block;
  position: absolute;
  width: 2px; height: 20px;
  background: var(--a, #3b82f6);
  border-radius: 999px;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

/* BLOB preview */
.preview-blob::before {
  content: "";
  display: block;
  position: absolute;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--a, #3b82f6);
  opacity: .35;
  filter: blur(4px);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

/* SYSTEM preview */
.preview-system::before {
  content: "↖";
  display: block;
  position: absolute;
  font-size: 18px;
  color: var(--a, #3b82f6);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  line-height: 1;
}

/* Color picker row */
.cursor-color-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--br);
  background: rgba(148,163,184,.06);
}
.cursor-color-row label { font-size: 12px; color: var(--mut); flex: 1; }
body.dark .cursor-color-row label { color: var(--mutd); }
#cursorColorPicker { width: 32px; height: 32px; border-radius: 50%; border: none; padding: 0; }
#cursorColorReset { font-size: 11px; padding: 5px 10px; border-radius: 6px; border: 1px solid var(--br); background: transparent; color: var(--mut); }
body.dark #cursorColorReset { color: var(--mutd); }