/* ============================================================
   Clickfu — Preset Chips (compact 3×2 / 2×3 mobile)
   Palette A: bg #0B0B10, primary #C6FF3D, text #F0F4FF
   ============================================================ */

.cfu-presets {
  margin: 0 auto 22px;
  padding: 18px;
  background: #14141C;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  max-width: 680px;   /* match the .launcher-form max-width so it doesn't look stretched */
  width: 100%;
}
.cfu-presets-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.cfu-presets-head h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #F0F4FF;
  letter-spacing: -.01em;
}
.cfu-presets-head p {
  margin: 0;
  font-size: 12px;
  color: #8A8F9E;
}
.cfu-preset-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
@media (max-width: 560px) {
  .cfu-preset-grid { grid-template-columns: repeat(2, 1fr); }
}

.cfu-preset {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1.5px solid rgba(255,255,255,.08);
  border-radius: 10px;
  background: #1B1B26;
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .15s;
  text-align: left;
  user-select: none;
  font: inherit;
  color: #F0F4FF;
  width: 100%;
}
.cfu-preset:hover {
  border-color: rgba(198,255,61,.32);
  transform: translateY(-1px);
}
.cfu-preset.is-selected {
  border-color: #C6FF3D;
  background: rgba(198,255,61,.10);
}
.cfu-preset:focus-visible {
  outline: 2px solid #C6FF3D;
  outline-offset: 2px;
}

.cfu-preset-icon {
  flex: 0 0 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8A8F9E;
  transition: color .15s;
}
.cfu-preset.is-selected .cfu-preset-icon { color: #C6FF3D; }

.cfu-preset-name {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.2;
}

/* "Selected: X. Fields below auto-filled. Edit anything." banner */
.cfu-preset-helper {
  margin-top: 14px;
  font-size: 12.5px;
  color: #B5BAC8;
  background: rgba(198,255,61,.05);
  border-left: 2px solid #C6FF3D;
  padding: 9px 12px;
  border-radius: 0 6px 6px 0;
  display: none;
}
.cfu-preset-helper.is-visible { display: block; }
.cfu-preset-helper strong { color: #C6FF3D; font-weight: 600; }

/* Brief lime flash on autofilled fields */
@keyframes cfu-fill-flash {
  0%   { box-shadow: 0 0 0 0 rgba(198,255,61,.45); border-color: #C6FF3D; }
  100% { box-shadow: 0 0 0 6px rgba(198,255,61,0);   border-color: rgba(255,255,255,.10); }
}
.cfu-just-filled {
  animation: cfu-fill-flash 1s ease-out;
}