/* иконка вместо бывшего эмодзи 🧬, перекраска тем же фильтром, что у nav-иконок */
.page-title__icon{
  width:28px;
  height:28px;
  vertical-align:-4px;
  margin-right:2px;
  filter:brightness(0) saturate(100%) invert(41%) sepia(84%) saturate(1067%) hue-rotate(2deg) brightness(94%) contrast(93%);
}

.mixer-pick-row{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  gap:16px;
}
.mixer-pick{
  flex:1 1 220px;
  display:flex;
  flex-direction:column;
  min-width:200px;
  gap:6px;
}
.mixer-pick label{
  color:var(--color-amber-dark);
  font-size:13px;
  font-weight:700;
}
.mixer-pick select{
  padding:9px 12px;
  border:1px solid var(--color-line);
  border-radius:9px;
  background:var(--color-paper);
  color:var(--color-dark);
  font-family:inherit;
  font-size:14px;
}
.mixer-pick-plus{
  padding-bottom:8px;
  color:var(--color-amber-dark);
  font-family:'Neucha',cursive;
  font-size:28px;
}
.mixer-note{
  margin-top:14px;
  padding:12px 14px;
  border-radius:9px;
  background:#fdeaea;
  color:#a33;
  font-size:13.5px;
}

.mixer-field{ margin-bottom:18px; }
.mixer-field:last-child{ margin-bottom:0; }
.mixer-field label{
  display:block;
  margin-bottom:6px;
  color:var(--color-amber-dark);
  font-size:13px;
  font-weight:700;
}
.mixer-field input[type="text"]{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--color-line);
  border-radius:9px;
  background:var(--color-paper);
  color:var(--color-dark);
  font-family:inherit;
  font-size:14px;
}

.mixer-trait-pool{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.mixer-trait-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  border:1.5px solid var(--color-line);
  border-radius:14px;
  background:var(--color-paper);
  color:#6b5a45;
  font-size:12.5px;
  font-weight:600;
  user-select:none;
  cursor:pointer;
  transition:background .15s, border-color .15s, color .15s;
}
.mixer-trait-chip.is-active{
  /* цвет пути природы — тут чисто как акцент, к смыслу черты не привязан */
  background:var(--path-nature);
  border-color:var(--path-nature);
  color:#fff;
}
.mixer-trait-chip__source{
  font-size:10px;
  font-style:italic;
  opacity:.75;
}

.mixer-abilities-columns{
  display:grid;
  gap:20px;
  grid-template-columns:1fr 1fr;
}
@media (max-width: 720px){
  .mixer-abilities-columns{ grid-template-columns:1fr; }
}
.mixer-abilities-col__title{
  margin-bottom:10px;
  padding-bottom:6px;
  border-bottom:2px solid var(--color-sand);
  color:var(--color-amber-dark);
  font-family:'Neucha',cursive;
  font-size:20px;
}
.mixer-ability-card{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-bottom:10px;
  padding:12px 14px;
  border:1.5px solid var(--color-line);
  border-radius:10px;
  background:var(--color-paper);
  cursor:pointer;
  transition:border-color .15s, background .15s;
}
.mixer-ability-card:hover{ border-color:var(--color-amber-soft); }
.mixer-ability-card.is-selected{
  border-color:var(--color-amber);
  background:var(--color-paper-2);
  box-shadow:0 0 0 1px var(--color-amber-soft) inset;
}
.mixer-ability-card input[type="checkbox"]{
  flex-shrink:0;
  width:16px;
  height:16px;
  margin-top:3px;
  accent-color:var(--color-amber);
}
.mixer-ability-card__body{ flex:1; }
.mixer-ability-card__title{
  margin-bottom:3px;
  color:var(--color-dark);
  font-family:'Neucha',cursive;
  font-size:17px;
}
.mixer-ability-card__text{
  color:#5b4a33;
  font-size:13px;
  line-height:1.5;
}

.homebrew-label{ font-weight:400; opacity:.85; }

#previewAbilities h3.underlined{ margin-top:18px; }
#previewAbilities .mixer-empty-hint{
  color:#8a7757;
  font-size:13.5px;
  font-style:italic;
}

.mixer-export{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px;
  margin-top:20px;
  padding-top:16px;
  border-top:2px solid var(--color-sand);
}
.mixer-export__hint{
  color:#4f9e4a;
  font-size:13px;
  font-weight:600;
}