.ui-state { padding: 20px; border: 1px solid var(--ep-color-border); border-radius: var(--ep-radius-lg); background: var(--ep-color-surface); }
.ui-state h2 { margin: 0 0 8px; font-size: 1.05rem; }
.ui-state p { margin: 0; color: var(--ep-color-text-secondary); line-height: 1.5; }
.ui-state--loading { border-style: dashed; }
.ui-state--error { border-color: var(--ep-color-error); background: var(--ep-color-error-bg); }
.toast-region { position: fixed; z-index: 40; inset: auto 16px calc(96px + env(safe-area-inset-bottom, 0px)) 16px; display: grid; justify-items: center; pointer-events: none; }
.ui-toast { max-width: min(32rem, 100%); padding: 12px 16px; border: 1px solid var(--ep-color-border); border-radius: var(--ep-radius-md); background: var(--ep-color-info-bg); color: var(--ep-color-info); box-shadow: var(--ep-shadow-floating); line-height: 1.45; }
.ui-toast--success { background: var(--ep-color-success-bg); color: var(--ep-color-success); }
.ui-toast--error { background: var(--ep-color-error-bg); color: var(--ep-color-error); }
.ui-toast--warning { background: var(--ep-color-warning-bg); color: var(--ep-color-warning); }
.ui-dialog { width: min(100% - 32px, 440px); border: 1px solid var(--ep-color-border); border-radius: var(--ep-radius-lg); padding: 24px; background: var(--ep-color-surface); color: var(--ep-color-text-primary); box-shadow: var(--ep-shadow-floating); }
.ui-dialog::backdrop { background: rgb(33 29 42 / 40%); }
.ui-dialog h2 { margin: 0 0 14px; }
.ui-dialog__content { margin-bottom: 20px; line-height: 1.5; }

@media (max-width: 680px) {
  .toast-region { inset-inline: 12px; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}