.mj-inline-panel{
  display:flex; flex-wrap:wrap; gap:.5rem; align-items:center;
  padding:1.4rem .8rem; border:2px solid #e5e7eb; border-radius:.6rem;
  background:#e5e6e5; color:#111827; font:600 14px/1.3 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
.mj-btn{
  appearance:none; border:1px solid #cbd5e1; background:#0a84ff; color:#fff;
  padding:.4rem .7rem; border-radius:.45rem; cursor:pointer; font-weight:700;
}
.mj-btn[disabled]{ opacity:.6; cursor:not-allowed; }
.mj-status{ font-size:12px; color:#4b5563; }

.mj-dim-wrap{ display:inline-flex; align-items:center; gap:.4rem; }
.mj-dim-wrap .mj-dim{ width:160px; }
.mj-presets{ display:inline-flex; gap:.4rem; }
.mj-auto{ display:inline-flex; align-items:center; gap:.35rem; font-weight:600; color:#1f2937; }

/* Visual fake cursor dot (fixed so it stays visible while scrolling) */
.mj-dot{
  position: fixed;
  width: var(--mj-size, 12px); height: var(--mj-size, 12px);
  border-radius: 50%; background: var(--mj-color, #00b3ff);
  box-shadow: 0 2px 10px rgba(0,179,255,.7);
  pointer-events:none; transform: translate(-50%, -50%);
  transition: transform 220ms ease-out;
  z-index: 2147483647;
}
@media (prefers-reduced-motion: reduce){ .mj-dot{ transition:none; } }

/* Global dim overlay (visual only) */
#mj-dim-overlay{
  position: fixed; inset: 0;
  background: rgba(0,0,0, var(--mj-dim, 0)); /* 0 to 0.9 darkness */
  pointer-events: none;
  z-index: 2147483500; /* below dot & panel */
  transition: background-color 180ms linear, background 180ms linear;
}