/* «Состояние системы» (21.10, site/status.js): проверки белыми карточками, точка — зелёная, жёлтая, красная. */

.st-main { min-width: 0; }
.st-back { flex: none; align-self: flex-start; margin: 2px 2px 0 -6px; }
.st-body { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.st-overall { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-radius: 18px; background: #fff;
  color: var(--card-text); box-shadow: var(--card-shadow); font-size: 16px; font-weight: 700; }
.st-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.st-card { padding: 14px 16px; border-radius: 18px; background: #fff; color: var(--card-text); box-shadow: var(--card-shadow);
  display: flex; flex-direction: column; gap: 6px; border-left: 4px solid #1E7D3A; }
.st-card.warn { border-left-color: #E3A008; }
.st-card.bad { border-left-color: #D93025; }
.st-top { display: flex; align-items: center; gap: 8px; font-size: 14.5px; }
.st-top b { flex: 1; min-width: 0; }
.st-level { flex: none; font-size: 12px; font-weight: 600; color: var(--card-text2); }
.st-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #1E7D3A; }
.warn > .st-dot, .warn .st-dot { background: #E3A008; }
.bad > .st-dot, .bad .st-dot { background: #D93025; }
.st-text { margin: 0; font-size: 13.5px; line-height: 19px; overflow-wrap: anywhere; }
.st-hint { margin: 0; font-size: 13px; line-height: 18px; color: #8A4B00; }
.st-card.bad .st-hint { color: #B3261E; }
.st-when { margin: 0; font-size: 12px; color: var(--card-text2); }
.st-alerts { padding: 12px 16px; border-radius: 16px; background: #fff; color: var(--card-text); box-shadow: var(--card-shadow);
  font-size: 13.5px; line-height: 19px; }
.st-alerts .bad { color: #B3261E; font-weight: 600; }