/* 全局反馈：toast 提示 + loading 遮罩。
   toast 用「卡片 + 4px 主色左条 + 彩色图标」，浅深主题通用。
   类型色不走主题变量（主题里没有绿/橙/蓝），在此单独定义。*/

.toast-host {
  position: fixed; top: var(--sp-md); right: var(--sp-md); z-index: 9999;
  display: flex; flex-direction: column; gap: var(--sp-sm);
  pointer-events: none;
}

.toast {
  pointer-events: auto; cursor: pointer;
  display: flex; align-items: flex-start; gap: var(--sp-sm);
  min-width: 240px; max-width: 380px;
  padding: 12px 14px;
  background: var(--c-surface-lowest); color: var(--c-on-surface);
  border: 1px solid var(--c-outline-var);
  border-left: 4px solid var(--toast-accent, #5d5e60);
  border-radius: var(--r-lg); box-shadow: var(--shadow-md);
  animation: toast-in .18s var(--ease);
}
.toast--leaving { animation: toast-out .2s var(--ease) forwards; }

.toast__icon {
  flex: none; width: 18px; height: 18px; margin-top: 1px;
  display: grid; place-items: center;
  border-radius: var(--r-full);
  font-size: 12px; font-weight: 800; line-height: 1;
  color: #fff; background: var(--toast-accent, #5d5e60);
}
.toast__msg { font-size: var(--fs-sm); line-height: 1.4; word-break: break-word; }

/* 类型色 */
.toast--error   { --toast-accent: #d11a1a; }
.toast--warning { --toast-accent: #d97706; }
.toast--success { --toast-accent: #1f9d6a; }
.toast--info    { --toast-accent: #2563eb; }
.toast--notice  { --toast-accent: #7c3aed; }
.toast--default { --toast-accent: #5d5e60; }

@keyframes toast-in  { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
@keyframes toast-out { from { opacity: 1; transform: none; }            to { opacity: 0; transform: translateX(12px); } }

/* loading 遮罩 */
.loading-overlay {
  position: fixed; inset: 0; z-index: 9998;
  display: none; place-items: center;
  background: color-mix(in srgb, var(--c-bg) 35%, transparent);
  backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px);
}
.loading-overlay.is-on { display: grid; }
.loading-spinner {
  width: 38px; height: 38px; border-radius: var(--r-full);
  border: 3px solid var(--c-outline-var);
  border-top-color: var(--c-primary-container);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .toast, .toast--leaving { animation: none; }
  .loading-spinner { animation-duration: 1.4s; }
}