.field-hint {
  position:fixed; z-index:100; display:flex; align-items:center; gap:10px;
  max-width:min(360px, calc(100vw - 24px)); padding:12px 14px;
  border:1px solid #b8b8b8; border-radius:4px; background:#fff; color:#222;
  box-shadow:0 3px 10px rgba(0,0,0,.2); font:14px/1.45 Inter, Arial, sans-serif;
}
.field-hint::before {
  content:''; position:absolute; left:var(--hint-arrow-left, 22px);
  width:10px; height:10px; background:#fff; transform:rotate(45deg);
}
.field-hint[data-placement="below"]::before { top:-6px; border-top:1px solid #b8b8b8; border-left:1px solid #b8b8b8; }
.field-hint[data-placement="above"]::before { bottom:-6px; border-bottom:1px solid #b8b8b8; border-right:1px solid #b8b8b8; }
.field-hint-icon { flex-shrink:0; width:21px; height:21px; border-radius:3px; background:#e58922; color:#fff; font:bold 16px/21px Arial, sans-serif; text-align:center; }
.field-hint-message { overflow-wrap:anywhere; }