.toast {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--navy);
  color: #fff;
  font-size: 14px;
}
.skel {
  height: 14px;
  border-radius: 7px;
  background: linear-gradient(90deg, var(--bg-muted), var(--line), var(--bg-muted));
  background-size: 200% 100%;
  animation: shine 1.2s ease-out infinite;
}
@keyframes shine { to { background-position: -200% 0; } }
.empty { text-align: center; padding: 24px 12px; }
.empty img { width: 96px; height: 96px; }
.risk {
  background: #fff7ed;
  color: #9a3412;
  border-radius: 12px;
  padding: 10px 12px;
  font-size: var(--caption);
}
.liq { height: 8px; border-radius: 8px; background: var(--bg-muted); overflow: hidden; }
.liq span { display: block; height: 100%; width: 67%; background: var(--up); }
.liq.warn span { width: 18%; background: var(--warning); }
.liq.hot span { width: 8%; background: var(--down); }
.icon { width: 24px; height: 24px; }
@media (prefers-color-scheme: dark) {
  .risk { background: #3b2a12; color: #fde68a; }
}