.ui-state { padding: 12px 14px; border-radius: 6px; line-height: 1.45; font: 14px/1.45 system-ui, sans-serif; }
.ui-state[hidden] { display: none; }
.ui-state__announcement { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ui-state[data-state="loading"], .ui-state[data-state="progress"] { color: #264c70; background: #edf5fd; }
.ui-state[data-state="loading"]::before { content: ""; display: inline-block; width: 13px; height: 13px; margin-right: 9px; border: 2px solid #9cb7d1; border-top-color: #245e98; border-radius: 50%; animation: ui-state-spin .8s linear infinite; vertical-align: -2px; }
.ui-state[data-state="error"], .ui-state[data-state="validation"], .ui-state[data-state="unauthorized"], .ui-state[data-state="forbidden"] { color: #8b2020; background: #fff0ef; }
.ui-state[data-state="warning"], .ui-state[data-state="partial"], .ui-state[data-state="conflict"], .ui-state[data-state="stale"], .ui-state[data-state="unsaved"] { color: #755000; background: #fff5dc; }
.ui-state[data-state="success"] { color: #17643a; background: #eaf8ee; }
.ui-state[data-state="empty"], .ui-state[data-state="disabled"] { color: #475c70; background: #f3f6f9; }
.ui-state__action { margin-left: 10px; padding: 4px 9px; border: 1px solid currentColor; border-radius: 4px; color: inherit; background: transparent; font: inherit; cursor: pointer; }
@keyframes ui-state-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ui-state[data-state="loading"]::before { animation: none; } }