.toast {
  padding: .9rem 1.15rem;
  border-radius: var(--m-r-sm);
  background: var(--m-fg);
  color: var(--m-bg);
  box-shadow: var(--m-shadow);
  margin: .5rem 0;
}
.toast-title { font-weight: 700; margin: 0 0 .15em; }
.toast p { margin: 0; font-size: 1rem; opacity: .85; }
.toast-success { background: var(--m-success); color: #fff; }
.toast-danger { background: var(--m-danger); color: #fff; }
.toast-primary { background: var(--m-primary); color: var(--m-on-primary); }

.toasts {
  position: fixed;
  z-index: var(--m-z-toast);
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: 1rem;
  pointer-events: none;
  bottom: 0;
  right: 0;
  max-width: 22rem;
  width: min(22rem, 100%);
}
.toasts > .toast { pointer-events: auto; margin: 0; }
.toasts-tl { top: 0; left: 0; bottom: auto; right: auto; }
.toasts-tr { top: 0; right: 0; bottom: auto; }
.toasts-bl { bottom: 0; left: 0; right: auto; }

.alert {
  padding: .9rem 1.15rem;
  border: 1px solid var(--m-border);
  border-left: 3px solid var(--m-fg-3);
  border-radius: var(--m-r-sm);
  background: var(--m-surface);
  margin: .8rem 0;
}
.alert p { margin: 0; }
.alert-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .35em;
}
.alert-title { margin: 0; font-weight: 700; }
.alert-actions { display: flex; gap: .4rem; flex-shrink: 0; }
.alert-success { border-left-color: var(--m-success); background: var(--m-alert-success-bg); }
.alert-warning { border-left-color: var(--m-warning); background: var(--m-alert-warning-bg); }
.alert-danger { border-left-color: var(--m-danger); background: var(--m-alert-danger-bg); }
.alert-primary { border-left-color: var(--m-primary); background: var(--m-primary-soft); }

.banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  padding: .7rem 1.15rem;
  background: var(--m-primary-soft);
  color: var(--m-fg);
  font-size: 1rem;
  font-weight: 600;
}
.banner-warn { background: var(--m-banner-warn-bg); }
.banner-danger { background: var(--m-banner-danger-bg); }

.empty { text-align: center; padding: 3rem 1.5rem; color: var(--m-fg-2); }
.empty-title { font-family: var(--m-font-head); font-weight: 700; font-size: 1.25rem; color: var(--m-fg); margin: 0 0 .35em; }
.empty-actions { margin-top: 1rem; display: flex; justify-content: center; gap: .5rem; }

.skel {
  background: linear-gradient(90deg, var(--m-surface) 25%, var(--m-border) 50%, var(--m-surface) 75%);
  background-size: 200% 100%;
  animation: m-skel 1.4s ease infinite;
  border-radius: var(--m-r-sm);
}
@keyframes m-skel { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skel { animation: none; background: var(--m-surface); } }
.skel-text { height: .85em; width: 100%; }
.skel-avatar { width: 2.75em; height: 2.75em; border-radius: 50%; }
.skel-card { height: 6rem; }

.spin {
  width: 1.35em;
  height: 1.35em;
  border: 2px solid var(--m-border-2);
  border-top-color: var(--m-primary);
  border-radius: 50%;
  animation: m-spin .6s linear infinite;
  display: inline-block;
  flex-shrink: 0;
}
.spin-sm { width: 1em; height: 1em; }
.spin-lg { width: 2.25em; height: 2.25em; border-width: 3px; }
.spin-block { display: grid; place-items: center; width: 100%; min-height: 6rem; }