.combat-picker[v-cloak] { display: none; }
.combat-picker { padding: 5px 2px; color: #475569; }
.combat-picker__levels { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.combat-picker__field { display: flex; flex-direction: column; gap: 5px; margin: 0; min-width: 108px; flex: 1 1 108px; max-width: 160px; }
.combat-picker__field > span { font-size: 12px; line-height: 18px; color: #64748b; }
.combat-picker__field select { width: 100%; height: 36px; padding: 0 8px; border: 1px solid #d7dfeb; border-radius: 6px; background-color: #fff; color: #334155; font: inherit; font-size: 14px; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.combat-picker__field select:hover:not(:disabled) { border-color: #94a9ca; }
.combat-picker__field select:focus-visible { outline: 2px solid #527bc3; outline-offset: 2px; }
.combat-picker__field select:disabled { color: #8a94a3; background: #f3f5f8; cursor: not-allowed; }
.combat-picker__arrow { color: #9aa9be; font-size: 22px; line-height: 36px; }
.combat-picker__summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 10px; font-size: 13px; }
.combat-picker__current { padding: 2px 9px; border-radius: 4px; color: #456696; background: #edf3fc; }
.combat-picker__summary strong { margin-left: 4px; color: #c56b31; font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.combat-picker__hint { margin-top: 5px; color: #7c8796; font-size: 12px; line-height: 1.5; }
@media (max-width: 575px) {
  .combat-picker__levels { gap: 8px; }
  .combat-picker__field { flex: 1 1 100%; max-width: none; min-width: 0; }
  .combat-picker__arrow { display: none; }
}