/* VX Frontend Hardening #8: canonical loading / empty / error surfaces.
   Component layouts remain owned by their module CSS; this file only normalizes state presentation. */
:root{
  --vx-state-line:rgba(138,154,178,.24);
  --vx-state-bg:rgba(12,18,28,.58);
  --vx-state-text:#9eabbc;
  --vx-state-error:#ff9ca9;
  --vx-state-error-line:rgba(239,92,103,.32);
  --vx-state-error-bg:rgba(108,28,39,.18);
}
.vxUiState,
.vxGlobalSearch__empty,
.vxOpsEmpty,
.vxCommerceEmpty,
.vxCommerceLoading,
.vx-user-notices-error{
  box-sizing:border-box;
  color:var(--vx-state-text);
}
.vxUiState{
  display:grid;
  place-items:center;
  min-height:92px;
  padding:18px;
  border:1px dashed var(--vx-state-line);
  border-radius:14px;
  background:var(--vx-state-bg);
  text-align:center;
  line-height:1.5;
}
.vxUiState--compact{min-height:0;padding:12px}
.vxUiState--loading::before,
.vxCommerceLoading::before{
  content:"";
  width:22px;height:22px;
  margin:0 auto 9px;
  border:2px solid rgba(132,109,244,.22);
  border-top-color:#8c72fb;
  border-radius:50%;
  animation:vxUiStateSpin .8s linear infinite;
}
.vxUiState--error,
.vx-user-notices-error{
  border-color:var(--vx-state-error-line)!important;
  background:var(--vx-state-error-bg)!important;
  color:var(--vx-state-error)!important;
}
.vxGlobalSearch__empty{padding:13px 14px;text-align:center}
.vxCommerceEmpty{padding:22px;text-align:center}
.vxCommerceLoading{display:grid;place-items:center;min-height:150px;padding:22px;text-align:center}
.vx-user-notices-error{padding:12px 14px;border:1px solid var(--vx-state-error-line);border-radius:11px}
@keyframes vxUiStateSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.vxUiState--loading::before,.vxCommerceLoading::before{animation:none}}