/* Shared loading / empty / no-match / error states (scripts/uiStates.js). */

.ui-skel { display: flex; flex-direction: column; gap: 1px; background: #EEF2F6; border-radius: 12px; overflow: hidden; }
.ui-skel-row { display: flex; gap: 18px; align-items: center; padding: 16px 18px; background: #fff; }
.ui-skel-bar { height: 12px; border-radius: 6px; background: linear-gradient(90deg, #EEF2F6 0%, #F6F8FA 50%, #EEF2F6 100%); background-size: 200% 100%; animation: ui-skel 1.4s ease-in-out infinite; }
@keyframes ui-skel { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .ui-skel-bar { animation: none; } }

.ui-nomatch-host[hidden] { display: none; }
.ui-state { margin: 24px auto; max-width: 440px; padding: 28px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; font-family: var(--font-body, system-ui); }
.ui-state-title { font: 800 17px var(--font-display, var(--font-body, system-ui)); color: var(--text-body, #102A43); }
.ui-state-body { font: 500 13.5px/1.5 var(--font-body, system-ui); color: var(--text-muted, #62748A); }
.ui-state-body b { color: var(--text-body, #102A43); font-weight: 700; }
.ui-state-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 6px; }
.ui-state-btn { height: 38px; padding: 0 16px; border-radius: 10px; border: 0; background: var(--seafoam, #0F8C82); color: #fff; font: 700 13.5px var(--font-body, system-ui); cursor: pointer; margin-top: 4px; }
.ui-state-btn:hover { filter: brightness(.95); }
.ui-state-btn-quiet { background: #fff; color: var(--text-body, #102A43); border: 1px solid var(--card-border-alt, #DDE5EC); }
.ui-error .ui-state-title { color: var(--red-text, #C23A3A); }
.ui-state-code { margin-top: 10px; font: 500 11px var(--font-mono, ui-monospace, monospace); color: #8A98A6; word-break: break-word; }