/* Field-level validation */
.vr-field-error {
  border: 1px solid #ff4d4f !important;
  box-shadow: 0 0 0 1px #ff4d4f !important;
}

/* -----------------------------------------------------------------------
   Page-level state banner (#profileState and similar .vr-state elements)
   ----------------------------------------------------------------------- */
.vr-state {
  display: none;
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 600;
  margin-bottom: 16px;
  line-height: 1.4;
}
.vr-state:not(:empty) {
  display: block;
}

/* Success — green */
.vr-state.is-success {
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.4);
  color: #4ade80;
}
html[data-theme="light"] .vr-state.is-success {
  background: rgba(22, 163, 74, 0.08);
  border-color: rgba(22, 163, 74, 0.35);
  color: #15803d;
}

/* Warning — amber */
.vr-state.is-warn {
  background: rgba(251, 191, 36, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.4);
  color: #fbbf24;
}
html[data-theme="light"] .vr-state.is-warn {
  background: rgba(217, 119, 6, 0.08);
  border-color: rgba(217, 119, 6, 0.35);
  color: #b45309;
}

/* Error — red */
.vr-state.is-error {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #f87171;
}
html[data-theme="light"] .vr-state.is-error {
  background: rgba(220, 38, 38, 0.08);
  border-color: rgba(220, 38, 38, 0.35);
  color: #b91c1c;
}

/* Info / neutral */
.vr-state.is-info {
  background: rgba(108, 99, 255, 0.1);
  border: 1px solid rgba(108, 99, 255, 0.35);
  color: var(--vr-accent, #6c63ff);
}