/* ---------- status dots (вместо смайлов-статусов) ---------- */
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #8b98a9; flex: none; vertical-align: baseline; }
.dot.on { background: var(--ok); box-shadow: 0 0 0 4px rgba(52,199,123,.15); }
.dot.warn { background: var(--warn); box-shadow: 0 0 0 4px rgba(245,165,36,.15); }
.dot.bad { background: var(--bad); box-shadow: 0 0 0 4px rgba(243,18,96,.15); }

/* ---------- badges / toast ---------- */
.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; border: 1px solid var(--stroke); }
.ok { background: rgba(52,199,123,.18); color: #4ade80; }
.bad { background: rgba(243,18,96,.18); color: #fb7185; }
#toast { position: fixed; bottom: calc(16px + env(safe-area-inset-bottom)); left: 12px; right: 12px; z-index: 50; display: flex; justify-content: center; pointer-events: none; }
#toast div, .toast-item {
  background: rgba(10,14,20,.88);
  border: 1px solid var(--stroke);
  color: var(--text);
  border-radius: 14px;
  padding: 11px 16px;
  font-size: 13px;
  max-width: 480px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
  opacity: 0;
  transform: translateY(12px) scale(0.97);
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease);
}
#toast div.show, .toast-item.show { opacity: 1; transform: none; }
#toast:empty { display: none; }

/* ---------- loading shimmer ---------- */
body.is-loading .status-card,
body.is-loading .prow,
.loading {
  position: relative;
  overflow: hidden;
}
body.is-loading .status-card::before,
.loading::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.09) 50%, transparent 80%);
  animation: shimmer 1.1s infinite;
  pointer-events: none;
}
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* ---------- skeleton (стабильный layout при загрузке списков) ---------- */
.skel {
  height: 13px;
  border-radius: 7px;
  margin: 7px 0;
  background: rgba(255,255,255,.09);
  animation: skelpulse 1.4s ease-in-out infinite;
}
@keyframes skelpulse { 0%,100% { opacity: .45; } 50% { opacity: 1; } }