/* MoonTik — sélecteur de couleur partagé */
.mtc-swatch {
  width: 28px; height: 22px; border-radius: 6px; padding: 0; cursor: pointer;
  border: 1px solid rgba(255,255,255,.18); box-shadow: inset 0 0 0 1px rgba(0,0,0,.35);
  background: var(--mtc, #a78bfa); flex-shrink: 0; vertical-align: middle;
}
.mtc-swatch:hover { border-color: #c4b5fd; }
.mtc-native { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; }
.mtc-pop {
  position: fixed; z-index: 10050; width: 220px; padding: 10px;
  background: #16161c; border: 1px solid #2e2e38; border-radius: 12px;
  box-shadow: 0 18px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(167,139,250,.12);
  color: #e8e8ef; font: 12px/1.3 Inter, Segoe UI, sans-serif;
}
.mtc-sv {
  position: relative; width: 100%; height: 140px; border-radius: 8px; overflow: hidden; cursor: crosshair;
  background: linear-gradient(to bottom, transparent, #000), linear-gradient(to right, #fff, var(--hue, #ff0000));
}
.mtc-sv i, .mtc-hue i, .mtc-alpha i {
  position: absolute; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.45), 0 2px 4px rgba(0,0,0,.4);
  transform: translate(-50%, -50%); pointer-events: none; background: var(--handle, #fff);
}
.mtc-hue, .mtc-alpha { position: relative; height: 14px; margin-top: 10px; border-radius: 99px; cursor: pointer; }
.mtc-hue {
  background: linear-gradient(to right, #ff0040, #ffcc00, #00ff66, #00ccff, #6600ff, #ff00cc, #ff0040);
}
.mtc-hue i, .mtc-alpha i { top: 50%; width: 16px; height: 16px; }
.mtc-alpha { background:
  linear-gradient(to right, transparent, var(--solid, #ff0050)),
  repeating-conic-gradient(#3a3a44 0% 25%, #1c1c22 0% 50%) 0 0 / 10px 10px;
}
.mtc-row { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.mtc-hash { color: #9a9aa6; font-weight: 700; }
.mtc-hex {
  flex: 1; min-width: 0; background: #0e0e14; border: 1px solid #2e2e38; border-radius: 8px;
  color: #f4f4f8; font: 600 12px/1 ui-monospace, Cascadia Code, monospace;
  padding: 7px 8px; text-transform: uppercase;
}
.mtc-hex:focus { outline: none; border-color: #a78bfa; }
.mtc-drop {
  width: 34px; height: 32px; border-radius: 8px; border: 1px solid #2e2e38; background: #0e0e14;
  color: #e8e8ef; cursor: pointer; display: grid; place-items: center;
}
.mtc-drop:hover { border-color: #a78bfa; color: #c4b5fd; }
.mtc-drop svg { width: 16px; height: 16px; }