/* Operator skins (host addition, ui/skins.js SkinSection): the picker in the 干员调配 detail and, compact, on a 自选编队
   slot card (screens/diy.js). */

.lo-skins__note { margin-left: .1rem; font-size: .14rem; font-weight: 400; color: var(--text-dim); }
.lo-skins__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(1.1rem, 1fr)); gap: .08rem; }
.lo-skin {
  display: flex; flex-direction: column; align-items: center; gap: .04rem; padding: .06rem; min-width: 0;
  background: rgba(0, 0, 0, .35); border: 1px solid var(--line-2); color: var(--text-md);
  transition: border-color var(--t-fast), color var(--t-fast);
}
.lo-skin:hover { border-color: var(--mint-700); color: var(--text-hi); }
.lo-skin.is-on { border-color: var(--mint-500); color: var(--mint-400); box-shadow: inset 0 0 0 1px var(--mint-700); }
.lo-skin__img { width: .8rem; height: .8rem; object-fit: cover; display: block; }
.lo-skin__img--none { background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .04) 0 .06rem, transparent .06rem .12rem); }
.lo-skin__name { width: 100%; font-size: .14rem; line-height: 1.25; text-align: center; overflow-wrap: anywhere; }

/* compact: a label and small tiles under the slot card's 潜能 / 练度 */
.lo-skins--compact { display: flex; align-items: flex-start; gap: .08rem; margin-top: .06rem; }
.lo-skins__label { flex: none; padding-top: .04rem; font-size: max(.12rem, 9px); color: var(--text-dim); }
.lo-skins--compact .lo-skins__grid { flex: 1; min-width: 0; grid-template-columns: repeat(auto-fill, minmax(.72rem, 1fr)); gap: .05rem; }
.lo-skins--compact .lo-skin { padding: .04rem; }
.lo-skins--compact .lo-skin__img { width: .5rem; height: .5rem; }
.lo-skins--compact .lo-skin__name { font-size: max(.11rem, 9px); }