/* Desaturated Type Badges */
.type-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.type-water { background: rgba(77, 151, 209, 0.14); color: #2f6f9e; }
.type-ground { background: rgba(184, 137, 90, 0.16); color: #8a6136; }
.type-grass { background: rgba(98, 163, 75, 0.14); color: #3b742c; }
.type-fire { background: rgba(192, 73, 46, 0.14); color: #9c3319; }
.type-electric { background: rgba(214, 158, 46, 0.16); color: #8d6411; }
.type-ice { background: rgba(56, 178, 172, 0.16); color: #166d69; }
.type-fighting { background: rgba(197, 48, 48, 0.14); color: #9e2323; }
.type-poison { background: rgba(128, 90, 213, 0.14); color: #6441b0; }
.type-flying { background: rgba(99, 179, 237, 0.16); color: #226fa6; }
.type-psychic { background: rgba(213, 63, 140, 0.14); color: #9e2060; }
.type-bug { background: rgba(104, 211, 145, 0.18); color: #2e7a4b; }
.type-rock { background: rgba(160, 174, 192, 0.2); color: #4a5568; }
.type-ghost { background: rgba(85, 60, 154, 0.14); color: #4d3391; }
.type-dragon { background: rgba(76, 81, 191, 0.14); color: #3c40a3; }
.type-steel { background: rgba(113, 128, 150, 0.18); color: #4a5568; }
.type-fairy { background: rgba(246, 135, 179, 0.18); color: #a83b6b; }
.type-dark { background: rgba(74, 85, 104, 0.16); color: #333d4d; }
.type-normal { background: rgba(148, 163, 184, 0.18); color: #475569; }

/* Form Variant Tabs */
.variant-selector-row {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.btn-variant-chip {
  height: 34px;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
  background: var(--surface-sunken);
  color: var(--text-secondary);
  transition: all 0.12s ease;
  white-space: nowrap;
}

.btn-variant-chip[data-variant="regular"].active {
  background: #0f172a;
  color: #ffffff;
  border-color: #0f172a;
}

.btn-variant-chip[data-variant="shadow"] {
  background: var(--variant-shadow-tint);
  border-color: var(--variant-shadow-border);
  color: #5b3d90;
}
.btn-variant-chip[data-variant="shadow"].active {
  background: #5b3d90;
  color: #ffffff;
  border-color: #5b3d90;
}

.btn-variant-chip[data-variant="purified"] {
  background: var(--variant-purified-tint);
  border-color: var(--variant-purified-border);
  color: #0b6d6a;
}
.btn-variant-chip[data-variant="purified"].active {
  background: #0b6d6a;
  color: #ffffff;
  border-color: #0b6d6a;
}

.btn-variant-chip[data-variant="lucky"] {
  background: var(--variant-lucky-tint);
  border-color: var(--variant-lucky-border);
  color: #8a6113;
}
.btn-variant-chip[data-variant="lucky"].active {
  background: #8a6113;
  color: #ffffff;
  border-color: #8a6113;
}