/* Nullserie custom pointer — desktop fine pointer only; touch stays native. */

html.ns-cursor-on,
html.ns-cursor-on *:not(input):not(textarea):not(select):not([contenteditable="true"]) {
  cursor: none !important;
}

html.ns-cursor-on input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),
html.ns-cursor-on textarea,
html.ns-cursor-on [contenteditable="true"] {
  cursor: text !important;
}

.ns-cursor-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2147483646;
}

.ns-cursor-dot {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1;
  --ns-cursor-sz: var(--ns-cursor-size, 6px);
  width: var(--ns-cursor-sz);
  height: var(--ns-cursor-sz);
  margin-left: calc(var(--ns-cursor-sz) / -2);
  margin-top: calc(var(--ns-cursor-sz) / -2);
  background: var(--ns-cursor-color, #234a6b);
  border: 0 solid var(--ns-cursor-color, #234a6b);
  border-radius: 50%;
  box-sizing: border-box;
  transform: translate3d(-100px, -100px, 0);
  will-change: transform, opacity, width, height, margin;
  opacity: 0;
  transition: opacity 0.12s ease, width 0.1s ease, height 0.1s ease, margin 0.1s ease, background 0.1s ease, border-width 0.1s ease, border-color 0.1s ease, box-shadow 0.1s ease;
}

/* Shapes */
.ns-cursor-dot.shape-ring.mode-default,
.ns-cursor-dot.shape-ring.mode-copy {
  background: transparent;
  border-width: 1.5px;
}

.ns-cursor-dot.shape-square {
  border-radius: 2px;
}

.ns-cursor-dot.shape-diamond {
  border-radius: 1px;
}

/* Semantic modes — sizes and fills */
.ns-cursor-dot.mode-pointer {
  --ns-cursor-sz: var(--ns-cursor-size-pointer, 9px);
  background: transparent;
  border-width: 1.5px;
}

.ns-cursor-dot.mode-not-allowed {
  opacity: 0.48;
}

.ns-cursor-dot.mode-wait {
  --ns-cursor-sz: 8px;
  background: transparent;
  border-width: 1.5px;
}

.ns-cursor-dot.mode-help {
  --ns-cursor-sz: 10px;
  background: transparent;
  border-width: 1.5px;
  border-style: dotted;
}

.ns-cursor-dot.mode-grab {
  --ns-cursor-sz: 8px;
  width: calc(var(--ns-cursor-sz) * 1.55);
  height: var(--ns-cursor-sz);
  margin-left: calc(var(--ns-cursor-sz) * -0.775);
  background: transparent;
  border-width: 1.5px;
  border-radius: 4px;
}

.ns-cursor-dot.mode-grabbing {
  --ns-cursor-sz: 7px;
}

.ns-cursor-dot.mode-crosshair,
.ns-cursor-dot.mode-move,
.ns-cursor-dot.mode-resize {
  --ns-cursor-sz: 6px;
  background: var(--ns-cursor-color, #234a6b);
}

.ns-cursor-dot.mode-zoom-in {
  --ns-cursor-sz: 10px;
  background: transparent;
  border-width: 1.5px;
}

.ns-cursor-dot.mode-zoom-out {
  --ns-cursor-sz: 8px;
  background: transparent;
  border-width: 1.5px;
  box-shadow: inset 0 0 0 1.5px var(--ns-cursor-color, #234a6b);
}

.ns-cursor-dot.mode-copy {
  --ns-cursor-sz: 7px;
  box-shadow: 3px 3px 0 0 var(--ns-cursor-color, #234a6b);
}

/* Mode overlays */
.ns-cursor-dot.mode-not-allowed::after,
.ns-cursor-dot.mode-crosshair::before,
.ns-cursor-dot.mode-crosshair::after,
.ns-cursor-dot.mode-move::before,
.ns-cursor-dot.mode-move::after,
.ns-cursor-dot.mode-resize::before,
.ns-cursor-dot.mode-resize::after {
  content: "";
  position: absolute;
  pointer-events: none;
  background: var(--ns-cursor-color, #234a6b);
  border-radius: 1px;
}

.ns-cursor-dot.mode-not-allowed::after {
  left: 50%;
  top: 50%;
  width: calc(var(--ns-cursor-sz) * 1.65);
  height: 1.5px;
  transform: translate(-50%, -50%) rotate(-45deg);
}

.ns-cursor-dot.mode-crosshair::before,
.ns-cursor-dot.mode-move::before {
  left: 50%;
  top: 50%;
  width: 1px;
  height: 14px;
  transform: translate(-50%, -50%);
}

.ns-cursor-dot.mode-crosshair::after,
.ns-cursor-dot.mode-move::after {
  left: 50%;
  top: 50%;
  width: 14px;
  height: 1px;
  transform: translate(-50%, -50%);
}

.ns-cursor-dot.mode-resize::before {
  left: 50%;
  top: 50%;
  width: 1px;
  height: 12px;
  transform: translate(-50%, -50%) rotate(45deg);
}

.ns-cursor-dot.mode-resize::after {
  left: 50%;
  top: 50%;
  width: 12px;
  height: 1px;
  transform: translate(-50%, -50%) rotate(45deg);
}

html.ns-cursor-on .ns-cursor-dot.is-visible {
  opacity: 1;
}

html.ns-cursor-on .ns-cursor-dot.is-idle {
  opacity: 0;
}

html.ns-cursor-on .ns-cursor-dot.mode-text {
  opacity: 0 !important;
}

.ns-cursor-dot.mode-wait.is-visible {
  animation: ns-cursor-wait 0.9s ease-in-out infinite;
}

@keyframes ns-cursor-wait {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.32; }
}

.ns-cursor-signal {
  position: fixed;
  left: 0;
  top: 0;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  margin-top: -4px;
  border: 1.5px solid var(--ns-cursor-color, #234a6b);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-100px, -100px, 0) scale(0.35);
}

.ns-cursor-signal.is-active {
  animation: ns-cursor-signal 0.72s ease-out forwards;
}

@keyframes ns-cursor-signal {
  0% {
    opacity: 0.95;
    transform: translate3d(var(--ns-cursor-x), var(--ns-cursor-y), 0) scale(0.35);
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--ns-cursor-x), var(--ns-cursor-y), 0) scale(3.2);
  }
}

@media (hover: none), (pointer: coarse) {
  html.ns-cursor-on,
  html.ns-cursor-on * {
    cursor: auto !important;
  }
  .ns-cursor-layer {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ns-cursor-dot {
    transition: none;
  }
  .ns-cursor-dot.mode-wait.is-visible {
    animation: none;
    opacity: 0.72;
  }
  .ns-cursor-signal.is-active {
    animation: none;
    opacity: 0.85;
    transform: translate3d(var(--ns-cursor-x), var(--ns-cursor-y), 0) scale(1.6);
  }
}

/* Settings preview chips (app Einstellungen) */
.cursor-shape-chips,
.cursor-color-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.cursor-color-swatches .swatch {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  border-radius: 50%;
  border: 2px solid var(--border, rgba(127, 127, 127, 0.35));
  padding: 0;
  cursor: pointer;
}

.cursor-color-swatches .swatch.on {
  box-shadow: 0 0 0 2px var(--accent, #234a6b);
}

.cursor-color-custom {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

.cursor-color-custom input[type="color"] {
  width: 44px;
  height: 44px;
  padding: 2px;
  border: 1px solid var(--border, rgba(127, 127, 127, 0.35));
  border-radius: 10px;
  background: var(--surface, #fff);
}

.cursor-settings-coarse .cursor-shape-chips,
.cursor-settings-coarse .cursor-color-swatches,
.cursor-settings-coarse .cursor-color-custom,
.cursor-settings-coarse label[for="set-cursor-signal"] {
  opacity: 0.45;
  pointer-events: none;
}