.openem-state {
    --state-accent: #475569;
    display: grid;
    width: 100%;
    min-height: 220px;
    place-items: center;
    padding: 32px 20px;
    color: #172033;
    text-align: center;
}

.openem-state.is-compact { min-height: 140px; padding: 22px 16px; }
.openem-state-content { display: grid; max-width: 520px; justify-items: center; gap: 10px; }
.openem-state-icon {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    color: var(--state-accent);
    font-size: 1.55rem;
}
.openem-state h3, .openem-state p { margin: 0; }
.openem-state h3 { font-size: 1rem; line-height: 1.5; }
.openem-state p { color: #5e6b7d; font-size: .875rem; line-height: 1.7; }
.openem-state-action { margin-top: 6px; }
.openem-state.is-loading { --state-accent: #2563eb; }
.openem-state.is-empty { --state-accent: #64748b; }
.openem-state.is-error { --state-accent: #b42318; }
.openem-state.is-forbidden { --state-accent: #9a6700; }
.openem-state.is-expired { --state-accent: #7c3aed; }
.openem-state-table-cell { padding: 0 !important; border: 0 !important; }

@media (max-width: 767px) {
    .openem-state { min-height: 180px; padding: 26px 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .openem-state .fa-spin { animation: none !important; }
}