.direction-situation {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  margin: 0 0 24px;
  padding: 20px 24px;
  border: 1px solid #3a735f;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(18, 80, 67, .76), rgba(8, 42, 52, .78));
  box-shadow: 0 16px 44px rgba(0, 8, 18, .22);
}
.direction-situation.warning { border-color: #9b783a; background: linear-gradient(135deg, rgba(105, 69, 18, .72), rgba(18, 42, 51, .8)); }
.direction-situation.critical { border-color: #ae5257; background: linear-gradient(135deg, rgba(111, 39, 45, .78), rgba(24, 36, 48, .82)); }
.direction-state { display: inline-flex; align-items: center; gap: 10px; color: #7be2bd; font-size: 12px; font-weight: 850; letter-spacing: .08em; white-space: nowrap; }
.direction-state::before { content: ""; width: 11px; height: 11px; border-radius: 50%; background: currentColor; box-shadow: 0 0 14px currentColor; }
.warning .direction-state { color: var(--amber); }
.critical .direction-state { color: var(--red); }
.direction-copy { min-width: 0; }
.direction-copy strong { display: block; font-size: clamp(19px, 1.6vw, 29px); }
.direction-copy span { display: block; margin-top: 5px; color: #c3d6e2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.direction-facts { display: flex; gap: 20px; color: #c6d8e3; white-space: nowrap; }
.direction-facts b { color: white; font-size: 22px; }
body.tv .direction-situation { padding: 24px 30px; }
@media (max-width: 900px) {
  .direction-situation { grid-template-columns: 1fr; gap: 10px; }
  .direction-facts { flex-wrap: wrap; }
  .direction-copy span { white-space: normal; }
}